@charset "UTF-8";
/* リセットCSS: スタイルの初期化 */
@layer settings{
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,::before,::after{border-style:solid;border-width:0;box-sizing:border-box;min-width:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;line-height:1.15}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{list-style:none;margin:0;padding:0}dt{font-weight:700}dd{margin-left:0}hr{border-top-width:1px;box-sizing:content-box;clear:both;color:inherit;height:0;margin:0;overflow:visible}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;color:inherit;text-decoration:none}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border-radius:0;color:inherit;font:inherit;margin:0;padding:0;text-align:inherit;text-transform:inherit;vertical-align:middle}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;min-width:0;padding:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-collapse:collapse;border-color:inherit}caption{text-align:left}td,th{padding:0;vertical-align:top}th{font-weight:700;text-align:left}}
/* 設定: 全体の設定や変数など */
@layer settings{
/* settings
--------------------------- */
:root {
  /* 色 */
  --color-white: #fff;
  --color-light-gray: #ddd;
  --color-gray: #aaa;
  --color-black: #222;
  --color-primary: #f49d3d;
  --color-secondary: #f6f5f4;
  --color-accent: #3d94f4;
  --color-success: #4caf50;
  --color-danger: #e53e3e;
  --color-warning: #ffca28;

  --color-background: color-mix(in srgb, var(--color-black) 20%, transparent);
  --color-selection: color-mix(in srgb, var(--color-black) 80%, transparent);

  /* フォントの種類 */
  --font-sans: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "BIZ UDPGothic", meiryo, sans-serif; /* ゴシック体 */
  --font-serif: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif; /* 明朝体 */
  --font-open-sans: "Open Sans", var(--font-sans);
  --font-base: var(--font-sans);

  /* フォントサイズ */
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-base: var(--font-size-md);

  /* フォントの太さ */
  --font-weight-base: 400;
  --font-weight-thin: 100;
  --font-weight-bold: 700;

  /* 文字間隔 */
  --letter-spacing-none: 0;
  --letter-spacing-tight: 0.025em;
  --letter-spacing-default: 0.05em;

  /* 行ボックスの高さ */
  --line-height-base: 1;

  /* 余白 */
  --spacing-xs: 0.5em;
  --spacing-sm: 1em;
  --spacing-md: 2em;
  --spacing-lg: 3em;
  --spacing-xl: 4em;
  --spacing-2xl: 5em;

  --spacing-gutter: max(5vi, 20px);

  /* ビューポートサイズの定義 */
  --viewport-xs-min: 320;
  --viewport-xs: 375;
  --viewport-xs-max: 767;
  --viewport-sm: 768;
  --viewport-sm-max: 959;
  --viewport-md: 960;
  --viewport-md-max: 1023;
  --viewport-lg: 1024;
  --viewport-lg-max: 1199;
  --viewport-xl: 1200;
  --viewport-xl-max: 1439;
  --viewport-2xl: 1440;

  /* コンテンツサイズ */
  --header-block-size: 0px;
  --footer-block-size: 0px;

  --inner-padding-xs: 16px;
  --inner-padding-sm: 24px;
  --inner-padding-md: 40px;
  --inner-padding-lg: 40px;
  --inner-padding-xl: 40px;

  /* 透明度設定 */
  --opacity-base: 0.9;
  --opacity-hover: 0.8;

  /* ボーダー設定 */
  --border-radius-base: 0.25em;

  /* アスペクト比 */
  --aspect-ratio-thumbnail: 1.91 / 1;
  --aspect-ratio-16-9: 16 / 9;
  --aspect-ratio-4-3: 4 / 3;
  --aspect-ratio-1-1: 1 / 1;

  /* z-indexレイヤー */
  --z-index-top: calc(infinity);
  --z-index-modal-overlay: 100;
  --z-index-header-hamburger: 60;
  --z-index-drawer: 50;
  --z-index-drawer-overlay: 40;
  --z-index-header: 30;
  --z-index-scroll-top: 10;
  --z-index-default: 1;
  --z-index-top-bg: -99;

  /* シャドウ */
  --shadow-button: 2px 2px 3px 0 rgb(0 0 0 / 10%);

  /* フォーカススタイル */
  --focus-outline: 2px solid var(--color-accent);

  /* アニメーション 持続時間 */
  --duration-rapidly: 0.2s;
  --duration-default: 0.4s;
  --duration-relaxed: 1s;

  /* アニメーション イージング関数 */
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);

  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);

  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);

  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* クリップパス形状 */
  --clip-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --clip-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --clip-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --clip-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
  --clip-triangle-lower-left: polygon(0 0, 100% 100%, 0 100%);
  --clip-triangle-upper-left: polygon(0 0, 100% 0, 0 100%);
  --clip-triangle-lower-right: polygon(100% 0, 100% 100%, 0 100%);
  --clip-triangle-upper-right: polygon(0 0, 100% 0, 100% 100%);
  --clip-star: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  /* 関数
  --------------------------- */
  /* clampを使用したレスポンシブサイズ:
    --clamp-size-px-min-viewport: 375;
    --clamp-size-px-max-viewport: 1024;
    --clamp-size-px-min-size: 14;
    --clamp-size-px-max-size: 16;
    property: var(--clamp-size-px);
   */
  /* 最小ビューポート幅と最大ビューポート幅を定義 */
  --clamp-size-px-viewport-min: 375;
  --clamp-size-px-viewport-max: 1024;
  /* サイズの最小値と最大値 */
  --clamp-size-px-min: 16;
  --clamp-size-px-max: 20;
  /* 計算用のカスタムプロパティ */
  --clamp-size-px-root-font-size: 10; /* html font-size: 62.5%の場合10, 100%の場合16 */
  --clamp-size-px-slope: calc((var(--clamp-size-px-max) - var(--clamp-size-px-min)) / (var(--clamp-size-px-viewport-max) - var(--clamp-size-px-viewport-min)));
  --clamp-size-px-y-axis-intersection: calc(var(--clamp-size-px-min) - (var(--clamp-size-px-slope) * var(--clamp-size-px-viewport-min)));
  --clamp-size-px-preffered-value: calc(var(--clamp-size-px-y-axis-intersection) * (10px / var(--clamp-size-px-root-font-size)) + (var(--clamp-size-px-slope) * 100vw));
  /* 実行用のカスタムプロパティ */
  --clamp-size-px: clamp(calc(var(--clamp-size-px-min) * (10px / var(--clamp-size-px-root-font-size))), var(--clamp-size-px-preffered-value), calc(var(--clamp-size-px-max) * (10px / var(--clamp-size-px-root-font-size))));
}

*,
*:before,
*:after {
  --clamp-root-font-size: 10; /* html font-size: 62.5%の場合10, 100%の場合16*/
  --clamp-slope: calc(
    (var(--clamp-max) - var(--clamp-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --clamp-y-axis-intersection: calc(
    var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min))
  );
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) +
      (var(--clamp-slope) * 100vi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );

  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-size: var(--clamp);
  margin: 0;
}

/* 擬似クラス,疑似要素
--------------------------- */
:where(
    :-moz-any-link,
    button,
    [type="button"],
    [type="reset"],
    [type="submit"],
    label[for],
    select,
    summary,
    [role="tab"],
    [role="button"]
  ) {
  cursor: pointer;
}
:where(
    :any-link,
    button,
    [type="button"],
    [type="reset"],
    [type="submit"],
    label[for],
    select,
    summary,
    [role="tab"],
    [role="button"]
  ) {
  cursor: pointer;
}

:where(a, button) {
  outline: none;
}

:where(:-moz-any-link) {
  text-decoration-color: color-mix(in srgb, currentcolor, canvas 25%);
  text-underline-offset: 0.25em;
}

:where(:any-link) {
  text-decoration-color: color-mix(in srgb, currentcolor, canvas 25%);
  text-underline-offset: 0.25em;
}

:where(dialog) {
  background-color: unset;
  border: unset;
  color: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  overflow: unset;
  padding: unset;
  width: unset;
}

:where([popover]) {
  background-color: unset;
  border: unset;
  color: unset;
  height: unset;
  overflow: unset;
  padding: unset;
  width: unset;
}

:target {
  scroll-margin-block: var(--header-block-size);
}

:focus:not(:focus-visible) {
  outline: 0;
}

::-moz-selection {
  background-color: color-mix(in srgb, var(--color-selection), transparent);
  color: var(--color-white);
}

::selection {
  background-color: color-mix(in srgb, var(--color-selection), transparent);
  color: var(--color-white);
}

/* htmlタグのスタイリング
--------------------------- */
html {
  font-size: 62.5%;
  height: 100%;
  line-height: var(--line-height-base);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-block-size);
}

body {
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1024;
  --clamp-min: 14;
  --clamp-max: 16;

  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  height: 100%;
  letter-spacing: var(--letter-spacing-default);
  line-break: strict; /* 禁則処理を厳格に適用 */
  max-inline-size: 100vw;
  min-inline-size: 0px;
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  overflow-x: clip;
  word-break: normal; /* 単語の分割はデフォルトに依存 */
}
body.js-drawer-open {
  overflow: clip;
}

img {
  background-repeat: no-repeat; /* 4. 背景画像の繰り返しを無効化 */
  background-size: cover; /* 4. 背景画像をカバーとして設定 */
  block-size: auto; /* 1. 高さを自動で調整し、アスペクト比を維持 */
  font-style: italic; /* 3. altテキストを斜体に設定 */
  max-inline-size: 100%; /* 1. アスペクト比を維持しつつ最大幅を100%に設定 */
  shape-margin: 1.2rem; /* 5. shape-outsideのマージンを設定 */
  vertical-align: middle; /* 2. 画像の下の余白を削除 */
}

picture,
source,
img,
video,
object {
  border: none;
  display: block;
}

video,
iframe {
  vertical-align: middle;
}

a {
  text-decoration: none;
}
@media (any-hover: hover) {
  a:hover {
    text-decoration: none;
    transition: all var(--duration-default);
  }
}

a:hover img {
  text-decoration: none;
  transition: all var(--duration-default);
}

@media (any-hover: hover) {
  a:hover img {
    text-decoration: none;
    transition: all var(--duration-default);
  }
}
a,
label,
input,
button {
  transition: all var(--duration-default);
}

a[href^="tel:"] {
  pointer-events: none;
}

@media (pointer: coarse) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

button,
::file-selector-button {
  -webkit-user-select: none;
  -moz-user-select: none;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  touch-action: manipulation;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after,
  ::backdrop {
    animation-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: scroll !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 1ms !important;
  }
}

/* class
--------------------------- */
/* デバイス別表示切り替え */
@media not screen and (min-width: 768px) {
  .sp-only {
    display: block;
  }
  .pc-only {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }
  .pc-only {
    display: block;
  }
}
@media screen and (min-width: 960px) {
  .sp-only {
    display: none;
  }
  .pc-only {
    display: block;
  }
}

/* 3点リーダー */
.ellipsis-one-line {
  overflow: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-multiple-lines {
  --limit: 3; /* 指定の行を超えたら3点リーダーで非表示 */
  /* -webkit-box-orient: block-axis; */
  -webkit-line-clamp: var(--limit);
  block-size: min(100%, calc(1lh * var(--limit)));
  display: -webkit-box;
  overflow: clip;
  text-overflow: ellipsis;
}

/* アニメーション
--------------------------- */
/* フェードアニメーション */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-in-left-to-right {
  0% {
    transform: translate(-100%);
  }
  to {
    transform: translate(0);
  }
}

@keyframes slide-in-right-to-left {
  0% {
    transform: translate(100%);
  }
  to {
    transform: translate(0);
  }
}

@keyframes slide-out-right-to-left {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(-100%);
  }
}

@keyframes slide-out-left-to-right {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(100%);
  }
}

