@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: #282828;
	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;
	}
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 3rem;
}

/*---------top--------*/
#top{
	width: 100%;
	margin: 0 auto;
	}
	#top img{
		width:95%;
		max-width: 1000px;
		margin: 3rem auto 0;
		}
		@media only screen and (max-width:768px){
			#top img{
				width:95%;
				margin: 0 auto;
			}
		}

/*---------info--------*/
#info.contents{
    margin: -2rem auto 2rem;
	}
    @media only screen and (max-width:768px){
       #info.contents{
            margin: -1.5rem auto 2rem;
        }
    }
#info.contents-box{
    background-color:#FFF;
    border:solid;
	padding: 1rem;
}
#info h2{
	font-weight: bold;
	display: flex;
	align-items: center;
	margin: .5rem auto 1rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	}
	#info h2:before,
	#info h2:after {
		content: "";
		height: 6px;
		flex-grow: 1;
		background-color: #008742;
	}
	#info h2:before {
		margin-right: 1rem;
	}
	#info h2:after {
		margin-left: 1rem;
	}
.message{
    font-size: clamp(.8rem, 2vw, 1.2rem);
    font-weight: bold;
	margin:1rem auto;
    padding: .2rem;
    background-color:#fff7ea;
    border-radius:.8rem;
    }

.date{
	display: flex;
	}
    @media only screen and (max-width:768px){
		.date{
			display: unset;
		}
    }
dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
dt{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35%;
	padding: 5px;
	color: white;
	background-color: #008742;
	}
    @media only screen and (max-width:768px){
		dt{
			width: 100%;
		}
    }
	dt span{
		padding-left: 5px;
		font-size: 80%;
	}
dd{
	text-align: left;
	margin-inline-start: 1rem;
	}
    @media only screen and (max-width:768px){
		dd{
			margin-inline-start: unset;
			padding:.5rem;
			box-sizing: border-box;
		}
    }
/*---------youtube--------*/
#movie{
	width: 90%;
	max-width: 950px;
	margin: 4% auto 8%;
	}
	@media only screen and (max-width:768px){
		#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{
	width: 93%;
	max-width: 1000px;
	margin: 10rem auto 3rem;
	}
	@media only screen and (max-width:768px){
		.contents {
			margin: 7rem auto 2rem;
		}
	}
	#other.contents{
		margin:  3rem auto;
		}
		@media only screen and (max-width:768px){
			#other.contents {
				margin:  3rem auto 0;
			}
		}

.contents-box{
	padding: 3rem 0 1rem;
	border-radius:15px;
	box-sizing: border-box;
	}
	@media only screen and (max-width:768px){
		.contents-box {
			padding: 2rem 0 1.3rem;
		}
		.contents-box p{
			font-size: .9rem
		}
	}
	
	.contents-box .read{
		color:#FFF;
		font-size: 1.5em;
		font-weight: bold;
		margin: -5rem auto 0;
		}
		#wh.contents-box .read{
			margin: -8rem auto 0;
		}
		@media only screen and (max-width:768px){
			.contents-box .read{
				margin:-3.5rem auto 0;
				font-size: 1em;
			}
			#wh.contents-box .read{
				margin: -5rem auto 0;
			}
		}
#sf.contents-box,#sf .logo::before{
	background-color: #008742;
}
#aq.contents-box,#aq .logo::before{
	background-color: #36bdeb;
}
#wh.contents-box,#wh .logo::before{
	background-color: #ff84ae;
}
#ag.contents-box{
	background-color: #ee7820;
}
#pp.contents-box{
	background-color: #019e97;
}
.bg-stripe{
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 0);
	background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, rgba(255, 255, 255, 0.18823529411764706) 20px, rgba(255, 255, 255, 0.18823529411764706) 21px );
}

/*---------logo--------*/
.logo{
	margin: 0 auto;
}
.logo::before{
	content:' ';
	width:600px;
	height:400px;
	margin-top:-150px;
	padding:0;
	border-radius:100% 100% 0 0;
	left:calc(50% - 300px);
	position:absolute;
	z-index:-1;
	}
	@media only screen and (max-width:768px){
		.logo::before {
			width:84%;
			height:280px;
			margin-top:-100px;
			left:calc(50% - 42%);
		}
	}
	.logo img{
		position:relative;
		width: 50%;
		max-width: 300px;
		top:-6rem
		}
		#sf .logo img{
			max-width: 280px;
		}
		#wh .logo img{
			top:-8rem
		}
		@media only screen and (max-width:768px){
			.logo img{
				top:-4rem
			}
			#wh .logo img{
				top:-5rem
			}
		}

/*---------inner--------*/
.inner{
	width: 95%;
	margin: 0 auto;
	padding: 0;
	}
	@media only screen and (max-width:768px){
		.inner {
			padding: 0;
		}
	}
	#other .inner{
		width:91%;
		}
		@media only screen and (max-width:768px){
			#other .inner{
				width:95%;
			}
		}
