*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --sky:      #5BB8F5;
  --sky-lt:   #D6EEFF;
  --sky-dk:   #2E87C8;
  --sun:      #FFD260;
  --sun-lt:   #FFF3C4;
  --sun-dk:   #C98B00;
  --mint:     #4ECBA5;
  --mint-lt:  #C8F5E8;
  --mint-dk:  #2A9A7A;
  --coral:    #FF7B6B;
  --coral-lt: #FFE0DC;
  --lav:      #A78BFA;
  --lav-lt:   #EDE9FE;
  --lav-dk:   #7C5CCC;
  --bg:       #F0F9FF;
  --bg2:      #E6F4FC;
  --white:    #FFFFFF;
  --ink:      #1A2B3C;
  --ink-m:    #4A6278;
  --ink-f:    #90A8BA;
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 40px;
  --sh-sm: 0 2px 10px rgba(91,184,245,.12);
  --sh-md: 0 6px 24px rgba(91,184,245,.18);
  --sh-lg: 0 12px 48px rgba(91,184,245,.22);
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-size: 15px;
  padding-bottom: 80px;
  overflow-x: hidden;
}

/* ===== VISUALLY HIDDEN (accessibility) ===== */
.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;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.vis { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }
.d5 { transition-delay: .5s; }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/tsudoi.png');
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(14,60,100,.75) 0%,
    rgba(20,90,130,.62) 40%,
    rgba(30,120,100,.42) 100%
  );
}

.blob { position:absolute; border-radius:50%; pointer-events:none; will-change:transform; z-index:1; }
.b3 { width:240px;height:240px;top:32%;right:12%;
  background:radial-gradient(circle,rgba(255,210,96,.25)0%,transparent 70%);
  animation:fl3 7s ease-in-out infinite; }
.b4 { width:160px;height:160px;top:18%;left:10%;
  background:radial-gradient(circle,rgba(167,139,250,.18)0%,transparent 70%);
  animation:fl2 8s ease-in-out infinite 1s; }

@keyframes fl2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,-28px) scale(1.05)}}
@keyframes fl3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-18px,18px) rotate(12deg)}}

.particles { position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1; }
.pt {
  position:absolute;border-radius:50%;opacity:0;
  animation:ptfly var(--d,6s) var(--dl,0s) ease-in-out infinite;
}
@keyframes ptfly{
  0%   {opacity:0;transform:translateY(0) scale(.4)}
  20%  {opacity:.5}
  80%  {opacity:.3}
  100% {opacity:0;transform:translateY(-200px) scale(1.3)}
}

.hero-inner {
  position:relative;z-index:2;
  padding:64px 44px;
  max-width:720px;
}

/* ===== BREADCRUMB IN HERO ===== */
.breadcrumb-nav {
  margin-bottom: 20px;
  animation: fadedn .8s .1s both;
}
.breadcrumb {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.breadcrumb li {
  font-size: 11px;
  color: rgba(255,255,255,.65);
}
.breadcrumb a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .15s;
}
.breadcrumb a:hover { color: #fff; }

/* ===== EYEBROW ===== */
.eyebrow {
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:500;letter-spacing:.14em;
  color:#fff;background:rgba(255,255,255,.15);
  backdrop-filter:blur(12px);
  padding:8px 18px;border-radius:100px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:var(--sh-sm);margin-bottom:24px;
  animation:fadedn .8s .2s both;
}
.eyebrow-dot {
  width:8px;height:8px;border-radius:50%;background:var(--sky);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}

.hero h1 {
  font-family:'Noto Serif JP',serif;
  font-size:clamp(34px,7.5vw,60px);
  font-weight:300;color:#fff;
  line-height:1.35;margin-bottom:8px;
  animation:fadedn .8s .35s both;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.h1-accent {
  color:#7ee8d0;position:relative;display:inline-block;
}
.h1-accent::after {
  content:'';position:absolute;
  bottom:3px;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--sky),var(--mint));
  border-radius:3px;
  transform:scaleX(0);transform-origin:left;
  animation:ulg 1s 1.1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes ulg{to{transform:scaleX(1)}}
.h1small {
  font-size:clamp(14px,2.5vw,18px);
  color:rgba(255,255,255,.75);
  font-weight:300;
  letter-spacing:.04em;
}

.hero-sub {
  font-size:17px;color:rgba(255,255,255,.88);font-weight:300;
  margin-top:12px;margin-bottom:36px;
  animation:fadedn .8s .5s both;
  text-shadow:0 1px 8px rgba(0,0,0,.2);
  line-height: 1.8;
}
.hero-sub-sm {
  font-size:14px;
  color:rgba(255,255,255,.72);
  display: block;
  margin-top: 4px;
}

.btns { display:flex;gap:10px;flex-wrap:wrap;animation:fadedn .8s .65s both; }

.btn-call-hero {
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#4ECBA5 0%,#2A9A7A 100%);
  color:#fff;text-decoration:none;font-size:15px;font-weight:600;
  padding:14px 28px;border-radius:100px;
  box-shadow:0 4px 16px rgba(78,203,165,.5);
  transition:transform .2s,box-shadow .2s;
  letter-spacing:.04em;
}
.btn-call-hero:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(78,203,165,.6)}
.btn-call-hero:active{transform:scale(.97)}

