@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap');
/* ============================================================
1. Root Variables
============================================================ */
:root {
--2xs: clamp(10px, calc(12 / 850 * 100vw), 12px);
--xs: clamp(10px, calc(12 / 850 * 100vw), 12px);
--sm: clamp(11px, calc(14 / 850 * 100vw), 14px);
--bs: clamp(14px, calc(16 / 850 * 100vw), 16px);
--lg: clamp(16px, calc(17 / 850 * 100vw), 17px);
--xl: clamp(17px, calc(18 / 850 * 100vw), 18px);
--2xl: clamp(18px, calc(21 / 850 * 100vw), 21px);
--3xl: clamp(21px, calc(24 / 850 * 100vw), 24px);
--4xl: clamp(24px, calc(28 / 850 * 100vw), 28px);
--5xl: clamp(26px, calc(30 / 850 * 100vw), 30px);
}
@media (max-width: 768px) {
:root {
--2xs: clamp(10px, calc(12 / 375 * 100vw), 12px);
--xs: clamp(12px, calc(13 / 375 * 100vw), 13px);
--sm: clamp(12px, calc(13 / 375 * 100vw), 13px);
--bs: clamp(12px, calc(13 / 375 * 100vw), 13px);
--lg: clamp(13px, calc(14 / 375 * 100vw), 14px);
--xl: clamp(14px, calc(15 / 375 * 100vw), 15px);
--2xl: clamp(15px, calc(16 / 375 * 100vw), 16px);
--4xl: clamp(16px, calc(18 / 375 * 100vw), 18px);
--5xl: clamp(22px, calc(22 / 375 * 100vw), 22px);
}
}
/* ============================================================
2. Reset & Base
============================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%;
vertical-align: baseline; background: transparent;
}
html { scroll-behavior: smooth; }
body {
font-family: "Yu Gothic", "貂ｸ繧ｴ繧ｷ繝�け", "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "繝｡繧､繝ｪ繧ｪ", sans-serif;
font-size: var(--bs);
line-height: 1.7;
color: #000;
-webkit-text-size-adjust: 100%;
}
img { max-width: 100%; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
a:hover{opacity: .7;}
ul, ol { list-style: none; }
button { background: none; border: none; cursor: pointer; }
* { box-sizing: border-box; }
.ly_container {
max-width: 900px;
padding-left: var(--5xl);
padding-right: var(--5xl);
width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
}
@media(max-width: 767px) {
.ly_container {
padding-left: 25px;
padding-right: 25px;
max-width: 500px
}
}
.ly_footer {
background-color: #000;
color: #fff;
padding: 88px 0 100px
}
@media(max-width: 767px) {
.ly_footer {
padding: 25px 0 90px
}
}
.ly_footer_wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column
}
.ly_footer_logo {
width: 189px
}
@media(max-width: 767px) {
.ly_footer_logo {
width: 52px
}
}
.ly_footer_copy {
margin-top: 38px;
display: flex;
flex-direction: column;
font-size: 13px;
text-align: center
}
@media(max-width: 767px) {
.ly_footer_copy {
margin-top: 11px;
font-size: 3px
}
}
.ly_footer_copy small {
margin-bottom: 14px
}
@media(max-width: 767px) {
.ly_footer_copy small {
line-height: 1.5;
margin-bottom: 0
}
}
.ly_footer_copy small:last-child {
margin-bottom: 0
}
.ly_header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background: #fff;
}
.ly_header_logo span {
display: block;
max-width: 150px;
}
.ly_header_logo span img{
display: block;
padding: .75em 1.5em;
}
.ly_wrap {
overflow: hidden
}
.bl_block {
display: block
}
.bg-gy{
background: #F1F1F1;
}
.bg-wt{
background: #fff;
}
.fz-2xs{font-size: var(--2xs)}/* 32px */
.fz-xs{font-size: var(--xs)}/* 32px */
.fz-sm{font-size: var(--sm)}/* 32px */
.fz-bs{font-size: var(--bs)}/* 32px */
.fz-lg{font-size: var(--lg)}/* 35px */
.fz-xl{font-size: var(--xl)}/* 37px */
.fz-2xl{font-size: var(--2xl)}/* 42px */
.fz-3xl{font-size: var(--3xl)}/* 48px */
.fz-4xl{font-size: var(--4xl)}/* 56px */
.sc-2xs>*+*{margin-top: var(--2xs)}/* 32px */
.sc-bs>*+*{margin-top: var(--bs)}/* 32px */
.sc-lg>*+*{margin-top: var(--lg)}/* 35px */
.sc-xl>*+*{margin-top: var(--xl)}/* 37px */
.sc-2xl>*+*{margin-top: var(--2xl)}/* 42px */
.sc-3xl>*+*{margin-top: var(--3xl)}/* 48px */
.sc-4xl>*+*{margin-top: var(--4xl)}/* 56px */
.sc-5xl>*+*{margin-top: var(--5xl)}/* 56px */
.mt-2xs{margin-top: var(--2xs)}/* 32px */
.mt-xs{margin-top: var(--xs)}/* 32px */
.mt-sm{margin-top: var(--sm)}/* 32px */
.mt-bs{margin-top: var(--bs)}/* 32px */
.mt-lg{margin-top: var(--lg)}/* 35px */
.mt-xl{margin-top: var(--xl)}/* 37px */
.mt-2xl{margin-top: var(--2xl)}/* 42px */
.mt-3xl{margin-top: var(--3xl)}/* 48px */
.mt-4xl{margin-top: var(--4xl)}/* 56px */
.mt-5xl{margin-top: var(--5xl)}/* 60px */
.my-bs{padding-top: var(--bs);padding-bottom: var(--bs)}/* 32px */
.my-lg{padding-top: var(--lg);padding-bottom: var(--lg)}/* 35px */
.my-xl{padding-top: var(--xl);padding-bottom: var(--xl)}/* 37px */
.my-2xl{padding-top: var(--2xl);padding-bottom: var(--2xl)}/* 42px */
.my-3xl{padding-top: var(--3xl);padding-bottom: var(--3xl)}/* 48px */
.my-4xl{padding-top: var(--4xl);padding-bottom: var(--4xl)}/* 56px */
.my-5xl{padding-top: var(--5xl);padding-bottom: var(--5xl)}/* 60px */
.hidden{display: none}
@media screen and (min-width:767px) {
.pc\:hidden{display: none!important}
.pc\:flex{display: flex;}
}
@media screen and (max-width:768px) {
.sp\:hidden{display: none!important}
}
/*flex*/
.flex{display: flex}
.jc-c{justify-content: center}
.ai-c{align-items: center}
.fxd-rr{flex-direction: row-reverse}
.fxw-w{flex-wrap:wrap}
.fx>*{flex:1}
.fx2{flex:2}
.fx3{flex:3}
.fx4{flex:4}
.fx5{flex:5}
.fx6{flex:6}
/* gap */
.gap-bs{gap:var(--bs)}
.gap-lg{gap:var(--lg)}
.gap-xl{gap:var(--xl)}
.gap-2xl{gap:var(--2xl)}
.gap-3xl{gap:var(--3xl)}
.gap-4xl{gap:var(--4xl)}
/* font-weight */
.fw-n{font-weight: normal}
.fw-b{font-weight: bold}
.fw-br{font-weight: bolder}
.fw-lr{font-weight: lighter}
.mv{
background: #e8eae9;
}
.mv-img{
max-height: 100vh;
max-width: 1000px;
margin: auto;
display: block;
}
/* section */
.sec01 h2{
line-height: 1.4;
}
.un_intro_mov {
position: relative
}
@media(max-width: 1419px) {
.un_intro_mov {
width: 100%
}
}
.un_intro_mov div {
position: relative;
width: 100%;
padding-bottom: 56.25%
}
.un_intro_mov div iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.un_mov {
background-color: #e5e5e5;
position: relative;
padding: 130px 0 180px
}
@media(max-width: 767px) {
.un_mov {
padding: 65px 0 85px
}
}
.un_mov::before {
content: "";
left: 0;
top: -100px;
width: 520px;
height: 100px;
display: block;
background-color: #e5e5e5;
position: absolute
}
@media(max-width: 767px) {
.un_mov::before {
width: 178px;
height: 32px;
top: -31px;
left: auto;
right: 0
}
}
.un_mov_wrap {
max-width: 1052px;
width: 100%;
margin: 0 auto
}
.un_mov_contents {
width: 100%;
position: relative
}
.un_mov_contents div {
position: relative;
width: 100%;
padding-bottom: 56.25%
}
.un_mov_contents div iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.bl_movthumb {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block
}
.bl_movthumb_wrap {
position: relative;
width: 100%;
height: 100%;
display: block
}
.bl_movthumb_img {
position: absolute;
background-size: cover;
background-repeat: no-repeat;
background-position: right center;
width: 100%;
height: 100%;
display: block
}
.bl_movthumb_img-01 {
background-image: url("/img/b/event/v03sp/2025/mov_thumb01.jpg")
}
.bl_movthumb_img-02 {
background-image: url("/img/b/event/v03sp/2025/mov_thumb02.jpg")
}
.bl_movthumb_btn {
width: 162px;
height: 162px;
background-color: rgba(180, 177, 177, .57);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
border-radius: 50%;
display: block;
cursor: pointer;
transition: .3s opacity ease;
background-image: url("/img/b/event/v03sp/2025/mov_arrow.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center
}
.bl_movthumb_btn:hover {
opacity: .7 !important
}
@media(max-width: 767px) {
.bl_movthumb_btn {
width: 51px;
height: 51px
}
}
/* sec02 */
.h2-ttl{
font-family: 'Lato', sans-serif;
font-size: clamp(25px, calc(40 / 850 * 100vw), 40px);
border-bottom: 0.075em solid #282828;
text-align: center;
display: table;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.lead{
text-align: center;
font-size: var(--2xl);
font-weight: bold;
}
/* sec03 */
.list {
list-style: disc inside;
margin: 0;
padding: 0;
font-size: var(--xl);
}
.toggle-block {
margin-bottom: 2em;
}
.toggle-content {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.5s ease, opacity 0.5s ease;
margin-bottom: var(--5xl);
}
.toggle-inner {
background: #fff;
border-radius: .25em;
margin-bottom: var(--5xl);
}
.toggle-content.open {
opacity: 1;
}
.toggle-item {
padding: 2em;
}
.toggle-item h3 {
font-size: var(--2xl);
}
.toggle-btn {
display: table;
min-width: 313px;
padding: 1em 3em;
border: 2px solid #000;
border-radius: 3em;
font-size: var(--bs);
background: #fff;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease;
margin-left: auto;
margin-right: auto;
position: relative;
}
.toggle-btn:hover {
opacity: .7;
}
.toggle-btn::after {
content: "";
width: 13px;
height: 9px;
display: block;
background: url(/img/b/event/v03sp/2025/arrow-down.png)no-repeat;
background-size: contain;
position: absolute;
right: 1em;
top: 50%;
transform: translateY(-50%);
}
.open+.toggle-btn::after {
background: url(/img/b/event/v03sp/2025/arrow-up.png)no-repeat;
background-size: contain;
}
/* sec04 */
.sec04-img-c{
margin: 3em auto 2em;
text-align: center;
}
.sec04 .toggle-block{
position: relative;
}
.sec04 .toggle-inner{
margin: 2em 0;
}
.sec04 .toggle-inner::after{
content: "";
position: absolute;
background: #F1F1F1;
height: 102%;
width: 100vw;
left: 50%;
transform: translateX(-50%);
top: 0;
z-index: -1;
}
.sec04 h3{
margin: 20px 0;
font-size: var(--lg);
line-height: 42px;
margin: -6px 0 1.5em;
border-bottom: 1px dotted;
}
.sec04 h3+p{
font-weight: bold;
font-size: var(--sm);
}
.bodytype{
display: flex;
gap: 1.5em;
margin-top: 2em;
}
.bodytype > *{
flex: 1;
}
.bodytype h4{
font-size: var(--sm);
text-align: center;
margin-bottom: .5em;
}
.bodytype p{
font-size: var(--2xs);
}
.modal-wrap{
text-align: right;
margin-top: 1em;
}
.bodycolor-inner,
.fabric-inner{
display: flex;
gap: 2em;
}
.bodycolor-txt,
.fabric-txt{
flex: 1;
}
.bodycolor-txt,
.fabric-txt{
flex: 1;
}
.bodycolor-img,
.fabric-img{
flex: 1.5;
}
.fabric-ttl{
max-width: 270px;
}
.fabric-ttl03{
font-weight: bold;
margin-top: 4em;
}
.fabric-img2{
max-width: 333px;
width: -webkit-fill-available;
}
/* sec05 */
.sec05 .ly_container{
border-top: 1px solid ;
}
/* anchor */
.anchor{
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 90px;
}
.anchor a{
padding: 1em;
border: 2px solid #282828;
width: calc(100% / 3 - 12px);
text-align: center;
font-weight: bold;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--sm);
}
.anchor_arrow{
position: absolute;
right: 1em;
top: 50%;
transform: translateY(-50%);
line-height: 0;
width: 12px;
}
.anchor_arrow img{
vertical-align: middle;
}
.sec05 h2{
margin-top: 1.5em;
margin-bottom: 1em;
}
.h3-ttl{
font-size: var(--5xl);
text-align: center;
padding: 0 0 .25em;
border-bottom: 0.075em solid #282828;
display: table;
margin-left: auto;
margin-right: auto;
}
/* product */
#anchor01 .product-list {
display: flex;
justify-content: center;
gap: 1.5em;
margin-bottom: 2em;
}
.product-card {
background: #fff;
}
#anchor01 .product-card {
flex:1
}
.product-card img {
width: 100%;
height: auto;
}
select {
margin:1em 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #fff;
border: 1px solid #AFAFAF;
padding: 1em 1.5em 1em 1em;
font-size: var(--sm);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.573' height='17.777' viewBox='0 0 25.573 17.777'%3E%3Cpath d='M0,0,10.812,13.274,21.355,0' transform='translate(2.11 2.11)' fill='none' stroke='%23afafaf' stroke-linecap='round' stroke-width='3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 8px;
width: 100%;
box-sizing: border-box;
}
.info {
font-size: var(--2xs);
color: #121212;
text-decoration: underline;
padding: .5em 1em .5em 1.25em;
cursor: pointer;
position: relative;
display: inline-block;
cursor: pointer;
}
.info::after,
.info::before {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.info::before {
width: var(--xs);
height: var(--xs);
left: 0;
background: url(/img/b/event/v03sp/2025/question.png)no-repeat;
background-size: contain;
}
.info::after {
right: 0;
width: 5px;
height: 7px;
background: url(/img/b/event/v03sp/2025/arrow-right.png)no-repeat;
background-size: contain;
}
.btn+.info{
display: block;
margin-left: auto;
margin-right: 0;
width: fit-content;
}
.price {
font-weight: bold;
font-size: var(--lg);
}
.note {
font-size: var(--2xs);
color: #121212;
}
.btn {
display: inline-block;
background: #282828;
text-align: center;
color: #fff;
padding: .75em 1em;
margin-top: 10px;
font-weight: bold;
width: 100%;
position: relative;
font-size: var(--sm);
}
.btn::after {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: url(/img/b/event/v03sp/2025/arrow-right-wt.png)no-repeat;
background-size: contain;
width: 6.5px;
height: 10.5px;
right: 1em;
}
.more-link {
text-align: center;
margin-top: 30px;
}
.more-link a {
display: inline-block;
padding: 1em 2em;
border: 3px solid #121212;
text-decoration: none;
color: #121212;
font-weight: bold;
position: relative;
}
.more-link a::after {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: url(/img/b/event/v03sp/2025/arrow-right.png)no-repeat;
background-size: contain;
width: 6.5px;
height: 10.5px;
right: 1em;
}
@media screen and (min-width:767px) {
.slider-container{
width: 100vw
}
.bx-viewport{
overflow: inherit!important;
}
}
.slider-item .product-card{
border: 2px solid #BAB8B8;
padding: 1em;
margin-left: 1px;
}
.slider-item select{
margin-bottom: .5em;
}
.slider-item-img{
margin-bottom: 1em;
}
.slider-img{
/*height: 400px;*/
height: auto;
width: auto;
margin: 0 auto 1em;
display: block;
}
.slider-img img{
/* height: 100%;*/
height: auto;
width:auto;
margin: auto;
display: block;
}
@media screen and (max-width:768px) {
.bx-wrapper {
max-width: 100% !important;
margin: 0 auto !important;
}
.bx-viewport {
overflow: inherit !important;
height: auto !important;
display: inline-block;
}
.slider-track {
margin: 0 auto;
padding: 0;
}
}
.slider-track.product-list{
gap: 0;
}
.slider-wrap{
position: relative;
margin-top: 4em;
}
.bx-controls{
position: absolute;
top: -2em;
right: 0
}
#anchor03 .bx-controls{
top: -3em;
}
.bx-prev,.bx-next{
border: 2px solid #B5B1B1;
width: 2em;
height: 2em;
display: inline-block;
text-align: center;
color: #B5B1B1;
background: #fff;
margin-right: .25em;
}
.slider-no{
font-family: 'Oswald', sans-serif;
font-size: clamp(25px, calc(45 / 850 * 100vw), 45px);
}
.product-card{
position: relative;
}
.rank-no{
position: absolute;
top: -.5em;
font-family: 'Oswald', sans-serif;
font-size: clamp(30px, calc(30 / 850 * 100vw), 30px);
z-index: 1;
}
.rank-no::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
width: 1.5em;
height: 1.5em;
text-align: center;
vertical-align: middle;
z-index: -1;
}
.rank01::after{
background: #E7DE5D;
}
.rank02::after{
background: #CDE8ED;
}
.rank03::after{
background: #FADEB3;
}
.rank04::after{
background: #FAB3BD;
}
.rank05::after{
background: #B3BEFA;
}
#anchor03 .product-list{
gap: 4em 1.5em;
}
/* 繝｢繝ｼ繝繝ｫ蜈ｨ菴� */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.7);
}
/* 繝｢繝ｼ繝繝ｫ繧ｳ繝ｳ繝�Φ繝� */
.modal-content {
background-color: #fff;
margin: 5% auto;
padding: 1em;
border-radius: 8px;
display: inline-block;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.modal-content img{
height: auto;
display: block;
margin: auto;
}
/* 髢峨§繧九�繧ｿ繝ｳ */
.close-btn {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 2em;
}
.button-area {
margin: 10px 0;
}
.za_contents_ .right_ .midashi_{font-size: var(--bs);font-weight:bold;padding-bottom: .25em;}
.za_contents_ .right_ a{text-decoration:underline!important;}
.za_contents_{width: 100%;outline: solid 1px;margin: 70px auto 0;padding: 30px;}
.za_contents_ .right_ p{margin-bottom:0!important;line-height: 1.6em;font-size: var(--xs);}
.za_contents_ .right_ .small_{font-size:90%;}
#reserve_btn a {color: #fff !important;border-radius: 3px;}
#reserve_btn {margin-top: 1em;font-size: 16px;color: #fff !important;line-height: 1;background-color: #575757 !important;
display: flex;position: relative;justify-content: center;align-items: center;height: 67px;width: 100%;padding-right: 22px;
border-radius: 3px;font-weight: 700;transition: .3s opacity ease}
#reserve_btn::after {content: "";display: block;background-size: contain;background-repeat: no-repeat;
background-position: center center;background-image: url("/img/b/event/v03sp/2025/icon_arrow.png");
width: 10px;height: 12px;position: absolute;top: 0;bottom: 0;right: 30px;margin: auto;}
#reserve_btn a {display: flex;justify-content: center;align-items: center;width: 100%;
height: 100%;text-decoration:none!important;}
#reserve_btn a:hover {background-color: #575757 !important;}
#reserve_btn:hover {opacity: .7}
@media (min-width: 768px){
.za_contents_{width: 100%;outline: solid 1px;margin: 70px auto 0;padding: 1.5em;}
.za_contents_{display: flex;line-height: 1.7em;gap: 1.5em;}
.za_contents_ .left_{margin: auto;padding: 0;}
.za_contents_ .left_ img{width:330px;}
.za_contents_ .right_{margin:0 auto 0 !important;width:65%;}
.sponly_{display:none;}
}
@media (max-width: 767px){
.za_contents_{width: 100%;outline: solid 1px;margin: 40px auto 0;padding: 15px;}
.za_contents_ .left_{margin-bottom: 15px;text-align: center;margin-top:10px;}
.za_contents_ .right_{max-width: 100%;margin: 0 auto 10px;}
.za_contents_ .right_ .midashi_{text-align:center;margin-bottom:0!important;}
#reserve_btn {font-size: 1.2em!important;padding-right: 14px;height: 60px;border-radius: 5px;}
#reserve_btn:hover {font-size: 1.2em!important;border-radius: 5px;}
#reserve_btn::after {width: 5px;height: 6px;right: 14px}
.pconly_{display:none;}
}
.sec6{
background: #F1F1F1;
text-align: center;
padding: 2.5em;
}
.sec6 div>img{
max-width: 250px;
}
.sec6 a{
display: block;
max-width: 337px;
margin: 1em auto 0;
}
sup{
font-size: .5em;
vertical-align: super;
}
.bnr-txt{
font-size: var(--lg);
font-weight: bold;
text-align: center;
}
@media screen and (max-width:768px) {
body{
min-width: auto;
}
.ly_header_logo span{
max-width: 100%;
}
.ly_header_logo span img{
max-width: 140px;
padding:.75em 1.25em;
}
.ly_container {
padding-left: 1.25em;
padding-right: 1.25em;
max-width: 500px;
box-sizing: border-box;
}
.h2-ttl {
font-size: clamp(25px, calc(27.5 / 375 * 100vw), 27.5px);
letter-spacing: -0.05em;
}
.list{
max-width: 260px;
margin: auto;
}
.toggle-btn {
min-width: 260px;
padding: 1em 3em;
border: 3px solid #000;
border-radius: 3em;
font-size: var(--xl);
cursor: pointer;
color:#000
}
.toggle-content{
margin-bottom: var(--2xl);
}
.toggle-btn::after {
width: 15px;
height: 10px;
background-size: contain;
}
.open+.toggle-btn::after {
background-size: contain;
}
.toggle-item h3 {
margin-bottom: .5em;
text-align: center;
}
.sec04 h3 {
font-size: var(--2xl);
}
.bodytype{
display: block;
}
.info {
font-weight: bold;
padding: .5em 1.5em .5em 1.5em;
display: block;
margin-left: auto;
margin-right: 0;
width: fit-content;
}
.bodycolor-inner, .fabric-inner {
display: block;
}
.bodycolor,
.fabric{
margin-top: 5em;
}
.bodycolor-img,
.fabric-img{
margin-top: .5em;
}
.fabric-ttl,
.fabric-ttl02 {
width: 100%;
max-width: 500px;
}
.sec04 .toggle-inner::after{
height: 101%;
}
.anchor a{
width: calc(100% / 2 - 8px);
}
.anchor_arrow{
width: 10px;
right: .5em;
}
.anchor_txt{
font-size: var(--2xs);
font-weight: bold;
}
#anchor01 .product-list{
display: block;
}
.product-wrap{
margin: 0 2.5em;
}
.product-card+.product-card{
margin-top: 3em;
}
.more-link a::after,
.btn::after{
width: 10px;
height: 14px;
right: .5em;
}
.more-link a{
padding: 1.5em;
width: 100%;
}
.btn{
padding: 1.5em;
}
.info::after{
width: 8px;
height: 11px;
}
select{
background-size: 13px;
color: #000;
}
.more-link{
margin-top: 1em;
}
.sec05 .product-list{
margin-bottom: 1.5em;
}
.slider-no{
font-size: clamp(30px, calc(40 / 375 * 100vw), 40px);
}
.bx-prev, .bx-next{
font-size: 1.5em;
}
.bx-controls{
top: 1em;
}
.slider-wrap{
margin-top: 1em;
}
#anchor03 .slider-wrap{
margin-top: 3em;
}
.slider-item .product-card{
padding: 1.5em;
}
.rank45{
display: flex;
gap: 1.5em;
margin-top: 3em;
}
.rank45 .product-card+.product-card{
margin-top: 0;
}
.rank45 .btn{
padding: 1em;
}
.rank45 .btn::after {
width: 8px;
height: 10px;
}
.rank45 .rank-img {
margin-top: 1.5em;
}
#anchor01 .product-card>img{
width: 90%;
margin: 0 auto 1em;
display: block;
}
#anchor01 .product-list,
#anchor01 .more-link{
margin: 2em;
}
#anchor03 .product-list{
margin: 2em 0;
}
.sec6{
padding: 2.5em 0;
}
.designer{
position: relative;
margin: 4em 0;
}
.designer::after{
content: "";
position: absolute;
width: 100vw;
height: calc(100% + 4em);
background: #F1F1F1;
left: 50%;
transform: translateX(-50%);
top: -2em;
z-index: -1;
}
.modal-content{
width: 90%;
top: 10%;
}
.sec02{
margin-bottom: var(--5xl);
}
.sec02-img{
margin: 0 2em 1em;
}
.rank-img{
width: 90%;
text-align: center;
margin: 0 auto 1em;
}
.rank-no{
font-size: clamp(40px, calc(45 / 850 * 100vw), 45px);
}
}
.fixed-button {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
width: 100%;
background: #ffffffa3;
}
.fixed-button a{
max-width: 300px;
display: block;
margin: 1.5em auto;
}
.fixed-button.show {
opacity: 1;
pointer-events: auto;
}
@media screen and (min-width:767px) {
.fixed-button a{
max-width: 300px;
margin: 1em auto;
}
.no_info_{
margin-top: 53px;
}
}
.slider-wrap .scroll-annotation {
display: flex;
align-items: flex-end;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 140px;
height: 100px;
padding: 10px;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.5);
background-image: url("/img/b/event/v03sp/2025/icon_tbl_scroll.png");
background-position: center top 16px;
background-repeat: no-repeat;
background-size: 33px 46px;
color: #ffffff;
font-size: calc((11 / 375) * 100vw);
font-weight: 700;
text-align: center;
pointer-events: none;
}
@media screen and (min-width:767px) {
.slider-wrap .scroll-annotation {
display: none;
}
}