body {
    max-width: 980px;/*ページの幅 */
    margin: 0 auto;  
    background-color: rgb(255, 252, 245);/* ページ全体の色*/
      margin-inline: auto;
    }

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

header { 
    position:fixed;/*上にスクロールしないための固定*/
    position: -webkit-sticky;
    background-color: rgb(255, 252, 245); /* ヘッダ色 */
    height:460px; /* ヘッダーの高さを指定する */
    display: flex; 
    align-items: center; 
    .lucent img {width:500px;}/*ルーセントロゴ縮小*/
 

}



/* 画像の上に文字をきれいに載せる */
.main-visual {
  display: flex;
  align-items:flex-end;    /* 上下の下 */
  justify-content: center; /* 左右の中央 */
 height: 180px; 
     /* 画像の高さ（適宜調整してください） */
  background-image: url("img_a/15-10.avif") ;width: 980px; /* ここに画像の名前を入れる */
  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: 17px;   
         color:rgb(f,f,f);
   text-shadow: 3px 3px 5px rgb(14, 3, 56);       /* 大きさは好みで調整 */
}

.h1-sub {
  margin: 0;
  margin-top: 4px;       /* 1行目との間隔を少しだけ空ける */
  font-size: 22px;
  line-height: 1.3;
         color:rgb(f,f,f);
   text-shadow: 3px 3px 5px rgb(14, 3, 56);  
}
.ai {
  font-size :14px;}
  


h2 {font-size: 15px;}

ul {font-size: 12px;}
.top-g {
   flex-direction: column; /* 縦並び */
 text-align: center;    /* 中央寄せ */
  gap: 10px;    
 margin-bottom: 70px;   /*ヘッダー　下からの距離*/
}

/* SVG 設定 */
[data-part] {
  fill: #ff6b6b ;
  cursor: pointer;
  transition: 0.2s;
}

[data-part]:hover path {
  fill: #ea7575f6 !important;
}

[data-part].active:hover path {
  fill: #ff6b6b !important;
}

[data-part] path {
  fill: #ff6b6b ;
  transition: 0.2s;
}

[data-part]:hover path {
  fill: #ff9a9a;
}

[data-part].active path {
  fill: #ff6b6b !important;
}

/* スマホ */


/*元の色に戻す*/
[data-part] path {
  transition: 0.2s;
}

[data-part]:hover path {
  filter: brightness(1.1);
}

[data-part].active path {
  filter: brightness(0.85);
  stroke: #ff6b6b;
  stroke-width: 2;
}


/* 表示*/

.svg {
  width: 100%;
}

.svg svg {
  width: 100%;
  height: auto;
  display: block; /* ← これ重要 */
}

/* 表示切替　*/

 /* PC：上にテキスト、下に図1・図2の2カラム */
.body-wrap {
  display: grid;
  grid-template-columns:  1fr 1fr ;
  grid-template-areas:
  
    "front back";
  gap: 50px;/*ギャップで左右の間隔*/
}

/* エリア割り当て */

.svg-front { grid-area: front;}
.svg-back { grid-area: back;}
.svg-front{text-align: right;}/*前を右よせ*/
.svg-back {text-align: left;}/*後ろを左よせ*/


/* SVG のサイズ調整（横幅いっぱい） */
.svg-front svg,
.svg-back svg {
  width: 50%;/*図の大きさ*/
  height: auto;
  margin-top: 470px;/*上からの表示位置*/
}
.set{padding-top: 100px;

}


    

/* 価格固定 */
.price {
  text-align: center;
  position: fixed; 
 top: 385px; /*価格上からの位置*/
  
margin-left: 300px;
  text-align: center;
  

}

.price p {line-height: 0.6;  /* 行間*/
font-size: 18px;
  margin: 5px; 
    padding: 3px;
}


.flex-container {
  display: flex;       /* 子要素を横並びにする */
  align-items: center; /* 縦方向の中央に揃える */
  gap: 25px;           /* 要素同士の間隔（お好みで調整） */
  padding-left: 330px;
}


/*色変え*/
.flash {
  animation: flashColor 0.6s ease;
}

@keyframes flashColor {
  0% {
    color: #ff4d4d;
    transform: scale(1.1);
  }
  50% {
    color: #ff0000;
  }
  100% {
    color: #000;
    transform: scale(1);
  }
}
/*ここまで*/

