/*
 * morisaki依頼 2026-04-21 新規作成
 * naruki-theme-v3 / main.css
 * Claude Design Handoff Bundle (index.html) より移植
 * 除外: TWEAKSパネル / body[data-accent] / body[data-density] (編集環境専用)
 */

:root{
  --tiffany:#0ABAB5;
  --tiffany-ink:#089691;
  --deep:#0F6E56;
  --mist:#F4FBFA;
  --ink:#221C00;
  --stone-900:#2B2B2B;
  --stone-600:#5B5B5B;
  --stone-400:#999999;
  --stone-200:#E4E4E4;
  --stone-100:#F2F2F2;
  --paper:#FFFFFF;
  --sans:"Noto Sans JP",system-ui,sans-serif;
  --mincho:"Shippori Mincho",serif;
  --deco:"Cormorant Garamond",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;line-height:1.8}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
:focus-visible{outline:2px solid var(--tiffany);outline-offset:3px}

/* ========== HEADER ========== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 56px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.header.scrolled{border-bottom-color:var(--stone-200)}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:80px;position:absolute;top:50%;transform: translateY(-50%);}
.brand-mark{
  width:38px;height:38px;border-radius:50%;
  background:var(--tiffany);color:#fff;
  display:grid;place-items:center;font-family:var(--mincho);font-weight:700;font-size:20px;
  letter-spacing:.02em;
}
.brand-name{font-family:var(--mincho);font-weight:600;font-size:17px;letter-spacing:.14em}
.brand-name .en{display:block;font-family:var(--deco);font-style:italic;font-size:10px;letter-spacing:.32em;color:var(--stone-400);font-weight:400;margin-top:2px}

.nav{display:flex;align-items:center;gap:34px}
.nav ul{display:flex;gap:28px;list-style:none}
.nav a{font-size:13px;letter-spacing:.08em;font-weight:500;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--tiffany);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.nav a:hover::after{transform:scaleX(1)}
.tel{display:flex;align-items:center;gap:10px;border-left:1px solid var(--stone-200);padding-left:24px}
.tel-no{font-family:var(--mincho);font-size:20px;letter-spacing:.04em;font-weight:500;color:var(--ink)}
.tel-label{font-size:10px;letter-spacing:.3em;color:var(--stone-400)}
.hamburger{display:none;width:36px;height:36px;place-items:center}
.hamburger span{display:block;width:22px;height:1px;background:var(--ink);position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:22px;height:1px;background:var(--ink)}
.hamburger span::before{top:-6px}.hamburger span::after{top:6px}

/* ========== RIGHT CTA RAIL ========== */
.rail{
  position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:2px;
}
.rail a{
  writing-mode:vertical-rl;text-orientation:mixed;
  padding:34px 14px;font-size:13px;letter-spacing:.32em;font-weight:500;
  background:var(--tiffany);color:#fff;
  display:flex;align-items:center;gap:18px;
  transition:background .3s ease, padding .3s ease;
}
.rail a:hover{background:var(--deep);padding-right:18px}
.rail a.secondary{background:var(--ink);color:#fff}
.rail a.secondary:hover{background:#000}
.rail .arrow{font-family:var(--deco);font-size:16px;letter-spacing:0}

/* ========== HERO ========== */
.hero{
  position:relative;min-height:100vh;padding:140px 120px 80px 120px;
  overflow:hidden;background:var(--paper);
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:72px;align-items:stretch;min-height:calc(100vh - 220px);
}
.hero-left{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.hero-heading{
  display:flex;flex-direction:row-reverse;gap:.25em;justify-content:flex-start;
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(48px,5.6vw,88px);line-height:1.1;letter-spacing:.08em;
  color:var(--ink);
  margin-left:auto;
}
.hero-heading .line{
  writing-mode:vertical-rl;text-orientation:mixed;
  white-space:nowrap;
}
.hero-heading .accent,.hero-heading .dot{color:var(--tiffany)}

.hero-sub{
  font-family:var(--mincho);font-weight:500;
  font-size:18px;letter-spacing:.18em;color:var(--deep);
  line-height:2;
  padding:18px 0 0;
  border-top:1px solid var(--stone-200);
  max-width:360px;
}
.hero-meta{
  display:flex;align-items:center;gap:18px;
  font-family:var(--deco);font-size:12px;letter-spacing:.4em;color:var(--stone-600);
  text-transform:uppercase;
}
.hero-meta .bar{width:56px;height:1px;background:var(--stone-400)}
.hero-idx{
  position:absolute;bottom:0;left:0;
  font-family:var(--deco);font-style:italic;font-size:80px;color:var(--tiffany);opacity:.18;
  line-height:.8;
}

.hero-right{position:relative}
.hero-photo{
  position:relative;height:100%;min-height:560px;overflow:hidden;
  background:#d9e5e2;
}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,186,181,0) 60%,rgba(15,110,86,.15) 100%);pointer-events:none}

.hero-caption{
  position:absolute;left:-24px;bottom:24px;
  writing-mode:vertical-rl;
  font-family:var(--mincho);font-size:11px;letter-spacing:.3em;color:#fff;
  background:rgba(26,26,26,.72);padding:20px 10px;
}
.hero-watermark{
  position:absolute;right:-20px;top:-30px;
  font-family:var(--deco);font-style:italic;font-weight:300;
  font-size:clamp(120px,18vw,260px);line-height:.8;color:var(--mist);
  pointer-events:none;user-select:none;z-index:-1;
}

