@charset "UTF-8";
/*//////////////////////////////

Sassインポート

//////////////////////////////*/
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

共通スタイル

//////////////////////////////*/
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scroll-padding-top: 90px; }
  @media only screen and (max-width: 1080px) {
    html {
      /*　画面サイズ $tbWitdh まではここを読み込む　*/
      scroll-padding-top: 90px; } }
  @media only screen and (max-width: 768px) {
    html {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      scroll-padding-top: 70px;
      font-size: calc(100vw / 45); } }

body {
  font-family: var(--body-font-family);
  font-weight: 400;
  font-size: 17px;
  font-size: 1.7rem;
  color: #000000;
  line-height: 1.7;
  overflow-x: hidden;
  word-wrap: break-word;
  position: inherit;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: 600;
  color: #232358; }

a {
  color: #000000;
  text-decoration: none;
  transition: all 0.3s ease;
  /*&:visited{
  	color:var(--link-color);
  	opacity:1;
  }*/ }
  a:link {
    color: var(--link-color);
    opacity: 1; }
  a:hover {
    color: var(--hover-color);
    opacity: 0.7; }
  a:active {
    color: var(--hover-color);
    opacity: 0.7; }

nobr {
  display: inline-block; }

.separator {
  height: 1px;
  width: calc(100% - 60px );
  background-color: #ccc;
  max-width: 1320px;
  margin: auto;
  display: block !important; }

.link_area {
  transition: all 0.3s ease; }
  .link_area:link {
    opacity: 1; }
  .link_area:visited {
    opacity: 1; }
  .link_area:hover {
    opacity: 0.7; }
  .link_area:active {
    opacity: 0.7; }

.center {
  text-align: center !important; }

.justify {
  text-align: justify !important; }

.left {
  text-align: left !important; }

.right {
  text-align: right !important; }

.underline {
  text-decoration: underline; }

.font-XXS {
  font-size: 11px;
  font-size: 1.1rem; }

.font-XS {
  font-size: 13px;
  font-size: 1.3rem; }

.font-S {
  font-size: 14px;
  font-size: 1.4rem; }

.font-M {
  font-size: 18px;
  font-size: 1.8rem; }

.font-L {
  font-size: 21px;
  font-size: 2.1rem; }

.font-XL {
  font-size: 24px;
  font-size: 2.4rem; }

.font-XXL {
  font-size: 28px;
  font-size: 2.8rem; }

.font-bk {
  color: #000000; }

.font-wh {
  color: #ffffff; }

.font-gr {
  color: #c3c3c3; }

.article p + p {
  margin-top: 20px; }
  @media only screen and (max-width: 768px) {
    .article p + p {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-top: 3.5vw; } }

hr {
  height: 1px;
  background-color: #c3c3c3;
  border: none;
  margin-top: 60px;
  margin-bottom: 60px; }
  @media only screen and (max-width: 768px) {
    hr {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-top: clamp(30px, 5vw, 60px); } }
  @media only screen and (max-width: 768px) {
    hr {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: clamp(30px, 5vw, 60px); } }

@media only screen and (max-width: 1080px) {
  .br_pc {
    /*　画面サイズ $tbWitdh まではここを読み込む　*/
    display: none; } }
@media only screen and (max-width: 768px) {
  .br_pc {
    /*　画面サイズ $spWidth まではここを読み込む　*/
    display: none; } }

@media only screen and (max-width: 768px) {
  .br_pc_tb {
    /*　画面サイズ $spWidth まではここを読み込む　*/
    display: none; } }

@media print, screen and (min-width: 1081px) {
  .br_tb {
    /*　画面サイズ $tbWidth からはここを読み込む　*/
    display: none; } }

.br_sp {
  display: none; }
  @media only screen and (max-width: 768px) {
    .br_sp {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      display: initial; } }

@media only screen and (max-width: 1080px) {
  .pc_disp {
    /*　画面サイズ $tbWitdh まではここを読み込む　*/
    display: none; } }
@media only screen and (max-width: 768px) {
  .pc_disp {
    /*　画面サイズ $spWidth まではここを読み込む　*/
    display: none; } }

@media print, screen and (min-width: 1081px) {
  .tb_disp {
    /*　画面サイズ $tbWidth からはここを読み込む　*/
    display: none; } }

.red,
.warning {
  color: #DE5D50; }

#page_home #loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  pointer-events: none; }
  #page_home #loading .loadingLogo {
    position: fixed;
    inset: 0;
    bottom: -50px;
    opacity: 0;
    margin: auto;
    display: inline-block;
    width: 60%;
    max-width: 380px;
    z-index: 100;
    animation: loadingLogoIn 1s forwards; }
  #page_home #loading.onload span {
    animation: loadingLogoOut 2.5s forwards;
    animation-delay: 0.5s; }
  #page_home #loading::before, #page_home #loading::after {
    content: '';
    position: absolute;
    left: 0;
    top: -25%;
    right: 0;
    margin: auto;
    height: 150%;
    z-index: -1; }
  #page_home #loading::before {
    background-color: #a00000;
    transform: skewY(-3deg); }
  #page_home #loading.onload::before {
    animation: shutterOpen 2.5s forwards;
    animation-delay: 0.5s; }
  #page_home #loading::after {
    background-color: #232358;
    transform: skewY(3deg); }
  #page_home #loading.onload::after {
    animation: shutterOpen 2.5s forwards; }
@keyframes loadingLogoIn {
  0% {
    opacity: 0;
    bottom: -50px; }
  20% {
    opacity: 0;
    bottom: -50px; }
  100% {
    opacity: 1;
    bottom: 0px; } }
@keyframes loadingLogoOut {
  49% {
    opacity: 1; }
  50% {
    opacity: 0;
    display: none;
    z-index: -1; }
  100% {
    opacity: 0;
    display: none;
    z-index: -1; } }
@keyframes shutterOpen {
  0% {
    height: 150%; }
  40% {
    height: 150%; }
  70% {
    height: 0%; }
  100% {
    height: 0%; } }
body:not(#page_home) #loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  background: #ffffff;
  z-index: 999999;
  pointer-events: none;
  transition: all 0.3s ease; }
  body:not(#page_home) #loading.onload {
    opacity: 0;
    z-index: -1; }

/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

グリッドシステム

//////////////////////////////*/
/* プリントクエリ */
@media print {
  body {
    zoom: 50%;
    width: 100% !important; }

  #pagetop {
    display: none !important; } }
/* 共通 */
.container,
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  padding-left: clamp(30px, 5vw, 60px);
  padding-right: clamp(30px, 5vw, 60px);
  padding-top: 100px;
  padding-bottom: 100px; }

.container + .container,
.container + .container-fluid,
.container-fluid + .container-fluid,
.container-fluid + .container {
  padding-top: 0; }

.container {
  max-width: 1440px; }

.container-fluid {
  max-width: 100%; }

.container-wide {
  max-width: 1440px; }

.container-narrow {
  max-width: 1320px; }

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: auto;
  margin: -30px;
  margin-bottom: -60px; }

.row + .row {
  margin-top: 30px; }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  position: relative;
  box-sizing: border-box;
  padding: 30px;
  padding-bottom: 60px; }

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%; }

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%; }

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%; }

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%; }

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%; }

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%; }

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%; }

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%; }

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%; }

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%; }

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%; }

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

.order-first {
  -ms-flex-order: -1;
  order: -1; }

.order-last {
  -ms-flex-order: 13;
  order: 13; }

.order-0 {
  -ms-flex-order: 0;
  order: 0; }

.order-1 {
  -ms-flex-order: 1;
  order: 1; }

.order-2 {
  -ms-flex-order: 2;
  order: 2; }

.order-3 {
  -ms-flex-order: 3;
  order: 3; }

.order-4 {
  -ms-flex-order: 4;
  order: 4; }

.order-5 {
  -ms-flex-order: 5;
  order: 5; }

.order-6 {
  -ms-flex-order: 6;
  order: 6; }

.order-7 {
  -ms-flex-order: 7;
  order: 7; }

.order-8 {
  -ms-flex-order: 8;
  order: 8; }

.order-9 {
  -ms-flex-order: 9;
  order: 9; }

.order-10 {
  -ms-flex-order: 10;
  order: 10; }

.order-11 {
  -ms-flex-order: 11;
  order: 11; }

.order-12 {
  -ms-flex-order: 12;
  order: 12; }

.offset-1 {
  margin-left: 8.3333333333%; }

.offset-2 {
  margin-left: 16.6666666667%; }

.offset-3 {
  margin-left: 25%; }

.offset-4 {
  margin-left: 33.3333333333%; }

.offset-5 {
  margin-left: 41.6666666667%; }

.offset-6 {
  margin-left: 50%; }

.offset-7 {
  margin-left: 58.3333333333%; }

.offset-8 {
  margin-left: 66.6666666667%; }

.offset-9 {
  margin-left: 75%; }

.offset-10 {
  margin-left: 83.3333333333%; }

.offset-11 {
  margin-left: 91.6666666667%; }

.m-0 {
  margin: 0px !important; }

.mt-0 {
  margin-top: 0px !important; }

.mb-0 {
  margin-bottom: 0px !important; }

.mr-0 {
  margin-right: 0px !important; }

.ml-0 {
  margin-left: 0px !important; }

.p-0 {
  padding: 0px !important; }

.pt-0 {
  padding-top: 0px !important; }

.pb-0 {
  padding-bottom: 0px !important; }

.pr-0 {
  padding-right: 0px !important; }

.pl-0 {
  padding-left: 0px !important; }

.m-n0 {
  margin: 0px !important; }

.mt-n0 {
  margin-top: 0px !important; }

.mb-n0 {
  margin-bottom: 0px !important; }

.mr-n0 {
  margin-right: 0px !important; }

.ml-n0 {
  margin-left: 0px !important; }

.m-1 {
  margin: 10px !important; }

.mt-1 {
  margin-top: 10px !important; }

.mb-1 {
  margin-bottom: 10px !important; }

.mr-1 {
  margin-right: 10px !important; }

.ml-1 {
  margin-left: 10px !important; }

.p-1 {
  padding: 10px !important; }

.pt-1 {
  padding-top: 10px !important; }

.pb-1 {
  padding-bottom: 10px !important; }

.pr-1 {
  padding-right: 10px !important; }

.pl-1 {
  padding-left: 10px !important; }

.m-n1 {
  margin: -10px !important; }

.mt-n1 {
  margin-top: -10px !important; }

.mb-n1 {
  margin-bottom: -10px !important; }

.mr-n1 {
  margin-right: -10px !important; }

.ml-n1 {
  margin-left: -10px !important; }

.m-2 {
  margin: 20px !important; }

.mt-2 {
  margin-top: 20px !important; }

.mb-2 {
  margin-bottom: 20px !important; }

.mr-2 {
  margin-right: 20px !important; }

.ml-2 {
  margin-left: 20px !important; }

.p-2 {
  padding: 20px !important; }

.pt-2 {
  padding-top: 20px !important; }

.pb-2 {
  padding-bottom: 20px !important; }

.pr-2 {
  padding-right: 20px !important; }

.pl-2 {
  padding-left: 20px !important; }

.m-n2 {
  margin: -20px !important; }

.mt-n2 {
  margin-top: -20px !important; }

.mb-n2 {
  margin-bottom: -20px !important; }

.mr-n2 {
  margin-right: -20px !important; }

.ml-n2 {
  margin-left: -20px !important; }

.m-3 {
  margin: 30px !important; }

.mt-3 {
  margin-top: 30px !important; }

.mb-3 {
  margin-bottom: 30px !important; }

.mr-3 {
  margin-right: 30px !important; }

.ml-3 {
  margin-left: 30px !important; }

.p-3 {
  padding: 30px !important; }

.pt-3 {
  padding-top: 30px !important; }

.pb-3 {
  padding-bottom: 30px !important; }

.pr-3 {
  padding-right: 30px !important; }

.pl-3 {
  padding-left: 30px !important; }

.m-n3 {
  margin: -30px !important; }

.mt-n3 {
  margin-top: -30px !important; }

.mb-n3 {
  margin-bottom: -30px !important; }

.mr-n3 {
  margin-right: -30px !important; }

.ml-n3 {
  margin-left: -30px !important; }

.m-4 {
  margin: 40px !important; }

.mt-4 {
  margin-top: 40px !important; }

.mb-4 {
  margin-bottom: 40px !important; }

.mr-4 {
  margin-right: 40px !important; }

.ml-4 {
  margin-left: 40px !important; }

.p-4 {
  padding: 40px !important; }

.pt-4 {
  padding-top: 40px !important; }

.pb-4 {
  padding-bottom: 40px !important; }

.pr-4 {
  padding-right: 40px !important; }

.pl-4 {
  padding-left: 40px !important; }

.m-n4 {
  margin: -40px !important; }

.mt-n4 {
  margin-top: -40px !important; }

.mb-n4 {
  margin-bottom: -40px !important; }

.mr-n4 {
  margin-right: -40px !important; }

.ml-n4 {
  margin-left: -40px !important; }

.m-5 {
  margin: 50px !important; }

.mt-5 {
  margin-top: 50px !important; }

.mb-5 {
  margin-bottom: 50px !important; }

.mr-5 {
  margin-right: 50px !important; }

.ml-5 {
  margin-left: 50px !important; }

.p-5 {
  padding: 50px !important; }

.pt-5 {
  padding-top: 50px !important; }

.pb-5 {
  padding-bottom: 50px !important; }

.pr-5 {
  padding-right: 50px !important; }

.pl-5 {
  padding-left: 50px !important; }

.m-n5 {
  margin: -50px !important; }

.mt-n5 {
  margin-top: -50px !important; }

.mb-n5 {
  margin-bottom: -50px !important; }

.mr-n5 {
  margin-right: -50px !important; }

.ml-n5 {
  margin-left: -50px !important; }

.m-6 {
  margin: 60px !important; }

.mt-6 {
  margin-top: 60px !important; }

.mb-6 {
  margin-bottom: 60px !important; }

.mr-6 {
  margin-right: 60px !important; }

.ml-6 {
  margin-left: 60px !important; }

.p-6 {
  padding: 60px !important; }

.pt-6 {
  padding-top: 60px !important; }

.pb-6 {
  padding-bottom: 60px !important; }

.pr-6 {
  padding-right: 60px !important; }

.pl-6 {
  padding-left: 60px !important; }

.m-n6 {
  margin: -60px !important; }

.mt-n6 {
  margin-top: -60px !important; }

.mb-n6 {
  margin-bottom: -60px !important; }

.mr-n6 {
  margin-right: -60px !important; }

.ml-n6 {
  margin-left: -60px !important; }

.m-7 {
  margin: 70px !important; }

.mt-7 {
  margin-top: 70px !important; }

.mb-7 {
  margin-bottom: 70px !important; }

.mr-7 {
  margin-right: 70px !important; }

.ml-7 {
  margin-left: 70px !important; }

.p-7 {
  padding: 70px !important; }

.pt-7 {
  padding-top: 70px !important; }

.pb-7 {
  padding-bottom: 70px !important; }

.pr-7 {
  padding-right: 70px !important; }

.pl-7 {
  padding-left: 70px !important; }

.m-n7 {
  margin: -70px !important; }

.mt-n7 {
  margin-top: -70px !important; }

.mb-n7 {
  margin-bottom: -70px !important; }

.mr-n7 {
  margin-right: -70px !important; }

.ml-n7 {
  margin-left: -70px !important; }

.m-8 {
  margin: 80px !important; }

.mt-8 {
  margin-top: 80px !important; }

.mb-8 {
  margin-bottom: 80px !important; }

.mr-8 {
  margin-right: 80px !important; }

.ml-8 {
  margin-left: 80px !important; }

.p-8 {
  padding: 80px !important; }

.pt-8 {
  padding-top: 80px !important; }

.pb-8 {
  padding-bottom: 80px !important; }

.pr-8 {
  padding-right: 80px !important; }

.pl-8 {
  padding-left: 80px !important; }

.m-n8 {
  margin: -80px !important; }

.mt-n8 {
  margin-top: -80px !important; }

.mb-n8 {
  margin-bottom: -80px !important; }

.mr-n8 {
  margin-right: -80px !important; }

.ml-n8 {
  margin-left: -80px !important; }

.m-9 {
  margin: 90px !important; }

.mt-9 {
  margin-top: 90px !important; }

.mb-9 {
  margin-bottom: 90px !important; }

.mr-9 {
  margin-right: 90px !important; }

.ml-9 {
  margin-left: 90px !important; }

.p-9 {
  padding: 90px !important; }

.pt-9 {
  padding-top: 90px !important; }

.pb-9 {
  padding-bottom: 90px !important; }

.pr-9 {
  padding-right: 90px !important; }

.pl-9 {
  padding-left: 90px !important; }

.m-n9 {
  margin: -90px !important; }

.mt-n9 {
  margin-top: -90px !important; }

.mb-n9 {
  margin-bottom: -90px !important; }

.mr-n9 {
  margin-right: -90px !important; }

.ml-n9 {
  margin-left: -90px !important; }

.m-10 {
  margin: 100px !important; }

.mt-10 {
  margin-top: 100px !important; }

.mb-10 {
  margin-bottom: 100px !important; }

.mr-10 {
  margin-right: 100px !important; }

.ml-10 {
  margin-left: 100px !important; }

.p-10 {
  padding: 100px !important; }

.pt-10 {
  padding-top: 100px !important; }

.pb-10 {
  padding-bottom: 100px !important; }

.pr-10 {
  padding-right: 100px !important; }

.pl-10 {
  padding-left: 100px !important; }

.m-n10 {
  margin: -100px !important; }

.mt-n10 {
  margin-top: -100px !important; }

.mb-n10 {
  margin-bottom: -100px !important; }

.mr-n10 {
  margin-right: -100px !important; }

.ml-n10 {
  margin-left: -100px !important; }

