/* ================================================== */
/* 汎用 */
/* ================================================== */

/* 見出し */
.page-title { margin-bottom:24px; }
.green-title { margin-bottom:24px; }

/* ベース */
.entry-content { padding:0; margin-bottom:56px; }

@container(min-width:960px) {

/* 見出し */
.green-title { margin-bottom:40px; }
.green-title { margin-bottom:40px; }

}

/* ================================================== */
/* ４つのメリット */
/* ================================================== */

/* ベース */
.merit-box { display:flex; flex-direction:column; gap:24px; }
.join-movie-guid { flex-direction:column; gap:24px; margin-bottom:56px; }

/* レイアウト */
.merit-block { display:flex; flex-direction:column; gap:32px; margin-bottom:56px; }

/* リスト */
.merit-list { gap:8px; }
.merit-list li { padding-inline-start:1.25em; position:relative; }
.merit-list li::before { color:var(--bl); content:"●"; font-size:.75em; inset-inline-start:0; position:absolute; }

/* 動画 */
.join-movie { display:flex; flex-direction:column; gap:16px; margin:0 auto; }
.movie { aspect-ratio:16/9; margin:auto; height:auto; max-width:calc( 100% - 20px ); }
.movie iframe { height:100%; width:100%; }

/* ガイドブック */
.join-guidebook { display:flex; flex-direction:column; gap:24px; transition:.3s; margin:0 auto; }
.guid-thumb { justify-content:center; }
.join-guidebook img { transition:.3s; height:auto; max-width:225px; width:100%; }
.join-guidebook:hover img { opacity:0.7; transition:.3s; }
.join-guidebook .more-button a { gap:10px; transition:.3s; width:200px; } 

/* 汎用ボタン：反転 */
.join-guidebook:hover .more-button a { background-color:var(--wh); border:2px solid var(--or); color:var(--or); transition:.3s; }
.join-guidebook:hover .more-button a .button-arrow::before { border-block-start: 2px solid var(--or); border-inline-end:2px solid var(--or); transition:.3s; }

@container(min-width:960px) {

/* ベース */
.merit-box { gap:40px; }
.join-movie-guid { flex-direction:row; justify-content:space-between; margin-bottom:80px; }

/* 見出し */
.merit-box h3 { width:160px; }

/* レイアウト */
.merit-box { align-items:flex-start; flex-direction:row; gap:40px; }

/* リスト */
.merit-list { padding-top:24px; }

/* 動画 */
.movie { max-width:100%; width:564px; }

/* チャンネルを見るボタン */
.more-button a { width:242px; }

}

/* ================================================== */
/* 加入するには */
/* ================================================== */

/* ベース */
.content-layout { gap:24px; }

/* 見出し */
.join-item-section h3, .uniondues h3 { color:var(--or-2); font-weight:700; }

/* レイアウト調整 */
.join-item-section { gap:8px; }
.uniondues { flex-direction:column; gap:8px; margin:24px auto; }

/* テキスト */
.join-text { align-items:center; color:var(--bl); flex-direction:column; font-size:18px; font-weight:700; justify-content:center; margin-bottom:16px; }
.item-text.flex { align-items:last baseline; gap:2px; }
.item-text.flex p { flex:1; }
.item-text.flex img { height:77px; width:auto; }
.item-text a { color:var(--bl); text-decoration:underline; }
.center-text { font-size:16px; }

/* リスト */
.button-list { justify-content:space-between; gap:24px; }
.button-list li a { opacity:1; transition:.3s; }
.button-list li a:hover { opacity:0.7; transition:.3s; }

@container(min-width:960px) {

/* レイアウト調整 */
.uniondues { margin-bottom:40px; }

/* テキスト */
.join-text { flex-direction:row; font-size:20px; gap:8px; }
.center-text { font-size:18px; }
.item-text.flex img { display:none; }

/* リスト */
.button-list { justify-content:center; margin:auto; margin-bottom:80px; max-width:720px; }

}