/*
Theme Name: TRYGROW Corporate
Theme URI: https://trygrow.example/
Author: -
Description: 株式会社トライグロウ コーポレートサイト用オリジナルテーマ。モノクロ基調・中央配置・Lenis慣性スクロール・JP/EN切り替え対応。
Version: 1.0.0
Requires PHP: 7.4
License: Proprietary
Text Domain: trygrow
*/

:root{
  --black:#000;
  --ink:#1a1a1a;
  --gray:#6b6b6b;
  --line:#dcdcdc;
  --paper:#fff;
  --mist:#f4f4f4;
  --jp:'Zen Kaku Gothic New',sans-serif;
  --en:'Archivo',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--jp);color:var(--ink);background:var(--paper);line-height:1.9;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--black);color:#fff}
br.pc{display:inline}

/* ---------- opening ---------- */
#opening{position:fixed;inset:0;z-index:1000;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;transition:opacity .8s ease,visibility .8s}
#opening.done{opacity:0;visibility:hidden;pointer-events:none}
#opening .op-symbol{width:110px;opacity:0;transform:translateY(14px);animation:opIn 1.1s cubic-bezier(.22,1,.36,1) .2s forwards}
#opening .op-line{width:0;height:1px;background:var(--black);animation:opLine .9s cubic-bezier(.65,0,.35,1) 1.15s forwards}
@keyframes opIn{to{opacity:1;transform:translateY(0)}}
@keyframes opLine{to{width:120px}}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:900;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid rgba(0,0,0,.07)}
.h-in{max-width:1200px;margin:0 auto;padding:0 28px;height:72px;display:flex;align-items:center;justify-content:space-between}
.h-logo{position:relative;display:flex;align-items:center}
.h-logo img{height:38px;width:auto}
.h-logo .logo-full{transition:opacity .8s ease}
.h-logo .logo-mark{position:absolute;left:0;top:50%;transform:translateY(-50%);height:34px;opacity:0;transition:opacity .8s ease}
.n-en{display:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--black);outline-offset:3px}
body{-webkit-tap-highlight-color:transparent}
.g-nav{display:flex;align-items:center;gap:34px}
.g-nav a{font-size:13px;font-weight:500;letter-spacing:.06em;position:relative;padding:6px 0}
.g-nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--black);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.g-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.lang{display:flex;border:1px solid var(--black);font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.08em}
.lang button{background:none;border:none;padding:6px 12px;cursor:pointer;font:inherit;color:var(--black);transition:.25s}
.lang button.on{background:var(--black);color:#fff}
.menu-btn{display:none;background:none;border:none;cursor:pointer;width:36px;height:13px;position:relative}
.menu-btn span{position:absolute;left:0;width:100%;height:1.5px;background:var(--black);transition:.35s cubic-bezier(.65,0,.35,1)}
.menu-btn span:nth-child(1){top:0}
.menu-btn span:nth-child(2){top:6px}
.menu-btn span:nth-child(3){top:12px}
body.nav-open .menu-btn span:nth-child(1){top:6px;transform:rotate(45deg)}
body.nav-open .menu-btn span:nth-child(2){opacity:0;transform:scaleX(.4)}
body.nav-open .menu-btn span:nth-child(3){top:6px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:120px 28px 80px;overflow:hidden}
.hero-bg{position:absolute;right:-8%;bottom:5%;width:min(58vw,680px);opacity:.045;filter:grayscale(1);pointer-events:none}
.hero-copy{font-size:clamp(30px,5.4vw,58px);font-weight:700;letter-spacing:.08em;line-height:1.5;white-space:nowrap}
.hero-copy .dash{display:inline-block;width:1.6em;height:.06em;min-height:2px;background:currentColor;vertical-align:middle;margin-left:.14em}
.hero-sub{margin-top:34px;font-size:clamp(13px,1.6vw,15px);color:var(--gray);letter-spacing:.1em;font-weight:500}
.hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-family:var(--en);font-size:10px;letter-spacing:.3em;color:var(--gray);display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-scroll::after{content:'';width:1px;height:44px;background:var(--line);animation:scr 2s ease-in-out infinite}
@keyframes scr{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- sections ---------- */
.sec{padding:120px 28px}
.sec-in{max-width:900px;margin:0 auto;text-align:center}
.sec-head{margin-bottom:64px}
.sec-en{font-family:var(--en);font-size:clamp(34px,5vw,52px);font-weight:700;letter-spacing:.02em;line-height:1}
.sec-jp{margin-top:14px;font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--gray)}
.sec-bar{width:34px;height:8px;background:var(--black);transform:skewX(-24deg);margin:26px auto 0}
.lead{max-width:640px;margin:0 auto;text-align:center}
.lead p+p{margin-top:1.6em}

.mission{background:var(--paper)}
.mission .lead{font-size:15.5px}

.business{background:var(--mist)}
.biz-list{max-width:680px;margin:56px auto 0;border-top:1px solid var(--line);text-align:left}
.biz-item{display:flex;align-items:baseline;gap:26px;padding:22px 6px;border-bottom:1px solid var(--line)}
.biz-item dt{font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--gray);min-width:130px}
.biz-item dd{font-size:14.5px;font-weight:500}

