body {
    width: 980px;/*ページの幅 */
    margin: 0 auto;
    padding-top: 75px;/* ヘッダーの高さ分の余白をいれ、うしろの要素が隠れないようにする */
    background-color: rgb(255, 252, 245);/* ページ全体の色*/
    }


/******* ヘッダーのスタイル ********/

header { 
    position:fixed;/*上にスクロールしないための固定*/
    
    background-color: rgb(255, 252, 245); /* ヘッダ色 */
    height: 90px; /* ヘッダーの高さを指定する */
    padding: 4px 300px 0 300px; /*　隙間 上、右、下、左*/
    box-sizing: border-box;
    top: 0; /*上は0*/
    /*横はセンター*/
    
    display: flex; 
    align-items: center; 
    
}
html { /*ヘッダーに隠れる　85px 指定*/
  scroll-padding-top: 85px;
  }

/******* ヘッダーのスタイル ********/
.menu-container {
  margin: 0;
}

.menu-container .menu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-container .menu .menu-item {
  flex: 1;
}

.menu-container .menu .menu-item a {
  background: #fff;
  border: 1px solid #ccc;
  border-right: none;
  color: #420818c9;
  display: block;
  padding:  9px 1em;/*メニュー枠大きさ*/
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  font-size: 14px; 
  white-space: nowrap;

}

/* フォトギャラリー設定 */
.menu-container .menu .menu-item:nth-child(4) a {
  font-size: 13px; 
  padding: 0em 1em;/*メニュー枠大きさ*/
}


.menu-container .menu .menu-item a:hover {
  background: #ccc;
  color: #ffffff;
}

.menu-container .menu .menu-item:last-child a {
  border-right: 1px solid #ccc;
}

/*ヘッダー　  スマホ設定*/
@media screen and (max-width: 767px) {
  .menu-container .menu {
    flex-wrap: wrap;
    width: 100%;
  }
  .menu-container .menu .menu-item {
    flex: auto;
    width:30%;
  }
  .menu-container .menu .menu-item:nth-child(3n) a {
    border-right: 1px solid #ccc;
  }
  .menu-container .menu .menu-item:nth-child(n + 4) a {
    border-top: none;
  }
  .menu-container .menu .menu-item a {
    background: #fff;
    border: 1px solid #ccc;
    border-right: none;
    color: #420818c9;
    display: block;
    padding: 0.2em 0.5em;/*メニュー枠大きさ*/
    text-align: center;
    text-decoration: none;
  }
  /* フォトギャラリー スマホ設定 */
.menu-container .menu .menu-item:nth-child(4) a {
  display: block;
  line-height:16.5px;
  font-size: 14px; 
  padding:0.1em 0.1em;/*メニュー枠大きさ*/
}



html { /*ヘッダーに隠れる　85px 指定*/
  scroll-padding-top: 90px;
  }
}


/******* ここからメインエリアのスタイル ********/
main {
    text-align:center; /*画像　テキスト位置中央*/
}

.news {
  display: flex;
}

h1 {font-size: 1px;
 color:  rgb(255, 252, 245);

}

h4 {display: inline;
    font-family:  serif; 
}

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

h5 {display: inline;
    font-family:  serif; 
}
.img-box {
   text-align:center;
}



h2 {  font-family:  serif; 
   color: #B78000;
   text-align: center ;
   text-decoration: none;

   /*padding-top: 85px;/*の上下の間隔*/
}
h3 {  font-family:  serif; 
   color: #B78000;
   text-align: center ;
   text-decoration: none;

   /*padding-top: 85px;/*の上下の間隔*/
}

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

.title-1 {text-decoration: none;
  font-size: 20px;
  color: #420818c9;
}

ul {
  display: flex;
}

/*ボディートフェシャル　メニュー　文字*/


.menu-a1 {   /*枠色 */
  font-size: 22px;
  color: #de4018c9;
    font-family:  serif; 
}

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

.menu-a2 {font-size: 20px;/*詳細はこちら*/

display: inline-block;
background-color: #ffeaea;
color: #2b0202f1;
padding: 0.5rem 1.5rem;
text-decoration: none;
cursor: pointer;
border-radius: 8px; /* 角が丸くなる */
}

.m_body a {font-size:17px;}


