/* Variables
-------------------------------------------------- */
:root {
  /* Colors */
  --color-primary: #3daadf; /* メインカラー */
  --color-primary-hover: #3daadf; /* メインカラーのホバー */
  --color-secondary: #c3e9ff; /* サブカラー */
  --color-secondary-hover: #c3e9ff; /* サブカラーのホバー */
  --color-tertiary: #1a4394; /* ティーラー */
  --color-tertiary-hover: #1a4394; /* ティーラーのホバー */
  --color-accent: #284b7d; /* アクセントカラー */
  --color-accent-hover: #284b7d; /* アクセントカラーのホバー */
  --color-border: #e4f0f5; /* ボーダーカラー */
  --color-line: #ecf1f4; /* ラインカラー */
  --color-title: #073963; /* タイトルカラー */
  --color-text: #073963; /* テキストカラー */
  --color-text-hover: #073963; /* テキストカラーのホバー */
  --color-text-light: #666666; /* テキストカラーのライト */
  --color-text-placeholder: #a5bcd0; /* プレースホルダーのカラー */
  --color-white: #fff; /* [共通]白 */
  --color-black: #000; /* [共通]黒 */
  --color-gradient: linear-gradient(180deg, #fff 69.11%, #f5fcff 100%); /* グラデーション */
  --color-gradient-start: #3daadf; /* グラデーションの開始色 */
  --color-gradient-end: #c3e9ff; /* グラデーションの終了色 */
  --color-search-bg: #f5fcff; /* 検索エリアの背景色 */
  --color-search-bg-hover: #f5fcff; /* 検索エリアの背景色のホバー */
  --color-search-border: #a5bcd0; /* 検索エリアのボーダーカラー */
  --color-button-hover: #eef2f7; /* [共通]ボタンのホバー色：前に戻るなど */
  --color-body: #ffffff; /* ボディの背景色：サイト全体の背景色 */
  --color-question: #3daadf; /* 質問アイコンのカラー：Q */
  --color-question-bg: #fff; /* 質問アイコンの背景色：Q */
  --color-question-border: #3daadf; /* 質問アイコンのボーダーカラー：Q */
  --color-answer: #3daadf; /* 回答アイコンのカラー：A */
  --color-answer-bg: #ffffff; /* 回答アイコンの背景色：A */
  --color-answer-border: #3daadf; /* 回答アイコンのボーダーカラー：A */
  --color-answer-important: #c62828; /* 回答アイコンの重要なテキストカラー */
  --color-disable-bg: #f3f3f3; /* 無効の背景色 */
  --color-disable-text: #cccccc; /* 無効のテキストカラー */
  --color-breadcrumb-text: #073963; /* パンくずリストのテキストカラー */
  --color-breadcrumb-link: #3daadf; /* パンくずリストのリンクカラー */
  --color-breadcrumb-link-hover: #359fd4; /* パンくずリストのリンクのホバー色 */
  --color-panel-bg: #ffffff; /* パネルの背景色：カード、リスト、回答エリア */
  --color-panel-border: #ecf1f4; /* パネルのボーダーカラー */
  --color-panel-text: #073963; /* パネルのテキストカラー */
  --color-panel-text-hover: #073963; /* パネルのテキストのホバー色 */
  --color-panel-text-light: #666666; /* パネルのテキストのライト色：サブテキストなど */
  --color-link: #3daadf; /* リンクのカラー */
  --color-link-hover: #359fd4; /* リンクのホバー色 */
  --color-list-hover: #ffffff; /* リストのホバー色：Qのリスト */
  --color-category-card-hover: #f5fcff; /* カテゴリカードのホバー色 */
  --color-header-bg: #f5fcff; /* ヘッダーの背景色 */
  --color-footer-bg: #ffffff; /* フッターの背景色 */
  --color-footer-line: #e4f0f5; /* フッターのボーダーカラー */

  /* Typography */
  --font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo,
    'ＭＳ Ｐゴシック', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 日本語フォントFamily */
  --font-family-en: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 英語フォントFamily */
  --font-size-xxs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px; /* 13px = (13/16)rem */
  --font-size-base: 0.875rem; /* 14px = (14/16)rem */
  --font-size-md: 1rem; /* 16px = (16/16)rem */
  --font-size-lg: 1.125rem; /* 18px = (18/16)rem */
  --font-size-xl: 1.25rem; /* 20px = (20/16)rem */
  --font-size-xxl: 1.375rem; /* 22px = (22/16)rem */
  --font-size-xxxl: 29px;
  --font-size-xxxxl: 4.25rem; /* 42px = (42/16)rem */
  --font-weight-normal: 400; /* フォントの重さ：通常 */
  --font-weight-medium: 500; /* フォントの重さ：中 */
  --font-weight-semibold: 600; /* フォントの重さ：中太 */
  --font-weight-bold: 700; /* フォントの重さ：太 */

  /* Spacing */
  --space-xxs: 2px; /* 最小スペース - アイコンやボーダーの微細な間隔 */
  --space-xs: 4px; /* 極小スペース - 要素間の最小間隔 */
  --space-sm: 8px; /* 小スペース - コンポーネント内の標準間隔 */
  --space-md: 12px; /* 中スペース - セクション間の基本間隔 */
  --space-base: 16px; /* 基本スペース - 一般的なコンテンツの間隔 */
  --space-lg: 20px; /* 大スペース - セクション間の広めの間隔 */
  --space-xl: 24px; /* より大きいスペース - 主要セクション間の間隔 */
  --space-xxl: 32px; /* 特大スペース - レイアウトの大きな区切り */
  --space-xxxl: 48px; /* 最大スペース - ページセクションの区切り */
  --space-zero: 0; /* 0px */

  /* Layout */
  --header-height-desktop: 87px; /* ヘッダーの高さ：デスクトップ */
  --header-height-mobile: 95px; /* ヘッダーの高さ：モバイル */
  --max-width-content: 832px; /* コンテンツの最大幅 */
  --max-width-search: 832px; /* 検索エリアの最大幅 */
  --content-width: 832px; /* コンテンツの幅 */
  --sidebar-width: 260px; /* サイドバーの幅 */
  --border-radius-sm: 4px; /* 小さいボーダーの半径 */
  --border-radius-md: 8px; /* 中くらいのボーダーの半径 */
  --border-radius-lg: 10px; /* 大きいボーダーの半径 */
  --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); /* 小さいボックスシャドウ */
  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* 中くらいのボックスシャドウ */
  --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 大きいボックスシャドウ */
  --box-shadow-custom: 0px 2px 2px 0px rgba(40, 75, 125, 0.06); /* カスタムボックスシャドウ */

  /* Transitions */
  --transition-base: 0.2s ease-in-out; /* 基本のトランジション */
  --transition-fast: 0.1s ease-in-out; /* 速いトランジション */

  /* SVGフィルター (https://angel-rs.github.io/css-color-filter-generator/)で生成したフィルター 
  ：SVGイメージの色を変える時に使うコード
  -------------------------------------------------- */
  --svg-filter-icon: brightness(0) saturate(100%) invert(31%) sepia(36%) saturate(6845%)
    hue-rotate(188deg) brightness(94%) contrast(101%);

  /* カテゴリフィルタにアイコンを設置する場合に使うイメージルート */
  --icon-category-1: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c1.svg');
  --icon-category-2: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c2.svg');
  --icon-category-3: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c3.svg');
  --icon-category-4: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c4.svg');
  --icon-category-5: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c5.svg');
  --icon-category-6: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c6.svg');
  --icon-category-7: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c7.svg');
  --icon-category-8: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c8.svg');
  --icon-category-9: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c9.svg');
  --icon-category-10: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c10.svg');
  --icon-category-11: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c11.svg');
  --icon-category-12: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c12.svg');
  --icon-category-13: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c13.svg');
  --icon-category-14: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c14.svg');
  --icon-category-15: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/c15.svg');

  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #a5bcd0 #f1f1f1;
}

/* Webkit browser(Chrome, Safari, Edge) scrollbar */
::-webkit-scrollbar {
  width: 8px; /* vertical scrollbar width */
  height: 8px; /* horizontal scrollbar height */
}
::-webkit-scrollbar-track {
  background: #f1f1f1; /* track background color */
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #a5bcd0; /* handle color */
  border-radius: 4px;
}
/* scrollbar corner */
::-webkit-scrollbar-corner {
  background: #f1f1f1;
}
/* scrollbar button */
::-webkit-scrollbar-button {
  display: none;
}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    /* Safari 전용 스타일 */
    ::-webkit-scrollbar-thumb {
      background-color: #a5bcd0;
    }
  }
}

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

