@charset "utf-8";
/* CSS Document */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
/*navトップへ固定-------------------------------*/


/*ここから下層ページ----------------------------------------------------------------------------*/


#herb .fixed,#recip .fixed,#lesson .fixed,#about .fixed,#contact .fixed {
background-color: rgba(248,201,201,0.5);}



/*#herb #wrap,#recip #wrap,#lesson #wrap,#about #wrap,#contact #wrap{ 
}*/

#herb main,#recip main ,#lesson main ,#about main ,#contact main{
width:80%;
margin: 8vh  auto 0;
font-family:  "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color:#5e5e5e;
}


/*herbページ----------------------------------------------------------------------------------------------------------------------*/
/*herbページ----------------------------------------------------------------------------------------------------------------------*/
/*herbページ----------------------------------------------------------------------------------------------------------------------*/
 
#herb h2,#recip h2,#lesson h2,#about h2,#contact h2{

	text-shadow: 2px 2px #5e5e5e;
	font-family: 'Sofia', cursive;
	font-size: 600%;
	text-align: center;
	height: 15vw;
	line-height: 15vw;
	color: #fff;
}

#herb h2{
    	background-image: url(../img/rose.png);
}
/*---------------------------------------------------------------------------------*/

#herb .towa {/*植物を活かすをかこっている部分*/
	margin: 2% auto;;
	width: 88%;
    border:solid 15px #fff;
    background-color: #FCFDEB;
    background-image: url(../img/bgtree_big.png);
    border-radius: 20px;
    padding: 20px;
}

#herb .top h3,#contact .top h3,#recip .top h3,#lesson #top h3  {/*植物のパワーの文字*/
	margin: 1% auto;
	text-align: center;
    font-size: 300%;
	text-shadow: 2px 2px #fff;
}

#herb .top p,#contact .top p,#recip .top p,#lesson #top p{
    text-align: center;
    line-height: 1.5em;
}
#herb .towa .herbaroma_text p {
    color: #4e4e4e;
    font-size: 80%;
    font-weight: bold;
}


#herb .herbaroma_text  {/*ハーブとアロマの部分を分けて角丸でかこっている部分*/
	border-radius: 20px;
	background-color: rgba(240,200,200,1);
	color: #fff;
	padding: 2% 5%;
	margin: 2% auto 10%;
	border: double #fff 10px;
}

#herb .towa_herb{/*imgハーブ画像*/
   float: right;
}
#herb .text_name {/*herbの文字*/
	margin: 1% auto;
	text-align: center;
	text-shadow: 1px 1px #4e4e4e;
    font-family: 'Sofia', cursive;
    font-size: 300%;
}

#herb .towa p {/*植物のパワー以下の全てのテキスト部分*/
	line-height: 1.5em;
	color:#4e4e4e;
}

/*---------------------------------------------------------------------------------*/

#herb main .line_icon {/*ハーブとはと図鑑の区切りライン*/
    text-align: center;
    margin: 5%; 
}
#herb main .line_icon img{
    padding: 0 2%;
}
/*---------------------------------------------------------------------------------*/



/*図鑑部分の始まり------------------------------------------------------------------------------------*/
#herb  main #zukan {
    margin-top: 5%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3%;
    width: 100%;
}
/*---------------------------------------------------------------------------------*/
/*ハーブアロマ図鑑文字*/
#herb .zukan h3{
    text-shadow: 1px 1px #999999;
    font-size:250%;
    text-align: center;
}

#herb .zukan h3 img{
    width:10%;
    height: auto;
}


