@charset "UTF-8";

/* =========================
   Base Reset (LP向け最小)
   ========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family:
    "DFGHSMincho",
    "Noto Serif JP",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Yu Mincho",
    "YuMincho",
    "MS Mincho",
    serif;
}

/* 画像の“隙間/継ぎ目”対策（LPで必須） */
img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* =========================
   Layout
   ========================= */
.lp {
  width: 100%;
  max-width: 568px;
  /* PCでもこの幅で固定（方針が違うならここだけ変更） */
  margin: 0 auto;
  padding: 0 20px;
  /* SPの左右余白 */
}

@media (min-width: 768px) {
  .lp {
    padding: 0 60px;
    /* PC時の左右余白 */
  }
}

.main {
  text-align: center;
}

/* =========================
   Sections (基本)
   ========================= */
.section1,
.section2,
.section3,
.section5,
.section8,
.section9 {
  position: relative;
  width: 100%;
}

/* 旧クラス互換（HTMLで lp-image を使っている場合） */
.lp-image {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}

/* =========================
   Button
   ========================= */
.button_cv {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;

  width: 80%;
  max-width: 360px;
  /* PCで暴れない上限 */
  height: auto;
}

.section3_5 { position: relative; }
.video-sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
}
.btn-sound {
  font-size: 14px;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.lp-video{
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

.section3_5{
  position: relative;
  width: 100%;
}

/* スマホだけ少し広げる（PCで90%にしない：ここが以前の暴れ原因になりやすい） */
@media (max-width: 768px) {
  .button_cv {
    width: 90%;
    max-width: 90%;
  }
}

.section5 {
  position: relative;
  z-index: 5;
}

/* =========================
   Text Blocks (共通)
   ========================= */
.text-block {
  position: absolute;
  color: #fff;
  padding: 10px;
  width: 90%;
  text-align: center;
}

/* Hero Text */
#text-block1 {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 38px;
  font-weight: 600;
  line-height: 50px;
}

@media (max-width: 768px) {
  #text-block1 {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    font-weight: 600;
    line-height: 46px;
  }
}

#text-block1 span {
  font-size: 46px;
  color: #F5D056;
}

@media (max-width: 768px) {
  #text-block1 span {
    font-size: 36px;
    color: #F5D056;
  }
}

#text-block2 {
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  line-height: 28px;
}

@media (max-width: 768px) {
  #text-block2 {
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    line-height: 22px;
  }
}

#text-block3 {
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  font-weight: 600;
  line-height: 32px;
}

@media (max-width: 768px) {
  #text-block3 {
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
  }
}

.section8 {
  overflow: hidden;
}

/* =========================
   Section 8
   ========================= */
.section8 {
  position: relative;
  width: 100%;
}

.section8 .EAV {
  position: absolute;
  top: 80px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
}

.section8 #text-block4 {
  position: absolute;
  z-index: 3;
  top: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 640px;
  padding: 16px 20px;
  color: #FF7070;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 4px;
  text-align: center;
  line-height: 1.8;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .section8 #text-block4 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.6;
    border-radius: 6px;
  }
}

.section8 #text-block5 {
  position: absolute;
  z-index: 3;
  top: 4.2%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 640px;
  padding: 16px 20px;
  color: #505050;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  line-height: 1.3;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .section8 #text-block5 {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    line-height: 1.3;
    border-radius: 6px;
  }
}

.section8 #text-block6 {
  position: absolute;
  z-index: 3;
  top: 21%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  padding: 16px 20px;
  color: #505050;
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  line-height: 2.0;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .section8 #text-block6 {
    top: 21.5%;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    line-height: 1.7;
    border-radius: 6px;
  }
}

.section8 .about-eav {
  position: absolute;
  top: 30%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.section8 .touch {
  position: absolute;
  top: 40%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
}

.section8 #text-block7 {
  position: absolute;
  z-index: 3;
  top: 3.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 640px;
  padding: 16px 20px;
  color: #FF7070;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 4px;
  text-align: center;
  line-height: 1.8;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .section8 #text-block7 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -2px;
    text-align: center;
    line-height: 1.6;
    border-radius: 6px;
  }
}

.section8 #text-block8 {
  position: absolute;
  z-index: 3;
  top: 7%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 640px;
  padding: 16px 20px;
  color: #505050;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  line-height: 1.3;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .section8 #text-block8 {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    line-height: 1.3;
    border-radius: 6px;
  }
}

.section8 #text-block9 {
  position: absolute;
  z-index: 3;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  padding: 16px 20px;
  color: #505050;
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  line-height: 2.0;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .section8 #text-block9 {
    top: 35.6%;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    line-height: 1.7;
    border-radius: 6px;
  }
}

.section8 .voice {
  position: absolute;
  top: 69.5%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
}

.section8 #text-block10 {
  position: absolute;
  z-index: 3;
  top: 6.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 640px;
  padding: 16px 20px;
  color: #FF7070;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 4px;
  text-align: center;
  line-height: 1.8;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .section8 #text-block10 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.6;
    border-radius: 6px;
  }
}

.section8 #text-block11 {
  position: absolute;
  z-index: 3;
  top: 13.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 640px;
  padding: 16px 20px;
  color: #505050;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  line-height: 1.3;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .section8 #text-block11 {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.3;
    border-radius: 6px;
  }
}

.section8 #text-block12 {
  position: absolute;
  z-index: 3;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  padding: 16px 20px;
  color: #505050;
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  line-height: 2.0;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .section8 #text-block12 {
    top: 70.5%;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    line-height: 1.7;
    border-radius: 6px;
  }
}

/* =========================
   Section 9
   ========================= */
.section9 {
  position: relative;
  width: 100%;
}

.section9 #text-block13 {
  position: absolute;
  z-index: 3;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  padding: 16px 20px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  line-height: 2.0;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .section9 #text-block13 {
    position: absolute;
    z-index: 3;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    padding: 16px 20px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    line-height: 1.9;
    border-radius: 6px;
  }
}

.section9 .old-new {
  position: absolute;
  top: 41%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 86%;
  left: 50%;
  transform: translateX(-50%);
}

.section9 .content-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 87%;
  z-index: 4;
  top: 81%;
}

.section9 .content-wrap .cut-image {
  float: left;
  width: 38%;
  max-width: 260px;
  height: auto;
  margin: 0 16px 12px 0;
  display: block;
}

/* text-block14 は absolute を解除して回り込み */
.section9 #text-block14 {
  position: static;
  transform: none;
  width: auto;
  padding: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  line-height: 2.0;
}

@media (max-width: 768px) {
  .section9 #text-block14 {
    position: static;
    transform: none;
    width: auto;
    padding: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    line-height: 1.9;
  }
}

/* 回り込み解除 */
.section9 .content-wrap::after {
  content: "";
  display: block;
  clear: both;
}

.section12 {
  position: relative;
  width: 100%;
}

.tokyo .button_cv {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 80%;
  max-width: 360px;
  /* PCで暴れない上限 */
  height: auto;
}

/* スマホだけ少し広げる（PCで90%にしない：ここが以前の暴れ原因になりやすい） */
@media (max-width: 768px) {
  .tokyo .button_cv {
    width: 90%;
    max-width: 90%;
  }
}