li{       /*点表示削除 */
  list-style:none;
}

.m_body{
  border-radius:10px; width:300px;
  /*ボデー フエイシャル センター*/
  display:inline-block;
  padding: 0.5em 1em;
  
  font-weight: bold;
  border: solid 3px #c55b19;/*線*/
  border-radius: 10px;/*角の丸み*/
}

.m_body_text{
  padding-left: 100px;/*左からの位置*/
  text-align:left;
  font-size:18px;
  color: #180701d4;/*文字色*/  
}

.menu_top_text{font-size:18px;
  }

.m-t-text{font-size:20px;
  color: #320dd6d4;}

.m-t-text-1{font-size:19px;  
  color: #600909fd;}

.menu-a0 {
  font-size:22px;color: #de4018c9;
  text-align: center
}

/*ボディー　フェンシャル　文字隙間*/
.sukima-1 {padding-left: 5px;
 
}


/*写真と文字の交互*/
@media (max-width: 767px) {
  .card {
    flex-direction: column;
  }
}



/*google map*/

@media (min-width: 768px) {
.gmap {
    position: absolute;
    width: 60%;
    height: 0;
      right: 0;
  left: 0;
  margin: 0 auto;
    padding-top: 60%;  }
}



@media (max-width: 767px) {
.gmap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 60%;  }
}

.gmap iframe {
    position: absolute;
    top: 0;
    width: 100%;
    height: 70%;
}

  
/* スマホ写真の説明*/
@media screen and (max-width : 767px){
table{
  box-sizing: border-box;
  border-collapse:collapse;
  margin: 0 auto;
  text-align: center;
  width: 600px;
}
table th,
table td{
 /* border: 1px solid #999; スマホテーブル枠　縦線*/
  padding: .5em 1em;
 
}
/* スマホ　テーブルバックの色
table th{
  background: #eee;
}*/
}

@media (max-width: 767px) {
    table{
      width: 375px;
    }
    table th,
    table td{
      display: block;
    }
    table th,
    table td{
      border-top: none;    
    }
    table tr:first-child th{
      border-top: 0px solid #640707;
    }
  }
  
  .sukima-1 { text-align: left; 
                          } 
                          
  table td{/*メニューの説明文*/
    border: 0px solid #999; /*tableの枠色*/
    padding: 10px 3px;
    font-size:16px;
    vertical-align :top

 
}
  
  

 /* 途中画面 */
 @media screen and (min-width : 767px) and (max-width : 900px){
  body{ padding-top: 115px;}/*スライド上からの高さ 変えない*/
  img {
    max-width: 100%;  
  } 
  header,
  .menu,
  .menu .nav li{
      width: 100%;
      padding: 0.5px;
      margin: 0px;
      flex-wrap: wrap;/*折り返し*/      
    }
    header {     
      height: 115px; /* ヘッダーの上からの高さを指定する */ 
         
      padding: 65px 0px 0px 200px; /*　隙間 上、右、下、左 変えない*/   
             
    }


    .insta {
      position: absolute;
      top: 15px;
      left:550px;
      display: flex;
    }
    
         /*ルーセントロゴ縮小*/
         .lucent img {width:260px;}
         .lucent{
           position:fixed; left:180px;  top:5px;            
         }   

         h3 {
          color: #B78000;
          text-align: center ;
          text-decoration: none;
          /*padding-top: 110px;/*h3の上下の間隔*/
       }
       html {
        scroll-padding-top: 110px;
        }
      }
      
/* pc インスタ位置*/
@media screen and (min-width: 900px) { 


    /* pc ルーセント位置*/
    .lucent{
      position: absolute;
      top: 7px;
      left:5px;
      display: flex;
      align-items: center;
      justify-content: center;
      }
      .lucent img {width:270px;}/*ルーセントロゴ縮小*/
  }
  


  /*スマホ設定*/
@media screen and (max-width : 767px){
 body{ padding-top: 135px;}/*変えない*/
        img {
          max-width: 375px;  
        } 
        
        header,
        .menu,
        .menu .nav li{
            width: 100%;
            padding: 0.5px;
            margin: 0;
           flex-wrap: wrap;
            
          }
          #menu li a {
            margin: 0;
          }      
           
            header {      
             
                height: 130px; /* ヘッダーの高さを指定する */
              padding: 50px 0px 50px 0px; /*　隙間 上、右、下、左*/          
            }
            
            .title-1{
            font-size :16px;
            }

            .lucent{
              position: absolute;
              top: 5px;
              left:35px;
              display: flex;
              align-items: center;
              justify-content: center;
              }

              .lucent img {width:320px;}/*ルーセントロゴ縮小*/
            .menu_top1 .menu_top2 {font-size :12px;}
              
        
    
            /* メニュー表示を上下適正位置*/
            #News,#Menu,#Map{
              display: block;
              margin-top:0px;
              padding-top:15px;
            }
            /*h3 {
              padding-top: 95px;/*の上下の間隔
           }*/
            .menu a {
              font-size: 20px; /*ヘッダーの文字サイズ*/
              font-family: 'sans-serif';
           }
           h3 { font-size: 20px; }
           .m-t-text{font-size:18px;
            color: #320dd6d4;}

            .m_body_text{
  
              text-align:left;
              text-align: center;
              font-size:15px;
        }
        /*フェンシャル　ボディーケアの表示*/
        .m_body_text{
          padding: 0px;/*左からの位置*/
          text-align:left;
          font-size:15px;
          color: #180701d4;
          
        }
        .sukima-1 {padding-left: 5px;
 
        }
        .menu-a2 {font-size: 18px;}/*詳細はこちら*/
        .menu{
          line-height:30px;
        }
        }
      

