@charset "UTF-8";

/* base

------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap");

:root {

  --easing: cubic-bezier(.2, 1, .2, 1);

  --transition: .8s var(--easing);

  --color-base: #f8f8f8;

  --color-gray: #ddd;

  --color-theme: #f5695f;

  --color-theme-darken: #f12617;

  --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;

  --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;

  --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;

  --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff,.2);

}



html {

  /*font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "Spartan",sans-serif;*/

  font-family: "Kosugi Maru", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "Spartan",sans-serif;

  font-size: 62.5%;

  line-height: 1.8;

  height: 100%;

  word-break: break-word;

  color: #333;

  background-color: var(--color-base);

  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;

}

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

  html {

    -webkit-text-size-adjust: 100%;

  }

}

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

  html {

    font-size: 50%;

  }

}



body {

  font-size: 1.6rem;

  margin: 0;

}



*,

*::before,

*::after {

  -webkit-box-sizing: border-box;

          box-sizing: border-box;

}



::-moz-selection {

  color: #fff;

  background: var(--color-theme);

}



::selection {

  color: #fff;

  background: var(--color-theme);

}



img {

  border: 0;

  margin: 0;

}



figure {

  margin: 0;

}



p {

  margin: 0;

  padding: 0;

}



a {

  text-decoration: none;

  color: #333;

}



ul,

ol {

  margin: 0;

  padding: 0;

  list-style: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  margin: 0;

  padding: 0;

}



main {

  overflow: hidden;

  display: block;

}



.titleGreenDot {

    margin-bottom: 20px;

}

.titleGreenDot .titleWrap {

    display: flex;

    align-items: baseline;

    position: relative;

}

.eng {

  font-family: "Spartan",sans-serif;

    font-weight: 500;

    font-size: 3rem;

    margin-right: 20px;

    line-height: 1.3;

}

.titleGreenDot .jap {

    font-size: 1.8rem;

}

.genre-menu__title_mo {

  font-size: 21px;

  font-weight: 700;

  color: #fff;

  padding: 0 20px;

  margin-bottom: 15px;

}



/* 769px以上のとき */

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

  .pc-only {

    display: block;

  }

   .sp-only {

    display: none;

  }

}

/* 768px以下のとき */

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

  .pc-only {

    display: none;

  }

   .sp-only {

    display: block;

  }

}



.bgImageBtnWrap {

    display: flex;

    justify-content: center;

    padding: 50px 3% 90px;

}



.bgImageBtnWrap .link {

    margin: 0 15px 0 15px;

    max-width: 320px;

    width: 33%;

}



.commonLink01 {

    display: block;

    background: #CC0000;

    color: #fff;

    position: relative;

    text-align: center;

    font-size: 20px;

    font-weight: bold;

    padding: 38px 30px;

    border-radius: 10px;

    transition: .3s;

    line-height: 1.7;

    max-width: 600px;

    margin: 0 auto;

    letter-spacing: .2px;

}



.commonLink01:visited, .commonLink01:link {

    color: #fff;

}

.commonLink01:hover {

    background: #04aeb8;

    color: #fff;

    opacity: .7;

    transition: .3s;

}

.commonLink01:hover:after {

    border-top: 2px solid #000;

    border-right: 2px solid #000;

}



.commonLink01:after {

    content: '';

    width: 10px;

    height: 10px;

    border-top: 2px solid #fff;

    border-right: 2px solid #fff;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

    position: absolute;

    top: 0;

    bottom: 0;

    right: 15px;

    margin: auto 0;

    transition: .3s;

}



.commonLink07 {

    display: block;

    background: #fff;

    color: #000;

    position: relative;

    text-align: center;

    font-size: 20px;

    font-weight: bold;

    padding: 38px 30px;

    border-radius: 10px;

    transition: .3s;

    line-height: 1.7;

    max-width: 600px;

    margin: 0 auto;

    letter-spacing: .2px;

}



.commonLink07:hover {

    background: #04aeb8;

    color: #fff;

    opacity: .7;

    transition: .3s;

}



/* .commonLink07:hover:after {

    border-top: 2px solid #fff;

    border-right: 2px solid #fff;

} */

.commonLink07:after {

    content: '';

    width: 10px;

    height: 10px;

    border-top: 2px solid #000;

    border-right: 2px solid #000;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

    position: absolute;

    top: 0;

    bottom: 0;

    right: 15px;

    margin: auto 0;

    transition: .3s;

}





/* Grid */

.cssgrid {

  --gap: 30px;

  --col: 4;

  display: flex;

  flex-wrap: wrap;

  gap: var(--gap);

  margin: 0 0 2em;

}

.cssgrid--3{

  --gap: 40px;

  --col: 3;

}

.cssgrid > div {

  width: calc((100% - (var(--gap) * (var(--col) - 1))) / var(--col));

  line-height: 1;

}
.cssgrid--category .pp{
  padding-bottom: 0;
}
.cssgrid img{

   border-radius: 23px;

}



.cssgrid2 {

  display: grid;

  /*grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));*/

  grid-template-columns: auto auto auto;

  /*grid-auto-rows: 1fr;*/

  grid-gap: 0.8em;

  /*border: 1px solid #ddd;*/

  padding: 0.8em;

  margin: 0 0 2em;

}



.cssgrid2 > div {

  /*background: #ddd;*/

  overflow: auto;

  min-width: 0;

  padding: 1em;

}



.pp {

  cursor: pointer;

  position: relative;

  width: 100%;

  font-family: "Yusei Magic", sans-serif;

  border-radius: 23px;

  overflow: hidden;

  background: #fff;

  padding-bottom: 15px;

  align-content: center;

  text-align: center;

}



.pp img {

  height: auto;

  width: 100%;

  /* height: calc(100% - 30px); */

  /* width: auto; */

}



.pp__title{

  font-size: 20px;

  text-align: center;

  padding: 0 10px;

  line-height: 1.3;

}



.pp2 {

  cursor: pointer;

  position: relative;

  width: 100%;

}



.pp2 img {

  height: auto;

  width: 100%;

}



.hoverMask {

  align-items: center; /* テキストの中央揃え */

  background: rgba(0, 0, 0, .5); /* マスクの色(黒の50%) */

  bottom: 0;

  color: #fff; /* テキストの色 */

  display: flex; /* テキストの中央揃え */

  height: auto;

  justify-content: center; /* テキストの中央揃え */

  left: 0;

  opacity: 0; /* 最初は透明(非表示) */

  position: absolute;

  right: 0;

  top: 0;

  transition: opacity .6s ease; /* ゆっくりopacityのみへ変化させる */

  width: 100%;

  border-radius: 23px;

  padding: 0 5px



}

.hoverMask:hover {

  opacity: 1; /* hoverしたら透過しない(表示させる) */

}

.hoverMask p {

  width: 80%; /* テキストを横幅いっぱいにならないようにする */

}

.sp_br {

 display: none;

}



.c-header{

    z-index: 9999;

    position: absolute;

}



.white{

    color: #fff;

}

.b{

    font-weight:600;

}



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

	#footer .bgImageBtnWrap {

	    padding: 50px 3%;

	    display: flex;

	    justify-content: center;

	    flex-wrap: wrap;

	}

         .sp_br {

             display: block;

         }



}



.footerBg {

  background-image: linear-gradient(90deg, rgba(255, 213, 213, 1), rgba(212, 249, 249, 1));

}

.footer_Link_text {

    padding-top: 80px;

}

.footer_Link_text p {

    font-weight: bold;

    font-size: 26px;

}

.taC {

    text-align: center !important;

}



.l-inner {

  position: relative;

  -webkit-box-sizing: content-box;

  box-sizing: content-box;

  max-width: 1260px;

  margin: 0 auto;

  padding: 0 30px;

  margin: 0 auto;

}

.l-inner--s{

  max-width: 1120px;

}

.l-inner .l-inner{

  padding: 0

}

.l-inner2 {

  position: relative;

  -webkit-box-sizing: content-box;

  box-sizing: content-box;

  /*max-width: 1200px;*/

  margin: 0 auto;

  padding: 0 10rem;

}

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

  .l-inner {

    padding: 0 15px;

  }

  .l-inner2 {

    padding: 0 15px;

  }

}



.l-section {

  border-top: 1px solid #eee;

}

.l-section .l-inner {

  padding-top: 8rem;

  padding-bottom: 8rem;

}



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

  .pc-tab {

    display: none !important;

  }

}



/*ぱんくず*/

#bredcamb .bredcamb-list {

    max-width: 1150px;

    width: 100%;

    margin: 0 auto;

    display: flex;

    padding:0 15px 30px;

}

#bredcamb .bredcamb-list li a::after {

    content: '>';

    display: inline-block;

    padding: 0 10px;

}

#bredcamb .bredcamb-list li:last-child a span {

    color: #000 !important;

    font-weight: bold;

}





/* design

------------------------------*/

.c-temp {

  line-height: 1;

}

.c-temp .l-inner{

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

      -ms-flex-pack: justify;

          justify-content: space-between;

  padding-top: 4rem;

  padding-bottom: 4rem;

}



.l-inner2{

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

      -ms-flex-pack: justify;

          justify-content: space-between;

  padding-top: 2rem;

  padding-bottom: 2rem;

}



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

  .c-temp .l-inner {

    padding: 3.2rem;

  }

}

.c-temp .text {

  font-size: 2.4rem;

  font-weight: bold;

}

.c-temp .button {

  font-size: 1.4rem;

  font-weight: bold;

  display: block;

  width: 12rem;

  padding: 1.6rem 0 1.2rem;

  text-align: center;

  letter-spacing: 0.1em;

  color: #fff;

  border-radius: 100px;

  background-color: #000;

}

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

  .c-temp .button {

    font-size: 1.2rem;

    width: 9rem;

  }

}

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

  .c-temp .button {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .c-temp .button:hover {

    background-color: #CC0000;

  }

}



.c-footer .l-inner {

  padding-top: 0;

}

.c-footer .text {

  color: var(--color-gray);

}



.c-info {

  font-size: 1.4rem;

  display: inline-block;

  margin-top: 4rem;

  margin-bottom: 6.4rem;

}

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

  .c-info {

    display: block;

    margin-top: 0;

    margin-bottom: 6.4rem;

  }

}

.c-info li {

  position: relative;

  padding-left: 16px;

}

.c-info li::before {

  position: absolute;

  top: 0.6em;

  left: 0;

  display: inline-block;

  width: 8px;

  height: 2px;

  content: "";

  background-color: var(--color-gray);

}

.c-info li + li {

  margin-top: 0.8rem;

}



.c-title {

  font-size: 2.4rem;

  font-weight: bold;

  line-height: 1.6;

  display: inline-block;

  min-width: 32rem;

  margin-bottom: 6.4rem;

  vertical-align: top;

}

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

  .c-title {

    margin-bottom: 3.2rem;

  }

}

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

  .c-title {

    min-width: 100%;

  }

}

.c-title [class*=ico-] {

  font-size: 1.3rem;

  line-height: 1;

  display: block;

  width: 10rem;

  margin-bottom: 1.2rem;

  padding: 0.8rem 0 0.6rem;

  text-align: center;

  letter-spacing: 0.05em;

  border-radius: 100px;

  background-color: var(--color-gray);

}

.c-title .ico-advanced {

  color: #fff;

  background-color: #333;

}



/* slider */

[class*=swiper]:focus {

  outline: none;

}



.slide-media,

.thumb-media {

  position: relative;

  overflow: hidden;

}

.slide-media img,

.thumb-media img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;

}



/* 前へ / 次へボタン */

.swiper-button-prev, .swiper-button-next {

  display: grid;

  place-content: center;

  width: 6.4rem;

  height: 6.4rem;

  cursor: pointer;

  -webkit-transition: var(--transition);

  transition: var(--transition);

}

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

  .swiper-button-prev::before, .swiper-button-next::before {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .swiper-button-prev:hover::before, .swiper-button-next:hover::before {

    -webkit-transform: scale(1.2);

            transform: scale(1.2);

  }

}

.swiper-button-prev::before, .swiper-button-next::before {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  content: "";

  border-radius: 50%;

  -webkit-box-shadow: var(--box-shadow);

          box-shadow: var(--box-shadow);

}

.swiper-button-prev::after, .swiper-button-next::after {

  width: 1.2rem;

  height: 1.2rem;

  content: "";

  border: solid var(--color-gray);

  border-width: 3px 3px 0 0;

}

.swiper-button-prev::after {

  margin-left: 0.4rem;

  -webkit-transform: rotate(-135deg);

          transform: rotate(-135deg);

}

.swiper-button-next::after {

  margin-right: 0.4rem;

  -webkit-transform: rotate(45deg);

          transform: rotate(45deg);

}

.swiper-button-disabled {

  pointer-events: none;

  opacity: 0;

}



.card01 {

  /* コンテナ */

  /* ページネーション */

  /* 前へ / 次へボタン */

  /* スライド */

}

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

  .card01 .swiper {

    padding-top: 16px;

  }

}

.card01 .swiper-area {

  position: relative;

}

.card01 .swiper-pagination {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;

  gap: 1.2rem 0.8rem;

  -webkit-box-pack: center;

  -webkit-justify-content: center;

      -ms-flex-pack: center;

          justify-content: center;

  margin-top: 3.2rem;

  text-align: center;

}

.card01 .swiper-pagination-bullet {

  width: 1.6rem;

  height: 3px;

  cursor: pointer;

  -webkit-transition: var(--transition);

  transition: var(--transition);

  vertical-align: top;

  background-color: var(--color-gray);

}

.card01 .swiper-pagination-bullet-active {

  width: 4rem;

  background-color: var(--color-theme);

}

.card01 .swiper-button-prev, .card01 .swiper-button-next {

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  margin: auto;

}

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

  .card01 .swiper-button-prev::before, .card01 .swiper-button-next::before {

    background-color: rgba(0, 0, 0, 0.3);

    -webkit-box-shadow: var(--box-shadow-dark);

            box-shadow: var(--box-shadow-dark);

  }

}

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

  .card01 .swiper-button-prev::after, .card01 .swiper-button-next::after {

    border-color: #fff;

  }

}

.card01 .swiper-button-prev {

  right: calc(100% + 2.4rem);

}

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

  .card01 .swiper-button-prev {

    right: calc(100% - 3.2rem);

  }

}