/*イニシャル検索*//*
#herb .zukan .initial {
	width: 100%;
	line-height: 150%;
    text-align: center;
}
#herb .initial ul{
	display: flex;
	justify-content: center;
	margin: 0 auto;
	text-align: center;
}
#herb .initial ul li {
	width: 8%;
	text-align: center;
	padding-top: 10px;
	display: inline-block;
	border-right: 1px solid #fff;
}

#herb .initial ul li a{
	text-decoration: none;
    color: #4e4e4e;
	-webkit-transition: 1s;
	transition: 1s;
    padding: 0 1em; 
    text-align: center;
}

#herb .initial ul li:first-child{
    border-left: 1px solid #fff;
}

#herb .initial ul li a:hover{
background-color: rgba(255,255,255,0.50);
border-radius: 5px;
}*/




/*---------------------------------------------------------------------------------*/
#herb .zukan_text  {/*ハーブとアロマの部分を分けて角丸でかこっている部分*/
	border-radius: 20px;
	background-color: rgba(248,201,201,0.80);
	color: #fff;
	padding: 1%;
	margin: 2% auto 2%;
	border: double #fff 10px;
}
/*---------------------------------------------------------------------------------*/
/*コンテントボックスをくくる*/
#herb .zukan .zukan_text .content_box {
    display: flex;
     flex-flow: row wrap;
}
#herb .zukan_text .content_box .content_waku {/*各ハーブの枠*/
    position: relative;
    width: 28%;
    height: 10em;
    background-color: #fff;  
    margin: 3% 2%;
    border-radius: 5px;
    box-shadow: 5px 1px 2px #999999;
    display:inline-block;
    -webkit-transition: 0.8s;
    transition: 0.8s;
}
#herb .zukan_text .content_box .content_waku:hover {
    background-color:rgba(204,204,204,0.30);}  

#herb .zukan_text .content_box .content_waku:active {
    background-color: #fff; 
    box-shadow: none;}  


#herb .zukan_text .content_box .content_waku .content {
    height: auto;
    width: 100%;
    margin: 0;
    padding: 3% 2% 11%;
    display: inline-block;
}

#herb .zukan_text .content img{/*ハーブの画像-------------------レスポンシブで変更する*/
    width: 30%;/*ハーブの画像-------------------レスポンシブで変更させる*/
    height: auto;
    border-radius:50%;
    border: 5px solid #f8c9c9;
    position: absolute;
    bottom:5px;
    right: 5px;
}

#herb .zukan_text .name{/*コンテントの中のH4ハーブの名前*/
    font-size: 125%;
    padding-bottom: 2%;
}

#herb .zukan_text .content_waku p{
    line-height: 1.5em;
    font-size: 0.7em;
    margin-top: 1%;
}


#herb .zukan_text .content_waku  :hover{
     color:#CCC97E;
}
#herb .zukan_text .content_waku a{
    text-decoration: none;
    color:#4e4e4e;
    -webkit-transition: 1s;
    transition: 0.5s;
}
#herb .zukan_text .content_waku a:hover{
    color:#CCC97E;
    text-shadow: 1px 1px #4e4e4e;
    font-size: 1.5vw;
}



/*---モーダルボタン-----------------------------------------------------------------------------------------------*/

#herb .modal{
    text-align: right;
    padding-right: 10px;
}
#herb .modal a{
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    background: #c03a8f;/*背景色*/
    color: #c03a8f;/*=背景色*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
    border-bottom: solid 2px #8A2C60;
    border-radius: 4px;
    font-weight: bold;
    text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}

#herb .modal a:hover{
    opacity: 0.9;
}

#herb .modal a:active {/*押したとき*/
   border-bottom: solid 2px #c03a8f;
   box-shadow: none;
   text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}
    


/*---notici_herb 禁忌始まり-----------------------------------------------------------------------------------------------*/
#herb_notice .kinki  {
    width: 80%;
    height: auto;
    margin: 1% auto;
    padding: 0.5%;
    background-color: #CCC97E;
    /*枠を角丸にしている部分*/
	border-radius: 20px;
    border: double 10px #fff;
}

#herb_notice .kinki  h3{
    font-size: 250%;
    color:  #f8c9c9;
    text-shadow: 1px 1px #5e5e5e;
    padding: 2% 0 1%;
    text-align: center;
}

    
#herb_notice .kinki .kinki_notice h5 {
    border: 1px #fff solid;
    background-color: #FFFCE0;
    color: #4e4e4e;
    font-weight: bold;
    padding: 1% 3%;
}



#herb_notice .kinki p{
    font-size: 80%;
    line-height: 1.3em;
    text-align: center;
}


#herb_notice .kinki .kinki_notice{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
   
}

#herb_notice .kinki .kinki_text {
    text-shadow: 1px 1px #f8c9c9;
    padding: 1% 5%;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    font-size: 0.8em;
    text-align: left;
    margin-bottom: 3px;
}

#herb_notice .kinki_notice #link a {
    color: #4e4e4e;
    text-decoration: none;
    display: inline-block;
    margin: 2%;
    font-size: 85%;
}


#herb_notice #link a:hover{
    text-decoration-line: underline;
    background-color: rgba(192,58,133,0.54);
} 


/*---------------------------------------------------------------------------------------レシピページ*/
/*---------------------------------------------------------------------------------------レシピページ*/
/*---------------------------------------------------------------------------------------レシピページ*/
#recip{
    margin: 0 auto;
}

#recip h2{
	background-image: url(../img/recip.png);
}

#recip .top{
    width: 80%;
    margin: 1% 10% ;
}

#recip h5{
    font-size: 120%;
    font-weight: bold;
    padding: 1%;
    background: rgba(255,255,255,0.9);
    border-bottom: #999999 dotted 1px;
    margin-bottom: 1%;}

#recip .wakuwaku p{
    font-size: 90%;
    line-height: 1.5em;
    padding:0 2%;
    color: #151515+
}

#recip .wakuwaku ul{
    font-size: 90%;
    line-height: 2em;
    padding:  2% 3%;
    font-weight: bold;
}


#recip .wakuwaku{
background-color: rgba(255,255,255,0.7);
border: #999999 solid 1px;
width: 90%;
margin-top: 1%;
margin-left: auto;
margin-right: auto;
padding-bottom: 2%;
overflow: hidden;
}
    

/*マステ風---h4-----------------*/

#recip h4{
  position: absolute;
  top:-2%;
  background-color: rgba(255,255,255,0.7);
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,0.2);
  padding: 0.25em 2em;
  color: #4e4e4e;
  text-shadow: 1px 1px 1px #f8c9c9;
  transform: rotate(-2deg);
  font-size: 150%;
}
/*read moreもっと読む　モーダル---------------------*/
#recip .wakuwaku .more{
text-align: right;
padding-right: 20px;
}
#recip .wakuwaku .more a{
display: inline-block;
text-decoration: none;
padding: 5px;
background-color: #999999;
color: #fff;
border-radius: 30px;
font-size: 80%;
box-shadow: 1px 1px #fff;
}
#recip .wakuwaku .more a:hover{
opacity: 0.7;
}
#recip .wakuwaku .more a:active{
box-shadow: 0 0 2px #fff;
}

/*----------ハーブ-----------------------------------------------------*/
#recip #herb_recip{
    position: relative;
    margin: 5%;
    padding: 5%;
    background-color: #fff;
    border-radius: 20px;
    background-image: url(../img/herbtea.jpg);
    background-size:cover;
    background-repeat: no-repeat;
}
/*-------------アロマ----------------------------------------*/
#recip #aroma_recip{
    position: relative;
    margin: 5%;
    padding: 5%;
    background-color: #fff;
    border-radius: 20px;
    background-image: url(../img/aroma.png);
    background-size:cover;
    background-repeat: no-repeat;
}


/*---------蒸留------------------------------------------------------------*/
#recip #jyoryu_recip {
    position: relative;
    margin: 5%;
    padding: 5%;
    background-image: url(../img/jyoryu.png);
    background-size:cover;
    background-repeat: no-repeat;
    border-radius: 20px;
}


