@charset "utf-8";

/* reset
------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
table { border-collapse:collapse; border-spacing:0; border:0; }
fieldset,img { vertical-align:bottom; border:0; }
ol,ul { list-style:none; }
textarea{ font-size:1em; font-family:"MS PGothic","Osaka",Arial,sans-serif; }

/*=========================================================== 
    reset.css ver 1.1 [2008/7/2]  
    *This document validates as CSS level 3 
    *GNU General Public License v3 
    *http://higash.net/20080702/reset_css2.html 
 
    Modify YUI Reset CSS, YUI Fonts CSS  
    *Copyright (c) 2008, Yahoo! Inc. All rights reserved. 
    *http://developer.yahoo.com/yui/license.html 
     
    Modify Formy CSS Form Framework 0.8(beta) 
    *GNU General Public License v2 
    *http://code.google.com/p/formy-css-framework/ 
===========================================================*/
/* --FORM RESET-- */  
input, textarea { line-height:1.4; padding:0; vertical-align:middle; }
input[type="checkbox"],
input[type="radio"] { vertical-align:text-bottom; }
input[type="submit"] { padding:0.1em; }  
select { padding:0; }
/* for IE6 */  
* html input{ padding:0.1em; }
* html input.checkbox,
* html input.radio { vertical-align:-0.3em; }
* html input.submit { line-height:1.2; padding-top:0.2em; }
* html select{ vertical-align:-0.2em; }  
/* for IE7 */  
*+html input { padding:0.1em; }
*+html input.submit { line-height:1.2; padding-top:0.2em; }
*+html select { vertical-align:-0.2em; }
/* for Opera9.27 */  
html:first-child input { padding:0.1em; }
html:first-child input[type="checkbox"],  
html:first-child input[type="radio"] { vertical-align:middle; }
html:first-child input[type="submit"] { padding:0.3em; }
html:first-child select { padding:0.2em; }
/* for Opera9.5 [Safari3] */
body:first-of-type input { padding:0.1em; }
body:first-of-type input[type="checkbox"],
body:first-of-type input[type="radio"] { vertical-align:-0.3em; }
body:first-of-type input[type="submit"] { padding:0.3em 0.3em 0.2em 0.3em; }
/* for Safari3 */
html:not(:only-child:only-child) input { padding:0; vertical-align:baseline; }
html:not(:only-child:only-child) input[type="checkbox"],
html:not(:only-child:only-child) <span class="hilite">input</span>[type="radio"] { vertical-align:baseline; }
html:not(:only-child:only-child) select { vertical-align:0.1em; }

/* clearfix
------------------------------------------------------------*/
.clear {
	display:block;
	clear:both;
	margin:0px; padding:0px;
	font-size:0.01em;
	overflow: hidden;
	height: 1px;
	line-height: 1px;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
	overflow:hidden;
}

/* Hides from IE-mac \
* html .clearfix { height: 1%; }*/
.clearfix { display: block; }
/* End hides from IE-mac \*/

/* style
------------------------------------------------------------*/
* { font-size: 100%; }

body {
	font-family:'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
	color: #666;
	font-size: 75%;
	line-height: 140%;
	background: url(../images/bg.jpg) repeat-x;
	padding: 5px 0 0 0;
}

.none{ display: none; }
.b{ font-weight: bold; }
.f10 { font-size: 84%; }
.f12 { font-size: 100%; }
.f14 { font-size: 117%; }
.f16 { font-size: 134%; }
.f18 { font-size: 150%; }
.f20 { font-size: 167%; }

.taC{ text-align: center; }
.taR{ text-align: right; }
.fL{ float: left; }
.fR{ float: right; }

