@charset "utf-8";
/* ==================================================
grobal pc用
================================================== */
:root {
  /* コンテンツ幅、余白 */
  --contentWidth: 1080px;
  --contentPaddingX: 20px;
  --contentPaddingXDouble: calc(var(--contentPaddingX) * 2);
  --contentMaxWidth: calc(var(--contentWidth) + var(--contentPaddingXDouble));
  /* 文字系 */
  --defaultFontSize: 16px;
  --smallFontSize: 14px;
  --largeFontSize: 18px;
  --fontSizeH2: 36px;
  --fontSizeH3: 32px;
  --fontSizeH4: 28px;
  --calcWideCont: calc(50% - 50vw + (var(--scrollbarW, 0px) * .5));
  --calcWideContP: calc(50vw - 50% - (var(--scrollbarW, 0px) * .5));
  /* 余白系 */
  --spaceLarge: 64px;
  --spaceMedium: 48px;
}


/* ==================================================
elements
================================================== */
/* ----- タグ指定 ----- */
body, input, textarea, select {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--defaultColor);
  font-size: var(--defaultFontSize);
  font-weight: var(--defaultFontWeight);
  line-height: var(--defaultLineHeight);
  letter-spacing: var(--defaultLetterSpacing);
}
html, body {
  width: 100%;
  min-width: calc(var(--contentWidth) + var(--contentPaddingXDouble));
  margin: 0;
  padding: 0;
}
body {
  padding-top: var(--headerH, 91px);
}
body.is-scrollLock {
  padding-right: var(--scrollbarW, 0);
}
body:has(.header-simple) {
  padding-top: 0;
}
a {
  color: var(--mainColor);
  text-decoration: underline;
  text-underline-offset: 4px;
}
a:hover, a:focus {
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  appearance: none;
  color: inherit;
  font-family: var(--defaultFontFamily);
}
strong {
  color: var(--colorRed);
}
summary { list-style-type: none; }
summary::-webkit-details-marker { display: none; }
/* ----- クラス指定 ----- */
.content_main {
  padding-bottom: 16px;
}
.content_main > article {
  overflow: hidden;
}
/* - コンテンツ大枠 - */
.cntSec {
  --secGap: 80px;
}
.cntSec_inner {
  position: relative;
  width: calc(var(--contentWidth) + var(--contentPaddingXDouble));
  margin: auto;
  padding: var(--secGap) var(--contentPaddingX) 0;
}
.cntSec_inner::after {
  content: "";
  display: block;
  clear: both;
}
.cntSec[class*="bg"] { margin-top: var(--secGap); }
.cntSec[class*="bg"] .cntSec_inner { padding-bottom: var(--secGap); }
/* 背景が2こ続きのパターン */
.cntSec[class*="bg"] + .cntSec[class*="bg"] { margin-top: 0; }
/* 見出し1にスライダーがあり、かつ次がsvではないパターンがあるため */
.heading1:has(.heading1_extra) + .cntSec {
  --secGap: 120px;
}
.hr {
  width: 100%;
  height: 2px;
  background-color: var(--colorLightGray);
  margin: 32px 0;
}

/* ==================================================
SVGアイコン画像
================================================== */
/* svg画像（動的生成）デフォルトはサイトのメイン色 */
[data-svgIcon] {
  --svgIcon: '';
  --svgIconContent: none;
}
[data-svgIcon]::after {
  content: var(--svgIconContent);
  width: 100%;
  height: 100%;
  display: block;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--svgIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--svgIcon);
  background-color: var(--svgIconColor, var(--mainColor));
  transition: var(--transBg);
}

/* ==================================================
汎用横並び
================================================== */
.flex {
  --gapY: 24px;
  --gapX: 24px;
  --col: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gapY) var(--gapX);
  margin-top: 24px;
}
.flex:first-child { margin-top: 0; }
.flex > .flex_item,
.flex > * {
  --tFlexGap: calc(calc(var(--col) - 1) * var(--gapX));
  --tFlexWrap: calc(100% - var(--tFlexGap));
  --tFlexW: calc(var(--tFlexWrap) / var(--col));
  flex: 0 0 auto;
  width: var(--tFlexW);
  margin: 0;
}
.flex.flex-auto > .flex_item,
.flex.flex-auto > *,
.flex.pc_flex-auto > .flex_item,
.flex.pc_flex-auto > * {
  width: auto;
  flex-shrink: 1;
}


/* ==================================================
汎用transition、opacity
================================================== */
.tran { transition: all var(--defaultTrans); }
.opac { transition: var(--transOpac); }
.opac:hover, .opac:focus { opacity: var(--hoverOpac); }


