@charset "utf-8";

:root {
  /* 使用色 */
  --text-color:#2f2924;
  --color-base:#c75065; /*ベースカラー*/
  --color-sub:#b50e2c; /*アクセント*/
  --color-pnk:#e6a7b2;
  --color-l-pnk:#fff2f5;
  --color-ppr: #9f6a94;

  /* フォント */
  --en:'handsome-pro', sans-serif;
  --printemp:'sicprintempspetit', sans-serif;

  /* グラデーション */
  --bg-gra :linear-gradient(180deg, rgba(254, 244, 237, 1), rgba(250, 220, 229, 1) 50%, rgba(239, 228, 240, 1));

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

  /* ボックスシャドウ */
  --shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.1);
}

/* common */
#wrapper { overflow:hidden;}
body { font-family:'Noto Sans JP', sans-serif; line-height:1.5; color:var(--text-color); letter-spacing: .05em;}
article { margin-top: clamp(-48px, calc(-16px - ((100vw - 320px) * 0.05)), -16px);}
article > section { padding: unset;}

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

.mb0 { margin-bottom: 0;}


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

.bg-gra { background: var(--bg-gra); position: relative; overflow: hidden; z-index: 0;}
.bg-gra::before,.bg-gra::after { content: ''; position: absolute; width: min(35vw,252px); height: min(36vw,258px); background: url(../img/kacho/bg-deco.svg) no-repeat center / contain; opacity: .2; z-index: -1;}
.bg-gra::before { top: -4em; left: -4em; }
.bg-gra::after { bottom: -4em; right: -4em;}

.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-sub); transition:all .5s; }
.btn-def:hover { color: var(--color-sub); background:var(--color-l-pnk) !important; }

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

/* ttl */
[class*="ttl"] { font-family: var(--printemp); font-weight: 800;}
.ttl-def { display: grid; padding-bottom:.3em; font-size:clamp(28px,4.2vw,48px); line-height:1.5; text-align:center;}
.ttl-def .main { color:var(--color-txt); font-weight: 800;}
.ttl-def .main.flex { align-items: center; width: fit-content; margin-inline: auto;}
.ttl-def .main em { font-size: 1.26em;}
.ttl-def .en { margin-block: unset; font-size:0.54em; color:var(--color-base); }
.ttl-def .en { display:inline-block; padding-inline:1em; position:relative; }



/* mv ---------------------- */
#mv { height:555px; background:linear-gradient(180deg,rgba(254, 244, 237, 1) 0%, rgba(250, 220, 229, 1) 100%); clip-path: url(#clip-pc); overflow:hidden; position:relative; }
#mv .mv-title { position:absolute; top:44%; left:49%; transform: translate(-50%,-50%); z-index:2; width:min(65%,540px); }
#mv .mv-title::before,#mv .mv-title::after { content: ''; position: absolute; transform: translateY(-50%); width: min(31vw,311px); background: no-repeat center / contain;}
#mv .mv-title::before { top: 46%; right: 86.5%; height: min(42vw,384px);; background-image: url(../img/kacho/mv-deco-l.png?20250731);}
#mv .mv-title::after { top: 49%; left: 94%; height: min(42vw,393px); background-image: url(../img/kacho/mv-deco-r.png?20250731);}
#mv .deco { height: 100%; position: relative;}
#mv .deco::before,#mv .deco::after { content: ''; position: absolute; background: url(../img/kacho/bg-deco.svg) no-repeat center / contain; opacity: .2;}
#mv .deco::before { top: -11%; left: -14%; width: min(35vw,252px); height: min(36vw,258px);}
#mv .deco::after { bottom: 7%; right: -18%; width: min(39vw,289px); height: min(40vw,296px);}


