@charset "utf-8";
/* ==================================================
汎用
================================================== */
/* ----- アイコン ----- */
.icon {
  --iconW: 80px;
  --iconColor: var(--gradation01);
  width: var(--iconW);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #fff;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 32px;
  line-height: 1;
  text-align: center;
  background: var(--iconColor);
  border-radius: 50%;
  overflow: hidden;
}
.icon_img {
  /* max-width: 40px; */
}
.icon_sub {
  font-size: 14px;
}
/* - オプション - */
/* 色 */
.icon-orange { --iconColor: var(--subColor); }
.icon-lGray { --iconColor: var(--colorLightGray); }
.icon-bgNone { --iconColor: none; }
/* サイズ */
.icon-small {
  --iconW: 56px;
  font-size: 28px;
}

/* 金利系で使うマイナスアイコン */
.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: 56px;
  flex: 0 0 auto;
  width: var(--faqIconSize);
  height: var(--faqIconSize);
  color: #fff;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  text-align: center;
  line-height: var(--faqIconSize);
  border-radius: 50%;
  transition:
    var(--transColor),
    var(--transBg);
  /* letter-spacing: -.06em; */
}
.faqIcon_text {
  font-size: 24px;
}
.faqIcon-q { background-color: var(--mainColor); }
.faqIcon-a { background-color: var(--subColor); }


/* ----- アコーディオン（共通） ----- */
.js-acd {
  --acdIconColor: var(--mainColor);
  --acdIconPos: 24px;
  overflow: hidden;
}
/* - ボタン - */
.js-acd_btn {
  width: 100%;
  position: relative;
  background-color: #fff;
  transition: var(--transOpac);
}
.js-acd_btn[summary] { cursor: pointer; }
/* - アイコン - */
.js-acd_btn_icon {
  width: 50px;
  height: 50px;
  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;
}
/* - hover - */
.js-acd_btn:hover {
  opacity: var(--hoverOpac);
}
/* - 開閉 - */
.js-acd[open] .js-acd_btn_icon::before { transform: rotate(0); }
/* --- spのみアコーディオン --- */
.acd.acd-spOnly {
  border: none;
}
.acd.acd-spOnly > .acd_btn {
  padding: 0;
  cursor: auto;
}
.acd.acd-spOnly > .acd_btn .acd_btn_icon {
  display: none;
}
.acd.acd-spOnly > .acd_box {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin-top: 24px;
}
/* ----- アコーディオン（デフォルト） ----- */
.acd {
  border: 1px solid var(--mainColor);
  border-radius: 16px;
  margin-top: 40px;
  overflow: hidden;
}
.acd:first-child { margin-top: 0; }
.acd + .acd { margin-top: 32px; }
.acd .faqIcon { font-size: 22px; }
/* - ボタン - */
.acd_btn {
  display: flex;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.25;
  padding: 24px;
  transition:
    var(--transColor),
    var(--transBg),
    var(--transOpac);
}
.acd_btn_inner {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: center;
  padding-right: 50px;
}
div.acd_btn > .acd_btn_inner { padding-right: 0; }
.acd_btn_sub {
  font-size: 18px;
}
.acd_btn_icon {

}
/* - コンテンツ - */
.acd_box {
  position: relative;
  background: #fff;
  border-top: 1px solid var(--mainColor);
  padding: 24px;
}
.acd_box_inner {
  width: 100%;
}
.acd_box_inner > .faqIcon-a {
  position: absolute;
}
.acd_box_inner2 {
  margin-top: 24px;
}
.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: 56px;
  padding-left: 72px;
}
.acd_box.wideBox .faqIcon-a + .acd_box_main,
.acd_box.pc_wideBox .faqIcon-a + .acd_box_main {
  padding-left: 0;
  padding-top: 60px;
}
/* - パターン2 - */
.acd-type2 {
  --acdIconColor: #fff;
  border: none;
  border-radius: 0;
}
.acd-type2 .acd_btn {
  width: 420px;
  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 24px;
}
.acd-type2 .acd_box {
  background: none;
  border-top: none;
  padding: 48px 0 0;
}

/* ----- 横スクロール（要素は動的生成される） ----- */
.scrollX-pc {
  width: 1600px;
}
.scrollX_container {
  width: 100%;
  position: relative;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: 40px;
}
.scrollX_container:first-child { margin-top: 0; }
.scrollX_container::-webkit-scrollbar{
  display:none;
}
.scrollX_scrollOverlay {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .7;
}
.scrollX_scrollIcon {
  position: absolute;
  left: 50%;
  top: 70px;
  z-index: 11;
  transform: translateX(-50%);
  padding-left: 72px;
}
.scrollX_scrollIcon span {
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}
.scrollX_scrollIcon::after {
  position: absolute;
  left: 0;
  top: -15px;
  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); }
}
.scrollX-sp { margin-top: 40px; }
.scrollX-sp:first-child { margin-top: 0; }

/* ----- マーカー表現 ----- */
.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: 328px;
  --slideGap: 48px;
  --linkIcon: url(/common_v3/images/icon/icon_link.svg);
  --linkIconW: 12px;
  --linkIconH: 12px;
  --swiper-navigation-size: 46px;
  --swiper-navigation-sides-offset: calc(var(--swiper-navigation-size) * -.5);
  position: relative;
  margin-top: 40px;
}
.uniSlider:first-child { margin-top: 0; }
.uniSlider_inner {
  margin: 0 calc(var(--slideGap) * -.5);
}
.uniSlider-wide .uniSlider_inner {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.uniSlider_list {
}
.uniSlider_slide {
  width: calc(var(--slideWidth) + var(--slideGap));
  height: auto;
  padding: 0 calc(var(--slideGap) * .5);
}
.uniSlider_slide > a {
  transition: var(--transOpac);
}
.uniSlider_slide > a:hover {
  opacity: var(--hoverOpac);
}
.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: 12px;
  height: 12px;
  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:hover {
  background-color: var(--navigationColor_on);
  opacity: var(--hoverOpac);
}
.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_control:hover {
  --controlIconColor: var(--navigationColor_off);
  background-color: var(--navigationColor_on);
}
/* 矢印 */
.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);
  opacity: 0;
  transition:
    var(--transBg),
    var(--transOpac);
}
.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_arrow:hover {
  background-color: #000;
}
.uniSlider:hover .uniSlider_arrow {
  opacity: 1;
}
/* アイコン違い */
.uniSlider_arrows-icon2 {
  --icon: url(/common_v3/images/icon/icon_down.svg);
  --iconW: 27px;
  --iconH: 18px;
}
.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-navType2 .uniSlider_arrow:hover { opacity: var(--hoverOpac); }
/* カード部分 */
.uniSlider_card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  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;
}
a.uniSlider_card {
  transition: var(--transBg);
}
a.uniSlider_card:hover {
  background-color: var(--colorLightGreen);
  opacity: 1;
}
.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-weight: 500;
  font-size: 16px;
  letter-spacing: .03em;
  margin-top: 16px;
}
.uniSlider_card_linkIcon {
  width: var(--linkIconW);
  height: var(--linkIconH);
  position: absolute;
  right: 14px;
  bottom: 14px;
}
.uniSlider_card_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--mainColor);

  -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);
}
a.panel_inner[target="_blank"] {
  --linkIcon: url(/common_v3/images/icon/icon_blank.svg);
}
a.panel_inner[href$=".pdf"] {
  --linkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --linkIconW: 37px;
  --linkIconH: 18px;
}

/* ----- スライダー化しなかったとき ----- */
.uniSlider.is-notSlider .uniSlider_navigation {
  display: none;
}
.uniSlider.is-notSlider .uniSlider_list {
  justify-content: center;
}
/* ----- お金に関するお役立ちコラムスライダー ----- */
.moneySlider {
  --slideWidth: 424px;
  --slideGap: 24px;
  width: 872px;
  margin-left: auto;
  margin-right: auto;
}
.moneySlider .uniSlider_card {
  padding: 20px;
}
.moneySlider .uniSlider_card_thumb {
  aspect-ratio: 376 / 185;
  border-radius: 0;
}


/* ==================================================
heading
================================================== */
/* ----- h1 ----- */
.heading1 {
  --heading1GapY: 0;
  --heading1GapX: 0;
  --heading1Rows: max-content;
  --heading1Columns: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 24px 0;
}
.heading1:has(.heading1_foot) {
  --heading1GapY: 24px;
  --heading1Rows: max-content 1fr;
}
.heading1:has(.heading1_extra) {
  --heading1GapX: 24px;
  --heading1Columns: max-content 1fr;
}
.heading1_inner {
  width: 100%;
  max-width: calc(1080px + var(--contentPaddingXDouble));
  display: grid;
  gap: var(--heading1GapY) var(--heading1GapX);
  grid-template-rows: var(--heading1Rows);
  grid-template-columns: var(--heading1Columns);
  margin: auto;
  padding: 0 var(--contentPaddingX);
}
/* 白枠部分 */
.heading1_head {
  display: flex;
  gap: 12px;
  flex-direction: column;
  line-height: 1.3;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  padding: 40px;
}
.heading1_head_inner {
  display: flex;
  gap: 12px;
  flex-direction: column;
}
.heading1_ttl {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--mainColor);
  font-size: 40px;
  font-weight: bold;
  letter-spacing: .05em;
}
.heading1_subTtl {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .05em;
}
.heading1_ttl_icon {
  flex-shrink: 0;
}
.heading1_ttl2 {
  display: flex;
  gap: 12px;
  flex-direction: column;
}
/* 白枠外 */
.heading1_foot {
}
.heading1_foot .nmlBtn {
  --btnPos: flex-start;
  --nmlBtnMaxW: 320px;
  --nmlBtnMinH: 54px;
  row-gap: 16px;
  align-items: flex-start;
}
.heading1_foot .nmlBtn_text_sub {
  font-size: 16px;
}
.heading1_foot .nmlBtn_icon {
  left: 16px;
}
.heading1_foot .smlBtn {
  --smlBtnW: 320px;
}
.heading1_foot .smlBtn_text_main {
  font-size: 16px;
}
/* 追加エリア（右側） */
.heading1_extra {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 100%;
  justify-self: end;
  position: relative;
}

/* - h1（背景画像有り） - */
.heading1-typeImg {
  min-height: 385px;
}
.heading1-typeImg .heading1_inner {
}
.heading1-typeImg .heading1_head,
.heading1-typeImg .heading1_foot {
  min-width: 415px;
  max-width: 640px;
  position: relative;
}
.heading1-typeImg .heading1_head {
  grid-row: 1;
  grid-column: 1;
}
.heading1-typeImg .heading1_foot {
  grid-row: 2;
  grid-column: 1;
}
.heading1_img {
  width: 100%;
  height: 385px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 0;
}
.heading1_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.heading1-imgOnly {
  padding: 0;
}
.heading1-imgOnly .heading1_img {
  height: auto;
  position: relative;
}