/* ==================================================
breadcrumb
================================================== */
.breadcrumb a {
  color: var(--defaultColor);
  transition: var(--defaultTrans);
}
.breadcrumb a:hover { opacity: var(--hoverOpac); }
.breadcrumb {
  padding: 16px 0;
  position: relative;
  z-index: 1;
  font-size: 14px;
  line-height: 1;
  background-color: #EAEAEA;
}
.breadcrumb_inner {
  width: 100%;
  max-width: calc(1080px + var(--contentPaddingXDouble));
  margin: auto;
  padding: 0 var(--contentPaddingX);
}
.breadcrumb_list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumb_list > li:not(:first-child)::before {
  content: '>';
  margin-right: 12px;
}
.breadcrumb_list > li:last-child {
  font-weight: bold;
}
.breadcrumb_homeIcon {
  width: 20px;
  aspect-ratio: 1 / 1;
  display: block;
}


/* ==================================================
header
================================================== */
.header {
  min-width: calc(var(--contentWidth) + var(--contentPaddingXDouble));
  /* height: 85px; */
  position: fixed;
  left: 0;
  right: var(--scrollbarW, 0);
  right: 0;
  top: 0;
  z-index: 9999;
  background: #fff;
  transition: transform var(--defaultTrans);
  border-bottom: 1px solid var(--mainColor);
  padding: 0;
}
.header-hide {
  transform: translateY(-100%);
  transition: transform var(--defaultTrans);
}
.header_main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-template-areas:
    "logo     nav01    navOthers"
    "navCate  navCate  navCate";
}
/* ----- ロゴ ----- */
.header_logo {
  grid-area: logo;
  letter-spacing: 0;
  margin: 0;
  padding: 16px 20px;
}
.header_logo img {
  width: 100%;
  height: auto;
}
.header_logo_inner {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--defaultColor);
  text-decoration: none;
  transition: var(--transOpac);
}
.header_logo_inner:hover {
  opacity: var(--hoverOpac);
}
.header_logo_box {
  display: flex;
  gap: 2px;
  flex-direction: column;
}
.header_logo_anniv {
  width: 50px;
  display: flex;
  align-items: center;
}
.header_logo_heading {
  width: 160px;
  display: flex;
}
.header_logo_code {
  font-size: 12px;
  text-align: right;
}
/* ----- ナビ01 ----- */
.header_nav01 {
  grid-area: nav01;
}
.header_nav01_list {
  display: flex;
  gap: 15px;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.5;
  text-align: center;
}
.header_nav01_item {
}
.header_nav01_link {
  display: block;
  color: var(--defaultColor);
  text-decoration: none;
  border-radius: 8px;
  padding: 4px 15px;
  transition: var(--transBg);
}
/* - ナビ01 ホバー、カレント - */
.header_nav01_link:hover,
.header_nav01_item.is-current .header_nav01_link {
  background-color: #EAEAEA;
}
/* ----- ナビ（その他） ----- */
.header_navOthers {
  grid-area: navOthers;
}
.header_navOthers_list {
  display: flex;
}
.header_navOthers_item {
}
.header_navOthers_btn {
  --iconW: 25px;
  --iconH: 30px;
  width: 85px;
  aspect-ratio: 1 / 1;
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  text-decoration: none;
  transition:
    var(--transBg),
    var(--transOpac);
}
.header_navOthers_btn:hover { opacity: var(--hoverOpac); }
.header_navOthers_btn_icon {
  width: var(--iconW);
  height: var(--iconH);
  display: block;
  margin: 0 auto;
}
/* - 検索ボタン - */
.header_navOthers_btn-search {
  --iconW: 24px;
  --iconH: 24px;
  color: var(--defaultColor);
}
/* - 店舗・ATMボタン - */
.header_navOthers_btn-atm {
  --svgIconColor: #fff;
  background-color: var(--colorGreen);
  border-radius: 0 0 0 12px;
}
/* - ログインボタン - */
.header_navOthers_btn-login {
  --iconW: 23px;
  --svgIconColor: #fff;
  background-color: #FF7E39;
}
.header_navOthers_btn-login.is-active {
  background-color: var(--colorDarkGray);
}
/* ----- ナビ（カテゴリ） ----- */
.header_navCate {
  grid-area: navCate;
}
.header_navCate_list {
  display: flex;
}
.header_navCate_item {
  flex: 1 1 auto;
  position: relative;
}
.header_navCate_item::before {
  content: '';
  width: 1px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--defaultColor);
  margin: auto;
  opacity: .5;
}
.header_navCate_item:first-child::before { content: none; }
.header_navCate_btn {
  width: 100%;
  min-height: 64px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  color: var(--defaultColor);
  font-weight: bold;
  font-size: 16px;
  letter-spacing: .03em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  padding: 4px;
  transition: var(--transOpac);
}
.header_navCate_btn:hover { opacity: var(--hoverOpac); }
.header_navCate_btn_icon {
  width: 14px;
  aspect-ratio: 1 / 1;
  display: block;
}
/* - 追加 各カテゴリ用ナビのまとまり - */
.header_navCate_categoryWrap { display: none; }
.header_navCate_categoryWrap.is-active { display: block; }
/* ----- メガメニュー ----- */
.header_megaNav .nmlBtn {
  --gapY: 16px;
  --nmlBtnMinH: 58px;
  margin-top: 16px;
}
.header_megaNav .nmlBtn:first-child { margin-top: 0; }
.header_megaNav .emphBtn {
  --gap: 20px;
  --btnMinW: 308px;
  --btnFontSize: 18px;
}
.header_megaNav .textLink {
  color: var(--defaultColor);
  font-size: 14px;
  text-decoration: none;
}
.header_megaNav .textLink:hover { text-decoration: underline; }
.header_megaNav {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 998;
  width: 100%;
  height: 0;
  font-size: var(--defaultFontSize);
}
/* - 追加 子ページのまとまり - */
.header_megaNav_categoryWrap {
  display: none;
}
.header_megaNav_categoryWrap.is-active { display: block; }
/* - 子ページのリンク - */
.header_megaNav_item {
  display: none;
  width: 100%;
  min-width: calc(var(--contentWidth) + var(--contentPaddingXDouble));
  background-color: var(--colorLightGray);
  border: none;
}
.header_megaNav_item_inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  border-top: 1px solid rgba(51, 51, 51, .5);
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.header_megaNav_item_inner::-webkit-scrollbar {
  display: none;
}
/* - ドロップナビ サイド、メイン - */
.header_dropNav,
.header_dropNavCont {
  max-height: calc(var(--winH, 800px) - var(--headerH, 75px) + 3px);
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.header_dropNav::-webkit-scrollbar,
.header_dropNavCont::-webkit-scrollbar {
  display: none;
}
/* - ドロップナビ サイド部分 - */
.header_dropNavMain {
  display: grid;
}
.header_dropNavMain_btn {
  display: none;
}
.header_dropNav {
  --txtColor: var(--defaultColor);
  --btnColor: #fff;
  background-color: #fff;
}
.header_dropNav_item {
  position: relative;
}
.header_dropNav_item::after {
  content: '';
  height: 1px;
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  background-color: var(--colorGray);
}
.header_dropNav_btn {
  width: 100%;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--txtColor);
  font-size: var(--defaultFontSize);
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
  background-color: var(--btnColor);
  padding: 12px 20px;
  cursor: pointer;
  transition:
    var(--transColor),
    var(--transBg),
    var(--transOpac);
}
.header_dropNav_btn:hover {
  opacity: var(--hoverOpac);
}
.header_dropNav_icon {
  width: 16px;
  height: 16px;
  display: block;
  position: relative;
}
.header_dropNav_icon::before,
.header_dropNav_icon::after {
  content: '';
  width: 16px;
  height: 2px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--txtColor);
  margin: auto;
  transition:
    var(--transBg),
    transform var(--defaultTrans);
}
.header_dropNav_icon::before { transform: rotate(-90deg); }
.header_dropNav_btn.is-active {
  --txtColor: #fff;
  --btnColor: var(--mainColor);
}
.header_dropNav_btn.is-active .header_dropNav_icon::before { transform: rotate(0); }
/* - ドロップナビ メイン部分 - */
.header_dropNavCont {
  height: 100%;
  display: grid;
  position: relative;
  grid-template-rows: auto 1fr;
  align-items: end;
}
.header_dropNavCont_item {
  display: none;
  width: 100%;
  height: 100%;
  max-width: 1130px;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  padding: 24px 40px 40px;
}
.header_dropNavCont_item.is-active {
  position: relative;
}
/* SP時にはアコーディオン、PC時はアコーディオン無し */
.header_megaNav_acd {
  display: block;
}
.header_megaNav_acd_btn {
  display: none;
}
.header_megaNav_acd_box {

}
.header_megaNav_acd_box_inner {

}
/* コンテンツ */
.header_megaNav_ttl {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.3;
  border-left: 5px solid var(--mainColor);
  margin-top: 32px;
  padding-left: 10px;
}
.header_megaNav_ttl:first-child { margin-top: 0; }
.header_megaNav_grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 20px;
}
.header_megaNav_grid:first-child { margin-top: 0; }
.header_megaNav_banner {
  width: 100%;
  max-width: 375px;
  display: flex;
  transition: var(--transOpac);
}
.header_megaNav_flex {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.header_megaNav_flex:first-child { margin-top: 0; }
.header_megaNav_banner:hover { opacity: var(--hoverOpac); }
.header_megaNav_banner > img {
  border-radius: 16px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}
/* PCのみnmlBtnと見た目同じ */
/* 変数 */
.header_megaNav_btn {
  /* カラム・幅など */
  --col: 1;
  --gapY: 16px;
  --gapX: 24px;
  --btnMaxW: 420px;
  --btnMinH: 58px;
  --btnRadius: 34px;
  --btnPadding: 36px;
  --btnItemGap: 8px;
  --btnPos: center;
  /* 色 */
  --btnColor: #fff;
  --btnBoderColor: var(--mainColor);
  --btnColor_hover: var(--mainColor);
  /* アイコン */
  --svgIconColor: #fff;
  --btnLinkIcon: url(/common_v3/images/icon/icon_link.svg);
  --btnLinkIconWidth: 14px;
  --btnLinkIconHeight: 14px;
}
/* メイン */
.header_megaNav_btn {
  max-width: 100%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  text-align: center;
  margin-top: 20px;
}
.header_megaNav_btn:first-child { margin-top: 0; }
.header_megaNav_btn_item {
  /* ボタン色 */
  --btnIcoColor: var(--btnColor_hover);
  --btnTxtColor: var(--defaultColor);
  --btnBgColor: var(--btnColor);
  /* 幅 */
  --tBtnGapX: calc(calc(var(--col) - 1) * var(--gapX));
  --tBtnWrap: calc(100% - var(--tBtnGapX));
  --tBtnW: calc(var(--tBtnWrap) / var(--col));
  flex: 0 0 auto;
  width: var(--tBtnW);
  max-width: var(--btnMaxW);
  display: flex;
  gap: var(--btnItemGap);
  flex-direction: column;
}
.header_megaNav_btn_item_inner {
  width: 100%;
  height: 100%;
  min-height: var(--btnMinH);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--btnTxtColor);
  background: var(--btnBgColor);
  border: 1px solid var(--btnBoderColor);
  border-radius: var(--btnRadius);
  padding: 8px var(--btnPadding) 8px 36px;
  text-decoration: none;
  cursor: pointer;
  transition:
    var(--transColor),
    var(--transBg);
}
.header_megaNav_btn_item_inner:not(:has(.header_megaNav_btn_linkIcon)) {
  padding-left: calc(var(--btnPadding) * .5);
  padding-right: calc(var(--btnPadding) * .5);
}
.header_megaNav_btn_text {
  display: flex;
  gap: 0;
  flex-direction: column;
}
.header_megaNav_btn_text_main {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.45;
}
.header_megaNav_btn_text_main:only-child {
  font-size: var(--defaultFontSize);
}
.header_megaNav_btn_text_sub {
  font-size: 14px;
  line-height: 1.2;
}
/* - 色 - */
.header_megaNav_btn-orange {
  --btnColor: var(--subColor);
  --btnBoderColor: var(--subColor);
}
.header_megaNav_btn_icon {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 20px;
  bottom: 0;
  margin: auto;
}
.header_megaNav_btn_icon::after {
  background-color: var(--btnIcoColor);
  transition: var(--transBg);
}
.header_megaNav_btn_item_inner:has(.header_megaNav_btn_icon) {
  padding-left: 52px;
}
/* - リンクアイコン - */
.header_megaNav_btn_linkIcon {
  width: var(--btnLinkIconWidth);
  height: var(--btnLinkIconHeight);
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto;
}
.header_megaNav_btn_linkIcon::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--btnIcoColor);
  transition: var(--transBg);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--btnLinkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--btnLinkIcon);
}
/* 文字で来るアイコン用（pdfなど共通部分） */
.header_megaNav_btn:has(.header_megaNav_btn_linkIcon-pdf) {
  --btnPadding: 56px;
}
/* アイコンの種類 */
.header_megaNav_btn_linkIcon-down { --btnLinkIcon: url(/common_v3/images/icon/icon_anchor.svg); }
.header_megaNav_btn_linkIcon-download { --btnLinkIcon: url(/common_v3/images/icon/icon_download.svg); }
.header_megaNav_btn_linkIcon-blank { --btnLinkIcon: url(/common_v3/images/icon/icon_blank.svg); }
.header_megaNav_btn_linkIcon-pdf {
  --btnLinkIcon: url(/common_v3/images/icon/icon_pdf.svg);
  --btnLinkIconWidth: 37px;
  --btnLinkIconHeight: 18px;
}
/* - ホバー - */
a.header_megaNav_btn_item_inner:hover {
  --btnIcoColor: var(--btnColor);
  --btnTxtColor: var(--btnColor);
  --btnBgColor: var(--btnColor_hover);
  --svgIconColor: var(--btnColor);
}
/* - 角丸調整 - */
.header_megaNav_btn-roundSmall {
  --btnRadius: 8px;
}
/* コンテンツ1 */
.header_megaNav_fstCont {
  display: grid;
  gap: 16px;
  grid-template-columns: 334px 1fr;
  border-bottom: 1px solid var(--colorGray);
  padding-bottom: 32px;
}
.header_megaNav_fstCont_thumb {
  border-radius: 16px;
}
.header_megaNav_fstCont_body {
  font-weight: 500;
}
.header_megaNav_fstCont_body:only-child {
  grid-column: span 2;
}
.header_megaNav_fstCont_ttl {
  color: var(--mainColor);
  font-size: 28px;
  font-weight: bold;
  letter-spacing: .03em;
}
.header_megaNav_fstCont_ttl > a {
  text-decoration: none;
}
.header_megaNav_fstCont_ttl > a:hover {
  text-decoration: underline;
}
.header_megaNav_fstCont_txt {
  margin-top: 16px;
}
.header_megaNav_fstCont_txt:first-child { margin-top: 0; }
/* コンテンツ2 */
.header_megaNav_sndCont {
  display: grid;
  gap: 32px 24px;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  margin-top: 32px;
}
.header_megaNav_sndCont_item {

}
/* アイテム幅 */
.header_megaNav_sndCont_item-column2 { grid-column: span 2; }
.header_megaNav_sndCont_item-column3 { grid-column: span 3; }
/* 別レイアウト */
.header_megaNav_sndCont_item-type2 {
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 16px;
  padding: 24px;
}
/* コンテンツ3 */
.header_megaNav_thrdCont {
  margin-top: 32px;
}
/* ----- メガメニュー閉じるボタン ----- */
.header_megaNav_close {
  width: 100%;
  height: 56px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.375;
  text-align: center;
  background-color: var(--colorDarkGray);
  cursor: pointer;
  transition: var(--transOpac);
}
.header_megaNav_close:hover,
.header_megaNav_close:focus {
  opacity: var(--hoverOpac);
}
.header_megaNav_close::before {
  content: '';
  width: 15px;
  aspect-ratio: 1 / 1;
  display: block;
  background: url(/common_v3/images/icon/icon_close_white.svg) no-repeat center / contain;
}
/* ----- メガメニュー再度エリアが無い場合 ----- */
.header_dropNavMain:only-child {
  grid-column: 1 / span 2;
}
.header_dropNavMain:only-child .header_dropNavCont_item {
  /* margin: auto; */
}
/* ----- ログインエリアや検索エリアなど ----- */
.header_megaNav2 .emphBtn {
  --btnMarginTop: 16px;
}
.header_megaNav2 .header_megaNav_item {
  background: none;
}
.header_megaNav2 .header_megaNav_item_inner {
  grid-template-columns: auto;
  align-items: start;
  justify-content: end;
  position: absolute;
  top: -50px;
  right: 16px;
  border: none;
}
/* ----- ログインエリア ----- */
.header_loginCont {
  min-width: 1080px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  overflow: hidden;
}
.header_loginCont_inner {
  display: flex;
  gap: 64px;
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 16px 16px 0 0;
  padding: 24px 40px;
}
.header_loginCont_item {
  position: relative;
}
.header_loginCont_item::before {
  content: '';
  width: 1px;
  height: 100%;
  position: absolute;
  left: -32px;
  top: 0;
  background-color: var(--colorGray);
}
.header_loginCont_item:first-child::before { content: none; }
.header_loginCont_ttl {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}
/* ----- 検索 ----- */
.header_searchCont {
  min-width: 1080px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  overflow: hidden;
}
.header_searchCont_inner {
  display: flex;
  gap: 64px;
  background-color: #fff;
  border: 1px solid var(--colorGray);
  border-radius: 16px 16px 0 0;
  padding: 24px 40px;
}
.header_searchCont #srchForm {
  width: 100%;
  display: block;
  position: relative;
}
.header_searchCont #srchInput {
  margin: 0;
  padding-right: 48px;
}
.header_searchCont #srchBtn {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  margin: auto;
}

