@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');

/* CSS Document */

#contents { text-align: center; background: #fff; background: #ffe48a; }

#lower-contents { padding-bottom: 0; }


.new2025nov p { color: #3c3432; font-size: 16px; }
.new2025nov a { text-decoration: none; }

.btn-more a { transition: transform 0.2s ease; }
.btn-more a:hover { transform: scale(1.04); }

/* effects */
.fd { position: relative; opacity: 0; transform: translateY(4.4vw); transition: opacity 1.2s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1) }
.fd .contrast { filter: contrast(300%); transition: 1.2s linear }
.fd .contrast_ { filter: contrast(200%); transition: 1.2s linear }
.fd.active { opacity: 1; transform: translateY(0); }
.fd.active .contrast, .fd.active .contrast_ { filter: contrast(100%); }
.zm { opacity: 0; transform: scale(1.25); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); }
.zm.active { opacity: 1; transform: scale(1) }
.zm .parts { opacity: 0; transform: scale(1.66); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.175, 0.885, 0.42, 1.15); transition-delay: 0.6s; }
.zm.active .parts { opacity: 1; transform: scale(1) }


/* #intro */
#intro { padding: 0 4.4vw 2vw; position: relative; z-index: 2; }
#intro h2 { padding: 0 4.4vw; }
#intro .overview { margin: -8vw 0 0; position: relative; }
#intro .overview .img02 { width: 16vw; position: absolute; top: -7vw; left: -2.5vw; }
#intro .overview p { font-size: 1.1vw; text-align: right; padding: 0 4.4vw; }


/* #works-keytag */
#works-keytag { background: #fff7dc; padding: 0 4.4vw 7vw; position: relative; }
#works-keytag::before {
	content: '';
	width: 100%;
	height: 35.4vw;
	background-image: url(../img/line01.jpg);
	background-size: auto;
 	position: absolute; top: -14.4vw; left: 0; }
#works-keytag h3 { text-align: left; margin: 0 0 0 -6vw; position: relative; z-index: 2; }
#works-keytag h3 img { width: 40.5vw; }
#works-keytag ul li .pic { position: relative; }
#works-keytag .list01 {  margin: 3.3vw 0 0; position: relative; }
#works-keytag .list01 li:nth-child(1) { width: 45.5vw; position: relative; z-index: 2; }
#works-keytag .list01 li:nth-child(1) .parts { width: 10.3vw; position: absolute; top: 0.8vw; left: 1.1vw; }
#works-keytag .list01 li:nth-child(2) { width: 49.6vw; position: absolute; top: -14.7vw; left: 41.3vw; z-index: 3; }
#works-keytag .list01 li:nth-child(2) .parts { width: 6.8vw;; position: absolute; top: 1.8vw; right: 2.3vw; }
#works-keytag .list02 { margin: 5.8vw 0 0; position: relative; }
#works-keytag .list02 li:nth-child(1) { width: 46vw; padding: 0 0 0 4.4vw; position: relative; z-index: 2; }
#works-keytag .list02 li:nth-child(1) .parts { width: 9.3vw; position: absolute; top: -2.9vw; left: 2.3vw; }
#works-keytag .list02 li:nth-child(2) { width: 46vw; position: absolute; top: -3.6vw; left: 45vw; z-index: 1; }
#works-keytag .list02::before {
	content: '';
	display: inline-block;
	width: 36vw;
	height: 36vw;
	background-image: url(../img/bg1000.jpg);
	background-size: contain;
 	position: absolute; top: -13.6vw; right: -4.4vw; }
#works-keytag .list02 li:nth-child(2) .parts { width: 7.7vw; position: absolute; top: 1.5vw; left: 6vw; }
#works-keytag .list03 { margin: 5.8vw 0 0; position: relative; }
#works-keytag .list03 li:nth-child(1) { width: 49vw; position: relative; z-index: 2; }
#works-keytag .list03 li:nth-child(2) { width: 38vw; position: absolute; top: -2.2vw; left: 53vw; z-index: 1; }
#works-keytag .list03::before {
	content: '';
	display: inline-block;
	width: 29vw;
	height: 29vw;
	background-image: url(../img/bg800.jpg);
	background-size: contain;
 	position: absolute; top: 13vw; left: 45.5vw; }
