@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.125rem;/*34px*/

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

/*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*/




.wrapper{
position:relative;
overflow:hidden;
box-sizing:border-box;
color: #251714;
line-height:1.8;
font-size:1.125rem;
word-break: break-all;
}

.wrapper *{
box-sizing:border-box;
color: inherit;
font-size: inherit;
word-break: inherit;
}


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

.wrapper h1{position:relative;font-size:3rem;text-align:center;}
.wrapper h2{position:relative;font-size:2.5rem;text-align:center;line-height:1.2;}
.wrapper h3{position:relative;font-size:1.875rem;text-align:center;line-height:1.4;}
.wrapper h4{position:relative;font-size:1.875rem;text-align:center;line-height:1.2;}


.titlearea{
position: relative;
background: url(../images/index-bg_titlearea.jpg) top center no-repeat;
background-size: cover;
margin-bottom: -80px;
z-index: -1;
}

.titlearea::after{
content: "";
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
background:-webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
z-index: 1;
}

.h1{
position: relative;
background: url(../images/index-bg_h1.png) top center no-repeat;
background-size: cover;
width:100%;
height: 720px;
max-width: 1200px;
margin: 0 auto;
padding-top: 85px;
z-index: 2;
}

.h1 h1{
}

.wrapper h2{
margin-bottom: 30px;
}

.h2{
margin-bottom: 30px;
text-align: center;
}

.h2 h2{
display: inline-block;
background-color: #ff6565;
padding:20px 25px 16px;
margin-bottom: 0;
color: #ffffff;
}

.wrapper h2.point{
padding:10px 0 2px;
margin-bottom: 30px;
color: #589dad;
}

.wrapper h2.point .mark{
display: inline-flex;
background-color: #589dad;
margin-right: 20px;
padding:12px 0;
border-radius: 100%;
color: #ffffff;
font-family: 'Dela Gothic One', cursive;
font-size:.75rem;
line-height: .85;
vertical-align: middle;
flex-wrap: wrap;
justify-content: center;
align-items: center;
transform: translateY(-4px);
}

.wrapper h2.point .mark > *{
flex-basis: 100%;
color: #ffffff;
}

.wrapper h2.point .mark strong{
min-width: 1em;
font-size:3.625rem;
}

.wrapper h3{
margin-bottom: 40px;
}

.line1{
line-height: 1.1 !important;
}

.wrapper p,
.wrapper ul{
padding:0;
margin:0 auto;
}

.wrapper strong{
font-weight: bold;
}

.wrapper .read{
max-width:1000px;
padding-top:120px;
}

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

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

.wrapper hr{
margin: 20px 0;
border-color: #dddddd;
border-style: dashed;
}

.wrapper hr.dot4{
overflow: visible;
position: relative;
display: block;
height: 14px  !important;
width: 20px  !important;
margin: 100px auto 200px !important;
border: none  !important;
}

.wrapper hr.dot4::before{
content: "";
position: absolute;
top:0;
bottom:0;
display: block;
right: 100%;
height: 14px;
width:20px;
border-left:14px solid #ff9f36;
border-right:14px solid #ff6565;
}

.wrapper hr.dot4::after{
content: "";
position: absolute;
top:0;
bottom:0;
display: block;
left: 100%;
height: 14px;
width:20px;
border-left:14px solid #589dad;
border-right:14px solid #000000;
}

.notes{font-size:.875rem !important;}

.wrapper .fs12{font-size:.75rem !important;}
.wrapper .fs14{font-size:.875rem !important;}
.wrapper .fs16{font-size:1rem !important;}
.wrapper .fs18{font-size:1.125rem !important;}
.wrapper .fs20{font-size:1.25rem !important;}
.wrapper .fs22{font-size:1.375rem !important;}
.wrapper .fs24{font-size:1.5rem !important;line-height: 1.4;}
.wrapper .fs26{font-size:1.625rem !important;line-height: 1.4;}
.wrapper .fs28{font-size:1.75rem !important;line-height: 1.4;}
.wrapper .fs30{font-size:1.875rem !important;line-height: 1.4;}
.wrapper .fs38{font-size:2.375rem !important;line-height: 1.4;}
.wrapper .fs40{font-size:2.5rem !important;line-height: 1.4;}
.wrapper .fs48{font-size:3rem !important;line-height: 1.4;}
.wrapper .fs60{font-size:3.625rem !important;line-height: 1.4;}
.wrapper .fs60{font-size:3.625rem !important;line-height: 1.4;}
.wrapper .fs70{font-size:4.375rem !important;line-height: 1.4;}
.wrapper .fs72{font-size:4.5rem !important;line-height: 1.4;}

.wrapper .mb10{margin-bottom: 10px !important;}
.wrapper .mb20{margin-bottom: 20px !important;}
.wrapper .mb30{margin-bottom: 30px !important;}
.wrapper .mb40{margin-bottom: 40px !important;}
.wrapper .mb50{margin-bottom: 50px !important;}
.wrapper .mb60{margin-bottom: 60px !important;}
.wrapper .mb70{margin-bottom: 70px !important;}
.wrapper .mb80{margin-bottom: 80px !important;}
.wrapper .mb90{margin-bottom: 90px !important;}
.wrapper .mb100{margin-bottom: 100px !important;}

