@charset "UTF-8";

/*--------------初期設定--------------*/

*{
  margin: 0px; 
  padding: 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
  font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック";
  list-style-type: none;
}

a {
 transition: color 0.3s ease;/*aリンクがゆっくりと戻る*/
}

a{
 display: block;/*ボックスのリンク化*/
 color:#000000;/*#b3ada0利休白茶 リンクにカーソルを乗せ前の色*/
 text-decoration: none;
}

/*リンクにカーソルを乗せると変わる色
a:hover{
 color: #000;
}
*/

a img{
 transition: opacity 0.3s ease;/*画像の透明化がゆっくりと戻る*/
}
 
a:hover img{
 filter: alpha(opacity=70);/*リンク画像の透明化*//* IE 8 */
 -ms-filter: alpha(opacity=70); /* IE 8 */
 opacity: 0.7;
 -webkit-opacity: 0.7;
-moz-opacity: 0.7;
 transition: color 0.3s ease;	
}

img{
 vertical-align: bottom;/*画像の下の余白を消す*/
}

img{
 border: 0;/*画像の下の余白を消す*/
}

img {
 pointer-events: none; /*画像コピー禁止(右クリック、ドラック)*/
}

img {
 -webkit-touch-callout:none;/*画像コピー禁止(長押し)*/
 -webkit-user-select:none;
 -moz-touch-callout:none;
 -moz-user-select:none;
 touch-callout:none;
 user-select:none;
}

.text-left{
text-align: left;
}

.text-center{
text-align: center;
}


p a{
 font-size: 17px;
 color: #7dae12;
}


/*--------------全体のレイアウト--------------*/


/*-------body-------*/

body{
 width: 100%;
 height: 100%;
 overflow-x: hidden;
 overflow-y: scroll;
-webkit-text-size-adjust: 100%;
}

.fixed{
position: fixed;
}

/*-------header-------*/

#hdr{
 width: 90%;
 max-width: 950px;
 margin: 0 auto;/*margin:上下　左右(auto)*//*margin:上　左右(auto)　下*/
}

/*-------#hdr 769px以上-------*/

@media only screen and (min-width:769px) {
#hdr{
 width: 95%;
 }
}

#hdr-h1{
 margin-top: 10px;
 font-size: 11px;
 font-weight: normal;
 color: #000000;
 opacity: 1;/*ボタンをクリックするとhdr-h1が隠れる設定*/
 visibility: visible;
}

/*-------#hdr-h1769px以上-------*/

@media only screen and (min-width:769px) {
#hdr-h1{
 margin-top: 10px;
 }
}

.mgn-top{
margin-top: 100px;
}

#hdr-logo{
 text-align: center;
 margin-top: 60px;
 opacity: 1;/*ボタンをクリックするとhdr-h1が隠れる設定*/
 visibility: visible;
}

#logoimg{
  text-align: center;
}
/*-------ナビ-------*/

.global{
 max-width:930px;
 margin: 0 auto;
 margin-top: 35px;
}
 
nav ul{
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

nav a{
 font-weight: bold;
 font-size: 16px;
}

/*-------メイン(全体）-------*/

#mainconts{
 width: 90%;
 margin: 0 auto;
}

/*-------#mainconts769px以上-------*/

@media only screen and (min-width:769px) {
#mainconts{
 width: 95%;
 max-width:950px;
 margin: 15px auto 0;
 display: block; /* ie11対策 */
 }
}
/*-------h1タイトル-------*/

.h1-title{
 margin-top: 45px;
 display: flex;
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 -webkit-box-align:center;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center;
}

.face{
 margin-bottom: 45px;
}

.h1-title:before, .h1-title:after{ /*要素と疑似要素を離さず記述*/
 content: "";
 flex-grow: 1;/*要素いっぱいに*/
 height: 1px;
 background: #444;/*線の色*/
 display: block;/*ないとダメ*/
}
.h1-title:before {
 margin-right: .4em;/*線と文字の間隔*/
}
.h1-title:after {
 margin-left: .4em;/*線と文字の間隔*/
}

/*-------フォントカラー-------*/

.color01{
  color: #deb068;
 }
 
/*-------トップページメインフォト-------*/
#main01{
 background:url(img/main01photo06.jpg);/*img/main01photo03.jpg*/
 width:100%;
 height: 0;
 padding-top: 73.9%;/* (元の画像の高さ800 / 元の画像の横幅1400) × 100（ レスポンシブな画像の高さを出す計算式）photo05の場合55.6％　photo04の場合63.1％*/
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
 position: relative;
}

#main01-inner-img{
 position: absolute;
 top: 15%;/*縦方向の中央*/
 left: 5%;/*横方向の中央*/
}

#main01-top-text{
  display: none;
}

#mainphoto{
 width:100%;
 height: auto;
}

#kensou{
 max-width:100%;
 height: auto;
}