@keyframes slide-in-bottom-to-top {
  0% {
    transform: translate(0, 100%);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes slide-in-top-to-bottom {
  0% {
    transform: translate(0, -100%);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes slide-out-bottom-to-top {
  0% {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 100%);
  }
}

@keyframes slide-out-top-to-bottom {
  0% {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, -100%);
  }
}

/* スクロール連動アニメーション */
[data-scroll-animation] {
  display: block;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin-inline: auto;
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation] {
    transition-property: var(--property);
    transition-timing-function: var(--easing);

    &[data-animated="true"]:not(:focus-within) {
      transition-duration: var(--duration);
    }
  }
}

/* ======================================================
// Clip
// ------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation|="clip"] {
    --property: clip-path;
    --easing: cubic-bezier(0.19, 1, 0.22, 1);
    --duration: 1s;
    --stating-path: inset(0 100% 0 0);
    --end-path: inset(0 0 0 0);

    &:not([data-animated="true"]) {
      -webkit-clip-path: var(--stating-path);
      clip-path: var(--stating-path);
    }

    &[data-animated="true"] {
      -webkit-clip-path: var(--end-path);
      clip-path: var(--end-path);
    }
  }
}

/* ======================================================
// Slide in with overlay
// ------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation="clip-with-overlay"] {
    --overlay-color: var(--c-gray);
    --overlay-duration: var(--duration);
    --overlay-delay: calc(var(--overlay-duration) / 2);

    position: relative;

    &::after {
      background-color: var(--overlay-color);
      content: "";
      inset: 0;
      position: absolute;
      rotate: 180deg; /* アニメーションをvar(--stating-path)のみで完結させるために疑似要素を180度回転 */
      transition-property: var(--property);
      transition-timing-function: var(--easing);
    }

    &:not(:focus-within)::after {
      transition-delay: calc(var(--duration) / 2);
      transition-duration: var(--duration);
    }

    &:not([data-animated="true"])::after {
      -webkit-clip-path: var(--end-path);
      clip-path: var(--end-path);
    }

    &[data-animated="true"]::after {
      -webkit-clip-path: var(--stating-path);
      clip-path: var(--stating-path);
    }
  }
}

/* ======================================================
// Fade in
// ------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation="fade-in"] {
    --property: opacity;
    --easing: ease;
    --duration: 1s;

    &:not([data-animated="true"]) {
      opacity: 0;
    }
  }
}

/* ======================================================
// Fade in up
// ------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation="fade-in-up"] {
    --property: opacity, translate;
    --easing: ease-in-out;
    --duration: 1s;
    --starting-position: 40px;

    &:not([data-animated="true"]) {
      opacity: 0;
      translate: 0 var(--starting-position);
    }
  }
}

/* ======================================================
// Scale in
// ------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation="scale-in"] {
    --property: opacity, scale;
    --easing: cubic-bezier(0.19, 1, 0.22, 1);
    --duration: 1s;
    --starting-scale: 0.9;

    &:not([data-animated="true"]) {
      opacity: 0;
      scale: var(--starting-scale);
    }
  }
}}
/* 基盤群: プロジェクトにおける複数の基本的要素やスタイルを設定 */
@layer foundations{
/* foundation
--------------------------- */
:root {
  /* 色 */
  --color-white: #fff;
  --color-black: #333;
  --color-gray: #6C6E6F;

  --color-secondary: #F4FBFD;
  --color-primary: #FF8B71;
  --color-primary2: #82BFED;
  --color-primary3: #C6ECEC;
  --color-gradation: linear-gradient(to bottom, rgb(80 191 203 / 1) 0%, rgb(80 191 203 / 0.42) 100%);

  --color-light-gray: #ddd;
  --color-success: #4caf50;
  --color-danger: #e53e3e;
  --color-warning: #ffca28;
  --color-accent: #3d94f4;

  --color-background: color-mix(in srgb, var(--color-black) 20%, transparent);
  --color-selection: color-mix(in srgb, var(--color-black) 80%, transparent);

  /* フォントの種類 */
  --font-notosans: "Noto Sans JP", var(--font-sans);
  --font-notoserif: "Noto Serif JP", serif;
  --font-yomogi: "Yomogi", cursive;
  --font-lato: "Lato", sans-serif;
  --font-base: var(--font-notosans);

  /* フォントサイズ */
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-base: var(--font-size-md);

  /* フォントの太さ */
  --font-weight-base: 400;
  --font-weight-thin: 100;
  --font-weight-bold: 700;

  /* 文字間隔 */
  --letter-spacing-none: 0;
  --letter-spacing-tight: 0.025em;
  --letter-spacing-default: 0.05em;

  /* 行ボックスの高さ */
  --line-height-base: 1;

  /* 余白 */
  --spacing-xs: 0.5em;
  --spacing-sm: 1em;
  --spacing-md: 2em;
  --spacing-lg: 3em;
  --spacing-xl: 4em;
  --spacing-2xl: 5em;

  --spacing-gutter: max(5vi, 20px);

  /* ビューポートサイズの定義 */
  --viewport-xs-min: 320;
  --viewport-xs: 390;
  --viewport-xs-max: 767;
  --viewport-sm: 768;
  --viewport-sm-max: 959;
  --viewport-md: 960;
  --viewport-md-max: 1023;
  --viewport-lg: 1024;
  --viewport-lg-max: 1199;
  --viewport-xl: 1200;
  --viewport-xl-max: 1439;
  --viewport-2xl: 1440;

  /* コンテンツサイズ */
  --header-block-size: 60px;
  --footer-block-size: 0px;

  --inner-padding-xs-header: 15px;
  --inner-padding-2xl-header: 34px;
  --inner-padding-xs: 15px;
  --inner-padding-sm: 24px;
  --inner-padding-md: 34px;
  --inner-padding-lg: 34px;
  --inner-padding-xl: 34px;
  --inner-padding-2xl: 34px;

  /* 透明度設定 */
  --opacity-base: 0.9;
  --opacity-hover: 0.7;

  /* ボーダー設定 */
  --border-radius-base: 0.25em;

  /* z-indexレイヤー */
  --z-index-top: calc(infinity);
  --z-index-modal-overlay: 100;
  --z-index-header-hamburger: 60;
  --z-index-drawer: 50;
  --z-index-drawer-overlay: 40;
  --z-index-header: 30;
  --z-index-scroll-top: 10;
  --z-index-default: 1;
  --z-index-top-bg: -99;

  /* シャドウ */
  --shadow-button: 2px 2px 3px 0 rgb(0 0 0 / 10%);

  /* フォーカススタイル */
  --focus-outline: 2px solid var(--color-accent);

  /* アニメーション 持続時間 */
  --duration-rapidly: 0.2s;
  --duration-default: 0.4s;
  --duration-relaxed: 0.8s;

  /* 関数
  --------------------------- */
  /* clampを使用したレスポンシブサイズ:
    --clamp-size-px-min-viewport: 375;
    --clamp-size-px-max-viewport: 1024;
    --clamp-size-px-min-size: 14;
    --clamp-size-px-max-size: 16;
    property: var(--clamp-size-px);
   */
  /* 最小ビューポート幅と最大ビューポート幅を定義 */
  --clamp-size-px-viewport-min: 375;
  --clamp-size-px-viewport-max: 1024;
  /* サイズの最小値と最大値 */
  --clamp-size-px-min: 16;
  --clamp-size-px-max: 20;
  /* 計算用のカスタムプロパティ */
  --clamp-size-px-root-font-size: 10; /* html font-size: 62.5%の場合10, 100%の場合16*/
  --clamp-size-px-slope: calc(
    (var(--clamp-size-px-max) - var(--clamp-size-px-min)) /
      (var(--clamp-size-px-viewport-max) - var(--clamp-size-px-viewport-min))
  );
  --clamp-size-px-y-axis-intersection: calc(
    var(--clamp-size-px-min) -
      (var(--clamp-size-px-slope) * var(--clamp-size-px-viewport-min))
  );
  --clamp-size-px-preffered-value: calc(
    var(--clamp-size-px-y-axis-intersection) *
      (10px / var(--clamp-size-px-root-font-size)) +
      (var(--clamp-size-px-slope) * 100vw)
  );
  /* 実行用のカスタムプロパティ */
  --clamp-size-px: clamp(
    calc(
      var(--clamp-size-px-min) * (10px / var(--clamp-size-px-root-font-size))
    ),
    var(--clamp-size-px-preffered-value),
    calc(
      var(--clamp-size-px-max) * (10px / var(--clamp-size-px-root-font-size))
    )
  );
}

/* 擬似クラス,疑似要素
--------------------------- */
:where(:-moz-any-link) {
  text-decoration-color: color-mix(in srgb, currentcolor, canvas 25%);
  text-underline-offset: 0.25em;
}
:where(:any-link) {
  text-decoration-color: color-mix(in srgb, currentcolor, canvas 25%);
  text-underline-offset: 0.25em;
}

::-moz-selection {
  background-color: color-mix(in srgb, var(--color-selection), transparent);
  color: var(--color-white);
}

::selection {
  background-color: color-mix(in srgb, var(--color-selection), transparent);
  color: var(--color-white);
}

/* htmlタグのスタイリング
--------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 62.5%;
  height: 100%;
  line-height: var(--line-height-base);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-block-size);
}

body {
  --clamp-viewport-min: 390;
  --clamp-viewport-max: 1440;
  --clamp-min: 14;
  --clamp-max: 16;

  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  height: 100%;
  letter-spacing: var(--letter-spacing-none);
  line-break: strict; /* 禁則処理を厳格に適用 */
  max-inline-size: 100vw;
  min-inline-size: 0px;
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  overflow-x: clip;
  word-break: normal; /* 単語の分割はデフォルトに依存 */
}

@media (any-hover: hover) {
  a:hover {
    text-decoration: none;
    transition: all var(--duration-default);
  }
}

a:hover img {
  text-decoration: none;
  transition: all var(--duration-default);
}

@media (any-hover: hover) {
  a:hover img {
    text-decoration: none;
    transition: all var(--duration-default);
  }
}
a,
label,
input,
button {
  transition: all var(--duration-default);
}

/* class
--------------------------- */
/* デバイス別表示切り替え */
@media not screen and (min-width: 768px) {
  .sp-only {
    display: block;
  }
  .pc-only {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }
  .pc-only {
    display: block;
  }
}
@media screen and (min-width:1024px) {
  .sp-only {
    display: none;
  }
  .pc-only {
    display: block;
  }
}

/* 3点リーダー */
.ellipsis-one-line {
  overflow: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-multiple-lines {
  --limit: 3; /* 指定の行を超えたら3点リーダーで非表示 */
  /* -webkit-box-orient: block-axis; */
  -webkit-line-clamp: var(--limit);
  block-size: min(100%, calc(1lh * var(--limit)));
  display: -webkit-box;
  overflow: clip;
  text-overflow: ellipsis;
}}
/* ユーティリティ: !important必須の場合 */
@layer utilities{
/* utility
--------------------------- */
.u-visually-hidden {
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}}
/* コンポーネント: サイトの再利用可能なUIコンポーネント */
@layer components{
/* components
--------------------------- */}
@layer components{

.c-accordion__wrapper {
  align-items: center;
  /* --inline-size: 300px; */

  display: grid;
  row-gap: clamp(1px, -1.063px + 0.529vw, 3px);

  /* grid-template-columns: repeat(auto-fit, minmax(var(--inline-size), 1fr)); */
}

/* @media screen and (min-width: 768px) {
  .c-accordion__wrapper {
    row-gap: 3px;
  }
} */

.c-accordion {
  /* max-inline-size: var(--inline-size); */
  border-bottom: 1px solid #b6b7b7;
}

.c-accordion__summary {
  align-items: center;
  /* padding-inline: 24px; */
  color: var(--color-black);
  cursor: pointer;
  display: grid;
  gap: 1em;
  grid-template-columns: auto 1fr auto;
  /* background-color: var(--color-gray); */
  letter-spacing: 0.04em;
  padding-block: clamp(21px, 19.968px + 0.265vw, 22px);

  &::-webkit-details-marker {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .c-accordion__summary {
    letter-spacing: 0.03em;
  }
}

.c-accordion__icon-q,
.c-accordion__icon-a {
  aspect-ratio: 1;
  inline-size: clamp(25px, 17.366px + 2.036vw, 33px);
}

.c-accordion__icon {
  display: inline-block;
  inline-size: 24px;
  position: relative;
  rotate: 180deg;
  transition: rotate var(--duration-default);

  /*
  &::before,
  &::after {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 1px;
    margin: auto;
    content: "";
    background-color: currentcolor;
  }

  &::after {
    transition: rotate var(--duration-default);
    rotate: 90deg;
  }

  &:where(.c-accordion[open] *)::after {
    rotate: 180deg;
  } */

  &:where(.c-accordion[open] *) {
    rotate: 0deg;
  }
}

.c-accordion__container {
  display: grid;
  transition: grid-template-rows var(--duration-default);
}

.c-accordion__inner {
  display: grid;
  gap: 1em;
  grid-template-columns: auto 1fr;
  /* jsでcolumns制御,動作角付き防止のためmarginやpaddingは付けない */
  overflow: hidden;
}

.c-accordion__icon-a {
  padding-block-end: 16px;
  padding-block-start: 6px;
}

.c-accordion__text {
  font-size: 16px;
  line-height: 1.2;
}

.c-accordion__text.-a {
  padding-block-end: 16px;
  padding-block-start: 6px;
}

@media screen and (min-width: 768px) {
  .c-accordion__text {
    line-height: 1.7;
  }
}}
@layer components{

.c-articles__wrapper {
  --column-min-size: 300px;
  --gap: clamp(16px, 13.183px + 0.751vw, 24px);

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--column-min-size), 1fr));
  margin-inline: auto;
  max-inline-size: var(--max-inline-size);
}

