@charset "UTF-8";
/* フォント定設
-----------------------------------------------------------------*/
@font-face {
  font-family: 'MyYuGothicM';
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
  /* 游ゴシックMediumが存在しないWindows8.1用 */ }

@font-face {
  font-family: 'MyYuGothicM';
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic Bold");
  /* PostScript Nameを認識できないChrome用にFull Nameを指定 */ }

@font-face {
  font-family: 'MyYuMinchoM';
  font-weight: normal;
  src: local("YuMincho-Medium"), local("Yu Mincho Medium"), local("YuMincho-Regular");
  /* 游明朝Mediumが存在しないWindows8.1用 */ }

@font-face {
  font-family: 'MyYuMinchoM';
  font-weight: bold;
  src: local("YuMincho-Demibold"), local("Yu Mincho");
  /* PostScript Nameを認識できないChrome用にFull Nameを指定 */ }

/* イージング
-----------------------------------------------------------------*/
/* デュレーション
-----------------------------------------------------------------*/
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

body {
  background-color: #F5F5F5;
  color: #111111; }
  @media print, screen and (max-width: 767px) {
    body.no-scroll {
      overflow: hidden;
      height: 100vh;
      -ms-touch-action: none;
      touch-action: none; } }

.c-basicInview {
  opacity: 0;
  -webkit-transition: opacity .9s ease-in-out, translate .9s ease-in-out;
  transition: opacity .9s ease-in-out, translate .9s ease-in-out; }
  @media print, screen and (min-width: 768px) {
    .c-basicInview {
      translate: 0 calc(50 / 1280 * 100vw) 0; } }
  @media print, screen and (max-width: 767px) {
    .c-basicInview {
      translate: 0 30px 0; } }
  .c-basicInview.is-show {
    opacity: 1;
    translate: 0 0 0; }

.c-titleArrow {
  display: inline-block;
  aspect-ratio: 21.65 / 15.86;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; }
  .c-navList_title .c-titleArrow {
    background-image: url(../images/title_arrow-w.svg); }
    @media print, screen and (min-width: 768px) {
      .c-navList_title .c-titleArrow {
        width: calc(18 / 1280 * 100vw);
        margin: 0 calc(6 / 1280 * 100vw) 0; } }
    @media print, screen and (max-width: 767px) {
      .c-navList_title .c-titleArrow {
        width: 18px;
        margin: 0 6px 0; } }
  .c-sectionTitle_main .c-titleArrow {
    background-image: url(../images/title_arrow-b.svg); }
    @media print, screen and (min-width: 768px) {
      .c-sectionTitle_main .c-titleArrow {
        width: calc(21 / 1280 * 100vw);
        margin: 0 calc(10 / 1280 * 100vw) 0; } }
    @media print, screen and (max-width: 767px) {
      .c-sectionTitle_main .c-titleArrow {
        width: 21px;
        margin: 0 10px 0; } }

.modalTransitionOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s; }

.modalTransitionOverlay.is-modalOpen {
  opacity: 1;
  pointer-events: auto; }

.fixedButton {
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  height: 36px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity .3s ease, visibility .3s ease;
  transition: opacity .3s ease, visibility .3s ease;
  background-color: #111111; }
  .fixedButton.is-fixed {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; }

.fixedButton_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 16px; }

.fixedButton_text {
  color: #FFFFFF;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  font-size: 11px;
  letter-spacing: .12em; }

.fixedButton_arrow {
  margin-top: -2px; }

.fixedButton_innerLink {
  display: block;
  padding: 11px 0; }

/* fv
-----------------------------------------------------------------*/
.fv {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background-color: #F7F7F7;
  z-index: 3; }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .fv {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; } }
  .is-fvLogoShow .fv::after {
    opacity: 1; }

.fvList {
  width: 50%;
  height: 100%; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .fvList {
      width: 100%; }
      .fvList.bg {
        position: relative; }
        .fvList.bg:before {
          visibility: hidden;
          opacity: 0; }
        .fvList.bg:before {
          content: "";
          -webkit-transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
          transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.3);
          pointer-events: none;
          z-index: 1;
          opacity: 1;
          visibility: visible; } }
  .fvList .slick-slider,
  .fvList .slick-list,
  .fvList .slick-track,
  .fvList .slick-slide > div {
    height: 100%; }

.fvList_node {
  height: 100%; }
  .fvList_node img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }
    @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
      .fvList_node img {
        height: 100svh; } }

@media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
  .fvInfo {
    position: relative;
    width: 50%; } }

@media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .fvInfo {
    position: absolute;
    bottom: 80px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity .3s ease, visibility .3s ease;
    transition: opacity .3s ease, visibility .3s ease; }
    .fvInfo.is-hide {
      opacity: 0;
      visibility: hidden; } }

@media print, screen and (max-width: 767px) {
  .fvInfo {
    position: absolute;
    top: calc(175 / 667 * 100vh);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity .3s ease, visibility .3s ease;
    transition: opacity .3s ease, visibility .3s ease; }
    .fvInfo.is-hide {
      opacity: 0;
      visibility: hidden; } }

@media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
  .fvInfo_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); } }

.fvMain_title {
  opacity: 1;
  translate: 0 0;
  -webkit-transition: opacity .9s ease .3s, translate .9s ease .3s, visibility .9s ease .3s;
  transition: opacity .9s ease .3s, translate .9s ease .3s, visibility .9s ease .3s; }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .fvMain_title {
      width: calc(400 / 1280 * 100vw); } }
  @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .fvMain_title {
      width: 540px; } }
  @media print, screen and (max-width: 767px) {
    .fvMain_title {
      width: calc(315 / 375 * 100vw); } }
  .fvMain_title img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain; }
  .is-fvLogoShow .fvMain_title {
    opacity: 0;
    translate: 0 calc(-50 / 1280 * 100vw);
    visibility: hidden; }

.fvSub_title {
  font-family: "Amiri", serif; }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .fvSub_title {
      margin-top: calc(22 / 1280 * 100vw);
      padding-left: calc(30 / 1280 * 100vw); } }
  @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .fvSub_title {
      color: #FFFFFF;
      margin-top: 25px;
      padding-left: 40px; } }
  @media print, screen and (max-width: 767px) {
    .fvSub_title {
      color: #FFFFFF;
      margin-top: 24px;
      padding-left: calc(25 / 375 * 100vw); } }

.fvCatch {
  font-family: "Noto Sans JP", "Noto Sans", sans-serif; }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .fvCatch {
      font-size: max(13 / 1280 * 100vw, 10.4px);
      letter-spacing: .13em;
      margin-top: calc(64 / 1280 * 100vw); } }
  @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .fvCatch {
      color: #FFFFFF;
      margin-top: 64px;
      font-size: 18px;
      letter-spacing: .12em; } }
  @media print, screen and (max-width: 767px) {
    .fvCatch {
      color: #FFFFFF;
      margin-top: 32px;
      font-size: 13px;
      letter-spacing: .12em;
      line-height: 1.8; } }

.fvLead {
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  line-height: 2; }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .fvLead {
      font-size: max(11 / 1280 * 100vw, 8.8px);
      letter-spacing: .12em;
      margin-top: calc(16 / 1280 * 100vw); } }
  @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .fvLead {
      color: #FFFFFF;
      margin-top: 24px;
      font-size: 14px;
      letter-spacing: .1em; } }
  @media print, screen and (max-width: 767px) {
    .fvLead {
      color: #fff;
      margin-top: 16px;
      font-size: 11px;
      letter-spacing: .12em; } }