.btn-p {
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--sky) 0%,var(--sky-dk) 100%);
  color:#fff;text-decoration:none;font-size:14px;font-weight:500;
  padding:14px 26px;border-radius:100px;
  box-shadow:0 4px 16px rgba(91,184,245,.45);
  transition:transform .2s,box-shadow .2s;
}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(91,184,245,.55)}
.btn-p:active{transform:scale(.97)}

.btn-s {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(12px);
  color:#fff;text-decoration:none;
  font-size:14px;font-weight:500;padding:14px 26px;
  border-radius:100px;border:1.5px solid rgba(255,255,255,.35);
  transition:transform .2s,background .15s;
}
.btn-s:hover{transform:translateY(-2px);background:rgba(255,255,255,.25)}

.badges {
  position:absolute;bottom:40px;left:44px;
  display:flex;gap:10px;flex-wrap:wrap;
  animation:fadeup .8s 1s both;z-index:2;
}
.badge {
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-md);
  padding:10px 16px;display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:500;color:#fff;
}
.badge span{font-size:18px}
.badge:nth-child(1){animation:bb 3s 1.2s ease-in-out infinite}
.badge:nth-child(2){animation:bb 3s 1.6s ease-in-out infinite}
.badge:nth-child(3){animation:bb 3s 2.0s ease-in-out infinite}
.badge:nth-child(4){animation:bb 3s 2.4s ease-in-out infinite}
@keyframes bb{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.scroll-hint {
  position:absolute;bottom:44px;right:44px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,.6);font-size:10px;letter-spacing:.15em;z-index:2;
}
.scroll-circle {
  width:28px;height:28px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  animation:scb 1.6s ease-in-out infinite;
}
@keyframes scb{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes fadedn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ===== TRUST BAR ===== */
.trust-bar {
  background: var(--white);
  border-bottom: 1.5px solid rgba(91,184,245,.15);
  box-shadow: 0 2px 12px rgba(91,184,245,.08);
  position: sticky;
  top: 0;
  z-index: 50;
}
.trust-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  overflow-x: auto;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-m);
  white-space: nowrap;
  padding: 4px 16px;
}
.trust-item strong { color: var(--sky-dk); font-weight: 600; margin-left: 2px; }
.trust-icon { font-size: 14px; }
.trust-sep {
  width: 1px;
  height: 18px;
  background: rgba(91,184,245,.25);
  flex-shrink: 0;
}

/* ===== SECTION ===== */
.sec {
  max-width:800px;margin:0 auto;padding:80px 28px;
}
.sec+.sec { border-top:1.5px dashed rgba(91,184,245,.2); }

.sec-label {
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sky-lt);color:var(--sky-dk);
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 14px;border-radius:100px;margin-bottom:24px;
}
.sec-title {
  font-family:'Noto Serif JP',serif;
  font-size:clamp(22px,4vw,34px);font-weight:300;
  color:var(--ink);margin-bottom:16px;line-height:1.45;
}
.sec-lead {
  font-size:15px;color:var(--ink-m);line-height:1.9;margin-bottom:48px;
}
.text-link {
  color: var(--sky-dk);
  text-decoration: underline;
  text-decoration-color: rgba(46,135,200,.3);
  text-underline-offset: 2px;
  transition: text-decoration-color .2s;
}
.text-link:hover { text-decoration-color: var(--sky-dk); }

/* ===== CONCERN SECTION ===== */
.concern-sec { padding-top: 60px; }
.concern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.concern-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--sh-sm);
  border: 1.5px solid rgba(255,123,107,.15);
  transition: transform .25s, box-shadow .25s;
}
.concern-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.concern-icon { font-size: 32px; display: block; margin-bottom: 10px; }
.concern-card p { font-size: 13px; color: var(--ink-m); line-height: 1.7; }
.concern-card strong { color: var(--ink); display: block; margin-top: 2px; }

