@charset "UTF-8";



/* ======================================================

base Style

======================================================== */

html {

  font-size: 62.5%;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Contents {

  width: auto;

  max-width: unset;

}



#footer {

  margin-top: 0;

}



footer {

  position: relative;

  z-index: 4;

}



.nav-top {

  display: none;

  z-index: 5;

}



#Wrap {

  width: auto;

}



:root {

  --white: #fff;

  --black: #000;

  --text-main: #48260d;

  --bg-main: #fff;

  --line-color: #000;

  --font: pragmatica, pragmatica, "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  --font-en: adobe-garamond-pro, serif;

  --font-mincho: hiragino-mincho-pron, sans-serif;

  --pc-width: 1600;

  --tb-width: 768;

  --sp-width: 750;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: .15em;

  font-feature-settings: "palt";

}



.LP_page {

  overflow-x: clip;

}



.LP_page.active {

  opacity: 1;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

  color: inherit;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page sup {

  font-size: 1rem;

}



/* .LP_page .activePoint,

.LP_page .activeDelay {

  opacity: 0;

  transform: translateY(2rem);

  transition: opacity 1s, transform 1s;

}



.LP_page .activeDelay.delay1 {

  transition-delay: .15s;

}



.LP_page .activeDelay.delay2 {

  transition-delay: .3s;

}



.LP_page .activeDelay.delay3 {

  transition-delay: .45s;

}



.LP_page .activeDelay.delay4 {

  transition-delay: .6s;

}



.LP_page .activePoint.active,

.LP_page .activePoint.active > .activeDelay {

  opacity: 1;

  transform: unset;

} */



/* ======================================================

fixed navigation - PC

======================================================== */

.navigation_list {

  display: flex;

  justify-content: center;

  width: 100%;

  background: url(/Page/Lp/fragrance/img/head_bg_pc.jpg) no-repeat;

  background-size: cover;

  height: 6rem;

  gap: 0 10.2rem;

}



.navigation_list li .nav_img,

.navigation_list li .nav_img img {

  width: 100%;

  height: 100%;

}



.navigation_list li {

  height: 6rem;

}

.navigation_list li a {

  position: relative;

  display: flex;

  align-items: center;

  padding: 2.4rem 0;

}

.navigation_list li:nth-of-type(1),

.navigation_list li:nth-of-type(1) img {

  width: 16.4rem;

}

.navigation_list li:nth-of-type(2),

.navigation_list li:nth-of-type(2) img {

  width: 19rem;

}

.navigation_list li:nth-of-type(2) {

  position: relative;

}

.navigation_list li:nth-of-type(2)::after {

  content: '';

  display: block;

  width: 0.1rem;

  height: 4rem;

  top: 50%;

  transform: translateY(-50%);

  left: -5.1rem;

  background: #E48985;

  position: absolute;

  z-index: 20;

  pointer-events: none;

}

.navigation_list li:nth-of-type(2)::before {

  content: '';

  display: block;

  width: 0.1rem;

  height: 4rem;

  top: 50%;

  transform: translateY(-50%);

  right: -5.2rem;

  background: #E48985;

  position: absolute;

  z-index: 20;

  pointer-events: none;

}

.navigation_list li:nth-of-type(3),

.navigation_list li:nth-of-type(3) img {

  width: 10.8rem;

}



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

  .navigation_list {

    background: url(/Page/Lp/fragrance/img/head_bg_sp.jpg) no-repeat;

    background-size: cover;

    background-position: center;

    height: calc(85*(100vw / 750));

    gap: 0 calc(0*(100vw / 750));

    justify-content: flex-start;

  }

    

  .navigation_list li {

    height: calc(85 * (100vw / 750));

  }

  .navigation_list li a {

    padding: 0;

  }

  .navigation_list li:nth-of-type(1) {

    width: calc(263 * (100vw / 750));

  }

  .navigation_list li:nth-of-type(1) img {

    width: calc(174 * (100vw / 750));

    margin: 0 auto;

  }

  .navigation_list li:nth-of-type(1) a {

    width: calc(263 *(100vw / 750));

    padding: calc(20 *(100vw / 750)) calc(20*(100vw / 750)) calc(20*(100vw / 750)) calc(44*(100vw / 750));

  }

  .navigation_list li:nth-of-type(2) {

    width: calc(302 * (100vw / 750));

  }

  .navigation_list li:nth-of-type(2) img {

    width: calc(214 * (100vw / 750));

    margin: 0 auto;

  }

  .navigation_list li:nth-of-type(2) a {

    width: calc(302 *(100vw / 750));

    padding: calc(20*(100vw / 750)) calc(20*(100vw / 750)) calc(20*(100vw / 750)) calc(44*(100vw / 750));

  }

  .navigation_list li:nth-of-type(3) {

    width: calc(184 * (100vw / 750));

  }

  .navigation_list li:nth-of-type(3) img {

    width: calc(94 * (100vw / 750));

    margin: 0 auto;

  }

  .navigation_list li:nth-of-type(3) a {

    width: calc(184 *(100vw / 750));

    padding: calc(20 *(100vw / 750)) calc(20*(100vw / 750)) calc(20*(100vw / 750)) calc(48*(100vw / 750));

  }

  

  .navigation_list li:nth-of-type(2)::after {

    width: calc(1.5 * (100vw / 750));

    height: calc(40 * (100vw / 750));

    top: 50%;

    transform: translateY(-50%);

    left: calc(0 * (100vw / 750));

  }

  .navigation_list li:nth-of-type(2)::before {

    width: calc(2 * (100vw / 750));

    height: calc(40 * (100vw / 750));

    top: 50%;

    transform: translateY(-50%);

    right: calc(-4 * (100vw / 750));

  }



}









