/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
@import url("pc.css");


html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 13px;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 14px/24px "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

.wrapper {
    width: 94%;
    margin: 0 3%;
}

/* ===================
    ALL: Orange Theme
   =================== */

body {
	background-image: url(../img/haikei.jpg);
	background-repeat: repeat;
	background-position: left top;
}

#main-container {
    
}

article header {
	margin-bottom: 20px;
}

article section h1,article section h2, article section h3 {
	margin-bottom: 15px !important;
}

article section h2, article section h3 {
	margin-top: 30px;
}

#news {
        border: 1px #DCDCDC solid;
	background-color: #FFF;
	padding-bottom: 10px;
}

#news iframe {
 	width: 94%;
	padding: 3% 0 10px 0;
	display: block;
	margin: 0 auto;
}

#news a, #news iframe a {
	color: #0066ff;
	text-decoration: none;
	padding-right: 10px;
}

.news_List_Title { padding-left: 20px; }

.new_mark { padding-left: 5px; font-size: 11px !important; }

#news a:hover, #news a:active, #news iframe a:hover {
	color: #0066ff;
	text-decoration: underline;
}

div.iframeWrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
 
div.iframeWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#rcomment {
	border: 2px #f8b500 solid;
	background-color: #FFF;
	padding: 3%;
	overflow: hidden;
}

.prof img {
	border: 1px #000 solid;
}

.prof { margin-bottom: 5px; }

.icon {
	text-align: center;
}

.lblue {
	color: #00479d;
}

.rcom {
}

.rcom h3 {
	font-size: 18px;
	margin-top: 10px !important;
	margin-bottom: 5px !important;
}


.plink a {
	background-color: #FFFF99;
	color: #333;
	text-decoration: none;
}

.plink a:hover, .plink a:active {
	background-color: #96daf6;
	color: #333;
	text-decoration: none;
}

.bline {
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 1px #cccccc dashed;
}


.vibe {
	margin-top: 20px;
	border: 1px #000 solid;
}

.vibe a {
	color: #0066FF;
	text-decoration: none;
}

.vibe a:hover, .vibe a:active {
	color: #0066FF;
	text-decoration: underline;
}


.vibe dt {
	padding: 6px 0px;
	text-align: center;
	background: #000 url(../img/bg_presented.gif) repeat left top;
}

.vibe dd {
	padding: 5% 10%;
	background-color: #FFF;
}

.sidebanner {
	margin-top: 14px;
}

.sidebanner a:hover {
    opacity: 0.8;
}

.sidebanner a:active {
    opacity: 1.0;
}

/*kaihatu story*/

#story p, #start p, #days p, #kansei p {
	color: white;
}


#story, #kansei {
	background-color: #000;
	width: 100%;
}

#start {
	background-color: #000;
	width: 100%;
}

#days {
	background-color: #000;
	width: 100%;	
}

#start h3, #days h3, #kansei h3 {
	padding-top: 30px;
	margin-bottom: 15px;
	text-align: center;
}

#story h2 {
	padding-top: 90px;
	margin-bottom: 15px;
	text-align: center;
}

.flow {
	overflow: hidden;
	padding-bottom: 15px;
}

.photos {
	margin-bottom: 15px;
	text-align: center;
}

.photos img {
	max-width: 100%;
	height: auto;
}

.flow .fleft, .flow .fright {
	line-height: 28px; 
}

/*developers*/

#developers {
	background: #ffcc33;
	padding-bottom: 30px;
}

#developers h2{
	padding-top: 90px;
	margin-bottom: 15px;
}

.comments {
	overflow: hidden;
}

.lblock, .rblock {
	background-color: #FFF;
	margin-bottom: 10px;
}

 .center_block {
	background-color: #FFF;
	margin-bottom: 20px;
}

.center_image{
	width:100%;
	text-align:center;
	margin-top: 15px;
}

.center_image img{
	width:100%;
	max-width:480px;
	text-align:center;
}

.left_image{
	width:100%;
	text-align:center;
	margin-top: 10px;
}

.left_image img{
	width:100%;
	max-width:253px;
	text-align:center;
}

.lblock h3, .rblock h3, .center_block h3 {
	color: #000;
	font-size: 1.3em;
	font-weight: bold;
 	background: #0CF url(../img/bg_dcomment.gif) repeat left top;
	padding: 5px 10px;
}

h3.shizune_voice{
	color: #000;
	font-size: 1.3em;
	font-weight: bold;
 	background: url(../img/atama.png) no-repeat left top;
	padding: 5px 10px 5px 38px;
	margin-top:30px;
}

.lblock div, .rblock div, div.center_block{
	padding: 24px; /*5%;*/
}

.subtitle {
	padding-top: 10px;
	padding-bottom: 5px;
	color: #ae4f00;
	font-weight: bold;
	font-size: 1.2em;
}

