/********************************************************/
/* 変数 */
/********************************************************/
:root {

   /* サイトカラー */
   --base-color: #fff;
   --main-color: #000;
   --accent-color: #ff6c00;

   /* テキストカラー */
   --font-main-color: #000;
   --font-sub-color: #FFF;

   /* フォントウェイト */
   --bold: 700;
   --normal: 500;
   --regular: 400;

   /* 余白の設定 */
   --padding: 4rem;
   --margin: 5rem;
   --sp-padding: 2.5rem;
   --sp-margin: 2.5rem;

   /* フォントファミリー */
   --font-family: "Noto Sans JP", sans-serif;
}



/***********************************/
/********** 共通パーツ **********/
/***********************************/
.inner {
   width: min(100% - 2rem, 1000px);
   margin-inline: auto;

   @media screen and (max-width: 1024px) {
      max-width: 740px;
   }
}

.section {
   width: 100%;
   padding-top: var(--padding);
   padding-bottom: var(--padding);
   overflow: hidden;

   @media screen and (max-width: 768px) {
      padding-top: var(--sp-padding);
      padding-bottom: var(--sp-padding);
      ;
   }
}



/* （タブレット表示） */


/* （スマホ表示） */
@media screen and (max-width: 768px) {
   .inner {
      max-width: 540px;
   }
}


/********************************************************/
/* 共通CSS */
/********************************************************/
html {
   scroll-padding-top: 100px;
   scroll-behavior: smooth;
   width: 100%;
}

body {
   width: 100%;
   position: relative;
   background-color: #fff;
   color: var(--text-color);
   line-height: 2;
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: 400;

   @media screen and (max-width: 768px) {
      line-height: 1.7;
   }
}

section {
   overflow: hidden;
}

.tb {
   display: none;
}

.sp {
   display: none;
}

.tb-br {
   display: none;
}

.sp-br {
   display: none;
}

.vertical-text {
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
}

/* （タブレット表示） */
@media screen and (max-width: 1024px) {
   .pc-br {
      display: none;
   }

   .tb {
      display: block;
   }

   .tb-pc {
      display: none;
   }

   .tb-br {
      display: block;
   }

   .sp-br {
      display: none;
   }
}

/* （スマホ表示） */
@media screen and (max-width: 768px) {
   .tb-br {
      display: none;
   }

   .sp-br {
      display: block;
   }

   .pc {
      display: none;
   }

   .tb-pc {
      display: none;
   }

   .tb {
      display: block;
   }

   .sp {
      display: block
   }

   .pc-br {
      display: none;
   }
}

a {
   display: block;
   text-decoration: none;
   transition: .5s;
   color: #000000;
}

img {
   width: 100%;
   object-fit: cover;
}

a:visited {
   color: var(--text-sub-color);
}

figure {
   margin: 0;
}



/***********************************/
/********** アニメーション **********/
/***********************************/
/* テキストアニメーション */
.text-animation span {
   opacity: 0;
}

/* フェードイン(初期値) */
.js-fadeUp {
   opacity: 0;
   /* 最初は非表示 */
   transform: translateY(10px);
   /* 下に30pxの位置から */
   transition: opacity 0.8s, transform 0.8s;
   /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
   opacity: 1;
   /* 表示領域に入ったら表示 */
   transform: translateY(0);
   /* 30px上に移動する */
   transition-delay: 0.3s;
   /* フェード開始を0.5秒遅らせる */
}

/* フェードイン(初期値) */
.js-mv-fade {
   opacity: 0;
   /* 最初は非表示 */
   transition: opacity 4s ease-out;
   /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-mv-fade.is-inview {
   opacity: 1;
   /* 表示領域に入ったら表示 */
   transform: translateY(0);
   /* 30px上に移動する */
   transition-delay: 0;
   /* フェード開始を0.5秒遅らせる */
}



/* カバースライド(初期値) */
.js-slide-left {
   opacity: 0;
   /* 最初は非表示 */
   transform: translateX(-5%);
   /* 下に30pxの位置から */
   transition: opacity 0.8s, transform 0.8s;
   /* 透過率と縦方向の移動を0.8秒 */
}

/* カバースライド(スクロールした後) */
.js-slide-left.is-inview {
   opacity: 1;
   /* 表示領域に入ったら表示 */
   transform: translateX(0);
   /* 30px上に移動する */
   transition-delay: 0.2s;
   /* フェード開始を0.5秒遅らせる */
}

/* カバースライド(初期値) */
.js-slide-right {
   opacity: 0;
   /* 最初は非表示 */
   transform: translateX(5%);
   /* 下に30pxの位置から */
   transition: opacity 0.8s, transform 0.8s;
   /* 透過率と縦方向の移動を0.8秒 */
}

/* カバースライド(スクロールした後) */
.js-slide-right.is-inview {
   opacity: 1;
   /* 表示領域に入ったら表示 */
   transform: translateX(0);
   /* 30px上に移動する */
   transition-delay: 0.5s;
   /* フェード開始を0.5秒遅らせる */
}

/********************************************************/
/* 斜めから出てくるアニメーション */
/********************************************************/
.slide-skew {
   opacity: 0;
}

.slide-skew.is-inview {
   animation: slide-skew .7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slide-skew {
   0% {
      transform: translate(180px, 30px);
      opacity: 0;
   }

   100% {
      transform: translate(0, 0);
   }

   20%,
   100% {
      opacity: 1;
   }
}



/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
   /*fixedで全面に固定*/
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 999;
   background: #fff;
   text-align: center;
   color: #000;
}

/* Loading画像中央配置　*/
#splash_logo {
   width: 20%;
   object-fit: cover;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
   width: 100%;
}