.card01 .swiper-button-next {

  left: calc(100% + 2.4rem);

}

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

  .card01 .swiper-button-next {

    left: calc(100% - 3.2rem);

  }

}

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

  .card01 .slide {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .card01 .slide img {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .card01 .slide:hover {

    -webkit-transform: translateY(-16px);

            transform: translateY(-16px);

  }

  .card01 .slide:hover img {

    -webkit-transform: translateY(0);

            transform: translateY(0);

  }

}

.card01 .slide-media {

  padding-top: 62.5%;

  border-radius: 4px;

}

.card01 .slide-media img {

  height: calc(100% + 16px);

  -webkit-transform: translateY(-16px);

          transform: translateY(-16px);

}

.card01 .slide-content {

  padding: 3.2rem 0;

}

.card01 .slide-date {

  font-size: 1.2rem;

  line-height: 1;

  display: block;

  color: var(--color-theme);

}

.card01 .slide-title {

  line-height: 1.6;

  display: -webkit-box;

  overflow: hidden;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  height: 3.2em;

  margin-top: 1.6rem;

}



.card02 {

  /* コンテナ */

  overflow: hidden;

  /* コントローラー */

  /* ページネーション */

  /* 前へ / 次へボタン */

  /* スライド */

}

.card02 .swiper {

  overflow: visible;

}

.card02 .swiper-controller {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  gap: 1.6rem;

  -webkit-box-align: center;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: end;

  -webkit-justify-content: flex-end;

      -ms-flex-pack: end;

          justify-content: flex-end;

  margin-top: 3.2rem;

}

.card02 .swiper-pagination {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;

  gap: 1.2rem 0.8rem;

  -webkit-box-pack: start;

  -webkit-justify-content: flex-start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  margin: 0 auto 0 0;

  text-align: center;

}

.card02 .swiper-pagination-bullet {

  width: 1.6rem;

  height: 3px;

  cursor: pointer;

  -webkit-transition: var(--transition);

  transition: var(--transition);

  vertical-align: top;

  background-color: var(--color-gray);

}

.card02 .swiper-pagination-bullet-active {

  width: 4rem;

  background-color: var(--color-theme);

}

.card02 .swiper-button-prev, .card02 .swiper-button-next {

  position: relative;

  -webkit-flex-shrink: 0;

      -ms-flex-negative: 0;

          flex-shrink: 0;

  margin: 0;

}

.card02 .swiper-button-disabled {

  pointer-events: none;

  opacity: 0.5;

}

.card02 .swiper-button-disabled::before {

  -webkit-box-shadow: var(--box-shadow-inset);

          box-shadow: var(--box-shadow-inset);

}

.card02 .swiper-slide {

  width: -webkit-max-content;

  width: -moz-max-content;

  width: max-content;

}

.card02 .slide {

  overflow: hidden;

  width: 36rem;

  border-radius: 4px;

  -webkit-box-shadow: var(--box-shadow);

          box-shadow: var(--box-shadow);

}

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

  .card02 .slide {

    width: 24rem;

  }

}

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

  .card02 .slide {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .card02 .slide img {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .card02 .slide:hover {

    -webkit-transform: translateY(-16px);

            transform: translateY(-16px);

    -webkit-box-shadow: var(--box-shadow-hover);

            box-shadow: var(--box-shadow-hover);

  }

  .card02 .slide:hover img {

    -webkit-transform: translateY(0);

            transform: translateY(0);

  }

}

.card02 .slide-media {

  padding-top: 62.5%;

}

.card02 .slide-media img {

  height: calc(100% + 16px);

  -webkit-transform: translateY(-16px);

          transform: translateY(-16px);

}

.card02 .slide-content {

  padding: 3.2rem;

}

.card02 .slide-date {

  font-size: 1.2rem;

  line-height: 1;

  display: block;

  color: var(--color-theme);

}

.card02 .slide-title {

  line-height: 1.6;

  display: -webkit-box;

  overflow: hidden;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  height: 3.2em;

  margin-top: 1.6rem;

}



.card03 {

  /* コンテナ */

  overflow: hidden;

  /* 前へ / 次へボタン */

  /* スライド */

  /* スライド アクティブ時 */

}

.card03 .swiper {

  overflow: visible;

}

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

  .card03 .swiper {

    padding: 0 3.2rem;

  }

}

.card03 .swiper-button-prev, .card03 .swiper-button-next {

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  margin: auto;

}

.card03 .swiper-button-prev::before, .card03 .swiper-button-next::before {

  background-color: rgba(0, 0, 0, 0.3);

  -webkit-box-shadow: var(--box-shadow-dark);

          box-shadow: var(--box-shadow-dark);

}

.card03 .swiper-button-prev::after, .card03 .swiper-button-next::after {

  border-color: #fff;

}

.card03 .swiper-button-prev {

  right: calc(100% - 1.6rem);

}

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

  .card03 .swiper-button-prev {

    right: calc(100% - 5.2rem);

  }

}

.card03 .swiper-button-next {

  left: calc(100% - 1.6rem);

}

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

  .card03 .swiper-button-next {

    left: calc(100% - 5.2rem);

  }

}

.card03 .slide {

  overflow: hidden;

  -webkit-transition: var(--transition), opacity 1s;

  transition: var(--transition), opacity 1s;

  border-radius: 4px;

  -webkit-box-shadow: var(--box-shadow);

          box-shadow: var(--box-shadow);

}

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

  .card03 .slide img {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .card03 .slide:hover {

    -webkit-transform: translateY(-16px);

            transform: translateY(-16px);

    -webkit-box-shadow: var(--box-shadow-hover);

            box-shadow: var(--box-shadow-hover);

  }

  .card03 .slide:hover img {

    -webkit-transform: translateY(0);

            transform: translateY(0);

  }

}

.card03 .slide-media {

  padding-top: 62.5%;

}

.card03 .slide-media img {

  height: calc(100% + 16px);

  -webkit-transform: translateY(-16px);

          transform: translateY(-16px);

}

.card03 .slide-content {

  padding: 3.2rem;

}

.card03 .slide-date {

  font-size: 1.2rem;

  line-height: 1;

  display: block;

  color: var(--color-theme);

}

.card03 .slide-title {

  line-height: 1.6;

  display: -webkit-box;

  overflow: hidden;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  height: 3.2em;

  margin-top: 1.6rem;

}

.card03 .swiper-slide:not(.swiper-slide-visible) .slide {

  pointer-events: none;

  opacity: 0.3;

}



.card04 {

  /* コンテナ */

  overflow: hidden;

  /* 前へ / 次へボタン */

  /* スライダー非活性時 */

  /* スライダー非活性時 */

  /* スライド */

}

.card04 .swiper {

  overflow: visible;

}

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

  .card04 .swiper {

    padding: 0 3.2rem;

  }

}

.card04 .swiper-button-prev, .card04 .swiper-button-next {

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  margin: auto;

}

.card04 .swiper-button-prev::before, .card04 .swiper-button-next::before {

  background-color: rgba(0, 0, 0, 0.3);

  -webkit-box-shadow: var(--box-shadow-dark);

          box-shadow: var(--box-shadow-dark);

}

.card04 .swiper-button-prev::after, .card04 .swiper-button-next::after {

  border-color: #fff;

}

.card04 .swiper-button-prev {

  right: calc(100% - 1.6rem);

}

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

  .card04 .swiper-button-prev {

    right: calc(100% - 5.2rem);

  }

}

.card04 .swiper-button-next {

  left: calc(100% - 1.6rem);

}

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

  .card04 .swiper-button-next {

    left: calc(100% - 5.2rem);

  }

}

.card04 .swiper-a:not(.swiper-initialized) {

  padding: 0;

}

.card04 .swiper-a:not(.swiper-initialized) .swiper-button-prev,

.card04 .swiper-a:not(.swiper-initialized) .swiper-button-next {

  display: none;

}

.card04 .swiper-a:not(.swiper-initialized) .swiper-wrapper {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 32px;

}

.card04 .swiper-b:not(.swiper-initialized) {

  padding: 0;

}

.card04 .swiper-b:not(.swiper-initialized) .swiper-button-prev,

.card04 .swiper-b:not(.swiper-initialized) .swiper-button-next {

  display: none;

}

.card04 .swiper-b:not(.swiper-initialized) .swiper-wrapper {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 32px;

}

@media only screen and (max-width: 1024px) and (min-width: 600px) {

  .card04 .swiper-b:not(.swiper-initialized) .swiper-wrapper {

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;

  }

}

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

  .card04 .swiper-b:not(.swiper-initialized) .swiper-wrapper {

    grid-template-columns: repeat(1, 1fr);

  }

}

.card04 .slide {

  overflow: hidden;

  border-radius: 4px;

  -webkit-box-shadow: var(--box-shadow);

          box-shadow: var(--box-shadow);

}

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

  .card04 .slide {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .card04 .slide img {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .card04 .slide:hover {

    -webkit-transform: translateY(-16px);

            transform: translateY(-16px);

    -webkit-box-shadow: var(--box-shadow-hover);

            box-shadow: var(--box-shadow-hover);

  }

  .card04 .slide:hover img {

    -webkit-transform: translateY(0);

            transform: translateY(0);

  }

}

.card04 .slide-media {

  padding-top: 62.5%;

}

.card04 .slide-media img {

  height: calc(100% + 16px);

  -webkit-transform: translateY(-16px);

          transform: translateY(-16px);

}

.card04 .slide-content {

  padding: 3.2rem;

}

.card04 .slide-date {

  font-size: 1.2rem;

  line-height: 1;

  display: block;

  color: var(--color-theme);

}

.card04 .slide-title {

  line-height: 1.6;

  display: -webkit-box;

  overflow: hidden;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  height: 3.2em;

  margin-top: 1.6rem;

}



.card05 {

  /* コンテナ */

  overflow: hidden;

  /* スライド */

  /* スライド ホバー時 */

}

.card05 .swiper {

  overflow: visible;

}

.card05 .swiper-wrapper {

  -webkit-transition-timing-function: linear !important;

          transition-timing-function: linear !important;

}

.card05 .swiper-slide {

  width: -webkit-max-content;

  width: -moz-max-content;

  width: max-content;

}

.card05 .slide {

  overflow: hidden;

  width: 36rem;

  border-radius: 4px;

  -webkit-box-shadow: var(--box-shadow);

          box-shadow: var(--box-shadow);

}

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

  .card05 .slide {

    width: 24rem;

  }

}

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

  .card05 .slide {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .card05 .slide img {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

  .card05 .slide:hover {

    -webkit-transform: translateY(-16px);

            transform: translateY(-16px);

    -webkit-box-shadow: var(--box-shadow-hover);

            box-shadow: var(--box-shadow-hover);

  }

  .card05 .slide:hover img {

    -webkit-transform: translateY(0);

            transform: translateY(0);

  }

}

.card05 .slide-media {

  padding-top: 62.5%;

}

.card05 .slide-media img {

  height: calc(100% + 16px);

  -webkit-transform: translateY(-16px);

          transform: translateY(-16px);

}

.card05 .slide-content {

  padding: 3.2rem;

}

.card05 .slide-date {

  font-size: 1.2rem;

  line-height: 1;

  display: block;

  color: var(--color-theme);

}

.card05 .slide-title {

  line-height: 1.6;

  display: -webkit-box;

  overflow: hidden;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  height: 3.2em;

  margin-top: 1.6rem;

}

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

  .card05 .swiper:hover .slide:not(:hover) {

    opacity: 0.3;

  }

}



.gallery01 {

  /* コンテナ */

  overflow: hidden;

  /* フェードモード時 共通調整 */

  /* コントローラー */

  /* 前へ / 次へボタン */

  /* スクロールバー */

  /* スライド */

  /* サムネイル */

  /* サムネイル アクティブ時 */

}

.gallery01 .swiper {

  max-width: 720px;

  margin: auto;

}

.gallery01 .swiper-main {

  overflow: visible;

}

.gallery01 .swiper-thumb {

  padding-top: 8px;

}

.gallery01 .swiper-fade .swiper-slide {

  -webkit-transition-property: opacity, -webkit-transform !important;

  transition-property: opacity, -webkit-transform !important;

  transition-property: opacity, transform !important;

  transition-property: opacity, transform, -webkit-transform !important;

  pointer-events: none;

}

.gallery01 .swiper-fade .swiper-slide-active {

  pointer-events: auto;

}

.gallery01 .swiper-controller {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  padding-top: 62.5%;

}

.gallery01 .swiper-button-prev, .gallery01 .swiper-button-next {

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  margin: auto;

}

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

  .gallery01 .swiper-button-prev::before, .gallery01 .swiper-button-next::before {

    background-color: rgba(0, 0, 0, 0.3);

    -webkit-box-shadow: var(--box-shadow-dark);

            box-shadow: var(--box-shadow-dark);

  }

}

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

  .gallery01 .swiper-button-prev::after, .gallery01 .swiper-button-next::after {

    border-color: #fff;

  }

}

.gallery01 .swiper-button-prev {

  right: calc(100% + 3.2rem);

}

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

  .gallery01 .swiper-button-prev {

    right: calc(100% - 3.2rem);

  }

}

.gallery01 .swiper-button-next {

  left: calc(100% + 3.2rem);

}

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

  .gallery01 .swiper-button-next {

    left: calc(100% - 3.2rem);

  }

}

.gallery01 .swiper-scrollbar {

  position: relative;

  margin-top: 1.6rem;

}

.gallery01 .swiper-scrollbar::after {

  position: absolute;

  z-index: -1;

  top: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 4px;

  margin: auto;

  content: "";

  background-color: #eee;

}

.gallery01 .swiper-scrollbar-drag {

  height: 20px;

  padding: 8px 0;

  cursor: pointer;

  background-color: var(--color-theme);

  background-clip: content-box;

}

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

  .gallery01 .swiper-scrollbar-drag:hover {

    background-color: var(--color-theme-darken);

  }

}

.gallery01 .swiper-scrollbar-drag:active {

  background-color: var(--color-theme-darken);

}

.gallery01 .slide {

  display: block;

  overflow: hidden;

}

.gallery01 .slide-media {

  padding-top: 62.5%;

  border-radius: 4px;

}

.gallery01 .slide-media img {

  -o-object-fit: contain;

     object-fit: contain;

}

.gallery01 .slide-title {

  font-weight: bold;

  line-height: 1.6;

  padding: 3.2rem 0;

}

.gallery01 .thumb-media {

  padding-top: 100%;

  -webkit-transition: var(--transition);

  transition: var(--transition);

  border-radius: 4px;

}

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

  .gallery01 .thumb-media:hover {

    -webkit-transform: translateY(-8px);

            transform: translateY(-8px);

  }

  .gallery01 .thumb-media:hover img {

    -webkit-transform: translateY(0);

            transform: translateY(0);

  }

}

.gallery01 .thumb-media img {

  height: calc(100% + 8px);

  -webkit-transition: var(--transition);

  transition: var(--transition);

  -webkit-transform: translateY(-8px);

          transform: translateY(-8px);

}

.gallery01 .swiper-slide-thumb-active {

  -webkit-transition: var(--transition);

  transition: var(--transition);

  opacity: 0.3;

}

.gallery01 .swiper-slide-thumb-active .thumb-media {

  -webkit-transform: translateY(-8px);

          transform: translateY(-8px);

}

.gallery01 .swiper-slide-thumb-active .thumb-media img {

  -webkit-transform: translateY(0);

          transform: translateY(0);

}



.gallery02 {

  /* コンテナ */

  overflow: hidden;

  /* フェードモード時 共通調整 */

  /* コントローラー */

  /* 前へ / 次へボタン */

  /* スライド */

  /* サムネイル */

}

.gallery02 .swiper,

.gallery02 .thumb-wrapper {

  max-width: 720px;

  margin: auto;

}

.gallery02 .swiper {

  overflow: visible;

}

.gallery02 .swiper-fade .swiper-slide {

  -webkit-transition-property: opacity, -webkit-transform !important;

  transition-property: opacity, -webkit-transform !important;

  transition-property: opacity, transform !important;

  transition-property: opacity, transform, -webkit-transform !important;

  pointer-events: none;

}

.gallery02 .swiper-fade .swiper-slide-active {

  pointer-events: auto;

}

.gallery02 .swiper-controller {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  padding-top: 62.5%;

}

.gallery02 .swiper-button-prev, .gallery02 .swiper-button-next {

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  margin: auto;

}

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

  .gallery02 .swiper-button-prev::before, .gallery02 .swiper-button-next::before {

    background-color: rgba(0, 0, 0, 0.3);

    -webkit-box-shadow: var(--box-shadow-dark);

            box-shadow: var(--box-shadow-dark);

  }

}

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

  .gallery02 .swiper-button-prev::after, .gallery02 .swiper-button-next::after {

    border-color: #fff;

  }

}

.gallery02 .swiper-button-prev {

  right: calc(100% + 3.2rem);

}

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

  .gallery02 .swiper-button-prev {

    right: calc(100% - 3.2rem);

  }

}

.gallery02 .swiper-button-next {

  left: calc(100% + 3.2rem);

}

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

  .gallery02 .swiper-button-next {

    left: calc(100% - 3.2rem);

  }

}

.gallery02 .slide {

  display: block;

  overflow: hidden;

}

.gallery02 .slide-media {

  display: block;

  padding-top: 62.5%;

  border-radius: 4px;

}

.gallery02 .slide-media img {

  -o-object-fit: contain;

     object-fit: contain;

}

.gallery02 .slide-title {

  font-weight: bold;

  line-height: 1.6;

  padding: 3.2rem 0;

}

.gallery02 .thumb-wrapper {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  gap: 8px;

}

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

  .gallery02 .thumb-wrapper {

    grid-template-columns: repeat(5, 1fr);

  }

}

.gallery02 .thumb-media {

  padding-top: 100%;

  cursor: pointer;

  -webkit-transition: var(--transition);

  transition: var(--transition);

  border-radius: 4px;

}

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

  .gallery02 .thumb-media:hover {

    -webkit-transform: scale(0.9);

            transform: scale(0.9);

  }

  .gallery02 .thumb-media:hover img {

    -webkit-transform: scale(1.1);

            transform: scale(1.1);

  }

}

.gallery02 .thumb-media img {

  -webkit-transition: var(--transition);

  transition: var(--transition);

}

.gallery02 .thumb-media-active {

  -webkit-transform: scale(0.9);

          transform: scale(0.9);

  opacity: 0.3;

}