.lblock dl, .rblock dl {
	float: left;
}

.dimage {
	padding: 0 !important;
	text-align: center;
	margin-bottom: 10px;
}

.dimage p {
	font-size: 11px;
	line-height: 1.4em;
}

.interview {
	float: left;
}

.txt {
	font-size: 12px;
}

.txt_center {
	font-size: 12px;
	text-align: center;
}



.ititle { font-weight: bold; }

/*tokucho*/

.ttokucho {
	margin: 40px 0 20px 0 !important;
	padding: 0 !important;
	text-align: center;
}

#tokucho {
	background-image: url(../img/bg_tokucho.jpg);
	background-repeat: repeat;
	background-position: left top;
	padding-bottom: 20px;
}

#tokucho h2 {
	padding: 90px 0 15px 0;
}

#tokucho h3 {
	padding: 30px 0 15px 0;
}

#tkcho {
	overflow: hidden;
	margin: 0 auto;
	text-align: center;
	background-image: url(../img/down-arrow.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	padding-bottom: 50px;
	margin-bottom: 15px;
}

#tkcho ul li{
	text-align: center;
	display: inline;
}

#tkcho ul li img { padding-bottom: 15px; margin-right: 5px; }


.box { 
	overflow: hidden; 
	margin-bottom: 10px;
}


.step {
	padding-right: 5px;
	font-size: 18px;
	font-weight: bold;
}

.bgwhite {
	background: url(../img/bg_trwhite.png);
	background-repeat: repeat;
	background-position: left top;
}

.bgblack {
	background: url(../img/bg_trblack.png);
	background-repeat: repeat;
	background-position: left top;
	line-height: 26px;
}

.bgwhite p, .bgblack p {
	padding: 20px;
}



/*kumitate*/

#kumitate {
	margin-top: 30px;
	background: url(../img/bg_kumitate.gif) repeat left top;
}

#kumitate h3 {
	padding-left: 2%;
	padding-right: 2%;
}

.kumi {
	padding: 0% 2% 2% 2%;
	text-align: center;
	overflow: hidden;
}

.kflow p { margin-bottom: 5px; font-size: 13px; }

/*hikaku*/

#hikaku {
	background-image: url(../img/bg_hikaku.gif);
	background-repeat: repeat;
	background-position: left top;
	padding-bottom: 20px;
}

#hikaku h2 {
	padding: 30px 0 15px 0;
}

.hkk .fll, .hkk .flr { margin-bottom: 10px; }

.hkk .flr p { margin-bottom: 10px; }

.hkk .flr dl dt { margin-bottom: 5px; }

.hkk .flr dl dd { margin-bottom: 10px; font-size: 16px; }


/*color*/


#color {
	padding: 90px 0 30px 0;
	background-image: url(../img/bg_color.gif);
	background-repeat: repeat;
	background-position: left top;
	padding-bottom: 20px;
}

.boxor {
	border: 7px #f8b551 solid;
	background-color: #FFF;
}

.boxor h3 {
	margin: 3% 0 20px 3%;
}

#product {
	padding: 3%;
	margin-top: 20px;
}

#productphoto {
	text-align: center;
}

#productphoto img  {
	border: 1px #ccc solid;
	height: auto;
}

#photo img {
	width: 90%;
	max-width: 300px; 
	height: auto;
}

#photo {
	min-height: 380px;
}


#thumnails {
	margin: 10px auto;
	overflow: hidden;
}

#thumnails ul li {
	display: inline;
}

#thumnails ul li img {
	border: 1px #ccc solid;
	margin-right: 2px;
	margin-bottom: 140px;
}

#details dl {
	margin-bottom: 15px;
}

#details dl dt {
	border-bottom: 7px #666 solid;
	padding-bottom: 4px;
	margin-bottom: 10px;
	
}

#details dl dd {
	overflow: hidden;
	color: #000;
}

#details dl dd table {
	table-layout: fixed;
}

#details dl dd table th {
	text-align: left !important;
	padding: 3px 10px 3px 0;
	white-space: nowrap;
}

.cpicup li {
	display: inline;
}

.cpicup { margin-bottom: 5px; }

.cpicup li img {
	border: 1px #ccc solid;
	margin-right: 2px;
}

/*news*/
.newsupdate {
	background: #FFF;
	margin: 0px auto 30px auto !important;
}

.newsupdate article {
	width: 100% !important;
	min-height: 300px;
}

.newsupdate article section {
	margin: 0 5%;
}

.newsupdate article section h1 {
	border-bottom: 1px #0068B7 solid;
	font-size: 20px;
	color: #0068B7;
}

.newsupdate article section .up_ymd {
	padding-bottom: 10px !important;
}

.newsupdate article section .detailPhoto {
	padding: 15px 0;
}

.newsupdate article section ul li {
	list-style: inside disc;
	padding-left: 20px;
	
}