/* ----- ヘッダーオーバーレイ ----- */
.header_overlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .8);
}


/* ----- シンプルヘッダー ----- */
.header-simple {
  position: sticky;
}
.header-simple .header_main {
  justify-content: flex-start;
}
.header-simple .header_logo {
  margin: 0;
}


/* ==================================================
Footer
================================================== */
.footer {
  --contentWidth: 1180px;
  width: 100%;
  overflow: hidden;
}
.footer_inner {
  width: calc(var(--contentWidth) + var(--contentPaddingXDouble));
  max-width: 100%;
  margin: auto;
  padding: 0 var(--contentPaddingX);
}
.footer_logo {
  display: flex;
  gap: 8px;
  align-items: center;
  line-height: 1;
}
.footer_logo img {
  width: 100%;
  height: auto;
}
.footer_logo_box {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.footer_logo_anniv {
  width: 60px;
  display: flex;
  align-items: center;
}
.footer_logo_img {
  width: 200px;
  display: flex;
}
.footer_logo_code {
  font-size: 14px;
  text-align: right;
}
/* ----- sns ----- */
.footer_sns {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--colorGray);
  border-bottom: 1px solid var(--colorGray);
  margin: 0 var(--calcWideCont);
  padding: 32px var(--calcWideContP);
}
.footer_sns_head {}
.footer_sns_head_txt {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: .05em;
  line-height: 1;
}
.footer_sns_head_txt_link {
  color: var(--defaultColor);
  text-decoration: none;
}
.footer_sns_head_txt_link:hover {
  text-decoration: underline;
}
.footer_sns_body {}
.footer_sns_list {
  display: flex;
  gap: 32px;
  align-items: center;
}
.footer_sns_list_item {}
.footer_sns_list_link {
  width: 40px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transOpac);
}
.footer_sns_list_link:hover { opacity: var(--hoverOpac); }
.footer_sns_list_link > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* ----- フッターサイトマップ ----- */
.footer_sitemap {
}
.footer_block01,
.footer_block02 {
}
.footer_block01 {
  background-color: #fff;
  margin: 0 var(--calcWideCont);
  padding: 32px var(--calcWideContP);
}
.footer_block02 {
}
.footer_sitemap_list {
  display: flex;
  gap: 20px 24px;
  flex-wrap: wrap;
  font-weight: bold;
  margin-top: 32px;
}
.footer_sitemap_list_item {
  display: flex;
}
.footer_sitemap_list_item::after {
  content: '|';
  margin-left: 24px;
}
.footer_sitemap_list_item:last-child::after { content: none; }
.footer_sitemap_list_link {
  color: var(--defaultColor);
  text-decoration: none;
}
.footer_sitemap_list_link:hover {
  text-decoration: underline;
}
.footer_sitemap_cate {
  display: grid;
  gap: 32px 20px;
  grid-template-columns: repeat(4, 1fr);
}
/* - タブ（あとから追加） - */
.footer_sitemap_tab {
}
.footer_sitemap_tab_btnWrap {
  --fontSize: 16px;
  display: flex;
  gap: 8px;
}
.footer_sitemap_tab_btn {
  flex: 1 1 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.2;
  padding: 8px;
  transition:
    var(--transBg),
    var(--transOpac);
}
.footer_sitemap_tab_btn:hover { opacity: var(--hoverOpac); }
.footer_sitemap_tab_btn.is-active {
  background-color: var(--colorLightGray);
  user-select: none;
  pointer-events: none;
}
.footer_sitemap_tab_bodyWrap {
  min-height: 300px;
  position: relative;
  background-color: var(--colorLightGray);
  margin: 0 var(--calcWideCont);
  padding: 32px var(--calcWideContP);
}
.footer_sitemap_tab_body {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.footer_sitemap_tab_body.is-active {
  position: static;
}
/* - spのみアコーディオン 大カテゴリ - */
.footer_catGroup {
  --col: 4;
}
.footer_catGroup_btn {
  display: none;
}
.footer_catGroup_box {
  display: grid;
  gap: 32px 20px;
  grid-template-columns: repeat(var(--col), 1fr);
}
.footer_catGroup_box_item {
}
.footer_catGroup_box_item-wide {
  grid-column: 1 / -1;
}
/* - spのみアコーディオン 中カテゴリ - */
.footer_cat {
  margin-top: 32px;
  padding-bottom: 1px;
}
.footer_cat:first-child { margin-top: 0; }
/* アコーディオンやリンクボタン */
.footer_cat_btn {
  --linkIcon: url(/common_v3/images/icon/icon_link.svg);
  --linkIconColor: var(--mainColor);
  --linkIconWidth: 16px;
  --linkIconHeight: 16px;
  --linkIconPosR: 0px;

  width: 100%;
  max-width: 280px;
  position: relative;
  color: var(--mainColor);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.33;
  background: none;
  border-bottom: 1px solid var(--mainColor);
  padding-bottom: 14px;
  text-decoration: none;
}
.footer_cat_btn .js-acd_btn_icon { display: none; }
a.footer_cat_btn {
  display: flex;
  transition: var(--transOpac);
}
a.footer_cat_btn:hover { opacity: var(--hoverOpac); }
summary.footer_cat_btn {
  opacity: 1 !important;
  cursor: auto;
}
.footer_cat_btn_linkIcon {
  width: var(--linkIconWidth);
  height: var(--linkIconHeight);
  display: block;
  position: absolute;
  top: 0;
  right: var(--linkIconPosR);
  bottom: 14px;
  margin: auto;
}
.footer_cat_btn_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);
}
/* - リンクアイコンパターン（要素判定） - */
.footer_cat_btn[target="_blank"] { --linkIcon: url(/common_v3/images/icon/icon_blank.svg); }
/* - リンクアイコンパターン（手動） - */
.footer_cat_btn_linkIcon-down { --linkIcon: url(/common_v3/images/icon/icon_anchor.svg); }
.footer_cat_btn_linkIcon-download { --linkIcon: url(/common_v3/images/icon/icon_download.svg); }
.footer_cat_btn_linkIcon-blank { --linkIcon: url(/common_v3/images/icon/icon_blank.svg); }
.footer_cat_box {
  margin-top: 16px;
}
/* 子ページエリア */
.footer_catList {
  --linkIcon: url(/common_v3/images/icon/icon_link.svg);
  --linkIconW: 12px;
  --linkIconH: 12px;

  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.4;
  margin-top: 16px;
}
.footer_catList:first-child { margin-top: 0; }
.footer_catList_item {
  margin-top: 16px;
}
.footer_catList_item:first-child { margin-top: 0; }
.footer_catList_link {
  display: inline-flex;
  color: var(--defaultColor);
  text-decoration: none;
}
a.footer_catList_link:hover { text-decoration: underline; }
.footer_catList_linkIcon {
  width: var(--linkIconW);
  height: var(--linkIconH);
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  top: 4px;
  margin: 0 0 0 8px;
}
.footer_catList_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(--linkIcon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-image: var(--linkIcon);
}
/* リンクアイコンパターン（要素判定） */
.footer_catList_link[target="_blank"] { --linkIcon: url(/common_v3/images/icon/icon_blank.svg); }
/* リンクアイコンパターン（手動） */
.footer_catList_linkIcon-down { --linkIcon: url(/common_v3/images/icon/icon_anchor.svg); }
.footer_catList_linkIcon-download { --linkIcon: url(/common_v3/images/icon/icon_download.svg); }
.footer_catList_linkIcon-blank { --linkIcon: url(/common_v3/images/icon/icon_blank.svg); }
/* - spのアコーディオン - */
.footer_spAcd {
  margin-top: 32px;
  padding-bottom: 1px;
}
.footer_spAcd:first-child { margin-top: 0; }
.footer_spAcd_btn {
  background: none;
  cursor: auto !important;
  opacity: 1 !important;
}
.footer_spAcd_btn .js-acd_btn_icon {
  display: none;
}
.footer_spAcd_body {
  margin-top: 16px;
}
/* ----- サイトマップ（サブ） ----- */
.footer_sub {
  background-color: #EAEAEA;
  margin: 0 var(--calcWideCont);
  padding: 24px var(--calcWideContP);
}
.footer_sub_list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
.footer_sub_list:first-child { margin-top: 0; }
.footer_sub_list_item {
}
.footer_sub_list_item::before {
  content: '|';
  margin-right: 12px;
}
.footer_sub_list_item:last-child::after {
  content: '|';
  margin-left: 12px;
}
.footer_sub_link {
  color: var(--defaultColor);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .03em;
  text-decoration: none;
}
.footer_sub_link:hover { text-decoration: underline; }
/* ----- コピーライト ----- */
.footer_copy {
  color: #fff;
  line-height: 1;
  background: var(--defaultColor);
  margin: 0 var(--calcWideCont);
  padding: 24px var(--calcWideContP) 16px;
  text-align: center;
}
.footer_copy_head {
  font-size: 16px;
  line-height: 1.5;
}
.footer_copy_head_txt {
  margin-top: 8px;
}
.footer_copy_head_txt:first-child { margin-top: 0; }
.footer_copy_codes {
  font-size: 12px;
  margin-top: 12px;
}
/* ----- ページトップボタン ----- */
.btnPageTop {
  --btnPageTopSize: 80px;
  --btnPageTopOpac: 0;
  --btnPageTopVisibility: hidden;
  display: flex;
  justify-content: flex-end;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 9998;
  padding: 8px var(--contentPaddingX);
  visibility: hidden;
  transition: visibility var(--defaultTrans);
}
.btnPageTop.is-show {
  --btnPageTopOpac: 1;
  --btnPageTopVisibility: visible;
}
.btnPageTop_trigger {
  width: var(--btnPageTopSize);
  aspect-ratio: 1 / 1;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  cursor: pointer;
  opacity: var(--btnPageTopOpac);
  visibility: var(--btnPageTopVisibility);
  transition:
    var(--transOpac),
    visibility var(--defaultTrans);
}
.btnPageTop_trigger:hover,
.btnPageTop_trigger:focus { --btnPageTopOpac: var(--hoverOpac); }
/* ----- 追加の追従ボタン ----- */
.floatingExtraBox {
  --btnOpac: 0;
  --btnVisibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: -webkit-sticky;
  position: sticky;
  bottom: 96px;
  z-index: 9998;
  padding: 0 8px;
  visibility: hidden;
}
.floatingExtraBox.is-show {
  --btnOpac: 1;
  --btnVisibility: visible;
}
.floatingExtraBox_inner {
  opacity: var(--btnOpac);
  visibility: var(--btnVisibility);
  transition:
    var(--transOpac),
    visibility var(--defaultTrans);
}
.floatingExtraBtn {
  width: 150px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font-size: var(--smallFontSize);
  font-weight: bold;
  text-align: center;
  background: var(--mainColor);
  border: 1px solid var(--mainColor);
  border-radius: 8px;
  padding: 4px;
  text-decoration: none;
  margin-top: 8px;
  cursor: pointer;
  transition:
    var(--transColor),
    var(--transBg);
}
.floatingExtraBtn:hover,
.floatingExtraBtn:focus {
  background-color: #fff;
  color: var(--mainColor);
}
.floatingExtraBtn:first-child { margin-top: 0; }
/* LP用追従ボタン */
.floatingExtraBtn-lp {
  width: 180px;
  right: -8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-top: 38px;
}
.floatingExtraBtn_txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}
.floatingExtraBtn_txt_sub {
  font-size: 14px;
}
.floatingExtraBtn_txt_main {
  font-size: 18px;
}
.floatingExtraBtn_img {
  max-width: 168px;
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  margin: auto;
  transform: translateY(-50%);
}
/* --- 色 --- */
.floatingExtraBtn-orange {
  background-color: var(--subColor);
  border-color: var(--subColor);
}
.floatingExtraBtn-orange:hover,
.floatingExtraBtn-orange:focus {
  color: var(--subColor);
}


