/*!
  noie main style
  version: 1.9
  date: 2025-10-04
*/

/* ----------------------------------------
  基本設定
---------------------------------------- */
:root {
  --accent:#0b6;
  --text:#222;
  --bg:#fff;
  --font-sans:"Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  --font-mincho:"Hiragino Mincho ProN", "游明朝", "Yu Mincho", "MS Mincho", serif;
  --noie-header-h:72px;
  --cta-beige:#cdbd9e;
  --cta-text:#1a140f;
}

* { box-sizing:border-box; }
html, body {
  margin:0; padding:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.inner { max-width:1100px; margin:0 auto; padding:0 20px; }

.visually-hidden {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

#noie-year { font-weight:600; }

/* ----------------------------------------
  Loader
---------------------------------------- */
.loader-wrap {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; z-index:9999;
  transition:opacity .4s ease, visibility .4s ease;
}
.loader-wrap.hidden { opacity:0; visibility:hidden; pointer-events:none; }

/* SVG stroke animation for stroke-path */
#noie-inline-loader .stroke-path {
  fill:none; stroke:#1a140f; stroke-width:3;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  animation:draw-line 1.8s ease forwards;
}
@keyframes draw-line { to { stroke-dashoffset:0; } }

/* 一筆描きマスク用パス */
.reveal-stroke {
  stroke:#fff;
  stroke-width:120;
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  animation:drawFill 3s ease forwards;
}
@keyframes drawFill { to { stroke-dashoffset:0; } }

/* ローディング中はヘッダー非表示 */
body.is-loading .site-header,
body.is-loading .site-header .logo-inline {
  opacity:0; visibility:hidden; pointer-events:none;
  transform:none; transition:none !important;
}

/* ----------------------------------------
  Header
---------------------------------------- */
.site-header {
  position:fixed; top:0; left:0; right:0;
  height:var(--noie-header-h);
  background:transparent; z-index:180;
  pointer-events:none;
}
.site-header .inner {
  display:flex; align-items:center;
  height:100%; pointer-events:auto;
}
.site-header .logo-inline {
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .28s ease, transform .28s ease;
}
.site-header.active .logo-inline {
  opacity:1; visibility:visible; transform:none;
}

/* ----------------------------------------
  Hero
---------------------------------------- */
.hero {
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:calc(100vh - var(--noie-header-h)) !important;
  height:100svh;
  overflow:hidden;
  z-index:10;
  isolation:isolate;
}
.hero-slider { position:absolute; inset:0; z-index:1; }
.hero-slider .slide {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-slider .slide.active { opacity:1; z-index:2; }
.hero-overlay {
  position:absolute; inset:0; z-index:2;
  background:rgba(0,0,0,.5); /* ←黒レイヤー透過50% */
}
.hero-text {
  position:relative; z-index:5;
  text-align:center; padding:0 20px;
}
.hero-text h1,
.hero-text p {
  color:#fff !important;
  font-family:var(--font-mincho);
  text-shadow:0 3px 10px rgba(0,0,0,.55);
  margin:0;
}
.hero-text h1 {
  font-size:clamp(30px,6vw,56px);
  font-weight:700;
  margin-bottom:12px;
  line-height:1.2;
}
.hero-text p {
  font-size:1.05rem;
  max-width:720px; margin:0 auto;
  opacity:.95; line-height:1.8;
}

/* ----------------------------------------
  Wave divider
---------------------------------------- */
.wave-divider {
  position:relative;
  line-height:0;
  height:88px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
.wave-divider.in-view { opacity:1; transform:translateY(0); }
.wave-divider svg { width:100%; height:auto; display:block; }
.wave-divider .stroke-path {
  fill:none;
  stroke:#cdbd9e;
  stroke-width:3;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}
.wave-divider.in-view .stroke-path {
  animation:wave-draw 1.8s ease forwards;
}
@keyframes wave-draw { to { stroke-dashoffset:0; } }

/* セクションごとの波の色を背景色に合わせる */
.section-concept + .wave-divider .stroke-path { stroke:#f9f5ee; }
.section-brand   + .wave-divider .stroke-path { stroke:#e6e3dd; }
.section-nayami1 + .wave-divider .stroke-path { stroke:#f5f2ec; }
.section-nayami2 + .wave-divider .stroke-path { stroke:#e9e7e2; }
.section-contact + .wave-divider .stroke-path { stroke:#f4f1ea; }

/* ----------------------------------------
  Section colors
---------------------------------------- */
section { position:relative; z-index:2; padding:72px 0; }
.section-concept { background:#f9f5ee; }
.section-brand   { background:#e6e3dd; }
.section-nayami1 { background:#f5f2ec; }
.section-nayami2 { background:#e9e7e2; }
.section-contact { background:#f4f1ea; }

/* ----------------------------------------
  Footer
---------------------------------------- */
.footer .inner {
  padding:40px 0;
  text-align:center;
}

/* ----------------------------------------
  Responsive
---------------------------------------- */
@media(max-width:1024px){
  .hero-text h1 { font-size:42px; }
}
@media(max-width:768px){
  .hero-text h1 { font-size:32px; }
  .hero-text p { font-size:15px; }
  .wave-divider { height:72px; }
}
@media(max-width:480px){
  html, body { font-size:15px; }
  .hero-text h1 { font-size:26px; }
  .hero-text p { font-size:14px; }
}