@charset "UTF-8";

/* ============================================================
   1. Design Tokens
   ------------------------------------------------------------
   Figmaデザイン基準: 1440px / SP想定: 375px
   clamp(): clamp(SP最小値, [基準viewportでの理想値 = vw換算], PC最大値)
   ============================================================ */
:root {
  /* Colors */
  --color-text:        #102838;
  --color-text-sub:    #333333;
  --color-text-mute:   #666666;
  --color-bg:          #ffffff;
  --color-bg-light:    #f5f5f7;
  --color-bg-blue:     #005bab;
  --color-accent:      #fff228;
  --color-border:      #000000;
  --color-border-soft: #e5e5e5;

  /* Typography */
  --font-jp: 'IBM Plex Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --font-mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* Layout */
  --max-width:     1440px;
  --content-width: 1200px;
  --side-padding:  clamp(20px, 2.43vw, 35px);

  /* Spacing scale (clamp: SP min / PC base vw / PC max) */
  --space-xs:  clamp(4px,  0.555vw, 8px);
  --space-s:   clamp(8px,  1.111vw, 16px);
  --space-m:   clamp(16px, 1.667vw, 24px);
  --space-l:   clamp(24px, 2.778vw, 40px);
  --space-xl:  clamp(32px, 4.444vw, 64px);
  --space-2xl: clamp(48px, 6.667vw, 96px);
  --space-3xl: clamp(64px, 8.889vw, 128px);

  /* Font sizes (clamp: SP min / vw / PC max) */
  --text-xs:      clamp(11px, 0.83vw, 12px);   /* note, source, copyright */
  --text-sm:      clamp(12px, 0.97vw, 14px);   /* small */
  --text-base:    clamp(13px, 1.11vw, 16px);   /* body, ナビ, タグ, ボタンsub */
  --text-md:      clamp(14px, 1.25vw, 18px);   /* 説明文, lead text */
  --text-lg:      clamp(15px, 1.39vw, 20px);   /* DIN英字, 中見出し */
  --text-xl:      clamp(16px, 1.53vw, 22px);   /* バナー大文字, chart-num */
  --text-2xl:     clamp(18px, 1.67vw, 24px);   /* 見出し, btn-main */
  --text-3xl:     clamp(20px, 2.22vw, 32px);   /* イントロリード, 中見出し */
  --text-4xl:     clamp(22px, 2.78vw, 40px);   /* 強調数字 */
  --text-5xl:     clamp(28px, 3.75vw, 54px);   /* セクション大見出し */
  --text-display: clamp(36px, 4.44vw, 64px);   /* メインタイトル */

  /* Radius */
  --radius-s:    8px;
  --radius-m:    16px;
  --radius-l:    24px;
  --radius-pill: 9999px;

  /* Z-index */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;

  /* Transition */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.3s;
}

/* ============================================================
   2. Reset / Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ============================================================
   3. Layout (Common)
   ============================================================ */
   
.l-container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: clamp(16px, 5.5vw, 80px);
}

.l-section {
  padding-block: var(--space-3xl);
}

.l-section--blue {
  background: var(--color-bg-blue);
  color: var(--color-bg);
}

.l-section--light {
  background: var(--color-bg-light);
}

/* ============================================================
   4. Components
   ============================================================ */

/* --- Section title (DINの英字大見出しは画像で実装) --- */
.c-section-title {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.c-section-title__en {
  display: block;
  margin-inline: auto;
  width: fit-content;
  /* DIN英字見出し画像の高さ基準 */
  height: clamp(48px, 5vw, 72px);
}

.c-section-title__en img {
  height: 100%;
  width: auto;
}

.c-section-title__ja {
  display: block;
  margin-top: var(--space-m);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: 0.04em;
}

/* --- Buttons --- */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: clamp(14px, 1.25vw, 18px) clamp(32px, 3.55vw, 51px);
  border-radius: var(--radius-pill);
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  transition: transform var(--duration) var(--ease),
              opacity var(--duration) var(--ease),
              background var(--duration) var(--ease);
  cursor: pointer;
}

.c-button:hover,
.c-button:focus-visible {
  transform: translateY(-2px);
  opacity: 0.9;
}

.c-button--primary {
  background: var(--color-accent);
  color: var(--color-text-sub);
  border: 2px solid var(--color-text-sub);
}

.c-button--outline {
  background: transparent;
  color: var(--color-bg-blue);
  border: 2px solid var(--color-bg-blue);
}

.c-button--block {
  display: flex;
  width: 100%;
}

/* --- Card --- */
.c-card {
  background: var(--color-bg);
  border-radius: var(--radius-m);
  padding: var(--space-l);
  box-shadow: 0 2px 8px rgba(16, 40, 56, 0.06);
}

.c-card--flat {
  box-shadow: none;
  border: 1px solid var(--color-border-soft);
}

/* --- Lead text --- */
.c-lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   5. Header
   ============================================================ */
.l-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background: var(--color-bg);
  border-bottom: 1px solid #eee;
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2.36vw, 34px);
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: clamp(12px, 1.389vw, 20px) clamp(20px, 2.43vw, 35px);
}

.l-header__logo {
  display: block;
  width: clamp(140px, 14.2vw, 204px);
  height: clamp(28px, 2.78vw, 40px);
  flex-shrink: 0;
}

.l-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.l-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4.72vw, 68px);
  flex: 1;
  justify-content: flex-end;
}

.l-header__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.736vw, 25px);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--color-text-sub);
  letter-spacing: 0.03em;
}

.l-header__nav-list a {
  display: inline-block;
  padding-block: 4px;
  transition: opacity var(--duration) var(--ease);
}

.l-header__nav-list a:hover {
  opacity: 0.6;
}

.l-header__cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.l-header__cta .c-button {
  padding-block: clamp(8px, 0.83vw, 12px);
  padding-inline: clamp(20px, 2.78vw, 40px);
  font-size: var(--text-sm);
}

/* Hamburger (SPのみ表示) */
.l-header__hamburger {
  display: none;
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.l-header__hamburger span {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--duration) var(--ease),
              opacity var(--duration) var(--ease),
              top var(--duration) var(--ease);
}

.l-header__hamburger span:nth-child(1) { top: 9px; }
.l-header__hamburger span:nth-child(2) { top: 15px; }
.l-header__hamburger span:nth-child(3) { top: 21px; }

.l-header__hamburger.is-active span:nth-child(1) {
  top: 15px;
  transform: rotate(45deg);
}

.l-header__hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.l-header__hamburger.is-active span:nth-child(3) {
  top: 15px;
  transform: rotate(-45deg);
}

/* ============================================================
   6. Footer
   ============================================================ */
.l-footer {
  background: var(--color-text);
  color: var(--color-bg);
  padding-block: var(--space-l);
}

.l-footer__inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--side-padding);
  text-align: center;
}

.l-footer__copyright {
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
}

/* ============================================================
   FV (First View)
   ============================================================ */
.fv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  width: 100%;
  padding-block: 100px 150px;
  background-color: var(--color-bg-light);
  background-image: url('../images/fv_bg_img.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  overflow: hidden;
}

.fv__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 60px);
}

.fv__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(16px, 1.8vw, 26px);
}

.fv__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  color: var(--color-text-sub);
}

.fv__lead-text {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: var(--text-md);
}

.fv__lead-em {
  color: var(--color-bg-blue);
  font-size: var(--text-lg);
}

.fv__lead-line {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: clamp(240px, 31.5vw, 500px);
  height: clamp(10px, 0.83vw, 11px);
}

