@charset "UTF-8";
/*
Theme Name: Monogatari Basic
Text Domain: mngtr
Version: 1.0
Requires at least: 5.3
Requires PHP: 7.2
Description: 物語コーポレーション各業態Webサイトの基本となるテーマ
Author: Monogatari Corporation
Author URI: https: //www.monogatari.co.jp/
*/

/* 基本
============================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: 10px;
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  touch-action: manipulation;
}
body {
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.6;
  font-family: "Noto Serif JP", serif;
  color: #000;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: url(img/bg.webp);
  background-color: #fff;
  background-size: contain;
}
@media (max-width: 768.98px) {
  body {
    font-size: 1.5rem;
  }
}
a {
  color: #000;
  text-decoration: none;
  outline: none;
  transition: all .5s;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
address {
  font-style: normal;
  font-weight: normal;
}
:root {
  --contaienerWidth: 1200px;
}
.main {
  overflow: hidden;
}
ul li {
  list-style-type: none;
}

div.page .main,
div.archive .main,
div.single .main {
  padding-top: 170px;
}
@media (max-width: 768px) {
  div.page .main,
  div.archive .main,
  div.single .main {
    padding-top: 80px;
  }
}

/* 緊急時お知らせティッカー
============================================== */
.systemTicker {
  display: block;
  width: min(1200px, 100% - 60px);
  padding-top: 2.5rem;
  padding-bottom: 2rem;
  text-align: center;

  margin-inline: auto;
}
.systemTicker + .systemTicker {
  margin-top: -1rem;
  padding-top: 0;
  padding-bottom: 0;
}

/*TOPページのみ*/
#page--home .systemTicker {
  padding-bottom: 2.5rem;
}
#page--home .systemTicker + .systemTicker {
  margin-top: -1.5rem;
  padding-bottom: 2.5rem;
}
  /*--ここまで--*/
.systemTicker_title {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 200px;
  padding: 2rem 3rem 2rem 2rem;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  text-align: left;
  color: #a31a1a;
  text-decoration: underline;
  text-decoration: none;
  background: #f0c8c8;
}

.systemTicker_title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 8.5px;
  height: 12.5px;
  background: no-repeat url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 265 436.7\"><path fill=\"%23a31a1a\" d=\"M258,235.4L63.7,429.6c-9.3,9.4-24.4,9.4-33.8,0.1c0,0-0.1-0.1-0.1-0.1L7.1,407c-9.4-9.3-9.4-24.4-0.1-33.8c0,0,0.1-0.1,0.1-0.1l154-154.7L7.1,63.7c-9.3-9.4-9.3-24.5,0-33.9L29.8,7c9.3-9.4,24.4-9.4,33.8-0.1c0,0,0.1,0.1,0.1,0.1L258,201.4C267.4,210.8,267.4,225.9,258,235.4z\" /></svg>");
  transform: translateY(-50%);
}
@media screen and (min-width: 769px) {
  .systemTicker {
    padding-top: 4rem;
  }
/*TOPページのみ*/
  #page--home .systemTicker {
    padding-bottom: 4rem;
  }
  #page--home .systemTicker + .systemTicker {
    margin-top: -2rem;
    padding-bottom: 4rem;
  }
  /*--ここまで--*/
  .systemTicker_title::after {
    right: 15px;
    width: 10px;
    height: 16px;
  }
  .systemTicker + .systemTicker {
    margin-top: 0;
  }
}

/* ヘッダー
============================================== */
.headerWrapper {
  width: 100%;
  position: absolute;
  z-index: 5;
}
.header > .headerLogo {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 43px;
  margin-top: 3rem;
  margin-left: 2rem;
}
@media (min-width: 769px) {
  .header > .headerLogo {
    width: 80px;
    margin-top: 4rem;
    margin-left: 4.5rem;
  }
}
/*　ハンバーガーボタン　*/
.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
  display: block;
  width: 58px;
  height: 58px;
  background: rgba(252, 252, 252, .5);
  backdrop-filter: blur(10px)  brightness(110%);



