@charset "utf-8";
/* CSS Document */
*{
	padding: 0;
	margin: 0;
	border:0;
	vertical-align:top;
}

html, body {
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	height: auto;
}

body {
	font-size: 1.6rem;
    font-family: "游ゴシック Medium", "Yu Gothic Medium","Yu Gothic", "游ゴシック体", YuGothic, "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	padding: 0;
	margin: 0;
	width:100%;
	color:#000;
	line-height:1.8;
	letter-spacing: 0.04rem;
	display: none;
}
@font-face {
  font-family: "KosugiMaru";
  src: url("../font/KosugiMaru_subset.woff") format('woff'),
       url("../font/KosugiMaru_subset.ttf")  format('truetype');
}
.container{
	overflow: hidden;
}
.maru_font {
    font-family:'KosugiMaru',"游ゴシック Medium", "Yu Gothic Medium","Yu Gothic", "游ゴシック体", YuGothic, "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	letter-spacing: 0;
	margin-bottom: 10px;
}
.sp{
	display:none;
}

/*----------------------------------------


 link
 
 
----------------------------------------*/	
a:hover{
	opacity: 0.7;
}

a img {
	-webkit-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
}

/*----------------------------------------


animation


----------------------------------------*/	
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
	-webkit-transition: all 1500ms cubic-bezier(0.19, 1, 0.22, 1);
    transition : all 1500ms cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: 0.5s;
    }
.mashiro_ph.fadein {
	-webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
    transition : all 800ms cubic-bezier(0.19, 1, 0.22, 1);
 	transition-delay: 1.0s;
   } 
.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
/*----------------------------------------


header


----------------------------------------*/
header{
	width: 100%;
}

header .inner{
	position: relative;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    -ms-justify-content: space-between;
	justify-content:space-between;
	width: 1200px;
	margin: 0 auto;
}
header .SiteLogoTop {
    display: block;
    margin: 0 20px 0 8px;
    padding: 25px 0 0;
}
header .SiteLogoTop img{
	width: 82px;
}
header .sponsor{
	padding: 15px 0 10px;
	text-align: right;
	font-size: 12px;
	line-height: 1.2;
}
header .sponsor span{
	display: block;
	font-size: 18px;
}

/*----------------------------------------


fv


----------------------------------------*/
header .fv{
	background: url(../img/head_bg.png) repeat-x;
	height: 732px;
	width: 100%;
	min-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
header .fv > *{
	opacity: 0;
}
header .fv .ico,
header .fv h1,
header .fv .fv_txt{
	margin: 0 auto;
}
header .fv .ico{
	width: 175px;
}
header .fv h1{
	padding: 65px 0 20px;
	width: 740px;
}
header .fv .fv_txt{
	width: 520px;
	background-image:linear-gradient( 180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 97%,#fff 97%, #fff 100%);
	background-size:100% 2.5em;
	line-height:2.5;
	overflow: hidden;
	font-size: 2.0rem;
	padding-bottom: 2px;
	color: #fff;
	margin-top: 20px;
}
header .fv .ico img,
header .fv h1 img{
	width: 100%;
}
/*----------------------------------------


flow


----------------------------------------*/
.flow_area{
	position:fixed;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    -ms-justify-content: space-between;
	justify-content:space-between;
	width: 1200px;
	margin: 0 auto;
	top:350px;
	left: 0;
	right: 0;
	opacity: 0;
	z-index: 100;
}
.flow_area .flow {
	position: relative;
	display: none;
	width: 250px;
	color: #fff;
}
.flow_area .flow img {
	width: 100%;
}
.flow_area .flow .txt_area {
	position: relative;
	z-index: 10;
	margin-top: -80px;
}
.flow_area .flow .name_area {
	position: relative;
	top: 30px;
}
.flow_area .flow .name_area .katagaki {
	background: #fff;
	border-radius: 50%;
	width: 64px;
	height: 64px;
	text-align: center;
	padding-top: 20px;
	box-sizing: border-box;
	color: #2d9f16;
	font-size: 1.6rem;
}
.flow_area .flow .name_area .name {
	font-size: 2.4rem;
	padding: 5px 0 0 15px;
	line-height: 1.6;
}
.flow_area .r_area .name_area .name {
	padding-top: 25px;
}
.flow_area .flow .name_area .name span{
	position: relative;
	top:8px;
	font-size: 1.8rem;
}
.flow_area .flow .name_area .name .jyuku{
	position: static;
	display: block;
	font-size: 1.2rem;
}
.flow_area .flow .txt{
	background: #81511c;
	border: 3px solid #fff;
	border-radius: 5px;
	padding: 25px 20px;
	box-sizing: border-box;
	width: 100%;

    height: 250px;
	font-size: 1.2rem;
	line-height: 1.5;
	text-align: left;
}
@media screen and (max-height:850px) { 
	.flow_area.scroll{
		animation: scroll 0.8s 1 forwards;
	}
	.flow_area.scroll_remove{
		animation: scroll_remove 0.8s 1 forwards;
	}
}
@keyframes scroll {
    0% {
        top:280px;
    }
    100% {
        top:15%;
    }
}
@keyframes scroll_remove {
    0% {
        top:15%;
    }
    100% {
        top:280px;
    }
}
/*----------------------------------------


article


----------------------------------------*/	
article {
	padding: 80px 0 0;
	background: #f2f7fe;
	width: 100%;
	min-width: 1200px;
}

article .inner{
	width: 660px;
	margin: 0 auto;
}

/*----------------------------------------


section


----------------------------------------*/
section {
	padding: 0 0 60px;
}
section .cach{
	font-size: 2.0rem;
	font-weight: bold;
	padding-bottom: 80px;
	text-align: center;
}
section p{
	padding: 0 0 30px;
}
section .bold{
font-weight: bold;
}
section .green{
	color: #2d9f16;
}
section .pink{
	color: #FF8CD8;
}
section .faq_area {
	position: relative;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	padding-bottom: 60px;	
	width: 100%;
}
section .faq_area .ico {
	width: 135px;
}
section .q_area .ico {
	padding-left: 10px;
}
section .a_area .ico {
	padding-right: 10px;
}
section .faq_area .ico img{
	width: 100%;
}
section .faq_area .hukidashi {
	position: relative;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	background:#2d9f16;
	border-radius: 8px;
	width: 490px;
	height: 110px;
	color: #fff;
	font-size: 2.0rem;
	padding: 15px 15px 15px 50px;
	box-sizing: border-box;
	font-weight: normal;
	line-height: 1.4;
}
.finish {
	margin-top: 50px;
}
.finish .hukidashi {
	padding-left: 20px !important;
}

section .faq_area .hukidashi span{
	position:absolute;
	left: 15px;
	top:20%;
	color: #fff100;
	font-size: 4.8rem;
}
section .faq_area .hukidashi:after {
	position: absolute;
	content: "";
	width: 35%;
	width: 0;
	height: 0;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
}
section .q_area .hukidashi:after {
	border-left: 20px solid #2d9f16;
	right: -19px;
}
section .a_area .hukidashi:after {
	border-right: 20px solid #2d9f16;
	left: -19px;
}
section .main_txt_area p{
	position: relative;
	padding: 0 0 30px 45px;
}
section .main_txt_area p span{
	position:absolute;
	left: 0;
	top:0;
}

/*----------------------------------------


matome_area


----------------------------------------*/
.matome_area{
	position: relative;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	background:url(../img/sec_kokuban_bg.png) repeat-x center top;
	height: 437px;
	text-align: center;
	color: #fff;
	padding: 0;
}
.matome_area .inner h2{
	background:url(../img/line.png) no-repeat center bottom;
	font-size: 2.8rem;
	font-weight: normal;
	margin-bottom: 20px;
}
.matome_area .inner h3{
	font-size: 3.3rem;
}
/*----------------------------------------


note_area


----------------------------------------*/
.note_area{
	background:url(../img/note_pc_bg.jpg) no-repeat center top;
	background-size: cover;
	padding-bottom: 0;
	min-height: 100vh;
}
.note_area .inner{
	position: relative;
	opacity: 0;
	top:70px;
	width: 1000px;
	padding: 60px 0 30px;
}
.note_area .ttl_area{
	width: 500px;
	margin: 0 auto;
	padding-bottom: 30px;
}
.note_area .ttl_area h2{
	width: 500px;
}
.note_area .ttl_area p{
	font-size: 2.4rem;
	padding-top: 30px;
	text-align: center;
}
.note_area .box_area{
	background: #fff;
	width: 720px;
	padding: 40px 30px;
	box-sizing: border-box;
	border-radius: 8px;

}
.note_area .box_area p span{
	display: block;
}
.note_area .box_area p span.annotation {
	font-size: 1.2rem;
	margin-top: 6px;
}
.note_area .box_area .bag_area{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: flex-end;
}
.note_area .box_area .bag_area .ph{
	width: 214px;
	padding-right: 20px;
}
.note_area .box_area h3 {
	color: #00A400;
	font-size: 2rem;
}
.note_area .box_area .gray {
	background: #F0F0F0;
	padding: 10px 22px;
	margin-bottom: 30px;
}
.note_area .box_area .gray p {
	margin-bottom: 8px;
	padding: 0;
}
.note_area .box_area  ul li {
	font-weight: bold;
}
.note_area .box_area .bag_area p{
	font-size: 1.2rem;
	width: 400px;
	padding-bottom: 0;
}
.note_area .box_area .bag_area p span{
	display: block;
	padding-bottom: 5px;
	font-weight: bold;
}
.note_area .box_area .bag_area p span:before{
	content: "◀";
}
.note_area .banner{
	width: 500px;
	padding: 80px 0;
}

.note_area p.teikyo{
	text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 40px;
}
.note_area p.teikyo a {
	color: #000;
	text-decoration: none;
}
.note_area .mashiro_ph{
	position: absolute;
	right: 0;
	bottom:0;
	width: 330px;
}
.note_area .box_area .bag_area .ph img,
.note_area .banner img,
.note_area .mashiro_ph img{
	width: 100%;
}
/*----------------------------------------


footer


----------------------------------------*/	
footer {
	position: relative;
	width: 100%;
	padding: 15px 0;
	background: linear-gradient(#2da016, #187303);
	z-index: 101;
	}
footer p{
	font-size:1.2rem;
	text-align:center;
	color: #fff;
	}

@media screen and (max-width:750px) { 
	body {
		font-size: 1.4rem;
		line-height:1.8;
	}
	.sp{
		display:block;
	}
	.pc{
		display:none;
	}
	img{
		width: 100%;
	}
	/*----------------------------------------


	 link


	----------------------------------------*/	
	a:hover{
		opacity: 1;
	}

	a img {
		transition: none;
	}

	/*----------------------------------------


	animation


	----------------------------------------*/	
	.fadein {
		opacity : 1;
		transform : none;
		transition : none;
		}
	.scrollin {
		opacity : 1;
		transform : translate(0, 0);
		}
	/*----------------------------------------


	header


	----------------------------------------*/
	header .inner{
		width: 92%;
	}
	header .SiteLogoTop {
		display: block;
		margin: 0 0 0 0;
		padding: 20px 0 0;
	}
	header .SiteLogoTop img{
		width: 75px;
	}
	header .sponsor{
		padding: 10px 0 10px;
		font-size: 1.0rem;
	}
	header .sponsor span{
		display: block;
		font-size: 1.4rem;
	}

	/*----------------------------------------


	fv


	----------------------------------------*/
	header .fv{
		background-image:url(../img/head_sp_bottom_bg.png),url(../img/head_sp_top_bg.png);
		background-repeat: no-repeat, no-repeat;
		background-position: center bottom, center top;
		background-size: 100%, 100%;;
		height: auto;
		width: 100%;
		min-width: 100%;
		padding-bottom:0;
	}
	header .fv > *{
		opacity: 1;
	}
	header .fv .ico{
		width: 35%;
	}
	header .fv h1{
		padding-top: 40px;
		width: 88%;
	}
	header .fv .fv_txt{
		width: 90%;
		font-size: 1.6rem;
	}
	/*----------------------------------------


	flow


	----------------------------------------*/
	.flow_area{
		position:static;
		width: 96%;
		opacity: 1;
	}
	.flow_area .flow {
		width: 49%;
		display:block;
	}
	.flow_area .flow .txt_area {
		position: relative;
		z-index: 10;
		margin-top: -80px;
		text-align: left;
	}
	.flow_area .flow .name_area {
		padding-bottom: 10px;
	}
	.flow_area .flow .name_area .katagaki {
		width: 40px;
		height: 40px;
		padding-top: 10px;
		font-size: 1.2rem;
	}
	.flow_area .flow .name_area .name {
		font-size: 1.6rem;
		padding: 5px 0 0 5px;
		line-height: 1.3;
	}
	.flow_area .r_area .name_area .name {
		padding-top:10px;
	}
	.flow_area .flow .name_area .name span{
		top:3px;
		font-size: 1.4rem;
	}
	.flow_area .flow .name_area .name .jyuku{
		font-size: 1.1rem;
	}
	.flow_area .flow .txt{
		border: 2px solid #fff;
		padding: 10px;
		height: 250px;
		font-size: 1.1rem;
	}

	/*----------------------------------------


	article


	----------------------------------------*/	
	article {
		padding: 50px 0 0;
		min-width: 100%;
	}

	article .inner{
		width: 90%;
	}

	/*----------------------------------------


	section


	----------------------------------------*/
	section {
		padding: 0 0 50px;
	}
	section .cach{
		font-size: 1.5rem;
		padding-bottom: 30px;
	}
	section p{
		padding: 0 0 30px;
	}
	section .faq_area {
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		justify-content: space-between;
		padding-bottom: 40px;	
		width: 100%;
		margin: 0 auto;
	}
	section .faq_area .ico {
		width: 26%;
	}
	section .faq_area .hukidashi {
		width: 70%;
		height: auto;
		font-size: 1.5rem;
		padding: 10px 10px 10px 30px;
	}
	.faq_area.finish {
		margin-top: 30px;
	}
	.faq_area.finish .hukidashi {
		padding-left: 10px;
	}
	section .faq_area .hukidashi span{
		left: 10px;
		top:25%;
		font-size: 3.0rem;
	}
	section .faq_area .hukidashi:after {
		width: 0;
		height: 0;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
	}
	section .q_area .hukidashi:after {
		border-left: 13px solid #2d9f16;
		right: -12px;
	}
	section .a_area .hukidashi:after {
		border-right: 13px solid #2d9f16;
		left: -12px;
	}
	section .main_txt_area p{
		position: relative;
		padding: 0 0 20px 0;
	}
	section .main_txt_area p span{
		position:static;
	}
	section .main_txt_area p span.pink{
		padding-right: 14px;
	}
	section .main_txt_area p span.green{
		padding-right: 28px;
	}
	/*----------------------------------------


	matome_area


	----------------------------------------*/
	.matome_area{
		background-image:url(../img/matome_sp_mottom_bg.png),url(../img/head_sp_top_bg.png);
		background-repeat: no-repeat, no-repeat;
		background-position: center bottom, center top;
		background-size: 100%, 100%;;
		height: auto;
		width: 100%;
		padding:50px 0;
	}
	.matome_area .inner h2{
		background:url(../img/line.png) no-repeat center bottom;
		background-size: 130px;
		font-size: 2.0rem;
		font-weight: normal;
		margin-bottom: 16px;
	}
	.matome_area .inner h3{
		font-size: 1.8rem;
	}
	/*----------------------------------------


	note_area


	----------------------------------------*/
	.note_area{
		background:url(../img/note_sp_bg.jpg) no-repeat left top;
		background-size: cover;
		padding-bottom: 0;
		min-height:auto;
	}
	.note_area .inner{
		position: relative;
		opacity: 0;
		width: 100%;
		padding: 0;
		top:50px;
	}
	.note_area .ttl_area{
		display: block;
		align-items: center;
		padding: 30px 0;
		width: 100%;
	}
	.note_area .ttl_area h2{
		width: 70%;
		margin: 0 auto;
	}
	.note_area .ttl_area p{
		font-size: 1.7rem;
		text-align: center;
		padding: 20px 0 0 0;
	}
	.note_area .box_area{
		width: 90%;
		margin: 0 auto;
		padding: 25px 15px 0;

	}
	.note_area .box_area h3 {
		font-size: 1.8rem;
	}
	.note_area .box_area p span{
		display: block;
	}
	.note_area .box_area .bag_area{
		display: block;
	}
	.note_area .box_area .bag_area .ph{
		width: 60%;
		margin: 0 auto;
		padding:0 0 20px;
	}
	.note_area .box_area .bag_area p{
		width: 100%;
	}
	.note_area .box_area .bag_area p span{
		padding-bottom: 0;
	}
	.note_area .box_area .bag_area p span:before{
		content: "▲";
	}
	.note_area .banner{
		width: 90%;
		margin: 0 auto;
		padding: 40px 0;
	}

	.note_area p.teikyo{
		font-size: 1.6rem;
	}
	.note_area .mashiro_ph{
		position:relative;
		margin: 0 auto;
		width: 60%;
	}
	/*----------------------------------------


	footer


	----------------------------------------*/	
	footer {
		}
	footer p{
		font-family: Roboto, Arial, Helvetica, Tahoma, Verdana;
		font-size:1.1rem;
		line-height: 1.4;
		width: 90%;
		margin: 0 auto;
		}

}
@media screen and (min-width:500px)  and (max-width:750px) { 
	.flow_area .flow {
		width: 40%;
	}
	.flow_area .flow .txt {
		font-size: 1.2rem;
	}
}


.kotira{
	width: 400px;
}
@media screen and (max-width:750px){
	.kotira{
		width: 90%;
	}
}
/*----------------------------------------


追加style


----------------------------------------*/
section .main_txt_area p > img {
	width: 100%;
	max-width: 100%;
	vertical-align: bottom;
}