.fv__lead-line__bar {
  flex: 1 1 0;
  height: 1px;
  background: var(--color-text-sub);
}

.fv__lead-line__bar:first-child { flex-grow: 213; }
.fv__lead-line__bar:last-child  { flex-grow: 200; }

.fv__lead-line__notch {
  position: relative;
  flex: 0 0 13px;
  height: 100%;
}

.fv__lead-line__notch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--color-text-sub);
}

.fv__lead-line__notch::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16.5px;
  height: 1px;
  background: var(--color-text-sub);
  transform-origin: left bottom;
  transform: rotate(-37.5deg);
}

.fv__title {
  font-family: var(--font-jp);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.fv__title-line {
  display: block;
}

.fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fv__tag {
  background: #fff;
  color: var(--color-bg-blue);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  padding: clamp(6px, 0.55vw, 8px) clamp(12px, 1.25vw, 18px);
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.fv__badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  width: clamp(110px, 11.04vw, 159px);
}

.fv__badge-img {
  width: 100%;
  max-width: 110px;
  aspect-ratio: 1;
  display: block;
}

.fv__badge-product {
  width: 100%;
  height: auto;
}

.fv__badge-note {
  font-family: var(--font-jp);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  color: var(--color-text);
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 30px;
}

/* ============================================================
   Problem (統計)
   ============================================================ */
.problem {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: var(--color-bg-light);
  padding-block: var(--space-3xl);
}

.problem .l-container {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.17vw, 60px);
}

.problem__heading_group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1000px;
  text-align: center;
  margin: 0 auto;
}

.problem__heading_group h2{
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: 1.5; 
  color: var(--color-text);
}

.problem__heading_group p{
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-text);
}

.problem__case {
  display: flex;
  flex-direction: row;
  max-width: 1000px;
  margin: 0 auto;
  gap: 14px;
}

.problem__card-image {
  flex: 0 1 auto;
  width: min(29.86vw, 430px);
}

.problem__card-image img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  margin-bottom: 24px;
}

.problem__card-image h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: 8px;
}

.problem__card-image p {
  font-size: var(--text-sm);
}

/* --- 前半: メッセージ + 黄色バナー(テキスト + 円グラフ) --- */
.problem__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.2vw, 20px);
  width: 100%;
}

.problem__intro-lead {
  width: 100%;
  max-width: min(100%, 1000px);
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: normal;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-align: left;
}

.problem__banner-text-area {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.83vw, 12px);
  flex: 1 1 auto;
  min-width: 0;
}

.problem__banner-em {
  color: var(--color-bg-blue);
}

.problem__chart {
  position: absolute;
  top: 0;
  right: min(2.78vw, 40px);
  transform: translateY(-38%);
  width: min(20.14vw, 290px);
  aspect-ratio: 1;
}

.problem__chart canvas {
  width: 100% !important;
  height: 100% !important;
}

.problem__chart-center {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  top: 8%;
  right: 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.3vw, 4px);
  text-align: center;
  color: #fff;
}

.problem__chart-icon {
  width: clamp(36px, 4vw, 64px);
  height: auto;
}


.problem__chart-num {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: inherit;
  line-height: 1;
}

.problem__chart-num span {
  font-size: var(--text-lg);
}

.problem__chart-label {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: 1.4;
  color: inherit;
}

.problem__banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(14.93vw, 215px);
  background: url("../images/problem__banner_bg.png");
  border-radius: 10px;
  padding-block: min(2.22vw, 32px);
  padding-left: min(3.3vw, 48px);
  padding-right: min(22.92vw, 330px);
  width: 100%;
  max-width: min(100%, 1000px);
}

.problem__banner-text {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.problem__banner-source {
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: 1.75;
  color: var(--color-text);
}

.problem__banner-text-strong {
  margin-top: 8px;
}

.problem__banner-text-strong .marker{
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  letter-spacing: 0.08em;
  background: linear-gradient(transparent 50%, #fff228 50%);
}



.problem__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.22vw, 32px);
  width: 100%;
  border-top: 1px dashed #6c6c6c;
  padding-top: clamp(40px, 4.17vw, 60px);
}

.problem__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3.6vw, 52px);
  width: 100%;
  max-width: min(100%, 1000px);
}

.problem__row--reverse {
  flex-direction: row-reverse;
}

.problem__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
  color: var(--color-text);
}

.problem__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.problem__heading-en {
  width: auto;
  height: clamp(15px, 1.1vw, 18px);
  display: block;
}

.problem__heading-ja {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.problem__desc {
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-text);
}

.problem__source {
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: 1.75;
  color: var(--color-text);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.problem__row--reverse .problem__source {
  font-size: var(--text-sm);
}

.problem__visual {
  flex: 1 1 0;
  min-width: 0;
}

.problem__visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   SOLUTION (N-NOSEが解決)
   ============================================================ */
 .solution {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #edf5fd;
  padding-block: var(--space-3xl);
}

.solution .l-container {
  display: flex;
  justify-content: center;
}

.solution__inner {
  display: flex;
  flex-direction: column;
  gap: min(4.31vw, 62px);
  width: 100%;
  max-width: min(100%, 1000px);
}

.solution .stage0__logo-blue {
  display: block;
  width: clamp(180px, 20vw, 291px);
  aspect-ratio: 204.395 / 40;
  height: auto;
}

.solution__heading_group {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.solution__list {
  display: flex;
  flex-direction: row;
  gap: 80px;
  width: 100%;
}

.solution__title {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold, 600);
  font-size: var(--text-5xl);
  letter-spacing: 0.08em;
  line-height: 1.35;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
}

.solution__read {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: 1.5; 
  color: var(--color-text);
  text-align: center;
}

.solution__read span{
  color: var(--color-bg-blue);
}

.solution__package {
  text-align: center;
}

.solution__package img {
  display: inline;
}

.solution__card {
  display: flex;
  align-items: start;
  gap: min(3.54vw, 51px);
  width: 50%;
  flex-direction: column;
}

.solution__card--reverse {
  flex-direction: row-reverse;
}

.solution__card-image {
  flex: 0 0 auto;
  width: min(31.18vw, 449px);
}

.solution__card-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  aspect-ratio: 449 / 281;
  object-fit: cover;
}

.solution__card-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: min(0.55vw, 8px);
}

.solution__card-no {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  color: var(--color-bg-blue);
  background-color: #fff;
  line-height: 1.5;
  text-align: center;
  width: 136px;
  border-radius: 24px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: clamp(6px, 0.55vw, 8px) clamp(12px, 1.25vw, 18px);
  margin-bottom: 16px;
}

.solution__card-title {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  letter-spacing: 0.1em;
  color: var(--color-text);
  line-height: 1.5;
}

.solution__card-desc {
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
}


/* ============================================================
   About (N-NOSE紹介・青背景)
   ============================================================ */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--color-bg-blue);
  background-image: url('../images/bg-about.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-block: var(--space-3xl);
  color: #fff;
}

.about .l-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(4.44vw, 64px);
}

.about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(4.44vw, 64px);
  width: 100%;
}

/* --- 上段: 製品 + 見出し --- */
.about__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(4vw, 60px);
  width: 100%;
  max-width: min(100%, 1100px);
}

