@charset "UTF-8";

/** COMMON ********************************************/
html,body,header,footer,div,p,section,h1,h2,h3,h4,h5{margin:0;}
body{background:#022646;font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
sup,sub{font-size:.75em;}
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container{
	max-width:1000px!important;
	margin:auto;
}
img{vertical-align:bottom;}
h1{
	text-align:center;
	color:#FFF;
	font-size:54px;
}
h2{
	font-size:28px;
	line-height: 1.25;
}
.y-btn{
	display:inline-block;
	text-decoration:none;
	background-color:#FFF;
	color:#022646;
	font-weight:bold;
	border:2px solid #fde591;
	padding:1rem;
	width:350px;
	position:relative;
}
.y-btn:before{
	content:"";
	width:13px;
	height:13px;
	position:absolute;
	top:50%;
	right:15px;
	transform:rotate(-45deg) translate(0,-55%);
	border-right:3px solid #000;
	border-bottom:3px solid #000;
}
small, .small{
	font-size:.75rem!important;
}

/** HEADER ********************************************/
header {
	background:url("../img/head_bg.jpg")no-repeat;
	background-position:center center;
	background-size:cover;
	color:#FFF;
}
header #logo{background:#022646;}

/** MAIN ********************************************/
main{background:#022646;}
/** SEC01 *************/
#sec01{
	background:linear-gradient(to right,#1ad2d3,#1da1f2 50%,#235cd0);
}

/** SEC02 *************/
#sec02{
	background:url("../img/bg01.png")no-repeat;
	background-size:100% 100%;
	background-position:center center;
}
/** SEC03 *************/
#sec03{
	background:url("../img/bg01.png")no-repeat;
	background-size:100% 100%;
	background-position:center center;
}
#sec03 .col-md-6 img{width:100%;max-width:436px;}

/** SEC04 *************/
#sec04 {
	background:url("../img/bg01.png")no-repeat;
	background-size:100%;
	background-position:top center;
}
#sec04 .justify-content-center img{width:100%;max-width:436px;}
.bg02{
	background:url("../img/bg02.png")no-repeat;
	background-size:100%;
	background-position:top center;
}
.gradBox{
  width: 100%;
  height: auto;
  padding: 8px;
  text-align: center;
	background:url('../img/gradbg1.png')no-repeat,url('../img/gradbg2.png')no-repeat;
	background-size:100% 100%; 
	background-position:top center,bottom center;
}
.bg-color{
	background:linear-gradient(to right,rgba(26,210,211,.5),rgba(29,161,242,.5) 50%,rgba(35,92,208,.5));
	border-radius:5px;	
}
.ttl{
	background:linear-gradient(to right,#1ad2d3,#1da1f2 50%,#235cd0);
	color:#fff;
	padding:.5rem;
	font-weight:bold;
	font-size:1.25rem;
}
.btns{
	position:absolute;
	bottom:5%;
	left:1.75%;
	right:50%;
	width:27%;
}
.btns img{width:100%;}


/** SEC05 *************/
#sec05{
	background:url("../img/bg01.png")no-repeat;
	background-size:100%;
	background-position:top center;
}
#sec05 .y-btn{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

/** foot *************/


/** FOOTER ********************************************/
footer{max-width:1400px;margin:auto;overflow:hidden;}
.GlobalFooter-saison{
	font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif!important;
	padding: 2.5rem 0;
	background-color: #fff;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	position: relative;
}
.GlobalFooter-saisonInner{
	display: flex;
	align-items: flex-start;
	max-width: 89rem;
	padding-right: 2rem;
	padding-left: 2rem;
	font-size: .75rem;
	line-height: 1.5;
}
.GlobalFooter-saisonLogo{
	margin-top: 1.25rem;
	margin-bottom: 0;
}
.GlobalFooter-saisonContactLinkAndCopy{
	margin-top: 1.4375rem;
	margin-left: 2rem;
}
.GlobalFooter-saisonInfo{
	margin-top: 0.9375rem !important;
	margin-bottom: 0 !important;
	margin-left: auto !important;
	text-align: left;
}
.GlobalFooter-saisonPrivacy{
	margin-left: 9.125rem;
}
/** IPAD ********************************************/
@media(max-width:991px){
}
.pc{display:block;}
.sp{display:none;}
/** SP ********************************************/
@media(max-width:767px){
	body{font-size:.9em;}
	.pc{display:none;}
	.sp{display:block;}
	h1{font-size:28px;}
	h2{font-size:18px;}
	.img img{width:100%;}
	.gradBox{background:none;margin:0!important;padding:0;}
	/************/
	.y-btn{width:100%;}
	/************/
	#sec01 .col-md-6{padding:0;margin:auto;max-width:200px;}
	#sec03 .col-md-12{width:80%;margin:auto;}
	.btns{bottom:5%;left:5%;right:5%;width:90%;}
	#sec04.spbg{position:relative;}
	#sec04.spbg:before{background:url(../img/spbg0.png)no-repeat;background-position:top center;background-size:100%;content:"";width:100%;height:100%;position:absolute;top:20px;left:0;z-index:0;}
	#sec04 .container{position:relative;z-index:1;}
	#sec04 .justify-content-center{flex-direction: column;}
	#sec05.spbg{position:relative;}
	#sec05.spbg:before{background:url(../img/spbg1.png)no-repeat;background-position:top center;background-size:100%;content:"";width:100%;height:100%;position:absolute;top:-50px;left:0;}
	#sec05 .y-btn{position:relative;}
	/** FOOTER **/
	footer{padding:0 1rem;}
	.GlobalHeader.-sticky{border:none;height: 3.125rem;}
	.GlobalHeader-logo{margin-left: auto;width: 10rem;}
	.GlobalFooter-saisonInner{display: grid;-ms-grid-rows: auto auto auto;-ms-grid-columns: 1fr auto;grid-template:"logo logo" auto"contact privacy" auto"info privacy" auto/1fr auto;padding-right: 0;padding-left: 0;font-size: .75rem;line-height: 1.5;}
	.GlobalFooter-saisonLogo {grid-area: logo;margin-top: 0;margin-bottom: 0;}
	.GlobalFooter-saisonContactLinkAndCopy {grid-area: contact;margin-top: 0.875rem;margin-bottom: 0;margin-left:0;}
	.GlobalFooter-saisonInfo {grid-area: info;margin-top: 1.25rem;margin-bottom: 0;margin-left:0!important;}
	.GlobalFooter-saisonPrivacy {grid-area: privacy;-ms-grid-row-align: end;align-self: end;margin-left:0;}
}


/** script ********************************************/
.sa {opacity: 0;transition: all .5s ease;}
.sa.show {opacity: 1;transform: none;}
.sa--lr {transform: translate(-100px, 0);}
.sa--rl {transform: translate(100px, 0);}
.sa--up {transform: translate(0, 100px);}
.sa--down {transform: translate(0, -100px);}
.sa--scaleUp {transform: scale(.5);}
.sa--scaleDown {transform: scale(1.5);}
.sa--rotateL {transform: rotate(180deg);}
.sa--rotateR {transform: rotate(-180deg);}
.rltv{position:relative;}
.cover {
		background: #FFF;
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 100%;
		transition: all .7s ease-in;
}
.cover.show {width: 0%;}