/* --------------------------------
アンカー
-------------------------------- */
[id]{
scroll-margin-top:-5rem;
}


/* --------------------------------
ページバック・ヘッダー消す
-------------------------------- */
body.order-panel-open .page-back{
transform: translateX(calc(-100% - 30px));
pointer-events:none;
}

body.order-panel-open .header-fixed{
transform:translateY(-11rem);
pointer-events:none;
}


/* --------------------------------
オーダーパネル：共通
-------------------------------- */
.order-panel{
position:fixed;
z-index:1000;
display:flex;
flex-direction:column;
min-height:0;
background:var(--bg2);
}

main{
position:relative;
container-type:inline-size;
width:100%;
transition:width .4s ease;
}


/* グレートーン　オーダーパネル表示中 */
body.order-panel-open main::after{
content:"";
position:fixed;
inset:0;
z-index:900;
background:rgba(0,0,0,.1);
pointer-events:none;
opacity:1;
transition:opacity .2s ease;
}

/* ページをタッチ・クリックしている間は暗幕を消す */
body.order-panel-open main:active::after{
opacity:0;
}


/* --------------------------------
PC：右から表示
-------------------------------- */
@media (min-width:801px){

:root{
--order-panel-width:36rem;
}

body.order-panel-open main{
width:calc(100% - var(--order-panel-width));
}

.order-panel{
top:0;
right:0;
width:var(--order-panel-width);
height:100dvh;
transform:translateX(100%);
transition:transform .4s ease;
border-left:1px solid var(--color-line2);
}

body.order-panel-open .order-panel{
transform:translateX(0);
}

}


/* --------------------------------
SP：下から表示
-------------------------------- */
@media (max-width:800px){

.order-panel{
top:auto;
right:auto;
left:0;
bottom:0;
width:100%;
height:100dvh;
min-height:30dvh;
max-height:100dvh;
transform:translateY(100%);
box-shadow:0 -8px 30px rgba(0,0,0,.2);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
    height .35s ease,
    transform .5s ease,
    opacity .3s ease,
    visibility .4s;
}

body.order-panel-open .order-panel{
transform:translateY(0);
opacity:1;
visibility:visible;
pointer-events:auto;
}

}



/* --------------------------------
パネル上部：ヘッダー
-------------------------------- */
.order-panel__header{
position:relative;
z-index:1;
height:0;
}


/* ドラッグバー */
@media (max-width:800px){
.order-panel__header{
width:100%;
height:3rem;
flex:0 0 auto;
cursor:ns-resize;
background:var(--color-gray1);
}

.order-panel__header::before{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:5rem;
height:.4rem;
background:var(--color-gray4);
border-radius:10rem;
}

.order-panel.is-dragging{
transition:none;
}

}


/* ドラッグ専用領域 */
.order-panel__header{
touch-action:none;
user-select:none;
-webkit-user-select:none;
}

/* 見た目だけなのでタッチを奪わない */
.order-panel__header::before{
pointer-events:none;
}

/* パネル本文 */
.order-panel__body{
touch-action:pan-y;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}

/* ドラッグ中 */
.order-panel.is-dragging{
transition:none;
}

/* --------------------------------
閉じるボタン
-------------------------------- */
.order-panel__close{
position:absolute;
bottom:-6rem;
right: 1.5rem;
width: 4.5rem;
height: 4.5rem;
background:rgba(255,255,255,.6);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
box-shadow:0 4px 20px rgba(0,0,0,.12);
border-radius: 50%;
cursor: pointer;
display:flex;
align-items:center;
justify-content:center;
transition:
opacity .3s ease,
transform .3s ease,
visibility .3s;
}

.order-panel__close:hover {
transform:scale(1.1);
}

/* × */
.order-panel__close::before,
.order-panel__close::after{
content:"";
position:absolute;
top:50%;
left:50%;
width: 1.6rem;
height:1.6px;
background:var(--color-gray1);
}

.order-panel__close::before{
transform:translate(-50%, -50%) rotate(45deg);
}

.order-panel__close::after{
transform:translate(-50%, -50%) rotate(-45deg);
}



/* --------------------------------
フォーム全体
-------------------------------- */
.order-panel > form{
display:flex;
flex-direction:column;
flex:1 1 auto;
min-height:0;
}


/* --------------------------------
スクロール領域
-------------------------------- */
.order-panel__scroll{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
position:relative;

/* スクロールバー非表示 */
scrollbar-width:none;
-ms-overflow-style:none;
}

.order-panel__scroll::-webkit-scrollbar{
display:none;
}


/* --------------------------------
フォーム本文
-------------------------------- */
.order-panel__body{
padding:0;
margin:0 auto;
}

/* TB */
@media(max-width:800px) and (min-width:501px){
.order-panel__body{
padding:2rem 4rem;
}
}


/* -------------------------------
ステップ
------------------------------- */
.order-product__form{
}

.order-step{
margin-bottom:5rem;
}

.order-step__caption{
padding:1rem 2rem;
border-bottom:1px var(--color-line2) solid;
background:var(--bg3);
font-size:1.8rem;
font-family:"mincho", serif;
}

.order-step__body{
padding:0 2rem ;
border:0px #FF0000 solid;
}

.order-step__body label{
display:block;
}

.order-step__body label span{
display:block;
margin:2rem 0 1rem 0;
font-family:"mincho", serif;

}

.order-step__note{
margin:1rem 0 0;
font-size:1.3rem;
line-height:1.6;
color:var(--color-gray3);
}

.order-step__note span{
display:block;
position:relative;
white-space:normal;
padding:0 0 .7rem 1.3em;
}

.order-step__note span::before{
content:"※";
position:absolute;
left:0;
top:0;
}


@media(max-width:800px){
.order-step__note{
font-size:1.4rem;
line-height:1.6;
}
}

/* -------------------------------
個数
------------------------------- */
.qty{
display:flex;
justify-content:flex-end;
font-size:1.8rem;
padding:0 2rem;
}

.qty span{
padding-right:1rem;
}

.qty select{
width:10rem;
height:5rem;
padding:0 1.4rem;
border:1px solid var(--color-line3);
border-radius:.8rem;
background:#FFF;
font-size:1.5rem;
}

/* --------------------------------
フォーム下部
-------------------------------- */
.order-panel__footer{
position:static;
flex:0 0 auto;
width:100%;
padding:2rem;
padding-bottom:max(2rem, env(safe-area-inset-bottom));
background:var(--bg2);
}

.order-panel__footer button{
padding:2rem;
}

@media(max-width:800px){
.order-panel__footer button{
padding:1.5rem;
}
}