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

.custom-grid{
display:grid;
grid-template-columns:1fr 1.5fr;
grid-template-areas:
"preview text"
"preview note";
/* "note note"; */
gap:0 5rem;
align-items:start;
margin:0 auto;
}

.custom-preview{
position:sticky;
top:2rem;
grid-area:preview;
}

.custom-text{
grid-area:text;
}

.custom-note{
grid-area:note;
}


/* SP */
@container (max-width:800px){
.custom-grid{
gap:0 3rem;
}
}

@container (max-width: 600px){
.custom-grid{
grid-template-columns:1fr;
grid-template-areas:
"preview"
"text"
"note";
gap:2rem 0;
}

.custom-preview{
position:relative;
top:0;
}

}


/* -------------------------------
プレビュー
--------------------------------- */
.custom-preview {
text-align:center;
}

.custom-preview img{
object-fit:cover;
width:100%;
}

@container (max-width: 600px){
.custom-preview img{
width:70%;
}
}


/* -------------------------------
テキスト
--------------------------------- */
.custom-text {
display:grid;
grid-template-columns:1fr;
gap:2rem;
}

.custom-text dl{
display:grid;
grid-template-columns:8rem 1fr;
padding:0 0 2rem 0;
border-bottom:1px solid var(--color-line1);
}

.custom-text dt{
font-weight:normal;
font-family:"mincho", serif;
font-size:2rem;
letter-spacing:.5rem;
color:var(--color-gray3);
}

.custom-text__body{
margin:1rem 0 0 0;
font-size:1.4rem;
padding-left:2rem;
}

.custom-text__sub{
margin:1rem 0 0 0;
font-size:1.4rem;
}

.custom-text__body b{
display:inline-block;
width:2rem;
margin-left:-2rem;
}
.custom-text dd strong{
display:block;
margin:0 0 0 0;
font-weight:normal;
font-family:"mincho", serif;
font-size:2rem;
}

.custom-text__body em{
margin:0 0 0 0;
font-size:1.4rem;
font-style:normal;
}

.custom-text__body p{
margin:1.5rem;
font-size:1.3rem;
line-height:2.3rem;
}


/* SP */
@container (max-width:800px){
.custom-text dl{
grid-template-columns:6rem 1fr;
}
}

@container (max-width:600px){
.custom-text dl{
grid-template-columns:8rem 1fr;
}
}


/* -------------------------------
ノート
--------------------------------- */
.custom-note{
margin-top:0;
}