/*
Theme Name: housing-theme
Author: BLUE SEVEN
*/

@charset "utf-8";
/* CSS Document */

/*--------------------------------------------------------------
/* reset / base
---------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
:root {
  --fs-page-title: clamp( 2rem, calc( 0.9285714285714286rem + 2.976190476190476vw ), 4.5rem );
  --fs-40: clamp( 2.5rem, calc( 1.8571428571428573rem + 1.7857142857142856vw ), 4rem );
  --fs-23: clamp( 1.6rem, calc( 1.3rem + 0.8333333333333334vw ), 2.3rem );
  --fs-20: clamp( 1.6rem, calc( 1.4285714285714285rem + 0.4761904761904762vw ), 2rem );
  --fs-18: clamp( 1.4rem, calc( 1.2285714285714285rem + 0.4761904761904762vw ), 1.8rem );
  --fs-16: clamp( 1.4rem, calc( 1.3142857142857142rem + 0.2380952380952381vw ), 1.6rem );
  --fc-base : #000000;
  --fc-black2: #373433;
  --key-color: #F5FF00;
  --ac-orange: #EB6E2D;
  --hl-orange: #FFC400;
  --bg-orange: #FFF3CE;
  --ac-green: #31A783;
}
html{
  font-size: 62.5%;
}
@media print {
html{
  font-size: 35.5%;
}
}
body {
  color: var(--fc-base);
  font-family: 'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','BIZ UDPGothic',Meiryo,sans-serif;
  font-size: var(--fs-18);
  line-height: 1.75;
  font-weight: 400;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin:0;
  font-weight: 700;
}
p,
ol,
ul,
li,
dl,
dt,
dd,
th,
td,
figure,
figcaption{
  margin: 0;
  padding: 0;
}
ol,
ul{
  list-style-type:none;
}
a {
  color: #008CFF;
  text-decoration: none;
  word-break: break-all;
  transition-duration: 0.4s;
}
img {
  max-width:100%;
  height:auto;
}
table {
  border-collapse: collapse;
}

/*--------------------------------------------------------------
# common
--------------------------------------------------------------*/
.container{
  width: min(95%,1560px);
  margin-right: auto;
  margin-left: auto;
}
.content_block + .content_block {
  margin-top: 5rem;
}
.text + .text {
  margin-top: 2em;
}
.img_wrap img {
  width: 100%;
  vertical-align: top;
}
.page_title {
  color: var(--ac-orange);
  font-size: var(--fs-page-title);
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding: 4rem 0 7rem;
  @media (min-width:768px) {
    padding: 4rem 0 12rem;
  }
}
@media print {
.page_title {
display: none;
}
}
.breadcrumbs {
  margin-bottom: 2em;
  .gt {
    margin: 0 0.5em;
  }
}
@media print {
.breadcrumbs  {
display: none;
}
}
.section_title_bar {
  color: var(--fc-black2);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 1em;
  padding: 0.5em 1em;
  background: var(--hl-orange);
  border-radius: 1rem;
}
.section_title_border {
  font-size: var(--fs-20);
  font-weight: 700;
  max-width: 120rem;
  margin: 0 auto 3rem;
  padding-bottom: 0.5em;
  border-bottom: 0.3rem solid var(--hl-orange);
}
.btn{
  display: flex;
  color: var(--fc-base);
  font-weight: 700;
  line-height: 1.3;
  justify-content: center;
  align-items: center;
  padding: 0.7em 1em;
  background: #FFF;
  border: 0.4rem solid #939393;
  border-bottom: 0.8rem solid #939393;
  border-radius: 1rem;
  position: relative;
  margin-bottom: 1.5em;

  &::after {
    display: block;
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    background: #939393;
    border: 99999px;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    transition: 0.4s;
    transform-origin: bottom right;
  }
  &.tel {
    font-size: var(--fs-20);
    &::before {
      display: block;
      content: "";
      width: min(13vw,3.7rem);
      aspect-ratio: 50 / 50;
      margin-right: 1.8rem;
      background: url(/assets/img/smartphone.png) no-repeat center / contain;
    }
  }
  &.mail {
    font-size: var(--fs-20);
    &::before {
      display: block;
      content: "";
      width: min(13vw,3.7rem);
      aspect-ratio:50 / 50;
      margin-right: 1.5rem;
      background: url(/assets/img/mail.png) no-repeat center / contain;
    }
  }
  &.map {
    font-size: var(--fs-20);
    &::before {
      display: block;
      content: "";
      width: min(13vw,3.7rem);
      aspect-ratio:50 / 50;
      margin-right: 1.5rem;
      background: url(/assets/img/map.png) no-repeat center / contain;
    }
  }
  &.print {
    font-size: var(--fs-20);
    &::before {
      display: block;
      content: "";
      width: min(13vw,3.7rem);
      aspect-ratio:50 / 50;
      margin-right: 1.5rem;
      background: url(/assets/img/print.png) no-repeat center / contain;
    }
  }
}
@media (min-width:1028px) {
  .btn:hover::after {
    transform: scale(1.8);
  }
}
@media print {
.btn {
  display: none;
    }
 }