.plusone-badge{
  position:absolute;right:120px;bottom:60px;z-index:5;
  width:168px;height:168px;border-radius:50%;
  background:var(--tiffany);color:#fff;
  display:grid;place-items:center;text-align:center;
  box-shadow:0 20px 40px -18px rgba(10,186,181,.6);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  animation:float 6s ease-in-out infinite;
}
.plusone-badge:hover{transform:scale(1.06) rotate(-4deg)}
.plusone-badge .en{font-family:var(--deco);font-style:italic;font-size:13px;letter-spacing:.12em;opacity:.85}
.plusone-badge .ja{font-family:var(--mincho);font-size:17px;letter-spacing:.08em;margin:4px 0;font-weight:600}
.plusone-badge .more{font-size:10px;letter-spacing:.28em;margin-top:4px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.plusone-badge{animation:none}}

.hero-scroll{
  position:absolute;left:56px;bottom:40px;
  writing-mode:vertical-rl;font-family:var(--deco);font-size:11px;letter-spacing:.4em;color:var(--stone-400);
  display:flex;align-items:center;gap:14px;
}
.hero-scroll::before{content:"";display:block;width:1px;height:60px;background:var(--stone-400)}
.hero-scroll .line{width:1px;height:40px;background:var(--tiffany);animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%{transform:translateY(-40px);opacity:0}30%{opacity:1}100%{transform:translateY(40px);opacity:0}}

/* ========== SECTION CHROME ========== */
.section{position:relative;padding:120px 120px;overflow:hidden}
.section.mist{background:var(--mist)}
.section-head{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:end;margin-bottom:80px;position:relative;z-index:2}
.section-idx{font-family:var(--deco);font-style:italic;font-weight:400;font-size:15px;letter-spacing:.4em;color:var(--tiffany);display:flex;align-items:center;gap:14px}
.section-idx::after{content:"";width:60px;height:1px;background:var(--tiffany)}
.section-title{font-family:var(--mincho);font-weight:600;font-size:clamp(32px,3.8vw,56px);line-height:1.4;letter-spacing:.06em}
.section-title .tf{color:var(--tiffany)}
.section-watermark{
  position:absolute;pointer-events:none;user-select:none;
  font-family:var(--deco);font-style:italic;font-weight:300;
  color:var(--mist);line-height:.8;z-index:0;
}
.section.mist .section-watermark{color:rgba(10,186,181,.08)}

