/* Generated by build.py from src/styles.css. Do not edit directly. */
/* Source: 公開原稿の画像表現を保持し、ページ構成・本文・動作をコードで管理する。 */
:root { color-scheme: light; --sage: #738b72; --paper: #eaf1e8; --line: #06c654; --section-gap: min(4vw,16px); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { color: #333; background: #fff; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-weight: 500; line-height: 1.6; overflow-x: clip; }
button, summary { font: inherit; }
button { cursor: pointer; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #243c30; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lp-main { padding-bottom: 100px; }
.code-panel, .image-reference { width: 100%; margin: 0 auto; position: relative; }
.original-artwork, .image-reference img { display: block; width: 100%; height: auto; }
.native-profile { display: block; width: 100%; height: auto; }
.artwork-components { display: block; width: 100%; height: auto; }
.profile-body { font-family: "Reset Profile Body"; font-kerning: none; }
.profile-name { font-family: "Reset Profile Name"; font-kerning: none; }
.profile-about { font-family: "Reset Profile About"; font-kerning: none; }
.profile-body, .profile-name, .profile-about { font-synthesis: none; font-variant-ligatures: none; }
.panel-gap { margin-bottom: var(--section-gap); }
/* 字形・縁取り・角度を保持。文字へのscaleX/scaleYや近似背景は使わない。 */
.cta-wrap { text-align: center; padding: 0 16px var(--section-gap); }
.body-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5em; width: 320px; max-width: 88.25%; min-height: 70.2px; padding: 13px 12px; border: 0; border-radius: 80px; background: var(--line); color: #fff; box-shadow: 0 4px 0 #049d43; font-size: min(4vw,16px); font-weight: 700; line-height: 1.5; transition: filter .15s; }
.body-line-icon { width: 1.5em; height: 1.5em; flex: none; fill: currentColor; }
.body-cta-copy { display: flex; flex-direction: column; align-items: center; }
.body-cta small { font-size: inherit; }
.body-cta:hover, .fixed-cta button:hover { filter: brightness(1.06); }
/* 公開画面390pxでの画像実測: 292.5×78.04px、下端約17px。 */
.fixed-cta { position: fixed; bottom: calc(30px - 3.335vw); left: 50%; transform: translateX(-50%); width: 75vw; z-index: 30; }
.fixed-cta button { display: block; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.fixed-cta img { display: block; width: 100%; height: auto; }
.fixed-cta-components { display: block; width: 100%; height: auto; }
/* コード版のみ: 元のスマホ寸法を保ち、固定ボタンの画面外切れと末尾の重なりを防ぐ。 */
.code-reproduction { --fixed-cta-width: 75vw; --fixed-cta-bottom: max(0px, calc(30px - 3.335vw)); }
.code-reproduction .fixed-cta { width: var(--fixed-cta-width); bottom: var(--fixed-cta-bottom); }
.code-reproduction .fixed-cta[hidden] { display: none; }
.code-reproduction .lp-main { padding-bottom: max(100px, calc(var(--fixed-cta-width) * 0.266796875 + var(--fixed-cta-bottom) + 16px)); }
.faq-section > h2 { margin: 0; padding: 1em; text-align: center; color: #fff; background: var(--sage); font-size: 24px; font-weight: 700; }
.faq-container { margin: 0; padding: 10px; background: var(--paper); font-family: "Hiragino Sans", Meiryo, sans-serif; }
.accordion { width: 100%; margin: auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px #0000001a; padding: 10px; }
.faq-item { border-bottom: 1px solid #ccc; padding: 14px 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { list-style: none; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 17px; font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sage); color: #fff; font-family: sans-serif; font-weight: 700; line-height: 28px; }
.faq-answer { display: flex; gap: 12px; padding: 8px 8px 0 32px; font-size: 15px; color: #444; line-height: 1.6; }
.faq-answer p { margin: 0; }
.store-info { padding: 20px; background: var(--paper); color: #000; font-family: "Hiragino Sans", Meiryo, sans-serif; }
.info-inner { max-width: 600px; margin: auto; }
.store-info h2 { font-size: 20px; border-left: 4px solid var(--sage); padding-left: 10px; margin: 0 0 20px; }
.info-row { margin-bottom: 16px; }
.info-row h3 { font-size: 16px; margin: 0 0 6px; }
.info-row p { color: var(--sage); font-size: 16px; line-height: 1.5; margin: 0; }
.map-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; width: 100%; max-width: 600px; height: 450px; margin: 0; background: #f0f0ed; color: #7a8078; text-align: center; padding: 24px; border: 1px solid #ddd; }
.map-placeholder > span { font-size: 28px; }
.map-placeholder small { font-size: 13px; }
.affiliates { max-width: 800px; margin: auto; padding: 20px; color: #333; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.affiliates > h2 { display: table; background: #60896e; color: #fff; font-size: 18px; font-weight: 400; padding: 10px 20px; margin: 0 auto 30px; }
.category-title { text-align: center; color: #60896e; font-size: 24px; font-weight: 400; margin: 40px 0 20px; }
.shop-item { width: 100%; display: flex; gap: 20px; text-align: left; align-items: flex-start; border: 0; border-bottom: 1px solid #eee; background: transparent; color: inherit; padding: 0 0 20px; margin-bottom: 20px; }
.shop-item img { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: 4px; flex: none; }
.shop-item > span { flex: 1; min-width: 0; }
.shop-item strong { display: block; font-size: 16px; line-height: 1.4; margin: 0 0 5px; }
.shop-item span span { display: block; color: #666; font-size: 14px; line-height: 1.6; }
.demo-dialog { width: min(400px,calc(100% - 32px)); border: 0; border-radius: 16px; padding: 28px; color: #344138; box-shadow: 0 16px 80px #0003; }
.demo-dialog::backdrop { background: #17271bcc; }
.demo-dialog h2 { font-size: 20px; margin: 0 0 14px; }
.demo-dialog p { font-size: 15px; line-height: 1.8; }
.dialog-close { width: 100%; border: 0; border-radius: 8px; padding: 12px; background: var(--sage); color: #fff; font-weight: 700; }
@media (min-width: 768px) { .store-info h2 { font-size: 22px; } .info-row h3, .info-row p { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }