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


/*ハーブとアロマの詳細子どもページ---------------------------------------------------------------------------------------------*/


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


.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
body#herb_child{/*body*/
    width: 100vw;
    height: auto;
    background-color: #FFF;
    font-family:  "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color:#4e4e4e;
	box-sizing: border-box;
}




.position{/*ハーブごとのまわりの枠大きさ決め----------------------*/    
width: 70%;
height: 100%;
margin: 0 auto;
position: relative;
}
    
/*--ハーブのページに戻るボタン---------------------------------------*/
.backpage{
position: absolute;
bottom: 15px;
right: -100px;
z-index:100;
}
.backpage a{
text-decoration: none;
color: #999999;
text-shadow: 1px 1px #fff;
padding: 10px 5px;
border-radius: 20px;
background-color: #FFEBCD;
transition: 1s;
}

.backpage a:hover{
background-color:#f8c9c9;
text-shadow: 1px 1px 2px #999999;
}

.herb_wrap{/*ハーブごとの枠----------------------*/
width: 100%;
height: 80vh;
background-color: #fff;
margin: 9vh auto;
padding: 1vh;
position: relative;
z-index: 1;
}
.herb_wrap::before,
.herb_wrap::after {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
}
.herb_wrap::before {
    background-color: rgba(255, 255, 255, .5);
    left: 0;
    top: 0;
    z-index: -1;
}
.herb_wrap::after {
    background-color: #a4f5c8;
    top: 5px;
    left: 5px;
    z-index: -2;
}

.herb_wrap h2{/*マステ風----------------------*/
  position: absolute;
  top: -0.2em;
  left: -1em;
  background-color: rgba(248,201,201,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: #65513f;
  transform: rotate(-3deg);
  font-size: 200%;
}


.logo_ilust{/*-ロゴイラスト--------------------------*/
position: absolute;
top:0;
right: 0;
}
/*---------------------------------------------------*/
.flexbox{
display: flex;
margin-top: 70px;
}
/*---------------------------------------------------*/
.left{/*background-color: red;*/
width: 35%;
margin-top: 5%;
height: auto;
text-align: center;
}
/*------------------------------------*/

.photo img{
border: solid 7px #fff;
}
/*------------------------------------*/
h3{
font-size: 200%;
margin-top: 10%;
font-weight: 500;
text-align: center;
}
/*---------------------------------------------------*/
.right{/*background-color: blue;*/
width: 60%;
height: auto;
padding: 0 2%;
}
/*------------------------------------*/
.gaiyo {/*background-color:rgba(23,20,20,0.66);*/
margin-top: 2%;
border: dashed #ccc 0.5px;
padding: 3% 5%;
}

.gaiyo p{
line-height: 1.5em;
font-size: 16px;
}


/*------------------------------------*/
.kouka{
padding: 2% 5%;
}
h4{
font-weight: bold;
font-size: 20px;
margin-top: 2%;
margin-left: -1em;}

.kouka p{
line-height: 1.5em;
font-size: 14px;
}
.kouka .kouno{
margin-top: 2%;
font-weight: 500;
}
.kouka .caution{
font-weight: bold;
margin-top: 2%;
font-size: 15px;
margin-left: -1em;
}