@media print, screen and (min-width: 1081px) {
  /*　画面サイズ $tbWidth からはここを読み込む　*/
  .offset-pc-1 {
    margin-left: 8.3333333333%; }

  .offset-pc-2 {
    margin-left: 16.6666666667%; }

  .offset-pc-3 {
    margin-left: 25%; }

  .offset-pc-4 {
    margin-left: 33.3333333333%; }

  .offset-pc-5 {
    margin-left: 41.6666666667%; }

  .offset-pc-6 {
    margin-left: 50%; }

  .offset-pc-7 {
    margin-left: 58.3333333333%; }

  .offset-pc-8 {
    margin-left: 66.6666666667%; }

  .offset-pc-9 {
    margin-left: 75%; }

  .offset-pc-10 {
    margin-left: 83.3333333333%; }

  .offset-pc-1 {
    margin-left: 91.6666666667%; }

  .m-pc-0 {
    margin: 0px !important; }

  .mt-pc-0 {
    margin-top: 0px !important; }

  .mb-pc-0 {
    margin-bottom: 0px !important; }

  .mr-pc-0 {
    margin-right: 0px !important; }

  .ml-pc-0 {
    margin-left: 0px !important; }

  .p-pc-0 {
    padding: 0px !important; }

  .pt-pc-0 {
    padding-top: 0px !important; }

  .pb-pc-0 {
    padding-bottom: 0px !important; }

  .pr-pc-0 {
    padding-right: 0px !important; }

  .pl-pc-0 {
    padding-left: 0px !important; }

  .m-pc-n0 {
    margin: 0px !important; }

  .mt-pc-n0 {
    margin-top: 0px !important; }

  .mb-pc-n0 {
    margin-bottom: 0px !important; }

  .mr-pc-n0 {
    margin-right: 0px !important; }

  .ml-pc-n0 {
    margin-left: 0px !important; }

  .m-pc-1 {
    margin: 10px !important; }

  .mt-pc-1 {
    margin-top: 10px !important; }

  .mb-pc-1 {
    margin-bottom: 10px !important; }

  .mr-pc-1 {
    margin-right: 10px !important; }

  .ml-pc-1 {
    margin-left: 10px !important; }

  .p-pc-1 {
    padding: 10px !important; }

  .pt-pc-1 {
    padding-top: 10px !important; }

  .pb-pc-1 {
    padding-bottom: 10px !important; }

  .pr-pc-1 {
    padding-right: 10px !important; }

  .pl-pc-1 {
    padding-left: 10px !important; }

  .m-pc-n1 {
    margin: -10px !important; }

  .mt-pc-n1 {
    margin-top: -10px !important; }

  .mb-pc-n1 {
    margin-bottom: -10px !important; }

  .mr-pc-n1 {
    margin-right: -10px !important; }

  .ml-pc-n1 {
    margin-left: -10px !important; }

  .m-pc-2 {
    margin: 20px !important; }

  .mt-pc-2 {
    margin-top: 20px !important; }

  .mb-pc-2 {
    margin-bottom: 20px !important; }

  .mr-pc-2 {
    margin-right: 20px !important; }

  .ml-pc-2 {
    margin-left: 20px !important; }

  .p-pc-2 {
    padding: 20px !important; }

  .pt-pc-2 {
    padding-top: 20px !important; }

  .pb-pc-2 {
    padding-bottom: 20px !important; }

  .pr-pc-2 {
    padding-right: 20px !important; }

  .pl-pc-2 {
    padding-left: 20px !important; }

  .m-pc-n2 {
    margin: -20px !important; }

  .mt-pc-n2 {
    margin-top: -20px !important; }

  .mb-pc-n2 {
    margin-bottom: -20px !important; }

  .mr-pc-n2 {
    margin-right: -20px !important; }

  .ml-pc-n2 {
    margin-left: -20px !important; }

  .m-pc-3 {
    margin: 30px !important; }

  .mt-pc-3 {
    margin-top: 30px !important; }

  .mb-pc-3 {
    margin-bottom: 30px !important; }

  .mr-pc-3 {
    margin-right: 30px !important; }

  .ml-pc-3 {
    margin-left: 30px !important; }

  .p-pc-3 {
    padding: 30px !important; }

  .pt-pc-3 {
    padding-top: 30px !important; }

  .pb-pc-3 {
    padding-bottom: 30px !important; }

  .pr-pc-3 {
    padding-right: 30px !important; }

  .pl-pc-3 {
    padding-left: 30px !important; }

  .m-pc-n3 {
    margin: -30px !important; }

  .mt-pc-n3 {
    margin-top: -30px !important; }

  .mb-pc-n3 {
    margin-bottom: -30px !important; }

  .mr-pc-n3 {
    margin-right: -30px !important; }

  .ml-pc-n3 {
    margin-left: -30px !important; }

  .m-pc-4 {
    margin: 40px !important; }

  .mt-pc-4 {
    margin-top: 40px !important; }

  .mb-pc-4 {
    margin-bottom: 40px !important; }

  .mr-pc-4 {
    margin-right: 40px !important; }

  .ml-pc-4 {
    margin-left: 40px !important; }

  .p-pc-4 {
    padding: 40px !important; }

  .pt-pc-4 {
    padding-top: 40px !important; }

  .pb-pc-4 {
    padding-bottom: 40px !important; }

  .pr-pc-4 {
    padding-right: 40px !important; }

  .pl-pc-4 {
    padding-left: 40px !important; }

  .m-pc-n4 {
    margin: -40px !important; }

  .mt-pc-n4 {
    margin-top: -40px !important; }

  .mb-pc-n4 {
    margin-bottom: -40px !important; }

  .mr-pc-n4 {
    margin-right: -40px !important; }

  .ml-pc-n4 {
    margin-left: -40px !important; }

  .m-pc-5 {
    margin: 50px !important; }

  .mt-pc-5 {
    margin-top: 50px !important; }

  .mb-pc-5 {
    margin-bottom: 50px !important; }

  .mr-pc-5 {
    margin-right: 50px !important; }

  .ml-pc-5 {
    margin-left: 50px !important; }

  .p-pc-5 {
    padding: 50px !important; }

  .pt-pc-5 {
    padding-top: 50px !important; }

  .pb-pc-5 {
    padding-bottom: 50px !important; }

  .pr-pc-5 {
    padding-right: 50px !important; }

  .pl-pc-5 {
    padding-left: 50px !important; }

  .m-pc-n5 {
    margin: -50px !important; }

  .mt-pc-n5 {
    margin-top: -50px !important; }

  .mb-pc-n5 {
    margin-bottom: -50px !important; }

  .mr-pc-n5 {
    margin-right: -50px !important; }

  .ml-pc-n5 {
    margin-left: -50px !important; }

  .m-pc-6 {
    margin: 60px !important; }

  .mt-pc-6 {
    margin-top: 60px !important; }

  .mb-pc-6 {
    margin-bottom: 60px !important; }

  .mr-pc-6 {
    margin-right: 60px !important; }

  .ml-pc-6 {
    margin-left: 60px !important; }

  .p-pc-6 {
    padding: 60px !important; }

  .pt-pc-6 {
    padding-top: 60px !important; }

  .pb-pc-6 {
    padding-bottom: 60px !important; }

  .pr-pc-6 {
    padding-right: 60px !important; }

  .pl-pc-6 {
    padding-left: 60px !important; }

  .m-pc-n6 {
    margin: -60px !important; }

  .mt-pc-n6 {
    margin-top: -60px !important; }

  .mb-pc-n6 {
    margin-bottom: -60px !important; }

  .mr-pc-n6 {
    margin-right: -60px !important; }

  .ml-pc-n6 {
    margin-left: -60px !important; }

  .m-pc-7 {
    margin: 70px !important; }

  .mt-pc-7 {
    margin-top: 70px !important; }

  .mb-pc-7 {
    margin-bottom: 70px !important; }

  .mr-pc-7 {
    margin-right: 70px !important; }

  .ml-pc-7 {
    margin-left: 70px !important; }

  .p-pc-7 {
    padding: 70px !important; }

  .pt-pc-7 {
    padding-top: 70px !important; }

  .pb-pc-7 {
    padding-bottom: 70px !important; }

  .pr-pc-7 {
    padding-right: 70px !important; }

  .pl-pc-7 {
    padding-left: 70px !important; }

  .m-pc-n7 {
    margin: -70px !important; }

  .mt-pc-n7 {
    margin-top: -70px !important; }

  .mb-pc-n7 {
    margin-bottom: -70px !important; }

  .mr-pc-n7 {
    margin-right: -70px !important; }

  .ml-pc-n7 {
    margin-left: -70px !important; }

  .m-pc-8 {
    margin: 80px !important; }

  .mt-pc-8 {
    margin-top: 80px !important; }

  .mb-pc-8 {
    margin-bottom: 80px !important; }

  .mr-pc-8 {
    margin-right: 80px !important; }

  .ml-pc-8 {
    margin-left: 80px !important; }

  .p-pc-8 {
    padding: 80px !important; }

  .pt-pc-8 {
    padding-top: 80px !important; }

  .pb-pc-8 {
    padding-bottom: 80px !important; }

  .pr-pc-8 {
    padding-right: 80px !important; }

  .pl-pc-8 {
    padding-left: 80px !important; }

  .m-pc-n8 {
    margin: -80px !important; }

  .mt-pc-n8 {
    margin-top: -80px !important; }

  .mb-pc-n8 {
    margin-bottom: -80px !important; }

  .mr-pc-n8 {
    margin-right: -80px !important; }

  .ml-pc-n8 {
    margin-left: -80px !important; }

  .m-pc-9 {
    margin: 90px !important; }

  .mt-pc-9 {
    margin-top: 90px !important; }

  .mb-pc-9 {
    margin-bottom: 90px !important; }

  .mr-pc-9 {
    margin-right: 90px !important; }

  .ml-pc-9 {
    margin-left: 90px !important; }

  .p-pc-9 {
    padding: 90px !important; }

  .pt-pc-9 {
    padding-top: 90px !important; }

  .pb-pc-9 {
    padding-bottom: 90px !important; }

  .pr-pc-9 {
    padding-right: 90px !important; }

  .pl-pc-9 {
    padding-left: 90px !important; }

  .m-pc-n9 {
    margin: -90px !important; }

  .mt-pc-n9 {
    margin-top: -90px !important; }

  .mb-pc-n9 {
    margin-bottom: -90px !important; }

  .mr-pc-n9 {
    margin-right: -90px !important; }

  .ml-pc-n9 {
    margin-left: -90px !important; }

  .m-pc-10 {
    margin: 100px !important; }

  .mt-pc-10 {
    margin-top: 100px !important; }

  .mb-pc-10 {
    margin-bottom: 100px !important; }

  .mr-pc-10 {
    margin-right: 100px !important; }

  .ml-pc-10 {
    margin-left: 100px !important; }

  .p-pc-10 {
    padding: 100px !important; }

  .pt-pc-10 {
    padding-top: 100px !important; }

  .pb-pc-10 {
    padding-bottom: 100px !important; }

  .pr-pc-10 {
    padding-right: 100px !important; }

  .pl-pc-10 {
    padding-left: 100px !important; }

  .m-pc-n10 {
    margin: -100px !important; }

  .mt-pc-n10 {
    margin-top: -100px !important; }

  .mb-pc-n10 {
    margin-bottom: -100px !important; }

  .mr-pc-n10 {
    margin-right: -100px !important; }

  .ml-pc-n10 {
    margin-left: -100px !important; } }
/* タブレット グリッドシステム */
@media only screen and (max-width: 1080px) {
  .col-tb-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%; }

  .col-tb-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%; }

  .col-tb-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }

  .col-tb-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%; }

  .col-tb-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%; }

  .col-tb-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }

  .col-tb-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%; }

  .col-tb-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%; }

  .col-tb-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }

  .col-tb-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%; }

  .col-tb-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%; }

  .col-tb-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }

  .order-tb-first {
    -ms-flex-order: -1;
    order: -1; }

  .order-tb-last {
    -ms-flex-order: 13;
    order: 13; }

  .order-tb-0 {
    -ms-flex-order: 0;
    order: 0; }

  .order-tb-1 {
    -ms-flex-order: 1;
    order: 1; }

  .order-tb-2 {
    -ms-flex-order: 2;
    order: 2; }

  .order-tb-3 {
    -ms-flex-order: 3;
    order: 3; }

  .order-tb-4 {
    -ms-flex-order: 4;
    order: 4; }

  .order-tb-5 {
    -ms-flex-order: 5;
    order: 5; }

  .order-tb-6 {
    -ms-flex-order: 6;
    order: 6; }

  .order-tb-7 {
    -ms-flex-order: 7;
    order: 7; }

  .order-tb-8 {
    -ms-flex-order: 8;
    order: 8; }

  .order-tb-9 {
    -ms-flex-order: 9;
    order: 9; }

  .order-tb-10 {
    -ms-flex-order: 10;
    order: 10; }

  .order-tb-11 {
    -ms-flex-order: 11;
    order: 11; }

  .order-tb-12 {
    -ms-flex-order: 12;
    order: 12; }

  .offset-tb-0 {
    margin-left: 0; }

  .offset-tb-1 {
    margin-left: 8.3333333333%; }

  .offset-tb-2 {
    margin-left: 16.6666666667%; }

  .offset-tb-3 {
    margin-left: 25%; }

  .offset-tb-4 {
    margin-left: 33.3333333333%; }

  .offset-tb-5 {
    margin-left: 41.6666666667%; }

  .offset-tb-6 {
    margin-left: 50%; }

  .offset-tb-7 {
    margin-left: 58.3333333333%; }

  .offset-tb-8 {
    margin-left: 66.6666666667%; }

  .offset-tb-9 {
    margin-left: 75%; }

  .offset-tb-10 {
    margin-left: 83.3333333333%; }

  .offset-tb-11 {
    margin-left: 91.6666666667%; }

  .m-tb-0 {
    margin: 0px !important; }

  .mt-tb-0 {
    margin-top: 0px !important; }

  .mb-tb-0 {
    margin-bottom: 0px !important; }

  .mr-tb-0 {
    margin-right: 0px !important; }

  .ml-tb-0 {
    margin-left: 0px !important; }

  .p-tb-0 {
    padding: 0px !important; }

  .pt-tb-0 {
    padding-top: 0px !important; }

  .pb-tb-0 {
    padding-bottom: 0px !important; }

  .pr-tb-0 {
    padding-right: 0px !important; }

  .pl-tb-0 {
    padding-left: 0px !important; }

  .m-tb-n0 {
    margin: 0px !important; }

  .mt-tb-n0 {
    margin-top: 0px !important; }

  .mb-tb-n0 {
    margin-bottom: 0px !important; }

  .mr-tb-n0 {
    margin-right: 0px !important; }

  .ml-tb-n0 {
    margin-left: 0px !important; }

  .m-tb-1 {
    margin: 10px !important; }

  .mt-tb-1 {
    margin-top: 10px !important; }

  .mb-tb-1 {
    margin-bottom: 10px !important; }

  .mr-tb-1 {
    margin-right: 10px !important; }

  .ml-tb-1 {
    margin-left: 10px !important; }

  .p-tb-1 {
    padding: 10px !important; }

  .pt-tb-1 {
    padding-top: 10px !important; }

  .pb-tb-1 {
    padding-bottom: 10px !important; }

  .pr-tb-1 {
    padding-right: 10px !important; }

  .pl-tb-1 {
    padding-left: 10px !important; }

  .m-tb-n1 {
    margin: -10px !important; }

  .mt-tb-n1 {
    margin-top: -10px !important; }

  .mb-tb-n1 {
    margin-bottom: -10px !important; }

  .mr-tb-n1 {
    margin-right: -10px !important; }

  .ml-tb-n1 {
    margin-left: -10px !important; }

  .m-tb-2 {
    margin: 20px !important; }

  .mt-tb-2 {
    margin-top: 20px !important; }

  .mb-tb-2 {
    margin-bottom: 20px !important; }

  .mr-tb-2 {
    margin-right: 20px !important; }

  .ml-tb-2 {
    margin-left: 20px !important; }

  .p-tb-2 {
    padding: 20px !important; }

  .pt-tb-2 {
    padding-top: 20px !important; }

  .pb-tb-2 {
    padding-bottom: 20px !important; }

  .pr-tb-2 {
    padding-right: 20px !important; }

  .pl-tb-2 {
    padding-left: 20px !important; }

  .m-tb-n2 {
    margin: -20px !important; }

  .mt-tb-n2 {
    margin-top: -20px !important; }

  .mb-tb-n2 {
    margin-bottom: -20px !important; }

  .mr-tb-n2 {
    margin-right: -20px !important; }

  .ml-tb-n2 {
    margin-left: -20px !important; }

  .m-tb-3 {
    margin: 30px !important; }

  .mt-tb-3 {
    margin-top: 30px !important; }

  .mb-tb-3 {
    margin-bottom: 30px !important; }

  .mr-tb-3 {
    margin-right: 30px !important; }

  .ml-tb-3 {
    margin-left: 30px !important; }

  .p-tb-3 {
    padding: 30px !important; }

  .pt-tb-3 {
    padding-top: 30px !important; }

  .pb-tb-3 {
    padding-bottom: 30px !important; }

  .pr-tb-3 {
    padding-right: 30px !important; }

  .pl-tb-3 {
    padding-left: 30px !important; }

  .m-tb-n3 {
    margin: -30px !important; }

  .mt-tb-n3 {
    margin-top: -30px !important; }

  .mb-tb-n3 {
    margin-bottom: -30px !important; }

  .mr-tb-n3 {
    margin-right: -30px !important; }

  .ml-tb-n3 {
    margin-left: -30px !important; }

  .m-tb-4 {
    margin: 40px !important; }

  .mt-tb-4 {
    margin-top: 40px !important; }

  .mb-tb-4 {
    margin-bottom: 40px !important; }

  .mr-tb-4 {
    margin-right: 40px !important; }

  .ml-tb-4 {
    margin-left: 40px !important; }

  .p-tb-4 {
    padding: 40px !important; }

  .pt-tb-4 {
    padding-top: 40px !important; }

  .pb-tb-4 {
    padding-bottom: 40px !important; }

  .pr-tb-4 {
    padding-right: 40px !important; }

  .pl-tb-4 {
    padding-left: 40px !important; }

  .m-tb-n4 {
    margin: -40px !important; }

  .mt-tb-n4 {
    margin-top: -40px !important; }

  .mb-tb-n4 {
    margin-bottom: -40px !important; }

  .mr-tb-n4 {
    margin-right: -40px !important; }

  .ml-tb-n4 {
    margin-left: -40px !important; }

  .m-tb-5 {
    margin: 50px !important; }

  .mt-tb-5 {
    margin-top: 50px !important; }

  .mb-tb-5 {
    margin-bottom: 50px !important; }

  .mr-tb-5 {
    margin-right: 50px !important; }

  .ml-tb-5 {
    margin-left: 50px !important; }

  .p-tb-5 {
    padding: 50px !important; }

  .pt-tb-5 {
    padding-top: 50px !important; }

  .pb-tb-5 {
    padding-bottom: 50px !important; }

  .pr-tb-5 {
    padding-right: 50px !important; }

  .pl-tb-5 {
    padding-left: 50px !important; }

  .m-tb-n5 {
    margin: -50px !important; }

  .mt-tb-n5 {
    margin-top: -50px !important; }

  .mb-tb-n5 {
    margin-bottom: -50px !important; }

  .mr-tb-n5 {
    margin-right: -50px !important; }

  .ml-tb-n5 {
    margin-left: -50px !important; }

  .m-tb-6 {
    margin: 60px !important; }

  .mt-tb-6 {
    margin-top: 60px !important; }

  .mb-tb-6 {
    margin-bottom: 60px !important; }

  .mr-tb-6 {
    margin-right: 60px !important; }

  .ml-tb-6 {
    margin-left: 60px !important; }

  .p-tb-6 {
    padding: 60px !important; }

  .pt-tb-6 {
    padding-top: 60px !important; }

  .pb-tb-6 {
    padding-bottom: 60px !important; }

  .pr-tb-6 {
    padding-right: 60px !important; }

  .pl-tb-6 {
    padding-left: 60px !important; }

  .m-tb-n6 {
    margin: -60px !important; }

  .mt-tb-n6 {
    margin-top: -60px !important; }

  .mb-tb-n6 {
    margin-bottom: -60px !important; }

  .mr-tb-n6 {
    margin-right: -60px !important; }

  .ml-tb-n6 {
    margin-left: -60px !important; }

  .m-tb-7 {
    margin: 70px !important; }

  .mt-tb-7 {
    margin-top: 70px !important; }

  .mb-tb-7 {
    margin-bottom: 70px !important; }

  .mr-tb-7 {
    margin-right: 70px !important; }

  .ml-tb-7 {
    margin-left: 70px !important; }

  .p-tb-7 {
    padding: 70px !important; }

  .pt-tb-7 {
    padding-top: 70px !important; }

  .pb-tb-7 {
    padding-bottom: 70px !important; }

  .pr-tb-7 {
    padding-right: 70px !important; }

  .pl-tb-7 {
    padding-left: 70px !important; }

  .m-tb-n7 {
    margin: -70px !important; }

  .mt-tb-n7 {
    margin-top: -70px !important; }

  .mb-tb-n7 {
    margin-bottom: -70px !important; }

  .mr-tb-n7 {
    margin-right: -70px !important; }

  .ml-tb-n7 {
    margin-left: -70px !important; }

  .m-tb-8 {
    margin: 80px !important; }

  .mt-tb-8 {
    margin-top: 80px !important; }

  .mb-tb-8 {
    margin-bottom: 80px !important; }

  .mr-tb-8 {
    margin-right: 80px !important; }

  .ml-tb-8 {
    margin-left: 80px !important; }

  .p-tb-8 {
    padding: 80px !important; }

  .pt-tb-8 {
    padding-top: 80px !important; }

  .pb-tb-8 {
    padding-bottom: 80px !important; }

  .pr-tb-8 {
    padding-right: 80px !important; }

  .pl-tb-8 {
    padding-left: 80px !important; }

  .m-tb-n8 {
    margin: -80px !important; }

  .mt-tb-n8 {
    margin-top: -80px !important; }

  .mb-tb-n8 {
    margin-bottom: -80px !important; }

  .mr-tb-n8 {
    margin-right: -80px !important; }

  .ml-tb-n8 {
    margin-left: -80px !important; }

  .m-tb-9 {
    margin: 90px !important; }

  .mt-tb-9 {
    margin-top: 90px !important; }

  .mb-tb-9 {
    margin-bottom: 90px !important; }

  .mr-tb-9 {
    margin-right: 90px !important; }

  .ml-tb-9 {
    margin-left: 90px !important; }

  .p-tb-9 {
    padding: 90px !important; }

  .pt-tb-9 {
    padding-top: 90px !important; }

  .pb-tb-9 {
    padding-bottom: 90px !important; }

  .pr-tb-9 {
    padding-right: 90px !important; }

  .pl-tb-9 {
    padding-left: 90px !important; }

  .m-tb-n9 {
    margin: -90px !important; }

  .mt-tb-n9 {
    margin-top: -90px !important; }

  .mb-tb-n9 {
    margin-bottom: -90px !important; }

  .mr-tb-n9 {
    margin-right: -90px !important; }

  .ml-tb-n9 {
    margin-left: -90px !important; }

  .m-tb-10 {
    margin: 100px !important; }

  .mt-tb-10 {
    margin-top: 100px !important; }

  .mb-tb-10 {
    margin-bottom: 100px !important; }

  .mr-tb-10 {
    margin-right: 100px !important; }

  .ml-tb-10 {
    margin-left: 100px !important; }

  .p-tb-10 {
    padding: 100px !important; }

  .pt-tb-10 {
    padding-top: 100px !important; }

  .pb-tb-10 {
    padding-bottom: 100px !important; }

  .pr-tb-10 {
    padding-right: 100px !important; }

  .pl-tb-10 {
    padding-left: 100px !important; }

  .m-tb-n10 {
    margin: -100px !important; }

  .mt-tb-n10 {
    margin-top: -100px !important; }

  .mb-tb-n10 {
    margin-bottom: -100px !important; }

  .mr-tb-n10 {
    margin-right: -100px !important; }

  .ml-tb-n10 {
    margin-left: -100px !important; } }
