@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;
background: url(../images/index-bg_01.png) #F0F0E1;
box-sizing:border-box;
color: #251714;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
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.25rem;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;
display: flex;
background: url(../images/index-bg_titlearea.png) center top repeat-x;
justify-content: center;
align-items: center;
}

.h1{
display: flex;
background: url(../images/index-bg_h1.png) center center no-repeat;
background-size: cover;
width:100%;
max-width: 1200px;
line-height: 1.4;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
justify-content: center;
}

.h1 h1{
display: flex;
min-height: 520px;
width:100%;
line-height: 1.4;
text-align: center;
vertical-align: middle;
flex-shrink: 1;
flex-basis: 100%;
justify-content: center;
align-items: center;
}

.wrapper h2{margin:100px auto;padding-bottom: 5px;border-bottom: 1px dashed #DE6C50;}

.wrapper h3{position: relative;margin:60px auto 20px;}
.wrapper h3 > span{position: relative;display: inline-block;}
.wrapper h3 > span::before,
.wrapper h3 > span::after{
content: "";
position: relative;
display: inline-block;
width: 3em;
margin: 0 .4em .3em;
border-bottom: 1px solid #000;
vertical-align: middle;
}

.wrapper h4{
max-width:800px;
padding:0 .5em .5em;
margin:0 auto 1em;
}

.wrapper h4::before{
content:"";
display:block;
position:absolute;
left:-1rem;
right:-1rem;
bottom:0;
border-bottom:1px dashed #666666;
}

.wrapper h4::after{
content:"";
display:block;
position:absolute;
left:0;
right:0;
bottom:-1.5rem;
height:3rem;
border-left:1px dashed #666666;
border-right:1px dashed #666666;
}

.wrapper .column h4{
margin-bottom:1rem;
}

.wrapper .column h4::before{
right:auto;
width:30%;
}

.wrapper .column h4::after{
right:auto;
border-right:none;
}

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

.wrapper strong{
color: #541E10;
font-weight: bold;
}

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

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

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

.wrapper table{
width: 100% !important;
margin: 0 auto !important;
}


.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;}
.wrapper .fs26{font-size:1.625rem !important;}
.wrapper .fs28{font-size:1.75rem !important;}
.wrapper .fs30{font-size:1.875rem !important;}
.wrapper .fs40{font-size:2.5rem !important;}
.wrapper .fs48{font-size:3rem !important;}
.wrapper .fs60{font-size:3.625rem !important;}
.wrapper .fs60{font-size:3.625rem !important;}
.wrapper .fs72{font-size:4.5rem !important;}

.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;}

.wrapper .p0{padding: 0 !important;}
.wrapper .p5{padding: 5px !important;}

.wrapper .l4{line-height: 1.4 !important;}

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

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

.column *{
text-align:left;
}

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

.col2{flex-basis:200%;}
.col3{flex-basis:300%;}
.col4{flex-basis:400%;}
.col5{flex-basis:500%;}
.col6{flex-basis:600%;}

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

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

.figure{padding:0;text-align:center;margin:2rem auto;}
.figure img{display: inline-block;max-width: 1000px;width: 100%;}
.filter{opacity: 1;filter: none;transition: all 1s;}
.filter.on{
filter: blur(4px) sepia(60%);
opacity: 0;
}

.box{
background-color: rgba(255,255,255,.2);
margin: 40px auto;
padding:40px;
border: 1px solid #C6C692;
border-radius: 4px;
}

.box.white{
background-color: #ffffff;
padding-top: 20px;
padding-bottom: 20px;
border: none;
}

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

.box h2, .box h3{margin-top: 0;}

.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;
}

.notes.inline{
display: block;
}

.notes.inline > li{
display: inline-block;
padding-left:1em;
}

.notes.inline > li:nth-child(n+2){
}


.orange{color:#FF6600;}
.red{color:#B20000;}
.blue{color:#0059B2;}
.violet{color:#8500B2;}


.btn{
position:relative;
display:inline-block;
min-width:14em;
margin:3px;
padding:.4em 2em;
border:1px solid #666666;
color:#251714;
text-align:center;
line-height:1;
}

.btn::after{
content:"";
position:absolute;
top:.2em;
bottom:0;
right:1em;
height:1.25em;
width:1.25em;
border:1px solid transparent;
border-top-color:#666666;
border-right-color:#666666;
transform:rotate(45deg);
transform-origin:center;
line-height:1;
transition:right .5s ease;
}

.btn:hover::after{
right:.5em;
}

.btn.orange{
background-color:#FF6600;
border-color:#FF6600;
color:#ffffff;
}

.btn.orange::after{
border-top-color:#ffffff;
border-right-color:#ffffff;
}

.link{
position:relative;
display: inline-block;
}

.link::after{
content:"";
position:relative;
display: inline-block;
height:.5em;
width:.5em;
border:1px solid transparent;
border-top-color:#666666;
border-right-color:#666666;
line-height:1;
transform: translateY(-15%) rotate(45deg) skew(-10deg, -10deg);
transform-origin:center;
}

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

.section{
display: flex;
min-height: 100vh;
}

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

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



.trouble{
position: relative;
padding:5em 0 6em !important;
}

.trouble::after{
content: url("../images/index-char_01.png");
position: absolute;
left:50%;
bottom:0;
display: block;
background-size: contain;
transform: translateX(-50%);
z-index: 20;
}

.trouble li{
position: relative;
padding: 0;
border-radius: 100%;
text-align: center;
z-index: 1;
}

.trouble li:nth-child(1),
.trouble li:nth-last-child(1){
position: relative;
min-height: 20rem;
margin-bottom: -5em;
}

.trouble li:nth-child(1){
margin-right: -1em;
}

.trouble li:nth-child(2){
margin-top: -5em;
margin-right: -.5em;
margin-left: -.5em;
z-index: 2;
}

.trouble li:nth-last-child(1){
margin-left: -1em;
}

.trouble li > *{
position: relative;
display: block;
text-align: center;
z-index: 1;
}

.trouble li > *:nth-child(n+2){
position: absolute;
bottom: 80%;
left: 10%;
right: 10%;
display: block;
background-color: rgba(255,255,255,.7);
padding: 8px;
border-radius: 8px;
box-shadow: 0px 0px 6px #DE6C50;
color: #541E10;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.4;
z-index: 10;
}



.separate li{
position: relative;
display: flex;
padding:1em;
border-left: 1px dashed #251714;
justify-content: center;
flex-wrap: wrap;
}

.separate li > *{
flex-grow: 1;
flex-basis: 100%;
text-align: center;
}

.separate li:nth-child(1){
border-left: none;
}

.step li::before{
content: "";
position: absolute;
display: block;
top:50%;
left: 0;
border:2em solid transparent;
border-left:1em solid #251714;
border-right:none;
transform: translate(-50%, -50%);
}

.step li:nth-child(1)::before{
display: none;
}


span.attention{
position: relative;
display: inline-block;
padding: 0;
color: #DE6C50;
font-size: 120%;
transform: translateY(5%);
z-index: 1;
}

span.attention::before,
span.attention::after{
content: "";
position: absolute;
top:50%;
left:50%;
height: 4em;
width:4em;
border:1px solid #DE6C50;
border-radius: 100%;
transform: translate(-50%,-50%);
opacity: .2;
z-index: -1;
}

span.attention::after{
height: 3.8em;
width:3.8em;
}

strong.attention{
position: relative;
display: inline-block;
padding:0 4px;
margin: 4px;
color: inherit;
font-size: 120%;
text-shadow: 1px 1px 0 #F0F0E1;
z-index: 1;
}

strong.attention::before{
content: "";
position: absolute;
left:0;
right: 0;
bottom: 0;
display: block;
height: 40%;
background-color: #EDD4C3;
z-index: -1;
}


.arrow{
position: relative;
margin-top: 100px !important;
padding-top: 4em !important;
}

.arrow::before{
content: "";
position: absolute;
left: 50%;
top:0;
display: block;
width: 0;
height: 0;
border:8em solid transparent;
border-top:2em solid #EDD4C3;
border-bottom: none;
transform: translateX(-50%);
}

.talk{
display: flex;
max-width: 800px;
margin: 10px auto 40px;
align-items: center;
}

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

.talk > *{
position: relative;
flex-grow: 1;
flex-shrink: 1;
}

.talk > *:nth-child(1){
flex-grow: 0;
z-index: 2;
}

.talk > *:nth-child(n+2){
background-color: #fff;
margin-left: 20px;
padding:20px;
border-radius: 8px;
z-index: 1;
}

.talk > *:nth-child(n+2)::before{
content: "";
position: absolute;
top:50%;
right: 100%;
display: block;
height: 0;
width: 0;
border: 5px solid transparent;
border-right: 20px solid #fff;
border-left: none;
transform: translateY(-50%);
}


/* 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:#F0F0E1;
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 #EDD4C3;
border-right: 3px solid #EDD4C3;
border-bottom: 3px solid #EDD4C3;
border-left:3px solid #DE6C50;
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){

.trouble{
}

.trouble li > *:nth-child(n+2){
font-size: 1.25rem;
}

}


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

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

.sp-column > *{
padding-left: 0;
padding-right: 0;
}

.sp-table{
	display:block;
	border:1px solid #cccccc;
}

.sp-table thead,
.sp-table tbody{
	display:block;
}

.sp-table tr{
	display:flex;
	flex-wrap:wrap;
}

.sp-table tr > *{
	display:block;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:100%;
}

.sp-table tr > th br{
	display:none;
}

#AS-wrapper .sp-table th{
	border:none;
	border-bottom:1px solid #cccccc;
	text-align:center;
}

#AS-wrapper .sp-table td{
	padding:10px;
	border:none;
	text-align:center;
}

#AS-wrapper .sp-table td:nth-last-child(1){
	border-bottom:1px solid #cccccc;
}

.box{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}

.wrapper h2{
font-size: 1.75rem !important;
margin-bottom: 50px;
}

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

.wrapper h3 > span::before, .wrapper h3 > span::after{
width: 1em;
}

.h1{
background-position: center top;
background-size: contain;
padding-top: 25%;
}

.h1 h1{
min-height: auto;
}

.trouble{
overflow: hidden;
padding: 1em 0 0 !important;
flex-wrap: wrap;
}

.trouble::after{
top:40%;
bottom:auto;
left: 75%;
}

.trouble li{
min-height: auto !important;
margin: 0 !important;
padding: 5px;
flex-basis: 50%;
flex-grow: 0;
}

.trouble li > *:nth-child(n+2){
font-size: 1rem;
}

.separate li > *{
font-size: .875rem;
}

.wrapper .arrow{
font-size: 1.5rem !important;
line-height: 1.2;
}

.talk > *:nth-child(1){
min-width: 25vw;
}

.talk p{
font-size: 1rem;
}

}

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

.wrapper h3 > span::before, .wrapper h3 > span::after{
display: none;
}

.trouble li > *:nth-child(n+2){
left:5px;
right: 5px;
font-size: .875rem;
}

.separate{
flex-wrap: wrap;
}

.separate li{
border-bottom: 1px dashed #251714;
border-left: none;
}

.separate li > *{
font-size: inherit;
}

.step li::before{
top: 0;
left: 50%;
border:2em solid transparent;
border-top:1em solid #251714;
border-bottom:none;
}

.separate li:nth-last-child(1){
border-bottom: none;
}

.wrapper .arrow{
font-size: 1.125rem !important;
}

.talk p{
font-size: .825rem;
}

}

@media print{

.figure img.filter{
filter: none;
opacity: 1;
}

}

.video{
	position:relative;
	width:100%;
	margin:0 auto;
	padding-top:56.25%;
	}

.video iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}