.wrapper .mt10{margin-top: 10px !important;}

.w800{max-width: 800px;margin-left: auto;margin-right: auto;}

.column{
display:flex;
width:100%;
}

.column *{
text-align:left;
}

.column > *{
position: relative;
padding:0 .5rem;
min-height:0%;
flex-grow:1;
flex-shrink:1;
flex-basis:100%;
}

.col2{flex-basis:200%;}
.col3{flex-basis:300%;}

.middle{align-items:center;}
.bottom{align-items:flex-end;}
.center{text-align: center;justify-content: center;}
.left{text-align: left;justify-content: flex-start;}
.right{text-align: right;justify-content: flex-end;}

.column.center > *{flex-grow: 0;flex-basis: auto;}

.reverse{flex-direction:row-reverse;}

.figure{padding:0;text-align:center;margin:0 auto 30px;}
.figure img{display: inline-block;max-width: 1000px;width: 100%;}
.box .figure{margin-bottom: 20px;}

.box{
margin: 40px auto;
padding: 40px;
border: 2px solid #dddddd;
}

.box:nth-last-child(1){
margin-bottom: 0;
}

.box.narrow{max-width: 1000px;}

.box > *:nth-child(1){margin-top: 0;}
.box > *:nth-last-child(1){margin-bottom: 0;}

.box h2, .box h3{margin-bottom: 20px;}

.notes{
display:table;
margin-left: 0 !important;
text-align:left;
}

.notes > li{
display:table-row;
}

.notes > li > span{
display:table-cell;
}

.notes > li > span:first-child{
text-align:right;
padding-right:.5em;
word-break: keep-all;
}