#back-kensou{/*親div*/
 position: relative;/*相対配置*/
 margin-top: 15px;
 margin-bottom: 15px;
 text-align: center;
}

#back-kensou p {
  position: absolute;/*絶対配置*/
  font-size: 18px;/*22px*/
  color:#96514d;/*小豆色#c8c2be*/
  top: 55%;/*文字を画像の真ん中に配置*/
  left: 55%;/*文字を画像の真ん中に配置*/
  -ms-transform: translate(-55%,-55%);/*文字を画像の真ん中に配置*/
  -webkit-transform: translate(-55%,-55%);/*文字を画像の真ん中に配置*/
  transform: translate(-55%,-55%);/*文字を画像の真ん中に配置*/
  margin:0;/*文字を画像の真ん中に配置*/
  padding:0;/*文字を画像の真ん中に配置*/
  /*文字の装飾は省略*/ 
 }

@media screen and (min-width: 769px) {
#back-kensou{
  display: none;
 }
}


@media screen and (max-width: 768px) {
#main01-inner-img{
  display: none;
 }
#main01-top-text{
  display: block;
  width: 60%;/*80％*/
  margin: 30px auto 40px;/*margin:上　左右(auto)　下*/
  text-align: center;
  font-size: 18px;/*22px*/
  color:#96514d;/*小豆色#c8c2be*/
  font-weight: bold;
  background: #ffffff;
  line-height: 35px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 }
 .yutari{
  font-size: 28px;
  color: #b7282e;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 }
}

/*-------メニュー-------*/

.menu-title{
 margin-top: 45px;
  margin-bottom: 15px;
 border-left: solid 10px #ffc06e;
 padding-left: 1em;
 background: #ffffff;
 vertical-align: middle;
}

.menu-exp{
 margin-left: 10px;
  margin-right: 10px;
  font-size: 17px;
  font-weight: normal;
}

.menu-list{
 margin-top: 25px;
 padding-left: 10px;
 padding-right: 10px;
 background: #ffffff;
}

.kakumaru {
 padding: 8px 10px;
 margin-top: 10px;
 color: #a9a9a9;/*文字色*/
 background: #FFF;
 border: solid 2px #ffc06e;/*線*/
 border-radius: 10px;/*角の丸み*/
}

.kakumaru p{
    margin: 0; 
    padding: 0;
}

.kakumaru4{
 padding: 2px 2px;
 color: #ffffff;
 background: #ffc06e;
 border-radius: 4px;/*角の丸み*/
}

.menu-description{
 color: #a9a9a9;/*#a9a9a9から変更*/
 margin-top: 15px;
 padding-top: 0px;
}

.about-option{
 font-size: 12px;
 color: #000000;
 margin-top: 35px;
 padding-left: 2em;
 padding-right: 2em;
}

.menu-list p:first-child{
 border-top:0px dotted #c8c8c8;/*1pxから変更*/
 }
 
 .fa-color{
 color: #98d98e;
}

 .ti{
 margin-left: 0;/* margin-left: 0.7em;チェック印分文字をずらす*/
               /* text-indent: -0.7em;チェック印分文字をずらす*/
}
 
 .ta-j{
 text-align: justify;
}

/*-------ボディ＆フェイシャルの詳細-------*/

.info-title{
 margin-top: 45px;
 text-align: center;
}

.h3-infotext{
 margin-top: 15px;
 text-align: left;
 font-size: 17px;
}

.h3-infotext p{
 margin-top: 15px;
}

.h3-infotext p a{
 position: relative;
 display: inline-block;
 padding-right: 16px;/*左側に矢印の場合padding-leftにする*/
 margin-top: 5px;
 text-decoration: none;
}

.h3-infotext p a:before,
.h3-infotext p a:after{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;/*左側に矢印の場合leftにする*/
 margin: auto;
 content: "";
 vertical-align: middle;
}

.h3-infotext p a:before{
 width: 12px;
 height: 12px;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 border: 1px solid #7dae12;
}

.h3-infotext p a:after{
 right: 6px;/*左側に矢印の場合leftにする*/
 width: 3px;
 height: 3px;
 border-top: 1px solid #7dae12;
 border-right: 1px solid #7dae12;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
} 

.h3-infotext br{
 display: none;
}

@media only screen and (min-width:769px) {
.h3-infotext br{
 display: inline;
 }
.h3-infotext{
 text-align: center;
 }
}

/*-------予約カレンダー-------*/

#sec-calender{
  margin-top: 45px;
  font-size: 18px;
}

p.border{
  border: 1px solid #ccc;
  padding: 15px 0;
  width: 30%;
  text-align: center;
  margin-top: 20px;
}
p.borderno{
  text-align: left;
  margin-top: 5px;
  padding-left: 5px;
  font-size: 13px;
}

p.bordernonext{
  text-align: left;
  margin-top: 2px;
  padding-left: 5px;
  font-size: 13px;
}