/* ==================================================
サイトマップ
================================================== */
.sitemap {
  /* カラムなど */
  --col: 2;
  --gapY: 40px;
  --gapX: 40px;
  margin-top: 80px;
}
.sitemap:first-child { margin-top: 0; }
.sitemap_ttl {
  font-weight: bold;
  font-size: 22px;
  letter-spacing: .05em;
  text-align: center;
}
.sitemap_links {
  max-width: 100%;
  display: flex;
  gap: var(--gapY) var(--gapX);
  flex-wrap: wrap;
  margin-top: 32px;
}
.sitemap_links:first-child { margin-top: 0; }
.sitemap_links_item {
  /* 幅 */
  --tmp1: calc(calc(var(--col) - 1) * var(--gapX));
  --tmp2: calc(100% - var(--tmp1));
  --tmp3: calc(var(--tmp2) / var(--col));
  flex: 0 0 auto;
  width: var(--tmp3);
}
.sitemap_links_parent {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.4;
  border-bottom: 2px solid var(--mainColor);
  margin-top: 40px;
  padding-bottom: 16px;
}
.sitemap_links_parent:first-child { margin-top: 0; }
.sitemap_links_parent > a {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  color: var(--defaultColor);
  text-decoration: none;
  transition: var(--transColor);
}
.sitemap_links_parent > a:hover {
  color: var(--mainColor);
}
.sitemap_links_parent .linkIcon {
  margin: 0;
}
.sitemap_links_child {
  display: flex;
  gap: 12px;
  flex-direction: column;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .03em;
  line-height: 1.5;
  margin-top: 20px;
}
.sitemap_links_child:first-child { margin-top: 0; }
.sitemap_links_child > li {
  display: flex;
}
.sitemap_links_child a {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--mainColor);
  text-decoration: none;
  transition: var(--transOpac);
}
.sitemap_links_child a:hover {
  opacity: var(--hoverOpac);
}
.sitemap_links_child .linkIcon {
  margin: 0;
}