/* ======================================================

----------

======================================================== */

/* .intro_area .sec_ttl.activePoint {

  opacity: 1 !important;

  transform: unset !important;

}



.fade_toRight {

  opacity: 0;

  animation: blur 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;

  -webkit-mask-image: linear-gradient(270deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);

  mask-image: linear-gradient(270deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);

  -webkit-mask-size: max(300%, 100vw) 100%;

  mask-size: max(300%, 100vw) 100%;

  -webkit-mask-position: 100% center;

  mask-position: 100% center;

  -webkit-mask-repeat: none;

  mask-repeat: none;

  transform: translateZ(0);

  transition: -webkit-mask-position 1.4s linear;

  transition: mask-position 1.4s linear;

  transition: mask-position 1.4s linear, -webkit-mask-position 1.4s linear

}



@keyframes blur {

  0% {

    opacity: 0;

    filter: blur(4px);

  }



  100% {

    opacity: 1;

    filter: blur(0);

  }

}



.activePoint.active .fade_toRight {

  -webkit-mask-position: 0 center;

  mask-position: 0 center

} */





/* ======================================================

fixed navigation

======================================================== */

.navigation_area.fixed {

  position: fixed;

  z-index: 100;

  bottom: 0;

  width: 100%;

  opacity: 0;

  pointer-events: none;

  transition: opacity 1s;

}



.navigation_area.fixed.active {

  opacity: 1;

  pointer-events: auto;

}





/* ======================================================

contents01

======================================================== */

.contents01 {

  width: 120rem;

  margin: 0 auto;

}

.contents01 .Textbox01 {

  text-align: center;

  padding-top: 10rem;

}

.contents01 .Textbox01_ttl {

  font-size: 2.6rem;

  letter-spacing: 0.2em;

  font-family: var(--font-mincho);

  color: #E48985;

  font-weight: 300;

  font-feature-settings: "palt";

}

.contents01 .Textbox01 ul li {

  font-size: 1.5rem;

  line-height: 3;

  letter-spacing: 0.2em;

  margin-top: 5.3rem;

  font-family: var(--font-mincho);

  font-feature-settings: "palt";

  color: #727171;

}

.contents01 .Textbox01 ul li:nth-of-type(2) {

  margin-top: 2rem;

}

.contents01 .Textbox01 ul li:nth-of-type(3) {

  margin-top: 3rem;

}



.flexArea01 {

  width: 48.4rem;

  position: relative;

  margin: 12.2rem 0 0 0rem;

}

.flexArea01 .txtItem.txt01_item {

  width: 14rem;

  position: absolute;

  top: 11.4rem;

  left: 4rem;

  z-index: 10;

}



.flexArea02 {

  width: 59rem;

  position: relative;

  margin: 6rem 0 0 0;

  margin-left: auto;

}

.flexArea02 .txtItem.txt02_item {

  width: 18.6rem;

  position: absolute;

  top: 11.4rem;

  right: 4rem;

  z-index: 10;

}



.flexArea03 {

  width: 47rem;

  position: relative;

  margin: 18rem 0 0 20rem;

  padding-bottom: 42rem;

}

.flexArea03 .txtItem.txt03_item {

  width: 20.2rem;

  position: absolute;

  top: 9.4rem;

  right: 0;

  z-index: 10;

}





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

  .contents01 {

    width: auto;

    margin: 0 auto;

  }

  .contents01 .Textbox01 {

    padding-top: calc(120 * (100vw / 750));

  }

  .contents01 .Textbox01_ttl {

    font-size: calc(38 * (100vw / 750));

  }

  .contents01 .Textbox01 ul li {

    font-size: calc(23 * (100vw / 750));

    margin-top: calc(73 * (100vw / 750));

  }

  .contents01 .Textbox01 ul li:nth-of-type(2) {

    margin-top: calc(34 * (100vw / 750));

  }

  .contents01 .Textbox01 ul li:nth-of-type(3) {

    margin-top: calc(32 * (100vw / 750));

  }

  

  .flexArea01 {

    width: calc(512 * (100vw / 750));

    margin: calc(137 * (100vw / 750)) 0 0 calc(60 * (100vw / 750));

  }

  .flexArea01 .txtItem.txt01_item {

    width: calc(168*(100vw / 750));

    top: calc(116*(100vw / 750));

    left: calc(60*(100vw / 750));

  }

  

  .flexArea02 {

    width: calc(624 * (100vw / 750));

    margin: calc(314 * (100vw / 750)) calc(61 * (100vw / 750)) 0 0;

    margin-left: auto;

  }

  .flexArea02 .txtItem.txt02_item {

    width: calc(223*(100vw / 750));

    top: calc(119*(100vw / 750));

    right: calc(58*(100vw / 750));

    z-index: 10;

  }

  

  .flexArea03 {

    width: calc(496 * (100vw / 750));

    margin: calc(437 * (100vw / 750)) 0 0 calc(116 * (100vw / 750));

    padding-bottom: calc(400 * (100vw / 750));

  }

  .flexArea03 .txtItem.txt03_item {

    width: calc(242*(100vw / 750));

    top: calc(102*(100vw / 750));

    right: calc(-21*(100vw / 750));

  }

}





/* ======================================================

contents02

======================================================== */



.contents02 {

  margin-top: 12.8rem;

  position: relative;

}

