/********************************************************/
/* 変数 */
/********************************************************/
:root {
   --text: #000;
   --padding: 8rem;
   --margin: 3rem;
   --sp-padding: 4rem;
   --sp-margin: 1.5rem;
   --main-font: 'Josefin Sans', sans-serif;
}



/********************************************************/
/* 共通パーツ */
/********************************************************/

.inner {
   width: min(100% - 2rem, 1200px);
   margin-inline: auto;

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

   @media screen and (max-width: 768px) {
      max-width: 54.0rem;
   }
}

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

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


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

body {
   width: 100%;
   position: relative;
   background-color: var(--base-color);
   color: #666;
   line-height: 2;
   font-family: var(--main-font);
   font-size: clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem);
   font-weight: 500;

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

section {
   width: 100%;
}

.tb {
   display: none;
}

.sp {
   display: none;
}

t .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) {
   br {
      display: none;
   }

   .tb {
      display: block;
   }

   .tb-pc {
      display: none;
   }

   .tb-br {
      display: block;
   }

   .sp-br {
      display: none;
   }
}

/* （スマホ表示） */
@media screen and (max-width: 768px) {
   html {
      scroll-padding-top: 15vw;
   }

   .tb-br {
      display: none;
   }

   .sp-br {
      display: block;
   }

   .pc {
      display: none;
   }

   .tb-pc {
      display: none;
   }

   .tb {
      display: block;
   }

   .sp {
      display: block;
   }

   br {
      display: none;
   }
}

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

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

a:hover img {
   opacity: 0.8;
   transition: 0.5s;
}

a:hover {
   transition: 0.5s;
   opacity: 0.7;
}

figure {
   margin: 0;
}


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

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

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

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

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

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

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

/* TOPへ戻るボタン */
#page_top {
   z-index: 99999;
   position: fixed;
   bottom: 30px;
   right: 20px;
   border-radius: 5px;
}

#page_top a {
   background-color: #999;
   color: #fff;
   text-align: center;
   text-decoration: none;
   padding: 20px 20px;
}

#page_top a:hover {
   background-color: #666;
   text-decoration: none;
}


/********************************************************/
/* アコーディオンメニュー */
/********************************************************/
/* 矢印を消す */
/* Chrome、Safari以外 */
summary {
   display: block;
}

/* Chrome、Safari */
summary::-webkit-details-marker {
   display: none;
}


/********************************************************/
/* ハンバーガーメニュー  */
/********************************************************/
.hamburger {
   display: block;
   position: fixed;
   top: .5rem;
   right: 1rem;
   background-color: #fff;
   border-color: transparent;
   z-index: 5555;
   border: #000 solid 1px;
   border-radius: 50%;
   height: 50px;
   width: 50px;
   padding: 1rem .8rem;
}

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

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

.hamburger span:nth-child(2) {
   margin: 6px 0;
   width: 80%;
}

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

.hambuger__text {
   position: absolute;
   top: 75%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 10px;
   /*アニメーションの指定*/
   transition: all .5s;
   /*ブロック要素にしてテキスト折り返しなし*/
   display: block;
   white-space: nowrap;
   color: #fff;
}

.hambuger__text:nth-of-type(2) {
   opacity: 0;
   /*透過0に*/
}

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

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

.hamburger.active span:nth-child(2) {
   display: none;
}

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

/*hoverするとテキストが入れ替わる設定*/
.hamburger.active .hambuger__text:nth-of-type(1) {
   opacity: 0;
   /*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.hamburger.active .hambuger__text:nth-of-type(2) {
   opacity: 1;
   /*不透明に*/
}




/********************************************************/
/* ドロワーメニュー */
/********************************************************/
.drawer__nav {
   transition: all .5s;
   visibility: hidden;
   -webkit-transform: translate3d(0, 0, 0) !important;
   content: "";
   height: 100vh;
   top: 64px;
   right: 0;
   position: fixed;
   transform: translate3d(0, 0, 0) !important;
   width: 50%;
   z-index: 265;
   opacity: 0;
   background: linear-gradient(90deg, rgba(130, 133, 212, 0.4) 0%, rgba(255, 159, 198, 0.4) 50%, rgba(255, 159, 198, 0.4) 100%);
   padding: 4rem;

   @media screen and (max-width: 768px) {
      width: 100%;
      padding: 1rem;
   }
}

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

.drawer__menu {
   width: 100%;
}

.drawer__menu__list {
   font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);

   &:nth-of-type(2) {
      padding-top: 1rem;
      color: #000;
      font-weight: 700;
   }
}

.drawer__menu__list__link {
   padding-top: 1rem;
   padding-bottom: 1rem;
   font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
   border-bottom: #fff solid 1px;
   color: #000;
   font-weight: 700;
}

.drawer__menu__arrow {
   vertical-align: text-top;
   display: inline-block;
   width: 15px;
   height: 15px;
}

.drawer__menu__btn-box {
   margin-top: 1rem;
   padding-bottom: 1rem;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   border-bottom: #fff solid 1px;
   gap: 1rem;
}

.overlay {
   display: none;

   &.active {
      position: fixed;
      top: 64px;
      right: 0;
      display: block;
      background-color: #fff;
      width: 50%;
      height: 100vh;
      z-index: 264;

      @media screen and (max-width: 768px) {
         width: 100%;
      }
   }
}

.js_humburgerOpen .navi {
   pointer-events: auto;
   opacity: 1;
   height: 100svh;
   margin-top: 67px;
   padding: 20px 30px 70px 20px;

   @media screen and (max-width: 768px) {
      margin-top: 0;
      padding: 20px 30px 100px 20px;
   }
}