@charset "UTF-8";
/********************************
* インナー
********************************/
:root {
  --l-inner: 1280px;
  --l-inner-md: 1100px;
}

:root {
  --padding-pc: 3.3333%;
  --padding-sp: 5.71%;
}

/********************************
* フォント
********************************/
:root {
  --font-family-base: "Noto Sans JP", sans-serif;
  --font-en: "Montserrat", sans-serif;
}

:root {
  --font-size-base: ${$base-font-size}px;
}

/********************************
* カラー
********************************/
:root {
  --color-red: #f23838;
  --color-red-dark: #f1313d;
  --color-red-light: #e55b5b;
  --color-yellow: #ffeb8e;
  --color-yellow-dark: #ecc924;
  --color-yellow-light: #ffea80;
  --color-blue-dark: #204483;
  --color-blue: #008ad2;
  --color-blue-light: #44aeea;
  --color-black: #333333;
  --color-gray-medium: #666666;
  --color-gray-light: #a1abb8;
  --color-white-dark: #cbd3de;
  --color-white-medium: #e5eaf0;
  --color-white-light: #f2f5f9;
  --color-white-lighter: #f5f7fb;
}

/********************************
* z-index
********************************/
:root {
  --z-index-base: 0;
  --z-index-back: -1;
  --z-index-front: 1;
}

/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css
  をベースに作成
*/
/* ボックスモデルのリセットとボーダーの設定 */
/* ============================================ */
:where(*, ::before, ::after) {
  box-sizing: border-box;
  min-width: 0;
  border-width: 0;
  border-style: solid;
}

/* ドキュメント */
/* ============================================ */
/**
 * 1. すべてのブラウザで行の高さを修正
 * 2. iOSで向きを変更した後のフォントサイズの自動調整を防止
 * 3. iOSでリンクの灰色のオーバーレイを削除
 */
:where(:root) {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 4 */ /* 3*/
  tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
  text-size-adjust: 100%; /* 6 */
}

/* セクション */
/* ============================================ */
/**
 * すべてのブラウザでマージンを削除
 */
:where(body) {
  margin: 0;
}

/**
 * IEでmain要素を一貫して表示
 */
:where(main) {
  display: block;
}

/* 垂直リズム */
/* ============================================ */
:where(p, table, blockquote, address, pre, iframe, form, figure, dl) {
  margin: 0;
}

/* 見出し */
/* ============================================ */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}

/* リスト（列挙） */
/* ============================================ */
:where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* リスト（定義） */
/* ============================================ */
:where(dt) {
  font-weight: bold;
}

:where(dd) {
  margin-left: 0;
}

/* グループコンテンツ */
/* ============================================ */
/**
 * 1. Firefoxで正しいボックスサイズを追加
 * 2. EdgeとIEでオーバーフローを表示
 */
:where(hr) {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  margin: 0;
  clear: both;
  overflow: visible; /* 2 */
  border-top-width: 1px;
  color: inherit;
}

/**
 * 1. すべてのブラウザでフォントサイズの継承とスケーリングを修正
 * 2. すべてのブラウザで奇数のemフォントサイズを修正
 */
:where(pre) {
  font-size: inherit; /* 2 */
  font-family: monospace, monospace; /* 1 */
}

:where(address) {
  font-style: inherit;
}

/* テキストレベルのセマンティクス */
/* ============================================ */
/**
 * IE 10でアクティブなリンクの灰色の背景を削除
 */
