@charset "utf-8";

/* ==========================================
以下　トップページ CSS
===========================================*/

/* ==========================================
メインフレーム
===========================================*/
div#MainFrame {
	margin-top: 20px; /*変更*/
}
/* ==========================================
左 メイン画像
===========================================*/
div#MainImg {
	width:667px;
	height:310px;
	float: left;
	/*margin-top: 20px;*/
	margin-right: 20px;
	background-color:#fff;
	border:solid #ccc 1px;
}

/* ==========================================
右 ログインボックス
===========================================*/
div#Right {
	width:290px;
	height:310px;
	float: left;
	/*margin-top: 20px;*/
	border:solid #ccc 1px;
    position:relative;
}
/* ==========================================
右 ログイン前（フォーム）
===========================================*/
div#LoginForm {
	padding: 20px 15px;
}

div#LoginForm dl {
	width: 250px;
}
div#LoginForm dt {
	width: 80px;
	float: left;
	clear: left;
}
div#LoginForm dd {
	width: 170px;
	float: left;
}
.LoginText {
	margin: 10px 0;
}
.LoginText,
.LoginCheck {
	color: #555;
}
.LoginError {
	color: #FF0004;
	font-size: 0.9em;
}
.LoginId,
.LoginPass {
    margin-bottom: 16px;
    }
.LoginError,
.LoginCheck {
	margin-bottom: 12px;
}
div#LoginForm dd input[type="text"],
div#LoginForm dd input[type="password"] {
    width: 165px;
	height: 20px;
    padding: 4px;
    font-size: 1.0em;
	border: 1px solid #ccc;
    }
.LoginSubmit {
    position:absolute;
    top: 180px;
    left: 25px;
    }
input.LoginSubmitBtn {
	width: 240px;
	height: 40px;
	/*background-color: #008bdd;*/
	color: #FFF;
	font-size: 1.3em;
	/*border: 1px solid #008bdd;*/
	border: none;
	font-family: "メイリオ", Meiryo;
}
input.LoginSubmitBtn:hover {
	/*background-color: #50a9dd !important;*/
	color: #FFF;
}

/* ==========================================
右 ログイン後（ユーザー名）
===========================================*/

div#Logout {
	width: 240px;
	height: 200px;
	padding: 20px 15px;
	margin: 0 auto;
}
/*.ThanksTxt,
.OrderTxt,
.OrderNo {
	color: #555;
	font-size: 1.2em;
	line-height: 1.4em;
}
.ThanksTxt {
	margin-bottom: 10px;
}
div#LoginNameArea {
	width: 240px;
	height: 40px;
	margin-bottom: 20px;
}
.LoginName {
	line-height: 1.4em;
	font-size:  1.1em;
	color: #6eaf2e; 
	font-weight: bold;
}
.OrderTxt {
	margin-bottom: 5px;
}
.OrderNo {
	margin-bottom: 15px;
}
.OrderNo a:hover {
	text-decoration: underline;
}*/

.ThanksTxt,
.CustomerTxt,
.CustomerTel {
    color: #555;
    line-height: 1.4em;
}
.CustomerTelGosNotice {
	font-size: 0.8em;
	line-height: 1.4em;
	margin-bottom: 20px;
	letter-spacing: 0.05em;
}
.ThanksTxt {
    margin-bottom: 10px;
    font-size: 1.2em;
}
div#LoginNameArea {
    width: 240px;
    height: 40px;
    margin-bottom: 20px;
}
.LoginName {
    line-height: 1.4em;
    font-size:  1.1em;
    color: #6eaf2e; 
    font-weight: bold;
}
.CustomerTxt {
    margin-bottom: 5px;
    font-size: 1.2em;
}
.CustomerTel {
    margin-bottom: 15px;
    font-size: 1.4em;
}
.CustomerTel a:hover {
    text-decoration: none;
}

div#LogoutSubmit {
    text-align: center;
    }

input.LogoutSubmitBtn {
	width: 240px;
	height: 40px;
	background-color: #eee;
	color: #555;
	font-size: 1.3em;
	border: 1px solid #ccc;
	font-family: "メイリオ", Meiryo;
}
input.LogoutSubmitBtn:hover {
	background-color: #f6f6f6 !important;
	color: #888;
}

