@charset "UTF-8";

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --color-main: #004c69;
  --color-accent: #73b6c7;
  --color-accent-light: #cce3ea;
  --color-border: #bcd6e0;
  --color-panel: #f1f7f9;
  --color-check: #e4f2f7;
  --color-step: #3f8ca9;
  --color-brown: #564a3b;
  --color-white: #ffffff;
  --font-serif: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-display: "Didot", "Bodoni MT", "Playfair Display", "Zen Old Mincho", serif;
  --radius-card: 16px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-btn: 0 4px 6px rgba(86, 131, 143, 0.2);
  --col-max: calc(390 / 1296 * 100vw); /* 390px — Figma右カラム */
  --nav-max: calc(684 / 1296 * 100vw); /* 684px — Figma左ナビ */
  --layout-gap: calc(50 / 1296 * 100vw); /* 50px — Figma左右間 */
  --scroll-pad: calc(52 / 1296 * 100vw); /* 52px — Figma右カラム y */
  --design-width: 1296; /* PC Figma基準幅 */
  --design-width-sp: 390; /* SP Figma基準幅 */
}

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

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

body {
  color: var(--color-main);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--color-white);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

ul,
ol {
  list-style: none;
}

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

/* ==========================================================================
   Layout — PC (default >767px)
   ========================================================================== */
.l-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--layout-gap);
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url("../img/bg_img.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.l-main-contents {
  width: 100%;
  max-width: var(--col-max);
  height: 100vh;
  padding-top: var(--scroll-pad);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: transparent;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.l-header {
  background: var(--color-white);
  display: flex;
  justify-content: center;
  padding: calc(16 / 1296 * 100vw) 4px; /* 16px */
}

.l-header__logo img {
  width: calc(241 / 1296 * 100vw); /* 241px */
  height: auto;
  display: block;
}

.l-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 / 1296 * 100vw); /* 32px — Figma 103:16 */
  padding-bottom: calc(42 / 1296 * 100vw); /* 42px */
  background-color: rgba(255, 255, 255, 0.2);
}

.l-footer {
  padding: calc(22 / 1296 * 100vw) calc(25 / 1296 * 100vw) calc(19 / 1296 * 100vw); /* 22px 25px 19px */
  background-color: #202020;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 300;
  text-align: center;
}

.l-sp-cta {
  display: none;
}

/* ==========================================================================
   SP Fit Modal
   ========================================================================== */
.c-modal {
  display: none;
}

.l-footer__txt {
  margin-bottom: calc(11 / 1296 * 100vw); /* 11px */
  font-size: calc(13 / 1296 * 100vw); /* 13px */
}

.l-footer__copyright {
  font-size: calc(12 / 1296 * 100vw); /* 12px */
}

/* Anchor scroll offset inside right column */
#section-softique,
#section-b,
#section-e {
  scroll-margin-top: calc(28 / 1296 * 100vw); /* 28px */
}

/* ==========================================================================
   PC Left nav — Figma 109:36 (684 @1400 → vw, baseと同様に可変)
   ========================================================================== */
.p-top-nav {
  width: 100%;
  max-width: var(--nav-max); /* 684px @1296 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: calc(24 / 1296 * 100vw); /* 24px */
  padding-top: var(--scroll-pad); /* 52px — 右カラムと同じ上余白 */
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.p-top-nav__inner {
  display: flex;
  flex-direction: column;
  gap: calc(16 / 1296 * 100vw); /* 16px */
  width: 100%;
}

/* Softique banner: image 262×187 + teal body */
.p-top-nav__softique {
  display: flex;
  align-items: flex-start;
  gap: calc(16 / 1296 * 100vw); /* 16px */
  width: 100%;
  background: #73b6c7;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.p-top-nav__softique:hover {
  opacity: 0.7;
}

.p-top-nav__softique-img {
  position: relative;
  flex-shrink: 0;
  width: calc(262 / 1296 * 100vw); /* 262px */
  aspect-ratio: 262 / 187;
  overflow: hidden;
}

.p-top-nav__softique-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.p-top-nav__softique-body {
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16 / 1296 * 100vw) calc(16 / 1296 * 100vw) calc(16 / 1296 * 100vw) 0; /* 16px */
  box-sizing: border-box;
}

.p-top-nav__softique-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 / 1296 * 100vw); /* 8px */
}

.p-top-nav__softique-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-top-nav__softique-titles::after {
  content: "";
  display: block;
  width: calc(48 / 1296 * 100vw); /* 48px */
  height: 1px;
  margin-top: calc(8 / 1296 * 100vw); /* 8px */
  background: rgba(255, 255, 255, 0.3);
}

.p-top-nav__softique-en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(28 / 1296 * 100vw); /* 28px */
  line-height: 1.4;
  white-space: nowrap;
}

.p-top-nav__softique-ja {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: calc(16 / 1296 * 100vw); /* 16px */
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  padding-bottom: 4px; /* 4px */
}

.p-top-nav__softique-catch {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(28 / 1296 * 100vw); /* 28px */
  line-height: 1.4;
  white-space: nowrap;
}

/* B / E cards */
.p-top-nav__row {
  display: flex;
  align-items: center;
  gap: calc(16 / 1296 * 100vw); /* 16px */
  width: 100%;
}

.p-top-nav__card {
  display: flex;
  align-items: flex-start;
  gap: calc(8 / 1296 * 100vw); /* 8px */
  width: calc((100% - (16 / 1296 * 100vw)) / 2); /* gap 16px */
  padding: calc(8 / 1296 * 100vw); /* 8px */
  box-sizing: border-box;
  background: #fff;
  color: #004c69;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.p-top-nav__card:hover {
  opacity: 0.7;
}

.p-top-nav__card-img {
  flex-shrink: 0;
  width: calc(110 / 1296 * 100vw); /* 110px */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.p-top-nav__card-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.p-top-nav__card-body {
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-top-nav__card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12 / 1296 * 100vw); /* 12px */
}

.p-top-nav__card-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.p-top-nav__card-titles::after {
  content: "";
  display: block;
  width: calc(24 / 1296 * 100vw); /* 24px */
  height: 1px;
  margin-top: calc(12 / 1296 * 100vw); /* 12px */
  background: #bcd6e0;
}

.p-top-nav__card-en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(24 / 1296 * 100vw); /* 24px */
  line-height: 1;
  white-space: nowrap;
  padding-bottom: 4px; /* 4px */
}

.p-top-nav__card-ja {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: calc(16 / 1296 * 100vw); /* 16px */
  line-height: 1;
  color: rgba(0, 76, 105, 0.8);
  white-space: nowrap;
}

.p-top-nav__card-catch {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(22 / 1296 * 100vw); /* 22px */
  line-height: 1.4;
  white-space: nowrap;
}

/* Circle arrows: Softique 44 / B·E 32 */
.p-top-nav__circle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-sizing: border-box;
}

.p-top-nav__circle::before {
  content: "";
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.p-top-nav__circle--light {
  width: calc(44 / 1296 * 100vw); /* 44px */
  height: calc(44 / 1296 * 100vw);
  border: 1px solid #fff;
}

.p-top-nav__circle--light::before {
  width: calc(10 / 1296 * 100vw); /* 10px */
  height: calc(17 / 1296 * 100vw); /* 17px */
  background-image: url("../img/icons/icon_chevron_white.svg");
}

.p-top-nav__circle--dark {
  width: calc(32 / 1296 * 100vw); /* 32px */
  height: calc(32 / 1296 * 100vw);
  border: 1px solid #004c69;
}

.p-top-nav__circle--dark::before {
  width: calc(9 / 1296 * 100vw); /* 9px */
  height: calc(15 / 1296 * 100vw); /* 15px */
  background-image: url("../img/icons/icon_chevron_darkteal.svg");
}

/* Event block */
.p-top-nav__event {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-top: calc(24 / 1296 * 100vw); /* 24px */
  color: #004c69;
  box-sizing: border-box;
}

.p-top-nav__event::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #9bbac6 15%,
    #9bbac6 85%,
    transparent 100%
  );
}