/* - h1 スライダー - */
.heading1_slider {
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-size: 46px;
  width: 100%;
  max-width: 400px;
  position: absolute;
  top: 0;
  right: 0;
}
.heading1_slider_inner {
  border-radius: 16px;
}
.heading1_slider_slide {
  background: #ccc;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}
a.heading1_slider_slide_inner {
  transition: opacity .4s ease;
}
a.heading1_slider_slide_inner:hover { opacity: .7; }
/* ページネーションや矢印などを内包している */
.heading1_slider_navigation {
  --navigationColor_on: var(--mainColor);
  --navigationColor_off: #fff;
  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: 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;
}
.heading1_slider_pagination span:hover {
  background-color: var(--navigationColor_on);
  opacity: var(--hoverOpac);
}
.heading1_slider_pagination span.swiper-pagination-bullet-active {
  background: var(--navigationColor_on);
  user-select: none;
  pointer-events: none;
}
/* 再生/停止ボタン */
.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(--navigationColor_on);
  text-align: center;
  background: transparent;
  border: 1px solid var(--navigationColor_on);
  border-radius: 50%;
  padding: 0;
  transition:
    var(--transColor),
    var(--transBg);
}
.heading1_slider_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);
}
.heading1_slider_control.is-pause {
  --controlIcon: url(/common_v3/images/icon/icon_start.svg);
}
.heading1_slider_control:hover {
  --controlIconColor: var(--navigationColor_off);
  background-color: var(--navigationColor_on);
}
/* 矢印 */
.heading1_slider_arrow {
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  opacity: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .5);
  transition:
    var(--transBg),
    var(--transOpac);
}
.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);
}
/* ホバー */
.heading1_slider:hover .heading1_slider_arrow {
  opacity: 1;
}
.heading1_slider_arrow:hover {
  background-color: var(--mainColor);
}
/* スライドが1枚の時 */
.heading1_slider.swiper-onlySlide .heading1_slider_navigation {
  display: none;
}
/* 背景色があるパターン（secondviewが続けてあるパターン） */
.bgMain .heading1_slider_navigation {
  --navigationColor_on: #fff;
  --navigationColor_off: var(--mainColor);
}
.bgMain .heading1_slider_control {
  --controlIconColor: #fff;
}
.bgMain .heading1_slider_control:hover {
  --controlIconColor: var(--mainColor);
  background-color: #fff;
}
/* - h1（背景画像無し） - */
.heading1-typeTxt {
  --heading1Columns: 1fr;
  background: #F7F7F7;
  /* margin-bottom: 80px; */
  padding: 24px 0;
}

/* footがなくてスライダーがあるパターン */
.heading1-pattern2 {
  height: 385px;
  padding-top: 0;
  padding-bottom: 0;
}
.heading1-pattern2 .heading1_inner {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 24px;
  padding-bottom: 24px;
}
.heading1-pattern2 .heading1_extra {
  position: absolute;
  top: 12px;
  right: var(--contentPaddingX);
}

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


/* ----- secondView ----- */
.secondView {
  position: relative;
  padding: 40px 0 0;
}
.heading1:has(.heading1_extra) + .secondView { padding-top: 148px; }
.secondView_bg {
  --icon2Margin: 60px 0 0 0;
  width: 100%;
  height: 430px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  background-color: var(--mainColor);
  padding: 32px 48px;
}
.secondView_bg_icon {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
}
.secondView_bg_icon:nth-child(2) { margin: var(--icon2Margin); }
.secondView_bg-iconTop {
  --icon2Margin: auto 0 0 0;
  align-items: flex-start;
}
.secondView_bg-iconBottom {
  --icon2Margin: 0 0 auto 0;
  align-items: flex-end;
}
.secondView_inner {
  max-width: var(--contentMaxWidth);
  margin: auto;
  padding: 0 var(--contentPaddingX);
}
/* - 見出し部分 - */
.secondView_heading {
  --color: #fff;
  position: relative;
  display: flex;
  justify-content: center;
  color: var(--color);
  font-size: 26px;
  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: 72px;
  font-family: "Lato", sans-serif;
  line-height: 1;
}
.secondView_list {
  --col: 4;
  --gapY: 24px;
  --gapX: 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
  text-align: center;
  margin-top: 16px;
}
.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);
  max-width: 560px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.secondView_list_item.w100p { width: 100%; }
