@charset "UTF-8";
/*------------------------------
  common.css
  全ページで読み込む共通スタイル。
  Astro の globals.css / SiteHeader / BgLayer / SiteMenu / SiteFooter を統合し、
  スコープ属性（data-astro-cid-*）を除去して再スコープしたもの。
------------------------------*/


/*==============================
  MARK:共通（reset・変数・ユーティリティ）
==============================*/
/*------------------------------
	MARK:初期設定(reset.css)
------------------------------*/
/* 2023/10/24 ver.1.11.1 GitHub */
html,body{background-color:#fff}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;tab-size:2;}:where(html:has(dialog:modal[open])){overflow:clip}:where(body){line-height:1.5;font-family: "Noto Sans JP","sans-serif"; -webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex;text-decoration:none}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){width:100%;max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-size:1.6rem}:where(h2,h3,h4,h5,h6){font-weight:400}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog,[popover]){border:none;background:none;color:inherit;inset:unset;max-width:unset;max-height:unset}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important;user-select:none!important}
fieldset{all: unset;}

/*------------------------------
	MARK:ブラウザ対応
------------------------------*/
/* 2023/9/18(A (more) Modern CSS Reset) */
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100dvh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;width:100%;display:block;font-size:1.6rem}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media print{body{background-color:#fff!important}a,a:link,a:visited,a:hover{text-decoration:none!important}#tabLink{display:none!important}}


/*------------------------------
  MARK:フォント
------------------------------*/
:root {
    --font-noto: "Noto Sans JP";
    --font-roboto: "Roboto";
    --font-zen: "Zen Kaku Gothic New";
}

/*------------------------------
  MARK:カスタムプロパティ
------------------------------*/
:root {
  --black: #252525;
  --white: #fff;
  /* #fff 75% */
  --white-through: #ffffffbf;
  --gray: #a3a3a3;
  --border: #e1e4e6;
  --main: #192b4e;
  --accent: #ecb700;
  
  --header-height: max(8rem, 80px);
  @media screen and (max-width: 768px) {
    --header-height: 6rem;
  }
  
  --f: calc(1s / 30);
  --shadow: 0 0 0.6rem #a6a6a680;

  --hover-duration: 0.5s;
  --hover-easing: cubic-bezier(.2, .1, .1, 1);
  
  --c01: #0056a9;
  --c02: #007fe8;
  --c03: #00a4e5;
  --c04: #4188ce;
  --c05: #659cc9;
  --c06: #192b4e;
}
@property --g01{
  syntax: '<percentage>'; inherits: false; initial-value: 0%;
}
@property --g02{
  syntax: '<percentage>'; inherits: false; initial-value: 0%;
}
@property --g03{
  syntax: '<percentage>'; inherits: false; initial-value: 0%;
}
@property --g04{
  syntax: '<percentage>'; inherits: false; initial-value: 0%;
}
@property --g05{
  syntax: '<percentage>'; inherits: false; initial-value: 0%;
}
@property --g06{
  syntax: '<percentage>'; inherits: false; initial-value: 0%;
}
@keyframes graph01{
  to{
    --g01: 11.7%;
    --g02: 52%;
    --g03: 75%;
    --g04: 88%;
    --g05: 97%;
    --g06: 100%;
  }
}
@keyframes graph02{
  to{
    --g01: 67%;
    --g02: 100%;
  }
}
@keyframes graph03{
  to{
    --g01: 95%;
    --g02: 100%;
  }
}
/*------------------------------
  MARK:全体設定
------------------------------*/
body {
  font-size: 1.6rem;
  line-height: 1.1;
  font-family: var(--font-noto), sans-serif;
  background-color: var(--white);
  color: var(--black);
  text-align: left;
  overflow-x: hidden;
}

main{
  /* 背景動画（bg-layer-video）との前後関係に必要 */
  isolation: isolate;
}

::selection{
  color: var(--white);
  background-color: var(--main);
}
::-moz-selection {
  color: var(--white);
  background-color: var(--main);
}
img::selection{
  color: inherit;
  background-color: transparent;
}
img::-moz-selection {
  color: inherit;
  background-color: transparent;
}


/*------------------------------
  MARK:ブレイクポイント
------------------------------*/
html {
  font-size: calc(100vw / 160);
  @media screen and (max-width: 768px) {
    font-size: calc(100vw / 37.5);
  }
}

/*------------------------------
  MARK:表示切り替え
------------------------------*/
.spmask { display: block; }
.sponly { display: none; }
br.spmask { display: inline; }

@media screen and (max-width: 768px) {
  br.spmask,.spmask { display: none; }
  .sponly { display: block; }
  br.sponly { display: inline; }
}

/*------------------------------
  MARK:UTIL
------------------------------*/
/*------------------------------*/
body.menu-open {
  overflow: hidden;
}
body.video-popover-open {
  overflow: hidden;
}
/*------------------------------*/
.inner{
  margin-inline: auto;
  width: 110rem;
  @media screen and (max-width: 768px) {
    padding-inline: 1.5rem;
    width: 100%;
  }
  &.narrow{
    width: 100rem;
    @media screen and (max-width: 768px) {
      width: 100%;
    }
  }
  &.wide{
    width: 135rem;
    @media screen and (max-width: 768px) {
      width: 100%;
    }
  }
}

/*------------------------------*/
.readText{
  font-size: max(1.6rem,14px);
  line-height: 2;
  text-align: left;
  @media screen and (max-width: 768px) {
    font-size: 1.4rem;
    line-height: 1.9;
  }
  &.center{
    text-align: center;
  }
}
/*------------------------------*/
[id^="anc"]{
  position: absolute;
  top: calc((var(--header-height)) * -1);
  left: 0;
  pointer-events: none;
}
:has(> [id^="anc"]){
  position: relative;
}
/*----------------------------*/
.description{
  margin-block: 7rem;
  @media screen and (max-width: 768px) {
    margin-block: 4rem;
  }
}
/*----------------------------*/
.ui-btn{
  color: var(--white);
  background-color: var(--main);
  border-radius: 100vmax;
  border: max(0.1rem,1px) solid var(--main);
  display: grid;
  place-content: center;
  width: max(21rem, 160px);
  height: max(5rem, 40px);
  transition: 0.1s var(--hover-easing);
  transition-property: background-color, color;
  span{
    display: inline-block;
    font-size: max(1.4rem, 11px);
    font-weight: 700;
  }
  @media (any-hover: hover) {
    &:hover{
      background-color: var(--white);
      color: var(--main);
    }
  }
}
/*----------------------------*/
.external-icon::after{
  content: "";
  display: block;
  width: 1em;
  aspect-ratio: 1;
  background: url(../image/common/external.svg) no-repeat center/contain;
  margin-left: 0.25em;
}
/*----------------------------*/
.subpage-mv{
  padding-inline: 10rem;
  padding-top: 17rem;
  padding-bottom: 10rem;
  position: relative;
  @media screen and (max-width: 768px) {
    padding-top: 8rem;
    padding-inline: 1.5rem;
    padding-bottom: 6rem;
  }
  &::before{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30rem;
    background-image: linear-gradient(to top, var(--white-through) 0%, transparent 100%);
  }
  .title{
    isolation: isolate;
    .en{
      font-family: var(--font-roboto);
      font-size: 16rem;
      font-weight: 700;
      color: var(--main);
      letter-spacing: 0.02em;
      line-height: 1;
      @media screen and (max-width: 768px) {
        font-size: 6rem;
        line-height: 1.05;
      }
      span{
        font-size: 0.875em;
        font-weight: 300;
        color: var(--black);
      }
    } 
    h1{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: max(1.4rem, 12px);
      margin-top: 2rem;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
        margin-top: 1rem;
      }
      &::before{
        content: "●";
        font-size: 0.8em;
        color: var(--accent);
      }
    }
  }
}

/*------------------------------
  MARK:動画ポップアップ
------------------------------*/
.video-popover{
  position: fixed;
  z-index: 100002;
  inset: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.84);
  color: var(--white);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
  &.is-open{
    opacity: 1;
    pointer-events: auto;
  }
}
.video-popover__inner{
  width: 100%;
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4rem;
  @media screen and (max-width: 768px) {
    padding: 1.5rem;
  }
}
.video-popover__frame{
  width: min(84vw, calc(82dvh * 16 / 9), 128rem);
  aspect-ratio: 16 / 9;
  background-color: var(--black);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.45);
  iframe,
  video{
    width: 100%;
    height: 100%;
    border: 0;
  }
}
.video-popover__close{
  position: fixed;
  top: max(2rem, env(safe-area-inset-top));
  right: max(2rem, env(safe-area-inset-right));
  width: 4.8rem;
  height: 4.8rem;
  color: var(--white);
  transition: opacity 0.15s ease;
  &::before,
  &::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 1px;
    background-color: currentColor;
  }
  &::before{
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &::after{
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  @media (any-hover: hover) {
    &:hover{
      opacity: 0.65;
    }
  }
}
/*------------------------------
  MARK:ANIMATION
------------------------------*/
/*------------------------------
  スクロールアニメーション
------------------------------*/
:root {
  --js-duration: 1.1s;
  --js-easing: cubic-bezier(.3,.1,0,1);
}
[data-animate-target]{
  transition: var(--js-duration) var(--js-easing);
}
/* fadeUp：フェイドアップ処理 */
[data-animate-target="fadeUp"]{
  opacity: 0;
  transform: translateY(4rem);
  transition-property: transform, opacity;
  &[data-animate-state="true"]{
    opacity: 1;
    transform: translateY(0);
  }
}
[data-animate-target="fadeUpImage"]{
  opacity: 0;
  transform: translateY(4rem);
  transition: 3.6s cubic-bezier(.2,0,0,1);
  transition-property: transform, opacity;
  &[data-animate-state="true"]{
    opacity: 1;
    transform: translateY(0);
  }
}
[data-animate-target="fadeIn"]{
  opacity: 0;
  transition-property: opacity;
  &[data-animate-state="true"]{
    opacity: 1;
  }
}
[data-count]{
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
[data-count-char]{
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.45em, 0) scale(0.96);
  transform-origin: 50% 100%;
  transition:
    transform 0.9s cubic-bezier(.2, .72, .18, 1),
    opacity 0.52s ease-out;
  transition-delay: var(--count-delay, 0ms);
  will-change: transform, opacity;
}
[data-count-state="true"] [data-count-char]{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  [data-count-char]{
    opacity: 1;
    transform: none;
    transition: none;
  }
}
[data-parallax]{
  position: relative;
  display: block;
  overflow: hidden;
  .bg-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  contain: paint;
  [data-parallax-image]{
    position: absolute;
    inset: -8% 0;
    width: 100%;
    height: 116%;
    max-width: none;
    object-fit: cover;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
}
}
/*------------------------------
hover
------------------------------*/
.hover-image{
  :has(> img){
    overflow: hidden;
    img{
      transition: transform 0.6s var(--hover-easing);
    }
  }
  @media (any-hover: hover) {
    &:hover{
      img{
        transform: scale(1.05);
      }
    }
  }
}
.arrow{
  display:block;
  width:100%; 
  overflow:visible;
  transition: transform 0.3s var(--hover-easing);
}
.arrow path {
  fill:#252525; 
  transition: fill 0.1s;
}
.arrow .white{ fill:var(--white); }
.arrow .main{ fill:var(--main); }

a:has(.arrow){
  @media (any-hover: hover) {
    &:hover .arrow{
      transform: translateX(15%);
    }
  }
}


/*==============================
  MARK:ヘッダー
==============================*/
header {
    position: fixed;
    top: 0;
    z-index: 100001;
    width: 100%;
    height: var(--header-height);
    overflow: hidden;
    transition: background-color 0.2s var(--easing);
    .header-inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: 4rem 2rem;
      margin-inline: auto;
      @media screen and (max-width: 768px) {
        padding-inline: 1.5rem 1rem;
      }
    }
    .logo {
      transition: opacity 0.1s;
      .logo-wrap{
        position: relative;
      }
      .menu-open{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
      img {
        width: max(16rem,160px);
        @media screen and (max-width: 768px) {
          width: 12rem;
        }
      }
      p {
        font-family: var(--font-roboto);
        font-size: max(1.4rem, 14px);
        font-weight: 600;
        letter-spacing: 0.05em;
        margin-top: max(0.8rem, 8px);
        color: #000;
        @media screen and (max-width: 768px) {
          font-size: 1.1rem;
          margin-top: 0.6rem;
        }
      }
      @media (any-hover: hover) {
        &:hover{
          opacity: 0.6;
        }
      }
    }
    .btn-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      column-gap: 1rem;
    }
    .requirements-btn {
      width: max(14rem, 140px);
      height: max(4rem, 40px);
      font-size: max(1.6rem, 16px);
      @media screen and (max-width: 768px) {
        width: 9rem;
        height: 3.2rem;
        span{
          font-size: 1.2rem;
        }
      }
    }
    #menuBtn {
      position: relative;
      width: max(4rem, 40px);
      height: max(4rem, 40px);
      .bar {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: var(--black);
        height: 1px;
        width: max(2.6rem, 26px);
        transform-origin: center;
        transition:
          opacity 0.2s var(--hover-easing),
          transform 0.2s var(--hover-easing);
        transform: translate(-50%, -50%) translateY(var(--bar-offset));
        &.top {
          --bar-offset: min(-0.7rem, -7px);
        }
        &.middle {
          --bar-offset: 0;
        }
        &.bottom {
          --bar-offset: max(0.7rem, 7px);
        }
      }
    }

  
}

