/* page-quiz.css */

:root{
  --ttm-color-primary: #405467;     /* ブランド色 */
  --ttm-color-primary-weak: #e9eef3;
  --ttm-color-text: #1b1f24;
  --ttm-color-muted: #68707a;
  --ttm-color-border: #e6ebf0;
  --ttm-radius: 14px;
  --ttm-radius-pill: 999px;
  --ttm-shadow-sm: 0 4px 14px rgba(0,0,0,.06);
  --ttm-shadow-xs: 0 2px 8px rgba(0,0,0,.05);
  --ttm-spacing: 20px;
}

/* ------------------ */
/* ---- 見出し部分 ---- */
/* ------------------ */
.page-heading {
    height: 90px;
    width: 100%;
    background-color: #FFF2DF;
    display: flex;
    align-items: center;
}

.page-heading-inner {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1rem;
}

.page-heading h1.quiz-section-title {
  font-size: 30px;
  color: #e65100;
}

/* ---------------- */
/* ---- Layout ---- */
/* ---------------- */

.quiz-section{
  padding:10px 0 50px
}

#ttm-quiz{
  display:block;
}

.ttm-quiz-qwrap{
  display:block;
  container-type: inline-size;
}

.ttm-question-block{
  background:#fff;
  margin: 0;
  padding:40px 0;
  border-bottom:1px solid #DBDBDB;
}

/* ============ 設問タイトル＆吹き出し ============ */
.ttm-question-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 25px;
}
.ttm-question-title{
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  color: #333333;
  text-align: center;
}
.ttm-question-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #788A9B;
  color: #fff;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 24px;
  font-weight: 700;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.ttm-question-num::after{
  content:'';
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 95%;
  border: 8px solid transparent;
  border-top-color: #788A9B;
}

/* ============ 選択肢レイアウト ============ */
.ttm-quiz-opts{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  position: relative;
  align-items: stretch; /* 高さ揃え */
}

/* 行内各アイテム */
.ttm-quiz-opt{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  align-items: stretch;
}

/* ラジオは非表示 */
.ttm-quiz-opt input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ラベルをボタン風に（デフォルト状態） */
.ttm-quiz-opt label.ttm-quiz-opt-label{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;    

  padding: 14px 6px;
  border: 2px solid #788A9B;
  background: #FAFDFF;
  color: #405467;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;

  transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* 選択後（checked） */
.ttm-quiz-opt input:checked + label{
  background: #405467;
  border-color: #788A9B;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(64,84,103,.07);
}

.ttm-quiz-opt-label {
  cursor: pointer;
}

.ttm-quiz-opt-label:hover {
  background-color: #E6EEF5;
}

/* ホバー/フォーカス見栄え（任意） */
.ttm-quiz-opt label.ttm-quiz-opt-label:hover{
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.ttm-quiz-opt input:focus-visible + label{
  outline: 2px solid rgba(64,84,103,.35);
  outline-offset: 2px;
}

/* ============ 次へ／送信ボタン、進捗バーまわり（既存ベースでOK） ============ */
/* ===== ナビ領域 ===== */
.ttm-quiz-nav{
  display: flex;
  flex-direction: column;  /* リード → ボタン */
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

/* ===== リード文 ===== */
.ttm-quiz-lead{
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

/* ===== ボタン（次へ／結果を見る） ===== */
.ttm-quiz-next,
.ttm-quiz-submit{
  appearance: none;
  border: 2px solid #FFFFFF;
  border-radius: 40px;
  background: #EA472C;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  padding: 14px 28px;
  width: 320px;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(172, 96, 9, 0.4);
  transition: transform .06s ease, filter .2s ease;
  text-align: center;
  position: relative;
}

/* 矢印の疑似要素 */
.ttm-quiz-next::after,
.ttm-quiz-submit::after {
  content: '▶';
  font-size: 18px;
  color: #fff;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* ホバー/アクティブ */
.ttm-quiz-next:hover,
.ttm-quiz-submit:hover{
  filter: brightness(1.03);
}
.ttm-quiz-next:active,
.ttm-quiz-submit:active{
  transform: translateY(1px);
}

/* 進捗バー全体（最下部に追従） */
.ttm-progress-wrap{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: #FFF2DF;
  backdrop-filter: blur(6px);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  padding: 10px 0;                 /* 上下だけ。左右は内側で */
}

.ttm-progress-inner{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 既存のラベル/トラック/バーはそのまま流用OK */
.ttm-progress-label{ min-width:52px; text-align:center; font-size:20px; font-weight:700; color:#333; }
.ttm-progress-track{ position:relative; flex:1; height:22px; border-radius:999px; border: 1px solid #EA472C; background: #fff; overflow:hidden; }
.ttm-progress-bar{ position:absolute; left:0; top:0; bottom:0; width:0%; background:#EA472C; transition: width .25s ease; }

@media screen and (min-width: 767px) {
    .sp-none{
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .pc-none{
      display: none;
    }
    .page-heading h1.quiz-section-title{
      font-size: 24px;
    }
    .quiz-section{
      padding: 10px 15px 50px;
    }
    .ttm-question-header{
      gap: 8px;
    }
    .ttm-question-title{
      font-size: 18px;
    }
    .ttm-question-num {
    font-size: 20px;
    width: 36px;
    height: 36px;
}
.ttm-question-num::after {
    border: 6px solid transparent;
    border-top-color: #788A9B;
}
  /* ============ 選択肢レイアウト ============ */
    .ttm-quiz-opts{
    flex-direction: column;   /* SPは縦積み */
  }
  .ttm-progress-inner{
    gap: 6px;
  }

  .ttm-progress-label {
    font-size: 14px;
    min-width: unset;
  }
  }