/* ==========================================================================
   survey.css — アンケート回答画面（スマートフォン専用）
   管理画面のCSSは読み込まず、tokens.css + このファイルだけで完結させる。
   DESIGN.md 「5. レスポンシブ」の例外規定に従う。
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--ff-base);
  /* iOS の自動ズームを防ぐため 16px を下回らせない */
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg-sub);
  -webkit-font-smoothing: antialiased;
}

.s-wrap {
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-bg);
  min-height: 100vh;
}

/* --- ヘッダー ------------------------------------------------------------ */
.s-head {
  container-type: inline-size;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--c-header-bg);
  color: var(--c-text-inv);
}

/* ロゴと題を 1 行に。間に細い縦線。入らない幅では題が次の行へ */
.s-head__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
}

.s-head__brand {
  display: flex;
  align-items: center;
}

/* 公式サイトの白ロゴ（384×32）をそのまま使う */
.s-head__logo {
  display: block;
  height: var(--h-survey-logo);
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}

.s-head__title {
  padding-left: var(--sp-2);
  border-left: 1px solid var(--c-on-dark-sep);
  font-size: var(--fs-survey-title);
  font-weight: 700;
  line-height: 1.3;
}

/* 頭が狭くてロゴの右に入らないときは、縦線を消して題を次の行に置く */
@container (max-width: 355px) {
  .s-head__title {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }
}

.s-head__lead {
  margin-top: var(--sp-3);
  font-size: 13px;
  line-height: 1.75;
  opacity: 0.9;
  white-space: pre-line;
}

.s-langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border-light);
}

.s-langs__btn {
  appearance: none;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
}

.s-langs__btn.is-on {
  background: var(--c-header-bg);
  color: var(--c-text-inv);
  border-color: var(--c-header-bg);
}

/* --- 進捗 ---------------------------------------------------------------- */
.s-progress {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border-light);
  /* 上は下の見た目（文字の下の空きを含む）とそろうよう、少し多めに取る */
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
}

.s-progress__bar {
  height: 4px;
  background: var(--c-border-light);
  border-radius: 2px;
  overflow: hidden;
}

.s-progress__fill {
  position: relative;
  height: 100%;
  background: var(--c-brand);
  transition: width 0.3s ease, background var(--dur-slide) ease-in-out;
}

/* 全部答えたら棒を緑にし、満タンになった瞬間だけ光を左から右へ一度走らせる */
.s-progress.is-complete .s-progress__fill {
  background: var(--c-st-ok);
}

.s-progress.is-celebrate .s-progress__bar {
  animation: s-bar-glow var(--dur-celebrate) ease-in-out;
}

.s-progress.is-celebrate .s-progress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--c-shine), transparent);
  animation: s-bar-shine var(--dur-celebrate) ease-in-out;
}

@keyframes s-bar-shine {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes s-bar-glow {
  0%, 100% { box-shadow: none; }
  40% { box-shadow: 0 0 0 3px var(--c-st-ok-bg); }
}

.s-progress__done {
  font-weight: 700;
  color: var(--c-st-ok);
}

/* 上に通り過ぎた未回答の質問への吹き出し。進み具合の帯の裏から、下へ滑り出てくる
   （帯より下の重なりに置き、隠れているときは帯の裏に入っている） */
.s-jump {
  position: fixed;
  left: 50%;
  z-index: 9;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-brand);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--shadow-pop);
  color: var(--c-text-inv);
  font-family: inherit;
  font-size: var(--fs-input);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  visibility: hidden;
  transform: translate(-50%, calc(-100% - var(--sp-2)));
  transition: transform var(--dur-slide) ease-in-out, visibility 0s linear var(--dur-slide);
}

.s-jump.is-shown {
  visibility: visible;
  transform: translate(-50%, 0);
  transition: transform var(--dur-slide) ease-in-out, visibility 0s;
}

/* 吹き出しで飛んだ先の質問を、一度だけ薄く光らせる */
.s-q.is-flash {
  animation: s-q-flash 1.2s ease-in-out;
}

@keyframes s-q-flash {
  0%, 100% { background: transparent; }
  30% { background: var(--c-brand-pale); }
}

/* 残りの数。和文の書体はこれ以上太くならないので、数字だけ欧文の太い書体にする */
.s-progress__left {
  margin: 0 var(--sp-hair);
  font-family: var(--ff-num);
  font-size: var(--fs-progress-left);
  font-weight: 900;
  color: var(--c-brand);
  vertical-align: -0.05em;
}

.s-progress__text {
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-text-sub);
  display: flex;
  justify-content: space-between;
}