html,
body {
  height: 100vh;
  margin: 0;
  font-family: var(--font-family);
  background: var(--color-body);
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* テンプレートのFAQレイアウト */
.faq-layout {
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
}

/* テンプレートのFAQレイアウトのヘッダー */
.faq-layout .faq-layout-header {
  background-color: var(--color-white);
  display: flex;
  height: 100%;
  padding: 0;
}

/* テンプレートのFAQレイアウトのヘッダーのスペース */
.faq-layout .faq-layout-header .faq-header-spacer {
  flex: auto;
}

/* テンプレートのFAQレイアウトのヘッダーのキャプション　→　基本非表示にします。 */
.faq-layout .faq-layout-header .faq-header-caption {
  align-self: flex-end;
  font-weight: var(--font-weight-semibold);
  margin-bottom: 2px;
  display: none; /* よくあるご質問（Q&A）のタイトル非表示の場合 */
}

/* テンプレートのFAQレイアウトのコンテナ */
.faq-layout .faq-layout-container {
  margin: 0 auto;
}

.faq-index-layout .faq-layout-container {
  margin: 0 auto 32px;
}

/* テンプレートのFAQレイアウトのコンテナのフォント、背景など */
.faq-layout .faq {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  background-color: var(--color-body);
}

/* モバイルファーストデザインで、基本的にモバイルデザインから行います。 (モバイルファーストのCSS順)
================================================================================
================================================================================
================================================================================ */

/* ヘッダー
-------------------------------------------------- */
.template-2 header {
  background-color: var(--color-white);
  border-bottom: none;
  box-shadow: none;
  height: var(--header-height-mobile);
  padding: 0;
  width: 100%;
  opacity: 1;
  display: none; /* OLCさんのテンプレートでは非表示にしています。 */
}
.template-2 header .faq-layout-header {
  justify-content: center;
  margin: 0 auto;
  max-width: var(--max-width-content);
  padding: 0;
}

/* ロゴ
-------------------------------------------------- */
.template-2 header .faq-layout-header .faq-logo {
  height: auto;
  margin-bottom: auto;
  margin-top: auto;
  min-width: auto;
}
/* ロゴが画像の場合 */
.template-2 header .faq-layout-header .faq-logo img {
  width: auto;
}
/* ロゴをCSSで入れる場合 */
.template-2 header .faq-layout-header .faq-logo a {
  text-decoration: none;
  color: var(--color-black);
  width: 114px;
  height: 21px;
  background: url('') no-repeat;
  background-size: 100%;
  text-indent: -9999px;
  color: transparent;
  display: block;
}
/* ロゴをCSSで入れる場合のフォーカス時の色 */
.template-2 header .faq-layout-header .faq-logo a:focus {
  color: var(--color-white);
}

/* トップページのタイトルエリア
-------------------------------------------------- */
.template-2 .faq-header {
  align-items: center;
  background: var(--color-white);
  display: flex;
  height: auto;
  justify-content: center;
  max-width: var(--max-width-content);
  width: 100%;
  margin: 0 auto 16px;
}
.template-2 .faq-header h2 {
  font-family: var(--font-family);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  color: var(--color-white);
  margin: 24px 16px 0 16px;
  height: auto;
  line-height: normal;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

/* トップページのタイトルを非表示にする */
.template-2 .faq-index-layout .faq-header {
  display: block;
}

.template-2 .faq-search-layout .faq-header {
  align-items: start;
  background: var(--color-white);
  display: flex;
  height: auto;
  justify-content: flex-start;
  max-width: var(--max-width-content);
  width: 100%;
  margin: 0 auto 16px;
}

/* トップページのタイトルのカスタム
-------------------------------------------------- */
/* トップページのタイトルを非表示にする */
.template-2 .faq-index-layout .faq-main-content .faq-header h2 {
  font-size: 0;
}
/* トップページのタイトルを変更 */
.template-2 .faq-index-layout .faq-main-content .faq-header h2::before {
  content: 'ヘルプ';
  font-size: var(--font-size-xxl);
  color: var(--color-title);
  display: block;
}

.template-2 .faq-index-layout .faq-main-content .faq-header h2::after {
  content: 'どんなことでお困りですか？';
  font-size: 16px;
  color: var(--color-title);
  display: block;
  background: none;
  height: auto;
  margin: 24px auto 0;
  width: auto;
  font-weight: var(--font-weight-normal);
}
/* ヘッダーのボーダー : デフォルトでは非表示 */
.template-2 .faq-header h2::after {
  background: var(--color-white);
  content: '';
  display: block;
  height: 3px;
  margin: 15px auto 0;
  width: auto;
  display: none;
}

/* 回答ページのデフォルトでタイトルは非表示
-------------------------------------------------- */
.template-2 .faq-answer-layout .faq-header {
  display: flex;
  justify-content: flex-start;
  margin-top: 0;
  margin-bottom: 0;
}

.template-2 .faq-answer-layout .faq-header h2 {
  display: none;
}

.template-2 .faq-answer-layout .faq-header::after {
  content: 'ヘルプ';
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-title);
  width: 100%;
  margin: 24px 16px 0 16px;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 24px;
}

/* パンくずリスト
-------------------------------------------------- */
/* 回答ページのパンくずリストエリア　*/
.template-2 .faq-answer-layout .faq-search-navigation {
  margin: 16px 0 0 0;
  order: -1;
}
.template-2 .faq-answer-layout .faq-search-navigation > div.faq-breadcrumb {
  padding: 0 16px;
  margin: 0 auto;
}

/* パンくずリストの基本スタイル */
.template-2 .faq-breadcrumb {
  max-width: var(--max-width-content);
  color: var(--color-breadcrumb-text);
  margin: 0 auto;
  padding: 0 16px;
}
.template-2 .faq-breadcrumb nav {
  display: flex;
  line-height: 20px;
  letter-spacing: 0.02px;
}
.template-2 .faq-search-layout .faq-breadcrumb nav {
  position: absolute;
  top: 86px;
  padding-top: 24px;
  max-width: 768px;
}
.template-2 .faq-search-layout .faq-breadcrumb nav .MuiBreadcrumbs-ol {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* -webkit-box-orient: vertical; */
  /* overflow: hidden; */
}
.template-2 .faq-breadcrumb nav li {
  display: inline-flex;
  min-width: 0;
}
.template-2 .faq-search-layout .faq-breadcrumb nav li {
  display: inline-flex;
  min-width: 0;
}
.template-2 .faq-breadcrumb a,
.template-2 .faq-breadcrumb p {
  font-family: var(--font-family);
  color: var(--color-breadcrumb-link);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  line-height: 20px;
}
.template-2 .faq-breadcrumb p {
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--font-weight-normal);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-2 .faq-breadcrumb a:hover {
  color: var(--color-breadcrumb-link-hover);
}

.template-2 .faq-breadcrumb li:nth-child(2n) {
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: var(--color-breadcrumb-text);
  padding: 0;
}

/* 検索エリア: パンくずリストと検索フォームを横並びにする
(カテゴリ検索を使わない場合は、max-height: auto;にする) */
.template-2 .faq-navigation {
  background-color: var(--color-white);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  margin: 0 0 20px 0;
  border: none;
}

/* パンくずリストのorderを変更する */
.template-2 .faq-navigation > div.faq-breadcrumb {
  order: 1;
  position: absolute;
  top: 86px;
  z-index: 1;
  margin-top: 24px;
  padding: 0 16px;
}

/* 検索 コンテナー
-------------------------------------------------- */
.faq-search-container {
  flex-grow: 1;
  min-width: 200px;
  width: 100%;
  max-width: var(--max-width-search);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  margin: 0 auto;
  position: relative;
  margin-bottom: 24px;
}

.faq-search-container::before {
  content: 'キーワードから探す';
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-title);
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  padding: 0 0 24px 0;
}

/* 検索バーのコンテナー */
.faq-search-container .faq-search-container__paper {
  left: 0;
  position: relative;
  right: 0;
  top: 10px;
  margin-bottom: 2px;
  z-index: 1;
  border: none;
  box-shadow: var(--box-shadow-lg);
}
.faq-search-container .faq-search-container__paper .faq-search-container__paper__progress {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background-color: #fff;
}

.MuiLinearProgress-root .MuiLinearProgress-bar {
  background-color: var(--color-primary) !important;
  height: 6px !important;
  box-shadow: none !important;
}

.faq-search-container .faq-search-container__paper.faq-search-result .faq-search-result__message {
  margin: 6px 12px;
}
.faq-search-container .faq-search-container__paper.faq-search-result .faq-search-item--selected {
  background-color: rgba(0, 0, 0, 0.04);
}
/* 検索ボタンのアイコン（カテゴリ） */
.faq-search-container .faq-search__icon-button span.MuiIconButton-label svg {
  display: none;
}
.faq-search-container .faq-search__icon-button span.MuiIconButton-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-image: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/search_ico.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 検索バーのScrollリストのデザイン
-------------------------------------------------- */
.template-2 .faq-search-result {
  overflow-y: scroll;
  border-radius: 3px;
}
/* 検索バーのScrollリストの余白 */
.template-2 .faq-search-result > div {
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  padding: 6px 12px;
  white-space: normal;
}

.template-2 .faq-navigation .faq-search,
.template-2 .faq-navigation .faq-search-result {
  margin-left: 16px;
  margin-right: 16px;
  background-color: var(--color-white);
  border-radius: 3px;
  z-index: 2;
}

.template-2 .faq-navigation .faq-search {
  height: 60px !important;
  min-height: 60px !important;
}

/* FAQ パネル (共通)
-------------------------------------------------- */
.template-2 .faq-panel {
  background: var(--color-panel-bg);
  border-bottom: none;
  box-shadow: none;
  margin-bottom: 0;
  padding: 40px 20px;
  position: relative;
  max-width: var(--max-width-content);
  margin: 0 auto;
}
.template-2 .faq-panel:before {
  background: transparent;
}
.template-2 .faq-panel .faq-panel-header {
  background: none;
  padding: 0;
}

.template-2 .faq-content .faq-main-content .faq-panel {
  padding: 24px 16px 0 16px;
  max-width: var(--max-width-content);
  width: auto;
}

.template-2 .faq-answer-layout .faq-content .faq-main-content .faq-panel {
  width: 100%;
}

.template-2 .faq-content .faq-main-content .faq-answer {
  padding: 24px 16px 0 16px;
}

.faq-filtered-by-category .MuiBox-root {
  margin: 0 !important;
}

/* カテゴリ検索結果一覧のパネル
-------------------------------------------------- */
.template-2 .faq-category-layout .faq-category-page .faq-main-content .faq-panel {
  padding-top: 80px;
}

/* タグ検索結果一覧のパネル
-------------------------------------------------- */
.template-2 .faq-search-layout .faq-filtered-by-query .faq-main-content .faq-panel {
  padding-top: 32px;
}

.template-2 .faq-search-layout .faq-category-page .faq-main-content .faq-header h2 {
  font-size: 0;
  width: 100%;
}

/* タグ検索結果のヘッダーの文字を変更する場合 */
.template-2 .faq-search-layout .faq-category-page .faq-main-content .faq-header h2::before {
  font-size: var(--font-size-xxl);
  content: 'ヘルプ';
  color: var(--color-title);
  display: block;
  padding-top: 64px;
}
/* パネルのタイトルの表示・非表示 */
.template-2 .faq-search-layout .faq-category-page .faq-main-content .faq-header h2:after {
  display: none;
}

.template-2 .faq-content .faq-main-content .faq-panel .faq-number-of-items {
  display: flex;
  margin-top: 0;
  color: var(--color-title);
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 8px;
}

/* パネルのタイトル
-------------------------------------------------- */
.template-2 .faq-panel .faq-panel-header > div > h3 {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
  margin-top: var(--space-sm);
}
/* パネルのタイトルサイズ（ページネーション付き） */
.template-2 .faq-panel .faq-panel-header > div > h3.faq-panel-header__title {
  color: var(--color-title);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 8px;
  margin-top: 0 !important;
}
/* パネルのタイトル */
.template-2 .faq-panel .faq-panel-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-zero);
  margin-top: var(--space-zero);
  color: var(--color-title);
  text-align: left;
  padding-bottom: 24px;
}

.faq-panel-search h3.faq-panel-title {
  display: none;
}

.template-2 .faq-search-layout .faq-panel .faq-panel-header > div > h3.faq-panel-header__title {
  display: none;
}

.template-2
  .faq-search-layout
  .faq-panel.faq-filter-category
  .faq-panel-header
  > div
  > h3.faq-panel-header__title {
  display: block;
}

/* カテゴリ検索結果一覧のタイトル
-------------------------------------------------- */
.template-2 .faq-panel .faq-panel-header > div > h3.faq-pagination {
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  position: absolute;
  right: 20px;
  top: 0;
  border: none;
}
.template-2 .faq-panel .faq-panel-title.faq-pagination {
  color: var(--color-black);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  position: absolute;
  right: 15px;
  top: 5px;
}

/* ページネーションのカスタム
-------------------------------------------------- */
.template-2 .faq-panel .faq-pagination {
  padding-bottom: 24px;
  padding-top: 24px;
  border-bottom: 1px solid var(--color-line);
}
.template-2 .faq-panel .faq-pagination button {
  min-width: 24px;
  height: 30px;
  border-radius: 3px;
}

.template-2 .faq-panel .faq-pagination button:hover {
  background-color: rgba(61, 170, 223, 0.1);
}

.template-2 .faq-panel .faq-pagination button span.MuiTouchRipple-root {
  color: var(--color-primary) !important;
  opacity: 0.4 !important;
}

/* ページネーションのボタンのアイコン */
.template-2 .faq-panel .faq-pagination button svg {
  fill: var(--color-primary);
  width: 16px;
  height: 16px;
}
/* ページネーションのボタン */
.template-2 .faq-panel .faq-pagination-pages button {
  font-family: var(--font-family-en);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  min-width: 24px;
  height: 30px;
  line-height: var(--font-size-base);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 3px;
  background-color: var(--color-white);
}

