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

body{
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: #333;
	overflow-x: hidden;
	font-family: 'Zen Maru Gothic', sans-serif;
	letter-spacing: .1em;
	font-weight: 500;
}

div.overflow{
	overflow-x: hidden;
}


/*--------------
 アニメーション
---------------*/
/* animate */
.fadeinup,.fadein {
    opacity: 0;
}

.fadeInUp{
	animation:fadeInUp; 
	animation-duration: 1s; 
}

.fadeIn{
	animation:fadeIn; 
	animation-duration: 1s; 
}

.headShake{
	animation:headShake; 
	animation-duration: 1s; 
}


/* 時間差 */
.animate {
	animation-duration: 1.3s;
	animation-delay: 0.8s;
}
.animate_02 {
	animation-duration: 1.3s;
	animation-delay: 1s;
}


/*===========================================================================
 fixd menu
============================================================================*/
/*=================
 header
==================*/
header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}

header a{
	display: block;
	width: 35vw;
}

header a img{
	display: block;
	width: 100%;
}

header a img:hover,div.side_fixbtn a:hover{
    animation-name: pulse;
    animation-duration: 1s;
}


/*=================
 side_fixbtn
==================*/
div.side_fixbtn{
	position: fixed;
	top: 15%;
	right: 0;
	margin: auto;
	width: 50vw;
	height: 5.5vw;
	min-width: 80px;
	z-index: 99;
}

div.side_fixbtn a{
	display: block;
}

div.side_fixbtn a img{
	display: block;
	width: 100%;
	transition: .5s;
}


/*===========================================================================
 toppage
============================================================================*/
/*=====================
 common
=====================*/
/*-----------
 見出し
------------*/
h2.main_h2{
	margin:0 auto;
	font-size: 20px;
	letter-spacing: .1em;
	font-weight: 600;
	text-align: center;
}

h2.main_h2 span{
	color: #08a370;
}

h2.main_h2 img{
	display: block;
	width: 60vw;
	margin: 0 auto 10px;
}


/*=====================
 mainvisual
=====================*/
section#mainvisual{
	width: 100%;
	position: relative;
}

section#mainvisual img.mv_sp{
	display: block;
	width: 100%;
	margin: 25vw auto 0;
}

section#mainvisual img.mv{	
	display: none
}

section#mainvisual img.mv_copy {
	display: block;
	position: absolute;
	top: -12vw;
	right: 3vw;
	width: 60vw;
	margin: auto;
	z-index: 10;
}

section#mainvisual img.mv_subcopy {
	display: block;
	position: absolute;
	bottom: -2vw;
	left: 3vw;
	width: 30vw;
	margin: auto;
	z-index: 10;
}

section#mainvisual img.mv_pap {
	display: block;
	position: absolute;
	bottom: 0;
	right: 2vw;
	width: 25vw;
	margin: auto;
	z-index: 10;
}

section#mainvisual img.mv_contact {
	display: block;
	position: absolute;
	bottom: -4vw;
	right: 0;
	width: 50vw;
	margin: auto;
	z-index: 10;
}


/*=====================
 about
=====================*/
section#about{
	position: relative;
	width: 100%;
	padding: 30px 0 20px;
}

div.about_message{
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

div.about_message img{
	display: block;
	width: 55vw;
	margin: 0 auto 20px;
}

div.about_message h3{
	display: block;
	font-size: 17px;
	line-height: 1.8em;
}

div.about_message h3 span{
	color: #08a370;
}

div.about_wrap{
	width: 90%;
	margin: 30px auto 0;
}

div.about_box{
	position: relative;
	width: 100%;
	margin: 0 auto 50px;
	padding: 15px;
	box-sizing: border-box;
	background-color: #fbf7eb;
	text-align: center;
	z-index: 10;
}

div.about_box img.about_img{
	display: block;
	width: 100%;
	margin: 0 auto;
	z-index: 1;
}


div.about_box img.about_img_no{
	display: block;
	position: absolute;
	top: .5vw;
	left: .5vw;
	width: 50px;
	margin: auto;
	z-index: 10;
}

div.about_box h3 {
	padding: 20px 0;
	font-size: 18px;
}

div.about_box h3 span {
	background: linear-gradient(transparent 65%, #ffb700 65%);/*%で太さ変わる。基本揃えて。*/
	font-weight: bold;
}

img.about_bg{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	margin: auto;
	z-index: 1;
}


/*=====================
 activity
=====================*/
section#activity{
	width: 100%;
	padding: 30px 0 15vw;
	background-color: #f1f5f4;
}

div.act_wrap{
	width: 85%;
	margin: 0 auto;
}

div.act_box{
	position: relative;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	z-index: 10;
	margin: 30px auto;
}


div.act_box img{
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
	z-index: 10;
}

div.act_box img.act_02_il{
	display: block;
	position: absolute;
	top: -3vw;
	right: 0vw;
	width: 20vw;
	margin: auto;
	z-index: 1;
}

div.act_box img.act_03_il{
	display: block;
	position: absolute;
	top: 0vw;
	left: 1vw;
	width: 15vw;
	margin: auto;
	z-index: 1;
}

div.act_box h3{
	padding: 20px 0;
	font-size: 17px;
	font-weight: 600;
}

div.act_box h3.act_h3 img{
	display: inline;
	width: 25px;
	margin:0 10px -5px 0;
}


/*=====================
 facility
=====================*/
section#facility{
	width: 100%;
}

