@charset "utf-8";
/* CSS Document */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  color: #484848;
}
a {
  color: #333;
}
a:hover {
  color: #FF5F00;
}
.bg-slider {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
}
header h1 img {
  width: 150px;
  height: auto;
}
.headlogo {}
.headlogo h2 {
  color: #FFF;
}
.infowrap {
  padding: 30px;
  margin: 40px 0 0 0;
  background: #f7f4f1;
  border-radius: 10px;
}
#info h2 {
  background: url("../images/info.png") no-repeat;
  padding: 3px 0 5px 40px;
}
#info dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 20px 0 0 0;
}
.maintext {
  text-align: center;
  color: #FFF;
  width: 100%;
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.qm {
  background: url("../images/question.png") no-repeat right top;
  padding: 60px 0 20px 30px;
}
.slb a {
  background: #E0A145;
  color: #FFF;
  padding: 15px 20px 20px 20px;
  text-decoration: none;
  position: relative;
  border-radius: 10px;
}
.slb a:hover {
  background: #ECC238;
}
.slb a::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 6px solid transparent;
  border-top: 7px solid #FFF; /* 好みで色を変えてください */
}
#about-kd, #himitsu, #item, #about-kd, #s02, #s03 {
  position: relative;
}
#himitsu, #item, #uv, #column, #sr, #shop {
  padding: 70px 0;
}
#ecshop {
  padding: 70px 0 100px 0;
}
#s02, #s03 {
  margin-top: -100px;
}
#about-kd p, #himitsu p, #item p {
  line-height: 2;
}
#himitsu, #uv, #sr {
  background: #f7f4f1;
}
#column {
  background-color: #F3F9FD;
  background-image: url("../images/column_back.jpg");
  background-position: center top;
  background-size: cover;
  padding-bottom: 100px;
}
#about-kd .cby {
  background: #f7f4f1;
  border-radius: 10px;
  margin: 100px 0 0 30px;
  padding: 0 20px 80px 30px;
  position: relative;
}
#about-kd h1 {
  line-height: 190%;
  padding: 0 0 18px 100px;
  position: absolute;
  top: -50px;
  left: -30px;
}
#about-kd h1 {
  background: url("../images/s01.png") no-repeat top left;
}
#s02 h1 {
  background: url("../images/s02.png") no-repeat;
}
#s03 h1 {
  background: url("../images/s03.png") no-repeat;
}
#about-kd h2 {
  color: #E0A145;
  padding: 100px 0 10px 0;
}
#about-kd h3 {}
#himitsu h1, #item h1, #uv h1, #column h1, #sr h1, #shop h1 {
  margin: 0 0 50px 0;
}
#himitsu h1 span, #item h1 span, #uv h1 span, #column h1 span, #sr h1 span, #shop h1 span, #ecshop h1 span, #himitsu h2 span, #himitsu h3 span, #cp h1 span {
  border-bottom: solid 1px #333;
  padding: 0 0 10px 0;
}
#item h2 span {
  border-bottom: solid 1px #333;
  margin: 0 0 10px 0;
}
#sr h3 {
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  border-bottom: solid 1px #333;
}
#sr p {
  padding: 10px 0 0 0;
  font-size: 0.9rem;
}
.wingimgsc {
  position: absolute;
  top: 0;
  right: -20px;
  max-width: 35%;
  height: auto;
  transform: scale(-1, 1);
}
.s01img {
  text-align: right;
  position: relative;
  top: -80px;
  padding: 0 20px 0 50px;
}
.captext {
  background: #E0A145;
  color: #FFF;
  padding: 15px;
  border-radius: 10px;
}
.itembox {
  border: solid 5px #89ADBC;
  background: #f7f4f1;
  padding: 20px;
}
.itembox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.itembox li {
  margin: 0 0 20px 0;
}
.itembox a {
  display: block;
  background: #FFF;
  border: solid 1px #333;
  text-decoration: none;
  padding: 10px 0;
  font-size: 1.2rem;
}
.uv-text {}
#uv .age {
  background: #E0A145;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9rem;
}
#uv .sex-m {
  background: #8aa6bd;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9rem;
}
#uv .sex-w {
  background: #bd8d8a;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9rem;
}
#uv .scene {
  background: #89ADBC;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9rem;
}
#uv dl {
  display: flex;
  flex-wrap: wrap;
}
#uv dl dt {
  width: 28%;
}
#uv dl dd {
  width: 68%;
}
#uv a {
  margin: 0 auto;
  padding: 20px;
  background: #609BAA;
  color: #fff;
  display: block;
  font-size: 1.5rem;
  text-decoration: none;
}
#uv a:hover {
  opacity: 0.8;
}
.column-h2 {
  border: solid 3px #609BAA;
  background: #f7f4f1;
  padding: 5px 10px 5px 10px;
  font-size: 1.4rem;
  margin: 0 0 20px 0;
}
.column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.column li {
  margin: 0 0 20px 0;
}
.column a {
  display: block;
  background: #FFF;
  border: solid 1px #333;
  text-decoration: none;
  padding: 10px 0;
  font-size: 1.2rem;
}
.sr-shoplink-wrap {
  position: relative;
}
.sr-shoplink {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #fff;
  border: solid 1px #666;
}
.sr-shoplink a {
  display: block;
  padding: 20px;
  text-decoration: none;
}
.sr-shoplink .linkbdr {
  border-right: solid 1px #666;
}
a img:hover {
  -webkit-filter: brightness(1.1);
  -moz-filter: brightness(1.1);
  -o-filter: brightness(1.1);
  -ms-filter: brightness(1.1);
  filter: brightness(1.1);
}
.srmapl, .cplink {
  border: solid 1px #333;
  padding: 10px;
  background: #fff;
  text-decoration: none;
}
footer {
  padding: 50px 0 20px 0;
  background: #89ADBC;
  color: #FFF;
}
footer p {
  font-size: 0.8rem;
}
/*=== 矢印が動いてスクロールを促す  ====*/
/*スクロールダウン全体の場所*/
.scrolldown {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  bottom: 1%;
  right: 50%;
  /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}