.calender-flex{
  display:flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-top: none;
}
.calender-day{
  background: #fdeff2;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  border-top: 1px solid #ccc; 
}
.calender-time{
  padding: 15px 30px;
  margin: 0;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc; 
  width: 25%;
  background: #fff;
  text-align: center;
}

.calender-can{
  padding: 15px 30px;
  margin: 0;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc; 
  width: 25%;
  background: #fff;
  text-align: center;
}

.calender-holiday{
  padding: 30px 30px;
  margin: 0;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc; 
  width: 100%;
  background: #fff;
  text-align: center;
}

.bleftno{
  border-left: none;
}


@media screen and (max-width: 768px) {
.calender-time{
    padding: 15px;
  }
  
.calender-can{
    padding: 15px;
  }

.calender-holiday{
    padding: 15px;
  }
  
  #sec-calender p{
  width: 100%;
 }
}

/*-------webご予約フォーム-------*/

.form-title{
 margin-top: 30px;
}

.form-comment{
 border: 0px solid #ccc;
 width: 100%;
 text-align: left;
 margin-top: 10px;
 margin-bottom: 20px;
 font-size: 17px;
}

.form-comment p{
 padding-top: 10px;
}


#sec-form{
 margin-top: 15px;
 padding-bottom: 30px;
 border: 1px solid #956f29;
}

.form-button{
 border: 0px solid #ccc;
 padding: 15px 15px;
 width: 100%;
 text-align: center;
 margin-top: 20px;
}

.submit{
 width: 350px;
 height: 50px;
 font-size: 18px;
 border:0px solid #777;
 padding: 4px 10px;
 color: #fff;
 cursor: pointer;
 background: #428ec9;
 border-radius: 100px;
}
.reset{
 width: 350px;
 height: 50px;
 font-size: 18px;
 border:0px solid #777;
 padding: 4px 10px;
 color: #fff;
 cursor: pointer;
 background: #428ec9;
 border-radius: 100px;
}


.form-icn-require{
 display: inline-block;
 margin-left: 10px;
 margin-right: 10px;
 padding-left: 15px;
 padding-right: 15px;
 line-height: 30px;
 font-size: 15px;
 background-color: #e4002b;
 color: #fff;
 text-align: center;
}

.form-icn-any{
 display: inline-block;
 margin-left: 10px;
 margin-right: 10px;
 padding-left: 15px;
 padding-right: 15px;
 line-height: 30px;
 font-size: 15px;
 background-color: #ff8710;
 color: #fff;
 text-align: center;
}

.form-flex{
 display:flex;
 flex-wrap: wrap;
 border-bottom: 1px dotted #ccc;
 padding-bottom: 20px;
 padding-top: 20px;
}

.form-flex-last{
 display:flex;
 flex-wrap: wrap;
 border-bottom: 0px dotted #ccc;
 padding-bottom: 20px;
 padding-top: 20px;
}

.form-left{
 width: 250px;
 padding: 15px 15px;/*input-fieldと上下のpaddingを同じにする*/
 text-align: left;
 font-size: 15px;
 font-weight: bold;
 border-right: 10px solid #ccc; 
}

.form-left p{
 font-weight: normal;
}


.form-right{
 border: 0px solid #ccc;
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 15px;
 padding-bottom: 15px;
 width: 400px;
 background: #fff;
}

.form-confirm-right{
 border: 1px solid #ccc;
 padding-top: 15px;
 padding-bottom: 15px;
 padding-left: 10px;
 font-size: 18px;
 width: 380px;
 background: #fff;
}

.height200{
 height: 200px;
}

.text-comment{
 border: 1px solid #ccc;
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 10px;
 width: 400px;
 height: 200px;
 background: #fff;
 font-size: 18px;
}

.input-field{
 padding: 15px 30px;/*form-leftと上下のpaddingを同じにする*/
 width: 390px;
 font-size: 18px;
 background: #fff;
}

#name-field{
 padding: 15px 30px;/*form-leftと上下のpaddingを同じにする*/
 width: 390px;
 font-size: 18px;
 background: #fff;
}

#tel-field{
 padding: 15px 30px;/*form-leftと上下のpaddingを同じにする*/
 width: 390px;
 font-size: 18px;
 background: #fff;
}

#mail-field{
 padding: 15px 30px;/*form-leftと上下のpaddingを同じにする*/
 width: 390px;
 font-size: 18px;
 background: #fff;
}

#month-field{
 padding: 15px 30px;/*form-leftと上下のpaddingを同じにする*/
 width: 390px;
 font-size: 18px;
 background: #fff;
}

#menu-field{
 padding: 15px 30px;/*form-leftと上下のpaddingを同じにする*/
 width: 390px;
 font-size: 18px;
 background: #fff;
}

.form-button-flex{
 display:flex;
 flex-wrap: wrap;/*折り返し可能*/
 justify-content:center;
 margin-top: 20px;
}

.form-send{
 padding: 10px;
 text-align: center;
}
.form-back{
 padding: 10px;
 text-align: center;
}