.gallery02 .thumb-media-active img {

  -webkit-transform: scale(1.1);

          transform: scale(1.1);

}



.gallery03 {

  margin-bottom: 16rem;

  /* コンテナ */

  /* スライド */

}

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

  .gallery03 {

    margin-bottom: 8rem;

  }

}

.gallery03 .l-inner {

  padding-bottom: 0;

}

.gallery03 .swiper-wrapper {

  -webkit-transition-timing-function: linear !important;

          transition-timing-function: linear !important;

}

.gallery03 .swiper-slide {

  width: -webkit-max-content;

  width: -moz-max-content;

  width: max-content;

}

.gallery03 .slide {

  width: var(--slide-width);

  -webkit-transition: var(--transition);

  transition: var(--transition);

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;

  --slide-width: 200px;

}

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

  .gallery03 .slide {

    --slide-width: 120px;

  }

}

.gallery03 .slide-media {

  height: var(--slide-width);

}

.gallery03 .slide-content {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  padding: 3.2rem 1.6rem 1.6rem;

  -webkit-transition: var(--transition);

  transition: var(--transition);

  opacity: 0;

  color: #fff;

  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.3)));

  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%);

}

.gallery03 .slide-title {

  font-size: 1.4rem;

  line-height: 1.4;

  display: -webkit-box;

  overflow: hidden;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}

.gallery03 .slide:hover {

  width: calc(var(--slide-width) * 1.5);

}

.gallery03 .slide:hover .slide-content {

  opacity: 1;

}



.flow01 {

  /* コンテナ */

  overflow: hidden;

  /* ページネーション（親） */

  /* ページネーション（子） */

  /* 前へ / 次へボタン（親） */

  /* スライド（親） */

  /* スライド（子） */

}

.flow01 .swiper-main {

  overflow: visible;

}

.flow01 .swiper-main,

.flow01 .swiper-pagination-main {

  max-width: 600px;

  margin: auto;

}

@media only screen and (max-width: 1024px) and (min-width: 600px) {

  .flow01 .swiper-main,

.flow01 .swiper-pagination-main {

    max-width: calc(100% - 6.4rem);

  }

}

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

  .flow01 .swiper-main,

.flow01 .swiper-pagination-main {

    max-width: calc(100% - 3.2rem);

  }

}

.flow01 .swiper-pagination-main {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  margin-bottom: 6.4rem;

}

.flow01 .swiper-pagination-main .swiper-pagination-bullet {

  font-size: 3.2rem;

  font-weight: bold;

  line-height: 1;

  position: relative;

  -webkit-box-flex: 1;

  -webkit-flex: 1;

      -ms-flex: 1;

          flex: 1;

  padding-bottom: 2.4rem;

  cursor: pointer;

  -webkit-transition: var(--transition);

  transition: var(--transition);

  text-align: center;

  color: var(--color-gray);

}

.flow01 .swiper-pagination-main .swiper-pagination-bullet::before, .flow01 .swiper-pagination-main .swiper-pagination-bullet::after {

  position: absolute;

  content: "";

  -webkit-transition: var(--transition);

  transition: var(--transition);

  background-color: var(--color-theme);

}

.flow01 .swiper-pagination-main .swiper-pagination-bullet::before {

  z-index: 1;

  right: 0;

  bottom: -6px;

  left: 0;

  width: 1.6rem;

  height: 1.6rem;

  margin: auto;

  border-radius: 100px;

  -webkit-box-shadow: 0 0 0 5px var(--color-base);

          box-shadow: 0 0 0 5px var(--color-base);

}

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

  .flow01 .swiper-pagination-main .swiper-pagination-bullet::before {

    bottom: -5px;

  }

}

.flow01 .swiper-pagination-main .swiper-pagination-bullet::after {

  right: 50%;

  bottom: 0;

  width: 100%;

  height: 3px;

}

.flow01 .swiper-pagination-main .swiper-pagination-bullet:first-child::after {

  display: none;

}

.flow01 .swiper-pagination-main .swiper-pagination-bullet .step {

  font-size: 1.6rem;

}

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

  .flow01 .swiper-pagination-main .swiper-pagination-bullet .step {

    font-size: 1.4rem;

    display: block;

    margin-bottom: 0.5em;

    text-indent: 0.5em;

  }

}

.flow01 .swiper-pagination-main .swiper-pagination-bullet-active {

  color: var(--color-theme);

}

.flow01 .swiper-pagination-main .swiper-pagination-bullet-active::before {

  -webkit-box-shadow: 0 0 0 4px var(--color-base), 0 0 0 7px var(--color-theme);

          box-shadow: 0 0 0 4px var(--color-base), 0 0 0 7px var(--color-theme);

}

.flow01 .swiper-pagination-main .swiper-pagination-bullet-active ~ *::before, .flow01 .swiper-pagination-main .swiper-pagination-bullet-active ~ *::after {

  background-color: var(--color-gray);

}

.flow01 .swiper-pagination-sub {

  font-size: 0;

  text-align: center;

}

.flow01 .swiper-pagination-sub .swiper-pagination-bullet {

  display: inline-block;

  width: 8px;

  height: 8px;

  cursor: pointer;

  -webkit-transition: var(--transition);

  transition: var(--transition);

  vertical-align: top;

  background-color: var(--color-gray);

}

.flow01 .swiper-pagination-sub .swiper-pagination-bullet:not(:first-child) {

  margin-left: 8px;

}

.flow01 .swiper-pagination-sub .swiper-pagination-bullet-active {

  background-color: var(--color-theme);

}

.flow01 .swiper-button-prev, .flow01 .swiper-button-next {

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  margin: auto;

}

.flow01 .swiper-button-prev::before, .flow01 .swiper-button-next::before {

  display: none;

}

.flow01 .swiper-button-prev::after, .flow01 .swiper-button-next::after {

  position: relative;

  width: 1.6rem;

  height: 1.6rem;

  content: "";

  border: solid var(--color-gray);

  border-width: 3px 3px 0 0;

}

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

  .flow01 .swiper-button-prev::after, .flow01 .swiper-button-next::after {

    width: 3.2rem;

    height: 3.2rem;

  }

}

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

  .flow01 .swiper-button-prev::after, .flow01 .swiper-button-next::after {

    -webkit-transition: var(--transition);

    transition: var(--transition);

  }

}

.flow01 .swiper-button-prev {

  right: calc(100% + 0.6rem);

}

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

  .flow01 .swiper-button-prev {

    right: calc(100% - 4rem);

  }

}

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

  .flow01 .swiper-button-prev:hover::after {

    -webkit-transform: translateX(-0.8rem) rotate(-135deg);

            transform: translateX(-0.8rem) rotate(-135deg);

  }

}

.flow01 .swiper-button-next {

  left: calc(100% + 0.6rem);

}

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

  .flow01 .swiper-button-next {

    left: calc(100% - 4rem);

  }

}

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

  .flow01 .swiper-button-next:hover::after {

    -webkit-transform: translateX(0.8rem) rotate(45deg);

            transform: translateX(0.8rem) rotate(45deg);

  }

}

.flow01 .swiper-slide {

  height: auto;

}

.flow01 .mainslide {

  width: 100%;

  height: 100%;

  padding: 6.4rem 0 4.8rem;

  text-align: center;

  border-radius: 4px;

  -webkit-box-shadow: var(--box-shadow);

          box-shadow: var(--box-shadow);

}

.flow01 .mainslide-title {

  font-size: 2.4rem;

  line-height: 1.6;

  display: inline-block;

  border-bottom: 3px solid currentColor;

}

.flow01 .subslide {

  padding: 4.8rem;

}

.flow01 .subslide-media {

  margin-bottom: 3.2rem;

}

.flow01 .subslide-media img {

  width: 12rem;

  height: 12rem;

}



.mv01 {

  margin-bottom: 16rem;

}

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

  .mv01 {

    margin-bottom: 8rem;

  }

}

.mv01 .l-inner {

  padding-bottom: 0;

}

.mv01 .swiper-fade .swiper-slide {

  -webkit-transition-property: opacity, -webkit-transform !important;

  transition-property: opacity, -webkit-transform !important;

  transition-property: opacity, transform !important;

  transition-property: opacity, transform, -webkit-transform !important;

  pointer-events: none;

}

.mv01 .swiper-fade .swiper-slide-active {

  pointer-events: auto;

}

.mv01 .swiper-pagination {

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  left: 3.2rem;

  height: -webkit-max-content;

  height: -moz-max-content;

  height: max-content;

  margin: auto;

}

.mv01 .swiper-pagination-bullet {

  display: block;

  width: 3px;

  height: 4rem;

  cursor: pointer;

  -webkit-transition: var(--transition);

  transition: var(--transition);

  background-color: rgba(255, 255, 255, 0.4);

}

.mv01 .swiper-pagination-bullet:not(:first-child) {

  margin-top: 0.8rem;

}

.mv01 .swiper-pagination-bullet-active {

  background-color: var(--color-theme);

}

.mv01 .slide-media {

  height: 800px;

}

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

  .mv01 .slide-media {

    height: max(70vh, 70vw);

  }

}

.mv01 .slide-media img {

  -webkit-transition: 7s 1s ease-out;

  transition: 7s 1s ease-out;

}

.mv01 .slide-title {

  font-size: 4rem;

  font-weight: normal;

  line-height: 1.6;

  position: absolute;

  right: 8rem;

  bottom: 15%;

  margin-left: 16rem;

  text-align: right;

  color: #fff;

}

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

  .mv01 .slide-title {

    font-size: 2.8rem;

    right: 4rem;

    margin-left: 6rem;

  }

}

.mv01 .swiper-slide[class*=-active] .slide-media img {

  -webkit-transition-delay: 0s;

          transition-delay: 0s;

  -webkit-transform: scale(1.05);

          transform: scale(1.05);

}

.mv01 .swiper-slide[class*=-active] .slide-title {

  -webkit-animation: mv01-fadeIn 2s 0.5s var(--easing) both;

          animation: mv01-fadeIn 2s 0.5s var(--easing) both;

}



@-webkit-keyframes mv01-fadeIn {

  0% {

    -webkit-transform: scale(0.5);

            transform: scale(0.5);

    opacity: 0;

    -webkit-filter: blur(300px);

            filter: blur(300px);

  }

  100% {

    -webkit-transform: scale(1);

            transform: scale(1);

    opacity: 1;

    -webkit-filter: blur(0);

            filter: blur(0);

  }

}



@keyframes mv01-fadeIn {

  0% {

    -webkit-transform: scale(0.5);

            transform: scale(0.5);

    opacity: 0;

    -webkit-filter: blur(300px);

            filter: blur(300px);

  }

  100% {

    -webkit-transform: scale(1);

            transform: scale(1);

    opacity: 1;

    -webkit-filter: blur(0);

            filter: blur(0);

  }

}



.mv02 {

  margin-bottom: 16rem;

}

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

  .mv02 {

    margin-bottom: 8rem;

  }

}

.mv02 .l-inner {

  padding-bottom: 0;

}

.mv02 .swiper-pagination {

  position: absolute;

  z-index: 1;

  top: 0;

  bottom: 0;

  left: 0;

  height: -webkit-max-content;

  height: -moz-max-content;

  height: max-content;

  margin: auto;

}

.mv02 .swiper-pagination-bullet {

  display: block;

  width: 1.6rem;

  height: 2px;

  cursor: pointer;

  -webkit-transition: var(--transition);

  transition: var(--transition);

  background-color: #fff;

}

.mv02 .swiper-pagination-bullet:not(:first-child) {

  margin-top: 1.6rem;

}

.mv02 .swiper-pagination-bullet-active {

  width: 4rem;

  background-color: var(--color-theme);

}

.mv02 .swiper-fade .swiper-slide {

  -webkit-transition-property: opacity, -webkit-transform !important;

  transition-property: opacity, -webkit-transform !important;

  transition-property: opacity, transform !important;

  transition-property: opacity, transform, -webkit-transform !important;

  pointer-events: none;

}

.mv02 .swiper-fade .swiper-slide-active {

  pointer-events: auto;

}

.mv02 .slide {

  display: grid;

  place-content: center;

  height: 800px;

  padding: 0 8rem;

  text-align: center;

}

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

  .mv02 .slide {

    height: max(70vh, 70vw);

  }

}

.mv02 .slide-media {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.mv02 .slide-media img {

  -webkit-transition: 7s 1s linear;

  transition: 7s 1s linear;

  -webkit-transform: translateX(-1.5%) scale(1.1);

          transform: translateX(-1.5%) scale(1.1);

}

.mv02 .slide-title, .mv02 .slide-text, .mv02 .slide-link {

  -webkit-animation: 2s var(--easing) both;

          animation: 2s var(--easing) both;

  opacity: 0;

}

.mv02 .slide-title {

  font-size: 6rem;

  line-height: 1.1;

  color: var(--color-theme);

}

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

  .mv02 .slide-title {

    font-size: 4rem;

  }

}

.mv02 .slide-text {

  font-size: 1.8rem;

  margin: 4rem 0;

  -webkit-animation-delay: 0.2s;

          animation-delay: 0.2s;

  color: #fff;

}

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

  .mv02 .slide-text {

    font-size: 1.6rem;

    margin: 3.2rem 0;

  }

}

.mv02 .slide-link {

  -webkit-animation-delay: 0.4s;

          animation-delay: 0.4s;

}

.mv02 .slide-button {

  font-size: 1.2rem;

  font-weight: bold;

  display: inline-block;

  color: var(--color-theme);

}

.mv02 .slide-button::before {

  display: inline-block;

  width: 6rem;

  height: 1px;

  margin: -2px 1.6rem 0 0;

  content: "";

  vertical-align: middle;

  background-color: currentColor;

}

.mv02 .swiper-slide[class*=-active] .slide-media img {

  -webkit-transition-delay: 0s;

          transition-delay: 0s;

  -webkit-transform: translateX(1.5%) scale(1.05);

          transform: translateX(1.5%) scale(1.05);

}

.mv02 .swiper-slide.anm-started .slide-title,

.mv02 .swiper-slide.anm-started .slide-text,

.mv02 .swiper-slide.anm-started .slide-link {

  -webkit-animation-name: mv02-fadeIn;

          animation-name: mv02-fadeIn;

}

.mv02 .swiper-slide.anm-finished .slide-title,

.mv02 .swiper-slide.anm-finished .slide-text,

.mv02 .swiper-slide.anm-finished .slide-link {

  -webkit-animation-name: mv02-fadeOut;

          animation-name: mv02-fadeOut;

}



@-webkit-keyframes mv02-fadeIn {

  0% {

    -webkit-transform: translateY(6rem);

            transform: translateY(6rem);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    opacity: 1;

  }

}



@keyframes mv02-fadeIn {

  0% {

    -webkit-transform: translateY(6rem);

            transform: translateY(6rem);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    opacity: 1;

  }

}

@-webkit-keyframes mv02-fadeOut {

  0% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    opacity: 1;

  }

  100% {

    -webkit-transform: translateY(-6rem);

            transform: translateY(-6rem);

    opacity: 0;

  }

}

@keyframes mv02-fadeOut {

  0% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    opacity: 1;

  }

  100% {

    -webkit-transform: translateY(-6rem);

            transform: translateY(-6rem);

    opacity: 0;

  }

}

.mv03 {

  margin-bottom: 10rem;

}

.mv03 .l-inner {

  padding-bottom: 0;

}

.mv03 .swiper-area {

  position: relative;

}

.mv03 .swiper-main {

  height: 800px;

  margin-right: min(40rem, 25vw);

  border-radius: 0 5rem 5rem 0;

}

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

  .mv03 .swiper-main {

    height: max(70vh, 70vw);

  }

}

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

  .mv03 .swiper-main {

    margin-right: 4rem;

  }

}

.mv03 .swiper-thumb {

  position: absolute;

  top: 10rem;

  right: 0;

  bottom: 10rem;

  width: min(48rem, 30vw);

}

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

  .mv03 .swiper-thumb {

    top: auto;

    bottom: 0;

    border-radius: 0

  }

}

.mv03 .slide {

  display: grid;

  height: 100%;

  padding: 0 4rem;

  text-align: center;

  color: #000;

}

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

  .mv03 .slide {

    place-content: center;

  }

}

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

  .mv03 .slide {

    padding-top: 20%;

  }

}

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

  .mv03 .slide img {

    -webkit-transition: 2s var(--easing);

    transition: 2s var(--easing);

  }

  .mv03 .slide:hover img {

    -webkit-transform: scale(1.05);

            transform: scale(1.05);

    opacity: 0.9;

  }

}