.template-2 .faq-panel .faq-pagination-pages button:hover {
  background-color: rgba(61, 170, 223, 0.1);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

/* パネルのページネーションのボタンの選択時の背景色 */
.template-2 .faq-panel .faq-pagination-pages button.Mui-selected {
  background-color: #073963;
  border: 1px solid #073963;
  color: var(--color-white);
}

.template-2 .faq-panel .faq-pagination button.Mui-disabled {
  opacity: 1;
}
.template-2 .faq-panel .faq-pagination button.Mui-disabled svg {
  fill: #a5bcd0;
}

/* パネルのページネーションの省略記号の高さ */
.template-2 .faq-panel .faq-pagination-start-ellipsis div,
.template-2 .faq-panel .faq-pagination-end-ellipsis div {
  line-height: 24px;
  min-width: 24px;
  height: 30px;
  color: var(--color-primary);
}

/* パネルのアイコン背景カラーとサイズ
-------------------------------------------------- */
.template-2 .faq-panel .faq-panel-content > .faq-panel-content-button > span > div {
  background-color: var(--color-white);
  color: var(--color-secondary);
  height: 25px;
  width: 25px;
  border-radius: 4px;
  border: 1px solid var(--color-primary);
}

/* パネルのテキスト
-------------------------------------------------- */
.template-2 .faq-panel .faq-panel-content > .faq-panel-content-button > span > h5 {
  display: flex;
  font-family: var(--font-family);
  color: var(--color-panel-text);
  font-size: var(--font-size-md);
  line-height: 1.6;
  align-items: center;
}

/* パネルのカードリストの全体幅 (カテゴリカード)
-------------------------------------------------- */
.template-2 .faq-panel .faq-panel-card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: var(--max-width-content);
  gap: 10px;
  margin: 0 auto;
  padding: 0;
}

/* パネルのカードリストのカードスタイル　（clex: 0 0 calc((100% - 90px) / 4);）
-------------------------------------------------- */
.template-2 .faq-panel .faq-panel-card-list .faq-panel-card {
  flex: 0 0 calc((100% - 60px) / 3);
  min-width: 160px;
  border: 1px solid var(--color-panel-border);
  box-shadow: none;
  margin: 0;
  border-radius: 6px;
}

/* パネルのカードリストのカードの高さ
-------------------------------------------------- */
.template-2 .faq-panel .faq-panel-card-list .faq-panel-card > div {
  height: 100%;
}
.template-2 .faq-panel .faq-panel-card-list .faq-panel-card > div.MuiCardActionArea-root {
  display: flex;
  justify-content: flex-start;
}

/* パネルのカードリストのカードの表示スタイル( width: autoにすると、中央に配置されますが、リンクできるエリアが狭くなります。)
-------------------------------------------------- */
.template-2 .faq-panel .faq-panel-card-list .faq-panel-card > div a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  height: 100%;
  width: 100%;
  padding: 10px 16px;
  text-align: center;
}
/* パネルのカードリストのカードのホバー時の背景色 */
.template-2 .faq-panel .faq-panel-card-list .faq-panel-card > div a:hover {
  background-color: var(--color-category-card-hover) !important;
}
/* パネルのカードリストのカードのホバー時のRippleアニメーションを非表示 */
.template-2
  .faq-panel
  .faq-panel-card-list
  .faq-panel-card
  .MuiCardActionArea-root:hover
  .MuiCardActionArea-focusHighlight {
  display: block;
}
/* パネルのカードリストのカードのRippleアニメーションを非表示 */
.template-2 .faq-panel .faq-panel-card-list .faq-panel-card > div span.MuiTouchRipple-root {
  display: block;
}
/* パネルのカードリストのカードのコンテンツ余白 */
.template-2 .faq-panel .faq-panel-card-list .faq-panel-card > div a .faq-panel-card-content {
  align-items: center;
  display: flex;
  flex: 1;
  order: 2;
  padding: 8px 4px;
  width: auto;
  margin: 0 auto;
}
/* パネルのカードリストのカードのタイトルサイズ */
.template-2 .faq-panel .faq-panel-card-list .faq-panel-card .faq-panel-card-content h5 {
  align-items: center;
  display: flex;
  overflow: hidden;
  width: auto !important;
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  line-height: 20px;
}
/* パネルのカードリストのカードの画像サイズ */
.template-2 .faq-panel .faq-panel-card-list .faq-panel-card .faq-panel-card-media {
  height: 24px !important;
  margin: 0 auto;
  order: 1;
  width: 24px !important;
}

/* 検索UIのカスタム
-------------------------------------------------- */
.template-2 .faq-search {
  background-color: var(--color-white);
  border: 1px solid var(--color-search-border);
  box-shadow: none;
  align-items: center;
  display: flex;
  padding: 0;
  height: 60px;
}

/* 検索UIのinput */
.faq-search .faq-search__input {
  flex: 1 1;
  margin-left: 16px;
}
.faq-search .faq-search__input input {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
}
.faq-search .faq-search__input input::placeholder {
  color: var(--color-text-placeholder);
  font-size: 15px;
  opacity: 1;
}
.template-2 .faq-search .faq-search-button {
  padding: 18px 18px;
  background-color: var(--color-primary);
  border-radius: 0;
}
.template-2 .faq-search .faq-search-button:hover {
  background-color: var(--color-primary);
}
/* 検索バーのボタンのRippleアニメーションを非表示 */
.template-2 .faq-search .faq-search-button span.MuiTouchRipple-root {
  display: none;
}
.template-2 .faq-search .faq-search-icon path:nth-child(2) {
  fill: url(#faq-search-gradient);
}
.template-2 .faq-search #faq-search-gradient stop:first-child {
  stop-color: var(--color-primary);
}
.template-2 .faq-search #faq-search-gradient stop:nth-child(2) {
  stop-color: var(--color-primary);
}

/* 検索バーのScrollリストのホバー時の背景色
-------------------------------------------------- */
.faq-filter-search .MuiAutocomplete-listbox {
  background-color: var(--color-white);
  margin-top: 20px;
  box-shadow: var(--box-shadow-lg);
  position: absolute;
  width: 100%;
  z-index: 1000;
  left: 2px;
  right: 0;
  border: none;
  border-radius: 4px;
}

.faq-filter-search .MuiAutocomplete-option[data-focus='true'] {
  background: rgba(0, 0, 0, 0.04);
}

.template-2 .faq-search-result > div[role='option']:hover {
  background: rgba(0, 0, 0, 0.04);
}
.template-2 .faq-search-result > div,
.template-2 .faq-search-result > div[role='option'] {
  background-color: var(--color-white);
}
.template-2 .faq-search-result > div > div {
  background-color: var(--color-primary);
}
.template-2 .faq-filter-category-sub-category {
  border-color: var(--color-primary);
  color: var(--color-primary);
  margin-bottom: 10px;
  margin-right: 10px;
}
/* 検索エリアの背景 */
.template-2 .faq-filter-search {
  background: var(--color-white);
  padding: 8px 0 0 0 !important;
  max-width: 100%;
  margin: 0 16px;
}
/* 検索エリアのボタン */
.template-2 .faq-filter-search .faq-filter-search-button {
  background-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  border: 1px solid var(--color-primary);
  border-left: none;
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--font-size-md);
  padding: 0;
  height: 100%;
  border-radius: 3px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  min-width: 60px;
}
/* 検索エリアのボタンのRippleアニメーション変更 */
.template-2 .faq-filter-search .faq-filter-search-button .MuiTouchRipple-root {
  border-radius: 4px !important;
  animation-duration: 0.3s !important;
  opacity: 0.2 !important;
}
/* 検索エリアのボタンのテキストを非表示 */
.template-2 .faq-filter-search .faq-filter-search-button span {
  text-indent: -9999px;
  color: var(--color-primary);
  position: absolute;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  border: 0;
}
/* 検索エリアのボタンの幅調整 */
.template-2 .faq-filter-search .faq-filter-search-button span span {
  margin: 0;
  padding: 0;
}
/* 検索エリアのデフォルトボタンのアイコンを非表示 */
.template-2 .faq-filter-search .faq-filter-search-button span span svg {
  display: none;
}
/* 検索エリアのボタンのカスタムアイコンを表示 */
.template-2 .faq-filter-search .faq-filter-search-button span span::after {
  margin-right: 0;
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-image: url('https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/search_ico.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.template-2 .faq-filter-search .more.noLoad {
  height: auto;
}

/* ボタン系
-------------------------------------------------- */
.template-2 .faq-button {
  background-color: transparent !important;
  border: 1px solid var(--color-primary);
  box-shadow: none !important;
  color: var(--color-primary);
  display: block;
  margin-top: 0.6rem;
  padding: 0.4rem;
  text-align: center;
}
.template-2 .faq-button .faq-button-icon {
  display: none;
}
.template-2 .faq-button.faq-button-more > span:first-child:after {
  content: '+';
  margin-left: 0.5rem;
  margin-top: -0.2rem;
}
.template-2 .faq-button.faq-button-selected {
  background-color: var(--color-white) !important;
}
.template-2 .faq-button.faq-button-unselected span span {
  color: var(--color-primary);
}

/* 回答ページの質Feedbackエリア 
-------------------------------------------------- */
.template-2 .faq-questionnaire {
  border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
  box-shadow: none;
  padding: 0 0 24px 0;
  margin: 24px 0 0 0;
  border-radius: 0;
}
.template-2 .faq-questionnaire p,
.template-2 .faq-questionnaire > div > div {
  margin-bottom: 0;
  text-align: left;
}
.template-2 .faq-questionnaire .faq-button {
  background-color: var(--color-white) !important;
  margin-top: 0;
}
.template-2 .faq-questionnaire .faq-button:hover {
  background-color: rgba(61, 170, 223, 0.1) !important;
  color: var(--color-primary) !important;
}
/* 回答ページの質Feedbackエリアのタイトル */
.template-2 .faq-questionnaire .faq-questionnaire__title {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--color-text);
}

.template-2 .faq-questionnaire .faq-questionnaire__title h3 {
  font-size: var(--font-size-lg);
  text-align: left;
  margin: 24px 0;
}