.contents02::after {

  content: '';

  display: block;

  width: 0.1rem;

  height: 6rem;

  top: 5rem;

  left: 50%;

  transform: translateX(-50%);

  background: #E48985;

  position: absolute;

  z-index: 20;

  pointer-events: none;

  animation: scrollDown 2s ease infinite;

}

.contents02 .flexArea04 .sb_txt01 {

  width: 11.4rem;

  margin: 0 auto;

}

.contents02 .flexArea04 .img04 {

  width: 66rem;

  margin: 11rem auto 0;

  overflow: hidden;

}

.contents02 .flexArea04 .img04_txt {

  font-size: 1.4rem;

  line-height: 3;

  letter-spacing: 0.15em;

  color: #727171;

  text-align: center;

  margin-top: 4.7rem;

  font-family: pragmatica, "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  font-weight: 300;

  font-style: normal;

}

.flexArea05 {

  margin-top: 12.6rem;

  position: relative;

}

.flexArea05::after {

  content: '';

  display: block;

  width: 0.1rem;

  height: 6rem;

  top: 5rem;

  left: 50%;

  transform: translateX(-50%);

  background: #E48985;

  position: absolute;

  z-index: 101;

  pointer-events: none;

  animation: scrollDown 2s ease infinite;

}

.flexArea05 ul {

  width: 94.6rem;

  display: flex;

  margin: 10rem auto 0;

  text-align: center;

}

.flexArea05 .sb_txt02 {

  width: 30rem;

  margin: 0 auto;

}

.flexArea05 ul li .icon_ttl {

  font-size: 1.6rem;

  letter-spacing: 0.15em;

  text-align: center;

  color: #E48985;

  font-family: pragmatica, sans-serif;

  font-weight: 400;

  font-style: normal;

}

.flexArea05 ul li .iconImg {

  width: 10rem;

}

.flexArea05 ul li:nth-of-type(1) {

  width: 24.6rem;

}

.flexArea05 ul li:nth-of-type(2) {

  width: 35rem;

  margin-left: 7.7rem;

}

.flexArea05 ul li:nth-of-type(3) {

  width: 22rem;

  margin-left: 8.1rem;

}

.flexArea05 ul li .icon_flex01 {

  display: flex;

  justify-content: space-between;

  width: 24rem;

  margin: 2.2rem auto 0;

}

.flexArea05 ul li .icon_flex02 {

  display: flex;

  justify-content: space-between;

  width: 35rem;

  margin-top: 2.2rem;

}

.flexArea05 ul li .icon_flex03 {

  display: flex;

  justify-content: space-between;

  width: 22rem;

  margin-top: 2.3rem;

}

.flexArea05 ul li p {

  font-size: 1.2rem;

  color: #E48985;

  white-space: nowrap;

  letter-spacing: 0.15em;

  margin-top: 1.5rem;

  font-family: pragmatica, "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  font-weight: 400;

  font-style: normal;

}

.flexArea05 .graphArea .graph_img {

  width: 48rem;

  margin: 7.8rem auto 0;

}

.flexArea05 .graphArea p {

  font-size: 1.2rem;

  letter-spacing: 0.15em;

  line-height: 2;

  text-align: center;

  margin-top: 5.4rem;

  font-family: pragmatica, "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  font-weight: 400;

  font-style: normal;

}



.flexArea06 {

  margin-top: 13.4rem;

  position: relative;

}

.flexArea06::after {

  content: '';

  display: block;

  width: 0.1rem;

  height: 6rem;

  top: 5rem;

  left: 50%;

  transform: translateX(-50%);

  background: #E48985;

  position: absolute;

  z-index: 11;

  pointer-events: none;

  animation: scrollDown 2s ease infinite;

}

.flexArea06::before {

  content: '';

  display: block;

  width: 100rem;

  height: 38rem;

  border-radius: 3rem;

  top: 8rem;

  left: 50%;

  transform: translateX(-50%);

  background: #FFFFFF;

  position: absolute;

  z-index: 9;

  opacity: 0.5;

  pointer-events: none;

}

.flexArea06 .flex_ttl {

  font-size: 3.2rem;

  letter-spacing: 0.2em;

  text-align: center;

  color: #E48985;

  font-family: var(--font-mincho);

  font-weight: 600;

}

.flexArea06 .flex_TxtBox {

  margin-top: 9.8rem;

  position: relative;

  z-index: 10;

}

.flexArea06 .flex_TxtBox p {

  font-size: 1.4rem;

  letter-spacing: 0.15em;

  text-align: center;

  color: #727171;

  font-family: pragmatica, "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  font-weight: 300;

  font-style: normal;

  line-height: 2.5;

}