/* message ---------------------- */
#message { padding-top:clamp(2em,5vw,50px); }
.message-box { max-width:690px; margin-inline:auto; padding-bottom: 120px; position: relative;}
.message-box::before { content: ''; position: absolute; bottom: 0; right: 0; width: 182px; height: 154px; background: url(../img/kacho/message.png?20250722) no-repeat center / contain; z-index: -1;}
.ttl-message { max-width: 500px; margin-inline: auto; margin-bottom:1.3em; padding-block:1.2em 1.1em; font-size:clamp(19px,3vw,28px); line-height: 1.2; text-align:center; border-block: 1px solid var(--color-pnk); position: relative;}
.ttl-message .main em { font-size: 1em; color: var(--color-sub);}
.ttl-message .en { position: absolute; top: -.7em; left: 50%; transform: translateX(-50%); padding-inline: .3em; font-size:clamp(19px,3vw,28px); background-color: #fff;}

.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 { background-color: #fff; position: relative; z-index: 0;}
.feature-list .label-wrap {position: absolute; top: -1.5em; right: 0; left: 0; width: fit-content; margin: auto;}
.feature-list .label { position: relative; z-index: 1; margin-block: unset; padding: .42em 1.14em; font-size: clamp(20px,3vw,26px); line-height: 1; font-family: var(--printemp); border: 1px solid var(--text-color); background-color: #fff; }
.feature-list .shadow { position: absolute; top: 4px; left: 4px; width: 100%; height: 100%; color: transparent; background-color: var(--color-base); mix-blend-mode:multiply;}
.feature-list .content { display: grid; grid-template-columns: minmax(11%,55px) 1fr;}
.feature-list .ttl { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: .5em; font-size: clamp(18px,3vw,20px); font-family: var(--printemp); font-weight: 800; line-height: 1.3;}
.feature-list .ttl strong { font-size: 1.3em; color: var(--color-base);}
.feature-list .count { justify-self: center; padding-top: .7em; font-size: 1.25em; color: var(--color-base); font-family: var(--en);  -ms-writing-mode: tb-rl; writing-mode: vertical-rl; counter-increment: list-num;}
.feature-list .count::after { content: counter(list-num,decimal-leading-zero);}
.feature-list .txt-box { padding: 1.3em 2.1em 2.3em; padding-left: 0;}
.feature-list .slider { width: 100%; z-index: -1;}

.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 { max-width: 750px; margin:2em auto; padding:2%; background:#fff; border: 2px solid #dcdcdc;}


/* 物件情報 ---------------------- */
#bukken { padding-bottom:clamp(3em,9vw,90px); background-color:#f8f3fd; }
#bukken .ttl-def { margin-bottom:4%; }
#bukken .ttl-def.movie { margin-bottom: 2%; font-size: clamp(24px,4.2vw,48px);}

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

.bukken-name {
  font-size: min(5vw,32px); font-family: var(--printemp); font-weight: 800;
  span {
    position: relative;
    &::before,&::after {
      content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: .5em; height: .5em; background-color: var(--color-base); border-radius: 50%;
    }
    &::before { left: -.75em;}
    &::after { right: -.75em; }
  }
}
.bukken-box .apeal_point { margin-block:5%; text-align:center; }

/* 物件共通の色替えなど */
.bukken-box { padding-bottom: clamp(3em,7vw,93px);}
.bukken-name { margin-bottom:.6em; font-size:clamp(24px,4.2vw,32px); line-height:1; }

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

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

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

.bukken-fee-box {  }
.bukken-fee-box.since2025 .ttl { padding-top: .4em; border-color: var(--color-sub);}
.bukken-fee-toggle > dt { padding-block: .63em; color:#fff; font-size: 1.25em; 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; background-color: var(--color-l-pnk);}
.bukken-fee-toggle .ttl-disc::before { color: var(--color-ppr);}

.bukken-fee-list .fee-item { padding: unset; border-radius: unset; border-color: #dcdcdc;}
.bukken-fee-list .meal { font-size: .75em; font-family: var(--printemp); font-weight: 800; border-radius: unset; background-color: #fffee7; }
.bukken-fee-list .fee-dtl { margin-bottom: 1em;}
.bukken-fee-list .fee-dtl .recommend { padding-top: .55em; aspect-ratio: 1; font-size: .75em; line-height: 1.2; font-family: var(--printemp); font-weight: 800; border-radius: 50%; background-color: var(--color-sub);}
.bukken-fee-list .fee-dtl .recommend .hide { display: block !important;}

.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/kacho/icon-building.svg?20250722); }
.bukken-link .calc .btn-def { background-color: #fff;}
.bukken-link .calc .icon::before { background-image:url(../img/kacho/icon-calculator.svg?20250722); }

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

#yamashinahigashino .bukken-link { display: flex; justify-content: center; }
#yamashinahigashino .bukken-link .floor { display: none; }
#yamashinahigashino .bukken-link .calc { text-align: center; }

/* 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){
  .message-box { padding-bottom: 150px;}
  
  .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 */
  .ttl-def { line-height: 1.3;}

  /* mv */
  #mv { height:300px;clip-path: url(#clip-sp); }
  #mv .mv-title { top: 47%; left: 48%; width: min(80%,300px); }
  #mv .mv-title::before { top: 28%; right: 84%; width: min(30vw,230px); aspect-ratio: 1; background-image: url(../img/kacho/mv-deco-l-sp.png);}
  #mv .mv-title::after { top: 67%; left: 93%; width: min(25vw,160px); aspect-ratio: 1; background-image: url(../img/kacho/mv-deco-r-sp.png?20250731);}

  /* message */
  .message-box { padding-bottom: 180px;}

  /* 特徴 ---------------------- */
.feature-list { grid-template-columns: minmax(0,1fr);}

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

  /* 物件情報 */
  .bukken-data:not(:last-child) { margin-bottom: 3em;}
  .bukken-info .d-list dt, .bukken-info .d-list dd { width: 100%; border: none; }
  .bukken-info .d-list dt { background-color: var(--color-l-pnk);}
  .bukken-fee-list { grid-template-columns: 1fr;}

  /* 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-list .fee-item:nth-child(2) .monthly .recommend { top: 50%; right: -4em; transform: translateY(-50%); width: 3.5; height: unset;padding-inline: unset; padding-top: .65em; position: absolute;}
  .bukken-fee-list .fee-item:nth-child(2) .monthly .recommend::before { display: none;}
}