.wrap .title { text-align: center; font-size: 40px; }
.wrap .stitle { text-align: center; font-size: 22px; }
.wrap p.more { text-align: center; }
.wrap p.more a { color: #000; }
.wrap p.more span , .wrap p.more i { margin-right: 5px; display: inline-block; vertical-align: middle; }

/* aboutBox */
#aboutBox { position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 2; }
#aboutBox .info { margin: 15vh 0 40px; }
#aboutBox .info p { font-size: 18px; }

/* aboutplaceholder */
#aboutplaceholder { position: relative; width: 100%; height: 100vh; z-index: 1; }

/* customBox */
#customBox { text-align: center; }
#customBox .workframe { font-size: 0; }
#customBox .aos-item { padding: 10px 20px; width: calc((100% / 3) - 40px); display: inline-block; }
#customBox .aos-item:nth-child(2) { transition-delay: .2s; }
#customBox .aos-item:nth-child(3) { transition-delay: .4s; }
#customBox .aos-item h2 { text-align: center; font-size: 30px; }
#customBox .aos-item article { text-align: center; font-size: 16px; color: #000; }

/* smallpicture */
#smallpicture { padding: 100px 0 60px; }
#smallpicture .workframe { text-align: center; }
#smallpicture .row { position: relative; margin: 0 20px; display: inline-block; vertical-align: top; }
#smallpicture .row .roll { position: relative; text-align: center; z-index: 1; -webkit-transition: all 0.01s ease; transition: all 0.01s ease; }
#smallpicture .row.right { margin-top: 100px; }
#smallpicture .row.left .roll:first-child { position: absolute; z-index: 2; left: -30%; top: 30px; }
#smallpicture .row.right .roll:first-child { position: absolute; z-index: 2; right: -30%; top: 30px; }
#smallpicture .row .roll a.photo { display: inline-block; }

#nyBox , #contactBox { position: relative; width: 100%; height: 110vh; }
/* nyBox youtubeBox */
#nyBox .youtubeBox ,
#contactBox .mpaBox { position: relative; width: 1440px; height: 70vh; background: no-repeat 50% / cover; top: 15vh; left: calc((100% - 1440px) / 2); z-index: 1; }
#nyBox .youtubeBox.fillBox ,
#contactBox .mpaBox.fillBox { position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 1; }
#nyBox .youtubeBox.fillBox.youtubplac { position: absolute; top: auto; bottom: 0; }
#nyBox .youtubeBox iframe , #contactBox .mpaBox #g-map , #contactBox .mpaBox #g-map iframe { position: relative; width: 100%; height: 100%; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; z-index: 1; }

/* nyBox NewsBox */
#nyBox #NewsBox { position: relative; padding: 0 0 60vh; background: rgba(0, 0, 0, .55); z-index: 2; }
#nyBox #NewsBox .title { padding: 70vh 0 10vh; text-align: left; font-size: 60px; color: #fff; }
#nyBox #NewsBox ul { width: 60%; }
#nyBox #NewsBox ul li , #nyBox #NewsBox ul li a { color: #fff; }
#nyBox #NewsBox ul li p a { font-size: 22px; }
#nyBox #NewsBox ul li p font { margin: 10px 0 20px; display: inline-block; font-size: 18px; }
#nyBox #NewsBox ul li h3 a { height: 70px; font-size: 40px; -webkit-line-clamp: 1; }
#nyBox #NewsBox p.more { text-align: left; }
#nyBox #NewsBox p.more a { padding: 10px 20px; background: #fff; border-radius: 20px; display: inline-block; }

/* product */
#product { padding-top: 10vh; }
#product .pro-list >div { margin: 10px auto; width: 70%; }
#product .pro-list >div a.photo img { width: 100%; }
#product .pro-list >div h3 a { margin: 20px 0; height: 41px; text-align: center; font-size: 26px; color: #000; -webkit-line-clamp: 1; }
#product .pro-list >div p { text-align: center; }
#product .pro-list >div p.price { min-height: 30px; }
#product .pro-list >div p.price span { margin: 0 10px; display: inline-block; font-size: 18px; color: #0072ea; vertical-align: middle; }
#product .pro-list >div p.price span.old { text-decoration: line-through; font-size: 14px; color: #6d6d6d; }
#product .pro-list >div p a.more { margin-top: 15px; padding: 5px 15px; background: #5a5858; display: inline-block; font-size: 16px; color: #fff; }

/* contactBox */
#contactBox .mpaBox.fillBox { position: absolute; height: 100%; }
#contactBox .mpaBox #g-map { position: relative; }
#contactBox .mpaBox #g-map:before { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .65); top: 0; left: 0; z-index: 2; content: ""; }
#contactBox .formBox { position: relative; padding-top: calc((100% - 445px) / 5); z-index: 2; }
#contactBox .formBox #form1 { box-shadow: 0 0 30px #413f3f; }

/* bookBox */
#bookBox { padding: 10vh 0; }
#bookBox .wall { position: relative; overflow: hidden; display: block; }
#bookBox .wall-column { position: relative; float: left; width: calc(100% / 3); display: block; box-sizing: border-box; }
#bookBox .wall-column .article { position: relative; margin: 15px; }
#bookBox .wall-column .article a { display: block; }
#bookBox .wall-column .article h3 { position: absolute; width: 100%; bottom: 0; left: 0; }
#bookBox .wall-column .article h3 a { margin: 10px; padding: 10px; background: rgba(255, 255, 255, .7); text-align: center; font-size: 18px; color: #444; }

@media screen and (max-width: 1500px) {
	#nyBox .youtubeBox , #contactBox .mpaBox { width: 1200px; left: calc((100% - 1200px) / 2); }
}
@media screen and (max-width: 1440px) {
	#nyBox .youtubeBox , #contactBox .mpaBox { width: 1160px; left: calc((100% - 1160px) / 2); }
}
@media screen and (max-width: 1280px) {
	#nyBox .youtubeBox , #contactBox .mpaBox { width: 90%; left: 5%; }
}
@media screen and (max-width: 1024px) {
	#aboutBox .info { margin: 9vh 0 20px; }
	#customBox { margin-top: 10vh; }
	#customBox .aos-item { margin: 20px auto; width: 80%; display: block; }
	#customBox .aos-item:nth-child(2) , #customBox .aos-item:nth-child(3) { transition-delay: inherit; }
	#smallpicture { padding: 0; }
	#contactBox .formBox { padding-top: 25vh; }
}
@media screen and (max-width: 980px) {
	#smallpicture .row { display: block; }
	#smallpicture .row.left .roll:first-child { text-align: left; left: 0; }
	#smallpicture .row.left .roll:last-child { text-align: right; }
	#smallpicture .row.right .roll:first-child { text-align: right; right: 0; }
	#smallpicture .row.right .roll:last-child { text-align: left; }
	#nyBox #NewsBox ul { width: 100%; }
	#product .pro-list >div { width: 85%; }
	#bookBox .wall-column { width: 50%; }
}
@media screen and (max-width: 640px) {
	#customBox { margin-top: 0; }
	#smallpicture .row.right { margin-top: 0; }
	#smallpicture .row.left .roll:first-child ,
	#smallpicture .row.right .roll:first-child { position: relative; text-align: left; }
	#smallpicture .row .roll:last-child a { margin-top: -50px; width: 80%; }
	#smallpicture .row.right .roll:last-child { text-align: right; }
	#bookBox .wall-column { width: 100%; }
}