@charset "utf-8";
* { box-sizing: border-box;}
html{ scroll-behavior: smooth;}
body { margin: auto; color: #333333; font-family: "Noto Sans JP",'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; font-feature-settings: "palt"; background-color: #FFFFFF; font-size: 16px; line-height: 150%; letter-spacing: 0em; min-width: 1170px;}
:where(ul, ol) { padding-left: 1.5em;}
section { margin: -113.88px 0 0 0; margin-block-end: 4em; padding: 113.88px 8px 0 8px;}
dd { margin: 0; padding: 0;}
h1 ~ p { padding: 0 8px;}
div:has(:is(h2, h3, h4)) { margin-block-end: 2em;}

table { border: 1px solid #CCCCCC; border-collapse: collapse;}
table :is(th,td) { padding: 8px; border-right: 1px solid #CCCCCC;}
table tr { border-bottom: 1px solid #CCCCCC;}
table th { background-color: #F0F0F0;}

summary::-webkit-details-marker { display: none;}
summary { display: block;}
img.picture { border: 1px solid #CCCCCC;}
.frame_outer { margin: 0 auto; width: 100%; text-align: center; display: flex; flex-flow: column; min-height: 100vh;}
#container { margin: 0 auto; padding: 0 0 30px; width: 1170px; background: #FFFFFF; text-align: left; flex: 1 0 auto;}

#main_column { padding: 20px 0 0;}
/* #main_column.colnum1 { margin: 0 auto; width: 100%;} */
#main_column.colnum2 { width: 960px;}
#main_column.colnum2.left { padding-left: 1.5%;}
#main_column.colnum2.right { float: right;}
#main_column.colnum3 { width: 754px; padding-left: 12px;}
.side_column { padding: 20px 0 0;}
#leftcolumn { float: left; width: 195px;}
#rightcolumn { float: right; width: 195px;}
#topcolumn,
#bottomcolumn,
#footerbottomcolumn { margin: 0px; background: #FFFFFF; text-align: left; clear: both;}
#undercolumn { width: 100%; margin: 0 0 30px 0;}

.clearfix { display: block;}

a { text-decoration: none;}
a:where(:link, :visited) { color: #0421EA;}
@media (any-hover: hover)  { 	
	a:where(:link, :visited):hover { color: #f60; transition: 0.3s ease;}
	a:link:hover:has(img) { opacity: 0.7;}
}
@media screen and (min-width:768px)  { 
	span.pc { display: inline;}
	.pc { display: block;}
	.sp { display: none;}
}
@media screen and (max-width:767px)  { 
	div:has(:is(h2, h3, h4)):last-child { margin-block-end: 0;}
	img { max-width: 100%;}
	.pc { display: none;}
	.sp { display: block;}
	section { margin: -57px 0 0 0; margin-block-end: 2em; padding: 57px 8px 0 8px!important; width: 100%;}
	:where(ul, ol) { padding-left: 1.5em;}
}

:where(h1, h2, h3, h4, h5) { margin-block: 0; font-size: 100%; line-height: 150%; color: #333333;}

.sale_price { color: #E60021; font-size: 100%; font-weight: 700;}

.normal_price { font-size: 100%;}

.point { color: #E60021; font-weight: 700;}

.user_name { font-weight: 700;}

.recommend_level { color: #ecbd00;}

h1.title { margin-block-end: 0.5em; padding: 8px 8px 8px 16px; color: #FFFFFF; background-color: #606060; font-size: 32px;font-feature-settings: "palt";}
h2.title { margin-block-end: 1em; padding: 8px; background-color: transparent; border-bottom: 1px solid #E60021; font-size: 24px; font-weight: 900; font-feature-settings: "palt"; display: flex; gap: 8px; color: #606060;}
h2.title::before { content: "◆"; color: #E60021;}
h3.title { margin-block-end: 1em; padding: 4px 8px; color: #606060; font-size: 20px; border-left: 5px solid #E60021;}
h4.title { margin-block-end: 0.5em; padding: 4px 8px; font-size: 18px; font-weight: 700; color: #606060; border-left: 4px double #606060;}
@media screen and (max-width:767px)  { 
	h1.title { margin-block-end: 10px; padding: 8px; font: 700 24px/1.5 "Noto Sans JP", Hiragino Kaku Gothic ProN, Meiryo, sans-serif; text-align: center;}
	h2.title { padding: 8px 4px; font: 900 20px/1.5 "Noto Sans JP", Hiragino Kaku Gothic ProN, Meiryo, sans-serif; background-color: transparent; border-bottom: 1px solid #E60021; font-feature-settings: "palt"; display: flex; gap: 8px; color: #606060;}
	h3.title { font: 700 18px/1.5 "Noto Sans JP", Hiragino Kaku Gothic ProN, Meiryo, sans-serif;}
}

.flex-container { display: flex; margin-bottom: 24px; gap: 16px;}
.attention { color: #E60021;}
.attentionSt { color: #E60021; font-weight: 700;}
ul:has(> :is(.attention--asterisk,.attention--square)) { padding: 0; gap: 0!important;}
:is(.attention--square, .attention--asterisk) { display: flex; align-items: baseline; gap: 4px;}
li:is(.attention--square, .attention--asterisk) { display: flex; align-items: baseline; gap: 4px; color: #E60021;}
.attention--square::before { content: '■';}
.attention--asterisk::before { content: '※';}
ol:has(li.attention--asterisk) { counter-reset: attention 0; padding: 0;}
ol li.attention--asterisk::before { counter-increment: attention 1; content: "※"counter(attention);}
div.attention { padding: 16px; border: 1px solid #E60021; color: #333333;}
div.attention .title { padding: 8px 16px; border: none; background-color: #E60021; color: #FFFFFF;}
div.attention :is(h3,h4):is(.attention) { margin-block-end: 1em;}
div.attention p:first-child { margin-block-start: 0;}
div.attention p:last-child { margin-block-end: 0;}
div.attention p:has(+ul) { margin-block-end: 0;}
div.attention ul { margin-block: 0;}
p:has(+ul li:is(.attention--square, .attention--asterisk)) {  margin-block-end: 0;}
p + ul:has(li:is(.attention--square, .attention--asterisk)) { margin-block-start: 0;}
.stbox { padding: 16px; border: 1px solid #CCCCCC;}
.stbox h3 + ul,
.stbox h4+:is(p,ul) { margin-block-start: 0;}
.stbox:has(+ :is(h2, h3, h4)) { margin-block-end: 2em;}
.stbox :is(p,dl,ul,ol):last-child { margin-block-end: 0;}
.stbox--scroll { width: 100%; height: 500px; overflow-y: scroll;}
.stbox--green { border:2px solid #00BE00;}
.stbox--scroll :is(h4,p) +:is(ol,ul,p) { margin-block-start: 0;}
.stbox--scroll p:has(+ :is(ol, ul)) { margin-block-end: 0;}
span.bg-red { margin-right: 8px; padding: 8px; background-color: #E60021; color: #FFFFFF;}

.numlist__kana { list-style: katakana;}
.numlist__alphabet { list-style-type: upper-alpha;}

.button-area { margin-block: 2em; padding: 0; list-style: none; display: flex; gap: 32px; justify-content: center;}
:is(input,button,a).button { padding: 8px 16px; min-width: 250px; display: inline-block; border: none; border-radius: 3px; color: #FFFFFF; text-align: center; font: 700 18px/1 "Noto Sans JP", sans-serif; font-feature-settings: "palt"; cursor: pointer; transition: 0.3s;}
:is(input,button, a).button--black { background-color: #333333;}
:is(input,button, a).button--red { background-color: #E60021;}
:is(input,button, a).button--orange { background-color: #FF9600;}
:is(input,button, a).button--green { background-color: #00BE00;}
:is(input, button, a).button--gray { background-color: #F0F0F0; color: #333333;}
:is(input, button, a).button--detail { min-width: auto!important; background-color: #333333;}
:is(input, button, a).button--delate { min-width: auto!important; background-color: #E60021;}
.button:has(img) { width: 300px; height: 38px;}
@media (any-hover: hover){
	:is(input,button,a).button:hover { opacity: 0.7;}
}
@media screen and (max-width: 767px)  { 
	.stbox p:first-of-type { margin-block-start: 0;}
	.flex-container { flex-direction: column;}
	span.bg-red { display: block;}
	#form-table ul.button-area { padding: 0 8px;}
	.button-area { width: 100%; padding: 0 8px; gap: 16px; flex-direction: column;}
	.button-area li { width: 100%;}
	.button-area:last-child{ margin-block-end: 0;}
	:is(input,button,a).button { width: 100%;}
}

.font__bold { font-weight: 700;}
.font__mini { font-size: 0.75em;}
.font__big { font-size: 1.25em;}

span:is(#price02_default,#price02_dynamic) { font-size: 200%;}

.alignC { text-align: center;}
.alignR { text-align: right;}
.alignL { text-align: left;}

.pricetd em { font-weight: 700;}

select, input, textarea { max-width: 100%; border: solid 1px #CCCCCC; border-radius: 3px;}
select,
label:has(input[type='radio']),
input:is([type='checkbox'], [type='radio']) { cursor: pointer; font: normal normal 400 16px/1 "Noto Sans JP", 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; font-feature-settings: "palt"; }
select { background-color: #FFFFFF;}
input:is([type='text'], [type='password'], [type="email"], [type="date"]) { max-width: 100%; border: solid 1px #CCCCCC; padding: 0 8px; font: normal normal 400 16px/1 "Noto Sans JP", 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; font-feature-settings: "palt"; }
:is(input:is([type='text'], [type='password'], [type="email"]),select):focus { outline: 2px solid #333333;}
input:is([type='checkbox'],[type='radio']) {accent-color: #E60021;font-size: 16px;}
input[type="date"] {appearance: none; min-height: 26px;}

@media screen and (max-width: 767px){
	input[name="email"]{width: 100%;}
}

.box40 { width: 40px;}
.box60 { width: 60px;}
.box100 { width: 100px;}
.box120 { width: 120px;}
.box140 { width: 140px;}
.box145 { width: 145px;}
.box150 { width: 150px;}
.box167 { width: 167px;}
.box175 { width: 175px;}
.box240 { width: 240px;}
.box300 { width: 300px;}
.box320 { width: 320px;}
.box350 { width: 350px;}
.box380 { width: 380px;}
.box__max { width: 100%;}
.box__half { width: 50%;}
.box__quarter { width: 25%;}

@media screen and (max-width:767px){
	.box__half,
	.box__quarter { width: 100%;}
}

.top { margin-bottom: 5px;}

#header_wrap { min-height: 56px; padding: 0 calc((100% - 1170px) / 2); background-color: #FFFFFF;}
#header_wrap.fixed { position: fixed; inset: 0 0 auto auto; z-index: 100;}

#header { margin: auto; width: 1170px; padding-top: 8px;}
#header_utility { float: right; width: 770px;}

#errorHeader { color: #F00; font-weight: 700; font-size: 12px; background-color: #FEB; text-align: center; padding: 5px;}

#bnr_area { padding: 10px; display: flex; flex-direction: column; gap: 10px;}

#logo_area { float: left; width: 390px; text-align: left;}
#logo_area img { width: 390px;}

#site_description { font-size: 90%;}

div#header_navi { float: right; width: 195px; background: blue;}
div#header_navi ul li { display: block;}
div#header_navi ul li.mypage,
div#header_navi ul li.entry { margin-top: 6px;}

#footer_wrap { margin: 0 auto; width: 1170px; height: 80px; background: #FFFFFF;}
#footer { margin: auto; padding-top: 10px; border-top: solid 1px #CCCCCC;}

#pagetop { width: 210px; float: right; text-align: right;}

#copyright { color: #999; width: 100%; margin: 20px 0; text-align: center; font-size: 97%;}

.btn_area { margin-top: 10px; width: 100%; text-align: center;}
.btn_area li { padding-right: 10px; display: inline;}

div#complete_area { margin-bottom: 20px; margin-left: 1em;}
div#complete_area .message,
div#undercolumn_entry .message { margin-bottom: 20px; line-height: 150%; font-weight: 700; font-size: 120%;}
div#complete_area .shop_information { margin-top: 40px; padding: 20px 0 0 0; border-top: solid 1px #CCCCCC;}
div#complete_area .shop_information .name { margin-bottom: 10px; font-weight: 700; font-size: 140%;}

.indent1 { margin-left: 1em;}

/* header */
.header-buttonitem { box-sizing: border-box; display: flex; align-items: center;}
.header-buttonitem ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 8px;}
.header-logo { float: left; width: 160px;}
.header-logo img { width: 160px;}
li.c-button { min-width: 100px; appearance: none; border: none; text-align: center; font:normal normal 400 16px/normal "Noto Sans JP",Hiragino Kaku Gothic ProN, Meiryo, sans-serif;}
li.c-button a { display: flex;align-items: center;justify-content: center; gap: 4px; padding: 8px 14px 8px;}
li.c-button img { width: 20px; height: 20px; vertical-align: middle; margin: -0.1rem 5px 0 0;}
.maru { height: 20px; width: 20px; border-radius: 50%; line-height: 21px; text-align: center; background-color: #FFFFFF; display: inline-block; color: #00BE00; margin-left: 5px;}
@media (any-hover: hover)  { 
	li.c-button a:hover { opacity: 0.7; text-decoration: none;}
	.c-blue a { background: #4676d7; color: #FFFFFF;}
	.c-green a { background: #00BE00; color: #FFFFFF;}
	.c-orange a { background: #FF9600; text-align: center; color: #FFFFFF;}
	.c-sky a { background: #04C3DF;color: #FFFFFF;}
	.c-white a { background: transparent; color: #333333;}
	.c-green a:hover,
	.c-orange a:hover,
	.c-sky a:hover { color: #FFFFFF;}
	.c-white a:hover { color: #333333;}
}
@media screen and (max-width:767px)  { 
	body { box-sizing: border-box;min-width: 100%;}
	header { width:100%; padding: 8px;}
	#header_wrap { box-sizing: border-box; padding:8px; min-height: auto; border-bottom: 1px solid #CCCCCC; background: #FFFFFF; position: sticky; inset: 0 0; z-index: 500;}
	header #b0-header-cart { width: 100%;}
	header #header { padding:0;width: 100%;}
	.header-logo { float: none; width: fit-content;}
	header .header-logo img { width:auto;height:35px;}
	.header-buttonitem ul { height: 30px; align-items: baseline;}
	#container { width: 100%; padding: 0;}

	li.c-button { min-width: auto;width: fit-content; height: 30px;}
	li.c-button a { padding: 0;}
	.maru { display: none;}
}

/* グローバルナビゲーション */
#zero-topnavigation { background:#E61835;}
#zero-topnavigation ul.menu,
ul.menu__second-level { width: 1170px; list-style:none; padding:0; text-align:center; display: flex;}
#zero-topnavigation .menu { position: relative; width: 100%; height: 44px; margin: 0 auto; font: 18px/1.2 "Noto Sans JP",Hiragino Kaku Gothic ProN,Meiryo,sans-serif;}
#zero-topnavigation .menu > li { width: 25%; height: 44px; line-height: 44px;}
#zero-topnavigation .menu > li a { display: block; color: #FFFFFF; text-decoration: none;}
#zero-topnavigation ul.menu__second-level { visibility: hidden; opacity: 0; z-index: 1; display: flex; flex-direction: column;}
#zero-topnavigation .menu__second-level li { border-top: 1px solid #111;}
#zero-topnavigation .init-bottom:after  { content: '';display: inline-block;width: 6px;height: 6px;margin: 0 0 4px 10px;border-right: 1px solid #FFFFFF;border-bottom: 1px solid #FFFFFF;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg) translateY(-50%);position: absolute;inset: 50% 35% auto auto;}
#zero-fixedheader { width: 100%; z-index: 500;}
#zero-fixedheader.fixed { position: fixed; left: 0; top: 70px;}
@media (any-hover: hover)  { 
	#zero-topnavigation .menu > li a:hover { color: #FFFFFF;}
	#zero-topnavigation .menu > li:hover { background: #444; -webkit-transition: all .5s; transition: all .5s;}
	#zero-topnavigation .menu__second-level li a:hover { background: #111;}
}
@media screen and (max-width:767px)  { 
	#zero-topnavigation { background:#FFFFFF;position: absolute;inset: 0 auto auto 0;width: 100%;z-index: 100; display: none;}
	#zero-topnavigation ul.menu,
	ul.menu__second-level { padding:32px 0 24px 0; width: 100%;}
	#zero-topnavigation ul.menu.open,
	ul.menu__second-level.open { display: block;}
	#zero-topnavigation li.menu__single ul.menu__second-level { padding: 0; position: static!important; visibility: visible; opacity: 1; background: #FFFFFF!important;}
	#zero-topnavigation .init-bottom:after { display: none;}
	#zero-topnavigation .menu,
	#zero-topnavigation .menu__second-level { height: auto; display: flex;flex-direction: column;gap: 10px;}
	#zero-topnavigation .menu > li { float: none; width: 100%; height: auto;}
	#zero-topnavigation .menu > li a { color: #535353;font:400 18px/1.5 Hiragino Kaku Gothic ProN,Meiryo,sans-serif;}
	#zero-topnavigation .menu > li a.init-bottom { display:none;}
	#zero-topnavigation .menu__second-level li { border: none;}
	#zero-topnavigation .menu__close-btn { position: absolute; inset: 10px 10px auto auto;}
	#zero-topnavigation .menu__close-btn.open { display: block;}
}

/* floatクリア */
#zero-topnavigation .menu:before,
#zero-topnavigation .menu:after { content: ""; display: table;}
#zero-topnavigation .menu:after { clear: both;}
#zero-topnavigation .menu { zoom: 1;}
#zero-topnavigation .menu > li.menu__single { position: relative;}
#zero-topnavigation li.menu__single ul.menu__second-level { position: absolute; top: 44px; width: 100%; background: #444; -webkit-transition: all .2s ease; transition: all .2s ease;}
#zero-topnavigation li.menu__single:hover ul.menu__second-level { top: 44px; visibility: visible; opacity: 1;}

/* footer */
#zero-contentinfo { background: #F6F6F6;}
ul#b0-contentinfo { margin: 0;padding: 0;display: flex;flex-wrap: wrap;}
ul#b0-contentinfo li { display: inline-block; width: 20%; line-height: 1.7;}
.contentinfo-body { margin: auto; overflow: hidden; padding: 30px 0 40px; width: 1170px; font-size: 14px;}
.contentinfo-copyright { background: #E61835; clear: both; color: #EEEEEE; padding: 20px 0; text-align: center; font-size: 14px;}
@media screen and (min-width: 768px)  { 
	.guide_area { display: none;}
}
@media screen and (max-width:767px)  { 
	.guide_area { clear:both;margin-bottom:20px;}
	.guide_area summary { cursor:pointer;text-align:left;border-bottom:1px solid #cbcbcb;padding:0.5em 0.8em;margin:0 8px;position:relative;font-size:16px;font-weight:bold;}
	.guide_area summary::after { content: "▼"; position: absolute; top: 0.5em; right: 0.8em;transition: 0.3s ease;}
	.guide_area summary::marker,
	.guide_area summary::-webkit-details-marker { display: none;}
	.guide_area ul { padding: 0 0.1em; display: none;}
	.guide_area ul li { display:block;text-align:left;border-bottom:1px solid #e5e5e5;}
	.guide_area a { display:block; padding:0.5em 0.8em; margin:0.5em 0.1em; position:relative; text-decoration: none;color: #535353; font: 700 14px/1 "Noto Sans JP",Helvetica, Arial, sans-serif; font-feature-settings: "palt";}
	.guide_area a::after { content:"〉"; position:absolute; top:0.5em; right:0.8em;}
	.guide_area summary.open::after { transform: rotate(180deg);}
}


/* TOP */
#container.fixed { margin-top: 112px;}
#container #zero-fixedheaderbelow { overflow: hidden;}
#container #zero-fixedheaderbelow.fixed { position: fixed; margin: 0; padding: 10px 0; left: 0; top: 93px; z-index: 400; width: 100%; background: #FFFFFFE6; box-shadow: 0 2px 5px #CCCCCC; box-shadow: 0 10px 30px #00000033;}
#container #zero-fixedheaderbelow.fixed #zero-header-below { margin: auto; float: none;}
#container.fixed2 { margin-top: 275px;}
.animated { -webkit-animation-duration: 0.3s; animation-duration: 0.3s;}
.animated.slideOutUp { -webkit-animation-duration: 0s; animation-duration: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.hide,
.hide.slideOutUp { -webkit-animation-duration: 0.3s; animation-duration: 0.3s;}
h1.zerohead1,
div.zerohead1 { background: #323232; color: #FFFFFF; padding-top: 10px; padding-left: 5px; font-size: 12px; font-weight: normal;}
#b0-header-cart { overflow: hidden; width: 1170px; display: flex; justify-content: space-between;}

::placeholder { color: #808080;}

/* #b0-top-section { padding: 25px 0;} */
ul#b0-top-search { margin-bottom: 20px; padding:0; display: flex; list-style: none;}
.search-col2 { width: calc(50%);}
.b0-slider img { width: 920px;}
#b0-embed-sns { display: none;}
@media (any-hover: hover)  { 
	.search-col2 a:hover { opacity: 0.7;}
}
.b0-slider .slick-slide { height: auto !important;}
.b0-slider .slick-next { right: 0 !important;}
.b0-slider .slick-prev { left: 0 !important;}
.b0-slider .slick-arrow { width: initial !important; height: initial !important; z-index: 2 !important;}
.b0-slider .slick-arrow:before { font-size: 30px !important;}
.b0-slider .slick-dots { position: static; bottom: 0;}
.b0-slider .slick-slider { margin-bottom: 6px;}
@media screen and (max-width:767px)  { 
	.b0-slider .slick-slide { width: 100%;}
	.b0-slider .slick-track { width: 100%;}
	.b0-slider .slick-list { width: 100%!important; padding: 0!important;}
	.b0-slider img { width: 100%;}
}

.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';}

@media screen and (max-width:767px)  { 
	#zero-contentinfo { background: #FFFFFF;}
	.contentinfo-body { width:100%;padding: 16px 8px;background: #F6F6F6;}
	.contentinfo-copyright { background: #E61835;clear: both;color: #EEEEEE;padding: 8px 0;text-align: center;font-size: 12px;}
	ul#b0-contentinfo { column-count: 2;text-align: left; font-size: 14px; font-feature-settings: "palt";display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 16px 0;}
	ul#b0-contentinfo li { width:50%;}
	ul#b0-contentinfo li a { color:#535353;text-decoration: none;}
	.search-col2 { width: 50%;}
	.search-col2 img { width:100%;}
	#b0-embed-sns { padding:16px 8px; display:flex; justify-content:space-around;}
	#b0-embed-sns .sns-col3 { width: 15%;}
}

/* バナーエリア */
.bnr_1170 { width:1170px;text-align:center;line-height:25px;font-weight: 700;font-size: 16px;}
.bnr_1170 p { margin-block-start: 0;margin-block-end: 0;}
@media screen and (max-width:767px)  { 
	.bnr_1170 { margin: 0 0 10px 0; width:100%;}
	.bnr_1170 p a { color: #535353; font: 700 14px/1.5 "Noto Sans JP",Helvetica, Arial, sans-serif; text-decoration: none;}
}

/* パンくずリスト */
.breadcrumb { margin-block: 0 1em; padding: 0; list-style: none; display: flex; gap: 8px;}
.breadcrumb li { display: flex; gap: 8px;}
.breadcrumb li::after { content: ">";}
.breadcrumb li:last-child:after { content: "";}
@media screen and (max-width:767px)  { 
	.breadcrumb { padding: 10px;margin-block-start: 0;margin-block-end: 0; flex-wrap: wrap;}
}