/* border: 1px solid rgba(252, 252, 252, .3); */
  border-radius: 50%;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .3);
  cursor: pointer;
}
@media (min-width: 769px) {
  .hamburger {
    top: 30px;
    right: 45px;
    width: 100px;
    height: 100px;
  }
}
.hamburger span {
  position: absolute;
  left: 14px;
  display: block;
  width: 30px;
  height: 2px ;
  background: #000;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  top: 50%;
}
.hamburger span:nth-child(1) {
  transform: translateY(-450%);

}
.hamburger span:nth-child(2) {
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  transform: translateY(350%);
}
@media (min-width: 769px) {
  .hamburger span {
    left: 25px;
    width: 50px;
  }
  .hamburger span:nth-child(1) {
    transform: translateY(-650%);

  }
  .hamburger span:nth-child(2) {
    transform: translateY(-50%);
  }
  .hamburger span:nth-child(3) {
    transform: translateY(550%);
  }
}


/* ナビ開いてる時のボタン */
@media (min-width: 769px) {
  .hamburger.active {
    right: 82px;
  }
}
.hamburger.active span:nth-child(1) {
  top: 27px;
  left: 15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
  display: none;
}
.hamburger.active span:nth-child(3) {
  top: 27px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media (min-width: 769px) {
  .hamburger.active span:nth-child(1) {
    top: 47px;
    left: 25px;
  }
  .hamburger.active span:nth-child(3) {
    top: 47px;
  }
}

.headerNav .headerNavList {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  margin-left: auto;
  padding: 20px 25px;
  overflow-y: scroll;
  column-gap: 40px;
  background: #fff;
  transform: translateX(100%);
  transition: all .6s;
}
@media (min-width: 769px) {
  .headerNav .headerNavList {
    width: 80%;
    max-width: 780px;
    padding: 20px 7%;
    column-gap: 80px;
  }
}
@media (min-width: 960px) {
  .headerNav .headerNavList {
    padding: 20px 100px;
  }
}
.headerNav .headerNavList li {
  width: 100%;
  list-style-type: none;
}
.headerNav .headerNavList .headerMenu {
  display: flex;
  flex-direction: column;
  padding-top: 10rem;

  row-gap: 1.5rem;
}
@media (min-width: 769px) {
  .headerNav .headerNavList .headerMenu {
    padding-top: 14rem;

    row-gap: 2rem;
  }
}
.headerNav .headerNavList .headerMenu > li {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  letter-spacing: .2rem;
}
.headerNav .headerNavList .headerMenu_bordeer {
  border-top: 1px solid #e5e5e5;
  padding-top: 2rem;
}
 
.headerNav .headerNavList .headerMenu_under {
  margin-top: 8rem;
}
@media (min-width: 769px) {
  .headerNav .headerNavList .headerMenu_under {
    margin-top: 6rem;
  }
}
.headerNav .headerNavList .headerItemSm {
  display: inline-block;
  padding-bottom: .8em;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
}
.headerNav .headerNavList .headerLogo {
  max-width: 50px;
  padding-top: 1rem;
}
@media (min-width: 769px) {
  .headerNav .headerNavList .headerLogo {
    max-width: 100px;
    padding-top: 3rem;
  }
}

/* このクラスを、jQueryで付与・削除する */
.headerNav .headerNavList.active {
  position: fixed;
  z-index: 3;
  transform: translateX(0%);
}
/* ハンバーガーメニュー展開時、背景にマスクをかける */
.headerNavList.active + .mask {
  /* width: calc(100% - 650px); */
  visibility: visible;
}
.headerNav > .mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  transform: translateX(0%);
  visibility: hidden;
}
.headerNavAppbanner {
  margin-top: 3rem;
  display: block;
  width: 100%;
  max-width: 260px;
}

/* ハンバーガーメニュー展開時、背景を固定 */
body.open {
  height: 100%;
  overflow: hidden;
}

