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




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

header { 
    position:fixed;/*上にスクロールしないための固定*/
    position: -webkit-sticky;
    background-color: rgb(255, 252, 245); /* ヘッダ色 */
    height: 90px; /* ヘッダーの高さを指定する */
    padding: 4px 300px 0 245px; /*　隙間 上、右、下、左*/
    box-sizing: border-box;
    top: 0; /*上は0*/
    /*横はセンター*/
   
    display: flex; 
    align-items: center; 
    
   
       /* ロゴとメニューを横並びにする */
   z-index: 2; /* 画像に隠れないようにする */
}

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


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


/*ヘッダー　  pc設定*/

/* 画像の上に文字をきれいに載せる */
.main-visual {
  display: flex;
  align-items:flex-end;    /* 上下の下 */
  justify-content: center; /* 左右の中央 */
  min-height: 180px;      /* 画像の高さ（適宜調整してください） */
  background-image: url("img_a/top.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: 25px;
  line-height: 1.3;
}
@media (max-width : 767px){
.h1-main {
  margin: 0;
  font-size: 16px;        /* 大きさは好みで調整 */
}

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


/* top画像 */




h2 {display: inline;
  font-family:  serif; 
  font-size: 20px;
  color: #2b0202f1;
}
 /* pc ルーセント位置*/

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



td, th {
padding: 1px 5px;
 line-height: 1.4; 
}

.toiawase{ font-size: 18px;}

button{
  width:5em;
  height:2em;
  background-color: #28a745;;
 color:aliceblue;
 border-radius: 5px;
  font-size: 20px;
  border:0;
}

.cta-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #f8b6b6, #f28c8c);
  color: #230101;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(182, 146, 146, 0.15);
  transition: 0.2s;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}


/* タイトル */
.box15 {
  font-size: 20px;
  width: 300px;
  padding: 0.2em 0.5em;
  margin:0 auto  ;

  background: #ffeaea;
  box-shadow: 0px 0px 0px 10px #ffeaea;
  border: dashed 2px #ffc3c3;
  border-radius: 8px;
}



/* 写真の説明*/



.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; /* 角が丸くなる */
}


/* PC：横並び */
.wrap{
  display: flex;
  gap: 0px;

}

/* スマホ：縦並び */
@media screen and (max-width: 767px){
  .wrap{
 text-align:center;
    display: block;
  }


}

/* CSS部分: デザインの指定はすべてここで行います */
.price-table {
  border-collapse: collapse; /* 隣り合う枠線を一本にする（重要） */
  width: 100%;               /* 必要に応じて横幅を指定 */
}

/* すべてのセルに1pxの枠線を引く (元の border="1" の代わり) */
.price-table th, 
.price-table td {
  border: 1px solid #333;
  padding: 8px;              /* セル内に少し余白を作ると見やすくなります */
  text-align: left;
}

/* ヘッダー行（一番上）のスタイル設定 */
.price-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* 各パーツの背景色設定 (元の bgcolor の代わり) */
.price-table .part-s {
  background-color: #bee0ef;
}

.price-table .part-m {
  background-color: #ced8c0;
}

.price-table .part-l {
  background-color: #f6ddbf;
}


/* CSS部分: デザインと配色はすべてここでコントロールします */
.men-price-table {
  border-collapse: collapse; /* 枠線を一本にする */
  width: 100%;               /* 表の横幅 */
  margin-bottom: 20px;
}

/* すべてのセルに1pxの枠線を引く */
.men-price-table th, 
.men-price-table td {
  border: 1px solid #333;
  padding: 5px;              /* セル内の余白 */
  text-align: left;
  vertical-align: top;       /* 文字の開始位置を上に揃える */
}

/* 見出し行（一番上）のスタイル設定 */
.men-price-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* 各マスの背景色・文字色の設定（HTMLの bgcolor, font の代わり） */
.men-price-table .menu-face {
  background-color: #ebd4c1;
}
.men-price-table .menu-body-all {
  background-color: #e3e2e1;
}
.men-price-table .menu-beard {
  background-color: #857d6f;
  color: #fff; /* 文字色を白にする（font color="#FFF" の代わり） */
}
.men-price-table .menu-armpit {
  background-color: #bcf5af;
}
.men-price-table .menu-chest {
  background-color: #e5cba7;
}
.men-price-table .menu-neck {
  background-color: #a8bdec;
}
.men-price-table .menu-arm {
  background-color: #eebcbc;
}
.men-price-table .menu-leg {
  background-color: #f5eaaf;
}
/*テーブルここまで*/




  /*スマホ設定*/
@media screen and (max-width : 767px){
        
        img {
          max-width: 100%;  
        } 
        
        header{
            width: 100%;
            padding: 0.5px;
            margin: 0px;
            flex-wrap: wrap;/*折り返し*/
            
          }      
           
          header {      
            position:fixed; 
              height: 130px; /* ヘッダーの高さを指定する */
            padding: 50px 0px 30px 0px; /*　隙間 上、右、下、左 変えない*/          
          }
            .lucent{
              width: 100%;
              position: absolute;
              top: 5px;
              left:20px;
        
              }

            .lucent img {width:320px;}/*ルーセントロゴ縮小*/
             
             .textA {margin-left: 10px;
            margin-right: 10px;}
              .textB {margin-left: 10px;
            margin-right: 10px;}

            /* 1つ目と2つ目の表のCSS  表のスキマ */
.price-table {
  border-collapse: collapse;
  width: calc(100% - 20px); /* 左右に10pxずつ（計20px）隙間を開ける計算 */
  margin: 0 auto 20px auto; /* 表を中央に寄せつつ、下に20pxの隙間を開ける */
}

/* 3つ目のメンズ表のCSS */
.men-price-table {
  border-collapse: collapse;
  width: calc(100% - 20px); /* 左右に10pxずつ（計20px）隙間を開ける計算 */
  margin: 0 auto 20px auto; /* 表を中央に寄せつつ、下に20pxの隙間を開ける */
}

            }           


            /* メニュー表示を上下適正位置*/

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

@media not all and (min-width: 768px) {
  body {width: 100%;}
}

/*画像センター*/


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


 /*ルーセント表示切替*/
 .mapsp { display: none; }

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

      /*グリッド*/
   /* PCレイアウト */
.grid{
 
 place-content: center;
  display: grid;
  grid-template-columns: 1fr 1fr ; /* 左右2列 */
  grid-template-areas:
    "img textA"
    "img textB";
  gap: 10px;
}

.img{ grid-area: img;
 }
.textA,.textB {  text-align: left;
padding-left: 10px; 
  }
@media (min-width: 768px){
  .img{ margin-left:120px ;
 }
}

/* スマホレイアウト */
@media (max-width: 767px){
  .grid{
    grid-template-columns: 1fr; /* 1列 */
    grid-template-areas:
      "textA"
      "img"
      "textB";
  }
  
}
ul{
list-style: none;}