/* 奇門遁甲トップ（index.php）の追加部分の見た目（2026-11-05）
   並びはマヤ暦トップ（maya/hub.css）と同じ。色は assets/style.css のラベンダー（--blue・--blue-line・--blue-dark）を使います */

.qm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ページ内メニュー */
.qm-pagenav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:920px;margin:0 auto 26px}
.qm-pagenav a{padding:6px 18px;border:1px solid var(--blue-line);border-radius:50px;background:#fff;color:var(--brown);font-family:"Kosugi Maru","Yu Gothic",sans-serif;font-size:15px;text-decoration:none}
.qm-pagenav a:hover{background:var(--blue);border-color:var(--blue-dark)}

/* 共通の箱と見出し（◆ 英字ラベル＋見出し） */
.qm-panel{max-width:920px;margin:30px auto 0;padding:28px 30px 30px;background:#fffdf9;border:1px solid var(--blue-line);border-radius:22px;box-shadow:0 4px 0 rgba(175,152,204,.12)}
.qm-head{margin-bottom:18px}
.qm-kicker{margin:0;color:var(--blue-dark);font:italic 700 13px "Libre Baskerville",Georgia,serif;letter-spacing:.14em}
.qm-kicker:before{content:"";display:inline-block;width:8px;height:8px;margin:0 9px 1px 0;background:var(--blue-dark);transform:rotate(45deg)}
.qm-head h2{margin:4px 0 0;color:#4b3a2f;font-size:28px;letter-spacing:.06em;scroll-margin-top:16px}
.qm-lead{margin:8px 0 0;font-size:17px;line-height:1.9}
.qm-text>p{margin:0;font-size:17px;line-height:1.95}
.qm-text>*+p,.qm-text>*+.qm-list,.qm-text>*+.qm-table-scroll{margin-top:14px}
.qm-note{margin:10px 0 0!important;font-size:15px!important;color:var(--muted)}
.qm-textlink{color:#7d63a3;text-decoration:underline;text-underline-offset:3px}
.qm-sub{margin:22px 0 8px;color:var(--brown);font-size:19px}
.qm-sub:first-child{margin-top:0}

.qm-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.qm-list li{position:relative;padding:11px 16px 11px 38px;background:#faf7fc;border-radius:14px;font-size:16px;line-height:1.85}
.qm-list li:before{content:"";position:absolute;left:16px;top:21px;width:8px;height:8px;background:var(--blue-dark);transform:rotate(45deg)}
.qm-list strong{display:block;color:#6e5794}
.qm-list-small li{font-size:15px;background:#fff}

/* 表（八門・九星・八神） */
.qm-table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;border:1px solid var(--blue-line);border-radius:16px;background:#fff}
.qm-table{width:100%;min-width:560px;margin:0;border-collapse:collapse;font-size:15px;line-height:1.65}
.qm-table th,.qm-table td{padding:9px 12px;border:0;border-top:1px dashed var(--blue-line);text-align:left;vertical-align:middle}
.qm-table thead th{border-top:0;background:var(--blue);color:#6e5794;font-size:14px;white-space:nowrap}
.qm-table tbody th{white-space:nowrap;color:var(--brown)}
.qm-table .judgement{min-width:52px;padding:2px 10px;font-size:14px}

/* 2. 今日の吉方位 */
.qm-today{background:linear-gradient(135deg,var(--blue),#fffdf9 75%)}
.qm-today-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:16px}
.qm-today-head .qm-kicker{flex-basis:100%}
.qm-today-head h2{margin:4px 0 0;color:#4b3a2f;font-size:28px;letter-spacing:.06em}
.qm-today-head time{color:var(--muted);font-size:16px}
.qm-today-best{display:flex;align-items:center;gap:22px;margin-top:16px;padding:18px 22px;background:#fff;border:2px solid var(--blue-dark);border-radius:20px}
.qm-today-art{width:150px;height:150px;object-fit:contain;flex-shrink:0}
.qm-today-body{min-width:0}
.qm-today-label{display:inline-block;margin:0;padding:1px 14px;border-radius:50px;background:var(--blue-dark);color:#fff;font-family:"Kosugi Maru","Yu Gothic",sans-serif;font-size:14px}
.qm-today-dir{display:flex;align-items:center;gap:14px;margin:8px 0 0}
.qm-today-dir strong{font-family:"Zen Antique Soft",serif;font-weight:400;font-size:42px;line-height:1.2;color:#4b3a2f}
.qm-today-time{margin:4px 0 0;font-size:18px;font-weight:700;color:#6e5794}
.qm-today-advice{margin:8px 0 0;font-size:16px;line-height:1.85}
.qm-today-none{margin:16px 0 0;padding:16px 18px;background:#fff;border:1px dashed var(--blue-dark);border-radius:16px;font-size:17px;line-height:1.85}
.qm-today-now{margin:14px 0 0;font-size:16px;line-height:1.8}
.qm-today-now span{display:inline-block;margin-right:10px;padding:0 12px;border:1px solid var(--blue-dark);border-radius:50px;background:#fff;color:#6e5794;font-size:14px}
.qm-today-note{margin:10px 0 0;font-size:14px;color:var(--muted);line-height:1.8}
.qm-today-note a{color:#7d63a3;white-space:nowrap}

/* 3. 調べるツールの上の紹介文 */
.workspace{scroll-margin-top:16px;margin-top:34px}
.qm-intro{margin:0 0 16px;padding:14px 20px;background:#fffdf9;border-left:4px solid var(--blue-dark);border-radius:12px}
.qm-intro p{margin:0;font-size:17px;line-height:1.9}
.qm-intro p+p{margin-top:6px}

/* 4. 8つの門 */
.qm-gates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.qm-gates a{display:flex;flex-direction:column;align-items:center;height:100%;padding:12px 10px 14px;background:#fff;border:1px solid var(--blue-line);border-radius:18px;color:var(--ink);text-decoration:none;text-align:center;transition:transform .18s,border-color .18s,box-shadow .18s}
.qm-gates a:hover{border-color:var(--blue-dark);transform:translateY(-2px);box-shadow:0 4px 0 rgba(175,152,204,.25)}
.qm-gate-art{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;max-width:150px}
.qm-gate-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.qm-gate-name{margin-top:6px;font-family:"Zen Antique Soft",serif;font-size:24px;color:#4b3a2f;line-height:1.3}
.qm-gate-name small{display:block;font-family:"Kosugi Maru","Yu Gothic",sans-serif;font-size:12px;color:var(--muted);letter-spacing:.06em}
.qm-gate-catch{margin:4px 0 8px;font-size:14px;line-height:1.6}
.qm-gates .judgement{min-width:52px;margin-top:auto;padding:2px 12px;font-size:14px}

/* 5. 調べ方 */
.qm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.qm-steps>li{padding:20px 18px 20px;background:var(--blue);border-radius:20px}
.qm-step-no{display:inline-block;padding:1px 14px;border-radius:50px;background:var(--blue-dark);color:#fff;font-family:"Kosugi Maru","Yu Gothic",sans-serif;font-size:14px;letter-spacing:.08em}
.qm-steps h3{margin:9px 0 6px;color:var(--brown);font-family:"Zen Maru Gothic",sans-serif;font-size:19px}
.qm-steps p{margin:0;font-size:16px;line-height:1.85}
.qm-modes{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.qm-modes li{position:relative;padding:14px 16px 14px 58px;background:#fff;border:1px solid var(--blue-line);border-radius:16px;font-size:15px;line-height:1.8}
.qm-modes strong{display:block;color:#6e5794;font-size:16px}
.qm-modes-mark{position:absolute;left:14px;top:14px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blue-dark);color:#fff;font-size:15px;font-weight:700}
.qm-cta{display:block;max-width:320px;margin:24px auto 0;padding:13px 18px;border-radius:50px;background:var(--blue-dark);color:#fff;font-weight:700;text-align:center;text-decoration:none;box-shadow:0 3px 0 #8f77ad}
.qm-cta:hover{filter:brightness(1.05)}

/* 6. わかること＋見本 */
.qm-see{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.qm-sample{padding:20px 22px 22px;border:2px dashed var(--blue-dark);border-radius:22px;background:linear-gradient(135deg,var(--blue),#fffdf9 70%);text-align:center}
.qm-sample-label{display:inline-block;margin:0;padding:2px 14px;border-radius:50px;background:var(--blue-dark);color:#fff;font-family:"Kosugi Maru","Yu Gothic",sans-serif;font-size:14px}
.qm-sample-date{margin:8px 0 0;font-size:14px;color:var(--muted);line-height:1.7}
.qm-sample-best{margin:14px 0 0;font-size:14px;color:var(--rose)}
.qm-sample-dir{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 0}
.qm-sample-dir strong{font-family:"Zen Antique Soft",serif;font-weight:400;font-size:36px;color:#4b3a2f}
.qm-sample-text{margin:12px 0 0;padding:12px 14px;background:#fff;border-left:3px solid var(--blue-dark);border-radius:12px;font-size:15px;line-height:1.85;text-align:left}
.qm-sample-basis{margin:10px 0 0;font-size:13px;color:var(--muted);text-align:left}
.qm-sample-btn{display:block;width:100%;margin-top:14px;padding:10px 16px;border:2px solid var(--blue-dark);border-radius:50px;background:#fff;color:var(--brown);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.qm-sample-btn:hover{background:var(--blue)}

/* 7. ガイド */
.qm-toc{max-width:520px;margin:0 auto 6px;padding:12px 24px;background:var(--blue);border-radius:18px}
.qm-toc ol{list-style:none;margin:0;padding:0}
.qm-toc li+li{border-top:1px dashed var(--blue-line)}
.qm-toc a{display:flex;gap:12px;align-items:baseline;padding:8px 2px;color:var(--ink);font-size:17px;text-decoration:none}
.qm-toc a:hover{color:#6e5794}
.qm-toc-no,.qm-guide-no{font-family:"Libre Baskerville",Georgia,serif;font-style:italic;color:var(--blue-dark)}
.qm-guide-part{margin-top:28px;padding-top:28px;border-top:1px dashed var(--blue-line);scroll-margin-top:16px}
.qm-guide-h{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;color:#4b3a2f;font-family:"Zen Antique Soft",serif;font-weight:400;font-size:24px}
.qm-guide-no{font-size:20px}

/* 9. 吉方位の生かし方 */
.qm-use{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qm-use>li{padding:18px 20px;background:var(--blue);border-radius:18px}
.qm-use-no{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-bottom:6px;border:2px solid var(--blue-dark);border-radius:50%;background:#fff;color:var(--blue-dark);font:italic 700 15px "Libre Baskerville",Georgia,serif}
.qm-use h3{margin:0 0 5px;color:var(--brown);font-family:"Zen Maru Gothic",sans-serif;font-size:18px}
.qm-use p{margin:0;font-size:16px;line-height:1.85}
.qm-use-note{margin-top:16px!important;line-height:1.9}

/* 10. よくある質問 */
.qm-faq{display:grid;gap:12px}
.qm-faq-item{padding:16px 18px;background:#fff;border:1px solid var(--blue-line);border-radius:16px}
.qm-faq-q,.qm-faq-a{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:16px;line-height:1.85}
.qm-faq-q{font-weight:700;color:var(--brown)}
.qm-faq-a{margin-top:8px}
.qm-faq-q>span,.qm-faq-a>span[aria-hidden]{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;margin-top:1px;border-radius:50%;font-family:"Libre Baskerville",Georgia,serif;font-size:15px}
.qm-faq-q>span{background:var(--blue-dark);color:#fff}
.qm-faq-a>span[aria-hidden]{background:var(--blue);color:#6e5794}
.qm-faq-text .qm-textlink{display:inline-block;margin-top:4px}

/* 注意書き */
.qm-caution{max-width:920px;margin:28px auto 0;padding:14px 18px;border:1px dashed var(--blue-dark);border-radius:14px;background:#fffdf9;color:var(--muted);font-size:15px;line-height:1.9}

/* 11. ほかの占い */
.qm-others{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qm-others a{display:flex;align-items:center;gap:14px;height:100%;padding:14px 18px;background:#fff;border:1px solid var(--blue-line);border-radius:16px;color:var(--ink);text-decoration:none}
.qm-others a:hover{border-color:var(--blue-dark);background:#faf7fc}
.qm-others-art{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:96px;height:72px}
.qm-others-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.qm-others-text{flex:1;min-width:0;font-size:15px;line-height:1.75}
.qm-others-text strong{display:block;color:#6e5794;font-size:18px}
.qm-others-arrow{flex-shrink:0;color:var(--blue-dark);font-size:24px}

@media(max-width:980px){
  .qm-gates{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .qm-see{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .qm-panel{padding:22px 16px 24px;border-radius:18px}
  .qm-head h2,.qm-today-head h2{font-size:24px}
  .qm-today-best{flex-direction:column;align-items:center;gap:8px;padding:16px;text-align:center}
  .qm-today-art{width:120px;height:120px}
  .qm-today-dir{justify-content:center}
  .qm-today-dir strong{font-size:36px}
  .qm-today-advice{text-align:left}
  .qm-gates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qm-gate-name{font-size:21px}
  .qm-steps,.qm-modes,.qm-use,.qm-others{grid-template-columns:minmax(0,1fr)}
  .qm-guide-h{font-size:21px}
  .qm-text>p{font-size:16px}
  .qm-others a{gap:10px;padding:12px 14px}
  .qm-others-art{width:76px;height:60px}
  .qm-sample{padding:18px 14px 20px}
}
@media print{.qm-pagenav,.qm-sample form{display:none}}

/* 4つ目の調べ方「この場所へ、いつ行くのがいい？」（2026-11-05） */
.mode-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
.mode-card-body{min-height:150px}
.qm-place{gap:6px}
.qm-place label+input{margin-bottom:8px}
.qm-place-note{margin:2px 0 4px;font-size:14px;line-height:1.75;color:var(--muted)}
.qm-place-btn{justify-self:start;min-height:44px;padding:8px 20px;border:2px solid var(--blue-dark);border-radius:50px;background:#fff;color:var(--brown);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.qm-place-btn:hover{background:var(--blue)}
.qm-place-result:empty{display:none}
.qm-place-result{margin-top:6px;padding:12px 16px;background:#fff;border:1px solid var(--blue-dark);border-radius:12px;font-size:15px;line-height:1.8}
.qm-place-result.is-error{border-color:#e2aaa3;background:#fff4f2;color:#813f39}
.qm-place-result p{margin:0}
.qm-place-found span{display:inline-block;min-width:4.5em;margin-right:8px;color:var(--muted);font-size:13px}
.qm-place-dir{margin-top:6px!important;font-weight:700}
.qm-place-dir strong{font-size:20px;color:#6e5794}
@media(max-width:720px){.mode-picker{grid-template-columns:minmax(0,1fr)}}

/* 結果の日付の曜日・祝日（2026-11-05 追加） */
.qm-wd{font-weight:inherit;}
.qm-wd-sat{color:#3f6f99;}
.qm-wd-sun{color:#c0574d;}
.qm-holiday{display:inline-block;margin:0 .6em 0 .1em;padding:0 6px;border-radius:999px;background:#fbe3df;color:#a8473e;font-size:.58em;font-weight:normal;letter-spacing:.02em;line-height:1.7;vertical-align:.2em;}
