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; /* 画像に隠れないようにする */
}

/******* ここからメインエリアのスタイル ********/

/*ヘッダー　  pc設定*/
.menu-container .menu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}



/* 画像の上に文字をきれいに載せる */
.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(75, 54, 54);
  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: 26px;        /* 大きさは好みで調整 */
}


@media (max-width : 767px){
.h1-main {
  margin: 0;
  font-size: 16px;        /* 大きさは好みで調整 */
}

}
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* top画像 */
.image-container {
  width: 100%; /* 画面幅に合わせてコンテナの幅を調整 */
  height: 160px; /* 好きな高さ（表示したい領域の高さ） */
  overflow: hidden; /* はみ出た部分を非表示にする */
  position: relative; /* 必要に応じて、position: absolute;と組み合わせる */
   position: relative; /*親要素にrelative*/
}



h2 {
  font-family:  serif; 
  font-size: 20px;
   color: #420818c9;
   text-align: center;
  
}

h3 {display: inline;
  font-family:  serif; 
  font-size: 18px;
  color: #420818c9;
}

@media (min-width : 768px){
.qa {
  text-align: left;
   padding-left: 150px
}
}
@media (max-width : 767px){
dl {
  text-align: left;
  
}
}


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

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

.toiawase{ font-size: 18px;}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* これがトリミングの肝！ */
   object-position: left; /* center 中央を基準にする（デフォルト） */
}

/*LINE 問合せ */
button{
  width:5em;
  height:2em;
  background-color: #008532;;
 color:#ffffff;
 border-radius: 5px;
  font-size: 20px;
  border:0;
   font-weight: bold;
}


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


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

            .lucent img {width:320px;}/*ルーセントロゴ縮小*/
            .menu_top1 .menu_top2 {font-size :12px;}
            .qa {
  text-align: center;
   
}
             .qa {margin-left: 8px;
            margin-right: 8px;}
}
                  


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

            .menu a {
              font-size: 20px; /*ヘッダーの文字サイズ*/
              font-family: 'sans-serif';
           }



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

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


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

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