/* modern browser */
img{max-width: 100%;height: auto;}

body {font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Osaka,Meiryo,"メイリオ","MS P Gothic","ＭＳ Ｐゴシック",sans-serif; color: #333;}
a{ color:#00A1E9;}
html,body {
    margin: 0;
}
 
#wrapper {
    width: 100%;
    position: relative;
}

/****************************************
 structer setting
*****************************************/

#header  {  
    width: 960px;
	margin: 0 auto; 
	position: relative;
}  
/*
* html #footer {
    bottom:expression(document.getElementById("wrapper").offsetHeight % 2 == 0 ? 0 : -1);
}*/
#contents { width: 960px; margin: 0 auto; position: relative; }

#FooterWrap { background: #222; width: 100%;}
#Footer { width: 960px; margin: 0 auto; position: relative; height: 185px; color: #fff;}



/****************************************
 Typography
*****************************************/
/* Font (Base 13px) */
.f8 {	font-size: 62% !important;}
.f9 {	font-size: 68% !important;}
.f10 {	font-size: 74% !important;}
.f11 {	font-size: 83.3% !important;}
.f12 {	font-size: 93% !important;}
.f13 {	font-size: 100% !important;}
.f14 {	font-size: 105% !important;}
.f15 {	font-size: 115% !important;}
.f16 {	font-size: 123% !important;}
.f17 {	font-size: 136% !important;}
.f18 {	font-size: 145% !important;}
.f19 {	font-size: 154% !important;}
.f20 {	font-size: 160% !important;}
.f22 {	font-size: 170% !important;}
.f28 {	font-size: 190% !important;}
.lh120 { line-height: 1.2 !important;}
.lh130 { line-height: 1.3 !important;}
.lh140 { line-height: 1.4 !important;}
.lh150 { line-height: 1.5 !important;}
.lh160 { line-height: 1.6 !important;}
.lh170 { line-height: 1.7 !important;}
.lh180 { line-height: 1.8 !important;}

.fb { font-weight: bold !important;}
.fn { font-weight: normal !important;}
.fcolor_cookiray { color: #00A1E9;}

/****************************************
 Clearfix
*****************************************/

#contents:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  
#contents { display: inline-table; }  
/* Hides from IE-mac \*/  
* html #contents { height: 1%; }  
#contents { display: block; zoom:1; }  
/* End hide from IE-mac */  


.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
} 
.clearfix { display: inline-table; }  
/* Hides from IE-mac \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; zoom:1;}  
/* End hide from IE-mac */  


.section:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}    
.section { display: inline-table; }    
/* Hides from IE-mac \*/  
* html .section { height: 1%; }  
.section { display: block; zoom:1; }  
/* End hide from IE-mac */  

.box:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
} 
.box { display: inline-table; }  
/* Hides from IE-mac \*/  
* html .box { height: 1%; }  
.box { display: block; zoom:1;}  
/* End hide from IE-mac */  


/****************************************
 margin
*****************************************/

.mt0 {margin-top: 0 !important;}
.mt05 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt80 {margin-top: 80px !important;}
.mt100 {margin-top: 100px !important;}
.mt200 {margin-top: 200px !important;}