/* 地図表示切替 */
 .mapsp { display: none; }

  @media not all and (min-width: 768px) {
      .mappc {
       display: none;
       }
      .mapsp {
       display: block;
       }
    }
  

  /*News の上からの高さ*/ 

@media not all and (min-width: 768px) {
  body {width: 100%;}
  .menu_top1{font-size:10px}
}

/*画像センター*/
@media  screen and(min-width: 768px) {
  .card-img{
     width: 50%;
  }
 
}


@media screen and (min-width: 767px){
.br-sp {display: none;}
}
@media screen and (max-width: 767px){
  .br-pc {display: none;} 
}

/* スライド　pc*/
@media screen and (min-width: 900px) { 
.marquee-right {
	overflow: hidden;
}
.marquee-right ul {
	animation: marquee-right 30s linear infinite;
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
  height: 200px;/*画像の高さ*/
    
}
.marquee-right ul li {
	list-style: none;
	padding: 0 5px;
	width: calc(100vw / 3 - 10px);
}
.marquee-right img {
	display: block;
	width: 100%;
}
@keyframes marquee-right {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}
}

/* スライド　スマホ用*/
@media screen and (max-width: 767px) {
  .marquee-right {
    overflow: hidden;
  }

  .marquee-right ul {
    animation: marquee-right 25s linear infinite;/*時間*/
    display: flex;/*横並べ*/
    margin: 0 auto;
    padding: 0px;/*上からの距離*/
    height: 150px;/*画像の高さ*/
    
    }
  .marquee-right ul li {
    list-style: none;
    padding: 0 5px;
    width: calc(100vw / 3 - 10px);
    
  }
  .marquee-right img {
    display: block;
    width: 375px;
    
  }
  @keyframes marquee-right {
    from {
      transform: translateX(-40%);/*スライドズレ調節変えない*/
    }
    to {
      transform: translateX(-290%);/*繰り返しの幅 変えない*/
    }
  }
  
}
 /* スライド途中画面 */
 @media screen and (min-width : 767px) and (max-width : 900px){
  .marquee-right {
    overflow: hidden;
  }

  .marquee-right ul {
    animation: marquee-right 20s linear infinite;/*時間*/
    display: flex;/*横並べ*/
    margin: 0 auto;
    padding:0px;/*上からの距離*/
    height: 170px;/*画像の高さ*/
    
    }
  .marquee-right ul li {
    list-style: none;
    padding: 0 5px;
    width: calc(100vw / 3 - 10px);
    
  }
  .marquee-right img {
    display: block;
    width: 100%;
    
  }
  @keyframes marquee-right {
    from {
      transform: translateX(-10%);/*スライドズレ調節*/
    }
    to {
      transform: translateX(-120%);/*繰り返しの幅*/
    }
  }
  
}