/*
Theme Name: oneoff2025
Template: twentytwentyone
Theme URI:
Author:
Author URI:
Description: Child theme for preserving original HTML/CSS/JS structure while minimizing parent interference.
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flex-base
*/
/* style.css – 2025-06-29 rev2（フォント指定の冗長さを削減／Noto Serif JP を撤去） */
/* ===== Vitamin Parallax Orbs ===== */

/* === MV Scroll Indicator (Vitamin circle) === */
:root{ --vit:#F5C518; }

.hero { position:relative; }
.hero .scroll-indicator{
  position:absolute; left:50%; bottom:clamp(16px,4vw,28px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:clamp(58px,6vw,72px); height:clamp(58px,6vw,72px);
  border-radius:50%;
  background:var(--vit); color:#111; text-decoration:none; line-height:1;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  letter-spacing:.06em;
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.55);
  z-index:16;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hero .scroll-indicator:hover{ transform:translateX(-50%) translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.55); }
.hero .scroll-indicator:focus-visible{ outline:2px solid #111; outline-offset:3px; border-radius:999px; }

.hero .scroll-label{ font-size:12px; opacity:.95; }
.hero .scroll-arrow{ font-size:16px; }

@media (prefers-reduced-motion:no-preference){
  @keyframes arrow-bounce { 0%,100%{ transform:translateY(-1px) } 50%{ transform:translateY(5px) } }
  .hero .scroll-arrow{ animation:arrow-bounce 1.2s ease-in-out infinite; }
}
/* Message 泡：くっきり単色（グラデーション/ブラー無し） */
:root{ --vit:#F5C518; }

.message{ position:relative; }
.message-inner{ position:relative; z-index:1; }

.msg-bubbles{
  position:absolute; right:24px; bottom:20px;
  width:140px; height:220px; pointer-events:none; z-index:0;
}

.msg-bubbles .b{
  position:absolute; right:0; bottom:0;
  width:40px; height:40px; border-radius:50%;
  background: var(--vit);
  box-shadow: none;
  opacity:.9;
  transform: translateY(0) scale(.70);
  animation: msgBubbleUp 5.2s ease-out infinite;
  animation-play-state: paused;
}

/* サイズ/ディレイ（下→上へ行くほど大きく見える） */
.msg-bubbles .b1{ width:18px; height:18px; right:10px; animation-duration:4.8s; }
.msg-bubbles .b2{ width:28px; height:28px; right:40px; animation-delay:.6s; }
.msg-bubbles .b3{ width:40px; height:40px; right:70px; animation-delay:1.2s; }

@keyframes msgBubbleUp{
  0%   { transform: translateY(0)      scale(.70); opacity:.35; }
  60%  { transform: translateY(-140px) scale(1.05); opacity:.95; }
  100% { transform: translateY(-190px) scale(1.22); opacity:0; }
}


/* ────── Base reset ────── */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","メイリオ",sans-serif;}
img{max-width:100%;display:block;}
a {color:#fff;text-decoration:none;}
li{list-style:none;}

/* ────── Header ────── */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:40;
  transition:background-color 1s ease, backdrop-filter 1s ease;
}
.site-header.scrolled{
  background:#424242c2;
  backdrop-filter:blur(8px);
}
.header-inner{display:flex;align-items:center;gap:40px;padding:20px 40px;}
.logo img{height:auto;width:100px;}
.main-nav ul{display:flex;list-style:none;gap:32px;}
.main-nav a{color:#fff;text-decoration:none;font-size:.9rem;letter-spacing:.05em;transition:opacity .3s;}
.main-nav a:hover{opacity:.7;}

/* ────── Header：SP 対応（修正版） ────── */
.nav-toggle{
  display:none;
  width:30px; height:10px;
  background:none; border:0; cursor:pointer;
  position:relative; z-index:35;
  margin-left:auto;
}
.nav-toggle__bar{
  display:block;
  width:100%; height:2px;
  background:#fff; border-radius:1px;
  position:absolute; left:0; transition:.3s;
}
.nav-toggle__bar:nth-child(1){top:0;}
.nav-toggle__bar:nth-child(2){bottom:0;}

.nav-toggle.active .nav-toggle__bar:nth-child(1){
  transform:translateY(0px) rotate(45deg);
  top:5px;
}
.nav-toggle.active .nav-toggle__bar:nth-child(2){
  transform:translateY(-8px) rotate(-45deg);
  bottom:-5px;
}

/* ────── Main-nav サブメニュー ────── */
.main-nav li{position:relative;}

.sub-nav{
  position:absolute; left:0; top:100%;
  background:#5f5f5f;
  padding:14px 0; border-radius:4px;
  min-width:220px; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
}
.sub-nav li a{
  display:block; padding:10px 20px;
  color:#fff; font-size:1rem; white-space:nowrap;
}
.sub-nav li a:hover{background:rgba(255,255,255,.1);}

/* 開いた状態 */
.has-sub.open > .sub-nav{ opacity:1; visibility:visible; transform:none; }

/* モバイルレイアウト */
@media(max-width:780px){
  .header-inner{gap:16px; padding:16px;}
  .logo img{width:64px;}
  .nav-toggle{display:block;}

  .main-nav{
    position:fixed; top:0; right:-100%;
    width:70%; max-width:280px; height:100vh;
    background:rgba(0,0,0,.85); padding:80px 20px;
    transition:right .4s cubic-bezier(.4,.8,.4,1);
    z-index:30;
    backdrop-filter:blur(6px);
  }
  .main-nav ul{flex-direction:column; gap:24px;}
  .main-nav a{font-size:1rem;}
  .main-nav.main-nav--sp-open{right:0;}
  body.nav-open{overflow:hidden;}
  .sub-nav{
    position:static; opacity:1!important; visibility:visible!important;
    transform:none!important; background:none; padding:8px 0 0; min-width:unset;
    gap:4px!important; padding:10px 0 0 15px;
  }
  .sub-nav li a{padding:6px 0; color:#fff;}
}

/* ────── Hero ────── */
.hero{position:relative;width:100%;height:100vh;overflow:hidden;}

:root{
  --slide-count: 7;         /* 枚数 */
  --step: 6s;               /* 1枚の在位時間 */
  --loop: calc(var(--slide-count) * var(--step)); /* 42s */
}

/* ← この .slide を “唯一の定義” にする（後続の .slide は削除） */
.slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transform:translateY(var(--parallax,0)); /* パララックス併用 */
  will-change:opacity, transform;
  animation: fadeBG var(--loop) linear infinite both; /* bothで初期フレーム可視 */
}

/* 遅延は calc で等間隔 */
.slide:nth-child(1){ background-image:url('images/mv01.jpg'); animation-delay: calc(0 * var(--step)); }
.slide:nth-child(2){ background-image:url('images/mv02.jpg'); animation-delay: calc(1 * var(--step)); }
.slide:nth-child(3){ background-image:url('images/mv03.jpg'); animation-delay: calc(2 * var(--step)); }
.slide:nth-child(4){ background-image:url('images/mv04.jpg'); animation-delay: calc(3 * var(--step)); }
.slide:nth-child(5){ background-image:url('images/mv05.jpg'); animation-delay: calc(4 * var(--step)); }
.slide:nth-child(6){ background-image:url('images/mv06.jpg'); animation-delay: calc(5 * var(--step)); }
.slide:nth-child(7){ background-image:url('images/mv07.jpg'); animation-delay: calc(6 * var(--step)); }

/* ★ この1本だけ残す：上の重複定義は削除 */
@keyframes fadeBG{
  /* 1スライドの在位は全体の ≈14%（=100/7） */
  0%   { opacity:0; }
  2%   { opacity:1; }  /* フェードイン */
  14%  { opacity:1; }  /* 表示保持 */
  16%  { opacity:0; }  /* フェードアウト */
  100% { opacity:0; }
}

/* center copy */
.center-message{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; color:#fff; line-height:1.4; z-index:15;
  opacity:0; filter:blur(12px);
  transition:opacity .9s ease-out, filter .9s ease-out;
}
.center-message.reveal{ opacity:1; filter:blur(0); }

.since{font-size:1.1rem;font-weight:500;margin-bottom:.4rem;letter-spacing:.05em;text-shadow: 1px 1px 10px #000000;}
.catch{font-size:2rem;font-weight:500;white-space:nowrap;text-shadow: 1px 1px 10px #000000;}

/* caption right-bottom */
.caption{
  width:480px; position:absolute; right:3%; bottom:5%;
  text-align:left; color:#fff; line-height:1.4; padding:1rem 1.5rem;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(2px); opacity:0; animation:fadeTxt 12s infinite;
}
.slide:nth-child(1) .caption{animation-delay:0s;}
.slide:nth-child(2) .caption{animation-delay:6s;}
@keyframes fadeTxt{0%{opacity:0;transform:translateY(10px);}10%,40%{opacity:1;transform:translateY(0);}50%,100%{opacity:0;transform:translateY(-10px);}}

/* caption typography */
.brand{font-size:1rem;font-weight:700;letter-spacing:.05em;}
.brand span{font-weight:400;margin-left:.25em;}
.product{font-size:.9rem;margin-top:.3em;}
.title{font-size:1.2rem;font-weight:500;margin-top:.2em;}

/* ────── Message Section ────── */
.message{position:relative;padding:120px 0;background:url('images/massage_bg.png') center/cover no-repeat;}
.message-inner{max-width:1240px;margin:0 auto;display:flex;gap:80px;align-items:flex-start;padding:0 40px;}

/* scrolling images */
.scroll-box{display:flex;gap:16px;width:calc(50% - 40px);height:600px;overflow:hidden;}
.column{display:flex;flex-direction:column;gap:16px;}
.column img{width:258px;height:258px;object-fit:cover;}

/* scroll animation */
@keyframes scrollUp{0%{transform:translateY(0);}100%{transform:translateY(-50%);} }
@keyframes scrollDown{0%{transform:translateY(-50%);}100%{transform:translateY(0);} }
.column.up{animation:scrollUp 20s linear infinite;}
.column.down{animation:scrollDown 20s linear infinite;}

/* message text */
.msg-text{flex:1;max-width:520px;color:#333;}
.msg-heading{font-size:2rem;font-weight:700;margin-bottom:.2rem;}
.msg-sub{font-size:.9rem;color:#f5c518;margin-bottom:2rem;}
.msg-text p{margin-bottom:1.6rem;line-height:1.9;}

/* Wind-in Text */
.wind-appear p{
  opacity:0; transform:translateX(-40px) skewX(-4deg); filter:blur(4px);
  transition:opacity .9s ease, transform .9s ease, filter .9s ease;
}
.wind-appear.in-view p{ opacity:1; transform:none; filter:blur(0); }
.wind-appear.in-view p:nth-child(1){transition-delay:.00s;}
.wind-appear.in-view p:nth-child(2){transition-delay:.15s;}
.wind-appear.in-view p:nth-child(3){transition-delay:.30s;}

/* About link */
.about-link{display:inline-flex;align-items:center;gap:18px;margin-top:24px;text-decoration:none;color:#333;font-size:1rem;letter-spacing:.03em;}
.circle{display:inline-flex;width:56px;height:56px;border-radius:50%;align-items:center;justify-content:center;transition:background .3s,color .3s;}
.arrow{font-size:1.3rem;line-height:1;}
.about-link:hover .circle{background:#333;color:#fff;}

/* responsive */
@media(max-width:980px){
  .caption{ width:90%; margin:0 auto; display:block; right:0; left:0; }
  .catch{font-size:1.4rem;}
  .message{padding:80px 0;}
  .message-inner{flex-direction:column-reverse;gap:40px;}
  .scroll-box{width:100%;justify-content:center;}
  .column img{width:47vw;height:47vw;}
  .msg-text{max-width:none;}
}

/* ────── Works ────── */
.works{padding:80px 0 160px;position:relative;/**background-color:#ededed;**/}
.works-inner{max-width:1240px;margin:0 auto;display:flex;gap:80px;align-items:flex-start;padding:0 40px;}

.work-radio{display:none;}

/* 左側 */
.works-left{flex:0 0 40%; padding: 0 0 0 100px;}
.works-title{font-size:2rem;font-weight:700;margin-bottom:.15rem;}
.works-sub{font-size:.9rem;color:#f5c518;margin-bottom:48px;}

.work-details .item{display:none;}
#work1:checked ~ .works-inner .item-1{display:block;}
#work2:checked ~ .works-inner .item-2{display:block;}
#work3:checked ~ .works-inner .item-3{display:block;}
#work4:checked ~ .works-inner .item-4{display:block;}
#work5:checked ~ .works-inner .item-5{display:block;}

.meta{font-size:.85rem;color:#666;margin-bottom:.6rem;}
.proj{font-size:1.5rem;font-weight:700;margin-bottom:1.2rem;}
.tags{display:flex;gap:12px;margin-bottom:56px;}
.tag{padding:.35rem 1.2rem;border:1px solid #000;border-radius:30px;font-size:.75rem;}

/* ナビ（←→） */
.works-nav{position:relative;height:40px;}
.btn{position:absolute;top:0;width:90px;height:36px;border-radius:18px;background:#f5c518;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;}
.prev{left:0;} .next{left:110px;}
.works-nav label{opacity:0;pointer-events:none;transition:.25s;}
#work1:checked ~ .works-inner .nav-1,
#work2:checked ~ .works-inner .nav-2,
#work3:checked ~ .works-inner .nav-3,
#work4:checked ~ .works-inner .nav-4,
#work5:checked ~ .works-inner .nav-5{opacity:1;pointer-events:auto;}

/* 右側スライダー */
.works-right{flex:1;overflow:hidden;}
.works-images{display:flex;gap:20px;transition:.6s cubic-bezier(.4,.8,.4,1);}
.img{flex:0 0 80%;}
.img img{width:100%;height:auto;object-fit:cover;display:block;aspect-ratio:16/9;}

#work1:checked ~ .works-inner .works-images{transform:translateX(0);}
#work2:checked ~ .works-inner .works-images{transform:translateX(calc(-80% - 20px));}
#work3:checked ~ .works-inner .works-images{transform:translateX(calc(-160% - 40px));}
#work4:checked ~ .works-inner .works-images{transform:translateX(calc(-240% - 60px));}
#work5:checked ~ .works-inner .works-images{transform:translateX(calc(-320% - 80px));}

.work-details a,.works-images a{cursor:pointer;text-decoration:none;color:inherit;}
.work-details a:hover .proj{opacity:.8;transition:.25s;}
.works-images a:hover img{opacity:.9;transition:.25s;}

.archives-link{position:absolute;right:40px;bottom:40px;display:inline-flex;align-items:center;gap:16px;color:#000;text-decoration:none;font-size:.95rem;}
.circle{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;transition:background .3s,color .3s;background-color:#f5c518;}
.archives-link:hover .circle{background:#000;color:#fff;}

/* レスポンシブ */
@media(max-width:980px){
  .works{padding:80px 0 160px 0;}
  .works-inner{flex-direction:column;gap:40px;}
  .works-left{flex:none; padding: 0;}
  .works-right{width:100%;}
  .img{flex:0 0 100%;}
  #work2:checked ~ .works-inner .works-images{transform:translateX(calc(-100% - 20px));}
  #work3:checked ~ .works-inner .works-images{transform:translateX(calc(-200% - 40px));}
  #work4:checked ~ .works-inner .works-images{transform:translateX(calc(-300% - 60px));}
  #work5:checked ~ .works-inner .works-images{transform:translateX(calc(-400% - 80px));}
}

/* ────── Services（4カラム／高さ揃え） ────── */
.services{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.services-row{
  display:flex; flex-direction:column; text-decoration:none; background:none;
  border-radius:0; overflow:hidden;
  height:420px; min-height:420px; max-height:420px;
  box-shadow:none; transition:transform .25s ease;
}
.services-row:hover{ transform:translateY(-2px); }
.services-row.reverse{ flex-direction:column; }
.services-img{ width:100%; aspect-ratio:16/9; overflow:hidden; flex:0 0 auto; }
.services-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.services-card{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:18px 16px 20px; background:#AEA89D; color:#111;
}
.bg-dark,.bg-light{ background-color:#AEA89D; color:#111; }
.services-title{ max-width:320px; width:100%; height:auto; margin:0; }
.services-desc{ font-weight:500; font-size:.98rem; letter-spacing:.02em; margin:0; }
.services-cta{ display:inline-flex; align-items:center; gap:12px; font-size:.95rem; letter-spacing:.01em; color:#111; }
.services-arrow{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #111; border-radius:50%; font-size:1.1rem; line-height:1; }
.angle-right,.angle-left{ transform:none; }
.services-row.in-view .services-card,.services-row.in-view .services-img{ transform:none; opacity:1; }
.services-img{ opacity:1; }

@media (max-width:1280px){
  .services{ grid-template-columns:repeat(3, 1fr); }
  .services-row{ height:380px; min-height:380px; max-height:380px; }
}
@media (max-width:980px){
  .services{ grid-template-columns:repeat(2, 1fr); }
  .services-row{ height:340px; min-height:340px; max-height:340px; }
}
@media (max-width:640px){
  .services{ grid-template-columns:1fr; }
  .services-row{ height:300px; min-height:300px; max-height:300px; }
  .services-desc{ font-size:.95rem; }
}

/* ────── Services（別実装：白文字／等高→モバイル可変） ────── */
.services{
  box-sizing:border-box; width:100%; display:grid;
  grid-template-columns:repeat(4, 1fr); gap:3px;
}
.service{
  box-sizing:border-box; display:flex; flex-direction:column; text-decoration:none;
  background:#AEA89B; border-radius:0; color:#fff; overflow:visible; height:420px;
  transition:transform .2s ease;
}
.service:hover{ opacity:.8; }
.service__thumb{ width:100%; aspect-ratio:16/9; overflow:hidden; flex:0 0 auto; }
.service__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.service__body{
  box-sizing:border-box; flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  gap:12px; padding:26px 18px 28px;
}
.service__title{ max-width:160px; width:100%; height:auto; margin:0 0 10px; }
.service__desc{ margin:0; font-weight:500; font-size:.98rem; letter-spacing:.02em; color:#fff; }
.service__cta{ display:inline-flex; align-items:center; gap:12px; font-size:.95rem; letter-spacing:.01em; color:#fff; }
.service__arrow{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #fff; border-radius:50%; font-size:1.1rem; line-height:1; color:#fff; }
.angle-right,.angle-left{ transform:none; }
.service.in-view .service__body,.service.in-view .service__thumb{ transform:none; opacity:1; }

@media (max-width:1400px){ .service{ height:400px; } }
@media (max-width:980px){
  .services{ grid-template-columns:repeat(2, 1fr); }
  .service{ height:auto; min-height:340px; }
  .service__body{ padding:22px 16px 24px; }
}
@media (max-width:640px){
  .services{ grid-template-columns:1fr; }
  .service{ height:auto; min-height:300px; }
  .service__desc{ font-size:.95rem; }
}
.services,.service,.service *{ box-sizing:border-box; }

/* ────── Concept ────── */
.concept{
  position:relative; padding:140px 0 100px;
  background: url(images/massage_bg.png) center / cover no-repeat; text-align:center;
}
.concept-inner{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:0 40px;}
.concept-ttl{font-size:2.2rem;font-weight:700;margin-bottom:.3rem;}
.concept-sub{font-size:.9rem;color:#f5c518;margin-bottom:64px;}

/* Mission */
.mission{list-style:none;margin:0;padding:0;line-height:2.3;}
.mission li{opacity:0; transform:translateY(-20px); transition:opacity .8s ease,transform .8s ease;}
.mission.in-view li{opacity:1;transform:none;}
.mission.in-view li:nth-child(1){transition-delay:.00s;}
.mission.in-view li:nth-child(2){transition-delay:.15s;}
.mission.in-view li:nth-child(3){transition-delay:.30s;}
.mission.in-view li:nth-child(4){transition-delay:.45s;}
.mission.in-view li:nth-child(5){transition-delay:.60s;}
.mission.in-view li:nth-child(6){transition-delay:.75s;}
.mission.in-view li:nth-child(7){transition-delay:.90s;}

.concept-logo{width:120px;height:auto;margin:70px auto;}

.concept-gallery{
  display:flex; gap:24px; justify-content:center; align-items:center;
  overflow:hidden; height:240px;
}
.concept-gallery li{flex:0 0 160px; transition:transform .6s ease; list-style:none;}
.concept-gallery img{width:100%; height:160px; object-fit:cover; display:block;}
.concept-gallery.zigzag li:nth-child(odd){transform:translateY(40px);}
.concept-gallery.zigzag li:nth-child(even){transform:translateY(-40px);}

@media(max-width:780px){
  .concept{padding:80px 0;}
  .mission li{font-size:.9rem;}
  .concept-gallery{ gap:12px; flex-wrap:nowrap; width:100%; overflow-x:hidden; height:217px; align-items:center; }
  .concept-gallery li{flex:0 0 calc(33.33% - 8px); margin-bottom:12px;}
  .concept-gallery img{height:120px;}
  .concept-gallery.zigzag li{transform:none;}
}

/* ────── Flow ────── */
.flow{
  position:relative; padding:80px 0; text-align:center;
  background:linear-gradient(#ffffff,#d5d5d5b8), url(images/flow_back.jpg);
}
.flow-inner{max-width:1240px;margin:0 auto;padding:0 40px;}
.flow-ttl{font-size:2.2rem;font-weight:700;margin-bottom:.2rem; letter-spacing: 0.2rem;}
.flow-sub{font-size:.9rem;margin-bottom:64px;}
.flow-lead{font-size:.95rem;line-height:1.9;color:#333;margin-bottom:38px;}

.flow-steps{
  list-style:none; padding:0; margin:0 auto; display:flex; flex-wrap:wrap; gap: 32px 64px;;
  justify-content:center; align-items:flex-start; max-width:1000px;
}
.flow-step{ width:160px; max-width:100%; text-align:center; opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .8s ease; }
.flow-step-num{font-size:1rem;font-weight:700;margin-bottom:18px;color:#333;}
.flow-icon{ width:130px;height:130px;margin:0 auto 22px;border-radius:50%;background:#f5c518;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 3px 2px rgb(0 0 0 / 9%); }
.flow-icon img{width:42%;height:auto;display:block;}
.flow-caption{font-size:.85rem;line-height:1.4;color:#333;}
.flow.in-view .flow-step{opacity:1;transform:none;}
.flow.in-view .flow-step:nth-child(1){transition-delay:.00s;}
.flow.in-view .flow-step:nth-child(2){transition-delay:.10s;}
.flow.in-view .flow-step:nth-child(3){transition-delay:.20s;}
.flow.in-view .flow-step:nth-child(4){transition-delay:.30s;}
.flow.in-view .flow-step:nth-child(5){transition-delay:.40s;}
.flow.in-view .flow-step:nth-child(6){transition-delay:.50s;}
.flow.in-view .flow-step:nth-child(7){transition-delay:.60s;}

@media(max-width:780px){
  .flow{padding:120px 0 160px;}
  .flow-steps{gap:100px 40px;}
  .flow-step,.flow-icon{width:120px;height:120px;margin:0 auto 10px;}
  .flow-caption{font-size:.8rem;}
}

/* ────── Contact ────── */
.contact{ padding:50px 0; text-align:center; background-color: #f9f9f9;}
.contact-inner{max-width:960px;margin:0 auto;padding:0 20px;}
.contact-ttl{ font-size:2.2rem; font-weight:700; margin-bottom:.2rem; }
.contact-sub{ font-size:.9rem; color:#999; margin-bottom:96px; }
.contact-lead{ font-size:1.1rem; line-height:2; color:#333; margin-bottom:70px; }
.contact-lead p:not(:last-child){margin-bottom:2.4rem;}
.contact-btns{ display:flex; gap:60px; justify-content:center; flex-wrap:wrap; }

/* 視覚非表示 */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Minimal icon buttons */
.contact-btns{ display:flex; justify-content:center; align-items:center; gap:28px; flex-wrap:wrap; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; text-decoration:none; background:transparent; border:0; border-radius:0; box-shadow:none;
  transition:transform .2s ease, opacity .2s ease;
}
.icon-btn img{ display:block; width:56px; height:56px; }
.icon-btn:hover{ transform:scale(1.04); opacity:.9; }
.icon-btn:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }

@media (prefers-reduced-motion:reduce){ .icon-btn{ transition:none; } }
@media (max-width:780px){
  .contact-btns{ gap:20px; }
  .icon-btn{ width:56px; height:56px; }
  .icon-btn img{ width:48px; height:48px; }
}

/* ────── Offices ────── */
.offices{
  display:flex; flex-wrap:wrap; flex-direction:row; min-height:380px;
  opacity:0; transform:translateY(40px); transition:opacity .9s ease, transform .9s ease;
}
.office{ flex:1; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; }
.offices.in-view{opacity:1; transform:none;}
.office-hq{background:#b9b9b9;}
.office-tokyo{background:#b9b9b9;}
.office-inner{max-width:420px; padding:60px 20px;}
.office-ttl{font-size:1.2rem; margin-bottom:18px;}
.office-tokyo .office-ttl{font-size: 1.1rem;}
.office-post{font-size:1rem; letter-spacing:.07em;}
.office-addr{line-height:2; margin-bottom:24px;}
.office-tel{margin-bottom:24px;}
.office-icons{ display:flex; gap:35px; justify-content:center; }
.office-icons img{ width:35px; height:35px; display:block; opacity:.9; transition:opacity .25s; }
.office-icons a:hover img{opacity:1;}

@media(max-width:980px){
  .offices{flex-direction:column;}
  .office-inner{padding:80px 20px;}
  .office-icons{gap:40px;}
}

/* ────── Footer ────── */
.site-footer{
  background:#fff; opacity:0; transform:translateY(40px);
  transition:opacity .9s ease, transform .9s ease;
}
.site-footer.in-view{opacity:1; transform:none;}
.footer-nav{padding:80px 20px 60px;}
.footer-nav ul{ display:flex; flex-wrap:wrap; gap:48px; justify-content:center; list-style:none; }
.footer-nav a{ color:#555; text-decoration:none; font-size:1rem; letter-spacing:.05em; transition:opacity .25s; }
.footer-nav a:hover{opacity:.7;}
.footer-copy{ background:#868686; color:#fff; text-align:center; padding:32px 12px; font-size:.95rem; letter-spacing:.04em; }

@media(max-width:780px){
  .footer-nav{padding:40px 16px;}
  .footer-nav ul{ gap:28px; flex-direction:column; text-align:center; }
  .footer-nav a{font-size:.9rem;}
  .footer-copy{font-size:.85rem; padding:28px 12px;}
}

/* =============== Sub-Hero for Works detail =============== */
.sub-hero{
  position:relative; width:100%; height:33vh;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
}
.works-01,.works-02,.works-03,.works-04{ background:url('images/archive-01.jpg') center/cover no-repeat; }
.row-base{ background:url('images/row-base.jpg') center/cover no-repeat; }
.sub-hero::before{ content:''; position:absolute; inset:0; background:#aea89d; }
.sub-hero-inner{ position:relative; z-index:1; max-width:960px; padding:0 24px; }
.sub-hero-title{ font-size:3rem; font-weight:400; letter-spacing:.05em; display:block; margin:28px auto; width:fit-content; }
.sub-hero p{ font-size:.75rem; line-height:2; }

/* @media (max-width:780px){
  .sub-hero-title{font-size:2.2rem;}
  .sub-hero{height:95vh;}
} */

/* ========= Works list ========= */
.works-list{
  padding:60px 8vw 30px; max-width:1400px; margin:0 auto; color:#333;
}
.works-heading{ font-size:2.2rem; font-weight:700; line-height:1; margin-bottom:.2em; }
.works-subheading{ font-size:.95rem; color:#868686; margin-bottom:48px; }
.works-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 3fr));
    gap: 64px 4vw;
}
.work-card{list-style:none;max-width:500px;}
.work-thumb{ aspect-ratio:16/9; }
.work-thumb img{ width:100%; height:100%; display:block; max-width:500px; object-fit:cover; }
.work-meta{font-size:.85rem;margin:18px 0 4px;color:#444;}
.work-meta .area{margin-left:12px;}
.work-title{ font-size:1.4rem; font-weight:700; margin-bottom:16px; color:#000; line-height:1.3; }
.work-tags{display:flex;flex-wrap:wrap;gap:10px;}
.work-tags li{ border:1px solid #000; border-radius:20px; padding:4px 18px; font-size:.82rem; color:#000; white-space:nowrap; }

@media (max-width:760px){
  .works-heading{font-size:2.2rem;}
  .works-list{padding:42px 6vw 60px;}
  .works-grid{gap:48px 0;}
}

/* ===== Pagination (fix) ===== */
.pager{
  display:flex; justify-content:center; align-items:center; gap:16px; margin:80px auto 0; flex-wrap:wrap; font-family:inherit;
}
.pager-prev:empty,.pager-next:empty{ display:none; }
.pager-list{ display:flex; gap:10px; list-style:none; margin:0; padding:0; }
.pager .page-numbers,.pager-prev a,.pager-next a{
  display:inline-block; min-width:40px; padding:8px 16px; border:1px solid #000; border-radius:4px;
  text-align:center; line-height:1; font-size:.88rem; text-decoration:none; color:#000;
  transition:background .25s, color .25s, border-color .25s;
}
.pager .page-numbers:hover,.pager-prev a:hover,.pager-next a:hover{ background:#000; color:#fff; }
.pager .page-numbers.current,.pager .page-numbers[aria-current="page"]{ background:#000; color:#fff; border-color:#000; cursor:default; }
.pager-list .page-numbers.prev,.pager-list .page-numbers.next{ display:none; }

@media (max-width:760px){
  .pager{ gap:12px; margin-top:60px; }
  .pager .page-numbers,.pager-prev a,.pager-next a{ min-width:36px; padding:6px 12px; font-size:.8rem; }
}

/* ===== Breadcrumbs ===== */
.breadcrumbs{
  max-width:1400px; width:100%; margin:24px auto 0; padding:0 8vw;
  font-size:.85rem; line-height:1.6; color:#777;
}
.breadcrumbs a{ color:#777; text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }
.breadcrumbs .kugiri{ margin:0 6px; color:#aaa; }
.breadcrumbs .current-item{ color:#000; font-weight:600; }

@media (max-width:760px){
  .breadcrumbs{ font-size:.78rem; padding:0 6vw; }
}

/* ========= Company table ========= */
.company-section { padding: 60px 8vw 30px;}
.company-detail{ padding:60px 8vw 30px; max-width:960px; margin:0 auto; color:#333; }
.company-heading{ font-size:2.4rem; font-weight:700; margin-bottom:.25em; }
.company-subheading{ font-size:.95rem; color:#868686; margin-bottom:48px; }
.company-table{ width:100%; border-collapse:collapse; font-size:.95rem; line-height:1.7; }
.company-table th,.company-table td{ padding:14px 18px; border-bottom:1px solid #e4e4e4; }
.company-table th{ width:28%; min-width:140px; background:#f7f7f7; font-weight:600; white-space:nowrap; }
.company-table a{ text-decoration:underline; color:inherit; }

@media(max-width:760px){
  .company-detail{padding:100px 6vw 60px;}
  .company-heading{font-size:2rem;}
  .company-table th,.company-table td{padding:10px 12px;font-size:.9rem;}
}

/* stacked on mobile */
@media (max-width:760px){
  .company-table,.company-table tbody,.company-table tr,.company-table th,.company-table td{ display:block; width:100%; }
  .company-table tr{ margin-bottom:20px; border-bottom:1px solid #e4e4e4; }
  .company-table th{ background:none; border:none; padding:0 0 4px; font-weight:700; color:#555; text-align:left; }
  .company-table td{ border:none; padding:0 0 12px; }
}

/* company-map ページ下部の地図 */
.company-map { display: flex; flex-flow: row nowrap; gap: 50px; padding: 60px 8vw 30px;}
.company-address { width: 40%; max-width: 350px; height: 450px; }
.company-address address { margin-bottom: .25em;}
.company-address p { font-size:2.4rem; font-weight: 700; margin-bottom: .25em; }
.company-address img { width: 100%; height: calc(100% - 125px); object-fit: cover;}
.company-map .map { width: calc(100% - 350px); }

@media (max-width: 760px){
	.company-map { display: flex; flex-flow: column nowrap; gap: 30px; padding: 60px 6vw 80px;}
	.company-address { width: 100%; max-width: 100%; height: 100%; }
	.company-address p { font-size: 2rem; }
	.company-address img { width: 100%; height: 400px;}
	.company-map .map { width: 100%; }
}

/* ===== Contact form ===== */
.contact-form-sec{ color:#333; padding:60px 8vw 30px; max-width:960px; margin:0 auto; }
.contact-heading{ font-size:2.4rem; font-weight:700; margin-bottom:.25em; }
.contact-sub{ font-size:.95rem; color:#f5c518; margin-bottom:48px; }
.cf7-form{ max-width:570px; margin:0 auto; }
.cf7-form .field{margin-bottom:22px;}
.cf7-form label{display:block; font-weight:600; margin-bottom:6px; width:fit-content;}
.cf7-form input,.cf7-form select,.cf7-form textarea{
  width:100%; max-width:560px; padding:12px 14px; font-size:1rem; border:1px solid #ccc; border-radius:4px; background:#fff;
}
.cf7-form textarea{min-height:200px; resize:vertical;}
.cf7-form .wpcf7-list-item{margin:0 18px 6px 0;}
.cf7-form .consent{font-size:.85rem;}
.btn-black,.cf7-form input[type="submit"]{
  background:#000; color:#fff; border:none; border-radius:4px; padding:14px 40px; cursor:pointer; transition:.25s;
}
.btn-black:hover,.cf7-form input[type="submit"]:hover{opacity:.8;}
@media(max-width:760px){
  .contact-heading{font-size:2rem;}
  .contact-form-sec{padding:60px 6vw 80px;}
  .cf7-form input,.cf7-form select,.cf7-form textarea{max-width:100%;}
}

/* Tab-style radio */
.tab-radio .field-label{display:block;font-weight:600;margin-bottom:8px;}
.tab-toggle{ display:inline-flex; border:1px solid #000; border-radius:6px; overflow:hidden; margin:0 0 20px 0; }
.tab-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.tab-toggle .tab{
  padding:10px 28px; font-size:.95rem; line-height:1; cursor:pointer;
  background:#fff; color:#000; user-select:none; transition:background .25s,color .25s; margin:0;
}
.tab-toggle .tab:first-of-type{border-right:1px solid #000;}
.tab-toggle input:checked + .tab{ background:#000; color:#fff; }
@media (hover:hover){ .tab-toggle .tab:hover{ background:#000; color:#fff; } }
@media (max-width:760px){ .tab-toggle .tab{padding:10px 20px;font-size:.9rem;} }

/* Consent button style */
.btn-check{ position:absolute; opacity:0; pointer-events:none; }
.btn-toggle{
  display:inline-block; padding:14px 32px; border:2px solid #000; border-radius:30px;
  background:#fff; color:#000; font-size:.9rem; cursor:pointer; line-height:1; user-select:none;
  transition:background .25s,color .25s;
}
.btn-check:checked + .btn-toggle,.btn-toggle:hover{ background:#000; color:#fff; }
/* ===== CF7：ラジオ（ボタン全体に背景が付く） ===== */
/* 構造：<span class="wpcf7-list-item"><label><input><span class="wpcf7-list-item-label">ラベル</span></label></span> */

.cf7-form .wpcf7-radio{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin:6px 0 16px;
}

/* 各項目を100%幅の“ボタン”に */
.cf7-form .wpcf7-radio .wpcf7-list-item{ margin:0; width:100%; }
.cf7-form .wpcf7-radio .wpcf7-list-item label{
  position:relative; display:block; width:100%;
}

/* inputをラベル全面に広げてクリック当たり判定を最大化（見えない） */
.cf7-form .wpcf7-radio .wpcf7-list-item input[type="radio"]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; margin:0;
}

/* 見た目はラベル内のスパンで作る → “全体が塗られる” */
.cf7-form .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:42px; padding:10px 14px;
  border:1px solid #111; border-radius:9999px;
  background:#fff; color:#111; font-size:13px; font-weight:700; letter-spacing:.01em;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* チェック時：ボタン全体を反転 */
.cf7-form .wpcf7-radio .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label{
  background:#111; color:#fff; border-color:#111;
}

/* フォーカス（キーボード操作） */
.cf7-form .wpcf7-radio .wpcf7-list-item label:focus-within .wpcf7-list-item-label{
  box-shadow:0 0 0 3px rgba(17,17,17,.18);
}

/* 既存の .wpcf7-list-item 余白を抑制（重複指定の掃除） */
.cf7-form .wpcf7-list-item{ margin:0 }

@media (max-width:980px){ .cf7-form .wpcf7-radio{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .cf7-form .wpcf7-radio{ grid-template-columns:1fr; }
  .cf7-form .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label{ min-height:40px; }
}

/* ===== CF7：同意チェックのボタン化 ===== */
.cf7-form .wpcf7-acceptance{ display:flex; justify-content:center; margin:10px 0 18px; }
.cf7-form .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.cf7-form .wpcf7-acceptance .wpcf7-list-item label{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  background:#fff; color:#111; font-weight:600; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.cf7-form .wpcf7-acceptance input[type="checkbox"]{ position:absolute; opacity:0; pointer-events:none; }
.cf7-form .wpcf7-acceptance input[type="checkbox"] + .wpcf7-list-item-label{ display:inline-flex; align-items:center; }
.cf7-form .wpcf7-acceptance input[type="checkbox"] + .wpcf7-list-item-label::before{
  content:""; width:14px; height:14px; border:2px solid #111; border-radius:3px; display:inline-block;
}

.cf7-form .wpcf7-acceptance input[type="checkbox"]:checked + .wpcf7-list-item-label::before{
  border-color:#fff; background:#fff; box-shadow:inset 0 0 0 2px #111; background: #000;
}
.cf7-form input[type="submit"]{ margin-top:8px; }



/* ========= Greeting section ========= */
.greeting{ padding:60px 8vw 30px; background:#fff; color:#333; }
.greeting-inner{ max-width:1080px; margin:0 auto; display:flex; flex-direction: row-reverse; align-items: center; gap:60px; }
.greeting-photo{ flex:0 0 340px; }
.greeting-photo img{ width:100%; height:auto; display:block; border-radius:8px; object-fit:cover; }
.greeting-msg{ flex:1; font-size:.98rem; line-height:2; }
.greeting-title{ font-size:1.3rem; font-weight:700; margin-bottom:26px; }
.greeting-name{ margin-top:34px; text-align:right; }

@media(max-width:760px){
  .row-base{ height:28vh!important; }
  .greeting{ padding:60px 6vw 30px; }
  .greeting-inner{ flex-direction:column; gap:40px; }
  .greeting-photo{ flex:auto; max-width:480px; margin:0 auto; }
  .greeting-title{font-size:1.3rem;}
}

/* =========================================================
   History Timeline  – ONE・OFF
========================================================= */
.history{
 max-width: 960px; margin: 0 auto; position:relative; padding:60px 8vw 30px;
/*   background:url('images/history_back.jpg') center/cover no-repeat;; */
}
.history::after{ content:''; position:absolute; inset:0; background:linear-gradient(#ffffff, #d5d5d5b8); z-index:0; }
.history-title{ position:relative; z-index:1; font-size:2rem; font-weight:700; text-align:center; margin-bottom:48px; }
.history-timeline{ position:relative; z-index:1; max-width:960px; margin:0 auto; list-style:none; padding:0; border-left: 1px solid #333; }
.history-item{ position:relative; z-index: 1; padding:0 0 40px 20px; }
.history-item:first-child { padding: 40px 0 40px 20px; }
.history-date{ display:inline-block; font-weight:600; margin-bottom:6px; font-size:.95rem; }
.history-desc{ font-size:.95rem; line-height:1.8; }
.history-desc img { max-width: 240px; margin: 0 auto; }
.founder { max-width: 960px; position: absolute; right: 0; bottom: 0; text-align: center;}
@media (max-width:760px){
  .history{ padding:60px 6vw 80px; }
  .history-title{ font-size:1.7rem; }
  .history-item{ padding:0 0 32px 20px; }
  .history-date,.history-desc{ font-size:.9rem; }
  .history-timeline::before{ width:3px; }
  .history-item::before{ width:14px; height:14px; }
  .founder { position: relative; margin-top: 30px; padding: 0; }
}

/* =========================
   TOKENS / BASE
========================= */
:root{
  --c-text:#111; --c-muted:#777; --c-line:#e8e8e8; --c-accent:#111;
  --container-max:1080px; --content-max:920px;
  --space-1:8px; --space-2:12px; --space-3:18px; --space-4:28px; --space-5:44px;
}
.container{max-width:var(--container-max); margin-inline:auto; padding-inline:20px}
a:focus-visible{outline:2px solid #1a73e8; outline-offset:2px; border-radius:4px}

/* =========================
   MV（黒系フィルタ／筆記体風タイトル）
========================= */
.mv{
  min-height:clamp(260px,43vw,380px);
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 100%), var(--mv-bg-image);
  background-size:cover; background-position:top center;
  display:grid; place-items:center; color:#fff;
}
.mv__inner{ text-align:center; padding:var(--space-4) }
.mv__kicker{ margin:0 0 var(--space-1); font-size:13px; letter-spacing:.25em; text-transform:uppercase; opacity:.9 }
.mv__title{
  margin:0; letter-spacing:.06em; text-shadow:0 2px 10px rgba(0,0,0,.35);
  font-family:"Great Vibes","Dancing Script","Allura","Segoe Script",cursive;
  font-weight:400; font-size:clamp(34px,5.2vw,64px); line-height:1.15;
}
@media (max-width:760px){ .mv{min-height:46vw} }

/* =========================
   HEADER / META
========================= */
.single--sec--wrap{ padding:0 8vw 80px; max-width:1400px; margin:0 auto; }
.work-header{padding:var(--space-5) 0 var(--space-2)}
/* ▼ Noto Serif を撤去：サイズ/太さを保持しつつ family を統一 */
.work-title{
  margin:0 0 var(--space-2);
  color:var(--c-text);
  font-weight:700;
  font-size:clamp(18px,1.6vw,18px);
  line-height:1.35;
  letter-spacing:.02em;
  font-family:inherit;
}
.work-meta{display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center}
.badge-date{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px;
  border:1px solid var(--c-line); border-radius:999px;
  background:#fff; color:#222; font-size:13px;
}
.chip{
  display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:13px;
  text-decoration:none; border:1px solid var(--c-accent); color:var(--c-accent); background:#fff; transition:.2s;
}
.chip:hover{background:var(--c-accent); color:#fff}
.work-cats{display:flex; gap:8px}
.btn-tag{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  padding:7px 14px; font-size:13px; border-radius:999px;
  text-decoration:none; color:#fff !important;
  background:#222; border:1px solid #222;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition:transform .15s, box-shadow .15s;
}
.btn-tag:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.16)}
.work-tags{display:flex; gap:8px}

/* カテゴリ別色 */
body.category-ordermade-works   .btn-tag{background:#5c381a;border-color:#5c381a}
body.category-shopdesign-works  .btn-tag{background:#222;border-color:#222}
body.category-reform-works      .btn-tag{background:#004060;border-color:#004060}
body.category-publicdesign-works .btn-tag{background:#2e5e2e;border-color:#2e5e2e}

@media (max-width:760px){
  .work-header{padding:var(--space-4) 0 var(--space-2)}
  .work-meta{gap:8px; font-size:13px}
}

/* =========================
   ARTICLE / CONTENT
========================= */
.work-article{padding:10px 0}
.work-eyecatch{ max-width:var(--content-max); margin:18px 0 24px; }
.work-eyecatch img{width:100%; height:auto; border-radius:12px; box-shadow:0 18px 38px rgba(0,0,0,.12)}
.work-content{ max-width:var(--content-max); font-size:16px; color:#222; line-height:1.9; }
.work-content > *{margin:1.25em 0}
.work-content h2{font-size:clamp(18px,2vw,24px); margin:1.6em 0 .6em}
.work-content h3{font-size:clamp(16px,1.8vw,20px); margin:1.4em 0 .6em}
.work-content img{
  display:block; width:100%; max-width:var(--content-max);
  margin:1.1em 0; margin-left:0!important; border-radius:8px; height:auto;
}
.work-content .wp-block-image,.work-content .aligncenter,.work-content .alignnone,.work-content .alignleft{ text-align:left; }
.work-content figure{margin:1.6em 0}
.work-content figcaption{font-size:13px; color:var(--c-muted); margin-top:.5em}
.work-content blockquote{
  margin:1.6em 0; padding:18px 20px; border-left:4px solid #333;
  background:linear-gradient(#fafafa,#f1f1f1); border-radius:6px;
}
.work-content table{width:100%; border-collapse:collapse; font-size:15px; border-radius:6px; overflow:hidden}
.work-content th,.work-content td{border:1px solid #e2e2e2; padding:10px 12px; background:#fff}
.work-content ul,.work-content ol{padding-left:1.4em}
.work-content code{
  background:#f2f2f2; padding:.15em .4em; border-radius:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* 本文ページ分割 */
.page-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.page-links > span, .page-links a{
  display:inline-block; padding:6px 12px; border:1px solid #000;
  border-radius:999px; font-size:13px; color:#000; text-decoration:none;
}
.page-links > span{background:#000; color:#fff}

/* ===== Post Pager ===== */
.post-pager{
  display:flex; gap:16px; margin-top:48px; padding-top:20px; border-top:1px solid var(--c-line);
}
.post-pager .pager-prev,.post-pager .pager-next{ flex:1 1 0; min-width:0 }
.post-pager .pager-prev a,.post-pager .pager-next a{
  display:grid; grid-template-columns:24px 1fr 24px; align-items:center; gap:10px; width:100%;
  min-height:56px; padding:10px 14px; border:1px solid #222; border-radius:10px; background:#fff; color:#111; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.06); transition:background .18s, color .18s, box-shadow .18s, transform .18s;
}
.post-pager .pager-prev a:hover,.post-pager .pager-next a:hover{
  background:#111; color:#fff; transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.post-pager .arrow{ font-weight:700; font-size:18px; line-height:1; align-self:center; justify-self:center; }
.post-pager .txt{ min-width:0; line-height:1.25; display:flex; flex-direction:column; gap:4px; }
.post-pager .lbl{ font-size:12px; letter-spacing:.02em; opacity:.7 }
.post-pager .ttl{
  font-size:15px; font-weight:600; letter-spacing:.01em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.post-pager .pager-prev a .arrow{ grid-column:1; }
.post-pager .pager-prev a .txt{ grid-column:2; text-align:left; }
.post-pager .pager-next a .txt{ grid-column:2; text-align:right; }
.post-pager .pager-next a .arrow{ grid-column:3; }

@media (max-width:760px){
  .post-pager{ flex-direction:column; gap:12px; margin-top:40px; padding-top:16px; }
  .post-pager .pager-prev a,.post-pager .pager-next a{ min-height:52px; }
  .post-pager .ttl{ -webkit-line-clamp:2; white-space:normal; }
}

/* ===== Values : 4カラム ===== */
:root{ --values-overlay: rgba(0,0,0,.52); }
.values{ width:100%; display:grid; grid-template-columns:repeat(4,1fr); min-height:clamp(320px,52vh,560px); }
.values .value-slice{
  position:relative; display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(24px,4vw,38px) 3vw; color:#fff; background-position:center; background-size:cover; background-repeat:no-repeat;
}
.values .value-slice::before{ content:""; position:absolute; inset:0; background:var(--values-overlay); }
.values .value-slice:not(:last-child)::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:1px; background:rgba(255,255,255,.10);
}
.values .value-inner{ position:relative; z-index:1; text-align:center; width:min(520px,92%); }
.value-ico{ display:inline-block; width:34px; height:34px; margin:0 0 10px; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; opacity:.96; }
.value-ttl{ margin:0 0 .6em; letter-spacing:.02em; }
.value-txt{ margin:0; font-size:clamp(14px,1.45vw,16px); line-height:2.1; letter-spacing:.02em; text-wrap:balance; }
.values .s1{ background-image:url('images/values_01.jpg'); }
.values .s2{ background-image:url('images/values_02.jpg'); }
.values .s3{ background-image:url('images/values_03.jpg'); }
.values .s4{ background-image:url('images/values_04.jpg'); }

@media (max-width:1024px){ .values{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .values{ grid-template-columns:1fr; }
  .values .value-slice{ min-height:260px; }
  .values .value-slice:not(:last-child)::after{ width:auto; height:1px; left:0; right:0; top:auto; bottom:0; }
}

/* ===== Order made page (scoped) ===== */
:root{ --vit:#F5C518; --om-hero:url('images/service_04.png'); }

/* Sub-hero */
.sub-hero.om-hero{ position:relative; background:var(--om-hero) center/cover no-repeat; height:20vh; }
.sub-hero.om-hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45)!important; }
.sub-hero.om-hero .sub-hero-title{ color:#fff; }
.sub-hero.om-hero .sub-hero-inner p{ color:#fff; opacity:.9; }

/* Breadcrumbs 微調整 */
.breadcrumbs{ margin:16px auto 0; }

/* Container */
.om-container{ max-width:1080px; margin:0 auto; }

/* Intro */
.om-intro{ padding:60px 8vw 30px; }
.om-intro-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; max-width: 1200px; margin: 0 auto;}
/* ▼ Noto Serif を撤去：見た目のウェイト/サイズは維持 */
.om-kicker{
  font-weight:700; font-size:13px; line-height:1; letter-spacing:.15em; color:#000; margin:0 0 8px;
  font-family:inherit;
}
.om-title{
  margin:.2em 0 .6em;
  font-weight:700; font-size:clamp(24px,3.2vw,34px); line-height:1.35;
  font-family:inherit;
}
.om-lead p{ margin:.9em 0; line-height:2.1; font-size:16px; color:#333; }

.om-notes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.om-note{ padding:6px 12px; border:1px solid #e6e6e6; border-radius:8px; background:#fafafa; color:#444; font-size:14px; }
.om-photo{ max-width: 300px; border-radius:12px; overflow:hidden; box-shadow:0 18px 38px rgba(0,0,0,.12); }
.om-photo img{ width:100%; height:auto; display:block; }

/* Flow（6ステップ） */
.om-flow{ background:#f7f7f7; padding:90px 0; }
.om-flow .om-head{ text-align:center; margin:0 0 36px; }
.om-flow .om-head .ttl{
  font-weight:700; font-size:clamp(22px,2.4vw,28px); line-height:1.3;
  font-family:inherit;
}
.om-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:46px 44px; max-width:980px; margin:0 auto; }
.om-step{ text-align:center; }
.om-step .icon{
  width:120px; height:120px; margin:0 auto 12px; border-radius:50%;
  background:#fff; display:grid; place-items:center; box-shadow:0 2px 3px 2px rgba(0,0,0,.08);
}
.om-step .icon svg{ width:48px; height:48px; stroke:#111; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* ▼ Noto Serif を撤去 */
.om-step .st{
  font-weight:700; font-size:14px; line-height:1.1; color:#000; margin:10px 0 6px;
  font-family:inherit;
}
.om-step .cap{ font-size:14px; color:#444; line-height:1.7; }

/* Gallery */
.om-gallery{ padding:60px 8vw 30px; }
.om-gallery p {
  margin: 28px auto;
  text-align: center;
}
.om-gallery p span { font-size: 0.8rem; }
.om-gallery .om-head{ text-align:center; margin-bottom:28px; }
.om-gallery .om-head .ttl{
  font-weight:700; font-size:clamp(22px,2.4vw,28px); line-height:1.3;
  font-family:inherit;
}
.om-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;max-width: 900px;margin: 0 auto; }
.om-grid figure{ aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#e9e9e9; }
.om-grid img{ width:100%; height:100%; object-fit:cover; display:block; }

/* CTA */
.om-cta{ text-align:center; padding:70px 0 0; }
.om-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:220px; padding:12px 22px; border-radius:20px; text-decoration:none; font-weight:700; }
.om-btn-primary{ background:#111; color:#fff; }
.om-btn-primary:hover{ opacity:.9; }

/* Responsive */
@media (max-width:980px){
	.om-photo{ max-width: 100%;}
  .om-intro-inner{ grid-template-columns:1fr; gap:28px; }
  .om-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){ .om-steps{ grid-template-columns:1fr; } }
/* ===== Works Read (カテゴリ導入文) ===== */
.works-list .worksread{
  margin: 24px 0 32px;            /* 左基準（container内） */
  padding: 20px 22px;
  background: #fafafa;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  color: var(--c-text, #111);
  line-height: 1.9;
  letter-spacing: .01em;
}
.works-list .worksread p{ margin: .6em 0; font-size: 15.5px; }
.works-list .worksread p:first-child{
  margin-top: 0;
  font-weight: 700;               /* 導入を強めに */
}
.works-list .worksread p:last-child{ margin-bottom: 0; }

/* 画面幅が狭い時は少し詰める */
@media (max-width: 760px){
  .works-list .worksread{
    padding: 16px 16px;
    margin: 18px 0 26px;
    border-radius: 10px;
  }
  .works-list .worksread p{ font-size: 15px; }
}

/* ===== MS 固定5枚レイアウト ===== */
.ms-gallery{
  width: 50%;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;             /* 左やや広め / 右やや狭め */
  grid-template-rows: 200px 1fr 160px;            /* 上・中・下 */
  grid-template-areas:
  "left   rtop"
  "left   rmid"
  "lbot   rbot";
  gap:18px;
}

.ms{ margin:0; border-radius:10px; overflow:hidden; }
.ms img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 配置 */
.ms-1{ grid-area:left; }   /* 左 縦長（上中ぶち抜き） */
.ms-2{ grid-area:rtop; }   /* 右上 横長小 */
.ms-3{ grid-area:rmid; }   /* 右中 縦長大   */
.ms-4{ grid-area:lbot; }   /* 左下 横長小   */
.ms-5{ grid-area:rbot; }   /* 右下 横長小   */

/* 画面に合わせて高さを少し柔軟に */
@media (min-width: 1200px){
  .ms-gallery{
    /**grid-template-rows: 100px minmax(240px, 32vh) 100px;**/
    gap:22px;
  }
}
@media (max-width: 900px){
  .ms-gallery{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
    "left"
    "rtop"
    "rmid"
    "lbot"
    "rbot";
    gap:14px;
  }
  .ms-1{ height: 52vw; }   /* モバイル時の目安高さ */
  .ms-2{ height: 28vw; }
  .ms-3{ height: 48vw; }
  .ms-4,.ms-5{ height: 28vw; }
}

/* 投稿本文内ギャラリー：2列レイアウト */
.work-content .gallery.gallery-columns-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; /* 画像同士の余白はお好みで */
}

.work-content .gallery.gallery-columns-2 .gallery-item {
  margin: 0;          /* 既存テーマの余白リセット用 */
}

.work-content .gallery.gallery-columns-2 .gallery-icon img {
  width: 100%;
  height: auto;
  object-fit: cover;  /* トリミングしたい場合はこのまま、嫌なら消す */
}

/* SPは1列にしたい場合 */
@media (max-width: 640px) {
  .work-content .gallery.gallery-columns-2 {
    grid-template-columns: 1fr;
  }
}