/* =========================
   0) 共通（スマホ基準 / mobile-first）
========================= */
:root{
  --text: #454545;
  --pink: #F83A86;   /* ENTER */
  --purple: #6A6AF5; /* LEAVE */
  --line: #06C755;   /* LINE */
  --accent: #D83C77; /* 見出しピンク */
  --radius-btn: 20px;
}

body{
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
}

.wrapper{
  max-width: 390px;
  margin: 0 auto;
  background: #fff;
}

/* =========================
   1) セクション共通
========================= */
.section{
  padding: 24px 16px;
}

.section-gate{
  padding-top: 24px;     /* メイン画像との距離 */
  padding-bottom: 24px;  /* LINE → ENTER の距離 */
}

.site-header{
  padding: 16px 16px 8px;
}

.site-tag{
  font-size: 12px;
  margin: 0;
  color: var(--text);
}

/* =========================
   2) ヒーロー
========================= */
.hero{
  margin: 0;
  padding: 0;
}

.hero img{
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   3) ボタン共通（LINE用）
========================= */
.btn{
  display: block;
  width: 100%;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius-btn);
}

/* LINEボタン（スマホ：全幅 / 高さ63くらい） */
.btn-line{
  background: var(--line);
  color: #fff;
  font-weight: 800; /* ← 文字太く */
  font-size: 18px;

  height: 63px;          /* Figma基準 */
  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-line:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  filter: brightness(0.98);
}

.btn-line:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* スマホではヘッダーのLINEボタンは非表示（下の.section-gateを使う） */
.btn-line--header{
  display: none;
}

/* =========================
   4) ENTER / LEAVE
========================= */
.section-age{
  padding-top: 0;
  padding-bottom: 0;
}

/* ENTER / LEAVEの共通 */
.btn-enter,
.btn-leave{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin: 0 auto;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  border-radius: var(--radius-btn);

  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

/* Figma比率（390幅想定）
   ENTER: 259x104
   LEAVE: 239x96
   ※ 275pxみたいな極小幅でもはみ出さないように min() と clamp() で可変にしてる
*/
.btn-enter{
  width: min(259px, 100%);
  height: clamp(88px, 30vw, 104px);
  background: var(--pink);
  margin-bottom: 16px;
}

.btn-leave{
  width: min(239px, 100%);
  height: clamp(78px, 28vw, 96px);
  background: var(--purple);
}

.btn-enter:hover,
.btn-leave:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.btn-enter:active,
.btn-leave:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.btn-main{
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
}

.btn-sub{
  font-size: 14px;
  margin-top: 4px;
  line-height: 1.2;
}

/* =========================
   5) R18
========================= */
.section-r18{
  text-align: center;
}

.r18-logo{
  width: 88px;
  margin: 0 auto 12px;
}

.r18-text{
  font-size: 13px;
  color: #555;
}

/* =========================
   6) ACCESS
========================= */
.section-title{
  text-align: center;
}

/* 「ACCESS」「アクセス」の間が空きすぎ対策 */
.section-access .section-title{
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.15;
}

.section-access .section-title span{
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px; /* ←詰める */
  color: var(--accent);
}

.access-list div{
  margin-bottom: 12px;
}

.access-list dt{
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}

.access-list dd{
  margin-left: 0;
  padding: 0 4px;
}

.access-list dd a{
  color: var(--text);
  text-decoration: none;
}

/* 電話・メールは改行できるように */
.tel-link,
.mail-link{
  text-decoration: none;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tel-link:hover,
.mail-link:hover{
  color: var(--accent);
}

/* =========================
   7) 説明文
========================= */
.lead-name{
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.section-description p{
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 14px;
}

/* =========================
   8) フッター
========================= */
.footer{
  text-align: center;
  padding: 16px;
  font-size: 12px;
  letter-spacing: -0.02em;
  color: #777;
}

/* =========================
   9) スマホ極小幅 微調整（275px想定：左右余白20px）
========================= */
@media (max-width: 767px){
  .section{
    padding-left: 20px;
    padding-right: 20px;
  }
  .site-header{
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 275pxでボタン文字が窮屈なら少しだけ調整 */
  .btn-main{ font-size: 28px; }
  .btn-sub{ font-size: 13px; }
}

/* =========================
   10) PC版レイアウト
========================= */
@media (min-width: 768px){

  .wrapper{
    max-width: 1100px;
    padding: 0 24px;
  }

  .site-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 0 12px;
  }

  .site-tag{
    font-size: 14px;
  }

  /* PCはヘッダーLINEを表示 */
  .btn-line--header{
    display: inline-flex;
    width: 260px;
    height: 48px;
    font-size: 14px;
    border-radius: 12px;
    margin: 0;
    align-items: center;
    justify-content: center;
  }

  /* スマホ用LINEはPCで消す */
  .section-gate{
    display: none;
  }

  .hero{
    margin: 0 auto 32px;
  }

  .hero img{
    max-width: 760px;
    margin: 0 auto;
  }

  .section-age{
    display: flex;
    justify-content: center;
    gap: 48px;
    align-items: flex-end;
  }

  .btn-enter,
  .btn-leave{
    margin: 0;
  }

  .section-access,
  .section-description{
    max-width: 800px;
    margin: 0 auto;
  }

  .section-description p{
    font-size: 15px;
    line-height: 1.8;
  }
}

/* 画面には出さないが、構造上は存在する見出し */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}