@charset "utf-8";

/* common */
#wrapper { overflow: hidden;}
#kcg { background-image: linear-gradient(0deg, transparent 281px, rgba(234,234,234,1) 282px), linear-gradient(90deg, transparent 281px, rgba(234,234,234,1) 282px); background-size: 282px 282px; font-weight: 400;}
_::-webkit-full-page-media, _:future, :root #kcg { background-image: linear-gradient(0deg, transparent 281px, rgba(234,234,234,.3) 282px), linear-gradient(90deg, transparent 281px, rgba(234,234,234,.3) 282px); background-size: 282px 282px;}
#kcg #footer { background: #fff;}
#kcg article{ color:#111; }
#kcg article .marker { background:linear-gradient(transparent 30%, #f9f8c8 0%); }

.pop { font-family: 'Poppins', sans-serif; font-style: italic;}
.bg-grey { background: rgba(17,17,17,.1);}
.bg-grey2 { background: rgba(165,165,165,.1);}
.bg-grey3 { background: rgba(220,220,220,.1);}

#kcg .sec-box { padding: clamp(60px,9.5vw,95px) 0;}
.ico-pdf{ position:relative; }
.ico-pdf::before{ position:absolute; content:""; width:1.3em; height:1.3em; top:0.5em; right:1em; 
  background:url(/special/img/kyoisen/ico-pdf.svg) no-repeat center / 100%; }

