@charset "utf-8";

:root {
  /* 使用色 */
  --text-color:#383838;
  --color-base:#140d74; /*ベースカラー*/
  --color-sub:#ffc800; /*アクセント*/
  --color-blu:#0e71e5;
  --color-l-blu:#d3e9f4;
  --color-ppr: #9f6a94;

  /* フォント */
  --en:'Poppins', sans-serif;

  /* グラデーション */
  --bg-gra :linear-gradient(0deg, rgba(225, 248, 238, 1), rgba(243, 249, 249, 1));

  /* 図形 */
  --arrow :polygon(0 4%, 0 96%, 80% 50%);/* ▶ */

  /* ボックスシャドウ */
  --shadow: 3px 3px 10px 2px rgba(191, 205, 221, 0.3);

  /* 角丸 */
  --corner: clamp(22px,4.9vw,50px) 0 clamp(22px,4.9vw,50px) 0
}

/* common */
#wrapper { overflow:hidden;}
body { font-family:'Noto Sans JP', sans-serif; line-height:1.5; color:var(--text-color); letter-spacing: .05em;}
article > section { padding: unset;}

.en { font-family: var(--en); }

.mb0 { margin-bottom: 0;}


.sec-box { padding-block:clamp(2.5em,7vw,55px);}
.txt { margin-block:0; }
.c-pnk { color: var(--color-base);}
strong.c-blu { font-size: 1.25em; color: var(--color-base); font-weight: 700;}

.bg-gra { background: var(--bg-gra); }