.production{background:var(--black);color:#fff}
.production .sec-jp{color:#9a9a9a}
.production .sec-bar{background:#fff}
.prod-name{font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:.1em}
.prod-desc{margin-top:18px;color:#c9c9c9;font-size:14px}
.prod-banner{display:block;max-width:520px;margin:44px auto 0;transition:opacity .3s,transform .3s}
.prod-banner:hover{opacity:.88;transform:translateY(-3px)}
.prod-banner img{border-radius:6px}
.prod-link{display:inline-block;margin-top:30px;font-family:var(--en);font-size:11px;letter-spacing:.22em;border-bottom:1px solid #fff;padding-bottom:4px}

.news{background:var(--paper)}
.news-list{max-width:680px;margin:0 auto;border-top:1px solid var(--line);text-align:left}
.news-item{display:flex;align-items:baseline;gap:30px;padding:24px 6px;border-bottom:1px solid var(--line);transition:background .25s}
.news-item:hover{background:var(--mist)}
.news-item time{font-family:var(--en);font-size:12px;letter-spacing:.08em;color:var(--gray);white-space:nowrap}
.news-item .n-title{font-size:14px;font-weight:500}
.news-empty{padding:34px 6px;border-bottom:1px solid var(--line);font-size:13px;color:var(--gray);text-align:center}
.news-more{display:inline-block;margin-top:36px;font-family:var(--en);font-size:11px;letter-spacing:.22em;border-bottom:1px solid var(--black);padding-bottom:4px}

.company{background:var(--mist)}
.co-table{max-width:680px;margin:0 auto;border-top:1px solid var(--line);text-align:left}
.co-row{display:flex;padding:20px 6px;border-bottom:1px solid var(--line);gap:26px}
.co-row dt{min-width:120px;font-size:13px;font-weight:700;letter-spacing:.08em}
.co-row dd{font-size:14px}
.co-map{max-width:680px;margin:48px auto 0}
.co-map iframe{width:100%;height:340px;border:1px solid var(--line);filter:grayscale(1) contrast(1.02)}

.contact{background:var(--paper)}
.contact .lead{margin-bottom:44px}
.cta{display:inline-block;font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.2em;border:1px solid var(--black);padding:18px 66px;position:relative;overflow:hidden;transition:color .35s;z-index:1;background:none;cursor:pointer}
.cta::before{content:'';position:absolute;inset:0;background:var(--black);transform:translateX(-101%);transition:transform .35s cubic-bezier(.65,0,.35,1);z-index:-1}
.cta:hover{color:#fff}
.cta:hover::before{transform:translateX(0)}

/* ---------- footer ---------- */
.site-footer{background:var(--black);color:#fff;padding:70px 28px 34px;text-align:center}
.f-logo{width:150px;margin:0 auto}
.f-logo img{filter:brightness(0) invert(1)}
.f-nav{margin-top:40px;display:flex;justify-content:center;gap:36px;font-size:12px;letter-spacing:.1em}
.f-nav a{opacity:.85;transition:opacity .25s}
.f-nav a:hover{opacity:1}
.f-copy{margin-top:44px;font-family:var(--en);font-size:10px;letter-spacing:.14em;color:#8a8a8a}

/* ---------- sub pages ---------- */
.page-main{padding:170px 28px 120px;min-height:60vh}
.page-in{max-width:760px;margin:0 auto}
.page-head{text-align:center;margin-bottom:70px}
.page-head .sec-jp{margin-top:14px}
.entry-title-en{font-family:var(--en);font-size:clamp(30px,4.4vw,44px);font-weight:700;letter-spacing:.02em;line-height:1.1}
.entry-title-jp{font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:.08em;line-height:1.5}
.entry-date{font-family:var(--en);font-size:12px;letter-spacing:.1em;color:var(--gray);margin-bottom:16px;display:block}
.entry-content{font-size:15px}
.entry-content>*+*{margin-top:1.4em}
.entry-content h2{font-size:19px;font-weight:700;letter-spacing:.06em;margin-top:2.6em;padding-bottom:12px;border-bottom:1px solid var(--line)}
.entry-content h3{font-size:16px;font-weight:700;margin-top:2em}
.entry-content ul,.entry-content ol{padding-left:1.5em}
.entry-content li+li{margin-top:.4em}
.entry-content a{border-bottom:1px solid var(--black)}
.entry-content table{width:100%;border-collapse:collapse}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 14px;font-size:14px;text-align:left}
.back-link{display:inline-block;margin-top:64px;font-family:var(--en);font-size:11px;letter-spacing:.22em;border-bottom:1px solid var(--black);padding-bottom:4px}
.center{text-align:center}

/* news archive */
.archive-list{border-top:1px solid var(--line)}
.pagination{margin-top:56px;text-align:center;font-family:var(--en);font-size:13px;letter-spacing:.1em}
.pagination .page-numbers{display:inline-block;min-width:36px;padding:8px 6px;margin:0 3px;border:1px solid transparent}
.pagination .page-numbers.current{border-color:var(--black)}
.pagination a.page-numbers:hover{border-color:var(--line)}

/* ---------- Contact Form 7 ---------- */
.wpcf7{max-width:640px;margin:0 auto;text-align:left}
.wpcf7 p{margin-bottom:26px}
.wpcf7 label{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;margin-bottom:10px}
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 textarea,
.wpcf7 select{width:100%;border:1px solid var(--line);background:var(--mist);padding:14px 16px;font-family:var(--jp);font-size:15px;transition:border-color .25s,background .25s;border-radius:0;-webkit-appearance:none}
.wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{outline:none;border-color:var(--black);background:#fff}
.wpcf7 textarea{min-height:200px;resize:vertical}
.wpcf7 .center,.wpcf7-submit-wrap{text-align:center}
.wpcf7 input[type=submit]{font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.2em;border:1px solid var(--black);background:#fff;color:var(--black);padding:18px 66px;cursor:pointer;transition:.3s}
.wpcf7 input[type=submit]:hover{background:var(--black);color:#fff}
.wpcf7 .wpcf7-not-valid-tip{font-size:12px;color:#b40000;margin-top:6px}
.wpcf7 input.wpcf7-not-valid,.wpcf7 textarea.wpcf7-not-valid{border-color:#b40000;background:#fff}
.wpcf7 .wpcf7-response-output{margin:40px 0 0;padding:18px 24px;font-size:13.5px;letter-spacing:.04em;text-align:center;line-height:1.8}
.wpcf7 form.sent .wpcf7-response-output{border:1px solid var(--black);background:var(--black);color:#fff}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output{border:1px solid #b40000;color:#b40000;background:#fff}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{border:1px solid #b40000;color:#b40000;background:#fff}
.wpcf7 form.init .wpcf7-response-output{display:none}
.wpcf7 .wpcf7-spinner{display:block;margin:12px auto 0}

/* ---------- 言語切替 (お知らせ英語版) ---------- */
.lang-en{display:none}
html[lang="en"] span.lang-en{display:inline}
html[lang="en"] div.lang-en{display:block}
html[lang="en"] .lang-ja{display:none}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- mobile ---------- */
@media(max-width:820px){
  br.pc{display:none}
  .lead{text-align:left}
  .prod-desc,.news-note{text-align:left}

  /* --- ヘッダー: 高さ縮小・ロゴ中央 --- */
  .h-in{height:60px;position:relative;justify-content:center;padding:0 28px}
  .h-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}
  .h-logo img{height:30px}
  .h-logo .logo-mark{left:50%;transform:translate(-50%,-50%);height:30px}
  /* スクロールで横ロゴ→シンボルへクロスフェード */
  body.scrolled .h-logo .logo-full{opacity:0}
  body.scrolled .h-logo .logo-mark{opacity:1}
  .menu-btn{display:block;position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:3}

  /* --- フルスクリーンメニュー ---
     注: 親(.site-header)の backdrop-filter の仕様により fixed が使えないため、
     固定ヘッダーを基準に absolute + 100svh で全画面化している */
  .g-nav{position:absolute;top:0;left:0;right:0;height:100vh;height:100svh;z-index:1;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);flex-direction:column;align-items:stretch;gap:0;padding:calc(60px + 9vh) 34px 44px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
  .g-nav::after{content:'';position:absolute;right:-16%;bottom:-8%;width:78vw;height:78vw;background:url(https://trygrow.co.jp/wp-content/uploads/2026/08/logo_trygrow.webp) no-repeat center/contain;opacity:.05;filter:grayscale(1);pointer-events:none}
  body.nav-open .g-nav{opacity:1;visibility:visible}
  .g-nav a{display:flex;align-items:baseline;gap:16px;width:100%;padding:24px 2px;border-bottom:1px solid var(--line);opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1)}
  .g-nav a:first-child{border-top:1px solid var(--line)}
  .g-nav a::after{display:none}
  .g-nav .n-jp{font-size:19px;font-weight:700;letter-spacing:.1em}
  .g-nav .n-en{display:inline;font-family:var(--en);font-size:10px;font-weight:600;letter-spacing:.26em;color:var(--gray)}
  html[lang="en"] .g-nav .n-en{display:none}
  body.nav-open .g-nav a{opacity:1;transform:none}
  body.nav-open .g-nav a:nth-child(1){transition-delay:.08s}
  body.nav-open .g-nav a:nth-child(2){transition-delay:.14s}
  body.nav-open .g-nav a:nth-child(3){transition-delay:.20s}
  body.nav-open .g-nav a:nth-child(4){transition-delay:.26s}
  body.nav-open .g-nav a:nth-child(5){transition-delay:.32s}
  .lang{margin:44px auto 0;align-self:center;opacity:0;transition:opacity .5s ease .4s}
  body.nav-open .lang{opacity:1}
  .lang button{padding:9px 18px;font-size:12px}
  body.nav-open{overflow:hidden}

  /* FV: キャッチコピーを1行維持 */
  .hero-copy{font-size:7.4vw}
  /* FV: 背景ロゴは右下に大きく(ヒーロー内に完全に収める) */
  .hero-bg{width:88vw;right:-16%;bottom:6%;top:auto}

  .sec{padding:88px 28px}
  .page-main{padding:120px 28px 90px}
  .biz-item{flex-direction:column;gap:6px}
  .co-row{flex-direction:column;gap:4px}
  .co-row dt{min-width:0}
  .news-item{flex-direction:column;gap:6px}
}
html.no-opening #opening{display:none}