/*SNS*/
.headerMenu_under > .brandNav {
  padding-top: .5rem;
  padding-bottom: 3rem;
}
.brandNav_sns {
  display: flex;
  list-style-type: none;

  gap: 2rem;
}
.brandNav_sns li {
  display: flex;
  align-items: center;
}
.brandNav_sns a {
  display: block;
}

/* ページのトップへ戻る
============================================== */
.backToTop {
  position: relative;
}
.scrollBackToTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  width: 10px;
  height: 35px;
  background: url(img/icon-backtotop-b.svg) no-repeat;
}
.scrollBackToTop.-infooter {
  position: absolute;
  bottom: -7em;
  background: url(img/icon-backtotop-w.svg) no-repeat;
}

@media (min-width: 769px) {
  .scrollBackToTop {
    right: 50px;
    width: 20px;
    height: 75px;
  }
  .scrollBackToTop.-infooter {
    bottom: -8.5em;
  }
}
.hamburger.active ~ .scrollBackToTop {
  display: none;
}

/* フッター
============================================== */
.footer {
  position: relative;
  color: #fff;
  background-color: #000;
}
.footerNav li {
  list-style-type: none;
}
.footerNav {
  width: min(1200px, 100% - 60px);
  padding-top: 4.5rem;
  padding-bottom: 2.5rem;

  margin-inline: auto;
}
@media (min-width: 769px) {
  .footerNav {
    padding-top: 7rem;
  }
}
.sitemapNav_primary,
.sitemapNav_secondary {
  display: flex;
  flex-wrap: wrap;
  color: #fff;

  row-gap: 1.5rem;
}
.sitemapNav_secondary {
  flex-direction: column;
}
@media (min-width: 769px) {
  .sitemapNav_primary,
  .sitemapNav_secondary {
    row-gap: 2rem;
  }
  .sitemapNav_primary {
    /* width: 770px; */
    width: 80%;
  }
  .sitemapNav_secondary {
    flex-direction: initial;
    width: 420px;
  }
}


[class^="sitemapNav_item"] {
  text-align: left;
}
.sitemapNav_primary > [class^="sitemapNav_item"],
.sitemapNav_secondary > [class^="sitemapNav_item"] {
  margin-right: 2rem;
  font-size: clamp(1.5rem, 2.8vw, 2.0rem);
  letter-spacing: .2rem;
}
@media (min-width: 769px) {
  .sitemapNav_primary > [class^="sitemapNav_item"],
  .sitemapNav_secondary > [class^="sitemapNav_item"] {
    margin-right: 5rem;
  }
}
.sitemapNav_tertiary > [class^="sitemapNav_item"] {
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
}

[class^="sitemapNav_item"] > a {
  color: #fff;
}
@media (max-width: 768.98px) {
  .sitemapNav_item.-spFull {
    width: 100%;
  }
}

.footerLogo {
  padding-top: 5rem;
  padding-bottom: 4.5rem;
  text-align: center;
}
@media (min-width: 769px) {
  .footerLogo {
    padding-bottom: 4rem;
  }
}
.footerLogo > a > img {
  width: 187px;
}
@media (min-width: 769px) {
  .footerLogo > a > img {
    width: 327px;
  }
}
/*SNS*/
.footerNav > .brandNav {
  padding-bottom: 4rem;
}
.footerNav > .brandNav > .brandNav_sns {
  justify-content: center;
}
.footerNav > .brandNav > .brandNav_sns > .nav_instagram svg {
  width: 32px;
  height: 32px;
}
@media (min-width: 769px) {
  .footerNav > .brandNav > .brandNav_sns > .nav_instagram svg {
    width: 42px;
    height: 42px;
  }
}

/*copyright*/
.copyright {
  font-size: 12px;
  text-align: center;
}
@media (min-width: 769px) {
  .copyright {
    font-size: 16px;
  }
}

/* 背景
============================================== */
.bg {
  background: url(img/bg.webp);
  background-size: contain;
}