.mv03 .slide-media {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: #fff;

}

.mv03 .slide-content {

  -webkit-transition: 3s 0.5s var(--easing);

  transition: 3s 0.5s var(--easing);

  -webkit-transform: translateY(-6rem);

          transform: translateY(-6rem);

  opacity: 0;

}

.mv03 .slide-title {

  font-size: 5rem;

  line-height: 1.1;

  /*color: #6C787B;*/

  color: #000;



}

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

  .mv03 .slide-title {

    font-size: 3.2rem;

  }

}

.mv03 .slide-text {

  font-size: 1.8rem;

  margin: 4rem 0 6rem;

}

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

  .mv03 .slide-text {

    font-size: 1.6rem;

    margin: 2.4rem 0 3.2rem;

  }

}

.mv03 .slide-date {

  font-size: 2rem;

  font-weight: bold;

  display: block;

  padding: 1rem 2rem 0.8rem;

  letter-spacing: 0.1em;

  border: solid #000;;

  border-width: 2px 0;

}

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

  .mv03 .slide-date {

    font-size: 1.8rem;

  }

}

.mv03 .swiper-slide[class*=-active] .slide-content {

  -webkit-transform: translateY(0);

          transform: translateY(0);

  opacity: 1;

}

.mv03 .thumb {

  font-weight: bold;

  position: relative;

  display: grid;

  overflow: hidden;

  -webkit-align-content: center;

  -ms-flex-line-pack: center;

  align-content: center;

  height: 100%;

  padding: 0 4rem;

  cursor: pointer;

  -webkit-transition: 2s var(--easing);

  transition: 2s var(--easing);

  color: #fff;

}

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

  .mv03 .thumb {

    border-radius: 4px 0 0 4px;

  }

}

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

  .mv03 .thumb {

    padding: 0 2.4rem;

  }

}

.mv03 .thumb::before {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  width: 6px;

  content: "";

  -webkit-transition: 1s var(--easing);

  transition: 1s var(--easing);

  -webkit-transform: scaleY(0);

  transform: scaleY(0);

  background-color: #CC0000;

}



.mv03 .thumb-media {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: #fff;

}

.mv03 .thumb-media img {

  -webkit-transition: 2s var(--easing);

  transition: 2s var(--easing);

}

.mv03 .thumb-title {

  font-size: 2rem;

  line-height: 1.5;

  position: relative;

  z-index: 1;

}



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

  .mv03 .thumb-title {

    font-size: 1.4rem;

  }

}

.mv03 .thumb-date {

  font-size: 1.2rem;

  margin-top: 0.3em;

  letter-spacing: 0.1em;

}

@media only screen and (max-width: 1024px) and (min-width: 600px) {

  .mv03 .thumb-date {

    font-size: 1rem;

  }

}

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

  .mv03 .thumb-date {

    display: none;

  }

}

.mv03 .swiper-slide-thumb-active .thumb {

  color: #CC0000;

}

.mv03 .swiper-slide-thumb-active .thumb::before {

  -webkit-transform: scaleY(1);

          transform: scaleY(1);

}

.mv03 .swiper-slide-thumb-active .thumb-media img {

  -webkit-transform: scale(1.1);

          transform: scale(1.1);

  opacity: 0.3;

  -webkit-filter: blur(3px);

          filter: blur(3px);

  mix-blend-mode: hard-light;

}



.mv04 {

  margin-bottom: 1rem;

}

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

  .mv04 {

    margin-bottom: 8rem;

  }

}

.mv04 .l-inner {

  padding-bottom: 0;

}

.mv04 .swiper {

  background-color: #333;

}

.mv04 .swiper-fade .swiper-slide {

  -webkit-transition-property: opacity, -webkit-transform !important;

  transition-property: opacity, -webkit-transform !important;

  transition-property: opacity, transform !important;

  transition-property: opacity, transform, -webkit-transform !important;

  pointer-events: none;

}

.mv04 .swiper-fade .swiper-slide-active {

  pointer-events: auto;

}

.mv04 .progressbar {

  position: relative;

  width: 100%;

  height: 4px;

  background-color: var(--color-gray);

}

.mv04 .progressbar-fill {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  -webkit-transform: scaleX(0);

          transform: scaleX(0);

  -webkit-transform-origin: left top;

          transform-origin: left top;

  background-color: var(--color-theme);

}

.mv04 .swiper-slide {

  height: auto;

}

.mv04 .slide-media {

  height: 800px;

}

@media only screen and (max-width: 1024px) and (min-width: 600px) {

  .mv04 .slide-media {

    height: max(60vh, 60vw);

  }

}

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

  .mv04 .slide-media {

    height: max(45vh, 45vw);

  }

}

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

  .mv04 .slide-media::after {

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    height: 40%;

    content: "";

    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.5)));

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%);

    mix-blend-mode: soft-light;

  }

}

.mv04 .slide-media img {

  -webkit-transition-delay: 1s;

          transition-delay: 1s;

  -webkit-transition-timing-function: linear;

          transition-timing-function: linear;

  -webkit-transform: scale(1.05);

          transform: scale(1.05);

}

.mv04 .slide-content {

  color: #fff;

}

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

  .mv04 .slide-content {

    position: absolute;

    bottom: 0;

    left: 0;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: end;

    -webkit-align-items: flex-end;

        -ms-flex-align: end;

            align-items: flex-end;

  }

}

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

  .mv04 .slide-content {

    padding: 6.4rem;

  }

}

@media only screen and (max-width: 1024px) and (min-width: 600px) {

  .mv04 .slide-content {

    padding: 3.2rem;

  }

}

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

  .mv04 .slide-content {

    position: relative;

  }

}

.mv04 .slide-title {

  line-height: 1.6;

  letter-spacing: 0.05em;

}

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

  .mv04 .slide-title {

    font-weight: normal;

    padding: 3.2rem 4rem;

  }

}

.mv04 .slide-fraction {

  font-weight: bold;

  position: relative;

  text-align: center;

  --size: 96px;

}

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

  .mv04 .slide-fraction {

    --size: 64px;

  }

}

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

  .mv04 .slide-fraction {

    margin-right: 6.4rem;

  }

}

@media only screen and (max-width: 1024px) and (min-width: 600px) {

  .mv04 .slide-fraction {

    margin-right: 3.2rem;

  }

}

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

  .mv04 .slide-fraction {

    position: absolute;

    bottom: calc(100% + 1rem);

    left: 4rem;

  }

}

.mv04 .slide-fraction .circle {

  display: block;

  width: var(--size);

  height: var(--size);

  -webkit-transform: rotate(90deg);

          transform: rotate(90deg);

}

.mv04 .slide-fraction .circle svg {

  width: 100%;

  height: 100%;

  fill: none;

}

.mv04 .slide-fraction .circle-01 {

  stroke: rgba(255, 255, 255, 0.3);

  stroke-width: 1px;

}

.mv04 .slide-fraction .circle-02 {

  stroke: var(--color-theme);

  stroke-width: 2px;

  stroke-dasharray: 201.056px;

  stroke-dashoffset: 201.056px;

}

.mv04 .slide-fraction .current {

  font-size: 2.4rem;

  line-height: var(--size);

  position: absolute;

  top: 0.05em;

  left: 0;

  width: var(--size);

  text-align: center;

  color: var(--color-theme);

}

.mv04 .slide-fraction .total {

  font-size: 1.6rem;

}

.mv04 .slide-fraction .total::before {

  position: relative;

  display: block;

  width: 3px;

  height: 1em;

  margin: -3px auto 0.5em;

  content: "";

  background-color: var(--color-theme);

}

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

  .mv04 .slide-fraction .total::before {

    width: 2px;

    margin-top: -2px;

  }

}

.mv04 .swiper-slide[class*=-active] .slide-media img {

  -webkit-transition-delay: 0s;

          transition-delay: 0s;

  -webkit-transform: scale(1);

          transform: scale(1);

}

.mv04 .swiper-slide[class*=-active] .slide-fraction .circle-02 {

  -webkit-animation: mv04-circle linear both;

          animation: mv04-circle linear both;

}



@-webkit-keyframes mv04-circle {

  100% {

    stroke-dashoffset: 0;

  }

}



@keyframes mv04-circle {

  100% {

    stroke-dashoffset: 0;

  }

}

.mv05 {

  margin-bottom: 16rem;

  /* スライド */

  /* 前後のスライド */

  /* スライド外コンテンツ */

  /* ページネーション（分数） */

  /* マーカーアニメーション */

}

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

  .mv05 {

    margin-bottom: 8rem;

  }

}

.mv05 .l-inner {

  padding-bottom: 0;

}

.mv05 .slide-media {

  height: 800px;

}

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

  .mv05 .slide-media {

    height: max(70vh, 70vw);

  }

}

.mv05 .slide-media img {

  -webkit-transition: 3s;

  transition: 3s;

}

.mv05 .slide-media.clip {

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  width: 100%;

  -webkit-filter: contrast(1.1);

          filter: contrast(1.1);

  --stroke-width: 1.2rem;

  --out: 2.4rem;

  --in: calc(var(--out) + var(--stroke-width));

  -webkit-clip-path: polygon(var(--out) var(--out), calc(100% - var(--out)) var(--out), calc(100% - var(--out)) calc(100% - var(--out)), var(--out) calc(100% - var(--out)), var(--out) var(--in), var(--in) var(--in), var(--in) calc(100% - var(--in)), calc(100% - var(--in)) calc(100% - var(--in)), calc(100% - var(--in)) var(--in), var(--out) var(--in));

          clip-path: polygon(var(--out) var(--out), calc(100% - var(--out)) var(--out), calc(100% - var(--out)) calc(100% - var(--out)), var(--out) calc(100% - var(--out)), var(--out) var(--in), var(--in) var(--in), var(--in) calc(100% - var(--in)), calc(100% - var(--in)) calc(100% - var(--in)), calc(100% - var(--in)) var(--in), var(--out) var(--in));

}

.mv05 .swiper-slide {

  overflow: hidden;

}

.mv05 .swiper-slide[class*=-active] .slide-media.clip img {

  -webkit-transform: scale(1.2);

          transform: scale(1.2);

}

.mv05 .swiper-slide[class*=-prev] .slide-media img {

  -webkit-transform: translateX(80vw);

          transform: translateX(80vw);

}

.mv05 .swiper-slide[class*=-next] .slide-media img {

  -webkit-transform: translateX(-80vw);

          transform: translateX(-80vw);

}

.mv05 .content,

.mv05 .fraction {

  position: absolute;

  z-index: 2;

  top: 0;

  bottom: 0;

  height: -webkit-max-content;

  height: -moz-max-content;

  height: max-content;

  margin: auto;

}

.mv05 .content {

  pointer-events: none;

}

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

  .mv05 .content {

    left: 24rem;

  }

}

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

  .mv05 .content {

    top: calc(20% + 6rem);

    right: 6rem;

    bottom: auto;

    left: 6rem;

  }

}

.mv05 .content-title {

  font-size: 6rem;

  line-height: 1.1;

  color: var(--color-theme);

}

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

  .mv05 .content-title {

    font-size: 3.2rem;

  }

}

.mv05 .content-text {

  font-size: 1.8rem;

  margin: 4rem 0;

  color: #fff;

}

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

  .mv05 .content-text {

    font-size: 1.6rem;

    margin: 2.4rem 0;

  }

}

.mv05 .content-button {

  font-size: 1.2rem;

  font-weight: bold;

  display: inline-block;

  color: var(--color-theme);

}

.mv05 .content-button::before {

  display: inline-block;

  width: 6rem;

  height: 1px;

  margin: -2px 1.6rem 0 0;

  content: "";

  vertical-align: middle;

  background-color: currentColor;

}

.mv05 .content.anm-started .content-button {

  pointer-events: auto;

}

.mv05 .fraction {

  font-weight: bold;

  line-height: 1.2;

  color: #fff;

}

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

  .mv05 .fraction {

    left: 8rem;

  }

}

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

  .mv05 .fraction {

    font-size: 1.2rem;

    top: 20%;

    bottom: auto;

    left: 6rem;

  }

}

.mv05 .fraction .current {

  font-size: 3.2rem;

  display: inline-block;

  overflow: hidden;

  width: 6rem;

}

.mv05 .fraction .current .num {

  display: inline-block;

}

.mv05 .fraction .current .num.anm-started {

  -webkit-animation: mv05-fraction 1s var(--easing);

          animation: mv05-fraction 1s var(--easing);

}

.mv05 .fraction .total {

  vertical-align: 0.5em;

}

.mv05 .fraction .total::before {

  content: " / ";

}

.mv05 .marker {

  position: relative;

  display: inline-block;

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

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

}

.mv05 .marker::after {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  content: "";

  background-color: #fff;

}

.mv05 .anm-started .marker {

  -webkit-animation: mv05-marker 1s 0.5s both;

          animation: mv05-marker 1s 0.5s both;

}

.mv05 .anm-started .marker::after {

  -webkit-animation: mv05-markerBg 1s 0.5s both;

          animation: mv05-markerBg 1s 0.5s both;

}

.mv05 .anm-started .content-text .marker,

.mv05 .anm-started .content-text .marker::after {

  -webkit-animation-delay: 0.6s;

          animation-delay: 0.6s;

}

.mv05 .anm-started .content-link .marker,

.mv05 .anm-started .content-link .marker::after {

  -webkit-animation-delay: 0.7s;

          animation-delay: 0.7s;

}

.mv05 .anm-finished .marker {

  -webkit-animation: mv05-markerHide 0.5s both;

          animation: mv05-markerHide 0.5s both;

}

.mv05 .anm-finished .marker::after {

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

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

}



@-webkit-keyframes mv05-marker {

  60%, 100% {

    -webkit-clip-path: inset(0);

            clip-path: inset(0);

  }

}



@keyframes mv05-marker {

  60%, 100% {

    -webkit-clip-path: inset(0);

            clip-path: inset(0);

  }

}

@-webkit-keyframes mv05-markerBg {

  60% {

    -webkit-clip-path: inset(0);

            clip-path: inset(0);

  }

  100% {

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

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

  }

}

@keyframes mv05-markerBg {

  60% {

    -webkit-clip-path: inset(0);

            clip-path: inset(0);

  }

  100% {

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

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

  }

}

@-webkit-keyframes mv05-markerHide {

  0% {

    -webkit-clip-path: inset(0);

            clip-path: inset(0);

  }

  100% {

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

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

  }

}

@keyframes mv05-markerHide {

  0% {

    -webkit-clip-path: inset(0);

            clip-path: inset(0);

  }

  100% {

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

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

  }

}

@-webkit-keyframes mv05-fraction {

  0%, 100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    opacity: 1;

  }

  50% {

    -webkit-transform: translateY(-110%);

            transform: translateY(-110%);

    opacity: 1;

  }

  50.1% {

    -webkit-transform: translateY(110%);

            transform: translateY(110%);

    opacity: 0;

  }

}

@keyframes mv05-fraction {

  0%, 100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    opacity: 1;

  }

  50% {

    -webkit-transform: translateY(-110%);

            transform: translateY(-110%);

    opacity: 1;

  }

  50.1% {

    -webkit-transform: translateY(110%);

            transform: translateY(110%);

    opacity: 0;

  }

}



html {

    background-color:#f7f7f7;

    scroll-behavior: smooth; /* スムーズスクロールを有効にする */

}



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

/* PC用のスタイル */

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



/* ヘッダー */

header {
    z-index: 9995;

    position: absolute;

    width: 100%;

    top:0;

}

.l-header{
  padding: 30px 0
}

.l-header__inner{
  max-width: 1668px;
  margin: 0 auto;
  padding: 0 25px;
  box-sizing: content-box;
  display: flex;
  align-items: center; /* 縦方向の中央寄せ */
  justify-content: space-between;
}
.l-header__nav{
  display: flex;
  gap: 30px
}
.l-header__tool{
  gap: 24px;
  display: flex;
  align-items: center;
}
.sp_header_right{
  margin-left: 44px;
}

