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 300px; /*　隙間 上、右、下、左*/
    box-sizing: border-box;
    top: 0; /*上は0*/
    /*横はセンター*/
   
    display: flex; 
    align-items: center; 
    
   
       /* ロゴとメニューを横並びにする */
   z-index: 2; /* 画像に隠れないようにする */
}

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


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


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


h1 {font-size: 20px;
  color:#0d0701f1;;
font-size: 23px;
  
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", 
               "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
position: absolute; /*文字にabsolute*/
 top: 195px; /*上から20px*/
 margin-left: 30px; /*左から30px*/
 line-height: 1.2;
 text-align:left;
}

@media (max-width : 767px){
  h1 {font-size: 20px;
     top: 180px;
      line-height: 1.1;
      margin-left: 20px;
}
}

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


h2 {display: inline;
  font-family:  serif; 
  font-size: 20px;
  color: #2b0202f1;
}


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


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

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




 /* 途中画面 */
 @media screen and (min-width : 767px) and (max-width : 900px){
  header,
  .menu,
  .menu .nav li{
      width: 100%;
      padding: 0.5px;
      margin: 0px;
      flex-wrap: wrap;/*折り返し*/      
    }
    header {      
      position:fixed;       
      padding: 70px 0px 50px 200px; /*　隙間 上、右、下、左 変えない*/          
    }
    .insta {
      position: absolute;
      top: 15px;
      left:550px;
      display: flex;
    }
         /*ルーセントロゴ縮小*/
         .lucent img {width:260px;}
         .lucent{
           position:fixed; left:180px;  top:5px;            
         }   
      }





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


/* タイトル */
.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;
}
.box15 p {
  margin: 0; 
  padding: 0;
}



/* 写真の説明*/



.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;
  }
    .sub{ margin-left: auto;
  margin-right: auto;}

   .sub-men{ margin-left: auto;
  margin-right: auto;}


}



/*テーブルここまで*/

 /* pc ルーセント位置*/
@media screen and (min-width: 900px) { 
  .lucent{
    position: absolute;
    top:7px;
    left:5px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .lucent img {width:270px;}/*ルーセントロゴ縮小*/
  }
  
 


  /*スマホ設定*/
@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{
              width: 100%;
              position: absolute;
              top: 5px;
              left:40px;
        
              }

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


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

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


            .m_body_text{
  
              text-align:left;
              text-align: center;
              font-size:15px;  }

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

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

/*画像センター*/
@media  screen and(min-width: 768px) {
  .card-img{
     width: 50%
  }
 
}


@media screen and (min-width: 767px){
.br-sp {display: none;}
}
@media screen and (max-width: 767px){
  .br-pc {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;
 }
.text-a{ grid-area: textA; }
.text-b{ grid-area: textB; }
.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";
  }
  
}