@charset "UTF-8";
@font-face {
  font-family: "Ade-Display";
  src: url("../font/Ade-Display.otf") format("opentype");
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

.main-area.lp {
  background-color: #85ABCA;
  background-size: 100% auto;
  background-position: top center;
  position: relative;
  z-index: 0;
}

.header {
  background: rgb(245, 239, 234) !important;
  background: linear-gradient(0deg, transparent 0%, rgba(133, 171, 202, 0.4037990196) 25%, rgb(133, 171, 202) 100%) !important;
}

.header .header-logo svg path,
.header .header-nav a svg path{
  fill: #ffffff !important;
}

.header .header-nav__menuBtn--border span {
  background-color: #fff !important;
}

.header .header-logo.active a path,
.header .header-nav__user.active a path,
.header .header-nav__search.active a path,
.header .header-nav__cart.active a path{
  fill: var(--color-main) !important;
}

.header .header-nav__user.active a path,
.header .header-nav__search.active a path,
.header .header-nav__cart.active a path{
  fill: var(--color-main) !important;
}

.header .header-nav__menuBtn.open span{
  background-color: var(--color-main) !important;
}

.header .menu-ttl a{
  color: #fff !important;
}

.toggle-arrow::before, .toggle-arrow::after {
  background: #fff !important;
}

.header .svgPath-logo{
  fill: rgb(255, 255, 255)!important;
}

.landing_content {
  font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow: hidden;
  --color-black: #000;
  --color-white: #fff;
  --color-light-blue: #85ABCA;
  --color-blue: #487EAF;
  --color-yellow: #FFCF00;
  --color-light-yellow: #FFFBC0;
  --color-brown: #6D4537;
  --header-height: calc(24.7px + 65.91px + 40px + 40px);
  --breadlist-height: 43px;
  --nav-menu-height: 42.84px;
  --master-height: calc(var(--header-height) + var(--breadlist-height));
}

#Foot,
#footer {
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 768px) {
  /* .landing_content {
    overflow: visible;
    position: relative;
  } */
  .js-fade {
    opacity: 0;
    transform: scale(1.05);
    transition: ease-in, opacity 1500ms, transform 1500ms;
  }
  .js-fade.delay1 {
    transition-delay: 1s;
  }
  .js-fade--active {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px) scale3d(1.001, 1.001, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
  }
  .js-fadeBottomTop {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s;
    transition-delay: 0.3s;
  }
  .js-fadeBottomTop--active {
    opacity: 1;
    transform: translateY(0);
  }

  .landing_content p,
  .landing_content span {
    color: var(--color-white);
  }
  .landing_content .s-view {
    display: none;
  }
  .landing_content img {
    width: 100%;
    height: auto;
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  .landing_content .css-mainvisual {
    position: relative;
  }

  .landing_content .css-mainvisual .css-mainvisual_wrapper {
    width: calc(100% * 1400 / 1400);
    max-width: 140rem;
    margin: 0 auto;
  }

  .landing_content .css-mainvisual::before {
    content: '';
    position: absolute;
    background-image: url(../img/bg01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    mix-blend-mode: multiply;
    z-index: 0;
    top: 70rem;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .landing_content .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_bg {
    background-color: var(--blue-color);
    width: 100%;
    height: 100%;
  }
  .landing_content .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_image_area {
    position: relative;
    width: calc(100%* 1304 / 1400);
    max-width: 130.4rem;
    margin: 0 auto;
    margin-top: 16.5rem;
  }
  .landing_content .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_image_area .css-mainvisual_image_text {
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
    width: 76rem;
  }
  .landing_content .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_image_area .css-mainvisual_image {
    overflow: hidden;
    width: calc(100% * 700 / 792.4131);
    margin: 0 auto;
    z-index: 1;
  }

  .landing_content .text-box {
    width: 74.5rem;
    margin: 0 auto;
    margin-top: 16.5rem;
    background: #7BA4C6;
  }
  
  .landing_content .text-bgWrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 13.7rem;
    padding-bottom: 34.5rem;
  }
  .landing_content .text-bgWrap.__open {
    padding-bottom: 34.5rem;
  }
  
  .landing_content .text-bgWrap::after {
    content: '';
    background-color: rgba(123, 164, 198, 0.45);
    mix-blend-mode: multiply;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  
  .landing_content .text_accordion {
    width: 43.3rem;
    margin: 0 auto;
    position: relative;
    z-index: 3;
  }
  
  .landing_content .accordion__text {
    width: 42.6rem;
    margin: 0 auto;
  }
  
  .landing_content .accordion__text h3 {
    color: var(--color-white);
    font-size: 2.9rem;
    letter-spacing: 0.03em;
    line-height: 1.5862068966;
  }
  
  .landing_content .accordion__text p {
    color: var(--color-white);
    font-size: 1.75rem;
    line-height: 2.1828571429;
    text-align: justify;
    margin-top: 6rem;
  }
  
  .accordion__text.js-viewmore_hide {
    overflow: hidden;
    transition: height 0.5s;
    height: calc(6em + 3.5rem * 1);
  }
  .accordion__text.js-viewmore_hide.__open {
    height: calc(40em + 3.5rem* 3);
    visibility: visible;
  }
  
  .landing_content .c-text_accordion {
    display: inline-block;
    font-weight: 400;
    width: 9.2rem;
    white-space: nowrap;
    margin-top: 2.9rem;
    margin-left: 33.2rem;
    font-size: 1.7rem;
    letter-spacing: 0.03em;
    /* text-align: center; */
    position: relative;
    color: var(--color-white);
    border-bottom: solid 1px #fff;
    padding-bottom: 0.2rem;
    cursor: pointer;
  }
  .landing_content .c-text_accordion.__open {
    width: 5.6rem;
    margin-top: 3rem;
    margin-left: 36.8rem;
  }
  .landing_content .c-text_accordion::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 0;
    width: 0.85rem;
    height: 0.766px;
    background-color: var(--color-white);
  }
  .landing_content .c-text_accordion::after {
    content: "";
    position: absolute;
    top: 0.6rem;
    right: 0.4rem;
    width: 0.766px;
    height: 0.85rem;
    background-color: var(--color-white);
  }
  .landing_content .c-text_accordion.__open::before {
    transform: rotate(-45deg);
    top: 1.1rem;
  }
  .landing_content .c-text_accordion.__open::after {
    transform: rotate(-45deg);
    top: 0.7rem;
    right: 0.4rem;
  }
  
  .landing_content .css-textarea {
    width: 43.3rem;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 3;
  }
  .landing_content .css-textarea::before {
    content: '';
    display: block;
    width: 43.2rem;
    height: 16rem;
    position: absolute;
    background-image: url(../img/white_box.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    left: 0;
    top: 0;
    z-index: 2;
    margin-top: 9.1rem;
  }
  .landing_content .css-textarea p {
    font-size: 2rem;
    line-height: 1.7;
    color: var(--color-white);
    position: absolute;
    top: 14rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
  }

  .landing_content .css-hover {
    position: relative;
  }
  .landing_content .css-credit_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
  }
  .landing_content .js-hover {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    transition: ease-in, background-color 0.5s, opacity 0.5s;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }
  /* .landing_content .js-hover--active {
    background-color: #8C6C61;
    opacity: 0.85;
  } */
  .landing_content .js-hover .css-credit {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 4;
    position: relative;
    font-feature-settings: "palt";
  }
  
  .landing_content .js-hover .credit_inner {
    width: 35.2rem;
    margin: 0 auto;
  }
  
  .landing_content .js-hover .css-hover_text {
    display: inline-block;
    position: relative;
    z-index: 2;
    font-weight: 400;
    font-style: normal;
    font-size: 2.1rem;
    line-height: 1.8871428571;
    letter-spacing: 0.035em;
  }
  .landing_content .js-hover .css-credit .css-credit_link {
    position: relative;
    z-index: 2;
    font-weight: 400;
    font-style: normal;
    font-size: 1.4rem;
    line-height: 2.07824838478;
    letter-spacing: 0.03em;
    display: block;
    color: var(--color-white);
  }

  .landing_content .intro_content {
    position: relative;
    margin-top: 23.6rem;
    padding-bottom: 21.6rem;
  }
  .landing_content .intro_content .img-frame {
    position: absolute;
    width: 72.8rem;
    pointer-events: none;
    top: -9rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
  }
  .landing_content .intro_content .css-credit_link,
  .landing_content .intro_content .css-hover_text {
    color: var(--color-white);
  }
  .landing_content .intro_content .css-hover_text {
    top: 19.3rem;
    left: 0rem;
    pointer-events: none;
  }
  .landing_content .intro_content .css-credit_link {
    top: 36rem;
    left: 0rem;
  }
  .landing_content .intro_content .css-credit {
    top: 0rem;
    left: 0rem;
    z-index: 4;
  }
  .landing_content .intro_content .css-image {
    width: calc(100%* 560 / 1400);
    max-width: 56rem;
    /* aspect-ratio: 560.0144 / 755.7183; */
    margin: 0 auto;
  }
  .landing_content .intro_content .css-image .js-hover {
    width: 100%;
  }

/* ===============================================
*  *
=============================================== */
.intro_content .js-hover {
  width: calc(100%* 560 / 1400);
  max-width: 56rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* .intro_content .js-hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #8C6C61;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.3s ease;
} */

.intro_content .css-bg{
  content: '';
  mix-blend-mode: multiply;
  background: #8C6C61;
  opacity: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.intro_content .css-image:hover .css-bg{
  opacity: 1;
}
/* ===============================================
*  *
=============================================== */

  .intro_content .js-hover--active {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: #8C6C61; 
  mix-blend-mode: multiply; */
  opacity: 1;
  z-index: 1;
}

  .landing_content .css-section1 {
    position: relative;
    margin-top: 4rem;
    width: 100%;
    /* height: calc(915*(100vw / 1400)); */
    background-color: var(--color-light-yellow);
  }
  .landing_content .css-section1::after {
    content: "";
    display: block;
    clear: both;
  }
  .landing_content .css-section1 .side_txt {
    position: absolute;
    width: 2.1rem;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
  }
  .landing_content .css-section1 .side_left {
    left: 4rem;
  }
  .landing_content .css-section1 .side_right {
    right: 4rem;
  }
  .landing_content .css-section1 .css-section1_content1 {
    display: flex;
    justify-content: space-between;
    width: 104.4rem;
    margin: 0 auto;
    padding: 11.8rem 0;
    gap: 11.5rem;
  }
  .landing_content .css-section1 .css-section1_content1 .content1_warp01 {
    width: 41.7rem;
    margin-top: 16.6rem;
  }
  .landing_content .css-section1 .css-section1_content1 .content1_warp02 {
    width: 51.2rem;
  }


  .landing_content .css-section2 {
    position: relative;
    width: 100%;
    /* height: calc(2035*(100vw / 1400)); */
    background-color: var(--color-light-blue);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .landing_content .css-section2::before {
    content: '';
    position: absolute;
    background-image: url(../img/bg02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    mix-blend-mode: multiply;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .landing_content .css-section2 .section2_deco01 {
    width: 55rem;
    position: absolute;
    top: -18.4rem;
    left: -18.8rem;
    z-index: 5;
    pointer-events: none;
  }

  .landing_content .css-section2 .section2_inner {
    width: calc(100%* 1400 / 1400);
    max-width: 140rem;
    margin: 0 auto;
    position: relative;
  }

  .landing_content .css-section2 .css-section2_wrapper01 {
    width: 60.5rem;
    position: relative;
    top: 20.7rem;
    left: 20.1rem;
  }

.css-section2 .css-section2_wrapper01 .css-hover_text {
    top: 24.8rem;
    left: 0;
    pointer-events: none;
}
.css-section2 .css-section2_wrapper01 .css-credit_link {
  top: 37.6rem;
  left: 0;
}

.css-section2 .css-section2_wrapper02 .credit_inner {
  width: 34.5rem;
}

.css-section2 .css-section2_wrapper02 .css-hover_text {
  top: 19.1rem;
  left: 0;
  letter-spacing: -0.025em;
  pointer-events: none;
}
.css-section2 .css-section2_wrapper02 .css-credit_link {
top: 32rem;
left: 0;
}

  .css-section2 .css-section2_wrapper01 .js-hover,
  .css-section2 .css-section2_wrapper02 .js-hover {
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }

  .css-section2 .css-section2_wrapper01 .css-bg{
    content: '';
    mix-blend-mode: multiply;
    background: none;
    background-image: url(../img/img_bg01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
  }
  
  .css-section2 .css-section2_wrapper02 .css-bg{
    content: '';
    mix-blend-mode: multiply;
    background: none;
    background-image: url(../img/img_bg02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
  }
  

  .css-section2 .css-section2_wrapper01 .css-image:hover .css-bg,
  .css-section2 .css-section2_wrapper02 .css-image:hover .css-bg {
    opacity: 1;
  }

  .css-section2 .css-section2_wrapper01 .js-hover--active,
  .css-section2 .css-section2_wrapper02 .js-hover--active {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
  }

  .landing_content .css-section2 .section2_deco02 {
    width: 57rem;
    position: absolute;
    bottom: -19rem;
    right: -18rem;
    z-index: 5;
    pointer-events: none;
  }
  .landing_content .css-section2 .css-section2_wrapper02 {
    width: 52.1rem;
    position: relative;
    margin: 29rem 19.4rem 0 auto;
    padding-bottom: 23rem;
  }

  .landing_content .css-section3 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--color-light-yellow);
    padding-block: 23.3rem 27.6rem;
  }
  .css-section3 .swiper_first {
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    display: none;
  }
  .css-section3 .swiper_first.swiper-initialized {
    display: block;
  }
  .css-section3 .swiper_first .swiper-slide {
    width: 41.5rem;
    object-fit: cover;
    overflow: hidden;
  }
  .css-section3 .swiper_first .swiper-pagination {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 6rem;
    /* ページネーションの基本スタイル */
    /* 選択されているページネーション */
  }
  .css-section3 .swiper_first .swiper-pagination .swiper-pagination-bullet {
    background-color: var(--color-yellow);
    border-radius: unset;
    /* これがないと画像が欠ける */
    opacity: 1;
    /* 画像の透過を無くす */
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
  }
  .css-section3 .swiper_first .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-left: 3.8rem;
  }
  .css-section3 .swiper_first .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-blue);
    width: 0.9rem;
    height: 0.9rem;
  }

  .landing_content .css-check_all {
    width: 31.5rem;
    margin: 0 auto;
    margin-top: 15.7rem;
  }

  .css-section3 .js-hover {
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }

  .css-section3 .css-bg{
    content: '';
    mix-blend-mode: multiply;
    background: none;
    background-image: url(../img/slider_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
  }
  
  .css-section3 .css-image:hover .css-bg {
    opacity: 1;
  }

  .css-section3 .js-hover:hover {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
  }

  .css-section3 .css-credit_link {
    position: relative;
    z-index: 2;
    font-weight: 400;
    font-style: normal;
    font-size: 1.3rem;
    line-height: 2;
    letter-spacing: 0.03em;
    display: block;
    color: var(--color-white);
    text-align: center;
  }

  .css-section3 .credit_inner._01 {
    padding-top: 25rem;
  }
  .css-section3 .credit_inner._02 {
    padding-top: 25rem;
  }
  .css-section3 .credit_inner._03 {
    padding-top: 15.1rem;
  }
  .css-section3 .credit_inner._03 .css-credit_link {
    padding-top: 2rem;
  }
}


@media screen and (max-width: 767px) {
  .main-area.lp {
    margin-bottom: 0;
  }
  .landing_content {
    overflow: visible;
    position: relative;
  }
  .landing_content .js-fade {
    opacity: 0;
    transform: scale(1.05);
    transition: ease-in, opacity 1500ms, transform 1500ms;
  }
  .landing_content .js-fade.delay1 {
    transition-delay: 0.5s;
  }
  .landing_content .js-fade--active {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px) scale3d(1.001, 1.001, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }
  .landing_content .js-fadeBottomTop {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s;
    transition-delay: 0.3s;
  }
  .landing_content .js-fadeBottomTop--active {
    opacity: 1;
    transform: translateY(0);
  }

  .landing_content p,
  .landing_content span {
    color: var(--color-white);
  }
  .landing_content .l-view {
    display: none;
  }
  .landing_content img {
    width: 100%;
    height: auto;
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  .landing_content .css-mainvisual {
    position: relative;
  }

  .landing_content .css-mainvisual .css-mainvisual_wrapper {
    width: calc(375*(100vw / 375));
    max-width: calc(375*(100vw / 375));
    margin: 0 auto;
  }

  .landing_content .css-mainvisual::before {
    content: '';
    position: absolute;
    background-image: url(../img/sp/bg01.png);
    background-repeat: repeat;
    background-position: center;
    background-size: contain;
    mix-blend-mode: multiply;
    z-index: 0;
    top: calc(482*(100vw / 375));
    left: 0;
    width: 100%;
    height: 100%;
  }

  .landing_content .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_bg {
    background-color: var(--blue-color);
    width: 100%;
    height: 100%;
  }
  .landing_content .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_image_area {
    position: relative;
    width: calc(320*(100vw / 375));
    max-width: 100%;
    margin: 0 auto;
    margin-top: calc(59*(100vw / 375));
  }
  .landing_content .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_image_area .css-mainvisual_image_text {
    top: calc(-55*(100vw / 375));
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
    width: calc(285*(100vw / 375));
  }
  .landing_content .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_image_area .css-mainvisual_image {
    overflow: hidden;
    width: calc(320*(100vw / 375));
    margin: 0 auto;
    z-index: 1;
  }

  .landing_content .text-box {
    width: calc(375*(100vw / 375));
    margin: 0 auto;
    margin-top: calc(54*(100vw / 375));
    background: #7BA4C6;
  }
  
  .landing_content .text-bgWrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: calc(63*(100vw / 375));
    padding-bottom: calc(225*(100vw / 375));
  }
  .landing_content .text-bgWrap.__open {
    padding-bottom: calc(35*(100vw / 375));
  }
  
  .landing_content .text-bgWrap::after {
    content: '';
    background-color: rgba(123, 164, 198, 0.45);
    mix-blend-mode: multiply;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  
  .landing_content .text_accordion {
    width: calc(263*(100vw / 375));
    margin: 0 auto;
    position: relative;
    z-index: 3;
  }
  
  .landing_content .accordion__text {
    width: calc(263*(100vw / 375));
    margin: 0 auto;
  }
  
  .landing_content .accordion__text h3 {
    color: var(--color-white);
    font-size: calc(19*(100vw / 375));
    letter-spacing: -0.01em;
    line-height: 1.5136842105;
    white-space: nowrap;
  }
  
  .landing_content .accordion__text p {
    color: var(--color-white);
    font-size: calc(12*(100vw / 375));
    line-height: 1.8325;
    text-align: justify;
    line-break: strict;
    margin-top: calc(31*(100vw / 375));
  }
  
  .accordion__text.js-viewmore_hide {
    overflow: hidden;
    transition: height 0.5s;
    height: calc(5em + 1rem * 1);
  }
  .accordion__text.js-viewmore_hide.__open {
    height: calc(32em + 1rem* 3);
    visibility: visible;
  }
  
  .landing_content .c-text_accordion {
    display: inline-block;
    font-weight: 400;
    width: calc(62*(100vw / 375));
    white-space: nowrap;
    margin-top: calc(16*(100vw / 375));
    margin-left: calc(200*(100vw / 375));
    font-size: calc(11.4*(100vw / 375));
    letter-spacing: 0.03em;
    /* text-align: center; */
    position: relative;
    color: var(--color-white);
    border-bottom: solid calc(0.6*(100vw / 375)) #fff;
    padding-bottom: calc(1*(100vw / 375));
    cursor: pointer;
  }
  .landing_content .c-text_accordion.__open {
    width: calc(40*(100vw / 375));
    margin-top: calc(16*(100vw / 375));
    margin-left: calc(223*(100vw / 375));
  }
  .landing_content .c-text_accordion::before {
    content: "";
    position: absolute;
    top: calc(6*(100vw / 375));
    right: 0;
    width: calc(6*(100vw / 375));
    height: 0.5139px;
    background-color: var(--color-white);
  }
  .landing_content .c-text_accordion::after {
    content: "";
    position: absolute;
    top: calc(4*(100vw / 375));
    right: calc(3.5*(100vw / 375));
    width: 0.5139px;
    height: calc(6*(100vw / 375));
    background-color: var(--color-white);
  }
  .landing_content .c-text_accordion.__open::before {
    transform: rotate(-45deg);
    top: calc(6*(100vw / 375));
  }
  .landing_content .c-text_accordion.__open::after {
    transform: rotate(-45deg);
    top: calc(4*(100vw / 375));
    right: calc(3*(100vw / 375));
  }
  
  .landing_content .css-textarea {
    width: calc(263*(100vw / 375));
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 3;
  }
  .landing_content .css-textarea::before {
    content: '';
    display: block;
    width: calc(263*(100vw / 375));
    height: calc(94*(100vw / 375));
    position: absolute;
    background-image: url(../img/sp/white_box.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    left: 0;
    top: 0;
    z-index: 2;
    margin-top: calc(67*(100vw / 375));
  }
  .landing_content .css-textarea p {
    font-size: calc(12*(100vw / 375));
    line-height: 1.6976149915;
    color: var(--color-white);
    position: absolute;
    top: calc(95*(100vw / 375));
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
  }

  .landing_content .css-hover {
    position: relative;
  }
  .landing_content .css-credit_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
  }
  .landing_content .js-hover {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    transition: ease-in, background-color 0.5s, opacity 0.5s;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }
  /* .landing_content .js-hover--active {
    background-color: #8C6C61;
    opacity: 0.85;
  } */
  .landing_content .js-hover .css-credit {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
    position: relative;
  }
  .landing_content .js-hover .css-hover_text {
    display: inline-block;
    position: relative;
    z-index: 2;
    font-weight: 400;
    font-style: normal;
    font-size: calc(13.5*(100vw / 375));
    line-height: 2.07185185185;
    letter-spacing: 0.035em;
  }
  .landing_content .js-hover .css-credit .css-credit_link {
    position: relative;
    z-index: 2;
    font-weight: 400;
    font-style: normal;
    font-size: calc(11.5*(100vw / 375));
    line-height: 1.5147826087;
    letter-spacing: 0;
    display: block;
    color: var(--color-white);
  }

  .landing_content .intro_content {
    position: relative;
    margin-top: calc(102*(100vw / 375));
    padding-bottom: calc(109*(100vw / 375));
  }
  .landing_content .intro_content .img-frame {
    position: absolute;
    width: calc(346*(100vw / 375));
    pointer-events: none;
    top: calc(-42*(100vw / 375));
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
  }

  .landing_content .intro_content .credit_inner {
    width: calc(195*(100vw / 375));
    margin: 0 auto;
    white-space: nowrap;
  }

  .landing_content .intro_content .css-credit_link,
  .landing_content .intro_content .css-hover_text {
    color: var(--color-white);
  }
  .landing_content .intro_content .css-hover_text {
    top: calc(62*(100vw / 375));
    left: 0;
  }
  .landing_content .intro_content .css-credit_link {
    top: calc(104*(100vw / 375));
    left: 0;
    padding-top: calc(10*(100vw / 375));
  }
  .landing_content .intro_content .css-credit {
    top: 0rem;
    left: 0;
    z-index: 3;
  }
  .landing_content .intro_content .css-image {
    width: calc(285*(100vw / 375));
    max-width: calc(285*(100vw / 375));
    margin: 0 auto;
  }

  .landing_content .intro_content .css-image .js-hover {
    width: 100%;
  }

/* ===============================================
*  *
=============================================== */
.intro_content .js-hover {
  width: calc(285*(100vw / 375));
  max-width: calc(285*(100vw / 375));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.intro_content .css-bg{
  content: '';
  mix-blend-mode: multiply;
  background: #8C6C61;
  opacity: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.intro_content .css-image:hover .css-bg{
  opacity: 1;
}
/* ===============================================
*  *
=============================================== */

  .intro_content .js-hover--active {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 1;
}

  .landing_content .css-section1 {
    position: relative;
    width: 100%;
    height: auto;
    background-color: var(--color-light-yellow);
  }
  .landing_content .css-section1::after {
    content: "";
    display: block;
    clear: both;
  }
  .landing_content .css-section1 .side_txt {
    position: absolute;
    width: calc(12*(100vw / 375));
    height: auto;
    top: 50%;
    transform: translateY(-50%);
  }
  .landing_content .css-section1 .side_left {
    left: calc(9*(100vw / 375));
  }
  .landing_content .css-section1 .side_right {
    right: calc(9*(100vw / 375));
  }
  .landing_content .css-section1 .css-section1_content1 {
    display: flex;
    justify-content: space-between;
    width: calc(300*(100vw / 375));
    height: calc(649*(100vw / 375));
    margin: 0 auto;
    padding: calc(51*(100vw / 375)) 0;
    gap: 0;
    position: relative;
  }
  .landing_content .css-section1 .css-section1_content1 .content1_warp01 {
    width: calc(245*(100vw / 375));
    margin-top: 0;
    position: absolute;
    bottom: calc(50*(100vw / 375));
    right: calc(-24*(100vw / 375));
    pointer-events: none;
  }
  .landing_content .css-section1 .css-section1_content1 .content1_warp02 {
    width: calc(253*(100vw / 375));
    height: fit-content;
  }


  .landing_content .css-section2 {
    position: relative;
    width: calc(375*(100vw / 375));
    height: auto;
    background-color: var(--color-light-blue);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    padding-bottom: calc(110*(100vw / 375));
  }
  .landing_content .css-section2::before {
    content: '';
    position: absolute;
    background-image: url(../img/sp/bg02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    mix-blend-mode: multiply;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .landing_content .css-section2 .section2_deco01 {
    width: calc(230*(100vw / 375));
    position: absolute;
    top: calc(-87*(100vw / 375));
    left: calc(-89*(100vw / 375));
    z-index: 5;
    pointer-events: none;
  }

  .landing_content .css-section2 .section2_inner {
    width: calc(375*(100vw / 375));
    max-width: calc(375*(100vw / 375));
    margin: 0 auto;
    position: relative;
  }

  .landing_content .css-section2 .css-section2_wrapper01 {
    width: calc(320*(100vw / 375));
    position: static;
    margin: 0 auto;
    margin-top: calc(118*(100vw / 375));
  }

  .landing_content .css-section2 .section2_deco02 {
    width: calc(230*(100vw / 375));
    position: absolute;
    bottom: calc(-196*(100vw / 375));
    right: calc(-88*(100vw / 375));
    z-index: 5;
    pointer-events: none;
  }

  .css-section2 .css-section2_wrapper01 .credit_inner {
    width: calc(201*(100vw / 375));
    margin: 0 auto;
    white-space: nowrap;
  }

  .landing_content .css-section2 .css-section2_wrapper02 {
    width: calc(320*(100vw / 375));
    position: static;
    margin: 0 auto;
    margin-top: calc(99*(100vw / 375));
  }

  .css-section2 .css-section2_wrapper01 .css-hover_text {
    top: calc(101*(100vw / 375));
    left: 0;
    pointer-events: none;
    white-space: nowrap;
}
.css-section2 .css-section2_wrapper01 .css-credit_link {
  top: calc(172*(100vw / 375));
  left: 0;
}

.css-section2 .css-section2_wrapper02 .credit_inner {
  width: calc(220*(100vw / 375));
  margin: 0 auto;
  white-space: nowrap;
}

.css-section2 .css-section2_wrapper02 .css-hover_text {
  top: calc(100*(100vw / 375));
  left: 0;
  letter-spacing: -0.04em;
  pointer-events: none;
}
.css-section2 .css-section2_wrapper02 .css-credit_link {
  top: calc(172*(100vw / 375));
  left: 0;
}

  .css-section2 .css-section2_wrapper01 .js-hover,
  .css-section2 .css-section2_wrapper02 .js-hover {
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }

  .css-section2 .css-section2_wrapper01 .css-bg{
    content: '';
    mix-blend-mode: multiply;
    background: none;
    background-image: url(../img/sp/img_bg01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
  }
  
  .css-section2 .css-section2_wrapper02 .css-bg{
    content: '';
    mix-blend-mode: multiply;
    background: none;
    background-image: url(../img/sp/img_bg02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
  }
  

  .css-section2 .css-section2_wrapper01 .css-image:hover .css-bg,
  .css-section2 .css-section2_wrapper02 .css-image:hover .css-bg {
    opacity: 1;
  }

  .css-section2 .css-section2_wrapper01 .js-hover--active,
  .css-section2 .css-section2_wrapper02 .js-hover--active {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
  }

  .landing_content .css-section3 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--color-light-yellow);
    padding-block: calc(97*(100vw / 375)) calc(170*(100vw / 375));
  }
  .css-section3 .swiper_first {
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    display: none;
  }
  .css-section3 .swiper_first.swiper-initialized {
    display: block;
  }
  .css-section3 .swiper_first .swiper-slide {
    width: calc(295*(100vw / 375));
    object-fit: cover;
    overflow: hidden;
  }
  .css-section3 .swiper_first .swiper-pagination {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: calc(43*(100vw / 375));
    /* ページネーションの基本スタイル */
    /* 選択されているページネーション */
  }
  .css-section3 .swiper_first .swiper-pagination .swiper-pagination-bullet {
    background-color: var(--color-yellow);
    border-radius: unset;
    /* これがないと画像が欠ける */
    opacity: 1;
    /* 画像の透過を無くす */
    width: calc(7*(100vw / 375));
    height: calc(7*(100vw / 375));
    margin: 0;
  }
  .css-section3 .swiper_first .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-left: calc(29*(100vw / 375));
  }
  .css-section3 .swiper_first .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-blue);
    width: calc(7*(100vw / 375));
    height: calc(7*(100vw / 375));
  }

  .landing_content .css-check_all {
    width: calc(194*(100vw / 375));
    margin: 0 auto;
    margin-top: calc(84*(100vw / 375));
  }

  .css-section3 .css-credit{
    width: calc(260*(100vw / 375));
  }

  .css-section3 .js-hover {
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }

  .css-section3 .css-bg{
    content: '';
    mix-blend-mode: multiply;
    background: none;
    background-image: url(../img/sp/slider_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
  }
  
  .css-section3 .css-image:hover .css-bg {
    opacity: 1;
  }

  .css-section3 .js-hover:hover {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
  }

  .css-section3 .css-credit_link {
    position: relative;
    z-index: 2;
    font-weight: 400;
    font-style: normal;
    font-size: calc(11.5*(100vw / 375));
    line-height: 1.7391304348;
    letter-spacing: 0.05em;
    display: block;
    color: var(--color-white);
    text-align: center;
  }

  .css-section3 .credit_inner._01 {
    padding-top: calc(188*(100vw / 375));
  }
  .css-section3 .credit_inner._02 {
    padding-top: calc(188*(100vw / 375));
  }
  .css-section3 .credit_inner._03 {
    padding-top: calc(100*(100vw / 375));
  }
  .css-section3 .credit_inner._03 .css-credit_link {
    padding-top: calc(30*(100vw / 375));
  }
  
}