.flexArea06 .flex_TxtBox p .pragmatica {

  font-family: pragmatica, sans-serif;

  font-weight: 400;

  font-style: normal;

}



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

  .contents02 {

    margin-top: calc(200 * (100vw / 750));

  }

  .contents02::after {

    width: calc(2 * (100vw / 750));

    height: calc(100 * (100vw / 750));

    top: calc(70 * (100vw / 750));

    left: 50%;

    transform: translateX(-50%);

  }

  .contents02 .flexArea04 .sb_txt01 {

    width: calc(158 * (100vw / 750));

    margin: 0 auto;

  }

  .contents02 .flexArea04 .img04 {

    width: calc(660 * (100vw / 750));

    margin: calc(180 * (100vw / 750)) auto 0;

  }

  .contents02 .flexArea04 .img04_txt {

    font-size: calc(23 * (100vw / 750));

    line-height: 3;

    margin-top: calc(58 * (100vw / 750));

  }

  .flexArea05 {

    margin-top: calc(135 * (100vw / 750));

  }

  .flexArea05::after {

    width: calc(2 * (100vw / 750));

    height: calc(100 * (100vw / 750));

    top: calc(70 * (100vw / 750));

    left: 50%;

    transform: translateX(-50%);

  }

  .flexArea05 ul {

    width: auto;

    display: block;

    margin: calc(165 * (100vw / 750)) auto 0;

    text-align: center;

  }

  .flexArea05 .sb_txt02 {

    width: calc(417 * (100vw / 750));

    margin: 0 auto;

  }

  .flexArea05 ul li .icon_ttl {

    font-size: calc(32 * (100vw / 750));

  }

  .flexArea05 ul li .iconImg {

    width: calc(200 * (100vw / 750));

  }

  .flexArea05 ul li:nth-of-type(1) {

    width: calc(442 * (100vw / 750));

    margin: 0 auto;

  }

  .flexArea05 ul li:nth-of-type(2) {

    width: calc(680 * (100vw / 750));

    margin: calc(115 * (100vw / 750)) auto 0;

  }

  .flexArea05 ul li:nth-of-type(3) {

    width: calc(440 * (100vw / 750));

    margin: calc(114 * (100vw / 750)) auto 0;

  }

  .flexArea05 ul li .icon_flex01 {

    display: flex;

    justify-content: space-between;

    width: calc(442*(100vw / 750));

    margin: calc(44*(100vw / 750)) auto 0;

  }

  .flexArea05 ul li .icon_flex02 {

    display: flex;

    justify-content: space-between;

    width: calc(680 * (100vw / 750));

    margin-top: calc(44 * (100vw / 750));

  }

  .flexArea05 ul li .icon_flex03 {

    display: flex;

    justify-content: space-between;

    width: calc(440 * (100vw / 750));

    margin-top: calc(47 * (100vw / 750));

  }

  .flexArea05 ul li p {

    font-size: calc(22 * (100vw / 750));

    margin-top: calc(30 * (100vw / 750));

  }

  .flexArea05 .graphArea .graph_img {

    width: calc(666 * (100vw / 750));

    margin: calc(117 * (100vw / 750)) auto 0;

  }

  .flexArea05 .graphArea p {

    font-size: calc(22 * (100vw / 750));

    letter-spacing: 0.15em;

    line-height: 2;

    margin-top: calc(70 * (100vw / 750));

  }

  

  .flexArea06 {

    margin-top: calc(146 * (100vw / 750));

  }

  .flexArea06::after {

    width: calc(2 * (100vw / 750));

    height: calc(100 * (100vw / 750));

    top: calc(70 * (100vw / 750));

    left: 50%;

    transform: translateX(-50%);

  }

  .flexArea06::before {

    width: calc(680*(100vw / 750));

    height: calc(962*(100vw / 750));

    border-radius: calc(40*(100vw / 750));

    top: calc(120*(100vw / 750));

  }

  .flexArea06 .flex_ttl {

    font-size: calc(44 * (100vw / 750));

    letter-spacing: 0.2em;

    text-align: center;

    color: #E48985;

    font-family: var(--font-mincho);

    font-weight: 600;

  }

  .flexArea06 .flex_TxtBox {

    width: calc(540 * (100vw / 750));

    text-align: justify;

    margin: calc(166 * (100vw / 750)) auto 0;

  }

  .flexArea06 .flex_TxtBox p {

    font-size: calc(23*(100vw / 750));

    line-height: 2.2;

    text-align: justify;

  }

  .only_pc {

    display: none;

  }

}





/* ======================================================

contents03

======================================================== */

.contents03 {

  margin-top: 1rem;

}

.contents03 .flexArea07 {

  width: 118rem;

  margin: 19rem auto 0;

  display: flex;

  justify-content: flex-start;

}

.contents03 .flexArea07 .img08_pc {

  width: 54rem;

  overflow: hidden;

}

.contents03 .flexArea07 .img08_txtBox {

  width: 48rem;

  margin: 5.2rem 0 0 13.2rem;

}

.contents03 .flexArea07 .img08_txtBox .item_top_txt p {

  font-size: 1.6rem;

  line-height: 2;

  font-family: var(--font-mincho);

  font-weight: 600;

  color: #E48985;

  text-align: center;

}

.contents03 .flexArea07 .img08_txtBox .img05_pc {

  width: 26rem;

  margin: 3.2rem auto 0;

}

.contents03 .flexArea07 .img08_txtBox .credit {

  color: #727171;

  margin-top: 2rem;

}

.contents03 .credit ul li:nth-of-type(1) {

  font-size: 1.4rem;

  margin-top: 1rem;

  text-align: center;

  letter-spacing: 0.15em;

  font-family: pragmatica, "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  font-weight: 300;

  font-style: normal;

}

.contents03 .credit ul li:nth-of-type(1) span.pragmatica {

  font-family: pragmatica, sans-serif;

  font-weight: 400;

  font-style: normal;

}

.contents03 .credit ul li:nth-of-type(2) {

  font-size: 1.4rem;

  margin-top: 1.2rem;

  font-family: pragmatica, sans-serif;

  font-weight: 400;

  font-style: normal;

  text-align: center;

}

.contents03 .credit ul li:nth-of-type(2) span.ml {

  font-family: pragmatica, "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  font-weight: 300;

  font-style: normal;

}

.contents03 .credit ul li:nth-of-type(2) span {

  font-size: 1.2rem;

}

.contents03 .credit ul li:nth-of-type(3) {

  width: 16rem;

  margin: 2rem auto 0;

}