@media only screen and (max-width: 768px) {
  .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -30px;
    margin-bottom: -60px; }

  .container,
  .container-fluid {
    padding-left: clamp(15px, 5vw, 60px);
    padding-right: clamp(15px, 5vw, 60px);
    padding-top: clamp(25px, 10vw, 100px);
    padding-bottom: clamp(25px, 10vw, 100px); }

  .row {
    margin: -2.5vw;
    margin-bottom: -5vw; }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding: 2.5vw;
    padding-bottom: 5vw; }

  .col-sp-1, .col-sp-2, .col-sp-3, .col-sp-4, .col-sp-5, .col-sp-6,
  .col-sp-7, .col-sp-8, .col-sp-9, .col-sp-10, .col-sp-11, .col-sp-12 {
    padding: 2.5vw;
    padding-bottom: 5vw; }

  .col-sp-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%; }

  .col-sp-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%; }

  .col-sp-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }

  .col-sp-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%; }

  .col-sp-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%; }

  .col-sp-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }

  .col-sp-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%; }

  .col-sp-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%; }

  .col-sp-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }

  .col-sp-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%; }

  .col-sp-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%; }

  .col-sp-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }

  .order-sp-first {
    -ms-flex-order: -1;
    order: -1; }

  .order-sp-last {
    -ms-flex-order: 13;
    order: 13; }

  .order-sp-0 {
    -ms-flex-order: 0;
    order: 0; }

  .order-sp-1 {
    -ms-flex-order: 1;
    order: 1; }

  .order-sp-2 {
    -ms-flex-order: 2;
    order: 2; }

  .order-sp-3 {
    -ms-flex-order: 3;
    order: 3; }

  .order-sp-4 {
    -ms-flex-order: 4;
    order: 4; }

  .order-sp-5 {
    -ms-flex-order: 5;
    order: 5; }

  .order-sp-6 {
    -ms-flex-order: 6;
    order: 6; }

  .order-sp-7 {
    -ms-flex-order: 7;
    order: 7; }

  .order-sp-8 {
    -ms-flex-order: 8;
    order: 8; }

  .order-sp-9 {
    -ms-flex-order: 9;
    order: 9; }

  .order-sp-10 {
    -ms-flex-order: 10;
    order: 10; }

  .order-sp-11 {
    -ms-flex-order: 11;
    order: 11; }

  .order-sp-12 {
    -ms-flex-order: 12;
    order: 12; }

  .offset-sp-0 {
    margin-left: 0; }

  .offset-sp-1 {
    margin-left: 8.3333333333%; }

  .offset-sp-2 {
    margin-left: 16.6666666667%; }

  .offset-sp-3 {
    margin-left: 25%; }

  .offset-sp-4 {
    margin-left: 33.3333333333%; }

  .offset-sp-5 {
    margin-left: 41.6666666667%; }

  .offset-sp-6 {
    margin-left: 50%; }

  .offset-sp-7 {
    margin-left: 58.3333333333%; }

  .offset-sp-8 {
    margin-left: 66.6666666667%; }

  .offset-sp-9 {
    margin-left: 75%; }

  .offset-sp-10 {
    margin-left: 83.3333333333%; }

  .offset-sp-11 {
    margin-left: 91.6666666667%; }

  .m-sp-0 {
    margin: 0px !important; }

  .mt-sp-0 {
    margin-top: 0px !important; }

  .mb-sp-0 {
    margin-bottom: 0px !important; }

  .mr-sp-0 {
    margin-right: 0px !important; }

  .ml-sp-0 {
    margin-left: 0px !important; }

  .p-sp-0 {
    padding: 0px !important; }

  .pt-sp-0 {
    padding-top: 0px !important; }

  .pb-sp-0 {
    padding-bottom: 0px !important; }

  .pr-sp-0 {
    padding-right: 0px !important; }

  .pl-sp-0 {
    padding-left: 0px !important; }

  .m-sp-n0 {
    margin: 0px !important; }

  .mt-sp-n0 {
    margin-top: 0px !important; }

  .mb-sp-n0 {
    margin-bottom: 0px !important; }

  .mr-sp-n0 {
    margin-right: 0px !important; }

  .ml-sp-n0 {
    margin-left: 0px !important; }

  .m-sp-1 {
    margin: 10px !important; }

  .mt-sp-1 {
    margin-top: 10px !important; }

  .mb-sp-1 {
    margin-bottom: 10px !important; }

  .mr-sp-1 {
    margin-right: 10px !important; }

  .ml-sp-1 {
    margin-left: 10px !important; }

  .p-sp-1 {
    padding: 10px !important; }

  .pt-sp-1 {
    padding-top: 10px !important; }

  .pb-sp-1 {
    padding-bottom: 10px !important; }

  .pr-sp-1 {
    padding-right: 10px !important; }

  .pl-sp-1 {
    padding-left: 10px !important; }

  .m-sp-n1 {
    margin: -10px !important; }

  .mt-sp-n1 {
    margin-top: -10px !important; }

  .mb-sp-n1 {
    margin-bottom: -10px !important; }

  .mr-sp-n1 {
    margin-right: -10px !important; }

  .ml-sp-n1 {
    margin-left: -10px !important; }

  .m-sp-2 {
    margin: 20px !important; }

  .mt-sp-2 {
    margin-top: 20px !important; }

  .mb-sp-2 {
    margin-bottom: 20px !important; }

  .mr-sp-2 {
    margin-right: 20px !important; }

  .ml-sp-2 {
    margin-left: 20px !important; }

  .p-sp-2 {
    padding: 20px !important; }

  .pt-sp-2 {
    padding-top: 20px !important; }

  .pb-sp-2 {
    padding-bottom: 20px !important; }

  .pr-sp-2 {
    padding-right: 20px !important; }

  .pl-sp-2 {
    padding-left: 20px !important; }

  .m-sp-n2 {
    margin: -20px !important; }

  .mt-sp-n2 {
    margin-top: -20px !important; }

  .mb-sp-n2 {
    margin-bottom: -20px !important; }

  .mr-sp-n2 {
    margin-right: -20px !important; }

  .ml-sp-n2 {
    margin-left: -20px !important; }

  .m-sp-3 {
    margin: 30px !important; }

  .mt-sp-3 {
    margin-top: 30px !important; }

  .mb-sp-3 {
    margin-bottom: 30px !important; }

  .mr-sp-3 {
    margin-right: 30px !important; }

  .ml-sp-3 {
    margin-left: 30px !important; }

  .p-sp-3 {
    padding: 30px !important; }

  .pt-sp-3 {
    padding-top: 30px !important; }

  .pb-sp-3 {
    padding-bottom: 30px !important; }

  .pr-sp-3 {
    padding-right: 30px !important; }

  .pl-sp-3 {
    padding-left: 30px !important; }

  .m-sp-n3 {
    margin: -30px !important; }

  .mt-sp-n3 {
    margin-top: -30px !important; }

  .mb-sp-n3 {
    margin-bottom: -30px !important; }

  .mr-sp-n3 {
    margin-right: -30px !important; }

  .ml-sp-n3 {
    margin-left: -30px !important; }

  .m-sp-4 {
    margin: 40px !important; }

  .mt-sp-4 {
    margin-top: 40px !important; }

  .mb-sp-4 {
    margin-bottom: 40px !important; }

  .mr-sp-4 {
    margin-right: 40px !important; }

  .ml-sp-4 {
    margin-left: 40px !important; }

  .p-sp-4 {
    padding: 40px !important; }

  .pt-sp-4 {
    padding-top: 40px !important; }

  .pb-sp-4 {
    padding-bottom: 40px !important; }

  .pr-sp-4 {
    padding-right: 40px !important; }

  .pl-sp-4 {
    padding-left: 40px !important; }

  .m-sp-n4 {
    margin: -40px !important; }

  .mt-sp-n4 {
    margin-top: -40px !important; }

  .mb-sp-n4 {
    margin-bottom: -40px !important; }

  .mr-sp-n4 {
    margin-right: -40px !important; }

  .ml-sp-n4 {
    margin-left: -40px !important; }

  .m-sp-5 {
    margin: 50px !important; }

  .mt-sp-5 {
    margin-top: 50px !important; }

  .mb-sp-5 {
    margin-bottom: 50px !important; }

  .mr-sp-5 {
    margin-right: 50px !important; }

  .ml-sp-5 {
    margin-left: 50px !important; }

  .p-sp-5 {
    padding: 50px !important; }

  .pt-sp-5 {
    padding-top: 50px !important; }

  .pb-sp-5 {
    padding-bottom: 50px !important; }

  .pr-sp-5 {
    padding-right: 50px !important; }

  .pl-sp-5 {
    padding-left: 50px !important; }

  .m-sp-n5 {
    margin: -50px !important; }

  .mt-sp-n5 {
    margin-top: -50px !important; }

  .mb-sp-n5 {
    margin-bottom: -50px !important; }

  .mr-sp-n5 {
    margin-right: -50px !important; }

  .ml-sp-n5 {
    margin-left: -50px !important; }

  .m-sp-6 {
    margin: 60px !important; }

  .mt-sp-6 {
    margin-top: 60px !important; }

  .mb-sp-6 {
    margin-bottom: 60px !important; }

  .mr-sp-6 {
    margin-right: 60px !important; }

  .ml-sp-6 {
    margin-left: 60px !important; }

  .p-sp-6 {
    padding: 60px !important; }

  .pt-sp-6 {
    padding-top: 60px !important; }

  .pb-sp-6 {
    padding-bottom: 60px !important; }

  .pr-sp-6 {
    padding-right: 60px !important; }

  .pl-sp-6 {
    padding-left: 60px !important; }

  .m-sp-n6 {
    margin: -60px !important; }

  .mt-sp-n6 {
    margin-top: -60px !important; }

  .mb-sp-n6 {
    margin-bottom: -60px !important; }

  .mr-sp-n6 {
    margin-right: -60px !important; }

  .ml-sp-n6 {
    margin-left: -60px !important; }

  .m-sp-7 {
    margin: 70px !important; }

  .mt-sp-7 {
    margin-top: 70px !important; }

  .mb-sp-7 {
    margin-bottom: 70px !important; }

  .mr-sp-7 {
    margin-right: 70px !important; }

  .ml-sp-7 {
    margin-left: 70px !important; }

  .p-sp-7 {
    padding: 70px !important; }

  .pt-sp-7 {
    padding-top: 70px !important; }

  .pb-sp-7 {
    padding-bottom: 70px !important; }

  .pr-sp-7 {
    padding-right: 70px !important; }

  .pl-sp-7 {
    padding-left: 70px !important; }

  .m-sp-n7 {
    margin: -70px !important; }

  .mt-sp-n7 {
    margin-top: -70px !important; }

  .mb-sp-n7 {
    margin-bottom: -70px !important; }

  .mr-sp-n7 {
    margin-right: -70px !important; }

  .ml-sp-n7 {
    margin-left: -70px !important; }

  .m-sp-8 {
    margin: 80px !important; }

  .mt-sp-8 {
    margin-top: 80px !important; }

  .mb-sp-8 {
    margin-bottom: 80px !important; }

  .mr-sp-8 {
    margin-right: 80px !important; }

  .ml-sp-8 {
    margin-left: 80px !important; }

  .p-sp-8 {
    padding: 80px !important; }

  .pt-sp-8 {
    padding-top: 80px !important; }

  .pb-sp-8 {
    padding-bottom: 80px !important; }

  .pr-sp-8 {
    padding-right: 80px !important; }

  .pl-sp-8 {
    padding-left: 80px !important; }

  .m-sp-n8 {
    margin: -80px !important; }

  .mt-sp-n8 {
    margin-top: -80px !important; }

  .mb-sp-n8 {
    margin-bottom: -80px !important; }

  .mr-sp-n8 {
    margin-right: -80px !important; }

  .ml-sp-n8 {
    margin-left: -80px !important; }

  .m-sp-9 {
    margin: 90px !important; }

  .mt-sp-9 {
    margin-top: 90px !important; }

  .mb-sp-9 {
    margin-bottom: 90px !important; }

  .mr-sp-9 {
    margin-right: 90px !important; }

  .ml-sp-9 {
    margin-left: 90px !important; }

  .p-sp-9 {
    padding: 90px !important; }

  .pt-sp-9 {
    padding-top: 90px !important; }

  .pb-sp-9 {
    padding-bottom: 90px !important; }

  .pr-sp-9 {
    padding-right: 90px !important; }

  .pl-sp-9 {
    padding-left: 90px !important; }

  .m-sp-n9 {
    margin: -90px !important; }

  .mt-sp-n9 {
    margin-top: -90px !important; }

  .mb-sp-n9 {
    margin-bottom: -90px !important; }

  .mr-sp-n9 {
    margin-right: -90px !important; }

  .ml-sp-n9 {
    margin-left: -90px !important; }

  .m-sp-10 {
    margin: 100px !important; }

  .mt-sp-10 {
    margin-top: 100px !important; }

  .mb-sp-10 {
    margin-bottom: 100px !important; }

  .mr-sp-10 {
    margin-right: 100px !important; }

  .ml-sp-10 {
    margin-left: 100px !important; }

  .p-sp-10 {
    padding: 100px !important; }

  .pt-sp-10 {
    padding-top: 100px !important; }

  .pb-sp-10 {
    padding-bottom: 100px !important; }

  .pr-sp-10 {
    padding-right: 100px !important; }

  .pl-sp-10 {
    padding-left: 100px !important; }

  .m-sp-n10 {
    margin: -100px !important; }

  .mt-sp-n10 {
    margin-top: -100px !important; }

  .mb-sp-n10 {
    margin-bottom: -100px !important; }

  .mr-sp-n10 {
    margin-right: -100px !important; }

  .ml-sp-n10 {
    margin-left: -100px !important; } }
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