/* ==========================================
右　ログインボックス下　新規会員登録
===========================================*/
.NewMember {
	background-color: #78c131;
	border-top:1px solid #ccc;
	text-align: center;
	line-height:1.3em;
	font-size: 1.3em;
    position:absolute;
    top: 240px;
}
.NewMember a {
	width: 290px;
	height: 58px;
	display:block;	
	padding-top:12px;
	color: #fff;
}
.NewMember a:hover {
	background-color: #90c261;
	text-decoration: none;
}
.NewMember .LogBtnIcon {
	float: left;
	vertical-align: middle;
	margin: 3px 25px 0 30px;
}
.NewMember p.Beginer {
	vertical-align: middle;
	text-align: left;
	margin-top: 2px;
    color:#fff;
}
/* ==========================================
メイン画像下　ログイン後（注文履歴）
===========================================*/

div#TopHistoryBox {
	width:980px;
	height: 220px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
}

/* ------------------------------------------
履歴タイトル
------------------------------------------ */
.TopHistory.Title {
	width: 980px;
	font-size: 1.4em;
	color: #555;
	padding: 10px 0;/*上下の余白*/
	font-weight: bold;
}

/*----  履歴アイコン　----*/
.IcoRireki {
	margin-right: 8px;
	margin-left: 10px;
	margin-bottom: -5px;
}

/* ------------------------------------------
履歴フレーム
------------------------------------------ */
div#TopHistoryFrame {
	width:100%;
	height: 220px;
	margin: 0 auto;
	overflow-y: scroll;
}

/* ------------------------------------------
iPhoneでのスクロールバー表示
------------------------------------------ */
div#TopHistoryFrame::-webkit-scrollbar {
	background: #ddd;
	width: 17px;
}

/* ------------------------------------------
履歴リスト
------------------------------------------ */
.TopHistoryList {
	margin-left: 10px;
	width: 940px;
}
.TopHistory {
  display:table;
}
/* ------------------------------------------
履歴ヘッダー
------------------------------------------ */
.TopHistory.Header {
	padding: 10px 5px 20px 0px;
	width:225px;
	height: 100%;
  display:table-cell;
}

.TopHistory.Header li {
	font-size: 1.0em;
	line-height: 1.4em;
}

.TopHistory.Header li.Date {
	font-size: 1.05em;
	font-weight: bold;
	color: #555;
	margin-bottom: 12px;
}

.Date {
	font-size: 1.05em;
	font-weight: bold;
	color: #555;
	margin-bottom: 12px;
}
/* ------------------------------------------
履歴リストの商品名
------------------------------------------ */
.TopHistory.Item {
	padding: 10px 5px 20px 8px;
	width: 76%;
	border-bottom: 1px solid #bbb;
  display:table-cell;
}

.TopHistory.Item ul li {
	line-height: 1.2em;
	padding: 3.5px 0px 3.5px 10px;
	font-size: 0.85em;
	margin-bottom: 1px;
}
/* ------------------------------------------
履歴が存在しない
------------------------------------------ */
.Complete2 {
	width: 100%;
	padding: 60px 0;
	text-align: center;
  height:100px;
}
.Complete2 p {
	line-height: 6.0em;
	font-size: 1.2em;
}
/* ==========================================
送料無料バナー/KOSバナー
===========================================*/
div#BnrSoryo,div#BnrKos {
	margin-top: 20px;
	float: left;
}

/* ==========================================
バナーエリア
===========================================*/
div#BnrArea {
 	width:100%;
	height:100%;
	float: left; /*追記*/

}

/* ==========================================
バナーエリア (4つレイアウト)
===========================================*/
div#BnrTopic ul li {
	width: 218px;
	height: 130px;
	float: left;
	margin: 20px 10px;
	background-color: #FFF;
	text-align: center;
	vertical-align:middle;
}

div#BnrTopic ul li a {
	display:block;	
}

div#BnrTopic ul li a img{
    max-width:100%;
    max-height:100%;
}

div#BnrTopic ul li .Shoes01,
div#BnrTopic ul li .Shoes02 {
	width: 218px;
	height: 64px;
}
div#BnrTopic ul li .Shoes01 a img,
div#BnrTopic ul li .Shoes02 a img{
    max-width:100%;
    max-height:100%;
}
div#BnrTopic ul li .ShoesLine {
	border: 1px solid #ccc;
}


/* ==========================================
バナーエリア (3つレイアウト)
===========================================*/
div#BnrTopic.BnrThree ul li {
	margin: 20px 50px;
}

	
/* ==========================================
バナーエリア (5つレイアウト)
===========================================*/
div#BnrTopic.BnrFive ul li {
	width: calc(17.96%);
	height:auto;
	float: left;
	margin: 20px 10px;
	//background-color: #FFF;
	text-align: center;
	vertical-align:middle;
}

div#BnrTopic.BnrFive ul li a {
	display:block;	
}