:where(a) {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Chrome 57-で下部の境界線を削除
 * 2. Chrome、Edge、IE、Opera、Safariで正しいテキスト装飾を追加
 */
:where(abbr[title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Chrome、Edge、Safariで正しいフォントの太さを追加
 */
:where(b, strong) {
  font-weight: bolder;
}

/**
 * 1. すべてのブラウザでフォントサイズの継承とスケーリングを修正
 * 2. すべてのブラウザで奇数のemフォントサイズを修正
 */
:where(code, kbd, samp) {
  font-size: inherit; /* 2 */
  font-family: monospace, monospace; /* 1 */
}

/**
 * すべてのブラウザで正しいフォントサイズを追加
 */
:where(small) {
  font-size: 80%;
}

/**
 * すべてのブラウザでsubとsup要素が行の高さに影響を与えるのを防止
 */
:where(sub, sup) {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

:where(sub) {
  bottom: -0.25em;
}

:where(sup) {
  top: -0.5em;
}

/* 置換コンテンツ */
/* ============================================ */
/**
 * 垂直方向の配置の問題を防止
 */
:where(svg, img, embed, object, iframe) {
  vertical-align: bottom;
}

/* フォーム */
/* ============================================ */
/**
 * フォームフィールドをスタイル可能にリセット
 * 1. 特にiOSでフォーム要素をスタイル可能に
 * 2. 親要素からtext-transformを継承
 */
:where(button, input, optgroup, select, textarea) {
  appearance: none; /* 1 */
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-transform: inherit; /* 2 */
  vertical-align: middle;
}

/**
 * クリック可能な要素のカーソルを修正
 */
:where(button, [type=button], [type=reset], [type=submit]) {
  cursor: pointer;
}

:where(button:disabled, [type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled) {
  cursor: default;
}

/**
 * Firefoxのアウトラインを改善し、入力要素とボタンのスタイルを統一
 */
:where(:-moz-focusring) {
  outline: auto;
}

:where(select:disabled) {
  opacity: inherit;
}

/**
 * パディングを削除
 */
:where(option) {
  padding: 0;
}

/**
 * 非表示にリセット
 */
:where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 0;
}

:where(legend) {
  padding: 0;
}

/**
 * Chrome、Firefox、Operaで正しい垂直方向の配置を追加
 */
:where(progress) {
  vertical-align: baseline;
}

/**
 * IE 10+でデフォルトの垂直スクロールバーを削除
 */
:where(textarea) {
  overflow: auto;
}

/**
 * Chromeで増減ボタンのカーソルスタイルを修正
 */
:where([type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button) {
  height: auto;
}

/**
 * Safariでアウトラインスタイルを修正
 */
:where([type=search]) {
  outline-offset: -2px; /* 1 */
}

/**
 * macOS上のChromeとSafariで内部パディングを削除
 */
:where([type=search]::-webkit-search-decoration) {
  -webkit-appearance: none;
}

/**
 * 1. iOSとSafariでクリック可能な種類のスタイルを設定できない問題を修正
 * 2. フォントの継承を修正
 */
:where(::-webkit-file-upload-button) {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Firefoxの表示を修正
 */
:where([type=number]) {
  -moz-appearance: textfield;
}

/**
 * クリック可能なラベル
 */
:where(label[for]) {
  cursor: pointer;
}

/* インタラクティブ */
/* ============================================ */
/*
 * Edge、IE 10+、Firefoxで正しい表示を追加
 */
:where(details) {
  display: block;
}

/*
 * すべてのブラウザで正しい表示を追加
 */
:where(summary) {
  display: list-item;
}

/*
 * 編集可能なコンテンツのアウトラインを削除
 */
:where([contenteditable]:focus) {
  outline: auto;
}

/* テーブル */
/* ============================================ */
/**
1. ChromeとSafariですべてのテーブルボーダーカラーの継承を修正
*/
:where(table) {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

:where(caption) {
  text-align: left;
}

:where(td, th) {
  padding: 0;
  vertical-align: top;
}

:where(th) {
  font-weight: bold;
  text-align: left;
}

/* アクセシビリティ
 * ========================================================================== */
/**
 * すべてのブラウザでビジー状態の要素のカーソルを変更（推奨）
 */
:where([aria-busy=true i]) {
  cursor: progress;
}

/*
 * すべてのブラウザで無効化された要素、編集不可能な要素、
 * または操作不可能な要素のカーソルを変更（推奨）
 */
:where([aria-disabled=true i], [disabled]) {
  cursor: not-allowed;
}

/*
 * すべてのブラウザで視覚的に隠されたアクセシブルな要素の
 * 表示を変更（推奨）
 */
:where([aria-hidden=false i][hidden]) {
  display: initial;
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

:where(html) {
  font-size: var(--font-size-base);
}
:where(:root) {
  -webkit-hyphens: auto;
          hyphens: auto; /* ハイフンで単語を分割 */
  line-break: strict; /* 禁則処理を厳格に適用 */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  /* テキストの折り返し設定 */
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  /* フォントサイズの調整 */
  text-size-adjust: 100%; /* フォントサイズをユーザーの設定に合わせる */
  -webkit-text-size-adjust: 100%; /* フォントサイズをユーザーの設定に合わせる */
  overflow-x: clip; /* 横スクロールを禁止 */
  /* スクロールバーとレイアウト */
  line-height: 1.5; /* 行の高さを設定 */
  /* タップ時のハイライト無効化 */
  -webkit-tap-highlight-color: transparent;
  /* 基本スタイル */
  background-color: var(--color-background-base);
  color: var(--color-black);
  font-family: var(--font-family-base);
}

/* body要素の基本スタイル */
:where(body) {
  min-block-size: 100svb; /* bodyの高さを画面高さに合わせる */
}

/* インタラクティブ要素のタッチ操作最適化 */
:where(a, area, button, [role=button], input:not([type=range]), label, select, summary, textarea) {
  touch-action: manipulation;
}

/*
 * リンクスタイル
 * ============================================
 */
:where(a) {
  color: inherit; /* 親要素の色を継承 */
  text-decoration: none; /* 下線を削除 */
  cursor: pointer; /* カーソルをポインターに */
  opacity: unset; /* 透明度をリセット */
}

/* ホバー可能なデバイスでの電話番号リンクの無効化 */
/*
 * 画像スタイル
 * ============================================
 */
:where(img) {
  width: 100%;
  max-width: 100%; /* 親要素に収まるように最適化 */
  height: auto; /* アスペクト比を維持 */
  vertical-align: bottom; /* 画像下の余白を削除 */
}

/*
 * ダイアログスタイル
 * ============================================
 */
:where(dialog) {
  /* ダイアログのデフォルトスタイルをリセット */
  width: unset;
  max-width: unset;
  height: unset;
  max-height: unset;
  padding: unset;
  overflow: unset;
  border: unset;
  background-color: unset;
  color: unset;
}

/* ダイアログ表示時のスクロール制御 */
:root:has(dialog[open]) {
  overflow: hidden; /* ダイアログが開いている間はスクロールを禁止 */
}

/* ダイアログ背景のスタイル */
::backdrop {
  background-color: unset; /* ダイアログの背景色をリセット */
}

/*
 * フォームスタイル
 * ============================================
 */
/* テキストエリアの基本設定 */
textarea {
  field-sizing: content; /* コンテンツに基づくサイズ調整 */
  min-height: 4lh; /* 最小高さを4行分に設定 */
}
/* フェード設定 */
/* ============================================ */
.l-container {
  margin-top: 80px;
}

.l-footer {
  margin-top: 180px;
}

.l-header {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
}

.l-inner {
  width: 100%;
  max-width: calc(var(--l-inner) + var(--padding-pc) * 2);
  height: inherit;
  margin: 0 auto;
  padding-inline: var(--padding-pc);
}

.l-inner._md {
  max-width: calc(var(--l-inner-md) + var(--padding-pc) * 2);
}

.l-main {
  margin-top: 120px;
}

.l-pagenation {
  margin-top: 80px;
}

.l-product-detail {
  padding-block: 120px;
}

.l-section {
  margin-block: 45px;
}

.c-accordion {
  border: 2px solid var(--color-base);
}

.c-accordion summary::-webkit-details-marker {
  display: none;
}

.c-accordion__title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  padding: 20px 40px;
  background: var(--color-base);
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
}

.c-accordion__icon i {
  position: relative;
  right: 0;
  transition: transform 0.3s ease-out;
}

.c-accordion.is-open .c-accordion__icon i {
  transform: rotate(-180deg);
}

.c-accordion__content {
  overflow: hidden;
  background: var(--color-white);
  color: var(--color-base);
  font-size: 18px;
  text-decoration: none;
}

.c-accordion__content-inner {
  padding: 20px 40px;
}

/* .c-accordion--type1 */
.c-accordion--type1 .c-accordion__title {
  background: var(--color-white);
  color: var(--color-base);
  transition: border 0.3s;
}

.c-accordion--type1 .c-accordion__icon i {
  font-size: 20px;
}

/* .c-accordion--type2 */
.c-accordion--type2 .c-accordion__title {
  position: relative;
}

.c-accordion--type2 .c-accordion__icon::before,
.c-accordion--type2 .c-accordion__icon::after {
  position: absolute;
  top: 50%;
  right: 30px;
  width: 15px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: var(--color-white);
  content: "";
  transition: 0.3s all;
}

.c-accordion--type2 .c-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.c-accordion--type2.is-open .c-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.c-breadcrumb__item {
  color: var(--color-blue-dark);
  font-size: 16px;
  line-height: calc(19 / 16);
}

.c-breadcrumb__item:not(:first-child)::before {
  content: ">";
}

.c-button {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 8px 10px 9px;
  border: 1px solid var(--color-blue);
  border-radius: 9999px;
  background: var(--color-blue);
  color: white;
  font-size: 18px;
  line-height: calc(26 / 18);
  transition: background 0.2s ease-out, color 0.2s ease-out;
}
.c-button:hover {
  background: white;
  color: var(--color-blue);
}

.c-button svg {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 8px;
  height: 13px;
  translate: 0 -50%;
  fill: white;
  transition: fill 0.2s ease-out;
}

.c-button:hover svg {
  fill: var(--color-blue);
}

.c-button._white {
  background: white;
  color: var(--color-blue);
}
.c-button._white:hover {
  background: var(--color-blue);
  color: white;
}
.c-button._white svg {
  fill: var(--color-blue);
}
.c-button._white:hover svg {
  fill: white;
}

.c-button._dark-blue {
  border: 1px solid var(--color-blue-dark);
  background: var(--color-blue-dark);
}
.c-button._dark-blue:hover {
  background: white;
  color: var(--color-blue-dark);
}
.c-button._dark-blue svg {
  fill: white;
}
.c-button._dark-blue:hover svg {
  fill: var(--color-blue-dark);
}

.c-button._middle {
  padding: 10px 10px 12px;
  font-size: 22px;
  line-height: calc(32 / 22);
}

.c-drawer__button {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 71px;
  height: 71px;
  box-shadow: 0 0 32px transparent;
  transition: all 0.3s ease-out;
}

.c-drawer__button._close {
  position: fixed;
  top: -70px;
  right: 0;
}

.c-drawer__line {
  font-size: 0;
}

.c-drawer__line,
.c-drawer__line::before,
.c-drawer__line::after {
  display: block;
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 3px;
  background-color: var(--color-blue);
  content: "";
  transition: all 0.3s ease-out;
}

.c-drawer__line::before {
  bottom: 8px;
}

.c-drawer__line::after {
  top: 8px;
}

.c-drawer__dialog.is-open .c-drawer__button._close .c-drawer__line,
.c-drawer__button[aria-expanded=true] .c-drawer__line {
  background-color: transparent;
}

.c-drawer__dialog.is-open .c-drawer__button._close .c-drawer__line::before,
.c-drawer__button[aria-expanded=true] .c-drawer__line::before {
  bottom: 0;
  transform: rotate(45deg);
}

.c-drawer__dialog.is-open .c-drawer__button._close .c-drawer__line::after,
.c-drawer__button[aria-expanded=true] .c-drawer__line::after {
  top: 0;
  transform: rotate(-45deg);
}

.c-drawer__dialog {
  display: block;
  position: relative;
  position: fixed;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  inset-block: 0;
  inset-inline: auto 0;
  padding: 0;
  overflow-y: auto;
  transform: translateX(100%);
  background-color: transparent;
  -ms-overflow-style: none;
  margin-top: 70px;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.06);
  scrollbar-width: none;
}

.c-drawer__dialog::-webkit-scrollbar {
  display: none;
}

.c-drawer__dialog.is-open {
  animation: modalContainerOpen 0.3s ease-out 0.1s forwards;
}

.c-drawer__dialog.is-close {
  animation: modalContainerClose 0.3s ease-out forwards;
}

.c-drawer__dialog::backdrop {
  opacity: 0;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, background-color 0.3s ease-out;
}

.c-drawer__dialog.is-open::backdrop {
  background-color: var(--color-white);
  animation: modalOpen 0.3s ease-out forwards;
}

.c-drawer__dialog.is-close::backdrop {
  animation: modalClose 0.3s ease-out forwards;
}

.c-drawer__container {
  width: 80vw;
  height: 100%;
  height: 100dvh;
  overflow: auto;
  background-color: white;
  scrollbar-width: none;
  transition: transform 0.3s ease-out;
  -ms-overflow-style: none;
  padding-top: 75px;
  padding-bottom: 100px;
}

.c-drawer__container::-webkit-scrollbar {
  display: none;
}

@keyframes modalContainerOpen {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes modalContainerClose {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes modalOpen {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes modalClose {
  0% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
.c-drawer__nav {
  max-width: 80%;
  margin-inline: auto;
  overflow-y: auto;
}

.c-drawer__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-inline: auto;
  gap: 20px;
}

.c-drawer__item a {
  display: grid;
}

.c-drawer__itemEn {
  font-weight: 800;
  font-size: 40px;
  line-height: calc(49 / 40);
  font-family: var(--font-en);
  transition: color 0.3s ease-out;
}
.c-drawer__itemJa {
  color: var(--color-blue);
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s ease-out;
}

.c-drawer._full .c-drawer__dialog {
  visibility: hidden;
  transform: translateX(0);
  opacity: 0;
}

.c-drawer._full .c-drawer__dialog.is-open {
  animation: modalOpen 0.3s ease-out forwards;
}

.c-drawer._full .c-drawer__dialog.is-close {
  animation: modalClose 0.3s ease-out forwards;
}

.c-drawer._full .c-drawer__container {
  width: 100vw;
}

.c-drawer__contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
  gap: 40px;
}

.c-drawer__info {
  padding-inline: clamp(10px, calc(22 / 1920 * 100vw), 22px);
  padding: 10px;
  border: 1px solid var(--color-blue);
}

.c-drawer__tel {
  text-align: center;
}

.c-drawer__tel a {
  color: inherit;
  color: var(--color-blue);
  font-weight: 800;
  font-size: clamp(18px, calc(27 / 1920 * 100vw), 27px);
  line-height: 1.1851851852;
  font-family: var(--font-en);
  text-decoration: none;
}

.c-drawer__hours {
  margin-top: 3px;
  font-size: clamp(12px, calc(15 / 1920 * 100vw), 15px);
  line-height: 1;
  text-align: center;
}
.c-drawer__hours span {
  display: block;
  margin-top: 3px;
}

.c-drawer__form {
  height: 100%;
  background: var(--color-blue);
}

.c-drawer__formLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-inline: clamp(10px, calc(14 / 1920 * 100vw), 14px);
  gap: clamp(5px, calc(7 / 1920 * 100vw), 7px);
}

.c-drawer__formTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  font-weight: 400;
  font-size: clamp(15px, calc(20 / 1920 * 100vw), 20px);
  line-height: 1;
}

.c-drawer__formTitle img {
  width: clamp(15px, calc(26 / 1920 * 100vw), 26px);
  height: clamp(15px, calc(27 / 1920 * 100vw), 27px);
}

.c-drawer__formButton {
  padding: clamp(3px, calc(7 / 1920 * 100vw), 7px) clamp(20px, calc(51 / 1920 * 100vw), 51px) clamp(3px, calc(7 / 1920 * 100vw), 7px);
  border: 1px solid var(--color-blue-dark);
  border-radius: 100vmax;
  background: var(--color-blue-dark);
  color: #fff;
  font-size: clamp(12px, calc(15 / 1920 * 100vw), 15px);
  line-height: 1;
  text-align: center;
  transition: color 0.3s ease-out, background 0.3s ease-out;
}
.c-form__section {
  border-bottom: 1px solid var(--color-white-dark);
}

.c-form__section + .c-form__section {
  margin-top: 80px;
}

.c-form__heading {
  margin-block: 40px;
  text-align: center;
}

.c-form__image {
  max-width: 650px;
  margin-inline: auto;
  margin-block: 40px;
}

.c-form__group {
  display: inline-grid;
  grid-template-columns: 200px 1fr;
  column-gap: min(calc(104 / 1100 * 100vw), 104px);
  align-items: center;
  width: 100%;
  padding: 20px 30px;
  border-top: 1px solid var(--color-white-dark);
}

.c-form__label {
  display: grid;
  gap: 4px;
  font-weight: 700;
  line-height: calc(24 / 16);
}

.c-form__required {
  display: grid;
  place-content: center;
  width: 46px;
  height: 23px;
  border-radius: 5px;
  background-color: var(--color-red);
  color: white;
  font-size: 13px;
  line-height: 19px;
}

.c-form__input,
.c-form__textarea,
.c-form__select {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--color-gray-medium);
  line-height: calc(24 / 16);
}

.c-form__input {
  max-width: 390px;
}

.c-form__input._large {
  max-width: 100%;
}

.c-form__inputText {
  margin-bottom: 6px;
}

.c-form__inputWrapper {
  display: grid;
  gap: 10px;
}

.c-form__inputImage {
  max-width: 450px;
  margin-bottom: 20px;
}

.c-form__inputGroup {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 5px 13px;
}

.c-form__inputGroup .c-form__label {
  font-weight: 400;
}

.c-form__textarea {
  field-sizing: content;
  width: 100%;
  height: 200px;
}

.c-form__input::placeholder,
.c-form__textarea::placeholder {
  color: var(--color-gray-medium);
  color: var(--color-gray-light);
}

.c-form__input:focus-visible,
.c-form__textarea:focus-visible {
  border-color: var(--color-blue);
}

.c-form__file {
  width: -moz-fit-content;
  width: fit-content;
}

.c-form__radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 35px;
}

.c-form__radio {
  position: relative;
  padding-left: 21px;
  cursor: pointer;
}

.c-form__radio::before {
  position: absolute;
  top: calc(50% - 3px);
  left: 50%;
  width: 16px;
  height: 16px;
  translate: -50% -50%;
  border: 1px solid var(--color-black);
  border-radius: 50%;
  content: "";
}

.c-form__radio::after {
  position: absolute;
  top: calc(50% - 3px);
  left: 50%;
  width: 10px;
  height: 10px;
  translate: -50% -50%;
  border-radius: 50%;
  background-color: var(--color-blue);
  content: "";
  opacity: 0;
  transition: opacity 0.3s ease;
}

.c-form__radio:checked::after {
  opacity: 1;
}

.c-form__selectWrapper {
  display: inline-grid;
  grid-template-columns: 200px auto 100px auto;
  grid-auto-flow: column;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  gap: 13px;
}

.c-form__selectWrapper._col5 {
  grid-template-columns: auto 200px auto 100px auto;
}

.c-form__selectWrapperItem {
  position: relative;
}

.c-form__selectWrapperItem::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 11px;
  height: 7px;
  translate: 0 -50%;
  background-image: url(../../assets/images/common/icon-select.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.c-form__selectContainer {
  display: grid;
  gap: 10px;
}

.c-form__select {
  width: 100%;
  cursor: pointer;
}

.c-form__error {
  grid-column: 2/-1;
  margin-top: 2px;
}

.c-form__error em {
  color: var(--color-red);
  font-style: normal;
}

.c-form__value img {
  max-width: 300px;
}

.c-form__actions {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  margin-top: 80px;
  gap: 20px;
}

.c-form__actions._double {
  grid-template-columns: 1fr 1fr;
  max-width: 820px;
  margin-inline: auto;
}

.c-form__submit {
  display: block;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  padding: 13px 20px;
  border: none;
  border: 1px solid var(--color-blue);
  border-radius: 100vmax;
  background-color: var(--color-blue);
  color: #fff; /* White color */
  font-weight: 700;
  font-size: 23px;
  line-height: calc(34 / 23);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.c-form__submit._white {
  background-color: var(--color-white);
  color: var(--color-blue);
}
.c-form__privacy {
  max-width: 1000px;
  margin-top: 80px;
  margin-inline: auto;
  padding: 30px;
  overflow: hidden;
  border: 1px solid #a6b2b6;
  line-height: 1.7;
}

.c-form__privacyContent {
  height: 290px;
  padding-right: 10px;
  overflow-y: auto;
}
.c-form__privacyContent::-webkit-scrollbar {
  width: 12px;
}
.c-form__privacyContent::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: #d8d8d8;
}
.c-form__privacyContent::-webkit-scrollbar-track {
  background-color: #f3f3f3;
}

.c-form__privacyHeading {
  margin-bottom: 16px;
  font-weight: 700;
  text-align: center;
}

.c-form__privacyHeading02 {
  margin-top: 20px;
  font-weight: 700;
}

.c-form__ssl {
  max-width: 1000px;
  margin-inline: auto;
  margin-top: 40px;
  padding: 30px;
  background-color: var(--color-white-light);
}

.c-form__sslHeading {
  font-weight: 700;
  text-align: center;
}

.c-form__sslText {
  margin-top: 16px;
  line-height: calc(27 / 16);
}
.c-form__sslText span {
  display: block;
}
.c-form__sslText a {
  color: var(--color-blue);
  text-decoration: underline;
}

.c-heading::before {
  display: block;
  width: 17px;
  height: 9px;
  background: var(--color-blue);
  content: "";
}

.c-heading__en {
  margin-top: 10px;
  font-weight: 800;
  font-size: 40px;
  line-height: calc(49 / 40);
  font-family: var(--font-en);
}

.c-heading__ja {
  margin-top: 5px;
  color: var(--color-blue);
  font-weight: 500;
  font-size: 23px;
  line-height: calc(33 / 23);
}

.c-heading._white .c-heading__en {
  color: white;
}

.c-heading._white .c-heading__ja {
  color: var(--color-blue-dark);
}

.c-heading02 {
  font-weight: 700;
  font-size: 35px;
  line-height: calc(51 / 35);
}

.c-heading03 {
  padding: 9px 20px 10px;
  border-left: 5px solid var(--color-blue);
  background: var(--color-white-light);
  font-weight: 700;
  font-size: 18px;
  line-height: calc(28 / 18);
}

.c-heading04 {
  color: var(--color-blue-dark);
  font-weight: 700;
  font-size: 35px;
  line-height: calc(52.5 / 35);
}
.c-heading04::before {
  display: block;
  width: 17px;
  height: 9px;
  margin-bottom: 10px;
  background: var(--color-blue);
  content: "";
}

.c-heading04:has(.c-heading04__sub) {
  margin-top: 5px;
}

.c-heading04__sub {
  display: block;
  margin-top: 8px;
  color: var(--color-blue-light);
  font-weight: 700;
  font-size: 20px;
  line-height: calc(29 / 20);
  font-family: var(--font-en);
}

.c-heading05 {
  color: #204483;
  font-weight: 700;
  font-size: 25px;
  line-height: calc(36 / 25);
}

/* ------------------------------------
 .c-list
--------------------------------------*/
.c-list {
  display: grid;
  gap: 6px;
}

.c-list__item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  line-height: calc(28 / 16);
}
.c-list__item::before {
  display: block;
  position: relative;
  top: -2px;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-blue);
  content: "";
}

.c-list02__item {
  padding-left: calc(1em + 4px);
  line-height: calc(28 / 16);
  text-indent: calc(-1em - 4px);
}
.c-list02__item::before {
  margin-right: 4px;
  content: "・";
  color: var(--color-blue);
}

.c-list-num__item {
  padding-left: calc(1.5em + 4px);
  line-height: calc(28 / 16);
  text-indent: calc(-1.5em - 4px);
  counter-increment: list-num;
}
.c-list-num__item::before {
  margin-right: 4px;
  content: counter(list-num) ".";
}

.c-scroll-top {
  z-index: 100;
  position: fixed;
  right: 20px;
  bottom: 20px;
}

.c-section-gradation {
  z-index: 0;
  position: relative;
  overflow: clip;
}

.c-section-gradation::before {
  z-index: -1;
  position: absolute;
  top: 0;
  left: calc(50% - 372px);
  width: 1576px;
  height: 615px;
  background: linear-gradient(90deg, #d6f0ff 0%, #008ad2 100%);
  content: "";
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  opacity: 0.23;
}

.c-section-gradation::after {
  z-index: -1;
  position: absolute;
  top: -20px;
  left: calc(50% + 103px);
  content: attr(data-text);
  color: #fff;
  font-weight: 800;
  font-size: 191px;
  line-height: calc(233 / 191);
  font-family: var(--font-en);
  white-space: nowrap;
  opacity: 0.59;
}

.c-section-gradation._clear::before {
  background: transparent;
  content: none;
}

.c-section-gradation._clear::after {
  color: #f5f5f5;
}

/*--------------------------------
.c-table
--------------------------------*/
.c-table {
  width: 100%;
  border-collapse: collapse;
}

.c-table__header,
.c-table__data {
  border: 1px solid #e0e0e0;
}

.c-table__header {
  width: 300px;
  padding: 23px 20px 21px 50px;
  background: #fafafa;
  font-weight: 700;
  line-height: calc(24 / 16);
}

.c-table__data {
  padding: 23px 20px 25px 50px;
  font-weight: 400;
  font-size: 16px;
  line-height: calc(24 / 16);
}

.c-table02 {
  width: 100%;
  border-collapse: collapse;
}

.c-table02__header {
  padding: 10px;
  border: 1px solid var(--color-blue-dark);
  background-color: var(--color-white-medium);
  color: var(--color-blue-dark);
  font-weight: 700;
  font-size: 22px;
  line-height: calc(33 / 22);
  text-align: center;
}
.c-table02__header:first-child, .c-table02__header:last-child {
  width: 34.4545454545%;
}
.c-table02__header:nth-child(2) {
  width: 30.9090909091%;
}

.c-table02__data {
  place-content: center;
  border: 1px solid var(--color-blue-dark);
}
.c-table02__data:nth-child(2) {
  background: #fff5c7;
}

.c-table02__case {
  display: grid;
  grid-template-columns: min(calc(110 / 1100 * 100vw), 110px) 1fr;
  padding: 20px;
  gap: min(calc(22 / 1100 * 100vw), 22px);
  color: var(--color-blue-dark);
}

.c-table02__caseTitle {
  font-weight: 700;
  font-size: 18px;
  line-height: calc(27 / 18);
}

.c-table02__caseText {
  margin-top: 11px;
  color: var(--color-blue-dark);
  line-height: calc(24 / 16);
}

.c-table02__price {
  display: flex;
  position: relative;
  align-items: end;
  justify-content: center;
  color: var(--color-red);
}

.c-table02__priceLeft,
.c-table02__priceRight {
  position: absolute;
  bottom: 25px;
  font-weight: 700;
  font-size: 20px;
  line-height: calc(26 / 20);
}

.c-table02__priceLeft {
  right: calc(50% + 35px);
  text-align: right;
}

.c-table02__priceNum {
  font-weight: 700;
  font-size: 100px;
  line-height: calc(145 / 100);
}

.c-table02__priceRight {
  right: calc(50% - 55px);
}

.c-table02__priceText {
  font-weight: 700;
  font-size: 30px;
  line-height: calc(43 / 30);
}

.c-table02__notMember {
  display: grid;
  place-items: center;
  color: var(--color-blue-dark);
  text-align: center;
}

.c-table02__notMemberPrice {
  font-weight: 700;
  font-size: 23px;
  line-height: calc(27 / 23);
}

.c-table02__notMemberText {
  margin-top: 12px;
  line-height: calc(28 / 16);
}

/* ------------------------------------
 .p-company
--------------------------------------*/
.p-company-guide__heading {
  text-align: center;
}

.p-company-guide__table {
  margin-top: 35px;
}

.p-compay-section {
  margin-top: 126px;
}

.p-compay-section__heading {
  text-align: center;
}

.p-compay-section__content {
  margin-top: 35px;
}

.p-compay-section__heading03:not(:first-child) {
  margin-top: 40px;
}

.p-compay-section__text {
  line-height: calc(28 / 16);
}

.p-compay-section__text._name {
  margin-top: 36px;
  text-align: right;
}

.p-compay-section__text:not(:first-child) {
  margin-top: 15px;
}

.p-compay-section__heading04 {
  margin-top: 15px;
  font-weight: 700;
  line-height: calc(28 / 16);
}

.p-compay-section__heading04 + .p-compay-section__text {
  margin-top: 0;
}

.p-compay-section__textLink {
  color: var(--color-blue);
  line-height: calc(28 / 16);
}

.p-compay-section__remark {
  margin-top: 30px;
  line-height: calc(28 / 16);
}

.p-compay-section__list {
  margin-top: 12px;
}

.p-footer {
  padding-block: 101px 22px;
  background: linear-gradient(193deg, #44aeea 0%, #204483 100%);
  color: white;
}

.p-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  justify-content: space-between;
  gap: 40px;
}

.p-footer__border {
  display: block;
  justify-self: center;
  width: 1px;
  height: 360px;
  background-color: white;
  content: "";
}

.p-footer__logoCatch {
  font-size: 14px;
  line-height: calc(17 / 14);
}

.p-footer__logo img {
  display: block;
  max-width: 409px;
  margin-top: 11px;
}

.p-footer__company {
  margin-top: 22px;
  line-height: calc(22 / 16);
}

.p-footer__contact {
  margin-top: 90px;
}

.p-footer__telLink {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 32px;
  line-height: calc(39 / 32);
  font-family: var(--font-en);
}
.p-footer__telLink:before {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url(../../assets/images/common/icon-tel.svg);
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.p-footer__hours {
  margin-top: 4px;
  line-height: calc(24 / 16);
}

.p-footer__nav {
  display: grid;
  grid-template-columns: auto auto min(calc(220 / 1280 * 100vw), 220px);
  align-items: start;
  gap: 80px;
}

.p-footer__list {
  display: grid;
  gap: 21px 40px;
}

.p-footer__link {
  font-weight: 700;
  line-height: calc(23 / 16);
}

.p-footer__banners {
  display: grid;
  gap: 30px;
}

.p-footer__copyright {
  margin-top: 197px;
  font-size: 12px;
  line-height: calc(14 / 12);
  text-align: center;
}

/*------------------------------------
p-parts
------------------------------------*/
.p-form__heading {
  text-align: center;
}

.p-form-section__error {
  max-width: 650px;
  margin-inline: auto;
  margin-top: 40px;
  padding: 20px;
  background-color: #fef9fb;
}

.p-form-section__errorText {
  margin-bottom: 5px;
  font-weight: 700;
}

.p-form-section__error ul li em {
  color: var(--color-red);
  font-style: normal;
}

.p-form-section__text {
  margin-block: 40px;
}

.p-form__text {
  margin-block: 20px;
  text-align: center;
}

.p-form__text a {
  color: var(--color-blue);
  text-decoration: underline;
}

/********************************
* p-header
********************************/
.p-header {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
}

.p-header__inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "top contact" "main contact";
  height: 98px;
  margin-inline: auto;
  padding-left: min(calc(40 / 1920 * 100%), 40px);
  overflow: hidden;
}

.p-header__top {
  grid-area: top;
  margin-top: 17px;
  font-size: 12px;
  line-height: calc(12 / 12);
}

.p-header__main {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-area: main;
  align-items: center;
  padding-block: 10px 15px;
  gap: clamp(10px, calc(30 / 1920 * 100vw), 30px);
}

.p-header__logo img {
  width: 100%;
  max-width: min(calc(369 / 1920 * 100vw), 369px);
}

.p-header__list {
  display: grid;
  grid-template-columns: repeat(5, auto);
  align-items: center;
  justify-self: end;
  width: -moz-fit-content;
  width: fit-content;
  gap: 8px;
}

.p-header__item {
  position: relative;
  padding-inline: clamp(10px, calc(30 / 1920 * 100vw), 30px);
  transition: color 0.3s ease-out;
}
.p-header__item:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -8px;
  translate: 0 -50%;
  content: "/";
  color: var(--color-white-medium);
  font-weight: 500;
  font-size: clamp(15px, calc(20 / 1920 * 100vw), 20px);
  line-height: calc(20 / 20);
}

.p-header__item a {
  position: relative;
  font-weight: 500;
  font-size: clamp(15px, calc(18 / 1920 * 100vw), 18px);
  line-height: calc(18 / 18);
  text-align: center;
  transition: color 0.3s ease-out;
}
.p-header__item a::before {
  display: block;
  position: absolute;
  bottom: -2px;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: right;
  background-color: var(--color-blue);
  content: "";
  transition: transform 0.3s ease-out;
}

.p-header__contact {
  display: grid;
  grid-template-columns: auto auto;
  grid-area: contact;
  align-items: center;
  border-left: 2px solid var(--color-blue-light);
}

.p-header__info {
  padding-inline: clamp(10px, calc(22 / 1920 * 100vw), 22px);
}

.p-header__tel a {
  color: inherit;
  color: var(--color-blue);
  font-weight: 800;
  font-size: clamp(18px, calc(27 / 1920 * 100vw), 27px);
  line-height: calc(32 / 27);
  font-family: var(--font-en);
  text-decoration: none;
}

.p-header__hours {
  margin-top: 3px;
  font-size: clamp(12px, calc(15 / 1920 * 100vw), 15px);
  line-height: calc(15 / 15);
  text-align: center;
}
.p-header__hours span {
  display: block;
  margin-top: 3px;
}

.p-header__form {
  height: 100%;
  background: var(--color-blue);
}

.p-header__formLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-inline: clamp(10px, calc(14 / 1920 * 100vw), 14px);
  gap: clamp(5px, calc(7 / 1920 * 100vw), 7px);
}

.p-header__formTitle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  font-weight: 400;
  font-size: clamp(15px, calc(20 / 1920 * 100vw), 20px);
  line-height: calc(20 / 20);
}

.p-header__formTitle img {
  width: clamp(15px, calc(26 / 1920 * 100vw), 26px);
  height: clamp(15px, calc(27 / 1920 * 100vw), 27px);
}

.p-header__formButton {
  padding: clamp(3px, calc(7 / 1920 * 100vw), 6px) clamp(20px, calc(51 / 1920 * 100vw), 51px) clamp(3px, calc(7 / 1920 * 100vw), 6px);
  border: 1px solid var(--color-blue-dark);
  border-radius: 100vmax;
  background: var(--color-blue-dark);
  color: #fff;
  font-size: clamp(12px, calc(15 / 1920 * 100vw), 15px);
  line-height: calc(15 / 15);
  text-align: center;
  transition: color 0.3s ease-out, background 0.3s ease-out;
}
.p-header__drawer {
  display: none;
}

.p-main {
  margin-top: 98px;
}

.p-maker {
  display: grid;
  grid-template-columns: 160px 1fr;
  padding: 40px 50px;
  gap: 40px;
  border-radius: 10px;
  background: var(--color-white-lighter);
}

.p-maker__heading {
  color: var(--color-blue-dark);
  font-weight: 700;
}

.p-maker__headingJp {
  font-size: 22px;
  line-height: calc(33 / 22);
}

.p-maker__headingEn {
  line-height: calc(24 / 16);
}

/*--------------------------------
.p-media
--------------------------------*/
.p-media {
  display: grid;
  grid-template-columns: clamp(300px, 40.625%, 520px) 1fr;
  gap: 40px;
}

.p-media__heading:not(:first-child) {
  margin-top: 40px;
}

.p-media__text {
  margin-top: 14px;
  line-height: calc(28 / 16);
}

.p-media__link {
  color: var(--color-blue);
  text-decoration: underline;
}

.p-media__textEm {
  color: var(--color-blue-dark);
  font-style: normal;
  font-weight: 700;
}

.p-media02 {
  display: grid;
  z-index: 0;
  position: relative;
  grid-template-columns: min(calc(441 / 1100 * 100%), 441px) 1fr;
  align-items: center;
  padding: 40px;
  overflow: clip;
  gap: min(calc(40 / 1100 * 100%), 40px);
  border-radius: 10px;
  background: var(--color-white-lighter);
}
.p-media02::before, .p-media02::after {
  display: block;
  z-index: -1;
  position: absolute;
  width: min(38.9090909091vw, 428px);
  height: min(38.9090909091vw, 428px);
  background-image: url(../../assets/images/road/media-background@2x.webp);
  background-position: center;
  background-size: cover;
  content: "";
}
.p-media02::before {
  top: -120px;
  left: -80px;
}
.p-media02::after {
  right: -80px;
  bottom: -120px;
}

.p-media02__title {
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 20px;
  background: var(--color-blue-dark);
  color: white;
  font-weight: 700;
  font-size: 23px;
  line-height: calc(34 / 23);
}

.p-media02__text {
  margin-top: 25px;
  font-weight: 700;
  font-size: 20px;
  line-height: calc(33 / 20);
}

.p-media02__text span {
  display: block;
}

.p-media02__text + .p-media02__text {
  margin-top: 25px;
}

.p-media02__textEm {
  color: var(--color-blue-dark);
  font-style: normal;
}

.p-media02__remark {
  margin-top: 10px;
  line-height: calc(24 / 16);
}

/* ------------------------------------
 .p-page-mv
--------------------------------------*/
.p-page-mv {
  background: var(--color-white-medium);
}

.p-page-mv__inner {
  display: grid;
  position: relative;
  place-items: center;
  height: 350px;
}

.p-page-mv__headingEn {
  color: #fff;
  font-weight: 800;
  font-size: 70px;
  line-height: calc(85 / 70);
  font-family: var(--font-en);
  letter-spacing: calc(5.6 / 70 * 1em);
  text-align: center;
  text-shadow: 0px 0px 6px rgba(161, 171, 184, 0.24);
  text-transform: uppercase;
}

.p-page-mv__headingJa {
  margin-top: 6px;
  color: #183043;
  font-weight: 700;
  font-size: 45px;
  line-height: 1;
  letter-spacing: calc(3.6 / 45 * 1em);
  text-align: center;
}

.p-page-mv__breadcrumb {
  position: absolute;
  bottom: 20px;
  left: var(--padding-pc);
  padding-right: var(--padding-pc);
}

/*------------------------------------
p-parts
------------------------------------*/
.p-parts-about__media {
  margin-top: 60px;
}

.p-parts-about__media02 {
  margin-top: 120px;
}

.p-parts-about__table {
  margin-top: 80px;
}

.p-parts-value {
  margin-top: 80px;
}

.p-parts-value__heading {
  text-align: center;
}

.p-parts-value__blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 37px;
  gap: 20px;
}