.p-top-nav__event-label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #004c69;
  padding: calc(12 / 1296 * 100vw) calc(16 / 1296 * 100vw); /* 12px 16px */
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.p-top-nav__event-label-title {
  font-size: calc(20 / 1296 * 100vw); /* 20px */
}

.p-top-nav__event-label-colon {
  font-size: calc(18 / 1296 * 100vw); /* 18px */
}

.p-top-nav__event-label-num {
  font-size: calc(22 / 1296 * 100vw); /* 22px */
}

.p-top-nav__event-label-unit {
  font-size: calc(14 / 1296 * 100vw); /* 14px */
}

.p-top-nav__event-label-tilde {
  font-size: calc(18 / 1296 * 100vw); /* 18px */
}

.p-top-nav__event-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(16 / 1296 * 100vw); /* 16px */
  width: 100%;
  padding: calc(16 / 1296 * 100vw); /* 16px */
  box-sizing: border-box;
}

.p-top-nav__event-text {
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.65;
  text-align: center;
}

.p-top-nav__event-link {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* 4px */
  padding: calc(8 / 1296 * 100vw) 0; /* 8px */
  border-bottom: 1px solid #004c69;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.4;
  white-space: nowrap;
  color: #004c69;
  text-decoration: none;
}

.p-top-nav__event-link::after {
  content: "";
  flex-shrink: 0;
  width: calc(32 / 1296 * 100vw); /* 32px */
  height: calc(32 / 1296 * 100vw);
  background: url("../img/icons/icon_chevron_darkteal.svg") center / calc(9 / 1296 * 100vw) calc(15 / 1296 * 100vw) no-repeat;
}

/* PC Right: Softique / B / E cards — Figma 103:16 / 103:610 */
.p-fit-nav {
  display: flex;
  flex-direction: column;
  gap: calc(32 / 1296 * 100vw); /* 32px */
  width: 100%;
  padding: 0 calc(20 / 1296 * 100vw); /* 20px */
  box-sizing: border-box;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.c-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(60 / 1296 * 100vw); /* 60px */
  padding: calc(16 / 1296 * 100vw) calc(24 / 1296 * 100vw); /* 16px 24px */
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(20 / 1296 * 100vw); /* 20px */
  line-height: 1;
  text-align: center;
  box-shadow: var(--shadow-btn);
  transition: opacity 0.3s ease;
  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.c-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(24 / 1296 * 100vw); /* 24px */
  width: calc(9 / 1296 * 100vw); /* 9px */
  height: calc(17 / 1296 * 100vw); /* 17px */
  transform: translateY(-50%);
  background: url("../img/icons/icon_chevron_darkteal.svg") center / contain no-repeat;
}

.c-btn:hover {
  opacity: 0.7;
}

.c-btn--fill {
  background: var(--color-accent);
  color: var(--color-white);
}

.c-btn--fill::after {
  background-image: url("../img/icons/icon_chevron_white.svg");
}

.c-btn--outline {
  background: var(--color-white);
  color: var(--color-main);
  border: 1px solid var(--color-main);
  padding: calc(16 / 1296 * 100vw); /* 16px */
}

.c-btn--outline::after {
  right: calc(16 / 1296 * 100vw); /* 16px */
}

.c-btn--left {
  justify-content: flex-start;
  text-align: left;
}

.c-btn--white {
  background: var(--color-white);
  color: var(--color-main);
}

/* ==========================================================================
   Cards — Figma 103:557 / 103:575 / 103:592
   ========================================================================== */
.c-card {
  background: var(--color-white);
  border-radius: calc(16 / 1296 * 100vw); /* 16px */
  padding: calc(24 / 1296 * 100vw) calc(16 / 1296 * 100vw); /* 24px 16px */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.c-card--accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.c-card__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(16 / 1296 * 100vw); /* 16px */
}

.c-card__en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(34 / 1296 * 100vw); /* 34px */
  line-height: 1.4;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: calc(12 / 1296 * 100vw); /* 12px */
  white-space: nowrap;
}

.c-card__titles--dark .c-card__en {
  font-size: calc(34 / 1296 * 100vw); /* 34px */
  color: var(--color-main);
}

.c-card__ja {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: calc(20 / 1296 * 100vw); /* 20px */
  line-height: 1.4;
  padding-top: calc(12 / 1296 * 100vw); /* 12px */
  padding-bottom: calc(8 / 1296 * 100vw); /* 8px */
}

.c-card__titles--dark .c-card__ja {
  color: var(--color-main);
}

.c-card__media {
  width: 100%;
  max-width: calc(318 / 1296 * 100vw); /* 318px */
  border-radius: calc(8 / 1296 * 100vw); /* 8px */
  overflow: hidden;
  position: relative;
}

.c-card__media img {
  width: 100%;
  height: auto;
  display: block;
}

.c-card__media--wide {
  max-width: 100%;
  border-radius: calc(8 / 1296 * 100vw); /* 8px */
}

.c-card__headline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(24 / 1296 * 100vw); /* 24px */
  line-height: 1.4;
  text-align: center;
  margin-top: calc(16 / 1296 * 100vw); /* 16px */
  width: 100%;
  max-width: calc(318 / 1296 * 100vw);
}

.c-card__headline--dark {
  font-size: calc(20 / 1296 * 100vw); /* 20px */
  color: var(--color-main);
  max-width: none;
}

.c-card__body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.75;
  margin-top: calc(8 / 1296 * 100vw); /* 8px */
  width: 100%;
  max-width: calc(318 / 1296 * 100vw);
}

.c-card .c-btn {
  margin-top: calc(16 / 1296 * 100vw); /* 16px */
}

/* ==========================================================================
   Hero
   ========================================================================== */
.p-hero {
  width: 100%;
}

.p-hero__visual {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.p-hero__img {
  width: 100%;
  height: auto;
  display: block;
}

.p-hero__catch {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  pointer-events: none;
}

.p-hero__catch-line {
  position: absolute;
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(28 / 1296 * 100vw); /* 28px */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: transparent;
  padding: calc(8 / 1296 * 100vw); /* 8px */
  text-align: center;
  box-sizing: border-box;
  transition: color 0.6s 1.4s;
}

.p-hero__catch-line--01 {
  top: calc(48 / 1296 * 100vw); /* 48px — Figma 103:30 */
  left: calc(86 / 1296 * 100vw); /* 86px */
}

.p-hero__catch-line--02 {
  top: calc(79 / 1296 * 100vw); /* 79px — Figma 103:28 */
  left: calc(29 / 1296 * 100vw); /* 29px */
  transition: color 0.8s 1.8s;
}

.p-hero__catch-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-white);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.8s 1s;
}

.p-hero__catch-line--02::before {
  transition: transform 1s 1.2s;
}

.p-hero__catch.is-animated .p-hero__catch-line {
  color: var(--color-main);
}

