@charset "utf-8";
/* ==================================================
汎用
================================================== */
/* ----- アイコン ----- */
.icon {
  --iconColor: var(--gradation01);
  width: 52px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #fff;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  background: var(--iconColor);
  border-radius: 50%;
  overflow: hidden;
}
.icon_img {
}
.icon_sub {
  font-size: 10px;
}
/* - オプション - */
/* 色 */
.icon-orange { --iconColor: var(--subColor); }
.icon-lGray { --iconColor: var(--colorLightGray); }
.icon-bgNone { --iconColor: none; }
/* 金利系で使うマイナスアイコン */
.rateMinus {
  vertical-align: middle;
  margin: 0 4px;
  padding-bottom: .1em;
}
.rateMinus2 {
  width: 1em;
  vertical-align: middle;
  margin: 0 4px;
  padding-bottom: .2em;
}

/* ----- リンクアイコン ----- */
.linkIcon {
  --linkIcon: url(/common_v3/images/icon/icon_link.svg);
  --linkIconColor: var(--mainColor);
  --linkIconWidth: .9em;
  --linkIconHeight: .9em;
  width: var(--linkIconWidth);
  height: var(--linkIconHeight);
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  top: .1em;
  margin: 0 8px;
}
.linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background: var(--linkIconColor);

  -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);
}
/* - オプション - */
/* 色 */
.linkIcon-orange { --linkIconColor: var(--subColor); }
.linkIcon-red { --linkIconColor: var(--colorRed); }
/* アイコン種類 */
.linkIcon-blank { --linkIcon: url(/common_v3/images/icon/icon_blank.svg); }
.linkIcon-down { --linkIcon: url(/common_v3/images/icon/icon_down.svg); }
.linkIcon-download { --linkIcon: url(/common_v3/images/icon/icon_download.svg); }
/* PDFはサイズ、仕様調整 */
.linkIcon-pdf {
  --linkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  width: 37px;
  height: 18px;
}

/* ----- faqアイコン ----- */
.faqIcon {
  --faqIconSize: 34px;
  flex: 0 0 auto;
  width: var(--faqIconSize);
  height: var(--faqIconSize);
  border-radius: 50%;
  color: #fff;
  font-size: var(--smallFontSize);
  font-family: "Lato", sans-serif;
  font-weight: bold;
  text-align: center;
  line-height: var(--faqIconSize);
  transition:
    var(--transColor),
    var(--transBg);
}
.faqIcon-q { background-color: var(--mainColor); }
.faqIcon-a { background-color: var(--subColor); }


/* ----- アコーディオン（共通） ----- */
.js-acd {
  --acdIconColor: var(--mainColor);
  --acdIconPos: 12px;
  overflow: hidden;
}
/* ボタン */
.js-acd_btn {
  width: 100%;
  position: relative;
  background-color: #fff;
}
/* アイコン */
.js-acd_btn_icon {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 0;
  right: var(--acdIconPos);
  bottom: 0;
  margin: auto;
}
.js-acd_btn_icon::before,
.js-acd_btn_icon::after {
  content: '';
  width: 18px;
  height: 2px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--acdIconColor);
  margin: auto;
  transition:
    var(--transBg),
    transform var(--defaultTrans);
}
.js-acd_btn_icon::before { transform: rotate(-90deg); }
/* コンテンツ */
.js-acd_box {
  display: none;
}
.js-acd_box_inner {
  width: 100%;
}
/* - 開閉 - */
.js-acd[open] > .js-acd_btn .js-acd_btn_icon::before { transform: rotate(0); }
/* ----- アコーディオン（デフォルト） ----- */
.acd {
  --defaultFontSize: 14px;
  --xLargeFontSize: 18px;
  --largeFontSize: 16px;
  --smallFontSize: 12px;
  border: 1px solid var(--mainColor);
  border-radius: 16px;
  margin-top: 28px;
  overflow: hidden;
}
.acd:first-child { margin-top: 0; }
.acd + .acd { margin-top: 20px; }
.acd .faqIcon { font-size: 16px; }
.acd_btn {
  display: flex;
  font-size: var(--largeFontSize);
  font-weight: bold;
  line-height: 1.25;
  padding: 12px;
  transition:
    var(--transColor),
    var(--transBg);
}
.acd_btn_inner {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 24px;
}
div.acd_btn > .acd_btn_inner { padding-right: 0; }
.acd_box_inner2 {
  margin-top: 24px;
}
.acd_btn_main {
}
.acd_btn_sub {
  font-size: var(--defaultFontSize);
}
.acd_box {
  position: relative;
  background: #fff;
  border-top: 1px solid var(--mainColor);
  padding: 12px 12px 20px;
}
.acd_box_inner {
  width: 100%;
}
.acd_box_inner > .faqIcon-a {
  /* QAアコーディオン内に横スクロール要素がある時崩れるので浮かせる仕様にすること */
  position: absolute;
}
.acd_box_main {
  width: 100%;
}
.faqIcon + .acd_box_main:has(> .nmlText:only-child) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.faqIcon-a + .acd_box_main {
  min-height: 34px;
  padding-left: 42px;
}
.acd_box.wideBox .faqIcon-a + .acd_box_main,
.acd_box.sp_wideBox .faqIcon-a + .acd_box_main {
  padding-left: 0;
  padding-top: 38px;
}
/* - パターン2 - */
.acd-type2 {
  --acdIconColor: #fff;
  --acdIconPos: 20px;
  border: none;
  border-radius: 0;
}
.acd-type2 .acd_btn {
  width: 100%;
  min-height: 68px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  background-color: var(--mainColor);
  border-radius: 12px;
  margin: auto;
}
.acd-type2 .acd_btn_inner {
  justify-content: center;
  padding: 0 28px;
}
.acd-type2 .acd_box {
  background: none;
  border-top: none;
  padding: 48px 0 0;
}

/* ----- 横スクロール（要素は動的生成される） ----- */
.scrollX-sp {
  width: 710px;
  min-width: 100%;
}
.scrollX_wrap {
  max-width: 100%;
  position: relative;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  margin-top: 24px;
}
.scrollX_wrap:first-child { margin-top: 0; }
.scrollX_overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .7;
}
.scrollX_btn {
  position: absolute;
  left: 50%;
  top: 70px;
  z-index: 11;
  transform: translateX(-50%);
  padding-left: 72px;
}
.scrollX_btn span {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
}
.scrollX_btn::after {
  position: absolute;
  left: 0;
  top: -20px;
  content: '';
  width: 56px;
  height: 62px;
  background: url(/common_v3/images/icon/icon_swipe.svg) no-repeat center center / contain;
  animation-name: scrollXAnime;
  animation-duration: 1.2s;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}
@keyframes scrollXAnime {
  0% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  100% { transform: translateX(-5px); }
}

/* ----- 画像拡大 ----- */
.imgOpen_wrap {
  text-decoration: none;
}
.imgOpen_btnWrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.imgOpen_btn {
  color: var(--defaultColor);
  font-size: var(--defaultFontSize);
  line-height: var(--defaultLineHeight);
  font-weight: 500;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 4px;
  padding: 4px 20px;
}

/* ----- マーカー表現 ----- */
.txtMarker {
  --markerColor: rgba(255, 153, 90, .35);
  background: linear-gradient(to top, var(--markerColor) 0, var(--markerColor) 32%, transparent 32%);
}
/* - マーカー表現色パターン - */
.txtMarker-yellow { --markerColor: #EDDD21; }
.txtMarker-red { --markerColor: var(--colorRed); }


/* ==================================================
汎用のスクロールスライダー
================================================== */
.uniSlider_slide > .point {
  --pointH: 100%;
}
.uniSlider {
  --slideWidth: 288px;
  --slideGap: 16px;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-size: 40px;
  position: relative;
  margin: 40px calc(var(--contentPaddingX) * -1) 0;
  /* padding: 0 var(--contentPaddingX); */
}
.uniSlider:first-child { margin-top: 0; }
.uniSlider_inner {
  margin: 0 calc(var(--slideGap) * -.5);
}
.uniSlider_list {
}
.uniSlider_slide {
  width: calc(var(--slideWidth) + var(--slideGap));
  height: auto;
  padding: 0 calc(var(--slideGap) * .5);
}
.uniSlider_navigation {
  --navigationColor_on: var(--mainColor);
  --navigationColor_off: #fff;
  width: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 24px auto 0;
}
.uniSlider_navigation:has(.swiper-pagination-lock) { display: none; }
.uniSlider_pagination {
  width: auto !important;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  z-index: 1;
}
.uniSlider_pagination span {
  width: 10px;
  height: 10px;
  display: block;
  background: var(--navigationColor_off);
  border: 1px solid var(--navigationColor_on);
  border-radius: 50%;
  margin: 0 !important;
  padding: 0;
  opacity: 1;
  cursor: pointer;
  transition: background-color .4s ease;
}
.uniSlider_pagination span.swiper-pagination-bullet-active {
  background: var(--navigationColor_on);
  user-select: none;
  pointer-events: none;
}
/* 再生/停止ボタン */
.uniSlider_control {
  --controlIcon: url(/common_v3/images/icon/icon_stop.svg);
  --controlIconColor: var(--mainColor);
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--navigationColor_on);
  text-align: center;
  background: transparent;
  border: 1px solid var(--navigationColor_on);
  border-radius: 50%;
  padding: 0;
  transition:
    var(--transColor),
    var(--transBg);
}
.uniSlider_control::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--controlIconColor);
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--controlIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--controlIcon);
}
.uniSlider_control.is-pause {
  --controlIcon: url(/common_v3/images/icon/icon_start.svg);
}
/* 矢印 */
.uniSlider_arrows {
  --icon: url(/common_v3/images/icon/icon_slide_arrow.svg);
  --iconW: 100%;
  --iconH: 100%;
  width: 100%;
  max-width: var(--contentWidth);
  position: absolute;
  top: calc(50% - var(--swiper-navigation-size) * .5);
}
.uniSlider_arrow {
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .5);
  transition: var(--transBg);
}
.uniSlider_arrow::after {
  content: '';
  width: var(--iconW);
  height: var(--iconH);
  display: block;

  -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);
  background-color: #fff;
}
/* アイコン違い */
.uniSlider_arrows-icon2 {
  --icon: url(/common_v3/images/icon/icon_down.svg);
  --iconW: 16px;
  --iconH: 11px;
}
.uniSlider_arrows-icon2 .swiper-button-prev { transform: rotate(90deg); }
.uniSlider_arrows-icon2 .swiper-button-next { transform: rotate(-90deg); }
/* スライドが1枚の時 */
.uniSlider_arrow.swiper-onlySlide .uniSlider_navigation {
  display: none;
}
/* - ナビ部分別パターン - */
.uniSlider-navType2 .uniSlider_navigation {
  gap: 20px;
}
.uniSlider-navType2 .uniSlider_arrow {
  --icon: url(/common_v3/images/icon/icon_down.svg);
  --iconW: 18px;
  --iconH: 12px;
  width: var(--iconW);
  height: var(--iconH);
  position: static;
  background: none;
  border-radius: 0;
  margin: 0;
  opacity: 1;
}
.uniSlider-navType2 .uniSlider_arrow::after {
  background-color: var(--mainColor);
}
.uniSlider-navType2 .swiper-button-prev { transform: rotate(90deg); }
.uniSlider-navType2 .swiper-button-next { transform: rotate(-90deg); }
/* カード部分 */
.uniSlider_card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--defaultColor);
  text-decoration: none;
  background: #fff;
  border: 1px solid #bebebe;
  border-radius: 16px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  padding: 16px;
}
.uniSlider_card_ttl {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}
.uniSlider_card_thumb {
  aspect-ratio: 75 / 41;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 12px;
  margin-top: 12px;
  overflow: hidden;
}
.uniSlider_card_thumb:first-child { margin-top: 0; }
.uniSlider_card_thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uniSlider_card_txt {
  font-size: var(--defaultFontSize);
  letter-spacing: .03em;
  margin-top: 16px;
}
/* ----- スライダー化しなかったとき ----- */
.uniSlider.is-notSlider .uniSlider_navigation {
  display: none;
}
/* ----- お金に関するお役立ちコラムスライダー ----- */
.moneySlider {
  /* --slideWidth: 100%; */
  --slideGap: 12px;
}
.moneySlider .uniSlider_card_thumb {
  aspect-ratio: 376 / 185;
  border-radius: 0;
}


/* ==================================================
heading
================================================== */
/* ----- h1 ----- */
.heading1 {
  --heading1ImgH: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  /* margin-bottom: 48px; */
  font-weight: bold;
}
.heading1_inner {
  width: 100%;
  margin: auto;
  padding: 0 var(--contentPaddingX);
}
/* 白枠部分 */
.heading1_head {
  display: flex;
  align-items: center;
  line-height: 1.25;
  padding: 20px 0;
}
.heading1_head_inner {
  min-width: 150px;
  max-width: 90%;
  display: flex;
  gap: 8px;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  padding: 12px 20px;
}
.heading1_ttl {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--mainColor);
  font-size: 24px;
  font-weight: bold;
  letter-spacing: .05em;
}
.heading1_subTtl {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .05em;
}
.heading1_ttl_icon {
  width: 40px;
  flex-shrink: 0;
}
.heading1_ttl2 {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
/* 白枠外 */
.heading1_foot {
  padding: 20px;
}
.heading1_foot .nmlBtn {
  --btnPos: flex-start;
  --nmlBtnMinH: 44px;
  --defaultFontSize: 18px;
  row-gap: 16px;
}
.heading1_foot .nmlBtn_text_sub {
  font-size: 16px;
}
.heading1_foot .nmlBtn_icon {
  left: 12px;
}
.heading1_foot .smlBtn_item {
  max-width: 100%;
}
/* 追加エリア（右側） */
.heading1_extra {
  background-color: var(--colorLightGray);
  margin: 0 calc(var(--contentPaddingX) * -1);
  padding: 24px var(--contentPaddingX);
}

/* - h1（背景画像有り） - */
.heading1-typeImg {
}
.heading1-typeImg .heading1_inner {
  position: relative;
}
.heading1-typeImg .heading1_head {
  min-height: var(--heading1ImgH);
}
.heading1_img {
  width: 100%;
  height: var(--heading1ImgH);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 0;
}
.heading1_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.heading1-imgOnly .heading1_img {
  height: auto;
  position: relative;
}

/* - h1 スライダー - */
.heading1_slider {
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-size: 40px;
  /* width: 80.3%; */
  width: 100%;
  position: relative;
  margin: auto;
  padding: 0 10%;
}
.heading1_slider_slide {
  background: #ccc;
  border-radius: 16px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
/* ページネーションや矢印などを内包している */
.heading1_slider_navigation {
  width: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
}
/* ページネーション */
.heading1_slider_pagination {
  width: auto !important;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  z-index: 1;
}
.heading1_slider_pagination span {
  width: 12px;
  height: 12px;
  display: block;
  background: #fff;
  border: 1px solid var(--mainColor);
  border-radius: 50%;
  margin: 0 !important;
  padding: 0;
  opacity: 1;
  cursor: pointer;
  transition: background-color .4s ease;
}
.heading1_slider_pagination span.swiper-pagination-bullet-active {
  background: var(--mainColor);
}
/* 再生/停止ボタン */
.heading1_slider_control {
  --controlIcon: url(/common_v3/images/icon/icon_stop.svg);
  --controlIconColor: var(--mainColor);
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--mainColor);
  text-align: center;
  background: transparent;
  border: 1px solid var(--mainColor);
  border-radius: 50%;
  padding: 0;
}
.heading1_slider_control::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--mainColor);
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--controlIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--controlIcon);
}
.heading1_slider_control.is-pause {
  --controlIcon: url(/common_v3/images/icon/icon_start.svg);
}
/* 矢印 */
.heading1_slider_arrow {
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .5);
}
.heading1_slider_arrow::after {
  width: 100%;
  height: 100%;
  font-size: 0;
  background: url(/common_v3/images/icon/icon_slide_arrow.svg) no-repeat center / contain;
}
.swiper-button-prev {
  transform: scale(-1, 1);
}
/* スライドが1枚の時 */
.heading1_slider.swiper-onlySlide .heading1_slider_navigation {
  display: none;
}

/* - h1（背景画像無し） - */
.heading1-typeTxt {
  background: #F7F7F7;
}
.heading1-typeTxt .heading1_head {
  padding: 20px 0;
}
.heading1-typeTxt .heading1_head_inner {
  width: 100%;
  max-width: 100%;
}
.heading1-typeTxt .heading1_subTtl {
  font-size: 18px;
}

/* 見出しエリアの背景色がなく、文字色が黒のパターン */
.heading1-typeBlack .heading1_head_inner {
  background: none;
  box-shadow: none;
  padding: 0;
}
.heading1-typeBlack .heading1_ttl {
  color: var(--defaultColor);
  font-size: 24px;
}


