/*
Theme Name: Licht Aizu
Theme URI: https://lichtaizu.site
Author: 株式会社リヒトアイズ
Description: 株式会社リヒトアイズ コーポレートサイト オリジナルテーマ。ベージュ×セージのアットホームなデザイン。
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: licht-aizu
*/

/* ============================================================
   株式会社リヒトアイズ — 共通スタイル (style.css)
   デザイン参考: おうちマート (アットホーム感／ベージュ＋セージ)
   WordPress化想定: そのまま theme の style.css として利用可
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --cream:#f7f3ec;
  --cream-2:#f2ece1;
  --card:#fffdf9;
  --ink:#46413b;
  --ink-soft:#8b8479;
  --ink-faint:#b3aca1;
  --sage:#8a9a7b;
  --sage-deep:#6f7e60;
  --sage-bg:#eef0e8;
  --sage-line:#d7ddcb;
  --brand:#b0402f;        /* ロゴ赤・要所のみ */
  --brand-soft:#c66a53;
  --line:#e7e0d3;
  --shadow:0 20px 54px rgba(70,60,45,.055);
  --shadow-sm:0 10px 26px rgba(70,60,45,.045);

  --maxw:1120px;
  --radius:26px;
  --radius-lg:42px;
  --pill:999px;

  --fs-hero:clamp(30px,4.4vw,52px);
  --fs-h2:clamp(24px,3vw,34px);
  --fs-h3:clamp(19px,2vw,23px);
  --fs-lead:clamp(15px,1.5vw,18px);
  --fs-body:16px;
  --fs-small:13.5px;

  --font:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font);
  color:var(--ink);background:var(--cream);
  font-size:var(--fs-body);line-height:1.95;font-weight:400;
  letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;transition:color .2s,opacity .2s;}
a:hover{opacity:.78;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;cursor:pointer;}
a,button,.btn,.nav-toggle,.nav-close,.faq__q,.buy-card,.svc-card,.athome-banner{
  -webkit-tap-highlight-color:rgba(138,154,123,.18);touch-action:manipulation;}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:84px 0;}
.section--tight{padding:60px 0;}
.section--sage{background:var(--sage-bg);}
.section--cream2{background:var(--cream-2);}
.center{text-align:center;}
.lead{font-size:var(--fs-lead);color:var(--ink-soft);line-height:2.1;}
@media (min-width:861px){.nowrap-pc{white-space:nowrap;}}

/* ---------- 日本語の改行調整 ---------- */
h1,h2,h3,.sec-head__ttl,.page-hero h1{text-wrap:balance;}
p{text-wrap:pretty;}
/* 対応ブラウザでは文節単位で折り返す（Chrome 119+） */
@supports (word-break:auto-phrase){
  h1,h2,h3,.sec-head__ttl,.sec-head__sub,.page-intro p,.cta-band p,.assure p,
  .hero__lead,.svc-card p,.feat-card p,.feature-row p,.svc-block p,.step__body p,
  .faq__q,.faq__a-inner,.contact-card__label{word-break:auto-phrase;}
}

/* ---------- Section heading ---------- */
.sec-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:48px;text-align:center;}
.sec-head__en{font-size:12px;letter-spacing:.32em;color:var(--sage);font-weight:500;text-transform:uppercase;}
.sec-head__ttl{font-size:var(--fs-h2);font-weight:500;letter-spacing:.1em;line-height:1.5;display:inline-flex;align-items:center;gap:14px;}
.sec-head__ttl::before,.sec-head__ttl::after{content:"";width:20px;height:0;border-top:1px dashed var(--sage-line);}
.sec-head__sub{font-size:var(--fs-body);color:var(--ink-soft);max-width:640px;line-height:2;}
.sec-head--left{align-items:flex-start;text-align:left;}
.sec-head--left .sec-head__ttl::before,
.sec-head--left .sec-head__ttl::after{display:none;}

/* dotted divider title (left aligned, in-content) */
.block-ttl{font-size:var(--fs-h3);font-weight:500;letter-spacing:.08em;padding-bottom:16px;margin-bottom:26px;
  border-bottom:1px dashed var(--sage-line);display:flex;align-items:center;gap:12px;}