.about__product {
  /* flex: 1 1 0; */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__product img {
  width: 480px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
}

.about__heading {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: min(0.83vw, 12px);
}

.about__intro {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: 1.75;
  letter-spacing: 0.08em;
  margin-inline-start: min(0.55vw, 8px);
}

.about__brand {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  line-height: 1.35;
  letter-spacing: 0.08em;
  margin-inline-start: min(0.55vw, 8px);
}

.about__brand-mark {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: inherit;
  margin-inline-start: 0.1em;
}

.about__title {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  line-height: 1.35;
  letter-spacing: 0.08em;
}

.about__title-line {
  display: block;
}

.about__title-em {
  color: var(--color-accent);
  font-style: normal;
}

.about__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(0.97vw, 14px);
  margin-top: min(1.11vw, 16px);
}

.about__tag {
  background: #fff;
  color: var(--color-text);
  width: fit-content;
  height: min(2.85vw, 41px);
  padding-inline: min(0.76vw, 11px);
  display: flex;
  align-items: center;
  border-radius: 4px;
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.about__tag-em {
  color: var(--color-bg-blue);
  font-style: normal;
}

/* --- 中段: 3つの統計 + 注釈 --- */
.about__stats-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(0.27vw, 4px);
  width: 100%;
}

.about__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(2vw, 28px);
  width: 100%;
  flex-wrap: nowrap;
}

.about__stat {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__stat img {
  width: auto;
  height: clamp(80px, 9vw, 130px);
  display: block;
}

.about__note {
  width: 100%;
  text-align: right;
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: 1.5;
}

/* --- 下段: アイコン --- */

.about__icon-title {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-bg);
  text-align: center;
  margin-bottom: 40px;
}

.about_icon-img {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:22px;
}

.about_icon-img span:nth-of-type(1),.about_icon-img span:nth-of-type(3) {
  width: 160px;
  height: auto;
}

.about_icon-img span:nth-of-type(2) {
  width: 56px;
  height: auto;
}

/* ============================================================
   REASON (選ばれる理由)
   ============================================================ */
.reason {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #edf5fd;
  padding-block: var(--space-3xl);
}

.reason .l-container {
  display: flex;
  justify-content: center;
}

.reason__inner {
  display: flex;
  flex-direction: column;
  gap: min(4.31vw, 62px);
  width: 100%;
  max-width: min(100%, 1000px);
}

.reason__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: min(2vw, 32px);
  width: 100%;
}

.reason__heading-en {
  display: block;
  height: clamp(36px, 3.6vw, 52px);
  width: auto;
}

.reason__heading-ja {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: min(0.42vw, 6px);
  text-align: right;
}

.reason__heading-ja-sub {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  letter-spacing: 0.08em;
  color: var(--color-text);
  line-height: 1.35;
}

.reason__heading-ja-main {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  letter-spacing: 0.1em;
  color: var(--color-bg-blue);
  line-height: 1.35;
}

/* List */
.reason__list {
  display: flex;
  flex-direction: column;
  gap: min(2.78vw, 40px);
  width: 100%;
}

/* Card */
.reason__card {
  display: flex;
  align-items: center;
  gap: min(3.54vw, 51px);
  background: #fff;
  border-radius: 20px;
  padding-block: min(2.43vw, 35px);
  padding-inline: min(3.61vw, 52px);
  width: 100%;
}

.reason__card--reverse {
  flex-direction: row-reverse;
}

.reason__card-image {
  flex: 0 0 auto;
  width: min(31.18vw, 449px);
}

.reason__card-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  aspect-ratio: 449 / 281;
  object-fit: cover;
}

.reason__card-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: min(0.55vw, 8px);
}

.reason__card-no {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  color: var(--color-bg-blue);
  line-height: 1.5;
}

.reason__card-title {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  letter-spacing: 0.1em;
  color: var(--color-text);
  line-height: 1.5;
}

.reason__card-desc {
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
}

.reason__card-source {
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: 1.75;
  color: var(--color-text);
}

.reason__card-source-link {
  text-decoration: underline;
}

.reason__card-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-blue);
  color: #fff;
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: 0.04em;
  padding-block: clamp(12px, 1.25vw, 16px);
  padding-inline: clamp(24px, 2.5vw, 36px);
  border-radius: 6px;
  text-decoration: none;
  margin-top: min(0.42vw, 6px);
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.reason__card-cta:hover,
.reason__card-cta:focus-visible {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Chart (REASON.02) */
.reason__chart {
  flex: 0 0 auto;
  position: relative;
  width: min(31.18vw, 449px);
  aspect-ratio: 449 / 281;
  background: #edf5fd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: min(1.39vw, 20px);
}

.reason__chart-title {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: 1.35;
  color: var(--color-bg-blue);
  letter-spacing: 0.04em;
}

.reason__chart-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-25%, -45%);
  width: min(16.87vw, 243px);
  aspect-ratio: 1;
}

.reason__chart-image img {
  width: 100%;
  height: 100%;
  display: block;
}

.reason__chart-caption {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  letter-spacing: 0.04em;
}

/* ============================================================
   Logos (導入企業)
   ============================================================ */

   .logos {
    position: absolute;
    z-index: 3;
    bottom: 40px;
  }
  
  .logos__inner {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
  }
  
  .logos__track {
    display: flex;
    align-items: center;
    height: clamp(60px, 4.86vw, 70px);
    padding: 0 clamp(20px, 2.78vw, 40px);
    background: #fff;
    border-radius: 200px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
  }
  
  .logos__list {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
    animation: logos-scroll 30s linear infinite;
  }
  
  .logos__item{
    flex-shrink: 0;
    width: clamp(120px, 11.8vw, 170px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
  }
  
  .logos__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  @keyframes logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
  }

/* ============================================================
   CTA Banner
   ============================================================ */
.cta-banner {
  background: #102838;
  padding-block: var(--space-l);
  color: #fff;
}

.cta-banner__inner {
  width: fit-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.cta-banner__top-text {
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  font-weight: var(--weight-regular);
  white-space: nowrap;
}

.cta-banner__btn {
  width: 100%;
  background: var(--color-accent);
  color: var(--color-text-sub);
  border: 2px solid #fff;
  border-radius: 110px;
  padding-block: clamp(14px, 1.39vw, 20px);
  padding-inline: clamp(28px, 3.5vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.39vw, 20px);
  text-align: center;
  text-decoration: none;
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.cta-banner__btn:hover,
.cta-banner__btn:focus-visible {
  transform: translateY(-2px);
  opacity: 0.95;
}

.cta-banner__btn-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-jp);
  color: var(--color-text-sub);
}

.cta-banner__btn-sub {
  font-size: var(--text-lg);
  letter-spacing: 0.06em;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.cta-banner__btn-main {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.cta-banner__btn-thumb {
  width: clamp(48px, 4.3vw, 62px);
  aspect-ratio: 62 / 46;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  object-fit: cover;
}

.cta-banner__note {
  width: 100%;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: #fff;
  text-align: center;
}

/* ============================================================
   VOICE
   ============================================================ */
.voice {
  background: var(--color-bg-light);
  padding-block: var(--space-3xl);
  overflow: hidden;
}

.voice__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}

.voice__heading-en {
  display: block;
  height: clamp(36px, 3.6vw, 52px);
  width: auto;
  flex-shrink: 0;
}

.voice__heading-ja {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  letter-spacing: 0.1em;
  line-height: 1.35;
  color: var(--color-text);
  text-align: right;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.voice__heading-em {
  color: var(--color-bg-blue);
  font-style: normal;
}

.voice__slider {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.voice__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-l);
  align-items: stretch;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}

.voice__card {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(0deg, rgba(16, 40, 56, 0.025) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(16, 40, 56, 0.025) 0 1px, transparent 1px 24px);
  border-radius: 10px;
  padding: var(--space-l);
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
  align-items: flex-start;
  flex: 0 0 clamp(560px, 53vw, 760px);
}

.voice__media {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  width: clamp(280px, 25vw, 360px);
}

.voice__photo {
  width: 100%;
  aspect-ratio: 280 / 203;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.voice__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: var(--text-xs);
  font-family: var(--font-jp);
  color: var(--color-text);
  line-height: 1.75;
  white-space: nowrap;
}

.voice__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  color: var(--color-text);
}