.solution-banner {
  background: linear-gradient(135deg, var(--sky-dk) 0%, #1a5ea0 55%, var(--mint-dk) 100%);
  border-radius: var(--r-xl);
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
}
.solution-banner::before {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  top: -80px; right: -60px;
}
.solution-inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.solution-icon { font-size: 40px; flex-shrink: 0; }
.solution-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.5;
}
.solution-desc { font-size: 14px; color: rgba(255,255,255,.88); line-height: 1.85; }
.solution-desc strong { color: #fff; font-weight: 600; }
.solution-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--sky-dk);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  transition: transform .2s, box-shadow .2s;
  letter-spacing: .04em;
}
.btn-call:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.18);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 24px;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,.4);
  transition: background .2s;
}
.btn-contact:hover { background: rgba(255,255,255,.28); }

/* ===== ABOUT section img ===== */
.sec-img-banner {
  width:100%;height:260px;object-fit:cover;
  border-radius:var(--r-xl);
  margin-bottom:40px;display:block;
  box-shadow:var(--sh-md);
}

/* ===== PHILOSOPHY CARD ===== */
.phil-card {
  background:linear-gradient(135deg,var(--sky-dk) 0%,#1E6DA8 100%);
  border-radius:var(--r-xl);padding:40px;color:#fff;
  position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s;cursor:default;
}
.phil-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.phil-card::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.07);top:-80px;right:-60px;animation:spin 22s linear infinite;}
.phil-card::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.05);bottom:-40px;left:40px;animation:spin 30s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg)}}
.phil-lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:14px}
.phil-q{font-family:'Noto Serif JP',serif;font-size:22px;font-weight:300;line-height:1.65;margin-bottom:18px}
.phil-card p{font-size:14px;opacity:.85;line-height:1.9}

/* ===== MINI CARDS ===== */
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.mini-card {
  background:var(--white);border-radius:var(--r-lg);padding:24px;
  box-shadow:var(--sh-sm);border:1.5px solid var(--sky-lt);
  transition:transform .25s,box-shadow .25s,border-color .25s;cursor:default;
}
.mini-card:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:var(--sh-md);border-color:var(--sky)}
.mc-icon{font-size:30px;margin-bottom:12px;display:block;transition:transform .3s}
.mini-card:hover .mc-icon{transform:scale(1.18) rotate(6deg)}
.mc-title{font-weight:600;font-size:14px;margin-bottom:6px;color:var(--ink)}
.mini-card p{font-size:12px;color:var(--ink-m);line-height:1.75}