.mb0 {margin-bottom: 0 !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb100 {margin-bottom: 100px !important;}
.mb200 {margin-bottom: 200px !important;}

.ml0 {margin-left: 0 !important;}
.ml05 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml40 {margin-left: 40px !important;}
.ml50 {margin-left: 50px !important;}
.ml80 {margin-left: 80px !important;}
.ml100 {margin-left: 100px !important;}
.ml200 {margin-left: 200px !important;}

.mr0 {margin-right: 0 !important;}
.mr05 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr40 {margin-right: 40px !important;}
.mr50 {margin-right: 50px !important;}
.mr80 {margin-right: 80px !important;}
.mr100 {margin-right: 100px !important;}
.mr200 {margin-right: 200px !important;}

.pb0 {padding-bottom: 0 !important;}
.pb05 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb80 {padding-bottom: 80px !important;}
.pb100 {padding-bottom: 100px !important;}
.pb200 {padding-bottom: 200px !important;}

/****************************************
 header setting
*****************************************/
 

#header a { color: #ddd ; text-decoration: none; }
#header a:hover { color: #00A1E9;}
#header h1 { padding-top: 34px; margin-bottom: 20px;}
#header .header_img { position: absolute; top: 0; right:0;}
#header .lead { margin-left: 18px; font-size: 16px; font-weight: bold; margin-bottom: 50px;}

/****************************************
 main contents setting
*****************************************/

h2 { padding-bottom: 38px; padding-left: 25px;}
h3 { color:#00A6EB; font-size: 19px; margin-bottom: 15px; }

.section { margin-bottom: 40px;}
#section01 .floatleft { width: 420px;}

.contentHead { margin: 0 auto 30px auto; position: relative;}
div.box {border: 4px solid #00A8EC; padding: 20px 16px 20px 16px; margin-bottom: 65px;}
div.box .floatleft h4 { margin-bottom: 40px;}
div.box .floatleft p { margin-bottom: 30px;}
div.box .floatright h4 { margin-bottom: 20px;}

#contents p { font-size: 123%; margin-bottom: 10px;}
#contents li { font-size: 123%;}

.bg { background: #EEEEEE; padding: 20px 16px;}

.floatleft { float: left;}
.floatright { float: right;}
.alignleft { text-align: left;}
.alignright { text-align: right;}
.aligncenter { text-align: center;}
.relative { position: relative;}

.kome { text-indent: -1em; margin-left: 1em;}
ul.kome { text-indent: 0; margin-left: 0; }
ul.kome li { text-indent: -1em; margin-left: 1em; font-size: 12px; line-height: 1.2; }

/* pagetop 
---------------------------------------- */  
.pagetop { text-align: right; margin-bottom: 10px;}
.pagetop a { background: url(../images/common/arrow_top_off.png) no-repeat right 4px; padding: 4px 20px 4px 0; font-family:Arial, Helvetica, sans-serif; font-size: 11px; color: #333; text-decoration: none;}
.pagetop a:hover { background: url(../images/common/arrow_top_on.png) no-repeat right 4px; text-decoration:none; }

/* others 
---------------------------------------- */  
#contents sup { font-size: 0.7em; vertical-align:top;}

.centerLi { text-align: center;}
.centerLi li { padding: 0 5px; margin: 0 0 15px 0; display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; }
.centerLi li a {display:block;}

.sponly { display: none;}

#submenu { display: none;}
#submenu select {
	-moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    padding: 4px;
    border: 1px solid #DDD;
    color: #222;
	cursor: pointer;
	background: url(../images/common/arrow_pulldown.gif) no-repeat right 50%;
	/*
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.32) inset;
	*/
	}
.br-sp,
.br-sptb {display:none;}




/****************************************
 footer contents
*****************************************/

#Footer .copyright { position: absolute; right: 0; text-align: right; bottom: 15px; font-size: 10px;}
#Footer .close { position: absolute; top: 40px; width: 100%;  text-align: center;}
#Footer .contact { position: absolute; top: 20px;}
#Footer .contact h3,
#Footer .contact p { color: #fff; text-align: left; font-size: 14px; font-weight: normal; margin:0;}
#Footer .contact p { margin-left: 10px;}


/*-----------------------------------------------------------------------------------*/
/* various
/*-----------------------------------------------------------------------------------*/









/* ABOUT
----------------------------------------- */ 

/* common */




/* mail form */
#form h1 { text-align: center; margin:0;}
#form h2 { text-align: center; padding: 30px 0;}
#form .lead { text-align:center; font-weight:bold;}
#form .sub_lead { text-align:center; color: #FF3F00; font-size: 14px; margin-bottom: 50px}
#contents .formArea dt,
#contents .formArea dd,
#contents .formArea p,
#contents .formArea li {font-size: 14px;}
#contents .formArea p { margin-bottom:0;}
#mfp_OperationCheck{ display: none;}
.form .section h3,
.thanks .section h3 { font-size: 24px; color: #00A1E9; margin-bottom: 30px; }
.formArea { position: relative; margin: 0; }
.formArea h4 { margin: 0 0 20px 30px; font-size: 14px;}
.formArea dl { margin: 0 0 30px 0 ; position: relative;}
.formArea dt { position: absolute; left: 0; width: 160px; margin-bottom: 12px; text-align: left; padding:  0 0 12px 30px;}
.formArea dd { padding-left: 250px; padding-bottom: 12px; margin-bottom: 12px; font-size: 14px; border-bottom: 1px dotted #ccc; }
.formArea dd img { margin-bottom: 5px;}
.formArea label { display: inline-block; vertical-align: middle; padding-right: 18px; line-height: 1em; cursor: pointer;}
input ,select{vertical-align:middle; margin-top:0;}
.formArea table td { padding: 3px;}
.form .section p.setsumei span,
.formArea dt span {	color: #CC0000;	padding-left: 5px;}
.formArea dd span {font-size: 11px;	padding-left: 8px;}
.formArea textarea {height: 96px; width: 420px;}
.formArea dl.enquate ul li {float: left;}
.formArea dl.enquate ul.txt li { height: 26px; margin-bottom: 5px;}
.formArea dl dd ul.product {margin: 0 0 22px 8px;}
.formArea dl dd ul.product li {min-width: 165px; padding: 0px ; margin-bottom: 2px; text-align:left; font-size: 12px; }
.formArea dl dd ul.product li input { padding:0 !important;}
.formArea dl dd ul.product li img {padding: 5px 0px 5px 5px ;}
.formArea dl dd ul.product li input[type="radio"] { padding:0;}
.formArea dl dd ul.product li label{padding-right: 10px;}
.formArea .product_custom {padding: 22px 0 10px;}
.formArea .product_custom p {font-size: 12px !important; color: #00A1E9;}
.formArea .product_custom .kome {padding-bottom: 2px;}
.formArea .product_custom .name {margin-left: 1em; padding-top: 6px; line-height: 1.4;}
.formArea .product_custom .name span {display: inline-block; margin-right: 2px; padding: 1px 2px 0 3px; border: 1px solid #FF3F00; color: #00A1E9;}
.formArea dl dd ol li {margin-bottom: 5px;}
.formArea table#mfp_confirm_table tr th, table#mfp_confirm_table tr td { border-bottom: 1px dotted #CCC; background: none !important; border-top: none !important; padding-top: 10px; padding-bottom: 10px;}
.formArea .mfp_parent_error {border: none !important;}
table#mfp_confirm_table tr.mfp_colored { background: none !important;}
.thanks #main .section { height: 400px;}
.thanks #main p.msg { text-align: center; margin-top: 50px;}
.mfp_thanks { margin: 100px 0 250px;}
div#mfp_phase_confirm h4 {font-size: 24px !important; margin-top: -20px !important;}
.formArea #number { position: absolute; top: 0; right: 0; padding-left: 20px; background:#fff;}
.formArea dl dt.noborder,
.formArea dl dd.noborder { border:none;}
.formArea dl dd.number { height: 100px;}
.formArea dl dd.date { height: 280px;}

.formArea dd:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
} 
.formArea dd { display: inline-table; }  
/* Hides from IE-mac \*/  
* html .formArea dd { height: 1%; }  
.formArea dd { display: block; zoom:1;}  
/* End hide from IE-mac */  

input[type="button"], 
input[type="submit"], 
input[type="reset"], 
input[type="file"]::-webkit-file-upload-button, 
button { border: none; background: none; padding: 0; cursor: pointer;}
#mfp_button_cancel,
#mfp_button_submit,
#mfp_button_send{ background:url(../img/btn_bg_01.png) repeat-x; line-height: 54px; text-align: center; width: 240px; color: #fff; font-weight: bold; letter-spacing: 2px; margin: 0 20px 15px;}
#mfp_button_reset,
#mfp_button_cancel{ background:url(../img/btn_bg_02.png) repeat-x; line-height: 54px; text-align: center; width: 240px; color: #fff; font-weight: bold; letter-spacing: 2px; margin: 0 20px 15px;}


.mfp_buttons img:hover {filter: alpha(opacity=70);
-moz-opacity: 0.70;
opacity: 0.70;}


/* exchange_filter */

#exchange_filter .section .right img { margin: 10px 0;}
#exchange_filter #section01 { border-bottom: 1px solid #ccc;}
#exchange_filter #section01 p { margin-left: 22px;}
#exchange_filter #section01 .left { margin-right: 50px; }


a.blank { background: url(../img/window01-07.png) no-repeat right 50%; padding-right: 12px;}

/****************************************
 responsive
*****************************************/


/*-----------------------------------------------------------------------------------*/
/* all
/*-----------------------------------------------------------------------------------*/
#mobile-bar { display: none;}
#nav ul#globalNavi li > ul { display: none !important;}
/*-----------------------------------------------------------------------------------*/
/* 640px - 
/*-----------------------------------------------------------------------------------*/

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

#build-menu { display: none;}
.nav-wrap { display: block;}

}
/*-----------------------------------------------------------------------------------*/
/* 640px - 
/*-----------------------------------------------------------------------------------*/

@media screen and ( min-width: 640px ) {
.pc_none { display: none;}

}


/*-----------------------------------------------------------------------------------*/
/*  - 639px
/*-----------------------------------------------------------------------------------*/

@media screen and ( max-width: 639px ) {
.br-sp {display: block;}
.sp-tb_none { display: none;}

#header  { width: 100%; }  
#contents { width: 100%; } 
#Footer { width: 100%; } 

#header h1 { margin-bottom: 0;}
#header .header_img { position: relative;}
#header .lead { text-align: center; margin: 20px 0;}

#contents p { font-size: 105%; margin-bottom: 10px;}
#contents li { font-size: 105%;}
.floatleft { float: none;}
.floatright { float: none;}
div.box {border: none; padding: 0; width: 92%; margin: 0 4% 30px;}
.section {width: 92%; margin: 0 4% 30px;}
#section01 .floatleft { width: auto;}
div.box .floatleft h4 { margin-bottom: 20px;}
div.box .floatleft p { margin-bottom: 10px;}
div.box .floatleft { margin-bottom: 30px;}
div.box .floatright h4 { margin-bottom: 20px;}


.formArea h4 { margin: 0 0 20px 10px; }
.formArea dt { width: auto; position: relative; padding: 0 0 0 10px;}
.formArea dd { padding-left: 0; padding: 0 0 12px 10px;}

.formArea dl dd ul.product li { letter-spacing: -0.1em;}
.formArea textarea {height: 96px; max-width: 260px !important;}
.formArea input { max-width: 260px !important;}
div.mfp_buttons ul { height: auto !important; width: auto !important;}
div.mfp_buttons ul li { float: none !important; height: auto !important; margin: 0 auto !important; overflow:auto !important;}
.formArea dl dd ul.product {margin-bottom: 15px;}
.formArea dl dd ul.product li { width: 50%;}
.formArea .product_custom {padding: 15px 15px 10px 0;}
.formArea .product_custom .kome {padding-bottom: 5px;}
table#mfp_confirm_table tr th {
width: 30% !important;
}

.formArea #number { position: relative; top: auto; right: auto; padding-left: 0; background:#fff;}
.formArea dl dt.noborder,
.formArea dl dd.noborder {  border-bottom: 1px dotted #CCC;}
.formArea dl dd.number { height: auto; padding-right: 10px;}
.formArea dl dd.date { height: auto;}

.mfp_thanks { margin: 40px 0 100px;}

#Footer { height: auto;}
#Footer .contact h3, #Footer .contact p { font-size: 12px;}
#Footer .close,
#Footer .contact { position: relative; top: auto;}
#Footer .copyright { position: relative; text-align: center;  font-size: 10px; bottom: auto; padding-bottom: 10px;}
#Footer .close { position: relative; top: auto; width: 100%;  text-align: center; padding: 15px 0;}
#Footer .contact { position: relative; }

}