#nav-pc .c-btn{
  color: #fff;
  font-size: 14px;
}
.c-btn{
  color: #fff;
  border-radius: 10px;
  height: 48px;
  display: flex;
  align-items: center;
  text-decoration: none;
  background: #7A2E2E;
  line-height: 1.1;
  padding: 0 10px;
  position: relative;
  gap: 5px;
  transition: background .3s;
}
.c-btn:hover{
  background: #d50000;
}
#nav-pc .c-btn:hover{
  text-decoration: none;
}
.c-btn--line{
  background: #00B900;
}
.c-btn--contact:before{
  content: "";
  background: url('/assets/img/ico_letter.svg') no-repeat center/contain;
  width: 50px;
  height: 36px
}
.c-btn--line:before{
  content: "";
  background: url('/assets/img/ico_line.svg') no-repeat center/contain;
  width: 36px;
  height: 36px;
}
@media screen and (min-width: 1660px){
  .l-header__nav a{
    font-size: 18px;
  }
}
@media screen and (min-width: 1400px) and (max-width:1659px){
  .l-header__tool{
    gap: 20px;
  }
  .sp_header_right{
    margin-left: 30px;
  }
  .l-header__nav{
    gap: 25px
  }
  .c-btn{
    font-size: 15px;
  }
}
/* ナビゲーションのレイアウト */

#nav-pc {

    font-size: 16px;

    font-family: monospace;

    font-weight: 600;

    align-items: center;

    display: flex;

}

#nav-pc2 {

    font-size: 16px;

    padding-top: 15px;

    font-family: monospace;

    font-weight: 600;

    align-items: center;

    display: flex;

}

/* ナビゲーションのリンクの装飾設定 */

#nav-pc > a {

    text-decoration: none;

    color: #1a1a1a;

}



#nav-pc > a:hover {

    text-decoration: underline;

}



#nav-pc2 > a {

    text-decoration: none;

    margin-left: 20px;

    color: #fff;

}



#nav-pc2 > a:hover {

    text-decoration: underline;

}



.fv_text {

    position: absolute;

    top: 31%;

    left: 12%;

    color: #fff;

    font-weight: 600;

    font-family: monospace;

    letter-spacing: 0.2em;

    font-size: 32px;

}



#header{

  background:none;

  transition: background-color 0.8s ease;  /* 背景色の変化に0.5秒のアニメーション */

  }

.active{

     background-color: white !important;

    transition: background-color 0.8s ease;  /* 背景色の変化に0.5秒のアニメーション */

}







/* ロゴのスタイル */

#logo {

    display: flex;

    align-items: center; /* ロゴ画像を中央寄せにする */

}

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

/* モバイル用スタイル */

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



/* 必要に応じて、モバイル用のメディアクエリを追加 */

@media (max-width: 768px) {

    /* モバイル用のスタイル */



    #nav-pc {

        padding-top: 10px;

    }



    #nav-pc > a {

        margin-left: 0;

        margin-top: 10px;

    }

}





/* フォーム */



.Form {

  margin-top: 50px;

  margin-left: auto;

  margin-right: auto;

  max-width: 1280px;

}

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

  .Form {

    margin-top: 40px;

  }

}

.Form-Item {

  border-top: 1px solid #ddd;

  padding-top: 24px;

  padding-bottom: 24px;

  width: 100%;

  display: flex;

  align-items: baseline;

}

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

  .Form-Item {

    padding-left: 14px;

    padding-right: 14px;

    padding-top: 16px;

    padding-bottom: 16px;

    flex-wrap: wrap;

  }

}

.Form-Item:nth-child(5) {

  border-bottom: 1px solid #ddd;

}

.Form-Item-Label {

  width: 100%;

  max-width: 20%;

  letter-spacing: 0.05em;

  font-weight: bold;

  font-size: 18px;

}

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

  .Form-Item-Label {

    max-width: inherit;

    display: flex;

    align-items: center;

    font-size: 15px;

  }

}

.Form-Item-Label.isMsg {

  margin-top: 8px;

  margin-bottom: auto;

}

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

  .Form-Item-Label.isMsg {

    margin-top: 0;

  }

}

.Form-Item-Label-Required {

  border-radius: 6px;

  margin-right: 8px;

  padding-top: 8px;

  padding-bottom: 8px;

  width: 48px;

  display: inline-block;

  text-align: center;

  background: #cd5594;

  color: #fff;

  font-size: 14px;

}

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

  .Form-Item-Label-Required {

    border-radius: 4px;

    padding-top: 4px;

    padding-bottom: 4px;

    width: 32px;

    font-size: 10px;

  }

}

.Form-Item-Input {

  border: 1px solid #ddd;

  border-radius: 6px;

  margin-left: 40px;

  padding-left: 1em;

  padding-right: 1em;

  height: 48px;

  flex: 1;

  width: 100%;

  background: #eaedf2;

  font-size: 18px;

}

.Form-Item-Input2 {

  border: 1px solid #ddd;

  border-radius: 6px;

  margin-left: 40px;

  padding-left: 1em;

  padding-right: 1em;

  height: 48px;

  flex: 1;

  width: 100%;

  max-width: 30%;

  background: #eaedf2;

  font-size: 18px;

}

.Form-Item-Input3 {

  border: 1px solid #ddd;

  border-radius: 6px;

  margin-left: 40px;

  padding-left: 1em;

  padding-right: 1em;

  height: 100px;

  flex: 1;

  width: 100%;

  background: #eaedf2;

  font-size: 18px;

}

textarea{

  padding-top: 10px

}

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

  .Form-Item-Input {

    margin-left: 0;

    margin-top: 18px;

    height: 40px;

    flex: inherit;

    font-size: 15px;

  }

}



.Form-Item-Textarea {

  border: 1px solid #ddd;

  border-radius: 6px;

  margin-left: 40px;

  padding-left: 1em;

  padding-right: 1em;

  height: 216px;

  flex: 1;

  width: 100%;

  max-width: 80%;

  background: #eaedf2;

  font-size: 18px;

}

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

  .Form-Item-Textarea {

    margin-top: 18px;

    margin-left: 0;

    height: 200px;

    flex: inherit;

    font-size: 15px;

  }

}

.Form-Btn {

  border-radius: 6px;

  margin-top: 32px;

  margin-left: auto;

  margin-right: auto;

  padding-top: 20px;

  padding-bottom: 20px;

  width: 280px;

  display: block;

  letter-spacing: 0.05em;

  background: #5bc8ac;

  color: #fff;

  font-weight: bold;

  font-size: 20px;

}

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

  .Form-Btn {

    margin-top: 24px;

    padding-top: 8px;

    padding-bottom: 8px;

    width: 160px;

    font-size: 16px;

  }

}



/* セレクトボックス */

.selectbox-4 {

    display: inline-flex;

    align-items: center;

    position: relative;

}



.selectbox-4::after {

    position: absolute;

    right: 15px;

    width: 10px;

    height: 7px;

    background-color: #535353;

    clip-path: polygon(0 0, 100% 0, 50% 100%);

    content: '';

    pointer-events: none;

    top: 50%;

    transform: translateY(-50%)

}



.selectbox-4 select {

    border: 1px solid #ddd;

    border-radius: 6px;

    margin-left: 40px;

    padding-left: 1em;

    padding-right: 1em;

    appearance: none;

    min-width: 230px;

    height: 2.8em;

    padding: .4em calc(.8em + 30px) .4em .8em;

    border: none;

    border-radius: 3px;

    box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);

    background: #eaedf2;

    color: #333333;

    font-size: 1em;

    cursor: pointer;

}



/* ラジオボタン*/

.rra{

   margin-left: 40px;

}

.radio-2 {

    display: flex;

    flex-wrap: wrap;

    gap: .3em 2em;

    border: none;

}



.radio-2 label {

    display: flex;

    align-items: center;

    gap: 0 .5em;

    position: relative;

    cursor: pointer;

}



.radio-2 label::before,

.radio-2 label::after {

    border-radius: 50%;

    content: '';

}



.radio-2 label::before {

    width: 18px;

    height: 18px;

    border: 2px solid #dee5eb;

    box-sizing: border-box;

}



.radio-2 label::after {

    position: absolute;

    top: 50%;

    left: 9px;

    transform: translate(-50%, -50%);

    width: 9px;

    height: 9px;

    background-color: #dee5eb;

}



.radio-2 label:has(:checked)::after {

    background-color: #2589d0;

    animation: anim-radio-2 .3s linear;

}



@keyframes anim-radio-2 {

    0% {

        box-shadow: 0 0 0 1px transparent;

    }

    50% {

        box-shadow: 0 0 0 10px #2589d033;

    }

    100% {

        box-shadow: 0 0 0 10px transparent;

    }

}

.radio-2 input {

    display: none;

}



/* チェックボックス */

.checkbox-1 {

    display: flex;

    flex-wrap: wrap;

    gap: .5em 2em;

    border: none;
}
fieldset.checkbox-1{
  margin-bottom: 15px;
}
.login-inner{
  max-width: 352px;
  margin: 0 auto
}

.checkbox-1 label {

    display: flex;

    align-items: center;

    gap: 0 .5em;

    position: relative;

    cursor: pointer;

}



.checkbox-1 label::before,

.checkbox-1 label:has(:checked)::after {

    content: '';

}



.checkbox-1 label::before {

    width: 17px;

    height: 17px;

    border-radius: 3px;

    background-color: #e6edf3;

}



.checkbox-1 label:has(:checked)::before {

    background-color: #2589d0;

}



.checkbox-1 label:has(:checked)::after {

    position: absolute;

    top: 6px;

    left: 6px;

    transform: rotate(45deg);

    width: 4px;

    height: 8px;

    border: solid #fff;

    border-width: 0 2px 2px 0;

}



.checkbox-1 input {

    display: none;

}





/* header jq 12/09 fuchi add*/

#header{

  background:none;

  transition: background-color 0.8s ease;  /* 背景色の変化に0.5秒のアニメーション */

  background-color: #fff;

  opacity: 1;

  }

.active{

     background-color: white !important;

    transition: background-color 0.8s ease;  /* 背景色の変化に0.5秒のアニメーション */

}



.head_icon{

  display: flex;
  gap: 20px;
  align-items: center;

}

/* 0116 FUCHI*/



.mt_100{

  margin-top: 100px;

}



.w_1120{

  max-width: 1150px;

  width: 100%;

  margin: 0 auto;
  padding: 0 15px

}



.pankuz{

  padding: 22px 15px 0;

  margin-bottom: 40px;

}



.pankuz_my{

  padding-top: 22px;

  margin-bottom: 22px;

}



.mb_200{

  margin-bottom: 200px;

}



.back_white{

  background: white;

}



.back_gray{

  width: 100%;

  background-color: #F8F8F8;

  padding: 50px 0 120px 0;

}

.my_tit {

    font-weight: 500;

    font-size: 2rem;

    margin-right: 20px;

    line-height: 1.3;

    padding: 10px 10px;

}



.mypage_leftmenu{

   display: flex;

   justify-content: space-between;

   flex-direction: column;

   min-height: 570px;

   height: auto;

   padding-top: 30px;

   background: white;

}



.mypage_leftmenu_cont{

  text-align: center;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.mypage_leftmenu_main{

  display: flex;

      flex-direction: column;

      width: 215px;

}



.mypage_all{

  display: flex;

  gap: 5px;

}



.mypage_main{

  background: white;

  width: 100%;

}



.mypage_main_center{

  margin-top: 30px;

  text-align: center;

  /*margin-bottom: 130px;*/

}



.menber_h{

  font-size: 24px;

}



.menber_headtext{

  margin-bottom: 30px;

}



.mypage_button{

  display: block;

  max-width: 440px;

  background-color: #04AEB8;

  text-align: center;

  line-height: 45px;

  color: white;

  border-radius: 5px;

  margin: 0 auto;

}



.mypage_leftmenu_logout{

  display: flex

  ;

      gap: 15px;

      height: 60px;

      justify-content: center;

      align-items: center;

}



.mypage_leftmenu_cont:hover,.mypage_leftmenu_logout:hover{

  transition: 0.5s;

  background-color: #ECECEC;

}



.mypage_leftmenu_cont_top{

  text-align: center;

  height: 60px;

  display: flex

;

  align-items: center;

  justify-content: center;

}



.mypage_news_cont{

  display: flex

  ;

      width: 95%;

      justify-content: space-between;

      margin: 0 auto;

      position: relative;

      padding: 25px 0;

      align-items: center;

}



.mypage_news_cont::before {

  content: "";

  background-image: linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px);

  background-size: 8px 1px;

  background-repeat: repeat-x;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

}



.mypage_news_cont:last-child::after  {

  content: "";

  background-image: linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px);

  background-size: 8px 1px;

  background-repeat: repeat-x;

  position: absolute;

  height: 1px;

  bottom: 0;

  left: 0;

  right: 0;

}



.mypage_news{

  margin-bottom: 100px;

}



.mypage_detail_button{

  max-width: 170px;

  background-color: #04AEB8;

  line-height: 46px;

  color: white;

  font-size: 16px;

  border-radius: 30px;

  display: block;

  margin: 0 auto;

}



.mypage_news_day{

color:#407EB4;

font-size: 16px;
width: 76px


}



.mypage_news_cate{

  font-size: 16px;

  padding: 0px 25px;

  border: 1px solid #DC475B;

  color: #DC475B;

  border-radius: 5px;
  width: 83px

}



.mypage_news_text{

  font-size: 14px;
  width: calc(100% - 189px)

}



.mypage_hestory_top_button{

  flex-basis: 50%;

  position: relative;

}



.mypage_hestory_top{

  display: flex

  ;

      line-height: 70px;

      text-align: center;

}



.line{

  font-size: 40px;

}



.mypage_hestory_top_buttontext{

  line-height: 33px;

  position: absolute;

  top: 50%;

  left: 50%;

  width: 90%;

  transform: translate(-50%, -50%);

}



.bk_blue .mypage_hestory_top_buttontext{

background-color:#AAD7D999 ;

}



table{

  width: 100%;

  border-spacing: 0px;

  border-collapse: collapse

}



#mypage_history_cont1 thead tr:first-child{

  line-height: 43px;

  background-color: #E2F6FF;



}

#mypage_history_cont1 tr{

 text-align: center;

 height: 50px;

}

#mypage_history_cont1 td:first-child,#mypage_history_cont1 th:first-child{

  padding-left: 10px;

}



.mypage_hestory_cont2_main{

  display: flex

  ;

      gap: 20px;

      padding: 30px 15px;

}



.hestory_cont2_left{

  flex-basis: 30%;

}



.hestory_cont2_left img{

 width: 100%;

}



.hestory_cont2_left_text{

  text-align: center;

  font-size: 14px;

}



.hestory_cont2_right{

  flex-basis: 70%;

}



.hestory_cont2_right table{

  width: 100%;

}



.hestory_cont2_right th{

  border-bottom: 1px solid #535357;

  font-weight: 100;

  font-size:14px;



}



.hestory_cont2_right td{

  text-align: center;

  padding-top: 100px;

  border-bottom: 0.5px solid #535357;

}



.hestory_cont2_right_payway{

  margin-bottom: 75px;

  line-height: 53px;

  padding: 0 10px;

  background-color: #F4FBFF;

  display: flex

;

  justify-content: space-between;

  margin-top: 5px;

}



.hestory_cont2_right_button{

  width: 100px;

  display: inline-block;

  padding: 0px 17px;

  background-color: #CF616F;

  color: white;

  border-radius: 5px;

  text-align: center;

}





.hestory_cont2_right_button_all{

  gap: 25px;

  display: flex

;

  justify-content: flex-end;

  padding-right: 5px;

}



.mypage_hestory_cont2_main{

  box-shadow: 0px 6px 6px #00000026;

}



.info_top{

  padding: 40px 0;

  width: 90%;

  margin: 0 auto;

}



.mypage_main_left_h{

  font-size: 20px;

}



.mypage_main_info_top{

  display: flex

  ;    align-items: center;

      justify-content: space-between;

}



.form-item{

  display: flex

  ;

  margin-bottom: 30px;

}



.form-info{

  margin-top: 50px;

}



.label{

  width: 100%;

  max-width: 200px;

  display: inline-block;

}



.mypage_receive_all{

  margin-top: 50px;

}



.receive_cont_head{

  display: flex

  ;

      justify-content: space-between;

}



.receive_cont_head_icon{

  display: flex

  ;

      gap: 15px;

      /* width: 100%; */

      align-items: center;

}



