@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");
section, nav, article, aside, hgroup, header, footer, figure, figcaption, details {
  display: block; }

html, body, div, span, applet, object, iframe, strong, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, legend, caption, tbody, tfoot, thead, table, label, tr, th, td, figure {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline; }

html {
  -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Noto Sans JP','Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
  color: #000;
  line-height: 1.8; }

body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0; }

li {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  text-decoration: none; }

img {
  vertical-align: top;
  max-width: 100%; }

hr {
  height: 1px;
  background-color: #ccc;
  border: 0; }

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }

.video-container iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1; }

.pc_only {
  display: block; }

.pc_only_inline {
  display: inline; }

.sp_only,
.sp_only_inline {
  display: none; }

.wrap {
  max-width: 1000px;
  padding: 0 15px;
  margin: 0 auto;
  font-size: 18px; }
  .wrap:after {
    content: "";
    display: block;
    clear: both; }

.to_top {
  transition: top .6s ease, opacity .6s ease;
  position: relative;
  top: 50px;
  opacity: 0; }

.isAnimate.show.to_top {
  top: 0;
  opacity: 1; }

.to_top_left {
  transition: all 1s ease;
  position: relative;
  top: 50px;
  left: 50px;
  opacity: 0; }

.isAnimate.show.to_top_left {
  top: 0;
  left: 0;
  opacity: 1; }

.to_top_right {
  transition: all 1s ease;
  position: relative;
  top: 50px;
  right: 50px;
  opacity: 0; }

.isAnimate.show.to_top_right {
  top: 0;
  right: 0;
  opacity: 1; }

em {
  font-weight: 700; }

.btn_ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1; }
  .btn_ripple .a {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #0073df;
    transition: all 0.2s;
    position: relative; }
    .btn_ripple .a div {
      position: absolute;
      top: 50%;
      left: 52%;
      transform: translate(-50%, -50%);
      z-index: 1; }
    .btn_ripple .a:before, .btn_ripple .a:after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: #0073df;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      animation: ripple 1.7s infinite;
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    .btn_ripple .a:after {
      animation: ripple2 1.7s infinite;
      animation-delay: 0.32s; }
@keyframes ripple {
  0% {
    opacity: 1;
    transform: scale(0.5); }
  100% {
    opacity: 0;
    transform: scale(2.8); } }
@keyframes ripple2 {
  0% {
    opacity: 1;
    transform: scale(0.5); }
  100% {
    opacity: 0;
    transform: scale(2.8); } }
.btn a {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 60px;
  color: #fff;
  letter-spacing: 0.025em;
  padding: 20px 100px;
  position: relative;
  background: #06c755; }
.btn a:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  position: absolute;
  top: 50%;
  right: 35px;
  transform: translateY(-50%) rotate(-45deg); }

/*============================================================================
*
* バウンドするボタン
*
============================================================================*/
.bounce-in {
  display: block;
  visibility: visible !important;
  animation-fill-mode: both !important;
  animation-iteration-count: infinite !important;
  animation: bounce-in 1.8s;
  animation-timing-function: linear; }

@keyframes bounce-in {
  0% {
    transform: scale(1);
    opacity: 1; }
  25% {
    transform: scale(1.05); }
  40% {
    transform: scale(0.85); }
  50% {
    transform: scale(1.05); }
  60% {
    transform: scale(0.93); }
  70% {
    transform: scale(1.03);
    opacity: 1; }
  80% {
    transform: scale(0.95); }
  90% {
    transform: scale(1.01); }
  100% {
    transform: scale(1); } }
/*=======================================
	timer
=======================================*/
.timer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 80px;
  background: url("../images/bg_blue_header.png") no-repeat center;
  background-size: cover;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #fff; }
  .timer .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; }
  .timer p {
    color: #f0ff00;
    margin: 0 20px 0 0;
    padding: 0 0 0 45px;
    position: relative; }
    .timer p:before {
      content: "";
      display: block;
      width: 27px;
      height: 33px;
      background: url("../images/icon_timer.png") no-repeat;
      background-size: 100% auto;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); }