#works-keytag .notes { font-size: 12px; text-align: right; margin: -5vw 0 0; }


/* #works-motif */
#works-motif { text-align: left; background: #fbda6e; padding: 3vw 4.4vw; position: relative; z-index: 2; margin: 0 0 15vw; }
#works-motif::before {
	content: '';
	width: 100%;
	height: 29vw;
	background-image: url(../img/line02.jpg);
	background-size: cover;
 	position: absolute; bottom: -21vw; left: 0; }
#works-motif h3 { text-align: left; margin: 0 0 0 -6vw; }
#works-motif h3 img { width: 41vw; margin: 0; }
#works-motif ul li .pic { position: relative; }
#works-motif .list01 { margin: 2.2vw 0 0; position: relative; }
#works-motif .list01 li:nth-child(1) { width: 47vw; position: relative; z-index: 1; }
#works-motif .list01 li:nth-child(1) .parts01 { width: 13.2vw; position: absolute; bottom: 2.9vw; left: 5.9vw; }
#works-motif .list01 li:nth-child(1) .parts02 { width: 9.2vw; position: absolute; top: 1.1vw; left: 28vw; }
#works-motif .list01 li:nth-child(2) { width: 47vw; position: absolute; top: -13.9vw; left: 44vw; z-index: 2; }
#works-motif .list01 li:nth-child(2) .parts01 { width: 13.2vw; position: absolute; top: 2.5vw; right: 5.7vw; }
#works-motif .list01 li:nth-child(2) .parts02 { width: 8.4vw; position: absolute; bottom: 3.6vw; left: 3.5vw; }
#works-motif .list01::before {
	content: '';
	display: inline-block;
	width: 36vw;
	height: 36vw;
	background-image: url(../img/bg1000.jpg);
	background-size: contain;
 	position: absolute; top: -20vw; right: -4.4vw; }
#works-motif .list02 { margin: 7.3vw 0 0; position: relative; }
#works-motif .list02 li:nth-child(1) { width: 45.2vw; padding: 0 0 0 4.4vw; position: relative; z-index: 2; }
#works-motif .list02 li:nth-child(1) .parts { width: 9.2vw; position: absolute; top: -5.5vw; left: 1.6vw; }
#works-motif .list02 li:nth-child(2) { width: 45.5vw; position: absolute; top: -4.6vw; left: 45.5vw; z-index: 1; }
#works-motif .list02 li:nth-child(2) .parts { width: 11vw; position: absolute; top: -7vw; left: -2vw; }
#works-motif .list03 { margin: 4.4vw 0 0; position: relative; }
#works-motif .list03 { margin: 5.8vw 0 0; position: relative; }
#works-motif .list03 li:nth-child(1) { width: 48.3vw; position: relative; z-index: 3; }
#works-motif .list03 li:nth-child(2) { width: 38vw; position: absolute; top: -3.3vw; left: 53vw; z-index: 2; }
#works-motif .list03 li:nth-child(2) .img { width: 21.4vw; position: absolute; top: 29vw; left: 5vw; }
#works-motif .list03::before {
	content: '';
	display: inline-block;
	width: 29vw;
	height: 29vw;
	background-image: url(../img/bg800.jpg);
	background-size: contain;
 	position: absolute; top: 12.6vw; left: 50vw; }
#works-motif .notes { font-size: 12px; text-align: right; margin: -5vw 0 0; position: relative; z-index: 2; }


