@charset "UTF-8";
/* ================================================================
   What's your autumn style? — 診断モーダル
   ----------------------------------------------------------------
   使用画像
     bg_top.png                    ページ全体の下地（リピート）
     bg_quest_pc.png / bg_quest_sp.png   その上に cover で重ねる（一部透過）
     bg_event.png                  パネルの背景（リピート）
     btn_fashion_[type]_pc/sp.png  スタイルカード（結果ごとに差し替え）
     btn_event_pc/sp.png           イベントを見る（全結果共通）
     btn_workshop_pc/sp.png        ワークショップを見る（全結果共通）

   ※ 画像パスは /autumn/img/ 起点で記述しています
   ================================================================ */

/* ============================================================
   1. トークン
   ============================================================ */
.cq{
  --cq-green:#004350;        /* パネルの濃緑 */
  --cq-cream:#fff;        /* スタイルカードの地色 */
  --cq-gold:#F5AA00;         /* 金の枠線 */
  --cq-yellow:#F5AA00;       /* 選択肢の黄 */
  --cq-orange:#DC5525;       /* 戻る・詳しく見る */
  --cq-red:#C52C37;          /* A/Bバッジ */
  --cq-brown:#7A4028;        /* スタイル名の茶 */
  --cq-white:#FFFFFF;

  --cq-dur:.28s;
}

.cq :focus,
.cq :focus-visible,
.quest-float:focus,
.quest-float:focus-visible,
.quest-float-close:focus,
.quest-float-close:focus-visible,
.kaso_shindan:focus,
.kaso_shindan:focus-visible{
  outline:none;
  box-shadow:none;
}
.cq button::-moz-focus-inner,
.quest-float::-moz-focus-inner,
.quest-float-close::-moz-focus-inner,
.kaso_shindan::-moz-focus-inner{
  border:0;
}
.cq button, .cq a,
.quest-float, .quest-float-close, .kaso_shindan{
  -webkit-tap-highlight-color:transparent;
}

/* ============================================================
   2. オーバーレイ
   ① bg_top.png（リピート）の上に ③ bg_quest（cover・一部透過）
   ============================================================ */
.cq{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:40px 20px;

  background-image:
    url("/autumn/img/quest/bg_quest_pc.png"),   /* 手前・cover */
    url("/autumn/img/bg_top.png");              /* 奥・リピート */
  background-repeat:no-repeat, repeat;
  background-size:cover, auto;
  background-position:center center, top left;
  background-attachment:fixed, fixed;

  opacity:0; visibility:hidden;
  transition:opacity var(--cq-dur) ease, visibility var(--cq-dur) ease;
  overscroll-behavior:contain;
  line-height:1.8;
}
.cq.is-open{ opacity:1; visibility:visible }

.pc{display: block;}
.sp{display: none;}
@media (max-width:767px){
  .cq{
    padding:20px 14px;
    background-image:
      url("/autumn/img/quest/bg_quest_sp.png"),
      url("/autumn/img/bg_top.png");
  }

  .pc{display: none;}
  .sp{display: block;}
}

/* ---- 既存グローバルCSSの打ち消し ---- */
.cq img{ width:auto; max-width:100%; height:auto }
.cq ul{ list-style:none; margin:0 auto; padding:0 }
.cq p, .cq h2, .cq h3, .cq h4{ margin:0 }
.cq a{ color:inherit; text-decoration:none }
.cq *, .cq *::before, .cq *::after{ box-sizing:border-box }
.cq button{appearance: none; -webkit-appearance: none; border: none}

/* ============================================================
   3. 外枠（パネル ＋ 閉じるボタン）
   ============================================================ */
.cq .cq__outer{
  width:min(1010px, 100%);
  margin:auto;
  display:grid;
  gap:24px;
  justify-items:center;
  transform:translateY(16px) scale(.985);
  transition:transform var(--cq-dur) cubic-bezier(.2,.8,.3,1);
}
.cq.is-open .cq__outer{ transform:none }

/* ② パネル背景 ＝ bg_event.png（リピート） */
.cq .cq__panel{
  position:relative;
  width:100%;
  background:url("/autumn/img/bg_event.png") top left repeat, var(--cq-green);
  border-radius:16px;
  padding:56px 48px 48px;
  color:var(--cq-white);
}
@media (max-width:767px){
  .cq .cq__panel{ padding:44px 22px 40px; border-radius:14px }
}

/* ---- 共通ヘッダー（両画面に表示） ---- */
.cq .cq__title{
  font-family:"Zen Antique", serif;
  font-size:4.8rem;
  font-weight: normal;
  line-height:1.2;
  letter-spacing:.01em;
  text-align:center;
  margin:0 0 6px;
}
.cq .cq__subtitle{
  font-family:"Zen Antique", serif;
  text-align:center;
  font-size:2rem;
  letter-spacing:.06em;
  margin:0 0 34px;
}
.cq .cq__subtitle .cq-sp{ display:none }
.cq .cq__stage{ 
  margin-top: 30px;
 }
