@charset "shift_jis";

/*font-size:.625rem;/*10px*/
/*font-size:.75rem;/*12px*/
/*font-size:.875rem;/*14px*/
/*font-size:1rem;/*16px*/
/*font-size:1.125rem;/*18px*/
/*font-size:1.25rem;/*20px*/

/*font-size:1.5rem;/*24px*/
/*font-size:1.625rem;/*26px*/
/*font-size:1.75rem;/*28px*/

/*font-size:1.875rem;/*30px*/

/*font-size:2.25rem;/*36px*/

/*font-size:2.125rem;/*34px*/

/*font-size:2.5rem;/*40px*/

/*font-size:3rem;/*48px*/

/*font-size:3.125rem;/*50px*/

/*font-size:3.125rem;/*58px*/

/*font-size:3.625rem;/*60px*/

/*font-size:4rem;/*64px*/


#AS-footer{
	position:relative;
	z-index:10;
}

h1{position:relative;font-size:4rem;text-align:center;}
h2{position:relative;font-size:3rem;text-align:center;line-height:1.2;}
h3{position:relative;font-size:1.75rem;text-align:center;}
h4{position:relative;font-size:1.75rem;text-align:center;line-height:1.2;}

h2{margin:0 auto .5em;}

h3{margin:0 auto .5em;}

h4{}

.wrapper p,
.wrapper ul{
}

.list > *{
	padding-left:1em;
	padding-bottom:.5em;
	text-indent:-1em;
}

.list > *:nth-last-child(1){
	padding-bottom:0;
}

.wrapper strong{
}

.wrapper img{
	max-width:100%;
	width:100%;
	height:auto;
}

.wrapper sup{
	font-size:.5em;
}


.wrapper{
	position:relative;
	overflow:hidden;
	box-sizing:border-box;
	line-height:1.4;
}

.wrapper *{
	box-sizing:border-box;
}

.inner{
	position:relative;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	word-break:break-all;
}

.inner.smart{
	max-width:800px;
	padding:0 8px;
}

.inner.narrow{
	max-width:900px;
	padding:0 8px;
}

.inner.wide{
	max-width:1000px;
	padding:0 8px;
}

.inner.full{
	max-width:none;
}

.section p{
	word-break:normal;
}

.flex{
	position:relative;
	display:flex;
	width:100%;
}

.flex > *,
.flex > .col{
	flex-grow:1;
	flex-shrink:1;
	flex-basis:100%;
}

.flex > *{
	padding-left:8px;
	padding-right:8px;
}

.flex.column{flex-wrap:wrap;}

.flex.left{justify-content:flex-start;}
.flex.center{justify-content:center;}
.flex.right{justify-content:flex-end;}

.flex.top{align-items:flex-start;}
.flex.middle{align-items:center;}
.flex.bottom{align-items:flex-end;}

.flex > .col2{flex-basis:200%;}
.flex > .col3{flex-basis:300%;}
.flex > .col4{flex-basis:400%;}
.flex > .col5{flex-basis:500%;}
.flex > .col6{flex-basis:600%;}
.flex > .col7{flex-basis:700%;}
.flex > .col8{flex-basis:800%;}
.flex > .col9{flex-basis:900%;}

.flex.left > *{flex-basis:auto;}
.flex.center > *{flex-basis:auto;}
.flex.right > *{flex-basis:auto;}

.note{
	text-indent:-1.5em;
	padding-left:1.5em;
}

.notes > *{
	text-indent:-1.5em;
	padding-left:1.5em;
}

.left{text-align:left;}
.center{text-align:center;}
.right{text-align:right;}

