@charset "utf-8";

/* common */
article { margin: 0 auto; width: 100%; max-width: 1164px; }
article h2 { padding: 15px 0 12px 0; font-family: "Viga", sans-serif; font-size: 140%; color: rgb(63, 32, 33); text-align: center; background-color: rgb(230, 218, 184); }
article section.body { margin: 0 auto; width: 94%; max-width: 600px; }
article section.body:nth-of-type(1) { margin-top: 60px; }
article section.body p { font-size: 110%; color: rgb(63, 32, 33); line-height: 1.6; }
@media screen and (max-width: 640px) {
	article section.body { width: 90%; }
	article h2 { padding: 13px 0 10px 0; font-size: 110%; }
	article section.body p { font-size: 90%; }
}

/* title */
article.title { position: relative;  background-color: rgb(63, 32, 33); background-color: rgb(63, 32, 33); background-position: center; background-repeat: no-repeat; background-size: cover; }
article.title.pc { background-image: url("../images/product/title_bg_pc.jpg"); }
article.title.sp { background-image: url("../images/product/title_bg_sp.jpg"); }
article.title h1 { display: -webkit-box; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-align-items: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; margin: 0 auto; width: 100%; height: 150px; background-color: rgba(0, 0, 0, 0.1); }
article.title h1 span { display: block; }
article.title h1 span:nth-child(1) { width: calc(236px*0.6); }
article.title h1 span:nth-child(2) { margin-left: 10px; width: calc(264px*0.6); }
article.title h1 span img { width: 100%; }
article.title p.logo { position: absolute; left: 10px; bottom: 10px; width: 60px; }
article.title p.logo img { width: 100%; }
@media screen and (max-width: 640px) {
	article.title h1 { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; -webkit-flex-direction: column; -webkit-justify-content: center; -webkit-align-items: center; -webkit-flex-wrap: wrap; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap;  height: 280px; }
	article.title h1 span:nth-child(2) { margin-top: 5px; margin-left: 0; }
	article.title h1 span img { width: 100%; }
	article.title p.logo { left: 10px; top: 10px; width: 40px; }
	article.title h1 span:nth-child(1) { margin: 0 auto; width: 165px; } /* android */
	article.title h1 span:nth-child(2) { margin: 5px auto 0 auto; width: 185px; } /* android */
}