/* 下層ページ共通
============================================== */
.contentArea {
  width: min(1200px, 100% - 60px);

  margin-inline: auto;
}
.contentArea-md {
  width: min(1200px, 100% - 40px);

  margin-inline: auto;
}
.contentArea-sm {
  width: min(1000px, 100% - 40px);

  margin-inline: auto;
}
.contentArea-xs {
  width: min(840px, 100% - 40px);

  margin-inline: auto;
}
.pageHeader {
  position: relative;
  padding-top: 6rem;
}
@media (min-width: 769px) {
  .pageHeader {
    padding-top: 12rem;
  }
}
.pageTitle_404 {
  font-weight: 700;
  font-size: clamp(2rem, 4.8vw + .2rem, 4rem);
  text-align: center;
}
.pageTitle {
  margin-left: 2rem;
}
@media (min-width: 769px) {
  .pageTitle {
    margin-left: 0;
  }
}
.pageBody {
  padding-bottom: 6rem;
}
@media (min-width: 769px) {
  .pageBody {
    padding-bottom: 15rem;
  }
}

/*ぱんくず
-----------------------*/
@media (max-width: 768.98px) {
  .breadcrumb {
    display: none;
  }
}
.breadcrumbList {
  display: flex;
  width: min(1350px, 100% - 100px);
  margin: 0 auto;
  padding: 10px 0;
  list-style: none;
}
.breadcrumbList_item {
  font-weight: 500;
  font-size: 1.8rem;
}
.breadcrumbList_item:nth-child(n + 2) {
  margin-left: 1.5%;
}
.breadcrumbList_item:nth-child(n + 2)::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 14px;
  margin-bottom: 4px;
  border-top: 1px solid #19191a;
  border-right: 1px solid #19191a;
  transform: rotate(45deg);
}



/* 汎用クラス
============================================== */

/* font-weight */
.f-medium {
  font-weight: 500 !important;
}
.f-bold {
  font-weight: 700 !important;
}
.f-black {
  font-weight: 900 !important;
}

/* font-size */
.f-size-small {
  font-size: 1.4rem !important;
}
.f-size-medium {
  font-size: 2rem !important;
}
.f-size-large {
  font-size: 3rem !important;
}
@media (max-width: 768.98px) {
  .f-size-small {
    font-size: 1.3rem !important;
  }
  .f-size-medium {
    font-size: 1.6rem !important;
  }
  .f-size-large {
    font-size: 2rem !important;
  }
}
.note--small {
    font-size: clamp(1.2rem, 0.8vw + 0.9rem, 1.4rem) !important;
}
.note {
  font-size: clamp(1.3rem, .36vw + 1.16rem, 1.6rem);
}
.note--02 {
    font-size: clamp(1.3rem, .36vw + 1.16rem, 2rem);
}

.leading-\[1\.2\] {
    line-height: 1.2 !important;
}

/* font-family */
.f-noto-min {
  font-family: "Noto Serif JP", serif;
}
.f-crimson {
  font-family: "Crimson Text", serif;
}


