/*
Theme Name: ARDEO Store
Theme URI: https://ardeo.jp/
Description: ARDEO Creative Studio — 制作サービス・デジタル商品・グッズのオンラインストア
Author: ARDEO Creative Studio
Template: twentytwentyfive
Version: 9.89.3
Text Domain: ardeo-store
*/
/* ===== 色は3つだけ。装飾色は使わない ===== */
:root{
--paper:#F3F0EA; /* 生成りの紙（実測：トンマナ #F2EFEB の型） */
--ink:#17140F; /* ロゴ #231815 と同系の温かい黒 */
--ember:#F0421A; /* 朱＝「燃える」。CTAとキャッチの1語だけに使う */
--line:#DDD8CF;
--sub:#6F6A63;
--ghost:#E9E4DB; /* 背景の巨大英字 */
--bg:var(--paper);
--accent:var(--ember);
--w:1180px;
}
html{scroll-behavior:smooth}
body{
color:var(--ink);
background:var(--bg);
font-family:"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
font-size:15px; line-height:1.85; letter-spacing:.01em;
font-feature-settings:"palt" 1;
-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
/* ===== ヘッダー ===== */
.ardeo-head{position:sticky;top:0;z-index:999;background:rgba(243,240,234,.94);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line)}
.ardeo-head__inner{max-width:var(--w);margin:0 auto;padding:18px 24px;
display:flex;align-items:center;gap:24px}
.ardeo-logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.ardeo-logo img{height:24px;width:auto}
.ardeo-head__spacer{flex:1}
.ardeo-head__util{display:flex;align-items:center;gap:24px;font-size:12.5px}
.ardeo-head__util a{text-decoration:none;color:var(--sub)}
.ardeo-head__util a:hover{color:var(--ink)}
.ardeo-cart{display:inline-flex;align-items:center;background:var(--ink);
color:#fff!important;padding:9px 22px;font-weight:600;font-size:12.5px;border-radius:5px}
.ardeo-cart:hover{opacity:.82}
/* グローバルナビ */
.ardeo-nav{background:var(--ink)}
.ardeo-nav ul{max-width:var(--w);margin:0 auto;padding:0 24px;
display:flex;list-style:none}
.ardeo-nav li{flex:1}
.ardeo-nav a{display:block;padding:15px 8px;text-align:center;color:#fff;
text-decoration:none;font-size:13px;font-weight:600;line-height:1.4;
letter-spacing:.02em;transition:.15s}
.ardeo-nav a small{display:block;font-family:"Inter",sans-serif;font-size:8.5px;
font-weight:400;opacity:.45;letter-spacing:.2em;margin-top:4px}
.ardeo-nav a:hover{background:rgba(255,255,255,.1)}
/* ===== ヒーロー ===== */
.ardeo-hero{position:relative;overflow:hidden}
.ardeo-hero img{width:100%;object-fit:cover;max-height:520px}
.ardeo-hero__copy{position:absolute;inset:0;display:flex;align-items:center}
.ardeo-hero__inner{max-width:var(--w);margin:0 auto;padding:0 24px;width:100%}
.ardeo-hero h1{font-size:clamp(26px,3.2vw,42px);line-height:1.45;font-weight:700;
margin:0 0 20px;letter-spacing:-.02em;color:var(--ink)}
.ardeo-hero p{font-size:15px;color:#444;margin:0 0 28px;max-width:28em;line-height:1.9}
.ardeo-btn{display:inline-block;background:var(--ember);color:#fff;
text-decoration:none;padding:16px 42px;font-weight:700;font-size:14.5px;
letter-spacing:.02em;border-radius:5px;transition:.18s}
.ardeo-btn:hover{background:#D1330F;transform:translateY(-1px)}
.ardeo-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.ardeo-btn--ghost:hover{background:#fff;color:var(--ink)}
/* ===== セクション ===== */
.ardeo-sec{max-width:var(--w);margin:0 auto;padding:80px 24px}
.ardeo-sec--soft{background:#EAE6DE;max-width:none}
.ardeo-sec--soft > *{max-width:var(--w);margin-left:auto;margin-right:auto}
.ardeo-sechead{margin-bottom:44px;padding-bottom:18px;
border-bottom:1px solid var(--line);
display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.ardeo-sechead h2{font-size:24px;font-weight:700;margin:0;letter-spacing:-.02em;
line-height:1.5;color:var(--ink)}
.ardeo-sechead h2 em{font-style:normal;color:inherit}
.ardeo-sechead small{font-family:"Inter",sans-serif;font-size:10.5px;
letter-spacing:.22em;color:var(--sub);font-weight:500;order:-1;width:100%;
margin-bottom:6px}
.ardeo-sechead p{color:var(--sub);font-size:13.5px;margin:0}
/* 特集帯 */
.ardeo-feature{background:var(--ink);color:#fff;padding:46px 48px;margin-bottom:44px;
display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.ardeo-feature__txt{flex:1;min-width:260px}
.ardeo-feature small{display:block;font-family:"Inter",sans-serif;font-size:10px;
letter-spacing:.24em;color:rgba(255,255,255,.5);font-weight:500;margin-bottom:12px}
.ardeo-feature h3{font-size:clamp(19px,2vw,25px);margin:0 0 12px;font-weight:700;
line-height:1.6;letter-spacing:-.015em}
.ardeo-feature p{margin:0;color:rgba(255,255,255,.72);font-size:13.5px}
/* ===== 商品グリッド ===== */
.ardeo-grid{display:grid;gap:1px;background:var(--line);
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
border:1px solid var(--line)}
.ardeo-card{background:var(--paper);transition:.2s;display:flex;flex-direction:column}
.ardeo-card:hover{background:#FBF9F5}
.ardeo-card__thumbwrap{position:relative;display:block;text-decoration:none}
.ardeo-card__thumb{aspect-ratio:4/3;overflow:hidden;background:#f4f4f4}
.ardeo-card__thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.ardeo-card:hover .ardeo-card__thumb img{transform:scale(1.04)}
.ardeo-card__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.ardeo-card__copy{font-size:12px;color:var(--sub);font-weight:400;
line-height:1.75;margin:0 0 10px}
.ardeo-card__name{font-size:14.5px;font-weight:700;margin:0 0 16px;line-height:1.6;
text-decoration:none;color:var(--ink);flex:1;letter-spacing:-.01em}
.ardeo-card__name:hover{text-decoration:underline;text-underline-offset:3px}
.ardeo-card__foot{display:flex;align-items:center;justify-content:space-between;
gap:10px;padding-top:16px;border-top:1px solid #efefef;margin-top:auto}
.ardeo-card__price{font-family:"Inter",sans-serif;font-size:19px;font-weight:600;
color:var(--ink);white-space:nowrap;letter-spacing:-.02em}
.ardeo-card__price small{font-size:10px;color:#a5a5a5;font-weight:400;margin-left:4px;
letter-spacing:0}
.ardeo-card__btn{background:var(--ink);color:#fff!important;text-decoration:none;
padding:10px 18px;font-size:12px;font-weight:600;white-space:nowrap;
border:1px solid var(--ink);border-radius:5px;transition:.18s;cursor:pointer}
.ardeo-card__btn:hover{background:var(--ember);border-color:var(--ember)}
/* ===== サービス3枚 ===== */
.ardeo-svc{display:grid;gap:1px;background:var(--line);
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
border:1px solid var(--line)}
.ardeo-svc__item{position:relative;min-height:250px;display:flex;align-items:flex-end;
text-decoration:none;color:#fff;overflow:hidden;background:#fff}
.ardeo-svc__item img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;transition:.5s}
.ardeo-svc__item:hover img{transform:scale(1.04)}
.ardeo-svc__item::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%)}
.ardeo-svc__cap{position:relative;z-index:2;padding:26px}
.ardeo-svc__cap small{display:block;font-family:"Inter",sans-serif;font-size:9.5px;
letter-spacing:.22em;opacity:.7;margin-bottom:8px}
.ardeo-svc__cap b{font-size:18px;font-weight:700;display:block;margin-bottom:6px;
letter-spacing:-.01em}
.ardeo-svc__cap span{font-size:12px;opacity:.85;line-height:1.7}
/* ===== 4枚組 ===== */
.ardeo-pick{display:grid;gap:1px;background:var(--line);
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
border:1px solid var(--line)}
.ardeo-pick a{display:block;text-decoration:none;color:var(--ink);
padding:28px 24px;background:var(--paper);transition:.18s}
.ardeo-pick a:hover{background:#FBF9F5}
.ardeo-pick i{display:none}
.ardeo-pick b{display:block;font-size:14px;font-weight:700;margin-bottom:8px;
letter-spacing:-.01em}
.ardeo-pick span{font-size:12px;color:var(--sub);line-height:1.75}
/* ===== 信頼 ===== */
.ardeo-trust{display:grid;gap:1px;background:var(--line);
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
border:1px solid var(--line)}
.ardeo-trust div{background:var(--paper);padding:32px 20px;text-align:center}
.ardeo-trust div b{display:block;font-family:"Inter",sans-serif;font-size:32px;
font-weight:600;color:var(--ink);line-height:1.2;letter-spacing:-.03em;
margin-bottom:8px}
.ardeo-trust div span{font-size:12px;color:var(--sub)}
/* ===== フッター ===== */
.ardeo-foot{background:var(--ink);color:#fff;margin-top:0}
.ardeo-foot__about{max-width:var(--w);margin:0 auto;padding:64px 24px 44px;
display:grid;gap:48px;grid-template-columns:1.6fr 1fr 1fr}
.ardeo-foot h4{font-size:13px;font-weight:700;margin:0 0 18px;color:#fff}
.ardeo-foot h4 small{display:block;font-family:"Inter",sans-serif;font-size:9px;
letter-spacing:.22em;color:rgba(255,255,255,.4);font-weight:400;margin-top:5px}
.ardeo-foot p{font-size:12.5px;line-height:2;color:rgba(255,255,255,.7);margin:0 0 12px}
.ardeo-foot ul{list-style:none;padding:0;margin:0}
.ardeo-foot li{margin-bottom:11px}
.ardeo-foot a{color:rgba(255,255,255,.7);text-decoration:none;font-size:12.5px;
transition:.18s}
.ardeo-foot a:hover{color:#fff}
.ardeo-foot__bottom{border-top:1px solid rgba(255,255,255,.12);
padding:20px 24px;text-align:center;font-size:11.5px;color:rgba(255,255,255,.45)}
.ardeo-line{display:inline-flex;align-items:center;background:#06C755;
color:#fff!important;padding:12px 26px;font-weight:600;font-size:12.5px;
border:1px solid #06C755;border-radius:5px;text-decoration:none}
.ardeo-line:hover{background:#05a847;border-color:#05a847;color:#fff!important}
/* CTA内のLINEボタンも緑にする */
.ardeo-btn--line{background:#06C755!important;color:#fff!important}
.ardeo-btn--line:hover{background:#05a847!important}
.ardeo-btn--line:hover{background:#05a847!important}
/* ===== ブロックテーマの既定ヘッダー／フッターを隠す ===== */
body > header.wp-block-template-part,
body > footer.wp-block-template-part,
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part{display:none!important}
.wp-site-blocks{padding-top:0!important;margin-top:0!important}
body.admin-bar .ardeo-head{top:32px}
@media(max-width:782px){body.admin-bar .ardeo-head{top:46px}}
/* ===== WooCommerce ===== */
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce .single_add_to_cart_button, .wc-block-components-button{
background:var(--ink)!important;color:#fff!important;border-radius:0!important;
font-weight:600!important;border:0!important}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wc-block-components-button:hover{opacity:.85}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{color:var(--ink)!important;font-weight:600!important;
font-family:"Inter",sans-serif}
.woocommerce span.onsale{background:var(--ink)!important;border-radius:0!important}
/* ===== スマホ ===== */
@media(max-width:900px){
.ardeo-foot__about{grid-template-columns:1.4fr 1fr 1fr;gap:28px;padding:48px 20px 32px}
.ardeo-foot li{margin-bottom:8px}
.ardeo-hero img{max-height:380px}
}
@media(max-width:680px){
.ardeo-foot__about{grid-template-columns:1fr;gap:30px}
}
@media(max-width:768px){
.ardeo-hero{background:#fff}
.ardeo-hero img{max-height:230px;object-position:72% center}
.ardeo-hero__copy{position:static;display:block;padding:28px 0 8px}
.ardeo-hero__inner{padding:0 20px}
.ardeo-hero h1{font-size:22px}
.ardeo-hero p{font-size:13.5px;margin-bottom:22px}
.ardeo-nav ul{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0}
.ardeo-nav li{flex:0 0 auto;min-width:106px}
.ardeo-head__util a:not(.ardeo-cart){display:none}
.ardeo-head__inner{padding:14px 20px}
.ardeo-sec{padding:52px 20px}
.ardeo-sechead{margin-bottom:28px}
.ardeo-sechead h2{font-size:19px}
.ardeo-feature{padding:30px 24px;gap:22px}
.ardeo-grid{grid-template-columns:repeat(2,1fr)}
.ardeo-card__body{padding:14px}
.ardeo-card__copy{font-size:11px}
.ardeo-card__name{font-size:13px;margin-bottom:12px}
.ardeo-card__price{font-size:16px}
.ardeo-card__foot{flex-direction:column;align-items:stretch;gap:9px}
.ardeo-card__btn{text-align:center;padding:10px}
.ardeo-trust div b{font-size:26px}
.ardeo-btn{padding:14px 32px;font-size:13.5px}
}
/* ===== サービスページ ===== */
.svc-hero{position:relative;overflow:hidden;background:#f4f4f4}
.svc-hero img{width:100%;object-fit:cover;max-height:360px}
.svc-hero__copy{position:absolute;inset:0;display:flex;align-items:center;
background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 42%,rgba(255,255,255,0) 72%)}
.svc-hero__inner{max-width:var(--w);margin:0 auto;padding:0 24px;width:100%}
.svc-hero small{display:block;font-family:"Inter",sans-serif;font-size:10.5px;
letter-spacing:.24em;color:var(--sub);margin-bottom:12px;font-weight:500}
.svc-hero h1{font-size:clamp(24px,3vw,38px);font-weight:700;letter-spacing:-.02em;
line-height:1.45;margin:0 0 16px;color:var(--ink)}
.svc-hero p{font-size:14.5px;color:#444;margin:0;max-width:30em;line-height:1.9}
/* 課題リスト */
.svc-problems{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.svc-problems div{background:var(--paper);padding:26px 24px}
.svc-problems b{display:block;font-size:14.5px;font-weight:700;margin-bottom:9px;
letter-spacing:-.01em}
.svc-problems span{font-size:12.5px;color:var(--sub);line-height:1.8}
/* 料金表 */
.svc-price{width:100%;border-collapse:collapse;border:1px solid var(--line);font-size:13.5px}
.svc-price caption{text-align:left;font-size:15px;font-weight:700;padding:0 0 14px;
letter-spacing:-.01em}
.svc-price th{background:#fafafa;text-align:left;padding:13px 16px;font-weight:600;
border-bottom:1px solid var(--line);font-size:12.5px;color:var(--sub);white-space:nowrap}
.svc-price td{padding:15px 16px;border-bottom:1px solid #f0f0f0;vertical-align:top}
.svc-price tr:last-child td{border-bottom:0}
.svc-price .p{font-family:"Inter",sans-serif;font-weight:600;font-size:15px;
white-space:nowrap;letter-spacing:-.02em}
.svc-price .n{font-size:12px;color:var(--sub);line-height:1.7}
.svc-price--biz th{background:var(--ink);color:#fff}
/* 流れ */
.svc-flow{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));counter-reset:step}
.svc-flow div{background:var(--paper);padding:26px 22px;counter-increment:step}
.svc-flow div::before{content:"0" counter(step);display:block;
font-family:"Inter",sans-serif;font-size:11px;color:var(--sub);
font-weight:600;letter-spacing:.1em;margin-bottom:12px}
.svc-flow b{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.svc-flow span{font-size:12px;color:var(--sub);line-height:1.75}
/* CTA */
.svc-cta{background:var(--ink);color:#fff;padding:52px 48px;text-align:center}
.svc-cta h2{font-size:clamp(19px,2.2vw,26px);font-weight:700;margin:0 0 14px;
letter-spacing:-.015em;line-height:1.55}
.svc-cta p{color:rgba(255,255,255,.72);font-size:13.5px;margin:0 0 28px}
.svc-cta .ardeo-btn{margin:0 6px}
/* 汎用ページ本文 */
.page-body{max-width:900px;margin:0 auto;padding:70px 24px}
.page-body h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0 0 32px;
padding-bottom:18px;border-bottom:1px solid var(--line)}
.page-body h2{font-size:18px;font-weight:700;margin:38px 0 14px;letter-spacing:-.01em}
.page-body h3{font-size:15px;font-weight:700;margin:26px 0 10px}
.page-body p,.page-body li{font-size:14px;line-height:1.95}
.page-body ul{padding-left:1.3em}
.page-body li{margin-bottom:7px}
.page-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:13.5px}
.page-body th{background:#fafafa;text-align:left;padding:12px 14px;font-weight:600;
border:1px solid var(--line)}
.page-body td{padding:12px 14px;border:1px solid var(--line)}
.page-body a{color:var(--accent)}
@media(max-width:768px){
.svc-hero img{max-height:180px}
.svc-hero__copy{position:static;padding:24px 0 4px}
.svc-hero h1{font-size:20px}
.svc-cta{padding:36px 22px}
.svc-price th,.svc-price td{padding:11px 12px;font-size:12.5px}
.page-body{padding:44px 20px}
.page-body h1{font-size:22px}
}
/* ===== 会社概要 ===== */
.about-rep{display:grid;gap:40px;grid-template-columns:280px 1fr;align-items:start}
.about-rep__photo img{width:100%;display:block}
.about-rep__txt small{display:block;font-family:"Inter",sans-serif;font-size:10.5px;
letter-spacing:.24em;color:var(--sub);font-weight:500;margin-bottom:10px}
.about-rep__txt b{display:block;font-size:24px;font-weight:700;letter-spacing:-.01em;
margin-bottom:6px}
.about-rep__role{display:block;font-size:13px;color:var(--sub);margin-bottom:24px;
padding-bottom:20px;border-bottom:1px solid var(--line)}
.about-rep__txt p{font-size:14px;line-height:2;margin:0 0 14px}
.about-rep__note{border-left:2px solid var(--ink);padding-left:16px;
font-weight:600;color:var(--ink)}
.about-table{width:100%;border-collapse:collapse;border:1px solid var(--line);
font-size:13.5px;background:#fff}
.about-table th{background:#fafafa;text-align:left;padding:16px 20px;font-weight:600;
border-bottom:1px solid var(--line);white-space:nowrap;width:150px;
vertical-align:top;color:var(--sub);font-size:12.5px}
.about-table td{padding:16px 20px;border-bottom:1px solid var(--line);line-height:1.9}
.about-table tr:last-child th,.about-table tr:last-child td{border-bottom:0}
.about-table a{color:var(--accent)}
@media(max-width:768px){
.about-rep{grid-template-columns:1fr;gap:24px}
.about-rep__photo{max-width:200px}
.about-rep__txt b{font-size:20px}
.about-table th{width:auto;display:block;border-bottom:0;padding:14px 16px 4px}
.about-table td{display:block;padding:0 16px 14px;border-bottom:1px solid var(--line)}
}
/* ARDEOという名前について */
.about-name{display:grid;gap:44px;grid-template-columns:200px 1fr;align-items:start}
.about-name__mark{padding:28px;border:1px solid var(--line);display:flex;
align-items:center;justify-content:center;min-height:130px}
.about-name__mark img{width:100%;max-width:130px;height:auto}
.about-name__txt p{font-size:14px;line-height:2.1;margin:0 0 18px}
.about-name__txt p:last-child{margin-bottom:0}
.about-name__lead{font-size:16px!important;font-weight:700;letter-spacing:-.01em;
line-height:1.9!important;padding-bottom:18px;border-bottom:1px solid var(--line)}
@media(max-width:768px){
.about-name{grid-template-columns:1fr;gap:24px}
.about-name__mark{max-width:180px;padding:22px;min-height:auto}
.about-name__lead{font-size:15px!important}
}
/* ============================================================
デザイン強化（2026-09-05）
金島さん「ただ文字を入れただけ・デザイン性がない」への対応
手本＝quoitworks.com（実測：見出し80px・全高15,128px・画像190枚）
============================================================ */
/* --- 1. 見出しを画面を支配する大きさにする --- */
.ardeo-sechead{display:block;border-bottom:0;padding-bottom:0;margin-bottom:52px}
.ardeo-sechead small{display:block;font-family:"Inter",sans-serif;font-size:11px;
letter-spacing:.3em;color:var(--sub);font-weight:500;margin-bottom:18px;width:auto}
.ardeo-sechead h2{font-size:clamp(30px,5vw,64px);font-weight:700;letter-spacing:-.035em;
line-height:1.25;margin:0 0 18px}
.ardeo-sechead p{font-size:14px;color:var(--sub);margin:0;max-width:34em}
/* --- 2. 巨大な英語ラベル（背後に敷く） --- */
.ardeo-bigen{font-family:"Inter",sans-serif;font-size:clamp(64px,12vw,160px);
font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--ghost);
margin:0 0 -26px;pointer-events:none;user-select:none}
/* --- 3. スクロール連動のフェードイン --- */
.rv{opacity:0;transform:translateY(28px);
transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* --- 4. ヒーロー：全画面に近い高さ＋動画対応 --- */
.ardeo-hero{height:min(88vh,760px);min-height:520px}
.ardeo-hero img,.ardeo-hero video{width:100%;height:100%;object-fit:cover;max-height:none}
.ardeo-hero__copy{background:linear-gradient(90deg,
rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 40%,rgba(255,255,255,.1) 72%)}
.ardeo-hero h1{font-size:clamp(30px,5.4vw,68px);line-height:1.28;letter-spacing:-.04em;
font-weight:700;margin:0 0 24px}
.ardeo-hero p{font-size:clamp(13px,1.2vw,16px);margin-bottom:34px}
.ardeo-hero__scroll{position:absolute;left:24px;bottom:26px;z-index:3;
font-family:"Inter",sans-serif;font-size:10px;letter-spacing:.28em;color:var(--sub);
display:flex;align-items:center;gap:12px}
.ardeo-hero__scroll::after{content:"";width:44px;height:1px;background:var(--sub);
animation:scrl 2.2s ease-in-out infinite;transform-origin:left}
@keyframes scrl{0%,100%{transform:scaleX(.25);opacity:.4}50%{transform:scaleX(1);opacity:1}}
/* --- 5. 数字を主役にする（実績） --- */
.ardeo-num{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ardeo-num div{background:var(--paper);padding:44px 26px}
.ardeo-num b{display:block;font-family:"Inter",sans-serif;
font-size:clamp(42px,5.5vw,68px);font-weight:600;letter-spacing:-.05em;
line-height:1;margin-bottom:14px}
.ardeo-num b em{font-style:normal;font-size:.42em;font-weight:500;margin-left:3px;
letter-spacing:0}
.ardeo-num span{font-size:12.5px;color:var(--sub);line-height:1.7;display:block}
/* --- 6. 実績を大きく見せる（画像を主役に） --- */
.ardeo-works{display:grid;gap:2px;background:var(--line);border:1px solid var(--line)}
.ardeo-works--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.ardeo-works a{position:relative;display:block;overflow:hidden;background:#fff;
text-decoration:none;color:var(--ink);aspect-ratio:16/10}
.ardeo-works img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.ardeo-works a:hover img{transform:scale(1.05)}
.ardeo-works__cap{position:absolute;left:0;right:0;bottom:0;padding:26px;
background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.76));color:#fff}
.ardeo-works__cap small{display:block;font-family:"Inter",sans-serif;font-size:9.5px;
letter-spacing:.24em;opacity:.75;margin-bottom:8px}
.ardeo-works__cap b{font-size:17px;font-weight:700;letter-spacing:-.015em;display:block}
/* --- 7. ローディング --- */
#ardeo-load{position:fixed;inset:0;z-index:9999;background:var(--paper);
display:flex;align-items:center;justify-content:center;
transition:opacity .7s ease,visibility .7s}
#ardeo-load.off{opacity:0;visibility:hidden}
#ardeo-load img{width:120px;animation:ld 1.5s ease-in-out infinite}
@keyframes ld{0%,100%{opacity:.35;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
@media(max-width:768px){
.ardeo-hero{height:auto;min-height:0}
.ardeo-hero img,.ardeo-hero video{height:auto;max-height:230px}
.ardeo-hero__scroll{display:none}
.ardeo-sechead{margin-bottom:30px}
.ardeo-sechead h2{font-size:24px}
.ardeo-bigen{font-size:44px;margin-bottom:-14px}
.ardeo-num div{padding:28px 20px}
.ardeo-works--2{grid-template-columns:1fr}
}
/* ============================================================
ヒーロー v4 — aiship 型（実測：帯で囲むキャッチ／160px の背景英字／斜めの面）
============================================================ */
.ardeo-hero{background:var(--paper);height:min(86vh,720px);min-height:520px;
position:relative;overflow:hidden}
.ardeo-hero__ghost{position:absolute;left:-.04em;top:.08em;z-index:1;
font-family:"Inter",sans-serif;font-size:clamp(90px,16vw,230px);font-weight:800;
line-height:.85;letter-spacing:-.06em;color:var(--ghost);pointer-events:none;
user-select:none;white-space:nowrap}
.ardeo-hero__ghost span{display:block}
.ardeo-hero__ghost span+span{margin-left:.9em}
/* 斜めの面（右側）＝写真をここに載せる */
.ardeo-hero__visual{position:absolute;right:0;top:0;bottom:0;width:56%;z-index:2;
clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.ardeo-hero__visual img,.ardeo-hero__visual video{width:100%;height:100%;object-fit:cover;display:block}
.ardeo-hero__visual::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(243,240,234,.55) 0%,rgba(243,240,234,0) 32%)}
/* 帯で囲むキャッチ */
.ardeo-hero__copy{position:relative;z-index:3;background:none;height:100%;
display:flex;align-items:center}
.ardeo-hero__inner{max-width:var(--w);margin:0 auto;padding:0 24px;width:100%}
.ardeo-hero h1{margin:0 0 22px;font-size:0;line-height:0}
.ardeo-hero h1 .band{display:inline-block;background:var(--ink);color:var(--paper);
font-size:clamp(26px,3.9vw,50px);line-height:1.15;font-weight:700;
letter-spacing:-.03em;padding:.22em .5em .26em;margin:0 0 .28em}
.ardeo-hero h1 .band b{color:var(--ember);font-weight:inherit}
.ardeo-hero h1 .band+.band{margin-left:.8em}
.ardeo-hero p{font-size:clamp(13.5px,1.2vw,16px);color:var(--ink);margin:0 0 30px;
max-width:26em;line-height:1.95;font-weight:500}
.ardeo-hero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ardeo-hero__scroll{position:absolute;left:24px;bottom:26px;z-index:3;
font-family:"Inter",sans-serif;font-size:10px;letter-spacing:.28em;color:var(--sub);
display:flex;align-items:center;gap:12px}
.ardeo-hero__scroll::after{content:"";width:44px;height:1px;background:var(--sub);
animation:scrl 2.2s ease-in-out infinite;transform-origin:left}
/* 斜めの区切り（セクション間）＝aiship の斜線 */
.ardeo-sec--ink{background:var(--ink);color:var(--paper);max-width:none;
clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%);padding:calc(80px + 4vw) 24px 80px}
.ardeo-sec--ink > *{max-width:var(--w);margin-left:auto;margin-right:auto}
.ardeo-sec--ink .ardeo-sechead h2,.ardeo-sec--ink .ardeo-sechead small{color:var(--paper)}
.ardeo-sec--ink .ardeo-sechead p{color:rgba(243,240,234,.7)}
.ardeo-sec--ink .ardeo-svc,.ardeo-sec--ink .ardeo-pick{background:rgba(243,240,234,.18);border-color:rgba(243,240,234,.18)}
.ardeo-sec--ink .ardeo-pick a{background:var(--ink);color:var(--paper)}
.ardeo-sec--ink .ardeo-pick a:hover{background:#221E18}
.ardeo-sec--ink .ardeo-pick span{color:rgba(243,240,234,.65)}
.ardeo-sec--ink .ardeo-bigen{color:#2A241D}
@media(max-width:900px){
.ardeo-hero__visual{width:100%;clip-path:none;opacity:.35}
.ardeo-hero__visual::after{background:linear-gradient(180deg,rgba(243,240,234,.2),rgba(243,240,234,.85))}
}
@media(max-width:768px){
.ardeo-hero{height:auto;min-height:0;padding:36px 0 40px}
.ardeo-hero__ghost{font-size:72px}
.ardeo-hero h1 .band{font-size:22px;padding:.25em .5em}
.ardeo-hero h1 .band+.band{margin-left:0}
.ardeo-hero p{font-size:13px}
.ardeo-hero__scroll{display:none}
.ardeo-sec--ink{clip-path:polygon(0 18px,100% 0,100% 100%,0 100%);padding:70px 20px 52px}
}
.ardeo-btn--sm{padding:9px 20px;font-size:12.5px}
.ardeo-head__util .ardeo-line{padding:9px 18px;font-size:12.5px}
@media(max-width:768px){.ardeo-head__util .ardeo-line,.ardeo-head__util .ardeo-btn--sm{display:none}}
/* ===== 1920px で確認した5つの欠陥の修正（2026-09-05） ===== */
/* 1) 巨大英字：1行にして枠基準で置く。帯と重ねない */
.ardeo-hero__ghost{left:max(0px,calc((100vw - var(--w)) / 2 - .06em));top:.35em;
font-size:clamp(90px,10vw,170px)}
.ardeo-hero__ghost span,.ardeo-hero__ghost span+span{display:inline;margin:0}
/* 2) SCROLL を枠の左端に合わせる */
.ardeo-hero__scroll{left:max(24px,calc((100vw - var(--w)) / 2 + 24px))}
/* 3) ヘッダー右上ボタンの文字色（.ardeo-head__util a に負けていた） */
.ardeo-head__util .ardeo-btn,.ardeo-head__util .ardeo-line{color:#fff!important}
/* 4) 右側は人物写真ではなく制作物のモックアップ。斜め切りとグラデーションをやめる */
.ardeo-hero__visual{clip-path:none;width:50%;right:max(0px,calc((100vw - var(--w)) / 2 - 40px));
display:flex;align-items:center;justify-content:center;padding:40px 0 40px 20px}
.ardeo-hero__visual::after{display:none}
.ardeo-hero__visual img{object-fit:contain;height:auto;max-height:100%}
.ardeo-hero__visual video{object-fit:cover;height:100%}
@media(max-width:900px){.ardeo-hero__visual{position:static;width:100%;opacity:1;padding:0 20px 24px}}
/* ============================================================
文字階層を aiship の実測に合わせる（2026-09-05）
ghost 160px ／ h2 34px ／ h1 27px ／ 小見出し 28-22-18 ／ 本文 15 ／ p 12-13 ／ ラベル 10-11
※見出しを大きくして落差を潰していたのが誤り。落差は「巨大背景文字 vs 抑えた見出し」で作る
============================================================ */
body{font-size:15px;line-height:1.9}
.ardeo-sechead h2{font-size:34px!important;letter-spacing:-.015em;line-height:1.45;margin-bottom:14px}
.ardeo-sechead small{font-size:11px;letter-spacing:.28em;margin-bottom:14px}
.ardeo-sechead p{font-size:13px}
.ardeo-hero h1 .band{font-size:clamp(20px,2.1vw,27px)!important;line-height:1.3;
padding:.38em .75em .42em;letter-spacing:-.01em}
.ardeo-hero p{font-size:15px!important;line-height:1.95;margin-bottom:28px}
.ardeo-feature h3{font-size:28px!important;letter-spacing:-.01em}
.ardeo-feature p{font-size:13px}
.ardeo-card__copy{font-size:12px}
.ardeo-card__name{font-size:15px}
.ardeo-card__price{font-size:18px}
.ardeo-svc__cap b{font-size:22px!important}
.ardeo-svc__cap span{font-size:12px}
.ardeo-pick b{font-size:15px}
.ardeo-pick span{font-size:12px}
.ardeo-num b{font-size:50px!important;letter-spacing:-.04em} /* aiship の dd 50px に合わせる */
.ardeo-num span{font-size:12px}
.ardeo-trust div b{font-size:34px!important}
.ardeo-trust div span{font-size:12px}
.svc-hero h1{font-size:clamp(22px,2.4vw,30px)!important}
.svc-hero p{font-size:15px!important}
.svc-problems b{font-size:18px}
.svc-problems span{font-size:13px}
.svc-price{font-size:13px}
.svc-price .p{font-size:15px}
.svc-price .n{font-size:12px}
.svc-flow b{font-size:15px}
.svc-flow span{font-size:12px}
.svc-cta h2{font-size:28px!important}
.svc-cta p{font-size:13px}
.page-body h1{font-size:34px}
.page-body h2{font-size:22px}
.page-body h3{font-size:18px}
.page-body p,.page-body li{font-size:15px}
.about-rep__txt b{font-size:28px}
.about-rep__txt p{font-size:15px}
.about-name__lead{font-size:18px!important}
.about-name__txt p{font-size:15px}
.about-table{font-size:15px}
.about-table th{font-size:13px}
.ardeo-foot p,.ardeo-foot a{font-size:13px}
.ardeo-nav a{font-size:15px}
.ardeo-nav a small{font-size:10px}
.ardeo-head__util{font-size:13px}
@media(max-width:768px){
.ardeo-sechead h2{font-size:24px!important}
.ardeo-hero h1 .band{font-size:19px!important}
.ardeo-num b{font-size:38px!important}
}
/* ============================================================
流れる背景文字 ＝ aiship 実測（@keyframes flowing 90s linear infinite・160px・UL×2）
============================================================ */
.ardeo-hero__ghost{display:none}
.ardeo-marquee{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;user-select:none}
.ardeo-marquee__row{position:absolute;left:0;top:28px;display:flex;white-space:nowrap}
.ardeo-marquee__row--2{top:auto;bottom:18px}
.ardeo-marquee ul{display:flex;list-style:none;margin:0;padding:0;
animation:flowing 90s linear infinite;will-change:transform}
.ardeo-marquee__row--2 ul{animation-duration:110s;animation-delay:-40s}
.ardeo-marquee li{font-family:"Inter",sans-serif;font-weight:800;font-size:160px;line-height:1;
color:var(--ghost);letter-spacing:-.04em;padding-right:.45em}
.ardeo-marquee--ink{z-index:0}
.ardeo-marquee--ink .ardeo-marquee__row{top:50%;transform:translateY(-50%)}
.ardeo-marquee--ink li{color:#221D17}
.ardeo-sec--ink > .ardeo-sechead,.ardeo-sec--ink > .ardeo-svc{position:relative;z-index:1}
@keyframes flowing{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.ardeo-marquee ul{animation:none}}
@media(max-width:768px){.ardeo-marquee li{font-size:80px}.ardeo-marquee__row{top:12px}.ardeo-marquee__row--2{bottom:8px}}
/* ============================================================
判断を入れた修正（2026-09-05）「こうすれば良くなる」を言語化して適用
============================================================ */
/* 1) 数字セクションのバグ：数字のspanまで12pxにしていた */
.ardeo-num b span{font-size:inherit!important}
.ardeo-num > div > span{font-size:12px}
.ardeo-num b{font-family:"Bebas Neue","Inter",sans-serif;font-size:72px!important;
font-weight:400;letter-spacing:.01em;line-height:1}
.ardeo-num b em{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-size:.34em;
font-weight:700;margin-left:6px;letter-spacing:0}
/* 2) 書体＝「設定していない見た目」から「意図した書体」へ */
.ardeo-hero h1 .band,.ardeo-sechead h2,.ardeo-feature h3,.svc-hero h1,.svc-cta h2,
.about-rep__txt b,.page-body h1{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:900}
.ardeo-marquee li,.ardeo-bigen{font-family:"Bebas Neue","Inter",sans-serif;font-weight:400;
letter-spacing:.02em}
/* 3) キャッチ：1920px幅では27px×帯2本は断片に見える → 1行・40pxの帯1本で左を支える */
.ardeo-hero h1 .band{font-size:clamp(22px,2.15vw,40px)!important;line-height:1.35;
padding:.36em .7em .4em;letter-spacing:-.005em;white-space:normal;max-width:16em}
.ardeo-hero p{max-width:30em}
.ardeo-hero__inner{padding-right:0}
/* 4) 背景文字：内容ではなく模様。上1行・紙に近い色・コンデンス体で軽く */
.ardeo-marquee__row{top:26px}
.ardeo-marquee li{font-size:220px;color:#EBE7DF;padding-right:.3em;line-height:.9}
.ardeo-marquee--ink li{color:#221D17;font-size:180px}
/* 5) 右のモックアップを44%に。左右の重さを揃える */
.ardeo-hero__visual{width:44%;padding:56px 0 56px 24px}
/* 6) セクション見出し：Zen Kaku 900 で34pxでも立つ。ラベルとの距離を詰める */
.ardeo-sechead small{margin-bottom:10px}
.ardeo-sechead h2{letter-spacing:-.01em}
@media(max-width:768px){
.ardeo-hero h1 .band{font-size:20px!important;max-width:none}
.ardeo-marquee li{font-size:96px}
.ardeo-num b{font-size:48px!important}
}
/* 帯＝1本の中に「、」で割った2行。語の途中で折らない・単語だけの行を作らない */
.ardeo-hero h1 .band{font-size:clamp(24px,2.3vw,44px)!important;max-width:none;white-space:normal;
padding:.42em .7em .46em;line-height:1.3}
.ardeo-hero h1 .band .ln{display:block;white-space:nowrap}
/* 右のモックは枠の外（画面右端）まで抜けさせ、文字カラムを約700pxに */
.ardeo-hero__visual{right:0;width:46%;padding:48px 0 48px 16px}
.ardeo-hero__inner{max-width:var(--w)}
@media(max-width:1400px){.ardeo-hero__visual{width:44%}}
@media(max-width:768px){.ardeo-hero h1 .band{font-size:21px!important}.ardeo-hero h1 .band .ln{white-space:normal}}
/* ============================================================
数字 ＝ aiship 実測（dt 15px 700 が上 → dd 60px 字間3px → 単位 span 18px を直後に／枠なし・pad 0）
============================================================ */
.ardeo-num,.ardeo-bigen{display:none}
.ardeo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0 48px;margin:0;
padding-top:34px;border-top:1px solid var(--line)}
.ardeo-stats > div{margin:0;padding:0}
.ardeo-stats dt{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-size:15px;
font-weight:700;color:var(--ink);margin:0 0 14px;line-height:1.5}
.ardeo-stats dd{margin:0 0 12px;font-family:"Bebas Neue","Inter",sans-serif;font-size:60px;
font-weight:400;line-height:1;letter-spacing:3px;color:var(--ink);display:flex;
align-items:baseline;gap:6px}
.ardeo-stats dd .u{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-size:18px;
font-weight:700;letter-spacing:0}
.ardeo-stats p{margin:0;font-size:12px;color:var(--sub);line-height:1.8}
@media(max-width:900px){.ardeo-stats{grid-template-columns:repeat(2,1fr);gap:32px 24px}}
@media(max-width:480px){.ardeo-stats{grid-template-columns:1fr}.ardeo-stats dd{font-size:48px}}
/* ============================================================
v5 ヘッダー ＝ aiship 実測（75px・白・ロゴx20／ナビx512／右にボタン2＋連絡ブロック）
============================================================ */
.ardeo-head--ai{background:#fff;border-bottom:0;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.ardeo-head--ai .ardeo-head__inner,.ardeo-head--ai .ardeo-nav{display:none}
.hd-in{position:relative;height:75px;max-width:1920px;margin:0 auto}
.hd-logo{position:absolute;left:20px;top:11px;text-decoration:none;color:#303030;display:block}
.hd-logo small{display:block;font-size:10px;line-height:17px;letter-spacing:0;white-space:nowrap}
.hd-logo img{display:block;height:26px;margin-top:6px}
.hd-nav{position:absolute;left:512px;top:0;height:75px;display:flex;gap:34px;align-items:center}
.hd-nav a{font-size:16px;color:#303030;text-decoration:none;white-space:nowrap;font-weight:400}
.hd-nav a:hover{color:var(--ember)}
.hd-right{position:absolute;right:24px;top:0;height:75px;display:flex;align-items:center;gap:32px}
.hd-b1,.hd-b2{display:flex;align-items:center;justify-content:center;height:47px;padding:0 22px;
background:var(--ember);color:#fff!important;font-size:14px;font-weight:700;border-radius:5px;text-decoration:none}
.hd-b2{background:#06C755}
.hd-b1:hover{background:#D1330F}.hd-b2:hover{background:#05a847}
.hd-tel{display:block;width:216px;height:59px;background:var(--ink);color:#fff!important;border-radius:5px;
padding:7px 12px;box-sizing:border-box;text-decoration:none}
.hd-tel small{display:block;font-size:10px;line-height:1.4;opacity:.8}
.hd-tel b{display:block;font-size:19px;letter-spacing:.02em;line-height:1.5}
.hd-cart{font-size:12px;color:#303030;text-decoration:none;white-space:nowrap}
@media(max-width:1500px){.hd-right{gap:16px}.hd-nav{left:380px;gap:22px}.hd-nav a{font-size:14px}}
@media(max-width:1250px){.hd-tel{display:none}}
@media(max-width:1000px){.hd-nav{display:none}}
@media(max-width:768px){.hd-logo small{display:none}.hd-logo{top:24px}.hd-b1,.hd-cart{display:none}.hd-right{right:16px}}
body.admin-bar .ardeo-head--ai{top:32px}
/* ============================================================
v5 ヒーロー ＝ aiship 最初の画面の骨格（1920×1037 の座標をそのまま／幅に合わせて縮小）
============================================================ */
.mv-wrap{position:relative;overflow:hidden;background:var(--paper);line-height:1}
.mv{position:relative;width:1920px;height:1037px;transform-origin:0 0;background:var(--paper)}
.mv .abs{position:absolute}
.mv .pent{clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);z-index:3}
.mv .p1{left:-294px;top:333px;width:957px;height:940px;background:rgba(235,230,220,.4)}
.mv .p2{left:89px;top:791px;width:511px;height:525px;background:rgba(235,230,220,.8)}
.mv .p3{left:675px;top:482px;width:468px;height:465px;background:rgba(235,230,220,.4)}
.mv .p4{left:993px;top:753px;width:571px;height:577px;background:rgba(235,230,220,.8)}
.mv .p5{left:1351px;top:478px;width:750px;height:783px;background:rgba(228,221,208,.2)}
.mv .mq{left:0;top:120px;width:1920px;height:240px;overflow:hidden;z-index:2;white-space:nowrap}
.mv .mq ul{display:inline-flex;list-style:none;margin:0;padding:0;animation:flowing 90s linear infinite}
.mv .mq li{font-family:"Bebas Neue",sans-serif;font-size:240px;line-height:240px;color:var(--ghost);letter-spacing:.02em;width:1245px;font-weight:400}
.mv .mq2{top:348px;height:270px}.mv .mq2 li{font-size:200px;line-height:270px;width:1272px;color:#EEE9E0}
.mv .band{left:190px;width:522px;height:63px;background:var(--ink);z-index:12;animation:bgLine .6s cubic-bezier(.77,0,.18,1) both}
.mv .band.b1{top:246px}.mv .band.b2{top:327px;animation-delay:.25s}
.mv .band span{position:absolute;left:5px;top:6px;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:700;font-size:30px;line-height:51px;color:#fff;padding:0 10px;animation:txtIn .5s .45s both}
.mv .band.b2 span{animation-delay:.7s}.mv .band b{color:var(--ember);font-weight:inherit}
@keyframes bgLine{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes txtIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.mv .lead{margin:0;left:190px;top:434px;width:642px;height:78px;font-size:23px;line-height:39px;color:var(--ink);z-index:12;font-family:"Noto Sans JP",sans-serif}
.mv .cta{left:240px;top:612px;width:420px;height:80px;background:var(--ember);border-radius:8px;z-index:12;color:#fff;text-align:center;box-sizing:border-box;padding-top:9px;text-decoration:none;display:block}
.mv .cta:hover{background:#D1330F}
.mv .cta small{display:block;font-size:15px;line-height:22px}.mv .cta b{display:block;font-size:20px;line-height:29px;font-weight:700}
.mv .cta-img{left:581px;top:589px;width:117px;height:117px;z-index:13;background:#fff;border:1px solid #DDD8CF;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink);text-align:center;line-height:1.5;text-decoration:none;font-weight:700}
.mv .people{left:20px;top:520px;width:230px;height:263px;z-index:11;overflow:hidden}
.mv .people img{width:100%;height:100%;object-fit:cover;object-position:top}
.mv .obj{left:1056px;top:26px;width:926px;height:874px;z-index:5;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);background:var(--ink)}
.mv .obj::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(0,0,0,.25))}
.mv .mock{left:1019px;top:200px;width:766px;height:635px;z-index:8;display:flex;align-items:center;justify-content:center}
.mv .mock img{max-width:100%;max-height:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.mv .strip{left:0;top:907px;width:1920px;height:130px;background:#fff;z-index:15;overflow:hidden}
.mv .strip ul{position:absolute;top:0;left:0;display:flex;list-style:none;margin:0;padding:0;height:130px;align-items:center;animation:flowing 60s linear infinite}
.mv .strip li{width:202px;flex:0 0 202px;text-align:center;font-family:"Bebas Neue",sans-serif;font-size:26px;letter-spacing:.08em;color:var(--sub);line-height:1.2}
.mv .strip li small{display:block;font-family:"Noto Sans JP",sans-serif;font-size:10px;letter-spacing:.1em;color:#9A948B;margin-top:4px}
/* 表示の切替：900px以上＝ステージ／未満＝スマホ用 */
.ardeo-hero--sp{display:none}
@media(max-width:899px){.mv-wrap{display:none}.ardeo-hero--sp{display:block}}
/* ============================================================
v5.1 完全コピー版：色・書体・座標を aiship の実測値に揃える（中身の文字と写真だけARDEO）
============================================================ */
/* ヘッダー（aiship：白／tagline 10px #303030 ls.4／nav 16px #303030 ls.64／金130×60／連絡246×75 #17140F） */
.ardeo-head--ai{background:#fff;box-shadow:none;border-bottom:0}
.hd-logo small{color:#303030;letter-spacing:.4px;font-family:"Noto Sans JP",sans-serif}
.hd-logo img{height:26px;margin-top:6px}
.hd-nav{left:512px;gap:52px}
.hd-nav a{font-family:"Noto Sans JP",sans-serif;font-size:16px;letter-spacing:.64px;color:#303030;font-weight:400}
.hd-nav a:hover{color:#17140F}
.hd-right{right:0;gap:0;top:0;height:75px}
.hd-b1,.hd-b2{width:130px;height:60px;padding:0;margin:8px 0 0 10px;background:#F0421A;color:#fff!important;
font-family:"Noto Sans JP",sans-serif;font-size:14px;font-weight:400;border-radius:5px}
.hd-b1:hover,.hd-b2:hover{background:#D1330F}
.hd-b2{margin-left:10px}
.hd-tel{width:246px;height:75px;margin-left:10px;border-radius:0;background:#17140F;color:#fff!important;padding:13px 22px 0 53px;box-sizing:border-box}
.hd-tel small{font-family:"Noto Sans JP",sans-serif;font-size:10px;line-height:10px;letter-spacing:-.24px;opacity:1;display:block;text-align:left}
.hd-tel b{font-family:"Barlow","Inter",sans-serif;font-size:30px;line-height:30px;letter-spacing:-.9px;font-weight:700;display:block;margin-top:5px}
.hd-cart{display:none}
@media(min-width:1920px){.hd-in{max-width:1920px}}
/* MV 背景（aiship：#F4F8FC@.6 → 白と合成でほぼ白） */
.mv-wrap,.mv{background:#F7F6F3}
.mv .p1{background:rgba(240,238,234,.4)}.mv .p2{background:rgba(240,238,234,.8)}
.mv .p3{background:rgba(240,238,234,.4)}.mv .p4{background:rgba(240,238,234,.8)}
.mv .p5{background:rgba(230,226,220,.2)}
/* 流れる文字（aiship：din-2014 700 240px #EAEAEA・幅1245／2段目は 1272×264 の画像 → 文字で代替） */
.mv .mq li{font-family:"Barlow","Inter",sans-serif;font-weight:700;font-size:240px;line-height:240px;color:#EAEAEA;letter-spacing:0;width:1245px}
.mv .mq2{top:348px;height:270px}
.mv .mq2 li{font-size:200px;line-height:264px;width:1272px;color:transparent;-webkit-text-stroke:3px #E3E0DA}
/* 帯（aiship：#17140F／Noto Sans JP 700 30px 白 lh51／幅は文字＋左右5px） */
.mv .band{width:auto;height:63px;background:#17140F;padding:0 5px;display:inline-block}
.mv .band span{position:static;display:inline-block;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:30px;line-height:51px;color:#fff;padding:6px 10px 6px 10px;letter-spacing:normal}
.mv .band b{color:#F0421A;font-weight:inherit}
/* 本文（aiship：Noto Sans JP 23px #17140F lh39.1 ls1.84） */
.mv .lead{color:#17140F;letter-spacing:1.84px;line-height:39.1px;font-size:23px;font-family:"Noto Sans JP",sans-serif}
/* CTA（aiship：#F0421A br8／上15px／太字20px 700／白） */
.mv .cta{background:#F0421A;border-radius:8px;color:#fff;font-family:"Noto Sans JP",sans-serif}
.mv .cta:hover{background:#D1330F}
.mv .cta small{font-size:15px;line-height:25.5px;font-weight:400}.mv .cta b{font-size:20px;line-height:34px;font-weight:700}
.mv .cta-img{background:none;border:0;box-shadow:0 10px 24px rgba(0,0,0,.18);border-radius:8px;overflow:hidden;padding:0}
.mv .cta-img img{width:117px;height:117px;object-fit:cover;display:block}
/* 右（aiship：紺の立体 926×874 ＠1056,26／商品画像2枚 347×321＠1090,220・340×289＠1397,261／スマホ 466×635＠1019,200・396×548＠1389,218） */
.mv .obj{background:#17140F}
.mv .obj::after{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(0,0,0,.28))}
.mv .mock{display:none}
.mv .part1{left:1090px;top:220px;width:375px;height:auto;z-index:6}
.mv .part2{left:1397px;top:261px;width:368px;height:auto;z-index:6}
.mv .phone1{left:1019px;top:200px;width:466px;height:635px;z-index:8;filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}
.mv .phone2{left:1389px;top:218px;width:396px;height:548px;z-index:9;filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}
/* 下帯（aiship：白 y907 h130／100px幅を202px間隔） */
.mv .strip{background:#fff}
.mv .strip li{font-family:"Barlow","Inter",sans-serif;font-weight:700;font-size:22px;letter-spacing:.04em;color:#303030}
.mv .strip li small{color:#8A8A8A}
.mv .people{display:none}
/* 浮遊（aiship 実測：floating-y = translateY(-5%→5%) 8s ease-in-out alternate-reverse infinite／parts02・04 は逆位相の floating-y02） */
@keyframes floating-y{0%{transform:translateY(-5%)}100%{transform:translateY(5%)}}
@keyframes floating-y02{0%{transform:translateY(5%)}100%{transform:translateY(-5%)}}
.mv .part1,.mv .phone1{animation:floating-y 8s ease-in-out alternate-reverse infinite}
.mv .part2,.mv .phone2{animation:floating-y02 8s ease-in-out alternate-reverse infinite}
/* aiship はヒーローが y=0 から始まりヘッダー(75px)が上に重なる → ステージを75px引き上げ、ヘッダーを前面に */
.ardeo-head--ai{position:relative;z-index:60}
.mv-wrap{margin-top:-75px}
.mv .lead,.mv .cta small{font-weight:400}
/* 連絡ブロックの文字が右にはみ出す（@ardeo.creative は aiship の電話番号より3文字長い）→ 24px・左余白22px */
.hd-tel{padding-left:22px}
.hd-tel b{font-size:24px;letter-spacing:-.5px}
/* 2段目の流れる文字：aiship は薄いグレーのベタ（画像）→ 線ではなくベタに */
.mv .mq2 li{color:#F0F0F0;-webkit-text-stroke:0}
/* ============================================================
v6 ヒーロー＝aiship の可変幅の規則をそのまま使う
（4幅 1280/1512/1728/1920 で全要素を実測 → 文字は固定px・図形は vw・段落の余白は幅で切替）
============================================================ */
.hero{position:relative;width:100%;height:calc(50vw + 77px);overflow:hidden;margin-top:-75px;
background:linear-gradient(180deg,#FFFFFF 0%,#F5F4F1 100%);font-feature-settings:normal;font-family:"Noto Sans JP",sans-serif}
.hero *{box-sizing:border-box}
/* 五角形（実測は回転後の外接枠 → 回転前の寸法に戻して配置） */
.hero .pent{position:absolute;z-index:10;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.hero .p1{left:-9.37vw;top:23.75vw;width:38vw;height:36.1vw;transform:rotate(194deg);background:rgba(240,238,234,.4)}
.hero .p2{left:6.87vw;top:44.38vw;width:22.13vw;height:21vw;transform:rotate(194deg);background:rgba(240,238,234,.8)}
.hero .p3{left:38.44vw;top:28.75vw;width:17.81vw;height:16.87vw;transform:rotate(194deg);background:rgba(240,238,234,.4)}
.hero .p4{left:55.53vw;top:43.75vw;width:22.13vw;height:21vw;transform:rotate(240deg);background:rgba(240,238,234,.8)}
.hero .p5{left:70.9vw;top:27.19vw;width:38vw;height:36.1vw;transform:rotate(194deg);background:rgba(230,226,220,.2)}
/* 流れる文字 1段目：12.5vw・#EAEAEA・90s */
.hero .ghost{position:absolute;left:0;width:100%;display:flex;white-space:nowrap;pointer-events:none;overflow:hidden}
.hero .ghost ul{display:flex;list-style:none;margin:0;padding:0;flex:none;animation:flowing 90s linear infinite}
.hero .ghost li{font-family:"Barlow","Inter",sans-serif;font-weight:700;line-height:1;letter-spacing:0}
.hero .g1{top:6.25vw;height:12.5vw;z-index:1}
.hero .g1 li{font-size:12.5vw;color:#EAEAEA;padding-right:3.12vw}
/* 2段目：白抜き＋細い線・50s・左に41vwずらして途中から */
.hero .g2{top:18.13vw;height:14.08vw;z-index:5;left:8.7vw;width:auto;transform:translateX(-41vw);overflow:visible}
.hero .g2 ul{animation-duration:50s}
.hero .g2 li{font-size:13.2vw;color:#fff;-webkit-text-stroke:2px #E3E0DA;padding-right:2vw}
/* 文字ブロック：左20px・幅1260・上は高さの23.7%（1600未満は20.4%） */
.hero .blk{position:absolute;left:20px;top:23.7%;width:1260px;max-width:calc(100% - 40px);z-index:10}
.hero .blk-in{margin-left:170px;width:642px;max-width:100%}
.hero .catch{margin:0;font-size:30px;line-height:51px;font-weight:700}
.hero .band{display:block;width:max-content;max-width:100%;background:#17140F;padding:6px 5px;margin:0 0 18px;
clip-path:inset(0 100% 0 0);animation:bgLineRight .5s ease-in-out forwards}
.hero .band.d1{animation-delay:.3s}.hero .band.d2{animation-delay:.7s;margin-bottom:0}
.hero .band .bt{display:block;padding:0 31px;color:#fff;text-align:center;line-height:51px;white-space:nowrap;
clip-path:inset(0 100% 0 0);animation:txtFadeRight 1s ease-in-out forwards}
.hero .band.d1 .bt{animation-delay:.5s}.hero .band.d2 .bt{animation-delay:.9s}
.hero .band b{color:#F0421A;font-weight:inherit}
.hero .lead{margin:clamp(38px,2.55vw,49px) 0 0;width:642px;max-width:100%;font-size:23px;line-height:39.1px;letter-spacing:1.84px;color:#17140F;font-weight:400}
.hero .cta-wrap{margin-top:100px;padding-left:50px}
.hero .cta{position:relative;display:flex;align-items:center;width:420px;height:80px;background:#F0421A;border-radius:8px;color:#fff;text-decoration:none;text-align:center}
.hero .cta:hover{background:#D1330F}
.hero .cta-tx{display:block;width:340px;padding:8px 0 10px 21px}
.hero .cta-tx small{display:block;font-size:15px;line-height:22px;font-weight:400}
.hero .cta-tx b{display:block;font-size:20px;line-height:34px;font-weight:700}
.hero .cta-doc{position:absolute;left:306px;top:-22px;width:117px;height:117px;object-fit:cover;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.18);background:#fff}
.hero .fade{opacity:0;transform:translateY(15px);animation:fadeUp .8s ease-out 1.1s forwards}
/* 右の立体と浮く物（すべて vw・重なりは aiship の z 順＝立体10＜スマホ20＜商品25） */
.hero .obj{position:absolute;left:55vw;top:1.38vw;width:48.25vw;height:45.5vw;z-index:10;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
background:linear-gradient(160deg,#2A251E 0%,#17140F 45%,#0E0C09 100%)}
.hero .fl{position:absolute;height:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.30))}
.hero .part1{left:56.78vw;top:11.48vw;width:18.06vw;z-index:25;animation:floating-y 8s ease-in-out alternate-reverse infinite;filter:none}
.hero .part2{left:72.78vw;top:13.6vw;width:17.69vw;z-index:25;animation:floating-y02 8s ease-in-out alternate-reverse infinite;filter:none}
.hero .phone1{left:53.09vw;top:10.42vw;width:24.25vw;z-index:20;animation:floating-y 8s ease-in-out alternate-reverse infinite}
.hero .phone2{left:72.34vw;top:11.37vw;width:20.63vw;z-index:20;animation:floating-y02 8s ease-in-out alternate-reverse infinite}
/* 下の帯：白・130px・項目幅 10.53vw・30s */
.hero .strip{position:absolute;left:0;bottom:0;width:100%;height:130px;background:#fff;z-index:10;overflow:hidden}
.hero .strip ul{position:absolute;top:50%;left:0;transform:translateY(-50%);display:flex;list-style:none;margin:0;padding:0;
animation:scroll_left 30s linear .5s infinite}
.hero .strip ul+ul{left:100%}
.hero .strip li{width:10.53vw;flex:none;text-align:center;font-family:"Barlow","Inter",sans-serif;font-weight:700;font-size:20px;line-height:1;color:#303030;letter-spacing:.04em}
.hero .strip li small{display:block;font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:10px;color:#8A8A8A;margin-top:6px;letter-spacing:0}
@keyframes scroll_left{0%{transform:translate(0,-50%)}100%{transform:translate(-100%,-50%)}}
@keyframes bgLineRight{100%{clip-path:inset(0)}}
@keyframes txtFadeRight{100%{clip-path:inset(0)}}
@keyframes fadeUp{100%{opacity:1;transform:none}}
/* 幅で切り替わる値（aiship 実測：1280 では帯26.8px・ブロック上20.4%・内側63px・CTA余白58・下帯80） */
@media(max-width:1600px){.hero .blk{top:20.4%}}
@media(max-width:1400px){.hero .catch{font-size:26.8px}.hero .blk-in{margin-left:63px}.hero .cta-wrap{margin-top:58px}.hero .strip{height:80px}}
@media(max-width:899px){.hero{display:none}}
/* ヘッダー：aiship の可変式（ナビ左＝48.9vw-473px／ボタン幅＝5.78vw+27px／連絡＝3.03vw+192px・右端） */
.ardeo-head--ai .hd-in{max-width:none;width:100%}
.ardeo-head--ai .hd-logo{top:11px}
.ardeo-head--ai .hd-nav{left:calc(48.9vw - 473px);gap:calc(3.34vw - 9px)}
.ardeo-head--ai .hd-right{right:0;gap:0}
.ardeo-head--ai .hd-b1,.ardeo-head--ai .hd-b2{width:calc(5.78vw + 27px);height:60px;margin:0 0 0 11px;font-size:14px;border-radius:5px;line-height:23.8px}
.ardeo-head--ai .hd-tel{width:calc(3.03vw + 192px);height:75px;margin-left:11px;padding:14px 10px 0 16px}
.ardeo-head--ai .hd-tel small{font-size:10px;line-height:12px;letter-spacing:-.24px}
.ardeo-head--ai .hd-tel b{font-size:clamp(20px,1.25vw,24px);line-height:30px;margin-top:4px;letter-spacing:-.5px}
@media(max-width:1366px){.ardeo-head--ai .hd-nav{gap:16px}.ardeo-head--ai .hd-nav a{font-size:15px}}
/* v6.0.1：aiship の実測枠は浮遊アニメの開始位置（±5%）を含んでいた → 基準位置に戻す／立体の高さ／下帯は2本のULを横に並べる／ナビの間隔 */
.hero .part1{top:10.6vw}.hero .part2{top:14.36vw}.hero .phone1{top:8.75vw}.hero .phone2{top:12.8vw}
.hero .obj{height:45.84vw}
.hero .strip .track{position:absolute;top:50%;left:0;transform:translateY(-50%);display:flex;white-space:nowrap}
.hero .strip ul{position:static;transform:none;flex:none;animation:scroll_left 30s linear .5s infinite}
.hero .strip ul+ul{left:auto}
@keyframes scroll_left{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@media(max-width:1600px){.ardeo-head--ai .hd-nav{gap:calc(3.34vw - 20px)}}
/* v6.0.2 文字の描画を aiship と同じに：antialiased（Macで細く見える）をやめて auto／字間の詰めを外す／和文の palt を外す */
html,body,body *{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important}
.hero,.hero *,.ardeo-head--ai,.ardeo-head--ai *{letter-spacing:normal;font-feature-settings:normal}
.hero .lead{letter-spacing:1.84px}.hero .g1 li,.hero .g2 li{letter-spacing:0}
.ardeo-head--ai .hd-nav a{letter-spacing:.64px}.ardeo-head--ai .hd-tel small{letter-spacing:-.24px}
/* ============================================================
v7 セクション（2026-09-06）＝「★日本のスタンダード表_2026-09-06.md」の値だけで組む
出典：aiship.jp 4幅実測（新サイト_テーマ/実測_aiship_sections_2026-09-06.txt）
文字は固定px／内容幅 1200 中央／面だけ 100%／角丸 0（ボタンだけ 5〜8）／影なし
============================================================ */
body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-feature-settings:normal;letter-spacing:normal;
font-size:15px;line-height:25.5px;color:#303030;background:#fff}
.t-sec{position:relative;padding:45px 0 120px;font-family:"Noto Sans JP",sans-serif;color:#303030;font-size:15px;line-height:25.5px}
.t-sec *,.t-foot *{box-sizing:border-box;letter-spacing:normal;font-feature-settings:normal}
.t-in{width:1200px;max-width:calc(100% - 40px);margin:0 auto;position:relative}
.t-h2{margin:0 0 50px;padding-top:60px;font-size:34px;line-height:34px;font-weight:700;text-align:center;color:#303030}
.t-lead{width:1000px;max-width:100%;margin:-14px auto 40px;font-size:15px;line-height:25.5px;text-align:left}
.t-bg-blue{background:#F7F6F3}.t-bg-blue2{background:#F0EEEA}.t-bg-gray{background:#EAEAEA}
.t-bg-navy{background:#17140F;color:#fff}.t-bg-navy .t-h2{color:#fff}
/* ボタン（aiship：副＝白・1px #ACACAC・角丸5〜8・13px／主＝金 #F0421A・420×80・20px 700・角丸8） */
.t-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:13px;font-weight:400;line-height:1.7;
width:440px;max-width:100%;height:60px;background:#fff;color:#303030;border:1px solid #ACACAC;border-radius:8px}
.t-btn:hover{background:#F4F4F4}
.t-btn--gold{background:#F0421A;border-color:#F0421A;color:#fff}.t-btn--gold:hover{background:#D1330F}
.t-btn--line{background:#06C755;border-color:#06C755;color:#fff}.t-btn--line:hover{background:#05a847}
.t-btn--s{width:220px;height:50px;border-radius:5px}
.t-btn--big{width:420px;height:80px;font-size:20px;font-weight:700;border-radius:8px}
.t-btns{display:flex;justify-content:center;gap:40px;margin-top:40px;flex-wrap:wrap}
/* 1. 制作スタイル（aiship top_directly_below：h2 34 中央／左 h3 22 lh37.4 w360＋p／右 画像 600×375／内容幅 1070） */
.t-style{display:flex;align-items:center;gap:70px;width:1070px;max-width:100%;margin:0 auto}
.t-style__tx{width:400px;flex:none}
.t-style__tx h3{margin:0 0 14px;font-size:22px;line-height:37.4px;font-weight:700;color:#303030}
.t-style__tx p{margin:0 0 18px;font-size:15px;line-height:25.5px}
.t-style__img{width:600px;flex:none;max-width:100%}
.t-style__img img{width:100%;height:auto;display:block}
/* 2. 分野（aiship p_specialty B型：370×400・白・1px #E0E0E0・角丸0・gap0・見出し17.6/700 #1A1A1A・本文15.2/#444） */
.t-fields{display:grid;grid-template-columns:repeat(3,1fr);width:1110px;max-width:100%;margin:0 auto}
.t-field{background:#fff;border:1px solid #E0E0E0;margin:0 -1px -1px 0;padding:34px 16px 28px;min-height:400px;
display:flex;flex-direction:column;text-decoration:none;color:#303030}
.t-field:hover{background:#F7F6F3}
.t-field .n{font-size:40px;line-height:40px;font-weight:700;color:#17140F;margin:0 0 20px}
.t-field h3{margin:0 0 10px;font-size:17.6px;line-height:24.64px;font-weight:700;color:#1A1A1A}
.t-field p{margin:0;font-size:15.2px;line-height:24.32px;color:#444}
.t-field .pr{margin-top:auto;padding-top:22px;font-size:15px;line-height:1;font-weight:700;color:#17140F}
.t-field .pr b{font-size:24px;font-weight:700}
/* 3. 数字（aiship reason_item F型：205×67・gap80・数字40/700 紺・単位18/700・ラベル15/700・左に縦棒） */
.t-nums{display:flex;justify-content:center;gap:80px;margin:0;padding:0}
.t-num{width:205px;border-left:3px solid #17140F;padding-left:22px;margin:0}
.t-num dt{font-size:15px;line-height:15px;font-weight:700;color:#17140F;margin:0 0 12px}
.t-num dd{margin:0;font-size:40px;line-height:40px;font-weight:700;color:#17140F}
.t-num dd .u{font-size:18px;line-height:18px;margin-left:4px}
.t-num p{margin:10px 0 0;font-size:13px;line-height:20px;color:#666}
/* 4. サービス詳細（aiship p_product D型：紺面・行1200×592・画像47.5vw（912@1920）を枠外まで・文字520・帯見出し34/700白・白い札18/700・本文15白・白ボタン220×50） */
.t-navy{padding:100px 0 40px;overflow:hidden}
.t-row{position:relative;height:592px;margin-bottom:80px}
.t-row__img{position:absolute;top:0;left:47.5vw;width:47.5vw;max-width:912px;height:592px;object-fit:cover;display:block}
.t-row--rev .t-row__img{left:5vw}
.t-row__tx{position:absolute;top:50px;left:calc(50vw - 600px);width:520px}
.t-row--rev .t-row__tx{left:53.8vw}
.t-row h2{margin:0 0 26px;font-size:34px;line-height:54.4px;font-weight:700;color:#fff}
.t-row h2 span{background:#F0421A;color:#fff;padding:0 10px;display:inline-block;-webkit-box-decoration-break:slice;box-decoration-break:slice} /* v9.9.4 aiship p_product 実測：帯 #E7BC40（→朱）・白文字・pad 0 10px・inline-block */
.t-row .tag{display:inline-block;background:#fff;color:#303030;font-size:18px;line-height:28.08px;font-weight:700;padding:8px 18px;margin:0 0 22px}
.t-row p{margin:0 0 30px;font-size:15px;line-height:24px;color:#fff}
/* 5. ショップ（aiship p_release A型：白・1px #CCC・角丸0・pad16・3列・gap24・見出し17.6/700 #17140F・補助14 #666） */
.t-h3{display:flex;align-items:center;gap:14px;margin:50px 0 24px;font-size:22px;line-height:1.4;font-weight:700;color:#303030}
.t-h3::before{content:"";flex:none;width:4px;height:28px;background:#17140F}
.t-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.t-card{background:#fff;border:1px solid #CCC;padding:16px;display:flex;flex-direction:column}
.t-card__img{display:block;aspect-ratio:4/3;overflow:hidden;background:#F4F4F4;margin:0 0 14px}
.t-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.t-card__copy{margin:0 0 4px;font-size:13px;line-height:20px;color:#666}
.t-card__name{display:block;margin:0 0 12px;font-size:17.6px;line-height:29.92px;font-weight:700;color:#17140F;text-decoration:none}
.t-card__name:hover{text-decoration:underline}
.t-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid #E0E0E0}
.t-card__price{font-size:24px;line-height:1;font-weight:700;color:#17140F;white-space:nowrap}
.t-card__price small{font-size:12px;font-weight:400;color:#666;margin-left:4px}
.t-card__btn{display:flex;align-items:center;justify-content:center;width:130px;height:44px;background:#F0421A;color:#fff!important;border-radius:5px;font-size:13px;text-decoration:none;white-space:nowrap}
.t-card__btn:hover{background:#D1330F}
/* 6. 料金（aiship p_price：#EAEAEA・pad105/170・白い箱 1200×200・「月額」紺の札 100×60・¥ 40/700 紺・〜30px・ボタン2本 440×60・下辺に白の山） */
.t-price{padding:45px 0 170px}
.t-price::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:50px;background:#fff;clip-path:polygon(0 100%,50% 0,100% 100%)}
.t-pbox{background:#fff;padding:40px;display:flex;justify-content:center;gap:70px;flex-wrap:wrap}
.t-pitem{display:flex;align-items:center;gap:20px}
.t-pitem .tag{width:100px;height:60px;display:flex;align-items:center;justify-content:center;background:#17140F;color:#fff;font-size:15px;font-weight:700}
.t-pitem .v{font-size:40px;line-height:40px;font-weight:700;color:#17140F;white-space:nowrap}
.t-pitem .v small{font-size:30px;font-weight:700}
/* 7. 相談CTA（aiship p_footer_top：紺・左 PC モックアップ・右 白い箱（見出し34/700＋金80px）・下に白ボタン2本） */
.t-cta{background:#17140F;padding:100px 0 110px;overflow:hidden}
.t-cta .t-in{display:flex;align-items:center;gap:40px}
.t-cta__img{width:560px;flex:none}
.t-cta__img img{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 30px rgba(0,0,0,.3))}
.t-cta__box{background:#fff;padding:40px;flex:1;min-width:0}
.t-cta__box h2{margin:0 0 20px;font-size:34px;line-height:54px;font-weight:700;color:#303030}
.t-cta__box p{margin:0 0 26px;font-size:15px;line-height:25.5px;color:#303030}
.t-cta__box .t-btn{width:100%}
.t-cta__sub{display:flex;justify-content:center;gap:40px;margin-top:60px;flex-wrap:wrap}
.t-cta__sub .t-btn{width:440px}
/* 8. フッター（aiship p_footer：紺・4列・列見出し15/600白・リンク13/400白 lh18・小分類 pad-left20・下段リンク 1px縦線・Copyright 11px 中央） */
.t-foot{background:#17140F;color:#fff;font-family:"Noto Sans JP",sans-serif;font-size:15px;line-height:25.5px}
.t-foot__cols{width:1320px;max-width:calc(100% - 40px);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding:70px 0 40px}
.t-foot h4{margin:0 0 16px;font-size:15px;line-height:1.5;font-weight:600;color:#fff}
.t-foot ul{list-style:none;margin:0;padding:0 0 0 20px}
.t-foot li{margin:0 0 10px}
.t-foot a{color:#fff;text-decoration:none;font-size:13px;line-height:17.94px}
.t-foot a:hover{text-decoration:underline}
.t-foot__links{width:1320px;max-width:calc(100% - 40px);margin:0 auto;padding:10px 0 40px;display:flex;flex-wrap:wrap;row-gap:10px}
.t-foot__links a{font-size:13px;padding:0 16px;border-left:1px solid rgba(255,255,255,.5);line-height:1.2}
.t-foot__links a:first-child{border-left:0;padding-left:0}
.t-foot__bottom{background:#fff;color:#303030;padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.t-foot__bottom img{height:26px;width:auto;display:block}
.t-foot__bottom small{font-size:11px;line-height:18.7px;color:#303030}
/* 幅で切り替わる値（aiship 実測：1280 では内容幅が 1200→約1060〜1160 に縮む） */
@media(max-width:1400px){.t-cta__img{width:460px}}
/* スマホ（aiship のスマホ版は未実測＝コピーではない。列を1本にするだけ） */
@media(max-width:899px){
.t-in{max-width:calc(100% - 32px)}
.t-sec{padding:20px 0 70px}
.t-h2{font-size:24px;line-height:1.4;padding-top:40px;margin-bottom:28px}
.t-lead{margin:0 0 28px}
.t-style{flex-direction:column;gap:28px;width:100%}.t-style__tx,.t-style__img{width:100%}
.t-style__tx .t-btn--s{display:flex;margin-left:auto;margin-right:auto}
.t-fields{grid-template-columns:1fr;width:100%}.t-field{min-height:0;padding:26px 16px 22px}
.t-nums{flex-wrap:wrap;gap:28px 24px}.t-num{width:calc(50% - 12px)}
.t-navy{padding:50px 0 10px}
.t-row{height:auto;margin-bottom:50px}
.t-row__img,.t-row--rev .t-row__img{position:static;width:100%;max-width:none;height:auto}
.t-row__tx,.t-row--rev .t-row__tx{position:static;width:100%;padding:22px 0 0}
.t-row h2{font-size:24px;line-height:40px}
.t-cards{grid-template-columns:1fr 1fr;gap:12px}.t-card{padding:12px}
.t-card__name{font-size:15px;line-height:24px}.t-card__price{font-size:20px}.t-card__btn{width:100px;height:38px}
.t-price{padding:20px 0 110px}.t-pbox{flex-direction:column;gap:22px;padding:24px}
.t-cta{padding:50px 0 60px}.t-cta .t-in{flex-direction:column}.t-cta__img{width:100%}
.t-cta__box{padding:24px}.t-cta__box h2{font-size:24px;line-height:38px}
.t-btns,.t-cta__sub{flex-direction:column;align-items:center;gap:14px;margin-top:28px}
.t-btn--big{width:100%;height:64px;font-size:17px}
.t-foot__cols{grid-template-columns:1fr 1fr;gap:24px;padding:40px 0 16px}
.t-foot__links{padding-bottom:28px}
}
/* v7.0.1：1200〜1280幅で紺面の文字ブロックが左端に張り付く → 左余白の下限 20px（aiship 1280 実測＝113px だが内容幅を優先）
★v9.12.7（2026-09-08）900px 以上に限定した。
これらは @media(max-width:899px) の「後」に書かれていたため、スマホでも効いてしまい、
実測 375px で .t-row--rev .t-row__tx の幅が calc(50vw - 100px)＝87px まで潰れ、
「AIで、／もっと／できる」のように2〜3文字で改行されていた（＝紺面がメチャクチャに見えた真因）。
左側の行も left:max(20px,…) が GSAP の x:-40 と重なり、L=-40 で左端が切れていた。 */
@media(min-width:900px){
.t-row__tx{left:max(20px,calc(50vw - 600px))}
.t-row--rev .t-row__tx{left:max(53.8vw,calc(50vw + 80px));width:min(520px,calc(50vw - 100px))}
}
/* v7.0.2：分野カードにアイコン（aiship p_specialty：80×80 を上に置く）。GPT生成の紺1色アイコン（assets/icons/） */
.t-field .ic{display:block;width:80px;height:80px;object-fit:contain;margin:0 0 20px}
/* ============================================================
v8 ヒーロー＝アレンジ（2026-09-06 金島さん「もろパクリなのでアレンジ」）
五角形なし／流れる文字→1語ずつスライドイン＋点滅／浮くスマホ→PCの画面から動画のコマが飛び出す
骨格の数値（高さ calc(50vw+77px)・帯30px・本文23px・CTA420×80・右の面 48.25vw）は v6 のまま
============================================================ */
.hero--v8 .pent,.hero--v8 .ghost,.hero--v8 .obj,.hero--v8 .fl{display:none}
.hero--v8{background:linear-gradient(180deg,#FFFFFF 0%,#F5F4F1 100%)}
/* 背景の英字：12.5vw・#EAEAEA（aiship の流れる文字と同じ大きさ・色）を、流さず「出て消える」 */
.hero--v8 .words{position:absolute;left:20px;top:6.25vw;height:12.5vw;width:calc(100% - 20px);z-index:1;pointer-events:none;
font-family:"Barlow","Inter",sans-serif;font-weight:700;font-size:12.5vw;line-height:1;color:#EAEAEA;white-space:nowrap;overflow:hidden}
.hero--v8 .words span{position:absolute;left:0;top:0;opacity:0;animation:wordCycle 15s ease-in-out infinite}
.hero--v8 .words span:nth-child(2){animation-delay:3s}.hero--v8 .words span:nth-child(3){animation-delay:6s}
.hero--v8 .words span:nth-child(4){animation-delay:9s}.hero--v8 .words span:nth-child(5){animation-delay:12s}
.hero--v8 .words i{display:inline-block;width:.07em;height:.82em;margin:.05em 0 0 .06em;vertical-align:top;background:#F0421A;opacity:.55;animation:blink 1s steps(2,start) infinite}
@keyframes wordCycle{0%{opacity:0;transform:translateX(-3vw)}6%{opacity:1;transform:none}17%{opacity:1;transform:none}21%{opacity:0;transform:translateX(2vw)}100%{opacity:0;transform:translateX(2vw)}}
@keyframes blink{to{visibility:hidden}}
/* 右の面：五角形ではなく、左辺が斜めの紺の面（帯・キャッチと同じ紺） */
.hero--v8 .plane{position:absolute;left:55vw;top:1.38vw;width:48.25vw;height:45.84vw;z-index:10;
background:linear-gradient(160deg,#2A251E 0%,#17140F 45%,#0E0C09 100%);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
/* PC（実物 web/PC.Mobile.png）と、画面から飛び出す動画のコマ3枚 */
.hero--v8 .pc{position:absolute;left:55.5vw;top:9vw;width:41vw;z-index:20}
.hero--v8 .pc-img{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}
.hero--v8 .vf{position:absolute;width:33%;aspect-ratio:16/9;opacity:0;z-index:30;animation:popOut .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero--v8 .vf img{width:100%;height:100%;object-fit:cover;display:block;box-shadow:0 18px 40px rgba(0,0,0,.38);animation:floating-y 8s ease-in-out alternate-reverse infinite}
.hero--v8 .vf::after{content:"";position:absolute;left:50%;top:50%;width:2.4vw;height:2.4vw;margin:-1.2vw 0 0 -1.2vw;border-radius:50%;background:rgba(255,255,255,.92);z-index:2}
.hero--v8 .vf::before{content:"";position:absolute;left:50%;top:50%;z-index:3;width:0;height:0;margin:-.55vw 0 0 -.3vw;border-left:1vw solid #17140F;border-top:.55vw solid transparent;border-bottom:.55vw solid transparent}
.hero--v8 .v1{left:20%;top:-9%;animation-delay:1.2s}
.hero--v8 .v2{left:70%;top:12%;animation-delay:1.55s}.hero--v8 .v2 img{animation-name:floating-y02}
.hero--v8 .v3{left:-6%;top:34%;animation-delay:1.9s}
@keyframes popOut{from{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.3)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero--v8 .words span,.hero--v8 .vf,.hero--v8 .vf img{animation:none;opacity:1}}
.hero--v8 .v3{left:6%;top:42%}
@media(max-width:1400px){.hero--v8 .v3{left:14%;top:52%}}
/* v8.1：3D単語空間＋電気（canvas）。単語は紺の面の下（z1）、電気は面の上・PCの下（z15） */
.hero--v8 .words{display:none}
.hero--v8 .fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.hero--v8 .fx-words{z-index:1}.hero--v8 .fx-bolts{z-index:15}
/* v8.2：稲妻キャンバス廃止 */
.hero--v8 .fx-bolts{display:none}
/* v8.4：キャッチを1行1本の帯に／文字ブロックを上部の ARDEO（6.25vw〜18.75vw）の下へ＝重ならない */
.hero--v8 .blk{top:20.5vw}
.hero--v8 .band.d1{margin-bottom:0}
@media(max-width:1600px){.hero--v8 .blk{top:20.5vw}}
@media(max-width:1400px){.hero--v8 .lead{margin-top:24px}.hero--v8 .cta-wrap{margin-top:40px}}
/* v9.0.0（2026-09-06）：配色A＝墨 #17140F × 朱 #F0421A（金島さん選択）。紺・金とその派生色を全置換 */
/* v9.0.1（2026-09-06 12:35 金島さん「色の重なりが変／赤のボタン2つがキツすぎる」） */
/* ヘッダー：朱はヒーローの主CTAだけ。料金＝白＋1px枠、問い合わせ＝墨、連絡ブロック＝白地（下の墨の斜面と溶けない） */
.ardeo-head--ai .hd-b1{background:#fff;color:#303030!important;border:1px solid #ACACAC;font-weight:400}
.ardeo-head--ai .hd-b1:hover{background:#F4F4F4}
.ardeo-head--ai .hd-b2{background:#17140F;color:#fff!important;font-weight:400}
.ardeo-head--ai .hd-b2:hover{background:#2A251E}
.ardeo-head--ai .hd-tel{background:#fff;color:#17140F!important;border-left:1px solid #E0E0E0}
.ardeo-head--ai .hd-tel small{color:#666}
.ardeo-head--ai .hd-tel b{color:#17140F}
.ardeo-head--ai{box-shadow:0 1px 0 rgba(0,0,0,.08)}
/* ナビがボタンに食い込まない：1500以下は字間を詰め、1400以下は「料金を見る」を出さない */
@media(max-width:1500px){.ardeo-head--ai .hd-nav{gap:14px}.ardeo-head--ai .hd-nav a{font-size:14px}}
@media(max-width:1400px){.ardeo-head--ai .hd-b1{display:none}}
@media(max-width:1250px){.ardeo-head--ai .hd-nav{gap:10px}.ardeo-head--ai .hd-nav a{font-size:13px}}
/* 左上の動画コマを斜面の内側へ */
.hero--v8 .v1{left:32%;top:-6%}
/* 商品カードのボタンは墨（朱は主CTAだけ） */
.t-card__btn{background:#17140F}.t-card__btn:hover{background:#2A251E}
/* v9.0.2：ナビはボタン群の左端から30px空けて右揃え（aiship の左固定式だと ARDEO の項目名が長くて食い込む） */
.ardeo-head--ai .hd-nav{left:auto;right:calc(14.59vw + 298px)}
@media(max-width:1400px){.ardeo-head--ai .hd-nav{right:calc(8.81vw + 260px)}}
@media(max-width:1000px){.ardeo-head--ai .hd-nav{display:none}}
/* ============================================================
v9.1（2026-09-06 金島さん「画像を新しく生成／PCの画像も雑なのでやり直し／全て別々に動く／飛び出す動画は動画のワンシーンの切り抜きPNG」）
PC＝GPT生成の透過PNG（ロゴ文字なし）／切り抜き3枚＝透過PNG。PCと3枚をそれぞれ別の周期・振幅で浮かせる
============================================================ */
.hero--v8 .pc{left:53vw;top:7.5vw;width:46vw}
.hero--v8 .pc-img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));animation:floatPC 10s ease-in-out infinite}
.hero--v8 .vf{aspect-ratio:auto;width:auto;box-shadow:none;background:none}
.hero--v8 .vf::before,.hero--v8 .vf::after{display:none}
.hero--v8 .vf img{width:100%;height:auto;object-fit:contain;box-shadow:none;filter:drop-shadow(0 18px 28px rgba(0,0,0,.35));animation:none}
.hero--v8 .v1{left:14%;top:-14%;width:30%;animation:popOut .9s cubic-bezier(.2,.8,.2,1) 1.1s forwards}
.hero--v8 .v2{left:66%;top:-2%;width:32%;animation:popOut .9s cubic-bezier(.2,.8,.2,1) 1.45s forwards}
.hero--v8 .v3{left:-4%;top:36%;width:28%;animation:popOut .9s cubic-bezier(.2,.8,.2,1) 1.8s forwards}
.hero--v8 .v1 img{animation:floatA 7s ease-in-out 2s infinite}
.hero--v8 .v2 img{animation:floatB 9s ease-in-out 2s infinite}
.hero--v8 .v3 img{animation:floatC 11s ease-in-out 2s infinite}
@keyframes floatPC{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}
@keyframes floatA{0%,100%{transform:translate(0,0) rotate(-1deg)}50%{transform:translate(1.5%,-6%) rotate(1deg)}}
@keyframes floatB{0%,100%{transform:translate(0,0) rotate(1deg)}50%{transform:translate(-2%,-5%) rotate(-1.5deg)}}
@keyframes floatC{0%,100%{transform:translate(0,0)}50%{transform:translate(2%,-4%) rotate(1deg)}}
@media(max-width:1400px){.hero--v8 .v3{left:8%;top:44%}}
/* v9.1.1：左上の切り抜きがヘッダー（75px）の下に潜っていた → 下げる */
.hero--v8 .v1{top:0}
@media(max-width:1400px){.hero--v8 .v1{top:2%}}
/* v9.2（2026-09-06 金島さん「PCの画面が安っぽい・向きが逆／飛び出す動画を増やして重ねて画面を隠す」）
PC＝左右反転（画面が右奥向き）／切り抜き7枚を画面の上に重ねる。周期・振幅・出現の遅れは全部別 */
.hero--v8 .v1{left:8%;top:-2%;width:28%;animation-delay:1.0s}
.hero--v8 .v2{left:64%;top:-8%;width:32%;animation-delay:1.3s}
.hero--v8 .v3{left:-6%;top:30%;width:26%;animation-delay:1.6s}
.hero--v8 .v4{left:30%;top:4%;width:30%;animation-delay:1.15s}
.hero--v8 .v5{left:50%;top:20%;width:28%;animation-delay:1.45s}
.hero--v8 .v6{left:16%;top:36%;width:26%;animation-delay:1.75s}
.hero--v8 .v7{left:38%;top:34%;width:30%;animation-delay:2.0s}
.hero--v8 .v4,.hero--v8 .v5,.hero--v8 .v6,.hero--v8 .v7{animation-name:popOut;animation-duration:.9s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:forwards}
.hero--v8 .v4 img{animation:floatB 8s ease-in-out 2.2s infinite}
.hero--v8 .v5 img{animation:floatA 10s ease-in-out 2.4s infinite}
.hero--v8 .v6 img{animation:floatC 12s ease-in-out 2.6s infinite}
.hero--v8 .v7 img{animation:floatB 13s ease-in-out 2.8s infinite}
.hero--v8 .v1{z-index:31}.hero--v8 .v2{z-index:33}.hero--v8 .v3{z-index:34}.hero--v8 .v4{z-index:32}.hero--v8 .v5{z-index:35}.hero--v8 .v6{z-index:36}.hero--v8 .v7{z-index:37}
@media(max-width:1400px){.hero--v8 .v3{left:0;top:40%}.hero--v8 .v6{left:20%;top:44%}}
@media(max-width:1400px){.hero--v8 .v2{top:0}}
/* v9.2.1（13:30 金島さん「配置をディスプレイの周辺にもっと重ねた方がいい」）
反転後の画面＝PC画像の横29〜93%・縦14〜64%。7枚をその周りに寄せて互いに重ねる */
.hero--v8 .v1{left:34%;top:-8%;width:28%}
.hero--v8 .v2{left:70%;top:-6%;width:30%}
.hero--v8 .v3{left:20%;top:22%;width:26%}
.hero--v8 .v4{left:50%;top:-2%;width:28%}
.hero--v8 .v5{left:74%;top:18%;width:27%}
.hero--v8 .v6{left:33%;top:32%;width:26%}
.hero--v8 .v7{left:54%;top:28%;width:30%}
@media(max-width:1400px){.hero--v8 .v1{top:0}.hero--v8 .v2{top:0}.hero--v8 .v3{left:20%;top:26%}.hero--v8 .v4{top:2%}.hero--v8 .v6{left:33%;top:36%}}
.hero--v8 .v5{left:72%}
/* v9.2.2（13:45 金島さん「女性・コーヒー・ラーメンをディスプレイの位置まで下げて一番背面で動かす。完全に重ねる」） */
.hero--v8 .v1{left:32%;top:12%;width:28%;z-index:21}
.hero--v8 .v4{left:50%;top:10%;width:28%;z-index:22}
.hero--v8 .v2{left:66%;top:8%;width:30%;z-index:23}
@media(max-width:1400px){.hero--v8 .v1{top:12%}.hero--v8 .v2{top:8%}.hero--v8 .v4{top:10%}}
/* v9.2.3（13:55 金島さん「左端男性・右端女性をディスプレイ下限まで下げる／コーヒー・ラーメンを枠内に下げる」）
画面＝PC画像の横29〜93%・縦14〜64%。v3/v5 は下端が64%に揃う位置、v2/v4 は枠内 */
.hero--v8 .v3{left:20%;top:31%;width:26%}
.hero--v8 .v5{left:72%;top:25%;width:27%}
.hero--v8 .v4{left:50%;top:15%;width:28%}
.hero--v8 .v2{left:62%;top:15%;width:30%}
@media(max-width:1400px){.hero--v8 .v3{left:20%;top:31%}.hero--v8 .v4{top:15%}.hero--v8 .v2{top:15%}}
/* v9.2.4（14:05 金島さん「上段の女性を左に寄せる／コーヒー、ラーメンの重なりを横に広げる」） */
.hero--v8 .v1{left:22%}
.hero--v8 .v4{left:41%}
.hero--v8 .v2{left:66%;width:28%}
/* v9.2.5（14:15 金島さん「コーヒーを一番背面にしてさらに下に下げて」） */
.hero--v8 .v4{top:24%;z-index:20}
.hero--v8 .v1{z-index:21}.hero--v8 .v2{z-index:23}
@media(max-width:1400px){.hero--v8 .v4{top:24%}}
/* v9.2.6（14:25 金島さん「全体が右下に寄っているので左上へ。一塊で動かす」）：.pc（PC＋7枚）だけを左上へ */
.hero--v8 .pc{left:49vw;top:3vw}
/* v9.2.7（14:35 金島さん「CTAの右のチラシ画像は不要」）：cta-doc を削除。ボタンの文字を中央に */
.hero--v8 .cta-doc{display:none}
.hero--v8 .cta{justify-content:center}
.hero--v8 .cta-tx{width:auto;padding:8px 24px 10px}
/* ============================================================
v9.3 お問い合わせフォーム（2026-09-06）：入力欄 15px・1px #ACACAC・角丸0／必須は朱の小札／送信＝主CTAと同じ 420×80
============================================================ */
.cf .t-lead{margin-bottom:40px}
.cf-form,.cf-done{width:720px;max-width:100%;margin:0 auto}
.cf-row{margin:0 0 26px}
.cf-row label,.cf-row .cf-label{display:block;font-size:15px;line-height:1.5;font-weight:700;color:#303030;margin:0 0 8px}
.cf-row label b,.cf-row .cf-label b,.cf-agree b{display:inline-block;background:#F0421A;color:#fff;font-size:11px;line-height:18px;padding:0 6px;margin-left:8px;font-weight:700;vertical-align:2px}
.cf-row input[type=text],.cf-row input[type=email],.cf-row input[type=tel],.cf-row textarea{display:block;width:100%;box-sizing:border-box;font:400 15px/1.6 "Noto Sans JP",sans-serif;color:#303030;background:#fff;border:1px solid #ACACAC;border-radius:0;padding:12px 14px;outline:none}
.cf-row input:focus,.cf-row textarea:focus{border-color:#17140F}
.cf-row textarea{resize:vertical;min-height:170px}
.cf-row--2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cf-kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.cf-kinds label{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:400;margin:0;cursor:pointer}
.cf-kinds input{width:18px;height:18px;margin:0;accent-color:#17140F}
.cf-agree label{display:flex;align-items:center;gap:10px;font-weight:400;font-size:15px;cursor:pointer}
.cf-agree input{width:18px;height:18px;margin:0;accent-color:#17140F}
.cf-agree a{color:#303030}
.cf-err{display:block;color:#F0421A;font-size:13px;line-height:1.6;margin-top:6px}
.cf-alert{width:720px;max-width:100%;margin:0 auto 24px;padding:14px 18px;border:1px solid #F0421A;color:#F0421A;font-size:15px;background:#fff}
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-form .t-btns{margin-top:36px}
.cf-note{width:720px;max-width:100%;margin:22px auto 0;font-size:13px;line-height:1.8;color:#666;text-align:center}
.cf-note a{color:#303030}
.cf-done{text-align:center;padding:40px 24px;border:1px solid #E0E0E0;background:#fff}
.cf-done h3{margin:0 0 16px;font-size:22px;line-height:1.5;font-weight:700}
.cf-done p{margin:0 0 10px;font-size:15px;line-height:25.5px}
.cf-info .cf-body{width:880px;max-width:100%;margin:0 auto;padding:0}
.cf-info .cf-body h1{display:none}
.cf-info .cf-body h2{font-size:22px;margin:40px 0 14px}
@media(max-width:899px){.cf-row--2,.cf-kinds{grid-template-columns:1fr}.cf-done{padding:26px 16px}}
/* ============================================================
v9.5.0 下層ページ（2026-09-07）＝★日本のスタンダード表 §9
出典：aiship /price /support/flow /function の 4幅実測。色だけ 紺→墨 #17140F（v9.0.0 の置換規則）
============================================================ */
/* タイトル帯（aiship .p_under_mv：帯 pad10 → パンくず 13/22 白 → 25px → 白箱 h1 34/700 lh57.8 横pad18 → 下80。高さ 195 固定） */
.u-head{background:#17140F;color:#fff;font-family:"Noto Sans JP",sans-serif;padding:10px 0 80px;letter-spacing:normal;font-feature-settings:normal}
.u-head *{box-sizing:border-box;letter-spacing:normal}
.u-bc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:13px;line-height:22px;font-weight:400;color:#fff}
.u-bc li+li::before{content:"\203A";margin:0 8px;opacity:.7}
.u-bc a{color:#fff;text-decoration:none}
.u-bc a:hover{text-decoration:underline}
.u-head h1{display:table;margin:25px auto 0;background:#fff;color:#17140F;font-size:34px;line-height:57.8px;font-weight:700;padding:0 18px;text-align:center;white-space:nowrap}
/* 見出し */
.u-catch{line-height:54.4px}
.u-h2s{width:1000px;max-width:100%;margin:0 auto 30px;font-size:22.5px;line-height:38.25px;font-weight:700;text-align:center;color:#303030}
.u-h3{width:1000px;max-width:100%;margin:30px auto 14px;background:#F3F3F3;border-left:5px solid #17140F;padding:4.4px 8.8px;font-size:17.55px;line-height:29.8px;font-weight:700;color:#303030}
.u-p{width:1000px;max-width:100%;margin:0 auto;font-size:15px;line-height:25.5px;color:#303030}
.u-p p{margin:0 0 12px}
.u-note{margin-top:10px}
.u-flow .u-h3:first-child{margin-top:0}
/* 料金詳細表（aiship：#FAFAFA の面・罫線なし・border-spacing 2px・th 346 左 15/700 pad10・td 中央 15/400 pad20・区切り行 #DEDEDE 19.2/700） */
.u-tbl{width:1000px;max-width:100%;margin:0 auto 50px;border-collapse:separate;border-spacing:2px;background:#FAFAFA;font-size:15px;line-height:25.5px;color:#303030}
.u-tbl th,.u-tbl td{padding:20px;text-align:center;vertical-align:middle;font-weight:400;background:transparent;border:0}
.u-tbl thead th{padding:10px;font-weight:700}
.u-tbl thead th:first-child,.u-tbl tbody th{text-align:left}
.u-tbl tbody th{width:346px;padding:10px 10px 10px 20px;font-weight:700}
.u-tbl td.p{font-weight:700;white-space:nowrap}
.u-tbl td.n{text-align:left;font-size:13px;line-height:22px;color:#666}
.u-tbl td.n:empty{padding:0}
.u-tbl .grp th{width:auto;background:#DEDEDE;font-size:19.2px;line-height:32.64px;padding:10px 0 10px 10px;text-align:left}
.u-tbl--co td{text-align:left}
.u-tbl a{color:#17140F}
/* B型カードの派生（3列 1110・2列 740。カードの値は .t-field のまま） */
.t-fields--3 .t-field{min-height:0}
.t-fields--2{grid-template-columns:repeat(2,1fr);width:740px}
.t-fields--2 .t-field{min-height:0}
/* 会社概要 */
.u-name{width:1000px;max-width:100%;margin:0 auto;display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:start}
.u-name__mark{border:1px solid #E0E0E0;background:#fff;padding:28px;min-height:200px;display:flex;align-items:center;justify-content:center}
.u-name__mark img{width:100%;max-width:130px;height:auto}
.u-name p{margin:0 0 18px;font-size:15px;line-height:25.5px;color:#303030}
.u-name p:last-child{margin-bottom:0}
.u-name .lead{font-size:18px;line-height:28px;font-weight:700}
.u-rep{width:1000px;max-width:100%;margin:0 auto;display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start}
.u-rep__photo img{width:100%;height:auto;display:block}
.u-rep b{display:block;font-size:24px;line-height:1.4;font-weight:700;color:#17140F}
.u-rep .role{display:block;font-size:13px;line-height:20px;color:#666;margin:4px 0 22px}
.u-rep p{margin:0 0 14px;font-size:15px;line-height:25.5px;color:#303030}
.u-rep .note{border-left:3px solid #17140F;padding-left:16px;font-weight:700}
/* ショップ一覧 */
.u-tabs{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:0 0 40px}
.u-tabs .t-btn.is-on{background:#17140F;border-color:#17140F;color:#fff}
.u-notices{padding-top:20px}
.u-notices:empty{display:none}
.u-notices .wc-block-store-notices:empty{display:none}
/* 固定ページ本文（実績・ガイド・特商法・プライバシー） */
.u-page{padding-top:60px}
.u-body{width:1000px;max-width:100%;margin:0 auto;font-family:"Noto Sans JP",sans-serif;font-size:15px;line-height:25.5px;color:#303030;letter-spacing:normal}
.u-body *{letter-spacing:normal;font-feature-settings:normal;box-sizing:border-box}
.u-body h1{display:none}
.u-body h2{margin:50px 0 24px;font-size:22.5px;line-height:38.25px;font-weight:700;color:#303030}
.u-body>h2:first-child,.u-body>.wp-block-heading:first-child{margin-top:0}
.u-body h3{margin:34px 0 14px;background:#F3F3F3;border-left:5px solid #17140F;padding:4.4px 8.8px;font-size:17.55px;line-height:29.8px;font-weight:700;color:#303030}
.u-body h4{margin:24px 0 10px;font-size:15px;line-height:25.5px;font-weight:700}
.u-body p{margin:0 0 16px;font-size:15px;line-height:25.5px}
.u-body ul,.u-body ol{margin:0 0 20px;padding-left:1.4em}
.u-body li{margin:0 0 6px;font-size:15px;line-height:25.5px}
.u-body table{width:100%;border-collapse:separate;border-spacing:2px;background:#FAFAFA;margin:0 0 30px;font-size:15px;line-height:25.5px}
.u-body th,.u-body td{padding:12px 16px;text-align:left;vertical-align:top;border:0;background:transparent}
.u-body th{font-weight:700;width:34.6%}
.u-body thead th{background:#DEDEDE}
.u-body figure{margin:0 0 20px}
.u-body a{color:#17140F}
.u-body strong,.u-body b{font-weight:700}
.u-body hr{border:0;border-top:1px solid #E0E0E0;margin:30px 0}
.u-body .wp-block-buttons{gap:20px}
.u-body .wp-block-button__link{background:#fff;color:#303030;border:1px solid #ACACAC;border-radius:5px;font-size:13px;line-height:1.7;padding:14px 28px}
/* 本文の太さ＝400（★日本のスタンダード表 §2：15px/400。親テーマ Twenty Twenty-Five の theme.json が body を 300 にしていた＝6サイトに無い値） */
body,.t-sec,.t-cta,.t-foot,.u-head,.u-body{font-weight:400}
/* ブロックテンプレートの外枠（親テーマの余白を消す） */
.wp-site-blocks>*{margin-block-start:0!important}
.wp-site-blocks{padding:0!important}
@media(max-width:1239px){.u-tbl,.u-h2s,.u-h3,.u-p,.u-body,.u-name,.u-rep,.u-flow{width:100%}}
@media(max-width:899px){.u-name,.u-rep{grid-template-columns:1fr}.t-fields--2,.t-fields--3{grid-template-columns:1fr;width:100%}.u-tbl tbody th{width:40%}.u-head h1{white-space:normal;font-size:26px;line-height:44px}}
@media(max-width:640px){.u-tbl{display:block;overflow-x:auto}.u-tbl tbody th{width:auto;min-width:9em}}
/* v9.5.9（2026-09-07 金島さん選定の MOVIE 画像 1710×920＝比率1.86）：この行だけ切らずに全体を収める（上下に紺の余白） */
.t-row__img--fit{object-fit:contain;object-position:center}
/* v9.7.0（2026-09-07）トップ「こんなことも」＝aiship お役立ち情報 C型：枠なし・画像比1.8・角丸0・3列・gap 50 */
.t-more{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.t-more a{display:block;text-decoration:none;color:#303030}
.t-more .im{aspect-ratio:1.8;overflow:hidden;background:#F4F4F4;margin:0 0 16px}
.t-more .im img{width:100%;height:100%;object-fit:cover;display:block}
.t-more h3{margin:0 0 8px;font-size:17.6px;line-height:24.64px;font-weight:700;color:#1A1A1A}
.t-more p{margin:0;font-size:15px;line-height:25.5px;color:#444}
.t-more .lk{display:inline-block;margin-top:10px;font-size:13px;line-height:1.7;color:#303030;text-decoration:underline}
.t-more a:hover h3{text-decoration:underline}
.t-more .im img{transition:none}
@media(max-width:899px){.t-more{grid-template-columns:1fr;gap:36px}}
/* 料金表を薄灰の面に置くときは表の面を白に */
.t-bg-blue .u-tbl{background:#fff}
/* v9.7.4（2026-09-07 金島さん「このPC画像は必要ない」）：CTA の画像を外し、白い箱を中央 800px に */
.t-cta .t-in{justify-content:center}
.t-cta__box{flex:none;width:800px;max-width:100%}
/* ============================================================
v9.9.0（2026-09-07）動き＝js/motion.js（GSAP＋ScrollTrigger＋Lenis）。★日本のスタンダード表 §10
CSS は下地だけ（初期状態・hover の色・帯のスタイル）。transform/opacity は JS が持つ
============================================================ */
html.js-motion .rv{opacity:0}
html.js-motion .t-sec .t-h2,html.js-motion .u-h2s{opacity:0}
.t-h2 .ch,.u-h2s .ch{display:inline-block;will-change:transform}
.t-row__img,.t-more .im,.t-style__img img,.u-rep__photo img{will-change:clip-path,transform}
.t-more .im,.t-card__img{overflow:hidden}
.t-more .im img,.t-card__img img{transform-origin:center;will-change:transform}
/* 追従ヘッダー（quoitworks/TAM/frontier の is-scrolled） */
.ardeo-head--ai{position:sticky;top:0;z-index:60;transition:box-shadow .3s ease,background .3s ease}
.ardeo-head--ai.is-scrolled{box-shadow:0 2px 14px rgba(0,0,0,.08)}
/* hover の色（transform は JS） */
.t-field,.t-card,.t-btn,.t-card__btn{transition:box-shadow .3s ease,background .3s ease,color .3s ease,border-color .3s ease}
.t-field:hover,.t-card:hover{box-shadow:0 10px 24px rgba(16,43,76,.13)}
.t-btn,.t-card__btn,.cta{transition:transform .3s ease,box-shadow .3s ease,background .3s ease,color .3s ease}
.t-btn--gold:hover,.t-btn--big:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(240,66,26,.28)}
.t-btn--line:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(6,199,85,.25)}
.t-btns .t-btn:hover,.t-row .t-btn:hover{transform:translateY(-2px)}
.hd-nav a{transition:color .3s ease}
/* v9.9.4：流れる「CONTACT」の輪郭文字は手本に実在しない私の創作＝削除（金島さん「黒背景に黒の帯・センスない」） */
@media(prefers-reduced-motion:reduce){html.js-motion .rv,html.js-motion .t-sec .t-h2,html.js-motion .u-h2s{opacity:1}}
/* v9.9.1（2026-09-07）見出しの下線・数字の縦棒・上へ戻る */
.t-h2,.u-h2s{position:relative}
.t-h2 .ul,.u-h2s .ul{position:absolute;left:50%;bottom:-14px;width:48px;height:3px;margin-left:-24px;background:#F0421A;transform-origin:50% 50%;transform:scaleX(0)}
.t-bg-navy .t-h2 .ul{background:#F0421A}
.t-num{--bar:1;border-left:0;position:relative}
.t-num::before{content:"";position:absolute;left:-3px;top:0;width:3px;height:100%;background:#17140F;transform-origin:top;transform:scaleY(var(--bar))}
.totop{position:fixed;right:24px;bottom:24px;width:48px;height:48px;z-index:70;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease,visibility .4s}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop svg{position:absolute;inset:0;width:48px;height:48px;transform:rotate(-90deg)}
.totop .bg{fill:#17140F;stroke:rgba(23,20,15,.15);stroke-width:2}
.totop .pr{fill:none;stroke:#F0421A;stroke-width:2;stroke-dasharray:138.23;stroke-dashoffset:138.23;stroke-linecap:round}
.totop .ar{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-3px 0 0 -5px;border-left:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg);transition:transform .3s ease}
.totop:hover .ar{transform:translateY(-3px) rotate(45deg)}
@media(max-width:899px){.totop{right:14px;bottom:14px}}
/* v9.9.3（2026-09-07 金島さん「なぜここだけ画像の縦幅が広い？全部調べて合わせて」）
原因＝DESIGN だけ 4:3（900×675）で枠 912×592 を埋め、他3枚は 1.86 を contain で 912×490 に縮めていた。
対処＝DESIGN を Photoshop の Content-Aware Fill で左右に広げて 1.86（1255×675）にし、4行とも同じ枠＝幅 47.5vw（最大912）・比率 1710:920・行の縦中央 */
.t-row__img{height:auto;aspect-ratio:1710/920;top:50%;translate:0 -50%;object-fit:cover}
.t-row__img--fit{object-fit:cover}
/* ============================================================
v9.9.5（2026-09-07 金島さん「全く色が合ってない／短い横線は何？／色の使い方が理解できていない。Webで勉強して」）
調べた原則（★日本のスタンダード表 §11）：アクセント色はボタン・リンク・アイコンだけ（10%）／暗い面に明るい色の大きな塊を置かない／
暗い面の白文字は 90% 不透明度／手本に無い装飾を足さない
============================================================ */
.t-row h2 span{background:transparent;color:#fff;padding:0;display:inline} /* 帯を外す＝白文字だけ */
.t-row p{color:rgba(255,255,255,.9)} /* 暗い面の本文＝白90% */
.t-h2 .ul,.u-h2s .ul{display:none} /* 私の創作の短い横線＝削除 */
.totop .pr{stroke:rgba(255,255,255,.8)} /* 朱はCTAだけ。リングは白 */
/* v9.9.6（2026-09-07 金島さん「ラインは緑」）：ヘッダーの LINE 枠＝LINE の緑 #06C755・白文字（外部ブランド色は塗り替えない） */
.ardeo-head--ai .hd-tel{background:#06C755;color:#fff!important;border-left:0}
.ardeo-head--ai .hd-tel small{color:rgba(255,255,255,.9)}
.ardeo-head--ai .hd-tel b{color:#fff}
.ardeo-head--ai .hd-tel:hover{background:#05a847}
/* v9.9.7（2026-09-07 金島さん「料金を見るは不要」）：ヘッダーのボタンは「お問い合わせ」と LINE の2つ */
.ardeo-head--ai .hd-b2{margin-left:0}
/* v9.10.1（2026-09-07 金島さん「お問い合わせ・相談の色は揃える。オレンジがきついので見やすい色で」）
主CTA（ヒーロー「まずは相談してみる」・最下部「無料で相談する」・フォーム送信）＝ヘッダー「お問い合わせ」と同じ墨 #17140F・白文字。
朱 #F0421A はキャッチの「火」1点だけ（★配色の根拠 2026-09-05） */
.hero .cta,.hero--v8 .cta{background:#17140F!important;color:#fff!important;box-shadow:none}
.hero .cta:hover,.hero--v8 .cta:hover{background:#2A251E!important}
.t-btn--gold,.t-btn--big{background:#17140F;border-color:#17140F;color:#fff}
.t-btn--gold:hover,.t-btn--big:hover{background:#2A251E;border-color:#2A251E;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.ardeo-btn{background:#17140F}.ardeo-btn:hover{background:#2A251E}
.cf-row label b,.cf-row .cf-label b,.cf-agree b{background:#17140F} /* フォームの「必須」札も墨 */
.cf-err,.cf-alert{color:#B3301A;border-color:#B3301A} /* エラーは暗めの赤（コリス：暗い面でなくても赤は明度を下げる） */
/* v9.10.2（2026-09-07 金島さん「黒はダメ。強調するところに黒は使わない」）
強調色＝確定配色の朱 #F0421A。hover #D6350F。
★2026-09-09：ここで #F0421A に上書きしていたため全ページの朱が暗くくすんでいた
（金島さん「オレンジをもう少し明るい色に。黒くくすんでいます」）。確定配色に戻した。
★--ember を :root で再定義しない。色を変えたいときは 15 行目の定義そのものを直す。
使う場所＝ヘッダー「お問い合わせ」・ヒーロー「まずは相談してみる」・最下部「無料で相談する」・フォーム送信・「必須」札・キャッチの「火」 */
:root{--ember:#F0421A}
.ardeo-head--ai .hd-b2{background:#F0421A;color:#fff!important}
.ardeo-head--ai .hd-b2:hover{background:#D6350F}
.hero .cta,.hero--v8 .cta{background:#F0421A!important;color:#fff!important}
.hero .cta:hover,.hero--v8 .cta:hover{background:#D6350F!important}
.hero .band b{color:#F0421A} /* 黒帯の中の「火」は明るい朱のまま（暗い面では明るい色が読める） */
.t-btn--gold,.t-btn--big{background:#F0421A;border-color:#F0421A;color:#fff}
.t-btn--gold:hover,.t-btn--big:hover{background:#D6350F;border-color:#D6350F;transform:translateY(-2px);box-shadow:0 10px 24px rgba(240,66,26,.25)}
.ardeo-btn{background:#F0421A}.ardeo-btn:hover{background:#D6350F}
.cf-row label b,.cf-row .cf-label b,.cf-agree b{background:#F0421A}
.t-card__btn{background:#F0421A}.t-card__btn:hover{background:#D6350F}
.t-btn--line{background:#06C755;border-color:#06C755} /* LINE は緑のまま */
/* v9.11.0（2026-09-08）ARDEO SHOP＝C型2列を中央に／SNS はフッター最下段にアイコンで */
.t-more--2{grid-template-columns:repeat(2,367px);justify-content:center}
@media(max-width:899px){.t-more--2{grid-template-columns:1fr}}
.t-foot__sns{width:1320px;max-width:calc(100% - 40px);margin:0 auto;padding:0 0 34px;display:flex;justify-content:center;gap:16px}
.t-foot__sns a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff;transition:background .3s ease,border-color .3s ease}
.t-foot__sns a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
.t-foot__sns svg{width:22px;height:22px;display:block}
/* ===================================================================
v9.12.2 スマホ幅の横スクロールを止める（2026-09-08 実測して修正）
実測＝幅500px で .t-card が右に 19px はみ出し、documentElement.scrollWidth が
519（=innerWidth 500 を超える）＝横スクロールが発生していた。
原因＝カード内の .t-card__price（24px の数字）と .t-card__btn（幅 100〜130px 固定）が
横に並ぶため、2列グリッドの1マス幅に収まらずカードを押し広げていた。
=================================================================== */
@media(max-width:640px){
/* 商品カードは1列。2列だと「¥2,500 ＋ カゴに入れる」が1行に収まらない */
.t-cards{grid-template-columns:1fr;gap:14px}
.t-card{padding:14px}
.t-card__name{font-size:16px;line-height:26px}
/* 価格とボタンは縦に積む＝幅の取り合いをなくす */
.t-card__foot{flex-direction:column;align-items:stretch;gap:10px}
.t-card__price{font-size:22px}
.t-card__btn{width:100%;height:44px;font-size:14px}
}
/* 幅の取り合いが起きる箱に共通の保険＝はみ出しても中で折り返す */
.t-card,.t-card__foot,.t-card__name,.t-card__copy{min-width:0}
.t-card__name{overflow-wrap:anywhere}
/* ページ全体で横スクロールを起こさない（原因を直したうえでの最後の砦） */
html,body{overflow-x:hidden}
/* v9.12.3 スマホのカテゴリタブ＝全幅の縦積み（2026-09-08）
実測＝幅500px で .t-btn--s が 220px 固定のため flex-wrap で1列に折り返し、
最終行だけ左端が 130→140px にずれて「階段状」に見えていた。
スマホでは幅を揃えて縦に積む（押しやすさも上がる）。 */
@media(max-width:640px){
/* 手本＝felissimo.co.jp のスマホ版（2026-09-08 実測：flex-wrap:wrap・子の幅 233px＝画面幅の約半分）
縦1列にすると商品までが遠くなるため 2 列にする。grid なら幅0のテキストノードに影響されない。 */
.u-tabs{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;margin-bottom:28px}
.u-tabs .t-btn--s{width:calc(50% - 5px);flex:none;height:46px;font-size:13px}
/* 下部の「ご利用ガイド」「一覧にない相談」は文が長いので縦積みのまま */
.t-btns{flex-direction:column;align-items:stretch;gap:10px}
.t-btns .t-btn--s{width:100%;height:48px}
}
/* v9.12.3 スマホのヘッダー「お問い合わせ」が2行に折れる（2026-09-08 実測）
原因＝.hd-b2 が width:130px 固定・font-size 14px で、
「お問い合わせ」6文字（14px×6＝84px）＋左右の余白が 130px に収まらず折り返していた。 */
@media(max-width:640px){
.hd-b1,.hd-b2{width:auto;min-width:96px;height:44px;padding:0 12px;margin:16px 0 0 8px;
font-size:13px;white-space:nowrap;line-height:1}
.hd-right{right:12px}
.hd-logo img{height:22px}
}
/* v9.12.6 ボタンの並びに WordPress の wpautop が挿入する
を無効化（2026-09-08 実測）
実測＝.u-tabs の子が [A, BR, A, BR, A, BR, A] の7個。この
（display:block・高さ21px）が
flex アイテムとして強制改行を起こし、2列指定にしてもボタンが全部左列に縦積みされていた。
HTML 側の改行が原因なので、並びを作るコンテナ内の
は表示しない。 */
.u-tabs br,.t-btns br,.t-cta__sub br,.t-cards br{display:none}
/* ===================================================================
v9.13.0 スマホ表示の修正（2026-09-08・金島さんの指摘6点）
実測（幅500px・375px 相当）してから直した。指摘と実測値の対応：
①「キャッチの黒背景が中央からずれている」＝ .band が L=24／右余白238 の左寄せだった
②「ボタンが中央になってない」＝ h1 が R=500（右端まで）で中央計算が崩れていた
③「アイコン・価格は中央揃え」＝ .t-field の中身が全部 ta=start・L=33 の左寄せだった
④「画像と文字の間隔が広すぎる」＝ 紺面 .t-row__tx の padding-top 22px＋h2 の margin-bottom 26px
⑤「左に詰めすぎ、余白がない」＝ 紺面 .t-row__tx が L=0・左右 padding 0 で画面の端に張り付いていた
⑥「最後の双眼も中央」＝ .t-cta__box が L=-8・W=516 で画面幅からはみ出していた
=================================================================== */
@media(max-width:899px){
/* ①② スマホのヒーロー＝キャッチ・本文・ボタンをすべて中央に揃える */
.ardeo-hero--sp .ardeo-hero__inner{text-align:center;padding:0 20px}
.ardeo-hero--sp h1{width:auto;text-align:center;margin:0 0 20px}
/* 黒帯は1枚のまま（中に .ln が2行）。h1 を中央寄せにすれば帯ごと中央に来る。
帯の中の文字は左揃えのまま＝2行の頭が揃って読みやすい。 */
.ardeo-hero--sp h1 .band{display:inline-block;text-align:left}
.ardeo-hero--sp h1 .band .ln{display:block;white-space:normal}
.ardeo-hero--sp .ardeo-hero__copy p{text-align:center;margin-left:auto;margin-right:auto}
/* ボタン2本＝横並びのまま中央。狭いときは縦に積む */
.ardeo-hero--sp .ardeo-hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.ardeo-hero--sp .ardeo-hero__cta .ardeo-btn{flex:0 1 auto;min-width:150px}
/* ③ 分野カード（デザイン制作・動画・映像制作…）は中身を中央揃えに */
.t-field{align-items:center;text-align:center}
.t-field .ic{margin-left:auto;margin-right:auto}
.t-field h3,.t-field p,.t-field .pr{width:100%;text-align:center}
/* ④⑤ 紺面（SERVICE の4行）＝左右に余白を付け、画像と文字の間を詰める。
★ .t-row--rev（左右反転の MOVIE・AI の行）は詳細度が高い既存指定
「.t-row--rev .t-row__tx{padding:22px 0 0}」に負けて padding-left が 0 のままだった
（実測：行1・行3 だけ padLeft=0px・h2 が L=0 で画面左端に張り付き）。両方に効く形で指定する。 */
/* ★スマホでは画像を縦中央に寄せない（v9.9.3 の top:50%/translate は PC の絶対配置用で
メディアクエリ外に書かれていたため全幅に効き、積み上げ表示の画像が自分の高さの半分だけ
上へずれて、画像と説明文の間に黒い空白ができていた）。説明文は画像のすぐ下に置く。 */
.t-row__img,.t-row--rev .t-row__img{position:static;top:auto;translate:none}
.t-row__tx,.t-row--rev .t-row__tx{padding:20px 20px 0}
.t-row h2{margin-bottom:14px}
.t-row__tx p{margin-bottom:16px}
/* ⑥ 最後のCTA＝箱を画面内に収め、中身を中央に */
.t-cta .t-in{width:100%;max-width:calc(100% - 32px)}
.t-cta__box{width:100%;max-width:100%;box-sizing:border-box;text-align:center}
.t-cta__box h2,.t-cta__box p{text-align:center}
/* 実測（v9.13.0 反映後）＝ .t-cta__sub の左余白0／右余白32 でずれていた。
margin を 0 にしただけでは親の padding 差が残るため、幅と左右 auto で中央に固定する。 */
/* この要素は class="t-in t-cta__sub" の2クラス。単一クラス指定だと .t-in の
max-width:calc(100% - 32px) と詳細度が並び、margin の auto も効かなかった
（実測：margin が 28px 0px 0px のまま・左余白0／右余白32）。2クラスで指定して確実に中央へ。 */
.t-in.t-cta__sub{width:100%;max-width:calc(100% - 32px);margin:28px auto 0;box-sizing:border-box;
display:flex;flex-direction:column;align-items:center;justify-content:center}
.t-in.t-cta__sub .t-btn{width:100%;max-width:100%;box-sizing:border-box}
}
/* ===================================================================
v9.14.0 スマホのページ切り替え＝ハンバーガーメニュー（2026-09-08）
実測で判明＝スマホ幅では .hd-nav が display:none になり、代わりの入口が
一つも無かった（金島さん「ヘッダーのページ切り替えがなくなっている」）。
手本＝felissimo.co.jp のスマホヘッダー（2026-09-08 実測：
ヘッダー高さ49px／アイコン 42×49px を右端に並べる／右端余白1px）。
ARDEO はヘッダー75px なのでボタンは 44×44 とし、右端から12px に置く。
=================================================================== */
.hd-burger{display:none}
@media(max-width:899px){
/* ボタン＝3本線。押せる面積を 44×44 確保する（指で押せる最小） */
.hd-burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
width:44px;height:44px;margin:16px 0 0 6px;padding:0;border:0;background:transparent;cursor:pointer}
/* 実測（v9.14.0 反映後）＝3本線が画面の右端 0px に張り付き、「お問い合わせ」と窮屈だった。
ヘッダー全体を右へ 12px 空け、お問い合わせボタンを少し細くして間を作る。 */
.hd-right{right:12px}
.hd-b2{min-width:104px;padding:0 10px}
.hd-burger span{display:block;width:22px;height:2px;background:var(--ink);
transition:transform .25s ease,opacity .2s ease}
.hd-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* メニュー本体＝右から出る。開くまでは hidden で読み上げからも外す */
.hd-drawer{position:fixed;top:0;right:0;z-index:80;width:min(320px,86vw);height:100dvh;
background:var(--paper);box-shadow:-8px 0 24px rgba(0,0,0,.12);
transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);
overflow-y:auto;-webkit-overflow-scrolling:touch}
.hd-drawer.is-open{transform:translateX(0)}
.hd-drawer__inner{padding:76px 20px 40px}
.hd-drawer__nav{display:flex;flex-direction:column}
.hd-drawer__nav a{display:flex;align-items:baseline;gap:10px;padding:15px 2px;
border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.hd-drawer__nav a .ja{font-size:16px;font-weight:700;line-height:1.4}
.hd-drawer__nav a small{font-family:"Barlow","Inter",sans-serif;font-size:11px;letter-spacing:.08em;color:var(--sub)}
.hd-drawer__btns{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.hd-drawer__btns .t-btn--s{width:100%;height:48px}
.hd-drawer__line{background:#06C755;border-color:#06C755;color:#fff!important}
/* 背面の覆い＝押すと閉じる */
.hd-drawer__veil{position:fixed;inset:0;z-index:75;background:rgba(23,20,15,.45);
opacity:0;transition:opacity .25s ease}
.hd-drawer__veil.is-open{opacity:1}
/* メニューが開いている間は背面をスクロールさせない */
body.is-drawer-open{overflow:hidden}
}
/* ===================================================================
v9.15.0 スマホのトップビュー（2026-09-08 金島さん指示）
・PC 画像（mockup.png）は削除 → .ardeo-hero__visual を出さない
・ARDEO と ART × NEO を2段にして、キャッチコピーの上段までに収め、横に流す
流し方は既存のマーキー（.ardeo-marquee の @keyframes flowing）と同じ仕組みを使う。
色は確定配色の朱 #F0421A（--ember）を薄く敷く。装飾色は足さない。
=================================================================== */
.sp-stroke{display:none}
@media(max-width:899px){
/* PC 画像を消す */
.ardeo-hero--sp .ardeo-hero__visual{display:none}
/* ヒーロー＝上に流れる文字2段、その下にキャッチ */
.ardeo-hero--sp{padding-top:0}
.sp-stroke{display:block;position:relative;width:100%;overflow:hidden;
padding:14px 0 2px;pointer-events:none;user-select:none}
.sp-stroke__row{overflow:hidden;width:100%}
/* 2段を詰めて1つの塊に見せる（読ませるのではなく面として見せる） */
.sp-stroke__row + .sp-stroke__row{margin-top:-2vw}
/* 2本の帯を無限に流す。--track は同じ文字を4つ並べ、-100% までで1周 */
.sp-stroke__track{display:flex;white-space:nowrap;width:max-content;
animation:flowing 26s linear infinite;will-change:transform}
.sp-stroke__row--2 .sp-stroke__track{animation-duration:34s;animation-direction:reverse}
/* ★金島さん指示（2026-09-08）「読ませるのではなく演出として見せるだけ」。
文字は画面幅に対して大きく取り、上下が切れて流れていく＝面としての動きにする。
手本＝既存の .ardeo-marquee（PC版で 160px／スマホ 80px の巨大英字を流している型）。
文字サイズは vw 基準にして、どの端末でも同じ「はみ出し方」になるようにする。 */
.sp-stroke__track span{font-family:"Barlow","Inter",sans-serif;font-weight:700;
letter-spacing:-.03em;line-height:.82;padding-right:.28em;color:var(--ember);
white-space:nowrap}
/* 1段目 ARDEO＝画面幅の 26vw（375px なら約98px）／2段目 ART × NEO＝16vw（約60px） */
.sp-stroke__row .sp-stroke__track span{font-size:26vw;opacity:.30}
.sp-stroke__row--2 .sp-stroke__track span{font-size:16vw;opacity:.20}
/* キャッチはこの下。上の余白を詰めて「上段までに収まっている」ようにする */
.ardeo-hero--sp .ardeo-hero__copy{padding-top:10px}
}
/* 動きを減らす設定の端末では流さない（既存マーキーと同じ扱い） */
@media(prefers-reduced-motion:reduce){.sp-stroke__track{animation:none}}
/* ===================================================================
v9.16.0 ヒーロー PC版（2026-09-08 全面作り替え）
元にした形＝金島さんが GPT に描かせたイメージ。
★画像として使うのは「手書き文字3種（SVG）」と「人物合成写真」だけ。
ART × NEO・リード文・CTA は HTML テキスト＝検索に読まれる（金島さん
「SEOの検索に弱くなる、動きをつけることができない」→ 画像で貼らない）。
★スマホ（900px未満）はこの .nh を出さない。写真が左の空いた PC 用構図のため。
=================================================================== */
.nh{display:none}
@media(min-width:900px){
.nh{display:block;position:relative;overflow:hidden;
background:var(--paper);
min-height:min(84vh,720px)}
/* 背景＝人物合成写真。右側に置き、左は紙色のまま残して文字を載せる */
.nh__bg{position:absolute;inset:0;z-index:0}
.nh__bg img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
/* 左半分を紙色でなじませる（写真自体が左に向かって明るくなっているので、繋ぎだけ） */
.nh__bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,var(--paper) 0%,rgba(243,240,234,.92) 26%,rgba(243,240,234,0) 52%)}
/* 中身
★手本＝金島さんが GPT に描かせた PC 版イメージ（1746×901）を 2026-09-08 に実測：
・ART × NEO の高さ＝画面高の 25.6%（231px）／幅＝画面幅の 48.6%（848px）
・左余白＝画面幅の 3.6%（63px）
・手書きキャッチの幅＝画面幅の 32.4%（565px）
旧実装は ART × NEO が 9.4% しかなく（2.7倍足りない）、左余白は 8.3% と広すぎた。
金島さん「文字の大きさ、迫力がありません」→ 実測値に合わせる。 */
.nh__in{position:relative;z-index:2;
width:100%;max-width:none;margin:0;padding:0 3.6vw;
min-height:min(84vh,720px);display:flex;align-items:center}
.nh__tx{width:min(56vw,980px)}
/* 見出し＝手書き（SVG）＋ ART × NEO（テキスト） */
/* ★金島さん「文字の重なり」→ 手書きと ART が近すぎた。行間を確保する。 */
.nh__h1{margin:0 0 22px;line-height:1}
.nh__hand{display:block;width:min(32.4vw,565px);margin:0 0 clamp(10px,1.4vw,22px);color:var(--ember)}
.nh__hand svg{width:100%;height:auto;display:block}
/* ART × NEO＝実測どおり画面高の約26%。1文字ずつ立ち上がる。黒 → 朱のグラデーション */
/* ★見本を実測（2026-09-08）：ART の「線の太さ ÷ 文字高」＝17.6%。
私の実装は Barlow 700 で 14.7% しかなく、これが「文字が細い」の正体だった。
→ Archivo Black（単一ウェイトの極太）を第一候補にし、Barlow は 900 で受ける。
★× は align-items:baseline だと字形の差で沈む。center に変えて縦位置を揃える。 */
/* 実測（v9.16.4）＝12.4vw だと NEO の O が写真の人物に食い込んで潰れて見えた。
見本では文字の右端が写真の手前で止まっている。11.2vw に落として左の紙色の範囲に収める。 */
/* v9.18.0 ART × NEO ⇄ ARDEO のスライド入れ替え。
2つを同じ場所に重ね、片方だけを表示する。高さは中身から決まるので
ラッパーは inline-grid にして両方を同じマスに置く（高さが暴れない）。 */
/* ★v9.20.0 ロール方式に作り替えた（金島さん「異界の動作で止まるからおかしい、
ロール流れるようにして」）。
旧＝2つを重ねて opacity と transform を切り替える方式。フェードで一度消えるため
「止まって切り替わる」ように見え、カクつきが取れなかった。
新＝縦に積んだ2つを、帯ごと上へ流す（電光掲示板のロール）。
・消えない＝常に動いている
・transform だけを動かす＝GPU で滑らか
・窓（overflow:hidden）の高さは1行ぶん */
/* ★窓の高さは「中の文字」の大きさで決める。
実測（v9.20.0）＝.nh__swap に height:1em と書いたが、1em は親 .nh__h1 の
48px を指してしまい、中身 153px の文字が上下で切れた。
→ 窓自身にも同じ font-size を持たせ、1em が文字と同じ高さになるようにする。
文字の下に出るぶん（ディセンダ）を少し足して 1.06em にする。 */
/* ★v9.21.0 ロールを「横」に変えた（金島さん「縦ではなく横です」）。
★カクつきの根本対処：CSS transition ではなく Web Animations API で
1本のアニメーションとして流す。transition は JS が値を書き換えた瞬間に
始まるため、描画タイミングとずれて引っかかっていた（これが「角つき」の正体）。
窓＝1枚ぶんの幅。中身は横に並べ、左へ流す。 */
/* ★金島さん（2026-09-08）「メインタイトルのスライドインの位置を左に寄せて」
窓の幅が親いっぱい（100%）だったため、1枚ぶんの移動量も広く、
文字が右寄りの位置から入ってきていた。窓を文字の実寸に近い幅に絞る。 */
.nh__swap{display:block;position:relative;overflow:hidden;
font-family:"Encode Sans Condensed","Barlow","Inter",sans-serif;font-weight:900;
font-size:clamp(84px,11.7vw,200px);line-height:1;
height:1.06em;width:min(100%,9.4em)}
.nh__roll{display:flex;flex-direction:row;align-items:center;
height:100%;width:max-content;
transform:translate3d(0,0,0);
will-change:transform;backface-visibility:hidden}
/* 各枚は窓と同じ幅＝1枚ずつぴったり収まる */
/* ★金島さん（2026-09-08）「スライド開始位置はまだ左に。今は画像の端のギリギリから
出てくるので間隔をあける」→ 各枚の右側に余白を持たせ、文字が窓の右端に
達する前に次が入り始めるようにする（padding-right で間隔を作る）。 */
.nh__roll > .nh__an{flex:none;width:var(--slot,100%);height:100%;
font-size:1em;display:flex;align-items:center;opacity:1;
justify-content:flex-start;padding-right:1.1em;box-sizing:border-box}
.nh__an--ardeo .n{padding-right:.04em}
/* ★書体＝Encode Sans Condensed 900（2026-09-08 に見本と並べて決定）。
金島さん「ART NEO の横が狭い」→ Anton は縦長すぎた。
見本の条件＝A の頂点が平ら／線が太い／Anton より横に広い。
照合した書体：Anton（狭い）／Archivo Black・Poppins・Montserrat（A が尖る）／
Saira・Roboto Condensed（線が細い）→ Encode Sans Condensed 900 が一致。 */
.nh__an{display:flex;align-items:center;gap:.05em;
font-family:"Encode Sans Condensed","Barlow","Inter",sans-serif;font-weight:900;
/* 実測（v9.17.1）＝ART×NEO 全体幅が画面の 62.4%。見本は 48.6% で、
この差のぶん NEO の O が写真の人物に食い込んでいた。13.6vw → 10.6vw に落とす。 */
font-size:clamp(84px,11.7vw,200px);line-height:.9;letter-spacing:-.022em;
white-space:nowrap}
.nh__an .a{color:var(--ink)}
/* ★金島さん「× も変です。書体を分けるべきでは？」
見本の × は太く四角い＝本文の書体とは別。Archivo 900 の × は角が立っていて見本に近い。
大きさも見本は本文の 0.62 倍程度で、0.5 倍だと小さすぎた。 */
.nh__an .x{font-family:"Archivo","Inter",sans-serif;font-weight:900;
color:#FF6B45;font-size:.62em;padding:0 .06em;opacity:1;
transform:translateY(-.03em)}
/* ★金島さん「光の演出がダサい」→ 白熱の光は入れない。
見本どおり、左が濃く右へ明るくなるだけの素直なグラデーションにする。 */
/* ★金島さん「オレンジの文字がくすんだ暗い色。明るくして」
見本を実測（2026-09-08）＝朱の平均 RGB(208,51,21)／最も明るい画素 RGB(244,107,75)。
私の実装は暗い側に寄っていたので、全体を明るい朱〜橙に持ち上げる。
★最後に入れる「光る演出」は、このグラデーションの上に別レイヤーで足す予定。 */
.nh__an .n{background:linear-gradient(100deg,#E5310D 0%,#F0421A 26%,#FF5A28 58%,#FF7B3C 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.nh__an .a{color:var(--ink)}
.nh__lead{margin:0 0 32px;font-family:"Noto Sans JP",sans-serif;
font-size:clamp(20px,1.85vw,30px);line-height:1.72;font-weight:500;color:var(--ink)}
/* CTA＝オレンジのグラデーションの丸ボタン＋右に注記 */
.nh__cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.nh__btn{display:inline-flex;align-items:center;gap:22px;
height:clamp(72px,6.4vw,96px);padding:0 clamp(34px,3.4vw,52px);border-radius:999px;text-decoration:none;
background:linear-gradient(100deg,#F0421A 0%,#FF7A2F 100%);
color:#fff!important;font-size:clamp(20px,1.8vw,28px);font-weight:700;
transition:transform .25s ease,box-shadow .25s ease}
.nh__btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(240,66,26,.28)}
.nh__btn .ar{width:22px;height:2px;background:#fff;position:relative;flex:none}
.nh__btn .ar::after{content:"";position:absolute;right:0;top:-4px;
width:10px;height:10px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.nh__note{margin:0;padding-left:24px;border-left:1px solid var(--line);
font-size:14px;line-height:24px;color:var(--sub)}
/* 右上の手書き英字＝装飾 */
/* 見本では右上の英字が「写真の左端の明るい部分」に載っている＝写真に埋もれない位置 */
/* 実測（v9.16.1）＝left:58.5vw だと人物の顔に重なった。
見本では写真が始まる手前の明るい帯に載っている。左へ寄せ、上も少し下げる。 */
/* 実測（v9.16.4）＝left:54vw でも人物の顔にかかった。
写真が始まる直前の明るい帯（左から約49%）に、上寄りで置く。 */
/* ★金島さん（2026-09-08）「上の手書き位置がもう少し左です」 */
.nh__deco{position:absolute;left:45.5vw;top:4%;
width:clamp(120px,9vw,168px);color:var(--ember);opacity:.42;z-index:3;pointer-events:none}
.nh__deco svg{width:100%;height:auto;display:block}
/* ★金島さん指示（2026-09-08）「下の付け足した三角の背景が入らない。元背景のままにしろ」
→ 私が clip-path で足していたオレンジの斜めの面を削除。
背景写真（hero_photo）に元からオレンジの面が入っており、二重になっていた。
手書き「つくる、伝わる、つぎの未来へ。」だけを写真のオレンジの上に置く。 */
.nh__slant{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;
background:none;clip-path:none;pointer-events:none}
/* ★金島さん「右下の文字は、右上に調整する必要があります」
背景写真のオレンジ面を実測（2026-09-08・1440px）＝斜辺は
y=78% で左端 x=画面の73%、y=86% で 64%。下へ行くほど左に広がる。
文字を下に置くと斜辺の外（写真側）にはみ出すため、右上へ寄せて面の中に収める。 */
/* ★見本を実測（2026-09-08）＝手書きの幅は画面の 25.3%／右余白 1.9%／下余白 5.0%。
私の実装は 17.5% と小さく、下に寄りすぎて面の左上が大きく空いていた。
金島さん「もう少し寄せないといけない」→ 見本の数値に合わせる。 */
/* ★金島さん指摘（2026-09-08・複数回）「右が空いている／左が被っている。右に移動しろ」
right:1.9vw（1440px で 27px）ではまだ右に余白が残り、そのぶん左が
写真の葉・タブレットに重なっていた。右端まで寄せて左の被りを解消する。 */
/* ★実測（v9.23.1・1440px）＝要素の右余白は 9px しかないのに、見た目はまだ右が空く。
理由＝手書きは2行組みで、1行目「つくる、伝わる、」が短く、SVG の右上に空きがある。
オレンジ面は下へ行くほど左に広がるので、面の形に沿って
「もっと右・もっと下」へ置くとバランスが取れる。 */
/* ★実測（2026-09-08・v9.23.3・1440px）＝文字の右端と面の右端の差は
平均 203px、最大 619px。原因は SVG の余白ではなく「文字組み」だった：
2行目「つぎの未来へ。」は viewBox の右端 100% まで届くが、
1行目「つくる、伝わる、」は 78% までしかない＝1行目の右に 22% の空きがある。
1行目を動かして右端を揃えると行が重なって読めなくなるため（実際に試した）、
要素そのものを右へ出して、その空きを画面外へ逃がす。
★句点「。」＝2行目の右端が切れないことが上限。right:-1.2vw では切れた。 */
/* ★2026-09-08 金島さんの画面（約2000px幅）と私の確認画面（1440px）で
見え方が違っていた。原因＝right を vw で指定していたため、画面が広いほど
大きく動き、句点「。」の切れ方が変わっていた。
→ 画面幅に依存しない px 指定にする。文字の右端を面の右端に合わせる。 */
/* ★実測（2026-09-08）＝画面が広いほど背景写真のオレンジ面が下に来るため
（写真が横に伸びる）、2000px では文字の上端が面より 22px はみ出して
写真の上に載っていた。1440px では枠内。
→ 下端の余白を詰めて文字を下げ、広い画面でも面の中に収める。
幅も少し抑えて、右の切れと上のはみ出しを同時に防ぐ。 */
.nh__mirai{position:absolute;right:6px;bottom:22px;
width:clamp(200px,15.5vw,300px);color:#fff}
.nh__mirai svg{width:100%;height:auto;display:block}
}
/* 1400px 未満＝内容幅が縮むぶん、装飾の位置を内側に寄せる */
@media(min-width:900px) and (max-width:1400px){
.nh__deco{right:5vw;top:5%}
.nh__mirai{right:4vw}
}
/* ===================================================================
v9.18.0 ヒーローの動き（2026-09-08 金島さん指示）
① 手書き風の動き＝SVG が左から書かれていくように現れる
② ART × NEO の煌めき＝光の帯が文字の上を走る
③ ART × NEO ⇄ ARDEO のスライド入れ替え（繰り返し）
=================================================================== */
@media(min-width:900px){
/* ① 手書き＝マスクで左から右へ現れる（筆で書いていく見え方）。
SVG は塗りのパスなので stroke-dasharray は使えない。
代わりに右向きのグラデーションマスクを動かして「書かれていく」ようにする。 */
/* ★v9.19.0 手書きの動きを作り直した（金島さん「手書き風の演出になっていない」）。
旧＝マスクを左から右へ動かす方式。これは「帯が通過する」だけで、文字の縦棒が
途中でぶつ切りに現れ、筆で書いた見え方にならなかった。
新＝SVG のパスを「画（サブパス）」ごとに分け、書き順（左→右／同じ文字は上→下）に
1画ずつ現す。catch_hi.svg は 22 画、catch_mirai.svg は 25 画に分割済み
（hero_src/svg/split_strokes.py で変換）。 */
/* ★金島さん（2026-09-08）「アイデアの手書きもループで繰り返して」
1回きり（forwards）をやめ、ロールと同じ 1周期（HOLD+SHINE+REST+MOVE＝4.2秒）×2 の
8.4 秒で繰り返す。書く（〜1.9秒）→ 見せる → 消える → また書く。 */
.nh__hand .st{opacity:0;transform:translateY(7px) scale(.985);transform-origin:center}
.js-motion .nh__hand .st{
animation:nhStroke 8.4s cubic-bezier(.2,.7,.3,1) infinite;
animation-delay:calc(var(--i) * .072s)}
/* ★@keyframes nhStroke の定義は、メディアクエリの外（ファイル末尾）に置いた。
ここに書くと 900px 未満では定義が存在せず、スマホで手書きが
opacity:0 のまま一度も現れなかった（2026-09-08 実測で判明）。 */
/* ② 煌めき＝光の帯が NEO の上を左から右へ走る。
文字は background-clip:text なので、その上に別レイヤーで白い帯を重ね、
同じ文字型で切り抜く（::after に同じ文字を入れる）。 */
.nh__an .n{position:relative}
/* ★v9.23.0 光が文字の端に「かかったまま止まる」のを直した。
金島さん「文字の端の方が、マスクがかかっているのがかかっていないのがある。
これがカクカクの正体です」。
旧の数式＝background-size:260% の帯の中で、光は幅の 44〜56% にあった。
位置を 180% → -80%（260%ぶん）動かしても、開始・終了のどちらでも
光の裾が文字の端に残る＝端だけぼやけた状態で止まっていた。
新＝帯を「光だけ」にし（両脇は完全な透明）、
光の幅ぶん余分に動かして、始まりも終わりも文字の外へ完全に抜けきるようにする。
・帯の幅 200%、光は帯の中央 20% ぶん
・移動は -110% → 210%（320%）＝文字幅の外から外まで */
.nh__an .n::after{
content:attr(data-t);position:absolute;left:0;top:0;
background:linear-gradient(100deg,
rgba(255,255,255,0) 40%,
rgba(255,246,232,.92) 50%,
rgba(255,255,255,0) 60%);
background-repeat:no-repeat;
background-size:200% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;
pointer-events:none;
/* --shine が 0 のとき光は左の外、1 のとき右の外。どちらも文字に一切かからない */
background-position:calc(-110% + var(--shine,0) * 320%) 0;
opacity:var(--shine-on,0)}
/* 煌めきの位置は JS が1本の時計から --shine（0→1）に書き込む。
v9.22.0 で CSS の独立したアニメーションは廃止済み。 */
/* 動きを減らす設定の端末では止める */
@media(prefers-reduced-motion:reduce){
.js-motion .nh__hand .st{animation:none;opacity:1;transform:none}
.nh__an .n::after{--shine:0}
.nh__swap > .nh__an{transition:none}
}
}
/* ===================================================================
v9.28.0 スマホ用ヒーロー（900px未満）2026-09-08
金島さんのスマホ版イメージを元に作り替え。カードは入れない（PC版と同じ）。
動きの流れも PC 版と同じ：手書きが1画ずつ書かれる → 光が渡る →
ART×NEO ⇄ ARDEO がロールで入れ替わる。
★位置は px 指定（vw は画面幅で動く量が変わり、確認が噛み合わなくなる）。
=================================================================== */
.sh{display:none}
@media(max-width:899px){
/* 旧スマホヒーローは出さない */
.ardeo-hero--sp{display:none}
.sh{display:block;position:relative;background:var(--paper);overflow:hidden}
/* ★v9.30.0 文字を写真の上に重ねる（金島さん「しっかりと画像に重ねてください」）。
v9.29 は文字と写真を上下に分けており、見本と構造が違っていた。 */
.sh{position:relative}
/* 背景＝写真。セクション全体に敷く */
/* 写真は背面に敷く。文字はこの上に重なる */
.sh__bg{position:absolute;inset:0;z-index:0}
/* ★実測（2026-09-08・500px幅）＝object-fit:cover のせいで写真の左右が
126px ずつ切られ（940→752px に拡大して両端カット）、写真の中のオレンジ面も
ずれていた。手書きだけ画面基準で置いていたため、位置が合わなかった。
→ 写真を切らずに全部見せる。幅いっぱいに合わせ、高さは写真の比率に従わせる。 */
.sh__bg img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
/* 文字＝写真の上。上部は写真が明るいのでそのまま読める */
/* ★実測（v9.30.1）＝手書きの上が切れ、ARDEO と重なっていた。
手書きの SVG は上下に余白がほぼ無い（viewBox が文字ぴったり）ので、
行間は margin で確保する。上の余白も増やす。 */
.sh__in{position:relative;z-index:2;padding:34px 20px 0}
.sh__h1{margin:0 0 18px;line-height:1}
.sh__hand{display:block;width:min(72%,300px);margin:0 0 20px;color:var(--ember)}
.sh__hand svg{width:100%;height:auto;display:block}
/* ART × NEO＝PC版と同じ書体。スマホ幅に合わせる */
.sh__swap{font-size:clamp(46px,14.6vw,76px);height:1.06em;width:100%}
.sh__swap .nh__an{font-family:"Encode Sans Condensed","Barlow","Inter",sans-serif;
font-weight:900;letter-spacing:-.022em}
.sh__lead{margin:0;font-family:"Noto Sans JP",sans-serif;
font-size:clamp(14px,3.9vw,17px);line-height:1.75;font-weight:700;color:var(--ink)}
/* 右上の手書き英字 */
/* 375px で消えていた＝写真（z-index:0）より上にあるが、手書きの下に潜っていた。
z-index を上げ、位置も画面内に収める。 */
.sh__deco{position:absolute;right:12px;top:24px;z-index:3;
width:clamp(58px,15vw,80px);color:var(--ember);opacity:.8;pointer-events:none}
.sh__deco svg{width:100%;height:auto;display:block}
/* 写真の中のオレンジ面に載せる手書き */
/* 写真（940×1153・面は y=26%〜98%）の下部に載せる。
写真の高さが min(178vw,980px) なので、その中での位置で指定する。 */
/* ★金島さん「右下の文字は大きさ位置を調整」
写真のオレンジ面（y=26%〜98%）の下寄り・右端に、少し大きめに置く。 */
/* ★金島さん（2026-09-08）「上ギリギリにつめて画像もカット」
写真をオレンジ面の下端でカットし（940×1137）、手書きは面の上端ぎりぎりに詰める。
面は写真の y=80% 以降で安定して広がるので、その直後から置く。
位置は写真の高さ（min(178vw,980px)）に対する割合で決める。 */
/* ★金島さん（2026-09-08）「ズレてます」→ 375px 幅で手書きが右にはみ出して切れ、
人物にも重なっていた。原因＝top を vw（画面幅の割合）で指定していたため、
幅が変わると写真の中での位置がずれる。
→ 写真そのものを基準にする。.sh__bg を位置の親にして、% で指定する。
写真（940×1137）の中でオレンジ面は y=80% 以降に広がるので、その中に置く。 */
.sh__bg{position:absolute}
/* ★実測（2026-09-08・375px幅）＝手書きが右にはみ出して切れていた。
写真は object-fit:cover で左右が切られるが、手書きは画面の右端基準で
置いていたため、狭い画面ほど面の外へ出る。
→ 右余白を広めに取り、幅も抑えて、どの幅でも面の中に収まるようにする。 */
.sh__mirai{position:absolute;z-index:2;right:16px;
top:87%;width:min(52%,200px);color:#fff}
.sh__mirai svg{width:100%;height:auto;display:block}
/* CTA＝写真の下に重ねる */
.sh__cta{position:relative;z-index:2;padding:0 20px 26px;text-align:center;
margin-top:auto}
.sh__btn{display:flex;align-items:center;justify-content:center;gap:14px;
width:100%;height:62px;border-radius:999px;text-decoration:none;
background:linear-gradient(100deg,#F0421A 0%,#FF7A2F 100%);
color:#fff!important;font-size:17px;font-weight:700;
box-shadow:0 6px 18px rgba(240,66,26,.28)}
.sh__btn .ar{width:18px;height:2px;background:#fff;position:relative;flex:none}
.sh__btn .ar::after{content:"";position:absolute;right:0;top:-4px;
width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.sh__note{margin:12px 0 0;font-size:12.5px;line-height:21px;color:var(--sub)}
/* セクション全体＝写真の比率（940:1153＝1.23）に合わせ、下に CTA のぶんを足す。
実測（v9.30.0・500px幅）＝高さ840px では全体が詰まり、CTA が写真に食い込んだ。 */
.sh{display:flex;flex-direction:column;min-height:min(219vw,1200px)}
/* 写真は上寄せで、下は CTA のぶんだけ紙色を見せる */
.sh__bg{bottom:auto;height:min(182vw,1000px)}
.sh__bg img{height:100%}
/* CTA は写真の下（紙色の上）に置く */
.sh__cta{padding-top:18px}
/* ★PC版の「動き」の指定は @media(min-width:900px) の中にあるため、
スマホでは効かない。ここで同じ動きを出す（内容は PC 版と同一）。 */
.sh .nh__hand .st{opacity:0;transform:translateY(5px) scale(.985);transform-origin:center}
.js-motion .sh .nh__hand .st{
animation:nhStroke 8.4s cubic-bezier(.2,.7,.3,1) infinite;
animation-delay:calc(var(--i) * .072s)}
/* ★スマホは横幅が狭いので「縦」にロールする（金島さん指示 2026-09-08）。
横だと1枚ぶんの移動距離が画面幅ぶん必要で、文字が窮屈になる。
縦なら1行ぶん（1.06em）動かすだけで済む。 */
.sh .nh__swap{display:block;position:relative;overflow:hidden;line-height:1;
width:100%}
.sh .nh__roll{display:flex;flex-direction:column;align-items:flex-start;
width:100%;height:max-content;transform:translate3d(0,0,0);
will-change:transform;backface-visibility:hidden}
.sh .nh__roll > .nh__an{flex:none;width:100%;height:1.06em;
font-size:1em;display:flex;align-items:center;opacity:1;justify-content:flex-start;
padding-right:0}
.sh .nh__an .a{color:var(--ink)}
.sh .nh__an .x{font-family:"Archivo","Inter",sans-serif;font-weight:900;
color:#FF6B45;font-size:.62em;padding:0 .06em;transform:translateY(-.03em)}
.sh .nh__an .n{position:relative;
background:linear-gradient(100deg,#E5310D 0%,#F0421A 26%,#FF5A28 58%,#FF7B3C 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.sh .nh__an .n::after{
content:attr(data-t);position:absolute;left:0;top:0;
background:linear-gradient(100deg,
rgba(255,255,255,0) 40%,rgba(255,246,232,.92) 50%,rgba(255,255,255,0) 60%);
background-repeat:no-repeat;background-size:200% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;
pointer-events:none;
background-position:calc(-110% + var(--shine,0) * 320%) 0;
opacity:var(--shine-on,0)}
}
/* v9.28.1 手書きの1画ずつのアニメ＝全幅で使うため、メディアクエリの外に置く。
PC（min-width:900px）の中に書いていたため、スマホでは定義が無く動かなかった。 */
@keyframes nhStroke{
0%{opacity:0;transform:translateY(7px) scale(.985)}
4%{opacity:1;transform:none} /* 0.34秒で1画が現れる */
86%{opacity:1;transform:none} /* しばらく見せる */
94%{opacity:0;transform:translateY(-4px) scale(.99)} /* すっと消える */
100%{opacity:0;transform:translateY(7px) scale(.985)}
}
/* ===================================================================
v9.34.0 サービスページのトップビュー（2026-09-09）
見本を参考に、黒帯だけの見出しから「キャッチ＋説明＋CTA＋写真」へ。
★文字はすべて HTML テキスト＝検索に読まれる。
★位置は px 指定（vw だと画面幅で見え方が変わり、確認が噛み合わなくなる）。
=================================================================== */
/* ★v9.35.0 写真（1774×887・比率2:1・左が大きく空いた構図）に合わせて、
グリッドをやめて「写真を背景に敷き、左の空きに文字を置く」形にした。
写真そのものに余白があるので、切らずに全部見せる。 */
.sv{position:relative;background:var(--paper);overflow:hidden}
.sv__in{position:relative;width:100%;max-width:none;margin:0;padding:0;
display:block;min-height:0}
.sv__tx{position:absolute;left:max(4vw,calc(50% - 860px));top:46%;transform:translateY(-50%);
z-index:2;width:min(50%,980px)}
@media(max-width:1280px){
.sv__tx{left:4vw;width:min(48%,520px)}
}
/* パンくず */
.sv__bc{display:flex;gap:8px;list-style:none;margin:0 0 26px;padding:0;
font-size:13px;color:var(--sub)}
.sv__bc li+li::before{content:"/";margin-right:8px;color:var(--line)}
.sv__bc a{color:var(--sub);text-decoration:none}
.sv__bc a:hover{color:var(--ink)}
/* ★v9.40.0 ラベル＝スマホ版と同じ「朱の縦線＋日本語＋英字の2段」に揃えた */
.sv__label{margin:0 0 20px;padding-left:16px;position:relative;line-height:1.4}
.sv__label::before{content:"";position:absolute;left:0;top:3px;bottom:3px;
width:4px;background:var(--ember)}
.sv__label .ja{display:block;font-size:clamp(15px,1.32vw,21px);font-weight:700;color:var(--ink)}
.sv__label .en{display:block;font-family:"Barlow","Inter",sans-serif;
font-size:clamp(12px,1.06vw,17px);letter-spacing:.08em;color:var(--sub)}
/* ★手書きの色＝SVG 内の linearGradient は id が重複すると壊れる
（PC版とスマホ版で同じ SVG を2回読むため。実測で id が4つ出た）。
→ SVG は単色（currentColor）に戻し、色は CSS 側で当てる。
グラデーションにしたいので、朱と橙の中間色を単色で使う。 */
.sv__hand{display:block;width:min(56%,420px);margin:0 0 18px;color:#F5561F}
.sv__hand svg{width:100%;height:auto;display:block;overflow:visible}
.sv__hand .st{fill:currentColor;opacity:0;transform:translateY(6px) scale(.985);transform-origin:center}
.js-motion .sv__hand .st{animation:nhStroke 8.4s cubic-bezier(.2,.7,.3,1) infinite;
animation-delay:calc(var(--i) * .072s)}
/* ★金島さん（2026-09-09）「右上の手書きはかぶるので、女性の反対側の白い部分に移動」
写真を実測（1774×887・8×6ブロック）＝空きは左3ブロック（0〜37%）と
上部中央（37〜50%）だけ。左3つはラベル・手書き・キャッチが使っているので、
上部中央の白い帯（画面の 38〜52%・上から 3%）に置く。 */
.sv__deco{position:absolute;left:40%;top:3%;z-index:3;color:#FF7A2F;
right:auto;width:clamp(120px,10.4vw,196px);opacity:.85;pointer-events:none}
.sv__deco svg{width:100%;height:auto;display:block;overflow:visible}
.sv__deco .st{fill:currentColor}
/* キャッチ＝「伝わる」を明るいグラデーションに */
.sv__h1{margin:0 0 22px;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-size:clamp(38px,4.9vw,92px);line-height:1.24;font-weight:900;
letter-spacing:.01em;color:var(--ink)}
.sv__h1 em{font-style:normal;
background:linear-gradient(100deg,#F0421A 0%,#FF6B2C 46%,#FF8A3D 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.sv__h1{white-space:nowrap}
@media(max-width:1100px){.sv__h1{white-space:normal}}
.sv__lead{margin:0 0 16px;font-family:"Noto Sans JP",sans-serif;
font-size:clamp(16px,1.75vw,30px);line-height:1.8;font-weight:500;color:var(--ink)}
.sv__tags{margin:0 0 34px;font-size:clamp(13.5px,1.28vw,21px);line-height:1.8;color:var(--sub)}
/* CTA */
.sv__cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sv__btn{display:inline-flex;align-items:center;gap:18px;
height:clamp(64px,6.4vw,104px);padding:0 clamp(32px,3.4vw,58px);border-radius:10px;text-decoration:none;
background:linear-gradient(100deg,#F0421A 0%,#FF7A2F 100%);
color:#fff!important;font-size:clamp(17px,1.72vw,29px);font-weight:700;
transition:transform .25s ease,box-shadow .25s ease}
.sv__btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(240,66,26,.26)}
.sv__btn .ar{width:20px;height:2px;background:#fff;position:relative;flex:none}
.sv__btn .ar::after{content:"";position:absolute;right:0;top:-4px;
width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.sv__note{margin:0;font-size:clamp(13px,1.18vw,19px);color:var(--sub)}
/* 写真＝画面いっぱいに敷く（切らずに全部見せる） */
.sv__img{position:relative;z-index:0;width:100%}
.sv__img img{width:100%;height:auto;display:block}
/* スマホ＝縦積み。写真は下 */
@media(max-width:899px){
/* スマホ＝写真は左が空きすぎるので、文字を上に置いて縦に積む */
.sv__in{display:flex;flex-direction:column;padding:22px 0 0}
.sv__tx{position:static;transform:none;width:auto;padding:0 20px 22px}
.sv__h1{font-size:clamp(28px,7.4vw,38px);line-height:1.34;margin-bottom:16px}
.sv__lead{font-size:15px;line-height:1.85}
.sv__tags{margin-bottom:22px;font-size:12.5px}
.sv__btn{width:100%;justify-content:center;height:60px;font-size:16px}
.sv__note{text-align:center;width:100%}
.sv__img{margin-right:0;margin-left:0}
.sv__bc{margin-bottom:18px}
}
/* ===================================================================
v9.37.0 サービスページ スマホ版トップビュー（2026-09-09）
金島さんの完成イメージ＝背景写真の上に文字を重ね、下にアイコン6種とCTA。
★文字はすべて HTML テキスト＝検索に読まれる。
★アイコンは CSS と SVG（data URI）で描く＝画像を増やさない。
★手書き2種（.sd__hand / .sd__deco）は SVG が置かれたときだけ出る。
=================================================================== */
.sd{display:none}
@media(min-width:900px){.sd{display:none!important}}
@media(max-width:899px){
/* PC 用トップビューは出さない */
.sv{display:none}
.sd{display:block;position:relative;background:var(--paper);overflow:hidden}
/* ★写真は「流れの中」に置いて高さを作る（絶対配置だと高さが0になり、
アイコンと CTA が写真に重なった＝2026-09-09 実測）。
文字は写真の上に重ねたいので、文字側を負のマージンで持ち上げる。 */
.sd__bg{position:relative;z-index:0}
.sd__bg img{width:100%;height:auto;display:block}
/* 文字＝写真の上半分に重ねる */
.sd__in{position:relative;z-index:2;padding:20px 20px 0;
margin-top:calc(-1 * (100vw * 1.414)); /* 写真の高さ（941:1331＝1.414）ぶん引き上げる */
min-height:calc(100vw * 1.414)}
/* ラベル＝朱の縦線＋日本語＋英字 */
.sd__label{margin:0 0 14px;padding-left:12px;position:relative;line-height:1.35}
.sd__label::before{content:"";position:absolute;left:0;top:2px;bottom:2px;
width:3px;background:var(--ember)}
.sd__label .ja{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.sd__label .en{display:block;font-family:"Barlow","Inter",sans-serif;
font-size:12px;letter-spacing:.08em;color:var(--sub)}
/* ★金島さん（2026-09-09）「手書きフォントと、伝わるの色が暗いので明るくグラデーションを」
SVG の塗りは currentColor 一色なので、グラデーションは当てられない。
→ SVG のパスを1つずつ、明るい朱→橙のグラデーションで塗る（fill を上書き）。 */
.sd__hand{display:block;width:min(52%,200px);margin:0 0 12px;color:#F5561F}
.sd__hand svg{width:100%;height:auto;display:block;overflow:visible}
.sd__hand .st{fill:currentColor}
/* ★手書き風に「1画ずつ書かれる」動きを繰り返す（PC版・トップと同じ nhStroke）。
18画前後なので、1画 0.072秒ずらし・全体 8.4秒で1周。 */
.sd__hand .st{opacity:0;transform:translateY(5px) scale(.985);transform-origin:center}
.js-motion .sd__hand .st{
animation:nhStroke 8.4s cubic-bezier(.2,.7,.3,1) infinite;
animation-delay:calc(var(--i) * .072s)}
/* キャッチ＝2行目の一部を朱に */
/* ★金島さん（2026-09-09）「文字被りの調整」＝キャッチの「を。」が人物・制作物に
重なっていた。1行に収まる大きさまで落とし、幅も抑える。 */
.sd__h1{margin:0 0 12px;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-size:clamp(21px,5.9vw,27px);line-height:1.3;font-weight:900;
letter-spacing:0;color:var(--ink);white-space:nowrap}
/* 「伝わる」＝暗い朱の単色をやめ、明るい朱→橙のグラデーションにする */
.sd__h1 em{font-style:normal;
background:linear-gradient(100deg,#F0421A 0%,#FF6B2C 46%,#FF8A3D 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.sd__lead{margin:0;font-family:"Noto Sans JP",sans-serif;
font-size:clamp(11px,2.85vw,12.5px);line-height:1.7;font-weight:700;color:var(--ink)}
/* 右上の手書き英字（完成イメージの「Design for a Brighter Tomorrow」）。
手書きと同じくグラデーションで塗る。位置は写真の右上の空きに。 */
.sd__deco{position:absolute;right:12px;top:6px;
width:clamp(62px,16.5vw,88px);opacity:.85;pointer-events:none;z-index:3;color:#FF7A2F}
.sd__deco svg{width:100%;height:auto;display:block;overflow:visible}
.sd__deco .st{fill:currentColor}
/* CTA */
.sd__cta{position:relative;z-index:2;padding:0 16px 26px}
.sd__btn{display:flex;align-items:center;justify-content:center;gap:14px;
width:100%;height:64px;border-radius:999px;text-decoration:none;
background:linear-gradient(100deg,#F0421A 0%,#FF7A2F 100%);
color:#fff!important;font-size:clamp(17px,4.6vw,19px);font-weight:700;
box-shadow:0 6px 18px rgba(240,66,26,.26)}
.sd__btn .ar{width:18px;height:2px;background:#fff;position:relative;flex:none}
.sd__btn .ar::after{content:"";position:absolute;right:0;top:-4px;
width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
}
/* ===================================================================
v9.42.0 サービスページ 課題セクション＝左右2列（2026-09-09 見本）
左＝ラベル・見出し・説明・写真／右＝番号付き3項目／下＝帯とCTA。
★文字はすべて HTML テキスト。白い面に朱の番号で整理する。
=================================================================== */
/* ★金島さん（2026-09-09）「上に詰めすぎ／左右のバランスもおかしい」
実測（1600px）＝セクションの上 padding が 0 になっており、前のセクションに
詰まっていた。左475px : 右661px と偏りもあった。
→ 上下にゆとりを持たせ、左右の比率を 1:1.15 に近づける。 */
.dq{background:#fff;padding:clamp(64px,5vw,88px) 0 clamp(72px,8vw,120px)}
.dq__in{width:1200px;max-width:calc(100% - 48px);margin:0 auto;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
gap:clamp(40px,5.2vw,96px);align-items:start}
/* 左＝ラベル＋見出し＋説明＋写真 */
.dq__label{margin:0 0 clamp(16px,1.6vw,24px);padding-left:14px;position:relative;
font-size:clamp(12.5px,1.02vw,15px);font-weight:700;color:var(--ink)}
.dq__label::before{content:"";position:absolute;left:0;top:1px;bottom:1px;
width:3px;background:var(--ember)}
.dq__h2{margin:0 0 clamp(18px,1.8vw,28px);
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:900;
font-size:clamp(24px,2.5vw,38px);line-height:1.45;letter-spacing:.01em;color:var(--ink)}
.dq__h2 em{font-style:normal;color:var(--ember)}
.dq__p{margin:0 0 clamp(14px,1.4vw,22px);font-family:"Noto Sans JP",sans-serif;
font-size:clamp(13px,1.06vw,16px);line-height:1.9;color:#4A443C}
/* ★金島さん（2026-09-09）「この画像を小さく使って」＝左段いっぱいにせず、
説明文の幅の中で控えめに置く。 */
.dq__fig{margin:clamp(18px,2vw,30px) 0 0;width:min(78%,320px)}
.dq__fig img{width:100%;height:auto;display:block;border-radius:4px}
.dq__fig figcaption{margin-top:8px;font-size:clamp(11px,.9vw,13px);color:#8A8078}
/* 右＝番号付き3項目 */
.dq__r{list-style:none;margin:0;padding:0}
.dq__r li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,1.8vw,28px);
padding:clamp(18px,2vw,30px) 0;border-bottom:1px solid #E8E4DE}
.dq__r li:first-child{padding-top:0}
/* 右列は見出しの位置から始めたいので、ラベルのぶんだけ下げる */
.dq__r{padding-top:clamp(34px,3.4vw,52px)}
.dq__r li:last-child{border-bottom:0;padding-bottom:0}
.dq__no{font-family:"Barlow","Inter",sans-serif;font-weight:700;
font-size:clamp(20px,1.9vw,28px);line-height:1.25;color:var(--ember)}
.dq__body h3{margin:0 0 clamp(8px,.9vw,13px);
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:900;
font-size:clamp(16px,1.42vw,22px);line-height:1.4;color:var(--ink)}
.dq__body p{margin:0;font-size:clamp(12.5px,1.06vw,16px);line-height:1.85;color:#4A443C}
.dq__tag{margin-top:clamp(8px,.9vw,13px)!important;
font-size:clamp(11.5px,.92vw,13.5px)!important;color:#8A8078!important}
/* 下＝帯とCTA */
/* ★金島さん（2026-09-09）「ボタンを右に並べて、下のラインを揃える」
＝文（左）とボタン（右）を横並びにし、下端を揃える。 */
.dq__cta{display:block!important;border-bottom:0!important;
padding-top:clamp(24px,2.6vw,40px)!important}
.dq__cta-in{padding-left:0;
display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.dq__cta-in .dq__note{margin-bottom:0}
.dq__cta-in .dq__note2{margin-bottom:0}
/* 文の2行を1つの塊にして、ボタンと下端を揃える */
.dq__cta-tx{display:flex;flex-direction:column;gap:4px}
.dq__note{margin:0;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-weight:900;font-size:clamp(14px,1.18vw,18px);color:var(--ink)}
.dq__note2{margin:4px 0 clamp(16px,1.6vw,24px);font-size:clamp(12px,.98vw,14.5px);color:#8A8078}
.dq__btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
height:clamp(50px,3.8vw,58px);padding:0 clamp(24px,2.4vw,36px);border-radius:6px;
text-decoration:none;background:linear-gradient(100deg,#F0421A 0%,#FF7A2F 100%);
color:#fff!important;font-size:clamp(14px,1.15vw,17px);font-weight:700;
transition:transform .25s ease,box-shadow .25s ease}
.dq__btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(240,66,26,.24)}
.dq__btn .ar{width:16px;height:2px;background:#fff;position:relative;flex:none}
.dq__btn .ar::after{content:"";position:absolute;right:0;top:-3px;
width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
/* スマホ＝1列に積む */
@media(max-width:899px){
.dq{padding-top:clamp(48px,12vw,76px)}
.dq__r{padding-top:0}
.dq__in{grid-template-columns:1fr;gap:28px;max-width:calc(100% - 36px)}
.dq__h2{font-size:clamp(21px,5.6vw,27px);line-height:1.5}
.dq__fig{width:min(70%,260px)}
.dq__r li{padding:16px 0;gap:14px}
.dq__no{font-size:19px}
.dq__btn{width:100%}
.dq__cta{padding-top:20px!important}
}
/* ===================================================================
v9.43.0 サービスページ 注文セクション（2026-09-09 見本）
ラベル→見出し＋説明＋右上CTA→タブ→商品カード→下の帯。
★文字はすべて HTML テキスト。ボタンは枠線（下の帯だけ塗り）。
=================================================================== */
.od{background:#fff;padding:clamp(56px,5vw,88px) 0 0}
.od__in{width:1200px;max-width:calc(100% - 48px);margin:0 auto}
/* 見出しと右上のCTA */
.od__head{display:flex;align-items:flex-start;justify-content:space-between;
gap:24px;margin:0 0 clamp(24px,2.6vw,38px);flex-wrap:wrap}
.od__label{display:flex;align-items:center;gap:14px;margin:0 0 12px;
font-size:clamp(12.5px,1.02vw,15px);font-weight:700;color:var(--ember)}
.od__label::after{content:"";width:clamp(28px,3vw,48px);height:1px;background:var(--ember)}
.od__h2{margin:0 0 12px;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-weight:900;font-size:clamp(24px,2.6vw,40px);line-height:1.35;color:var(--ink)}
.od__lead{margin:0;font-size:clamp(13px,1.06vw,16px);line-height:1.85;color:#4A443C}
.od__head-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;
height:clamp(48px,3.6vw,56px);padding:0 clamp(22px,2.2vw,32px);
border:2px solid var(--ember);border-radius:4px;text-decoration:none;
color:var(--ember)!important;font-size:clamp(13.5px,1.1vw,16px);font-weight:700;
transition:background .2s ease,color .2s ease}
.od__head-btn:hover{background:var(--ember);color:#fff!important}
.od__head-btn .ar{width:15px;height:1.6px;background:currentColor;position:relative;flex:none}
.od__head-btn .ar::after{content:"";position:absolute;right:0;top:-3px;
width:7px;height:7px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg)}
/* ★v9.44.0 タブは廃止（全商品を一度に並べる）。見出しの下に余白を入れる */
.od__head{margin-bottom:clamp(28px,3vw,44px)}
/* 商品カード＝3列×2段。行間は列間より少し広く取る */
.od__cards{display:grid;grid-template-columns:repeat(3,1fr);
column-gap:clamp(16px,1.8vw,28px);row-gap:clamp(22px,2.4vw,36px)}
.od__card{background:#fff;border:1px solid #E4E0DA;display:flex;flex-direction:column}
.od__img{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#F4F2EF}
.od__img img{width:100%;height:100%;object-fit:cover;display:block}
.od__badge{position:absolute;left:0;bottom:0;padding:4px 10px;
background:rgba(23,20,15,.55);color:#fff;font-size:11px;line-height:1.4}
.od__body{padding:clamp(16px,1.6vw,24px);display:flex;flex-direction:column;flex:1}
.od__name{margin:0 0 8px;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-weight:900;font-size:clamp(15px,1.28vw,20px);line-height:1.45}
.od__name a{color:var(--ink);text-decoration:none}
.od__name a:hover{text-decoration:underline}
.od__copy{margin:0 0 clamp(14px,1.4vw,20px);font-size:clamp(12.5px,1.02vw,15px);
line-height:1.75;color:#6A6259}
.od__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
gap:12px;flex-wrap:wrap}
.od__price{font-family:"Barlow","Inter",sans-serif;font-weight:700;
font-size:clamp(20px,1.75vw,27px);line-height:1;color:var(--ember);white-space:nowrap}
.od__price small{font-family:"Noto Sans JP",sans-serif;font-size:11.5px;font-weight:400;
color:#8A8078;margin-left:4px}
.od__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
height:clamp(40px,3vw,46px);padding:0 clamp(14px,1.4vw,20px);
border:1.6px solid var(--ember);border-radius:4px;text-decoration:none;
color:var(--ember)!important;font-size:clamp(12px,.98vw,14px);font-weight:700;
white-space:nowrap;transition:background .2s ease,color .2s ease}
.od__btn:hover{background:var(--ember);color:#fff!important}
.od__btn .ar{width:13px;height:1.5px;background:currentColor;position:relative;flex:none}
.od__btn .ar::after{content:"";position:absolute;right:0;top:-2.5px;
width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
/* 下の帯 */
.od__foot{}
.od .od__foot-in{width:1200px;max-width:calc(100% - 48px);margin:0 auto;
display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);flex-wrap:wrap}
.od > .od__foot{margin-top:clamp(32px,3.4vw,52px);border-top:1px solid #E4E0DA;
padding:clamp(22px,2.4vw,34px) 0 clamp(28px,3vw,44px)}
.od__foot-ic{flex:none;width:clamp(30px,2.6vw,40px);height:clamp(30px,2.6vw,40px);
background:var(--ember);
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain}
.od__foot-tx{flex:1;min-width:0}
.od__foot1{margin:0;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-weight:900;font-size:clamp(14px,1.18vw,18px);line-height:1.5;color:var(--ink)}
.od__foot2{margin:4px 0 0;font-size:clamp(12px,.98vw,14.5px);color:#8A8078}
.od__foot-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;
height:clamp(48px,3.6vw,56px);padding:0 clamp(22px,2.2vw,32px);border-radius:4px;
text-decoration:none;background:linear-gradient(100deg,#F0421A 0%,#FF7A2F 100%);
color:#fff!important;font-size:clamp(13.5px,1.1vw,16px);font-weight:700;
transition:transform .25s ease,box-shadow .25s ease}
.od__foot-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(240,66,26,.24)}
.od__foot-btn .ar{width:15px;height:1.8px;background:#fff;position:relative;flex:none}
.od__foot-btn .ar::after{content:"";position:absolute;right:0;top:-3px;
width:7px;height:7px;border-top:1.8px solid #fff;border-right:1.8px solid #fff;transform:rotate(45deg)}
/* スマホ */
@media(max-width:899px){
.od{padding-top:clamp(40px,10vw,64px)}
.od__in{max-width:calc(100% - 36px)}
.od__head{flex-direction:column;gap:18px}
.od__head-btn{width:100%}
.od__h2{font-size:clamp(21px,5.6vw,27px)}
.od__cards{grid-template-columns:1fr;column-gap:14px;row-gap:14px}
.od .od__foot-in{max-width:calc(100% - 36px);flex-direction:column;align-items:stretch;text-align:center}
.od__foot-ic{margin:0 auto}
.od__foot-btn{width:100%}
}
/* ===================================================================
v9.45.0 料金セクション（2026-09-09 見本）
左寄せ・行下の細い罫線・朱の 01/02・下に区切り線＋朱ボタン。
★金額は ryokin.sh の実額。見本画像の数字は使わない。
★このブロックは pr_label があるページだけに出る（他3ページは従来の u-tbl のまま）。
=================================================================== */
.pr{padding:clamp(56px,5.6vw,88px) 0}
.pr__in{width:1200px;max-width:calc(100% - 48px);margin:0 auto}
.pr__label{margin:0 0 10px;color:var(--ember);
font-size:clamp(12px,1vw,14px);font-weight:700;letter-spacing:.06em}
.pr__h2{margin:0 0 clamp(14px,1.4vw,20px);
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:700;
font-size:clamp(28px,3.2vw,46px);line-height:1.3;color:var(--ink)}
.pr__subrow{display:flex;align-items:flex-end;justify-content:space-between;
gap:16px;flex-wrap:wrap;margin:0 0 clamp(30px,3.2vw,48px)}
.pr__sub{margin:0 0 6px;font-weight:700;
font-size:clamp(15px,1.35vw,20px);line-height:1.6;color:var(--ink)}
.pr__lead{margin:0;font-size:clamp(13px,1.08vw,15.5px);line-height:1.8;color:#5B534B}
.pr__tax{margin:0;flex:none;font-size:clamp(11.5px,.95vw,13.5px);color:#8A8078}
/* 01 / 02 の見出し */
.pr__grp{margin:0 0 clamp(34px,3.6vw,56px)}
.pr__gh{display:flex;align-items:center;gap:clamp(12px,1.2vw,18px);margin:0 0 6px}
.pr__num{flex:none;font-family:"Barlow","Inter",sans-serif;font-weight:700;
font-size:clamp(24px,2.5vw,34px);line-height:1;color:var(--ember)}
.pr__gt{margin:0;padding-left:clamp(12px,1.2vw,18px);border-left:2px solid #D8D3CB;
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:700;
font-size:clamp(17px,1.65vw,24px);line-height:1.4;color:var(--ink)}
.pr__gs{margin:0 0 clamp(14px,1.4vw,20px);padding-left:clamp(44px,4.4vw,66px);
font-size:clamp(12.5px,1.02vw,14.5px);line-height:1.7;color:#5B534B}
/* 表＝左寄せ・行の下に細い罫線・見出し行だけ薄い灰 */
.pr__wrap{overflow-x:auto}
.pr__tbl{width:100%;border-collapse:collapse;
font-size:clamp(13px,1.08vw,15.5px);line-height:1.7;color:var(--ink)}
.pr__tbl thead th{background:#EFEDE9;text-align:left;font-weight:700;
padding:clamp(11px,1.05vw,15px) clamp(12px,1.2vw,20px);
font-size:clamp(12.5px,1.02vw,14.5px);color:#3C362F;white-space:nowrap}
.pr__tbl tbody th{text-align:left;font-weight:700;
padding:clamp(13px,1.25vw,18px) clamp(12px,1.2vw,20px);
border-bottom:1px solid #E4E0DA}
.pr__tbl tbody td{text-align:left;font-weight:400;
padding:clamp(13px,1.25vw,18px) clamp(12px,1.2vw,20px);
border-bottom:1px solid #E4E0DA}
.pr__tbl tbody tr:last-child th,.pr__tbl tbody tr:last-child td{border-bottom:0}
.pr__p{font-weight:700;white-space:nowrap;width:26%}
.pr__n{color:#5B534B;font-size:clamp(12px,1vw,14px)}
/* 注記 */
.pr__notes{list-style:none;margin:0 0 clamp(26px,2.8vw,40px);padding:0}
.pr__notes li{position:relative;padding-left:1.4em;margin:0 0 6px;
font-size:clamp(12px,1vw,14px);line-height:1.8;color:#5B534B}
.pr__notes li::before{content:"※";position:absolute;left:0;top:0;color:#8A8078}
/* 区切り線＋CTA */
.pr__foot{display:flex;align-items:center;justify-content:space-between;
gap:clamp(16px,1.8vw,28px);flex-wrap:wrap;
border-top:1px solid #E4E0DA;padding-top:clamp(24px,2.6vw,38px)}
.pr__foot1{margin:0 0 6px;font-weight:700;
font-size:clamp(16px,1.5vw,22px);line-height:1.5;color:var(--ink)}
.pr__foot2{margin:0;font-size:clamp(12.5px,1.02vw,14.5px);line-height:1.7;color:#5B534B}
.pr__foot-cta{flex:none;text-align:center}
.pr__btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
height:clamp(48px,3.8vw,58px);padding:0 clamp(20px,2vw,32px);
background:var(--ember);border-radius:4px;text-decoration:none;
color:#fff!important;font-size:clamp(13px,1.08vw,15.5px);font-weight:700;
white-space:nowrap;transition:opacity .2s ease}
.pr__btn:hover{opacity:.86}
.pr__btn .ar{width:15px;height:1.6px;background:currentColor;position:relative;flex:none}
.pr__btn .ar::after{content:"";position:absolute;right:0;top:-3px;
width:7px;height:7px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg)}
.pr__btn-note{margin:8px 0 0;font-size:clamp(11.5px,.95vw,13px);color:#8A8078}
/* ★スマホ＝表をやめて1件ずつのカードにする。
横スクロールにすると3列目「制作範囲・対応内容」が画面外に隠れて読めない（実測で確認）。 */
@media(max-width:899px){
.pr__in{max-width:calc(100% - 36px)}
.pr__subrow{flex-direction:column;align-items:flex-start;gap:10px}
.pr__gs{padding-left:0}
.pr__wrap{overflow-x:visible}
.pr__tbl,.pr__tbl tbody{display:block;width:100%}
.pr__tbl thead{display:none}
.pr__tbl tbody tr{display:block;background:#fff;border:1px solid #E4E0DA;
border-radius:4px;padding:14px 16px;margin:0 0 10px}
.pr__tbl tbody th,.pr__tbl tbody td{display:block;width:auto;
padding:0;border-bottom:0;white-space:normal}
.pr__tbl tbody th{font-size:15px;line-height:1.5;margin:0 0 6px}
.pr__p{font-family:"Barlow","Inter",sans-serif;font-size:17px;line-height:1.3;
color:var(--ember);margin:0 0 8px}
.pr__n{font-size:12.5px;line-height:1.7;padding-top:8px;
border-top:1px solid #EFEDE9}
.pr__foot{flex-direction:column;align-items:stretch;text-align:center}
.pr__foot-cta{width:100%}
.pr__btn{width:100%}
}
.t-bg-blue .pr__tbl tbody tr{background:#fff}
/* ===================================================================
v9.46.0 流れセクション（2026-09-09 見本）
01〜05 の朱丸を縦線でつなぐ。1段＝「番号｜見出し｜説明」の3列。
★このブロックは fl_steps があるページだけ（他3ページは従来の u-flow のまま）。
=================================================================== */
.fl{padding:clamp(56px,5.6vw,88px) 0}
.fl__in{width:1200px;max-width:calc(100% - 48px);margin:0 auto}
.fl__h2{margin:0 0 clamp(14px,1.4vw,20px);
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:700;
font-size:clamp(28px,3.2vw,46px);line-height:1.3;color:var(--ink)}
.fl__sub{margin:0 0 8px;font-weight:700;
font-size:clamp(15px,1.35vw,20px);line-height:1.6;color:var(--ink)}
.fl__lead{margin:0 0 clamp(30px,3.2vw,50px);
font-size:clamp(13px,1.08vw,15.5px);line-height:1.8;color:#8A8078}
/* 段組み＝番号／見出し／説明 */
.fl__list{list-style:none;margin:0 0 clamp(30px,3.2vw,48px);padding:0}
.fl__step{position:relative;display:grid;
grid-template-columns:clamp(40px,3.4vw,52px) clamp(150px,15vw,230px) 1fr;
gap:0 clamp(16px,2vw,34px);
padding:0 0 clamp(30px,3.2vw,48px)}
.fl__step:last-child{padding-bottom:0}
/* 番号どうしをつなぐ縦線＝丸の中心から次の丸の中心まで */
.fl__step::before{content:"";position:absolute;left:calc(clamp(40px,3.4vw,52px) / 2);
top:clamp(40px,3.4vw,52px);bottom:0;width:1px;background:#DCD7CF;transform:translateX(-50%)}
.fl__step:last-child::before{display:none}
.fl__num{grid-column:1;grid-row:1 / span 2;
width:clamp(40px,3.4vw,52px);height:clamp(40px,3.4vw,52px);
border-radius:50%;background:var(--ember);color:#fff;
display:inline-flex;align-items:center;justify-content:center;
font-family:"Barlow","Inter",sans-serif;font-weight:700;
font-size:clamp(13px,1.1vw,16px);line-height:1;position:relative;z-index:1}
/* ★見出し・説明は「上端で揃える」。中央揃えにすると説明が3行ある段（02）で
見出しだけ下にずれる（実測で発見）。丸の高さぶんだけ行の中心を合わせる。 */
.fl__t{grid-column:2;grid-row:1;margin:0;align-self:start;
height:clamp(40px,3.4vw,52px);display:flex;align-items:center;
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:700;
font-size:clamp(17px,1.65vw,24px);line-height:1.4;color:var(--ink)}
.fl__d{grid-column:3;grid-row:1;align-self:start;
display:flex;flex-direction:column;justify-content:flex-start;
padding-top:clamp(8px,.75vw,12px)}
.fl__p{margin:0;font-size:clamp(13px,1.12vw,16px);line-height:1.9;color:#3C362F}
.fl__free{margin:6px 0 0;color:var(--ember);
font-size:clamp(13px,1.12vw,16px);line-height:1.9}
/* 区切り線＋CTA */
.fl__foot{display:flex;align-items:center;justify-content:space-between;
gap:clamp(16px,1.8vw,28px);flex-wrap:wrap;
border-top:1px solid #E4E0DA;padding-top:clamp(24px,2.6vw,38px)}
.fl__foot1{margin:0;font-weight:700;
font-size:clamp(18px,1.8vw,27px);line-height:1.5;color:var(--ink)}
.fl__foot-cta{flex:none;text-align:right}
.fl__btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
height:clamp(48px,3.8vw,58px);padding:0 clamp(20px,2vw,32px);
background:var(--ember);border-radius:4px;text-decoration:none;
color:#fff!important;font-size:clamp(13px,1.08vw,15.5px);font-weight:700;
white-space:nowrap;transition:opacity .2s ease}
.fl__btn:hover{opacity:.86}
.fl__btn .ar{width:15px;height:1.6px;background:currentColor;position:relative;flex:none}
.fl__btn .ar::after{content:"";position:absolute;right:0;top:-3px;
width:7px;height:7px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg)}
.fl__btn-note{margin:8px 0 0;color:var(--ember);font-size:clamp(11.5px,.95vw,13px)}
/* ★スマホ＝番号と見出しを1行にし、説明はその下に回す（3列だと説明が潰れる） */
@media(max-width:899px){
.fl__in{max-width:calc(100% - 36px)}
.fl__step{grid-template-columns:44px 1fr;gap:0 14px;padding-bottom:26px}
.fl__step::before{left:22px;top:44px}
.fl__num{width:44px;height:44px;grid-row:1;font-size:13px}
.fl__t{grid-column:2;grid-row:1;min-height:44px;font-size:17px}
.fl__d{grid-column:2;grid-row:2;min-height:0;padding-top:8px}
.fl__p,.fl__free{font-size:14px;line-height:1.85}
.fl__foot{flex-direction:column;align-items:stretch;text-align:center}
.fl__foot-cta{width:100%;text-align:center}
.fl__btn{width:100%}
}
/* ===================================================================
v9.48.0 相談CTA（2026-09-09 見本）
黒地＋白カード。中央揃え。CONTACT ラベル／朱ボタン／無料の注記／
「相談方法を選ぶ」の区切り線／LINE・メールの2本／社名の一行。
★既存の .t-cta（左右2カラム・左寄せ）を上書きする。全ページ共通。
=================================================================== */
.t-cta{background:#17140F;padding:clamp(56px,6vw,100px) 0 clamp(48px,5vw,80px);overflow:hidden}
/* ★元の .t-cta .t-in は左右2カラムの flex。カードだけの1カラムに戻す。
★.t-cta__sub も class="t-in t-cta__sub" の2クラスなので、
:not(.t-cta__sub) を付けないとボタン列の flex まで block に潰れる（実測で発見）。 */
.t-cta .t-in:not(.t-cta__sub){display:block}
.t-cta__img{display:none}
.t-cta__box{background:#fff;flex:none;
width:min(1060px,100%);margin:0 auto;
padding:clamp(36px,4.4vw,64px) clamp(24px,4vw,72px) clamp(32px,3.8vw,56px);
text-align:center}
.t-cta__label{display:flex;align-items:center;justify-content:center;gap:10px;
margin:0 0 clamp(14px,1.6vw,22px);
font-family:"Barlow","Inter",sans-serif;font-weight:700;
font-size:clamp(12px,1.05vw,15px);letter-spacing:.18em;color:#5B534B}
.t-cta__label .bar{width:4px;height:clamp(14px,1.3vw,18px);background:var(--ember);flex:none}
.t-cta__box h2{margin:0 0 clamp(14px,1.6vw,22px);
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:700;
font-size:clamp(24px,3.1vw,44px);line-height:1.35;color:var(--ink)}
.t-cta__lead{margin:0 0 clamp(22px,2.6vw,38px);
font-size:clamp(13px,1.12vw,16.5px);line-height:1.9;color:#3C362F}
.t-cta__box .t-btn{width:100%;max-width:100%;box-sizing:border-box}
.t-cta .t-btn--big{display:flex;align-items:center;justify-content:center;gap:14px;
height:clamp(58px,4.6vw,74px);background:var(--ember);border-color:var(--ember);
color:#fff!important;border-radius:0;
font-size:clamp(16px,1.5vw,22px);font-weight:700}
.t-cta .t-btn--big:hover{background:#D6350F;border-color:#D6350F;transform:none;box-shadow:none}
.t-cta .t-btn--big .ar{width:20px;height:1.8px;background:currentColor;position:relative;flex:none}
.t-cta .t-btn--big .ar::after{content:"";position:absolute;right:0;top:-4px;
width:9px;height:9px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;transform:rotate(45deg)}
.t-cta__free{margin:clamp(12px,1.3vw,18px) 0 0;
font-size:clamp(12px,1.02vw,14.5px);color:#6F6A63}
/* 「相談方法を選ぶ」＝左右に細い線 */
.t-cta__or{width:min(1060px,calc(100% - 32px));margin:clamp(30px,3.4vw,54px) auto clamp(16px,1.8vw,26px);
display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);
font-size:clamp(12px,1.02vw,14.5px);color:rgba(255,255,255,.62)}
.t-cta__or::before,.t-cta__or::after{content:"";height:1px;background:rgba(255,255,255,.24);flex:1}
.t-cta__or span{flex:none}
.t-in.t-cta__sub{display:flex;justify-content:center;align-items:center;
gap:clamp(14px,1.8vw,28px);margin-top:0;flex-wrap:wrap}
.t-cta__sub .t-btn{width:clamp(220px,27vw,400px);box-sizing:border-box;flex:none;
display:flex;align-items:center;justify-content:center;gap:12px;
height:clamp(52px,4.2vw,66px);border-radius:4px;
font-size:clamp(14px,1.25vw,18px);font-weight:700}
.t-cta__sub .t-btn--line{background:#06C755;border-color:#06C755;color:#fff!important}
.t-cta__sub .t-btn--line:hover{background:#05a847;border-color:#05a847;transform:none;box-shadow:none}
/* メールは黒地に白の枠線 */
.t-cta__sub .t-btn:not(.t-btn--line){background:transparent;
border:1.6px solid rgba(255,255,255,.7);color:#fff!important}
.t-cta__sub .t-btn:not(.t-btn--line):hover{background:rgba(255,255,255,.1);
border-color:#fff;transform:none;box-shadow:none}
/* ボタンの中のアイコン＝inline SVG。
★mask-image はやめた。角丸四角と吹き出しを2色で塗り分ける必要があり、
マスク（1色のシルエット）では四角が塗りつぶされて吹き出しが消える（実際にそうなった）。 */
.t-cta__sub .ic{width:clamp(22px,1.9vw,28px);height:clamp(22px,1.9vw,28px);flex:none;display:block}
/* 一番下の一行 */
.t-cta__sig{margin:clamp(30px,3.4vw,54px) 0 0;text-align:center;
font-size:clamp(11.5px,.98vw,14px);letter-spacing:.04em;color:rgba(255,255,255,.55)}
@media(max-width:899px){
.t-cta .t-in{flex-direction:column}
.t-cta__box{width:calc(100% - 32px);padding:28px 20px 24px}
.t-cta__box h2{font-size:22px;line-height:1.45}
.t-cta .t-btn--big{height:58px;font-size:16px}
.t-cta__or{width:calc(100% - 32px)}
.t-in.t-cta__sub{flex-direction:column;align-items:center;gap:12px;margin-top:0;
width:100%;max-width:calc(100% - 32px);margin-left:auto;margin-right:auto;box-sizing:border-box}
.t-in.t-cta__sub .t-btn{width:100%;max-width:100%;box-sizing:border-box}
.t-cta__sig{padding:0 16px;line-height:1.8}
}
/* ★v9.48.1 相談CTAの LINE／メールは常に見えている（申し込みの導線）。
出現アニメ（.rv）が付いても opacity:0 にしない。 */
html.js-motion .t-cta__sub .t-btn,
.t-cta__sub .t-btn.rv{opacity:1!important;transform:none!important}
/* ===================================================================
v9.49.0 スマホ版の整え（2026-09-09 金島さん指摘）
・添付の課題セクション＝左に寄りすぎ／PC用の改行がそのまま出て行が短い
・注文セクションのボタン2つが画面外にはみ出して切れていた
★PC は見本どおりの左寄せのまま。ここは 899px 以下だけに効く。
=================================================================== */
@media(max-width:899px){
/* ---- 課題セクション（dq）＝中央寄せ・PC用の改行を解除 ---- */
.dq__l,.dq__r{text-align:center}
/* ★朱の縦線は position:absolute の left:0 で親の左端に固定されている。
中央寄せにすると文字だけ動いて線が取り残されるので、
inline-flex にして「線＋文字」のかたまりごと中央へ動かす。 */
.dq__label{display:inline-flex;align-items:center;gap:10px;padding-left:0;
position:static;width:auto}
.dq__label::before{position:static;width:3px;height:1em;flex:none;
background:var(--ember);display:block}
.dq__l > .dq__label{margin-left:auto;margin-right:auto}
.dq__h2,.dq__lead,.dq__p,.dq__note,.dq__note2{text-align:center}
/* PC用の
をスマホでは無効にして、画面幅で自然に折り返す */
.dq__lead br,.dq__p br,.dq__body p br{display:none}
.dq__fig{width:min(88%,340px);margin-left:auto;margin-right:auto}
.dq__fig figcaption{text-align:center}
/* 番号つきリストは左寄せのまま（読みやすさ優先）。ただし中身の改行は解除 */
.dq__r li{text-align:left}
.dq__body h3,.dq__body p,.dq__tag{text-align:left}
.dq__cta,.dq__cta-in,.dq__cta-tx{text-align:center}
.dq__cta-tx{align-items:center}
/* ---- 注文セクション（od）＝はみ出し解消・中央寄せ ---- */
.od__head{flex-direction:column;align-items:center;text-align:center;gap:18px}
.od__head-tx{text-align:center;width:100%}
.od__label,.od__h2,.od__lead{text-align:center}
.od__lead br{display:none}
/* ★右上ボタンが 420px まで伸びて切れていた。幅を親に収める */
.od__head-btn{width:100%;max-width:100%;box-sizing:border-box;margin:0 auto}
/* ★下の帯のボタンも同じ理由で切れていた */
.od .od__foot-in{box-sizing:border-box}
.od__foot-tx{text-align:center;width:100%;box-sizing:border-box}
.od__foot1,.od__foot2{text-align:center}
.od__foot-btn{width:100%;max-width:100%;box-sizing:border-box}
/* ---- 料金セクション（pr）＝中央寄せ ---- */
.pr__label,.pr__h2,.pr__sub,.pr__lead,.pr__tax{text-align:center}
.pr__subrow{align-items:center}
.pr__subtx{width:100%;text-align:center}
.pr__lead br{display:none}
.pr__gh{justify-content:center}
.pr__gs{text-align:center}
.pr__notes{text-align:left}
.pr__foot1,.pr__foot2{text-align:center}
/* ---- 流れセクション（fl）＝見出しまわりを中央寄せ ---- */
.fl__h2,.fl__sub,.fl__lead{text-align:center}
.fl__lead br{display:none}
/* 各ステップは左寄せのまま（番号と本文の並びが崩れるため） */
.fl__t,.fl__p,.fl__free{text-align:left}
.fl__p br{display:none}
}
/* ★v9.49.2 旧レイアウトの表（動画・Web・AI ページの u-tbl）もスマホでカードにする。
overflow-x:auto の横スクロールだと、3列目が画面外に隠れて読めない
（デザインページの pr__tbl で同じ問題を直した。ここも同じ扱いに揃える）。 */
@media(max-width:899px){
.u-tbl{display:block;width:100%;overflow-x:visible;background:transparent;
border-collapse:collapse;border-spacing:0;margin-bottom:28px}
.u-tbl thead{display:none}
.u-tbl tbody{display:block;width:100%}
.u-tbl tbody tr{display:block;background:#fff;border:1px solid #E4E0DA;
border-radius:4px;padding:14px 16px;margin:0 0 10px}
.u-tbl tbody th,.u-tbl tbody td{display:block;width:auto!important;min-width:0!important;
padding:0;border:0;text-align:left;white-space:normal;background:transparent}
.u-tbl tbody th{font-size:15px;line-height:1.5;font-weight:700;margin:0 0 6px}
.u-tbl tbody td.p{font-family:"Barlow","Inter",sans-serif;font-size:17px;line-height:1.3;
color:var(--ember);font-weight:700;margin:0 0 8px}
.u-tbl tbody td.n{font-size:12.5px;line-height:1.7;color:#5B534B;
padding-top:8px;border-top:1px solid #EFEDE9}
.u-tbl tbody td.n:empty{display:none}
/* 区切りの見出し行（grp）はカードにせず帯のまま */
.u-tbl tbody tr.grp{background:#EFEDE9;border:0;border-radius:0;padding:10px 14px;margin:14px 0 10px}
.u-tbl tbody tr.grp th{margin:0;font-size:15px}
}
/* ===================================================================
v9.51.0 制作系商品の「相談ボックス」（2026-09-09）
カゴのフォームを外した場所に置く。金額は目安であることを明示する。
=================================================================== */
.sd-box{margin:clamp(18px,2vw,28px) 0 0;padding:clamp(20px,2.2vw,32px);
background:#F7F5F1;border:1px solid #E4E0DA;border-radius:4px}
.sd-box__t{margin:0 0 10px;font-weight:700;
font-size:clamp(14px,1.25vw,18px);line-height:1.6;color:var(--ink)}
.sd-box__p{margin:0 0 clamp(16px,1.8vw,24px);
font-size:clamp(12.5px,1.05vw,15px);line-height:1.9;color:#4A443C}
.sd-box__btn{display:flex;align-items:center;justify-content:center;gap:12px;
height:clamp(52px,4.2vw,62px);padding:0 clamp(18px,1.8vw,28px);
background:var(--ember);border-radius:4px;text-decoration:none;
color:#fff!important;font-size:clamp(14px,1.2vw,17px);font-weight:700;
transition:background .2s ease}
.sd-box__btn:hover{background:#D6350F}
.sd-box__btn .ar{width:16px;height:1.7px;background:currentColor;position:relative;flex:none}
.sd-box__btn .ar::after{content:"";position:absolute;right:0;top:-3.5px;
width:8px;height:8px;border-top:1.7px solid currentColor;border-right:1.7px solid currentColor;transform:rotate(45deg)}
.sd-box__note{margin:10px 0 0;text-align:center;
font-size:clamp(11.5px,.98vw,13.5px);color:#6F6A63}
/* 一覧の相談ボタン＝枠線の朱 */
/* ★一覧・関連商品の「内容・料金を見る」＝枠線の朱。
高さ・余白を指定しないと 21px に潰れて下線だけの文字に見える（実測）。 */
/* ★203行目の `.woocommerce a.button{background:var(--ink)!important}` の方が
詳細度が高く、私の `.ardeo-soudan-btn` が負けて黒地のままだった（実測）。
同じだけセレクタを重ねて勝たせる。 */
.woocommerce a.button.ardeo-soudan-btn,
.woocommerce ul.products li.product .button.ardeo-soudan-btn,
a.button.ardeo-soudan-btn,
.wc-block-product a.ardeo-soudan-btn{
display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
height:42px!important;padding:0 18px!important;box-sizing:border-box!important;
background:transparent!important;
border:1.6px solid var(--ember)!important;border-radius:3px!important;
color:var(--ember)!important;text-decoration:none!important;
font-size:13.5px!important;font-weight:700!important;line-height:1!important;
white-space:nowrap;transition:background .2s ease,color .2s ease}
.woocommerce a.button.ardeo-soudan-btn:hover,
a.button.ardeo-soudan-btn:hover,
.wc-block-product a.ardeo-soudan-btn:hover{
background:var(--ember)!important;color:#fff!important;opacity:1}
/* ===================================================================
v9.58.0 商品ページ＝金島さん提示の見本を再現（2026-09-09）
面の切り替え：白（上部）→ グレー #F4F2EE（フォーム）→ 白（説明）
★フォームは白い箱に入れない。グレーの面に直接置く。
★h1・価格は大きく。価格は朱。
=================================================================== */
/* ---------- 上部（白） ----------
★このテーマはブロックテンプレート。`div.summary` `p.price` は存在しない。
実際の構造＝ main > .wp-block-columns（2カラム）
左カラム＝.wp-block-woocommerce-product-image-gallery
右カラム＝h1.wp-block-post-title ／ 価格ブロック ／ 自前の .pt__* */
/* 商品ページの2カラム＝写真48% / 情報52% */
.single-product main > .wp-block-columns{
gap:clamp(28px,3.4vw,60px)!important;align-items:flex-start!important}
.single-product main > .wp-block-columns > .wp-block-column:first-child{flex-basis:48%!important}
.single-product main > .wp-block-columns > .wp-block-column:last-child{flex-basis:52%!important}
.wp-block-woocommerce-product-image-gallery{width:100%!important;margin:0!important}
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery{width:100%!important}
.wp-block-woocommerce-product-image-gallery img{width:100%!important;height:auto!important;
border-radius:0!important;display:block}
/* ラベル（朱の縦棒つき）＝h1 の上 */
.pt__en{display:flex;align-items:center;gap:9px;margin:0 0 clamp(10px,1.1vw,16px);
font-size:clamp(12px,1.02vw,14.5px);font-weight:500;color:#3C362F}
.pt__en .bar{width:3.5px;height:1.15em;background:var(--ember);flex:none}
/* h1＝大きく */
.single-product main > .wp-block-columns h1.wp-block-post-title{
margin:0 0 clamp(10px,1.1vw,16px)!important;
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif!important;font-weight:700!important;
font-size:clamp(30px,3.7vw,54px)!important;line-height:1.2!important;color:var(--ink)!important}
/* 価格＝朱・大きく */
/* ★価格を大きくするのは「上部の2カラムの中」だけ。
`.single-product` 全体に掛けると、下の関連商品の価格まで巨大化して
2行に折り返し、段がずれる（実測：価格の高さ 77px／本来20px）。 */
.single-product main > .wp-block-columns .wp-block-woocommerce-product-price,
.single-product main > .wp-block-columns .wc-block-components-product-price{
margin:0 0 clamp(16px,1.8vw,26px)!important;display:block}
.single-product main > .wp-block-columns .wc-block-components-product-price__value,
.single-product main > .wp-block-columns .wp-block-woocommerce-product-price .woocommerce-Price-amount{
font-family:"Barlow","Inter",sans-serif!important;font-weight:700!important;
font-size:clamp(26px,3.2vw,46px)!important;line-height:1.1!important;
color:var(--ember)!important}
.single-product main > .wp-block-columns .wc-block-components-product-price small,
.single-product main > .wp-block-columns .wp-block-woocommerce-product-price small{
font-family:"Noto Sans JP",sans-serif!important;
font-size:clamp(12px,1vw,15px)!important;font-weight:400!important;
color:#5B534B!important;margin-left:6px;letter-spacing:0}
/* キャッチ＋一文 */
.pt__catch{margin:0 0 clamp(8px,.9vw,12px);
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:700;
font-size:clamp(16px,1.85vw,27px);line-height:1.5;color:var(--ink)}
.pt__csub{margin:0;font-size:clamp(12.5px,1.12vw,16px);line-height:1.8;color:#3C362F}
.pt__notice{display:none}
/* 約束3つ＝写真と情報の下いっぱいに横並び */
.pv{width:1340px;max-width:calc(100% - 48px);margin:clamp(24px,2.8vw,44px) auto 0;
border-top:1px solid #E4E0DA;padding:clamp(20px,2.2vw,32px) 0 0}
.pv__in{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pv__c{display:flex;align-items:flex-start;gap:clamp(12px,1.3vw,18px);
padding:0 clamp(18px,2vw,36px);border-left:1px solid #E4E0DA}
.pv__c:first-child{border-left:0;padding-left:0}
.pv__c .pt__ic{width:clamp(30px,2.8vw,40px);height:clamp(30px,2.8vw,40px);flex:none;
color:var(--ink);margin-top:1px}
.pv__c b{display:block;font-size:clamp(13.5px,1.2vw,17px);line-height:1.45;
font-weight:700;color:var(--ink);margin-bottom:5px}
.pv__c span{display:block;font-size:clamp(11.5px,.98vw,13.5px);line-height:1.65;color:#5B534B}
.pv__next{display:flex;align-items:center;justify-content:center;gap:12px;
margin:clamp(20px,2.2vw,34px) 0 0;padding-bottom:clamp(20px,2.2vw,34px);
font-size:clamp(12.5px,1.05vw,15px);color:var(--ember)}
.pv__next .ar{width:14px;height:20px;flex:none;position:relative}
.pv__next .ar::before{content:"";position:absolute;left:6px;top:0;width:1.8px;height:15px;background:currentColor}
.pv__next .ar::after{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;
border-bottom:1.8px solid currentColor;border-right:1.8px solid currentColor;transform:rotate(45deg)}
/* ---------- フォーム（グレーの面・箱に入れない） ---------- */
.sf{background:#F4F2EE;padding:clamp(30px,3.6vw,58px) 0 clamp(28px,3.2vw,50px);
width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.sf__in{width:1340px;max-width:calc(100% - 48px);margin:0 auto}
.sf__head{display:flex;align-items:flex-start;justify-content:space-between;
gap:clamp(24px,3vw,56px);flex-wrap:wrap;margin:0 0 clamp(22px,2.4vw,36px)}
.sf__head-tx{flex:1;min-width:min(100%,340px)}
.sf__label{display:flex;align-items:center;gap:9px;margin:0 0 clamp(10px,1.1vw,16px);
font-size:clamp(12px,1.02vw,14.5px);font-weight:500;color:#3C362F}
.sf__label .bar{width:3.5px;height:1.15em;background:var(--ember);flex:none}
.sf__h2{margin:0 0 10px;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-weight:700;font-size:clamp(22px,2.7vw,38px);line-height:1.35;color:var(--ink)}
.sf__lead{margin:0;font-size:clamp(12.5px,1.05vw,15px);line-height:1.7;color:#5B534B}
/* 01-02-03 */
.sf__nav{list-style:none;display:flex;align-items:flex-start;margin:0;padding:0;flex:none}
.sf__nav li{display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;
padding:0 clamp(20px,2.4vw,42px);
font-size:clamp(11.5px,.98vw,13.5px);color:#8A8078;transition:color .3s ease}
.sf__nav li::after{content:"";position:absolute;top:19px;
left:calc(50% + 21px);right:calc(-50% + 21px);height:1px;background:#D6D1C8}
.sf__nav li:last-child::after{display:none}
.sf__nav li span{display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #D6D1C8;
font-family:"Barlow","Inter",sans-serif;font-weight:700;font-size:14px;line-height:1;
color:#8A8078;transition:all .3s ease}
.sf__nav li.is-on{color:var(--ember);font-weight:700}
.sf__nav li.is-on span{background:var(--ember);border-color:var(--ember);color:#fff}
.sf__nav li.is-done span{background:var(--ink);border-color:var(--ink);color:#fff}
/* ★フォーム本体＝箱なし。スライドの窓だけ */
.sf__form{background:none;border:0;padding:0}
/* ★スライドの寸法は「%」でなく、窓の幅ぴったりで組む。
★padding を付けると box-sizing の分だけ1ページが窓より広くなり、
3ページ目が右に はみ出して切れた（実測 1344px / 窓 1340px）。
padding は使わず、中身側で余白を取る。 */
.sf__win{overflow:hidden;position:relative;transition:height .4s ease}
.sf__track{display:flex;width:300%;
transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.sf__track[data-at="2"]{transform:translateX(-33.33333%)}
.sf__track[data-at="3"]{transform:translateX(-66.66667%)}
.sf__step{width:33.33333%;flex:0 0 33.33333%;box-sizing:border-box;padding:0;
min-width:0}
/* 影やフォーカスリングが窓の縁で切れないよう、中身に少しだけ余白を持たせる */
.sf__step > *{max-width:100%}
html:not(.js-motion) .sf__win{height:auto!important}
html:not(.js-motion) .sf__track{display:block;width:100%;transform:none}
html:not(.js-motion) .sf__step{width:100%}
html:not(.js-motion) .sf__next,html:not(.js-motion) .sf__back,
html:not(.js-motion) .sf__nav{display:none}
.sf__2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,44px)}
.sf__f{display:flex;flex-direction:column;gap:clamp(9px,1vw,14px)}
.sf__f--wide{grid-column:1 / -1}
.sf__f > span{display:flex;align-items:center;gap:9px;
font-size:clamp(13px,1.08vw,15.5px);font-weight:700;color:var(--ink)}
.sf__f > span b{font-size:11px;font-weight:700;color:#fff;background:var(--ember);
padding:3px 8px;border-radius:2px;line-height:1.4}
.sf__f > span em{font-size:11px;font-style:normal;color:#6F6A63;
background:#E9E5DE;padding:3px 8px;border-radius:2px;line-height:1.4}
.sf__f input[type=text],.sf__f input[type=email],.sf__f input[type=tel],
.sf__f select,.sf__f textarea{
width:100%;box-sizing:border-box;padding:clamp(12px,1.15vw,16px) 15px;
background:#fff;border:1px solid #D6D1C8;border-radius:3px;
font-family:inherit;font-size:clamp(13px,1.08vw,15.5px);line-height:1.75;color:var(--ink)}
.sf__f textarea{resize:vertical;min-height:clamp(140px,13vw,170px)}
.sf__f input:focus,.sf__f select:focus,.sf__f textarea:focus{
outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(240,66,26,.12)}
/* 選択肢＝縦積み・幅いっぱい */
.sf__opts{display:flex;gap:11px;flex-wrap:wrap}
.sf__opts--col{flex-direction:column;gap:clamp(9px,1vw,13px)}
.sf__opt{display:flex;align-items:center;gap:13px;
padding:clamp(13px,1.25vw,18px) clamp(15px,1.5vw,22px);
background:#fff;border:1px solid #D6D1C8;border-radius:4px;cursor:pointer;
font-size:clamp(13px,1.08vw,15.5px);color:var(--ink);
transition:border-color .2s ease,background .2s ease}
.sf__opts--col .sf__opt{width:100%;box-sizing:border-box}
.sf__opt:hover{border-color:var(--ember)}
.sf__opt input{accent-color:var(--ember);margin:0;width:17px;height:17px;flex:none}
.sf__opt:has(input:checked){border-color:var(--ember);background:#FDEDE7}
/* クリップの案内 */
.sf__hint{display:flex;align-items:center;gap:8px;margin:0;
font-size:clamp(11.5px,.98vw,13.5px);color:var(--ember)}
.sf__hint::before{content:"";width:14px;height:14px;flex:none;background:currentColor;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 11.5l-9 9a5.5 5.5 0 01-7.8-7.8l9.2-9.2a3.7 3.7 0 015.2 5.2l-9.2 9.2a1.8 1.8 0 01-2.6-2.6l8.5-8.5'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 11.5l-9 9a5.5 5.5 0 01-7.8-7.8l9.2-9.2a3.7 3.7 0 015.2 5.2l-9.2 9.2a1.8 1.8 0 01-2.6-2.6l8.5-8.5'/%3E%3C/svg%3E");
-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.sf__hint span{text-decoration:underline;text-underline-offset:3px}
.sf__agree{display:flex;align-items:flex-start;gap:11px;margin:clamp(18px,2vw,28px) 0 0;
font-size:clamp(12.5px,1.05vw,15px);line-height:1.7;color:var(--ink);cursor:pointer}
.sf__agree input{accent-color:var(--ember);margin-top:3px;flex:none;width:17px;height:17px}
.sf__agree a{color:var(--ember);text-underline-offset:3px}
.sf__agree b{font-size:11px;font-weight:700;color:#fff;background:var(--ember);
padding:3px 8px;border-radius:2px;margin-left:7px}
.cf-err{display:block;margin-top:5px;color:#C00;font-size:12.5px}
/* 下の操作列 */
.sf__foot{display:flex;align-items:center;justify-content:flex-end;
gap:clamp(14px,1.6vw,24px);margin:clamp(22px,2.4vw,36px) 0 0}
.sf__cnt{margin-right:auto;font-size:clamp(12px,1.02vw,14.5px);color:#6F6A63}
.sf__next,.sf__btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;
height:clamp(52px,4.2vw,64px);padding:0 clamp(24px,2.6vw,42px);
background:var(--ember);border:0;border-radius:4px;color:#fff;
font-family:inherit;font-size:clamp(14px,1.18vw,17px);font-weight:700;
cursor:pointer;transition:background .2s ease}
.sf__next:hover,.sf__btn:hover{background:#D6350F}
.sf__next .ar,.sf__btn .ar{width:18px;height:1.8px;background:currentColor;position:relative;flex:none}
.sf__next .ar::after,.sf__btn .ar::after{content:"";position:absolute;right:0;top:-3.6px;
width:9px;height:9px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;transform:rotate(45deg)}
.sf__back{height:clamp(52px,4.2vw,64px);padding:0 clamp(16px,1.8vw,26px);
background:none;border:1px solid #C9C3B9;border-radius:4px;color:#5B534B;
font-family:inherit;font-size:clamp(13px,1.05vw,15px);cursor:pointer;transition:border-color .2s ease}
.sf__back:hover{border-color:var(--ink)}
.sf__note{margin:12px 0 0;text-align:right;font-size:clamp(11.5px,.95vw,13px);color:#6F6A63}
.sf__alert{margin:0 0 20px;padding:13px 17px;background:#FFF1EE;border-left:3px solid var(--ember);
font-size:clamp(12.5px,1.02vw,14.5px);line-height:1.8;color:#3C362F}
.sf__done{text-align:center;padding:clamp(20px,2.4vw,36px) 0}
.sf__done h2{margin:0 0 14px;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-weight:700;font-size:clamp(20px,2.2vw,30px);line-height:1.4;color:var(--ink)}
.sf__done p{margin:0 0 18px;font-size:clamp(12.5px,1.05vw,15px);line-height:1.9;color:#3C362F}
.sf__line{display:inline-flex;align-items:center;justify-content:center;
height:clamp(48px,3.8vw,58px);padding:0 clamp(24px,2.4vw,36px);
background:#06C755;border-radius:4px;text-decoration:none;color:#fff!important;
font-size:clamp(13px,1.08vw,15.5px);font-weight:700}
.sf__line:hover{background:#05a847}
/* ---------- 下の説明（白） ---------- */
.pd{padding:clamp(30px,3.6vw,56px) 0 clamp(24px,2.8vw,44px)}
.pd{width:1340px;max-width:calc(100% - 48px);margin:0 auto}
.pd__in{width:100%;margin:0}
.pd__h2{margin:0 0 clamp(18px,2vw,30px);
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:700;
font-size:clamp(20px,2.3vw,32px);line-height:1.35;color:var(--ink)}
/* できること＝横3列 */
.pd__steps{list-style:none;margin:0 0 clamp(24px,2.6vw,40px);padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pd__steps li{position:relative;padding:0 clamp(18px,2vw,34px) 0 clamp(40px,3.8vw,56px);
border-left:1px solid #E4E0DA}
.pd__steps li:first-child{border-left:0;padding-left:clamp(38px,3.6vw,52px)}
.pd__no{position:absolute;left:0;top:-3px;
font-family:"Barlow","Inter",sans-serif;font-weight:700;
font-size:clamp(21px,2.1vw,29px);line-height:1;color:var(--ember)}
.pd__steps li:first-child .pd__no{left:0}
.pd__steps h3{margin:0 0 7px;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-weight:700;font-size:clamp(14px,1.25vw,18px);line-height:1.45;color:var(--ink)}
.pd__steps p{margin:0;font-size:clamp(11.5px,1vw,14px);line-height:1.8;color:#5B534B}
/* 料金＝1本の帯 */
.pd__acc{border:1px solid #D6D1C8;border-radius:3px;margin:0 0 clamp(24px,2.6vw,40px)}
.pd__acc summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:clamp(16px,1.7vw,26px) clamp(18px,1.9vw,30px);cursor:pointer;list-style:none}
.pd__acc summary::-webkit-details-marker{display:none}
.pd__acc summary b{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-size:clamp(15px,1.35vw,20px);font-weight:700;color:var(--ink)}
.pd__acc summary span{display:flex;align-items:center;gap:14px;
font-size:clamp(12px,1.02vw,14.5px);color:#5B534B}
.pd__acc summary span::after{content:"";width:15px;height:15px;flex:none;
background:linear-gradient(var(--ink),var(--ink)) center/15px 1.7px no-repeat,
linear-gradient(var(--ink),var(--ink)) center/1.7px 15px no-repeat;
transition:transform .25s ease}
.pd__acc[open] summary span::after{
background:linear-gradient(var(--ink),var(--ink)) center/15px 1.7px no-repeat}
.pd__acc-in{padding:clamp(16px,1.7vw,24px) clamp(18px,1.9vw,30px) clamp(20px,2.2vw,30px);
border-top:1px solid #E4E0DA}
.pd__tbl{width:100%;border-collapse:collapse;font-size:clamp(12.5px,1.02vw,14.5px);line-height:1.7}
.pd__tbl th,.pd__tbl td{padding:clamp(10px,.95vw,13px) 0;border-bottom:1px solid #EFEDE9;
text-align:left;font-weight:400;color:#3C362F}
.pd__tbl th{color:#5B534B;width:42%}
.pd__tbl td{text-align:right;font-weight:700}
.pd__tnote{margin:9px 0 0;font-size:clamp(11px,.92vw,12.5px);line-height:1.7;color:#8A8078}
.pd__oph{margin:clamp(22px,2.4vw,34px) 0 clamp(9px,1vw,13px);
font-weight:700;font-size:clamp(13.5px,1.18vw,17px);color:var(--ink)}
.pd__tbl--op th{width:34%}
.pd__tbl--op td:first-of-type{text-align:left;white-space:nowrap;width:22%;
font-family:"Barlow","Inter",sans-serif;color:var(--ember)}
.pd__opn{text-align:left!important;font-weight:400!important;
font-size:clamp(11px,.92vw,12.5px)!important;color:#6F6A63!important}
/* 流れ＝横1列・矢印つき */
.pd__fh{margin:0 0 clamp(16px,1.7vw,26px);
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:700;
font-size:clamp(16px,1.5vw,22px);color:var(--ink)}
.pd__flow{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.pd__flow li{position:relative;padding:0 clamp(24px,2.6vw,42px) 0 clamp(34px,3.2vw,46px)}
.pd__flow li::after{content:"";position:absolute;right:clamp(8px,.9vw,16px);top:8px;
width:9px;height:9px;border-top:1.5px solid #B9B2A7;border-right:1.5px solid #B9B2A7;
transform:rotate(45deg)}
.pd__flow li:last-child{padding-right:0}
.pd__flow li:last-child::after{display:none}
.pd__fno{position:absolute;left:0;top:0;
width:clamp(24px,2.2vw,28px);height:clamp(24px,2.2vw,28px);border-radius:50%;
background:#fff;border:1px solid #D6D1C8;color:#5B534B;
display:inline-flex;align-items:center;justify-content:center;
font-family:"Barlow","Inter",sans-serif;font-weight:700;font-size:12px;line-height:1}
.pd__flow b{display:block;font-size:clamp(13px,1.15vw,16px);line-height:1.45;
color:var(--ink);margin:2px 0 5px}
/* ★.pd__fno も span なので :not() で除外する。
これを付けないと display:block が inline-flex を上書きし、
数字が上に寄って丸が潰れて見える（実測で判明）。 */
.pd__flow span:not(.pd__fno){display:block;font-size:clamp(11px,.95vw,13px);line-height:1.75;color:#6F6A63}
.pd__last{margin:clamp(26px,2.8vw,42px) 0 0;padding-top:clamp(20px,2.2vw,32px);
border-top:1px solid #E4E0DA;text-align:center;
font-size:clamp(12px,1.02vw,14px);color:#6F6A63}
@media(max-width:899px){
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:100%!important}
.sf__in,.pd__in{max-width:calc(100% - 32px)}
.pv__in{grid-template-columns:1fr;gap:16px}
.pv__c{border-left:0;padding:16px 0 0;border-top:1px solid #E4E0DA}
.pv__c:first-child{border-top:0;padding-top:0}
.sf__head{flex-direction:column;gap:18px}
.sf__nav{width:100%;justify-content:space-between}
.sf__nav li{padding:0}
.sf__nav li::after{left:calc(50% + 24px);right:calc(-50% + 24px)}
.sf__2col{grid-template-columns:1fr;gap:20px}
.sf__foot{flex-wrap:wrap}
.sf__cnt{width:100%;margin-bottom:8px}
.sf__next,.sf__btn{flex:1}
.pd__steps{grid-template-columns:1fr;gap:20px}
.pd__steps li{border-left:0;padding:16px 0 0 clamp(34px,9vw,46px);
border-top:1px solid #E4E0DA}
.pd__steps li:first-child{border-top:0;padding-top:0}
.pd__flow{grid-template-columns:1fr;gap:16px}
.pd__flow li{padding:0 0 0 clamp(34px,9vw,46px)}
.pd__flow li::after{display:none}
.pd__tbl--op,.pd__tbl--op tbody,.pd__tbl--op tr,.pd__tbl--op th,.pd__tbl--op td{display:block;width:auto!important}
.pd__tbl--op tr{padding:13px 0;border-bottom:1px solid #EFEDE9}
.pd__tbl--op th{padding:0 0 5px;border:0;font-weight:700;color:var(--ink)}
.pd__tbl--op td{padding:0;border:0;text-align:left}
}
/* ★v9.58.2 仕上げ（2026-09-09）
・グレーの面の下に空白が残っていた＝窓の高さがSTEP2/3の高さで確保されていたため。
JS が高さを合わせるまでの初期値を「1ページ目の高さ」にする。
・流れの番号が矢印と重なっていたので、矢印を段の“間”に置き直す。 */
.sf__win{height:auto}
.sf__track{align-items:flex-start}
.pd__flow li::after{right:clamp(10px,1.1vw,18px);top:9px}
.pd__flow li{padding-right:clamp(28px,3vw,50px)}
/* 丸＝正円で固定。幅と高さを同じ値にし、縮まないようにする */
.pd__fno{z-index:1;background:#fff;
display:inline-flex!important;align-items:center;justify-content:center;
width:28px!important;height:28px!important;min-width:28px;min-height:28px;
flex:none;box-sizing:border-box;border-radius:50%;
font-size:12.5px;line-height:1;padding:0;text-align:center}
/* ★v9.58.3 フォーカスの光が窓の縁で切れないようにする。
box-shadow は外側に出るので overflow:hidden で切られる。
→ 外に出さず、枠線の色だけで示す。 */
.sf__f input:focus,.sf__f select:focus,.sf__f textarea:focus{
box-shadow:inset 0 0 0 2px rgba(240,66,26,.22)!important}
/* ★v9.58.5 関連商品の段ずれを直す（2026-09-09 金島さん「段ずれとボタンを直せ」）
・カードの高さを揃える（価格や名前の行数が違っても下端が揃う）
・ボタンは常に一番下 */
.single-product .wp-block-woocommerce-product-collection li,
.single-product .wc-block-product{
display:flex!important;flex-direction:column;height:100%}
.single-product .wp-block-woocommerce-product-collection li > *{flex:none}
.single-product .wp-block-woocommerce-product-collection li .wp-block-post-title{
margin:12px 0 8px!important;font-size:15px!important;line-height:1.5!important;
min-height:calc(15px * 1.5 * 2)}
.single-product .wp-block-woocommerce-product-collection .wc-block-components-product-price{
margin:0 0 12px!important;font-size:14px!important;line-height:1.5!important}
.single-product .wp-block-woocommerce-product-collection .wc-block-components-product-price__value{
font-weight:700;color:var(--ember)!important;font-size:16px!important}
.single-product .wp-block-woocommerce-product-collection .wc-block-components-product-price small{
font-size:11px!important;color:#6F6A63!important;font-weight:400}
/* ボタンをカードの一番下へ */
.single-product .wp-block-woocommerce-product-collection li .ardeo-soudan-btn,
.single-product .wp-block-woocommerce-product-collection li .add_to_cart_button,
.single-product .wp-block-woocommerce-product-collection li .wp-block-button{margin-top:auto!important}
/* ★v9.58.7 関連商品の下に余白を足す（ボタンがフッターに接していた） */
.single-product .wp-block-woocommerce-product-collection{
padding-bottom:clamp(40px,4.4vw,72px)}
/* ===================================================================
v9.60.0 フォームのエラー表示（2026-09-09 金島さん
「どこを治せばいいかも表示してわかるようにしないといけない」）
・上に「何が足りないか」の一覧。押すとその欄へ飛ぶ
・足りない欄は枠を赤くする
・エラー文にビックリマークを付けて目に入るようにする
=================================================================== */
/* 上の警告＝一覧つき */
.sf__alert{margin:0 0 clamp(20px,2.2vw,32px);padding:clamp(16px,1.7vw,24px) clamp(18px,1.9vw,26px);
background:#FFF1EE;border:1px solid #F5B5A5;border-left:4px solid var(--ember);border-radius:3px}
.sf__alert-t{margin:0 0 10px;display:flex;align-items:center;gap:10px;
font-size:clamp(13px,1.1vw,15.5px);font-weight:700;line-height:1.7;color:#B3200A}
.sf__alert-t::before{content:"!";flex:none;
width:20px;height:20px;border-radius:50%;background:var(--ember);color:#fff;
display:inline-flex;align-items:center;justify-content:center;
font-family:"Barlow","Inter",sans-serif;font-weight:700;font-size:13px;line-height:1}
.sf__alert-t b{color:var(--ember)}
.sf__alert-l{list-style:none;margin:0;padding:0 0 0 30px;
display:flex;flex-direction:column;gap:6px}
.sf__alert-l li{position:relative;padding-left:16px;
font-size:clamp(12.5px,1.02vw,14.5px);line-height:1.7}
.sf__alert-l li::before{content:"";position:absolute;left:0;top:.55em;
width:6px;height:6px;border-radius:50%;background:var(--ember)}
.sf__alert-l a{color:#B3200A;text-decoration:underline;text-underline-offset:3px}
.sf__alert-l a:hover{color:var(--ember)}
/* 足りない欄＝枠を赤く */
.sf__f.is-err input[type=text],.sf__f.is-err input[type=email],
.sf__f.is-err input[type=tel],.sf__f.is-err select,.sf__f.is-err textarea{
border-color:var(--ember)!important;background:#FFFAF9!important}
.sf__f--radio.is-err .sf__opt{border-color:#F5B5A5}
.sf__agree.is-err{padding:10px 12px;margin-left:-12px;
background:#FFF1EE;border:1px solid #F5B5A5;border-radius:3px}
.sf__f.is-err > span,.sf__agree.is-err > span{color:#B3200A}
/* エラー文＝ビックリマークつき */
.cf-err{display:flex;align-items:center;gap:7px;margin-top:6px;
color:#B3200A;font-size:clamp(12px,1vw,13.5px);line-height:1.6;font-weight:700}
.cf-err i{flex:none;width:16px;height:16px;border-radius:50%;
background:var(--ember);color:#fff;
display:inline-flex;align-items:center;justify-content:center;
font-family:"Barlow","Inter",sans-serif;font-style:normal;font-weight:700;
font-size:11px;line-height:1}
.cf-err i::before{content:"!"}
/* ===================================================================
v9.61.0 商品ページのスマホ版を整える（2026-09-09）
★真因＝`main` に左右 30px の padding がある。
・`.sf` は width:100vw（390px）で左30pxから始まるため右へ30pxはみ出していた
・`.pv` `.pd` は「100% - 48px」＝330-48＝282px に縮み、
写真（330px）と左端も幅も揃っていなかった
→ 内側の要素はすべて「親の幅いっぱい」に揃え、全幅の面だけ padding を打ち消す。
=================================================================== */
@media(max-width:899px){
/* 全幅の面（グレーのフォーム）＝main の padding を打ち消して画面いっぱいに */
.sf{width:auto!important;max-width:none!important;
margin-left:-30px!important;margin-right:-30px!important;
padding-left:0;padding-right:0}
/* 中身は写真と同じ左右位置に揃える */
.sf__in{width:auto!important;max-width:none!important;margin:0 30px!important}
/* 白い面の中身＝親いっぱい（写真と同じ幅） */
.pv,.pd{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
.pv__in,.pd__in{width:auto!important;max-width:none!important;margin:0!important}
/* 上部＝写真と情報を縦に */
.single-product main > .wp-block-columns{gap:20px!important}
.single-product main > .wp-block-columns > .wp-block-column{flex-basis:100%!important}
/* 約束3つ＝縦積み。アイコンと文字の間を詰める */
.pv__in{grid-template-columns:1fr!important;gap:0}
.pv__c{border-left:0;padding:14px 0;border-top:1px solid #E4E0DA;gap:14px}
.pv__c:first-child{border-top:0;padding-top:0}
.pv__c .pt__ic{width:26px;height:26px}
/* フォームの見出しと 01-02-03 */
.sf__head{flex-direction:column;gap:18px}
.sf__h2{font-size:clamp(19px,5.4vw,24px);line-height:1.4}
.sf__nav{width:100%;justify-content:space-between;box-sizing:border-box}
.sf__nav li{padding:0;flex:1;font-size:11px}
.sf__nav li span{width:32px;height:32px;font-size:12.5px}
.sf__nav li::after{top:16px;left:calc(50% + 20px);right:calc(-50% + 20px)}
/* 2カラム→1カラム */
.sf__2col{grid-template-columns:1fr!important;gap:18px}
/* 下の操作列＝縦に並べる（横だと窮屈） */
.sf__foot{flex-wrap:wrap;gap:10px}
.sf__cnt{width:100%;order:-1;margin:0 0 2px}
.sf__next,.sf__btn{flex:1;min-width:0;font-size:14px;padding:0 16px}
.sf__back{flex:none}
.sf__note{text-align:center}
/* できること＝縦積み */
.pd__steps{grid-template-columns:1fr!important;gap:0}
.pd__steps li{border-left:0;padding:16px 0 16px 40px;border-top:1px solid #E4E0DA}
.pd__steps li:first-child{border-top:0;padding-top:0}
.pd__no{top:16px}
.pd__steps li:first-child .pd__no{top:0}
/* 料金の帯＝2行に */
.pd__acc summary{flex-direction:column;align-items:flex-start;gap:8px;padding:16px}
.pd__acc summary span{width:100%;justify-content:space-between}
.pd__acc-in{padding:16px}
/* 流れ＝縦積み・矢印なし */
.pd__flow{grid-template-columns:1fr!important;gap:0}
.pd__flow li{padding:14px 0 14px 38px;border-top:1px solid #EFEDE9}
.pd__flow li:first-child{border-top:0;padding-top:0}
.pd__flow li::after{display:none}
.pd__fno{top:14px}
.pd__flow li:first-child .pd__fno{top:0}
/* 関連商品も左右を揃える */
.single-product .wp-block-woocommerce-product-collection{padding-bottom:36px}
}
/* iPhone SE（320px）でも同じ扱い */
@media(max-width:400px){
.sf__nav li{font-size:10px}
.sf__nav li span{width:28px;height:28px;font-size:11.5px}
.sf__nav li::after{top:14px;left:calc(50% + 18px);right:calc(-50% + 18px)}
}
/* ===================================================================
v9.65.0 動画ページのトップビュー（2026-09-09）
★金島さん提供の背景写真（UI文字を抜いたもの）を敷き、
見本の実測値どおりに文字を重ねる。
見本＝1672×941。実測値と 1440px 換算：
左余白 58→50 ／ h1文字高 51→44（font-size 59px）／ h1行間 80→69
lead文字高 20→17（font-size 25px）／ lead行間 41→35
ボタン高 60→52 ／ ラベル→h1 47→41 ／ h1→lead 50→43 ／ lead→ボタン 50→43
=================================================================== */
.vv{position:relative;width:100vw;max-width:100vw;
margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
aspect-ratio:1672/871;min-height:520px;
display:flex;align-items:center;overflow:hidden;background:#0B0D10}
.vv__bg{position:absolute;inset:0;z-index:0}
.vv__bg img{width:100%;height:100%;object-fit:cover;display:block}
/* 背景は元から左が暗い。重ねる膜はごく薄くする */
.vv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg,
rgba(8,10,13,.30) 0%, rgba(8,10,13,.18) 30%,
rgba(8,10,13,.05) 55%, rgba(8,10,13,0) 80%)}
.vv--noimg{background:linear-gradient(120deg,#12161B 0%,#1B2129 100%)}
/* 見本の左余白 58/1672 = 3.47% */
.vv__in{position:relative;z-index:2;width:100%;
padding:0 0 0 3.47%;box-sizing:border-box}
/* PC では sp 用の文字を出さない */
.vv__label .sp,.vv__h1 .sp{display:none}
.vv__note{display:none}
/* ラベル＝朱の短い線＋英字。見本 y232-239 */
.vv__label{display:flex;align-items:center;gap:1.05vw;
margin:0 0 2.8vw;
font-family:"Barlow","Inter",sans-serif;font-weight:600;
font-size:clamp(10px,.95vw,14px);letter-spacing:.13em;
color:rgba(255,255,255,.92)}
.vv__label .bar{width:2.6vw;max-width:44px;height:2px;background:var(--ember);flex:none}
/* h1＝2行。見本 51px高・行間80 → font-size 4.1vw・line-height 1.56 */
.vv__h1{margin:0 0 3.0vw;
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:700;
font-size:clamp(26px,4.1vw,62px);line-height:1.56;color:#fff;
text-shadow:0 2px 20px rgba(0,0,0,.3)}
/* lead＝2行。見本 20px高・行間41 */
.vv__lead{margin:0 0 3.0vw;
font-size:clamp(12px,1.72vw,26px);line-height:1.72;color:rgba(255,255,255,.94);
text-shadow:0 1px 14px rgba(0,0,0,.28)}
/* ボタン＝見本 高さ60/1672・角丸は完全な丸 */
.vv__btn{display:inline-flex;align-items:center;justify-content:center;gap:1.0vw;
height:clamp(42px,3.6vw,56px);padding:0 2.0vw;
background:var(--ember);border-radius:999px;text-decoration:none;
color:#fff!important;font-size:clamp(12px,1.2vw,18px);font-weight:700;
transition:background .2s ease}
.vv__btn:hover{background:#D6350F}
.vv__btn .ar{width:1.15vw;max-width:20px;height:1.8px;background:currentColor;position:relative;flex:none}
.vv__btn .ar::after{content:"";position:absolute;right:0;top:-3.6px;
width:9px;height:9px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;transform:rotate(45deg)}
@media(max-width:899px){
/* ★スマホ版（金島さん提示の見本）
縦長の背景／ラベル2段／h1 3行／文字は上寄せ／ボタンは幅いっぱいで下寄せ／
その下に「ご相談・お見積りは無料です」 */
.vv{aspect-ratio:941/1672;min-height:0;
margin-left:-30px!important;margin-right:-30px!important;
width:auto!important;max-width:none!important;
align-items:stretch}
/* 背景は上が暗い。文字は上、ボタンは下なので両端を落とす */
.vv::after{background:linear-gradient(180deg,
rgba(8,10,13,.62) 0%, rgba(8,10,13,.30) 34%,
rgba(8,10,13,.20) 58%, rgba(8,10,13,.55) 82%, rgba(8,10,13,.72) 100%)}
.vv__in{display:flex;flex-direction:column;justify-content:space-between;
padding:clamp(30px,8.5vw,56px) 54px clamp(26px,7vw,46px)}
/* ラベル＝朱の縦棒＋英字／日本語の2段 */
.vv__label{align-items:flex-start;gap:12px;margin:0 0 clamp(16px,4.5vw,26px)}
.vv__label .pc{display:none}
.vv__label .sp{display:block}
.vv__label .bar{width:3px;max-width:3px;height:2.9em;background:var(--ember)}
.vv__label .sp b{display:block;
font-family:"Barlow","Inter",sans-serif;font-weight:600;
font-size:clamp(11px,3.1vw,14px);letter-spacing:.13em;
color:rgba(255,255,255,.95);margin-bottom:5px}
.vv__label .sp i{display:block;font-style:normal;
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:500;
font-size:clamp(12px,3.4vw,15px);color:rgba(255,255,255,.95)}
/* h1＝3行 */
.vv__h1{font-size:clamp(27px,7.6vw,36px);line-height:1.42;margin:0 0 clamp(14px,4vw,22px)}
.vv__h1 .pc{display:none}
.vv__h1 .sp{display:inline}
.vv__lead{font-size:clamp(13px,3.7vw,16px);line-height:1.75;margin:0}
/* ボタン＝幅いっぱい・丸型。下に注記 */
.vv__cta{margin-top:auto}
.vv__btn{display:flex;width:100%;box-sizing:border-box;
height:clamp(54px,14vw,64px);padding:0 20px;gap:12px;
font-size:clamp(15px,4.2vw,18px);border-radius:999px}
.vv__btn .ar{width:18px;max-width:18px}
.vv__note{display:block;margin:clamp(10px,3vw,16px) 0 0;text-align:center;
font-size:clamp(11.5px,3.2vw,13.5px);color:rgba(255,255,255,.88)}
}
/* ===================================================================
v9.68.0 動画ページの課題セクション（2026-09-09 金島さん提示の見本）
デザインページと同じ形を基本に、見本の差分だけを足す：
・見出しの左に朱の太い縦線
・番号（01/02/03）を大きくし、右に細い縦線で本文と区切る
★このページだけに効かせる（body.page-video）。デザインページは変えない。
=================================================================== */
.svc-video .dq__h2{position:relative;padding-left:clamp(16px,1.6vw,24px)}
.svc-video .dq__h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;
width:clamp(4px,.42vw,6px);background:var(--ember);border-radius:1px}
/* 番号を大きく、右に区切り線 */
.svc-video .dq__r li{gap:clamp(18px,2vw,32px)}
.svc-video .dq__no{font-size:clamp(30px,3.2vw,46px);line-height:1;color:var(--ember);
padding-right:clamp(16px,1.8vw,28px);border-right:1px solid #DDD8CF;
align-self:stretch;display:flex;align-items:flex-start;padding-top:.1em}
.svc-video .dq__body h3{font-size:clamp(15px,1.5vw,21px)}
/* v9.70.0 動画メニューと見積もり詳細。デザインページのカードと段階式フォームを継承。 */
.svc-video .od{scroll-margin-top:100px}
.svc-video .od__head{align-items:flex-start}
.vm__cards .od__img{aspect-ratio:16/9}
.vm__cards .od__img img{width:100%;height:100%;object-fit:cover}
.vm__cards .od__body{display:flex;flex-direction:column;padding:24px;gap:0}
.vm__category{font-size:12px;font-weight:500;color:#70757a;margin:0 0 10px;line-height:1.7}
.vm__cards .od__name{font-size:clamp(18px,1.55vw,23px);line-height:1.55;margin:0 0 12px}
.vm__cards .od__copy{margin:0 0 22px;color:#565b60;font-size:15px;line-height:1.8;min-height:3.6em}
.vm__price{margin-top:auto;padding:18px 0;border-top:1px solid #e8e4df}
.vm__price>span{font-family:Inter,'Noto Sans JP',sans-serif;font-size:clamp(20px,1.7vw,25px);font-weight:700;color:#c94824;white-space:nowrap;letter-spacing:-.03em}
.vm__price small{display:block;font-size:12px;color:#686d72;margin-top:4px}
.vm__price p{font-size:12px;color:#686d72;margin:8px 0 0}
.vm__cards .od__btn{width:100%;justify-content:space-between;min-height:48px;margin-top:0}
.vm__notice{font-size:13px;color:#666;margin:24px 0 0;line-height:1.9}
.vm__cards a:focus-visible,.video-quote a:focus-visible,.video-quote button:focus-visible{outline:3px solid #18384d;outline-offset:4px}
.vq__crumb,.vq__hero{max-width:1160px;width:calc(100% - 64px);margin-left:auto;margin-right:auto}
.vq__crumb{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:#747474;margin-top:28px;margin-bottom:30px}
.vq__hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:38px}
.vq__figure{margin:0;position:relative}.vq__figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;height:auto;border-radius:3px}
.vq__figure figcaption{position:absolute;bottom:0;left:0;font-size:11px;color:#fff;background:#0f1c27bb;padding:5px 10px}
.vq__label{font-size:13px;font-weight:700;letter-spacing:.05em;border-left:3px solid var(--ember);padding-left:12px;margin:0 0 18px}
.vq__summary h1{font-size:clamp(25px,2.5vw,38px);font-weight:700;line-height:1.45;margin:0 0 22px;letter-spacing:.01em}
.vq__catch{font-size:clamp(18px,1.7vw,23px);font-weight:700;line-height:1.7;margin:0 0 12px}
.vq__lead{font-size:15px;line-height:1.95;color:#555;margin:0 0 22px}
.vq__price{color:#c94824;font-size:clamp(24px,2.5vw,34px);font-weight:700;margin:0;line-height:1.4;letter-spacing:-.03em}
.vq__price small{display:block;font-size:12px;font-weight:400;color:#666;letter-spacing:0;margin-top:5px}
.vq__basis{font-size:13px;color:#666;margin:8px 0 16px}
.vq__note{font-size:12px;line-height:1.8;color:#666;margin:0;border-top:1px solid #e8e4df;padding-top:14px}
.video-quote .pv{margin-bottom:0}.video-quote .pd{padding-top:32px;padding-bottom:32px}
.video-quote .pd__in,.video-quote .sf__in{max-width:1160px}
.video-quote .pd__steps{margin-bottom:24px}.video-quote .pd__h2{font-size:22px;margin-bottom:24px}
.video-quote .pd__fh{margin-top:28px}.video-quote .pd__last{display:none}
.video-quote .sf{scroll-margin-top:90px}.video-quote .sf__h2{font-size:clamp(23px,2.4vw,32px)}
.video-quote .sf__nav{font-size:12px}.video-quote .sf__hint{font-size:12px}
.vq__return{max-width:1160px;width:calc(100% - 64px);margin:30px auto 60px;font-size:14px}
@media(max-width:899px){
.vq__hero{gap:24px}.vq__crumb,.vq__hero,.vq__return{width:calc(100% - 40px)}
.vm__cards .od__body{padding:20px}
}
@media(max-width:599px){
.vq__hero{grid-template-columns:1fr;gap:24px}.vq__figure img{aspect-ratio:16/9}
.vq__crumb{font-size:11px;margin-top:20px;margin-bottom:20px}
.vq__summary h1{font-size:27px;margin-bottom:18px}.vq__price{font-size:27px}
.vm__cards .od__copy{min-height:0}.vm__price>span{font-size:24px}
.video-quote .sf__nav{gap:12px;font-size:11px}.video-quote .sf__foot{flex-wrap:wrap}
.video-quote .pd__h2{font-size:21px}
}
.video-quote #main-content{padding:0;max-width:none;margin:0}
@media(max-width:899px){
.video-quote .pv,.video-quote .pd{padding-left:20px;padding-right:20px}
.video-quote .sf{margin-left:0!important;margin-right:0!important}
.video-quote .sf__in{margin-left:20px!important;margin-right:20px!important}
}
.vm__cards .od__btn{box-sizing:border-box}
.video-quote .pv,.video-quote .pd{box-sizing:border-box;width:calc(100% - 64px);max-width:1160px;margin-left:auto;margin-right:auto}
.video-quote .pd__in{width:100%;margin:0 auto}
.video-quote .sf{margin-top:28px}
@media(max-width:899px){
.video-quote .pv,.video-quote .pd{width:100%!important;padding-left:20px;padding-right:20px}
}
.sf__h2>span{display:inline-block}
.sf__hint{color:#696969}.sf__hint span{text-decoration:none}.sf__hint::before{display:none}
@media(max-width:599px){.video-quote .sf__f input,.video-quote .sf__f select,.video-quote .sf__f textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){.video-quote .sf__track,.video-quote .sf__win{transition:none}}