/* ----- secondView ----- */
.secondView {
  position: relative;
  padding: 24px 0 0;
}
.secondView_bg {
  --icon1Margin: 0;
  --icon2Margin: 40px 0 0 0;
  width: 100%;
  height: 430px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  background-color: var(--mainColor);
  padding: 72px 4px;
}
.secondView_bg_icon {
  width: 100px;
}
.secondView_bg_icon:nth-child(1) { margin: var(--icon1Margin); }
.secondView_bg_icon:nth-child(2) { margin: var(--icon2Margin); }
.secondView_bg-iconTop {
  --icon2Margin: 80px 0 0 0;
  padding-top: 12px;
}
.secondView_bg-iconBottom {
  --icon1Margin: 80px 0 0 0;
  --icon2Margin: 0 0 0 0;
  padding-top: 12px;
}
.secondView_inner {
  width: 100%;
  margin: auto;
  padding: 0 var(--contentPaddingX);
}
/* - 見出し部分 - */
.secondView_heading {
  --color: #fff;
  position: relative;
  display: flex;
  justify-content: center;
  color: var(--color);
  font-size: 22px;
  font-weight: bold;
  letter-spacing: .05em;
  line-height: 1.7;
  text-align: center;
  margin-top: 24px;
  padding-bottom: 22px;
}
.secondView_heading:first-child { margin-top: 0; }
.secondView_heading_txt {
  position: relative;
  padding-bottom: 8px;
}
.secondView_heading::before {
  content: '';
  width: 19px;
  height: 26px;
  position: absolute;
  left: 4px;
  right: 0;
  bottom: 0;
  background-color: var(--color);
  margin: auto;
  clip-path: polygon(calc(100% - 4px) 0, 100% 0, 4px 100%, 0 100%);
}
.secondView_heading_txt::after {
  content: '';
  height: 4px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, var(--color), var(--color) calc(50% - 5px), transparent calc(50% - 5px), transparent calc(50% + 10px), var(--color) calc(50% + 10px), var(--color));
}
.secondView_heading.fcMain,
.secondView_heading.fcGreen { --color: var(--mainColor); }
.secondView_heading_highlight {
  font-size: 40px;
  font-family: "Lato", sans-serif;
  line-height: 1;
}
.secondView_list {
  --col: 2;
  --gapY: 20px;
  --gapX: 8px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
  text-align: center;
  margin: 16px auto 0;
}
.secondView_list:first-child { margin-top: 0; }
.secondView_list .icon {
  width: 56px;
  font-size: 28px;
  margin-inline: auto;
  margin-bottom: -28px;
}
.secondView_list_item {
  --tmp1: calc(calc(var(--col) - 1) * var(--gapX));
  --tmp2: calc(100% - var(--tmp1));
  --itemWidth: calc(var(--tmp2) / var(--col));
  width: var(--itemWidth);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.secondView_list_item_inner {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
  background-color: #FDFBEB;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 16px 8px;
}
.icon + .secondView_list_item_inner { padding-top: 40px; }
.secondView_ttl {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: .05em;
}
.secondView_label {
  color: var(--mainColor);
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.25;
  border: 2px solid var(--mainColor);
  border-radius: 20px;
  margin-inline: auto;
  padding: 2px 16px;
}
.secondView_highlight {
  color: var(--mainColor);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0;
}
.secondView_highlight-large {
  font-size: 24px;
}
.secondView_highlight:only-child {
  margin: auto;
}
.secondView_txt {
  font-size: 12px;
}
.secondView_time {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
.secondView_time_highlight {
  color: var(--mainColor);
  font-size: 38px;
}
.secondView_txt2 {
  color: var(--mainColor);
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}
.secondView_txt2 > span {
  font-size: 60px;
}
.secondView_txt3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}
.secondView_linkIcon {
  content: '';
  width: 16px;
  height: 12px;
  display: block;
  background: url(/common_v3/images/icon/icon_anchor.svg) no-repeat center / contain;
  margin: auto auto -8px;
}


/* ----- sv2 ----- */
.sv2 {
  overflow: hidden;
}
.sv2_top {
  width: 100%;
  position: relative;
  background:
    url(/common_v3/images/sv2_bg_item_01.svg) no-repeat right top / 64px auto,
    url(/common_v3/images/sv2_bg_item_02.svg) no-repeat left bottom / 64px auto,
    #FDFBEB;
  padding: 32px 0 64px;
}
.sv2_top::after {
  content: '';
  width: 122px;
  height: 46px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  background: url(/common_v3/images/sv2_triangle.svg) no-repeat center / contain;
  margin: auto;
}
.sv2_btm {
  padding: 80px 0 0;
}
.sv2_top_inner,
.sv2_btm_inner {
  width: var(--contentWidth);
  margin: 0 auto;
  padding: 0 var(--contentPaddingX);
}
.sv2_heading {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.5;
  text-align: center;
}
.sv2_commentBox {
  --itemBg: transparent;
  --itemPaddingX: 0px;
  --itemPaddingY: 0px;
  margin-top: 24px;
}
.sv2_commentBox_item {
  display: flex;
  gap: var(--gapY, 20px) var(--gapX, 20px);
  flex-wrap: wrap;
  align-items: center;
  background-color: var(--itemBg);
  margin-top: 28px;
  padding: var(--itemPaddingY) var(--itemPaddingX);
}
.sv2_commentBox_item:first-child { margin-top: 0; }
.sv2_commentBox_item > .nmlBtn {
  width: 100%;
  margin-top: 0;
}
.sv2_comment_head_col {
  flex: 1 1 0%;
}
.sv2_comment_head {
  flex: 1 1 0%;
  display: flex;
  gap: 4px;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .03em;
  line-height: 1.6;
  margin-top: 8px;
}
.sv2_comment_head:first-child { margin-top: 0; }
.sv2_comment_head::before,
.sv2_comment_head::after {
  content: '';
  width: 25px;
  height: 80px;
  flex-shrink: 0;
  display: block;
  background: url(/common_v3/images/sv2_comment_item_sp.svg) no-repeat center / contain;
  margin: 0;
}
.sv2_comment_head::after { transform: rotate(180deg);}
.sv2_comment_head_link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: inherit;
  text-decoration: none;
  padding-bottom: 16px;
}
.sv2_comment_head_link::after {
  content: '';
  width: 42px;
  height: 20px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  background-color: var(--colorGray);
  margin: 0 auto;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sv2_comment_foot {
  flex-shrink: 0;
}
.sv2_comment_icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  position: relative;
  margin: auto;
}
.sv2_comment_icon::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 4px;
  left: 4px;
  background: url(/common_v3/images/sv2_comment_iconbg.svg) no-repeat center / contain;
}
.sv2_comment_icon img {
  position: relative;
}
.sv2_comment_tag {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  background-color: #fff;
  border: 1px solid var(--mainColor);
  border-radius: 28px;
  margin: 12px auto;
  padding: 4px 2px;
}
.sv2_comment_tag:first-child { margin-top: 0; }
.sv2_comment_tag:last-child { margin-bottom: 0; }
.sv2_commentBox_arrow {
  width: 100%;
  text-align: center;
}
.sv2_commentBox_arrow > img {
  width: 80px;
}
.sv2_commentBox_arrow + .catch {
  text-align: center;
  margin: 0 auto;
}
/* 奇数番目 */
.sv2_commentBox_item:nth-child(odd) .sv2_comment_head::after { content: none; }
.sv2_commentBox_item:nth-child(odd) .sv2_comment_foot { order: -1; }
/* 偶数番目 */
.sv2_commentBox_item:nth-child(even) { order: -1; justify-content: flex-end; }
.sv2_commentBox_item:nth-child(even) .sv2_comment_head { justify-content: flex-end; }
.sv2_commentBox_item:nth-child(even) .sv2_comment_head::before { content: none; }
.sv2_commentBox_item:nth-child(even) .sv2_comment_foot {  }
.sv2_commentBox_item:nth-child(even) .sv2_comment_icon::before { left: -4px; }
/* コメントが2つあるパターン */
.sv2_comment_head_col .sv2_comment_head:first-child::before { transform: scale(1, -1); }
.sv2_commentBox_item:nth-child(even) .sv2_comment_head_col { order: -1; }
.sv2_commentBox_item:nth-child(even) .sv2_comment_head_col .sv2_comment_head:last-child::after { transform: scale(-1, 1); }
/* - 背景色があるパターン - */
.sv2_commentBox-type2 {
  --gapX: 12px;
  --itemPaddingY: 24px;
  --itemPaddingX: 12px;
  column-gap: var(--gapX, 8px);
  margin-left: calc(var(--contentPaddingX) * -1);
  margin-right: calc(var(--contentPaddingX) * -1);
}
.sv2_commentBox-type2 > .sv2_commentBox_item { margin-top: 0; }
.sv2_commentBox_item-lGreen { --itemBg: var(--colorLightGreen); }
.sv2_commentBox_item-lOrange { --itemBg: var(--colorLightOrange); }
/* メッセージ部分 */
.sv2_msg {
  width: 100%;
  margin: auto;
}
.sv2_msg_head {
  display: flex;
  gap: 8px;
  padding: 0 20px;
}
.sv2_msg_human {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}
.sv2_msg_ttl {
  flex: 1 1 auto;
  display: flex;
  gap: 0;
  flex-direction: column;
  text-align: center;
  padding: 0 4px 8px;
}
.sv2_msg_ttl_sub {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mainColor);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  border: 1px solid var(--mainColor);
  border-radius: 28px;
  margin: 0 auto;
  padding: 4px 12px;
}
.sv2_msg_ttl_main {
  position: relative;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.65;
  text-align: left;
  margin: 0 auto;
}
.sv2_msg_ttl_main_txt {
  background: linear-gradient(to bottom, transparent 65%, #EDDD21 65%);
}
.sv2_msg_ttl_main_txt img {
  width: 20px;
  position: absolute;
  transform: translate(4px, -.2em);
}
.sv2_msg_foot {
  background-color: var(--mainColor);
  border-radius: 16px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  padding: 16px 12px;
}
.sv2_msg_foot_txt {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: .03em;
}


/* ----- h2 ----- */
.heading2 {
  --color: var(--defaultColor);
  --heading2BorderCont: '';
  --heading2IconSize: 56px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: var(--color);
  font-size: var(--fontSizeH2);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .05em;
  text-align: center;
  margin: 48px 0 40px;
}
.heading2:first-child { margin-top: 0px; }
.heading2:last-child { margin-bottom: 0px; }
.heading2::before,
.heading2::after {
  content: var(--heading2BorderCont);
  flex: 1 0 20px;
  height: 1px;
  display: block;
  background-color: var(--color);
}
.heading2_txt_sub {
  font-size: 18px;
}
.heading2:has(.heading2_icon) {
  position: relative;
  padding-top: calc(var(--heading2IconSize) + 12px);
}
.heading2_icon {
  width: var(--heading2IconSize);
  height: var(--heading2IconSize);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
/* - 色 - */
.heading2-white { --color: #fff; }
/* - 横線の無しパターン - */
.heading2-type2 { --heading2BorderCont: none; }

/* ----- h2（h4寄りのデザイン） ----- */
.heading2Simple {
  position: relative;
  color: var(--defaultColor);
  font-size: var(--fontSizeH2);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .05em;
  margin: 40px 0 32px;
  padding-bottom: 16px;
}
.heading2Simple:first-child { margin-top: 0; }
.heading2Simple:last-child { margin-bottom: 0; }
.heading2Simple::before {
  content: '';
  width: 80px;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--mainColor);
}

/* ----- h3 ----- */
.heading3 {
  font-size: var(--fontSizeH3);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.5;
  border-left: 4px solid var(--mainColor);
  margin: 40px 0 32px;
  padding-left: 6px;
}
.heading3:first-child { margin-top: 0px; }
.heading3:last-child { margin-bottom: 0px; }
.heading3_sub {
  font-size: 16px;
}
/* アイコンありパターン */
.heading3:has(.heading3_icon) {
  display: flex;
  align-items: center;
}
.heading3_icon {
  flex-shrink: 0;
  display: flex;
  margin-right: 8px;
}

/* ----- h4 ----- */
.heading4 {
  font-size: var(--fontSizeH3);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.5;
  margin: 32px 0 32px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mainColor);
}
.heading4:first-child { margin-top: 0px; }
.heading4:last-child { margin-bottom: 0px; }
.heading4:has(.icon) {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ----- h5 ----- */
.heading5 {
  font-weight: 500;
  font-size: var(--xLargeFontSize);
  letter-spacing: .03em;
  line-height: 1.5;
  margin: 32px 0 24px;
}
.heading5:first-child { margin-top: 0px; }
.heading5:last-child { margin-bottom: 0px; }

/* ----- 特殊見出し ----- */
.headingSp {
  text-align: center;
  margin: 24px auto 16px;
}
.headingSp:first-child { margin-top: 0; }
.headingSp:last-child { margin-bottom: 0; }
.headingSp_head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.headingSp_foot {
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  text-align: center;
  margin-top: 12px;
}
.headingSp_ttl {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: .05em;
  text-align: center;
}
.headingSp_head.jcS .headingSp_ttl { text-align: left; }
.headingSp_read {
  font-size: 16px;
  letter-spacing: .03em;
}
/* - オレンジ色 - */
.headingSp-color2 .numIcon {
  background : var(--subColor);
}
.headingSp-color2 .headingSp_text_main {
  color: var(--subColor);
}
/* 横パターン */
.headingSp-horiz {
  display: flex;
  gap: 8px;
  margin-left: 0;
}
.headingSp-horiz .headingSp_foot {
  margin-top: 0;
}
.headingSp-horiz .headingSp_ttl {
  font-size: 18px;
  text-align: left;
}

/* ----- キャッチコピー ----- */
.catch {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.5;
  text-align: center;
  margin-top: 24px;
}
.catch:first-child { margin-top: 0; }
.catch_highlight {
  color: var(--defaultColor);
  background: linear-gradient(to bottom, transparent 65%, #EDDD21 65%);
}
.catch_highlight-white {
  color: #fff;
  background: linear-gradient(transparent 70%, rgba(255,255,255,0.2)70%);
}
.catch_charge {
  font-size: 40px;
}
.catch_charge_price {
  color: var(--colorRed);
  line-height: 1;
}
.catch_charge_price > span {
  font-size: 60px;
}
.catch strong {
  color: var(--mainColor);
}
/* 斜線有りのキャッチ */
.catch-type2 {
  display: grid;
  place-content: center;
}
.catch-type2 > span {
  position: relative;
  padding: 0 1.5em;
}
.catch-type2 > span::before,
.catch-type2 > span::after {
  content: "";
  width: 1.5em;
  height: 2px;
  bottom: .6em;
  display: block;
  position: absolute;
  background-color: var(--defaultColor);
}
.catch-type2 > span::before {
  left: 0;
  transform: rotate(45deg);
}
.catch-type2 > span::after {
  right: 0;
  transform: rotate(-45deg);
}
/* - 人物イラストがあるパターン - */
.catch-type3 {
  --pT: 106px;
  --leftTrans: translateX(4px);
  --rightTrans: translateX(-4px);
  position: relative;
  padding-top: var(--pT);
}
.catch-type3:has(.icon) {
  --leftTrans: translateX(50%);
  --rightTrans: translateX(-50%);
  --pT: 40px;
}
.catch_human {
  width: 94px;
  position: absolute;
  top: 0;
}
.catch_human-l {
  right: 50%;
  transform: var(--rightTrans);
}
.catch_human-r {
  left: 50%;
  transform: var(--leftTrans);
}
/* ロゴ画像 */
.catch_logoList {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
.catch_logoList:first-child { margin-top: 0; }
.catch_logoList:last-child { margin-bottom: 0; }
.catch_logoList > li {
  width: 160px;
  display: flex;
  align-items: center;
  position: relative;
}
.catch_logoList > li::after {
  content: '';
  width: 1px;
  height: 33px;
  position: absolute;
  right: -14px;
  top: 0;
  bottom: 0;
  display: block;
  background-color: var(--defaultColor);
  margin: auto;
}
.catch_logoList > li:last-child::after { content: none; }
/* 縦型 */
.catch_logoList-vertical-sp {
  display: grid;
}
.catch_logoList.catch_logoList-vertical-sp > li {
  width: 200px;
}
.catch_logoList.catch_logoList-vertical-sp > li::after {
  width: 100%;
  height: 1px;
  left: 0;
  right: 0;
  bottom: -14px;
  top: auto;
}
.catch_flex {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 8px 0;
}
.catch_flex .catch_logoList-vertical-sp {
  margin: 0;
}

/* ==================================================
Text
================================================== */
/* ----- 通常テキスト ----- */
.nmlText {
  font-size: var(--defaultFontSize);
  margin-top: 16px;
}
.nmlText:first-child { margin-top: 0; }
.nmlText img { max-width: 100%; }
/* - 大きいサイズの通常テキスト - */
.nmlText_large {
  font-size: var(--largeFontSize);
  font-weight: bold;
  margin-top: 12px;
}
.nmlText_large:first-child { margin-top: 0; }
/* - 小さいサイズの通常テキスト - */
.nmlText_small {
  font-size: var(--smallFontSize);
  margin-top: 8px;
}
.nmlText_small:first-child { margin-top: 0; }
/* - 背景色あり - */
.nmlText_accent {
  font-weight: bold;
  text-align: center;
  background-color: var(--colorLightGreen);
  border-radius: 10px;
  margin-top: 12px;
  padding: 8px 8px;
}
.nmlText_accent:first-child { margin-top: 0; }
.nmlText_accent-green {
  color: #fff;
  background-color: var(--mainColor)
}
/* ----- 注釈テキスト ----- */
.noteText {
  position: relative;
  font-size: var(--smallFontSize);
  margin-top: 8px;
  padding-left: 1.5em;
}
.noteText:first-child { margin-top: 0; }
.noteText::before {
  content: "\203B";
  width: 1.3em;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--colorRed);
  font-weight: bold;
  text-align: center;
}
/* ----- 強調キャプション ----- */
.hlCaption {
  display: flex;
  justify-content: center;
  position: relative;
  font-size: var(--defaultFontSize);
  color: var(--mainColor);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  margin: 0 auto;
}
.hlCaption_txt {
  position: relative;
  padding: 0 20px;
}
.hlCaption_txt::before,
.hlCaption_txt::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  bottom: 8px;
  background-color: var(--mainColor);
}
.hlCaption_txt::before { left: 0; transform: rotate(45deg); }
.hlCaption_txt::after { right: 0; transform: rotate(-45deg); }

/* ----- 通常タイトル ----- */
.nmlTitle {
  font-size: var(--xLargeFontSize);
  text-align: center;
  line-height: 1.5;
  margin-top: 24px;
}
.nmlTitle:first-child { margin-top: 0; }
/* 枠線 */
.nmlTitle-type2 {
  font-weight: bold;
  text-align: center;
  border: 1px solid var(--mainColor);
  margin: 40px auto 24px;
  padding: 8px 0;
}

/* ----- バナー ----- */
.nmlBanner {
  text-align: center;
  margin-top: 24px;
}
.nmlBanner:first-child { margin-top: 0; }
.nmlBanner img { max-width: 100%; }

/* ----- 金利テキスト ----- */
.rateTtl {
  width: fit-content;
  font-size: var(--xLargeFontSize);
  font-weight: bold;
  letter-spacing: .05em;
  line-height: 1.5;
  text-align: center;
  border-bottom: 1px solid var(--mainColor);
  margin: 12px auto;
  padding-bottom: 4px;
}
.rateTtl:first-child { margin-top: 0; }
.rateLabel {
  color: var(--mainColor);
  font-weight: bold;
  font-size: var(--defaultFontSize);
  letter-spacing: 0.1em;
  line-height: 1.25;
  border: 2px solid var(--mainColor);
  border-radius: 20px;
  margin-inline: auto;
  padding: 2px 24px;
  margin: 8px auto;
}
.rateLabel:first-child { margin-top: 0; }
.rateLabel:last-child { margin-bottom: 0; }
.rateInfo {
  --strongSize: 40px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  font-size: var(--defaultFontSize);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}
.rateInfo_txt {
  position: relative;
  margin: 0;
}
.rateInfo_txt:has(.rateInfo_txt_sub) {
  padding-top: 18px;
}
.rateInfo_txt_sub {
  position: absolute;
  top: 0;
  left: -1em;
  right: -1em;
  font-size: var(--smallFontSize);
  text-align: center;
  white-space:nowrap;
}
.rateInfo_txt_main {
}
.rateInfo_txt_strong {
  color: var(--mainColor);
  font-family: var(--latoFont);
  font-weight: bold;
  font-size: var(--strongSize);
  line-height: 1.25;
}
.rateInfo_wave {
  height: calc(var(--strongSize) * 1.2); /*strongのline-heightより少し低くしている*/
  display: flex;
  align-items: center;
  margin: 0;
}
.rateInfo_arrow {
  --lineHeight: 1.25;
  font-size: var(--smallFontSize);
}
.rateInfo_arrow > span {
  width: 5.5em;
  height: calc(5em * var(--lineHeight));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  line-height: var(--lineHeight);
  background-color: var(--mainColor);
  padding-right: .5em;
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
.rateInfo_subTxt {
  width: 100%;
  display: block;
  font-size: 12px;
  font-weight: var(--defaultFontWeight);
  letter-spacing: 0;
  line-height: 1.5;
  text-align: center;
}
/* - 特定のコンポネ内でのスタイル調整 - */
.secondView .rateInfo_subTxt { margin-top: -4px; }
/* - 文字小さいパターン - */
.rateInfo-small {
  --strongSize: 34px;
}
/* - 縦パターン= */
.rateInfo-vertical,
.rateInfo-spVertical {
  gap: 0;
  flex-direction: column;
  align-items: center;
}
.rateInfo-vertical .rateInfo_wave,
.rateInfo-spVertical .rateInfo_wave {
  height: auto;
  margin: 0 auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* ----- 金利テキスト2 ----- */
.rateInfo2 {
  font-size: var(--defaultFontSize);
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.45;
}
.rateInfo2_strong {
  font-size: calc(var(--defaultFontSize) * 1.5);
}

/* ----- 金利テキスト3 ----- */
.rateInfo3 {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.45;
}
.rateInfo3_strong {
  font-size: 28px;
}

/* ----- メール ----- */
.emailTxt {
  --iconSize: 60px;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: .03em;
  line-height: 1.5;
  margin-top: 20px;
}
.emailTxt:first-child { margin-top: 0; }
.emailTxt a,
.emailTxt span {
  min-height: var(--iconSize);
  display: flex;
  align-items: center;
  background: url(/common_v3/images/icon/icon_mail.svg) no-repeat left center / var(--iconSize) auto;
  padding-left: calc(var(--iconSize) + 12px);
}
.emailTxt:not(.emailTxt-simple) {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
}
.emailTxt-small,
.emailTxt-sp_small {
  --iconSize: 40px;
}


/* ==================================================
List
================================================== */
/* ----- 通常リスト ----- */
.cirList {
  --cirColor: var(--mainColor);
  font-size: var(--defaultFontSize);
  text-indent: 0;
  margin-top: 20px;
}
.cirList:first-child { margin-top: 0; }
li > .cirList:first-of-type { margin-top: 12px; }
.cirList > li {
  position: relative;
  margin-top: 12px;
  padding-left: 1.5em;
}
.cirList > li:first-child { margin-top: 0; }
.cirList > li::before {
  content: "";
  width: .4em;
  height: .4em;
  position: absolute;
  left: .4em;
  top: calc(.4em * var(--defaultLineHeight));
  background: var(--cirColor);
  border-radius: 50%;
}
/* - オプション - */
/* 点の色 */
.cirList-orange { --cirColor: var(--subColor); }
.cirList-black { --cirColor: var(--defaultColor); }
.cirList-red { --cirColor: var(--colorRed); }
/* fcRed時だけ特殊 */
.cirList > li.fcRed::before {
  --cirColor: var(--colorRed);
}
/* ●なし */
.cirList-cirNone > li {
  padding-left: 0;
}
.cirList-cirNone > li::before {
  content: none;
}
/* 大きめ */
.cirList-large {
  font-size: 18px;
  font-weight: bold;
}
.cirList-large > li::before {
  width: 1em;
  height: 1em;
  top: calc(.2em * var(--defaultLineHeight));
}

/* ----- 数字リスト ----- */
.numList {
  --numListColor: var(--mainColor);
  counter-reset: num1;
  font-size: var(--defaultFontSize);
  text-indent: 0;
  margin-top: 20px;
}
.numList:first-child { margin-top: 0; }
li > .numList:first-of-type { margin-top: 12px; }
.numList > li {
  counter-increment: num1;
  position: relative;
  list-style-type: none;
  list-style-position: inside;
  margin-top: 12px;
  padding-left: 1.45em;
}
.numList > li:first-child { margin-top: 0; }
.numList > li::before {
  content: counter(num1) ".";
  display: marker;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--numListColor);
  font-weight: bold;
}
/* - 色 - */
.numList-orange { --numListColor: var(--subColor); }
.numList-red { --numListColor: var(--colorRed); }
.numList-black { --numListColor: var(--defaultColor); }


/* ----- 数字リスト2 ----- */
.numList2 {
  --numList2Color: var(--mainColor);
  counter-reset: num2;
  font-size: var(--defaultFontSize);
  text-indent: 0;
  margin-top: 20px;
}
.numList2:first-child { margin-top: 0; }
li > .numList2:first-of-type { margin-top: 12px; }
.numList2 > li {
  counter-increment: num2;
  position: relative;
  list-style-type: none;
  list-style-position: inside;
  margin-top: 12px;
  padding-left: 2.75em;
}
.numList2 > li:first-child { margin-top: 0; }
.numList2 > li::before {
  content: "（"counter(num2)"）";
  display: marker;
  position: absolute;
  left: -.25em;
  top: 0;
  color: var(--numList2Color);
  font-weight: bold;
  letter-spacing: -.01em;
}
/* - 色 - */
.numList2-orange { --numList2Color: var(--subColor); }
.numList2-red { --numList2Color: var(--colorRed); }
.numList2-black { --numList2Color: var(--defaultColor); }


/* ----- 数字リスト3 ①②③ ----- */
.numList3 {
  --numList3Color: var(--mainColor);
  counter-reset: num3;
  text-indent: 0;
  margin-top: 20px;
}
.numList3:first-child { margin-top: 0; }
li > .numList3:first-of-type { margin-top: 12px; }
.numList3 > li {
  counter-increment: num3;
  position: relative;
  list-style-type: none;
  list-style-position: inside;
  margin-top: 12px;
  padding-left: 1.75em;
}
.numList3 > li:first-child { margin-top: 0; }
.numList3 > li::before {
  content: counter(num3);
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--numList3Color);
  font-size: .75em;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1;
  border: 1px solid var(--numList3Color);
  border-radius: 50%;
  transform: translate(25%, 25%);
}
/* - 色 - */
.numList3-orange { --numList3Color: var(--subColor); }
.numList3-red { --numList3Color: var(--colorRed); }
.numList3-black { --numList3Color: var(--defaultColor); }


/* ----- アルファベットリスト A.B.C. ----- */
.alphaList {
  counter-reset: alpha;
  text-indent: 0;
  margin-top: 20px;
}
.alphaList:first-child { margin-top: 0; }
li > .alphaList:first-of-type { margin-top: 12px; }
.alphaList > li {
  counter-increment: alpha;
  position: relative;
  list-style-type: none;
  list-style-position: inside;
  margin-top: 12px;
  padding-left: 1.5em;
}
.alphaList > li:first-child { margin-top: 0; }
.alphaList > li::before {
  content: counter(alpha, upper-alpha)".";
  display: marker;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--defaultColor);
}


/* ----- 丸数字リスト（数字はhtml側入力「① 」） ----- */
.enclosedList {
  margin-top: 20px;
  margin-left: 1.3em;
  text-indent: -1.3em
}
.enclosedList:first-child { margin-top: 0; }
li > .enclosedList:first-of-type { margin-top: 12px; }
.enclosedList > li {
  list-style-type: none;
  margin-top: 12px;
}
.enclosedList > li:first-child { margin-top: 0; }


/* ----- チェックアイコンリスト ----- */
.checkList {
  font-size: var(--defaultFontSize);
  text-align: left;
  text-indent: 0;
  margin-top: 20px;
}
.checkList:first-child { margin-top: 0; }
li > .checkList:first-of-type { margin-top: 12px; }
.checkList > li {
  position: relative;
  margin-top: 12px;
  padding-left: 1.5em;
}
.checkList > li:first-child { margin-top: 0; }
.checkList > li::before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  position: absolute;
  left: 0;
  top: calc(.15em * var(--defaultLineHeight));
  background: url(/common_v3/images/icon/icon_check_green.svg) no-repeat center / contain;
  border-radius: 50%;
}
/* --- 大きめ --- */
.checkList-large {
  font-size: 18px;
  font-weight: bold;
}

