@charset "UTF-8";

/* ==========================================================================
   Web Invitation
   ========================================================================== */

:root{
  --accent:      #c18167;              /* 見出し・日付のテラコッタ */
  --accent-soft: #b7977b;              /* ボタン等 */
  --text:        #464646;
  --tint:        rgba(234,213,211,.06);/* タイトル面のごく薄い桜色 */
  --line:        rgba(193,129,103,.35);

  --wrap: 800px;
  --en: "Cormorant Garamond","EB Garamond",Times,serif;
  --jp: "Shippori Mincho","Noto Serif JP",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;

  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

.u-visuallyHidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:#f6f3f1;
  color:var(--text);
  font-family:var(--jp);
  font-size:16px;
  line-height:1.6;
  letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; image-orientation:from-image; }

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  background:#fff;
  overflow-x:clip;
}

.sec{ position:relative; }


/* --------------------------------------------------------------------------
   スクロール連動フェード（AOS の fade-up 相当 / 1500ms ease-in-out）
   -------------------------------------------------------------------------- */
/* 「隠す」指定は .js が付いている時だけ。
   JS が動かない環境では最初から完成形が見えるようにする。 */
.js [data-anim]{
  opacity:0;
  transform:translate3d(0,100px,0);
}
[data-anim]{
  transition:opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
  will-change:opacity,transform;
}
[data-anim].is-in{ opacity:1; transform:translate3d(0,0,0); }


/* --------------------------------------------------------------------------
   1. TITLE
   -------------------------------------------------------------------------- */
/* 地色 rgba(234,213,211,.6) → 0（2s / delay 3s）＝実測値 */
.sec--title{
  position:relative;
  padding:250px 0 0;
  text-align:center;
  overflow:hidden;
  /* easing は ease。getTiming().easing は "linear" と返るが、CSS の
     animation-timing-function はキーフレーム側（getKeyframes()[0].easing）に入る。
     ここを linear にすると補間カーブが参考サイトと変わるので注意。 */
  animation:fadeOutBg 2s ease 3s forwards;
}
@keyframes fadeOutBg{
  from{ background-color:rgba(234,213,211,.6); }
  to  { background-color:rgba(234,213,211,0);  }
}

/* 見出し ── 画面下の方(y=456)から 400px せり上がり、y=56 で止まって残る。
   参考サイトは top:456px から translate 0 → -400px だが、それだと
   アニメーションが走らなかった時に 456px の位置に取り残される。
   ここでは「止まる位置」をレイアウト位置(top:56px)にして、
   translate 400px → 0 と逆向きに書いている。動き・最終位置とも同一。 */
.intro{
  /* せり上がりの開始位置。デスクトップは参考サイト実測の 400px。
     スマホは画面中央から始めたいのでメディアクエリで上書きする。 */
  --intro-start:400px;

  position:absolute;
  top:56px; left:0; right:0;
  margin:0;
  font-weight:400;   /* h1 の既定 bold を打ち消す（子側でも明示している） */
  display:flex;
  justify-content:center;
  z-index:3;
  animation:slideUp 2s ease 3s forwards;
}
/* 演出の開始状態は .js のときだけ */
.js .sec--title{ background-color:rgba(234,213,211,.6); }
.js .intro     { translate:0 var(--intro-start); }
.js .intro__pen{ stroke-dashoffset:1.1; }
.js .hero,
.js .title__name,
.js .title__date{ opacity:0; }
@keyframes slideUp{
  from{ translate:0 var(--intro-start); }
  to  { translate:0 0;                  }
}

.intro__svg{
  width:min(445px,72%);
  height:auto;
  overflow:visible;
}

.intro__main,
.intro__sub{
  fill:var(--accent);
  text-anchor:middle;
}
/* viewBox 内の寸法は参考サイトの「字面（ink）」実測に合わせてある。
   Invitation     = 幅390 × 高42   @ (3, 3)
   Please join us = 幅210.2 × 高62.3 @ (92.9, 63.8)
   ※SVG text の getBBox() は em ボックスを返すので、合わせ込みは
     canvas の actualBoundingBox 実測で行うこと（getBBox で合わせると外れる） */