.bold{font-weight:bold;}
.red{color:#D80000}
.blue{color:#0066B6}
.green{color:#1F8485}
.orange{color:#E96707}

.bg-blue{background-color:#0066B6;color:#ffffff;}
.bg-color{background-color:#EAF0FD;}

.border{border:1px solid #cccccc;padding:20px;}
.box{
	display:inline-block;
	background:-webkit-linear-gradient(top, #dddddd, #ffffff);
	background:linear-gradient(to bottom, #dddddd, #ffffff);
	padding:.3em 1.6em .2em;
	border-radius:3em;
}

.bb{border-bottom:2px solid #D80000;}

.fs12{font-size:.75rem;}
.fs14{font-size:.875rem;}
.fs16{font-size:1rem;}
.fs20{font-size:1.25rem;}
.fs24{font-size:1.5rem;}
.fs26{font-size:1.625rem;}
.fs30{font-size:1.875rem;}
.fs36{font-size:2.25rem;}
.fs40{font-size:2.5rem;}
.fs48{font-size:3rem;}
.fs50{font-size:3.125rem;}
.fs60{font-size:3.75rem;}

.mt20{margin-top:20px;}
.mt40{margin-top:40px;}
.mt80{margin-top:80px;}

.mb0{margin-bottom:0 !important;}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb40{margin-bottom:40px !important;}
.mb80{margin-bottom:80px !important;}

.p10{padding:10px !important;}
.p20{padding:20px !important;}
.plr20{padding-left:20px !important;padding-right:20px !important;}

.pb0{padding-bottom:0 !important;}

.r20{border-radius:20px;overflow:hidden;}

.toPagetop{display:inline-block;}
.toPagetop::before{content:url(/product/atermstation/cmn/images/bg-arrow03-up.png);position:relative;top:4px;padding-right:5px;}



/* navigation
------------------------------------------------------------------ */

#checkArea{
	padding-bottom:10px;
}

.navigation{
	padding-bottom:6px;
}

.navigation > *{
	padding-left:3px;
	padding-right:3px;
}

.navigation > li a{
	position:relative;
	display:block;
	transition:opacity .2s;
}

.navigation > li a img{
	position:relative;
	top:0;
	transition:top .2s;
}

.navigation > li a:hover{
	opacity:1;
	cursor:default;
}

.navigation > li a:not([class*="current"]):hover{
	opacity:.8;
	cursor:pointer;
}

.navigation > li a:not([class*="current"]):hover img{
	top:-10px;
}

.navigation > li a::after{
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	width:0;
	height:0;
	margin-top:12px;
	border-top:20px solid #ffffff;
	border-right:52px solid transparent;
	border-bottom:none;
	border-left:52px solid transparent;
	transform:translateX(-50%);
	transition:border .2s;
}

.navigation > li a[href="#check01"]::after{border-top:20px solid #FFB7B7;}
.navigation > li a[href="#check02"]::after{border-top:20px solid #B7CCFF;}
.navigation > li a[href="#check03"]::after{border-top:20px solid #FFEFB7;}
.navigation > li a[href="#check04"]::after{border-top:20px solid #CBFFB3;}
.navigation > li a[href="#check05"]::after{border-top:20px solid #FFCEB0;}
.navigation > li a[href="#check06"]::after{border-top:20px solid #E4C1FF;}

.navigation > li a.current[href="#check01"]::after,
.navigation > li a[href="#check01"]:hover::after{border-top-color:#B20000;}
.navigation > li a.current[href="#check02"]::after,
.navigation > li a[href="#check02"]:hover::after{border-top-color:#002CB2;}
.navigation > li a.current[href="#check03"]::after,
.navigation > li a[href="#check03"]:hover::after{border-top-color:#B28500;}
.navigation > li a.current[href="#check04"]::after,
.navigation > li a[href="#check04"]:hover::after{border-top-color:#59B200;}
.navigation > li a.current[href="#check05"]::after,
.navigation > li a[href="#check05"]:hover::after{border-top-color:#B25900;}
.navigation > li a.current[href="#check06"]::after,
.navigation > li a[href="#check06"]:hover::after{border-top-color:#8500B2;}


/* beforeArea
------------------------------------------------------------------ */

#beforeArea{
	background:url(../images/bg-before.png) left bottom repeat-x, -webkit-linear-gradient(top, #ffffff, #333333);
}

#beforeArea > .inner:nth-child(1){
	z-index:3;
}

.before{
	overflow:hidden;
	position:relative;
	margin-top:48px;
	z-index:2;
}

.before > *{
	overflow:hidden;
	position:relative;
	z-index:3;
}

.before::before{
	content:"";
	overflow:hidden;
	position:absolute;
	top:0;
	left:50%;
	background:url(../images/bg-before.png) left top repeat-x, -webkit-linear-gradient(top, #ffffff 25%, #999999 50%);
	background:url(../images/bg-before.png) left bottom repeat-x, linear-gradient(to bottom, #ffffff 25%, #999999 50%);
	width:100%;
	max-width:1200px;
	height:180%;
	border-radius:100%;
	transform:translateX(-50%);
	z-index:1;
}

.before::after{
	content:"";
	overflow:hidden;
	position:absolute;
	top:100%;
	left:50%;
	background:#ffffff;
	width:110%;
	height:40%;
	border-radius:100%;
	transform:translate(-50%,-50%);
	z-index:2;
}

.before h4{
	padding:60px 0 0;
	text-shadow:1px 1px 2px #ffffff;
}

.balloon{
	position:relative;
	background-color:#ffffff;
	padding:24px;
	border:4px solid #999999;
	border-radius:32px;
}

.balloon::before,
.balloon::after{
	content:"";
	position:absolute;
	top:50%;
	left:100%;
	display:block;
	width:0;
	height:0;
	border-top:12px solid transparent;
	border-left:40px solid #999999;
	border-bottom:12px solid transparent;
	transform:translateY(-50%);
}

.balloon::after{
	margin-left:-4px;
	border-top:8px solid transparent;
	border-left:34px solid #ffffff;
	border-bottom:8px solid transparent;
}




/* afterArea
------------------------------------------------------------------ */

#afterArea{
	background:url(../images/bg-after.png) center bottom no-repeat;
	margin-top:40px;
}

.after h4{
	position:relative;
	display:inline-block;
	margin-top:3.5rem;
	padding:50px 40px;
	color:#1951B6;
	font-size:3.5rem;
	font-weight:bold;
	text-align:center;
}

.after h4::before,
.after h4::after{
	content:"";
	position:absolute;
	top:25%;
	bottom:25%;
	left:0;
	display:block;
	width:10px;
	background-color:#BFEFFF;
	transform:skewX(25deg);
}

.after h4::after{
	left:auto;
	right:0;
	transform:skewX(-25deg);
}

.after h4 > .mark{
	position:absolute;
	bottom:100%;
	left:50%;
	display:block;
	background-color:#1951B6;
	padding:.6em 1.6em .5em;
	border-radius:3em;
	color:#ffffff;
	font-size:1.625rem;
	font-weight:bold;
	line-height:1;
	word-break:keep-all;
	transform:translateX(-50%);
	z-index:2;
}

.after h4 > .mark::before{
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	width:0;
	height:0;
	border-top:40px solid #1951B6;
	border-right:20px solid transparent;
	border-bottom:none;
	border-left:20px solid transparent;
	box-shadow:0 0 0 rgba(0,0,0,1);
	transform:translateX(-50%);
}

.after h4 > strong{
	position:relative;
	display:block;
	font-weight:normal;
	z-index:1;
}

.after h4 > strong::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	background-color:#BFEFFF;
	width:2em;
	height:2em;
	border-radius:100%;
	transform:translate(-50%, -50%);
	z-index:-1;
}


a.btn{
	display:flex;
	background:-webkit-linear-gradient(top, #eeeeee, #ffffff);
	background:linear-gradient(to bottom, #eeeeee, #ffffff);
	padding:6px 24px 6px 36px;
	border:4px solid #ffffff;
	border-radius:6em;
	box-shadow:0 0 8px rgba(0,0,0,.4);
	text-decoration:underline;
	align-items:center;
}

a.btn:hover{
	box-shadow:0 0 1px rgba(0,0,0,.6);
	text-decoration:none;
	opacity:1;
}

a.btn > *{
	flex-grow:1;
	flex-shrink:1;
	flex-basis:100%;
}

a.btn > img,
a.btn > .img{
	width:100%;
	height:auto;
	max-width:80px;
	margin-right:8px;
}



/* switch
------------------------------------------------------------------ */

.before,
.after{overflow:hidden;transition:height 2s;display:none;}


#checkArea[data-check="check01"] #beforeArea{
	background:url(../images/bg-before.png) left bottom repeat-x, -webkit-linear-gradient(top, #ffffff, #4D0000);
	background:url(../images/bg-before.png) left bottom repeat-x, linear-gradient(to bottom, #ffffff, #4D0000);
	color:#B20000;
}

#checkArea[data-check="check02"] #beforeArea{
	background:url(../images/bg-before.png) left bottom repeat-x, -webkit-linear-gradient(top, #ffffff, #001444);
	background:url(../images/bg-before.png) left bottom repeat-x, linear-gradient(to bottom, #ffffff, #001444);
	color:#002CB2;
}

#checkArea[data-check="check03"] #beforeArea{
	background:url(../images/bg-before.png) left bottom repeat-x, -webkit-linear-gradient(top, #ffffff, #513F00);
	background:url(../images/bg-before.png) left bottom repeat-x, linear-gradient(to bottom, #ffffff, #513F00);
	color:#B28500;
}

#checkArea[data-check="check04"] #beforeArea{
	background:url(../images/bg-before.png) left bottom repeat-x, -webkit-linear-gradient(top, #ffffff, #174800);
	background:url(../images/bg-before.png) left bottom repeat-x, linear-gradient(to bottom, #ffffff, #174800);
	color:#59B200;
}

#checkArea[data-check="check05"] #beforeArea{
	background:url(../images/bg-before.png) left bottom repeat-x, -webkit-linear-gradient(top, #ffffff, #552000);
	background:url(../images/bg-before.png) left bottom repeat-x, linear-gradient(to bottom, #ffffff, #552000);
	color:#B25900;
}

#checkArea[data-check="check06"] #beforeArea{
	background:url(../images/bg-before.png) left bottom repeat-x, -webkit-linear-gradient(top, #ffffff, #2C004D);
	background:url(../images/bg-before.png) left bottom repeat-x, linear-gradient(to bottom, #ffffff, #2C004D);
	color:#8500B2;
}

#checkArea[data-check="check01"] .before.check01,
#checkArea[data-check="check01"] .after.check01{display:block;height:100%;}

#checkArea[data-check="check02"] .before.check02,
#checkArea[data-check="check02"] .after.check02{display:block;height:100%;}

#checkArea[data-check="check03"] .before.check03,
#checkArea[data-check="check03"] .after.check03{display:block;height:100%;}

#checkArea[data-check="check04"] .before.check04,
#checkArea[data-check="check04"] .after.check04{display:block;height:100%;}

#checkArea[data-check="check05"] .before.check05,
#checkArea[data-check="check05"] .after.check05{display:block;height:100%;}

#checkArea[data-check="check06"] .before.check06,
#checkArea[data-check="check06"] .after.check06{display:block;height:100%;}

@media screen and (max-width:660px){

.tb-column{flex-wrap:wrap;}

.tb-mt30{margin-top:30px;}

a.btn{font-size:1rem;}
	
/* navigation
------------------------------------------------------------------ */

.navigation{
	flex-wrap:wrap;
}

.navigation > *{
	max-width:33.333%;
	padding:6px;
}

.navigation > li a::after{
	top:0;
	margin-top:8px;
	border-right:32px solid transparent;
	border-left:32px solid transparent;
}

.navigation > li a[href="#check01"]::after{border-top:20px solid #B20000;}
.navigation > li a[href="#check02"]::after{border-top:20px solid #002CB2;}
.navigation > li a[href="#check03"]::after{border-top:20px solid #B28500;}
.navigation > li a[href="#check04"]::after{border-top:20px solid #59B200;}
.navigation > li a[href="#check05"]::after{border-top:20px solid #B25900;}
.navigation > li a[href="#check06"]::after{border-top:20px solid #8500B2;}
	
	
/* before
------------------------------------------------------------------ */

.before h4{font-size:2.5rem !important;}

.balloon{
	padding:12px;
	border-radius:16px;
}

	
/* after
------------------------------------------------------------------ */
.after h4{
	padding:50px 20px;
	font-size:2.5rem !important;
}

.after h4 > strong::before{width:3em;height:3em;}

.after .flex.tb-column > .col{order:2;}
.after .flex.tb-column > .col:nth-last-child(1){
	padding:24px 10%;
	order:1;
}


}


@media screen and (max-width:480px){

.sp-column{flex-wrap:wrap;}

	
/* navigation
------------------------------------------------------------------ */

.navigation > *{
	padding:3px;
}
	
	
/* before
------------------------------------------------------------------ */

.before::before{
	background:url(../images/bg-before.png) left top repeat-x, -webkit-linear-gradient(top, #ffffff 50%, #999999 100%);
	background:url(../images/bg-before.png) left bottom repeat-x, linear-gradient(to bottom, #ffffff 50%, #999999 100%);
	width:200%;
	height:100%;
}

.before .flex.sp-column > .col3{
	padding:24px 10%;
}

.balloon{
	margin-top:20px;
}

.balloon::before,
.balloon::after{
	display:none;
}

}