@charset "utf-8";

* {
	box-sizing: border-box; /* パディング・ボーダー・幅・高さ込 */
	font-size: 1em;
	margin:0;
	text-align:left;
}

body {
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", Helvetica, Sans-Serif;
	/*background-color: #fff;*/
	background:url(image/bg_header.png) repeat-x;
	line-height:1.6;
}
img, iframe{ border: none;}



/* --------------------------------------------------
　メディアクエリ
----------------------------------------------------- */

/*ウインドウ幅　（モバイル向け）*/
@media(max-width: 767px) {
/*div{ background: yellow;}*/
	 background-image:none;
}

/*ウインドウ幅　（PC向け）*/
@media(min-width: 768px) {
/*div{ background: red;}*/
}


/* --------------------------------------------------
　ROOT
----------------------------------------------------- */
a {
	color: blue;
	text-decoration:underline;
}

a:hover {
	color: #f00;
	text-decoration:none;
}


a:hover img{
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
}




ul,li{
	list-style:none;
	list-style-position:inside;
	line-height:1em;
	margin:0;
	padding:0;
}

.txt-right{text-align:right;}
.txt-center{text-align:center;}
.txt-left{text-align:left;}
.txt-small{ font-size:0.8em; font-weight:normal;}/*小さい文字*/
.txt-bikou{ color:#060; border:#060 dotted 1px; padding:3px; }/*備考*/

/* clearFIX-------------- */
.do_clearfix:after {
	content: "";
	display: block;
	clear: both;
}



/* --------------------------------------------------
　wrap
----------------------------------------------------- */
#wrap-contents{
	max-width: 960px;
	text-align:center;
	margin:0 auto;
}
#wrap-contents img{ width:100%;}/*画像*/

/* --------------------------------------------------
　ナビ
----------------------------------------------------- */

.nav {
	background-color: #009;
	width:960px;/*auto*/
	margin: 0 auto;
}

.nav a {
	background-color: #009;
	color: #fff;
	display: block;
	float: left;
	font-size: 16px;
	line-height: 48px;
	font-weight: bold;
	border-right: inset 1px #fff;
	padding: 0 20px;
	text-decoration: none;
	width: 20%;
}
.nav li:last-child a{
	border:none;
}

.nav a:hover {
	background: #900;
	color: #fff;
}

@media screen and (max-width: 767px) {
	.nav a {
	float: none;
	margin: 0 0 1px 0;
	width: 100%;
	}
}

/*フッターナビ*/
#nav-foot{ margin:0.2em 0 1em; padding:0; text-align:center;}
#nav-foot li{	display:inline-block; 	margin-bottom: 20px;}
#nav-foot li a{	text-decoration:none;}
#nav-foot li:after{content:"　/　";}
#nav-foot li:last-child:after {content:"";}





/* --------------------------------------------------
　ボタン
----------------------------------------------------- */
	
a.mybtn {
	background: #000;
	color: #fff;
	display: block;
	text-align: center;
	-webkit-border-radius: 10;
	-moz-border-radius: 10;
	border-radius: 10px;
	font-size: 18px;
	padding: 10px 20px;
	text-decoration: none;
}
a.mybtn:hover {
	background: #900;
	text-decoration: none;
}

/* このページのTOPへ移動 */
.gototop {
	margin:1em 1em 1em auto;
	max-width:300px;
}



/* --------------------------------------------------
　スライダー
----------------------------------------------------- */
#logo{/*ロゴ*/
	width:300px;
	margin: 10px 0 0 10px;}
#logo-wrap{
	text-align:left;}


#my-slider{
	position:relative;
	/*background-color: #000;*/
}

/*★ロゴ固定：現在不使用*/
#my-slider #logo{
	position:absolute;
	width :50%;
	max-width:600px;
	top: 0;
	bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
	z-index:100;
}
@media screen and (max-width: 767px) {
	#my-slider #logo{
		width :50%;
	}
}


/* --------------------------------------------------
　一般
----------------------------------------------------- */

/*各ページのH1*/
h1{
	margin:1.6em 0 0; padding:0;
	font-size: 2em;
	font-weight:normal;
	padding:10px 0 10px 20px;
}
h1#title_seihin,
h1#title_zirei,
h1#title_repo,
h1#title_kanren,
h1#title_company{ background:url(image/title_bg.jpg); }

h1#title_home{
	font-size: 1.1em;
	margin: 1.6em 1.6em 1em;
	padding:0;
	text-align: center;
	color:#009;
	font-weight:bold;
	line-height:1.8;
}

h2 {
	font-size: 2em;
	font-weight: normal;
	text-align: left;
	border-bottom: 2px #000 solid;
	margin-top:2em;
	padding-left:0.4em;
}
h2 span { /*英語サブタイ用*/
	margin-left: 1em;
	font-size: 80%;
	color: #ccc;
	position: relative;
	botttom: -5px;
}