レイアウトスタイル

//////////////////////////////*/
header {
  z-index: 10000;
  position: fixed;
  height: 120px;
  width: 100%;
  inset: 0;
  padding-left: 40px;
  padding-right: 40px;
  color: #fff;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  @media only screen and (max-width: 1080px) {
    header {
      /*　画面サイズ $tbWitdh まではここを読み込む　*/
      height: 90px; } }
  @media only screen and (max-width: 768px) {
    header {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      height: 70px; } }
  @media only screen and (max-width: 768px) {
    header {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-left: 5.5vw; } }
  @media only screen and (max-width: 768px) {
    header {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-right: 5.5vw; } }
  header:link, header:hover, header:visited, header:active {
    color: #fff; }
  header a:link, header a:hover, header a:visited, header a:active {
    color: #fff; }
  header.change {
    background-color: rgba(35, 35, 88, 0.9); }
    @media print, screen and (min-width: 1081px) {
      header.change {
        /*　画面サイズ $tbWidth からはここを読み込む　*/
        height: 90px; } }
  @media only screen and (max-width: 1080px) {
    header {
      /*　画面サイズ $tbWitdh まではここを読み込む　*/
      padding-left: 20px; } }
  @media only screen and (max-width: 1080px) and (max-width: 768px) {
    header {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-left: 3.5vw; } }
  @media only screen and (max-width: 1080px) {
      header.black-out:after {
        content: "";
        display: block;
        position: fixed;
        height: 100vh;
        width: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.7); } }
  header #logo {
    max-width: 340px;
    width: 24vw;
    margin-right: 20px;
    z-index: 10000; }
    @media only screen and (max-width: 768px) {
      header #logo {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-right: 3.5vw; } }
    @media only screen and (max-width: 1080px) {
      header #logo {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        max-width: 350px;
        width: 35vw; } }
    header #logo img {
      vertical-align: middle; }
  header #nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 18px;
    font-size: 1.8rem;
    justify-content: flex-end;
    width: 75%; }
    @media only screen and (max-width: 1080px) {
      header #nav {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        position: fixed;
        top: 0;
        right: -110%;
        height: 100%;
        width: 100%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        transition: all 0.3s ease;
        padding: 0 10%;
        padding-top: 135px;
        padding-bottom: 90px;
        z-index: 9999;
        background: #232358;
        gap: 20px; } }
  @media only screen and (max-width: 1080px) and (max-width: 768px) {
    header #nav {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-top: 105px;
      padding-bottom: 70px; } }
    @media only screen and (max-width: 1080px) {
        header #nav.active {
          right: 0; } }
    header #nav #gnav {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      font-weight: 500;
      justify-content: flex-end;
      width: 100%; }
      @media only screen and (max-width: 1080px) {
        header #nav #gnav {
          /*　画面サイズ $tbWitdh まではここを読み込む　*/
          flex-direction: column;
          justify-content: flex-start; } }
      header #nav #gnav li {
        width: 100%;
        max-width: 125px; }
        @media only screen and (max-width: 1080px) {
          header #nav #gnav li {
            /*　画面サイズ $tbWitdh まではここを読み込む　*/
            max-width: 100%; } }
      @media print, screen and (min-width: 1081px) {
        header #nav #gnav .nav_home {
          /*　画面サイズ $tbWidth からはここを読み込む　*/
          display: none; } }
      header #nav #gnav a {
        display: inline-flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        padding: 0 5px;
        width: 100%;
        height: 120px; }
        @media only screen and (max-width: 1080px) {
          header #nav #gnav a {
            /*　画面サイズ $tbWitdh まではここを読み込む　*/
            padding: 0 0;
            text-align: left;
            justify-content: flex-start;
            height: auto;
            font-size: 22px;
            font-size: 2.2rem;
            padding: 15px 0; } }
    header #nav #snav {
      display: flex;
      flex-wrap: nowrap;
      align-items: center; }
      @media only screen and (max-width: 1080px) {
        header #nav #snav {
          /*　画面サイズ $tbWitdh まではここを読み込む　*/
          gap: 18px;
          flex-wrap: wrap;
          width: 100%; }
          header #nav #snav li {
            width: 100%; } }
      header #nav #snav .nav_info {
        width: max-content; }
      header #nav #snav .nav_info > a {
        margin: auto clamp(15px, 2vw, 30px); }
        @media only screen and (max-width: 1080px) {
          header #nav #snav .nav_info > a {
            /*　画面サイズ $tbWitdh まではここを読み込む　*/
            position: fixed;
            right: 85px;
            width: 30vw;
            top: 45px;
            text-align: right;
            transform: translateY(-50%); } }
        @media only screen and (max-width: 768px) {
          header #nav #snav .nav_info > a {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            right: 60px;
            width: 35vw;
            top: 38px; } }
        header #nav #snav .nav_info > a img {
          max-width: 273px;
          width: 20vw; }
          @media only screen and (max-width: 1080px) {
            header #nav #snav .nav_info > a img {
              /*　画面サイズ $tbWitdh まではここを読み込む　*/
              width: 100%; } }
      header #nav #snav .nav_contact > a {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
        border-radius: 100px;
        background-color: #a00000;
        padding: 13px 30px;
        width: max-content;
        justify-content: center;
        font-weight: 500; }
        header #nav #snav .nav_contact > a span {
          padding-bottom: 0.1rem; }
        @media only screen and (max-width: 1080px) {
          header #nav #snav .nav_contact > a {
            /*　画面サイズ $tbWitdh まではここを読み込む　*/
            display: inline-flex;
            width: 100%;
            max-width: 273px; } }
        @media only screen and (max-width: 768px) {
          header #nav #snav .nav_contact > a {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            max-width: 100%; } }

#navToggle {
  display: none;
  transition: all 0.3s ease;
  text-align: center;
  cursor: pointer;
  position: fixed;
  height: 36px;
  width: 36px;
  min-width: 36px;
  padding-left: 0;
  margin-left: 0;
  z-index: 10000;
  border: 10px solid transparent;
  box-sizing: content-box;
  top: 20px;
  right: 15px; }
  @media only screen and (max-width: 1080px) {
    #navToggle {
      /*　画面サイズ $tbWitdh まではここを読み込む　*/
      display: inherit;
      transform: scale(1.3);
      transform-origin: right; } }
  @media only screen and (max-width: 768px) {
    #navToggle {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      transform: scale(1);
      top: 10px;
      right: 10px; } }
  #navToggle span {
    transition: all 0.3s ease;
    position: absolute;
    display: block;
    height: 2px;
    background-color: #ffffff;
    width: 100%; }
  #navToggle span:nth-child(1n) {
    top: 0px; }
  #navToggle span:nth-child(2n) {
    width: 75%;
    top: 8px; }
  #navToggle span:nth-child(3n) {
    top: 16px; }
  #navToggle b {
    display: block;
    font-size: 11px;
    color: #000;
    line-height: 1;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 2px;
    color: #fff;
    font-family: var(--en-font-family);
    font-weight: 400;
    letter-spacing: 0.05em;
    white-space: nowrap; }
    #navToggle b:link, #navToggle b:hover, #navToggle b:visited, #navToggle b:active {
      color: #000; }
    #navToggle b a:link, #navToggle b a:hover, #navToggle b a:visited, #navToggle b a:active {
      color: #000; }
    #navToggle b:link, #navToggle b:hover, #navToggle b:visited, #navToggle b:active {
      color: #fff; }
    #navToggle b a:link, #navToggle b a:hover, #navToggle b a:visited, #navToggle b a:active {
      color: #fff; }
  @media print, screen and (min-width: 1081px) {
    #navToggle {
      /*　画面サイズ $tbWidth からはここを読み込む　*/
      margin-left: calc(-36px - 60px); } }

#navToggle.active {
  margin-left: 0; }
  #navToggle.active span {
    margin-left: 2px; }
    @media only screen and (max-width: 1080px) {
      #navToggle.active span {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/ } }
  #navToggle.active span:nth-child(1n) {
    transform-origin: left;
    transform: rotate(26deg); }
  #navToggle.active span:nth-child(2n) {
    width: 0;
    margin-left: -10px; }
  #navToggle.active span:nth-child(3n) {
    transform: rotate(-26deg); }
  #navToggle.active b {
    font-size: 0; }
    #navToggle.active b:before {
      font-size: 11px;
      content: "CLOSE";
      display: inline-block; }

main {
  position: relative;
  overflow: clip; }

footer {
  background-color: #161616;
  color: #fff;
  overflow: hidden;
  position: relative; }
  footer:link, footer:hover, footer:visited, footer:active {
    color: #fff; }
  footer a:link, footer a:hover, footer a:visited, footer a:active {
    color: #fff; }
  footer #fcontact {
    background: #232358; }
    footer #fcontact .fcontact_content {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 30px;
      flex-wrap: wrap; }
      @media only screen and (max-width: 768px) {
        footer #fcontact .fcontact_content {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          gap: clamp(12px, 2.5vw, 30px); } }
      @media only screen and (max-width: 1080px) {
        footer #fcontact .fcontact_content {
          /*　画面サイズ $tbWitdh まではここを読み込む　*/
          justify-content: center; } }
    footer #fcontact .fcontact_txt {
      letter-spacing: 0.1em;
      font-weight: 500;
      display: grid;
      gap: 20px; }
    footer #fcontact .fcontact_body {
      font-size: 20px;
      font-size: 2rem; }
      @media only screen and (max-width: 768px) {
        footer #fcontact .fcontact_body {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          font-size: 17px;
          font-size: 1.7rem; } }
    footer #fcontact .fcontact_tel {
      display: inline-grid;
      align-items: center;
      gap: 15px;
      grid-template-columns: max-content auto; }
      @media only screen and (max-width: 1080px) {
        footer #fcontact .fcontact_tel {
          /*　画面サイズ $tbWitdh まではここを読み込む　*/
          grid-template-columns: 1fr; } }
      @media only screen and (max-width: 768px) {
        footer #fcontact .fcontact_tel {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          gap: 10px; } }
    footer #fcontact .fcontact_btn > a {
      border-radius: 100px;
      background-color: #a00000;
      display: flex;
      justify-content: center;
      gap: 10px;
      align-items: center;
      padding: 25px 60px;
      width: 100%;
      font-size: 20px;
      font-size: 2rem;
      color: #fff;
      font-weight: 500;
      white-space: nowrap; }
      footer #fcontact .fcontact_btn > a:link, footer #fcontact .fcontact_btn > a:hover, footer #fcontact .fcontact_btn > a:visited, footer #fcontact .fcontact_btn > a:active {
        color: #fff; }
      footer #fcontact .fcontact_btn > a a:link, footer #fcontact .fcontact_btn > a a:hover, footer #fcontact .fcontact_btn > a a:visited, footer #fcontact .fcontact_btn > a a:active {
        color: #fff; }
  footer .fnav_container {
    position: relative;
    background: #161616;
    display: grid;
    overflow: hidden;
    gap: 60px;
    padding-top: 60px;
    padding-bottom: 60px;
    grid-template-columns: max-content auto auto; }
    @media only screen and (max-width: 768px) {
      footer .fnav_container {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        gap: clamp(30px, 5vw, 60px); } }
    @media only screen and (max-width: 768px) {
      footer .fnav_container {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-top: clamp(30px, 5vw, 60px); } }
    @media only screen and (max-width: 768px) {
      footer .fnav_container {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-bottom: clamp(30px, 5vw, 60px); } }
    @media only screen and (max-width: 1080px) {
      footer .fnav_container {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        grid-template-columns: 1fr; } }
  footer #footer_info {
    display: grid;
    grid-template-columns: 1fr auto;
    position: relative;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      footer #footer_info {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        grid-template-columns: 1fr; } }
  footer .footer_logo {
    text-align: center;
    margin-bottom: 30px; }
    @media only screen and (max-width: 768px) {
      footer .footer_logo {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: clamp(12px, 2.5vw, 30px); } }
    @media only screen and (max-width: 768px) {
      footer .footer_logo {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: 30px;
        width: 40%;
        margin: auto; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    footer .footer_logo {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-top: clamp(12px, 2.5vw, 30px); } }

  footer .footer_branch {
    padding-right: 30px;
    border-right: 1px solid #4d4d4d; }
    @media only screen and (max-width: 768px) {
      footer .footer_branch {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-right: clamp(12px, 2.5vw, 30px); } }
    @media only screen and (max-width: 1080px) {
      footer .footer_branch {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        border-right: 0;
        padding-right: 0; } }
    footer .footer_branch .branch_list {
      display: inline-grid;
      grid-template-columns: max-content auto;
      gap: 25px 20px; }
      @media only screen and (max-width: 768px) {
        footer .footer_branch .branch_list {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          grid-template-columns: 1fr;
          gap: 10px;
          width: 100%; } }
      footer .footer_branch .branch_list .branch_name {
        font-weight: 500;
        border: 1px solid #fff;
        text-align: center;
        padding: 5px 20px;
        height: 100%;
        display: grid;
        align-items: center; }
      footer .footer_branch .branch_list .branch_info {
        text-align: left; }
        @media only screen and (max-width: 768px) {
          footer .footer_branch .branch_list .branch_info {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            margin-bottom: 20px;
            text-align: center; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    footer .footer_branch .branch_list .branch_info {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: 3.5vw; } }

    footer .footer_branch .access_link {
      display: inline-flex;
      align-items: center;
      border-bottom: 1px solid #fff;
      line-height: 1.2;
      gap: 5px; }
  footer #fnav {
    display: flex;
    flex-direction: column;
    height: 100%;
    letter-spacing: 0.1em;
    font-weight: 500;
    gap: 10px;
    white-space: nowrap;
    justify-content: space-between; }
    @media only screen and (max-width: 768px) {
      footer #fnav {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: 30px;
        justify-content: flex-start; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    footer #fnav {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-top: clamp(12px, 2.5vw, 30px); } }

    footer #fnav .fnav_child {
      font-size: 14px;
      font-size: 1.4rem;
      margin-top: 6px;
      margin-bottom: 3px;
      font-weight: 400; }
      footer #fnav .fnav_child li {
        margin-top: 8px;
        opacity: 0.8; }
        @media only screen and (max-width: 768px) {
          footer #fnav .fnav_child li {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            margin-top: 4px; } }
  footer .pagetop {
    background-color: #4d4d4d; }
    @media only screen and (max-width: 768px) {
      footer .pagetop {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        position: absolute;
        right: 0;
        bottom: 0; } }
    footer .pagetop a {
      display: block;
      background: #232358;
      writing-mode: vertical-rl;
      padding: 60px 60px;
      letter-spacing: 0.15em;
      font-size: 14px;
      font-size: 1.4rem; }
      @media only screen and (max-width: 768px) {
        footer .pagetop a {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding: clamp(30px, 5vw, 60px) clamp(30px, 5vw, 60px); } }
      footer .pagetop a span {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        transition: all 0.3s ease; }
      footer .pagetop a:hover {
        opacity: 1; }
        footer .pagetop a:hover span {
          transform: translateY(-8px); }

#copyright {
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 300;
  background-color: #4d4d4d;
  display: flex;
  justify-content: space-between;
  padding: 60px 60px;
  flex-wrap: wrap;
  gap: 30px; }
  #copyright:link, #copyright:hover, #copyright:visited, #copyright:active {
    color: #fff; }
  #copyright a:link, #copyright a:hover, #copyright a:visited, #copyright a:active {
    color: #fff; }
  @media only screen and (max-width: 768px) {
    #copyright {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding: clamp(30px, 5vw, 60px) clamp(30px, 5vw, 60px); } }
  @media only screen and (max-width: 768px) {
    #copyright {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      gap: clamp(12px, 2.5vw, 30px); } }
  #copyright > * {
    opacity: 0.5;
    text-align: center; }
    @media only screen and (max-width: 768px) {
      #copyright > * {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        width: 100%; } }
  #copyright .copyright_txt {
    letter-spacing: 0.1em; }

/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

アニメーションスタイル

//////////////////////////////*/
/* ふわふわするアニメーション */
@keyframes float-anime {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-20px); } }
/* このクラスをつけると回転を無限に繰り返します */
.anime-float {
  animation: 4s float-anime infinite; }

.fadeIn {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.7s;
  -ms-animation-duration: 1.7s;
  animation-duration: 1.7s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  visibility: visible !important;
  opacity: 0; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.fadeInBlur {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.7s;
  -ms-animation-duration: 1.7s;
  animation-duration: 1.7s;
  -webkit-animation-name: fadeInBlur;
  animation-name: fadeInBlur;
  visibility: visible !important;
  filter: blur(10px);
  opacity: 0; }

@-webkit-keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(10px); }
  100% {
    opacity: 1;
    filter: blur(0px); } }
@keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(10px); }
  100% {
    opacity: 1;
    filter: blur(0px); } }
.fadeInLeft {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.7s;
  -ms-animation-duration: 1.7s;
  animation-duration: 1.7s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  visibility: visible !important;
  opacity: 0; }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(40px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }
.fadeInRight {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.7s;
  -ms-animation-duration: 1.7s;
  animation-duration: 1.7s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  visibility: visible !important;
  opacity: 0; }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-40px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    transform: translateX(-30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }
.fadeInTop {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.7s;
  -ms-animation-duration: 1.7s;
  animation-duration: 1.7s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -webkit-animation-name: fadeInTop;
  animation-name: fadeInTop;
  visibility: visible !important;
  opacity: 0; }

@-webkit-keyframes fadeInTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }
@keyframes fadeInTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }
.fadeInBottom {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.7s;
  -ms-animation-duration: 1.7s;
  animation-duration: 1.7s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -webkit-animation-name: fadeInBottom;
  animation-name: fadeInBottom;
  visibility: visible !important;
  opacity: 0; }

@-webkit-keyframes fadeInBottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }
@keyframes fadeInBottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }
.fadeInBottomScale {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.7s;
  -ms-animation-duration: 1.7s;
  animation-duration: 1.7s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -webkit-animation-name: fadeInBottomScale;
  animation-name: fadeInBottomScale;
  visibility: visible !important;
  opacity: 0; }

@-webkit-keyframes fadeInBottomScale {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px) scale(0.9); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(1); } }
@keyframes fadeInBottomScale {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px) scale(0.9);
    -ms-transform: translateY(30px) scale(0.9);
    transform: translateY(30px) scale(0.9); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(1);
    -ms-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); } }
.animationBar {
  display: inline-block;
  position: relative;
  overflow: hidden; }

.animationBar span {
  animation: 0s fadeIn 0.5s ease forwards;
  opacity: 0;
  visibility: visible !important; }

.animationBar:before {
  content: "";
  width: 0%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: black;
  visibility: visible !important;
  animation: 1.7s animationBar 0s cubic-bezier(0.83, 0, 0.17, 1) forwards; }

@keyframes animationBar {
  0% {
    width: 0%; }
  40% {
    width: 100%; }
  60% {
    width: 100%; }
  100% {
    width: 0%; } }
.animationBar-wh {
  display: inline-block;
  position: relative;
  overflow: hidden; }

.animationBar-wh span {
  animation: 0s fadeIn 0.5s ease forwards;
  opacity: 0;
  visibility: visible !important; }

.animationBar-wh:before {
  content: "";
  width: 0%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: white;
  visibility: visible !important;
  animation: 1.7s animationBar-wh 0s cubic-bezier(0.83, 0, 0.17, 1) forwards; }

@keyframes animationBar-wh {
  0% {
    width: 0%; }
  40% {
    width: 100%; }
  60% {
    width: 100%; }
  100% {
    width: 0%; } }
.fadeInScale {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.7s;
  -ms-animation-duration: 1.7s;
  animation-duration: 1.7s;
  -webkit-animation-name: fadeInScale;
  animation-name: fadeInScale;
  visibility: visible !important;
  z-index: 1;
  opacity: 0; }

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(1.2); }
  100% {
    opacity: 1;
    transform: scale(1); } }
.animation-grad-left {
  overflow: hidden;
  position: relative;
  visibility: visible !important; }

.animation-grad-left:before {
  background: #000;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  opacity: 0.9; }

.fadeInGradLeft:before {
  animation: fadeInGradLeft 0.8s cubic-bezier(0.87, 0, 0.13, 1) forwards; }

@keyframes fadeInGradLeft {
  100% {
    transform: translateX(100%); } }
.animation-grad-right {
  overflow: hidden;
  position: relative;
  visibility: visible !important; }

.animation-grad-right:before {
  background: #000;
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
  opacity: 0.9; }

.fadeInGradRight:before {
  animation: fadeInGradRight 0.8s cubic-bezier(0.87, 0, 0.13, 1) forwards; }

@keyframes fadeInGradRight {
  100% {
    transform: translateX(-100%); } }
.fadeInSlant {
  animation-name: fadeSlant;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: 1.7s;
  animation-delay: 0.3s;
  transform-origin: 50% 0% 0px;
  transform: matrix3d(0.996195, 0, 0.0871557, -0.000217889, 0.00759612, 0.996195, -0.0868241, 0.00021706, -0.0868241, 0.0871557, 0.992404, -0.00248101, 0, 90, 0, 1);
  visibility: visible !important;
  opacity: 0; }

@-webkit-keyframes fadeInSlant {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }
@keyframes fadeInSlant {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }
.fadeInLeftTop {
  animation-fill-mode: both;
  animation-duration: 1.7s;
  animation-timing-function: ease;
  animation-name: fadeInLeftTop;
  visibility: visible !important;
  transform-origin: top right;
  opacity: 0; }

@keyframes fadeInLeftTop {
  0% {
    opacity: 0;
    transform: skewY(0deg) scale(1.2) translateY(-40px) translateX(-40px); }
  100% {
    opacity: 1;
    transform: skewY(0deg) scale(1) translateY(0px) translateX(0px); } }
.delay-1 {
  animation-delay: 0.15s; }

.delay-2 {
  animation-delay: 0.3s; }

.delay-3 {
  animation-delay: 0.45s; }

.delay-4 {
  animation-delay: 0.6s; }

.delay-5 {
  animation-delay: 0.75s; }

/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

コンポーネントスタイル

//////////////////////////////*/
.page_ttl {
  font-size: 22px;
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #232358;
  letter-spacing: 0.15em;
  position: relative;
  line-height: 1; }
  @media only screen and (max-width: 768px) {
    .page_ttl {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: 5.5vw; } }
  @media only screen and (max-width: 768px) {
    .page_ttl {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      font-size: 21px;
      font-size: 2.1rem; } }
  .page_ttl:before {
    content: "";
    display: inline-block;
    position: absolute;
    height: 20px;
    width: 10px;
    background: -webkit-linear-gradient(#232358 0%, #232358 50%, #a00000 50%, #a00000 100%);
    background: -o-linear-gradient(#232358 0%, #232358 50%, #a00000 50%, #a00000 100%);
    background: linear-gradient(#232358 0%, #232358 50%, #a00000 50%, #a00000 100%);
    top: 4px;
    left: 0; }
    @media only screen and (max-width: 768px) {
      .page_ttl:before {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        top: 0px; } }
  .page_ttl.off_ttl {
    color: #fff; }
    .page_ttl.off_ttl:link, .page_ttl.off_ttl:hover, .page_ttl.off_ttl:visited, .page_ttl.off_ttl:active {
      color: #fff; }
    .page_ttl.off_ttl a:link, .page_ttl.off_ttl a:hover, .page_ttl.off_ttl a:visited, .page_ttl.off_ttl a:active {
      color: #fff; }
    .page_ttl.off_ttl:before {
      background: -webkit-linear-gradient(#a00000 0%, #a00000 50%, #ffffff 50%, #ffffff 100%);
      background: -o-linear-gradient(#a00000 0%, #a00000 50%, #ffffff 50%, #ffffff 100%);
      background: linear-gradient(#a00000 0%, #a00000 50%, #ffffff 50%, #ffffff 100%); }
  .page_ttl span:before {
    content: attr(data-title);
    position: relative;
    font-family: var(--en-font-family);
    font-weight: 400;
    font-size: 48px;
    font-size: 4.8rem;
    letter-spacing: 0.15em;
    margin-left: 30px;
    margin-right: 20px; }
    @media only screen and (max-width: 768px) {
      .page_ttl span:before {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        font-size: 33px;
        font-size: 3.3rem;
        margin-left: 0px; } }
  @media only screen and (max-width: 768px) {
    .page_ttl span {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      display: flex;
      flex-direction: column;
      margin-left: 30px;
      gap: 8px; } }

.sub_ttl {
  font-size: 46px;
  font-size: 4.6rem;
  color: #232358;
  letter-spacing: 0.15em;
  position: relative;
  line-height: 1;
  margin-bottom: 40px; }
  @media only screen and (max-width: 768px) {
    .sub_ttl {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: 5.5vw; } }
  @media only screen and (max-width: 768px) {
    .sub_ttl {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      font-size: 36px;
      font-size: 3.6rem; } }
  .sub_ttl:before {
    content: attr(data-title);
    position: relative;
    font-family: var(--en-font-family);
    font-weight: 400;
    font-size: 16px;
    font-size: 1.6rem;
    display: block;
    margin-bottom: 10px;
    left: 3px; }
    @media only screen and (max-width: 768px) {
      .sub_ttl:before {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: 2vw; } }

.main_catch {
  font-size: 46px;
  font-size: 4.6rem;
  display: grid;
  line-height: 1.4;
  padding-bottom: 10px;
  margin-bottom: 20px;
  color: #232358;
  letter-spacing: 0.1em; }
  @media only screen and (max-width: 768px) {
    .main_catch {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-bottom: 2vw; } }
  @media only screen and (max-width: 768px) {
    .main_catch {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: 3.5vw; } }
  @media only screen and (max-width: 768px) {
    .main_catch {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      font-size: 28px;
      font-size: 2.8rem;
      margin-bottom: 0; } }
  .main_catch.off_catch {
    color: #ffffff; }
  .main_catch:before {
    content: "‘‘";
    font-size: 80px;
    font-size: 8rem;
    font-family: var(--en-font-family);
    font-weight: 400;
    color: #a00000;
    line-height: 0.2;
    margin-top: 0.35em;
    letter-spacing: -0.05em;
    text-indent: -0.05em; }
    @media only screen and (max-width: 768px) {
      .main_catch:before {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        font-size: 60px;
        font-size: 6rem; } }

.main_lead {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.15em;
  font-weight: 500; }
  @media only screen and (max-width: 768px) {
    .main_lead {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      font-size: 17px;
      font-size: 1.7rem;
      letter-spacing: 0.1em; } }

.section_header {
  text-align: center;
  padding-bottom: 60px;
  padding-top: 0; }
  @media only screen and (max-width: 768px) {
    .section_header {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-bottom: clamp(30px, 5vw, 60px); } }
  .section_header + .container {
    padding-top: 50px;
    margin-top: 10px; }
    @media only screen and (max-width: 768px) {
      .section_header + .container {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-top: clamp(20px, 5vw, 50px); } }
    @media only screen and (max-width: 768px) {
      .section_header + .container {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: 2vw; } }
  .section_header .section_ttl {
    padding-left: 0.15em; }
    .section_header .section_ttl:before {
      padding-left: 0.1em; }
  .section_header.light_bg {
    padding: 60px 60px; }
    @media only screen and (max-width: 768px) {
      .section_header.light_bg {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding: clamp(30px, 5vw, 60px) clamp(30px, 5vw, 60px); } }

.side_container {
  display: grid;
  grid-template-columns: 340px calc(100% - 340px); }
  @media only screen and (max-width: 1280px) {
    .side_container {
      /*　画面サイズ $npWidth まではここを読み込む　*/
      display: inherit; } }

.section_content_side {
  padding-top: 20px; }
  @media only screen and (max-width: 768px) {
    .section_content_side {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-top: 3.5vw; } }

.section_ttl {
  font-size: 46px;
  font-size: 4.6rem;
  letter-spacing: 0.15em;
  display: grid;
  line-height: 1.4; }
  @media only screen and (max-width: 1080px) {
    .section_ttl {
      /*　画面サイズ $tbWitdh まではここを読み込む　*/
      font-size: 32px;
      font-size: 3.2rem; } }
  .section_ttl:before {
    content: attr(data-title);
    position: relative;
    letter-spacing: 0.1em;
    font-family: var(--en-font-family);
    font-weight: 400;
    font-size: 16px;
    font-size: 1.6rem; }

.section_lead {
  font-weight: 500;
  font-size: 18px;
  font-size: 1.8rem;
  margin-top: 20px; }
  @media only screen and (max-width: 768px) {
    .section_lead {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-top: 3.5vw; } }

.content_ttl {
  display: flex;
  gap: 10px;
  font-size: 28px;
  font-size: 2.8rem; }
  @media only screen and (max-width: 768px) {
    .content_ttl {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      font-size: 22px;
      font-size: 2.2rem;
      align-items: flex-start;
      line-height: 1.25; }
      .content_ttl img {
        width: 7vw; } }

.content_lead {
  margin-top: 20px;
  margin-bottom: 40px;
  line-height: 1.8; }
  @media only screen and (max-width: 768px) {
    .content_lead {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-top: 3.5vw; } }
  @media only screen and (max-width: 768px) {
    .content_lead {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: 5.5vw; } }

.list_ttl {
  display: flex;
  font-size: 19px;
  font-size: 1.9rem;
  gap: 10px;
  margin-bottom: 20px;
  line-height: 1;
  align-items: center; }
  @media only screen and (max-width: 768px) {
    .list_ttl {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: 3.5vw; } }
  .list_ttl span {
    display: inline-grid;
    background-color: #a00000;
    color: #fff;
    height: 30px;
    width: 30px;
    place-items: center;
    padding-bottom: 2px; }

.list_body:not(:last-child) {
  margin-bottom: 50px; }
  @media only screen and (max-width: 768px) {
    .list_body:not(:last-child) {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: clamp(20px, 5vw, 50px); } }

.image_slider {
  display: grid;
  gap: 12px; }
  .image_slider .image_main {
    width: 100%;
    height: auto; }
  .image_slider .image_thumb {
    gap: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; }
  .image_slider li {
    cursor: pointer;
    opacity: 0.6;
    outline: 3px solid transparent;
    outline-offset: -2px;
    transition: all 0.3s ease; }
    .image_slider li.is-current, .image_slider li:active, .image_slider li:focus {
      opacity: 1;
      outline: 3px solid #a00000; }
    .image_slider li:hover {
      opacity: 1; }

.light_bg {
  background-color: #f4f4f7; }

#search :is(button,input,select,textarea) {
  appearance: none;
  border: none; }

::-webkit-outer-spin-button,
::-webkit-inner-spin-button {
  appearance: none; }

textarea {
  width: 100%; }

select,
input[type='text'],
input[type='number'],
input[type='search'],
input[type='password'],
input.guest-form,
button[type='submit'],
button[type='button'],
button[type='reset'],
input[type='tel'] {
  padding: 10px 15px;
  width: 100%;
  max-width: 500px; }

input.narrow {
  max-width: 200px; }

select,
textarea,
input[type='text'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='tel'] {
  border: 2px solid #c3c3c3; }
  select:focus,
  textarea:focus,
  input[type='text']:focus,
  input[type='number']:focus,
  input[type='search']:focus,
  input[type='password']:focus,
  input[type='tel']:focus {
    border: 2px #232358 solid;
    outline: none; }
  select::placeholder,
  textarea::placeholder,
  input[type='text']::placeholder,
  input[type='number']::placeholder,
  input[type='search']::placeholder,
  input[type='password']::placeholder,
  input[type='tel']::placeholder {
    color: #aaaaaa; }

button[type='submit'],
button[type='button'],
button[type='reset'] {
  background: #232358;
  padding: 15px;
  color: #ffffff;
  transition: all 0.3s ease; }

button + button {
  margin-top: 12px; }

form .require:after {
  content: "必須";
  color: red;
  font-size: 85%;
  padding-left: 10px;
  font-weight: 400; }

.main_btn {
  color: #232358;
  font-size: 20px;
  font-size: 2rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  background-image: url("../img/common/btn_arrow.svg");
  background-position: center right 10px;
  background-repeat: no-repeat;
  text-align: center;
  display: inline-flex;
  max-width: 270px;
  width: 100%;
  justify-content: center;
  gap: 30px;
  border-bottom: 5px solid #a00000;
  padding: 16px 20px; }
  .main_btn:link, .main_btn:hover, .main_btn:visited, .main_btn:active {
    color: #232358; }
  .main_btn a:link, .main_btn a:hover, .main_btn a:visited, .main_btn a:active {
    color: #232358; }
  @media only screen and (max-width: 768px) {
    .main_btn {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      gap: clamp(12px, 2.5vw, 30px); } }
  @media only screen and (max-width: 768px) {
    .main_btn {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      font-size: 17px;
      font-size: 1.7rem;
      padding: 15px 18px;
      display: flex;
      margin: auto; } }
  .main_btn:hover {
    background-position: center right 5px; }

.link_container {
  padding-top: 50px;
  padding-bottom: 50px; }
  @media only screen and (max-width: 768px) {
    .link_container {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-top: clamp(20px, 5vw, 50px); } }
  @media only screen and (max-width: 768px) {
    .link_container {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-bottom: clamp(20px, 5vw, 50px); } }

.page_link {
  display: flex;
  margin: auto;
  justify-content: center;
  overflow: hidden;
  flex-wrap: wrap;
  border-radius: 8px; }
  @media only screen and (max-width: 1080px) {
    .page_link {
      /*　画面サイズ $tbWitdh まではここを読み込む　*/
      gap: 5px;
      justify-content: flex-start; } }
  .page_link .page_btn {
    width: 20%; }
    .page_link .page_btn:has(+ .page_btn) {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px; }
    .page_link .page_btn + .page_btn {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px; }
    @media only screen and (max-width: 1080px) {
      .page_link .page_btn {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        width: calc(33% - 3px);
        border-radius: 8px !important; } }
    @media only screen and (max-width: 768px) {
      .page_link .page_btn {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        width: calc(50% - 3px); } }
    .page_link .page_btn:before {
      content: "";
      height: 50%;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background-color: #fff; }
      @media only screen and (max-width: 1080px) {
        .page_link .page_btn:before {
          /*　画面サイズ $tbWitdh まではここを読み込む　*/
          display: none; } }
    .page_link .page_btn + .page_btn:before {
      width: 1px; }

.page_btn {
  display: flex;
  color: #fff;
  background-color: #a00000;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-size: 19px;
  font-size: 1.9rem;
  padding: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
  position: relative; }
  .page_btn:link, .page_btn:hover, .page_btn:visited, .page_btn:active {
    color: #fff; }
  .page_btn a:link, .page_btn a:hover, .page_btn a:visited, .page_btn a:active {
    color: #fff; }
  @media only screen and (max-width: 768px) {
    .page_btn {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding: 3.5vw; } }
  @media only screen and (max-width: 768px) {
    .page_btn {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      font-size: 16px;
      font-size: 1.6rem; } }

.zip_btn {
  width: fit-content !important;
  border-radius: 3px;
  padding: 12px 18px !important;
  display: inline-block !important;
  font-size: 16px;
  font-size: 1.6rem; }
  @media only screen and (max-width: 1080px) {
    .zip_btn {
      /*　画面サイズ $tbWitdh まではここを読み込む　*/
      margin-bottom: 12px; } }

.base_table {
  width: 100%;
  border-top: 1px solid #c3c3c3; }
  .base_table > tbody > tr {
    border-bottom: 1px solid #c3c3c3; }
    .base_table > tbody > tr > th, .base_table > tbody > tr > td {
      padding: 30px 12px; }
      @media only screen and (max-width: 768px) {
        .base_table > tbody > tr > th, .base_table > tbody > tr > td {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding: 15px 0px; } }
    .base_table > tbody > tr > th {
      text-align: left;
      vertical-align: top;
      width: 20%; }
      @media only screen and (max-width: 768px) {
        .base_table > tbody > tr > th {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          width: 30%; } }

.table_child {
  width: 100%; }
  .table_child > tbody > tr {
    border-bottom: 1px dashed #c3c3c3; }
    .table_child > tbody > tr > td, .table_child > tbody > tr > th {
      padding: 25px 0;
      vertical-align: top; }
      @media only screen and (max-width: 768px) {
        .table_child > tbody > tr > td, .table_child > tbody > tr > th {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding: 10px 0; } }
  .table_child > tbody > tr:first-child > td, .table_child > tbody > tr:first-child > th {
    padding-top: 0; }
  .table_child > tbody > tr:last-child {
    border-bottom: 0; }
    .table_child > tbody > tr:last-child > td, .table_child > tbody > tr:last-child > th {
      padding-bottom: 0; }

/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

トップページ スタイル

//////////////////////////////*/
#hero_slide {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden; }
  #hero_slide:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    mix-blend-mode: multiply; }

#hero_slide img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease; }
  #hero_slide img.object_left {
    object-position: left; }
  #hero_slide img.object_right {
    object-position: right; }

body.onload #hero_slide img.active {
  opacity: 1; }

@media only screen and (max-width: 768px) {
  #page_home .main_catch {
    /*　画面サイズ $spWidth まではここを読み込む　*/
    margin-top: 20px;
    margin-bottom: 10px; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    #page_home .main_catch {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-top: 3.5vw; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    #page_home .main_catch {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: 2vw; } }

#page_home #hero {
  position: relative;
  background: #232358;
  height: 100svh;
  width: 100%;
  color: #ffffff; }
  @media only screen and (max-width: 768px) {
    #page_home #hero {
      /*　画面サイズ $spWidth まではここを読み込む　*/ } }
  #page_home #hero .hero_txt {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    text-align: right;
    height: 100%;
    font-size: 19px;
    font-size: 1.9rem;
    display: grid;
    grid-template-columns: 10% 90%; }
    #page_home #hero .hero_txt .hero_txt_left {
      background-size: cover;
      background-position: bottom right;
      position: relative;
      background-repeat: no-repeat;
      margin-right: -3%; }
      #page_home #hero .hero_txt .hero_txt_left:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 100%;
        right: 0;
        margin-top: -1px;
        transform: scaleY(-1);
        background-size: cover;
        background-position: top right;
        background-repeat: no-repeat; }
      #page_home #hero .hero_txt .hero_txt_left .triangle_bg,
      #page_home #hero .hero_txt .hero_txt_left .triangle_bg_bottom {
        width: calc(100% + 85vw); }
    #page_home #hero .hero_txt .hero_txt_right {
      background-position: bottom left;
      background-size: cover;
      background-repeat: no-repeat;
      text-align: right;
      padding-right: min(50px, 6vh);
      padding-bottom: min(50px, 6vh);
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      flex-direction: column;
      position: relative;
      align-self: flex-end;
      height: 100%; }
      @media only screen and (max-width: 768px) {
        #page_home #hero .hero_txt .hero_txt_right {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding-right: 5vw;
          padding-bottom: 8vw; } }
      #page_home #hero .hero_txt .hero_txt_right:after {
        content: "";
        display: block;
        position: absolute;
        height: 500%;
        width: 100%;
        top: 100%;
        margin-top: -1px;
        left: 0;
        transform: scaleY(-1);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 100%; }
    #page_home #hero .hero_txt .triangle_bg,
    #page_home #hero .hero_txt .triangle_bg_bottom {
      height: 85vw;
      max-height: 360px; }
      @media only screen and (max-width: 1080px) {
        #page_home #hero .hero_txt .triangle_bg,
        #page_home #hero .hero_txt .triangle_bg_bottom {
          /*　画面サイズ $tbWitdh まではここを読み込む　*/
          max-height: 400px; } }
      @media only screen and (max-width: 768px) {
        #page_home #hero .hero_txt .triangle_bg,
        #page_home #hero .hero_txt .triangle_bg_bottom {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          max-height: 85vw; } }
    #page_home #hero .hero_txt .triangle_bg {
      position: absolute;
      width: 100%;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 1; }
    #page_home #hero .hero_txt .triangle_bg_bottom {
      transform: scaleY(-1);
      position: absolute;
      width: 100%;
      right: 0;
      top: 100%;
      margin: auto;
      z-index: 1;
      margin-top: -1px; }
    #page_home #hero .hero_txt .hero_ttl {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      z-index: 100;
      position: relative;
      color: #ffffff;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 0.05em;
      font-size: 58px;
      font-size: 5.8rem;
      justify-content: flex-end;
      flex-direction: column;
      white-space: nowrap; }
      @media only screen and (max-width: 1080px) {
        #page_home #hero .hero_txt .hero_ttl {
          /*　画面サイズ $tbWitdh まではここを読み込む　*/
          font-size: 42px;
          font-size: 4.2rem; } }
      @media only screen and (max-width: 768px) {
        #page_home #hero .hero_txt .hero_ttl {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          font-size: 30px;
          font-size: 3rem;
          line-height: 1.3; } }
      #page_home #hero .hero_txt .hero_ttl:before {
        content: "’’";
        font-size: 100px;
        font-size: 10rem;
        font-family: var(--en-font-family);
        font-weight: 400;
        color: #232358;
        line-height: 0;
        letter-spacing: -0.05em;
        padding-right: 0.05em; }
        @media only screen and (max-width: 1080px) {
          #page_home #hero .hero_txt .hero_ttl:before {
            /*　画面サイズ $tbWitdh まではここを読み込む　*/
            font-size: 68px;
            font-size: 6.8rem; } }
        @media only screen and (max-width: 768px) {
          #page_home #hero .hero_txt .hero_ttl:before {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            font-size: 46px;
            font-size: 4.6rem; } }
    #page_home #hero .hero_txt .hero_lead {
      font-weight: 500;
      margin-top: 10px;
      z-index: 100;
      position: relative;
      padding-right: 0.5em;
      white-space: nowrap; }
      @media only screen and (max-width: 768px) {
        #page_home #hero .hero_txt .hero_lead {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          margin-top: 2vw; } }
      @media only screen and (max-width: 768px) {
        #page_home #hero .hero_txt .hero_lead {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding-top: 1%;
          font-size: 16px;
          font-size: 1.6rem;
          line-height: 1.6; }
          #page_home #hero .hero_txt .hero_lead .br_tb {
            display: none; } }
#page_home .scroll-bar {
  display: inline-flex;
  position: absolute;
  left: 50px;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  transform: rotate(-90deg);
  transform-origin: bottom left;
  font-family: var(--en-font-family);
  font-weight: 300;
  font-size: 13px;
  line-height: 0;
  letter-spacing: 0.2rem;
  z-index: 100;
  bottom: 7.5%; }
  @media only screen and (max-width: 1080px) {
    #page_home .scroll-bar {
      /*　画面サイズ $tbWitdh まではここを読み込む　*/
      left: 5vw;
      font-size: 12px; } }
  @media only screen and (max-width: 768px) {
    #page_home .scroll-bar {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      font-size: 10px; } }
  #page_home .scroll-bar > span {
    padding-left: 8px;
    padding-top: 3px; }
  #page_home .scroll-bar:before {
    content: "";
    display: inline-block;
    width: 100px;
    height: 1px;
    background-color: #fff; }
  #page_home .scroll-bar:after {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 1px solid #fff;
    border-radius: 9px;
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0;
    margin: auto;
    left: 95px;
    visibility: visible;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-duration: 1.6s;
    animation-name: circleScroll;
    transition: 0.3s; }
