/* Brücke ブラッシュアップ共通CSS（質感・余白・タイポグラフィ・ヒーロー再構成）
   各ページのインラインCSSの「後」に読み込み、同じ詳細度で上書きします。 */

/* ───────── デザイントークン ───────── */
body,
body[data-design='1']{--f-head:'Noto Serif JP','Yu Mincho',serif;--hw:500;--hls:.06em;
  --panel:#efe9df;--panel-rgb:239,233,223;--hero-fg:#2a2a26;--hero-line:rgba(42,42,38,.14);
  --ink:#2a2a26;--soft:#47473f;--accent:#7a6b4d;--gray:#f6f2ea;--deep:38,48,44;
  --cta-bg:#2a2a26;--cta-fg:#fff;--hero-img:url('images/products-2.jpg');--hero-pos:22% 62%;--photo-filter:none}
body[data-design='2']{--f-head:'Noto Sans JP','Yu Gothic',sans-serif;--hw:700;--hls:.04em;
  --panel:#e6edef;--panel-rgb:230,237,239;--hero-fg:#1d2a2f;--hero-line:rgba(29,42,47,.14);
  --ink:#1d2a2f;--soft:#3f4f55;--accent:#3f6b78;--gray:#eef3f4;--deep:31,52,59;
  --cta-bg:#263e46;--cta-fg:#fff;--hero-img:url('images/body-0.jpg');--hero-pos:30% 50%;--photo-filter:none}
body[data-design='3']{--f-head:'Zen Maru Gothic','Noto Sans JP',sans-serif;--hw:700;--hls:.05em;
  --panel:#2f4a3b;--panel-rgb:47,74,59;--hero-fg:#fff;--hero-line:rgba(255,255,255,.22);
  --ink:#1f2522;--soft:#3d4a42;--accent:#4f7a5c;--gray:#edf2ed;--deep:38,58,47;
  --cta-bg:#fff;--cta-fg:#2f4a3b;--hero-img:url('images/about-2.jpg');--hero-pos:36% 50%;--photo-filter:none}
body[data-design='4']{--f-head:'Noto Serif JP','Yu Mincho',serif;--hw:500;--hls:.12em;
  --panel:#232323;--panel-rgb:35,35,35;--hero-fg:#fff;--hero-line:rgba(255,255,255,.22);
  --ink:#1c1c1c;--soft:#444;--accent:#6b6b67;--gray:#eeeeed;--deep:24,24,24;
  --cta-bg:#fff;--cta-fg:#232323;--hero-img:url('images/about-3.jpg');--hero-pos:50% 55%;--photo-filter:grayscale(.45) contrast(1.04)}
body[data-design='5']{--f-head:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;--hw:700;--hls:.05em;
  --panel:#26364a;--panel-rgb:38,54,74;--hero-fg:#fff;--hero-line:rgba(255,255,255,.22);
  --ink:#20232a;--soft:#434a57;--accent:#4c617c;--gray:#edf0f5;--deep:31,45,62;
  --cta-bg:#fff;--cta-fg:#26364a;--hero-img:url('images/home-0.jpg');--hero-pos:42% 60%;--photo-filter:none}

/* ───────── ベース ───────── */
body[data-design]{font-family:'Noto Sans JP','Yu Gothic',sans-serif;color:var(--ink);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.9}
body[data-design] img{filter:var(--photo-filter)}
body[data-design] :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body[data-design] .hero :focus-visible,body[data-design] .cta :focus-visible{outline-color:#fff}

/* 見出し・欧文 */
body[data-design] .hero h1,body[data-design] .heading,body[data-design] .card h3,
body[data-design] .cta h2,body[data-design] .page-cover h1,body[data-design] .block h1,
body[data-design] .block h2,body[data-design] .block h3,body[data-design] .block h4{
  font-family:var(--f-head);font-weight:var(--hw);letter-spacing:var(--hls);font-feature-settings:"palt"}
body[data-design] .heading{font-size:clamp(26px,2.7vw,36px);line-height:1.6;margin:14px 0 26px}
body[data-design] .card h3{font-size:21px;line-height:1.5;margin:10px 0 12px}
body[data-design] .cta h2{font-size:clamp(24px,2.4vw,30px);line-height:1.6;margin:12px 0}
body[data-design] .en,body[data-design] .kicker,body[data-design] .card-label{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:17px;
  letter-spacing:.08em;color:var(--accent);display:inline-flex;align-items:center;gap:12px}
body[data-design] .kicker::before,body[data-design] .card-label::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
body[data-design] .card-label{font-size:15px}
body[data-design] .card-label::before{width:18px}
body[data-design] .brand{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:40px;letter-spacing:.03em;line-height:1}
body[data-design] .brand small{font-family:'Noto Sans JP',sans-serif;font-weight:500;font-size:10px;letter-spacing:.28em;margin-top:8px}

/* 本文 */
body[data-design] .copy,body[data-design] .card p,body[data-design] .sub,body[data-design] .cta p,body[data-design] .hero-copy p{
  font-size:15px;line-height:2.05;letter-spacing:.025em;font-weight:400}
body[data-design] .copy,body[data-design] .card p,body[data-design] .sub{color:var(--soft)}
body[data-design] .copy{margin:0 0 1.4em}
body[data-design] .card p{font-size:14px;margin:0 0 14px}
body[data-design] .sub{font-size:14px}
body[data-design] .section{padding:120px 0}
body[data-design] .section.gray{background:var(--gray)}
body[data-design] .section-head{margin-bottom:52px}
body[data-design] .split{gap:7%}
body[data-design] .footer{color:#4d5753}
body[data-design] .footer .wrap{font-size:12px}

/* リンク・ボタン */
body[data-design] .more,body[data-design] .arrow{font-weight:500;letter-spacing:.06em;border-bottom:1px solid var(--accent);transition:letter-spacing .25s,color .25s}
body[data-design] .more{padding:14px 0;min-width:210px;font-size:13px}
body[data-design] .more:hover,body[data-design] .arrow:hover{color:var(--accent);letter-spacing:.1em}
body[data-design] .links{font-weight:500;letter-spacing:.04em}
body[data-design] .links a:not(.line){transition:opacity .2s}
body[data-design] .links a:not(.line):hover{opacity:.65}
body[data-design] .line{background:var(--cta-bg);color:var(--cta-fg);font-weight:500;letter-spacing:.06em;padding:15px 22px;transition:transform .2s,box-shadow .2s}
body[data-design] .line:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
body[data-design] .btn{font-weight:500;letter-spacing:.06em;transition:transform .2s,box-shadow .2s}
body[data-design] .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.22)}
body[data-design] .hero .line{background:var(--cta-bg);color:var(--cta-fg)}

/* 画像・カード・情報タイル */
body[data-design] .split img{height:460px}
body[data-design='1'] .split img{box-shadow:22px 22px 0 #e6ded0}
body[data-design='3'] .split img{border-radius:24px}
body[data-design='5'] .split img{border-top:4px solid var(--accent)}
body[data-design] .card{overflow:hidden}
body[data-design] .card img{transition:transform .6s ease}
body[data-design] .card:hover img{transform:scale(1.035)}
body[data-design='1'] .card{background:#fff}
body[data-design] .info a{padding:34px 32px;transition:background .25s}
body[data-design] .info a:hover{background:var(--gray)}
body[data-design] .info b{font-family:var(--f-head);font-weight:var(--hw);font-size:18px;letter-spacing:.05em}

/* ───────── ヒーロー：文字の面＋写真（被写体と見出しを重ねない） ───────── */
body[data-design] .hero{background:var(--panel);background-image:none;height:min(760px,88vh);min-height:600px;overflow:hidden;color:var(--hero-fg)}
body[data-design] .hero::before{content:"";position:absolute;top:0;bottom:0;right:0;width:64%;will-change:auto;
  background:var(--hero-img) var(--hero-pos)/cover no-repeat;filter:var(--photo-filter);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%);z-index:0}
body[data-design] .hero::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--panel-rgb),.78),rgba(var(--panel-rgb),0))}
body[data-design] .nav-holder{color:var(--hero-fg);border-bottom:1px solid var(--hero-line);z-index:4}
body[data-design] .hero-copy{z-index:2;top:50%;transform:translateY(-44%);left:calc((100% - min(1180px,88%)) / 2);width:min(42%,520px);border-left:0;padding-left:0}
body[data-design] .hero-copy .en{color:var(--hero-fg);opacity:.78}
body[data-design] .hero h1{font-size:clamp(32px,3.6vw,50px);line-height:1.55;letter-spacing:var(--hls);margin:20px 0 26px;color:var(--hero-fg)}
body[data-design='4'] .hero h1{letter-spacing:.14em}
body[data-design] .hero-copy p{color:var(--hero-fg);opacity:.88;font-size:15px}
body[data-design='5'] .hero-copy{border-left:3px solid #fff;padding-left:28px}
body[data-design='3'] .hero::before{border-radius:0 0 0 160px}

/* ───────── 下層ページ ───────── */
body[data-design] .page-header{background:var(--panel);color:var(--hero-fg)}
body[data-design] .page-cover{height:280px;
  background:linear-gradient(90deg,rgba(var(--deep),.86),rgba(var(--deep),.42) 70%,rgba(var(--deep),.3)),var(--cover) center/cover;color:#fff}
body[data-design] .page-cover h1{font-size:clamp(28px,3vw,38px);line-height:1.5;margin:12px 0 0;color:#fff}
body[data-design] .page-cover .en{color:#fff;opacity:.85}
body[data-design] .cta .en{color:#fff;opacity:.72}
body[data-design] .crumb{padding:20px 0;color:#5a645f;font-size:12px;letter-spacing:.05em}
body[data-design] .content-wrap{max-width:780px;padding:72px 0 120px}
body[data-design] .block{padding:6px 0 48px;margin-bottom:12px}
body[data-design] .block p,body[data-design] .block li{font-size:15px;line-height:2.1;letter-spacing:.025em;color:var(--soft);margin:0 0 1.15em}
body[data-design] .block p:empty{display:none}
body[data-design] .block h1,body[data-design] .block h2,body[data-design] .block h3,body[data-design] .block h4{
  font-size:clamp(20px,2.2vw,24px);line-height:1.65;margin:44px 0 22px;padding:0;border:0;color:var(--ink)}
body[data-design] .block h1::before,body[data-design] .block h2::before,body[data-design] .block h3::before,body[data-design] .block h4::before{
  content:"";display:block;width:34px;height:2px;background:var(--accent);margin-bottom:18px}
body[data-design] .block h3,body[data-design] .block h4{font-size:18px;margin:30px 0 14px}
body[data-design] .block h3::before,body[data-design] .block h4::before{display:none}
body[data-design] .block :is(h1,h2,h3,h4) u{text-decoration:none}
/* 本文化した案内文・電話番号 */
body[data-design] .block p.lead{font-family:var(--f-head);font-weight:var(--hw);font-size:clamp(16px,1.7vw,19px);line-height:2;letter-spacing:.05em;color:var(--ink);margin:0 0 1.6em;padding-left:18px;border-left:2px solid var(--accent)}
body[data-design] .block p.tel{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(34px,5vw,48px);line-height:1.3;letter-spacing:.06em;color:var(--ink);margin:6px 0 10px}
body[data-design] .block p u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em;text-decoration-color:rgba(var(--deep),.35)}
body[data-design] .block a{color:var(--accent);text-underline-offset:.3em}
body[data-design] .block img{border-radius:2px;margin:12px 0 28px}
body[data-design='3'] .block img{border-radius:16px}
body[data-design] .sourcenote{background:var(--gray);border-left:3px solid var(--accent);color:var(--soft);font-size:12.5px;line-height:1.95;padding:18px 24px;margin-bottom:44px}
body[data-design] .block .original{margin:36px 0}
body[data-design] .original{border-color:var(--accent);color:var(--ink);letter-spacing:.06em;transition:background .25s,color .25s}
body[data-design] .original:hover{background:var(--accent);color:#fff}
body[data-design] .preview{background:var(--gray);color:#4d5753}

/* 日本語の改行（文節単位・孤立行の抑制） */
body[data-design] .hero h1,body[data-design] .heading,body[data-design] .card h3,body[data-design] .cta h2,body[data-design] .page-cover h1,body[data-design] .block :is(h1,h2,h3,h4){word-break:auto-phrase;text-wrap:balance}
body[data-design] .copy,body[data-design] .card p,body[data-design] .sub,body[data-design] .cta p,body[data-design] .hero-copy p,body[data-design] .block p,body[data-design] .block li{word-break:auto-phrase;text-wrap:pretty;overflow-wrap:anywhere}

/* ───────── WordPress配置案ページ ───────── */
body[data-design] .wp-guide{color:var(--ink)}
body[data-design] .wp-guide h1,body[data-design] .wp-guide h2{font-family:var(--f-head);font-weight:var(--hw);letter-spacing:var(--hls);color:var(--ink)}
body[data-design] .wp-guide h1{font-size:clamp(26px,3vw,34px);line-height:1.5}
body[data-design] .wp-guide h2{font-size:21px;border-bottom:1px solid var(--hero-line,#ccc);border-bottom-color:rgba(var(--deep),.18)}
body[data-design] .wp-guide p,body[data-design] .wp-guide li,body[data-design] .wp-guide td{color:var(--soft);letter-spacing:.02em;line-height:2.05;word-break:auto-phrase}
body[data-design] .wp-guide th{background:var(--gray);color:var(--ink);font-weight:500}
body[data-design] .wp-guide th,body[data-design] .wp-guide td{border-color:rgba(var(--deep),.16)}
body[data-design] .wp-guide .badge{background:var(--gray);border-left:3px solid var(--accent)}
body[data-design] .wp-guide .tag{color:var(--accent);font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:16px;letter-spacing:.1em}
body[data-design] .wp-guide a{color:var(--accent)}

/* ───────── デザイン切替バー ───────── */
body .compare{font-family:'Noto Sans JP',sans-serif}
body .compare button,body .compare a{font-family:'Noto Sans JP',sans-serif;font-weight:500;letter-spacing:.04em;transition:background .2s}
body .compare button:hover{background:#ffffff22}
body .compare button[aria-pressed=true]:hover{background:#fff}

/* ───────── タブレット ───────── */
@media(max-width:1000px){
  body[data-design] .links{background:var(--panel);color:var(--hero-fg);border-top:1px solid var(--hero-line)}
  body[data-design] .links .line{background:var(--cta-bg);color:var(--cta-fg);text-align:center;margin-top:10px}
  body[data-design] .hero::before{width:70%}
  body[data-design] .hero-copy{width:min(48%,460px)}
  body[data-design] .brand{font-size:34px}
}

/* ───────── スマホ ───────── */
@media(max-width:700px){
  body[data-design] .compare{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  body[data-design] .compare-title{display:none}
  body[data-design] .compare button,body[data-design] .compare a{flex:0 0 auto;white-space:nowrap}
  body[data-design] .hero{height:auto;min-height:min(780px,100svh)}
  body[data-design] .hero::before{top:auto;left:0;width:100%;height:56%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
  body[data-design='3'] .hero::before{border-radius:0}
  body[data-design] .hero-copy,body[data-design='3'] .hero-copy,body[data-design='5'] .hero-copy{
    position:relative;top:auto;left:auto;right:auto;transform:none;width:auto;padding:128px 7% 56px}
  body[data-design='5'] .hero-copy{border-left:0;padding-left:7%}
  body[data-design] .hero h1{font-size:32px;margin:14px 0 18px}
  body[data-design] .section{padding:76px 0}
  body[data-design] .heading{font-size:25px;margin:10px 0 20px}
  body[data-design] .split img{height:300px}
  body[data-design='1'] .split img{box-shadow:12px 12px 0 #e6ded0}
  body[data-design] .copy,body[data-design] .block p,body[data-design] .block li{font-size:14.5px}
  body[data-design] .section-head{margin-bottom:32px}
  body[data-design] .page-cover{height:210px}
  body[data-design] .content-wrap{padding:40px 0 80px}
  body[data-design] .brand{font-size:32px}
}

@media(prefers-reduced-motion:reduce){
  body[data-design] *{transition:none!important}
  html{scroll-behavior:auto}
}

/* ───────── WordPress案ページ：戻る導線 ───────── */
body .compare a.back{background:#fff;color:#18211e;border-color:#fff;font-weight:700}
body .compare a.back:hover{background:#e4f2eb}
body[data-design] .guide-back{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 36px;padding-bottom:18px;border-bottom:1px solid rgba(var(--deep),.16);font-size:13px}
body[data-design] .guide-back a{font-weight:700;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
body[data-design] .guide-back span{color:var(--soft)}
body[data-design] .guide-back-bottom{margin-top:56px}
body[data-design] .guide-back-bottom a{display:inline-block;padding:14px 26px;border:1px solid var(--accent);text-decoration:none;font-weight:700;letter-spacing:.05em}
body[data-design] .guide-back-bottom a:hover{background:var(--accent);color:#fff}