.btn-def {
  display:inline-block; position:relative; cursor:pointer;
  width: min(260px,330px); padding:0.8em 2em 0.8em 2em ;
  font-size:.9375em; color:var(--color-txt); font-weight:500; text-align:center;
  background:#fff; border:solid 1px var(--color-base); transition:all .5s; }
.btn-def:hover { color: var(--color-base); background:var(--color-l-blu) !important; }

.ttl-movie { margin-bottom: 1em; font-size: clamp(1.125rem, 0.825rem + 1.28vw, 1.625rem); color: var(--color-base); text-align: center; }


.bukken-dlink a { color: #fff; background-color: var(--color-base);}

/* ttl */
[class*="ttl"] { font-family: var(--printemp); font-weight: 800;}
.ttl-def { display: grid; padding-bottom:.3em; font-size:clamp(24px,4.2vw,35px); line-height:1.5; text-align:center;}
.ttl-def .main { margin-top: -1.3em; color:var(--color-base); font-weight: 700; line-height: 1.37;}
.ttl-def .main em { font-size: 1.26em;}
.ttl-def .en { display: inline-block; margin-block: unset; font-size: 2.5em; color: #d7eaff; line-height: 1.2; background: linear-gradient(180deg, #d7eaff 0%, #dcf8cd 60%, #fcffc6 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}



/* mv ---------------------- */
#mv { display: grid; align-items: center; justify-items: center; height:600px; background: url(../img/seisho/mv-bg.webp) no-repeat center / cover; position:relative; }
#mv::before,#mv::after { content: ''; position: absolute; width: 8%; height: 70%; background-color: var(--color-base); }
#mv::before { top: 0; left: 0; clip-path: polygon(0 0, 0% 100%, 100% 0);}
#mv::after { bottom: 0; right: 0; clip-path: polygon(0 100%, 100% 100%, 100% 0);}
#mv .ttl { width: min(59%,710px); padding: clamp(1.5em,3.2vw,42px); text-align: center; background-color: rgb(255 255 255 / .95); border-radius: var(--corner);}
#mv .ttl .main { margin-bottom: .3em; font-size: clamp(30px,5vw,62px); color: var(--color-base); font-weight: 700; line-height: 1.1;}
#mv .ttl .main span { display: block; font-size: .61em;}
#mv .ttl .logo { margin-block: unset;}


/* message ---------------------- */
#message { padding-block:clamp(3em,7.2vw,96px) clamp(2em,5.8vw,77px); position: relative; }
#message::before,#message::after { content: ''; position: absolute; width: 48%; z-index: -1;}
#message::before { top: -3.4em; left: 0; height: 59vh; background: url(../img/seisho/lead-bg-left.png) no-repeat top left / contain;}
#message::after { right: 0; bottom: 0; height: 60vh; background: url(../img/seisho/lead-bg-right.png) no-repeat right bottom / contain;}
#message .ttl-def { position: absolute; top: -1.5em; left: 50%; transform: translateX(-50%);}

.message-box { padding: min(30%,150px) calc(16% / 2) 3.1em; background-color: #fff; border-radius: var(--corner); box-shadow: var(--shadow); position: relative;}

.bnr_topics_member { padding-bottom: clamp(3em,7vw,70px); }


/* 特徴 ---------------------- */
.feature-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4.3em 2.5em; margin-top: clamp(30px,3.2vw,40px); counter-reset: list-num;}
.feature-list > li { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; padding: 2em; padding-top: .7em; background-color: #fff; border-radius: var(--corner); box-shadow: var(--shadow); position: relative;}
.feature-list .label-wrap { top: -1.5em; right: 0; left: 0; width: fit-content; margin: auto;}
.feature-list .label { margin-block: unset; padding-block: .3em .7em; font-size: clamp(20px,3vw,24px); color: var(--color-base); font-weight: 700; line-height: 1; background-color: #fff; }
.feature-list .count { position: absolute; top: -1.7em; left: 50%; transform: translateX(-50%); padding-top: .7em; font-size: 1.44em; color: var(--color-sub); font-family: var(--en); font-weight: 700; line-height: 1; counter-increment: list-num;}
.feature-list .count::after { content: counter(list-num,decimal-leading-zero); font-size: 1.56em; font-weight: 600;}

.feature-list .ttl { display: grid; align-items: center; font-size: clamp(18px,3vw,20px); color: var(--color-base); font-weight: 700; text-align: center; line-height: 1.3;}
.feature-list .txt-box { padding: 1.3em 2.1em 2.3em; padding-left: 0;}
.feature-list .slider { width: 100%; z-index: -1;}
.feature-list .txt { letter-spacing: .04em;}

.feature-list .slick-dots {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; margin: -25px auto; text-align: center;
  li { display: inline-block; margin: 0 10px; }
  button {
    padding: 0;
    color: transparent;
    outline: none;
    width: 6px;
    border: unset;
    height: 6px;
    display: block;
    background: #fff;
    opacity: .7;
    cursor: pointer;
    border-radius: 50%;
  }
  .slick-active {
    button {
      background: #fff;
      opacity: 1;
    }
  }
}


/* map */
#map .ttl-def { margin-bottom:3%; }
#map .pic { margin:2em auto; padding:2%; background:#f5fafc; }


/* 物件情報 ---------------------- */
#bukken { padding-bottom:clamp(3em,9vw,90px); background-color:#f8f3fd; }
#bukken .ttl-def { margin-bottom:4%; }
#bukken .ttl-def.sec { position: relative; z-index: 1; margin-bottom:-.75em; }



.bukken-type .btype.ladies { background-color: #ff5f83;}

.bukken-name {
  margin-bottom:1em; font-size:clamp(22px,4.2vw,30px); color: var(--color-base); font-weight: 700; line-height:1; 
  .con {
    position: relative; z-index: 0;
    &::before {
      content: ''; position: absolute; top: .7em; left: 50%; width: calc(100% + .7em); height: .9em; transform: translateX(-50%); background-color: #f3feb9; border-radius: unset; z-index: -1;}
    }
    &::before { left: -.75em;}
    &::after { display: none;}
  }

.bukken-box .apeal_point { margin-block:5%; text-align:center; }

/* 物件共通の色替えなど */
.bukken-box { padding-bottom: clamp(3em,7vw,93px); border-radius: var(--corner); box-shadow: var(--shadow);}


.bukken-data:not(:last-child) { margin-bottom: 5em;}

.bukken-slider .slick-prev::before,
.bukken-slider .slick-next::before{
  background-image:url(../img/seisho/ico-arrow.svg); }

.bukken-info .ttl { background:var(--color-base); }
.bukken-info .d-list:first-of-type { margin-bottom: 3em;}
.bukken-info .d-list dt { width: 27%; background:var(--color-l-blu); }
.bukken-info .d-list dd { width: 73%;}

.bukken-fee-box {  }
.bukken-fee-box.since2025 {padding: 1.8em 2em .5em; background-color: var(--color-l-blu);}
.bukken-fee-box.since2025 .ttl { padding-top: .4em; color: var(--color-base); border: unset;}
.bukken-fee-toggle > dt { padding-block: .63em; color:#fff; font-family: var(--printemp); font-weight: 800; background-color: var(--color-base);}
.bukken-fee-toggle > dt::before,.bukken-fee-toggle > dt::after { background: var(--color-base);}
.bukken-fee-toggle > dt > span::before { right: 1em; width: 1.5em; height: 1.5em; background:#fff; }
.bukken-fee-toggle > dd { padding: 1.25em clamp(16px,5vw,50px) 1.5em; }
.bukken-fee-toggle .ttl-disc::before { color: var(--color-blu);}

.bukken-fee-list .fee-item { padding: .4em; padding-bottom: 0;  border-color: #dcdcdc;}
.bukken-fee-list .meal { font-size: .75em; font-family: var(--printemp); font-weight: 800; border-radius: unset; background-color: var(--color-l-blu); }
.bukken-fee-list .fee-dtl { margin-bottom: 1em;}
.bukken-fee-list .fee-dtl .recommend { font-size: .75em; line-height: 1.2; font-family: var(--printemp); font-weight: 800; background-color: var(--color-sub);}


.bukken-link { grid-template-columns: repeat(2,1fr); grid-column-gap: 1.25em; max-width: 680px;}
.bukken-link .floor .icon::before {background-image:url(../img/seisho/icon-building.svg?20250722); }
.bukken-link .calc .btn-def { background-color: #fff;}
.bukken-link .calc .icon::before { background-image:url(../img/seisho/icon-calculator.svg?20250722); }

.bukken-movie { margin-top:10%; }



/* other */
#other { background:url(../img/hanazono/bg-other.png) no-repeat bottom center / 100% auto; }
.other-list { margin-top:4%; }
.other-list > li { width:min(100%,468px); background:#f5f5f5; }
.other-list .bname { display:inline-block; margin-top:7%; font-size:1.5em; line-height:1.6; position:relative; z-index:1; }
.other-list .bname::after {
  content:''; display:block; height:.6em; z-index:-1;
  position:absolute; bottom:0; left:-.5em; right:-.5em;
  background-color:#ffc8ac; border-radius:1em;
}

.other-list .bus-txt .con::before { background-image:url(../img/hanazono/icon-bus.svg);}
.other-list .bus-txt .con::after { background:#e9ddf3;}


/* ================================================================
  レスポンシブ
=================================================================== */

/* 600以上(PC・タブレット) */
@media screen and (min-width:600px) {

  .ttl-def .main.flex { font-size: .75em;}


   /* 物件link ---------------------- */
  .blink-list .img { padding-top:85%; }
  .blink-list .img > img { max-width:inherit; height:103%; top:51%; }
  .blink-list .senbonnijo img { left:60%; }
  .blink-list .kyoto-nijo img { left:65%; }
  .blink-list .btype { padding-block:.3em; font-size:.85em; line-height:1.2; text-align:center; }

  .other-list > li { padding:40px; }
}

/* 1338px以上(PC) */
@media screen and (min-width:1338px) {
  .message-box::before { left: 100%;}
}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (min-width:600px) and (max-width:960px){
  
  .blink-list  { row-gap: unset; column-gap: unset; }
  .blink-list > li { width: 90%; }
  .blink-list > li:nth-child(n+3) { margin-top:1.5em; }
}
/* 959以下 (タブレット以下) */
@media screen and (max-width:959px) {
  
/* 特徴 ---------------------- */
.feature-list { gap: 2.7em 1.7em;}
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width:599px){
  /* common */
  #pan { width: unset; padding: 8px 16px; background-color: rgb(255 255 255 / .7);}
  .ttl-def { line-height: 1.3;}

  /* mv */
  #mv { height:230px; }


  /* message */


  /* 特徴 ---------------------- */
.feature-list { grid-template-columns: minmax(0,1fr);}
.feature-list > li { padding-inline: 1.6em; padding-bottom: 1.6em;}
.feature-list .ttl { padding-block: .7em;}

  /* point */
  #points::after { bottom:-20px; }
  .strong-list { grid-template-columns:repeat(1,1fr); gap:2em; }
  .strong-list .txt { padding-top:1.6em;}

  /* 物件情報 */
  #bukken .ttl-def .en { font-size: 2.2em;}
  .bukken-lead { letter-spacing: 0;}
  .bukken-data:not(:last-child) { margin-bottom: 3em;}
  .bukken-info .d-list dt, .bukken-info .d-list dd { width: 100%; border: none; }
  .bukken-fee-list { grid-template-columns: 1fr;}
  .bukken-fee-list .fee-item:nth-child(2) .monthly .recommend { top: -2em; right: -2.8em; padding-inline: .3em; font-size: .62em;}
  .bukken-fee-list .fee-item:nth-child(2) .monthly .recommend::before { background-color: var(--color-sub);}
  .bukken-fee-box.since2025 { padding-inline: 1em;}
  

  /* other */
  .other-list .btn-def { width:100%; min-width:auto; }
  .bukken-fee-list .fee-item:nth-child(2) .monthly { position: relative; grid-template-columns: 1fr;}
  .bukken-fee-box.since2025 .fee_other { column-gap: 4.4;}
}