/********************************************************/
/* 変数 */
/********************************************************/
:root {
  --base-color: #fff;
  --main-color: #006666;
  --accent-color: #e8f6e5;
  --text-black: #000;
  --text-white: #fff;
  --main-padding: 5rem;
  --main-margin: 5rem;
  --sp-main-padding: 2.5rem;
  --sp-main-margin: 2.5rem;
  --main-font: 'Noto Serif JP', serif;
  --sub-font: 'Cormorant Garamond', serif;
}

/********************************************************/
/* 共通CSS */
/********************************************************/


#header,
#footer,
.footer__main__section,
.bottom__btn__contents {
  width: 100%;
  color: var(--text-black);
  line-height: 2em;
  font-family: var(--main-font);
  font-size: 16px;
  font-weight: 500;
}

section {
  overflow: hidden;
}

.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) {
#header br ,
#footer br ,
.footer__main__section 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;
  }

  #header br ,
  #footer br ,
  .footer__main__section br {
    display: none;
  }
}

a {
  text-decoration: none;
  transition: 0.5s;
}
#footer a,
.bottom__btn__contents a{
  display: block;
}
.footer__main__section a{
  display: block;
}
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;
}



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

.section {
  width: 100%;
  padding-top: var(--main-padding);
  padding-bottom: var(--main-padding);
  background-color: var(--base-color);
}

/* （タブレット表示） */
@media screen and (max-width: 1024px) {
  .inner {
    max-width: 74.0rem;
  }
}

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

  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}