@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap");
html {
  font-size: 62.5%; }

p {
  font-family: 'Noto Sans JP', serif;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: left;
  margin: 0;
  line-height: 1.5; }
  @media (max-width: 768px) {
    p {
      font-size: 1.2rem;
      line-height: 2.5rem; } }

a:link, a:visited, a:hover, a:active {
  color: black; }

.js-anm {
  opacity: .1;
  transition: all 1.5s; }

/* 画面に入った時の動き */
.js-anm.blockIn {
  opacity: 1; }

body {
  margin: 0; }

.mobil-br {
  display: none; }
  @media (max-width: 768px) {
    .mobil-br {
      display: block; } }

/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
  opacity: 0; }

/*========= スクロールをすると下のエリアが上にかぶさるCSS ===============*/
#header {
  /*headerを全画面で見せる*/
  width: 100%;
  height: 100vh;
  position: relative; }
  @media (min-width: 768px) {
    #header {
      height: 0; } }

/*下の被さるエリアの指定*/
#container {
  position: relative;
  z-index: 1;
  /*以下はレイアウトのための記述*/
  background: #fff;
  padding: 50px 0;
  text-align: center; }
  @media (min-width: 768px) {
    #container {
      width: 50%;
      left: 50%; } }

h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 3px; }
  @media (min-width: 768px) {
    h1 {
      font-size: 1.8rem;
      margin: 0.67em 0 15vw;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl; } }

@media (min-width: 768px) {
  .h1-sp {
    margin: 7vw auto 2vw;
    display: inline-block; } }

h2 {
  font-family: 'Noto Sans JP', serif;
  font-size: 2rem;
  font-weight: 900;
  text-align: left;
  line-height: 3rem; }

.concept {
  margin: 25vw 10% 10vw; }
  @media (min-width: 768px) {
    .concept {
      margin: 5vw 10% 8vw;
      display: none; } }

.concept-sp {
  display: none; }
  @media (min-width: 768px) {
    .concept-sp {
      display: block;
      margin: 10vw 0 20vw; } }

.concept-sp h2 {
  text-align: center; }

.concept-sp p {
  text-align: center; }

.concept-ph {
  width: 80%;
  height: auto;
  position: relative;
  margin: 0 auto; }

.concept-ph img {
  position: absolute;
  left: 1%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10%;
  height: auto;
  overflow: hidden; }

.logo-sp {
  display: none; }
  @media (min-width: 768px) {
    .logo-sp {
      display: block;
      width: 60%;
      margin: 3vw auto 6vw; } }

@media (min-width: 768px) {
  .logo-sp img {
    width: 100%;
    height: auto; } }

/*　背景画像設定　*/
.slider-item01 {
  background: url(../image/color01.jpg); }

.slider-item02 {
  background: url(../image/color02.jpg); }

.slider-item03 {
  background: url(../image/color03.jpg); }

.slider-item {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-repeat: no-repeat;
  /*背景画像をリピートしない*/
  background-position: center;
  /*背景画像の位置を中央に*/
  background-size: cover; }

.slick-track {
  height: 120vh;
  /*画像がなぜか縦なくなるので設置*/ }

/*矢印の設定*/
.slick-prev,
.slick-next {
  display: none; }

.slick-prev {
  /*戻る矢印の位置と形状*/
  display: none; }

.slick-next {
  /*次へ矢印の位置と形状*/
  display: none; }

.slider_top {
  /*ドットナビゲーションの設定*/ }
  .slider_top .slick-dots {
    display: none; }
  .slider_top .slick-dots li {
    display: none; }
  .slider_top .slick-dots button {
    display: none; }
  .slider_top .slick-dots .slick-active button {
    bdisplay: none; }

.slick-dotted.slick-slider {
  margin: 0;
  padding: 0; }

.copyright {
  background-color: #000; }

.copyright p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
  padding: 3rem;
  color: white;
  margin: 0; }
  @media (max-width: 768px) {
    .copyright p {
      padding: 1.5rem; } }

.time {
  margin: 40vw 0; }
  @media (min-width: 768px) {
    .time {
      margin: 20vw 0; } }

.image01 {
  text-align: left;
  margin: 10%; }

.image01 img {
  width: 75%; }

.title {
  text-align: left;
  margin: 0 0 2% 10%; }

.time p {
  margin: 0 0 0 10%; }

.title img {
  width: 60px; }

.image02 img {
  width: 80%; }