/* ===== WORK CARDS ===== */
.work-grid{display:grid;gap:18px}
.work-card {
  background:var(--white);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-sm);border:1.5px solid transparent;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;cursor:default;
}
.work-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.wc-img{width:100%;height:190px;object-fit:cover;display:block;}
.wc-body{display:flex;}
.wc-bar{width:8px;flex-shrink:0;transition:width .3s}
.work-card:hover .wc-bar{width:11px}
.bar-sky   {background:linear-gradient(to bottom,var(--sky),var(--sky-dk))}
.bar-sun   {background:linear-gradient(to bottom,var(--sun),var(--sun-dk))}
.bar-mint  {background:linear-gradient(to bottom,var(--mint),var(--mint-dk))}
.bar-coral {background:linear-gradient(to bottom,var(--coral),#d45a4a)}
.wc-inner{display:flex;align-items:center;padding:24px 28px;gap:20px;width:100%}
.wc-emoji{font-size:44px;flex-shrink:0;transition:transform .3s}
.work-card:hover .wc-emoji{transform:scale(1.2) rotate(-6deg)}
.wc-text{flex:1}
.wc-tag{display:inline-block;font-size:11px;font-weight:500;padding:3px 10px;border-radius:100px;margin-bottom:8px;}
.t-sky   {background:var(--sky-lt);color:var(--sky-dk)}
.t-sun   {background:var(--sun-lt);color:var(--sun-dk)}
.t-mint  {background:var(--mint-lt);color:var(--mint-dk)}
.t-coral {background:var(--coral-lt);color:#c0392b}
.wc-title{font-family:'Noto Serif JP',serif;font-size:18px;font-weight:400;margin-bottom:6px;color:var(--ink)}
.wc-text p{font-size:13px;color:var(--ink-m);line-height:1.8}
.sdg-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sdg{font-size:10px;font-weight:500;padding:3px 9px;border-radius:100px;background:var(--mint-lt);color:var(--mint-dk);border:1px solid rgba(78,203,165,.3)}

/* ===== SHOP CARD ===== */
.shop-card {
  background: linear-gradient(135deg,#7b5ea7 0%,#4e7fc4 60%,var(--mint-dk) 100%);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
}
.shop-card-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 80%,rgba(255,210,96,.18),transparent 50%),
              radial-gradient(circle at 85% 20%,rgba(78,203,165,.18),transparent 50%);
  pointer-events: none;
}
.shop-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 36px 32px;
  align-items: start;
}
.shop-left { flex: 1; }
.shop-tagline {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 12px;
}
.shop-desc {
  font-size: 13px;
  color: rgba(255,255,255,.88);
  line-height: 1.9;
  margin-bottom: 20px;
}
.shop-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-shop-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #4e7fc4;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  transition: transform .2s;
}
.btn-shop-primary:hover { transform: translateY(-2px); }
.btn-shop-secondary {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 100px;
  transition: background .2s;
}
.btn-shop-secondary:hover { background: rgba(255,255,255,.28); }
.shop-items { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.shop-item-card {
  background: rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 14px 16px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
}
.shop-item-title { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.shop-item-desc { font-size: 11px; color: rgba(255,255,255,.8); line-height: 1.5; }

/* ===== WAGE ===== */
.wage-hl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.wage-card {
  background:var(--white);border-radius:var(--r-lg);padding:28px;
  text-align:center;box-shadow:var(--sh-sm);border:1.5px solid var(--sky-lt);
  transition:transform .25s,box-shadow .25s;cursor:default;
}
.wage-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.wc-lbl{font-size:11px;color:var(--ink-f);letter-spacing:.08em;margin-bottom:8px}
.wc-val{font-family:'Noto Serif JP',serif;font-size:26px;font-weight:300;color:var(--sky-dk)}

.info-tbl {
  width:100%;background:var(--white);border-radius:var(--r-lg);
  overflow:hidden;border:1.5px solid var(--sky-lt);border-collapse:separate;border-spacing:0;
}
.info-tbl th{
  text-align:left;font-size:12px;font-weight:500;color:var(--ink-m);
  padding:12px 18px;background:var(--bg2);letter-spacing:.05em;
  border-bottom:1px solid var(--sky-lt);width:40%;
}
.info-tbl td{padding:12px 18px;font-size:14px;color:var(--ink);border-bottom:1px solid rgba(91,184,245,.12)}
.info-tbl tr:last-child th,.info-tbl tr:last-child td{border-bottom:none}

.hl-box {
  margin-top:22px;
  background:linear-gradient(135deg,var(--sky-lt),var(--mint-lt));
  border-radius:var(--r-lg);padding:20px 24px;
  border-left:4px solid var(--sky);
  font-size:14px;color:var(--ink-m);line-height:1.85;
}
.hl-box strong{color:var(--sky-dk);font-weight:600}

/* ===== ACTIVITIES ===== */
.act-grid{display:grid;gap:14px}
.act-card {
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-sm);border:1.5px solid transparent;
  transition:transform .25s,border-color .25s,box-shadow .25s;cursor:default;
}
.act-card:hover{transform:translateX(6px);border-color:var(--sky-lt);box-shadow:var(--sh-md)}
.act-img{width:100%;height:160px;object-fit:cover;display:block;}
.act-body{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;}
.act-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;transition:transform .25s;}
.act-card:hover .act-icon{transform:rotate(-8deg) scale(1.1)}
.i-sky  {background:var(--sky-lt)}
.i-sun  {background:var(--sun-lt)}
.i-mint {background:var(--mint-lt)}
.i-lav  {background:var(--lav-lt)}
.act-title{font-weight:600;font-size:15px;color:var(--ink);margin-bottom:4px}
.act-desc{font-size:13px;color:var(--ink-m);line-height:1.75}

/* ===== SCHEDULE ===== */
.schedule-wrap {
  background:linear-gradient(160deg,#EBF7FF 0%,#F0FDF8 100%);
  border-radius:var(--r-xl);
  padding:36px 32px;
  border:1.5px solid rgba(91,184,245,.2);
  box-shadow:var(--sh-md);
  position:relative;overflow:hidden;
}
.schedule-wrap::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(91,184,245,.10) 0%,transparent 70%);top:-80px;right:-80px;pointer-events:none;}
.schedule-wrap::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(78,203,165,.08) 0%,transparent 70%);bottom:-50px;left:-40px;pointer-events:none;}