.intro__main{
  font-family:var(--en);
  /* 参考サイトはスモールキャップス組み（1文字目だけフルサイズの大文字、
     残りは小さい大文字）。小文字混じりで組むと字形がまるごと変わる。 */
  font-variant-caps:small-caps;
  /* .intro は h1。ウェイトを明示しないと UA 既定の bold(700) が
     SVG text まで継承されて太くなる。参考サイトの線の細さには 300 が最も近い。 */
  font-weight:300;
  font-size:65.63px;
  letter-spacing:12.19px;
}
/* 筆記体の選定注意：
   デスクトップで Lottie の <g> から測った字面高(62.3)は過大だった。
   実機スクリーンショットの画素解析では 47 相当で、この比率だと
   Parisienne が最も近い（Tangerine は +29% 背が高すぎる）。 */
.intro__sub{
  font-family:"Parisienne",cursive;
  font-weight:400;
  font-size:39px;     /* 字面幅・高さの両方が実測値に最も近くなるサイズ */
}

/* ペン先＝太いストロークを伸ばして文字を露出させる（Lottie の write-on 相当） */
.intro__pen{
  fill:none;
  stroke:#fff;
  stroke-linecap:round;
  /* dasharray を「1」にしてはいけない：線1・間隔1の"繰り返し"になり、
     次の線の開始がパス終端に重なって丸キャップが後ろへはみ出し、
     開始前から末尾の文字（us / n）が見えてしまう。
     間隔を 2 にして周期をパス長より長くし、開始オフセットも
     キャップ半径ぶん余分に 1.1 逃がしておく。 */
  stroke-dasharray:1 2;
}
/* 太さは「パスの振れ幅」も足して決めること。
   パスが上に振れた箇所で下端が覆えないと、I や O の足が切れる。 */
.intro__pen--main{
  stroke-width:60;   /* 字面 y3.3〜45.3（振れ y20〜28）を全域で覆う */
  animation:writeOn 1.5s ease-in-out .25s forwards;
}
.intro__pen--sub{
  stroke-width:80;   /* 字面 y63.5〜121.5（振れ y90〜98）を全域で覆う */
  animation:writeOn 1.2s ease-in-out 1.5s forwards;
}
@keyframes writeOn{ to{ stroke-dashoffset:0; } }

/* メイン写真 opacity 0→1（3s / delay 4s）＝実測値 */
.hero{
  margin:0;
  animation:fadeIn 3s ease 4s forwards;
}
.hero img{ width:100%; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.title__name{
  margin:64px 0 0;
  padding-inline:10px;
  font-family:var(--en);
  font-weight:400;
  font-size:48px;
  line-height:1.6;
  letter-spacing:.06em;
  color:var(--accent);
  animation:fadeIn 2.5s ease 4s forwards;    /* 実測値 */
}
.title__date{
  /* 128px＝いちばん高い草花(-41%)が日付の下端に触れる参考サイトと同じ余白 */
  margin:0 0 128px;
  padding-inline:10px;
  font-family:var(--en);
  font-weight:400;
  font-size:32px;
  line-height:1.6;
  letter-spacing:.14em;
  color:var(--accent);
  animation:fadeIn 2.5s ease 4.5s forwards;  /* 実測値 */
}

/* 草花の重ね ──
   5本の草花を奥（負のtopで上に飛び出す）、plants_front を手前に置いて奥行きを出す。
   数値は 800px コンテナ基準の実測値を % 化してあるので幅に追従する。 */
.plants{
  position:relative;
}
/* 素材の下端は不透明のまま断ち切れているので、白へのグラデーションで馴染ませる。
   plants_front（z-index:1）より上に重ねる。 */
.plants::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:38%;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 78%);
  pointer-events:none;
  z-index:2;
}
.plants__front{ position:relative; z-index:1; }   /* DOM順＋z-indexで最前面 */
.plants__front img{ width:100%; }