/*=======================================
	fixed_bnr
=======================================*/
.fixed_bnr {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 200; }

/*=======================================
	mv
=======================================*/
.mv {
  background: url("../images/mv_bg.jpg") no-repeat center top;
  background-size: contain;
  text-align: center;
  padding: 65px 0 100px;
  position: relative;
  /*	&:before{
  		content: "";
  		display: block;
  		width: 44px;
  		height: 16px;
  		background: url("../images/scroll.png");
  		position: absolute;
  		bottom: 110px;
  		left: 50%;
  		transform: translateX(-50%);
  	}
  	&:after{
  		content: "";
  		display: block;
  		width: 1px;
  		height: 100px;
  		background: #6aafe5;
  		position: absolute;
  		bottom: 0;
  		left: 50%;
  	}*/ }
  .mv figcaption {
    margin: 30px 0 0; }
    .mv figcaption a {
      display: inline-block;
      font-size: 30px;
      font-weight: 700;
      line-height: 1.4;
      border-radius: 60px;
      color: #fff;
      letter-spacing: 0.025em;
      padding: 20px 100px;
      position: relative;
      background: #06c755; }
    .mv figcaption a:after {
      content: "";
      display: block;
      width: 18px;
      height: 18px;
      box-sizing: border-box;
      border-right: 4px solid #fff;
      border-bottom: 4px solid #fff;
      position: absolute;
      top: 50%;
      right: 35px;
      transform: translateY(-50%) rotate(-45deg); }

/*=======================================
	movie_wrap
=======================================*/
.movie_wrap {
  background: url("../images/movie_bg.png") no-repeat center;
  background-size: cover;
  padding: 70px 0 80px;
  text-align: center; }
  .movie_wrap h2:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 15px auto 35px;
    box-sizing: border-box;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg); }
  .movie_wrap figure {
    max-width: 730px;
    margin: 0 auto;
    position: relative; }
  .movie_wrap .movie {
    position: relative;
    width: 100%;
    height: 100%; }
  .movie_wrap .movie .controlArea {
    z-index: 111;
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute; }
  .movie_wrap .movie .cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; }
  .movie_wrap .movie .cover img {
    width: 100%;
    height: auto; }

.autoFrame {
  position: relative !important;
  height: 0 !important;
  padding-top: 56.25% !important;
  overflow: hidden !important;
  z-index: 10; }
  .autoFrame iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; }

.setYoutube {
  position: relative; }
  .setYoutube .iconWrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    line-height: 1; }
  .setYoutube .iconWrapper .icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #0073df;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 100; }
  .setYoutube .iconWrapper .icon img {
    position: relative;
    left: 2px; }
  .setYoutube .iconWrapper .circleBlock {
    position: absolute;
    top: 0;
    left: 0; }
  .setYoutube .iconWrapper .circleBlock div {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #0073df;
    position: absolute;
    top: 0;
    left: 0; }

@media screen and (max-width: 768px) {
  .setYoutube .autoFrame {
    width: 94%;
    margin: 0 auto; }
  .setYoutube .autoFrame.notBg {
    width: 100%; } }
/*=======================================
	explain
=======================================*/
.explain .sec1 {
  padding: 110px 0 0;
  margin: 0 0 150px; }
  .explain .sec1 h2 {
    text-align: center;
    font-size: 38px;
    font-weight: 500;
    margin: 0 0 90px; }
    .explain .sec1 h2 span {
      display: block;
      font-size: 30px; }
  .explain .sec1 .outer {
    padding: 0 0 0 340px;
    position: relative; }
  .explain .sec1 .img {
    position: absolute;
    top: 0;
    left: -190px;
    cursor: pointer; }
  .explain .sec1 .txt em {
    font-size: 1.2222222em; }
