/* M PLUS Rounded 1c の読み込みは各HTMLのでにより行う（@importは信頼性が低いため撤去）。
ヒラギノ丸ゴProNは太字の実体を持たずSafariが疑似ボールドで描画してしまう（見出しがにじんで見える原因）。
実体のboldウェイトを持つWebフォントで置き換える */
:root{
--bg:#FCF3EC; --panel:#FFFFFF; --panel-soft:#FBE4DA; --panel-line:#F0C9B8;
--ink:#4A2E1C; --ink-soft:#8A6448; --ink-faint:#B98F72;
--pink:#E8749A; --pink-dark:#C85578;
--mint:#4FA890; --mint-soft:rgba(79,168,144,.06);
--gold:#E3A93E; --gold-soft:rgba(227,169,62,.10);
--btn-brown:#3A2410; --btn-ring:rgba(216,168,110,.4); --btn-ring-soft:rgba(216,168,110,0);
--footer-bg:#55341F; --footer-ink:#F5EDE2; --footer-ink-soft:rgba(245,237,226,.72);
--chrome-bg:#F3F2EE; --chrome-panel:#fff; --chrome-line:#DEDAD0;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#241509; --panel:#2E1B10; --panel-soft:#3A2013; --panel-line:#4A2E1C;
--ink:#F5E3D3; --ink-soft:#D2AE8C; --ink-faint:#93755A;
--pink:#F08FB0; --pink-dark:#D66C90;
--mint:#7FD6BE; --mint-soft:rgba(127,214,190,.08);
--gold:#F0BE68; --gold-soft:rgba(240,190,110,.12);
--btn-brown:#6B4226; --btn-ring:rgba(240,190,110,.45); --btn-ring-soft:rgba(240,190,110,0);
--footer-bg:#3A2013; --footer-ink:#F5EDE2; --footer-ink-soft:rgba(245,237,226,.68);
--chrome-bg:#16181C; --chrome-panel:#1E2126; --chrome-line:#31353D;
}
}
:root[data-theme="dark"]{
--bg:#241509; --panel:#2E1B10; --panel-soft:#3A2013; --panel-line:#4A2E1C; --ink:#F5E3D3; --ink-soft:#D2AE8C; --ink-faint:#93755A;
--pink:#F08FB0; --pink-dark:#D66C90; --mint:#7FD6BE; --mint-soft:rgba(127,214,190,.08); --gold:#F0BE68; --gold-soft:rgba(240,190,110,.12);
--btn-brown:#6B4226; --btn-ring:rgba(240,190,110,.45); --btn-ring-soft:rgba(240,190,110,0);
--footer-bg:#3A2013; --footer-ink:#F5EDE2; --footer-ink-soft:rgba(245,237,226,.68);
--chrome-bg:#16181C; --chrome-panel:#1E2126; --chrome-line:#31353D;
}
:root[data-theme="light"]{
--bg:#FCF3EC; --panel:#FFFFFF; --panel-soft:#FBE4DA; --panel-line:#F0C9B8; --ink:#4A2E1C; --ink-soft:#8A6448; --ink-faint:#B98F72;
--pink:#E8749A; --pink-dark:#C85578; --mint:#4FA890; --mint-soft:rgba(79,168,144,.06); --gold:#E3A93E; --gold-soft:rgba(227,169,62,.10);
--btn-brown:#3A2410; --btn-ring:rgba(216,168,110,.4); --btn-ring-soft:rgba(216,168,110,0);
--footer-bg:#55341F; --footer-ink:#F5EDE2; --footer-ink-soft:rgba(245,237,226,.72);
--chrome-bg:#F3F2EE; --chrome-panel:#fff; --chrome-line:#DEDAD0;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
background:var(--bg); color:var(--ink);
font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;
}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px}
.wrap--narrow{max-width:760px}
/* ---- header: 独立した常時表示（sticky）のヘッダーバー ---- */
.site-header{
position:sticky; top:0; z-index:40;
background:var(--bg); border-bottom:1px solid var(--panel-line);
}
.site-nav{display:flex; align-items:center; padding:14px 0; position:relative}
.site-nav .brand{
font-size:15px; font-weight:800; text-decoration:none; letter-spacing:.01em; color:var(--mint);
display:inline-flex; align-items:center; gap:7px;
}
.site-nav .brand::before{
content:""; width:16px; height:16px; flex:none;
background:url("img/eyebrow-tree.png") center/contain no-repeat;
}
.site-nav .links{display:flex; gap:28px; margin-left:auto; font-size:14.5px}
.site-nav .links a{
text-decoration:none; font-weight:600; color:var(--ink-soft);
padding:4px 2px; margin:-4px -2px; border-radius:6px;
transition:color .2s ease;
}
.site-nav .links a:hover{ color:var(--mint) }
.site-nav .links a:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; color:var(--mint) }
.site-nav .links a:active{ color:var(--pink-dark) }
/* ---- nav: mobile hamburger + dropdown ---- */
.nav-toggle{
display:none; width:38px; height:38px; border-radius:12px; flex:none;
border:1px solid var(--panel-line); background:var(--panel); cursor:pointer;
align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0;
}
.nav-toggle .bar{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
@media (max-width:760px){
.nav-toggle{ display:inline-flex; margin-left:auto }
.site-nav .links{
display:flex; flex-direction:column; gap:0; margin-left:0;
position:fixed; left:20px; right:20px; top:70px; z-index:39;
background:var(--panel); border:1px solid var(--panel-line); border-radius:20px;
box-shadow:0 14px 30px rgba(74,46,28,.18);
overflow:hidden; max-height:0; opacity:0; pointer-events:none;
transition:max-height .3s ease, opacity .25s ease;
}
.site-nav .links.is-open{ max-height:320px; opacity:1; pointer-events:auto }
.site-nav .links a{ padding:14px 20px; margin:0; border-bottom:1px solid var(--panel-line); border-radius:0; color:var(--ink) }
.site-nav .links a:last-child{ border-bottom:none }
.site-nav .links a:hover, .site-nav .links a:active{ background:var(--panel-soft); color:var(--mint) }
.site-nav .links a:focus-visible{ outline:2px solid var(--mint); outline-offset:-2px; color:var(--mint) }
}
@media (prefers-reduced-motion: reduce){ .site-nav .links{ transition:none } .nav-toggle .bar{ transition:none } }
/* ---- page header（トップ以外の下位ページ用ヘッダー） ---- */
.page-header{
position:relative; padding:40px 0 88px;
background:url("img/hero-cloud-village.png") center 6% / cover no-repeat;
}
.page-header-inner{
display:inline-block; padding:22px 28px; max-width:640px;
background:rgba(255,255,255,.94); border-radius:22px;
}
@media (prefers-color-scheme: dark){
.page-header-inner{ background:rgba(20,11,4,.88) }
}
/* page-header-inner h1/p のフォントサイズはページ種別ごとに個別指定（company.html/blog.html/article.cssを参照） */
.wind{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none }
.leaf{
position:absolute; top:var(--y); left:0; width:var(--size); height:var(--size);
background:var(--leaf-color, rgba(79,168,144,.85)); border-radius:0% 100% 0% 100%;
opacity:0; animation:drift var(--dur) linear infinite; animation-delay:var(--delay);
}
@keyframes drift{
0%{ transform:translate(-30px,0) rotate(0deg); opacity:0 }
10%{ opacity:.8 }
30%{ transform:translate(480px,-22px) rotate(90deg) }
50%{ transform:translate(900px,16px) rotate(180deg) }
70%{ transform:translate(1350px,-18px) rotate(270deg) }
88%{ opacity:.55 }
100%{ transform:translate(1900px,12px) rotate(360deg); opacity:0 }
}
@media (prefers-reduced-motion: reduce){ .leaf{ animation:none; display:none } }
.eyebrow{
font-size:13px; letter-spacing:.02em; font-weight:700;
display:inline-flex; align-items:center; gap:.5em; margin-bottom:20px; color:var(--mint);
}
.eyebrow::before{
content:""; width:14px; height:14px; flex:none;
background:url("img/eyebrow-tree.png") center/contain no-repeat;
}
/* リッチ焦茶系（eichinomizu-ecのボタン演出を踏襲）: 外枠のリングが常時ふわっと膨らんで消えるパルス。hoverでリフト+強いグロー */
.btn-rich{
font-weight:700; font-size:15px; padding:15px 30px; border-radius:999px; text-decoration:none;
display:inline-block; background:var(--btn-brown); color:#F5EDE2; border:1px solid var(--btn-brown);
box-shadow:inset 0 0 0 1px var(--btn-ring), 0 0 0 0 var(--btn-ring);
animation:btnPulse 2.8s ease-in-out infinite;
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background .3s ease;
}
.btn-rich:hover{
transform:translateY(-2px); animation-play-state:paused;
box-shadow:inset 0 0 0 1px var(--btn-ring), 0 14px 34px rgba(43,30,20,.3);
}
@keyframes btnPulse{
0%,100%{ box-shadow:inset 0 0 0 1px var(--btn-ring), 0 0 0 0 var(--btn-ring) }
50%{ box-shadow:inset 0 0 0 1px var(--btn-ring), 0 0 0 9px var(--btn-ring-soft) }
}
@media (prefers-reduced-motion: reduce){ .btn-rich{ animation:none } }
.btn-rich--lg{ font-size:18px; padding:20px 44px }
.btn-rich--line{
background:var(--mint); border-color:var(--btn-brown);
--btn-ring: rgba(232,116,154,.4); --btn-ring-soft: rgba(232,116,154,0);
}
.btn-ghost{
font-size:15px; font-weight:700; padding:13px 26px; border-radius:999px; text-decoration:none; display:inline-block;
border:2px solid var(--panel-line); color:var(--ink-soft); background:var(--panel);
transition:border-color .2s ease, transform .15s ease, color .2s ease;
}
.btn-ghost:hover{ border-color:var(--mint); color:var(--ink); transform:translateY(-2px) }
/* ---- curved divider ---- */
.wave-divider{ position:relative; z-index:2; margin-top:-68px; line-height:0; pointer-events:none }
.wave-divider svg{ width:100%; height:84px; display:block }
.wave-fill{ fill:var(--bg) }
.wave-stroke-2{ fill:none; stroke:var(--pink); stroke-width:2.5; stroke-linecap:round; stroke-opacity:.55 }
/* ---- sections ---- */
.section{ padding:56px 0 }
.section-head{ margin-bottom:28px; max-width:56ch }
.section-head .eyebrow{ margin-bottom:10px }
.section-head h2{ font-size:23px; font-weight:800; margin:0 0 8px; letter-spacing:.01em }
.section-head p{ font-size:14.5px; color:var(--ink-soft); line-height:1.8; margin:0 }
.cta-band{ padding:48px 0 96px; text-align:center }
.cta-band h2{ font-size:28px; font-weight:800; margin:0 0 14px; text-wrap:balance }
.cta-band .cta-sub{ font-size:19px; font-weight:700; color:var(--pink-dark); margin:0 0 36px; text-wrap:balance }
.footer-wave{ position:relative; z-index:2; margin-top:-58px; line-height:0; pointer-events:none }
.footer-wave svg{ width:100%; height:68px; display:block }
.footer-wave-fill{ fill:var(--footer-bg) }
.footer-wave-stroke{ fill:none; stroke:var(--pink); stroke-width:2.5; stroke-linecap:round }
.site-footer-wrap{ background:var(--footer-bg) }
.site-footer{ padding:18px 0 30px; font-size:12px; color:var(--footer-ink-soft);
display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px }
.site-footer span:first-child{ color:var(--footer-ink); font-weight:600 }
/* ---- floating CTA + back-to-top（スクロール追従） ---- */
.floating-cta{
position:fixed; right:20px; bottom:20px; z-index:30;
font-weight:700; font-size:14px; padding:13px 22px; border-radius:999px; text-decoration:none;
display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
background:var(--mint); color:#F5EDE2; border:1px solid var(--btn-brown);
box-shadow:0 10px 24px rgba(74,46,28,.22);
opacity:0; transform:translateY(12px); pointer-events:none;
transition:opacity .3s ease, transform .3s ease;
}
.floating-cta.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto }
.floating-cta:hover{ transform:translateY(-2px) }
.back-to-top{
position:fixed; right:20px; bottom:84px; z-index:30;
width:44px; height:44px; border-radius:50%; padding:0;
display:flex; align-items:center; justify-content:center; font-size:17px; cursor:pointer;
background:var(--panel); border:1px solid var(--panel-line); color:var(--ink);
box-shadow:0 10px 24px rgba(74,46,28,.18);
opacity:0; transform:translateY(12px); pointer-events:none;
transition:opacity .3s ease, transform .3s ease;
}
.back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto }
.back-to-top:hover{ transform:translateY(-2px) }
@media (max-width:480px){
.floating-cta{ right:14px; bottom:14px; padding:12px 18px; font-size:13.5px }
.back-to-top{ right:14px; bottom:74px; width:40px; height:40px; font-size:16px }
}
@media (prefers-reduced-motion: reduce){ .floating-cta, .back-to-top{ transition:none } }