@charset "utf-8";
/* CSS Document */

/*============================================
			Universal reset 
============================================*/

/*HTML5の新要素でブロックボックスとしてレンダリングさせる要素に対してプロパティdisplayに値blockを指定します。*/
article,aside,canvas,details,figcaption,figure,header,footer,main,menu,nav,section,summary {display: block;}

/*セレクタと宣言を改行で区切り*/
h1,h2,h3 {
  font-weight: normal;
  line-height: 1.5;
}
.clear{clear: both;}
.pc { display: block !important; }
.tab { display: none !important; }
.sp { display: none !important; }


/*============================================
			  Universal set 
============================================*/
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #FFF;
	color: #430;
	line-height: 1.5em;
	text-align: center;
	background: url(../img/bg.png);
	margin: 0;
	padding: 0;	
	}
img{
	border: none;
	margin: 0 auto;
	padding: 0;
	height:auto;
	pointer-events: none;
	}
a:link{
    text-decoration: none;
    /*color: #7479a6;*/
	}
a:hover img{
    opacity:0.8;
    filter:alpha(opacity=80);
    -ms-filter: “alpha( opacity=80 )”;
	}
a:visited{
  color: inherit;
}
/* out */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
/* in */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }


/*============================================
			       Contents
============================================*/

#wrap{
	width: 100%;
	margin: 0 auto;
	padding:0 0 5rem;
}

.line{
	background: url(../img/line.png) repeat-x;
	height: 65px; 
	}

/*---------top--------*/
#top{
	width: 100%;
	margin: 0 auto;
	}
	#top img{
		width: 100%;
		max-width: 1000px;
		height: auto;
		aspect-ratio: auto 1000 / 650;
		margin: 3rem auto 0;
		}
		@media only screen and (max-width:767px){
			#top img{margin: 0 auto;}
		}
	#top p{
		font-size: 1.8em;
		font-weight: bold;
		line-height:2rem;
		}
		@media only screen and (max-width:767px){
			#top p{
				font-size: 1.1em;
				line-height:1.5rem;
			}
		}

/*---------youtube--------*/
#movie{
	width: 90%;
	max-width: 950px;
	margin: 4% auto 8%;
	}
	@media only screen and (max-width:767px){
		#movie{width: 95%;margin: 10% auto 15%;}
	}
.youtubebox{width:100%;}	
.youtube {
	position: relative;
	width: 94%;
	padding-top: 56.25%;
	margin:0 3%;
	}
.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
	}	

/*---------Contents--------*/

.contents-box{
	width: 90%;
	max-width: 1000px;
	background:url(../img/ribbon-l.png)no-repeat,url(../img/ribbon-r.png)no-repeat;
	background-size:170px,170px;
	background-position: top left,top right;
	background-color: #FFF;
	margin: 5rem auto;
	padding: 3rem 0;
	border:solid 3px #c1933b;
	border-radius:15px;
	}
	@media only screen and (max-width:767px){
		.contents-box {
			background-size:23%;
			margin: 3rem auto;
			padding: 2rem 0 0;
		}
	}
	.contents-box h2{
		width: 83%;
		margin: 2rem auto 0;
		padding-bottom:1rem;
		font-size: clamp(1.1rem, 3vw, 2rem);
		font-weight: bold;
		background:url(../img/leaf-l.png)no-repeat,url(../img/leaf-r.png)no-repeat;
		background-size:contain;
		background-position: left,right;
		text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF, 0 -2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
		}
		@media only screen and (max-width:767px){
			.contents-box h2{
				width: 91%;
				margin:1rem auto 0;
				padding-bottom:.5rem;
				background-size:13%;
				background-position: left,right;
			}
		}

.logo img{
	width: 70%;
	}
	#award1 .logo img{
		width: 60%;
		max-width: 280px;
		height: auto;
		aspect-ratio: auto 400 / 85;
	}
	#award2 .logo img{
		max-width: 489px;
		aspect-ratio: auto 489 / 160;
		margin: 0 auto;
	}

.inner{
	width: 87%;
	margin: 1rem auto 2rem;
	padding: 0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	}
	@media only screen and (max-width:768px){
		.inner {
			margin: 0 auto;
		}
	}

.col2 .inner-image{
	width: 47%;
	}
	@media only screen and (max-width:768px){
		.col2 .inner-image {
			width: 100%;
		}
	}
	.inner-image img{
		width: 100%;
		height: auto;
		aspect-ratio: auto 1 / 1;
	}

