@charset "utf-8";
/* ==================================================================
style info :コンテンツ全般

=基本レイアウト
=ロゴ
=メニュー
=ボタン
=フッター
=バリデーション
=エラー
=#index
=#login

=各種ハック
=======================================================*/

/*=基本レイアウト
=======================================================*/

html, body {
    overflow-x: hidden;
    overflow-y: auto;
}

.container {
	background-color: #3F3766;
    display: table;
    width: 100%;
}

#header{
    width: 100%;
    height: 300px;
    background-image: url("../images/header_logo.png");
    background-position: 50% 20%;
    background-size: cover;
}

#header a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}

#header header{
    z-index: 10;
    height: 64px;
    position: absolute;
    top: 300px;
    background-color: #333;
    width: 100%;
    text-align: center;
    z-index: 2;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
#header header ul{
    list-style:none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    overflow-x: auto;
    while-space: nowrap;
    -webkit-overflow-scrolling: touch;
    z-index: 20;	
}

#header header ul li{
    flex: 0 0 auto;
    padding: 26px 10px 20px 10px;	
}


#header header ul li:hover {
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1)
}

.main{
    width: 90%;
    float: right;
    margin-top: 64px;	
}



#form #header{
    margin-bottom:40px;
}
.headerBlock{
    position: relative;
    margin: 0 auto;
    max-width: 960px;
}

.mainContent{
	background-color: #FFFFFF;
	border-radius: 20px;
    position: relative;
    margin: 0 auto 50px;
    max-width: 640px;
    text-align: center;
}
.footer{
    margin: 0 auto;
    width: 100%;
}


h1{
    background: url("../images/icon_s.png") no-repeat scroll 0 7px transparent;
    height: 36px;
    padding-left: 67px;
    padding-top: 16px;
    font-size:108%;
}
h1 a{
    background: url("../images/header_logo.png") no-repeat scroll 0 0 transparent;
    display: block;
    text-indent: -99999px;
    width: 180px;
}

/*=詳細CSS
=======================================================*/

/*=ロゴ
=======================================================*/
.logo{
    margin-left: 4px;
    position: absolute;
    top: 9px;
}

/*=メニュー
=======================================================*/
#menu {
    position: absolute;
    top: 0;
    right:0;
    width:120px;
}
#menu ul{
    list-style: none;
    margin-left: -60px;
    padding: 0;
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 99999;
    background: #665d52;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:110px;
}
 
#menu li{
    display: block;
}

#menu li a.shopping ,#menu li a.setteing  {
    display: block;
    text-indent: -99999px;
    width:50px;
    height:50px;
    padding-left:5px;
}

#menu li.gmenu_01 a.shopping {
    background: url("../images/btn_gmenu01.png") no-repeat scroll 0 0 transparent;
}
#menu li.gmenu_01 a.shopping:hover {
    background: url("../images/btn_gmenu01_on.png") no-repeat scroll 0 0 transparent;
}
#menu li.gmenu_02 a.setteing {
    background: url("../images/btn_gmenu02.png") no-repeat scroll 0 0 transparent;
}
#menu li.gmenu_02 a.setteing:hover {
    background: url("../images/btn_gmenu02_on.png") no-repeat scroll 0 0 transparent;
}

/*=ボタン
=======================================================*/
.btn_img {
    margin-bottom:7px;
}
.btn_img li{
    -moz-border-radius: 5px;
    border-radius: 5px;
     /* ▼CSS3 PIE */
   -pie-border-radius: 5px;
    behavior: url(/stylesheets/PIE.htc);
    background: none repeat scroll 0 0 #FFA200;
    display: inline;
    padding: 6px 10px;
    text-align: center;
    font-wight:bold;
    font-size: 116%;
    margin-left:10px;
}
.btn_img a{
    color: #FFFFFF;
    font-weight: bold;
}
/*=フッター
=======================================================*/
#footer {
    margin-bottom: 20px;
    text-align: center;
}
#footer .footer_logo {
    color:#ffa200;
    font-size:116%;
    margin-bottom:7px;
}
#footer .credit {
    margin-bottom:15px;
}
#footer ul {
    margin: 0 auto 0;
    max-width: 750px;
    text-align:center;
}
#footer ul li {
    display: inline;
    padding:0 15px;
}