.p-parts-value__content {
  padding: 30px;
  background: var(--color-white-light);
}

.p-parts-value__blockHeading {
  padding-bottom: 2px;
  padding-left: 16px;
  border-bottom: 1px solid var(--color-blue-dark);
  border-left: 5px solid var(--color-blue-dark);
  color: var(--color-blue-dark);
  font-weight: 700;
  font-size: 20px;
  line-height: calc(28 / 20);
}

.p-parts-value__list {
  display: grid;
  margin-top: 30px;
  gap: 20px;
}

.p-parts-value__item {
  display: grid;
  grid-template-columns: 170px 1fr;
  overflow: hidden;
  border-radius: 10px;
}

.p-parts-value__item._used {
  border: 3px solid var(--color-red);
}

.p-parts-value__itemHeading {
  display: grid;
  place-content: center;
  background: var(--color-blue-dark);
  color: white;
  font-weight: 700;
  font-size: 18px;
  line-height: calc(28 / 18);
}

.p-parts-value__itemPrice {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  background-color: white;
  color: var(--color-blue-dark);
  font-weight: 700;
  font-size: 20px;
  line-height: calc(28 / 20);
}

.p-parts-value__item._used .p-parts-value__itemPrice {
  color: var(--color-red);
}

.p-parts-value__itemPriceLarge {
  font-weight: 800;
  font-size: 27px;
  line-height: calc(33 / 27);
  font-family: var(--font-en);
}