.plants__sprig{
  position:absolute;
  /* イージングはキーフレーム側が持つのでここは linear（参考サイトと同じ） */
  animation:wave 4s linear infinite alternate;
}
.plants__sprig img{ width:100%; }

/* left / top / width = 実測値 ÷ 800（topは wrap高さ300基準） */
.plants__sprig--01{ left:2.5%; top:-14.33%; width:22.75%;  transform-origin:100% 100%; animation-delay:0s;    }
.plants__sprig--02{ left:22%;  top:-22%;    width:12.625%; transform-origin:50% 100%;  animation-delay:.25s; }
.plants__sprig--03{ left:35%;  top:-38.67%; width:12.375%; transform-origin:50% 100%;  animation-delay:.5s;  }
.plants__sprig--04{ left:60%;  top:-41%;    width:17.25%;  transform-origin:0 100%;    animation-delay:.75s; }
.plants__sprig--05{ left:65%;  top:-19.33%; width:29.5%;   transform-origin:0 100%;    animation-delay:1s;   }

/* 実測値：0deg → -5deg → 5deg / 4s / alternate / 各キーフレーム ease-in-out */
@keyframes wave{
  0%  { rotate:0deg;  animation-timing-function:ease-in-out; }
  50% { rotate:-5deg; animation-timing-function:ease-in-out; }
  100%{ rotate:5deg;  animation-timing-function:ease-in-out; }
}


/* --------------------------------------------------------------------------
   2. 招待文
   -------------------------------------------------------------------------- */
.sec--invtxt{
  padding:96px 20px 110px;
  text-align:center;
  line-height:2.4;
}
.invtxt__lead{ margin:0 0 2.4em; }
.invtxt__body{ margin:0 0 3.2em; }
.invtxt__sign{ margin:0 0 3.2em; }
.invtxt__names{ margin:0; line-height:2.6; }


/* --------------------------------------------------------------------------
   3. COUNT DOWN
   -------------------------------------------------------------------------- */
.sec--countdown{
  position:relative;
  min-height:534px;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff;
  text-align:center;
}
.countdown__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 68%;   /* ふたりが写る高さに合わせる */
}
.countdown__veil{
  position:absolute; inset:0;
  background:rgba(0,0,0,.35);
}
.countdown__inner{
  position:relative;
  padding:70px 20px;
  width:100%;
}

.countdown__ttl{
  margin:0 0 34px;
  font-family:var(--en);
  font-weight:400;
  font-size:26px;
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
}

.sec--countdown .num{
  display:block;
  font-family:var(--en);
  font-weight:300;
  font-size:62px;
  line-height:1.05;
  letter-spacing:.02em;
  font-variant-numeric:lining-nums;
}
.sec--countdown .num--lg{ font-size:92px; }

.sec--countdown .lbl{
  display:block;
  margin-top:6px;
  font-family:var(--en);
  font-size:15px;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
}

.countdown__days{ margin-bottom:26px; }
.countdown__days .lbl{ font-size:19px; }

.countdown__hms{
  display:flex;
  justify-content:center;
  gap:clamp(18px,7vw,54px);
}
.countdown__hms .unit{ min-width:3.4em; }


/* --------------------------------------------------------------------------
   4. INFORMATION / 見出し共通
   -------------------------------------------------------------------------- */
.sec__ttl{ margin:0 0 46px; text-align:center; }
/* 参考サイト実測：デスクトップ 456px（800幅）／スマホ 202.5px（434.5幅） */
.sec__ttl img{ margin-inline:auto; width:min(456px,62%); }

.sec--info{ padding:96px 20px 100px; }

.info__list{
  display:grid;
  grid-template-columns:5.5em 1fr;
  gap:22px 44px;
  max-width:460px;
  margin:0 auto;
}
.info__list dt{
  margin:0;
  text-align:justify;
  text-align-last:justify; /* 「日　時」の均等割付 */
}
.info__list dd{ margin:0; }

.info__note{
  max-width:460px;
  margin:34px auto 0;
  font-size:13px;
  line-height:2;
  color:#6d6d6d;
}