/* --- 設問 ---------------------------------------------------------------- */
.s-body {
  padding: var(--sp-4);
}

.s-q {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-border-light);
}

.s-q:last-child { border-bottom: 0; }

.s-q__label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}

/* 質問の番号（Q1.） */
.s-q__no {
  margin-right: var(--sp-1);
  color: var(--c-brand);
}

.s-q__req {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px 6px;
  background: var(--c-st-ng-bg);
  color: var(--c-st-ng);
  border: 1px solid var(--c-st-ng);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 2px;
}

.s-q__sub {
  font-size: 13px;
  color: var(--c-text-sub);
  margin-bottom: var(--sp-2);
}

/* --- 評価ボタン（タップ領域を大きく） ------------------------------------- */
.s-rate {
  display: grid;
  gap: var(--sp-2);
}

.s-rate--3 { grid-template-columns: repeat(3, 1fr); }
.s-rate--5 { grid-template-columns: repeat(5, 1fr); }

.s-rate__btn {
  min-height: 56px;
  padding: var(--sp-2) 2px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-sub);
  line-height: 1.35;
  cursor: pointer;
  /* 「大変良い」のような4文字が1マスに収まらないと表示が崩れるため、
     文字を詰めて折り返しを禁止する */
  white-space: nowrap;
  letter-spacing: -0.02em;
  overflow: hidden;
}

.s-rate--5 .s-rate__btn { font-size: 11px; }

/* 狭い端末（iPhone SE 等）では5段階を縦並びにする。
   横5列のままだと「大変良い」が入りきらず崩れる。 */
@media (max-width: 360px) {
  .s-rate--5 {
    grid-template-columns: 1fr;
  }
  .s-rate--5 .s-rate__btn {
    min-height: 46px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding-left: var(--sp-3);
  }
  .s-rate--5 .s-rate__face {
    display: inline;
    font-size: 17px;
  }
}

.s-rate__btn.is-on {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-text-inv);
}

.s-rate__face {
  display: block;
  font-size: 18px;
  line-height: 1.2;
}

/* --- 選択肢 -------------------------------------------------------------- */
.s-choice {
  display: grid;
  gap: var(--sp-2);
}

.s-choice__btn {
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}

/* 選んだ選択肢は茶色の地に白い字 */
.s-choice__btn.is-on {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-text-inv);
  font-weight: 600;
}

/* 押した感。押している間は少し縮み、選ぶと地と枠の色がすっと変わる */
.s-choice__btn,
.s-rate__btn,
.s-star,
.s-submit {
  transition: transform var(--dur-press) ease-in-out, background var(--dur-press) ease-in-out,
    border-color var(--dur-press) ease-in-out, color var(--dur-press) ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

.s-choice__btn:active,
.s-rate__btn:active,
.s-submit:active {
  transform: scale(0.97);
}

.s-star:active svg {
  transform: scale(0.9);
}

/* 星も押したあと一瞬ふくらむ（選んだ星は少し大きいまま止まる） */
.s-star.is-pop svg {
  animation: s-pop-star var(--dur-pop) ease-in-out;
}

@keyframes s-pop-star {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1.12); }
}

/* 押したあと、一瞬ふくらんで戻る（選んだことが分かる） */
.s-choice__btn.is-pop,
.s-rate__btn.is-pop {
  animation: s-pop var(--dur-pop) ease-in-out;
}

@keyframes s-pop {
  0% { transform: scale(0.97); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.s-detail {
  margin-top: var(--sp-1);
}

/* --- 入力欄 -------------------------------------------------------------- */
.s-input,
.s-textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: 16px;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  min-height: 48px;
}

.s-textarea {
  min-height: 96px;
  line-height: 1.6;
  resize: vertical;
}

/* 理由の欄。評価を選ぶまでは高さ 0 で閉じ、選んだら高さを広げて下へスライドして開く */
.s-reason {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows var(--dur-slide) ease-in-out, margin-top var(--dur-slide) ease-in-out;
}

.s-reason.is-shown {
  grid-template-rows: 1fr;
  margin-top: var(--sp-2);
}

.s-reason__inner {
  min-height: 0;
  overflow: hidden;
}

/* --- 5 段階の星 ------------------------------------------------------------ */
.s-stars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
}

.s-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-tap);
  height: var(--h-tap);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-border);
}

.s-star svg {
  width: var(--sz-star);
  height: var(--sz-star);
  fill: currentColor;
  transition: transform var(--dur-star) ease-in-out, color var(--dur-star) ease-in-out;
}

.s-star.is-fill {
  color: var(--c-star);
}

.s-star.is-on svg {
  transform: scale(1.12);
}

