/* =====================================================================
*
*    3. Yahoo UI Library Fonts CSS
*    http://developer.yahoo.com/yui/fonts/
*    *Copyright (c) 2006, Yahoo! Inc. All rights reserved.
*    *http://developer.yahoo.com/yui/license.txt
*    
*    Font-size Adjustment
*    
*     77% = 10px    |   122% = 16px |   167% = 22px 
*     85% = 11px    |   129% = 17px |   174% = 23px
*     93% = 12px    |   136% = 18px |   182% = 24px
*    100% = 13px    |   144% = 19px |   189% = 25px
*    107% = 14px    |   152% = 20px |   197% = 26px
*    114% = 15px    |   159% = 21px |   204% = 27px
*    212% = 28px    |   159% = 29px |   197% = 30px
*
* =================================================================== */
form {
    overflow-y: auto;
    height: 100%;
}

body {
    font-size: 13px;
    *font-size: small;
    *font: x-small;
}

table {
    font-size: inherit;
    font: 100%;
}
 
select, input, textarea {
    font-size: 99%;
}

/* =====================================================================
*
*    フォント
*
* =================================================================== */

/* ---------------------------------
*    Font Family
*/

body {
    font-family: 'icon','ヒラギノ角ゴ ProN W3','helvetica','arial','verdana','sans-serif';
}

/* ---------------------------------
*    Font Size
*/

.xx-large  { font-size: 200%; line-height: 1.8em; }
.mid-large { font-size: 182%; line-height: 1.4em; }
.x-large   { font-size: 164%; line-height: 1.8em; }
.large     { font-size: 144%; }
.mid       { font-size: 122%; }
.regular   { font-size: 107%; }
.small     { font-size:  92%; }
.mid-small { font-size:  85%; letter-spacing: 1px; }
.x-small   { font-size:  77%; letter-spacing: 1px; }


/* =====================================================================
*
*    リンク
*
* =================================================================== */

/* \*/ a { outline:none; overflow:hidden; } /**/
/* \*/ a:focus { outline:none; overflow:hidden; } /**/

