@charset "UTF-8";

@media screen and (max-width: 767px) {
  body {
    min-width: initial;/*初期化*/
    font-size: 1.6rem;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* テスト用
=======================
* {
  outline: 1px solid green;
}
 */
 
  .pc,
  .pc-tab,
  .tab {
    display: none;
  }

  .tab-sp,
  .sp {
    display: block;
  }

  .sp_flex-box {
    display: flex;
  }

main {
  max-width: none;
  width: 100%;
}

  /* ハンバーガーメニューの保険
============================================*/
header {
  transition: none;
}

  /* I-01-1. ヘッダー上部（ショップインフォ）
============================================*/
  header #header_shopinfo {
    height: 20vw;
    background-image: url(../images/top_brick2.png), url(../images/top_white_wall.jpg);
    background-position: calc(50% + 24.5vw) 100%, center;
    background-size: 33.3%, auto;
  }

  header #header_shopinfo h1 {
    font-size: 2.5vw;
    white-space: nowrap;
  }

  /*画面幅374px以下のときの調整*/
  @media screen and (max-width: 374px) {
    header #header_shopinfo h1 {
      line-height: 1.2;
    }
  }

  header #header_shopinfo .sp_flex-item1 {
    order: 2;
    width: 63.0%;
  }

  header #header_shopinfo .sp_flex-item2 {
    order: 1;
    width: 37.0%;
  }

  header #header_shopinfo .sp_flex-item2 img {
    width: 94.5%;
  }

  header #header_shopinfo .flex-item1 {
    width: 58.0%;
    padding: 3.0% 0 0 1.5%;
  }

  header #header_shopinfo .flex-item3 {
    width: 29.0%;
    padding-top: 0;
  }

  header #header_shopinfo .flex-item3 p.sp {
    height: 9.0vw;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }

  header #header_shopinfo .flex-item4 {
    width: 13.0%;
  }



  /* I-01-2(sp). スマホナビゲーションエリア（ハンバーガーメニュー）
============================================*/
  #gloval-nav {
    background-color: rgba(253, 233, 234, .9);
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    text-align: center;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .3s ease, visibility .3s ease;
  }

  #gloval-nav a {
    display: block;
    color: #210000;
    text-decoration: none;
    padding: 1.6rem 0;
    transition: color .3s ease;
    font-size: 2.0rem;
    line-height: 1.2;
  }

  #gloval-nav a:hover {
    color: #666;
  }

  #gloval-nav ul {
    list-style: none;
    padding: 0;
  }

  #gloval-nav ul li {
    opacity: 0;
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
    transition: opacity .2s ease, -webkit-transform .3s ease;
    transition: transform .3s ease, opacity .2s ease;
    transition: transform .3s ease, opacity .2s ease, -webkit-transform .3s ease;
  }

  #gloval-nav ul li:nth-child(2) {
    transition-delay: .05s;
  }

  #gloval-nav ul li:nth-child(3) {
    transition-delay: .15s;
  }

  #gloval-nav ul li:nth-child(4) {
    transition-delay: .25s;
  }

  #gloval-nav ul li:nth-child(5) {
    transition-delay: .35s;
  }

  #nav-toggle .nav-toggle_close {
    display: none;
  }

  #nav-toggle {
    position: fixed;
    top: 2.5vw;
    right: 2.5vw;
    width: 10.5vw;
    height: auto;
    cursor: pointer;
  }

  /* z-index */
  #nav-toggle {
    z-index: 1000;
  }

  /* open */
  .open {
    overflow: hidden;
  }

  .open #nav-toggle .nav-toggle_open {
    display: none;
  }

  .open #nav-toggle .nav-toggle_close {
    display: block;
  }

  .open #gloval-nav {
    visibility: visible;
    opacity: 1;
  }

  .open #gloval-nav li {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: opacity .9s ease, -webkit-transform 1s ease;
    transition: transform 1s ease, opacity .9s ease;
    transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
  }

  #gloval-nav span {
    font-size: 80%;
  }



  /* I-01-3. ヘッダーファーストビュー
============================================*/
  header #first_view {
    height: 48.9vw;
    padding: 2.5%;
    position: relative;
  }

  header #first_view .image_first_view {
    background-image: url(../images/fv_wooden_frame_sp.jpg);
    /*写真のフレーム*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 100%;
    z-index: 99;
  }

  header #first_view .image_first_view img {
    width: 69.73vw;
    position: absolute;
    /*ファーストビュー縦位置中央に*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  header #first_view .image_leaf_left {
    position: absolute;
    top: 0;
    left: 0;/*左端へ*/
    width: 17.6vw;
  }

  header #first_view .image_leaf_right {
    position: absolute;
    top: 0;
    left: calc(100% - 17.6vw);/*右端へ*/
    width: 17.6vw;
  }

  header #first_view .image_leaf_right img {
    object-position: 100% 100%;
  }



  /* I-01-4.スマホ用ヘッダー下部（ショップインフォ）
============================================*/
  header #header_shopinfo_sp {
    background-image: url(../images/main_white_wall.jpg);
    background-repeat: no-repeat;
    background-size: 100vw 21.9vw;
    background-color: #ffffff;
    padding: 1.3% 4%;
    font-size: 2.2rem;
  }

  header #header_shopinfo_sp .flex-box {
    justify-content: space-between;
  }

  header #header_shopinfo_sp .item_left {
    text-align: left;
    width: 45%;
  }

  header #header_shopinfo_sp .item_right {
    text-align: left;
    width: 55%;
    padding-left: 2.2%;
  }

  header #header_shopinfo_sp .item_right p {
    width: 90%;
    font-size: 3.2vw;
    line-height: 1.7;
    background-color: #210000;
    color: #ffffff;
    padding-left: 3.5%;
  }
  /*画面幅374px以下のときの調整*/
  @media screen and (max-width: 374px) {
    header #header_shopinfo_sp .item_right p {
      width: auto;
    }
  }

  header #header_shopinfo_sp .item_right p span {
    font-size: 2.5vw;
  }

  header #header_shopinfo_sp .item_right table {
    font-size: 2.9vw;
  }

  header #header_shopinfo_sp .item_right table th {
    width: 18%;
    color: #e20404;
  }

  header #header_shopinfo_sp .item_right table tr:nth-child(1) td {
    text-align: right;
  }

  header #header_shopinfo_sp .item_right .online_reservation {
    margin-left: -0.5rem;
  }

  header #header_shopinfo_sp .item_right .online_reservation a:hover {
    opacity: 0.7;
  }



  /*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊

          I-02. mainエリア

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
  main {
    background-image: none;
  }



  /* I-02-1. 記事（article)エリア
============================================*/
  /* main article 共通 */
  main article {
    max-width: none;
    width: 100%;
  }

  main article section {
    max-width: 100%;
  }

  main article section#shop_news {
    margin-top: 0;
  }
  
  main article section h2 {
    background-position: center;
    width: 100%;
    height: 12.3vw;/* 背景画像高さ72px/背景画像横幅585px*100=12.3 */
    padding-top: 4.78vw;/* 上から文字スペースまでの高さ28px/背景画像横幅585px＊100 */
    padding-bottom: 1.71vw;/* 下から文字スペースまでの高さ10px/背景画像横幅585px＊100 */
    margin-left: 0;
	margin-bottom: 2.0%;
    font-size: 4.7vw;
    font-size: clamp(1.8rem, 4.7vw, 3.2rem);/*IE No support*/
    /*clamp（A, B, C） → 最小でA 通常はB 最大でC*/
    line-height: 5.81vw;/* 文字スペースの高さ ： height12.3 - padding-top4.78 - padding-bottom1.71 */
  }

  main article section>div {
    /*sectionの子要素のdivのみ指定*/
    margin-left: 5%;/*menu_text部分のみ別指定*/
  }
  
	/* SP：他のsection本文用（menu_text以外） */
  main article section > div:not(.menu_text):not(.organic_top_flex) {
    margin: 0 5%;
  }


  main article>.flex-box {
    flex-direction: column;
	padding: 0 4%;
  }

  main article #map .flex-box {
    flex-direction: column;
    width: 100%;
  }

  main article .article-left {
    width: 100%;
    padding: 0;
    display: flex;/*要素並べ替えのため*/
    flex-direction: column;/*要素並べ替えのため*/
  }

  /*要素の並び替え・順序の指定*/
  main article #about_shop {
    order: 4;
  }
  
  main article #shop_news {
    order: 1;
  }
  
  main article #gallery {
    order: 5;
  }  

  main article #menu {
    order: 3;
  }

  main article #menu th{
  font-size:1.8rem;
  word-break:break-word;
	line-height:1.4;
	}
  
  main article #map {
    order: 2;
  }

  /* main article 共通ここまで */



  /* I-02-1-e. アクセスマップ
--------------------------------------------*/
  main article #map div {
    font-size: 3.2vw;
    font-size: max(3.2vw, 1.8rem);
    /*最大で3.2ｖｗ・最小で1.8rem ++ IE No support*/
  }

  main article #map .flex-box {
    margin-bottom: 2.3%;
  }

  main article #map .map_googlemap {
    margin-bottom: 2.8%;
  }

  main article #map iframe {
    width: 100%;
    height: 61vw;
    vertical-align: top;
  }


  /* I-02-1-d. メニュー
--------------------------------------------*/
  /* 価格（木の板）ボタン2列に配置 */
