body{
  margin: 0 30px;
}

*{
  font-family: 'Noto Serif JP', serif;
}

/* 全体のbox定義 */
.opening-box-area{
position: relative;
max-width: 100%;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.opening-box-area .bgImg {
    position   : absolute;
    top        : 0;
    left       : 0;
    bottom     : 0;
    right      : 0;
    opacity    : 0;
    animation  : bgAnime 10s infinite;   /* 4画像 × 各5s = 20s */
  }
  
  /* --- 段差で背景画像のアニメーションを実行 ----------------- */
  .opening-box-area .src1 {
    background-image : url(../images/opening1.jpg);   /* 背景の画像を指定 */
    background-repeat: no-repeat;
    background-size: cover;
  }
  .opening-box-area .src2 {
    background-image : url(../images/opening2.jpg);   /* 背景の画像を指定 */
    background-repeat: no-repeat;
    animation-delay  : 2s;
    background-size: cover;
  }
  
  
  @keyframes bgAnime {
     0% { opacity: 0; }
     5% { opacity: 1; }
    25% { opacity: 1; }
    30% { opacity: 0; }
   100% { opacity: 0; }
  }
  

  .loaded {
    opacity: 0;
    visibility: hidden;
  }
  /* --- 前面の文字定義（サンプルのため変更してください） ----- */
  /* .box .boxString{
    position   : absolute;
    display    : inline-block;
    padding    : 20px;
    background : rgba(0, 127, 255, 0.7);          
    color      : #fff;
    top        : 50%;                               
    left       : 50%;
    transform  : translate(-50%,-50%);
    z-index    : 11;
  } */

#global_nav{
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin-bottom: 20px;
}

#global_nav.m_fixed{
  right: 0;
  top:   0;
  position: fixed;
}

#global-nav .inner {
  padding-bottom: 0;
  padding-top: 0;
  max-width: 100%;

}

.global-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

.global-item {
  border-left: 1px solid #fff;
  width: 5%;
}

.global-item:last-child {
  border-right: 1px solid #fff;
  margin-right: 0;
}

.footer-contents{
  display: flex;
}

.logo-links{
  writing-mode: vertical-rl;
}

.introduction-text{
  margin-top: 80px;
  background-color: rgb(223, 227, 230);
  width: 100%;
  padding: 30px;
}

.introduction-thought{
  writing-mode: vertical-rl;
  
  margin: 0 0 0 auto;
}

.item-container-1{
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
}

/* 中央揃えの要望あれば */

/* .miso-pic > p{
  text-align: center;
}

.shouyu-pic > p{
  text-align: center;
}

.gift-pic > p{
  text-align: center;
} */

.introduction-images{
  display: flex;
}

.item-container-2{
  padding-top:20px ;
  border-top: solid 1px rgb(223, 227, 230);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 70px;
}

.item-contents-2 {
  width: 30%;
}

.informations{
  display: flex;
  flex-direction: row;
}

.info-1{
  width: 40%;
    flex-shrink: 0;
    margin-left: auto;
}

.info-1 li{
  list-style-type: none;
}

.info-2{
  display: table;
  flex-flow: row;
  width: 50%;
  flex-wrap: wrap;

}

.table-row{
  display: table-row;
}

.info-box{
  display: table-cell;
  margin: auto;
  border: solid 1px rgb(223, 227, 230);
  width: 300px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

footer{
  margin-top: 40px;
  display: flex;
  flex-flow: column;
  text-align: center;
  justify-content: space-around;
}

.footer-contents{
  display: flex;
  justify-content: space-around;
}
.footer-contents > p{
  margin: 10px;
}

a{
  color: inherit;
}

.main-dev{
  display: flex;
}

.miso-story{
  border: solid 15px rgb(223, 227, 230);
  margin-top: 20px;
  margin-bottom: 20px;
}

.lr-wrapper{
  margin: 0 auto;
  display: flex;
}

.left-column{
  width: 40%;
}

.right-column{
  width: 60%;
}

/* main{
  margin-left: 200px;
  margin-right: 200px;
} */