/*Font*/
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700&subset=latin,latin-ext);
h1,h2,h3,h4,h5{font-family: 'Oswald', sans-serif; color: #333; text-shadow:0 1px 0 rgba(255,255,255,1);}
.flow dl dt span{font-family: 'Oswald', sans-serif;}
#layout .samplenum{font-family: 'Oswald', sans-serif;}
#custom .samplenum{font-family: 'Oswald', sans-serif;}


/*Stracture*/
body { background: url(../img/common/bg_main.jpg) repeat;background-attachment:fixed; }
p,dt,dd{font-size: 90%; line-height: 1.4; color:#333;}
a { text-decoration: underline;}
a:hover { text-decoration: none;}
#mainarea li{ margin-left:1em; padding-left:13px;font-size: 90%;list-style:none;background: url(../img/common/list2.gif) no-repeat 0 9px;}

header a{ text-decoration: none;}
header #logo {border-bottom:#444 1px solid;}
header #logo .row{position: relative;}
header #logo img{padding: 25px 0 15px; }
header #logo p{font-size: 75%; color: #999; position:absolute; top:5px; right:0;}
header #navi{ background: #222; }
header #navi .top-bar{background: #222}
header #navi .top-bar-section li a { background:#222}
header #navi .top-bar-section li a:hover{ background:#000}

#mainarea{border-bottom:#ccc 1px solid; padding-bottom: 25px}
#mainarea #pankuzu li{margin:0;}
#pankuzu{ margin-top: -25px;padding-bottom: 5px;font-size: 90%;}
#pankuzu li{display: inline;font-size: 75%;background: url(../img/common/list2.gif) no-repeat 0 6px; padding-left:10px; margin-left: 0}
#pankuzu li:first-child{background: url(../img/common/icon_home.png) no-repeat 0 4px; padding-left:13px;}
#pankuzu li:last-child{font-weight: bold;}
#pagetop{ text-align: right; clear: both;}

footer{border-top:#fff 1px solid;border-bottom:#000 1px solid; padding: 15px 0 35px}
footer li{ font-size: 75%; list-style: none; background: url(../img/common/list3.gif) no-repeat 0 6px; padding-left: 15px}
footer h5{font-size: 100%;}
footer p{font-size: 75%; margin-bottom:8px}
footer address{font-size: 75%; font-style: normal; }
#copyright{ background: #333;border-top:#555 1px solid;}
#copyright p{font-size: 75%; color: #999; margin-top: 5px }

/*stracture-rightcolumn*/
.sidenavi h5{ border-bottom: #333 2px solid; line-height: 1; padding: 15px 0 15px}
.sidenavi h5 span{ font-size:75%}
#mainarea .sidenavi li{ list-style:none;background: url(../img/common/bg_border.gif ) repeat-x bottom;margin:0;}
#mainarea .sidenavi li a{padding:8px 0 8px 13px ;background: url(../img/common/list1.gif) no-repeat 0 13px;display: block;text-decoration: none; color: #333}
#mainarea .sidenavi li a:hover{ color: #2795b6}
#mainarea .sidenavi li.inner a{ background: none}


/*Common*/
[class*="column"] + [class*="column"]:last-child {float: left;}
h1 { line-height: 1}
h1 span{ font-size: 50%;border-left:1px #111 solid ; margin-left: 0.8em; padding-left:0.5em;}
table{ width:100%; }
table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td{ line-height: 1.4;color:#333;}

.accordion h2{ font-size:180%;}
h2.small{font-size: 160%; }
h3.small{font-size: 130%; }
p.small{font-size: 75%; }
.price{ font-weight:bold;}

.frame{ background: #fff; border:#ccc 1px solid;margin-bottom:15px; box-shadow:0 1px 2px rgba(0,0,0,.1);}
.contents{ padding: 3% 3% 5%}
.frameset .frame{margin:0 -8px 15px; padding:0; box-shadow:0 1px 2px rgba(0,0,0,.1);}
.frameset img{ width: 100%;}
.frameset h3{ font-size: 100%; margin:0; padding:10px 10px 8px}
.frameset p{ font-size: 75%;line-height: 1.3; margin:0;padding:0 10px 10px}
.frameset a{ display: block;}
.frameset a{ text-decoration: none !important}

.footeraction{ text-align: center;}
.footeraction span{background: url(../img/common/btn_contact.png) left no-repeat; padding-left: 33px}
.footeraction .gal{margin-left:10px;}
.footeraction .gal span{background: url(../img/common/btn_gallery.png) left no-repeat; padding-left: 33px}

.section-container .title a{ text-decoration: none; font-weight: bold; font-size: 100% !important; text-shadow:0 1px 0 rgba(255,255,255,1);background: url(../img/common/bg_arrow.gif) 98% 23px  no-repeat}
.section-container .content{ padding:1em 2em 2.5em !important;}


/*Index*/
.flexslider {margin:0 0 40px !important;}
#mainarea .flexslider ul li{margin:0; padding:0 ; background:none;}
#mainarea .flexslider ol li{margin:0; padding:0 5px ;background:none;}

/*Company*/
#Company table{ border:none;}
#Company th{ width:30%;}
#Privacy li{ list-style: decimal; background: none;padding-left:0; margin-left: 1.5em;margin-bottom: 1em}

/*Studio*/
#Studio  #support .contents{ padding: 1% 3% 0}

/*Information*/
#Info .meta{font-weight:bold; border-top:#ccc 1px solid; margin: 0 10px; padding: 5px 0}
#Info .meta span{ font-size: 75%;float:right; background: #1E6482; color:#fff; margin-left:2em; padding:1px 15px;}
#Info .meta span.aka{background: #822869;}
#Info .meta span.serato{background: #737D46;}

#Info .eyecatch{ text-align: center; margin: 15px 0}
#Info h1.info{font-size: 220%; line-height: 1.4}
#Info article{ margin: 65px 5px 65px}
#Info blockquote{margin: 35px 0}
#Info .newsimage{text-align: center; margin-bottom: 1em}
#Info .newsimage img{ max-height:250px; }
@media screen and (max-width: 400px) {
	#Info .columns{ width:98%; margin:0 1% 1%;}
}

/*ProductPage Index*/
#ProductIndex .group{ margin-bottom:50px;}
.movie{ text-align: center;}
.movie iframe{ width:560px; height:315px; background: #fff;padding:1px; border:#ddd 5px solid;}
@media screen and (max-width: 600px) {
	.movie iframe{ width:90%;height:230px;}
	}

/*AKA*/
.parent{ position:relative;}
.parent .icon{position:absolute; top:-2px; left:35px; } 
.frameset .parent .icon{left:13px;width:auto;}
p.color span{ margin:0 2em 0 0.5em;font-size: 75%;}

#lineup th,#lineup td{font-size: 80%; padding:0.4em 0.5em}
#lineup th{ background: #f3f3f3}
#lineup .head th{ background: #333; color:#fff;}
#lineup .price{ text-align: right}

#lineup td span{font-size: 75%; margin-left:0.5em;}
#lineup h2{ margin-top:50px;}

#layout{ margin-top:50px;}
#layout .samplenum{ background: #333; color:#fff; margin:0 2% 2%; padding:1px 20px;}
#layout .large-4{ text-align: center; padding-right: 0; margin: 10px auto}
#layout th,#layout td{ font-size: 75%; padding:0.4em 0.5em}
#layout th{ width:30%; background: #f3f3f3}

#gallery ul{ overflow: hidden;}
#gallery li{float:left;width:24%; background:none; margin:0 1% 1% 0; padding:0;}
#gallery li a{ border:#ccc 1px solid; padding:3px; display:block;}
@media screen and (max-width: 400px) {
	#gallery li{float:none;width:98%; background:none; margin:0 1% 2%; padding:0;}
}

#custom .columns{  border:#ddd 1px solid; margin-left:-1px;margin-bottom:1px;}
#custom .samplenum{ background: #333; color:#fff; margin:0 1.5%; padding:3px 15px; display: inline}
#custom h3{font-size:150%; margin-top:15px;}
#custom p{font-size: 75%;line-height: 1.3; margin:15px 0 25px;}

/*Common*/
.flow dl{ margin-bottom: 35px}
.flow dl dt{ font-size: 100%; margin-bottom: 15px; padding-bottom: 3px; border-bottom: #111 2px solid}
.flow dl dt span{  font-size: 85%;background: #333; color:#fff; padding:0 15px;margin-right: 10px;}

.faq dl{ background: #fff; border:#ccc 1px solid;margin-bottom:15px; box-shadow:0 1px 2px rgba(0,0,0,.1);padding:15px}
.faq dl dt{ font-size: 100%; margin-bottom: 15px; padding-bottom: 3px; border-bottom: #111 2px solid}
.faq dl dt span{  font-size: 85%;background: #333; color:#fff; padding:0 15px;margin-right: 10px;}

/*Contact*/
#Contact .required, #Contact dt span{ color:#ff4500;font-size:75%; margin-left:0.5em; font-weight:bold;}
#Contact .attention{ color:#ff4500;font-weight:bold;}
#Contact dl{ clear:both; background: #f5f5f5; overflow: hidden; margin:0;}
#Contact dl:nth-child(2n){background: #fff;}
#Contact dl dt{ float:left; width:25%; text-align: center; padding: 1% 0; margin: 0;}
#Contact dl dd{ float:right; width:72%;padding: 1% 3% 1% 0; margin: 0;}
#Contact label{display: inline; color:#333;font-size:90%; font-weight: normal;  margin:0 5px 0 0;}
#Contact label span{ margin:0 3px 0 0;}
#Contact input{margin: 0; width:auto; display: inline}
#Contact textarea{ height:16em;}
#Contact dd .hide-for-small{ display:inline !important;}
.alert-box{background-color: #ff6347;border-color: #ff4500;font-size:90%;}
.alert-box ul{ margin-bottom:0;}
@media screen and (max-width: 400px) {
	#Contact dl dt{ float:none;width:100%; padding:5px 10px; text-align: left}
	#Contact dl dd{ float:none;width:100%; padding:5px 10px;margin-bottom:0.5em;}
	#Contact input, #Contact textarea{ max-width:100%;}
	#Contact dd .hide-for-small{ display:none !important;}
}