.secondView_list_item.w100p .secondView_list_item_inner,
.secondView_list_item.pc_w100p .secondView_list_item_inner { min-height: auto; }
.secondView_list_item_inner {
  flex: 1 1 auto;
  min-height: 150px;
  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: 20px 8px;
  transition: var(--transBg);
}
a.secondView_list_item_inner:hover { background-color: var(--colorLightGreen); }
.icon + .secondView_list_item_inner { padding-top: 40px; }
.secondView_ttl {
  --defaultLineHeight: 1.55;
  min-height: calc(2em * 1.55);
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  line-height: var(--defaultLineHeight);
  letter-spacing: .05em;
}
.secondView_label {
  color: var(--mainColor);
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.875;
  border: 2px solid var(--mainColor);
  border-radius: 20px;
  margin-inline: auto;
  padding: 2px 24px;
}
.secondView_highlight {
  color: var(--mainColor);
  font-size: 21px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0;
}
.secondView_highlight-large {
  font-size: 34px;
}
.secondView_highlight:only-child {
  margin: auto;
}
.secondView_txt {
  font-size: 14px;
}
.secondView_time {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}
.secondView_time_highlight {
  color: var(--mainColor);
  font-size: 48px;
}
.secondView_txt2 {
  color: var(--mainColor);
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}
.secondView_txt2 > span {
  font-size: 75px;
}
.secondView_txt3 {
  font-size: 24px;
  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 / auto,
    url(/common_v3/images/sv2_bg_item_02.svg) no-repeat left bottom / auto,
    #FDFBEB;
  padding: 48px 0 56px;
}
.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: calc(var(--contentWidth) + var(--contentPaddingXDouble));
  margin: 0 auto;
  padding: 0 var(--contentPaddingX);
}
.sv2_heading {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.5;
  text-align: center;
}
.sv2_commentBox {
  --itemBg: transparent;
  --itemPaddingX: 0px;
  --itemPaddingY: 0px;
  display: flex;
  gap: var(--gapY, 40px) var(--gapX, 36px);
  flex-wrap: wrap;
  text-align: center;
  margin: 48px 0 0;
}
.sv2_commentBox:has(.sv2_comment_head_col) {
  column-gap: var(--gapX, 24px);
}
.sv2_commentBox_item {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  background-color: var(--itemBg);
  border-radius: 24px;
  margin: 0 auto;
  padding: var(--itemPaddingY) var(--itemPaddingX);
}
.sv2_commentBox_item_inner {
}
.sv2_comment_head {
  max-width: 286px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .03em;
  line-height: 1.6;
  padding: 0 0 62px;
}
.sv2_comment_head::after {
  content: '';
  width: 296px;
  aspect-ratio: 148 / 35;
  display: block;
  position: absolute;
  bottom: 0;
  background: url(/common_v3/images/sv2_comment_item.svg) no-repeat center / contain;
}
.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: 24px;
}
.sv2_comment_head_link:hover {
  text-decoration: underline;
}
.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 {
  margin-top: 16px;
}
.sv2_comment_icon {
  width: 150px;
  height: 150px;
  display: flex;
  position: relative;
  margin: auto;
}
.sv2_comment_icon::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 8px;
  left: 8px;
  background: url(/common_v3/images/sv2_comment_iconbg.svg) no-repeat center / contain;
}
.sv2_comment_icon img {
  position: relative;
}
.sv2_comment_tag {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--largeFontSize);
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  background-color: #fff;
  border: 1px solid var(--mainColor);
  border-radius: 28px;
  margin: 20px auto;
  padding: 4px;
}
.sv2_comment_tag:first-child { margin-top: 0; }
.sv2_comment_tag:last-child { margin-bottom: 0; }
/* - コメントが2つあるパターン - */
.sv2_comment_head_col {
  flex: 1 1 auto;
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.sv2_comment_head_col .sv2_comment_head {
  width: 248px;
  font-size: 18px;
}
.sv2_comment_head_col .sv2_comment_head::after {
  width: 248px;
}
.sv2_comment_head_col .sv2_comment_head:first-child::after {
  transform: scale(-1, 1);
}
/* - 4カラムになるパターン - */
.sv2_commentBox.col4 {
  column-gap: 24px;
}
.sv2_commentBox.col4 .sv2_comment_head,
.sv2_commentBox.col4 .sv2_comment_head::after {
  width: 252px;
}
.sv2_msg {
  width: 850px;
  margin: auto;
}
.sv2_msg_head {
  display: flex;
}
.sv2_msg_human {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-left: 20px;
}
.sv2_msg_ttl {
  flex: 1 1 auto;
  display: flex;
  gap: 24px;
  flex-direction: column;
  text-align: center;
  padding-bottom: 32px;
}
.sv2_msg_ttl_sub {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mainColor);
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  border: 1px solid var(--mainColor);
  border-radius: 28px;
  margin: 0 auto;
  padding: 4px 24px;
}
.sv2_msg_ttl_main {
  position: relative;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.525;
  margin: 0 auto;
  padding-right: 34px;
}
.sv2_msg_ttl_main_txt {
  background: linear-gradient(to bottom, transparent 65%, #EDDD21 65%);
}
.sv2_msg_ttl_main_txt img {
  width: 34px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -12px;
  margin: auto;
}
.sv2_msg_foot {
  background-color: var(--mainColor);
  border-radius: 16px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  padding: 24px 32px;
}
.sv2_msg_foot_txt {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: .03em;
}
.sv2_commentBox_arrow {
  width: 100%;
  text-align: center;
  margin-top: 40px;
}
.sv2_commentBox_arrow + .catch {
  text-align: center;
  margin: 24px auto;
}
/* - 背景色があるパターン - */
.sv2_commentBox-type2 {
  --gapX: 12px;
  --itemPaddingY: 24px;
  --itemPaddingX: 12px;
  column-gap: var(--gapX, 8px);
}
.sv2_commentBox_item-lGreen { --itemBg: var(--colorLightGreen); }
.sv2_commentBox_item-lOrange { --itemBg: var(--colorLightOrange); }

/* ----- h2 ----- */
.heading2 {
  --color: var(--defaultColor);
  --heading2BorderCont: '';
  --heading2IconSize: 100px;
  display: flex;
  gap: 20px;
  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: 80px 0 72px;
}
.heading2:first-child { margin-top: 0px; }
.heading2:last-child { margin-bottom: 0px; }
.heading2::before,
.heading2::after {
  content: var(--heading2BorderCont);
  flex: 1 0 120px;
  height: 1px;
  display: block;
  background-color: var(--color);
}
.heading2_txt_sub {
  font-size: 28px;
}
.heading2:has(.heading2_icon) {
  position: relative;
  padding-top: calc(var(--heading2IconSize) + 16px);
}
.heading2_icon {
  width: var(--heading2IconSize);
  height: var(--heading2IconSize);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 40px;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  margin: auto;
}
/* - 色 - */
.heading2-white { --color: #fff; }
/* - 横線の無しパターン - */
.heading2-type2 { --heading2BorderCont: none; }
/*  */
.heading2-iconSizeM { --heading2IconSize: 64px; }


/* ----- h2（h4寄りのデザイン） ----- */
.heading2Simple {
  position: relative;
  color: var(--defaultColor);
  font-size: var(--fontSizeH2);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .05em;
  margin: 48px 0 40px;
  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: 8px solid var(--mainColor);
  margin: 64px 0 40px;
  padding-left: 10px;
}
.heading3:first-child { margin-top: 0px; }
.heading3:last-child { margin-bottom: 0px; }
.heading3_sub {
  font-size: 24px;
}
.heading3 > .icon {
  display: inline-flex;
  margin-right: 12px;
}
/* アイコンありパターン */
.heading3:has(.heading3_icon) {
  display: flex;
  align-items: center;
}
.heading3_icon {
  flex-shrink: 0;
  display: flex;
  margin-right: 8px;
}

/* ----- h4 ----- */
.heading4 {
  font-size: var(--fontSizeH4);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.5;
  margin: 40px 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: 26px;
  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: 36px auto 24px;
}
.headingSp:first-child { margin-top: 0; }
.headingSp:last-child { margin-bottom: 0; }
.headingSp + .headingSp { margin-top: 24px; }
.headingSp_head {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.headingSp_foot {
  display: flex;
  gap: 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  text-align: center;
  margin-top: 12px;
}
.headingSp_ttl {
  place-content: center;
  font-size: 28px;
  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: 12px;
  margin-left: 0;
}
.headingSp-horiz .headingSp_foot {
  margin-top: 0;
}
.headingSp-horiz .headingSp_ttl {
  font-size: 22px;
  text-align: left;
}



/* ----- キャッチコピー ----- */
.catch {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.5;
  text-align: center;
  margin-top: 64px;
}
.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: 50px;
}
.catch_charge_price {
  color: var(--colorRed);
  line-height: 1;
}
.catch_charge_price > span {
  font-size: 80px;
}
.catch strong {
  color: var(--mainColor);
}
/* 文字サイズ */
.catch-small {
  font-size: 24px;
}
/* 斜線有りのキャッチ */
.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 {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.catch_human {
  flex-shrink: 0;
}
/* ロゴ画像 */
.catch_logoList {
  --gap: 40px;
  display: flex;
  gap: var(--gap);
  align-items: center;
  margin: 28px 0;
}
.catch_logoList:first-child { margin-top: 0; }
.catch_logoList:last-child { margin-bottom: 0; }
.catch_logoList > li {
  display: flex;
  align-items: center;
  position: relative;
}
.catch_logoList > li::after {
  content: '';
  width: 1px;
  height: 48px;
  display: block;
  background-color: var(--defaultColor);
  margin-left: var(--gap);
}
.catch_logoList > li:last-child::after { content: none; }


/* ==================================================
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: 16px;
  padding: 8px 12px;
}
.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: 20px;
  text-align: center;
  line-height: 1.5;
  margin-top: 32px;
}
.nmlTitle:first-child { margin-top: 0; }
/* 枠線 */
.nmlTitle-type2 {
  width: 650px;
  font-weight: bold;
  text-align: center;
  border: 2px solid var(--mainColor);
  margin: 40px auto 24px;
  padding: 8px 0;
}

/* ----- バナー ----- */
.nmlBanner {
  text-align: center;
  margin-top: 32px;
}
.nmlBanner:first-child { margin-top: 0; }
.nmlBanner img { max-width: 100%; }
.nmlBanner a { transition: var(--transOpac); }
.nmlBanner a:hover,
.nmlBanner a:focus { opacity: var(--hoverOpac); }

/* ----- 金利テキスト ----- */
.rateTtl {
  width: fit-content;
  font-size: 20px;
  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: 16px;
  letter-spacing: 0.1em;
  line-height: 1.875;
  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: 20px;
  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: 14px;
  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.25);
  display: flex;
  align-items: center;
  margin: 0;
}
.rateInfo_arrow {
  --lineHeight: 1.25;
  font-size: 14px;
}
.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: 14px;
  font-weight: var(--defaultFontWeight);
  letter-spacing: .03em;
  line-height: 1.5;
  text-align: center;
}
/* - 特定のコンポネ内でのスタイル調整 - */
.secondView .rateInfo_subTxt { margin-top: -4px; }
/* - 文字小さいパターン - */
.rateInfo-small {
  --strongSize: 34px;
}
/* - 縦パターン= */
.rateInfo-vertical,
.rateInfo-pcVertical {
  gap: 0;
  flex-direction: column;
  align-items: center;
}
.rateInfo-vertical .rateInfo_wave,
.rateInfo-pcVertical .rateInfo_wave {
  height: auto;
  margin: 0 auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* ----- 金利テキスト2 ----- */
.rateInfo2 {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.45;
}
.rateInfo2_strong {
  font-size: 32px;
}

/* ----- 金利テキスト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-pc_small {
  --iconSize: 40px;
}


/* ==================================================
List
================================================== */
/* ----- 通常リスト ----- */
.cirList {
  --cirColor: var(--mainColor);
  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.75em;
}
.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: 20px;
  font-weight: bold;
}
.cirList-large > li::before {
  width: 1em;
  height: 1em;
  top: calc(.2em * var(--defaultLineHeight));
}
/*  */
.cirList.col2 {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.cirList.col2 > li {
  margin-top: 0;
}

/* ----- 数字リスト ----- */
.numList {
  --numListColor: var(--mainColor);
  counter-reset: num1;
  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.75em;
}
.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;
  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 {
  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.75em;
}
.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-inline {
  --gapY: 20px;
  --gapX: 32px;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
}
.checkList-inline > li { margin-top: 0; }
/* --- 大きめ --- */
.checkList-large {
  font-size: 20px;
  font-weight: bold;
}


/* ----- 注釈リスト ----- */
.noteList {
  --noteListColor: var(--colorRed);
  font-size: 14px;
  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: 2em;
}
.noteList > li:first-child { margin-top: 0; }
.noteList > li::before {
  content: "\203B";
  width: 1.65em;
  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: 14px;
  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;
  margin-top: 32px;
}
.nmlDList:first-child { margin-top: 0; }
.nmlDList > dt {
  color: var(--mainColor);
  font-size: 20px;
  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 {
  --floatDListCol: auto;
  --dlGap: 24px;
  --bb: 1px solid var(--colorGray);
  --pb: calc(var(--dlGap) - 4px);
  display: grid;
  gap: var(--dlGap) 0;
  grid-template-columns: var(--floatDListCol) 1fr;
  margin-top: 32px;
}
.floatDList:first-child { margin-top: 0; }
.floatDList > dt,
.floatDList > dd {
  border-bottom: var(--bb);
  padding-bottom: var(--pb);
}
.floatDList-borderNone,
.floatDList > dt.borderNone,
.floatDList > dd.borderNone {
  --bb: none;
  --pb: 0px;
}
.floatDList > dt {
  color: var(--mainColor);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  padding-right: 8px;
}
.floatDList > dt > a { color: inherit; }
.floatDList > dd {
  line-height: 1.75;
  padding-left: 16px;
}
.floatDList-plNone > dd { padding-left: 0; }
.floatDList-per05 { --floatDListCol:  5%; }
.floatDList-per10 { --floatDListCol: 10%; }
.floatDList-per15 { --floatDListCol: 15%; }
.floatDList-per20 { --floatDListCol: 20%; }
.floatDList-per25 { --floatDListCol: 25%; }
.floatDList-per30 { --floatDListCol: 30%; }
.floatDList-per35 { --floatDListCol: 35%; }
.floatDList-per40 { --floatDListCol: 40%; }
.floatDList-per45 { --floatDListCol: 45%; }
.floatDList-per50 { --floatDListCol: 50%; }
.floatDList-per55 { --floatDListCol: 55%; }
.floatDList-per60 { --floatDListCol: 60%; }
.floatDList-per65 { --floatDListCol: 65%; }
.floatDList-per70 { --floatDListCol: 70%; }
.floatDList-per75 { --floatDListCol: 75%; }
.floatDList-per80 { --floatDListCol: 80%; }
.floatDList-per85 { --floatDListCol: 85%; }
.floatDList-per90 { --floatDListCol: 90%; }
.floatDList-per95 { --floatDListCol: 95%; }
/* - 文字サイズ（小） - */
.floatDList-small {
  --dlGap: 12px;
  margin-top: 16px;
}
.floatDList-small > dt,
.floatDList-small > dd {
  font-size: var(--defaultFontSize);
  line-height: var(--defaultLineHeight);
}
/* 通常文字色 */
.floatDList-defaultColor dt {
  color: var(--defaultColor);
}
/* - 下線無し、文字サイズ（小）、文字色デフォなどの詰め込み - */
.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: 20px;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
}
.list-inline > li {
  margin-top: 0;
}

/* ==================================================
テーブル
================================================== */
.nmlTable {
  --paddingY: 16px;
  --paddingX: 20px;
  width: 100%;
  table-layout: fixed;
  margin-top: 40px;
}
.nmlTable:first-child { margin-top: 0; }
.nmlTable caption {
  font-size: 18px;
  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: 18px;
  font-weight: bold;
  text-align: left;
  background-color: var(--mainColor);
}
.nmlTable th.bgLGray {
  color: var(--defaultColor);
}
/* thead内のth */
.nmlTable thead th {
  height: 80px;
  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 {
  min-height: 60px;
  background: #fff;
}
/* - オプション - */
/* thのテキストを左右中央 */
.nmlTable.taC tbody th { text-align: center; }
/* - 小さいパターン（テーブル内にテーブルがある場合に使用） - */
.nmlTable-small {
  --paddingY: 8px;
  --paddingX: 8px;
}
.nmlTable-small th { font-size: 16px; }
.nmlTable-small td { font-size: 14px; }
.nmlTable-small thead th { height: auto; }
/* 別色グレーテーブル */
.nmlTable-type2 th {
  background-color: #6E6E6E;
}


/* ==================================================
金利のテーブル
================================================== */
.rateTable {
  --paddingY: 12px;
  --paddingX: 12px;
  width: 100%;
  height: 100%;
  table-layout: fixed;
  text-align: center;
  margin: 40px auto 0;
}
.rateTable:first-child { margin-top: 0; }
.rateTable th,
.rateTable td {
  font-weight: bold;
  vertical-align: middle;
  padding: var(--paddingY) var(--paddingX);
}
/* - th - */
.rateTable th {
  font-size: 20px;
}
/* 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: 32px;
}
.rateTable_arrow_td {
  --paddingY: 0;
  --paddingX: 16px;
  height: 150px;
}
.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_txt_strong {
  color: var(--defaultColor);
}


/* ==================================================
ボックス
================================================== */
.box1 .headingSp { margin-bottom: 0; }
/* ----- ボックス1 ----- */
.box1 {
  --boxShadow: none;
  --paddingY: 20px;
  --paddingX: 20px;
  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: 24px;
  font-weight: bold;
}
.box1_body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.box1_body_dotTtl {
  font-weight: bold;
  font-size: 20px;
  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: 24px;
}
.box2:first-child { margin-top: 0; }
.box2_head {
  display: flex;
  gap: 16px;
  align-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  background: var(--box2Color);
  border-radius: 16px 16px 0 0;
  padding: 24px;
}
.box2_head:only-child { border-radius: 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: 16px 24px 24px;
}
/* - 色 - */
.box2-orange {
  --box2Color: var(--subColor);
}
/* - アイコン画像 - */
.box2_head_icon {
  width: 32px;
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* - アコーディオンパターン - */
.box2.js-acd {
  --acdIconColor: #fff;
}
.box2.js-acd:not([open]) .box2_head {
  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.pc_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: 24px;
  font-weight: bold;
}
.box3_ttl_sub {
  color: var(--box3TtlColor);
  font-size: 20px;
  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: 32px; }
/* - ボックス3 背景色なし、枠線有りパターン - */
.box3-reverse .box3_inner {
  background-color: #fff;
  border: 1px solid var(--box3Color);
}
/* 見出し上にあるワンポイント */
.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: 14px;
  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: 24px;
  font-family: var(--latoFont);
  background-color: #fff;
  border: 1px solid var(--subColor);
  border-radius: 0 8px 8px 0;
  padding: 4px 8px;
}
/* - ボックス3 特殊な見出し - */
.box3_spTtl {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.16;
  letter-spacing: .05em;
}
.box3_spTtl .icon {
  width: 56px;
  font-size: 28px;
}
/* - ボックス3 金利 - */
.box3_rate {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
}
.box3_rate:first-child { margin-top: 0; }
.box3_rate_label {
  min-width: 98px;
  flex-shrink: 0;
  color: var(--mainColor);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border: 2px solid var(--mainColor);
  border-radius: 8px;
  line-height: 1.33;
  letter-spacing: .1em;
  padding: 4px 8px;
}
.box3_rate_txt {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1;
}
.box3_rate_txt > span {
  color: var(--mainColor);
  font-size: 52px;
}
.box3_rate_txt.txtMarker {
  padding-bottom: .35em;
}
.box3_rate_note {
  position: relative;
  font-size: 14px;
  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{
  --paddingY: 64px;
  margin-top: 80px;
}
.box3-house:first-child { margin-top: 0; }


/* ----- 注意喚起用ボックス ----- */
.cautionBox {
  --boxColor: var(--colorRed);
  --acdIconColor: #fff;
  --acdIconPos: 8px;
  margin-top: 24px;
}
.cautionBox:first-child { margin-top: 0; }
.cautionBox_head {
  display: flex;
  gap: 16px;
  align-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  background: var(--boxColor);
  border-radius: 16px 16px 0 0;
  padding: 24px;
}
.cautionBox_head:only-child { border-radius: 16px; }
.cautionBox_body {
  background-color: #fff;
  border: 1px solid var(--boxColor);
  border-radius: 0 0 16px 16px;
  padding: 16px 24px 20px;
}
.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: 44px;
}
.cautionBox:not([open]) .js-acd_btn {
  border-radius: 16px;
}
/* - 灰色パターン - */
.cautionBox-gray {
  --boxColor: var(--colorDarkGray);
}

/* ----- シンプルボックス ----- */
.simpleBox {
  background-color: var(--colorLightGray);
  border-radius: 24px;
  margin-top: 32px;
  padding: 24px;
}
.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: 30px;
  margin-top: 0;
}
.uniqBox .catch_highlight {
  font-size: 38px;
}
.uniqBox .catch_logoList {
  --gap: 32px;
  justify-content: center;
  margin: 24px auto 12px;
}
.uniqBox .emphBtn {
  --btnMarginTop: 24px;
}
.uniqBox {
  background-color: var(--colorLightOrange);
  border-radius: 40px;
  margin-top: 48px;
  padding: 10px;
}
.uniqBox:first-child { margin-top: 0; }
.uniqBox_inner {
  display: flex;
  border: 2px dashed #DEB778;
  border-radius: 30px;
  padding: 32px 28px;
}
/* - atm - */
.uniqBox_atm {
  width: 900px;
  display: grid;
  gap: 80px;
  grid-template-columns: auto 1fr;
  align-items: end;
  margin: auto;
}
.uniqBox_atm_img {
}
.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 {
  --gapY: 32px;
  --gapX: 84px;
  width: 100%;
  padding: 0 28px;
}
.uniqBox_consult_ttl {
  color: var(--mainColor);
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1;
  text-align: center;
}
.uniqBox_consult_read {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .03em;
  text-align: center;
  margin-top: 20px;
}
.uniqBox_consult_grid {
  display: grid;
  gap: var(--gapY) var(--gapX);
  grid-template-columns: 1fr 1fr;
  margin-top: 32px;
}
.uniqBox_consult_grid_item {
  position: relative;
}
.uniqBox_consult_grid_item::before {
  content: '';
  width: 1px;
  height: 100%;
  position: absolute;
  left: calc(var(--gapX) * -.5);
  background-color: var(--defaultColor);
}
.uniqBox_consult_grid_item:nth-child(odd)::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: 20px;
  align-items: center;
}
.box_spTtl .icon {
  width: 56px;
  font-size: 28px;
}


/* --------------------------------------------------
画像＋テキストコンポーネント
-------------------------------------------------- */
/* ----- テキスト回り込みなし ----- */
.imgTxt {
  --gapY: 32px;
  --gapX: 32px;
  --flexGrow: 1;
  --flexBasis: 50%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  margin-top: 40px;
}
.imgTxt:first-child { margin-top: 0; }
.imgTxt_img {
  flex: 0 0 auto;
  position: relative;
}
.imgTxt_img:not([class*="pc_w"]) {
  max-width: 400px;
}
.imgTxt_txt {
  flex: var(--flexGrow) 1 var(--flexBasis);
}
.imgTxt_order1 { order: 1; }
.imgTxt_order2 { order: 2; }
/* - テキスト部分幅auto - */
.imgTxt-wAuto {
  --flexGrow: 0;
  --flexBasis: auto;
}
/* - 富山第一銀行についてページ用 - */
.imgTxt-about {
  --gapX: 80px;
  align-items: center;
}
.imgTxt-about .imgTxt_img {
  width: 656px;
  max-width: initial;
}

/* ----- テキスト回り込みあり ----- */
.imgTxtFloat {
  margin-top: 40px;
}
.imgTxtFloat:first-child { margin-top: 0; }
.imgTxtFloat_left {
  float: left;
  margin: 0 32px 8px 0;
}
.imgTxtFloat_right {
  float: right;
  margin: 0 0 8px 32px;
}
.imgTxtFloat::after {
  display: block;
  clear: both;
  content: '';
}


/* --------------------------------------------------
吹き出しコンポーネント
-------------------------------------------------- */
.balloonBox {
  --balloonSize: 24px;
  --balloonIconSize: 112px;
  --balloonW:690px;
  --balloonBgColor: #fff;
  --balloonBorderColor: #fff;
  --balloonBorderWidth: 2px;
  --balloonBorderWidthDouble: calc(var(--balloonBorderWidth) * 2);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  margin-top: 40px;
}
.balloonBox:first-child { margin-top: 0; }
.balloonBox + .balloonBox { margin-top: 32px; }
.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: 0 1 calc(var(--balloonW) + var(--balloonSize));
  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 20px 16px 24px;
}
/* - オプション - */
/* アイコン位置変更 */
.balloonBox-reverse { flex-direction: row-reverse; }
.balloonBox-reverse .balloonBox_txt { padding-left: 0; padding-right: var(--balloonSize); }
.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-green {
  --balloonBgColor: var(--colorLightGreen);
  --balloonBorderColor: var(--mainColor);
}


