@charset "utf-8";
/* ==================================================
汎用
================================================== */
/* --- リンクアイコン --- */
.linkIcon {
  --icon: url(/common_v2/images/icon/icon_arrow.svg);
  --iconColor: var(--colorBlue);
  --iconWidth: 1em;
  --iconHeight: 1em;
  width: var(--iconWidth);
  height: var(--iconHeight);
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  top: .1em;
  margin: 0 8px;
}
.linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background: var(--iconColor);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--icon);
}
/* - オプション - */
/* アイコン種類 */
.linkIcon-arrow { --icon: url(/common_v2/images/icon/icon_arrow.svg); }
.linkIcon-blank { --icon: url(/common_v2/images/icon/icon_blank.svg); }
.linkIcon-download { --icon: url(/common_v2/images/icon/icon_download.svg); }
/* PDFは色変更 */
.linkIcon-pdf {
  --icon: url(/common_v2/images/icon/icon_pdf.svg);
  --iconColor: var(--colorRed);
}
/* 色 */
.linkIcon-red { --iconColor: var(--colorRed); }
.linkIcon-white { --iconColor: #fff; }


/* ==================================================
スライダー
================================================== */
.uniSwiper {
  /* スライド間の余白 */
  --slideGap: var(--cntPaddingX);
  /* プラグインのスタイル */
  --swiper-navigation-size: 40px;
  --swiper-navigation-sides-offset: 0px;
  --swiper-pagination-color: var(--colorRed);
  --swiper-pagination-bullet-size: 10px;
  --swiper-pagination-bullet-horizontal-gap: 0px;
  --swiper-pagination-bullet-inactive-color: #ccc;
  --swiper-pagination-bullet-inactive-opacity: 1;
  margin-top: var(--spaceLarge);
  position: relative;
}
.uniSwiper:first-child { margin-top: 0; }
.uniSwiper .swiper {
  margin: 0 calc(var(--slideGap) * -.5);
}
.uniSwiper .swiper-slide {
  height: auto;
  padding: 0 calc(var(--slideGap) * .5);
  display: flex;
}
/* --- コントロール --- */
.uniSwiper_controls {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
/* - ページネーション - */
.uniSwiper_controls .uniSwiper_pagination {
  width: auto;
  position: static;
}
.uniSwiper_pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* - 矢印 - */
.uniSwiper_controls .uniSwiper_arrow {
  margin: 0;
  padding: 0;
}
.uniSwiper_arrow {
  --icon: url(/common_v2/images/icon/icon_chevron.svg);
  --iconColor: var(--colorBlue);
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  background-color: #fff;
  border: 1px solid var(--colorBlue);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transBg);
}
.uniSwiper_arrow::before {
  content: '';
  width: 24px;
  aspect-ratio: 1/1;
  background-color: var(--iconColor);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--icon);
  transition: var(--transBg);
}
/* 戻るボタン */
.uniSwiper_arrow.swiper-button-prev {
  transform: scale(-1, 1);
}
/* パターン2 */
.uniSwiper_arrow-type2 {
  --iconColor: #fff;
  --swiper-navigation-size: 48px;
  --swiper-navigation-top-offset: calc(50% - 10px);
  width: 36px;
  position: absolute;
  background-color: var(--colorBlue);
  border: none;
  border-radius: 16px 0 0 16px;
  transition: var(--transOpac);
}
.uniSwiper_arrow-type2::before {
  width: 32px;
}
/* - 再生 / 停止ボタン - */
.uniSwiper_autoplayBtn {
  --icon: url(/common_v2/images/icon/swiper_stop.svg);
  --iconColor: #333;
  width: 12px;
  height: 12px;
  transition: var(--transOpac);
}
.uniSwiper_autoplayBtn::before {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--iconColor);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--icon);
}
/* 停止時 */
.uniSwiper_autoplayBtn.is-paused {
  --icon: url(/common_v2/images/icon/swiper_start.svg);
}
/* スライダー化しなかった場合 */
.uniSwiper-disabled .uniSwiper_controls,
.uniSwiper-disabled .uniSwiper_arrow {
  display: none;
}


/* ==================================================
横スクロール
================================================== */
.scrollX-sp {
  width: 100%;
  position: relative;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
}
.scrollX-sp::-webkit-scrollbar {
  display: none;
}
.scrollX-sp.is-dragging {
  cursor: grabbing;
}
.scrollX-sp.is-dragging * {
  pointer-events: none;
  user-select: none;
}
.scrollX_inner {
  width: 710px;
  min-width: 100%;
}
.scrollX_overlay,
.scrollX_btn {
  transition: var(--transOpac);
}
.scrollX_overlay.is-fadeOut,
.scrollX_btn.is-fadeOut {
  opacity: 0;
}
.scrollX_overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: #000;
  opacity: .7;
  pointer-events: none;
}
.scrollX_btn {
  padding-top: 64px;
  position: absolute;
  left: 50%;
  top: 70px;
  z-index: 11;
  transform: translateX(-50%);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
.scrollX_btn::before {
  content: '';
  width: 55px;
  height: 64px;
  margin: auto;
  position: absolute;
  top: 0;
  left: -8px;
  right: 0;
  background: url(/common_v2/images/icon/icon_swipe.svg) no-repeat center center / contain;
  animation: swipeAnime 1.5s ease-in-out infinite;
}
@keyframes swipeAnime {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
/* --- fir --- */
.scrollX-sp.is-fit {
  overflow-x: visible;
}
.scrollX-sp.is-fit .scrollX_inner {
  width: auto;
}
.scrollX_toggle {
  width: 200px;
  margin-bottom: 8px;
  padding: 4px;
  position: sticky;
  left: 0;
  z-index: 1;
  border: 1px solid var(--colorBlue);
}


/* ==================================================
spのみ画像拡大
================================================== */
.imgOpen_wrap {
  text-decoration: none;
}
.imgOpen_btnWrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.imgOpen_btn {
  padding: 12px 20px;
  color: var(--colorBlue);
  line-height: 1;
  background-color: #fff;
  border: 1px solid var(--colorBlue);
  border-radius: 40px;
}


/* ==================================================
汎用アコーディオン
================================================== */
/* --- レイアウト部分 --- */
.acd {
  --acdBtn: flex;
  --acdColor: var(--colorBlue);
  --acdBg: #fff;
  --acdBorder: var(--colorBlue);
  --acdIcon: url(/common_v2/images/icon/acd_open.svg);
  --acdIconSize: 24px;
  border: 1px solid var(--acdBorder);
  border-radius: 8px;
  margin-top: 32px;
  overflow: hidden;
}
.acd:first-child { margin-top: 0; }
.acd + .acd { margin-top: 16px; }
/* --- ボタン --- */
.acd_btn {
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  display: var(--acdBtn);
  align-items: center;
  gap: 8px;
  position: relative;
  color: var(--acdColor);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
  background-color: var(--acdBg);
  transition:
    var(--transColor),
    var(--transBg);
}
.acd_btn_main {
  width: 100%;
}
/* - QA用 - */
.acd_btn_qa {
  --qaIcon: url(/common_v2/images/icon/acd_q.svg);
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  color: var(--acdColor);
  font-size: 26px;
  font-weight: 700;
  transition: var(--transColor);
}
.acd_btn_qa::before {
  content: '';
  width: 24px;
  aspect-ratio: 1/1;
  display: block;
  background-color: var(--acdColor);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--qaIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--qaIcon);
  transition: var(--transBg);
}
.acd_box .acd_btn_qa {
  --qaIcon: url(/common_v2/images/icon/acd_a.svg);
  --acdColor: var(--colorRed);
}
/* - ボタン先頭アイコン - */
.acd_btn_leadIcon {
  --svgIconColor: var(--acdColor);
  width: var(--acdIconSize);
  height: var(--acdIconSize);
  flex-shrink: 0;
}
/* - 開閉アイコン - */
.acd_btn_icon {
  width: var(--acdIconSize);
  height: var(--acdIconSize);
  flex-shrink: 0;
  background-color: var(--acdColor);
  border-radius: 50%;
  transition: var(--transBg);
}
.acd_btn_icon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--acdBg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--acdIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--acdIcon);
  transition: var(--transBg);
}
/* - コンテンツ - */
.acd_box {
  display: none;
  position: relative;
  background: #fff;
  border-top: 1px solid var(--acdColor);
  padding: 12px 16px;
}
.acd_box_inner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.acd_box_main {
  width: 100%;
  min-width: 0;
}
/* - 展開時 - */
.acd.is-active {
  --acdIcon: url(/common_v2/images/icon/acd_close.svg);
  --acdColor: #fff;
  --acdBg: var(--colorBlue);
}
/* - 注意喚起用アコーディオン - */
.acd-caution {
  --acdBg: var(--colorLightRed);
  --acdColor: var(--colorAlert);
  --acdBorder: var(--colorAlert);
}
.acd-caution.is-active {
  --acdColor: #fff;
  --acdBg: var(--colorAlert);
}
.acd-caution .acd_box {
  background-color: var(--colorLightRed);
}


/* ==================================================
続きを見る
================================================== */
.moreBox {
  margin-top: 24px;
}
.moreBox_body {
  overflow: hidden;
  transition: max-height .3s ease;
}
.moreBox:not(.is-active) .moreBox_body {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 60px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 60px), transparent);
}
.moreBox_btn {
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  margin: 16px auto 0;
  padding: 8px 24px;
  color: var(--colorBlue);
  background: none;
  border: 1px solid var(--colorBlue);
  border-radius: 40px;
  cursor: pointer;
}
.moreBox_btn::after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  margin: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s ease;
}
.moreBox.is-active .moreBox_btn::after {
  transform: translateY(2px) rotate(-135deg);
}
.moreBox_btn_close {
  display: none;
}
.moreBox.is-active .moreBox_btn_open {
  display: none;
}
.moreBox.is-active .moreBox_btn_close {
  display: inline;
}


/* ==================================================
Tab
================================================== */
.stdTab {
  --radius: 80px;
  --btnFontSize: 16px;
  --btnRadius: 100px;
  width: 100%;
  margin-top: 24px;
}
.stdTab:first-child { margin-top: 0; }
/* --- ボタン --- */
.stdTab_btns {
  --col: 2;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  background-color: var(--colorLightGray);
  border-radius: var(--radius);
}
.stdTab_btns:has(.stdTab_btn:nth-child(3)) {
  --radius: 16px;
  --btnRadius: 8px;
}
.stdTab_btn {
  width: calc(100% / var(--col));
  flex: 0 0 auto;
  min-height: 56px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--defColor);
  font-size: 14px;
  letter-spacing: var(--defLetterSpacing);
  text-align: center;
  text-decoration: none;
  background-color: transparent;
  border: none;
  border-radius: var(--btnRadius);
  cursor: pointer;
  transition: var(--transBg), var(--transColor);
}
.stdTab_btn.is-active {
  color: #fff;
  font-weight: 700;
  background-color: var(--colorBlue);
  pointer-events: none;
  cursor: default;
}
/* --- タブコンテンツ --- */
.stdTab_panels {
  position: relative;
  padding: 20px 0 0;
}
.stdTab_panel {
  display: none;
}
.stdTab_panel.is-active {
  display: block;
}