/* --------------------------------------------------------------------------
   5. PROFILE
   -------------------------------------------------------------------------- */
.sec--profile{ padding:70px 20px 90px; }

/* 写真＋（名前・肩書）＋紹介文 の3要素。紹介文を独立させてあるので、
   スマホでは紹介文だけ全幅に回して写真と名前の横並びを保てる。 */
.prof{
  position:relative;
  display:grid;
  grid-template-columns:350px 1fr;
  grid-template-areas:
    "img txt"
    "img desc";
  align-content:center;
  column-gap:44px;
  max-width:750px;
  margin:0 auto 84px;
}
.prof--rev{
  grid-template-columns:1fr 350px;
  grid-template-areas:
    "txt img"
    "desc img";
}
.prof__imgwrap{ grid-area:img; align-self:center; }
.prof__txt    { grid-area:txt; align-self:end;    }
.prof__desc   { grid-area:desc; align-self:start; margin-top:24px; }

/* プロフィールごとの小さな草花（参考サイトは 105×47・行ごとに左右反転） */
.prof__deco{
  position:absolute;
  bottom:-14px;
  right:-6px;
  width:105px;
  z-index:2;
  pointer-events:none;
}
.prof--rev .prof__deco{
  right:auto;
  left:-6px;
  transform:scaleX(-1);
}
.prof__deco img{ width:100%; }
.prof:last-child{ margin-bottom:0; }
.prof--rev{ flex-direction:row-reverse; }

.prof__imgwrap{
  flex:none;
  width:350px; height:350px;
  overflow:hidden;
}
.prof__imgwrap img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.prof:hover .prof__imgwrap img{ transform:scale(1.04); }

.prof__txt{ min-width:0; }

.prof__name{
  margin:0;
  font-family:var(--en);
  font-weight:400;
  font-size:42px;
  line-height:1.2;
  letter-spacing:.04em;
}
.prof__role{
  margin:6px 0 24px;
  font-family:var(--en);
  font-size:15px;
  letter-spacing:.24em;
  text-indent:.24em;
  text-transform:uppercase;
  color:var(--accent);
}
.prof__desc{
  margin:0;
  font-size:13.5px;
  line-height:2.2;
  letter-spacing:0;
}

/* 長い名前（Okinawa & Mo など）は列幅に収まるよう少し小さく */
.prof__name--long{ font-size:32px; }

/* 写真ごとの見せたい位置（人物が中央に来ない写真の調整用） */
.pos-bride { object-position:26% 46%; }
.pos-family{ object-position:50% 46%; }


/* --------------------------------------------------------------------------
   6. 結び
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   地図
   -------------------------------------------------------------------------- */
/* 参考サイトの実測：コンテナ全幅 × 高さ450px 固定（画面幅に関わらず同じ）。
   「マップで開く」は埋め込み側が左上に出すので、別途リンクは置かない。 */
.map{ margin:0; }
.map iframe{
  display:block;
  width:100%;
  height:450px;
  border:0;
}


.sec--toreply{
  padding:100px 20px 0;
  text-align:center;
  line-height:2.4;
}
.toreply__txt{ margin:0; }

