/* =====================================
ACCESS
===================================== */

.page-access{

overflow:hidden;

position:relative;

counter-reset:step;

}


/* =========================
STEP
========================= */

.page-access .access-step{

position:relative;

}

.page-access .access-step:last-of-type{

margin-bottom:40px;

}

.page-access .content{

display:grid;

grid-template-columns:

minmax(0,.9fr)
minmax(560px,1.1fr);

gap:70px;

align-items:center;

padding:70px 0;

position:relative;

}


/* 上ライン */

.page-access .content:before{

content:"";

position:absolute;

top:0;

left:50%;

transform:translateX(-50%);

width:120px;
height:1px;

background:

linear-gradient(
90deg,

transparent,

rgba(188,158,120,.9),

transparent

);

}


/* =========================
TEXT
========================= */

.page-access .content-access{

display:flex;

align-items:center;

height:100%;

}


.page-access .access-text{

max-width:560px;

}


.page-access .access-text h2{

display:block;

font-size:14px;

letter-spacing:.24em;

line-height:1.8;

color:var(--accent);

margin-bottom:25px;

position:relative;

padding-left:65px;

font-family:
BrilliantCutProMedium;

}


.page-access .access-text h2:before{

content:"";

position:absolute;

left:0;
top:50%;

width:30px;
height:1px;

background:var(--accent);

}


.page-access .access-text h2:after{

content:counter(step);

counter-increment:step;

position:absolute;

left:40px;

top:50%;

transform:translateY(-50%);

font-size:11px;

font-family:
Cormorant Garamond;

opacity:.6;

}


.page-access .access-text p{

font-size:14px;

line-height:2.4;

color:#555;

margin-bottom:10px;

}


/* =========================
IMAGE
========================= */

.page-access .access-image{

position:relative;

overflow:hidden;

}


.page-access .access-image img{

width:100%;

aspect-ratio:16/10;

object-fit:cover;

transition:
transform 1.8s cubic-bezier(.19,1,.22,1);

}


.page-access .access-step:hover
.access-image img{

transform:scale(1.05);

}


.page-access .access-image:after{

content:"";

position:absolute;

top:20px;
left:20px;

width:100%;
height:100%;

border:

1px solid
rgba(
188,
158,
120,
.3
);

pointer-events:none;

}



/* =========================
迷った時
========================= */

.page-access .access-info{

max-width:980px;

margin:100px auto 0;

padding:70px 0;

position:relative;

text-align:center;

isolation:isolate;

}


/* blur背景 */

.page-access .access-info:before{

content:"";

position:absolute;

inset:-40px;

z-index:-1;

background:

linear-gradient(

90deg,

transparent,

rgba(250,249,247,.92) 18%,

rgba(250,249,247,.92) 82%,

transparent

);

filter:blur(26px);

}


/* 上ライン */

.page-access .access-info:after{

content:"";

position:absolute;

top:0;

left:50%;

transform:
translateX(-50%);

width:70px;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(188,158,120,.8),

transparent

);

}


.page-access .access-info h2{

display:block;

font-size:11px;

letter-spacing:.4em;

text-transform:uppercase;

font-family:
BrilliantCutProMedium;

color:var(--accent);

margin-bottom:25px;

}


.page-access .access-info .copy{

font-family:
'Cormorant Garamond',
serif;

font-size:
clamp(
24px,
2vw,
36px
);

line-height:1.8;

font-weight:400;

margin-bottom:50px;

}


.page-access .access-info .copy a{

color:#111;

border-bottom:

1px solid
rgba(
188,
158,
120,
.3
);

padding-bottom:4px;

}


/* 動画 */

.page-access .section-video{

overflow:hidden;

margin-top:50px;

}


.page-access .section-video video{

display:block;

width:100%;

border-radius:2px;

}



/* =========================
決済
========================= */

.page-access .payment-info{

max-width:900px;

margin:100px auto 0;

padding:100px 80px;

text-align:center;

position:relative;

isolation:isolate;

}


/* blur */

.page-access .payment-info:before{

content:"";

position:absolute;

inset:-35px;

z-index:-1;

background:

linear-gradient(

90deg,

transparent,

rgba(250,249,247,.92) 18%,

rgba(250,249,247,.92) 82%,

transparent

);

filter:blur(24px);

}


/* 上線 */

.page-access .payment-info:after{

content:"";

position:absolute;

top:0;

left:50%;

transform:
translateX(-50%);

width:70px;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(188,158,120,.8),

transparent

);

}


.page-access .payment-info h2{

display:block;

font-size:11px;

letter-spacing:.4em;

text-transform:uppercase;

font-family:
BrilliantCutProMedium;

color:var(--accent);

margin-bottom:20px;

}


.page-access .payment-info .copy{

font-family:
'Cormorant Garamond',
serif;

font-size:
clamp(
22px,
2vw,
32px
);

font-weight:400;

line-height:1.8;

margin-bottom:20px;

}


.page-access .payment-info p{

font-size:11px;

letter-spacing:.35em;

color:#888;

margin-bottom:50px;

}


.page-access .payment-icons{

display:flex;

justify-content:center;

align-items:center;

gap:35px;

flex-wrap:wrap;

}


.page-access .payment-icons img{

height:28px;

opacity:.82;

transition:.5s;

}


.page-access .payment-icons img:hover{

opacity:1;

transform:
translateY(-4px);

}



/* =========================
SP
========================= */

@media(max-width:768px){

.page-access .content{

grid-template-columns:1fr;

gap:40px;

padding:70px 0;

}


.page-access .access-image{

order:1;

}


.page-access .content-access{

order:2;

}


.page-access .access-image:after{

top:10px;
left:10px;

}


.page-access .access-text h2{

padding-left:55px;

}


.page-access .access-info,
.page-access .payment-info{

margin-top:70px;

padding:30px 0;

}


.page-access .access-info .copy{

font-size:22px;

}


.page-access .payment-info .copy{

font-size:20px;

}


.page-access .payment-icons{

gap:20px;

}


.page-access .payment-icons img{

height:22px;

}

}