.receive_cont_all{

  border: 1px solid #8AD4D8;

  margin-top: 15px;

}



.receive_cont_main{

  display: flex

  ;

  gap: 30px;

      padding: 20px 40px;

}



.receive_cont_main_h{

  display: block;

  width: 50%;

  font-weight: bold;

}



.receive_cont_sub{

  display: flex

  ;

    border-top:1px dotted #8AD4D8;

      padding: 20px 40px;

      gap: 30px;

}



.mypage_receive_cont{

  margin-bottom: 60px;

}



.receive_cont_main_p{

  display: block;

  width: 50%;

}



.receive_cont_head_icon img{

  cursor: pointer;

}



.receive_cont_head_icon img:hover{

  opacity: 0.5;

  transition: .3s;

}



.modal {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  justify-content: center;

  align-items: center;

}



.modal-content {

  background-color: white;

  padding: 50px 60px 80px 60px;

  border-radius: 30px;

  text-align: center;

}





.blue_btn_smrt{

  background-color: #04AEB8;

  border: none;

  width: 100%;

  color: white;

  max-width: 165px;

  font-size: 16px;

  line-height: 35px;

  border-radius: 5px;

  box-shadow: 0 4px 4px #00000040;

  cursor: pointer;

  transition: .3s;

}



.blue_btn_smrt:hover,.gray_btn_smrt:hover{

opacity: 0.5;

}



.gray_btn_smrt{

  background-color: #C2C2C2;

  border: none;

  width: 100%;

  color: #5A5A5A;

  max-width: 165px;

  font-size: 16px;

  line-height: 35px;

  border-radius: 5px;

  box-shadow: 0 4px 4px #00000040;

  cursor: pointer;

  transition: .3s;

}



.modal-content h2{

  margin-bottom: 15px;

}



.modal-content p{

  margin-bottom: 60px;

}



.cancel2{

  margin-bottom: 60px;

}



.modal-content-button{

  display: flex

  ;

      justify-content: space-between;

}



.receive_formation_cont{

  margin-bottom: 30px;

}



.foget_pass{

  display: flex

;

    align-items: center;

    font-size: 14px;

    gap: 10px;

    color: #1670A3;



}







/* resapons */



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



  .mypage_leftmenu_main {

    display: flex

;

    flex-direction: column;

    width: 100%;

}

.mypage_leftmenu {

  gap: 30px;

  display: flex

;

  justify-content: space-between;

  flex-direction: column;

  min-height: auto;

  height: auto;

  padding: 30px 0;

  background: white;

}



.mypage_all{

  flex-direction: column-reverse;

}

.mypage_main_center {

  width: 90%;

  margin: 100px auto;

}



.label {

width: 50%;

}



.history-content{

  overflow-x: scroll;

  margin-bottom: 60px;

}



.history-content table{



  min-width: 700px;

}



.mypage_hestory_cont2_main {

  flex-direction: column;



}



.mypage_news_cont{

  flex-wrap: wrap;

  gap: 10px;
  justify-content: flex-start;

}

.mypage_news_text{
  width: 100%
}

.mypage_news_cont img{

  margin-left: auto;

}



.modal-content {

  background-color: white;

  padding: 50px 30px 80px 30px;

  border-radius: 30px;

  width: 90%;

  text-align: center;

}



.modal-content-button {

  gap: 10px;

  display: flex

;

  justify-content: space-between;

}

}



/* 0121 */



.login_back_black{

  padding-top: 270px;

  padding-bottom: 180px;

  background-image: url(../img/login_back.png);

  background-size: cover;

}



.rogin_modal_all{

  max-width: 370px;

  margin: 0 auto;

  padding: 50px 35px;

  border-radius: 20px;

  width: 90%;

  background-color: white;

  text-align: center;

}



.rogin_h{

  text-align: center;

}



.rogin_modal img{

  margin: 0 auto;

  display: block;

  margin-bottom: 30px;

}



.under_line{

  font-size: 12px;

  text-align: center !important;

  display: inline-block;

  margin-top: 15px;

}



.border_center_all{

  font-size: 15px;

  align-items: center;

  display: flex

;

gap: 5px;

}



.border_center{

  width: 50%;

  height: 1px;

  border-bottom: 1px dotted;

}



.border_center_all span{

  text-wrap: nowrap;

}



.shinki_button{

  display: inline-block;

  font-size: 14px;

  line-height: 25px;

  padding: 5px 20px;

  border: 1px solid #04AEB8;

  margin-top: 15px;

  border-radius: 5px;

}



.under_line:hover{

opacity: 0.5;

transition: .3s;

}



.left_h{

  font-size: 20px;

  margin-bottom: 60px;

}



.foget_pass_main{

  width: 90%;

  max-width: 800px;

  margin: 0 auto;

  background-color: #f5f5f5;

  padding: 50px;

}



.Form-Item-red{

  top: 0;

  color: #DA6473;

  position: absolute;

}



.Form-Item-under{

  bottom: 0;

  position: absolute;

  font-size: 14px;

}



.center_h{

  font-size: 24px;

  text-align: center;

}



.center_p{

text-align: center;

}



.goods_top_mid{

  position: relative;

  height: 320px;

}



.goods_top_main{

  gap: 20px;

  position: absolute;

  display: flex;

  justify-content: space-between;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 10;

  justify-content: space-evenly;

}



.goods_top_main_back{

  position: absolute;

  width: 100%;

  z-index: 1;

  bottom: 0;

}



.goods_top_main_back img{

  width: 100%;

  height: 160px;

}



.goods_top_main_cont_img_text{

  text-align: center;

    background-color: #DA6473;

    color: white;

    left: 50%;

    bottom: 0;

    transform: translate(-50%, 0%);

    /* margin: 0 auto; */

    display: block;

    position: absolute;

    width: 120%;

    border-radius: 5px;

}



.goods_top_main_cont{

  position: relative;

}



.goods_top_mid{

  margin-bottom: 75px;

}



.goods_top_foot{

  display: flex

  ;    margin-bottom: 80px;

      align-items: center;

      justify-content: space-between;

      flex-wrap: wrap;

      gap: 30px;

}



.goods_top_foot_flex_p {

  padding: 10px 30px;

    border-radius: 30px;

    border:1px solid #04AEB8;

    color: #04AEB8;

}



.goods_top_foot_flex_p.on{

  padding: 10px 30px;

    border-radius: 30px;

    background-color: #04AEB8;

    color: white;

}



.goods_top_foot_flex_p a{

    color: #04AEB8;

}

.goods_top_foot_flex_p.on a{

    color: #FFF;

}



.goods_top_foot_flex{

  flex-wrap: wrap;

  display: flex;

  justify-content: space-between;

  gap: 20px;

}



.goods_detail_top_back{

  background-image: url(../img/goods_detail_top_back.png);

  height: 320px;

    width: 100%;

    background-size: cover;

    margin-bottom: 80px;

}



.goods_detail_top{

  height: 100%;

  display: flex;

  gap: 65px;

  align-items: center;

}



.goods_detail_top_text{

  color: white;

}



.goods_detail_top_h{

  font-size: 24px;

  margin-bottom: 20px;

}



.goods_detail_top_p{

  font-size: 12px;

}



.goods_detail_main{

  display: flex

  ;    gap: 70px;

  justify-content: space-between;

}



.goods_detail_left_h{

  margin-bottom: 30px;

  font-weight: bold;

}



.goods_detail_left_p{

  font-size: 14px;

  margin-bottom: 50px;

}



.goods_detail_left_button .bk_blue{

  font-size: 16px;

  display: flex

;

  justify-content: space-evenly;

  border-radius: 5px;

  align-items: center;

  width: 85px;

  background-color: #0F83B5;

  line-height: 28px;

  color: white;

}



.goods_detail_left_button .bk_red{

  font-size: 16px;

  display: flex

;

  justify-content: space-evenly;

  border-radius: 5px;

  align-items: center;

  width: 85px;

  background-color: #DA6473;

  line-height: 28px;

  color: white;

}



.goods_detail_left_button{

  display: flex;

  gap: 40px;

  justify-content: center;

  margin-top: 15px;

}



.goods_detail_slide{

  margin-top: 80px;

}



.goods_detail_slide_h{

  font-size: 24px;

  font-weight: bold;

  margin-bottom: 10px;

}



.goods_detail_slide_main_all{

  background-color: #F4FBFF;

}

.goods_detail_slide_main_inner{

  max-width: 1230px;

  padding: 30px 15px;

  box-sizing: content-box;

  display: flex;

  position: relative;

  margin: 0 auto

}

.goods_detail_slide_main_all .swiper-button{

  width: 55px;

  height: calc(100% - 60px);

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 5px;

  cursor: pointer;

  top: 50%;

  transform: translateY(-50%);

  position: absolute;

}

.swiper-button.swiper-button-disabled{

  opacity: .5;

}

.goods_detail_slide_main_all .swiper-prev{

  background: #fff url("../img/left_arrow_goods.png") no-repeat center;

  left: 0;

}

.goods_detail_slide_main_all .swiper-next{

  background: #fff url("../img/right_arrow_goods.png") no-repeat center;

  right: 0;

}



.goods_detail_slide_main{

  gap: 20px;

  display: flex;

  align-items: center;

  max-width: 1120px;

  margin: auto;

  overflow: hidden;

}



.goods_detail_slide_main.swiper-container{

  max-width: calc(100% - 110px);

  margin: 0 auto

}



.goods_detail_slide_main_cont{

  border-radius: 10px;

  background-color: white;

}



.goods_detail_slide_p{

  line-height: 20px;

  width: 100%;

  font-size: 14px;

}



.goods_detail_slide_main_cont{

  padding: 20px;

  border-radius: 10px;

  background-color: white;;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  text-align: center;

}



.goods_detail_slide_button{

  width: 100%;

  border-radius: 10px;

  height: 50px;

  align-items: center;

  margin: 15px 0 0;

  color: white;

  justify-content: center;

  display: flex;

  gap: 10px

;

  background-color: #04AEB8;

}



.goods_detail_slide_main .goods_detail_slide_main_cont > img{

  height: 200px;

}



.goods_detail_slide_button img{

  height:auto;

}



.news_main{

  display: flex

  ;

      flex-wrap: wrap;

      gap: 50px;

      margin-bottom: 80px;

}



.news_cont{

  width: calc((100% - 50px) / 2);

  position: relative;

}



.news_cont_red{

  color: #F63939;

}



.news_main_h{

  width: 100%;

  text-align: center;

  font-size: 32px;

  color: #DA6473;

}



.news_cont img{

  width: 100%;

}



.camp_detail_top img{

width: 100%;

}



.camp_detail_top {

  width: 100%;

  margin-bottom: 160px;

  }



.camp_detail_sakura{

  max-width: 750px;

  width: 90%;

  margin: 0 auto;

  margin-bottom: 150px;

  border: 1px solid #DA6473;

  padding: 50px 0;

  text-align: center;

  position: relative;

}



.camp_detail_sakura_img01{

  position: absolute;

  top: 0;

  left: 0;

  transform: translate(-20%, -20%);

}



.camp_detail_sakura_img02{

  position: absolute;

  bottom: 0;

  right: 0;

  transform: translate(20%, 20%);

}



.camp_detail_sakura_h{

  font-size: 24px;

  margin-bottom: 100px;

  display: inline-block;

  position: relative;

}



.camp_detail_sakura_red{

  font-size: 48px;

  color: #D54457;

}



.camp_detail_flex_text{

  padding: 20px 30px;

  width: 100%;

  background-color: #FFF9F9;

}



.camp_detail_flex_text_h{

  margin-top: 70px;

  text-align: center;

  font-size: 24px;

  font-weight: bold;

  margin-bottom: 25px;

}



.camp_detail_flex_text_p{

  margin-bottom: 60px;

}



.camp_detail_flex_text_red{

  margin-bottom: 60px;

  color: #DC475B;

  text-align: center;

}



.camp_detail_flex_text_solid{

  text-align: center;

  padding: 30px;

  border: 1px dotted #F77687;

}



.camp_detail_flex{

display: flex;

margin-bottom: 130px;

}



.camp_detail_table td{

  border: 1px solid #E2E2E2;

  width: 25%;

  text-align: center;

  padding: 30px;

}



.camp_detail_table{

  margin-bottom: 90px;

  position: relative;

}



.camp_detail_table th{

padding: 10px 0;

background-color: #FFCBD2;

}



.camp_detail_table01{

  top: 0;

  left: 0;

  transform: translate(-50%, -50%);

  position: absolute;

}



.camp_detail_table02{

  bottom: 0;

  right: 0;

  transform: translate(50%, 0%);

  position: absolute;

}



.camp_detail_sub_h{

  position: relative;

  z-index: 10;

}



.camp_detail_sub_h img{

  position: absolute;

  left: 0;

  top: 50%;

  transform: translate(-50%, -50%);

  z-index: -1;

}



.camp_detail_sub_text{

  margin-bottom: 80px;

}



.camp_detail_sub_h{

  font-size: 20px;

  font-weight: bold;

}



.camp_detail_sumple{

  margin-top: 130px;

  margin-bottom: 130px;

}



.camp_detail_sumple_h{

  font-size: 35px;

  font-weight: bold;

  text-align: center;

  margin-bottom: 70px;

}



.camp_detail_sumple_flex{

  display: flex

  ;

      flex-wrap: wrap;

      gap: 100px;

      justify-content: center;

}



.camp_detail_sumple_flex_sub{

  display: flex

  ;



      justify-content: space-between;

}





/* resapons */



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

.goods_top_main{

  overflow-x: scroll;

}



}


@media screen and (min-width: 769px) {
  .u-none_pc{
    display: none !important;
  }
}
@media screen and (max-width: 768px) {


  .u-none_sp{
    display: none !important;
  }
  .l-inner {

    position: relative;

    margin: 0 auto;

  }

.cssgrid > div {

  max-width: inherit;

  margin: 0 auto;

}
.genre-menu .titleGreenDot{
  padding: 0 15px
}


.goods_top_foot {

  flex-wrap: wrap;

  gap: 30px;

}



.goods_top_foot_flex {

  flex-wrap: wrap;

  display: flex

;

  justify-content: flex-start;

}



.goods_detail_main{

  flex-wrap: wrap;

}



.goods_detail_left,.goods_detail_right{

width: 100%;

}



.goods_detail_top{

  flex-direction: column;

  padding: 40px 0;

}



.goods_detail_top_back{

  height: auto;

}



.goods_detail_right img{

  width: 100%;

}



.goods_detail_slide{

  overflow: hidden;

}



.news_cont {

  width: 100%;

  position: relative;

}



.news_main_h{

  font-size: 27px;

}

}



/* cart */



.cart_main_h{

  font-size: 24px;

  font-weight: bold;

  margin-bottom: 20px;

}



.cart_table th{

  background-color: #EFF8FD;

  padding: 20px;

  font-size: 20px;

  font-weight: 100;

  text-align: left;

}





.cart_table th{

  background-color: #EFF8FD;

  padding: 5px 0;

  font-size: 20px;

  font-weight: 100;

  text-align: left;

  border-bottom: 1px solid #A6A3A4;

}





.cart_name{

  padding: 15px 0;

  display: flex

;gap:20px ;

}



.cart_table input{

  margin-left: 15px;

  margin-right: 15px;

  width: 40px;

  height: 25px;



}

.cart_price_flex{

  display: flex

  ;

      justify-content: space-between;

      flex-direction: column;

}



.cart_price_flex{

  padding: 90px 0;

  height: 280px;



}



.cart_table{

  border: 1px solid #A6A3A4;

  border-collapse:collapse;



}



.cart_table tr{

  border-bottom: 1px solid #A6A3A4;



}



.border_img{

  height: 220px;

  display: grid;

  border: 1px solid #A6A3A4;

  padding: 10px;

}



.border_img img{

  margin: auto 0;

}



.cart_name_text li{

  font-size: 12px;

}



.cart_name_text li::before{

  content: url(../img/reload.png);

  display: inline-block;

  width: 8px;

  height: 8px;

  margin-right: 10px;

}



.cart_name_text span{

font-size: 20px;

}



.cart_price{

  font-size: 28px;

  font-weight:600;

}



.cart_price_input select,.cart_price_input button{

  width: 75px;

  border: 1px solid #04AEB8;

  height: 28px;

  border-radius: 5px;

  background-color: white;

}