.voice__title {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: 1.5;
  margin: 0;
}

.voice__desc {
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: 1.75;
  margin: 0;
}

.voice__nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.voice__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: clamp(40px, 3.6vw, 52px);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  border: 0;
  background: var(--color-bg-blue);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              background var(--duration) var(--ease);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.voice__nav-btn--prev {
  left: calc(50% - clamp(280px, 26.5vw, 380px) - var(--space-s));
}
.voice__nav-btn--next {
  right: calc(50% - clamp(280px, 26.5vw, 380px) - var(--space-s));
}

.voice__nav-btn:hover,
.voice__nav-btn:focus-visible {
  transform: translateY(-50%) scale(1.08);
  opacity: 0.95;
}

.voice__nav-btn span {
  width: 30%;
  height: 30%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  display: block;
}

.voice__nav-btn--prev span {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.voice__nav-btn--next span {
  transform: rotate(45deg);
  margin-right: 4px;
}

/* ============================================================
   Stage 0 (ステージ0~Iの早期がんリスクを判定)
   - Pinned scroll-jack: sticky bg + overlay/blur + 横スクロール
   ============================================================ */
.stage0 {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color: #fff;
  min-height: 250vh;
}

.stage0__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.stage0__bg-layer {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-bg-blue) url('../images/bg-stage.jpg') center / cover no-repeat;
  will-change: filter;
  transition: filter 60ms linear;
}

.stage0__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 91, 171, 0.2);
  will-change: background;
  transition: background 60ms linear;
}

.stage0__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  overflow: hidden;
}

.stage0__heading-wrap {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(16px, 5.5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.stage0__viewport {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  align-self: center;
}

.stage0__title-line--brand {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

.stage0__title-line--brand::after {
  content: '';
  position: absolute;
  left: 30%;
  top: 80%;
  transform: translateY(-50%);
  width: clamp(200px, 15vw, 320px);
  aspect-ratio: 861 / 704;
  background: url('../images/product02.png') center / contain no-repeat;
}

.stage0__logo {
  display: block;
  width: clamp(180px, 20vw, 291px);
  aspect-ratio: 204.395 / 40;
  height: auto;
  filter: brightness(0) invert(1);
}

.stage0__de {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1;
}


.stage0__title {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  letter-spacing: 0.08em;
  line-height: 1.35;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.stage0__title-em {
  color: var(--color-accent);
  font-style: normal;
}

.stage0__desc {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  line-height: 1.75;
  margin: 0;
}

.stage0__list {
  display: flex;
  flex-direction: row;
  gap: var(--space-l);
  width: max-content;
  will-change: transform;
}

.stage0__card {
  flex: 0 0 clamp(400px, 72vw, 900px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.stage0__card-img {
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #fff;
  display: block;
}

.stage0__card-label {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: 0.05em;
  margin: 0;
  text-align: center;
}

/* ============================================================
   Evidence (技術力・論文)
   ============================================================ */
.evidence {
  background: #102838;
  padding-block: var(--space-3xl);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.evidence__bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.18;
  pointer-events: none;
  overflow: hidden;
}

.evidence__row {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

.evidence__track {
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: evidence-scroll 12s linear infinite;
}

.evidence__row--reverse .evidence__track {
  animation-direction: reverse;
}

.evidence__set {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 100%;
}

.evidence__set li {
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.evidence__set img {
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
}

@keyframes evidence-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.evidence__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.evidence__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.evidence__tag {
  font-family: var(--font-jp);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  letter-spacing: 0.1em;
  margin: 0;
  color: #fff;
}

.evidence__title {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold, 600);
  font-size: var(--text-5xl);
  letter-spacing: 0.08em;
  line-height: 1.35;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.evidence__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 900px;
}

.evidence__co {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 0;
}

.evidence__desc {
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: 1.75;
  margin: 0;
}

.evidence__paper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: 1.5;
  margin-top: var(--space-s);
}

.evidence__paper p {
  margin: 0;
}

.evidence__paper a {
  color: #fff;
  text-decoration: underline;
}

/* ============================================================
   MESSAGE (代表メッセージ)
   ============================================================ */
.message {
  background-color: var(--color-bg-blue);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 24px);
  padding-block: var(--space-3xl);
  color: #fff;
}

.message__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.message__heading-en {
  display: block;
  height: clamp(36px, 3.6vw, 52px);
  width: auto;
  flex-shrink: 0;
}

.message__heading-ja {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  letter-spacing: 0.1em;
  margin: 0;
  text-align: right;
}

.message__inner {
  display: flex;
  gap: var(--space-l);
  align-items: flex-end;
}

.message__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: 2.4;
}

.message__text p {
  margin: 0;
}

.message__profile {
  flex: 0 0 auto;
  margin: 0;
  width: min(28vw, 398px);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.message__profile figcaption {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 0;
  text-align: right;
}

.message__profile figcaption span {
  font-size: var(--text-3xl);
}

.message__photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin-bottom: 40px;
}


/* ============================================================
   FLOW (導入の流れ)
   ============================================================ */
.flow {
  background: var(--color-bg-light);
  padding-block: var(--space-3xl);
}

.flow__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-l);
}

.flow__heading-en {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: 0.12em;
  color: var(--color-bg-blue);
  margin: 0;
  line-height: 1.2;
}

.flow__heading-ja {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin: 0;
}

.flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
}

.flow__step {
  background: #fff;
  border-radius: 10px;
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flow__step-no {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold, 600);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  color: var(--color-text);
  opacity: 0.5;
  margin: 0;
  line-height: 1.75;
}

.flow__step-img {
  background: #edf5fd;
  border-radius: 10px;
  margin-bottom: 10px;
  padding-block: var(--space-xl);
  text-align: center;
}

.flow__step-img img {
  width: 80px;
  height: auto;
  display: inline;
  vertical-align: text-top;
}

.flow__step-title {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold, 600);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  color: var(--color-bg-blue);
  margin: 0;
  line-height: 1.75;
}

.flow__step-desc {
  font-family: var(--font-jp);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}

/* ============================================================
   FAQ (よくある質問)
   ============================================================ */
.faq {
  background: #edf5fd;
  padding-block: var(--space-3xl);
}

.faq__layout {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.5fr);
  gap: var(--space-l);
  align-items: start;
}

.faq__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq__heading-en {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: 0.12em;
  color: var(--color-bg-blue);
  margin: 0;
  line-height: 1.2;
}

.faq__heading-ja {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin: 0;
}

.faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.faq__item {
  padding-block: var(--space-s);
}

.faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: 4px;
}

.faq__mark {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.35;
  color: var(--color-bg-blue);
  flex-shrink: 0;
}

.faq__q-text {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold, 600);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--color-bg-blue);
  margin: 0;
}

.faq__a {
  font-family: var(--font-jp);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}

/* ============================================================
   Contact (お問い合わせ)
   ============================================================ */
.contact {
  background: var(--color-bg-blue);
  padding-block: var(--space-3xl);
  color: #fff;
}

