@charset "utf-8";

/*-----------------------------

　リセットCSS + サイト共通設定

------------------------------*/

/* 全ての要素に対する余白初期値設定 */
body,div,span,object,
h1,h2,h3,h4,h5,h6,
p,blockquote, pre,
ul,ol,dl,dt,dd,li,
abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,
b,i,
table,caption,tbody,tfoot,thead,tr,th,td,
fieldset,form,label,legend,select,option,input,
address,pre,strong,em,iframe,img,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video
{
	margin:0;
	padding:0;
	font-size:100%;
	border:0;
}

/* デフォルト文字設定 */
body{
	color:#222;
	font-family: Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size:13px;
	*font-size:small;
	line-height:1.4;
}

* html body {	/* for IF6 */
	font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

/* インライン要素をブロック要素に変更 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/* リストマーカーを非表示 */
ul,ol{
	list-style-type:none;
}

/* テーブルセルのボーダーの設定 */ 
table {
	border-collapse: collapse; 
	border-spacing: 0;
}

/* 画像とフォームパーツの上下位置をテキストの真ん中に */
img, input, select, textarea { 
	vertical-align: middle;
}

/* デフォルトリンク色の設定 */
a:link { color:#0078ff; }

a:visited { color:#0078ff;}

a:hover { color:#54c5ff; }

/* 画像リンクの設定
a img{
	opacity:1;
	filter: alpha(opacity=100);
}

a:hover img{
	opacity:0.7;
	filter: alpha(opacity=75);
}
*/

/*	clearfix
------------------------------*/
.clearfix:after {/*for modern browser*/
   content: "";
   display: block;
   clear: both;
}

* html .clearfix { zoom:1; } /*for IE6*/
*:first-child+html .clearfix { zoom:1; } /*for IE7*/



/* ########### 基本スタイル ########### */


/* #page
-------------------------------------------------------- */
#page {
	max-width: 960px;
	margin: 0 auto;
	text-align: left;
}

/* header
-------------------------------------------------------- */
#header{ margin-top:30px; }


#logo {
	margin: 0 auto;
	text-align:center;
	margin-bottom: 10px;
}

* html  #gNav { height: 1%; }


/* #gnav
-------------------------------------------------------- */
#spmenu {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
  padding-bottom: 33px;
}

#spmenu li {
  display: table-cell;
  vertical-align: top;
  box-sizing: border-box;
  width: 20%;
}

#gnav {
	overflow: hidden;
	padding: 0;
	margin-bottom: 14px;
}

#gnav li { float: left; }

#toggle { display: none; }


/* index
-------------------------------------------------------- */
#home h2{ display:none; }

#info{ margin-bottom: 22px; }

#info p{
	font-size:108%;
	line-height:1.8;
	padding: 14px 10px 0px 30px;
}

#news {
	float:left;
	padding-left:30px;
	width:410px;
}

#news img { margin-bottom:6px; }

#contact {
	float:right;
	width:440px;
}

.blogbox dl{
    margin:10px;
    padding:20px 0 0 0;
    line-height:1.8;
    width:100%;
}
.blogbox dt{
    width:6em;
    float:left;
    margin:0;
    padding:0 0 0 5px;
}
.blogbox dd{
    margin:0 0 10px;
    padding:0 5px 10px 8em;
    border-bottom:1px dotted #ccc;
}

.square_mark { color:#838383; }

.contact_box { margin-bottom: 50px; }

.closebtn {
	text-align:center;
	padding-bottom: 40px;
}


/* pankuzu
---------------------------*/
#pankuzu{
	margin: 8px 0 20px 0;
	padding-left: 10px;
}

#pankuzu li{
	display:inline;
	font-size:85%;
}

#pankuzu a{
	padding-right:15px;
	background:url(../img/ico_arw.gif) right center no-repeat;
}


/* contents
---------------------------*/
.contents_box {
	clear: both;
	max-width: 900px;
	margin:30px 0px 80px 60px;
}

.contents_box h1{
	font-size: 154%;
	color: #85c5c1;
	border-bottom:#ccc 1px dotted;
    padding: 5px 15px 2px 0;
	margin-bottom: 20px;
}

.contents_box h3{
    font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size: 200%;
	color: #111;
	border-bottom:#ccc 1px dotted;
	padding-left: 10px;
	margin-bottom: 20px;
}
	
.contents_box p {
	font-size: 116%;
	line-height: 1.8em;
	color: #333;
	margin-bottom: 1.8em;
}

.contents_box ul {
	font-size: 116%;
	line-height: 1.8em;
	color: #333;
	margin-bottom: 1.8em;
	margin-left: 20px;

}

.contents_box li:before {
	content: '';
	width: 4px;
	height: 4px;
	display: inline-block;
	border-radius: 100%;
	background: #666;
	position: relative;
	left: -15px;
	top: -3px;
}