/* #item */
#item { padding: 0 1vw 80px; position: relative; z-index: 2; }
#item .date p { color: #fff; font-size: 18px; font-weight: 600; background: #777cb7; padding: 2px 30px 0; margin: 0 0 10px; display: inline-block; position: relative; z-index: 2; }
#item .design p { color: #000; font-size: 16px; font-weight: 600; padding: 2px 30px 0; border: 2px solid #000; display: inline-block; position: relative; z-index: 2; }
#item .box { margin: 40px 0 0 -1vw; }
#item .box .box-inner { width: calc(50% - 1vw); float: left; background: #fdebb6; border-radius: 10px; margin: 0 0 1vw 1vw; padding: 40px 0 50px; position: relative; }
#item .box .box-inner h3 { font-size: 22px; padding: 20px 0 10px; }
#item .box .box-inner .pic { padding: 0 14vw; }
#item .box .box-inner p { font-size: 14px; line-height: 1.7em; }
#item .box .box-inner ul { padding: 30px 2.2vw 45px; margin: 0 0 0 18px; }
#item .box .box-inner ul li { font-size: 16px; text-align: left; line-height: 1.8em; text-indent: -18px; }
#item .box .box-inner figure { padding: 0 2.2vw; position: relative; }
#item .box .box-inner figure .parts { width: 8.2vw; position: absolute; top: -1.5vw; left: calc(50% - 4.1vw); }
#item .box .box-inner .onsale { width: 8vw; position: absolute; top: 1.5vw; left: 1.5vw; }
#item .box .box-inner .btn-more a { font-size: 18px; background: #fff; font-weight: 600; line-height: 1em; letter-spacing: 0.2em; display: block; max-width: 350px !important; border-radius: 60px; padding: 20px 0 16px; margin: 0 auto; }
#item .box .box-inner .btn-more.btn01 { margin: 30px 0 0; }
#item .box .box-inner .btn-more.btn02 { margin: 10px 0 0; }
#item .box li:nth-child(1) h3 { color: #757cbb; }
#item .box li:nth-child(1) li span { color: #757cbb; }
#item .box li:nth-child(1) .btn-more a { color: #757cbb; box-shadow: 2px 2px 0px 0px rgba(117, 124, 187, 1); }
#item .box li:nth-child(2) h3 { color: #09805e; }
#item .box li:nth-child(2) li span { color: #09805e; }
#item .box li:nth-child(2) .btn-more a { color: #09805e; box-shadow: 2px 2px 0px 0px rgba(9, 128, 94, 1); }
#item .box li:nth-child(3) h3 { color: #2d83c1; }
#item .box li:nth-child(3) li span { color: #2d83c1; }
#item .box li:nth-child(3) .btn-more a { color: #2d83c1; box-shadow: 2px 2px 0px 0px rgba(82, 115, 167, 1); }
#item .box li:nth-child(4) h3 { color: #a14c57; }
#item .box li:nth-child(4) li span { color: #a14c57; }
#item .box li:nth-child(4) .btn-more a { color: #a14c57; box-shadow: 2px 2px 0px 0px rgba(154, 63, 77, 1); }
#item .cs { padding: 40px 0 0; }
#item .cs p { color: #000; font-size: 22px; font-weight: 600; margin: 20px 0 35px; }
#item .cs p span { border-bottom: 8px solid #4874ab; }
#item .btn-more { margin: 40px 0 0; }
#item .btn-more a { color: #000; font-size: 19px; font-weight: 600; max-width: 480px !important; background: #eeeeee; border-radius: 10px; box-shadow: 2px 2px 0px 0px rgba(72, 116, 171, 1); padding: 30px 0 26px; margin: 0 auto; display: block; }


/* #feature */
#feature { background: #f1f2f8; padding: 60px 4.4vw 80px; }
#feature h3 { font-size: 32px; font-weight: 600; text-align: left; padding: 0 0 20px 40px; position: relative; }
#feature h3::before {
	content: '';
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url(../img/feature_parts.png);
	background-size: contain;
 	position: absolute; top: 8px; left: 0; }