/* ----- 注釈リスト ----- */
.noteList {
  --noteListColor: var(--colorRed);
  font-size: var(--smallFontSize);
  font-weight: var(--defaultFontWeight);
  text-align: left;
  text-indent: 0;
  margin-top: 8px;
}
.noteList:first-child { margin-top: 0; }
li > .noteList:first-of-type { margin-top: 8px; }
.noteList > li {
  position: relative;
  margin-top: 8px;
  padding-left: 1.5em;
}
.noteList > li:first-child { margin-top: 0; }
.noteList > li::before {
  content: "\203B";
  width: 1.3em;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--noteListColor);
  font-weight: bold;
  text-align: center;
}
/* - オプション - */
/* 注釈文字色 */
.noteList-green { --noteListColor: var(--mainColor); }
.noteList-white { --noteListColor: #fff; }
/* 右寄せ */
.noteList-right {
  display: grid;
  justify-content: end;
}

/* ----- 注釈リスト 数字 ----- */
.noteNumList {
  --noteNumListColor: var(--colorRed);
  counter-reset: noteNum;
  font-size: var(--smallFontSize);
  text-align: left;
  text-indent: 0;
  margin-top: 16px;
}
.noteNumList:first-child { margin-top: 0; }
li > .noteNumList:first-of-type { margin-top: 8px; }
.noteNumList > li {
  counter-increment: noteNum;
  position: relative;
  list-style-type: none;
  list-style-position: inside;
  margin-top: 8px;
  padding-left: 2em;
}
.noteNumList > li:first-child { margin-top: 0; }
.noteNumList > li::before {
  content: "\203B"counter(noteNum);
  width: 1.65em;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--noteNumListColor);
  font-weight: bold;
  letter-spacing: -.01em;
  text-align: center;
}
/* - オプション - */
/* 注釈文字色 */
.noteNumList-green { --noteNumListColor: var(--mainColor); }

/* ----- 定義リスト ----- */
.nmlDList {
  --dlGap: 24px;
  font-size: var(--defaultFontSize);
  margin-top: 32px;
}
.nmlDList:first-child { margin-top: 0; }
.nmlDList dt {
  color: var(--mainColor);
  font-size: var(--xLargeFontSize);
  font-weight: bold;
  line-height: 1.4;
}
.nmlDList dt:not(:first-child) { margin-top: var(--dlGap); }
.nmlDList dt > a { color: inherit; }
.nmlDList dd {
  border-bottom: 1px solid var(--colorGray);
  margin-top: calc(var(--dlGap) * .5);
  padding-bottom: calc(var(--dlGap) - 4px);
}
.nmlDList-borderNone > dd,
.nmlDList dd.borderNone {
  border-bottom: none;
  padding-bottom: 0;
}
/* - 文字サイズ（小） - */
.nmlDList-small {
  --dlGap: 12px;
  margin-top: 16px;
}
.nmlDList-small > dt,
.nmlDList-small > dd {
  font-size: var(--defaultFontSize);
  line-height: var(--defaultLineHeight);
}
/* 通常文字色 */
.nmlDList-defaultColor > dt {
  color: var(--defaultColor);
}
/* - 下線無し、文字サイズ（小）、文字色デフォなどの詰め込み - */
.nmlDList-simple {
  --dlGap: 12px;
  margin-top: 16px;
}
.nmlDList-simple > dt,
.nmlDList-simple > dd {
  font-size: var(--defaultFontSize);
  line-height: var(--defaultLineHeight);
}
.nmlDList-simple > dt {
  color: var(--defaultColor);
}
.nmlDList-simple > dd {
  border-bottom: none;
  padding-bottom: 0;
}

/* ----- 定義リスト（横） ----- */
.floatDList {
  --dlGap: 20px;
  --bb: 1px solid var(--colorGray);
  --pb: calc(var(--dlGap) - 4px);
  font-size: var(--defaultFontSize);
  margin-top: 32px;
}
.floatDList:first-child { margin-top: 0; }
.floatDList dt {
  color: var(--mainColor);
  font-size: var(--xLargeFontSize);
  font-weight: bold;
  line-height: 1.4;
  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;
}
/* - 文字サイズ（小） - */
.floatDList-small {
  --dlGap: 12px;
  margin-top: 16px;
}
.floatDList-small > dt {
  font-size: var(--defaultFontSize);
  line-height: var(--defaultLineHeight);
}
/* 通常文字色 */
.floatDList-defaultColor > dt {
  color: var(--defaultColor);
}
/* - 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-simple {
  --bb: none;
  --pb: 0px;
  --dlGap: 12px;
  margin-top: 16px;
}
.floatDList-simple > dt,
.floatDList-simple > dd {
  font-size: var(--defaultFontSize);
  line-height: var(--defaultLineHeight);
}
.floatDList-simple > dt {
  color: var(--defaultColor);
}
.floatDList-simple > dd { padding-left: 0; }
/* - リストをインライン化 - */
.list-inline {
  --gapY: 12px;
  --gapX: 8px;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
}
.list-inline > li {
  margin-top: 0;
}

/* ==================================================
テーブル
================================================== */
.nmlTable {
  --tableDiplay: initial;
  --tableBorderTop: initial;
  --defaultFontSize: 12px;
  --xLargeFontSize: 16px;
  --largeFontSize: 14px;
  --smallFontSize: 10px;
  --paddingY: 12px;
  --paddingX: 8px;
  width: 100%;
  table-layout: fixed;
  display: var(--tableDiplay, table);
  margin-top: 40px;
}
.nmlTable:first-child { margin-top: 0; }
.nmlTable caption {
  font-size: var(--largeFontSize);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 12px;
}
.nmlTable caption img {
  vertical-align: middle;
}
/* - th & td - */
.nmlTable th,
.nmlTable td {
  vertical-align: middle;
  border: 1px solid #DDDDDD;
  padding: var(--paddingY) var(--paddingX);
}
/* - th - */
.nmlTable th {
  color: #fff;
  font-size: var(--largeFontSize);
  font-weight: bold;
  text-align: left;
  background-color: var(--mainColor);
}
.nmlTable th.bgLGray {
  color: var(--defaultColor);
}
/* thead内のth */
.nmlTable thead th {
  height: auto;
  text-align: center;
}
/* thead有り tbody内のth */
.nmlTable thead + tbody > tr > th {
  color: inherit;
  text-align: center;
  background-color: #F2F2F2;
}
/* thead無し tbody内のth */
.nmlTable colgroup + tbody > tr > th {
  color: #fff;
}
/* - td - */
.nmlTable td {
  font-size: var(--defaultFontSize);
  background: #fff;
}
/* - sp時1カラム - */
.nmlTable.sp_col1 {
  --tableDiplay: block;
  width: 100%;
}
.nmlTable.sp_col1 th + td { border-top: none; }
/* thのテキストを左右中央 */
.nmlTable.taC tbody th { text-align: center; }
/* - 小さいパターン（テーブル内にテーブルがある場合に使用） - */
.sp_nmlTable-small {
  --defaultFontSize: 10px;
  --largeFontSize: 12px;
  --smallFontSize: 8px;
}
.nmlTable-large,
.sp_nmlTable-large {
  --defaultFontSize: 14px;
  --largeFontSize: 16px;
  --smallFontSize: 12px;
}
.nmlTable-large th,
.sp_nmlTable-large th { font-size: 16px; }
.nmlTable-large td,
.sp_nmlTable-large td { font-size: 14px; }
.nmlTable-large thead th,
.sp_nmlTable-large thead th { height: 64px; }
/* 別色グレーテーブル */
.nmlTable-type2 th {
  background-color: #6E6E6E;
}


/* ==================================================
金利のテーブル
================================================== */
.rateTable {
  --defaultFontSize: 14px;
  --paddingY: 12px;
  --paddingX: 4px;
  width: 100%;
  height: 100%;
  table-layout: fixed;
  font-size: 14px;
  text-align: center;
  margin-top: 32px;
}
.rateTable:first-child { margin-top: 0; }
.rateTable th,
.rateTable td {
  font-weight: bold;
  vertical-align: middle;
  padding: var(--paddingY) var(--paddingX);
}
/* - th - */
.rateTable th {
}
/* thead内のth */
.rateTable thead th {
  color: #fff;
}
/* tbody内のth */
.rateTable tbody th {
  background-color: var(--colorLightGray);
  border-bottom: 6px solid #fff;
}
/* - td - */
.rateTable td {
  background: #fff;
}
.rateTable td:not(.rateTable_arrow_td) {
  border-bottom: 1px dashed var(--colorGray);
}
.rateTable_txt1 {
  font-size: 20px;
}
.rateTable_arrow_td {
  --paddingX: 0px;
  --paddingY: 4px;
}
.rateTable_arrow {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background: url(/common_v3/images/bg_ratetable_arrow.svg) no-repeat center / 100% auto;
}
.rateTable_arrow .rateInfo {
  --strongSize: 32px;
}
.rateTable_arrow .rateMinus2 {
  margin: 0;
}


/* ==================================================
ボックス
================================================== */
.box1 .headingSp { margin-bottom: 0; }
/* ----- ボックス1 ----- */
.box1 {
  --boxShadow: none;
  --paddingY: 16px;
  --paddingX: 16px;
  display: flex;
  gap: 16px;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--mainColor);
  border-radius: 16px;
  box-shadow: var(--boxShadow);
  margin-top: 24px;
  padding: var(--paddingY) var(--paddingX);
}
.box1:first-child { margin-top: 0; }
.box1_head {
  display: flex;
  gap: 16px;
  align-items: center;
  color: var(--defaultColor);
  font-size: var(--xLargeFontSize);
  font-weight: bold;
}
.box1_body {
  display: flex;
  flex-direction: column;
}
.box1_body_dotTtl {
  font-weight: bold;
  font-size: 18px;
  border-top: 2px dashed var(--colorGray);
  margin-top: 24px;
  padding-top: 24px;
}
/* 色 */
.box1-gray { border-color: var(--colorGray); }
.box1-red { border-color: var(--colorRed); }