.contact__layout {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.5fr);
  gap: var(--space-l);
  align-items: start;
}

.contact__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.contact__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact__heading-en {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: 0.12em;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.contact__heading-ja {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0;
}

.contact__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.contact__brand-row {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.contact__brand-logo {
  width: clamp(180px, 20vw, 291px);
  aspect-ratio: 204.395 / 40;
  height: auto;
  filter: brightness(0) invert(1);
}

.contact__brand-mark {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  color: #fff;
  line-height: 1;
}

.contact__brand-message {
  font-family: var(--font-jp);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  letter-spacing: 0.08em;
  line-height: 1.35;
  color: #fff;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.contact__brand-message em {
  color: var(--color-accent);
  font-style: normal;
}

.contact__note {
  font-family: var(--font-jp);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: 1.6;
  color: #fff;
  margin: 0;
}

.contact__form {
  width: 100%;
}

.contact__form iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
  border-radius: 8px;
}

/* ============================================================
   Footer
   ------------------------------------------------------------
   既存定義: 上部に既にあるが、トーン調整
   ============================================================ */

/* ============================================================
   Utility: SP-only line break
   ============================================================ */
.u-sp-br {
  display: none;
}

.u-pc-br {
  display: inline;
}

/* ============================================================
   Floating CTA (SP only)
   ============================================================ */
.floating-cta {
  display: none;
}
@media (max-width: 768px) {
  .floating-cta {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 90;
    width: 96px;
    height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--color-accent);
    color: var(--color-text);
    font-family: var(--font-jp);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
    text-align: center;
    line-height: 1.2;
  }
  .floating-cta__sub,
  .floating-cta__main {
    font-size: 13px;
  }
  .floating-cta__arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: 8px;
  }
  .floating-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ============================================================
   7. Responsive (SP: ~768px)
   ------------------------------------------------------------
   Phase 6 で各セクションのSP展開を調整。
   ============================================================ */
@media (max-width: 768px) {
  /* Header */
  .l-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-l);
    background: var(--color-bg);
    transform: translateX(100%);
    transition: transform var(--duration) var(--ease);
    padding-block: var(--space-3xl);
    overflow-y: auto;
  }

  .l-header__nav.is-open {
    transform: translateX(0);
  }

  .l-header__nav-list {
    flex-direction: column;
    gap: var(--space-l);
    font-size: var(--text-md);
  }

  .l-header__cta {
    flex-direction: column;
    width: min(80%, 320px);
  }

  .l-header__cta .c-button {
    width: 100%;
  }

  .l-header__hamburger {
    display: block;
    z-index: calc(var(--z-header) + 10);
    position: relative;
    margin-left: auto;
  }

  /* ---------- Common ---------- */
  .l-container {
    padding-inline: clamp(16px, 5.5vw, 24px);
  }

  /* ---------- FV ---------- */
  .fv {
    /* padding-bottom: clamp(80px, 22vw, 120px); */
    padding-block: 40px 180px;
    background-image: url('../images/fv_bg_img_sp.jpg');
  }
  .fv__inner {
    flex-direction: column;
    align-items: center;
    gap: 80px;
    text-align: center;
  }
  .fv__content {
    align-items: center;
    gap: 8px;
  }
  .fv__lead {
    align-items: center;
    width: 25em;
  }
  .fv__lead-text {
    font-size: var(--text-sm);
  }
  .fv__lead-em {
    font-size: var(--text-base);
  }
  .fv__lead-line {
    max-width: 100%;
  }
  .fv__title {
    font-size: clamp(32px, 10vw, 40px);
    letter-spacing: 0.02em;
    text-align: center;
  }
  .fv__title-line {
    white-space: nowrap;
  }
  .fv__tags {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
  }
  .fv__tag {
    flex: 0 0 auto;
    text-align: center;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    padding: 6px 10px;
    white-space: nowrap;
  }
  .fv__badge {
    align-self: flex-end;
    width: clamp(72px, 20vw, 96px);
  }

  .fv__badge-note {
    color: var(--color-bg);
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
  }

  /* ---------- Logo ---------- */

  .logos {
    bottom: -1px;
  }

  /* ---------- CTA Banner ---------- */
  .cta-banner__inner {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--space-m);
  }
  .cta-banner__btn {
    flex-wrap: nowrap;
    gap: 12px;
  }
  .cta-banner__btn-text {
    flex: 1 1 0;
    min-width: 0;
  }
  .cta-banner__btn-sub,
  .cta-banner__btn-main {
    white-space: normal;
  }
  .cta-banner__btn-sub {
    font-size: var(--text-xs);
  }
  .cta-banner__btn-main {
    font-size: var(--text-md);
  }

  /* ---------- Utility ---------- */
  .u-sp-br {
    display: inline;
  }

  .u-pc-br {
    display: none;
  }

  /* ---------- Problem ---------- */

  .problem__case {
    flex-direction: column;
    width: 100%;
    gap: 40px;
  }
  
  .problem__card-image {
    flex: 0 1 auto;
    width: 100%;
  }
  
  .problem__card-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
    margin-bottom: 24px;
  }
  
  .problem__card-image h3 {
    font-size: var(--text-lg);
  }
  
  .problem__card-image p {
    font-size: var(--text-md);
  }

  .problem__intro-lead br,
  .problem__desc br,
  .stage0__desc br {
    display: none;
  }
  .problem__banner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-l) var(--space-m);
    min-height: 0;
  }
  .problem__banner-text-strong .marker{
    font-size: var(--text-base);
  }
  .problem__banner-text-area {
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .problem__chart {
    position: static;
    transform: none;
    width: min(72vw, 280px);
    margin-inline: auto;
    aspect-ratio: 1;
  }
  .problem__chart-center {
    position: absolute;
    width: 55%;
    aspect-ratio: 1;
    top: 38%;
    right: 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 0.3vw, 4px);
    text-align: center;
    color: #fff;
  }
  .problem__inner {
    gap: 40px;
  }
  .problem__row,
  .problem__row--reverse {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(24px, 3.6vw, 52px);
    width: 100%;
    max-width: min(100%, 1000px);
  }
  .problem__text {
    display: contents;
  }
  .problem__heading {
    order: 1;
  }
  .problem__visual {
    order: 2;
  }
  .problem__desc {
    order: 3;
  }
  .problem__source {
    order: 4;
  }

/* ---------- Solution ---------- */

.solution__list {
  flex-direction: column;
  gap: 40px;
}

  .solution__card {
    width: 100%;
  }
  
  .solution__card-image {
    width: 100%;
  }

  /* ---------- About ---------- */
  .about__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
  }
  .about__heading {
    flex: 1;
    width: auto;
    gap: 16px;
    padding-block: 24px;
  }
  .about__product {
    flex: 0 0 auto;
    width: 100%;
  }
  .about__product img {
    width: 100%;
  }
  .about__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-s);
    max-width: 90%;
    margin-inline: auto;
  }
  .about__stat {
    width: 100%;
  }
  .about__stat img {
    width: 70%;
    height: auto;
  }
  .about__tags{
    gap: 12px;
  }

  .about__tag {
    height: auto;
    padding: 6px 14px;
  }
  .about__card {
    flex-direction: column;
    padding: var(--space-l) var(--space-l);
    gap: var(--space-l);
  }
  .about__card-image {
    width: 100%;
  }

  .about__icon-title {
  font-family: var(--font-jp);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-bg);
  text-align: center;
  margin-bottom: 40px;
}