.p-hero__catch.is-animated .p-hero__catch-line::before {
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .p-hero__catch-line,
  .p-hero__catch-line::before {
    transition: none;
  }

  .p-hero__catch-line {
    color: var(--color-main);
  }

  .p-hero__catch-line::before {
    transform: scaleY(1);
  }
}

.p-hero__intro {
  padding: calc(32 / 1296 * 100vw) calc(20 / 1296 * 100vw) 0; /* 32px 20px 0 */
  text-align: center;
}

.p-hero__en {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  padding: 4px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(28 / 1296 * 100vw); /* 28px */
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--color-main);
  text-shadow: 0 4px 10px #fff, 0 -4px 10px #fff;
  pointer-events: none;
}

.p-hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(32 / 1296 * 100vw); /* 32px */
  line-height: 1.4;
  margin-bottom: calc(16 / 1296 * 100vw); /* 16px — Figma 103:33 gap */
}

.p-hero__text {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: calc(22 / 1296 * 100vw); /* 22px */
  line-height: 1.8;
  text-align: left;
}

/* ==========================================================================
   Concern
   ========================================================================== */
.p-concern {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 / 1296 * 100vw); /* 28px */
}

.p-concern__lead {
  width: 100%;
  text-align: center;
}

.p-concern__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(30 / 1296 * 100vw); /* 30px */
  line-height: 1.4;
  letter-spacing: -0.06em;
}

.p-concern__sub {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: calc(24 / 1296 * 100vw); /* 24px */
  line-height: 1.8;
  margin-top: calc(14 / 1296 * 100vw); /* 14px */
}

.p-concern__deco {
  display: block;
  margin: calc(14 / 1296 * 100vw) auto 0; /* 14px */
  width: calc(239 / 1296 * 100vw); /* 239px */
  height: auto;
}

.p-concern__tags {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: calc(8 / 1296 * 100vw); /* 8px */
  width: 100%;
  max-width: 100%;
  padding: 0 calc(20 / 1296 * 100vw); /* 20px */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  scrollbar-width: none;
  cursor: grab;
}

.p-concern__tags.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.p-concern__tags::-webkit-scrollbar {
  display: none;
}

.p-concern__tag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: calc(24 / 1296 * 100vw) calc(16 / 1296 * 100vw); /* 24px 16px */
  font-family: inherit;
  font-weight: 700;
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.8;
  color: var(--color-main);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(86, 131, 143, 0.15);
}

.p-concern__tag--fill {
  background: var(--color-accent);
  border-color: transparent;
  color: var(--color-white);
  padding: calc(12 / 1296 * 100vw) calc(16 / 1296 * 100vw); /* 12px 16px */
  box-shadow: 0 4px 6px rgba(86, 131, 143, 0.3);
}

.p-concern__panel-wrap {
  width: 100%;
  padding: 0 calc(20 / 1296 * 100vw); /* 20px */
  box-sizing: border-box;
}

.p-concern__panel {
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding-bottom: calc(28 / 1296 * 100vw); /* 28px */
  display: none;
  flex-direction: column;
  align-items: center;
}

.p-concern__panel.is-active {
  display: flex;
  animation: concern-panel-fade 1.5s ease;
}

@keyframes concern-panel-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-concern__panel.is-active {
    animation: none;
  }
}

.p-concern__panel-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: calc(28 / 1296 * 100vw) 0; /* 28px */
}

.p-concern__icon-wrap {
  width: calc(39 / 1296 * 100vw); /* 39px */
  height: calc(39 / 1296 * 100vw);
  border-radius: var(--radius-pill);
  background: var(--color-panel);
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-concern__icon-wrap::before {
  content: "";
  width: calc(21 / 1296 * 100vw); /* 21px */
  height: calc(29 / 1296 * 100vw); /* 29px */
  background: url("../img/icons/icon_question.svg") center / contain no-repeat;
}

.p-concern__icon-wrap--white {
  background: var(--color-white);
}

.p-concern__icon-wrap--white::before {
  width: calc(29 / 1296 * 100vw); /* 29px */
  height: calc(31 / 1296 * 100vw); /* 31px */
  background-image: url("../img/icons/icon_star.svg");
}

.p-concern__panel-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(28 / 1296 * 100vw); /* 28px */
  line-height: 1.8;
  text-align: center;
}

.p-concern__panel-text {
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.8;
  padding: 0 calc(16 / 1296 * 100vw); /* 16px */
}

.p-concern__diagram {
  width: 100%;
  margin: calc(28 / 1296 * 100vw) 0; /* 28px */
}

.p-concern__diagram img {
  display: block;
  width: 100%;
  height: auto;
}

.p-concern__proposal-wrap {
  width: 100%;
  padding: 0 calc(16 / 1296 * 100vw); /* 16px */
  padding-bottom: calc(16 / 1296 * 100vw); /* 16px */
  box-sizing: border-box;
}

.p-concern__proposal {
  width: 100%;
  background: var(--color-panel);
  border-radius: calc(8 / 1296 * 100vw); /* 8px */
  padding: calc(16 / 1296 * 100vw); /* 16px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.p-concern__proposal-text {
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.8;
}

.p-concern__products {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(14 / 1296 * 100vw); /* 14px */
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(14 / 1296 * 100vw); /* 14px */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.p-concern__products.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.p-concern__products::-webkit-scrollbar {
  display: none;
}

.p-concern__product {
  flex: none;
  width: calc(288 / 1296 * 100vw); /* 288px */
  min-width: calc(288 / 1296 * 100vw); /* 288px */
  display: flex;
  flex-direction: column;
  gap: calc(14 / 1296 * 100vw); /* 14px */
  scroll-snap-align: center;
}

.p-concern__product:first-child {
  margin-left: calc(14 / 1296 * 100vw); /* 14px */
  scroll-snap-align: start;
}

.p-concern__product:last-child {
  margin-right: calc(14 / 1296 * 100vw); /* 14px */
  scroll-snap-align: end;
}

.p-concern__product-img {
  position: relative;
  width: calc(288 / 1296 * 100vw); /* 288px */
  border-radius: var(--radius-md);
  overflow: hidden;
}

.p-concern__product-img img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.p-concern__product-badge {
  position: absolute;
  top: 0;
  left: 1px;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
  font-size: calc(14 / 1296 * 100vw); /* 14px */
  line-height: 1.8;
  padding: 4px;
  border-radius: 8px 0 8px 0;
}

.p-concern__product-name,
.p-concern__product-price {
  font-weight: 700;
  font-size: calc(16 / 1296 * 100vw); /* 16px */
  line-height: 1.8;
  padding: 0 calc(14 / 1296 * 100vw); /* 14px */
  color: var(--color-main);
}

.p-concern__product-price span {
  font-size: calc(14 / 1296 * 100vw); /* 14px */
}

.p-concern__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(14 / 1296 * 100vw); /* 14px */
  padding: calc(14 / 1296 * 100vw) 0; /* 14px */
}

.p-concern__dot {
  width: calc(12 / 1296 * 100vw); /* 12px */
  height: calc(12 / 1296 * 100vw); /* 12px */
  border: none;
  border-radius: 50%;
  padding: 0;
  background: #c0e9f3;
  cursor: pointer;
}

.p-concern__dot.is-active {
  background: var(--color-accent);
}

.p-concern__btn-wrap {
  width: 100%;
  padding: calc(16 / 1296 * 100vw) calc(20 / 1296 * 100vw) 0; /* 16px 20px 0 */
  box-sizing: border-box;
}

