@charset "utf-8";

#suntory_contents div.main div.section { background-color: rgb(255, 255, 255); }
#suntory_contents div.main h2 { margin: 0 auto; width: 94%; max-width: 960px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media screen and (max-width: 767px) {
	#suntory_contents div.main h2 { font-size: 80%; }
}
@media screen and (max-width: 375px) {
	#suntory_contents div.main h2 { font-size: 70%; }
}

/* menu */
#suntory_contents div.main div.menu { position: relative; margin-top: 40px; }
#suntory_contents div.main div.menu div.container { padding: 10px 10px; }
#suntory_contents div.main div.menu ul .thumbs { display: table; width: 90%; }
#suntory_contents div.main div.menu ul.thumbs li { display: table-cell; width: 10%; text-align: center; }
#suntory_contents div.main div.menu ul.thumbs li img { width: 90%; }
#suntory_contents div.main div.menu ul.controller li { font-szie: 0; text-indent: -9999px; cursor: pointer; }	
@media screen and (max-width: 767px) {
	#suntory_contents div.main div.menu div.container { padding: 10px 0; }
	#suntory_contents div.main div.section.menu { height: 140px; background-color: rgba(255, 255, 255, 0.6); overflow: hidden; }
	#suntory_contents div.main div.menu div.container_thumbs { position: relative; left: 1000px; margin: 0 auto; padding-bottom: 50px; width: 90%; height: 140px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
	#suntory_contents div.main div.menu ul.thumbs { display: block; position: absolute; top: 0; left: 0; white-space: nowrap; z-index: 100; }
	#suntory_contents div.main div.menu ul.thumbs li { display: inline-block; }
	#suntory_contents div.main div.menu ul.thumbs li img { width: 90px; }	
	#suntory_contents div.main div.menu ul.controller li.prev { display: none; position: absolute; top: 0; left: 0; width: 30px; height: 100%; background-color: rgba(200, 200, 200, 0.6); z-index: 110; }
	#suntory_contents div.main div.menu ul.controller li.prev:before { display: block; position: absolute; top: 50%; left: 13px; margin-top: -6px; width: 12px; height: 12px; content: ""; border-top: 2px solid rgb(255, 255, 255); border-left: 2px solid rgb(255, 255, 255); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
	#suntory_contents div.main div.menu ul.controller li.next { display: none; position: absolute; top: 0; right: 0; width: 30px; height: 100%; background-color: rgba(200, 200, 200, 0.6); z-index: 120; }
	#suntory_contents div.main div.menu ul.controller li.next:before { display: block; position: absolute; top: 50%; right: 13px; margin-top: -6px; width: 12px; height: 12px; content: ""; border-top: 2px solid rgb(255, 255, 255); border-left: 2px solid rgb(255, 255, 255); -webkit-transform: rotate(135deg); transform: rotate(135deg); }
}
@media screen and (max-width: 400px) {
	#suntory_contents div.main { padding-top: 20px; }
	#suntory_contents div.main div.menu { margin-top: 20px; }
}

