@charset "UTF-8";
/* ****************************************************************************

	layout.css

-------------------------------------------------------------------------------

　01. wrapper
	02. Header
　03. Footer
	04. Left Main - Right Sub
	05. Right Main - Left Sub

******************************************************************************* */

/* 01. wrapper
----------------------------------- */

body{
}

#wrapper{
	position: relative;
	width: 960px;
	margin: 0 auto;
	background: #ffffff;
}

header {
	position: relative;
	overflow: hidden;
	padding: 10px 20px 0px 20px;
}

header a span {
	/* display:none; */
}

footer{
	clear: both;
}

header,footer,aside,nav,section{
	display:block;
}


/* 02. Header
----------------------------------- */

.clubkai header {
}

header h1,
header #logo {
	padding-bottom: 20px;
}

header #headerGlobalNav {
	height: 28px;
}

header #headerGlobalNav li {
	float: left;
}

header #headerGlobalNav li a {
	display: block;
	float: left;
	width:145px;
	height: 28px;
	margin-right:10px;
	text-indent: -9999px;
}

header #headerGlobalNav li.store a {
	background: url(../gif/header_nav_01.gif) no-repeat 0 0;
}

header #headerGlobalNav li.products a {
	background: url(../gif/header_nav_02.gif) no-repeat 0 0;
}

header #headerGlobalNav li.club a {
	background: url(../gif/header_nav_03.gif) no-repeat 0 0;
}

header #headerGlobalNav li.fun a {
	background: url(../gif/header_nav_04.gif) no-repeat 0 0;
}

header #headerGlobalNav li.support a {
	background: url(../gif/header_nav_05.gif) no-repeat 0 0;
}

header #headerGlobalNav li.company a {
	margin-right:0;
	background: url(../gif/header_nav_06.gif) no-repeat 0 0;
}

header #headerGlobalNav li a:hover {
	background-position: 0 -28px;
}

.store header #headerGlobalNav li.store a,
.products header #headerGlobalNav li.products a,
.clubkai header #headerGlobalNav li.club a,
.fun header #headerGlobalNav li.fun a,
.support header #headerGlobalNav li.support a,
.company header #headerGlobalNav li.company a {
	background-position: 0 -56px;
}

header #headerGuideNav {
	position: absolute;
	top: 10px;
	right: 20px;
}

header #headerGuideNav li {
	float: right;
	line-height: 30px;
	margin-left: 10px;
}

header #headerGuideNav input[type="text"] {
	width: 180px;
	height: 28px;
	vertical-align: top;
	line-height: 28px;
	margin: 0 5px 0 0;
	padding: 0 5px;
	border: 1px solid #cccccc;
	border-radius: 3px;
}

header #headerGuideNav input[type="image"] {
	vertical-align: top;
	margin: 0;
	padding: 0;
}

header #headerGuideNav li:nth-child(2) {
	margin-left: 20px;
	padding-left: 15px;
	background: url('../png/header_icon_01.png') no-repeat 0 50%;
}

header #headerGuideNav li:nth-child(2) a {
	padding-right: 15px;
	background: url('../png/header_icon_02.png') no-repeat center right;
}

header #storeHeadSearch {
	margin-top: 10px;
}

header #storeHeadSearch form {
	clear: both;
	overflow: hidden;
	padding: 10px;
	background: #666;
}

.store header #storeHeadSearch form {
	clear: both;
	overflow: hidden;
	padding: 10px;
	background: #b82f00;
}

.products header #storeHeadSearch form {
	background: #2c82b8;
}

.clubkai header #storeHeadSearch form {
	background: #e2712b;
}

.fun header #storeHeadSearch form {
	background: #e2b323;
}

.support header #storeHeadSearch form {
	background: #467d57;
}

header #storeHeadSearch form input {
	float: left;
	vertical-align: top;
	margin: 0;
	padding: 0;
}

header #storeHeadSearch form input[type="text"] {
	width: 190px;
	height: 18px;
	line-height: 18px;
	margin-right: 7px;
	padding: 0 5px;
	border: 1px solid #ffffff;
	border-radius: 3px;
}

header #storeHeadSearch form ul {
	float: right;
}

header #storeHeadSearch form li {
	float: right;
	line-height: 20px;
	margin-left: 15px;
	padding-left: 15px;
	color: #ffffff;
}

header #storeHeadSearch form .guide {
	background: url(../header_icon_03.html) no-repeat 0 2px;
}

header #storeHeadSearch form .favorite {
	background: url(../header_icon_04.html) no-repeat 0 5px;
}

