@charset "utf-8";

body{
  	font-family: "Noto Sans JP", sans-serif;
	background-color: #fff;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	overflow-x: hidden !important;
	color:#353434;
}

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Container */
.container {
	width: 94%;
	max-width:1200px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
*{margin:0; padding:0;}
a:link,a:hover,a:visited{text-decoration:none;}
img, object, embed, video {
	max-width: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.ie6 img {
	width:100%;
}

img{width:100%; height:auto; display:block;}

.logo{max-width:84px;}

header,main,footer{width:100%; margin:0 auto;}

.side{text-align: justify; text-justify: inter-ideograph;}

.fw{font-weight: bold;}
nav{font-size:16px;}
.t_c{text-align: center;}

.f_title{font-size:calc(20px + 16 * (100vw - 320px)/1080); /*20px-36px*/}
.f_title2{font-size:calc(18px + 2 * (100vw - 320px)/1080); /*18px-20px*/;}
.f_title3{font-size:calc(20px + 8 * (100vw - 320px)/1080); /*20px-28px*/;}
.f_title4{font-size:calc(18px + 4 * (100vw - 320px)/1080); /*18px-22px*/;}
.f_text{font-size:calc(14px + 2 * (100vw - 320px)/1080); /*14px-16px*/;}

.p1{padding:5rem 0;}
.p2{padding:3rem 0;}
/******************************* header ****************************************/
.header {
    position: relative;
}

#header{
	position: fixed;
	height: 70px;
	width:100%;
    z-index: 999;
	background:#fff;
}

#header.UpMove{
	position: fixed;
	width:100%;
	animation: UpAnime 0.5s forwards;
}

main{padding-top:70px;}

@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}


#header.DownMove{position: fixed; width:100%; animation: DownAnime 0.5s forwards;}

@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}



.header .r_top .r_nav li a{transition:1.0s;}

.r_top{display: flex; justify-content: space-between; padding:0 1.5%;}
.r_top h1{margin:0.26em 0;}

.r_top {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 100%;
    z-index: 4;
}

.r_top h1 a{display:flex; align-items: center;}
.r_top h1 a span{font-size:14px; white-space: nowrap; line-height: 20px;}