.sec--replybtn{
  padding:56px 20px 120px;
  text-align:center;
}
.replybtn{
  display:inline-block;
  min-width:min(420px,100%);
  padding:26px 40px;
  border:1px solid var(--line);
  font-family:var(--jp);
  font-size:22px;
  line-height:1.3;
  letter-spacing:.14em;
  text-indent:.14em;
  text-decoration:none;
  color:var(--accent-soft);
  background:#fff;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .18s var(--ease);
}
.replybtn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.replybtn:active{ transform:scale(.985); }


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  .prof__deco{ width:78px; bottom:auto; top:-10px; right:4px; }
  .prof--rev .prof__deco{ left:4px; }

  /* ファーストビューを1画面に収める。数値は参考サイトの実機
     スクリーンショット（869×1884 / DPR2）を画素解析した実測に合わせてある。
     基準：画面幅434.5cssで 上余白146.5 / 写真290 / 名前字面21 / 日付字面14.5 /
           草花193.5 → 合計749.5。
     px 固定にすると別の画面幅でズレる（390で合わせたら435で14px上にずれた）。
     参考サイトは画面幅に比例するので vw で持たせること。 */
  .sec--title{ padding-top:33.7vw; }   /* 146.5 / 434.5 */
  .intro{
    top:11.6vw;                        /*  50.5 / 434.5 */
    /* 開始位置を画面の縦中央に。
       50vh が画面中央、-50% で見出し自身の高さの半分ぶん戻し、
       -11.6vw で top の分を差し引くと、見出しの中心が画面中央に来る。 */
    --intro-start:calc(50vh - 50% - 11.6vw);
  }
  .intro__svg{ width:60%; }            /* 参考サイトは画面幅の59% */

  /* 字面で合わせること。名前は参考が「アセンダのみ21」（ディセンダ無しの綴り）
     なのに対し、こちらは Hiyori の y があるので総字面では比較できない。 */
  .title__name{ margin-top:5.5vw; font-size:7.3vw; }
  .title__date{ margin-top:-1.5vw; font-size:3.3vw; margin-bottom:11.6vw; }

  /* 草花の突き出しを desktop の約半分に。
     41%のまま縮小すると日付に重なり、下端が画面外に押し出される。 */
  .plants__sprig--01{ top:-7%;  width:19%;   }
  .plants__sprig--02{ top:-11%; width:11%;   }
  .plants__sprig--03{ top:-19%; width:10.5%; }
  .plants__sprig--04{ top:-21%; width:14.5%; }
  .plants__sprig--05{ top:-10%; width:25%;   }

  .sec--invtxt{ padding:70px 18px 80px; font-size:14px; line-height:2.3; }

  .sec--countdown{ min-height:0; }
  .countdown__inner{ padding:60px 16px; }
  .countdown__ttl{ font-size:21px; margin-bottom:26px; }
  .sec--countdown .num{ font-size:42px; }
  .sec--countdown .num--lg{ font-size:66px; }
  .sec--countdown .lbl{ font-size:12px; }
  .countdown__days .lbl{ font-size:15px; }
  .countdown__hms{ gap:0; }
  .countdown__hms .unit{ flex:1; min-width:0; }

  /* 参考サイト実測（434.5幅）：見出し202.5 / 本文の字面高12〜12.5 / 左余白100。
     こちらは住所や日程の文字数が多いので、左右余白は参考ほど広く取れない。
     max-width で中央に寄せて、可能な範囲で余白を確保している。 */
  .sec--info{ padding:70px 18px 76px; }
  .sec__ttl img{ width:min(204px,62%); }
  .info__list{
    grid-template-columns:4.6em 1fr;
    gap:14px 16px;
    font-size:12.3px;
    max-width:300px;
  }
  .info__note{ font-size:11.5px; max-width:300px; }

  .sec--profile{ padding:56px 18px 70px; }

  /* 参考サイトはスマホでも写真と名前を横並びのまま保ち、
     紹介文だけを下に全幅で回している。縦積みにすると別物になるので合わせる。
     .prof__txt を display:contents にして、その中身を直接グリッドに載せている。 */
  /* 参考サイトはスマホでも写真と名前を横並びのまま保ち、
     紹介文だけを下に全幅で回している。縦積みにすると別物になるので合わせる。 */
  .prof{
    grid-template-columns:48% 1fr;
    grid-template-areas:
      "img txt"
      "desc desc";
    column-gap:16px;
    margin-bottom:56px;
    text-align:center;
  }
  .prof--rev{
    grid-template-columns:1fr 48%;
    grid-template-areas:
      "txt img"
      "desc desc";
  }
  .prof__imgwrap{
    width:100%; height:auto;
    aspect-ratio:1/1;
  }
  .prof__txt { align-self:center; }
  .prof__name{ font-size:30px; }
  .prof__name--long{ font-size:24px; }
  .prof__role{ margin:6px 0 0; }
  .prof__desc{
    margin-top:22px;
    font-size:13px;
    line-height:2.1;
  }

  .sec--toreply{ padding-top:74px; font-size:14px; }
  .sec--replybtn{ padding:40px 18px 90px; }
  .replybtn{ min-width:0; width:100%; padding:20px 16px; font-size:17px; }
}


