@charset "UTF-8";

.mainContents{
padding: 0;
}

.mainContents main{
padding: 0;
margin: 0;
font-size: 100%;
overflow: hidden;
}
@media (min-width: 769px) and (max-width: 1450px) {
.mainContents main{
font-size: calc(100vw / 1399 * 16);
}
}
@media screen and (max-width: 768px) {
.mainContents main {
font-size: calc(100vw / 750 * 32);
}
}

.mainContents ul {
padding-inline-start: 0;
}

.mainContents li {
list-style-type: none;
}

.mainContents h2,
.mainContents h3,
.mainContents p {
margin: 0;
}

.mainContents img {
width: 100%;
vertical-align: bottom;
}
@media screen and (max-width: 768px) {
.mainContents img {
width: 100%;
height: auto;
}
}

.mainContents a:hover {
opacity: 0.7;
}

.mainContents .forSP {display: none !important;}
.mainContents .forPC {display: block !important;}
@media screen and (max-width: 768px) {
.mainContents .forSP {display: block !important;}
.mainContents .forPC {display: none !important;}
}

/* fadeの設定 */
.mainContents .fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.75s, transform 0.75s;
}
.mainContents .fade.active {
opacity: 1;
transform: translateY(0px);
}
.mainContents .fadein {
opacity: 0;
}
.mainContents .fadein.active {
opacity: 1;
animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* parts */
.mainContents .wrap1240{
width: 1240px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1450px) {
.mainContents .wrap1240{
width: 92%;
overflow: hidden;
}
}
@media screen and (max-width: 768px) {
.mainContents .wrap1240{
width: 92%;
overflow: hidden;
}
}

.mainContents .wrap1140{
width: 1140px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1450px) {
.mainContents .wrap1140{
width: calc(100vw / 1399 * 1140);
}
}
@media screen and (max-width: 768px) {
.mainContents .wrap1140{
width: 100%;
overflow: hidden;
}
}

.mainContents .wrap840{
width: 840px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1450px) {
.mainContents .wrap840{
width: calc(100vw / 1399 * 840);
}
}
@media screen and (max-width: 768px) {
.mainContents .wrap840{
width: 84%;
overflow: hidden;
}
}

.mainContents .p_re{
position: relative;
}

/* clearFix */
.mainContents .cf:after{
content:"."; 
display:block; 
height:0; 
clear:both; 
visibility:hidden;
}

/* ===========================================
* fadeの設定
* ======================================== */
.mainContents .fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.75s, transform 0.75s;
}
.mainContents .fade.active {
opacity: 1;
transform: translateY(0px);
}

.mainContents .fade2 {
opacity: 0;
transform: translateY(80px);
transition: opacity 0.75s, transform 1s;
}
.mainContents .fade2.active {
opacity: 1;
transform: translateY(0px);
}

.mainContents .fade3 {
opacity: 0;
transform: translateY(80px);
transition: opacity 3s, transform 1s;
}
.mainContents .fade3.active {
opacity: 1;
transform: translateY(0px);
}

.mainContents .fade_r {
opacity: 0;
transform: translateX(100px);
transition: opacity 0.75s, transform 1s;
}
.mainContents .fade_r.active {
opacity: 1;
transform: translateX(0px);
}

.mainContents .fade_l {
opacity: 0;
transform: translateX(-100px);
transition: opacity 0.75s, transform 1s;
}
.mainContents .fade_l.active {
opacity: 1;
transform: translateX(0px);
}

.mainContents .fade_l2 {
opacity: 0;
transform: translateX(-200px);
transition: opacity 0.75s, transform 1s;
}
.mainContents .fade_l2.active {
opacity: 1;
transform: translateX(0px);
}

.mainContents .zoomup {
  opacity: 0;
  transform: scale(0);
}
.mainContents .zoomup.active {
  animation: fadeInScale 1s ease forwards;
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.1); /* 110% に拡大 */
  }
  100% {
    opacity: 1;
    transform: scale(1);   /* 100% に戻す */
  }
}

/* ===========================================
* animeの設定
* ======================================== */

.mainContents .anime_wrap1{
  position: absolute;
  display: block;
  width: 160px;
  height: 110px;
	z-index: 200;
	top: 100px;
  left: 60px;
}
@media (min-width: 769px) and (max-width: 1450px) {
.mainContents .anime_wrap1{
	top: calc(100vw / 1399 * 100);
  left: calc(100vw / 1399 * 50);
}
}
@media screen and (max-width: 768px) {
.mainContents .anime_wrap1{
	width: 30%;
	top: 9.5vw;
	left: -3.5vw;
}
}

.mainContents .anime_wrap1 .anime{
  max-width: 160px; /* 横幅の最大値 */
  transform: translate3d(0, 0, 0); /* animationの初期値 */
  overflow: hidden; /* 余分な要素を隠す */
  position: relative; /* :before の基準値 */
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .anime_wrap1 .anime {
    width: 100%; /* 親幅に合わせる */
    max-width: 160px; /* 元の基準値を保つ */
    transform-origin: top left; /* 縮小の基準点を調整（必要に応じ変更） */
    transform: translate3d(0,0,0) scale(1.0); /* ← ここで縮小 */
  }
}
@media screen and (max-width: 768px) {
  .mainContents .anime_wrap1 .anime {
    width: 100%; /* 親幅に合わせる */
    max-width: 160px; /* 元の基準値を保つ（不要なら削除） */
    transform-origin: top left; /* 縮小の基準点を調整（必要に応じ変更） */
    transform: translate3d(0,0,0) scale(0.9); /* ← ここで縮小 */
  }
}

.mainContents .anime_wrap1 .anime:before{
  content: '';
	position: absolute;
  top: 0;
  rightt: 0 !important;
	display: block;
  width: 100%;
  background: url(/products/special/wbr/images/hw_illsut01.png) no-repeat 0 0;
  background-size: contain;
  padding-top: 412.5%; /* 画像の縦幅：660/160*100 */
	animation: sprite-anime 2s steps(6) infinite; /* アニメーション設定 */
}
.mainContents .anime_wrap1 .anime:after{
  content: '';
  display: block;
  padding-top: 68.75%; /* 見た目上の高さ：110/160*100 */
}

