@charset "UTF-8";

/* 共通部分
-----------------------------------------------------------------*/
html{
  font-size: 100%;
  /* ↓ navimenu 画面いっぱい表示対応用 */
  overflow:auto;
  /* ↑ navimenu 画面いっぱい表示対応用 */
}

body{
  font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;
  line-height: 1.7;
  color:#432;
  /* ↓ navimenu 画面いっぱい表示対応用 */
  overflow:hidden;
  position:relative;
  /* ↑ navimenu 画面いっぱい表示対応用 */
  /* ↓ タブレット時のFirefoxの横幅ずれ対応
  /*（最初ここに、NAVIずれ対応のためwidth:100vwを設定してたが、下スクロールバーが出てしまうので中止 */
  width:100%;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
}

/* 改行span */
.kaigyo-br {
  display:inline-block;
}

/* ヘッダー
-----------------------------------------------------------------*/
.page-header{
  display:flex;
  justify-content: space-between;
}

/*P.184 コンテンツの最大表示幅 */
.wrapper{
  max-width:1100px;
  margin:0 auto;       /* 中央に配置する指定 */
  padding:0 5% 0 7%;   /* 左右の余白の指定*/
}

.logo{
  max-width: 350px;
  min-width: 350px;
  margin-top: 40px;
}

.logo:hover{
  opacity: 0.6;
}

.main-nav{
  display: flex;
  justify-content: flex-end;
  font-size: 1.125rem;
  text-transform: uppercase;
  margin-top: 70px;
  list-style: none;
  /* 文字に影をつける */
  text-shadow:1px 1px 0 rgba(255,255,255,0.5)
  ,-1px 1px 0 rgba(255,255,255,0.5)
  , 1px -1px 0 rgba(255,255,255,0.5)
  ,-1px -1px 0 rgba(255,255,255,0.5);
}
.main-nav li{
  margin-left: 35px;
}
.main-nav a{
  color:#023d53;
}
.main-nav a:hover{
  color:#00a096;
}

/* #home (index.html)
-----------------------------------------------------------------*/
.home-catch-1,
.home-catch-2  {
   text-align: center;
}

/* ナチュラルビューティ */
.home-catch-1 h2{
  margin-top: 30px;
  font-size: 1.7rem;
  font-family: 'Philosopher',serif;
  font-weight: normal;
  font-weight: bolder;
  color:rgba(30,71,33,0.8);
  /* 文字に影をつける */
  text-shadow:1px 1px 0 rgba(255,255,255,0.2)
  ,-1px 1px 0 rgba(255,255,255,0.2)
  , 1px -1px 0 rgba(255,255,255,0.2)
  ,-1px -1px 0 rgba(255,255,255,0.2);
}

/* 肌に優しいをコンセプトに */
.home-catch-2 p{
  font-size: 1.25rem;
  /*margin:80px 0 42px;*/
  margin-top:60px;
  font-weight: bolder;
  color:rgba(30,71,33,0.8);
  /* 文字に影をつける */
  text-shadow:1px 1px 0 rgba(255,255,255,0.4)
  ,-1px 1px 0 rgba(255,255,255,0.4)
  , 1px -1px 0 rgba(255,255,255,0.4)
  ,-1px -1px 0 rgba(255,255,255,0.4);
}

/* TOP画面 電話番号・営業時間の青枠 */
.home-yoyaku{
  color:#fff;
  font-size:1.375rem;
  background: rgba(58,172,173,.7);
  width:260px;
  height:120px;
  border-radius: 5%;
  line-height: 1.375;
  text-align:center;
  padding:15px;
  -webkit-transform:translateY(-10%);
  transform:translateY(-10%);
  /* --↓-- 中央寄せ---*/
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
  /* --↑-- 中央寄せ---*/
  /* 下からの位置はstyle-pc.cssへ記述     */
  /* モバイル時にbottom設定が邪魔するため  */
}

.yoyaku-moji-top{
  font-size:1.1rem;
}
.yoyaku-moji-bottom{
  padding-left:13px;
  font-size:1.1rem;
}

.line-button img{
  width:80px;
  height:80px;
  /* --↓-- 右寄せ---*/
  position: absolute;
  right: 12vh;
  bottom:9vh;
  /* --↑-- 右寄せ---*/
}
/* 各画面TOPメイン画面 */
#home,#menu,#oil,#contact-top{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#menu{
  background-position: center top;
}