@media screen and (max-width: 768px) {
 .form-flex{
  display: block;
  border-bottom: 0px;
  padding-bottom: 10px;
  padding-top: 10px;
 }

 #sec-form br{
  display: none;
 }
  
 .form-right{
  width: 100%;
  text-align:left;
  padding-top: 5px;
  padding-bottom: 5px;
 }
 
 .form-confirm-right{
  width: 94%;
  text-align:left;
  margin-left: 3%;
  margin-right: 3%;
  padding-left: 5%;
 }
  
 .form-left{
  width: 100%;
  text-align:left;
  border-right: 0px; 
 }
  
 .text-comment{
  width: 100%;
 }
 
 .input-field{
  width: 100%;
  }
  
 #name-field{
  width: 100%;
  }
  
 #tel-field{
  width: 100%;
  }
  
 #mail-field{
  width: 100%;
  }
  
 #month-field{
  width: 100%;
  }
  
 #menu-field{
  width: 100%;
  } 
  
 .submit{
 width:90%;
 }
 
 .reset{
 width: 90%;
 }
 
 .form-send{
 width: 90%;
 }
.form-back{
 width: 90%;
 }
}

/*-------顔つぼとボディーについて詳細-------*/

.about-face-body{
 margin-top: 25px;
}

.fb-photo{
 width:100%;
 height: auto;
}

.photo-bottom{
 width: 100%;
 margin-top: 15px;
}

.photo-bottom p{
 margin-top: 5px;
 font-size: 12px;
 padding-left: 5px;
}

/*-------夏のスキンケア-------*/

#skin{
 margin-top: 25px;
 text-align: left;
 font-size: 15px;
}

#skin p{
 padding-top: 10px;
 padding-left: 5px;
 line-height: 1.5;
}

.boxrad{
 margin-top:10px;
 padding-bottom: 10px;
 border: solid 2px #6091d3;/*線*/
 border-radius: 10px;/*角の丸み*/
}

.center{
 text-align: center;
}

#skin p a{
 position: relative;
 display: inline-block;
 padding-right: 16px;/*左側に矢印の場合padding-leftにする*/
 margin-top: 5px;
 text-decoration: none;
}

#skin p a:before,
#skin p a:after{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;/*左側に矢印の場合leftにする*/
 margin: auto;
 content: "";
 vertical-align: middle;
}

#skin p a:before{
 width: 12px;
 height: 12px;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 border: 1px solid #7dae12;
}

#skin p a:after{
 right: 6px;/*左側に矢印の場合leftにする*/
 width: 3px;
 height: 3px;
 border-top: 1px solid #7dae12;
 border-right: 1px solid #7dae12;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
} 


/*-------.w45-------*/

.midashi-h2{
 margin-top: 35px;
 text-align: center;
 font-size: 40px;
 color: #808000;
 letter-spacing: 0.05em;/*文字と文字の間隔*/
 font-family: 'Noto Sans JP', sans-serif;
 font-weight:700;
 line-height: 1.4;
}

.midashi-h2 span{
 margin-top: 0px;
 font-size: 14px;
 color: #000000;
 letter-spacing: 0.05em;/*文字と文字の間隔*/
 display: block;
 font-weight: 500;
}

.bc45{
 background-color: #fef4f4;/*桜色 #eaedf7 白菫色 しろすみれいろ*/
 border: 0px dotted #808000;
}

.mpaddlr{
 padding-left: 10px;
 padding-right: 12px;
 padding-bottom: 12px;
 margin-top: 5px;
}

/*-------.mpaddlr 769px以上-------*/

@media only screen and (min-width:768px) {
.mpaddlr{
 margin-top: 0px;
 }
}




.titleleftbo{
 border-left: 0px solid #c3d825;/*10px 若草色*/
 margin-bottom: 10px;
 padding-left: 5px;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 16px;
 color: #000000;/*潤色 うるみいろ#c8c2be*/
}

.matitleleftbo{
 border-left: 0px solid #c3d825;/*10px 若草色*/
 margin-bottom: -15px;
 margin-top: 25px;
 padding-left: 5px;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 16px;
 color: #000000;/*潤色 うるみいろ#c8c2be*/
}

.paddlr{
 padding-left: 10px;
 padding-right: 12px;
 padding-bottom: 12px;
 margin-top: 5px;
}

.ptp{
 padding-top: 10px;
}

/*-------.w45-------*/

.w45{
 max-width:950px;
 }
 

/*-------.w45 ul flex-------*/

.w45 ul{
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-flex-wrap:wrap;
 -moz-flex-wrap:wrap;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap;
 }

/*-------.w45 ul li-------*/

.w45 ul li{
 margin-top: 25px;
 width: 100%;
}

.w45 ul li img{
 width: 100%;
}

/*-------.w45 ul li 769px-------*/

@media only screen and (min-width:768px) {
 .w45 ul li{
 width: 48%;
 }
 .w45 ul li img{
 width: 48%;
 }
 .titleleftbo{
 font-size: 22px;
 }
 .matitleleftbo{
 font-size: 22px;
 }
}