/* ----- ボックス2 ----- */
.box2 {
  --box2Color: var(--mainColor);
  margin-top: 20px;
}
.box2:first-child { margin-top: 0; }
.box2_head {
  display: flex;
  gap: 16px;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-size: var(--largeFontSize);
  font-weight: bold;
  line-height: 1.25;
  background: var(--box2Color);
  border-radius: 16px 16px 0 0;
  padding: 16px;
}
.box2_head.js-acd_btn { padding-right: 44px; }
.box2_body {
  background-color: #fff;
  border: 1px solid var(--box2Color);
  border-radius: 0 0 16px 16px;
  padding: 12px 16px 16px;
}
/* - 色 - */
.box2-orange {
  --box2Color: var(--subColor);
}
/* - アイコン画像 - */
.box2_head_icon {
  width: 27px;
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* - アコーディオンパターン - */
.box2.js-acd {
  --acdIconColor: #fff;
}
.box2:not([open]) .js-acd_btn {
  border-radius: 16px;
}

/* ----- ボックス3 ----- */
.box3 {
  --paddingY: 24px;
  --paddingX: 24px;
  --boxH: auto;
  --boxShadow: none;
  --box3Color: var(--colorLightGray);
  --box3TtlColor: var(--defaultColor);
  height: var(--boxH);
  margin-top: 24px;
}
.box3.h100p, .box3.sp_h100p { --boxH: 100%; }
.box3:first-child { margin-top: 0; }
.box3_inner {
  height: var(--boxH);
  background-color: var(--box3Color);
  border-radius: 16px;
  box-shadow: var(--boxShadow);
  padding: var(--paddingY) var(--paddingX);
}
.box3_ttl {
  color: var(--box3TtlColor);
  font-size: 20px;
  font-weight: bold;
}
.box3_ttl_sub {
  color: var(--box3TtlColor);
  font-size: 18px;
  font-weight: bold;
}
/* - ボックス3 色 - */
.box3-white { --box3Color: #fff; }
.box3-lYellow { --box3Color: #FDFBEB; }
.box3-lGreen { --box3Color: var(--colorLightGreen); }
.box3-orange { --box3Color: var(--subColor); }
/* - ボックス3 影 - */
.box3-shadow {
  --boxShadow: 3px 3px 10px rgba(0, 0, 0, .1);
}
.box3-shadow + .box3-shadow { margin-top: 20px; }
/* - ボックス3 背景色なし、枠線有りパターン - */
.box3-reverse .box3_inner {
  background-color: #fff;
  border: 1px solid var(--box3Color);
}
/* ボックス3 アイコンがあった場合 */
.box3:has(.box3_spTtl .icon) {
  position: relative;
  padding-top: 28px;
}
.box3_inner:has(.box3_spTtl .icon) {
  padding-top: 36px;
}
/* 見出し上にあるワンポイント */
.box3:has(.box3_tip) {
  position: relative;
  padding-top: 17px;
}
.box3_tip + .box3_ttl { margin-top: 24px; }
.box3_tip {
  width: auto;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  background-color: var(--subColor);
  border-radius: 8px;
  margin: auto;
}
.box3_tip_sub {
  padding: 4px 8px;
}
.box3_tip_main {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--subColor);
  font-size: 22px;
  font-family: var(--latoFont);
  background-color: #fff;
  border: 1px solid var(--subColor);
  border-radius: 0 8px 8px 0;
  padding: 4px 8px;
}
/* - ボックス3 特殊な見出し - */
.box3_spTtl {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.16;
  letter-spacing: .05em;
  text-align: center;
}
.box3_spTtl .icon {
  width: 56px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 28px;
  margin: auto;
}
/* - ボックス3 金利 - */
.box3_rate {
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
}
.box3_rate:first-child { margin-top: 0; }
.box3_rate_label {
  min-width: 134px;
  width: auto;
  color: var(--mainColor);
  font-size: var(--defaultFontSize);
  font-weight: bold;
  text-align: center;
  border: 2px solid var(--mainColor);
  border-radius: 20px;
  line-height: 1.33;
  letter-spacing: .1em;
  padding: 4px 8px;
}
.box3_rate_txt {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1;
}
.box3_rate_txt > span {
  color: var(--mainColor);
  font-size: 38px;
}
.box3_rate_txt.txtMarker {
  padding-bottom: .35em;
}
.box3_rate_note {
  position: relative;
  font-size: var(--smallFontSize);
  line-height: 1.2;
  margin-top: auto;
  padding-left: 1.25em;
  padding-bottom: 4px;
}
.box3_rate_note::before {
  content: "\203B";
  width: 1em;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--colorRed);
  font-weight: bold;
  text-align: center;
}
/* - 住宅ローン用 - */
.box3-house{
  --paddingX: 8px;
  margin-top: 48px;
}
.box3-house:first-child { margin-top: 0; }


/* ----- 注意喚起用ボックス ----- */
.cautionBox {
  --boxColor: var(--colorRed);
  --acdIconColor: #fff;
  margin-top: 24px;
}
.cautionBox:first-child { margin-top: 0; }
.cautionBox_head {
  display: flex;
  gap: 16px;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  background: var(--boxColor);
  border-radius: 16px 16px 0 0;
  padding: 16px;
}
.cautionBox_head:only-child { border-radius: 16px; }
.cautionBox_body {
  background-color: #fff;
  border: 1px solid var(--boxColor);
  border-radius: 0 0 16px 16px;
  padding: 12px 16px 16px;
}
.cautionBox_body:only-child { border-radius: 16px; }
/* - アイコン画像 - */
.cautionBox_head_icon {
  width: 28px;
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* - アコーディオンパターン - */
.cautionBox_head.js-acd_btn {
  padding-right: 40px;
}
.cautionBox:not([open]) .js-acd_btn {
  border-radius: 16px;
}
/* - 灰色パターン - */
.cautionBox-gray {
  --boxColor: var(--colorDarkGray);
}


/* ----- シンプルボックス ----- */
.simpleBox {
  background-color: var(--colorLightGray);
  border-radius: 8px;
  margin-top: 24px;
  padding: 16px;
}
.simpleBox:first-child { margin-top: 0; }
.simpleBox_head {
  color: var(--mainColor);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.simpleBox_body {
}
.simpleBox_body:not(:first-child) {
  margin-top: 16px;
}
/* 色 */
.simpleBox-red { background-color: var(--colorRed); }
.simpleBox-white { background-color: #fff; }
/* 見出し部分タイプ2 */
.simpleBox_head-type2 {
  display: grid;
  place-content: center;
}
.simpleBox_head-type2 > span {
  position: relative;
  padding: 0 1.5em;
}
.simpleBox_head-type2 > span::before,
.simpleBox_head-type2 > span::after {
  content: "";
  width: 1.5em;
  height: 2px;
  bottom: .6em;
  display: block;
  position: absolute;
  background-color: var(--mainColor);
}
.simpleBox_head-type2 > span::before {
  left: 0;
  transform: rotate(45deg);
}
.simpleBox_head-type2 > span::after {
  right: 0;
  transform: rotate(-45deg);
}


/* ----- 特殊なボックス ----- */
.uniqBox .catch {
  font-size: 24px;
  margin-top: 0;
}
.uniqBox .catch_highlight {
  font-size: 32px;
}
.uniqBox .catch_logoList {
}
.uniqBox .emphBtn {
  --btnMarginTop: 24px;
}
.uniqBox {
  background-color: var(--colorLightOrange);
  border-radius: 24px;
  margin-top: 32px;
  padding: 10px;
}
.uniqBox:first-child { margin-top: 0; }
.uniqBox_inner {
  display: flex;
  border: 2px dashed #DEB778;
  border-radius: 20px;
  padding: 30px 20px;
}
/* - atm - */
.uniqBox_atm {
  margin: auto;
}
.uniqBox_atm_img {
  width: 83px;
  flex-shrink: 0;
  margin-top: auto;
}
.uniqBox_atm_body {
  position: relative;
}
.uniqBox_atm_bubble {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -72px;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 1;
  background-color: #ff7e39;
  border-radius: 8px;
  padding: 8px 16px 12px 24px;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.1));
}
.uniqBox_atm_bubble::after {
  content: "";
  width: 22px;
  height: 49px;
  position: absolute;
  top: 38px;
  left: 30px;
  background-color: #ff7e39;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  transform: rotate(143deg);
}
.uniqBox_atm_bubble_txt {
}
/* - ご相談 - */
.uniqBox_consult {
  width: 100%;
}
.uniqBox_consult_ttl {
  color: var(--mainColor);
  font-size: 26px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.3;
  text-align: center;
}
.uniqBox_consult_read {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .03em;
  text-align: center;
  margin-top: 16px;
}
.uniqBox_consult_grid {
  margin-top: 32px;
}
.uniqBox_consult_grid_item {
  position: relative;
  margin-top: 64px;
}
.uniqBox_consult_grid_item:first-child { margin-top: 0; }
.uniqBox_consult_grid_item::before {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: -32px;
  background-color: var(--defaultColor);
}
.uniqBox_consult_grid_item:first-child::before { content: none; }


/* ----- ボックス 汎用 ----- */
/* - 影 - */
.box-shadow {
  --boxShadow: 3px 3px 10px rgba(0, 0, 0, .1);
}
.box-shadow + .box-shadow { margin-top: 32px; }
/* - 特殊見出し - */
.box_spTtl {
  display: flex;
  gap: 12px;
  align-items: center;
}
.box_spTtl .icon {
  width: 56px;
  font-size: 28px;
}


/* --------------------------------------------------
画像＋テキストコンポーネント
-------------------------------------------------- */
/* ----- テキスト回り込みなし ----- */
.imgTxt {
  margin-top: 24px;
}
.imgTxt:first-child { margin-top: 0; }
.imgTxt_img {
  position: relative;
}
.imgTxt_txt { margin-top: 16px; }
.imgTxt_txt:first-child { margin-top: 0; }
.imgTxt_img { margin-top: 16px; }
.imgTxt_img:first-child { margin-top: 0; }


/* ----- テキスト回り込みあり ----- */
.imgTxtFloat {
  margin-top: 24px;
}
.imgTxtFloat:first-child { margin-top: 0; }
.imgTxtFloat_item:not(:first-child) {
  margin-top: 16px;
}


/* --------------------------------------------------
吹き出しコンポーネント
-------------------------------------------------- */
.balloonBox {
  --balloonSize: 24px;
  --balloonIconSize: 80px;
  --balloonBgColor: #fff;
  --balloonBorderColor: #fff;
  --balloonBorderWidth: 2px;
  --balloonBorderWidthDouble: calc(var(--balloonBorderWidth) * 2);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  margin-top: 24px;
}
.balloonBox:first-child { margin-top: 0; }
.balloonBox + .balloonBox { margin-top: 24px; }
.balloonBox_icon {
  flex: 0 0 auto;
  width: var(--balloonIconSize);
  height: var(--balloonIconSize);
}
.balloonBox_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.balloonBox_txt {
  flex: 1 1 auto;
  position: relative;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.15));
  padding-left: var(--balloonSize);
}
.balloonBox_txt::before,
.balloonBox_txt::after {
  content: "";
  width: var(--balloonSize);
  height: var(--balloonSize);
  position: absolute;
  top: 40px;
  top: calc(var(--balloonIconSize) * .5 - 12px);
  left: -20px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.balloonBox_txt::before {
  left: 0;
  background-color: var(--balloonBorderColor);
}
.balloonBox_txt::after {
  left: var(--balloonBorderWidthDouble);
  background-color: var(--balloonBgColor);
}
.balloonBox_txt_inner {
  position: relative;
  width: 100%;
  min-height: var(--balloonIconSize);
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: center;
  border-radius: 16px;
  background-color: var(--balloonBgColor);
  border: var(--balloonBorderWidth) solid var(--balloonBorderColor);
  padding: 16px;
}
/* - オプション - */
/* アイコン位置変更 */
.balloonBox-reverse { flex-direction: row-reverse; }
.balloonBox-reverse .balloonBox_txt::before,
.balloonBox-reverse .balloonBox_txt::after {
  left: auto;
  transform: scale(-1, 1);
}
.balloonBox-reverse .balloonBox_txt::before { right: 0; }
.balloonBox-reverse .balloonBox_txt::after { right: var(--balloonBorderWidthDouble); }
.balloonBox-reverse .balloonBox_txt { padding-left: 0; padding-right: var(--balloonSize); }
/* 色変更 */
.balloonBox-green {
  --balloonBgColor: var(--colorLightGreen);
  --balloonBorderColor: var(--mainColor);
}


/* --------------------------------------------------
パネルコンポーネント
-------------------------------------------------- */
.panel {
  --gapY: 20px;
  --gapX: 8px;
  --col: 1;
  --panelPosition: flex-start;
  --paddingX: 24px;
  margin-top: 32px;
}
.panel:first-child { margin-top: 0; }
.panel + .panel { margin-top: 20px; }
.panel_list {
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--panelPosition);
  gap: var(--gapY) var(--gapX);
  margin: 0;
}
.panel_item {
  --tPanelGap: calc(calc(var(--col) - 1) * var(--gapX));
  --tPanelWrap: calc(100% - var(--tPanelGap));
  --tPanelW: calc(var(--tPanelWrap) / var(--col));
  width: var(--tPanelW);
  flex: 0 0 auto;
}
.panel_inner {
  width: 100%;
  height: 100%;
  min-height: var(--minH);
  display: flex;
  gap: 14px;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 16px;
  padding: 20px var(--paddingX) 24px;
}
/* あとから追加変更が来たのでこの書き方になってます */
.panel_inner:not(:first-child) {
  height: auto;
  margin-top: 12px;
}
.panel_head {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.panel_foot {
  padding-bottom: 12px;
}
.panel_img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 12px;
}
.panel_img:first-child { margin-top: 0; }
.panel_txt_main {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-align: center;
  margin-top: 12px;
}
.panel_txt_main:first-child { margin-top: 0; }
.panel_txt_sub:not(:first-child) {
  margin-top: 14px;
}
/* - リンクパターン - */
.panel_item {
  --panelLinkIcon: url(/common_v3/images/icon/icon_link.svg);
  --panelLinkIconColor: var(--mainColor);
  --panelLinkIconColorTxt: transparent;
  --panelLinkIconWidth: 12px;
  --panelLinkIconHeight: 10px;
}
a.panel_inner {
  color: inherit;
  text-decoration: none;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  padding-bottom: 24px;
  transition: var(--transBg);
}
.panel_linkIcon {
  width: var(--panelLinkIconWidth);
  height: var(--panelLinkIconHeight);
  position: absolute;
  right: 14px;
  bottom: 14px;
  background-color: var(--panelLinkIconColorTxt);
}
.panel_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--panelLinkIconColor);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--panelLinkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--panelLinkIcon);
}
/* アイコンの種類 */
a.panel_inner[target="_blank"] {
  --panelLinkIcon: url(/common_v3/images/icon/icon_blank.svg);
}
a.panel_inner[href$=".pdf"] {
  --panelLinkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --panelLinkIconWidth: 37px;
  --panelLinkIconHeight: 18px;
}
a.panel_inner[href^="#"] {
  --panelLinkIcon: url(/common_v3/images/icon/icon_anchor.svg);
}
/* - オプション - */
/* 位置 */
.panel-center { --panelPosition: center; }
/* カラム数 */
.panel-col2-sp,
.panel.sp_col2 { --col: 2; --paddingX: 8px; }
/* パネル別パターン */
.panel-type2 { --minH: 65px; }
.panel-type2 .panel_inner { justify-content: center; padding: 12px 24px; }
.panel-type2 .panel_txt_main { font-size: var(--defaultFontSize); }

/* --------------------------------------------------
ポイント・特徴コンポーネント
-------------------------------------------------- */
.point {
  --gapY: 20px;
  --gapX: 8px;
  --col: 1;
  --paddingX: 24px;
  --pointPosition: flex-start;
  --pointIconSize: 52px;
  --pointHeadColor: var(--defaultColor);
  --pointItemBg: #fff;
  height: var(--pointH);
  margin-top: 32px;
}
.point:first-child { margin-top: 0; }
.point + .point { margin-top: 20px; }
.point_list {
  min-width: 100%;
  height: var(--pointH);
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--pointPosition);
  gap: var(--gapY) var(--gapX);
  margin: 0;
}
.point_item {
  --tpointGap: calc(calc(var(--col) - 1) * var(--gapX));
  --tpointWrap: calc(100% - var(--tpointGap));
  --tpointW: calc(var(--tpointWrap) / var(--col));
  width: var(--tpointW);
  height: var(--pointH);
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.point_item:has(.point_head > .icon) {
  padding-top: calc(var(--pointIconSize) * .5);
}
.point_inner {
  width: 100%;
  flex: 1 1 0%;
  display: flex;
  gap: 14px;
  flex-direction: column;
  position: relative;
  background-color: var(--pointItemBg);
  border: 1px solid var(--colorGray);
  border-radius: 16px;
  padding: 20px var(--paddingX) 16px;
}
.point_inner:has(.point_head > .icon) {
  padding-top: 36px;
}
.point_head {
  color: var(--pointHeadColor);
}
.point_head:only-child {
  padding-bottom: 12px;
}
.point_foot {
  margin-top: 12px;
  padding-bottom: 12px;
}
.point_foot:only-child { margin-top: 0; }
.point_img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.point_txt_main {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-align: center;
}
.point_txt_sub:not(:first-child) {
  margin-top: 14px;
}
.point_head .point_txt_sub:last-child { padding-bottom: 12px; }

/* 上部に吹き出しコメントあり */
.point_comment {
  position: relative;
  top: calc(var(--pointIconSize)* -.5);
  font-size: var(--defaultFontSize);
  text-align: center;
  padding: 0 0 62px;
}
.point_comment::after {
  content: '';
  width: 296px;
  aspect-ratio: 148 / 35;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(/common_v3/images/sv2_comment_item.svg) no-repeat center / contain;
  margin: auto;
}
.point_comment_txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* - 汎用クラス使用 - */
.point_head .icon {
  width: var(--pointIconSize);
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--pointIconSize) * -.5);
  margin: auto;
}
/* - リンクパターン - */
.point_item {
  --pointLinkIcon: url(/common_v3/images/icon/icon_link.svg);
  --pointLinkIconColor: var(--mainColor);
  --pointLinkIconColorTxt: transparent;
  --pointLinkIconWidth: 16px;
  --pointLinkIconHeight: 12px;
}
a.point_inner {
  color: inherit;
  text-decoration: none;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  padding-bottom: 24px;
  transition: var(--transBg);
}
.point_linkIcon {
  width: var(--pointLinkIconWidth);
  height: var(--pointLinkIconHeight);
  position: absolute;
  right: 14px;
  bottom: 14px;
  background-color: var(--pointLinkIconColorTxt);
}
.point_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--pointLinkIconColor);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--pointLinkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--pointLinkIcon);
}
/* アイコンの種類 */
a.point_inner[target="_blank"] {
  --pointLinkIcon: url(/common_v3/images/icon/icon_blank.svg);
}
a.point_inner[href$=".pdf"] {
  --pointLinkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --pointLinkIconWidth: 24px;
}
a.point_inner[href^="#"] .point_linkIcon {
  left: 0;
  right: 0;
  margin: auto;
  transform: rotate(90deg);
}
/* - オプション - */
/* 位置 */
.point-center { --pointPosition: center; }
.point.col2 .point_txt_main,
.point.sp_col2 .point_txt_main {
  font-size: 18px;
}
/* - カラーパターン2 - */
.point-color2 {
  --pointItemBg: #FDFBEB;
  --pointHeadColor: var(--mainColor);
}
/* spのみレイアウト変える */
.point-spMod {
  --gapY: 0;
  --pointIconSize: 40px;
}
.point-spMod .point_item,
.point-spMod .point_item:has(.point_head > .icon) {
  border-bottom: 1px solid var(--colorGray);
  padding: 0;
}
.point-spMod .point_inner,
.point-spMod .point_inner:has(.point_head > .icon) {
  gap: 8px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 32px 16px 130px;
}
.point-spMod .point_head .icon {
  left: 0;
  top: 0;
  bottom: 0;
  right: auto;
  font-size: 18px;
  margin: auto;
}
.point-spMod .point_head .icon_sub {
  font-size: 8px;
}
.point-spMod .point_img {
  width: 66px;
  position: absolute;
  left: 52px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.point-spMod .point_txt_main {
  font-size: 16px;
  text-align: left;
}
.point-spMod .point_foot {
  margin-top: 0;
  padding-bottom: 0;
}
.point-spMod .point_txt_sub {
  font-size: 14px;
  margin-top: 0;
}
.point-spMod .point_txt_sub:last-child { padding-bottom: 0; }
.point-spMod .point_linkIcon {
  left: auto !important;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* ==================================================
テキストリンク
================================================== */
.textLink {
  /* color: var(--mainColor);
  text-decoration: underline;
  text-underline-offset: 2px; */
}


/* ==================================================
リンクボタン
================================================== */
/* ----- 通常ボタン ----- */
/* - 変数用 - */
.nmlBtn {
  /* カラム・幅など */
  --col: 1;
  --gapY: 20px;
  --gapX: 8px;
  --nmlBtnMaxW: 100%;
  --nmlBtnMinH: 54px;
  --nmlBtnRadius: 27px;
  --nmlBtnPaddingL: 28px;
  --nmlBtnPaddingR: 28px;
  --nmlBtnItemGap: 8px;
  --btnPos: center;
  --defaultLineHeight: 1.5;
  /* 色 */
  --nmlBtnColor: var(--mainColor);
  --nmlBtnBoderColor: var(--mainColor);
  --nmlBtnColor_hover: #fff;
  /* アイコン */
  --svgIconColor: #fff;
  --svgIconSize: 28px;
  --nmlBtnIconPos: 20px;
  --nmlBtnLinkIcon: url(/common_v3/images/icon/icon_link.svg);
  --nmlBtnLinkIconWidth: 14px;
  --nmlBtnLinkIconHeight: 14px;
  --nmlBtnLinkIconPosR: 12px;
}
/* - メイン - */
.nmlBtn {
  max-width: 100%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  justify-content: var(--btnPos);
  font-size: var(--defaultFontSize);
  line-height: var(--defaultLineHeight);
  text-align: center;
  margin-top: 32px;
}
.nmlBtn:first-child { margin-top: 0; }
.nmlBtn_item {
  /* ボタン色 */
  --nmlBtnIcoColor: var(--nmlBtnColor_hover);
  --nmlBtnTxtColor: var(--nmlBtnColor_hover);
  --nmlBtnBgColor: var(--nmlBtnColor);
  /* 幅 */
  --tNmlBtnGapX: calc(calc(var(--col) - 1) * var(--gapX));
  --tNmlBtnWrap: calc(100% - var(--tNmlBtnGapX));
  --tNmlBtnW: calc(var(--tNmlBtnWrap) / var(--col));
  flex: 0 0 auto;
  width: var(--tNmlBtnW);
  max-width: var(--nmlBtnMaxW);
  display: flex;
  gap: var(--nmlBtnItemGap);
  flex-direction: column;
}
.nmlBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: var(--nmlBtnMinH);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--nmlBtnTxtColor);
  background: var(--nmlBtnBgColor);
  border: 1px solid var(--nmlBtnBoderColor);
  border-radius: var(--nmlBtnRadius);
  padding: 8px var(--nmlBtnPaddingR) 8px var(--nmlBtnPaddingL);
  text-decoration: none;
  cursor: pointer;
  transition:
    var(--transColor),
    var(--transBg);
}
.nmlBtn_item_inner:not(:has(.nmlBtn_linkIcon)) {
  padding-left: calc(var(--nmlBtnPaddingL) * .5);
  padding-right: calc(var(--nmlBtnPaddingR) * .5);
}
.nmlBtn_text {
  display: flex;
  gap: 0;
  flex-direction: column;
}
.nmlBtn_text_main {
  font-weight: bold;
  line-height: 1.45;
}
.nmlBtn_text_sub {
  font-size: calc(var(--defaultFontSize) - 2px);
  line-height: 1.2;
}
.nmlBtn_caption {
  display: flex;
  justify-content: center;
  position: relative;
  font-size: var(--defaultFontSize);
  color: var(--nmlBtnColor);
  font-weight: 500;
  margin: auto auto 0;
  padding: 0 32px;
}
.nmlBtn_caption::before,
.nmlBtn_caption::after {
  content: "";
  position: absolute;
  width: 30px;
  height:2px;
  bottom: 12px;
  background-color: var(--nmlBtnColor);
}
.nmlBtn_caption::before {
  left: 0;
  transform: rotate(45deg);
}
.nmlBtn_caption::after {
  right: 0;
  transform: rotate(-45deg);
}
.nmlBtn_caption-simple {
  align-items: center;
  color: var(--defaultColor);
  font-weight: bold;
  line-height: 1.3;
  padding: 0;
}
.nmlBtn_caption-simple::before,
.nmlBtn_caption-simple::after { content: none; }
.nmlBtn_caption + .nmlBtn_item_inner {
  height: auto;
}
.nmlBtn_caption + .nmlBtn {
  margin-top: var(--nmlBtnItemGap);
}
/* - 位置 - */
.nmlBtn-left { justify-content: flex-start; }
.nmlBtn-center { justify-content: center; }
.nmlBtn-right { justify-content: flex-end; }
/* - 色 - */
/* オレンジ */
.nmlBtn_item-orange {
  --nmlBtnColor: var(--subColor);
  --nmlBtnBoderColor: var(--subColor);
  --svgIconColor: #fff;
}
/* 青（主にビジネスWebログインボタンに使用） */
.nmlBtn_item-blue {
  --nmlBtnColor: var(--colorBlue);
  --nmlBtnBoderColor: var(--colorBlue);
  --svgIconColor: #fff;
}
/* 薄い青 */
.nmlBtn_item-lightBlue {
  --nmlBtnColor: var(--colorLightBlue);
  --nmlBtnBoderColor: var(--colorLightBlue);
  --svgIconColor: #fff;
}
.nmlBtn_icon {
  width: var(--svgIconSize);
  height: var(--svgIconSize);
  position: absolute;
  top: 0;
  left: var(--nmlBtnIconPos);
  bottom: 0;
  margin: auto;
}
.nmlBtn_icon::after {
  background-color: var(--nmlBtnIcoColor);
  transition: var(--transBg);
}
.nmlBtn_item_inner:has(.nmlBtn_icon) {
  padding-left: 48px;
}
/* - リンクアイコン - */
.nmlBtn_linkIcon {
  width: var(--nmlBtnLinkIconWidth);
  height: var(--nmlBtnLinkIconHeight);
  position: absolute;
  top: 0;
  right: var(--nmlBtnLinkIconPosR);
  bottom: 0;
  margin: auto;
}
.nmlBtn_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--nmlBtnIcoColor);
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--nmlBtnLinkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--nmlBtnLinkIcon);
}
.nmlBtn_item_inner:has(.nmlBtn_linkIcon-pdf) {
  --nmlBtnPaddingR: 48px;
}
/* アイコンの種類 */
.nmlBtn_linkIcon-down { --nmlBtnLinkIcon: url(/common_v3/images/icon/icon_anchor.svg); }
.nmlBtn_linkIcon-download { --nmlBtnLinkIcon: url(/common_v3/images/icon/icon_download.svg); }
.nmlBtn_linkIcon-blank { --nmlBtnLinkIcon: url(/common_v3/images/icon/icon_blank.svg); }
.nmlBtn_linkIcon-pdf {
  --nmlBtnLinkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --nmlBtnLinkIconWidth: 37px;
  --nmlBtnLinkIconHeight: 18px;
}
/* - 色の反転（サブカラー） - */
.nmlBtn_item-reverseColor {
  --nmlBtnIcoColor: var(--nmlBtnColor);
  --nmlBtnTxtColor: var(--defaultColor);
  --nmlBtnBgColor: var(--nmlBtnColor_hover);
  --svgIconColor: var(--nmlBtnColor);
}
/* - 角丸調整 - */
.nmlBtn-roundSmall,
.nmlBtn_item-roundSmall {
  --nmlBtnRadius: 8px;
}
.nmlBtn-roundSmall .nmlBtn_item:has(.nmlBtn_icon),
.nmlBtn_item-roundSmall:has(.nmlBtn_icon) {
  --nmlBtnMinH: 64px;
}
/* - 非活性ボタン - */
.nmlBtn_item-disabled {
  --nmlBtnTxtColor: var(--defaultColor);
  --nmlBtnColor: var(--colorGray);
  --nmlBtnBgColor: var(--colorGray);
  --nmlBtnBoderColor: var(--colorGray);

  pointer-events: none;
  user-select: none;
}
.nmlBtn_item-disabled .nmlBtn-linkIcon {
  display: none;
}
/* - 選択済み - */
.nmlBtn_item-selected {
  --nmlBtnTxtColor: var(--nmlBtnColor_hover);
  --nmlBtnBgColor: var(--nmlBtnColor);
  pointer-events: none;
  user-select: none;
}
.nmlBtn_item-selected .nmlBtn-linkIcon {
  display: none;
}
/* - 見た目だけボタン - */
div.nmlBtn_item_inner:not([data-modalclass]) {
  user-select: none;
  pointer-events: none;
}
/* step内にあるボタン */
.nmlBtn-step {
  --nmlBtnMinH: 54px;
  font-size: 16px;
  margin-top: 16px;
}
/* ----- 通常ボタン（他コンポネ内で使用時の調整） ----- */
.nmlTable .nmlBtn {
  --nmlBtnPaddingL: 12px;
  --nmlBtnPaddingR: 16px;
  --nmlBtnLinkIconWidth: 12px;
  --nmlBtnLinkIconHeight: 12px;
  --nmlBtnLinkIconPosR: 4px;
}
.nmlTable .nmlBtn_item_inner:has(.nmlBtn_linkIcon-pdf) {
  --nmlBtnPaddingR: 32px;
}
.nmlTable .nmlBtn_linkIcon-pdf {
  --nmlBtnLinkIconWidth: 28px;
  --nmlBtnLinkIconHeight: 14px;
}

