@charset "UTF-8";
/* ******************************************************************
 *	File name		: common.css
 * ******************************************************************
 */
/* - 共通 - */
/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Space+Grotesk:wght@300..700&display=swap');
html {
  font-size: 62.5%;
}
body {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  overflow-x: hidden;
}
.text-uppercase {
  text-transform: uppercase;
}
.container:after {
  content: "";
  clear: both;
  display: block;
}
/*ページの先頭に戻る*/
.toppage {
  width: 20px;
  position: fixed;
  bottom: 20px;
  right: 40px;
  z-index: 99;
}
.toppage img {
  width: 100%;
  height: auto;
}
.toppage a {
  text-decoration: none;
  width: 40px;
  height: 40px;
  display: block;
}
a[href$=".pdf"]:after {
  content: " ";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url(../../img/adobe_pdf_file_icon.png);
  background-size: contain;
  background-position: 0px 0px;
  margin-left: 8px;
  margin-top: 0px;
}
.red {
  color: #DF0003;
}
.under_line {
  background: linear-gradient(transparent 60%, #ff6 60%);
}
/*==================================================
フェード
===================================*/
.fadeUpTrigger {
  opacity: 1;
}
.fadeInTrigger {
  opacity: 1;
}
/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 上から */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeDownAnime {
  from {
    opacity: 1;
    transform: translateY(-200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 左から */
.fadeLeft__01 {
  animation-name: fadeLeftAnime01;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeLeftAnime01 {
  from {
    opacity: 1;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 左から */
.fadeLeft__02 {
  animation-name: fadeLeftAnime02;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeLeftAnime02 {
  from {
    opacity: 1;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 左から */
.fadeLeft__03 {
  animation-name: fadeLeftAnime03;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeLeftAnime03 {
  from {
    opacity: 1;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 左から */
.fadeLeft__04 {
  animation-name: fadeLeftAnime04;
  animation-duration: 2.5s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeLeftAnime04 {
  from {
    opacity: 1;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeRightAnime {
  from {
    opacity: 1;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

footer {
  width: 100%;
  /*background-color: #00421d;*/
  background-image: url(../images/bg-support_menu.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  padding: 50px 0;
  position: relative;
  z-index: 9;
}
.footer__main {
  width: 95%;
  margin: 0 auto;
}
.footer__main .logo {
  width: 555px;
  padding-top: 50px;
}
.footer__main .logo img {
  width: 100%;
  height: auto;
}
.footer__main .left {
  float: left;
}
.footer__main .right {
  float: right;
  width: 30%;
}
.footer__main .right nav {
  width: 100%;
}
.footer__main .right nav ul li {
  margin-bottom: 15px;
}
.footer__main .right nav ul li a {
  font-size: 2rem;
  color: #FFF;
  text-decoration: none;
}
.footer__main .right nav ul li a:hover {
  font-size: 2rem;
  color: #FFF;
  text-decoration: underline;
}
.footer__main:after {
  content: "";
  clear: both;
  display: block;
}
.f-contact .read_more {
  width: 100px;
  padding: 14px 0 16px 0;
  font-size: 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: block;
  line-height: 1;
  border-radius: 50px;
  transition: all .2s;
  margin: 5% 0 10% 2%;
  background-color: #fff;
  border-color: #444;
  color: #444;
}
.f-contact .read_more {
  /*背景色と同じ枠色を追加*/
  border: 2px solid #FFF;
}
.f-contact .read_more:hover {
  color: #444;
  background: #b7dbab;
}
.f-link {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  padding: 30px 0;
}
.f-line {
  width: 40px;
  margin: 10px 30px 0 30px;
}
.f-line img {
  width: 100%;
  height: auto;
}
.f-slack {
  width: 40px;
  margin: 10px 30px 0 0px;
}
.f-slack img {
  width: 100%;
  height: auto;
}
.f-nav-language {
  color: #FFF;
  margin: 20px 0 0 0;
  font-size: 2rem;
}
.f-nav-language a {
  color: #FFF;
  font-size: 2rem;
  text-decoration: none;
}
.f-nav-language_en, .f-nav-language_line, .f-nav-language_jp {
  float: left;
  margin-right: 10px;
}
.f-nav-language_en a:hover, .f-nav-language_jp a:hover {
  text-decoration: underline;
}
.f-nav-language:after {
  content: "";
  display: block;
  clear: both;
}
.f-link-sendai {
  width: 200px;
  margin-left: 10px;
}
.f-link-sendai img {
  width: 100%;
  height: auto;
}
.copyright {
  padding: 30px 0;
  color: #FFF;
  font-size: 1.6rem;
  margin: 0;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  footer {
    width: 100%;
    background-color: #00421d;
    padding: 50px 0;
  }
  .footer__main {
    width: 95%;
    margin: 0 auto;
  }
  .footer__main .logo {
    width: 80%;
    padding-top: 50px;
  }
  .footer__main .logo img {
    width: 100%;
    height: auto;
  }
  .footer__main .left {
    float: none;
  }
  .footer__main .right {
    float: none;
    width: 100%;
  }
  .footer__main .right nav {
    width: 100%;
    margin-top: 30px;
  }
  .footer__main .right nav ul li {
    margin-bottom: 15px;
  }
  .footer__main .right nav ul li a {
    font-size: 2rem;
    color: #FFF;
    text-decoration: none;
  }
  .footer__main .right nav ul li a:hover {
    font-size: 2rem;
    color: #FFF;
    text-decoration: underline;
  }
  .footer__main:after {
    content: "";
    clear: both;
    display: block;
  }
  .f-contact .read_more {
    width: 150px;
    padding: 14px 0 16px 0;
    font-size: 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: block;
    line-height: 1;
    border-radius: 50px;
    transition: all .2s;
    margin: 5% 0 10% 5%;
    background-color: #fff;
    border-color: #444;
    color: #444;
  }
  .f-contact .read_more {
    /*背景色と同じ枠色を追加*/
    border: 2px solid #FFF;
  }
  .f-contact .read_more:hover {
    color: #444;
    background: #b7dbab;
  }
  .f-link {
    display: flex;width: 100%;
    padding: 30px 0;
  }
	.f-contact {}
  .f-line {
    width: 50px;
    margin: 10px 30px 0 30px;
  }
  .f-line img {
    width: 100%;
    height: auto;
  }
  .f-slack {
    width: 50px;
    margin: 10px 30px 0 0px;
  }
  .f-slack img {
    width: 100%;
    height: auto;
  }
  .f-nav-language {
    color: #FFF;
    margin: 20px 0 0 0;
    font-size: 2rem;
  }
  .f-nav-language a {
    color: #FFF;
    font-size: 2rem;
    text-decoration: none;
  }
  .f-nav-language_en, .f-nav-language_line, .f-nav-language_jp {
    float: left;
    margin-right: 10px;
  }
  .f-nav-language_en a:hover, .f-nav-language_jp a:hover {
    text-decoration: underline;
  }
  .f-nav-language:after {
    content: "";
    display: block;
    clear: both;
  }
  .f-link-sendai {
    width: 200px;
    margin-left: 10px;
  }
  .f-link-sendai img {
    width: 100%;
    height: auto;
  }
  .copyright {
    padding: 30px 0;
    color: #FFF;
    font-size: 1.6rem;
    margin: 0 0 0 5%;
  }
}


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










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





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



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


/* フェードイン(初期値) */
.js-fadeUp4 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .7s, transform .7s;
  
}
/* フェードイン(スクロールした後) */
.js-fadeUp4.is-inview4 {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .7s; /* フェード開始を0.5秒遅らせる */
	
}
/* フェードイン(初期値) */
.js-fadeUp4 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .9s, transform .9s;
  
}
/* フェードイン(スクロールした後) */
.js-fadeUp4.is-inview4 {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .9s; /* フェード開始を0.5秒遅らせる */
	
}
/* フェードイン(初期値) */
.js-fadeUp5 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.1s, transform 1.1s;
  
}
/* フェードイン(スクロールした後) */
.js-fadeUp5.is-inview5 {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 1.1s; /* フェード開始を0.5秒遅らせる */
	
}



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


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



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

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


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



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

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