a:link        { color: #000000; text-decoration: none; }
a:visited     { color: #000000; text-decoration: none; }
a:hover       { color: #000000; text-decoration: none; }
a:active      { color: #000000; text-decoration: none; }


/* =====================================================================
*
*    共通
*
* =================================================================== */

/* ---------------------------------
*    clearfix
*/

.clearfix { min-height: 1%; }

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

.clearfix { display: inline-table; }

/* Hides from Mac IE \*/
* html .clearfix { height: 1px; }
.clearfix { display: block; }
/* Hides from Mac IE */

/* ---------------------------------
*    汎用クラス
*/

.line-through { text-decoration: line-through !important; }
.unit { margin-bottom: 1.5em; clear: both; }
.underline { text-decoration: underline !important; }

/* ---------------------------------
*    ボタン
*/

.btn {
    text-align: center;
    display: block;
    text-decoration: none !important;
}

/* ---------------------------------
*    タイトル
*/

.unit h3 {
    padding: 1em;
    background-color: #ccc;
    font-size: 14px;
}

/* ---------------------------------
*    グローバルナビ
*/

/* 1列 */
.global-nav-1 li {
    width: 100%;
    border-bottom: 1px solid #eee;
}

.global-nav-1 li:first-child { border-top: 1px solid #eee; }

.global-nav-1 li a {
    display: block;
    padding: 1em;
}

/* 2列 */
.global-nav-2 li {
    display: inline-table;
    width: 50%;
    float: left;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.global-nav-2 li:first-child, .global-nav-2 li:nth-child(2) { border-top: 1px solid #eee; }
.global-nav-2 li:nth-child(even) {
    border-right: none;
}

.global-nav-2 li a {
    display: table-cell;
    padding: 0 .5em;
    height: 60px;
    vertical-align: middle;
    line-height: 1.5;
}

/* ---------------------------------
*    商品一覧表示
*/

.product-price { line-height: 1.3; }
.product-price .special { color: #f00; }
.product-price .line-through {
    display: block;
    color: #000;
    /*margin-bottom: .3em;*/
}

.product-name .icon { line-height: 0; }
.product-name .icon img {
    height: 20px;
    margin: 0 1px 1px 0;
    vertical-align: middle;
}

/* 2列 */

.product-list-2 li {
    float: left;
    position: relative;
    width: 49.999%;
    margin-bottom: 1.5em;
}

.product-list-2 li div {
    width: 90%;
    margin: 0 auto;
}

.product-list-2 li div p { margin-bottom: .3em; }

.product-list-2 .product-image { position: relative; }
.product-list-2 .product-image img {
    width: 100%;
    height: auto;
}

.product-list-2 .product-name {
    line-height: 1.3;
    padding: .3em 0;
}

.product-list-2 .sold-out {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}

.product-list-2 .rank {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: #000;
}

.product-list-2 .rank1 { background-color: #FFB100; }
.product-list-2 .rank2 { background-color: #B6B6B6; }
.product-list-2 .rank3 { background-color: #AA6D44; }

/* 3列 */
.product-list-3 {
    margin-top: 1.5em;
}

.product-list-3 li {
    float: left;
    position: relative;
    width: 33.333%;
    margin-bottom: 1.5em;
}

.product-list-3 li div {
    width: 90%;
    margin: 0 auto;
}

.product-list-3 .product-image { position: relative; }
.product-list-3 .product-image img {
    width: 100%;
    height: auto;
}

.product-list-3 .rank {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: #000;
}

.product-list-3 .rank1 { background-color: #FFB100; }
.product-list-3 .rank2 { background-color: #B6B6B6; }
.product-list-3 .rank3 { background-color: #AA6D44; }

.product-list-3 .product-name span {
    line-height: 1.6;
    padding: .3em 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.product-list-3 .sold-out {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}

/* 4列 */

.product-list-4 {
	margin-top: 1.5em;
}

.product-list-4 li {
	float: left;
	position: relative;
	width: 50%;
	height: 40px;
	margin-bottom: 1.5em;
}



/* 1列（商品一覧リスト型） */

.product-list-2 .product-image-variation { display: none; }

.product-list li {
    position: relative;
    width: 96%;
    padding: 4% 2%;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

.product-list .product-image {
    position: relative;
    float: left;
    width: 140px;
}

.product-list .product-image img {
    width: 140px;
}

.product-list .product-name,
.product-list .product-price,
.product-list .product-set-promotion,
.product-list .product-image-variation {
    float: right;
    width: 50%;
    margin-bottom: .3em;
    line-height: 1.3;
}

.product-list .product-image-variation { clear: both; }
.product-list .product-image-variation img { width: 45px; }

.product-list .sold-out {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}

/* もっと見るボタン */

.unit .view-more a {
    width: 50%;
    background-color: #000;
    color: #fff;
    padding: 1em 0;
    margin: 0 auto;
}

/* 詳細ページへボタン */
.unit .course-detail a {
	width: 90%;
	background-color: #000;
	color: #fff;
}

/* 商品付帯情報 */

.wrap-product-option {
	width: 90%;
	margin: 10px auto;
}
.wrap-product-option-list {
	height: 40px;
}
.wrap-product-option-value-name {
	width: 20%;
	text-align: start;
}
.wrap-product-option-disp-kbn {
	overflow-x: auto;
	white-space: nowrap;
}

#Contents div.column {
	float: none;
}

/* ---------------------------------
*    ページトップ
*/

.page-top a {
    background-color: #333;
    color: #fff;
    padding: 1em 0;
}

/* ---------------------------------
*    エラーページ/Error
*/

.error-unit {
    margin-bottom: 2em;
}

.error-unit h2 {
    padding: .5em;
    background-color: #CCC;
    font-size: 15px;
}

.error-unit .msg {
    padding: .5em;
    line-height: 1.5;
    font-size: 12px;
}

.error-unit .button {
    padding: 1em;
}

.error-unit .button-next .btn {
    padding: 1.5em 0;
    background-color: #000;
    color: #fff;
}

.error-unit .button-prev .btn {
    padding: 1.5em 0;
    background-color: #ccc;
}

.msg-alert {
    padding: 1em;
    text-align: center;
}

/* ---------------------------------
*    登録解除ページ/Unsubscribe
*/

.unsubscribe-unit {
  margin-bottom: 2em;
}

.unsubscribe-unit h2 {
  padding: .5em;
  background-color: #CCC;
  font-size: 15px;
}

.unsubscribe-unit .msg {
  padding: .5em;
  line-height: 1.5;
  font-size: 12px;
}

.unsubscribe-unit .button {
  padding: 1em;
}

.unsubscribe-unit .button-next .btn {
  padding: 1.5em 0;
  background-color: #000;
  color: #fff;
}

.unsubscribe-unit .button-prev .btn {
  padding: 1.5em 0;
  background-color: #ccc;
}

/* ---------------------------------
*    パンくず/ページャー
*/

.breadcrumbs {
    font-size: 11px;
    line-height: 1.5;
    padding: .5em;
    background-color: #eee;
}

.pager-wrap {
    background-color: #333;
}

.below .total { display: none; }

.pager-wrap .pager {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.pager-wrap .pager li {
    display: table-cell;
    text-align: center;
    color: #fff;
    padding: .7em 0;
}

.pager-wrap .pager li a {
    display: block;
    color: #fff;
}

.above .pager-nums { display: none; }
.below .page-now { display: none; }

.pager-wrap .pager-nums {
    text-align: center;
    color: #fff;
    font-size: 14px;
    letter-spacing: 2px;
}

.pager-wrap .pager-nums a {
    display: inline !important;
    color: #fff;
    text-decoration: underline;
}


/* =====================================================================
*
*    ヘッダー
*
* =================================================================== */

.header {
    background: #000;
    height: 40px;
}

.header .logo-main {
    float: left;
}

/* ロゴがテキストの場合 */

.header .logo-main h1 a {
    color: #fff;
    line-height: 40px;
    margin-left: 10px;
    font-size: 13px;
}

/* ヘッダーグローバルナビ */

.header nav {
    float: right;
    height: 40px;
}

.header ul li {
    display: inline-block;
}

.header ul li a {
    display: block;
}

.header ul li a.active {
    background-color: #fafafa;
}

.header ul li a {
    text-indent: -999em;
    display: block;
    width: 40px;
    height: 40px;
    background-position: 0 0;
    background-size: 40px 40px;
}

.header ul li a#toggle-search { background-image: url('../Contents/ImagePkg/common/icon-search.png'); }
.header ul li a#toggle-search.active { background-image: url('../Contents/ImagePkg/common/icon-search_active.png'); }

.header ul li a#toggle-global-menu { background-image: url('../Contents/ImagePkg/common/icon-bar.png'); }
.header ul li a#toggle-global-menu.active { background-image: url('../Contents/ImagePkg/common/icon-bar_active.png'); }


/* ---------------------------------
*    ヘッダーユーザーナビ
*/

.header-user-nav ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.header-user-nav ul li {
    display: table-cell;
    width: 50%;
}

.header-user-nav ul li.is-login {
    font-size: 11px;
    padding: .5em;
}

.header-user-nav ul li.point {
    text-align: right;
}

.header-user-nav ul li .btn {
    width: 96%;
    margin: 2%;
    padding: 1em 0;
    background-color: #000;
    color: #fff;
}

/* ---------------------------------
*    ヘッダーグローバルナビ
*/

.header-toggle {
    display: none;
    background-color: #fafafa;
}

.header-toggle .button {
    padding: 1em 0;
    background-color: #000;
}

.header-toggle .button .close {
    width: 60%;
    margin: 0 auto;
    padding: 1em 0;
    background-color: #fff;
    color: #000;
}

/* ミニカート */

.minicart-table {
    width: 95%;
    padding-top: 2px;
    margin: 10px;
}

.minicart-table td:nth-child(1) {
    width: 75px;
    vertical-align: top;
    margin-left: 5px;
}

.minicart-table td {
    line-height: 1.5em;
}

.minicart-table tr {
   border-top: 5px solid transparent;
}

.delete-product {
    width: 35%;
    margin-left: auto;
    margin-right: auto;
    background-color: #eee;
}

.delete-product a {
    padding: 10px 0;
    background-color: #333;
    color: #fff;
}

.minicart .inner {
    margin: 1em 0;
}

.minicart .total {
    text-align: center;
    margin-bottom: 1em;
}

.minicart .view-cart .btn {
    width: 80%;
    margin: 0 auto;
    padding: 1em 0;
    background-color: #000;
    color: #fff;
}

.minicart .empty {
    text-align: center;
}

/* =====================================================================
*
*    フッター
*
* =================================================================== */

.footer-wrap { background-color: #fafafa; }

.all-products a {
    background-color: #000;
    color: #fff;
    padding: 1.5em 0;
}

.footer-wrap .footer-menu {
    background-color: #666;
    font-size: 11px;
    padding: 1em;
}

.footer-wrap .footer-menu ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.footer-wrap .footer-menu ul li {
    display: table-cell;
}

.footer-wrap .footer-menu ul li a { color: #fff; }

footer small {
    display: block;
    clear: both;
    padding: 1em 0;
    text-align: center;
    color: #fff;
}

footer .switch-view {
    text-align: center;
    padding: .3em 0;
    color: #fff;
}

footer .switch-view a {
    color: #fff;
    text-decoration: underline;
}

/* ---------------------------------
*    お問い合わせ
*/

footer {
    background-color: #000;
    padding: 1em 0;
}

footer .inner {
    width: 90%;
    margin: 0 auto;
}

.contact-form {
    float: left;
    width: 45%;
    background-color: #fff;
}

.contact-form .btn {
    padding: 1.3em 0;
}

.contact-info {
    float: right;
    width: 50%;
    color: #fff;
    font-size: 12px;
}

.contact-info dl dt {
    width: 50px;
    padding: .2em;
    float: left;
    clear: left;
}

.contact-info dl dd {
    padding: .2em;
    margin-left: 60px;
    word-wrap: break-word;
}
.contact-info dl dd a { color: #fff; }

/* 領収書出力関連　*/
.receipt-download-unit {
  margin-bottom: 2em;
}
.receipt-download-unit h2 {
  padding: .5em;
  background-color: #CCC;
  font-size: 15px;
}
.receipt-download-unit .msg {
  padding: .5em;
  line-height: 1.5;
  text-align: center;
  font-size: 12px;
  color: #ff0000;
}
.receipt-download-unit .button {
  padding: 1em;
}
.receipt-download-unit .button-next .btn {
  padding: 1.5em 0;
  background-color: #000;
  color: #fff;
}

#modal{
	display: none;
	position: fixed;
	z-index: 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.7);
}
#modal_content{
	box-sizing: border-box;
	width:95%;
	background:#fff;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	padding:6% 4%;
	text-align: center;
	position:relative;
	animation:animatetop 0.4s;
}

#modal_content #authcodeinput p{
  text-align: center;
  margin: 10px 0;
  line-height: 1.25;
}

#modal_content #authcodeinput p.input_code{
  margin: 2em 0;
}

#modal_content #telnuminput p{
	text-align: center;
	margin: 10px 0;
	line-height: 1.25;
}

#modal_content #telnuminput p.input_code{
	margin: 2em 0;
}

#modal_content .btn_submit{
  background-color: #000;
  color: #fff;
  margin-bottom: 2em;
  padding: 1em 0;
}

#modal_content .btn_close_wrap{
  text-align: right;
}

#modal_content .btn_close{
  text-decoration: underline;
}

#modal_content .title{
	text-align: center;
	margin: 10px 0;
	color: #ffffff;
	background: #000000;
	padding: 12px 17px;
}

#modal_content .modal_detail{
	margin: 5px 0;
	padding: 2px 10px;
}

#modal_content .modal_text{
	text-align: left;
}

#modal_content .toolTip {
	margin: 0px;
	padding: 20px;
	border-radius: 10px;
	top: 108px;
	left:50px;
	width: 285px;
	text-align: center;
	color: rgb(255, 255, 255);
	overflow: hidden;
	display: none;
	position: fixed;
	z-index: 9000000;
	-ms-zoom: 1;
	box-sizing: border-box;
	opacity: 0.9;
	color: #000;
	background-color: #ccc;
	-moz-border-radius: 5px;
}

.fred{color:#E31515;}

.btn-org {
	display: inline-block;
	*display: inline;
	padding: 4px 10px 4px;
	margin-bottom: 0;
	*margin-left: .3em;
	font-size: 13px;
	line-height: 18px;
	*line-height: 20px;
	color: #333333;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-color: #f5f5f5;
	*background-color: #e6e6e6;
	border: 1px solid #cccccc;
	*border: 0;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	border-bottom-color: #b3b3b3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
	*zoom: 1;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	text-decoration: none;
}

.btn-org-blk {
	color: #ffffff !important;
	background-color: #000;
}
@keyframes animatetop{
	from{top:-100px;opacity:0}
	to{top:0;opacity:1}
}
#dvRealShopContents .tags {
	margin: 1rem 0;
}
#dvRealShopContents .areaTags {
	display: flex;
	flex-wrap: wrap;
}
#dvRealShopContents .tags li {
	width: 25%;
	text-align: center;
}
#dvRealShopContents .tags li a {
	display: block;
	margin: 1px;
	padding: 10px 0;
	border: 3px solid #555;
}
#dvRealShopContents .tags li.active a {
	background-color: #555;
	color: #fff;
}
#dvRealShopContents .brandItem {
	margin: 1rem 0;
}
.brandList .brandName {
	font-size: 16px;
	font-weight: bold;
}
.shopDetail {
	position: relative;
}
.shopDetail a{
	display: flex;
	justify-content: space-between;
	margin: 1rem;
}
.shopDetail + .shopDetail {
	border-top: 1px solid #eee;
}
.realShopName {
	width: 25%;
	word-break: break-all;
}
.realShopAddress {
	width: 70%;
}
.shopDetail .arrowNext {
	width: 1rem;
}
.shopDetail .arrowNext:after {
	content: "";
	position: absolute;
	top: 40%;
	height: 10px;
	width: 10px;
	border-right: 2px solid #c0c0c0;
	border-bottom: 2px solid #c0c0c0;
	transform: rotate(-45deg);
}
.shopdetail-unit {
	margin-bottom: 2em;
}
.shopdetail-unit h2 {
	margin-top: .1em;
	padding: .5em;
	background-color: #000;
	color: #fff;
	font-size: 15px;
}
.shopdetail-unit p {
	margin: .5em;
}
.shopdetail-form {
	margin: 1em auto;
}
.shopdetail-form dt {
	padding: .5em;
	line-height: 1.5;
	background-color: #ccc;
	border-bottom: 1px solid #000;
	color: #000;
}
.shopdetail-form dd {
	padding: .5em;
	line-height: 1.5;
	background-color: transparent;
	border-bottom: 1px solid #000;
	color: #000;
	word-break: break-all;
}
.shopdetail-footer .button .btn {
	padding: 1.5em 0;
	background-color: #000;
	color: #fff;
	margin: .2em;
}

.authentication_success {
	color: #4db56a;
}

#modalRecommend {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(128, 128, 128, 0.75);
	z-index: 1;
}

#modalRecommend .modal-content {
	overflow-y: auto;
	position: absolute;
	width: 85%;
	max-height: 90%;
	background: #fff;
	top: 5%;
	left: 8%;
}

#modalRecommend .cart-unit h2 {
	background-color: #000;
	margin-top: 0;
}

#modalRecommend .cart-footer {
	padding: 0rem;
}

#modalRecommend .button-next.order .btn {
	margin: .5rem 0;
}

/*日付*/
.spSpecifiedcommercialtransactionsPaddingleft10px {
  padding-left: 10px !important;
}

/*日付*/
.spSpecifiedcommercialtransactionsPaddingleft10pxRed {
  padding-left: 10px !important;
  color: red !important;
}

.btn-small {
  text-align: center;
  display: block;
  text-decoration: none !important;
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 13px;
  line-height: 18px;
  *line-height: 20px;
  color: #333333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  border: 1px solid #cccccc;
  *border: 0;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}