/* ----- コンバージョンボタン ----- */
/* - 変数用 - */
.cnvBtn {
  /* 色 */
  --cnvBtnColor: linear-gradient(#1eb581 0%, #107c6a 100%);
  /* アイコン */
  --cnvBtnLinkIcon: url(/common_v3/images/icon/icon_link.svg);
}
/* - メイン - */
.cnvBtn {
  max-width: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
  font-size: calc(var(--largeFontSize) + 2px);
  line-height: 1.3;
  text-align: center;
  margin-top: 32px;
}
.cnvBtn:first-child { margin-top: 0; }
.cnvBtn_item {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.cnvBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: #fff;
  background: var(--cnvBtnColor);
  border-radius: 37px;
  padding: 8px 36px;
  text-decoration: none;
}
.cnvBtn_text {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.cnvBtn_text_main {
  font-weight: bold;
}
.cnvBtn_text_sub {
  font-size: var(--smallFontSize);
}
.cnvBtn_caption {
  font-size: var(--smallFontSize);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 8px;
}
.cnvBtn_caption strong,
.cnvBtn_caption2 strong {
  color: var(--defaultColor);
  font-size: var(--largeFontSize);
}
.cnvBtn_caption2 {
  display: flex;
  justify-content: center;
  position: relative;
  font-weight: bold;
  color: var(--cnvBtnColor);
  margin: auto auto 8px;
  padding: 0 24px;
}
.cnvBtn_caption2::before,
.cnvBtn_caption2::after {
  content: "";
  position: absolute;
  width: 30px;
  height:2px;
  bottom: 12px;
  background-color: var(--cnvBtnColor);
}
.cnvBtn_caption2::before {
  left: -4px;
  transform: rotate(45deg);
}
.cnvBtn_caption2::after {
  right: -4px;
  transform: rotate(-45deg);
}
.cnvBtn_caption.fcWhite,
.cnvBtn_caption2.fcWhite,
.cnvBtn_caption.sp_fcWhite,
.cnvBtn_caption2.sp_fcWhite { --cnvBtnColor: #fff; }
.cnvBtn_caption2-simple::before,
.cnvBtn_caption2-simple::after { content: none; }
/* - 色 - */
.cnvBtn_item-orange {
  --cnvBtnColor: var(--subColor);
}
/* - 左側に置く（かもしれない）アイコン - */
.cnvBtn_icon {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 12px;
  bottom: 0;
  margin: auto;
}
.cnvBtn_icon::after {
  background-color: var(--cnvBtnTxtColor);
  transition: var(--transBg);
}
/* - リンクアイコン - */
.cnvBtn_linkIcon {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
}
.cnvBtn_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: #fff;
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--cnvBtnLinkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--cnvBtnLinkIcon);
}
/* アイコンの種類 */
.cnvBtn_linkIcon-down {
  transform: rotate(90deg);
}
.cnvBtn_linkIcon-blank {
  --cnvBtnLinkIcon: url(/common_v3/images/icon/icon_blank.svg);
}

/* ----- 注意喚起ボタン ----- */
/* - 変数用 - */
.cautionBtn {
  /* カラム・幅など */
  --cautionBtnCol: 1;
  --cautionBtnMaxW: 100%;
  --cautionBtnPadding: 36px;
  /* 色 */
  --cautionBtnColor: var(--colorRed);
  --cautionBtnBoderColor: var(--colorRed);
  --cautionBtnColor_hover: #fff;
  /* アイコン */
  --cautionBtnLinkIcon: url(/common_v3/images/icon/icon_link.svg);
  --cautionBtnLinkIconWidth: 16px;
  --cautionBtnLinkIconHeight: 14px;
}
/* - メイン - */
.cautionBtn {
  max-width: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
  line-height: 1.5;
  text-align: center;
  margin-top: 32px;
}
.cautionBtn:first-child { margin-top: 0; }
.cautionBtn_item {
  --cautionBtnTxtColor: var(--cautionBtnColor_hover);
  --cautionBtnBgColor: var(--cautionBtnColor);

  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.cautionBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: var(--cautionBtnTxtColor);
  background: var(--cautionBtnBgColor);
  border: 1px solid var(--cautionBtnBoderColor);
  border-radius: 8px;
  padding: 8px var(--cautionBtnPadding);
  text-decoration: none;
  cursor: pointer;
  transition:
    var(--transColor),
    var(--transBg);
}
.cautionBtn_text {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.cautionBtn_text_main {
  font-weight: bold;
}
.cautionBtn_text_sub {
  font-size: var(--smallFontSize);
}
/* - リンクアイコン - */
.cautionBtn_linkIcon {
  width: var(--cautionBtnLinkIconWidth);
  height: var(--cautionBtnLinkIconHeight);
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
}
.cautionBtn_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--cautionBtnTxtColor);
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--cautionBtnLinkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--cautionBtnLinkIcon);
}
/* アイコンの種類 */
.cautionBtn_linkIcon-down {
  transform: rotate(90deg);
}
.cautionBtn_linkIcon-blank {
  --cautionBtnLinkIcon: url(/common_v3/images/icon/icon_blank.svg);
}
.cautionBtn_linkIcon-pdf {
  --cautionBtnLinkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --cautionBtnLinkIconWidth: 37px;
  --cautionBtnLinkIconHeight: 18px;
}
/* 反転 */
.cautionBtn_item-reverseColor {
  --cautionBtnTxtColor: var(--cautionBtnColor);
  --cautionBtnBgColor: var(--cautionBtnColor_hover);
}


/* ----- 小ボタン ----- */
/* - 変数用 - */
.smlBtn {
  /* カラム・幅など */
  --col: 1;
  --gapY: 20px;
  --gapX: 8px;
  --smlBtnMaxW: 420px;
  --smlBtnW: 200px;
  --smlBtnGapX: 8px;
  --smlBtnRadius: 24px;
  --smlBtnPaddingL: 24px;
  --smlBtnPaddingR: 24px;
  /* 色 */
  --smlBtnColor: var(--defaultColor);
  --smlBtnBoderColor: var(--colorGray);
  /* アイコン */
  --smlBtnLinkIcon: url(/common_v3/images/icon/icon_link.svg);
  --smlBtnLinkIconWidth: 12px;
  --smlBtnLinkIconHeight: 12px;
  --smlBtnLinkIconPosR: 12px;
}
/* - メイン - */
.smlBtn {
  max-width: 100%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--smallFontSize);
  line-height: 1.5;
  text-align: center;
  margin-top: 24px;
}
.smlBtn:first-child { margin-top: 0; }
.smlBtn_item {
  /* 幅 */
  --tmp1: calc(calc(var(--col) - 1) * var(--gapX));
  --tmp2: calc(100% - var(--tmp1));
  --tSmlbtnW: calc(var(--tmp2) / var(--col));

  flex: 0 0 auto;
  width: var(--tSmlbtnW);
  max-width: 200px;
  display: flex;
  flex-direction: column;
}
.smlBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: var(--smlBtnColor);
  background: #fff;
  border: 1px solid var(--colorGray);
  border-radius: var(--smlBtnRadius);
  padding: 8px var(--smlBtnPaddingR) 8px var(--smlBtnPaddingL);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transOpac);
}
.smlBtn_text {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.smlBtn_text_main {
  font-weight: bold;
}
.smlBtn_text_sub {
  font-size: calc(var(--smallFontSize) - 2px);
}
/* - 位置 - */
.smlBtn-left { justify-content: flex-start; }
.smlBtn-center { justify-content: center; }
.smlBtn-right { justify-content: flex-end; }
/* - リンクアイコン - */
.smlBtn_linkIcon {
  width: var(--smlBtnLinkIconWidth);
  height: var(--smlBtnLinkIconHeight);
  position: absolute;
  top: 0;
  right: var(--smlBtnLinkIconPosR);
  bottom: 0;
  margin: auto;
}
.smlBtn_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--mainColor);
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--smlBtnLinkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--smlBtnLinkIcon);
}
/* 文字で来るアイコン用（pdfなど共通部分） */
.smlBtn_item_inner:has(.smlBtn_linkIcon-pdf) {
  --smlBtnPaddingR: 38px;
}
/* アイコンの種類 */
.smlBtn_linkIcon-down {
  --smlBtnLinkIcon: url(/common_v3/images/icon/icon_anchor.svg);
}
.smlBtn_linkIcon-blank {
  --smlBtnLinkIcon: url(/common_v3/images/icon/icon_blank.svg);
}
.smlBtn_linkIcon-pdf {
  --smlBtnLinkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --smlBtnLinkIconWidth: 31px;
  --smlBtnLinkIconHeight: 14px;
}
/* - 非活性ボタン - */
.smlBtn_item-disabled {
  --smlBtnColor: var(--colorGray);
  --smlBtnBoderColor: var(--colorGray);
  --smlBtnTxtColor: var(--defaultColor);

  pointer-events: none;
  user-select: none;
}
.smlBtn_item-disabled .smlBtn-linkIcon {
  display: none;
}
/* - 見た目だけボタン - */
div.smlBtn_item_inner:not([data-modalclass]) {
  user-select: none;
  pointer-events: none;
}
/* ----- 小ボタン（他コンポネ内で使用時の調整） ----- */
.nmlTable .smlBtn {
  --smlBtnPaddingL: 16px;
  --smlBtnPaddingR: 16px;
  --smlBtnLinkIconWidth: 10px;
  --smlBtnLinkIconHeight: 10px;
  --smlBtnLinkIconPosR: 8px;
}
.nmlTable .smlBtn_item_inner:has(.smlBtn_linkIcon-pdf) {
  --smlBtnPaddingR: 28px;
  --smlBtnLinkIconPosR: 4px;
}
.nmlTable .smlBtn_linkIcon-pdf {
  --smlBtnLinkIconWidth: 26px;
  --smlBtnLinkIconHeight: 12px;
}

/* ----- 強調ボタン（ヘッダーやトップなどで使用） ----- */
/* - 変数用 - */
.emphBtn {
  /* カラム・幅など */
  --col: 1;
  --gapY: 16px;
  --gapX: 16px;
  --btnMaxW: auto;
  --btnMinW: auto;
  --btnMinH: 54px;
  --btnRadius: 8px;
  --btnPaddingL: 40px;
  --btnPaddingR: 24px;
  --btnItemGap: 4px;
  --btnMarginTop: 40px;
  --btnFontSize: 16px;
  /* 色 */
  --btnColor: var(--mainColor);
  --btnShadow: #167157;
  /* アイコン */
  --svgIconColor: #fff;
  --btnLinkIcon: url(/common_v3/images/icon/icon_link.svg);
  --btnLinkIconWidth: 12px;
  --btnLinkIconHeight: 12px;
  --btnLinkIconPos: 12px;
}
/* - メイン - */
.emphBtn {
  max-width: 100%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  text-align: center;
  margin-top: var(--btnMarginTop);
}
.emphBtn:first-child { margin-top: 0; }
.emphBtn_item {
  /* 幅 */
  --tmp1: calc(calc(var(--col) - 1) * var(--gapX));
  --tmp2: calc(100% - var(--tmp1));
  --btnW: calc(var(--tmp2) / var(--col));
  flex: 0 0 auto;
  width: var(--btnW);
  max-width: var(--btnMaxW);
  min-width: var(--btnMinW);
  display: flex;
  gap: var(--btnItemGap);
  flex-direction: column;
}
.emphBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: var(--btnMinH);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
  left: 0;
  color: #fff;
  background: var(--btnColor);
  box-shadow: 4px 4px var(--btnShadow);
  border-radius: var(--btnRadius);
  padding: 8px var(--btnPaddingR) 8px var(--btnPaddingL);
  text-decoration: none;
  cursor: pointer;
}
.emphBtn_text {
  display: flex;
  gap: 0;
  flex-direction: column;
}
.emphBtn_text_main {
  font-size: var(--btnFontSize);
  font-weight: bold;
  line-height: 1.45;
}
.emphBtn_text_sub {
  font-size: 14px;
  line-height: 1.2;
}
.emphBtn_caption {
  display: flex;
  justify-content: center;
  position: relative;
  color: var(--btnColor);
  font-weight: bold;
  margin: auto auto 0;
  padding: 0 32px;
}
.emphBtn_caption::before,
.emphBtn_caption::after {
  content: "";
  position: absolute;
  width: 2px;
  height:30px;
  bottom: 0;
  background-color: var(--btnColor);
}
.emphBtn_caption::before {
  left: 0;
  transform: rotate(-30deg);
}
.emphBtn_caption::after {
  right: 0;
  transform: rotate(30deg);
}
/* - 人イラスト - */
.emphBtn_deco {
  display: flex;
  align-items: flex-end;
  position: relative;
  padding: 0 8px;
}
.emphBtn_human {
  width: 76px;
  position: absolute;
  left: 4px;
  bottom: calc(var(--btnItemGap) * -2);
}
.emphBtn_human-reverse {
  transform: scale(-1, 1);
}
.emphBtn_deco .emphBtn_caption {
  left: 40px;
  font-size: 18px;
}
/* - アイコン - */
.emphBtn_item:not(:has(.emphBtn_icon)) {
  --btnPaddingL: var(--btnPaddingR);
}
.emphBtn_icon {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 0;
  left: 12px;
  bottom: 0;
  margin: auto;
}
.emphBtn_icon::after {
  background-color: #fff;
}
.emphBtn_icon-type2-sp {
  position: static;
}
/* - リンクアイコン - */
.emphBtn_linkIcon {
  width: var(--btnLinkIconWidth);
  height: var(--btnLinkIconHeight);
  position: absolute;
  top: 0;
  right: var(--btnLinkIconPos);
  bottom: 0;
  margin: auto;
}
.emphBtn_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--svgIconColor);
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--btnLinkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--btnLinkIcon);
}
/* 文字で来るアイコン用（pdfなど共通部分） */
.emphBtn_item_inner:has(.nmlBtn_linkIcon-pdf) {
  --btnPaddingR: 56px;
}
.emphBtn_linkIcon-down { --btnLinkIcon: url(/common_v3/images/icon/icon_anchor.svg); }
.emphBtn_linkIcon-download { --btnLinkIcon: url(/common_v3/images/icon/icon_download.svg); }
.emphBtn_linkIcon-blank { --btnLinkIcon: url(/common_v3/images/icon/icon_blank.svg); }
.emphBtn_linkIcon-pdf {
  --btnLinkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --btnLinkIconWidth: 37px;
  --btnLinkIconHeight: 18px;
}
/* 背景パターン */
.emphBtn_item:has(.emphBtn_bgIcon) {
  --btnMinH: 84px;
  --btnPaddingL: 12px;
  --btnPaddingR: 12px;
}
.emphBtn_bgIcon {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-content: center;
  margin: auto;
  opacity: .2;
}
/* - 色 - */
.emphBtn_item-orange {
  --btnColor: #FF7E39;
  --btnShadow: #CE5C1C;
}
.emphBtn_item-blue {
  --btnColor: var(--colorBlue);
  --btnShadow: #0E4C79;
}
.emphBtn_item-lightBlue {
  --btnColor: var(--colorLightBlue);
  --btnShadow: #218DC4;
}
.emphBtn.col2,
.emphBtn.sp_col2 {
  --btnLinkIconPos: 8px;
}



