/**************************************** コンテンツ設定 ****************************************/
section {}
.contentarea {padding:6vw;}
/*SP*/
@media (max-width: 896px){
	.contentarea {padding:6vh 5vw;}
}

.content {width:65vw;max-width:100%;padding: 0px;margin:0px auto;}
.content.wide {width:90vw;max-width:100%;padding: 0px;}
.content.mini {width:50vw;max-width:100%;padding: 0px;}

/*inview設定*/
.inview {opacity:0;transform:translateY(10vh);}
.inview.active {opacity:1;transform:translateY(0px);transition:1s;}
.inviewfade {opacity:0;}
.inviewfade.active {opacity:1;transition:1s;}
.inviewleft {opacity:0;transform:translateX(10vh);}
.inviewleft.active {opacity:1;transform:translateX(0px);transition:1s;}
.inviewright {opacity:0;transform:translateX(-10vh);}
.inviewright.active {opacity:1;transform:translateX(0px);transition:1s;}
.inviewdown {opacity:0;transform:translateY(-10vh);}
.inviewdown.active {opacity:1;transform:translateY(0px);transition:1s;}

/*SP*/
@media (max-width: 896px){
	.inviewleft {transform:translateX(0px) translateY(10vh);}
	.inviewleft.active {transform:translateX(0px) translateY(0px);}
	.inviewright {transform:translateX(0px) translateY(10vh);}
	.inviewright.active {transform:translateX(0px) translateY(0px);}
	.inviewdown {transform:translateY(10vh);}
	.inviewdown.active {transform:translateY(0px);}
}

.target {cursor:pointer; }

/* カラム設定 */
.col {width:100%;}
.col .inner {width:100%;margin:0px;padding:0px;}
.col .inner p {padding:0px;}