/* ==================================================
追従コンバージョン
================================================== */
.fixedCnv {
  --gapX: 48px;
  width: 100%;
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 995;
  background-color: rgba(253, 251, 235, .9);
  padding: 16px 0;
}
.fixedCnv_inner {
  width: calc(var(--contentWidth) + var(--contentPaddingXDouble));
  margin: auto;
  padding: 0 var(--contentPaddingX);
}
.fixedCnv_flex {
  display: flex;
  gap: var(--gapX);
}
.fixedCnv_flex_item {
  flex: 1 1 auto;
}
.fixedCnv_flex_item-small {
  flex-grow: 0;
}
.fixedCnv .nmlBtn {
  --nmlBtnMinH: 54px;
  --nmlBtnItemGap: 4px;
  min-width: 308px;
}
.fixedCnv .nmlBtn:not([class*="gapX"]) {
  --gapX: 48px;
}
.fixedCnv .nmlBtn_item {
  min-height: 72px;
}
/* ----- 先行公開用 ----- */
.fixedCnv-beta {

}
.fixedCnv-beta .nmlBtn {
  --gapX: 24px;
  --nmlBtnMaxW: 350px;
  --nmlBtnItemGap: 8px;
}
.fixedCnv-beta .nmlBtn_item {
  min-height: initial;
}
.fixedCnv-beta .nmlBtn_text_main {
  line-height: 1.1;
}
.fixedCnv_flex_item-small .nmlBtn {
  --nmlBtnMaxW: 308px;
}


/* ==================================================
i-serch用
================================================== */
#i-search .search_results .image_area {
  flex-shrink: 0;
}
.noscript {
  display: none;
}


@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% { visibility: hidden; }
  100% { opacity: 0; }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}