@charset "UTF-8";

/*!
 * タイトルなど
 *
 * Copyright (C) ●●など
 */

/*********************************
	ヘッダーの設定
*********************************/

/*------　ヘッダーの設定 -------*/

/* ここにコメントを追記 */

/* ===========================================
 * MAIN
 * ======================================== */

/* sub */
/* ======================================== */

/* カラースキームの定義 */
:root {
  --primary-color: #113966;
  /* 濃い青色 */
  --secondary-color: #cde4ff;
  /* 明るい青色 */
  --text-color: #000;
  /* 文字色＝黒色 */
  --background-color: #fff;
  /* 背景＝白色 */
}

@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap");

:root {
  --easing: cubic-bezier(.2, 1, .2, 1);
  --transition: .8s var(--easing);
  --color-base: #f8f8f8;
  --color-gray: #ddd;
  --color-theme: #f5695f;
  --color-theme-darken: #f12617;
  --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
  --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
  --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
  --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff, .2);
}

html {
  font-family: "Spartan", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  font-size: 62.5%;
  line-height: 1.8;
  height: 100%;
  word-break: break-word;
  color: #333;
  background-color: var(--color-base);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* CSS変数を使用して色を指定 */
body {
  background-color: var(--primary-color);
  background-color: var(--secondary-color);
  background-color: var(--text-color);
  background-color: var(--background-color);

  color: var(--primary-color);
  color: var(--secondary-color);
  color: var(--text-color);
}

a {
  color: var(--text-color);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* スマホ揺らぎ確認用CSS */
/* *,
*::after,
*::before {
  outline: 1px solid rgb(234, 4, 234);
  opacity: 1 !important;
} */

body {
  background-color: #ffffff;
  font-size: 1.6rem;
  margin: 0;
}

a {
  text-decoration: none;
}

img {
  width: 100%
}

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

::-moz-selection {
  color: #fff;
  background: var(--color-theme);
}

::selection {
  color: #fff;
  background: var(--color-theme);
}

figure {
  margin: 0;
}

/* ボタンCSSリセット */
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

/* コピペ用コード */
.font-size-dummy {
  font-size: .75rem;
  /* 12px */
  font-size: .8125rem;
  /* 13px */
  font-size: .875rem;
  /* 14px */
  font-size: 1rem;
  /* 16px */
  font-size: 1.25rem;
  /* 20px */
  font-size: 1.75rem;
  /* 28px */
}

/* スマホ用コード */
.pc {
  display: none;
}

.sp {
  display: block;
}

.mainVisual {
  border-top: 1px solid #eee;
  position: relative;
}

.mainVisual h1 {
  margin: 0;
  position: absolute;
  /* top: calc(50% - 0.5em); */
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  /* -webkit- transform: translateY(-50%) translateX(-50%); */
  width: 100%;
  text-align: center;
  line-height: 1.5;
  font-size: 10vw;
  font-family: "Montserrat", sans-serif;
  text-shadow: 2px 2px 0 #fff;
  color: #c9171e;
  z-index: 3;
}

[class*=swiper]:focus {
  outline: none;
}

.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}

.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
}


.swiper-button-prev,
.swiper-button-next {
  display: grid;
  place-content: center;
  width: 6.4rem;
  height: 6.4rem;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.swiper-button-prev::before,
.swiper-button-next::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  border-radius: 50%;
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  border: solid var(--color-gray);
  border-width: 3px 3px 0 0;
}

.swiper-button-prev::after {
  margin-left: 0.4rem;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.swiper-button-next::after {
  margin-right: 0.4rem;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

.mainVisual {
  margin-bottom: 0rem;
}

.mainVisual .swiper-fade .swiper-slide {
  -webkit-transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, transform !important;
  transition-property: opacity, transform, -webkit-transform !important;
  pointer-events: none;

}

.mainVisual .swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

.mainVisual .swiper-pagination {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 3.2rem;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  margin: auto;
}

.mainVisual .swiper-pagination-bullet {
  display: block;
  width: 3px;
  height: 4rem;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: rgba(255, 255, 255, 0.4);
}

.mainVisual .swiper-pagination-bullet:not(:first-child) {
  margin-top: 0.8rem;
}

.mainVisual .swiper-pagination-bullet-active {
  background-color: var(--color-theme);
}

.mainVisual .slide-media {
  height: 100vh;
  width: 100%;
  min-height: 100vh;
}

.mainVisual .slide-media img {
  -webkit-transition: 7s 1s ease-out;
  transition: 7s 1s ease-out;
}

.mainVisual .slide-title {
  font-size: 8vw;
  font-weight: 700;
  line-height: 1.3;
  position: absolute;
  right: 15px;
  bottom: 15px;
  margin-left: 1rem;
  text-align: right;
  color: #fff;
  -webkit-text-stroke: 1px rgb(145, 145, 145);
  text-shadow:
    3px 3px 0 #868686,
    -1px -1px 0 #868686,
    1px -1px 0 #868686,
    -1px 1px 0 #868686,
    1px 1px 0 #868686;
}

.mainVisual .swiper-slide[class*=-active] .slide-media img {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.mainVisual .swiper-slide[class*=-active] .slide-title {
  -webkit-animation: mv01-fadeIn 2s 0.5s var(--easing) both;
  animation: mv01-fadeIn 2s 0.5s var(--easing) both;
}

@-webkit-keyframes mv01-fadeIn {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
    -webkit-filter: blur(300px);
    filter: blur(300px);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes mv01-fadeIn {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
    -webkit-filter: blur(300px);
    filter: blur(300px);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}


@media screen and (min-width:640px) {
  /* sm: min-width:640px; */

  html {
    font-size: 50%;
  }

  .pc-tab {
    display: none !important;
  }

  .mainVisual .slide-title {
    font-size: 4.8rem;
    font-weight: 700;
    right: 4rem;
    margin-left: 6rem;
  }
}

@media screen and (min-width:768px) {
  /* md: min-width:768px;
  iPad/mini/air */

  .pc {
    display: block;
  }

  .sp {
    display: none;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  .l-inner {
    padding: 0 4rem;
  }

  .mainVisual {
    margin-bottom: 0rem;
  }

  .mainVisual .slide-media {
    /* height: max(70vh, 70vw); */
    width: 100%;
    min-height: 100vh;
  }
}

@media screen and (min-width:1024px) {
  /* lg: min-width:1024px;
  iPad Pro 12.9*/

  .mainVisual {
    position: relative;
  }

  .mainVisual h1 {
    margin: 0;
    position: absolute;
    /* top: calc(50% - 0.5em); */
    top: 20%;
    left: 40%;
    transform: translateY(-50%) translateX(-50%);
    /* -webkit- transform: translateY(-50%) translateX(-50%); */
    width: 100%;
    text-align: center;
    line-height: 1;
    font-size: 5vw;
    font-family: "Montserrat", sans-serif;
    text-shadow: 4px 4px 0 #fff;
    color: #c9171e;
    z-index: 3;
  }

  .tab-sp {
    display: none !important;
  }

  .swiper-button-prev::before,
  .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }

  .swiper-button-prev:hover::before,
  .swiper-button-next:hover::before {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@media screen and (min-width:1280px) {
  /* xl: min-width:1280px;
  Android Tablet　Fire HD 10 10インチ*/
}