/* CSSコード */


/*common
------------------------------------------------------------------------------------------------------------------------------------ */
@-webkit-keyframes flash { 0% { opacity: .6; } 100% { opacity: 1; } }
@keyframes flash { 0% { opacity: .6; } 100% { opacity: 1; } }
main.soyvignon a { color: #000; text-decoration: none;  }
main.soyvignon a:hover { opacity: 1; -webkit-animation: flash 1s; animation: flash 1s; }
main.soyvignon a.none:hover { opacity: 1; -webkit-animation: flash 0; animation: flash 0; }
main.soyvignon .serif { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho",'Noto Serif JP', serif; font-weight: 100; }

/* 共通 */
@media screen and (max-width:767px) {
	main.soyvignon { line-height: 1.6; font-size: 3.333333vw; color: #4e4e4e; background: url(../images/bg_body.png); }
	.forPC { display: none; }
	.forSP { display: inline; }
	img { max-width: 100%; height: auto; -webkit-touch-callout: none; }
	#Contents .wakuwakunokura { margin: 0; padding: 30px 20px; background: #fff!important; }
}
@media screen and (min-width: 768px) {
	main.soyvignon { font-size: 1.6rem; color: #4e4e4e; background: url(../images/bg_body.png); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	.forPC { display: inline; }
	.forSP { display: none; }
	#Contents .wakuwakunokura { margin: 0; padding: 50px 0; background: #fff; }
}

/* KV */
main.soyvignon .kv { position: relative; }
main.soyvignon .bg img { width: 100%; }
@media screen and (max-width:767px) {
	main.soyvignon .kv .catch { position: absolute; display: block; top: 1.2vw; right: 0; }
	main.soyvignon .kv .logo { position: absolute; bottom: -1vw; right: -0.2vw; height: 22.5vw; }
	main.soyvignon .kv .product { position: absolute; top: 4.5vw; left: 0; width: 69.7vw; }
}
@media screen and (min-width: 768px) {
	main.soyvignon .kv .catch { position: absolute; display: block; top: 0; right: 8px; height: 47.8vw; }
	main.soyvignon .kv .catch img { width: 100%; }
	main.soyvignon .kv .logo { position: absolute; bottom: -0.2vw; left: 21.6vw; height: 10.25vw; }
	main.soyvignon .kv .product { position: absolute; top: 2.7vw; left: 0; width: 31vw; }
}
/* intro */
@media screen and (max-width:767px) {
	main.soyvignon .introText { padding: 12vw 7.5vw 8vw 7.5vw; background: #e23a88; color: #fff; line-height: 1.8; font-size: 3.73333333vw; }
	main.soyvignon .introTitle { padding: 10vw 7.5vw 5vw 7.5vw; }
	main.soyvignon .introTitle + p { padding: 0 7.5vw 8vw 7.5vw; font-size: 3.73333333vw; line-height: 1.8; }
	main.soyvignon .intro .meyasu { margin: 0 7.5vw 15vw 7.5vw; text-align: center; }
	main.soyvignon .intro .small { font-size: 80%; }
}
@media screen and (min-width: 768px) {
	main.soyvignon .introText { padding: 40px 0 0 23vw; width: 100%; background: #e23a88; color: #fff; height: 280px; line-height: 2.2; font-size: 1.6rem; }
	main.soyvignon .introImage { width: 100%; }
	main.soyvignon .introTitle { margin: 50px auto 40px; width: 788px; }
	main.soyvignon .introTitle img { width: 100%; }
	main.soyvignon .introTitle + p { text-align: center; font-size: 1.6rem; line-height: 2; margin-bottom: 40px; }
	main.soyvignon .intro .meyasu { width: 400px; margin: 0 auto 80px auto; }
	main.soyvignon .intro .small { font-size: 80%; }
}

/* feature */
@media screen and (max-width:767px) {
	main.soyvignon .feature .featureTitle { padding: 10vw 7.5vw 5vw; }
	main.soyvignon .feature .featureTitle + p { padding: 0 7.5vw 8vw 7.5vw; font-size: 3.73333333vw; line-height: 1.8; }
	main.soyvignon .feature .featureInner { padding: 10vw 7.5vw;  }
	main.soyvignon .feature .featureInner p { margin-top: 5vw; font-size: 3.73333333vw; line-height: 1.8; }
	main.soyvignon .feature .point { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; margin: 0 auto; }
	main.soyvignon .feature .point li { width: 42vw; }
	main.soyvignon .feature .point li:nth-child(1) { grid-column: 1 / span 2; }
	main.soyvignon .feature .point li:nth-child(2) { grid-column: 1 / 2; }
	main.soyvignon .feature .point li:nth-child(3) { grid-column: 2 / 3; }
	main.soyvignon .feature .point img { width: 100%; }
}
@media screen and (min-width: 768px) {
	main.soyvignon .feature {  }
	main.soyvignon .feature .featureTitle { margin: 50px auto 40px; width: 788px; }
	main.soyvignon .feature .featureTitle img { width: 100%; }
	main.soyvignon .feature .featureTitle + p { text-align: center; font-size: 1.6rem; line-height: 2; margin-bottom: 80px; }
	main.soyvignon .feature .featureInner { background: url(../images/image_soy_pc.png); width: 100%; min-height: 570px; padding: 150px 0 40px 150px; }
	main.soyvignon .feature .featureInner h2 { width: 335px; margin-bottom: 30px; }
	main.soyvignon .feature .featureInner h2 img { width: 100%;  }
	main.soyvignon .feature .featureInner p { line-height: 2; width: 45%; }
	main.soyvignon .feature .point { display: flex; flex-wrap:nowrap; justify-content: space-between; margin: 50px auto 100px; width: 780px; }
	main.soyvignon .feature .point li { width: 30%; }
	main.soyvignon .feature .point img { width: 100%; }
}


/* product */
	main.soyvignon .purchase-btn { display: flex; margin-top: 20px; align-items: center; justify-content: center; position: relative; width: 100%; height: 64px; background: linear-gradient(160deg, #e03c7d 50%, #f272a8 50%); text-decoration: none; box-sizing: border-box; transition: opacity 0.3s ease; }
	main.soyvignon .purchase-btn:hover { opacity: 0.9; }
	main.soyvignon .btn-text { font-size: 1.4rem; font-weight: bold; letter-spacing: 0.05em; color: #ffffff; }
	main.soyvignon .btn-arrow { position: absolute; right: 30px; font-size: 1.4rem; font-weight: bold; color: #ffffff; }
@media screen and (max-width:767px) {
	main.soyvignon .productInner { margin-top: 10vw; padding: 0 7.5vw; }
	main.soyvignon .product .image { margin-bottom: 15px; text-align: center; }
	main.soyvignon .product .image .name { padding: 0 6vw; margin-bottom: 7.5vw; }
	main.soyvignon .product .detail { margin-top: 7.5vw; }
	main.soyvignon .product .detail .text { display: block; text-align: center; }
	main.soyvignon .product .detail p { margin: 5vw 0 7vw; font-size: 3.73333333vw; line-height: 1.8; }
	main.soyvignon .product .spec { display: table; padding: 15px 0; border-top: 1px solid #808080; width: 100%;  }
	main.soyvignon .product .spec dt { display: table-cell; width: 24%; font-size: 3.73333333vw; line-height: 1.6; }
	main.soyvignon .product .spec dd { display: table-cell; width: 76%; font-size: 3.73333333vw; line-height: 1.6 }
	.purchase-btn { height: 60px; }
	.btn-text { font-size: 1rem; } .btn-arrow { right: 20px; font-size: 1.2rem; }
}
@media screen and (min-width: 768px) {
	main.soyvignon .product { display: table; margin: 0 auto 100px auto; padding: 0; width: 780px; }
	main.soyvignon .product .image { display: table-cell; width: 260px; margin-bottom: 15px; text-align: center; vertical-align: top; }
	main.soyvignon .product .productImage img { width: 135px; }
	main.soyvignon .product .image .name { margin-top: 30px; width: 260px; }
	main.soyvignon .product .detail { display: table-cell; width: 520px; padding-left: 100px; vertical-align: top; }
	main.soyvignon .product .detail .text { display: block; margin-bottom: 30px; }
	main.soyvignon .product .detail .text img { width: 300px; }
	main.soyvignon .product .detail p { margin-bottom: 20px; font-size: 1.6rem; line-height: 1.8; }
	main.soyvignon .product .spec { display: table; padding: 15px 0; border-top: 1px solid #808080; width: 100%; }
	main.soyvignon .product .spec dt { display: table-cell; width: 17%; font-size: 1.4rem; line-height: 1.6; }
	main.soyvignon .product .spec dd { display: table-cell; width: 83%; font-size: 1.4rem; line-height: 1.6; }
}



/* フェードイン(初期値) */
.js-fadeUp {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
  /* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: .2s; /* フェード開始を0.5秒遅らせる */
}

.wakuwakunokura {
	margin: 60px 20px;
	text-align: center
}

.wakuwakunokura img {
	max-width: 100%
}

.wakuwakunokura-anchor img {
	-webkit-transition-duration: .2s;
	transition-duration: .2s;
	-webkit-transition-property: opacity;
	transition-property: opacity
}

@media (any-hover:hover) {
	.wakuwakunokura-anchor:hover img {
	opacity: .6
	}
}

/* メインビジュアルアニメーション */
.fadeUpMain {
    animation-name:fadeUpAnimeMain;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
    }
    @keyframes fadeUpAnimeMain{
      from {
        opacity: 0;
        transform: translateY(50px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* アニメーションスタートの遅延時間を決めるCSS*/
    .delay-time01 { animation-delay: 1.0s; }
    .delay-time02 { animation-delay: 1.5s; }
    .delay-time03 { animation-delay: 2.0s; }



/* 全体のコンテナ（はみ出た部分を隠す） */
.slider {
  overflow: hidden;
  width: 100%;
  background: #fff;
}

/* トラック（横並びにしてアニメーションさせる） */
.slider-track {
  display: flex;
  width: max-content;
  animation: slideLoop 50s linear infinite;
}

/* 各画像アイテム */
.slider-item {
  /* 💡【縦幅を450pxベースに指定】 */
  height: 500px;
  /* スマホなど画面が小さい時は、画面の高さ（または幅）に合わせて縮小させる */
  max-height: 55vh; 
  
  /* 元の画像比率（618:788）を保ったまま、縦幅に合わせて横幅を自動計算 */
  aspect-ratio: 618 / 788;
  
  width: auto; /* aspect-ratioを効かせるためにautoにする */
  flex-shrink: 0;
  margin-right: -57px; /* 隙間2px */

  /* 💡【角度の調整】 */
  /* 比率が維持されるため、%指定のままでPC・スマホともに角度が綺麗に揃います */
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 無限ループのアニメーション */
@keyframes slideLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}