@charset "UTF-8";/* CSS変数の宣言 */
/* テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */

body{
    background-color:#000;
    position:relative;
}

body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#ffffff url('../images/wall.png');
    opacity:0;
    transition:opacity 1.5s ease;
    pointer-events:none;
    z-index:0;
}

body.show-wall::before{
    opacity:1;
}

.area-list{
  padding-left: 0;
  margin: 0.25em;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  gap: 10px;
}

.area-list li{
padding:0.25em 1.5em;
margin: 0.25em;
background:#4E7AB5;
color:#fff;
font-size:1.25em;
border-radius:10px;
width:15em;
  list-style: none;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*↓タイトル部ロゴ↓*/

#main-title h1{
    display:flex;
    align-items:center;
}

#main-title .site-logo{
    width:1.2em;
    height:1.2em;
    margin-right:8px;
    object-fit:contain;
}


/*↓トップページのスライド調整用記述↓*/

.splide__slide {
  max-height:600px;
  overflow:hidden;
}

/*↓スライド1↓*/
.slide01 img {
    width: 100%;
    height: auto;
    max-height: 800px;
    object-fit: cover;
    object-position: top;
}

.slide01.is-active img {
  animation: slide01Move 18s linear forwards;
}

@keyframes slide01Move {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-30%);
  }
}

/*↓スライド2（スクロール無し）↓*/
.slide02 img {
  width: 100%;
    height: 100%;
  object-fit: cover;
}

/*↓スライド3↓*/
.slide03 img {
  width: 100%;
  height: auto;
  max-height: 800px;
  object-fit: cover;
  object-position: top;
}

.slide03.is-active img {
  animation: slide03Move 18s linear forwards;
}

@keyframes slide03Move {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-30%);
  }
}

/*↓スライド4（スクロール無し）↓*/
.slide04 img {
  width: 100%;
    height: 100%;
  object-fit: cover;
}

/*↓スライド5↓*/
.slide05 img {
  width: 100%;
  height: auto;
  max-height: 800px;
  object-fit: cover;
  object-position: top;
}

.slide05.is-active img {
  animation: slide05Move 18s linear forwards;
}

@keyframes slide05Move {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-30%);
  }
}

/*↓スライド6（スクロール無し）↓*/
.slide06 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

header,
main,
footer{
    position:relative;
    z-index:1;
}

/* 解説文下の横線 */

#intro hr{
    border: none;
    height: 1px;
    background: #000;
}

/* 背景表示後は通常色 */

body.show-wall #intro hr{
    background: #cccccc;
}

/* 解説文文字色の切替 */

#intro .intro-txt{
    color:#ffffff;
    transition:color 1.5s ease;
}

body.show-wall #intro .intro-txt{
    color:#000000;
}