.contents03 .btm_txt p {

  text-align: center;

  font-size: 1.2rem;

  line-height: 2;

  font-family: pragmatica, "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  font-weight: 300;

  font-style: normal;

  margin-top: 3.4rem;

  white-space: nowrap;

}

.contents03 .btm_txt p .pragmatica {

  font-family: pragmatica, sans-serif;

  font-weight: 400;

  font-style: normal;

}

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

  .contents03 {

    margin-top: calc(227 * (100vw / 750));

  }

  .contents03 .flexArea07 {

    width: auto;

    margin: calc(150 * (100vw / 750)) auto 0;

    display: flex;

    justify-content: flex-start;

    flex-direction: column;

  }

  .contents03 .flexArea07 .img08_pc {

    width: calc(750 * (100vw / 750));

  }

  .contents03 .flexArea07 .img08_txtBox {

    width: calc(590 * (100vw / 750));

    margin: calc(108 * (100vw / 750)) auto 0;

  }

  .contents03 .flexArea07 .img08_txtBox .item_top_txt p {

    font-size: calc(28 * (100vw / 750));

  }

  .contents03 .flexArea07 .img08_txtBox .img05_pc {

    width: calc(460 * (100vw / 750));

    margin: calc(65 * (100vw / 750)) auto 0;

  }

  .contents03 .flexArea07 .img08_txtBox .credit {

    color: #727171;

    margin-top: calc(60 * (100vw / 750));

  }

  .contents03 .credit ul li:nth-of-type(1) {

    font-size: calc(26 * (100vw / 750));

    margin-top: calc(31 * (100vw / 750));

  }

  .contents03 .credit ul li:nth-of-type(2) {

    font-size: calc(26 * (100vw / 750));

    margin-top: calc(30 * (100vw / 750));

  }

  .contents03 .credit ul li:nth-of-type(2) span {

    font-size: calc(22 * (100vw / 750));

  }

  .contents03 .credit ul li:nth-of-type(3) {

    width: calc(320 * (100vw / 750));

    margin: calc(56 * (100vw / 750)) auto 0;

  }

  .contents03 .btm_txt p {

    font-size: calc(22 * (100vw / 750));

    margin-top: calc(90 * (100vw / 750));

  }

}





.contents03 .flexArea08 {

  width: 118rem;

  margin: 14rem auto 0;

  display: flex;

  justify-content: flex-start;

  flex-direction: row-reverse;

}

.contents03 .flexArea08 .img09_pc {

  width: 54rem;

  overflow: hidden;

}

.contents03 .flexArea08 .img09_txtBox {

  width: 51.3rem;

  margin: 5.2rem 11rem 0 0;

}

.contents03 .flexArea08 .img09_txtBox .item_top_txt p {

  font-size: 1.6rem;

  line-height: 2;

  font-family: var(--font-mincho);

  font-weight: 600;

  color: #E48985;

  text-align: center;

}

.contents03 .flexArea08 .img09_txtBox .img06_pc {

  width: 26rem;

  margin: 3.2rem auto 0;

}

.contents03 .flexArea08 .img09_txtBox .img06_pc img {

  margin-left: -0.3rem;

}

.contents03 .flexArea08 .img09_txtBox .credit {

  color: #727171;

  margin-top: 2rem;

  text-align: center;

}

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

  .contents03 .flexArea08 {

    width: auto;

    margin: calc(110 * (100vw / 750)) auto 0;

    display: flex;

    justify-content: flex-start;

    flex-direction: column;

  }

  .contents03 .flexArea08 .img09_pc {

    width: calc(750 * (100vw / 750));

  }

  .contents03 .flexArea08 .img09_txtBox {

    width: calc(615 * (100vw / 750));

    margin: calc(106 * (100vw / 750)) auto 0;

  }

  .contents03 .flexArea08 .img09_txtBox .item_top_txt p {

    font-size: calc(28 * (100vw / 750));

  }

  .contents03 .flexArea08 .img09_txtBox .img06_pc {

    width: calc(460 * (100vw / 750));

    margin: calc(65 * (100vw / 750)) auto 0;

  }

  .contents03 .flexArea08 .img09_txtBox .img06_pc img {

    margin-left: calc(0 * (100vw / 750));

  }

  .contents03 .flexArea08 .credit ul li:nth-of-type(3) {

    margin: calc(58*(100vw / 750)) auto 0;

  }

  .contents03 .flexArea08 .img09_txtBox .credit {

    color: #727171;

    margin-top: calc(60 * (100vw / 750));

    text-align: center;

  }

}







.contents03 .flexArea09 {

  width: 118rem;

  margin: 14rem auto 0;

  display: flex;

  justify-content: flex-start;

}

.contents03 .flexArea09 .img10_pc {

  width: 54rem;

  overflow: hidden;

}

.contents03 .flexArea09 .img10_txtBox {

  width: 52.7rem;

  margin: 5.2rem 0 0 10.8rem;

}

.contents03 .flexArea09 .img10_txtBox .item_top_txt p {

  font-size: 1.6rem;

  line-height: 2;

  font-family: var(--font-mincho);

  font-weight: 600;

  color: #E48985;

  text-align: center;

}

.contents03 .flexArea09 .img10_txtBox .img07_pc {

  width: 26rem;

  margin: 3.2rem auto 0;

}

.contents03 .flexArea09 .img10_txtBox .img07_pc img {

  margin-left: -0.3rem;

}

