@charset "utf-8";

/*============================
#guidePage
============================*/

@media screen and (max-width: 600px) {
:where(#guidePage) .md_storeNotice { width: min(calc(100vw - 2rem), 23.75rem); white-space: normal; border-radius: 14px; padding: var(--space-12) var(--space-18); font-size: var(--fs-12p5); line-height: 1.5; gap: var(--space-10); }
}
@media screen and (max-width: 760px) {
:where(#guidePage) .headerNav :where(.elementA).hideSp { display: none; }
:where(#guidePage) .toc { grid-template-columns: 1fr 1fr; }
:where(#guidePage) .toc :where(.elementA) { font-size: var(--fs-13); }
:where(#guidePage) .toc :where(.elementB) { width: 1.625rem; height: 1.625rem; }
:where(#guidePage) .step, :where(#guidePage) .step:nth-of-type(even), :where(#guidePage) .step:has(.shotPair) { grid-template-columns: 1fr; gap: var(--space-28); }
:where(#guidePage) .shot { max-width: min(72vw, 18.75rem); }
:where(#guidePage) .shotPair { max-width: 100%; }
:where(#guidePage) .mailBtn { justify-content: center; }
}
@media screen and (max-width:1100px) {
:where(#guidePage) .guideLayout { grid-template-columns: minmax(0,1fr); gap: 0; max-width: 60rem; }
:where(#guidePage) .guideSidebar { top: var(--guide-header-height); z-index: 15; padding: var(--space-10) 0; background: var(--color-tone05070BF5); border-bottom: 1px solid var(--line); margin-bottom: var(--space-8); backdrop-filter: blur(0.75rem); }
:where(#guidePage) .guideNavLabel, :where(#guidePage) .guideBackSite { display: none; }
:where(#guidePage) .guideMenu>:where(.elementSummary) { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); min-height: 2.75rem; padding: var(--space-10) var(--space-14); background: var(--color-tone101925); border: 1px solid var(--color-tone33445B); border-radius: 8px; list-style: none; font-size: var(--fs-12); cursor: pointer; color: var(--text); }
:where(#guidePage) .guideMenu>:where(.elementSummary)::-webkit-details-marker { display: none; }
:where(#guidePage) .guideMenu>:where(.elementSummary)::after { content: "⌄"; color: var(--blue-hi); }
:where(#guidePage) .guideCurrent { margin-left: auto; color: var(--blue-hi); font-size: var(--fs-11); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(#guidePage) .guideMenu>:where(.elementNav) { display: none; padding: var(--space-8) 0; max-height: 60vh; overflow: auto; }
:where(#guidePage) .guideMenu[open]>:where(.elementNav) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
:where(#guidePage) .guideMenu[open]>:where(.elementSummary)::after { content: "⌃"; }
:where(#guidePage) .guideContent .chapter { scroll-margin-top: calc(var(--guide-header-height) + 5.25rem); }
}
@media screen and (max-width:680px) {
:where(#guidePage) .intro { padding: var(--space-30) 0 var(--space-32); }
:where(#guidePage) .guideBreadcrumb { margin-bottom: var(--space-22); }
:where(#guidePage) .intro :where(.elementH1) { font-size: var(--fs-36); }
:where(#guidePage) .intro> .md_container>:where(.elementP) { font-size: var(--fs-14); }
:where(#guidePage) .intro .guideIntroHelp { font-size: var(--fs-12); text-align: left; }
:where(#guidePage) .toc { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-8); margin-top: var(--space-22); }
:where(#guidePage) .toc :where(.elementA) { padding: var(--space-12) var(--space-10); gap: var(--space-8); font-size: var(--fs-12); align-items: flex-start; }
:where(#guidePage) .toc :where(.elementB) { width: 1.375rem; height: 1.375rem; font-size: var(--fs-11); }
:where(#guidePage) .toc :where(.elementSmall) { font-size: var(--fs-10); line-height: 1.7; margin-top: var(--space-5); }
:where(#guidePage) .guideContent .chapter { padding: var(--space-26) 0 var(--space-32); }
:where(#guidePage) .chapterHead { margin-bottom: var(--space-20); }
:where(#guidePage) .chapterHead :where(.elementH2) { font-size: var(--fs-26); }
:where(#guidePage) .chapterHead :where(.elementP) { font-size: var(--fs-13); }
:where(#guidePage) .guideContent .step, :where(#guidePage) .guideContent .step:nth-of-type(even), :where(#guidePage) .guideContent .step:has(.shotPair) { grid-template-columns: minmax(0,1fr); gap: var(--space-24); padding: var(--space-22) var(--space-18); }
:where(#guidePage) .step :where(.elementH3) { font-size: var(--fs-20); margin-bottom: var(--space-14); }
:where(#guidePage) .step :where(.elementLi) { font-size: var(--fs-13); }
:where(#guidePage) .guideContent .step .shot { max-width: 13.75rem; }
:where(#guidePage) .guideContent .step .shotPair { max-width: 22.5rem; gap: var(--space-14); }
:where(#guidePage) .support { padding: var(--space-22) var(--space-18); }
:where(#guidePage) .support :where(.elementH3) { font-size: var(--fs-20); }
:where(#guidePage) .mailBtn { font-size: var(--fs-13); }
:where(#guidePage) .guideMenu[open]>:where(.elementNav) { grid-template-columns: 1fr; }
:where(#guidePage) .headerNav { gap: var(--space-12); }
}
@media screen and (max-width:680px) {
:where(#guidePage) .siteHeader .md_container { gap: var(--space-12); }
:where(#guidePage) .siteHeader .brand { flex-shrink: 0; }
:where(#guidePage) .siteHeader .brand :where(.elementImg) { width: clamp(7.375rem,37vw,9.375rem); }
:where(#guidePage) .headerNav { gap: var(--space-12); }
:where(#guidePage) .headerNav :where(.elementA) { font-size: var(--fs-11); white-space: nowrap; }
:where(#guidePage) .guideFaqFull { display: none; }
:where(#guidePage) .guideFaqShort { display: inline; }
}
@media screen and (max-width: 680px) {
:where(#guidePage) .intro > .md_container > .guideIntroHelp { font-size: var(--fs-14); }
}

@media screen and (max-width: 860px) {
:where(#guidePage) .intro { padding: 28px 0; }
:where(#guidePage) .intro .elementH1 { font-size: clamp(28px,8vw,36px); line-height: 1.4; }
:where(#guidePage) .intro > .md_container > .elementP { text-align: left; line-height: 1.85; }
:where(#guidePage) .guideLayout { margin-bottom: 28px; }
:where(#guidePage) .guideContent .chapter { padding: 28px 0; }
:where(#guidePage) .guideContent .chapter + .chapter { margin-top: 0; }
:where(#guidePage) .chapterHead .elementH2 { font-size: clamp(24px,6.4vw,30px); line-height: 1.5; }
:where(#guidePage) .chapterHead .elementP { font-size: 14px; line-height: 1.85; }
:where(#guidePage) .guideContent .step, :where(#guidePage) .guideContent .step:nth-of-type(even), :where(#guidePage) .guideContent .step:has(.shotPair) { grid-template-columns: minmax(0,1fr); padding: 20px 16px; gap: 20px; }
:where(#guidePage) .step .elementH3 { font-size: 19px; line-height: 1.6; margin-bottom: 12px; }
:where(#guidePage) .step .elementLi { font-size: 14px; line-height: 1.85; }
:where(#guidePage) .guideContent .step .shot { max-width: 240px; }
:where(#guidePage) .guideContent .step .shotPair { max-width: 360px; gap: 12px; }
:where(#guidePage) .download { padding: 40px 0; }
:where(#guidePage) .download .elementH2 { font-size: clamp(20px,5.4vw,28px); line-height: 1.6; margin-bottom: 18px; }
:where(#guidePage) .storeNote { display: block; margin: 14px auto 0; font-size: 12px; line-height: 1.85; letter-spacing: 0; }
:where(#guidePage) .storeNote::before { display: inline-block; margin-right: 7px; vertical-align: middle; }
:where(#guidePage) .siteFooter { padding-top: 36px; }
:where(#guidePage) .footerLinks { gap: 12px 18px; margin-top: 24px; }
}
@media screen and (max-width: 380px) {
:where(#guidePage) .toc { grid-template-columns: 1fr; }
:where(#guidePage) .siteHeader .md_container { flex-wrap: wrap; justify-content: center; gap: 0 16px; padding-top: 10px; }
:where(#guidePage) .headerNav a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ヘッダーメニュー共通化に伴うスマホ表示（2026-11-10）：トップと同じくロゴの下にメニューを並べる */
@media screen and (max-width: 680px) {
:where(#guidePage) .siteHeader .md_container { flex-direction: column; flex-wrap: nowrap; gap: 6px; padding-top: 12px; }
:where(#guidePage) .headerNav { width: 100%; max-width: 400px; justify-content: space-between; gap: 8px; }
:where(#guidePage) .headerNav :where(.elementA) { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; font-size: 12px; letter-spacing: 0; white-space: nowrap; }
}