.orange{color:#ff9f36 !important;}
.pink{color:#ff6565 !important;}
.blue{color:#589dad !important;}

.bg-blue{background-color: #e1eff2;}

.wrapper a{
text-decoration: underline;
color: #ff6565;
}

.wrapper .btn,
.wrapper a:hover{
text-decoration: none;
}

.wrapper .btn{
color: #ffffff;
}

.btn{
position:relative;
display:inline-block;
background-color: #589dad;
padding:.4em 2em;
border-radius: 4em;
}

.btnlist > *{
padding:1px;
}

.btnlist > li .btn{
padding-top: 10px;
padding-bottom: 6px;
border-radius: 0;
line-height: 1;
}

.btnlist > li:nth-child(1) .btn{
border-radius: 4em 0 0 4em;
}

.btnlist > li:nth-last-child(1) .btn{
border-radius: 0 4em 4em 0;
}

.expoint{
position: absolute;
bottom: 100%;
left: 0;
right: 0;
}

.expoint> *{
display: inline-block;
background-color: #ff6565;
padding: .2em 2em .1em;
color: #ffffff;
font-weight: bold;
}

.bold{
font-size: 2.5rem;
}

.bold strong{
font-size: 4.5rem;
font-family: 'Dela Gothic One', cursive;
font-weight: normal;
}

/* scene
------------------------------------------------------------------ */

.scene::before{
	content:"";
	display:block;
	background-color:#ffffff;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
    background-attachment:fixed;
	min-height:60vh;
}

#scene1::before{background-image:url(../images/index-bg_01.jpg);}
#scene2::before{background-image:url(../images/index-bg_02.jpg);}
#scene3::before{background-image:url(../images/index-bg_03.jpg);}
#scene4::before{background-image:url(../images/index-bg_04.jpg);}

body.sp .scene::before{
background-attachment:scroll;
}

/* section
------------------------------------------------------------------ */

.section{
display: flex;
}

.section > .inner{
width: 100%;
max-width: 1200px;
margin: auto;
padding:60px 10px;
flex-grow: 1;
}

.narrow{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}

.product{
line-height: 1.4;
}

.product .figure{
background-color: #ffffff;
max-width: 240px;
margin:10px auto;
border-radius: 100%;
line-height: 1.4;
}

img.bnr{
width: 100%;
max-width: 800px;
}


.merit{
position: relative;
display: flex;
background: url(../images/index-bg_titlearea.jpg) center bottom no-repeat;
min-height: 800px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.merit::before{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 70%;
left: 0;
background:-webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
background:linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
z-index: 1;
}

.merit::after{
content: "";
position: absolute;
top:50%;
left: 50%;
background: url(../images/index-bg_home.png) center bottom no-repeat;
background-size: contain;
height: 480px;
width: 800px;
transform: translateX(-50%) translateY(-50%);
z-index: 2;
}

.merit > *{
z-index: 3;
}

.merit .txt{
position: absolute;
top: 50%;
background-color: rgba(255,255,255,.8);
width: 100%;
padding: 34px 10px 14px;
text-shadow: 4px 4px 0 #ffffff, -4px -4px 0 #ffffff, -4px 4px 0 #ffffff, 4px -4px 0 #ffffff, 0px 4px 0 #ffffff,  0 -4px 0 #ffffff, -4px 0 0 #ffffff, 4px 0 0 #ffffff;
font-size: 2.5rem;
text-align: center;
line-height: 1.1;
transform: translateY(-50%);
}

.merit .txt strong{
font-size: 4.5rem;
font-weight: normal;
}

.merit > *:nth-child(n+2){
display: flex;
width: 50%;
text-align: center;
justify-content: center;
align-content: center;
flex-grow: 0;
flex-shrink: 1;
flex-basis: 50%;
z-index: 3;
}

.merit > *:nth-child(n+2) .image{
overflow: hidden;
display: flex;
background-color: #ccc;
background-position: center center;
background-repeat: no-repeat;
background-size: 160%;
height: 394px;
width: 394px;
border: 8px solid #ffffff;
border-radius: 100%;
font-size: 1.5rem;
justify-content: center;
align-items: center;
}

.merit > *:nth-child(n+2) .image > *{
display: block;
background-color: rgba(255,255,255,.8);
width: 100%;
padding: 20px 10px;
line-height: 1.4;
flex-grow: 0;
flex-shrink: 1;
flex-basis: 100%;
}

.merit > *:nth-child(2) .image{
background-image: url(../images/index-bg_merit1.png);
transform: translate(5%, -15%);
}

.merit > *:nth-child(3) .image{
background-image: url(../images/index-bg_03.jpg);
transform: translate(10%, 0%);
}

.merit > *:nth-child(4) .image{
background-image: url(../images/index-bg_01.jpg);
transform: translate(-15%, 5%);
}

.merit > *:nth-child(5) .image{
background-image: url(../images/index-bg_02.jpg);
transform: translate(0%, 10%);
}


/* for IE adjustment
------------------------------------------------------------------ */

@media all and (-ms-high-contrast:none){

}







/* loader
------------------------------------------------------------------ */

.loader {
position:absolute;
display:block;
top:0;
left:0;
right:0;
bottom:0;
background-color:#ffffff;
opacity:1;
z-index:1000;
}

.loader .bar {
position:fixed;
display:block;
top:50%;
left:0;
right:0;
width: 40px;
height: 40px;
margin:-20px auto 0;
border-top: 3px solid #e1eff2;
border-right: 3px solid #e1eff2;
border-bottom: 3px solid #e1eff2;
border-left:3px solid #ff6565;
border-radius: 50%;
transform: translateZ(0);
animation: loader .8s infinite linear;
opacity:1;
z-index:2;
}

.run .loader{
display:none;
z-index:-1;
}

@-webkit-keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}



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

.tablet-4column{
flex-wrap: wrap !important;
}

.tablet-4column > *{
flex-basis: 25% !important;
max-width: 25% !important;
}

.merit{
min-height: 0;
}

.merit::before{
}

.merit::after{
}

.merit .txt{
position: relative;
top: auto;
transform: translate(0);
order: 2;
}

.merit > *:nth-child(n+2){
order: 1;
}

.merit > *:nth-child(n+4){
order: 3;
}

.merit > *:nth-child(n+2) .image{transform: translateY(2%);}
.merit > *:nth-child(n+4) .image{transform: translateY(-2%);}

}


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

.sp-2column{
flex-wrap: wrap !important;
}

.sp-2column > *{
flex-basis: 50% !important;
max-width: 50% !important;
}

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

.sp-column > *{
padding-left: 0;
padding-right: 0;
flex-basis: 100% !important;
max-width: 100% !important;
}

.scene::before{
}

.wrapper h2{
font-size: 1.75rem !important;
}

.wrapper h3{
font-size: 1.5rem !important;
}

.titlearea{
margin-bottom: 0;
}

.h1{
background-size: contain;
background-position: center;
height: auto;
padding-top: 0;
padding-bottom: 13%;
}

.merit{
min-height: 0;
}

.merit::before{
}

.merit::after{
width: 100vw;
}

.merit .txt{
background: none;
padding: 0;
order: 1;
}

.merit > *:nth-child(n+2){
padding: 2vw 0;
}

.merit > *:nth-child(n+2) .image{
height: 48vw;
width: 48vw;
font-size: 1.125rem;
transform: translate(0);
}

.wrapper h2.point{
padding-top: 3.25em;
}

.wrapper h2.point .mark{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}

}

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

.wrapper{font-size: 1rem;}

.merit::before{
bottom: 50%;
background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%);
background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%);
}

.merit .txt{
padding-bottom: 20px;
font-size: 2rem;
line-height: 1.4;
}

.merit .txt strong{font-size: 3.625rem;}

.merit > *:nth-child(n+2) .image > *{
padding: 4px;
}

.merit > *:nth-child(n+2) .image > * br{
display: none;
}

.bold{
font-size: 2rem;
}

.bold strong{
font-size: 3.625rem;
}

}

@media print{

}

/* adjust for IE11
------------------------------------------------------------*/
@media all and (-ms-high-contrast:none){
html{height:100%;overflow:hidden;}
body{height:100%;overflow:auto;}
}
/*------------------------------------------------------------
adjust for IE11 */