@charset "utf-8";

/* ───────────────────────────────
   1. 全体共通
──────────────────────────────── */
body{
  background:#f5f5f5;color:#313131;
  margin:0;padding:0;
  font:16px/1.6 "メイリオ",Meiryo,"ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro W3";
}
p{line-height:24px;margin:0 0 10px;}
a{color:#555;text-decoration:none;}
a:hover{color:#006ddc;}

/* ───────────────────────────────
   2. レイアウト枠
──────────────────────────────── */
#container{
  width:750px;margin:0 auto;text-align:center;
  background:#fff;border-inline:1px solid #ccc;overflow:hidden;
}

/* ───────────────────────────────
   3. ファーストビュー（変更禁止）
──────────────────────────────── */
.kv{position:relative;}
.kv img{width:100%;height:auto;display:block;}

.kv-content{
  position:absolute;left:50%;top:72%;
  transform:translate(-50%,-50%);
  width:90%;max-width:480px;text-align:center;
  pointer-events:none;
}
.kv-content *{pointer-events:auto;}

.kv-title{
  position:relative;top:50px;margin-bottom:30px;
  transform:scale(1.2);transform-origin:center;
}
.kv .countdown{margin:15px 0 20px;}
.kv .countdown p{color:#e60033;font-size:40px;font-weight:bold;margin:2px 0;}

.form-guide{font-size:24px;color:#333;margin:65px 0 5px;}

.kv-form input[type="email"]{
  width:120%;height:64px;border:2px solid #015635;border-radius:5px;
  padding:0 12px;margin:15px 0 10px;transform:translateX(-4.5%);
}

.btn-cta{
  position:absolute;left:50%;bottom:155px;
  transform:translateX(-50%) scale(1.9);
  width:85%;max-width:360px;height:95px;
  background:url(../img/btn.png) center/contain no-repeat;border:none;
}

/* ───────────────────────────────
   4. 下部 underbotan セクション
──────────────────────────────── */

/* --- 土台 --- */
.under-wrap{position:relative;text-align:center;}
.under-wrap>img{width:100%;height:auto;display:block;}

/* --- 中央寄せコンテナ --- */
.under-content{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:100%;max-width:none;padding-inline:20px;
  text-align:center;pointer-events:none;
}
.under-content *{pointer-events:auto;}

/* --- カウントダウン --- */
.under-content .countdown{
  margin-top:-160px;          /* 20px 上げた最終値 */
  text-align:center;
}
.under-content .timer{
  color:#c40000;font-size:60px;line-height:1;
  white-space:nowrap;font-weight:bold;display:inline-block;
}

/* --- ラベル & 入力フォーム --- */
.under-content .form-guide{margin-top:10px;}  /* 20px 上げた最終値 */
.under-form{margin-top:10px;}                 /* 20px 上げた最終値 */

.under-form input[type="email"]{
  width:100%;height:64px;border:2px solid #015635;border-radius:5px;
  padding:0 12px;
}

/* --- タイトル画像（必要なら 1 枚だけ配置） --- */
.kv-title2{width:100%;height:auto;margin:10px 0 20px;}

/* --- 緑ボタン --- */
.btn-cta2{
  position:absolute;left:50%;top:65%;
  transform:translate(-50%,calc(-50% + 150px)) scale(1.8); /* 10px 下げて最終 150px */
  width:360px;height:110px;
  background:url(../img/btn.png) center/contain no-repeat;
  border:none;z-index:10;
}

/* ───────────────────────────────
   5. フッター
──────────────────────────────── */
footer{
  background:#00364F;color:#fff;text-align:center;
  padding:20px 0 15px;font-size:90%;
}
footer a{color:#fff;margin:0 8px;}
.copy{font-size:65%;margin-top:10px;}
/* ── underbotan 最終微調整 ───────────────── */

/* ① カウントダウンをさらに 40px 上げる＋30px 余白 */
.under-content .countdown{
  margin-top:-230px;      /* 位置調整 */
  margin-bottom:50px;     /* ← 追加：下に 30px スペース */
}

/* ② ラベル＆入力フォーム（位置はそのまま） */
.under-content .form-guide{ margin-top:-10px; }
.under-form{ margin-top:0; }

/* ③ ボタンをさらに 10px 下げる（変更済み） */
.btn-cta2{
  transform:translate(-50%, calc(-50% + 170px)) scale(1.8);
}
/* ── underbotan：メール入力欄だけサイズ変更 ───────── */
.under-form input[type="email"]{
  width:80%;                 /* 横幅を 80% に */
  height:78px;               /* 64px ×1.2 ≒ 78px（約 120%） */
  background:#fff;           /* 枠内を白で塗りつぶし */
  border:2px solid #015635;  /* 枠線は既存の緑を維持 */
}
/* ── underbotan：入力文字を 200% に拡大 ───────── */
.under-form input[type="email"]{
  font-size:26px;   
}
/* ── ファーストビュー：メール入力フォームを中央寄せ ─── */
/* ── ファーストビュー：メール入力フォーム 横 130% ─── */
.kv-form input[type="email"]{
  width:130%;                 /* 横幅を 130% に拡大 */
  height:64px;
  font-size:26px;
  background:#fff;
  border:2px solid #015635;
  border-radius:5px;
  padding:0 12px;

  /* 中央合わせ ― 幅が 100% を超えるので translate で 15% 左に戻す */
  position:relative;
  left:50%;
  transform:translateX(-49.5%);
  margin:15px 0 10px;         /* 上下だけ余白。左右は自動でなく 0 */
}

/* ▼ フッター全体 ▼ */
#footer { font-size: 16px; line-height: 1.8;}

/* ── リンクエリア ── */
.link-box{
  background: #e6d8af url("img/texture.jpg") repeat; /* テクスチャ画像を持っている場合 */
  /* 画像が無ければ ↓ の1行だけでもOK
     background:#e6d8af;
  */
  padding:40px 0;
}
.footer-nav{
  width:750px; max-width:90%;
  margin:0 auto; padding:0;
  list-style:none;
}
.footer-nav li{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 0;
  border-bottom:1px solid rgba(0,0,0,.3);
}
.footer-nav a{
  color:#4d3c26; /* こげ茶寄り文字色 */
  text-decoration:none; font-weight:600;
}
.footer-nav a:hover{opacity:.6;}
.arrow{font-size:24px;}

/* ── コピーライト帯 ── */
.copy-area{
  background:#61513a; color:#fff;
  text-align:center; padding:25px 10px;
}
.copy-area small{font-size:14px; letter-spacing:.5px;}

/* ── スマホ調整 ── */
@media(max-width:480px){
  .footer-nav li{padding:14px 0;}
  .arrow{font-size:20px;}
}
/* ▼ futter.jpg に文字をかぶせる ▼ */
/* ▼ ここを差し替え／追加してください ▼ */

.futter-wrap{
  position: relative;
  width: 100%;          /* まずは横いっぱいに広げる */
  max-width: 750px;     /* ただし 750px を上限にする */
  margin: 0 auto;       /* 750px 以上の大きな画面では中央寄せ */
}
.futter-wrap img{
  width: 100%;          /* 画像も親に合わせて広げる */
  display: block;       /* 行間の余白を防ぐ */
}


/* ── 文字＆リンクリスト ── */
.futter-menu{
  position: absolute;
  top: 40px;                 /* ★上からの距離──画像のラインに合わせて調整 */
  left: 50px;                /* ★左右の余白 */
  right: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  color: #4d3c26;            /* こげ茶色の文字 */
}

.futter-menu li{
  display: flex;
  justify-content: space-between;  /* 左テキストと右矢印を両端に配置 */
  align-items: center;
  height: 80px;              /* ★行の高さ──ライン中心に合わせて微調整 */
}

.futter-menu li + li{ border-top: 1px solid rgba(0,0,0,.5); } /* 画像の線をなぞる */

.futter-menu a{
  color: inherit;
  text-decoration: none;
}
.futter-menu a:hover{ opacity: .6; }

.futter-menu span{ font-size: 24px; }

/* ── スマホ用ちょい調整 ── */
@media (max-width: 750px){
  .futter-menu{ font-size: 18px; top: 30px; left: 25px; right: 25px; }
  .futter-menu li{ height: 70px; }
  .futter-menu span{ font-size: 20px; }
}
/* ── まず既存の線を消す ── */
.futter-menu li + li{
  border-top: none;        /* ← ここを none に */
}

/* ── 線を 2px 上で描き直す ── */
.futter-menu li{
  position: relative;      /* 疑似要素の起点にする */
}

.futter-menu li + li::before{
  content: "";
  position: absolute;
  top: -2px;               /* ★ これが“2px 上” の指定 */
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0,0,0,.5);
}
/* ── ここだけ書き換え ── */
.futter-menu{         /* メニュー文字 */
  font-size: 180%;    /* ← 1.5 倍 */
}

.futter-menu span{    /* 右端の「＞」 */
  font-size: 150%;    /* 文字より少し大きめに見せるならこのくらい */
}
/* ▼ 画像の下に余白を入れる ▼ */
.space-btm{
  margin-bottom: 30px;   /* ← 数字を変えれば広さも変わります */
  display: block;        /* 行間の変なスキマ防止のおまじない */
}