@keyframes circleScroll {
  0% {
    opacity: 0;
    left: 95px; }
  10% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0;
    left: -5px; } }
#page_home #about {
  background-color: #232358;
  color: #fff;
  padding-top: 40px;
  overflow: hidden; }
  #page_home #about:link, #page_home #about:hover, #page_home #about:visited, #page_home #about:active {
    color: #fff; }
  #page_home #about a:link, #page_home #about a:hover, #page_home #about a:visited, #page_home #about a:active {
    color: #fff; }
  @media only screen and (max-width: 768px) {
    #page_home #about {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-top: 5.5vw; } }
  #page_home #about .about_container {
    padding-bottom: 60px;
    z-index: 100;
    position: relative; }
    @media only screen and (max-width: 768px) {
      #page_home #about .about_container {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-bottom: clamp(30px, 5vw, 60px); } }
  #page_home #about .about_content {
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px; }
    @media only screen and (max-width: 768px) {
      #page_home #about .about_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: clamp(20px, 5vw, 50px); } }
    @media only screen and (max-width: 768px) {
      #page_home #about .about_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        gap: clamp(12px, 2.5vw, 30px); } }
    @media only screen and (max-width: 1080px) {
      #page_home #about .about_content {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        grid-template-columns: 1fr; } }
  #page_home #about .about_catch {
    color: #ffffff; }
  #page_home #about .about_lead {
    color: #ffffff; }
  #page_home #about .about_img {
    position: relative;
    width: 126%; }
    @media print, screen and (min-width: 1081px) {
      #page_home #about .about_img {
        /*　画面サイズ $tbWidth からはここを読み込む　*/
        max-width: 800px; } }
    @media only screen and (max-width: 1080px) {
      #page_home #about .about_img {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        width: 130%;
        height: 100vw;
        margin: 0 -15%; } }
    #page_home #about .about_img img {
      position: absolute;
      margin: auto;
      object-fit: contain; }
    #page_home #about .about_img .about01 {
      bottom: 70%;
      left: 0;
      right: 0;
      width: 80%;
      top: 0;
      object-fit: contain;
      height: 100%;
      object-position: bottom; }
      @media only screen and (max-width: 1080px) {
        #page_home #about .about_img .about01 {
          /*　画面サイズ $tbWitdh まではここを読み込む　*/
          top: 5%;
          height: auto;
          bottom: unset; } }
    #page_home #about .about_img .about02 {
      left: 0;
      top: 0;
      bottom: -20%;
      width: 30%; }
    #page_home #about .about_img .about03 {
      right: 0;
      bottom: 0;
      width: 62.5%;
      object-fit: cover;
      max-height: 50%;
      top: 50%; }
  #page_home #about .about_strength li {
    width: 100%; }