.c-article {
  --gutter: 1lh;
  --color-background: #fcfcfc;
  --color-background-active: color-mix(
    in srgb,
    var(--color-background),
    black 5%
  );
  --color-active: #1ca4b4;
  --shadow: 0 4px 10px rgb(0 0 0 / 20%);
  --duration: var(--duration-default);
  background-color: var(--color-background);

  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  padding: var(--gutter);
  position: relative;
  row-gap: var(--gutter);
  transition: background-color var(--duration), box-shadow var(--duration);

  &:focus-within {
    background-color: var(--color-background-active);
    box-shadow: var(--shadow);
  }

  @media (scripting: enabled) {
    &[data-href] {
      cursor: pointer;
    }
  }

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-background-active);
      box-shadow: var(--shadow);
    }
  }
}

.c-article__link {
  background-color: aqua;
  /* カード全体を被リンク */
  display: block;
  inset: 0;
  opacity: 0.2;
  position: absolute;
}

.c-article__title {
  --clamp-min: 16;
  --clamp-max: 18;
}

.c-article__title-link {
  -webkit-box-orient: block-axis;
  -webkit-line-clamp: 3;
  block-size: min(100%, 3lh);
  display: -webkit-box;
  overflow: clip;
  text-overflow: ellipsis;
  transition: color var(--duration);

  @media (any-hover: hover) {
    &:hover {
      color: var(--color-active);
    }
  }
}

.c-article__category {
  grid-row: 2 / 3;
}

.c-article__category-link {
  --color-decoration: color-mix(in srgb, currentcolor 20%, white);
  border: 1px solid var(--color-decoration);
  border-radius: calc(infinity * 1px);

  display: inline-block;
  padding-block: 0.1em;
  padding-inline: 1em;
  /* 被リンクより上に表示 */
  position: relative;
  transition: background-color var(--duration), color var(--duration);
  z-index: 1;

  &:focus-visible {
    background-color: var(--color-decoration);
    color: var(--color-active);
  }

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-decoration);
      color: var(--color-active);
    }
  }
}

.c-article__publish {
}

.c-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.c-article__tag {
}

.c-article__link {
}

.c-article__thumbnail {
  aspect-ratio: 16 / 9;
  /* hover時の表示をサムネイル内におさめる */
  contain: strict;
  display: block;
  grid-row: 1 / 2;
  /* c-articleの余白を打ち消し */
  margin-block-start: calc(var(--gutter) * -1);
  margin-inline: calc(var(--gutter) * -1);
  min-inline-size: 0;
}

.c-article__thumbnail-image {
  -o-object-fit: cover;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration);
  width: 100%;

  @media (any-hover: hover) {
    &:hover {
      scale: 1.1;
    }
  }
}

.c-article__thumbnail-text {
  --color-text: var(--color-white);
  --color-background: color-mix(in srgb, var(--color-active) 80%, transparent);
  --shadow: 2px 2px 2px color-mix(in srgb, currentcolor 30%, transparent);
  background-color: var(--color-background);
  color: var(--color-text);
  display: grid;
  inset: 0;
  opacity: 0;
  place-items: center;

  position: absolute;
  text-shadow: var(--shadow);
  transition: opacity var(--duration), scale var(--duration);
  writing-mode: initial;

  @media (any-hover: hover) {
    &:hover {
      opacity: 1;
      scale: 1.05;
    }
  }
}}
@layer components{

.c-button {
  --clamp-min: 16;
  --clamp-max: 16;
  --color-text: var(--color-white);
  box-shadow: 0px 0px 3px rgb(83 46 37 / 0.25);
  font-family: var(--font-notosans);

}

.c-button__default {
  --background: var(--color-primary);
  --background-hover: var(--color-white);
  align-items: center;
  background-color: var(--background);
  border-radius: calc(infinity * 1px);
  color: var(--color-text);

  display: inline-grid;
  font-weight: var(--font-weight-bold);
  gap: 0;
  grid-template-columns: 1fr auto 1fr;
  inline-size: min(100%, 160px);
  letter-spacing: 0.1em;
  line-height: calc(16 / 23);
  min-block-size: 56px;
  min-inline-size: 160px;
  padding-block: 1em;
  padding-inline: 1.5em; /* padding:1em 1.5em;は物理プロパティなので分けて記述 */
  transition: background-color var(--duration-default), color var(--duration-default);
  &::before {
    content: ""; /* テキストを通常時は中央寄せにしながら、テキストが多い場合は左寄せにするために必要 */
  }

  /* &::after {
    display: inline-block;
    justify-self: end;
    inline-size: 0.5em;
    aspect-ratio: 1;
    content: "";
    border-block-start: 1px solid;
    border-inline-end: 1px solid;
    transform: rotate(45deg);
    transition: translate var(--duration-default);
  } */

  &:where(:-moz-any-link):focus-visible {
    background-color: var(--background-hover);
    color: var(--color-primary);
  }

  &:where(:any-link):focus-visible {
    background-color: var(--background-hover);
    color: var(--color-primary);
  }

  @media (any-hover: hover) {
    &:where(:-moz-any-link):hover {
      background-color: var(--background-hover);
      color: var(--color-primary);
    }
    &:where(:any-link):hover {
      background-color: var(--background-hover);
      color: var(--color-primary);
    }
    /* &:hover::after {
			translate: 4px 0; hover時に右に動く
		} */
  }
}

.c-button__arrow.bold {
  font-weight: var(--font-weight-bold);
}

.c-button__arrow {
  --background: var(--color-primary);
  --background-hover: var(--color-white);
  align-items: center;
  background-color: var(--background);
  border-radius: calc(infinity * 1px);
  color: var(--color-text);

  display: inline-grid;
  font-weight: var(--font-weight-bold);
  gap: 0;
  grid-template-columns: 1fr auto 1fr;
  inline-size: min(100%, 128px);
  letter-spacing: var(--letter-spacing-default);
  line-height: calc(16 / 23);
  min-block-size: 40px;
  padding-block: calc(8 / 16 * 1em);
  padding-inline: calc(12 / 16 * 1em); /* padding:1em 1.5em;は物理プロパティなので分けて記述 */
  transition: background-color var(--duration-default), color var(--duration-default);

  &::before {
    content: ""; /* テキストを通常時は中央寄せにしながら、テキストが多い場合は左寄せにするために必要 */
  }

  &::after {
    aspect-ratio: 1;
    border-block-start: 1px solid;
    border-inline-end: 1px solid;
    content: "";
    display: inline-block;
    inline-size: 0.5em;
    justify-self: end;
    margin-left: 6px;
    transform: rotate(45deg);
  }

  &:where(:-moz-any-link):focus-visible {
    background-color: var(--background-hover);
    color: var(--color-primary);
  }

  &:where(:any-link):focus-visible {
    background-color: var(--background-hover);
    color: var(--color-primary);
  }

  @media (any-hover: hover) {
    &:where(:-moz-any-link):hover {
      background-color: var(--background-hover);
      color: var(--color-primary);
    }
    &:where(:any-link):hover {
      background-color: var(--background-hover);
      color: var(--color-primary);
    }
    &:hover::after {
			/* translate: 4px 0; hover時に右に動く */
		}
  }
}

.c-button__more {
  --background: var(--color-gradation);
  --background-hover: var(--color-white);
  align-items: center;
  background-image: var(--background);
  border-radius: calc(infinity * 1px);
  /* padding-inline: 1.5em; */
  color: var(--color-text);

  display: flex;
  font-weight: var(--font-weight-bold);
  /* grid-template-columns: 1fr auto 1fr; */
  gap: 0;
  inline-size: min(100%, 263px);
  justify-content: center;
  letter-spacing: var(--letter-spacing-none);
  line-height: 1.5;
  min-block-size: 56px;
  min-inline-size: 263px;
  padding-block: 1em;
  padding-inline: 1em; /* padding:1em 1.5em;は物理プロパティなので分けて記述 */
  transition: background-image var(--duration-default), color var(--duration-default);

  /* &::before {
    content: "";
  } */

  /* &::after {
    display: inline-block;
    justify-self: end;
    inline-size: 0.5em;
    aspect-ratio: 1;
    content: "";
    border-block-start: 1px solid;
    border-inline-end: 1px solid;
    transform: rotate(45deg);
    transition: translate var(--duration-default);
  } */

  &:where(:-moz-any-link):focus-visible {
    background-image: var(--background-hover);
    color: var(--color-gradation);
  }

  &:where(:any-link):focus-visible {
    background-image: var(--background-hover);
    color: var(--color-gradation);
  }

  @media (any-hover: hover) {
    &:where(:-moz-any-link):hover {
      background-image: var(--background-hover);
      color: rgb(80 191 203 / 1);
    }
    &:where(:any-link):hover {
      background-image: var(--background-hover);
      color: rgb(80 191 203 / 1);
    }
    /* &:hover::after {
			translate: 4px 0; hover時に右に動く
		} */
  }
}}
@layer components{

.c-modal {
  --duration: 0.5s;
  --gutter: max(5vi, 20px);
  --background: var(--color-black);
  --background-backdrop: color-mix(in srgb, var(--background), transparent 20%);
  background-color: var(--background);
  block-size: min(calc(100svb - calc(var(--gutter) * 2)), 475px);
  box-shadow: 0 0 0 100vmax var(--background-backdrop);
  color: var(--color-white);
  contain: strict;

  inline-size: min(calc(100% - calc(var(--gutter) * 2)), 840px);
  margin: auto;
  transition: opacity var(--duration), scale var(--duration);

  &:not([data-active="true"]) {
    opacity: 0;
    scale: 0.95;
  }

  &::backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity 0.5s;
  }

  &:not([data-active="true"])::backdrop {
    opacity: 0;
  }

  dialog[open] {
    display: grid;
  }
}

.c-modal__container {
  block-size: 100%;
  overflow: auto;
  overscroll-behavior: contain; /* dialog要素内でコンテンツをスクロールさせて表示 */
  padding: var(--gutter);
}

.c-modal__headline {
  font-size: clamp(1rem, 0.571rem + 1.9vi, 2rem);
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin-inline: auto;
}

.c-modal__description {
  line-height: 1.75;
  margin-block-start: 1lh;
}

.c-modal__close {
  --background: var(--color-black);
  --background-active: color-mix(in srgb, var(--background) 80%, white);
  --icon-color: var(--color-white);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  aspect-ratio: 1;
  background-color: var(--background);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 12px 0 rgb(0 0 0 / 20%);
  cursor: pointer;
  inline-size: 3em;
  inset-block-start: 4px;
  inset-inline-end: 4px;

  position: absolute;
  transition: background-color 0.3s;
  z-index: 1;

  &::before,
  &::after {
    background-color: var(--color-white);
    content: "";
    display: inline-block;
    height: 2px;
    inset: 0;
    margin: auto;
    position: absolute;
    width: 45%;
  }

  &::before {
    rotate: 45deg;
  }

  &::after {
    rotate: 135deg;
  }

  &:focus-visible {
    background-color: var(--background-active);
  }

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--background-active);
    }
  }
}}
@layer components{

.c-tabs {
  margin-inline: auto;
  max-inline-size: 800px;
}

.c-tab__lists {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.c-tab__list {
}

.c-tab {
  background-color: var(--color-white);
  color: var(--color-primary);
  display: block;
  padding-block: 0.75em;
  padding-inline: 1.5em;
  text-align: center;
  transition: background-color var(--duration-default),
    color var(--duration-default);
}

.c-tab[aria-selected="true"] {
  background-color: var(--color-primary);
  /* 選択中のタブのスタイル */
  color: var(--color-white);
}

.c-tab:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-white);
}