/* --------------------------------------------------
newsTitle, newsList
-------------------------------------------------- */
.newsTitle {
  color: var(--colorBlue);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--defLetterSpacing);
  text-align: center;
}
.newsList {
  margin: 24px auto 0;
}
.newsList:first-child { margin-top: 0; }
.newsTitle + .newsList { margin-top: 12px; }
.newsList_item {
  margin-top: 8px;
  border-bottom: 1px solid #ccc;
}
.newsList_item:first-child { margin-top: 0; }
.newsList_link {
  padding: 12px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px;
  text-decoration: none;
}
/* --- 上段 日付やラベル部分 --- */
.newsList_meta {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.newsList_date {
  margin-right: 4px;
  color: var(--defColor);
  font-size: var(--smallFontSize);
  letter-spacing: var(--defLetterSpacing);
}
.newsList_label {
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  color: var(--defColor);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
  background-color: #fff;
  border: 1px solid var(--defColor);
  border-radius: 4px;
}
.newsList_label-new {
  color: #fff;
  background-color: var(--colorRed);
  border: none;
}
/* --- 下段 お知らせタイトル部分 --- */
.newsList_text {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  color: var(--colorBlue);
  letter-spacing: var(--defLetterSpacing);
}
/* --- アイコン --- */
.newsList_icon {
  --icon: url(/common_v2/images/icon/icon_arrow.svg);
  --iconColor: var(--colorBlue);
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  position: relative;
}
.newsList_icon::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--iconColor);
  transition: var(--transBg), var(--transOpac);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--icon);
}
.newsList_icon-pdf {
  --icon: url(/common_v2/images/icon/icon_pdf.svg);
  --iconColor: var(--colorRed);
}
.newsList_icon-blank {
  --icon: url(/common_v2/images/icon/icon_blank.svg);
}


/* ==================================================
heading
================================================== */
/* --------------------------------------------------
h1
-------------------------------------------------- */
.heading1 {
  --minH: 80px;
  position: relative;
  background: var(--colorLightBlue) url(/common_v2/images/heading1_bg_item.svg) no-repeat right 8px bottom -16px / 120px auto;
}
.heading1_inner {
  width: 100%;
  min-height: var(--minH);
  margin: auto;
  padding: 20px var(--cntPaddingX);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 20px;
}
.heading1_text {
   min-width: 0;
}
.heading1_title {
  display: flex;
  flex-direction: column;
  font-weight: 700;
}
.heading1_title_main {
  margin-top: 4px;
  color: var(--colorBlue);
  font-size: var(--fontSizeH1);
  letter-spacing: var(--defLetterSpacing);
  line-height: 1.5;
}
.heading1_title_main:first-child { margin-top: 0; }
.heading1_title_sub {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
}
.heading1_title_sub:first-child { margin-top: 0; }
.heading1_lead {
  margin-top: 16px;
}
.heading1_lead:first-child { margin-top: 0; }

/* --------------------------------------------------
h2
-------------------------------------------------- */
.heading2 {
  margin: 48px auto 32px;
  color: var(--colorBlue);
  font-size: var(--fontSizeH2);
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
  line-height: 1.5;
}
.heading2:first-child { margin-top: 0; }
.heading2::after {
  content: '';
  display: block;
  border-bottom: 2px solid var(--colorBlue);
  width: 100%;
}
.heading2_text {
  display: flex;
  flex-wrap: wrap;
}
.heading2_text_main {
  border-bottom: 2px solid var(--colorRed);
  margin-bottom: -2px;
  padding-bottom: 10px;
}
.heading2_text_sub {
  flex: 1 1 100%;
  font-size: 16px;
  letter-spacing: var(--defLetterSpacing);
}

/* --------------------------------------------------
h3
-------------------------------------------------- */
.heading3 {
  margin: 32px 0 24px;
  display: flex;
  position: relative;
  color: var(--colorBlue);
  font-size: var(--fontSizeH3);
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
  line-height: 1.5;
}
.heading3:first-child { margin-top: 0; }
.heading3:has(.heading3_text_sub) {
  flex-wrap: wrap;
}
.heading3_text {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--colorBlue);
}
.heading3_text_sub {
  width: 100%;
  color: var(--defColor);
  font-size: var(--defFontSize);
}

/* --------------------------------------------------
h4
-------------------------------------------------- */
.heading4 {
  position: relative;
  margin: 24px auto 20px;
  padding-bottom: 8px;
  color: var(--colorBlue);
  font-size: var(--fontSizeH4);
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
  line-height: 1.5;
}
.heading4:first-child { margin-top: 0; }
.heading4::before {
  content: '';
  width: 48px;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--colorBlue);;
}

/* --------------------------------------------------
h5
-------------------------------------------------- */
.heading5 {
  position: relative;
  margin: 20px auto;
  color: var(--colorBlue);
  font-size: var(--fontSizeH5);
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
  line-height: 1.5;
}
.heading5:first-child { margin-top: 0; }

/* --------------------------------------------------
headingSp
-------------------------------------------------- */
.headingSp {
  --color: var(--colorBlue);
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.headingSp:first-child { margin-top: 0; }
/* --- アイコン --- */
.headingSp_icon {
  width: 56px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  background-color: var(--color);
  border-radius: 50%;
}
.headingSp_icon_label {
  font-size: 11px;
  letter-spacing: var(--defLetterSpacing);
}
.headingSp_icon_num {
  font-size: 23px;
  letter-spacing: var(--defLetterSpacing);
}
.headingSp_icon_img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* --- テキスト --- */
.headingSp_text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.headingSp_text_main {
  color: var(--color);
  font-size: var(--fontSizeH3);
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
  line-height: 1.5;
}
.headingSp_text_sub {
}
/* --- バリエーション：横並び --- */
.headingSp-horizontal {
  flex-direction: row;
  gap: 16px;
  text-align: left;
}
.headingSp-horizontal .headingSp_text {
  gap: 0;
}
/* --- カラー：赤 --- */
.headingSp-red { --color: var(--colorRed); }


/* ==================================================
catch
================================================== */
.catch {
  margin: 48px auto 0;
  color: var(--colorBlue);
  font-size: var(--fontSizeH2);
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  letter-spacing: var(--defLetterSpacing);
}
.catch:first-child { margin-top: 0; }
.catch_highlight {
  color: inherit;
  background: linear-gradient(to bottom, transparent 70%, color-mix(in srgb, var(--colorRed) 20%, transparent) 70%);
}
.catch_sub {
  display: block;
  font-size: var(--defFontSize);
}
/* - 装飾付き（＼ ／） - */
.catch_sub-deco { position: relative; padding: 0 1.3em; }
.catch_sub-deco::before,
.catch_sub-deco::after { position: absolute; bottom: 0; }
.catch_sub-deco::before { content: "＼"; left: 0; }
.catch_sub-deco::after { content: "／"; right: 0; }
.catch:has(.catch_sub-deco) {
  display: grid;
  place-content: center;
  gap: 4px;
}
/* --- 文字小さいタイプ --- */
.catch-small {
  margin-top: 32px;
  font-size: var(--fontSizeH3);
}

/* ==================================================
タグ
================================================== */
.tag {
  flex-shrink: 0;
  min-height: 28px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  background-color: var(--defColor);
}
.heading3 .tag {
  position: relative;
  top: -2px;
}
.cirList > li > .tag {
  min-height: auto;
}

/* アイコン画像 */
.tagImg {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  top: -2px;
  vertical-align: middle;
}


/* ==================================================
帯ラベル
================================================== */
.labelBar {
  flex-shrink: 0;
  min-height: 34px;
  margin-top: 12px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--defLetterSpacing);
  text-align: center;
  background-color: var(--colorBlue);
  border-radius: 4px;
}
.labelBar:first-child { margin-top: 0; }
.cirList > li > .labelBar {
  min-height: auto;
}


/* ==================================================
通常テキスト
================================================== */
.nmlText {
  margin-top: 12px;
}
.nmlText:first-child { margin-top: 0; }
.nmlText img {
  max-width: 100%;
}

/* --------------------------------------------------
テキスト小さいサイズ
-------------------------------------------------- */
.nmlText_small {
  margin-top: 8px;
  font-size: var(--smallFontSize);
}
.nmlText_small:first-child { margin-top: 0; }

/* --------------------------------------------------
テキスト大きいサイズ
-------------------------------------------------- */
.nmlText_large {
  margin-top: 16px;
  font-size: var(--largeFontSize);
}
.nmlText_large:first-child { margin-top: 0; }


/* ==================================================
小見出し
================================================== */
/* --------------------------------------------------
小見出し
-------------------------------------------------- */
.nmlTitle {
  margin: 24px 0 0;
  font-size: var(--largeFontSize);
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
}
.nmlTitle:first-child { margin-top: 0; }
.nmlTitle:last-child { margin-bottom: 0; }
.nmlTitle > .textLink { text-decoration: none; }

/* --------------------------------------------------
小見出し2
-------------------------------------------------- */
.nmlTitle2 {
  margin: 24px 0 0;
  color: var(--colorRed);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
}
.nmlTitle2:first-child { margin-top: 0; }
.nmlTitle2:last-child { margin-bottom: 0; }


/* ==================================================
List
================================================== */
/* --------------------------------------------------
通常リスト
-------------------------------------------------- */
.cirList {
  --cirColor: var(--colorBlue);
  text-indent: 0;
  margin-top: 16px;
}
.cirList:first-child { margin-top: 0; }
li > .cirList:first-of-type { margin-top: 8px; }
.cirList > li {
  position: relative;
  margin-top: 8px;
  padding-left: 16px;
}
.cirList > li:first-child { margin-top: 0; }
.cirList > li::before {
  content: '';
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  left: 0;
  top: calc(.5em * var(--defLineHeight) - 4px);
  background-color: var(--cirColor);
  border-radius: 50%;
}
/* --- カラー --- */
.cirList-red { --cirColor: var(--colorRed); }
/* fcRed時だけ特殊 */
.cirList > li.fcRed { --cirColor: var(--colorRed); }
/* --- 横並びパターン --- */
.sp_cirList-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.sp_cirList-inline > li { margin-top: 0; }

