@charset "utf-8";
    img{ image-rendering: -webkit-optimize-contrast;}
    /*#header-logo { top: 38px;}*/
    #header-logo a#drama_logo{ display: none;}
    /*.cart-flow #header-logo { top: 9px;}*/

    /* キャンペーン用 */
    .campaign_block{ text-align: center; background: #ff8a02; width: 100%; font-weight: bold;}
    .campaign_block a{ display: block; padding: 0px 10px; text-decoration: none; color: #ffffff;}
    .campaign_block a:hover{ /*color: #ffffff!important; background: #ddb060;*/opacity: 0.8;}
    /* ジャンルページシェアボタン位置修正 */
/*    #genre-share,
    #product-share{ top: 250px!important;}*/

   /* アプリ用のスタイル */
    body.spapp #product-share{ top: 86px;}
    @media screen and (min-width: 768px){}

    #header-username p{ font-size: 1rem;}
	#header-nav a{ font-size: 1rem; line-height: 1.3;}
	#header-nav li:not(.icon-cart) a { border-left: 1px solid #c1c0c0; color: #928178; font-weight: bold; padding: 20px 0 20px;}
	#header-nav li:not(.icon-cart) a:after,
	#header-nav li:not(.icon-cart) a:before{ display: none;}
	#header-search button { background-color: #bdb1aa;}
	#header-nav li:not(.icon-cart) a:hover{color: #928178!important;} 
	#header-search input[type="search"]:focus { border: 1px solid #c8161e!important; outline: 0;}
	.keyword-suggest{ border: 1px solid #595757!important;}
	.keyword-suggest .item.selected{ background: #dfd6b8!important; }
	/*#header-search button.clearHistory{ width: 20px!important; height: 20px!important; border-radius: 5px!important; background-color:#bdb1aa!important; font-size:12px!important;}*/
    #header-nav .icon-mypage br, #header-nav .icon-logout br {display: block;}	

	#header-nav .icon-cart a { background-color: #bdb1aa;}
	html:not(.mobile) #header-nav .icon-cart a:hover { background-color: #a49993;}
	main { padding: 140px 0 0 calc(6vw + 120px); position: relative;}
	#wrapper:before{ width: calc(6vw + 120px); background-color:#eae4d1;}
	#category-nav nav{ width: calc(120px + 6vw); background-color:#eae4d1;}
	#category-nav nav>ul{ padding: 0;}
	#category-nav nav>ul.sb_menu:before{ display: none;}
	#category-nav nav>ul>li>a{ padding: 0 2vw 0; font-size: 1.13rem; height: 1vh;}
	#category-nav nav>ul>li>a:after,
	#category-nav nav>ul>li>a:before{ display: none!important;}
	#category-nav dt a,	
	#category-nav dd a{ font-size: 1.13rem;}

	
	#category-nav ul.sb_menu{ width: 100%; background: #003a63;}
	#category-nav ul.sb_menu li img{width: 60%;}
	#category-nav nav>ul.sb_menu>li>a{ height:auto; max-height:inherit; min-height:inherit; padding: 15px; /*padding: 1.5vw;*/}
	#category-nav ul.sb_menu li { text-align: center; border-bottom:1px solid #ffffff; margin: 0;}
	#category-nav ul.sb_menu li:last-child{ border-right:none;}
	#category-nav ul.sb_menu li a{ width: 100%; display: block;/* line-height: 50px;*/ color: #ffffff!important;}

#category-nav nav > ul:before{ height: auto;}
	
	header ul.sb_menu{ display: flex; width: 100%; position: absolute; bottom: 0; margin: 0; height: 50px; background: #003a63;}
	header ul.sb_menu li { width: 33.3333%; text-align: center; border-right:1px solid #ffffff; margin: 0; padding: 0; position: relative;}
	header ul.sb_menu li:last-child{ border-right:none;}
	header ul.sb_menu li a{ width: 100%; display: block; line-height: 50px; color: #ffffff!important; height: 50px; position: initial;}
	header ul.sb_menu li:before{ display: none;}
	header ul.sb_menu li img{ width: 9vh; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);}

	
	/*.content{ padding-top: 0; background-color: #f5f2e9;}*/

	footer{ background-color: #dfd6b8; font-family: Hiragino UD Sans W6 JIS2004;}
	footer .row { max-width: 790px;}
	.footer-contact{ margin-top: 0; padding: 5px; margin-bottom: 10px;}
	.footer-contact p{ font-size: 1.375rem; text-align: left; font-weight: bold; line-height: 1.3;}
	.footer-contact p:not(.tel){}
	.footer-contact .tel{ display: block;/*display:inline; */padding: 0 0 0 60px;/*padding: 0 0 0 5vw;*/ font-size: 40px; background-position: 0 38%; margin: 0 0 10px 0;}
	/*.left_tel .tel{content:""; width: 100%; display: block; margin-bottom: 20px;}*/
	.footer-contact hr{ border-bottom: 1px solid #000000;}
	p.sp-left-time { font-size: 1.3rem;}
	div:not(.left_tel) .tel:after{ padding: 5px 0 20px 60px;}
	footer .footer-contact:after,
	footer .footer-contact:before{ display: none;}
	#footer-link { border-top: 1px solid #000000; margin-bottom: 20px;}
	#footer-link li{ display:block; border-bottom: 1px solid #000000; border-right: none; margin: 0; padding: 0; line-height:normal;  text-align: left;}
	#footer-link a{ font-size: 1.25rem; font-weight: bold; padding: 10px 0; display: block;}
	#footer-sublink{ text-align: left; font-family: Hiragino UD Sans W4 JIS2004;}
	#footer-sublink a { font-size: 1.25rem; color: #5f5b55; text-decoration: none; -webkit-transition: color .2s linear; transition: color .2s linear;}
	#footer-sublink li{ padding: 0;}
	#footer-sublink li:before{ display: none;}
	html:not(.mobile) #footer-sublink a:hover{color:#000}
	#footer-copyright { font-size: 1.25rem!important; border-top: 1px solid #000000; color: #595757; letter-spacing: 0; text-align: center; line-height: 1.3; padding: 30px;}
	#footer-copyright span{ display: block;}
	ul#footer-banner{ text-align: center; border-top: 1px solid #000000;}

	#footer-snslink{ text-align: left; font-family: Hiragino UD Sans W6 JIS2004; border-top: 1px solid #000000; padding-top: 20px;}
	#footer-snslink a { font-size: 1.25rem; color: #5f5b55; text-decoration: none; -webkit-transition: color .2s linear; transition: color .2s linear;}
	#footer-snslink li{ padding-left: 40px; padding-bottom: 10px;}
	#footer-snslink li:before{ content: ""; background-repeat: no-repeat; top: 0; left: 0; background-image: url(/assets_cat20/images/sns_icon.png); width: 30px; height: 30px;}
	#footer-snslink li:nth-child(1):before{ background-position-x: 0px;}
	#footer-snslink li:nth-child(2):before{ background-position-x: -30px;}
	#footer-snslink li:nth-child(3):before{ background-position-x: -60px;}
	#footer-snslink li:nth-child(4):before{ background-position-x: -90px;}
	html:not(.mobile) #footer-snslink a:hover{color:#000}

    /* サポート */
	#footer-spplink p{ padding-left: 42px; position:relative; font-size: 1.25rem; text-align: left;}
	#footer-spplink p:before{ content: ""; background-repeat: no-repeat; top: 50%; left: 0; background-image: url(/assets_cat20/images/spp_icon.png); width: 38px; height: 38px; background-position-x: 0px; position: absolute; background-size: contain; vertical-align: middle; transform: translateY(-50%);}
	#footer-spplink p a { color: #5f5b55; text-decoration: none; -webkit-transition: color .2s linear; transition: color .2s linear; line-height: 1.3;}
	#footer-spplink p:after{ content: ">"; position: absolute; transform: translateY(-50%); top: 50%;}
	html:not(.mobile) #footer-spplink p a:hover{color:#000;}

    /* 簡易フッター */
    .footer-contact.few_footer{ margin-bottom: 60px;}
    .footer-contact.few_footer ul#footer-link{ text-align: center; border-top:none; display: flex; flex-wrap: nowrap;}
    .footer-contact.few_footer ul#footer-link li{ vertical-align: middle; text-align: center; width: 33.3%; border-bottom:none; border-left: 1px solid #000000;}
    .footer-contact.few_footer ul#footer-link li:last-child{ border-right: 1px solid #000000;}
    .footer-contact.few_footer ul#footer-sublink{ display: flex; flex-wrap: wrap;}
    .footer-contact.few_footer ul#footer-sublink li{ vertical-align: middle; text-align: left; width: 33.3%; margin-bottom: 20px;}
    .footer-contact.few_footer ul#footer-sublink li:nth-child(2),
    .footer-contact.few_footer ul#footer-sublink li:nth-child(5){ text-align: center;}
    .footer-contact.few_footer ul#footer-sublink li:nth-child(3){ text-align: right;}

    /* レコメンド対応 */
div#app-recommend h2.recom_title{ line-height: 1.3; font-family: Ryumin Heavy KL; font-size: 2rem;}
div#app-recommend h2.recom_title span{font-size: 80%;}
div#app-recommend h2.recom_title span.s_title{ display: block; font-family: Gothic MB101 DemiBold; vertical-align:bottom; line-height: 1;}
div#app-recommend h2.recom_title span.s_title img{ vertical-align: bottom;}
div#app-recommend div.slider.slider-recommend ul.slick-dots{ display: none!important;}

   /* アプリ用のスタイル */
body.spapp div#header-usernam,
body.spapp div#header-usernam+p,
body.spapp nav#header-nav,
body.spapp p#btn-menu{ display: none!important;}
body.spapp header.fixed { height: 0px;}
body.spapp #header-search{ height: 60px; padding: 0!important;}
body.spapp #header-search .header { top: 10px!important;}
body.spapp #btn-category { top: 0px;}
body.spapp #category-nav nav { top: 0px;}
body.spapp p#btn-category.on+#category-nav nav{ top: 57px;}
body.spapp main { padding: 58px 0 0!important;}

/* 簡単登録フォーム用CSS */
table.ac_number input[type="text"]{ max-width: 14%;}
table.ac_number input[type="text"]:not(.full){margin-right: 0px; text-align: center;}

@media screen and (min-width: 1200px), print{
.scrolled #category-nav nav dl {
    height: calc(100vh + 150px);
}
}

@media screen and (max-width: 1199px), print {
main { padding: 140px 0 0;}
/*.content { padding-top: 0px;}*/
#header-search .header {
    width: calc(100% - 9vw - 180px);
    height: 36px;
    top: 92px;
    left: calc(180px + 6vw);
    -webkit-transition: none;
    transition: none;
}
/*#header-logo { top: 15px; max-width: 110px;}*/
.footer-contact .tel{ padding: 0 0 0 5vw;}
}



@media screen and (max-width: 1199px) and (min-width: 768px), print{ 
#btn-category button:before { border-bottom: solid 15px #003a63;}
	}
	
@media screen and (min-width: 768px), print{
html:not(.mobile) #category-nav nav>ul>li:hover>a,
.mobile #category-nav nav>ul>li.on>a{ color:#000; font-weight:bold; background-color:#dfd6b8;}
html:not(.mobile) #category-nav nav>ul.sb_menu>li:hover>a,
.mobile #category-nav nav>ul.sb_menu>li.on>a{ background-color:#868aa3;}
#category-nav dl{ background-color:#dfd6b8;}
}

@media screen and (max-width: 767px){
#header-nav a, #header-nav .icon-cart a, .cart-flow #header-nav a{font-size: .69rem; line-height: 1.5;}
#header-username, #header-nav .icon-favorite, body:not(.cart-flow) #header-nav .icon-guide, body:not(.cart-flow) #header-nav .icon-contact { display: none;}
/*.content { padding-bottom: 40px;}*/
main { padding: 160px 0 0;}
header.fixed { height: 105px;}
header .header{ height: 105px;}
.cart-flow header .header,
.cart-flow header.fixed { height: 55px;}
#header-search .header { width: calc(100% - 6vw); height: 36px; left: 3vw; top: 113px;}
#header-search{ padding: 60px 0 0; height: 160px!important;}
#btn-menu button{ background-color: #bdb1aa!important; border-left: solid 1px #ffffff;}
/*#header-logo img { width: 11vw;}*/
#header-nav a{ height: 55px;}
#header-nav a,
#header-nav li:not(.icon-cart) a,
#header-nav .icon-cart a,
.cart-flow #header-nav a {padding: 0;}
#header-nav a:before { top: 17px;}
/*#header-nav .icon-cart span{ top:5px;}*/
/*#header-logo,.cart-flow #header-logo { top: 0;}
#header-logo span { font-size: 0.6rem; position: absolute; top: 5px; left: 30%; display: inline-block;}*/
#category-nav nav>ul.sb_menu>li.on>a{ background-color:#868aa3!important;}	
	
#category-nav nav>ul>li>a {
    width: calc(100% - 55px);
    height: 55px;
    max-height: none;
    min-height: 0;
    padding: 10px;
    border-bottom: solid 1px #d7d2cc;
}
		
#category-nav nav {
    width: 100%;
    height: 100vh;
    top: 0 !important;
    left: auto;
    right: 0;
    overflow: hidden;
}

#category-nav nav>ul.sb_menu>li>a {
    height: 55px;
    padding: 10px 15px 10px;
}

.mypage #category-nav nav > ul:before {
		content: "";
		display: block;
		padding-top: 100px;
	}

#category-nav nav>ul.sb_menu>li>a img{ height: 4vh; width: auto;}
#category-nav nav>ul.show-sp{padding: 100px 0 0px;}
#category-nav nav>ul:last-of-type{ padding-bottom: 70px;}
#category-nav button{ background-color: #eae4d1;}
	
/* ハンバーガーメニュー改修 */	
#btn-menu button span:nth-child(1) { text-indent: 0!important; display: block; font-size: .69rem; color: #fff; line-height: 1.3; bottom: 1px; position: absolute; text-align: center; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 100%;}

	div#app-footer:before { content: ""; width: 50%; height: 10px; background: #c8161e; display: block; margin: 0 auto;}
	div#app-footer { background: #eae4d1; }
	
	footer{ background-color: #eae4d1; padding: 3vw 0 0 0;}
	.footer-contact { margin:0; min-width:320px;}
	.footer-contact p{ font-size: 4.7vw; text-align: center; font-weight: bold; line-height: 1.3;}
	.footer-contact p:not(.tel){}
	.footer-contact .tel{ display:inline;/*padding: 5px 0 30px 60px; margin-bottom: 20px;*/ font-size: 9vw; margin-left:0; background-position: 0 4.2vw; padding: 1vw 0 0vw 10vw; background-size: 8vw 4.48vw;}
	.footer-contact p.sp-left-time{ padding: 2vw 10vw 2vw 18vw; font-size: 4.5vw; text-align: left;}
	#footer-link a { padding: 1vw 18vw; font-size: 4vw;}
	#footer-link { margin-bottom: 2vw;}
	#footer-sublink li{ padding: 0 18vw;}
	#footer-sublink a { font-size: 4vw;}
	#footer-snslink { padding: 20px 16vw 0 18vw;}
	#footer-snslink a { font-size: 4vw;}
	#footer-spplink p { padding-left: 35px;}
	#footer-spplink { padding: 20px 10vw 0 10vw;}
	#footer-spplink a,
	#footer-spplink p:after{ font-size: 4vw;}
	#footer-spplink p:before{ width: 30px; height: 30px;}
	.phone .footer-contact #footer-snslink a{padding: 0;}
	.footer-contact p.sp-left{padding: 0 10vw;}
	.phone .footer-contact p#btn-pagetop a,
	.phone .footer-contact #footer-sublink a{ padding: 0;}
	.phone .footer-contact a { padding: 8px 10px 8px 40px;}
/*	.footer-contact .tel { background-position: 0 4vw; padding: 10px 0 10px 60px;}*/
	footer .row p#footer-copyright { font-size: 2.8vw!important; padding: 10px 30px 40px 30px;}
	.phone .footer-contact .tel{ display:block; width:270px; margin:8px auto 5vw auto; padding:0; font-size:2rem; border:none; background-position: calc(50% - 100px) 15px; overflow:hidden; border-radius:30px; background-color: #FFFFFF;}
	
    /* 簡易フッター */
	.footer-contact.few_footer{ margin:0;}
    .footer-contact.few_footer ul#footer-link{ text-align: center; border-top: 1px solid #000000; display:block;}
    .footer-contact.few_footer ul#footer-link li{ vertical-align: middle; text-align:left; width:auto; border-bottom: 1px solid #000000; border-left:none;}
    .footer-contact.few_footer ul#footer-link li:last-child{ border-right: none;}
    .footer-contact.few_footer ul#footer-sublink{ display:block;}
    .footer-contact.few_footer ul#footer-sublink li{ vertical-align: middle; text-align: left; width:auto; margin-bottom: 5px;}
    .footer-contact.few_footer ul#footer-sublink li:nth-child(2),
    .footer-contact.few_footer ul#footer-sublink li:nth-child(5),
    .footer-contact.few_footer ul#footer-sublink li:nth-child(3){ text-align: left;}
	
   /* アプリ用のスタイル */
	body.spapp header .header { height: 50px!important;}
	body.spapp #header-search .header { top: 58px!important;}
	body.spapp #header-search { padding: 0; height: 58px!important;}
	body.spapp main { padding: 103px 0 0!important;}
	body.spapp header.fixed { height: 50px;}
	body.cart-flow.spapp .header{ display: none;}
	body.cart-flow.spapp main{ padding:0!important;}
	
}
   /* 横向きの場合のスタイル */
@media screen and (orientation: landscape) {
	.phone header ul.sb_menu li img{ width: 10vw;}
/*	.phone #header-logo{ max-width: auto; text-align: left; margin: 0; }*/
}
   /* 縦向きの場合のスタイル */
@media screen and (orientation: portrait) {
/*.phone #header-logo{ left: 0; width: 100%; max-width: calc(100% - 220px); margin: 0 220px 0 0;}
.phone #header-logo img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
.phone .cart-flow #header-logo{ max-width: 110px; top: 0; margin: 0;}*/
}

/* スマホ時ヘッター非表示 */
@media screen and (max-width: 767px) {
	body.sp-no-header div#app-header,
	body.sp-no-header div#app-search{ display: none;}
	body.sp-no-header main { padding: 0 0 0;}
}
@media screen and (max-width: 400px){
/* レコメンド対応 */
div#app-recommend h2.recom_title{ font-size: 1.5rem;}
div#app-recommend h2.recom_title span.s_title img{ width: 120px;}
}
@media screen and (max-width: 320px){
#footer-link a,
#footer-sublink a{ font-size: .88rem;}
footer .row p#footer-copyright{ font-size: .75rem;}
}