/* ==================================================
ページ内アンカー
================================================== */
.anchorNav {
  --ancNavPosition: flex-start;
  --ancColor: #f2f2f2;
  --paddingX: 12px;
  margin-top: 48px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.375;
  text-align: center;
}
.anchorNav:first-child { margin-top: 0; }
.secondView_heading + .anchorNav { margin-top: 24px; }
.anchorNav_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: var(--ancNavPosition);
}
.anchorNav_item {
  flex: 0 0 auto;
  width: calc((100% - 8px) * .5);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.anchorNav_item_inner {
  width: 100%;
  height: 100%;
  min-height: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--defaultColor);
  background-color: var(--ancColor);
  border-radius: 8px;
  text-decoration: none;
  padding: 8px var(--paddingX) 28px;
}
.anchorNav_item_inner::after {
  width: 14px;
  height: 14px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  background: url(/common_v3/images/icon/icon_anchor.svg) no-repeat center / contain;
  margin: auto;
}
a.anchorNav_item_inner::after { content: ''; }
/* - オプション - */
.anchorNav_item-right {
  --ancColor: #fff;
}
.anchorNav_item-right .anchorNav_item_inner {
  border: 1px solid var(--mainColor);
  padding: 8px 20px;
}
.anchorNav_item-right .anchorNav_item_inner::after {
  top: 0;
  right: 8px;
  bottom: 0;
  left: auto;
  transform: rotate(-90deg);
}
.anchorNav_text {
  margin: 12px 0;
}
.anchorNav_text:first-child { margin-top: 0; }
.anchorNav_text:last-child { margin-bottom: 0; }
/* 位置 */
.anchorNav-center { --ancNavPosition: center; }
.anchorNav-right { --ancNavPosition: flex-end; }
/* ボタン背景色 */
.anchorNav-white { --ancColor: #fff; }
/* 別パターン */
.anchorNav-type2-sp .anchorNav_list {
  gap: 0;
}
.anchorNav-type2-sp .anchorNav_item {
  width: 100%;
  border-bottom: 1px solid var(--colorGray);
}
.anchorNav-type2-sp .anchorNav_item_inner {
  min-height: 54px;
  align-items: flex-start;
  background-color: #fff;
  padding: 8px 36px 8px 0;
}
.anchorNav-type2-sp .anchorNav_item_inner::after {
  top: 0;
  right: 10px;
  bottom: 0;
  left: auto;
}


/* ==================================================
タブ
================================================== */
/* 他コンポーネント上書き */
.stdTab .cntSec {
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
}
.stdTab .cntSec_inner {
  padding-left: 0;
  padding-right: 0;
}
/* タブメイン */
.stdTab {
  --tabColor: var(--mainColor);
  width: 100%;
  margin-top: 32px;
}
.stdTab:first-child { margin-top: 0; }
.stdTab_btnWrap {
  --fontSize: 16px;
  --paddingX: 12px;
  position: relative;
  display: flex;
  gap: 8px;
  align-items: stretch;
  justify-content: space-around;
  border-bottom: 2px solid var(--mainColor);
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
}
.stdTab_btnWrap.fs-small,
.stdTab_btnWrap.sp_fs-small {
  --fontSize: 14px;
}
.stdTab_btn {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  display: flex;
  flex: 1 1 auto;
  color: #fff;
  font-size: var(--fontSize);
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border-radius: 8px 8px 0 0;
  border: 2px solid var(--tabColor);
  border-bottom: none;
  background-color: var(--tabColor);
  padding: 8px var(--paddingX);
  cursor: pointer;
  transition:
    var(--transColor),
    var(--transBg);
}
.stdTab_btn::after {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  background-color: #fff;
  opacity: 0;
  transition: var(--transOpac);
}
.stdTab_btn_icon {
  --svgIconColor: #fff;
  width: 38px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  position: relative;
  margin-right: 12px;
}
.stdTab_btn_icon + span { text-align: left; }
.stdTab_btn_icon::before {
  content: var(--svgIconContent);
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  background: var(--svgIcon) no-repeat center / contain;
  opacity: 0;
  transition: var(--transOpac);
}
.stdTab_btn.is-active {
  user-select: none;
  pointer-events: none;
}
.stdTab_btn.is-active::after {
  opacity: 1;
}
.stdTab_btn.is-active, .stdTab_btn:focus {
  background-color: #fff;
  color: var(--tabColor);
}
.stdTab_btn.is-active .stdTab_btn_icon::before,
.stdTab_btn:focus .stdTab_btn_icon::before {
  opacity: 1;
}
.stdTab_bodyWrap {
  --paddingX: 0px;
  --paddingB: 0px;
  position: relative;
  background-color: #fff;
}
.stdTab_body {
  width: 100%;
  z-index: 1;
  padding: 48px var(--paddingX) var(--paddingB);
  position: absolute;
  left: 0;
  top: 0;
}
.stdTab_body.is-active {
  position: static;
}
/* - 色 - */
.stdTab_btn-orange { --tabColor: var(--subColor); }
/* ----- ボックスタイプ ----- */
.stdTab-typeBox {
  overflow: hidden;
}
.stdTab-typeBox > .stdTab_bodyWrap {
  --paddingX: 16px;
  --paddingB: 20px;
  border: 2px solid var(--tabColor);
  border-top: none;
  border-radius: 0 0 8px 8px;
}
/* ----- type2（スマホ時ボタン化） ----- */
.stdTab-type2 .stdTab_btnWrap,
.stdTab-type2-sp .stdTab_btnWrap {
  --paddingX: 8px;
  flex-wrap: wrap;
  align-items: normal;
  border-bottom: none;
}
.stdTab-type2 .stdTab_btn,
.stdTab-type2-sp .stdTab_btn {
  width: calc(50% - 5px);
  flex-grow: 0;
  min-height: 64px;
  transform: none;
  border: 2px solid var(--tabColor);
  border-radius: 8px;
}
.stdTab-type2 .stdTab_btn::after,
.stdTab-type2-sp .stdTab_btn::after { content: none; }
.stdTab-type2 .stdTab_btn.is-active .stdTab_btn_inner,
.stdTab-type2-sp .stdTab_btn.is-active .stdTab_btn_inner {
  transform: none;
 }


 /* ==================================================
お問い合わせ
================================================== */
/* ----- 背景あり ----- */
.inquirySec {
  background: #f2f2f2 no-repeat center center / cover;
  text-align: center;
  letter-spacing: .05em;
  margin-top: 48px;
}
.cntSec[class*="bg"] + .inquirySec { margin-top: 0; }
.inquirySec_inner {
  position: relative;
  width: var(--contentWidth);
  margin: auto;
  padding: 48px var(--contentPaddingX);
}
.inquirySec .nmlBtn {
  margin-top: 0;
}
.inquiry_head {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.125;
  margin-bottom: 24px;
}
.inquiry_head2 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.125;
  letter-spacing: .05em;
  text-align: center;
  margin-top: 24px;
}
.inquiry_head2:first-child { margin-top: 0; }
.inquiry_body {
  text-align: center;
  margin-top: 20px;
}
.inquiry_body:first-child { margin-top: 0; }
.inquiry_item {
  position: relative;
}
.inquiry_item:not(:first-child)::before {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  background-color: #333333;
  margin: 24px auto;
}
.inquiry_ttl {
  font-size: 22px;
  line-height: 1.4;
  margin-top: 20px;
  margin-bottom: 12px;
}
.inquiry_ttl:first-child { margin-top: 0; }
.inquiry_subTxt {
  font-size: var(--smallFontSize);
  margin-top: 12px;
}
.inquiry_subTxt:first-child { margin-top: 0; }
.inquiry_telNumber {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
}
.telNumber {
  color: var(--mainColor);
  font-size: 32px;
  font-weight: bold;
  font-family: "Lato", sans-serif;
  font-style: normal;
  line-height: 1.5;
  margin-top: 12px;
}
.telNumber a {
  color: inherit;
  text-decoration: none;
}
.telNumber:first-child { margin-top: 0; }
.telNumber:not(.telNumber-simple) {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
}
/* - 文字サイズ（小） - */
.telNumber-medium-sp { font-size: 28px; }
.telNumber-small-sp { font-size: 20px; }
/* - 文字色、文字サイズを通常テキストに近づける - */
.telNumber-simple {
  color: var(--defaultColor);
  font-size: 18px;
}
.inquiry_ipTel {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
  margin: 12px auto 0;
}
.inquiry_ipTel_txt {
  font-size: 28px;
  font-weight: bold;
  font-family: "Lato", sans-serif;
}
/* - アイコン - */
/* フリーダイヤル */
.telNumber-freedial span,
.telNumber-freedial a {
  /* デザイン注意 規定確認 https://www.ntt.com/content/dam/nttcom/hq/jp/business/services/voice-video/freedial-navidial/freedial/pdf/logo_manual.pdf */
  padding-left: calc(1em * 1.5 + 12px);
  background: url(/common_v3/images/icon/icon_freedial.svg) no-repeat left center / auto 1em;
}
/* 電話 */
.telNumber-tel span,
.telNumber-tel a {
  padding-left: calc(1em * 1.5 + 12px);
  background: url(/common_v3/images/icon/icon_tel.svg) no-repeat left center / auto 1.5em;
}
/* - 2カラムパターン - */
.inquiry_body-col2 .inquiry_ttl {
  font-size: 16px;
}
.inquiry_body-col2 .inquiry_subTxt {
  margin-top: 12px;
}

/* ----- 背景なし シンプルパターン ----- */
.simpleInquiry {
  background-color: #F2F2F2;
  border-radius: 20px;
  margin-top: 28px;
  padding: 24px var(--contentPaddingX);
}
.simpleInquiry:first-child { margin-top: 0; }
.simpleInquiry + .simpleInquiry { margin-top: 24px; }
.simpleInquiry .nmlBtn {
  --nmlBtnMinH: 54px;
}
.simpleInquiry .nmlBtn:not(:first-child) {
  margin-top: 16px;
}
.simpleInquiry .telNumber {
  color: var(--defaultColor);
  font-size: 34px;
}
.simpleInquiry_ttl {
  font-weight: bold;
  font-size: 20px;
  letter-spacing: .05em;
  text-align: center;
  margin-top: 80px;
}
.simpleInquiry_ttl:first-child { margin-top: 0; }
.simpleInquiry_head {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .05em;
  text-align: center;
  margin-top: 32px;
}
.simpleInquiry_head:first-child { margin-top: 0; }
.simpleInquiry_body {
  margin-top: 20px;
}
.simpleInquiry_body:first-child { margin-top: 0; }
.simpleInquiry_box {
}
.simpleInquiry_box_item {
  margin-top: 4px;
}
.simpleInquiry_box_item:first-child { margin-top: 0;  }
.simpleInquiry_txt {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .03em;
  line-height: 1.5;
  text-align: center;
}
.simpleInquiry_hours {
  display: flex;
  gap: 4px;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 4px;
  margin-left: auto;
}
.simpleInquiry_hours dt {
  flex-shrink: 0;
}
.telNumber + .simpleInquiry_hours,
.emailTxt + .simpleInquiry_hours {
  margin-top: 8px;
  justify-content: center;
}
.simpleInquiry_subTxt {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 4px;
}



/* ----- パネル型 ----- */
.inquiryPanel {
  background-color: #F2F2F2;
  border-radius: 20px;
  margin-top: 32px;
  padding: 20px var(--contentPaddingX);
}
.inquiryPanel:first-child { margin-top: 0; }
.inquiryPanel + .inquiryPanel { margin-top: 24px; }
.inquiryPanel_list {
  /* アイコン */
  --pInquiryIcon: url(/common_v3/images/icon/icon_link.svg);
  --pInquiryIconColor: var(--mainColor);
  --pInquiryIconColorTxt: transparent;
  --pInquiryIconWidth: 12px;
  --pInquiryIconHeight: 10px;

  min-width: 100%;
  margin: 0;
}
.inquiryPanel_item {
  width: 100%;
  margin-top: 16px;
}
.inquiryPanel_item:has(.inquiryPanel_label) { padding-top: 12px; }
.inquiryPanel_item:first-child { margin-top: 0; }
.inquiryPanel_link {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 16px;
  align-items: center;
  position: relative;
  color: inherit;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #BEBEBE;
  border-radius: 16px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  padding: 16px 36px 16px 14px;
}
.inquiryPanel_head {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.inquiryPanel_txt_main {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .05em;
  line-height: 1.3;
}
.inquiryPanel_txt_sub {
  font-size: 14px;
}
.inquiryPanel_img {
  width: 48px;
  height: 60px;
  flex-shrink: 0;
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* - アイコン - */
.inquiryPanel_linkIcon {
  width: var(--pInquiryIconWidth);
  height: var(--pInquiryIconHeight);
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  background-color: var(--pInquiryIconColorTxt);
  margin: auto;
}
.inquiryPanel_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--pInquiryIconColor);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--pInquiryIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--pInquiryIcon);
}
/* - アイコンの種類 - */
.inquiryPanel_link[target="_blank"] {
  --pInquiryIcon: url(/common_v3/images/icon/icon_blank.svg);
}
.inquiryPanel_link[href$=".pdf"] {
  --pInquiryIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --pInquiryIconWidth: 24px;
  --pInquiryIconHeight: 12px;
}
/* - 左下配置のラベル - */
.inquiryPanel_label {
  position: absolute;
  left: 50%;
  top: 0;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: .05em;
  line-height: 1.14;
  text-align: center;
  background-color: var(--mainColor);
  border-radius: 4px;
  margin: auto;
  padding: 4px 8px;
  transform: translate(-50%, -50%);
}


/* --------------------------------------------------
ステップコンポーネント
-------------------------------------------------- */
/* ----- メイン ----- */
.stepBox {
  margin-top: 40px;
}
.stepBox:first-child { margin-top: 0; }
.stepBox_item {
}
.stepBox_item:not(:last-child) { margin-bottom: 32px; }
.stepBox_label_outer {
  position: relative;
}
.stepBox_label_outer::before {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--mainColor);
  margin: auto;
}
.stepBox_label {
  width: 160px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background-color: var(--mainColor);
  border-radius: 100px;
  margin: auto;
}
.stepBox_label:has(.stepBox_label_no) {
  align-items: baseline;
}
.stepBox_label_no {
  font-size: 24px;
}
.stepBox_ttl {
  color: var(--mainColor);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .03em;
  margin-top: 28px;
}
.stepBox_ttl:first-child { margin-top: 0; }
.stepBox_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.stepBox_head:first-child { margin-top: 0; }
.stepBox_head .noteList { margin-top: 24px; }
.stepBox_head_main {
  color: var(--mainColor);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .03em;
  text-align: center;
}
.stepBox_body {
  margin-top: 28px;
}
.stepBox_body:first-child { margin-top: 0; }

/* ----- 横並び ----- */
/* - 別コンオネ - */
/* - メイン - */
.stepBox2 {
  --paddingY: 16px;
  --paddingX: 12px;
  --itemFontColor: inherit;
  --itemBgColor: #fff;
  --gap: 36px;
  display: flex;
  gap: var(--gap);
  flex-direction: column;
  margin-top: 32px;
}
.stepBox2:first-child { margin-top: 0; }
.stepBox2_item {
  --stepBox2IconSize: 56px;
  width: 100%;
  position: relative;
}
.stepBox2_item:has(.stepBox2_icon) {
  --iconHalfSize: calc(var(--stepBox2IconSize) * .5);
  padding-top: calc(var(--stepBox2IconSize) * .5);
}
.stepBox2_item:not(:last-child)::after {
  content: "";
  width: 56px;
  height: 24px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: auto;
  background-color: var(--colorGray);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.stepBox2_icon {
  width: var(--stepBox2IconSize);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 22px;
  margin: auto;
}
.stepBox2_item_inner {
  --tmpY: calc(var(--paddingY) + var(--iconHalfSize, 0px));
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--itemFontColor);
  text-underline-offset: 4px;
  background-color: var(--itemBgColor);
  border: 1px solid var(--colorGray);
  border-radius: 8px;
  padding: var(--tmpY) var(--paddingX) var(--paddingY);
}
.stepBox2_head {
  --defaultLineHeight: 1.5;
  display: flex;
  gap: 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  line-height: var(--defaultLineHeight);
  text-align: center;
  margin-top: 16px;
}
.stepBox2_head:first-child { margin-top: 0; }
.stepBox2_head_subTxt {
  color: var(--mainColor);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}
