/* ============================================================
   Foundation
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

:root {
  --color-primary:    #3DC8A0;
  --color-primary-dark: #2BAA85;
  --color-black:      #191919;
  --color-dark:       #222222;
  --color-dark-bg:    #2A2A2A;
  --color-white:      #FFFFFF;
  --color-gray:       #F5F5F5;
  --color-gray-mid:   #CCCCCC;
  --color-text:       #101010;
  --color-text-light: #666666;

  --font-sans:  'ヒラギノ角ゴシック','Hiragino Sans','ＭＳ ゴシック', sans-serif;
  --font-title: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-num:   "DIN Alternate", "DIN Next", sans-serif;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  --transition: 0.25s ease;

  --header-h-pc: clamp(89px,calc(109px / var(--design-w-xl) * 100vw),109px);
  --header-h-sp: calc(130px / var(--design-w) * 100vw);

  /* 設計幅（750 / 1388 換算用）※値はここだけ変更 */
  --design-w: 750px;
  --design-w-xl: 1388px;
}

/* ==========================================================================
Reset CSS
========================================================================== */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

input {
  border-radius: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
}

optgroup {
  font-weight: bold;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
  cursor: pointer;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  outline: 1px dotted #000;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  appearance: button;
}

button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
  outline: none;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

legend {
  border: 0;
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  appearance: button;
  color: inherit;
  font: inherit;
}

[disabled] {
  cursor: default;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
    user-select: initial !important;
    -webkit-user-select: initial !important;
  }
}

textarea, input[type=text], input[type=email], input[type=tel] {
  font-size: max(1.15rem, 16px);
}
@media screen and (min-width: 768px) {
  textarea, input[type=text], input[type=email], input[type=tel] {
    font-size: max(1rem, 16px);
  }
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   Layout
   ============================================================ */

/* l-inner */
.l-inner {
  width: min(100%, 1282px);
  margin-inline: auto;
  padding-inline: calc(40px / var(--design-w) * 100vw);
}
.l-inner--md{
  width: min(100%, 1190px);
}

/* l-header */
.l-header {
  /* position: fixed;
  top: 0;
  left: 0; */
  width: 100%;
  height: var(--header-h-sp);
  background-color: transparent;
  z-index: 100;
  transition: box-shadow var(--transition);
}

/* .l-header.is-scrolled {
  background-color: var(--color-white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
} */

.l-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

.l-header__logo {
  display: block;
  flex-shrink: 0;
}

.l-header__logo img {
  width: calc(322px / var(--design-w) * 100vw);
  height: auto;
}

.l-header__nav {
  display: none;
  margin-left: clamp(30px, calc(60px / var(--design-w-xl) * 100vw), 60px);
}

.l-header__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
}

.l-header__nav-link {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  transition: color var(--transition);
  white-space: nowrap;
}

.l-header__nav-link:hover {
  color: var(--color-primary);
}

/* hamburger */
.l-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  margin-left: auto;
}

.l-header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-black);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}

.l-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.l-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.l-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* l-main */
/* .l-main {
  padding-top: var(--header-h-sp);
} */

/* l-footer */
.l-footer {
  background-color: var(--color-white);
  color: var(--color-black);
  padding: calc(55px / var(--design-w) * 100vw) 0 calc(40px / var(--design-w) * 100vw);
  text-align: center;
  font-size: calc(16px / var(--design-w) * 100vw);
}

.l-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.l-footer__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(47px / var(--design-w) * 100vw);
}

.l-footer__logo img {
  width: calc(377px / var(--design-w) * 100vw);
  height: auto;
  aspect-ratio: 377 / 76;
}

.l-footer__company {
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-black);
  margin-bottom: calc(60px / var(--design-w) * 100vw);
}

.l-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.l-footer__nav-list li:first-child::before {
  padding-right: .5em;
}

.l-footer__nav-list li::before,
.l-footer__nav-list li:last-child::after {
  content: '｜';
  color: var(--color-black);
}

.l-footer__nav-list li::before {
  padding-left: .5em;
}

.l-footer__nav-link {
  font-weight: 500;
  color: var(--color-black);
  transition: color var(--transition);
}

.l-footer__nav-link:hover {
  color: var(--color-primary);
}

.l-footer__copyright {
  font-weight: 500;
  color: var(--color-black);
  margin-top: calc(55px / var(--design-w) * 100vw);
}

.l-page::before {
  display: none !important;
}


/* ============================================================
   Component
   ============================================================ */

/* c-btn */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(600px / var(--design-w) * 100vw);
  height: calc(110px / var(--design-w) * 100vw);
  border-radius: var(--radius-full);
  font-size: calc(26px / var(--design-w) * 100vw);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  transition: background-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.c-btn--primary {
  background-color: var(--color-black);
  color: var(--color-white);
  border: 2px solid var(--color-black);
  margin: 0 auto;
}

.c-btn--primary:hover {
  background-color: var(--color-dark-bg);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.c-btn--outline {
  background-color: transparent;
  color: var(--color-black);
  border: 2px solid var(--color-black);
}

.c-btn--outline:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.c-btn--sm {
  position: relative;
  justify-content: flex-start;
  font-size: calc(18px / var(--design-w) * 100vw);
  width: calc(292px / var(--design-w) * 100vw);
  height: calc(56px / var(--design-w) * 100vw);
  gap: calc(32px / var(--design-w) * 100vw);
  padding-left: calc(50px / var(--design-w) * 100vw);
  margin-right: 0;
}

.c-btn--sm::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(28px / var(--design-w) * 100vw);
  margin: auto 0;
  content: '';
  display: block;
  width: calc(21px / var(--design-w) * 100vw);
  height: auto;
  aspect-ratio: 18 / 15;
  background-image: url('assets/images/arrow2_img.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.c-btn__icon {
  width: calc(21px / var(--design-w) * 100vw);
  height: auto;
}

/* c-heading */
.c-heading {
  font-family: var(--font-title);
  font-size: calc(45px / var(--design-w) * 100vw);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-black);
}

.c-heading--white {
  color: var(--color-white);
}


/* ============================================================
   Page: Hero
   ============================================================ */

@keyframes hero-marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@-webkit-keyframes hero-marquee-rtl {
  from { -webkit-transform: translateX(0); }
  to   { -webkit-transform: translateX(-50%); }
}

@keyframes hero-cursor-rotate {
  to { transform: rotate(360deg); }
}