body:has(#siteMenu.is-open) header{
    .logo{
      .menu-open{
        opacity: 1;
        @media screen and (max-width: 768px) {
          opacity: 0;
        }
      }
      .default{
        opacity: 0;
        @media screen and (max-width: 768px) {
          opacity: 1;
        }
      }
      p{
        color: var(--white);
        @media screen and (max-width: 768px) {
          color: var(--black);
        }
      }
    }
    .requirements-btn{
      display: none;
    }
    #menuBtn .bar{
      &.top {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      &.middle {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0);
      }
      &.bottom {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }
  }


/*==============================
  MARK:背景動画レイヤー
==============================*/
  #bg-layer-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    object-fit: cover;
    pointer-events: none;
  }


/*==============================
  MARK:サイトメニュー
==============================*/
#siteMenu {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  overscroll-behavior: none;
  transition:
    opacity 0.28s ease,
    visibility 0s linear 0.28s;
  &.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0s;
  }
  .menu-panel{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    pointer-events: auto;
    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
    }
    @media (any-hover: hover) {
      &:has(.nav-category.top:hover){
        .image-wrap .image img.top{ opacity: 1; }
      }
      &:has(.nav-category.about:hover){
        .image-wrap .image img.about{ opacity: 1; }
      }
      &:has(.nav-category.interview:hover){
        .image-wrap .image img.interview{ opacity: 1; }
      }
      &:has(.nav-category.recruit:hover){
        .image-wrap .image img.recruit{ opacity: 1; }
      }

      
    }
  }
  
  .image-wrap{
    background-color: var(--main);
    display: grid;
    place-content: center;
    @media screen and (max-width: 768px) {
      display: none;
    }
    .image{
      position: relative;
      img{
        width: 44rem;
        transition: opacity 0.2s;
        &.about,
        &.interview,
        &.recruit{
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
        }
      }
    }
  }
  
  .nav-wrap{
    height: 100%;
    overflow-y: auto;
    background-color: var(--white);
    padding-inline: 6rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    @media screen and (max-width: 768px) {
      padding-inline: 1.5rem;
    }
    nav{
      display: grid;
      grid-template-columns: repeat(2,auto);
      grid-template-rows: repeat(2,auto);
      grid-auto-flow: column;
      padding-block: 16rem 10rem;
      gap: 6rem;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4,auto);
        padding-block: 9rem 6rem;
        gap: 6rem;
      }
      .nav-hd{
        margin-bottom: 3rem;
        @media screen and (max-width: 768px) {
          margin-bottom: 2.5rem;
        }
        .en{
          font-size: max(3.6rem,18px);
          font-weight: 600;
          letter-spacing: 0.1em;
          font-family: var(--font-roboto);
          color: var(--main);
          @media screen and (max-width: 768px) {
            font-size: 2.8rem;
          }
        }
        .ja{
          font-size: max(2.1rem,10px);
          font-weight: 600;
          margin-top: 0.6rem;
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
            margin-top: 0.3rem;
          }
        }
      }
      .nav-link{
        display: flex;
        align-items: center;
        gap: 0.8rem;
        font-size: max(1.8rem,10px);
        color: var(--main);
        font-weight: 500;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
        }
        @media (any-hover: hover) {
          &:hover{
            span{
              text-decoration: underline;
            }
          }
        }
        &+ .nav-link{
          margin-top: 2rem;
        }
        &::before{
          content: "-";
        }
      }
      .requirements-btn{
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 24rem;
        height: 6rem;
        padding-inline: 1.5rem;
        font-size: 1.4rem;
        font-weight: 600;
        .arrow{
          width: 4.2rem;
        }
      }
    }
  
    .btn-wrap{
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 3rem;
      margin-block: auto 0;
      @media screen and (max-width: 768px) {
        display: block;
      }
      a{
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: var(--main);
        font-family: var(--font-roboto);
        height: 7rem;
        border: max(0.1rem,1px) solid currentColor;
        transition: 0.1s;
        transition-property: background-color, color;
        @media screen and (max-width: 768px) {
          margin-bottom: 1.5rem;
        }
        &::after{
          content: "";
          width: 1em;
          height: 1em;
          background-color: currentColor;
          mask: url(../image/common/external.svg) center/contain;
        }
        @media (any-hover: hover) {
          &:hover{
            background-color: var(--main);
            color: var(--white);
          }
        }
      }
    }
    .copyright{
      padding-block: 2.5rem 2rem;
      margin-block: 0;
      p{
        font-size: 1.2rem;
        text-align: right;
      }
    }
  }
}
  

  /* 開く時の開始値 */
  @starting-style {
    #siteMenu.is-open{
      opacity: 0;
    }
  }