.contents_box .txt_en { word-wrap: break-word; }

.main_bnr {
	float: right;
	padding: 20px 10px 0 0;
}

.contents_box .sub_img {
	float: right;
	padding: 20px 10px 0 0;
}

.contents_box .totop {
	clear: both;
	text-align: right;
	margin:0px 30px 0px 0px;
}

.product_txt { 
	margin-left: 1em;
	padding-bottom:2em;
}

.new {
	font-weight:bold;
	color:#FF90FA;
}

.sub_txt {
	font-size: 85%;
	line-height: 1.8em;
	color: #aaa;
}

/* pagetop
---------------------------*/
.pagetop {
	clear:both;
	float:right;
	overflow: hidden;
	margin:0px 30px 0px 0px;
}


/* .viewer
------------------------- */
.viewer {
    margin: 0 auto 32px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.viewer ul {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.viewer ul li {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
}
.viewer ul li img { width: 100%; }
.viewer ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
.viewer ul {
    display: inline-block;
    overflow: hidden;
}


/* footer
------------------------------------------*/
#footer .copyright {
	clear:both;
	text-align:center;
	padding:20px 0;
}

.contact_txt {
	text-align:center;
	font-size: 85%;
}


/* ########### 630px以下 ########### */
@media (max-width: 630px) {

#logo {
	width:80%;
	margin: 0 0 0 10px;
	float: none;
	text-align:left;
}

.contents_box .sub_img { float: none; }

.main_bnr {	float: none; }

#header {
  margin: 10px 0 30px;
  background: #fff;
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -moz-box-shadow: 0 10px 6px -7px #eae7de;
  -webkit-box-shadow: 0 10px 6px -7px #eae7dex;
  box-shadow: 0 10px 6px -7px #eae7de;
}

#news {
	width:94%;
	border-bottom: dotted 1px #CFCFCF;
	padding-bottom: 20px;
}

#contact { width:94%; }

#news, #info p{	padding-left:10px; }

#news h3::after,#contact h3::after{
	display: inline-block;
	content: attr(data-label); /*contentでdata-label属性を指定*/
	color: #003d94;
	font-size: 20px;
	font-weight: normal;
	line-height: 18px;
}

#news span::after{
	display: inline-block;
	content: attr(data-label); /*contentでdata-label属性を指定*/
	padding: 0 10px 10px;
	color: #0096ff;
	font-size: 14px;
	text-decoration:underline;
	line-height: 24px;
}

#news h3, #contact h3 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	font-family: 'Sorts Mill Goudy', serif;
    padding: 0.4em 0 0 10px ;
	background-size: 50px 20px;
}

#news span {
	padding:0 0 15px 15px;
	margin-bottom: 20px;
	background: url(../img/ico_arw2.png) no-repeat 15px 0.3em;
}

#footer .copyright { padding-top: 10px; }
	
}

/* ########### 910px以下 ########### */
@media (max-width: 910px) {

/* img調整
------------------------------------------*/
img{
    max-width: 98%;
    height: auto;
}


/* gnav
------------------------------------------*/
#gnav { width: 100%; }

#gnav { background: none; }

#gnav ul {
	 width: 100%;
	 position:absolute;
	 top: 75px;
	 z-index: 101;
}

#gnav li { float: none; }

#gnav ul li img { display: none; }

#gnav li a {
	 display: block;
     text-decoration: none;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

#gnav li a:before { content: attr(data-label); }

#spmenu li{
	display: block;
	float: left;
	padding:　5px 0 6px;;
}

#spmenu li a {
	display: block;
	width: 90%;
	margin: -4px auto 0;
	padding: 10px 0 10px;
	background-color: #fff;
	font-size: 24px;
	color: #000;
	text-align: center;
	text-decoration: none;
	border:solid 4px #bb972f;
}

#spmenu li a:hover{ background: #cdcdcd; }

#spmenu { display: none; }

#spmenu li { width: 100%; }

#toggle {
	display: block;
	background: #4cb4f4;
	-webkit-appearance: none;
	appearance: none;
	position:absolute;
	top: 25px;
	right: 20px;
	width: 32px;
	height: 32px;

	background-color: transparent;
	border: none;
}

.bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #757575;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
}

.bar-01 { top: 0; }

.bar-02 {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.bar-03 { bottom: 0; }

#toggle.is--active .bar {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#toggle.is--active .bar-02 { display: none; }

#toggle.is--active .bar-03 {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#toggle.is--active .bar-01 {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#contact,#gnav { float:left; }

#news {	padding-left: 10px; }

#contact {
	padding-left: 10px;
	margin:30px 0px 20px;
}

.contents_box .totop {
	margin:0px 10px 0px 0px;
}

.contents_box {
	width:90%;
    margin-left: auto;
    margin-right: auto;
}

}

#fade {
    position:absolute; /* ie6 */
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
}