@media (any-hover: hover) {
  .c-tab:not([aria-selected="true"]):hover {
    background-color: var(--color-primary);
    /* 非選択のタブのホバースタイル */
    color: var(--color-white);
  }
}

.c-tabpanel__wrapper {
}

.c-tabpanel {
}

.c-tabpanel:target {
  /* hidden="until-found"が非対応のブラウザのJS無効環境のフォールバック */
  display: revert;
}

.c-tabpanel > * + * {
  /* margin-block-start: clamp(20px, 11.424px + 2.38vw, 40px); */
}

.c-tabpanel__content {
}
/*
.c-tabpanel__lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
  gap: 8px;
  justify-content: center;
}

.c-tabpanel__lists.tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.c-tabpanel__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  block-size: 100%;
  padding-block: 1em;
  padding-inline: 1.5em;
  border-radius: var(--base-border-radius);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  transition: background-color 0.3s, color 0.3s;
  font-size: clamp(
    12px,
    calc(
      12px + 2 * (100vw - var(--min-viewport)) /
        (var(--max-viewport) - var(--min-viewport))
    ),
    14px
  );
}

@media (any-hover: hover) {
  .c-tabpanel__link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
  }
}

.c-tabpanel__link.is-active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
}

.c-tabpanel__link.tag {
  display: inline-block;
  padding-block: 0.5em;
  padding-inline: 1em;
  border-radius: calc(infinity * 1px);
  transition: all 0.3s;
  font-size: clamp(
    12px,
    calc(
      12px + 2 * (100vw - var(--min-viewport)) /
        (var(--max-viewport) - var(--min-viewport))
    ),
    14px
  );
}

.c-tabpanel__link.tag::before {
  content: "#";
  display: inline-block;
} */}
/* レイアウト: header, footer, aside など*/
@layer layouts{

/* layouts
--------------------------- */

/* l-main
--------------------------- */
.l-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.l-main {
  flex: 1;
  padding-block-end: 0;
  padding-block-start: var(--header-block-size);

  & section {
    scroll-margin-block-start: var(--header-block-size);
  }
  /* & section:nth-child(even) {
    background: var(--color-light-gray);
  } */
}

@media (min-width: 1440px) {
  .l-main {
    --header-block-size: 104px;
    flex: 1;
    padding-block-end: 0;
    padding-block-start: var(--header-block-size);

    & section {
      --header-block-size: 104px;
      scroll-margin-block-start: var(--header-block-size);
    }
    /* & section:nth-child(even) {
      background: var(--color-light-gray);
    } */
  }
}

/* l-header
--------------------------- */
.l-header {
  background-color: var(--color-white);
  height: var(--header-block-size);
  inset-block-start: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-header);
  /* box-shadow: 0 4px 4px -4px rgb(34 34 34 / 0.6); */
}

.l-header__container {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr auto auto;
  height: inherit;
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl-header) * 2
  ); /* padding分を加算 */
  padding-inline: var(--inner-padding-xs-header);
  position: relative; /* l-header__drawer, l-header__drawer-overlay */
}

.l-header__logo {
  align-items: center;
  display: flex;
  img {
    max-inline-size: 150px;
  }
}

.l-header__nav {
  display: none; /* スマホ非表示 */
}

/* ハンバーガーメニュー */
.l-header__hamburger {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 27px;
  z-index: var(--z-index-header-hamburger);
}

.l-header__hamburger-line {
  background-color: var(--color-black);
  border-radius: 4px;
  display: block;
  height: 2px;
  position: relative;
  transition: background-color var(--duration-default) ease;
  width: 100%;
}

.l-header__hamburger-line.is-active {
  background-color: var(--color-black);
  transition: translate var(--duration-default) ease,
    background-color var(--duration-default) ease;
  translate: 0;
}

.l-header__hamburger-line:nth-of-type(1) {
  top: 0;
  transition: top var(--duration-default) ease,
    rotate var(--duration-default) ease;
}

.l-header__hamburger-line:nth-of-type(1).is-active {
  rotate: 30deg;
  top: 8px;
}

.l-header__hamburger-line:nth-of-type(2) {
  margin-block: 6px;
  transition: opacity var(--duration-default) ease;
}

.l-header__hamburger-line:nth-of-type(2).is-active {
  opacity: 0;
}

.l-header__hamburger-line:nth-of-type(3) {
  top: 0;
  transition: top var(--duration-default) ease,
    rotate var(--duration-default) ease;
}

.l-header__hamburger-line:nth-of-type(3).is-active {
  rotate: -30deg;
  top: -8px;
}

/* .l-header__hamburger-text {
  margin-block-start: 0.8rem;
  font-size: 1.4rem;
} */

.l-header__hamburger-text::before {
  /* content: "menu";
  color: currentColor;
  text-transform: uppercase; */
}

/* .l-header__hamburger-text.is-active::before {
  content: "close";
  color: var(--color-white);
} */

/* ドロワーメニュー */
.l-header__drawer-overlay {
  /* position: absolute;
  inset: 0;
  width: 100%;
  height: 100lvh;
  background-color: var(--color-background);
  backdrop-filter: blur(4px);
  display: none; */
}

.l-header__drawer-overlay.is-active {
  display: block;
}

.l-header__drawer {
  --gutter: 0;
  --viewport: 390;
  align-content: start;
  background-color: var(--color-white);
  display: grid;
  grid-auto-flow: row; /* 縦並び */
  grid-template-areas: "menu";
  height: calc(100dvh - var(--header-block-size));
  left: 0;
  margin-block-start: var(--header-block-size);
  opacity: 0;
  overflow-x: clip;
  overflow-y: auto;
  place-items: center; /* 中央寄せ */

  position: absolute; /* header__inner */
  right: calc((var(--gutter) / var(--viewport)) * 100vw);
  top: 0;
  transition: translate var(--duration-default),
    visibility var(--duration-default), opacity var(--duration-default);
  translate: calc(100% + calc(var(--gutter) / var(--viewport)) * 100vw) 0;
  visibility: hidden;
  width: calc(100% - calc((var(--gutter) / var(--viewport)) * 100vw));
}

.l-header__drawer.is-active {
  opacity: 1;
  translate: 0;
  visibility: visible;
}

.l-header__drawer-lists {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  background-image: url(../img/drawer-bg.png);
  background-repeat: repeat-x;
  background-size: contain;
  display: grid;
  grid-area: menu;
  grid-auto-flow: row; /* 縦並び */
  padding-block-end: 87px;
  padding-block-start: 40px;
  place-items: center; /* 中央寄せ */
  row-gap: 4px;
  width: 100%;
}

.l-header__drawer-list {
  border-block-end: 1px solid var(--color-white);
  width: calc(374 / 395 * 100%);
}

.l-header__drawer-list:last-child {
  border-block-end: none;
}

.l-header__drawer-link {
  --clamp-min: 20;
  --clamp-max: 20;

  color: var(--color-gray);

  display: grid;
  grid-template-columns: 1fr auto;

  &::after {
    aspect-ratio: 1;
    border-block-start: 1px solid;
    border-inline-end: 1px solid;
    content: "";
    display: inline-block;
    inline-size: 0.5em;
    justify-self: end;
    margin-right: 58px;
    margin-top: 36px;
    transform: rotate(45deg);
  }
}
.l-header__drawer-link-text {
  letter-spacing: 0;
  padding-block-end: 12px;
  padding-block-start: 32px;
  padding-inline-end: 53px;
  padding-inline-start: 53px;
}

.l-header__drawer-cta {
  padding-block-end: 45px;
  padding-block-start: 45px;
}

.l-header__drawer-cta-tel {
  align-items: center;
  display: flex;
  justify-content: center;
  /* padding-block-start: 48px;
  padding-inline-start: 35px; */
}
.l-header__drawer-cta-icon {
}

.l-header__drawer-cta-number {
  font-family: var(--font-lato);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  padding-inline-start: 4px;
}

.l-header__drawer-cta-desc {
  font-feature-settings: "palt";
  font-size: 12px;
  letter-spacing: 0;
  padding-block-start: 6px;
  text-align: center;
}

.l-header__drawer-cta-buttons {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-block-start: 27px;
}

.l-header__cta-drawer-button-link {
}

@media (min-width: 1440px) {
  .l-header {
    --header-block-size: 104px;
  }

  .l-header__container {
    grid-template-columns: 1fr auto;
    padding-inline-end: 34px;
    padding-inline-start: 44px;
  }

  .l-header__logo {
    img {
      max-inline-size: 100%;
    }
  }

  .l-header__cta-button-link {
  }
  .l-header__cta-button-link.sp-only {
    display: none;
  }

  .l-header__nav {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 50px;
  }

  .l-header__nav-lists {
    align-items: center;
    color: var(--color-gray);
    display: flex;
    justify-content: center;
  }

  .l-header__nav-list {
    align-items: center;
    border-inline-color: var(--color-gray);
    border-inline-start: 1px solid;
    display: flex;
    justify-content: center;
    min-block-size: 32px;
    padding-inline: calc(14 / 16 * 1em);
    transition: opacity var(--duration-default);

    @media (any-hover: hover) {
      &:hover {
        opacity: var(--opacity-hover);
      }
    }
  }

  .l-header__nav-list:first-child {
    border-inline-start: none;
  }

  .l-header__cta {
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .l-header__cta-tel {
    align-items: center;
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(var(--inline-size), 1fr));
    grid-template-rows: 1fr 1fr; */
    grid-template-areas:  /* grid-areaの配置 */
      "icon number"
      "desc desc";
    padding-inline-end: 24px;
  }
  .l-header__cta-icon {
    grid-area: icon;
  }
  .l-header__cta-number {
    font-family: var(--font-lato);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    grid-area: number;
    letter-spacing: 0;
    padding-inline-start: 10px;
  }
  .l-header__cta-desc {
    font-feature-settings: "palt";
    font-size: 12px;
    grid-area: desc;
    letter-spacing: 0;
    padding-block-start: 10px;
    text-align: center;
  }
  .l-header__cta-button {
    display: flex;
    gap: 8px;
  }
  .l-header__cta-button-link {
  }

  .l-header__hamburger {
    display: none;
  }

  .l-header__drawer-overlay {
    display: none;
  }

  .l-header__drawer {
    display: none;
  }
}

@media (min-width: 1440px){
  .l-header__cta-icon {-ms-grid-row: 1;-ms-grid-column: 1;
  }
  .l-header__cta-number {-ms-grid-row: 1;-ms-grid-column: 2;
  }
  .l-header__cta-desc {-ms-grid-row: 2;-ms-grid-column: 1;-ms-grid-column-span: 2;
  }}

/* l-aside
--------------------------- */
.l-aside {
}

/* l-footer
--------------------------- */
.l-footer {
}
.l-footer__container {
  color: var(--color-gray);
  padding-block-start: 58px;
}

.l-footer__menu {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 29px;
  justify-content: center;
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分を加算 */
  padding-inline: var(--inner-padding-xs);
}

.l-footer__menu-item {
  transition: opacity var(--duration-default);

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--opacity-hover);
    }
  }
}

.l-footer__link {
}

.l-footer__nav-link {
  font-size: clamp(13px, 11.155px + 0.473vw, 16px);
}

.l-footer__logo {
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin-inline: auto;
  padding-block-start: 43px;

  img {
    inline-size: 95px;
  }
}

.l-footer__desc {
  font-size: clamp(13px, 11.155px + 0.473vw, 16px);
  line-height: 1.5;
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + 326px * 2
  ); /* padding分を加算 */
  padding-block-start: 40px;
  padding-inline: clamp(15px, -100.514px + 29.619vw, 326px);
}

.l-footer__wave {
}

.l-footer__copy {
  align-items: center;
  background-image: url(../img/footer-wave.svg);
  background-repeat: repeat-x;
  background-size: cover; /* 縦横比保持:contain */
  /* background-position: 50% 50%; */
  block-size: 40px;
  display: flex;
  font-size: clamp(10px, 7.539px + 0.631vw, 14px);
  justify-content: center;
}