#feature .box { position: relative; }
#feature .box img { border-radius: 15px; border: 1px solid #6f76b6; box-sizing: border-box; box-shadow: 5px 5px 0px 0px #6f76b6; }
#feature .img01 { width: 66.8%; margin: 0 0 2vw; }
#feature .img01 img { width: calc(100% - 2vw); margin: 0 2vw 0 0; }
#feature .img02 { width: 66.8%; margin: 0 0 2vw; }
#feature .img02 img { width: calc(100% - 2vw); margin: 0 2vw 0 0; }
#feature .img03 { width: 33.2%; position: absolute; top: 0; left: 66.8%; }
#feature .img04 { width: 33.2%; position: absolute; top: 31.9vw; left: 66.8%; }


/* #how-to-use */
#how-to-use { background: #fff; padding: 40px 4.4vw 80px; }
#how-to-use .en { color: #c2c4dd; font-size: 60px; text-align: center; line-height: 1em; font-family: "altivo", sans-serif; }
#how-to-use h3 { color: #fff; font-size: 28px; font-weight: 600; font-family: "M PLUS Rounded 1c", sans-serif; background: #777cb7; border-radius: 10px; margin: 0 0 30px; display: inline-block; }
#how-to-use p { text-align: left; }
#how-to-use ol { font-size: 16px; text-align: left; margin: 0 0 0 30px; }
#how-to-use ol li { line-height: 1.4em; text-indent: -30px; margin: 0 0 5px; }
#how-to-use ol li:last-child { margin-bottom: 0; }
#how-to-use ol li .num { color: #777cb7; font-size: 24px; font-weight: 700; font-family: "altivo", sans-serif; }
#how-to-use .block01 { margin: -20px 0 0; position: relative; z-index: 2; }
#how-to-use .block01 h3 { padding: 8px 40px 5px 45px; }
#how-to-use .block01 .box { background: #f6f6f6; margin: 0 8.8vw 50px; padding: 40px 4.4vw 45px; }
#how-to-use .block01 .box h4 { font-size: 26px; font-weight: 600; margin: 0 0 20px; }
#how-to-use .block01 .box p { margin: 15px 0 25px; }
#how-to-use .block01 .box .btn-more a { color: #fff; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; background: #777cb7; display: block; max-width: 350px; border-radius: 60px; box-shadow: 2px 2px 0px 0px rgba(153, 153, 153, 1); padding: 20px 0 16px; margin: 0 auto; }
#how-to-use .block01  ul { text-align: left; }
#how-to-use .block01  ul > li:nth-child(1) { width: calc(50% - 2.2vw); float: left; margin: 0 2.2vw 0 0; } 
#how-to-use .block01  ul > li:nth-child(2) { width: calc(50% - 2.2vw); float: left; margin: 0 0 0 2.2vw; } 
#how-to-use .block01  ul > li:nth-child(3) { width: 100%; margin: 30px 0 0; }
#how-to-use .block01 ul li h4 { font-size: 25px; border-bottom: 5px solid #777cb7; margin: 0 0 20px; }
#how-to-use .block01 ul li h4 span { font-size: 20px; }
#how-to-use .block01 ul li:nth-child(1) ol li figure { padding: 15px 7vw 10px; }
#how-to-use .block01 ul li:nth-child(1) .red { color: #de7f83; }
#how-to-use .block01 ul li:nth-child(2) .cfix { margin: 20px 0 0; } 
#how-to-use .block01 ul li:nth-child(2) .pic { width: calc(48% - 0.7vw); float: left; margin: 0 0.7vw 0 0; }
#how-to-use .block01 ul li:nth-child(2) .pic .cap { font-size: 12px; text-align: center; }
#how-to-use .block01 ul li:nth-child(2) .tx { width: calc(52% - 0.7vw); margin: 0 0 0 0.7vw; float: left; }
#how-to-use .block01 ul li:nth-child(2) .tx h5 { font-size: 14px; text-decoration: underline; margin: 0 0 5px; }
#how-to-use .block01 ul li:nth-child(2) .tx p { font-size: 14px; line-height: 1.6em; }
#how-to-use .block01 ul li:nth-child(3) { margin-bottom: 0; }
#how-to-use .block02 { margin: 60px 0 0; position: relative; z-index: 1; }
#how-to-use .block02 h3 { position: relative; padding: 8px 85px 5px; }
#how-to-use .block02 h3 sup { font-size: 12px; }
#how-to-use .block02 h3::before {
	content: '';
	display: inline-block;
	width: 27px;
	height: 31px;
	background-image: url(../img/how-to-use_parts.png);
	background-size: contain;
	background-repeat: no-repeat; 
 	position: absolute; top: calc(50% - 16px); left: 40px; }
