@charset "UTF-8";

/* 全デバイス共通のCSS（スマホ向け） */
html{
  min-height: 100%;
  /* スマホ、タブレット時にグラデーションのかかりがおかしくなり、下記を上記へ変更 */
  /* height: 100%; */
  font-size: 100%;
}

body{
  /* background-color:#abcc33; */
  /* グラデーション処理、背景一色より見やすい */
  /* 参考サイト：https://codeday.me/jp/qa/20190301/341922.html */
  margin:0;
 background: #abcc33;
 background: -moz-linear-gradient(top,  #abcc33 0%, #c9ffbf 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#abcc33), color-stop(100%,#c9ffbf));
 background: -webkit-linear-gradient(top,  #abcc33 0%,#c9ffbf 100%);
 background: -o-linear-gradient(top,  #abcc33 0%,#c9ffbf 100%);
 background: -ms-linear-gradient(top,  #abcc33 0%,#c9ffbf 100%);
 background: linear-gradient(to bottom,  #abcc33 0%,#c9ffbf 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcc33', endColorstr='#c9ffbf',GradientType=0 );
 background-attachment: fixed;
  /* background: linear-gradient( #abcc33, #c9ffbf 100%); */
  font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  /* font-family: "ヒラギノ角ゴ Pro W3", "メイリオ",'Noto Sans JP', sans-serif; */
  line-height: 1.7;
  color:#333333;
  /* color: #432; */
  
}
a{
  text-decoration: none;
}
img{
  max-width: 100%;
}

.page-header{
  flex-direction: column;
  align-items: center;
}

/* 見出し */
h1{
  text-align: center;
  font-weight: normal;
  margin-top: 30px;
  margin-bottom: 30px;
}
h2{
  margin-top: 30px;
  text-align: center;
}
h3{
  text-align: center;
  font-weight: normal;
  margin-top: 30px;
  margin-bottom: 30px;
}


/* フッター */
/* 最下層に固定されるよう表示
参照：https://www.tipdip.jp/tips_posts/production/2213/ */
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 90vh;
  /* もとは１００だったものを変更。挙動確認 */
  /* min-height: 100vh;   */
  text-align: center;
}
footer {
  text-align: center;
  margin-top: auto;
}
footer a{
  color:#333333;
}
footer a:hover{
  /* 色変え＆半透明 */
  color:#0bd;
  opacity: 0.5;
}
/* スクロールバーの設定 */
p.infobox {
  height: 6.3em;     /* 高さを制限(※) */
  overflow: scroll;  /* スクロールバーを表示(※) */
  border: #006400 1px solid;    /* 枠線を追加 */
  background-color:#a9cc29; /* 背景色を追加 */
  /* background-color:#abcc33;  */
  width: 40%;/* サイズ変更 */
  text-align: center;    /* 中央寄せ */
  margin:  0 auto;            /* 中央寄せ */
  margin-top: 20px;
  font-size: 1rem;
}

/* iframe */
/* Googleマップの整えに使用 */
iframe{
  width: 100%;
}

/* ナビの色指定 */
.sub-nav a{
  color:#432;
}
/* リンクしたときの挙動 */
.sub-nav a:hover{
  /* 色変え＆半透明 */
  color:#0bd;
  opacity: 0.5;
}
/* sub-menu */
.location-info p{
  /* font-weight: bold; */
  margin-right: 10px;;
  margin-left: 10px;
  margin-bottom: 10px;
}
.title_link p{
  font-size: 2rem;
  font-weight: normal;
  margin-bottom: 30px;
}
.title_link a{
  color:#432;
}
.title_link a:hover{
  /* 色変え＆半透明 */
  color:#0bd;
  opacity: 0.5;
}

.main-nav {

  padding: 0;
}
/* ナビの色指定 */
.main-nav a{
  color:#432;
  
}
/* リンクしたときの挙動 */
.main-nav a:hover{
  /* 色変え＆半透明 */
  color:#0bd;
  opacity: 0.5;
}

/* 幅768px以上に適用されるCSS（タブレットサイズ以上） */
@media screen and (max-width:480px){

.main-nav{
  /* 縦に配置（回り込みしてほしい）topページのみ必要、別にクラスを立てる必要あり！ */
  flex-direction: column;
  justify-content: space-around;
  align-content: stretch;
  list-style: none;
}
.main-nav li{
  text-align: center;
  margin-top: 20px;
}
.sub-nav{
  flex-wrap: wrap;
  font-size: 1rem;
  margin-top: 10px;
  list-style: none;
  margin-bottom: 10px;
}
.sub-nav li{
  margin: 0 30px;
  text-align: center;
}
.introduction-contents{
  flex-direction: column;
}
article,
aside{
  width: 100%
}
.introduction-title{
  font-size: 1.375rem;
}
sub-title{
  font-size: 1.375rem;
}
article p{
  margin: 0 7%;
  font-size: 0.875rem;
}
aside p{
  padding: 3px;
  margin: 0 7%;
  font-size: 0.875rem;
}
.room{
  margin: 0 7%;
  width: 85%;
}
/* スクロールボックス設定 */
p.infobox {
width: 80%;/* サイズ変更 */
}
.sub-info{
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 25px;
  list-style: none;
}

}

/* 幅990px以上に適用されるCSS（PCサイズ以上） */
@media screen and (min-width: 768px) {

/* 共通:h1 */
.main-nav{
  margin-top: 100px;
  /* 横並び */
  display: flex;
  justify-content: flex-end;
  font-size: 1.25rem;
}
/* リストの幅指定 */
.main-nav li{
  display: flex;
  margin-right:  auto;
  margin-left: auto;
  text-align: center;
}
/* ナビの色指定 */
.main-nav a{
  color:#432;
}
/* リンクしたときの挙動 */
.main-nav a:hover{
  /* 色変え＆半透明 */
  color:#0bd;
  opacity: 0.5;
}

.sub-nav{
  /* 横並び */
  display:flex;
  justify-content: flex-end;
  font-size: 1.25rem;
  margin-bottom:  36px;
  list-style: none;
}
/* リストの幅指定 */
.sub-nav li{
  margin-right: 36px;
}

  /* introduction
  -----------------------------------------------------------*/
  #introduction {
      height: 100px;
      margin-bottom: 40px;
  }
  #introduction .page-title{
    text-align: center;
  }
  /* 記事部分 */
  article{
    width: 50%;
    margin-left: 30px;
  }
  .introduction-title{
    font-size: 1.375rem;
    font-weight: normal;
  }
  .room{
    width: 50%;
  }

  /* サイドバー */
  aside{
    width: 40%;
    margin-left: 30px;
    margin-right: 30px;
  }
  aside p{
    padding: 3px 3px;
  }
  .introduction-contents{
      display: flex;
      justify-content: space-between;
      margin-bottom: 50px;
  }
  .sub-title{
    font-size: 1.375rem;
    padding: 0 8px 8px;
    border-bottom: 2px #47763c solid;
    font-weight: normal;
  }

/* アクセス、地図 */
#location .wrapper{
  display: flex;
  justify-content: space-between;
}
.location-map{
  width: 80%;
  padding: 0 2%;
}
.location-info{
  width: 30%;
  padding: 0 1%;
  /* margin-bottom: 10px; */
}

/* Games Main Area */
/* 記事 */
article{
  width: 60%;
}
.post-info {
  position: relative;
  padding-top: 4px;
  margin-bottom: 40px;
}
.post-info h2{
  /* padding: 10px 10px; */
  text-align: left;
  margin: 0;
}
.post-info img{
  border-top:  10px;
  margin-right: 10px;
}
/* サイドバー */
aside{
  width: 33%;
}
asid p{
  padding: 12px 10px;
}
.sub-title{
  font-size: 1.25rem;
  padding: 0 8px 8px;
  border-bottom: 2px #0bd solid;
  font-weight: normal;

}
.sub-menu{
  margin-bottom: 60px;
  list-style: none;
}
.sub-menu li{
  border-bottom: 1px #ddd solid;
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  color:  #191970;
}
.sub-menu a{
  color: #432;
  padding: 10px;
  display: block;
}
.sub-menu a:hover{
  color:#0bd;
}
.sub-menu p{
  margin-left: 50px;
  margin-right: 50px;
}
.news-contents{
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
}

/* 幅990px以上に適用されるCSS（PCサイズ以上） */
@media screen and (min-width: 1400px) {
  body{
    /* width:75%; */
    width:1200px;
margin-right: auto;
margin-left : auto;
  }
}