@charset "utf-8";

/******************************************************************************/
/***                                                                        ***/
/***                                                                        ***/
/***     styles.css                                                         ***/
/***                                                                        ***/
/***    【内容】                                                            ***/
/***                                                                        ***/
/***     ・コラム専用のスタイルを記述する                                   ***/
/***                                                                        ***/
/***                                                                        ***/
/******************************************************************************/

/* エネモール共通部分スタイル設定 */
.column h4,
.column h1 {
  color: #585656;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-optical-sizing: auto;
}
.column h1:after {
  background-color: #0168B6;
}
.column .main_img {
  margin: 0;
  padding: 0;
  border-left: none;
  line-height: 0;
}
.column h3 {
  padding-left: 0;
  background: none;
}
.column .common_btn {
  font-size: 15px;
  font-weight: bold;
}

.pc_vis {
  display: inline-block !important;
}
.sp_vis {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .column h4 {
    margin-bottom: 20px;
  }
  .pc_vis {
    display: none !important;
  }
  .sp_vis {
    display: inline-block !important;
  }
}


/* ページ固有のスタイル設定 */
.hokuden_bank {
  margin: 45px auto 100px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-optical-sizing: auto;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  font-feature-settings: "halt";
  line-height: 1.5;
  color: #333333;
}

.hokuden_bank .introduction {
  background-color: #EEF7FF;
  padding: 70px 45px 45px;
}

