@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : base.css
Description : 共通
===================================================================== */
/* =====================================================================
    共通（大枠）
======================================================================*/
html {
  min-height: 100vh;
  overflow-x: hidden;
  font-size: calc(10 / 750 * 100vw);
}

.gDef-top-banner {
  background-color: #fff;
}

.wrapper {
  position: relative;
  font-family: YakuHanJP, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 3rem;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #000;
  background-color: #f8f8f8;
  overflow: hidden;
}
.wrapper img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.wrapper a {
  display: block;
  color: #000;
  word-wrap: break-word;
}

section,
main,
header,
footer {
  position: relative;
}

.inner {
  position: relative;
  margin: 0 auto;
  width: calc(710 / 750 * 100%);
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: calc(10 / 1600 * 100vw);
  }
  .wrapper a {
    transition: 0.3s ease;
  }
  .inner {
    width: calc(1240 / 1600 * 100%);
    max-width: 1240px;
  }
  .sp {
    display: none !important;
  }
}
@media screen and (min-width: 1600px) {
  html {
    font-size: 10px;
  }
}
/* =====================================================================
*    header
* =================================================================== */
.header {
  z-index: 10;
}

.mv {
  position: relative;
  width: 100%;
}
.mv h1 {
  width: 100%;
}
.mv a {
  display: block;
  width: 100%;
}

.nav {
  background-color: #202020;
}
.nav_menu {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.nav_menu li {
  position: relative;
  width: 33.3333333333%;
  aspect-ratio: 250/106;
}
.nav_menu li.nav_menu_backnumber a {
  font-size: 3.2rem;
}
.nav_menu li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  font-size: 4.2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0;
  z-index: 1;
}
.nav_menu li a::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/bg_pattern2.jpg) no-repeat center/100% 100%;
  opacity: 0.3;
  z-index: -1;
  transition: 0.3s ease;
}

@media screen and (min-width: 768px) {
  .nav_menu {
    justify-content: center;
    margin: 0 auto;
  }
  .nav_menu li {
    width: 15%;
    max-width: 240px;
    aspect-ratio: 240/106;
  }
  .nav_menu li a:hover {
    color: #e20000;
    box-shadow: 0 0 0 0.4rem #e20000 inset;
  }
  .nav_menu li a:hover::before {
    background-image: url(../images/bg_pattern3.jpg);
  }
}
/* =====================================================================
*    共通
* =================================================================== */
.sec_ttl {
  text-align: center;
  font-family: "Geologica", sans-serif;
  font-size: 20rem;
  font-weight: 900;
  letter-spacing: 0;
}

.btn1 {
  position: relative;
  margin: 0 auto;
  width: 62.4rem;
  padding: 0.7rem;
  background: linear-gradient(135deg, #494949 0%, #000000 37%, #252525 38%, #434343 67%, #000000 100%);
}
.btn1 a {
  position: relative;
  text-align: center;
  padding: 3.2rem 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  color: #fff;
  border: 0.2rem solid #fff;
  box-shadow: 0 0 0 0.7rem #000;
  z-index: 1;
}
.btn1 a::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.3s ease;
  background: linear-gradient(135deg, #b6a12f 0%, #8c7820 37%, #b6a12f 38%, #e3d481 67%, #8c7820 100%);
  opacity: 0;
  z-index: -1;
}
.btn1 a svg {
  position: absolute;
  top: 50%;
  right: 2em;
  width: 0.9em;
  height: 0.9em;
  fill: #fff;
  transform: translateY(-50%) scale(1, -1);
}

.movie_embed {
  position: relative;
  margin: 0 auto;
  padding: 2rem;
  width: calc(680 / 710 * 100%);
}
.movie_embed::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/bg_pattern.jpg) repeat center/100rem auto;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-blend-mode: overlay;
}
.movie_embed_inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie_embed_inner iframe,
.movie_embed_inner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .btn1 a {
    font-size: 2.8rem;
  }
  .btn1 a:hover {
    box-shadow: 0 0 0 0.7rem #8c7820;
  }
  .btn1 a:hover::before {
    opacity: 1;
  }
  .movie_embed {
    width: calc(900 / 1240 * 100%);
  }
}
/* =====================================================================
*    banner
* =================================================================== */
.banner {
  padding: 3rem 0;
  background: #000;
}