.cart_price_input{

  display: flex  ;

  gap: 40px;

}



.cart_form_under_flex{

  display: flex

  ;margin-top: 20px;

      justify-content: space-between;

      margin-bottom: 35px;

}



.cart_form_under_left{

  display: flex;

}



.cart_form_under_left input{

  width: 25px;

  height: 25px;

}



.cart_form_under_right a{

  color: #04AEB8;

}



.cart_form_under_right a:first-child{

 margin-left: 20px;

}



.cart_form_resalt::before {

	content: "";

	background-image: linear-gradient(to right, #B9B9B9, #B9B9B9 3px, transparent 3px, transparent 8px),

	linear-gradient(to right, #B9B9B9, #B9B9B9 3px, transparent 3px, transparent 8px),

	linear-gradient(to bottom, #B9B9B9, #B9B9B9 3px, transparent 3px, transparent 8px),

	linear-gradient(to bottom, #B9B9B9, #B9B9B9 3px, transparent 3px, transparent 8px);

	background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;

	background-position: left top, left bottom, left top, right top;

	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;

	position: absolute;

	top: 0;

	bottom: 0;

	left: 0;

	right: 0;

	pointer-events: none;



}

.cart_form_resalt_text{

  text-align: center;

  font-size: 20px;

  line-height: 35px;

}



.cart_form_resalt_text span{

color: #DA6473;

font-size: 32px;

font-weight: bold;

}



.cart_form_resalt button{

    display: block;

    margin-top: 170px;

    border: none;

    width: 100%;

    background-color: #04AEB8;

    text-align: center;

    line-height: 45px;

    color: white;

    border-radius: 5px;

    margin: 0 auto;

    margin-top: 20px;

    cursor: pointer;

}



.back_a{

    width: 250px;

    margin: 0 10px;

}



.send_a{

    width: 250px;

    margin: 0 10px;

}



.back_a button{

    display: block;

    margin-top: 170px;

    border: none;

    width: 100%;

    background-color: #9b9b9b;

    text-align: center;

    line-height: 45px;

    color: white;

    border-radius: 5px;

    margin: 0 auto;

    margin-top: 20px;

    cursor: pointer;

}



.send_a button{

    display: block;

    margin-top: 170px;

    border: none;

    width: 100%;

    background-color: #04AEB8;

    text-align: center;

    line-height: 45px;

    color: white;

    border-radius: 5px;

    margin: 0 auto;

    margin-top: 20px;

    cursor: pointer;

}



.cart_form_resalt {

    padding: 25px 50px;

    position: relative;

}



.pc_none{

  display:none !important;

}



.sp_none{

  display: block !important;

}



.camp_detail_table_p{

  position: relative;

  z-index: 20;

}



.camp_detail_table td{

  text-wrap: nowrap;

}



.camp_detail_sumple_flex img{

  max-width: 330px;

  width: 100%;

}



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

  .pc_none{

    display: block !important;

  }

  .sp_none{

  display: none !important;

  }

  .cart_price_input {

    gap: 10px;

    padding-right: 20px;

  }



  .cart_name{

    flex-wrap: wrap;

    margin-right: 20px;

  }



  .cart_table{

    overflow-x: scroll;

    width: 100%;

    display: block;

  }



  .camp_detail_table table{

    display: block;

    overflow-x: scroll;

  }



  .camp_detail_flex{

    flex-wrap: wrap;

  }



  .camp_detail_flex img{

    width: 100%;

    height: 320px;

    object-fit: cover;

    border-radius: 10px;

  }



  .camp_detail_sumple_flex_sub{

    flex-direction: column;

  }



  #footer .bgImageBtnWrap .link{

    width: 100%;

  }



  #footer .bgImageBtnWrap {



    gap: 30px;

  }



  .camp_detail_table01 {

    transform: translate(-20%, -50%);

    position: absolute;

  }

  .camp_detail_table02 {

    transform: translate(30%, 0%);

    position: absolute;

  }



  .camp_detail_sakura_img01 {

    transform: translate(-10%, -20%);

  }

  .pp__title{

    font-size: 4vw;

  }

}









/* ハンバーガーアイコン */

.hamburger-menu {

  /*display: none;*/

}



.hamburger-icon {

  height: 24px;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.hamburger-icon span {

  width: 43px;

  height: 3px;

  background-color: #000;

  transition: all 0.3s ease;

}



/* モーダルメニュー */

.modal-menu {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.8);

  color: white;

  padding: 20px;

  z-index: 9999;

}



#nav-mobile {

  display: flex;

  flex-direction: column;

}



#nav-mobile a {

  color: white;

  text-decoration: none;

  margin: 10px 0;

}



#close-modal {

  background: none;

  border: none;

  color: white;

  font-size: 30px;

  position: absolute;

  top: 20px;

  right: 20px;

  cursor: pointer;

}

.hamburger-icon-under{
  font-size: 11px;
  white-space: nowrap;
  line-height: 1;
  margin-top: 8px;
}

.head_icon img{

  width: 25px

}

@media screen and (min-width: 1101px) and (max-width: 1399px){

  #logo img{
    width:13.62vw
  }

  #nav-pc > a{
    font-size: 1.09vw;
  }
  .l-header__inner{
    padding: 0 1.82vw
  }
  #nav-pc > a > img{

    width: 11.54vw

  }
  .l-header__nav{
    gap:2vw
  }
  .c-btn{
    font-size: 1.09vw;
  }

  .head_icon img{

    width: 1.92vw

  }

  .head_icon{

    gap: 1.15vw;

  }
  .sp_header_right{
    margin-left: 2.27vw
  }
  .l-header__tool{
    gap: 1.36vw
  }
  .c-btn--contact:before{
    width: 3.27vw
  }
  .c-btn--line:before{
    width: 2.72vw;
    height: 2.72vw;
  }
  .hamburger-icon span{

    width:3.46vw;

    margin: 0 auto

  }

  .hamburger-icon-under{

    font-size: 0.92vw;

  }

}

/* 768px以下 */

@media (max-width: 1100px) {

  #nav-pc {

      display: none; /* デスクトップ用メニューを非表示 */

  }
  .sp_header_right{
    margin-left: 15px;
  }
  .hamburger-menu {

    display: flex;

            justify-content: flex-end;

            flex-direction: column;

            align-items: center;

            line-height: 1;

            gap: 5px;



  }



  main {

    margin-top: 88px;

  }



  header{

    justify-content: space-between;

    padding: 10px 20px;

  }



  #logo img {

    width: 140px;

    object-fit: contain;
}

}



.payment_h{

  font-size: 24px;

  text-align: center;

  color: #DA6473;

  margin-bottom: 100px;

}



.payment_ul li{

  line-height: 40px;

}



.payment_ul li:before{

  display:inline-block;

  vertical-align: middle;

  /*以下白丸つくる*/

  content:'';

  width:10px;

  height: 10px;

  background: #DA6473;

  border-radius: 50%;

  margin-right: 15px;

}



.payment_ul{

  margin-bottom: 30px;

}



.payment_top_text_h{

  color: #DA6473;

  margin-bottom: 15px;

}



.payment_top{

margin-bottom: 100px;

}



.payment_main_detail{

  display: flex

  ;

      align-items: flex-start;

      gap: 15px;

}



.payment_main_detail img{

  width: 10px;

  margin-top: 10px;



}



.payment_main_h{

  display: inline-block;

  margin-bottom: 15px;

  border-bottom: 1px solid #FCF6F6;

}





.payment_main li:before{

  display:inline-block;



  /*以下白丸つくる*/

  content:url(../img/payment_li.png);

  width:10px;

  height: 10px;





  margin-right: 15px;

}



.payment_main_cont{

  width: 100%;

  max-width: 480px;

}



.payment_main{

  margin-bottom: 100px;

  display: flex

;

  justify-content: space-between;

}



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

  .payment_main{

    flex-wrap: wrap;

  }



  .payment_main_cont_detail img{

    width: 100%;

  }



  .payment_main_cont_detail{

    margin-top: 30px;

  }
  .sp_header_right{
    margin-left: 0;
  }
  .l-header__inner{
    padding: 0 15px
  }
  .head_icon{
    gap: 15px
  }
  .l-header {
    padding: 20px 0;
  }
}





.bloc_gray_1200 {

    width: 100%;

    max-width: 100%;

    margin: 3% auto;

    padding: 1% 1% 1%;

    text-align: center;

    background-color: #d50000;

    color: #000;

    font-size: 18px;

    font-weight: bold;

    border-radius: 10px;

    color: #fff;

}

.block4_2_fx {

    list-style: none;

    padding: 0;

    margin: 2% auto 0;

    /*max-width: 1000px;*/

    display: flex;

    /*flex-wrap: wrap;*/

}

.block4_2_fx {

    list-style: none;

    padding: 0;

}

.bloc_gray_1200 .block4_2_fx {

    width: 100%;

    /*max-width: 1200px;*/

}
.bloc_gray_1200 .block4_2_fx li{
  line-height: 0;
}
.TOP_cate ul {

    list-style: none;

    padding: 0;

}


.genre-menu {

    background: #f9f9f9;

    padding-top: 35px;

}

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

    .content-inner {

        width: 1200px;

        margin: 0 auto;

    }

}

.content-inner {

    position: relative;

}

.genre-menu__title {

    font-size: 18px;

    font-weight: 700;

    color: #000;

    padding: 0 20px;

    margin-bottom: 15px;

}

.genre-menu__tab {

    background: #EFEFEF;

    border-radius: 16px;

    margin: 0 20px 20px;

}

.genre-menu__tab ul {

    width: 100%;

    height: 32px;

    display: table;

    table-layout: fixed;

}

ol, ul, dl, p {

    margin-top: 0;

    margin-bottom: 0;

}

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

    .genre-menu__tab ul li {

        border-radius: 20px;

        height: 40px;

    }

}

.genre-menu__tab ul li {

    display: table-cell;

    box-sizing: border-box;

    border-radius: 16px;

    overflow: hidden;

}

li {

    list-style: none;

}

.genre-menu__tab .tablinks.active {

    background: #000;

    color: #fff;

}

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

    .genre-menu__tab .tablinks {

        font-size: 14px;

    }

}

.genre-menu__tab .tablinks {

    -webkit-appearance: none;

    appearance: none;

    border: none;

    height: 100%;

    width: 100%;

    box-sizing: border-box;

    border-radius: 16px;

    overflow: hidden;

    font-family: 'Noto Sans JP', ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";

    font-size: 12px;

    font-weight: 700;

    color: #999;

    text-align: center;

}

.accordion-container {

    width: 100%;

    overflow-y: hidden;

    overflow-x: auto;

}

.accordion-container ul {

    margin-bottom: 20px;

    display: flex;

    padding-left: 20px;

}

.gender-subcategories{

  width: 100px;

  display: block;

}

.gender-subcategories img{

  width: 100px;

  height: 100px;

  object-fit: contain;

  border-radius: 5px;

  background-color: #fff;

}

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

  .mb_200{

    margin-bottom: 100px;

  }

  .accordion-container ul {

      margin-bottom: 20px;

      display: flex;

      padding-left: 0;

      overflow-x: auto;

      gap: 20px

  }

  .goods_detail_main{

    gap: 20px

  }

}

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

    .accordion-container ul li {

        min-width: 100px;

        max-width: 100px;

        margin-right: 30px;

    }

}

.accordion-container ul li a {

    display: block;

    font-size: 10px;

    font-weight: 700;

    color: #000;

    text-decoration: none;

}

.accordion-container ul li figure {

    line-height: 0;

    margin-bottom: 8px;

    }

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

    .accordion-container ul li figure img {

        width: 100px;

        height: 100px;

        border-radius: 50px;

    }

}

.genre-menu__tab .tablinks.act {

    background: #000;

    color: #fff;

}

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

    .genre-menu__tab .tablinks {

        font-size: 14px;

    }

}

.genre-menu__tab .tablinks {

    -webkit-appearance: none;

    appearance: none;

    border: none;

    height: 100%;

    width: 100%;

    box-sizing: border-box;

    border-radius: 16px;

    overflow: hidden;

    font-family: 'Noto Sans JP', ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";

    font-size: 12px;

    font-weight: 700;

    color: #999;

    text-align: center;

}

.tab-4 {

    display: flex;

    flex-wrap: wrap;

    max-width: 100%;

}



.tab-4 > label {

    flex: 1 1;

    order: -1;

    position: relative;

    min-width: 70px;

    padding: .7em 1em;

    background-color: #f2f2f2;

    color: #999;

    font-size: .9em;

    text-align: center;

    cursor: pointer;

}



.tab-4 > label:hover,

.tab-4 label:has(:checked) {

    background-color: #04aeb8;

    color: #fff;

}



.tab-4 label:has(:checked)::before {

    position: absolute;

    bottom: -8px;

    left: 50%;

    transform: translateX(-50%);

    width: 18px;

    height: 9px;

    background-color: #04aeb8;

    content: '';

    clip-path: polygon(0 0, 100% 0, 50% 100%);

}



.tab-4 input {

    display: none;

}



.tab-4 > div {

    display: none;

    width: 100%;

    padding: 1.5em 1em;

}



.tab-4 label:has(:checked) + div {

    display: block;

}

.gender-subcategories span{

    width: 100%;

    font-family: "Yusei Magic", sans-serif;

}

.Form-Item .error {

    color: red;

    padding: 8px 16px;

    font-size: 1.3rem;

}

input[type=submit]{

  border: 0;

  cursor: pointer;

}



.error-form {

    border-color: #ff5b5b !important;

    background: #fdb8b8 !important;

}

.pdp-genre .titleGreenDot, .pdp-genre .p-tab{

  max-width: 1120px;

  margin-left: auto;

  margin-right: auto;

  padding: 0 15px;

  box-sizing: content-box;

}

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

  .goods_detail_slide_main.swiper-container{

    max-width: calc(100% - 60px);

  }

  .goods_detail_slide_main_all .swiper-button{

    width: 30px;

    background-size: 80%;

  }

}



/*tab*/

.p-tab__header{

  display: flex;

  flex-wrap: wrap;

}

.p-tab__item{

  flex: 1;

  padding: .7em 1em;

  font-size: 0.9em;

  background: #f2f2f2;

  color: #999;

  text-align: center;

  position: relative;

  cursor: pointer;

  transition: all .3s;

}

.p-tab__item:hover,

.p-tab__item.-active{

  color: #fff;

  background: #04aeb8;

}

.p-tab__item:hover:after,

.p-tab__item.-active:after{

  position: absolute;

  bottom: -8px;

  left: 50%;

  transform: translateX(-50%);

  width: 18px;

  height: 9px;

  background-color: #04aeb8;

  content: '';

  clip-path: polygon(0 0, 100% 0, 50% 100%);

  z-index: 2;

}

.p-tab__group{

  padding: 1.5em 0;

  overflow: hidden;

}

.p-tab__group:not(.-open){

  display: none;

}

[data-module="scrollable"]{

  position: relative;

  overflow: hidden;

}

[data-module="scrollable"] .slider-item{

  width: auto;

  flex-shrink: 0;

}

[data-module="scrollable"].swiper-container{

  max-width: 100%;

  margin: 0

}

.gender-subcategories img{

  width: 100px;

  height: 100px;

  margin: 0 auto;

  border-radius: 100%;

}

.gender-subcategories span{

  font-size: 10px;

  font-weight: 700;

  text-align: center;

  display: block;

  color: #000

}

.p-tab__group:not(.-open) .p-tab__tool{

  display: none;

}

.p-tab__tool{

  position: relative;

  width: 100%;

  display: flex;

  align-items: center;

  gap: 8px;

}

.slide-scrollbar{

  width: calc(100% - 36px);

  height: 8px;

  background-color: #fff;

  border-radius: 20px;

}

.p-tab__tool .swiper-scrollbar-drag{

  margin: 0

}

.slide-prev{

  width: 0;

  height: 0;

  border-top: 6px solid transparent;

  border-bottom: 6px solid transparent;

  border-right:8px solid rgba(0,0,0,.5);

  cursor: pointer;

}

.slide-next{

  width: 0;

  height: 0;

  border-top: 6px solid transparent;

  border-bottom: 6px solid transparent;

  border-left: 8px solid rgba(0, 0, 0, .5);

  cursor: pointer;

}