.p-parts-value__itemIcon {
  display: grid;
  position: absolute;
  place-content: center;
  width: 38px;
  height: 38px;
  inset: 50% auto auto calc(50% - 110px);
  translate: 0 -50%;
  border: 2px solid var(--color-red);
  border-radius: 50%;
  color: var(--color-red);
  font-weight: 700;
  font-size: 20px;
  line-height: calc(28 / 20);
}

.p-parts-value__diff {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  padding: 34px 20px 33px;
  background-color: #ffec8f;
  color: var(--color-blue-dark);
  font-weight: 700;
  font-size: 20px;
  line-height: calc(28 / 20);
}

.p-parts-value__diff::before {
  display: block;
  position: absolute;
  width: 46px;
  height: 21px;
  inset: 0 auto auto 50%;
  translate: -50% 0;
  background-color: var(--color-blue-dark);
  content: "";
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}

.p-parts-value__diffPrice {
  margin-inline: 12px 5px;
  font-weight: 800;
  font-size: 27px;
  line-height: calc(33 / 27);
  font-family: var(--font-en);
}

.p-parts-value__diffLast {
  margin-left: 10px;
}

.p-parts-other {
  margin-top: 136px;
}

.p-parts-other__text {
  margin-top: 60px;
  line-height: calc(28 / 16);
}