.sun-track{display:flex;align-items:center;gap:10px;margin-bottom:28px;padding-bottom:22px;border-bottom:1.5px dashed rgba(91,184,245,.2);}
.sun-track-bar{flex:1;height:6px;border-radius:100px;background:linear-gradient(90deg,var(--sky-lt) 0%,var(--sky) 38%,var(--sun) 65%,#FFB347 100%);}
.sun-icon{font-size:20px;animation:sway 4s ease-in-out infinite;flex-shrink:0;}
@keyframes sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.sun-label{font-size:11px;font-weight:500;color:var(--ink-f);letter-spacing:.08em;flex-shrink:0;}

.timeline{position:relative;display:flex;flex-direction:column;gap:0;}
.timeline::before{content:'';position:absolute;left:56px;top:20px;bottom:20px;width:2px;background:linear-gradient(to bottom,var(--sky) 0%,var(--sky) 35%,var(--mint) 65%,var(--mint-lt) 100%);border-radius:2px;}
.tl-item{display:flex;align-items:flex-start;gap:0;position:relative;padding:10px 0;cursor:default;}
.tl-time{width:52px;font-size:11px;font-weight:500;color:var(--sky-dk);line-height:1.35;padding-top:2px;flex-shrink:0;text-align:right;letter-spacing:-.01em;}
.tl-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin:4px 16px 0 8px;border:2.5px solid var(--white);box-shadow:0 0 0 2px var(--sky);transition:transform .25s,box-shadow .25s;position:relative;z-index:1;}
.tl-item:hover .tl-dot{transform:scale(1.35);box-shadow:0 0 0 3px var(--sky-dk),0 0 12px rgba(91,184,245,.4);}
.dot-work  {background:var(--sky);box-shadow:0 0 0 2px var(--sky);}
.dot-break {background:var(--mint);box-shadow:0 0 0 2px var(--mint);}
.dot-lunch {background:var(--sun);box-shadow:0 0 0 2px var(--sun);}
.dot-end   {background:var(--coral);box-shadow:0 0 0 2px var(--coral);}
.tl-item:hover .dot-work  {box-shadow:0 0 0 3px var(--sky-dk),0 0 12px rgba(91,184,245,.5);}
.tl-item:hover .dot-break {box-shadow:0 0 0 3px var(--mint-dk),0 0 12px rgba(78,203,165,.5);}
.tl-item:hover .dot-lunch {box-shadow:0 0 0 3px var(--sun-dk),0 0 12px rgba(255,210,96,.5);}
.tl-item:hover .dot-end   {box-shadow:0 0 0 3px #c0392b,0 0 12px rgba(255,123,107,.5);}
.tl-pill{flex:1;border-radius:var(--r-md);padding:10px 16px;display:flex;align-items:center;gap:12px;transition:transform .2s,box-shadow .2s;}
.tl-item:hover .tl-pill{transform:translateX(4px);box-shadow:var(--sh-sm);}
.pill-work  {background:rgba(91,184,245,.10);border:1px solid rgba(91,184,245,.2);}
.pill-break {background:rgba(78,203,165,.10);border:1px solid rgba(78,203,165,.2);}
.pill-lunch {background:rgba(255,210,96,.13);border:1px solid rgba(255,210,96,.3);}
.pill-open  {background:rgba(91,184,245,.055);border:1px dashed rgba(91,184,245,.2);}
.pill-end   {background:rgba(255,123,107,.10);border:1px solid rgba(255,123,107,.22);}
.tl-emoji{font-size:22px;flex-shrink:0;transition:transform .25s;}
.tl-item:hover .tl-emoji{transform:scale(1.2) rotate(-6deg);}
.tl-content{flex:1;}
.tl-title{font-size:14px;font-weight:500;color:var(--ink);line-height:1.4;}
.tl-range{font-size:11px;color:var(--ink-f);margin-top:1px;}
.tl-dur{font-size:10px;font-weight:500;padding:3px 9px;border-radius:100px;flex-shrink:0;letter-spacing:.04em;}
.dur-work  {background:var(--sky-lt);color:var(--sky-dk);}
.dur-break {background:var(--mint-lt);color:var(--mint-dk);}
.dur-lunch {background:var(--sun-lt);color:var(--sun-dk);}
.dur-end   {background:var(--coral-lt);color:#c0392b;}
.schedule-note{margin-top:24px;padding-top:20px;border-top:1.5px dashed rgba(91,184,245,.18);font-size:12px;color:var(--ink-f);display:flex;align-items:flex-start;gap:8px;line-height:1.7;}
.schedule-note::before{content:'ℹ️';font-size:14px;flex-shrink:0;margin-top:1px;}

/* ===== FEE ===== */
.fee-card-wrap{background:var(--white);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md);border:1.5px solid var(--sky-lt);margin-bottom:20px;}
.fee-header{display:flex;align-items:center;gap:16px;padding:22px 28px;background:linear-gradient(135deg,var(--sky-dk),#1a5ea0);color:#fff;}
.fee-header-icon{font-size:32px;flex-shrink:0;}
.fee-header-title{font-family:'Noto Serif JP',serif;font-size:17px;font-weight:400;}
.fee-header-sub{font-size:12px;opacity:.75;margin-top:3px;}
.fee-tbl{width:100%;border-collapse:collapse;}
.fee-tbl thead th{background:var(--bg2);font-size:12px;font-weight:500;color:var(--ink-m);padding:11px 20px;text-align:left;border-bottom:1.5px solid var(--sky-lt);}
.fee-tbl tbody td{padding:14px 20px;font-size:14px;color:var(--ink);border-bottom:1px solid rgba(91,184,245,.1);vertical-align:middle;}
.fee-tbl tbody tr:last-child td{border-bottom:none;}
.fee-tbl tbody tr{transition:background .15s;}
.fee-tbl tbody tr:hover{background:var(--bg2);}
.fee-tbl small{font-size:11px;color:var(--ink-f);display:block;margin-top:2px;}
.fee-amount{font-family:'Noto Serif JP',serif;font-size:16px;font-weight:400;color:var(--sky-dk);}
.fee-row-0 .fee-amount,.fee-row-1 .fee-amount{color:var(--mint-dk);font-weight:600;}
.fee-badge{display:inline-block;font-size:11px;font-weight:500;padding:3px 10px;border-radius:100px;white-space:nowrap;}
.badge-0{background:var(--coral-lt);color:#c0392b;}
.badge-1{background:var(--mint-lt);color:var(--mint-dk);}
.badge-2{background:var(--sky-lt);color:var(--sky-dk);}
.badge-3{background:var(--lav-lt);color:var(--lav-dk);}
.fee-point-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:0;}
.fee-point-card{background:var(--white);border-radius:var(--r-lg);padding:22px 18px;box-shadow:var(--sh-sm);border:1.5px solid var(--sky-lt);transition:transform .25s,box-shadow .25s;cursor:default;}
.fee-point-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);}
.fp-icon{font-size:28px;display:block;margin-bottom:10px;}
.fp-title{font-weight:600;font-size:14px;color:var(--ink);margin-bottom:8px;}
.fp-desc{font-size:12px;color:var(--ink-m);line-height:1.8;}

/* ===== FLOW ===== */
.flow-wrap{position:relative;padding:8px 0;}
.flow-spine{position:absolute;left:36px;top:28px;bottom:28px;width:3px;background:linear-gradient(to bottom,var(--sky) 0%,var(--sky) 20%,var(--sun) 40%,var(--lav) 55%,var(--mint) 75%,var(--coral) 100%);border-radius:3px;opacity:.35;}
.flow-list{list-style:none;display:flex;flex-direction:column;gap:12px;}
.flow-step{display:flex;align-items:flex-start;gap:20px;position:relative;}
.flow-num-col{flex-shrink:0;position:relative;z-index:1;}
.flow-circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;box-shadow:var(--sh-sm);cursor:default;}
.flow-step:hover .flow-circle{transform:scale(1.12) rotate(-6deg);box-shadow:var(--sh-md);}
.c-sky   {background:linear-gradient(135deg,var(--sky-lt),#b8e5ff);border:2px solid rgba(91,184,245,.35);}
.c-sun   {background:linear-gradient(135deg,var(--sun-lt),#ffe9a0);border:2px solid rgba(255,210,96,.4);}
.c-lav   {background:linear-gradient(135deg,var(--lav-lt),#d8d0fe);border:2px solid rgba(167,139,250,.35);}
.c-mint  {background:linear-gradient(135deg,var(--mint-lt),#aaf0da);border:2px solid rgba(78,203,165,.35);}
.c-coral {background:linear-gradient(135deg,var(--coral-lt),#ffcfca);border:2px solid rgba(255,123,107,.35);}
.flow-step-icon{transition:transform .3s;display:block;}
.flow-step:hover .flow-step-icon{transform:scale(1.15);}
.flow-body{flex:1;background:var(--white);border-radius:var(--r-lg);padding:20px 24px;box-shadow:var(--sh-sm);border:1.5px solid var(--sky-lt);transition:transform .25s,box-shadow .25s,border-color .25s;cursor:default;position:relative;}
.flow-body::before{content:'';position:absolute;left:-10px;top:26px;border-width:7px 10px 7px 0;border-style:solid;border-color:transparent var(--sky-lt) transparent transparent;}
.flow-step:hover .flow-body{transform:translateX(4px);box-shadow:var(--sh-md);border-color:var(--sky);}
.flow-step-label{font-size:10px;font-weight:500;letter-spacing:.18em;color:var(--ink-f);margin-bottom:4px;text-transform:uppercase;}
.flow-step-title{font-family:'Noto Serif JP',serif;font-size:17px;font-weight:400;color:var(--ink);margin-bottom:8px;line-height:1.45;}
.flow-step-desc{font-size:13px;color:var(--ink-m);line-height:1.85;margin-bottom:10px;}
.flow-tip{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);color:var(--sky-dk);font-size:12px;font-weight:500;padding:5px 12px;border-radius:100px;border:1px solid rgba(91,184,245,.2);}
.flow-start-badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--mint-lt),var(--sky-lt));color:var(--mint-dk);font-size:14px;font-weight:500;padding:10px 20px;border-radius:100px;border:1.5px solid rgba(78,203,165,.4);margin-top:4px;box-shadow:var(--sh-sm);}

/* ===== FAQ ===== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--sky-lt);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow .25s;
}
.faq-item:hover { box-shadow: var(--sh-md); }
.faq-item[open] { border-color: var(--sky); }
.faq-q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: background .15s;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--bg2); }
.faq-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--sky-dk));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.faq-arrow {
  margin-left: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sky-lt);
  flex-shrink: 0;
  position: relative;
  transition: transform .3s, background .2s;
}
.faq-arrow::before, .faq-arrow::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 1.5px;
  background: var(--sky-dk);
  border-radius: 2px;
  transition: transform .3s;
}
.faq-arrow::before { transform: translate(-50%,-50%) rotate(-45deg) translateX(2px); }
.faq-arrow::after  { transform: translate(-50%,-50%) rotate(45deg) translateX(-2px); }
.faq-item[open] .faq-arrow { transform: rotate(180deg); background: var(--sky); }
.faq-item[open] .faq-arrow::before { background: #fff; }
.faq-item[open] .faq-arrow::after  { background: #fff; }
.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 22px 18px;
  border-top: 1px dashed rgba(91,184,245,.2);
  padding-top: 14px;
}
.faq-a-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), var(--mint-dk));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.faq-a p {
  font-size: 14px;
  color: var(--ink-m);
  line-height: 1.85;
}

/* ===== CTA SECTION ===== */
.cta-sec {
  padding: 60px 28px 80px;
}
.cta-inner {
  background: linear-gradient(135deg, var(--sky-dk) 0%, #1e6da8 50%, var(--mint-dk) 100%);
  border-radius: var(--r-xl);
  padding: 56px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  top: -100px; right: -80px;
}
.cta-inner::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  bottom: -50px; left: -40px;
}
.cta-badge {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  animation: bb 3s ease-in-out infinite;
}
.cta-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(20px,3.5vw,30px);
  font-weight: 300;
  color: #fff;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.cta-desc {
  font-size: 14px;
  color: rgba(255,255,255,.85);
  line-height: 1.85;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.cta-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.cta-btn-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--sky-dk);
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 100px;
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
  transition: transform .2s, box-shadow .2s;
  letter-spacing: .06em;
}
.cta-btn-call:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,.25); }
.cta-btn-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.18);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 16px 28px;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,.4);
  transition: background .2s;
}
.cta-btn-form:hover { background: rgba(255,255,255,.28); }
.cta-hours {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  position: relative;
  z-index: 1;
}