@media (max-width:767px){
  .cq .cq__title{ font-size:3rem;}
  .cq .cq__subtitle{ margin-bottom:26px; font-size:1.8rem; }
  .cq .cq__subtitle .cq-pc{ display:none; }
  .cq .cq__subtitle .cq-sp{ display:inline; }
  .cq .cq__stage{margin-top: 0;}
}

/* ---- 閉じるボタン（パネルの外・下） ---- */
.cq .cq__close{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-width:240px;
  padding:16px 32px;
  border-radius:999px;
  background:var(--cq-green);
  color:var(--cq-white);
  font-size:16px; font-weight:700; letter-spacing:.08em;
  cursor:pointer;
  transition:opacity var(--cq-dur), transform var(--cq-dur);
}
.cq .cq__close:hover{ opacity:.85; transform:translateY(-2px) }
.cq .cq__close:focus-visible{ outline:3px solid var(--cq-orange); outline-offset:3px }
.cq .cq__close::before{
  content:""; width:13px; height:13px; flex:none;
  background:
    linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  transform:rotate(45deg);
}

/* ============================================================
   4. 設問画面
   ============================================================ */
.cq .cq__q{
  display:flex; align-items:flex-start; justify-content:center; gap:14px;
  max-width:840px; margin:0 auto 40px;
}
.cq .cq__q-mark{
  font-size:5rem;
  line-height:1;
  flex:none;
  padding-top:2px;
}
.cq .cq__q-text{
  font-size:3rem;
  font-weight:500;
  line-height:1.6;
  padding-top:6px;
}
@media (max-width:767px){
  .cq .cq__q{ gap:10px; margin-bottom:26px }
  .cq .cq__q-text{ padding-top:4px; font-size: 2.6rem; line-height: 3.2rem; }
}

/* ---- 選択肢 ---- */
.cq .cq__choices{
  display:grid; gap:26px;
  max-width:880px; margin:0 auto;
}
@media (min-width:768px){
  .cq .cq__choices{ grid-template-columns:1fr 1fr; gap:36px }
}

.cq .cq__choice{
  position:relative;
  display:flex; align-items:center; gap:20px;
  width:100%;
  min-height:132px;
  padding:22px 30px;
  border-radius:999px;
  background:var(--cq-yellow);
  cursor:pointer;
  text-align:left;
  transition:transform var(--cq-dur) cubic-bezier(.34,1.5,.5,1), box-shadow var(--cq-dur);
}
.cq .cq__choice:hover{
  transform:translateY(4px);
}
.cq .cq__choice:active{ transform:translateY(9px); box-shadow:0 3px 0 rgba(120,88,16,.42) }
.cq .cq__choice:focus-visible{ outline:3px solid var(--cq-white); outline-offset:4px }

.cq .cq__choice-key{
  flex:none;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--cq-red);
  border:3px solid var(--cq-white);
  color:var(--cq-white);
  font-size:28px; font-weight:700; line-height:1;
  display:grid; place-items:center;
}
.cq .cq__choice-label{
  font-size:2.2rem;
  font-weight:700;
  line-height:3.2rem;
  color:var(--cq-green);
}
@media (max-width:767px){
  .cq .cq__choice{ min-height:118px; padding:20px 24px; gap:16px }
  .cq .cq__choice-key{ width:52px; height:52px; font-size:25px }
}

/* ---- 進捗 ---- */
.cq .cq__progress{
  text-align:center;
  font-size:14px; font-weight:700; letter-spacing:.08em;
  margin:40px 0 0;
}
@media (max-width:767px){
  .cq .cq__progress{margin:20px auto 0;}
}

/* ---- 戻るボタン ---- */
.cq .cq__back{
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-width:172px;
  margin:40px auto 0;
  padding:11px 26px;
  border-radius:999px;
  background:var(--cq-orange);
  color:var(--cq-white);
  font-size:15px; font-weight:700; letter-spacing:.06em;
  cursor:pointer;
  transition:opacity var(--cq-dur), transform var(--cq-dur);
}
.cq .cq__back:hover{ opacity:.88; transform:translateX(-3px) }
.cq .cq__back:focus-visible{ outline:3px solid var(--cq-white); outline-offset:3px }
.cq .cq__back.is-hidden{ visibility:hidden }
.cq .cq__back::before{ content:"⇦"; font-size:15px; line-height:1 }

@media (max-width:767px){
  .cq .cq__back{margin: 20px auto 0;}
}
/* ============================================================
   5. 結果画面
   ============================================================ */
.cq .cq__result-label{
  text-align:center;
  font-size:3rem;
  font-weight:700;
  letter-spacing:.04em;
  margin:0 0 20px;
}

