@charset "utf-8";

:root {
  /* 使用色 */
  --text-color:#222222;
  --color-base:#cf0026; /*ベースカラー*/
  --color-sub:#004898; /*アクセント*/
  --color-pnk:#f6ecec;
  --color-blu:#d4ecff;

  /* フォント */
  --en: "Arvo", 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 > 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,80px);}
.txt { margin-block:0; }
.c-pnk { color: var(--color-base);}

.bg-pnk { background: var(--color-pnk);}


.btn-def,.bukken-dlink a {
  display:inline-block; position:relative; cursor:pointer;
  width: min(260px,330px); padding:0.8em 2em 0.8em 2em ;
  font-size:.9375em; color:var(--color-sub); font-weight:500; text-align:center;
  background:#fff; border:solid 1px var(--color-sub); transition:all .5s; }
.btn-def::before,.bukken-dlink a::before { content: ""; position: absolute; top: 0; right: 0; border: 10px solid transparent; border-top: 10px solid var(--color-sub); border-right: 10px solid var(--color-sub); transition: all .5s;}
.btn-def:hover,.bukken-dlink a:hover { color: var(--color-sub); background:var(--color-blu) !important; }

.bukken-dlink a { width: 100%; max-width: 680px; border-radius: unset;}

/* ttl */
[class*="ttl"] { font-family: var(--printemp); font-weight: 500;}
.ttl-def .main { color:var(--color-txt); font-weight: 500;}
.ttl-def .main em { font-size: 1.5em; color: var(--color-base); font-weight: 500;}
.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; }