.block-ttl::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sage);flex:none;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;border-radius:var(--pill);font-size:15px;font-weight:500;letter-spacing:.06em;
  border:1px solid transparent;transition:all .25s;white-space:nowrap;line-height:1.2;}
.btn .ic{width:17px;height:17px;flex:none;}
.btn--solid{background:var(--ink);color:#fff;}
.btn--solid:hover{opacity:1;background:var(--brand);}
.btn--line{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn--line:hover{opacity:1;background:var(--ink);color:#fff;}
.btn--sage{background:var(--sage);color:#fff;}
.btn--sage:hover{opacity:1;background:var(--sage-deep);}
.btn--ghost{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-sm);}
.btn--ghost:hover{opacity:1;border-color:var(--sage);color:var(--sage-deep);}
.btn--lg{padding:18px 46px;font-size:16px;}
.btn:hover{transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none;}}

/* ---------- Image placeholders (差し替え用) ---------- */
.ph{position:relative;background-color:#ece6da;
  background-image:repeating-linear-gradient(45deg,rgba(138,154,123,.10) 0 12px,rgba(138,154,123,0) 12px 24px);
  border:1px dashed #cfc6b5;border-radius:var(--radius);overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#9a917f;}
.ph__label{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.04em;
  background:rgba(255,253,249,.82);padding:7px 14px;border-radius:var(--pill);border:1px solid #d8cfbd;
  line-height:1.3;text-align:center;}
.ph--blob{border-radius:46% 54% 48% 52% / 56% 44% 56% 44%;}
.ph--circle{border-radius:50%;}

/* image-slot（クリックで差し替え可能な画像枠）— レイアウト用クラスでサイズ指定 */
image-slot{display:block;width:100%;vertical-align:top;touch-action:pan-y pinch-zoom;overflow:hidden;}
/* iOS Safari: カスタム要素＋aspect-ratio で高さが潰れないよう contain */
image-slot.hero__photo,image-slot.feature-row__media,image-slot.svc-block__media,
image-slot.feat-card__img,image-slot.about-split__img{contain:layout style;}
/* 本番表示時はタップ・スクロールを妨げない（編集モードのみ操作可） */
image-slot:not([data-editable]){pointer-events:none;}
/* 装飾用の背景スロットはタップ・スクロールを妨げない */
image-slot.page-hero__bg,image-slot.section-bg,image-slot.svc-card__bg{pointer-events:none;}

/* プレビュー環境が html,body を transparent に上書きするため、地色を高詳細度で再指定 */
html body{background:var(--cream);}

/* image-slot 空枠を分かりやすく（差し替え前のプレースホルダー表現） */
image-slot::part(frame){background:#ece6da!important;}
image-slot::part(ring){border:1.5px dashed var(--sage)!important;}

/* ---------- Decorative leaf placeholder (small・やわらかめ) ---------- */
.leaf{position:absolute;width:72px;height:72px;border-radius:64% 8% 64% 8%;
  background:radial-gradient(120% 120% at 30% 30%,rgba(138,154,123,.22),rgba(138,154,123,.06) 70%,transparent);
  opacity:.65;pointer-events:none;filter:blur(.2px);}

/* ============================================================
   Header
   ============================================================ */
.site-header-wrap{position:sticky;top:0;z-index:100;background:var(--cream);}
.site-header{background:var(--cream);border-bottom:1px solid var(--line);}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;
  max-width:var(--maxw);margin:0 auto;flex-wrap:nowrap;}
.brand{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;}
.brand img{height:42px;width:auto;max-width:min(52vw,200px);object-fit:contain;flex-shrink:0;}
.brand__tag{font-size:11px;color:var(--ink-soft);letter-spacing:.12em;border:1px solid var(--sage-line);
  border-radius:var(--pill);padding:3px 12px;}
.header-contact{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:auto;}
.header-tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;}
.header-tel a{font-size:25px;font-weight:700;letter-spacing:.02em;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap;}
.header-tel a .ic{width:19px;height:19px;color:var(--sage);}
.header-tel small{font-size:11.5px;color:var(--ink-soft);letter-spacing:.06em;}
.header-cta{padding:13px 24px;}

.gnav{border-top:1px solid var(--line);background:var(--cream);}
.gnav__inner{display:flex;justify-content:center;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto;}
.gnav a{position:relative;padding:17px 20px;font-size:14.5px;letter-spacing:.05em;font-weight:500;color:var(--ink);white-space:nowrap;}
.gnav__contact{display:none;}
.gnav a::after{content:"";position:absolute;left:20px;right:20px;bottom:10px;height:2px;background:var(--sage);
  transform:scaleX(0);transform-origin:center;transition:transform .25s;border-radius:2px;}
.gnav a:hover{opacity:1;}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{transform:scaleX(1);}

/* mobile nav toggle */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:10px;}
.nav-toggle span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s;}
/* mobile tel icon (≤560pxで表示) */
.header-tel-mini{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--sage-line);
  background:var(--sage-bg);color:var(--sage-deep);align-items:center;justify-content:center;flex:none;}