/* ==========================================================================
   ご出欠フォーム（reply.html）
   ========================================================================== */

.wrap--reply{ padding-bottom:0; }

.rhead{ text-align:center; }

/* 上から垂れる草花＋見出しの一枚絵。コンテナ幅(800px)と同寸なので全幅で置く */
.rhead__banner{
  margin:0;
  font-size:0;      /* h1 の行間で下に隙間が出ないように */
  line-height:0;
}
.rhead__banner img{ width:100%; }

.rhead__ja{
  margin:8px 0 0;
  font-size:17px;
  letter-spacing:.18em;
  text-indent:.18em;
}
.rhead__note{
  margin:26px 0 0;
  font-size:14px;
  line-height:2.2;
}

.rform{ padding:70px 20px 0; }

.fld{
  max-width:560px;
  margin:0 auto 46px;
}
.fld__ttl{
  margin:0 0 14px;
  font-size:16px;
  letter-spacing:.1em;
}
.req{
  display:inline-block;
  margin-left:12px;
  padding:3px 9px;
  border-radius:2px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  letter-spacing:.08em;
  vertical-align:2px;
}
.fld__help{
  margin:-4px 0 14px;
  font-size:13px;
  line-height:1.9;
  color:#7d7d7d;
}
.fld__err{
  margin:8px 0 0;
  font-size:13px;
  color:#b4553f;
  min-height:0;
}
.fld__err:empty{ display:none; }