.mainContents .anime_wrap2{
  position: absolute;
  display: block;
  width: 160px;
  height: 110px;
	z-index: 200;
	top: 0;
  right: 40px;
}
@media (min-width: 769px) and (max-width: 1450px) {
.mainContents .anime_wrap2{
	top: calc(100vw / 1399 * -50);
  right: calc(100vw / 1399 * 0);
}
}
@media screen and (max-width: 768px) {
.mainContents .anime_wrap2{
	width: 30%;
	top: 25vw;
	left: -3vw;
}
}
.mainContents .anime_wrap2 .anime{
  max-width: 160px; /* 横幅の最大値 */
  transform: translate3d(0, 0, 0); /* animationの初期値 */
  overflow: hidden; /* 余分な要素を隠す */
  position: relative; /* :before の基準値 */
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .anime_wrap2 .anime {
    width: 100%; /* 親幅に合わせる */
    max-width: 160px; /* 元の基準値を保つ */
    transform-origin: top left; /* 縮小の基準点を調整（必要に応じ変更） */
    transform: translate3d(0,0,0) scale(0.8); /* ← ここで縮小 */
  }
}
@media screen and (max-width: 768px) {
  .mainContents .anime_wrap2 .anime {
    width: 100%; /* 親幅に合わせる */
    max-width: 160px; /* 元の基準値を保つ（不要なら削除） */
    transform-origin: top left; /* 縮小の基準点を調整（必要に応じ変更） */
    transform: translate3d(0,0,0) scale(0.9); /* ← ここで縮小 */
  }
}

.mainContents .anime_wrap2 .anime:before{
  content: '';
	position: absolute;
  top: 0;
  rightt: 0 !important;
	display: block;
  width: 100%;
  background: url(/products/special/wbr/images/hw_illsut04.png) no-repeat 0 0;
  background-size: contain;
  padding-top: 412.5%; /* 画像の縦幅：660/160*100 */
	animation: sprite-anime 2s steps(6) infinite; /* アニメーション設定 */
}
.mainContents .anime_wrap2 .anime:after{
  content: '';
  display: block;
  padding-top: 68.75%; /* 見た目上の高さ：110/160*100 */
}

.mainContents .anime_wrap3{
  position: absolute;
  display: block;
  width: 160px;
  height: 110px;
	z-index: 200;
	top: 210px;
  right: -35px;
}
@media (min-width: 769px) and (max-width: 1450px) {
.mainContents .anime_wrap3{
	top: calc(100vw / 1399 * 220);
  right: calc(100vw / 1399 * -145);
}
}
@media screen and (max-width: 768px) {
.mainContents .anime_wrap3{
	width: 30%;
	top: 67vw;
	left: 25vw;
}
}
.mainContents .anime_wrap3 .anime{
  max-width: 160px; /* 横幅の最大値 */
  transform: translate3d(0, 0, 0); /* animationの初期値 */
  overflow: hidden; /* 余分な要素を隠す */
  position: relative; /* :before の基準値 */
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .anime_wrap3 .anime {
    width: 100%; /* 親幅に合わせる */
    max-width: 160px; /* 元の基準値を保つ */
    transform-origin: top left; /* 縮小の基準点を調整（必要に応じ変更） */
    transform: translate3d(0,0,0) scale(0.6); /* ← ここで縮小 */
  }
}
@media screen and (max-width: 768px) {
  .mainContents .anime_wrap3 .anime {
    width: 100%; /* 親幅に合わせる */
    max-width: 160px; /* 元の基準値を保つ（不要なら削除） */
    transform-origin: top left; /* 縮小の基準点を調整（必要に応じ変更） */
    transform: translate3d(0,0,0) scale(0.6); /* ← ここで縮小 */
  }
}

.mainContents .anime_wrap3 .anime:before{
  content: '';
	position: absolute;
  top: 0;
  rightt: 0 !important;
	display: block;
  width: 100%;
  background: url(/products/special/wbr/images/hw_illsut06.png) no-repeat 0 0;
  background-size: contain;
  padding-top: 412.5%; /* 画像の縦幅：660/160*100 */
	animation: sprite-anime 2s steps(6) infinite; /* アニメーション設定 */
}
.mainContents .anime_wrap3 .anime:after{
  content: '';
  display: block;
  padding-top: 68.75%; /* 見た目上の高さ：110/160*100 */
}

.mainContents .anime_wrap4{
  position: absolute;
  display: block;
  width: 160px;
  height: 110px;
	z-index: 200;
	top: 420px;
  right:70px;
}
@media (min-width: 769px) and (max-width: 1450px) {
.mainContents .anime_wrap4{
	top: calc(100vw / 1399 * 390);
  right: calc(100vw / 1399 * 20);
  height: auto;
  width: 160px; /* 元のピクセル幅を維持（scaleで縮小する） */
  }
}
@media screen and (max-width: 768px) {
.mainContents .anime_wrap4 {
  top: 52vw;
  right: -3vw;
  height: auto;
  width: 160px; /* 元のピクセル幅を維持（scaleで縮小する） */
  }
}

.mainContents .anime_wrap4 .anime{
  max-width: 160px; /* 横幅の最大値 */
  transform: translate3d(0, 0, 0); /* animationの初期値 */
  overflow: hidden; /* 余分な要素を隠す */
  position: relative; /* :before の基準値 */
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .anime_wrap4 .anime {
    width: 100%; /* 親幅に合わせる */
    max-width: 160px; /* 元の基準値を保つ */
    transform-origin: top left; /* 縮小の基準点を調整（必要に応じ変更） */
    transform: translate3d(0,0,0) scale(0.8); /* ← ここで縮小 */
  }
}
@media screen and (max-width: 768px) {
  .mainContents .anime_wrap4 .anime {
    width: 100%; /* 親幅に合わせる */
    max-width: 160px; /* 元の基準値を保つ（不要なら削除） */
    transform-origin: top left; /* 縮小の基準点を調整（必要に応じ変更） */
    transform: translate3d(0,0,0) scale(0.6); /* ← ここで縮小 */
  }
}

.mainContents .anime_wrap4 .anime:before{
  content: '';
	position: absolute;
  top: 0;
  rightt: 0 !important;
	display: block;
  width: 100%;
  background-size: contain;
  padding-top: 825%; /* 画像の縦幅：1320/160*100 */
	animation: sprite-anime 2s steps(6) infinite; /* アニメーション設定 */
  background: url(/products/special/wbr/images/hw_illsut03.png) no-repeat 0 0;
}
.mainContents .anime_wrap4 .anime:after{
  content: '';
  display: block;
  padding-top: 137.5%; /* 見た目上の高さ：220/160*100 */
}

@keyframes sprite-anime {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100%);
  }
}

.mainContents .fuwafuwa {
animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
	0% {
	transform: translateY(-5%);
	}
	100% {
	transform: translateY(5%);
  }
}


/* ===========================================
* kvArea
* ======================================== */
.mainContents .kvArea {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

.mainContents .kvArea .kv_img1{
  width: 100%;
}

@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .kvArea .kv_img1{
  }
}
@media screen and (max-width: 768px) {
  .mainContents .kvArea .kv_img1{
  }
}