[data-module] .slide-next.swiper-button-disabled,
[data-module] .slide-prev.swiper-button-disabled{

  display: none;

}



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

  .p-tab__item{

    padding: 5px;

    width: 33.33%;

    flex: inherit

  }

  .eng{

    font-size: 2.5rem;

  }

  .mv03{

    margin-bottom: 60px;

  }

  .p-pickUp{

    margin-bottom: 50px;

    padding: 0 15px

  }
.p-pickUp .block4_2_fx{
  overflow: hidden;
}
.p-pickUp .detail_button{
  line-height: 0;
}

  .swipeAble .slide-scrollbar{

    display: none;

  }



}



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

  .eng{

    font-size: 18px;

  }

}

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

  #bredcamb .bredcamb-list

  {

    padding-left:20px ;

  }

  .mv04

  {

    height:160px;

  }

  #demo13 img

  {

    width: 100%;

    height:100%;

    object-fit: cover;

  }

  .cssgrid, .cssgrid--3{

    --gap: 15px;

    --col: 2

  }

}



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

  #bredcamb .bredcamb-list

  {

    padding-left:40px ;

  }

  .mv04

  {

    height:200px;

  }

  #demo13 img

  {

    width: 100%;

    height:100%;

    object-fit: cover;

  }

}

[class].u-m_t0{

  margin-top: 0;

}

[class].u-m_b20{

  margin-bottom: 20px

}

[class].u-ta_right{

  text-align: right;

}

[class].u-fs_14{

  font-size: 14px;

}

/*header mega menu*/

#header{

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  z-index: 1000;

}

.megaMenu{

  position: fixed;

  width: 100%;

  left: 0;

  background: rgba(0,0,0,.9);

  height: 100%;

  z-index: 999;

  transition: .3s;

  left: 0;

  opacity: 0;

  visibility: hidden;

  top: 0;

  overflow: auto;

}



.megaMenu__inner{

  padding: 40px 15px;

  display: flex;;

  flex-wrap: wrap;

  gap: 40px;

}

.megaMenu .megaMenu__item{

  opacity: 0;

}

.megaMenu__item{

  width: calc((100% - 210px)/5)

}

.megaMenu__list li a{

  color: #fff;

  font-size: 14px;

  padding: 8px 0;

  display: block;

  transform: translateX(0);

  transition: all .3s;

}

.megaMenu__list li a:hover{

  transform: translateX(5px);

}

.megaMenu__title{

  font-size: 18px;

  color: #00ae68;

  font-weight: bold;

  margin-bottom: 10px;

  line-height: 1.4;

}



.megaMenu__row + .megaMenu__row{

  margin-top: 20px;

}

header .overlay {

  position: fixed;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  width: 100%;

  left: 0;

  top: 0;

  height: 0;

  overflow: hidden;

  z-index: 990;

}

header .overlay .bg {

  opacity: 0;

  background: rgba(0,0,0,.8);

  -webkit-box-flex: 1;

  -ms-flex: 1 0 0px;

  flex: 1 0 0px

}



.is-open .overlay {

  height: 100%;

}



.is-open .overlay .bg {

  background: rgba(0,0,0,.8);

  opacity: 1

}

.is-open .overlay .bg:nth-child(1) {

  -webkit-transition: background-color .5s,opacity .6s .28s;

  transition: background-color .5s,opacity .6s .28s

}

.is-open .overlay .bg:nth-child(2) {

  -webkit-transition: background-color .5s,opacity .6s .21s;

  transition: background-color .5s,opacity .6s .21s

}

.is-open .overlay .bg:nth-child(3) {

  -webkit-transition: background-color .5s,opacity .6s .14s;

  transition: background-color .5s,opacity .6s .14s

}

.is-open .overlay .bg:nth-child(4) {

  -webkit-transition: background-color .5s,opacity .6s 70ms;

  transition: background-color .5s,opacity .6s 70ms

}

.is-open .overlay .bg:nth-child(5) {

  -webkit-transition: background-color .5s,opacity .6s 0ms;

  transition: background-color .5s,opacity .6s 0ms

}

.is-open .overlay .bg.is-active {

  background: #000

}

.is-open .megaMenu .megaMenu__item {

  -webkit-animation: l-header_gobal_fadein 1.5s forwards;

  animation: l-header_gobal_fadein 1.5s forwards

}

.is-open .megaMenu {

  visibility: visible;

  -webkit-animation: l-header_gobal_fadein .5s forwards;

  animation: l-header_gobal_fadein .5s forwards;

}

.is-open .overlay {

  -webkit-animation: l-header_gobal_fadein .5s forwards;

  animation: l-header_gobal_fadein .5s forwards

}



.is-close .megaMenu {

  -webkit-animation: l-header_gobal_fadehide 1.5s forwards;

  animation: l-header_gobal_fadehide 1.5s forwards

}

.is-close .megaMenu .megaMenu__item {

  -webkit-animation: l-header_gobal_fadeout 1.5s forwards;

  animation: l-header_gobal_fadeout 1.5s forwards

}

.is-close .overlay {

  -webkit-animation: l-header_gobal_fadehide 1.5s forwards;

  animation: l-header_gobal_fadehide 1.5s forwards

}

.is-close .overlay .bg {

  opacity: 0

}

.is-close .overlay .bg:nth-child(1) {

  -webkit-transition: opacity 1s 0ms;

  transition: opacity 1s 0ms

}

.is-close .overlay .bg:nth-child(2) {

  -webkit-transition: opacity 1s 50ms;

  transition: opacity 1s 50ms

}

.is-close .overlay .bg:nth-child(3) {

  -webkit-transition: opacity 1s .1s;

  transition: opacity 1s .1s

}

.is-close .overlay .bg:nth-child(4) {

  -webkit-transition: opacity 1s .15s;

  transition: opacity 1s .15s

}

.is-close .overlay .bg:nth-child(5) {

  -webkit-transition: opacity 1s .2s;

  transition: opacity 1s .2s

}

.hamburger-icon-under,

.hamburger-icon span{

  transition: all .3s;

}

.hamburger-icon span{

  position: relative;

}

.close-modal{

  position: fixed;

  top: 20px;

  right: 20px;

  display: block;

  width: 50px;

  height: 50px;

  z-index: 998;

  cursor: pointer;

}

.close-modal:before, .close-modal:after{

  content: '';

  width: 50px;

  height: 3px;

  background: #fff;

  display: block;

  position: absolute;

  right: 0;

  top: 20px;

}

.close-modal:before{

  transform: rotate(46deg);

}

.close-modal:after{

  transform: rotate(-46deg);

}

.goods_top .wrap_flex {

  display: flex;

  align-items: baseline;

  position: relative;

}



/* CSS */

.mega-menu {

  position: fixed;

  top: 0; left: 0;

  width: 100vw; height: 100vh;

  opacity: 0;

  visibility: hidden;

  transform: translateY(-20px);

  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;

  z-index: 999;

  display: flex;

  flex-direction: column;

}



.mega-menu.open {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.mega-menu__inner {

  flex: 1;

  display: flex;

  background: linear-gradient(

    90deg,

    #F8DADA 0%,

    #DAF8F8 100%

  );

  overflow-y: auto;

}



.mega-menu__col {

  width: 50%;

  padding: 60px;

  box-sizing: border-box;

  background: transparent;

}



.mega-menu__title {

  font-size: 24px;

  margin-bottom: 20px;

  font-weight: bold;

  cursor: pointer;

  display: inline-block;

  transition: transform 0.2s ease-out;

}



.mega-menu__title:hover {

  transform: scale(0.95);

}



.mega-menu__title .ja {

  font-size: 0.75em;

  color: #555;

  margin-left: 8px;

}



.mega-menu__list {

  margin: 0 0 40px 0;

  padding: 0;

}



.mega-menu__list li {

  margin-bottom: 10px;

  font-size: 16px;
  padding-left: 16px;
  list-style: none;
  position: relative;

}

.mega-menu__list li:before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.mega-menu__list li a {

  display: inline-block;

  transition: transform 0.2s ease-out;

}



.mega-menu__list li a:hover {

  transform: scale(1.05);

}



.mega-menu__divider {

  border: none;

  border-bottom: 1px dashed #aaa;

  margin: 40px 0;

}



.mega-menu__footer {

  display: flex;

  justify-content: flex-start;

  gap: 20px;
  padding-bottom: 20px;

}



.mega-menu__footer a {

  display: inline-block;

  padding: 20px 55px;

  font-size: 18px;

  text-decoration: none;

  border-radius: 4px;

  text-align: center;

}



.mega-menu .close-modal {

  transition: background-color 0.2s ease, transform 0.2s ease;

}



.mega-menu .close-modal:hover {

  transform: scale(0.95);

}



.mega-menu .close-modal:before, .close-modal:after {

    background: #333333;

}

@media screen and (min-width: 769px) and (max-width: 1024px){
  .mega-menu__footer a {
    padding: 15px 30px
  }
}

@media (max-width: 768px) {

  .mega-menu__col {
    padding: 40px 20px;

  }
  .mega-menu__col.mega-menu__col--last{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px
  }
  .mega-menu__inner{
    flex-wrap: wrap
  }
  .mega-menu__title {

    font-size: 20px;

  }

  .mega-menu__list li {

    font-size: 15px;

  }

  .mega-menu__title .ja{
    display: block;
    margin: 0
  }

  .mega-menu__footer{
   max-width: 480px;
   width: 100%;
  }

  .mega-menu__footer > div{
    width: calc((100% - 20px)/2)
  }

  .mega-menu__footer a {

    width: 100%;
    padding: 15px 25px;
    text-align: center;

  }

}


@media (max-width: 480px) {

  .mega-menu__col {

    padding: 30px 20px 0;

  }

  .mega-menu__title {

    font-size: 18px;

    margin-bottom: 15px;

  }

  .mega-menu__list li {

    margin-bottom: 8px;

    font-size: 14px;

  }
  
  .mega-menu__footer a{
    font-size: 14px;
    padding-left: 10px;
  }

  .close-modal {

    width: 40px; height: 40px;

    top: 15px; right: 15px;

  }

  .close-modal:before,

  .close-modal:after {

    width: 80%; height: 3px;

  }

}

@media (max-width: 399px) {
  .mega-menu__col{
    width: 100%
  }
  .mega-menu__inner{
    flex-wrap: wrap
  }
  .mega-menu__title .ja{
    display: inline-block;
  }
  .mega-menu__col{
    padding: 0 20px;
  }
  .mega-menu__col:first-child{
    padding-top: 40px;
  }
  .mega-menu__list{
    margin-bottom: 30px;
  }
}

@-webkit-keyframes l-header_gobal_fadehide {

  0% {

    height: 100%;

    opacity: 1

  }

  99% {

    height: 100%;

    opacity: 0

  }

  100% {

    height: 0;

    opacity: 0

  }

}

@keyframes l-header_gobal_fadehide {

  0% {

    height: 100%;

    opacity: 1

  }

  99% {

    height: 100%;

    opacity: 0

  }

  100% {

    height: 0;

    opacity: 0

  }

}



@-webkit-keyframes l-header_gobal_fadein {

  0% {

    opacity: 0

  }

  100% {

    opacity: 1

  }

}

@keyframes l-header_gobal_fadein {

  0% {

    opacity: 0

  }

  100% {

    opacity: 1

  }

}

@-webkit-keyframes l-header_gobal_fadeout {

  0% {

    opacity: 1

  }

  100% {

    opacity: 0

  }

}

@keyframes l-header_gobal_fadeout {

  0% {

    opacity: 1

  }

  100% {

    opacity: 0

  }

}



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

  .megaMenu__item{

    width: 100%

  }

  .close-modal{

    top:5px;

    right: 10px;

    width: 35px;

    height: 35px;

  }

  .close-modal:before, .close-modal:after{

    width: 35px;

    top: 17px;

  }

  .megaMenu__inner{

    padding: 50px 0;

    gap: 0

  }

  .megaMenu__title{

    padding: 10px 15px;

    background-color: #fff;

    position: relative;

    margin-bottom: 0;

    font-size: 16px

  }

  .megaMenu__title:before,.megaMenu__title:after{

    content: "";

    background-color: #00ae68;

    display: block;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    transition: all .3s;

  }

  .megaMenu__title.-active:after{

    opacity: 0;

  }

  .megaMenu__title:before{

    width: 20px;

    height: 2px;

    right: 15px

  }

  .megaMenu__title:after{

    height: 20px;

    width: 2px;

    right: 24px

  }

  .megaMenu__list li a{

    padding-left: 15px;

    padding-right: 15px;

  }

  .megaMenu__list{

    display: none;

  }

  .megaMenu__item + .megaMenu__item,

  .megaMenu__row + .megaMenu__row{

    margin-top: 0;

    border-top: 1px solid #00ae68

  }

  .is-open #header{

    opacity: .9;

  }

  .megaMenu__item:not(:has(.megaMenu__title)) {

    margin-top: 10px;

    border-top: 0;

  }

  .megaMenu__item:not(:has(.megaMenu__title)) .megaMenu__list{

    display: block;

  }

}



.col3 tbody tr > th:nth-child(2), .col3 tbody tr > th:nth-child(3){

  width: 40%

}



.col5 tbody tr > th:not(:first-child){

  width: 21.25%

}
.form-group{
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
  padding-left: calc(.8em + 20px);
}
.form-group input{
  display: none;
}
.form-group input + label{
  position: relative;
  padding-left: 22px;
  cursor: pointer;
  display: block;
}
.form-group input + label:before, .form-group input + label:after{
  content:"";
  display: block;
  line-height: 1;
  position: absolute;
}
.form-group input + label:before{
  width: 16px;
  height: 16px;
  border-radius: 100%;
  border: 1px solid #ccc;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.form-group input:checked + label:before{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg id='Group_3' data-name='Group 3' transform='translate(-291 -250)'%3E%3Cg id='Ellipse_2' data-name='Ellipse 2' transform='translate(291 250)' fill='%23fff' stroke='%23ccc' stroke-width='1'%3E%3Ccircle cx='8' cy='8' r='8' stroke='none'/%3E%3Ccircle cx='8' cy='8' r='7.5' fill='none'/%3E%3C/g%3E%3Ccircle id='Ellipse_1' data-name='Ellipse 1' cx='5' cy='5' r='5' transform='translate(294 253)' fill='%23c00'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center / contain;
}
@media screen and (max-width: 767px){
  .form-group {
    padding-left: 0;
  }
  .mv03 .slide-scrollbar{
    display: none;
  }
  .mv03 .top-swiper-tool{
    display: none;
  }
  .slide-caption{
    text-align: left;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 15px;
    color: #fff;
    background-color: rgba(0,0,0,.3);
    width: 100%
  }
  .mv03 .thumb-title{
    font-size: 18px;
    text-align: left;
  }
}
.p-tab__tool{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  left: 0;
  z-index: 20;
}
.slide-scrollbar{
  display: none;
}
[data-module] .slide-next,
[data-module] .slide-prev {
  width: 48px;
  height: 48px;
  border: 1px solid #E3E3E3;
  background: #fff;
  border-radius: 50%;
  backdrop-filter: blur(10px);
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
  box-sizing: border-box;
  transition: all 0.3s;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  [data-module] .slide-next:hover,
[data-module] .slide-prev:hover {
    background: rgb(4, 174, 184);
    border-color: rgb(4, 174, 184);
    outline: 9px solid #DFDFEB;
  }
  [data-module] .slide-next:hover:after, [data-module] .slide-prev:hover:after {
      background-image: url(/assets/img/ico_arrow_01.svg);
  }
}
@media screen and (max-width: 767px) {
  [data-module] .slide-next,
[data-module] .slide-prev {
	width: 35px;
	height: 35px;
	opacity: .8;
  }
}
[data-module] .slide-next:after,
[data-module] .slide-prev:after {
  content: "";
  width: 28px;
  height: 28px;
  background: url(/assets/img/ico_arrow_03.svg) no-repeat 0 0/100%;
  transition: all 0.3s;
}
@media screen and (max-width: 767px) {
  [data-module] .slide-next:after,
[data-module] .slide-prev:after {
    width: 20px;
    height: 20px;
  }
}
[data-module] .slide-next {
  right: 12px;
}
[data-module] .slide-prev {
  left: 12px;
}
[data-module] .slide-prev:after {
    transform: rotate(180deg);
}
[data-module] .swiper-button-lock{
  display: none;
}
.genre-sm .l-inner{
  max-width: 1150px;
}