/* recipe */
#suntory_contents div.main div.recipe div.container { padding: 20px 30px 40px 30px; }
#suntory_contents div.main div.recipe div.block { width: 100%; }
#suntory_contents div.main div.recipe div.block div.block_01 { float: left; width: 34%; }
#suntory_contents div.main div.recipe div.block div.block_01 p { padding-right: 10px; text-align: center; }
#suntory_contents div.main div.recipe div.block div.block_01 p.highball img { padding-top: 20px; width: 85%; }
#suntory_contents div.main div.recipe div.block div.block_01 p.straight img { padding-top: 0; width: 85%; }
#suntory_contents div.main div.recipe div.block div.block_01 p.two img { padding-top: 25px; width: 70%; }
#suntory_contents div.main div.recipe div.block div.block_01 p.rocks img { padding-top: 0; width: 90%; }
#suntory_contents div.main div.recipe div.block div.block_01 p.half img { padding-top: 20px; width: 75%; }
#suntory_contents div.main div.recipe div.block div.block_01 p.water img { padding-top: 20px; width: 75%; }
#suntory_contents div.main div.recipe div.block div.block_01 p.float img { padding-top: 20px; width: 75%; }
#suntory_contents div.main div.recipe div.block div.block_01 p.mist img { padding-top: 20px; width: 75%; }
#suntory_contents div.main div.recipe div.block div.block_01 p.hot img { padding-top: 25px; width: 80%; }
#suntory_contents div.main div.recipe div.block div.block_01 p a { display: block; margin: -90px auto 0 auto; width: 100%; }
#suntory_contents div.main div.recipe div.block div.block_01 p a img { padding: 0; max-width: 180px; }
#suntory_contents div.main div.recipe div.block div.block_02 { float: left; width: 66%; }
#suntory_contents div.main div.recipe div.block div.block_02 p { margin-top: 20px; }
#suntory_contents div.main div.recipe div.block div.block_02 ul { margin-top: 10px; }
#suntory_contents div.main div.recipe div.block div.block_02 hr.separate { margin: 20px 0; width:100%; border-top: 1px solid rgb(150, 150, 150); }	
#suntory_contents div.main div.recipe div.block div.block_02 p.pc { display: block; }
#suntory_contents div.main div.recipe div.block div.block_02 p.sp { display: none; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_photo { width: 100%; line-height: 0; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_photo li { float: left; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_photo li.photo { width: 15%; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_photo li.photo img { width: 100%; /* box-shadow: 0 0 0 1px rgb(200, 200, 200); */ }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_photo li.arrow { position: relative; width: 2%; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_photo li.arrow img { display: block; position: relative; left: 50%; top: 50%; margin: -3px 0 0 -3px; width: 6px; height: 6px; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_text { display: table; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_text li { position: relative; margin-top: 8px; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_text li:before { display: block; position: absolute; width: 18px; height: 18px; content: ""; text-align: center; font-size: 75%; color: rgb(255, 255, 255); line-height: 18px; background-color: rgb(200, 200, 200); }
@media all and (-ms-high-contrast:none) { #suntory_contents div.main div.recipe div.block div.block_02 ul.step_text li:before { line-height: 21px; } }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_text li.n1:before { content: "1"; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_text li.n2:before { content: "2"; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_text li.n3:before { content: "3"; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_text li.n4:before { content: "4"; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_text li.n5:before { content: "5"; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_text li.n6:before { content: "6"; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.step_text li span.words { display: block; padding-left: 28px; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended { margin: 0 auto; width: 99%; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended li { float: left; margin: 30px 0; width: 33%; text-align: center; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended li p.product img { width: 32%; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended li p.label { margin: 10px auto 0 auto; width: 90%; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended li p a { text-decoration: underline; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended li p a:hover,
#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended li p a:active { color: rgb(200, 154, 47); text-decoration: none; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended li p.label a:before { padding-right: 10px; content: ''; background: url("../images/general/arrow_label.gif") left center no-repeat; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended li p.button { margin: 10px auto 0 auto; width: 90%; }
#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended li p.button img { width: 100%; max-width: 110px; }
#suntory_contents div.main div.whiskys ul li img { width: 80%; }
@media screen and (max-width: 767px) {
	#suntory_contents div.main div.recipe div.block div.block_01 { float: none; width: 100%; }
	#suntory_contents div.main div.recipe div.block div.block_01 p.highball img { padding-top: 10px; width: 80%; }
	#suntory_contents div.main div.recipe div.block div.block_01 p.straight img { padding-top: 0; width: 80%; }
	#suntory_contents div.main div.recipe div.block div.block_01 p.two img { padding-top: 20px; width: 75%; }
	#suntory_contents div.main div.recipe div.block div.block_01 p.rocks img { padding-top: 0; width: 95%; }
	#suntory_contents div.main div.recipe div.block div.block_01 p.half img { padding-top: 10px; width: 70%; }
	#suntory_contents div.main div.recipe div.block div.block_01 p.water img { padding-top: 10px; width: 75%; }
	#suntory_contents div.main div.recipe div.block div.block_01 p.float img { padding-top: 10px; width: 80%; }
	#suntory_contents div.main div.recipe div.block div.block_01 p.mist img { padding-top: 10px; width: 80%; }
	#suntory_contents div.main div.recipe div.block div.block_01 p.hot img { padding-top: 20px; width: 90%; }
	#suntory_contents div.main div.recipe div.block div.block_01 p a { display: none; }
	#suntory_contents div.main div.recipe div.block div.block_02 { float: none; margin-top: -50px; width: 100%; }
	#suntory_contents div.main div.recipe div.block div.block_02 p.pc { display: none; }
	#suntory_contents div.main div.recipe div.block div.block_02 p.sp { display: block; }
}
@media screen and (max-width: 500px) {
	#suntory_contents div.main div.recipe div.container { padding: 20px 20px 40px 20px; }
	#suntory_contents div.main div.recipe div.block div.block_02 ul.step_photo li { margin: 8px 0; }
	#suntory_contents div.main div.recipe div.block div.block_02 ul.step_photo li.photo { width: 28%; }
	#suntory_contents div.main div.recipe div.block div.block_02 ul.step_photo li.arrow { width: 5%; }
	#suntory_contents div.main div.recipe div.block div.block_02 ul.recommended li p.label { font-size: 85%; width: 85%; }
}

/* whiskys */
#suntory_contents div.main div.whiskys { margin-top: 40px; }
#suntory_contents div.main div.whiskys div.container { padding: 40px 20px; }
#suntory_contents div.main div.whiskys p { padding-left: 15px; }
#suntory_contents div.main div.whiskys p.desc { margin-top: 15px; }
#suntory_contents div.main div.whiskys ul { margin: 30px auto 0 auto; width: 100%; }
#suntory_contents div.main div.whiskys ul li { float: left; margin: 20px 5%; width: 23%; text-align: center; }
#suntory_contents div.main div.whiskys ul li img { width: 80%; }
@media screen and (max-width: 767px) {
	#suntory_contents div.main div.whiskys ul li img { width: 90%; }
}
@media screen and (max-width: 375px) {
	#suntory_contents div.main div.whiskys p { padding-left: 0; font-size: 80%; }
	#suntory_contents div.main div.whiskys div.container { padding: 20px 15px; }
	#suntory_contents div.main div.whiskys ul li { float: left; margin: 20px 2%; width: 29%; text-align: center; }
	#suntory_contents div.main div.whiskys ul li img { width: 98%; }
}

/* cocktails */
#suntory_contents div.main div.cocktails { margin-top: 40px; }
#suntory_contents div.main div.cocktails div.container { padding: 40px 20px; }
#suntory_contents div.main div.cocktails p { padding-left: 15px; }
#suntory_contents div.main div.cocktails p.desc { margin-top: 15px; }
#suntory_contents div.main div.cocktails ul { margin-top: 10px; width: 100%; }
#suntory_contents div.main div.cocktails ul li { float: left; padding: 10px 0; width: 20%; text-align: center; }
#suntory_contents div.main div.cocktails ul li img { width: 96%; }
@media screen and (max-width: 375px) {
	#suntory_contents div.main div.cocktails div.container { padding: 20px 15px; }
	#suntory_contents div.main div.cocktails p { padding-left: 0; font-size: 80%; }
	#suntory_contents div.main div.cocktails ul li { padding: 3px 0; width: 33%; }
	#suntory_contents div.main div.cocktails ul li img { width: 90%; }
}