@charset "utf-8";

/*******
フォント

Gill Sans
font-family:"gill-sans-nova",sans-serif;
font-weight:500;
500→Regular 600→SemiBold

Noto Sans JP
font-family: "Noto Sans JP", sans-serif;

Helvetica
font-family: "HelveticaLTPro-Roman";
→Regular
font-family: "HelveticaLTPro-Bold";
→Bold

Larken Light
font-family:"larken",sans-serif;
font-weight:300;

Avenir
font-family: "AvenirLTPro-Light";
font-family: "AvenirLTPro-LightOblique";
font-family: "AvenirLTPro-HeavyOblique";

********/

body {
  color: #4d4d4d;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}

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

.hover--opacity {
  transition: opacity 0.3s;
}
.hover--opacity:hover {
  opacity: 0.7;
}

.inner-331 {
  width: calc(100% - 40px);
  max-width: 331px;
  margin: 0 auto;
}

.vertical {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.l-wrap {
  width: 100%;
  position: relative;
}

.bg--green {
  background-color: #333e3b;
}
.bg--green02 {
  background-color: #6decaa;
}
.bg--wh {
  background-color: #fff;
}
.bg--wh02 {
  background-color: #f0f2f3;
}
.bg--gray {
  background-color: #4d4d4d;
}
.clr--green {
  color: #6decaa;
}
.clr--pink {
  color: #ff447d;
}
.clr--wh {
  color: #fff;
}

/* --------------------------------
ローディング画面
--------------------------------- */

.loader {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #333e3b;
  z-index: 555;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader__logo {
  width: 135px;
  height: 96px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.loader__logo-img {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.5s ease;
}

.loader__logo-img--w {
  position: absolute;
  width: 111px;
  top: 0;
  left: 0;
  transform: translateX(-100%);
}

.loader__logo-img--d {
  position: absolute;
  width: 80px;
  bottom: 0;
  right: 0;
  transform: translateY(100%);
}

/* --------------------------------
.contents__center
--------------------------------- */
.contents__center {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  background-color: #fffff5;
  position: relative;
  overflow: hidden;
  z-index: 0;
  box-sizing: content-box;
}

/* --------------------------------
.contents__left
--------------------------------- */
.contents__left {
  width: calc((100% - 375px) / 2);
  position: absolute;
}
.contents__left-movie {
  position: relative;
  height: 100vh;
}
.contents__movie-wrap {
  height: 100vh;
  filter: grayscale(100%);
  position: relative;
}
.contents__movie-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51, 62, 59, 0.3);
  pointer-events: none; /* クリックできる要素の上にオーバーレイしたい場合 */
}
.contents__movie-wrap .img--cvr {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  -o-object-fit: cover;
  object-position: center;
  -o-object-position: center;
}

.contents__left-logo {
  width: 126px;
  position: absolute;
  top: 29px;
  left: 30px;
}
.contents__left-text1 {
  width: 8px;
  position: absolute;
  top: 46.3%;
  left: 33px;
  z-index: 1;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.contents__left-text2 {
  width: 126px;
  position: absolute;
  bottom: 31px;
  left: 30px;
}

/* --------------------------------
.contents__right
--------------------------------- */
.contents__right {
  width: calc((100% - 375px) / 2);
  height: 100vh;
  background-color: #666;
  pointer-events: all;
  position: absolute;
  right: 0;
}
.contents__right--sp {
  display: none;
}

.contents__right-box1 {
  position: absolute;
  width: 100px;
  top: 47px;
  right: 30px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.contents__right-heading {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.77;
  letter-spacing: 0.15em;
}
.contents__right-heading span {
  position: relative;
  top: -10px;
}
.ontents__right-heading span {
  position: relative;
  top: -10px;
}
.contents__right-box2 {
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}
.contents__right-img {
  position: absolute;
}
.contents__right-img1 {
  width: 157px;
  bottom: 190px;
  right: 30px;
  z-index: 3;
}
.contents__right-img2 {
  width: 146px;
  bottom: 109px;
  right: 166px;
  z-index: 2;
}
.contents__right-img3 {
  width: 231px;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.contents__right-text {
  color: #fff;
  font-family: "AvenirLTPro-HeavyOblique";
  font-size: 85px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  line-height: 1;
}

/* --------------------------------
GO!LINE!
--------------------------------- */
.go-line {
  position: absolute;
  bottom: 174px;
  right: 0;
}
.go-line__fv {
  opacity: 0;
}
.go-line__link {
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s;
}
.go-line__contents {
  width: 56px;
  height: 200px;
  padding-top: 17px;
  padding-bottom: 21px;
  transition: background 0.3s;
  background: url(../imgs/common/goline_pink.svg) center center / contain no-repeat;
  position: absolute;
  bottom: 0;
  right: 0;
}
.go-line__link:hover .go-line__contents {
  background: url(../imgs/common/goline_wh.svg) center center / contain no-repeat;
}
.go-line__contents-text {
  color: #fff;
  font-size: 21px;
  font-family: "gill-sans-nova", sans-serif;
  font-weight: 500;
  padding-left: 4px;
  line-height: 1.75;
  letter-spacing: 0.025em;
}
.go-line__icon {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: -16px;
  left: -72px;
  z-index: 2;
}
.go-line__link:hover .go-line__contents-text {
  color: #ff447d;
}

.line-banner__link {
}
.go-line--type02 {
  bottom: 0;
  left: 0;
  max-width: 375px;
  margin: 0 auto;
}
.go-line--type02 .go-line__link {
  width: 100%;
  max-width: 313px;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
  transition: all 0.3s;
}
.go-line--type02 .go-line__contents {
  width: 253px;
  height: auto;
  padding-top: 7px;
  padding-bottom: 10px;
  position: relative;
  transition: background 0.3s;
  background: url(../imgs/common/goline_pink2.svg) center center / contain no-repeat;
  position: absolute;
  bottom: 0;
  left: -0.1px;
}
.line-banner__link:hover .go-line__contents {
  background: url(../imgs/common/goline_wh2.svg) center center / contain no-repeat;
}
.go-line--type02 .go-line__contents-text {
  font-size: 27px;
  padding-left: 38px;
  line-height: 1;
}
.line-banner__link:hover .go-line__contents-text {
  color: #ff447d;
}
.go-line--type02 .go-line__icon {
  position: static;
}

/* GO! LINE!終了 */

.arrow__down {
  width: 100%;
  max-width: 140px;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.section-title {
  font-family: "larken", sans-serif;
  font-weight: 300;
}
.section-title--type01,
.section-title--type03,
.section-title--type04 {
  font-size: 63px;
}
.section-title--type01 {
  margin-bottom: 18px;
  line-height: 1;
}
.section-title--type02 {
  font-size: 93px;
  display: flex;
  justify-content: flex-end;
  padding-top: 29px;
  line-height: 1;
}
.section-title--type03 {
  text-align: center;
  margin-bottom: 4px;
}
.section-title--type05 {
  font-size: 73px;
}
.section-title--type06 {
  font-size: 70px;
}
.section-title--type07 {
  font-size: 82px;
  line-height: 1.1;
}

.line-banner {
  position: relative;
  padding-bottom: 30px;
  display: block;
}
.line-banner.fixed {
  position: fixed;
  bottom: 0; /* 下部に固定 */
  left: 0;
  right: 0;
  z-index: 1000; /* 他の要素の上に表示 */
}
.line-banner__wrap {
  width: 100%;
  max-width: 284px;
  padding: 18px 5px 26px;
  margin: 0 11px 0 auto;
  background-color: #6decaa;
  border-radius: 20px;
}
.line-banner__heading {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.1em;
}
.line-banner__text {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 2.3;
  letter-spacing: 0.025em;
}

/* 上に上がる動き */
.line-banner--type02 {
  width: 100%;
  max-width: 375px;
  position: fixed; /* 固定位置 */
  bottom: -999px; /* 初期状態で画面外 */
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  right: 0; /* 右側に固定 */
  transition: bottom 1s ease, opacity 1s ease; /* スムーズに出てくるためのトランジション */
  z-index: 10;
  opacity: 0;
}
.line-banner--type02 .line-banner__wrap {
  position: relative;
  right: 0;
  border: 1px solid #fff;
}

.line-banner.UpMove {
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translate(-50%, 200px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* 下に下がる動き */
.line-banner.DownMove {
  animation: DownAnime 0.5s forwards;
  z-index: -10;
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 200px);
  }
}

.text__common {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 30px;
  line-height: 1.88;
  letter-spacing: 0.1em;
}

/*===================
ライントーク部分
===================*/
.line-box {
  width: 100%;
  max-width: 311px;
  margin: 0 auto;
  background-color: #6decaa;
  padding: 15px 0 0 0;
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
.line__box--type01 {
  position: relative;
}
.line-box.mgb01 {
  margin-bottom: 16px;
}
.line-box__top {
  margin: 0 10px 15px;
  color: #4d4d4d;
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
.line-box__wrap {
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 70px;
  position: relative;
}
.line-box__end {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* パラパラ文字が出るアニメーション（header） */
.text-animation span {
  opacity: 0;
}
@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1280px) {
  /* --------------------------------
.contents__right
--------------------------------- */
  .contents__right-box1 {
    right: 2.343vw;
  }

  .contents__right-img1 {
    width: 12.265vw;
    height: 13.281vw;
    bottom: 14.843vw;
    right: 2.343vw;
  }
  .contents__right-img2 {
    width: 11.406vw;
    height: 13.984vw;
    bottom: 8.515vw;
    right: 12.968vw;
  }
  .contents__right-img3 {
    width: 18.046vw;
    height: 12.968vw;
  }
  .contents__right-text {
    font-size: 6.64vw;
  }
}

@media screen and (max-width: 1080px) {
  /* --------------------------------
.contents__left
--------------------------------- */
  .contents__left,
  .contents__left-movie {
    background-color: #666;
  }

  .contents__left-logo {
    display: none;
  }
  .contents__left-text1 {
    display: none;
  }
  .contents__left-text2 {
    display: none;
  }
  .contents__movie-wrap {
    display: none;
  }

  /* --------------------------------
.contents__right
--------------------------------- */
  .contents__right--sp {
    width: 100%;
    max-width: 440px;
    height: 100vh;
    margin: 0 auto;
    position: static;
    background-color: transparent;
    position: relative;
  }
  .contents__right-box1,
  .contents__right-box2 {
    display: none;
  }
}

@media (max-height: 750px) {
  /* --------------------------------
.contents__right
--------------------------------- */
  .contents__right-img1,
  .contents__right-img2,
  .contents__right-img3,
  .contents__right-text {
    display: none;
  }
}

@media screen and (max-width: 820px) {
}

@media screen and (max-width: 700px) {
}

@media screen and (max-width: 440px) {
  /* ローディング画面 */
  .loader__logo {
    bottom: 65px;
  }

  .contents__left,
  .contents__right {
    display: none;
  }
  .contents__center {
    max-width: 100%;
  }

  .line-banner--type02 {
    max-width: 100%;
  }
  .go-line--type02 {
    max-width: 100%;
  }
}

@media screen and (max-width: 375px) {
  .section-title--type02 {
    font-size: 24.8vw;
    padding-top: 7.733vw;
  }

  .line-banner {
    padding-bottom: 8vw;
  }
  .line-banner__wrap {
    max-width: 75.733vw;
    padding: 4.8vw 1.333vw 6.933vw;
    margin: 0 2.933vw 0 auto;
  }
  .line-banner__heading {
    font-size: 5.333vw;
  }
  .line-banner__text {
    font-size: 3.733vw;
  }

  /* 上に上がる動き */
  .line-banner--type02 {
    max-width: 100vw;
  }
  .line-banner--type02 .line-banner__wrap {
    right: 0;
  }

  .go-line {
    bottom: 46.4vw;
  }
  .go-line__contents {
    width: 14.933vw;
    height: 53.333vw;
    padding-top: 4.533vw;
    padding-bottom: 5.6vw;
  }
  .go-line__contents-text {
    font-size: 5.6vw;
    padding-left: 1.066vw;
  }
  .go-line__icon {
    width: 13.333vw;
    height: 13.333vw;
    bottom: -4.266vw;
    left: -19.2vw;
  }

  .go-line--type02 {
    bottom: 0;
    left: 0;
  }
  .go-line--type02 .go-line__link {
    max-width: 83.466vw;
  }
  .go-line--type02 .go-line__contents {
    width: 67.466vw;
    padding-top: 2.066vw;
    padding-bottom: 2.666vw;
  }
  .go-line--type02 .go-line__contents-text {
    font-size: 7.199vw;
    padding-left: 10.133vw;
  }
  .go-line--type02 .go-line__contents::after {
    width: 4.8vw;
    height: 11.733vw;
    right: -4.533vw;
  }
  .go-line--type02 .go-line__icon {
    width: 13.333vw;
    height: 13.333vw;
  }

  .text__common {
    font-size: 4.8vw;
    padding-top: 2.133vw;
    padding-bottom: 8vw;
  }

  .section-title--type01,
  .section-title--type03,
  .section-title--type04 {
    font-size: 16.8vw;
  }
  .section-title--type04 {
    font-size: 16.8vw;
  }
  .section-title--type05 {
    font-size: 19.466vw;
  }
  .section-title--type06 {
    font-size: 18.666vw;
  }
  .section-title--type07 {
    font-size: 21.866vw;
  }
  .section-title--type01 {
    margin-bottom: 4.8vw;
  }

  .line-box.mgb01 {
    margin-bottom: 4.266vw;
  }

  .arrow__down {
    max-width: 37.333vw;
    padding-top: 2.666vw;
    padding-bottom: 2.666vw;
  }
}

@media screen and (max-width: 350px) {
  br.b-350 {
    display: none;
  }
}