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

/******* ヘッダーのスタイル ********/
.menu-container {
  margin: 0;
}

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

h1 {font-size: 1px;

  color: rgb(255, 252, 245)
}

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

h2 {display: inline;
  font-family:  serif; 
}
h3 {display: inline;
  font-family:  serif; 
  font-size: 20px;
}


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


.menu-container .menu .menu-item {
  flex: 1;
}

.menu-container .menu .menu-item a {
  background: #fff;
  border: 1px solid #ccc;
  border-right: none;
  color: #420818c9;
  display: block;
  padding:  9px 1em;/*メニュー枠大きさ*/
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  font-size: 14px; 
  white-space: nowrap;

}

/* 設定 */
.menu-container .menu .menu-item:nth-child(4) a {
  font-size: 13px; 
  padding: 0em 1em;/*メニュー枠大きさ*/
}

.menu-container .menu .menu-item a:hover {
  background: #ccc;
  color: #ffffff;
}

.menu-container .menu .menu-item:last-child a {
  border-right: 1px solid #ccc;
}




 /* 途中画面 */
 @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;            
         }   
      }


/*ヘッダー　  スマホ設定*/
@media screen and (max-width: 767px) {
  .menu-container .menu {
    flex-wrap: wrap;
    width: 100%;
  }
  .menu-container .menu .menu-item {
    flex: auto;
    width:30%;
  }
  .menu-container .menu .menu-item:nth-child(3n) a {
    border-right: 1px solid #ccc;
  }
  .menu-container .menu .menu-item:nth-child(n + 4) a {
    border-top: none;
  }
  .menu-container .menu .menu-item a {
    background: #fff;
    border: 1px solid #ccc;
    border-right: none;
    color: #420818c9;
    display: block;
    padding: 0.5em 0.5em;/*メニュー枠大きさ*/
    text-align: center;
    text-decoration: none;
  }
  /* フォトギャラリー スマホ設定 */
.menu-container .menu .menu-item:nth-child(4) a {
  display: block;
  line-height:16.5px;
  font-size: 14px; 
  padding:0.1em 0.1em;/*メニュー枠大きさ*/
}

}


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


/* タイトル */
.box15 {
  font-size: 20px;
  width: 300px;
  padding: 0.2em 0.5em;
  margin:0 auto  ;
  color: #2b0202f1;
  background: #ffeaea;
  box-shadow: 0px 0px 0px 10px #ffeaea;
  border: dashed 2px #ffc3c3;
  border-radius: 8px;
}
.box15 p {
  margin: 0; 
  padding: 0;
}

.box4{
  
  width: 300px;
  
  padding: 8px 19px;
  margin:0 auto  ;
  color: #aa7923;
  background: 255, 252, 245;
  border-top: solid 5px #c754d6;
  border-bottom: solid 5px #dfd80c;
}
.box4 p {
    font-size: 20px;
  margin: 0; 
  padding: 0;
    color:#745e2b;
}

/* 写真の説明*/

table{
  box-sizing: border-box;
  border-collapse:collapse;
  margin: 0 auto;
 
  vertical-align:top;
  width: 700px;/*幅*/
}
table th,
table td{
 border: 0px solid #999; 
 text-align:left;
 padding: 4px;
 vertical-align: top;
 font-size: 16px;
 
}


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


@media screen and (max-width : 767px){
    table{
      width: 100%;
    }
    table th,
    table td{
      display: block;
    }
    table th,
    table td{
      border-top: none;    
    }
    table tr:first-child th{
      border-top: 0px solid #999;
    }
    
  }


 /* 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{
              position: absolute;
              top: 5px;
              left:35px;
              display: flex;
              align-items: center;
              justify-content: center;
              }

            .lucent img {width:320px;}/*ルーセントロゴ縮小*/
            .menu_top1 .menu_top2 {font-size :12px;}
            }           
  
            /* メニュー表示を上下適正位置*/
            .box4{
              display: block;
              margin-top:70px;/*タイトルの上からの表示位置*/
              padding-top:3px;
            }
            .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;
      }
   }