/* margin */
.m_auto {
  margin: auto;
}
.mt_0 {
  margin-top: 0 !important;
}
.mt_10 {
  margin-top: 1rem !important;
}
.mt_20 {
  margin-top: 2rem !important;
}
.mt_30 {
  margin-top: 3rem !important;
}
.mt_40 {
  margin-top: 4rem !important;
}
.mt_50 {
  margin-top: 5rem !important;
}
.mt_60 {
  margin-top: 6rem !important;
}
.mt_70 {
  margin-top: 7rem !important;
}
.mt_80 {
  margin-top: 8rem !important;
}
.mt_90 {
  margin-top: 9rem !important;
}
.mt_100 {
  margin-top: 10rem !important;
}
.mb_0 {
  margin-bottom: 0 !important;
}
.mb_10 {
  margin-bottom: 1rem !important;
}
.mb_20 {
  margin-bottom: 2rem !important;
}
.mb_30 {
  margin-bottom: 3rem !important;
}
.mb_40 {
  margin-bottom: 4rem !important;
}
.mb_50 {
  margin-bottom: 5rem !important;
}
.mb_60 {
  margin-bottom: 6rem !important;
}
.mb_70 {
  margin-bottom: 7rem !important;
}
.mb_80 {
  margin-bottom: 8rem !important;
}
.mb_90 {
  margin-bottom: 9rem !important;
}
.mb_100 {
  margin-bottom: 10rem !important;
}
@media (max-width: 768.98px) {
  .mt_10 {
    margin-top: .5rem !important;
  }
  .mt_20 {
    margin-top: 1rem !important;
  }
  .mt_30 {
    margin-top: 1.5rem !important;
  }
  .mt_40 {
    margin-top: 2rem !important;
  }
  .mt_50 {
    margin-top: 2.5rem !important;
  }
  .mt_60 {
    margin-top: 3rem !important;
  }
  .mt_70 {
    margin-top: 3.5rem !important;
  }
  .mt_80 {
    margin-top: 4rem !important;
  }
  .mt_90 {
    margin-top: 4.5rem !important;
  }
  .mt_100 {
    margin-top: 5rem !important;
  }
  .mb_10 {
    margin-bottom: .5rem !important;
  }
  .mb_20 {
    margin-bottom: 1rem !important;
  }
  .mb_30 {
    margin-bottom: 1.5rem !important;
  }
  .mb_40 {
    margin-bottom: 2rem !important;
  }
  .mb_50 {
    margin-bottom: 2.5rem !important;
  }
  .mb_60 {
    margin-bottom: 3rem !important;
  }
  .mb_70 {
    margin-bottom: 3.5rem !important;
  }
  .mb_80 {
    margin-bottom: 4rem !important;
  }
  .mb_90 {
    margin-bottom: 4.5rem !important;
  }
  .mb_100 {
    margin-bottom: 5rem !important;
  }
  .mt_0-sp {
    margin-top: 0 !important;
  }
  .mt_10-sp {
    margin-top: 1rem !important;
  }
  .mt_20-sp {
    margin-top: 2rem !important;
  }
  .mt_30-sp {
    margin-top: 3rem !important;
  }
  .mt_40-sp {
    margin-top: 4rem !important;
  }
  .mt_50-sp {
    margin-top: 5rem !important;
  }
  .mt_60-sp {
    margin-top: 6rem !important;
  }
  .mt_70-sp {
    margin-top: 7rem !important;
  }
  .mt_80-sp {
    margin-top: 8rem !important;
  }
  .mt_90-sp {
    margin-top: 9rem !important;
  }
  .mt_100-sp {
    margin-top: 10rem !important;
  }
  .mb_0-sp {
    margin-bottom: 0 !important;
  }
  .mb_10-sp {
    margin-bottom: 1rem !important;
  }
  .mb_20-sp {
    margin-bottom: 2rem !important;
  }
  .mb_30-sp {
    margin-bottom: 3rem !important;
  }
  .mb_40-sp {
    margin-bottom: 4rem !important;
  }
  .mb_50-sp {
    margin-bottom: 5rem !important;
  }
  .mb_60-sp {
    margin-bottom: 6rem !important;
  }
  .mb_70-sp {
    margin-bottom: 7rem !important;
  }
  .mb_80-sp {
    margin-bottom: 8rem !important;
  }
  .mb_90-sp {
    margin-bottom: 9rem !important;
  }
  .mb_100-sp {
    margin-bottom: 10rem !important;
  }
}