/* --------------------------------------------------
数字リスト
-------------------------------------------------- */
.numList {
  --numColor: var(--colorBlue);
  counter-reset: num1;
  text-indent: 0;
  margin-top: 16px;
}
.numList:first-child { margin-top: 0; }
li > .numList:first-of-type { margin-top: 8px; }
.numList > li {
  counter-increment: num1;
  position: relative;
  list-style-type: none;
  list-style-position: inside;
  margin-top: 8px;
  padding-left: 1.75em;
}
.numList > li:first-child { margin-top: 0; }
.numList > li::before {
  content: counter(num1) ".";
  display: marker;
  position: absolute;
  left: 0;
  top: -.05em;
  color: var(--numColor);
  font-size: 16px;
  font-weight: 700;
}
/* --- カラー --- */
.numList-red { --numColor: var(--colorRed); }
/* fcRed時だけ特殊 */
.numList > li.fcRed { --numColor: var(--colorRed); }

/* --------------------------------------------------
数字リスト2
-------------------------------------------------- */
.numList2 {
  --numColor: var(--colorBlue);
  counter-reset: num2;
  text-indent: 0;
  margin-top: 16px;
}
.numList2:first-child { margin-top: 0; }
li > .numList2:first-of-type { margin-top: 8px; }
.numList2 > li {
  counter-increment: num2;
  position: relative;
  list-style-type: none;
  list-style-position: inside;
  margin-top: 8px;
  padding-left: 2.75em;
}
.numList2 > li:first-child { margin-top: 0; }
.numList2 > li::before {
  content: "（"counter(num2)"）";
  display: marker;
  position: absolute;
  left: -.5em;
  top: 0;
  color: var(--numColor);
  font-weight: 700;
}
/* --- カラー --- */
.numList2-red { --numColor: var(--colorRed); }
/* fcRed時だけ特殊 */
.numList2 > li.fcRed { --numColor: var(--colorRed); }

/* --------------------------------------------------
チェックアイコンリスト
-------------------------------------------------- */
.checkList {
  text-align: left;
  text-indent: 0;
  margin-top: 16px;
}
.checkList:first-child { margin-top: 0; }
li > .checkList:first-of-type { margin-top: 8px; }
.checkList > li {
  position: relative;
  margin-top: 8px;
  padding-left: 1.75em;
}
.checkList > li:first-child { margin-top: 0; }
.checkList > li::before {
  content: '';
  width: 1.15em;
  aspect-ratio: 1/1;
  position: absolute;
  left: 0;
  top: calc((.5em * var(--defLineHeight)) - .5em);
  background: url(/common_v2/images/icon/list_check.svg) no-repeat center / contain;
}

/* --------------------------------------------------
注釈リスト
-------------------------------------------------- */
.noteList {
  --noteColor: var(--colorBlue);
  margin-top: 8px;
  font-size: var(--smallFontSize);
  text-align: left;
  text-indent: 0;
  letter-spacing: var(--defLetterSpacing);
}
.noteList:first-child { margin-top: 0; }
li > .noteList:first-of-type { margin-top: 8px; }
.noteList > li {
  position: relative;
  margin-top: 8px;
  padding-left: 1.75em;
}
.noteList > li:first-child { margin-top: 0; }
.noteList > li::before {
  content: "\203B";
  width: 1em;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--noteColor);
  text-align: center;
}
/* --- カラー --- */
.noteList-red { --noteColor: var(--colorRed); }
.noteList-white { --noteColor: #fff; }
/* fcRed時だけ特殊 */
.noteList > li.fcRed { --noteColor: var(--colorRed); }
/* 右寄せ */
.noteList-right {
  display: grid;
  justify-content: end;
}

/* --------------------------------------------------
注釈リスト（数字）
-------------------------------------------------- */
.noteNumList {
  --noteNumColor: var(--colorBlue);
  counter-reset: noteNum;
  margin-top: 8px;
  font-size: var(--smallFontSize);
  text-align: left;
  text-indent: 0;
  letter-spacing: var(--defLetterSpacing);
}
.noteNumList:first-child { margin-top: 0; }
li > .noteNumList:first-of-type { margin-top: 8px; }
.noteNumList > li {
  counter-increment: noteNum;
  position: relative;
  margin-top: 8px;
  padding-left: 2.75em;
}
.noteNumList > li:first-child { margin-top: 0; }
.noteNumList > li::before {
  content: "\203B"counter(noteNum);
  width: 2.5em;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--noteNumColor);
}
/* --- カラー --- */
.noteNumList-red { --noteNumColor: var(--colorRed); }
/* fcRed時だけ特殊 */
.noteNumList > li.fcRed { --noteNumColor: var(--colorRed); }
/* 右寄せ */
.noteNumList-right {
  display: grid;
  justify-content: end;
}

/* --------------------------------------------------
アイコン無しリスト
例：テキストリンク縦積時に使用
-------------------------------------------------- */
.plainList {
  text-indent: 0;
  margin-top: 16px;
}
.plainList:first-child { margin-top: 0; }
li > .plainList:first-of-type { margin-top: 8px; }
.plainList > li + li { margin-top: 8px; }

/* --------------------------------------------------
定義リスト
-------------------------------------------------- */
.nmlDList {
  --dlGap: 8px;
  --dtColor: var(--colorBlue);
  margin-top: 24px;
}
.nmlDList:first-child { margin-top: 0; }
.nmlDList > dt {
  color: var(--dtColor);
  font-size: 16px;
  font-weight: 700;
}
.nmlDList > dt:not(:first-child) { margin-top: var(--dlGap); }
.nmlDList > dt > a { color: inherit; }
.nmlDList > dd {
  margin-top: calc(var(--dlGap) * .5);
  padding-bottom: calc(var(--dlGap) - 4px);
  border-bottom: 1px solid #ccc;
}
.nmlDList-borderNone > dd,
.nmlDList > dd.borderNone {
  border-bottom: none;
  padding-bottom: 0;
}
/* --- 文字サイズ（小） --- */
.nmlDList-small {
  --dlGap: 8px;
  --defFontSize: 14px;
  margin-top: 12px;
}
.nmlDList-small > dt,
.nmlDList-small > dd {
  font-size: var(--defFontSize);
}
/* --- 文字色デフォルト、下線無し --- */
.nmlDList-simple {
  --dtColor: var(--defColor);
}
.nmlDList-simple > dd {
  border-bottom: none;
  padding-bottom: 0;
}
/* --- カラー --- */
.nmlDList-red { --dtColor: var(--colorRed); }
/* --- QAパターン --- */
.nmlDList-qa {
  --dlGap: 16px;
}
.nmlDList-qa > dt {
  --qaColor: var(--colorBlue);
  --qaIcon: url(/common_v2/images/icon/acd_q.svg);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nmlDList-qa > dd {
  --qaColor: var(--colorRed);
  --qaIcon: url(/common_v2/images/icon/acd_a.svg);
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: var(--dlGap);
}
.nmlDList_qaIcon {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  color: var(--qaColor);
  font-size: 26px;
  font-weight: 700;
  transition: var(--transColor);
}
.nmlDList_qaIcon::before {
  content: '';
  width: 24px;
  aspect-ratio: 1/1;
  display: block;
  background-color: var(--qaColor);

  -webkit-mask: no-repeat center / contain var(--qaIcon);
  mask: no-repeat center / contain var(--qaIcon);
  transition: var(--transBg);
}

/* --------------------------------------------------
定義リスト（横）
-------------------------------------------------- */
.floatDList {
  --dlGap: 8px;
  --bb: 1px solid #ccc;
  --pb: calc(var(--dlGap) - 4px);
  --dtColor: var(--colorBlue);
  margin-top: 24px;
}
.floatDList:first-child { margin-top: 0; }
.floatDList > dt {
  color: var(--dtColor);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: var(--dlGap);
}
.floatDList > dt:first-child { margin-top: 0; }
.floatDList > dt > a { color: inherit; }
.floatDList > dd {
  border-bottom: var(--bb);
  margin-top: calc(var(--dlGap) - 4px);
  padding-bottom: var(--pb);
}
.floatDList-borderNone,
.floatDList dd.borderNone {
  --bb: none;
  --pb: 0px;
}
/* - spでも横並び - */
.sp_floatDList-grid {
  --floatDListCol: auto;
  display: grid;
  gap: var(--dlGap) 0;
  grid-template-columns: var(--floatDListCol) 1fr;
}
.sp_floatDList-grid dt {
  border-bottom: var(--bb);
  margin-top: 0;
  padding-bottom: var(--pb);
  padding-right: 4px;
}
.sp_floatDList-grid dd {
  margin-top: 0;
  padding-left: 4px;
}
.sp_floatDList-per05 { --floatDListCol:  5%; }
.sp_floatDList-per10 { --floatDListCol: 10%; }
.sp_floatDList-per15 { --floatDListCol: 15%; }
.sp_floatDList-per20 { --floatDListCol: 20%; }
.sp_floatDList-per25 { --floatDListCol: 25%; }
.sp_floatDList-per30 { --floatDListCol: 30%; }
.sp_floatDList-per35 { --floatDListCol: 35%; }
.sp_floatDList-per40 { --floatDListCol: 40%; }
.sp_floatDList-per45 { --floatDListCol: 45%; }
.sp_floatDList-per50 { --floatDListCol: 50%; }
.sp_floatDList-per55 { --floatDListCol: 55%; }
.sp_floatDList-per60 { --floatDListCol: 60%; }
.sp_floatDList-per65 { --floatDListCol: 65%; }
.sp_floatDList-per70 { --floatDListCol: 70%; }
.sp_floatDList-per75 { --floatDListCol: 75%; }
.sp_floatDList-per80 { --floatDListCol: 80%; }
.sp_floatDList-per85 { --floatDListCol: 85%; }
.sp_floatDList-per90 { --floatDListCol: 90%; }
.sp_floatDList-per95 { --floatDListCol: 95%; }
/* --- 文字サイズ（小） --- */
.floatDList-small {
  --dlGap: 8px;
  --defFontSize: 14px;
  margin-top: 16px;
}
.floatDList-small > dt,
.floatDList-small > dd {
  font-size: var(--defFontSize);
  line-height: var(--defLineHeight);
}
/* --- 下線無し、文字色デフォルト --- */
.floatDList-simple {
  --bb: none;
  --pb: 0px;
  --dtColor: var(--defColor);
}
.floatDList-simple > dt,
.floatDList-simple > dd {
  padding: 0;
}
/* --- カラー --- */
.nmlDList-red { --dtColor: var(--colorRed); }


/* ==================================================
テーブル
================================================== */
.nmlTable {
  --paddingY: 8px;
  --paddingX: 8px;
  --tableDisplay: initial;
  width: 100%;
  margin-top: 24px;
  table-layout: fixed;
  font-size: var(--defFontSize);
  background-color: #fff;
}
.nmlTable:first-child { margin-top: 0; }
.nmlTable_wrap { margin-top: 24px; }
.nmlTable_wrap:first-child { margin-top: 0; }
.nmlTable > caption {
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
  text-align: center;
}
.nmlTable > caption img {
  vertical-align: middle;
}
/* - th & td - */
.nmlTable th,
.nmlTable td {
  vertical-align: middle;
  border: 1px solid #ccc;
  padding: var(--paddingY) var(--paddingX);
}
/* - th - */
.nmlTable th {
  color: #fff;
  font-weight: 700;
  text-align: left;
  background-color: var(--colorBlue);
}
.nmlTable th.bgLGray {
  color: var(--defColor);
}
/* thead内のth */
.nmlTable thead {
  background-color: var(--colorBlue);
}
.nmlTable thead th {
  height: 48px;
  text-align: center;
}
/* thead有り tbody内のth */
.nmlTable thead + tbody > tr > th {
  color: inherit;
  text-align: center;
  background-color: var(--colorLightGray);
}
/* thead無し tbody内のth */
.nmlTable:where(:not(:has(> thead))) :where(tbody > tr) > th {
  color: #fff;
}
/* - td - */
.nmlTable tbody td {
  min-height: 48px;
}
/* - オプション - */
/* thのテキストを左右中央 */
.nmlTable.taC tbody th { text-align: center; }
/* - sp時1カラム - */
.nmlTable.sp_col1 {
  --tableDisplay: block;
}
.nmlTable.sp_col1 th {
  height: auto;
  min-height: 48px;
  border: none;
}
/* - 小さいパターン（テーブル内にテーブルがある場合などに使用） - */
.nmlTable-small {
  --xLargeFontSize: 16px;
  --largeFontSize: 14px;
  --defFontSize: 12px;
  --paddingY: 8px;
  --paddingX: 8px;
}
.nmlTable-small thead th { height: auto; }
/* 別色グレーテーブル */
.nmlTable-type2 th {
  color: var(--defColor);
  background-color: var(--colorLightGray);
}

/* ==================================================
テーブル風リスト
================================================== */
.tableLikeList {
  --paddingY: 8px;
  --paddingX: 8px;
  --col: 1;
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.tableLikeList:first-child { margin-top: 0; }
.tableLikeList > li {
  padding: var(--paddingY) var(--paddingX);
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

/* ==================================================
ボックス
================================================== */
/* --------------------------------------------------
ボックス1
-------------------------------------------------- */
.box1 {
  --paddingY: 16px;
  --paddingX: 20px;
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--colorBlue);
  border-radius: 8px;
  padding: var(--paddingY) var(--paddingX);
}
.box1:first-child { margin-top: 0; }
.box1_head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: var(--colorRed);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
  text-align: center;
}
.box1_head-iconTop {
  flex-direction: column;
}
.box1_body {
  flex: 1 1 auto;
}
/* 色 */
.box1-red { border-color: var(--colorRed); }

/* --------------------------------------------------
ボックス2
-------------------------------------------------- */
.box2 {
  --paddingY: 16px;
  --paddingX: 20px;
  --boxColor: var(--colorLightBlue);
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-direction: column;
  background: var(--boxColor);
  border-radius: 8px;
  padding: var(--paddingY) var(--paddingX);
}
.box2:first-child { margin-top: 0; }
.box2_head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: var(--colorRed);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.box2_body {
}
/* - 色 - */
.box2-lGray {
  --boxColor: var(--colorLightGray);
}


/* ==================================================
注意喚起用ボックス
================================================== */
.cautionBox {
  --paddingY: 16px;
  --paddingX: 20px;
  margin-top: 16px;
  padding: var(--paddingY) var(--paddingX);
  display: flex;
  gap: 12px;
  flex-direction: column;
  background-color: var(--colorLightRed);
  border: 1px solid var(--colorRed);
  border-radius: 8px;
}
.cautionBox:first-child { margin-top: 0; }
.cautionBox_head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: var(--colorRed);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
  text-align: center;
}
.cautionBox_head_icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cautionBox_body {
}
.cautionBox_head-iconTop {
  flex-direction: column;
}