.explain .sec2 {
  margin: 0 0 80px; }
  .explain .sec2 h2 {
    text-align: center;
    margin: 0 0 90px; }
  .explain .sec2 figure {
    text-align: center;
    padding: 0 50px;
    margin: 70px 0 90px; }
  .explain .sec2 p .u_line {
    border-bottom: 4px solid #168bcf; }
  .explain .sec2 p .u_line.purple {
    border-color: #8e68e4; }
  .explain .sec2 p em {
    font-size: 1.2222222em; }

/*=======================================
	about
=======================================*/
.about {
  text-align: center; }
  .about em {
    font-size: 1.2222222em; }
  .about h2 {
    margin: 0 0 70px;
    padding: 0 50px; }
  .about h3 {
    margin: 0 0 130px; }
  .about .outer {
    background: #f9fafd;
    padding: 0 0 45px; }
    .about .outer .wrap {
      max-width: none; }
    .about .outer figure {
      margin: 0 0 30px; }
    .about .outer p {
      max-width: 1000px;
      margin: 0 auto;
      text-align: left; }
  .about .box {
    max-width: 1160px;
    background: url("../images/bg_blue.png") no-repeat center;
    background-size: cover;
    padding: 70px 150px;
    box-sizing: border-box;
    text-align: left;
    color: #fff;
    font-size: 22px;
    margin: 0 auto 10px;
    border-radius: 150px;
    position: relative;
    top: -50px; }
    .about .box:before, .about .box:after {
      content: "";
      display: block;
      width: 1px;
      height: 40px;
      background: #168bcf;
      position: absolute;
      top: -40px;
      left: 50%; }
    .about .box:after {
      background: #fff;
      top: 0; }
  .about .list {
    background: #f9fafd;
    padding-bottom: 70px; }
    .about .list p {
      font-size: 14px;
      text-align: right;
      padding: 0 50px 0 0;
      margin: 15px 0 0; }

/*=======================================
	system
=======================================*/
.system {
  text-align: center;
  padding: 100px 0 0; }
  .system em {
    font-size: 1.2222222em; }
  .system .box {
    max-width: 1160px;
    background: url("../images/bg_purple.png") no-repeat center;
    background-size: cover;
    padding: 70px 150px;
    box-sizing: border-box;
    text-align: left;
    color: #fff;
    font-size: 22px;
    margin: 0 auto 70px;
    border-radius: 150px;
    position: relative; }
    .system .box:before, .system .box:after {
      content: "";
      display: block;
      width: 1px;
      height: 40px;
      background: #8e68e4;
      position: absolute;
      top: -40px;
      left: 50%; }
    .system .box:after {
      background: #fff;
      top: 0; }
  .system .box_wrap + .wrap {
    text-align: left; }
  .system .outer {
    max-width: 1300px;
    margin: 130px auto 0;
    box-sizing: border-box;
    background: #f9fafd;
    padding: 70px 100px 100px;
    position: relative; }
    .system .outer:before {
      content: "";
      display: block;
      width: 140px;
      height: 70px;
      background: url("../images/arrow.png") no-repeat;
      position: absolute;
      top: -55px;
      left: 50%;
      transform: translateX(-50%); }
    .system .outer h2 {
      margin-bottom: 50px; }
  .system .sec1 {
    margin: 0 0 60px; }
    .system .sec1 p {
      margin: 0 0 50px; }
  .system .sec2 .more {
    margin: 0 0 50px; }
    .system .sec2 .more img {
      width: 215px; }
  .system .sec2 figure {
    margin: 70px 0 60px; }
  .system .sec2 .txt p {
    margin: 30px 0 0; }

/*=======================================
	cta
=======================================*/
.cta {
  text-align: center; }
  .cta em {
    font-size: 1.2222222em; }
  .cta .sec1 {
    padding: 100px 0 320px; }
    .cta .sec1 h2 {
      margin: 0 0 50px; }
    .cta .sec1 h3 {
      margin: 100px 0 50px; }
    .cta .sec1 p {
      max-width: 880px;
      margin: 0 auto;
      text-align: left; }
  .cta .sec2 {
    background: url("../images/cta_bg.png") no-repeat center top;
    background-size: cover;
    padding: 0 0 80px; }
    .cta .sec2 .wrap {
      max-width: none; }
    .cta .sec2 .h {
      margin: 0 0 70px;
      position: relative; }
      .cta .sec2 .h img {
        margin: -245px 0 0; }
      .cta .sec2 .h:after {
        content: "";
        display: block;
        width: 1px;
        height: 100px;
        background: #b1b1b1;
        position: absolute;
        bottom: -38px;
        left: 50%; }
    .cta .sec2 ul {
      display: flex;
      justify-content: center;
      margin: 0 0 55px; }
    .cta .sec2 li {
      width: 255px;
      height: 307px;
      padding: 75px 0 0;
      margin: 0 33px;
      box-sizing: border-box;
      background: url("../images/earth_bg.png") no-repeat;
      background-size: 100% auto;
      color: #fff;
      font-size: 22px; }
    .cta .sec2 .btn {
      display: inline-block;
      margin: 80px 0 30px;
      /*			a{
      				display: inline-block;
      				position: relative;
      			}
      			a:before{
      				content: "";
      				display: block;
      				width: 110px;
      				height: 114px;
      				background: url("../images/cta_btn_icon.png") no-repeat;
      				background-size: 100% auto;
      				position: absolute;
      				top: -88px;
      				left: 32px;
      			}*/ }
    .cta .sec2 .note {
      max-width: 580px;
      margin: 0 auto;
      text-align: left;
      font-size: 16px;
      text-indent: -1em;
      padding: 0 0 0 1em; }

/*=======================================
	footer
=======================================*/
footer {
  text-align: center;
  background: #232323;
  color: #fff;
  line-height: 1;
  padding: 25px 0 20px; }
  footer .wrap {
    font-size: 16px; }
  footer a {
    color: #fff; }
    footer a:hover {
      text-decoration: underline; }
  footer ul {
    display: flex;
    justify-content: center;
    margin: 0 0 15px; }
  footer li {
    margin: 0 10px; }
  footer p {
    font-size: 14px; }

/*=======================================
	modal
=======================================*/
#modal-content {
  width: 100%;
  max-width: 1000px;
  padding: 0 20px;
  box-sizing: border-box;
  height: calc(100vh - 100px);
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 301; }
  #modal-content .outer {
    height: 100%;
    margin: 0 auto;
    color: #fff;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none; }
  #modal-content .outer::-webkit-scrollbar {
    display: none; }
  #modal-content .inner {
    position: relative;
    padding-bottom: 100px; }
    #modal-content .inner .name {
      display: none; }
    #modal-content .inner figure {
      text-align: center; }
    #modal-content .inner p {
      margin: 3em 0; }
  #modal-content .more {
    text-align: center; }
    #modal-content .more h2 {
      margin: 70px 0 45px; }
      #modal-content .more h2 span {
        display: inline-block;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        padding: 0 45px;
        position: relative; }
      #modal-content .more h2 span:before,
      #modal-content .more h2 span:after {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-image: url("../images/icon_check.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: auto 100%;
        position: absolute;
        bottom: 0;
        left: 0; }
      #modal-content .more h2 span:after {
        background-position: right center;
        left: auto;
        right: 0; }
    #modal-content .more ul {
      display: flex;
      justify-content: center; }
    #modal-content .more li {
      width: 400px;
      margin: 0 25px; }
      #modal-content .more li img {
        transition: all 0.2s; }
      #modal-content .more li img:hover {
        transform: scale(1.05); }
  #modal-content .modal-close {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer; }
    #modal-content .modal-close:before, #modal-content .modal-close:after {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg); }
    #modal-content .modal-close:after {
      transform: translate(-50%, -50%) rotate(-45deg); }
  #modal-content .modal-close.a {
    position: absolute;
    top: -60px;
    right: 20px; }
  #modal-content .modal-close.b {
    position: absolute;
    bottom: 30px;
    right: 20px; }

