@charset "UTF-8";


:root {
  --fv-color: #F7AC69;

  --sec1-color: #D9CDDB;

  --sec2-color: #E3D4CF;

  --bg-color: #e3e1d9;
}

/* ページ共通___________________________*/
.emmi_lp {
  position: relative;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-weight: 500;
  font-size: calc(24* (100vw / 750));
  letter-spacing: 0.025em;
  line-height: 2;
  overflow-x: clip;
  background: #F2EFE7;
}


@media screen and (max-width: 767px) {
  #footer_emmi {
    padding: 0;
  }

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

@media screen and (min-width: 768px) {
  #footer_emmi {
    margin-top: 0;
  }

  .emmi_lp {
    font-size: 1.4rem;
    letter-spacing: 0.025em;
    line-height: 2.1428571429;
  }

  .main-area {
    overflow: initial;
  }

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

.emmi_lp .img {
  /* background: #fff; */
  font-size: 0;
  position: relative;
}

.emmi_lp img,
.emmi_lp picture,
.emmi_lp video {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.emmi_lp a,
.emmi_lp picture,
.emmi_lp span {
  display: inline-block;
}

.emmi_lp a video {
  display: block;
  width: 100%;
}

/* font */
.emmi_lp .ff_tra {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
}

.emmi_lp .ff_prag {
  font-family: pragmatica, sans-serif;
  font-weight: 300;
}

.emmi_lp .ff_vdl {
  font-family: "vdl-v7mincho", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.emmi_lp .ff_psf {
  font-family: "psfournier-std", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* ▽_____________ credit ______________▽ */
.credit__wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(30* (100vw /750));
  gap: 0 calc(18* (100vw /750));
}

/* .credit__wrap li:not(.credit_not_margin) {
  margin-right: calc(17* (100vw / 750));
} */

.credit__wrap::after {
  content: "";
  width: 100%;
}

.credit__wrap::before {
  content: "";
  order: 2;
  width: 100%;
}

.credit__wrap li {
  font-family: pragmatica, sans-serif;
  font-weight: 300;
  font-size: calc(22* (100vw / 750));
  letter-spacing: 0.05em;
  line-height: 1.8181818182;
  text-align: end;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .credit__wrap {
    margin: 2.5rem 0 0 0;
    gap: 0 1rem;
  }

  .credit__wrap li {
    font-size: 1.4rem;
    line-height: 1.857;
  }

  /* 
  .credit__wrap li:not(.credit_not_margin) {
    margin-right: 1.1rem;
  } */
}

/* ▽_____________ fv ______________▽ */
.sec__fv {
  text-align: center;
  margin-top: calc(58* (100vw / 750));
}

.sec__fv h2+p {
  font-weight: 500;
  margin-top: calc(86*(100vw / 750));
}

@media screen and (min-width: 768px) {
  .sec__fv {
    margin: 5.9rem auto 0;
    width: 100rem;
  }

  .sec__fv h2+p {
    margin-top: 5.2rem;
    line-height: 2;
    letter-spacing: 0.05em;
  }
}






/* ▽_____________ sec ______________▽ */
.sec,
.sec__content-wrap,
.sec__content-item {
  position: relative;
}

.sec__content-item::before {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  width: calc(170* (100vw /750));
  height: calc(225* (100vw /750));
}

.imgttl {
  position: absolute;
}

@media screen and (min-width: 768px) {
  .sec__content-item::before {
    width: 10rem;
    height: 13.7rem;
  }
}

/* ===============================================
* sec1 *
=============================================== */
@media screen and (max-width: 767px) {

  .sec1 .sec__content-item--1 {
    width: calc(675* (100vw /750));
    margin: calc(218*(100vw / 750)) auto 0;
  }

  .sec1 .sec__content-item--1::before {
    background: url(../img/sec01.svg) center/contain no-repeat;
    top: calc(-166*(100vw / 750));
    left: calc(-12*(100vw / 750));
  }

  .sec1 .sec__content-item--2 {
    width: calc(600* (100vw /750));
    margin: calc(80*(100vw / 750)) 0 0 0;
  }

  .sec1 .sec__content-item--3 {
    width: calc(540* (100vw /750));
    margin: calc(70*(100vw / 750)) 0 0 auto;
  }

  .sec1 .sec__content-item--3 .imgttl {
    top: calc(-13*(100vw / 750));
    left: calc(-61*(100vw / 750));
    width: calc(35*(100vw / 750));
  }

  .sec1 .credit__wrap {
    margin-left: calc(39* (100vw /750));
  }
}

@media screen and (min-width: 768px) {
  .sec1 .sec__content-wrap--1 {
    display: grid;
    width: 116rem;
    margin: 15.3rem auto 0;
    grid-template-columns: 41rem 25rem auto;
    grid-template-rows: 22.1rem 61.9rem auto;
  }

  .sec1 .sec__content-item--1 {
    width: 34rem;
    grid-area: 2/1/3/2;
  }

  .sec1 .sec__content-item--2 {
    width: 45rem;
    grid-area: 1/3/2/4;
  }

  .sec1 .sec__content-item--2::before {
    background: url(../img/sec01.svg) center/contain no-repeat;
    top: -10rem;
    right: 0.4rem;
  }

  .sec1 .sec__content-item--3 {
    width: 34.5rem;
    grid-area: 3/2/5/3;
  }

  .sec1 .credit__wrap {
    justify-content: flex-end;
  }

  .sec1 .sec__content-item--3 .imgttl01 {
    top: -1rem;
    left: -4.1rem;
    width: 2.35rem;
    transform: scale(1, -1);
  }

  .sec1 .sec__content-item--3 .imgttl img {
    width: 2.35rem;
    height: 22.1rem;
  }

  .sec1 .sec__content-item--3 .imgttl02 {
    top: 20.2rem;
    left: initial;
    right: -4.3rem;
    width: 3.35rem;
    /* font-size: 3rem; */
  }

  .sec1 .sec__content-item--3 .imgttl02 img {
    width: 3.35rem;
    height: 25.6rem;
  }
}

/* ===============================================
* sec2 *
=============================================== */
@media screen and (max-width: 767px) {

  .sec2 .sec__content-item--1 {
    margin: calc(235*(100vw / 750)) auto 0;
  }

  .sec2 .sec__content-item--1::before {
    background: url(../img/sec02.svg) center/contain no-repeat;
    top: calc(-35*(100vw / 750));
    left: 50%;
    transform: translateX(-50%);
  }

  .sec2 .sec__content-item--2 {
    width: calc(510*(100vw / 750));
    margin: calc(-49*(100vw / 750)) calc(31*(100vw / 750)) 0 auto;
  }

  .sec2 .sec__content-item--3 {
    width: calc(600* (100vw /750));
    margin: calc(70*(100vw / 750)) auto 0;
  }
}

@media screen and (min-width: 768px) {
  .sec2 .sec__content-wrap--1 {
    display: grid;
    width: 116rem;
    margin: 16.5rem auto 0;
    grid-template-columns: 34.5rem 50.5rem auto;
    grid-template-rows: 14.1rem 35.9rem auto;
  }

  .sec2 .sec__content-item--1 {
    width: 46.5rem;
    grid-area: 1 / 1 / 2 / 2;
  }

  .sec2 .sec__content-item--1::before {
    background: url(../img/sec02.svg) center/contain no-repeat;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .sec2 .sec__content-item--2 {
    width: 31.5rem;
    grid-area: 3 / 2 / 3 / 4;
  }

  .sec2 .sec__content-item--3 {
    width: 33rem;
    grid-area: 2 / 3 / 4 / 3;
  }

  .sec2 .credit__wrap {
    position: absolute;
    flex-direction: column;
    justify-content: flex-end;
    top: 32.3rem;
    align-items: flex-start;
    right: -15rem;
  }
}

/* ===============================================
* sec3 *
=============================================== */
@media screen and (max-width: 767px) {

  .sec3 .sec__content-item--1 {
    width: calc(630* (100vw /750));
    margin: calc(205*(100vw / 750)) 0 0 0;
  }

  .sec3 .sec__content-item--2 {
    width: calc(630* (100vw /750));
    margin: calc(15*(100vw / 750)) 0 0 0;
  }

  .sec3 .sec__content-item--2::before {
    background: url(../img/sec03.svg) center/contain no-repeat;
    top: calc(59*(100vw / 750));
    right: calc(-93*(100vw / 750));
  }

  .sec3 .credit__wrap {
    margin-left: calc(40*(100vw / 750));
    flex-wrap: nowrap;
  }
}

@media screen and (min-width: 768px) {
  .sec3 .sec__content-wrap--1 {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 10rem;
    margin-top: 14rem;
  }

  .sec3 .sec__content-item--1 {
    width: 39rem;
    margin-top: 14rem;
  }

  .sec3 .sec__content-item--1::before {
    background: url(../img/sec03.svg) center/contain no-repeat;
    top: -10rem;
    right: -5rem;
  }

  .sec3 .sec__content-item--2 {
    width: 39rem;
  }

  .sec3 .credit__wrap {
    width: 28rem;
  }
}

/* ===============================================
* sec4 *
=============================================== */
@media screen and (max-width: 767px) {

  .sec4 .sec__content-item--1 {
    width: calc(600* (100vw /750));
    margin: calc(194*(100vw / 750)) 0 0 auto;
    z-index: 2;
  }

  .sec4 .sec__content-item--2 {
    width: calc(680* (100vw /750));
    margin: calc(-25*(100vw / 750)) 0 0 0;
  }

  .sec4 .sec__content-item--3 {
    width: calc(660* (100vw /750));
    margin: calc(100*(100vw / 750)) auto 0;
  }

  .sec4 .credit__wrap {
    justify-content: center;
  }

  .sec4 .imgttl {
    top: calc(108*(100vw / 750));
    left: calc(-88*(100vw / 750));
    color: #304463;
    opacity: 1;
  }

  .derayanime .js-fadeIn {
    display: block;
    line-height: 1.2;
    font-size: calc(60* (100vw /750));
    letter-spacing: 0em;
  }
}

@media screen and (min-width: 768px) {
  .sec4 .sec__content-wrap--1 {
    display: grid;
    width: 97rem;
    margin: 14rem auto 0;
    grid-template-columns: 24.5rem 26rem auto;
    grid-template-rows: 15.5rem 43rem auto;
  }

  .sec4 .sec__content-item--1 {
    width: 38rem;
    grid-area: 1 / 3 / 2 / 3;
  }

  .sec4 .sec__content-item--2 {
    width: 44rem;
    grid-area: 2 / 1 / 2 / 2;
  }

  .sec4 .sec__content-item--3 {
    width: 48rem;
    grid-area: 3/2/5/3;
  }

  .sec4 .credit__wrap {
    justify-content: center;
    width: 33rem;
    margin: 2.5rem auto 0;
  }

  .sec4 .imgttl {
    top: -3.6rem;
    right: -6.5rem;
    color: #304463;
    opacity: 1;
  }

  .derayanime .js-fadeIn {
    display: block;
    line-height: 1.25;
    font-size: 3rem;
    letter-spacing: 0em;
  }
}

/* ===============================================
* sec5 *
=============================================== */
@media screen and (max-width: 767px) {

  .sec5 .sec__content-item--1 {
    margin: calc(214*(100vw / 750)) 0 0 auto;
  }

  .sec5 .sec__content-item--1::before {
    background: url(../img/sec05.svg) center/contain no-repeat;
    top: calc(-117*(100vw / 750));
    left: 50%;
    transform: translateX(-50%);
  }

  .sec5 .sec__content-item--2 {
    width: calc(640* (100vw /750));
    margin: calc(100*(100vw / 750)) auto 0;
  }

  .sec5 .credit__wrap {
    justify-content: center;
  }

  .sec5 .imgttl {
    top: calc(637*(100vw / 750));
    left: calc(428*(100vw / 750));
    color: #fff;
    width: calc(300* (100vw /750));
  }

  .sec5 .derayanime .js-fadeIn {
    line-height: 1.2;
    font-size: calc(50* (100vw /750));
    letter-spacing: 0.03em;
  }
}

@media screen and (min-width: 768px) {
  .sec5 .sec__content-wrap--1 {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 35rem;
    margin-top: 19.5rem;
  }

  .sec5 .sec__content-item--1 {
    width: 45rem;
  }

  .sec5 .sec__content-item--1::before {
    background: url(../img/sec05.svg) center/contain no-repeat;
    top: -10rem;
    left: 1rem;
  }

  .sec5 .sec__content-item--2 {
    width: 40rem;
    margin-top: 14rem;
  }

  .sec5 .credit__wrap {
    position: absolute;
    flex-direction: column;
    justify-content: flex-end;
    top: 46rem;
    align-items: flex-start;
    right: -16.5rem;
  }

  .sec5 .imgttl {
    top: 39.7rem;
    left: 1.4rem;
    color: #fff;
  }

  .sec5 .derayanime .js-fadeIn {
    line-height: 1.25;
    font-size: 3rem;
    letter-spacing: 0.03em;
  }
}

/* ===============================================
* sec6 *
=============================================== */
@media screen and (max-width: 767px) {

  .sec6 .sec__content-item--1 {
    width: calc(645* (100vw /750));
    margin: calc(194*(100vw / 750)) 0 0 auto;
  }

  .sec6 .sec__content-item--1::before {
    background: url(../img/sec06.svg) center/contain no-repeat;
    top: calc(50*(100vw / 750));
    left: calc(-87*(100vw / 750));
  }

  .sec6 .sec__content-item--2 {
    margin: calc(80*(100vw / 750)) 0 0 0
  }

  .sec6 .js-slider-set3_item {
    width: calc(495* (100vw /750));
    margin-right: calc(15* (100vw /750));
  }

  .sec6 .credit__wrap {
    width: calc(400* (100vw /750));
    margin-left: calc(40* (100vw /750));
  }
}

@media screen and (min-width: 768px) {
  .sec6 .sec__content-wrap--1 {
    display: flex;
    justify-content: center;
    gap: 12rem;
    margin-top: 11.7rem;
    padding-left: 26.5rem;
  }

  .sec6 .sec__content-item--1 {
    width: 46.5rem;
    margin-top: 20rem;
    flex-shrink: 0;
  }

  .sec6 .sec__content-item--1::before {
    background: url(../img/sec06.svg) center/contain no-repeat;
    top: 1.9rem;
    left: -5.5rem;
    height: 15.7rem;
    width: 11rem;
  }

  .sec6 .sec__content-item--2 {
    width: 67rem;
  }

  .sec6 .js-slider-set3_item {
    width: 33rem;
    margin-right: 1rem;
  }

  .sec6 .credit__wrap {
    width: 30rem;
  }

}


/* ===============================================
* sec7 *
=============================================== */
@media screen and (max-width: 767px) {

  .sec7 .sec__content-item--1 {
    width: calc(525* (100vw /750));
    margin: calc(194*(100vw / 750)) 0 0 0;
    z-index: 1;
  }

  .sec7 .sec__content-item--1::before {
    background: url(../img/sec07.svg) center/contain no-repeat;
    top: calc(312*(100vw / 750));
    right: calc(-217*(100vw / 750));
    height: calc(265*(100vw / 750));
  }

  .sec7 .sec__content-item--2 {
    width: calc(570* (100vw /750));
    margin: calc(-40*(100vw / 750)) 0 0 auto;
  }

  .sec7 .sec__content-item--3 {
    width: calc(690* (100vw /750));
    margin: calc(70*(100vw / 750)) auto 0;
  }

}

@media screen and (min-width: 768px) {
  .sec7 .sec__content-wrap--1 {
    display: grid;
    width: 120rem;
    margin: 22rem auto 0;
    grid-template-columns: 18.1rem 56.9rem auto;
    grid-template-rows: 12.1rem 36rem auto;
  }

  .sec7 .sec__content-item--1 {
    width: 30rem;
    grid-area: 2 / 1 / 2 / 3;
    z-index: 2;
  }

  .sec7 .sec__content-item--2 {
    width: 45rem;
    grid-area: 1 / 3 / 2 / 3;
  }

  .sec7 .sec__content-item--2::before {
    background: url(../img/sec07.svg) center/contain no-repeat;
    top: -10.1rem;
    left: -10rem;
  }

  .sec7 .sec__content-item--3 {
    width: 31.4rem;
    grid-area: 3 / 2 / 5 / 3;
  }
}



/* ▽ lp__foot_btn ▽ */
.emmi_lp .lp__foot_btn {
  width: calc(495* (100vw / 750));
  margin: calc(164*(100vw / 750)) auto 0;
  display: block;
  padding-bottom: calc(116* (100vw /750));
}

@media screen and (min-width: 768px) {
  .emmi_lp .lp__foot_btn {
    width: 33rem;
    margin: 14.1rem auto 0;
    padding-bottom: 10rem;
  }
}









@media only screen and (min-width: 561px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}

@media (max-width: 1400px) and (min-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}






/* ▽_____________ animation ______________▽ */
.js-fadeIn {
  opacity: 0;
  /* transition: ease-in, opacity 1500ms; */
}

.js-fadeIn.showFade {
  opacity: 1;
}

.model__img.js-fadeIn {
  transition-property: opacity;
  transition-timing-function: ease-in;
  transition-duration: 1500ms;
}

@media screen and (max-width: 767px) {
  .js-fadeIn.fade_left_sp {
    transform: translateX(10rem);
    transition-property: all;
    transition-duration: 1500ms;
    transition-timing-function: ease;
  }

  .js-fadeIn.fade_left_sp.showFade {
    transform: translateX(0);
  }

  .js-fadeIn.fade_top_sp {
    transform: translateY(10rem);
    transition-property: all;
    transition-duration: 1500ms;
    transition-timing-function: ease;
  }

  .js-fadeIn.fade_top_sp.showFade {
    transform: translateY(0);
  }
}

@media screen and (min-width: 768px) {
  .js-fadeIn.fade_left_pc {
    transform: translateX(10rem);
    transition-property: all;
    transition-duration: 1500ms;
    transition-timing-function: ease;
  }

  .js-fadeIn.fade_left_pc.showFade {
    transform: translateX(0);
  }

  .js-fadeIn.fade_top_pc {
    transform: translateY(10rem);
    transition-property: all;
    transition-duration: 1500ms;
    transition-timing-function: ease;
  }

  .js-fadeIn.fade_top_pc.showFade {
    transform: translateY(0);
  }
}

/* 
.js-fadeIn.prof__wrap,
.comment--wrap .js-fadeIn {
  transform: translateY(100px);
  transition: ease-in, opacity 1500ms, transform 1500ms;
}

.js-fadeIn.prof__wrap.showFade,
.comment--wrap .js-fadeIn.showFade {
  transform: translateY(0);
} */


/* slide-in-inner___________________________*/
.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
  font-family: "sofia-pro", sans-serif;
  font-weight: 200;
  font-style: normal;
  color: #304463;
}

/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
  height: 100%;
}


@keyframes slideTextX100 {
  from {
    transform: translateY(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateY(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
  height: 100%;
}


@keyframes slideTextX-100 {
  from {
    transform: translateY(100%);
    /*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateY(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

.derayanime {
  font-family: "sofia-pro", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.derayanime .js-fadeIn {
  transition: ease-in, opacity 0;
}

.derayanime .deray01 {
  transition-delay: 0.3s;
}

.derayanime .deray02 {
  transition-delay: 0.5s;
}

.derayanime .deray03 {
  transition-delay: 0.7s;
  font-weight: 300;
  margin-top: calc(8* (100vw /750));
}
@media screen and (min-width: 768px){
  .derayanime .deray03 {
    margin-top: 0.3rem;
  }
}