/* ===== BOTTOM NAV ===== */
.bnav{position:fixed;bottom:0;left:0;right:0;background:rgba(240,249,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1.5px solid rgba(91,184,245,.2);display:flex;z-index:100;height:64px;}
.ni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--ink-f);font-size:10px;letter-spacing:.04em;transition:color .15s;cursor:pointer;border:none;background:none;position:relative;-webkit-tap-highlight-color:transparent;}
.ni.active,.ni:hover{color:var(--sky-dk)}
.ni svg{width:22px;height:22px;transition:transform .2s}
.ni:hover svg{transform:translateY(-2px) scale(1.1)}
.ni.active::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:3px;background:linear-gradient(90deg,var(--sky),var(--mint));border-radius:0 0 4px 4px;}
.sub{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:200px;max-width:calc(100vw - 24px);background:var(--white);border-radius:14px;box-shadow:0 4px 28px rgba(91,184,245,.22);overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.4,0,.2,1);}
.ni.open .sub{max-height:460px}
@media(max-width:360px){.sub{left:0;transform:none}}
.sub a{display:flex;align-items:center;gap:10px;padding:13px 20px;font-size:13px;color:var(--ink-m);text-decoration:none;border-bottom:1px solid var(--bg2);transition:background .12s,color .12s,padding-left .15s;}
.sub a::before{content:'›';color:var(--sky);font-size:18px;line-height:1;transition:transform .15s}
.sub a:last-child{border-bottom:none}
.sub a:hover{background:var(--bg2);color:var(--sky-dk);padding-left:26px}
.sub a:hover::before{transform:translateX(3px)}