/* ==================================================
画像＋テキストコンポーネント
================================================== */
/* --------------------------------------------------
テキスト回り込みなし
-------------------------------------------------- */
.imgText {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.imgText:first-child { margin-top: 0; }
.imgText_img {
  position: relative;
}

/* --------------------------------------------------
テキスト回り込みあり
-------------------------------------------------- */
.imgTextFloat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.imgTextFloat:first-child { margin-top: 0; }
.imgTextFloat_img {
  position: relative;
}


/* ==================================================
吹き出しコンポーネント
================================================== */
.balloon {
  --balloonSize: 30px;
  --balloonTail: 16px;
  --balloonIconSize: 80px;
  --balloonW: 760px;
  --balloonBgColor: #fff;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  margin-top: 24px;
}
.balloon:first-child { margin-top: 0; }
.balloon_icon {
  width: var(--balloonIconSize);
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
.balloon_icon > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.balloon_body {
  flex: 0 1 calc(var(--balloonW) + var(--balloonTail));
  position: relative;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.15));
  padding-left: var(--balloonTail);
}
.balloon_body::before {
  content: '';
  width: var(--balloonSize);
  aspect-ratio: 1/1;
  position: absolute;
  top: calc((var(--balloonIconSize) * .5) - (var(--balloonSize) * .5));
  left: 0;
  background-color: var(--balloonBgColor);
  -webkit-mask-image: url(/common_v2/images/balloon/arrow.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url(/common_v2/images/balloon/arrow.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.balloon_body_inner {
  width: 100%;
  min-height: var(--balloonIconSize);
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  position: relative;
  align-items: center;
  border-radius: 16px;
  background-color: var(--balloonBgColor);
  padding: 20px;
}
/* - オプション - */
/* アイコン位置変更 */
.balloon-rev { flex-direction: row-reverse; }
.balloon-rev .balloon_body { padding-left: 0; padding-right: var(--balloonTail); }
.balloon-rev .balloon_body::before {
  left: auto;
  right: 0;
  transform: scale(-1, 1);
}


/* ==================================================
パネルコンポーネント
================================================== */
.panel {
  --gapY: 24px;
  --gapX: 8px;
  --col: 1;
  --paddingY: 20px;
  --paddingX: 20px;
  min-width: 100%;
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
}
.panel:first-child { margin-top: 0; }
.panel + .panel { margin-top: var(--gapY); }
.panel_item {
  /* リンクパターン時のcss変数 */
  --linkIcon: url(/common_v2/images/icon/icon_chevron.svg);
  --linkIconColor: #fff;
  --linkIconBg: var(--colorBlue);
  --linkIconSize: 24px;
  width: calc((100% - var(--gapX) * (var(--col) - 1)) / var(--col));
  flex: 0 0 auto;
}
.panel_inner {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
}
/* モーダルトリガー（button）：UA既定の中央寄せのみ解除（他のリセットは common_pc/sp.css の button で対応済み） */
button.panel_inner {
  text-align: left;
}
.panel_img {
  aspect-ratio: 344/194;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: var(--colorLightGray);
}
.panel_img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel_img-free {
  aspect-ratio: auto;
}
.panel_body {
  padding: var(--paddingY) var(--paddingX);
  display: flex;
  flex-direction: column;
}
.panel_text_main {
  color: var(--colorRed);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
}
.panel_text_sub:not(:first-child) {
  margin-top: 8px;
}
/* --- リンクパターン --- */
a.panel_inner .panel_body,
.panel_inner[data-modalClass] .panel_body {
  padding-bottom: 20px;
}
/* --- アイコン --- */
.panel_linkIcon {
  width: var(--linkIconSize);
  aspect-ratio: 1/1;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--linkIconBg);
  border-radius: 8px 0 0 0;
  padding: 6px;
  transition: var(--transBg);
}
.panel_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--linkIconColor);
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--linkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--linkIcon);
}
/* アイコンの種類 */
.panel_linkIcon-blank { --linkIcon: url(/common_v2/images/icon/icon_blank.svg); }
.panel_linkIcon-pdf { --linkIcon: url(/common_v2/images/icon/icon_pdf.svg); }
.panel_linkIcon-anchor::after { transform: rotate(90deg); }
/* --- 画像がアイコンのパターン --- */
.panel-icon .panel_img > img {
  width: auto;
  height: 61.75%;
  object-fit: contain;
}
/* - アイコン小さいパターン - */
.panel-iconSmall .panel_img > img,
.panel-iconSmall-sp .panel_img > img {
  height: 42.25%;
}