/* ==========================================================================
   Series — Softique + B/E（Figma 103:185）
   ========================================================================== */
.p-series {
  width: 100%;
  padding: 0 calc(20 / 1296 * 100vw); /* 20px */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}

.p-series__softique {
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: calc(16 / 1296 * 100vw) calc(16 / 1296 * 100vw) 0 0; /* 16px */
  padding: calc(24 / 1296 * 100vw) 0; /* 24px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 / 1296 * 100vw); /* 24px */
}

.p-series__width {
  background: var(--color-accent-light);
  border-radius: 0 0 calc(16 / 1296 * 100vw) calc(16 / 1296 * 100vw); /* 16px */
  padding: calc(24 / 1296 * 100vw) 0; /* 24px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 / 1296 * 100vw); /* 28px */
}

.p-series__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-series__en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(34 / 1296 * 100vw); /* 34px */
  line-height: 1.4;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: calc(12 / 1296 * 100vw); /* 12px */
}

.p-series__ja {
  font-family: var(--font-serif);
  font-size: calc(16 / 1296 * 100vw); /* 16px */
  line-height: 1.4;
  padding-top: calc(12 / 1296 * 100vw); /* 12px */
  padding-bottom: calc(8 / 1296 * 100vw); /* 8px */
}

.p-series__media {
  width: 100%;
  padding: 0 calc(16 / 1296 * 100vw); /* 16px */
  box-sizing: border-box;
}

.p-series__media img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

.p-series__desc {
  width: 100%;
  padding: 0 calc(16 / 1296 * 100vw); /* 16px */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 / 1296 * 100vw); /* 16px */
}

.p-series__headline {
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(32 / 1296 * 100vw); /* 32px */
  line-height: 1.4;
  text-align: center;
}

.p-series__text {
  width: 100%;
  font-family: var(--font-sans);
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.8;
}

.p-series__slider {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-series__features {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(16 / 1296 * 100vw); /* 16px */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: nowrap;
  gap: calc(16 / 1296 * 100vw); /* 16px */
  scrollbar-width: none;
  cursor: grab;
}

.p-series__features.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.p-series__features::-webkit-scrollbar {
  display: none;
}

.p-series__feature {
  background: var(--color-panel);
  border-radius: var(--radius-md);
  flex: none;
  width: calc(288 / 1296 * 100vw); /* 288px */
  min-width: calc(288 / 1296 * 100vw); /* 288px */
  padding-bottom: calc(28 / 1296 * 100vw); /* 28px */
  color: var(--color-main);
  scroll-snap-align: center;
}

.p-series__feature:first-child {
  margin-left: calc(16 / 1296 * 100vw); /* 16px */
  scroll-snap-align: start;
}

.p-series__feature:last-child {
  margin-right: calc(16 / 1296 * 100vw); /* 16px */
  scroll-snap-align: end;
}

.p-series__feature-img {
  background: var(--color-white);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.p-series__feature-img img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.p-series__feature-title {
  font-weight: 500;
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.8;
  text-align: center;
  padding: calc(14 / 1296 * 100vw) calc(14 / 1296 * 100vw) 0;
}

.p-series__feature-text {
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.8;
  text-align: left;
  padding: calc(8 / 1296 * 100vw) calc(14 / 1296 * 100vw) 0; /* 8px 14px 0 */
}

.p-series__feature-text small {
  display: block;
  font-size: calc(14 / 1296 * 100vw); /* 14px */
}

.p-series__dots {
  width: 100%;
  padding: calc(16 / 1296 * 100vw) 0; /* 16px */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(14 / 1296 * 100vw); /* 14px */
}

.p-series__dot {
  width: calc(12 / 1296 * 100vw); /* 12px */
  height: calc(12 / 1296 * 100vw); /* 12px */
  border: none;
  border-radius: 50%;
  padding: 0;
  background: #a2d4e0;
  cursor: pointer;
}

.p-series__dot.is-active {
  background: var(--color-white);
}

.p-series__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(16 / 1296 * 100vw); /* 16px */
  width: 100%;
  padding: 0 calc(16 / 1296 * 100vw); /* 16px */
  margin-bottom: calc(28 / 1296 * 100vw); /* 28px */
  box-sizing: border-box;
}

.p-series__grid-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-white);
}

.p-series__grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-series__softique .p-series__grid {
  margin-bottom: 0;
}

.p-series__btn-wrap {
  width: 100%;
  padding: 0 calc(20 / 1296 * 100vw); /* 20px */
  box-sizing: border-box;
}

/* ==========================================================================
   Width (B / E) — nested in .p-series__width
   ========================================================================== */
.p-width__intro {
  text-align: center;
  padding: 0 calc(16 / 1296 * 100vw); /* 16px */
  box-sizing: border-box;
}

.p-width__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: calc(24 / 1296 * 100vw) 0; /* 24px */
  font-weight: inherit;
  font-size: inherit;
}

.p-width__label {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(16 / 1296 * 100vw); /* 16px */
  line-height: 1.4;
}

.p-width__en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(34 / 1296 * 100vw); /* 34px */
  line-height: 1.4;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: calc(14 / 1296 * 100vw); /* 14px */
  display: inline-block;
  margin-top: calc(14 / 1296 * 100vw); /* 14px */
}

.p-width__headline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(24 / 1296 * 100vw); /* 24px */
  line-height: 1.75;
}

.p-width__text {
  font-size: calc(16 / 1296 * 100vw); /* 16px */
  line-height: 1.75;
  text-align: left;
  margin-top: calc(16 / 1296 * 100vw); /* 16px */
}

.p-width__card-wrap {
  width: 100%;
  padding: 0 calc(16 / 1296 * 100vw); /* 16px */
  box-sizing: border-box;
}

.p-width__card {
  width: 100%;
  padding: calc(24 / 1296 * 100vw) 0; /* 24px */
  background: var(--color-white);
  border-radius: calc(8 / 1296 * 100vw); /* 8px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 / 1296 * 100vw); /* 24px */
  box-sizing: border-box;
}

.p-width__card-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-width__card-en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(28 / 1296 * 100vw); /* 28px */
  line-height: 1.4;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: calc(12 / 1296 * 100vw); /* 12px */
}

.p-width__card-ja {
  font-family: var(--font-serif);
  font-size: calc(16 / 1296 * 100vw); /* 16px */
  line-height: 1.4;
  padding-top: calc(12 / 1296 * 100vw); /* 12px */
  padding-bottom: calc(8 / 1296 * 100vw); /* 8px */
}

.p-width__card-media-wrap {
  width: 100%;
  padding: 0 calc(16 / 1296 * 100vw); /* 16px */
  box-sizing: border-box;
}

.p-width__card-media {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.p-width__card-media img {
  width: 100%;
  height: auto;
  display: block;
}

.p-width__card-headline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(24 / 1296 * 100vw); /* 24px */
  line-height: 1.4;
  text-align: center;
  padding: 0 calc(16 / 1296 * 100vw); /* 16px */
}

.p-width__check-wrap {
  width: 100%;
  padding: 0 calc(16 / 1296 * 100vw); /* 16px */
  box-sizing: border-box;
}

.p-width__check {
  width: 100%;
  background: var(--color-check);
  border-radius: calc(8 / 1296 * 100vw); /* 8px */
  padding: calc(16 / 1296 * 100vw); /* 16px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.p-width__check-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p-width__check-list li {
  display: flex;
  align-items: flex-start;
  gap: calc(8 / 1296 * 100vw); /* 8px */
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.75;
  color: var(--color-main);
}