.r_nav1{font-size:16px;}
.r_nav1 li:last-child a{background:#003D97; border-radius: 100vh; color:#fff; padding:0.6rem 1rem; margin-left:0.5rem;}
.r_nav1 li:last-child a:hover{opacity: 0.8;}

.main1{
    position: relative;
    height: 80vh;
}

.main1::before{position: absolute; content:""; top:0; left:0; width:100%; height:100%; background:rgba(107,107,107,.7); mix-blend-mode:multiply; z-index:1;}

.main1_bg{position: absolute;
    bottom: 0;
    right: 0;
    width: 52vw;
    height: -webkit-fill-available;
    content: "";
    background: url("../img/main_bg.png") bottom right no-repeat;
    z-index:0;
    background-size: contain; overflow: hidden; z-index:2;
}

.slidertop{width:100%; height:100%; position: relative; z-index:0; overflow-x: hidden;}
.main1_bg img {
  height: 80vh;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

.main-text-box{display:flex; align-items: center; justify-content:space-between; position: absolute; left:8%; bottom:15%; z-index: 2;}
.main1_h2{color:#fff; font-size:calc(22px + 28 * (100vw - 320px)/1080); /*22px-50px*/ line-height: 90px;}

.main2{padding-bottom:6rem; line-height: 28px;}
.len{max-width:460px;}
.main2_box{display:flex; align-items: center; flex-direction: column; grid-row-gap: 0.9rem; letter-spacing: 1px; padding: 5rem 0 3.5rem;}

.main2_box2{display:flex; flex-direction: column; grid-row-gap: 1rem;font-size: 18px;line-height: 36px;}
.main2_box2-1{padding-bottom:1rem;}
.main2_h3{padding-bottom:1rem; margin-bottom:1rem; position: relative;}
.main2_h3::before{content:""; position: absolute; bottom:0; left:0; width:50px; height:4px; background: #00BBD5; background: linear-gradient(270deg, rgba(0, 187, 213, 1) 0%, rgba(0, 56, 148, 1) 100%);}


.main3{position:relative; padding:3rem 0 4rem;}
.main3::before{content:""; width:94vw; height:35vh; background:#003894; position: absolute; top:0; left:0; z-index: -1;}

.main3_box h2{color:#fff; padding-bottom:3rem;}

.main3_box2{display:flex; align-items:flex-start ; justify-content: center; grid-column-gap: 60px; flex-wrap: wrap; grid-row-gap: 60px;}
.main3_box2-1{width:100%; max-width:360px; position: relative;}
.platform1img{max-width:360px;}

.main3_num{color:#fff;}
.main3_num2{color:#003894;}
.main3_num,.main3_num2{font-size:46px; position: absolute; top:-1.5rem; left:-1rem; letter-spacing: 2px;}

.main3_p1{padding-top:1rem; line-height: 24px;}

.main4{position: relative; padding:6rem 0;}
.main4::before{background:url("../img/message.jpg") center no-repeat; width:100%; height:100%; background-size: cover; position: absolute; top:0; left:0; content:""; z-index: -2;}
.main4::after{content:""; position: absolute; top:0; left:0; width:100%; height: 100%; background:rgba(245,245,245,.9); z-index:-1;}

.main4_p1{padding-bottom:1rem;}
.main4_p1 span{background: #00BBD5; background: linear-gradient(270deg, rgba(0, 187, 213, 1) 0%, rgba(0, 56, 148, 1) 100%); -webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.main4_h2{display:flex; flex-direction: column; grid-row-gap: 1rem; font-feature-settings: "palt";}
.main4_h2_span2{line-height: 34px;}

.main4_box1{display:flex; flex-direction: column; grid-row-gap: 1rem; padding:2rem 0 0; line-height:28px;}

.slider {margin-inline: auto; width: 100%; padding:0 0 4rem 0;}
.slider-img {margin: 0 10px;}
.slider-img img {height: auto; width: 100%; max-width: 835px; margin:0 auto;}

.main5_box3{display:flex; align-items: stretch; grid-column-gap: 2rem; grid-row-gap: 2rem; width:80%; justify-content:center; margin:0 auto;}
.main5_l{background:#003894; border-radius: 8px; padding:2rem;}
.main5_h3{color:#fff; text-align: center; white-space: nowrap; line-height: 28px;}
.main5_r{display:flex; align-items: center; line-height: 28px;}

.main6{position: relative;}
.main6::before{content:""; width:94vw; height:40vh; background:#F5F5F5; position: absolute; top:0; left:0; z-index: -1;}

.main6_h2{line-height:56px;}
.main6_h2 span{background: #00BBD5; background: linear-gradient(270deg, rgba(0, 187, 213, 1) 0%, rgba(0, 56, 148, 1) 100%); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; display:inline-block;}

.main6_div1{display:flex; align-items: flex-end; grid-column-gap: 3rem; padding:3rem 0 5rem;}

.howimg{max-width:434px;}
.main6_ul li span{position:relative; padding-left:1.5rem; display: inline-block;}
.main6_ul li span::before{content:""; position: absolute; top:2px; left:0; width:13px; height:13px; background: #00BBD5; background: linear-gradient(270deg, rgba(0, 187, 213, 1) 0%, rgba(0, 56, 148, 1) 100%);}
.main6_ul{display:flex; flex-direction: column; grid-row-gap: 2rem;}

.main6_h3{line-height:48px; padding:2rem 0;}
.main6_movie {width: 100%; text-align: center; margin: 0 auto; padding: 4%;}
.main6_movie video {width: 100%; max-width: 860px; height:auto;}
.main6_movie p {font-size: 18px; line-height: 26px; font-weight: bold; padding-top: 8px;}
.main6_movie p span{font-size: 90%; font-weight: normal;}

.main6_div2{display:flex; align-items: flex-start; grid-column-gap: 3rem; padding:3rem 0 5rem;}
.main6_div2 .main6_div2_l{flex: 0 0 300px; display: grid; grid-row-gap: 1rem; font-size: 18px; line-height: 26px; font-weight: bold;}
.main6_div2 .main6_div2_l span{font-size: 90%; font-weight: normal;}
.main6_div2 .main6_div2_r{flex: 1; display: grid; grid-row-gap: 1rem; font-size: 18px; line-height: 36px;}

.main6_btn{display:flex; align-items: center; justify-content: center; padding:4rem 0 0;}
.main6_btn a{display:block; padding:1rem 0.5rem; border-radius: 100vh; background:#003894; color:#fff; text-align: center; width:100%; max-width:645px; line-height:28px; transition: 1.0s;}
.main6_btn a:hover{opacity: 0.8;}

.main6 .main6_btn{padding-top:2rem;}

.main7{background:#DBE0E9;}
.main7_div h2 span{font-size:60%;}
.main7_p1{font-size:20px; margin-top:0.6rem;}
.main7_p1 span{background: #00BBD5; background: linear-gradient(270deg, rgba(0, 187, 213, 1) 0%, rgba(0, 56, 148, 1) 100%); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; display:inline-block;}
.main7_div2{padding:2rem 0; border-bottom:1px solid #ABB0B9;}
.main7_div3{width:100%; margin:0 auto; background:#fff; padding:2rem 3rem; display:flex; align-items:stretch; margin-top:2rem;}

.main7_div3-l{padding:0 3rem; border-right:1px solid #ABB0B9; display:flex; align-items: center; justify-content: center;}
.main7_h3{white-space: nowrap;}
.main7_div3-r{padding:0 3rem; display:flex; justify-content: center;}
.main7_p2{line-height:28px;}

.main8_div2{display:flex; flex-direction: column; grid-row-gap: 2rem; width:100%; padding:2rem 0;}
.main8_d2_box{background:#F5F5F5; display:flex; flex-direction: column; grid-row-gap: 1.5rem; padding:2rem 3rem;}
.main8_p1 .q1{background:url("../img/faq1.svg") no-repeat; width:100%; max-width:61px; height:61px;}
.main8_p1{font-size:18px;}
.main8_p2 .a1{background:url("../img/faq2.svg") no-repeat; width:100%; max-width:61px; height:61px;}
.main8_p1,.main8_p2{display:flex; align-items: center; grid-column-gap: 1.5rem; line-height: 28px;}

.main9{position: relative;}
.main9::before{background:url("../img/footer.jpg") center no-repeat; width:100%; height:100%; background-size: cover; position: absolute; top:0; left:0; content:""; z-index: -2;}
.main9::after{content:""; position: absolute; top:0; left:0; width:100%; height: 100%; background:rgba(0,0,0,.5); z-index:-1;}

.main9_div{color:#fff;}
.main9_div2{display:flex; flex-direction: column; grid-row-gap: 1rem; padding:2rem 0; width:80%; margin:0 auto;}
.main9_d2_p1{background:#fff; padding:1.3rem 2rem; font-size:16px;}
.main9_d2_p1 span{position: relative; padding-left:22px;}
.main9_d2_p1 span::before{content:""; position: absolute; top:0; left:0; background:url("../img/arrow.svg") center no-repeat; width:12px; height:19px;}
.main9_p3{text-align: center; font-size:20px; line-height: 32px;font-weight: bold;} 
.fot{background:#000; padding:1rem 0;}
.fot_div{display:flex; align-items: center; justify-content: space-between;}
.fot_div1{display:flex; align-items: center; grid-column-gap: 1.5rem;}
.logo_f{max-widsth:91px; width:100%;}
.fot_p1{color:#666666; font-size:14px;}