@charset "utf-8";

/* common */
#wrapper { overflow:hidden;}
body { font-family:'Noto Sans JP', sans-serif; line-height:1.87; color:#222;}
article { font-weight:400; background:url(../img/hanazono/bg-contents.png) no-repeat top center / 100% auto; }

.sec-box { padding-block:clamp(3em,7vw,70px);}
.en { font-family:'Gabarito', sans-serif; }
.txt { margin-block:0; }

.btn-def {
  display:inline-block; position:relative; cursor:pointer;
  min-width:255px; padding:0.4em 2em 0.4em 2em;
  font-size:.9375em; color:#54198a; font-weight:500; text-align:center;
  background:#fff; border:solid 2px #54198a; transition:all .5s; }
.btn-def::before {
  content:""; position:absolute; top:0; right:0;
  border:10px solid transparent;
  border-top:10px solid #54198a;
  border-right:10px solid #54198a; transition:all .5s;}
.btn-def:hover { color:#fff; background:#54198a !important; }
.btn-def:hover::before { border-top:10px solid #fff; border-right:10px solid #fff;}

/* ttl */
.ttl-def { padding-bottom:.3em; font-size:clamp(24px,4.2vw,32px); line-height:1.6; text-align:center; background:url(../img/hanazono/deco-yel.svg) no-repeat bottom center / auto 48%; }
.ttl-def .main-ttl { color:#54198a; }
.ttl-def .en { font-size:0.65em; color:#54198a; }
.ttl-def .en { display:inline-block; padding-inline:1em; position:relative; }
.ttl-def .en::before {
  position:absolute; top:0; left:0;
  content:""; display:block; width:10px; height:16px;
  background:url(../img/hanazono/deco-s-ora.svg) no-repeat top left / contain;
  }
.ttl-def .en::after {
  position:absolute; bottom:-3px; right:-26px;
  content:""; display:block; width:36px; height:36px;
  background:url(../img/hanazono/deco-s-ppl.svg) no-repeat bottom right / contain;
  }

.ttl-def.movie { background:none; }
.ttl-def.movie .main-ttl { display:inline-block; padding:.1em 4em; font-size:.75em; color:#fff; background-color:#54198a; border-radius:1em; }

.ttl-en-sub { margin-bottom:1em; font-family:'Gabarito', sans-serif; font-size:1.125em; color:#54198a; text-align:center; }
.ttl-en-sub > span { padding-top:.2em; position:relative; }
.ttl-en-sub > span::before {
  position:absolute; top:0; left:-1.3em;
  content:""; display:block; width:10px; height:16px;
  background:url(../img/hanazono/deco-s-ora.svg) no-repeat top left / contain;
  }


/* mv ---------------------- */
#mv { height:600px; background:url(../img/hanazono/mv.jpg?20231128) no-repeat center / cover; overflow:hidden; position:relative; }
#mv .mv-title { position:absolute; top:35%; left:50%; z-index:2; width:min(47%, 618px); }


/* message ---------------------- */
#message { padding-top:clamp(2em,5vw,50px); }
.message-box { max-width:620px; margin-bottom:min(4vw,30px); margin-inline:auto; }
.ttl-message { margin-bottom:.7em; font-size:clamp(19px,3vw,30px); text-align:center; background:none; }
.ttl-message .big { font-size:1.13em; }
.ttl-message .small { font-size:.9em; }
.ttl-message .en { padding-bottom:.7em; font-size:.866em; }
.ttl-message .en::after { bottom:.5em; }

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

/* 物件link ---------------------- */
.blink-list { display: grid; grid-template-columns: repeat(2, 1fr); width: 80%;  row-gap: 2.5em; column-gap: 2.5em; margin: 2em auto; }
.blink-list > li { width: 100%; }
.blink-list > li > a { display:grid; grid-template-columns:1fr 30%; overflow:hidden; }
.blink-list .img   { grid-area: 1 / 1 / 2 / 3; position:relative; overflow:hidden; }
.blink-list .name  { grid-area: 2 / 1 / 3 / 2; margin:0; }
.blink-list .btype { grid-area: 2 / 2 / 3 / 3; margin:0; }

.blink-list .name { display:grid; align-items:center; padding-left:7%; color:#fff; background-color:#54198a; position:relative; }
.blink-list .name::after {
  content:''; width:8px; height:8px;
  border:0; border-bottom:2px solid #fff; border-right: 2px solid #fff;
  position:absolute; top:40%; right:7%;
  transform: rotate(45deg); }

/* points ---------------------- */
#points { background:#f4f4f4; position:relative; }
#points::before {
  content:''; display:inline-block; width:40%; height:84%;
  position:absolute; top:4%; left:0; z-index:0;
  background:url(../img/hanazono/deco-left.png) no-repeat top left / contain; }
#points::after {
  content:''; display:inline-block; width:40%; height:95%;
  position:absolute; bottom:-55px; right:0; z-index:0;
  background:url(../img/hanazono/deco-right.png) no-repeat bottom right / contain; }


.strong-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:5em 3.6%; margin-top:4%; position:relative; z-index:1; }
.strong-list > li { text-align:center; padding:6% 7.7% 7.7%; background-color:#fff; border-radius:30px; }
.strong-ttl { display:inline-block; margin-bottom:1.2em; font-size:1.25em; color:#54198a; font-weight:500; line-height:1; position:relative; z-index:1; }
.strong-ttl::after {
  content:''; width:max(120%,170px); height:.8em; z-index:-1;
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  background-color:#ffc8ac; border-radius:1em;
}
.strong-ttl .point { margin-right:.5em; }
.strong-ttl .point > em { font-size:2em; }
.strong-list .txt { text-align:left; padding:2em 0 0; font-size:.96875em; line-height:1.6;}


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


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

.pickup .bukken-name { z-index:1; }
.pickup .bukken-name .con { padding-inline:1.5em; }
.pickup .bukken-name .con::before {
  content:''; display:inline-block; width:86px; height:1.1em; z-index:-1;
  position:absolute; top:-14px; left:0;
  background:url(../img/hanazono/pickup.png) no-repeat center / contain;
}
.bukken-box .apeal_point { margin-block:5%; text-align:center; }

/* 物件共通の色替えなど */
.bukken-box { border-top:5px solid #ade4df; }
.bukken-name { margin-bottom:.6em; font-size:clamp(24px,4.2vw,32px); line-height:1; }

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

.bukken-info .ttl { background:#54198a; }
.bukken-info .d-list dt { background:#e9ddf3; }

.bukken-fee-box { background:#e9ddf3; }
.bukken-fee-toggle dt { color:#54198a; }
.bukken-fee-toggle dt > span::before { background:#54198a; }

.bukken-link .floor .icon { padding-left:0; }
.bukken-link .calc .btn-def { background:#e9ddf3; }
.bukken-link .calc .icon::before { background-image:url(../img/hanazono/icon_calculator.svg); }

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


/* 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) {

   /* 物件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; }
}

/* 1024px以上(PC) */
@media screen and (min-width:1024px) {

}


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

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width:599px){
  /* common */

  /* mv */
  #mv { height:350px; }
  #mv .mv-title { left:auto; right:4%; width:90%; }

  /* message */

  /* 物件link */
  .blink-list { display: block; width: 100%; margin-top: 0; }
  .blink-list > li { width:100%; }
  .blink-list > li:nth-child(n+2) { margin-top:1em; }
  .blink-list > li > a { grid-template-columns:min(40%,150px) 1fr; grid-template-rows:38px 1fr; }
  .blink-list .img { grid-area: 1 / 1 / 3 / 2; padding-top:63%; }
  .blink-list .name { grid-area: 2 / 2 / 3 / 3; padding-left:8px; }
  .blink-list .btype { grid-area: 1 / 2 / 2 / 3; padding-top:5px; padding-left:8px; font-size:.9em; text-align:left; }
  .blink-list .btype br { display:none; }

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

  /* other */
  .other-list .btn-def { width:100%; min-width:auto; }

}