.p-width__check-list li::before {
  content: "";
  flex-shrink: 0;
  width: calc(20 / 1296 * 100vw); /* 20px */
  height: calc(20 / 1296 * 100vw); /* 20px */
  margin-top: calc(7 / 1296 * 100vw); /* 7px */
  border-radius: var(--radius-pill);
  background-color: var(--color-main);
  background-image: url("../img/icons/icon_check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(20 / 1296 * 100vw) calc(8 / 1296 * 100vw); /* 20px 8px */
}

.p-width__check-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: calc(16 / 1296 * 100vw); /* 16px */
  line-height: 1.4;
  text-align: center;
  color: var(--color-main);
}

.p-width__check-label::after {
  content: "";
  width: calc(16 / 1296 * 100vw); /* 16px */
  height: calc(15 / 1296 * 100vw); /* 15px */
  background: url("../img/icons/icon_arrow_down.svg") center / contain no-repeat;
}

.p-width__check-text {
  width: 100%;
  font-weight: 700;
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.75;
  color: var(--color-main);
}

.p-width__card .p-series__grid {
  width: 100%;
  margin-bottom: 0;
}

.p-width__btn-wrap {
  width: 100%;
  padding: 0 calc(20 / 1296 * 100vw); /* 20px */
  box-sizing: border-box;
}

/* ==========================================================================
   Fitting
   ========================================================================== */
.p-fitting {
  width: 100%;
  padding: 0 calc(20 / 1296 * 100vw); /* 20px */
  box-sizing: border-box;
}

.p-fitting__inner {
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 / 1296 * 100vw); /* 24px */
  padding: calc(24 / 1296 * 100vw) calc(16 / 1296 * 100vw); /* 24px 16px */
  box-sizing: border-box;
}

.p-fitting__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(30 / 1296 * 100vw); /* 30px */
  line-height: 1.65;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  padding: calc(12 / 1296 * 100vw) 0 calc(8 / 1296 * 100vw); /* 12px 0 8px */
}

.p-fitting__media {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.p-fitting__media img {
  width: 100%;
  height: auto;
  display: block;
}

.p-fitting__headline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(28 / 1296 * 100vw); /* 28px */
  line-height: 1.75;
  text-align: center;
}

.p-fitting__text {
  font-size: calc(16 / 1296 * 100vw); /* 16px */
  line-height: 1.8;
}

.p-fitting__steps {
  width: 100%;
  background: var(--color-check);
  border-radius: calc(8 / 1296 * 100vw); /* 8px */
  padding: calc(24 / 1296 * 100vw) calc(16 / 1296 * 100vw); /* 24px 16px */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  list-style: none;
}

.p-fitting__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(6 / 1296 * 100vw); /* 6px */
  padding-bottom: calc(16 / 1296 * 100vw); /* 16px */
}

.p-fitting__step:last-child {
  padding-bottom: 0;
}

.p-fitting__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(20 / 1296 * 100vw); /* 20px — circle center */
  top: calc(40 / 1296 * 100vw); /* 40px — circle bottom */
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: #b0d8e7;
}

.p-fitting__step-num {
  flex-shrink: 0;
  width: calc(40 / 1296 * 100vw); /* 40px */
  height: calc(40 / 1296 * 100vw); /* 40px */
  border: 1px solid var(--color-main);
  border-radius: var(--radius-pill);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1;
  color: var(--color-main);
  background: transparent;
  box-sizing: border-box;
}

.p-fitting__step-num span {
  font-size: calc(10 / 1296 * 100vw); /* 10px */
  color: var(--color-step);
}

.p-fitting__step p {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.6;
  color: var(--color-main);
  padding-top: calc(6 / 1296 * 100vw); /* 6px */
}

/* ==========================================================================
   Event
   ========================================================================== */
.p-event {
  width: 100%;
  overflow: hidden;
  border-radius: calc(8 / 1296 * 100vw); /* 8px */
  background: #d0eff6;
}

.p-event__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 318 / 328;
  overflow: hidden;
}

.p-event__visual::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(38 / 1296 * 100vw); /* 38px */
  width: calc(235 / 1296 * 100vw); /* 235px */
  height: calc(292 / 1296 * 100vw); /* 292px */
  background: #a7dbeb;
  z-index: 0;
}

.p-event__img {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(222 / 318 * 100%);
  height: auto;
  aspect-ratio: 230 / 287;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.p-event__overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(10 / 1296 * 100vw); /* 10px */
  padding: calc(38 / 1296 * 100vw) 0 0 calc(16 / 1296 * 100vw); /* 38px 0 0 16px */
  width: calc(230 / 318 * 100%);
  box-sizing: border-box;
}

.p-event__badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(20 / 1296 * 100vw); /* 20px */
  line-height: 1.65;
  padding: 4px;
}

.p-event__titles {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.p-event__en {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: calc(34 / 1296 * 100vw); /* 34px */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-main);
  background: var(--color-white);
  padding: 4px;
  box-sizing: border-box;
}

.p-event__en span {
  display: inline-block;
  padding: 4px 0;
  border-bottom: 1px solid #d6ebf3;
}

.p-event__catch {
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(17 / 1296 * 100vw); /* 17px */
  line-height: 1.65;
  text-align: center;
  color: var(--color-main);
  background: var(--color-white);
  padding: 4px;
  box-sizing: border-box;
}

.p-event__body {
  background: var(--color-accent);
  color: var(--color-white);
  padding: calc(16 / 1296 * 100vw) calc(16 / 1296 * 100vw) calc(16 / 1296 * 100vw); /* 16px */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.p-event__period-label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(14 / 1296 * 100vw); /* 14px */
  line-height: 1.65;
  padding: calc(4 / 1296 * 100vw) 0; /* 4px */
}

.p-event__period {
  font-family: var(--font-serif);
  font-weight: 700;
  border-bottom: 1px solid var(--color-white);
  display: inline-block;
  padding: 0 4px 4px;
  margin-bottom: calc(8 / 1296 * 100vw); /* 8px */
}

.p-event__period-num {
  font-size: calc(32 / 1296 * 100vw); /* 32px */
  line-height: 1.65;
}

.p-event__period-unit {
  font-size: calc(20 / 1296 * 100vw); /* 20px */
  line-height: 1.65;
}

.p-event__period-tilde {
  font-size: calc(24 / 1296 * 100vw); /* 24px */
  line-height: 1.65;
}

.p-event__text {
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: calc(18 / 1296 * 100vw); /* 18px */
  line-height: 1.65;
  text-align: left;
  margin-bottom: calc(16 / 1296 * 100vw); /* 16px */
}