/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove {
  0% {
    bottom: 1%;
  }
  50% {
    bottom: 3%;
  }
  100% {
    bottom: 1%;
  }
}
.scrolldown a {
  display: block;
}
/*Scrollテキストの描写*/
.scrolldown span {
  /*描画位置*/
  position: absolute;
  left: -20px;
  bottom: 10px;
  /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
/* 矢印の描写 */
.scrolldown:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 1px;
  height: 20px;
  background: #eee;
  transform: skewX(-31deg);
}
.scrolldown:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: 0;
  /*矢印の形状*/
  width: 1px;
  height: 50px;
  background: #eee;
}
/* ↓Tipsクリックで表示 */
/* -- .slide-down ---------- */
section .slide-down {
  position: relative;
  top: -100px;
  z-index: 100;
}
section .slide-down img {
  position: relative;
  top: 40px;
  right: 210px;
  animation: p_anim 1s infinite alternate;
}
@keyframes p_anim {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5px, -0);
  }
  20% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
section .slide-down p {
  margin: 0 0 0 auto;
  padding: 8px 20px;
  background: #609BAA;
  color: #fff;
  text-align: right;
  width: 280px;
}
div.slide-1, div.slide-2, div.slide-3, div.slide-4, div.slide-5, div.slide-6, div.slide-7, div.slide-8 {
  margin: 0 auto;
  padding: 40px 20px 20px 20px;
  background: #E0E2E3;
  position: relative;
  top: -120px;
  z-index: 10;
}
section .slide-down p:after {
  content: " ▼";
}
section .slide-down p, section .slide-down img:hover {
  cursor: pointer;
}
section .active p:after {
  content: " ▲";
}
/* -- div.slide-* ----------*/
div.slide-1, div.slide-2, div.slide-3, div.slide-4, div.slide-5, div.slide-6, div.slide-7, div.slide-8 {
  display: none;
}
/* ↑Tipsクリックで表示 */
/* YouTube埋め込みレスポンシブ */
/* YouTubeサムネイルをモーダルウィンドウで再生する */
.youtube_modal {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 56.25%;
}
.youtube_modal iframe, .youtube_modal a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* ユーザーボイス続きを読む */
.text_wrapper {
  position: relative;
}
.text {
  height: 90px;
  overflow: hidden;
}
.show_more, .show_more2 {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  padding-top: 60px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(180deg, rgb(255, 255, 255, 0) 0%, rgb(247, 244, 243, 1) 70%);
  cursor: pointer;
  transition: bottom 0.2s;
}
.active {
  background: none;
  bottom: 0px;
}
/* コラム表示 */
/*全て共通：hideエリアをはじめは非表示*/
.hide-area {
  display: none;
}
/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, .modaal-close:before {
  background: #ccc;
}
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
  background: #666;
}
/*========= ナビゲーションCSS ===============*/
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh; /*ナビの高さ*/
  background: rgba(255, 255, 255, 0.9);
  /*動き*/
  transition: all 0.6s;
}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
  right: 0;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh; /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  width: 320px;
}
/*リストのレイアウト設定*/
#g-nav li {
  list-style: none;
  position: relative; /*基準位置*/
  padding-left: 1em;
}
#g-nav li:before {
  border-radius: 50%; /*丸くする*/
  width: 15px; /*点の幅*/
  height: 15px; /*点の高さ*/
  display: block;
  position: absolute; /*絶対配置*/
  left: 0; /*点の位置*/
  top: 0.9em; /*点の位置*/
  content: "";
  background: #F0D5A2; /*点の色*/
}
#g-nav li a {
  color: #333;
  text-decoration: none;
  padding: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#g-nav li a:hover {
  color: #CCC;
}
/*========= ボタンのためのCSS ===============*/
.openbtn {
  position: fixed;
  z-index: 9980; /*ボタンを最前面に*/
  top: 10px;
  right: 10px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.8);
  ;
}
/*×に変化*/
.openbtn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #666;
  width: 45%;
}
.openbtn span:nth-of-type(1) {
  top: 15px;
}
.openbtn span:nth-of-type(2) {
  top: 23px;
}
.openbtn span:nth-of-type(3) {
  top: 31px;
}
.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}
.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}
/* ↓フェードイン */
/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ↑フェードイン */
/* ↓上から羽 */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ↑上から羽 */
/* ↓下から */
.fadeUpTrigger {
  opacity: 0;
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ↑下から */
/* ↓右から */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ↑右から */
/* ↓右上へ */
.flipRightTop {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1;
  }
}
/* ↑右上へ */
.spbr {
  display: inline-block;
}
.tbat {
  margin: 20px 0 20px 5px;
  font-size: 0.8rem;
}
/* 光りながら出てくる文字 */
.glowAnime span {
  opacity: 0;
}
/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span {
  animation: glow_anime_on 1s ease-out forwards;
}
@keyframes glow_anime_on {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px #fff, 0 0 15px #fff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
}
/* じわっと出てくる文字 */
.eachTextAnime span {
  opacity: 0;
}
.eachTextAnime.appeartext span {
  animation: text_anime_on 1s ease-out forwards;
}
@keyframes text_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ↓レスポンシブ */
@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
  .wingimg {
    margin: 70px;
  }
}
@media (min-width: 992px) {
  .maintext {
    bottom: 40%;
  }
  .maintext .h5 {
    font-size: 2rem;
  }
  .maintext .h2 {
    font-size: 2.5rem;
    line-height: 200%;
  }
  #info dt {
    width: 10%;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
  #info dd {
    width: 90%;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
  #about-kd h2 {
    padding: 70px 0 10px 0;
  }
  #about-kd .cby {
    padding: 0 50px 80px 70px;
  }
  .wingimgsc {
    max-width: 20%;
    z-index: -100;
  }
  .spbr {
    display: none;
  }
  .s01img {
    text-align: center;
  }
  .s01img img {
    width: 70%;
  }
  .tbat {
    display: none;
  }
  #uv dl {
    display: flex;
    flex-wrap: wrap;
  }
  #uv dl dt {
    width: 15%;
  }
  #uv dl dd {
    width: 85%;
  }
  .sr-shoplink {
    font-size: 1.2rem;
  }
}
@media (min-width: 768px) {}