.p-parts-other__button {
  max-width: 450px;
  margin-top: 91px;
  margin-inline: auto;
}

/* ------------------------------------
 .p-purchase
--------------------------------------*/
.p-purchase-area__media {
  margin-top: 52px;
}

.p-purchase-area__button {
  max-width: 450px;
  margin-top: 90px;
  margin-inline: auto;
}

.p-purchase-flow {
  margin-top: 135px;
}

.p-purchase-flow__list {
  display: grid;
  margin-top: 60px;
  gap: 30px;
}

.p-purchase-flow__last {
  position: relative;
  margin-top: 50px;
  padding: 10px 20px;
  border: 5px solid var(--color-white-medium);
  border-radius: 10px;
  color: #204483;
  font-weight: 700;
  font-size: 22px;
  line-height: calc(32 / 22);
  text-align: center;
}
.p-purchase-flow__last::before {
  display: block;
  position: absolute;
  top: -39px;
  left: 50%;
  width: 46px;
  height: 21px;
  translate: -50% 0;
  background-color: var(--color-white-dark);
  content: "";
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}

/*--------------------------------
.p-road
--------------------------------*/
.p-road-contact__tel {
  max-width: 1000px;
  margin-inline: auto;
}

.p-road-contact__text {
  margin-top: 40px;
  font-weight: 700;
  font-size: 35px;
  line-height: calc(52.5 / 35);
  text-align: center;
}

.p-road-contact__text span {
  display: block;
}

.p-road-contact__images {
  display: grid;
  grid-template-columns: 65.625% 1fr;
  align-items: center;
  margin-top: 52px;
}

.p-road-contact__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 1px solid #e5f5ff;
}

.p-road-contact__qrTitle {
  color: var(--color-blue-dark);
  font-weight: 700;
  font-size: 23px;
  line-height: calc(34 / 23);
}

.p-road-contact__qrImage {
  max-width: 205px;
  margin-inline: auto;
}

.p-road-merit {
  margin-top: 100px;
}

.p-road-merit__media01 {
  margin-top: 54px;
}

.p-road-merit__table {
  margin-top: 81px;
}

.p-road-merit__media02 {
  margin-top: 128px;
}

.p-road-merit__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 56px;
  gap: 15px;
}

.p-road-merit__imageText {
  margin-top: 3px;
  line-height: calc(28 / 16);
}

.p-road-merit__media03 {
  margin-top: 117px;
}

.p-road-service {
  margin-top: 65px;
}

.p-road-service__heading {
  text-align: center;
}

.p-road-service__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 37px;
  gap: 20px;
}

.p-road-service__itemTitle {
  width: 100%;
  padding: 8px 20px;
  background-color: var(--color-blue-dark);
  color: white;
  font-weight: 700;
  font-size: 16px;
  line-height: calc(28 / 16);
  text-align: center;
}

.p-road-service__itemImage {
  background-color: var(--color-white-medium);
}

.p-road-service__itemText {
  margin-top: 16px;
  color: var(--color-blue-dark);
  font-weight: 400;
  font-size: 13px;
  line-height: calc(19.5 / 13);
  text-align: center;
}

.p-road-service__itemText span {
  display: block;
}

.p-road-detail {
  margin-top: 120px;
  padding-block: 40px;
  background-color: var(--color-blue-dark);
}

.p-road-detail__heading {
  color: white;
  font-weight: 700;
  font-size: 20px;
  line-height: calc(29 / 20);
  text-align: center;
}

.p-road-detail__link {
  display: grid;
  grid-template-columns: 286px 205px;
  place-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 60px;
}

/*------------------------------------
p-parts
------------------------------------*/
.p-sitemap__list {
  margin-inline: calc(50% - 450px) auto;
  columns: 3;
}

.p-sitemap__item a {
  display: block;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 24px;
  padding-left: 18px;
  line-height: calc(30 / 16);
  transition: color 0.3s ease-out;
}
.p-sitemap__item:first-child a {
  margin-top: 0;
}

.p-sitemap__item a::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 16px;
  translate: 0 -50%;
  background-image: url(../../assets/images/common/icon-arrow-blue.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.p-step {
  display: grid;
  grid-template-columns: 95px 124px 1fr;
  align-items: start;
  min-height: 214px;
  padding: 30px 78px 43px 58px;
  gap: 47px;
  border-radius: 10px;
  background: var(--color-white-lighter);
}

.p-step__number {
  display: grid;
  position: relative;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-blue);
  text-align: center;
}
.p-step__number::after {
  display: block;
  position: absolute;
  bottom: -60px;
  left: 50%;
  width: 15px;
  height: 29px;
  translate: -50% 0;
  background-image: url(../../assets/images/purchase/spte-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.p-step__numberEn {
  color: var(--color-yellow-dark);
  font-weight: 700;
  font-size: 18px;
  line-height: calc(26 / 18);
  text-transform: uppercase;
}

.p-step__numberNum {
  color: var(--color-blue);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
}

.p-step__heading {
  color: var(--color-blue-dark);
  font-weight: 700;
  font-size: 22px;
  line-height: calc(32 / 22);
}

.p-step__text {
  margin-top: 5px;
  line-height: calc(28 / 16);
}

.p-step__box {
  min-height: 125px;
  margin-top: 24px;
  padding: 22px 20px;
  border-radius: 10px;
  background: #ebeff7;
  color: var(--color-blue-dark);
  text-align: center;
}

.p-step__box + .p-step__box {
  margin-top: 20px;
}

.p-step__boxHeading {
  font-weight: 700;
  line-height: calc(23 / 16);
}

.p-step__boxTel {
  font-weight: 800;
  font-size: 27px;
  line-height: calc(33 / 27);
  font-family: var(--font-en);
}

.p-step__time {
  margin-top: 6px;
  font-size: 15px;
  line-height: calc(18 / 15);
}

.p-step__boxButton {
  max-width: 320px;
  margin-top: 10px;
  margin-inline: auto;
}

/*--------------------------------
.p-tire
--------------------------------*/
.p-tire-section__media {
  margin-top: 70px;
}

.p-tire-section:not(:first-child) {
  margin-top: 135px;
}

.p-tire-maker {
  margin-top: 135px;
}

.p-tire-maker__list {
  display: grid;
  margin-top: 60px;
  gap: 20px;
}

.p-top-mv {
  position: relative;
}

.p-top-mv__inner {
  display: grid;
  grid-template-columns: 442fr 792fr;
  place-items: center;
  max-width: calc(1240px + var(--padding-pc) * 2);
  min-height: 830px;
}

.p-top-mv__background {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-top-mv__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-mercari {
  padding-block: 60px 77px;
}

.p-top-mercari__inner {
  max-width: calc(600px + var(--padding-pc) * 2);
  margin-inline: auto;
}

.p-top-mercari__text {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding-inline: 40px;
  font-weight: 700;
  line-height: calc(24 / 16);
  text-align: center;
}
.p-top-mercari__text::before, .p-top-mercari__text::after {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 43px;
  translate: 0 -50%;
  background-color: var(--color-black);
  content: "";
}
.p-top-mercari__text::before {
  left: 0;
  rotate: -25deg;
}
.p-top-mercari__text::after {
  right: 0;
  rotate: 25deg;
}

.p-top-mercari__text span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
}

.p-top-mercari__content {
  display: block;
  margin-top: 28px;
  padding: 12px 12px 14px;
  border-radius: 10px;
  background: var(--color-red-dark);
}

.p-top-mercari__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}

.p-top-mercari__heading img {
  width: 23px;
  height: 25px;
}

.p-top-mercari__qrcode {
  width: 100px;
  height: 100px;
  margin-top: 6px;
  margin-inline: auto;
}

.p-top-news {
  padding-block: 80px;
  background-color: var(--color-blue-dark);
}

.p-top-news__inner {
  max-width: calc(1390px + var(--padding-pc) * 2);
}

.p-top-news__content {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 30px 84px 30px 60px;
  gap: min(calc(100 / 1920 * 100vw), 100px);
  border-radius: 20px;
  background: #fbfbfb;
}

.p-top-news__heading {
  display: grid;
}

.p-top-news__heading-ja {
  color: var(--color-blue-dark);
  font-weight: 500;
  font-size: 23px;
  line-height: calc(30 / 23);
}

.p-top-news__heading-en {
  color: var(--color-white-dark);
  font-weight: 800;
  font-size: 20px;
  line-height: calc(30 / 20);
  font-family: var(--font-en);
}

.p-top-news__list {
  max-height: 260px;
  overflow-y: auto;
}
.p-top-news__list::-webkit-scrollbar {
  width: 14px;
}
.p-top-news__list::-webkit-scrollbar-thumb {
  background-color: #c2c2c2;
}
.p-top-news__list::-webkit-scrollbar-track {
  background-color: #e2e2e2;
}

.p-top-news__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "date title" "date content";
  padding-right: 33px;
  padding-bottom: 30px;
  gap: 0 40px;
}