/* ==========================================================================
   SP layout (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .l-wrapper {
    flex-direction: column;
    height: auto;
    overflow: visible;
    gap: 0;
    align-items: stretch;
    justify-content: flex-start;
    /* ページ全高への cover 拡大を避け、画面サイズ基準にする */
    background-image: none;
  }

  .l-wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("../img/bg_img.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .p-top-nav {
    display: none;
  }

  .l-main-contents {
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 84px; /* CTA分 */
  }

  .l-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    height: 92px;
    padding: 0 4px;
    box-sizing: border-box;
    align-items: center;
  }

  .l-header__logo img {
    width: 241px;
    max-width: 241px;
    height: auto;
  }

  .l-main {
    gap: calc(32 / 390 * 100vw); /* 32px */
    padding-top: 92px;
    padding-bottom: calc(18 / 390 * 100vw); /* 18px */
  }

  .l-sp-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 12px 16px;
    box-sizing: border-box;
  }

  .l-sp-cta .c-btn {
    min-height: 60px;
    padding: 16px 24px;
    font-size: 20px;
  }

  .l-sp-cta .c-btn::after {
    display: none;
  }

  .c-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.1s ease;
  }

  .c-modal:not([hidden]) {
    display: block;
  }

  .c-modal.is-visible {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .c-modal {
      transition: none;
    }
  }

  .c-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .c-modal__dialog {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .c-modal__title {
    margin-top: auto;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-main);
    flex-shrink: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  @media (max-width: 400px) {
    .c-modal__title {
      font-size: 30px;
    }
  }

  .c-modal__list {
    width: min(100%, 358px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .c-modal__card {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: 0 4px 6px rgba(50, 109, 124, 0.2);
    box-sizing: border-box;
    color: var(--color-main);
  }

  .c-modal__card--accent {
    background: var(--color-accent);
    color: var(--color-white);
  }

  .c-modal__card-img {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
  }

  .c-modal__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .c-modal__card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .c-modal__card-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .c-modal__card-titles {
    display: flex;
    flex-direction: column;
  }

  .c-modal__card-en {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1;
    padding-bottom: 4px;
    color: inherit;
  }

  .c-modal__card--accent .c-modal__card-en {
    line-height: 1.4;
  }

  .c-modal__card-ja {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1;
    color: rgba(0, 76, 105, 0.8);
  }

  .c-modal__card--accent .c-modal__card-ja {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
  }

  .c-modal__card-titles::after {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    margin-top: 12px;
    background: var(--color-border);
  }

  .c-modal__card--accent .c-modal__card-titles::after {
    background: rgba(255, 255, 255, 0.3);
  }

  .c-modal__card-catch {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    color: inherit;
  }

  .c-modal__card .p-top-nav__circle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }

  .c-modal__card .p-top-nav__circle::before {
    width: 9px;
    height: 15px;
  }

  .c-modal__close::after {
    display: none;
  }

  .l-footer {
    padding: calc(22 / 390 * 100vw) /* 22px */ 0 calc(19 / 390 * 100vw) /* 19px */;
    font-size: calc(13 / 390 * 100vw) /* 13px */;
  }

  .l-footer__txt {
    font-size: calc(13 / 390 * 100vw) /* 13px */;
  }

  .l-footer__copyright {
    font-size: calc(12 / 390 * 100vw) /* 12px */;
  }

  #section-softique,
  #section-b,
  #section-e {
    scroll-margin-top: 92px;
  }

  /* Fit nav */
  .p-fit-nav {
    gap: calc(32 / 390 * 100vw); /* 32px */
    padding: 0 calc(20 / 390 * 100vw); /* 20px */
  }

  /* Buttons */
  .c-btn {
    min-height: calc(60 / 390 * 100vw); /* 60px */
    padding: calc(16 / 390 * 100vw) calc(24 / 390 * 100vw); /* 16px 24px */
    font-size: calc(20 / 390 * 100vw); /* 20px */
  }

  .c-btn::after {
    right: calc(24 / 390 * 100vw); /* 24px */
    width: calc(9 / 390 * 100vw); /* 9px */
    height: calc(17 / 390 * 100vw); /* 17px */
  }

  .c-btn--outline {
    padding: calc(16 / 390 * 100vw); /* 16px */
  }

  .c-btn--outline::after {
    right: calc(16 / 390 * 100vw); /* 16px */
  }

  .c-modal__close {
    box-sizing: border-box;
    width: min(100%, 358px);
    max-width: 100%;
    min-width: 0;
    min-height: 60px;
    margin-bottom: auto;
    padding: 16px;
    font-size: 20px;
    flex-shrink: 0;
    align-self: center;
  }

  /* Cards */
  .c-card {
    border-radius: calc(16 / 390 * 100vw) /* 16px */;
    padding: calc(24 / 390 * 100vw) calc(16 / 390 * 100vw); /* 24px 16px */
  }

  .c-card__titles {
    margin-bottom: calc(16 / 390 * 100vw); /* 16px */
  }

  .c-card__en {
    font-size: calc(34 / 390 * 100vw); /* 34px */
    padding-bottom: calc(12 / 390 * 100vw); /* 12px */
  }

  .c-card__titles--dark .c-card__en {
    font-size: calc(34 / 390 * 100vw); /* 34px */
  }

  .c-card__ja {
    font-size: calc(20 / 390 * 100vw); /* 20px */
    padding-top: calc(12 / 390 * 100vw); /* 12px */
    padding-bottom: calc(8 / 390 * 100vw); /* 8px */
  }

  .c-card__media {
    max-width: calc(318 / 390 * 100vw); /* 318px */
    border-radius: calc(8 / 390 * 100vw) /* 8px */;
  }

  .c-card__media--wide {
    border-radius: calc(8 / 390 * 100vw) /* 8px */;
  }

  .c-card__headline {
    font-size: calc(24 / 390 * 100vw); /* 24px */
    margin-top: calc(16 / 390 * 100vw); /* 16px */
    max-width: calc(318 / 390 * 100vw);
  }

  .c-card__headline--dark {
    font-size: calc(20 / 390 * 100vw); /* 20px */
    max-width: none;
  }

  .c-card__body {
    font-size: calc(18 / 390 * 100vw); /* 18px */
    margin-top: calc(8 / 390 * 100vw); /* 8px */
    margin-bottom: 0;
    max-width: calc(318 / 390 * 100vw);
  }

  .c-card .c-btn {
    margin-top: calc(16 / 390 * 100vw); /* 16px */
  }

  /* Hero */
  .p-hero__catch-line {
    font-size: calc(28 / 390 * 100vw); /* 28px */
    padding: calc(8 / 390 * 100vw); /* 8px */
  }

  .p-hero__catch-line--01 {
    top: calc(48 / 390 * 100vw); /* 48px */
    left: calc(86 / 390 * 100vw); /* 86px */
  }

  .p-hero__catch-line--02 {
    top: calc(79 / 390 * 100vw); /* 79px */
    left: calc(29 / 390 * 100vw); /* 29px */
  }

  .p-hero__intro {
    padding: calc(32 / 390 * 100vw) calc(20 / 390 * 100vw) 0; /* 32px 20px 0 */
  }

  .p-hero__en {
    top: 0;
    font-size: calc(28 / 390 * 100vw); /* 28px */
  }

  .p-hero__title {
    font-size: calc(32 / 390 * 100vw); /* 32px */
    margin-bottom: calc(16 / 390 * 100vw); /* 16px */
  }

  .p-hero__text {
    font-size: calc(22 / 390 * 100vw); /* 22px */
  }

  /* Concern */
  .p-concern {
    gap: calc(22 / 390 * 100vw); /* 22px */
  }

  .p-concern__title {
    font-size: calc(30 / 390 * 100vw); /* 30px */
  }

  .p-concern__sub {
    font-size: calc(24 / 390 * 100vw); /* 24px */
    margin-top: calc(8 / 390 * 100vw); /* 8px */
  }

  .p-concern__deco {
    width: calc(239 / 390 * 100vw); /* 239px */
    margin-top: calc(8 / 390 * 100vw); /* 8px */
  }

  .p-concern__tags {
    gap: calc(8 / 390 * 100vw) /* 8px */;
    padding: 0 calc(20 / 390 * 100vw) /* 20px */;
  }

  .p-concern__tag {
    padding: calc(24 / 390 * 100vw) /* 24px */ calc(16 / 390 * 100vw) /* 16px */;
    font-size: calc(18 / 390 * 100vw) /* 18px */;
  }

  .p-concern__tag--fill {
    padding: calc(12 / 390 * 100vw) /* 12px */ calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-concern__panel-wrap {
    padding: 0 calc(20 / 390 * 100vw); /* 20px */
  }

  .p-concern__panel {
    padding-bottom: calc(22 / 390 * 100vw); /* 22px */
  }

  .p-concern__panel-head {
    gap: calc(4 / 390 * 100vw); /* 4px */
    padding: calc(22 / 390 * 100vw) 0; /* 22px */
  }

  .p-concern__icon-wrap {
    width: calc(51 / 390 * 100vw); /* 51px */
    height: calc(51 / 390 * 100vw);
  }

  .p-concern__icon-wrap::before {
    width: calc(21 / 390 * 100vw); /* 21px */
    height: calc(29 / 390 * 100vw); /* 29px */
  }

  .p-concern__icon-wrap--white::before {
    width: calc(29 / 390 * 100vw); /* 29px */
    height: calc(31 / 390 * 100vw); /* 31px */
  }

  .p-concern__panel-title {
    font-size: calc(28 / 390 * 100vw); /* 28px */
  }

  .p-concern__panel-text {
    font-size: calc(19 / 390 * 100vw); /* 19px */
    padding: 0 calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-concern__proposal-text {
    font-size: calc(18 / 390 * 100vw); /* 18px */
  }

  .p-concern__diagram {
    margin: calc(22 / 390 * 100vw) 0; /* 22px */
  }

  .p-concern__proposal-wrap {
    padding: 0 calc(16 / 390 * 100vw) /* 16px */;
    padding-bottom: calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-concern__proposal {
    padding: calc(16 / 390 * 100vw) /* 16px */;
    border-radius: calc(8 / 390 * 100vw) /* 8px */;
  }

  .p-concern__products {
    gap: calc(15 / 390 * 100vw) /* 15px */;
    padding: 0;
    scroll-padding-inline: calc(15 / 390 * 100vw) /* 15px */;
  }

  .p-concern__product {
    width: calc(288 / 390 * 100vw); /* 288px */
    min-width: calc(288 / 390 * 100vw); /* 288px */
    gap: calc(8 / 390 * 100vw) /* 8px */;
  }

  .p-concern__product:first-child {
    margin-left: calc(15 / 390 * 100vw) /* 15px */;
  }

  .p-concern__product:last-child {
    margin-right: calc(15 / 390 * 100vw) /* 15px */;
  }

  .p-concern__product-img {
    width: calc(288 / 390 * 100vw); /* 288px */
  }

  .p-concern__product-badge {
    font-size: calc(15 / 390 * 100vw) /* 15px */;
    padding: calc(4 / 390 * 100vw) /* 4px */;
  }

  .p-concern__product-name,
  .p-concern__product-price {
    font-size: calc(19 / 390 * 100vw) /* 19px */;
    padding: 0 calc(8 / 390 * 100vw) /* 8px */;
  }

  .p-concern__product-price span {
    font-size: calc(15 / 390 * 100vw) /* 15px */;
  }

  .p-concern__dots {
    gap: calc(14 / 390 * 100vw) /* 14px */;
    padding: calc(15 / 390 * 100vw) /* 15px */ 0;
  }

  .p-concern__dot {
    width: calc(12 / 390 * 100vw) /* 12px */;
    height: calc(12 / 390 * 100vw) /* 12px */;
  }

  .p-concern__btn-wrap {
    padding: calc(16 / 390 * 100vw) /* 16px */ calc(20 / 390 * 100vw) /* 20px */ 0;
  }

  /* Series */
  .p-series {
    width: 100%;
    padding: 0 calc(20 / 390 * 100vw); /* 20px */
  }

  .p-series__softique {
    border-radius: calc(16 / 390 * 100vw) /* 16px */ calc(16 / 390 * 100vw) /* 16px */ 0 0;
    padding: calc(24 / 390 * 100vw) /* 24px */ 0;
    gap: calc(24 / 390 * 100vw) /* 24px */;
  }

  .p-series__width {
    border-radius: 0 0 calc(16 / 390 * 100vw) /* 16px */ calc(16 / 390 * 100vw) /* 16px */;
    padding: calc(24 / 390 * 100vw) /* 24px */ 0;
    gap: calc(22 / 390 * 100vw); /* 22px */
  }

  .p-series__en {
    font-size: calc(34 / 390 * 100vw); /* 34px */
    padding-bottom: calc(12 / 390 * 100vw) /* 12px */;
  }

  .p-series__ja {
    font-size: calc(19 / 390 * 100vw); /* 19px */
    padding-top: calc(12 / 390 * 100vw) /* 12px */;
    padding-bottom: calc(8 / 390 * 100vw) /* 8px */;
  }

  .p-series__media {
    width: 100%;
    padding: 0 calc(16 / 390 * 100vw); /* 16px */
  }

  .p-series__desc {
    padding: 0 calc(16 / 390 * 100vw) /* 16px */;
    gap: calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-series__headline {
    font-size: calc(32 / 390 * 100vw) /* 32px */;
  }

  .p-series__text {
    font-size: calc(18 / 390 * 100vw) /* 18px */;
  }

  .p-series__features {
    gap: calc(16 / 390 * 100vw) /* 16px */;
    scroll-padding-inline: calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-series__feature {
    width: calc(288 / 390 * 100vw); /* 288px */
    min-width: calc(288 / 390 * 100vw); /* 288px */
    padding-bottom: calc(22 / 390 * 100vw) /* 22px */;
  }

  .p-series__feature:first-child {
    margin-left: calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-series__feature:last-child {
    margin-right: calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-series__feature-title {
    font-size: calc(19 / 390 * 100vw) /* 19px */;
    padding: calc(15 / 390 * 100vw) /* 15px */ calc(15 / 390 * 100vw) /* 15px */ 0;
  }

  .p-series__feature-text {
    font-size: calc(18 / 390 * 100vw) /* 18px */;
    padding: calc(8 / 390 * 100vw) /* 8px */ calc(15 / 390 * 100vw) /* 15px */ 0;
  }

  .p-series__feature-text small {
    font-size: calc(14 / 390 * 100vw) /* 14px */;
  }

  .p-series__dots {
    gap: calc(14 / 390 * 100vw) /* 14px */;
    padding: calc(16 / 390 * 100vw) /* 16px */ 0;
  }

  .p-series__dot {
    width: calc(12 / 390 * 100vw) /* 12px */;
    height: calc(12 / 390 * 100vw) /* 12px */;
  }

  .p-series__grid {
    gap: calc(16 / 390 * 100vw); /* 16px */
    width: 100%;
    padding: 0 calc(16 / 390 * 100vw); /* 16px */
    margin-bottom: calc(22 / 390 * 100vw); /* 22px */
  }

  .p-series__softique .p-series__grid {
    margin-bottom: 0;
  }

  .p-series__btn-wrap {
    padding: 0 calc(20 / 390 * 100vw) /* 20px */;
  }

  /* Width */
  .p-width__intro {
    padding: 0 calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-width__titles {
    margin: calc(24 / 390 * 100vw) /* 24px */ 0;
  }

  .p-width__label {
    font-size: calc(19 / 390 * 100vw); /* 19px */
  }

  .p-width__en {
    font-size: calc(34 / 390 * 100vw); /* 34px */
    padding-bottom: calc(11 / 390 * 100vw); /* 11px */
    margin-top: calc(8 / 390 * 100vw); /* 8px */
  }

  .p-width__headline {
    font-size: calc(24 / 390 * 100vw) /* 24px */;
  }

  .p-width__text {
    font-size: calc(19 / 390 * 100vw); /* 19px */
    margin-top: calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-width__card-wrap {
    padding: 0 calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-width__card {
    width: 100%;
    padding: calc(24 / 390 * 100vw) /* 24px */ 0;
    border-radius: calc(8 / 390 * 100vw) /* 8px */;
    gap: calc(24 / 390 * 100vw) /* 24px */;
  }

  .p-width__card-en {
    font-size: calc(34 / 390 * 100vw); /* 34px */
    padding-bottom: calc(12 / 390 * 100vw) /* 12px */;
  }

  .p-width__card-ja {
    font-size: calc(19 / 390 * 100vw); /* 19px */
    padding-top: calc(12 / 390 * 100vw) /* 12px */;
    padding-bottom: calc(8 / 390 * 100vw) /* 8px */;
  }

  .p-width__card-media-wrap {
    padding: 0 calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-width__card-headline {
    font-size: calc(22 / 390 * 100vw); /* 22px */
    padding: 0 calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-width__check-wrap {
    padding: 0 calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-width__check {
    width: 100%;
    padding: calc(16 / 390 * 100vw) /* 16px */;
    border-radius: calc(8 / 390 * 100vw) /* 8px */;
    gap: calc(4 / 390 * 100vw) /* 4px */;
  }

  .p-width__check-list {
    gap: calc(4 / 390 * 100vw) /* 4px */;
  }

  .p-width__check-list li {
    gap: calc(8 / 390 * 100vw) /* 8px */;
    font-size: calc(18 / 390 * 100vw) /* 18px */;
  }

  .p-width__check-list li::before {
    width: calc(20 / 390 * 100vw) /* 20px */;
    height: calc(20 / 390 * 100vw) /* 20px */;
    margin-top: calc(7 / 390 * 100vw) /* 7px */;
    background-size: calc(20 / 390 * 100vw) /* 20px */ calc(8 / 390 * 100vw) /* 8px */;
  }

  .p-width__check-label {
    font-size: calc(16 / 390 * 100vw) /* 16px */;
    padding: calc(4 / 390 * 100vw) /* 4px */ 0;
    gap: calc(4 / 390 * 100vw) /* 4px */;
  }

  .p-width__check-label::after {
    width: calc(16 / 390 * 100vw) /* 16px */;
    height: calc(15 / 390 * 100vw) /* 15px */;
  }

  .p-width__check-text {
    font-size: calc(18 / 390 * 100vw) /* 18px */;
  }

  .p-width__card .p-series__grid {
    width: 100%;
    margin-bottom: 0;
  }

  .p-width__btn-wrap {
    padding: 0 calc(20 / 390 * 100vw) /* 20px */;
  }

  /* Fitting */
  .p-fitting {
    width: 100%;
    padding: 0 calc(20 / 390 * 100vw) /* 20px */;
  }

  .p-fitting__inner {
    padding: calc(24 / 390 * 100vw) /* 24px */ calc(16 / 390 * 100vw) /* 16px */;
    gap: calc(24 / 390 * 100vw) /* 24px */;
  }

  .p-fitting__title {
    font-size: calc(34 / 390 * 100vw); /* 34px */
    padding: calc(12 / 390 * 100vw) /* 12px */ 0 calc(8 / 390 * 100vw) /* 8px */;
  }

  .p-fitting__headline {
    font-size: calc(24 / 390 * 100vw); /* 24px */
  }

  .p-fitting__text {
    font-size: calc(19 / 390 * 100vw); /* 19px */
  }

  .p-fitting__steps {
    width: 100%;
    padding: calc(24 / 390 * 100vw) /* 24px */ calc(16 / 390 * 100vw) /* 16px */;
    border-radius: calc(8 / 390 * 100vw) /* 8px */;
  }

  .p-fitting__step {
    gap: calc(6 / 390 * 100vw) /* 6px */;
    padding-bottom: calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-fitting__step:last-child {
    padding-bottom: 0;
  }

  .p-fitting__step:not(:last-child)::after {
    left: calc(20 / 390 * 100vw) /* 20px */;
    top: calc(40 / 390 * 100vw) /* 40px */;
  }

  .p-fitting__step-num {
    width: calc(40 / 390 * 100vw) /* 40px */;
    height: calc(40 / 390 * 100vw) /* 40px */;
    font-size: calc(18 / 390 * 100vw) /* 18px */;
  }

  .p-fitting__step-num span {
    font-size: calc(10 / 390 * 100vw) /* 10px */;
  }

  .p-fitting__step p {
    font-size: calc(18 / 390 * 100vw) /* 18px */;
    padding-top: calc(6 / 390 * 100vw) /* 6px */;
  }

  /* Event */
  .p-event {
    width: 100%;
    border-radius: calc(8 / 390 * 100vw) /* 8px */;
  }

  .p-event__visual::before {
    top: calc(38 / 390 * 100vw) /* 38px */;
    width: calc(235 / 390 * 100vw) /* 235px */;
    height: calc(292 / 390 * 100vw) /* 292px */;
  }

  .p-event__img {
    right: 0;
    top: 0;
    width: calc(222 / 318 * 100%);
    height: auto;
    aspect-ratio: 230 / 287;
  }

  .p-event__overlay {
    gap: calc(10 / 390 * 100vw) /* 10px */;
    padding: calc(38 / 390 * 100vw) /* 38px */ 0 0 calc(16 / 390 * 100vw) /* 16px */;
    width: calc(230 / 318 * 100%);
  }

  .p-event__badge {
    font-size: calc(20 / 390 * 100vw) /* 20px */;
    padding: calc(4 / 390 * 100vw) /* 4px */;
  }

  .p-event__en {
    font-size: calc(34 / 390 * 100vw) /* 34px */;
    padding: calc(4 / 390 * 100vw) /* 4px */;
  }

  .p-event__en span {
    padding: calc(4 / 390 * 100vw) /* 4px */ 0;
  }

  .p-event__catch {
    font-size: calc(17 / 390 * 100vw) /* 17px */;
    padding: calc(4 / 390 * 100vw) /* 4px */;
  }

  .p-event__body {
    padding: calc(16 / 390 * 100vw) /* 16px */;
  }

  .p-event__period-label {
    font-size: calc(14 / 390 * 100vw) /* 14px */;
    padding: calc(4 / 390 * 100vw) /* 4px */ 0;
  }

  .p-event__period {
    padding: 0 calc(4 / 390 * 100vw) /* 4px */ calc(4 / 390 * 100vw) /* 4px */;
    margin-bottom: calc(8 / 390 * 100vw) /* 8px */;
  }

  .p-event__period-num {
    font-size: calc(32 / 390 * 100vw) /* 32px */;
  }

  .p-event__period-unit {
    font-size: calc(20 / 390 * 100vw) /* 20px */;
  }

  .p-event__period-tilde {
    font-size: calc(24 / 390 * 100vw) /* 24px */;
  }

  .p-event__text {
    font-size: calc(18 / 390 * 100vw) /* 18px */;
    margin-bottom: calc(16 / 390 * 100vw) /* 16px */;
  }
}