/* ==================================================
ポイント・特徴コンポーネント
================================================== */
.point {
  --gapY: 24px;
  --gapX: 8px;
  --col: 1;
  --paddingY: 20px;
  --paddingX: 20px;
  min-width: 100%;
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
}
.point:first-child { margin-top: 0; }
.point + .point { margin-top: var(--gapY); }
.point_item {
  width: calc((100% - var(--gapX) * (var(--col) - 1)) / var(--col));
  flex: 0 0 auto;
}
.point_inner {
  width: 100%;
  height: 100%;
  position: relative;
  color: inherit;
  text-decoration: none;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
}
/* - 画像 - */
.point_img {
  aspect-ratio: 344/194;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--colorLightGray);
}
.point_img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.point_img-free {
  aspect-ratio: auto;
}
/* - アイコン部分 - */
.point_icon {
  width: 64px;
  aspect-ratio: 1/1;
  margin: -32px auto -16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  background-color: var(--colorRed);
  border-radius: 50%;
}
.point_icon_label {
  font-size: 12px;
  letter-spacing: var(--defLetterSpacing);
}
.point_icon_num {
  font-size: 25px;
  letter-spacing: var(--defLetterSpacing);
}
.point_icon_img {
  width: 100%;
  height: 100%;
}
.point_icon_img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* - テキスト部分 - */
.point_body {
  padding: var(--paddingY) var(--paddingX);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.point_text_main {
  color: var(--colorRed);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
}
.point_text_sub:not(:first-child) {
  margin-top: 8px;
}
/* --- 画像がアイコンのパターン --- */
.point-icon .point_img > img {
  width: auto;
  height: 61.75%;
  object-fit: contain;
  margin-bottom: 24px;
}
/* - アイコン小さいパターン - */
.point-iconSmall .point_img > img,
.point-iconSmall-sp .point_img > img {
  height: 42.25%;
}

/* ==================================================
ポイント・特徴コンポーネント2
================================================== */
.point2 {
  --gapY: 16px;
  --gapX: 8px;
  --col: 1;
  --iconSize: 64px;
  min-width: 100%;
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
}
.point2:first-child { margin-top: 0; }
.point2 + .point2 { margin-top: var(--gapY); }
.point2_item {
  --iconHalf: calc(var(--iconSize) * .5);
  width: calc((100% - var(--gapX) * (var(--col) - 1)) / var(--col));
  padding-top: var(--iconHalf);
  flex: 0 0 auto;
}
.point2_inner {
  width: 100%;
  height: 100%;
  padding: calc(var(--iconHalf) + 16px) 8px 20px;
  position: relative;
  background-color: #fff;
  border: 1px solid var(--colorBlue);
  border-radius: 8px;
}
/* - アイコン部分 - */
.point2_icon {
  width: var(--iconSize);
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(var(--iconHalf) * -1);
  left: 50%;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  background-color: var(--colorRed);
  border-radius: 50%;
  transform: translateX(-50%);
}
.point2_icon_label {
  font-size: 12px;
  letter-spacing: var(--defLetterSpacing);
}
.point2_icon_num {
  font-size: 22px;
  letter-spacing: var(--defLetterSpacing);
}
.point2_icon_img {
  width: 100%;
  height: 100%;
}
.point2_icon_img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 吹き出し・コメントパターン */
.point2_item:has(.point2_icon-bubble) {
  --iconSize: 40px;
}
.point2_icon-bubble {
  width: auto;
  min-width: 165px;
  height: var(--iconSize);
  aspect-ratio: auto;
  border-radius: 8px;
  padding: 4px 8px;
}
.point2_icon-bubble .point2_icon_label {
  font-size: 14px;
}
/* - テキスト部分 - */
.point2_body {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.point2_ttl {
  color: var(--colorRed);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
}
.point2_text {
  font-size: 18px;
  letter-spacing: var(--defLetterSpacing);
}
.point2_text_em {
  color: var(--colorRed);
  font-weight: 700;
}


/* ==================================================
カード型
================================================== */
.card {
  --col: 1;
  --gapX: 8px;
  --gapY: 8px;
  --marginTop: 24px;
  --minH: 98px;
  --iconSize: 56px;
  margin-top: var(--marginTop);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
}
.card:first-child { margin-top: 0; }
.card_item {
  width: calc((100% - var(--gapX) * (var(--col) - 1)) / var(--col));
}
.card_item_inner {
  width: 100%;
  height: 100%;
  min-height: var(--minH);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
/* --- アイコン --- */
.card_icon {
  width: var(--iconSize);
  height: var(--iconSize);
  flex-shrink: 0;
}
.card_icon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* - アイコンが画像ではないパターン - */
.card_icon-noImg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  background-color: var(--colorRed);
  border-radius: 50%;
}
.card_body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card_title {
  color: var(--colorRed);
  font-size: var(--largeFontSize);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--defLetterSpacing);
}
.card_text {
  line-height: 1.5;
  letter-spacing: var(--defLetterSpacing);
}
/* --- タイプ2 --- */
.card-type2 {
  --minH: initial;
}


/* ==================================================
テキストリンク
================================================== */
.textLink {
  --icon: url(/common_v2/images/icon/icon_arrow.svg);
  --iconColor: var(--colorBlue);
  --iconSize: 1em;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: calc(1em + 8px);
}
.textLink::before {
  content: '';
  width: var(--iconSize);
  height: var(--iconSize);
  display: block;
  position: absolute;
  left: 0;
  top: .5lh;
  transform: translateY(-50%);
  background-color: var(--iconColor);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--icon);
}
.textLink[href^="#"]::before {
  transform: translateY(-50%) rotate(90deg);
}


/* ==================================================
リンクボタン
================================================== */
/* --- 変数系 --- */
.nmlBtn {
  /* カラム・幅など */
  --col: 1;
  --gapY: 12px;
  --gapX: 8px;
  --marginTop: 24px;
  --btnMaxW: 100%;
  --btnMinH: 48px;
  --btnRadius: 8px;
  --btnPaddingL: 28px;
  --btnPaddingR: 28px;
  --btnItemGap: 8px;
  /* 色 */
  --btnColor: var(--colorBlue);
  --btnColor_hover: #fff;
  --btnBorderColor: var(--colorBlue);
  /* アイコン */
  --svgIconColor: var(--colorBlue);
  --svgIconPos: 12px;
  --linkIcon: url(/common_v2/images/icon/icon_arrow.svg);
  --linkIconSize: 16px;
  --linkIconPos: 12px;
}
/* --- メイン --- */
.nmlBtn {
  max-width: 100%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.5;
  text-align: center;
  margin-top: var(--marginTop);
}
.nmlBtn:first-child { margin-top: 0; }
.nmlBtn_item {
  /* ボタン色 */
  --btnIcoColor: var(--btnColor_hover);
  --btnTxtColor: var(--btnColor_hover);
  --btnBgColor: var(--btnColor);
  /* (全体幅 - gap合計) / カラム数 */
  width: calc((100% - var(--gapX) * (var(--col) - 1)) / var(--col));
  max-width: var(--btnMaxW);
  flex: 0 0 auto;
  display: flex;
  gap: var(--btnItemGap);
  flex-direction: column;
}
.nmlBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: var(--btnMinH);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--btnTxtColor);
  background: var(--btnBgColor);
  border: 2px solid var(--btnBorderColor);
  border-radius: var(--btnRadius);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.20);
  padding: 4px var(--btnPaddingR) 4px var(--btnPaddingL);
  text-decoration: none;
  cursor: pointer;
  transition:
    var(--transColor),
    var(--transBg);
}
.nmlBtn_item_inner:not(:has(.nmlBtn_icon, .nmlBtn_linkIcon)) {
  padding-left: calc(var(--btnPaddingL) * .5);
}
.nmlBtn_item_inner:not(:has(.nmlBtn_linkIcon)) {
  padding-right: calc(var(--btnPaddingR) * .5);
}
.nmlBtn_text {
  display: flex;
  gap: 0;
  flex-direction: column;
}
.nmlBtn_text_main {
}
.nmlBtn_text_main:only-child {
}
.nmlBtn_text_sub {
  font-size: var(--smallFontSize);
  letter-spacing: var(--defLetterSpacing);
  line-height: 1.2;
}
/* --- キャプション --- */
.nmlBtn_caption {
  margin: auto auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--defLetterSpacing);
  line-height: 1.2;
}
.sp_nmlBtn_caption-col {
  flex-direction: column;
}
.nmlBtn_caption + .nmlBtn_item_inner {
  height: auto;
}
.nmlBtn_caption + .nmlBtn {
  margin-top: var(--btnItemGap);
}
/* - キャプション別パターン - */
.nmlBtn_caption-typ2 {
  padding: 0 32px;
  position: relative;
  color: var(--btnColor);
}
.nmlBtn_caption-typ2::before,
.nmlBtn_caption-typ2::after {
  content: '';
  position: absolute;
  width: 30px;
  height:2px;
  bottom: 12px;
  background-color: var(--btnColor);
}
.nmlBtn_caption-typ2::before {
  left: 0;
  transform: rotate(45deg);
}
.nmlBtn_caption-typ2::after {
  right: 0;
  transform: rotate(-45deg);
}
/* --- 左側アイコン --- */
.nmlBtn_icon {
  width: 24px;
  height: 24px;
  margin: auto;
  position: absolute;
  top: 0;
  left: var(--svgIconPos);
  bottom: 0;
}
.nmlBtn_icon::after {
  background-color: var(--btnIcoColor);
  transition: var(--transBg);
}
.nmlBtn_item_inner:has(.nmlBtn_icon:not(.pc)) {
  --btnPaddingL: 36px;
  --btnPaddingR: 36px;
}
/* --- リンクアイコン --- */
.nmlBtn_linkIcon {
  width: var(--linkIconSize);
  height: var(--linkIconSize);
  margin: auto;
  position: absolute;
  top: 0;
  right: var(--linkIconPos);
  bottom: 0;
}
.nmlBtn_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--btnIcoColor);
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--linkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--linkIcon);
}
/* - アイコンの種類 - */
.nmlBtn_linkIcon-pdf { --linkIcon: url(/common_v2/images/icon/icon_pdf.svg); --linkIconSize: 20px; }
.nmlBtn_linkIcon-blank { --linkIcon: url(/common_v2/images/icon/icon_blank.svg); }
.nmlBtn_linkIcon-download { --linkIcon: url(/common_v2/images/icon/icon_download.svg); }
.nmlBtn_linkIcon-anchor::after { transform: rotate(90deg); }
/* --- コンバージョン風 --- */
.nmlBtn_item-cnv {
  --btnMinH: 56px;
  --btnRadius: 40px;
  font-weight: 700;
}
/* --- サブカラー --- */
/* 赤 */
.nmlBtn_item-red {
  --btnColor: var(--colorRed);
  --btnBorderColor: var(--colorRed);
}
/* 注意喚起 */
.nmlBtn_item-alert {
  --btnColor: var(--colorAlert);
  --btnBorderColor: var(--colorAlert);
}
/* 白 */
.nmlBtn_item-white {
  --btnColor: #fff;
  --btnColor_hover: var(--colorBlue);
  --btnBorderColor: var(--colorBlue);
}
/* --- 枠線だけ変更（特殊なパターン） --- */
.nmlBtn_item-borderWhite {
  --btnBorderColor: #fff;
}
/* --- 非活性ボタン --- */
.nmlBtn_item.is-disabled {
  --btnTxtColor: #fff;
  --btnColor: var(--colorDisabled);
  --btnBgColor: var(--colorDisabled);
  --btnBorderColor: var(--colorDisabled);

  pointer-events: none;
  user-select: none;
}
.nmlBtn_item.is-disabled .nmlBtn-linkIcon {
  display: none;
}
/* --- 選択済み --- */
.nmlBtn_item.is-selected {
  --btnTxtColor: var(--btnColor);
  --btnBgColor: var(--btnColor_hover);
  pointer-events: none;
  user-select: none;
}
.nmlBtn_item.is-selected .nmlBtn-linkIcon {
  display: none;
}


