/* =========================================================
   common.css
   全ページ共通のスタイル（トークン・ベース・ヘッダー・フッター・CTA など）。
   TOP専用は css/top.css、下層ページ専用は css/subpage.css に記述します。
   ========================================================= */
/* =========================================================
   Design tokens
   ========================================================= */
:root{
  /* Design System tokens（Design System アーティファクト tokens.css より） */
  --linoa-co:#85b539;   /* アクセント */
  --linoa-back:#ffffff; /* 背景色 */

  --c-accent:var(--linoa-co);
  --c-accent-dark:#6a9a2a;
  --c-accent-light:#f2f8e9;
  --c-teal:#3fa7a0;
  --c-text:#1f2a33;
  --c-text-sub:#5b6670;
  --c-bg:var(--linoa-back);
  --c-bg-sub:#f6f8f9;
  --c-border:#e3e8ec;
  --c-dark:#14202a;

  --f-ja:"Zen Kaku Gothic New", yakuhanjp, -apple-system, blinkmacsystemfont, "Helvetica Neue", hiragino sans, "\30d2\30e9\30ae\30ce\89d2\30b4  ProN W3", hiragino kaku gothic pron, "Yu Gothic", yugothic, verdana, meiryo, "M+ 1p", sans-serif;
  --f-en:"Inter", "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --radius-s:8px;
  --radius-m:12px;
  --radius-l:16px;
  --radius-xl:32px;
  --radius-pill:999px;

  --content-max:1200px;
  --gutter:40px;
  --section-pad:140px;
  --header-h:96px;
  --header-h-sm:68px;

  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:1023px){ :root{ --gutter:32px; --section-pad:110px; } }
