@charset "utf-8";
/* CSS Document */

body{
	margin: 0;
}

.sticky-container{
	margin: 0;
}

.sticky-container img{
	display: block;
	line-height: 0;
}

.pc-box{
	display: none;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	background-color: #fff;
}

.mv{
	margin: 0 auto;
}

.mv p{
	text-align: center;
	line-height: 2;
	font-size: 0.85rem;
	margin: 10% auto;
}

@media(min-width:750px){
	.sticky-container{
		display: flex;
		justify-content: center;
		column-gap: 160px;
		background-color: #f9f9f9;
	}
	
	.pc-box{
		position: sticky;
        left: 0;
        top: 0;
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
	}
	
	.pc-box__left img{
		width: 56vh;
	}
		
	.wrapper{
		width: 36%;
		margin: 0;
	}
	
	.mv p{
		text-align: center;
		line-height: 2;
		font-size: 1.0rem;
		margin: 10% auto;
	}
}

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

			main-contents

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

.main-contents{
	margin: 10% auto 5%;
}

.contents-inner{
	margin: 0 auto 25%;
}

.contents-inner__last{
	margin: 0 auto 15%;
}

.product-box{
	margin: 0 auto 5%;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.product-number{
	text-align: center;
	font-size: 2.2rem;
	margin: 1% auto;
}

.product-name{
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.3;
	margin: 1% auto;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: bold;
}

.product-price{
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.5;
	margin: 1% auto 3%;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: bold;
}

.product-price:after{
	content: 'tax in';
	font-size: 0.9rem;
	margin-left: 5px;
	letter-spacing: 0.5px;
}

.product-box a{
	display: block;
	width: 40%;
	margin: 1% auto;
	background-color: #000;
	color: #fff;
	text-decoration: none;
	font-size: 1.3rem;
	text-align: center;
	border-radius: 50px;
}

.product-lead{
	margin: 8% auto 8%;
	text-align: center;
	font-size: 0.76rem;
	line-height: 1.8;
	font-weight: normal;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

.main-box{
	width: 90%;
	margin: 5% auto;
}

.function{
	width: 90%;
	margin: 5% auto;
}


/* ======================================
   スライドショー共通設定
====================================== */
.slide {
    position: relative;
    width: 100%;
    overflow: hidden; /* inheritからhiddenに変更してはみ出しを防止 */
    aspect-ratio: 800 / 960;
}

/* 4枚スライド（01番・06番用）
   HTML側のクラス名: slide__img
   全体で12秒（1枚4秒 × 4枚）
====================================== */
.slide__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fade-loop4 12s infinite;
}

.slide__img:nth-child(1) { animation-delay: 0s; }
.slide__img:nth-child(2) { animation-delay: 3s; }
.slide__img:nth-child(3) { animation-delay: 6s; }
.slide__img:nth-child(4) { animation-delay: 9s; }

@keyframes fade-loop4 {
    0% { opacity: 0; }
    8.3% { opacity: 1; }    /* 1秒かけてフェードイン */
    25% { opacity: 1; }     /* 3秒キープ */
    33.3% { opacity: 0; }   /* 1秒かけてフェードアウト */
    100% { opacity: 0; }
}

/* 2枚スライド（02番用）
   HTML側のクラス名: slide__img2
   全体で6秒（1枚3秒 × 2枚）
====================================== */
.slide__img2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fade-loop2 6s infinite;
}

.slide__img2:nth-child(1) { animation-delay: 0s; }
.slide__img2:nth-child(2) { animation-delay: 3s; }

@keyframes fade-loop2 {
    0% { opacity: 0; }
    16.6% { opacity: 1; }   /* 1秒かけてフェードイン */
    50% { opacity: 1; }     /* 3秒キープ */
    66.6% { opacity: 0; }   /* 1秒かけてフェードアウト */
    100% { opacity: 0; }
}

/* 3枚スライド（03番・04番・05番用）
   HTML側のクラス名: slide__img3
   全体で9秒（1枚3秒 × 3枚）
====================================== */
.slide__img3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fade-loop3 9s infinite;
}

.slide__img3:nth-child(1) { animation-delay: 0s; }
.slide__img3:nth-child(2) { animation-delay: 3s; }
.slide__img3:nth-child(3) { animation-delay: 6s; }

@keyframes fade-loop3 {
    0% { opacity: 0; }
    11.1% { opacity: 1; }   /* 1秒かけてフェードイン */
    33.3% { opacity: 1; }   /* 3秒キープ */
    44.4% { opacity: 0; }   /* 1秒かけてフェードアウト */
    100% { opacity: 0; }
}



.all{
	display: block;
	width: 90%;
	margin: 10% auto 15%;
	text-align: center;
	background-color: #000;
	color: #fff;
	font-size: 1.5rem;
	text-decoration: none;
	position: relative;
	line-height: 2.5;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
}

.all:after{
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 5px;
	height: 5px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	transform: translateY(-50%) rotate(45deg);
}

@media(min-width:750px){

	.product-number{
		font-size: 3.2rem;
	}

	.product-name{
		font-size: 1.7rem;
		letter-spacing: 1px;
		line-height: 1.3;

	}

	.product-price{
		font-size: 1.45rem;
	}

	.product-price:after{
		font-size: 0.85em;
	}

	.product-box a{
		width: 30%;
		font-size: 1.5rem;
	}

	.product-lead{
		font-size: 0.85rem;
		line-height: 2;
	}

	.main-box{
		width: 90%;
		margin: 5% auto;
	}

	.function{
		width: 70%;
		margin: 5% auto;
	}

	.all{
		width: 70%;
	}
}