@media (min-width: 768px) {
  .l-footer {
  }
  .l-footer__container {
    padding-block-start: 61px;
  }

  .l-footer__menu {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: center;
  }

  .l-footer__menu-item {
    align-items: center;
    block-size: 31px;
    border-inline-end: 1px solid var(--color-gray);
    display: flex;
    padding-inline: 14px;
  }

  .l-footer__menu-item:last-child {
    border-inline-end: none;
  }

  .l-footer__link {
  }

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

  .l-footer__logo {
    padding-block-start: 49px;
    img {
      inline-size: 141px;
    }
  }

  .l-footer__desc {
    max-inline-size: calc(
      788px + var(--inner-padding-2xl) + var(--inner-padding-2xl)
    );
    padding-block-end: 20px;
    padding-block-start: 47px;
    padding-inline: var(--inner-padding-2xl);
  }

  .l-footer__wave {
  }

  .l-footer__copy {
    block-size: 101px;
  }
}}
/* ベンダー: Splide.jsのスタイルシート */
@layer vendors{
.splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}}
/* ベンダー: Swiper.jsのスタイルシート */
/* @import url("vendors/swiper.min.css") layer(vendors); */
/* ベンダー: jsプラグインのCSSライブラリやフレームワーク */
@layer vendors{
/* vendors
--------------------------- */}
/* プロジェクト: サイト全体のUIの再利用可能なパターン、レイアウトの構造(ページ固有のスタイルなど) */
@layer projects{
/* projects
--------------------------- */}
/* プロジェクト: トップページ */
@layer projects{
/* top共通
--------------------------- */
.p-topSection__header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .p-topSection__header {
    letter-spacing: 0.03em;
  }
}
.p-topSection__header-bubble-left {
  img {
    inline-size: clamp(25px, 22.029px + 0.762vw, 33px);
  }
}
.p-topSection__header-bubble-right {
  img {
    inline-size: clamp(25px, 22.029px + 0.762vw, 33px);
  }
}
.p-topSection__title {
  font-family: var(--font-notoserif);
  font-size: clamp(24px, 18.057px + 1.524vw, 40px);
}

.bg-wave-top-33 {
  background-image: url(../img/bg-wave-top-33.svg);
  background-position: 50% 50%; /* 左・上から */
  background-repeat: repeat-x;
  height: clamp(16px, -0.221px + 4.326vw, 33px);
}

.bg-wave-bottom-33 {
  background-image: url(../img/bg-wave-bottom-33.svg);
  background-position: 50% 50%; /* 左・上から */
  background-repeat: repeat-x;
  height: clamp(16px, -0.221px + 4.326vw, 33px);
}

.bg-wave-40 {
  background-image: url(../img/bg-wave-40.svg);
  background-position: 50% 50%; /* 左・上から */
  background-repeat: repeat-x;
  height: clamp(10px, -18.626px + 7.634vw, 40px);
}

/* fv
--------------------------- */
.p-fv {
}

.p-fv__container {
  margin-inline: auto;
}

.p-fv__image {
  img {
    width: 100%;
  }
}

.p-fv__header {
}

.p-fv__header-title {
}

.u-visually-hidden {
}

.p-fv__phrase {
}

/* free
--------------------------- */
.p-free {
  background-image: url(../img/free-bg.png);
  background-repeat: repeat;
  /* background-attachment: scroll; // 固定:fixed */
}

.p-topSection {
}

.p-free__container {
  margin-inline: auto;
}

.p-free__header {
}

.p-topSection__header {
}

.p-free__title {
}

.p-topSection__title {
}

.p-free__bg {
}
.p-topSection__link {
}

.p-free__image {
  padding-block: clamp(24px, 17.314px + 1.714vw, 42px);
  padding-inline: var(--inner-padding-xs);
  img {
    margin-inline: auto;
    max-block-size: 327px;
    max-inline-size: 856px;
    width: 100%;
  }
}

/* worries
--------------------------- */
.p-worries {
}

.p-worries__container {
  margin-inline: auto;
}

.p-worries__header {
}

.p-worries__title {
}

.p-worries__phrase {
}

.p-worries__bg {
}

.p-worries__image {
  img {
    width: 100%;
  }
}

/* clear
--------------------------- */
.p-clear {
}

.p-clear__container {
  margin-inline: auto;
}

.p-clear__header {
}

.p-clear__title {
}

.p-clear__phrase {
}

.p-clear__image {
  img {
    width: 100%;
  }
}

/* merit
--------------------------- */
.p-merit {
}

.p-merit__container {
  margin-inline: auto;
  margin-inline: auto;
  max-inline-size: calc(var(--viewport-2xl) * 1px); /* padding分加算する */
  padding-inline: clamp(15px, -62.629px + 19.905vw, 224px);
}

.p-merit__header {
  letter-spacing: 0.1em;
  padding-block-end: clamp(23px, 18.543px + 1.143vw, 35px);
  padding-block-start: clamp(56px, 47.086px + 2.286vw, 80px);
}

.p-merit__title {

  font-size: clamp(24px, 18.057px + 1.524vw, 40px);
  line-height: 1.5;
  text-align: center;
  word-break: keep-all; /* 文字間の折り返し禁止,wbrタグで折り返し可 */
}

.p-merit__wrapper {
}

.p-merit__wrap {
  padding-block-start: 46px;
}

.p-merit__wrap:first-child {
  padding-block-start: 0px;
}

.p-merit__wrap-number {
  /* font-family: var(--font-lato);
  font-size: 64px;
  color: var(--color-primary2);
  position: relative; */
}

.p-merit__wrap-point {
  /* font-family: var(--font-lato);
  color: var(--color-black);
  text-transform: uppercase; */
}

.p-merit__wrap-no {
}

.p-merit__wrap-image {
  margin-inline: auto;
  max-inline-size: -moz-fit-content;
  max-inline-size: fit-content;
  img {
    max-inline-size: 360px;
    width: 100%;
  }
}

.p-merit__wrap-image.no2 {
  img {
    margin-block-end: 25px;
    margin-inline: auto;
    padding-block-start: 30px;
    width: 80%;
  }
}

.p-merit__wrap-head {
}

.p-merit__wrap-title {
  color: #2273ae;
  font-size: clamp(20px, 18.514px + 0.381vw, 24px);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  padding-block-start: 25px;
}

.p-merit__wrap-text {
  --clamp-min: 16;
  --clamp-max: 18;
  letter-spacing: 0.05em;
  line-height: 1.7;
  padding-block-start: clamp(14px, 11.029px + 0.762vw, 22px);
}

.p-merit__wrap-line {
  display: none;
  position: relative;
  z-index: -1;
}

.p-merit__wrap-desc {
  --clamp-min: 16;
  --clamp-max: 18;
  color: var(--color-gray);
  line-height: 1.7;
}

@media screen and (min-width: 1024px) {
  .p-merit {
  }

  .p-merit__container {
  }

  .p-merit__header {
  }

  .p-merit__title {
    padding-inline-start: 19px;
  }

  .p-merit__wrapper {
  }

  .p-merit__wrap {
    -moz-column-gap: 8px;
    column-gap: 8px;
    display: grid;
    grid-template-areas:  /* grid-areaの配置 */
      "img no"
      "img head";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    padding-block-start: 46px;
    row-gap: 16px;
  }

  .p-merit__wrap.even {
    grid-template-areas:  /* grid-areaの配置 */
      "no img"
      "head img";
    grid-template-columns: 1fr auto;
  }

  .p-merit__wrap:first-child {
    padding-block-start: 0px;
  }

  .p-merit__wrap.no2 {
    margin-block-start: -116px;
  }

  .p-merit__wrap.no3 {
    margin-block-start: -122px;
  }

  .p-merit__wrap.no4 {
    margin-block-start: -122px;
  }

  .p-merit__wrap.no5 {
    margin-block-start: -139px;
  }

  .p-merit__wrap.no6 {
    margin-block-start: -156px;
  }

  .p-merit__wrap-number {
    /* font-family: var(--font-lato);
    font-size: 64px;
    color: var(--color-primary2);
    position: relative; */
  }

  .p-merit__wrap-point {
    /* font-family: var(--font-lato);
    color: var(--color-black);
    text-transform: uppercase; */
  }

  .p-merit__wrap-no {
    grid-area: no;
    padding-block-start: 10px;
    padding-inline-start: 20px;
  }

  .p-merit__wrap-no.even {
    padding-inline-start: 0px;
  }

  .p-merit__wrap-no.no4 {
    margin-block-start: -10px;
    padding-block-start: 0px;
  }

  .p-merit__wrap-no.no6 {
    padding-block-start: 23px;
  }

  .p-merit__wrap-image {
    grid-area: img;
    img {
      max-inline-size: 310px;
      width: 100%;
    }
  }

  .p-merit__wrap-image.no2 {
    img {
      margin-block-end: 25px;
      margin-inline: auto;
      padding-block-start: 12px;
      width: 82%;
    }
  }

  .p-merit__wrap-head {
    grid-area: head;
    padding-inline-start: 24px;
  }

  .p-merit__wrap-head.even {
    padding-inline-start: 0px;
  }

  .p-merit__wrap-title {
    color: #2273ae;
    font-size: clamp(20px, 18.514px + 0.381vw, 24px);
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    padding-block-start: 0px;
  }

  .p-merit__wrap-text {
  }

  .p-merit__wrap-line {
    display: block;
    margin-inline: auto;
    max-inline-size: -moz-fit-content;
    max-inline-size: fit-content;
  }

  .p-merit__wrap-line.l1-2 {
    margin-block-start: 0px;
    max-inline-size: 370px;
  }

  .p-merit__wrap-line.l2-3 {
    margin-block-start: -40px;
    padding-inline-start: 54px;
  }

  .p-merit__wrap-line.l3-4 {
    margin-block-start: -15px;
  }

  .p-merit__wrap-line.l4-5 {
    margin-block-start: -33px;
    padding-inline-start: 133px;
  }

  .p-merit__wrap-line.l5-6 {
    margin-block-start: -22px;
  }

  .p-merit__wrap-desc {
    --clamp-min: 16;
    --clamp-max: 18;
    color: var(--color-gray);
    line-height: 1.7;
  }
}

@media screen and (min-width: 1024px){

  .p-merit__wrap-no {-ms-grid-row: 1;-ms-grid-column: 3;
  }

  .p-merit__wrap.even > .p-merit__wrap-no {-ms-grid-row: 1;-ms-grid-column: 1;
  }

  .p-merit__wrap-image {-ms-grid-row: 1;-ms-grid-row-span: 3;-ms-grid-column: 1;
  }

  .p-merit__wrap.even > .p-merit__wrap-image {-ms-grid-row: 1;-ms-grid-row-span: 2;-ms-grid-column: 2;
  }

  .p-merit__wrap-head {-ms-grid-row: 3;-ms-grid-column: 3;
  }

  .p-merit__wrap.even > .p-merit__wrap-head {-ms-grid-row: 2;-ms-grid-column: 1;
  }}

/* start
--------------------------- */
.p-start {
}

.p-start__bg {
  padding-block-start: 40px;
  img {
    width: 100%;
  }
}
.p-start__container {
  background-color: var(--color-primary3);
}

.p-start__wrapper {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-end: 118px;
  padding-inline: clamp(15px, -9.143px + 6.19vw, 80px);
  position: relative;
}

@media screen and (min-width: 1024px) {
  .p-start__wrapper {
    padding-block-end: 95px;
  }
}

.p-start__image {
  bottom: -43px;
  /* inset: 0 50%; 上/下 左/右 */
  inline-size: 80px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  @media screen and (min-width: 1024px) {
    bottom: -50px;
    inline-size: clamp(100px, -64.923px + 16.106vw, 167px);
    left: unset;
    right: clamp(28px, -95.077px + 12.019vw, 78px);
    transform: none;
  }
}

.p-start__header {
  display: grid;
  grid-template-areas:  /* grid-areaの配置 */ "left title right";
  grid-template-columns: auto 1fr auto;
  padding-block-start: 54px;
}
@media screen and (min-width: 1024px) {
  .p-start__header {
    align-items: center;
    display: flex;
    gap: 17px;
    justify-content: center;
    letter-spacing: 0.23em;
    padding-block-start: 32px;
  }
}

.p-start__header-bubble-left {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: left;
  padding-block-start: 8px;
  img {
    inline-size: clamp(25px, 22.029px + 0.762vw, 33px);
  }
}

