@charset "utf-8";
html {
  font-size: 10px;
}

body {
  margin: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  cursor: auto;
  font-family: "游ゴシック", sans-serif;
  
  /* 範囲選択制御 */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

a {
  text-decoration-line: none;
  align-items: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#top_body {
  position: relative;
  top: -4rem;
}


/* 見出し(見出し名) */
.not_det_size {
  width: 100vh;
  margin: 5vh auto;
}

.heading_name, .detail_heading_name {
  font-size: 2.3rem;
  line-height: 2.5rem;
}


/* 見出し(ひし形) */

.heading {
  width: 26rem;
  height: 8rem;
  text-align: center;
  display: flex;
  margin: 0 auto;
}

.not_detail_heading {
  height: 7vh;
  text-align: center;
  display: flex;
  margin: 3vh 0 3vh 0;
}

.not_det_line {
  width: 100vh;
}

.heading_rhombus {
  margin: 0 auto;
}

.not_detail_cut {
  margin: 1rem 0.1rem 1rem 0;
}

.outer_rhombus {
  width: 2rem;
  height: 2rem;
  border: solid 1px #031A63;
  overflow: hidden;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-right: 1rem;
  margin-left: 1rem;
}

.inner_rhombus {
  width: 2rem;
  height: 2rem;
  padding: 10px;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}


/* 区切り線 */

.l_separator, .s_separator {
  margin: 0 auto;
}

.l_separator {
  width: 63rem;
  border: solid 1px rgba(0, 0, 0, 0.5)
}

.s_separator {
  width: 54rem;
  border: solid 1px rgba(0, 0, 0, 0.3)
}


/* 各画面共通 */

.common_title_img {
  width: 100%;
  height: 40vw;
}

.common_title_img_mini {
  width: 100%;
  height: 20vw;
}

.comp_v_img {
  position: relative;
}

.page_name {
  position: absolute;
  width: 100%;
  left: 0;
  top: calc(50% - 50px);
  text-align: center;
  font-size: 1.8em;
}

.page_name div {
  margin: 1rem auto;
  color: #fff;
}

.page_name_ja {
  letter-spacing: 3px;
}

.page_name_eng {
  letter-spacing: 5px;
}

.place_name {
  position: absolute;
  font-size: 2rem;
  color: #fff;
  top: 37vw;
  right: 3vw;
  z-index: 999;
  letter-spacing: 0.5rem;
  letter-spacing: 0.5rem;
  text-shadow: 1px 0 rgb(0 0 0 / 80%), -1px 0 rgb(0 0 0 / 80%), 0 1px rgb(0 0 0 / 80%), 0 -0.7px rgb(0 0 0 / 50%);
}

/* フェードイン(下から) */


/* 画面外にいる状態 */

.fadein_under {
  opacity: 0.1;
  transform: translate(0, 50px);
  transition: all 500ms;
}


/* 画面内に入った状態 */

.fadein_under.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}


/* フェードイン(上から) */


/* 画面外にいる状態 */

.fadein_over {
  opacity: 0.1;
  transform: translate(0, -50px);
  transition: all 500ms;
}

.image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.enlarged-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* 画面内に入った状態 */

.fadein_over.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

@media screen and (max-width:990px) {
  .body {
    width: 100%;
    margin: 0 auto;
  }
  .heading {
    margin-bottom: 3rem;
  }
  /* 区切り線 */
  .l_separator, .s_separator {
    margin: 0 auto;
  }
  .l_separator {
    width: 70%;
    border: solid 1px rgba(0, 0, 0, 0.5)
  }
  .s_separator {
    width: 54%;
    border: solid 1px rgba(0, 0, 0, 0.3)
  }
}