div#BnrTopic.BnrFive ul li a img{
    max-width:100%;
    max-height:100%;
}

div#BnrTopic.BnrFive ul li .Shoes01,
div#BnrTopic.BnrFive ul li .Shoes02 {
	width: calc(96%);
	height: calc(96%);
    margin-bottom:0px;
}
div#BnrTopic.BnrFive ul li .Shoes01 a img,
div#BnrTopic.BnrFive ul li .Shoes02 a img{
    max-width:100%;
    max-height:100%;
}
div#BnrTopic.BnrFive ul li .ShoesLine {
	border: 0px solid #ccc;
}


/* ==========================================
キャンペーン・お知らせ
===========================================*/

.TopInfo {
	width:100%;
	margin: 10px auto;
	line-height: 3.0em;
}

/*----  キャンペーン・お知らせ h2　----*/

.TopInfo h2 {
    width: 100%;
    padding: 0;/*上下の余白*/
    color:#555;
    font-size: 20px;
    font-weight: bold;
    font-family: "メイリオ", Meiryo;
    position: relative;
    float:left;
}
/*----  キャンペーンアイコン　----*/
.IcoCamp {
	margin-right: 8px;
	margin-bottom: -5px;
}

/*----  お知らせアイコン　----*/
.IcoInfo {
	margin-right: 8px;
	margin-bottom: -2px;
}

/*----  一覧リンク　----*/
.listLink {
    width: 100px;
    height: 40px;
    /*background-color: #008bdd;*/
    float:right;
    position: relative;
    top: -45px; /*変更*/
    left:0;
}

.listLink a {
	display: block;
	color: #fff;
	text-align: center;
}
.listLink a:hover {
	width: 100px;
	height: 40px;
	background-color: #50a9dd;
	text-decoration:none;
}

/*----  キャンペーン・お知らせ一覧　----*/

.TopInfo dl {
	width:100%;
	border-bottom: solid 1px #ccc;

}

.TopInfo dt,
.TopInfo dd {
	font-size: 1.1em;
	line-height: 3.0em;
}

.TopInfo dt {
	float:left;
	color: #555;
}

.TopInfo dd {
	width: 80%;
	margin-left:20%;
	color: #005baa;
}

.TopInfo dd a {
    display:block;       
    margin: 3px 0 1px 0; /*変更*/
}


/* ==========================================
WEBカタログ専用アプリ
===========================================*/

div#WebCatalog {
	width: 100%;
	height: 300px;
	margin-top: 60px;
	margin-bottom: 20px;
}

div#WebCatalog h2 {
	width: 100%;
	margin-bottom: 30px;
	color:#555;
	font-size: 1.4em;
	font-weight: bold;
	font-family: "メイリオ", Meiryo;
}

div#WebCatalog h3 {
	color:#555;
	font-size: 1.3em;
	font-weight: bold;
	margin: 25px 0;
	font-family: "メイリオ", Meiryo;
}

div#WebCatalog h4 {
	color:#555;
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 15px 0;
	font-family: "メイリオ", Meiryo;
}

div#WebCatalog #Read {
	font-size: 1.1em;
	line-height: 1.4em;
	margin-bottom: 20px;
}

div#WebCatalog ul li {
	font-size: 1.1em;
	line-height: 2.0em;
}

div#DegiCataTxt {
	float: left;
	width: 300px;
}
.QrLeft,
.QrRight {
	width: 394px;
	float: left;
	border: 1px solid #aaa;
	padding: 20px 40px;
	margin-top: 20px;
	margin-bottom: 30px;
}
.QrLeft {
	margin-right: 30px;
}
.QrRight {
	margin-right: 0;
}
.AppImg {
	margin-top: 20px;
}
.QrLeftImg {
	float: left;
}
.QrRightImg {
	float: right;
}

/* ==========================================
関連バナー(背景白・3つ並び)
===========================================*/

div#ReBnrAreaWhite {
	width:100%;
	margin-bottom: 40px;
	padding: 10px 0;
}

ul.RelationBnrThree li {
	display:inline-block;
	margin-bottom: 15px;
}

ul.RelationBnrThree li.ReBnrLeft {
	margin-left: 13px;
}

/* ==========================================
関連バナー(背景グレー.・2つ並び)→後で消す
===========================================*/
div#ReBnrArea {
	width:100%;
	margin-bottom: 40px;
	background-color: #eee;	
	padding: 10px 0;
}
div#RelationBnr {
	max-width: 75%;
	margin: 0 auto;
}
div#RelationBnr dl {
	margin: 10px 0;
}
div#RelationBnr dl dt {
	float: left;
	margin: 10px 20px;
}