@charset "UTF-8";
.breadcrumb-content { padding: 5px 0; }
@media screen and (min-width: 768px) { .breadcrumb-content { padding: 10px 0; } }

.kome { margin-bottom: 20px; font-size: 11px; color: #636363; }

.expired { color: red; text-align: center; font-weight: 500; background-color: #FAE0E0; padding: 10px; }

.main368 { padding-bottom: 80px; background-color: #ffffff; }

.mv-section { width: 100%; max-width: 1200px; margin: 0 auto; }
.mv-section .container-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; max-width: 1200px; margin: 0 auto; }
@media screen and (max-width: 769px) { .mv-section .container-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "item2 item2" "item1 item3"; } }
.mv-section .container-grid .item { aspect-ratio: 1 / 1; overflow: hidden; }
.mv-section .container-grid .item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-section .container-grid .item2 { display: flex; flex-direction: column; aspect-ratio: auto; }
.mv-section .container-grid .item2 .txt { font-size: min(3.5vw, 15px); line-height: 1.8; font-weight: 500; color: #636363; margin-top: 30px; }
.mv-section .container-grid .item2 .limitxt { font-size: min(3.75vw, 16px); line-height: 1.8; font-weight: 600; border-top: #636363 2px solid; border-bottom: #636363 2px solid; width: 76%; margin-left: 15%; color: #636363; margin: 30px auto; padding: 10px 0; }
@media screen and (max-width: 769px) { .mv-section .container-grid .item2 { grid-area: item2; width: 80%; justify-self: center; } }
.mv-section .container-grid .item2 img { width: 86%; height: auto; object-fit: cover; margin-left: 7%; }
.mv-section .container-grid .item2 p { text-align: center; margin-top: 8px; color: #333; font-size: 14px; }
@media screen and (max-width: 769px) { .mv-section .container-grid .item1 { grid-area: item1; aspect-ratio: 1 / 1; } }
@media screen and (max-width: 769px) { .mv-section .container-grid .item3 { grid-area: item3; aspect-ratio: 1 / 1; } }

.intro { text-align: center; margin-top: 60px; letter-spacing: 0.09em; }
.intro h3 { background-color: #dfbca5; padding: 10px; color: #ffffff; }
.intro .intxt { font-size: min(3.2vw, 16px); line-height: 2; margin: 30px auto; font-weight: 500; color: #636363; }
.intro .bigtxt { font-size: min(4vw, 20px); font-weight: 600; }

.item-section { width: 97%; max-width: 1280px; margin: 30px auto; }
.item-section .itembox { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); grid-auto-rows: 1fr; grid-gap: 3em; padding: 0.8em; margin: 0 0 2em; }
.item-section .itembox .box-a, .item-section .itembox .box-b { padding: 20px; position: relative; background-color: #f4f4f4; color: #636363; }
.item-section .itembox .box-a .itemimg, .item-section .itembox .box-b .itemimg { position: absolute; width: min(25%, 100px); bottom: 10%; left: 8%; }
@media screen and (max-width: 769px) { .item-section .itembox .box-a .itemimg, .item-section .itembox .box-b .itemimg { left: 4%; } }
.item-section .itembox .box-a .ribbon, .item-section .itembox .box-b .ribbon { position: absolute; top: 15px; width: min(80vw,350px); right: -10px; }
.item-section .itembox .box-a .textbox, .item-section .itembox .box-b .textbox { margin-left: 33%; }
.item-section .itembox .box-a .textbox .nttl, .item-section .itembox .box-b .textbox .nttl { font-size: clamp(15px, 2.8vw, 17px); font-weight: 600; line-height: 1.6; margin-top: 8px; }
.item-section .itembox .box-a .textbox .ntxt, .item-section .itembox .box-b .textbox .ntxt { font-weight: 500; font-size: clamp(12px, 2.5vw, 14px); line-height: 1.7; margin-top: 15px; }

.specbox { width: 100%; margin-left: 0px; margin-top: 10px; color: #636363; position: relative; }
.specbox .name { font-size: clamp(17px, 3vw, 19px); font-weight: 600; letter-spacing: 0.09em; margin-bottom: 0px; margin-top: 2px; line-height: 1.8; text-align: center; }
@media screen and (min-width: 768px) { .specbox .name { text-align: left; margin-top: 20px; } }
.specbox .spec { font-size: clamp(13px, 3.5vw, 14px); letter-spacing: 0.11em; font-weight: 500; }
.specbox .price { font-size: clamp(22px, 4vw, 25px); font-weight: 700; text-align: center; }
@media screen and (min-width: 768px) { .specbox .price { text-align: left; letter-spacing: 0.1em; margin-top: 20px; 　margin-bottom: 20px; margin-left: 100px; } }
.specbox .pricem { font-size: clamp(13px, 3.5vw, 14px); font-weight: 500; text-align: center; }
@media screen and (min-width: 768px) { .specbox .pricem { text-align: left; margin-top: 20px; margin-left: 0px; } }
.specbox .txtprice { font-weight: 700; font-size: clamp(20px, 4vw, 25px); }

.info-section { width: 97%; max-width: 1280px; margin: 30px auto; font-size: min(2.9vw, 14px); line-height: 2; }
.info-section p { border: #d7c4b0 2px solid; padding: 15px; }

.btn_style { width: 230px; height: 45px !important; background: #444; letter-spacing: 0.15em; border: 1px solid #444; box-sizing: border-box; transition: all .3s 0s ease-in-out; text-align: center; font-size: 15px; }

.btn_style.mini { width: 100%; height: 45px; }

.btn_style.mini > a, .btn_style.mini > span { font-size: 15px; }

.btn_style.mini > a span, .btn_style.mini > span span { padding-left: 35px; }

.btn_style.off { background: #ccc; border: 1px solid #ccc; }

.btn_style:not(.btn_style.off):hover { background: #fff; }

.btn_style:not(.btn_style.off):hover > a, .btn_style:not(.btn_style.off):hover > span { color: #444; }

.btn_style > a, .btn_style > span { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; color: #fff; font-weight: bold; font-size: 17px; }

.btn_style > a span, .btn_style > span span { position: relative; padding-left: 40px; text-align: center; }

.btn_style > a span:before, .btn_style > span span:before { display: block; content: ''; width: 23px; height: 17px; background: url("/assets/images/pages/f-static/campaign/icon_cart.png") left top no-repeat; background-size: 23px 17px; position: absolute; top: 50%; left: 0; transform: translate3d(0, -50%, 0); }

.btn_style:not(.btn_style.off):hover > a span:before, .btn_style:not(.btn_style.off):hover > span span:before { background: url("/assets/images/pages/f-static/campaign/icon_cart_b.png") left top no-repeat; background-size: 23px 17px; }

@media (min-width: 768px) { .sponly { display: none !important; }
  .btn_wrap { width: 200px; box-sizing: border-box; margin-top: 0px; position: absolute; bottom: 0px; right: 0px; }
  .btn_wrap3 { width: 200px; right: 70px; top: 130px; box-sizing: border-box; position: absolute; }
  .btn_wrap_top { position: absolute; width: 180px; margin-top: 30px; box-sizing: border-box; } }
@media (max-width: 768.98px) { .pconly { display: none; }
  .btn_style { height: 12vw; width: 100%; }
  .btn_style .mini { height: 12vw; }
  .btn_style .mini > a, .btn_style .mini > span { font-size: 0.9rem; }
  .btn_style .mini > a span, .btn_style .mini > span span { padding-left: 40px; }
  .btn_style > a, .btn_style > span { font-size: 0.9rem; }
  .btn_style > a span, .btn_style > span span { padding-left: 32px; }
  .btn_style > a span:before, .btn_style > span span:before { width: 20px; height: 15px; background: url("/assets/images/pages/f-static/campaign/icon_cart.png") left top no-repeat; background-size: 20px 15px; }
  .btn_style:not(.btn_style.off):hover > a span:before, .btn_style:not(.btn_style.off):hover > span span:before { background: url("/assets/images/pages/f-static/campaign/icon_cart_b.png") left top no-repeat; background-size: 20px 15px; }
  .btn_wrap { margin-top: 10px; width: 80%; margin-left: 10%; } }