.p-start__header-bubble-right {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: right;
  padding-block-start: 8px;
  img {
    inline-size: clamp(25px, 22.029px + 0.762vw, 33px);
  }
}

.p-start__title {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  font-feature-settings: "palt";
  font-family: var(--font-notosans);
  font-size: clamp(24px, 21.029px + 0.762vw, 32px);
  grid-area: title;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;

  .bold {
    font-size: clamp(24px, 21.029px + 0.762vw, 32px);
    font-weight: var(--font-weight-bold);
  }
}

.p-start__cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
  padding-block-start: 63px;
}

@media screen and (min-width: 1024px) {
  .p-start__cta {
    padding-block-start: 45px;
  }
}

.p-start__button {
  .c-button__arrow {
    align-items: center;
    block-size: clamp(56px, 44.114px + 3.048vw, 88px);
    display: flex;
    font-size: clamp(20px, 17.029px + 0.762vw, 28px);
    /* min-inline-size: 300px;
    max-inline-size: 400px;
    min-block-size: 56px;
    max-block-size: 88px; */
    inline-size: clamp(300px, 262.857px + 9.524vw, 400px);
    justify-content: center;
    margin-block-start: clamp(7px, 2.914px + 1.048vw, 18px);
    /* font-size: 20px;
    @media screen and (min-width: 1024px) {
      .c-button__arrow {
        font-size: 28px;
      }
    } */
  }
  .c-button__arrow::after {
    inline-size: 14px;
  }
}

.p-start__button-text-area {
  /* display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
  "left title right";
  justify-items: center;
  align-items: center; */

  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: center;
}

.p-start__button-text-line-left {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: left;
}

.p-start__button-text {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  font-size: clamp(16px, 13.029px + 0.762vw, 24px);
  font-weight: var(--font-weight-bold);
  grid-area: title;
}

.p-start__button-text-line-right {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: right;
}

.c-button {
}

.c-button-arrow {
}

/* room
--------------------------- */
.p-room {
}

.p-room__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-start: 88px;
  padding-inline: min(calc(var(--inner-padding-xs) / var(--viewport-xs))),
    var(--inner-padding-2xl);
}

@media screen and (min-width: 768px) {
  .p-room__container {
    padding-block-start: 84px;
  }
}

.p-room__header {
}

@media screen and (min-width: 768px) {
  .p-room__header {
    gap: 20px;
  }
}

.p-room__header-bubble-left {
}

.p-room__header-bubble-right {
}

.p-room__title {
}

.p-room__wrapper {
}

.p-room__text {
  font-size: clamp(14px, 12.514px + 0.381vw, 18px);
  line-height: 1.2;
  padding-block-start: clamp(32px, 28.479px + 0.939vw, 42px);
  padding-inline: var(--inner-padding-xs);
  text-align: center;
}

@media screen and (min-width: 1024px) {
  .p-room__text {
    letter-spacing: 0.05em;
    line-height: 1.7;
  }
}

.p-room__slide {
  padding-block-end: clamp(40px, 25.915px + 3.756vw, 80px);
  padding-block-start: 38px;
}

.p-splide1__slide {
}

.p-splide1__slide-wrapper {
  .splide__slide {
    /* scale: 0.67;
    transition: scale var(--duration-default); */
    img {
      max-block-size: 313px;
      max-inline-size: 480px;
      width: 100%;
    }
  }
  .splide__slide.is-active {
    /* scale: 1; */
  }
}

@media screen and (min-width: 1024px) {
  .p-splide1__slide-wrapper {
    .splide__slide {
      img {
        scale: 0.67;
        transition: scale var(--duration-default);
      }
    }
    .splide__slide.is-active {
      img {
        scale: 1;
      }
    }
  }
}

.p-splide1__slide-content {
}

.p-splide1-arrows {
  display: none;
}

/* recommend
--------------------------- */
.p-recommend {
  background-color: var(--color-secondary);
}

.p-recommend__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-end: clamp(56px, 47.086px + 2.286vw, 80px);
  padding-block-start: clamp(55px, 45.714px + 2.381vw, 80px);
  padding-inline: clamp(15px, -9.143px + 6.19vw, 80px);
}

.p-recommend__inner {
  background-color: var(--color-white);
  border-radius: 24px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}
.p-recommend__header {
  gap: clamp(8px, 3.543px + 1.143vw, 20px);
  padding-block-start: 48px;
}

@media screen and (min-width: 768px) {
  .p-recommend__header {
    padding-block-start: 43px;
  }
}

.p-recommend__header-bubble-left {
}

.p-recommend__header-bubble-right {
}

.p-recommend__title {
}

.p-recommend__wrapper {
  padding-block-end: clamp(90px, 86.286px + 0.952vw, 100px);
}

.p-recommend__text {
  font-size: clamp(14px, 12.514px + 0.381vw, 18px);
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  letter-spacing: 0.07em;
  line-height: 1.6;
  margin-inline: auto;
  padding-block-end: clamp(40px, 34.429px + 1.429vw, 55px);
  padding-block-start: clamp(24px, 18.057px + 1.524vw, 40px);
  padding-inline: 15px;
}

@media screen and (min-width: 1024px) {
  .p-recommend__text {
    line-height: 1.7;
    text-align: center;
  }
}

.p-recommend__slide {
}

.p-splide2__slide {
}

.p-splide2__slide-wrapper {
  margin-inline: auto;
  max-block-size: 195px;
  width: calc(236px * 1);
}

@media screen and (min-width: 768px) {
  .p-splide2__slide-wrapper {
    width: calc(calc(236px + 15px) * 2);
  }
}

@media screen and (min-width: 1200px) {
  .p-splide2__slide-wrapper {
    width: calc(calc(236px + 15px) * 3);
  }
}

@media screen and (min-width: 1440px) {
  .p-splide2__slide-wrapper {
    width: calc(calc(236px + 15px) * 4);
  }
}

.p-splide2__slide-content {
}

.p-splide2__slide-image {
  .splide__slide {
    opacity: 0;
    transition: opacity var(--duration-default);
  }
  .splide__slide.is-active {
    opacity: 1;
  }
  img {
    /* inline-size: fit-content;
    margin-inline: auto; */
    /* inline-size: 236px;
    block-size: 154px;
    width: 100%; */
  }
}

.p-splide2__slide-text {
  font-size: 16px;
  line-height: 1.5;
  padding-block-start: 26px;
  text-align: center;
  /* padding-block-end: 44px; */
}

.p-splide2-arrows {
}
.p-splide2-arrow {
  align-items: center;
  background-color: #87cefa;
  border-radius: 50%;
  /* clip-path: polygon(40% 25%, 70% 50%, 40% 75%); */
  display: flex;
  height: 29px;
  justify-content: center;
  opacity: 1;
  transition: opacity var(--duration-default);
  width: 29px;

  svg {
    display: none;
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--opacity-hover);
    }
  }
}
.p-splide2-arrow-prev {
  left: 8px;
}

@media screen and (min-width: 1024px) {
  .p-splide2-arrow-prev {
    left: 75px;
  }
}
.p-splide2-arrow-prev::after {
  -webkit-clip-path: var(--clip-triangle-left);
  background-color: #fff; /* 三角形の色 */
  clip-path: var(--clip-triangle-left);
  content: "";
  height: 10.25px;
  margin-right: 3px;
  width: 10.25px;
}

.p-splide2-arrow-next {
  right: 8px;
}

@media screen and (min-width: 1024px) {
  .p-splide2-arrow-next {
    right: 75px;
  }
}

.p-splide2-arrow-next::after {
  -webkit-clip-path: var(--clip-triangle-right);
  background-color: #fff; /* 三角形の色 */
  clip-path: var(--clip-triangle-right);
  content: "";
  height: 10.25px;
  margin-left: 3px;
  width: 10.25px;
}

.p-splide2-pagination {
  bottom: -55px;
  gap: 10px;
  /* bottom: -37px; */
}

@media screen and (min-width: 768px) {
  .p-splide2-pagination {
    gap: 2px;
  }
}
.p-splide2-pagination-page {
  background-color: #b6b7b7;
  height: 12px;
  opacity: 1;
  width: 12px;
}

@media screen and (min-width: 1024px) {
  .p-splide2-pagination-page {
    height: 8px;
    width: 8px;
  }
}
.p-splide2-pagination-page.is-active {
  background-color: var(--color-gray);
  opacity: 1;
  transform: scale(1);
}

/* reason
  --------------------------- */
.p-reason {
}

.p-reason__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-end: clamp(40px, 29.6px + 2.667vw, 68px);
  padding-block-start: clamp(47px, 34px + 3.333vw, 82px);
  padding-inline: clamp(14px, -55.086px + 17.714vw, 200px);
}

.p-reason__header {
  margin-left: -11px;
  margin-right: -11px;
}

.p-reason__header-bubble-left {
}

.p-reason__title {
  font-feature-settings: "palt";
}

@media screen and (min-width: 1024px) {
  .p-reason__title {
    letter-spacing: 0.03em;
  }
  .p-reason__header {
    gap: 13px;
  }
}

.p-reason__header-bubble-right {
}

.p-reason__wrapper {
  --inline-size: 360px;
  /* grid-template-rows: 1fr 1fr; */
  -moz-column-gap: clamp(8px, -8.343px + 4.19vw, 52px);
  column-gap: clamp(8px, -8.343px + 4.19vw, 52px);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--inline-size), 1fr));
  padding-block-start: clamp(30px, 15.143px + 3.81vw, 70px);
  row-gap: 58px;
}

@media screen and (min-width: 1024px) {
  .p-reason__wrapper {
    --inline-size: 308px;
    row-gap: 20px;
  }
}

.p-reason__wrap {
}

.p-reason__image {
  img {
    width: 100%;
  }
}

.p-reason__head {
  font-size: clamp(20px, 18.514px + 0.381vw, 24px);
  font-weight: var(--font-weight-bold);
  line-height: 1.7;
  padding-block-start: 22px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .p-reason__head {
    padding-block-start: 17px;
  }
}

.p-reason__text {
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  padding-block-start: 10px;
}

@media screen and (min-width: 1024px) {
  .p-reason__text {
    line-height: 1.7;
    padding-block-start: 0px;
  }
}

/* research
  --------------------------- */
.p-research {
}

.p-research__container {
  margin-inline: auto;
}

.p-research__sample {
  img {
    width: 100%;
  }
}

.p-research__banner {
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin-inline: auto;
  padding-block-end: clamp(40px, 10.286px + 7.619vw, 120px);
  padding-block-start: clamp(20px, 12.571px + 1.905vw, 40px);
  img {
    width: clamp(360px, 17.914px + 87.714vw, 1281px);
  }
}

/* compare
  --------------------------- */
.p-compare {
}

.p-compare__container {
  margin-inline: auto;
  padding-block-start: 8px;
  padding-inline: 15px;
}

@media screen and (min-width: 768px) {
  .p-compare__container {
    padding-block-start: 3px;
  }
}

.p-compare__header {
}

@media screen and (min-width: 768px) {
  .p-compare__header {
    gap: 20px;
  }
}

.p-compare__header-bubble-left {
}

.p-compare__header-bubble-right {
}

.p-compare__title {
}

.p-compare__wrapper {
  --border-radius-table: 8px;
  margin-inline: auto;
  max-inline-size: 995px;

  overflow-x: auto;
  /* padding-block-start: clamp(25px, 3.829px + 5.429vw, 82px) */
  padding-block-end: clamp(38px, 18.686px + 4.952vw, 90px);
  position: relative;
}

.p-compare__table {
  padding-block-start: clamp(23px, -34.778px + 14.815vw, 79px);
}

.p-compare__otoku {
  font-family: var(--font-yomogi);
  font-size: clamp(20px, 14.841px + 1.323vw, 25px);
  left: 116px;
  letter-spacing: -1.8px;
  position: absolute;
  rotate: 355deg;
  top: 14px;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .p-compare__otoku {
    left: 142px;
    top: 63px;
  }
}

.p-compare__wrapper table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap; /* 追加 */
  width: 100%;
}

.p-compare__wrapper thead th {
  block-size: clamp(48px, 43.543px + 1.143vw, 60px);
  border: 1px solid #fff;
  font-size: clamp(15px, 14.629px + 0.095vw, 16px);
  font-weight: var(--font-weight-bold);
  inline-size: clamp(160px, 145.143px + 3.81vw, 200px);
  min-block-size: 48px;
  min-inline-size: 160px;
  text-align: center;
  vertical-align: middle;
}