.motiontext {position:relative;}
.motiontext span {position:absolute;top:0px;left:0px;color:#fff;width:100%;}
.motiontext span.base {opacity:0;transform:translateX(2vh);transition:0.05s;color:#fff;}
.motiontext.on span.base {opacity:1;transform:translateX(0px);}
.motiontext span.over {opacity:0;transform:translateX(3vh);transition:0.2s;color:#ddf;}
.motiontext.on span.over {opacity:1;transform:translateX(0px);}
.motiontext.on.hide span.over {opacity:0;transition:0.2s;}


/**************************************** デフォルト設定 ****************************************/

/***** tablearea *****/
.tablearea {}
.tablearea table {border-collapse:collapse;width:100%; }
.tablearea table th {border:solid #ccc 0.1rem;padding:1.2em 1em;width:20%;background:#2083e6;color:#fff; }
.tablearea table td {border:solid #ccc 0.1rem;padding:1.2em 1em;width:80%;}
/*SP*/
@media (max-width: 896px){ 
.tablearea table th {display:block;width:100%;border:none;text-align:left;background:none;
	padding: 0.9em 0.5em 0.3em 0.5em;color:#2083e6; }
.tablearea table td {display:block;width:100%;border:none;padding:0px;border-bottom:solid #2083e6 0.1rem;
	padding: 0px 0.5em 0.7em 0.5em; }
}

/***** table3area *****/
.table3area {}
.table3area .inner {padding:0px 0.2rem;}
.table3area table {border-collapse:collapse;width:100%;}
.table3area table th {border:solid #eee 0.1rem;padding:1.2em 1em;width:100%;background:#2083e6;color:#fff; }
.table3area table td {border:solid #eee 0.1rem;padding:1.2em 1em;width:100%;text-align:center; }
.table3area table.recommend {border:solid #2083e6 0.2rem;}


/******************************************************* 調整 ************************************************************************************/
/*共通*/
@media (max-width: 896px){ .pc {display:none !important;} }
@media (min-width: 897px){ .sp {display:none !important;} }

/*PCの場合*/
@media (min-width: 897px){
}
@media (min-width: 1200px){
}


/*横の場合*/
@media screen and (orientation: landscape) {
}
/*縦の場合*/
@media screen and (orientation: portrait) {
}

/*パソコン設定*/
@media (min-width: 897px){
.col {}
.collist {display:flex; flex-wrap:wrap;}
.collist .inner {justify-content:space-between;}
.col .inner {float:left;}
.col .inner.right {float:right;}
.col2 .inner {width:50%;} .col3 .inner {width:33.3%;} .col4 .inner {width:25%;} .col5 .inner {width:20%;}
.col6 .inner {width:16.6%;} .col7 .inner {width:14.2%;} .col8 .inner {width:12.5%;} .col9 .inner {width:11.1%;} .col10 .inner {width:10%;}

	/*横の場合*/
	@media screen and (orientation: landscape) {
	}
	/*縦の場合*/
	@media screen and (orientation: portrait) {
	}
}


/******************************************************* ヘッダー・フッター ************************************************************************************/
.headerarea {position:fixed;top:0;left:0;width:100%;height:10vh;z-index:8000;display:flex;flex-wrap:wrap;
	background:rgba(255,255,255,0.8);backdrop-filter: blur(10px);
	box-shadow:0 1px 0 rgba(0,0,0,0.05);
}
.headerarea .logoarea {padding:2vh 1vh 2vh 3vh;width:20%;}
.headerarea .logoarea img {height:6vh;}
.headerarea .headermenu {width:80%;text-align:right;padding-right:3vw;}
.headerarea .headermenu a {display:inline-block;height:10vh;line-height:10vh;padding:0 1.5rem;color:#000;}
.headerarea .headermenu a:hover {text-decoration:none;background:#fff;}
.menubox {display:none;}
/*SP*/
@media (max-width: 896px){
	.menubox {display:block;position:fixed;top:0;right:0;z-index:9000;height:10vh;width:10vh;}
	.menubox .bar {width:6vh;height:1px;background:#000;position:absolute;}
	.menubox.on .bar {transition:0.3s;}
	.menubox.on.out .bar {transition:0.2s;}
	.menubox .bar01 {top:4.2vh;left:2.5vh;}
	.menubox .bar02 {top:5.8vh;left:1.5vh;}
	.menubox.on .bar01 {top:50%;left:50%;transform:translateX(-50%) translateY(-50%) rotateZ(-45deg);}
	.menubox.on .bar02 {top:50%;left:50%;transform:translateX(-50%) translateY(-50%) rotateZ(45deg);}
	.menubox.on.out .bar01 {top:4.2vh;left:2.5vh;transform:none;}
	.menubox.on.out .bar02 {top:5.8vh;left:1.5vh;transform:none;}
	.headerarea .headermenu {position:fixed;top:0;left:0;width:100vw;height:100vh;padding:10vh 2rem 2rem 2rem;text-align:center;background:#fff;
		transform:translateX(150vw);}
	.headerarea .headermenu.on {transform:translateX(0);transition:0.3s;}
	.headerarea .headermenu.on.out {transform:translateX(150vw);transition:0.2s;}
	.headerarea .headermenu a {display:block;height:auto;line-height:1.5em;padding:1rem;font-size:1.4rem; }
}

.pagewrapper {}



.ctaarea {padding:25vh 10vh;text-align:center;background:#222;}
.ctaarea h2 {font-size:4.5rem;margin-bottom:0.4em;color:#fff;}
.ctaarea p {font-size:1.4rem;color:#fff;}

.footerarea {padding:3vh 3vw;position:relative;z-index:100;background:#000;display:flex;flex-wrap:wrap;}
.footerarea .footermenu {width:100%; }
.footerarea .footermenu a {font-size:1.0rem;color:#fff;display:inline-block;padding:0.5rem 1rem;}
.footerarea .copyright {width:100%;text-align:left;vertical-align:bottom;padding-top:1rem;padding-left:1rem; }
.footerarea .copyright span {font-size:1.0rem;line-height:1em;color:#fff;}

/*SP*/
@media (max-width: 896px){
	.ctaarea {padding:13vh 3vh;}
	.ctaarea h2 {font-size:1.8rem;}
	.ctaarea p {font-size:1.2rem;}
	.footerarea .footermenu a {display:block;width:100%;}
	.footerarea .copyright {padding-top:3rem;}
}