/* 入力欄 */
.rform input[type=text],
.rform input[type=tel],
.rform input[type=email],
.rform select,
.rform textarea{
  display:block;
  width:100%;
  padding:15px 14px;
  margin-bottom:12px;
  border:1px solid rgba(193,129,103,.3);
  border-radius:4px;
  background:rgba(255,255,255,.6);
  font-family:var(--jp);
  font-size:16px;      /* 16px 未満だと iOS でズームするので下げないこと */
  line-height:1.5;
  color:var(--text);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
  -webkit-appearance:none;
  appearance:none;
}
.rform textarea{ resize:vertical; min-height:110px; }
.rform select{
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:44px;
}
.rform input:focus,
.rform select:focus,
.rform textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:#fff;
}
.rform ::placeholder{ color:#b3aca8; }

.row2{ display:flex; gap:12px; }
.row2 > *{ flex:1; min-width:0; }

.zip{ display:flex; align-items:center; gap:10px; }
.zip__mark{ color:var(--accent); font-size:18px; }
.zip input{ margin-bottom:0; }

/* 選択肢 */
.choice{ display:flex; gap:12px; }
.choice__item{ flex:1; cursor:pointer; }
.choice__item input{
  position:absolute;
  width:1px; height:1px;
  opacity:0;
}
.choice__box{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:10px 12px;
  border:1px solid rgba(193,129,103,.3);
  border-radius:4px;
  background:rgba(255,255,255,.6);
  font-size:15px;
  letter-spacing:.06em;
  text-align:center;
  transition:background-color .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease), transform .15s var(--ease);
}
.choice__item:hover .choice__box{ border-color:var(--accent); }
.choice__item input:focus-visible + .choice__box{ outline:2px solid var(--accent); outline-offset:2px; }
.choice__item input:checked + .choice__box{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.choice__box:active{ transform:scale(.985); }

.addBtn{
  display:block;
  width:100%;
  padding:14px;
  border:1px dashed rgba(193,129,103,.45);
  border-radius:4px;
  background:none;
  font-family:var(--jp);
  font-size:14px;
  letter-spacing:.08em;
  color:var(--accent);
  cursor:pointer;
  transition:background-color .25s var(--ease);
}
.addBtn:hover{ background:rgba(193,129,103,.06); }

.rform__err{
  max-width:560px;
  margin:0 auto 24px;
  padding:14px 16px;
  border:1px solid rgba(180,85,63,.4);
  border-radius:4px;
  font-size:13px;
  line-height:1.9;
  color:#b4553f;
}

.rform__submit{ padding:14px 0 110px; text-align:center; }
.rform__submit .replybtn{ cursor:pointer; font-family:var(--jp); }
.rform__submit .replybtn:disabled{ opacity:.5; cursor:default; }

/* 送信完了 */
.done{
  padding:120px 20px 130px;
  text-align:center;
}
.done__en{
  margin:0;
  font-family:var(--en);
  font-variant-caps:small-caps;
  font-weight:300;
  font-size:48px;
  letter-spacing:.16em;
  text-indent:.16em;
  color:var(--accent);
}
.done__ja{ margin:26px 0 0; font-size:15px; line-height:2.4; }
.done__deco{ padding:34px 0 0; }
.done__deco img{ width:120px; margin-inline:auto; }
.done__back{ margin:40px 0 0; font-size:14px; }
.done__back a{ color:var(--accent); }

.plants--reply{ margin-top:20px; }

@media (max-width:700px){
  .rhead{ padding-top:64px; }
  .rhead__en{ font-size:38px; }
  .rhead__ja{ font-size:15px; }
  .rhead__note{ font-size:13px; }
  .rform{ padding-top:52px; }
  .fld{ margin-bottom:38px; }
  .row2{ flex-direction:column; gap:0; }
  .choice{ flex-direction:column; gap:10px; }
  .done{ padding:80px 18px 90px; }
  .done__en{ font-size:36px; }
}


/* --------------------------------------------------------------------------
   イントロの開始待ち
   フォントと写真が揃うまで一時停止する。固定ディレイのまま走らせると、
   読込が遅れた時に「表示された頃には演出が終わっている」状態になるため。
   `animation` ショートハンドが play-state を running に戻してしまうので、
   ショートハンドより後・かつ高い詳細度（body:not(...) 付き）で指定すること。
   -------------------------------------------------------------------------- */
body:not(.is-ready) .sec--title,
body:not(.is-ready) .intro,
body:not(.is-ready) .intro__pen,
body:not(.is-ready) .hero,
body:not(.is-ready) .title__name,
body:not(.is-ready) .title__date{ animation-play-state:paused; }


/* --------------------------------------------------------------------------
   モーション低減
   -------------------------------------------------------------------------- */
/* ▼ 現在この節は無効。
   端末の設定に関わらず通常と同じ演出にする方針のため、index.html 側で
   .reduced を付けないようにしてある（該当箇所をコメントアウト済み）。
   OSの設定を尊重する挙動に戻したくなった時のために残してある。

   「視差効果を減らす」設定時（html.reduced）。
   演出を全部止めると何も出てこないので、次の方針で作り分ける。
     残す : 不透明度の変化（画面が動かないので酔いにくい）
     外す : 400px の移動・スクロール連動の 100px 移動・草花の無限ループの揺れ

   判定は index.html のインラインスクリプトで html に .reduced を付ける方式。
   @media 側で上書きしようとすると .js 付きセレクタとの優先順位で嵌るため、
   クラスを重ねて詳細度を上げている（.js.reduced は .js より強い）。 */

/* 見出し：400px せり上がる代わりに、その場でフェード */
.js.reduced .intro{
  translate:0 0;
  opacity:0;
  animation:fadeIn 1.4s ease 2.2s forwards;
}
/* 手書き風の掃き出しはやめ、文字は最初から出しておく（上のフェードで現れる） */
.js.reduced .intro__pen{
  stroke-dashoffset:0;
  animation:none;
}
/* 草花の揺れ（無限ループ）は止める */
.js.reduced .plants__sprig{
  animation:none;
  rotate:0deg;
}
/* スクロール連動は移動をやめ、フェードだけ残す */
.js.reduced [data-anim]{
  transform:none;
}
.js.reduced [data-anim].is-in{
  transform:none;
}