/* ==================================================
コンバージョンボタン
================================================== */
/* --- 変数用 --- */
.cnvBtn {
  /* カラム・幅など */
  --col: 1;
  --gapY: 12px;
  --gapX: 8px;
  --btnMaxW: 100%;
  /* ボタン色 */
  --btnColor: var(--colorRed);
  --btnMinH: 56px;
  /* リンクアイコン */
  --linkIcon: url(/common_v2/images/icon/icon_arrow.svg);
}
/* ----メイン---- */
.cnvBtn {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gapY) var(--gapX);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  margin-top: 24px;
}
.cnvBtn:first-child { margin-top: 0; }
.cnvBtn_item {
  width: calc((100% - var(--gapX) * (var(--col) - 1)) / var(--col));
  max-width: var(--btnMaxW);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.cnvBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: var(--btnMinH);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: #fff;
  background: var(--btnColor);
  border-radius: 40px;
  padding: 8px 28px;
  text-decoration: none;
  cursor: pointer;
}
.cnvBtn_text {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.cnvBtn_text_sub {
  font-size: 12px;
}
.cnvBtn_caption {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: var(--defFontWeight);
  line-height: 1.2;
}
/* --- 左側に置く（かもしれない）アイコン --- */
.cnvBtn_icon {
  width: 32px;
  height: 32px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 12px;
  bottom: 0;
}
.cnvBtn_icon::after {
  background-color: #fff;
}
/* --- リンクアイコン --- */
.cnvBtn_linkIcon {
  width: 16px;
  height: 16px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
}
.cnvBtn_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: #fff;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--linkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--linkIcon);
}
/* - アイコンの種類 - */
.cnvBtn_linkIcon-blank {
  --linkIcon: url(/common_v2/images/icon/icon_blank.svg);
}
/* --- 背景色有り --- */
.cnvBtn_bgFrame {
  margin: 0 var(--calcWideCnt);
  padding: 16px var(--cntPaddingX);
  background-color: var(--colorLightBlue);
}


/* ==================================================
注意喚起ボタン
================================================== */
/* --- 変数用 --- */
.cautionBtn {
  /* ボタン色 */
  --btnColor: var(--colorAlert);
  /* リンクアイコン */
  --linkIcon: url(/common_v2/images/icon/icon_arrow.svg);
}
/* ----メイン---- */
.cautionBtn {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 8px;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  margin-top: 24px;
}
.cautionBtn:first-child { margin-top: 0; }
.cautionBtn_item {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.cautionBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: #fff;
  background: var(--btnColor);
  border-radius: 8px;
  padding: 8px 32px;
  text-decoration: none;
  cursor: pointer;
}
.cautionBtn_text {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.cautionBtn_text_main {
  font-weight: 700;
}
.cautionBtn_caption {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: var(--defLineHeight);
}
/* --- 左側アイコン --- */
.cautionBtn_icon {
  width: 23px;
  height: 23px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 12px;
  bottom: 0;
}
.cautionBtn_icon::after {
  background-color: #fff;
}
/* --- リンクアイコン --- */
.cautionBtn_linkIcon {
  width: 16px;
  height: 16px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
}
.cautionBtn_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: #fff;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--linkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--linkIcon);
}
/* - アイコンの種類 - */
.cautionBtn_linkIcon-blank {
  --linkIcon: url(/common_v2/images/icon/icon_blank.svg);
}


/* ==================================================
小ボタン
================================================== */
/* --- 変数系 --- */
.smlBtn {
  /* カラム・幅など */
  --col: 1;
  --gapY: 12px;
  --gapX: 8px;
  --marginTop: 32px;
  --btnW: 200px;
  --btnMinH: 40px;
  --btnRadius: 40px;
  /* 色 */
  --btnColor: #fff;
  --btnColor_hover: var(--colorBlue);
  --btnBorderColor: var(--colorBlue);
  /* アイコン */
  --svgIconColor: var(--colorBlue);
  --linkIcon: url(/common_v2/images/icon/icon_arrow.svg);
  --linkIconSize: 16px;
}
/* --- メイン --- */
.smlBtn {
  max-width: 100%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-top: var(--marginTop);
}
.smlBtn:first-child { margin-top: 0; }
.smlBtn_item {
  /* ボタン色 */
  --btnIcoColor: var(--btnColor_hover);
  --btnTxtColor: var(--btnColor_hover);
  --btnBgColor: var(--btnColor);
  /* (全体幅 - gap合計) / カラム数 */
  width: calc((100% - var(--gapX) * (var(--col) - 1)) / var(--col));
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.smlBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: var(--btnMinH);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--btnTxtColor);
  background: var(--btnBgColor);
  border: 1px solid var(--btnBorderColor);
  border-radius: var(--btnRadius);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.20);
  padding: 8px 28px;
  text-decoration: none;
  cursor: pointer;
  transition:
    var(--transColor),
    var(--transBg);
}
.smlBtn_text {
  display: flex;
  gap: 0;
  flex-direction: column;
}
.smlBtn_text_main {
}
/* --- リンクアイコン --- */
.smlBtn_linkIcon {
  width: var(--linkIconSize);
  height: var(--linkIconSize);
  margin: auto;
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
}
.smlBtn_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--btnIcoColor);
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--linkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--linkIcon);
}
/* - アイコンの種類 - */
.smlBtn_linkIcon-pdf { --linkIcon: url(/common_v2/images/icon/icon_pdf.svg); }
.smlBtn_linkIcon-blank { --linkIcon: url(/common_v2/images/icon/icon_blank.svg); }
.smlBtn_linkIcon-download { --linkIcon: url(/common_v2/images/icon/icon_download.svg); }
.smlBtn_linkIcon-anchor::after { transform: rotate(90deg); }
/* - サブカラー - */
.smlBtn_item-red {
  --btnColor_hover: var(--colorRed);
  --btnBorderColor: var(--colorRed);
}
/* --- 非活性ボタン --- */
.smlBtn_item.is-disabled {
  --btnTxtColor: #fff;
  --btnColor: var(--colorDisabled);
  --btnBgColor: var(--colorDisabled);
  --btnBorderColor: var(--colorDisabled);

  pointer-events: none;
  user-select: none;
}
.smlBtn_item.is-disabled .smlBtn-linkIcon {
  display: none;
}
/* --- 選択済み --- */
.smlBtn_item.is-selected {
  --btnTxtColor: var(--btnColor_hover);
  --btnBgColor: var(--btnColor);
  pointer-events: none;
  user-select: none;
}
.smlBtn_item.is-selected .smlBtn-linkIcon {
  display: none;
}


/* ==================================================
ページ内アンカー
================================================== */
.anchorNav {
  --col: 2;
  --ancColor: var(--colorLightBlue);
  line-height: 1.5;
  text-align: center;
  margin-top: 64px;
}
.anchorNav:first-child { margin-top: 0; }
.anchorNav_list {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
}
.anchorNav_item {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  padding: 0 4px;
}
/* --- 左右の線 --- */
.anchorNav_item::before,
.anchorNav_item::after {
  width: 1px;
  position: absolute;
  top: 8px;
  bottom: 8px;
  background-color: #ccc;
}
/* - 左戦 - */
.anchorNav_item::before { content: ''; left: 0; }
/* - 右線 - */
.anchorNav_item::after { right: 0; }
/* - 右線の最後、折り返し - */
.anchorNav_item:last-child::after,
.anchorNav:not([class*="col"]) .anchorNav_item:nth-child(2n)::after,
.anchorNav[class*="pc_col"] .anchorNav_item:nth-child(2n)::after,
.anchorNav[class*="col1"]:not([class*="pc_col"]) .anchorNav_item::after,
.anchorNav[class*="col2"]:not([class*="pc_col"]) .anchorNav_item:nth-child(2n)::after,
.anchorNav[class*="col3"]:not([class*="pc_col"]) .anchorNav_item:nth-child(3n)::after,
.anchorNav[class*="col4"]:not([class*="pc_col"]) .anchorNav_item:nth-child(4n)::after,
.anchorNav[class*="col5"]:not([class*="pc_col"]) .anchorNav_item:nth-child(5n)::after,
.anchorNav[class*="col6"]:not([class*="pc_col"]) .anchorNav_item:nth-child(6n)::after { content: ''; }
.anchorNav_item_inner {
  width: 100%;
  height: 100%;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: inherit;
  border-radius: 8px;
  text-decoration: none;
  padding: 4px 4px 28px;
  transition: var(--transBg);
}
.anchorNav_item_inner::after {
  content: '';
  width: 14px;
  aspect-ratio: 1/1;
  margin: auto;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  background: url(/common_v2/images/icon/icon_arrow.svg) no-repeat center / contain;
  transform: rotate(90deg);
}


/* ==================================================
アイコンナビ
================================================== */
.iconNav {
  --col: 3;
  --ancColor: var(--colorLightBlue);
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  line-height: 1.5;
  text-align: center;
  margin-top: 24px;
}
.iconNav:first-child { margin-top: 0; }
.iconNav_item {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  padding: 0 4px;
}
/* --- 縦横線 --- */
.iconNav_item:not(:first-child)::before,
.iconNav_item::after {
  position: absolute;
  top: 0;
  background-color: #ccc;
}
/* --- 縦線（右） --- */
.iconNav_item::after {
  width: 1px;
  bottom: 0;
  right: 0;
}
/* - 3カラム：行末以外 - */
.iconNav:not([class*="col"]) .iconNav_item:not(:nth-child(3n))::after,
.iconNav[class*="pc_col"]:not([class*="sp_col"]):not([class~="col2"]) .iconNav_item:not(:nth-child(3n))::after { content: ''; }
/* --- 横線（上） --- */
.iconNav_item::before {
  height: 1px;
  left: 0;
}
/* - 3カラム：行頭 - */
.iconNav:not([class*="col"]) .iconNav_item:nth-child(3n+1)::before,
.iconNav[class*="pc_col"]:not([class*="sp_col"]):not([class~="col2"]) .iconNav_item:nth-child(3n+1)::before { content: ''; width: 300%; }
/* --- 2カラム --- */
/* - 横線：行頭 - */
.iconNav[class~="col2"] .iconNav_item:nth-child(2n+1)::before,
.iconNav.sp_col2 .iconNav_item:nth-child(2n+1)::before { content: ''; width: 200%; }
/* - 縦線：行末以外 - */
.iconNav[class~="col2"] .iconNav_item:nth-child(2n+1)::after,
.iconNav.sp_col2 .iconNav_item:nth-child(2n+1)::after { content: ''; }
.iconNav_item_inner {
  width: 100%;
  height: 100%;
  min-height: 142px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: inherit;
  border-radius: 8px;
  text-decoration: none;
  padding: 4px 4px;
  transition: var(--transBg);
}


