:root{--color-primary:#f2380b;--color-secondary:#ff6b42;--color-accent:#fff0e8;--color-background:#faf8f5;--color-surface:#fff;--color-text-primary:#2a211e;--color-text-secondary:#746a65;--color-border:#f1e5de;--radius:22px;--radius-small:10px;--shadow:0 6px 24px #713c2410;--space:24px;--container-width:430px;--header-height:64px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 16px)}body{margin:0;background:var(--color-background);color:var(--color-text-primary);font:15px/1.95 'Noto Sans JP',sans-serif}img{max-width:100%;height:auto;display:block}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a{color:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}h1,h2,h3,p{margin:0}p+p{margin-top:18px}h1,h2,h3{line-height:1.55;font-weight:900;letter-spacing:-.04em}em{font-style:normal;color:var(--color-primary)}:focus-visible{outline:3px solid #2463a0;outline-offset:4px}[hidden]{display:none!important}.header{height:var(--header-height);position:sticky;top:0;z-index:20;background:#ffffffed;backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px}.logo{width:168px;height:auto}.header-cta{display:none;text-decoration:none;font-size:14px;font-weight:700;color:var(--color-primary)}.menu-toggle{width:44px;height:44px;background:transparent;border:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px}.menu-toggle span{height:2px;width:24px;background:var(--color-text-primary)}.mobile-nav{position:absolute;top:63px;left:0;right:0;background:white;box-shadow:var(--shadow);max-height:calc(100dvh - 64px);overflow:auto;padding:16px 24px}.mobile-nav a{display:block;padding:9px 0;text-decoration:none;border-bottom:1px solid var(--color-border)}main,.footer{width:100%;max-width:var(--container-width);margin-inline:auto;background:var(--color-surface)}.section{padding:52px var(--space);position:relative;isolation:isolate;overflow:hidden;scroll-margin-top:16px;background:radial-gradient(ellipse at 115% 0%,#ffe9db 0,transparent 38%),radial-gradient(ellipse at -20% 100%,#ffede0 0,transparent 35%),#fffdfb}.section:nth-child(even){background:radial-gradient(ellipse at 115% 90%,#ffe5d3 0,transparent 35%),#fffdfb}.section-label{font:600 11px/1.4 'Outfit',sans-serif;letter-spacing:.17em;color:var(--color-primary);display:flex;align-items:center;gap:12px;margin-bottom:14px}.section-label:after{content:'';width:40px;height:1px;background:var(--color-secondary)}.section-heading{font-size:28px;margin-bottom:22px}.hero{padding-top:34px}h1{font-size:36px;line-height:1.5;position:relative;z-index:1;margin-bottom:20px}.hero .mascot{float:right;width:146px;margin:4px -10px 12px 8px;border-radius:70px;mix-blend-mode:multiply}.hero-lead{font-size:16px;line-height:2.2}.hero .btn{clear:both;margin-top:30px}.mascot{width:160px;mix-blend-mode:multiply;border-radius:80px}.btn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:14px 15px;border-radius:50px;border:0;text-decoration:none;font-weight:800;font-size:15px;line-height:1.6;transition:transform .2s,box-shadow .2s;background:var(--color-accent)}.btn-primary{width:100%;background:linear-gradient(110deg,#ff5925,var(--color-primary));color:white;box-shadow:0 8px 22px #f2380b24}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #f2380b30}.trust{padding:0;list-style:none;display:flex;gap:6px;margin:18px 0 0}.trust li{flex:1;text-align:center;background:#ffffffbd;border:1px solid var(--color-border);border-radius:30px;padding:10px 4px;font-size:10px;line-height:1.7}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.card-grid{display:grid;gap:16px;margin-top:28px}.card-content{padding:22px}.card h3{font-size:19px;margin-bottom:10px}.card p{font-size:14px}.number{font:600 24px 'Outfit',sans-serif;color:var(--color-primary);display:block;margin-bottom:12px}.card-photo{width:100%;aspect-ratio:2.5;object-fit:cover}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.problem{padding:16px 12px}.problem p{font-size:13px;line-height:1.85}.icon-circle{display:flex;align-items:center;justify-content:center;border-radius:50%;width:42px;height:42px;background:var(--color-accent);color:var(--color-primary);font:500 25px 'Outfit',sans-serif;margin-bottom:10px}.callout{padding:23px 20px;background:#fff0e8c9;border-radius:var(--radius);margin-top:25px}.callout strong{font-size:21px;display:block;margin:8px 0}.callout h3{font-size:20px;margin-bottom:10px}.center{text-align:center}.values-title{font-size:24px;margin-top:30px}.bullet-list{padding-left:20px;margin:12px 0}.bullet-list li::marker{color:var(--color-primary)}.check-list{list-style:none;padding:0;margin:0}.check-list li{padding:9px 0 9px 25px;position:relative;font-size:13px;border-bottom:1px solid #f5dfd1}.check-list li:before{content:'✓';position:absolute;left:0;color:var(--color-primary);font-weight:bold}.timeline{padding:0;margin:28px 0 0;list-style:none}.timeline li{position:relative;display:grid;grid-template-columns:38px 1fr;gap:10px;margin-bottom:16px}.timeline li:not(:last-child):before{content:'';position:absolute;left:18px;top:36px;bottom:-18px;border-left:2px dotted #ffa986;z-index:-1}.step-number{width:38px;height:38px;border-radius:50%;background:var(--color-primary);color:white;font:600 17px 'Outfit',sans-serif;display:flex;align-items:center;justify-content:center;margin-top:12px}.timeline .card{padding:18px}.timeline h3{font-size:17px}.closing{font-weight:800;text-align:center;font-size:18px;margin-top:28px}.section#community>.mascot{float:right;width:115px;margin:0 -4px 12px 8px}.note{font-size:12px;color:var(--color-text-secondary);line-height:1.9}.section>.note{margin-top:20px}.faq-list{display:grid;gap:12px}.faq-item{background:white;border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.faq-toggle{padding:0;width:100%;background:none;border:0;display:grid;grid-template-columns:34px 1fr 20px;gap:10px;text-align:left;align-items:center;color:inherit;font-weight:800;font-size:15px;line-height:1.8}.faq-number{background:var(--color-accent);color:var(--color-primary);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif}.faq-toggle[aria-expanded=true] .faq-number{background:var(--color-primary);color:white}.faq-sign{font-size:24px;color:var(--color-primary)}.faq-answer{background:#fff6f0;padding:16px;border-radius:12px;margin-top:16px}.faq-answer p{font-size:14px}.final-cta .section-heading{font-size:36px}.final-cta .mascot{width:135px;float:right;margin:0 -6px 10px 10px}.final-cta .btn{clear:both;margin-top:30px}.application .section-heading{text-align:center}.application .section-label{justify-content:center}.form{padding:22px 18px;margin-top:26px}.demo-notice{background:var(--color-accent);padding:10px;font-size:12px;margin-bottom:22px;border-radius:8px}.field{margin-bottom:20px}.field label:not(.consent),.field-label{display:block;font-size:15px;font-weight:700;margin-bottom:8px}.badge{font-size:11px;font-weight:500;background:var(--color-primary);color:white;padding:2px 7px;border-radius:5px;margin-left:9px;vertical-align:middle}input:not([type=checkbox]),select,textarea{display:block;width:100%;padding:12px;border:1px solid #e8cfc1;border-radius:var(--radius-small);background:white;color:var(--color-text-primary);min-height:48px;font-size:17px}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#8b8886;font-size:14px}[aria-invalid=true]{border-color:#bb2323!important}.field-error{font-size:12px;color:#b21f20;min-height:0;margin-top:5px}.field-error:empty{display:none}.consent{display:flex;align-items:flex-start;gap:10px;font-size:13px}.consent input{width:20px;height:20px;flex-shrink:0;accent-color:var(--color-primary);margin:3px 0}.privacy-link{color:var(--color-primary);text-underline-offset:4px}.form>.note{margin-top:14px}.form-summary{background:#fff0ee;color:#a62020;font-size:13px;padding:12px;margin-bottom:20px;border-radius:8px}#form-status:not(:empty){margin-top:18px;padding:15px;background:var(--color-accent);border-radius:10px;font-size:14px}.footer{text-align:center;padding:32px 24px;border-top:1px solid var(--color-border);font-size:13px}.footer .logo{margin:0 auto 18px;width:160px}.footer a{display:inline-block;margin:12px 0}.footer small{display:block;font-family:'Outfit',sans-serif;color:var(--color-text-secondary)}.side-nav,.side-mascot{display:none}.skip-link{position:fixed;left:10px;top:-100px;z-index:50;background:white;padding:10px}.skip-link:focus{top:10px}dialog{border:1px solid var(--color-border);border-radius:22px;padding:28px;max-width:500px;width:calc(100% - 40px);color:var(--color-text-primary)}dialog::backdrop{background:#2a211e66}dialog h2{font-size:22px;margin-bottom:16px}dialog .btn{margin-top:20px}dialog p{font-size:14px}@media(min-width:768px){main{box-shadow:0 0 60px #5e39190d}.header-cta{display:block;margin-left:auto}.header{padding-inline:36px}}@media(min-width:1200px){.menu-toggle{display:none}.header .logo{width:180px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* First view only. The character uses the same asset as the desktop side. */
.hero {
  --hero-title-size: clamp(28px, 9vw, 38px);
  padding-block: 38px 30px;
  background: radial-gradient(ellipse at 95% 0%, #fff0e8 0, transparent 36%),
    radial-gradient(ellipse at 50% 100%, #ffe4c9 0, transparent 42%), #fffdf9;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.hero::before {
  width: 64%;
  aspect-ratio: 1;
  top: -16%;
  right: -37%;
  border: 1px solid #ff6b4240;
  border-radius: 45% 55% 35% 65%;
  transform: rotate(-20deg);
}
.hero::after {
  width: 100%;
  height: 85px;
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 50% 100%, #ffc78580 0 32px, transparent 33px),
    linear-gradient(160deg, transparent 30%, #ffddbd55 31%, transparent 65%);
  border-radius: 50% 50% 0 0;
}
.hero .section-label { font-size:10px; letter-spacing: .13em; margin-bottom: 20px; }
.hero .hero-main { position: relative; padding: 0; }
.hero .main-heading {
  margin: 0 0 26px;
  font-size:clamp(29px, 8.2vw, 36px);
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: -.045em;
}
.hero .hero-heading-line { display: flex; align-items: baseline; white-space: nowrap; }
.hero .hero-heading-accent {
  position: relative;
  isolation: isolate;
  color: var(--color-primary);
  font-size:var(--hero-title-size);
  font-weight: 800;
}
.hero .hero-heading-accent::after {
  content: "";
  position: absolute;
  inset-inline: 1%;
  bottom: .05em;
  height: .12em;
  border-radius: 50%;
  background: #ffdabd;
  transform: rotate(-2deg);
  z-index: -1;
}
.hero .hero-heading-connect { font-size:.72em; color: var(--color-text-primary); }
.hero .hero-heading-question { display: block; white-space: nowrap; color: var(--color-text-primary); }
.hero .sub-copy, .hero .reassurance-copy, .hero .hero-future-copy {
  max-width: none;
  font-size:17px;
  font-weight: 500;
  line-height: 1.95;
  margin: 0;
}
.hero .reassurance-copy { margin-top: 22px; }
.hero .hero-reassurance-accent { display: inline-block; font-size:22px; font-weight: 700; color: var(--color-primary); }
.hero .hero-future-copy { margin-top: 12px; }
.hero .hero-character { position: static; width: fit-content; margin: 14px auto 0; }
.hero .hero-character img { display: block; width: auto; height: 170px; max-width: 100%; object-fit: contain; }
.hero .hero-cta { position: relative; z-index: 1; margin-top: 18px; }
.hero .hero-cta .btn {
  margin: 0;
  width: 100%;
  min-height: 60px;
  border-radius: 999px;
  background: var(--color-primary);
  color: white;
  box-shadow: 0 6px 18px #f2380b20;
  font-size:15px;
  font-weight: 700;
  gap: 10px;
}
.hero .hero-cta .btn:hover { background: #d93209; box-shadow: 0 8px 20px #f2380b26; }
.hero .hero-cta-icon { display: flex; align-items: center; flex-shrink: 0; }
.hero .hero-cta-icon svg { width: 22px; height: 22px; }
.hero .hero-benefits { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.hero .hero-benefits li { display: flex; align-items: center; gap: 10px; font-size:13px; font-weight: 500; line-height: 1.8; }
.hero .hero-benefits br { display: none; }
.hero .hero-benefit-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--color-accent); color: var(--color-primary);
  font: 500 21px 'Outfit', sans-serif;
}
.hero .hero-benefit-icon svg { width: 22px; height: 22px; }
@media (min-width: 1200px) {
  .hero { padding-block: 48px 90px; }
  .hero .hero-character { display: none; }
  .hero .main-heading { margin-bottom: 32px; }
  .hero .hero-cta { margin-top: 28px; }
  .hero .hero-benefits { grid-template-columns: .85fr 1.5fr 1fr; gap: 6px; }
  .hero .hero-benefits li { gap: 4px; padding: 9px 5px; background: #ffffffb3; border: 1px solid var(--color-border); border-radius: 999px; font-size:10px; }
  .hero .hero-benefits br { display: initial; }
  .hero .hero-benefit-icon { width: 20px; height: 20px; background: transparent; font-size:20px; }
  .hero .hero-benefit-icon svg { width: 18px; height: 18px; }
}
@media (max-width: 359px) {
  .hero .sub-copy, .hero .reassurance-copy, .hero .hero-future-copy { font-size:16px; }
  .hero .hero-cta .btn { font-size:13px; gap: 7px; }
}

/* Desktop side columns; the main column remains centered at 430px. */
@media (min-width: 1200px) {
  body { background: radial-gradient(ellipse at 98% 80%, #ffede1 0, transparent 40%), #faf8f5; }
  .side-nav, .side-mascot {
    display: block;
    position: fixed;
    top: calc(var(--header-height) + 24px);
    bottom: 24px;
    max-height: none;
    transform: none;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #edcfc0 transparent;
  }
  .side-nav {
    right: calc(50% + var(--container-width) / 2 + 38px);
    width: clamp(230px, calc((100vw - var(--container-width)) / 2 - 76px), 280px);
    padding: clamp(32px, 12vh, 110px) 12px 24px;
  }
  .side-nav .logo { width: 100%; max-width: 244px; object-fit: contain; }
  .side-nav p { margin: 20px 0 26px; font-size:13px; color: var(--color-text-secondary); }
  .side-nav a {
    display: block;
    text-decoration: none;
    color: var(--color-text-primary);
    padding: 10px 14px;
    border-left: 2px solid var(--color-border);
    font-size:13px;
    line-height: 1.7;
    transition: background-color .2s, color .2s, padding-left .2s;
  }
  .side-nav a:hover { background: #fff0e880; color: var(--color-primary); padding-left: 18px; }
  .side-nav a[aria-current=true] {
    background: var(--color-accent);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 700;
  }
  .side-mascot {
    left: calc(50% + var(--container-width) / 2 + 38px);
    width: clamp(270px, calc((100vw - var(--container-width)) / 2 - 76px), 330px);
    padding: 10px 8px 20px;
    text-align: center;
    isolation: isolate;
  }
  .side-mascot::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 230px;
    left: -12%;
    width: 110%;
    height: 360px;
    background: radial-gradient(circle at 25% 30%, #ffe6d980, transparent 55%), radial-gradient(circle at 80% 70%, #fff0e8, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
  }
  .side-message {
    position: relative;
    padding: 22px 10px;
    margin: 12px 4px 25px;
    border: 2px solid #ffb39b;
    border-radius: 46% 42% 38% 40% / 48% 45% 42% 38%;
    background: #fffefa;
    box-shadow: 0 4px 20px #b7783910;
  }
  .side-message::after {
    content: '';
    position: absolute;
    left: 45%;
    bottom: -12px;
    width: 20px;
    height: 20px;
    background: #fffefa;
    border-right: 2px solid #ffb39b;
    border-bottom: 2px solid #ffb39b;
    transform: rotate(42deg) skew(10deg);
    border-radius: 0 0 8px 0;
  }
  .side-message p { font-size:clamp(18px, 1.4vw, 22px); font-weight: 800; line-height: 1.8; margin: 0; }
  .side-message span { color: var(--color-primary); background: linear-gradient(transparent 75%, #ffdabd 75%); }
  .side-character { position: relative; margin: 0 auto; width: 100%; }
  .side-character img { width: auto; height: clamp(290px, 43vh, 400px); max-width: 100%; object-fit: contain; margin-inline: auto; }
  .side-character::before, .side-message::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background: linear-gradient(var(--color-secondary), var(--color-secondary)) 2px 3px / 5px 22px no-repeat,
      linear-gradient(var(--color-secondary), var(--color-secondary)) 20px 11px / 5px 22px no-repeat;
    transform: rotate(-35deg);
    opacity: .6;
    pointer-events: none;
  }
  .side-character::before { left: 2%; top: 18%; }
  .side-message::before { right: 6px; top: -23px; transform: rotate(25deg); }
  .side-social { margin-top: 18px; padding: 16px 12px; border: 1px solid #ffdacb; border-radius: var(--radius); background: #ffffffb3; }
  .side-social h2 { font-size:15px; color: var(--color-primary); letter-spacing: 0; font-weight: 700; }
  .social-links { display: flex; justify-content: center; gap: 10px; margin: 14px 0 12px; }
  .social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    border: 1px solid var(--color-border);
    border-radius: 15px;
    background: white;
    color: var(--color-text-primary);
    padding: 0;
    box-shadow: 0 3px 8px #5027190b;
    transition: transform .2s, box-shadow .2s;
  }
  .social-instagram { color: #b83181; }
  .social-youtube { color: #e32620; }
  .social-button:disabled { opacity: .7; cursor: default; }
  a.social-button:hover { transform: translateY(-3px); box-shadow: 0 6px 14px #50271918; }
  .side-social p { margin: 0; font-size:11px; line-height: 1.8; color: var(--color-text-secondary); }
}
@media (min-width: 1200px) and (max-height: 750px) {
  .side-nav { padding-top: 24px; }
  .side-message { margin-top: 4px; padding-block: 15px; }
  .side-character img { height: 290px; }
}

/* SECTION 02 only: supplied illustrations and editable text. */
.problems-section { padding-block: 44px 48px; background: radial-gradient(ellipse at 100% 95%, #fff0e870, transparent 45%), #fffdfb; }
.problems-section .section-label { margin-bottom: 18px; }
.problems-section .problems-heading { font-size:clamp(26px, 6.7vw, 29px); line-height: 1.55; font-weight: 900; margin-bottom: 22px; text-wrap: pretty; }
.problems-section .problems-intro { font-size:15px; line-height: 1.95; }
.problems-section .problems-intro p+p { margin-top: 18px; }
.problems-section .problems-cards { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.problems-section .problems-card { display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: center; gap: 12px; padding: 12px; min-height: 124px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: 0 5px 18px #8c4d2710; }
.problems-section .problems-illustration { display: block; width: 100%; height: auto; object-fit: contain; }
.problems-section .problems-card p { font-size:16px; font-weight: 500; line-height: 1.85; overflow-wrap: anywhere; margin: 0; }
.problems-section .problems-card strong { color: var(--color-primary); font-weight: 800; }
.problems-section .problems-conclusion { position: relative; margin-top: 28px; padding: 26px 12px; text-align: center; background: linear-gradient(135deg,var(--color-accent),#fff5ee); border-radius: var(--radius); }
.problems-section .problems-conclusion p { font-size:13px; font-weight: 600; line-height: 1.9; margin: 0; }
.problems-section .problems-conclusion p+p { margin-top: 12px; }
.problems-section .problems-conclusion strong { display: inline-block; position: relative; isolation: isolate; font-size:clamp(22px, 5.8vw, 26px); font-weight: 800; line-height: 1.7; color: var(--color-primary); white-space: nowrap; letter-spacing: -.055em; }
.problems-section .problems-conclusion strong::after { content: ''; position: absolute; bottom: .06em; left: 2%; right: 2%; height: .2em; background: #ffd5b9; border-radius: 50%; transform: rotate(-2deg); z-index: -1; }
@media (min-width: 420px) {
  .problems-section .problems-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .problems-section .problems-card { grid-template-columns: 64px minmax(0,1fr); gap: 7px; padding: 10px 8px; min-height: 142px; }
  .problems-section .problems-card p { font-size:13px; line-height: 1.75; }
}
@media (max-width: 359px) {
  .problems-section .problems-card { grid-template-columns: 74px minmax(0,1fr); gap: 10px; }
  .problems-section .problems-card p { font-size:15px; }
  .problems-section .problems-conclusion strong { font-size:20px; }
}

.problems-section .problems-heading>span { display: inline-block; white-space: nowrap; }

/* Readable vertical illustration cards, independent of shared card styling. */
.problems-section .problems-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.problems-section .problems-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 16px 12px 18px;
  gap: 12px;
  min-height: 0;
}
.problems-section .problems-illustration {
  width: min(100%, 132px);
  height: auto;
  margin-inline: auto;
  flex-shrink: 0;
}
.problems-section .problems-card p {
  font-size: 14px;
  line-height: 1.85;
  overflow-wrap: normal;
  text-wrap: pretty;
}
@media (max-width: 359px) {
  .problems-section .problems-cards { grid-template-columns: 1fr; }
  .problems-section .problems-illustration { width: min(100%, 150px); }
  .problems-section .problems-card p { font-size: 16px; text-align: center; }
}

/* Community introduction cards only. */
#community .community-cards { display: grid; gap: 18px; margin-top: 28px; clear: both; }
#community .community-card { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; padding: 22px 18px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); }
#community .community-card-copy { min-width: 0; }
#community .community-card-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
#community .community-number { position: relative; flex-shrink: 0; padding-bottom: 7px; color: var(--color-primary); font: 600 28px/1 'Outfit', sans-serif; }
#community .community-number::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--color-primary); }
#community .community-card-heading h3 { font-size: 18px; font-weight: 800; line-height: 1.65; letter-spacing: -.04em; }
#community .community-description { font-size: 15px; line-height: 1.9; margin: 0; }
#community .community-achievement { padding: 12px; border-radius: 14px; background: #fff3ed; margin-top: 16px; }
#community .community-achievement p { margin: 0; color: var(--color-primary); font-size: 13px; line-height: 1.8; font-weight: 700; }
#community .community-achievement strong { display: inline-block; font-size: 19px; font-weight: 800; }
#community .community-achievement .community-recruitment { color: var(--color-text-primary); font-size: 12px; font-weight: 500; margin-top: 3px; }
#community .community-illustration { width: 100%; max-width: 300px; height: auto; object-fit: contain; justify-self: center; align-self: center; }
@media (min-width: 1200px) {
  #community .community-card { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 12px; padding: 18px 12px; }
  #community .community-card-heading { gap: 8px; flex-wrap: wrap; }
  #community .community-card-heading h3 { font-size: 17px; }
  #community .community-description { font-size: 14px; line-height: 1.85; }
  #community .community-achievement { padding: 10px; }
  #community .community-achievement p { font-size: 12px; }
  #community .community-achievement strong { font-size: 18px; }
}

/* WORK OPTIONS experience only. */
#work .work-experience { margin-top: 30px; padding: 22px 14px; border-radius: var(--radius); background: linear-gradient(145deg,#fff0e8,#fff9f4); }
#work .work-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
#work .work-choices legend { width: 100%; padding: 0; margin-bottom: 18px; text-align: center; font-size: 18px; font-weight: 800; line-height: 1.8; }
#work .work-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#work .work-choice { position: relative; cursor: pointer; }
#work .work-choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; min-height: 0; padding: 0; }
#work .work-choice-body { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; padding: 8px 10px 16px; border: 2px solid var(--color-border); border-radius: 16px; background: white; transition: border-color 260ms, background-color 260ms; }
#work .work-choice-body img { width: min(100%,140px); height: auto; object-fit: contain; }
#work .work-choice-title { font-size: 14px; font-weight: 700; line-height: 1.7; text-align: center; }
#work .work-choice-check { position: absolute; right: 8px; top: 8px; display: none; width: 23px; height: 23px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: white; font-size: 14px; }
#work .work-choice input:checked+.work-choice-body { border-color: var(--color-primary); background: #fff7f0; }
#work .work-choice input:checked+.work-choice-body .work-choice-check { display: flex; }
#work .work-choice input:checked+.work-choice-body .work-choice-title { color: var(--color-primary); }
#work .work-choice input:focus-visible+.work-choice-body { outline: 3px solid #2463a0; outline-offset: 3px; }
#work .work-choice:hover .work-choice-body { border-color: var(--color-secondary); }
#work .work-roadmap { margin-top: 28px; }
#work .work-roadmap h3 { font-size: 19px; line-height: 1.8; margin-bottom: 20px; }
#work .work-roadmap h3 span { color: var(--color-primary); }
#work .work-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
#work .work-step { position: relative; display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 2px 10px; align-items: center; padding: 14px 12px; border-radius: 16px; background: #fffffff0; border: 1px solid var(--color-border); }
#work .work-step:not(:last-child)::after { content: '↓'; position: absolute; left: 50%; bottom: -27px; transform: translateX(-50%); color: var(--color-secondary); font-size: 21px; line-height: 24px; }
#work .work-step-label { grid-column: 1 / -1; font: 600 12px/1.5 'Outfit',sans-serif; letter-spacing: .07em; color: var(--color-primary); }
#work .work-step img { width: 90px; height: auto; object-fit: contain; }
#work .work-step-title { font-size: 16px; line-height: 1.8; margin: 0; font-weight: 700; }
#work .work-step:last-child { border-color: #ffbc9c; background: #fffaf4; }
#work .work-roadmap-note { font-size: 12px; color: var(--color-text-secondary); margin-top: 20px; line-height: 1.9; }
#work .work-roadmap-cta { margin-top: 20px; font-size: 14px; min-height: 60px; gap: 6px; padding-inline: 10px; }
#work .work-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:359px) {
  #work .work-experience { padding-inline: 10px; }
  #work .work-choice-body { padding-inline: 7px; }
  #work .work-choice-title { font-size: 13px; }
  #work .work-step { grid-template-columns: 68px minmax(0,1fr); gap: 8px; padding-inline: 10px; }
  #work .work-step img { width: 68px; }
  #work .work-step-title { font-size: 15px; }
  #work .work-roadmap-cta { font-size: 12px; }
}

#work .work-choices legend>span { display: inline-block; white-space: nowrap; }

/* Small finishing adjustments within the established brand system. */
.problems-section .problems-conclusion { padding: 26px 20px; text-align: left; }
.problems-section .problems-conclusion p { font-size: 15px; font-weight: 500; line-height: 1.95; }
.problems-section .problems-conclusion strong { display: inline; white-space: normal; font-size: inherit; letter-spacing: 0; line-height: inherit; font-weight: 800; }
.problems-section .problems-conclusion strong::after { content: none; }
.career-conversation { margin-top: 28px; padding: 22px 18px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fffaf6; }
.career-conversation h3 { font-size: 20px; margin-bottom: 8px; }
.career-conversation dl { margin: 18px 0 0; }
.career-conversation dl>div { margin-top: 14px; }
.career-conversation dt { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 5px; }
.career-conversation dd { margin: 0; padding: 14px; border-radius: 16px; background: white; font-size: 14px; line-height: 1.9; }
.career-conversation .conversation-advisor { margin-left: 14px; }
.career-conversation .conversation-advisor dd { background: var(--color-accent); }
.field-hint { font-size: 12px; color: var(--color-text-secondary); line-height: 1.8; margin-top: 8px; }
.section-heading, .card h3 { overflow-wrap: anywhere; text-wrap: pretty; }
.faq-toggle { min-height: 44px; }
.faq-toggle .faq-sign { transition: color 180ms ease-out; }
.btn { transition: transform 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out; }
.btn:active { transform: translateY(1px) scale(.985); }
@media (hover: none) { .btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* WORK OPTIONS visual balance only; original PNG files remain unchanged. */
#work .work-choice-body { padding: 20px 10px 18px; gap: 12px; min-height: 184px; }
#work .work-visual { position: relative; display: block; flex-shrink: 0; overflow: hidden; width: clamp(72px, 24vw, 96px); height: clamp(72px, 24vw, 96px); margin-inline: auto; }
#work .work-visual>img { position: absolute; width: var(--asset-scale); max-width: none; height: auto; left: var(--asset-left); top: var(--asset-top); object-fit: contain; }
#work .work-choice-check { top: 7px; right: 7px; width: 20px; height: 20px; font-size: 12px; }
#work .work-step { display: flex; flex-direction: column; align-items: stretch; padding: 20px; gap: 12px; min-height: 180px; }
#work .work-step .work-visual { width: clamp(72px, 20vw, 96px); height: clamp(72px, 20vw, 96px); }
#work .work-step-label { align-self: flex-start; }
#work .work-step-title { text-align: center; font-size: 16px; line-height: 1.8; }
@media (min-width: 768px) {
  #work .work-choice-body { min-height: 200px; gap: 14px; }
  #work .work-choice-body .work-visual { width: 104px; height: 104px; }
  #work .work-step .work-visual { width: 96px; height: 96px; }
}
@media (min-width: 1200px) {
  #work .work-choice-body { min-height: 212px; gap: 16px; }
  #work .work-choice-body .work-visual { width: 112px; height: 112px; }
  #work .work-step .work-visual { width: 104px; height: 104px; }
}

/* Fit the visible artwork rather than the transparent canvas. Two-pixel safety margin. */
#work .work-visual-01 { --asset-scale: 210.52632%; --asset-left: -54.73684%; --asset-top: -55.00000%; }
#work .work-visual-02 { --asset-scale: 196.07843%; --asset-left: -48.03922%; --asset-top: -47.79412%; }
#work .work-visual-03 { --asset-scale: 202.02020%; --asset-left: -50.75758%; --asset-top: -51.01010%; }
#work .work-visual-04 { --asset-scale: 197.04433%; --asset-left: -48.27586%; --asset-top: -48.27586%; }
#work .work-visual-05 { --asset-scale: 228.57143%; --asset-left: -64.28571%; --asset-top: -64.28571%; }
#work .work-visual-06 { --asset-scale: 210.52632%; --asset-left: -54.93421%; --asset-top: -55.26316%; }
#work .work-visual-07 { --asset-scale: 217.68707%; --asset-left: -59.18367%; --asset-top: -58.50340%; }
#work .work-visual-08 { --asset-scale: 242.42424%; --asset-left: -71.21212%; --asset-top: -70.83333%; }

/* WORK OPTIONS roadmap copy: full descriptions, natural wrapping. */
#work .work-step-title { text-wrap: pretty; overflow-wrap: anywhere; }
#work .work-step-description { margin: 0; font-size: 14px; line-height: 1.9; text-align: left; color: var(--color-text-secondary); overflow-wrap: anywhere; }
#work .work-step { gap: 12px; }

/* ABOUT: consultation values, scoped to the three cards only. */
#about .about-values{margin-top:32px}
#about .about-values-heading{font-size:23px;line-height:1.65;text-wrap:pretty;overflow-wrap:anywhere}
#about .about-values-intro{margin-top:14px;line-height:1.95}
#about .about-values-grid{gap:16px;margin-top:24px}
#about .about-value-card .card-content{padding:22px}
#about .about-value-top{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:18px}
#about .about-value-image{display:block;width:112px;height:112px;padding:8px;flex-shrink:0;border-radius:50%;overflow:hidden}
#about .about-value-image img{width:100%;height:100%;object-fit:contain}
#about .about-value-top .number{margin:0;font-size:32px}
#about .about-value-card h4{margin:0 0 12px;font-size:19px;font-weight:800;line-height:1.65;letter-spacing:-.04em;text-wrap:pretty;overflow-wrap:anywhere}
#about .about-value-card p{font-size:15px;line-height:1.95;overflow-wrap:anywhere}
@media(min-width:1200px){#about .about-value-image{width:120px;height:120px}}

/* Conversation speaker icons only. */
#career .career-conversation dt{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#career .conversation-avatar{display:block;flex-shrink:0;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--color-surface)}
#career .conversation-avatar img{width:100%;height:100%;object-fit:contain}

/* CAREER DESIGN: empathy callout only. */
#career .career-empathy{padding:24px 18px}
#career .career-empathy h3{font-size:22px;line-height:1.65;text-wrap:pretty}
#career .career-empathy-lead{font-size:14px;margin-top:10px}
#career .career-empathy-list{list-style:none;margin:20px 0 0;padding:0 14px;background:var(--color-surface);border-radius:16px}
#career .career-empathy-list li{display:flex;align-items:flex-start;gap:10px;padding:16px 0;font-size:14px;line-height:1.95;overflow-wrap:anywhere}
#career .career-empathy-list li+li{border-top:1px solid var(--color-border)}
#career .career-empathy-check{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--color-accent);color:var(--color-primary);font-weight:800}
#career .career-empathy-list strong{display:block;margin:0;font-size:inherit;font-weight:800;color:var(--color-primary);text-wrap:balance}
#career .career-empathy-message{margin-top:26px;text-align:center;font-size:18px;font-weight:800;line-height:1.85;text-wrap:pretty}
#career .career-empathy-note{margin-top:14px;font-size:13px;line-height:1.95}
#career .career-empathy-cta{margin-top:22px;font-size:14px}
#career .career-empathy-trust{margin-top:10px;text-align:center;font-size:11px;line-height:1.8;color:var(--color-text-secondary)}

/* Final consultation: match first-view reassurance styling. */
#final-cta .hero-benefits { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
#final-cta .hero-benefits li { display: flex; align-items: center; gap: 10px; font-size:13px; font-weight: 500; line-height: 1.8; }
#final-cta .hero-benefits br { display: none; }
#final-cta .hero-benefit-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--color-accent); color: var(--color-primary);
  font: 500 21px 'Outfit', sans-serif;
}
#final-cta .hero-benefit-icon svg { width: 22px; height: 22px; }
@media(min-width:1200px){
  #final-cta .hero-benefits { grid-template-columns: .85fr 1.5fr 1fr; gap: 6px; }
  #final-cta .hero-benefits li { gap: 4px; padding: 9px 5px; background: #ffffffb3; border: 1px solid var(--color-border); border-radius: 999px; font-size:10px; }
  #final-cta .hero-benefits br { display: initial; }
  #final-cta .hero-benefit-icon { width: 20px; height: 20px; background: transparent; font-size:20px; }
  #final-cta .hero-benefit-icon svg { width: 18px; height: 18px; }
}
#final-cta .mascot{border-radius:0}

/* SUPPORT: benefit-led illustrated cards. */
#support .support-cards{gap:18px}
#support .support-card{padding:20px 18px}
#support .support-card-top{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:12px;margin-bottom:16px}
#support .support-illustration{width:110px;height:auto;object-fit:contain}
#support .support-card-heading{min-width:0}
#support .support-category{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:12px;font-weight:700;color:var(--color-primary);line-height:1.7}
#support .support-category .number{margin:0;font-size:26px}
#support .support-card h3{margin:0;font-size:18px;line-height:1.75;word-break:normal;overflow-wrap:break-word;line-break:strict;text-wrap:pretty}
#support .support-description{font-size:15px;line-height:1.95;word-break:normal;overflow-wrap:break-word;line-break:strict}
#support .support-detail{margin-top:16px;padding:10px 12px;border-radius:12px;background:var(--color-accent);font-size:13px;font-weight:700;line-height:1.85;color:var(--color-primary);word-break:normal;overflow-wrap:break-word;line-break:strict}
#support .support-closing{margin-top:26px;padding:22px 18px;border-radius:var(--radius);background:var(--color-accent);text-align:center}
#support .support-closing p{font-size:14px;line-height:1.9;word-break:normal;overflow-wrap:break-word;line-break:strict}
#support .support-closing p+p{margin-top:12px}
#support .support-closing strong{font-size:18px;line-height:1.85;text-wrap:pretty}
@media(max-width:430px){#support .support-card-top{grid-template-columns:1fr;gap:10px}#support .support-illustration{width:120px;justify-self:center}}

/* CONTACT form only. */
#application .contact-reassurance{list-style:none;padding:0;margin:22px 0 0;font-size:13px;line-height:1.85}
#application .contact-reassurance li{display:flex;gap:8px;align-items:flex-start;margin-top:7px}
#application .contact-reassurance li::before{content:'✓';color:var(--color-primary);font-weight:800;flex-shrink:0}
#application .field-hint{font-size:12px;line-height:1.85;margin-top:8px;color:var(--color-text-secondary)}
#application .form .btn{gap:6px;font-size:14px;line-height:1.8}
#application .form textarea{line-height:1.85}

/* Smartphone first view: independent from the desktop hero. */
.hero-mobile { display: none; }
@media (max-width: 767px) {
  #top.hero { padding: 24px 16px 32px; isolation: isolate; background: linear-gradient(155deg, #fffdf9 20%, #fff0e8 72%, #fffdf9); overflow: hidden; }
  #top > .section-label, #top > .hero-main, #top > .hero-cta, #top > .hero-benefits { display: none; }
  #top .hero-mobile { display: block; position: relative; }
  #top .hero-mobile::before { content: ""; position: absolute; width: 360px; height: 470px; right: -170px; top: 155px; border-radius: 60% 40% 50% 50%; transform: rotate(25deg); background: linear-gradient(145deg, #fff0e8, #ffd29c); z-index: -1; pointer-events: none; }
  #top .hero-mobile::after { content: ""; position: absolute; width: 210px; height: 210px; right: -95px; top: -115px; border-radius: 50%; background: #fff0e8; z-index: -1; pointer-events: none; }
  #top .hero-mobile-heading { margin: 0 0 16px; font-size: clamp(29px, 8.5vw, 36px); line-height: 1.5; font-weight: 900; letter-spacing: -.045em; }
  #top .hero-mobile-heading > span { display: block; white-space: nowrap; }
  #top .hero-mobile-heading em { color: var(--color-primary); font-style: normal; }
  #top .hero-mobile-heading small { font-size: .68em; }
  #top .hero-mobile-subcopy { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.8; }
  #top .hero-mobile-scene { position: relative; height: clamp(290px, 85vw, 365px); margin-top: 8px; }
  #top .hero-mobile-scene img { position: absolute; right: 0; bottom: 0; width: 64%; max-width: 240px; height: auto; object-fit: contain; }
  #top .hero-mobile-message { position: absolute; top: 75px; left: 0; z-index: 1; margin: 0; font-size: clamp(12px, 3.3vw, 14px); font-weight: 600; line-height: 1.9; transform: rotate(-6deg); }
  #top .hero-mobile-message strong { display: inline-block; color: var(--color-primary); font-size: 30px; border-bottom: 3px solid #ffd29c; line-height: 1.6; }
  #top .hero-mobile-button { display: flex; width: 100%; min-height: 64px; margin: 14px 0 0; padding: 15px 10px; gap: 7px; border-radius: 999px; font-size: clamp(13px, 3.7vw, 15px); line-height: 1.6; box-shadow: 0 7px 18px #f2380b26; }
  #top .hero-mobile-button > span:last-child { flex-shrink: 0; }
  #top .hero-mobile-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 20px 0 0; list-style: none; gap: 0; }
  #top .hero-mobile-benefits li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: clamp(10px, 2.8vw, 12px); font-weight: 700; line-height: 1.6; text-align: center; }
  #top .hero-mobile-benefits li + li { border-left: 1px solid var(--color-border); }
  #top .hero-mobile-benefit-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent); color: var(--color-primary); font-size: 27px; }
  #top .hero-mobile-benefit-icon svg { width: 25px; height: 25px; }
}
@media (max-width: 359px) {
  #top .hero-mobile-button .hero-cta-icon { display: none; }
}

/* One-time entrance for the smartphone FV mascot only. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  #top .hero-mobile-scene img {
    transform-origin: center bottom;
    animation: thinkChanMobilePop .8s .2s cubic-bezier(.22, .61, .36, 1) 1 backwards;
  }
  @keyframes thinkChanMobilePop {
    0% { opacity: 0; transform: translateY(60px) scale(.9); }
    65% { opacity: 1; transform: translateY(-12px) scale(1.03); }
    85% { opacity: 1; transform: translateY(5px) scale(.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* Japanese text flow on phones/tablets; desktop typography is unchanged. */
@media (max-width: 1199px) {
  main .section :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,.btn,.field-label),
  .mobile-nav a, .footer p, dialog p {
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
  }
  main .section :is(h2,h3,h4,h5,h6),
  #about .about-values-heading, #about .about-value-card h4,
  #career .career-empathy h3, #support .support-card h3,
  #work .work-step-title {
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  main .section :is(p,li,dd), #about .about-value-card p,
  #work .work-step-description, #support .support-description {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  #career .career-empathy-list li > span:last-child,
  main .faq-toggle > span:nth-child(2), #work .work-step-title {
    min-width: 0;
  }
  #career .career-empathy-list li > span:last-child,
  #career .career-empathy-message { text-wrap: balance; }
  #career .career-empathy-list strong {
    display: inline;
    text-wrap: inherit;
  }
  #career .career-empathy-list { padding-inline: 12px; }
  #career .career-empathy-list li { gap: 8px; }
  #problems .problems-card p br,
  #problems > p br,
  #career > p br,
  #career .career-empathy-message br,
  #community .community-card h3 br,
  #application > p.center br { display: none; }
  #about > .section-heading br,
  #career > .section-heading br,
  #community > .section-heading br,
  #work > .section-heading br { display: none; }
}

/* Desktop header CTA only; preserve the existing header dimensions. */
@media (min-width: 1200px) {
  .header .header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 10px 22px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 800;
    line-height: 1.5;
    transition: background-color .2s, transform .2s, box-shadow .2s;
  }
  .header .header-cta:hover {
    background: #d93209;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #f2380b26;
  }
  .header .header-cta:focus-visible { outline-offset: 4px; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .header .header-cta { transition: none; }
  .header .header-cta:hover { transform: none; }
}

/* Keep short semantic units intact, without locking whole sentences. */
@media (max-width: 1199px) {
  main .text-unit { white-space: nowrap; }
  main :is(h2,h3,h4) { word-break: normal; line-break: strict; }
}