/* ■ 共通 */
/* ◆ ベース */
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.8}
a{color:inherit;text-decoration:none}
.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}
.skip-link{position:absolute;top:-50px;left:16px;z-index:100;background:#fff;padding:10px 16px}
.skip-link:focus{top:10px}
.eyebrow{margin:0 0 12px;color:var(--gold-dark);font-size:var(--fs-sm);letter-spacing:.22em;text-transform:uppercase}
.ui-icon{display:block;width:32px;height:32px;flex:none}
.heading-phrase{display:inline-block}
.mobile-only{display:none}
/* ◆ ボタン（ホバーで色が左から流れて入れ替わり、矢印が右へ動く） */
.button{min-height:48px;padding:12px 24px;display:inline-flex;justify-content:center;align-items:center;gap:12px;border:1px solid transparent;border-radius:999px;background-repeat:no-repeat;background-position:left center;background-origin:border-box;background-size:0 100%;font-size:var(--fs-md);font-weight:600;line-height:1.4;text-align:center;transition:background-size .4s ease,background-color 0s,color .3s,border-color .3s}
.button:hover{background-size:100% 100%;transition:background-size .4s ease,background-color 0s .4s,color .3s,border-color .3s}
.button span[aria-hidden]{display:inline-block;transition:transform .3s}
.button:hover span[aria-hidden]{transform:translateX(4px)}
.button:focus-visible{outline:2px solid #536b7d;outline-offset:4px}
.button--dark{background-color:var(--navy);background-image:linear-gradient(var(--gold-light),var(--gold-light));color:#fff}
.button--dark:hover{background-color:var(--gold-light);color:#251e15}
.button--gold{background-color:var(--gold-light);background-image:linear-gradient(var(--navy),var(--navy));color:#251e15}
.button--gold:hover{background-color:var(--navy);color:#fff}
.button--outline{border-color:#b8a893;background-image:linear-gradient(var(--navy),var(--navy));color:var(--ink)}
.button--outline:hover{border-color:var(--navy);background-color:var(--navy);color:#fff}
/* ◆ ヘッダー */
.site-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid rgba(230,222,211,.7)}
.site-header__inner{width:var(--header-w);min-height:var(--header-h);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand__mark{width:38px;height:30px;fill:none;stroke:#193047;stroke-width:1.5;stroke-linejoin:round;flex:none}
.brand__text{display:grid;line-height:1.25}
.brand__text strong{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:.06em}
.brand__text small{font-size:8px;letter-spacing:.2em;color:var(--muted)}
.site-nav{display:flex;align-items:center;gap:24px;font-size:13px;white-space:nowrap}
.site-nav>a:not(.button){background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:color .25s,background-size .3s ease}
.site-nav>a:not(.button):hover{background-size:100% 1px;color:var(--gold-dark)}
.site-nav__cta{min-height:46px;padding:12px 22px;font-size:inherit}
.nav-toggle{display:none}
/* ◆ セクション見出し */
.section{padding:var(--space-section) var(--space-x)}
.section-heading{max-width:900px;margin:0 auto var(--space-heading);text-align:center}
.section-heading :is(h1,h2){margin:0 0 18px;font:500 var(--fs-h2)/1.65 var(--font-display);letter-spacing:.06em}
.section-heading>p:last-child:not(.eyebrow){margin:0;color:var(--ink-soft);font-size:var(--fs-md);line-height:2}
.text-link{display:table;margin:32px auto 0;padding-bottom:4px;border-bottom:1px solid #9b8a76;font-size:var(--fs-md);transition:color .25s,border-color .25s}
.text-link span[aria-hidden]{display:inline-block;transition:transform .3s}
.text-link:hover{border-color:var(--gold-dark);color:var(--gold-dark)}
.text-link:hover span[aria-hidden]{transform:translateX(4px)}
/* ◆ 商品カード */
.product-card{min-width:0;scroll-margin-top:24px}
.product-card__image{position:relative;display:block;overflow:hidden;aspect-ratio:9/14;border:1px solid var(--line);border-radius:5px;background:#f0ece5;box-shadow:0 12px 28px rgba(57,43,27,.09)}
.product-card__image img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s}
.product-card__image:hover img{transform:scale(1.025)}
.product-card__body{padding:18px 2px 0}
.product-card :is(h2,h3){margin:4px 0;font:500 var(--fs-h3-l)/1.4 var(--font-display)}
.product-card__category{margin:5px 0 10px;color:var(--muted);font-size:13px}
.product-card__body>p:not(.product-card__category){margin:0 0 16px;color:var(--muted);font-size:var(--fs-md);line-height:1.9}
.product-card .button{width:100%;margin-top:10px;min-height:44px}
/* ◆ 料金カード */
.plan-card{position:relative;display:flex;flex-direction:column;padding:36px 28px 28px;border:1px solid var(--line);border-radius:6px;background:#fff;box-shadow:0 10px 30px rgba(45,34,22,.05)}
.plan-card--recommended{border-color:var(--gold-line);transform:translateY(-10px);box-shadow:0 16px 36px rgba(113,81,34,.12)}
.plan-card h3{margin:0 0 10px;font:500 var(--fs-h3-l)/1.5 var(--font-display);text-align:center}
.plan-card p{margin:0;color:var(--muted);text-align:center}
.plan-card__badge{position:absolute;top:-16px;left:50%;transform:translateX(-50%);padding:5px 34px;border-radius:999px;background:#bc9349;color:#fff;font-size:var(--fs-sm);letter-spacing:.12em;white-space:nowrap}
.plan-card .plan-card__type{margin-bottom:8px;color:#7c694a;font-size:var(--fs-sm)}
.plan-card .plan-card__intro{min-height:47px;font-size:13px;line-height:1.8}
.plan-card .plan-card__price{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:baseline;margin:22px 0;color:var(--ink);font:500 40px/1.4 var(--font-display);white-space:nowrap}
.plan-card__price::before{content:""}
.plan-card__price small{margin-left:4px;font:400 var(--fs-sm)/1.6 var(--font-body);text-align:left}
.plan-card ul{width:80%;min-height:184px;margin:0 auto 24px;padding:22px 0 0;color:var(--ink-soft);font-size:var(--fs-md);line-height:2.2;list-style:none}
.plan-card li{position:relative;padding-left:20px}
.plan-card li::before{content:'✓';position:absolute;left:0;color:var(--gold-mid)}
.plan-card .plan-card__price:has(+ ul){margin-bottom:0;padding-bottom:22px;border-bottom:1px solid var(--line)}
.plan-card .plan-card__initial{margin:-8px 0 20px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.9}
.plan-card .button{margin-top:auto}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid);max-width:1180px;margin:60px auto 0;align-items:stretch}
.plan-notice{min-width:0;max-width:1180px;margin:44px auto 0;padding:24px 36px 22px;border:1px solid #d4c7b0;border-radius:4px;text-align:left}
.plan-notice legend{margin-left:8px;padding:0 14px;font-size:13px;letter-spacing:.14em;color:var(--ink)}
.plan-notice dl{margin:0;font-size:var(--fs-sm);line-height:1.9;color:var(--muted);text-wrap:pretty}
.plan-notice dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:7px 0}
.plan-notice dl div+div{border-top:1px solid var(--line)}
.plan-notice dt{color:var(--ink);font-weight:700}
.plan-notice dd{margin:0}
.plan-notice dd a{color:var(--gold-dark);text-decoration:underline}
/* ◆ パンくず */
.list-hero{padding:32px var(--space-x) 0;background:linear-gradient(180deg,#f8f5ef,var(--paper))}
.list-hero .section-heading{margin-bottom:0;padding:42px 0 18px}
.form-field{display:grid;gap:7px;color:var(--ink);font-size:var(--fs-md)}
.form-field__label{font-weight:600}
.form-control{width:100%;min-height:46px;padding:11px 13px;border:1px solid #d9d0c4;border-radius:5px;background:#fff;color:var(--ink);font:inherit;line-height:1.5}
.form-control:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.form-control::placeholder{color:#91877d}
.form-field__label em{padding:2px 7px;border-radius:3px;background:var(--alert);color:#fff;font-size:var(--fs-xs);font-style:normal;font-weight:500}
.form-field__label small{color:var(--muted);font-size:var(--fs-xs);font-weight:400}
textarea.form-control{min-height:140px;resize:vertical}
.form-error{min-height:0;color:var(--alert);font-size:var(--fs-sm);line-height:1.5}
.form-error:empty{display:none}
.form-note{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.7}
.breadcrumbs{display:flex;gap:10px;max-width:1180px;margin:auto;color:var(--muted);font-size:var(--fs-sm)}
.breadcrumbs a:hover{color:var(--gold-dark)}
/* ◆ 写真つきCTA */
.sales-photo-cta{position:relative;isolation:isolate;overflow:hidden;text-align:center;background:var(--cream)}
.sales-photo-cta>img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover}
.sales-photo-cta::before{content:'';position:absolute;z-index:-1;inset:0}
.sales-photo-cta>div{max-width:1180px;margin:auto;padding:60px 24px}
.sales-photo-cta h2{margin:0 0 24px;font:500 var(--fs-h2-s)/1.8 var(--font-display);letter-spacing:.05em}
.sales-photo-cta p{margin:0 0 24px;font-size:var(--fs-md);line-height:2}
.sales-photo-cta .button{min-width:280px}
.sales-photo-cta--dark{color:#fff;background:var(--navy)}
.sales-photo-cta--dark .eyebrow{color:var(--gold-light)}
.sales-photo-cta--dark>img{object-position:center 38%}
.sales-photo-cta--dark::before{background:linear-gradient(90deg,rgba(23,43,62,.77),rgba(23,43,62,.6))}
.sales-photo-cta--light::before{background:linear-gradient(90deg,rgba(255,253,250,.12),rgba(255,253,250,.92) 32%,rgba(255,253,250,.94) 70%,rgba(255,253,250,.12))}
/* ◆ よくある質問 */
.faq-list{max-width:900px;margin:auto;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{position:relative;padding:24px 44px 24px 4px;cursor:pointer;list-style:none;font-size:var(--fs-lg);line-height:1.8}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--gold-dark);font-size:22px}
.faq-list details[open] summary::after{content:'−'}
.faq-list details p{margin:0;padding:0 44px 24px 4px;color:var(--muted);font-size:var(--fs-md);line-height:2}
/* ◆ フッター */
.site-footer{padding:44px 24px 28px;border-top:1px solid var(--line);background:#f5f2ec}
.site-footer__inner{max-width:1180px;margin:auto;text-align:center}
.brand--footer{margin-bottom:18px}
.site-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:28px;margin:6px 0 24px;font-size:var(--fs-sm)}
.site-footer nav a,.site-footer small a{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:color .25s,background-size .3s ease}
.site-footer nav a:hover{background-size:100% 1px}
.site-footer .site-footer__legal{gap:20px;margin:-8px 0 20px;font-size:var(--fs-xs)}
.site-footer small a{background-size:100% 1px}
.site-footer nav a:hover,.site-footer small a:hover{color:var(--gold-dark)}
.site-footer p{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:0}
.site-footer small{color:#776f65;font-size:var(--fs-xs)}
/* ◆ ページトップへ戻るボタン */
.page-top{position:fixed;z-index:30;right:20px;bottom:20px;width:44px;height:44px;padding:0;border:1px solid var(--gold);border-radius:50%;background:var(--paper);color:var(--gold);font:400 18px/1 var(--font-body);cursor:pointer;box-shadow:var(--shadow);transition:background-color .2s,color .2s}
.page-top[hidden]{display:none}
.page-top:is(:hover,:focus-visible){background:var(--navy);border-color:var(--navy);color:#fff}
.page-top:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* ◆ 共通パーツ（TOPと下層で使う） */
.promise-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(1240px,calc(100% - 80px));margin:auto;padding:28px 0;border-bottom:1px solid var(--line)}
.promise-strip>div{display:flex;align-items:center;gap:16px;height:49px;padding:0 16px;border-right:1px solid var(--line)}
.promise-strip>div:last-child{border-right:0}
.promise-strip .ui-icon{width:34px;height:34px;color:var(--navy)}
.promise-strip p{margin:0;font-size:var(--fs-md);line-height:1.75}
.recommend-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid);max-width:1180px;margin:auto}
.recommend-grid article{overflow:hidden;border-radius:5px;background:rgba(255,255,255,.94);box-shadow:0 10px 28px rgba(44,34,22,.05)}
.recommend-grid img{width:100%;height:228px;object-fit:cover}
.recommend-grid article>div{padding:var(--pad-card);text-align:center}
.recommend-grid h3{margin:0 0 12px;font:500 var(--fs-h3-m)/1.7 var(--font-display)}
.recommend-grid p{margin:0;color:var(--muted);font-size:var(--fs-md);line-height:1.9}
.value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-grid);max-width:1180px;margin:auto}
.value-grid article{padding:var(--pad-card);border:1px solid var(--line);border-radius:5px;background:linear-gradient(150deg,#fff,#fdfbf7);text-align:center}
.value-grid .ui-icon{width:40px;height:40px;margin:0 auto 18px;color:var(--gold-mid)}
.value-grid h3{margin:0 0 12px;font:500 var(--fs-h3-s)/1.8 var(--font-display)}
.value-grid p{margin:0;color:var(--muted);font-size:var(--fs-md);line-height:1.9}
.flow-grid{--flow-gap:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--flow-gap);max-width:1180px;margin:auto;padding:0;list-style:none}
.flow-grid li{position:relative}
.flow-grid li:not(:last-child)::after{content:'›';position:absolute;left:100%;top:50%;width:var(--flow-gap);transform:translateY(-50%);color:#c7bba7;font-size:26px;line-height:1;text-align:center}
.flow-grid li>span{display:block;margin-bottom:10px;color:#a38b65;font:500 36px/1.3 var(--font-display)}
.flow-grid h3{margin:0 0 12px;font:500 var(--fs-h3-s)/1.7 var(--font-display)}
.flow-grid p{min-height:54px;margin:0 0 20px;color:var(--muted);font-size:var(--fs-md);line-height:1.9}
.flow-grid img{width:100%;height:170px;border-radius:4px;object-fit:cover}
.flow-grid li:first-child img{object-position:center top}
.section--flow{background:var(--paper)}
.section--faq{background:#f9f8f5}
.section-cta{display:flex;width:fit-content;margin:40px auto 0}
.flow-grid--steps li{padding:26px 22px;border:1px solid var(--line);border-radius:5px;background:#fff}
.flow-grid--steps p{min-height:0;margin:0}
.flow-note{max-width:900px;margin:40px auto 0;color:var(--muted);font-size:var(--fs-md);line-height:2;text-align:center;text-wrap:pretty}
/* ◆ PC・スマホの画面枠（TOPと商品詳細で使う） */
.devices{position:relative;z-index:2;min-width:0;width:100%;height:550px;pointer-events:none}
.devices__pc{position:absolute;top:42px;left:0;width:100%;margin:0;padding:9px;border:1px solid #242424;border-radius:9px;background:#222;box-shadow:0 22px 42px rgba(76,62,42,.22)}
.devices__pc img{width:100%;height:auto;aspect-ratio:1440/836;border-radius:2px}
.devices__sp{position:absolute;right:0;bottom:10px;width:174px;margin:0;padding:6px;border:1px solid #242424;border-radius:22px;background:#222;box-shadow:0 17px 32px rgba(36,31,25,.28)}
.devices__sp img{width:100%;height:auto;aspect-ratio:390/792;border-radius:16px}
/* ◆ 一覧のカード（テンプレート一覧・関連テンプレートで使う） */
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;row-gap:48px}
.catalog-grid .product-card{display:flex;flex-direction:column}
.catalog-grid .product-card__image{width:100%;flex:none}
.catalog-grid .product-card__body{display:flex;flex:1;flex-direction:column}
.catalog-card__description{min-height:3.8em}
.catalog-card__footer{margin-top:auto;padding-top:2px}
.catalog-card__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.catalog-card__actions .button{min-height:40px;padding:9px 8px;font-size:var(--fs-xs)}
/* ◆ 新着情報（TOP・マイページは日付と題名だけ／一覧は要約つき／詳細は本文） */
.news-compact,.news-list{display:grid;margin:0;padding:0;border-top:1px solid var(--line);list-style:none}
.news-compact li,.news-list li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:4px 24px;border-bottom:1px solid var(--line)}
.news-compact li{padding:14px 4px}
.news-list li{padding:20px 4px}
.news-compact time,.news-list time{color:var(--muted);font-size:var(--fs-md);line-height:1.8}
.news-compact a,.news-list h3 a{font-size:var(--fs-md);font-weight:500;transition:color .25s}
.news-compact a:hover,.news-list h3 a:hover{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}
.news-list h3{margin:0 0 4px;font:500 var(--fs-h3-s)/1.6 var(--font-display)}
.news-list p{margin:0;color:var(--ink-soft);font-size:var(--fs-md);line-height:1.8}
.news-article{max-width:820px;margin:0 auto}
.news-article time{display:block;color:var(--muted);font-size:var(--fs-md)}
.news-article h1{margin:6px 0 24px;font:500 var(--fs-h2-s)/1.6 var(--font-display);letter-spacing:.04em}
.news-article p{margin:0 0 1.2em;font-size:var(--fs-lg);line-height:2}
.news-article__links{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}