@charset "utf-8";

/*=====================================================
COMMON-LAYOUT
======================================================*/

div.contents_wrap{
	background:none;
	padding:0;
}
 
.main_wrap{
	padding:160px 20px 80px;
	color:#00A659;
	position: relative;
	background:#f1e800;
	/*background:url("../images/component/main_bg.jpg") center top / cover no-repeat;*/
}

.main_in{
	text-align: center;
	position: relative;
}

.main_in .main_pos{
	max-width:540px;
	margin: 0 auto 30px;
	position: relative;
}

.main_pos .main_sub{
    overflow: hidden;
    position: relative;
	line-height: 1.4;
    padding: 5px;
    padding: 10px 5px 0px\0;
    box-sizing: border-box;
    text-align: center;
}

.main_pos .main_sub:before{
	content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 90%;
    margin: auto;
    height: 90%;
    background: #FFF;
    transform: skewX(-30deg);
}

.main_pos .main_sub span {
    position: relative;
    font-size: 28px;
}

.main_pos .main_logo{
	position: absolute;
	left:-15%;
	top:-30px;
	width:22.41%;
}

.main_in .main_ttl{
	font-size:58px;
	line-height: 1.4;
}

.main_wrap .main_cloud{
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	pointer-events: none;
}

.main_wrap .main_cloud > p{
	pointer-events: all;
	position: absolute;
}

.main_wrap .main_cloud > .c1{
	left:0;
	top:-2%;
	width:31.04%;
}

.main_wrap .main_cloud > .c2{
	right:0;
	top:15%;
	width:12.07%;
	text-align: right;
}

.main_wrap .main_cloud > .c3{
	right:19%;
	bottom:5%;
	width:17.85%;
}



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

	.main_wrap{
		padding:120px 20px 50px;
	}
	
	.main_in .main_pos{
		max-width:460px;
	}
	
	.main_pos .main_sub span{
		font-size:22px;
	}
	
	.main_in .main_ttl{
		font-size:48px;
	}
	
}



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

	.main_wrap{
		padding:115px 20px 40px;
	}
	
	.main_in .main_pos{
		max-width:280px;
	}
	
	.main_pos .main_sub span{
		font-size:18px;
	}
	
	.main_pos .main_logo{
		width:30%;
		left:-15%;
	}
	
	.main_in .main_ttl{
		font-size:9vw;
	}
	
	.main_wrap .main_cloud > .c1{
		top:5%;
		width:50%;
	}

	.main_wrap .main_cloud > .c2{
		top:15%;
		width:20%;
	}

	.main_wrap .main_cloud > .c3{
		right:5%;
		bottom:0%;
		width:25%;
	}
	
	
}

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

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
























/*	コンテンツ	*/


div.container {
    max-width: 100%;
    position: relative;
    padding: 90px 20px;
	overflow: hidden;
}

div.container:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url(../images/common/beige_bg.jpg) bottom center repeat;
}

.flag{
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	pointer-events: none;
}

.flag > p{
	position: absolute;
	pointer-events: all;
	z-index:-1;
}

/*	旗	*/	
.flag .f1{
	right:0;
	top:-4%;
	width:22.07%;
}

.flag .f2{
	left:0;
	top:26%;
	width:23.28%;
}

.flag .f3{
	right:0;
	bottom:42%;
	width:23.28%;
}
/*	旗3点	*/


/*	雲5点	*/

.flag .d1{
	left:0;
	top:5%;
	width:12.07%;
}

.flag .d2{
	right:0;
	top:25%;
	width:14.66%;
}

.flag .d3{
	left:0;
	bottom:10%;
	width:22.85%;
}

.flag .d4{
	right:0;
	top:60%;
	width:8.63%;
}

.flag .d5{
	right:10%;
	bottom:-10%;
	width:17.25%;
}


/*	雲	*/



.title{
	font-size:48px;
	text-align: center;
	color:#00A659;
	line-height: 1.4;
}

.title .red{
	color:#E60012;
}


.read.first{
	margin-bottom:130px;
}



.w_box{
	max-width:590px;
	position: relative;
	margin:0 auto 100px;
	box-sizing:border-box;
	background:rgba(255,255,255,0.7);
	padding:50px 20px 30px;
	border-radius:10px;
	text-align: center;
}




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

	div.container{
		padding:60px 20px;
	}
	
	
	.title{
		font-size:38px;
	}

	.read.first{
		margin-bottom:60px;
	}
	
	.w_box{
		padding:40px 20px 20px;
		margin:0 auto 60px;
	}
	
	
}




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

	
	.title{
		font-size:30px;
	}

	
	.w_box{
		padding:30px 20px 20px;
	}
	
	

	/*	旗	*/	
	.flag .f1{
		right:0;
		top:10%;
		width:30%;
	}

	.flag .f2{
		width:30%;
	}

	.flag .f3{
		width:30%;
	}
	/*	旗3点	*/


	/*	雲5点	*/

	.flag .d1{
		top:5%;
		width:30%;
	}

	.flag .d2{
		right:0;
		top:25%;
		width:25%;
	}

	.flag .d3{
		left:0;
		bottom:10%;
		width:30%;
	}

	.flag .d4{
		right:0;
		top:60%;
		width:15%;
	}

	.flag .d5{
		right:10%;
		bottom:-10%;
		width:30%;
	}


	/*	雲	*/
	
	
	
}

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

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