.fvLogo {
  position: absolute;
  aspect-ratio: 145.832/160;
  -webkit-transition: opacity .9s ease 2.5s;
  transition: opacity .9s ease 2.5s;
  z-index: 10; }
  .is-coverEnd .fvLogo {
    opacity: 1; }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .fvLogo {
      top: calc(25 / 1280 * 100vw);
      right: calc(35 / 1280 * 100vw);
      width: calc(98 / 1280 * 100vw); } }
  @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .fvLogo {
      z-index: 1000000000;
      width: 120px;
      top: 20px;
      right: 20px; } }
  @media print, screen and (max-width: 767px) {
    .fvLogo {
      z-index: 1000000000;
      width: 78px;
      top: 20px;
      right: 20px; } }
  .fvLogo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain; }

.fv_scrollBar {
  position: absolute;
  bottom: 0;
  left: calc(105 / 1280 * 100vw); }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .fv_scrollBar {
      z-index: 1;
      right: 30px;
      left: initial;
      bottom: 1px;
      -webkit-transition: opacity 1s ease, visibility 1s ease;
      transition: opacity 1s ease, visibility 1s ease; }
      .fv_scrollBar.is-hide {
        opacity: 0;
        visibility: hidden; } }

.fv_scrollBar_inner {
  position: absolute;
  bottom: 0;
  left: 20px;
  width: 2px;
  height: 80px;
  overflow: hidden;
  background-color: #ccc;
  z-index: 1; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .fv_scrollBar_inner {
      left: 3%;
      height: 50px; } }
  .fv_scrollBar_inner::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 80px;
    background-color: #707070;
    -webkit-animation: scrolldown 4s ease infinite 1s;
    animation: scrolldown 4s ease infinite 1s; }
    @media print, screen and (max-width: 767px) {
      .fv_scrollBar_inner::after {
        height: 60px; } }

@-webkit-keyframes scrolldown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); } }

@keyframes scrolldown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); } }

.fvScroll_nav {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .7s ease-in-out, visibility .7s ease-in-out;
  transition: opacity .7s ease-in-out, visibility .7s ease-in-out; }
  .fvScroll_nav.is-show {
    opacity: 1;
    visibility: visible; }

/* fixed ナビゲーション
-----------------------------------------------------------------*/
.sectionBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-transition: .3s ease;
  transition: .3s ease;
  background-image: url("/feature/layered-style-summer-0509/assets/images/section1/section1_bg-pc.jpg");
  background-size: cover;
  background-position: center; }
  @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .sectionBg {
      background-image: url("/feature/layered-style-summer-0509/assets/images/section1/section1_bg-tab.jpg"); } }
  .sectionBg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
    z-index: 10;
    border-radius: 10px; }

.sectionFix {
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1; }
  @media print, screen and (min-width: 768px) {
    .sectionFix {
      position: fixed;
      width: 50%;
      min-width: 400px; } }
  @media print, screen and (max-width: 767px) {
    .sectionFix {
      position: sticky;
      width: 100%;
      background-image: url(../images/fvslider1-sp.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }
      .sectionFix:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.32); } }

.sectionFix_navHead {
  font-family: "Amiri", serif;
  letter-spacing: .04em; }
  @media print, screen and (min-width: 768px) {
    .sectionFix_navHead {
      margin-bottom: calc(32 / 720 * 100vh);
      font-size: max(14 / 1280 * 100vw, 11.2px); } }
  @media print, screen and (max-width: 767px) {
    .sectionFix_navHead {
      margin-bottom: 32px;
      font-size: 12px; } }

.sectionFix_nav {
  color: #fff;
  position: absolute; }
  @media print, screen and (min-width: 768px) {
    .sectionFix_nav {
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); } }
  @media print, screen and (max-width: 767px) {
    .sectionFix_nav {
      z-index: 1;
      top: calc(202 / 667 * 100vh);
      left: calc(30 / 375 * 100vw); } }

.sectionFix_navList_node {
  position: relative; }
  @media print, screen and (min-width: 768px) {
    .sectionFix_navList_node {
      padding-left: calc(50 / 1280 * 100vw); }
      .sectionFix_navList_node:before {
        content: "";
        position: absolute;
        top: calc(9 / 1280 * 100vw);
        left: 0;
        width: 0;
        height: 1px;
        background: #fff;
        -webkit-transition: width .5s ease;
        transition: width .5s ease; } }
  @media print, screen and (min-width: 768px) {
    .sectionFix_navList_node + .sectionFix_navList_node {
      margin-top: calc(24 / 720 * 100vh); } }
  @media print, screen and (max-width: 767px) {
    .sectionFix_navList_node + .sectionFix_navList_node {
      margin-top: 24px; } }
  .sectionFix_navList_node.is-current:before {
    width: calc(32 / 1280 * 100vw); }
  @media (hover: hover) {
    .sectionFix_navList_node:has(.sectionFix_navList_link:hover)::before {
      width: calc(32 / 1280 * 100vw); } }

.sectionFix_navList_link {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "num title"; }
  @media print, screen and (min-width: 768px) {
    .sectionFix_navList_link {
      -ms-grid-columns: calc(32 / 1280 * 100vw) 1fr;
      grid-template-columns: calc(32 / 1280 * 100vw) 1fr;
      gap: calc(16 / 720 * 100vh) 0; } }
  @media print, screen and (max-width: 767px) {
    .sectionFix_navList_link {
      -ms-grid-columns: 25px 1fr;
      grid-template-columns: 25px 1fr;
      gap: calc(25 / 667 * 100vh) 0;
      -webkit-box-align: baseline;
      -ms-flex-align: baseline;
      align-items: baseline; } }

.sectionFix_navList_num {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: num;
  font-family: "Amiri", serif; }
  @media print, screen and (min-width: 768px) {
    .sectionFix_navList_num {
      font-size: max(20 / 1280 * 100vw, 16px); } }
  @media print, screen and (max-width: 767px) {
    .sectionFix_navList_num {
      font-size: 20px; } }

.sectionFix_navList_title {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: title;
  letter-spacing: .04em;
  font-family: "Amiri", serif; }
  @media print, screen and (min-width: 768px) {
    .sectionFix_navList_title {
      font-size: max(18 / 1280 * 100vw, 14.4px); } }
  @media print, screen and (max-width: 767px) {
    .sectionFix_navList_title {
      font-size: 18px; } }
  .sectionFix_navList_title .sub {
    display: block;
    letter-spacing: .08em; }
    @media print, screen and (min-width: 768px) {
      .sectionFix_navList_title .sub {
        font-size: max(11 / 1280 * 100vw, 8.8px);
        margin-top: calc(4 / 1280 * 100vw); } }
    @media print, screen and (max-width: 767px) {
      .sectionFix_navList_title .sub {
        margin-top: 4px;
        font-size: 11px; } }