.border-ttl { position: relative; margin-bottom: clamp(20px,4vw,40px); font-size: clamp(28px,3.2vw,32px); line-height: 1.4; font-weight: 500; z-index: 1;}
.border-ttl::before { position: absolute; content: ""; width: 370px; height: 38px; background: #e3e3e3; top: 35%; transform: translateX(-50%); left: 50%; z-index: -1; }
.border-ttl .em { font-size: 1.18em;}
.sub-ttl-en { display: block; font-size: .78em; color: #575757;}

.col-ttl{ margin-bottom:0; padding:0.2em 1.5em; text-align:center; letter-spacing:0.08em; color:#fff; background:#222222; }
.col-ttl-price { margin-bottom: 1em;}
.col-ttl.in-ttl{ background:none; padding:0; margin-bottom: 1.5em;}
.col-ttl.in-ttl .con{ display:inline-block; padding:0.2em 1.5em; background:#ff5f83; }
.col-ttl.in-ttl .con.ml { background: #ffa749;}
.col-ttl.in-ttl .con.mens { background: #41a1be;}
.de-txt { padding-bottom: 2em; margin: 0 0 2em; border-bottom: solid 1px #222222;}
.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 #222; color: #333;}
.d-list dt{ width:25%; background: rgba(0,0,0,.05);}
.d-list dd{ width:75%; }
.g-map { margin-top: 2em; height: clamp(300px,33vw,330px); border: solid 2px #333; 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:#333; 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%; }
#kcg article .button{ border-radius:0; }
#kcg article [class^="btn_"] a::before{ border-top: 10px solid #9a0046; border-right: 10px solid #9a0046; }

/* mv */
#mv { width: 100%; flex-wrap: nowrap; height: 100%;}
#mv .mv-left { width: 35%;}
#mv .mv-left img { height: 100%; width: 100%; object-fit: cover;}
#mv .mv-title { width: 65%; height: 100%;}
#mv .mv-title img { width: 100%;}

/* messsage */
#message { padding: 90px 0;}
#message .m-flex { position: relative; justify-content: flex-end; }
#message .m-flex::before , #message .m-flex::after { position: absolute; content: "";}
#message .m-flex::before { width: 233px; height: 175px; left: -160px; top: -88px; background: url("../img/kcg/square-b.png") center / contain no-repeat;}
#message .m-flex::after { width: 216px; height: 215px; right: -60px; top: -60px; background: url("../img/kcg/square-o.png") center / contain no-repeat;}
#message .for-all { position: absolute; padding: clamp(40px,7vw,70px) 0 clamp(40px,7vw,70px) clamp(40px,5vw,50px); width: 48%; left: -40px; background: rgba(202,202,202,.2);}
#message .border-list { transform: rotate(-4deg); font-size: clamp(17px,2.6vw,26px);}
#message .border-list li { position: relative; padding-left: 1.5em;}
#message .border-list li::before { position: absolute; content: ""; width: 20px; height: 4px; left: 0; top: 50%; transform: translateY(-50%);}
#message .border-list li:nth-child(1)::before { background: #9a0047;}
#message .border-list li:nth-child(2)::before { background: #0b2f80;}
#message .border-list li:nth-child(3)::before { background: #ed6c00;}
#message .message-ttl { margin-top: 0.6em; padding-left: 1em; font-size: clamp(24px,3.2vw,32px); transform: rotate(-4deg); font-weight: 500;}
#message .txt-box { margin-top: 3.75em; padding: 40px 70px 60px; width: 60%; background: #252525; position: relative;}
#message .txt-box .ttl-en { position: relative; display: inline-block; margin-bottom: 1em; padding: 0 clamp(60px,8vw,80px) 0 clamp(30px,5vw,50px); left: -80px; font-size: clamp(25px,3vw,30px); color: #fff; font-style: italic; z-index: 2;}
#message .txt-box .ttl-en::before { position: absolute; content: ""; width: 100%; height: 30px; bottom: -50%; left: 0; transform: translateY(-75%); background: #111111; z-index: -1;}
#message .txt-box .txt { margin: 0; color: #fff;}

/* Strong points */
#points .inner { position: relative;}
#points .inner::before,#points .inner::after { position: absolute; content: "";}
#points .inner::before { width: 184px; height: 183px; left: 0; top: -140px; background: url("../img/kcg/square-o.png") center / contain no-repeat;}
#points .inner::after { width: 139px; height: 139px; right: 0; top: -138px; background: url("../img/kcg/square-p.png") center / contain no-repeat;}
#points .border-ttl { margin-bottom: 0;}
#points .border-ttl::before { background: #fff;}
.strong-list { position: relative;}
.strong-list::before { position: absolute; content: ""; width: 139px; height: 139px; right: -60px; bottom: -68px; background: url(../img/kcg/square-p.png) center / contain no-repeat; z-index: 1;}
.strong-list li{ position:relative; margin-top:5em; padding:2.5em; background: #1f1f1f; color: #fff; }
.strong-list li:nth-child(2),.strong-list li:nth-child(3) { background: #fff; color: #111;}
.strong-list li .point-en { position: absolute; display: flex; margin: 0; left: 0; top: 0; max-width: 120px; max-height: 120px; min-width: 90px; min-height: 90px; width: 12vw; height: 12vw; justify-content: center; align-items: center; font-size: clamp(20px,2.5vw,25px); background: #1f1f1f; color: #fe9034;}
.strong-list li .point-en .num { position: relative; font-size: 2em; bottom: -3px;}
.strong-list li .pic{ text-align:center; }
.strong-ttl{ margin:1.4em 0 1.5em; font-size: clamp(18px,2.2vw,22px); text-align: center; letter-spacing: 0.08em; }
.strong-ttl span { display: inline-block; min-width: 130px; padding: .1em 1em; color: #fff; background: #111111; text-align: center;}
.strong-list li .txt { margin: 0; font-size: clamp(14px,1.55vw,15.5px); font-weight: 400; line-height: 1.6;}


/* Map */
#map{ padding-bottom:2em!important; }
#map .inner { position: relative;}
#map .inner::before { position: absolute; content: ""; width: 216px; height: 162px; left: 110px;
  top: -130px; background: url("../img/kcg/square-b.png") center / contain no-repeat;}
#map .pic { margin-top: 2em; padding:0.5em; background:#FFF; border: solid 2px #333333;}
#map .gender-list { margin: 2.5em 0; justify-content: center; gap: 1.5em;}
.gender-list li { position: relative; padding-left: 1.8em; font-size: clamp(14px,1.55vw,15.5px); font-weight: 400;}
.gender-list li::before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); width: 1.3em; height: 1.3em; background: #ff911a;}
.gender-list li:nth-child(2):before { background: #2d78de;}
.gender-list li:nth-child(3)::before { background: #ff4d8d;}
.gender-list li:nth-child(4)::before { background: url(../img/kcg/icon-star.png) center / contain no-repeat;}
#map .area-box { justify-content: center; gap:5%;}
#map .area-box .area-l, #map .area-box .area-r { width: 35%;}
.area-box .area-ttl { margin-bottom: 1.3em; padding-bottom: 0.5em; border-bottom: solid 2px #333333; font-weight: 400; line-height: 1.2; font-size: clamp(16px,1.8vw,18px);}
.area-box .area-list { position: relative; padding-left: 2em; margin-bottom: 2.5em; font-size: clamp(14px,1.55vw,15.5px); }
.area-box .area-list li { position: relative; padding-left: 2em; font-weight: 400;}
.area-box .area-list li:nth-child(n + 2) { margin-top: .6em;}
.area-box .area-list li span { position: absolute; display: inline-block; left: 0; top: 50%; transform: translateY(-50%); width: 1.5em; height: 1.5em; padding-left: 2px; border: solid 1px #bcb7b1; color: #fff; font-weight: 400; text-align: center; line-height: 1.3; }
.area-box .area-list li.star::before { position: absolute; content: ""; width: 1.3em; height: 1.3em; top: 50%; transform: translateY(-50%); left: -2em; background: url(../img/kcg/icon-star.png) center / contain no-repeat;}
.area-box .area-list li span.pink { background: #ff4d8d;}
.area-box .area-list li span.blue { background: #2d78de;}
.area-box .area-list li span.orange { background: #ff911a;}


.bnr_topics_member_wrap { background: rgba(220, 220, 220, .1); padding-block: 0 clamp(60px, 9.5vw, 95px); }
.bnr_topics_member { margin-top: 0; }

/* Bukken */
#bukken{ padding-top: clamp(120px,22vw,220px); padding-bottom:2em; }
#bukken .inner { position: relative;}
#bukken .inner::before { position: absolute; content: ""; width: 133px; height: 133px;     left: 50%; transform: translateX(-50%); top: -170px; background: url("../img/kcg/square-p.png") center / contain no-repeat;}
.bukken-list .de-ttl{ font-size: clamp(23px,3vw,30px); }
.bukken-list{ margin-bottom:3em; padding:3em 5.5em 4em; }
#bukken .de-ttl{ margin-bottom:.3em; }
#bukken .de-ttl .con { position: relative;}
#bukken .de-ttl .con::before ,#bukken .de-ttl .con::after { position: absolute; content: ""; }
#bukken .de-ttl .con::before { width: 42px; height: 42px; left: -75px; top: 5px; background: url("../img/kcg/square-g1.png") center / contain no-repeat;}
#bukken .de-ttl .con::after { width: 42px; height: 42px; right: -75px; top: 5px; background: url("../img/kcg/square-g2.png") center / contain no-repeat;}
#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/kcg/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;}
.route-access li:nth-child( n + 2) { margin-top: 1.5em;}
#bukken .d-down{ margin-bottom:1em; padding:0.7em 0; text-align:center; background:#e3e3e3; border:2px solid #222; }
#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:1em; height:2px; margin: auto; background: #fff;}
#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: 1.7em; height: 1.7em; transform: translateY(-50%); top: 50%; right: 1em; border-radius: 50%; background: #222;}
#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; }
#kcg article [class^="btn_"] a.calc{ color:#FFF; background: #222; border-color:#222; }
#kcg article [class^="btn_"] a.calc::before{ border-top: 10px solid #ffe785; border-right: 10px solid #ffe785; }
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; }
.btn-area li a { border: solid 2px #222;} 
.btn-detail .button { font-size: clamp(15px,1.8vw,18px);}
#bukken #hyakumanben .route-access img { max-width: 330px; width: 100%;}

/* おすすめ */
#sp-etc { background-color: #e7e9ef; }



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

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

  /* Strong points */
  #points{ padding-bottom:4em; }
  .strong-list{ display:-webkit-box; display:flex; flex-wrap:wrap; -webkit-box-pack:justify; justify-content:space-between; }
  .strong-list li{ width:47%; }

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

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

  /* Strong points */

  /* Bukken */
  #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; }
  .bukken-list{ margin-bottom:6em; }
  .btn-detail { width: 100%; }
  .btn-area li { margin-top: .7em;}
  .btn-detail .button{ width: 100%; }

}


/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {
  /* mv */
}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  /* message */
  #message.sec-box { padding-top: 10px;}
  #message .for-all { position: initial; display: flex; flex-direction: column; padding-left: 0; align-items: center; width: 100%; left: 0;}
  #message .message-ttl { padding-left: 0;}
  #message .txt-box { margin-top: 2em; width: 100%; padding: 30px 20px 30px;}
  #message .txt-box .ttl-en { left: -30px;}
  #message .m-flex::before { width: 233px; height: 135px; left: -40px; top: 2px;}
  #message .m-flex::after { width: 176px; height: 145px; right: -30px; top: -20px;}

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

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  /*common*/
  #kcg { background-image: linear-gradient(0deg, transparent 151px, rgba(234,234,234,1) 152px), linear-gradient(90deg, transparent 151px, rgba(234,234,234,1) 152px); background-size: 152px 152px;}
  _::-webkit-full-page-media, _:future, :root #kcg {
    background-image: linear-gradient(0deg, transparent 151px, rgba(234,234,234,1) 152px), linear-gradient(90deg, transparent 151px, rgba(234,234,234,1) 152px); background-size: 152px 152px;
  }
  .border-ttl::before { width: 270px; height: 28px;}

  .sub-ttl-en { font-size: .6em;}

  /* mv */
  #mv .mv-title { width:100%; }

  /*message*/
  #message .m-flex::before { width: 173px; height: 95px; left: -50px; top: -18px;}
  #message .m-flex::after { width: 86px; height: 125px; right: -10px; top: 190px;}
  #message .for-all { padding: 2em 0 1.5em;}
  #message .message-ttl { transform: none;}

  /*strong*/
  .strong-list li { margin-top: 2.5em;}
  #points .inner::before { width: 104px; height: 103px; left: 0; top: -100px;}
  #points .inner::after { width: 79px; height: 79px; right: 0; top: -108px;}
  .strong-list::before { width: 89px; height: 89px; right: -10px; bottom: -48px;}

  /*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;}
  #bukken .de-ttl .con::before { width: 32px; height: 32px; left: -55px;}
  #bukken .de-ttl .con::after { width: 32px; height: 32px; right: -65px;}
  #bukken .inner::before { width: 83px; height: 83px; top: -100px;}
  .bukken-list { padding: 2em 1em;}
  #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, #kcg article .button { width: 100%;}
  #kcg article .button { padding: 0.7em 2em 0.6em 2em;}
}

@media screen and (max-width: 320px){
}