.mainContents .kvArea .kv_img2{
  max-width: 148px;
  position: absolute;
  top: 17.6%;
  left: 36.5%;
  /* opacity: 0; */
  z-index: 2;
    /*
  ロゴのフェードインアニメーション設定
  最初は透明にしておく
  2秒かけてフェードイン、2秒遅延して開始
  */
  opacity: 0;
  animation: logo_fadein 2s ease forwards;
  /* animation-delay: 2s; */
}
.mainContents .kvArea .kv_img2 .kv_imgBox{
  width: 100%;
}
.mainContents .kvArea .kv_img2 .kv_imgBox .kv_img{
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1450px) {
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .kvArea .kv_img2{
    max-width: 10.2068965517vw;
  }
}
@media screen and (max-width: 768px) {
  .mainContents .kvArea .kv_img2{
    max-width: 21.6vw;
    top: 17.6%;
    left: 37.4%;
  }
}

.mainContents .kvArea .kv_img3{
  max-width: 303px;
  position: absolute;
  top: 8.7%;
  left: 38.2%;
  /* opacity: 0; */
  z-index: 1;
}
.mainContents .kvArea .kv_img3 .kv_imgBox.--top{
    /*
  ロゴ背景用のフェードインアニメーション設定
  最初は透明にしておく
  2秒かけてフェードイン、4.3秒遅延して開始
  */
  opacity: 0;
  animation: logo_fadein 2s ease-out forwards;
  /* animation-delay: 2.3s; */
}
.mainContents .kvArea .kv_img2 .kv_imgBox{
  width: 100%;
}
.mainContents .kvArea .kv_img2 .kv_imgBox .kv_img{
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1451px) {
  .mainContents .kvArea .kv_img3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .kvArea .kv_img3{
    max-width: 20.8965517241vw;
  }
}
@media screen and (max-width: 768px) {
  .mainContents .kvArea .kv_img3{
    max-width: 44.2666666667vw;
    top: 50%;
    left: 24%;
    transform: translateY(-50%);
  }
}

.mainContents .kvArea .kv_img4{
  position: absolute;
  max-width: 44.6896551724vw;
  left: 2%;
  bottom: 0;
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .kvArea .kv_img4{
  }
}
@media screen and (max-width: 768px) {
  .mainContents .kvArea .kv_img4{
    max-width: 46.1333333333vw;
    bottom: auto;
    top: 3.2%;
    left: 1.07%;
  }
}

.mainContents .kvArea .kv_img5{
  position: absolute;
  width: 45.724137931vw;
  bottom: -2.85%;
  right: -1%;
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .kvArea .kv_img5{
  }
}
@media screen and (max-width: 768px) {
  .mainContents .kvArea .kv_img5{
    width: 47.2vw;
    bottom: auto;
    top: -2.16%;
    right: -3%;
  }
}

@keyframes kv_fade1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes kv_fade2 {
  0% {transform: translateY(100%); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}

@keyframes kv_fade3 {
  0% {transform: translateY(-100%); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}

@keyframes kv_fade4 {
  0% {transform:scale(0); opacity: 0;}
  80% {transform:scale(1.1); opacity: 1;}
  100% {transform: scale(1); opacity: 1;}
}



/* ===========================================
* ゆげ
* ======================================== */
@keyframes logo_fadein {
  to {
    opacity: 1;
  }
}
/*
* ロゴ用のDIV
* JSでランダムな位置に生成しているので、大きめに設定
* 親要素でoverflow:hiddenにしておくこと
*/
#steam_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: steam_fadeOut 2s ease forwards;
  animation-delay: 4s; /* フェードアウト開始秒数 */
}
/* フェードアウトのアニメーション */
@keyframes steam_fadeOut {
  to {
    opacity: 0;
  }
}
/* ゆげ画像。  */
#steam_box img {
  position: absolute;
  width: 300vw;
  animation: scale_anime 5s linear infinite;
}
/*
* 各画像のアニメーション遅延
* JSの22行目で生成する画像数に合わせて調整すること
*/
#steam_box img:nth-of-type(0) {animation-delay: 0s};
#steam_box img:nth-of-type(1) {animation-delay: -0.5s}
#steam_box img:nth-of-type(2) {animation-delay: -1s}
#steam_box img:nth-of-type(3) {animation-delay: -1.5s}
#steam_box img:nth-of-type(4) {animation-delay: -2s}
#steam_box img:nth-of-type(5) {animation-delay: -2.5s}
#steam_box img:nth-of-type(6) {animation-delay: -3s}
#steam_box img:nth-of-type(7) {animation-delay: -3.5s}
#steam_box img:nth-of-type(8) {animation-delay: -4s}
#steam_box img:nth-of-type(9) {animation-delay: -4.5s}
#steam_box img:nth-of-type(10) {animation-delay: -5s}
#steam_box img:nth-of-type(11) {animation-delay: -5.5s}
#steam_box img:nth-of-type(12) {animation-delay: -6s}
#steam_box img:nth-of-type(13) {animation-delay: -6.5s}
#steam_box img:nth-of-type(14) {animation-delay: -7s}
#steam_box img:nth-of-type(15) {animation-delay: -7.5s}
/* ゆげ画像のアニメーション。特にいじる必要なし */
@keyframes scale_anime {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    10% {
        opacity: .2;
    }
    50% {
        opacity: 1;
    }
    90% {
        opacity: .2;
    }
    100% {
        opacity: 0;
        transform: scale(4);
    }
}