.inner-box{
	margin: 1rem 0;
	padding: 1rem 2rem;
	border-radius:15px;
	background-color: #FFF;
	text-align:left;
	position:relative;
	}
	@media only screen and (max-width:912px){
		.inner-box {
			padding: 1rem 1.5rem;
		}
	}
	@media only screen and (max-width:768px){
		.inner-box {
			margin: 1rem 0 0;
			padding: 1rem;
		}
	}
	.inner-box h3{
		font-size:1.2rem;
		font-weight:bold;
		line-height: 1.8rem;
		border-bottom:solid 2px;
		margin-top:.5rem;
		padding-bottom:.5rem;
		height: 3rem;
		display: flex;
		align-items: center;
		}
		@media only screen and (max-width:820px){
			.inner-box h3{
				font-size:1.1rem;
				line-height: 1.5rem;
			}
		}
		@media only screen and (max-width:767px){
			.inner-box h3{
				font-size:.9rem;
				margin-top:0;
				height: 2.5rem;
			}
		}

.inner-image img{
	width: 100%;
	margin:0;
}

/*---------col3--------*/
.col3{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	}
	.col3.inner-image img{
			width: 32.5% !important;
		}
		@media only screen and (max-width:768px){
			.col3.inner-image img{
					width: 49% !important;
				}
		}

@media only screen and (max-width:768px){
	.col3.inner-image .w100{
		width: 100% !important;
		margin-bottom:.5rem;
		display:block;
	}
}

/*---------col2--------*/
.col2{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	/*align-items: center;*/
	}
	@media only screen and (max-width:768px){
		.col2{
			align-items: flex-start;
		}
	}
	#sf .col2 .inner-box,
	#aq .col2 .inner-box{
		width: 42%;
		}
		@media only screen and (max-width:768px){
			#sf .col2 .inner-box,
			#aq .col2 .inner-box{
				width: 100%;
			}
		}
	#other.col2 .contents-box{
		width:49%;
		padding: 1rem 0;
		}
		@media only screen and (max-width:768px){
			#other.col2 .contents-box{
				width:100%;
				padding: .3rem 0 1rem;
				margin:0 0 2rem;
			}
		}
	.col2.inner-image img{
			width: 49.5% !important;
			height:auto;
		}
		@media only screen and (max-width:768px){
			.col2.inner-image img{
				width: 100% !important;
				margin-bottom:.5rem;
			}
		}

/*---------entry-icon--------*/
.entry-icon{
	width:100px;
	height:100px;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	padding:0;
	border:solid 1px;
	border-radius:50%;
	background-color: #da3d3d;
	top:-5px;
	right:5px;
	position:absolute;
	}
	@media only screen and (max-width:820px){
		.entry-icon{
			right:-5px;
		}
	}
	@media only screen and (max-width:767px){
		.entry-icon{
			width:80px;
			height:80px;
			top:-5px;
			right:-5px;
		}
	}
.entry-inner{
	margin:1rem auto;
	}
	@media only screen and (max-width:767px){
		.entry-inner{
			margin:.4rem auto;
			font-size:.8rem;
		}
	}
.free{
	font-size:2rem;
	margin:.5rem auto 0;
	}
	@media only screen and (max-width:767px){
		.free{
			font-size:1.8rem;
			margin:.3rem auto 0;
		}
	}
.price{
	font-size:1.5rem;
	margin:.1rem auto -.2rem;
	}
	@media only screen and (max-width:767px){
		.price{
			font-size:1.2rem;
			margin-top:-.2rem;
		}
	}
.currency-unit{
	font-size:60%;
	padding-left:.1rem;
}
.font-s{
	font-size:75%;
	line-height: 150%;
	display: block;
	}
	p .font-s{
		margin: .5rem auto;
	}

.hight{

	}
	@media only screen and (min-width:767px){
		.hight{
			height: 4.5rem;
		}
	}

/*---------copyright--------*/
.copyright{
	font-size:.8rem;
}

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

#link h4{
	font-weight: bold;
	font-size: clamp(.8rem, 2.5vw, 1.2rem);
	margin: 3rem auto 1rem;
	}
	@media only screen and (max-width:768px){
		#link h4{
			margin: 0 auto 1rem;
		}
	}

.link{
	width: 90%;
	max-width: 580px;
	margin: 2rem auto 0;
	}
	.link a{
		display: block;
	}
	.link img{
		width: 100%;
		border:solid 1px #d4d4d4;
		box-shadow:3px 3px 0 #3333335e;
	}

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


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

/*---------SNS--------*/	
#sns_box{
	width:100%;
	margin:  0 auto;
	padding:5% 0;
	background-color: #FFF;   /* 背景色 */
	}
#btn_box{width:100%;}
	#btn_box img{
		width:35%;
		max-width: 35px;
		float:none;
		margin: 0 5px;
		padding:0;
		}
#copy p{
	width:90%;
	margin: 2% auto;
	font-size: 0.8em;
	}
	@media only screen and (max-width:768px){
	#sns_box{padding:30px 0 ;}	
	#btn_box img{
		margin: 0 auto;
		padding:15px 15px 20px;
		}
	#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:1024px) and (min-width:768px){
.tab { display: block !important; }
.pc { display: none !important; }	
}

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