/* --------------------------------------------------
パネルコンポーネント
-------------------------------------------------- */
.panel {
  --gapY: 24px;
  --gapX: 24px;
  --col: 2;
  --panelPosition: flex-start;
  --paddingX: 24px;
  --minH: auto;
  margin-top: 40px;
}
.panel:first-child { margin-top: 0; }
.panel + .panel { margin-top: 24px; }
.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) 12px;
}
/* あとから追加変更が来たのでこの書き方になってます */
.panel_inner:not(:first-child) {
  height: auto;
  margin-top: 12px;
}
.panel_head {
  display: flex;
  gap: 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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 {
  --defaultLineHeight: 1.3;
  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);
}
a.panel_inner:hover {
  background-color: var(--colorLightGreen);
}
.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_label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: .05em;
  line-height: 1.14;
  text-align: center;
  background-color: var(--mainColor);
  border-radius: 8px;
  padding: 4px 8px;
}
/* - オプション - */
/* 位置 */
.panel-center { --panelPosition: center; }
/* カラム数 */
.panel-col1 { --col: 1; }
.panel-col2 { --col: 2; }
.panel-col3 { --col: 3; }
.panel-col4 { --col: 4; }
.panel-col5 { --col: 5; }
.panel-col3-static .panel_item { width: 344px; }
/* テキスト部分のflex化 */
.panel_foot-flex,
.panel_foot-flex .panel_txt_sub {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* パネル別パターン */
.panel-type2 { --minH: 80px; }
.panel-type2 .panel_inner { justify-content: center; }
/* head部分にflex-grow付与パターン */
.panel-growHead .panel_head { flex-grow: 1; }
.panel-growFoot .panel_foot { flex-grow: 1; }


/* --------------------------------------------------
ポイント・特徴コンポーネント
-------------------------------------------------- */
.point {
  --gapY: 24px;
  --gapX: 24px;
  --col: 2;
  --paddingX: 24px;
  --pointH: auto;
  --pointPosition: flex-start;
  --pointIconSize: 80px;
  --pointHeadColor: var(--defaultColor);
  --pointItemBg: #fff;
  height: var(--pointH);
  margin-top: 40px;
}
.point:first-child { margin-top: 0; }
.point + .point { margin-top: 24px; }
.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;
  flex-direction: column;
  position: relative;
  background-color: var(--pointItemBg);
  border: 1px solid var(--colorGray);
  border-radius: 16px;
  padding: 24px var(--paddingX) 12px;
}
.point_inner:has(.point_head > .icon) {
  padding-top: calc(var(--pointIconSize) - 24px);
}
.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 {
  --defaultLineHeight: 1.3;
  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);
}
a.point_inner:hover {
  background-color: var(--colorLightGreen);
}
.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; }
/* カラム数 */
.col3-static .point_item,
.pc_col3-static .point_item { width: 344px; }
/* - カラーパターン2 - */
.point-color2 {
  --pointItemBg: #FDFBEB;
  --pointHeadColor: var(--mainColor);
}


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


/* ==================================================
リンクボタン
================================================== */
/* ----- 通常ボタン ----- */
/* - 変数用 - */
.nmlBtn {
  /* カラム・幅など */
  --col: 1;
  --gapY: 24px;
  --gapX: 24px;
  --marginTop: 40px;
  --nmlBtnMaxW: 420px;
  --nmlBtnMinH: 68px;
  --nmlBtnRadius: 34px;
  --nmlBtnPadding: 36px;
  --nmlBtnItemGap: 8px;
  --btnPos: center;
  /* 色 */
  --nmlBtnColor: var(--mainColor);
  --nmlBtnBoderColor: var(--mainColor);
  --nmlBtnColor_hover: #fff;
  /* アイコン */
  --svgIconColor: #fff;
  --nmlBtnLinkIcon: url(/common_v3/images/icon/icon_link.svg);
  --nmlBtnLinkIconWidth: 14px;
  --nmlBtnLinkIconHeight: 14px;
}
/* - メイン - */
.nmlBtn {
  max-width: 100%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  justify-content: var(--btnPos);
  text-align: center;
  margin-top: var(--marginTop);
}
.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(--nmlBtnPadding) 8px 36px;
  text-decoration: none;
  cursor: pointer;
  transition:
    var(--transColor),
    var(--transBg);
}
.nmlBtn_item_inner:not(:has(.nmlBtn_linkIcon)) {
  padding-left: calc(var(--nmlBtnPadding) * .5);
  padding-right: calc(var(--nmlBtnPadding) * .5);
}
.nmlBtn_text {
  display: flex;
  gap: 0;
  flex-direction: column;
}
.nmlBtn_text_main {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.45;
}
.nmlBtn_text_main:only-child {
  font-size: var(--defaultFontSize);
}
.nmlBtn_text_sub {
  font-size: 14px;
  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.col1 { flex-direction: column; align-items: var(--btnPos); }
.nmlBtn.col2 { --nmlBtnGapX: 32px; }
.nmlBtn.col3-static,
.nmlBtn.pc_col3-static { --nmlBtnMaxW: 344px; }
/* - 色 - */
/* オレンジ */
.nmlBtn_item-orange {
  --nmlBtnColor: var(--subColor);
  --nmlBtnBoderColor: var(--subColor);
}
/* 青（主にビジネスWebログインボタンに使用） */
.nmlBtn_item-blue {
  --nmlBtnColor: var(--colorBlue);
  --nmlBtnBoderColor: var(--colorBlue);
}
/* 薄い青 */
.nmlBtn_item-lightBlue {
  --nmlBtnColor: var(--colorLightBlue);
  --nmlBtnBoderColor: var(--colorLightBlue);
}
.nmlBtn_icon {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 20px;
  bottom: 0;
  margin: auto;
}
.nmlBtn_icon::after {
  background-color: var(--nmlBtnIcoColor);
  transition: var(--transBg);
}
.nmlBtn_item_inner:has(.nmlBtn_icon) {
  padding-left: 52px;
}
/* - リンクアイコン - */
.nmlBtn_linkIcon {
  width: var(--nmlBtnLinkIconWidth);
  height: var(--nmlBtnLinkIconHeight);
  position: absolute;
  top: 0;
  right: 20px;
  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);
}
/* 文字で来るアイコン用（pdfなど共通部分） */
.nmlBtn_item_inner:has(.nmlBtn_linkIcon-pdf) {
  --nmlBtnPadding: 56px;
}
/* アイコンの種類 */
.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;
}
/* - ホバー - */
a.nmlBtn_item_inner:hover {
  --nmlBtnIcoColor: var(--nmlBtnColor);
  --nmlBtnTxtColor: var(--nmlBtnColor);
  --nmlBtnBgColor: var(--nmlBtnColor_hover);
  --svgIconColor: var(--nmlBtnColor);
}
/* - 色の反転（サブカラー） - */
.nmlBtn_item-reverseColor {
  --nmlBtnIcoColor: var(--nmlBtnColor);
  --nmlBtnTxtColor: var(--defaultColor);
  --nmlBtnBgColor: var(--nmlBtnColor_hover);
  --svgIconColor: var(--nmlBtnColor);
}
.nmlBtn_item-reverseColor a.nmlBtn_item_inner:hover {
  --nmlBtnIcoColor: var(--nmlBtnColor_hover);
  --nmlBtnTxtColor: var(--nmlBtnColor_hover);
  --nmlBtnBgColor: var(--nmlBtnColor);
  --svgIconColor: var(--nmlBtnColor_hover);
}
/* - 角丸調整 - */
.nmlBtn-roundSmall,
.nmlBtn_item-roundSmall {
  --nmlBtnRadius: 8px;
}
/* - 非活性ボタン - */
.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 {
  --nmlBtnMaxW: 480px;
  --nmlBtnMinH: 54px;
  font-size: 18px;
  margin-top: 16px;
}
.nmlBtn_item-smallH {
  --nmlBtnMinH: 54px;
}
.nmlBtn_item.wAuto,
.nmlBtn_item.pc_wAuto { --nmlBtnMaxW: auto; }