/* naming */
article.naming section.body { display: -webkit-box; -webkit-box-pack: justify; -webkit-justify-content: space-between; -webkit-align-items: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
article.naming section.body p:nth-child(1) { width: 50%; }
article.naming section.body p:nth-child(2) { width: 42%; }
article.naming section.body p img { width: 100%; }
@media screen and (max-width: 640px) {
	article.naming section.body p:nth-child(1) { position: relative; width: 55%; z-index: 2; }
	article.naming section.body p:nth-child(2) { position: relative; margin-left: -10%; width: 55%; z-index: 1; }
}

/* history */
article.history { margin-top: 60px; }
article.history section.body:nth-of-type(1) { display: -webkit-box; -webkit-box-pack: justify; -webkit-justify-content: space-between; -webkit-align-items: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
article.history section.body:nth-of-type(1) p:nth-child(1) { width: 30%; }
article.history section.body:nth-of-type(1) p:nth-child(1) img { width: 100%; }
article.history section.body:nth-of-type(1) p:nth-child(2) { width: 65%; }
article.history section.body:nth-of-type(2) { margin-top: 40px; }
article.history section.body:nth-of-type(3) { margin-top: 30px; }
article.history section.body:nth-of-type(3) p { margin: 0 auto; width: 25%; }
article.history section.body:nth-of-type(3) p img { width: 100%; }
@media screen and (max-width: 640px) {
	article.history section.body:nth-of-type(1) p:nth-child(1) { width: 35%; }
	article.history section.body:nth-of-type(1) p:nth-child(2) { width: 60%; }
	article.history section.body:nth-of-type(2) { margin-top: 30px; }
	article.history section.body:nth-of-type(3) { margin-top: 30px; }
}

/* flavor */
article.flavor { margin-top: 60px; }
article.flavor section.body { display: -webkit-box; -webkit-box-pack: justify; -webkit-justify-content: space-between; -webkit-align-items: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
article.flavor section.body:nth-of-type(1) p:nth-child(1) { width: 55%; }
article.flavor section.body:nth-of-type(1) p:nth-child(2) { width: 35%; }
article.flavor section.body:nth-of-type(1) p:nth-child(2) img { width: 100%; }
article.flavor section.body:nth-of-type(2) { margin-top: 15px; }
article.flavor section.body:nth-of-type(2) p:nth-child(1) { width: 30%; }
article.flavor section.body:nth-of-type(2) p:nth-child(1) img { width: 100%; }
article.flavor section.body:nth-of-type(2) p:nth-child(2) { width: 60%; }
@media screen and (max-width: 640px) {
	article.flavor section.body:nth-of-type(1) p:nth-child(1) { width: 55%; }
	article.flavor section.body:nth-of-type(1) p:nth-child(2) { width: 42%; }
	article.flavor section.body:nth-of-type(2) p:nth-child(1) { width: 35%; }
	article.flavor section.body:nth-of-type(2) p:nth-child(2) { width: 60%; }
}

/* world */
article.world { margin-top: 60px; margin-bottom: 50px; }
article.world section.body:nth-of-type(1) { display: -webkit-box; -webkit-box-pack: justify; -webkit-justify-content: space-between; -webkit-align-items: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
article.world section.body:nth-of-type(1) p:nth-child(1) { width: 55%; }
article.world section.body:nth-of-type(1) p:nth-child(2) { width: 35%; }
article.world section.body:nth-of-type(1) p:nth-child(2) img { width: 100%; }
article.world section.body:nth-of-type(2) { margin-top: 40px; }
@media screen and (max-width: 640px) {
	article.world section.body:nth-of-type(1) p:nth-child(1) { width: 55%; }
	article.world section.body:nth-of-type(1) p:nth-child(2) { width: 45%; }
	article.world section.body:nth-of-type(2) { margin-top: 30px; }
}

/* love */
article.love { display: none; position: relative; margin: 0 auto 90px auto; width: 290px; min-height: 300px; }
article.love p { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 290px; min-height: 300px; }
article.love p img { width: 100%; }
@media screen and (max-width: 480px) {
	article.love { width: 260px; min-height: 270px; }
	article.love p { width: 260px; min-height: 270px; }
}

/* lazy: fadeInRollUp */
.fadeInRollUp.first { opacity: 0; -webkit-transform: translate(0, 280px) rotate(125deg); transform: translate(0, 280px) rotate(125deg); }
.fadeInRollUp.on { opacity: 1; -webkit-animation: fadeInRollUp 0.9s ease-in; -webkit-transform: translate(0, 0) rotate(0); -webkit-transform-origin: center top; animation: fadeInRollUp 0.9s ease-in; transform: translate(0, 0) rotate(0); transform-origin: center top; }
@-webkit-keyframes fadeInRollUp {
	0% { opacity: 0; -webkit-transform-origin: center center; -webkit-transform: translate(0, 280px) rotate(125deg); }
	10% { opacity: 1; }
	70% { opacity: 1; -webkit-transform-origin: center center; -webkit-transform: translate(0, -20px) rotate(-25deg); }
	100% { opacity: 1; -webkit-transform-origin: center center; -webkit-transform: translate(0, 0) rotate(0); }
}
@keyframes fadeInRollUp {
	0% { opacity: 0; transform-origin: center center; transform: translate(0, 280px) rotate(125deg); }
	10% { opacity: 1; }
	70% { opacity: 1; transform-origin: center center; transform: translate(0, -20px) rotate(-25deg); }
	100% { opacity: 1; transform-origin: center center; transform: translate(0, 0) rotate(0); }
}