.stepBox2_body {
  margin-top: 8px;
}
.stepBox2_item:has(.stepBox2_subArrow) .stepBox2_body {
  padding-right: 12px;
}
.stepBox2_body:first-child { margin-top: 0; }
.stepBox2_body_icon {
  text-align: center;
  margin-bottom: 16px;
}
.stepBox2_body_icon:last-child { margin-bottom: 0; }
.stepBox2_body_thumb {
  width: auto;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepBox2_body_thumb > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* - アイテム下に置く矢印 - */
.stepBox2_subArrow {
  position: absolute;
  right: 0;
  top: calc(var(--stepBox2IconSize) * .5);
  bottom: -12px;
  z-index: 1;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  writing-mode: vertical-rl;
  background-color: var(--mainColor);
  border-radius: 4px;
  padding: 1px;
}
.stepBox2_subArrow::after {
  content: '';
  width: 38px;
  height: 18px;
  display: block;
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  background: var(--mainColor);
  margin: auto;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: url(/common_v3/images/stepbox2_subarrow.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: url(/common_v3/images/stepbox2_subarrow.svg);
}
/* - 横並びアイテム間をつなぐラベル - */
.stepBox2:has(.stepBox2_itemGroupLabel) {
  display: grid;
  grid-auto-rows: 1fr;
  padding-left: 24px;
}
.stepBox2_itemGroupLabel {
  --lTemp1: calc(100% * var(--col));
  --lTemp2: calc((var(--col) - 1) * var(--gap));
  width: 20px;
  height: calc(var(--lTemp1) + var(--lTemp2));
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -24px;
  top: 0;
  color: #fff;
  text-align: center;
  z-index: 1;
  background-color: var(--mainColor);
}
.stepBox2_itemGroupLabel-startHalf {
  top: 50%;
}
.stepBox2_itemGroupLabel.col2p5,
.stepBox2_itemGroupLabel.pc_col2p5 {
  --lTemp1: calc(100% * var(--col));
  --lTemp2: calc((var(--col) - 0.5) * var(--gap));
  height: calc(var(--lTemp1) + var(--lTemp2) - 4px);
}
.stepBox2_itemGroupLabel.stepBox2_itemGroupLabel-startHalf.col2p5,
.stepBox2_itemGroupLabel.stepBox2_itemGroupLabel-startHalf.pc_col2p5 {
  top: calc(50% + 4px);
}
/* プラスアイコン化 */
.stepBox2_item-plus {
  margin-bottom: 12px;
}
.stepBox2_item-plus:not(:last-child)::after {
  width: 32px;
  height: 32px;
  top: calc(100% + 8px);
  clip-path: polygon(0% 40%, 40% 40%, 40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%);
}
/* - 色 - */
.stepBox2_item-green {
  --itemFontColor: #fff;
  --itemBgColor: var(--mainColor);
}
/* 横スクロール化 */
.scrollX-sp .stepBox2 {
  --itemMaxW: 382px;
  flex-wrap: nowrap;
  flex-direction: row;
}
.scrollX-sp .stepBox2_item {
  width: 240px;
  flex: 0 0 auto;
}
.scrollX-sp .stepBox2_item:not(:last-child)::after {
  width: 24px;
  height: 56px;
  top: 0;
  left: 100%;
  bottom: 0;
  right: auto;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* - 別パターン - */
.stepBox2-type2 {
  --paddingY: 0px;
  --paddingX: 0px;
}
.stepBox2-type2 .stepBox2_item:not(:last-child) {
  padding-bottom: 16px;
}
.stepBox2-type2 .stepBox2_item_inner {
  border: none;
}

/* --------------------------------------------------
selectChart
-------------------------------------------------- */
.selectChart .cnvBtn {
  margin-top: 12px;
}
.selectChart {
  overflow: hidden;
  margin-top: 32px;
}
.selectChart:first-child { margin-top: 0; }
.selectChart_inner {}
.selectChart_item {
}
.selectChart_item:not(:first-child)::before {
  content: "";
  width: 40px;
  height: 15px;
  display: block;
  background-color: var(--colorGray);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  margin: 12px auto;
}
.selectChart_item:not(:first-child),
.selectChart_item:not(:first-child) .selectChart_branch {
  display: none;
}
/* - head部分 - */
.selectChart_head {
  display: flex;
  gap: 16px;
  align-items: center;
  color: #fff;
  font-weight: bold;
  line-height: 1.4;
  background-color: var(--mainColor);
  border-radius: 16px 16px 0 0;
}
.selectChart_head_no {
  width: 80px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 28px;
  font-family: "Lato", sans-serif;
  font-style: normal;
  text-align: center;
}
.selectChart_head_no::after {
  content: '';
  width: 1px;
  height: 56px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  margin: auto;
}
.selectChart_head_txt {
  font-size: 20px;
  padding-right: 16px;
}
/* - body部分 - */
.selectChart_body {
  background-color: var(--colorLightGray);
  border-radius: 0 0 16px 16px;
  padding: 16px 10px;
}
/* - 白枠部分 - */
.selectChart_dataBox {
  display: none;
  margin: 0;
}
.selectChart_dataBox_item {
  background-color: #fff;
  margin-top: 16px;
  padding: 20px 16px;
}
.selectChart_dataBox_head {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.selectChart_dataBox {
  display: none;
}
.selectChart_dataBox_item {
  display: none;
}
/* - 一つ前に戻るボタン - */
.selectChart_backbranch {
  display: none;
  margin-top: 20px;
}
.selectChart_backbranch_item {
  margin: auto;
}


/* --------------------------------------------------
formTable
-------------------------------------------------- */
::-webkit-input-placeholder,
::placeholder,
:placeholder-shown,
:-ms-input-placeholder {
  color: rgba(#333, .5);
}
.formTable {
  width: 100%;
  --tableDiplay: block;
}
.formTable_req {
  display: inline-block;
  color: var(--colorRed);
  margin-left: 12px;
  vertical-align: middle;
}
.formTable tr {
  margin-top: 20px;
}
.formTable tr:first-child { margin-top: 0; }
.formTable th {
  font-weight: bold;
  text-align: left;
}
.formTable th label {
  line-height: 1;
  vertical-align: middle;
}
.formTable td {
  margin-top: 8px;
}
.form_text,
.form_select,
.form_textarea {
  width: 100%;
  max-width: 100%;
  height: 64px;
  background: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 8px;
  line-height: 1;
  letter-spacing: 0;
  padding: 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form_text.entered,
.form_select.entered,
.form_textarea.entered {
  background: #fff;
}
/* - 通常 - */

/* - セレクト - */
.form_selectWrap {
  display: block;
  position: relative;
}
.form_selectWrap::after {
  content: "";
  width: 16px;
  height: 12px;
  display: block;
  position: absolute;
  right: 24px;
  top: calc(50% - 6px);
  background-color: var(--mainColor);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.form_select {
  padding-right: 44px;
}
.form_select::-ms-expand {
  display: none;
}
/* - ラジオボタン、チェックボックス - */
.form_label_list {
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.form_label {
  display: flex;
  align-items: flex-start;
}
.form_checkbox,
.form_radio {
  accent-color: var(--mainColor);
  inline-size: 20px;
  block-size: 20px;
  flex-shrink: 0;
  margin: 4px 8px 0 0;
  vertical-align: middle;
  cursor: pointer;
}
/* - テキストエリア - */
.form_textarea {
  min-height: 192px;
}
/* - エラー - */
.is-error[class*="form_"] {
  background-color: #F9EBEB;
  border-color: var(--colorRed);
}
/* ----- 個人情報保護方針 ----- */
.privacyPolicy {
  height: 205px;
  background-color: var(--colorLightGray);
  border-radius: 8px;
  margin: 32px auto 0;
  padding: 16px 10px;
  overflow: auto;
}
.privacyPolicy .title {
  color: var(--mainColor);
  font-size: 22px;
  font-weight: bold;
}
.privacyPolicy p:not(:first-child) {
  margin-top: 12px;
}
.privacyPolicy .title:not(:first-child) {
  margin-top: 20px;
}
/* 同意する */
.agreeWrap {
  text-align: center;
}
.agreeInner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}
.agreeCheck {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.agreeCheck a {
  text-decoration: underline;
  text-underline-offset: 8px;
}
.agreeText {
  font-size: 14px;
  margin-top: 20px;
}
/* 送信ボタン */
.form_agree_btn_wrap {
  width: 100%;
  display: flex;
  position: relative;
  margin: 16px auto 0;
}
.form_agree_btn {
  width: 100%;
  max-width: 100%;
  min-height: 54px;
  background: var(--mainColor);
  border: 1px solid var(--mainColor);
  border-radius: 27px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition:
    var(--transColor),
    var(--transBg);
  display: block;
  margin: 0;
}
.form_agree_btn_icon {
  width: 16px;
  height: 12px;
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto;
}
.form_agree_btn_icon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: #fff;
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: url(/common_v3/images/icon/icon_link.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: url(/common_v3/images/icon/icon_link.svg)
}
.form_submit[disabled=""] {
  cursor: default;
  user-select: none;
  pointer-events: none;
  background-color: var(--colorGray);
  border-color: var(--colorGray);;
}
.form_agree_btn:hover {
  color: var(--mainColor);
  background-color: #fff;
}
.form_agree_btn:hover + .form_agree_btn_icon::after {
  background-color: var(--mainColor);
}
/* - シミュレーション - */
.nmlTable-simulator th {
  height: 85px;
  padding-left: 8px;
  padding-right: 8px;
}
.nmlTable-simulator input,
.nmlTable-simulator label {
  vertical-align: middle;
}
.nmlTable-simulator input[type="text"] {
  width: 148px;
  height: 45px;
  margin: 0 8px;
  border: 1px solid #E8E8E8;
  padding: 0 8px;
}
.nmlTable-simulator input[type="text"]:first-child { margin-left: 0; }
.nmlTable-simulator input[type="text"]:last-child { margin-right: 0; }
.nmlTable-simulator input[type="text"]:not(:disabled):focus-visible,
.nmlTable-simulator input[type="text"]:not(:disabled):hover {
  outline: 1px solid #0AA365;
}
.nmlTable-simulator input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0 10px 0 0;
}
.nmlTable-simulator input[type="radio"]::before {
  content: "";
  display: flex;
  width: 26px;
  height: 26px;
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 50%;
}
.nmlTable-simulator input[type="radio"]::after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: #0AA365;
  border-radius: 50%;
  transform: translate(3px, -23px);
  opacity: 0;
  transition: opacity .4s ease;
}
.nmlTable-simulator input[type="radio"]:checked::after {
  opacity: 1;
}
.simulator_radio > span {
  display: block;
}
.simulator_radio > span:nth-child(n+2) {
  margin-top: 8px;
}
.simulationBalloon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.simulationBalloon_inner {
  position: relative;
}
.simulationBalloon_inner::before {
  content: "";
  position: absolute;
  left: 19px;
  top: -7px;
  z-index: 1;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  transform: scaleY(1) translate(50%, -50%) rotate(-90deg);
  border-color: transparent transparent transparent #0AA365;
  box-shadow: none;
}
.simulationBalloon_inner::after {
  position: absolute;
  top: -4px;
  left: 23px;
  transform: translateY(-50%);
  z-index: 2;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  background-color: transparent;
  border-width: 0 10px 16px 10px;
  border-color: transparent transparent #fff transparent;
}
.simulationBalloon_txt {
  border: 1px solid #0AA365;
  box-shadow: none;
  padding: 10px;
  border-radius: 12px;
}
.simulationBalloon .noteList {
  font-size: 12px;
}
.submitBox {
  margin-bottom: 24px;
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.submitBox_item {
  width: calc(100% - 8px / 2);
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 34px;
  padding: 4px 20px;
  cursor: pointer;
}
.submitBox_item_icon {
  width: 28px;
  height: 36px;
  position: absolute;
  top: 0;
  left: 24px;
  bottom: 0;
  margin: auto;
}
.submitBox_item_icon::after {
  background-color: #fff;
}
.submitBox_item_linkIcon {
  --icon: url(/common_v3/images/icon/icon_link.svg);
  width: 12px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
}
.submitBox_item_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: #fff;
  transition: var(--transBg);

  -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);
}
.submitBox_item-calc {
  position: relative;
  transition:
    var(--transBg),
    var(--transColor);
  overflow: hidden;
  border: 1px solid #FF995A;
  color: #fff;
  background-color: #FF995A;
}
.submitBox_item-calc:only-child {
  padding-left: 50px;
  padding-right: 50px;
}
.submitBox_item-clear {
  color: #333333;
  font-weight: 500;
  background-color: #F2F2F2;
  transition: var(--transOpac);
}
.submitBox_item-clear:hover {
  opacity: .75;
}
#resultBox{
  display: none;
}
.explanationBox {
  display: none;
}
.resultBoxElements {
  display: none;
  padding-top: var(--headerH, 56px);
}
.nmlTable-simulator p.error {
  display: none;
  color: #F54F4F;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.025em;
}
.nmlTable-simulator input.error {
  border: 1px solid #cc0000;
  background: #F7CFCF;
}


/* --------------------------------------------------
adobeReaderGet
-------------------------------------------------- */
.adobeReaderGet {
  margin-top: 20px;
  display: table;
  width: 100%;
  background: var(--colorLightGray) url(/common_v3/images/adobe_reader_get.png) no-repeat 20px 20px;
  transition: var(--transOpac);
}
.adobeReaderGet:first-child { margin-top: 0; }
.adobeReaderGet:hover,
.adobeReaderGet:focus {
  opacity: var(--hoverOpac);
}
.adobeReaderGet a {
  display: table-cell;
  width: 100%;
  height: 100%;
  padding: 70px 20px 20px 20px;
  text-decoration: none;
  color: inherit;
}
.adobeReaderGet_main {
  font-size: var(--defaultFontSize);
}
.adobeReaderGet_note {
  margin-top: 8px;
  font-size: 12px;
}


/* --------------------------------------------------
ニュースリスト
-------------------------------------------------- */
.newsList {
  margin: 40px auto;
}
.newsList:first-child { margin-top: 0; }
.newsList:last-child { margin-bottom: 0; }
.newsList_item {
  display: flex;
  flex-direction: column;
  position: relative;
  border-bottom: 1px solid var(--colorGray);
}
.newsList_item_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  font-size: 16px;
  color: var(--defaultColor);
  padding: 12px 40px 20px 0;
  text-decoration: none;
  transition: all .2s ease;
  background-repeat: no-repeat;
}
.newsList_date {
  flex: 0 0 auto;
  font-size: 14px;
  text-align: left;
  color: var(--mainColor);
  margin-right: 20px;
  font-weight: 500;
}
.newsList_title {
  color: var(--defaultColor);
  font-weight: 500;
  line-height: 1.5;
}
.newsList_date + .newsList_title {
  margin-top: 8px;
}


/* --------------------------------------------------
ニュースタブ（元はトップの固有）
-------------------------------------------------- */
.news {
  margin-top: 40px;
}
.news:first-child { margin-top: 0; }
/* ----- ナビ部分 ----- */
.news_nav {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: 1fr 1fr;
  border-radius: 40px;
  margin-top: 40px;
}
.news_nav:first-child { margin-top: 0; }
.news_nav_item {
  flex: 1 1 50%;
}
.news_nav_btn {
  width: 100%;
  min-height: 58px;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: .03em;
  text-align: center;
  background-color: #EAEAEA;
  border-radius: 40px;
  padding: 4px 8px;
  transition:
    var(--transColor),
    var(--transBg);
}
.news_nav_item.is-active .news_nav_btn {
  color: #fff;
  background-color: var(--mainColor);
}
/* ----- タブ部分 ----- */
.news_tab {
  position: relative;
  padding: 0 var(--contentPaddingX);
}
.news_tab_item {
  width: 100%;
  padding: 16px 0 0;
  position: absolute;
  left: 0;
  top: 0;
}
.news_tab_item.is-active { position: static; }
/* ----- メイン ----- */
.news_main {
  --tagColor: var(--mainColor);
  --linkIcon: url(/common_v3/images/icon/icon_blank.svg);
  --linkIconColor: var(--mainColor);
  --linkIconWidth: .9em;
  --linkIconHeight: .9em;

  font-size: var(--defaultFontSize);
  letter-spacing: 0.03em;
  line-height: 1.5;
  backface-visibility: hidden;
}
.news_main_item {
  border-bottom: 1px solid var(--colorGray);
}
.news_main_item_inner {
  display: block;
  color: var(--defaultColor);
  text-decoration: none;
  padding: 16px 0;
  transition: var(--transOpac);
}
.news_head {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1;
}
/* - ニュース日付 - */
.news_date {
}
/* - ニュースタグ - */
.news_tag {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--tagColor);
  font-size: 14px;
  font-family: var(--fontBold);
  letter-spacing: 0.03em;
  border: 1px solid var(--tagColor);
  border-radius: 4px;
  padding: 2px 10px;
}
/* 色パターン */
.news_tag-green { --tagColor: var(--mainColor); }
.news_tag-green2 { --tagColor: var(--colorGreen2); }
.news_tag-orange { --tagColor: var(--subColor); }
.news_tag-blue { --tagColor: var(--colorBlue); }
.news_tag-lightBlue { --tagColor: var(--colorLightBlue); }
.news_tag-red { --tagColor: var(--colorRed); }
.news_tag-pink { --tagColor: var(--colorPink); }
.news_tag-purple { --tagColor: var(--colorPurple); }
/* - 本文部分 - */
.news_body {
  margin-top: 16px;
}
/* new */
.news_new {
  display: inline-block;
  align-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1;
  background-color: var(--colorRed);
  border-radius: 4px;
  margin-left: 8px;
  padding: 4px 10px;
}
/* - リンクのアイコン（別窓 PDF） - */
.news_linkIcon {
  width: var(--linkIconWidth);
  height: var(--linkIconHeight);
  flex-shrink: 0;
  display: inline-block;
  align-items: center;
  position: relative;
  top: .1em;
  margin-left: 8px;
}
.news_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background: var(--linkIconColor);

  -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);
}
/* - アイコンの種類 - */
/* pdf */
.news_main_item_inner[href$=".pdf"],
.news_linkIcon-pdf {
  --linkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --linkIconWidth: 37px;
  --linkIconHeight: 18px;
}


