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:410px; /* ヘッダーの高さを指定する */
   
   
    display: flex; 
    align-items: center; 
    .lucent img {width:500px;}/*ルーセントロゴ縮小*/
 

}
.lucent {
   width: 100%;
}
.top-g {
   flex-direction: column; /* 縦並び */
 text-align: center;    /* 中央寄せ */
  gap: 10px;    
 margin-bottom: 45px;   /*ヘッダー　下からの距離*/
}

/* 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: 465px;/*上からの表示位置*/
}
.set{padding-top: 100px;

}

.price{
    
    margin: 2em 0;
    color: #230202;
    background: #eff9f1fb;
    border-top: solid 2px #5989cf;
    border-bottom: solid 2px #5989cf; 
}
    

/* 価格固定 */
.price {
  text-align: center;
  position: fixed; 
 top: 330px; /*価格上からの位置*/
  background:rgba(242, 242, 238, 0.975);
  z-index: 10;
  text-align: center;
  max-width: 980px;
  font-size: 20px;
 width: 100%;
}

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

.toiawase {padding-right:180px ;}

/* スマホ：全部1列に */
@media (max-width: 768px) {
   header {height:340px; /* ヘッダーの高さを指定する */
     }
  .body-wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
     
      "front"
      "back";
  }
.toiawase {padding-right:180px ;}
 .top-g{
  padding-bottom:35px;/*ヘッダー下からの位置*/
 }
  .svg-front svg,
  .svg-back svg {
    width: 100%;
    height: auto;
    margin-top: 360px;/*上からの表示位置*/
  }
  .svg-back svg {margin-top: 30PX ;} /*正面　後ろ面ギャップ */

    .price {
  
  position: fixed; 
  top: 225px; /*価格上からの位置*/
    
  
  font-size: 15px;
  }
  .price p {line-height: 0.3;  /* 行間*/
 
  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;
}

}



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

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

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

/* LINE */
.line {
   width:5em;
  height:1.5em;
  background: #06c755;
   color: #fff;
}

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