main article #menu .p-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

main article #menu .p-tabs__item{
  width:calc(50% - 4px);
}
  main article #menu .p-tabs__item:nth-child(2n+1) {
    padding-left: 1.73vw;
  }
	
.menu-btn{
  min-height:52px;
  height:auto;
  font-size:15px;
  padding:6px 10px;
  line-height:1.2;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
	border-radius:30px;
}

.menu-main {
	margin-left: 10%;
}

  main article #menu {
    margin-top: 2.0rem;
  }

  main article #menu .menu_text {
    padding: 7.2%;
    padding: 4rem 7.2vw;
    /*最小で3.0rem・基本は7.2％・最大で5.0rem ++ IE No Support*/
    background-size: 16vw;
    background-size: clamp(8.0rem, 16vw, 11.9rem);
    /*最小で8.0rem・基本は16vw・最大で11.9rem ++ IE No Support*/
	max-width: none;
	margin-left: 0rem;
	margin-bottom: 1.2rem;
  }

.menu-mini2{
  font-size:14px;
  line-height:1;
	margin-top: -1px;
}

  /* ++ タブ切り替え部分 ++ */
   /* main article #menu .p-tabs__item {
    width: calc(100% / 2);
    padding: 0 1.73vw 1.73vw 0;
    text-align: center;
  }*/

  main article #menu .p-tabs__item img {}

  main article #menu .to_reservation {
    margin-left: 2.5%;
  }

  /* ++ 価格表部分 ++ */
  main article #menu table.menu_price {
    font-size: 1.8rem;
  }
  
	/* ++ 税抜き価格のみ非表示にする ++ */
