@charset "UTF-8";

@font-face {
font-family: 'MOBO';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/MOBO-RegularSubset.woff2') format('woff2'),
url('../fonts/MOBO-RegularSubset.woff') format('woff');
}

@font-face {
font-family: 'MOBO';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/MOBO-BoldSubset.woff2') format('woff2'),
url('../fonts/MOBO-BoldSubset.woff') format('woff');
}

@font-face {
  font-family: 'MOBO';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/MOBO-SemiBoldSubset.woff2') format('woff2'),
  url('../fonts/MOBO-SemiBoldSubset.woff') format('woff');
  }

html {font-size: 62.5%;}
h1, h2, h3, h4, h5, h6, p, a,li, ol, span, small, th, td, dd, dt, b, input, label {
  /*-- A-OTF 見出ゴMB31 Pro MB31 --*/
	font-family: "MOBO", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 400;
	color: #000;
	line-height: 1.4em;
	letter-spacing: 0.05em;
}
.footer{ position: relative;}
img{ display: inline; height: auto;}
#page-top { position: fixed; right: 30px; bottom: 30px; z-index: 10; opacity: 0; transform: translateY(100px);}
#page-top a { position: relative; display: block;width: 65px; height: 65px; transition: all 0.3s;}
#page-top a:hover { opacity: .7;}
#page-top.UpMove { animation: UpAnime 0.5s forwards;}
#page-top.DownMove { animation: DownAnime 0.5s forwards;}
@keyframes UpAnime {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes DownAnime {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(100px); }
}
/*--common --*/
.pd01{ padding: 0 20px;}
.flex{ display: flex;}
p{ font-size: 1.6rem;}
a.fit_w{ display: block; margin: 32px auto 0; width: fit-content;}
a.fit_w > picture{ width: fit-content;}
a > img{ transition: all .3s ease-in-out;}
.showPC{ display: none!important;}
.kome{
  /*- GothicMB101Pro */
  font-family: source-han-sans-japanese, sans-serif;
  font-size: 1rem;
  margin-top: 8px;
  text-align: center;
}
.kome02{
  /*- GothicMB101Pro */
  font-family: source-han-sans-japanese, sans-serif;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

/*-- contents --*/
.txt_dec01{
  width: 230px;
  background-color: #00b4df;
  display: block;
  border-radius: 30px;
  padding: 24px 8px;
  margin: 24px auto;
}
.txt_dec01 > b{
  display: block;
  color: #fff;
  font-size: 2rem;
  line-height: 2.2em;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
.sec_forLife{ padding: 64px 8px 88px;}
.sec_forLife > p{
  font-size: 4vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 3.6em;
  text-align: center;
  font-weight: 500;
}

.sec_sagatoco{
  background-color: #b2e9f7;
  padding: 42px 16px 56px
}
.sec_sagatoco .flex{ flex-flow: column;}
.apps{
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-top: 32px;
}
.apps > div{ margin-top: 24px; text-align: center;}
.apps > div > p{ margin-bottom: 4px;}
a.sagatocoLink{ margin-top: 48px;}
.sec_sagatoco .fs01{
  font-size: 4vw;
  text-align: center;
  line-height: 2.2em;
  letter-spacing: 0;
  font-weight: 500;
}
img.app_img{ display: block; margin: 48px auto 40px;}
.sagatoco_txt{ text-align: center;}
.title_fs01{
  /*- GothicMB101Pro */
  color: #00b6e3;
  font-family: source-han-sans-japanese, sans-serif;
  font-size: 8.5vw;
  font-weight: bold;
  letter-spacing: 0.01em;
  line-height: 2.3em;
  text-align: center;
  margin-bottom: 48px;
}
.link01{ text-align: center;}
.topics{ padding: 56px 16px 48px;}
.title_fs02 > b{
  font-family: "din-2014", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #b2e9f7;
  font-size: 6.4rem;
  letter-spacing: 0;
}
.title_fs02 > span{
  /*- GothicMB101Pro */
  display: block;
  text-align: right;
  font-family: source-han-sans-japanese, sans-serif;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  margin-top: -1.6em;
}
.title_fs02 > span > small{ font-weight: bold; font-family: inherit;}
.mg01{ margin-bottom: 56px; margin-top: 40px;}
.mg02{ margin-top: 48px; margin-bottom: 88px;}
.topics_img02{ text-align: center;}

.movie{
  background-color: #00b6e3;
  padding: 40px 16px 48px;
}
.movie .flex{ flex-flow: column;}
.title_fs03{
  font-family: "din-2014", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #fff;
  font-size: 6.4rem;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 24px;
}
.movie_items{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  margin-bottom: 40px;
}
.movie_items:last-child{ margin-bottom: 0;}
.movie_items > .title{
  order: 2;
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1.6em;
  margin-top: 8px;
}
.movie_items > .title > a{
  text-decoration: none;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: bold;
  font-feature-settings: "palt";
  letter-spacing: 0;
}
.movie_items > .thum{
  text-decoration: none;
  order: 1;
  display: block;
  width: 100%;
  max-width: 480px;
}
.movie_items > .thum img{ width: inherit;}
.catch{ padding: 40px 0 72px;}
.catch.flex{ flex-flow: column;}
.catch_txt{
  font-size: 4.4vw;
  text-align: center;
  line-height: 2.2em;
  letter-spacing: 0;
  font-weight: 500;
}
.catch_txt > small{ font-size: 3.6vw; font-weight: inherit;}
.catch_txt02{
  font-size: 5.4vw;
  text-align: center;
  line-height: 2.2em;
  letter-spacing: 0;
}
.catch_mg01{ margin-top: 40px;}
.img01{ margin-top: 64px;}
.img01 img{ width: 100%;}
.fv{ position: relative;}
.fv img{ vertical-align: bottom;}
.fv h1{
  position: absolute;
  bottom: 24px;
  left: 20px;
}
.fv .fv_txt{
  position: absolute;
  top: 28px;
  right: 20px;
}
.app_bnr{ width: 90%; margin: 0 auto; max-width: 300px;}



/*-- footer --*/
footer{
  background-color: #00b4df;
  padding: 48px 16px 8px;
}
footer .flex{ flex-flow: column;}
footer .f_logo{
  display: block;
  width: fit-content;
  text-align: center;
  margin: 0 auto 48px;
}
footer ul.linklist{
  list-style: none;
  padding: 0;
  width: fit-content;
  margin: 48px auto 56px;
}
footer .address{ text-align: center;}
footer .address > p{
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 32px;
}
footer .address .tel{
  text-decoration: none;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
}
footer ul.linklist a{
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-family: source-han-sans-japanese, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.8em;
}
footer ul.linklist > li::before{
  content: '▶';
  color: #fff;
  padding-right: 0.5em;
}
footer .copyright{
  /*A-OTF 見出ゴMB31 Pro MB31*/
  color: #fff;
  font-family: source-han-sans-japanese, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
}

/*--- animation --*/
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 20%);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
body{ position: relative;}
body::before{
  content: '';
  background-color: #000;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}
body.show::before{ animation: show 0.6s ease-in-out forwards;}
@keyframes show {
  0%{ opacity: 1;}
  100%{ opacity: 0; z-index: -1;}
}
.fv_txt{
  opacity: 0;
  transition: transform 0.5s linear;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}
.content-open .fv_txt{
  animation-name: imageBlur;
  opacity: 1;
  transition: .8s;
}
@keyframes imageBlur {
  from { opacity: 0;  filter: blur(15px); }
  to { opacity: 1; filter: blur(0px); }
}
header h1{ opacity: 0; transition: all 0.3s 0.8s ease-in-out;}
.content-open header h1{ opacity: 1;}

.fadeIn_up h2{
  opacity: 0;
  transform: translateX(-100px);
  transition: all .8s.3s ease-in-out;
}
.fadeIn_up.is-show h2{
  opacity: 1;
  transform: translateX(0);
}


@media screen and (min-width: 480px) {
  .catch_txt{ font-size: 1.8rem;}
  .catch_txt02{ font-size: 2.2rem;}
  .sec_forLife > p{ font-size: 1.8rem;}
  .sec_sagatoco .fs01{ font-size: 1.8rem;}
  .title_fs01{ font-size: 3.2rem;}
}

@media screen and (min-width: 580px) {
  .pc_no_br580 br{ display: none;}
  
}
@media screen and (min-width: 769px) {
  .showPC{ display: block!important;}
  .nonePC{ display: none!important;}
  .pc_no_br br{ display: none;}
  .flex{ flex-flow: row;}
  .invew-delay{ transition-delay: 0.2s;}
  .show_txt b::before{ transform: scaleX(0); transition: all .3s .3s linear; transform-origin: left top;}
  .is-show .show_txt b::before{ transform: scaleX(1);}
  .is-show .show_txt b:nth-child(2):before{ transition-delay: 0.6s;}
  .is-show .show_txt b:nth-child(3):before{ transition-delay: 0.9s;}
  .is-show .show_txt b:nth-child(4):before{ transition-delay: 1.2s;}
  a:hover > picture:not(.app_bnr){ animation: hover 1s ease-in-out; transform-origin: center;}
  a:hover > picture.app_bnr{ opacity: 0.6;}
  a:hover > img{ opacity: 0.6;}
  a,
  a > picture.app_bnr{ transition: opacity .3s ease-in-out;}
  @keyframes hover {
    0%{ transform: rotateZ(0);}
    20%{ transform: rotateZ(1deg);}
    40%{ transform: rotateZ(-1deg);}
    60%{ transform: rotateZ(1deg);}
    80%{ transform: rotateZ(-1deg);}
    100%{ transform: rotateZ(0);}
  }

  .fv .fv_txt{ top: 20px; right: 108px; }
  .fv .fv_txt img{ width: 100px;}
  .fv h1{ left: 44px; bottom: 28px;}  
  .catch{ max-width: 860px; margin: 0 auto; padding: 92px 20px 95px;}
  .catch.flex{ flex-flow: row; justify-content: space-between; align-items: flex-start;}
  .catch.flex > picture{ margin-top: 0; max-width: 437px; width: 51%;}
  .catch_txt{ text-align: left; font-size: 1.8rem; line-height: 2.3em;}
  .catch_txt > small{ font-size: 1.4rem;}
  .title_fs03{
    max-width: 1170px;
    text-align: left;
    margin: 0 auto;
    line-height: 1em;
    font-size: 10rem;
  }
  .title_fs02 > b{ font-size: 10rem;}
  .movie{ background-color: #b2e9f7;}
  .movie .flex{ 
    max-width: 867px;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto 0;
  }
  .movie_items{ margin-bottom: 0; max-width: 422px; width: 49%;}
  .movie_items > .title{ order: 1; margin: 0 0 8px; font-size: 1.9rem;}
  .movie_items > .title > a{ letter-spacing: -0.01em;}
  .movie_items > .thum{ order: 2; width: 100%; overflow: hidden;}
  .movie_items > .thum > img{ transition: all .3s ease-in-out;}
  .movie_items > .thum:hover > img{ transform: scale(1.1);}

  .title_fs02 > span{ text-align: center; font-size: 3.6rem; padding-left: 0;}
  .title_fs02 > span > small{ font-size: 2.4rem;}
  .topics{ max-width: 1170px; margin: 0 auto; padding: 74px 20px 44px;}
  .topics_img01{ text-align: center;}
  .topics_img02 > img{  max-width: 725px; width: 80%;}
  .mg01{ margin-top: 53px;}
  .mg03{ margin-top: 44px;}
  .kome{ font-size: 1.8rem;}
  .link01 > img{ width: 624px;}

  .sec_sagatoco{ padding: 56px 20px 80px;}
  .sec_sagatoco .flex{
    max-width: 900px;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto;
  }
  .title_fs01{ font-size: 4rem; line-height: 1.8em;}
  img.app_img{ margin: 0; margin-right: 55px; width: 270px;}
  .sagatoco_txt{ text-align: left; max-width: 586px;}
  .sagatoco_txt > img{ width: 100%;}
  .sec_sagatoco .fs01{ text-align: left; margin-top: 32px; font-size: 1.9rem;}
  .sec_sagatoco .fs01 > br{ display: none;}
  .apps > div{ margin-top: 0; text-align: left;}
  .apps > div:first-child{ width: 42%; margin-right: 5%;}
  .apps > div:last-child{ width: 50%;}
  .sec_sagatoco .flex.apps{ margin-top: 48px; }
  .apps > div > p{ text-align: center;}
  a.fit_w{ margin-top: 60px;}

  .sec_forLife{ max-width: 880px; margin: 0 auto;}
  .sec_forLife > p{ letter-spacing: 0;}
  .sec_forLife > p > br{ display: none;}
  a.fit_w > picture > img{ width: 645px;}
  .txt_dec01{
    width: auto;
    background-color: transparent;
    padding: 0;
    margin: 16px 0;    
  }
  .txt_dec01 > b{
    display: inline-block;    
    line-height: 1.8em;
    margin-left: 1em;
    position: relative;
  }
  .txt_dec01 > b::before{
    content: '';
    background-color: #00b6e3;
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .txt_dec01 > b:first-child{ margin-left: 0;}
  .app_bnr{ width: 100%; max-width: none;}

  /*-- footer --*/
  footer{ padding: 48px 20px;}
  footer .flex{
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 827px;
    margin: 0 auto;
  }
  footer ul.linklist{ margin: 0;}
  footer ul.linklist a::after{
    content: '';
    display: block;
    background-color: #fff;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transition: all .3s ease-in-out;
  }
  footer ul.linklist a:hover::after{  transform: scaleX(1);}
  footer .f_logo{ margin: 0 0 24px;}
  footer .address{ text-align: left;}
  footer .address > p{ text-align: left; margin-bottom: 0; font-size: 1.8rem; margin-bottom: 4px;}
  footer .address > p > br{ display: none;}
  footer .address .tel{ text-align: left; font-size: 2.3rem; }
  footer .copyright{ margin-top: 48px; font-size: 1.6rem;}
}
@media screen and (min-width: 880px) {
  .title_fs02 > span{ padding-left: 20%; text-align: left;}

}
@media screen and (min-width: 1024px) {
  .fv .fv_txt{ top: 80px;}
  .fv .fv_txt img{ width: 130px;}
}