.header-tel-mini svg{width:18px;height:18px;}

/* ============================================================
   at home 固定サイドバナー（全ページ共通・右側）
   ============================================================ */
@keyframes riseIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes bannerIn{from{opacity:0;transform:translateY(-50%) translateX(30px);}to{opacity:1;transform:translateY(-50%);}}
@keyframes bannerInUp{from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:no-preference) and (min-width:561px){
  body.anim-in .side-banner{animation:bannerIn .9s .7s cubic-bezier(.22,1,.36,1) both;}
}
@media (prefers-reduced-motion:no-preference) and (max-width:560px){
  body.anim-in .side-banner{animation:bannerInUp .8s .7s cubic-bezier(.22,1,.36,1) both;}
}
.side-banner{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff;
  background:linear-gradient(170deg,#c2664e 0%,var(--brand) 60%,#9a3526 100%);
  padding:22px 10px;border-radius:20px 0 0 20px;
  font-size:13px;font-weight:500;line-height:1;
  box-shadow:-12px 16px 40px rgba(154,53,38,.25),inset 1px 1px 0 rgba(255,255,255,.22);}
.side-banner__txt{writing-mode:vertical-rl;letter-spacing:.32em;font-size:12px;opacity:.95;}
.side-banner__tag{font-size:9px;font-weight:600;letter-spacing:.14em;white-space:nowrap;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:var(--pill);padding:4px 9px;}
.side-banner__line{width:1px;height:18px;background:rgba(255,255,255,.45);}
.side-banner__item{writing-mode:vertical-rl;background:#fff;color:var(--brand);
  border:none;border-radius:var(--pill);padding:18px 9px;
  font-size:13.5px;font-weight:700;letter-spacing:.2em;
  box-shadow:0 4px 14px rgba(0,0,0,.22),inset 0 0 0 1px rgba(176,64,47,.08);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,color .3s;}
.side-banner__item:hover{opacity:1;color:#7e2417;transform:translateX(-4px) scale(1.04);
  box-shadow:0 8px 22px rgba(0,0,0,.3);}
@media (max-width:560px){
  .side-banner{top:auto;bottom:0;left:0;right:0;transform:none;
    flex-direction:row;justify-content:center;align-items:center;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-radius:20px 20px 0 0;
    box-shadow:0 -10px 30px rgba(154,53,38,.25),inset 0 1px 0 rgba(255,255,255,.22);}
  .side-banner__txt{display:none;}
  .side-banner__line{display:none;}
  .side-banner__tag{font-size:8.5px;padding:3px 7px;flex:none;}
  .side-banner__item{writing-mode:horizontal-tb;flex:1;max-width:160px;text-align:center;
    padding:13px 10px;letter-spacing:.12em;font-size:13.5px;}
  .side-banner__item:hover{transform:none;}
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--cream-2);border-top:1px solid var(--line);padding:64px 0 0;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;}
.footer-brand img{height:40px;margin-bottom:18px;}
.footer-brand p{font-size:var(--fs-small);color:var(--ink-soft);line-height:1.95;}
.footer-license{margin-top:14px;font-size:12px;color:var(--ink-faint);}
.footer-col h4{font-size:13px;letter-spacing:.14em;color:var(--sage);font-weight:600;margin-bottom:18px;}
.footer-col li{margin-bottom:12px;}
.footer-col a{font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;}
.footer-col a::before{content:"›";color:var(--sage);}
.athome-link{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--pill);box-shadow:var(--shadow-sm);font-size:14px;font-weight:500;margin-top:6px;}
.athome-link .tag{font-size:11px;background:var(--sage);color:#fff;padding:3px 9px;border-radius:var(--pill);}
.footer-bottom{margin-top:56px;border-top:1px solid var(--line);padding:22px 0;}
.footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.footer-bottom small{font-size:12px;color:var(--ink-faint);letter-spacing:.04em;}
.footer-mini{display:flex;gap:20px;flex-wrap:wrap;}
.footer-mini a{font-size:12.5px;color:var(--ink-soft);}

/* ============================================================
   Page hero / breadcrumb (下層共通)
   ============================================================ */
.page-hero{background:var(--sage-bg);padding:54px 0;text-align:center;position:relative;overflow:hidden;}
.page-hero .wrap{position:relative;z-index:1;}
/* タイトル背景画像（クリックで選択・うっすら表示） */
.page-hero__bg{position:absolute;inset:0;width:100%;height:100%!important;z-index:0;}
/* 下層タイトルの登場モーション（body.anim-in 中のみ適用—JSが2秒後に解除し確実に表示） */
@media (prefers-reduced-motion:no-preference){
  body.anim-in .page-hero .en{animation:riseIn .7s .05s cubic-bezier(.22,1,.36,1) both;}
  body.anim-in .page-hero h1{animation:riseIn .8s .14s cubic-bezier(.22,1,.36,1) both;}
  body.anim-in .crumb{animation:riseIn .7s .3s cubic-bezier(.22,1,.36,1) both;}
}
image-slot.page-hero__bg::part(frame){background:transparent!important;border-radius:0!important;}
image-slot.page-hero__bg::part(ring){border-radius:0!important;}
image-slot.page-hero__bg::part(image){opacity:.3;}
.page-hero .bg-hint{top:12px;right:14px;}
.page-hero:has(.page-hero__bg:not([data-filled])) .bg-hint{display:inline-flex;}
/* ヒントピル（共通） */
.bg-hint{position:absolute;top:16px;right:18px;z-index:1;pointer-events:none;display:none;
  align-items:center;gap:5px;font-size:11px;color:#9a917f;background:rgba(255,253,249,.85);
  border:1px dashed #cfc6b5;border-radius:var(--pill);padding:4px 11px;letter-spacing:.04em;}
.page-hero h1{font-size:var(--fs-h2);font-weight:500;letter-spacing:.12em;}
.page-hero .en{display:block;font-size:12px;letter-spacing:.3em;color:var(--sage);margin-bottom:10px;text-transform:uppercase;}
.crumb{padding:16px 0;font-size:12.5px;color:var(--ink-soft);}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;}
.crumb li::after{content:"›";margin-left:8px;color:var(--ink-faint);}
.crumb li:last-child::after{display:none;}
.crumb a:hover{color:var(--sage-deep);}

/* ---------- Generic prose (記事本文) ---------- */
.prose p{margin-bottom:20px;line-height:2.1;}
.prose h2{font-size:var(--fs-h3);font-weight:500;letter-spacing:.06em;margin:44px 0 20px;padding-bottom:14px;border-bottom:1px dashed var(--sage-line);}
.prose h3{font-size:17px;font-weight:600;margin:30px 0 12px;color:var(--sage-deep);}
.prose ul.dot li{position:relative;padding-left:22px;margin-bottom:10px;line-height:1.9;}
.prose ul.dot li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--sage);}

