@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; }

/* ページ内リンク */
.top_pagelink_wrap { width: min(1320px, 90vw); margin: 0 auto; }
@media (min-width: 767px) {
  .page_link { width: inherit; }
}
@media (min-width: 1024px) {
  .top_pagelink_wrap { display: flex;gap: 30px;margin-bottom: 40px;}
  .page_link { width: calc(calc(100% - 60px) / 3); flex-direction: column; }
  .page_link_text { padding: 20px;}
  .area_arrow_down { bottom: 30px; transform: rotate(-90deg);}
  .page_link_img { width: 100%; margin: 0;}
}




/* トップメインコンテンツ TYPE01~03*/
.side_bg_square { padding: 60px 0 80px; }
.side_bg_square:last-child { padding-bottom: 40px; }
.side_bg_square .contents { position: relative; } 
.side_bg_square .contents::before { content: ''; position: absolute; top: 80px; left: -5vw; width: 100vw; height: calc(100% - 40px); background: #F5F5F5; z-index: -1; }

.content_img_wrap { position: relative; margin-bottom: 40px; }
.content_img { position: relative; width: 100%; aspect-ratio: 7 / 4; object-fit: cover; background: #666; z-index: 1; }
.content_illust { position: absolute; top: -140px; right: 0; width: 150px; height: 120px; z-index: 2; }

.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: 'TYPE'; display: block; font-size: 0.36em; 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; }

.reform_banner_wrap { position: relative; }
.reform_banner_bg { width: 100%; }
.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:last-child { padding-bottom: 120px; }
  .side_bg_square .contents { height: calc(min(27vw, 396px) + 60px); }
  .side_bg_square .contents::before { top: 40px; width: calc(100% + calc(max(5vw, calc(50vw - 660px)) + 80px)); height: calc(min(27vw, 396px) + 20px); }
    .side_bg_square:nth-child(2n+1) .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) .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) .content_img_wrap { right: auto; left: 0; }
    .side_bg_square:nth-child(2n+1) .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) .content_img_wrap::before { right: auto; left: -24px; }
    .side_bg_square:nth-child(2n+1) .content_img_wrap::before { right: -24px; left: auto; }
  .content_img { aspect-ratio: 2 / 1; }
  .content_illust { top: auto; bottom: 0; right: -20px; width: 200px; height: 160px; }

  .content_text_wrap { position: relative; width: calc(40% - 40px); padding-top: 100px; z-index: 2; }
    .side_bg_square:nth-child(2n) .content_text_wrap { margin-right: 0; margin-left: calc(60% + 60px); }
    .side_bg_square:nth-child(2n+1) .content_text_wrap { margin-right: calc(60% + 80px); margin-left: 0; }
  .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; } 

}

/* リフォーム実績件数 */
.result_number_wrap { display: flex; flex-direction: column; padding: 30px; background: #EDF5FD;}
.result_number_img_wrap { display: flex; flex-direction: column; }
.result_number_img { width: 100%; }
.result_number_text { font-size: 18px; text-align: center; margin-bottom: 20px;}
.result_number_text span { font-size: 45px; }
@media (min-width: 768px) {
  .result_number_img_wrap{flex-direction: row;}
  .result_number_img {width: 50%;}
}

@media (min-width: 1080px) {
  .result_number_wrap { padding: 50px;}
  .result_number_img_wrap { display: flex; flex-direction: row;}
  .result_number_img { width: 50%; }
  .result_number_text { font-size: 20px; margin-bottom: 40px; }
  .result_number_text span { font-size: 65px; }

}

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

/* 回遊リンクの「トップに戻る」削除 */
.reform_links_button{display: none;}



@media (min-width: 1080px) and (max-width: 1210px) {
  .side_bg_square .contents::before { top: 40px; width: calc(100% + calc(max(5vw, calc(50vw - 660px)) + 80px)); height: calc(min(27vw, 396px) + 130px); }
}
@media (min-width: 1211px) and (max-width: 1350px) {
  .side_bg_square .contents::before { top: 40px; width: calc(100% + calc(max(5vw, calc(50vw - 660px)) + 80px)); height: calc(min(27vw, 396px) + 80px); }
}