/* ==================================================
お問い合わせ関連
================================================== */
/* --------------------------------------------------
電話番号
-------------------------------------------------- */
.telNumber {
  margin-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.telNumber:first-child { margin-top: 0; }
.telNumber_icon {
  width: 42px;
  height: auto;
}
.telNumber_num {
  color: var(--colorBlue);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--defLetterSpacing);
  text-decoration: none;
}
/* 電話アイコンパターン */
.telNumber_icon-tel {
  width: 28px;
  aspect-ratio: 1/1;
}
/* --------------------------------------------------
通常のお問い合わせ
-------------------------------------------------- */
.inquiry {
  margin-top: 40px;
  padding: 20px 16px;
  background-color: var(--colorLightBlue);
}
.inquiry:first-child { margin-top: 0; }
.inquiry .nmlBtn {
  --marginTop: 16px;
}
.inquiry_title {
  color: var(--colorBlue);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--defLetterSpacing);
  text-align: center;
}
.inquiry_body {
  margin: 16px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
.inquiry_body:first-child { margin-top: 0; }
.inquiry_row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.inquiry_item {
  flex: 1 1 0%;
  padding: 20px 16px;
  background-color: #fff;
  border-radius: 8px;
}
.inquiry_heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--defLetterSpacing);
}
.inquiry_subheading {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--defLetterSpacing);
  margin-top: 12px;
}
.inquiry_subheading:first-child { margin-top: 0; }
.inquiry_note {
  margin-top: 12px;
  font-size: var(--smallFontSize);
  line-height: 1.5;
  letter-spacing: var(--defLetterSpacing);
}
.inquiry_note:first-child { margin-top: 0; }
.inquiry_attention {
  margin-top: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.inquiry_note:first-child { margin-top: 0; }
/* --- 3カラムパターン --- */
.inquiry_row-3col {
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
}
.inquiry_row-3col > .inquiry_item {
  position: relative;
  border-radius: 0;
}
.inquiry_row-3col > .inquiry_item:not(:last-child)::before {
  content: '';
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  background-color: #ccc;
}

/* ==================================================
ステップコンポーネント
================================================== */
/* --------------------------------------------------
縦積み
-------------------------------------------------- */
.stepBox {
  margin-top: 24px;
}
.stepBox:first-child { margin-top: 0; }
.stepBox_item:not(:last-child)::after {
  content: '';
  width: 80px;
  height: 20px;
  margin: 0 auto 8px;
  display: block;
  background-color: #ccc;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.stepBox_item_inner {
  padding: 20px;
  position: relative;
  background-color: #fff;
  border: 1px solid var(--colorBlue);
  border-radius: 8px;
}
.stepBox_head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stepBox_head_main {
  color: var(--colorRed);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--defLetterSpacing);
}
.stepBox_icon {
  width: 48px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  background-color: var(--colorRed);
  border-radius: 50%;
}
.stepBox_icon_label {
  font-size: 10px;
  letter-spacing: var(--defLetterSpacing);
}
.stepBox_icon_num {
  font-size: 20px;
  letter-spacing: var(--defLetterSpacing);
}
.stepBox_body {
  margin-top: 12px;
}
.stepBox_body:first-child { margin-top: 0; }

/* --------------------------------------------------
横並び
-------------------------------------------------- */
.stepBox2 {
  --col: 3;
  --gapY: 24px;
  --gapX: 24px;
  --paddingY: 24px;
  --paddingX: 24px;
  --minW: auto;
  --tagSize: 32px;
  width: 100%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  margin-top: 24px;
}
.stepBox2:first-child { margin-top: 0; }
.stepBox2_wrap { margin-top: 24px; }
.stepBox2_wrap:first-child { margin-top: 0; }
.stepBox2_item {
  --tagHalf: calc(var(--tagSize) * .5);
  width: calc((100% - var(--gapX) * (var(--col) - 1)) / var(--col));
  min-width: var(--minW);
  flex: 0 0 auto;
  position: relative;
  padding-top: var(--tagHalf);
}
.stepBox2_item:not(:last-child)::after {
  content: "";
  width: 18px;
  height: 56px;
  position: absolute;
  top: calc(50% - 28px);
  left: calc(100% - 1px);
  background-color: var(--colorGray);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.stepBox2_item_inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--colorBlue);
  border-radius: 8px;
  padding: calc(var(--tagHalf) + 16px) var(--paddingX) var(--paddingY);
}
.stepBox2_head {
  display: flex;
  gap: 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--colorRed);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.stepBox2_head + .stepBox2_body {
  margin-top: 16px;
}
/* --- 追加 ステップ番号 --- */
.stepBox2_tag {
  min-width: 100px;
  height: var(--tagSize);
  padding: 4px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
  background-color: var(--colorBlue);
  border-radius: 4px;
}
.stepBox2_tag_num {
  font-size: 20px;
}
/* --- アイコン部分 --- */
.stepBox2_icon {
  width: 64px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  background-color: var(--colorRed);
  border-radius: 50%;
}
.stepBox2_icon_label {
  font-size: 12px;
  letter-spacing: var(--defLetterSpacing);
}
.stepBox2_icon_num {
  font-size: 25px;
  letter-spacing: var(--defLetterSpacing);
}
.stepBox2_icon_img {
  width: 100%;
  height: 100%;
}
.stepBox2_icon_img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* --- 各カラム用-- - */
.stepBox2.col2 .stepBox2_item:nth-child(2)::after,
.stepBox2.sp_col2 .stepBox2_item:nth-child(2)::after { content: none; }
.stepBox2.col3 .stepBox2_item:nth-child(3)::after,
.stepBox2.sp_col3 .stepBox2_item:nth-child(3)::after { content: none; }
.stepBox2.col4 .stepBox2_item:nth-child(4)::after,
.stepBox2.sp_col4 .stepBox2_item:nth-child(4)::after { content: none; }
.stepBox2.col5 .stepBox2_item:nth-child(5)::after,
.stepBox2.sp_col5 .stepBox2_item:nth-child(5)::after { content: none; }
/* - 幅成り行き - */
.stepBox2-auto .stepBox2_item {
  --itemW: auto;
}
/* - 横スクロール時 - */
.scrollX-sp .stepBox2 {
  --minW: 240px;
  flex-wrap: nowrap;
}
/* 画面幅に収まる表示/元から1カラムパターン */
.scrollX-sp.is-fit .stepBox2,
.stepBox2.sp_vertical {
  flex-direction: column;
}
.scrollX-sp.is-fit .stepBox2_item,
.stepBox2.sp_vertical .stepBox2_item {
  width: 100%;
}
.scrollX-sp.is-fit .stepBox2_item:not(:last-child)::after,
.stepBox2.sp_vertical .stepBox2_item:not(:last-child)::after {
  width: 56px;
  height: 18px;
  top: 100%;
  left: calc(50% - 28px);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}