/* ===== SKIP LINK ===== */
.skip-link{position:absolute;top:-100px;left:12px;background:var(--sky-dk);color:#fff;padding:10px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);font-size:13px;font-weight:500;text-decoration:none;z-index:9999;transition:top .2s;}
.skip-link:focus{top:0;}

/* ===== FOOTER ===== */
.site-footer{max-width:800px;margin:0 auto;padding:52px 28px 100px;text-align:center;border-top:1.5px dashed rgba(91,184,245,.22);}
.footer-logo{font-family:'Noto Serif JP',serif;font-size:22px;font-weight:300;color:var(--sky-dk);margin-bottom:6px;}
.footer-logo span{color:var(--mint-dk);}
.footer-catch { font-size: 11px; color: var(--ink-f); letter-spacing: .12em; margin-bottom: 16px; }
.footer-address{font-style:normal;font-size:13px;color:var(--ink-m);display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin-bottom:8px;}
.footer-tel a{font-size:15px;font-weight:600;color:var(--sky-dk);text-decoration:none;margin-bottom:6px;display:inline-block;}
.footer-tel a:hover{text-decoration:underline;}
.footer-hours{font-size:12px;color:var(--ink-f);margin-bottom:20px;}
.footer-copy{font-size:11px;color:var(--ink-f);}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:16px 0;}
.footer-nav a{color:var(--ink-f);text-decoration:none;font-size:12px;transition:color .15s;}
.footer-nav a:hover{color:var(--sky-dk);}