#home{
  background-image: url(../images/home-top-pc1.jpg);
  min-height: 100vh;
}


/* menu#、oil#、contact#
-----------------------------------------------------------------*/
/*ページタイトル（ex:Menu、Carrier Oil、Contact）*/
.page-title{
  text-align: center;
  font-size: 2rem;
  font-family: 'Philosopher',selif;
  font-weight:normal;
  padding-top:55px;
}

/*タイトル名（ex:Menu、ドレッサーでお直しＯＫ、当店について、店舗情報、LINEご予約～）*/
.title-name{
  font-size: 1.1rem;
  padding:0 8px 3px;
  border-bottom: 2px #0bd solid;
  font-weight:normal;
  margin-top:30px;
  margin-bottom:5px;
}

article,
aside{
  width:95%;
}

/* 記事情報の余白 */
aside p{
  padding: 12px 10px;
}

.wrapper-menu{
  width:95%;
  padding:0 5%;
}
.wrapper-oil{
  width: 92%;
}

/* リスト情報（footer上部）-----------↓ */
/*メニューリストにある 記号を消す*/
.sub-menu{
  margin-bottom: 60px;
  list-style:none;
}
/* カテゴリーリストの下に下線*/
.sub-menu li{
  border-bottom:1px #ddd solid;
}
/* カテゴリー別リストの色・幅変更*/
.sub-menu a{
  color:#432;
  padding:10px;
  display:block;
}
/* カーソルを合わせた時の色変更*/
.sub-menu a:hover{
  color:#0bd;
}
/* ↑リスト情報（footer上部）----------- */

/* page-top (画面右下のトップに戻る矢印ボタン）↓*/
#page-top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page-top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page-top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/* ↑ page-top (画面右下のトップに戻る矢印ボタン）↑*/

/* oil#、menu#
-----------------------------------------------------------------*/
.post-info{
  position:relative;
  padding-top: 10px;
  margin-bottom: 30px;
}
/* 青丸上部（ex：BODY,Facial,Choice）  */
.post-date{
  background: #0bd;
  border-radius: 50%;
  color:#fff;
  width:85px;
  height:85px;
  font-size: 1.2rem;
  text-align:center;
  position:absolute;
  top:0;
  padding-top: 12px;
}

/* 青丸下部（ex：MENU,Oil）   */
.post-date span{
  font-size:1.0rem;
  border-top:1px rgba(255,255,255,.5) solid;
  padding-top: 0px;
  display:block;
  width:60%;
  margin:0 auto;
}

/* 表題(ex:ボディマッサージ、フェイシャル、当店人気の～）*/
.post-title{
  font-family: "Yu Mincho","YuMinCho",serif;
  font-size:1.6rem;
  font-weight:normal;
}

/* 表題、カテゴリー名の左余白 */
.post-title,
.post-cat1,
.post-cat2{
  margin-left:110px;
}

/* 記事の段落 */
article p{
  margin-bottom: 1rem;
}

/* #menu#
-----------------------------------------------------------------*/
#menu{
  background-image: url(../images/menu-top-pc.jpg);
  height:300px;
}

/* 初回キャンペーン */
.canpen{
  padding: 0.2em 0.5em;
  margin: 1em 0;
  background: #d6ebff;
  box-shadow: 0px 0px 0px 10px #d6ebff;
  border: dashed 2px white;
}

/* h3 上部余白 */
.menu-h3{
  margin-top: 40px;
  color:#3b82c4;
}

.menu-price{
   margin: 0 auto;
   margin-top:30px;
   margin-bottom:50px;
}

/* Pタグ・TABLEを 横に並べる */
.menu-type{
   display:flex;
   justify-content: space-between;
}

/*  Pタグ */
.menu-type p{
    font-size:1.125rem;
    margin:10px 0 0;
    width:40%;
}

/*  画像サイズ */
.menu-type img{
   max-width: 250px;
   max-height: 180px;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 20px;
}

/*  tableタグ */
.menu-type table{
    width:60%;
    text-align: center;
    max-width: 320px;
    margin: auto;
}

/* 画像の位置微調整 */
.img-position{
    position:relative;
    top:6vh;
}

/* table 項目名 */
.menu-section1 th,
.menu-section2 th,
.menu-section3 th{
  padding-top:20px;
  vertical-align : bottom;
  color:#3b82c4;
}