.w45 ul li p{
 margin-top: 0px;
 padding-top: 10px;
 font-size: 17px;
 padding-left: 5px;
 line-height: 1.5;
}

/*---丸の中に矢印設定---*/
.w45 p a{
 position: relative;
 display: inline-block;
 padding-right: 16px;/*左側に矢印の場合padding-leftにする*/
 margin-top: 5px;
 text-decoration: none;
}

.w45 p a:before,
.w45 p a:after{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;/*左側に矢印の場合leftにする*/
 margin: auto;
 content: "";
 vertical-align: middle;
}

.w45 p a:before{
 width: 12px;
 height: 12px;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 border: 1px solid #7dae12;
}

.w45 p a:after{
 right: 6px;/*左側に矢印の場合leftにする*/
 width: 3px;
 height: 3px;
 border-top: 1px solid #7dae12;
 border-right: 1px solid #7dae12;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
} 

/*-------#sec-face-------*/

#sec-face{
 width: 100%;
}

/*-------#sec-face 480px以上-------*/

@media only screen and (min-width:480px) {
#sec-face{
 width: 48%;
 }
}

#sec-face-photo{
 width:100%;
 height: auto;
}

/*-------#sec-body-------*/

#sec-body{
 width: 100%;
 margin-top: 35px; 
}

/*-------#sec-body 480px以上-------*/

@media only screen and (min-width:480px) {
#sec-body{
 width: 48%;
 margin-top: 0px; 
 }
}

#sec-body-photo{
 width:100%;
 height: auto;
}

/*-------#sec-bridal-------*/

#sec-bridal{
 width: 100%;
 margin-top: 35px; 
}

#bridal-photo{
 width:100%;
 height: auto;
}


#sec-bridal p{
 margin-top: 0px;
 padding-top: 10px;
 font-size: 17px;
 padding-left: 5px;
 line-height: 1.5;
}
 
/*-------.w30 ul li -------*/

.w30{
 max-width:950px;
}

.bc30{
 background-color: #fef4f4;/*桜色 #eaedf7白菫色 しろすみれいろ*/
}

.w30 ul{
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-flex-wrap:wrap;
 -moz-flex-wrap:wrap;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap;
}

/*-------.w30 ul li-------*/

.w30 ul li{
 margin-top: 25px;
 width: 100%;
}

/*-------.w30 ul li 769px以上-------*/

@media only screen and (min-width:768px) {
.w30 ul li{
 width: 30%;
 }
}

.w30 ul li p{
 padding-top: 10px;
 font-size: 14px;
 padding-left: 5px;
}

/*---丸の中に矢印設定---*/
.w30 p a{
 position: relative;
 display: inline-block;
 padding-right: 16px;/*左側に矢印の場合padding-leftにする*/
 margin-top: 5px;
 text-decoration: none;
}

.w30 p a:before,
.w30 p a:after{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;/*左側に矢印の場合leftにする*/
 margin: auto;
 content: "";
 vertical-align: middle;
}

.w30 p a:before{
 width: 12px;
 height: 12px;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 border: 1px solid #7dae12;
}

.w30 p a:after{
 right: 6px;/*左側に矢印の場合leftにする*/
 width: 3px;
 height: 3px;
 border-top: 1px solid #7dae12;
 border-right: 1px solid #7dae12;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
} 

/*------sec-bed-------*/

#sec-bed-photo{
 width:100%;
 height: auto;
}

/*------sec-sutimu-------*/

#sec-sutimu-photo{
 width:100%;
 height: auto;
}

/*------sec-shitunai-------*/

#sec-shitunai-photo{
 width:100%;
 height: auto;
}

/*------sec-f-room-------*/

#sec-f-room-photo{
 width:100%;
 height: auto;
}

/*------sec-b-room-------*/

#sec-b-room-photo{
 width:100%;
 height: auto;
}

/*------sec-m-room-------*/

#sec-m-room-photo{
 width:100%;
 height: auto;
}

/*-------游明朝　b22＃808000-------*/
.mintyou22c808{
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif!important;
 color: #000000!important;/*808000オリーブ*/
 font-weight: bold!important;
 font-size: 20px!important;
}

/*-------游明朝　b22＃752100-------*/
.mintyou22c752{
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif!important;
 color: #752100!important;/*赤銅色 しゃくどういろ*/
 font-weight: bold!important;
 font-size: 22px!important;
}

/*-------游明朝　b22＃000-------*/
.mintyou22{
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif!important;
 color: #000000!important;
 font-weight: bold!important;
 font-size: 22px!important;
}

/*-------游明朝　b20-------*/
.mintyou20{
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-weight: bold;
 font-size: 20px!important;
}

/*-------游明朝　b18-------*/
.mintyou18{
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-weight: bold;
 font-size: 18px!important;
}