img.fac_bg{
	display: block;
	width: 90%;
	margin: -15vw auto -13vw;
}

div.fac_wrap{
	width: 90%;
	margin: 0 auto;
	padding-top: 50px;
}

div.fac_box{
	width: 100%;
	margin: 0 auto 50px;
	text-align: center;
	display: flex;
	flex-direction: column;
}

div.fac_text{
	width: 100%;
	margin: 20px auto 0;
	padding: 20px;
	box-sizing: border-box;
	background-color: #fbf7eb;
	border-radius: 50px;
	flex-grow: 1;
}

div.fac_text h3{
	color: #ffb700;
	padding-bottom: 10px;
	font-size: 17px;
}

div.fac_box img{
	display: block;
	width: 100%;
	margin: 0 auto;
	border-radius: 50px;
}

/*=====================
 contact
=====================*/
section#contact{
	width: 100%;
	padding-top: 50px;
	text-align: center;
}

div.contact_wrap{
	position: relative;
	width: 90%;
	margin: 0 auto;
	padding: 8vw 0;
	background-color: #f1f5f4;
}

div.contact_wrap:hover{
    animation-name: pulse;
    animation-duration: 1s;
}

div.contact_wrap h2.main_h2{
	position: relative;
	margin-top: -12vw;
	z-index: 10;
}

div.contact_wrap p{
	margin: 30px auto;
}

div.contact_wrap img.contact_pap_01{
	display: block;
	position: absolute;
	top: -20vw;
	left: 0vw;
	width: 12vw;
	margin: auto;
	z-index: 10;
}

div.contact_wrap img.contact_pap_02{
	display: block;
	position: absolute;
	bottom: -8vw;
	right: -2vw;
	width: 20vw;
	margin: auto;
	z-index: 10;
}

div.contact_wrap img.contact_bg_top{
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

div.contact_wrap img.contact_bg_bottom{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 1;
	transform: scale(1, -1);
}

div.contact_wrap img.contact_bg_left{
	display: block;
	position: absolute;
	top:0;
	left: 0;
	height: 100%;
	z-index: 1;
}

div.contact_wrap img.contact_bg_right{
	display: block;
	position: absolute;
	top:0;
	right: 0;
	height: 100%;
	z-index: 1;
	transform: scale(-1, 1);
}

img.contact_bottom{
	display: block;
	width: 25vw;
	margin: 30px auto;
}

section#contact iframe{
	width: 90%;
}


/*-----------
 ボタン
------------*/
a.contact_btn{
	display: block;
	width: 70vw;
	margin: 0 auto;
	padding: 13px;
	box-sizing: border-box;
	border-radius: 50px;
	font-weight: 600;
	letter-spacing: .1em;
	transition: .5s;
	color: #fff;
	border: 2px solid #ffb700;
	background-color: #ffb700;
}

a.contact_btn:hover{
	color: #ffb700;
	background-color: #fff;
	border: 2px solid #ffb700;
}


/*=====================
 motoimaizumi
=====================*/
section#motoimaizumi{
	position: relative;
	width: 100%;
	padding: 30px 0;
	text-align: center;
	background-color: #fff;
	color: #e95532;
}

div.motoima_wrap{
	width: 90%;
	margin: 0 auto;
	padding: 30px 30px 50px;
	box-sizing: border-box;
	border-radius: 20px;
	background-color: #fff;
	border: 10px solid #e95532;
}

div.motoima_wrap img{
	display: block;
	width: 40vw;
	margin: 0 auto;
}

div.motoima_wrap h3{
	display: block;
	margin: 20px auto 30px;
	font-size: 18px;
	line-height: 1.5em;
	color: #e95532;
}

/*-----------
 ボタン
------------*/
div.motoima_wrap a.contact_btn{	
	border: 2px solid #e95532;
	background-color: #e95532;
}

div.motoima_wrap a.contact_btn:hover{
	color: #e95532;
	background-color: #fff;
	border: 2px solid #e95532;
}

/*=====================
 footer
=====================*/
footer{
	position: relative;
	width: 100%;
	padding: 50px 0 5px;
	text-align: center;
	background-color: #f1f5f4
}

img.footer_bg{
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	margin: auto;
	z-index: 1;
}

div.footer_wrap{
	width: 100%;
	margin: 0 auto;
}

footer h1 img{
	position: relative;
	width: 25vw;
	z-index: 10;
	transition: .5s;
}

footer h1 img:hover{
	opacity: .7;
}

p.copyright{
	font-size: 8px;
	color: #808080;
	padding-top: 20px;
}

a.pagetop {
	display: block;
	position: fixed;
	z-index: 99;
	right: 3%;
	bottom: 4%;
	width: 80px;
	height: 80px;
	transition: .5s;
}

a.pagetop img {
	width: 100%;
	height: 100%;
}

a.pagetop:hover {
	margin-bottom: 10px;
}