.template-2 .faq-questionnaire .faq-questionnaire__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  padding: 24px 0 0 0;
}
.template-2 .faq-questionnaire > div.MuiCardContent-root {
  max-width: 1280px !important;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 回答ページの質Feedbackエリアのボタン */
.template-2 .faq-questionnaire .faq-questionnaire__actions .faq-questionnaire__actions__button {
  flex: 1 1;
  font-size: 15px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  width: 100%;
  border-radius: 3px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 7px 16px;
}

/* 回答ページの質問エリア 
-------------------------------------------------- */
.template-2 .faq-answer .faq-panel-header {
  display: flex;
  align-items: flex-start;
  background-color: var(--color-question-bg);
  padding: 0;
  border-bottom: none;
  border-radius: 0;
  margin-top: 0;
}
/* 回答ページの回答レイアウト */
.template-2 .faq-answer .faq-answer-content-wrapper {
  padding: 8px 0 0 0 !important;
  background-color: var(--color-answer-bg);
  margin-top: var(--space-base);
  border-radius: 0;
  border-bottom: 1px solid var(--color-line);
}
.template-2 .faq-answer .faq-answer-content-wrapper .MuiCardContent-root {
  padding: 0;
}
.template-2 .faq-answer .faq-answer-content {
  border-radius: 4px;
}
/* 回答ページのアイコンの余白 */
.template-2 .faq-answer .faq-panel-header > .MuiCardHeader-avatar {
  margin-right: 8px;
}
/* 回答ページのアイコン */
.template-2 .faq-answer .faq-panel-header .faq-answer-q {
  margin-top: 0;
  background-color: transparent;
  height: 25px;
  width: 25px;
  content: url(https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/letter-q.svg);
}
/* 回答ページのタイトル */
.template-2 .faq-answer .faq-panel-header > div > h3.faq-answer-title {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  margin: 0;
  line-height: 1.5;
}
.template-2 .faq-answer .faq-answer-content .faq-answer-a {
  margin-top: 0;
  margin-right: 8px;
  background-color: transparent;
  height: 25px;
  width: 25px;
  content: url(https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/letter-a.svg);
}
/* 回答ページの回答エリアの回答のテキストのフォントサイズ */
.template-2
  .faq-answer
  .faq-answer-content
  .faq-answer-content__answer-wrapper
  .faq-answer-content__answer {
  margin-bottom: 24px;
}

.template-2
  .faq-answer
  .faq-answer-content
  .faq-answer-content__answer-wrapper
  .faq-answer-content__answer
  a {
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.template-2
  .faq-answer
  .faq-answer-content
  .faq-answer-content__answer-wrapper
  .faq-answer-content__answer
  a:hover {
  text-decoration: underline;
}

.template-2
  .faq-answer
  .faq-answer-content
  .faq-answer-content__answer-wrapper
  .faq-answer-content__answer
  div
  > p {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  margin-bottom: 0;
}
.template-2
  .faq-answer
  .faq-answer-content
  .faq-answer-content__answer-wrapper
  .faq-answer-content__answer
  div
  > p
  em {
  font-size: var(--font-size-xs);
  color: var(--color-answer-important);
}
/* 回答ページの回答エリアの回答の選択ボタンエリア */
.template-2 .faq-answer .faq-answer-content-wrapper .faq-answer-actions-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 760px; /* サイズを変更したい場合はここを変更 */
  margin: 24px 0;
  padding: 0;
  gap: 10px;
}
/* 回答ページの回答エリアの回答の選択ボタンのデザイン */
.template-2
  .faq-answer
  .faq-answer-content-wrapper
  .faq-answer-actions-wrapper
  button.faq-answer-content__button {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-family: var(--font-family);
  margin: 0;
  padding: 7px 16px;
  border-radius: 3px;
  min-height: 44px;
}

.template-2
  .faq-answer
  .faq-answer-content-wrapper
  .faq-answer-actions-wrapper
  button.faq-answer-content__button:hover {
  background-color: rgba(61, 170, 223, 0.1) !important;
}

.template-2
  .faq-answer
  .faq-answer-content-wrapper
  .faq-answer-actions-wrapper
  button.faq-answer-content__button
  svg {
  margin-left: 4px;
}

/* 回答ページの回答エリアの回答の選択ボタンクリック後のコンテンツ
------------------------------------------------- */
.template-2 .faq-answer .faq-answer-content-wrapper > .faq-answer-content__answer-wrapper {
  margin: 32px auto;
  padding: 0 12px;
}
/* 回答ページの回答エリアの回答の選択ボタンクリック後のコンテンツの区切り線を非表示 */
.template-2 .faq-answer .faq-answer-content-wrapper > hr {
  display: none;
}

/* 前に戻るボタン
-------------------------------------------------- */
.template-2 .faq-answer .faq-go-to-search {
  display: flex;
  align-items: flex-end;
  margin-top: 16px;
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-primary);
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  padding: 6px 12px;
  width: 100%;
  display: none;
}
.template-2 .faq-answer .faq-go-to-search:hover {
  border: 1px solid var(--color-primary-hover);
  background-color: var(--color-list-hover);
}
.template-2 .faq-answer .faq-go-to-search span {
  text-align: right;
}
.template-2 .faq-answer .faq-answer-content a {
  word-break: break-all;
}
.template-2 .faq-answer .faq-answer-content a img {
  width: 100%;
  max-width: 1170px !important;
  margin: 16px auto;
}