.red{ color: #FF0000; }
.blue{ color: #2F5EAB; }

/* Basic link */
a{ vertical-align: 0; overflow: hidden; }
a:link,
a:visited{ color: #0CADE5; text-decoration: none; }
a:hover { color: #2F5EAB; text-decoration: underline; }

/* Gray link */
.grayLink a:link,
.grayLink a:visited{ color: #666; text-decoration: none; }
.grayLink a:hover{ color: #333; text-decoration: underline; }

/* temp layout
------------------------------------------------------------*/

#wrap{ background: url(../images/bg_shadow.png) center top no-repeat; }

/* header */
#header{
	width: 960px;
	margin: 0 auto;
	background: #FFF;
}

#header .headerLogo{
  position: relative;
  height: 80px;
  width: 330px;
  margin-left: 10px;
}

#sgh_logo{
  position: absolute;
  top: 12px;
  left: 16px;
  padding-right: 16px;
  border-right: #3b499f 1px solid;
}

#sagawa_logo{
  position: absolute;
  top: 19px;
  left: 117px;
}

#header h2{ width: 325px; float: left; }

/* headerNav */

#header .headerNav{
	width: 940px;
	margin: 0 auto;
    position: absolute;
}
#header .headerNav ul{ float: right;}
#header .headerNav li{ 
  float: left; 
}
#header .headerNav li a{
  padding: 20px;
  padding-left: 15px;
	background: url(../images/icon_circle.gif) left center no-repeat;
  display: inline-block;
}
#header .headerNav li.headerBnr{
  background-color: #3b499f;
}
#header .headerNav li.headerBnr a{
  display: block;
  padding: 20px;
  color: #fff;
  background: none;

}

/* globalNav */
#globalNav{ width: 960px; padding: 0 0 10px 0; }
#globalNav li{ float: left; }
#globalNav li button#btn_action{height: 50px;}

/* column */
#contents{
	width: 940px;
	margin: 0 auto;
	padding: 10px 10px 0 10px;
	background: #FFF;
	border-top: dotted 1px #E9EBF5;
}

#contents .contentsL{ width: 212px; float: left; }
#contents .contentsR{ width: 712px; float: right; }

.contentsBox{
	border: solid 1px #D5D5D5;
	box-shadow: #EAEAE3 0px 0px 3px, #EAEAE3 0px 0px 3px;
	-moz-box-shadow: #EAEAE3 0px 0px 3px, #EAEAE3 0px 0px 3px;
 	-webkit-box-shadow: #EAEAE3 0px 0px 3px, #EAEAE3 0px 0px 3px;
}
.contentsL .contentsBox{
  margin-bottom: 15px;
}

.contentsL .btnArea{
	padding: 0 0 15px 0;
}

.contentsL .seikyumeijinBanner{
	width: 162px;
	margin: 0 auto;
	padding: 0 0 15px 0;
}