.btn_wrap.tel {
  text-align: center;
  width: min();
  container-type: inline-size;
}
.link_btn {
  display: inline-flex;
  color: #FFF;
  font-size: var(--fs-20);
  font-weight: 700;
  justify-content: center;
  align-items: center;
  line-height: 1;
  width: fit-content;
  padding: 1em;
  background: var(--ac-orange);
  border: 0.1rem solid var(--ac-orange);
  border-radius: 1em;
  cursor: pointer;
  transform-origin: bottom right;
  &::before {
    display: inline-block;
    content:"";
    width: 1.3em;
    aspect-ratio: 1 / 1;
    margin-right: 1em;
    background: url(/assets/img/icon_arrow.png) no-repeat center / contain;
    transition: 0.4s all ease;
  }
}
@media (min-width:768px) {
  .link_btn:hover::before {
    transform: scale(1.2);
  }
}
.search > form > div {
  display: flex;
  align-items: center;

  & input[type="text"] {
    font-size: var(--fs-18);
    width: 25rem;
    padding: 0.5em 1em;
    border: 0.2rem solid;
    border-radius: 999rem;
  }
  & input[type="submit"] {
    font-size: var(--fs-18);
    color: #FFF;
    text-indent: -9999px; /* 文字を隠す */
    width: 2.5em;
    aspect-ratio: 1 / 1;
    background: url('/assets/img/icon_search.png') no-repeat center / contain,#000;
    border-radius: 50%;
    border: none;
    cursor: pointer;
  }
  .screen-reader-text {
    display: none;
  }
}
.news_date {
  font-weight: 700;
}
.cat_badge {
  display: inline-block;
  color: #FFF;
  font-size: var(--fs-16);
  width: fit-content;
  line-height: 1.2;
  margin-top: 0.5em;
  padding: 0.5em;
  background: #7EA937;
  border-radius: 1rem;
}
.news_list {
  max-width: 119rem;
  margin: 0 auto 7.8rem;
  & li {
    margin-top: 5rem;
    border: 0.4rem solid #FFEDB1;
    border-radius: 1rem;
    transition: 0.4s all ease;
    &:hover {
      box-shadow: 0px 0px 3px var(--ac-orange);
    }
    & a {
      display: block;
      color: inherit;
      padding: 1.6rem;
      @media (min-width:768px) {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        padding: 3.3rem;
      }
    }
    .img_wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 195 / 155;
      margin-bottom: 1.5rem;
      overflow: hidden;
      border-radius: 1rem;

      &.no_thumbnail {
        padding: 2rem;
        background: #FFF;
        border: 0.2rem solid #D9D9D9;
      }
    }
    .news_title {
      font-size: var(--fs-20);
      line-height: 1.5;
      margin-top: 0.5em;
    }
  }
}
span.wrap {
  display: inline-block;
}
/*--------------------------------------------------------------
# header
--------------------------------------------------------------*/
header {
  padding-bottom: max(14vw,9rem);
  background: var(--key-color);
  position: relative;
  overflow: hidden;
  &::before {
    display: block;
    content: "";
    width: max(72%,50rem);
    aspect-ratio: 1386 / 248;
    background: url(/assets/img/header_illust.png) no-repeat center / contain;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
  &::after {
    display: block;
    content: "";
    width: 129%;
    min-width: 50rem;
    aspect-ratio: 2475 / 573;
    background-image: radial-gradient(closest-side at 50% 50%, #ffffff 99%, var(--key-color) 100%);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translateX(-50%);
    @media (min-width:768px) {
      min-width: auto;
      top: calc(92% - 5vw);
    }
  }
}
@media print {
header {
display: none;
}
}

header .inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 1.5rem 3%;
  position: relative;
  @media (min-width:768px) {
    padding: 2.5rem 3%;
  }
}
header .site_copy {
  font-size: clamp( 1.2rem, calc( 1.3300970873786408rem + 0.45307443365695793vw ), 1.4rem );
  width: calc(100% - 9rem);
  padding: 1.8rem 0 0 1rem;
  @media (min-width:768px) {
    width: auto;
  }
}
header .logo {
  width: min(40%, 25rem);
  padding-right: 2rem;
  position: relative;
  z-index: 10;
}
header .logo a {
  display: block;
}
header .gnav {
  display:none;
}
header .search.pc {
  display:none;
}
.hamburger {
  align-self: center;
  width: 50%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;

  .menu_btn {
    display: block;
    list-style: none;
    height: 6rem;
    width: 6rem;
    margin: 1.5rem 1.5rem 0 auto;
    background: url(/assets/img/hamburger.png) no-repeat center / contain;
    position: relative;
    /* ★古いSafariや特定の挙動対策として、擬似要素も非表示にする */
    &::-webkit-details-marker {
      display: none;
    }
    & span {
      display: none;
    }
  }
  .sp_nav {
    width: 100vw;
    height: 100vh;
    padding-top: 12rem;
    background: var(--key-color);
    opacity: 0;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    left: 0;

    #sp_nav_list > li {
      list-style: none;
      padding: 1.5em 2em;
      border-bottom: 0.1rem solid #707070;
      &:first-child {
        border-top: 0.1rem solid #707070;
      }
    }
  }
  &[open] {
      width:100%;
    .menu_btn {
      background: url(/assets/img/hamburger_close.png) no-repeat center / contain;
      z-index: +1;
    }
    .sp_nav {
      opacity: 1;
    }
  }
}
.hamburger .menu_item a,
.hamburger .menu_item summary {
  color: var(--fc-base);
  font-size: 2.4rem;
  font-weight: 700;
}
.hamburger .logo {
  width: min(37%, 25rem);
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
}
.hamburger .search {
  margin-top: 3rem;
  position: relative;
  > form > div {
    justify-content: center;
  }
}
header .sub_menu_details summary {
  list-style: none;
  padding-right: 1.5em;
  position: relative;
  cursor: pointer;
  &::before,&::after {
    display: block;
    content: "";
    width: 1.2em;
    height: 1.2em;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transform-origin: top;
    transition: 0.4s all ease;
  }
  &::before {
    background: url(/assets/img/icon_nav.png) no-repeat center / contain;
    rotate: 90deg;
  }

  &::after {
    background: url(/assets/img/icon_nav2.png) no-repeat center / contain;
  }
}
header .sub_menu_details[open] summary {
  &::before {
    rotate: 0deg;
  }
}
header .sub_menu_details .sub_menu {
  display: flex;
  flex-wrap: wrap;
  border-radius: 2rem;
  gap: 0 4%;
  > li {
    container-type: inline-size;
    width: 48%;
    margin-top: 1.4rem;
    & a {
      display: flex;
      color: var(--fc-base);
      font-size: min(8cqw,2.4rem);
      font-weight: 700;
      line-height: 1.3;
      justify-content: start;
      align-items: center;
      height: 5.8em;
      padding: 0.7em 1em;
      background: #FFF;
      border: 0.4rem solid #939393;
      border-bottom: 0.8rem solid #939393;
      border-radius: 1rem;
      position: relative;
      &::before {
        display: inline-block;
        content:"";
        width: 26%;
        height: 100%;
        margin-right: 10%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
      &::after {
        display: block;
        content: "";
        width: 1.4rem;
        height: 1.4rem;
        background: #939393;
        border: 99999px;
        clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
      }
    }
  }
}
#nav_list li.rent .sub_menu li,
#sp_nav_list li.rent .sub_menu li {
  & a {
    border-color: var(--ac-orange);
    &::after {
      background: var(--ac-orange);
    }
  }
  &.condominium a::before {
    background-image: url(/assets/img/icon_rent_condominium.png);
  }
  &.house a::before {
    background-image: url(/assets/img/icon_rent_house.png);
  }
  &.parking a::before {
    background-image: url(/assets/img/icon_rent_parking.png);
  }
  &.commercial a::before {
    background-image: url(/assets/img/icon_rent_commercial.png);
  }
}
#nav_list li.sale .sub_menu li,
#sp_nav_list li.sale .sub_menu li {
  & a {
    border-color: var(--ac-green);
    &::after {
      background: var(--ac-green);
    }
  }
  &.nhouse a::before {
    background-image: url(/assets/img/icon_sale_nhouse.png);
  }
  &.rhouse a::before {
    background-image: url(/assets/img/icon_sale_rhouse.png);
  }
  &.condominium a::before {
    background-image: url(/assets/img/icon_sale_condominium.png);
  }
  &.commercial a::before {
    background-image: url(/assets/img/icon_sale_commercial.png);
  }
  &.land a::before {
    background-image: url(/assets/img/icon_sale_land.png);
  }
}
@media (min-width: 992px) {
  .hamburger{
    display: none;
  }
  header .gnav {
    display:block;
    flex-grow: 1;
    margin: 0 3% 0 auto;
  }
  header #nav_list {
    display:flex;
    flex-wrap:wrap;
    list-style: none;
    width: fit-content;
    margin: 0 0 0 auto;
    gap: 0.5em 3vw;

    > li > a,
    .sub_menu_details summary  {
      color: var(--fc-base);
      font-size: clamp( 1.6rem, calc( 0.6379310344827585rem + 0.9698275862068966vw ), 2.5rem );
      font-weight: 700;
    }
  }
  header .sub_menu_details .sub_menu {
    width: min(85vw,133rem);
    gap: 0 1vw;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    > li > a {
      height: clamp( 9.7rem, calc( 4.76510067114094rem + 4.809843400447427vw ), 14rem );
    }
  }
  #nav_list li.rent .sub_menu li {
    width: calc((100% - 3vw) / 4);
  }
  #nav_list li.sale .sub_menu li {
    width: calc((100% - 4vw) / 4);

    &.commercial,
    &.land {
      width: calc((100% - 4vw) / 4 / 2);
      & a {
        flex-direction: column;
        font-size: 11cqw;
        text-align: center;
        padding: 0.5em;
        &::before {
          width: 80%;
          height: 60%;
          margin: 0 0 0.6rem;
        }
      }
    }
    & br.sp {
      display: none;
    }
    & span.bil::before {
      content: "・";
    }
  }
  header .search.pc {
    display: block;
    & form > div input[type="text"] {
      width: min(16vw, 25rem);
    }
  }
}