.template-2 .faq-answer .faq-answer-video-touch,
.template-2 .faq-answer .faq-answer-youtube {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
.template-2 .faq-answer .faq-answer-video-touch iframe,
.template-2 .faq-answer .faq-answer-youtube iframe {
  border: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.template-2 .faq-answer .faq-answer-video-touch iframe.hidden,
.template-2 .faq-answer .faq-answer-youtube iframe.hidden {
  display: none;
}
.template-2 .faq-answer .faq-answer-table {
  overflow-x: scroll;
}
.template-2 .faq-answer .faq-answer-table table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.template-2 .faq-answer .faq-answer-table table tr {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 0.35em;
}
.template-2 .faq-answer .faq-answer-table table td,
.template-2 .faq-answer .faq-answer-table table th {
  border-right: 1px solid var(--color-border);
  padding: 1em 10px 1em 1em;
}
.template-2 .faq-answer .faq-answer-table table th {
  background-color: var(--color-white);
  font-size: var(--font-size-sm);
  white-space: normal;
}

.template-2 .faq-panel-category {
  min-width: 200px;
  padding-left: 0;
  padding-right: 0;
}
.template-2 .faq-panel-category .faq-panel-header {
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.template-2 .faq-panel-category .faq-category {
  border-top: 1px solid var(--color-panel-border);
  padding-bottom: 0.2rem;
  padding-top: 0.2rem;
}
.template-2 .faq-panel-category .faq-category button {
  background-color: transparent;
  box-shadow: none;
  padding-left: 20px;
  padding-right: 20px;
}
.template-2 .faq-panel-category .faq-category button.faq-has-subcategory:after {
  color: var(--color-panel-text-light);
  content: '+';
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  position: absolute;
  right: 20px;
  top: 0;
}
.template-2
  .faq-panel-category
  .faq-category
  button.faq-has-subcategory[aria-expanded='true']:after {
  content: '-';
}
.template-2 .faq-panel-category .faq-category button h4 {
  color: var(--color-panel-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.2rem;
  margin-top: 0.1rem;
}
.template-2 .faq-panel.faq-filter-category a.MuiButton-text {
  color: var(--color-primary);
  margin-top: 16px;
  border-radius: 8px;
  display: none;
}

/* カテゴリサブカテゴリエリア 
-------------------------------------------------- */
.faq-index-layout .faq-filter-category-sub-category-wrapper {
  padding-top: 24px;
}

.faq-filter-category-sub-category-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 24px;
  padding-top: 24px;
}

.faq-search-layout .faq-filter-category-sub-category-wrapper {
  padding-bottom: 0;
  padding-top: 16px;
  border-bottom: none;
}

.faq-search-layout .faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category {
  display: flex;
  width: 100%;
  background-color: var(--color-white);
  border-radius: 0;
  padding: 16px 0;
  transition: var(--transition-base);
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--color-line);
}

.faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category {
  display: flex;
  width: calc(50% - 8px);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: 16px 8px;
  transition: var(--transition-base);
  margin: 0 0 16px 0;
}
.faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category:hover {
  background-color: rgba(61, 170, 223, 0.1);
  box-shadow: none;
  transform: none;
}

.faq-search-layout
  .faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:hover {
  box-shadow: none;
  transform: none;
}

.faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category span {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category span span {
  order: -1;
  margin: 0;
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category
  span
  span
  svg.MuiSvgIcon-root {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}
.faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category > span {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--color-primary);
  margin-bottom: 0;
  margin-top: 0;
}

.faq-search-layout
  .faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category
  > span {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  font-family: var(--font-family);
  color: var(--color-primary);
  margin-bottom: 0;
  margin-top: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.template-2 .faq-panel-category .faq-category.faq-category-level {
  border-top: none;
  padding-bottom: 0;
  padding-top: 0;
}
.template-2 .faq-panel-category .faq-category.faq-category-level button h4 {
  margin-left: 10px;
}
.template-2 .faq-panel-category .faq-subcategory {
  background-color: var(--color-white);
  margin-top: 0;
  padding-bottom: 0.1rem;
  padding-left: 30px;
  padding-top: 0.1rem;
}
.template-2 .faq-panel-category .faq-subcategory:first-child {
  padding-top: 0.3rem;
}
.template-2 .faq-panel-category .faq-subcategory:last-child {
  padding-bottom: 0.3rem;
}
.template-2 .faq-panel-category .faq-subcategory span:first-child {
  color: var(--color-primary);
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
  text-decoration: underline;
}

/* Filter Search
-------------------------------------------------- */
@media screen and (min-width: 768px) {
  .faq-filter-search-result-widget__result-message-success {
    font-size: var(--font-size-lg) !important;
  }
}

.faq-filter-search-result-widget__result-message-success {
  font-size: var(--font-size-md);
  white-space: pre-wrap;
  color: var(--color-title);
}

.faq-answer-content-wrapper .faq-answer-content {
  display: flex;
}
.faq-answer-content-wrapper .faq-answer-content__a {
  height: 30px;
  width: 30px;
}
.faq-answer-content-wrapper .faq-answer-content__answer-wrapper {
  width: 100%;
}

/* 回答ページの回答選択ボタンの回答
-------------------------------------------------- */
.faq-answer-content-wrapper .faq-answer-content__answer {
  margin-left: 0;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
}
/* 回答ページの回答エリアの回答のテキストのパラグラフ */
.faq-answer-content-wrapper .faq-answer-content__answer p {
  margin: 0;
  font-size: var(--font-size-base);
}
.faq-answer-content-wrapper .faq-answer-content__answer .md {
  white-space: normal;
  margin-bottom: 24px;
}
.faq-answer-content-wrapper .faq-answer-content__answer .md ol,
.faq-answer-content-wrapper .faq-answer-content__answer .md ul {
  padding-left: 16px;
}
.faq-answer-content-wrapper .faq-answer-content__answer .md h1 {
  font-size: 21px;
}
.faq-answer-content-wrapper .faq-answer-content__answer .md h2 {
  font-size: 18px;
}
.faq-answer-content-wrapper .faq-answer-content__answer .md h3 {
  font-size: var(--font-size-md);
}
.faq-answer-content-wrapper .faq-answer-content__answer .md a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

.faq-answer-content-wrapper .faq-answer-content__answer .md a span {
  color: var(--color-link) !important;
}

.faq-answer-content-wrapper .faq-answer-content__answer .md a:hover {
  text-decoration: underline;
}
.faq-answer-content-wrapper .faq-answer-content__answer .md em {
  color: var(--color-primary);
  font-style: normal;
}
.faq-answer-content-wrapper .faq-answer-content__answer .md td,
.faq-answer-content-wrapper .faq-answer-content__answer .md th {
  text-align: left;
}
.faq-answer-content-wrapper .faq-answer-content__answer .md td.right,
.faq-answer-content-wrapper .faq-answer-content__answer .md th.right {
  text-align: right;
}
.faq-answer-content-wrapper .faq-answer-content__answer .md td.center,
.faq-answer-content-wrapper .faq-answer-content__answer .md th.center {
  text-align: center;
}
.faq-answer-content-wrapper .faq-answer-content__button {
  margin-bottom: 1px;
  text-transform: none;
  font-weight: var(--font-weight-semibold);
  font-size: 15px;
  font-family: var(--font-family);
  padding: 7px 16px;
  border-radius: 3px;
  margin: 0;
  min-height: 44px;
}

.faq-answer-content-wrapper .faq-answer-content__button:hover {
  background-color: rgba(61, 170, 223, 0.1) !important;
}

.faq-answer-content__carousel-slide {
  height: 50vh;
  overflow-y: auto;
}

.category-selector .category-selector__button {
  background: var(--color-white);
}
.category-selector .category-selector__popper {
  z-index: 1;
}
.category-selector .category-selector__popper .arrow {
  font-size: 7px;
  height: 3em;
  left: 7px;
  position: absolute;
  width: 3em;
}
.category-selector .category-selector__popper .arrow:before {
  border-style: solid;
  content: '';
  display: block;
  height: 0;
  left: -7px;
  margin: auto;
  position: absolute;
  top: 1;
  width: 0;
}
.category-selector .category-selector__popper[x-placement*='bottom'] {
  margin-top: 7px;
}
.category-selector .category-selector__popper[x-placement*='bottom'] .arrow {
  border-bottom: 1em solid var(--color-panel-border);
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  height: 0;
  margin-top: -0.9em;
  width: 0;
}
.category-selector .category-selector__popper[x-placement*='bottom'] .arrow:before {
  border-color: transparent transparent var(--color-white);
  border-width: 0 1em 1em;
}
.category-selector .category-selector__popper[x-placement*='top'] .arrow {
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1em solid var(--color-panel-border);
  bottom: 0;
  height: 0;
  margin-bottom: -0.9em;
  width: 0;
}
.category-selector .category-selector__popper[x-placement*='top'] .arrow:before {
  border-color: var(--color-white) transparent transparent;
  border-width: 1em 1em 0;
}
.category-selector .category-selector__popper[x-placement*='right'] .arrow {
  border-bottom: 1em solid transparent;
  border-right: 1em solid var(--color-panel-border);
  border-top: 1em solid transparent;
  height: 0;
  left: 0;
  margin-left: -0.9em;
  width: 0;
}
.category-selector .category-selector__popper[x-placement*='right'] .arrow:before {
  border-color: transparent var(--color-white) transparent transparent;
  border-width: 1em 1em 1em 0;
}
.category-selector .category-selector__popper[x-placement*='left'] .arrow {
  border-bottom: 1em solid transparent;
  border-left: 1em solid var(--color-panel-border);
  border-top: 1em solid transparent;
  height: 0;
  margin-right: -0.9em;
  right: 0;
  width: 0;
}
.category-selector .category-selector__popper[x-placement*='left'] .arrow:before {
  border-color: transparent transparent transparent var(--color-white);
  border-width: 1em 0 1em 1em;
}

.category-selector .category-selector__wrapper {
  position: relative;
}
.category-selector .category-selector__wrapper .category-selector__paper {
  background-color: var(--color-white);
  border: 1px solid;
  min-width: 264px;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  padding-top: 8px;
  text-align: center;
}
.category-selector .category-selector__wrapper .category-selector__paper .category-selector__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  padding-bottom: 8px;
  padding-top: 8px;
}
.faq-filter-search-keyword .faq-filter-search-keyword__title {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.faq-filter-search-keyword .faq-filter-search-keyword__wrapper {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  justify-content: flex-start;
  overflow: hidden;
}
.faq-filter-search-keyword .faq-filter-search-keyword__wrapper > * {
  margin: 4px;
}
.faq-filter-search-keyword .faq-filter-search-keyword__wrapper.less {
  height: 32px;
}
.faq-filter-search-keyword .faq-filter-search-keyword__wrapper.noLoad {
  height: 70px;
}

/* 検索 タグ
-------------------------------------------------- */
.faq-filter-search-keyword .faq-filter-search-keyword__wrapper .faq-filter-search-keyword__chip {
  font-family: var(--font-family);
  background: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border-radius: 24px;
  padding: 8px 8px;
  margin: 0 8px 8px 0;
  border: 1px solid var(--color-primary);
  gap: 6px;
}
.faq-filter-search-keyword
  .faq-filter-search-keyword__wrapper
  .faq-filter-search-keyword__chip.MuiChip-root {
  height: 28px;
}
/* 検索タグ: hover */
.faq-filter-search-keyword
  .faq-filter-search-keyword__wrapper
  .faq-filter-search-keyword__chip:hover {
  background-color: rgba(61, 170, 223, 0.1);
}

/* 検索 タグ: ＋アイコン */
.faq-filter-search-keyword
  .faq-filter-search-keyword__wrapper
  .faq-filter-search-keyword__chip
  svg {
  height: 18px;
  width: 18px;
  color: var(--color-primary);
  margin-left: 0;
}

/* 検索 タグ テキスト */
.faq-filter-search-keyword
  .faq-filter-search-keyword__wrapper
  .faq-filter-search-keyword__chip
  span {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  padding: 0 6px;
}
.faq-filter-search-keyword .faq-filter-search-keyword__button {
  border-radius: 0;
  border-top: 1px solid var(--color-white);
  color: var(--color-search-text);
  margin-left: 0;
  margin-top: 8px;
  padding-top: 10px;
  width: 100%;
}
.faq-filter-search {
  background: var(--color-search-bg);
}

/* filter search コンテナーサイズ
-------------------------------------------------- */
.faq-filter-search.faq-filter-search__container {
  padding: 0 !important;
  max-width: var(--max-width-search);
  background: var(--color-white) !important;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-line);
}

/* filter search input エリア 
-------------------------------------------------- */
.faq-filter-search .faq-filter-search__inner {
  align-items: center;
  display: flex;
  position: relative;
  margin: 0 0 12px 0;
}
.faq-filter-search .faq-filter-search__button {
  border-radius: 8px;
  margin-left: 8px;
}

/* 検索 input デザイン
-------------------------------------------------- */
.faq-filter-search .faq-filter-search-field {
  flex: 1 1 auto;
  background-color: var(--color-white);
  border-radius: 3px;
  border: 1px solid var(--color-search-border);
}
/* 検索 input サイズ */
.faq-filter-search .faq-filter-search-field > div > div {
  border: none;
  border-radius: 3px;
  font-size: 16px;
  font-family: var(--font-family);
  min-height: 60px;
  padding: 0 72px 0 8px;
  color: var(--color-text);
}
.faq-filter-search .faq-filter-search-field > div > div input {
  font-size: 16px;
}
.faq-filter-search .faq-filter-search-field > div > div input::placeholder {
  color: var(--color-text-placeholder);
  font-size: 15px;
  font-family: var(--font-family);
  opacity: 1;
}
/* 検索 input ボーダー: hover */
.faq-filter-search .faq-filter-search-field > div > div fieldset {
  border: none;
}
/* 検索 input チップ: デザイン */
.faq-filter-search .faq-filter-search-field > div > div > div {
  border-radius: 24px;
  color: var(--color-title);
  border: 1px solid #e3f2fe;
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  background: #e3f2fe;
  max-width: 240px;
}

.faq-filter-search .faq-filter-search-field > div > div > div:hover {
  background: #e3f2fe;
}

/* 検索 input チップ : アイコン */
.faq-filter-search .faq-filter-search-field > div > div > div svg {
  color: var(--color-title);
  width: 18px;
  height: 18px;
}
.faq-filter-search-field--disable-portal {
  left: 0;
  top: 47px;
}
.faq-filter-search-keyword-expand-button {
  display: none;
}

/* 検索 タグ ボタン : モバイル
-------------------------------------------------- */
.faq-filter-search-keyword-expand-button.faq-filter-search-keyword__button--mobile {
  display: flex;
  justify-content: center;
  padding: 16px 24px 24px 24px;
  position: relative;
  cursor: pointer;
  color: var(--color-primary);
}

.faq-filter-search-keyword-expand-button.faq-filter-search-keyword__button--mobile
  .MuiTouchRipple-root {
  display: none;
}

/* 検索 タグ ボタン : モバイル - CSSでテキスト変換するコード
-------------------------------------------------- */
.faq-filter-search-keyword-expand-button.faq-filter-search-keyword__button--mobile
  .MuiButton-label {
  font-size: 0;
}

/* less・more クラスがあるとき - '開く' 表示の文言変更
-------------------------------------------------- */
.less
  ~ .faq-filter-search-keyword-expand-button.faq-filter-search-keyword__button--mobile
  .MuiButton-label::before {
  content: 'もっとみる';
  font-size: var(--font-size-sm) !important;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold) !important;
  font-family: var(--font-family);
}
/*  '閉じる' 表示 */
.more
  ~ .faq-filter-search-keyword-expand-button.faq-filter-search-keyword__button--mobile
  .MuiButton-label::before {
  content: 'とじる';
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
}
/* ホバー状態でもテキスト変更効果を適用 */
.faq-filter-search-keyword-expand-button.faq-filter-search-keyword__button--mobile:hover
  .MuiButton-label::before {
  opacity: 1;
}

.faq-filter-search-keyword__button--mobile:hover {
  background-color: transparent !important;
}

/* ボタンのアイコン */
.faq-filter-search-keyword-expand-button.faq-filter-search-keyword__button--mobile
  .MuiButton-endIcon {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

.faq-filter-search-keyword-expand-button.faq-filter-search-keyword__button--mobile
  .MuiButton-endIcon
  svg {
  display: none;
}

.faq-filter-search-keyword-expand-button.faq-filter-search-keyword__button--mobile
  .MuiButton-endIcon::after {
  margin-right: 0;
  content: '';
  display: block;
  width: 16px;
  height: 12px;
  background-image: url(https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.more
  ~ .faq-filter-search-keyword-expand-button.faq-filter-search-keyword__button--mobile
  .MuiButton-endIcon::after {
  transform: rotate(180deg);
}

.faq-panel-header {
  padding: 12px;
}
.faq-panel-header .faq-panel-header__title {
  font-size: 0.9rem;
}
.faq-panel {
  margin: 0 auto 15px;
  min-width: 275px;
}

/* パネルのリストのボーダー
--------------------------------------------------  */
.faq-panel .faq-panel-content {
  border-bottom: 1px solid var(--color-panel-border);
  padding: 0;
}
/* パネルのリストのボーダー : last-child  */
.faq-panel .faq-panel-content:last-child {
  padding-bottom: 0;
  border-bottom: 1px solid var(--color-panel-border);
}
/* パネルのリスト */
.faq-panel .faq-panel-content .faq-panel-content__button {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px 0;
  border-radius: 0;
}

/* パネルのリストのボタンのRippleアニメーション変更 */
.faq-panel .faq-panel-content .faq-panel-content__button .MuiTouchRipple-root {
  opacity: 0.4 !important;
  border-radius: 3px;
}

.faq-panel .faq-panel-content .faq-panel-content__avatar {
  height: 30px;
  width: 30px;
  content: url(https://karakuri-faq-dev.s3.ap-northeast-1.amazonaws.com/tokyodisneyresort/image/letter-q.svg);
}
.faq-panel .faq-panel-content .faq-panel-content__q {
  margin-left: var(--space-sm);
  text-align: left;
  text-transform: none;
}
.faq-panel .faq-panel-content .faq-panel-content__q em {
  font-style: normal;
}
.faq-panel .faq-answer-q {
  border-radius: 4px;
  border: 1px solid var(--color-primary);
  height: 25px;
  width: 25px;
}
.faq-panel .faq-answer-a {
  border-radius: 4px;
  border: 1px solid var(--color-primary);
  height: 25px;
  width: 25px;
}

.faq-panel .faq-category {
  padding: 0;
}
.faq-panel .faq-category:last-child {
  padding-bottom: 0;
}
.faq-panel .faq-category .faq-category__category {
  color: var(--color-white);
  text-transform: none;
}
.faq-panel .faq-category .faq-category__button,
.faq-panel .faq-subcategory.faq-category__button {
  border-radius: 0;
  justify-content: flex-start;
  margin-top: 5px;
  text-transform: none;
}
.faq-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  margin-left: 8px;
  margin-right: 8px;
  padding-bottom: 0;
}
.faq-tag-cloud .faq-tag-cloud__item {
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  display: inline-flex;
  flex: 1 1;
  justify-content: center;
  margin-bottom: 8px;
  margin-right: 8px;
  max-width: 130px;
  padding: 0;
}
.faq-tag-cloud .faq-tag-cloud__item .faq-tag-cloud__item__link {
  color: var(--color-primary);
  display: inline-block;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  text-overflow: ellipsis;
  transition: 0.2s;
  white-space: nowrap;
  width: 100%;
}
.faq-pagination {
  display: flex;
  justify-content: center;
}
.faq-button-copy-link-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.faq-button-copy-link {
  display: none;
}

/* form 内部の要素の順序を変更
-------------------------------------------------- */
.faq-search-layout form {
  display: flex;
  flex-direction: column;
}
.faq-search-layout form .faq-filter-search {
  order: 2;
  width: auto;
}
.faq-search-layout form .faq-search-navigation {
  order: 1;
  margin-top: 0;
  margin-bottom: 8px;
}

.faq-custom-feedback-ng .faq-custom-feedback-item .faq-custom-feedback-subtitle {
  font-size: var(--font-size-md) !important;
}

.template-2 .faq-answer-page .faq-main-content {
  display: flex;
  flex-direction: column;
}

/* モバイル実装後、PCのデザイン実装をします。 (PCのデザインはここから)
================================================================================
================================================================================
================================================================================ */

/* 768px以上のサイズのデザインをPCデザインと呼びます。
-------------------------------------------------- */
@media screen and (min-width: 768px) {
  /* ヘッダー: PC
  -------------------------------------------------- */
  .template-2 header {
    height: var(--header-height-desktop);
    overflow: hidden;
    top: 0;
    width: 100%;
    z-index: 1;
  }

  .template-2 .faq-header {
    margin-bottom: 0;
  }

  .template-2 .faq-header h2 {
    font-size: var(--font-size-xxxl);
    margin: 32px 32px 0 32px;
    padding-bottom: 32px;
  }

  .template-2 .faq-index-layout .faq-header h2 {
    font-size: var(--font-size-xxxl);
    margin: 32px 32px;
    padding-bottom: 32px;
  }

  .template-2 .faq-index-layout .faq-main-content .faq-header h2::before {
    font-size: var(--font-size-xxxl);
    font-weight: var(--font-weight-semibold);
  }

  .template-2 .faq-answer-layout .faq-header::after {
    font-size: var(--font-size-xxxl);
    margin: 32px 32px 0 32px;
    padding-bottom: 32px;
  }

  /* ヘッダーのロゴ: PC
  -------------------------------------------------- */
  .template-2 header div h1.faq-logo img {
    height: 45px;
    object-fit: contain;
    width: auto;
  }

  /* コンテンツ: PC
  -------------------------------------------------- */
  .template-2 .faq-content {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
  }

  .template-2 .faq-search-layout .faq-category-page .faq-main-content .faq-header h2::before {
    font-size: var(--font-size-xxxl);
  }

  .template-2 .faq-index-layout .faq-main-content .faq-header h2::after {
    font-size: 18px;
    margin: 32px auto 0;
  }

  .template-2 .faq-content .faq-main-content .faq-panel .faq-number-of-items {
    font-size: var(--font-size-xxl);
  }

  /* 回答ページのデフォルトでタイトルは非表示: PC
-------------------------------------------------- */
  .template-2 .faq-answer-layout .faq-search-navigation {
    margin: 20px 0 0 0;
  }

  .template-2 .faq-answer-layout .faq-search-navigation > div.faq-breadcrumb {
    padding: 0 32px;
  }

  /* コンテンツの全体幅: PC
  -------------------------------------------------- */
  .template-2 div.faq-content {
    margin: auto;
  }

  /* コンテンツのコンテンツがない場合: PC
  -------------------------------------------------- */
  .template-2 .faq-content .faq-no-content {
    display: none;
  }

  /* コンテンツのメインコンテンツ: PC
  -------------------------------------------------- */
  .template-2 .faq-content .faq-main-content {
    flex: 1 1 auto;
    margin: 0;
    order: 2;
    width: 100%;
  }

  .template-2 .faq-panel.faq-filter-search {
    margin: 0 auto;
    padding: 0 32px 0 32px !important;
  }

  .faq-filter-search-keyword .faq-filter-search-keyword__wrapper {
    padding-bottom: 24px;
  }

  /* filter search コンテナー サイズ: PC
-------------------------------------------------- */
  .faq-filter-search.faq-filter-search__container {
    padding: 0 !important;
    max-width: var(--max-width-search);
    margin: 0 auto;
    border-bottom: 1px solid var(--color-line);
  }

  .faq-search-container {
    margin-bottom: 32px;
  }

  .faq-search-container::before {
    font-size: var(--font-size-xxl);
    padding: 0 0 32px 0;
  }

  .template-2 .faq-search-result > div {
    font-size: var(--font-size-base);
  }

  .template-2 .faq-search {
    height: 44px;
  }

  /* 検索 input サイズ: PC
-------------------------------------------------- */
  .faq-filter-search .faq-filter-search-field > div > div {
    min-height: 44px;
    font-family: var(--font-family);
    font-size: var(--font-size-md);
  }

  .faq-filter-search .faq-filter-search-field > div > div > div {
    font-size: var(--font-size-base);
    max-width: 480px;
  }

  .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
    padding: 0;
  }

  .faq-filter-search .faq-filter-search-field > div > div input::placeholder {
    font-size: var(--font-size-md);
    font-family: var(--font-family);
  }

  /* filter search コンテナー サイズ: PC
-------------------------------------------------- */
  .faq-search-layout form .faq-filter-search {
    order: 2;
    width: 100%;
  }

  .faq-search .faq-search__input input {
    font-size: var(--font-size-md);
  }
  .faq-search .faq-search__input input::placeholder {
    font-size: var(--font-size-md);
  }

  .faq-filter-search .MuiAutocomplete-listbox {
    margin-top: 6px;
  }

  /* パンくずリスト: PC
-------------------------------------------------- */
  .template-2 .faq-breadcrumb {
    margin: -8px auto 8px;
    padding: 0 32px;
  }

  .template-2 .faq-breadcrumb a,
  .template-2 .faq-breadcrumb p {
    font-size: var(--font-size-sm);
  }

  /* 検索エリア: パンくずリストと検索フォームを横並びにする: PC
  (カテゴリ検索を使わない場合は、max-height: auto;にする)
-------------------------------------------------- */
  .template-2 .faq-navigation {
    padding: 12px 32px;
    margin: 0 auto 32px;
    max-width: var(--max-width-content);
  }

  /* 検索バーのサイズ: PC
-------------------------------------------------- */
  .template-2 .faq-navigation .faq-search,
  .template-2 .faq-navigation .faq-search-result {
    margin-left: 0;
    margin-right: 0;
    margin: 0 auto;
  }

  .template-2 .faq-navigation .faq-search {
    height: 44px !important;
    min-height: 44px !important;
  }

  /* filter search input エリア: PC 
-------------------------------------------------- */
  .faq-filter-search .faq-filter-search__inner {
    margin: 0 0 24px 0;
  }

  .template-2 .faq-search .faq-search-button {
    padding: 10px 18px;
  }

  /* パンくずリストのorderを変更する(カテゴリ検索): PC
-------------------------------------------------- */
  .faq-search-layout form .faq-search-navigation {
    order: 1;
    margin-top: -16px;
    margin-bottom: 40px;
  }

  /* パンくずリストのorderを変更する(カテゴリ検索): PC
-------------------------------------------------- */
  .template-2 .faq-navigation > div.faq-breadcrumb {
    order: 1;
    position: absolute;
    top: 86px;
    margin-bottom: 48px;
    padding: 0;
    max-width: 768px;
  }

  /* 検索 タグ: PC
-------------------------------------------------- */
  .faq-filter-search-keyword .faq-filter-search-keyword__wrapper .faq-filter-search-keyword__chip {
    font-size: var(--font-size-base);
  }

  .faq-filter-search-keyword
    .faq-filter-search-keyword__wrapper
    .faq-filter-search-keyword__chip
    span {
    font-size: var(--font-size-base);
  }

  .faq-filter-search-keyword
    .faq-filter-search-keyword__wrapper
    .faq-filter-search-keyword__chip.MuiChip-root {
    height: 32px;
  }

  /* コンテンツのメインコンテンツのパネル: PC
  -------------------------------------------------- */
  .template-2 .faq-content .faq-main-content .faq-panel {
    padding: 32px 32px 0 32px;
    margin-bottom: 0;
    width: 100%;
  }

  /* パネルのタイトル: PC
-------------------------------------------------- */
  .template-2 .faq-panel .faq-panel-title {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    padding-bottom: 32px;
  }

  .template-2 .faq-category-layout .faq-category-page .faq-main-content .faq-panel {
    padding-top: 120px;
  }

  .template-2 .faq-search-layout .faq-filtered-by-query .faq-main-content .faq-panel {
    padding-top: 32px;
  }

  /* コンテンツのメインコンテンツのパネルのボタン: PC
  -------------------------------------------------- */
  .template-2 .faq-content .faq-main-content .MuiButton-label > div {
    height: 1.6rem;
    width: 1.6rem;
  }

  /* コンテンツのメインコンテンツのパネルのカテゴリ: PC
  -------------------------------------------------- */
  .template-2 .faq-content .faq-main-content .faq-panel-category {
    padding: 1.4rem 0 0;
  }

  /* コンテンツのメインコンテンツのパネルのカテゴリのヘッダー: PC
  -------------------------------------------------- */
  .template-2 .faq-content .faq-main-content .faq-panel-category .faq-panel-header {
    padding: 0 0.9rem;
  }

  /* パネルのリストのヘッダータイトル: PC
  -------------------------------------------------- */
  .template-2 .faq-panel .faq-panel-content > .faq-panel-content-button > span > h5 {
    font-size: var(--font-size-lg);
    line-height: 30px;
    align-items: center;
  }

  /* カテゴリ検索結果一覧のページネーション: PC
  -------------------------------------------------- */
  .template-2 .faq-panel .faq-panel-header > div > h3.faq-pagination {
    font-size: var(--font-size-xs) !important;
    position: absolute;
    right: 20px;
    top: 32px;
  }

  /* パネルのリストのテキスト: PC
  -------------------------------------------------- */
  .template-2 .faq-panel .faq-panel-header > div > h3.faq-panel-header__title {
    font-size: var(--font-size-xxl);
    margin-bottom: 8px;
    font-weight: var(--font-weight-semibold);
  }

  /* 回答ページのアイコンの余白
  -------------------------------------------------- */
  .template-2 .faq-answer .faq-panel-header {
    margin-top: 0;
  }
  .template-2 .faq-answer .faq-panel-header > .MuiCardHeader-avatar {
    margin-right: 16px;
  }

  .template-2 .faq-answer .faq-answer-content > .MuiCardHeader-avatar {
    margin-right: 16px;
  }

  /* 回答ページのアイコン
-------------------------------------------------- */
  .template-2 .faq-answer .faq-panel-header .faq-answer-q {
    height: 30px;
    width: 30px;
  }

  .template-2 .faq-answer .faq-answer-content .faq-answer-a {
    margin-right: 16px;
    height: 30px;
    width: 30px;
  }

  .template-2 .faq-answer .faq-answer-content-wrapper {
    padding: 16px 0 0 0 !important;
  }

  /* 回答ページの回答エリアの回答のテキスト: PC */
  .template-2
    .faq-answer
    .faq-answer-content
    .faq-answer-content__answer-wrapper
    .faq-answer-content__answer {
    margin-left: 0;
    margin-bottom: 24px;
  }

  /* 回答ページの回答エリアの回答のテキストのフォントサイズ: PC */
  .template-2
    .faq-answer
    .faq-answer-content
    .faq-answer-content__answer-wrapper
    .faq-answer-content__answer
    div
    > p {
    font-size: var(--font-size-lg);
    margin-bottom: 0;
  }

  .template-2
    .faq-answer
    .faq-answer-content
    .faq-answer-content__answer-wrapper
    .faq-answer-content__answer
    div
    > p
    em {
    font-size: var(--font-size-sm);
  }

  .faq-answer-content-wrapper .faq-answer-content__button {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
  }

  /* 回答ページの回答選択ボタンの回答のテキスト: PC */
  .faq-answer-content-wrapper .faq-answer-content__answer {
    font-size: var(--font-size-md);
  }

  /* 回答ページの回答エリアの回答のテキストのパラグラフ: PC */
  .faq-answer-content-wrapper .faq-answer-content__answer p {
    margin: 0;
    font-size: var(--font-size-md);
  }

  /* 回答ページの回答エリアの回答の選択ボタンエリア: PC
-------------------------------------------------- */
  .template-2 .faq-answer .faq-answer-content-wrapper .faq-answer-actions-wrapper {
    margin: 32px auto 32px;
    padding: 0;
    width: 80%;
  }

  /* 回答ページの回答エリアの回答の選択ボタンのデザイン */
  .template-2
    .faq-answer
    .faq-answer-content-wrapper
    .faq-answer-actions-wrapper
    button.faq-answer-content__button {
    font-size: var(--font-size-md);
    margin: 0;
    padding: 7px 16px;
  }

  /* 回答ページの回答エリアの回答の選択ボタンクリック後のコンテンツ: PC
------------------------------------------------- */
  .template-2 .faq-answer .faq-answer-content-wrapper > .faq-answer-content__answer-wrapper {
    margin: 40px auto;
    padding: 0 48px;
  }

  /* 回答ページの質Feedbackエリアのボタン
  -------------------------------------------------- */
  .template-2 .faq-questionnaire .faq-questionnaire__actions .faq-questionnaire__actions__button {
    flex: 1 1;
    font-size: var(--font-size-md);
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    width: 240px;
    max-width: 240px;
    border-radius: 3px;
    height: 44px;
  }

  /* 回答ページのタイトル: PC
  -------------------------------------------------- */
  .template-2 .faq-answer .faq-panel-header > div > h3.faq-answer-title {
    font-size: var(--font-size-xxl);
    line-height: 1.5;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0;
  }

  /* 回答ページの質Feedbackエリア: PC 
-------------------------------------------------- */
  .template-2 .faq-questionnaire {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: end;
    gap: 16px;
    margin: 32px 0 0 0;
    padding: 0 0 32px 0;
  }

  /* 回答ページの質Feedbackエリアのタイトル: PC 
  -------------------------------------------------- */
  .template-2 .faq-questionnaire .faq-questionnaire__title {
    padding-bottom: 0;
    font-size: var(--font-size-lg);
  }

  .template-2 .faq-questionnaire .faq-questionnaire__title h3 {
    font-size: var(--font-size-xxl);
    margin: 32px 0;
  }

  .faq-custom-feedback-ng {
    padding: 0 0 32px 0 !important;
  }

  .faq-custom-feedback-ng .faq-custom-feedback-text {
    font-size: var(--font-size-lg) !important;
    margin: 0;
  }

  .faq-custom-feedback-ng .faq-custom-feedback-notes .faq-custom-feedback-text {
    font-size: var(--font-size-base) !important;
  }

  /* 回答ページの質Feedbackエリアのボタンの間隔: PC 
  -------------------------------------------------- */
  .template-2 .faq-questionnaire .faq-questionnaire__actions {
    gap: 40px;
    flex-direction: row;
    padding: 16px 0 0 0;
  }

  /* パネルのリストのQ余白: PC
  -------------------------------------------------- */
  .faq-panel .faq-panel-content .faq-panel-content__q {
    margin-left: var(--space-md);
    text-align: left;
    text-transform: none;
  }

  /* パネルのリストの余白: PC
-------------------------------------------------- */
  .faq-panel .faq-panel-content .faq-panel-content__button {
    justify-content: flex-start;
    padding: 24px 0;
    border-radius: 0;
  }

  /* パネルのカードリストのカードの表示スタイル: PC
-------------------------------------------------- */
  .template-2 .faq-panel .faq-panel-card-list .faq-panel-card > div a {
    padding: 20px 12px;
  }

  /* カテゴリカードの中央揃え: PC
-------------------------------------------------- */
  .template-2 .faq-panel .faq-panel-card-list .faq-panel-card > div.MuiCardActionArea-root {
    justify-content: center;
  }

  /* ページネーションのカスタム: PC
-------------------------------------------------- */
  .template-2 .faq-panel .faq-pagination {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .template-2 .faq-panel .faq-pagination button {
    min-width: 24px;
    height: 30px;
    border-radius: 3px;
  }

  .template-2 .faq-panel .faq-pagination-pages button {
    min-width: 24px;
    height: 30px;
  }

  /* パネルのページネーションの省略記号の高さ */
  .template-2 .faq-panel .faq-pagination-start-ellipsis div,
  .template-2 .faq-panel .faq-pagination-end-ellipsis div {
    line-height: 24px;
    min-width: 24px;
    height: 30px;
  }

  /* コンテンツのメインコンテンツのパネルのカテゴリのコンテンツの全体幅
  -------------------------------------------------- */
  .template-2 .faq-content .faq-left-content,
  .template-2 .faq-content .faq-right-content {
    flex: 0 1 200px;
    min-width: 200px;
  }

  /* コンテンツのメインコンテンツのパネルのカテゴリのコンテンツの左側
  -------------------------------------------------- */
  .template-2 .faq-content .faq-left-content {
    order: 1;
  }

  /* コンテンツのメインコンテンツのパネルのカテゴリのコンテンツの右側
  -------------------------------------------------- */
  .template-2 .faq-content .faq-right-content {
    order: 3;
  }

  /* パネルのカードリストの全体幅 (カテゴリカード): PC
-------------------------------------------------- */
  .template-2 .faq-panel .faq-panel-card-list {
    gap: 30px;
  }

  /* パネルのカードリストのカードのタイトルサイズ: PC
-------------------------------------------------- */
  .template-2 .faq-panel .faq-panel-card-list .faq-panel-card .faq-panel-card-content h5 {
    font-size: var(--font-size-md);
    line-height: 20px;
  }

  /* パネルのカードリストのカードの画像サイズ: PC
-------------------------------------------------- */
  .template-2 .faq-panel .faq-panel-card-list .faq-panel-card .faq-panel-card-media {
    height: 32px !important;
    width: 32px !important;
  }

  .template-2 .faq-left-content .faq-panel,
  .template-2 .faq-right-content .faq-panel {
    min-width: 200px;
    padding: 5px;
  }

  .template-2 .faq-left-content .faq-panel > form,
  .template-2 .faq-right-content .faq-panel > form {
    min-width: 160px;
  }

  .template-2 .faq-left-content .faq-panel.faq-panel-category,
  .template-2 .faq-right-content .faq-panel.faq-panel-category {
    padding: 10px 0 0;
  }

  .template-2 .faq-left-content .faq-panel.faq-filter-search .faq-filter-search,
  .template-2 .faq-right-content .faq-panel.faq-filter-search .faq-filter-search {
    padding: 10px 5px;
  }

  .template-2 .faq-content .faq-left-content .faq-panel {
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    margin-top: 2rem;
    padding-bottom: 0;
    padding-top: 10px;
  }

  .template-2 .faq-content .faq-left-content .faq-panel .faq-panel-header {
    padding: 0 10px 10px;
  }

  .template-2 .faq-content .faq-left-content .faq-panel .faq-panel-header h3 {
    margin: 2px 0 0;
  }

  .template-2 .faq-content .faq-left-content .faq-category button {
    margin-top: 2px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .template-2 .faq-content .faq-left-content .faq-category button:after {
    right: 10px;
    top: 2px;
  }

  .template-2 .faq-content .faq-left-content .faq-category button h4 {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 175px;
  }

  .template-2 .faq-content .faq-left-content .faq-category.faq-category-level button h4 {
    width: calc(100% - 10px);
  }

  .template-2 .faq-content .faq-left-content .faq-subcategory {
    text-align: left;
  }

  .template-2 .faq-content .faq-right-content .faq-panel .faq-panel-header {
    padding: 0 10px 10px;
  }

  .template-2 .faq-content .faq-right-content .faq-panel .faq-panel-header h3 {
    margin: 2px 0 0;
  }

  .template-2 .faq-answer-page,
  .template-2 .faq-category-page {
    margin-top: 90px;
  }

  .template-2 .faq-answer-page .faq-breadcrumb,
  .template-2 .faq-category-page .faq-breadcrumb {
    top: var(--space-xxxl);
    left: auto;
  }

  .template-2 .faq-answer-page .faq-left-content .faq-breadcrumb,
  .template-2 .faq-answer-page .faq-right-content .faq-breadcrumb,
  .template-2 .faq-category-page .faq-left-content .faq-breadcrumb,
  .template-2 .faq-category-page .faq-right-content .faq-breadcrumb {
    left: auto;
    position: relative;
    top: auto;
  }

  /* パネルのアイコンサイズ: PC
  -------------------------------------------------- */
  .template-2
    .faq-main-content
    .faq-panel
    .faq-panel-content
    > .faq-panel-content-button
    > span
    > div {
    height: 30px;
    width: 30px;
  }

  .MuiAutocomplete-option {
    min-height: auto;
  }

  .faq-custom-feedback-ng .faq-custom-feedback-item .faq-custom-feedback-subtitle {
    font-size: var(--font-size-lg) !important;
  }
}

.template-2 .faq-navigation ul li a,
.template-2 .faq-search-navigation ul li a {
  color: var(--color-primary);
  height: auto;
}

.template-2 .faq-answer-page .faq-left-content .faq-breadcrumb,
.template-2 .faq-answer-page .faq-right-content .faq-breadcrumb,
.template-2 .faq-category-page .faq-left-content .faq-breadcrumb,
.template-2 .faq-category-page .faq-right-content .faq-breadcrumb {
  left: auto;
  position: relative;
  top: auto;
}

@media screen and (max-width: 320px) {
  .template-2 header {
    padding: 10px;
  }

  .template-2 header .faq-logo {
    padding-top: 9.25%;
  }

  .template-2 header .faq-logo img {
    width: 130px;
  }
}

/* カスタム CSS (カスタムCSSは ここから)
================================================================================
================================================================================
================================================================================ */

/* これかも! ラベルのデザイン
-------------------------------------------------- */
.maybe-this-one a h5:after {
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  content: 'これかも!';
  font-size: var(--font-size-xxs);
  color: var(--color-white);
  padding: 6px;
  font-weight: var(--font-weight-bold);
  background: #073963;
  border-radius: 4px;
  height: 24px;
  white-space: nowrap;
  width: auto;
}

/* ページトップに戻るボタンのアニメーションに使うコード：ページ遷移の動きでスクロール位置が変わる可能性もあるため使うには注意が必要
-------------------------------------------------- */
.custom-code {
  scroll-padding-top: var(--header-height-desktop);
  scroll-behavior: smooth;
}

@media screen and (max-width: 767px) {
  .custom-code {
    scroll-padding-top: var(--header-height-mobile);
    scroll-behavior: smooth;
  }
}

/* 「カテゴリから探す」機能の６個のカードアイテムのレイアウト表示コード
-------------------------------------------------- */
@media screen and (max-width: 960px) {
  .template-2 .faq-panel .faq-panel-card-list .faq-panel-card {
    flex: 0 0 calc((100% - 60px) / 3); /* 3つのカード */
  }
}

@media screen and (max-width: 760px) {
  .template-2 .faq-panel .faq-panel-card-list .faq-panel-card {
    flex: 0 0 calc((100% - 10px) / 2); /* 2つのカード */
  }
}

@media screen and (max-width: 576px) {
  .template-2 .faq-panel .faq-panel-card-list .faq-panel-card {
    flex: 0 0 100%; /* 1つのカード */
  }
}

/* 「カテゴリフィルタ」の機能を使うカードのレイアウト表示コード
-------------------------------------------------- */
/* 「カテゴリフィルタ」のアイコンのカスタム */
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category
  span
  span
  svg.MuiSvgIcon-root {
  display: none !important;
}

.faq-search-layout
  .faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category
  span
  span::before {
  display: none;
}

.faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category span span::before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 12px;
}

.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(1)
  span
  span::before {
  background-image: var(--icon-category-1);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(2)
  span
  span::before {
  background-image: var(--icon-category-2);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(3)
  span
  span::before {
  background-image: var(--icon-category-13);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(4)
  span
  span::before {
  background-image: var(--icon-category-14);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(5)
  span
  span::before {
  background-image: var(--icon-category-4);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(6)
  span
  span::before {
  background-image: var(--icon-category-3);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(7)
  span
  span::before {
  background-image: var(--icon-category-5);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(8)
  span
  span::before {
  background-image: var(--icon-category-6);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(9)
  span
  span::before {
  background-image: var(--icon-category-7);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(10)
  span
  span::before {
  background-image: var(--icon-category-8);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(11)
  span
  span::before {
  background-image: var(--icon-category-9);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(12)
  span
  span::before {
  background-image: var(--icon-category-10);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(13)
  span
  span::before {
  background-image: var(--icon-category-12);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(14)
  span
  span::before {
  background-image: var(--icon-category-15);
}
.faq-filter-category-sub-category-wrapper
  .faq-filter-category-sub-category:nth-child(15)
  span
  span::before {
  background-image: var(--icon-category-11);
}

/* PC: ４つのカードを並べる */
@media screen and (min-width: 1024px) {
  .faq-index-layout .faq-filter-category-sub-category-wrapper {
    padding-top: 16px;
  }

  .faq-search-layout .faq-filter-category-sub-category-wrapper {
    gap: 0;
    justify-content: flex-start;
    padding-bottom: 0;
    padding-top: 16px;
  }

  .faq-filter-category-sub-category-wrapper {
    gap: 16px;
    justify-content: flex-start;
    padding-bottom: 32px;
    padding-top: 16px;
  }

  .faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category {
    width: calc(25% - 12px);
    margin: 0;
    padding: 16px 8px;
  }

  .faq-search-layout .faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category {
    padding: 24px 0;
  }

  .faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category > span {
    font-size: var(--font-size-base);
  }

  .faq-search-layout
    .faq-filter-category-sub-category-wrapper
    .faq-filter-category-sub-category
    > span {
    font-size: var(--font-size-lg);
  }
}

/*　Tablet: 3つのカードを並べる */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .faq-filter-category-sub-category-wrapper {
    gap: 12px;
    justify-content: flex-start;
  }

  /* .faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category {
    width: calc(33.333% - 8px);
    margin: 0;
    padding: 16px;
  } */

  .faq-filter-category-sub-category-wrapper .faq-filter-category-sub-category {
    width: calc(25% - 12px);
    margin: 0;
    padding: 16px 8px;
  }
}

/* OLCさんのヘッダーScriptの対応のためのカスタムコード：Header
-------------------------------------------------- */
/* OLCP: ヘッダーのlanguagemenuのモーダルを画面上部に固定するコード*/
#header.vendor .header-inner .header-top .languagemenu {
  position: fixed !important;
}

/* OLCP: ヘッダーのがKARAKURIのHeaderに被らないようにするためのコード */
#header.vendor {
  margin-bottom: 0 !important;
  display: block !important;
}

/* OLCさんのヘッダーでスクロール位置がずれるためのカスタムコード
-------------------------------------------------- */
/* ステップ 1: スクロール位置の調整 */
[id] {
  scroll-margin-top: var(--header-height-mobile);
}

/* ステップ 2: すべてのセクションにスクロール位置の調整を追加 */
section,
.faq-panel,
.faq-answer,
.faq-category,
.faq-subcategory,
.faq-panel-card,
.faq-answer-content {
  scroll-margin-top: var(--header-height-mobile);
}

/* ステップ 3: メディアクエリを使用してデスクトップに対応 */
@media screen and (min-width: 768px) {
  [id],
  section,
  .faq-panel,
  .faq-answer,
  .faq-category,
  .faq-subcategory,
  .faq-panel-card,
  .faq-answer-content {
    scroll-margin-top: var(--header-height-desktop);
  }
}

/* OLC：フッターのカスタム用コード
-------------------------------------------------- */

#footer.local-footer {
  margin-top: 48px;
  display: block !important;
  width: 100%;
  border-top: 1px solid var(--color-primary) !important;
}

#footer.local-footer .inner {
  width: 100%;
  height: auto;
}

/* 回答ページのフォームのカスタムコード
-------------------------------------------------- */
.faq-custom-feedback-ng {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  text-align: left;
  padding: 0 0 24px 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-line);
}

.faq-custom-feedback-ng .faq-custom-feedback-title {
  margin: 0 0 8px 0;
  font-size: var(--font-size-md);
}

.faq-custom-feedback-ng .faq-custom-feedback-text {
  font-size: var(--font-size-md);
  margin: 0;
}

.faq-custom-feedback-ng .faq-custom-feedback-notes .faq-custom-feedback-text {
  font-size: var(--font-size-sm);
}

.faq-custom-feedback-ng .faq-custom-feedback-item {
  text-align: left;
  margin-top: 32px;
}

.faq-custom-feedback-ng .faq-custom-feedback-item .faq-custom-feedback-subtitle {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  display: flex;
  margin: 0 0 8px 0;
}

.faq-custom-feedback-ng .faq-custom-feedback-item .faq-custom-feedback-text {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .faq-custom-feedback-ng .faq-custom-feedback-buttons {
    gap: 40px !important;
  }

  .maybe-this-one a h5:after {
    font-size: var(--font-size-xs);
  }
}

.faq-custom-feedback-ng .faq-custom-feedback-buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 32px;
  justify-content: flex-end;
}

@media screen and (min-width: 768px) {
  .faq-custom-feedback-ng .faq-custom-feedback-button {
    font-size: 16px !important;
  }
}

.faq-custom-feedback-ng .faq-custom-feedback-button {
  padding: 7px 16px !important;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 240px;
  justify-content: center;
  font-size: 15px;
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
  max-width: 240px;
  height: 44px;
  max-height: 44px;
  min-height: 44px;
}

.faq-custom-feedback-ng .faq-custom-feedback-button:hover {
  background: rgba(61, 170, 223, 0.1);
  color: var(--color-primary);
  text-decoration: none;
}

.faq-custom-feedback-ng .icon {
  margin-right: 10px;
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  .faq-custom-feedback-ng .faq-custom-feedback-buttons {
    flex-direction: column;
  }
  .faq-custom-feedback-ng .faq-custom-feedback-button {
    max-width: 100%;
  }
}

/* 解決しない場合のカスタムコード & ページトップに戻る
-------------------------------------------------- */
.faq-index-layout .faq-more-help,
.faq-answer-layout .faq-more-help,
.faq-index-layout .faq-backto-top {
  display: none;
}
.faq-more-help {
  font-family: var(--font-family);
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 32px;
}
.faq-more-help-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.faq-more-help-title {
  font-size: var(--font-size-xxl);
  margin: 0;
  color: var(--color-title);
  font-weight: var(--font-weight-semibold);
}
.faq-more-help-text {
  font-size: var(--font-size-lg);
  margin: 0;
}

.faq-more-help-button-area {
  display: flex;
  justify-content: flex-end;
}

@media screen and (min-width: 768px) {
  .faq-more-help-button {
    font-size: 16px !important;
  }
}

.faq-more-help-button {
  color: var(--color-primary);
  background: #fff;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  max-width: 240px;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.faq-more-help-button:hover {
  background: rgba(61, 170, 223, 0.1);
  color: var(--color-primary);
}

.faq-backto-top {
  max-width: var(--max-width-content);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.faq-backto-top .faq-backto-top-content {
  padding: 32px 0;
  width: 100%;
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 32px;
}

@media screen and (min-width: 768px) {
  .faq-backto-top .faq-backto-top-content a {
    font-size: 16px !important;
  }
}

.faq-backto-top .faq-backto-top-content a {
  color: var(--color-primary);
  background: #fff;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  min-width: 240px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.faq-backto-top .faq-backto-top-content a:hover {
  background: rgba(61, 170, 223, 0.1);
  color: var(--color-primary);
}

@media screen and (max-width: 768px) {
  .faq-more-help {
    flex-direction: column;
    text-align: left;
    gap: 24px;
    padding: 24px 16px;
  }

  .faq-more-help-content {
    align-items: flex-start;
    gap: 24px;
  }

  .faq-more-help-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
  }

  .faq-more-help-text {
    font-size: var(--font-size-md);
    margin: 0;
  }

  .faq-more-help-button {
    width: 100%;
    min-width: 100%;
  }
  .faq-backto-top .faq-backto-top-content {
    margin: 0 16px;
    padding: 24px 0;
  }
  .faq-backto-top .faq-backto-top-content a {
    width: 100%;
    min-width: 100%;
  }
}