/*-------游明朝　b16-------*/
.mintyou16{
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-weight: bold;
 font-size: 16px!important;
}

/*-------abouthao-------*/

#abouthao{
 width: 100vw;/*画面全体に表示*/
 position: relative;/*センターへポジション指定*/
 left: 50%;/*センターへポジション指定*/
 transform: translateX(-50%);/*センターへポジション指定*/
 background: #fdeff2;/*#dccb18*/
 margin-top: 35px;
}


#abouthao p{
 margin-top: 10px;
 font-size: 17px;
 line-height: 1.7;
 letter-spacing: 0.1em;
 padding-left: 0px;
}

.abouthao-title{
 font-size: 20px;
 font-weight: bold;
 color: #000000;
 padding-bottom: 10px;
text-align: center;
}

.marusen {
 padding: 8px 10px;
 background: #FFF;
 border: solid 2px #ffffff;/*線*/
 border-radius: 10px;/*角の丸み*/
}

.marusen2{
 padding: 8px 10px;
 margin-top:10px;
 background: #FFF;
 border: solid 2px #ffffff;/*線*/
 border-radius: 10px;/*角の丸み*/
}

.marusen3{
 padding: 8px 10px;
 margin-top:10px;
 background: #FFF;
 border: solid 2px #ffffff;/*線*/
 border-radius: 10px;/*角の丸み*/
}

.abouthao-title2{
 font-size: 20px;
 font-weight: bold;
 color: #000000;
 padding-top: 10px;
 padding-bottom: 10px;
 text-align: center;
}

.abouthao-title3{
 font-size: 20px;
 font-weight: bold;
 color: #000000;
 padding-top: 10px;
text-align: center;
}


/*-------abouthao-title 769px以上-------*/

@media only screen and (min-width:769px) {
.abouthao-title{
text-align: left;
 }
.abouthao-title2{
text-align: left;
 }
.abouthao-title3{
text-align: left;
 } 
} 

/*-------abouthao-inner-------*/

#abouthao-inner-top{
 margin: 0 auto;/*コンテンツのセンターリング*/
 max-width: 950px;
 width: 85%;
 border-left:0px dotted #7dae12;/*小豆色#96514d*/
 border-right:0px dotted #7dae12;/*小豆色#96514d*/
 padding-left: 0px;
 padding-right: 0px;

}

#abouthao-inner-bottom{
 margin: 0 auto;/*コンテンツのセンターリング*/
 max-width: 950px;
 width: 85%;
 border-left:2px dotted #7dae12;/*小豆色#96514d*/
 border-right:2px dotted #7dae12;/*小豆色#96514d*/
 padding-left: 20px;
 padding-right: 20px;

}

/*-------abouthao-inner 769px以上----

@media only screen and (min-width:769px) {
#abouthao-inner-bottom{
 width: 95%;
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 }
} 

---*/

/*-------abouthao01-------*/

#abouthao01{
 padding-bottom: 30px;
 padding-top: 0px;
 }
 
/*-------abouthao01 769px以上---

@media only screen and (min-width:769px) {
#abouthao01{
 width: 50%;
 border-right:0px solid #96514d;
 margin-bottom: 0px;
 border-bottom: 0px;
 padding-right: 30px;
 }
} ----*/

/*-------abouthao02-------*/

#abouthao02{
 padding-bottom: 30px;
 padding-top: 0px;
 } 
 
 
/*-------abouthao02 769px以上---- ---*/

@media only screen and (min-width:769px) {
#abouthao02{
 width: 90%;
 border-right:0px solid #96514d;
 margin-bottom: 0px;
 border-bottom: 0px;
 padding-right: 20px;
 padding-top: 0px;
 }
} 

/*-------reserve-------*/

#reserve{
 width: 100vw;/*画面全体に表示*/
 position: relative;/*センターへポジション指定*/
 left: 50%;/*センターへポジション指定*/
 transform: translateX(-50%);/*センターへポジション指定*/
 background: #fdeff2;/*#dccb18*/
 margin-top: 35px;
}


#reserve p{
 margin-top: 8px;
 font-size: 17px;
 line-height: 1.5;
 padding-left: 0px;
}

.title-paddingtop{
 padding-top: 25px;
}

#reserve p:first-child{
 margin-top: 0px;/*要素の中の最初の子要素だけ*/
 }


/*-------reserve-inner-------*/

#reserve-inner{
 margin: 0 auto;/*コンテンツのセンターリング*/
 max-width: 950px;
 width: 85%;
}

/*-------reserve-inner 769px以上-------*/

@media only screen and (min-width:769px) {
#reserve-inner{
 width: 95%;
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 }
} 

/*-------reserve01-------*/

#reserve01{
 padding-bottom: 30px;
 border-bottom: 1px solid #96514d;/*小豆色*/
 text-align: center;
}
 
/*-------reserve01 769px以上-------*/