.about_icon-img {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:22px;
}

.about_icon-img span:nth-of-type(1),.about_icon-img span:nth-of-type(3) {
  width: 160px;
  height: auto;
}

.about_icon-img span:nth-of-type(2) {
  width: 56px;
  height: auto;
}

.about_icon-img {
  gap:16px;
}

.about_icon-img span:nth-of-type(1),.about_icon-img span:nth-of-type(3) {
  width: 80px;
  height: auto;
}

.about_icon-img span:nth-of-type(2) {
  width: 28px;
  height: auto;
}

  /* ---------- REASON ---------- */
  .reason__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
  }
  .reason__heading-ja {
    align-items: flex-start;
    text-align: left;
  }
  .reason__heading-ja-sub,
  .reason__heading-ja-main {
    white-space: nowrap;
  }
  .reason__list {
    gap: 40px;
}  
  .reason__card,
  .reason__card--reverse {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: min(3.54vw, 51px);
    background: #fff;
    border-radius: 20px;
    padding-block: clamp(24px, 6vw, 36px);
    padding-inline: clamp(24px, 6.5vw, 36px);
    width: 100%;
  }
  .reason__list > .reason__card:nth-child(2) {
    flex-direction: column;
  }
  .reason__card-text {
    display: contents;
  }
  .reason__card-no {
    order: 1;
  }
  .reason__card-title {
    order: 2;
  }
  .reason__card-image {
    order: 3;
    width: 100%;
  }
  .reason__card-desc {
    order: 4;
  }
  .reason__card-source {
    order: 5;
  }
  .reason__card-cta {
    order: 6;
  }

  /* ---------- VOICE ---------- */
  .voice__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .voice__heading-ja {
    text-align: left;
  }
  .voice__card {
    flex-direction: column;
    flex: 0 0 min(86vw, 520px);
  }
  .voice__nav-btn--prev {
    left: 8px;
  }
  .voice__nav-btn--next {
    right: 8px;
  }
  .voice__media {
    width: 100%;
  }

  /* ---------- Stage 0 ---------- */
  .stage0__heading-wrap {
    opacity: 1 !important;
    transform: none !important;
  }
  .stage0__pin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding-block: var(--space-l);
    gap: var(--space-m);
    overflow: hidden;
  }
  .stage0__heading-wrap,
  .stage0__viewport {
    grid-column: auto;
    grid-row: auto;
  }
  .stage0__viewport {
    align-self: auto;
  }
  .stage0__logo {
    width: clamp(120px, 32vw, 200px);
  }
  .stage0__title-line--brand::after {
    width: clamp(110px, 28vw, 200px);
    left: 60%;
    top: 95%;
  }
  .stage0__desc {
    font-size: var(--text-md);
  }
  .stage0__list {
    flex-direction: column;
    width: max-content;
    align-items: center;
    margin-inline: auto;
    gap: var(--space-m);
  }
  .stage0__card {
    flex: 0 0 auto;
    width: clamp(300px, 84vw, 360px);
  }
  .stage0__card-label {
    font-size: var(--text-base);
  }

  /* ---------- Evidence ---------- */
  .evidence__inner {
    gap: var(--space-s);
  }
  .evidence__paper {
    word-break: break-word;
  }

  /* ---------- MESSAGE ---------- */
  .message__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-l);
  }
  .message__profile {
    width: min(70%, 320px);
    margin-inline: auto;
  }
  .message__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .message__heading-ja {
    text-align: left;
  }

  .message__profile figcaption {
    font-size: var(--text-md);
  }

  /* ---------- FLOW ---------- */
  .flow__steps {
    grid-template-columns: 1fr;
  }

  /* ---------- FAQ ---------- */
  .faq__layout {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

  /* ---------- Contact ---------- */
  .contact__layout {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .contact__intro {
    text-align: center;
    align-items: center;
  }
  .contact__brand-row,
  .contact__brand-message {
    justify-content: center;
    text-align: center;
  }
  .contact__brand-message {
    align-items: center;
  }

  /* ---------- Headings ---------- */
  .voice__heading-en,
  .message__heading-en,
  .reason__heading-en {
    height: clamp(28px, 6vw, 40px);
  }
}

@media (min-width: 1680px) {
  .fv {
    padding-block: 200px 250px;
  }
}

/* ============================================================
   Modal (経費削減シミュレーション)
   ============================================================ */
.l-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 32px);
}
.l-modal.is-open {
  display: flex;
}
.l-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.l-modal__dialog {
  position: relative;
  width: min(96vw, 1100px);
  max-height: 92vh;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}
.l-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s ease;
}
.l-modal__close:hover,
.l-modal__close:focus-visible {
  background: rgba(0, 0, 0, 0.12);
}
.l-modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #102838;
  transform-origin: center;
}
.l-modal__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.l-modal__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.l-modal__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.l-modal__body #p-simulator {
  margin: 0;
  padding: 32px 16px 48px;
  min-height: auto;
}
body.is-modal-open {
  overflow: hidden;
}

/* ============================================================
   Simulator (流用: lp.n-nose/biz)
   ============================================================ */

.l-modal__body #p-simulator,
.l-modal__body #p-simulator * {
  box-sizing: border-box;
}
.l-modal__body .p-simulatorHead__title {
  font-size: var(--text-xl);
  white-space: nowrap;
  padding-bottom: var(--space-m);
  line-height: 1.4;
}