.col2 .inner-text{
	width: 50%;
	}
	@media only screen and (max-width:768px){
		.col2 .inner-text {
			width: 100%;
		}
	}
	.inner-text h3{
		font-size:clamp(1.05rem, 2.5vw, 1.3rem);
		font-weight:bold;
		border-bottom:double #dec073;
		padding-bottom:1rem;
		display:block;
		}
	.inner-text p{
		font-size: clamp(.8rem, 2.5vw, 1rem);
		text-align: left;
		padding: 0 .5rem;
	}
	@media only screen and (max-width:768px){
		.inner-text p{
			padding: 0;
		}
	}

.copyright{
	text-align: right !important;
}

/*---------btn--------*/
.btn-product {
	display: inline-block;
	width: 87%;
    background-color: #009844;
    color: #FFFFFF !important;
	font-size: clamp(1em, 2.5vw, 1.8em);
	font-weight: bold;
	margin: 0 auto;
	padding: 2.5rem 6rem;
	box-sizing:border-box;
	/*border-radius: 15px;
	box-shadow: 0 3px 1px #CCCCCC;*/
	position: relative;
	}
	@media only screen and (max-width:767px){
		.btn-product {
			width: 90%;
			padding: 7% 0;
			margin: 2% auto 5%;
		}
	}
	.btn-product:hover{
		top: 1px;
		transition: all .3s;
		background-color: #00a54c;
		/*opacity:0.8;
		filter:alpha(opacity=80);
			-ms-filter: “alpha( opacity=80 )”;*/
		box-shadow: 0 1px 1px #CCCCCC;
		}
	.btn-product:after {
		font-family:"Font Awesome 5 Free";
		content: '\f35d';
		display: inline-block;
		top:50%;
		transform:translateY(-50%);
		right:3rem;
		position: absolute;
		}
		@media only screen and (max-width:768px){
			.btn-product:after{
				right:1rem;
			}
		}

/*---------Link--------*/

.bnr-area{
	width: 90%;
	max-width: 1000px;
	margin: 2rem auto 0;
	display:flex;
	flex-wrap:wrap;
	/*justify-content:space-between;*/
	}
	.bnr-area a{
		display: block;
		margin: auto;
		color: #000;
	}
	.bnr-area img{
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		border: solid;
		box-sizing: border-box;
	}
	@media only screen and (max-width:1090px){
		.bnr-area{
			flex-wrap:wrap;
		}
	}

.btn {
	display: inline-block;
	width: 100%;
	max-width: 650px;
    background-color: #FFF001;
	border:solid 2px;
    border-radius: 100vh;
	font-size: clamp(.85rem, 2vw, 1.3rem);
    font-weight: bold;
	color:#333;
	margin: .5rem 0;
	padding: 2rem 0;
	box-shadow: 0 3px 1px #CCCCCC;
	box-sizing: border-box;
	position: relative;
	}
	@media only screen and (max-width:768px){
		.btn {
			padding: 1rem 0;
		}
	}
	.btn:hover{
		opacity:0.7;
		filter:alpha(opacity=70);
		-ms-filter: “alpha( opacity=70 )”;
	}
	.btn:after {
		font-family:"Font Awesome 5 Free";
		content: '\f35d';
		display: inline-block;
		top:50%;
		transform:translateY(-50%);
		right:2rem;
		position: absolute;
		}
		@media only screen and (max-width:768px){
			.btn:after{
				top:48%;
				right:.8rem;
			}
		}
#link .btn{
	margin-top: 2rem;
}

/*============================================
			       Footer
============================================*/

/*---------SNS--------*/	
#sns_box{
	width:100%;
	margin:  0 auto;
	padding:5% 0;
	background-color: #FFF;   /* 背景色 */
	}
	@media only screen and (max-width:767px){
	#sns_box{
		padding:30px 0 ;
		}	
	}

#btn_box{
	width:100%;
	}
	#btn_box a{
		display:inline-block;
	}
	#btn_box img{
		width:100%;
		max-width: 35px;
		float:none;
		margin: 0 .5rem;
		padding:0;
		}

#copy p{
	width:90%;
	margin: 2% auto;
	font-size: 0.8em;
	}
	@media only screen and (max-width:767px){
		#copy p{
			margin: 4% auto;
		}
	}

/*---------page-top--------*/	
#page-top {
    position: fixed;
	margin: 0;
    bottom: -8px;
    right: 10px;
	}
#page-top img{
	width: 100%;
	max-width: 60px;
   }


/*===============================================
          TAB only  
===============================================*/
@media screen and (max-width:821px){
.tab { display: block !important; }
.pc { display: none !important; }	
}

/*===============================================
          SP only  
===============================================*/
@media screen and (max-width:768px){
.sp { display: block !important; }
.pc { display: none !important; }	
}