.okyakusama{
	display: block;
	cursor: pointer;
	width: 530px;
	margin: 0;
    padding: 10px 10px;
	background: #436ab3;
	color: #ffffff;
	font-size: 14px;
    letter-spacing: 1px;
	line-height: 1;
	font-weight: bold;
    background-image: linear-gradient(#5d88bd 0%, #004098 100%);
    border-bottom: solid 3px #6bcbf9;
}

.webtotal{
	display: block;
	cursor: pointer;
	width: 530px;
	margin: 0;
    padding: 10px 10px;
	background: #436ab3;
	color: #ffffff;
	font-size: 14px;
    letter-spacing: 1px;
	line-height: 1;
	font-weight: bold;
    background-image: linear-gradient(#f3993c 0%, #c1460c 100%);
    border-bottom: solid 3px #ffc267;
}

.contentsL .login{
	margin: 0 0 15px 0;
	padding:5px;
	background:url(../images/login_bg.gif);
}

.contentsL .login .pass{
	padding:5px;
	background:url(../images/login_pass_bg.gif);
	border-bottom:#4F5D83 solid 1px;
	border-left:#4F5D83 solid 1px;
	border-right:#4F5D83 solid 1px;
}

.contentsL .login .pass p{
	padding:5px 5px 5px 20px;
	background:#fff url(../images/icon_circle.gif) 5px 6px no-repeat;
}

.contentsL .loginArea dl{
	width: 188px;
	/*height: 29px;*/
	padding: 3px;
	background: url(../images/login_form_bg.gif) repeat;
	margin: 10px auto;
}

.contentsL .loginArea dt{
	width: 63px;
	/*height: 29px;
	text-indent: -9999px;*/
	font-size: 0.1em;
	line-height: 100%;
	float: left;
}

.contentsL .loginArea dd{
	float: right;
}

.contentsL .loginArea dd input{
	width: 114px;
	/*height: 17px;*/
	_margin: -2px 0 0 0;
	padding: 5px;
	border-top: solid 1px #D2D2D2;
	border-bottom: solid 1px #D2D2D2;
	border-right: solid 1px #D2D2D2;
	border-left: none;
	font-size: 12px;
}

.contentsL .loginLink{ padding: 0 5px 15px 5px; }
.contentsL .loginLink a{
	padding: 0 0 0 17px;
	background: url(../images/icon_circle.gif) left center no-repeat;
}

.contentsL .loginArea dt.idTtl{ background: url(../images/login_form_id.jpg) 0 0 no-repeat; }
.contentsL .loginArea dt.passTtl{ background: url(../images/login_form_pass.jpg) 0 0 no-repeat; }

.contentsL .loginArea p.loginBtn{
	width: 110px;
	height: 26px;
	margin: 0 auto;
	padding: 0 0 10px 0;
}

.contentsL .loginArea p.loginContact{
	padding: 0 10px 10px 10px ;
}

.contentsL .loginArea p.loginContact a{
	padding: 0 0 0 15px;
	display: block;
	background: url(../images/icon_circle.gif) left 0.2em no-repeat;
}

.contentsL .productNav{
	padding: 10px 15px 5px 15px;
}

.contentsL .productNav li{
	padding: 0 0 5px 0;
}

.contentsL .productNav li a{
	background: url(../images/icon_arrow.gif) left 0.3em no-repeat;
	padding: 0 0 0 15px;
	display: block;
}

.contentsL p.productSubNav{
	border-top: dotted 1px #D3D7EB;
	padding: 10px 15px 10px 15px;
}

.contentsL p.productSubNav a{
	background: url(../images/icon_arrow2.gif) left 0.3em no-repeat;
	padding: 0 0 0 15px;
	display: block;
}


.contentsL .kensho{
	padding:10px 8px;
	background:#FFFFE8;
}

.contentsL .kensho p{
	padding:8px 0 8px 3px;
}

.contentsL .kensho ul{
	padding:0;
}

.contentsL .kensho li{
	margin:6px 0 8px 17px;
	line-height:1.2em;
}

/* footer */
#footer{
	padding: 0 0 20px 0;
}

#footer .pageTop{
	width: 120px;
	padding: 0 10px 0 830px;
	margin: 0 auto;
	display: block;
}

#footer .pageTop a{
	width: 120px;
	height: 24px;
	background: url(../images/page_top.gif) 0 0 no-repeat;
	text-indent: -9999px;
	display: block;
}

#footer .footerNavWrap{
	padding: 10px 0;
	border-top: dotted 1px #D3D7EB;
	border-bottom: dotted 1px #D3D7EB;
	background: url(../images/footernav_bg.gif) repeat;
}

#footer .footerNav{
	width: 960px;
	margin: 0 auto;
}
#footer .footerNav li{ float: right; white-space: nowrap; }
#footer .footerNav li a{
	padding: 0 0 0 15px;
	margin: 0 10px 0 0;
	background: url(../images/icon_circle.gif) left center no-repeat;
}


#footer address{
  border-top: 3px solid #3B499F;
}
#footer address .footer_copy{
  width: 980px;
  text-align: right;
  margin: 5px auto 0 auto;
}

ul#globalNav button#btn_action{
  padding: 0;
  border: none;
  width: 190px;
  box-sizing: content-box;
}
ul#globalNav #dialog input{
  padding: 10px 20px;
  float: right;
  margin-top: 10px;
  margin-left: 10px;
}


/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 100; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 30, 0.30);
}

.modalWrapper {
  position: absolute;
  top: 200px;
  left: 50%;
  transform:translate(-50%,-50%);
  max-width: 500px;
  padding: 30px;
  background-color: #fff;
  border: 1px solid;
}
.modalWrapper .modalContents input{
  width: 100px;
  margin: 20px 0 0 10px;
  padding: 10px;
  float: right;
}
.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}


/* 以下ボタンスタイル */
button#openModal{
  border: 0;
  margin: 0;
  padding: 0;
}

#openModal {
  position: absolute;
}
/*
dialog:not([open]){display: none;}
dialog{
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  border: 1px solid;
  padding: 1em;
  background: white;
}
*/