.p-compare__th-mt {
  align-items: center;
  background-color: var(--color-primary3);
  block-size: calc(100% - 10px);
  display: flex;
  justify-content: center;
  line-height: 1.3;
  margin-top: 10px;
  vertical-align: middle;
}

.p-compare__th-mt.radius-top-right {
  border-top-right-radius: var(--border-radius-table);
}

.p-compare__wrapper thead th:nth-child(1) {
  background-color: var(--color-white);
}

.p-compare__wrapper thead th:nth-child(2) {
  /* border: 5px solid var(--color-primary); */
  background-color: var(--color-primary);
  border-radius: 8px 8px 0 0;
  padding: 14px 17px 5px 18px;
  position: relative;
  /* &::before { */
  /* content: "とてもお得！";
    color: var(--color-black);
    font-size: 20px;
    font-family: var(--font-yomogi);
    font-weight: var(--font-weight-base);
    position: absolute;
    inset: 0 0 0 -126px;
    rotate: 355deg; */

  /* content: "";
    position: absolute;
    inset: 0 0 0 -126px;
    background-image: url(../img/totemootoku.png);
    background-position: 40% -15%;
    background-repeat: no-repeat;
    background-size: 40%;
  } */

  /* img.otoku {
    position: absolute;
  } */
  img.suisopot {
    margin-inline: auto;
    width: 100%;
  }

  &::after {
    background-color: var(--color-primary);
    bottom: -1px;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .p-compare__wrapper thead th:nth-child(2) {
    &::after {
      background-color: var(--color-primary);
      bottom: -1px;
      content: "";
      display: block;
      height: 5px;
      left: 0;
      position: absolute;
      width: 100%;
    }
  }
}

.p-compare__th-image {
}

/* @media screen and (min-width: 768px) {
  .p-compare__wrapper thead th:nth-child(2) {
    &::before {
      background-image: unset;
    }
  }
} */

.p-compare__wrapper thead th .radius-top-right {
  border-top-right-radius: var(--border-radius-table);
}

.p-compare__wrapper tbody td {
  border: 1px solid var(--color-primary3);
  font-weight: var(--font-weight-base);
  line-height: 1.7;
  /* padding: 10px; */
  text-align: center;
}
.p-compare__wrapper tbody td:first-child {
  background-color: var(--color-primary3);
  block-size: clamp(48px, 43.543px + 1.143vw, 60px);
  border: 1px solid #fff;
  font-size: clamp(15px, 14.629px + 0.095vw, 16px);
  font-weight: var(--font-weight-bold);
  inline-size: clamp(160px, 145.143px + 3.81vw, 200px);
  min-block-size: 48px;
  min-inline-size: 160px;
  text-align: center;
  vertical-align: middle;
}
.p-compare__wrapper tbody td:nth-child(2) {
  font-weight: var(--font-weight-bold);
}

.p-compare__wrapper tbody tr:nth-child(even) {
  /* background-color: #f9f9f9; */
}

.p-compare__wrapper tbody tr td.radius-top-left {
  border-top-left-radius: var(--border-radius-table);
}

.p-compare__wrapper tbody tr td.radius-bottom-left {
  border-bottom-left-radius: var(--border-radius-table);
}

.p-compare__wrapper tbody tr td.radius-bottom-right {
  border-bottom-right-radius: var(--border-radius-table);
}

.p-compare__wrapper td.highlight {
  /* border-left: 5px solid var(--color-primary);
  border-right: 5px solid var(--color-primary); */
  font-size: clamp(16px, 13.421px + 0.661vw, 20px);
  /* position: relative;

  &::before {
    content: "";
    background-color: var(--color-primary);
    display: block;
    height: calc(100% + 1px);
    left: 0;
    position: absolute;
    top: 0;
    width: 4px;
    z-index: 1;
  }

  &::after {
    content: "";
    background-color: var(--color-primary);
    display: block;
    height: calc(100% + 1px);
    right: 0;
    position: absolute;
    top: 0;
    width: 4px;
    z-index: 1;
  } */
}

.line-left {
  position: relative;

  &::before {
    background-color: var(--color-primary);
    content: "";
    display: block;
    height: calc(100% + 1px);
    left: 0px;
    position: absolute;
    top: 0;
    width: 4px;
    z-index: 1;
  }
}

.line-left.negative {
  position: relative;

  &::before {
    background-color: var(--color-primary);
    content: "";
    display: block;
    height: calc(100% + 1px);
    left: -5px;
    position: absolute;
    top: 0;
    width: 4px;
    z-index: 1;
  }
}

@media screen and (min-width: 768px) {
  .line-left {
    position: relative;

    &::before {
      background-color: var(--color-primary);
      content: "";
      display: block;
      height: calc(100% + 1px);
      left: 0px;
      position: absolute;
      top: 0;
      width: 5px;
      z-index: 1;
    }
  }

  .line-left.negative {
    position: relative;

    &::before {
      background-color: var(--color-primary);
      content: "";
      display: block;
      height: calc(100% + 1px);
      left: -6px;
      position: absolute;
      top: 0;
      width: 5px;
      z-index: 1;
    }
  }
}

.p-compare__wrapper td.health-focus {
  /* border-bottom: 5px solid var(--color-primary); */
  position: relative;

  &::after {
    background-color: var(--color-primary);
    bottom: -1px;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%;
  }
}
.p-compare__wrapper td {
  vertical-align: middle;
}

/* voice
  --------------------------- */
.p-voice {
  background-color: var(--color-secondary);
}

.p-voice__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-end: clamp(65px, 37.143px + 7.143vw, 140px);
  padding-block-start: clamp(39px, 23.029px + 4.095vw, 82px);
  padding-inline: clamp(14px, -121.372px + 34.711vw, 224px);
}

.p-voice__header {
}

@media screen and (min-width: 768px) {
  .p-voice__header {
    gap: 17px;
  }
}

.p-voice__header-bubble-left {
}

.p-voice__header-bubble-right {
}

.p-voice__title {
}

.p-voice__wrapper {
}

.p-voice__slide {
  padding-block-start: clamp(44px, 30.629px + 3.429vw, 80px);
}

.p-splide3__slide {
}

.p-splide3__slide-wrapper {
  /* width: calc(236px * 1); */
  margin-inline: auto;
  max-inline-size: 237px;
}

@media screen and (min-width: 768px) {
  .p-splide3__slide-wrapper {
    max-inline-size: 656px;
  }
}

@media screen and (min-width: 1440px) {
  .p-splide3__slide-wrapper {
    max-inline-size: 992px;
  }
}

.p-splide3__slide-content {
  /* max-inline-size: 320px; */
}

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

.p-splide3__slide-image {
  img {
    width: 100%;
  }
}
.p-splide3__slide-textarea {
  display: flex;
  flex-direction: column;
  gap: clamp(25px, 21.286px + 0.952vw, 35px);
  line-height: 1.3;
  padding-block: clamp(12px, 10.514px + 0.381vw, 16px);
  padding-block: 18px;
  padding-inline: clamp(12px, 10.514px + 0.381vw, 16px);
}

.p-splide3__slide-head {
  font-size: clamp(15px, 13.886px + 0.286vw, 18px);
  font-weight: var(--font-weight-bold);
}

@media screen and (min-width: 768px) {
  .p-splide3__slide-head {
    line-height: 1.7;
  }
}

.p-splide3__slide-text {
  display: none;
  line-height: 1.7;
}

.p-splide3__slide-text.is-active {
  display: block;
}

.js-text-hidden {
}

.p-splide3__slide-profile {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto;
}

.p-splide3__slide-name {
  font-size: clamp(12px, 10.514px + 0.381vw, 16px);
}

.p-splide3__slide-button {
  background-color: var(--color-primary2);
  border-radius: 50%;
  height: 16px;

  opacity: 1;
  transition: opacity var(--duration-default);
  width: 16px;

  &::after {
    aspect-ratio: 1;
    border-block-start: 1px solid #fff;
    border-inline-end: 1px solid #fff;
    bottom: 4px;
    content: "";
    content: "";
    display: inline-block;
    /* inline-size: 0.375em; */
    inline-size: 5px;
    justify-self: end;
    left: 4px;
    /* margin-left: 4px;
    margin-bottom: 4px; */
    position: relative;
    transform: rotate(45deg);
  }

  &.active::after {
    border-block-start: none;
    border-inline-end: none;
    bottom: 2px;
    color: #fff;
    content: "×";
    font-size: 13px;
    left: 2px;
    /* margin-left: 2px; */
    position: relative;
    transform: rotate(0deg);
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--opacity-hover);
    }
  }
}

@media screen and (min-width: 768px) {
  .p-splide3__slide-button {
    background-color: var(--color-primary2);
    border-radius: 50%;
    height: 22px;
    width: 22px;

    &::after {
      aspect-ratio: 1;
      border-block-start: 1px solid #fff;
      border-inline-end: 1px solid #fff;
      bottom: 3px;
      content: "";
      content: "";
      display: inline-block;
      /* inline-size: 0.375em; */
      inline-size: 6px;
      justify-self: end;
      left: 6px;
      position: relative;
      /* margin-bottom: 4px;
      margin-left: 6px; */
      transform: rotate(45deg);
    }

    &.active::after {
      bottom: 1px;
      /* margin-bottom: 0px;
      margin-left: 4px; */
      left: 5px;
    }
  }
}

.p-splide3-arrows {
}
.p-splide3-arrow {
  align-items: center;
  background-color: #87cefa;
  border-radius: 50%;
  /* clip-path: polygon(40% 25%, 70% 50%, 40% 75%); */
  display: flex;
  height: 29px;
  justify-content: center;
  opacity: 1;
  transition: opacity var(--duration-default);
  width: 29px;

  svg {
    display: none;
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--opacity-hover);
    }
  }
}
.p-splide3-arrow-prev {
  left: 10px;
  top: 136px;
}

.p-splide3-arrow-prev::after {
  -webkit-clip-path: var(--clip-triangle-left);
  background-color: #fff; /* 三角形の色 */
  clip-path: var(--clip-triangle-left);
  content: "";
  height: 10.25px;
  margin-right: 3px;
  width: 10.25px;
}

.p-splide3-arrow-next {
  right: 10px;
  top: 136px;
}
.p-splide3-arrow-next::after {
  -webkit-clip-path: var(--clip-triangle-right);
  background-color: #fff; /* 三角形の色 */
  clip-path: var(--clip-triangle-right);
  content: "";
  height: 10.25px;
  margin-left: 3px;
  width: 10.25px;
}
@media screen and (min-width: 768px) {
  .p-splide3-arrow-prev {
    left: -69px;
    top: 190px;
  }
  .p-splide3-arrow-next {
    right: -69px;
    top: 190px;
  }
}

.p-splide3-pagination {
  bottom: -29px;
  gap: 10px;
}

@media screen and (min-width: 1024px) {
  .p-splide3-pagination {
    bottom: -61px;
    gap: 2px;
  }
}
.p-splide3-pagination-page {
  background-color: #b6b7b7;
  height: 12px;
  opacity: 1;
  width: 12px;
}

@media screen and (min-width: 1024px) {
  .p-splide3-pagination-page {
    height: 8px;
    width: 8px;
  }
}
.p-splide3-pagination-page.is-active {
  background-color: var(--color-gray);
  opacity: 1;
  transform: scale(1);
}

/* step3
  --------------------------- */
.p-step3 {
}

.p-step3__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
}

.p-step3__3step {
  padding-block-end: clamp(44px, 31.324px + 3.38vw, 80px);
  padding-block-start: clamp(64px, 58.057px + 1.524vw, 80px);
  padding-inline: clamp(15px, -104.971px + 30.762vw, 338px);
}

.p-step3__header {
  gap: 16px;
}

.p-step3__header-bubble-left {
}

.p-step3__header-bubble-right {
}

.p-step3__title {
}

.p-step3__wrapper {
  padding-block-start: clamp(45px, 34.789px + 2.723vw, 74px);
}

.p-step3__text {
}

.p-step3__image {
}

/* step4
  --------------------------- */
.step4-bg-before,
.step4-bg-after {
  background-color: var(--color-secondary);
  img {
    height: 33px;
    width: 100%;
  }
}

.p-step4 {
  background-color: var(--color-secondary);
}