/* padding */
.pt_0 {
  padding-top: 0 !important;
}
.pt_10 {
  padding-top: 1rem !important;
}
.pt_20 {
  padding-top: 2rem !important;
}
.pt_30 {
  padding-top: 3rem !important;
}
.pt_40 {
  padding-top: 4rem !important;
}
.pt_50 {
  padding-top: 5rem !important;
}
.pt_60 {
  padding-top: 6rem !important;
}
.pt_70 {
  padding-top: 7rem !important;
}
.pt_80 {
  padding-top: 8rem !important;
}
.pt_90 {
  padding-top: 9rem !important;
}
.pt_100 {
  padding-top: 10rem !important;
}
.pb_0 {
  padding-bottom: 0 !important;
}
.pb_10 {
  padding-bottom: 1rem !important;
}
.pb_20 {
  padding-bottom: 2rem !important;
}
.pb_30 {
  padding-bottom: 3rem !important;
}
.pb_40 {
  padding-bottom: 4rem !important;
}
.pb_50 {
  padding-bottom: 5rem !important;
}
.pb_60 {
  padding-bottom: 6rem !important;
}
.pb_70 {
  padding-bottom: 7rem !important;
}
.pb_80 {
  padding-bottom: 8rem !important;
}
.pb_90 {
  padding-bottom: 9rem !important;
}
.pb_100 {
  padding-bottom: 10rem !important;
}
@media (max-width: 768.98px) {
  .pt_10 {
    padding-top: .5rem !important;
  }
  .pt_20 {
    padding-top: 1rem !important;
  }
  .pt_30 {
    padding-top: 1.5rem !important;
  }
  .pt_40 {
    padding-top: 2rem !important;
  }
  .pt_50 {
    padding-top: 2.5rem !important;
  }
  .pt_60 {
    padding-top: 3rem !important;
  }
  .pt_70 {
    padding-top: 3.5rem !important;
  }
  .pt_80 {
    padding-top: 4rem !important;
  }
  .pt_90 {
    padding-top: 4.5rem !important;
  }
  .pt_100 {
    padding-top: 5rem !important;
  }
  .pb_10 {
    padding-bottom: .5rem !important;
  }
  .pb_20 {
    padding-bottom: 1rem !important;
  }
  .pb_30 {
    padding-bottom: 1.5rem !important;
  }
  .pb_40 {
    padding-bottom: 2rem !important;
  }
  .pb_50 {
    padding-bottom: 2.5rem !important;
  }
  .pb_60 {
    padding-bottom: 3rem !important;
  }
  .pb_70 {
    padding-bottom: 3.5rem !important;
  }
  .pb_80 {
    padding-bottom: 4rem !important;
  }
  .pb_90 {
    padding-bottom: 4.5rem !important;
  }
  .pb_100 {
    padding-bottom: 5rem !important;
  }
  .pt_0-sp {
    padding-top: 0 !important;
  }
  .pt_10-sp {
    padding-top: 1rem !important;
  }
  .pt_20-sp {
    padding-top: 2rem !important;
  }
  .pt_30-sp {
    padding-top: 3rem !important;
  }
  .pt_40-sp {
    padding-top: 4rem !important;
  }
  .pt_50-sp {
    padding-top: 5rem !important;
  }
  .pt_60-sp {
    padding-top: 6rem !important;
  }
  .pt_70-sp {
    padding-top: 7rem !important;
  }
  .pt_80-sp {
    padding-top: 8rem !important;
  }
  .pt_90-sp {
    padding-top: 9rem !important;
  }
  .pt_100-sp {
    padding-top: 10rem !important;
  }
  .pb_0-sp {
    padding-bottom: 0 !important;
  }
  .pb_10-sp {
    padding-bottom: 1rem !important;
  }
  .pb_20-sp {
    padding-bottom: 2rem !important;
  }
  .pb_30-sp {
    padding-bottom: 3rem !important;
  }
  .pb_40-sp {
    padding-bottom: 4rem !important;
  }
  .pb_50-sp {
    padding-bottom: 5rem !important;
  }
  .pb_60-sp {
    padding-bottom: 6rem !important;
  }
  .pb_70-sp {
    padding-bottom: 7rem !important;
  }
  .pb_80-sp {
    padding-bottom: 8rem !important;
  }
  .pb_90-sp {
    padding-bottom: 9rem !important;
  }
  .pb_100-sp {
    padding-bottom: 10rem !important;
  }
}

/* line-height */
.l-height-1 {
  line-height: 1 !important;
}
.l-height-2 {
  line-height: 2 !important;
}
.l-height-3 {
  line-height: 3 !important;
}
.l-height-4 {
  line-height: 4 !important;
}