/*=バリデーション
=======================================================*/
.form .error_txt input {
    background: url("../images/icon_error.png") no-repeat scroll right center #FFFFFF;
    border-color: #FF7171;
}

.validationMessage{
    color: #FF0000;
    display: block;
    padding-top: 3px;
}


/*=エラー（フォーム）
=======================================================*/
#form .error_text{
    border: 1px solid #FF0000;
    color:#FF0000;
    margin-bottom:20px;
}
#form .error_text p{
    margin:0;
    padding:10px;
}
/*=#index
=======================================================*/
/*h2*/
#index h2{
    background: url("../images/logo.png") no-repeat scroll right center #FFFFFF;
    display: block;
    height: 282px;
    margin: 0 auto 30px;
    text-indent: -99999px;
    width: 414px;
}


/*=#login
=======================================================*/
#login #header{
    margin-bottom:30px;
}
#login .login_block{
    border: 1px solid #E0E0E0;
    margin: 0 auto;
    padding: 10px 20px 20px;
    width: 380px;
}
#login .login_block h3{
    font-size: 116%;
    margin-bottom: 17px;
    text-align: center;
}
#login .login_block p{
    font-weight: bold;
    margin: 0 auto 10px;
    width: 80%;
}
#login .login_block label{
    display: block;
    float: left;
    width: 100px;
}

#login .login_block p.forget{
    font-size: 93%;
    font-weight: normal;
    margin-bottom: 20px;
    margin-top: -7px;
}
#login li.btn_login{
    text-align:center;
}
#login li.btn_login input{
    width: 80%;
    margin-bottom:10px;
    font-weight: bold;
}
#login li.btn_login a{
    color: #FFFFFF;
    font-size:116%;
    font-weight: bold;
}
#login .login_block li.clip{
    text-align: right;
}
#login .login_block li.clip label{
    display: inline;
    float: none;
}

/*=#form
=======================================================*/
#form .form_col {
    margin: 0 auto;
    text-align: center;
    width: 500px;
}
#form h3 {
    color: #FFA200;
    margin-bottom:10px;
    font-size: 116%;
    text-align: center;
}
#form p{
    margin-bottom:20px;
}
#form .form{
    text-align:left;
}

#form form div{
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}
#form form label{
    display: block;
    float: left;
    height: 50px;
    width: 140px;
}
#form p.inevi_txt{
    color: #FF0000;
    position: relative;
}
#form form span{
    font-size:93%;
    padding-left:3px;
}
#form form span.inevi{
    color: #FF0000;
    position: absolute;
    top:3px;
}
#form .form input,
#form .form textarea{
    width:250px;
}
#form .text, textarea, .dropdown { 
    color: #333;
}

#form input:focus,#form input.focused,
#form textarea:focus,#form textarea.focused {
    border-color: #333;
    color: #000; 
}
#form .btn_submit {
    overflow: hidden;
    text-align: center;

}
#form form input.submit,
#form form input.btncancel {
    -webkit-appearance:none;
    padding: 4px 10px;
    color: #FFFFFF;
    font-size: 116%;
    font-weight: bold;
    width:200px;
}
#form form input.btncancel {
    width:100px;
}
#form input.submit:focus{
    border-color: none;
    color: #FFFFFF; 
}
#form .unit_col ul{
    margin:0 auto;
    width: 350px;
}

/*=#account
=======================================================*/
#account .account_col{
    margin: 0 auto;
    width:95%;
}
#account h3{
    color: #FFA200;
    margin-bottom:10px;
    font-size: 116%;
    text-align: center;
}

#account table{
    margin-bottom:20px;
}

#account .btn_img{
    margin-bottom:20px;
}

#account .textmainContent{
    padding:0 20px;
}




/*=Chromeハック
=======================================================*/
input[type="text"], input[type="password"], textarea, select { 
outline: none;
}
/*=IE7ハック
=======================================================*/
*:first-child+html body{
    font-family:"ＭＳ Ｐゴシック",sans-serif;
}
/*=IE6ハック
=======================================================*/

*html body{
    font-family:"ＭＳ Ｐゴシック",sans-serif;
}
*html .mainContent{
    width: 960px;
}
*html #index .mainContent{
    text-align:center;
    width: 960px;
}
*html #index .concept {
    width: 700px;
}
*html #index .concept{
    text-align:left;
}