#page_home #service {
  background-image: url("../img/home/service_bg.jpg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-bottom: 60px; }
  #page_home #service .service_bg_top {
    width: 100%;
    margin-top: -1px; }
  #page_home #service .service_products {
    grid-template-columns: 52.5% 1fr; }
    @media only screen and (max-width: 1080px) {
      #page_home #service .service_products {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        padding-top: 20px; } }
  @media only screen and (max-width: 1080px) and (max-width: 768px) {
    #page_home #service .service_products {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-top: 3.5vw; } }
    @media only screen and (max-width: 1080px) {
        #page_home #service .service_products .service_img {
          margin-bottom: 40px; } }
    @media only screen and (max-width: 1080px) and (max-width: 768px) {
      #page_home #service .service_products .service_img {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: 5.5vw; } }
    @media only screen and (max-width: 1080px) {
        #page_home #service .service_products .sub_ttl {
          margin-top: 20px; } }
    @media only screen and (max-width: 1080px) and (max-width: 768px) {
      #page_home #service .service_products .sub_ttl {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: 3.5vw; } }

  #page_home #service .service_equipment {
    grid-template-columns: 1fr 52.5%;
    padding-top: 40px; }
    @media only screen and (max-width: 768px) {
      #page_home #service .service_equipment {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-top: 5.5vw; } }
    @media only screen and (max-width: 768px) {
      #page_home #service .service_equipment {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-top: 0; } }
  #page_home #service .service_content {
    margin-top: 100px;
    display: grid;
    gap: 60px;
    place-items: center; }
    @media only screen and (max-width: 768px) {
      #page_home #service .service_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: clamp(50px, 10vw, 60px); } }
    @media only screen and (max-width: 768px) {
      #page_home #service .service_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        gap: clamp(30px, 5vw, 60px); } }
    @media only screen and (max-width: 1080px) {
      #page_home #service .service_content {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        grid-template-columns: 100%; } }
    @media only screen and (max-width: 768px) {
      #page_home #service .service_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: 0; } }
  #page_home #service .service_body {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 40px; }
    @media only screen and (max-width: 768px) {
      #page_home #service .service_body {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: 5.5vw; } }
  #page_home #service .service_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    text-align: center;
    width: fit-content;
    font-weight: 500;
    margin-bottom: 40px; }
    @media only screen and (max-width: 768px) {
      #page_home #service .service_list {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: 5.5vw; } }
    @media only screen and (max-width: 768px) {
      #page_home #service .service_list {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr; } }
    #page_home #service .service_list a {
      border: 1px solid #a00000;
      padding: 6px 28px;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.4; }
      #page_home #service .service_list a:link, #page_home #service .service_list a:visited, #page_home #service .service_list a:hover, #page_home #service .service_list a:active {
        color: #a00000; }
      #page_home #service .service_list a:hover {
        background-color: #a00000;
        color: #ffffff; }
  #page_home #service .service_img {
    position: relative;
    height: fit-content; }
    #page_home #service .service_img img {
      box-shadow: 5px 10px 25px 0px rgba(35, 35, 88, 0.275); }
    #page_home #service .service_img .absolute_img {
      position: absolute;
      top: 52.5%;
      right: 70%;
      height: 60%;
      object-fit: contain; }
    #page_home #service .service_img:before {
      font-size: 100px;
      font-size: 10rem;
      font-family: var(--en-font-family);
      font-weight: 400;
      position: absolute;
      color: #a00000;
      z-index: 100;
      top: 0; }
      @media only screen and (max-width: 768px) {
        #page_home #service .service_img:before {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          font-size: 60px;
          font-size: 6rem; } }
    #page_home #service .service_img:after {
      content: "";
      position: absolute;
      background-color: #232358;
      width: 100vw;
      height: 1px;
      z-index: 100;
      top: -15px; }
      @media only screen and (max-width: 768px) {
        #page_home #service .service_img:after {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          top: -2.5%; } }
  #page_home #service .service_products .service_img:before {
    content: "01";
    left: 0;
    transform: translateX(-40%) translateY(-50%); }
  #page_home #service .service_products .service_img:after {
    right: calc(100% + 3em ); }
    @media only screen and (max-width: 768px) {
      #page_home #service .service_products .service_img:after {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        right: calc(100% + 1.5em ); } }
  #page_home #service .service_equipment .service_img:before {
    content: "02";
    right: 0;
    transform: translateX(27.5%) translateY(-50%);
    letter-spacing: -0.05em; }
  #page_home #service .service_equipment .service_img:after {
    left: calc(100% + 3em ); }
    @media only screen and (max-width: 768px) {
      #page_home #service .service_equipment .service_img:after {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        left: calc(100% + 1.5em ); } }
  @media only screen and (max-width: 768px) {
    #page_home #service {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-bottom: clamp(30px, 5vw, 60px); } }
#page_home #company {
  position: relative;
  padding-bottom: 60px;
  margin-bottom: -60px; }
  @media only screen and (max-width: 768px) {
    #page_home #company {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-bottom: clamp(30px, 5vw, 60px); } }
  @media only screen and (max-width: 768px) {
    #page_home #company {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: clamp(-30px, -5vw, -60px); } }
  #page_home #company:before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 50%;
    background-color: #a00000;
    transform: skewY(-4deg);
    transform-origin: bottom left;
    left: 0;
    top: 0; }
  #page_home #company:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    /*四角形を傾けます*/
    transform: skewY(-3deg);
    transform-origin: bottom left;
    z-index: 2;
    width: 100%;
    height: calc(100% + 5vw);
    background-image: url("../img/home/company_bg.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top -100px;
    background-color: #232358; }
  #page_home #company .company_container {
    z-index: 100;
    position: relative;
    padding-bottom: 0; }
  #page_home #company .company_head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  #page_home #company .company_lead {
    padding-left: clamp(20px, 5vw, 60px); }
  #page_home #company .company_content {
    display: inline-grid;
    width: auto;
    margin-top: 40px;
    padding-top: 65px;
    padding-bottom: 100px;
    padding-left: clamp(20px, 5vw, 60px);
    padding-right: clamp(20px, 5vw, 60px);
    position: relative;
    max-width: 1060px; }
    @media only screen and (max-width: 768px) {
      #page_home #company .company_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: 5.5vw; } }
    @media only screen and (max-width: 768px) {
      #page_home #company .company_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-top: 8vw; } }
    @media only screen and (max-width: 768px) {
      #page_home #company .company_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-bottom: clamp(50px, 10vw, 60px); } }
    @media only screen and (max-width: 768px) {
      #page_home #company .company_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: 40px;
        padding-bottom: 80px; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    #page_home #company .company_content {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: 5.5vw; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    #page_home #company .company_content {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-bottom: 9.5vw; } }

    #page_home #company .company_content:before {
      content: "";
      background-color: white;
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1;
      height: 100%;
      width: 100vw; }
      @media only screen and (max-width: 768px) {
        #page_home #company .company_content:before {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          width: 100%;
          margin-bottom: 30px; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    #page_home #company .company_content:before {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: clamp(12px, 2.5vw, 30px); } }

  #page_home #company .company_body {
    font-size: 18px;
    font-size: 1.8rem;
    margin-bottom: 40px;
    line-height: 2;
    font-weight: 500; }
    @media only screen and (max-width: 768px) {
      #page_home #company .company_body {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: 5.5vw; } }
    @media only screen and (max-width: 768px) {
      #page_home #company .company_body {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        font-size: 17px;
        font-size: 1.7rem;
        line-height: 1.8; } }
  #page_home #company .company_list {
    display: flex;
    gap: 15px 30px;
    width: 100%;
    flex-wrap: wrap; }
    @media only screen and (max-width: 768px) {
      #page_home #company .company_list {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        grid-template-columns: 1fr 1fr; } }
#page_home #recruit {
  background-color: #fff;
  background-image: url("../img/home/recruit_bg_under.webp");
  position: relative;
  z-index: 100;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top -3px; }
  #page_home #recruit .recruit_bg {
    z-index: 100;
    background-image: url("../img/home/recruit_bg.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; }
    @media only screen and (max-width: 768px) {
      #page_home #recruit .recruit_bg {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        background-size: auto 130%;
        background-position: left 60% top 30%; } }
  #page_home #recruit .recruit_body {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 40px; }
    @media only screen and (max-width: 768px) {
      #page_home #recruit .recruit_body {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: 5.5vw; } }
    @media only screen and (max-width: 768px) {
      #page_home #recruit .recruit_body {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        letter-spacing: 0.05em;
        line-height: 1.8; } }

/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

下層スタイル

//////////////////////////////*/
.container_nest {
  padding-left: clamp(20px, 5vw, 60px);
  padding-right: clamp(20px, 5vw, 60px); }
  @media only screen and (max-width: 768px) {
    .container_nest {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-top: 30px; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    .container_nest {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-top: clamp(12px, 2.5vw, 30px); } }

.container_nest + .container_nest {
  margin-top: 100px; }
  @media only screen and (max-width: 768px) {
    .container_nest + .container_nest {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-top: clamp(50px, 10vw, 60px); } }

#page_header {
  background-color: #232358;
  background-image: url("../img/common/page_header.svg"), url("../img/common/header_company.jpg");
  background-position: right bottom, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 35%, cover;
  position: relative;
  padding: 60px 60px; }
  @media only screen and (max-width: 768px) {
    #page_header {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding: clamp(30px, 5vw, 60px) clamp(30px, 5vw, 60px); } }
  #page_header .page_ttl {
    margin-top: 180px; }
    @media only screen and (max-width: 768px) {
      #page_header .page_ttl {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: 105px; } }

.about_strength {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr 1fr 1fr 1fr; }
  @media only screen and (max-width: 1280px) {
    .about_strength {
      /*　画面サイズ $npWidth まではここを読み込む　*/
      grid-template-columns: 1fr 1fr; } }
  @media only screen and (max-width: 768px) {
    .about_strength {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      grid-template-columns: 1fr; } }
  .about_strength li {
    background: #fff;
    color: #232358;
    text-align: center;
    font-weight: 600;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 5px 10px 25px 0px rgba(35, 35, 88, 0.275); }
    @media only screen and (max-width: 768px) {
      .about_strength li {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-top: 3.5vw; } }
    @media only screen and (max-width: 768px) {
      .about_strength li {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-bottom: 3.5vw; } }
    @media only screen and (max-width: 768px) {
      .about_strength li {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        width: 90%;
        margin: auto; } }
    .about_strength li figure {
      margin: 10px; }
      @media only screen and (max-width: 768px) {
        .about_strength li figure {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          margin-top: 2vw; } }
      @media only screen and (max-width: 768px) {
        .about_strength li figure > img {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          width: 40%; } }
    .about_strength li p {
      margin: 10px;
      line-height: 1.4; }
      @media only screen and (max-width: 768px) {
        .about_strength li p {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          margin-top: 2vw; } }
    .about_strength li b {
      font-size: 19.5px;
      font-size: 1.95rem; }
      @media only screen and (max-width: 768px) {
        .about_strength li b {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          font-size: 24px;
          font-size: 2.4rem; } }
    .about_strength li .triangle_top {
      position: absolute;
      top: 0;
      left: 0; }
    .about_strength li .triangle_bottom {
      position: absolute;
      bottom: 0;
      right: 0; }
    .about_strength li .line_top {
      position: absolute;
      top: 13px;
      left: 0;
      transform: translateX(-50%); }
    .about_strength li .line_bottom {
      position: absolute;
      bottom: 13px;
      right: 0;
      transform: translateX(50%); }

/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

下層スタイル

//////////////////////////////*/
#page_service #page_header {
  background-image: url("../img/common/page_header.svg"), url("../img/common/header_service.jpg"); }
#page_service #about {
  overflow: hidden; }
  #page_service #about .about_header {
    background-color: #f4f4f7; }
  #page_service #about .about_container:first-child {
    padding-bottom: 0;
    overflow: hidden; }
  #page_service #about .about_container:nth-child(2) {
    padding-top: 0;
    margin-top: 40px; }
    @media print, screen and (min-width: 1081px) {
      #page_service #about .about_container:nth-child(2) {
        /*　画面サイズ $tbWidth からはここを読み込む　*/
        margin-top: -20px; } }
    @media only screen and (max-width: 768px) {
      #page_service #about .about_container:nth-child(2) {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: 5.5vw; } }
  #page_service #about .about_intro {
    display: flex;
    gap: 30px;
    justify-content: space-between; }
    @media only screen and (max-width: 1080px) {
      #page_service #about .about_intro {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 20px; } }
    @media only screen and (max-width: 768px) {
      #page_service #about .about_intro .main_catch {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        font-size: 32px;
        font-size: 3.2rem; } }
    #page_service #about .about_intro .main_lead {
      font-size: 20px;
      font-size: 2rem; }
      @media print, screen and (min-width: 1081px) {
        #page_service #about .about_intro .main_lead {
          /*　画面サイズ $tbWidth からはここを読み込む　*/
          margin-top: 46px; } }
      @media only screen and (max-width: 768px) {
        #page_service #about .about_intro .main_lead {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          font-size: 17px;
          font-size: 1.7rem; } }
  #page_service #about .about_strength {
    padding-bottom: 20px; }
    @media only screen and (max-width: 768px) {
      #page_service #about .about_strength {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-bottom: 3.5vw; } }
    #page_service #about .about_strength li {
      background-color: #e7e9f4 !important; }
  #page_service #about .scroll_txt {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    width: 100%; }
    #page_service #about .scroll_txt .scroll_content {
      display: flex;
      animation: scroll-left 60s linear infinite;
      margin-top: 20px; }
      @media only screen and (max-width: 768px) {
        #page_service #about .scroll_txt .scroll_content {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          margin-top: 3.5vw; } }
      #page_service #about .scroll_txt .scroll_content li {
        display: flex;
        width: 150vw;
        height: auto;
        position: relative;
        bottom: -3px;
        padding-right: 5vw; }
        @media only screen and (max-width: 1080px) {
          #page_service #about .scroll_txt .scroll_content li {
            /*　画面サイズ $tbWitdh まではここを読み込む　*/
            width: 250vw;
            padding-right: 7vw; } }
        @media only screen and (max-width: 768px) {
          #page_service #about .scroll_txt .scroll_content li {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            width: 300vw;
            padding-right: 10vw; } }
  #page_service #about .scroll_img {
    width: 100vw;
    margin-left: calc((50vw - 50%) * -1);
    display: flex;
    justify-content: flex-end;
    margin-top: 60px;
    margin-bottom: 60px;
    gap: 30px; }
    @media only screen and (max-width: 768px) {
      #page_service #about .scroll_img {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: clamp(30px, 5vw, 60px); } }
    @media only screen and (max-width: 768px) {
      #page_service #about .scroll_img {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: clamp(30px, 5vw, 60px); } }
    @media only screen and (max-width: 768px) {
      #page_service #about .scroll_img {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        gap: clamp(12px, 2.5vw, 30px); } }
    #page_service #about .scroll_img .scroll_content {
      display: flex;
      animation: scroll-right 60s linear infinite;
      gap: 30px; }
      @media only screen and (max-width: 768px) {
        #page_service #about .scroll_img .scroll_content {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          gap: clamp(12px, 2.5vw, 30px); } }
      #page_service #about .scroll_img .scroll_content li {
        width: 35vw;
        height: auto; }
        @media only screen and (max-width: 768px) {
          #page_service #about .scroll_img .scroll_content li {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            width: 50vw; } }
        #page_service #about .scroll_img .scroll_content li:nth-child(2n + 1) {
          padding-top: 30px; }
          @media only screen and (max-width: 768px) {
            #page_service #about .scroll_img .scroll_content li:nth-child(2n + 1) {
              /*　画面サイズ $spWidth まではここを読み込む　*/
              padding-top: clamp(12px, 2.5vw, 30px); } }
        #page_service #about .scroll_img .scroll_content li:nth-child(2n + 2) {
          padding-bottom: 30px; }
          @media only screen and (max-width: 768px) {
            #page_service #about .scroll_img .scroll_content li:nth-child(2n + 2) {
              /*　画面サイズ $spWidth まではここを読み込む　*/
              padding-bottom: clamp(12px, 2.5vw, 30px); } }
        #page_service #about .scroll_img .scroll_content li img {
          box-shadow: 5px 10px 25px 0px rgba(35, 35, 88, 0.275); }
@keyframes scroll-left {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }
@keyframes scroll-right {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(100%); } }
#page_service #equipment .equipment_list {
  display: grid;
  grid-template-columns: auto max-content;
  border: 1px solid #b2b2b2;
  border-bottom: 0px;
  margin: -0.5px 0; }
  #page_service #equipment .equipment_list dt {
    border-right: 1px solid #c3c3c3; }
  #page_service #equipment .equipment_list dt, #page_service #equipment .equipment_list dd {
    border-bottom: 1px solid #c3c3c3;
    padding: 15px 25px; }

/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

下層スタイル