#how-to-use .block02 h3 .img { width: 19vw; position: absolute; top: -8.4vw; right: -14.7vw; z-index: 1; }
#how-to-use .block02 figure img { width: 20vw; float: left; }
#how-to-use .block02 p { font-weight: 600; margin: 0 0 20px; position: relative; z-index: 2; }
#how-to-use .block02 ol { margin: 0 0 0 calc(22.2vw + 30px); }


/* #recommended-recipe */
#recommended-recipe {  padding: 60px 8.8vw 120px; }
#recommended-recipe h3 { color: #777cb7; font-size: 45px; font-weight: 700; letter-spacing: 0.1em; font-family: "altivo", sans-serif; position: relative; }
#recommended-recipe h3 span { font-size: 25px; font-weight: normal; }
#recommended-recipe h3::before {
	content: '';
	display: inline-block;
	width: 170px;
	height: 10px;
	background: #de7f83;
	position: absolute; bottom: -15px; left: calc(50% - 85px); }
#recommended-recipe .tit-jp { color: #777cb7; font-size: 14px; font-weight: 500; letter-spacing: 0.5em; font-family: "M PLUS Rounded 1c", sans-serif; margin: 25px 0 0 10px; }
#recommended-recipe .recipe-vis { margin: 30px 0 0; position: relative; }
#recommended-recipe .recipe-vis .tx { text-align: left; position: absolute; top: 8.45vw; left: 7.35vw; }
#recommended-recipe .recipe-vis .tx h4 { width: 35.66vw; }
#recommended-recipe .recipe-vis .tx p { color: #FFFFFF; font-size: 1.1vw; margin: 1.5vw 0 0; }
#recommended-recipe .recipe-vis .btn-more { position: absolute; bottom: 4vw; left: 4.4vw; }
#recommended-recipe .recipe-vis .btn-more a { color: #fff; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; background: #777cb7; display: block; width: 300px; border-radius: 60px; box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.6); padding: 20px 0 16px; margin: 0 auto; }