/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
footer {
  padding-top: min(40vw,24rem);
  background: var(--key-color);
  overflow: hidden;
  position: relative;

  &::before {
    display: block;
    content: "";
    width: 129%;
    min-width: 50rem;
    aspect-ratio: 2475 / 573;
    background-image: radial-gradient(closest-side at 50% 50%, #ffffff 99%, var(--key-color) 100%);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    
    top: 21vw;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 1;
    
    @media (min-width:768px) {
      min-width: auto;
      top: 12rem;
    }
  }
}

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
footer {
  padding-top: min(40vw,24rem);
  background: var(--key-color);
  overflow: hidden;
  position: relative;

  &::before {
    display: block;
    content: "";
    width: 129%;
    min-width: 50rem;
    
    /* Safari対策: aspect-ratioを使わず高さを明示 */
    height: 29.9vw;
    
    background-image: radial-gradient(closest-side at 50% 50%, #ffffff 99%, var(--key-color) 100%);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    
    /* Safari対策: transform移動を使わず、計算済みの位置に直接配置 */
    top: -8.9vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    
    @media (min-width:768px) {
      min-width: auto;
      top: calc(12rem - 29.9vw);
    }
  }
}
@media print {
footer {
  display:none;
}
}
/* ロゴが波で消えるのを防ぐ */
footer .logo,
footer .footer_nav,
.copyright {
  position: relative;
  z-index: 2;
}

footer .logo {
  text-align: center;
  width: min(80%, 50rem);
  margin: 0 auto 6rem;
}
_::-webkit-full-page-media, _:future, :root footer .logo {
  text-align: center;
  width: min(80%, 50rem);
  margin: 5em auto 6rem;
}


footer .footer_nav {
  text-align: center;
  & ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em 1em;
    & li a {
      color: var(--fc-base);
    }
  }
}
footer .footer_nav dl + dl {
  margin-top: 1em;
}
footer .footer_nav dl dt {
  font-weight: 700;
}
footer .footer_nav > ul {
  margin: 2em 0;
}
.copyright {
  font-size: 1.3rem;
  text-align: center;
  margin: 0;
  padding-bottom: 5rem;
}
/* PICK UPセクション全体の背景色をクリーム色に変更 */
.pick_up {
    background-color: #fffaf0 !important;
    padding: 60px 20px;
    margin: 0 0 40px;
}

/* タイトル部分（PICK UP！） */
.pick_up .title {
    color: #e63946;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

/* タイトル下のサブテキストがある場合 */
.pick_up .title::after {
    content: "おすすめ物件情報をお届け！";
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
    font-weight: normal;
}

/* =========================================================
   トップページ＆下層ページ共通：バナーレイアウト調整（修正版）
========================================================= */

/* --- 0. バナー全体の上下に余白を追加（青い背景から離す） --- */
.top_banner {
  margin-top: 40px; /* ★上部の青い背景との隙間 */
  margin-bottom: 40px; /* ★下部との隙間 */
}

/* --- 1. はみ出し（横揺れ・横スクロール）を防止する --- */
body {
  overflow-x: hidden;
}

/* --- 2. 下層ページのバナーを強制的に全幅にする --- */
.container .top_banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- 3. バナーリストの基本設定（Flexbox） --- */
.top_banner .banner_list {
  display: flex;
  justify-content: space-between;
  gap: 5px; 
  list-style: none;
  padding: 0;
  margin: 0;
}
.top_banner .banner_list li {
  width: 32%; 
}

/* --- 4. バナー画像と罫線の設定 --- */
.top_banner .banner_list img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #707070;
  box-sizing: border-box;
}

/* --- 5. PC用（画面幅769px以上）：上部ボタンと幅をピッタリ合わせる --- */
@media screen and (min-width: 769px) {
  .top_banner .banner_inner {
    width: min(95%, 1560px); /* サイト全体の基本幅設定 */
    max-width: 1500px; /* ★ここを 1200px や 1240px、1300px に増やして上のボタンとピッタリ合う数値を探します */
    margin: 0 auto;
    padding: 0;
  }
}
/* --- 6. スマホ用（画面幅768px以下）：縦並び＆画面端にくっつかないように --- */
@media screen and (max-width: 768px) {
  .top_banner .banner_inner {
    width: min(95%, 1560px);
    margin: 0 auto;
  }
  .top_banner .banner_list {
    flex-direction: column; 
    gap: 15px; 
  }
  .top_banner .banner_list li {
    width: 100%;
  }
}

/*--------------------------------------------------------------
.btn_box
--------------------------------------------------------------*/
/* 1. スマホ用の設定（2列 × 2行 で見やすくする） */
.btn_box {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 1em;
   margin-top: 2.0em;
   margin-bottom: 3.0em;
}

/* 2. PC用の設定（画面幅が広いときは横一列にする） */
@media (min-width: 768px) {
  .btn_box {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1em;
    row-gap: 0;
     margin-top: 2.0em;
  }
}
@media print {
  .btn_box {
    display: none !important;
  }
}
.btn_box .btn {
 margin-bottom:0;
}