/* ========== GREETING ========== */
.greeting{display:grid;grid-template-columns:1fr 1.1fr;gap:96px;position:relative;z-index:2;align-items:center}
.greeting-photo{position:relative;aspect-ratio:3/4;background:#d9e5e2;overflow:hidden}
.greeting-photo img{width:100%;height:100%;object-fit:cover}
.greeting-photo .tag{
  position:absolute;left:-12px;top:32px;
  background:var(--ink);color:#fff;padding:8px 18px;
  font-family:var(--mincho);font-size:12px;letter-spacing:.3em;
}
.greeting-body .lead{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--mincho);font-weight:500;font-size:clamp(28px,3vw,44px);line-height:2;letter-spacing:.18em;
  height:420px;margin-left:auto;
}
.greeting-body .lead .tf{color:var(--tiffany)}
.greeting-row{display:grid;grid-template-columns:auto 1fr;gap:48px;margin-top:40px;align-items:start}
.greeting-copy{font-size:14px;line-height:2.2;color:var(--stone-600);max-width:520px}
.greeting-copy p + p{margin-top:18px}
.ceo-sig{display:flex;flex-direction:column;gap:6px;margin-top:28px;padding-top:20px;border-top:1px solid var(--stone-200)}
.ceo-sig .role{font-size:11px;letter-spacing:.3em;color:var(--stone-400)}
.ceo-sig .name{font-family:var(--mincho);font-size:18px;letter-spacing:.14em}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 32px;font-size:13px;letter-spacing:.24em;font-weight:500;
  border:1px solid var(--ink);color:var(--ink);
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  position:relative;overflow:hidden;
}
.btn .arrow{font-family:var(--deco);font-size:16px;letter-spacing:0;transition:transform .35s ease}
.btn:hover{background:var(--ink);color:#fff}
.btn:hover .arrow{transform:translateX(6px)}
.btn.primary{background:var(--tiffany);border-color:var(--tiffany);color:#fff}
.btn.primary:hover{background:var(--deep);border-color:var(--deep)}
.btn.ghost{border-color:var(--stone-200);color:var(--stone-600)}
.btn.ghost:hover{background:var(--tiffany);border-color:var(--tiffany);color:#fff}

/* ========== NEWS ========== */
.news-list{border-top:1px solid var(--stone-200);position:relative;z-index:2}
/* morisaki変更 2026-04-21 Phase3-I003: .news-item は <li> 境界線のみ保持。grid/hover は <a>ラップ（動的）と直下span（静的フォールバック）の両モードに :has() で対応 */
.news-item{
  border-bottom:1px solid var(--stone-200);
}
.news-item > a,
.news-item:not(:has(> a)){
  display:grid;grid-template-columns:180px 140px 1fr auto;gap:32px;
  padding:28px 8px;align-items:center;
}
.news-item > a{
  color:inherit;
  transition:background .3s ease, padding .3s ease;
}
.news-item > a:hover{background:var(--mist);padding-left:24px}
.news-date{font-family:var(--deco);font-size:18px;letter-spacing:.12em;color:var(--stone-600)}
.news-label{
  justify-self:start;font-size:10px;letter-spacing:.28em;color:var(--tiffany);
  border:1px solid var(--tiffany);padding:5px 14px;font-weight:500;
}
.news-label.alt{color:var(--deep);border-color:var(--deep)}
.news-title{font-size:14px;letter-spacing:.06em;color:var(--ink);font-weight:500}
.news-arrow{font-family:var(--deco);font-style:italic;color:var(--stone-400);font-size:16px;transition:transform .3s ease, color .3s ease}
.news-item > a:hover .news-arrow{color:var(--tiffany);transform:translateX(6px)}
.news-foot{display:flex;justify-content:flex-end;margin-top:48px}

/* ========== SERVICES ========== */
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--stone-200);border-left:1px solid var(--stone-200);
  position:relative;z-index:2;background:#fff;
}
.svc{
  padding:44px 36px;border-right:1px solid var(--stone-200);border-bottom:1px solid var(--stone-200);
  display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;
  transition:background .4s ease;min-height:360px;
}
.svc:hover{background:var(--mist)}
.svc-num{font-family:var(--deco);font-style:italic;font-size:13px;letter-spacing:.3em;color:var(--tiffany)}
.svc-ja{font-family:var(--mincho);font-size:26px;font-weight:600;letter-spacing:.1em;line-height:1.4}
.svc-en{font-family:var(--deco);font-style:italic;font-size:14px;letter-spacing:.2em;color:var(--stone-400);margin-top:-6px}
.svc-hairline{width:32px;height:1px;background:var(--ink);margin:4px 0}
.svc:hover .svc-hairline{width:80px;background:var(--tiffany);transition:all .4s ease}
.svc-desc{font-size:13px;line-height:2;color:var(--stone-600)}
.svc-more{margin-top:auto;font-family:var(--deco);font-size:13px;letter-spacing:.24em;color:var(--ink);display:flex;align-items:center;gap:10px}
.svc-more .dot{width:6px;height:6px;border-radius:50%;background:var(--tiffany);transition:width .4s ease}
.svc:hover .svc-more .dot{width:32px;border-radius:2px}
.svc-icon{
  width:56px;height:56px;border:1px solid var(--ink);
  display:grid;place-items:center;color:var(--ink);
  font-family:var(--mincho);font-size:22px;font-weight:500;
  transition:all .4s ease;
}
.svc:hover .svc-icon{background:var(--tiffany);border-color:var(--tiffany);color:#fff}

/* ========== PLUS ONE LIVING ========== */
.plusone{
  padding:160px 0;background:#1b8185;color:#fff;position:relative;overflow:hidden;
}
.plusone::before{
  content:"+1 LIVING";position:absolute;left:-30px;top:30px;
  font-family:var(--deco);font-style:italic;font-weight:300;
  font-size:clamp(140px,20vw,320px);line-height:.8;color:rgba(10,186,181,.1);
  letter-spacing:-.02em;pointer-events:none;
}
.plusone-inner{display:flex;position:relative;z-index:2;align-items:stretch;}
.plusone-visual{width:45%;position:relative;aspect-ratio:4/5;overflow:hidden;margin-left:120px}
.plusone-visual img{width:100%;height:100%;object-fit:cover}
.plusone-visual .frame{
  position:absolute;inset:24px;border:1px solid rgba(255,255,255,.3);pointer-events:none;
}
.plusone-body{padding:0 120px 0 80px;display:flex;flex-direction:column;justify-content:center;gap:28px}
.plusone-tag{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--deco);font-size:12px;letter-spacing:.4em;color:var(--tiffany);text-transform:uppercase;
}
.plusone-tag::before{content:"";width:40px;height:1px;background:var(--tiffany)}
.plusone-ttl{font-family:var(--mincho);font-weight:600;font-size:clamp(34px,4vw,56px);line-height:1.5;letter-spacing:.08em}
.plusone-ttl .tf{color:var(--tiffany)}
.plusone-desc{font-size:14px;line-height:2.2;color:rgba(255,255,255,.7);max-width:480px}
.plusone-stats{display:none}
.plusone-features{display:flex;flex-direction:column;gap:14px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18);max-width:520px}
.pf{font-family:var(--mincho);font-size:16px;letter-spacing:.1em;color:rgba(255,255,255,.88);line-height:1.7;display:flex;gap:14px;align-items:baseline}
.pf-mk{color:var(--tiffany);font-family:var(--deco);font-size:18px;flex-shrink:0}

/* ========== WORKS ========== */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;z-index:2}
.work{display:flex;flex-direction:column;gap:18px;cursor:pointer}
.work-thumb{aspect-ratio:4/3;background:#d9e5e2;overflow:hidden;position:relative}
.work-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.work:hover .work-thumb img{transform:scale(1.06)}
.work-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,186,181,.1));opacity:0;transition:opacity .4s ease}
.work:hover .work-thumb::after{opacity:1}
.work-meta{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.24em;color:var(--stone-400)}
.work-meta .cat{color:var(--tiffany)}
.work-ttl{font-family:var(--mincho);font-size:18px;font-weight:600;letter-spacing:.08em;line-height:1.7}
.work-area{font-size:12px;letter-spacing:.18em;color:var(--stone-600)}
.works-foot{display:flex;justify-content:center;margin-top:80px;position:relative;z-index:2}