/* スマホ：全部1列に */
@media (max-width: 768px) {
   header {height:370px; /* ヘッダーの高さを指定する */
     }
  .body-wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
     
      "front"
      "back";
  }

 .top-g{
  padding-bottom:10px;/*ヘッダー下からの位置*/
 }
  .svg-front svg,
  .svg-back svg {
    width: 100%;
    height: auto;
    margin-top: 375px;/*上からの表示位置*/
  }
  .svg-back svg {margin-top: 30PX ;} /*正面　後ろ面ギャップ */

  .price {
  position: fixed; 
  top: 295px; /*価格上からの位置*/
  margin-left:10px;
  font-size: 15px;
  }
  .price p {line-height: 0.5;  /* 行間*/
 
  font-size: 17px;
   
}

img {
  max-width: 100%;  
 }    
 /*LINE 問合せ */
.line {
  width:5em;
  height:1.5em;
  background-color: #28a745;
 color:aliceblue;
 border-radius: 5px;
  font-size: 12px;
  border:0;
}
.mail {
  width:5em;
  height:1.5em;
  background-color: #fff;
 color:rgb(0, 0, 0);
 border-radius: 5px;
  font-size: 12px;
  border:0;
   /*コレ*/border: 2px solid #000;
}
  .kakaku {
  text-align: center;
  margin: 0 auto;
  width: 365px;
  height: 50px;
  border: 2px solid #333; /* 太さ 種類 色 */
  padding: 0px;           /* 枠と文字の間隔 */
    border-radius: 5px;
}
#setBox{margin-left: 5px;
  margin-top: 4px;
  line-height: 1.2;  /* 行間*/
 font-size: 17px;}
#setImage{
  width: 100px;
padding-top: 10px;
  padding-left: 95px;
}
.main-visual {

     width: 100%;
    height: 90px;

}
.h1-main {
  margin: 0;
  font-size: 15px;  
   line-height: 1;  
     line-height: 1.3;  
        color:rgb(f,f,f);
   text-shadow: 3px 3px 5px rgb(14, 3, 56);   /* 大きさは好みで調整 */
}

.h1-sub {
  margin: 0;
  margin-top: 4px;       /* 1行目との間隔を少しだけ空ける */
  font-size: 15px;
  line-height: 1.3;
   line-height: 1.2; 
   color:rgb(f,f,f);
   text-shadow: 3px 3px 5px rgb(14, 3, 56);
}
.flex-container {
  display: flex;       /* 子要素を横並びにする */
  align-items: center; /* 縦方向の中央に揃える */
  gap: 10px;           /* 要素同士の間隔（お好みで調整） */
  padding-left: 40px;
  .siharai {font-size: 14px;

  }
}
}



.btn-g {
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-items: center;
  gap: 15px; /* ← 間隔はこれで管理 */
  margin-top: 0px;
}

/* 共通ボタン */
.btn {

  border-radius: 3px;
 font-size: 15px;
  text-decoration: none;
  font-weight: bold;
}

/* LINE */
.line {
   width:5em;
  height:1.5em;
  background: #008532;
   color: #ffffff;
    font-weight: bold;  
    border: 2px solid #008532;
}

/* MAIL */
.mail {
   width:5em;
  height:1.5em;
  background: #fff;
  color: #000;
   /*コレ*/border: 2px solid #000;
}

/* 戻るリンク */
.back-link {
  color: #333;
  text-decoration: underline;
  font-size: 14px;
}

/* 共通ボタン */
.btn {

  border-radius: 3px;
 font-size: 15px;
  text-decoration: none;
  font-weight: bold;
}
@media screen and (min-width: 767px){
.br-sp {display: none;}
}

.kakaku {
  text-align: center;
  margin: 0 auto;
  width: 365px;
  height: 50px;
  border: 2px solid #333; /* 太さ 種類 色 */
  padding: 0px;           /* 枠と文字の間隔 */
    border-radius: 5px;
}
#setBox{margin-left: 205px;
  margin-top: 4px;
 font-size: 17px;
 line-height: 1.2;  /* 行間*/}
#setImage{
  width: 100px;
  margin-top: 7px;
  padding-left: 35px;
  
}