@charset "utf-8";

/* ========== Reset / Basics ========== */
* { margin: 0; padding: 0; }
img { border: none; }
ol, ul { list-style-position: inside; padding-left: 10px; }
ol li, ul li { text-align: left; }

a:link, a:visited { color: #ffffff; text-decoration: underline; }
a:hover, a:active { color: #d90909; text-decoration: underline; }

.text-center { text-align: center; }

/* 使っている可能性がある装飾クラス（必要なら残す） */
.impact  { font-size: 20pt; font-weight: bold; }
.impact2 { color: red; }
.impact3 { background: yellow; color: #000; }
#impact4 { text-decoration: underline; }
.impact5 { background: #173B50; padding: 2px 5px; color: #fff; }
.impact6 { background: #f4f4f4; padding: 3px; line-height: 1.1; }
.impact7 { background: #B60000; padding: 2px 5px; color: #fff; }
.style2  { color: #FF0000; }
.style3  { color: #333333; }
.style4  { color: #000000; }

/* ========== Animation helpers ========== */
.feedInUp {
  opacity: 0;
  transform: translate(0, 30px);
  transition: 1.5s;
}
.feedInUp_On {
  opacity: 1;
  transform: translate(0, 0);
}

/* ========== Layout ========== */
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  background-image: url(../images/bg.jpg);
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: top center;

  -webkit-text-size-adjust: none;

  text-align: center;
  font-size: 18px;
  font-family: 'meiryo', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  color: #383d5c;
}

/* コンテナ（文章やボタンの中央寄せ用） */
#container,
.container {
  text-align: left;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* PC/タブレットは中央500pxのカラム */
.page {
  max-width: 500px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* スライス（ヘッダー画像群＆フォーム画像）共通 */
.page > div {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto; /* 横幅にフィット */
}

/* ===== スライス個別（元カンプ幅 1000px 想定） ===== */
#head1  { background-image:url("../images/header_01.png"); aspect-ratio: 1000 / 116; }
#head2  { background-image:url("../images/header_02.png"); aspect-ratio: 1000 / 275; }
#head3  { background-image:url("../images/header_03.png"); aspect-ratio: 1000 / 306; }
#head4  { background-image:url("../images/header_04.png"); aspect-ratio: 1000 / 595; }
#head5  { background-image:url("../images/header_05.png"); aspect-ratio: 1000 / 257; }

#head7  { background-image:url("../images/header_07.png"); aspect-ratio: 1000 / 545; }
#head8  { background-image:url("../images/header_08.png"); aspect-ratio: 1000 / 590; }
#head9  { background-image:url("../images/header_09.png"); aspect-ratio: 1000 / 533; }
#head10 { background-image:url("../images/header_10.png"); aspect-ratio: 1000 / 636; }
#head11 { background-image:url("../images/header_11.png"); aspect-ratio: 1000 / 708; }
#head12 { background-image:url("../images/header_12.png"); aspect-ratio: 1000 / 645; }
#head13 { background-image:url("../images/header_13.png"); aspect-ratio: 1000 / 634; }
#head14 { background-image:url("../images/header_14.png"); aspect-ratio: 1000 / 650; }
#head15 { background-image:url("../images/header_15.png"); aspect-ratio: 1000 / 644; }
#head16 { background-image:url("../images/header_16.png"); aspect-ratio: 1000 / 329; }
#head17 { background-image:url("../images/header_17.png"); aspect-ratio: 1000 / 385; }
#head18 { background-image:url("../images/header_18.png"); aspect-ratio: 1000 / 486; }

#head20 { background-image:url("../images/header_20.png"); aspect-ratio: 1000 / 491; }
#head21 { background-image:url("../images/header_21.png"); aspect-ratio: 1000 / 736; }
#head22 { background-image:url("../images/header_22.png"); aspect-ratio: 1000 / 672; }
#head23 { background-image:url("../images/header_23.png"); aspect-ratio: 1000 / 529; }
#head24 { background-image:url("../images/header_24.png"); aspect-ratio: 1000 / 440; }
#head25 { background-image:url("../images/header_25.png"); aspect-ratio: 1000 / 764; }
#head26 { background-image:url("../images/header_26.png"); aspect-ratio: 1000 / 532; }
#head27 { background-image:url("../images/header_27.png"); aspect-ratio: 1000 / 467; }
#head28 { background-image:url("../images/header_28.png"); aspect-ratio: 1000 / 420; }
#head29 { background-image:url("../images/header_29.png"); aspect-ratio: 1000 / 576; }
#head30 { background-image:url("../images/header_30.png"); aspect-ratio: 1000 / 562; }
#head31 { background-image:url("../images/header_31.png"); aspect-ratio: 1000 / 557; }
#head32 { background-image:url("../images/header_32.png"); aspect-ratio: 1000 / 672; }
#head33 { background-image:url("../images/header_33.png"); aspect-ratio: 1000 / 867; }
#head34 { background-image:url("../images/header_34.png"); aspect-ratio: 1000 / 378; }
#head35 { background-image:url("../images/header_35.png"); aspect-ratio: 1000 / 687; }
#head36 { background-image:url("../images/header_36.png"); aspect-ratio: 1000 / 618; }
#head37 { background-image:url("../images/header_37.png"); aspect-ratio: 1000 / 491; }
#head38 { background-image:url("../images/header_38.png"); aspect-ratio: 1000 / 533; }
#head39 { background-image:url("../images/header_39.png"); aspect-ratio: 1000 / 680; }
#head40 { background-image:url("../images/header_40.png"); aspect-ratio: 1000 / 816; }
#head41 { background-image:url("../images/header_41.png"); aspect-ratio: 1000 / 475; }
#head42 { background-image:url("../images/header_42.png"); aspect-ratio: 1000 / 572; }
#head43 { background-image:url("../images/header_43.png"); aspect-ratio: 1000 / 734; }
#head44 { background-image:url("../images/header_44.png"); aspect-ratio: 1000 / 514; }
#head45 { background-image:url("../images/header_45.png"); aspect-ratio: 1000 / 401; }
#head46 { background-image:url("../images/header_46.png"); aspect-ratio: 1000 / 272; }
#head47 { background-image:url("../images/header_47.png"); aspect-ratio: 1000 / 471; }

#form  { background-image: url("../images/form.png");  aspect-ratio: 1000 / 383; }
#form2 { background-image: url("../images/form2.png"); aspect-ratio: 1000 / 424; }
#form3 { background-image: url("../images/form3.png"); aspect-ratio: 1000 / 500; }

/* 包み背景（必要な場合のみ使用） */
#wrap {
  background-image: url("../images/wrap.png");
  background-repeat: repeat-y;
  background-position: 50% 0%;
}
#wrapform {
  background-image: url("../images/wrapform.png");
  background-repeat: repeat-y;
  background-position: 50% 0%;
}

/* フッター */
#footer { background-color: #303030; }

/* ========== Media elements ========== */
/* 画像・動画・iframeは基本的に親幅を超えない */
img, video, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ボタン画像（.btn）は自然サイズで、hover時に少し明るく */
.btn {
  display: inline-block;
  max-width: 100%;
  height: auto;
  cursor: pointer;
  filter: none;
}
.btn:hover { filter: brightness(120%); }

/* セクションごとの上余白（必要なら調整） */
#form  .btn,
#form2 .btn,
#form3 .btn { margin-top: 100px; }

/* PC版の全面背景画像（SPには効かない） */
body.pc {
  background: url("../images/pc_bg.jpg") no-repeat center center fixed;
  background-size: cover;
}
body.pc .page {
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  background: transparent; /* 白背景にしたい場合は rgba(255,255,255,.85) など */
}

/* ========== YouTube responsive wrapper ========== */
.yt-wrap {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 2rem auto;
  aspect-ratio: 16 / 9;  /* 高さを大きくしたい時は 16/12 などに変更 */
  background: #000;
  z-index: 1;
}
.yt-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ========== 固定CTA（右下） ========== */
.fixed-cta {
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 10000;
  width: 350px;     /* デスクトップの標準サイズ。好みで調整 */
  line-height: 0;
  transform: none !important;
  animation: none !important;
  text-decoration: none;
}
.fixed-cta img {
  width: 100% !important;
  height: auto !important;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.2));
}
.fixed-cta:hover img {
  filter: brightness(1.08) drop-shadow(0 8px 16px rgba(0,0,0,.25));
}

/* スマホはさらに少し小さく */
@media (max-width: 768px) {
  .fixed-cta {
    right: 12px;
    bottom: 12px;
    width: 64px;
  }
}