@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: #f3d4e3; }

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


.new2025sep p { color: #3c3432; font-size: 16px; }
.new2025sep 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 8.8vw; 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.3vw 4.4vw 0; }

#intro .feature { margin: 5.1vw 0 0; position: relative; }
#intro .feature h3 { width: 36.7vw; }
#intro .feature .pic-list01 { margin: -1.6vw 0 0; }
#intro .feature .pic-list01 li:nth-child(1) { width: 48.5vw; float: left; }
#intro .feature .pic-list01 li:nth-child(2) { width: 40.2vw; float: right; margin: -12.1vw -1.1vw 0 0; position: relative; }
#intro .feature .pic-list01 li:nth-child(2) .img01 { position: absolute; bottom: -20vw; left: 0; width: 41.4vw; }

#intro .feature .pic-list02 { margin: 4.8vw 0 0; position: relative; }
#intro .feature .pic-list02 li:nth-child(1) { width: 39vw; float: left; margin: 0 0 0 -4.4vw; }
#intro .feature .pic-list02 li:nth-child(2) { width: 35vw; margin: 0 0 0 -4.4vw; position: absolute; top: 8vw; right: 22.1vw; z-index: 1;  }
#intro .feature .pic-list02 li:nth-child(3) { width: 28vw; float: right; margin: -0.3vw -4.4vw 0 0; position: relative; z-index: 2; }
#intro .feature .kazari { position: absolute; top: -10vw; left: 0; width: 7vw; }
#intro .feature .pic-list02 li:nth-child(3) p { font-size: 0.8vw; text-align: left; line-height: 1.6em; padding: 1vw 1vw 0 2.9vw; }
#intro .feature::before {
	content: '';
	display: inline-block;
	width: 29vw;
	height: 29vw;
	background-image: url(../img/bg800.jpg);
	background-size: contain;
 	position: absolute; top: 0; right: -4.4vw; }


/* #works-wave */
#works-wave { background: #f6eaf0; padding: 0 4.4vw 11.3vw; position: relative; }
#works-wave::before {
	content: '';
	width: 100%;
	height: 17.6vw;
	background-image: url(../img/line01.jpg);
	background-size: auto;
 	position: absolute; top: -2.5vw; left: 0; z-index: 1; }
#works-wave h3 { text-align: left; margin: 0 0 0 -6vw; position: relative; z-index: 2; }
#works-wave h3 img { width: 40.5vw; }
#works-wave ul li .pic { position: relative; }
#works-wave .list01 {  margin: 3.3vw 0 0; position: relative; }
#works-wave .list01 li:nth-child(1) { width: 46vw; position: relative; z-index: 2; }
#works-wave .list01 li:nth-child(1) .parts { width: 8.9vw; position: absolute; top: -2.2vw; left: 0.9vw; }
#works-wave .list01 li:nth-child(2) { width: 50vw; position: absolute; top: -14vw; left: 41vw; z-index: 3; }
#works-wave .list01 li:nth-child(2) .parts { width: 10vw; position: absolute; top: -1.8vw; left: -6vw; }
#works-wave .list02 { margin: 4.4vw 0 0; position: relative; }
#works-wave .list02 li:nth-child(1) { width: 42vw; padding: 0 0 0 8.8vw; position: relative; z-index: 2; }
#works-wave .list02 li:nth-child(1) .parts { width: 8.2vw; position: absolute; top: -2.9vw; left: 2.9vw; }
#works-wave .list02 li:nth-child(2) { width: 42vw; position: absolute; top: 3.6vw; left: 49.4vw; z-index: 1; }
#works-wave .list02::before {
	content: '';
	display: inline-block;
	width: 29vw;
	height: 29vw;
	background-image: url(../img/bg800.jpg);
	background-size: contain;
 	position: absolute; top: -9vw; right: -4.4vw; }
#works-wave .list02 li:nth-child(2) .parts { width: 9vw; position: absolute; bottom: 2.9vw; left: 6.2vw; }
#works-wave .list03 { margin: 4.4vw 0 0; position: relative; }
#works-wave .list03 li:nth-child(1) { width: 44.5vw; position: relative; z-index: 1; }
#works-wave .list03 li:nth-child(1) .parts { width: 6.8vw; position: absolute; top: 1.6vw; left: 4.7vw; }
#works-wave .list03 li:nth-child(1) .img { width: 23vw; position: absolute; bottom: -13vw; left: -1.4vw; }
#works-wave .list03 li:nth-child(2) { width: 48vw; position: absolute; top: 6.6vw; left: 43vw; z-index: 2; }
#works-wave .list03 li:nth-child(2) .parts { width: 18vw; position: absolute; bottom: 5.3vw; left: 5.3vw; }
#works-wave .list04 { margin: 15vw 0 0; position: relative; }
#works-wave .list04 li:nth-child(1) { width: 46.7vw; padding: 0 0 0 4.4vw; position: relative; z-index: 2; }
#works-wave .list04 li:nth-child(2) { width: 36vw; padding: 0 4.4vw 0 0; position: absolute; top: 12.5vw; left: 50.5vw; z-index: 1; }
#works-wave .list04::before {
	content: '';
	display: inline-block;
	width: 29vw;
	height: 29vw;
	background-image: url(../img/bg800.jpg);
	background-size: contain;
 	position: absolute; bottom: -4vw; left: -4.4vw; }