.tokuchou{ /*お店の特徴セクション*/
	/*font-size: 2em;*/
	margin: 1.6em 3em 1em;
	text-align: left;	
}
.tokuchou h3{ 
	font-size: 1.2em;
	margin: 0.8em 0 0;
	text-align:left;	
}


.kuwasiku{/*「詳細はこちら」*/
	text-align:right;
	margin:0.4em 0;
}
.kuwasiku:before{
	content: url(image/yazi.png);
  position: relative;
	margin-right:5px;
}



@media(max-width: 767px) {
h1 {
	font-size: 1.2em; margin: 1.2em;
	text-align: left;
}
h2 {
	font-size: 1.2em; font-weight:bold;
}
h3{ font-size:1em;}
.tokuchou{
	margin: 1.6em 1.6em 1em;
}
}


/* --------------------------------------------------
　カラム
----------------------------------------------------- */

/*　2カラム -------------------------------　*/
.cols {
	/*background-color: #fff;*//*#ffefd5*/
	text-align: center;
	padding: 2em;
}
.cols .col {
	float: left;
	width: 48%;
	margin-left: 4%;
}
.cols .col:first-child {
	margin-left: 0;
}
.cols:after {
	content: "";
	display: block;
	clear: both;
}


@media(max-width: 767px) {
.cols .col {
	width: 100%;
	margin-left: 0;
	display: block;
}
}


/*　テーブル -----------------------　*/
table {
	width: 100%;
	margin: 0 auto 2em;
}
caption {
	font-weight: bold;
	padding: 5px;
	border: 1px solid #000;
}
th,td {
	padding: 5px;
	border-bottom: 1px solid #ccc;
	vertical-align:top;
	text-align:left;
}

/*メディア情報のテーブル装飾*/
.tb-media th {
	width: 30%;
}
.tb-media td {
	width: 70%;
	text-align: left;
}
.tb-media th img, .tb-media td img{/*画像*/
	width:100%;
	max-width:500px;}

/*試験結果（レポ）のテーブル装飾*/
.tb-repo th {
	width: 30%;
}
.tb-repo td {
	width: 70%;
	padding-left:2em;
}

/*導入事例のテーブル装飾*/
.tb-zirei th {
	width: 240px;
}
.tb-zirei td {
	width: *;
}
.tb-zirei img{/*事例サムネ角丸*/
	border-radius: 6px; /* CSS3草案 */ 
	-webkit-border-radius: 6px; /* Chrome */ 
	-moz-border-radius: 6px; /* Firefox */ 
}
.tb-zirei h3{	font-weight:normal; font-size:2em; margin-bottom:0.8em;}
.tb-zirei h3 span{ margin-right:10px; padding:5px; background-color:#69c; color:#fff; font-size:0.8em; font-weight:normal; font-size:0.4em; display:inline-block;}


/*関連情報のテーブル装飾*/
.tb-kanren th {
	width: 30%;
}
.tb-kanren td {
	width: 70%;
	padding-left:2em;
}


/*会社概要のテーブル装飾*/
.tb-shopinfo th {
	width: 30%;
}
.tb-shopinfo td {
	width: 70%;
}



@media(max-width: 767px) {
.tb-media th, .tb-media td,
.tb-repo th, .tb-repo td,
.tb-zirei th, .tb-zirei td,
.tb-kanren th, .tb-kanren td,
.tb-shopinfo th, .tb-shopinfo td{
	width: 100%;
	display: block;
}
.cols .col{
	margin-bottom: 2em;	
}
}


/* --------------------------------------------------
　特殊コンテナ
----------------------------------------------------- */

/*ビデオ（スライダー用）*/
.video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	margin-bottom: 30px;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/*ビデオ（BODY内）*/
.boxs_douga {
	position: relative;
	width: 80%;
	height: 0;
	padding-top: 40%;<!-- 56.25% -->
	overflow: hidden;
	margin-bottom: 30px;
	margin:1em auto 0;
}
.box_douga iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*グーグルマップ*/	
.map-container {
	position: relative;
	padding-bottom: 85%;/*縦横比*/
	height: 0;
	overflow: hidden;
}
.map-container iframe, .map-container object, .map-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/*ブログ更新情報：RSS*/
#box_rss{
	width:80%;
	margin:0 auto;
	}


/* --------------------------------------------------
　footer
----------------------------------------------------- */	

#footer {
	width: 100%;
	text-align: center;
	border-top:#000 solid 5px;
	padding:1em;
	margin:1em 0 0;
}
#footer p, #footer div {
	margin: 0 auto;
}



/*SNS box*/
#box_sns {
	overflow: hidden !important;
	text-align:center;
	margin:1.6em auto;
}
#box_sns li {
	display:inline-block;
	margin-right: 20px ;
}
/*#sbox_sns iframe {
	width:119px ;
	height: 20px ;
	margin: 0 ;
	padding: 0 ;
}*/


/*Lineボタン整形*/
#box_line img{
	width:82px !important;
	height:20px !important;
}





/*END*/