@charset "UTF-8";

body {font-size: 16px; line-height: 1.7; color: #191919;}
a {color: #666; text-decoration: none;}
a:hover {color: #666;}

h1 {font-size: 3em; margin: 0 0 30px 0;}
h2 {font-size: 2em; margin: 0 0 60px 0;}
p {font-size: 1em; margin: 20px 0;}

p.relatedLink {text-align: right;}
.pcOnly {display: block;}
.mobileOnly {display: none;}

#main {width: 100%; margin: 0;}
#main a {text-decoration: underline;}
#intro,
#intro2,
.product {width: 100%; margin: 0; position: relative; overflow: hidden;}
.fitImg {vertical-align: bottom;}
.annotation {color: #666; font-size: 90%;}

#intro .container {position: absolute; top: 15%; left: 80px; width: 90%; padding: 0 0 80px 0;}
#intro2 {padding-bottom: 70px;}
#intro2 .container {position: static; padding: 100px 80px 0;/*  width: 70%; */}
.product .container {position: absolute; padding: 0; width: 45%; top: 20%; left: 60%;}
.container.serif {font-family:'Hiragino Mincho ProN', serif;}
#intro img,
#intro2 img,
#product01 img {width: 100%; vertical-align: bottom;}
#intro .container p {width: 80%;}

#electronics #intro h1 img {width: 400px; height: auto;}
#electronics #intro .container p {padding-left: 5px;}
#refrigerator #intro .container,
#kettle #intro .container,
#oven #intro .container,
#range #intro .container,
#ricecooker #intro .container,
#popuptoaster #intro .container {left: 54%;}
#refrigerator p.item  {margin-bottom: 40%;}
#range #product03 {margin-bottom: 80px;}

#range #intro .container p,
#range #intro .container h1,
#ricecooker #intro .container p,
#ricecooker #intro .container h1,
#popuptoaster #intro .container p,
#popuptoaster #intro .container h1 {width: 50%}
#range p.item {margin-bottom: 23%;}
#range #product01 {margin-top: 80px;}

#oven .product .container {top: 54%; left: 40%;}
#ricecooker .product .container,
#popuptoaster .product .container,
#kettle .product .container,
#juicer .product .container {top: 50%; left: 40%;}
#juicer #intro .container {top: 10%;}
#kettle nav#nav a {color: #fff;}

#refrigerator .spec .annotation {text-align: right;}
#ricecooker .spec .annotation {text-align: right; margin-right: 20px;}

/* flipsnap */
.viewport {width: 100%; overflow: hidden; margin: 0 auto; border-top: 1px solid #eee;}
.flipsnap .item { float: left; width: 200px; cursor: pointer; height: 170px; border-right: 1px solid #eee; font-size: 0.8em;}
.flipsnap .item.kettle {border-right: 0;}
.viewport .item a {display: block;}

nav {position: relative; font-size: 0.8em; z-index: 20;}
nav ul {position: absolute; top: 20px; left: 20px; list-style: none;}
nav ul li {float: left; margin-right: 20px;}
nav ul li
nav ul li a {padding: 20px 0 10px 0;}
nav ul li.current a {border-bottom: 2px solid #ccc; padding-bottom: 10px;}
nav p {font-size: 1.5em; margin: 0;}
nav .home {margin-right: 40px;}
nav li.reserve {margin-top: -1px;}
nav li.reserve a {padding: 4px 6px; background: #999; border-radius: 4px; font-size: 0.6em; color: #fff;}
nav li.reserve a:hover {background: #333;}

#brandLogo {position: absolute; right: 40px; top: 20px; z-index: 3;}
#brandLogo img {width: 80px; height: auto;}
#mobileMenu {display: none;}

p.item {font-size: 1em;}
.price {display: inline-block; margin-bottom: 3px; line-height: 1.2; font-size: 11px;}
.price .num {font-size: 14px; font-weight: bold; margin: 0 2px; font-family: "Helvetica","Lucida Grande","Hiragino Kaku Gothic Pro",'MS PGothic' ,sans-serif;}
.reservation {font-size: 0.8em; display: block;}
.reservation .day {display: block; margin-bottom: 5px;}
.reservation a {padding: 6px 10px; background: #333; color: #fff; border-radius: 4px; display: inline-block;}
.reservation a:hover {background: #111;}

.viewport a {text-align: center;}
.viewport a img {height: 70px; margin: 20px auto;}

.modal {width:100%; color: #ccc; display: none; position: relative; z-index: 9999;}
.modalBody {position: fixed; z-index: 1000; background: #000; width: 100%; left: 0; top: 0; height: 100%; padding: 0 10px; opacity: 0.85; filter: alpha(opacity=85); -moz-opacity:0.85;}
.modalBK {position: fixed; z-index: 999; height: 100%; width: 100%;/*  background: #000; opacity: 0.9; filter: alpha(opacity=90); -moz-opacity:0.90; */}
.close {cursor: pointer; padding-left: 10px;}
.modal p {font-size:12px; text-align: justify;}
.modalBody li a {padding: 5px 0 13px 30px; display: inline-block; color: #ccc;}

.spec {width: 100%; padding: 40px 0 35px 0; font-size: 14px; background: #f7f7f7; /* display: none; */}
.spec .wrap {width: 800px; margin: 0 auto;}
.spec dt {float: left; margin-right: 20px; clear: left; width: 32%; text-align: right; color: #666;}
.spec dl:after { content: ""; clear: both; display: block;}
.spec dd {padding-left: 34%;}

/* sns */
.share {text-align: right; margin: 15px;}
.share a {display: inline-block; padding: 5px;}
.share a img {filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;}
.share a:hover img {filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;}
.share a img.tw_btnImg {width: 26px; height: auto;}

/* event */
#event section {width: 740px; margin: 100px auto;}
#event section h1 {font-size: 2em;}
#event section h1 .sub {display: block; font-size: 80%;}
strong.name {font-weight: bold; padding-right: 0.5em;}
#event section.talk p {margin-bottom: 40px; text-indent: -3em; padding-left: 3em; line-height: 1.8;}
#event section.talk p.focus {margin-left: 0.5em; text-indent: 0;}

#electronics {position: relative;}
.catalog {font-size: 13px; position: absolute; bottom: 190px; left: 30px;}
.catalog a {margin-left: 10px; text-decoration: underline;}


@media only screen and (max-width : 1151px){
	body {font-size: 16px;}	
	h1 {font-size: 2em;}
	#electronics #intro h1 img {width: 320px; height: auto;}
  p {font-size: 0.9em;}
	#nav ul {display: none;}
	#mobileMenu {display: block; position: absolute; top: 0; left: 0;}
	#mobileMenu img {width: 15px; height: auto;}
	#mobileMenu a {padding: 15px 20px; display: inline-block;}
	
	#refrigerator #intro .container p,
	#kettle #intro .container p,
	#oven #intro .container p,
	#range #intro .container p {width:45%;}
	#refrigerator .product .container {top: 15%;}
	.spec dd {padding-left: 38%;}
	.viewport {width: 100%;}
	.flipsnap {width: inherit;}
	
}

@media only screen and (max-width : 767px){
	body {font-size: 14px;}	
	h1 {margin: 15px 0; font-size: 2em;}
  h2 {font-size: 1.4em;}  
  p {font-size: 1em;}  
  .pcOnly {display: none;}
	.mobileOnly {display: block;}

  #brandLogo  {right: 20px;}
	#brandLogo img {width: 70px;}
		
	.container {padding: 70px 0 0 20px; position: static; width: 85%; left: 0;}
  #intro .container {padding: 0 0 0 20px; position: absolute; left: 0;}
  #intro2 .container {padding: 70px 0 0 20px;  width: 85%;}
  .product .container {position: absolute; padding: 0; width: 40%; top: 60px; left: 55%;}
	.flipsnap .item {height: 150px;}
	
	#electronics #intro h1 img {width: 70%;}
	#refrigerator #intro .container,
	#kettle #intro .container,
	#oven #intro .container,
	#ricecooker #intro .container,
	#popuptoaster #intro .container {left: 0;}
	#range #intro .container {left: 0; top: 10%;}
	#refrigerator .product .container {top: 80px; width: 45%; left: 45%;}
	#refrigerator #intro .container p {width: 100%;}
	#kettle #intro .container p {color: #fff; width: 100%;}
	#refrigerator p.item  {margin-bottom: 110px;}
	#oven #intro2  {padding-bottom: 0;}
	#oven .product .container {top: 45%; left: 25%; width: 70%;}
	#popuptoaster .product .container,
	#kettle .product .container,
	#juicer .product .container {top: 40%; left: 25%; width: 70%;}	
	#ricecooker .product .container  {top: 40%; left: 20%; width: 70%;}	
	#range .product .container {width: 70%; top: 220px; left: 15%;}
	#range #intro .container p,
	#ricecooker #intro .container p,
	#popuptoaster #intro .container p,
	#juicer #intro .container p,
	#range #intro .container h1,
	#ricecooker #intro .container h1,
	#popuptoaster #intro .container h1 {width: 100%}
	#range #intro2 {padding: 0;}
	#range #intro2 .container {padding-top: 0;}
	#oven #intro .container p {width: 90%}
	#range p.item {margin-bottom: 78px;}
	#popuptoaster #intro img,
	#ricecooker #intro img {margin-top: 0;}	
	#kettle #intro h1 {color: #fff;}
	
	.spec .wrap {width: 100%; font-size: 12px; padding: 0 10px;}
	.spec dd {width: 55%;}
	#refrigerator .spec .annotation {text-align: left;}
	#range .spec {margin-top: 40px; line-height: 1.4;}
	.spec dd,
	.spec dt {margin-bottom: 5px;}
	.spec dd.standby {height: 40px;}
	
	.viewport a {text-align: center;}
	.viewport a img {height: 50px; margin: 20px auto;} 
	
	  /* flipsnap */
	.viewport {width: 100%; overflow: hidden; margin: 0 auto;}
	.viewport .flipsnap {width: 650px; padding: 0;}
	
	#event section {width: 90%; margin: 100px auto; padding: 0 20px; }
	strong.name {padding-right: 0;}
	#event section.talk img {width: 100%; height: auto;}
	#event .container {padding: 0 0 0 20px;}
}