@media (max-width:767px){ :root{ --gutter:20px; --section-pad:80px; --header-h:64px; --header-h-sm:60px; } }

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--c-bg); color:var(--c-text);
  font-family:var(--f-ja); font-size:16px; line-height:1.9; letter-spacing:.04em;
  -webkit-font-smoothing:antialiased; line-break:strict; overflow-wrap:break-word;
}
@media (max-width:767px){ body{ font-size:15px; } }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
:focus-visible{ outline:2px solid var(--c-accent-dark); outline-offset:3px; border-radius:4px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* 見出しなどで、このまとまりの区切りでのみ折り返す（幅が足りないとき） */
.phrase{ display:inline-block; }
.skip{ position:absolute; left:16px; top:-60px; z-index:200; background:var(--c-dark); color:#fff; padding:10px 16px; border-radius:var(--radius-s); }
.skip:focus{ top:16px; }

.pc{ display:inline; } .sp{ display:none; }
@media (max-width:767px){ .pc{ display:none; } .sp{ display:inline; } }

.container{ width:100%; max-width:calc(var(--content-max) + var(--gutter)*2); margin:0 auto; padding:0 var(--gutter); }
.section{ position:relative; padding:var(--section-pad) 0; }

/* 画像の共通枠：読み込み失敗時も淡いグラデーションのダミー枠として成立させる */
.ph{ position:relative; overflow:hidden; background:linear-gradient(135deg,#e9eef1 0%,#f2f8e9 100%); }
.ph img{ width:100%; height:100%; object-fit:cover; }

/* Section label + heading */
.label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-en);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c-accent-dark);
    line-height: 1;
}
.label::before{ content:""; width:24px; height:1px; background:var(--c-accent); }
.label--center::after{ content:""; width:24px; height:1px; background:var(--c-accent); }
.h2{ margin-top:20px; font-size:clamp(22px, 1.4rem + 1.1vw, 36px); font-weight:700; line-height:1.5; letter-spacing:.06em; word-break:keep-all; overflow-wrap:break-word; }
@media (max-width:767px){ .h2{ font-size:22px; letter-spacing:.04em; } }

/* =========================================================
   Buttons / links
   ========================================================= */
.arrow{ display:inline-block; transition:transform .3s var(--ease); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:56px; padding:0 32px; border-radius:var(--radius-s);
  font-weight:700; font-size:15px; letter-spacing:.08em; cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover .arrow, .btn:focus-visible .arrow{ transform:translateX(5px); }
.btn--outline{ border:1px solid var(--c-accent); color:var(--c-accent-dark); background:transparent; }
.btn--outline:hover{ background:var(--c-accent); color:#fff; }
.btn--fill{ background:var(--c-accent); color:#fff; }
.btn--fill:hover{ background:var(--c-accent-dark); }

.tlink{
  position:relative; display:inline-flex; align-items:center; gap:12px; padding-bottom:6px;
  font-weight:700; font-size:15px; color:var(--c-accent-dark); letter-spacing:.06em;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.tlink:hover::after, .tlink:focus-visible::after{ transform:scaleX(1); }
.tlink:hover .arrow, .tlink:focus-visible .arrow{ transform:translateX(5px); }

/* =========================================================
   Header
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  color:#fff; transition:height .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
.header.is-scrolled{
  height:var(--header-h-sm); color:var(--c-text);
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--c-border), 0 6px 24px rgba(20,32,42,.05);
}
.header__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:none; }
/* ロゴ（img/linoa_logo.svg） */
.logo{ display:flex; align-items:center; flex:none; }
.logo__img{ width:auto; height:30px; }
.nav{ display:flex; align-items:center; gap:40px; }
.nav__list{ display:flex; gap:32px; font-size:14px; font-weight:500; letter-spacing:.08em; }
.nav__list a{ position:relative; padding:6px 0; }
.nav__list a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--c-accent); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after{ transform:scaleX(1); }
.nav .btn{ min-height:46px; padding:0 24px; font-size:14px; }
.burger{ display:none; }

@media (max-width:1023px){
  .nav__list{ gap:24px; } .nav{ gap:28px; }
}
@media (max-width:900px){
  .nav{ display:none; }
  .burger{
    display:flex; position:relative; z-index:120; width:48px; height:48px; border:0; background:transparent; color:inherit; cursor:pointer;
    flex-direction:column; justify-content:center; align-items:center; gap:7px; border-radius:var(--radius-s);
  }
  .burger span{ display:block; width:26px; height:1.5px; background:currentColor; transition:transform .35s var(--ease), opacity .3s; }
  .burger[aria-expanded="true"]{ color:var(--c-text); }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }
}

/* SP menu panel */
.spmenu{
  position:fixed; inset:0; z-index:110; background:#fff; color:var(--c-text);
  display:flex; flex-direction:column; justify-content:center; padding:96px 32px 48px;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.spmenu.is-open{ opacity:1; visibility:visible; }
.spmenu__list{ display:grid; gap:4px; }
.spmenu__list a{ display:flex; justify-content:space-between; align-items:center; padding:18px 4px; border-bottom:1px solid var(--c-border); font-size:18px; font-weight:500; letter-spacing:.08em; }
.spmenu__list a .en{ font-family:var(--f-en); font-size:11px; color:var(--c-accent-dark); letter-spacing:.2em; }
.spmenu .btn{ margin-top:36px; width:100%; }
.spmenu__line{ position:absolute; top:0; left:32px; width:1px; height:72px; background:linear-gradient(var(--c-accent),transparent); }
body.is-locked{ overflow:hidden; }

/* =========================================================
   ⑤ Contact
   ========================================================= */
.contact{ position:relative; overflow:hidden; color:#fff; text-align:center; background:var(--c-dark); }
.contact__bg{ position:absolute; inset:0; }
.contact__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 70%; }/* 空が多い写真のため、橋と湖面が入るよう下寄りで切り抜く */
.contact__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 15% 100%, rgba(133,181,57,.22), transparent 70%),
    radial-gradient(50% 70% at 90% 0%, rgba(63,167,160,.18), transparent 70%),
    rgba(20,32,42,.78);
}
.contact__inner{ position:relative; z-index:1; }
.contact .label{ color:#b5d880; }
.contact .label::before, .contact .label::after{ background:#b5d880; }
.contact__text{ margin-top:28px; color:rgba(255,255,255,.85); }
.contact__panel{
  max-width:820px; margin:0 auto; padding:72px 40px;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-l);
  background:rgba(255,255,255,.04); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn--cta{
  margin-top:48px; width:320px; max-width:100%; min-height:64px; font-size:16px;
  background:var(--c-accent); color:#fff; box-shadow:0 6px 20px -8px rgba(133,181,57,.6);
}
.btn--cta:hover{ background:var(--c-accent-dark); transform:translateY(-3px); box-shadow:0 18px 36px -12px rgba(133,181,57,.65); }
@media (max-width:767px){ .contact__panel{ padding:56px 20px; } }

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--c-dark); color:#fff; padding:96px 0 32px; border-top:1px solid rgba(255,255,255,.08); }
.footer__grid{ display:grid; grid-template-columns:1.1fr .7fr 1.6fr; gap:56px; }
/* ロゴ（白）＋その下に小さく社名 */
.footer__name{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.footer__logo{ width:auto; height:36px; }
.footer__name span{ font-size:13px; letter-spacing:.12em; color:rgba(255,255,255,.75); }
.footer__h{ font-family:var(--f-en); font-size:12px; font-weight:500; letter-spacing:.24em; color:#b5d880; }
.footer__menu{ margin-top:20px; display:grid; gap:10px; font-size:14px; }
.footer__menu a{ color:rgba(255,255,255,.85); transition:color .3s; }
.footer__menu a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.offices{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.office{ font-size:14px; line-height:1.85; color:rgba(255,255,255,.7); font-style:normal; }
.office__name{ display:block; color:#fff; font-weight:500; margin-bottom:6px; }
.office a{ color:rgba(255,255,255,.85); text-decoration:underline; text-decoration-color:rgba(255,255,255,.25); text-underline-offset:4px; }
.office a:hover{ text-decoration-color:#b5d880; }
.footer__bottom{ margin-top:72px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12); text-align:center; font-family:var(--f-en); font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.7); }
@media (max-width:1023px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__office{ grid-column:1 / -1; } }
@media (max-width:767px){
  .footer{ padding:72px 0 28px; }
  .footer__grid{ grid-template-columns:1fr; gap:44px; }
  .offices{ grid-template-columns:1fr; gap:24px; }
  .footer__bottom{ margin-top:48px; }
}

/* Page top */
.pagetop{
  position:fixed; right:24px; bottom:24px; z-index:90; width:52px; height:52px; border-radius:50%; border:0;
  background:var(--c-accent); color:#fff; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 8px 24px -8px rgba(20,32,42,.35);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .4s var(--ease), visibility .4s, transform .4s var(--ease), background-color .3s;
}
.pagetop.is-show{ opacity:1; visibility:visible; transform:none; }
.pagetop:hover{ background:var(--c-accent-dark); transform:translateY(-3px); }
@media (max-width:767px){ .pagetop{ right:16px; bottom:16px; width:46px; height:46px; } }

/* =========================================================
   Scroll reveal
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i, 0) * .12s); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   視覚効果を減らす設定のとき
   TOPのオープニング演出はそのまま表示し、それ以外の動きを控えめにする
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  /* フェードイン：移動をなくし、短い透明度の変化だけにする */
  .js .reveal{ transform:none; transition:opacity .4s ease; transition-delay:0s; }
}

/* =========================================================
   Design System alignment
   - トークン：--linoa-co（アクセント）／--linoa-back（背景）
   - 参照デザイン：ピル型ボタン、大きな英字ディスプレイ見出し、
     2枚重ねの写真コラージュ、ダーク背景＋白い大角丸カードのサービス一覧、
     ゆったりした字間・行間
   ========================================================= */
body{ letter-spacing:.08em; line-height:2; }

/* Buttons：ピル型 */
.btn{ border-radius:var(--radius-pill); }
.btn--outline{ border-color:var(--c-text); color:var(--c-text); }
.btn--outline:hover{ border-color:var(--c-accent); background:var(--c-accent); color:#fff; }

/* Header */
.nav .btn{ min-height:44px; padding:0 26px; }
.header__sp-cta{ display:none; }
@media (max-width:900px){
  .header__inner{ gap:12px; }
  .logo{ margin-right:auto; }
  .header__sp-cta{ display:inline-flex; white-space:nowrap; min-height:42px; padding:0 16px; font-size:13px; letter-spacing:.06em; }
  .burger{ border:1px solid currentColor; border-radius:50%; width:46px; height:46px; gap:5px; }
  .burger span{ width:18px; }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}
@media (max-width:767px){ .logo__img{ height:24px; } }



/* Contact */
.contact .label{ color:#fff; }
.contact .label::after{ background:var(--c-accent); }
.contact__panel{ border-radius:var(--radius-xl); }

/* Page top */
.pagetop{ border-radius:50%; }