/* #works-speechbubble */
#works-speechbubble { text-align: left; background: #e2c7ce; padding: 3vw 4.4vw 0; position: relative; z-index: 2; margin: 0 0 15vw; }
#works-speechbubble::before {
	content: '';
	width: 100%;
	height: 29vw;
	background-image: url(../img/line02.jpg);
	background-size: cover;
 	position: absolute; bottom: -21vw; left: 0; z-index: 1; }
#works-speechbubble h3 { text-align: left; margin: 0 0 0 -6vw; }
#works-speechbubble h3 img { width: 41vw; margin: 0; }
#works-speechbubble ul li .pic { position: relative; }
#works-speechbubble .list01 {  margin: 2.2vw 0 0; position: relative; }
#works-speechbubble .list01 li:nth-child(1) { width: 46vw; position: relative; z-index: 1; }
#works-speechbubble .list01 li:nth-child(1) .parts { width: 7.8vw; position: absolute; top: 1.3vw; left: 5.5vw; }
#works-speechbubble .list01 li:nth-child(2) { width: 50vw; position: absolute; top: -12vw; left: 41vw; z-index: 2; }
#works-speechbubble .list01 li:nth-child(2) .parts { width: 13.6vw; position: absolute; top: 1.6vw; left: 3.1vw; }
#works-speechbubble .list01::before {
	content: '';
	display: inline-block;
	width: 29vw;
	height: 29vw;
	background-image: url(../img/bg800.jpg);
	background-size: contain;
 	position: absolute; top: -20vw; right: -4.4vw; }
#works-speechbubble .list02 { margin: 10vw 0 0; position: relative; }
#works-speechbubble .list02 li:nth-child(1) { width: 42vw; padding: 0 0 0 4.4vw; position: relative; z-index: 2; }
#works-speechbubble .list02 li:nth-child(1) .parts { width: 7.2vw; position: absolute; top: 3.6vw; left: 8.2vw; }
#works-speechbubble .list02 li:nth-child(2) { width: 42vw; position: absolute; top: -5vw; left: 49.2vw; z-index: 1; }
#works-speechbubble .list02 li:nth-child(2) .parts { width: 12vw; position: absolute; top: -2.3vw; left: 3.6vw; }
#works-speechbubble .list03 { margin: 4.4vw 0 0; position: relative; }
#works-speechbubble .list03 li:nth-child(1) { width: 44.5vw; position: relative; z-index: 1; }
#works-speechbubble .list03 li:nth-child(1) .parts { width: 15vw; position: absolute; top: 1.7vw; left: 13.2vw; }
#works-speechbubble .list03 li:nth-child(2) { width: 48vw; position: absolute; top: 5vw; left: 43vw; z-index: 2; }
#works-speechbubble .list03 li:nth-child(2) .parts { width: 11.5vw; position: absolute; top: -5.1vw; left: 5.5vw; }
#works-speechbubble .list04 { margin: 13vw 0 0; position: relative; }
#works-speechbubble .list04 li:nth-child(1) { width: 44vw; padding: 0 0 0 4.4vw; position: relative; z-index: 2; }
#works-speechbubble .list04 li:nth-child(2) { width: 40vw; padding: 0 4.4vw 0 0; position: absolute; top: 7.7vw; left: 47vw; z-index: 1; }
#works-speechbubble .list04::before {
	content: '';
	display: inline-block;
	width: 36vw;
	height: 36vw;
	background-image: url(../img/bg1000.jpg);
	background-size: contain;
 	position: absolute; top: -9vw; left: -4.4vw; }
#works-speechbubble .notes { font-size: 12px; margin: 1vw 0 0; }


/* #item */
#item { padding: 0 1vw 80px; position: relative; z-index: 2; }
#item .date p { color: #fff; font-size: 18px; font-weight: 600; background: #5273a7; 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: #f6eaf0; border-radius: 10px; margin: 0 0 0 1vw; padding: 40px 0 50px; }
#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 .btn-more { margin: 30px 0 0; }
#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 li:nth-child(1) h3 { color: #2d83c1; }
#item .box li:nth-child(1) li span { color: #2d83c1; }
#item .box li:nth-child(1) .btn-more a { color: #2d83c1; box-shadow: 2px 2px 0px 0px rgba(82, 115, 167, 1); }
#item .box li:nth-child(2) h3 { color: #a14c57; }
#item .box li:nth-child(2) li span { color: #a14c57; }
#item .box li:nth-child(2) .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 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; }