.image02 {
  text-align: right;
  margin: 10% 0; }

/*　timeがふわっとでてくる　*/
.js-anm.blockIn {
  opacity: 1; }

.js-anm {
  opacity: 0.1;
  transition: all 1s; }

/*　timeがふわっとでてくる　*/
.place {
  margin: 40vw 0; }
  @media (min-width: 768px) {
    .place {
      margin: 20vw 0; } }

.image03 {
  text-align: left;
  margin: 10%; }

.image03 img {
  width: 75%; }

.place p {
  margin: 0 0 0 10%; }

.image04 img {
  width: 90%; }

.image04 {
  text-align: right;
  margin: 10%; }

.form {
  margin: 40vw 0 20vw; }
  @media (min-width: 768px) {
    .form {
      margin: 20vw 0 10vw; } }

.image05 {
  text-align: right;
  margin: 10%; }

.image05 img {
  width: 75%; }

.form p {
  margin: 0 0 0 10%; }

.image06 img {
  width: 100%; }

.image06 {
  text-align: center;
  margin: 10%; }

.line-pc {
  margin: 10vw 0;
  display: none; }
  @media (min-width: 768px) {
    .line-pc {
      display: block; } }

.line-sp {
  margin: 10vw 0;
  display: block; }
  @media (min-width: 768px) {
    .line-sp {
      display: none; } }

#video-area {
  position: fixed;
  z-index: -1;
  /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden; }
  @media (min-width: 768px) {
    #video-area {
      width: 40%;
      margin: 5% 0 5% 7vw;
      overflow: auto; } }

#video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  height: 177.77777778vh;
  /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  width: 56.25vw;
  /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%; }
  @media (min-width: 768px) {
    #video {
      width: 40%;
      height: auto; } }

main {
  display: block; }
  @media (min-width: 768px) {
    main {
      display: flex; } }

section {
  width: 100%; }

.sp_br {
  display: block; }
  @media (min-width: 768px) {
    .sp_br {
      display: none; } }

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/
.box {
  opacity: 1;
  width: 32%; }

.box img {
  width: 100%;
  height: auto; }

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

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.randomBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

.lineup {
  text-align: left;
  width: 80%; }

.lineup p {
  font-weight: 200; }

.step {
  text-align: left;
  width: 80%; }

.step_inner img {
  height: 42px;
  width: auto; }
  @media (min-width: 768px) {
    .step_inner img {
      height: 62px; } }

.step_inner {
  margin: 40px 0; }

h3 {
  font-family: 'Noto Sans JP', serif;
  font-size: 25px;
  font-weight: 200; }

h4 {
  font-family: 'Noto Sans JP', serif;
  font-size: 15px;
  font-weight: 400;
  margin: 10px 0 5px; }
  @media (min-width: 768px) {
    h4 {
      font-size: 19px; } }

.step p {
  font-family: 'Noto Sans JP', serif;
  font-size: 13px;
  font-weight: 200;
  line-height: 1.8; }
  @media (min-width: 768px) {
    .step p {
      font-size: 17px; } }

.price {
  text-align: left;
  width: 80%; }

.price img {
  width: 100%;
  height: auto; }

section {
  margin: 30% 10%; }

/*== 線の上を別の線が伸びる */
.btnlinestretches4 {
  /*線の基点とするためrelativeを指定*/
  position: relative;
  /*リンクの形状*/
  color: #333;
  padding: 10px 50px 10px 30px;
  display: inline-block;
  text-decoration: none;
  outline: none;
  font-size: 15px;
  margin: 0 0 50px;
  font-family: 'Noto Sans JP', serif;
  font-weight: 400; }

/*線の設定*/
.btnlinestretches4::before,
.btnlinestretches4::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  /*線の形状*/
  background: #333;
  width: 100%;
  height: 2px;
  /*アニメーションの指定*/
  transition: all 0.3s ease-in-out; }

/*hover時に伸びる線の形状*/
.btnlinestretches4::after {
  width: 0;
  background: #ccc; }

/*hover時に100%に伸びる*/
.btnlinestretches4:hover::after {
  width: 100%; }

/*矢印の設定*/
.btnlinestretches4 span::after {
  content: '';
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 1em;
  right: 20px;
  /*矢印の形状*/
  width: 5px;
  height: 5px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  /*アニメーションの指定*/
  transition: all .3s; }

/*hover時に矢印が移動*/
.btnlinestretches4:hover span::after {
  right: 15px; }