.banner_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.banner_list li {
  margin-bottom: calc(20 / 710 * 100%);
  width: calc(540 / 710 * 100%);
}
.banner_list li:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .banner_list li {
    margin: 0 calc(25 / 1240 * 100%) calc(26 / 1240 * 100%);
    width: calc(378 / 1240 * 100%);
  }
  .banner_list li:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
  .banner_list li a:hover {
    transform: scale(1.08);
  }
}
/* =====================================================================
*    footer
* =================================================================== */
.fix_content {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: right;
  z-index: 30;
}

.fix_bnr {
  position: relative;
  margin: 0 0 4rem auto;
  width: auto;
  font-size: 3rem;
}
.fix_bnr_close {
  position: absolute;
  left: -1rem;
  bottom: 12.5rem;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: #353535;
  z-index: 1;
}
.fix_bnr_close::after {
  content: "×";
  position: absolute;
  display: block;
  top: 55%;
  left: 50%;
  font-weight: bold;
  font-size: 0.8em;
  transform: translate(-50%, -55%);
  color: #e6e6e6;
  letter-spacing: 0;
  cursor: pointer;
}
.fix_bnr_content {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  width: auto;
}
.fix_bnr_content a {
  display: block;
  width: 19rem;
  filter: drop-shadow(0 0.8em 1.2em rgba(0, 0, 0, 0.5));
}

.pagetop {
  display: inline-block;
  text-align: center;
  margin-right: 1rem;
}
.pagetop a {
  color: #000;
}
.pagetop svg {
  display: block;
  margin: auto;
  width: 5.5rem;
  height: 6.2rem;
  fill: #000;
  transition: fill 0.3s ease;
}
.pagetop span {
  font-family: "Geologica", sans-serif;
  font-size: 10rem;
  font-weight: 900;
  letter-spacing: -0.05em;
}

@media screen and (min-width: 768px) {
  .fix_bnr_content a:hover {
    opacity: 0.7;
  }
  .pagetop a:hover {
    color: #b7a230;
  }
  .pagetop a:hover svg {
    fill: #b7a230;
  }
}
/* =====================================================================
*    popup
* =================================================================== */
.popup {
  position: fixed !important;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 50;
}
.popup_area {
  display: flex;
  padding: 12rem 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.popup_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
}
.popup_inner {
  position: relative;
  margin: auto;
  align-self: flex-start;
  width: calc(710 / 750 * 100%);
}
@media screen and (max-width: 767px) {
  .popup_movie .popup_inner {
    width: 100%;
  }
}
.popup_close {
  position: absolute;
  top: -4em;
  right: 0;
  width: 3em;
  height: 3em;
  z-index: 3;
}
.popup_close::before {
  content: "";
  display: block;
  width: 1px;
  padding-top: 100%;
  background-color: #fff;
  transform: rotate(60deg);
  margin: 0 auto;
}
.popup_close::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  width: 1px;
  margin: 0 auto;
  padding-top: 100%;
  background-color: #fff;
  transform: rotate(-60deg);
}
.popup_close2 {
  margin: 1em auto 0;
  padding: 0.5em;
  width: 30rem;
  font-size: 16px;
  text-align: center;
  background: #fff;
  color: #fff;
  border: 1px solid #fff;
}
.popup_list {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #000;
}
.popup_list > li {
  position: relative;
  display: none;
  margin: 0 auto;
  padding: 12rem calc(40 / 710 * 100%);
  line-height: 1.666;
  z-index: 2;
}
.popup_movie_embed {
  position: relative;
  padding-top: 56.25%;
}
.popup_movie_embed iframe,
.popup_movie_embed video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .popup_bg {
    cursor: pointer;
  }
  .popup_inner {
    width: 90%;
    max-width: 1240px;
  }
  .popup_movie .popup_inner {
    max-width: 120vh;
  }
  .popup_close {
    cursor: pointer;
  }
  .popup_close2 {
    width: 50rem;
    transition: 0.3s ease;
    cursor: pointer;
  }
  .popup_close2:hover {
    background-color: #b7a230;
  }
  .popup_list > li {
    padding: 8rem calc(65 / 1240 * 100%);
  }
}
/* =====================================================================
    print
======================================================================*/
@media print {
  .mv img,
  .intro_txt img,
  .tver_img img {
    display: none;
  }
}/*# sourceMappingURL=base.css.map */