/* ==================================================
  成人認証
================================================== */
body.adultcheck {
  -webkit-text-size-adjust: none;
}

/* 成人認証以外はぼかす */
body.adultcheck > *:not(#adult_check_box):not(.adult_check_box) {
  -webkit-filter: blur(10px);
}

/* 背景設定
-------------------------------------------------- */
/* 半透明な白 */
body.adultcheck::before {
  position: fixed;
  z-index: 12000;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.3;
}

/* パターン背景 IE10以上 */
@media all and (-ms-high-contrast: none) {
  body.adultcheck::before {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAPElEQVQ4T2P8////fwbiwGdilDGOGogvmEbDEHvoDI1k84mYHMDAwMBLjDqQl0cNxBlSo2GIO6cM7mQDAClaWUOvWlN4AAAAAElFTkSuQmCC);
    opacity: 1;
  }
}

/* パターン背景 IE以外 */
:root body.adultcheck::after {
  position: fixed;
  z-index: 12100;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAPElEQVQ4T2P8////TAbiwBZilDGOGogvmEbDEHvoDI1k40tMDmBgYPAhRh3Iy6MG4gyp0TDEnVMGd7IBAMWoTtVcwv62AAAAAElFTkSuQmCC);
}

/* 背景スクロール禁止 */
body.adultcheck #container {
  position: fixed;
  width: 100%;
}


/* 成人向け入室確認
-------------------------------------------------- */
#adult_check_box,
.adult_check_box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 12200;
  top: 0;
  right: 10px;
  bottom: 0;
  left: 10px;
  margin: auto;
}

#check_top,
.check_top {
  position: relative;
  min-width: 300px;
  max-width: 360px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
  animation: fade 0.6s ease 0s 1 both;
}

@keyframes fade {
  0%   { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
    #check_top,
    .check_top {
    position: relative;
    width: 100%;
    max-width: 640px;
    border-radius: 10px;
  }
}

#check_top h1,
.check_top h1 {
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 16px 0;
  margin-bottom: 30px;
  border-radius: 5px 5px 0 0;
  background: #4d6594;
}

[class*="style_girls"] #check_top h1,
[class*="style_bl"]    #check_top h1,
[class*="style_girls"] .check_top h1,
[class*="style_bl"]    .check_top h1 {
  background: #806060;
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
  #check_top h1,
  .check_top h1 {
    font-size: 22px;
    background: linear-gradient(to bottom, #51648c 0%, #3a5480 100%);
    margin-bottom: 60px;
    padding: 24px 0;
    border-radius: 10px 10px 0 0;
  }
}

#check_top p,
.check_top p {
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  margin: 0 15px;
}

#check_top p strong,
.check_top p strong {
  color: #fa3e83;
  font-size: 20px;
  margin: 0 auto;
  font-weight: normal;
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
  #check_top p strong,
  .check_top p strong {
    font-size: 30px;
  }
}

[class*="style_girls"] #check_top p strong,
[class*="style_bl"]    #check_top p strong,
[class*="style_girls"] .check_top p strong,
[class*="style_bl"]    .check_top p strong {
  color: #806060;
}

#check_top p.top_text,
.check_top p.top_text {
  line-height: 1.5;
  font-size: 12px;
  margin: 10px 15px 15px;
}

@media screen and (max-width: 320px) {
  #check_top p.top_text,
  .check_top p.top_text {
    text-align: left;
  }

  #check_top p.top_text br,
  .check_top p.top_text br {
    display: none;
  }
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
  #check_top p.top_text,
  .check_top p.top_text {
    font-size: 15px;
    width: 84%;
    margin: 20px auto 30px;
  }
}

#check_top p.btm_text,
.check_top p.btm_text {
  font-size: 11px;
  margin: 20px 15px;
  text-align: left;
  color: #999;
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
  #check_top p.btm_text,
  .check_top p.btm_text {
    margin: 30px 15px;
    text-align: center;
  }
}

/* はい / いいえ ボタン */
.check_btn {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: 0 auto 30px;
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
  .check_btn {
    flex-direction: row;
    width: 84%;
    margin: 0 auto 60px;
  }
}

.check_btn li.btn_no {
  padding-top: 10px;
  order: 2;
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
  .check_btn li.btn_no {
    width: 35%;
    padding: 0 0 0 15px;
  }
}

.check_btn li[class*="btn_yes"] {
  order: 1;
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
  .check_btn li[class*="btn_yes"] {
    width: 65%;
  }
}

.check_btn li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  font-size: 16px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
  .check_btn li a {
    height: 76px;
    border-radius: 8px;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15) inset;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 22px;
  }
}

.check_btn li a:hover {
  opacity: 0.9;
  text-decoration: none;
}

.check_btn li.btn_no a {
  color: #fff;
  background: #aaa;
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
  .check_btn li.btn_no a {
    border: solid 1px #ccc;
    background: linear-gradient(to bottom, #f7f7f7 0%, #ddd 100%);
    text-shadow: 0 0 6px #fff, 0 0 4px #fff, 0 0 2px #fff, 0 0 1px #fff;
    color: #888;
  }
}

.check_btn li[class*="btn_yes"] a {
  color: #fff;
  font-size: 18px;
  background: #fa3e83;
}

@media screen and (min-width: 768px) and (orientation: portrait), (min-width: 1024px) {
  .check_btn li[class*="btn_yes"] a {
    font-size: 0;
    border: solid 1px #e66595;
    background: linear-gradient(to bottom, #ff86b3 0%, #ff4d8f 100%);
    text-shadow: 0 0 6px #dc3472, 0 0 4px #dc3472, 0 0 2px #dc3472, 0 0 1px #dc3472;
    color: #fff;
  }

  .check_btn li[class*="btn_yes"] a::after {
    font-size: 24px;
    letter-spacing: 0;
    content: "はい、18歳以上です";
  }

  .check_btn li.btn_yes_en a::after {
    content: "Yes, I can legally Enter";
  }

  .check_btn li.btn_yes_cn a::after {
    content: "是，我已满18岁";
  }

  .check_btn li.btn_yes_tw a::after {
    content: "是的，我已滿18歲";
  }

  .check_btn li.btn_yes_kr a::after {
    content: "네, 만 19세 이상입니다";
  }

}