/*==============================
  MARK:フッター
==============================*/
footer{
  isolation: isolate;
  .recruit{
    .bg-image{
      z-index: 0;
      transition: transform 0.6s var(--hover-easing);
    }
    &::before{
      content: "";
      display: block;
      position: absolute;
      z-index: 1;
      inset: 0;
      background-color: #00000060;
      opacity: 0;
      transition: opacity 0.5s var(--hover-easing);
    }
    .text-wrap{
      position: relative;
      z-index: 2;
      padding-block: 10rem 9rem;
      isolation: isolate;
      color: var(--white);
      text-align: center;
      @media screen and (max-width: 768px) {
        padding-block: 5rem 6rem;
      }
      .en{
        font-family: var(--font-roboto);
        font-size: max(4.8rem, 40px);
        font-weight: 600;
        letter-spacing: 0.2em;
        @media screen and (max-width: 768px) {
          font-size: 4.8rem;
        }
      }
      .ja{
        font-weight: 600;
        font-size: max(2.1rem,18px);
        margin-top: 1rem;
        @media screen and (max-width: 768px) {
          font-size: 2.1rem;
        }
      }
      .readText{
        text-align: center;
        margin-top: 6rem;
        font-size: max(1.8rem, 16px);
        font-weight: 500;
        @media screen and (max-width: 768px) {
          font-size: 1.4rem;
          margin-top: 4rem;
        }
      }
      .arrow{
        width: max(9rem,80px);
        margin-inline: auto;
        margin-top: 4rem;
        @media screen and (max-width: 768px) {
          width: 9rem;
        }
      }
    }
    @media (any-hover: hover) {
      &:hover{
        &::before{
          opacity: 1;
        }
        .bg-image{
          transform: scale(1.03);
        }
        .arrow{
          transform: none;
        }
      }
      
    }
  }
  .footer-container{
    background-color: var(--black);
    padding: 7rem 8rem 4rem;
    display: flex;
    justify-content: space-between;
    @media screen and (max-width: 768px) {
      padding: 0;
      width: 100%;
      display: block;
    }
    .corporate-wrap{
      @media screen and (max-width: 768px) {
        display: none;
      }
      .logo{
        transition: opacity 0.1s;
        img {
          width: 24rem;
        }
        p {
          font-family: var(--font-roboto);
          font-size: 1.4rem;
          font-weight: 500;
          letter-spacing: 0.1em;
          margin-top: 1.2rem;
          color: var(--white);
        }
        @media (any-hover: hover) {
          &:hover{
            opacity: 0.6;
          }
        }
      }
      .btn-wrap{
        width: 34rem;
        margin-top: 8rem;
        a{
          font-size: 1.4rem;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          color: var(--white);
          font-family: var(--font-roboto);
          height: 4.8rem;
          border: max(0.1rem,1px) solid var(--white);
          transition: 0.1s;
          transition-property: background-color, color;
          &::after{
            content: "";
            width: 1em;
            height: 1em;
            background-color: currentColor;
            mask: url(../image/common/external.svg) center/contain;
          }
          @media (any-hover: hover) {
            &:hover{
              background-color: var(--white);
              color: var(--black);
            }
          }
        }
        &> img{
          margin-top: 3rem;
        }
      }
    }
    .nav-wrap{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      nav{
        display: flex;
        justify-content: flex-end;
        gap: 6rem;
        @media screen and (max-width: 768px) {
          display: none;
        }
        .nav-category{
          color: var(--white);
        }
        .nav-hd{
          margin-bottom: 3rem;
          .en{
            font-size: max(2.8rem,18px);
            font-weight: 600;
            letter-spacing: 0.1em;
            font-family: var(--font-roboto);
          }
          .ja{
            font-size: max(1.4rem,10px);
            font-weight: 600;
            margin-top: 0.6rem;
          }
        }
        a.nav-hd{
          @media (any-hover: hover) {
            &:hover .ja{
              text-decoration: underline;
            }
          }
        }
        .nav-link{
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: max(1.4rem,10px);
          &+ .nav-link{
            margin-top: 2rem;
          }
          &::before{
            content: "-";
          }
          @media (any-hover: hover) {
            &:hover{
              span{
                text-decoration: underline;
              }
            }
          }
        }
        .requirements-btn{
          background-color: var(--white);
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 24rem;
          height: 6rem;
          padding-inline: 1.5rem;
          font-size: 1.4rem;
          font-weight: 600;
          border: max(0.1rem,1px) solid var(--white);
          transition: background-color 0.1s;
          span{
            transition: color 0.1s;
          }
          .arrow{
            width: 4.2rem;
          }
          @media (any-hover: hover) {
            &:hover{
              background-color: var(--black);
              span{
                color: var(--white);
              }
              .arrow path{
                fill: var(--white);
              }
            }
          }
        }
      }
      .copyright{
        @media screen and (max-width: 768px) {
          margin-inline: auto;
          padding-block: 2.5rem;
        }
        p{
          text-align: right;
          font-family: var(--font-roboto);
          font-size: 1.2rem;
          color: var(--white);
          letter-spacing: 0.1em;
          line-height: 1;
          @media screen and (max-width: 768px) {
            font-size: 1.1rem;
            text-align: center;
          }
        }
      }
    }
  }
}


/*==============================
  MARK:シンプルページ（404・フォールバック）
==============================*/
.page-simple {
  min-height: 60vh;
  .description {
    text-align: center;
  }
  .btn-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 4rem;
  }
  .entry {
    margin-bottom: 6rem;
    h2 {
      font-size: max(2.4rem, 20px);
      font-weight: 600;
      margin-bottom: 2rem;
    }
  }
  &.page-404{
    .subpage-mv{
      &::before{
        display: none;
      }
    }
  }
}

/*==============================
  MARK:管理バー表示時（ログイン中のみ）
==============================*/
body.admin-bar header {
  top: 32px;
}
body.admin-bar #siteMenu {
  top: 32px;
  height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar header {
    top: 46px;
  }
  body.admin-bar #siteMenu {
    top: 46px;
    height: calc(100dvh - 46px);
  }
}