/* ==================================================
選択式フローチャート
================================================== */
.selectChart {
  overflow: hidden;
  margin-top: 24px;
}
.selectChart:first-child { margin-top: 0; }
.selectChart_inner {}
.selectChart_item_inner {
  padding: 20px 16px;
  background: #FFF;
  border-radius: 8px;
  border: 1px solid var(--colorBlue);
}
.selectChart_item:not(:first-child)::before {
  content: '';
  width: 80px;
  height: 20px;
  display: block;
  background-color: #ccc;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  margin: 0 auto 8px;
}
.selectChart_item:not(:first-child),
.selectChart_item:not(:first-child) .selectChart_branch {
  display: none;
}
/* === オプション：フェード＋スタッキング表示 (.selectChart-fade) === */
.selectChart-fade .selectChart_item:not(:first-child)::before {
  display: none;
}
.selectChart-fade .selectChart_inner {
  position: relative;
  transition: height 0.6s ease;
  /* 枠線は inner に持たせて、ステップ切替時もその場に残るようにする */
  background: #FFF;
  border-radius: 8px;
  border: 1px solid var(--colorBlue);
  overflow: hidden;
}
.selectChart-fade .selectChart_inner .selectChart_item_inner {
  border: none;
  background: transparent;
  border-radius: 0;
}
.selectChart-fade .selectChart_inner .selectChart_item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.selectChart-fade .selectChart_inner .selectChart_item.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
/* --- head部分 --- */
.selectChart_head {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* - アイコン部分 - */
.selectChart_icon {
  width: 48px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  background-color: var(--colorRed);
  border-radius: 50%;
}
.selectChart_icon_label {
  font-size: 10px;
  letter-spacing: var(--defLetterSpacing);
}
.selectChart_icon_num {
  font-size: 20px;
  letter-spacing: var(--defLetterSpacing);
}
.selectChart_head_main {
  color: var(--colorRed);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
/* --- body部分 --- */
.selectChart_body {
  margin-top: 16px;
}
/* - 白枠部分 - */
.selectChart_dataBox {
  display: none;
  margin: 0;
}
.selectChart_dataBox_item {
  margin-top: 16px;
  padding: 20px 16px;
  background-color: var(--colorLightBlue);
  border-radius: 8px;
  display: none;
}
.selectChart_dataBox_head {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
/* === オプション：dataBox のフェード切替 (.selectChart-fade) === */
.selectChart-fade .selectChart_dataBox_item {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.selectChart-fade .selectChart_dataBox_item.is-active {
  opacity: 1;
}
/* - 一つ前に戻る／初めから ボタン - */
.selectChart_navBranch {
  display: none;
  margin-top: 16px;
}
.selectChart_navBranch.is-shown {
  display: block;
}
/* フェードモード時はopacityトランジションでフェードイン／アウト */
.selectChart-fade .selectChart_navBranch {
  transition: opacity 0.6s ease;
}
.selectChart_navBranch .smlBtn_item_inner {
  padding: 8px;
}


/* ==================================================
矢印
================================================== */
.arrow {
  --width: 80px;
  --height: 20px;
  --color: #ccc;
  width: var(--width);
  height: var(--height);
  display: block;
  margin: 24px auto;
}
.arrow:first-child { margin-top: 0; }
.arrow:last-child { margin-bottom: 0; }
.arrow::before {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
/* --- カラー --- */
.arrow-red { --color: var(--colorRed); }


/* ==================================================
フォームコンポーネント
================================================== */
.formTable {
  width: 100%;
  margin-top: 16px;
  background-color: #fff;
}
.formTable:first-child { margin-top: 0; }
.formTable th,
.formTable td {
  border: 1px solid #ccc;
  vertical-align: middle;
}
/* ---tr --- */
.formTable_row {
}
/* ---th --- */
.formTable_head {
  padding: 10px;
  color: #fff;
  background-color: var(--colorBlue);
}
.formTable_head a {
  color: inherit;
}
.formTable_head .linkIcon {
  --iconColor: currentColor;
}
.formTable_head_inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.formTable_label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
}
.formTable_tag {
  min-width: 40px;
  flex-shrink: 0;
  padding: 4px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--defLetterSpacing);
  text-align: center;
  background-color: #fff;
  border: 1px solid var(--defColor);
  border-radius: 4px;
}
.formTable_tag-required {
  color: var(--colorAlert);
  border-color: var(--colorAlert);
}
/* - サブヘッダー（郵便番号、都道府県など） - */
.formTable_head-sub {
  color: var(--defColor);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  background-color: var(--colorLightBlue);
}
/* ---td --- */
.formTable_body {
  padding: 10px;
}
.formTable_fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
/* --- セレクト --- */
.formTable_select {
  width: 100%;
  position: relative;
  display: inline-block;
}
.formTable_select::before {
  content: '';
  width: 20px;
  aspect-ratio: 1/1;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  background-color: var(--colorBlue);
  pointer-events: none;
  transform: rotate(90deg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: url(/common_v2/images/icon/icon_chevron.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: url(/common_v2/images/icon/icon_chevron.svg);
}
.formTable_select > select {
  width: 100%;
  padding: 12px 28px 12px 16px;
  line-height: 1;
  background-color: var(--colorLightGray);
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
}
/* --- ラジオボタン --- */
.formTable_radioList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-wrap: wrap;
  line-height: 1;
}
.formTable_radioList_item {
  display: flex;
}
.formTable_radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.formTable_radio input[type="radio"] {
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  border-radius: 50%;
  accent-color: var(--colorBlue);
}
/* --- チェックボックス --- */
.formTable_checkList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-wrap: wrap;
  line-height: 1;
}
.formTable_checkList_item {
  display: flex;
}
.formTable_check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.formTable_check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--colorBlue);
}
/* --- テキスト入力 --- */
.formTable_input {
  width: 100%;
  padding: 8px 16px;
  line-height: 1;
  background-color: var(--colorLightGray);
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* - 入力フィールドサイズ - */
.formTable_input-zip1 { width: 75px; }
.formTable_input-zip2 { width: 85px; }
.formTable_input-tel:first-of-type { width: 80%; }
/* --- テキストエリア --- */
.formTable_textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px 16px;
  line-height: 1.5;
  background-color: var(--colorLightGray);
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
/* --- お問い合わせセット --- */
/* -入力グループ（横並び） - */
.formTable_inputGroup {
  display: flex;
  align-items: center;
  gap: 8px;
}
.formTable_inputGroup .formTable_input,
.formTable_inputGroup .formTable_select {
  min-width: 0;
  flex: 1 1 0%;
}
/* - ハイフン - */
.formTable_hyphen {
  line-height: 1;
}
/* - サブ行（ご住所用） - */
.formTable_subRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.formTable_subBody {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* - 都道府県検索ボタン - */
.formTable_btn {
  width: 148px;
  flex: 1 1 0%;
  min-height: 40px;
  padding: 4px 12px;
  color: var(--colorBlue);
  background-color: #fff;
  border: 1px solid var(--colorBlue);
  border-radius: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: var(--transOpac);
}
.formTable_btn:hover {
  opacity: var(--hoverOpac);
}
/* --- エラー表示 --- */
.formTable_error {
  margin-top: 8px;
  color: var(--colorRed);
  font-size: var(--smallFontSize);
  line-height: 1;
}
.formTable_fieldset:is(.is-error, [aria-invalid="true"]),
.formTable_fieldset:is(.is-error, [aria-invalid="true"]) {
  background-color: var(--colorLightRed);
  border-radius: 4px;
  box-shadow:
    0 0 0 4px var(--colorLightRed),
    0 0 0 5px var(--colorRed);
}
.formTable_input:is(.is-error, [aria-invalid="true"]),
.formTable_textarea:is(.is-error, [aria-invalid="true"]) {
  background-color: var(--colorLightRed);
  border-color: var(--colorRed);
}
.formTable_select.is-error > select,
.formTable_select:has(select[aria-invalid="true"]) > select {
  background-color: var(--colorLightRed);
  border-color: var(--colorRed);
}
/* --- 入力不可 --- */
.formTable_input.is-disabled,
.formTable_textarea.is-disabled {
  color: var(--colorDisabled);
  background-color: var(--colorGray);
  border-color: var(--colorGray);
  cursor: not-allowed;
  opacity: 0.6;
}
/* --- sp時1カラム --- */
.formTable.sp_col1 {
  --tableDisplay: block;
}
/* --- th背景色別パターン --- */
.formTable-color2 .formTable_head {
  color: inherit;
  background-color: var(--colorLightGray);
}

/* ==================================================
個人情報の取り扱いについて
================================================== */
.privacyPolicy {
  height: 200px;
  margin: 16px auto 0;
  padding: 20px;
  background-color: #fff;
  border: 1px solid var(--colorBlue);
  border-radius: 8px;
  overflow: auto;
}
.privacyPolicy:first-child { margin-top: 0; }
.privacyPolicy_title {
  color: var(--colorRed);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--defLetterSpacing);
}
.privacyPolicy_body {
  margin-top: 16px;
}
.privacyPolicy_body > p:not(:first-child) {
  margin-top: 16px;
}
/* --- 同意ボタン --- */
.agreeBox {
  margin-top: 16px;
}
.agreeBox_check {
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  background-color: var(--colorLightBlue);
}
.agreeBox_note {
  margin-top: 8px;
  line-height: 1.2;
  text-align: center;
}
.agreeBox_btnWrap {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.agreeBox_btn {
  width: 100%;
  max-width: 528px;
  min-height: 56px;
  padding: 8px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--defLetterSpacing);
  background-color: var(--colorBlue);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transBg), var(--transOpac);
}
.agreeBox_btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.agreeBox_btn_text {
  display: block;
}
.agreeBox_btn_icon {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask-image: url('/common_v2/images/icon/icon_arrow.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('/common_v2/images/icon/icon_arrow.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
/* ヒントテキスト（スクリーンリーダー用） */
.agreeBox_hint {
  font-size: 14px;
}


/* ==================================================
検索
================================================== */
.searchForm {
  width: 100%;
  margin-top: 24px;
  padding: 4px 4px 4px 12px;
  display: flex;
  align-items: center;
  background-color: var(--colorLightGray);
  border: 1px solid var(--colorGray);
  border-radius: 8px;
}
.searchForm:first-child { margin-top: 0; }
.searchForm_input {
  min-width: 0;
  height: 40px;
  flex: 1 1 0%;
  color: var(--defColor);
  font-size: 16px;
  background: transparent;
  border: none;
  outline: none;
}
.searchForm_input::placeholder {
  color: var(--colorGray);
}
.searchForm_btn {
  --icon: url(/common_v2/images/icon/icon_search.svg);
  --iconSize: 20px;
  height: 40px;
  padding: 0 16px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--colorRed);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.searchForm_btn::before {
  content: '';
  width: var(--iconSize);
  height: var(--iconSize);
  flex-shrink: 0;
  background-color: #fff;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--icon);
}
.searchForm_btn_text {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}


/* ==================================================
Video Embed
================================================== */
.video {
  width: 540px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 24px auto 0;
  position: relative;
  text-align: center;
}
.video:first-child { margin-top: 0; }
.video > iframe,
.video > video {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/* ==================================================
モーダル
================================================== */
.modal {
  --modalRadius: 8px;
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: fixed;
  inset: 0;
  z-index: 10001;
  padding: 10px;
  pointer-events: none;
}
.modal.is-active {
  display: flex;
}
.modal::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em;
}
.modal_inner {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  text-align: left;
  width: 90%;
  pointer-events: auto;
}
.modal_scroll {
  max-height: calc(90vh - 30px);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.modal_scroll::-webkit-scrollbar {
  display: none;
}
.modal_scroll_inner {
  background: #fff;
  border-radius: var(--modalRadius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 24px 10px;
}
.modal_close {
  width: 240px;
  height: 48px;
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 80px;
}
.modal_close_text {
  padding-left: 28px;
  position: relative;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.8px;
}
.modal_close_text::before {
  content: '';
  --closeIcon: url(/common_v2/images/icon/icon_close.svg);
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #333;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--closeIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--closeIcon);
}


/* ==================================================
adobeReaderGet
================================================== */
.adobeReaderGet {
  width: 100%;
  margin-top: 20px;
  background: var(--colorLightGray) url(/common_v2/images/adobe_reader_get.webp) no-repeat 20px 20px;
}
.adobeReaderGet:first-child { margin-top: 0; }
.adobeReaderGet_confirm {
  width: 100%;
  height: 100%;
  padding: 70px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: var(--transOpac);
}
.adobeReaderGet_main {
}
.adobeReaderGet_note {
  margin-top: 8px;
  font-size: var(--smallFontSize);
}


/* ==================================================
appDlBox
================================================== */
.appDlBox {
  margin-top: 16px;
  text-align: center;
}
.appDlBox:first-child { margin-top: 0; }
.appDlBox_title {
  margin-bottom: 16px;
  font-size: 18px;
}
.appDlBox_list {
  padding: 16px 12px;
  display: flex;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--colorBlue);
  border-radius: 8px;
}
.appDlBox_item {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.appDlBox_heading {
  color: var(--colorRed);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--defLetterSpacing);
}
.appDlBox_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.appDLBox_qr {
  display: none;
}
.appDLBox_storeBtn {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
}
.appDLBox_storeBtn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.appDLBox_text {
  width: 100%;
  font-size: 12px;
}


/* ==================================================
heroMv（MV共通モジュール）
使用ページ: トップ・法人トップ等
================================================== */
.heroMv {
  position: relative;
}
.heroMv_slider {
  position: relative;
}
.heroMv_slider_list {
}
.heroMv_slider_item {
  width: 100%;
  aspect-ratio: 125/88;
  position: relative;
}
.heroMv_img {
  width: 100%;
  height: 100%;
  display: block;
}
.heroMv_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* --- コンポネ上書き --- */
.heroMv .swiper {
  --slideGap: 0px;
  margin: 0;
}


/* ==================================================
バナースライダー（bnrSec／共通モジュール）
使用ページ: トップ・法人トップ等。スライドは /common_v2/inc/bnr_slider.inc を使用
================================================== */
.bnrSec {
  --secGap: 40px;
  border-top: 1px solid #d9d9d9;
}
.bnrSlider {
  --slideGap: 8px;
  position: relative;
}
.bnrSlider .swiper-slide {
  width: calc(50% + var(--slideGap));
  aspect-ratio: 163/65;
  display: block;
}
.bnrSlider img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}