/* ================================================== */
/* ピーケンくん 紹介 */
/* ================================================== */

/* タイトル */
.page-title { margin-top:30px; position:relative; }
.page-title::before { background-image:url(../img/parts/pken/title-icon.png); background-repeat:no-repeat; background-size:cover; background-position:center; content:''; display:inline-block; position:absolute; top:50%; left:16px; transform:translateY(-50%); height:92px; width:77px; }
.frame-title { color:var(--gr); font-size:20px; font-weight:900; text-align:center; margin-bottom:10px; }

@container(min-width:960px) {

/* タイトル */
.page-title { margin-top:40px; position:static; }
.page-title::before { display:none; }
.about-pken { position:relative; }
.pken-icon { background-image:url(../img/parts/pken/title-icon.png); background-repeat:no-repeat; background-size:cover; background-position:center; display:inline-block; position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-250px); height:92px; width:77px; }

}

/* ================================================== */
/* ピーケンくんの家族紹介 */
/* ================================================== */

/* 見出し */
.family-box h2 { color:var(--gr); font-size:20px; font-weight:900; text-align:center; margin-bottom:10px; }

/* レイアウトボックス */
.family-frame { display:flex; flex-direction:column; gap:40px; }
.family-box { display:flex; flex-direction:column; }
.thumb { aspect-ratio:3/2; align-items:center; display:flex; justify-content:center; margin:auto; margin-bottom:16px; max-width:215px; width:100%; }
.thumb img { object-fit:cover; height:100%; width:auto; }
.img-block { align-items:flex-start; gap:15px; justify-content:center; margin-top:20px; }
.img-block p { font-size:12px; }

@container(min-width:960px) {

/* 見出し */
.family-box h2 { text-align:left; }

/* レイアウトボックス */
.family-frame { align-self:center; display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.family-box { align-items:center; display:flex; flex-direction:row; gap:16px; }
.text-content { flex:1; }
.thumb { aspect-ratio:12/18; margin-bottom:auto; max-width:120px; }
.thumb img { height:auto; width:auto; }
.img-block { gap:30px; margin:auto; margin-top:30px; max-width:90%; }
.img-block p { font-size:14px; text-align:center; }

}

/* ================================================== */
/* ピーケンくんイラスト集 */
/* ================================================== */

/* 説明文 */
.pken-note { font-size:14px; margin-bottom:20px; }

/* リスト */
.pken-list { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.pken-list li a { align-items:center; aspect-ratio:1/1; border:1px solid var(--or); box-shadow:4px 4px 0 0 rgba(0, 0, 0,.25); display:flex; justify-content:center; height:auto; position:relative; width:100%; }
.pken-list li a img { height:auto; width:80px; }

/* ダウンロードの目印。ページャーの矢印と同じ作り方 */
.pken-list li a::after { block-size:8px; border-block-end:2px solid var(--or); border-inline-end:2px solid var(--or); bottom:12px; box-sizing:border-box; content:''; inline-size:8px; position:absolute; right:10px; rotate:45deg; }

@container(min-width:960px) {

/* 説明文 */
.pken-note { font-size:16px; margin-bottom:30px; }

/* リスト */
.pken-list { grid-template-columns:repeat(4,1fr); gap:30px; }
.pken-list li a { box-shadow:8px 8px 0 0 rgba(0, 0, 0,.25); transition:.3s; }
.pken-list li a:hover { box-shadow:0 0 0 0 transparent; transform:translate(8px,8px); transition:.3s; }
.pken-list li a img { width:100px; }

}

/* ================================================== */
/* ページャー */
/* ================================================== */

.pager {
--pager-arrow:8px;
--pager-bd:#ccc;
--pager-bg:var(--wh);
--pager-color:var(--bk);
--pager-current-bd:var(--gr);
--pager-current-bg:var(--gr);
--pager-current-color:var(--wh);
--pager-gap:8px;
--pager-size:32px;
}
.pager ul { align-items:center; display:flex; flex-wrap:wrap; gap:var(--pager-gap); justify-content:center; font-size:16px; font-weight:700; line-height:1; padding-top:30px; padding-bottom:40px; }
.pager :is(a, span) { align-items:center; background-color:var(--pager-bg); border:1px solid var(--pager-bd); color:var(--pager-color); display:flex; justify-content:center; height:var(--pager-size); width:var(--pager-size); }
.pager .is-current { background-color:var(--pager-current-bg); border-color:var(--pager-current-bd); color:var(--pager-current-color); }
.pager .is-dots { background-color:transparent; border-color:transparent; }
.pager .is-disabled { opacity:.3; pointer-events:none; }

/* 矢印 */
.pager :is(.pager-prev) { background-color:var(--pager-bd); }
.pager :is(pager-next) { color:var(--pager-bd); }
.pager :is(.pager-prev, .pager-next)::before { block-size:var(--pager-arrow); border-block-start:2px solid currentcolor; border-inline-end:2px solid currentcolor; box-sizing:border-box; content:""; inline-size:var(--pager-arrow); }
.pager .pager-prev::before { rotate:-135deg; translate:1.5px; }
.pager .pager-next::before { rotate:45deg; translate:-1.5px; }

@container(min-width:960px) {

/* ページャー */
.pager { --pager-gap:12px; --pager-size:40px; }
.pager ul { font-size:18px; }
.pager a { transition:.3s; }
.pager a:hover { background-color:var(--gr); border-color:var(--gr); color:var(--wh); transition:.3s; }

}