.p-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(85px / var(--design-w) * 100vw);
  padding-bottom: calc(50px / var(--design-w) * 100vw);
}

/* --- Slider --- */
.p-hero__slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(277px / var(--design-w) * 100vw);
  overflow: hidden;
}

.p-hero__slider-track {
  display: inline-flex;
  gap: calc(30px / var(--design-w) * 100vw);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-animation: hero-marquee-rtl 22s linear infinite paused;
  animation: hero-marquee-rtl 22s linear infinite paused;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.p-hero__slide {
  flex: 0 0 calc(343px / var(--design-w) * 100vw);
  border-radius: calc(20px / var(--design-w) * 100vw);
  overflow: hidden;
  flex-shrink: 0;
}

.p-hero__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 343/277;
  object-fit: cover;
}

.p-hero__bg-text {
  font-family: "Bebas Neue", var(--font-num), sans-serif;
  font-size: calc(206px / var(--design-w) * 100vw);
  font-weight: 400;
  color: rgba(49, 49, 49, 0.06);
  position: absolute;
  bottom: calc(365px / var(--design-w) * 100vw);
  left: calc(-380px / var(--design-w) * 100vw);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.p-hero__visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: calc(100% - (90px / var(--design-w) * 100vw) * 2);
  margin: 0 auto;
  padding-top: calc(30px / var(--design-w) * 100vw);
}

.p-hero__catch {
  position: absolute;
  top: 0;
  left: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.1em;
  font-size: calc(24px / var(--design-w) * 100vw);
  text-align: left;
  font-weight: 500;
}

.p-hero__phone {
  position: relative;
  z-index: 2;
}

.p-hero__phone img {
  width: calc(387px / var(--design-w) * 100vw);
  height: auto;
}

.p-hero__cursor {
  position: absolute;
  right: calc(-17px / var(--design-w) * 100vw);
  bottom: calc(160px / var(--design-w) * 100vw);
  width: calc(235px / var(--design-w) * 100vw);
  height: calc(235px / var(--design-w) * 100vw);
  z-index: 3;
}

.p-hero__cursor-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(44px / var(--design-w) * 100vw);
  height: auto;
  z-index: 1;
}

.p-hero__cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: hero-cursor-rotate 15s linear infinite;
}

.p-hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20px / var(--design-w) * 100vw);
  margin-top: calc(16px / var(--design-w) * 100vw);
}

.p-hero__label {
  display: none;
}

.p-hero__heading {
  font-family: var(--font-title);
  font-size: calc(63px / var(--design-w) * 100vw);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.05em;
  color: var(--color-black);
}

.p-hero__heading > span{
  display: block;
  margin-left: .25em;
}

.p-hero__heading > span > span{
  letter-spacing: -.5em;
}

.p-hero__text {
  font-size: calc(24px / var(--design-w) * 100vw);
  color: var(--color-text-light);
  line-height: 1.6;
  letter-spacing: 0.1em;
  margin-bottom: calc(20px / var(--design-w) * 100vw);
}

.p-hero__text span{
  letter-spacing: -.5em;
}


/* ============================================================
   Page: Problems（こんなお悩みはありませんか？）
   ============================================================ */

.p-problems {
  background-color: var(--color-black);
  padding-top: 8vw;
  padding-bottom: 4vw;
  position: relative;
}

.p-problems__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.6vw;
}

.p-problems__heading {
  font-family: var(--font-title);
  font-size: min(6.8vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-white);
  margin: 0;
}

.p-problems__heading span {
  font-size: calc(60px / var(--design-w) * 100vw);
}

.p-problems__list {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: clamp(20px, 3vw, 30px) clamp(20px, 5.5vw, 75px);
  margin-left: calc(45px / var(--design-w) * 100vw);
  list-style: none;
}

.p-problems__item {
  position: relative;
  background-color: var(--color-white);
  border-radius: 16px;
  padding: calc(35px / var(--design-w) * 100vw) calc(30px / var(--design-w) * 100vw) calc(35px / var(--design-w) * 100vw) calc(90px / var(--design-w) * 100vw);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  overflow: visible;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-problems__item:first-of-type .p-problems__title {
  font-size: calc(30px / var(--design-w) * 100vw);
}

.p-problems__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.p-problems__title {
  font-size: calc(34px / var(--design-w) * 100vw);
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 8px;
  line-height: 1.3;
}

/* 番号バッジとhrを同じ行に並べるラッパー */
.p-problems__divider-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: calc(-90px / var(--design-w) * 100vw);
  margin-bottom: 12px;
}

/* 番号：divider-rowを基準に絶対配置 */
.p-problems__num {
  position: absolute;
  left: calc(-1 * calc(121px / var(--design-w) * 100vw) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: calc(121px / var(--design-w) * 100vw);
  height: calc(121px / var(--design-w) * 100vw);
  color: var(--color-black);
  background-color: var(--color-white);
  border: 1px solid #727c8e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: calc(44px / var(--design-w) * 100vw);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  z-index: 2;
}

.p-problems__divider {
  width: calc(min(14vw, 82px) * 1.5);
  border: none;
  border-top: 2px solid var(--color-black);
  margin: 0;
}

.p-problems__text {
  font-size: calc(18px / var(--design-w) * 100vw);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0;
}

/* セクション下部の矢印 */
.p-problems__arrow {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 20vw solid transparent;
  border-right: 20vw solid transparent;
  border-top: 8vw solid var(--color-black);
}


/* ============================================================
   Page: Solutions
   ============================================================ */

.p-solutions {
  padding-top: calc(90px / var(--design-w) * 100vw);
  padding-bottom: calc(75px / var(--design-w) * 100vw);
  background-color: var(--color-white);
}

.p-solutions__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(125px / var(--design-w) * 100vw);
}

.p-solutions__heading {
  font-family: var(--font-title);
  font-size: calc(53px / var(--design-w) * 100vw);
  margin: 0;
}

.p-solutions__head1 {
  font-size: calc(38px / var(--design-w) * 100vw);
}

.p-solutions__head2 {
  font-size: calc(44px / var(--design-w) * 100vw);
}

.p-solutions__head3 {
  font-size: calc(55px / var(--design-w) * 100vw);
  background: linear-gradient(to top,#E5E5E5 calc(17px / var(--design-w) * 100vw),transparent calc(17px / var(--design-w) * 100vw));
}

.p-solutions__list {
  display: flex;
  flex-direction: column;
  gap: calc(115px / var(--design-w) * 100vw);
  width: 100%;
  margin-bottom: calc(75px / var(--design-w) * 100vw);
}

.p-solutions__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  background-color: #F7F7F7;
  border-radius: calc(90px / var(--design-w) * 100vw);
}