.p-ctaButtons__simulator,#p-ctaButtons__simulator,#p-ctaButtons__whitepaper,#p-ctaButtons__contact{display:block;font-family:YakuHanJP,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;font-weight:700;font-size:16px;border-radius:30px;padding-block:9px 10px;padding-inline:30px;filter:drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.25));transition:all .15s ease-out;position:relative}.p-ctaButtons__simulator,#p-ctaButtons__simulator{color:#fff;background-color:#005bab}@media screen and (max-width: 768px){.p-ctaButtons__simulator,#p-ctaButtons__simulator{display:none}}.p-ctaButtons__simulator::before,#p-ctaButtons__simulator::before{content:"";font-family:"Font Awesome 5 Pro";font-weight:400;padding-right:7px}@media(hover: hover){.p-ctaButtons__simulator:hover,#p-ctaButtons__simulator:hover{background-color:rgb(0,63.8596491228,120);color:hsl(0,0%,90%)}}@media(hover: none){.p-ctaButtons__simulator:active,#p-ctaButtons__simulator:active{background-color:rgb(0,63.8596491228,120);color:hsl(0,0%,90%)}}@media screen and (max-width: 768px){.p-ctaButtons__simulator{display:flex}}#p-simulator{position:relative;display:flex;flex-direction:column;min-height:800px;align-items:center;background-color:#f4f6f8}@media screen and (max-width: 768px){#p-simulator{padding-bottom:32px;padding-left:15px;padding-right:15px;-webkit-margin-after:48px;margin-block-end:48px;font-size:12px}}@media screen and (min-width: 769px){#p-simulator{padding-bottom:128px;margin-inline:auto;-webkit-margin-after:64px;margin-block-end:64px;font-size:16px}}@media screen and (max-width: 768px){.p-simulatorHead__wrapper{width:100%;padding:0 10px}}@media screen and (min-width: 769px){.p-simulatorHead__wrapper{width:980px}}.p-simulatorHead__title{display:block;font-weight:bold;text-align:center;color:#988d65}@media screen and (max-width: 768px){.p-simulatorHead__title{padding-bottom:40px;font-size:26px;line-height:1.2}}@media screen and (min-width: 769px){.p-simulatorHead__title{padding-bottom:38px;font-size:36px}}.p-simulatorHead__caption{display:block}@media screen and (max-width: 768px){.p-simulatorHead__caption{padding-bottom:36px;font-size:16px;line-height:1.75}}@media screen and (min-width: 769px){.p-simulatorHead__caption{padding-bottom:48px;font-size:17px;line-height:1.7647058824}}.p-simulator__wrapper{display:flex;flex-direction:column;background-color:#fff;min-height:500px}@media screen and (max-width: 768px){.p-simulator__wrapper{width:100%;padding:30px 10px;border-radius:10px}}@media screen and (min-width: 769px){.p-simulator__wrapper{width:980px;padding:20px 25px 82px;border-radius:16px}}.p-simulator__select{position:relative;display:flex;flex-direction:row;align-self:center;padding:5px;gap:0 5px;background-color:#ccdeee;border-radius:40px;box-shadow:inset 2px 4px 4px rgba(0,91,171,.1)}@media screen and (max-width: 768px){.p-simulator__select{margin-bottom:40px}}@media screen and (min-width: 769px){.p-simulator__select{margin-bottom:52px}}.p-simulator__button{display:block}.p-simulator__type{position:relative;padding:10px;border-radius:40px;color:#005bab;font-weight:bold;text-align:center;cursor:pointer;z-index:1;transition:all .15s ease-out}.p-simulator__type--left,.p-simulator__type--right{color:#93b9db}.p-simulator__type--left::before,.p-simulator__type--right::before{content:"";position:absolute;top:0;display:block;width:100%;height:100%;border-radius:40px;background-color:#005bab;box-shadow:3px 3px 3px rgba(0,91,171,.15);z-index:-1;pointer-events:none;transition:all .25s ease-out}@media screen and (max-width: 768px){.p-simulator__type--left::before{left:161px}}@media screen and (min-width: 769px){.p-simulator__type--left::before{left:323px}}.p-simulator__type--left.is-hover{color:#fff}.p-simulator__type--left.is-hover::before{left:0}@media screen and (max-width: 768px){.p-simulator__type--right::before{right:161px}}@media screen and (min-width: 769px){.p-simulator__type--right::before{right:323px}}.p-simulator__type--right.is-hover{color:#fff}.p-simulator__type--right.is-hover::before{right:0}@media screen and (max-width: 768px){.p-simulator__type{width:156px;padding:5px;font-size:18px;line-height:1}}@media screen and (min-width: 769px){.p-simulator__type{width:318px;font-size:21px}}@media screen and (max-width: 768px){.p-simulator__type--small{font-size:14px}}.p-simulator__type.is-active{color:#fff;cursor:default;z-index:2}.p-simulator__type.is-deactive{color:#93b9db}.p-simulatorInput__wrapper{display:flex;justify-content:center;margin-bottom:48px;font-size:16px}@media screen and (max-width: 768px){.p-simulatorInput__wrapper{flex-direction:column;align-items:center;gap:20px 0}}@media screen and (min-width: 769px){.p-simulatorInput__wrapper{flex-direction:row;gap:0 80px}}.p-simulatorInput__item{display:block}.p-simulatorInput__itemList{display:flex;flex-direction:row;align-items:center;gap:0 12px}@media screen and (max-width: 768px){.p-simulatorInput__itemTitle{font-size:18px}}@media screen and (min-width: 769px){.p-simulatorInput__itemTitle{font-size:18px}}.p-simulatorInput__itemData{display:block}.p-simulatorInput__itemInput{width:120px;padding:8px 10px;border:solid 1px #000;border-radius:5px;text-align:right;ime-mode:inactive;box-shadow:inset 3px 3px 3px rgba(0,91,171,.15)}.p-simulatorInput__itemSelect{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:8px 40px 8px 16px;border:solid 1px #000;border-radius:5px;cursor:pointer;text-overflow:ellipsis;appearance:none;outline:none;box-shadow:3px 3px 3px 0px rgba(0,91,171,.15)}.p-simulatorInput__itemSelect--wrapper{position:relative}.p-simulatorInput__itemSelect--wrapper::after{content:"";position:absolute;right:12px;top:45%;transform:translate(0, -45%) rotate(45deg);width:10px;height:10px;border-right:2px solid gray;border-bottom:2px solid gray}.p-simulatorEmployee__wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:38px}.p-simulatorEmployee__title{padding-bottom:10px;color:#005bab;font-weight:bold}@media screen and (max-width: 768px){.p-simulatorEmployee__title{font-size:18px}}@media screen and (min-width: 769px){.p-simulatorEmployee__title{font-size:21px}}.p-simulatorEmployee__item{display:flex;flex-direction:row}.p-simulatorEmployee__item--wrapper{display:flex;flex-direction:row;font-size:16px}.p-simulatorEmployee__item--wrapper::before{content:"（";padding-right:3px}.p-simulatorEmployee__item--wrapper::after{content:"）";padding-left:3px}.p-simulatorEmployee__itemList{display:flex;flex-direction:row}.p-simulatorEmployee__itemTitle{display:inline-block;font-weight:normal}.p-simulatorEmployee__itemData{display:block}.p-simulatorEmployee__itemTotal{padding-bottom:3px;color:#005bab;font-weight:bold;font-size:48px}.p-simulatorEmployee__itemTotal--small{font-size:26px}.p-simulatorEmployee__itemValue{display:inline-block}.p-simulatorEmployee__itemSpacer{padding:0 5px}.p-simulatorResult__wrapper{display:flex}@media screen and (max-width: 768px){.p-simulatorResult__wrapper{flex-direction:column;gap:20px 0}}@media screen and (min-width: 769px){.p-simulatorResult__wrapper{flex-direction:row;align-items:flex-start;gap:30px 0}}.p-simulatorResult__item{position:relative;display:block}@media screen and (min-width: 769px){.p-simulatorResult__item{width:21%;font-size:16px}.p-simulatorResult__item:nth-child(1){width:16%}.p-simulatorResult__item:nth-child(odd){background-color:#e7e8eb}}.p-simulatorResult__itemList{display:flex;flex-direction:column}.p-simulatorResult__itemTitle{display:flex;justify-content:center;align-items:center;color:#005bab;font-weight:bold;line-height:1.2;text-align:center}@media screen and (max-width: 768px){.p-simulatorResult__itemTitle{flex-direction:row;padding:0 16px}}@media screen and (min-width: 769px){.p-simulatorResult__itemTitle{flex-direction:column;padding:0 12px 0 16px;border-bottom:solid 1px #999;height:66px}}@media screen and (max-width: 768px){.p-simulatorResult__itemTitle--title{display:none}}@media screen and (min-width: 769px){.p-simulatorResult__itemTitle--title{align-items:flex-start;color:#005bab;font-weight:bold;text-align:left}}@media screen and (max-width: 768px){.p-simulatorResult__itemTitle--block{display:inline-block}}@media screen and (min-width: 769px){.p-simulatorResult__itemTitle--block{display:block}}@media screen and (max-width: 768px){.p-simulatorResult__itemTitle--small{font-size:11px}}@media screen and (min-width: 769px){.p-simulatorResult__itemTitle--small{font-size:12px}}@media screen and (max-width: 768px){.p-simulatorResult__itemTitle--medium{font-size:12px}}@media screen and (min-width: 769px){.p-simulatorResult__itemTitle--medium{font-size:15px}}@media screen and (max-width: 768px){.p-simulatorResult__itemTitle--table{justify-content:flex-start;padding:8px 10px;background-color:#ccdeee;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid #999;font-size:15px}}.p-simulatorResult__itemData{display:flex}.p-simulatorResult__itemData--blue{color:#00a3e0;font-weight:bold}@media screen and (max-width: 768px){.p-simulatorResult__itemData--arrow{padding:0 10px;gap:0 18px}}@media screen and (max-width: 768px){.p-simulatorResult__itemData{flex-direction:row;justify-content:center}}@media screen and (min-width: 769px){.p-simulatorResult__itemData{flex-direction:column}}@media screen and (max-width: 768px){.p-simulatorResult__itemData--table{padding:8px 0;background-color:#e7e8eb;border-bottom-right-radius:8px;border-bottom-left-radius:8px;font-size:12.5px}}.p-simulatorResult__itemValue{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center;line-height:1.4;overflow-wrap:anywhere;gap:0 3px}.p-simulatorResult__itemValue--title{color:#005bab;font-weight:bold}@media screen and (min-width: 769px){.p-simulatorResult__itemValue--title{text-align:left}}@media screen and (max-width: 768px){.p-simulatorResult__itemValue--block{display:inline-block}}@media screen and (min-width: 769px){.p-simulatorResult__itemValue--block{display:block}}@media screen and (max-width: 768px){.p-simulatorResult__itemValue--small{font-size:11px}}@media screen and (min-width: 769px){.p-simulatorResult__itemValue--small{font-size:12px}}.p-simulatorResult__itemValue--yen{padding-top:3px}@media screen and (max-width: 768px){.p-simulatorResult__itemValue--yen{font-size:10px}}@media screen and (min-width: 769px){.p-simulatorResult__itemValue--yen{font-size:12px}}@media screen and (max-width: 768px){.p-simulatorResult__itemValue--last{border-left:solid 1px #999}}@media screen and (min-width: 769px){.p-simulatorResult__itemValue--last{border-bottom:solid 1px #999}}@media screen and (max-width: 768px){.p-simulatorResult__itemValue{padding-left:4px;padding-right:4px;width:33.3%}.p-simulatorResult__itemValue--arrow{position:relative;display:flex;width:100%;height:60px;padding-bottom:10px;background:#005bab;line-height:1.2;-webkit-clip-path:polygon(0 63.2%, -18% 63.2%, -18% 0, 118% 0, 118% 63.2%, 100% 63.2%, 50% 100%);clip-path:polygon(0 63.2%, -18% 63.2%, -18% 0, 118% 0, 118% 63.2%, 100% 63.2%, 50% 100%)}.p-simulatorResult__itemValue--arrow::before{content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);width:calc(100% - 6px);height:calc(100% - 6px);background:#fff;-webkit-clip-path:polygon(0 61.2%, -29.6% 61.2%, -29.6% 0, 129.6% 0, 129.6% 61.2%, 100% 61.2%, 50% 100%);clip-path:polygon(0 61.2%, -29.6% 61.2%, -29.6% 0, 129.6% 0, 129.6% 61.2%, 100% 61.2%, 50% 100%);z-index:-1}.p-simulatorResult__itemValue--arrow-text{font-size:14px;z-index:1}}@media screen and (min-width: 769px){.p-simulatorResult__itemValue{height:66px;padding-left:16px;padding-right:12px}.p-simulatorResult__itemValue--arrow{justify-content:flex-start}}.p-simulatorResult__itemNote{position:absolute}@media screen and (max-width: 768px){.p-simulatorResult__itemNote{right:0;bottom:-15px;font-size:11px}}@media screen and (min-width: 769px){.p-simulatorResult__itemNote{left:0;bottom:-20px;font-size:12px;white-space:nowrap}}.p-simulatorNote{display:flex}@media screen and (max-width: 768px){.p-simulatorNote{justify-content:flex-end;padding-top:3px;font-size:11px}}@media screen and (min-width: 769px){.p-simulatorNote{justify-content:flex-start;padding-top:8px;font-size:14px}}.p-simulatorReference{display:flex;justify-content:flex-start;line-height:1.4}@media screen and (max-width: 768px){.p-simulatorReference{padding-top:8px;font-size:10px}}@media screen and (min-width: 769px){.p-simulatorReference{padding-top:12px;font-size:12px}.p-simulatorReference--spacer{padding-top:36px}}