.hokuden_bank .introduction .overview {
  position: relative;
  border: 2px solid #CCE1F0;
  border-radius: 10px;
  background-color: #FFFFFF;
  margin-bottom: 20px;
  padding: 50px 40px 30px;
}
.hokuden_bank .introduction .overview h3 {
  background-image: linear-gradient(90deg, #b9dcf5, #f4f9ff 50%, #dfe5fb 75%, #ffe9df);
  border-radius: 24px;
  color: #0168B6;
  font-size: 25px;
  font-weight: 700;
  margin: auto;
  padding: 10px;
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
  width: 700px;
}
.hokuden_bank .introduction .overview:after {
  position: absolute;
  top: -50px;
  right: -15px;
  width: 205px;
  height: 194px;
  content: "";
  background: url("hokuden_bank_pic01.png") no-repeat center center/ contain;
}
.hokuden_bank .introduction .overview figure {
  margin-bottom: 20px;
  text-align: center;
}

.hokuden_bank .introduction .overview .breakdown {
  margin: 0 auto 10px;
  width: 100%;
}
.hokuden_bank .introduction .overview .breakdown p {
  font-size 20px
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0;
  text-align: center;
}
.hokuden_bank .introduction .overview .breakdown p em {
  color: #FF7330;
  font-size: 30px;
  font-weight: 700;
}
.hokuden_bank .introduction .overview .breakdown p em.color_normal {
  color: #333333;
}
.hokuden_bank .introduction .overview .breakdown p span {
  font-size: 16px;
  font-weight: 700;
}
.hokuden_bank .introduction .overview .breakdown_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hokuden_bank .introduction .overview .attention {
  text-align: center;
}
.hokuden_bank .introduction .overview .attention strong {
  color: #0168B6;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.6;
  background: linear-gradient(transparent 50%, #FFE9E0 50%);
}
.hokuden_bank .introduction .overview p:last-child {
  margin-bottom: 0;
}

.hokuden_bank .introduction .period {
  border: 2px solid #CCE1F0;
  border-radius: 10px;
  background-color: #FFFFFF;
  margin-bottom: 20px;
  padding: 30px 40px;
}
.hokuden_bank .introduction .period .period_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hokuden_bank .introduction .period .period_box h3 {
  background-image: linear-gradient(90deg, #b9dcf5, #f4f9ff 50%, #dfe5fb 75%, #ffe9df);
  border-radius: 24px;
  color: #0168B6;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
  width: 360px;
}
.hokuden_bank .introduction .period .period_box p {
  font-size: 20px;
  font-weight: 500;
}
.hokuden_bank .introduction .period .period_box .entry_period,
.hokuden_bank .introduction .period .period_box .cp_period {
  text-align: center;
  width: calc(50% - 22px);
}
.hokuden_bank .introduction .period a {
  display: block;
  margin: 0 auto;
  text-align: center;
}
.hokuden_bank .introduction .period a img {
  filter: drop-shadow(0px 10px 3px #C3DDF2);
  transition: all .2s;
}
.hokuden_bank .introduction .period a img:hover {
  filter: none;
  transform: translateY(5px);
  transition: all .2s;
}

.hokuden_bank .introduction .tos {
  border: 2px solid #CCE1F0;
  border-radius: 10px;
  background-color: #FFFFFF;
  margin-bottom: 70px;
  padding: 0; 
}
.hokuden_bank .introduction .tos .acdn_title {
  background-color: #0168B6;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 0;
  padding: 25px 45px;
  position: relative;
}
.hokuden_bank .introduction .tos .acdn_title::before {
	display: block;
	content: "";
	position: absolute;
	top:0; 
	right: 45px;
	bottom: 0;
	margin: auto;
	width: 30px;
	height: 2px;
	background-color: #FFFFFF;
	transition: .2s;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.hokuden_bank .introduction .tos .acdn_title::after {
	display: block;
	content: "";
	position: absolute;
	top: 0; 
	right: 45px;
	bottom: 0;
	margin: auto;
	width: 30px;
	height: 2px; 
	background-color: #FFFFFF;
	transition: .3s;
}
.hokuden_bank .introduction .tos .acdn_title.active {
  border-radius: 10px 10px 0 0;
  position: relative;
}
.hokuden_bank .introduction .tos .acdn_title.active::before {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.hokuden_bank .introduction .tos .acdn_title.active::after {
	background-color: transparent;
}
.hokuden_bank .introduction .tos .acdn_content {
  display: none;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner {
  padding: 40px;
  line-height: 1.2;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner h4 {
  color: #0168B6;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 0;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner p:has(+ ul),
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner p:has(+ .note),
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner ul:has(+ .note) {
  margin-bottom: 5px;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner ul {
  margin: 0 0 20px 15px;
  list-style-type: none;
  content: "・";
  color: #333;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner ul li,
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner ul li::marker {
  color: #333333;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner ul li::marker {
  content: "・";
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner .note {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px;
  padding-left: 1.25em;
  text-indent: -1.25em;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner .note.list {
  margin-bottom: 0;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner .note::before {
  content: "※";
  padding-right: 0.25em;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner .note:last-child {
  margin-bottom: 0;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner .indent {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0;
  padding-left: 2.5em;
  text-indent: -1.25em;
}
.hokuden_bank .introduction .tos .acdn_content .acdn_content_inner .indent:last-child {
  margin-bottom: 20px;
}

.hokuden_bank .introduction .about {
  margin-bottom: 70px;
  padding: 0; 
}
.hokuden_bank .introduction .about .about_title {
  text-align: center;
}
.hokuden_bank .introduction .about .about_txt {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}
.hokuden_bank .introduction .about .features_box {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 40px;
}
.hokuden_bank .introduction .about .features1,
.hokuden_bank .introduction .about .features2,
.hokuden_bank .introduction .about .features3 {
  border: 2px solid #CCE1F0;
  border-radius: 10px;
}
.hokuden_bank .introduction .about .features1 {
  order: 2;
  width: calc(40% - 20px);
}
.hokuden_bank .introduction .about .features2 {
  order: 1;
  width: calc(30% - 20px);
}
.hokuden_bank .introduction .about .features3 {
  order: 3;
  width: calc(30% - 20px);
}
.hokuden_bank .introduction .about .features1 h4,
.hokuden_bank .introduction .about .features2 h4,
.hokuden_bank .introduction .about .features3 h4 {
  background-image: linear-gradient(90deg, #b9dcf5, #f4f9ff 50%, #dfe5fb 75%, #ffe9df);
  border-radius: 8px 8px 0 0;
  color: #0168B6;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
  padding: 10px;
  text-align: center;
}
.hokuden_bank .introduction .about .features1 .detail,
.hokuden_bank .introduction .about .features2 .detail,
.hokuden_bank .introduction .about .features3 .detail {
  background-color: #FFFFFF;
  border-radius: 0 0 8px 8px;
  padding: 20px;
}
.hokuden_bank .introduction .about .features1 .detail figure,
.hokuden_bank .introduction .about .features2 .detail figure,
.hokuden_bank .introduction .about .features3 .detail figure {
  text-align: center;
}
.hokuden_bank .introduction .about .features1 .detail figure {
  padding: 20px 0 10px;
}
.hokuden_bank .introduction .about .features2 .detail figure {
  padding: 5px 0;
}
.hokuden_bank .introduction .about .features1 .detail a,
.hokuden_bank .introduction .about .features2 .detail a,
.hokuden_bank .introduction .about .features3 .detail a {
  display: block;
  width: 200px;
  border: 1px solid #0168B6;
  border-radius: 16px;
  color: #0168B6;
  font-size: 16px;
  font-weight: 500;
  margin: 0 auto 10px;
  padding: 3px;
  text-align: center;
}
.hokuden_bank .introduction .about .features1 .detail a:hover,
.hokuden_bank .introduction .about .features2 .detail a:hover,
.hokuden_bank .introduction .about .features3 .detail a:hover {
  background-color: #0168B6;
  color: #FFFFFF;
  text-decoration: none;
}
.hokuden_bank .introduction .about .features1 .detail a .arrow_ico,
.hokuden_bank .introduction .about .features2 .detail a .arrow_ico,
.hokuden_bank .introduction .about .features3 .detail a .arrow_ico {
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: super;
  text-decoration: none;
  font-size: 16px;
}
.hokuden_bank .introduction .about .features1 .detail a .arrow_ico::before,
.hokuden_bank .introduction .about .features1 .detail a .arrow_ico::after,
.hokuden_bank .introduction .about .features2 .detail a .arrow_ico::before,
.hokuden_bank .introduction .about .features2 .detail a .arrow_ico::after,
.hokuden_bank .introduction .about .features3 .detail a .arrow_ico::before,
.hokuden_bank .introduction .about .features3 .detail a .arrow_ico::after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.hokuden_bank .introduction .about .features1 .detail a .arrow_ico::before,
.hokuden_bank .introduction .about .features2 .detail a .arrow_ico::before,
.hokuden_bank .introduction .about .features3 .detail a .arrow_ico::before {
  width: 16px;
  height: 16px;
  -webkit-border-radius: 50%;
  border: 1px solid #0168B6;
  border-radius: 50%;
  background: #FFFFFF;
}
.hokuden_bank .introduction .about .features1 .detail a .arrow_ico::after,
.hokuden_bank .introduction .about .features2 .detail a .arrow_ico::after,
.hokuden_bank .introduction .about .features3 .detail a .arrow_ico::after {
  top: -2px;
  left: 1px;
  right: 0px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #0168B6;
  border-right: 1px solid #0168B6;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.hokuden_bank .introduction .about .features1 .detail p,
.hokuden_bank .introduction .about .features2 .detail p,
.hokuden_bank .introduction .about .features3 .detail p {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
  text-align: left;
}
.hokuden_bank .introduction .about .features1 .detail p {
  padding: 0 10px;
}
.hokuden_bank .introduction .about .features_more {
  display: block;
  margin: 0 auto 80px;
  text-align: center;
}
.hokuden_bank .introduction .about .features_more img {
  filter: drop-shadow(0px 10px 3px #C3DDF2);
  transition: all .2s;
}
.hokuden_bank .introduction .about .features_more img:hover {
  filter: none;
  transform: translateY(5px);
  transition: all .2s;
}

.hokuden_bank .introduction .about .reward_points {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 60px;
  text-align: center;
}
.hokuden_bank .introduction .about .reward_points strong {
  background-image: linear-gradient(90deg, #b9dcf5, #f4f9ff 50%, #dfe5fb 75%, #ffe9df);
  background-size: 100% 40%;
  background-position: bottom;
  background-repeat: no-repeat;
}
.hokuden_bank .introduction .about .reward_points em {
  color: #FF4F14;
  font-size: 52px;
  font-weight: 700;
}

.hokuden_bank .introduction .requirements {
  border-radius: 10px;
  background-color: #FFFFFF;
  margin-bottom: 20px;
  padding: 50px 40px 40px;
  position: relative;
}
.hokuden_bank .introduction .requirements h4 {
  background-color: #FFFFFF;
  border: 2px solid #CCE1F0;
  border-radius: 36px;
  color: #0168B6;
  font-size: 24px;
  font-weight: 700;
  padding: 15px;
  position: absolute;
  top: -30px;
  left: calc(50% - 190px);
  text-align: center;
  width: 380px;
}
.hokuden_bank .introduction .requirements .required {
  background: linear-gradient(90deg, #b9dcf5, #f4f9ff 50%, #dfe5fb 75%, #ffe9df);
  border-radius: 10px;
  padding: 2px;
}
.hokuden_bank .introduction .requirements .required .required_box {
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  position: relative;
}
.hokuden_bank .introduction .requirements .required .required_box::before {
  position: absolute;
  top: calc(50% - 45px);
  left: -15px;
  width: 117px;
  height: 89px;
  content: "";
  background: url("hokuden_bank_pic06.png") no-repeat center center/ contain;
}
.hokuden_bank .introduction .requirements .required .required_box .required_item {
  border-right: 1px dashed #CCE1F0;
  padding: 10px 0;
  width: 40%;
}
.hokuden_bank .introduction .requirements .required .required_box .required_item p {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0;
  padding-left: 120px;
  text-align: left;
}
.hokuden_bank .introduction .requirements .required .required_box .required_terms {
  border-right: 1px dashed #CCE1F0;
  padding: 10px 0;
  text-align: center;
  width: 40%;
}
.hokuden_bank .introduction .requirements .required .required_box .required_terms p {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0;
  text-align: left;
}
.hokuden_bank .introduction .requirements .required .required_box .required_terms p em {
  color: #FF4F14;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.hokuden_bank .introduction .requirements .required .required_box .required_terms .add_info {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 10px;
}
.hokuden_bank .introduction .requirements .required .required_box .required_rate {
  width: 20%;
}
.hokuden_bank .introduction .requirements .required .required_box .required_rate p {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0;
  text-align: center;
}
.hokuden_bank .introduction .requirements .required .required_box .required_rate p em {
  color: #FF4F14;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
}
.hokuden_bank .introduction .requirements .speech_bubble {
  background-color: #EEF7FF;
  border-radius: 10px;
  margin: 15px auto 10px;
  padding: 10px;
  position: relative;
}
.hokuden_bank .introduction .requirements .speech_bubble::before {
  content: "";
  position: absolute;
  top: -20px;
  left: calc(50% - 10px);
  border: 10px solid transparent;
  border-bottom-color: #EEF7FF;
}
.hokuden_bank .introduction .requirements .speech_bubble p {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0;
  text-align: center;
}
.hokuden_bank .introduction .requirements .speech_bubble em {
  color: #FF4F14;
  font-size: 28px;
  font-weight: 700;
}
.hokuden_bank .introduction .requirements .additional {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.hokuden_bank .introduction .requirements .additional1,
.hokuden_bank .introduction .requirements .additional2,
.hokuden_bank .introduction .requirements .additional3,
.hokuden_bank .introduction .requirements .additional4,
.hokuden_bank .introduction .requirements .additional5 {
  border: 2px solid #CCE1F0;
  border-radius: 10px;
  margin: 5px;
  padding: 10px 0 10px;
  text-align: center;
  width: 32%;
}
.hokuden_bank .introduction .requirements .additional1,
.hokuden_bank .introduction .requirements .additional4 {
  margin-left: 0;
}
.hokuden_bank .introduction .requirements .additional3,
.hokuden_bank .introduction .requirements .additional5 {
  margin-right: 0;
}
.hokuden_bank .introduction .requirements .additional1 h5,
.hokuden_bank .introduction .requirements .additional2 h5,
.hokuden_bank .introduction .requirements .additional3 h5,
.hokuden_bank .introduction .requirements .additional4 h5,
.hokuden_bank .introduction .requirements .additional5 h5 {
  background-color: #FF4F14;
  border-radius: 24px;
  color: #FFFFFF;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  margin: auto;
  padding: 5px 10px;
}
.hokuden_bank .introduction .requirements .additional1 .add_item,
.hokuden_bank .introduction .requirements .additional2 .add_item,
.hokuden_bank .introduction .requirements .additional3 .add_item,
.hokuden_bank .introduction .requirements .additional4 .add_item,
.hokuden_bank .introduction .requirements .additional5 .add_item {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0;
}
.hokuden_bank .introduction .requirements .additional1 .add_terms,
.hokuden_bank .introduction .requirements .additional2 .add_terms,
.hokuden_bank .introduction .requirements .additional3 .add_terms,
.hokuden_bank .introduction .requirements .additional4 .add_terms,
.hokuden_bank .introduction .requirements .additional5 .add_terms {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 0;
}
.hokuden_bank .introduction .requirements .additional1 .add_rate,
.hokuden_bank .introduction .requirements .additional2 .add_rate,
.hokuden_bank .introduction .requirements .additional3 .add_rate,
.hokuden_bank .introduction .requirements .additional4 .add_rate,
.hokuden_bank .introduction .requirements .additional5 .add_rate {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.0;
  margin-bottom: 0;
}
.hokuden_bank .introduction .requirements .additional1 .add_rate em,
.hokuden_bank .introduction .requirements .additional2 .add_rate em,
.hokuden_bank .introduction .requirements .additional3 .add_rate em,
.hokuden_bank .introduction .requirements .additional4 .add_rate em,
.hokuden_bank .introduction .requirements .additional5 .add_rate em {
  color: #FF4F14;
  font-size: 56px;
  font-weight: 700;
}
.hokuden_bank .introduction .requirements .note {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.hokuden_bank .introduction .requirements .note a {
  color: #0168B6;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hokuden_bank .introduction .requirements .note a:hover {
  text-decoration: none;
}
.hokuden_bank .introduction .requirements .requirements_more {
  position: absolute;
  bottom: -28px;
  left: 0;
  right: 0;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.hokuden_bank .introduction .requirements .requirements_more img {
  filter: drop-shadow(0px 10px 3px #C3DDF2);
  transition: all .2s;
}
.hokuden_bank .introduction .requirements .requirements_more img:hover {
  filter: none;
  transform: translateY(5px);
  transition: all .2s;
}

.hokuden_bank .procedure {
  background-color: #066CB8;
  margin: 0 auto;
  padding: 120px 45px 30px;
  position: relative;
}
.hokuden_bank .procedure h3 {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  text-align: center;
}
.hokuden_bank .procedure .procedure_content {
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 80px 40px 50px;
}
.hokuden_bank .procedure .procedure_content .procedure_content_inner {
  margin: 0 auto;
  text-align: left;
  width: fit-content;
}
.hokuden_bank .procedure .procedure_content .step {
  color: #0168B6;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.hokuden_bank .procedure .procedure_content .step:has(+ a) {
  margin-bottom: 40px;
}
.hokuden_bank .procedure .procedure_content .step em {
  background-image: linear-gradient(90deg, #b9dcf5, #f4f9ff 50%, #dfe5fb 75%, #ffe9df);
  border-radius: 24px;
  color: #0168B6;
  font-size: 18px;
  font-weight: 700;
  margin-right: 10px;
  padding: 8px 30px;
}
.hokuden_bank .procedure .procedure_content .note {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0;
  padding-left: 1.25em;
  text-indent: -1.25em;
}
.hokuden_bank .procedure .procedure_content .note::before {
  content: "※";
  padding-right: 0.25em;
}
.hokuden_bank .procedure .procedure_content .note a {
  display: inline;
  color: #0168B6;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hokuden_bank .procedure .procedure_content .note a:hover {
  text-decoration: none;
}
.hokuden_bank .procedure .procedure_content .note:has(+ .step) {
  margin-bottom: 30px;
}
.hokuden_bank .procedure .procedure_content a {
  display: block;
  margin: 0 auto;
  text-align: center;
}
.hokuden_bank .procedure .procedure_content a img {
  filter: drop-shadow(0px 10px 3px #C3DDF2);
  transition: all .2s;
}
.hokuden_bank .procedure .procedure_content a img:hover {
  filter: none;
  transform: translateY(5px);
  transition: all .2s;
}

@media screen and (max-width: 767px) {
  .hokuden_bank {
    margin: 0 -20px clamp(50px, 0.36rem + 12.29vw, 100px);
  }

  .hokuden_bank .introduction {
    padding: clamp(50px, 0.91rem + 9.83vw, 90px) clamp(15px, 0.11rem + 3.69vw, 30px) clamp(60px, -0.12rem + 17.20vw, 130px);
  }
  .hokuden_bank .introduction .overview {
    border: clamp(1px, -0.05rem + 0.49vw, 3px) solid #CCE1F0;
    border-radius: clamp(5px, 0.04rem + 1.23vw, 10px);
    margin-bottom: clamp(15px, 0.11rem + 3.69vw, 30px);
    padding: clamp(20px, -1.51rem + 12.29vw, 70px) clamp(12px, -0.80rem + 6.88vw, 40px) clamp(21.43px, -0.24rem + 7.02vw, 50px);
  }
  .hokuden_bank .introduction .overview h3 {
    border-radius: clamp(24px, 0.837rem + 2.95vw, 36px);
    font-size: clamp(14px, -0.01rem + 3.93vw, 30px);
    padding: clamp(8.5px, 0.06rem + 2.09vw, 17px);
    top: clamp(-22px, -0.90rem - 0.98vw, -18px);
    width: 71.43%;
  }
  .hokuden_bank .introduction .overview:after {
    top: clamp(-45px, -2.22rem - 1.23vw, -40px);
    right: clamp(-15px, -0.35rem - 1.23vw, -10px);
    width: clamp(96px, -0.03rem + 26.78vw, 205px);
    height: clamp(91px, -0.01rem + 25.31vw, 194px);
  }
  .hokuden_bank .introduction .overview figure {
    margin-bottom: clamp(0px, -0.55rem + 2.46vw, 10px);
  }
  .hokuden_bank .introduction .overview figure img {
    width: 72.57%;
  }
  .hokuden_bank .introduction .overview .breakdown p {
    font-size: clamp(11px, -0.06rem + 3.44vw, 25px);
    line-height: 1.4;
    text-align: center;
  }
  .hokuden_bank .introduction .overview .breakdown p em {
    font-size: clamp(22px, -0.11rem + 6.88vw, 50px);
    line-height: 1.4;
  }
  .hokuden_bank .introduction .overview .breakdown p span {
    font-size: clamp(11px, -0.06rem + 3.44vw, 25px);
    line-height: 1.4;
  }
  .hokuden_bank .introduction .overview .breakdown .breakdown_box p:nth-child(1) {
    margin-bottom: 0;
    text-align: center;
   width: 25%;
  }
  .hokuden_bank .introduction .overview .breakdown .breakdown_box p:nth-child(2) {
    margin-bottom: 0;
    text-align: left;
    width: 75%;
  }
  .hokuden_bank .introduction .overview .attention {
    line-height: clamp(1.4em, 1.22em + 0.05vw, 1.6em);
    text-align: center;
  }
  .hokuden_bank .introduction .overview .attention strong {
    font-size: clamp(14px, -0.01rem + 3.93vw, 30px);
    font-weight: 700;
  }

  .hokuden_bank .introduction .period {
    border: clamp(1px, -0.05rem + 0.49vw, 3px) solid #CCE1F0;
    border-radius: clamp(5px, 0.04rem + 1.23vw, 10px);
    margin-bottom: clamp(15px, 0.11rem + 3.69vw, 30px);
    padding: clamp(20px, 0.697rem + 2.46vw, 30px) clamp(13.33px, 0.46rem + 1.64vw, 20px) clamp(20px, -0.41rem + 7.37vw, 50px);
  }
  .hokuden_bank .introduction .period .period_box {
    flex-direction: column;
  }
  .hokuden_bank .introduction .period .period_box h3 {
    border-radius: clamp(24px, 0.837rem + 2.95vw, 36px);
    font-size: clamp(14px, -0.01rem + 3.93vw, 30px);
    margin: 0 auto clamp(5px, 0.04rem + 1.23vw, 10px);
    padding: clamp(8.5px, 0.06rem + 2.09vw, 17px);
    width: 75%;
  }
  .hokuden_bank .introduction .period .period_box p {
    font-size: clamp(13px, -0.02rem + 3.69vw, 28px);
    margin-bottom: clamp(15px, 0.11rem + 3.69vw, 30px);
  }
  .hokuden_bank .introduction .period .period_box .entry_period,
  .hokuden_bank .introduction .period .period_box .cp_period {
    margin: 0 auto;
    width: 100%;
  }
  .hokuden_bank .introduction .period a img {
    filter: drop-shadow(0px clamp(5px, 0.04rem + 1.23vw, 10px) 3px #C3DDF2);
  }

  .hokuden_bank .introduction .tos {
    border: clamp(1px, 0.01rem + 0.25vw, 2px) solid #CCE1F0;
    border-radius: clamp(5px, 0.04rem + 1.23vw, 10px);
    margin-bottom: clamp(50px, -0.19rem + 14.74vw, 110px);
  }
  .hokuden_bank .introduction .tos .acdn_title {
    border-radius: clamp(5px, 0.04rem + 1.23vw, 10px);
    font-size: clamp(15px, 0.00rem + 4.18vw, 32px);
    padding: clamp(15px, 0.38rem + 2.46vw, 25px) clamp(25px, 0.46rem + 4.91vw, 45px);
  }
  .hokuden_bank .introduction .tos .acdn_title::before,
  .hokuden_bank .introduction .tos .acdn_title::after {
    right: clamp(20px, 0.14rem + 4.91vw, 40px);
    width: clamp(16px, 0.23rem + 3.44vw, 30px);
    height: clamp(1px, 0.01rem + 0.25vw, 2px);
  }
  .hokuden_bank .introduction .tos .acdn_title.active {
    border-radius: clamp(5px, 0.04rem + 1.23vw, 10px) clamp(5px, 0.04rem + 1.23vw, 10px) 0 0;
  }
  .hokuden_bank .introduction .tos .acdn_content .acdn_content_inner {
    padding: clamp(25px, -0.37rem + 8.60vw, 60px) clamp(20px, -0.41rem + 7.37vw, 50px) clamp(20px, -0.41rem + 7.37vw, 50px);
  }
  .hokuden_bank .introduction .tos .acdn_content .acdn_content_inner h4 {
    font-size: clamp(15px, 0.11rem + 3.69vw, 30px);
    margin-bottom: clamp(5px, 0.04rem + 1.23vw, 10px);
  }
  .hokuden_bank .introduction .tos .acdn_content .acdn_content_inner p {
    font-size: clamp(13px, -0.02rem + 3.69vw, 28px);
    margin-bottom: clamp(20px, 0.14rem + 4.91vw, 40px);
  }
  .hokuden_bank .introduction .tos .acdn_content .acdn_content_inner ul {
    margin-bottom: clamp(20px, 0.14rem + 4.91vw, 40px);
  }
  .hokuden_bank .introduction .tos .acdn_content .acdn_content_inner ul li {
    font-size: clamp(13px, -0.02rem + 3.69vw, 28px);
  }
  .hokuden_bank .introduction .tos .acdn_content .acdn_content_inner .note {
    font-size: clamp(12px, 0.03rem + 3.19vw, 25px);
    margin-bottom: clamp(20px, 0.14rem + 4.91vw, 40px);
  }
  .hokuden_bank .introduction .tos .acdn_content .acdn_content_inner .indent {
    font-size: clamp(12px, 0.03rem + 3.19vw, 25px);
  }

  .hokuden_bank .introduction .about {
    margin-bottom: 0;
  }
  .hokuden_bank .introduction .about .about_title img {
    width: 62.29%;
  }
  .hokuden_bank .introduction .about .about_txt {
    font-size: clamp(13px, -0.02rem + 3.69vw, 28px);
    line-height: 1.5;
    margin-bottom: clamp(20px, 0.14rem + 4.91vw, 40px);
  }
  .hokuden_bank .introduction .about .features_box {
    align-items: center;
    flex-direction: column;
    margin-bottom: clamp(20px, -0.41rem + 7.37vw, 50px);
  }
  .hokuden_bank .introduction .about .features1,
  .hokuden_bank .introduction .about .features2,
  .hokuden_bank .introduction .about .features3 {
    border: clamp(1px, 0.01rem + 0.25vw, 2px) solid #CCE1F0;
    border-radius: clamp(5px, 0.04rem + 1.23vw, 10px);
  }
  .hokuden_bank .introduction .about .features1,
  .hokuden_bank .introduction .about .features2 {
    margin-bottom: clamp(10px, 0.07rem + 2.46vw, 20px);
  }
  .hokuden_bank .introduction .about .features3 {
    margin-bottom: 0;
  }
  .hokuden_bank .introduction .about .features1 {
    order: 1;
    width: 100%;
  }
  .hokuden_bank .introduction .about .features2 {
    order: 2;
    width: 100%;
  }
  .hokuden_bank .introduction .about .features3 {
    order: 3;
    width: 100%;
  }
  .hokuden_bank .introduction .about .features1 h4,
  .hokuden_bank .introduction .about .features2 h4,
  .hokuden_bank .introduction .about .features3 h4 {
    border-radius: clamp(4px, 0.03rem + 0.98vw, 8px) clamp(4px, 0.03rem + 0.98vw, 8px) 0 0;
    font-size: clamp(14px, -0.01rem + 3.93vw, 30px);
    padding: clamp(7.5px, 0.05rem + 1.84vw, 15px);
  }
  .hokuden_bank .introduction .about .features1 .detail,
  .hokuden_bank .introduction .about .features2 .detail,
  .hokuden_bank .introduction .about .features3 .detail {
    background-color: #FFFFFF;
    border-radius: 0 0 clamp(4px, 0.03rem + 0.98vw, 8px) clamp(4px, 0.03rem + 0.98vw, 8px);
    padding: clamp(10px, 0.07rem + 2.46vw, 20px) clamp(10px, 0.07rem + 2.46vw, 20px) clamp(20px, 0.70rem + 2.46vw, 30px);
  }
  .hokuden_bank .introduction .about .features1 .detail figure,
  .hokuden_bank .introduction .about .features2 .detail figure,
  .hokuden_bank .introduction .about .features3 .detail figure {
    margin: 0 auto;
    width: 46%;
  }
  .hokuden_bank .introduction .about .features1 .detail figure {
    padding: 15px 0 0;
    padding: 5px 0 0;
  }
  .hokuden_bank .introduction .about .features1 .detail a,
  .hokuden_bank .introduction .about .features2 .detail a,
  .hokuden_bank .introduction .about .features3 .detail a {
    width: 80%;
    border: clamp(2px, 0.07rem + 0.25vw, 3px) solid #0168B6;
    border-radius: 30px;
    font-size: clamp(16px, 0.23rem + 3.44vw, 30px);
    margin: clamp(0px, -0.55rem + 2.46vw, 10px) auto clamp(10px, 0.07rem + 2.46vw, 20px);
    padding: clamp(3px, 0.02rem + 0.74vw, 6px);
  }
  .hokuden_bank .introduction .about .features1 .detail a .arrow_ico,
  .hokuden_bank .introduction .about .features2 .detail a .arrow_ico,
  .hokuden_bank .introduction .about .features3 .detail a .arrow_ico {
    padding: 0 0 0 clamp(18px, 0.462rem + 2.95vw, 30px);
    font-size: clamp(18px, 0.462rem + 2.95vw, 30px);
  }
  .hokuden_bank .introduction .about .features1 .detail a .arrow_ico::before,
  .hokuden_bank .introduction .about .features2 .detail a .arrow_ico::before,
  .hokuden_bank .introduction .about .features3 .detail a .arrow_ico::before {
    width: clamp(18px, 0.462rem + 2.95vw, 30px);
    height: clamp(18px, 0.462rem + 2.95vw, 30px);
    border: clamp(1px, 0.01rem + 0.25vw, 2px) solid #0168B6;
  }
  .hokuden_bank .introduction .about .features1 .detail a .arrow_ico::after,
  .hokuden_bank .introduction .about .features2 .detail a .arrow_ico::after,
  .hokuden_bank .introduction .about .features3 .detail a .arrow_ico::after {
    top: clamp(-6px, -0.02rem - 0.74vw, -3px);
    left: clamp(2px, 0.01rem + 0.49vw, 4px);
    width: clamp(6px, 0.15rem + 0.98vw, 10px);
    height: clamp(6px, 0.15rem + 0.98vw, 10px);
    border-top: clamp(1px, 0.01rem + 0.25vw, 2px) solid #0168B6;
    border-right: clamp(1px, 0.01rem + 0.25vw, 2px) solid #0168B6;
  }
  .hokuden_bank .introduction .about .features1 .detail p,
  .hokuden_bank .introduction .about .features2 .detail p,
  .hokuden_bank .introduction .about .features3 .detail p {
    font-size: clamp(12px, 0.03rem + 3.19vw, 25px);
    line-height: 1.5;
    padding: 0 clamp(10px, -1.03rem + 7.37vw, 40px);
  }
  .hokuden_bank .introduction .about .features3 .detail p {
    display: none;
  }
  .hokuden_bank .introduction .about .features_more {
    margin: 0 auto clamp(50px, -0.74rem + 17.20vw, 120px);
  }
  .hokuden_bank .introduction .about .features_more img {
    filter: drop-shadow(0px clamp(5px, 0.04rem + 1.23vw, 10px) 3px #C3DDF2);
  }

  .hokuden_bank .introduction .about .reward_points {
    font-size: clamp(19px, -0.08rem + 5.65vw, 42px);
    line-height: 1.1;
    margin-bottom: clamp(35px, 0.25rem + 8.60vw, 70px);
  }
  .hokuden_bank .introduction .about .reward_points em {
    font-size: clamp(28px, 0.09rem + 7.37vw, 58px);
  }
  .hokuden_bank .introduction .requirements {
    padding: clamp(35px, -0.02rem + 9.83vw, 75px) clamp(25px, 0.18rem + 6.14vw, 50px) clamp(45px, 0.32rem + 11.06vw, 90px);
  }
  .hokuden_bank .introduction .requirements h4 {
    border: clamp(1px, 0.01rem + 0.25vw, 2px) solid #CCE1F0;
    font-size: clamp(14px, -0.01rem + 3.93vw, 30px);
    margin-bottom: 0;
    padding: clamp(7.5px, 0.05rem + 1.84vw, 15px);
    top: clamp(-35px, -0.19rem - 4.18vw, -18px);
    left: 23%;
    right: 23%;
    width: 54%;
  }
  .hokuden_bank .introduction .requirements .required {
    padding: clamp(2px, 0.01rem + 0.49vw, 4px);
  }
  .hokuden_bank .introduction .requirements .required .required_box {
    flex-direction: column;
    padding: clamp(15px, -0.72rem + 7.37vw, 45px) clamp(15px, -0.72rem + 7.37vw, 45px) clamp(5px, -0.52rem + 3.69vw, 20px);
  }
  .hokuden_bank .introduction .requirements .required .required_box::before {
    top: clamp(-40px, -0.14rem - 4.91vw, -20px);
    left: clamp(-10px, -0.04rem - 1.23vw, -5px);
    width: clamp(84px, -0.06rem + 23.59vw, 180px);
    height: clamp(64px, -0.04rem + 17.94vw, 137px);
  }
  .hokuden_bank .introduction .requirements .required .required_box .required_item {
    border-right: none;
    border-bottom: clamp(1px, 0.01rem + 0.25vw, 2px) dotted #CCE1F0;
    padding: 10px 0 clamp(10px, 0.07rem + 2.46vw, 20px);
    width: 100%;
  }
  .hokuden_bank .introduction .requirements .required .required_box .required_item p {
    font-size: clamp(14px, -0.01rem + 3.93vw, 30px);
    padding-left: 0;
    text-align: center;
  }
  .hokuden_bank .introduction .requirements .required .required_box .required_terms {
    border-right: none;
    border-bottom: clamp(1px, 0.01rem + 0.25vw, 2px) dotted #CCE1F0;
    padding: clamp(10px, 0.07rem + 2.46vw, 20px) 0 clamp(5px, 0.04rem + 1.23vw, 10px);
    width: 100%;
  }
  .hokuden_bank .introduction .requirements .required .required_box .required_terms p {
    font-size: clamp(13px, -0.02rem + 3.69vw, 28px);
    text-align: center;
  }
  .hokuden_bank .introduction .requirements .required .required_box .required_terms p em {
    font-size: clamp(17px, 0.01rem + 4.67vw, 36px);
  }
  .hokuden_bank .introduction .requirements .required .required_box .required_terms .add_info {
    font-size: clamp(11.5px, -0.03rem + 3.32vw, 25px);
    margin-top: clamp(5px, 0.04rem + 1.23vw, 10px);
  }
  .hokuden_bank .introduction .requirements .required .required_box .required_rate p {
    font-size: clamp(14px, 0.10rem + 3.44vw, 28px);
  }
  .hokuden_bank .introduction .requirements .required .required_box .required_rate p em {
    font-size: clamp(28px, 0.20rem + 6.88vw, 56px);
  }
  .hokuden_bank .introduction .requirements .speech_bubble {
    border-radius: clamp(5px, 0.04rem + 1.23vw, 10px);
    margin: clamp(20px, 0.70rem + 2.46vw, 30px) auto clamp(20px, -0.13rem + 6.14vw, 45px);
    padding: clamp(10px, 0.07rem + 2.46vw, 20px);
  }
  .hokuden_bank .introduction .requirements .speech_bubble::before {
    top: clamp(-38px, -0.25rem - 4.42vw, -20px);
    left: calc(50% - clamp(10px, 0.07rem + 2.46vw, 20px));
    border: clamp(10px, 0.07rem + 2.46vw, 20px) solid transparent;
    border-bottom-color: #EEF7FF;
  }
  .hokuden_bank .introduction .requirements .speech_bubble p {
    font-size: clamp(12px, 0.03rem + 3.19vw, 25px);
    line-height: 1.2;
  }
  .hokuden_bank .introduction .requirements .speech_bubble em {
    font-size: clamp(17px, 0.07rem + 4.42vw, 35px);
  }
  .hokuden_bank .introduction .requirements .additional {
    flex-direction: column;
    margin-bottom: clamp(5px, 0.04rem + 1.23vw, 10px);
  }
  .hokuden_bank .introduction .requirements .additional1,
  .hokuden_bank .introduction .requirements .additional2,
  .hokuden_bank .introduction .requirements .additional3,
  .hokuden_bank .introduction .requirements .additional4,
  .hokuden_bank .introduction .requirements .additional5 {
    border: 2px solid #CCE1F0;
    border-radius: clamp(5px, 0.04rem + 1.23vw, 10px);
    margin: 0px 0px clamp(5px, 0.04rem + 1.23vw, 10px);
    padding: clamp(5px, 0.04rem + 1.23vw, 10px) 0 clamp(10px, 0.07rem + 2.46vw, 20px);
    text-align: center;
    width: 100%;
  }
  .hokuden_bank .introduction .requirements .additional1 h5,
  .hokuden_bank .introduction .requirements .additional2 h5,
  .hokuden_bank .introduction .requirements .additional3 h5,
  .hokuden_bank .introduction .requirements .additional4 h5,
  .hokuden_bank .introduction .requirements .additional5 h5 {
    display: inline;
    font-size: clamp(13px, -0.02rem + 3.69vw, 28px);
    margin-right: clamp(0px, -0.55rem + 2.46vw, 10px);
    margin-bottom: 10px;
    padding: clamp(2px, -0.04rem + 0.74vw, 5px) clamp(10px, 0.07rem + 2.46vw, 20px);
  }
  .hokuden_bank .introduction .requirements .additional1 .add_item,
  .hokuden_bank .introduction .requirements .additional2 .add_item,
  .hokuden_bank .introduction .requirements .additional3 .add_item,
  .hokuden_bank .introduction .requirements .additional4 .add_item,
  .hokuden_bank .introduction .requirements .additional5 .add_item {
    display: inline;
    font-size: clamp(14px, 0.10rem + 3.44vw, 28px);
  }
  .hokuden_bank .introduction .requirements .additional1 .add_terms,
  .hokuden_bank .introduction .requirements .additional2 .add_terms,
  .hokuden_bank .introduction .requirements .additional3 .add_terms,
  .hokuden_bank .introduction .requirements .additional4 .add_terms,
  .hokuden_bank .introduction .requirements .additional5 .add_terms {
    font-size: clamp(12px, 0.03rem + 3.19vw, 25px);
    line-height: 1.4;
    margin-top: clamp(5px, 0.04rem + 1.23vw, 10px);
  }
  .hokuden_bank .introduction .requirements .additional1 .add_rate,
  .hokuden_bank .introduction .requirements .additional2 .add_rate,
  .hokuden_bank .introduction .requirements .additional3 .add_rate,
  .hokuden_bank .introduction .requirements .additional4 .add_rate,
  .hokuden_bank .introduction .requirements .additional5 .add_rate {
    font-size: clamp(14px, 0.10rem + 3.44vw, 28px);
  }
  .hokuden_bank .introduction .requirements .additional1 .add_rate em,
  .hokuden_bank .introduction .requirements .additional2 .add_rate em,
  .hokuden_bank .introduction .requirements .additional3 .add_rate em,
  .hokuden_bank .introduction .requirements .additional4 .add_rate em,
  .hokuden_bank .introduction .requirements .additional5 .add_rate em {
    font-size: clamp(28px, 0.20rem + 6.88vw, 56px);
  }
  .hokuden_bank .introduction .requirements .note {
    font-size: clamp(12px, 0.03rem + 3.19vw, 25px);
    text-align: left;
    line-height: 1.4;
    margin-bottom: 0;
    padding-left: 1.0em;
    text-indent: -1.0em;
  }
  .hokuden_bank .introduction .requirements .requirements_more {
    bottom: clamp(-50px, -0.18rem - 6.14vw, -25px);
    width: 90%;
  }
  .hokuden_bank .introduction .requirements .requirements_more img {
    filter: drop-shadow(0px clamp(5px, 0.04rem + 1.23vw, 10px) 3px #C3DDF2);
  }

  .hokuden_bank .procedure {
    padding: clamp(65px, -0.64rem + 20.88vw, 150px) clamp(15px, -0.17rem + 4.91vw, 35px) clamp(25px, 0.18rem + 6.14vw, 50px);
  }
  .hokuden_bank .procedure h3 {
    top: clamp(20px, -0.41rem + 7.37vw, 50px);
  }
  .hokuden_bank .procedure h3 img {
    width: 84%;
  }
  .hokuden_bank .procedure .procedure_content {
    padding: clamp(40px, 0.29rem + 9.83vw, 80px) clamp(15px, 0.11rem + 3.69vw, 30px) clamp(25px, 0.18rem + 6.14vw, 50px);
  }
  .hokuden_bank .procedure .procedure_content .step {
    font-size: clamp(14px, -0.01rem + 3.93vw, 30px);
    line-height: 1.5;
    margin-bottom: 5px;
    text-align: center;
  }
  .hokuden_bank .procedure .procedure_content .step:has(+ a) {
    margin-bottom: clamp(10px, -0.48rem + 4.91vw, 30px);
  }
  .hokuden_bank .procedure .procedure_content .step em {
    border-radius: 36px;
    display: block;
    font-size: clamp(14px, -0.01rem + 3.93vw, 30px);
    margin: 0 auto clamp(5px, 0.04rem + 1.23vw, 10px);;
    padding: 2px;
    text-align: center;
    width: 27%;
  }
  .hokuden_bank .procedure .procedure_content .note {
    font-size: clamp(12px, 0.03rem + 3.19vw, 25px);
  }
  .hokuden_bank .procedure .procedure_content .note:has(+ .step) {
    margin-bottom: clamp(20px, 0.70rem + 2.46vw, 30px);
  }
  .hokuden_bank .procedure .procedure_content a img {
    filter: drop-shadow(0px clamp(5px, 0.04rem + 1.23vw, 10px) 3px #C3DDF2);
  }
  .hokuden_bank .procedure .procedure_content a img:hover {
    transform: translateY(6px);
  }
}


@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .sp_menu_panel,
  .page_top {
    display: none;
  }
}