/* 「あなたは ○○ タイプ」の白枠 */
.cq .cq__type{
  display:block;
  width:fit-content; max-width:100%;
  margin:0 auto 20px;
  padding:16px 40px;
  background:var(--cq-white);
  border:3px solid var(--cq-orange);
  border-radius:12px;
  color:var(--cq-orange);
  font-size:2.2rem;
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
  line-height:1.4;
}
.cq .cq__type em{
  font-style:normal;
  color:var(--cq-orange);
  font-size:3.2rem;
  margin:0 .18em;
}
@media (max-width:767px){
  .cq .cq__type{ width:100%; padding:18px 20px; font-size:2rem; }
  .cq .cq__type em{ font-size:3rem }
}

.cq .cq__lead{
  max-width:860px;
  margin:0 auto;
  text-align:center;
  font-size:2.2rem;
  line-height:3.4rem;
}
@media (max-width:767px){
  .cq .cq__lead{ text-align:left; font-size:1.8rem; line-height: 3.2rem; }
}

/* ---- スタイルカード（結果ごとの画像リンク） ---- */
.cq .cq__style{
  display:block;
  width:100%;
  margin:0 auto 36px;
  line-height:0;
  transition:transform var(--cq-dur), opacity var(--cq-dur);
}
.cq .cq__style:hover{ transform:translateY(-3px); opacity:.92 }
.cq .cq__style:focus-visible{ outline:3px solid var(--cq-gold); outline-offset:4px }
.cq .cq__style img{ width:100%; border-radius:14px }

/* ---- 下段：商品カード ＋ 共通リンク ---- */
.cq .cq__bottom{ display:grid; gap:30px; align-items: center;
margin-top: 10px;}
@media (min-width:768px){
  .cq .cq__bottom{
    grid-template-columns:1fr auto 1fr;
    gap:36px;
  }
  /* 縦の点線 */
  .cq .cq__divider{
    width:1px; align-self:stretch; min-height:200px;
    background-image:linear-gradient(to bottom, rgba(255,255,255,.85) 5px, transparent 5px);
    background-size:1px 12px; background-repeat:repeat-y;
  }
}
@media (max-width:767px){
  /* 横の点線 */
  .cq .cq__divider{
    height:1px; width:100%;
    background-image:linear-gradient(to right, rgba(255,255,255,.85) 5px, transparent 5px);
    background-size:12px 1px; background-repeat:repeat-x;
    margin:4px 0;
  }
}

/* ---- 商品カード ---- */
.cq .cq__items{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.cq .cq__item{
  display:flex; flex-direction:column;
  transition:transform var(--cq-dur), opacity var(--cq-dur);
}
.cq .cq__item:hover{ transform:translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,.22) }
.cq .cq__item:focus-visible{ outline:3px solid var(--cq-orange); outline-offset:3px }
.cq .cq__item-img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  background:#C6C6C6; border-radius:4px; display:block;
}
.cq .cq__item-name{
  display:block; text-align:center;
  color:var(--cq-orange);
  font-size:14px; font-weight:700; line-height:1.5;
  margin:12px 0 4px;
}
.cq .cq__item-shop{
  display:block; text-align:center;
  font-size:12px; line-height:1.5;
  margin:0 0 12px;
}
.cq .cq__item-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:auto;
  padding:9px 12px;
  border-radius:999px;
  background:var(--cq-orange);
  color:var(--cq-white);
  font-size:13px; font-weight:700;
}
.cq .cq__item-btn::after{ content:"›"; font-size:16px; line-height:1 }

/* 読み込み中 */
.cq .cq__item--skeleton{
  border-radius:10px; min-height:250px;
  background:linear-gradient(90deg, rgba(255,255,255,.10) 25%, rgba(255,255,255,.20) 37%, rgba(255,255,255,.10) 63%);
  background-size:400% 100%;
  animation:cqShimmer 1.4s ease infinite;
}
@keyframes cqShimmer{ from{ background-position:100% 0 } to{ background-position:0 0 } }

/* ---- 「○○をもっと楽しむには♪」 ---- */
.cq .cq__more-title{
  text-align:center;
  font-size:2.2rem;
  font-weight:normal;
  letter-spacing:.02em;
  margin:0;
}
.cq .cq__more-title::before{ content:"＼ " }
.cq .cq__more-title::after{ content:" ／" }

.cq .cq__morelinks{ display:grid; gap:0; }
.cq .cq__morelink{
  display:block; line-height:0;
  transition:transform var(--cq-dur), opacity var(--cq-dur);
}
.cq .cq__morelink:hover{ transform:translateY(-3px); opacity:.9 }
.cq .cq__morelink:focus-visible{ outline:3px solid var(--cq-white); outline-offset:4px }
.cq .cq__morelink img{ width:100% }

@media (max-width:767px){
  .cq .cq__more-title{
    font-size:1.8rem;
  }
}

/* ---- PC / SP 画像の出し分け ---- */
.cq .cq__img-pc{ display:block }
.cq .cq__img-sp{ display:none }
@media (max-width:767px){
  .cq .cq__img-pc{ display:none }
  .cq .cq__img-sp{ display:block }
}

/* ============================================================
   6. 画面切替
   ============================================================ */
.cq .cq__view{ animation:cqIn .3s ease both }
@keyframes cqIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }