/* LANA。暗い紙に、灯りが一つだけ点いている感じにする。
   数字も、進捗も、飾りも出さない。文章だけが見えていればよい。 */

:root{
  --ink:#0e0d13;
  --ink-2:#15131c;
  --paper:#e9e3d8;
  --paper-dim:#a89f93;
  --paper-faint:#6b6459;
  --gold:#c2a15f;
  --line:rgba(233,227,216,.14);
  --serif:"Zen Old Mincho",'Hiragino Mincho ProN','Yu Mincho',serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #221d2e 0%, transparent 60%),
    var(--ink);
  color:var(--paper);
  font-family:var(--serif);
  line-height:1.9;
  letter-spacing:.045em;
  font-feature-settings:"palt";
}

main{max-width:33rem;margin:0 auto;padding:4.5rem 1.5rem 2rem}

/* ---- 場面の切り替え -------------------------------------------------- */
.stage{display:none}
.stage.is-on{display:block;animation:rise .9s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- 入口 ------------------------------------------------------------- */
.sign{
  font-size:.8rem;letter-spacing:.55em;color:var(--gold);
  margin:0 0 2.5rem;text-indent:.55em;
}
h1{
  font-size:1.85rem;font-weight:500;line-height:1.75;
  margin:0 0 1.75rem;
}
.lede{color:var(--paper-dim);margin:0 0 3rem;font-size:.95rem}

.say p{margin:0 0 1.4rem;font-size:.95rem;color:var(--paper-dim)}
.say p:first-child{color:var(--paper)}

/* ---- ボタン ----------------------------------------------------------- */
.go{
  display:block;width:100%;margin:3rem 0 0;padding:1.05rem 1rem;
  background:transparent;color:var(--gold);
  border:1px solid var(--gold);border-radius:2px;
  font-family:var(--serif);font-size:1rem;letter-spacing:.3em;text-indent:.3em;
  cursor:pointer;transition:background .5s ease,color .5s ease;
}
.go:hover{background:var(--gold);color:var(--ink)}
.go[disabled]{opacity:.35;cursor:default}
.go[disabled]:hover{background:transparent;color:var(--gold)}

/* ---- うかがう --------------------------------------------------------- */
h2{font-size:1.3rem;font-weight:500;margin:0 0 .75rem}
.note{color:var(--paper-dim);font-size:.85rem;margin:0 0 3rem}

.field{margin:0 0 2.4rem}
label,.label{display:block;font-size:.85rem;color:var(--paper-dim);margin:0 0 .7rem}
input[type=text],input[type=email]{
  width:100%;padding:.65rem .2rem;
  background:transparent;color:var(--paper);
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  font-family:var(--serif);font-size:1.05rem;letter-spacing:.04em;
}
input::placeholder{color:var(--paper-faint);opacity:1}
input:focus{outline:0;border-bottom-color:var(--gold)}
.hint{font-size:.75rem;color:var(--paper-faint);margin:.6rem 0 0}

.row{display:flex;gap:1.4rem}
.row .field{flex:1}

.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pills button{
  padding:.5rem .95rem;
  background:transparent;color:var(--paper-dim);
  border:1px solid var(--line);border-radius:999px;
  font-family:var(--serif);font-size:.85rem;letter-spacing:.05em;cursor:pointer;
  transition:all .35s ease;
}
.pills button:hover{border-color:var(--paper-faint);color:var(--paper)}
.pills button.on{border-color:var(--gold);color:var(--gold)}

/* 追加の項目への入口。押されなくてよいので、静かに置いておく */
.more{
  display:block;width:100%;margin:1.75rem 0 0;padding:.9rem 0;
  background:transparent;border:0;
  color:var(--paper-faint);font-family:var(--serif);font-size:.85rem;
  letter-spacing:.12em;cursor:pointer;transition:color .4s ease;
}
.more:hover{color:var(--paper-dim)}
.more::after{content:"　＋"}

.extra{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--line);
  animation:rise .7s ease both}
.extra .note{margin-bottom:2.4rem}
.extra .go{margin-top:2.5rem}

.side{
  border:0;border-top:1px solid var(--line);
  margin:0 0 1rem;padding:2.25rem 0 .5rem;
}
.side:first-of-type{border-top:0;padding-top:0}
.side legend{
  padding:0;margin:0 0 2rem;
  font-size:.95rem;color:var(--gold);letter-spacing:.14em;
}
.req{color:var(--gold);margin-left:.35em;font-size:.75em;vertical-align:.15em}

.ymd{display:flex;align-items:baseline;gap:.45rem}
.ymd input{
  width:4.2rem;text-align:center;padding:.6rem .2rem;
  background:transparent;color:var(--paper);
  border:0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:1rem;
}
.ymd input:first-child{width:5.4rem}
.ymd input:focus{outline:0;border-bottom-color:var(--gold)}
.ymd span{font-size:.8rem;color:var(--paper-faint)}

.divider{
  margin:3.5rem 0 2.5rem;font-size:.8rem;color:var(--paper-faint);
  text-align:center;position:relative;
}
.divider::before,.divider::after{
  content:"";position:absolute;top:50%;width:15%;height:1px;background:var(--line);
}
.divider::before{left:0}.divider::after{right:0}

.say-inline{
  min-height:1.5rem;margin:2.5rem 0 0;font-size:.85rem;color:var(--gold);
  opacity:0;transition:opacity .5s ease;
}
.say-inline.on{opacity:1}

/* ---- 鑑定 ------------------------------------------------------------- */
.them{
  font-size:1.15rem;color:var(--paper);margin:0 0 3rem;
  padding-bottom:1.5rem;border-bottom:1px solid var(--line);
  opacity:0;transition:opacity 1.2s ease;
}
.them.on{opacity:1}

.body{min-height:3rem}
/* 段落の見出し。何について話しているのかを先に出す。
   四つの段落が地続きに見えると、何を言われているのか分からなくなる。 */
.body .sec{
  margin:0 0 .9rem;
  font-size:.72rem;letter-spacing:.34em;text-indent:.34em;
  color:var(--gold);
}
.body .sec + p{margin-top:0}
.body p + .sec{margin-top:2.9rem}

.body p{
  margin:0 0 2.1rem;font-size:1.02rem;line-height:2.25;
  color:var(--paper);
}
/* 書いている手の位置。点滅させず、静かに息をさせる */
.pen{
  display:inline-block;width:.42em;height:1.05em;margin-left:.06em;
  background:var(--gold);vertical-align:-.16em;
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.12}50%{opacity:.7}}

/* ---- 続きへ ----------------------------------------------------------- */
.gate,.done{display:none}
.gate.on,.done.on{display:block;animation:rise 1.4s ease both}
.gate{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.gate-say{margin:0 0 2rem;color:var(--paper-dim);font-size:.95rem;line-height:2.1}
#mailform{display:block}
.done{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.done p{color:var(--paper-dim);font-size:.95rem;margin:0 0 1.2rem}
.done p:first-child{color:var(--gold)}

/* ---- 足元 ------------------------------------------------------------- */
footer{
  max-width:33rem;margin:0 auto;padding:5rem 1.5rem 4rem;
  border-top:1px solid var(--line);
}
footer a{color:var(--paper-faint);font-size:.8rem;text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--paper-dim)}
.fine{margin:2rem 0 0;font-size:.7rem;line-height:1.9;color:#4a453d}

@media (max-width:480px){
  main{padding:3rem 1.35rem 2rem}
  h1{font-size:1.55rem}
  .row{display:block}
  .row .field{margin-bottom:2.4rem}
}

/* ---- 視立て -----------------------------------------------------------
   何を根拠に言っているのかを見せる。点数もパーセントも出さない。
   並べるのは、鑑定に効いている符号だけ。効いていない符号を置くのは、
   大きな数字を一つ出して根拠に見せるのと同じことになる。 */
.mitate{
  margin:0 0 3.25rem;padding:1.9rem 1rem 1.6rem;
  border:1px solid var(--line);
  opacity:0;transition:opacity 1.4s ease;
}
.mitate.on{opacity:1}
.mitate-title{
  margin:0 0 1.9rem;text-align:center;
  font-size:.68rem;letter-spacing:.5em;text-indent:.5em;color:var(--paper-faint);
}
.mitate-grid{display:flex;gap:.75rem}
.mitate .col{flex:1;text-align:center;min-width:0}
.mitate .who{
  margin:0 0 1rem;padding-bottom:.7rem;
  font-size:.82rem;color:var(--paper-dim);
  border-bottom:1px solid var(--line);
}
.mitate .marks{display:flex;flex-direction:column;gap:.55rem;align-items:center}
.mitate .mark{font-size:.78rem;color:var(--paper-dim);letter-spacing:.04em}
.mitate .mark em{font-style:normal;color:var(--paper-faint);font-size:.9em}
.mitate .glyph{
  display:inline-block;width:2.4rem;height:2.4rem;line-height:2.25rem;
  border:1px solid var(--gold);border-radius:50%;
  font-size:1.05rem;color:var(--gold);
}
.mitate .from{font-size:.66rem;color:var(--paper-faint);margin-top:.15rem}
.ties{margin:1.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line)}
.tie-row{margin:0 0 1.5rem}
.tie-row:last-child{margin-bottom:0}
.ties p{margin:0;text-align:center;line-height:1.85}
.tie-head{font-size:.82rem;color:var(--paper-dim)}
/* 符号の意味。ここが無いと「相剋」と言われても分からない */
.tie-why{font-size:.76rem;color:var(--paper-faint);margin-top:.35rem !important}
.tie-means{font-size:.78rem;color:var(--paper-dim);margin-top:.5rem !important}
.ties b{color:var(--gold);font-weight:400;letter-spacing:.1em}
@media (max-width:400px){
  .mitate{padding:1.6rem .6rem 1.3rem}
  .mitate .glyph{width:2.1rem;height:2.1rem;line-height:2rem;font-size:.95rem}
  .mitate .mark{font-size:.72rem}
}