/* fadeUpをするアイコンの動き */

.fadeUp {
   animation-name: fadeUpAnime;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   opacity: 0;
}

@keyframes fadeUpAnime {
   from {
      opacity: 0;
      transform: translateY(100px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.sp {
   display: none;
}



/********************************************************/
/* ハンバーガーメニュー  */
/********************************************************/
.hamburger {
   display: none;
}

@media screen and (max-width: 768px) {
   .hamburger {
      display: block;
      position: fixed;
      top: .8rem;
      right: .5rem;
      background-color: transparent;
      border-color: transparent;
      border-radius: 3px;
      z-index: 5555;
      width: 50px;
      padding: 7px;
   }

   /* ハンバーガーメニューの線 */
   .hamburger span {
      background-color: #231815;
      /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
      display: block;
      height: 2px;
      border-radius: 3px;
      position: relative;
      -webkit-transition: ease 0.5s;
      transition: ease 0.5s;
      width: 100%;
      z-index: 15;
   }

   .hamburger__text {
      background-color: var(--main-color);
      position: absolute;
      bottom: -23px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: 700;
      z-index: 10;
   }

   .hamburger__text.active {
      display: none;
   }

   .hamburger__close__text {
      position: absolute;
      bottom: -23px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 9px;
      font-weight: 700;
   }

   .hamburger span:nth-child(1) {
      top: 0;
   }

   .hamburger span:nth-child(2) {
      margin: 8px 0;
   }

   .hamburger span:nth-child(3) {
      top: 0;
   }

   /* ハンバーガーメニュークリック後のスタイル */

   .hamburger.active span:nth-child(1) {
      top: 10px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
   }

   .hamburger.active span:nth-child(2) {
      opacity: 0;
   }

   .hamburger.active span:nth-child(3) {
      top: -10px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
   }
}

/********************************************************/
/* ドロワーメニュー */
/********************************************************/
.drawer__nav {
   display: none;

   @media screen and (max-width: 768px) {
      display: block;
      transition: all 0.5s;
      visibility: hidden;
      content: "";
      position: fixed;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 100svh;
      z-index: 265;
      opacity: 0;
      background: var(--base-color);
      padding: 2rem;
   }

   &.active {
      transition: all 0.5s;
      /* トランジションにはopacityを使用 */
      visibility: visible;
      opacity: 1;
   }
}

.drawer__menu {
   text-align: center;
}

.drawer__list {
   margin-top: 1rem;
}

.drawer__link {
   font-size: 25px;
   font-family: "Barlow Condensed",
      sans-serif;
   font-weight: 500;
}

.drawer__cv-btn {
   text-align: center;
   margin-top: 6rem;
}

.drawer__cv-btn__link {
   display: inline-block;
   font-family: "Barlow Condensed",
      sans-serif;
   font-size: 22px;
   letter-spacing: 1px;
   padding: .2rem 1.5rem;
   background-color: var(--accent-color);
   color: var(--base-color);
   font-weight: 500;

   &:visited {
      color: var(--base-color);
   }

   &:hover {
      background-color: #ffb170;
      transition: all .7s;
   }
}



/********************************************************/
/* サイドメニュー */
/********************************************************/
.side__menu {
   position: fixed;
   background-color: #fff;
   border: solid 0.2rem #fff;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 7%;
   max-width: 5rem;
   z-index: 100;
   gap: .2rem;
}

.side__list:first-child {
   margin-top: 0;
}

.side__list {
   margin-top: .2em;
}

@media screen and (max-width: 768px) {
   .side__menu {
      top: auto;
      bottom: -26px;
      right: 0;
      width: 55%;
      max-width: 13rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .side__list {
      max-width: 7rem;
      margin-top: 0;
   }
}