@media only screen and (min-width:769px) {
#reserve01{
 width: 33%;
 border-right:1px solid #96514d;/*小豆色*/
 margin-bottom: 0px;
 border-bottom: 0px;
 padding-right: 20px;
 }
}

/*-------reserve02-------*/

#reserve02{
 padding-bottom: 30px;
 border-bottom: 1px solid #7dae12;
 text-align: center;
}

@media only screen and (min-width:769px) {
#reserve02{
 width: 33%;
 border-right:1px solid #96514d;/*小豆色*/
 margin-bottom: 0px;
 border-bottom: 0px;
 padding-left: 20px;
 padding-right: 20px;
 }
}

/*-------769px以上TELリンクに無反応-------*/
@media(min-width: 769px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}

/*-------reserve03-------*/

#reserve03{
 padding-bottom: 30px;
 text-align: center;
}

#reserve03{
 padding-bottom: 30px;
 text-align: center;
}

#reserve03 p a{
 position: relative;
 display: inline-block;
 padding-right: 16px;/*左側に矢印の場合padding-leftにする*/
 margin-top: 5px;
 text-decoration: none;
 font-size: 12px;
 color: #fff;
}

#reserve03 p a:before,
#reserve03 p a:after{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;/*左側に矢印の場合leftにする*/
 margin: auto;
 content: "";
 vertical-align: middle;
}

#reserve03 p a:before{
 width: 12px;
 height: 12px;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 border: 1px solid #fff;
}

#reserve03 p a:after{
 right: 6px;/*左側に矢印の場合leftにする*/
 width: 3px;
 height: 3px;
 border-top: 1px solid #fff;
 border-right: 1px solid #fff;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
} 


#reserve03 a:hover{
 color: #000;/*リンクにカーソルを乗せると変わる色*/
}

/*-------reserve03　769px-------*/

@media only screen and (min-width:769px) {
#reserve03{
 width: 33%;
 padding-left: 20px;
 margin-bottom: 0px;
 }
}

.pl10{
 padding-left: 15px !important;
}

.cent{
 text-align: center
}

.fff{
 background: #ffd700;
 border:1px solid #ffffff; /*#c8c8c8*/
}

/*-------スタッフ　ショップセクション-------*/

#sec-stuff{
 width: 100%;
}

@media only screen and (min-width:769px) {
#sec-stuff{
 width: 48%;
 padding-left: 20px;
 display: block;
 }
}

#sec-stuff-photo{
 width:100%;
 height: auto;
}

#sec-shop{
 width: 48%;
}

#sec-shop-photo{
 width:100%;
 height: auto;
}

/*-------.leftphotoflex

.bc45{
 background-color:#fdeff2;
}

.bcphoto{
 background-color:#fdeff2;
}

.paddlr{
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
}
-------*/


.ptp{
 padding-top: 10px;
}

/*-------.leftphotoflex-------*/

.leftphotoflex{
 max-width:950px;
 margin-top: 25px;
}
 

/*-------.leftphotoflex ul flex-------*/

.leftphotoflex ul{
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap:wrap;
 -moz-flex-wrap:wrap;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap;
}

/*-------.leftphotoflex ul li-------*/

.leftphotoflex ul li{
 margin-top: 0px;
 width: 100%;
}

.leftphotoflex ul li img{
 width: 100%;
}

/*-------.leftphotoflex ul li 769px-------*/

@media only screen and (min-width:768px) {
.leftphotoflex ul li{
 width: 49.7%;/*全体の幅が768pxの時、marginleftが2pxになる値*/
 margin-left: 2px;
 }
 .leftphotoflex ul li img{
 width: 50%;
 }
  .leftphotoflex ul li p{
 margin-top: 5px;
 }
}

.leftphotoflex ul li p{
 margin-top: 0px;
 font-size: 14px;
 padding-left: 5px;
 padding-top: 10px;
 line-height: 1.5;
 letter-spacing: 0.1em;
}

.leftphotoflex p a{
 position: relative;
 display: inline-block;
 padding-right: 16px;/*左側に矢印の場合padding-leftにする*/
 margin-top: 5px;
 text-decoration: none;
}

.leftphotoflex p a:before,
.leftphotoflex p a:after{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;/*左側に矢印の場合leftにする*/
 margin: auto;
 content: "";
 vertical-align: middle;
}

.leftphotoflex p a:before{
 width: 12px;
 height: 12px;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 border: 1px solid #7dae12;
}

.leftphotoflex p a:after{
 right: 6px;/*左側に矢印の場合leftにする*/
 width: 3px;
 height: 3px;
 border-top: 1px solid #7dae12;
 border-right: 1px solid #7dae12;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
} 

/*-------マタニティーセクション-------*/


#sec-maternity-photo{
 width:100%;
 height: auto;
}

/*-------フッターナビ-------*/

#footer{
 display: none;
 margin-top: 55px;
 font-size: 15px;
}

@media screen and (max-width: 769px) {
#footer{
 display:block;/*フッターナビを表示*/
 background:#ffffff;
 width:100%;
 margin: 55px auto 0;
 text-align:left
 }
