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

html {
    -webkit-text-size-adjust: 100%;/*モバイルなどで横にしても文字の大きさが変にならない*/
}


.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

body {
    background-color: #F8C9C9;
    font-family:  "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color:#fff;
	box-sizing: border-box;
    width: 100%;
    height: auto;
}

#wrap {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

header {
    width: 100%;
    height: 90vh;
    background-image: url(../img/hero_img.jpg);
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
    }


.h1text {
    padding-top: 10%;
    padding-left: 70%;
    font-weight: bold;
    text-shadow: 2px 2px #999999;
    font-size: 2vw;
}    
    
 h1{
    font-family: 'Sacramento', cursive;
    font-size:1000%;
    text-shadow: 2px 5px 5px #999, -2px 5px 5px #999,  2px -5px 5px #999,  -2px -5px 5px #999;
    margin: 1% 12%;
}


.logo {
    position: absolute;
    bottom: 2%;
    left: 4%;
}

/*navトップへ固定-------------------------------*/
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color:rgba(255,255,255,0.30);
z-index: 5;
}

/*sns------------------------------------------*/
#sns  {
position:fixed;
z-index: 10;
padding-top: 10px;
padding-left: 2%;
}

#sns ul{
display: flex;
background-color:  transparent;

}
#sns ul li a{
display: block;
color: #fff;
text-shadow: 1px 1px #4e4e4e;
text-decoration: none;
font-size: 140%;
margin-right:15px;
margin-top: 10px;
background-color:  transparent;
-webkit-transition: 1s;
transition: 1s;
}



#sns ul li a:hover{
color:#999999;
opacity: 0.8;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}


/*nav-----------------------------------------*/
nav {
    width: 100%;
    height: 10vh;
	background-color: #f8c9c9;
}

 
nav ul {
	line-height: 10vh;
	vertical-align: middle;
	display: flex;
	justify-content: flex-end;
	margin-right: 2%;
	font-size: 220%;

}



nav ul il a {
    text-decoration: none;
    color:#fff;
    text-shadow: 2px 2px #5e5e5e;
    font-family: 'Sofia', cursive;
    margin-left: 2.5em;
	display: block;
}

nav ul il a:hover{
color: rgba(192,58,133,0.3)
}

/*ハンバーガーメニュー--------------------------------------*/
nav.nav{
display: none;
}   
#nav{
display: none;
} 

 
/*scroll_button-----------------------------------*/
#scroll_one,#scroll_two,#scroll_three,#scroll_four{
display: block;
height:6vh;
text-align: center;
padding-top: 3vh;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction:reverse;
    line-height: 0.5em;
}

#scroll_one a,#scroll_two a,#scroll_three a,#scroll_four a{
color: #5e5e5e;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
font-size: 11px;
-webkit-transition: 1s;
transition: 1s;

}
#scroll_one a:hover,#scroll_two a:hover,#scroll_three a:hover,#scroll_four a:hover{
color:rgb(192,58,133);
text-shadow: 0px 0px 2px red;
}

@keyframes fadeIn{
  from {
        opacity:0;
        top:0;
    }
    to {
        opacity:1;
        top:10px;
    }
}

/*h2タイトル----------------------------------------*/

.heading {
    text-shadow: 2px 2px #5e5e5e;
    font-family: 'Sofia', cursive;
    font-size:700%;
   }

/*concept--------------------------------------*/
#consept_img {
    height: 100vh;
    background-image: url(../img/img_one.png),url(../img/consept_img.jpg);
    background-size: auto,cover;
    background-repeat: no-repeat,no-repeat;
	background-position: bottom right,left;
	padding: 11vh 0 1vh;
}

.consept {
    width: 60%;
    border: 3px solid #fff;
    border-radius: 20px;
    padding: 3% 3% 1%;
    line-height: 4vh;
    text-align: center;
	margin: 0 auto;
}

.daidokoro  {
    font-size: 1.8vw;
    margin-top: 12vh;
	margin-bottom: 4vh;
}
.consept p{
    font-size:1vw;
    padding:0.5vw;
}


/*menu--------------------------------------*/

#menu_wrapper {
	width: 90vw;
	background-color:#fff;
    text-align: center;
    margin: 5%;
	padding: 1vh 0;
}
#menu_wrapper .heading  {
	color: #F8C9C9;
}
#menu_wrapper p {
color: #F8C9C9;
font-weight: bold;
font-size:100%;
}

#menu_wrapper .menu  {
    height: 30vh;
    vertical-align: middle;
    line-height: 30vh;
    font-family: 'Pacifico', cursive;
    font-size: 5vw;
    margin: 2%  auto;
    width:63%;
    border:5px solid #5e5e5e;
    border-radius: 20px;
}
#menu_wrapper .menu a {
text-decoration: none;
color:#fff;
text-shadow: 1px 1px 3px #5e5e5e;
display: block;
 -webkit-transition: all 1s ease-out; /* GoogleChrome, Safari */
     transition: all 1s ease-out;
}