/* ---------- お問い合わせカード（共通：トップ・お問い合わせページ） ---------- */
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:880px;margin:0 auto;}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:40px 36px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:var(--shadow-sm);min-width:0;}
.contact-card__label{font-size:14px;color:var(--ink-soft);letter-spacing:.06em;border-bottom:1px dashed var(--sage-line);padding-bottom:12px;width:100%;}
.contact-card__tel{font-size:34px;font-weight:700;letter-spacing:.02em;color:var(--ink);margin-top:6px;}
.contact-card__note{font-size:13px;color:var(--ink-faint);}

/* ---------- Utility ---------- */
.fade-up{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
.fade-up.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.fade-up{opacity:1;transform:none;transition:none;}}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:860px){
  .section{padding:60px 0;}
  .brand__tag{display:none;}
  .header-tel a{font-size:21px;}
  .nav-toggle{display:flex;}
  .gnav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:var(--cream);
    transform:translateX(100%);transition:transform .28s ease;z-index:2;border-left:1px solid var(--line);
    box-shadow:-20px 0 50px rgba(0,0,0,.12);overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:calc(16px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom));border-top:none;}
  .gnav.open{transform:none;}
  .gnav__inner{flex-direction:column;align-items:stretch;padding:56px 0 0;}
  .gnav a{display:flex;align-items:center;min-height:52px;padding:14px 24px;border-bottom:1px solid var(--line);
    width:100%;font-size:16px;line-height:1.4;-webkit-tap-highlight-color:rgba(138,154,123,.2);}
  .gnav a::after{display:none;}
  .gnav__contact{display:flex;margin:20px 20px 0;background:var(--sage);color:#fff;border-radius:var(--pill);
    justify-content:center;font-weight:600;border-bottom:none;min-height:50px;}
  .nav-backdrop{position:fixed;inset:0;background:rgba(40,36,30,.45);opacity:0;visibility:hidden;
    transition:opacity .28s,visibility .28s;z-index:199;pointer-events:none;}
  .nav-backdrop.open{opacity:1;visibility:visible;pointer-events:auto;}
  .nav-close{position:absolute;top:calc(10px + env(safe-area-inset-top));right:14px;background:var(--sage-bg);
    border:1px solid var(--sage-line);border-radius:50%;font-size:22px;color:var(--ink);z-index:3;
    min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;}
  body.nav-open{overflow:hidden;overscroll-behavior:none;}
  body.nav-open .site-header-wrap{z-index:200;}
}
@media (min-width:861px){.nav-close{display:none;}}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  body{padding-bottom:56px;}/* 下部固定at homeバナーの退避 */
  .header-top{padding:8px 14px;gap:8px;}
  .brand{gap:0;}
  .brand img{height:30px;max-width:min(58vw,180px);}
  .header-contact{gap:6px;}
  .header-tel{display:none;}
  .header-tel-mini{display:flex;width:40px;height:40px;}
  .header-cta{display:none;}
  .nav-toggle{padding:10px;min-width:44px;min-height:44px;justify-content:center;}
  .footer-grid{grid-template-columns:1fr;}
  .sec-head__ttl::before,.sec-head__ttl::after{width:16px;}
  /* スマホでのはみ出し防止 */
  .btn--lg{padding:16px 24px;font-size:15px;}
  .contact-cards{grid-template-columns:1fr;}
  .contact-card{padding:30px 18px;}
  .contact-card__tel{font-size:28px;}
  /* 長文の中央揃えはスマホでは左揃えに（変な位置の改行を回避） */
  .sec-head__sub,.page-intro p,.cta-band p,.assure p{text-align:left;}
  .assure p span{display:inline;}
}
/* タッチ端末では hover の残りや transform で操作がもっさり感じるのを防ぐ */
@media (hover:none) and (pointer:coarse){
  html{scroll-behavior:auto;}
  a:hover{opacity:1;}
  .btn:hover{transform:none;}
  .svc-card:hover,.buy-card:hover,.feat-card:hover,.athome-banner:hover{transform:none;box-shadow:var(--shadow-sm);}
  .svc-card:hover .svc-card__more{transform:none;}
  .news-list a:hover{padding-left:8px;background:transparent;}
}