/* ----- コンバージョンボタン ----- */
/* - 変数用 - */
.cnvBtn {
  /* 色 */
  --cnvBtnColor: linear-gradient(#1eb581 0%, #107c6a 100%);
  /* アイコン */
  --cnvBtnLinkIcon: url(/common_v3/images/icon/icon_link.svg);
}
/* - メイン - */
.cnvBtn {
  max-width: 100%;
  display: flex;
  gap: 24px 32px;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.3;
  text-align: center;
  margin-top: 48px;
}
.cnvBtn:first-child { margin-top: 0; }
.cnvBtn_item {
  flex: 0 0 auto;
  width: 420px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.cnvBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: #fff;
  background: var(--cnvBtnColor);
  border-radius: 40px;
  padding: 8px 44px;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transOpac);
}
.cnvBtn_text {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.cnvBtn_text_main {
  font-size: 22px;
  font-weight: bold;
}
.cnvBtn_text_sub {
  font-size: 14px;
}
.cnvBtn_caption {
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 8px;
}
.cnvBtn_caption strong,
.cnvBtn_caption2 strong {
  color: var(--defaultColor);
  font-size: 20px;
}
.cnvBtn_caption2 {
  display: flex;
  justify-content: center;
  position: relative;
  color: var(--cnvBtnColor);
  font-weight: bold;
  line-height: 1.5;
  margin: auto auto 8px;
  padding: 0 32px;
}
.cnvBtn_caption2::before,
.cnvBtn_caption2::after {
  content: "";
  position: absolute;
  width: 30px;
  height:2px;
  bottom: 12px;
  background-color: var(--cnvBtnColor);
}
.cnvBtn_caption2::before {
  left: 0;
  transform: rotate(45deg);
}
.cnvBtn_caption2::after {
  right: 0;
  transform: rotate(-45deg);
}
.cnvBtn_caption.fcWhite,
.cnvBtn_caption2.fcWhite,
.cnvBtn_caption.pc_fcWhite,
.cnvBtn_caption2.pc_fcWhite { --cnvBtnColor: #fff; }
.cnvBtn_caption2-simple::before,
.cnvBtn_caption2-simple::after { content: none; }
/* - 色 - */
.cnvBtn_item-orange {
  --cnvBtnColor: var(--subColor);
}
/* - 左側に置く（かもしれない）アイコン - */
.cnvBtn_icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  position: absolute;
  top: 0;
  left: 20px;
  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: 20px;
  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);
}
/* - ホバー - */
a.cnvBtn_item_inner:hover {
  opacity: var(--hoverOpac);
}

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

  flex: 0 0 auto;
  width: 344px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.cautionBtn_item_inner {
  width: 100%;
  height: 100%;
  min-height: 68px;
  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: 14px;
}
/* - リンクアイコン - */
.cautionBtn_linkIcon {
  width: var(--cautionBtnLinkIconWidth);
  height: var(--cautionBtnLinkIconHeight);
  position: absolute;
  top: 0;
  right: 20px;
  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;
}
/* - ホバー - */
a.cautionBtn_item_inner:hover {
  --cautionBtnTxtColor: var(--cautionBtnColor);
  --cautionBtnBgColor: var(--cautionBtnColor_hover);
}
/* 反転 */
.cautionBtn_item-reverseColor {
  --cautionBtnTxtColor: var(--cautionBtnColor);
  --cautionBtnBgColor: var(--cautionBtnColor_hover);
}
.cautionBtn_item-reverseColor a.cautionBtn_item_inner:hover {
  --cautionBtnTxtColor: var(--cautionBtnColor_hover);
  --cautionBtnBgColor: var(--cautionBtnColor);
}

/* ----- 小ボタン ----- */
/* - 変数用 - */
.smlBtn {
  /* カラム・幅など */
  --smlBtnW: 200px;
  --gapY: 20px;
  --gapX: 20px;
  --smlBtnRadius: 24px;
  --smlBtnPadding: 28px;
  /* 色 */
  --smlBtnColor: var(--defaultColor);
  --smlBtnBoderColor: var(--colorGray);
  /* アイコン */
  --smlBtnLinkIcon: url(/common_v3/images/icon/icon_link.svg);
  --smlBtnLinkIconWidth: 14px;
  --smlBtnLinkIconHeight: 10px;
}
/* - メイン - */
.smlBtn {
  max-width: 100%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-top: 24px;
}
.smlBtn:first-child { margin-top: 0; }
.smlBtn_item {
  flex: 0 0 auto;
  width: var(--smlBtnW);
  max-width: 100%;
  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(--smlBtnPadding);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transOpac);
}
.smlBtn_text {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.smlBtn_text_main {
  font-size: 14px;
  font-weight: bold;
}
.smlBtn_text_sub {
  font-size: 12px;
}
/* - 位置 - */
.smlBtn-left { justify-content: flex-start; }
.smlBtn-center { justify-content: center; }
.smlBtn-right { justify-content: flex-end; }
/* - 幅 - */
.smlBtn-col3,
.smlBtn.col3,
.smlBtn.pc_col3 { --smlBtnW: 346px; }
/* - リンクアイコン - */
.smlBtn_linkIcon {
  width: var(--smlBtnLinkIconWidth);
  height: var(--smlBtnLinkIconHeight);
  position: absolute;
  top: 0;
  right: 14px;
  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);
}
.smlBtn_item_inner:has(.smlBtn_linkIcon-pdf) {
  --smlBtnPadding: 44px;
}
/* アイコンの種類 */
.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 {
  --smlBtnPadding: 38px;
  --smlBtnLinkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --smlBtnLinkIconWidth: 31px;
  --smlBtnLinkIconHeight: 14px;
}
/* - ホバー - */
a.smlBtn_item_inner:hover {
  opacity: var(--hoverOpac);
}
/* - 非活性ボタン - */
.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;
}

