@charset "utf-8";

/* スマホ（〜767px） */
@media (max-width: 767px) {
  /* スマホ専用スタイル */
}

/* タブレット（768px〜1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
  /* タブレット専用スタイル */
}

/* PC（1025px〜） */
@media (min-width: 1025px) {
  /* PC専用スタイル */
}



.page_top { z-index: 10; }

.top_intro { margin-bottom: 40px; }

.side_bg_square { padding: 0 0 40px; }
.side_bg_square:last-child { padding-bottom: 40px; }
.side_bg_square .contents { position: relative; } 

.content_img_wrap { position: relative; margin-bottom: 10px; }
.content_img { position: relative; width: 100%; aspect-ratio: 7 / 4; object-fit: cover; background: #666; z-index: 1; }
.content_illust { width: 60%; margin: 0 auto; }

.content_text { display: flex; flex-direction: column; gap: 20px; }
.content_text_title { display: flex; gap: 20px; align-items: center; }
.content_text_number { font-size: 50px; line-height: 50px; margin-top: -10px; }
.content_text_number.inline_sp { position: absolute; top: -0.5em; left: 8px; z-index: 2; }
.content_text_number::before { content: 'MERIT'; display: block; font-size: 0.29em; line-height: 1em; }
.content_text_title { position: relative; }
.content_text_title h2 { display: flex; flex-direction: column; gap: 8px; font-size: 28px; color: #FFF; }
.content_text_title h2 span { width: fit-content; background: #004680; }
.content_text_sentence { display: flex; flex-direction: column; gap: 20px; }
.content_text_sentence strong { display: inline; background: linear-gradient(transparent 0%, #FDFD9A 0%); }

.reform_banner_wrap { position: relative; }
.reform_banner_bg { width: 100%; }
.reform_banner_text_wrap { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; width: calc(100% - 80px); height: calc(100% - 80px); margin: auto; padding: 20px; }
.reform_banner_text_wrap::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #004680; opacity: 0.8; }
.reform_banner_text { position: relative; z-index: 1; }
.reform_banner_title { display: block; width: fit-content; margin: 0 auto 12px; }

@media (min-width: 1080px) {
  .top_intro { text-align: center; }

  .side_bg_square { padding: 0 0 80px; }
  .side_bg_square:last-child { padding-bottom: 120px; }
  .side_bg_square .contents { height: calc(min(27vw, 396px) + 60px); }
  .side_bg_square .contents::before { content: ''; position: absolute; top: 40px; width: calc(100% + calc(max(5vw, calc(50vw - 660px)) + 80px)); height: calc(min(27vw, 396px) + 20px); background: #F5F5F5; z-index: -1; }
    .side_bg_square:nth-child(2n) .contents::before { right: auto; left: -80px; border-radius: 0; border-top-left-radius: 30px; border-bottom-left-radius: 30px; }
    .side_bg_square:nth-child(2n+1) .contents::before { right: -80px; left: auto; border-radius: 0; border-top-right-radius: 30px; border-bottom-right-radius: 30px; }

  .content_img_wrap { position: absolute; top: 0; width: 60%; }
    .side_bg_square:nth-child(2n+1) .content_img_wrap { right: auto; left: 0; }
    .side_bg_square:nth-child(2n) .content_img_wrap { right: 0; left: auto; }
  /* .content_img_wrap::before { content: ''; position: absolute; bottom: -18px; display: block; width: 60%; height: 60%; background: #004680; }
    .side_bg_square:nth-child(2n+1) .content_img_wrap::before { right: auto; left: -24px; }
    .side_bg_square:nth-child(2n) .content_img_wrap::before { right: -24px; left: auto; } */
  .content_img { aspect-ratio: 2 / 1; }
  .content_img_wrap {margin-bottom: 40px; }
  .content_illust { position: absolute; top: auto; bottom: -40px; left: -40px; width: 250px; height: 200px; z-index: 2; }

  .content_text_wrap { position: relative; width: calc(40% - 40px); padding-top: 100px; z-index: 2; }
    .side_bg_square:nth-child(2n+1) .content_text_wrap { margin-right: 0; margin-left: calc(60% + 60px); }
    .side_bg_square:nth-child(2n) .content_text_wrap { margin-right: calc(60% + 80px); margin-left: -20; }
  .content_text.smaller_than_img { height: calc(min(27vw, 396px) + 40px); }
  .content_text.just_one { padding-top: 40px; }
  .content_text_sentence .button_normal { margin: 0; } 

  .reform_banner_text_wrap { width: calc(100% - 280px); height: calc(100% - 160px); padding: 20px 70px; }
  .reform_banner_text_wrap::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #004680; opacity: 0.8; }
}

/* 返済額比較 */
.contents_wrap.loan_comparison_wrap { padding: 80px 0; background: #8DD3F6;}
.loan_comparison_wrap .section_title, .loan_comparison_wrap .section_title_en { color: #FFF;}
.index_square { color: #004680;}
.loan_comparison_wrap_inner { width: 90%; margin: 0 auto; padding: 40px 05%; background: #fff;}
.loan_graph_list { margin-bottom: 45px;}
.loan_graph_list:last-child { margin-bottom: 10px;}
.loan_graph_inner_title { font-size: 17px; font-weight: bold; letter-spacing: 0.06em; margin-bottom: 5px;}
.loan_graph_inner_price { font-size: 18px; letter-spacing: 0.1em; margin-bottom: 10px;}
.loan_graph_inner_price span { font-size: 32px; font-weight: bold; color: #FC5942; }
.flex { display: flex; margin-bottom: 10px;}
.loan-part { display: flex; justify-content: center; text-align: center; padding: 10px; font-size: 14px; font-weight: bold; line-height: 1.7; color: #000;}
.home-loan { background: #83D2F7; width: 70%; }
.reform-loan { background: #E1F6FC; width: 30%; word-break: keep-all;}
.combined-loan { background: #004080; color: #fff;}
/* 吹き出し */
.loan_graph_fukidashi { display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
.fukidashi_girl { width: 30%;}
.fukidashi-box { position: relative; background: #FDFD9A; border-radius: 15px; padding: 15px; margin: 15px 0; text-align: center; font-weight: bold;}
.fukidashi-box span { font-size: 20px; color: #ff6a4d; }
.fukidashi-box:before { content: ""; position: absolute; top: 50%; left: -30px; margin-top: -15px; border: 15px solid transparent; border-right: 15px solid #FDFD9A;}
/* 金利比較 */
ul.loan_rate_list { list-style: none; padding: 0; }
ul.loan_rate_list li { padding: 15px; border-bottom: dotted 3px #b0b0b0;}
.loan_rate_title { font-size: 16px; font-weight: bold; }
ul.loan_rate_list li.home .index_square { color: #66c2ff; }
ul.loan_rate_list li.combined .index_square { color: #004080; }
ul.loan_rate_list li.reform .index_square { color: #E1F6FC; }

@media (min-width: 1080px) {
  .loan_comparison_wrap_inner { max-width: 1320px; padding: 50px;}
  .loan_comparison_wrap .section_title_ja.center {  line-height: 1.7;}
  .loan_comparison_wrap_inner { position: relative;}
  .loan_comparison_wrap_inner::before { content: ""; position: absolute; top: -15vw; left: 0; width: 20vw; height: 15.5vw; background-image: url(/img/reform/loan/loan_comparision.png); background-size: contain; } 
  .loan_graph_wrap { display: flex; justify-content: space-between;} 
  .loan_graph_list { width: 48%;}
  .loan_graph_inner_title { font-size: 24px; margin-bottom: 15px;}
  .loan_graph_inner_price { font-size: 20px; margin-bottom: 15px;}
  .loan_graph_inner_price span { font-size: 40px; }
  .loan-part { font-size: 18px; }
  .loan_graph_fukidashi { justify-content: center;}
  .fukidashi_girl { width: 15%;}
  .fukidashi-box { width: 60%; margin: 20px 60px; padding: 30px 50px; font-size: 24px; }
  .fukidashi-box span { font-size: 45px; }
  .pc_reverse { display: flex; flex-direction: column-reverse; }
  ul.loan_rate_list { margin: 0 0 50px 0; display: flex; justify-content: space-between; }
  ul.loan_rate_list li { width: 31%; padding-top: 0;}
  

}


/* 回遊リンクとの繋ぎ目用 */
.contents_bg_excursion_wave_top{background-color: #FDFD9A;}