header #storeHeadSearch form .cart {
	padding-left: 22px;
	background: url(../header_icon_05.html) no-repeat 0 3px;
}

header #storeHeadSearch form .logout {
	background: url(../header_icon_06.html) no-repeat 0 2px;
}

header #storeHeadSearch form .mypage {
	background: url(../header_icon_07.html) no-repeat 0 3px;
}

header #storeHeadSearch form .login {
	background: url(../header_icon_06.html) no-repeat 0 2px;
}

header #storeHeadSearch form .regist {
	padding-left: 18px;
	background: url(../header_icon_08.html) no-repeat 0 2px;
}

header #headerGuideNav .login,
header #storeHeadSearch form .logout,
header #storeHeadSearch form .mypage {
	display:none;
}

.login header #headerGuideNav .login,
.login header #storeHeadSearch form .logout,
.login header #storeHeadSearch form .mypage {
	display:block;
}
.login header #storeHeadSearch form .login,
.login header #storeHeadSearch form .regist {
	display:none;
}

header #storeHeadSearch a {
	color: #ffffff;
}

/*=== breadcrumb ====*/


/* 03. Footer
----------------------------------- */

footer {
	padding-top:50px;
	zoom: 100%;
}

footer .pageTop {
	margin:0 20px 10px 20px;
}

footer .pageTop a {
	display:block;
	background: url('../gif/icon_arrow_black_up.gif') left center no-repeat;
	padding-left:15px;
	float:right;
	width:115px;
}


/* #footerNav1
-----------------------*/
footer #footerNav1{
	margin:0 auto;
	background: #f7f7f7;
	border-top:1px solid #000;
	padding:20px 10px 20px 20px;
}

footer #footerNav1 ul{
	float: left;
	border-right: 1px dotted #5a5454;
	font-weight:bold;
	display:block;
	padding:0 10px 0 0;
	margin:0 10px 0 0;
	font-size:11px;
}
	footer #footerNav1 ul a{
		color:#333;
	}

	footer #footerNav1 ul.list01{
		width:120px;
	}
	footer #footerNav1 ul.list02{
		width:140px;
	}
	footer #footerNav1 ul.list03{
		width:140px;
	}
	footer #footerNav1 ul.list04{
		width:138px;
	}
	footer #footerNav1 ul.list05{
		width:157px;
	}
	footer #footerNav1 ul.list06{
		width:130px;
	}


	footer #footerNav1 ul.list02 ul{
		width:120px;
	}

footer #footerNav1 ul:last-child {
	border: none;
	padding:0;
	margin:0;
}

footer #footerNav1 ul ul {
	margin: 0;
	padding:10px 0 10px !important;
	border: none;
	font-weight: normal;
	width:auto;
}
	footer #footerNav1 ul ul a{
		color:#666;
	}

footer #footerNav1 li {
}



/* #footerNav2
-----------------------*/

footer #footerNav2 {
	clear: both;
	padding: 7px 20px;
	background: #cccccc;
	font-size:11px;
}

footer #footerNav2 li {
	float: left;
	margin: 0 10px 0 0;
	padding: 0 10px 0 0;
	border-right: 1px solid #6d6d6d;
}
	footer #footerNav2 li {
	}

footer #footerNav2 li:first-child {
	border-left: 1px solid #6d6d6d;
	padding: 0 10px 0;
}
footer #footerNav2 li:last-child {
	margin: 0;
	padding: 0;
	border: none;
}

footer #copyright {
	padding: 3px 20px 10px 18px;
	color: #666;
	font-size: 11px;
}

footer #copyright img {
	margin:7px 10px 0 0;
}


/* 04. Left Main - Right Sub
----------------------------------- */
#mainContent-left {
	float: left;
	width: 600px;
	margin-left:20px;
}

#subContent-right {
	float: right;
	width: 300px;
	margin-right:20px;
}


/* 05. Right Main
----------------------------------- */

#mainContent-right {
	width: 100%;
	/* border-top: 1px dotted #ccc; */
}
#mainContent-right h2{
	font-size: 2.4rem;
	line-height: 1.70833;
	font-weight: 700;
	margin-bottom: 30px;
}
#mainContent-right .form-subttl{
	font-size: 2rem;
	line-height: 1.70833;
	font-weight: 700;
	margin-bottom: 20px;
	padding: 10px 0;
	border-top: 1px solid #242424;
	border-bottom: 1px solid #242424;
}
@media (min-width: 768px) {
	#mainContent-right{
		width: calc(100% - 220px);
		margin-left:20px;
	}
}