.p-solutions__num {
  position: absolute;
  top: calc(-35px / var(--design-w) * 100vw);
  left: calc(-14px / var(--design-w) * 100vw);
  width: calc(185px / var(--design-w) * 100vw);
  height: auto;
}

.p-solutions__num img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.p-solutions__body {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 0 calc(50px / var(--design-w) * 100vw) calc(50px / var(--design-w) * 100vw) calc(50px / var(--design-w) * 100vw);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.p-solutions__image {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(246px / var(--design-w) * 100vw);
  margin: calc(-61px / var(--design-w) * 100vw) auto calc(15px / var(--design-w) * 100vw);
}

.p-solutions__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.p-solutions__title {
  font-size: calc(34px / var(--design-w) * 100vw);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: calc(10px / var(--design-w) * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(15px / var(--design-w) * 100vw);
}

.p-solutions__title::after {
  content: '';
  width: calc(28px / var(--design-w) * 100vw);
  height: 1px;
  background-color: var(--color-black);
}

.p-solutions__text {
  font-size: calc(23px / var(--design-w) * 100vw);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.8;
  margin-top: calc(5px / var(--design-w) * 100vw);
}


/* ============================================================
   Page: How To Use
   ============================================================ */

.p-howto {
  background-image: url('assets/images/howto-bg-sp_img.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-top: calc(80px / var(--design-w) * 100vw);
  padding-bottom: calc(65px / var(--design-w) * 100vw);
  position: relative;
  z-index: 2;
}

.p-howto__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(110px / var(--design-w) * 100vw);
}

.p-howto__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(calc(14px / var(--design-w) * 100vw),18px);
  text-align: center;
}

.p-howto__logo-icon {
  width: calc(52px / var(--design-w) * 100vw);
  height: auto;
  aspect-ratio: 52 / 46;
}

.p-howto__logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-howto__heading {
  font-family: var(--font-title);
  font-size: calc(45px / var(--design-w) * 100vw);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.4;
}

.p-howto__body {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.p-howto__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(16px, 2.5vw, 28px);
  width: calc(503px / var(--design-w) * 100vw);
  margin-left: auto;
  margin-right: calc(-20px / var(--design-w) * 100vw);
}


/* ============================================================
   Page: Voices
   ============================================================ */

.p-voices {
  background-color: var(--color-black);
  padding-top: calc(160px / var(--design-w) * 100vw);
  padding-bottom: calc(70px / var(--design-w) * 100vw);
  margin-top: calc(-65px / var(--design-w) * 100vw);
}

.p-voices__inner {
  display: flex;
  flex-direction: column;
  gap: calc(65px / var(--design-w) * 100vw);
}

.p-voices__heading {
  color: var(--color-white);
}

.p-voices__list {
  display: flex;
  flex-direction: column;
  gap: calc(70px / var(--design-w) * 100vw);
}

.p-voices__item {
  display: grid;
  grid-template-columns: calc(335px / var(--design-w) * 100vw) 1fr;
  grid-template-rows: auto auto;
  gap: calc(30px / var(--design-w) * 100vw) calc(20px / var(--design-w) * 100vw);
  align-items: start;
}

.p-voices__item:first-child {
  border-top: none;
  padding-top: 0;
}

.p-voices__photo {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 335/218;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.p-voices__photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.p-voices__info {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: calc(8px / var(--design-w) * 100vw);
}

.p-voices__company {
  font-size: calc(23px / var(--design-w) * 100vw);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.5;
}

.p-voices__name {
  display: flex;
  flex-direction: column;
  gap: calc(20px / var(--design-w) * 100vw);
  font-size: calc(38px / var(--design-w) * 100vw);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.p-voices__name-en {
  font-size: calc(19px / var(--design-w) * 100vw);
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}

.p-voices__text {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: calc(24px / var(--design-w) * 100vw);
  color: var(--color-white);
  line-height: 1.8;
}

/* ============================================================
   Page: Flow
   ============================================================ */

.p-flow {
  padding-top: calc(80px / var(--design-w) * 100vw);
  padding-bottom: calc(90px / var(--design-w) * 100vw);
  background-color: var(--color-white);
}

.p-flow__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 5vw, 56px);
}

.p-flow__sub {
  font-size: calc(28px / var(--design-w) * 100vw);
  font-weight: 700;
  background: linear-gradient(to top, #E5E5E5 calc(14px / var(--design-w) * 100vw), transparent calc(14px / var(--design-w) * 100vw)) no-repeat center 100%;
  background-size: 80% calc(14px / var(--design-w) * 100vw);
  max-width: max-content;
  margin: 0 auto;
}
.p-flow__sub span {
  font-family: var(--font-num);
  font-size: calc(37px / var(--design-w) * 100vw);
}
.p-flow__sub::after {
  content: '';
  display: inline-block;
  width: calc(21px / var(--design-w) * 100vw);
  height: auto;
  aspect-ratio: 21 / 42;
  background-image: url('assets/images/title-left.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(-1,1);
  margin-bottom: -6px;
  margin-left: calc(4px / var(--design-w) * 100vw);
}
.p-flow__sub::before {
  content: '';
  display: inline-block;
  width: calc(21px / var(--design-w) * 100vw);
  height: auto;
  aspect-ratio: 21 / 42;
  background-image: url('assets/images/title-left.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: -6px;
  margin-right: calc(14px / var(--design-w) * 100vw);
}

.p-flow__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(70px / var(--design-w) * 100vw);
  width: 100%;
  position: relative;
  margin-left: calc(26px / var(--design-w) * 100vw);
}

.p-flow__item {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  padding: calc(50px / var(--design-w) * 100vw) calc(12px / var(--design-w) * 100vw) calc(50px / var(--design-w) * 100vw) calc(60px / var(--design-w) * 100vw);
  background-color: var(--color-white);
  border: 1px solid #727C8E;
  border-radius: var(--radius-lg);
  gap: calc(30px / var(--design-w) * 100vw);
}

.p-flow__step {
  position: absolute;
  top: calc(-57px / var(--design-w) * 100vw);
  left: calc(-43px / var(--design-w) * 100vw);
  width: calc(125px / var(--design-w) * 100vw);
  height: calc(125px / var(--design-w) * 100vw);
  color: var(--color-black);
  background-color: var(--color-white);
  border: 1px solid #727c8e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.p-flow__step-label {
  font-family: var(--font-num);
  font-size: calc(20px / var(--design-w) * 100vw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.p-flow__step-num {
  font-family: var(--font-num);
  font-size: calc(40px / var(--design-w) * 100vw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-left: 1px;
}

.p-flow__icon {
  width: calc(166px / var(--design-w) * 100vw);
  height: auto;
  aspect-ratio: 166 / 183;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.p-flow__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-flow__title {
  font-size: calc(34px / var(--design-w) * 100vw);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--color-black);
  text-align: left;
}

.p-flow__text {
  font-size: calc(24px / var(--design-w) * 100vw);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}


/* ============================================================
   Page: FAQ
   ============================================================ */

.p-faq {
  padding-top: calc(80px / var(--design-w) * 100vw);
  padding-bottom: calc(100px / var(--design-w) * 100vw);
  background-color: var(--color-black);
}

.p-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(60px / var(--design-w) * 100vw);
}

.p-faq__heading {
  color: var(--color-white);
}

.p-faq__list {
  width: 100%;
  max-width: 910px;
  display: flex;
  flex-direction: column;
  gap: calc(30px / var(--design-w) * 100vw);
}

.p-faq__item {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.p-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(22px / var(--design-w) * 100vw);
  padding: calc(20px / var(--design-w) * 100vw) calc(44px / var(--design-w) * 100vw) calc(20px / var(--design-w) * 100vw) calc(30px / var(--design-w) * 100vw);
  min-height: calc(120px / var(--design-w) * 100vw);
  text-align: left;
  transition: background-color var(--transition);
}

.p-faq__question-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(34px / var(--design-w) * 100vw);
  height: calc(34px / var(--design-w) * 100vw);
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: calc(21px / var(--design-w) * 100vw);
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

.p-faq__question-text {
  flex: 1;
  font-family: var(--font-title);
  font-size: calc(24px / var(--design-w) * 100vw);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.3;
  letter-spacing: .01em;
}

.p-faq__question-arrow {
  display: block;
  width: calc(22px / var(--design-w) * 100vw);
  height: auto;
  aspect-ratio: 22 / 13;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform var(--transition);
}

.p-faq__question[aria-expanded="true"] .p-faq__question-arrow {
  transform: rotate(180deg);
}

.p-faq__answer {
  overflow: hidden;
  transition: height var(--transition);
}

.p-faq__answer[hidden] {
  display: none;
}

.p-faq__answer-inner {
  display: flex;
  align-items: center;
  gap: calc(22px / var(--design-w) * 100vw);
  margin: 0 calc(44px / var(--design-w) * 100vw) 0 calc(30px / var(--design-w) * 100vw);
  padding: calc(20px / var(--design-w) * 100vw) calc(22px / var(--design-w) * 100vw) calc(30px / var(--design-w) * 100vw) 0;
  border-top: 1px solid #c4c4c4;
}

.p-faq__answer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(34px / var(--design-w) * 100vw);
  height: calc(34px / var(--design-w) * 100vw);
  background-color: #E53935;
  color: var(--color-white);
  font-size: calc(21px / var(--design-w) * 100vw);
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

.p-faq__answer-inner p {
  flex: 1;
  font-size: calc(24px / var(--design-w) * 100vw);
  font-weight: 500;
  color: var(--color-black);
  line-height: 1.8;
}

/* ============================================================
   Page: Privacy Policy / Terms
   ============================================================ */
.p-terms__chapter {
  font-size: calc(30px / var(--design-w) * 100vw);
  font-weight: 700;
  letter-spacing: .2em;
  margin-top: calc(80px / var(--design-w) * 100vw);
  margin-bottom: calc(40px / var(--design-w) * 100vw);
}

.p-terms__chapter:first-child {
  margin-top: 0;
}

.p-terms__sub-item {
  font-size: calc(22px / var(--design-w) * 100vw);
  line-height: 1.9;
  text-indent: -1.8em;
  padding-left: 0.2em;
  margin-top: calc(6px / var(--design-w) * 100vw);
}

.p-terms .p-privacypolicy__list li {
  margin-bottom: 1.2em;
}

.p-terms__date {
  margin-top: calc(60px / var(--design-w) * 100vw);
  text-align: right;
  font-size: calc(24px / var(--design-w) * 100vw);
  line-height: 1.9;
}

/* Tokutei */
.p-tokutei__table {
  width: 100%;
  border-collapse: collapse;
}

.p-tokutei__row {
  border-top: 1px solid #d9d9d9;
}

.p-tokutei__row:last-child {
  border-bottom: 1px solid #d9d9d9;
}

.p-tokutei__label {
  width: calc(290px / var(--design-w) * 100vw);
  padding: calc(35px / var(--design-w) * 100vw) calc(20px / var(--design-w) * 100vw) calc(35px / var(--design-w) * 100vw) 0;
  font-size: calc(24px / var(--design-w) * 100vw);
  line-height: 1.33;
  letter-spacing: .04em;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.p-tokutei__value {
  padding: calc(28px / var(--design-w) * 100vw) calc(20px / var(--design-w) * 100vw);
  font-size: calc(24px / var(--design-w) * 100vw);
  line-height: 1.33;
  letter-spacing: -.04em;
  vertical-align: middle;
}

.p-privacypolicy {
  position: relative;
}

.c-page-kv {
  position: relative;
  overflow: hidden;
  padding-top: calc(70px / var(--design-w) * 100vw);
  padding-bottom: calc(75px / var(--design-w) * 100vw);
}

.c-page-kv--dark {
  background-color: var(--color-black);
}

.c-page-kv__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.c-page-kv__bg-text {
  position: absolute;
  top: 53%;
  left: 0;
  transform: translateY(-50%);
  font-family: "Bebas Neue", var(--font-num), sans-serif;
  font-size: calc(205px / var(--design-w) * 100vw);
  line-height: 1;
  color: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}

.c-page-kv__title-wrap {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap-reverse;
  gap: calc(20px / var(--design-w) * 100vw);
  z-index: 1;
}

.c-page-kv__title-en {
  font-family: "Bebas Neue", var(--font-num), sans-serif;
  font-size: calc(110px / var(--design-w) * 100vw);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--color-white);
}

.c-page-kv__title-ja {
  font-size: calc(20px / var(--design-w) * 100vw);
  font-weight: 700;
  color: var(--color-white);
  font-style: italic;
  letter-spacing: .1em;
}

.p-privacypolicy__inner {
  margin-top: calc(34px / var(--design-w) * 100vw);
}

.p-privacypolicy__content {
  padding: calc(70px / var(--design-w) * 100vw) 0;
}

.p-privacypolicy__block + .p-privacypolicy__block {
  margin-top: calc(80px / var(--design-w) * 100vw);
}

.p-privacypolicy__heading {
  border-left: calc(5px / var(--design-w) * 100vw) solid #a7a7a7;
  padding: 2px 0 2px calc(16px / var(--design-w) * 100vw);
  font-size: calc(30px / var(--design-w) * 100vw);
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: .04em;
  margin-bottom: calc(35px / var(--design-w) * 100vw);
}

.p-privacypolicy__block p {
  font-size: calc(24px / var(--design-w) * 100vw);
  line-height: 1.87;
  letter-spacing: -.04em;
}

.p-privacypolicy__list {
  margin: 1.2em 0;
  display: flex;
  flex-direction: column;
  padding-left: 1.2em;
  list-style-type: decimal;
}

.p-privacypolicy__list li {
  font-size: calc(24px / var(--design-w) * 100vw);
  line-height: 1.87;
  letter-spacing: -.04em;
  display: list-item;
}

.p-privacypolicy__contact {
  margin-top: calc(24px / var(--design-w) * 100vw);
}

.c-page-kv__breadcrumb {
  margin-top: calc(12px / var(--design-w) * 100vw);
  position: relative;
  z-index: 1;
}

.c-page-kv__breadcrumb-list {
  display: flex;
  align-items: center;
  gap: calc(8px / var(--design-w) * 100vw);
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-page-kv__breadcrumb-link,
.c-page-kv__breadcrumb-sep,
.c-page-kv__breadcrumb-current {
  font-size: max(10px,calc(15px / var(--design-w) * 100vw));
  color: var(--color-white);
  text-decoration: none;
}

.u-md-block {
  display: none;
}

/* ============================================================
   Responsive: Tablet+ (min-width: 768px)
   ============================================================ */

@media (min-width: 768px) {
  body{
    position: relative;
  }

  body::before{
    content: '';
    display: block;
    width: min(calc(739px / var(--design-w-xl) * 100vw),739px);
    height: auto;
    aspect-ratio: 739 / 372;
    background-image: url('assets/images/herocircle-pc_img.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: calc(
      ((100vw - min(100vw, 1282px)) / 2) + (365px / var(--design-w-xl) * min(100vw, 1282px))
    );
    z-index: -1;
  }

  /* Header */
  .l-header {
    height: var(--header-h-pc);
  }

  /* .l-main {
    padding-top: var(--header-h-pc);
  } */

  .l-header__logo {
    width: clamp(177px,calc(227px / var(--design-w-xl) * 100vw),227px);
  }

  .l-header__nav ~ .c-btn {
    display: inline-flex;
  }

  .l-header__hamburger {
    display: none;
  }

  /* l-footer */
  .l-footer {
    padding-top: clamp(60px,calc(80px / var(--design-w-xl) * 100vw),80px);
    font-size: clamp(11px,calc(16px / var(--design-w-xl) * 100vw),16px);
  }

  .l-footer__logo img{
    width: clamp(252px,calc(352px / var(--design-w-xl) * 100vw),352px);
  }

  .l-footer__logo {
    margin-bottom: clamp(45px,calc(65px / var(--design-w-xl) * 100vw),65px);
  }

  .l-footer__company {
    margin-bottom: clamp(30px,calc(60px / var(--design-w-xl) * 100vw),60px);
  }

  .l-footer__copyright {
    margin-top: clamp(25px,calc(45px / var(--design-w-xl) * 100vw),45px);
  }

  /* l-inner */
  .l-inner {
    padding-inline: clamp(16px, 4vw, 60px);
  }

  /* c-btn */
  .c-btn {
    width: clamp(362px,calc(462px / var(--design-w-xl) * 100vw),462px);
    height: clamp(70px,calc(85px / var(--design-w-xl) * 100vw),85px);
    font-size: clamp(16px,calc(19px / var(--design-w-xl) * 100vw),19px);
  }

  .c-btn--sm {
    font-size: 13px;
    width: clamp(205px,calc(235px / var(--design-w-xl) * 100vw),235px);
    height: clamp(45px,calc(45px / var(--design-w-xl) * 100vw),45px);
    gap: clamp(20px,calc(30px / var(--design-w-xl) * 100vw),30px);
    padding-left: clamp(22px,calc(32px / var(--design-w-xl) * 100vw),32px);
    margin-left: clamp(65px,calc(85px / var(--design-w-xl) * 100vw),85px);
  }

  .c-btn--sm::after {
    right: 22px;
    width: 11px;
  }

  .c-btn__icon {
    width: 19px;
  }

  .c-heading {
    font-size: clamp(34px,calc(44px / var(--design-w-xl) * 100vw),44px);
  }

  /* Hero */
  .p-hero {
    padding-top: 0;
    padding-bottom: clamp(60px,calc(80px / var(--design-w-xl) * 100vw),80px);
  }
  .p-hero__slider {
    top: min(calc(115px / var(--design-w-xl) * 100vw),115px);
  }
  .p-hero__slide {
    flex: 0 0 clamp(243px,calc(343px / var(--design-w-xl) * 100vw),343px);
  }

  .p-hero__bg-text {
    font-size: min(calc(205px / var(--design-w-xl) * 100vw),205px);
    left: calc(-1 * min(calc(36px / var(--design-w-xl) * 100vw),36px));
    bottom: clamp(190px,calc(260px / var(--design-w-xl) * 100vw),260px);
  }

  .p-hero__heading {
    font-size: min(calc(63px / var(--design-w-xl) * 100vw),63px);
    margin-left: 1em;
  }

  .p-hero__heading span{
    display: inline;
    margin-left: 0;
  }

  .p-hero__content {
    position: relative;
    padding: 0;
    max-width: max-content;
    margin: 0 auto;
    gap: min(calc(30px / var(--design-w-xl) * 100vw),30px);
    margin-top: min(calc(30px / var(--design-w-xl) * 100vw),30px);
  }

  .p-hero__label {
    position: absolute;
    top: 0;
    left: clamp(70px,calc(110px / var(--design-w-xl) * 100vw),110px);
    font-size: min(calc(19px / var(--design-w-xl) * 100vw),19px);
    font-weight: 700;
    color: var(--color-black);
    line-height: 1;
    display: block;
    margin-top: calc(-1 * (min(calc(30px / var(--design-w-xl) * 100vw),30px) + 1em));
  }

  .p-hero__text {
    font-size: clamp(13px,calc(18px / var(--design-w-xl) * 100vw),18px);
    margin-bottom: 0;
  }

  .p-hero__phone {
    width: clamp(296px,calc(396px / var(--design-w-xl) * 100vw),396px);
    margin-right: calc(-1 * min(calc(45px / var(--design-w-xl) * 100vw),45px));
  }

  .p-hero__visual {
    width: clamp(545px,calc(100% - (255px / var(--design-w-xl) * 100vw) * 2),878px);
    padding-top: 0;
  }
  .p-hero__catch {
    font-size: clamp(13px,calc(18px / var(--design-w-xl) * 100vw),18px);
    margin-top: min(calc(90px / var(--design-w-xl) * 100vw),90px);
  }

  .p-hero__cursor {
    top: clamp(150px,calc(200px / var(--design-w-xl) * 100vw),200px);
    right: min(calc(95px / var(--design-w-xl) * 100vw),95px);
    width: min(calc(235px / var(--design-w-xl) * 100vw),235px);
    height: min(calc(235px / var(--design-w-xl) * 100vw),235px);
  }

  .p-hero__cursor-icon {
    width: min(calc(44px / var(--design-w-xl) * 100vw),44px);
  }


  /* Problems */
  .p-problems {
    padding-top: clamp(60px, 11vw, 85px);
  }
  .p-problems__heading {
    font-size: clamp(30px,calc(40px / var(--design-w-xl) * 100vw),40px);
  }
  .p-problems__heading::after {
    content: '';
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 566 / 30;
    background-image: url('assets/images/problem.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -12px;
  }
  .p-problems__heading span {
    font-size: clamp(30px,calc(40px / var(--design-w-xl) * 100vw),40px);
  }
  .p-problems__title {
    font-size: clamp(16px,calc(26px / var(--design-w-xl) * 100vw),26px);
  }
  .p-problems__item {
    padding: min(calc(30px / var(--design-w-xl) * 100vw),30px) min(calc(35px / var(--design-w-xl) * 100vw),35px) min(calc(30px / var(--design-w-xl) * 100vw),30px) min(calc(80px / var(--design-w-xl) * 100vw),80px);
  }
  .p-problems__item:first-of-type .p-problems__title {
    font-size: clamp(16px,calc(26px / var(--design-w-xl) * 100vw),26px);
  }
  .p-problems__divider-row {
    margin-left: calc(-1 * min(6.48vw, 90px));
  }
  .p-problems__divider {
    width: calc(min(calc(70px / var(--design-w-xl) * 100vw),70px) + (min(calc(94px / var(--design-w-xl) * 100vw),94px) / 2));
  }
  .p-problems__num {
    left: calc(-1 * min(calc(43px / var(--design-w-xl) * 100vw),43px));
    font-size: min(calc(34px / var(--design-w-xl) * 100vw),34px);
    width: min(calc(94px / var(--design-w-xl) * 100vw),94px);
    height: min(calc(94px / var(--design-w-xl) * 100vw),94px);
  }
  .p-problems__arrow {
    border-left: calc(260px / 2) solid transparent;
    border-right: calc(260px / 2) solid transparent;
    border-top: 60px solid var(--color-black);
  }
  .p-problems__inner {
    gap: clamp(40px, 6vw, 65px);
  }

  .p-problems__list {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    margin-left: min(calc(35px / var(--design-w-xl) * 100vw),35px);
  }

  .p-problems__text {
    font-size: clamp(10px,calc(15px / var(--design-w-xl) * 100vw),15px);
  }

  /* Solutions */
  .p-solutions {
    padding-top: clamp(100px,calc(120px / var(--design-w-xl) * 100vw),120px);
    padding-bottom: 75px;
  }
  .p-solutions__inner {
    gap: calc(100px / var(--design-w-xl) * 100vw);
  }
  .p-solutions__heading {
    font-size: clamp(38px,calc(48px / var(--design-w-xl) * 100vw),48px);
  }
  .p-solutions__head1 {
    font-size: clamp(22px,calc(32px / var(--design-w-xl) * 100vw),32px);
    padding-right: 5px;
  }
  .p-solutions__head2 {
    font-size: clamp(22px,calc(32px / var(--design-w-xl) * 100vw),32px);
    padding-left: 10px;
  }
  .p-solutions__head3 {
    font-size: clamp(42px,calc(52px / var(--design-w-xl) * 100vw),52px);
    background: linear-gradient(to top,#E5E5E5 17px,transparent 17px);
  }
  .p-solutions__list {
    margin-bottom: clamp(45px,calc(65px / var(--design-w-xl) * 100vw),65px);
    gap: clamp(60px,calc(80px / var(--design-w-xl) * 100vw),80px);
  }
  .p-solutions__item {
    justify-content: center;
    align-items: center;
    gap: 0 30px;
    grid-template-columns: 1fr clamp(192px,calc(292px / var(--design-w-xl) * 100vw),292px);
    grid-template-rows: auto 1fr;
    border-radius: min(calc(186px / var(--design-w-xl) * 100vw),186px);
    padding: min(calc(30px / var(--design-w-xl) * 100vw),30px) min(calc(90px / var(--design-w-xl) * 100vw),90px) 0 min(calc(130px / var(--design-w-xl) * 100vw),130px);
    clip-path: inset(-200px 0 0 0 round min(calc(186px / var(--design-w-xl) * 100vw),186px));
  }
  .p-solutions__num {
    top: calc(-1 * min(calc(51px / var(--design-w-xl) * 100vw),51px));
    left: min(calc(72px / var(--design-w-xl) * 100vw),72px);
    width: clamp(80px,calc(185px / var(--design-w-xl) * 100vw),185px);
  }
  .p-solutions__body {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
  }
  .p-solutions__image {
    grid-column: 2;
    grid-row: 1 / -1;
    align-items: flex-end;
    width: auto;
    margin: 0;
  }
  .p-solutions__image img {
    max-width: 100%;
  }
  .p-solutions__title {
    font-size: clamp(16px,calc(38px / var(--design-w-xl) * 100vw),38px);
    align-items: flex-start;
    gap: clamp(10px,calc(15px / var(--design-w-xl) * 100vw),15px);
    margin-bottom: 0;
  }
  .p-solutions__title::after {
    width: 28px;
  }
  .p-solutions__text {
    font-size: clamp(13px,calc(16px / var(--design-w-xl) * 100vw),16px);
    margin-top: min(calc(15px / var(--design-w-xl) * 100vw),15px);
  }

  /* Voices */
  .p-voices {
    padding-top: min(calc(170px / var(--design-w-xl) * 100vw),170px);
    padding-bottom: min(calc(70px / var(--design-w-xl) * 100vw),70px);
    margin-top: calc(-1 * max(33px,calc(45px / var(--design-w-xl) * 100vw)));
  }
  .p-voices__inner {
    gap: clamp(40px,calc(70px / var(--design-w-xl) * 100vw),70px);
  }
  .p-voices__list {
    gap: clamp(35px,calc(60px / var(--design-w-xl) * 100vw),60px);
  }
  .p-voices__item {
    grid-template-columns: clamp(200px,calc(318px / var(--design-w-xl) * 100vw),318px) 1fr;
    grid-template-rows: auto 1fr;
    gap: clamp(16px,calc(24px / var(--design-w-xl) * 100vw),24px) clamp(24px,calc(40px / var(--design-w-xl) * 100vw),40px);
  }
  .p-voices__photo {
    grid-row: 1 / -1;
    aspect-ratio: auto;
  }
  .p-voices__info {
    gap: clamp(6px,calc(10px / var(--design-w-xl) * 100vw),10px);
    align-self: end;
  }
  .p-voices__company {
    font-size: clamp(12px,calc(15px / var(--design-w-xl) * 100vw),15px);
  }
  .p-voices__name {
    flex-direction: row;
    align-items: baseline;
    gap: clamp(8px,calc(20px / var(--design-w-xl) * 100vw),20px);
    font-size: clamp(22px,calc(28px / var(--design-w-xl) * 100vw),28px);
  }
  .p-voices__name-en {
    font-size: clamp(12px,calc(14px / var(--design-w-xl) * 100vw),14px);
  }
  .p-voices__text {
    grid-column: 2;
    grid-row: 2;
    font-size: clamp(13px,calc(16px / var(--design-w-xl) * 100vw),16px);
    align-self: start;
  }

  /* Flow */
  .p-flow {
    padding-top: clamp(80px,calc(100px / var(--design-w-xl) * 100vw),100px);
    padding-bottom: clamp(80px,calc(100px / var(--design-w-xl) * 100vw),100px);
  }
  .p-flow__inner {
    gap: clamp(60px,calc(80px / var(--design-w-xl) * 100vw),80px);
  }
  .p-flow__sub {
    font-size: clamp(18px,calc(28px / var(--design-w-xl) * 100vw),28px);
    background: linear-gradient(to top, #E5E5E5 clamp(10px,calc(14px / var(--design-w-xl) * 100vw),14px), transparent clamp(10px,calc(14px / var(--design-w-xl) * 100vw),14px)) no-repeat center 100%;
    background-size: 80% clamp(10px,calc(14px / var(--design-w-xl) * 100vw),14px);
  }
  .p-flow__sub span {
    font-size: clamp(27px,calc(37px / var(--design-w-xl) * 100vw),37px);
  }
  .p-flow__sub::after {
    width: clamp(11px,calc(21px / var(--design-w-xl) * 100vw),21px);
    margin-left: clamp(4px,calc(4px / var(--design-w-xl) * 100vw),4px);
    margin-bottom: calc(-1 * min(calc(15px / var(--design-w-xl) * 100vw),15px));
  }
  .p-flow__sub::before {
    width: clamp(11px,calc(21px / var(--design-w-xl) * 100vw),21px);
    margin-right: clamp(14px,calc(24px / var(--design-w-xl) * 100vw),24px);
    margin-bottom: calc(-1 * min(calc(15px / var(--design-w-xl) * 100vw),15px));
  }
  .p-flow__list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(17px,calc(27px / var(--design-w-xl) * 100vw),27px);
    max-width: none;
    margin-left: 0;
  }
  .p-flow__step {
    top: calc(-1 * clamp(30px,calc(40px / var(--design-w-xl) * 100vw),40px));
    right: 0;
    left: 0;
    margin: 0 auto;
    width: clamp(64px,calc(94px / var(--design-w-xl) * 100vw),94px);
    height: clamp(64px,calc(94px / var(--design-w-xl) * 100vw),94px);
  }
  .p-flow__step-label {
    font-size: clamp(10px,calc(14px / var(--design-w-xl) * 100vw),14px);
  }
  
  .p-flow__step-num {
    font-size: clamp(20px,calc(30px / var(--design-w-xl) * 100vw),30px);
  }
  .p-flow__item {
    flex-direction: column;
    padding: clamp(47px,calc(77px / var(--design-w-xl) * 100vw),77px) clamp(12px,calc(22px / var(--design-w-xl) * 100vw),22px) clamp(25px,calc(35px / var(--design-w-xl) * 100vw),35px);
    gap: clamp(15px,calc(25px / var(--design-w-xl) * 100vw),25px);
    border-radius: min(calc(40px / var(--design-w-xl) * 100vw),40px);
  }
  .p-flow__icon {
    width: clamp(100px,calc(166px / var(--design-w-xl) * 100vw),166px);
  }

  .p-flow__title {
    font-size: clamp(18px,calc(26px / var(--design-w-xl) * 100vw),26px);
    text-align: center;
    margin-bottom: clamp(5px,calc(15px / var(--design-w-xl) * 100vw),15px);
  }

  .p-flow__text {
    font-size: clamp(13px,calc(17px / var(--design-w-xl) * 100vw),17px);
  }

  /* Howto */
  .p-howto {
    padding-top: 70px;
    padding-bottom: 65px;
  }
  .p-howto__logo-icon {
    width: clamp(52px,calc(66px / var(--design-w-xl) * 100vw),66px);
  }
  .p-howto__heading {
    font-size: clamp(34px,calc(44px / var(--design-w-xl) * 100vw),44px);
  }
  
  /* FAQ */
  .p-faq {
    padding-top: clamp(60px,calc(90px / var(--design-w-xl) * 100vw),90px);
    padding-bottom: clamp(90px,calc(110px / var(--design-w-xl) * 100vw),110px);
  }
  .p-faq__inner {
    gap: clamp(60px,calc(80px / var(--design-w-xl) * 100vw),80px);
  }
  .p-faq__list {
    gap: clamp(15px,calc(30px / var(--design-w-xl) * 100vw),30px);
  }
  .p-faq__item {
    border-radius: 20px;
  }
  .p-faq__question {
    gap: clamp(10px,calc(22px / var(--design-w-xl) * 100vw),22px);
    padding: clamp(15px,calc(30px / var(--design-w-xl) * 100vw),30px) clamp(20px,calc(40px / var(--design-w-xl) * 100vw),40px) clamp(15px,calc(30px / var(--design-w-xl) * 100vw),30px) clamp(15px,calc(30px / var(--design-w-xl) * 100vw),30px);
    min-height: clamp(80px,calc(100px / var(--design-w-xl) * 100vw),100px);
  }
  .p-faq__question-icon {
    font-size: clamp(16px,calc(21px / var(--design-w-xl) * 100vw),21px);
    width: clamp(25px,calc(45px / var(--design-w-xl) * 100vw),45px);
    height: clamp(25px,calc(45px / var(--design-w-xl) * 100vw),45px);
  }
  .p-faq__question-text {
    line-height: 1;
    font-size: clamp(16px,calc(22px / var(--design-w-xl) * 100vw),22px);
  }
  .p-faq__question-arrow {
    width: clamp(12px,calc(22px / var(--design-w-xl) * 100vw),22px);
  }
  .p-faq__answer-inner {
    gap: clamp(10px,calc(22px / var(--design-w-xl) * 100vw),22px);
    margin: 0 clamp(15px,calc(30px / var(--design-w-xl) * 100vw),30px);
    padding: clamp(15px,calc(30px / var(--design-w-xl) * 100vw),30px) clamp(25px,calc(45px / var(--design-w-xl) * 100vw),45px) clamp(15px,calc(30px / var(--design-w-xl) * 100vw),30px) 0;
  }

  .p-faq__answer-icon {
    width: clamp(25px,calc(45px / var(--design-w-xl) * 100vw),45px);
    height: clamp(25px,calc(45px / var(--design-w-xl) * 100vw),45px);
    font-size: clamp(16px,calc(21px / var(--design-w-xl) * 100vw),21px);
  }
  
  .p-faq__answer-inner p{
    font-size: clamp(16px,calc(18px / var(--design-w-xl) * 100vw),18px);
  }

  /* Privacy Policy / Terms */
  .p-terms__chapter {
    font-size: clamp(20px, calc(24px / var(--design-w-xl) * 100vw), 24px);
    margin-top: clamp(50px, calc(70px / var(--design-w-xl) * 100vw), 70px);
    margin-bottom: clamp(40px, calc(60px / var(--design-w-xl) * 100vw), 60px);
    text-align: center;
  }

  .p-terms__sub-item {
    font-size: clamp(13px, calc(15px / var(--design-w-xl) * 100vw), 15px);
  }

  .p-terms__date {
    font-size: clamp(13px, calc(15px / var(--design-w-xl) * 100vw), 15px);
    margin-top: clamp(40px, calc(60px / var(--design-w-xl) * 100vw), 60px);
  }

  /* Tokutei */
  .p-tokutei__label {
    width: min(calc(321px / var(--design-w-xl) * 100vw),321px);
    padding: 24px 0 24px min(calc(80px / var(--design-w-xl) * 100vw),80px);
    font-size: clamp(13px, calc(16px / var(--design-w-xl) * 100vw), 16px);
  }

  .p-tokutei__value {
    padding: 24px 16px;
    font-size: clamp(13px, calc(16px / var(--design-w-xl) * 100vw), 16px);
  }

  /* Privacy Policy */
  .c-page-kv {
    padding: 80px 0 60px;
  }

  .c-page-kv__bg-text {
    letter-spacing: .02em;
    left: calc(-1 * min(calc(36px / var(--design-w-xl) * 100vw), 36px));
    font-size: min(calc(205px / var(--design-w-xl) * 100vw), 205px);
  }

  .c-page-kv__title-wrap {
    gap: clamp(12px, calc(18px / var(--design-w-xl) * 100vw), 18px);
  }

  .c-page-kv__title-en {
    font-size: clamp(56px, calc(97px / var(--design-w-xl) * 100vw), 97px);
  }

  .c-page-kv__title-ja {
    font-size: clamp(12px, calc(18px / var(--design-w-xl) * 100vw), 18px);
  }

  .c-page-kv__breadcrumb {
    margin-top: clamp(8px, calc(10px / var(--design-w-xl) * 100vw), 10px);
  }

  .c-page-kv__breadcrumb-link,
  .c-page-kv__breadcrumb-sep,
  .c-page-kv__breadcrumb-current {
    font-size: 11px;
  }

  .p-privacypolicy__inner {
    margin-top: clamp(26px, calc(34px / var(--design-w-xl) * 100vw), 34px);
  }

  .p-privacypolicy__content {
    padding: 70px 0;
  }

  .p-privacypolicy__block + .p-privacypolicy__block {
    margin-top: clamp(30px, calc(55px / var(--design-w-xl) * 100vw), 55px);
  }

  .p-privacypolicy__heading {
    border-left-width: 3px;
    font-size: clamp(20px, calc(24px / var(--design-w-xl) * 100vw), 24px);
    padding-left: clamp(10px, calc(14px / var(--design-w-xl) * 100vw), 14px);
    margin-bottom: clamp(20px, calc(35px / var(--design-w-xl) * 100vw), 35px);
  }

  .p-privacypolicy__block p,
  .p-privacypolicy__list li {
    font-size: clamp(13px, calc(15px / var(--design-w-xl) * 100vw), 15px);
  }
  
  .u-md-hidden {
    display: none;
  }

  .u-md-block {
    display: inline;
  }
}

@media (min-width: 800px) {
  .p-howto__headingbr {
    display: none;
  }
  .p-howto {
    background-image: url('assets/images/howto-bg2-pc_img.png'), url('assets/images/howto-bg-pc_img.png');
    background-size: 430px ,cover;
    background-position: center bottom, center bottom;
    background-repeat: no-repeat, no-repeat;
  }
  .p-howto__inner {
    gap: 40px
  }
  .p-howto__list {
    width: 100%;
    align-items: flex-start;
    margin: 0;
  }
  .p-howto__item:nth-child(even) {
    margin-left: auto;
  }
  .p-howto__item-text {
    width: min(calc(471px / var(--design-w-xl) * 100vw),471px);
  }
}

@media (min-width: 1024px) {
  .l-header__nav {
    display: block;
  }
}