.footernavi{
 border-bottom:solid 1px #000;
 line-height:3;
 }
.bordertop{
 border-top:solid 1px #000;
 }
 .footernavi p{
 padding-left: 5%;
 } 
 .footernavi  a{
 position: relative;
 }
 
/* ------ナビのアイコン（矢印）------ */
 .footernavi  a:after {;/*footernaviのaリンクに対して設定*/
 content: "";
 position: absolute;/*aのrelativeに対して*/
 top: 45%;
 right: 5%;
 width: 6px;
 height: 6px;
 border-top: solid 2px #ccc;/*アイコンの形*/
 border-right: solid 2px #ccc;/*アイコンの形*/
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 }
}
/*-------コピーライトー-------*/

#copyright{
 max-width:950px;
 font-size: 12px;
 color: #000000;
 text-align: center;
 background: #cccc33;/*#f3f3f3*/
 margin-bottom: 0px;
 margin: 75px auto 0;/*margin:上　左右(auto)　下*/
 padding-top: 5px;
 padding-bottom: 5px;
}

/*-------戻るボタン-------*/

#back-top {
 position: fixed;
 bottom: 20px;
 right: 20px;
 opacity: 0.6;
}
 
#back-top a {
 width: 60px;
 height: 60px;
 text-decoration: none;
 -webkit-transition: 0.5s;
 -moz-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;
}

#back-top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f139';
  font-size: 50px;
  color: #d2691e;
}

 
#back-top a:hover {
}

/* ------navToggle------ */

#navToggle{
 display: none;
 position:absolute;/*to body*/
 right:10%;/*ボタンの位置（画面右から）9→10％に変更*/
 top:40px;/*ボタンの位置（画面上から）70→40に変更*/
 width:30px;
 height:25px;
 cursor:pointer;
 z-index: 100;
}

#navToggle button {
 position:relative
}

#navToggle span {
 display:block;
 position:absolute;/*to div*/
 width:100%;
 border-bottom:solid 3px #808000;/*#999*/
 -webkit-transition: .35s ease-in-out;
 -moz-transition: .35s ease-in-out;
 transition: .35s ease-in-out
}
#navToggle span:nth-child(1) {top:0}
#navToggle span:nth-child(2) {top:11px}
#navToggle span:nth-child(3) {top:22px}


/* ------769px以下のハンバーガーボタン表示と769px以下のnav設定------ */

@media screen and (max-width: 769px) {
 .global{
 position: fixed;
 left:0;
 top:100px; /*ボタンを押したときのナビの位置*/
 margin-top: 0px;
 display:none;/*ボタンをクリックするまでは*/
 background:#ffffff;
 width:100%;/*横画面いっぱいに*/
 height:100%;/*縦画面いっぱいに*/
 text-align:left
 }

.global ul {
 display: block;/* display:flexの解除*/
 overflow-y: hidden;
 }

.global ul li {
 display:block;/*リンクをブロック化*/
 margin:0;
 border-bottom:dotted 1px #ccc;
 line-height:3;
 }

.global ul li:first-child{
 margin-left: 0px;
 }
.globbal ul li {
 padding:0;
 }

.global ul li  a{
 position: relative;
 color: #000;
 font-weight: bold;
 font-size: 16px;
 text-align: left;
 padding-left: 10px;
 }
 
/* ------ナビのアイコン（矢印）------ */
.global ul li a:after {;/*globalナビのaリンクに対して設定*/
 content: "";
 position: absolute;/*aのrelativeに対して*/
 top: 45%;
 right: 5%;
 width: 6px;
 height: 6px;
 border-top: solid 2px #ccc;/*アイコンの形*/
 border-right: solid 2px #ccc;/*アイコンの形*/
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 }

/* ------ハンバーガーボタンの表示------ */

#navToggle {
 display: block/*画面幅が860px以下になるとボタンが表示される*/
 }

/* ------ボタンが×になる動き------ */

.active #navToggle span:nth-child(1) {
 top: 11px;
 -webkit-transform:rotate(-45deg);
 -moz-transform:rotate(-45deg);
 transform:rotate(-45deg)
 }

.active #navToggle span:nth-child(2),
.active #navToggle span:nth-child(3) {
 top: 11px;
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 transform:rotate(45deg)
 }

/* ------navの表示------ */

.active nav{
 display: block;/*ボタンをクリックするとナビが表示される設定*/
 z-index: 99;
}
 
}/* メディアスクリーン(860px以下のハンバーガーボタン表示とnav設定)を閉じる */


/* ------active　hdr-h1ー------ */
.active #hdr-h1{
 opacity: 0;/*ボタンをクリックするとhdr-h1が隠れる設定*/
 visibility: hidden;
}

.active #hdr-logo{
 opacity: 0;/*ボタンをクリックするとhdr-h1が隠れる設定*/
 visibility: hidden;
}