@charset "UTF-8";

/*CSSDocument*/

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,300,400,500,600,700,900&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');

/* html body base
===============================================================*/

/*
html ----------------------------------------------------------*/


html{
 font-size: 62.5%;
}


*{ margin:0px; padding:0px; }

body{
	color:#353535;
	margin:0;
	padding:0;
	background:#fff;
 font-family: 'Noto Sans CJK JP','游ゴシック体', 'Yu Gothic', YuGothic,"ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" !important;
	text-align:center;
font-size:1.6rem;
line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	font-feature-setting : "palt";
 min-width: 320px;
}



body.open{
 position: fixed;
	width: 100%;
	z-index: 1;
}


a{ 
	color:#195c9e;
	text-decoration:none;
	}
a:visited{ 
	color:#195c9e;
	text-decoration:none;
	}
a:hover{ 
	color:#195c9e;
	text-decoration:underline;
	}
a:active{ 
	color:#195c9e;
	text-decoration:underline;
	}

ul{ list-style:none;}

a:hover img {
	filter: alpha(opacity=70) !important;
	-moz-opacity:0.70 !important;
	opacity:0.70 !important;
	-webkit-transition: all .2s linear;
}

img{
	margin:0;
	padding:0;
	vertical-align:top;
 max-width: 100%;
 height: auto;
	}






.sp{
	display:none;
	}

.pc{
	display:block;
	}


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


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

.sp{
	display:block;
	}

.pc{
	display:none;
	}

}




/*
html ----------------------------------------------------------*/



/* body base
===============================================================*/		



/* header
===============================================================*/


header{
 background:url("../images/head-back-02-lower.jpg") no-repeat bottom center / 100%;
}

.header-01{
 padding-top: 17%;
}
.header-02{
}

.is-inner{
 max-width:1000px;
 width: 100%;
 margin: 0 auto;
}


.header-position.is-stickey{
 position: fixed;
 top:0;
 left: 0;
 width: 100%;
 z-index: 99;
}

h1{
 padding-bottom: 5%;
}

p.header-read{
 padding-bottom: 4%;
 opacity: 0;
 transition: ease-in .4s;
}

p.pre{
 margin-bottom:3%;
 opacity: 0;
 transition: ease-in .8s;
}
p.date{
 margin-bottom:3%;
 opacity: 0;
 transition: opacity ease-in .8s;
}

header.is-animate p.header-read{
 opacity: 1;
}
header.is-animate p.pre{
 opacity: 1;
 transition-delay: .8s;
}
header.is-animate p.date{
 opacity: 1;
 transition-delay: .6s;
}

header .is-inner.lvl2{
  transform: translateY(-120%);
}





.header-tit-back{
 background: url("../images/head-back-02-up.png") no-repeat bottom center / 100%;
 padding: 4.5% 0 1.5%;
}
.header-position.is-stickey .header-tit-back{
 background: #fff;
 padding: 1% 0 0;
 transition: all ease-in .4s;
 box-shadow: 0 0 5px #666;
}
.header-position.is-stickey .header-tit-back h1{
padding: 0;
}
.header-position.is-stickey .header-tit-back h1 img{
 height:50px;
 width: auto;
 padding: 0;
}

.header-position.is-stickey .header-tit-back p.date{
 margin-bottom:0;
  transform: translateY(40%);
}


@media screen and (max-width: 1300px) {
 .header-tit-back{
 background: url("../images/head-back-02-up.png") no-repeat bottom center / 100%;
 padding: 4.5% 0 0%;
}
 
}




.header-position.is-stickey .is-inner.lvl2{
 display: block;
}
.header-position.is-stickey  p.date img{
 height:30px;
 width: auto;
}


.header-bottom-read{
 padding-top: 6%;
 padding-bottom:8%;
}




h1{
 opacity:0;
 transition-delay: .5s;
 transition: opacity ease-in 1s;
}
header.is-animate h1{
 opacity:1;
  transform: translateX(0);
}





.main-read{
 margin-bottom:18%;
}

h2{
 width:50%;
 margin: 0 auto 4%;
 transition: all ease-in .4s;
  transform: translateY(30px);
 opacity: 0;
 position: relative;
}
h2.is-animate{
 margin: 0 auto 4%;
  transform: translateY(0);
 opacity:1;
}

h2 span{
 position: absolute;
 right: -15%;
 width: 30%;
 bottom: 0;
  transform: translateY(30px);
 opacity: 0;
 transition: all ease-in .4s;
}
h2 span.lvl2{
 position: absolute;
 right: -12%;
 width: 30%;
 bottom: 50%;
}

h2.is-animate span{
 transition-delay: .3s;
  transform: translateY(0);
 opacity: 1;
 
}

.main-body-in{
 background:url("../images/body-back.png") no-repeat top center / 100%;
 padding-bottom: 13%;
}





.main-method-01,
.main-method-02{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
.main-method-02{
 padding-bottom:15%;
}


.main-method-01 div,
.main-method-02 div{
 width: 50%;
 padding: 0 1%;
 box-sizing: border-box;
}

.main-method-01 .main-left,
.main-method-02 .main-left{
 margin-top: 20%;
}

.main-method-01 .main-right.lvl2,
.main-method-02 .main-right.lvl2{
 margin-top:-10%;
}

.main-method-01 .main-right.lvl2 img,
.main-method-02 .main-right.lvl2 img{
 margin-left: -15%;
 position: relative;
}

.main-method-02 .main-left.lvl2 img{
 width: 80%;
 margin: -30% auto 0;
}


.bottom-banner{
 padding-bottom:5%;
 opacity: 0;
 transition: ease-in .4s;
}

.bottom-banner.is-animate{
 opacity: 1;
 transition-delay: .3s;
}


.main-method-01 div h3,
.main-method-02 div h3{
 padding-top: .3em;
 font-size: calc(1.5rem + ((1vw - 7.68px) * 0.9549));
}


.main-left{
 opacity: 0;
 transition: ease-in .4s;
 transform: translateY(30px);
}
.main-right{
 opacity: 0;
 transition: ease-in .4s;
 transform: translateY(30px);
}
.main-left.lvl2{
 opacity: 0;
 transition: ease-in .4s;
 transform: translateY(30px);
}
.main-right.lvl2{
 opacity: 0;
 transition: ease-in .4s;
 transform: translateY(30px);
}
.main-left.is-animate{
 opacity: 1;
 transform: translateY(0);
}
.main-right.is-animate{
 opacity: 1;
 transform: translateY(0);
}
.main-left.lvl2.is-animate{
 opacity: 1;
 transform: translateY(0);
}
.main-right.lvl2.is-animate{
 opacity: 1;
 transform: translateY(0);
}





.main-method-01 .main-left h3{
 color: #169243;
}
.main-method-01 .main-right h3{
 color: #009fd6;
}
.main-method-01 .main-left.lvl2 h3{
 color: #573300;
}
.main-method-01 .main-right.lvl2 h3{
 color: #e99214;
}

.main-method-02 .main-left h3{
 color: #e9558e;
}
.main-method-02 .main-right h3{
 color: #834396;
}

.main-method-02 .main-right.lvl2 h3{
 color: #231815;
}


.main-method-01 figure{
 position: relative;
}

.main-method-01 figure span{
 position: absolute;
 left:0;
 top:0;
 width: 30%;
 opacity: 0;
 transition: ease-in .4s;
 transform: translateY(20px);
}
.main-left.is-animate figure span,
.main-right.is-animate figure span,
.main-left.lvl2.is-animate figure span,
.main-right.lvl2.is-animate figure span{
 opacity: 1;
 transform: translateY(0);
 transition-delay: .3s;
}




.main-method-01 .main-right.lvl2 figure span{
 position: absolute;
 left:auto;
 top:-2%;
 right: 10%;
}
.main-method-01 .main-left.lvl2 figure span{
 position: absolute;
 left:25%;
 top:-5%;
}


.bottom{
 background:url("../images/bottom-01.png") no-repeat top center / 100%;
 padding-top: 7%;
}

.bottom h3{
 margin-bottom:5%;
}
.bottom p{
 margin-bottom:5%;
}

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

.main-method-01 div h3,
.main-method-02 div h3{
    font-size: 2.6rem;
}
 
 
}


@media screen and (max-width: 768px) {
 
.is-inner{
 box-sizing: border-box;
 padding: 0 4%;
}
 
.main-method-01 figure span{
 width: 40%;
}
 .main-method-01 .main-left.lvl2 figure span{
 top:-10%;
}
 
 
}


@media screen and (max-width: 480px) {
 
.header-position.is-stickey .header-tit-back h1 img{
 height:35px;
 width: auto;
}


.header-position.is-stickey  p.date img{
 height:20px;
 width: auto;
}


}