#mainContent-right .paging {
	overflow: hidden;
	margin-bottom: 15px;
	padding: 7px 10px;
	background: #f2f2f2;
}
#mainContent-right .paging li:first-child {
	float: left;
}
#mainContent-right .paging li:last-child {
	float: right;
}
#mainContent-right .paging li:last-child .prev {
	padding-left: 12px;
	background: url(../imagepaging_prev.html) no-repeat 0 50%;
}
#mainContent-right .paging li:last-child .next {
	padding-right: 12px;
	background: url(../imagepaging_next.html) no-repeat center right;
}
#mainContent-right .paging span {
	color: #b82f00;
}

#mainContent-right .form-center {
  width: 80%;
  margin-left: 0 !important;
  margin: 0 auto !important;
}

/* 06. Left Sub
----------------------------------- */
.layout-wrap{
	width: 100%;
}
@media (min-width: 768px)  {
	.layout-wrap{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
	}
	}
#subContent-left {
	width: 100%;
}
@media (min-width: 768px) {
	#subContent-left{
		width: 200px;
	}
}

#subContent-left nav {
	margin-bottom: 15px;
	padding: 5px 5px 0;
	border: 1px solid #cccccc;
	border-radius: 3px;
}

#subContent-left nav .subContent-left-title-button {
	border-radius: 3px;
	background:url(../gif/side_category_bg.gif) repeat left top;
	font-size:14px;
	margin-bottom:10px;
}

#subContent-left nav .subContent-left-title-button a {
	display:block;
	padding:5px;
	background:url(../gif/icon_arrow_white.gif) no-repeat 7px 11px;
	padding-left:20px;
	color:#fff;
	font-weight:bold;
}

#subContent-left nav .subContent-left-title-button .open {
	background:url(../gif/icon_arrow_white_down.gif) no-repeat 5px 14px;
}

#subContent-left nav dd {
	padding-left: 20px;
	background: url(../gif/icon_arrow_grey_thin.gif) no-repeat 7px 8px;
	margin-bottom:10px;
}

#subContent-left nav dd ul {
	display:none;
}

#subContent-left nav dd ul li {
	margin-top:10px;
	background: url(../gif/icon_arrow_grey_thin.gif) no-repeat left 8px;
	padding-left: 10px;
}

/* 07. one Column
----------------------------------- */
#oneColumn {
	padding: 0 20px;
}

#oneColumn .paging {
	overflow: hidden;
	margin: 30px 0;
	padding: 7px 10px;
	text-align: center;
	background: #f2f2f2;
}
#oneColumn .paging .prev {
	float: left;
	padding-left: 12px;
	background: url(../imagepaging_prev.html) no-repeat 0 50%;
}
#oneColumn .paging .next {
	float: right;
	padding-right: 12px;
	background: url(../imagepaging_next.html) no-repeat center right;
}
#oneColumn .paging span {
	color: #b82f00;
}

/* coupon */
header {
	overflow: visible !important;
}

header .can_get_coupon {
	position:fixed;
	background: url("../coupon_alert.html");
	display:block;
	z-index:2;
	top:20%;
	width:69px;
	height:336px;
	left: 0px;
}
header .can_get_coupon a {
	display: block;
	width: 100%;
	height: 100%;
}
/* 08. 2nd title
----------------------------------- */
.pageTitle {
	padding: 5px 0 0 10px;
	font-size: 12px;
	font-weight: bold;
	color:#fff;
	background-color:#999999;
	border-radius: 3px;
	min-height:21px;
	_height:26px;
}

body.clubkai .pageTitle {
	padding: 0 0 4px 23px;
	font-size: 16px;
	font-weight: bold;
	color:#000;
	background:#fff url('../gif/ttl_2nd_clubkai.gif') left bottom no-repeat;
	border-radius: 3px;
	min-height:23px;
	_height:28px;
}

/* news_next_pre
----------------------------------- */
.news_next_pre {
	margin-top: 0;
	border-top: 1px dotted #CCC;
	padding-top: 8px;
	margin-bottom: 12px;
	text-align: center;
}

/* レスポンシブ
----------------------------------- */
.pc-view,
.pc-header,
.pc-footer {
	 display: none;
}
.sp-header,
.sp-footer {
	 display: inline;
}
.sp-view {
	 display: inline;
}
/*  SP  */
@media screen and (min-width:768px) {
	.pc-view,
	.pc-header,
	.pc-footer {
		display: inline;
	}
	.sp-view,
	.sp-header,
	.sp-footer {
		display: none;
	}
}