/* ========== CTA BAND ========== */
.cta-band{
  padding:100px 120px;background:var(--tiffany);color:#fff;
  display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:"CONTACT";position:absolute;right:-40px;bottom:-80px;
  font-family:var(--deco);font-style:italic;font-size:260px;line-height:.8;
  color:rgba(255,255,255,.1);font-weight:300;pointer-events:none;
}
.cta-ttl{font-family:var(--mincho);font-weight:600;font-size:clamp(30px,3.4vw,48px);line-height:1.6;letter-spacing:.08em;position:relative;z-index:2}
.cta-actions{display:flex;flex-direction:column;gap:18px;position:relative;z-index:2}
.cta-phone{display:flex;align-items:baseline;gap:16px}
.cta-phone .no{font-family:var(--mincho);font-size:44px;letter-spacing:.04em;font-weight:500}
.cta-phone .hours{font-size:11px;letter-spacing:.24em;opacity:.8}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:space-between;
  padding:22px 28px;background:#fff;color:var(--ink);
  font-size:13px;letter-spacing:.28em;font-weight:500;
  transition:all .35s ease;
}
.cta-btn:hover{background:var(--ink);color:#fff}
.cta-btn .arrow{font-family:var(--deco);font-size:18px;letter-spacing:0}

/* ========== FOOTER ========== */
.footer{background:var(--ink);color:#fff;padding:100px 120px 40px}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:56px;padding-bottom:72px;border-bottom:1px solid rgba(255,255,255,.14)}
.footer-brand .mark{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.footer-brand .mark .brand-mark{background:#fff;color:var(--tiffany)}
.footer-brand .mark .brand-name{color:#fff}
.footer-brand .mark .brand-name .en{color:rgba(255,255,255,.5)}
.footer-brand p{font-size:13px;line-height:2;color:rgba(255,255,255,.65);max-width:280px}
.footer-col h4{font-family:var(--deco);font-style:italic;font-weight:400;font-size:14px;letter-spacing:.3em;color:var(--tiffany);margin-bottom:24px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.footer-col a{font-size:13px;color:rgba(255,255,255,.75);letter-spacing:.08em;transition:color .3s ease}
.footer-col a:hover{color:var(--tiffany)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:36px;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.45)}
.footer-bottom .links{display:flex;gap:28px}

/* ========== RESPONSIVE ========== */
@media (max-width:1100px){
  .header{padding:18px 32px}
  .nav ul{gap:18px}
  .hero{padding:120px 40px 60px}
  .hero-grid{grid-template-columns:1fr;gap:40px;min-height:auto}
  .hero-heading{flex-direction:column;gap:8px;font-size:clamp(42px,9vw,64px);margin:0}
  .hero-heading .line{writing-mode:horizontal-tb}
  .hero-sub{font-size:15px;max-width:none}
  .hero-idx{font-size:56px}
  .hero-scroll{display:none}
  .plusone-badge{right:32px;bottom:32px;width:128px;height:128px}
  .section{padding:80px 32px}
  .section-head{grid-template-columns:1fr;gap:16px;margin-bottom:48px}
  .greeting{grid-template-columns:1fr;gap:48px}
  .greeting-body .lead{writing-mode:horizontal-tb;height:auto;font-size:clamp(26px,6vw,36px)}
  .greeting-row{grid-template-columns:1fr;gap:24px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .svc{min-height:300px;padding:32px 24px}
  .plusone{padding:100px 0}
  .plusone-inner{display:block;}
  .plusone-visual{width:100%;margin:0 32px 50px;}
  .plusone-body{width:100%;padding:0 32px}
  .works-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .cta-band{padding:64px 32px;grid-template-columns:1fr;gap:32px}
  .footer{padding:64px 32px 32px}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  /* morisaki変更 2026-04-21 Phase3-I003: .news-item > a と :not(:has(> a)) 両対応 */
  .news-item > a,
  .news-item:not(:has(> a)){grid-template-columns:auto auto 1fr auto;gap:20px}
}
@media (max-width:700px){
  .plusone-visual{width:100%;}
  .nav ul,.tel{display:none}
  .hamburger{display:grid}
  .rail{display:none}
  .header{padding:14px 20px}
  .hero{padding:100px 20px 60px}
  .section{padding:64px 20px}
  .services-grid{grid-template-columns:1fr}
  .works-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  /* morisaki変更 2026-04-21 Phase3-I003: .news-item > a と :not(:has(> a)) 両対応 */
  .news-item > a,
  .news-item:not(:has(> a)){grid-template-columns:1fr;gap:6px;padding:20px 8px}
  .news-arrow{display:none}
  .footer-bottom{flex-direction:column;gap:14px;text-align:center}
  .plusone-badge{width:108px;height:108px;right:20px;bottom:20px}
  .plusone-badge .ja{font-size:13px}
  .plusone-badge .en{font-size:10px}
  .plusone-badge .more{font-size:8px}
  .cta-phone .no{font-size:32px}
  .hero-watermark{font-size:80px}
}

/* ========== HAMBURGER / MOBILE DRAWER (v3独自追加) ========== */
.hamburger span,
.hamburger span::before,
.hamburger span::after{
  transition:transform .3s ease, top .3s ease, background .3s ease;
}
.hamburger.is-open span{background:transparent;z-index:100;}
.hamburger.is-open span::before{background:#fff;top:0;transform:rotate(45deg)}
.hamburger.is-open span::after{background:#fff;top:0;transform:rotate(-45deg)}

@media (max-width:700px){
  .nav.is-open ul{
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:0;
    padding:92px 32px 40px;
    color:#fff;
    background:var(--tiffany);
    backdrop-filter:blur(10px);
    z-index:45;
    gap:24px;
    overflow-y:auto;
    margin:0;
    height: 70vh;
  }
  .nav.is-open ul a{font-size:16px;letter-spacing:.12em}
  body.nav-open{overflow:hidden}
}

/* =====================================================================
   morisaki依頼 2026-04-21 Phase2 新規追加
   中ページ共通スタイル
   対象: page.php / single.php / archive.php / template-parts/*
   ===================================================================== */

/* ========== PAGE HEADER (写真背景 + 縦書きタイトル + パンくず) ========== */
/* morisaki変更 2026-04-21 Phase3 Task3 (D025/I010解消): min-height 320→280、本文側 padding-top も後述で削減 */
.page-header{
  position:relative;
  min-height:280px;
  padding:120px 120px 48px;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  background:var(--mist);
}
.page-header--photo{
  background-image:var(--page-header-bg,none);
  background-size:cover;background-position:center;
  color:#fff;
}
.page-header--default{
  background:linear-gradient(135deg, var(--mist) 0%, rgba(10,186,181,.10) 55%, rgba(15,110,86,.16) 100%);
}
.page-header__overlay{display:none}
.page-header--photo .page-header__overlay{
  display:block;
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(26,26,26,.25) 0%, rgba(26,26,26,.55) 100%);
  pointer-events:none;
}
.page-header__inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:28px;
  width:100%;
}
.page-header__title{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(28px,3.6vw,40px);line-height:1.5;letter-spacing:.1em;
  color:var(--ink);
  margin-left:auto;
}
.page-header__title-text{
  writing-mode:vertical-rl;text-orientation:mixed;
  white-space:nowrap;
}
.page-header--photo .page-header__title{color:#fff}

/* ========== BREADCRUMB (schema.org BreadcrumbList 対応マークアップ) ========== */
.breadcrumb{
  font-size:12px;letter-spacing:.12em;color:var(--stone-600);
  position:relative;z-index:2;
}
.breadcrumb__list{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:0;margin:0;
}
.breadcrumb__item{display:flex;align-items:center;gap:10px}
.breadcrumb__item a{color:var(--stone-600);transition:color .25s ease}
.breadcrumb__item a:hover{color:var(--tiffany)}
.breadcrumb__item.is-current span{color:var(--ink);font-weight:500}
.breadcrumb__sep{color:var(--stone-400);font-family:var(--deco)}
.page-header--photo .breadcrumb{color:rgba(255,255,255,.9)}
.page-header--photo .breadcrumb__item a{color:rgba(255,255,255,.85)}
.page-header--photo .breadcrumb__item a:hover{color:#fff}
.page-header--photo .breadcrumb__item.is-current span{color:#fff}
.page-header--photo .breadcrumb__sep{color:rgba(255,255,255,.5)}

/* ========== PAGE / POST MAIN (本文エリア共通) ========== */
/* morisaki変更 2026-04-21 Phase3 Task3 (D025/I010解消): padding-top 96→56、first-child の margin-top は下の同タスクで 0 に */
.page-main,
.post-main{padding:56px 24px 120px}
.page-container,
.post-container{max-width:760px;margin:0 auto}

.page-content,
.post-content{
  font-family:var(--sans);font-size:17px;line-height:1.9;color:var(--stone-900);
}
/* morisaki変更 2026-04-21 Phase3 Task3 (D025/I010解消): 初出し要素の margin-top 累積を根絶 */
.page-content > *:first-child,
.post-content > *:first-child{margin-top:0}
.page-content h1,.page-content h2,.page-content h3,.page-content h4,
.post-content h1,.post-content h2,.post-content h3,.post-content h4{
  font-family:var(--mincho);font-weight:600;letter-spacing:.08em;line-height:1.6;
  margin:56px 0 20px;color:var(--ink);
}
.page-content h1,.post-content h1{font-size:28px}
.page-content h2,.post-content h2{font-size:24px;border-bottom:1px solid var(--stone-200);padding-bottom:12px}
.page-content h3,.post-content h3{font-size:20px}
.page-content h4,.post-content h4{font-size:17px;color:var(--deep)}
.page-content p,.post-content p{margin:0 0 1.4em}
.page-content a,.post-content a{
  color:var(--tiffany);border-bottom:1px solid currentColor;transition:color .25s ease;
}
.page-content a:hover,.post-content a:hover{color:var(--tiffany-ink)}
.page-content blockquote,.post-content blockquote{
  border-left:3px solid var(--tiffany);
  padding:8px 0 8px 1.5em;margin:28px 0;
  color:var(--stone-600);font-style:italic;
}
.page-content code,.post-content code{
  background:var(--mist);padding:2px 6px;border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
}
.page-content pre,.post-content pre{
  background:var(--mist);padding:18px 22px;border-radius:4px;
  overflow-x:auto;margin:28px 0;font-size:14px;line-height:1.7;
}
.page-content pre code,.post-content pre code{background:none;padding:0}
.page-content img,.page-content figure,
.post-content img,.post-content figure{
  max-width:100%;border-radius:4px;margin:28px 0;
}
.page-content ul,.page-content ol,
.post-content ul,.post-content ol{padding-left:1.6em;margin:0 0 1.4em}
.page-content li,.post-content li{margin:0 0 .4em}
.page-content hr,.post-content hr{
  border:0;border-top:1px solid var(--stone-200);margin:48px 0;
}
.page-content table,.post-content table{
  width:100%;border-collapse:collapse;margin:28px 0;font-size:15px;
}
.page-content th,.page-content td,
.post-content th,.post-content td{
  padding:12px 16px;border-bottom:1px solid var(--stone-200);text-align:left;
}
.page-content th,.post-content th{
  background:var(--mist);font-family:var(--mincho);font-weight:600;
}

/* ========== POST META (記事詳細の日付・カテゴリ) ========== */
.post-meta{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:var(--deco);font-size:13px;letter-spacing:.16em;color:var(--stone-600);
  padding-bottom:10px;margin-bottom:20px;
}
.post-meta time{font-size:15px;letter-spacing:.12em}
.post-meta a{color:var(--tiffany);border:0;transition:color .25s ease}
.post-meta a:hover{color:var(--tiffany-ink)}

/* ========== ARCHIVE (記事一覧) ========== */
/* morisaki変更 2026-04-21 Phase3 Task3 (D025/I010解消): padding-top 96→56 (他 page/post-main と統一) */
.archive-main{padding:56px 24px 120px}
.archive-container{max-width:880px;margin:0 auto}
.archive-list{
  list-style:none;padding:0;margin:0;
  border-top:1px solid var(--stone-200);
}
.archive-item{border-bottom:1px solid var(--stone-200)}
.archive-item > article{margin:0}
.archive-item > article > a{
  display:flex;flex-direction:column;gap:10px;
  padding:32px 8px;color:inherit;
  transition:background .3s ease, padding .3s ease;
}
.archive-item > article > a:hover{background:var(--mist);padding-left:24px}
.archive-meta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--deco);font-size:13px;letter-spacing:.16em;color:var(--stone-600);
}
.archive-meta time{font-size:14px;letter-spacing:.12em}
.archive-cats{
  font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--stone-400);
}
.archive-title{
  font-family:var(--mincho);font-weight:600;font-size:20px;letter-spacing:.08em;
  line-height:1.6;color:var(--ink);
}
.archive-excerpt{
  font-size:14px;line-height:1.9;color:var(--stone-600);margin:4px 0 0;
}
.archive-empty{
  padding:60px 0;text-align:center;color:var(--stone-600);font-size:15px;
}

/* ========== POST NAV (前後記事 + カテゴリ) ========== */
.post-nav{
  margin-top:80px;padding-top:40px;
  border-top:1px solid var(--stone-200);
}
.post-nav__categories{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:40px;
}
.post-nav__label{
  font-family:var(--deco);font-size:11px;letter-spacing:.3em;color:var(--stone-400);
}
.post-nav__categories ul{
  list-style:none;display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:0;
}
.post-nav__categories li a{
  display:inline-block;padding:6px 14px;
  border:1px solid var(--stone-200);color:var(--stone-600);
  font-size:12px;letter-spacing:.12em;
  transition:all .3s ease;
}
.post-nav__categories li a:hover{
  border-color:var(--tiffany);color:var(--tiffany);
}
.post-nav__pager{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.post-nav__prev a,
.post-nav__next a{
  display:flex;flex-direction:column;gap:8px;
  padding:20px 24px;
  border:1px solid var(--stone-200);
  transition:all .3s ease;
}
.post-nav__prev a:hover,
.post-nav__next a:hover{
  border-color:var(--tiffany);background:var(--mist);
}
.post-nav__next{text-align:right}
.post-nav__dir{
  font-family:var(--deco);font-size:11px;letter-spacing:.3em;
  color:var(--tiffany);text-transform:uppercase;
}
.post-nav__ttl{
  font-family:var(--mincho);font-size:14px;letter-spacing:.06em;
  color:var(--ink);line-height:1.6;
}

/* ========== PAGINATION (Phase 3 Task 3 / D026/I012解消) ========== */
/* morisaki依頼 2026-04-21 Phase3 Task3 (D026/I012解消): naruki_v3_pagination() 用の和モダン装飾。archive.php / home.php / index.php で共有 */
.pagination{
  margin:72px 0 0;
  display:flex;justify-content:center;
}
.pagination ul{
  list-style:none;
  display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;
  padding:0;margin:0;
}
.pagination li{display:block}
.pagination a,
.pagination li > span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 10px;
  font-family:var(--deco);font-size:15px;letter-spacing:.12em;
  color:var(--stone-600);
  border:1px solid var(--stone-200);
  transition:all .3s ease;
}
.pagination a:hover{
  background:var(--tiffany);color:#fff;border-color:var(--tiffany);
}
.pagination .current{
  background:var(--tiffany);color:#fff;border-color:var(--tiffany);
  font-weight:500;
}
.pagination .prev,
.pagination .next{font-size:18px}
.pagination .dots{border-color:transparent;color:var(--stone-400)}

/* ========== WORKS CPT (Phase 3 Task 5 / D029/I001+I006 解消) ========== */
/* morisaki依頼 2026-04-22 Phase3 Task5: CPT 'works' 新設に伴う archive-works / single-works 専用装飾。
   既存の .works-grid / .work-* クラスを共有しつつ、archive で3列カードを収容できる幅と、
   single の関連事例・戻り導線・アイキャッチ大きめ表示を補完する。 */
.archive-container--works{max-width:1180px}
.archive-container--works .works-grid{margin-top:8px}

.works-single__thumb{
  margin:24px 0 40px;
  aspect-ratio:16/9;overflow:hidden;background:var(--stone-100);
}
.works-single__thumb img{width:100%;height:100%;object-fit:cover;display:block}

.works-related{
  margin-top:96px;padding-top:48px;
  border-top:1px solid var(--stone-200);
}
.works-related__ttl{
  font-family:var(--mincho);font-weight:600;font-size:22px;letter-spacing:.1em;
  color:var(--ink);text-align:center;margin:0 0 40px;
}
.works-related .works-grid{gap:24px}

.post-nav--works .post-nav__back{
  display:flex;justify-content:center;margin-top:48px;
}

@media (max-width:1100px){
  .archive-container--works .works-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .archive-container--works .works-grid,
  .works-related .works-grid{grid-template-columns:1fr;gap:24px}
  .works-related{margin-top:72px;padding-top:36px}
  .works-related__ttl{font-size:19px}
  .works-single__thumb{margin:20px 0 32px}
}

/* ========== SERVICE PAGES (Phase 3 Task 4 / D027/I013 解消) ========== */
/* morisaki依頼 2026-04-21 Phase3 Task4: サービスページ6件（page-id 10〜15）専用装飾
   対象: /shinchiku/(10) /doboku/(11) /gaikou/(12) /reform/(13) /kaigohoken/(14) /estate/(15)
   特記: 管理画面本文に大量の inline style が埋め込まれているため、
         特定プロパティは !important で和モダン方向に上書きする（スコープは6ページ限定のため副作用なし） */

/* 見出し h2: Shippori Mincho + サイズUP + 余白強化（インライン font-size/padding/margin を上書き） */
:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content h2{
  font-family:var(--mincho) !important;
  font-size:clamp(20px,2.2vw,24px) !important;
  letter-spacing:.08em !important;
  line-height:1.6 !important;
  padding:6px 18px !important;
  margin-bottom:24px !important;
  color:var(--ink) !important;
}

/* 段落 p: Noto Sans JP 明示 */
:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content p{
  font-family:var(--sans) !important;
}

/* 導入文（article 直下の最初の p、doboku / reform / kaigohoken パターン用） */
:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content > p:first-child{
  font-family:var(--mincho) !important;
  font-size:17px !important;
  line-height:2.1 !important;
  letter-spacing:.04em !important;
  color:var(--stone-600) !important;
  padding-bottom:36px !important;
  margin-bottom:36px !important;
  border-bottom:1px solid var(--stone-200) !important;
}

/* セクション区切り div: 呼吸感強化、border 色を stone 系に寄せる */
:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content > div{
  margin-bottom:56px !important;
  padding-bottom:40px !important;
}

/* 最終セクションの下線不要 */
:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content > div:last-child{
  border-bottom:0 !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

/* 画像ラッパー（uploads 配下の a）: border-radius を抑制、hover 装飾を追加 */
:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content a[href*="/uploads/"]{
  border-radius:2px !important;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content a[href*="/uploads/"]:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -12px rgba(10,186,181,.2);
}
:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content a[href*="/uploads/"] img{
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content a[href*="/uploads/"]:hover img{
  transform:scale(1.04);
}

/* 画像グリッドの gap を広げ、画像間の呼吸感 */
:is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content > div > div{
  gap:16px !important;
  margin:20px 0 28px !important;
}


.two-column,.three-column,.four-column,.five-column{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  margin-bottom:2vw;
}

.two-column img,.three-column img,.four-column img,.five-column img{
  width:100%;
}

.two-column div{
  flex-basis:48%;
}

.three-column div{
  flex-basis:31%;
}

.four-column div{
  flex-basis:23%;
}

.five-column div{
  flex-basis:18%;
}

.two-column .two-column>div{
  margin-bottom:0;
}

.naruki-body>div:last-child{
  margin-bottom:0 !important;
}


.naruki-body h2{
  font-size: 1.1rem; font-weight: bold; margin-bottom: 12px; padding-left: 12px; border-left: 4px solid #0ABAB5; color: #1c2b3a;
}


/* ========== RESPONSIVE (Phase 2 追加分 + Phase 3 Task 3 調整) ========== */
@media (max-width:1100px){
  /* morisaki変更 2026-04-21 Phase3 Task3 (D025/I010解消): min-height 280→240、padding-top 72→40 */
  .page-header{padding:110px 40px 40px;min-height:240px}
  .page-main,.post-main,.archive-main{padding:40px 32px 96px}
  .archive-item > article > a{padding:28px 8px}
}
@media (max-width:700px){
  /* morisaki変更 2026-04-21 Phase3 Task3 (D025/I010解消): min-height 240→200、padding-top 56→28 */
  .page-header{min-height:200px;padding:96px 20px 32px}
  .page-header__title{margin-left:0;font-size:clamp(24px,7vw,32px)}
  .page-header__title-text{writing-mode:horizontal-tb;white-space:normal}
  .page-main,.post-main,.archive-main{padding:28px 20px 80px}
  .page-content,.post-content{font-size:16px;line-height:1.85}
  .page-content h1,.post-content h1{font-size:24px}
  .page-content h2,.post-content h2{font-size:21px}
  .page-content h3,.post-content h3{font-size:18px}
  .post-nav{margin-top:60px}
  .post-nav__pager{grid-template-columns:1fr}
  .post-nav__next{text-align:left}
  .archive-item > article > a{padding:22px 8px}
  .archive-item > article > a:hover{padding-left:16px}
  .archive-meta{gap:10px}
  .archive-title{font-size:17px}
  /* morisaki変更 2026-04-21 Phase3 Task3 (D026/I012解消): モバイルでのページネーション圧縮 */
  .pagination{margin:48px 0 0}
  .pagination ul{gap:6px}
  .pagination a,
  .pagination li > span{min-width:38px;height:38px;font-size:13px;padding:0 6px}
  .brand img{height:60px;position:absolute;top:50%;transform: translateY(-50%);}
  /* morisaki変更 2026-04-21 Phase3 Task4 (D027/I013解消): サービスページのモバイル調整 */
  :is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content h2{
    font-size:18px !important;
    padding:4px 14px !important;
    margin-bottom:18px !important;
  }
  :is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content > p:first-child{
    font-size:15px !important;
    padding-bottom:24px !important;
    margin-bottom:24px !important;
  }
  :is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content > div{
    margin-bottom:40px !important;
    padding-bottom:28px !important;
  }
  :is(.page-id-10,.page-id-11,.page-id-12,.page-id-13,.page-id-14,.page-id-15) .page-content > div > div{
    gap:10px !important;
  }

.naruki-body>div:last-child{
  margin-bottom:0 !important;
}

.two-column,.three-column,.four-column,.five-column{
  margin-bottom:8vw;
}

.two-column>div,.three-column>div,.four-column>div,.five-column>div{
  flex-basis:100%;
  margin-bottom:8vw;
}

.two-column>div:last-child,.three-column>div:last-child,.four-column>div:last-child,.five-column>div:last-child{
  margin-bottom:0;
}


}



/* ============================================
   Contact Form 7 - naruki テーマ用デザイン
   ============================================ */

.naruki-cf7 {
  max-width: 720px;
  margin: 0 auto;
}

.naruki-cf7 .cf-row {
  margin: 0 0 1.75rem;
  padding: 0;
}

.naruki-cf7 .cf-row dt {
  margin: 0 0 0.5rem;
  padding: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1C2B3A;
  letter-spacing: 0.02em;
}

.naruki-cf7 .cf-row dd {
  margin: 0;
  padding: 0;
}

/* 必須ラベル */
.naruki-cf7 .cf-req {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.5em;
  background: #0ABAB5;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 3px;
  vertical-align: middle;
  letter-spacing: 0.05em;
}

/* 補足説明 */
.naruki-cf7 .cf-note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: #5A6A7A;
  line-height: 1.6;
}

/* 入力フィールド共通 */
.naruki-cf7 input[type="text"],
.naruki-cf7 input[type="email"],
.naruki-cf7 input[type="tel"],
.naruki-cf7 textarea,
.naruki-cf7 select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  font-family: inherit;
  color: #1C2B3A;
  background: #fff;
  border: 1px solid #D8E0E5;
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.naruki-cf7 input[type="text"]:focus,
.naruki-cf7 input[type="email"]:focus,
.naruki-cf7 input[type="tel"]:focus,
.naruki-cf7 textarea:focus,
.naruki-cf7 select:focus {
  outline: none;
  border-color: #0ABAB5;
  box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.15);
}

.naruki-cf7 textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.7;
}

/* select の矢印カスタマイズ */
.naruki-cf7 select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230F6E56' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* 同意チェックボックス */
.naruki-cf7 .cf-row-acceptance dd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  line-height: 1.6;
}

.naruki-cf7 .cf-row-acceptance .wpcf7-list-item {
  margin: 0;
}

.naruki-cf7 .cf-row-acceptance input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: #0ABAB5;
  cursor: pointer;
}

.naruki-cf7 .cf-row-acceptance a {
  color: #0F6E56;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.naruki-cf7 .cf-row-acceptance a:hover {
  color: #0ABAB5;
}

/* 送信ボタン */
.naruki-cf7 .cf-submit-wrap {
  margin: 2.5rem 0 0;
  text-align: center;
}

.naruki-cf7 .wpcf7-submit {
  display: inline-block;
  min-width: 240px;
  padding: 1rem 2.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: #0ABAB5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(10, 186, 181, 0.25);
}

.naruki-cf7 .wpcf7-submit:hover {
  background: #0F6E56;
  box-shadow: 0 4px 12px rgba(15, 110, 86, 0.35);
}

.naruki-cf7 .wpcf7-submit:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(10, 186, 181, 0.25);
}

/* CF7 標準のレスポンス表示 */
.naruki-cf7 .wpcf7-response-output {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #0ABAB5;
  background: rgba(10, 186, 181, 0.08);
  color: #0F6E56;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: #D85A30;
  background: rgba(216, 90, 48, 0.08);
  color: #B04822;
}

/* バリデーションエラー時の入力欄 */
.naruki-cf7 .wpcf7-not-valid {
  border-color: #D85A30 !important;
  background: rgba(216, 90, 48, 0.04) !important;
}

.naruki-cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: #B04822;
  font-weight: 500;
}

/* 送信中スピナー */
.naruki-cf7 .wpcf7-spinner {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* レスポンシブ調整 */
@media (max-width: 600px) {
  .naruki-cf7 .cf-row {
    margin-bottom: 1.5rem;
  }
  
  .naruki-cf7 .wpcf7-submit {
    width: 100%;
    min-width: 0;
  }
}