.contents03 .flexArea09 .img10_txtBox .credit {

  color: #727171;

  margin-top: 2rem;

  text-align: center;

}

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

  .contents03 .flexArea09 {

    width: auto;

    margin: calc(113 * (100vw / 750)) auto 0;

    display: flex;

    justify-content: flex-start;

    flex-direction: column;

  }

  .contents03 .flexArea09 .img10_pc {

    width: calc(750 * (100vw / 750));

  }

  .contents03 .flexArea09 .img10_txtBox {

    width: calc(620 * (100vw / 750));

    margin: calc(105 * (100vw / 750)) auto 0;

  }

  .contents03 .flexArea09 .img10_txtBox .item_top_txt p {

    font-size: calc(28 * (100vw / 750));

  }

  .contents03 .flexArea09 .img10_txtBox .img07_pc {

    width: calc(460 * (100vw / 750));

    margin: calc(65 * (100vw / 750)) auto 0;

  }

  .contents03 .flexArea09 .img10_txtBox .img07_pc img {

    margin-left: calc(0 * (100vw / 750));

  }

  .contents03 .flexArea09 .img10_txtBox .credit {

    color: #727171;

    margin-top: calc(60 * (100vw / 750));

  }

}





/* ======================================================

contents04

======================================================== */

.contents04 {

  margin-top: 14rem;

  position: relative;

}

.contents04::before {

  content: '';

  display: block;

  width: 0.1rem;

  height: 6rem;

  top: 5rem;

  left: 50%;

  transform: translateX(-50%);

  background: #E48985;

  position: absolute;

  z-index: 20;

  pointer-events: none;

  animation: scrollDown 2s ease infinite;

}

.contents04 .sb_txt03 {

  width: 24.2rem;

  margin: 0 auto;

}

.contents04 .txtBox {

  margin-top: 10.2rem;

  pointer-events: none;

}

.contents04 .txtBox ul li:nth-of-type(1) {

  width: 33.4rem;

  margin: 0 auto;

}

.contents04 .txtBox ul li:nth-of-type(2) {

  width: 49rem;

  margin: 5.2rem auto 0;

}

.contents04 .txtBox ul li:nth-of-type(3) {

  width: 55.6rem;

  margin: 5.2rem auto 0;

}

.contents04 .All_btn {

  width: 46rem;

  margin: 10rem auto 0;

  padding-bottom: 10rem;

}

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

  .contents04 {

    margin-top: calc(150 * (100vw / 750));

  }

  .contents04::before {

    width: calc(2*(100vw / 750));

    height: calc(102*(100vw / 750));

    top: calc(74*(100vw / 750));

    animation: scrollDown 2s ease infinite;

  }

  .contents04 .sb_txt03 {

    width: calc(337 * (100vw / 750));

    margin: 0 auto;

  }

  .contents04 .txtBox {

    margin-top: calc(170 * (100vw / 750));

  }

  .contents04 .txtBox ul li:nth-of-type(1) {

    width: calc(524 * (100vw / 750));

    margin: 0 auto;

  }

  .contents04 .txtBox ul li:nth-of-type(2) {

    width: calc(406*(100vw / 750));

    margin: calc(80*(100vw / 750)) auto 0;

  }

  .contents04 .txtBox ul li:nth-of-type(3) {

    width: calc(588*(100vw / 750));

    margin: calc(80*(100vw / 750)) auto 0;

  }

  .contents04 .All_btn {

    width: calc(660*(100vw / 750));

    margin: calc(120*(100vw / 750)) auto 0;

    padding-bottom: calc(120*(100vw / 750));

  }

}



/* ======================================================

SP

======================================================== */

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



  .LP_page .only_pc {

    display: none;

  }



  #share {

    z-index: 5 !important;

    transition: transform .6s;

  }



  #share.move {

    transform: translateY(calc(-100 * (100vw / 750)));

  }



  .share-txt {

    display: none !important;

  }



  .LP_page sup {

    font-size: calc(20 * (100vw / 750));

  }



  .LP_page .activePoint,

  .LP_page .activeDelay {

    transform: translateY(calc(40 * (100vw / 750)));

  }



  .navigation_list {

    padding-left: 0;

  }



  .navigation_area.fixed {

    position: fixed;

    z-index: 100;

    bottom: 0;

    width: 100%;

    opacity: 0;

    pointer-events: none;

    transition: opacity 1s;

  }

  /* .navigation_area.fixed .navigation_list li a {

    height: calc(114 * (100vw / 750));

    padding: calc(16 *(100vw / 750)) 0 0 0;

  }



  .navigation_area.fixed .navigation_list li:nth-of-type(n+2) a::before {

    height: calc(60 * (100vw / 750));

  } */



}



/* ======================================================

PC

======================================================== */

.contents_bgArea {

  background: url(../img/pc_bg.jpg) no-repeat;

  background-blend-mode:lighten;

  display: block;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

}

@media screen and  (min-width:769px) {

  .only_sp {

    display: none;

  }

}





/* ======================================================

レスポンシブ＆タブレット対応

======================================================== */

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

  html {

    font-size: calc(10 * (100vw / 1600));

  }

}





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

  .contents_bgArea {

    background: url(../img/bg_sp.png);

    background-repeat: repeat-y;

    background-blend-mode: lighten;

    display: block;

    width: 100%;

    height: 100%;

    background-size: contain;

    background-position: top;

    object-fit: cover;

  }

}







/* ======================================================

テキストアニメーション｜左から右

======================================================== */



/* 上から下 */

.js-clip {

  opacity: 0;

  clip-path: inset(0 100% 0 0);

  transition: clip-path 1.8s, opacity 1.8s;

}