.ttl-def { display: grid; max-width: 482px; margin-inline: auto; margin-bottom:1.3em; padding-block:.8em; font-size:clamp(22px,3vw,34px); line-height: 1.2; text-align:center; font-weight: 500; border-block: 2px dashed var(--color-sub); position: relative; }
.ttl-def .en { position: absolute; top: -.9em; left: 50%; transform: translateX(-50%); padding:.15em 1.33em .28em; font-size:.47em; color: #fff; background-color: var(--color-base); border-radius: 3em;}

/* mv ---------------------- */
#mv { height:600px; background:url(../img/kouka/bg.jpg);overflow:hidden; position:relative; }
#mv::before,#mv::after { content: ''; position: absolute; }
#mv::before { width: min(40%,600px); height: 100%; background: url(../img/kouka/mv-deco-l.jpg) no-repeat left / cover;}
/* #mv::after { width: 100%; height: 100%; top: 0; right: 0; background: url(../img/kouka/mv-deco-r.png) no-repeat right / contain;} */

#mv .mv-title { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:2; width:min(35%,550px); }
#mv .mv-title::before{ content: ''; position: absolute; top:50%; left: 80%; transform: translateY(-50%); width: 665px; height: 600px; background: url(../img/kouka/mv-deco-r.png) no-repeat center / contain; z-index: -1;}



/* message ---------------------- */
#message { padding-top:clamp(2em,5vw,50px); }
#message .deco { max-width: 1350px; margin-inline: auto; position: relative;}
#message .deco::before,#message .deco::after { content: ''; position: absolute; width: min(37%,251px); height: min(34%,174px); background: url(../img/kouka/message-deco.png) no-repeat bottom / contain; z-index: -1; }
#message .deco::before { top: 15%; left: 3em;}
#message .deco::after { bottom: 0; right: 0;}
.message-box { max-width:600px; margin-inline:auto; padding-bottom: 5.5em;}
.ttl-message { max-width: 600px;}
.ttl-message .main em { font-size: 1em; color: var(--color-base);}
.ttl-message .en { position: absolute; top: -.9em;  left: 50%;  transform: translateX(-50%); padding:.15em 1.33em .28em; font-size:.47em; color: #fff; background-color: var(--color-base); border-radius: 3em;}

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



/* 特徴 ---------------------- */
#feature .ttl-def { margin-bottom: unset; border: unset; position: relative; z-index: 0;}
#feature .ttl-def::before { content: ''; top: 46%; left: 50%; transform: translateY(-50%) translateX(-50%); position: absolute; width: 5.1em; aspect-ratio: 1; background: url(../img/kouka/circle.png) no-repeat center / contain; z-index: -1;}
#feature .ttl-def .en { top: .4em; background-color: var(--color-sub);}
.feature-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4.3em 2.5em; margin-top: clamp(45px,4.9vw,65px); counter-reset: list-num;}
.feature-list >* { min-width: 0; min-height: 0;}
.feature-list > li { padding: 2em; padding-top: 2.5em;  background-color: #fff; position: relative; z-index: 0;}
.feature-list .label-wrap { display: flex; gap: 1em; position: absolute; top: -2em; right: 0; left: 0; width: fit-content; margin: auto; line-height: 1;}
.feature-list .label { margin-block: unset; font-size: clamp(22px,3vw,30px); color: var(--color-sub); }
.feature-list .count { font-size: 1.43em; color: var(--color-base); font-family: var(--en); counter-increment: list-num; position: relative;}
.feature-list .count::before { content: ''; position: absolute; top: -.8em; left: 2.1em; width: 1.2em; height: 1em; background: url(../img/kouka/point.png) no-repeat center / contain;}
.feature-list .count::after { content: counter(list-num,decimal-leading-zero); font-size: 1.56em; letter-spacing: .01em;}

.feature-list .ttl { display: grid; align-items: center; margin-block: 1em .7em; font-size: clamp(18px,3vw,20px); 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 { max-width: 970px; margin:2em auto;}
#map .note { width: min(95%,350px); margin-top: 3em; margin-inline: auto; padding: .5em; padding-left: 4.7em; background-color: var(--color-blu); position: relative;}
#map .note::before { content: 'Access'; display: grid; align-items: center; justify-items: center; position: absolute; top: -1.7em; left: -1.7em; width: 4.7em; aspect-ratio: 1; color: #fff; font-family: var(--en); background: url(../img/kouka/balloon.png) no-repeat center / contain;}
#map .note .txt { font-size: 1.12em;}

/* 物件情報 ---------------------- */
#bukken { padding-bottom:clamp(3em,9vw,90px); background-color:#f8f3fd; }

.tel-num { margin-bottom: unset; font-size: 1.5em; font-weight: 600; color: var(--color-sub); }
.tel-num .num { padding-left: 1.2em; position: relative;}
.tel-num .num::before { content: ''; position: absolute; top: 50%; left: -0.4em; transform: translateY(-50%); width:30px; height:30px; background: url(../img/kouka/icon_freetel.png) no-repeat center / contain;}
.tel-num .small { font-size: .6em; font-weight: 400; color: #555;}

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

#shinshinryo.bukken-box { position: relative;background: url(../img/kouka/shinshinryo-bg.png) #fff repeat-x top / auto clamp(30px,6vw,72px); z-index: 0; }
#shinshinryo.bukken-box::before,#shinshinryo.bukken-box::after { content: ''; position: absolute; width: min(18%,200px); height: min(17%,175px); z-index: -1;}
#shinshinryo.bukken-box::before { top: 4.5em; left: 0; background: url(../img/kouka/shinshinryo-deco-l.png) no-repeat left top/ contain;}
#shinshinryo.bukken-box::after { top: 14%; right: 0; background: url(../img/kouka/shinshinryo-deco-r.png) no-repeat right bottom / contain;}

#nishiojigojo.bukken-box { z-index: 0;}
#nishiojigojo.bukken-box::before,#nishiojigojo.bukken-box::after { content: ''; position: absolute; width: min(20%,200px); height: min(17%,175px); z-index: -1;}
#nishiojigojo.bukken-box::before { top: 0; left: 0; background: url(../img/kouka/shinshinryo-deco-l.png) no-repeat left top/ contain;}
#nishiojigojo.bukken-box::after { top: 3.5%; right: 0; background: url(../img/kouka/shinshinryo-deco-r.png) no-repeat right bottom / contain;}



#shinshinryo .bukken-name { width: min(98%,630px); margin-top: -1em; margin-inline: auto;}

.price-tbl { width: 100%; font-size: .93em;}
.price-tbl th,
.price-tbl td { padding: 1em; border: 1px solid #cfcfcf; border-collapse: collapse;}
.price-tbl th { font-weight: 500; background-color: #ececec;}
.price-tbl thead th:first-child { background-color: #fff;}
.price-tbl tbody th { width: 30%; text-align: start; }
.price-tbl tbody td { text-align: end;}

.tel-link { margin-top: 3em;}
.tel-link .btn-def { color: var(--color-sub);}

.icon-list { display: grid; grid-template-columns: repeat(7,1fr); gap: .7em; margin-block: 1em 1.5em;}
.icon-list li { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: .2em;}
.icon-list .img-wrap { display: grid; align-items: center; justify-items: center; height: 100%; padding: 1em .5em;  border: 2px solid var(--color-base); border-radius: 5px;}
.icon-list .img-wrap img { max-width: 50px; max-height: 60px;}
.icon-list .name { margin-block: unset; text-align: center; font-size: .75em; line-height: 1.3;}


/* 物件共通の色替えなど */
.bukken-box { padding-bottom: clamp(3em,7vw,93px);}
.bukken-name { margin-bottom:1.5em; font-size:clamp(24px,4.2vw,30px); line-height:1; font-weight: 500; }
.bukken-name .con { padding-bottom: .5em; border-bottom: 2px dashed var(--color-sub);}
.bukken-name .con::before,.bukken-name .con::after { display: none;}

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

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

.bukken-info .ttl {background:var(--color-sub); }
.bukken-info .d-list:first-of-type { margin-bottom: 3em;}


.bukken-fee-box.since2025 { padding: 1em clamp(20px,4vw,60px) .5em;  background-color: #ececec; }
.bukken-fee-box.since2025 .ttl { margin-bottom: .5em; padding-top: .4em; color: var(--color-sub); border: unset;}
.bukken-fee-toggle > dt { padding-block: .63em; color:#fff; font-size: 1.12em; background-color: var(--color-sub);}
.bukken-fee-toggle > dt::before,.bukken-fee-toggle > dt::after { background: var(--color-sub);}
.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,3vw,30px) 1.5em;}
.bukken-fee-toggle .ttl-disc::before { color: #005de1;}

.bukken-fee-list .fee-item { padding: .7em; padding-top: .7em; border-color: #dcdcdc;}
.bukken-fee-list .meal { font-size: .75em; border-radius: unset; background-color: #d3e9f4; }
.bukken-fee-list .fee-dtl { margin-bottom: .5em;}
.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/kouka/icon-building.svg?20250722); }
.bukken-link .calc .icon::before { background-image:url(../img/kouka/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 (max-width:1199px) {
/* mv ---------------------- */

#mv::before { top: -4em; left: -3em; width:40%; height: 70%; background: url(../img/kouka/mv-spdeco-l.png) no-repeat left / contain;}
#mv::after { width: 31%; height: 50%; top: unset; bottom: -3em; right: 3em; background: url(../img/kouka/mv-spdeco-r.png) no-repeat right / contain;}

#mv .mv-title { width: min(70%,440px);}
#mv .mv-title::before{top:0; left: 80%; width: 80%; height: 100%; background: url(../img/kouka/mv-txt-deco.png) no-repeat center / contain; z-index: -1;}


#message .deco::before {left: 0;}


}


/* ================================================================
  タブレット
=================================================================== */
@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) {

/* mv */
#mv { height: 50vh;}
#mv .mv-title::before { top: 5%; width: 60%;}

/* Message */
#message .deco::before { display: none;}

.icon-list .img-wrap img { max-width: 40px; max-height: 40px;}

  
/* 特徴 ---------------------- */
.feature-list { gap: 4.7em 1.7em;}
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width:599px){
  /* common */
  .ttl-def { line-height: 1.3;}

#map .note::before {top: -1.2em; left: -1em;}
#mv::after { bottom: -4em; right: 1em;}

  /* 特徴 ---------------------- */
.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-fee-list { grid-template-columns: 1fr;}

  #shinshinryo.bukken-box::before { top: 3.5em;}
  #shinshinryo.bukken-box::after { top: 16%; }

  .price-tbl th,
  .price-tbl td { padding: .5em;}
  .price-tbl tbody th { width: 22%;}
  .price-tbl .sp-txt { display: inline-block; font-size: .8em;}
  .price-tbl tbody td {letter-spacing: -.01em;}

  .icon-list { grid-template-columns: repeat(4,1fr); gap: .6em; }

  /* 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: 10%; right: -2.5em; 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;}
}