.tax_excluded{
display:none;
}

	/* ++ （税抜き）の文字を消す ++ */
#menu table.spa_table .tax_excluded{
display:none;
}

	/* ++ オーガニックヘッドスパのレイアウト崩れ修正 ++ */
#menu table.spa_table td{
display:table-cell;
width:auto;
}

#menu table.menu_price .tax_excluded{
display:none;
}

.spa_effect{
line-height:1.6;
}

#menu table.spa_table tr{
display:block;
margin-bottom:1.2rem;
}

#menu table.spa_table{
  table-layout:fixed;
  width:100%;
}


  /* ++ 当初の設定 ++ */
  
    font-size: min(3.2vw, 1.6rem);
    /*最小で3.2vw・最大で1.6rem ++ IE No support*/



  main article #menu table.menu_price td.tax_included {
    padding-left: 0em;
  }

  main article #menu table.menu_price td.tax_excluded {
    padding-left: 0.5em;
  }

  main article #menu table.spa_table td.spa_effect {
    width: auto;
    padding-left: 0.2em;
    font-size: 1.8rem;
  }

  /* ++ 当初の設定 ++ */
  
    font-size: min(4vw, 1.45rem);
    /*最小で3.2vw・最大で1.45rem ++ IE No support*/
	
	
  /* 追加：フォームレイアウト
--------------------------------------------*/