.js-clip.js-active {

  opacity: 1;

  clip-path: inset(-10% -10% -10% -10%);

}



/* 上から下 */

.js-mask-text {

  mask-image: linear-gradient(180deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);

  -webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);

  mask-size: 100% 300%;

  -webkit-mask-size: 100% 300%;

  mask-repeat: no-repeat;

  -webkit-mask-repeat: no-repeat;

  mask-position: 130% 130%;

  -webkit-mask-position: 130% 130%;

}

.js-mask-text.js-mask-active {

  animation: mask-animation 2s linear forwards;

}

@keyframes mask-animation {

  0% {

    mask-position: 130% 130%;

    -webkit-mask-position: 130% 130%;

  }

  100% {

    mask-position: 0 0;

    -webkit-mask-position: 0 0;

  }

}



/* フェード */

.js-fadeIn-load,

.js-fadeIn {

  opacity: 0;

  transition: opacity 1.8s;

}



.js-fadeIn-load.js-load-active,

.js-fadeIn.js-fade-active {

  opacity: 1;

}





.js-scaleOut img {

  opacity: 0;

  transition: all 2s ease 0s;

  transform: scale(1.05);

}



.js-scaleOut.js-scale-active img {

  opacity: 1;

  transform: scale(1);

}



/* 上から下 に線が伸びる */

@keyframes scrollDown{

  0%{

    transform-origin: top;

    transform: scaleY(0);

  }

  45%{

    transform-origin: top;

    transform: scaleY(1);

  }

  55%{

    transform-origin: bottom;

    transform: scaleY(1);

  }

  100%{

    transform-origin: bottom;

    transform: scaleY(0);

  }

}



/* =================================================

上から降らせるアニメーション

=================================================*/

.fall-animation {

  position: relative;

}



.fall-animation .js-fall {

  pointer-events: none;

  width: 100%;

  height: 100%;

  margin: 0 auto;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  overflow: hidden;

}



.fall-animation .js-fall {

  opacity: 0;

  transition: opacity 1.8s;

}

.fall-animation .js-fall.js-fall-active {

  opacity: 1;

}



.fall-animation .js-fall.js-fall-active .fall__elem--ptn01 {

  -webkit-animation-name: fall-ver1, sway-ver1;

  animation-name: fall-ver1, sway-ver1;

}



.fall-animation .js-fall.js-fall-active .fall__elem--ptn02 {

  -webkit-animation-name: fall-ver2, sway-ver2;

  animation-name: fall-ver2, sway-ver2;

}



.fall-animation .js-fall.js-fall-active .fall__elem--ptn03 {

  -webkit-animation-name: fall-ver3, sway-ver3;

  animation-name: fall-ver3, sway-ver3;

}



.fall__elem {

  position: absolute;

  z-index: 50;

  pointer-events: none;

  -webkit-animation-timing-function: linear, ease-in-out;

  animation-timing-function: linear, ease-in-out;

  -webkit-animation-iteration-count: infinite, infinite;

  animation-iteration-count: infinite, infinite;

  -webkit-animation-direction: normal, alternate;

  animation-direction: normal, alternate;

}



.fall__elem:nth-of-type(1) {

  -webkit-animation-duration: 75s, 5s;

  animation-duration: 75s, 5s;

  top: 2%;

  left: 30%;

}



.fall__elem:nth-of-type(2) {

  -webkit-animation-duration: 75s, 5s;

  animation-duration: 75s, 5s;

  top: 6%;

  left: 10%;

}



.fall__elem:nth-of-type(3) {

  -webkit-animation-duration: 75s, 5s;

  animation-duration: 75s, 5s;

  top: 12%;

  left: 80%;

}



.fall__elem:nth-of-type(4) {

  -webkit-animation-duration: 75s, 5s;

  animation-duration: 75s, 5s;

  top: 10%;

  left: 30%;

}



.fall__elem:nth-of-type(5) {

  -webkit-animation-duration: 75s, 5s;

  animation-duration: 75s, 5s;

  top: 4%;

  left: 60%;

}



.fall__elem:nth-of-type(6) {

  -webkit-animation-duration: 75s, 5s;

  animation-duration: 75s, 5s;

  top: 82%;

  left: 18%;

}



.fall__elem:nth-of-type(7) {

  -webkit-animation-duration: 75s, 5s;

  animation-duration: 75s, 5s;

  top: 16%;

  left: 31%;

}



.fall__elem:nth-of-type(8) {

  -webkit-animation-duration: 75s, 5s;

  animation-duration: 75s, 5s;

  top: 11%;

  left: 52%;

}



.fall__elem:nth-of-type(9) {

  -webkit-animation-duration: 75s, 5s;

  animation-duration: 75s, 5s;

  top: 13%;

  left: 71%;

}



.fall__elem:nth-of-type(10) {

  -webkit-animation-duration: 75s, 5s;

  animation-duration: 75s, 5s;

  top: 15%;

  left: 2%;

}



.fall__elem:nth-of-type(11) {

  -webkit-animation-duration: 90s, 5s;

  animation-duration: 90s, 5s;

  top: 42%;

  left: 1%;

}



.fall__elem:nth-of-type(12) {

  -webkit-animation-duration: 90s, 5s;

  animation-duration: 90s, 5s;

  top: 16%;

  left: 37%;

}



.fall__elem:nth-of-type(13) {

  -webkit-animation-duration: 90s, 5s;

  animation-duration: 90s, 5s;

  top: 22%;

  left: 11%;

}