/* ===========================================
* nav
* ======================================== */
.mainContents .nav {
  padding: 0 40px;
  background-color: #074800;
}
.mainContents .nav-inner {
  width: 100%;
  max-width: 1110px;
  margin: 0 auto;
}
.mainContents .nav-list {
  display: flex;
  align-items: center;
  margin: 0;
}
.mainContents .nav-list-item {
  padding: 2vw 0 2.4827586207vw;
  margin: 0 1.724137931vw;
}
.mainContents .nav-list-item:first-of-type {
  margin-left: 0;
  margin-right: 0;
}
.mainContents .nav-list-item:nth-of-type(2),
.mainContents .nav-list-item:nth-of-type(3),
.mainContents .nav-list-item:nth-of-type(4),
.mainContents .nav-list-item:nth-of-type(5) {
  margin-right: 0;
}
.mainContents .nav-list-item:last-of-type {
  padding-left: 1.724137931vw;
  padding-right: 1.724137931vw;
  margin-right: 0;
  background-color: #aef055;
}
.mainContents .nav-list-item__link {
  display: block;
  width: 100%;
}
.mainContents .nav-list-item__link__img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .mainContents .nav {
    padding: 0;
  }
  .mainContents .nav-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(2, auto);
    overflow: hidden;
  }
  .mainContents .nav-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4.4vw 0 1.8666666667vw;
    margin: 0;
    max-height: 93.77px;
  }
  .mainContents .nav-list-item:first-of-type {
    margin-left: 0;
    margin-right: 0;
    border-right: 2px solid #aef055;
  }
  .mainContents .nav-list-item:nth-of-type(2),
  .mainContents .nav-list-item:nth-of-type(4),
  .mainContents .nav-list-item:nth-of-type(5) {
    border-right: 2px solid #aef055;
  }
  .mainContents .nav-list-item:nth-of-type(2),
  .mainContents .nav-list-item:nth-of-type(3),
  .mainContents .nav-list-item:nth-of-type(4),
  .mainContents .nav-list-item:nth-of-type(5) {
    margin-right: 0;
  }
  .mainContents .nav-list-item:last-of-type {
    padding: 2.5333333333vw 1.3333333333vw;
    border-top: 2px solid #aef055;
  }
  .mainContents .nav-list-item:nth-of-type(4),
  .mainContents .nav-list-item:nth-of-type(5) {
    border-top: 2px solid #aef055;
  }
  .mainContents .nav-list-item__link {
    width: fit-content;
  }
  .mainContents .nav-list-item:last-of-type .nav-list-item__link {
    margin-right: -25px;
  }

  .mainContents .nav-list-item:first-of-type .nav-list-item__link__img {
    max-width: 20.2666666667vw;
  }
  .mainContents .nav-list-item:nth-of-type(2) .nav-list-item__link__img {
    max-width: 28.1333333333vw;
  }
  .mainContents .nav-list-item:nth-of-type(3) .nav-list-item__link__img {
    max-width: 30.5333333333vw;
  }
  .mainContents .nav-list-item:nth-of-type(4) .nav-list-item__link__img {
    max-width: 25.4666666667vw;
  }
  .mainContents .nav-list-item:nth-of-type(5) .nav-list-item__link__img {
    max-width: 19.8666666667vw;
  }
  .mainContents .nav-list-item:last-of-type .nav-list-item__link__img {
    max-width: 22vw;
  }
}