@media screen and (max-width: 768px) {
	
	
	.new2025sep p { font-size: 13px; line-height: 1.8em; }
	
	.btn-more a:hover { transform: scale(1.04); }	
	
	
	#vis img { width: 110%; margin: 0 0 0 -5%; }	
	
	
	/* #intro */
	#intro { padding: 0 4.4vw 3vw; }
	#intro h2 { padding: 0; }
	#intro h2 img { width: 110%; margin: 0 0 0 -5%; }
	#intro .overview { margin: -5vw 0 0; }
	#intro .overview .img01 { width: 108%; margin: -3vw 0 0 -4%; }
	#intro .overview .img02 { position: absolute; top: -11vw; left: -2vw; width: 15vw; }
	#intro .overview p { font-size: 2vw; padding: 1vw 0 0; }

	
	/* #works-keytag */
	#works-keytag { padding: 0 4.4vw 10vw; }
	#works-keytag::before {
	background-size: cover;
 	position: absolute; top: -2.5vw; left: 0; z-index: 1; }	
	#works-keytag h3 { margin: 0 0 0 -5vw; }
	#works-keytag h3 img { width: 59vw; }
	#works-keytag .list01 { margin: 6vw 0 0; }
	#works-keytag .list01 li:nth-child(1) { width: calc(100% - 8vw); position: relative; margin: 0 8vw 8vw 0; }
	#works-keytag .list01 li:nth-child(1) .parts { width: 18vw; position: absolute; top: 1.5vw; left: 2vw; }		
	#works-keytag .list01 li:nth-child(2) { width: calc(100% - 8vw); position: static; margin: 0 0 0 8vw; }
	#works-keytag .list01 li:nth-child(2) .parts { width: 12vw;; position: absolute; top: 3.2vw; right: 4.1vw; }
	#works-keytag .list02 { margin: 12vw 0 0; }
	#works-keytag .list02 li:nth-child(1) { width: calc(100% - 8vw); padding: 0 6vw 0 2vw; margin: 0 0 8vw; }
	#works-keytag .list02 li:nth-child(1) .parts { width: 16.7vw; position: absolute; top: -5.2vw; left: 4.1vw; }		
	#works-keytag .list02 li:nth-child(2) { width: calc(100% - 8vw); padding: 0 2vw 0 6vw; position: static; }
	#works-keytag .list02::before {
		width: 72vw;
		height: 72vw;
 		position: absolute; top: -8vw; right: -8.8vw; }	
	#works-keytag .list02 li:nth-child(2) .parts { width: 13.8vw; position: absolute; top: 2.7vw; left: 5.8vw; }
	#works-keytag .list03 { margin: 8vw 0 0; position: relative; }
	#works-keytag .list03 li:nth-child(1) { width: 100%; padding: 0; margin: 0 0 8vw; }
	#works-keytag .list03 li:nth-child(2) { width: calc(100% - 16vw); padding: 0 8vw; position: static; }
	#works-keytag .list03::before {
		width: 58vw;
		height: 58vw;
 		position: absolute; top: inherit; left: -4.4vw; bottom: -10vw;  }
	#works-keytag .notes { font-size: 11px; text-align: left; margin: 12vw 0 0; }	


	/* #works-motif */
	#works-motif { padding: 4vw 4.4vw 0; margin: 0 0 26vw; }
	#works-motif::before {
	position: absolute; bottom: -29vw; left: 0; }
	#works-motif h3 { text-align: left; margin: 0 0 0 -5vw; }
	#works-motif h3 img { width: 59vw; }
	#works-motif .notes { font-size: 2vw; line-height: 1.4em; padding: 1vw 0 0; }
	#works-motif .list01 { margin: 6vw 0 0;  }
	#works-motif .list01 li:nth-child(1) { width: calc(100% - 8vw); position: relative; margin: 0 8vw 8vw 0; }
	#works-motif .list01 li:nth-child(1) .parts01 { width: 23.7vw; position: absolute; bottom: 5.2vw; left: 10.6vw; }
	#works-motif .list01 li:nth-child(1) .parts02 { width: 16.5vw; position: absolute; top: 2vw; left: 50vw; }	
	#works-motif .list01 li:nth-child(2) {  width: calc(100% - 8vw); position: static; margin: 0 0 0 8vw; }
	#works-motif .list01 li:nth-child(2) .parts01 { width: 23.7vw; position: absolute; top: 4.5vw; right: 10.2vw; }
	#works-motif .list01 li:nth-child(2) .parts02 { width: 15.3vw; position: absolute; bottom: 6.5vw; left: 6.3vw; }	
	#works-motif .list01::before {
		width: 72vw;
		height: 72vw;
 		position: absolute; top: -10vw; right: -8.8vw; }
	#works-motif .list02 {  margin: 12vw 0 0; }
	#works-motif .list02 li:nth-child(1) { width: calc(100% - 8vw); padding: 0 6vw 0 2vw; margin: 0 0 8vw; }
	#works-motif .list02 li:nth-child(1) .parts { width: 16.5vw; position: absolute; top: -10vw; left: 2.9vw; }
	#works-motif .list02 li:nth-child(2) {width: calc(100% - 8vw); padding: 4vw 2vw 0 6vw; position: static; }
	#works-motif .list02 li:nth-child(2) .parts { width: 20vw; position: absolute; top: -11.6vw; left: -3.6vw; }
	#works-motif .list03 { margin: 8vw 0 0; position: relative; z-index: 3; }
	#works-motif .list03 li:nth-child(1) { width: 100%; padding: 0; margin: 0 0 8vw; }
	#works-motif .list03 li:nth-child(2) {  width: calc(100% - 16vw); padding: 0 8vw; position: static; }
	#works-motif .list03 li:nth-child(2) .img { width: 40vw; position: absolute; top: 56vw; left: 12vw; }	
	#works-motif .list03::before {
		width: 58vw;
		height: 58vw;
 		position: absolute; top: inherit; left: -4.4vw; bottom: -10vw; }
	#works-motif .notes { font-size: 11px; text-align: left; margin: 12vw 0 0; }


	/* #item */
	#item { padding: 0 4.4vw 40px; }
	#item .date p { font-size: 14px; padding: 1px 15px 0;}
	#item .design p { font-size: 14px; padding: 1px 15px 0; }
	#item .box { margin: 20px 0 0 0; }
	#item .box .box-inner { width: 100%; margin: 0 0 10px; padding: 40px 0 30px; }
	#item .box .box-inner h3 { font-size: 18px; }
	#item .box .box-inner p { font-size: 12px; }
	#item .box .box-inner ul { padding: 10px 4.4vw 20px; margin: 0 0 0 16px; }
	#item .box .box-inner ul li { font-size: 13px; line-height: 1.6em; text-indent: -16px; }
	#item .box .box-inner figure { padding: 0 6vw; }
	#item .box .box-inner figure .parts { width: 20vw; position: absolute; top: -3vw; left: calc(50% - 10vw); }
	#item .box .box-inner .onsale { width: 18vw; position: absolute; top: 3vw; left: 3vw; }		
	#item .box .box-inner .btn-more { margin: 15px 0 0; }
	#item .box .box-inner .btn-more a { font-size: 15px; padding: 19px 0 15px; }
	#item .btn-more { margin: 20px 0 0; }
	#item .btn-more a { font-size: 15px; padding: 22px 0 18px; }
	#item .box .box-inner .btn-more.btn01 { margin: 15px 0 0; }
	#item .box .box-inner .btn-more.btn02 { margin: 10px 0 0; }	
	
	
	/* #feature */
	#feature { padding: 30px 4.4vw 40px; }
	#feature h3 { font-size: 18px; padding: 0 0 10px 26px; }
	#feature h3::before {
		width: 20px;
		height: 20px;
 		position: absolute; top: 3px; left: 0; }	
	#feature .box img { border-radius: 10px; box-shadow: 2px 2px 0px 0px #6f76b6; }
	#feature .img01 { width: 100%; }
	#feature .img01 img { width: 100%; margin: 0; }
	#feature .img02 { width: 100%; }
	#feature .img02 img { width: 100%; margin: 0; }
	#feature .img03 { width: calc(50% - 1vw); position: static; margin: 0 1vw 0 0; }
	#feature .img04 { width: calc(50% - 1vw); position: absolute; top: 98vw; left: 50%; margin: 0 0 0 1vw; }
	#feature .img05 { width: 100%; margin: 2vw 0 0; }
	
	
	/* #how-to-use */
	#how-to-use { padding: 20px 4.4vw 40px; }
	#how-to-use .en { font-size: 40px; }
	#how-to-use h3 { font-size: 20px; margin: 0 0 15px; }
	#how-to-use ol { margin: 0 0 0 18px; }
	#how-to-use ol li { font-size: 13px; text-indent: -18px; line-height: 1.8em; margin: 0 0 5px; }
	#how-to-use ol li .num { font-size: 13px; }
	#how-to-use .block01 { margin: -15px 0 0; }
	#how-to-use .block01 h3 { padding: 5px 25px 3px 30px; }
	#how-to-use .block01 .box {  margin: 0 0 30px; padding: 30px 4.4vw; }
	#how-to-use .block01 .box h4 { font-size: 16px;  margin: 0 0 10px; }
	#how-to-use .block01 .box p { margin: 10px 0; }
	#how-to-use .block01 .box .btn-more a { font-size: 15px; padding: 19px 0 15px;  }
	#how-to-use .block01  ul > li:nth-child(1) { width: 100%; margin: 0; } 
	#how-to-use .block01  ul > li:nth-child(2) { width: 100%; margin: 20px 0 0; } 
	#how-to-use .block01  ul > li:nth-child(3) { width: 100%; margin: 20px 0 0; }
	#how-to-use .block01 ul li h4 { font-size: 18px; border-bottom: 3px solid #4874ab; margin: 0 0 10px; }
	#how-to-use .block01 ul li h4 span { font-size: 14px; }
	#how-to-use .block01 ul li:nth-child(1) ol li figure { padding: 10px 4.4vw 5px; }
	#how-to-use .block01 ul li:nth-child(2) .cfix { margin: 15px 0 0; } 
	#how-to-use .block01 ul li:nth-child(2) .pic { width: calc(100% - 8.8vw); margin: 0; padding: 0 4.4vw 10px; }
	#how-to-use .block01 ul li:nth-child(2) .pic .cap { font-size: 11px; }
	#how-to-use .block01 ul li:nth-child(2) .tx { width: 100%; margin: 0; }
	#how-to-use .block01 ul li:nth-child(2) .tx h5 { font-size: 13px; }
	#how-to-use .block01 ul li:nth-child(2) .tx p { font-size: 13px; }
	#how-to-use .block02 { margin: 30px 0 0; }
	#how-to-use .block02 h3 { padding: 5px 30px 3px 35px; }
	#how-to-use .block02 h3 sup { font-size: 11px; }
	#how-to-use .block02 h3::before {
		width: 21px;
		height: 24px;
 		position: absolute; top: calc(50% - 12px); left: 10px; }
	#how-to-use .block02 h3 .img { width: 30vw; position: absolute; top: -13vw; right: -17vw; }
	#how-to-use .block02 figure { padding: 0 13vw 10px; }
	#how-to-use .block02 figure img { width: 100%; float: none; }
	#how-to-use .block02 p { margin: 0 0 10px; }
	#how-to-use .block02 ol { margin: 0 0 0 18px; }
	
	
	/* #recommended-recipe */
	#recommended-recipe {  padding: 30px 4.4vw 60px; }
	#recommended-recipe h3 {  font-size: 35px; }
	#recommended-recipe h3 span { font-size: 15px; }
	#recommended-recipe h3::before {
		width: 120px;
		height: 5px;
		position: absolute; bottom: -8px; left: calc(50% - 60px); }
	#recommended-recipe .tit-jp {font-size: 11px; margin: 15px 0 0 5px; }
	#recommended-recipe .recipe-vis { margin: 15px 0 0; }
	#recommended-recipe .recipe-vis .tx { position: absolute; top: 5vw; left: 5vw; }
	#recommended-recipe .recipe-vis .tx h4 { width: 50vw; }
	#recommended-recipe .recipe-vis .tx p { font-size: 1.8vw; line-height: 1.6em; }
	#recommended-recipe .recipe-vis .btn-more { position: static; margin: 20px 0 0; }
	#recommended-recipe .recipe-vis .btn-more a { font-size: 15px; width: 100%; padding: 19px 0 15px;   }
	

    .sp-w { margin: 0 -4.4vw !important; width: calc(100% + 8.8vw) !important }
}