.newsupdate article section ol li {
	list-style: inside decimal;
	padding-left: 20px;
	
}


/*common style*/

.tac { text-align: center; }
.tar { text-align: right; }
.tal { text-align: left; }

.pt5 { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }

.pl30 { padding-left: 30px; }

.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }

.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }

.red { color: #F00; }

.fs12 { font-size: 12px !important; }


/* ==============
    MOBILE: Menu
   ============== */

nav ul {
    margin: 0;
    padding: 0;
	box-shadow: 0px 1px 5px #999;
	-moz-box-shadow: 0px 1px 5px #999;　/* Firefox用 */  
	-webkit-box-shadow: 0px 1px 5px #999;　/* Safari,Google Chrome用 */ 
}

#gnavi  {
	overflow: hidden;
}

#gnavi ul li {
	float: left;
	width: 25%;
	z-index: 100;
}

#pd {
	width: 100% !important;
}

nav a {
    display: block;
    padding: 7px 0;
	margin-bottom: 1px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
	width: 100%;
    color: white;
    background: #000;
	font-size: 10px !important;
}


/*ナビゲーション*/

#gnavi ul li a.new:before {
	content: url(../img/new_min.png);
	position: absolute;
	margin-top: -8px;
	margin-left: -16px
}

#gnavi ul li a.version_up:before {
	content: url(../img/version_up.png);
	position: absolute;
	margin-top: -8px;
	margin-left: -16px
}

#gnavi ul li a.update:before {
	content: url(../img/update.png);
	position: absolute;
	margin-top: -8px;
	margin-left: -16px
}

.fixed { margin-top: -100px; }

nav a:hover,
nav a:active {
    background: #333;
}

.title {
	text-align: center;
	
}

.title img {
	max-width:100%;
	height: auto;
}

.pic img { max-width: 100%; height: auto; }




/* ==============
    MOBILE: Main
   ============== */
article header img {
	width: 100%;
	height: auto;
}

.main {
    padding: 20px 0;
	margin-bottom: 20px;
}


.main aside {
    padding: 0;
	display: none;
}


.footer-container {
	width: 90%;
	margin: 30px 5% 0 5%;
	border-top: 3px #f8b551 solid;
	color: #000;
}

.footer-container h3 {
	text-align: center;
	padding-top: 20px;
}

.productinfo { text-align: center; margin-top: 10px; }

.productinfo div { margin-bottom: 10px;}

.productinfo div p { margin-bottom: 5px; }


/*footer*/

#footer {
	background-image: url(../img/bg_copyright.gif);
	background-repeat: repeat;
	background-position: left top;
	padding: 0 0 30px 0;
}

#finner, #copyright, #fmenu {
	text-align: center;
	color: #000;
	width: 90%;
	margin: 0 5%;
}

#finner, #fmenu { 
	padding: 20px 0; 
	border-top: 3px #FFF solid;
}

#footer h3 {
	font-size: 20px;
}

#finner h3 {
	margin-bottom: 10px;
}

#copyright {
	border-top: 1px #FFF solid;
	padding-top: 20px;
}

#copyright dl dt { margin-bottom: 3px; }

#copyright dl dd {
	margin-bottom: 15px;
}

#copyright a {
	color: #0066FF;
	text-decoration: none;
}

#copyright a:hover, #copyright a:active {
	color: #0066FF;
	text-decoration: underline;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

.nav { padding: 0; margin: 0 auto 10px; width: 100%; } 

.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */




/* ==========================================================================
   Media Queries
   ========================================================================== */


@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */
	
	
	#gnavi ul li {

	float: left;
	width: 20%;
	}

	#gnavi ul li a.new:before {
	content: url(../img/new_min.png);
	position: absolute;
	margin-top: -14px;
	margin-left: -20px
	}	

        #gnavi ul li a.version_up:before {
	content: url(../img/version_up.png);
	position: absolute;
	margin-top: -14px;
	margin-left: -20px
	}

        #gnavi ul li a.update:before {
	content: url(../img/update.png);
	position: absolute;
	margin-top: -14px;
	margin-left: -20px
	}


	#pd {
	width: 20% !important;
	}

	
    nav a {
        float: left;
        margin-bottom: 0;
		font-size: 12px !important;
	    padding: 14px 0;

    }
	
	#photo { height: 380px!important; }

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0;
    }
	
	#story h2 {
	padding-top: 90px;
	margin-bottom: 15px;
	text-align: center;
}
#developers h2{
	padding-top: 60px;
	margin-bottom: 15px;
}
#tokucho h2 {
	padding: 60px 0 15px 0;
}
#color {
	padding: 60px 0 30px 0;
	background-image: url(../img/bg_color.gif);
	background-repeat: repeat;
	background-position: left top;
	padding-bottom: 20px;
}



	
}