@media (max-width: 768px) {
  #reserveModal .modal-content {
    width: 95vw;
    height: 90vh;
    padding: 10px;
  }

  #reserveModal iframe {
    height: 100%;
  }
}



  /* I-02-1-c. ヘアスタイルギャラリー
--------------------------------------------*/


  main article #gallery .flex-item {
  display: block;
  justify-content: center;
  margin-top: -1.0rem;
}
 
  main article #gallery .flex-item img {
    width: 75.0vw;
    height: 75.0vw;
	margin-top: 2rem;
  }

  main article #gallery .to_instagram .button {
    height: 8.75vw;
    width: 55.0vw;
    font-size: 4.5vw;
    line-height: 8.75vw;
  }

  main article #gallery .to_instagram img {
    width: 17.5vw;
  }

/*メニューがずれる*/
.menu_text-wrap {
    width: calc(100% + 8%);
    margin-left: -4%;
}

  /* I-02-2. サイドバー
============================================*/
  main aside {
    width: 100%;
    text-align: center;
  }


  /* オーガニックのページ
--------------------------------------------*/

h1.sp {
	display:none;
}

.pc_tab {
	display:none;
}

.organic_top_flex {
    display: block;
    justify-content: space-between;
    width: 97%;
    margin: 0 auto;
    border: 6px solid green;
    padding: 1%;
    background-color: #F7FFF7;
}

.sp_organic_title a {
	font-size: 1.8rem;
}

.organic_top_flex img {
    width:206px;
}

#about_organic .box1 img {
	margin:0 auto;
	padding-top:4%;
	padding-bottom:6%;
}
	
#about_organic .box2 {
    width: 100%;
    padding-left: 2%;
    margin-top: 1%;
    padding-bottom: 5%;
}

#about_organic .box2 h1 {
    line-height: 1.8;
    font-size: 5.3vw;
    padding-top: 0%;
}

#organic_title1 .flexbox,
#organic_title2 .flexbox,
#organic_title3 .flexbox {
  display: flex;
  width: 98%;
  align-items: center;
  text-align: justify;
  margin: 0 auto;
  max-width: 600px;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#organic_title1,
#organic_title2,
#organic_title3 {
background-color: #F7FFF7;
width: 100%;
height: 13vw;
margin: 7% auto 1% auto;
position: relative;
}

#organic_title1 .box1 img,
#organic_title2 .box1 img,
#organic_title3 .box1 img {
  margin-top: 0%;
  width: 42%;
  margin-right:0px;
}

#organic_title1 .box2 p,
#organic_title2 .box2 p,
#organic_title3 .box2 p {
font-size: 130%;
margin-left: -13%;
}

