/**************************************** コンテンツ設定 ****************************************/
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) {
	}
}