/* ===========================================
* top-area
* ======================================== */
.mainContents .top-area {
  padding-top: 111px;
  padding-bottom: 80px;
}
.mainContents .area-wrap {
  padding-left: 40px;
  padding-right: 40px;
}
@media screen and (max-width: 768px) {
  .mainContents .area-wrap {
    padding-left: 5.3333333333vw;
    padding-right: 5.3333333333vw;
  }
}
.mainContents .inner {
  width: 100%;
  max-width: 1110px;
  margin: 0 auto;
}
.mainContents .top-box {
  max-width: 420px;
  margin: 0 auto;
  position: relative;
}
.mainContents .top-sub-img-box {
  max-width: 345px;
  position: absolute;
  top: 26%;
  left: -93%;
}
@media screen and (max-width: 1000px) {
  .mainContents .top-sub-img-box {
    left: -82%;
  }
}
@media screen and (max-width: 768px) {
  .mainContents .top-sub-img-box {
    top: 31.8%;
    left: -49.7%;
  }
}
@media screen and (max-width: 625px) {
  .mainContents .top-sub-img-box {
    left: -36.7%;
    max-width: 46vw;
  }
}
.mainContents .top-box__text-box {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.mainContents .top-box__text {
  /* max-width: 9.1034482759vw; */
  max-width: 132px;
  width: 100%;
}
.mainContents .top-box__text-box .top-box__text:nth-of-type(2) {
  margin-right: -3px;
}
.mainContents .top-box__text__img {
  width: 100%;
  height: auto;
}
.mainContents .top-box__img-box {
  width: 100%;
  max-width: 369px;
  /* max-width: 25.4482758621vw; */
  margin: 31px 0px 0 21px;
}
.mainContents .top-box__img {
  width: 100%;
  height: auto;
}
.mainContents .top-box__btn-link {
  display: block;
  max-width: 420px;
  /* max-width: 28.9655172414vw; */
  width: 100%;
}
.mainContents .top-box__btn__img {
  width: 100%;
  height: auto;
}
.mainContents .top-title {
  width: 100%;
  max-width: clamp(140px, 11.7931034483vw, 171px);
  position: absolute;
  top: -11px;
  right: clamp(-206px, -14.2068965517vw, -140px);
}
.mainContents .vertical-fade {
  opacity: 0;
  transition: opacity  1s ease-in-out;
}
.mainContents .vertical-fade.js-active {
  opacity: 1;
}
.mainContents .top-title .top-title__img:nth-of-type(1) {
  width: 100%;
  max-width: clamp(45px, 3.9310344828vw, 57px);
  position: absolute;
  top: 0;
  right: 0;
}
.mainContents .top-title .top-title__img:nth-of-type(2){
  width: 100%;
  max-width: clamp(46px, 4vw, 58px);
  position: absolute;
  top: 8px;
  right: 33.3%;
}
.mainContents .top-title .top-title__img:nth-of-type(3){
  width: 100%;
  max-width: clamp(45px, 3.9310344828vw, 57px);
  position: absolute;
  top: 0;
  left: 0;
}

.mainContents .basilImg {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .mainContents .top-area {
    padding-top: 21.3333333333vw;
    padding-bottom: 15.8666666667vw;
  }
  .mainContents .top-title {
    max-width: 24vw;
    top: -7.5%;
    right: 0;
  }
  @media screen and (max-width: 700px) {
    .mainContents .top-title {
      right: 6%;
    }
  }
  .mainContents .top-title .top-title__img:nth-of-type(1) {
    max-width: 7.6vw;
  }
  .mainContents .top-title .top-title__img:nth-of-type(2) {
    max-width: 7.7333333333vw;
  }
  .mainContents .top-title .top-title__img:nth-of-type(3) {
    max-width: 7.6vw;
  }
  .mainContents .top-box {
    max-width: 590px;
  }
  .mainContents .top-box::before {
    width: 46vw;
    height: 44.2666666667vw;
    top: 32.2%;
    left: -49.7%;
  }
  .mainContents .top-box__btn-link {
    max-width: 590px;
  }
  .mainContents .top-box__text {
    max-width: 14.4vw;
    /* max-width: 108px; */
  }
  .mainContents .top-box__text-box {
    justify-content: stretch;
    gap: 6.1333333333vw;
    /* margin-left: 9.6vw; */
    margin-left: clamp(47px, 9.6vw, 72px);
  }
  .mainContents .top-box__text-box .top-box__text:nth-of-type(2) {
    max-width: 16.4vw;
    /* max-width: 123px; */
  }
  .mainContents .top-box__img-box {
    max-width: 65.7333333333vw;
    margin: 17.06666666667vw auto 0;
  }
}




/* ===========================================
* how-feature-area
* ======================================== */
.mainContents .how-feature-area {
  padding-top: 64px;
  padding-bottom: 85px;
  background-color: #f4efe9;
}
.mainContents .how-box {
  display: grid;
  grid-template-columns: minmax(95px, 115px) minmax(0, 860px);
  justify-content: end;
  gap: 61px;
  padding-bottom: 50px;
  position: relative;
}
.mainContents .haw-main-box {
  display: flex;
  flex-direction: column;
  gap: 45px;
  margin-top: 53px;
}
.mainContents .how-title-box {
  position: relative;
}
.mainContents .how-title-box::after {
  content: "";
  background: url(/products/special/fukamushibasil/images/icon_reef01.png)no-repeat center / contain;
  width: 152px;
  height: 97px;
  position: absolute;
  /* top: 79.5%; */
  top: clamp(365px, 30.7586206897vw, 446px);
  left: -60%;
}
.mainContents .how-title-box .how-title__img:nth-of-type(1) {
  max-width: 51px;
  position: absolute;
  top: 0;
  right: 0;
}
.mainContents .how-title-box .how-title__img:nth-of-type(2) {
  max-width: 58px;
  position: absolute;
  top: 20.8%;
  left: 0;
}
.mainContents .how-title-box .how-title__img:nth-of-type(2)::after {
  max-width: 58px;
  position: absolute;
  top: 20.8%;
  left: 0;
}
.mainContents .how-text-box {
  max-width: 712px;
  position: relative;
}
.mainContents .how-text-box::after {
  content: "";
  background: url(/products/special/fukamushibasil/images/icon_reef02.png)no-repeat center / contain;
  width: 91px;
  height: 97px;
  position: absolute;
  top: -17%;
  right: -16.2%;
}
.mainContents .how-img-box {
  max-width: 860px;
}

.mainContents .feature-box {
  padding-top: 48px;
  position: relative;
}
.mainContents .feature-box::after {
  content: "";
  background: url(/products/special/fukamushibasil/images/icon_reef03.png)no-repeat center / contain;
  width: clamp(0px , 11.3103448276vw, 164px);
  height: clamp(0px , 8.9655172414vw, 130px);
  position: absolute;
  top: 0;
  right: 8%;
}
.mainContents .feature-box::before {
  content: "";
  background: url(/products/special/fukamushibasil/images/icon_reef04.png)no-repeat center / contain;
  width: 196px;
  height: 68px;
  position: absolute;
  bottom: -12.4%;
  left: -3.6%;
}
.mainContents .feature-title {
  max-width: 508px;
  width: 100%;
  margin: 0 auto;
}
.mainContents .feature-list {
  margin-top: 40px;
}
.mainContents .feature-list-item {
  display: flex;
  align-items: center;
  gap: 30px;
}
.mainContents .feature-list-item + .feature-list-item {
  margin-top: 31px;
}
.mainContents .feature-list-item:nth-of-type(3) {
  margin-top: 41px;
}
.mainContents .feature-list-item__img-box {
  max-width: 400px;
}
.mainContents .feature-list-item:nth-of-type(2) .feature-list-item__img-box {
  max-width: 395px;
}
.mainContents .feature-list-item:nth-of-type(3) .feature-list-item__img-box {
  max-width: 381px;
}
.mainContents .feature-list-item__text-box {
  width: 100%;
  max-width: 542px;
  margin-top: 50px;
  flex-shrink: 0.6;
}
.mainContents .feature-list-item:nth-of-type(2) .feature-list-item__text-box {
  margin-top: 37px;
  max-width: 624px;
}
.mainContents .feature-list-item:nth-of-type(3) .feature-list-item__text-box {
  margin-top: 2px;
  max-width: 624px;
}
@media screen and (max-width: 768px) {
  .mainContents .how-feature-area {
    padding-top: 10.5333333333vw;
    padding-bottom: 12.8vw;
  }
  .mainContents .how-box {
    display: grid;
    grid-template-columns: minmax(0px, 15.3333333333vw) 1fr; /* タイトル＋テキストを横並び */
    grid-template-rows: auto auto;   /* 画像を下に配置 */
    gap: 24vw 7.3333333333vw;
    padding-bottom: 6.6666666667vw;
  }
  .mainContents .haw-main-box {
    display: contents; /* 子要素をそのままグリッドに流す */
  }
  .mainContents .how-img-box {
    grid-column: 1 / -1; /* 画像は画面幅いっぱいに */
    width: 100%;
  }
  .mainContents .how-text-box{
    max-width: 60.4vw;
    justify-self: center;
    transform: translate(0,13.6vw);
  }
  .mainContents .how-text-box::after {
    width: 12.1333333333vw;
    height: 12.9333333333vw;
    top: -40%;
    right: -6%;
  }
  .mainContents .how-title-box {
    transform: translate(5.3333333333vw,0);
  }
  .mainContents .how-title-box::after {
    width: 20.2666666667vw;
    height: 12.9333333333vw;
    top: 116%;
    left: -26%;
  }
  .mainContents .how-title-box .how-title__img:nth-of-type(1) {
    max-width: 6.8vw;
  }
  .mainContents .how-title-box .how-title__img:nth-of-type(2) {
    max-width: 7.7333333333vw;
    top: 33.8%;
  }

  .mainContents .feature-box {
    padding-top: 6.9333333333vw;
  }
  .mainContents .feature-box::after {
    width: 21.8666666667vw;
    height: 17.3333333333vw;
    top: 37.3%;
    right: -12%;
  }
  .mainContents .feature-box::before {
    width: 26.1333333333vw;
    height: 9.06666666667vw;
    bottom: -4.7%;
    left: -0.6%;
  }
  .mainContents .feature-title {
    max-width: 80vw;
  }
  .mainContents .feature-list {
    margin-top: 8.6666666667vw;
  }
  .mainContents .feature-list-item {
    flex-direction: column;
    gap: 2.5333333333vw;
  }
  .mainContents .feature-list-item + .feature-list-item {
    margin-top: 12.9333333333vw;
  }
  .mainContents .feature-list-item__img-box {
    max-width: 80vw;
  }
  .mainContents .feature-list-item:nth-of-type(2) .feature-list-item__img-box {
    max-width: 80vw;
  }
  .mainContents .feature-list-item:nth-of-type(3) .feature-list-item__img-box {
    max-width: 80vw;
  }
  .mainContents .feature-list-item__text-box {
    max-width: 87.2vw;
    margin-top: 0;
  }
  .mainContents .feature-list-item:nth-of-type(2) .feature-list-item__text-box {
    margin-top: 0;
  }
  .mainContents .feature-list-item:nth-of-type(3) .feature-list-item__text-box{
    margin-top: 0;
  }
}




/* ===========================================
* development-area
* ======================================== */
.mainContents .development-area {
  padding-top: 154px;
  padding-bottom: 66px;
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .development-area {
    padding-top: 10.6206896552vw;
    padding-bottom: 4.5517241379vw;
  }
}
@media screen and (max-width: 768px) {
  .mainContents .development-area {
    padding-top:  20vw;
    padding-bottom: 14.4vw;
  }
}
.mainContents .inner {
  position: relative;
}
.mainContents .development-contents-box {
  padding-right: 225px;
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .development-contents-box {
    padding-right: 15.5172413793vw;
  }
}
.mainContents .development-img-box {
  max-width: 875px;
}
.mainContents .development-img-box.--bottom {
  max-width: 890px;
  margin-left: 150px;
  margin-top: 18px;
  position: relative;
}
.mainContents .development-img-box.--bottom::before {
  content: "";
  background: url(/products/special/fukamushibasil/images/icon_reef07.png)no-repeat center / contain;
  width: 20.4494382022%;
  height: 33.4939759036%;
  position: absolute;
  bottom: 2%;
  left: -24.3%;
}
@media screen and (max-width: 768px) {
  .mainContents .development-contents-box {
    padding-right: 0;
  }

  .mainContents .development-img-box {
    max-width: 79.4666666667vw;
  }
  .mainContents .development-img-box.--bottom {
    max-width: 78.6666666667vw;
    width: 100%;
    margin: 9.06666666667vw 0 0 10.6666666667vw;
  }
  .mainContents .development-img-box.--bottom::before {
    width: 30.8474576271%;
    height: 19.4541637509%;
    bottom: 6%;
    left: -26.5%;
  } 
}

.mainContents .development-title-box {
  max-width: 113px;
  width: 100%;
  position: absolute;
  top: -6.4%;
  right: 7%;
}
.mainContents .development-title-box::before {
  content: "";
  background: url(/products/special/fukamushibasil/images/icon_reef05.png)no-repeat center / contain;
  width: 81.42%;
  height: 17.56%;
  position: absolute;
  top: -18%;
  left: -65%;
}
.mainContents .development-title-box::after {
  content: "";
  background: url(/products/special/fukamushibasil/images/icon_reef06.png)no-repeat center / contain;
  width: 114.16%;
  height: 40.19%;
  position: absolute;
  bottom: -32%;
  left: 35%;
}
.mainContents .development-title__img:nth-of-type(1) {
  max-width: 58px;
  position: absolute;
  top: 0;
  right: 0;
}
.mainContents .development-title__img:nth-of-type(2) {
  max-width: 52px;
  margin-top: 233px;
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .development-title-box {
    max-width: 7.7931034483vw;
  }
  .mainContents .development-title__img:nth-of-type(1) {
    max-width: 4vw;
  }
  .mainContents .development-title__img:nth-of-type(2) {
    max-width: 3.5862068966vw;
    margin-top: 16.06896551724vw;
  }
}
@media screen and (max-width: 768px) {
  .mainContents .development-title-box {
    top: -3.2%;
    right: 5.8%;
    max-width: 14.9333333333vw;
  }
  .mainContents .development-title-box::before {
    top: -20%;
    left: -25%;
  }
  .mainContents .development-title-box::after {
    bottom: -28.5%;
    left: 28%;
  }
  .mainContents .development-title__img:nth-of-type(1) {
    max-width: 7.6vw;
  }
  .mainContents .development-title__img:nth-of-type(2) {
    max-width: 6.8vw;
    margin-top: 31.06666666667vw;
  }
}



/* ===========================================
* line-up-area
* ======================================== */
.mainContents .line-up-area {
  padding-top: 136px;
  padding-bottom: 100px;
  background-color: #074400;
}
.mainContents .line-up-box {
  display: flex;
  justify-content: center;
}
.mainContents .line-up-item {
  max-width: clamp(257px, 20.8965517241vw, 303px);
}
.mainContents .line-up-item:nth-of-type(1) {
  transform: translateX(clamp(-75px, -5.1724137931vw, -60px));
}
.mainContents .line-up-item:nth-of-type(2)  {
  max-width: clamp(40px, 3.6551724138vw, 53px);
  transform: translateY(-58px);
}
.mainContents .line-up-item:nth-of-type(3)  {
  transform: translateX(clamp(40px, 4.3448275862vw, 63px));
}
.mainContents .line-up-item:nth-of-type(1) .line-up-item__img-box {
  max-width: 256px;
  margin: 0 auto;
}
.mainContents .line-up-item:nth-of-type(3) .line-up-item__img-box  {
  max-width: 185px;
  margin: 0 auto;
}
.mainContents .line-up-item__text-box {
  margin-top: 41px;
}
.mainContents .line-up__btn-box {
  display: block;
  width: fit-content;
  margin: 52px auto 0;
}

@media screen and (max-width: 768px) {
  .mainContents .line-up-area {
    padding-top: 21.2vw;
    padding-bottom: 16vw;
  }
  .mainContents .line-up-area .inner {
    position: relative;
  }
  .mainContents .line-up-box {
    align-items: center;
    flex-direction: column;
  }
  .mainContents .line-up-item:nth-of-type(2) {
    max-width: 7.06666666667vw;
    position: absolute;
    top: -1.6%;
    right: 5.7%;
  }
  @media screen and (max-width: 500px) {
    .mainContents .line-up-item:nth-of-type(2) {
      top: 0.4%;
    }
  }
  .mainContents .line-up-item:nth-of-type(1) {
    transform: translateX(0);
  }
  .mainContents .line-up-item:nth-of-type(3) {
    transform: translateX(0);
    margin-top: 10.6666666667vw;
  }
  .mainContents .line-up-item {
    max-width: none;
  }
  .mainContents .line-up-item:nth-of-type(1) .line-up-item__img-box {
    max-width: 44vw;
  }
  .mainContents .line-up-item:nth-of-type(3) .line-up-item__img-box {
    max-width: 31.7333333333vw;
  }
  .mainContents .line-up-item__text-box {
    max-width: 82.8vw;
    margin-top: 4.2666666667vw;
  }
}


/* ===========================================
* arrange-area
* ======================================== */
.mainContents .arrange-area {
  padding-top: 100px;
  padding-bottom: 0;
}
@media screen and (max-width: 768px) {
 .mainContents .arrange-area {
  padding-top: 15.3333333333vw;
 }
 .mainContents .arrange-area.area-wrap {
  padding-left: 4.2666666667vw;
  padding-right: 4.2666666667vw;
 }
}
.mainContents .arrange-title {
  display: block;
  max-width: 380px;
  margin: 0 auto;
}
.mainContents .tab-list {
  display: flex;
  gap: 20px;
  margin-top: 60px;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .mainContents .arrange-title {
    max-width: 50.6666666667vw;
  }
  .mainContents .tab-list {
    gap: 2.6666666667vw;
    margin-top: 6.1333333333vw;
  }
}
.mainContents .tab-list-item {
  width: 50%;
  pointer-events: auto;
}
.mainContents .tab-list-item .tab-list-item__img-box {
  width: 100%;
  display: none;
  border: none;
  background: none;
  padding: 0;
}
.mainContents .tab-list-item .tab-list-item__img-box:nth-child(2) {
  display: block;
  border: none;
  background: none;
}
.mainContents .tab-list-item.js-on .tab-list-item__img-box:nth-of-type(1) {
  display: block;
  border: none;
  background: none;
}
.mainContents .tab-list-item.js-on .tab-list-item__img-box:nth-of-type(2) {
  width: 100%;
  display: none;
  border: none;
  background: none;
  padding: 0;
}

.mainContents .arrange-main-box {
  padding-left: 20px;
  padding-right: 20px;
}
.mainContents .arrange-main__title {
  display: block;
  max-width: 657px;
  margin: 10px auto 0;
}
.mainContents .arrange-main-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 40px; 
  margin-top: 25px;
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .arrange-main-grid {
    gap: 2.7586206897vw; 
  }
  .mainContents .arrange-main-box {
    padding-left: 1.3793103448xw;
    padding-right: 1.3793103448vw;
  }
}
@media screen and (max-width: 768px) {
  .mainContents .arrange-main__title {
    max-width: 75.4vw;
    margin-top: 6.2666666667vw;
  }
}
.mainContents .arrange-main-grid__card {
  width: 100%;
}
.mainContents .arrange-main-grid__card-link {
  display: block;
  width: 100%;
  height: auto;
}
.mainContents .arrange-main-grid__card-img-box {
  width: 100%;
}
.mainContents .arrange-main-grid__card-text {
  display: block;
  margin: 30px auto 0;
  width: 100%;
  max-width: 293px;
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .arrange-main-grid__card-text {
    margin-top: 2.06896551724vw;
  }
}
.mainContents .arrange-main-grid__card:nth-of-type(2) .arrange-main-grid__card-text {
  max-width: 402px;
}
.mainContents .arrange-main-grid__card:nth-of-type(3) .arrange-main-grid__card-text {
  max-width: 479px;
}
.mainContents .arrange-main-grid__card:nth-of-type(4) .arrange-main-grid__card-text {
  max-width: 436px;
}
.mainContents #powder .arrange-main-grid__card:nth-of-type(1) .arrange-main-grid__card-text {
  max-width: 354px;
}
.mainContents #powder .arrange-main-grid__card:nth-of-type(2) .arrange-main-grid__card-text {
  max-width: 462px;
}
.mainContents #powder .arrange-main-grid__card:nth-of-type(3) .arrange-main-grid__card-text {
  max-width: 408px;
}
.mainContents .arrange__btn-box {
  display: block;
  width: fit-content;
  margin: 52px auto 0;
}
.mainContents .arrange__btn-link {
  display: block;
  max-width: 420px;
  /* max-width: 28.9655172414vw; */
  width: 100%;
}
@media screen and (max-width: 768px) {
  .mainContents .arrange-main-grid {
    grid-template-columns: 1fr;
    gap: 6.4vw;
    margin-top: 6.4vw;
  }
  .mainContents .arrange-main__title {
    max-width: 75.4vw;
  }
  .mainContents .arrange-main-grid__card-text {
    margin-top: 2.1333333333vw;
  }
  .mainContents .arrange-main-grid__card-img-box {
    max-width: 515px;
    margin: 0 auto;
  }
  .mainContents .arrange-main-grid__card-text {
    max-width: 55.06666666667vw;
    margin-top: 0.2666666667vw;
  }
  .mainContents .arrange-main-grid__card:nth-of-type(2) .arrange-main-grid__card-text {
    max-width: 74.6666666667vw;
    margin-top: 2.2666666667vw;
  }
  .mainContents .arrange-main-grid__card:nth-of-type(3) .arrange-main-grid__card-text {
    max-width: 51.3333333333vw;
    margin-top: 1.6vw;
  }
  .mainContents .arrange-main-grid__card:nth-of-type(4) .arrange-main-grid__card-text {
    max-width: 80.6666666667vw;
  }
  .mainContents #powder .arrange-main-grid__card:nth-of-type(1) .arrange-main-grid__card-text {
    max-width: 66.06666666667vw;
  }
  .mainContents #powder .arrange-main-grid__card:nth-of-type(2) .arrange-main-grid__card-text {
    max-width: 85.7333333333vw;
  }
  .mainContents #powder .arrange-main-grid__card:nth-of-type(3) .arrange-main-grid__card-text {
    max-width: 77.8666666667vw;
  }
  .mainContents .arrange__btn-box{
    margin-top: 8.4vw;
  }
  .mainContents .arrange__btn-link {
    max-width: 590px;
  }
}


