@charset "UTF-8";
/*
カラー・フォント定義
*/
/* =========================== 共通 =========================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

select::-ms-expand {
  display: none; }

a {
  color: #d18a00;
  text-decoration: none; }
  a:hover {
    color: #d18a00;
    text-decoration: underline; }

ul {
  list-style-type: none; }

body {
  font-family: "Noto Sans JP", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  color: #fff;
  background-color: #fff;
  position: relative;
  font-size: 16px;
  line-height: 1;
  padding: 0px; }

/* =========================== 汎用スタイル =========================== */
@media only screen and (min-width: 960px) {
  .pc {
    display: block; } }
@media only screen and (max-width: 768px) {
  .pc {
    display: none; } }

@media only screen and (min-width: 960px) {
  .sp {
    display: none; } }
@media only screen and (max-width: 768px) {
  .sp {
    display: block; } }

.mb8 {
  margin-bottom: 8px !important; }

.mb12 {
  margin-bottom: 12px !important; }

.mb16 {
  margin-bottom: 16px !important; }

.mb24 {
  margin-bottom: 24px !important; }

.mb32 {
  margin-bottom: 32px !important; }

.mb48 {
  margin-bottom: 48px !important; }

.mb64 {
  margin-bottom: 64px !important; }

.mb96 {
  margin-bottom: 96px !important; }

.mb128 {
  margin-bottom: 128px !important; }

.sub-font {
  font-family: "Kiwi Maru"; }

.fadein {
  opacity: 0;
  transform: translate(0, 40px);
  transition: all 1000ms; }

/* 画面内に入った状態 */
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
  transition-timing-function: ease-in-out; }

/* =========================== 汎用スタイル end=========================== */
.bottom-text {
  width: 100%;
  padding: 48px 24px 0px 24px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7); }
  @media only screen and (max-width: 768px) {
    .bottom-text {
      padding: 24px 12px 0px 12px; } }
  .bottom-text h2 {
    color: #fff;
    font-size: 40px;
    text-align: center;
    margin: 0px 0px 48px 0px; }
    @media only screen and (max-width: 768px) {
      .bottom-text h2 {
        font-size: 20px;
        margin: 0px 0px 32px 0px; } }
    .bottom-text h2 span {
      color: #d18a00; }
  .bottom-text .detail-text {
    font-size: 24px;
    line-height: 1.6;
    padding: 0px 8% 0px 8%;
    margin: 0px 0px 48px 0px; }
    @media only screen and (max-width: 768px) {
      .bottom-text .detail-text {
        font-size: 14px;
        margin: 0px 0px 24px 0px;
        padding: 0px 0px; } }
    .bottom-text .detail-text span {
      color: #d18a00; }
  .bottom-text p {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 24px;
    padding: 0px 0px 48px 0px;
    position: relative;
    cursor: pointer;
    margin: 0px auto;
    width: 160px; }
    @media only screen and (max-width: 768px) {
      .bottom-text p {
        width: calc(100% - 261px);
        font-size: 16px;
        padding: 0px 0px 54px 0px;
        text-align: center;
        margin: 0px 0px 0px 0px; } }
    .bottom-text p::after {
      content: "";
      position: absolute;
      width: 1px;
      height: 36px;
      background-color: #fff;
      left: 50%;
      bottom: 0px; }
      @media only screen and (max-width: 768px) {
        .bottom-text p::after {
          height: 46px;
          left: 50%; } }

.base-container {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  position: relative;
  border-bottom: 3px solid #0a0809; }
  .base-container h2 {
    font-family: "Kiwi Maru";
    font-weight: 300;
    font-size: 36px;
    color: #fff;
    background-color: #592478;
    padding: 24px 64px;
    position: absolute;
    left: 0;
    top: 20%; }
    @media only screen and (max-width: 768px) {
      .base-container h2 {
        top: 10%;
        font-size: 24px;
        padding: 12px 18px; } }

.mv {
  width: 100%;
  height: 100vh;
  background-image: url("../img/mv-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  position: relative;
  border-bottom: 3px solid #0a0809; }
  .mv h1 {
    position: absolute;
    left: calc(50% - 45px);
    width: 90px;
    padding: 48px 24px;
    background-color: #592478; }
    @media only screen and (max-width: 768px) {
      .mv h1 {
        left: calc(50% - 30px);
        width: 60px;
        padding: 32px 12px; } }
    .mv h1 img {
      width: 100%;
      height: auto; }

.box01 {
  background-image: url("../img/01-bg.webp"); }

.box02 {
  background-image: url("../img/02-bg.webp"); }
  @media only screen and (max-width: 768px) {
    .box02 {
      background-image: url("../img/02-bg-sp.webp"); } }

.box03 {
  background-image: url("../img/03-bg.webp"); }

.box04 {
  background-image: url("../img/04-bg.webp");
  background-position: center center; }

.box05 {
  background-image: url("../img/05-bg.webp");
  background-position: center center; }
  @media only screen and (max-width: 768px) {
    .box05 {
      background-image: url("../img/05-bg-sp.webp"); } }

.box06 {
  background-image: url("../img/06-bg.webp");
  background-position: top right; }
  @media only screen and (max-width: 768px) {
    .box06 {
      background-image: url("../img/06-bg-sp.webp"); } }
  .box06 .bottom-text {
    padding-bottom: 64px; }
  @media only screen and (max-width: 768px) {
    .box06 h2 {
      font-size: 18px; } }

.shoo-bnr {
  position: fixed;
  bottom: 13px;
  right: 82px;
  width: 320px;
  height: 74px;
  font-size: 28px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-image: url("../img/bnr-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-flex-direction: column;
  /* Safari */
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
  -webkit-align-items: center;
  /* Safari */
  align-items: center;
  justify-content: center; }
  @media only screen and (max-width: 768px) {
    .shoo-bnr {
      bottom: 10px;
      right: 62px;
      width: 200px;
      height: 63px;
      font-size: 18px; } }
  .shoo-bnr:hover {
    color: #fff;
    text-decoration: none;
    opacity: 0.7; }
  .shoo-bnr strong {
    width: 100%;
    display: block;
    margin: 0px 0px 8px 0px;
    text-shadow: 1px 1px 5px #000; }
  .shoo-bnr span {
    width: 100%;
    display: block;
    font-size: 14px;
    text-shadow: 1px 1px 5px #000; }
    @media only screen and (max-width: 768px) {
      .shoo-bnr span {
        font-size: 10px; } }

.gotoTop {
  width: 72px;
  position: fixed;
  bottom: 13px;
  right: 0px;
  background-color: #663333;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.2;
  padding: 8px 10px;
  text-align: center; }
  @media only screen and (max-width: 768px) {
    .gotoTop {
      bottom: 10px;
      width: 54px;
      font-size: 10px;
      padding: 6px 4px; } }
  .gotoTop img {
    width: 80%;
    height: auto;
    margin: 0px 0px 0px 0px; }
    @media only screen and (max-width: 768px) {
      .gotoTop img {
        margin: 0px 0px 0px 0px; } }
  .gotoTop:hover {
    color: #fff;
    opacity: 0.8; }