strong{font-weight:600;color:var(--ink)}

/* ===== RESPONSIVE ===== */
@media(max-width:560px){
  .hero-inner{padding:40px 24px 130px}
  .badges{bottom:78px;left:20px;right:20px}
  .mini-grid{grid-template-columns:1fr}
  .wage-hl{grid-template-columns:1fr}
  .wc-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .sec{padding:60px 20px}
  .phil-card{padding:28px}
  .phil-q{font-size:18px}
  .sec-img-banner{height:180px}
  .wc-img{height:150px}
  .act-img{height:120px}
  .schedule-wrap{padding:24px 18px}
  .timeline::before{left:50px}
  .tl-time{width:46px;font-size:10px}
  .tl-dur{display:none}
  .concern-grid{grid-template-columns:1fr 1fr}
  .solution-banner{padding:24px 20px}
  .solution-inner{flex-direction:column;gap:12px}
  .fee-point-grid{grid-template-columns:1fr}
  .fee-header{padding:16px 18px}
  .fee-tbl thead th,.fee-tbl tbody td{padding:10px 14px}
  .flow-spine{left:28px}
  .flow-circle{width:56px;height:56px;font-size:24px}
  .flow-step{gap:12px}
  .flow-body{padding:16px 16px}
  .flow-step-title{font-size:15px}
  .cta-inner{padding:36px 24px}
  .cta-btn-call{font-size:16px;padding:14px 28px}
  .shop-card-inner{grid-template-columns:1fr;padding:24px 20px}
  .shop-items{flex-direction:row;flex-wrap:wrap}
  .trust-inner{gap:0;padding:8px 12px}
  .trust-item{padding:4px 10px}
  .trust-sep{display:none}
}
@media(max-width:400px){
  .concern-grid{grid-template-columns:1fr}
}