/* ============================================================
   Animations (scroll-triggered + microinteractions)
   ============================================================ */

/* --- Base reveal --- */
.is-anim {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1) var(--anim-delay, 0s),
              transform 0.8s cubic-bezier(.22,1,.36,1) var(--anim-delay, 0s);
  will-change: opacity, transform;
}
.is-anim.is-anim-in {
  opacity: 1;
  transform: translateY(0);
}

.is-anim--left {
  transform: translateX(-40px);
}
.is-anim--left.is-anim-in {
  transform: translateX(0);
}

.is-anim--right {
  transform: translateX(40px);
}
.is-anim--right.is-anim-in {
  transform: translateX(0);
}

.is-anim--scale {
  transform: scale(0.9);
}
.is-anim--scale.is-anim-in {
  transform: scale(1);
}

.is-anim--reveal {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(.77,0,.18,1) var(--anim-delay, 0s);
}
.is-anim--reveal.is-anim-in {
  clip-path: inset(0 0 0 0);
}

/* --- CTA pulse --- */
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.cta-banner__btn {
  animation: pulse-soft 2.6s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-banner__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: shine 3.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes shine {
  0%        { left: -120%; }
  55%, 100% { left: 220%; }
}
.cta-banner__btn:hover,
.cta-banner__btn:focus-visible {
  animation-play-state: paused;
}

/* --- Cards hover lift --- */
.flow__step {
  transition: transform 0.3s cubic-bezier(.22,1,.36,1),
              box-shadow 0.3s cubic-bezier(.22,1,.36,1);
}
.flow__step:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(16, 40, 56, 0.12);
}

/* --- Image fade-in on load --- */
img.is-anim-img {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.6s ease, filter 0.6s ease;
}
img.is-anim-img.is-loaded {
  opacity: 1;
  filter: blur(0);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .is-anim,
  .is-anim--left,
  .is-anim--right,
  .is-anim--scale,
  .is-anim--reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .cta-banner__btn { animation: none; }
}

/* Pre-hide animated elements to prevent flash before JS runs */
.problem__heading_group,
.problem__case,
.problem__intro-lead,
.problem__banner,
.problem__row,
.solution__heading_group,
.solution__package,
.solution__card,
.about__product,
.about__heading,
.about__stat,
.about__card,
.about__icon-text,
.reason__header,
.reason__card,
.voice__header,
.evidence__inner,
.message__profile,
.message__text,
.flow__header,
.flow__step,
.contact__intro {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1) var(--anim-delay, 0s),
              transform 0.8s cubic-bezier(.22,1,.36,1) var(--anim-delay, 0s);
  will-change: opacity, transform;
}
.is-anim-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
@media (prefers-reduced-motion: reduce) {
  .problem__heading_group,
  .problem__case,
  .problem__intro-lead,
  .problem__banner,
  .problem__row,
  .solution__heading_group,
  .solution__package,
  .solution__card,
  .about__product,
  .about__heading,
  .about__stat,
  .about__card,
  .about__icon-text,
  .reason__header,
  .reason__card,
  .voice__header,
  .evidence__inner,
  .message__profile,
  .message__text,
  .flow__header,
  .flow__step,
  .contact__intro {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}