/* ----- 強調ボタン（ヘッダーやトップなどで使用） ----- */
/* - 変数用 - */
.emphBtn {
  /* カラム・幅など */
  --col: 1;
  --gapY: 20px;
  --gapX: 28px;
  --btnMaxW: auto;
  --btnMinW: auto;
  --btnMinH: 64px;
  --btnRadius: 8px;
  --btnPaddingL: 44px;
  --btnPaddingR: 32px;
  --btnItemGap: 4px;
  --btnMarginTop: 40px;
  --btnFontSize: 16px;
  /* 色 */
  --btnColor: var(--mainColor);
  --btnShadow: #167157;
  /* アイコン */
  --svgIconColor: #fff;
  --btnLinkIcon: url(/common_v3/images/icon/icon_link.svg);
  --btnLinkIconWidth: 14px;
  --btnLinkIconHeight: 14px;
}
/* - メイン - */
.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;
  transition:
    transform var(--defaultTrans),
    box-shadow var(--defaultTrans);
}
.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;
}
.emphBtn_human {
  width: 140px;
  position: absolute;
  left: 0;
  bottom: calc(var(--btnItemGap) * -2);
}
.emphBtn_deco .emphBtn_caption {
  right: 40px;
  font-size: 18px;
}
.emphBtn_caption + .emphBtn_human {
  left: auto;
  right: 8px;
}
.emphBtn_human + .emphBtn_caption {
  left: 40px;
  right: auto;
}
.emphBtn_deco + .emphBtn_item_inner {
  --btnFontSize: 22px;
}
/* - アイコン - */
.emphBtn_item:not(:has(.emphBtn_icon)) {
  --btnPaddingL: var(--btnPaddingR);
}
.emphBtn_icon {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 16px;
  bottom: 0;
  margin: auto;
}
.emphBtn_icon::after {
  background-color: #fff;
}
/* - リンクアイコン - */
.emphBtn_linkIcon {
  width: var(--btnLinkIconWidth);
  height: var(--btnLinkIconHeight);
  position: absolute;
  top: 0;
  right: 20px;
  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_item_inner:hover {
  box-shadow: 0 0;
  transform: translate(4px, 4px);
}
/* - 高さ大きいパターン - */
.emphBtn-largeH {
  --btnMinH: 80px;
}


/* ==================================================
ページ内アンカー
================================================== */
.anchorNav {
  --gapY: 24px;
  --gapX: 24px;
  --paddingX: 12px;
  --col: 4;
  --ancNavPosition: flex-start;
  --ancColor: #f2f2f2;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  margin-top: 80px;
}
.anchorNav:first-child { margin-top: 0; }
.secondView_heading + .anchorNav { margin-top: 40px; }
.anchorNav_list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
  justify-content: var(--ancNavPosition);
}
.anchorNav_item {
  --tAncNavGap: calc(calc(var(--col) - 1) * var(--gapX));
  --tAncNavWrap: calc(100% - var(--tAncNavGap));
  --tAncNavW: calc(var(--tAncNavWrap) / var(--col));
  flex: 0 0 auto;
  width: var(--tAncNavW);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.anchorNav_item_inner {
  width: 100%;
  height: 100%;
  min-height: 92px;
  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;
  transition: var(--transOpac);
}
.anchorNav_item_inner::after {
  width: 16px;
  height: 12px;
  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: '';
}
/* - ホバー - */
a.anchorNav_item_inner:hover {
  opacity: var(--hoverOpac);
}
/* - オプション - */
.anchorNav_item-right {
  --ancColor: #fff;
}
.anchorNav_item-right .anchorNav_item_inner {
  border: 1px solid var(--mainColor);
  padding: 8px 28px;
}
.anchorNav_item-right .anchorNav_item_inner::after {
  top: 0;
  right: 12px;
  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; }
/* カラム数5の時はgapをデフォルト20に */
.anchorNav.col5 { --gapY: 20px; --gapX: 20px; }
/* ボタン背景色 */
.anchorNav-white { --ancColor: #fff; }

/* ==================================================
タブ
================================================== */
/* 他コンポーネント上書き */
.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);
  --gapY: 24px;
  --gapX: 24px;
  width: 100%;
  margin-top: 32px;
}
.stdTab:first-child { margin-top: 0; }
.stdTab_btnWrap {
  --fontSize: 20px;
  position: relative;
  display: flex;
  gap: var(--gapY) var(--gapX);
  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.pc_fs-small {
  --fontSize: 18px;
}
.stdTab_btn {
  width: 100%;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1 1 auto;
  color: #fff;
  font-size: var(--fontSize);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border-radius: 16px 16px 0 0;
  border: 2px solid var(--tabColor);
  border-bottom: none;
  background-color: var(--tabColor);
  margin: 0;
  padding: 8px 12px;
  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: 48px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  position: relative;
  margin-right: 20px;
}
.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);
}
/* hover active */
.stdTab_btn.is-active {
  user-select: none;
  pointer-events: none;
}
.stdTab_btn.is-active::after {
  opacity: 1;
}
.stdTab_btn.is-active, .stdTab_btn:hover, .stdTab_btn:focus {
  background-color: #fff;
  color: var(--tabColor);
}
.stdTab_btn.is-active .stdTab_btn_icon::before,
.stdTab_btn:hover .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%;
  padding: 48px var(--paddingX) var(--paddingB);
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
}
.stdTab_body.is-active {
  position: static;
}
.stdTab_body > *:first-child { margin-top: 0; }
.stdTab_body > *:last-child { margin-bottom: 0; }
/* - 色 - */
.stdTab_btn-orange { --tabColor: var(--subColor); }
/* ----- ボックスタイプ ----- */
.stdTab-typeBox {
  overflow: hidden;
}
.stdTab-typeBox > .stdTab_bodyWrap {
  --paddingX: 32px;
  --paddingB: 32px;
  border: 2px solid var(--tabColor);
  border-top: none;
  border-radius: 0 0 16px 16px;
}
/* ----- type2（ボタン化） ----- */
.stdTab-type2 {
  --col: 6;
  --gapY: 12px;
  --gapX: 12px;
}
.stdTab-type2 .stdTab_btnWrap {
  --fontSize: 18px;
  flex-wrap: wrap;
  align-items: normal;
  border-bottom: none;
}
.stdTab-type2 .stdTab_btn {
  --tmp1: calc(calc(var(--col) - 1) * var(--gapX));
  --tmp2: calc(100% - var(--tmp1));
  --tmpW: calc(var(--tmp2) / var(--col));
  flex: 0 0 auto;
  width: var(--tmpW);
  flex-grow: 0;
  min-height: 64px;
  transform: none;
  border: 2px solid var(--tabColor);
  border-radius: 8px;
}
.stdTab-type2 .stdTab_btn::after { content: none; }
.stdTab-type2 .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: 80px;
}
.cntSec[class*="bg"] + .inquirySec { margin-top: 0; }
.inquirySec_inner {
  position: relative;
  width: calc(var(--contentWidth) + var(--contentPaddingXDouble));
  margin: auto;
  padding: 80px var(--contentPaddingX);
}
.inquirySec .nmlBtn {
  --nmlBtnMaxW: 480px;
  margin-top: 0;
}
.inquiry_head {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.125;
  margin-bottom: 40px;
}
.inquiry_head2 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.125;
  letter-spacing: .05em;
  text-align: center;
  margin-top: 40px;
}
.inquiry_head2:first-child { margin-top: 0; }
.inquiry_body {
  --col: 1;
  --gapY: 40px;
  --gapX: 40px;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  text-align: center;
  margin-top: 32px;
}
.inquiry_body:first-child { margin-top: 0; }
.inquiry_item {
  --tmp1: calc(calc(var(--col) - 1) * var(--gapX));
  --tmp2: calc(100% - var(--tmp1));
  --w: calc(var(--tmp2) / var(--col));
  flex: 1 0 auto;
  width: var(--w);

  position: relative;
}
.inquiry_item:not(:first-child)::before {
  content: '';
  width: 1px;
  height: 100%;
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  background-color: #333333;
}
.inquiry_ttl {
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.inquiry_ttl:not(:first-child) { margin-top: 28px; }
.inquiry_ttl-small {
  font-size: 18px;
}
.inquiry_subTxt {
  margin-top: 20px;
}
.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: 56px;
  font-weight: bold;
  font-family: "Lato", sans-serif;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  margin-top: 20px;
}
.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 { font-size: 48px; }
.telNumber-small { font-size: 40px; }
/* - 文字色、文字サイズを通常テキストに近づける - */
.telNumber-simple {
  color: var(--defaultColor);
  font-size: 18px;
}
.inquiry_ipTel {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
  margin: 20px auto 0;
}
.inquiry_ipTel_txt {
  font-size: 28px;
  font-weight: bold;
  font-family: "Lato", sans-serif;
}
/* - アイコン - */
/* フリーダイヤル */
.telNumber-freedial > span {
  padding-left: 1.55em;
  background: url(/common_v3/images/icon/icon_freedial.svg) no-repeat left center / 1.4em 1em;
}
/* 電話 */
.telNumber-tel > span {
  padding-left: 1.25em;
  background: url(/common_v3/images/icon/icon_tel.svg) no-repeat left center / 1em 1em;
}
/* - 2カラムパターン - */
.inquiry_body-col2 {
  --col: 2;
}
.inquiry_body-col2 .inquiry_item:nth-child(2n+1)::before,
.col2 .inquiry_item:nth-child(2n+1)::before,
.pc_col2 .inquiry_item:nth-child(2n+1)::before {
  content: none;
}
.inquiry_body-col2 .inquiry_ttl,
.col2 .inquiry_ttl,
.pc_col2 .inquiry_ttl {
  font-size: 18px;
  margin-bottom: 20px;
}
.inquiry_body-col2 .inquiry_subTxt,
.col2 .inquiry_subTxt,
.pc_col2 .inquiry_subTxt {
  margin-top: 12px;
}
/* - 3カラムパターン - */
.inquiry_body.col3 .inquiry_item:nth-child(3n+1)::before,
.inquiry_body.pc_col3 .inquiry_item:nth-child(3n+1)::before {
  content: none;
}
.inquiry_body.col3 .inquiry_subTxt,
.inquiry_body.pc_col3 .inquiry_subTxt {
  margin-top: 12px;
}


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

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

  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--gapY) var(--gapX);
  text-align: center;
  margin: 0;
}
.inquiryPanel_item {
  --tPInquiryGap: calc(calc(var(--col) - 1) * var(--gapX));
  --tPInquiryWrap: calc(100% - var(--tPInquiryGap));
  --tPInquiryW: calc(var(--tPInquiryWrap) / var(--col));
  width: var(--tPInquiryW);
  flex: 0 0 auto;
}
.inquiryPanel_link {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 14px;
  flex-direction: column;
  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: 20px 24px 36px;
  transition: var(--transBg);
}
.inquiryPanel_head {
  display: flex;
  gap: 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.inquiryPanel_txt_main {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .05em;
  line-height: 1.3;
  text-align: center;
}
/* - ホバー - */
.inquiryPanel_link:hover {
  background-color: var(--colorLightGreen);
}
/* - 画像 - */
.inquiryPanel_img {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* - リンクアイコン - */
.inquiryPanel_linkIcon {
  width: var(--pInquiryIconWidth);
  height: var(--pInquiryIconHeight);
  position: absolute;
  right: 14px;
  bottom: 14px;
  background-color: var(--pInquiryIconColorTxt);
}
.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: 12px;
  bottom: 12px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: .05em;
  line-height: 1.14;
  text-align: center;
  background-color: var(--mainColor);
  border-radius: 8px;
  padding: 4px 8px;
}
.inquiryPanel_list-col3-static .inquiryPanel_item { width: 344px; }
/* - 新パターン - */
.inquiry_item .inquiryPanel_list {
  height: 100%;
  align-items: center;
}


/* --------------------------------------------------
ステップコンポーネント
-------------------------------------------------- */
/* ----- メイン ----- */
.stepBox {
  margin-top: 40px;
}
.stepBox:first-child { margin-top: 0; }
.stepBox_item {
}
.stepBox_item:not(:last-child) { margin-bottom: 64px; }
.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: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font-size: 20px;
  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: 28px;
}
.stepBox_ttl {
  color: var(--mainColor);
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .03em;
  margin-top: 32px;
}
.stepBox_ttl:first-child { margin-top: 0; }
.stepBox_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stepBox_head .noteList { margin-top: 8px; }
.stepBox_head_main {
  color: var(--mainColor);
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .03em;
  text-align: center;
  margin-top: 8px;
}
.stepBox_head_main:first-child { margin-top: 0; }
.stepBox_head:not(:first-child) {
  margin-top: 40px;
}
.stepBox_body {
  margin-top: 40px;
}
.stepBox_body:first-child { margin-top: 0; }

