@charset "UTF-8";
/* CSS Document */
/* --- カスタムプロパティの指定とスタイルの初期化 --- */

/* 共通部分
----------------------- */

/* 変数を用いたカラーコードなどの指定
--------------------------------- */
:root {
  /* colors */
  --bg-color: #fff;
  --bg-color-sub: /* #E5FAFD; */#E6F6F9;
  --bg-color-dropdown: #ECF9FA;
  --bg-color-muted: #F5F5F5;
  --bg-color-dim: #EAEAEA;
  
  --accent-color-main: #4169E1;
  --accent-color-sub: #172D90;
  
  --textColor: #1A1A1A;
  --textColor-rgb: 26 26 26;
  
  --linkHover: /* #D73A05 */#274AE6;
  --link-hover-color-footer: #FF7F50;
  --link-current-color-footer: #BBB;
  
  --border-color: #CCC;
  --border-color-drawer: #BABABA;
  --border-color-light-grayish-blue: #BECAEF;
  
  --btn-shadow-color: #999;
  
  --cta-color: /* #F39C00 */ #FFAC3C;
  --cta-color-dark: #B34F11;
  
  --answer-color: #DB2511;
  
  --chevron-color: var(--accent-color-main);
  --chevron-bg-color: var(--bg-color);
  
  --schedule-circle-color: #6495ED;
  --schedule-y-axis-color: #CCEAF1;
  
  /* brand colors */
  --lineGreen: #06C755;

  /* length */
  --btmMenuHeight: 80px;
  --headerHeight: 75px;
  --scroll-padding: var(--headerHeight);
  --topConceptTextPadding: 220px;
  --top-card-max-width: 400px;
  --top-features__item-max-width: 350px;
  --scrollTop-bottom: 30px;
  --btmMenuIconSize: 55px;
  --chevron-border-width: 3px;
  --acc-dir-img-width: minmax(300px, 45%);
  --acc-dir-index-size: calc(1.5rem * 1.6);
  
  /* url */
  --hero-img-bg: url("../images/hero_image_v2.jpg");
  /* 相対パスの書き方に注意。css/base.cssからの相対的な位置関係を記述する */
}

/* ===== スタイルのリセット ===== */
/* --- キーボード操作時のフォーカスリングを維持しつつ、クリックやタップ時のフォーカスリングを抑える --- */
:is(a, button):focus:not(:focus-visible) {
  outline: none;
}

/* --- 視差効果を減らす設定がされている場合はアニメーションを無効化する --- */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after,
  ::backdrop {
    background-attachment: scroll !important;
    transition-delay: 0s !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 基本スタイル ===== */
/* ----- 各HTML要素の基本のスタイルを記述 ----- */
html {
  font-size: 100%;
  /* ページ内ジャンプ時にスムーズにスクロール */
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  margin: 0;
  padding: 0;
  /* スクロール時にヘッダーの高さでコンテンツが隠れないようにする */
  scroll-padding-top: var(--scroll-padding);
  /* スティッキーフッター用の準備 */
  height: 100%;
  word-break: normal;
}

body {
  font-family: "Helvetica", "Hiragino Sans", "Yu Gothic", "メイリオ", "MS PGothic", sans-serif;
  color: var(--textColor);
  /* overflow-x: hidden; *//* 最後に適用する */
}

/* --- ヘッダー分の余白を確保 --- */
main {
  padding-top: var(--headerHeight);
}

ul, ol, dl {
  padding: 0;
  list-style: none;
}

dl {
  margin: 0;
}

a {
  color: var(--textColor);
  text-decoration: none;
  position: relative;
}

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

iframe {
  width: 100%;
}

/* フォントの設定（見出し、strong要素）
-------------------------------------*/
h1 {
  font-weight: 600;
}

h2 {
  font-weight: 400;
}

h3 {
  font-weight: 500;
}

strong {
  font-weight: 600;
}

/* レイアウト
---------------------------- */
/* スティッキーフッター用の設定 */
body > footer {
  position: sticky;
  top: 100vh; /* dvh非対応のブラウザ用のフォールバック */
  top: 100dvh;
}

/* --- 直下の子要素に矢印を持つ要素を、矢印の配置の基準にする --- */
*:has(> .chevron--right),
*:has(> .chevron--down) {
  position: relative;
}

.page-title {
  font-size: 2.2rem;
  font-weight: 300;
  background: var(--accent-color-main);
  color: var(--bg-color);
  padding: 0.57em 0;
  margin: 0 0 1.2rem;
}

section {
  margin-top: 1.87rem;
}

section:first-child {
  margin-top: 0;
}

.section-title {
  font-size: 1.75rem;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
  padding: 1.13em 0;
}

.section-title:has(ruby) {
  padding-top: 1.2em;
}

.margin-0 {
  margin: 0;
}

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

.align-right {
  text-align: right;
}

.align-justify {
  text-align: justify;
}

.wrapper {
  max-width:1200px;
  margin-inline: auto;
  padding: 0 10px;
}

.table {
  display: table;
  border-collapse:collapse; /* 隣接する要素のborderを共有 */
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.table_centralize {
  margin-inline: auto;
}

.width800 {
  max-width: 800px;
  margin-inline: auto;
}

.width640 {
  max-width: 640px;
  margin-inline: auto;
}

.paddingLR {
  padding: 0 1rem;
}

.visually-hidden {
  /* 不透明度0 */
    filter: alpha(opacity=0);
    -moz-opacity:0;
    opacity:0;
    /* ブラウザのデフォルトのスタイルを削除 */
    -webkit-appearance: none;
    appearance: none;
    /* レイアウトから無視 */
    position: absolute;
}

.space {
  margin-left: .3em
}

.line_break::after {
  content: "\A";/* 改行を示す値 */
  white-space: pre;
}

.pc_line_break::after {
  content: "\A";/* 改行を示す値 */
  white-space: pre;
}

.no-new-line {
  white-space: pre;
}

.wbr_text {
  overflow-wrap: break-word;
  word-break: keep-all;
}