/* #how-to-use */
#how-to-use { background: #fff; padding: 40px 4.4vw 80px; }
#how-to-use .en { color: #b2c1d7; 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: #4874ab; 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: #4874ab; 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: #4874ab; 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 #4874ab; 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 4.4vw 10px; }
#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: #4f72a7; 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: #4f72a7; 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: #000; 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: #4874ab; display: block; width: 300px; border-radius: 60px; box-shadow: 2px 2px 0px 0px rgba(153, 153, 153, 1); 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 5vw; }
	#intro h2 { padding: 0; }
	#intro h2 img { width: 110%; margin: 0 0 0 -5%; }
	#intro .overview { margin: -5vw 0 0; }
	#intro .overview .img01 { width: 110%; margin: 0 0 0 -5%; }
	#intro .overview .img02 { position: absolute; top: -7.5vw; left: -4vw; }
	#intro .overview p { font-size: 2vw; }
	#intro .feature h3 { width: 40vw; }
	#intro .feature .pic-list02 li:nth-child(3) p { font-size: 1.4vw; line-height: 1.4em; }
	#intro .feature { margin: 5.1vw 0 0; position: relative; }
	#intro .feature h3 { width: 50vw; margin: -2vw 0 0 -12vw; }
	#intro .feature .pic-list01 { margin: -1.6vw 0 0; }
	#intro .feature .pic-list01 li:nth-child(1) { width: 100%; margin: 0 0 3vw 0; }
	#intro .feature .pic-list01 li:nth-child(2) { width: calc(100% - 8.8vw); margin: 0 0 8vw; padding: 0 4.4vw }
	#intro .feature .pic-list01 li:nth-child(2) .img01 { position: absolute; bottom: -44vw; left: -9vw; width: 110%; }
	#intro .feature .pic-list02 { margin: 39vw 0 0; }
	#intro .feature .pic-list02 li:nth-child(1) { width: 100%; margin: 0 0 8vw; }
	#intro .feature .pic-list02 li:nth-child(2) { width: calc(100% - 6vw); margin: 0 0 8vw; padding: 0 0 0 6vw; position: static; }
	#intro .feature .pic-list02 li:nth-child(3) { width: calc(100% - 20vw); margin: 0; padding: 0 10vw; }
	#intro .feature .kazari { position: absolute; top: -10vw; left: inherit; right: -2.2vw; width: 14vw; }
	#intro .feature .pic-list02 li:nth-child(3) p { font-size: 2vw; line-height: 1.4em; padding: 2vw 0 0; }
	#intro .feature::before {
		width: 58vw;
		height: 58vw;
 		position: absolute; top: 7vw; right: -4.4vw; }
	
	
	/* #works-wave */
	#works-wave { padding: 0 4.4vw 10vw; }
	#works-wave::before {
	background-size: cover;
 	position: absolute; top: -2.5vw; left: 0; z-index: 1; }	
	#works-wave h3 { margin: 0 0 0 -5vw; }
	#works-wave h3 img { width: 59vw; }
	#works-wave .list01 { margin: 6vw 0 0; }
	#works-wave .list01 li:nth-child(1) { width: calc(100% - 8vw); position: relative; margin: 0 8vw 8vw 0; }
	#works-wave .list01 li:nth-child(1) .parts { width: 17.8vw; position: absolute; top: -4.4vw; left: 1.8vw; }
	#works-wave .list01 li:nth-child(2) { width: calc(100% - 8vw); position: static; margin: 0 0 0 8vw; }
	#works-wave .list01 li:nth-child(2) .parts { width: 20vw; position: absolute; top: -3.6vw; left: -12vw; }
	#works-wave .list02 { margin: 8vw 0 0; }
	#works-wave .list02 li:nth-child(1) { width: calc(100% - 20vw); padding: 0 16vw 0 4vw; margin: 0 0 8vw; }
	#works-wave .list02 li:nth-child(1) .parts { width: 16.4vw; position: absolute; top: -5vw; left: 2.9vw; }
	#works-wave .list02 li:nth-child(2) { width: calc(100% - 20vw); padding: 0 4vw 0 16vw; position: static; }
	#works-wave .list02::before {
		width: 58vw;
		height: 58vw;
 		position: absolute; top: -6vw; right: -4.4vw; }
	#works-wave .list02 li:nth-child(2) .parts { width: 18vw; position: absolute; bottom: 5vw; left: 6.2vw; }
	#works-wave .list03 { margin: 8vw 0 0; position: relative; }
	#works-wave .list03 li:nth-child(1) { width: calc(100% - 8vw); margin: 0 0 8vw; padding: 0 8vw 0 0; }
	#works-wave .list03 li:nth-child(1) .parts { width: 13.6vw; position: absolute; top: 3vw; left: 4.7vw; }
	#works-wave .list03 li:nth-child(1) .img { width: 40vw; position: absolute; bottom: -17vw; left: -8vw; }
	#works-wave .list03 li:nth-child(2) { width: calc(100% - 8vw); position: static; padding: 0 0 0 8vw; }
	#works-wave .list03 li:nth-child(2) .parts { width: 36vw; position: absolute; bottom: 8.6vw; left: 5.3vw; }
	#works-wave .list04 { margin: 8vw 0 0; position: relative; }
	#works-wave .list04 li:nth-child(1) { width: 100%; padding: 0; margin: 0 0 8vw; }
	#works-wave .list04 li:nth-child(2) { width: calc(100% - 16vw); padding: 0 8vw; position: static; }
	#works-wave .list04::before {
		width: 58vw;
		height: 58vw;
 		position: absolute; bottom: -6vw; left: -4.4vw; }	


	/* #works-speechbubble */
	#works-speechbubble { padding: 3vw 4.4vw 0; margin: 0 0 16vw; }
	#works-speechbubble::before {
	position: absolute; bottom: -21vw; left: 0; }
	#works-speechbubble h3 { text-align: left; margin: 0 0 0 -5vw; }
	#works-speechbubble h3 img { width: 59vw; }
	#works-speechbubble .notes { font-size: 2vw; line-height: 1.4em; padding: 1vw 0 0; }
	#works-speechbubble .list01 { margin: 6vw 0 0;  }	
	#works-speechbubble .list01 li:nth-child(1) { width: calc(100% - 8vw); position: relative; margin: 0 8vw 8vw 0; }
	#works-speechbubble .list01 li:nth-child(1) .parts { width: 13vw; position: absolute; top: 2.6vw; left: 11vw; }	
	#works-speechbubble .list01 li:nth-child(2) {  width: calc(100% - 8vw); position: static; margin: 0 0 0 8vw; }
	#works-speechbubble .list01 li:nth-child(2) .parts { width: 22vw; position: absolute; top: 3vw; left: 6vw; }	
	#works-speechbubble .list01::before {
	width: 58vw;
	height: 58vw;
 	position: absolute; top: -11vw; right: -4.4vw; }
	#works-speechbubble .list02 {  margin: 8vw 0 0; }
	#works-speechbubble .list02 li:nth-child(1) { width: calc(100% - 20vw); padding: 0 16vw 0 4vw; margin: 0 0 8vw; }
	#works-speechbubble .list02 li:nth-child(1) .parts { width: 14vw; position: absolute; top: 5vw; left: 12vw; }	
	#works-speechbubble .list02 li:nth-child(2) { width: calc(100% - 20vw); padding: 0 4vw 0 16vw; position: static; }
	#works-speechbubble .list02 li:nth-child(2) .parts { width: 22vw; position: absolute; top: -5vw; left: 5vw; }	
	#works-speechbubble .list03 { margin: 8vw 0 0; }
	#works-speechbubble .list03 li:nth-child(1) { width: calc(100% - 8vw); margin: 0 0 5vw; padding: 0 8vw 0 0; }
	#works-speechbubble .list03 li:nth-child(1) .parts { width: 28vw; position: absolute; top: 3.5vw; left: 25vw; }	
	#works-speechbubble .list03 li:nth-child(2) { width: calc(100% - 8vw); position: static; padding: 0 0 0 8vw; }
	#works-speechbubble .list03 li:nth-child(2) .parts { width: 17vw; position: absolute; top: -4vw; left: 10vw; }	
	#works-speechbubble .list04 { margin: 8vw 0 0; position: relative; z-index: 3; }
	#works-speechbubble .list04 li:nth-child(1) { width: 100%; padding: 0; margin: 0 0 8vw; }
	#works-speechbubble .list04 li:nth-child(2) {  width: calc(100% - 16vw); padding: 0 8vw; position: static; }
	#works-speechbubble .list04::before {
	width: 58vw;
	height: 58vw;
 	position: absolute; top: -6vw; left: -4.4vw; }


	/* #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 .btn-more { margin: 15px 0 0; }
	#item .box .box-inner .btn-more a { font-size: 15px; padding: 19px 0 15px; }
	#item .cs { padding: 20px 0 0; }
	#item .cs p { font-size: 16px; margin: 15px 0; text-align: left; }
	#item .cs p span { border-bottom: 4px solid #4874ab; }
	#item .cs img { width: 100px; }
	#item .btn-more a { font-size: 15px; padding: 22px 0 18px; }
	
	
	/* #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 }
}