/* ----- 横並び ----- */
/* - 別コンオネ - */
/* - メイン - */
.stepBox2 {
  --col: 3;
  --gap: 40px;
  --paddingY: 40px;
  --paddingX: 16px;
  --itemMaxW: initial;
  --itemFontColor: inherit;
  --itemBgColor: #fff;
  width: 100%;
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-top: 32px;
}
.stepBox2:first-child { margin-top: 0; }
.stepBox2_item {
  --stepBox2IconSize: 56px;
  --tmp: calc(calc(var(--col) - 1) * var(--gap));
  --tmp2: calc(100% - var(--tmp));
  --itemW: calc(var(--tmp2) / var(--col));
  flex: 0 0 auto;
  width: var(--itemW);
  max-width: var(--itemMaxW);
  position: relative;
}
.stepBox2_item:has(.stepBox2_icon) {
  padding-top: calc(var(--stepBox2IconSize) * .5);
}
.stepBox2_item:not(:last-child)::after {
  content: "";
  width: 24px;
  height: 56px;
  position: absolute;
  top: calc(50% - 28px);
  left: 100%;
  background-color: var(--colorGray);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.stepBox2_icon {
  width: var(--stepBox2IconSize);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 28px;
  margin: auto;
}
.stepBox2_item_inner {
  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: 16px;
  padding: var(--paddingY) var(--paddingX);
}
.stepBox2_head {
  --defaultLineHeight: 1.5;
  display: flex;
  gap: 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  line-height: var(--defaultLineHeight);
  text-align: center;
  margin-top: 24px;
}
.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: 16px;
}
.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: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepBox2_body_thumb > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* - アイテム下に置く矢印 - */
.stepBox2_subArrow {
  position: absolute;
  left: 0;
  bottom: -16px;
  right: 0;
  z-index: 1;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-color: var(--mainColor);
  border-radius: 4px;
  padding: 2px;
}
.stepBox2_subArrow::after {
  content: '';
  width: 64px;
  height: 35px;
  display: block;
  position: absolute;
  left: calc(100% - 17px);
  top: -2px;
  background: var(--mainColor);
  transform: rotate(-90deg);

  -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) {
  padding-top: 48px;
}
.stepBox2_itemGroupLabel {
  --lTemp1: calc(100% * var(--col));
  --lTemp2: calc((var(--col) - 1) * var(--gap));
  width: calc(var(--lTemp1) + var(--lTemp2));
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: -48px;
  color: #fff;
  font-size: var(--largeFontSize);
  z-index: 1;
  background-color: var(--mainColor);
}
.stepBox2_itemGroupLabel-startHalf {
  left: 50%;
}
.stepBox2_itemGroupLabel.col2p5,
.stepBox2_itemGroupLabel.pc_col2p5 {
  --lTemp1: calc(100% * var(--col));
  --lTemp2: calc((var(--col) - 0.5) * var(--gap));
  width: calc(var(--lTemp1) + var(--lTemp2) - 4px);
}
.stepBox2_itemGroupLabel.stepBox2_itemGroupLabel-startHalf.col2p5,
.stepBox2_itemGroupLabel.stepBox2_itemGroupLabel-startHalf.pc_col2p5 {
  left: calc(50% + 4px);
}
/* - 各カラム用 - */
.stepBox2.col2 .stepBox2_item:nth-child(2)::after,
.stepBox2.pc_col2 .stepBox2_item:nth-child(2)::after { content: none; }
.stepBox2.col3 .stepBox2_item:nth-child(3)::after,
.stepBox2.pc_col3 .stepBox2_item:nth-child(3)::after { content: none; }
.stepBox2.col4 .stepBox2_item:nth-child(4)::after,
.stepBox2.pc_col4 .stepBox2_item:nth-child(4)::after { content: none; }
.stepBox2.col5 .stepBox2_item:nth-child(5)::after,
.stepBox2.pc_col5 .stepBox2_item:nth-child(5)::after { content: none; }
/* プラスアイコン化 */
.stepBox2_item-plus:not(:last-child)::after {
  width: 32px;
  height: 32px;
  top: calc(50% - 16px);
  left: calc(100% + 4px);
  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-pc .stepBox2 {
  --itemMaxW: 382px;
  flex-wrap: nowrap;
}
.scrollX-pc .stepBox2_item {
  user-select: none;
}
/* - 幅成り行き - */
.stepBox2-auto .stepBox2_item {
  --itemW: auto;
}
/* - 別パターン - */
.stepBox2-type2 {
  --paddingY: 0px;
  --paddingX: 0px;
}
.stepBox2-type2 .stepBox2_item_inner {
  border: none;
}
.stepBox2-type2 .stepBox2_item:not(:last-child)::after {
  transform: translateX(calc(var(--gap) * .5 - 50%));
}


/* --------------------------------------------------
selectChart
-------------------------------------------------- */
.selectChart {
  overflow: hidden;
  margin-top: 40px;
}
.selectChart:first-child { margin-top: 0; }
.selectChart_inner {}
.selectChart_item {
}
.selectChart_item:not(:first-child)::before {
  content: "";
  width: 64px;
  height: 24px;
  display: block;
  background-color: var(--colorGray);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  margin: 0 auto 24px;
}
.selectChart_item:not(:first-child),
.selectChart_item:not(:first-child) .selectChart_branch {
  display: none;
}
/* - head部分 - */
.selectChart_head {
  display: flex;
  gap: 20px;
  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: 24px;
  padding-right: 16px;
}
/* - body部分 - */
.selectChart_body {
  background-color: var(--colorLightGray);
  border-radius: 0 0 16px 16px;
  padding: 32px 48px;
}
/* - 白枠部分 - */
.selectChart_dataBox {
  display: none;
  margin: 0;
}
.selectChart_dataBox_item {
  background-color: #fff;
  margin-top: 32px;
  padding: 32px;
}
.selectChart_dataBox_head {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}
.selectChart_dataBox {
  display: none;
}
.selectChart_dataBox_item {
  display: none;
}
/* - 一つ前に戻るボタン - */
.selectChart_backbranch {
  display: none;
  margin-top: 24px;
}
.selectChart_backbranch_item {
  margin: auto;
}


/* --------------------------------------------------
formTable
-------------------------------------------------- */
::-webkit-input-placeholder,
::placeholder,
:placeholder-shown,
:-ms-input-placeholder {
  color: rgba(#333, .5);
}
.formTable {
  width: 100%;
}
.formTable_req {
  display: inline-block;
  color: var(--colorRed);
  margin-left: 12px;
  vertical-align: middle;
}
.formTable th,
.formTable td {
  vertical-align: middle;
  padding: 16px 0;
}
.formTable th {
  font-weight: bold;
  text-align: left;
}
.formTable th label {
  line-height: 1;
  vertical-align: middle;
}
.formTable td {

}
.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: 12px 20px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0 12px;
}
.form_text:first-child,
.form_select:first-child,
.form_textarea:first-child { margin-left: 0; }
.form_text:last-child,
.form_select:last-child,
.form_textarea:last-child { margin-right: 0; }
.form_text.entered,
.form_select.entered,
.form_textarea.entered {
  background: #fff;
}
/* - 通常 - */
.form_text-smallW {
  width: 172px;
}
/* - セレクト - */
.form_selectWrap {
  display: inline-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 {
  width: 430px;
  padding-right: 44px;
}
.form_select::-ms-expand {
  display: none;
}
/* - ラジオボタン、チェックボックス - */
.form_label_list {
  display: flex;
  gap: 24px 32px;
  flex-wrap: wrap;
}
.form_label {
  cursor: pointer;
}
.form_checkbox,
.form_radio {
  accent-color: var(--mainColor);
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
}
/* - テキストエリア - */
.form_textarea {
  min-height: 192px;
}
/* - エラー - */
.is-error[class*="form_"] {
  background-color: #F9EBEB;
  border-color: var(--colorRed);
}
/* ----- 個人情報保護方針 ----- */
.privacyPolicy {
  height: 284px;
  background-color: var(--colorLightGray);
  border-radius: 8px;
  margin: 48px auto 0;
  padding: 32px 24px;
  overflow: auto;
}
.privacyPolicy .title {
  color: var(--mainColor);
  font-size: 24px;
  font-weight: bold;
}
.privacyPolicy p:not(:first-child) {
  margin-top: 16px;
}
.privacyPolicy .title:not(:first-child) {
  margin-top: 24px;
}
/* 同意する */
.agreeWrap {
  text-align: center;
}
.agreeInner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.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: 24px;
}
/* 送信ボタン */
.form_agree_btn_wrap {
  width: 420px;
  display: flex;
  position: relative;
  margin: 24px auto 0;
}
.form_agree_btn {
  width: 100%;
  max-width: 100%;
  min-height: 68px;
  background: var(--mainColor);
  border: 1px solid var(--mainColor);
  border-radius: 34px;
  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;
}
.nmlTable-simulator input,
.nmlTable-simulator label {
  vertical-align: middle;
}
.nmlTable-simulator input[type="text"] {
  width: 172px;
  height: 45px;
  margin: 0 12px;
  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:nth-child(n+2) {
  margin-left: 32px;
}
.simulationBalloon_wrap {
  position: relative;
}
.simulationBalloon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -1em;
  z-index: 1;
  transform: translateY(-50%);
  right: 32px;
  margin: 0;
}
.simulationBalloon_inner {
  position: relative;
  margin-right: 0;
}
.simulationBalloon_inner::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 47%;
  z-index: 1;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 15px 0 15px 24px;
  transform: scaleY(1) translate(50%, -50%) rotate(180deg);
  border-color: transparent transparent transparent #0AA365;
  box-shadow: none;
}
.simulationBalloon_inner::after {
  position: absolute;
  top: 47%;
  left: -21px;
  transform: translateY(-50%);
  z-index: 2;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  background-color: transparent;
  border-width: 16px 26px 16px 0px;
  border-color: transparent #fff transparent transparent;
}
.simulationBalloon_txt {
  width: 332px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  background-color: #fff;
  border: 1px solid #0AA365;
  border-radius: 16px;
  box-shadow: none;
  padding: 22px;
}
.submitBox {
  margin-bottom: 24px;
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 32px;
}
.submitBox_item {
  width: 420px;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: none;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.5;
  border-radius: 34px;
  padding: 7.5px 54px;
  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;
  transition: var(--transBg);
}
.submitBox_item_linkIcon {
  --icon: url(/common_v3/images/icon/icon_link.svg);
  width: 12px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 24px;
  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 {
  --svgIconColor: #fff;
  position: relative;
  transition:
    var(--transBg),
    var(--transColor);
  overflow: hidden;
  border: 1px solid #FF995A;
  color: #fff;
  background-color: #FF995A;
}
.submitBox_item-calc:hover {
  color: #FF995A;
  background-color: #fff;
}
.submitBox_item-calc:hover .submitBox_item_icon::after,
.submitBox_item-calc:hover .submitBox_item_linkIcon::after {
  background-color: #FF995A;
}
.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;
  margin-top: 48px;
}
.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: 40px;
  display: table;
  width: 100%;
  background: var(--colorLightGray) url(/common_v3/images/adobe_reader_get.png) no-repeat 40px center;
  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: 20px 40px 20px 239px;
  text-decoration: none;
  color: inherit;
}
.adobeReaderGet_main {
  font-size: var(--defaultFontSize);
}
.adobeReaderGet_note {
  margin-top: 8px;
  font-size: 14px;
}


/* --------------------------------------------------
ニュースリスト
-------------------------------------------------- */
.newsTitle {
  border-bottom: 1px solid var(--colorGray);
  margin-top: 40px;
  padding-bottom: 24px;
  font-size: 24px;
  text-align: center;
}
.newsList:first-child { margin-top: 0; }
.newsTitle + .newsList { margin-top: 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);
  padding: 20px 40px 18px 0;
  line-height: 1.5;
}
.newsList_item:first-of-type {
  padding-top: 0;
}
.newsList_item_inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  font-size: var(--defaultFontSize);
  color: var(--defaultColor);
  text-decoration: none;
  transition: all .2s ease;
  background-repeat: no-repeat;
  letter-spacing: 0.025em;
}
.newsList_date {
  flex: 0 0 auto;
  text-align: left;
  color: var(--mainColor);
  margin-right: 20px;
}
/* - hover - */
a.newsList_item_inner:hover .newsList_title span:not([class]),
a.newsList_item_inner:focus .newsList_title span:not([class]) {
  opacity: var(--hoverOpac);
}


/* --------------------------------------------------
ニュースタブ（元はトップの固有）
-------------------------------------------------- */
.news {
  margin-top: 40px;
}
.news:first-child { margin-top: 0; }
/* ----- ナビ部分 ----- */
.news_nav {
  display: flex;
  background-color: #EAEAEA;
  border-radius: 40px;
  margin-top: 40px;
}
.news_nav:first-child { margin-top: 0; }
.news_nav_item {
  flex: 1 1 100%;
}
.news_nav_btn {
  width: 100%;
  min-height: 64px;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: .03em;
  line-height: 1.3;
  text-align: center;
  background-color: transparent;
  border-radius: 40px;
  transition:
    var(--transColor),
    var(--transBg);
}
.news_nav_btn:hover,
.news_nav_item.is-active .news_nav_btn {
  color: #fff;
  background-color: var(--mainColor);
}
/* ----- タブ部分 ----- */
.news_tab {
  position: relative;
}
.news_tab_item {
  width: 100%;
  padding: 28px 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: 20px 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-weight: bold;
  letter-spacing: 0.03em;
  border: 1px solid var(--tagColor);
  border-radius: 4px;
  padding: 4px 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 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  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;
}
/* - ホバー時 - */
.news_main_item_inner:hover {
  opacity: var(--hoverOpac);
}
.news_main_item_inner:hover .news_body {
  text-decoration: underline;
}
/* - リンクのアイコン（別窓 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: 3;
  --gapY: 24px;
  --gapX: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
  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: 24px 16px;
}
.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 {
  --va: initial;
  --paddingY: 16px;
  --paddingX: 16px;
  width: 100%;
  background-color: #fff;
  border: 1px solid #E8E8E8;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 40px;
}
.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: 85px;
  font-size: 18px;
  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; }


/* ==================================================
Video
================================================== */
.video {
  aspect-ratio: 16 / 9;
  width: 560px;
  max-width: 100%;
  position: relative;
  margin: 32px auto 0;
}
.video:first-child { margin-top: 0; }
.video > iframe,
.video > video {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
/* サイズ違い */
.video-medium {
  max-width: 480px;
}


/* ==================================================
装飾
================================================== */
.adorn {
  --right: 20px;
  position: relative;
}
.adorn_img {
  position: absolute;
  right: var(--right);
  top: 0;
  transform: translateY(-100%);
}
.adorn_img-type2 {
  top: auto;
  bottom: 0;
  transform: none;
}
.adorn:has(.adorn_img-type3) {
  padding-top: 28px;
}
.adorn_box:has(.adorn_img-type3) {
  min-height: 190px;
  display: flex;
  align-items: center;
  padding-left: 340px;
}
.adorn_img-type3 {
  width: 340px;
  left: 0;
  right: auto;
  top: 0;
  transform: none;
  text-align: center;
}
.adorn_img-type3 + .nmlText { margin-top: 0; }
.adorn_img-type3-2 {
  top: auto;
  bottom: 0;
}


/* ==================================================
appDLBox
================================================== */
.appDLBox {
  margin-top: 40px;
  text-align: center;
}
.appDLBox :first-child { margin-top: 0; }
.appDLBox_ttl {
  font-size: 24px;
  font-weight: 500;
}
.appDLBox_list {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}
.appDLBox_item {
  background-color: #fff;
  border: 1px solid var(--colorGray);
  padding: 24px;
}
.appDLBox_head {
  font-size: 20px;
  line-height: 1;
}
.appDLBox_body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 16px;
}
.appDLBox_storeBtn {
  width: 150px;
  height: auto;
  display: flex;
  justify-content: center;
  transition: var(--transOpac);
}
.appDLBox_storeBtn:hover { opacity: var(--hoverOpac); }
.appDLBox_storeBtn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.appDLBox_txt {
  width: 100%;
}


