/* -------------------------------
レイアウト
--------------------------------- */
.hero{
padding:14rem 0 10rem 0;
}

.hero-grid{
display:grid;
grid-template-columns:minmax(0, 2fr) minmax(300px, 1fr);
gap:4rem;
align-items:start;
}

.hero-grid__left,
.hero-grid__right{
display:flex;
flex-direction:column;
}


/* -------------------------------
画像（スライド）
--------------------------------- */
.hero .ui-slider{
--slider-columns:1;
--slider-gap:2rem;
}


/* -------------------------------
商品説明
--------------------------------- */
.hero-info{
padding:4rem 2rem;
background:var(--bg2);
border-radius:.5rem;
width:100%;
}

.hero-info__label{
margin:0 0 1rem;
font-family:"mincho", serif;
font-size:1.4rem;
letter-spacing:.3rem;
color:var(--color-gray3);
}

.hero-info__title strong{
display:block;
margin:0 0 2rem 0;
font-family:"mincho", serif;
font-size:3.2rem;
line-height:1.35;
font-weight:400;
}

.hero-info__title small{
display:block;
margin:0 0 2rem 0;
font-family:"mincho", serif;
font-size:1.8rem;
color:var(--color-gray3);
font-weight:400;
}

.hero-info__lead{
font-family:"mincho", serif;
margin:0 0 2.5rem;
line-height:1.85;
}

.hero-info__price{
font-family:"number", serif;
padding:1rem 0 0 0;
border-top:1px solid var(--color-line2);
text-align:right;
}

.hero-info__price strong{
display:block;
font-size:3.2rem;
line-height:1.2;
font-weight:500;
padding:0 1rem 0 0;
letter-spacing:0.08rem;
}

.hero-info__price small{
font-size:2rem;
}

.hero-info__price span{
font-size:2rem;
padding:.7rem 0 0 0;
letter-spacing:0.08rem;
line-height:1;
}


@media (max-width:800px) {
.hero-info__title strong{
font-size:2.3rem;
margin:0 0 1.5rem 0;
}

}

/* --------------------------------
送料
---------------------------------- */
.hero-shipping{
width:100%;
padding:2rem 0 0 0;
}

/* --------------------------------
納期
---------------------------------- */
.hero-delivery{
width:100%;
padding:2rem 0 0 0;
}

/* --------------------------------
キャンペーン
---------------------------------- */
.hero-campaign {
width:100%;
padding:10rem 0 0 0;
}

/* --------------------------------
 注文する
---------------------------------- */
.hero-button{
max-width:800px;
padding:6rem 0 0 0;
margin:0 auto;
}


/* -------------------------------
レイアウト
--------------------------------- */
/* SP */
@container(max-width:1000px){

.hero-grid{
display:flex;
flex-direction:column;
gap:0;
}

/* leftだけ解除 */
.hero-grid__left{
display:contents;
}

/* 商品情報エリア */
.hero-grid__right{
order:2;
display:grid;
grid-template-columns:minmax(0, 2fr) minmax(360px, 1fr);
gap:2rem;
width:100%;
align-items:stretch;
}

.hero-info__left{
display:flex;
min-width:0;
padding-top:2rem;
}

.hero-info{
width:100%;
height:100%;
}

.hero-info__right{
min-width:0;
display:flex;
flex-direction:column;
gap:0;
}

.hero-shipping,
.hero-delivery{
width:100%;
}

.hero-image{
order:1;
}

.hero-campaign{
order:3;
display:none;
}

.hero-button{
order:4;
}

}


/* SP */
@container(max-width:800px){
.hero{
padding:14rem 0 3rem 0;
}

.hero-grid__right{
display:flex;
flex-direction:column;
width:100%;
gap:0;
}

.hero-info__left,
.hero-info__right{
display:flex;
flex-direction:column;
width:100%;
}

.hero-info{
width:100%;
height:auto;
}

.hero-shipping,
.hero-delivery{
width:100%;
height:auto;
}

.hero-button{
padding:2rem 0 0 0;
}

}


/* SP */
@container(max-width:600px){
.hero .section-container{
padding:0;
}

.hero-info__left{
padding:2rem 2rem 0 2rem;
}

.hero-info__right{
padding:0 2rem;
}

.hero-info{
padding:4rem 1rem;
}

.hero-button{
padding:2rem;
}

}