.p-top-news__item:not(:first-child) {
  padding-top: 26px;
}

.p-top-news__item:not(:last-child) {
  border-bottom: 1px solid var(--color-white-medium);
}

.p-top-news__itemDate {
  grid-area: date;
  color: var(--color-blue-dark);
  font-weight: 500;
  font-size: 16px;
}

.p-top-news__itemTitle {
  grid-area: title;
  font-weight: 700;
  font-size: 16px;
  line-height: calc(27.2 / 16);
}

.p-top-news__itemContent {
  grid-area: content;
  font-weight: 400;
  font-size: 16px;
  line-height: calc(28 / 16);
}
.p-top-news__itemContent h4 {
  font-weight: 600;
}

.p-top-parts {
  padding-block: 100px 80px;
}

.p-top-parts__text {
  max-width: 900px;
  margin-top: 26px;
  margin-inline: auto;
  line-height: calc(28 / 16);
  text-align: center;
}

.p-top-parts__text span {
  display: block;
}

.p-top-parts__content {
  display: grid;
  grid-template-columns: min(calc(470 / 1280 * 100vw), 470px) 1fr;
  align-items: center;
  margin-top: 78px;
  gap: 80px;
}

.p-top-parts__list {
  display: grid;
  position: relative;
  gap: 10px;
}
.p-top-parts__list::after {
  position: absolute;
  top: 50%;
  right: -58px;
  width: 30px;
  height: 62px;
  translate: 0 -50%;
  background-color: #dde5f1;
  content: "";
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.p-top-parts__item {
  padding: 14px 20px;
  border-radius: 10px;
  background: linear-gradient(90deg, #44aeea 0%, #008ad2 100%);
  color: white;
  font-size: 18px;
  line-height: calc(26 / 18);
  text-align: center;
}

.p-top-parts__boxText {
  padding-block: 28px 12px;
  background-color: var(--color-white-light);
  font-weight: 700;
  font-size: 23px;
  line-height: calc(37 / 23);
  text-align: center;
}

.p-top-parts__boxTextMain {
  display: flex;
  justify-content: center;
  margin-bottom: 7px;
  font-weight: 700;
  font-size: 28px;
  line-height: calc(37 / 28);
}

.p-top-parts__boxTextEm {
  color: var(--color-red);
  font-style: normal;
  font-weight: 700;
  font-size: 33px;
  line-height: calc(36 / 33);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.p-top-parts__boxFooter {
  padding-block: 14px 20px;
  background-color: #eb5757;
  color: white;
  font-weight: 700;
  font-size: 18px;
  line-height: calc(26 / 18);
  text-align: center;
}

.p-top-parts__image {
  display: block;
  margin-top: 80px;
}

.p-top-parts__button {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 840px;
  margin-top: 80px;
  margin-inline: auto;
  gap: 40px;
}

.p-top-tire {
  padding-block: 100px 80px;
  background-image: url(../../assets/images/top/tire-background@2x.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.p-top-tire.c-section-gradation::before {
  background-color: var(--color-blue-dark);
}

.p-top-tire__content {
  max-width: 900px;
  margin-top: 34px;
  margin-inline: auto;
  color: white;
}

.p-top-tire__copy {
  font-weight: 500;
  font-size: 23px;
  line-height: calc(33 / 23);
}

.p-top-tire__texts {
  margin-top: 23px;
}

.p-top-tire__text {
  line-height: calc(28 / 16);
}

.p-top-tire__text span {
  display: block;
}

.p-top-tire__text + .p-top-tire__text {
  margin-top: 13px;
}

.p-top-tire__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 840px;
  margin-top: 80px;
  margin-inline: auto;
  gap: 40px;
}

.p-top-purchase {
  padding-block: 100px 80px;
}

.p-top-purchase__content {
  margin-top: 40px;
}

.p-top-purchase__text {
  max-width: 900px;
  margin-top: 36px;
  line-height: calc(28 / 16);
}

.p-top-purchase__text span {
  display: block;
}

.p-top-purchase__media {
  display: grid;
  grid-template-columns: min(calc(460 / 1280 * 100vw), 460px) 1fr;
  max-width: 1100px;
  margin-top: 60px;
  margin-inline: auto;
  gap: 20px;
}

.p-top-purchase__case {
  padding: 21px 28px 35px 32px;
  border-radius: 10px;
  background: var(--color-white-light);
}

.p-top-purchase__caseHeading {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-blue-dark);
  color: var(--color-blue-dark);
  font-weight: 700;
  font-size: 23px;
  line-height: calc(33 / 23);
}

.p-top-purchase__caseList {
  display: grid;
  margin-top: 27px;
  gap: 20px;
}

.p-top-purchase__caseItem {
  display: grid;
  grid-template-columns: 136px 1fr;
}

.p-top-purchase__caseItemHeading {
  position: relative;
  place-content: center;
  min-height: 80px;
  padding: 20px 18px;
  background: var(--color-yellow);
  color: var(--color-blue-dark);
  font-weight: 700;
  line-height: calc(23 / 16);
  text-align: center;
}

.p-top-purchase__caseNumber {
  position: absolute;
  top: -12px;
  left: 0;
  width: 80px;
  height: 24px;
  background-color: white;
  color: var(--color-blue-light);
  font-weight: 700;
  font-size: 14px;
  line-height: calc(20 / 14);
}

.p-top-purchase__caseItemText {
  padding: 15px 28px 17px 36px;
  background-color: white;
  font-weight: 500;
  line-height: calc(23 / 16);
}

.p-top-purchase__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 840px;
  margin-top: 80px;
  margin-inline: auto;
  gap: 40px;
}

.p-top-road {
  padding-block: 137px 0;
}

.p-top-road__tel {
  display: block;
  max-width: 1000px;
  margin-top: 50px;
  margin-inline: auto;
}

.p-top-road__content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 40px;
  gap: 30px;
}

.p-top-road__service {
  display: grid;
  grid-template-rows: auto 1fr;
}

.p-top-road__serviceHeading {
  padding-block: 20px;
  background: var(--color-blue);
  color: white;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.4347826087;
  text-align: center;
}

.p-top-road__serviceImage {
  display: grid;
  place-content: center;
  padding: 20px;
  background: #e5f5ff;
}

.p-top-road__serviceImage img {
  max-width: 83%;
  margin-inline: auto;
}

.p-top-road__jaf {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  padding: 46px;
  gap: 40px;
  border: 1px solid var(--color-blue);
}

.p-top-road__jafTitle {
  color: var(--color-blue-dark);
  font-weight: 700;
  font-size: 23px;
  line-height: 33px;
  text-align: center;
}

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

.u-hidden-sp {
  display: block;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}

.u-text-red {
  color: var(--color-red);
}

.u-text-bold {
  font-weight: 700;
}

@media (min-width: 2402px){
  .c-section-gradation::before {
    right: 0;
    left: auto;
  }
  .c-section-gradation::after {
    right: 0;
    left: auto;
  }
}

@media screen and (max-width: 1440px){
  .p-header__inner {
    height: 71px;
    padding-right: 71px;
  }
  .p-header__top {
    margin-top: 10px;
  }
  .p-header__main {
    padding-block: 10px;
  }
  .p-header__logo img {
    max-width: 250px;
  }
  .p-header__nav {
    /* p-header__nav */
    display: none;
  }
  .p-header__drawer {
    display: block;
    z-index: 200;
    /* p-header__drawer */
    position: fixed;
    top: 0;
    right: 0;
  }
  .p-main {
    margin-top: 71px;
  }
}

@media screen and (max-width: 1280px){
  .p-footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .p-parts-value__blockHeading {
    font-size: 18px;
  }
  .p-step {
    padding: 30px 40px;
    gap: 30px;
  }
  .p-top-road__jaf {
    padding: 20px;
  }
}

@media screen and (max-width: 1024px){
  .c-drawer__contact {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .c-drawer__form {
    min-height: 73px;
  }
  .c-form__group {
    grid-template-columns: 150px 1fr;
    column-gap: 50px;
    padding: 20px;
  }
  .c-table02__header {
    font-size: 18px;
  }
  .c-table02__case {
    padding: 15px;
  }
  .c-table02__caseTitle {
    font-size: 16px;
  }
  .c-table02__caseText {
    margin-top: 6px;
    font-size: 14px;
  }
  .c-table02__priceLeft,
  .c-table02__priceRight {
    bottom: 20px;
    font-size: 16px;
  }
  .c-table02__priceLeft {
    right: calc(50% + 25px);
  }
  .c-table02__priceNum {
    font-size: 65px;
  }
  .c-table02__priceRight {
    right: calc(50% - 40px);
  }
  .c-table02__priceText {
    font-size: 20px;
    line-height: calc(28 / 20);
  }
  .c-table02__notMemberPrice {
    font-size: 18px;
    line-height: calc(21 / 18);
  }
  .c-table02__notMemberText {
    margin-top: 6px;
    font-size: 14px;
  }
  .p-footer__nav {
    grid-template-columns: 1fr;
  }
  .p-footer__list {
    display: none;
  }
  .p-header__inner {
    grid-template-areas: "main contact" "main contact";
  }
  .p-header__top {
    display: none;
  }
  .p-parts-value__blocks {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin-top: 20px;
    margin-inline: auto;
  }
  .p-road-contact__text {
    margin-top: 20px;
    font-size: 20px;
    line-height: calc(29 / 20);
  }
  .p-road-contact__images {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }
  .p-sitemap__list {
    margin-inline: auto;
  }
  .p-top-mv__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .p-top-mv__content {
    max-width: 60%;
  }
  .p-top-news__content {
    padding: 30px 40px;
  }
  .p-top-parts__boxTextMain {
    font-size: 22px;
  }
  .p-top-parts__boxTextEm {
    font-size: 26px;
  }
  .p-top-purchase__media {
    grid-template-columns: 1fr;
  }
  .p-top-purchase__media > img {
    max-width: 600px;
    margin-inline: auto;
  }
  .p-top-purchase__caseHeading {
    padding-bottom: 2px;
    font-size: 14px;
    line-height: calc(24.5 / 14);
  }
  .p-top-purchase__caseList {
    margin-top: 22px;
    gap: 28px;
  }
}

@media screen and (max-width: 768px){
  :where(html) {
    font-size: var(--font-size-base);
  }
  .l-container {
    margin-top: 40px;
  }
  .l-footer {
    margin-top: 100px;
  }
  .l-inner {
    padding-inline: var(--padding-sp);
  }
  .l-main {
    margin-top: 40px;
  }
  .l-pagenation {
    margin-top: 40px;
  }
  .l-product-detail {
    padding-block: 80px;
  }
  .c-breadcrumb__item {
    font-size: 14px;
    line-height: calc(17 / 14);
  }
  .c-button {
    padding: 8px 10px 9px;
    font-size: 16px;
  }
  .c-button svg {
    right: 12px;
    width: 6px;
    height: 10px;
  }
  .c-button._middle {
    padding: 10px 10px 12px;
    font-size: 18px;
  }
  .c-button._middle svg {
    right: 16px;
    width: 8px;
    height: 13px;
  }
  .c-drawer__button {
    width: 60px;
    height: 61px;
    background-color: var(--color-blue);
  }
  .c-drawer__line,
  .c-drawer__line::before,
  .c-drawer__line::after {
    background-color: white;
  }
  .c-drawer__dialog {
    margin-top: 60px;
  }
  .c-drawer__container {
    padding-top: 25px;
    padding-bottom: 50px;
  }
  .c-drawer__nav {
    max-width: 88%;
  }
  .c-drawer__list {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .c-drawer__itemEn {
    font-size: 20px;
  }
  .c-drawer__itemJa {
    font-size: 16px;
  }
  .c-form__section + .c-form__section {
    margin-top: 40px;
  }
  .c-form__heading {
    margin-block: 25px;
  }
  .c-form__image {
    margin-block: 25px;
  }
  .c-form__group {
    grid-template-columns: 100%;
    column-gap: 10px;
    row-gap: 10px;
    padding: 15px 0;
  }
  .c-form__label {
    grid-auto-flow: column;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    gap: 10px;
  }
  .c-form__input,
  .c-form__textarea,
  .c-form__select {
    padding: 8px;
  }
  .c-form__input {
    max-width: 100%;
  }
  .c-form__inputImage {
    margin-bottom: 10px;
  }
  .c-form__inputGroup {
    grid-template-columns: 1fr;
  }
  .c-form__selectWrapperItem::after {
    right: 5px;
    width: 10px;
    height: 6px;
  }
  .c-form__actions {
    margin-top: 40px;
  }
  .c-form__actions._double {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .c-form__submit {
    padding: 10px 20px;
    font-size: 18px;
  }
  .c-form__privacy {
    margin-top: 40px;
    padding: 20px 15px;
  }
  .c-form__ssl {
    margin-top: 20px;
    padding: 20px 15px;
  }
  .c-heading__en {
    margin-top: 6px;
    font-size: 35px;
    line-height: calc(49 / 35);
  }
  .c-heading__ja {
    margin-top: 4px;
    font-size: 16px;
    line-height: calc(24 / 16);
  }
  .c-heading02 {
    font-size: 25px;
    line-height: calc(36 / 25);
  }
  .c-heading03 {
    padding: 9px 15px 10px;
    font-size: 16px;
    line-height: calc(24 / 16);
  }
  .c-heading04 {
    font-size: 25px;
  }
  .c-heading05 {
    font-size: 20px;
    line-height: calc(30 / 20);
  }
  .c-section-gradation::before {
    left: calc(50% - 92px);
    width: 527px;
    height: 223px;
  }
  .c-section-gradation::after {
    content: none;
  }
  .c-table__header,
  .c-table__data {
    display: block;
    width: 100%;
    border-bottom: none;
  }
  .c-table__header {
    padding: 15px 15px 15px 20px;
  }
  .c-table__data {
    padding: 20px 15px 20px 20px;
  }
  .c-table__row:last-child .c-table__data {
    border-bottom: 1px solid #e0e0e0;
  }
  .p-company-guide__table {
    margin-top: 30px;
  }
  .p-compay-section {
    margin-top: 80px;
  }
  .p-compay-section__content {
    margin-top: 30px;
  }
  .p-compay-section__heading03:not(:first-child) {
    margin-top: 30px;
  }
  .p-compay-section__text._name {
    margin-top: 20px;
  }
  .p-footer {
    padding-block: 38px 20px;
  }
  .p-footer__inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .p-footer__border {
    display: none;
  }
  .p-footer__logo img {
    max-width: 250px;
    margin-top: 19px;
  }
  .p-footer__company {
    margin-top: 21px;
    color: #fff;
    font-size: 14px;
    line-height: calc(21 / 14);
  }
  .p-footer__contact {
    margin-top: 35px;
  }
  .p-footer__hours {
    margin-top: 13px;
    font-size: 14px;
    line-height: calc(17 / 14);
  }
  .p-footer__nav {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .p-footer__banners {
    max-width: 220px;
    gap: 20px;
  }
  .p-footer__copyright {
    margin-top: 116px;
    padding-inline: var(--padding-sp);
  }
  .p-header {
    height: auto;
  }
  .p-header__inner {
    height: 61px;
  }
  .p-header__logo img {
    max-width: 233px;
  }
  .p-header__contact {
    /* p-header__contact */
    display: none;
  }
  .p-main {
    margin-top: 61px;
  }
  .p-maker {
    grid-template-columns: 100%;
    padding: 20px 25px;
    gap: 10px;
  }
  .p-maker__headingJp {
    font-size: 20px;
    line-height: calc(27 / 18);
  }
  .p-media {
    grid-template-columns: 100%;
    gap: 30px;
  }
  .p-media__heading:not(:first-child) {
    margin-top: 20px;
  }
  .p-media__text {
    margin-top: 10px;
  }
  .p-media02 {
    display: grid;
    grid-template-columns: 100%;
    padding: 25px 20px;
    gap: 20px;
  }
  .p-media02::before, .p-media02::after {
    width: min(52.0833333333vw, 400px);
    height: min(52.0833333333vw, 400px);
  }
  .p-media02::before {
    top: -60px;
    left: -40px;
  }
  .p-media02::after {
    right: -40px;
    bottom: -60px;
  }
  .p-media02__title {
    padding: 5px 15px;
    font-size: 18px;
  }
  .p-media02__text {
    margin-top: 15px;
    font-size: 16px;
  }
  .p-media02__text + .p-media02__text {
    margin-top: 15px;
  }
  .p-media02__remark {
    margin-top: 5px;
  }
  .p-page-mv__inner {
    height: 250px;
  }
  .p-page-mv__headingEn {
    font-size: clamp(30px, min(calc(40 / 768 * 100vw), 40px), 40px);
    line-height: calc(50 / 40);
  }
  .p-page-mv__headingJa {
    margin-top: 4px;
    font-size: clamp(20px, min(calc(30 / 768 * 100vw), 30px), 30px);
    line-height: calc(40 / 30);
  }
  .p-page-mv__breadcrumb {
    bottom: 15px;
    left: var(--padding-sp);
    padding-right: var(--padding-sp);
  }
  .p-parts-about__media {
    margin-top: 40px;
  }
  .p-parts-about__media02 {
    margin-top: 60px;
  }
  .p-parts-about__table {
    margin-top: 40px;
  }
  .p-parts-value {
    margin-top: 40px;
  }
  .p-parts-value__content {
    padding: 20px 15px;
  }
  .p-parts-value__blockHeading {
    padding-left: 12px;
    border-left: 3px solid var(--color-blue-dark);
  }
  .p-parts-value__list {
    margin-top: 20px;
    gap: 15px;
  }
  .p-parts-value__item {
    grid-template-columns: 80px 1fr;
  }
  .p-parts-value__item._used {
    border: 2px solid var(--color-red);
  }
  .p-parts-value__itemHeading {
    font-size: 15px;
  }
  .p-parts-value__itemPrice {
    font-size: 16px;
  }
  .p-parts-value__itemPriceLarge {
    font-size: 22px;
  }
  .p-parts-value__itemIcon {
    width: 30px;
    height: 30px;
    inset: 50% auto auto calc(50% - 80px);
    font-size: 18px;
  }
  .p-parts-value__diff {
    padding: 20px 15px;
  }
  .p-parts-value__diff::before {
    width: 30px;
    height: 15px;
  }
  .p-parts-value__diffPrice {
    font-size: 22px;
  }
  .p-parts-value__diffLast {
    margin-left: 5px;
  }
  .p-parts-other {
    margin-top: 80px;
  }
  .p-parts-other__text {
    margin-top: 40px;
  }
  .p-parts-other__button {
    margin-top: 40px;
  }
  .p-purchase-area__media {
    margin-top: 30px;
  }
  .p-purchase-area__button {
    margin-top: 50px;
  }
  .p-purchase-flow {
    margin-top: 80px;
  }
  .p-purchase-flow__list {
    margin-top: 40px;
    gap: 20px;
  }
  .p-purchase-flow__last {
    font-size: 18px;
  }
  .p-road-contact__qr {
    padding-block: 20px;
  }
  .p-road-contact__qrTitle {
    font-size: 18px;
    line-height: calc(27 / 18);
  }
  .p-road-contact__qrImage {
    max-width: 150px;
  }
  .p-road-merit {
    margin-top: 50px;
  }
  .p-road-merit__media01 {
    margin-top: 30px;
  }
  .p-road-merit__table {
    margin-top: 40px;
  }
  .p-road-merit__media02 {
    margin-top: 60px;
  }
  .p-road-merit__media03 {
    margin-top: 60px;
  }
  .p-road-service {
    margin-top: 40px;
  }
  .p-road-service__list {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 30px;
  }
  .p-road-service__itemTitle {
    padding: 5px 15px;
  }
  .p-road-detail {
    margin-top: 60px;
    padding: 30px;
  }
  .p-road-detail__heading {
    font-size: 16px;
    line-height: calc(24 / 16);
  }
  .p-road-detail__link {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin-top: 30px;
    margin-inline: auto;
    gap: 30px;
  }
  .p-sitemap__list {
    width: -moz-fit-content;
    width: fit-content;
    columns: 2;
  }
  .p-sitemap__item a {
    margin-top: 16px;
  }
  .p-step {
    grid-template-columns: 80px 1fr;
    min-height: unset;
    padding: 30px 20px;
    gap: 30px 20px;
  }
  .p-step__number {
    padding-bottom: 10px;
  }
  .p-step__number::after {
    content: none;
  }
  .p-step__numberEn {
    font-size: 14px;
  }
  .p-step__numberNum {
    font-size: 30px;
  }
  .p-step__content {
    grid-column: 1/-1;
  }
  .p-step__icon {
    align-self: center;
    width: 60px;
    height: 60px;
  }
  .p-step__heading {
    font-size: 20px;
  }
  .p-step__box {
    min-height: 100px;
    padding: 15px 10px;
  }
  .p-step__box + .p-step__box {
    margin-top: 10px;
  }
  .p-step__boxTel {
    font-size: 24px;
  }
  .p-step__time {
    font-size: 14px;
  }
  .p-tire-section__media {
    margin-top: 35px;
  }
  .p-tire-section:not(:first-child) {
    margin-top: 70px;
  }
  .p-tire-maker {
    margin-top: 70px;
  }
  .p-tire-maker__list {
    margin-top: 30px;
  }
  .p-top-mv {
    aspect-ratio: 600/390;
  }
  .p-top-mv__inner {
    height: calc(100svh - 60px);
    min-height: unset;
  }
  .p-top-mv__content {
    max-width: 100%;
  }
  .p-top-mercari {
    padding-block: 40px 30px;
  }
  .p-top-mercari__text {
    padding-inline: 30px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
  }
  .p-top-mercari__text::before, .p-top-mercari__text::after {
    top: auto;
    bottom: -5px;
    translate: unset;
  }
  .p-top-mercari__text::before {
    left: 5px;
  }
  .p-top-mercari__text::after {
    right: 5px;
  }
  .p-top-mercari__text span {
    display: inline;
  }
  .p-top-mercari__heading {
    font-size: 14px;
    line-height: calc(21 / 14);
  }
  .p-top-mercari__heading img {
    width: 19px;
    height: 20px;
  }
  .p-top-mercari__qrcode {
    display: none;
  }
  .p-top-news {
    padding-block: 40px;
  }
  .p-top-news__content {
    grid-template-columns: 100%;
    padding: 25px 20px 27px;
  }
  .p-top-news__heading {
    text-align: center;
  }
  .p-top-news__heading-ja {
    font-size: 18px;
  }
  .p-top-news__heading-en {
    color: var(--color-white-dark);
    font-size: 14px;
  }
  .p-top-news__list {
    max-height: 360px;
  }
  .p-top-news__list::-webkit-scrollbar {
    display: none;
  }
  .p-top-news__item {
    grid-template-columns: 1fr;
    grid-template-areas: "date" "title" "content";
    padding-right: 0;
    padding-bottom: 16px;
    gap: 12px 0;
  }
  .p-top-news__item:not(:first-child) {
    padding-top: 16px;
  }
  .p-top-news__itemDate {
    font-size: 14px;
    line-height: calc(21 / 14);
  }
  .p-top-news__itemTitle {
    font-size: 14px;
    line-height: calc(21 / 14);
  }
  .p-top-news__itemContent {
    font-size: 14px;
    line-height: calc(21 / 14);
  }
  .p-top-parts {
    padding-block: 40px 60px;
  }
  .p-top-parts__text {
    margin-top: 34px;
    font-size: 14px;
    line-height: calc(24.5 / 14);
  }
  .p-top-parts__content {
    grid-template-columns: 1fr;
    margin-top: 40px;
    gap: 70px;
  }
  .p-top-parts__list::after {
    top: auto;
    right: auto;
    bottom: -52px;
    left: 50%;
    width: 62px;
    height: 30px;
    translate: -50% 0;
    clip-path: polygon(100% 0, 0 0, 51% 100%);
  }
  .p-top-parts__item {
    padding: 12px 20px 13px;
    font-size: 16px;
    line-height: calc(24 / 16);
  }
  .p-top-parts__boxText {
    padding: 10px 20px 2px;
    font-size: 16px;
    line-height: calc(37 / 16);
  }
  .p-top-parts__boxTextMain {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    font-size: 16px;
    line-height: calc(37 / 16);
  }
  .p-top-parts__boxTextEm {
    font-size: 23px;
    line-height: calc(36 / 23);
    text-underline-offset: 0;
  }
  .p-top-parts__boxFooter {
    padding-block: 4px 6px;
    color: #fff;
    font-size: 14px;
    line-height: calc(20 / 14);
  }
  .p-top-parts__image {
    margin-top: 60px;
  }
  .p-top-parts__button {
    grid-template-columns: 100%;
    margin-top: 60px;
    gap: 15px;
  }
  .p-top-tire {
    padding-block: 40px 60px;
    background-image: url(../../assets/images/top/tire-background-sp@2x.webp);
  }
  .p-top-tire__content {
    margin-top: 32px;
  }
  .p-top-tire__copy {
    color: #fff;
    font-size: 18px;
    line-height: calc(27 / 18);
  }
  .p-top-tire__texts {
    margin-top: 11px;
  }
  .p-top-tire__text {
    font-size: 14px;
    line-height: calc(21 / 14);
  }
  .p-top-tire__buttons {
    grid-template-columns: 100%;
    margin-top: 101px;
    gap: 15px;
  }
  .p-top-purchase {
    padding-block: 40px 24px;
  }
  .p-top-purchase__content {
    margin-top: 20px;
  }
  .p-top-purchase__text {
    margin-top: 16px;
    font-size: 14px;
    line-height: calc(24.5 / 14);
  }
  .p-top-purchase__media {
    margin-top: 30px;
    gap: 40px;
  }
  .p-top-purchase__media > img {
    max-width: 100%;
  }
  .p-top-purchase__case {
    padding: 28px 21px;
  }
  .p-top-purchase__caseItem {
    grid-template-columns: 1fr;
  }
  .p-top-purchase__caseItemHeading {
    min-height: unset;
    padding: 15px 20px 12px;
  }
  .p-top-purchase__caseItemText {
    padding: 11px 23px 13px 21px;
    font-size: 14px;
    line-height: calc(21 / 14);
  }
  .p-top-purchase__buttons {
    grid-template-columns: 100%;
    margin-top: 60px;
    gap: 15px;
  }
  .p-top-road {
    padding-block: 40px 0;
  }
  .p-top-road__tel {
    margin-top: 20px;
  }
  .p-top-road__content {
    grid-template-columns: 1fr;
    margin-top: 20px;
    gap: 20px;
  }
  .p-top-road__serviceHeading {
    padding-block: 17px 14px;
    font-size: 18px;
    line-height: calc(27 / 18);
  }
  .p-top-road__serviceImage {
    padding: 40px 24px 50px;
  }
  .p-top-road__serviceImage img {
    max-width: 100%;
  }
  .p-top-road__jaf {
    padding: 32px 17px 35px;
    gap: 18px;
  }
  .p-top-road__jafTitle {
    font-size: 13px;
    line-height: calc(19 / 13);
  }
  .u-hidden-pc {
    display: block;
  }
  .u-hidden-sp {
    display: none;
  }
}

@media screen and (max-width: 600px){
  .c-button svg {
    right: 8px;
  }
  .c-button._middle svg {
    right: 12px;
  }
  .c-form__selectWrapper {
    grid-template-columns: 100px auto 60px auto;
    gap: 10px;
  }
  .c-form__selectWrapper._col5 {
    grid-template-columns: auto 100px auto 60px auto;
  }
  .p-footer__copyright {
    text-align: left;
  }
  .p-road-merit__images {
    grid-template-columns: 100%;
    margin-top: 30px;
    gap: 20px;
  }
  .p-road-service__list {
    grid-template-columns: 100%;
  }
  .p-sitemap__list {
    columns: 1;
  }
  .p-sitemap__item a {
    margin-top: 12px;
  }
  .p-top-parts__text {
    text-align: left;
  }
}

@media (any-hover: hover){
  :where(a[href^="tel:"]) {
    pointer-events: none;
  }
  .c-drawer__item a:hover .c-drawer__itemEn {
    color: var(--color-blue);
  }
  .c-drawer__formLink:hover .c-drawer__formButton {
    background: white;
    color: var(--color-blue-dark);
  }
  .c-form__submit:hover {
    border-color: var(--color-blue-light);
    background-color: var(--color-blue-light);
  }
  .c-form__submit._white:hover {
    border-color: var(--color-blue);
    background-color: var(--color-blue);
    color: white;
  }
  .p-header__item a:hover {
    color: var(--color-blue);
    opacity: 1;
  }
  .p-header__item a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }
  .p-header__formLink:hover .p-header__formButton {
    background: white;
    color: var(--color-blue-dark);
  }
  .p-sitemap__item a:hover {
    color: var(--color-blue);
    text-decoration: underline;
  }
}

@media print{
  .p-header {
    position: relative;
  }
  .p-main {
    margin-top: 0;
  }
  body {
    margin: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    zoom: 0.5;
  }
  .js-fade-in {
    opacity: 1 !important;
  }
}