.p-step4__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-end: clamp(20px, 1.429px + 4.762vw, 70px);
  padding-inline: clamp(15px, 7.943px + 1.81vw, 34px);
}

.p-step4__4step {
}

.p-step4__header {
  padding-block-start: clamp(40px, 24.4px + 4vw, 82px);
}
@media screen and (min-width: 768px) {
  .p-step4__header {
    gap: 14px;
  }
}

.p-step4__wrapper {
  padding-block-start: 46px;
}

@media screen and (min-width: 768px) {
  .p-step4__wrapper {
    padding-block-start: 28px;
  }
}
.p-step4__image {
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin-inline: auto;
}

/* movie
  --------------------------- */
.p-movie {
  background-color: var(--color-white);
}

.p-movie__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-end: 40px;
  padding-block-start: 43px;
  padding-inline: clamp(15px, 7.943px + 1.81vw, 34px);
}

.p-movie__movie {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(15px, -10.629px + 6.571vw, 84px);
  justify-content: center;
  margin-inline: auto;
  max-inline-size: 1030px;
}

.p-movie__movie1 {
  position: relative;
  /* background: var(--color-gradation);
  text-align: center;
  color: #fff;
  border-radius: 16px;
  border: 2px solid;
  overflow: clip; */

  /* display: grid;
  grid-template-columns: 1fr 1fr; */
  /* grid-template-rows: 1fr 1fr; */
  /* grid-template-areas:
    "image textarea"; */

  /* transition: background var(--duration-default); */

  @media (any-hover: hover) {
    &:hover {
      .p-movie__image {
        /* opacity: 0; */
      }
      .p-movie__image-hover {
        opacity: 1;
      }
      /* .p-movie__movie1 {
        background: var(--color-white);
        color: var(--color-gradation);
      }
      .p-movie__icon svg {
        fill: var(--color-gradation);
      } */
      .p-movie__movie-arrow {
        scale: 1.25;
      }
    }
  }
}

.p-movie__image {
  /* grid-area: image; */
  /* position: relative; */
  transition: opacity var(--duration-default);
}

/* .p-movie__textarea {
  grid-area: textarea;
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
} */
.p-movie__icon {
  /* grid-area: icon; */
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin-inline: auto;

  /* @media (any-hover: hover) {
    &:hover {
      .p-movie__icon svg {
        color: transparent;
      }
    }
  } */
}

.p-movie__text {
  /* grid-area: text; */
}

.p-movie__image-hover {
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity var(--duration-default);
  img {
    width: 100%;
  }
}

.p-movie__movie-arrow {
  height: -moz-fit-content;
  height: fit-content;
  left: clamp(63px, 46.779px + 4.326vw, 80px);
  position: absolute;
  scale: 1;
  /* inset: 36px 0 0 63px; */
  /* inset: 50px 80px; */
  top: clamp(36px, 22.641px + 3.562vw, 50px);
  transition: scale var(--duration-default);
  width: -moz-fit-content;
  width: fit-content;
  /* inline-size: fit-content; */

  img {
    /* block-size: 50px; */
    aspect-ratio: 1;
    inline-size: clamp(50px, 36.641px + 3.562vw, 64px);
  }

  /* @media (any-hover: hover) {
    &:hover {
      scale: 1.25;
    }
  } */
}

.p-movie__movie2 {
  position: relative;
  /* background: var(--color-gradation);
  border: 2px solid var(--color-gradation);
  text-align: center;
  color: #fff;
  border-radius: 16px;
  overflow: clip;

  display: grid;
  grid-template-columns: 1fr 1fr; */
  /* grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "image textarea";

    transition: background var(--duration-default); */
  @media (any-hover: hover) {
    &:hover {
      .p-movie__image {
        /* opacity: 0; */
      }
      .p-movie__image-hover {
        opacity: 1;
      }
      /* .p-movie__movie1 {
        background: var(--color-white);
        color: var(--color-gradation);
      }
      .p-movie__icon svg {
        fill: var(--color-gradation);
      } */
      .p-movie__movie-arrow {
        scale: 1.25;
      }
    }
  }
}

.p-step__movie {
}

.p-step__movie1 {
}

.p-step__movie-arrow {
}

.p-step__movie2 {
}

.bg-secondary-line {
  background-color: var(--color-secondary);
  block-size: 40px;
}

/* labo
  --------------------------- */
.p-labo {
}

.p-labo__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-start: clamp(50px, 38.857px + 2.857vw, 80px);
  padding-inline: clamp(15px, 7.943px + 1.81vw, 34px);
}

.p-labo__wrapper {
}

.p-labo__title {
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin-inline: auto;
}

.p-labo__cards {
  --inline-size: 360px;

  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(var(--inline-size), 1fr));
  justify-items: center;
  margin-inline: auto;
  max-inline-size: 980px;
  padding-block-start: clamp(37px, 21.029px + 4.095vw, 80px);
}

@media screen and (min-width: 768px) {
  .p-labo__cards {
    --inline-size: 316px;
  }
}

.p-labo__card {
  max-inline-size: 360px;
  opacity: 1;
  /* inline-size: fit-content; */
  transition: opacity var(--duration-default);

  img {
    width: 100%;
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--opacity-hover);
    }
  }
}

@media screen and (min-width: 768px) {
  .p-labo__card {
    max-inline-size: 316px;
  }
}

.p-labo__button {
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin-inline: auto;
  padding-block: clamp(38px, 22.4px + 4vw, 80px);
}

/* faq
  --------------------------- */
.p-faq {
}

.p-faq__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-start: clamp(63px, 55.2px + 2vw, 84px);
  padding-inline: clamp(15px, 7.943px + 1.81vw, 34px);
}

.p-faq__header {
}

@media screen and (min-width: 768px) {
  .p-faq__header {
    gap: 23px;
  }
}

.p-faq__header-bubble-left {
}

.p-faq__header-bubble-right {
}

.p-faq__title {
}

.p-faq__wrapper {
  margin-inline: auto;
  max-inline-size: 768px;
  padding-block-end: clamp(40px, -1.27px + 10.582vw, 80px);
  padding-block-start: clamp(24px, 10.629px + 3.429vw, 60px);
}

/* guide
  --------------------------- */
.p-guide {
  background-color: var(--color-secondary);
}

.p-guide__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-end: clamp(24px, 0.971px + 5.905vw, 86px);
  padding-block-start: clamp(42px, -1.333px + 11.111vw, 84px);
  padding-inline: clamp(15px, 7.943px + 1.81vw, 34px);
}

.p-guide__header {
}

@media screen and (min-width: 768px) {
  .p-guide__header {
    gap: 18px;
  }
}
.p-guide__header-bubble-left {
}

.p-guide__header-bubble-right {
}

.p-guide__title {
}

.p-guide__wrapper {
  display: grid;
  margin-inline: auto;
  max-inline-size: 800px;
  padding-block-start: clamp(42px, 0.146px + 10.732vw, 86px);
  row-gap: clamp(34px, 30.286px + 0.952vw, 44px);
}

.p-guide__wrap {
}

.p-guide__head {
  font-size: 20px;
  padding-block-end: 14px;

  &::before {
    aspect-ratio: 1;
    background-image: var(--color-gradation);
    border-radius: 50%;
    content: "";
    display: inline-block;
    inline-size: 20px;
    margin-inline-end: 4px;
  }
}

.p-guide__text {
  font-size: clamp(15px, 14.046px + 0.254vw, 16px);
  line-height: 1.7;
}

.p-guide__text.padding {
  padding-block-start: clamp(15px, 6.439px + 2.195vw, 24px);
}

.p-guide__text.is-small {
  color: var(--color-gray);
  font-size: 13px;
  line-height: 1.5;
  padding-block-start: clamp(8px, 6.514px + 0.381vw, 12px);
}

.p-guide__line {
  padding-block: 10px;
}

.p-guide__customer {
  display: grid;
  gap: clamp(10px, 8.514px + 0.381vw, 14px);
  padding-block-end: clamp(14px, -6.927px + 5.366vw, 36px);
  padding-block-start: clamp(36px, 33.029px + 0.762vw, 44px);
}

@media screen and (min-width: 768px) {
  .p-guide__customer {
    padding-block-end: 8px;
  }
}

.p-guide__customer-text {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

/* news
  --------------------------- */
.p-news {
}

.p-news__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-end: clamp(40px, 25.143px + 3.81vw, 80px);
  padding-block-start: clamp(60px, 51.086px + 2.286vw, 84px);
  padding-inline: clamp(15px, 7.943px + 1.81vw, 34px);
}

.p-news__header {
  margin-left: -12px;
  margin-right: -12px;
}

@media screen and (min-width: 768px) {
  .p-news__header {
    gap: 28px;
  }
}
.p-news__header-bubble-left {
}

.p-news__header-bubble-right {
}

.p-news__wrapper {
  margin-inline: auto;
  max-inline-size: 768px;
}

.p-news__lists {
  display: grid;
  gap: clamp(22px, 12.714px + 2.381vw, 31px);
  padding-block-start: clamp(44px, 39.873px + 1.058vw, 48px);
}

.p-news__list {
  -moz-column-gap: clamp(20px, 16.286px + 0.952vw, 30px);
  align-items: center;
  border-block-end: 1px solid #b6b7b7;
  column-gap: clamp(20px, 16.286px + 0.952vw, 30px);
  display: flex;
  flex-wrap: wrap;
  padding-block-end: clamp(5px, -12.54px + 4.497vw, 22px);
}

.p-news__date {
  font-family: var(--font-lato);
  font-size: 16px;
  line-height: 1.7;
}

.p-news__label {
  border: 1px solid var(--color-gray);
  border-radius: 2px;
  color: var(--color-gray);
  font-family: var(--font-lato);
  font-size: 12px;
  line-height: 1.7;
  /* padding-block: 2px; */
  padding-inline: 8px;
}

.p-news__text {
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .p-news__text {
    line-height: 1.7;
  }
}

.p-news__button {
  display: flex;
  justify-content: center;
  padding-block-start: 40px;
}

/* product
  --------------------------- */
.p-product {
  background-color: var(--color-secondary);
}

.p-product__container {
  margin-inline: auto;
  max-inline-size: calc(
    var(--viewport-2xl) * 1px + var(--inner-padding-2xl) * 2
  ); /* padding分加算する */
  padding-block-end: clamp(45px, 32px + 3.333vw, 80px);
  padding-block-start: clamp(62px, 54.2px + 2vw, 83px);
  padding-inline: clamp(15px, 7.943px + 1.81vw, 34px);
}

.p-product__header {
}

@media screen and (min-width: 768px) {
  .p-product__header {
    gap: 17px;
  }
}
.p-product__header-bubble-left {
}

.p-product__header-bubble-right {
}

.p-product__title {
}

.p-product__wrapper {
  margin-inline: auto;
  max-inline-size: 923px;
}

@media screen and (min-width: 768px) {
  .p-product__wrapper {
    display: grid;
    gap: 44px;
    grid-template-columns: auto 1fr;
    padding-block-start: 36px;
  }
}

.p-product__image {
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin-inline: auto;
  padding-block-start: 46px;

  img {
    inline-size: clamp(150px, 106.664px + 11.556vw, 225px);
  }
}

.p-product__data {
  padding-block-start: 45px;
}

.p-product__data dl dt {
  font-weight: var(--font-weight-base);
  line-height: 1.25;
}

@media screen and (min-width: 768px) {
  .p-product__data dl dt {
    font-weight: var(--font-weight-base);
    line-height: 1.7;
  }
}

.p-product__data-lists {
  display: grid;
  gap: 18px;
  padding-inline-start: 8px;
}

@media screen and (min-width: 768px) {
  .p-product__data-lists {
    gap: 19px;
  }
}

.p-product__data-list {
  display: grid;
  grid-template-columns: clamp(95px, 82.561px + 3.189vw, 112px) auto;
}

.p-product__data-dt {
  font-size: clamp(13px, 11.267px + 0.462vw, 16px);
}

.p-product__data-dd {
  font-size: clamp(13px, 11.267px + 0.462vw, 16px);
  line-height: 1.25;
}

@media screen and (min-width: 768px) {
  .p-product__data-dd {
    letter-spacing: 0.03em;
    line-height: 1.7;
  }
}

.p-product__data-dd.lg {
  font-size: 16px;
}}
/*# sourceMappingURL=style.css.map */