@charset "UTF-8";

/* ----------------------------------
 Base
---------------------------------- */
html {
	width: 100vw;
	overflow-x: hidden;
}
body { 
	max-width: 100%;
	font-family: 'IBM Plex Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #15181C;
}
body > .wrapper,
body .pane-main {
	max-width: 100vw;	
}

a { color: #15181C;}

h1, .h1,
h1[class$="--header"] { padding: 0; margin: 20px 0 15px; border: none; font-size: 22px; font-weight: 600; text-align: center; background: none; color: #0047BA;}
h2, .h2 { padding: 0; margin: 0 0 15px; border: none; font-size: 20px; font-weight: 600; background: none;}
h3, .h3 { padding: 0; margin: 0 0 10px; border: none; font-size: 18px; font-weight: 600; background: none;}
h4, .h4 { padding: 0; margin: 0 0 10px; border: none; font-size: 16px; font-weight: 600; background: none;}
h5, .h5 { padding: 0; margin: 0 0 10px; border: none; font-size: 14px; font-weight: 600; background: none;}
h6, .h6 { padding: 0; margin: 0 0 10px; border: none; font-size: 14px; font-weight: 600; background: none;}

.img-center img { font-size: 8px;}
.legend { width: 100%; padding: 5px 10px; margin: 10px 0; border-bottom: #0047BA 2px solid; font-size: 16px; font-weight: 600; color: #0047BA;}
  
/* ----------------------------------
 Design
---------------------------------- */
.font-Roc { font-family: "roc-grotesk", sans-serif; font-weight: 800; font-style: normal;}

.design-headerline { margin: 0 0 15px 0; text-align: center; line-height: 1.0; display: flex; align-items: flex-end;}
.design-headerline h2 { padding: 0; margin: 0 2vw 0 0; border: none; text-align: center; font-size: 7vw; font-weight: 600; line-height: 1.0; color: #0047BA;}
.design-headerline .sub { font-size: 3.2vw; font-weight: 600; text-align: center; line-height: 1.0; position: relative; top: -2vw;}

.link-more         { width: 300px; margin: 20px auto 0;}
.link-more a       { width: 100%; height: 45px; border: #0047BA 2px solid; border-radius: 45px; font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.0; color: #0047BA; display: flex; justify-content: center; align-items: center; background: #fff; transition: 0.3s;}
.link-more a:hover { background: #0047BA; color: #fff; box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.3);}

/* ----------------------------------
 Form Parts
---------------------------------- */
.form-error { color: #ff0000;}
.block-common-alert-list--items { color: #ff0000;}

/* input */
input[type="text"],
input[type="tel"],
input[type="zip"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea { -webkit-appearance: none; -moz-appearance: none; min-height: 42px; padding: 4px 10px; border: #E9EEF0 1px solid; background-color: #fff;}
select   { -webkit-appearance: none; -moz-appearance: none; height: 42px; padding: 4px; border: #A1A3A6 2px solid; line-height: 34px;
	background: #fff url(/img/usr/pulldown.png?d=20250729a2) no-repeat right 10px center;
	padding-right: 35px;
	box-sizing: border-box;
	width: auto;
	max-width: max-content;
}
select:hover{
	border: #A1A3A6 2px solid;	
}
input[type="number"] { min-width: 50px; min-height: 42px; padding: 4px; border: #E9EEF0 1px solid; background-color: #fff; box-sizing: border-box;}

/* radio */
input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; width: 20px; height: 20px; margin-bottom: 3px; margin-right: 5px; border: #c8c8c8 1px solid; border-radius: 10px; background: #fff; position: relative; outline: 0; transition: 0.3s;}
input[type="radio"]:before { content: ""; width: 10px; height: 10px; margin: 0; border: #FFF 1px solid; border-radius: 10px; position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); display: block; background: #FFF; transition: 0.3s;}
input[type="radio"]:checked { border: #1846BA 1px solid;}
input[type="radio"]:checked:before { border: #1846BA 1px solid; background: #1846BA;}
input[type="radio"]:checked + label { color: #1846BA; font-weight: 700;}

/* checkbox */
input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; width: 20px; height: 20px; margin-bottom: 3px; margin-right: 5px; border: #E9EEF0 1px solid; background: #fff; position: relative; outline: 0; transition: 0.3s;}
input[type="checkbox"]:before { transition: 0.3s;}
input[type="checkbox"]:checked { border: #1846BA 1px solid; background: #1846BA;}
input[type="checkbox"]:checked:before { content: ""; width: 10px; height: 6px; margin: 0; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(135deg); position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); display: block;}
input[type="checkbox"]:checked + label { font-weight: 700;}

.block-login--pwd input[type="password"][size="20"] { width: 100%;}

select[name*="card_y"],
select[name*="year"],
select[name*="yy_"]  { min-width: 6em; text-align: center;}
select[name*="card_method"],
select[name*="card_divide"],
select[name*="card_m"],
select[name*="month"],
select[name*="date"],
select[name*="mm_"],
select[name*="dd_"] { min-width: 4em; text-align: center;}

/* ----------------------------------
 Form
---------------------------------- */
.form-error { color: #ff0000;}
.fieldset-vertical { margin: 10px 0 30px; border: #F0F5F7 1px solid;}
.fieldset-vertical .form-group { margin: 0; display: block; background: #F0F5F7;}
.fieldset-vertical .form-label { padding: 10px; margin: 0;}
.fieldset-vertical .constraint { padding: 10px; margin: 0;}
.fieldset-vertical .form-label label { font-weight: bold;}
.fieldset-vertical .form-control { padding: 10px; background: #fff;}

/* ----------------------------------
 Price
---------------------------------- */
.price { color: #15181C;}
.onsale .price { color: #CD0000;}
.default-price { font-weight: 400;}
.price::after,
.default-price::after { content: "（税込）"; font-weight: 400 !important;}
.net::after,
.price.net::after,
.net-price::after,
.default-net::after { content: "（税抜）"; font-weight: 400 !important;}
.net-price { display: none !important;}

/* ----------------------------------
 Pankuzu
---------------------------------- */
.block-topic-path { padding: 10px 20px; margin: 0; border: none; font-size: 10px; color: #C4CBCF; background: #F0F5F7; overflow-x: scroll;}
.block-topic-path a { font-size: 10px; color: #0047BA; text-decoration: none;}
.block-topic-path .block-topic-path--item__current a { color: #15181C;}
.page-goods .block-topic-path { padding: 10px 20px; margin: 0; border: none;}
.block-topic-path ul.block-topic-path--list { max-width: none; width: auto; display: flex;}
.block-topic-path ul.block-topic-path--list li { max-width: none; width: auto; display: flex; align-items: center; word-break: keep-all; white-space: nowrap;}
.block-topic-path ul.block-topic-path--list li span,
.block-topic-path ul.block-topic-path--list li a { word-break: keep-all; white-space: nowrap;}
.block-topic-path .block-topic-path--delimiter { margin: 0 5px 0 0;}

/* ----------------------------------
 Pager
---------------------------------- */
.pager { margin: 0; padding: 20px 0 50px; border: none; text-align: center;}
[class*="-pager-top"] .pager { padding-bottom: 10px;}
[class*="-pager-bottom"] .pager { padding: 10px 0 20px;}
.page-event [class*="-pager-top"] .pager,
.page-genre [class*="-pager-top"] .pager,
.page-category [class*="-pager-top"] .pager { display: none;}
.page-event [class*="-pager-bottom"] .pager,
.page-genre [class*="-pager-bottom"] .pager,
.page-category [class*="-pager-bottom"] .pager { padding: 20px 0 50px;}
.pager-total { padding: 0; margin: 0;}
.pager-current { color: #000;}
.pagination li { width: 30px; height: 30px; padding: 0; margin: 0 5px; border: none; border-radius: 30px; color: #15181C;}
.pagination li a,
.pagination li span { width: 30px; height: 30px; padding: 0; border: none; border-radius: 30px; font-size: 12px; font-weight: 600; text-decoration: none; display: flex; justify-content: center; align-items: center; transition: 0.3s;}
.pagination li a       { border: #E9EEF0 2px solid; color: #15181C; background: #E9EEF0;}
.pagination li a:hover { border: #0047BA 2px solid; color: #0047BA; background: #ffffff;}
.pagination li span    { border: #0047BA 2px solid; color: #ffffff; background: #0047BA;}
.pagination li.pager-first a,
.pagination li.pager-previous a,
.pagination li.pager-next a,
.pagination li.pager-last a { border: #ffffff 2px solid; display: block; font-size: 0; background: #fff; position: relative;}
.pagination li.pager-first a::before,
.pagination li.pager-first a::after,
.pagination li.pager-previous a::before,
.pagination li.pager-next a::before,
.pagination li.pager-last a::before,
.pagination li.pager-last a::after { content: ''; width: 8px; height: 8px; border-top: #9DA3A6 1px solid; border-left: #9DA3A6 1px solid; position: absolute; top: calc(50% - 4px); display: block;}
.pagination li.pager-first a::before    { left:   8px; transform: rotate(-45deg);}
.pagination li.pager-first a::after     { left:  14px; transform: rotate(-45deg);}
.pagination li.pager-previous a::before { left:  12px; transform: rotate(-45deg);}
.pagination li.pager-next a::before     { right: 12px; transform: rotate(135deg);}
.pagination li.pager-last a::before     { right:  8px; transform: rotate(135deg);}
.pagination li.pager-last a::after      { right: 14px; transform: rotate(135deg);}

.block-goods-list--pager-bottom .pager-total { display: none;}
.block-goods-list-naviframe--bottom { padding-top: 10px;}

.block-goods-list-naviframe--sum { display: none;}
#block_top_navigation_frame { min-height: 55px; padding: 10px; margin: 0; display: flex; align-items: center;}
#block_top_navigation_frame .block-goods-list-naviframe--page { display: none !important;}
#block_top_navigation_frame .block-goods-list-naviframe--sum  { font-size: 11px; display: block;}
#block_top_navigation_frame .block-goods-list-naviframe--sum .pager-total { padding: 0 0 0 10px; margin: 0;}
#block_top_navigation_frame .block-goods-list-naviframe--sum .pager-total .pager-count { font-size: 11px;}
#block_top_navigation_frame .block-goods-list-naviframe--sum .pager-total .pager-count::before { content: '検索結果：'; font-size: 11px; display: inline-block;}
#block_top_navigation_frame .block-goods-list-naviframe--sum .pager-total .pager-count span { font-size: 14px; font-weight: 600;}

/* ----------------------------------
 Qty
---------------------------------- */
.block-goods-list--qty-order-items { display: none;}
#block_top_navigation_frame #block_top_navigation_item_qty { margin: 0 0 0 auto;}
#block_top_navigation_frame .block-goods-list--qty-order-items { display: block;}
#block_top_navigation_frame .block-goods-list--qty-order-items .block-qty--select { width: 70px; max-width: 77px; height: 35px; min-height: auto; padding: 0; margin: 0; border: none; display: inline-block; background: #fff url("../../img/usr/common/ico_sort_select_bg.png") calc(100% - 7px) center no-repeat; -webkit-background-size: 6px auto; background-size: 6px auto;}
#block_top_navigation_frame .block-goods-list--qty-order-items .block-qty--select select { width: 100%; height: 35px; min-height: auto; padding: 0 10px; border: #DFE4E6 1px solid; border-radius: 5px; font-size: 11px; display: flex; align-items: center; background: transparent;}
#block_top_navigation_frame .block-goods-list--qty-order-items .block-qty--select select option { font-size: 11px;}

/* ----------------------------------
 Sort
---------------------------------- */
.block-goods-list--sort-order-items { display: none;}
#block_top_navigation_frame #block_top_navigation_item_sort { margin: 0 0 0 5px;}
#block_top_navigation_frame .block-goods-list--sort-order-items { width: 70px; max-width: 77px; padding: 0; margin: 0; border: none; display: flex; align-items: center;}
#block_top_navigation_frame .block-goods-list--sort-order-items .block-sort--select { height: 35px; min-height: auto; padding: 0; margin: 0; border: none; display: inline-block; background: #fff url("../../img/usr/common/ico_sort_select_bg.png") calc(100% - 7px) center no-repeat; -webkit-background-size: 6px auto; background-size: 6px auto;}
#block_top_navigation_frame .block-goods-list--sort-order-items .block-sort--select select { width: 100%; height: 35px; min-height: auto; padding: 0 5px; border: #DFE4E6 1px solid; border-radius: 5px; font-size: 11px; letter-spacing: -0.5px; display: flex; align-items: center; background: transparent;}
#block_top_navigation_frame .block-goods-list--sort-order-items .block-sort--select select option { font-size: 11px;}

/* ----------------------------------
 Style
---------------------------------- */
.block-goods-list--display-style-items { display: none;}
#block_top_navigation_frame #block_top_navigation_item_style { margin: 0 0 0 5px;}
#block_top_navigation_frame .block-goods-list--display-style-items { width: auto; padding: 0; margin: 0; display: flex; align-items: center;}
#block_top_navigation_frame .block-goods-list--display-style-items .style-item { width: 35px; height: 35px; display: flex; justify-content: center; align-items: center;}
#block_top_navigation_frame .block-goods-list--display-style-items .style-item a,
#block_top_navigation_frame .block-goods-list--display-style-items .style-item span { width: 35px; height: 35px; font-size: 0; color: #fff; display: flex; justify-content: center; align-items: center; -webkit-background-size: 22px 22px; background-size: 22px 22px; background-position: center center; background-repeat: no-repeat;}
#block_top_navigation_frame .block-goods-list--display-style-items .style-item.style-P a    { background-image: url("../../img/usr/common/ico_style_p.png");}
#block_top_navigation_frame .block-goods-list--display-style-items .style-item.style-P span { background-image: url("../../img/usr/common/ico_style_p_on.png");}
#block_top_navigation_frame .block-goods-list--display-style-items .style-item.style-T a    { background-image: url("../../img/usr/common/ico_style_t.png");}
#block_top_navigation_frame .block-goods-list--display-style-items .style-item.style-T span { background-image: url("../../img/usr/common/ico_style_t_on.png");}
#block_top_navigation_frame .block-goods-list--display-style-items .style-item.style-R { display: none !important;}

#zeta_search_resultpage_mainframe #block_top_navigation_frame .block-goods-list--display-style-items .style-item.style-P span.active { background-image: url("../../img/usr/common/ico_style_p_on.png");}
#zeta_search_resultpage_mainframe #block_top_navigation_frame .block-goods-list--display-style-items .style-item.style-P span { background-image: url("../../img/usr/common/ico_style_p.png");}
#zeta_search_resultpage_mainframe #block_top_navigation_frame .block-goods-list--display-style-items .style-item.style-T span.active { background-image: url("../../img/usr/common/ico_style_t_on.png");}
#zeta_search_resultpage_mainframe #block_top_navigation_frame .block-goods-list--display-style-items .style-item.style-T span { background-image: url("../../img/usr/common/ico_style_t.png");}

/* ----------------------------------
 Button
---------------------------------- */
.action .btn   { border-radius: 50px; border-bottom-width: 1px;}
.btn-default   { border: #DFE4E6 1px solid; color: #15181C; background: #fff;}
.btn-primary   { border: #0047BA 1px solid; color: #fff; background: #0047BA;}
.btn-secondary { border: #9d9896 1px solid; color: #fff; background: #9d9896;}
.btn-danger    { border: #15181C 1px solid; color: #fff; background: #15181C;}

.block-goods-order-item-button .block-loading-min--ball::before,
.block-add-cart .block-loading-min--ball::before { background-color: #fff;}

/* ----------------------------------
 Loading
---------------------------------- */
#loading { display: none;}
#loading.spinner { position: fixed; left: 0; z-index: 3; display: flex; width: 100%; height: 100%; justify-content: center; align-items: flex-start; background: #fff;}
.spin-loader { position: relative; margin-top: 50px;}
.spin-loader > div { -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; width: 5px; height: 15px;}
.spin-loader > div { border-radius: 2px; margin: 2px; background: gray;}
.spin-loader > div:nth-child(1) { top: 20px; left: 0; -webkit-animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;}
.spin-loader > div:nth-child(2) { top: 13.64px; left: 13.64px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;}
.spin-loader > div:nth-child(3) { top: 0; left: 20px; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;}
.spin-loader > div:nth-child(4) { top: -13.64px; left: 13.64px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;}
.spin-loader > div:nth-child(5) { top: -20px; left: 0; -webkit-animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;}
.spin-loader > div:nth-child(6) { top: -13.64px; left: -13.64px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;}
.spin-loader > div:nth-child(7) { top: 0; left: -20px; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out; animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;}
.spin-loader > div:nth-child(8) { top: 13.64px; left: -13.64px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out; animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;}
@keyframes line-spin-fade-loader {
	50%  { opacity: .3;}
  100% { opacity: 1;}
}

/* ----------------------------------
 ピンクプロモーション開始対応
---------------------------------- */
.page-top.page-top--pink .design-headerline * { color: #F34E9A;}
.page-top.page-top--pink .link-more a { border-color: #F34E9A; color: #fff; background: #F34E9A;}
.page-top.page-top--pink .link-more a:hover { background: #fff; color: #F34E9A;}