@charset "utf-8";

/* common */
#wrapper { overflow: hidden;}
#kyobi #footer { background: #fff;}
#kyobi article{ color:#333; }

.f-rubik { font-family: 'Rubik', sans-serif; }
.bg-grey { background:#f5f5f5; }
.bg-yg { background:#f8f6e4; }
.bg-gra { background-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(238, 238, 238, 1)); }

#kyobi .sec-box { padding-block: clamp(2em,6.5vw,65px);}

.ttl-b{ margin-bottom:0.8em; text-align:center; font-size:clamp(1.375rem, 1rem + 1.6vw, 2rem); line-height:1.6; }
.ttl-b .con{ display:inline-block; position:relative; padding: 0 2.5em 0.5em; }
.ttl-b .con::before{ position:absolute; content:""; width:100%; height:1px; left:0; bottom:0; background:#cfcfcf; }
.ttl-b .en{ display:block; font-size:0.5em; font-family: 'Rubik', sans-serif; letter-spacing:0.03em; color:#de3300; }

.col-ttl{ margin-bottom:0; padding:0.2em 1.5em; text-align:center; letter-spacing:0.08em; color:#fff; background:#717171; }
.col-ttl-price { margin-bottom: 1em; text-align: center; font-size:clamp(1.125rem, 0.825rem + 1.28vw, 1.625rem); }
.col-ttl.in-ttl{ background:none; padding:0; margin-bottom: 1.5em;}
.col-ttl.in-ttl .type{ display:inline-block; padding:0.2em 1.5em; background:#ff5f83; }
.col-ttl.in-ttl .type.ml { background: #ffa749; }
.col-ttl.in-ttl .type.mens { background: #41a1be; }
.osusume { justify-content: center; gap: 2em;}
.osusume-s { padding-top: 1em; font-size: clamp(18px,2vw,20px);}
#rakuhoku .osusume-s { padding-top: 0;}
.osusume-s span { position: relative;}
.osusume-s span::before { position: absolute; content: ""; width: 20px; height: 34px; top: 50%; transform: translateY(-50%); left: -25px; background: url("../img/kcg/icon-recommend.svg") center / contain no-repeat;}
.osusume-s-list li { position: relative; padding-left: 2.5em;}
.osusume-s-list li::before { position: absolute; content: ""; width: 32px; height: 32px; border-radius: 50%; left: 0;}
.osusume-s-list li.s-icon-blue::before { background: url("../img/kcg/icon-recommend-s.svg") center / 18px no-repeat #0b2f80;}
.osusume-s-list li.s-icon-orange::before { background: url("../img/kcg/icon-recommend-s.svg") center / 18px no-repeat #ed6c00;}
.osusume-s-list li.s-icon-red::before { background: url("../img/kcg/icon-recommend-s.svg") center / 18px no-repeat #9a0046;}
.osusume-s-list li:nth-child( n + 2) { margin-top: .8em;}
.d-list{ display:-webkit-box; display:flex; flex-wrap:wrap; font-size:clamp(14px,1.55vw,15.5px); }
.d-list dt, .d-list dd{ padding:1.8em 1em 1.8em 1.8em; border-bottom:1px solid #cfcfcf; color: #333;}
.d-list dt{ width:25%; background:#f8f6e4; }
.d-list dd{ width:75%; }
.g-map { margin-top: 2em; height: clamp(300px,33vw,330px); width:100%; padding-top:56.25%; position:relative;}
.g-map iframe { position:absolute; top:0; right:0; width:100% !important; height:100% !important;}

.t-data{ width:100%; background:#FFF; border:1px solid #989898; }
.t-data td, .t-data th{ padding:.7em 0.3em; line-height: 1.5; border:1px solid #989898; }
.t-data th{ background:#717171; color: #fff; }
.list-dot { padding:0 1em; text-align:left; }
.list-dot li { padding-left: 1em; position: relative; }
.list-dot li:not(last-child) { margin-bottom:0.3em; }
.list-dot li::before { content:""; position:absolute; top:.7em; left:0; width:6px; height:6px; 
  background:#989898; border-radius:50%; }
#kyobi article .button{ border-radius:0; }
#kyobi article [class^="btn_"] a::before{ border-top: 10px solid #c69d00; border-right: 10px solid #c69d00; transition:all .3s; }

/* mv */
#mv { padding:11vw 0 0 50px; background:url(../img/kyobi/mv.jpg) no-repeat 50% 50% / cover; }
#mv .mv-title{ width:46%; }

/* messsage */
#message .inner{ position:relative; }
#message .inner::before{ position:absolute; z-index:-1; content:""; width:200px; height:200px; top:-25%; left:-15%;
  background:#f8f8f8; border-radius:50%; }
#message .ttl-b{ display:block; position:relative; font-weight:500; }
#message .ttl-b::before{ position:absolute; content:""; width:84%; height:1px; left:16%; bottom:0.3em; background:#cfcfcf; }
#message .ttl-b .small{ display:block; }
#message .ttl-b .en{ margin-top:0.5em; text-align:left; }

/* 清水五条をご紹介バナー */
#message + .bnr-kiyomizu-gojo { padding: 0 0 100px; }
.bnr-kiyomizu-gojo img { width: 100%; }

/* Map */
#map{ padding-bottom:2em; }
#map .pic { margin-top: 2.5em; padding:0.5em; background:#FFF; box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.1); }

.bnr_topics_member { padding-top: clamp(2em,6.5vw,65px); }

/* Bukken */
#bukken{ padding-top: clamp(120px,22vw,220px); padding-bottom:2em; }
#bukken .ttl-b .con::before{ content:none; }
.pic-info{ margin-inline:auto; text-align:center; }
.pic-info img{ border-radius: 30px; }
.bukken-list .de-ttl{ font-size: clamp(1.125rem, 0.675rem + 1.92vw, 1.875rem); }
.bukken-list{ position: relative; z-index:1; padding:3em 5.5em 4em; 
  background:#FFF; box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.1); border-radius:20px; }
.bukken-list::before{ position:absolute; content:"Pick up!"; width:26%; min-width:120px; top:0; left:50%; transform:translateX(-50%); padding-inline:0.1em; text-align:center; 
  font-size:0.95em; font-family: 'Rubik', sans-serif; color:#FFF; background:#de3300; border-radius:0 0 15px 15px; }
#bukken .de-ttl{ margin-bottom:.3em; }
#bukken .de-ttl .con { position: relative;}
#bukken .slide{ margin:2em auto; }
#bukken .slider, #bukken .thumbnail_slider{ width:95%; max-width:700px; margin:0 auto; }
#bukken .slick-slide img { margin:0 auto; }
#bukken .slick-arrow{ position:absolute; content:""; z-index:1; top:50%; transform:translateY(-50%); text-indent: -9999px; background: none; }
#bukken .slick-prev{ left:-1.7em; }
#bukken .slick-next{ right:-1.7em; }
#bukken .slick-prev::before, #bukken .slick-next::before{ position: absolute; content: ""; top:0; right:0; width:2em; height:2em;
  background: url(/special/img/kyobi/ico-arrow.svg) no-repeat center / 100%; }
#bukken .slick-prev::before{ left:0; right:auto; transform: rotate(180deg); }
.route-access { margin:4em auto; text-align: center; width:80%; max-width:440px; }
#bukken .d-down{ margin-bottom:1em; padding:1em 0; text-align:center; background:#FFF; border-radius:40px; box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.1); }
#bukken .d-down dt{ position:relative; color:#000; cursor:pointer; }
#bukken .d-down dt:before, #bukken .d-down dt:after { content: ""; position: absolute; z-index:1; top: 0; right:1.35em; bottom: 0; width:0.8em; height:1px; margin: auto; background: #3d3d3d;}
#bukken .d-down dt:after { -webkit-transform:rotate(90deg); transform:rotate(90deg);
-webkit-transition:all .5s; transition:all .5s; }
#bukken .d-down dt span { display: block; position: relative;}
#bukken .d-down dt > span::before { position: absolute; content: ""; width:2em; height:2em; transform: translateY(-50%); top: 50%; right:0.75em; 
  border-radius: 50%; background: #FFF; border: 1px solid #3d3d3d; }
#bukken .d-down dt.active:after { -webkit-transform:rotate(-180deg); transform:rotate(-180deg); }
#bukken .d-down dd{ padding:1em; }
#bukken .t-data{ font-size:0.9em; }
.detail-data{ margin-bottom:3em; }
.btn-area li{ margin-bottom:1em; }
#kyobi article [class^="btn_"] a.calc{ color:#FFF; background: #de3300; border-color:#de3300; }
#kyobi article [class^="btn_"] a.calc::before{ border-top: 10px solid #FFF; border-right: 10px solid #FFF; }
a.calc span::before { content: ""; position: absolute; top: 13px; left: 0; width: 20px; height: 20px;
  background: url(../../img/icon_calculator.svg) center / contain no-repeat; }
#kyobi .btn-area a{ border: solid 2px #c69d00;} 
.btn-detail .button { font-size: clamp(15px,1.8vw,18px);}
.fee-box{ padding:1.5em 2em; background:#f8f6e4; }

/* Strong points */
.strong-list{ margin-top:4em; }
.strong-list li .strong-ttl { display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom: 1em; }
.strong-list li .strong-ttl .ttl{ width:65%; /* text-align:right; */ font-size:clamp(1.063rem, 0.95rem + 0.48vw, 1.25rem); line-height:1.6; }
.strong-list li .strong-ttl .point-no{ width:min(30%, 108px); }
.strong-list li .pic{ text-align:center; }
.strong-list li .txt { padding:0.5em 1em 0.5em 2em; line-height: 1.6; border-left:#de3300 solid 4px; }

/* Gallery */
.bnr-streetview{ display: block; margin:3em auto 0; text-align: center; }
.bnr-streetview img{ box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.1); }
.gallery-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); row-gap:1em; column-gap:2%; }
.gallery .btn-open{ text-align: center; }
.gallery .btn-open .con{ display:inline-block; position: relative; min-width: 260px; text-align: center; padding: 0.4em 3em 0.3em 3em; 
  cursor: pointer; border: solid 2px #c69d00; transition: all .3s; }
.gallery .btn-open .con::before{ position:absolute; content:""; top: 0; right: 0;
  border: 10px solid transparent; border-top: 10px solid #c69d00; border-right: 10px solid #c69d00; transition: all .3s; }
.gallery .btn-open .con:hover{ color: #FFF; background: #c69d00; }
.gallery .btn-open .con:hover::before{ border-top: 10px solid #FFF; border-right: 10px solid #FFF; }

/* Other */
.b-ttl{ margin-bottom:1em; font-size:clamp(1.188rem, 1rem + 0.8vw, 1.5rem); }
.b-ttl .con{ display:block; position:relative; padding-bottom:0.8em; border-bottom:2px solid #cfcfcf; }
.b-ttl .con::before{ position: absolute; content:""; background:#de3300; width:12%; height:2px; bottom:-2px; left:0; }
.other-list{ margin-top:4em; text-align:center; }
.other-list li{ padding:2em; background:#f8f6e4; border-radius: 20px; }
.other-list .btn-area{ display: block; }
.other-list .button{ padding-block:0.35em; }
.other-list .pic{ margin-bottom:1.2em }
.other-list .txt{ margin-bottom:0; font-size:clamp(1.063rem, 0.95rem + 0.48vw, 1.25rem); }
.other-list .train-txt{ margin-top:0.5em; margin-bottom: 1.5em; }
.other-list .train-txt .con{ position:relative; z-index:1; padding-left:1.8em; font-size:clamp(1.063rem, 1.025rem + 0.16vw, 1.125rem); }
.other-list .train-txt .con::before, .other-list .train-txt .con::after{ position:absolute; content:""; left:0; }
.other-list .train-txt .con::before{ width:1.2em; height:1.8em; top:0;
  background:url(../../img/icon/train-purple.svg) no-repeat center / 100%; }
.other-list .train-txt .con::after{ width:100%; height:50%; top:65%; z-index:-1; background:#ddd5b4; }
.other-list .col-ttl{ position:relative; }
.other-list .col-ttl .type{ position:absolute; top:0; left:0; }


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

/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  .de-ttl{ font-size:2.2em; }
  .ico-ttl{ font-size:1.6em; }

  /* support */
  .support-list{ margin-top:2em; }

  /* message */
  #message .inner::before{ width:350px; height:350px; top:-200px; left:-120px; }

  /* Strong points */
  #points{ padding-bottom:4em; }
  .strong-list{ display:grid; grid-template-columns: 1fr 1fr; row-gap:2em; column-gap:4%; }

  /* Map */
  #map .pic{ padding:1.2em; }

  /* Bukken */
  .d-list dt{ width:20%; }
  .d-list dd{ width:80%; }
  #bukken .detail-data .col-ttl{ font-size:1.1em; }
  .btn-area{ display:-webkit-flex; display:flex; flex-wrap:wrap; -webkit-box-pack:center; justify-content:space-between; max-width: 630px; margin: 0 auto; gap: 5%;}
  .btn-area li:nth-child(1) { width: 40%;}
  .btn-area li:nth-child(2) { width: 55%;}
  .btn-area li:nth-child(3) { margin-top: 1em; width: 100%;}
  .btn-area li a { display: block; min-width: auto; padding: 0.7em 1em 0.6em 1em;}

  /* Other */
  .other-list{ display:grid; grid-template-columns: 1fr 1fr; column-gap:6.4%; row-gap: 2em; }

}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
  .ico-ttl{ font-size:1.9em; }
  .ico-ttl .en{ font-size: 0.8em; }

  /* MV */
  #mv{ height:600px; padding: 2vw 0 0 20px; }
    
  /* messsage */
  #message .inner{ width:560px; }
  #message .inner::before{ width:500px; height:500px; top:-250px; left:-180px; }

  /* Bukken */
  .bukken-list{ margin-top:-90px; }
  #bukken .slide{ margin-top:3em; }
  #bukken .slick-prev{ left:-5em; }
  #bukken .slick-next{ right:-5em; }
  #bukken .slick-prev::before, #bukken .slick-next::before{ width:3.5em; height:3.5em; }
  .btn-detail { width: 100%; }
  .btn-area li { margin-top: .7em;}
  .btn-area a:hover { color:#FFF; background:#c69d00; } 
  #kyobi article [class^="btn_"] a.calc:hover{ background: #3d3d3d; border-color: #3d3d3d; }
  #kyobi article [class^="btn_"] a:hover::before{ border-top: 10px solid #FFF; border-right: 10px solid #FFF; }
  .btn-detail .button{ width: 100%; }
  .de-txt{ text-align:center; }

}

@media screen and (min-width: 600px) and (max-width: 960px){
  /* Strong points */
  .strong-list li .strong-ttl .point-no{ width:25%; }
  .strong-list li .strong-ttl .ttl{ width:72%; font-size:1.15em; }
}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 1300px) {
  /* Bukken */
  .pic-info{ width:92%; }
}

/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {
  /* mv */
  #mv { height:450px; padding-left:30px; }
  #mv .mv-title{ width:80%; }
}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {

  /* Bukken */
  .bukken-list{ margin-top: 2em; padding-inline:2.5em; }

  /* support */
  .support-deadline{ width:10em; }
  .support-list li + li{ margin-top:1.5em; }

  .bnr-streetview{ width: 85%; }
}

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

  /* mv */
  #mv { height:300px; padding-inline:10px; background-position:70%; }
  #mv .mv-title{ width:100%; }

  /*map*/ 
  #map .pic { margin-top: 1em;}
  #map .inner::before { width: 136px; height: 102px; left: -20px; top: -70px;}
  #map .gender-list { margin: 2em 0;}
  .gender-list li { width: 45%;}
  #map .area-box .area-l, #map .area-box .area-r { width: 100%;}
  #map .area-box .area-r { margin-top: 2.5em;}
  .area-box .area-list li span { padding-left: 0;}
  .area-list:last-child { margin-bottom: 0;}

  /* Bukken */
  .col-ttl.in-ttl .con { font-size: .8em;}
  .pic-info img{ border-radius:12px; }
  .bukken-list { padding: 2em 1em;}
  .route-access { margin-block:1.5em; width:90%; }
  #bukken .d-list dt, #bukken .d-list dd{ width:100%; border-bottom:0; }
  .d-list dt, .d-list dd { padding: 1em;}
  #bukken .d-list dt{ background: rgba(0,0,0,.05); }
  .btn-area li, #kyobi article .button { width: 100%;}
  #kyobi article .button { padding: 0.7em 2em 0.6em 2em;}
  .fee-box{ padding-inline:1em; }
  #bukken .d-down{ border-radius: 15px; }

  /*strong*/
  .strong-list li { margin-top: 2.5em; }
  .strong-list li .txt{ padding-left:1.2em; }

  /* Other */
  .other-list li{ margin-bottom: 2.5em; }

  /* Gallery */
  #gallery { padding: 30px 0 40px; }
  .gallery-list{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  
  .bnr-kiyomizu-gojo { padding: 40px 0; }
  #message + .bnr-kiyomizu-gojo { padding: 0 0 50px; }
}