#recip #jyoryu_recip div.j_top{
    width: 75%;
    margin: 0 auto;
    text-align: center; 
}

    
#recip .jleft{
width: 80%;
float: left;}
#recip  .jright{
width: 15%;
float: left;
margin: 1%;
text-align: center;
}
#recip .jright img{
border:3px #fff solid;
}

#recip #jyoryu_recip dl{
    font-size: 90%;
    padding: 1%;
}

#recip #jyoryu_recip  dt{
    font-weight: bold;
      padding: 1% 1em; 
}
#recip #jyoryu_recip dd{
    padding-left: 3em;
}



#recip #jyoryu_recip .notice{
width: 50%;
font-size: 90%;
font-weight: bold;
color: #fff;text-shadow: 1px 1px #000;
text-align: center;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
padding: 1% ;
}
#recip #jyoryu_recip .notice a{
text-decoration: none;
font-weight: bold;
color: #fff;
text-shadow: 0 0 5px #000;
}
#recip #jyoryu_recip .notice a:hover{
color: #999999;
}

#recip #jyoryu_recip .pot img{
text-align: center;
box-shadow: 1px 1px 2px #fff;
margin:2%;
width: 100px;
}


/*----------------------------------*/


/*---------------------------------------------------------------------------------------レッスンページ*/
/*---------------------------------------------------------------------------------------レッスンページ*/
/*---------------------------------------------------------------------------------------レッスンページ*/

#lesson h2{
	background-image: url(../img/lessso.png);
}

/*----------------------------------------------------------*/
#lesson #kouza{
    width: 90%;
    border: 5px #ccc solid;
    border-radius: 20px;
    padding: 2%;
    margin: 0 auto;
    background-color: #fff;
}
#lesson #kouza h4{
    font-size: 200%;
    text-shadow: 0 0 1px #f8c9c9;
}
#lesson #kouza .naiyou{
    margin: 2%;
    background-color: #fff;
}

#lesson #kouza .naiyou h5{
    border: 0.5px #ccc solid;
    padding: 2%;
    font-weight: bold;
    font-size: 110%;
    background-color: #F8c9c9;
}
#lesson #kouza .naiyou p{
     border-bottom:0.5px #ccc solid;
     border-left: 0.5px #ccc solid;
     border-right: 0.5px #ccc  solid;
    padding: 2%;
    font-size: 90%;
    line-height: 1.3em;
}

#lesson #kouza .coution{
    width: 90%;
    margin: 0 auto;
}
#lesson #kouza h6{
    margin: 2% 1% 0;
    font-weight: bold;
}

#lesson #kouza p{
    padding: 1% 2%;
    font-size: 80%;
    line-height:1.2em; }
/*----------------------------------------------------------*/
#lesson #schedule{
width: 90%;
margin: 5% auto;
padding: 2%;
font-size: 90%;
line-height: 3em;
line-height: 1.}


#lesson #schedule h5{
    position: relative;
    padding: 1%;
    color: #fff;
    text-shadow: 0 0 2px #5E5E5E;
    background: rgba(255,255,255,0.5);
    font-size: 150%;
    font-weight: bold;
    overflow: hidden;
    width: 90%;}
#lesson #schedule h5:before {
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-width: 14px 14px 0 0;
    border-style: solid;
    border-color: #fff;
    border-top-color: #998366;
    box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

#lesson #schedule p{
    font-size: 90%;
}
#lesson #schedule tr th.hiduke,#lesson #schedule tr th.tokoro{
    border:1px solid #5e5e5e;
    background-color: rgba(204,204,204,0.90);
    color: #fff; 
    text-shadow: 0 0 2px #5E5E5E;
    font-weight: bold;
    font-size: 120%;
}

