@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 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/cocktails/title_bg_pc.jpg"); }
article.title.sp { background-image: url("../images/cocktails/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(362px*0.6); }
article.title h1 span:nth-child(2) { margin-left: 15px; width: calc(310px*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 img { width: 100%; }
	article.title p.logo { left: 10px; top: 10px; width: 40px; }
	article.title h1 span:nth-child(1) { margin: 0 auto; width: 217px; } /* android */
	article.title h1 span:nth-child(2) { margin: 0 auto; width: 186px; } /* android */
}

/* cocktails */
article.cocktails section.recipe { padding: 60px 0; width: 100%; }
article.cocktails section.recipe:nth-of-type(odd) { background-color: rgb(240, 240, 240); }
article.cocktails section.recipe:nth-of-type(even) { background-color: rgb(250, 250, 250); }
article.cocktails section.recipe div.container { display: -webkit-box; -webkit-box-pack: start; -webkit-justify-content: flex-start; -webkit-align-items: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; margin: 0 auto; width: 94%; max-width: 620px; }
article.cocktails section.recipe div.photo { display: block; width: 34%; }
article.cocktails section.recipe div.words { margin-left: 6%; width: 60%; }
article.cocktails section.recipe h3 { margin: 0 auto; }
article.cocktails section.recipe h3 span { display: block; font-weight: bold; color: rgb(63, 32, 33); }
article.cocktails section.recipe h3 span:nth-child(1) { font-family: "Viga", sans-serif; font-size: 130%; }
article.cocktails section.recipe h3 span:nth-child(2) { margin-top: 5px; font-size: 85%; }
article.cocktails section.recipe p.video { margin-top: 15px; font-family: "Viga", sans-serif; font-size: 90%; }
article.cocktails section.recipe p.video a { display: inline-block; position: relative; color: rgb(245, 145, 25); text-decoration: none; }
article.cocktails section.recipe p.video a:link { color: rgb(245, 145, 25); }
article.cocktails section.recipe p.video a:visited { color: rgb(245, 145, 25); }
article.cocktails section.recipe p.video a:hover { color: rgb(226, 84, 21); text-decoration: underline; }
article.cocktails section.recipe p.video a:active { color: rgb(226, 84, 21); text-decoration: underline; }
article.cocktails section.recipe p.video a:before { position: absolute; top: 50%; right: -25px; margin-top: -7px; width: 19px; height: 13px; content: ""; background-color: rgb(245, 145, 25); border-radius: 10%; }
article.cocktails section.recipe p.video a:hover:before { background-color: rgb(226, 84, 21); right: -29px; width: 23px; transition: all 0.2s ease-in-out; }
article.cocktails section.recipe p.video a.leave:before { background-color: rgb(245, 145, 25); right: -25px; width: 19px; transition: all 0.2s ease-in-out; }
article.cocktails section.recipe p.video a:after { position: absolute; top: 50%; right: -25px; margin-top: -3px; width: 0; height: 0; content: ""; border-top: 3px solid transparent; border-right: 6px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid rgb(255, 255, 255); }
article.cocktails section.recipe p.video a.enter:after { right: -32px; transition: all 0.2s ease-in-out; }
article.cocktails section.recipe p.video a.leave:after { right: -25px; transition: all 0.2s ease-in-out; }
article.cocktails section.recipe div.words p.photo { display: none; }
article.cocktails section.recipe p.photo { text-align: center; }
article.cocktails section.recipe p.photo img { width: 75%; }
article.cocktails section.recipe ul.ingredients { margin-top: 30px; }
article.cocktails section.recipe ul.ingredients li { display: -webkit-box; -webkit-box-pack: start; -webkit-justify-content: flex-start; -webkit-align-items: flex-start; -webkit-flex-wrap: nowrap; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; padding: 10px 3px 6px 3px; font-size: 90%; border-bottom:1px dotted rgba(63, 32, 33, 0.5); }
article.cocktails section.recipe ul.ingredients li:first-child { border-top:1px dotted rgba(63, 32, 33, 0.5); }
article.cocktails section.recipe ul.ingredients li span { display: block; }
article.cocktails section.recipe ul.ingredients li span:nth-child(1) { width: 70%; }
article.cocktails section.recipe ul.ingredients li span:nth-child(2) { width: 26%; text-align: right; }
article.cocktails section.recipe p.howto { padding: 15px 3px; font-size: 80%; color: rgb(63, 32, 33); line-height: 1.5; }
@media screen and (max-width: 480px) {
	article.cocktails section.recipe { display: -webkit-box; -webkit-box-pack: start; -webkit-justify-content: flex-start; -webkit-align-items: center; -webkit-flex-wrap: wrap; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 40px 0; }
	article.cocktails section.recipe div.photo { display: none; }
	article.cocktails section.recipe div.words { margin: 0 auto; width: 94%; }
	article.cocktails section.recipe h3 { margin: 0 auto; }
	article.cocktails section.recipe h3 span { display: block; text-align: center; font-weight: bold; color: rgb(63, 32, 33); }	
	article.cocktails section.recipe h3 span:nth-child(1) { font-family: "Viga", sans-serif; font-size: 130%; }
	article.cocktails section.recipe h3 span:nth-child(2) { margin-top: 5px; font-size: 85%; }
	article.cocktails section.recipe p.video { margin-top: 15px; text-align: center; font-family: "Viga", sans-serif; font-size: 90%; }
	article.cocktails section.recipe p.video a { padding: 5px 13px 3px 13px; color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(245, 145, 25); border-radius: 3px; }
	article.cocktails section.recipe p.video a:link { color: rgb(255, 255, 255); }
	article.cocktails section.recipe p.video a:visited { color: rgb(255, 255, 255); }
	article.cocktails section.recipe p.video a:hover { color: rgb(255, 255, 255); text-decoration: none; }
	article.cocktails section.recipe p.video a:active { color: rgb(255, 255, 255); text-decoration: none; }
	article.cocktails section.recipe p.video a:before { display: none; }
	article.cocktails section.recipe p.video a:hover:before { display: none; }
	article.cocktails section.recipe p.video a:after { display: none; }
	article.cocktails section.recipe div.words p.photo { display: block; }
	article.cocktails section.recipe p.photo { margin-top: 15px; text-align: center; }
	article.cocktails section.recipe p.photo img { width: 55%; }
	article.cocktails section.recipe ul.ingredients { margin-top: 10px; }
	article.cocktails section.recipe ul.ingredients li { display: -webkit-box; -webkit-box-pack: start; -webkit-justify-content: flex-start; -webkit-align-items: flex-start; -webkit-flex-wrap: nowrap; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; padding: 12px 3px 8px 3px; font-size: 90%; }
	article.cocktails section.recipe ul.ingredients li span { display: block; }
	article.cocktails section.recipe ul.ingredients li span:nth-child(1) { width: 70%; }
	article.cocktails section.recipe ul.ingredients li span:nth-child(2) { width: 26%; text-align: right; }
	article.cocktails section.recipe p.howto { padding: 15px 3px; font-size: 80%; color: rgb(63, 32, 33); line-height: 1.5; }
}