.organic_p {
	width:97%;
font-size: 115%;
line-height: 1.6;
margin-left:2%;
margin-top:2%;
}


  /*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊

          I-03. footerエリア

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/

  footer {
    background-image: url(../images/footer_mushroom.png), url(../images/footer_rack.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 64.1vw 1.875vw, 55vw 100.6vw;
    background-size: 33.12vw auto, 40.94vw auto;
    height: 145vw;
  }

  footer .footer_wrapper {
    width: 100%;
  }

#form table th {
    width: 30%;
}

  /* I-03-1. フッターショップインフォ
============================================*/
  footer img,
  footer iframe {
	max-width: 100%;
	height: auto;
	display: block;
  }

  footer {
	width: 100%;
	overflow-x: hidden;
  }

  footer .footer_shopinfo {
    padding-bottom: 5.5vw;
  }

  footer .footer_shopinfo .shop_name {
    padding-top: 4.7vw;
    margin-left: 7.8vw;
    font-size: 8.43vw;
    line-height: 1.0;
  }

  footer .footer_shopinfo .shop_name span {
    margin-left: -0.5em;
  }

  footer .footer_shopinfo .since {
    margin-left: 16.3vw;
    padding: 2.8vw 0 3.0vw 0;
    font-size: 6.48vw;
    line-height: 1.0;
  }

  footer .footer_shopinfo .adress,
  footer .footer_shopinfo .telephone {
    margin-left: 8.4vw;
    font-size: 5.83vw;
    line-height: 1.3;
  }



  /* I-03-2. フッターナビゲーション
============================================*/
  footer .footer_nav .flex-box {
    flex-direction: column;
  }

  footer .footer_nav .flex-item {
    width: 100%;
  }

  footer .footer_nav {
    margin-top: 4.4vw;
    margin-left: 8.1vw;
    margin-bottom: 5.25vw;
    font-size: 5.5vw;
    line-height: 1.45;
  }



  /* I-03-3. コピーライトエリア
============================================*/
  footer .copyrightarea {
    height: 10.5vw;
    font-size: 4.5vw;
    line-height: 10.5vw;
  }




  /*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊

    aside & footer部分  タブレット用メディアクエリ

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/

  /*width確認*/
  @media screen and (max-width: 767px) and (min-width: 520px) {

    /* I-02-2. サイドバー
  ============================================*/
    main aside {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    main aside .flex_wrapper {
      order: 1;
      width: 48%;
    }

    main aside .friend_introduction {
      order: 2;
      width: 48%;
      align-self: flex-start;
    }

    main aside .shampoo_and_treatment {
      order: 4;
      width: 49%;
      margin-top: -6.0vw;
    }

    main aside .line_registration {
      order: 3;
      width: 51%;
    }

    /* I-03. フッター
  ============================================*/
    footer {
      background-image: url(../images/footer_brick.png), url(../images/footer_mushroom.png), url(../images/footer_rack.png);
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-position: 66.1vw 1.2vw, 4.5vw 32.1vw, 56.1vw 75.7vw;
      background-size: 29.2vw auto, 23.5vw auto, 39.2vw auto;
      height: 117.2vw;
    }

    /* I-03-1. フッターショップインフォ
  ============================================*/
    footer .footer_shopinfo {
      padding-bottom: 5.8vw;
    }

    footer .footer_shopinfo .shop_name {
      padding-top: 3.0vw;
      margin-left: 8.7vw;
      font-size: 8.11vw;
      line-height: 1.0;
    }

    footer .footer_shopinfo .shop_name span {
      font-size: 5.6vw;
      margin-left: -0.5em;
    }

    footer .footer_shopinfo .since {
      margin-left: 13.7vw;
      padding: 3.8vw 0 4.4vw 0;
      font-size: 6.24vw;
      line-height: 1.0;
    }

    footer .footer_shopinfo .adress,
    footer .footer_shopinfo .telephone {
      margin-left: 30.7vw;
      font-size: 5.0vw;
      line-height: 1.25;
    }

    /* I-03-2. フッターナビゲーション
  ============================================*/
    footer .footer_nav .flex-box {
      flex-direction: row;
    }

    footer .footer_nav .flex-item:nth-child(1) {
      width: 56%;
    }

    footer .footer_nav .flex-item:nth-child(2) {
      width: 44%;
    }

    footer .footer_nav {
      margin-top: 4.0vw;
      margin-left: 3.8vw;
      margin-bottom: 4.25vw;
      font-size: 4.0vw;
      line-height: 1.7;
    }

    /* I-03-3. コピーライトエリア
  ============================================*/
    footer .copyrightarea {
      height: 10.0vw;
      font-size: 4.4vw;
    }

  }/* タブレット用メディアクエリここまで */


}