#lesson #schedule table th.hiduke{
    width: 20em;
    padding: 1%;
}
#lesson #schedule table td.hiduke{
    width: 20em;
    padding: 1%;
}
#lesson #schedule tr td{
    border:0.5px solid #5e5e5e;
    background-color: #fff;
    width: 50%;
    padding: 1%;
}


#lesson #schedule table th.tokoro{
    width: 50em;
    padding: 1%;
}

#lesson #schedule table td.tokoro{
    width: 50em;
    padding: 1%;
}


/*---------------------------------------------------------------------------------------アバウトページ*/
/*---------------------------------------------------------------------------------------アバウトページ*/
/*---------------------------------------------------------------------------------------アバウトページ*/

#about main{
    font-size:80%;
    width: 80%;
       background-color: #fff;
}

#about h2{
	background-image: url(../img/about.png);
}
#about section{
    width: 70%;
    height: auto;
    margin: 0 auto;
    padding: 5% 0;
}

#about section a{
    text-decoration: none;
    color: #5e5e5e;
}


#about section a:hover{
    color: #000;
}

#about .naka{
    width: 80%;
    margin-left: 10%;
}
#about h3.midashi{
    font-size: 130%;
    font-weight: bold;
    color: #4e4e4e;
    padding: 0.5em 1em 0.25em;
    margin: 2%;
    border-bottom: 1px solid #999999;
    border-left:solid #999999 5px;
}
#about p{
    line-height: 2em;
}

#about h4.page{
    font-size: 100%;
    font-weight: bold;
    margin-top: 5%;
}
#about p.o{
    padding-left: 2em;
}
#about p.t{
    padding-left: 4em;
}
#about h5.Privacy{
    font-size: 120%;
    font-weight: bold;
    margin-top: 2%;
}

#about h6{
     font-family: 'Sacramento', cursive;
    font-size: 200%;
    margin-top:6%;
}


#about #sankou dt{
    font-weight: bold;
    height: 1em;
    margin: 0;
    padding: 0;
}
#about #sankou dd{
    height: 1em;
    margin: 0;
    padding-left: 10em;
}
#about #sankou .sankou{
    margin: 5% 0;
    padding-bottom: 1%;
    border-bottom: 1px dotted #999999;
}
/*------------------------------------------------------------------------------------コンタクトページ*/
/*------------------------------------------------------------------------------------コンタクトページ*/
/*------------------------------------------------------------------------------------コンタクトページ*/



#contact h2{
	background-image: url(../img/contact.png);
}




/*-------------------------ボタン---------------------*/
#contact .btn {
    width: 90px;
    font-size: 14px;
    padding: 2%;
    background-color: rgba(217,217,217,0.50);
    border-radius: 10px;
    box-shadow: 1px 1px 1px #999999;
    text-align: center;
    margin: 2% auto;
}

#contact .btn:hover {
    opacity: 0.8;
}
#contact .btn:active {
    color: red;
    background-color: #4e4e4e;
}

/*-------------------------表---------------------*/
#contact form {
  /* フォームをページの中央に置く */
  margin: 0 auto;
  width: 50%;
  padding: 2% 5%;
  border: 1px solid #fff;
  border-radius: 1em;
}

#contact label {
  /* すべてのラベルを同じサイズにして、きちんと揃える */
  display: inline-block;
  width: 100px;
  text-align: right;
  font-size: 1.2em;
}
#contact div.input{
margin: 2% auto;
}

#contact div.input input{
width: 500px;
line-height: 1.5em;
border: 1px solid #999;}

 #contact textarea {
  width: 500px;
  line-height: 1.5em;
  box-sizing: border-box;
  border: 1px solid #999;
}

#contact input:focus, #contact textarea:focus{
    border-color: #000;
}
textarea {
  /* 複数行のテキストフィールドをラベルにきちんと揃える */
  vertical-align: top;
  /* テキスト入力に十分な領域を与える */
  height: 15em;
}

/*--------------コンタクトページ終わり----------