/* ===========================================
* special-area
* ======================================== */
.mainContents .special-area {
  padding-top: 102px;
  padding-bottom: 40px;
  background: url(/products/special/fukamushibasil/images/bg_special.png) no-repeat left bottom / cover;
}
@media screen and (max-width: 768px) {
  .mainContents .special-area {
    padding-top: 35.3333333333vw;
    padding-bottom: 10.6666666667vw;
    background: url(/products/special/fukamushibasil/images/bg_special-sp.png) no-repeat left bottom / cover;
  }
}
.mainContents .special-title {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 272px;
}
@media screen and (max-width: 768px) {
  .mainContents .special-title {
    margin: 0 0 0 8.2666666667vw;
    max-width: 44vw;
  }
}
.mainContents .special-box {
  display: flex;
  margin-top: 24px;
}
.mainContents .special-card {
  width: 100%;
}
.mainContents .special-card:nth-of-type(2) {
  max-width: 144px;
  margin: 0 48px;
}
.mainContents .special-link {
  display: block;
  width: 100%;
  height: auto;
}
.mainContents .special-img-box {
  width: 100%;
}
.mainContents .special-text {
  max-width: 381px;
  width: 100%;
  margin: 20px auto 0;
}
.mainContents .special-card:nth-of-type(3) .special-text {
  max-width: 356px;
}
.mainContents .special-main-text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 2px;
  overflow: hidden;
}
.mainContents .special-main-text .special-main-text__img:nth-of-type(1) {
  max-width: 30px;
  padding-bottom: 2.2068965517vw;
}
.mainContents .special-main-text .special-main-text__img:nth-of-type(2) {
  max-width: 29px;
  padding-top: 2.06896551724vw;
  padding-bottom: 2.5517241379vw;
}
.mainContents .special-main-text .special-main-text__img:nth-of-type(3) {
  max-width: 31px;
}
.mainContents .special-main-text__img {
  padding: 15px 11px;
}
.mainContents .special-main-text-wrap {
  background-color: #bca14e;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 1.2s ease, opacity 0.8s ease;
}
.mainContents .special-main-text-wrap:nth-child(1) {
  transition-delay: 0.2s;
}
.mainContents .special-main-text-wrap:nth-child(3) {
  transition-delay: 0.4s;
}
.mainContents .special-main-text-wrap.active {
  max-height: 500px;
  opacity: 1;
}