.fall__elem:nth-of-type(14) {

  -webkit-animation-duration: 90s, 5s;

  animation-duration: 90s, 5s;

  top: 45%;

  left: 62%;

}



.fall__elem:nth-of-type(15) {

  -webkit-animation-duration: 90s, 5s;

  animation-duration: 90s, 5s;

  top: 48%;

  left: 50%;

}



.fall__elem:nth-of-type(16) {

  -webkit-animation-duration: 90s, 5s;

  animation-duration: 90s, 5s;

  top: 62%;

  left: 24%;

}



.fall__elem:nth-of-type(17) {

  -webkit-animation-duration: 90s, 5s;

  animation-duration: 90s, 5s;

  top: 32%;

  left: 72%;

}



.fall__elem:nth-of-type(18) {

  -webkit-animation-duration: 90s, 5s;

  animation-duration: 90s, 5s;

  top: 24%;

  left: 66%;

}



.fall__elem:nth-of-type(19) {

  -webkit-animation-duration: 90s, 5s;

  animation-duration: 90s, 5s;

  top: 42%;

  left: 30%;

}



.fall__elem:nth-of-type(20) {

  -webkit-animation-duration: 90s, 5s;

  animation-duration: 90s, 5s;

  top: 72%;

  left: 42%;

}



.fall__elem:nth-of-type(21) {

  -webkit-animation-duration: 60s, 5s;

  animation-duration: 60s, 5s;

  top: 26%;

  left: 88%;

}



.fall__elem:nth-of-type(22) {

  -webkit-animation-duration: 60s, 5s;

  animation-duration: 60s, 5s;

  top: 17%;

  left: 90%;

}



.fall__elem:nth-of-type(23) {

  -webkit-animation-duration: 60s, 5s;

  animation-duration: 60s, 5s;

  top: 52%;

  left: 10%;

}



.fall__elem:nth-of-type(24) {

  -webkit-animation-duration: 60s, 5s;

  animation-duration: 60s, 5s;

  top: 28%;

  left: 49%;

}



.fall__elem:nth-of-type(25) {

  -webkit-animation-duration: 60s, 5s;

  animation-duration: 60s, 5s;

  top: 39%;

  left: 25%;

}



.fall__elem:nth-of-type(26) {

  -webkit-animation-duration: 60s, 5s;

  animation-duration: 60s, 5s;

  top: 44%;

  left: 44%;

}



.fall__elem:nth-of-type(27) {

  -webkit-animation-duration: 60s, 5s;

  animation-duration: 60s, 5s;

  top: 7%;

  left: 7%;

}



.fall__elem:nth-of-type(28) {

  -webkit-animation-duration: 60s, 5s;

  animation-duration: 60s, 5s;

  top: 17%;

  left: 71%;

}



.fall__elem:nth-of-type(29) {

  -webkit-animation-duration: 60s, 5s;

  animation-duration: 60s, 5s;

  top: 29%;

  left: 52%;

}



.fall__elem:nth-of-type(30) {

  -webkit-animation-duration: 60s, 5s;

  animation-duration: 60s, 5s;

  top: 15%;

  left: 90%;

}





@-webkit-keyframes fall-ver1 {

  to {

    top: 120%;

  }

}



@keyframes fall-ver1 {

  to {

    top: 120%;

  }

}



@-webkit-keyframes fall-ver2 {

  to {

    top: 150%;

  }

}



@keyframes fall-ver2 {

  to {

    top: 150%;

  }

}



@-webkit-keyframes fall-ver3 {

  to {

    top: 100%;

  }

}



@keyframes fall-ver3 {

  to {

    top: 100%;

  }

}





@-webkit-keyframes sway-ver1 {

  from {

    -webkit-transform: translateX(0px) rotate(0deg);

    transform: translateX(0px) rotate(0deg);

  }

  to {

    -webkit-transform: translateX(200px) rotate(-45deg);

    transform: translateX(200px) rotate(-45deg);

  }

}



@keyframes sway-ver1 {

  from {

    -webkit-transform: translateX(0px) rotate(0deg);

    transform: translateX(0px) rotate(0deg);

  }

  to {

    -webkit-transform: translateX(200px) rotate(-45deg);

    transform: translateX(200px) rotate(-45deg);

  }

}



@-webkit-keyframes sway-ver2 {

  from {

    -webkit-transform: translateX(200px) rotate(-25deg);

    transform: translateX(200px) rotate(-25deg);

  }

  to {

    -webkit-transform: translateX(0px) rotate(15deg);

    transform: translateX(0px) rotate(15deg);

  }

}



@keyframes sway-ver2 {

  from {

    -webkit-transform: translateX(200px) rotate(-25deg);

    transform: translateX(200px) rotate(-25deg);

  }

  to {

    -webkit-transform: translateX(0px) rotate(15deg);

    transform: translateX(0px) rotate(15deg);

  }

}



@-webkit-keyframes sway-ver3 {

  from {

    -webkit-transform: translateX(150px) rotate(-35deg);

    transform: translateX(150px) rotate(-35deg);

  }

  to {

    -webkit-transform: translateX(0px) rotate(15deg);

    transform: translateX(0px) rotate(15deg);

  }

}



@keyframes sway-ver3 {

  from {

    -webkit-transform: translateX(150px) rotate(-35deg);

    transform: translateX(150px) rotate(-35deg);

  }

  to {

    -webkit-transform: translateX(0px) rotate(15deg);

    transform: translateX(0px) rotate(15deg);

  }

}



.fall__size01 img {

  width: 20px !important;

  height: 20px !important;

}

.fall__size02 img {

  width: 30px !important;

  height: 30px !important;

}