/* ==================================================
arrow
================================================== */
.arrow {
  --sizeW: 64px;
  --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: 16px;
  margin-bottom: 16px;
}
/* --- サイズ --- */
.arrow-large {
  --sizeW: 122px;
  --sizeH: 46px;
}
/* --- 色 --- */
.arrow-yellow::after {
  background-color: #eddd21;
}


/* ==================================================
arrowBox
================================================== */
.arrowBox {
  margin: 64px 0 0;
}
.arrowBox:first-child { margin-top: 0; }
.arrowBox::after {
  content: '';
  width: 100%;
  height: 80px;
  display: block;
  background-color: #fff;
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
}
.arrowBox_inner {
  background-color: #fff;
  padding: 40px 40px 24px;
}
.arrowBox_head {
  display: flex;
  gap: 40px;
}
.arrowBox_head_item {
  flex: 1 1 auto;
  display: flex;
  gap: 16px;
  align-items: center;
  position: relative;
  background-color: var(--subColor);
  border-radius: 12px;
  padding: 20px;
}
.arrowBox_head_item::after {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  right: -32px;
  top: 0;
  bottom: 0;
  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: 70px;
  flex-shrink: 0;
}
.arrowBox_head_main {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.45;
}
.arrowBox_foot {
  margin-top: 24px;
}


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

================================================== */
.cirBox {
  width: 328px;
  max-width: 100%;
  min-height: 328px;
  position: relative;
  z-index: 0;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-align: center;
  padding-bottom: 24px;
}
.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: 24px;
  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: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  line-height: 1.25;
  background-color: var(--mainColor);
  border-radius: 4px;
  padding: 4px 4px 8px;
}
.cirBox_rate_main {
  color: var(--mainColor);
  font-family: var(--latoFont);
  font-size: 80px;
}
.cirBox_rate_per {
  color: var(--defaultColor);
  font-size: 56px;
  margin-left: 2px;
}
.cirBox_rate_to {
  font-size: 26px;
}
.cirBox_rate_sub {
  flex: 1 0 100%;
  font-size: 14px;
}
.cirBox_foot_unit {
  display: flex;
  gap: 28px;
  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: -20px;
  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: 18px;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.33;
  border-bottom: 1px solid var(--mainColor);
  padding-bottom: 14px;
  margin-top: 32px;
}
.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;
  transition: var(--transOpac);
}
.catLink_ttl_link:hover { opacity: var(--hoverOpac); }
.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 {
  font-size: 14px;
  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 {
  margin-top: 16px;
}
.catLink_list_itme:first-child { margin-top: 0; }
.catLink_list_item:first-child { margin-top: 0; }
.catLink_list_txt {
  display: inline-flex;
  color: var(--defaultColor);
  text-decoration: none;
}
a.catLink_list_txt:hover {
  text-decoration: underline;
}
.catLink_list_txt .linkIcon {
  top: .2em;
  margin-right: 0;
}

/* ==================================================
商品・サービス
================================================== */
.prodSec {
}
.prodSec .cntSec_inner {
  padding-top: 56px;
}
/* ----- タブ ----- */
.prod_tab {
  --swiper-pagination-bullet-size: 10px;
  --fontSize: 14px;
  margin-top: 48px;
  overflow: hidden;
}
.prod_tab_inner {
  padding: 0 64px;
  overflow: visible;
}
.prod_tab_inner::before,
.prod_tab_inner::after {
  content: '';
  width: 62px;
  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: 52px;
  height: 35px;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 53px);
  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: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--defaultColor);
  font-size: var(--fontSize, var(--defaultFontSize));
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 8px;
  box-shadow: 4px 4px var(--colorGray);
  padding: 20px 12px 12px;
  transition:
    var(--transColor),
    border-color var(--defaultTrans),
    box-shadow var(--defaultTrans),
    transform var(--defaultTrans),
    var(--transOpac);
}
.prod_tab_btn:hover {
  opacity: var(--hoverOpac);
}
.prod_tab_btn::after {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--mainColor);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: var(--transOpac);
}
.prod_tab_btn_icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod_tab_btn_txt {
  min-height: calc(3em * 1.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod_tab_navigation {
  margin-top: 28px;
}
.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: 35px;
  height: 24px;
  margin-top: -26px;
  transition: var(--transOpac);
}
.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_arrow:hover { opacity: var(--hoverOpac); }
/* アクティブ時 */
.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 {
  color: var(--mainColor);
  border-color: transparent;
  box-shadow: 0 0;
  transform: translate(4px, 4px);
}
.prod_tab_btn.is-active::after {
  opacity: 1;
}
/* - タブ（コンテンツ部分） - */
.prod_tab_contentWrap {
  display: none;
  position: relative;
  padding: 48px 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: 24px;
  padding: 40px 32px 60px;
}
.prod_tab_content.is-active { position: static; }
.prod_tab_content .nmlBtn {
  --defaultFontSize: 14px;
  --smallFontSize: 12px;
  --marginTop: 24px;
  --nmlBtnMinH: 60px;
}
.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: 28px;
}
.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: 18px;
  font-weight: bold;
  line-height: 1.33;
  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: grid;
  gap: 32px 24px;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  margin-top: 32px;
}
.prod_tab_content_snd_item {}
/* アイテム幅 */
.prod_tab_content_snd_item-w2 { grid-column: span 2; }
.prod_tab_content_snd_item-w3 { grid-column: span 3; }
/* 別レイアウト */
.prod_tab_content_snd_item-type2 {
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 16px;
  padding: 24px;
}
.prod_tab_content_snd_ttl {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.3;
  border-left: 5px solid var(--mainColor);
  margin-top: 32px;
  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);
}
.prod_bnr_slider {
  --slideWidth: 292px:
}


/* ==================================================
特殊なステップコンテンツ
================================================== */
.stepSp {
  display: flex;
  gap: 64px;
}
.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: 22px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.2;
  background-color: var(--ttlColor);
  border-radius: 12px;
  padding: 4px 64px;
}
.stepSp_ttl_icon {
  width: 40px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.stepSp_list {
  --arrowW: 40px;
  --arrowH: 20px;
  --arrowGap: 30px;
  --arrowImg: url(/common_v3/images/icon/icon_triangle.svg);
  --arrowCount: 1;
  --itemGap: 16px;
  --itemH: 64px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  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 12px;
}
.stepSp_txt:has(.stepSp_icon) {
  position: relative;
  padding: 4px 60px;
}
.stepSp_icon {
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.stepSp_img {
  min-height: var(--itemH);
  display: flex;
  justify-content: center;
}
.stepSp_link {
  min-height: var(--itemH);
  display: flex;
  align-items: center;
  color: var(--defaultColor);
  text-decoration: none;
  text-align: left;
  border: 1px solid var(--baseTtlColor);
  border-radius: 12px;
  padding: 4px 20px;
  transition:
    var(--transColor),
    var(--transBg);
}
.stepSp_link:hover {
  --ttlColor: #fff;
  --hoverColor: var(--mainColor);
  color: #fff;
  background-color: var(--mainColor);
}
.stepSp_link_num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--ttlColor);
  transition: var(--transColor);
}
.stepSp_link_num::after {
  content: '';
  width: 1px;
  height: 24px;
  display: block;
  background-color: var(--ttlColor);
  margin: 0 16px;
  transition: var(--transBg);
}
.stepSp_link_txt {
  flex: 1 1 auto;
}
.stepSp_linkIcon {
  flex-shrink: 0;
  width: 16px;
  height: 12px;
  background-color: var(--ttlColor);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transform: rotate(90deg);
  transition: var(--transBg);
}
.stepSp_link[href^="#"] .stepSp_linkIcon {
  transform: rotate(180deg);
}
/* 色 */
.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; }
.arrowColor-none { --arrowColor: transparent; }
/* 左右矢印 */
.stepSp_list_item-arrowRight::before,
.stepSp_list_item-arrowLeft::before {
  content: '';
  width: 56px;
  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: 100%;
}
.stepSp_list_item-arrowLeft::before {
  right: 100%;
  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: 4;
  --gapY: 16px;
  --gapX: 16px;
  --maxW: 180px;
  --maxH: 50px;
  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: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.logoList_item img {
  max-width: var(--maxW);
  max-height: var(--maxH);
  object-fit: contain;
}


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


/* ==================================================
モーダル
================================================== */
.modal {
  --modalRadius: 32px;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  min-width: var(--contentWidth);
  height: 100%;
  background: rgba(0, 0, 0, .7);
  padding: 30px;
  text-align: center;
  overflow: hidden;
}
.modal::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em;
}
.modal_inner {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  text-align: left;
  width: 90%;
}
.modal_scroll {
  max-height: calc(100vh - 60px);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.modal_scroll::-webkit-scrollbar {
  display: none;
}
.modal_scroll_inner {
  background: #fff;
  border-radius: var(--modalRadius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 60px;
}
.modal_close {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  background-color: var(--defaultColor);
  border-radius: var(--modalRadius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 16px;
  cursor: pointer;
  transition: var(--transOpac);
}
.modal_close:hover,
.modal_close:focus {
  opacity: var(--hoverOpac);
}
.modal_close_txt {
  position: relative;
  color: #fff;
  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: 24px;
  --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: 24px;
  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: 32px;
  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: 20px;
  margin-top: 24px;
}
.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: 24px;
  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.pc_col1 > .colDivider_item:nth-child(-n+1)::before,
.colDivider.pc_col2 > .colDivider_item:nth-child(-n+2)::before,
.colDivider.pc_col3 > .colDivider_item:nth-child(-n+3)::before,
.colDivider.pc_col4 > .colDivider_item:nth-child(-n+4)::before,
.colDivider.pc_col5 > .colDivider_item:nth-child(-n+5)::before { content: none; }
/* 横線消し */
.colDivider.col1 > .colDivider_item:nth-child(1n)::after,
.colDivider.col2 > .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.pc_col1 > .colDivider_item:nth-child(1n)::after,
.colDivider.pc_col2 > .colDivider_item:nth-child(2n)::after,
.colDivider.pc_col3 > .colDivider_item:nth-child(3n)::after,
.colDivider.pc_col4 > .colDivider_item:nth-child(4n)::after,
.colDivider.pc_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(50% - 16px);
  left: calc(100% + ((var(--gapX) - var(--plusSize)) * .5));
  background-color: var(--colorGray);
  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%);
}
/* --- 縦にあるパターン --- */
.pc_joinPlus-vertical > .joinPlus_item::after {
  top: calc(100% + ((var(--gapY) - var(--plusSize)) * .5));
  left: 0;
  right: 0;
  margin: 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;
}