.menu-section2 th,
.menu-section3 th{
  text-align: left;
}

/* 項目名の文字位置 */
.moji-left{
  text-align:left;
}
.moji-right{
  text-align:right;
}

/* table 文字位置 */
.td-r{
  text-align: right;
}

/* table サイズ・文字位置 */
.td-1{
  width:55%;
  text-align: left;
}
.td-2{
  text-align: center;
  width:20%;
}
.td-3{
  text-align: center;
  width:25%;
}
/* 文字の幅調整（小さく）*/
.font-space{
  letter-spacing: -0.1em;
}

.menu-yohaku{
  margin-top:40px;
  margin-bottom:60px;
}

/* #oil# oil.html
-----------------------------------------------------------------*/
#oil{
  /* oil画面の上部画像 */
  background-image: url(../images/oil-top.jpg);
  height:300px;
  margin-bottom: 40px;
}

.oil-type{
  display:flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

/* 各種オイルの画像 */
.oil-type img{
  max-width: 200px;
  max-height: 200px;
  margin-left: 20px;
  margin-right: 20px;
}

/* #CONTACT#
-----------------------------------------------------------------*/
#contact-top{
  background-image: url(../images/contact-top-pc.jpg);
  height:300px;
}

#contact{
  padding:2% 5% 0 7%;   /* 左右の余白の指定*/
}

.contact-info{
  display:flex;
  justify-content:space-between;
}

/* 店舗情報(左枠）・ライン情報(右枠） */
/* facebook(左枠）・当店について(右枠） */
.contact-left{
  width: 55%;
}
.contact-right{
  width: 40%;
}

.contact-tubomi{/*ショップ名横のつぼみの画像*/
  height:35px;
  width:35px;
}
.contact-shopname,
.contact-line{
  margin-top:8px;
}
.contact-shopname p{
  display:inline;     /*ショップ名とつぼみの画像を横並びに*/
  vertical-align:top; /*縦方向の揃え位置を指定*/
}

.contact-jusho,
.contact-tel,
.contact-email
{
  margin-left:30px; /*余白 */
}

.contact-jusho p,
.contact-tel p,
.contact-email p{
  padding:12px 10px;
}

/* 202103-add ↓ */
#calender-info{
  display:flex;
  justify-content:space-between;
}

.calender{
   width:380px;
   margin:0 auto;       /* 中央に配置する指定 */
   padding-top:30px;
   padding-bottom:30px;
}
.calender-coment{
   margin:0 auto;
   padding-top:20px;
   padding-bottom:20px;
   line-height: 1.8;
}
.calender-coment p:nth-child(2){
   padding-top:20px;
}
/* 202103-add ↑ */

/* free-calender-css 202103-add まだ置いておくうまくいかなかったけど*/
.date_diff_shows{
   display:none;
}
/* 202103-add ↑ */

.contact-map{
  width:90%;
  padding-top:30px;
  padding-bottom:50px;
  margin:0 auto;       /* 中央に配置する指定 */
}

/* 地図のサイズ これしとかないといけない */
iframe{
  width:100%;
}

#sns{
  background: #FAF7F0;
  /* ↓削除しちゃだめ。bottomを消すとフッター上に2cmほどの白色の背景余白が入る */
  padding:1% 5% 3% 7%;   /* 上下左右の余白の指定*/
}

.sns-box{
  width:100%;
}

/* PC版では「LINE追加」ボタンは表示しない */
.contact-line a{
  display:none;
}
/* LINEアイコンと「LINEからの～」横に並べる */
.contact-line{
  display: flex;
  justify-content: center;
  text-align: center;
}
/* LINEアイコンのサイズと位置調整 */
.contact-line-1 img{
  width:50px;
  height:50px;
  margin-top:15px;
}

/* facebook と「当店について」を横並び*/
.aside-contact{
  display:flex;
  justify-content:space-between;
  padding-bottom:20px;
}
/* バーコードのサイズ縮小 */
.barcode{
  width:60%;
  height:75%;
}

/* 当店についてのＰの内容を少し文字内側に */
.contact-right p{
  padding: 0 10px;
}

/* フッター
-----------------------------------------------------------------*/
footer{
  background: #432;    /* 深茶色 */
  background:#1e4721;  /* 深緑 */
  text-align:center;
  padding: 26px 0;
}

footer p{
  color:#fff;
  font-size: 0.875rem;
}