.s-stars__label {
  margin-left: var(--sp-2);
  font-size: var(--fs-input);
  font-weight: 600;
  color: var(--c-text);
}

.s-menu3 {
  display: grid;
  gap: var(--sp-2);
}

.s-menu3__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.s-menu3__no {
  flex: 0 0 auto;
  width: 20px;
  font-size: 14px;
  color: var(--c-text-sub);
}

/* --- 送信 ---------------------------------------------------------------- */
.s-foot {
  padding: var(--sp-4);
  background: var(--c-bg-sub);
  border-top: 1px solid var(--c-border);
}

.s-submit {
  display: block;
  width: 100%;
  min-height: 54px;
  background: var(--c-brand);
  color: var(--c-text-inv);
  border: 0;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.s-submit:active { background: var(--c-brand-dark); }

.s-note {
  margin: var(--sp-3) 0 0;
  font-size: 12px;
  color: var(--c-text-sub);
  text-align: left;
  line-height: 1.6;
}

.s-sign {
  margin-top: var(--sp-3);
  font-size: 13px;
  color: var(--c-text-sub);
  text-align: right;
}

.s-error {
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-st-ng-bg);
  border: 1px solid var(--c-st-ng);
  border-radius: var(--r-md);
  color: var(--c-st-ng);
  font-size: 14px;
  font-weight: 600;
}

.s-q.is-error {
  background: var(--c-st-ng-bg);
  margin: 0 calc(-1 * var(--sp-3));
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
  border-radius: var(--r-md);
}

/* --- 完了画面 ------------------------------------------------------------ */
/* --- 送信のあと ---------------------------------------------------------- */
.s-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 70vh;
  min-height: 70dvh;
  justify-content: center;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}

/* 円を描き、続けてチェックを描き、最後に一度ふくらむ */
.s-done__check {
  width: var(--sz-done-check);
  height: var(--sz-done-check);
  margin-bottom: var(--sp-5);
  fill: none;
  stroke: var(--c-st-ok);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: s-done-pop var(--dur-pop) ease-in-out calc(var(--dur-draw-ring) + var(--dur-draw-tick)) both;
}

.s-done__ring {
  fill: var(--c-st-ok-bg);
  stroke-dasharray: 214;
  stroke-dashoffset: 214;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: s-draw var(--dur-draw-ring) ease-in-out forwards;
}

.s-done__tick {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: s-draw var(--dur-draw-tick) ease-in-out var(--dur-draw-ring) forwards;
}

@keyframes s-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes s-done-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 文言は、チェックを描き終えてから下から順に浮き上がる */
.s-done__title,
.s-done__text,
.s-done__sign,
.s-done__again {
  opacity: 0;
  animation: s-rise var(--dur-slide) ease-in-out forwards;
}

.s-done__title { animation-delay: var(--delay-done-1); }
.s-done__text { animation-delay: var(--delay-done-2); }
.s-done__sign { animation-delay: var(--delay-done-3); }
.s-done__again { animation-delay: var(--delay-done-4); }

@keyframes s-rise {
  from { opacity: 0; transform: translateY(var(--sp-3)); }
  to { opacity: 1; transform: translateY(0); }
}

.s-done__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-done-title);
  font-weight: 700;
  line-height: 1.4;
}

.s-done__text {
  margin: 0;
  max-width: 22em;
  font-size: var(--fs-input);
  line-height: 1.9;
  color: var(--c-text-sub);
}

.s-done__sign {
  margin: var(--sp-4) 0 0;
  font-size: 14px;
  color: var(--c-text-sub);
}

.s-done__again {
  margin-top: var(--sp-6);
  padding: var(--sp-2) var(--sp-3);
  min-height: var(--h-tap);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-input);
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.s-btn2 {
  min-height: 48px;
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 15px;
  color: var(--c-text);
  cursor: pointer;
}

