/**************************************** コンテンツ設定 ****************************************/
section {}
.wrapper {opacity:0;}
.wrapper.on {opacity:1;transition:1s;}

.contentarea {padding:6vw;}
/*SP*/
@media (max-width: 896px){
	.contentarea {padding:6vh 5vw;}
}


.cookie-banner {position:fixed;bottom:0;left:0;width:100%;background:rgba(0, 0, 0, 0.8);color:#fff;padding:15px;text-align:center;display:none;z-index:9999; }
.cookie-banner p {font-size:0.9rem;margin-bottom:0.8em; }
.cookie-banner a {color:#fff;text-decoration:underline;}
.cookie-banner button {outline:none;border:none; padding:0.5em 4em;margin:0px 0.2em;cursor:pointer;}
.cookie-banner button:hover {opacity:0.8;}

.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:separate;border-spacing:0.5rem; width:100%; }
.tablearea table th {border-bottom:solid #000 0.1rem;padding:2em 2em;width:25%;}
.tablearea table td {border-bottom:solid #000 0.1rem;padding:2em 2em;width:75%;}
/*SP*/
@media (max-width: 896px){ 
.tablearea table th {display:block;width:100%;border:none;text-align:left;
	padding: 0.9em 0.5em 0.3em 0.5em;}
.tablearea table td {display:block;width:100%;border:none;border-bottom:solid #000 0.1rem;
	padding: 0px 0.5em 0.7em 0.5em; }
}

.tablearea2 {}
.tablearea2 table {border-collapse:separate;border-spacing:0.5rem; width:100%; }
.tablearea2 table th {border-bottom:solid #fff 0.1rem;padding:2em 2em;width:25%;color:#fff;}
.tablearea2 table td {border-bottom:solid #fff 0.1rem;padding:2em 2em;width:75%;color:#fff;}
/*SP*/
@media (max-width: 896px){ 
.tablearea2 table th {display:block;width:100%;border:none;text-align:left;background:none;
	padding: 0.9em 0.5em 0.3em 0.5em;}
.tablearea2 table td {display:block;width:100%;border:none;padding:0px;border-bottom:solid #fff 0.1rem;
	padding: 0px 0.5em 0.7em 0.5em; }
}


/******************************************************* 調整 ************************************************************************************/
/*共通*/
@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.3333%;} .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) {
	}
}