#menu_wrapper h3.menu a:hover{
opacity: 0.8;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}

#menu_wrapper .menu.one {
background-image: url(../img/herb-profile.png);
background-repeat:no-repeat;
background-size: 101%;
}

#menu_wrapper .menu.two {
background-image: url(../img/recipe.png);
background-repeat:np-repeat;
background-size: 101%;
}

#menu_wrapper .menu.three {
background-image: url(../img/llesson.png);
background-repeat:no-repeat;
background-size: 101%;
}

/*info & topic(.article) -----------------------------------------*/
#article{
height: 1fr;
padding: 3% 1% 1% 0%;
text-align: center;
margin: 10% 3% 0%;
border: 3px #fff solid;
border-radius:20px;

}
.article{
	height: 80%;
display: flex;
justify-content: center; /* 子要素をflexboxにより中央に配置する */
margin-left: auto;
margin-right: auto;
margin-top: 3%;
}

main#top h4{
    text-shadow: 2px 2px #5e5e5e;
    font-family: 'Sofia', cursive;
    font-size: 400%;
	float: right;
    margin-top: 5%;
    padding-right: 3%;
}

	
.infomation,.topic  {
	width: 40%;
	border: 3px #fff solid;
	border-radius: 5px;
	box-shadow: 2px 2px 2px #999;
	margin:1%;
	padding: 3% 2% 1%;
	background:url(../img/img_two.png) top 3% left 3% no-repeat;
	background-color: rgba(255,255,0,0.1);
	}

    
.infomation p img, .topic p img {
	width: 30%;
	height: auto;
	float: left;
	margin: 5vw 0 1vw;
	border:5px solid #fff;
	border-radius:5px;
	box-shadow:1px 1px 3px rgba(0,0,0,0.1);	
    clear: both;
}
.infomation p, .topic p {
	color: #5e5e5e;
}


.time_text {
float: right;
margin-top:4.5vw;
font-size: 1vw;
}

.time_text p{
line-height: 4vw;
padding-right: 1vw;
border-bottom: dotted #999 2px;
text-align: left
}
.time_text p a{
text-decoration: none;
color:#4e4e4e;
}
.time_text p a:hover{
text-shadow: 0px 0px 1px #c03a8f;
}

time{
padding-right: 1vw;
}



/*バックグラウンドお花の領域-----------------------------*/
#about_wrapper {
	margin: 0 auto;
	background: url(../img/about_img.jpg) no-repeat;
}
/*map-----------------------------------------------*/

#about_wrapper .heading.map {
	color: #4E4E4E;
	text-shadow: 2px 2px #fff;
	text-align: center;
	padding: 2%;
}/*---↑mapタイトル*/

.ggmap   {
border:#fff 5px solid;
position: relative;
margin: 1vw 20vw;
padding-bottom: 20%;
}

.ggmap iframe{
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
}


/*shop　と　contactをくくる---------------------------------*/
.shop_contact   {
display: flex;
}



/*shop info-----------------------------------------------*/
.shop{
padding: 1% 2%;
width:20%;
margin: 5vw 10vw 5vw 20vw;
border:solid 10px #fff;
background-color: rgba(248,201,201,0.3);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

.shop h5{
 text-shadow: 2px 2px #5e5e5e;
 font-family: 'Sofia', cursive;
 font-size:4vw;
 padding: 3vh 0;
text-align: center;
}

.shop p{
line-height: 5vh;
font-size: 1vw;
text-indent: -1em;
padding-left: 2em;
color: #5e5e5e;
letter-spacing: 0.3em;
}


/*contact-----------------------------------------------*/
.contct_right{
width:100%;
}


.top_contact a{
	width: 100%;
	margin-top: 11vh;
    font-size:24px;
	text-shadow: 1px 1px 1px #5e5e5e;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0;
    color:#fff;
    background-color:rgba(248,201,201,0.8);
    border-radius:5px;
	box-shadow: 2px 2px 1px #fff;
}
.top_contact a:hover {
    -ms-transform: translateY(5px);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    border-bottom: none;
    box-shadow: none;
}

/*サイトマップなど------------------------------------------*/
.under_nav {
font-size: 1vw;
line-height: 5vh;
margin-top: 3vh;
margin-left: 3vw;
font-weight:600;
text-decoration: 0 0 1px #fff;
letter-spacing: 0.5em;
}
.under_nav p a{
text-decoration: none;
color: #4e4e4e;
}
.under_nav p a:hover{
text-shadow: 0px 0px 1px #c03a8f;
}
/*注意書き-----------------------------*/

.caution p{
font-size:90%;
width:100%;
text-align: center;
margin-top: 18vh;
line-height: 1em;
color:#fff;
text-shadow: 1px 1px 1px #ccc;
}





/*topへボタン------------------------------------------*/

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #f8c9c9;
  opacity: 0.9;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: FontAwesome;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 50px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  vertical-align: middle;
}