/* letter-spacing */
.l-space-1 {
  letter-spacing: 1px !important;
}
.l-space-2 {
  letter-spacing: 2px !important;
}
.l-space-3 {
  letter-spacing: 3px !important;
}
.l-space-4 {
  letter-spacing: 4px !important;
}

/* indent */
.indent {
  padding-left: 1em !important;
  text-indent: -1em !important;
}

/* flex */
.flex {
  display: -ms-flexbox !important;
  display: flex !important;
}
.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}
.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}
.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}
.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}
.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}
.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}
.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}
.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}
.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}
.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

/* grid */
.grid {
  display: grid;
}

.md\:grid {
    @media (min-width: 767px) {
        display: grid;
    }
}

.md\:block {
    @media (min-width: 767px) {
        display: block!important;
    }
}

.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-rows-auto {
    grid-template-rows: 1fr 130px ;
}

.md\:grid-cols-2 {
    @media (min-width: 767px) {
        grid-template-columns: repeat(2, 1fr);
    }
}
.md\:grid-rows-1 {
    @media (min-width: 767px) {
        grid-template-rows: 1fr ;
    }
}
.gap-5 {
    gap: 5%;
}
.md\:gap-x-10 {
    @media (min-width: 767px) {
        column-gap: 10%;
    }
}

.md\:mt_20 {
    @media (min-width: 767px) {
        margin-top: 2rem !important;
    }
}

.shrink-0 {
    flex-shrink: 0;
}
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.inline-block {
    display: inline-block;
}

    /* position */
.p-relative {
  position: relative;
}
.p-absolute {
  position: absolute;
}


/* button */
.btnContainer {
  display: inline-block;
  width: 100%;
}
.btn {
  position: relative;
  display: flex;

/* justify-content: center; */
  align-items: center;
  cursor: pointer;
  transition: all .2s;
}
.btn.type-default {
  justify-content: center;
  width: 100%;
  font-size: clamp(15px, 2.8vw, 20px);
  line-height: 60px;
  color: #fff;
  letter-spacing: 2px;
  background: #000;
  border: 1px solid transparent;
  border-radius: 5px;
}
@media (min-width: 769px) {
  .btn.type-default {
    max-width: 440px;
    line-height: 80px;
  }
}.btn.type-text {
  font-size: clamp(16px, 2.8vw, 24px);
}
@media (hover: hover) {
  .btn.type-default:hover {
    opacity: .7;
  }
}
.btn > .arrow {
  width: 20px;
  margin-left: 10px;
  transition: transform .3s ease-in-out;
}
@media (min-width: 769px) {
  .btn > .arrow {
    width: 32px;
  }
}
.btn.type-default > .arrow {
  position: absolute;
  top: 43%;
  right: 4em;
}

.btn:hover .arrow {
  transform: translateX(5px);
}

.btn:active {
  transform: scale(.95);
}

/* Button variant: white background with red (#A31A1A) text and border */
.btn.type-outline-red {
  justify-content: center;
  width: 100%;
  font-size: clamp(15px, 2.8vw, 20px);
  line-height: 60px;
  color: #A31A1A;
  letter-spacing: 2px;
  background: #fff;
  border: 1px solid #A31A1A;
  border-radius: 5px;
}
@media (min-width: 769px) {
  .btn.type-outline-red {
    max-width: 440px;
    line-height: 80px;
  }
}
.btn.type-outline-red > .arrow {
  position: absolute;
  top: 43%;
  right: 4em;
}
.btn.type-outline-red > .arrow path {
  fill: #A31A1A;
}
@media (hover: hover) {
  .btn.type-outline-red:hover {
    color: #fff;
    background: #A31A1A;
    border-color: #A31A1A;
  }
  .btn.type-outline-red:hover > .arrow path {
    fill: #fff;
  }
}


/* screenReader */
.screenReaderOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

