@charset "UTF-8";
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* 
font-family: "source-han-serif-japanese", serif;
font-weight: 500;
font-style: normal; */


picture{
  display: block;
}
.main-area.lp {
  background-size: 100% auto;
  background-position: top center;
}

.header {
  background: rgb(245, 239, 234) !important;
  background: linear-gradient(0deg, transparent 0%, rgba(25, 69, 96, 0.4037990196) 25%, rgb(25, 69, 96) 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;
}

.landing_content{
  font-family: "the-seasons", "ryo-text-plusn", serif;
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
  --color-navy: #030A3D;
  --color-beige: #E8DCC5;
  --color-bg-blue: #21516E;
  --color-bg-navy: #1D425A;
  --color-bg-beige: #C8AB7D;
  font-family: "source-han-serif-japanese", serif;
  font-weight: 500;
  font-style: normal; 
  background-color: #21516E;
}

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

.main-area.lp {
  position: relative;
  background: #194560;
}

.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;
}

.css-mainvisual_image_text_upper{
  position: absolute;
  background-repeat: no-repeat;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
  /* background-image: url(../img/SVG/ttl01_pc.svg); */
}

.css-mainvisual_image_text_lower{
  position: absolute;
  background-repeat: no-repeat;
  z-index: 100;
  transform: translateX(-50%);
  background-image: url(../img/SVG/ttl02_pc.svg);

}

.css-mainvisual_image_text_center{
  position: absolute;
  width: 63.2rem;
  height: 5.82412rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.css-mainvisual_image_text_center .js-zoomout{
  position: absolute;
  width: 100%;
  z-index: 100;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-image: url(../img/SVG/ttl-beige_pc.svg); */
  border: 0;
  /* left: 27.4%; */
}


.css-section_wrapper{
  width: 73.5rem;
  margin: 0 auto;
}

.css-section1{
  background-color: var(--color-bg-blue);
}

.css-section1 .css-section1_bg__wrappper{
  position: relative;
}

.css-section1 .css-section1_bg__wrappper::after{
  content: "";
  position: absolute;
  background-size: cover;
  z-index: -1;
}

.css-section2{
  position: relative;
}

.css-section2 .css-section2_bg_un2,
.css-section3 .css-section2_bg_un2{
  position: absolute;
  z-index: 10;
  background-size: contain;
  background-image: url(../img/SVG/catline_pc.svg);
  left: 50%;
  transform: translateX(-50%);
}

.css-section2 .css-section2_txt{
  position: absolute;
  z-index: 10;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/SVG/section2_txt.svg);
  left: 50%;
  transform: translateX(-50%);
}

.flwr{
  position: absolute;
}

.css-section3 .css-section3_content1{
  position: relative;
  overflow: hidden;
}