@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .special-card:nth-of-type(2) {
    max-width: 9.9310344828vw;
    margin: 0 3.3103448276vw;
  }
  .mainContents .special-main-text__img {
    padding: 1.03448275862vw 0.6206896552vw;
  }
  .mainContents .special-main-text .special-main-text__img:nth-of-type(1) {
    max-width: 2.06896551724vw;
  }
  .mainContents .special-main-text .special-main-text__img:nth-of-type(2) {
    max-width: 2vw;
  }
  .mainContents .special-main-text .special-main-text__img:nth-of-type(3) {
    max-width: 2.1379310345vw;
  }
}
@media screen and (max-width: 768px) {
  .mainContents .special-area {
    position: relative;
  }
  .mainContents .special-box {
    flex-direction: column;
    gap: 48px;
    margin-top: 31.7333333333vw;
  }
  .mainContents .special-img-box {
    max-width: 435px;
    margin: 0 auto;
  }
  .mainContents .special-card .special-link {
    width: fit-content;
    margin: 0 auto;
  }
  .mainContents .special-card:nth-of-type(2) {
    position: absolute;
    max-width: 23.2vw;
    margin: 0;
    top: -14.3%;
    right: 9.8%;
  }
  @media screen and (max-width: 500px) {
    .mainContents .special-card:nth-of-type(2) {
      top: -11.3%;
    }
  }
  @media screen and (max-width: 375px) {
    .mainContents .special-card:nth-of-type(2) {
      top: -10.3%;
    }
  }
  .mainContents .special-text {
    max-width: 70.6666666667vw;
  }
  .mainContents .special-card:nth-of-type(3) .special-text {
    max-width: 66.1333333333vw;
  }
  .mainContents .special-main-text__img {
    padding: 2vw 1.4666666667vw 3.6vw;
  }
  .mainContents .special-main-text .special-main-text__img:nth-of-type(1) {
    max-width: 5.06666666667vw;
  }
  .mainContents .special-main-text .special-main-text__img:nth-of-type(2) {
    max-width: 4.8vw;
    padding-top: 4.8vw;
    padding-bottom: 4.2666666667vw;
  }
  .mainContents .special-main-text .special-main-text__img:nth-of-type(3) {
    max-width: 4.9333333333vw;
  }
}

