@charset "utf-8";
/* =======================================================================================



RESET



======================================================================================= */
html, body { margin: 0 auto; padding: 0; height: 100%; font-family: sans-serif; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a { -webkit-text-decoration-skip: objects; }
a:hover { -webkit-tap-highlight-color: rgba(0,0,0,0); }
a:hover img { text-decoration: none; border-bottom: none; }
a:focus, *:focus { outline: none; }
a:active, a:hover { outline-width: 0; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
address, dfn { font-style: normal; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
a, address, article, aside, b, button, dd, details, dl, dt, fieldset, figcaption, figure, footer, h1, h2, h3, h4, h5, h6, header, input, legend, li, main, nav, optgroup, p, section, select, summary, textarea, [type="checkbox"], [type="radio"] { margin: 0; padding: 0; }
b { font-weight: inherit; }
button, h1, h2, h3, h4, h5, h6, input, legend, optgroup, select, textarea { font-size: inherit; font-weight: inherit; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button, input { overflow: visible; cursor: pointer; }
button, select { text-transform: none; }
fieldset { border: none; }
hr { overflow: visible; height: 0; box-sizing: content-box; }
img { max-width: 100%; height: auto; border-style: none; background: transparent; -webkit-backface-visibility: hidden; -ms-interpolation-mode: bicubic; backface-visibility: hidden; }
mark { background: transparent; color: inherit; }
ol, ul { margin: 0; }
progress { vertical-align: baseline; }
q:before { margin-left: -1.3em; padding-right: .3em; }
sub, sup { line-height: 0; vertical-align: baseline; position: relative; }
sub { bottom: -.25em; }
sup { top: -.5em; }
svg:not(:root) { overflow: hidden; }
textarea { overflow: auto; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-input-placeholder { color: inherit; opacity: .6; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
/* =======================================================================================



REDEFINITION



======================================================================================= */
html, body, input, select, select *, textarea, *::placeholder { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-style: normal; font-size: 13px; color: #545454; letter-spacing: .115em; }
html, body { background: #fff; color: #545454; }
*::placeholder { color: #999; }
html { scroll-behavior: smooth; }

a { color: #545454; text-decoration: none; }
a:hover { border-bottom: solid 1px #545454; }

iframe { border: 0; }
/* =======================================================================================



Z-INDEX



======================================================================================= */
header { z-index: 50; }
#loading { z-index: 20; }
#trigger { z-index: 12; }
#menu { z-index: 11; }
#overlay,
#underlay { z-index: 2; }

footer { z-index: 40; }
#backToTop { z-index: 3; }

main { z-index: 30; }

header.flag .sup:before,
header.flag .hd_dl:before,
main.flag:before,
footer.flag:before { z-index: 10; }
/* =======================================================================================



LOADING



======================================================================================= */
#loading { display: none!important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(153,170,186,.9); text-align: center; }
#loading b { display: block; font-family: "Poppins", serif; font-weight: 400; font-style: italic; }
#loading i,
#loading i:after { border-radius: 50%; width: 4em; height: 4em; }
#loading i { display: block; margin: 10% auto 1em; font-style: normal; font-size: 13px;
   border-top: .5em solid rgba(55,55,55,.2);
 border-right: .5em solid rgba(55,55,55,.2);
border-bottom: .5em solid rgba(55,55,55,.2);
  border-left: .5em solid #fff;
transform: translateZ(0);
animation: loading 1.1s infinite linear;
}
@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* =======================================================================================



LAYOUT



======================================================================================= */

header,
main,
footer { clear: both; width: 100%; margin: 0 auto; }

header.flag .sup:before,
header.flag .hd_dl:before,
main.flag:before,
footer.flag:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; }

header.flag .sup:before,
header.flag .hd_dl:before { background-color: rgba(0,0,0,0.6); }
main.flag:before,
footer.flag:before { background-color: rgba(0,0,0,0.6); }
 
header,
article,
main,
section,
main div,
footer { position: relative; }

article:after,
section:after { display: block; clear: both; content: ''; }

.inner { max-width: 1120px; margin: auto; padding: 0 1rem; }
/* =======================================================================================



ANIMATION (ABOVE THE FOLD)



======================================================================================= */

.anime_fadeout { transition: .8s ease-out; }


/* =======================================================================================



HEADER



======================================================================================= */
header .sup { position: relative; display: flex; align-items: center; justify-content: center; min-height: 24px; font-weight: 500; font-size: 10px; background-color: #637989; color: #fff; line-height: 1; letter-spacing: .120em;
 }

.header { position: relative; }

.hd_dl { max-width: 1120px; min-height: 136px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; flex-wrap: wrap; padding: 0 1rem; }
.hd_dt,
.hd_dt2 { width: 33.333333%; }
.hd_dd { width: 33.333333%; }
.hd_dd2 { width: 100%; }
.hd_logo { position: relative; display: flex; align-items: center; flex-direction: column; }
.hd_logo dt { max-width: 68px; }
.hd_logo dd { position: absolute; top: 40px; max-width: 48px; }
[class*="hd_menu"] { list-style: none; padding: 0; display: flex; flex-wrap: wrap; }


header .kw { height: 32px; padding: 12px 10px; border: none; background-color: #eaeaea; }
header .kw::placeholder { color: #bcbcbc; }
header [class*="hd_search"] { position: relative; }
header [class*="hd_search"] span { position: absolute; width: 17px; top: 5px; }
header .hd_search_sp span { right: 8px; }
header [class*="hd_search"] span img { vertical-align: bottom; }
.hd_search_sp .kw,
.hd_search_sp_open .kw { width: 100%; }


.hd_search_pc,
.hd_menu2,
.hd_menu_icons dd,
.toc_box99 { display: none; }


.hd_menu1 { justify-content: flex-end; align-items: center; }

.hd_menu_icons { font-size: 10px; font-weight: 700; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.hd_menu_icons a { display: block; padding: 4px; transition: all .2s linear; }
.hd_menu_icons a:hover { text-decoration: none; border-bottom: none; opacity: 0.6; }
.header.login .hd_menu_icons > * { flex-basis: calc(100% / 3 - 4px);}
.hd_menu_icons dl { text-align: center; }
.hd_menu_icons dt img { max-width: 20px; width: 20px; margin: auto; }
.hd_menu_icons dl,
.hd_menu_icons dt { position: relative; }
.hd_menu_icons dd { line-height: 1.2; white-space: nowrap; }
.hd_menu_icons .logout_icon dt:before { position: absolute; content: '→'; font-weight: 700; font-size: 15px; top: 0; right: -7px; }

#trigger { position: absolute; top: 20px; left: 16px; right: auto; width: 40px; height: 34px; padding: 4px; }
#trigger.flag { top: -16px; right: -3px; left: auto; }
#hamburger { width: 100%; height: 100%; background-color: transparent; text-align: center; cursor: pointer; will-change: transform; }
#hamburger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #7293aa; transition: all .2s linear; }
#hamburger span:first-child { top: 0; }
#hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
#hamburger span:last-child { bottom: 0; }
#hamburger.flag span { width: 82%; background-color: #fff; }
#hamburger.flag span:first-child { top: 2px; transform: translateY(8px) rotate(-45deg); }
#hamburger.flag span:nth-child(2) { opacity: 0; }
#hamburger.flag span:last-child { bottom: 6px; transform: translateY(-8px) rotate(45deg); }

#menu { position: fixed; top: 0; left: 0; width: calc(100% - 40px); max-width: 328px; height: 100%; padding: 2rem 0 10rem; background-color: #fff; transform: translate3d(-100%,0,0); }
#menu.open { overflow-y: auto; transform: translate3d(0,0,0); }

#overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
#overlay.flag { display: block; }


.hd_logo2 { position: relative; display: flex; gap: 8px; padding: 0 0 16px 20px; align-items: center; }
.hd_logo2 dt { max-width: 56px; }
.hd_logo2 dd { max-width: 70px; }

.menu_login_unit a { display: block; background-color: #7e93a7; color: #fff; }
.menu_login_unit a:hover { border: none; }
.menu_login_box { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.menu_login_box dt + dd { flex-grow: 1; }
.menu_login_box dt { width: 64px; text-align: center; }
.menu_login_box dt img { width: 17px; vertical-align: sub; }
.menu_login_box dt + dd + dd { width: 56px; text-align: center; }
.menu_login_box dd img { width: 5px; }

.menu_quick_box { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-around; padding: 14px; }
.menu_quick_box > * { flex-basis: calc(50% - 16px); }
.menu_quick_box a { display: block; border: 1px solid #eaeaea; border-radius: 8px; min-width: 140px; }
.menu_quick_box dl { display: flex; flex-direction: column; gap: 8px; padding: 13px 10px; text-align: center; font-size: 12px; font-weight: 500; }
.menu_quick_inner1 img { width: 23px; }
.menu_quick_inner2 img { width: 28px; }

.hd_search_sp_open { padding: 0 16px 14px; }
header .hd_search_sp_open span { right: 24px; }

.toc_unit { }
.toc_box { }

.toc_unit .toc_box + .toc_box { margin-top: 1px; }

.toc_box1 { }
.toc_box2 { }
.toc_box3 { }
.toc_box4 { }

.toc_ttl { position: relative; background-color: #8a9ba6; color: #fff; font-size: 14px; line-height: 1; font-weight: 700; padding: 1em; }
.toc_ttl span { position: absolute; top: 10px; right: 16px; width: 8px; display: block; }
.toc_unit .toc_ttl span img { transition: all .2s linear; }
.toc_unit .toc_ttl.flag span img { transform:rotate(-180deg); }

.toc_dl { position: relative; padding: 8px 0 0 0; }
.toc_dt { position: relative; padding: 12px 0 0 12px; }
.toc_dd { position: relative; }
.toc_unit .toc_dd { padding: 10px 0 0 32px; border-bottom: 1px solid #eaeaea; }
.toc_box .toc_dd:last-child { border-bottom-color: #fff; }
.toc_unit .toc_dd { display: none; }
/* 1番目と3番目の toc_dd を表示 */
/* .toc_unit .toc_dl > .toc_dd:nth-of-type(1),
.toc_unit .toc_dl > .toc_dd:nth-of-type(3) { display: block; } */

.toc_head { display: flex; align-items: center; position: relative; }
.toc_head_img { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.toc_box1 .toc_dt:first-child .toc_head_img { background-image: url("/assets/img/menu_icon_01.png"); }
.toc_box1 .toc_dt:nth-of-type(2) .toc_head_img { background-image: url("/assets/img/menu_icon_02.png"); }
.toc_box1 .toc_dt:nth-of-type(3) .toc_head_img { background-image: url("/assets/img/menu_icon_03.png"); }
.toc_box1 .toc_dt:nth-of-type(4) .toc_head_img { background-image: url("/assets/img/menu_icon_04.png"); }
.toc_box1 .toc_dt:nth-of-type(5) .toc_head_img { background-image: url("/assets/img/menu_icon_05.png"); }

.toc_box2 .toc_dt:first-child .toc_head_img { background-image: url("/assets/img/menu_icon2_01.png"); }
.toc_box2 .toc_dt:nth-of-type(2) .toc_head_img { background-image: url("/assets/img/menu_icon2_02.png"); }
.toc_box2 .toc_dt:nth-of-type(3) .toc_head_img { background-image: url("/assets/img/menu_icon2_03.png"); }
.toc_box2 .toc_dt:nth-of-type(4) .toc_head_img { background-image: url("/assets/img/menu_icon2_05.png"); }
.toc_box2 .toc_dt:nth-of-type(5) .toc_head_img { background-image: url("/assets/img/menu_icon2_05.png"); }
.toc_box2 .toc_dt:nth-of-type(6) .toc_head_img { background-image: url("/assets/img/menu_icon2_06.png"); }

.toc_head_ttl { flex: 1; min-width: 0; padding-left: 6px; font-size: 13px; font-weight: 500; }
.toc_head_switch { height: 10px; }
.toc_unit .toc_head_switch { flex: 0 0 24px; width: 24px; }
.toc_head_switch .arrow { display: block; width: 16px; height: 10px; }
.toc_head_switch .arrow::before { display: block; content: ''; width: 8px; height: 5px; background-image: url("/assets/img/menu_icon_arrow1.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; }
.toc_head_switch.flag .arrow::before { background-image: url("/assets/img/menu_icon_arrow2.png"); }
.toc_bnr { padding: 12px 0; }
.toc_bnr a{ transition: all .2s linear;}
.toc_bnr a:hover{ border: none; opacity: 0.6;}

.toc_box ol { list-style: none; }
.toc_unit .toc_box ol { padding-left: 24px; }
.toc_box ol li { font-weight: 500; font-size: 12px; padding-bottom: 1rem; }
.toc_box ol li a { display: block; }
.toc_unit .toc_ul { display: none; }
.toc_ul { list-style: none; padding: 18px 0 2px 15px; }
.toc_ul li { position: relative; font-size: 13px; font-weight: 500; margin-bottom: 1rem; }
.toc_ul li::after { position: absolute; top: 3px; right: 16px; background-image: url("../img/menu_icon_arrow3.png"); background-size: cover; display: block; width: 5px; height: 8px; content: ''; }

.menu_icon98_01 { width: 16px; vertical-align: sub; }

#underlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
#underlay.flag { display: block; }

@media screen and (min-width: 260px) {
}

@media screen and (min-width: 320px) {
}

@media screen and (min-width: 420px) {
.hd_menu_icons { flex-wrap: nowrap; }
.header.login .hd_menu_icons > * { flex-basis: auto;}
}
@media screen and (min-width: 640px) {
.hd_menu_icons dt img { width: 20px; }
.hd_menu_icons dd { display: block; }
.hd_menu_icons { gap: 5px; }
.hd_menu_icons .logout_icon dt:before { font-size: 20px; top: 0; right: 0; }

}
@media screen and (min-width: 720px) {
.hd_menu_icons a { padding: 8px; }
}
/* =======================================================================================



HEADER CHANGE MENU'S LAYOUT



======================================================================================= */
@media screen and (min-width: 960px) {

.hd_dt,
.hd_search_sp { display: none; }
.hd_dt2,
.hd_dd { width: auto; }
.hd_dt2 { padding-top: 4px; }
.hd_dd { padding-top: 36px; }
.hd_logo { flex-direction: row; }
.hd_logo dt { max-width: 76px; }
.hd_logo dd { position: relative; top: auto; max-width: 106px; padding-left: 10px; }
.hd_search_pc { display: block; width: 256px; padding-right: 18px; }
header .hd_search_pc .kw { width: 100%; }
header .hd_search_pc span { right: 25px; }
.hd_menu_icons { gap: 8px; }
.hd_menu_icons dt img { width: 20px; }
.hd_menu2 { display: flex; gap: 40px; padding-top: 20px; padding-bottom: 10px; font-weight: 700; font-size: 14px; }

#trigger { display: none; }

}
@media screen and (min-width: 1312px) {
.hd_dl { padding: 0; }
.hd_menu_icons { gap: 12px; }
}
/* =======================================================================================



MAIN



======================================================================================= */
.main_unit { }
.main_box1 { padding: 0 24px; }
.toc_unit_pc { width: 240px; padding-bottom: 64px; }
.main_box2,
.toc_unit_pc .toc_head_img,
.toc_unit_pc .toc_ttl span,
.toc_unit_pc .toc_dd { display: none; }
.toc_unit_pc .toc_head { padding: 6px 8px; cursor: pointer; transition: all .2s linear; }
.toc_unit_pc .toc_head:hover { background-color: #f5f5f5; color: #9e9e9e; }
.toc_unit_pc .toc_head_ttl { letter-spacing: .025em; padding-left: 0; }
.toc_unit_pc .toc_head_switch { flex: 0 0 12px; width: 12px; }
.toc_unit_pc .toc_head_switch .arrow::before { width: 5px; height: 8px; background-image: url(/assets/img/menu_icon_arrow3.png); }
.toc_unit_pc .toc_dd ol { position: absolute; top: -32px; left: 250px; width: 240px; padding: 4px 0; z-index: 11; background-color: rgba(255, 255, 255, .9); transition: all .2s linear; }
.toc_unit_pc .toc_dd.is-active ol {
  transition-delay: 0.2s;
  box-shadow: 0 0 8px rgba(0,0,0,.6);
}

.toc_unit_pc .toc_box + .toc_box { margin-top: 16px; }
.toc_unit_pc .toc_box ol li { padding-bottom: 0; }
.toc_unit_pc .toc_box ol li a { padding: 8px 16px; transition: all .2s linear; }
.toc_unit_pc .toc_box ol li a:hover { color: 000; background-color: #f5f5f5; text-decoration: none; border: none;}
.toc_unit_pc .toc_dt { padding: 0; } 
.toc_unit_pc .toc_ul { padding-left: 0; }
.toc_unit_pc .toc_ul li { margin-bottom: 0; }
.toc_unit_pc .toc_ul li::after { top: 10px; right: 15px; }
.toc_unit_pc .toc_ul li a { display: block; padding: 4px 8px; }
.toc_unit_pc .toc_ul li a:hover { background-color: #f5f5f5; text-decoration: none; border: none; }

@media screen and (min-width: 960px) {
.main_unit { display: flex; flex-direction: row-reverse; max-width: 1200px; margin: auto; padding: 0 0 0 40px; justify-content: space-between; }
.main_box1 { overflow: hidden; flex-basis: 888px; padding: 0 40px; }
.main_box2 { display: block; flex-basis: 240px; }
.toc_box99 { display: block; }
}
/* =======================================================================================



TOP PAGE



======================================================================================= */
.ttl { margin-bottom: 18px; color: #4b4b4b; }
.ttl b { padding-right: .6em; font-size: 24px; font-family: "Poppins", sans-serif; font-weight: 600; }
.ttl small { font-size: 12px; font-weight: 500; display: inline-block; }

.top_unit { padding-bottom: 32px; }

.first_slick { position: relative; width: 100%; overflow: hidden; padding-bottom: 26px; }
.first_slick .slick-dots { bottom: 0; /* paddingで作ったスペースの中に収まる */ }

.first_slick .slick-slide {aspect-ratio: 16 / 9; overflow: hidden;}
/* 1枚のサイズを固定 */
.first_slick_img { width: 640px; /* 左右に2pxずつの余白（合計4px） */margin: 0 2px; box-sizing: border-box; }
/* スライダー全体の隙間を埋めるための微調整（必要に応じて） */
.first_slick .slick-list { margin: 0 -2px; }
.first_slick_img img { width: 100%; height: 100%; display: block; }
/* 矢印の基本スタイル調整 */
.first_slick .slick-prev,
.first_slick .slick-next { z-index: 9; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; position: absolute; /* 念のため */ }
/* 矢印の位置を中央640pxの内側に配置 */
.first_slick .slick-prev { /* 中央から320px戻り、さらに内側へ入れるための調整 */ left: calc(50% - 320px + 10px); }
.first_slick .slick-next { /* 中央から320px進み、さらに内側へ戻すための調整 */ right: calc(50% - 320px + 10px); }

.item_slick::before { position: absolute; top: 0; right: 0; width: 8px; height: 100%; content: ''; z-index: 3; background-color: #fff; }

.item_slick { position: relative; }
.item_slick .slick-track { margin: 0 -4px; }
.item_slick .item_card { width: 100%; max-width: 196px; margin: 0 4px; }
.item_slick .item_card a { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.item_slick .item_card a img { width: 100%; height: 100%; object-fit: cover; transition: all .2s linear;}
.item_slick .item_card a:hover{ border: none; }
.item_slick .item_card a:hover img { width: 102%; height: 102%; opacity: 0.6; }
.item_slick .item_card figcaption { padding: 8px 0 20px; font-size: 12px; font-weight: 500; }
.item_slick .item_card figcaption h2 { font-weight: 600; margin-bottom: 8px; }

.item_slick .slick-prev,
.item_slick .slick-next { z-index: 10; top: 32%; transform: translateY(-32%); }
.item_slick .slick-prev { left: -18px; }
.item_slick .slick-next { right: -18px; }
.item_slick .slick-prev:before,
.item_slick .slick-next:before { display: block; width: 11px; height: 18px; background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: 1; content: ''; }
.item_slick .slick-prev:before { background-image: url("/assets/img/item_slicl_arrow1.png");  }
.item_slick .slick-next:before { background-image: url("/assets/img/item_slicl_arrow2.png");  }

/* 画面幅が640px以下の時のケア（画像幅が100%になる場合） */
/* スマホ対応：画面幅が640pxより小さい時 */
@media (max-width: 640px) {
.first_slick .slick-prev { left: 5px; }
.first_slick .slick-next { right: 5px; }
.first_slick .first_slick_img { width: 100vw; /* 画面いっぱいに広げる */ }
.item_slick .slick-prev {  }
.item_slick .slick-next {  }
}

.nweitem_box { display: flex; gap: 4px; flex-wrap: wrap; }
.nweitem_box > * { flex-basis: calc(50% - 4px);}
.nweitem_box .item_card a { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.nweitem_box .item_card a img { width: 100%; height: 100%; object-fit: cover; transition: all .2s linear;}
.nweitem_box .item_card a:hover { border: none; }
.nweitem_box .item_card a:hover img { width: 102%; height: 102%; opacity: 0.6; }
.nweitem_box .item_card figcaption { padding: 8px 0 20px; font-size: 12px; font-weight: 500; }
.nweitem_box .item_card figcaption h2 { font-weight: 600; margin-bottom: 8px; }

.nweitem_box .item_card,
.cate_main_box .item_card { position: relative; }
.nweitem_box .item_card a,
.cate_main_box .item_card a { position: relative; display: block; }

.nweitem_box .item_card a:before,
.cate_main_box .item_card a:before { position: absolute; top: 8px; right: 8px; padding: 4px; text-align: center; display: block; content: ''; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 11px; line-height: 20px; line-height: 1.2; z-index: 4; }

.nweitem_box .item_card a:after,
.cate_main_box .item_card a:after { position: absolute; top: 8px; left: 8px; padding: 4px; text-align: center; display: block; content: ''; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 11px; line-height: 20px; line-height: 1.2; }

.nweitem_box .item_card.new a:before,
.cate_main_box .item_card.new a:before { background-color: rgba(234,36,74,0.8); color: rgba(255,255,255,0.9); content: 'New'; }
.nweitem_box .item_card.soldout a:before,
.cate_main_box .item_card.soldout a:before { background-color: rgba(34,34,34,0.8); color: rgba(255,255,255,0.9); content: 'Sold Out'; }
.nweitem_box .item_card.vintage a:after,
.cate_main_box .item_card.vintage a:after { background-color: rgba(182,153,124,0.9); color: rgba(255,255,255,0.9); content: 'Vintage'; }
.nweitem_box .item_card.pending a:before,
.cate_main_box .item_card.pending a:before { background-color: rgba(84,84,84,0.8); color: rgba(255,255,255,0.9); content: 'Pending'; }

.nweitem_box .item_card span,
.cate_main_box .item_card span { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; }

.nweitem_box .item_card.soldout span:before,
.cate_main_box .item_card.soldout span:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-color: rgba(0,0,0,.3); }

.tag_list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: block; padding: 7px 15px; border-radius: 18px; background-color: #718593; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; transition: all .2s linear; }
.tag:hover { text-decoration: none; border: none; background-color: #91a5b4; }

.top_news_box { padding: 20px 17px; background-color: #f5f5f5; }
.top_news_list { list-style: none; padding: 0; }
.top_news_list li + li { margin-top: 1em; }
.top_news_list dl { display: flex; flex-direction: column; font-size: 14px; font-weight: 500; }
.top_news_list dt { padding-right: 32px; white-space: nowrap; }
.top_news_list a:hover { text-decoration: none; border: none; }
.top_news_list a:hover dd span { border-bottom: solid 1px #545454; }

.top_category_list1,
.top_category_list2 { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.top_category_list1 > * { flex-basis: calc(100% - 8px); line-height: 1; }
.top_category_list1 a{ transition: all .2s linear; }
.top_category_list1 a:hover{border: none; opacity: 0.6;}
.top_category_list1 img { width: 100%; }
.top_category_list2 { margin-top: 24px; }
.top_category_list2 > * { flex-basis: calc(100% - 8px); line-height: 1; }
.top_category_list2 dl { display: flex; background-color: #f5f5f5; align-items: center; padding: 16px; transition: all .2s linear; }
.top_category_list2 dt { width: 36px; }
.top_category_list2 dd { padding-left: 11px; font-size: 13px; font-weight: 500; color: #545454; }
.top_category_list2 dd b { display: inline-block; }

.top_category_list2 a:hover dl{background: #eaeaea;}

.top_scene_unit {}
.top_scene_box { display: flex; gap: 8px; flex-direction: column; }
.top_scene_box img { width: 100%; }
.top_scene_box a { display: block; transition: all .2s linear; }
.top_scene_box a:hover { opacity: .8; border: none; }
.top_scene_inner1 { }
.top_scene_inner2 {}
.top_scene_item1 {}
.top_scene_item2 { display: flex; gap: 8px; }
.top_scene_item2a {}
.top_scene_item2b {}
.top_scene_item3 {}

.wood_unit .cat-ttl,.wtag_unit .cat-ttl{width: 100%; font-weight: 600; margin-bottom: 8px;}
.top_wood_box { display: flex; flex-wrap: wrap; gap: 8px; }
.top_wood_box .item_card { flex-basis: calc(100% - 8px); display: flex; flex-direction: row; }
.top_wood_box .item_card_box { display: flex; border: 1px solid #eeece8; width: 100%; padding: 6px 8px; align-items: center; transition: all .2s linear; }
.top_wood_box .item_card a:hover,.top_wood_box .item_card.active  { background-color: #f5f5f5; text-decoration: none; }
.top_wood_box .item_card_img { display: flex; align-items: center; flex: 0 0 48px; width: 48px; height: 42px; }
.top_wood_box .item_card_img img { border-radius: 50%; width: 36px; height: 36px; }
.top_wood_box .item_card_inner { flex: 1; min-width: 0; }
.top_wood_box .item_card_ttl1 { font-weight: 500; font-size: 10px; line-height: 1.2; }
.top_wood_box .item_card_ttl2 { font-size: 13px; letter-height: 1.2; font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: .050em; }

.foot_aside_unit {}
.foot_aside_list { list-style: none; padding: 0; display: flex; gap: 9px; flex-wrap: wrap; }
.foot_aside_list img { width: 64px; margin: 0 auto; }
.foot_aside_list li { flex-basis: calc(100% / 2 - 9px); }
.foot_aside_list li a { display: flex; flex-direction: column; width: 100%; height: 100%; color: #fff; padding: 4px; background-color: #8a9ba6; transition: all .2s linear; }
.foot_aside_list li a:hover { text-decoration: none; border: none; background-color: #9eb2bf; }
.foot_aside_list figure { display: flex; flex-direction: column; width: 100%; height: 100%; border: 1px solid #fff; padding: 22px 12px; text-align: center; }
.foot_aside_list figcaption { padding-top: 24px; }
.foot_aside_list h2 { padding-bottom: 4px; font-size: 10px; font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: .050em; }
.foot_aside_list h3 { font-size: 12px; font-weight: 500; letter-spacing: .050em; }

@media screen and (min-width: 380px) {
.top_wood_box .item_card { flex-basis: calc(100% / 2 - 8px); }
}

@media screen and (min-width: 400px) {
.top_news_list dl { flex-direction: row; }
.top_category_list2 > * { flex-basis: calc(100% / 2 - 8px); }
}
@media screen and (min-width: 560px) {
.top_category_list1 > * { flex-basis: calc(50% - 8px); }
.top_category_list2 > * { flex-basis: calc(100% / 3 - 8px); }
}
@media screen and (min-width: 640px) {
.nweitem_box > * { flex-basis: calc(25% - 4px);}
.top_scene_box { flex-direction: row; flex-wrap: wrap; }
.top_scene_box > * { flex-basis: calc(50% - 8px); }
.top_wood_box .item_card_inner { text-align: left; }
.top_wood_box .item_card_box { flex-direction: row; }
}
@media screen and (min-width: 720px) {
.top_wood_box .item_card { flex-basis: calc(100% / 3 - 8px); }
}
@media screen and (min-width: 800px) {
.foot_aside_list li { flex-basis: calc(100% / 4 - 9px); }
}
@media screen and (min-width: 920px) {
.top_wood_box .item_card { flex-basis: calc(100% / 4 - 8px); }
}
@media screen and (min-width: 960px) {
.top_unit { padding-bottom: 64px; }
.top_wood_box .item_card { flex-basis: calc(100% / 3 - 8px); }
}

@media screen and (min-width: 1180px) {
.top_wood_box .item_card { flex-basis: calc(100% / 4 - 8px); }
}

/* =======================================================================================



COMPONENT



======================================================================================= */
/* 文字色指定 */
.attn,
.err { color: #e74c3c; }

@media screen and (min-width: 320px) {

}

@media screen and (min-width: 560px) {

}

/* =======================================================================================



COMPONENT / MODULE

行送り 30pt → 30pt/15px(サイズ) = 2
⇒ line-height: 2;
文字間 115 → 115/ 1000 = 0.115
⇒ letter-spacing: .115em;

_unit (ひとまとまり article,section)
.panel (サイト固定幅サイズ(section))
_dsp (jQuery用 表示/非表示)
  _box (最小単位のレイアウトボックス(div,dl,ol,ul))
  _list (リスト：ol,ul)
  _card_box (カード型レイアウト：ol,ul)
    _inner (boxに対してのインナー)
    _header(要素・コンテンツの上部)
    _body(要素・コンテンツの本文)
    _footer(要素・コンテンツの下部)
      _tbl (table)
      _item (dt,dd,li)
      _card (li)
      _btn (ボタン)
        _ttl (タイトル,dt)
        _txt (テキスト)
        _ico (アイコン)
        _img (画像)
        _bnr (バナー)



======================================================================================= */

/* ボタン */
.btn_box { }
.btn_box.center { text-align: center; }

/* 送信ボタン */
.submit_btn {  }
.submit_btn:hover {  }
/* 登録ボタン */
.entry_btn { }
.entry_btn:hover { }
/* 通常ボタン */
.normal_btn { }
.normal_btn:hover { }
/* 削除ボタン */
.delete_btn {  }
.delete_btn:hover {  }

/* 進む戻るボタン */
.prev:before,
.next:before,
li:has(input.prev, input.next):before { position: absolute; top: 50%; transform: translateY(-50%); }

a.prev:before,
li:has(input.prev):before { left: 1em; }
a.next:before,
li:has(input.next):before { right: 1em; }

li:has(input.prev, input.next):before { color: #ecf0f1; }
li:hover:has(input.prev, input.next):before { color: #212529; }

.prev [class*="_btn"],
.next [class*="_btn"] { width: 100%; }
/* ページャー */
.pager_box { overflow: hidden; margin: 0 auto 1rem; text-align: center; }
.pager_box ol,
.pager_box ul { list-style: none; display: inline-block; margin: auto; padding: 0; }
.pager_box li { float: left; margin: .5em .5em 0; }
.pager_box li a,
.pager_box li input,
.pager_box li button { display: block; padding: .5em 1em; border: 1px solid #73879c; background-color: #73879c; color: #ecf0f1; line-height: 1; text-decoration: none; transition: all .2s linear; }
.pager_box li .prev { padding-left: 2em; }
.pager_box li .next { padding-right: 2em; }
.pager_box li .cur,
.pager_box li a:hover,
.pager_box li input:hover,
.pager_box li button:hover { background-color: #fff; color: #212529; }

@media screen and (max-width: 360px) {
.btn_box [class*="_btn"] { width: 100%; }
}

@media screen and (min-width: 360px) {
.btn_box:has(> :nth-child(2):last-child, > :nth-child(3):last-child) > * { flex-basis: calc(100% / 3); }
.btn_box:has(> :nth-child(2):last-child) > div.center { margin-right: 0; margin-left: 0; }
}

@media screen and (min-width: 400px) {
.btn_box [class*="_btn"] {  }
}

/* テーブル ※デフォルトはseparate */
[class*="_tbl"] { width: 100%; margin: 0 auto; border-collapse: separate; border-spacing: 0; }
[class*="_tbl"] th,
[class*="_tbl"] td { padding: 1rem .5rem; }

/* 横長テーブル用 スマホ時に横スクロールバー */
.tbl_box { margin-bottom: 1rem; overflow-x: auto; white-space: nowrap; animation-fill-mode: both; }
.tbl_box > table { margin-bottom: 1rem; }
.tbl_box::-webkit-scrollbar { height: 24px;/* tableにスクロールバーを追加 */ }
.tbl_box::-webkit-scrollbar-track { background: #f1f1f1;/* tableにスクロールバーを追加 */ }
.tbl_box::-webkit-scrollbar-thumb { background-color: #bcbcbc;/* tableにスクロールバーを追加 */ }

/* テーブル 線 */
.list_tbl { background-color: #fff; }
.list_tbl tr {  }
.list_tbl th,
.list_tbl td { }
.list_tbl th { }


@media screen and (min-width: 1280px) {
.tbl_box { white-space: normal; }
}

/* =======================================================================================



NAME



======================================================================================= */

@media screen and (min-width: 480px) {
}

@media screen and (min-width: 640px) {
}

@media screen and (min-width: 760px) {
}

@media screen and (min-width: 880px) {
}


/* =======================================================================================



FOOTER



======================================================================================= */
footer {  }

#backToTop { display: none; position: fixed; right: 10px; bottom: 8px; }
#backToTop span { display: block; width: 32px; height: 32px; margin: auto; padding-left: 1px; border-radius: 50%; text-align: center; line-height: 30px; vertical-align: middle; cursor: pointer; }
#backToTop span,
#backToTop span:hover { transition: all .2s ease-in; }
#backToTop span:before,
#backToTop span:after { content: ""; position: absolute; top: 0; left: calc(50% - 0.5px); width: 1px; height: 25px; border-radius: 9999px; background-color: rgba(255,255,255,.6); transform-origin: 50% 0.5px; }
#backToTop span:hover:before,
#backToTop span:hover:after { background-color: rgba(255,255,255,1); }
#backToTop span:before { transform: rotate(40deg); }
#backToTop span:after { transform: rotate(-40deg); }

#footer { background-color: #637989; color: #fff; text-align: center; padding: 24px 24px 8px; }
#footer a { color: #fff; }
.ft_logo { display: flex; flex-direction: column; align-items: center; }
.ft_logo img { margin: 0 auto; }
.ft_logo dt { max-width: 76px; }
.ft_logo dd { max-width: 54px; }
.ft_icon_menu { list-style: none; margin: 60px auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; font-weight: 500; font-size: 10px; }
.ft_icon_menu > * { max-width: 96px; }
.ft_icon_menu a { display: block; padding: 8px; transition: all .2s linear; }
.ft_icon_menu a:hover { text-decoration: none; border: none; opacity: 0.6;}
.ft_icon_menu dd b { display: inline-block; }
.ft_icon_menu img { width: 32px; margin: 0 auto; }
.ft_menu { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; margin: 0 0 32px; padding: 0; font-weight: 500; font-size: 12px; } 
.ft_copy { font-weight: 500; font-size: 10px; }
.ft_menu a{ transition: all .2s linear; }
.ft_menu a:hover { text-decoration: none; border: none; opacity: 0.6; }
@media screen and (min-width: 960px) {
#footer { padding-top: 60px; }
}
/* =======================================================================================



OVERWRITE



======================================================================================= */


@media screen and (min-width: 960px) {

}