.css-section3 .css-section3_content1_deco{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.css-section3_content1_deco.__upper{
  top: 0;
}

.css-section3_content1_deco.__bottom {
  bottom: 0;
}

.css-textarea_ttl{
  font-weight: 700;
}

.crdt{
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.css-section1 .css-section1_wrapper .css-credit_link,
.css-section1 .css-section1_wrapper .css-hover_text {
  color: var(--color-beige);
}
.css-section1 .css-section1_content2 .css-credit_link,
.css-section1 .css-section1_content2 .css-hover_text {
  color: var(--color-beige);
}

.css-section3 .css-section3_wrapper .css-credit_link,
.css-section3 .css-section3_wrapper .css-hover_text {
  color: var(--color-beige);
}
.css-section1 .css-section1_content2 .css-credit_link,
.css-section1 .css-section1_content2 .css-hover_text {
  color: var(--color-beige);
}

.css-section2 .css-section2_wrapper .js-hover--active {
  background-color: var(--color-beige);
}
.css-section3 .css-section3_wrapper .css-credit_link,
.css-section3 .css-section3_wrapper .css-hover_text {
  color: var(--color-beige);
}

.css-section3{
  background-color: #1A4C6A;
 }

@media screen and (min-width: 768px) {
  .landing_content .css-section3 .css-section3_wrapper {
    overflow: visible;
    background-color: var(--color-bg-blue);
  }

  .s-view {
    display: none;
  }

  img {
    width: 100%;
    height: auto;
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  .css-section1,
  .css-section3 {
    position: relative;
    z-index: 1;
  }

  .css-section1::after,
  .css-section3::after {
    content: "";
    position: absolute;
    background-image: url(../img/svg/sec01-bg_pc.svg);
    width: 100%;
    height: 100%;
    opacity: 0.25;
    top: 0;
    left: 0;
    z-index: -1;
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
    mix-blend-mode: multiply;
  }

  /* -----------------------------
  .mainvisual
   -----------------------------*/
  .css-mainvisual{
    position: relative;
  }

  .css-mainvisual .css-mainvisual_bg_un2 {
    position: absolute;
    background-image: url(../img/SVG/cat.svg);
    background-repeat: repeat-X;
    background-size: contain;
    background-position: center;
    width: 100%;
    background-position: center;
    height: 5.77303rem;
    bottom: -3rem;
    z-index: 10;
  }

  .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_image_area {
    position: relative;
    margin: 0 auto;
    width: 100%;
  }

  .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_image_area .css-mainvisual_image {
    width: 100%;
    margin: 0 auto;
    z-index: 1;
    /* overflow: hidden; */
    /* aspect-ratio: 700/800; */
  }

  .css-mainvisual_image_text_upper{
    position: absolute;
    background-repeat: no-repeat;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../img/SVG/ttl01_pc.svg);
    width: 34.76021rem;
    height: 3.20366rem;
    top: 6rem;
  }

  .css-mainvisual_image_text_lower{
    position: absolute;
    background-repeat: no-repeat;
    z-index: 100;
    transform: translateX(-50%);
    background-image: url(../img/SVG/ttl02_pc.svg);
    width: 25.63613rem;
    height: 3.20366rem;
    left: 50%;
    bottom: 9.5rem;
  }

  .css-mainvisual_image_text_center{
    width: 63.2rem;
    height: 5.82412rem;
    bottom: 47%;
  }

  .css-hover {
    position: relative;
  }
  .css-credit_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
  }
  .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;
  }
  .js-hover--active {
    background-color: var(--color-bg-blue);
    opacity: 0.85;
    z-index: 100;
  }
  .js-hover .css-hover_text {
    display: inline-block;
    position: relative;
    z-index: 2;
    font-size: 1.1rem;
    line-height: 2rem;
    letter-spacing: 0.08em;
    font-feature-settings: "palt";
    text-align: center;
  }
  .js-hover .css-credit {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    z-index: 2;
    text-align: center;
    width: 100%;
    height: 100%;
  }
  .js-hover .css-credit .css-hover_icon1,
  .js-hover .css-credit .css-hover_icon2 {
    width: 2rem;
    aspect-ratio: 20/20;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .js-hover .css-credit .css-credit_link {
    position: relative;
    display: inline-block;
    z-index: 2;
    font-family: "yu-gothic-pr6n", sans-serif;
    font-size: 1.2rem;
    font-feature-settings: "palt";
    line-height: 2rem;
    letter-spacing: 0.02em;
    text-align: center;
  }

  /* -----------------------------
  .css-section1
   -----------------------------*/

  .css-section1 {
    position: relative;
    margin: 0 auto;
    background-color: var(--color-bg-blue);
  }

  .css-section1 .css-section_wrapper{
    position: relative;
    z-index: 10;
    background-color: var(--color-bg-blue);
  }

  .css-section1 .css-section1_content1 {
    /* height: 73.6787rem; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 17.6rem 0 5rem;
  }

  .css-section1 .css-section1_wrapper .img-cont{
    width: 17.6rem;
    padding-top: 12.2rem;

  }

  .css-section1 .css-section1_content1 .css-text1 {
    font-weight: 300;
    font-style: normal;
    font-size: 2.6rem;
    letter-spacing: 0.2em;
    line-height: 3.177rem;
    font-feature-settings: "palt";
    color: var(--color-beige);
    text-align: center;
    letter-spacing: 0.12em;
    font-weight: 600;
  }
  .css-section1 .css-section1_content1 .css-text2 {
    font-weight: 300;
    font-style: normal;
    font-size: 1.6rem;
    letter-spacing: 0.23em;
    line-height: 3.5rem;
    font-feature-settings: "palt";
    color: var(--color-beige);
    text-align: center;
    margin-top: 3.8rem;
  }
  .css-section1 .css-section1_content1 .css-textarea {
    position: relative;
    margin-top: 6.8rem;
    left: calc(100%* 7 / 1400);
    border-radius: 0.3284rem;
    width: 35.5rem;
    aspect-ratio: 355.7214 / 111.7503;
    border: solid 1px #E8DCC5;
    margin-right: 0.6rem;
  }

  .css-section1 .css-section1_content1 .css-textarea .css-textarea_text {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    line-height: 2.7rem;
    font-feature-settings: "palt";
    color: var(--color-beige);
    text-align: center;
    margin-top: 0.8rem;
  }

  .css-section1 .css-section1_content1 .css-textarea .css-textarea_text span {
    font-style: normal;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    letter-spacing: 0.15em;
    font-feature-settings: "palt";
    position: relative;
    display: inline-block;
  }

  .css-section1 .css-section1_content1 .css-textarea .css-textarea_text span:nth-of-type(1) {
    margin-bottom: 0.7rem;
  }

  .css-section1 .css-section1_content1 .css-textarea .css-textarea_text span:nth-of-type(2) {
    margin-top: 0rem;
  }
  .css-section1 .css-section1_content1 .css-textarea .css-textarea_text span:nth-of-type(3) {
    margin-top: 0rem;
  }

  .css-section1 .css-section1_bg__wrappper .css-hover{
    height: 61.6rem;
  }

  .css-section1 .css-section1_bg__wrappper::after{
    content: "";
    position: absolute;
    background-image: url(../img/SVG/flower_bg_pc.svg);
    background-size: cover;
    width: 73.5rem;
    height: 115rem;
    top: 1.7rem;
    right: 0rem;
  }

  .css-section1 .css-section1_wrapper .css-link {
    display: none;
  }


  .css-section1 .css-section1_wrapper .css-hover_text{
    margin-top: 2.5rem;
    margin-bottom: 0.7rem;
  }

  .css-section1 .css-section1_wrapper .css-credit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30.2rem;
    left: -16rem;
    top: 4.5rem;
  }

  .css-section1 .css-section1_content2 .css-credit{
    width: 34rem;
    margin: 0 7rem 2rem auto;
  }

  .css-section1_wrapper .js-hover{
    height: 53.40896rem;
  }

  .css-section1 .css-section1_content2{
    height: 63.6rem;
  }

  .css-section1 .css-section1_wrapper .css-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 53.40896rem;
    /* aspect-ratio: 639.6553/856.8146; */
    /* left: calc(100% * 7 / 1400); */
  }

  .css-section1 .css-section1_wrapper .img-cont{
    width: 30.2rem;
    margin: 0 auto 10.8rem 5.8rem;
  }

  .css-section1 .css-section1_content2 .css-hover_text {
    top: 14rem;
    left: 0rem;
    text-align: center;
  }
  .css-section1 .css-section1_content2 .css-credit_link {
    left: 0rem;
  }
  .css-section1 .css-section1_content2 .css-credit {
    top: 0rem;
    left: 0rem;
  }
  .css-section1 .css-section1_content2 .css-image {
    position: relative;
    /* max-width: 51.99053rem; */
    /* aspect-ratio: 519.9053/446.5091; */
  }

  .css-section1 .css-section1_content2 .img-cont{
    width: 34rem;
    padding: 7.52rem 0 12.52rem;
    margin: 0 7rem 0 auto;
  }


  /* -----------------------------
  .css-section2
   -----------------------------*/
  .css-section2 {
    background-color: var(--color-bg-beige);
    /* background-image: url(/Page/LP/2025/0207_cat/img/bg3.png); */

  }

  .css-section3 .css-section2_bg_un2,
  .css-section2 .css-section2_bg_un2{
    width: 100vw;
    height: 7.38723rem;
    top: 1.2rem;
    background-image: url(../img/svg/catline_pc2.svg);
    background-size: contain;
    background-position: center;
  }

  .css-section2 .css-section2_txt{
    width: 53rem;
    height: 6.17959rem;
    bottom: 7.36rem;
  }

  .css-section2 .css-section2_wrapper .css-credit_link,
  .css-section2 .css-section2_wrapper .css-hover_text {
    color: var(--color-navy);
  }

  .css-section2 .css-section2_wrapper .css-hover_text{
    margin-top: 3.4rem;
    padding-bottom: 2.7rem;
  }

  .css-section2 .css-section2_wrapper .js-hover--active {
    background-color: var(--color-bg-beige);
  }
  .css-section2 .css-section2_content1 {
    width: 73.5rem;
    margin: 0 auto;
  }

  .css-section2_content1 .crdt:nth-child(2),
  .css-section2_content1 .crdt:nth-child(3){
    margin-top: 1.3rem;
  }


  .css-section2 .css-section2_content2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 23.13066rem;
    aspect-ratio: 231.3066/268.06;
    margin: 0 auto;
    margin-top: 0rem;
  }
  .css-section2 .css-section2_content2 .css-credit_link,
  .css-section2 .css-section2_content2 .css-hover_text {
    white-space: nowrap;
  }
  .css-section2 .css-section2_content2 .css-credit {
    top: 0rem;
    left: 0rem;
  }
  .css-section2 .css-section2_content2 .css-credit .css-credit_link:nth-of-type(1) {
    margin-top: 12rem;
    left: -3rem;
  }

  /* -----------------------------
  .css-section3
   -----------------------------*/

   .css-section3{
    padding-bottom: 6.4rem;
   }

   .css-section3 .css-section_wrapper{
    position: relative;
    z-index: 10;
   }

  .css-section3 .css-section3_content1_deco{
    width: 62.673rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .css-section3 .css-section2_bg_un2{
    position: relative;
    top: -2.3rem;
    z-index: 100;
  }

  /* .css-section3_content1 .css-credit{
    row-gap: 4.5rem;
  } */

  .css-section3 .css-section3_content1 .css-section3_content1_img{
    width: 52.8rem;
    padding: 7.64rem 0;
    margin: 0 auto;
  }

  .css-section3 .css-section3_bg_un2 {
    background-image: url(../img/svg/catline_pc.png);
    width: 71.153rem;
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 6.3rem;
  }

  .css-section3 .css-section3_wrapper .css-section3_bg {
    top: 0;
    left: 0;
    position: absolute;
    background-image: url(../img/svg/cat_line.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
  }

  .css-section3_content1,
  .css-section3_content1 .css-hover{
    height: 80rem;
  }

  .css-section3_content1 .credit_wrap{
    margin-bottom: 3.2rem;
  }

  .css-section3 .css-section3_wrapper .css-section3_content1 .css-hover_text{
    margin-bottom: 1.5rem;
  }

  .css-section3 .css-section3_wrapper .css-hover_text {
    margin-bottom: 3.5rem;
  }

  .css-section3 .css-section3_content2{
    height: 90rem;
  }

  .css-section3_content2 .css-hover,
  .css-section3 .css-section3_content2 .js-hover{
    height: 87rem;
  }

  .css-section3_content2 .credit_wrap {
    margin-bottom: 0.7rem;
  }

  .css-section3 .css-section3_content2 .credit_wrap:nth-child(7){
    margin-bottom: 6.5rem;
  }

  .css-section3 .css-section3_wrapper .css-credit_link {
    font-size: 1.2rem;
    letter-spacing: 0.02em;
  }

  .css-section3 .css-section3_content2 .css-check_all{
    width: 13.94391rem;
    aspect-ratio: 139.4391 / 35.5013;
    position: absolute;
    bottom: 6.4rem;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
  }

}

@media screen and (max-width: 767px) {
  .main-area.lp {
    margin-bottom: 0;
  }

  .landing_content{
    overflow: visible;
    position: relative;
  }

  .landing_content {
    overflow: hidden;
    position: relative;
  }

  .l-view {
    display: none;
  }

  img {
    width: 100%;
    height: auto;
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  .css-mainvisual{
    position: relative;
  }

  .css-mainvisual .css-mainvisual_bg_un2 {
    position: absolute;
    background-image: url(../img/svg/cat_line.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: calc(128.627* (100vw / 132.292));
    height: calc(17.728 * 100vw / 132.292);
    bottom: calc(-11* (100vw / 132.292));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }


  .css-mainvisual .css-mainvisual_wrapper {
    position: relative;
    margin: 0 auto;
  }
  .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_bg {
    display: none;
  }
  .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_image_area {
    overflow-y: hidden;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  .css-mainvisual .css-mainvisual_wrapper .css-mainvisual_image_area .css-mainvisual_image {
    width: 100%;
    margin: 0 auto;
    z-index: 1;
  }

  .css-mainvisual_image_text_upper{
    /* background-image: url(../img/SVG/ttl01_pc.svg); */
    width: calc(83.608*(100vw / 132.292));
    height: calc(7.704*(100vw / 132.292));
    left: 50%;
    transform: translateX(-50%);
    top: calc(40*(100vw / 375));
  }

  .css-mainvisual_image_text_lower{
    background-image: url(../img/SVG/ttl02_pc.svg);
    width: calc(61.661* (100vw / 132.292));
    height: calc(7.704* (100vw / 132.292));
    bottom: calc(60*(100vw / 375));
    left: 50%;
    transform: translateX(-50%);
  }

  .css-mainvisual_image_text_center{
    /* background-image: url(../img/SVG/ttl-beige_pc.svg); */
    width: calc(103.117* (100vw / 132.292));
    height: calc(9.503* (100vw / 132.292));
    bottom: 51%;
  }

  .css-hover {
    display: block;
    position: relative;
    cursor: pointer;
  }
  .css-credit_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
  }
  .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;
  }
  .js-hover--active {
    background-color: var(--color-bg-blue);
    opacity: 0.85;
  }
  .js-hover .css-hover_text {
    z-index: 2;
    display: inline-block;
    position: relative;
    font-size: calc(11 * 100vw / 375);
    line-height: calc(21 * 100vw / 375);
    margin-top: calc(25*(100vw / 375));
    letter-spacing: 0.08em;
    font-feature-settings: "palt";
    text-align: center;
    margin-top: calc(21*(100vw / 375));
  }

  .js-hover .css-credit {
    display: flex;
    /* position: relative; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 2;
  }

  .js-hover .css-bk_credit .css-credit_link,
  .js-hover .css-credit .css-credit_link {
    position: relative;
    display: inline-block;
    z-index: 5;
    font-feature-settings: "palt";
    letter-spacing: 0.02em;
    text-align: center;
    font-size: calc(12*(100vw / 375));
    line-height: 1.9;
    pointer-events: all;
  }

  /* -----------------------------
  .css-section1
   -----------------------------*/
  .css-section1 {
    position: relative;
    margin-top: calc(0 * 100vw / 375);
  }

  .css-section1_wrapper .css-credit {
    padding-top: calc(36*(100vw / 375));
  }

  .css-section1_wrapper .js-hover{
    width: 100vw;
    height: calc(510.3493*(100vw / 375));
    top: calc(-98*(100vw / 375));
  }


  .css-section1 .css-section1_content1 {
    position: relative;
    width: calc(375 * 100vw / 375);
    padding: calc(47* (100vw /375)) 0 calc(49* (100vw /375));
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }

  .css-section1 .css-section1_content1::after{
    content: "";
    position: absolute;
    background-image: url(../img/svg/sec03-bg_sp.svg);
    background-repeat: repeat-y;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    top: 0;
    mix-blend-mode: multiply;
  }

  .css-section1 .css-section1_content1 .css-text1 {
    font-size: calc(19.8* 100vw / 375);
    line-height: calc(25* 100vw / 375);
    font-feature-settings: "palt";
    color: var(--color-beige);
    text-align: center;
    margin-top: calc(20* 100vw / 375);
    letter-spacing: 0.175em;
  }
  .css-section1 .css-section1_content1 .css-text2 {
    font-size: calc(12.1* 100vw / 375);
    letter-spacing: 0.165em;
    line-height: calc(21* 100vw / 375);
    font-feature-settings: "palt";
    color: var(--color-beige);
    text-align: center;
    line-height: 1.9834710744;
    margin-top: calc(21* 100vw / 375);
  }
  .css-section1 .css-section1_content1 .css-textarea {
    position: relative;
    margin-top: calc(47* 100vw / 375);
    border-radius: calc(2* 100vw / 375);
    width: calc(257* 100vw / 375);
    aspect-ratio: 216.639 / 65;
    border: solid 1px var(--color-beige);
  }
  .css-section1 .css-section1_content1 .css-textarea .css-textarea_text {
    font-size: calc(12.1 * 100vw / 375);
    letter-spacing: 0.08em;
    line-height: 1.9090909091;
    font-feature-settings: "palt";
    color: var(--color-beige);
    text-align: center;
    margin-top: calc(3 * 100vw / 375);
  }
  .css-section1 .css-section1_content1 .css-textarea .css-textarea_text span {
    font-size: calc(12.1 * 100vw / 375);
    letter-spacing: 0.08em;
    font-feature-settings: "palt";
    position: relative;
    display: inline-block;
  }
  .css-section1 .css-section1_content1 .css-textarea .css-textarea_text span:nth-of-type(1) {
    margin-top: calc(0 * 100vw / 375);
  }
  .css-section1 .css-section1_content1 .css-textarea .css-textarea_text span:nth-of-type(2) {
    margin-top: calc(0 * 100vw / 375);
    letter-spacing: 0.12em;
  }
  .css-section1 .css-section1_content1 .css-textarea .css-textarea_text span:nth-of-type(3) {
    margin-top: calc(-5 * 100vw / 375);
    letter-spacing: 0.12em;
  }

  .css-section1 .css-section1_bg__wrappper{
    position: relative;
    width: 100vw;
    height: 100%;
    background-image: url(../img/SVG/flower_bg_sp.svg);
    background-position-y: -1rem;
    background-size: cover;
  }

  .css-section1 .css-section_wrapper::after{
    content: "";
    position: absolute;
    width: calc(375*(100vw / 375));
    height: auto;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url(../img/svg/flower_bg_sp.svg);
    background-repeat: repeat-y;
    background-size: cover;
  }

  .css-section1 .css-section1_wrapper .css-bk_credit {
    position: relative;
    margin-top: calc(20 * 100vw / 375);
    left: calc(-2 * 100vw / 375);
    text-align: center;
  }
  .css-section1 .css-section1_wrapper .css-bk_credit .css-credit_link {
    position: relative;
    display: inline-block;
  }
  .css-section1 .css-section1_wrapper .css-bk_credit .css-credit_link:nth-of-type(1) {
    margin-top: calc(0 * 100vw / 375);
  }
  .css-section1 .css-section1_wrapper .css-bk_credit .css-credit_link:nth-of-type(2) {
    margin-top: calc(7 * 100vw / 375);
  }
  .css-section1 .css-section1_wrapper .css-bk_credit .css-credit_link:nth-of-type(3) {
    margin-top: calc(7 * 100vw / 375);
  }
  .css-section1 .css-section1_wrapper .css-bk_credit .css-credit_link:nth-of-type(4) {
    margin-top: calc(7 * 100vw / 375);
  }


  .css-section1 .css-section1_wrapper .css-imag{
    width: 100%;
  }

  .css-section1 .css-section1_wrapper,
  .css-section1 .css-section1_content2 {
    width: 100%;
  }

  .css-section1 .css-section1_wrapper .img-cont{
    width: calc(230 * 100vw / 375);
    margin: calc(98*(100vw / 375)) auto calc(50*(100vw / 375));
  }

  .css-section1 .css-section1_wrapper .css-image{
    position: relative;
    overflow: hidden;
    margin: calc(-2 * 100vw / 375) auto 0;
  }

  .css-section1 .css-section1_content2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100vw;
    height: calc(184*(100vw / 132.292));
    left: 0;
    padding-top: calc(26* 100vw / 132.292);
  }

  .css-section1 .css-section1_content2 .css-hover_text {
    top: calc(70 * 100vw / 375);
    left: calc(0 * 100vw / 375);
  }
/* 
  .css-section1 .css-section1_content2 .css-credit_link {
    top: calc(75 * 100vw / 375);
    left: calc(0 * 100vw / 375);
  } */

  .css-section1 .css-section1_content2 .css-credit {
    /* top: calc(-87 * 100vw / 375); */
    left: calc(0 * 100vw / 375);
    height: calc(510.3493*(100vw / 375));
    padding-bottom: calc(15*(100vw / 375));
  }

  .css-section1_content2 .js-hover .css-credit{
    position: relative;
  }

  .css-section1_content2 .js-hover{
    width: 100vw;
    height: calc(521.3493*(100vw / 375));
    top: calc(-26* 100vw / 132.292);
  }

  .css-section1 .css-section1_content2 .css-image {
    position: relative;
    width: 100vw;
    left: calc(0* 100vw / 375);
  }
  .css-section1 .css-section1_content2 .img-cont{
    width: calc(91.722* 100vw / 132.292);
    margin: 0 auto;
  }

  .css-section1 .css-section1_wrapper .css-hover_text{
    padding-bottom: calc(81*(100vw / 375));
  }


  /* -----------------------------
  .css-section2
   -----------------------------*/
   .css-section2 .crdt{
     letter-spacing: 0.0em;
   }
   .css-section2 li.crdt:nth-child(2),
   .css-section2 li.crdt:nth-child(3) {
    margin-top: calc(9*(100vw / 375));

  }
   .css-section2 .js-hover .css-hover_text{
    margin-top: calc(17*(100vw / 375));
    padding-bottom: calc(15*(100vw / 375));
   }

   .css-section2 .css-section2_bg_un2,
   .css-section3 .css-section2_bg_un2{
    width: calc(370 * 100vw / 375);
    height: calc(75 * 100vw / 375);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .css-section2 .css-section2_bg_un2 {
    top: calc(14*(100vw / 375));
  }
  .css-section2 .css-section2_txt{
    width: calc(301* (100vw /375));
    height: calc(34.9788* (100vw /375));
    bottom: calc(30* (100vw /375));
    background-size: cover;
  }

  .css-section2 .css-section2_wrapper .css-credit_link,
  .css-section2 .css-section2_wrapper .css-hover_text {
    color: var(--color-navy);
  }


  .css-section2 .css-section2_content1 {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
  }

  .css-section2 .css-section2_content2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: calc(375 * 100vw / 375);
    aspect-ratio: 375/256.7698;
    margin: 0 auto;
    margin-top: calc(12 * 100vw / 375);
  }
  .css-section2 .css-section2_content2 .css-image {
    width: calc(192.2054 * 100vw / 375);
    aspect-ratio: 192.2054/222.7458;
    margin: 0 auto;
    margin-top: calc(8 * 100vw / 375);
  }
  .css-section2 .css-section2_content2 .css-credit_link,
  .css-section2 .css-section2_content2 .css-hover_text {
    white-space: nowrap;
  }
  .css-section2 .css-section2_content2 .css-credit {
    top: calc(0 * 100vw / 375);
    left: calc(0 * 100vw / 375);
  }
  .css-section2 .css-section2_content2 .css-credit .css-credit_link:nth-of-type(1) {
    margin-top: calc(93 * 100vw / 375);
    left: calc(-26 * 100vw / 375);
  }


  /* -----------------------------
  .css-section3
   -----------------------------*/

   .css-section3_content2 .js-hover .css-credit{
    justify-content: flex-start;
    padding-top: calc(48* (100vw /375));
    height: calc(515.1401* (100vw /375));
   }
   .css-section3 .css-section3_content1_deco{
    position: absolute;
    width: 100%;
  }

  .css-section3 .css-section3_bg_un2 {
    background-image: url(../img/svg/catline_pc.png);
    width: 100%;
    height: calc(73.8723 * 100vw / 375);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: calc(60 * 100vw / 375);
  }
  .css-section3 .css-section3_wrapper {
    position: relative;
    margin: 0 auto;
  }

  .css-section3 .css-section3_content1 .css-section3_content1_img{
    width: calc(315.1377*(100vw / 375));
    padding: calc(91* (100vw / 375)) 0;
    margin: 0 auto;
  }


  .css-section3 .css-section3_wrapper .css-hover_text {
    font-size: calc(11* 100vw / 375);
    padding-bottom: calc(31*(100vw / 375));
    margin-top: calc(7*(100vw / 375));
    line-height: 1.6363636364;
  }

  .css-section3 .css-section3_wrapper .css-section3_content1 .css-hover_text{
    padding-bottom: calc(13*(100vw / 375));
    margin-top: calc(20*(100vw / 375));
    line-height: 1.8181818182;
  }

  .css-section3 .css-section3_wrapper .css-credit_link {
    font-size: calc(12* 100vw / 375);
    letter-spacing: 0.02em;
  }

  .css-section3 .css-section3_content1{
    width: 100vw;
  }

  .css-section3 .css-section3_content2 {
    background: var(--color-bg-navy);
    width: 100vw;
    padding-bottom: calc(5*(100vw / 375));
  }

  .css-section3 .css-section3_content2 .css-image{
    position: relative;
    z-index: 1;
  }

  .css-section3 .css-section3_content2 .css-image::after{
    content: "";
    position: absolute;
    left: 0;
    z-index: -2;
    background-image: url(../img/SVG/sec03-bg_sp.svg);
    background-repeat: repeat-y;
    background-size: cover;
    width: 100%;
    height: calc(515.1401* (100vw /375));
    opacity: 0.25;
    top: 0;
    mix-blend-mode: multiply;
  }

  .css-section3 .css-section2_bg_un2 {
    position: relative;
    bottom: calc(11*(100vw / 750));
    margin-top: calc(15*(100vw / 375));
  }

  .css-section3 .css-section3_content2 .css-check_all {
    position: absolute;
    aspect-ratio: 139.4391 / 35.5013;
    width: calc(133.2862 * 100vw / 375);
    bottom: calc(138* 100vw / 375);
    left: calc(0* 100vw / 375);
    right: 0;
    margin: auto;
    z-index: 2;
  }
  .css-section3 .css-section3_content2 .img-cont{
    position: relative;
    z-index: 1;
  }

  .css-section3 .css-section3_content2 .img-cover{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10;
    /* opacity: 0.5; */
    /* background: #20506E; */
  }
  .css-section3 .css-section3_content2 .img-cont::after{
    content: "";
    position: absolute;
    background-image: url(../img/SVG/sec03-bg_sp.svg);
    background-repeat: repeat-y;
    background-size: cover;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.25;
    mix-blend-mode: multiply;
  }
}

/* -----------------------------
.js-zoomout
  -----------------------------*/
.js-zoomout{
  opacity: 0;
}

.js-zoomout.active {
  animation-name: loadingScale, slidetoup;
  animation-fill-mode: both;
  opacity: 1;
}

.js-zoomout .cls-1{
  transition: ease-in-out 0.8s;
  fill: #E8DCC5;
}

.js-zoomout.active .cls-1{
  animation-name: changecolor;
  animation-fill-mode: both;
  /* fill: #030A3D; */
}

@media screen and (min-width: 768px) {
  .js-zoomout.active {
    animation-duration: 5s;
  }

  .js-zoomout.active .cls-1{
    animation-duration: 5s;
  }

  @keyframes slidetoup {
    from{
      opacity: 0;
    }
    60%{
      opacity: 1;
      transform: translateY(0);
    }
    to{
      top: 0 -440%;
      transform: translateY(calc(23rem - calc(800 * (100vw / 1400))));
    }

  }

  @keyframes loadingScale {
    from{
      /* opacity: 0; */
      scale: 1;
    }
    60%{
      /* opacity: 1; */
      scale: 0.555;
      scale: 1;
    }
    to{
      /* translate: 0 -440%; */
      scale: 0.555;
      /* opacity: 0; */
    }
  }
}

@media screen and (max-width: 767px) {
  .js-zoomout.active {
    animation-duration: 4s;
  }

  .js-zoomout.active .cls-1{
    animation-duration: 4s;
  }

  @keyframes loadingScale {
    from{
      opacity: 0;
    }
    60%{
      opacity: 1;
      transform: translateY(0);
    }
    to{
      top: 0 -440%;
      transform: translateY(-955%);
    }
  }

  @keyframes slidetoup {
    from{
      /* opacity: 0; */
      scale: 1;
    }
    60%{
      /* opacity: 1; */
      scale: 0.8;
      scale: 1;
    }
    to{
      /* translate: 0 -440%; */
      scale: 0.82;
      /* opacity: 0; */
    }
  }
}

@keyframes changecolor {
  from{
    fill: #e8dcc5;
  }
  90%{
    fill: #e8dcc5;
  }
  to{
    fill: #030A3D;
  }
}

/*----------------------------
js-fade-mv ｜ その場で
----------------------------*/
.js-fade-mv.on-spot {
  opacity: 0;
  transition-delay: 3.5s;
}

.js-fade-mv.on-spot.active {
  opacity: 1.0;
  filter: none;
  animation: fadein 0.5s ease-in;
  animation-delay: 3.5s;
}

@media screen and (min-width: 768px) {
  .js-fade-mv.on-spot {
    transition-delay: 4.5s;
  }

  .js-fade-mv.on-spot.active {
    animation-delay: 4.5s;
  }
}

@keyframes fadein {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}


/*----------------------------
js-fade.from-bottom ｜ 下から上へ出現（赤）
----------------------------*/
.js-fade.from-bottom {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.js-fade.from-bottom.active {
  transform: translateY(0);
  opacity: 1.0;
}


/*----------------------------
js-fade.from-up ｜ 上から下へ出現（赤）
----------------------------*/
.js-fade.from-up {
  transition: 0.8s ease-in-out;
  transform: translateY(-30px);
  opacity: 0;
}

.js-fade.from-up.active {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
falling flwr
----------------------------*/
.flwr_box{
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.flwr{
  opacity: 0;
  transition: ease-in, background-color 0.5s, opacity 0.5s;
  z-index: 98;
  pointer-events: none;
}

.flwr.active{
  animation: fall 5s linear both;
}

@media screen and (min-width: 768px) {
  .flwr_box{
    width: 73.5rem;
  }

  .flwr1{
    width: 16.03565rem;
    top: 1rem;
    left: -2.5rem;
  }

  .flwr2{
    width: 17.53315rem;
    top: 6.6rem;
    left: 21rem;
  }

  .flwr3{
    width: 17.70796rem;
    top: 20rem;
    right: -3.5rem;
  }

  .flwr4{
    width: 22.5499rem;
    top: 29rem;
    left: -6%;
  }

  .flwr5{
    width: 18.55184rem;
    top: 49%;
    left: -1%;
  }

  .flwr6{
    width: 23.53358rem;
    top: 62rem;
    left: 27.5%;
  }

  .flwr7{
    width: 24.30496rem;
    top: 96rem;
    left: 32%;
  }
}

@media screen and (max-width: 767px) {
  .flwr_box{
    width: calc(375* (100vw /375));
  }

  .flwr1{
    width: calc(87.781* (100vw / 132.292));
    top: calc(67*(100vw / 375));
    left: calc(-75*(100vw / 375));
  }

  .flwr2{
    width: calc(81.428* (100vw / 132.292));
    top: calc(257*(100vw / 375));
    right: calc(-94*(100vw / 375));
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
  }

  .flwr3{
    width: calc(81.428* (100vw / 132.292));
    top: calc(536*(100vw / 375));
    right: calc(-69*(100vw / 375));
  }

  .flwr4{
    width: calc(73.573* (100vw / 132.292));
    top: calc(683*(100vw / 375));
    left: calc(-63*(100vw / 375));
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }

}

@media screen and (min-width: 768px) {
  @keyframes fall {
    0% {
      transform: translateY(-20rem);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes fall2 {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    90% {
      opacity: 0.8;
  
    }
    100% {
      top: 88%;
      opacity: 0;
    }
  }
}


@media screen and (max-width: 767px) {
  @keyframes fall {
    0% {
      transform: translateY(calc(-200* (100vw /375)));
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* @keyframes sway1 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(200px) rotate(0deg);
  }
}

@keyframes sway2 {
  from {
    transform: translateX(200px) rotate(-45deg);
  }
  to {
    transform: translateX(0px) rotate(0deg);
  }
}
 */