.sectionFix_navIndex_button {
  position: absolute;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  letter-spacing: .08em; }
  @media print, screen and (min-width: 768px) {
    .sectionFix_navIndex_button {
      cursor: pointer;
      width: calc(160 / 1280 * 100vw);
      font-size: max(12 / 1280 * 100vw, 9.6px);
      left: calc(200 / 1280 * 100vw);
      bottom: calc(90 / 720 * 100vh);
      -webkit-transition: .3s ease;
      transition: .3s ease; }
      .sectionFix_navIndex_button:hover {
        width: calc(180 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .sectionFix_navIndex_button {
      left: calc(30 / 375 * 100vw);
      bottom: calc(48 / 667 * 100vh);
      font-size: 16px;
      letter-spacing: .08em; } }
  .sectionFix_navIndex_button:after, .sectionFix_navIndex_button:before {
    content: "";
    position: absolute;
    height: 1px;
    background-color: #fff; }
  .sectionFix_navIndex_button:after {
    bottom: -14px;
    left: 0; }
    @media print, screen and (min-width: 768px) {
      .sectionFix_navIndex_button:after {
        width: 100%; } }
    @media print, screen and (max-width: 767px) {
      .sectionFix_navIndex_button:after {
        width: 228px; } }
  .sectionFix_navIndex_button:before {
    bottom: -10px;
    right: -41px;
    width: 12px;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top; }
    @media print, screen and (min-width: 768px) {
      .sectionFix_navIndex_button:before {
        right: -1px; } }
  .sectionFix_navIndex_button .en {
    font-family: "Amiri", serif; }
    @media print, screen and (min-width: 768px) {
      .sectionFix_navIndex_button .en {
        font-size: max(16 / 1280 * 100vw, 12.8px); } }
    @media print, screen and (max-width: 767px) {
      .sectionFix_navIndex_button .en {
        font-size: 16px; } }
  .sectionFix_navIndex_button .ja {
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    letter-spacing: .12em; }
    @media print, screen and (min-width: 768px) {
      .sectionFix_navIndex_button .ja {
        font-size: max(12 / 1280 * 100vw, 9.6px); } }
    @media print, screen and (max-width: 767px) {
      .sectionFix_navIndex_button .ja {
        font-size: 12px; } }

/* トップ インデックスナビゲーション
-----------------------------------------------------------------*/
.c-navIndex {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  z-index: 2; }
  @media print, screen and (min-width: 1025px) {
    .c-navIndex {
      padding: calc(120 / 1280 * 100vw); } }
  @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .c-navIndex {
      padding: 50px; } }
  @media print, screen and (max-width: 767px) {
    .c-navIndex {
      padding: 48px 20px; } }

.c-navIndex_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none; }
  @media print, screen and (min-width: 768px) {
    .c-navIndex_list {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
      gap: calc(10 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-navIndex_list {
      gap: 5px; } }

@media print, screen and (min-width: 768px) {
  .c-navIndex_list_node {
    cursor: pointer;
    width: calc((100% - vwPc(20)) / 3);
    -webkit-transition: .5s ease;
    transition: .5s ease; }
    .c-navIndex_list_node:hover {
      opacity: .7; } }

@media print, screen and (max-width: 767px) {
  .c-navIndex_list_node {
    width: 49.2%; } }

.c-navIndex_list_node img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover; }

.c-navIndex_list_link {
  display: block; }

.c-titleRowWrap {
  position: relative; }

/* タイトル
-----------------------------------------------------------------*/
.c-title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto; }

.c-titleRow {
  pointer-events: none;
  position: absolute; }
  @media print, screen and (min-width: 768px) {
    .c-titleRow {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; } }
  @media print, screen and (min-width: 768px) {
    .c-titleRow.top {
      top: 0;
      left: calc(50 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-titleRow.top {
      top: calc(87 / 667 * 100vh);
      left: 0; } }
  @media print, screen and (min-width: 768px) {
    .c-titleRow.second {
      top: calc(285 / 1280 * 100vw);
      left: calc(350 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-titleRow.second {
      top: calc(192 / 375 * 100vw);
      right: -5px; } }
  @media print, screen and (min-width: 768px) {
    .c-titleRow.third {
      top: calc(480 / 1280 * 100vw);
      left: calc(605 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-titleRow.third {
      top: calc(395 / 375 * 100vw);
      left: calc(20 / 375 * 100vw); } }
  @media print, screen and (min-width: 768px) {
    .c-titleRow.last {
      top: calc(850 / 1280 * 100vw);
      left: calc(178 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-titleRow.last {
      top: calc(691 / 375 * 100vw);
      right: -5px; } }

.c-titleRow_inner span {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: "Amiri", serif;
  line-height: 1;
  color: #fff;
  opacity: 1;
  -webkit-transform: rotate3d(-1, 2, 1, 0) translate3d(0, 0, 0);
  transform: rotate3d(-1, 2, 1, 0) translate3d(0, 0, 0);
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  will-change: transform, opacity; }

.c-titleRow_inner span:nth-child(1) {
  -webkit-transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
  transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
  transition: transform 0.5s 0.4s, opacity 0.5s 0.4s;
  transition: transform 0.5s 0.4s, opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s; }

.c-titleRow_inner span:nth-child(2) {
  -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
  transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
  transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
  transition: transform 0.5s 0.5s, opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s; }

.c-titleRow_inner span:nth-child(3) {
  -webkit-transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s;
  transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s;
  transition: transform 0.5s 0.6s, opacity 0.5s 0.6s;
  transition: transform 0.5s 0.6s, opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s; }

.c-titleRow_inner span:nth-child(4) {
  -webkit-transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
  transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
  transition: transform 0.5s 0.7s, opacity 0.5s 0.7s;
  transition: transform 0.5s 0.7s, opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s; }

.c-titleRow_inner span:nth-child(5) {
  -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
  transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s; }

.c-titleRow_inner span:nth-child(6) {
  -webkit-transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s;
  transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s;
  transition: transform 0.5s 0.9s, opacity 0.5s 0.9s;
  transition: transform 0.5s 0.9s, opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s; }

.c-titleRow_inner span:nth-child(7) {
  -webkit-transition: opacity 0.5s 1s, -webkit-transform 0.5s 1s;
  transition: opacity 0.5s 1s, -webkit-transform 0.5s 1s;
  transition: transform 0.5s 1s, opacity 0.5s 1s;
  transition: transform 0.5s 1s, opacity 0.5s 1s, -webkit-transform 0.5s 1s; }

.c-titleRow_inner span:nth-child(8) {
  -webkit-transition: opacity 0.5s 1.1s, -webkit-transform 0.5s 1.1s;
  transition: opacity 0.5s 1.1s, -webkit-transform 0.5s 1.1s;
  transition: transform 0.5s 1.1s, opacity 0.5s 1.1s;
  transition: transform 0.5s 1.1s, opacity 0.5s 1.1s, -webkit-transform 0.5s 1.1s; }

.c-titleRow_inner span:nth-child(9) {
  -webkit-transition: opacity 0.5s 1.2s, -webkit-transform 0.5s 1.2s;
  transition: opacity 0.5s 1.2s, -webkit-transform 0.5s 1.2s;
  transition: transform 0.5s 1.2s, opacity 0.5s 1.2s;
  transition: transform 0.5s 1.2s, opacity 0.5s 1.2s, -webkit-transform 0.5s 1.2s; }

.c-titleRow_inner span:nth-child(10) {
  -webkit-transition: opacity 0.5s 1.3s, -webkit-transform 0.5s 1.3s;
  transition: opacity 0.5s 1.3s, -webkit-transform 0.5s 1.3s;
  transition: transform 0.5s 1.3s, opacity 0.5s 1.3s;
  transition: transform 0.5s 1.3s, opacity 0.5s 1.3s, -webkit-transform 0.5s 1.3s; }

.c-titleRow_inner span:nth-child(11) {
  -webkit-transition: opacity 0.5s 1.4s, -webkit-transform 0.5s 1.4s;
  transition: opacity 0.5s 1.4s, -webkit-transform 0.5s 1.4s;
  transition: transform 0.5s 1.4s, opacity 0.5s 1.4s;
  transition: transform 0.5s 1.4s, opacity 0.5s 1.4s, -webkit-transform 0.5s 1.4s; }

.c-titleRow_inner span:nth-child(12) {
  -webkit-transition: opacity 0.5s 1.5s, -webkit-transform 0.5s 1.5s;
  transition: opacity 0.5s 1.5s, -webkit-transform 0.5s 1.5s;
  transition: transform 0.5s 1.5s, opacity 0.5s 1.5s;
  transition: transform 0.5s 1.5s, opacity 0.5s 1.5s, -webkit-transform 0.5s 1.5s; }

.c-titleRow_inner span:nth-child(13) {
  -webkit-transition: opacity 0.5s 1.6s, -webkit-transform 0.5s 1.6s;
  transition: opacity 0.5s 1.6s, -webkit-transform 0.5s 1.6s;
  transition: transform 0.5s 1.6s, opacity 0.5s 1.6s;
  transition: transform 0.5s 1.6s, opacity 0.5s 1.6s, -webkit-transform 0.5s 1.6s; }

.c-titleRow_inner span:nth-child(14) {
  -webkit-transition: opacity 0.5s 1.7s, -webkit-transform 0.5s 1.7s;
  transition: opacity 0.5s 1.7s, -webkit-transform 0.5s 1.7s;
  transition: transform 0.5s 1.7s, opacity 0.5s 1.7s;
  transition: transform 0.5s 1.7s, opacity 0.5s 1.7s, -webkit-transform 0.5s 1.7s; }

.c-titleRow_inner span:nth-child(15) {
  -webkit-transition: opacity 0.5s 1.8s, -webkit-transform 0.5s 1.8s;
  transition: opacity 0.5s 1.8s, -webkit-transform 0.5s 1.8s;
  transition: transform 0.5s 1.8s, opacity 0.5s 1.8s;
  transition: transform 0.5s 1.8s, opacity 0.5s 1.8s, -webkit-transform 0.5s 1.8s; }

.c-titleRow_inner span:nth-child(16) {
  -webkit-transition: opacity 0.5s 1.9s, -webkit-transform 0.5s 1.9s;
  transition: opacity 0.5s 1.9s, -webkit-transform 0.5s 1.9s;
  transition: transform 0.5s 1.9s, opacity 0.5s 1.9s;
  transition: transform 0.5s 1.9s, opacity 0.5s 1.9s, -webkit-transform 0.5s 1.9s; }

.c-titleRow_inner span:nth-child(17) {
  -webkit-transition: opacity 0.5s 2s, -webkit-transform 0.5s 2s;
  transition: opacity 0.5s 2s, -webkit-transform 0.5s 2s;
  transition: transform 0.5s 2s, opacity 0.5s 2s;
  transition: transform 0.5s 2s, opacity 0.5s 2s, -webkit-transform 0.5s 2s; }

.c-titleRow_inner span:nth-child(18) {
  -webkit-transition: opacity 0.5s 2.1s, -webkit-transform 0.5s 2.1s;
  transition: opacity 0.5s 2.1s, -webkit-transform 0.5s 2.1s;
  transition: transform 0.5s 2.1s, opacity 0.5s 2.1s;
  transition: transform 0.5s 2.1s, opacity 0.5s 2.1s, -webkit-transform 0.5s 2.1s; }

.c-titleRow_inner span:nth-child(19) {
  -webkit-transition: opacity 0.5s 2.2s, -webkit-transform 0.5s 2.2s;
  transition: opacity 0.5s 2.2s, -webkit-transform 0.5s 2.2s;
  transition: transform 0.5s 2.2s, opacity 0.5s 2.2s;
  transition: transform 0.5s 2.2s, opacity 0.5s 2.2s, -webkit-transform 0.5s 2.2s; }

.c-titleRow_inner span:nth-child(20) {
  -webkit-transition: opacity 0.5s 2.3s, -webkit-transform 0.5s 2.3s;
  transition: opacity 0.5s 2.3s, -webkit-transform 0.5s 2.3s;
  transition: transform 0.5s 2.3s, opacity 0.5s 2.3s;
  transition: transform 0.5s 2.3s, opacity 0.5s 2.3s, -webkit-transform 0.5s 2.3s; }

.c-titleRow_inner span:nth-child(21) {
  -webkit-transition: opacity 0.5s 2.4s, -webkit-transform 0.5s 2.4s;
  transition: opacity 0.5s 2.4s, -webkit-transform 0.5s 2.4s;
  transition: transform 0.5s 2.4s, opacity 0.5s 2.4s;
  transition: transform 0.5s 2.4s, opacity 0.5s 2.4s, -webkit-transform 0.5s 2.4s; }

.c-titleRow_inner span:nth-child(22) {
  -webkit-transition: opacity 0.5s 2.5s, -webkit-transform 0.5s 2.5s;
  transition: opacity 0.5s 2.5s, -webkit-transform 0.5s 2.5s;
  transition: transform 0.5s 2.5s, opacity 0.5s 2.5s;
  transition: transform 0.5s 2.5s, opacity 0.5s 2.5s, -webkit-transform 0.5s 2.5s; }

.c-titleRow_inner span:nth-child(23) {
  -webkit-transition: opacity 0.5s 2.6s, -webkit-transform 0.5s 2.6s;
  transition: opacity 0.5s 2.6s, -webkit-transform 0.5s 2.6s;
  transition: transform 0.5s 2.6s, opacity 0.5s 2.6s;
  transition: transform 0.5s 2.6s, opacity 0.5s 2.6s, -webkit-transform 0.5s 2.6s; }

.c-titleRow_inner span:nth-child(24) {
  -webkit-transition: opacity 0.5s 2.7s, -webkit-transform 0.5s 2.7s;
  transition: opacity 0.5s 2.7s, -webkit-transform 0.5s 2.7s;
  transition: transform 0.5s 2.7s, opacity 0.5s 2.7s;
  transition: transform 0.5s 2.7s, opacity 0.5s 2.7s, -webkit-transform 0.5s 2.7s; }

.c-titleRow_inner span:nth-child(25) {
  -webkit-transition: opacity 0.5s 2.8s, -webkit-transform 0.5s 2.8s;
  transition: opacity 0.5s 2.8s, -webkit-transform 0.5s 2.8s;
  transition: transform 0.5s 2.8s, opacity 0.5s 2.8s;
  transition: transform 0.5s 2.8s, opacity 0.5s 2.8s, -webkit-transform 0.5s 2.8s; }

.c-titleRow_inner span:nth-child(26) {
  -webkit-transition: opacity 0.5s 2.9s, -webkit-transform 0.5s 2.9s;
  transition: opacity 0.5s 2.9s, -webkit-transform 0.5s 2.9s;
  transition: transform 0.5s 2.9s, opacity 0.5s 2.9s;
  transition: transform 0.5s 2.9s, opacity 0.5s 2.9s, -webkit-transform 0.5s 2.9s; }

.c-titleRow_inner span:nth-child(27) {
  -webkit-transition: opacity 0.5s 3s, -webkit-transform 0.5s 3s;
  transition: opacity 0.5s 3s, -webkit-transform 0.5s 3s;
  transition: transform 0.5s 3s, opacity 0.5s 3s;
  transition: transform 0.5s 3s, opacity 0.5s 3s, -webkit-transform 0.5s 3s; }

.c-titleRow_inner span:nth-child(28) {
  -webkit-transition: opacity 0.5s 3.1s, -webkit-transform 0.5s 3.1s;
  transition: opacity 0.5s 3.1s, -webkit-transform 0.5s 3.1s;
  transition: transform 0.5s 3.1s, opacity 0.5s 3.1s;
  transition: transform 0.5s 3.1s, opacity 0.5s 3.1s, -webkit-transform 0.5s 3.1s; }

.c-titleRow_inner span:nth-child(29) {
  -webkit-transition: opacity 0.5s 3.2s, -webkit-transform 0.5s 3.2s;
  transition: opacity 0.5s 3.2s, -webkit-transform 0.5s 3.2s;
  transition: transform 0.5s 3.2s, opacity 0.5s 3.2s;
  transition: transform 0.5s 3.2s, opacity 0.5s 3.2s, -webkit-transform 0.5s 3.2s; }

.c-titleRow_inner span:nth-child(30) {
  -webkit-transition: opacity 0.5s 3.3s, -webkit-transform 0.5s 3.3s;
  transition: opacity 0.5s 3.3s, -webkit-transform 0.5s 3.3s;
  transition: transform 0.5s 3.3s, opacity 0.5s 3.3s;
  transition: transform 0.5s 3.3s, opacity 0.5s 3.3s, -webkit-transform 0.5s 3.3s; }

.c-titleRow_inner span {
  opacity: 0;
  font-family: "Amiri", serif;
  color: #fff; }
  @media print, screen and (min-width: 768px) {
    .c-titleRow_inner span {
      letter-spacing: .04em; } }
  .c-titleRow_inner span.is-viewFont {
    opacity: 1; }

@media print, screen and (min-width: 768px) {
  .top .c-titleRow_inner span {
    font-size: max(99.5 / 1280 * 100vw, 79.6px); } }

@media print, screen and (max-width: 767px) {
  .top .c-titleRow_inner span {
    font-size: 72px; } }

@media print, screen and (min-width: 768px) {
  .second .c-titleRow_inner span {
    font-size: max(80 / 1280 * 100vw, 64px); } }

@media print, screen and (max-width: 767px) {
  .second .c-titleRow_inner span {
    font-size: 54px; } }

@media print, screen and (min-width: 768px) {
  .third .c-titleRow_inner span {
    font-size: max(84 / 1280 * 100vw, 67.2px); } }

@media print, screen and (max-width: 767px) {
  .third .c-titleRow_inner span {
    font-size: 64px; } }

@media print, screen and (min-width: 768px) {
  .last .c-titleRow_inner span {
    font-size: max(96 / 1280 * 100vw, 76.8px); } }

@media print, screen and (max-width: 767px) {
  .last .c-titleRow_inner span {
    line-height: 0;
    font-size: 54px; } }

/* クレジット
-----------------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
  .c-credit {
    margin-top: calc(48 / 1280 * 100vw); } }

@media print, screen and (max-width: 767px) {
  .c-credit {
    margin-top: 48px; } }

@media print, screen and (min-width: 768px) {
  .main .c-credit {
    margin-top: calc(32 / 1280 * 100vw);
    padding: 0 calc(96 / 1280 * 100vw); } }

@media print, screen and (max-width: 767px) {
  .main .c-credit {
    margin-top: 24px;
    padding: 0 30px; } }

.c-creditMain {
  border-bottom: 1px solid #ddd;
  padding-bottom: calc(16 / 1280 * 100vw);
  margin-bottom: calc(16 / 1280 * 100vw); }
  @media print, screen and (min-width: 768px) {
    .c-creditMain {
      margin-top: calc(48 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-creditMain {
      margin-top: 24px;
      padding-bottom: 16px;
      margin-bottom: 16px; } }

.c-creditItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #111111; }
  @media print, screen and (max-width: 767px) {
    .c-creditItem {
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end; } }
  .c-creditItem .name,
  .c-creditItem .price {
    font-family: "Amiri", serif;
    letter-spacing: .08em; }
    @media print, screen and (min-width: 768px) {
      .c-creditItem .name,
      .c-creditItem .price {
        font-size: max(16 / 1280 * 100vw, 12.8px); } }
    @media print, screen and (max-width: 767px) {
      .c-creditItem .name,
      .c-creditItem .price {
        font-size: 15px; } }
  .c-creditItem .name {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
  @media print, screen and (min-width: 768px) {
    .c-creditItem .namePrice {
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
  .c-creditItem .tax {
    padding-top: 2px;
    font-family: "Amiri", serif;
    letter-spacing: .08em; }
    @media print, screen and (min-width: 768px) {
      .c-creditItem .tax {
        font-size: max(12 / 1280 * 100vw, 9.6px);
        margin-left: calc(8 / 1280 * 100vw); } }
    @media print, screen and (max-width: 767px) {
      .c-creditItem .tax {
        font-size: 12px;
        margin-left: 4px; } }
  @media print, screen and (max-width: 767px) {
    .c-creditItem .price {
      margin-top: 10px;
      display: block; } }
  .c-creditItem .button {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 19px;
    overflow: hidden;
    font-family: "Amiri", serif;
    letter-spacing: .08em;
    -webkit-transition: background-color .5s ease, color .5s ease;
    transition: background-color .5s ease, color .5s ease; }
    @media print, screen and (min-width: 768px) {
      .c-creditItem .button {
        background-color: #fff;
        width: calc(56 / 1280 * 100vw);
        padding: calc(7.5 / 1280 * 100vw) 0 calc(5.5 / 1280 * 100vw);
        margin-left: calc(16 / 1280 * 100vw);
        font-size: calc(12 / 1280 * 100vw); } }
    @media print, screen and (max-width: 767px) {
      .c-creditItem .button {
        background-color: #111111;
        color: #fff;
        width: 56px;
        padding: 10px 0 6px;
        font-size: 12px; } }
  @media print, screen and (min-width: 768px) {
    .c-creditItem.is-main .main {
      color: #fff;
      font-size: max(18 / 1280 * 100vw, 14.4px); }
      .c-modal .c-creditItem.is-main .main {
        color: #111111 !important; } }
  @media print, screen and (max-width: 767px) {
    .c-creditItem.is-main .main {
      font-size: 18px; } }
  @media print, screen and (min-width: 768px) {
    .c-creditItem.is-main .name,
    .c-creditItem.is-main .price {
      color: #fff;
      font-size: max(18 / 1280 * 100vw, 14.4px); }
      .c-modal .c-creditItem.is-main .name, .c-modal
      .c-creditItem.is-main .price {
        color: #111111 !important; } }
  @media print, screen and (max-width: 767px) {
    .c-creditItem.is-main .name,
    .c-creditItem.is-main .price {
      font-size: 18px; } }
  @media print, screen and (min-width: 768px) {
    .c-creditItem + .c-creditItem {
      margin-top: calc(8 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-creditItem + .c-creditItem {
      margin-top: 12px; } }
  @media (hover: hover) {
    .c-creditItem:hover .button {
      background-color: #111111;
      color: #fff; } }

.c-creditMore_text {
  text-align: center; }
  @media print, screen and (min-width: 768px) {
    .c-creditMore_text {
      color: #fff; } }

.c-creditMore_texEn {
  letter-spacing: .12em;
  font-family: "Amiri", serif; }
  @media print, screen and (min-width: 768px) {
    .c-creditMore_texEn {
      font-size: max(16 / 1280 * 100vw, 12.8px); } }
  @media print, screen and (max-width: 767px) {
    .c-creditMore_texEn {
      font-size: 14px;
      letter-spacing: .08em; } }

.c-creditMore_textJa {
  letter-spacing: .12em;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif; }
  @media print, screen and (min-width: 768px) {
    .c-creditMore_textJa {
      margin-top: calc(12 / 720 * 100vh);
      font-size: max(10 / 1280 * 100vw, 8px); } }
  @media print, screen and (max-width: 767px) {
    .c-creditMore_textJa {
      margin-top: 8px;
      font-size: 10px;
      letter-spacing: .08em; } }

/* 一覧リンクボタン
-----------------------------------------------------------------*/
.c-creditView_btn {
  position: relative;
  cursor: pointer;
  font-family: "Amiri", serif;
  letter-spacing: .12em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: background-color .5s ease, color .5s ease;
  transition: background-color .5s ease, color .5s ease; }
  @media print, screen and (min-width: 768px) {
    .c-creditView_btn {
      color: #fff;
      border: 1px solid #111111;
      background-color: #111111;
      margin: calc(24 / 1280 * 100vw) auto 0;
      width: calc(320 / 1280 * 100vw);
      padding: calc(18 / 1280 * 100vw) 0 calc(16 / 1280 * 100vw);
      font-size: max(12 / 1280 * 100vw, 9.6px);
      -webkit-transition: .3s ease;
      transition: .3s ease;
      line-height: 1; } }
  @media print, screen and (max-width: 767px) {
    .c-creditView_btn {
      border: 1px solid #EEEEEE;
      background-color: #fff;
      margin: 16px 30px 0;
      font-size: 12px;
      padding: 17px 0 13px; } }
  .c-creditView_btn:after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(20 / 1280 * 100vw);
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: 1px solid #999999;
    border-top: 1px solid #999999; }
    @media print, screen and (max-width: 767px) {
      .c-creditView_btn:after {
        right: 24px; } }
  @media (hover: hover) {
    .c-creditView_btn:hover {
      background-color: #fff;
      color: #111111; } }

.detailButton {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 228px;
  margin: 32px auto 0;
  gap: 5px;
  font-size: 16px;
  letter-spacing: .08em; }
  .detailButton:after, .detailButton:before {
    content: "";
    position: absolute;
    height: 1px;
    background-color: #111111; }
  .detailButton:after {
    bottom: -14px;
    left: 0;
    width: 228px; }
  .detailButton:before {
    bottom: -10px;
    right: -2px;
    width: 12px;
    border-right: 1px solid #111111;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top; }
  .detailButton .en {
    font-family: "Amiri", serif;
    font-size: 16px; }
  .detailButton .ja {
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    letter-spacing: .12em;
    font-size: 12px; }

/* モーダル
	-----------------------------------------------------------------*/
.c-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity .3s ease, visibility .3s ease;
  transition: opacity .3s ease, visibility .3s ease;
  overflow-y: auto;
  background-color: #F7F7F7;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain; }
  @media print, screen and (min-width: 768px) {
    .c-modal {
      background-color: #F5F5F5; } }
  .c-modal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; }
  .is-modalActive .c-modal {
    -webkit-transition: none;
    transition: none; }

.c-modalClose {
  position: absolute;
  cursor: pointer;
  z-index: 10; }
  @media print, screen and (min-width: 768px) {
    .c-modalClose {
      top: calc(40 / 1280 * 100vw);
      right: calc(40 / 1280 * 100vw);
      width: calc(23 / 1280 * 100vw);
      height: calc(23 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-modalClose {
      top: 20px;
      right: 20px;
      width: 20px;
      height: 20px; } }
  .c-modalClose::before, .c-modalClose::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    height: 1px; }
    @media print, screen and (min-width: 768px) {
      .c-modalClose::before, .c-modalClose::after {
        width: calc(23 / 1280 * 100vw);
        background-color: #999999; } }
    @media print, screen and (max-width: 767px) {
      .c-modalClose::before, .c-modalClose::after {
        width: 20px;
        background-color: #111111; } }
  .c-modalClose::before {
    rotate: 45deg; }
  .c-modalClose::after {
    rotate: -45deg; }

@media print, screen and (max-width: 767px) {
  .c-modalTop {
    padding: 40px 30px 0; } }

.c-modalInner {
  margin: auto; }
  @media print, screen and (min-width: 768px) {
    .c-modalInner {
      position: sticky;
      top: 0;
      z-index: 9;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; } }
  @media print, screen and (max-width: 767px) {
    .c-modalInner {
      overflow-y: auto;
      width: 100%;
      max-width: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; } }

.c-modalImg_list {
  z-index: 1; }
  @media print, screen and (min-width: 768px) {
    .c-modalImg_list {
      border-left: 1px solid #d7d7d7;
      width: 50%;
      padding: calc(50 / 1280 * 100vw) calc(95 / 1280 * 100vw);
      overflow-y: auto;
      max-height: 100vh;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; } }
  @media print, screen and (max-width: 767px) {
    .c-modalImg_list {
      margin-top: 30px; } }

@media print, screen and (min-width: 768px) {
  .c-modalImg_listNode {
    padding-top: calc(30 / 720 * 100vh); } }

.c-modalImg_listNode img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover; }

.c-modalInfo {
  position: relative;
  z-index: 1; }
  @media print, screen and (min-width: 768px) {
    .c-modalInfo {
      width: 50%;
      padding: calc(80 / 1280 * 100vw) calc(120 / 1280 * 100vw) 0 calc(120 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-modalInfo {
      padding: 0 30px 48px; } }

.c-modalTitle {
  font-family: "Amiri", serif;
  letter-spacing: .04em; }
  @media print, screen and (min-width: 768px) {
    .c-modalTitle {
      font-size: max(12 / 1280 * 100vw, 9.6px); } }
  @media print, screen and (max-width: 767px) {
    .c-modalTitle {
      font-size: 12px; } }

.c-modalTitle_numName {
  font-family: "Amiri", serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media print, screen and (min-width: 768px) {
    .c-modalTitle_numName {
      margin-top: calc(17 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-modalTitle_numName {
      margin-top: 16px;
      font-size: 20px; } }
  .c-modalTitle_numName .sub {
    display: block; }
    @media print, screen and (min-width: 768px) {
      .c-modalTitle_numName .sub {
        font-size: max(11 / 1280 * 100vw, 8.8px);
        letter-spacing: .08em; } }
    @media print, screen and (max-width: 767px) {
      .c-modalTitle_numName .sub {
        margin-top: 7px;
        font-size: 14px;
        letter-spacing: .04em; } }

.c-modalTitle_num {
  letter-spacing: .08em; }
  @media print, screen and (min-width: 768px) {
    .c-modalTitle_num {
      font-size: max(16 / 1280 * 100vw, 12.8px); } }
  @media print, screen and (max-width: 767px) {
    .c-modalTitle_num {
      font-size: 20px; } }

.c-modalTitle_itemName {
  position: relative; }
  @media print, screen and (min-width: 768px) {
    .c-modalTitle_itemName {
      letter-spacing: .08em;
      font-size: max(16 / 1280 * 100vw, 12.8px);
      padding-left: calc(60 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-modalTitle_itemName {
      letter-spacing: .04em;
      font-size: 20px;
      padding-left: 72px; } }
  .c-modalTitle_itemName .sub {
    display: block;
    margin-top: 8px;
    letter-spacing: .04em; }
    @media print, screen and (min-width: 768px) {
      .c-modalTitle_itemName .sub {
        font-size: max(11 / 1280 * 100vw, 8.8px); } }
    @media print, screen and (max-width: 767px) {
      .c-modalTitle_itemName .sub {
        font-size: 14px; } }
  .c-modalTitle_itemName:before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(20 / 1280 * 100vw);
    width: calc(20 / 1280 * 100vw);
    height: 1px;
    background-color: #999999; }
    @media print, screen and (min-width: 768px) {
      .c-modalTitle_itemName:before {
        top: calc(7 / 1280 * 100vw); } }
    @media print, screen and (max-width: 767px) {
      .c-modalTitle_itemName:before {
        top: 8px;
        width: 24px;
        left: 23px; } }

.layerList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media print, screen and (min-width: 768px) {
    .layerList {
      margin-top: calc(32 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .layerList {
      margin-top: 32px; } }

.layerList_node {
  position: relative;
  font-family: "Amiri", serif;
  letter-spacing: .04em;
  color: #CCCCCC; }
  @media print, screen and (min-width: 768px) {
    .layerList_node {
      -webkit-transition: all .3s;
      transition: all .3s;
      font-size: max(16 / 1280 * 100vw, 12.8px); } }
  @media print and (hover: hover), screen and (min-width: 768px) and (hover: hover) {
    .layerList_node:hover {
      color: #111111;
      -webkit-transition: all .3s;
      transition: all .3s; }
      .layerList_node:hover:after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #111111;
        -webkit-animation: underlineExpand .5s ease;
        animation: underlineExpand .5s ease; } }
  @media print, screen and (max-width: 767px) {
    .layerList_node {
      font-size: 13px; } }
  .layerList_node.is-currentLayer {
    color: #111111; }
    .layerList_node.is-currentLayer:after {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #111111;
      -webkit-animation: underlineExpand .5s ease;
      animation: underlineExpand .5s ease; }
  .layerList_node + .layerList_node {
    position: relative; }
    @media print, screen and (min-width: 768px) {
      .layerList_node + .layerList_node {
        margin-left: calc(48 / 1280 * 100vw); } }
    @media print, screen and (max-width: 767px) {
      .layerList_node + .layerList_node {
        padding-left: 0;
        margin-left: 36px; } }
    .layerList_node + .layerList_node:before {
      content: '';
      position: absolute;
      bottom: 5px;
      width: calc(15 / 1280 * 100vw);
      left: calc(-30 / 1280 * 100vw);
      height: 1px;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      background-color: #CCCCCC;
      -webkit-transform-origin: left;
      -ms-transform-origin: left;
      transform-origin: left; }
      @media print, screen and (max-width: 767px) {
        .layerList_node + .layerList_node:before {
          width: 17px;
          left: -24px;
          top: 12px;
          bottom: initial; } }
  .layerList_node.is-modalActive {
    color: #111111;
    padding-bottom: 8px;
    border-bottom: 1px solid; }

@-webkit-keyframes underlineExpand {
  from {
    width: 0%; }
  to {
    width: 100%; } }

@keyframes underlineExpand {
  from {
    width: 0%; }
  to {
    width: 100%; } }

@media print, screen and (min-width: 768px) {
  .layerList_Num {
    font-size: max(20 / 1280 * 100vw, 16px); } }

@media print, screen and (max-width: 767px) {
  .layerList_Num {
    font-size: 16px; } }

.c-modalText {
  font-family: "Amiri", serif;
  letter-spacing: .12em;
  line-height: 2; }
  @media print, screen and (min-width: 768px) {
    .c-modalText {
      margin-top: calc(40 / 1280 * 100vw);
      font-size: max(11 / 1280 * 100vw, 8.8px); } }
  @media print, screen and (max-width: 767px) {
    .c-modalText {
      margin-top: 32px;
      font-size: 11px; } }

.pictList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: calc(12 / 1280 * 100vw);
  margin-top: calc(24 / 1280 * 100vw); }
  @media print, screen and (max-width: 767px) {
    .pictList {
      margin-top: 25px;
      gap: 12px; } }

.pictList_node {
  width: calc(56 / 1280 * 100vw); }
  @media print, screen and (max-width: 767px) {
    .pictList_node {
      width: 48px; } }
  .pictList_node img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.modalIndex {
  background-color: #fff; }
  @media print, screen and (min-width: 768px) {
    .modalIndex {
      position: sticky;
      top: 0;
      z-index: 10;
      padding: calc(120 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .modalIndex {
      padding: 20px; } }

.modalIndex_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  @media print, screen and (min-width: 768px) {
    .modalIndex_list {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
      gap: calc(10 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .modalIndex_list {
      gap: 5px; } }

.modalIndex_list_node {
  list-style: none;
  position: relative; }
  @media print, screen and (min-width: 768px) {
    .modalIndex_list_node {
      cursor: pointer;
      width: calc((100% - vwPc(20)) / 3);
      -webkit-transition: .3s ease;
      transition: .3s ease; }
      .modalIndex_list_node:hover {
        opacity: .7; } }
  @media print, screen and (max-width: 767px) {
    .modalIndex_list_node {
      width: 49.2%; } }
  .modalIndex_list_node img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }

.modalIndex_list_link {
  display: block; }

.modalIndex_listHead {
  font-family: "Amiri", serif;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center; }

.modalIndex_listHead_num {
  position: relative;
  text-align: center;
  letter-spacing: .08em; }
  @media print, screen and (min-width: 768px) {
    .modalIndex_listHead_num {
      font-size: max(18 / 1280 * 100vw, 14.4px); } }
  @media print, screen and (max-width: 767px) {
    .modalIndex_listHead_num {
      font-size: 18px; } }
  .modalIndex_listHead_num:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 20px;
    border-bottom: 1px solid #fff; }
    @media print, screen and (max-width: 767px) {
      .modalIndex_listHead_num:after {
        bottom: -15px; } }

.modalIndex_listHead_name {
  letter-spacing: .08em; }
  @media print, screen and (min-width: 768px) {
    .modalIndex_listHead_name {
      margin-top: calc(28 / 1280 * 100vw);
      font-size: max(18 / 1280 * 100vw, 14.4px); } }
  @media print, screen and (max-width: 767px) {
    .modalIndex_listHead_name {
      margin-top: 32px;
      font-size: 13px;
      letter-spacing: .06em; } }
  .modalIndex_listHead_name .sub {
    display: block; }
    @media print, screen and (min-width: 768px) {
      .modalIndex_listHead_name .sub {
        font-size: max(12 / 1280 * 100vw, 9.6px);
        letter-spacing: .08em;
        margin-top: calc(8 / 1280 * 100vw); } }
    @media print, screen and (max-width: 767px) {
      .modalIndex_listHead_name .sub {
        margin-top: 8px;
        font-size: 10px; } }

.slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 0;
  margin-top: 17px; }
  .slick-dots li {
    width: 10px;
    height: 10px; }
    .slick-dots li.slick-active button {
      background-color: #111111; }
  .slick-dots button {
    background-color: #ccc;
    border-radius: 50%;
    width: 5px;
    height: 5px; }

.slick-arrow {
  position: absolute;
  bottom: 2.5px; }
  .slick-arrow.slick-next {
    left: calc(233 / 375 * 100vw); }
  .slick-arrow.slick-prev {
    left: calc(116 / 375 * 100vw); }

@media print, screen and (min-width: 1025px) {
  .c-sectionContent {
    padding-top: calc(80 / 1280 * 100vw); } }

@media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .c-sectionContent {
    padding-top: 104px; } }

@media print, screen and (max-width: 767px) {
  .c-sectionContent {
    padding-top: 80px; } }

@media print, screen and (max-width: 767px) {
  .c-setcionContentBox {
    aspect-ratio: 1/1;
    width: 100%; } }

@media print, screen and (max-width: 767px) {
  .c-sectionContent_inner {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden; } }

@media print, screen and (max-width: 767px) {
  .parallaxBg {
    position: absolute;
    top: 0;
    left: 0;
    aspect-ratio: 750/1200;
    width: 100%;
    background-size: cover;
    background-position: top center;
    z-index: 0;
    will-change: transform; }
    #section1 .parallaxBg {
      background-image: url("/feature/layered-style-summer-0509/assets/images/section1/section1_main-sp.jpg") !important; }
    #section2 .parallaxBg {
      background-image: url("/feature/layered-style-summer-0509/assets/images/section2/section2_main-sp.jpg") !important; }
    #section3 .parallaxBg {
      background-image: url("/feature/layered-style-summer-0509/assets/images/section3/section3_main-sp.jpg") !important; }
    #section4 .parallaxBg {
      background-image: url("/feature/layered-style-summer-0509/assets/images/section4/section4_main-sp.jpg") !important; }
    #section5 .parallaxBg {
      background-image: url("/feature/layered-style-summer-0509/assets/images/section5/section5_main-sp.jpg") !important; }
    #section6 .parallaxBg {
      background-image: url("/feature/layered-style-summer-0509/assets/images/section6/section6_main-sp.jpg") !important; } }

@media print, screen and (max-width: 767px) {
  .js-section {
    position: relative; } }

@media print, screen and (min-width: 768px) {
  .sectionContents {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

@media print, screen and (min-width: 768px) {
  .section {
    width: 50%; } }

@media print, screen and (min-width: 768px) {
  .sectionWrap {
    border-left: 1px solid #ddd;
    width: 50%;
    overflow: hidden;
    padding-bottom: calc(80 / 1280 * 100vw); } }

@media print, screen and (max-width: 767px) {
  .sectionWrap {
    background-color: #F7F7F7;
    padding-bottom: 48px; } }

.fixedText {
  font-family: "Amiri", serif;
  color: #fff;
  letter-spacing: .04em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 1; }
  @media print, screen and (min-width: 1025px) {
    .fixedText {
      margin-bottom: calc(48 / 720 * 100vh);
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content; } }
  @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .fixedText {
      margin-bottom: 48px;
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content; } }
  @media print, screen and (max-width: 767px) {
    .fixedText {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      gap: 72px;
      width: 100%; } }

@media print, screen and (min-width: 768px) {
  .fixedText_num {
    font-size: max(28 / 1280 * 100vw, 22.4px); } }

@media print, screen and (max-width: 767px) {
  .fixedText_num {
    font-size: 20px; } }

.fixedText_itemName {
  position: relative;
  letter-spacing: .04em; }
  @media print, screen and (min-width: 768px) {
    .fixedText_itemName {
      font-size: max(28 / 1280 * 100vw, 22.4px);
      padding-left: calc(120 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .fixedText_itemName {
      font-size: 18px; } }
  .fixedText_itemName .sub {
    display: block; }
    @media print, screen and (min-width: 768px) {
      .fixedText_itemName .sub {
        font-size: max(16 / 1280 * 100vw, 12.8px);
        margin-top: calc(6 / 1280 * 100vw); } }
    @media print, screen and (max-width: 767px) {
      .fixedText_itemName .sub {
        margin-top: 4px;
        font-size: 11px;
        letter-spacing: .08em; } }
  .fixedText_itemName:before {
    content: "";
    position: absolute;
    top: calc(12 / 1280 * 100vw);
    left: calc(40 / 1280 * 100vw);
    width: calc(40 / 1280 * 100vw);
    height: 1px;
    background-color: #fff; }
    @media print, screen and (max-width: 767px) {
      .fixedText_itemName:before {
        top: 7px;
        width: 24px;
        left: -48px; } }

/* section 1.3
	-----------------------------------------------------------------*/
.sectionImg_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media print, screen and (min-width: 768px) {
    .sectionImg_list {
      gap: calc(20 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .sectionImg_list {
      overflow: hidden;
      white-space: nowrap;
      margin-top: 48px; } }
  @media print, screen and (min-width: 768px) {
    #section4 .sectionImg_list,
    #section5 .sectionImg_list {
      margin-top: calc(48 / 1280 * 100vw); } }

@media print, screen and (max-width: 767px) {
  .sectionImg_listNode {
    margin: 0 5px !important; } }

.sectionImg_listNode img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover; }

.switchableImg {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out; }
  @media print, screen and (min-width: 1025px) {
    .switchableImg {
      margin-top: calc(48 / 720 * 100vh);
      padding: 0 calc(94 / 1280 * 100vw); } }
  @media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .switchableImg {
      margin-top: 48px;
      padding: 0 30px; } }
  @media print, screen and (max-width: 767px) {
    .switchableImg {
      margin-top: 24px;
      padding: 0 20px; } }
  #section3 .switchableImg {
    padding: 0; }
  @media print, screen and (max-width: 767px) {
    #section3 .switchableImg,
    #section6 .switchableImg {
      margin-top: 48px;
      padding: 0 20px; } }
  .switchableImg img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: -webkit-filter 2s ease;
    transition: -webkit-filter 2s ease;
    transition: filter 2s ease;
    transition: filter 2s ease, -webkit-filter 2s ease;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }
    .switchableImg img.color-on {
      -webkit-filter: grayscale(0%);
      filter: grayscale(0%); }

/* section 2.4
	-----------------------------------------------------------------*/
@media print, screen and (max-width: 767px) {
  .sectionImg_main {
    margin-top: 48px;
    padding: 0 20px; } }

.sectionImg_main img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover; }

@media print, screen and (min-width: 768px) {
  #section4 .sectionImg_main {
    padding: 0 calc(94 / 1280 * 100vw); } }

.replaceImg {
  position: relative; }
  @media print, screen and (min-width: 768px) {
    .replaceImg {
      margin-top: 48px;
      padding: 0 calc(80 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .replaceImg {
      margin-top: 24px;
      padding: 0 30px; } }

.replaceImg_inner {
  position: relative; }
  .replaceImg_inner:before {
    content: "";
    display: block; }
    @media print, screen and (max-width: 767px) {
      .replaceImg_inner:before {
        padding-bottom: 136.50794%; } }
    @media print, screen and (min-width: 768px) {
      .replaceImg_inner:before {
        padding-bottom: 119.375%; } }

.replaceImg_node {
  position: absolute;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  z-index: 1; }
  @media print, screen and (min-width: 768px) {
    .replaceImg_node {
      width: calc(370 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .replaceImg_node {
      width: calc(250 / 375 * 100vw); } }
  .replaceImg_node img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }
  .replaceImg_node:nth-child(1) {
    bottom: 0;
    left: 0; }
  .replaceImg_node:nth-child(2) {
    top: 0;
    right: 0; }
  .replaceImg_node.is-active {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    z-index: 2; }

/* section 3.6
	-----------------------------------------------------------------*/