//////////////////////////////*/
#page_company {
  /*============================
  #message
  ============================*/
  /*============================
  #outline
  ============================*/
  /*============================
  #history
  ============================*/
  /*============================
  #sdgs
  ============================*/
  /*============================
  #access
  ============================*/ }
  #page_company #page_header {
    background-image: url("../img/common/page_header.svg"), url("../img/common/header_company.jpg"); }
  #page_company #message .message_content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 60px;
    align-items: flex-start; }
    @media only screen and (max-width: 768px) {
      #page_company #message .message_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        gap: clamp(30px, 5vw, 60px); } }
    @media only screen and (max-width: 768px) {
      #page_company #message .message_content {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        grid-template-columns: 100%; } }
    #page_company #message .message_content .message_body {
      line-height: 2.2;
      text-align: justify;
      font-size: 18px;
      font-size: 1.8rem; }
      @media only screen and (max-width: 768px) {
        #page_company #message .message_content .message_body {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          line-height: 1.8;
          font-size: 17px;
          font-size: 1.7rem; } }
    #page_company #message .message_content .message_img {
      display: flex;
      flex-direction: column;
      gap: 20px; }
      #page_company #message .message_content .message_img > img {
        max-height: 85vw;
        width: auto;
        margin: auto;
        object-fit: cover; }
      #page_company #message .message_content .message_img .message_name {
        display: inline-flex;
        align-items: flex-end;
        gap: 20px; }
        @media only screen and (max-width: 768px) {
          #page_company #message .message_content .message_img .message_name {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            justify-content: center; } }
  #page_company #message .philosophy {
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(24, 32, 102, 0.1);
    padding: 60px 60px;
    margin-top: 60px; }
    @media only screen and (max-width: 768px) {
      #page_company #message .philosophy {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding: clamp(30px, 5vw, 60px) clamp(30px, 5vw, 60px); } }
    @media only screen and (max-width: 768px) {
      #page_company #message .philosophy {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: clamp(30px, 5vw, 60px); } }
    #page_company #message .philosophy .philosophy_ttl {
      font-size: 26px;
      font-size: 2.6rem;
      letter-spacing: 0.15em;
      border-bottom: 3px solid #232358;
      line-height: 1;
      position: relative; }
      @media only screen and (max-width: 768px) {
        #page_company #message .philosophy .philosophy_ttl {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          font-size: 22px;
          font-size: 2.2rem; } }
      #page_company #message .philosophy .philosophy_ttl span {
        display: inline-block;
        border-bottom: 3px solid #a00000;
        line-height: 1;
        margin-bottom: -3px;
        padding-bottom: 8px; }
      #page_company #message .philosophy .philosophy_ttl img {
        position: absolute;
        right: 0;
        transform: scale(1.8);
        transform-origin: center right;
        bottom: -2px; }
        @media only screen and (max-width: 768px) {
          #page_company #message .philosophy .philosophy_ttl img {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            max-width: 33%; } }
    #page_company #message .philosophy .philosophy_catch {
      font-size: 39px;
      font-size: 3.9rem;
      display: table;
      justify-content: center;
      position: relative;
      margin: auto;
      line-height: 1.5;
      padding: 0 15px;
      margin-top: 50px;
      margin-bottom: 30px;
      text-align: center; }
      @media only screen and (max-width: 768px) {
        #page_company #message .philosophy .philosophy_catch {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          font-size: 30px;
          font-size: 3rem; } }
      #page_company #message .philosophy .philosophy_catch:before, #page_company #message .philosophy .philosophy_catch:after {
        content: "";
        display: grid;
        height: 90%;
        width: 15px;
        position: absolute; }
      #page_company #message .philosophy .philosophy_catch:before {
        border-top: 2px solid #a00000;
        border-left: 2px solid #a00000;
        top: 0;
        left: 0; }
      #page_company #message .philosophy .philosophy_catch:after {
        border-bottom: 2px solid #a00000;
        border-right: 2px solid #a00000;
        bottom: 0;
        right: 0; }
    #page_company #message .philosophy .philosophy_body {
      font-size: 18px;
      font-size: 1.8rem;
      line-height: 1.8; }
      @media only screen and (max-width: 768px) {
        #page_company #message .philosophy .philosophy_body {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          font-size: 17px;
          font-size: 1.7rem; } }
  #page_company #sdgs .sdgs_logo {
    text-align: center; }
  #page_company #sdgs .sdgs_lead {
    text-align: center;
    font-size: 18px;
    font-size: 1.8rem;
    margin-top: 20px;
    margin-bottom: 40px; }
    @media only screen and (max-width: 768px) {
      #page_company #sdgs .sdgs_lead {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-top: 3.5vw; } }
    @media only screen and (max-width: 768px) {
      #page_company #sdgs .sdgs_lead {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: 5.5vw; } }
  #page_company #sdgs .sdgs_list {
    border-top: 1px solid #c3c3c3; }
    #page_company #sdgs .sdgs_list li {
      border-bottom: 1px solid #c3c3c3;
      padding: 30px 15px;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      align-items: center; }
      @media only screen and (max-width: 768px) {
        #page_company #sdgs .sdgs_list li {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          gap: clamp(12px, 2.5vw, 30px); } }
    #page_company #sdgs .sdgs_list .sdgs_body {
      font-weight: 500; }
  #page_company #access .access_list {
    display: grid;
    gap: 60px; }
    @media only screen and (max-width: 768px) {
      #page_company #access .access_list {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        gap: clamp(30px, 5vw, 60px); } }
    #page_company #access .access_list li {
      display: grid; }
      #page_company #access .access_list li .access_content {
        display: grid;
        grid-template-columns: 55% 45%;
        gap: 15px 25px; }
        @media only screen and (max-width: 1080px) {
          #page_company #access .access_list li .access_content {
            /*　画面サイズ $tbWitdh まではここを読み込む　*/
            grid-template-columns: 100%; } }
      #page_company #access .access_list li .access_map {
        display: grid; }
      #page_company #access .access_list li .access_ttl {
        font-size: 20px;
        font-size: 2rem;
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 20px; }
        @media only screen and (max-width: 768px) {
          #page_company #access .access_list li .access_ttl {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            margin-bottom: 3.5vw; } }
      #page_company #access .access_list li .access_add {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap; }
        #page_company #access .access_list li .access_add img {
          height: 60%;
          width: auto;
          margin-right: 8px;
          max-width: 15px; }
      #page_company #access .access_list li iframe {
        border: 2px solid #fff;
        height: 100%;
        width: 100%;
        background-color: #fff; }
        @media only screen and (max-width: 768px) {
          #page_company #access .access_list li iframe {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            height: 60vw; } }

/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

下層スタイル

//////////////////////////////*/
#page_recruit {
  /*============================
  #personality
  ============================*/
  /*============================
  #interview
  ============================*/
  /*============================
  #flow
  ============================*/
  /*============================
  #requirements
  ============================*/ }
  #page_recruit #page_header {
    background-image: url("../img/common/page_header.svg"), url("../img/common/header_recruit.jpg"); }
  #page_recruit .side_container {
    display: grid;
    grid-template-columns: 340px calc(100% - 410px);
    column-gap: 70px; }
    @media only screen and (max-width: 1280px) {
      #page_recruit .side_container {
        /*　画面サイズ $npWidth まではここを読み込む　*/
        grid-template-columns: 1fr; } }
  @media only screen and (max-width: 768px) {
    #page_recruit #personality .person_list {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      grid-template-columns: 25% 1fr; } }
  #page_recruit #personality .person_list li {
    display: grid;
    grid-template-columns: auto 1fr;
    border-bottom: 1px solid #c3c3c3;
    align-items: center;
    gap: 30px;
    padding-top: 40px;
    padding-bottom: 40px; }
    @media only screen and (max-width: 768px) {
      #page_recruit #personality .person_list li {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        gap: clamp(12px, 2.5vw, 30px); } }
    @media only screen and (max-width: 768px) {
      #page_recruit #personality .person_list li {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-top: 5.5vw; } }
    @media only screen and (max-width: 768px) {
      #page_recruit #personality .person_list li {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        padding-bottom: 5.5vw; } }
    @media only screen and (max-width: 768px) {
      #page_recruit #personality .person_list li {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        grid-template-columns: 1fr; } }
    #page_recruit #personality .person_list li:first-child {
      padding-top: 0; }
  @media only screen and (max-width: 768px) {
    #page_recruit #personality .person_list .person_img {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      text-align: center; } }
  #page_recruit #personality .person_list .person_catch {
    font-size: 30px;
    font-size: 3rem;
    margin-bottom: 10px; }
    @media only screen and (max-width: 768px) {
      #page_recruit #personality .person_list .person_catch {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: 2vw; } }
    @media only screen and (max-width: 768px) {
      #page_recruit #personality .person_list .person_catch {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        font-size: 25px;
        font-size: 2.5rem;
        line-height: 1.6;
        text-align: center; } }
  #page_recruit #interview .interview_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px; }
    @media only screen and (max-width: 768px) {
      #page_recruit #interview .interview_list {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        gap: clamp(30px, 5vw, 60px); } }
    @media only screen and (max-width: 768px) {
      #page_recruit #interview .interview_list {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        grid-template-columns: 1fr; } }
    #page_recruit #interview .interview_list .interview_content {
      display: grid;
      grid-template-rows: auto 1fr;
      background: #232358;
      border-radius: 15px;
      padding: 10px;
      gap: 30px; }
      @media only screen and (max-width: 768px) {
        #page_recruit #interview .interview_list .interview_content {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          gap: clamp(12px, 2.5vw, 30px); } }
      #page_recruit #interview .interview_list .interview_content .interview_header {
        color: #fff;
        padding: 30px 30px;
        padding-bottom: 0;
        display: grid;
        grid-template-columns: 1fr 40%;
        gap: 30px; }
        #page_recruit #interview .interview_list .interview_content .interview_header:link, #page_recruit #interview .interview_list .interview_content .interview_header:hover, #page_recruit #interview .interview_list .interview_content .interview_header:visited, #page_recruit #interview .interview_list .interview_content .interview_header:active {
          color: #fff; }
        #page_recruit #interview .interview_list .interview_content .interview_header a:link, #page_recruit #interview .interview_list .interview_content .interview_header a:hover, #page_recruit #interview .interview_list .interview_content .interview_header a:visited, #page_recruit #interview .interview_list .interview_content .interview_header a:active {
          color: #fff; }
        @media only screen and (max-width: 768px) {
          #page_recruit #interview .interview_list .interview_content .interview_header {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            padding: clamp(12px, 2.5vw, 30px) clamp(12px, 2.5vw, 30px); } }
        @media only screen and (max-width: 768px) {
          #page_recruit #interview .interview_list .interview_content .interview_header {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            gap: clamp(12px, 2.5vw, 30px); } }
        @media only screen and (max-width: 1080px) {
          #page_recruit #interview .interview_list .interview_content .interview_header {
            /*　画面サイズ $tbWitdh まではここを読み込む　*/
            grid-template-columns: 1fr;
            gap: 60px; } }
  @media only screen and (max-width: 1080px) and (max-width: 768px) {
    #page_recruit #interview .interview_list .interview_content .interview_header {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      gap: clamp(30px, 5vw, 60px); } }

        #page_recruit #interview .interview_list .interview_content .interview_header .interview_txt .interview_num {
          color: #aaaaaa;
          font-family: var(--en-font-family);
          font-weight: 400;
          font-size: 29px;
          font-size: 2.9rem;
          margin-bottom: 10px;
          font-weight: 300;
          letter-spacing: 0.1em; }
          @media only screen and (max-width: 768px) {
            #page_recruit #interview .interview_list .interview_content .interview_header .interview_txt .interview_num {
              /*　画面サイズ $spWidth まではここを読み込む　*/
              margin-bottom: 2vw; } }
          @media only screen and (max-width: 768px) {
            #page_recruit #interview .interview_list .interview_content .interview_header .interview_txt .interview_num {
              /*　画面サイズ $spWidth まではここを読み込む　*/
              font-size: 22px;
              font-size: 2.2rem; } }
        #page_recruit #interview .interview_list .interview_content .interview_header .interview_txt .interview_data {
          font-size: 18px;
          font-size: 1.8rem;
          line-height: 1.5; }
        #page_recruit #interview .interview_list .interview_content .interview_header .interview_txt .interview_name {
          line-height: 1;
          margin-top: 10px; }
          @media only screen and (max-width: 768px) {
            #page_recruit #interview .interview_list .interview_content .interview_header .interview_txt .interview_name {
              /*　画面サイズ $spWidth まではここを読み込む　*/
              margin-top: 2vw; } }
          #page_recruit #interview .interview_list .interview_content .interview_header .interview_txt .interview_name b {
            font-size: 30px;
            font-size: 3rem;
            font-weight: 500;
            margin-right: 3px; }
        #page_recruit #interview .interview_list .interview_content .interview_header .interview_img img {
          border-radius: 5px; }
      #page_recruit #interview .interview_list .interview_content .interview_body {
        background: #e7e9f4;
        border-radius: 8px;
        display: grid;
        height: 100%;
        padding: 30px 30px; }
        @media only screen and (max-width: 768px) {
          #page_recruit #interview .interview_list .interview_content .interview_body {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            padding: clamp(12px, 2.5vw, 30px) clamp(12px, 2.5vw, 30px); } }
        #page_recruit #interview .interview_list .interview_content .interview_body .interview_faq dt {
          color: #232358;
          font-weight: 600; }
          #page_recruit #interview .interview_list .interview_content .interview_body .interview_faq dt:before {
            content: "Q. "; }
        #page_recruit #interview .interview_list .interview_content .interview_body .interview_faq dd:not(:last-child) {
          margin-bottom: 20px; }
          @media only screen and (max-width: 768px) {
            #page_recruit #interview .interview_list .interview_content .interview_body .interview_faq dd:not(:last-child) {
              /*　画面サイズ $spWidth まではここを読み込む　*/
              margin-bottom: 3.5vw; } }
  #page_recruit #flow .flow_list {
    display: grid;
    gap: 60px;
    grid-template-columns: 1fr 1fr; }
    @media only screen and (max-width: 768px) {
      #page_recruit #flow .flow_list {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        gap: clamp(30px, 5vw, 60px); } }
    @media only screen and (max-width: 1080px) {
      #page_recruit #flow .flow_list {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        grid-template-columns: 1fr; } }
    #page_recruit #flow .flow_list .flow_content {
      display: grid;
      overflow: hidden;
      grid-template-rows: auto 1fr;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0px 0px 10px 0px rgba(24, 32, 102, 0.1); }
    #page_recruit #flow .flow_list .flow_ttl {
      background-color: #232358;
      color: #ffffff;
      padding-left: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 22px;
      font-size: 2.2rem;
      position: relative;
      line-height: 1.5; }
      @media only screen and (max-width: 768px) {
        #page_recruit #flow .flow_list .flow_ttl {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding-left: clamp(12px, 2.5vw, 30px); } }
      @media only screen and (max-width: 768px) {
        #page_recruit #flow .flow_list .flow_ttl {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          font-size: 19px;
          font-size: 1.9rem;
          padding-left: 40px; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    #page_recruit #flow .flow_list .flow_ttl {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding-left: 5.5vw; } }

      #page_recruit #flow .flow_list .flow_ttl img {
        margin-right: 20px;
        margin-top: 12px;
        align-self: flex-end;
        max-width: 15%; }
        @media only screen and (max-width: 768px) {
          #page_recruit #flow .flow_list .flow_ttl img {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            margin-right: 3.5vw; } }
    #page_recruit #flow .flow_list .flow_body {
      padding: 30px 30px;
      text-align: center; }
      @media only screen and (max-width: 768px) {
        #page_recruit #flow .flow_list .flow_body {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding: clamp(12px, 2.5vw, 30px) clamp(12px, 2.5vw, 30px); } }
      @media only screen and (max-width: 768px) {
        #page_recruit #flow .flow_list .flow_body {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding: 60px 60px; } }
  @media only screen and (max-width: 768px) and (max-width: 768px) {
    #page_recruit #flow .flow_list .flow_body {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      padding: clamp(30px, 5vw, 60px) clamp(30px, 5vw, 60px); } }
      @media only screen and (max-width: 768px) {
          #page_recruit #flow .flow_list .flow_body img {
            width: 90%;
            margin-bottom: 10px; } }
    @media only screen and (max-width: 768px) and (max-width: 768px) {
      #page_recruit #flow .flow_list .flow_body img {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-bottom: 2vw; } }

  #page_recruit #requirements .header_sticky {
    position: sticky;
    top: 135px; }
    @media only screen and (max-width: 768px) {
      #page_recruit #requirements .header_sticky {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        position: relative;
        top: 0; } }
    #page_recruit #requirements .header_sticky .require_job {
      border-left: 7px solid #232358;
      padding: 10px 22px;
      letter-spacing: 0.15em;
      font-weight: 600;
      font-size: 22px;
      font-size: 2.2rem;
      margin-top: 60px; }
      @media only screen and (max-width: 768px) {
        #page_recruit #requirements .header_sticky .require_job {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          margin-top: clamp(30px, 5vw, 60px); } }
      @media only screen and (max-width: 768px) {
        #page_recruit #requirements .header_sticky .require_job {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding: 10px 15px; } }
    #page_recruit #requirements .header_sticky .job_link {
      font-weight: 500;
      letter-spacing: 0.15em;
      margin-top: 10px;
      margin-bottom: 50px; }
      @media only screen and (max-width: 768px) {
        #page_recruit #requirements .header_sticky .job_link {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          margin-top: 2vw; } }
      @media only screen and (max-width: 768px) {
        #page_recruit #requirements .header_sticky .job_link {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          margin-bottom: clamp(20px, 5vw, 50px); } }
      @media only screen and (max-width: 1080px) {
        #page_recruit #requirements .header_sticky .job_link {
          /*　画面サイズ $tbWitdh まではここを読み込む　*/
          display: grid;
          grid-template-columns: 1fr 1fr; } }
      #page_recruit #requirements .header_sticky .job_link .job_btn {
        font-size: 18px;
        font-size: 1.8rem;
        padding: 17px 30px;
        display: block;
        color: #232358;
        background: #e7e9f4;
        position: relative;
        margin-bottom: 5px;
        text-align: center; }
        @media print, screen and (min-width: 1081px) {
          #page_recruit #requirements .header_sticky .job_link .job_btn {
            /*　画面サイズ $tbWidth からはここを読み込む　*/
            text-align: left !important; } }
        @media only screen and (max-width: 1080px) {
          #page_recruit #requirements .header_sticky .job_link .job_btn {
            /*　画面サイズ $tbWitdh まではここを読み込む　*/
            border: 0.5px solid #fff; } }
        @media only screen and (max-width: 768px) {
          #page_recruit #requirements .header_sticky .job_link .job_btn {
            /*　画面サイズ $spWidth まではここを読み込む　*/
            padding: 15px; } }
        #page_recruit #requirements .header_sticky .job_link .job_btn:after {
          content: url("../img/recruit/job_arrow.svg");
          position: absolute;
          vertical-align: middle;
          left: 100%;
          top: 0;
          bottom: 0;
          height: 50%;
          margin: auto;
          opacity: 0;
          transition: all 0.3s ease; }
          @media only screen and (max-width: 1080px) {
            #page_recruit #requirements .header_sticky .job_link .job_btn:after {
              /*　画面サイズ $tbWitdh まではここを読み込む　*/
              display: none; } }
        #page_recruit #requirements .header_sticky .job_link .job_btn.active, #page_recruit #requirements .header_sticky .job_link .job_btn:hover {
          opacity: 1;
          color: #ffffff;
          background: #232358; }
          #page_recruit #requirements .header_sticky .job_link .job_btn.active:after, #page_recruit #requirements .header_sticky .job_link .job_btn:hover:after {
            opacity: 1; }
    @media only screen and (max-width: 1080px) {
      #page_recruit #requirements .header_sticky .entry_btn {
        /*　画面サイズ $tbWitdh まではここを読み込む　*/
        display: none; } }
  #page_recruit #requirements .entry_btn {
    font-size: 18px;
    font-size: 1.8rem;
    display: flex;
    letter-spacing: 0.15em;
    background-color: #a00000;
    padding: 17px;
    color: #fff;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    font-weight: 500; }
    #page_recruit #requirements .entry_btn:link, #page_recruit #requirements .entry_btn:hover, #page_recruit #requirements .entry_btn:visited, #page_recruit #requirements .entry_btn:active {
      color: #fff; }
    #page_recruit #requirements .entry_btn a:link, #page_recruit #requirements .entry_btn a:hover, #page_recruit #requirements .entry_btn a:visited, #page_recruit #requirements .entry_btn a:active {
      color: #fff; }
  #page_recruit #requirements .job_table {
    width: 100%;
    text-align: left; }
    #page_recruit #requirements .job_table + .job_table {
      margin-top: 60px; }
      @media only screen and (max-width: 768px) {
        #page_recruit #requirements .job_table + .job_table {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          margin-top: clamp(30px, 5vw, 60px); } }
    #page_recruit #requirements .job_table .job_name th {
      background: #e7e9f4;
      outline: none;
      font-size: 22px;
      font-size: 2.2rem; }
    #page_recruit #requirements .job_table th, #page_recruit #requirements .job_table td {
      padding: 20px 25px;
      border: 6px solid #fff;
      outline: 1px solid #c3c3c3;
      outline-offset: -4px; }
      @media only screen and (max-width: 768px) {
        #page_recruit #requirements .job_table th, #page_recruit #requirements .job_table td {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding: 10px 15px;
          border: 4px solid #fff;
          outline: 1px solid #c3c3c3;
          outline-offset: -2px; } }
    #page_recruit #requirements .job_table th {
      background: #f3f3f3;
      font-weight: 500; }
    #page_recruit #requirements .job_table td {
      background: #fff; }
    #page_recruit #requirements .job_table + .entry_btn {
      display: none; }
      @media only screen and (max-width: 1080px) {
        #page_recruit #requirements .job_table + .entry_btn {
          /*　画面サイズ $tbWitdh まではここを読み込む　*/
          display: flex; } }

/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/* 変数ファイルインポート */
/*//////////////////////////////

変数 mixin 共有スタイル

//////////////////////////////*/
/* ルート変数 */
:root {
  --heading-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --body-font-family: 'Zen Kaku Gothic Antique', sans-serif;
  --en-font-family: 'Aldrich', sans-serif; }

/* モジュール */
/* ブレイクポイント 設定 */
/* モーション */
/* シャドウ */
/* フォントサイズ */
/* フォントファミリー */
/*//////////////////////////////

モジュール

//////////////////////////////*/
/* レスポンシブ */
/* ヘッダーナビ */
/* 余白 */
/*//////////////////////////////

下層スタイル

//////////////////////////////*/
#page_contact #page_header {
  background-image: url("../img/common/page_header.svg"), url("../img/common/header_contact.jpg"); }
#page_contact .zip {
  margin-bottom: 10px; }
  @media only screen and (max-width: 768px) {
    #page_contact .zip {
      /*　画面サイズ $spWidth まではここを読み込む　*/
      margin-bottom: 2vw; } }
#page_contact .errdisp {
  background-color: rgba(242, 254, 50, 0.8);
  padding: 10px 15px;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5; }
  #page_contact .errdisp i {
    color: red; }
#page_contact .contact_table {
  margin: auto;
  border-top: 2px solid #c3c3c3;
  border-bottom: 2px solid #c3c3c3;
  width: 100%;
  max-width: 800px; }
  #page_contact .contact_table label {
    margin-right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px; }
    @media only screen and (max-width: 768px) {
      #page_contact .contact_table label {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        margin-right: 3.5vw; } }
  #page_contact .contact_table > tbody > tr {
    border-bottom: 1px solid #c3c3c3; }
    @media only screen and (max-width: 768px) {
      #page_contact .contact_table > tbody > tr {
        /*　画面サイズ $spWidth まではここを読み込む　*/
        display: grid; } }
    #page_contact .contact_table > tbody > tr > th, #page_contact .contact_table > tbody > tr > td {
      padding: 22px 22px; }
      @media only screen and (max-width: 768px) {
        #page_contact .contact_table > tbody > tr > th, #page_contact .contact_table > tbody > tr > td {
          /*　画面サイズ $spWidth まではここを読み込む　*/
          padding: 15px 15px; } }
    #page_contact .contact_table > tbody > tr > th {
      background-color: #e7e9f4;
      font-weight: 500;
      text-align: left;
      min-width: 210px; }
#page_contact .policy_check {
  margin: auto;
  background-color: #f0f0f0;
  padding: 15px 25px;
  text-align: center;
  width: 100%;
  max-width: 800px; }
  #page_contact .policy_check label {
    display: flex;
    align-items: center;
    justify-content: center; }
    #page_contact .policy_check label input {
      margin-right: 10px; }
#page_contact .btn_area {
  margin: auto;
  text-align: center; }
#page_contact .contact_btn, #page_contact .btn_return {
  display: block;
  font-size: 18px;
  font-size: 1.8rem;
  max-width: 380px;
  width: 100%;
  padding: 25px;
  border-radius: 100px;
  margin: auto; }
#page_contact .contact_btn {
  background-color: #a00000;
  color: #fff; }
  #page_contact .contact_btn:link, #page_contact .contact_btn:hover, #page_contact .contact_btn:visited, #page_contact .contact_btn:active {
    color: #fff; }
  #page_contact .contact_btn a:link, #page_contact .contact_btn a:hover, #page_contact .contact_btn a:visited, #page_contact .contact_btn a:active {
    color: #fff; }
#page_contact .btn_return {
  background-color: #f4f4f7; }
#page_contact .thanks_message {
  height: 20vh;
  min-height: 100px;
  display: grid;
  place-items: center; }