#modal-overlay {
  z-index: 300;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.9); }

@media only screen and (max-width: 900px) {
  .cta .sec2 li {
    padding: 60px 0 0;
    font-size: 18px; } }
/******************************************************************************************

	sp size

******************************************************************************************/
@media only screen and (max-width: 768px) {
  .pc_only,
  .pc_only_inline {
    display: none; }

  .sp_only {
    display: block; }

  .sp_only_inline {
    display: inline; }

  .wrap {
    max-width: 620px;
    padding: 0 calc(100vw / ( 640 / 30 ));
    font-size: calc(100vw / ( 640 / 28 )); }

  .btn_ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1; }
    .btn_ripple .a {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #0073df;
      transition: all 0.2s;
      position: relative; }
      .btn_ripple .a div {
        position: absolute;
        top: 50%;
        left: 52%;
        transform: translate(-50%, -50%);
        z-index: 1; }
      .btn_ripple .a:before, .btn_ripple .a:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: #0073df;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        animation: ripple 1.7s infinite;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
      .btn_ripple .a:after {
        animation: ripple2 1.7s infinite;
        animation-delay: 0.32s; }
  @keyframes ripple {
    0% {
      opacity: 1;
      transform: scale(0.5); }
    100% {
      opacity: 0;
      transform: scale(2.8); } }
  @keyframes ripple2 {
    0% {
      opacity: 1;
      transform: scale(0.5); }
    100% {
      opacity: 0;
      transform: scale(2.8); } }
  .btn a {
    display: block;
    font-size: calc(100vw / ( 640 / 28 ));
    border-radius: calc(100vw / ( 640 / 80 ));
    letter-spacing: normal;
    padding: calc(100vw / ( 640 / 40 )) calc(100vw / ( 640 / 70 )); }
  .btn a:after {
    width: calc(100vw / ( 640 / 18 ));
    height: calc(100vw / ( 640 / 18 ));
    border-right: calc(100vw / ( 640 / 4 )) solid #fff;
    border-bottom: calc(100vw / ( 640 / 4 )) solid #fff;
    right: calc(100vw / ( 640 / 30 )); }

  /*=======================================
  	timer
  =======================================*/
  .timer {
    height: calc(100vw / ( 640 / 120 )); }
    .timer .wrap {
      display: block;
      height: auto;
      font-size: calc(100vw / ( 640 / 30 )); }
    .timer p {
      margin: 0 0 calc(100vw / ( 640 / 13 ));
      padding: calc(100vw / ( 640 / 22 )) 0 0;
      font-size: calc(100vw / ( 640 / 28 )); }
      .timer p:before {
        display: none; }

  /*=======================================
  	fixed_bnr
  =======================================*/
  .fixed_bnr {
    right: auto;
    left: 0;
    width: 100%;
    text-align: center; }

  /*=======================================
  	mv
  =======================================*/
  .mv {
    background: url("../images/mv_bg_sp.jpg") no-repeat center top;
    background-size: 100% auto;
    padding: calc(100vw / ( 640 / 50 )) 0 calc(100vw / ( 640 / 100 )); }
    .mv figure div {
      max-width: 400px;
      margin: 0 auto; }
    .mv figcaption {
      margin: calc(100vw / ( 640 / 50 )) 0 0; }
      .mv figcaption a {
        display: block;
        font-size: calc(100vw / ( 640 / 28 ));
        border-radius: calc(100vw / ( 640 / 80 ));
        letter-spacing: normal;
        padding: calc(100vw / ( 640 / 40 )) calc(100vw / ( 640 / 70 )); }
      .mv figcaption a:after {
        width: calc(100vw / ( 640 / 18 ));
        height: calc(100vw / ( 640 / 18 ));
        border-right: calc(100vw / ( 640 / 4 )) solid #fff;
        border-bottom: calc(100vw / ( 640 / 4 )) solid #fff;
        right: calc(100vw / ( 640 / 30 )); }
    .mv:before, .mv:after {
      display: none; }

  /*=======================================
  	movie_wrap
  =======================================*/
  .movie_wrap {
    padding: calc(100vw / ( 640 / 80 )) 0 calc(100vw / ( 640 / 90 )); }
    .movie_wrap h2 {
      max-width: calc(100vw / ( 640 / 480 ));
      margin: 0 auto; }
      .movie_wrap h2:after {
        width: calc(100vw / ( 640 / 30 ));
        height: calc(100vw / ( 640 / 30 ));
        margin: calc(100vw / ( 640 / 23 )) auto calc(100vw / ( 640 / 35 )); }
    .movie_wrap figure {
      max-width: 640px; }

  /*=======================================
  	explain
  =======================================*/
  .explain .sec1 {
    padding: calc(100vw / ( 640 / 90 )) 0 0;
    margin: 0 0 calc(100vw / ( 640 / 100 )); }
    .explain .sec1 h2 {
      font-size: 34px;
      margin: 0 0 calc(100vw / ( 640 / 60 )); }
      .explain .sec1 h2 span {
        font-size: 28px; }
    .explain .sec1 .outer {
      padding: 0; }
    .explain .sec1 .img {
      position: static;
      top: auto;
      left: auto;
      max-width: calc(100vw / ( 640 / 495 ));
      margin: 0 auto calc(100vw / ( 640 / 50 ));
      text-align: center; }
    .explain .sec1 .txt em {
      font-size: 1.142857em; }
  .explain .sec2 {
    margin: 0 0 calc(100vw / ( 640 / 70 )); }
    .explain .sec2 h2 {
      padding: 0 calc(100vw / ( 640 / 30 ));
      margin: 0 0 calc(100vw / ( 640 / 55 )); }
    .explain .sec2 figure {
      padding: 0 calc(100vw / ( 640 / 30 ));
      margin: 0 0 calc(100vw / ( 640 / 70 )); }
    .explain .sec2 p .u_line {
      border-width: 2px; }
    .explain .sec2 p em {
      font-size: 1.142857em; }

  /*=======================================
  	about
  =======================================*/
  .about em {
    font-size: 1.142857em; }
  .about h2 {
    margin: 0 0 calc(100vw / ( 640 / 60 ));
    padding: 0 calc(100vw / ( 640 / 30 )); }
  .about h3 {
    margin: 0 auto calc(100vw / ( 640 / 150 ));
    padding: 0 calc(100vw / ( 640 / 30 ));
    text-align: left;
    max-width: 640px;
    font-size: calc(100vw / ( 640 / 28 )); }
  .about .outer {
    padding: 0 0 calc(100vw / ( 640 / 60 )); }
    .about .outer .wrap {
      max-width: none; }
    .about .outer figure {
      margin: calc(-100vw / ( 640 / 100 )) 0 calc(100vw / ( 640 / 50 )); }
    .about .outer p {
      max-width: 1000px;
      margin: 0 auto;
      text-align: left; }
  .about .box {
    max-width: 640px;
    padding: calc(100vw / ( 640 / 60 )) calc(100vw / ( 640 / 35 ));
    font-size: calc(100vw / ( 640 / 32 ));
    margin: 0 auto calc(100vw / ( 640 / 60 ));
    border-radius: calc(100vw / ( 640 / 20 ));
    top: calc(-100vw / ( 640 / 100 )); }
    .about .box:before, .about .box:after {
      height: calc(100vw / ( 640 / 40 ));
      top: calc(-100vw / ( 640 / 40 )); }
    .about .box:after {
      top: 0; }
  .about .list {
    background: #f9fafd;
    padding-bottom: calc(100vw / ( 640 / 90 )); }
    .about .list figure {
      width: calc(100vw / ( 640 / 420 ));
      margin: 0 auto calc(100vw / ( 640 / 30 )); }
    .about .list p {
      font-size: calc(100vw / ( 640 / 26 )); }

  /*=======================================
  	system
  =======================================*/
  .system {
    padding: calc(100vw / ( 640 / 90 )) 0 0; }
    .system em {
      font-size: 1.142857em; }
    .system .box_wrap {
      padding: 0 calc(100vw / ( 640 / 30 )); }
    .system .box {
      max-width: 640px;
      padding: calc(100vw / ( 640 / 60 )) calc(100vw / ( 640 / 35 ));
      font-size: calc(100vw / ( 640 / 32 ));
      margin: 0 auto calc(100vw / ( 640 / 60 ));
      border-radius: calc(100vw / ( 640 / 20 )); }
      .system .box:before, .system .box:after {
        height: calc(100vw / ( 640 / 40 ));
        top: calc(-100vw / ( 640 / 40 )); }
      .system .box:after {
        top: 0; }
    .system .box_wrap + .wrap {
      text-align: left; }
    .system .outer {
      max-width: 700px;
      margin: calc(100vw / ( 640 / 150 )) auto 0;
      padding: calc(100vw / ( 640 / 80 )) calc(100vw / ( 640 / 30 )) calc(100vw / ( 640 / 90 ));
      position: relative; }
      .system .outer h2 {
        max-width: calc(100vw / ( 640 / 500 ));
        margin: 0 auto calc(100vw / ( 640 / 60 )); }
    .system .sec1 {
      margin: 0 0 calc(100vw / ( 640 / 70 )); }
      .system .sec1 p {
        margin: 0 0 calc(100vw / ( 640 / 60 ));
        text-align: left;
        font-size: calc(100vw / ( 640 / 28 )); }
      .system .sec1 figure.sp_only {
        margin-bottom: calc(100vw / ( 640 / 60 )); }
    .system .sec2 .more {
      margin: 0 0 calc(100vw / ( 640 / 50 )); }
      .system .sec2 .more img {
        width: calc(100vw / ( 640 / 320 )); }
    .system .sec2 figure {
      margin: calc(100vw / ( 640 / 60 )) 0 calc(100vw / ( 640 / 80 )); }
    .system .sec2 p {
      text-align: left;
      font-size: calc(100vw / ( 640 / 28 )); }
    .system .sec2 .txt {
      max-width: calc(100vw / ( 640 / 515 ));
      margin: 0 auto; }
      .system .sec2 .txt p {
        margin: calc(100vw / ( 640 / 60 )) 0 0;
        font-size: calc(100vw / ( 640 / 26 ));
        text-indent: -1em;
        padding-left: 1em; }

  /*=======================================
  	cta
  =======================================*/
  .cta .sec1 {
    padding: calc(100vw / ( 640 / 80 )) 0 calc(100vw / ( 640 / 90 )); }
    .cta .sec1 h2 {
      margin: 0 0 calc(100vw / ( 640 / 74 )); }
    .cta .sec1 h3 {
      margin: calc(100vw / ( 640 / 30 )) 0 calc(100vw / ( 640 / 70 ));
      padding: calc(100vw / ( 640 / 70 )) calc(100vw / ( 640 / 60 )) 0;
      position: relative; }
      .cta .sec1 h3:after {
        content: "";
        display: block;
        width: calc(100vw / ( 640 / 498 ));
        height: calc(100vw / ( 640 / 425 ));
        background: url("../images/cta_sec1_bg.png");
        background-size: 100% auto;
        position: absolute;
        top: 0;
        right: calc(-100vw / ( 640 / 30 ));
        z-index: -1; }
    .cta .sec1 p {
      max-width: 640px; }
  .cta .sec2 {
    background: url("../images/cta_bg_sp.png") no-repeat center top;
    background-size: cover;
    padding: 0 0 calc(100vw / ( 640 / 70 )); }
    .cta .sec2 .h {
      margin: 0 0 calc(100vw / ( 640 / 30 )); }
      .cta .sec2 .h img {
        margin: calc(-100vw / ( 640 / 8 )) 0 0; }
      .cta .sec2 .h:after {
        display: none; }
    .cta .sec2 ul {
      display: block;
      margin: 0 0 calc(100vw / ( 640 / 70 )); }
    .cta .sec2 li {
      width: calc(100vw / ( 640 / 360 ));
      height: calc(100vw / ( 640 / 360 ));
      padding: calc(100vw / ( 640 / 115 )) 0 0;
      margin: 0 auto calc(100vw / ( 640 / 50 ));
      background: url("../images/earth_bg_sp.png") no-repeat;
      background-size: 100% auto;
      font-size: calc(100vw / ( 640 / 28 )); }
    .cta .sec2 .txt {
      padding: 0 calc(100vw / ( 640 / 15 )); }
    .cta .sec2 .btn {
      margin: calc(100vw / ( 640 / 80 )) 0 calc(100vw / ( 640 / 55 )); }
      .cta .sec2 .btn a:before {
        width: calc(100vw / ( 640 / 122 ));
        height: calc(100vw / ( 640 / 123 ));
        top: calc(-100vw / ( 640 / 50 ));
        left: calc(-100vw / ( 640 / 10 )); }
    .cta .sec2 .note {
      font-size: calc(100vw / ( 640 / 26 )); }

  /*=======================================
  	footer
  =======================================*/
  footer {
    padding: calc(100vw / ( 640 / 50 )) 0 calc(100vw / ( 640 / 130 )); }
    footer .wrap {
      font-size: calc(100vw / ( 640 / 26 )); }
    footer ul {
      display: block;
      margin: 0 0 calc(100vw / ( 640 / 50 )); }
    footer li {
      margin: 0 0 calc(100vw / ( 640 / 30 )); }
    footer p {
      font-size: calc(100vw / ( 640 / 20 )); }

  /*=======================================
  	modal
  =======================================*/
  #modal-content {
    padding: 0;
    height: calc(100% - calc(100vw / ( 640 / 150 )));
    top: calc(100vw / ( 640 / 150 ));
    left: 0;
    transform: none; }
    #modal-content .inner {
      padding: 0 calc(100vw / ( 640 / 30 )) calc(100vw / ( 640 / 200 ));
      font-size: 14px; }
      #modal-content .inner .name {
        display: block;
        text-align: center;
        font-weight: 700;
        margin: calc(100vw / ( 640 / 60 )) 0; }
        #modal-content .inner .name h2 {
          font-size: 16px;
          margin-bottom: calc(100vw / ( 640 / 20 )); }
        #modal-content .inner .name p {
          margin: 0; }
      #modal-content .inner p {
        margin: 2em 0; }
    #modal-content .more h2 {
      margin: calc(100vw / ( 640 / 80 )) 0 calc(100vw / ( 640 / 50 )); }
      #modal-content .more h2 span {
        font-size: 14px;
        padding: 0 45px; }
      #modal-content .more h2 span:before,
      #modal-content .more h2 span:after {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-image: url("../images/icon_check.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: auto 100%;
        position: absolute;
        bottom: 0;
        left: 0; }
      #modal-content .more h2 span:after {
        background-position: right center;
        left: auto;
        right: 0; }
    #modal-content .more ul {
      display: block; }
    #modal-content .more li {
      width: auto;
      margin: calc(100vw / ( 640 / 50 )) 0 0; }
      #modal-content .more li img:hover {
        transform: none; }
    #modal-content .modal-close {
      width: calc(100vw / ( 640 / 40 ));
      height: calc(100vw / ( 640 / 40 )); }
    #modal-content .modal-close.a {
      top: calc(-100vw / ( 640 / 60 ));
      right: calc(100vw / ( 640 / 30 )); }
    #modal-content .modal-close.b {
      bottom: calc(100vw / ( 640 / 100 ));
      right: auto;
      left: 50%;
      transform: translateX(-50%); } }
@media only screen and (max-width: 640px) {
  /*	.mv{
  
  		figcaption{
  
  			a{
  				font-size: calc(100vw / ( 640 / 28 ));
  				padding: 0 calc(100vw / ( 640 / 80 ));
  			}
  		}
  	}*/
  .explain .sec1 h2 {
    font-size: calc(100vw / ( 640 / 36 )); }
    .explain .sec1 h2 span {
      font-size: calc(100vw / ( 640 / 32 )); }

  .cta .sec2 .btn a:before {
    width: calc(100vw / ( 640 / 122 ));
    height: calc(100vw / ( 640 / 123 ));
    top: calc(-100vw / ( 640 / 50 ));
    left: calc(100vw / ( 640 / 20 )); } }