/* ===========================================
* chef-area
* ======================================== */
.mainContents .chef-area {
  padding-top: 40px;
  padding-bottom: 64px;
  background-color: #052f00;
}
.mainContents .chef-box {
  display: flex;
  gap: 77px;
  gap: clamp(30px, 5.3103448276vw, 77px);
  margin-left: 76px;
}
.mainContents .chef-img-box {
  max-width: 174px;
}
.mainContents .chef-text-box {
  max-width: 682px;
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .mainContents .chef-area {
    padding-top: 10.6666666667vw;
    padding-bottom: 10.6666666667vw;
  }
  .mainContents .chef-box {
    flex-direction: column;
    justify-content: center;
    margin-left: 0;
  }
  .mainContents .chef-img-box {
    max-width: 40vw;
    margin: 0 auto;
  }
  .mainContents .chef-text-box {
    max-width: 88.6vw;
    margin-top: 2.6666666667vw;
  }
}



/* ===========================================
* voice-area
* ======================================== */
.mainContents .voice-area {
  padding-top: 100px;
  padding-bottom: 32px;
  background: url(/products/special/fukamushibasil/images/bg-voice.png) no-repeat center/cover; 
}
@media screen and (max-width: 768px) {
  .mainContents .voice-area {
    padding-top: 10.6666666667vw;
    padding-bottom: 10.6666666667vw;
    background: url(/products/special/fukamushibasil/images/bg-voice-sp.png) no-repeat top / cover;
  }
}
.mainContents .voice-wrap{
  display: flex;
  gap: 34px;
}
.mainContents .voice-title {
  max-width:5.41%;
  margin-left: -9px;
}
.mainContents .voice-img-box {
  max-width: 988px;
  margin-top: -170px;
  margin-left: -34px;
}
.mainContents .voice-notice {
  max-width: 704px;
  width: 100%;
  margin-top: 49px;
}
@media screen and (max-width: 768px) {
  .mainContents .voice-wrap {
    display: revert;
    margin-left: -5.3333333333vw;
    margin-right: -5.3333333333vw;
    position: relative;
  }
  .mainContents .voice-title{
    position: absolute;
    top: 0%;
    right: 10.3%;
    max-width: 8vw;
  }
  .mainContents .voice-img-box {
    max-width: 100vw;
    margin-top: 0;
    margin-left: 0;

  }
  .mainContents .voice-notice {
    margin-top: 5.3333333333vw;
  }
}




/* ===========================================
* amazon-area
* ======================================== */
.mainContents .amazon-area {
  padding-top: 101px;
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .mainContents .amazon-area {
    padding-top: 16vw;
  }
}
.mainContents .amazon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mainContents .amazon-img-box {
  max-width: 370px;
  margin-bottom: 40px;
}
.mainContents .amazon-link {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 7px;
}
.mainContents .amazon-text {
  max-width: 494px;
  margin-bottom: 67px;
}
.mainContents .amazon-link-box {
  display: flex;
  gap: 40px;
}
.mainContents .amazon-link-card {
  max-width: 340px;
  width: 100%;
}
.mainContents .amazon-link-text {
  max-width: 265px;
  width: 100%;
  margin: 0 auto;
}
.mainContents .amazon-link-card:nth-of-type(2) .amazon-link-text {
  max-width: 266px;
}
@media (min-width: 769px) and (max-width: 1450px) {
  .mainContents .amazon-link-box {
    gap: 2.7586206897vw;
  }
}
@media screen and (max-width: 768px) {
  .mainContents .amazon-img-box {
    max-width: 64vw;
    margin-bottom: 6.6666666667vw;
  }
  .mainContents .amazon-text {
    max-width: 82.6666666667vw;
    margin-bottom: 10.6666666667vw;
  }
  .mainContents .amazon-link-box {
    flex-direction: column;
    justify-content: center;
  }
  .mainContents .amazon-link-card {
    max-width: 64vw;
  }
  .mainContents .amazon-link-text {
    max-width: 52.06666666667vw;
  }
  .mainContents .amazon-link-card:nth-of-type(2) .amazon-link-text {
    max-width: 52.3333333333vw;
  }
  .mainContents .amazon-link {
    margin-top: 2vw;
  }
}




/* ===========================================
* sns
* ======================================== */
.mainContents .sns_area {
width: 100%;
margin: 0 auto;
text-align: center;
}

.mainContents .sns_area ul{
display: flex;
justify-content: center;
margin-top: 0;
}

.mainContents .sns_area li{
width: 6%;
}

.mainContents .sns_area li:not(:first-child) {
margin-left: 49px;
}
@media screen and (max-width: 768px) {
.mainContents .sns_area li {
width: 15.47%;
}
.mainContents .sns_area li:not(:first-child) {
margin-left: 10.7%;
}
}