/*footer------------------------------------------*/


footer{
height: 8vh;
line-height: 8vh;
text-align: center;
text-shadow: 1px 1px #5e5e5e;
}
footer p{
font-size: 14px;
}




/*レスポンシブ---------------------------------------------------------------------------------------------*/
/*レスポンシブ---------------------------------------------------------------------------------------------*/
/*レスポンシブ---------------------------------------------------------------------------------------------*/


/*タブレット用・・・1024以下*/


@media (max-width:1242px){


header{
    background-image: url(../img/hero_img.jpg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    margin: 0 auto;
    position: relative;
}

.heading{
font-size:500%;
}

/*------------------------------*/
.logo {
    position: absolute;
    top: 5%;
    left:70%;
    }
.logo img{
width:100%;
height: auto;
}
/*------------------------------*/ 
 h1{
 font-size:800%;
 padding: 10% 1% 0;
/* margin: 5% 8% 0;*/
 }
 /*------------------------------*/
.h1text {
    padding-top: 20%;
    padding-left:10%;
    font-size: 100%;
}
/*------------------------------*/

#sns ul{
font-size: 120%;
}
#sns ul li{
padding-left: 20px;
}
/*------------------------------*/
.nav{
display: none;
}


/*ハンバーガー中身*/
#nav{
width: 50%;
height: 70vh;
position: fixed;
font-weight: bold;
font-family: 'Sofia', cursive;
font-size:220%;
letter-spacing: 0.3em;
/*display: none;*/
left: 0px;
top: 0px;
background-color: rgba(255, 255, 255, 0.9);
border: 2px solid #f8c9c9;
padding: 20px 20px 0px 20px;
z-index: 9999;
line-height: 5vh;
} 

#nav ul{
display: flex;
flex-direction: column;
}



/*ハンバーガー三本線アイコン*/
nav.nav{
    display: inline-block;
    width: 43px;
    height: 45px;
    top: 76vh;
    left: 0px;
    position: fixed;
    background-color: #f8c9c9;
    cursor: pointer;
    overflow: hidden;
    z-index: 9999;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom: 0.5px solid #fff;
    border-top: 0.5px solid #fff;
    border-right: 0.5px solid #fff;
}
#nav ul il {
    line-height: 220%;
    text-decoration: none;
}
#nav ul il a {
    text-decoration: none;
    color: #F8C9C9;
    text-shadow: 1px 1px #4e4e4e;
}


nav .nav1{ width:25px; height:3px; background-color: #fff; top:6px;left:4px; position:absolute; } 
nav .nav2{ width:25px; height:3px; background-color: #fff; top:16px;left:4px; position:absolute; } 
nav .nav3{ width:25px; height:3px; background-color: #fff; top:26px;left:4px; position:absolute; }
nav .nav4{ width:25px; height:3px; font-size: 10px; text-align: center;color:#5e5e5e; top:32px;left:4px; position:absolute; }

nav .nav1,nav .nev2,nav .nav3{
    -webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */
     transition: all 0.5s ease-out;
     }
     
nav .navclick1{
    top:15px;
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
    }

nav .navclick2{
    opacity: 0;
    }
nav .navclick3{
    top:15px;
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
    }
    
/*------------------------------*/
.consept {
    width: 90%;
    padding: 3% 1% 1%;
    line-height: 4vh;
}

/*------------------------------*/
#menu_wrapper {
	height: auto;
    border-radius: 10px;
    margin: 5vh 5% ;
}

#menu_wrapper .menu  {
    height: 20%;
    width:80%;
    vertical-align: middle;
    line-height: 20vh;
    margin: 3% auto;
    }
#menu_wrapper h3.menu.three {
    margin-bottom: 6%;
    }
    
    #menu_wrapper .menu.one {
background-size: 120%;
}

/*------------------------------*/
main#top h4{
font-size: 300%;
}
.infomation p img, .topic p img {
    width: 180px;
    height: auto;
	margin-top: 15%;
}

.time_text {
float: left;
margin:10%  0 0 2%;
width: 100%;
}
/*-----------------------------------------*/
#contact div.input input{
width: 100%;
}
 #contact textarea {
width: 100%;
}


#contact .top h3{
font-size: 110%;
text-align: center;
}
#contact .top p{
width: 80%;
margin: 0 auto;
font-size:80%;}

}


























/*アイコムーン*/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?9cvbrk');
  src:  url('fonts/icomoon.eot?9cvbrk#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?9cvbrk') format('truetype'),
    url('fonts/icomoon.woff?9cvbrk') format('woff'),
    url('fonts/icomoon.svg?9cvbrk#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900";
}
.icon-phone:before {
  content: "\e942";
}
.icon-aid-kit:before {
  content: "\e998";
}
.icon-lab:before {
  content: "\e9aa";
}
.icon-clipboard:before {
  content: "\e9b8";
}
.icon-mail2:before {
  content: "\ea84";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-twitter:before {
  content: "\ea96";
}