/* ==================================================
usagePanel
================================================== */
.usagePanel {
  --col: 1;
  --gapY: 16px;
  --gapX: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 32px;
}
.usagePanel:first-child { margin-top: 0; }
.usagePanel_item {
  --tmp: calc(calc(var(--col) - 1) * var(--gapX));
  --tmp2: calc(100% - var(--tmp));
  --width: calc(var(--tmp2) / var(--col));
  flex: 0 0 auto;
  width: var(--width);
  display: flex;
  gap: 16px;
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 12px;
  padding: 12px 8px;
}
.usagePanel_icon {
  width: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usagePanel_txt {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.4;
}


/* ==================================================
比較テーブル
================================================== */
.comparisonTable {
  --defaultFontSize: 12px;
  --largeFontSize: 14px;
  --smallFontSize: 10px;
  --va: initial;
  --paddingY: 12px;
  --paddingX: 8px;
  width: 100%;
  font-size: var(--smallFontSize);
  background-color: #fff;
  border: 1px solid #E8E8E8;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 24px;
}
.comparisonTable:first-child { margin-top: 0; }
.comparisonTable th,
.comparisonTable td {
  line-height: 1.5;
  letter-spacing: 0.03em;
  vertical-align: var(--va);
  border: 1px solid #E8E8E8;
  padding: var(--paddingY) var(--paddingX);
}
/* th */
.comparisonTable th {
  height: auto;
  font-size: var(--defaultFontSize);
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  background-color: var(--colorLightGray);
  border-color: #fff;
}
/* thead内のth */
.comparisonTable thead th { color: #fff;  }
.comparisonTable thead th:nth-child(2) { background-color: #FF995A; }
.comparisonTable thead th:nth-child(n+3) { background-color: #6E6E6E; }
/* td */
.comparisonTable td {
  padding-bottom: 20px;
}
.comparisonTable td:nth-child(2) {
  background-color: #FFE8D9;
  border-color: #fff;
}
.comparisonTable.vaM { --va: middle; }
/* spのみ文字サイズ小 */
.sp_comparisonTable-small {
  --defaultFontSize: 10px;
  --largeFontSize: 12px;
  --smallFontSize: 8px;
}

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


/* ==================================================
装飾
================================================== */
.adorn {
  position: relative;
}
.adorn_img {
  position: absolute;
  right: 20px;
  top: 0;
  transform: translateY(-100%);
}
/* - 3パターン目 - */
.adorn:has(.adorn_img-type3) {
  padding-top: 24px;
}
.adorn_box:has(.adorn_img-type3) {
  padding-top: 4px;
}
.adorn_img-type3 {
  height: 160px;
  position: static;
  transform: none;
  text-align: center;
  margin-top: -28px;
}
.adorn_img-type3 > img {
  width: auto;
  height: 100%;
  object-fit: contain;
}


/* ==================================================
appDLBox
================================================== */
.appDLBox {
  margin-top: 20px;
  text-align: center;
}
.appDLBox :first-child { margin-top: 0; }
.appDLBox_ttl {
  font-size: 18px;
  font-weight: 500;
}
.appDLBox_list {
  display: flex;
  gap: 8px;
  border: 1px solid var(--colorGray);
  margin-top: 12px;
  padding: 20px 12px;
}
.appDLBox_item {
  flex: 1 1 50%;
  background-color: #fff;
}
.appDLBox_head {
  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.appDLBox_body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.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_txt {
  width: 100%;
  font-size: 12px;
}


/* ==================================================
arrow
================================================== */
.arrow {
  --sizeW: 56px;
  --sizeH: 24px;
  width: var(--sizeW);
  height: var(--sizeH);
  display: block;
  margin: var(--spaceMedium) auto;
}
.arrow:first-child { margin-top: 0; }
.arrow:last-child { margin-bottom: 0; }
.arrow::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--colorGray);
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
}
/* --- 重ねる --- */
.arrow-overlap {
  margin-top: calc(var(--sizeH) * -.5);
}
/* --- 上下余白 --- */
.arrow-spaceSmall {
  margin-top: 12px;
  margin-bottom: 12px;
}
/* --- サイズ --- */
.arrow-large {
  --sizeW: 80px;
  --sizeH: 30px;
}
/* --- 色 --- */
.arrow-yellow::after {
  background-color: #eddd21;
}


/* ==================================================
arrowBox
================================================== */
.arrowBox {
  margin: 40px 0 0;
}
.arrowBox:first-child { margin-top: 0; }
.arrowBox::after {
  content: '';
  width: 100%;
  height: 32px;
  display: block;
  background-color: #fff;
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
}
.arrowBox_inner {
  background-color: #fff;
  padding: 24px 20px;
}
.arrowBox_head {
}
.arrowBox_head_item {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  background-color: var(--subColor);
  border-radius: 12px;
  margin-top: 40px;
  padding: 16px 12px;
}
.arrowBox_head_item:first-child { margin-top: 0; }
.arrowBox_head_item::after {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -32px;
  background: url(/common_v3/images/arrowbox_icon_plus.svg) no-repeat center / contain;
  margin: auto;
}
.arrowBox_head_item:last-child::after { content: none; }
.arrowBox_head_sub {
  width: 40px;
  flex-shrink: 0;
}
.arrowBox_head_main {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.45;
}
.arrowBox_foot {
  margin-top: 24px;
}


/* ==================================================

================================================== */
.cirBox {
  width: 288px;
  min-height: 288px;
  position: relative;
  z-index: 0;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-align: center;
  padding-bottom: 4px;
}
.cirBox::before {
  content: '';
  width: 100%;
  aspect-ratio: 1 / 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #fff;
  border-radius: 50%;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  margin: auto;
}
.cirBox_head {
}
.cirBox_img {
  height: 100px;
  display: flex;
  justify-content: center;
}
.cirBox_head_ttl {
  min-height: calc(2em * 1.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1.5;
}
.cirBox_head_ttl_sub {
  font-size: 16px;
}
.cirBox_foot_ttl {
  color: var(--mainColor);
  font-size: 14px;
}
.cirBox_rate {
  display: flex;
  gap: 4px 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cirBox_rate_label {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
  background-color: var(--mainColor);
  border-radius: 4px;
  padding: 2px 2px 6px;
}
.cirBox_rate_main {
  color: var(--mainColor);
  font-family: var(--latoFont);
  font-size: 64px;
}
.cirBox_rate_per {
  color: var(--defaultColor);
  font-size: 44px;
  margin-left: 2px;
}
.cirBox_rate_to {
  font-size: 24px;
}
.cirBox_rate_sub {
  flex: 1 0 100%;
  font-size: 12px;
}
.cirBox_foot_unit {
  display: flex;
  gap: 20px;
  justify-content: center;
  line-height: 1;
  margin-top: 12px;
}
.cirBox_foot_unit_item {
  flex: 0 1 auto;
  position: relative;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  background-color: var(--subColor);
  border-radius: 8px;
  padding: 4px;
}
.cirBox_foot_unit_item::after {
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  right: -16px;
  top: 0;
  bottom: 0;
  background: url(/common_v3/images/arrowbox_icon_plus.svg) no-repeat center / contain;
  margin: auto;
}
.cirBox_foot_unit_item:last-child::after { content: none; }
.cirBox_foot_unit_num {
  width: 24px;
  height: 24px;
}
.cirBox_foot_unit_txt {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.cirBox_foot_unit_txt span {
  font-size: 12px;
  margin-top: auto;
}
.cirBox_foot_unit_txt::before {
  content: '';
  width: 16px;
  height: 14px;
  display: block;
  background-color: #fff;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  margin-right: 2px;
}


/* ==================================================
カテゴリ毎リンク
================================================== */
.catLink_ttl {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.33;
  border-bottom: 1px solid var(--mainColor);
  padding-bottom: 12px;
  margin-top: 24px;
}
.catLink_ttl:first-child { margin-top: 0; }
.catLink_ttl_icon {
  flex-shrink: 0;
}
.catLink_ttl_link {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
}
.catLink_ttl_link .linkIcon { margin: 0 0 0 auto; }
.catLink_list_ttl {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  margin-top: 16px;
}
.catLink_list_ttl:first-child { margin-top: 0; }
.catLink_list {
  --col: 1;
  --gapY: 16px;
  --gapX: 16px;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.4;
  margin-top: 16px;
}
.catLink_list:first-child { margin-top: 0; }
.catLink_list_itme,
.catLink_list_item {
  --tmp1: calc(calc(var(--col) - 1) * var(--gapX));
  --tmp2: calc(100% - var(--tmp1));
  --itemW: calc(var(--tmp2) / var(--col));
  flex: 0 0 auto;
  width: var(--itemW);
}
.catLink_list_txt {
  display: inline-flex;
  color: var(--defaultColor);
  text-decoration: none;
}
.catLink_list_txt .linkIcon {
  top: .2em;
  margin-right: 0;
}
/* インライン */
.catLink_list-auto .catLink_list_itme,
.catLink_list-auto .catLink_list_item {
  width: auto;
}


/* ==================================================
商品・サービス
================================================== */
.prodSec {
}
/* ----- タブ ----- */
.prod_tab {
  --swiper-pagination-bullet-size: 10px;
  --txtMH: 3em;
  --txtGap: 4px;
  margin-top: 32px;
  overflow: hidden;
}
.prod_tab_inner {
  padding: 0 20px;
  overflow: visible;
}
.prod_tab_inner::before,
.prod_tab_inner::after {
  content: '';
  width: 20px;
  height: calc(100% - 2px);
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  background-color: #fff;
}
.prod_tab_inner::before { left: 0; }
.prod_tab_inner::after { right: 0; }
/* 背景色グレーのセクション内使用の場合 */
.bgLGray .prod_tab_inner::before,
.bgLGray .prod_tab_inner::after {
  background-color: var(--colorLightGray);
}
/* - タブ（ボタン部分） - */
.prod_tab_list {
}
.prod_tab_list_item {
  height: auto;
  position: relative;
  padding: 0 4px 4px 0;
}
.prod_tab_list_item::before,
.prod_tab_list_item::after {
  content: '';
  width: 37px;
  height: 28px;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 32px);
  margin: auto;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  opacity: 0;
  visibility: hidden;
}
.prod_tab_list_item::before {
  background-color: var(--colorGray);
  margin-top: -1px;
}
.prod_tab_list_item::after {
  background-color: #fff;
}
.prod_tab_btn {
  width: 100%;
  height: 100%;
  display: flex;
  gap: var(--txtGap);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--defaultColor);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 8px;
  box-shadow: 4px 4px var(--colorGray);
  padding: 12px 4px;
  transition:
    box-shadow var(--defaultTrans),
    transform var(--defaultTrans),
    var(--transOpac);
}
.prod_tab_btn_icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod_tab_btn_txt {
  min-height: calc(var(--txtMH) * 1.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod_tab_navigation {
  margin-top: 16px;
}
.prod_tab_pagination {
  position: static;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.prod_tab_pagination > span {
  background-color: transparent;
  border: 1px solid var(--mainColor);
  border-radius: 50%;
  margin: 0 !important;
  opacity: 1;
  transition:
    var(--transBg),
    var(--transOpac);
}
.prod_tab_pagination .swiper-pagination-bullet-active {
  background-color: var(--mainColor);
}
.prod_tab_arrow {
  --icon: url(/common_v3/images/icon/icon_down.svg);
  width: 20px;
  height: 14px;
  margin-top: -16px;
}
.prod_tab_arrow::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;

  -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);
  background-color: var(--defaultColor);
}
.prod_tab_arrow.swiper-button-prev { left: 0; transform: rotate(90deg); }
.prod_tab_arrow.swiper-button-next { right: 0; transform: rotate(-90deg); }
/* アクティブ時 */
.prod_tab_list_item:has(.prod_tab_btn.is-active)::before,
.prod_tab_list_item:has(.prod_tab_btn.is-active)::after {
  opacity: 1;
  visibility: visible;
}
.prod_tab_btn.is-active {
  box-shadow: 0 0;
  transform: translate(4px, 4px);
}
/* - タブ（コンテンツ部分） - */
.prod_tab_contentWrap {
  display: none;
  position: relative;
  padding: 32px 0 20px;
}
.prod_tab_contentWrap:has(.prod_tab_content.is-active) { display: block; }
.prod_tab_content {
  display: none;
  width: 100%;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 8px;
  padding: 24px 20px 40px;
}
.prod_tab_content.is-active { position: static; }
.prod_tab_content .nmlBtn {
  --defaultFontSize: 14px;
  --smallFontSize: 12px;
  --marginTop: 20px;
}
.prod_tab_content .nmlBtn_text_main {
  font-size: var(--defaultFontSize);
}
.prod_tab_content .nmlBtn_text_sub {
  font-size: var(--smallFontSize);
}
/* - 一覧以外のコンテツ領域1 - */
.prod_tab_content_fst {
  border-bottom: 1px solid var(--colorGray);
  padding-bottom: 16px;
}
.prod_tab_content_fst:only-child {
  border-bottom: none;
  padding-bottom: 0;
}
.prod_tab_content_fst_body {
  font-weight: 500;
}
.prod_tab_content_fst_ttl {
  color: var(--mainColor);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .03em;
}
.prod_tab_content_fst_ttl > a {
  text-decoration: none;
}
.prod_tab_content_fst_ttl > a:hover {
  text-decoration: underline;
}
.prod_tab_content_fst_txt {
  margin-top: 16px;
}
.prod_tab_content_fst_txt:first-child { margin-top: 0; }
/* - 一覧以外のコンテツ領域2 - */
.prod_tab_content_snd {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.prod_tab_content_snd_item {
  margin-top: 24px;
}
.prod_tab_content_snd_item:first-child { margin-top: 0; }
/* 別レイアウト */
.prod_tab_content_snd_item-type2 {
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 16px;
  padding: 20px 16px;
}
.prod_tab_content_snd_ttl {
  font-size: 16x;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.3;
  border-left: 5px solid var(--mainColor);
  margin-top: 16px;
  padding-left: 10px;
}
.prod_tab_content_snd_ttl:first-child { margin-top: 0; }
/* - 閉じるボタン - */
.prod_tab_closeBtn {
  display: none;
  width: 120px;
  height: 38px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: center;
  background-color: var(--defaultColor);
  border-radius: 24px;
  margin: auto;
  transition: var(--transOpac);
}
.prod_tab_closeBtn::before {
  content: '';
  width: 16px;
  height: 16px;
  display: block;
  background: url(/common_v3/images/icon/icon_close_white.svg) no-repeat center center / contain;
}
.prod_tab_content.is-active ~ .prod_tab_closeBtn {
  display: flex;
}
.prod_tab_closeBtn:hover {
  opacity: var(--hoverOpac);
}
/* ----- テキスト高さ変更 ----- */
.sp_prod_tab-txtMH-2 {
  --txtMH: 2em;
  --txtGap: 8px;
}


/* ==================================================
特殊なステップコンテンツ
================================================== */
.stepSp {
  display: flex;
  gap: 20px;
}
.stepSp_col {
  --baseTtlColor: var(--mainColor);
  --ttlColor: var(--mainColor);
  --listColor: #fff;
  --arrowColor: var(--colorGray);
  flex: 1 0 0%;
}
.stepSp_ttl {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.2;
  background-color: var(--ttlColor);
  border-radius: 12px;
  padding: 4px 8px 4px 32px;
}
.stepSp_ttl_icon {
  width: 20px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.stepSp_list {
  --smallFontSize: 10px;
  --arrowW: 40px;
  --arrowH: 20px;
  --arrowGap: 28px;
  --arrowImg: url(/common_v3/images/icon/icon_triangle.svg);
  --arrowCount: 1;
  --itemH: 64px;
  --itemGap: 12px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  margin-top: 24px;
}
.stepSp_list_item {
  position: relative;
}
.stepSp_list_item::after {
  content: '';
  --size: var(--arrowW) calc(var(--arrowH) + var(--arrowGap));
  --tmp1: calc(var(--arrowH) * var(--arrowCount));
  --tmp2: calc((var(--arrowCount) - 1) * var(--arrowGap));
  width: var(--arrowW);
  height: calc(var(--tmp1) + var(--tmp2));
  display: block;
  background-color: var(--arrowColor);
  -webkit-mask-repeat: repeat-y;
  -webkit-mask-position: center;
  -webkit-mask-size: var(--size);
  -webkit-mask-image: var(--arrowImg);
  mask-repeat: repeat-y;
  mask-position: 0px calc(var(--arrowGap) * -.5);
  mask-size: var(--size);
  mask-image: var(--arrowImg);
  margin: 0 auto var(--itemGap);
}
.stepSp_list_item:last-child::after { content: none; }
.stepSp_txt {
  min-height: var(--itemH);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--listColor);
  border-radius: 12px;
  padding: 4px 8px;
}
.stepSp_img {
  min-height: var(--itemH);
  display: flex;
  justify-content: center;
}
.stepSp_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stepSp_link {
  min-height: var(--itemH);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  color: var(--defaultColor);
  text-decoration: none;
  text-align: left;
  border: 1px solid var(--baseTtlColor);
  border-radius: 12px;
  padding: 2px 20px 2px 8px;
}
.stepSp_link_num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--ttlColor);
  font-size: 10px;
}
.stepSp_link_txt {
}
.stepSp_linkIcon {
  width: 12px;
  height: 8px;
  position: absolute;
  right: 4px;
  top: 0;
  bottom: 0;
  background-color: var(--ttlColor);
  margin: auto;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transform: rotate(90deg);
}
.stepSp_link[href^="#"] .stepSp_linkIcon {
  transform: rotate(180deg);
}
.stepSp_icon {
  width: 32px;
  margin-right: 4px;
}
/* 色 */
.stepSp_col-orange {
  --ttlColor: var(--subColor);
  --listColor: var(--colorLightOrange);
  --arrowColor: var(--subColor);
}
/* 矢印の数 */
.arrowCount-2 { --arrowCount: 2; }
.arrowCount-3 { --arrowCount: 3; }
.arrowCount-4 { --arrowCount: 4; }
.arrowCount-5 { --arrowCount: 5; }
.arrowCount-6 { --arrowCount: 6; }
.arrowCount-7 { --arrowCount: 7; }
.arrowCount-2-sp { --arrowCount: 2; }
.arrowCount-3-sp { --arrowCount: 3; }
.arrowCount-4-sp { --arrowCount: 4; }
.arrowCount-5-sp { --arrowCount: 5; }
.arrowCount-6-sp { --arrowCount: 6; }
.arrowCount-7-sp { --arrowCount: 7; }
.arrowCount-8-sp { --arrowCount: 8; }
.arrowCount-9-sp { --arrowCount: 9; }
.arrowCount-10-sp { --arrowCount: 10; }
.arrowColor-none { --arrowColor: transparent; }
/* 左右矢印 */
.stepSp_list_item-arrowRight::before,
.stepSp_list_item-arrowLeft::before {
  content: '';
  width: 24px;
  height: 28px;
  display: block;
  position: absolute;
  top: 18px;
  background-color: var(--arrowColor);
  margin: auto;
  clip-path: polygon(0% 30%, 65% 30%, 65% 0%, 100% 50%, 65% 100%, 65% 70%, 0% 70%);
}
.stepSp_list_item-arrowRight::before {
  left: calc(100% - 4px);
}
.stepSp_list_item-arrowLeft::before {
  right: calc(100% - 4px);
  transform: scale(-1, 1);
}
/* 上余白 */
.stepSp_list[class*="empty"] {
  --tmp1: calc((var(--arrowH) + var(--itemH)) * var(--empty));
  --tmp2: calc(var(--empty) * var(--itemGap));
  padding-top: calc(var(--tmp1) + var(--tmp2));
}
.empty-1 { --empty: 1; }
.empty-2 { --empty: 2; }
.empty-3 { --empty: 3; }
.empty-4 { --empty: 4; }
.empty-5 { --empty: 5; }
.empty-6 { --empty: 6; }
.empty-7 { --empty: 7; }


/* ==================================================
ロゴリスト
================================================== */
.logoList {
  --col: 2;
  --gapY: 8px;
  --gapX: 8px;
  --maxW: 180px;
  --maxH: 46px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
  text-align: center;
  margin-top: 32px;
}
.logoList:first-child { margin-top: 0; }
.logoList_item {
  --tmp1: calc(calc(var(--col) - 1) * var(--gapX));
  --tmp2: calc(100% - var(--tmp1));
  --calcW: calc(var(--tmp2) / var(--col));
  flex: 0 0 auto;
  width: var(--calcW);
  height: 46px;
  margin: 0;
}
.logoList_item img {
  width: 100%;
  height: 100%;
  max-width: var(--maxW);
  max-height: var(--maxH);
  object-fit: contain;
}


/* ==================================================
比率
================================================== */
.ratioBox {
  display: grid;
  gap: var(--gapY, 24px) var(--gapX, 24px);
  grid-template-columns: var(--gTCol, 1fr);
  margin-top: 32px;
}
.ratioBox:first-child { margin-top: 0; }
.ratioBox_item {}


/* ==================================================
モーダル
================================================== */
.modal {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  padding: 10px;
  text-align: center;
  overflow: hidden;
}
.modal::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -2%;
}
.modal_inner {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  text-align: left;
  width: 100%;
}
.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: 8px 8px 0 0;
  padding: 24px 10px;
}
.modal_scroll_inner2 {
  text-align: center;
}
.modal_scroll_inner2 .box1_head:only-child > p {
  width: 100%;
}
.modal_close {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  color: #fff;
  background-color: #333333;
  border-radius: 0 0 8px 8px;
  padding: 8px;
  cursor: pointer;
}
.modal_close_txt {
  position: relative;
  color: #fff;
  font-size: var(--defaultFontSize);
  font-weight: bold;
  padding-left: 28px;
}
.modal_close_txt::before {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: url(/common_v3/images/icon/icon_close_white.svg) no-repeat center center / contain;
  margin: auto;
}


/* ==================================================
LPページ用box
================================================== */
/* ----- lpBox1 ----- */
.lpBox1 {
  --paddingY: 24px;
  --paddingX: 16px;
  --boxH: auto;
  --boxColor: var(--colorLightGray);
  --boxShadow: none;
  --boxBorder: none;
  --tipH: 48px;
  height: var(--boxH);
  margin-top: 24px;
}
.lpBox1.h100p, .lpBox1.pc_h100p { --boxH: 100%; }
.lpBox1:first-child { margin-top: 0; }
.lpBox1_inner {
  height: var(--boxH);
  background-color: var(--boxColor);
  border-radius: 16px;
  box-shadow: var(--boxShadow);
  border: var(--boxBorder);
  padding: var(--paddingY) var(--paddingX);
}
.lpBox1_tip + .lpBox1_inner {
  padding-top: calc((var(--tipH) * .5) + (var(--paddingY) * .75));
}
.lpBox1_tip {
  height: var(--tipH);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  margin-bottom: calc(var(--tipH) * -.5);
}
.lpBox1_tip_txt {
  height: 100%;
  display: grid;
  place-content: center;
  background-color: var(--mainColor);
  border-radius: 80px;
  margin: auto;
  padding: 4px 32px;
}
.lpBox1_tip-small {
  --tipH: 32px;
  font-size: 14px;
}
.lpBox1_tip-orange .lpBox1_tip_txt {
  background-color: var(--subColor);
}
.lpBox1_ttl {
  color: var(--mainColor);
  font-size: 22px;
  font-weight: bold;
}
.lpBox1:has(> .lpBox1_tip-icon) { --tipH: 120px; }
/* --- 色パターン --- */
.lpBox1-white { --boxColor: #fff; }
.lpBox1-lYellow { --boxColor: #FDFBEB; }
.lpBox1-green { --boxColor: var(--mainColor); }
.lpBox1-lGreen { --boxColor: var(--colorLightGreen); }
.lpBox1-orange { --boxColor: var(--subColor); }
/* --- 塗りつぶし別パターン --- */
.lpBox1-type2 {
  --boxColor: #fff;
  --boxBorder: 1px solid #B3B3B3;
}

/* ----- lpBox2 ----- */
.lpBox2 {
  --boxShadow: none;
  --paddingY: 20px;
  --paddingX: 16px;
  margin-top: 8px;
}
.lpBox2:first-child { margin-top: 0; }
.lpBox2_head {
  position: relative;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  color: var(--mainColor);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  transform: translateY(50%);
}
.lpBox2_head_txt {
  text-shadow: 0 0 5px #fff;
  filter:
    drop-shadow(5px 0px 1px #fff)
    drop-shadow(-5px 0px 1px #fff)
    drop-shadow(0px 5px 1px #fff)
    drop-shadow(0px -5px 1px #fff);
}
.lpBox2_body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--mainColor);
  border-radius: 16px;
  box-shadow: var(--boxShadow);
  padding: calc(var(--paddingY) + 20px) var(--paddingX) var(--paddingY);
}
.lpBox2_body_dotTtl {
  font-weight: bold;
  font-size: 20px;
  border-top: 2px dashed var(--colorGray);
  margin-top: 24px;
  padding-top: 24px;
}
/* 色 */
.lpBox2-gray { border-color: var(--colorGray); }
.lpBox2-red { border-color: var(--colorRed); }


/* ==================================================
区切り線有りの横並び
================================================== */
.colDivider {
  --gapY: 48px;
  --gapX: 24px;
  --col: 2;
  --line: solid;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
  margin-top: 24px;
}
.colDivider:first-child { margin-top: 0; }
.colDivider_item {
  --tmp1: calc(calc(var(--col) - 1) * var(--gapX));
  --tmp2: calc(100% - var(--tmp1));
  --w: calc(var(--tmp2) / var(--col));
  flex: 0 0 auto;
  width: var(--w);
  position: relative;
  margin: 0;
}
.colDivider_item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--gapY) * -.5);
  border-top: 1px var(--line) #707070;
}
.colDivider_item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--gapX) * -.5);
  bottom: 0;
  border-right: 1px var(--line) #707070;
}
/* 上線消し */
.colDivider.col1 > .colDivider_item:nth-child(-n+1)::before,
.colDivider.col2 > .colDivider_item:nth-child(-n+2)::before,
.colDivider.col3 > .colDivider_item:nth-child(-n+3)::before,
.colDivider.col4 > .colDivider_item:nth-child(-n+4)::before,
.colDivider.col5 > .colDivider_item:nth-child(-n+5)::before,
.colDivider.sp_col1 > .colDivider_item:nth-child(-n+1)::before,
.colDivider.sp_col2 > .colDivider_item:nth-child(-n+2)::before,
.colDivider.sp_col3 > .colDivider_item:nth-child(-n+3)::before,
.colDivider.sp_col4 > .colDivider_item:nth-child(-n+4)::before,
.colDivider.sp_col5 > .colDivider_item:nth-child(-n+5)::before { content: none; }
/* 横線消し */
.colDivider.col2 > .colDivider_item:nth-child(1n)::after,
.colDivider.col1 > .colDivider_item:nth-child(2n)::after,
.colDivider.col3 > .colDivider_item:nth-child(3n)::after,
.colDivider.col4 > .colDivider_item:nth-child(4n)::after,
.colDivider.col5 > .colDivider_item:nth-child(5n)::after,
.colDivider.sp_col1 > .colDivider_item:nth-child(1n)::after,
.colDivider.sp_col2 > .colDivider_item:nth-child(2n)::after,
.colDivider.sp_col3 > .colDivider_item:nth-child(3n)::after,
.colDivider.sp_col4 > .colDivider_item:nth-child(4n)::after,
.colDivider.sp_col5 > .colDivider_item:nth-child(5n)::after { content: none; }
/* 破線、点線 */
.colDivider-das { --line: dashed; }
.colDivider-dot { --line: dotted; }


/* ==================================================
横並びのアイテム間にプラスのアイコン付与をする
================================================== */
.joinPlus {
  --plusSize: 32px;
}
.joinPlus_item {
  position: relative;
}
.joinPlus_item::after {
  content: '';
  width: var(--plusSize);
  height: var(--plusSize);
  position: absolute;
  top: calc(100% + ((var(--gapY) - var(--plusSize)) * .5));
  left: 0;
  right: 0;
  background-color: var(--colorGray);
  margin: auto;
  clip-path: polygon(0% 40%, 40% 40%, 40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%);
}
/* --- 横にあるパターン --- */
.sp_joinPlus-horizontal > .joinPlus_item::after {
  top: calc(50% - 16px);
  left: calc(100% + ((var(--gapX) - var(--plusSize)) * .5));
  right: auto;
}


/* ==================================================
hrのようなテキスト
================================================== */
.hrTxt {
  display: flex;
  justify-content: center;
  position: relative;
  text-align: center;
  margin: var(--spaceMedium) 0;
  padding: 0 1.5em;
}
.hrTxt::before {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--colorGray);
  margin: auto;
}
.hrTxt > span {
  position: relative;
  background: #fff;
  padding: 0 .5em;
}