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;
  }

/******* ヘッダーのスタイル   Header.css ********/


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

.news {
  display: flex;
}

/* 画像の上に文字をきれいに載せる */
.main-visual {
  display: flex;
  align-items:flex-end;    /* 上下の下 */
  justify-content: center; /* 左右の中央 */
  min-height: 180px;      /* 画像の高さ（適宜調整してください） */
  background-image: url("img_a/12-10.avif"); /*ここに画像の名前を入れる */
  background-size: cover;
  background-position: center;
  
  text-align: center;      /* 文字を真ん中寄せ */
}

/* 文字の読みやすさアップ */
.main-copy {
  color: rgb(255, 252, 245);
  text-shadow: 1px 1px 3px rgb(243, 200, 200);
  line-height: 1.3;

  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3",
  "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E",
  "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

  animation: fadeUp 1.5s ease forwards;
}

/* 隙間をなくす（先ほどの分） */
.h1-main {
  margin: 0;
  font-size:20px;        /* 大きさは好みで調整 */
}

.h1-sub {
  margin: 0;
  margin-top: 4px;       /* 1行目との間隔を少しだけ空ける */
  font-size: 26px;
  line-height: 1.3;
}
@media (max-width : 767px){
.h1-main {
  margin: 0;
  font-size: 15px;        /* 大きさは好みで調整 */
}

.h1-sub {
  margin: 0;
  margin-top: 4px;       /* 1行目との間隔を少しだけ空ける */
  font-size: 20px;
  line-height: 1.3;
}
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}




  /* その他、見やすいように調整 */



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

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

/*お知らせ画像並べ方  PC*/
/* 共通：画像をアニメーションで拡大できるようにする */
/* 共通 */
.items {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.items img {
  
  width: calc(22% - 0px); /* PC 4列 */
  object-fit: cover;
  border-radius: 2px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

/* PC：ホバーで拡大 */
@media (min-width: 767px) {
  .items img:hover {
    
	  transform: scale(1.05); /* 拡大 */
    z-index: 10;
  }
}

/* スマホ：3列 */
@media (max-width: 767px) {  
  .items img {
    margin:  0.6%;
    width: calc(32% ); /* スマホ3列 */
  }
  .items {
  gap: 0px;
}
}

.items img.zoom {
  transform: scale(1.6);
  z-index: 20;

}

/* モーダル（黒背景） */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 拡大画像 */
.modal img {
  max-width: 60%;
  max-height: 60%;
  border-radius: 8px;
}


/*お知らせ　コードここまで*/

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

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

h3 {  font-family:  serif; 
   color: #5d0505bc;
    display:inline;
    font-size: 20px;
      
width: 100%;
  
}

h3 {  font-family:  serif; 
   color: #5d0505bc;
    display:inline;
    font-size: 20px;
      
width: 100%;
  
}

 h4{   
   font-family:  serif; 
   color: #5d0505bc;
    display:inline;
    font-size: 16px;
width: 100%;
 }
 
 .text-con{    padding-left: 10px;  /* 左に20px */
  padding-right: 10px;
  text-align: left;}

 /* pc ルーセント位置*/

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


@media (min-width: 767px) {
h3 {  
   width: 100%;
    display:inline;
    font-size: 22px;
     color: #5d0505bc;
}
 h4{   
   font-family:  serif; 
   color: #5d0505bc;
    display:inline;
    font-size: 20px;
      
width: 100%;
  
}
}

.toiawase {font-size: 18px;}

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

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

ul {
  display: flex;
}

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



.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;
}


.menu_top_text{font-size:18px;
  }



/* Google Map 共通 */
.gmap {
  width: 100%;
  max-width: 500px; /* PCで大きくしすぎない */
  margin: 0 auto;   /* 中央寄せ */
}

.gmap iframe {
  width: 100%;
  height: 285px;
  border: 0;
}


/* スマホ */
@media screen and (max-width: 767px) {
  .gmap iframe {
    height: 200px;
  }

}
    

  /*スマホ設定*/
@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;
            text-align: left;
            
            }

             .title-1 p{
             margin-left: 5px; 
            margin-right:   5px;}


            .lucent{
              position: absolute;
              top: 5px;
              left:10px;
              display: flex;
              }

              .lucent img {width:320px;}/*ルーセントロゴ縮小*/
            .menu_top1 .menu_top2 {font-size :12px;}
              

            /* メニュー表示を上下適正位置*/
            #News,#Menu,#Map{
              display: block;
              margin-top:0px;
              padding-top:15px;
            }
    
            .menu a {
              font-size: 20px; /*ヘッダーの文字サイズ*/
              font-family: 'sans-serif';
           }
       
            .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;
          
        }
    
        .menu-a2 {font-size: 18px;}/*詳細はこちら*/
        .menu{
          line-height:30px;
        }
        
        /* お知らせ拡大画像 */
.modal img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 8px;
}
.siharai {
text-align: left;
margin-left: 5px; 
margin-right:   5px;}

}
          

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

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

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

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


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

  } 
  .sp-space {
    display: block;
    height: 0.6em;   /* ← ここが0.5行分 */
  }
}


/* ここから */

.container {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* PC表示: 横並び（デフォルト） */
  align-items: top; /* 縦方向の上揃え */
  gap: 5px; /* 画像とテキストの間のスペース */
}

.container img {
 
  height: auto;

}


@media screen and (min-width: 767px) {
.price {text-align: left;
  margin-left:400px ;
  margin-top:-250px ;
}
.price-1 {text-align: left;
  margin-left:400px ;
  margin-top:-300px ;

}

}

/* スマホ表示（例: 767px以下） */
@media (max-width: 767px) {
  .container {
    flex-direction: column-reverse; /* スマホ表示: 縦並び */
    /* 画像がテキストの上に表示されるように調整 */
  }
  .price {
    margin:18px; /* 左右マージンを自動に設定 */
  text-align: left; /* テキストは左揃えを維持 */
}
  .price-1 {
    margin-left:18px; /* 左右マージンを自動に設定 */
  text-align: left; /* テキストは左揃えを維持 */
}

.text-con{
   padding-left: 10px;  /* 左に20px */
  padding-right: 10px;
  text-align: left;
}
.container img {

 text-align: center;
}

.text-on{
  padding: 0 0.5rm;
}
}

.toiawase  {margin-left:70px;}

/* お知らせ　画像横　縦 */


.card-img{
  margin: 12px;
  width: 400px;
  height: auto;
}

/*オーナープロフィール*/
@media screen and (max-width: 767px) {
  table,  td, tr {
    display: block;
  }
  table {
    width: 100%;
  }
  tr {
    margin-top: 20px;
  }

  }
 .op-pro {
    padding-left: 10px;  /* 左に20px */
  padding-right: 10px;
  text-align: left;
}
@media (min-width: 767px) {
.op-phot{
  padding-left: 100px;
}
 .op-pro {   padding-left: 10px;  /* 左に20px */
  padding-right: 10px;
 margin-top: -180px;
  text-align: left;
}
}