/**************************************** コンテンツ設定 ****************************************/
section {}
.contentarea {padding: 0px;}
.content {width:800px;max-width:100%;padding: 0px;margin:0px auto;}
.content.full {width:100%;padding: 0px;}
.content.wide {width:1200px;max-width:100%;padding: 0px;}
.content.mini {width:600px;max-width:100%;padding: 0px;}

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

/*SP*/
@media (max-width: 896px){
	.inviewleft {transform:translateX(0px) translateY(100px);}
	.inviewleft.active {transform:translateX(0px) translateY(0px);}
	.inviewright {transform:translateX(0px) translateY(100px);}
	.inviewright.active {transform:translateX(0px) translateY(0px);}
	.inviewdown {transform:translateY(100px);}
	.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(20px);transition:0.05s;color:#fff;}
.motiontext.on span.base {opacity:1;transform:translateX(0px);}
.motiontext span.over {opacity:0;transform:translateX(30px);transition:0.2s;color:#ddf;}
.motiontext.on span.over {opacity:1;transform:translateX(0px);}
.motiontext.on.hide span.over {opacity:0;transition:0.2s;}


/**************************************** デフォルト設定 ****************************************/
.contentarea {padding:100px 100px;}
.contentarea.first {padding-top:30px;}
/*SP*/
@media (max-width: 896px){
	.contentarea {padding:15px 15px;}
}

/*popupwrap*/
.popupwrap {position:fixed;top:0px;left:0px;height:100vh;width:100%;background-color:rgba(0,0,0,0.4);z-index:3000;display:none;opacity:0;transition:1s;}
.popupwrap.on {display:block;opacity:1;}
.popupwrap .popup {position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);background:#fff;padding:70px;}
.popupwrap .popup .close {position:absolute;top:13px;right:13px;width:26px; }
@media (max-width: 896px){
	.popupwrap .popupbox {width:96%;height:98%;}
}


/***** icon_contents *****/
.icon_contents {padding:10vh 0px;}
.icon_contents .inner {text-align:center;}
.icon_contents .inner img {margin-bottom:0.5em;}
.icon_contents .inner p {padding:0px 1em;}
/*SP*/
@media (max-width: 896px){
	.icon_contents .col {position:relative;padding: 0px 1em 170px 1em; }
	.icon_contents .col .inner {float:left;width:33.3%;padding:0px 1em;}
	.icon_contents img {width:60px; }
	.icon_contents h3 {font-size: 0.8rem;padding-bottom:10px;}
	.icon_contents h3.on {border-bottom:solid #000 2px;}
	.icon_contents .col .inner p {position:absolute;top:140px;left:0px;width:100%;padding: 0px 2em;font-size:1rem;display:none; }
}


/***** center_message *****/
.center_message {}

/***** image_text *****/
section .contentarea.image_text {padding:0px;}
section .contentarea.image_text .inner.text {padding:3em;}
/*PC*/
@media (min-width: 897px){
	section .contentarea.image_text .inner.right {float:right;}
	section .contentarea.image_text .inner.text {padding:3em;}
}

/***** greeting *****/
.greeting {}
.greeting h2 {margin-bottom:0.5em;}
.greeting .image {width:200px;float:left; }
.greeting .image img {}
.greeting .text {width:calc(100% - 200px);float:left;padding:0px 3em;}
.greeting .text h3 {margin-bottom:0.5em; }
/*PC*/
@media (min-width: 897px){
	.greeting .text h3 {font-size:1.4rem;font-weight:400;}
}
@media (min-width: 1200px){
	.greeting .text h3 {font-size:2.2rem;font-weight:400;margin-bottom:0.5em; }
	.greeting .text p {font-size:1.1rem;line-height:2em; }
}
/*SP*/
@media (max-width: 896px){
	.greeting .image {width:100%;float:none;text-align:center; }
	.greeting .image img {width:200px;margin-bottom:2em;}
	.greeting .text {width:100%;float:none;padding:0px;}
}


/***** full *****/
section .contentarea.full {padding:0px;}

/***** list1 *****/
.list1 ul {border-bottom:dotted #ccc 1px;}
.list1 ul li {border-top:dotted #ccc 1px;padding:1em;}

/***** list2 *****/
.list2 h2 {margin-bottom:0.5em;}
/*SP*/
@media (max-width: 896px){ 
	.list2 dl {padding:0px;}
	.list2 dl dt {color:#333;line-height:1em; }
	.list2 dl dd {margin-bottom:0.8em;}
}
/*PC*/
@media (min-width: 897px){
	.list2 dl {border-bottom:dotted #ccc 1px;}
	.list2 dl dt {display:block;width:150px;float:left;border-top:dotted #ccc 1px;padding:1em;}
	.list2 dl dd {display:block;width:calc(100% - 150px);float:left;border-top:dotted #ccc 1px;padding:1em;}
}

/***** steparea *****/
.steparea {}
.steparea .step {border:solid #2083e6 3px; border-radius:1em; margin-bottom:1em;padding:0.6em;}
.steparea .step .stepleft {width:120px;float:left;}
.steparea .step .stepleft img {width:100%;}
.steparea .step .stepright {width:calc(100% - 120px);float:left;padding: 2em 1em 2em 3em;}
.steparea .step .stepright h3 {font-size:2.2rem;font-weight:500;color:#2083e6;margin-bottom:0.5em; }
.steparea .step .stepright p {font-size:1.2rem;}

/*SP*/
@media (max-width: 896px){ 
	.steparea .step .stepleft {width:100%;float:none;text-align:center;}
	.steparea .step .stepleft img {width:120px;}
	.steparea .step .stepright {width:100%;float:none;padding:1em;}
	.steparea .step .stepright h3 {font-size:1.4rem;text-align:center; }
	.steparea .step .stepright p {font-size:1.1rem;}
}

/***** steparea2 *****/
.steparea2 {}
.steparea2 .step {width:25%;float:left;padding-bottom:1em; }
.steparea2 .step .imagebox {background:url(../img/cmn/steparrow.svg) no-repeat left center;background-size:30px auto;padding-left:30px;}
.steparea2 .step.step01 .imagebox {background:none; }
.steparea2 .step .imagebox img {}
.steparea2 .step h3 {padding-left:30px;text-align:center; }


/*SP*/
@media (max-width: 896px){ 
	.steparea2 .step {width:100%;float:none;}
	.steparea2 .step .imagebox {background:url(../img/cmn/steparrow_sp.svg) no-repeat center top;background-size:auto 30px;padding-left:0px;padding-top:30px;text-align:center; }
	.steparea2 .step .imagebox img {width:30%; }
	.steparea2 .step h3 {padding-left:0px;}
}



/***** tablearea *****/
.tablearea {}
.tablearea table {border-collapse:collapse;width:100%; }
.tablearea table th {border:solid #ccc 1px;padding:1.2em 1em;width:200px;background:#2083e6;color:#fff; }
.tablearea table td {border:solid #ccc 1px;padding:1.2em 1em;width:calc(100% - 200px);}
/*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 1px;padding: 0px 0.5em 0.7em 0.5em; }
}


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



/***** panelarea *****/
section .contentarea.panelarea {padding: 10vh 0px 0px 0px; }
section .contentarea.panelarea h2 {margin-bottom:1em;}
section .contentarea.panelarea .inner img {display:block;}
.panelarea {}

/***** image_text2 *****/
.image_text2 {}
.image_text2 .inner {padding:5px;}
.image_text2 .inner .box { }
.image_text2 .inner img {margin-bottom:0.8em;}
.image_text2 .inner a img:hover {opacity:0.8; }
.image_text2 .inner h3 {margin-bottom:0.3em;}
.image_text2 .inner p {}
/*SP*/
@media (max-width: 896px){
	.image_text2 .inner {padding:0px 0px 3em 0px;}
}

/***** formarea *****/
.formarea {}
.formarea .content {width:600px;max-width:94%; }

/***** contactarea *****/
.contactarea {padding:15vh 10vw;background:#333;text-align:center;}
.contactarea h2 {color:#fff;}
.contactarea p {color:#fff;}

/*
.contactarea {background:url(../img/cmn/bg_contact.jpg) no-repeat center center;background-size:cover;}
*/


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