/* ======================================================
ABOUT PAGE
====================================================== */

.page-about .section-sub{
  padding:10px 0;
}

.page-about{
  overflow:hidden;
}


.page-about .content{

display:grid;

grid-template-columns:

minmax(0,0.9fr)

minmax(560px,1.1fr);

gap:70px;

align-items:center;

padding:70px 0;

}

.page-about .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
  );
}

/* 偶数反転 */

.page-about .section-sub:nth-of-type(even) .left{
  order:2;
}

.page-about .section-sub:nth-of-type(even) .right{
  order:1;
}


/* =========================
Text
========================= */

.content-about{

display:grid;

grid-template-rows:
1fr auto;

height:100%;

}


.text-area h2{

font-size:14px;

letter-spacing:.24em;

color:var(--accent);

margin-bottom:20px;

position:relative;

padding-left:40px;

}


.text-area h2::before{

content:"";

position:absolute;

left:0;
top:50%;

width:28px;
height:1px;

background:var(--accent);

}


.text-area h3{

font-size:34px;

line-height:1.5;

margin-bottom:30px;

font-family:
'Cormorant Garamond',
serif;

}


.text-area p{

font-size:14px;

line-height:2.4;

color:#555;

max-width:560px;

}


/* =========================
Image
========================= */

.right{

position:relative;
overflow:hidden;

transform:translateZ(0);

}

.right img{

width:100%;
aspect-ratio:16/10;

object-fit:cover;

will-change:transform;

backface-visibility:hidden;

transform:scale(1);

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

}


.content:hover .right img{

transform:
scale(1.05)
translateZ(0);

}


/* 外枠 */

.right::after{

content:"";

position:absolute;

top:20px;
left:20px;

width:100%;
height:100%;

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

pointer-events:none;

}


/* =========================
Link
========================= */

.about-link{

margin-top:40px;

display:inline-block;

}


.about-link a{

position:relative;

display:inline-block;

padding-bottom:10px;

font-size:13px;

letter-spacing:.18em;

color:var(--accent);

text-transform:uppercase;

}


.about-link a::before{

content:"";

position:absolute;

left:0;
bottom:0;

width:0;

height:1px;

background:var(--accent);

transition:
width .6s cubic-bezier(.19,1,.22,1);

}


.about-link a:hover::before{

width:100%;

}


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

@media(max-width:768px){

.about .content{

grid-template-columns:1fr;

gap:40px;

padding:70px 0;

}


.about .section-sub:nth-child(even)
.left,
.about .section-sub:nth-child(even)
.right{

order:initial;

}


.text-area h3{

font-size:28px;

}

.right img{

aspect-ratio:16/9;

	}
	
.right::after{

top:10px;
left:10px;

}

.about .catch-copy.txt-c{

font-size:34px;

margin:40px auto;

}

}