/* --- 管理画面のiframe内に埋め込まれたときの微調整 -------------------------- */
body.is-embed .s-wrap { min-height: 0; }
body.is-embed .s-head { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
body.is-embed .s-head__title { font-size: 18px; }

/* --- 日付の暦（Air Datepicker。datepicker.js。DESIGN.md 4.12） ------------------------------
   ライブラリの色・角・文字をトークンに合わせる。選んだ日は銅の地に白、今日は銅の字、
   曜日の見出しは日曜を赤、土曜を青に。前後の月の日は薄く */
.air-datepicker {
  --adp-font-family: var(--ff-base);
  --adp-font-size: var(--fs-md);
  --adp-width: var(--w-datepicker);
  --adp-z-index: var(--z-datepicker);
  --adp-padding: var(--sp-2);
  --adp-border-radius: var(--r-md);
  --adp-border-color: var(--c-border);
  --adp-border-color-inner: var(--c-border-light);
  --adp-background-color: var(--c-bg);
  --adp-background-color-hover: var(--c-row-hover);
  --adp-background-color-active: var(--c-brand-pale);
  --adp-accent-color: var(--c-brand);
  --adp-color: var(--c-text);
  --adp-color-secondary: var(--c-text-sub);
  --adp-color-current-date: var(--c-brand);
  --adp-color-other-month: var(--c-border);
  --adp-color-other-month-hover: var(--c-text-mute);
  --adp-color-disabled: var(--c-border);
  --adp-day-name-color: var(--c-text-sub);
  --adp-cell-border-radius: var(--r-sm);
  --adp-cell-background-color-hover: var(--c-row-hover);
  --adp-cell-background-color-selected: var(--c-brand);
  --adp-cell-background-color-selected-hover: var(--c-brand-dark);
  --adp-btn-color: var(--c-brand);
  --adp-btn-color-hover: var(--c-brand-dark);
  --adp-btn-background-color-hover: var(--c-brand-pale);
  --adp-btn-border-radius: var(--r-sm);
  --adp-nav-arrow-color: var(--c-text-sub);
  --adp-transition-ease: ease-in-out;
  box-shadow: var(--shadow-pop);
}

.air-datepicker-overlay {
  --adp-overlay-z-index: calc(var(--z-datepicker) - 1);
  --adp-overlay-transition-ease: ease-in-out;
}

/* 見出しの年月は太く。前後の月へは線の山形 */
.air-datepicker-nav--title {
  font-weight: 600;
  color: var(--c-text);
}

.air-datepicker-nav--title i {
  color: var(--c-text-sub);
}

.air-datepicker-nav--action svg {
  width: var(--sz-date-icon);
  height: var(--sz-date-icon);
  fill: none;
}

.air-datepicker-nav--action path {
  fill: none;
  stroke: currentColor;
}

/* 曜日の見出し。日曜は赤、土曜は青（日本の暦の見慣れた色。並びは日〜土） */
.air-datepicker-body--day-name {
  font-weight: 600;
  text-transform: none;
}

.air-datepicker-body--day-name:nth-child(1) {
  color: var(--c-st-ng);
}

.air-datepicker-body--day-name:nth-child(7) {
  color: var(--c-date-sat);
}

.air-datepicker-cell.-day-.-current- {
  font-weight: 700;
}

.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current- {
  color: var(--c-text-inv);
  font-weight: 700;
}

.air-datepicker-button {
  font-weight: 600;
}

/* 暦を出す欄。右に暦のアイコン（ブラウザの暦と同じ位置） */
input.td-date {
  padding-right: calc(var(--sz-date-icon) + var(--sp-2) * 2);
  background-image: var(--icon-calendar);
  background-repeat: no-repeat;
  background-position: right var(--sp-2) center;
  background-size: var(--sz-date-icon) var(--sz-date-icon);
  cursor: pointer;
}

/* 日付の欄と、横の「今日」「昨日」のボタン（datepicker.js が包む） */
.td-date-wrap {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;   /* 今日・昨日はいつも欄の右どなり */
  gap: var(--sp-2);
  max-width: 100%;
  vertical-align: middle;
}

/* 日付の欄は決まった幅（画面ごとの .input--date や行いっぱいの幅より優先） */
.td-date-wrap > input.td-date {
  flex: none;
  width: var(--w-date);
  max-width: none;
}

.td-date-quick {
  flex: none;
}

.td-date-quick {
  display: inline-flex;
  gap: var(--sp-1);
}

.td-date-chip {
  display: inline-flex;
  align-items: center;
  height: var(--h-btn-sm);
  padding: 0 var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--h-btn-sm);
  background: var(--c-bg);
  color: var(--c-text-sub);
  font-family: inherit;
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-menu, 160ms) ease-in-out, color var(--dur-menu, 160ms) ease-in-out,
    border-color var(--dur-menu, 160ms) ease-in-out;
}

.td-date-chip:hover:not(:disabled) {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background: var(--c-brand-pale);
}

.td-date-chip.is-on {
  border-color: var(--c-brand);
  background: var(--c-brand);
  color: var(--c-text-inv);
}

.td-date-chip:disabled {
  color: var(--c-border);
  cursor: default;
}

/* 後日は、日が入っていて今日でないときだけ出す（datepicker.js が hidden を付け外す） */
.td-date-chip[hidden] {
  display: none;
}

/* お客様の画面は、ボタンを指で押しやすい高さに */
.td-date-chip {
  height: var(--h-tap);
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-lg);
}