/* display */
.none {
  display: none !important;
}
@media (min-width: 769px) {
  .pcOnly {
    display: block !important;
  }
  .pcOnly-inline-block {
    display: inline-block !important;
  }
  .pcOnly-inline {
    display: inline !important;
  }
  .spOnly,
  .spOnly-inline-block,
  .spOnly-inline {
    display: none !important;
  }
}
@media (max-width: 768.98px) {
  .pcOnly,
  .pcOnly-inline-block,
  .pcOnly-inline {
    display: none !important;
  }
  .spOnly {
    display: block !important;
  }
  .spOnly-inline-block {
    display: inline-block !important;
  }
  .spOnly-inline {
    display: inline !important;
  }
}

/* text-align */
.txt--center {
  text-align: center !important;
}
@media (min-width: 769px) {
  .txt--center-pc {
    text-align: center !important;
  }
}
@media (max-width: 768.98px) {
  .txt--center-sp {
    text-align: center !important;
  }
}
.txt--left {
  text-align: left !important;
}
@media (min-width: 769px) {
  .txt--left-pc {
    text-align: left !important;
  }
}
@media (max-width: 768.98px) {
  .txt--left-sp {
    text-align: left !important;
  }
}
.txt--right {
  text-align: right !important;
}
@media (min-width: 769px) {
  .txt--right-pc {
    text-align: right !important;
  }
}
@media (max-width: 768.98px) {
  .txt--right-sp {
    text-align: right !important;
  }
}

/* background-color */
.bg_black {
  background-color: #141414 !important;
}
.bg_gray {
  background-color: #fafaf9 !important;
}
.bg_white {
  background-color: #fff !important;
}
.bg_red {
  background-color: #a31a1a !important;
}
.bg_blue {
  background-color: #020289 !important;
}

/* color */
.color_white {
  color: #fff !important;
}
.color_red {
  color: #a31a1a !important;
}
.color_blue {
  color: #020289 !important;
}
.color_crimson {
  color: #b94e4e !important;
}

/* z-index */
.z-index-0 {
  z-index: 0;
}
.z-index-1 {
  z-index: 1;
}

/* accordion */
.ac-parent {
  position: relative;
  cursor: pointer;
}
.ac-child {
  display: none;
}
/*accordion btn*/
.ac-icon-wrap {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 38px;
  height: 38px;
  transform: translatey(-50%);
}
.ac-icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.ac-icon:before,
.ac-icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 50%;
  height: 2px;
  background: #000;
  transform: translate(-50%, -50%);
  transition: all .4s;
}
.ac-icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}
.ac-icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 別窓リンク時アイコン
============================================== */
.icon-outlink {
  content: "";
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-bottom: .2em;
  margin-left: .2em;
  vertical-align: middle;
  background: url(img/icon-outlink.svg) 50% 50% no-repeat;
  background-size: contain;
}
.headerNavList .icon-outlink {
  background: url(img/icon-outlink-b.svg) 50% 50% no-repeat;
}

/* fade
============================================== */

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeup {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadedown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeleft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes faderight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.fade {
  opacity: 0;
}
.scroll-in.fade-in {
  animation-name: fadein;
  animation-duration: 1.3s;

  animation-fill-mode: forwards;
}

.scroll-in.fade-up {
  animation-name: fadeup;
  animation-duration: 1.3s;

  animation-fill-mode: forwards;
}

.scroll-in.fade-down {
  animation-name: fadedown;
  animation-duration: 1.3s;

  animation-fill-mode: forwards;
}

.scroll-in.fade-left {
  animation-name: fadeleft;
  animation-duration: 1.3s;

  animation-fill-mode: forwards;
}

.scroll-in.fade-right {
  animation-name: faderight;
  animation-duration: 1.3s;

  animation-fill-mode: forwards;
}

.delay-time0 {
  animation-delay: 0s;
}
.delay-time01 {
  animation-delay: .2s;
}
.delay-time02 {
  animation-delay: .2s;
}
.delay-time03 {
  animation-delay: .03s;
}
.delay-time04 {
  animation-delay: .4s;
}
.delay-time05 {
  animation-delay: .5s;
}
.delay-time06 {
  animation-delay: .6s;
}
.delay-time07 {
  animation-delay: .7s;
}
.delay-time08 {
  animation-delay: .8s;
}