/* -------------------------------------------------- */
/* 汎用 */
/* -------------------------------------------------- */

/* 見出し */
.page-title.publications { margin-bottom:0; }
.page-title.publications::before { aspect-ratio:3/5; background-image:url('../img/page/publications/title-publications.png'); height:auto; width:65px; }
.page-title.journal::before { aspect-ratio:3/5; background-image:url(../07publications/journal/img/title-icon.png); height:auto; width:65px; }
.page-title.calendar::before { aspect-ratio:60/65; background-image:url('../img/page/publications/title-calendar.png'); height:auto; width:60px; }

/* 詳しく見るボタン */
.more-btn { align-items:center; justify-content:center; }
.more-btn a { align-items:center; border-radius:30px; border:1px solid var(--bk); justify-content:center; transition:.3s; height:36px; width:250px; }
.more-btn a:active, .more-btn a:hover { background-color:#dcecee; border:1px solid var(--gr-2); color:var(--gr-2); transition:.3s; }

/* -------------------------------------------------- */
/* 目次ページ */
/* -------------------------------------------------- */

/* ベース */
.publications-index { flex-direction:column; gap:64px; }

/* 項目 */
.publications-box { gap:16px; }
.publications-box h2.square-title { padding-bottom:8px; margin-bottom:0; }
.publications-ph img { aspect-ratio:218/295; margin:auto; height:auto; max-width:218px; width:100%; }
.publications-ph.ph-calendar img { aspect-ratio:276/373; max-width:276px; }
.publications-ph.ph-goods img { aspect-ratio:334/328; max-width:334px; }

/* ニュースのお知らせ */
.square-title.news-oshirase { align-items:flex-start; font-size:18px; gap:8px; margin-top:40px; }
.square-title.news-oshirase::before { flex-shrink:0; }

@container( min-width:1000px ) {

/* ベース */
.publications-index.flex { display:grid; grid-template-columns:repeat(2, 1fr); gap:100px 0; }

/* 項目 */
.publications-box { justify-content:space-between; gap:18px; }
.publications-box h2 { border-bottom:1px solid var(--bk); }
.publications-box p { margin:auto; max-width:300px; }
.publications-ph { padding-top:50px; }
.publications-ph.ph-calendar img { aspect-ratio:356/291; max-width:356px; }
.publications-ph.ph-goods img { aspect-ratio:276/373; max-width:276px; }

/* ニュースのお知らせ */
.square-title.news-oshirase { font-size:23px; gap:17px; margin-top:100px; }

}

/* -------------------------------------------------- */
/* 冊子 */
/* -------------------------------------------------- */

/* ベース */
.magazine-content { background-color:transparent; padding:0; max-width:100%; width:100%; }

/* 見出し */
.magazine-content h2 { color:var(--gr-2); font-size:18px; font-weight:700; margin:0 20px;; margin-bottom:24px; }

/* テキスト */
.magazine-content p { margin:0 20px; margin-bottom:40px; }

/* touch-action は overflow を持つ .carousel だけで足ります */
.slide-content { background-color:var(--gr-1); user-select:none; padding:40px 0 70px 0; margin-bottom:40px; width:100%; }
.carousel { overflow:hidden; touch-action:pan-y; user-select:none; width:100%; }

/* scroll-snap は使っていないので削除、100vw は 100% に */
.magazine-list { display:flex; gap:0; transition:transform .4s ease; width:100%; }
.magazine-list li { background-color:var(--wh); flex-shrink:0; width:100%; }

/* リスト */
.magazine-list { display:flex; gap:0; touch-action:pan-y; transition:transform 0.4s ease; width:100%; }
.magazine-list li { background-color:var(--wh); flex-shrink:0; scroll-snap-align:start; width:100vw; }
.magazine-list li a { align-items:center; gap:16px; justify-content:center; padding:40px 0 20px 0; }
.magazine-list li a p { font-size:18px; font-weight:700; letter-spacing:.9px; margin-bottom:0; }
.magazine-list li img { box-shadow:4px 4px 4px 0 rgba(0, 0, 0, 0.25); height:auto; max-width:200px; width:100%; }

/* 矢印 */
.arrow { align-items:center; cursor:pointer; display:flex; justify-content:center; padding:60px 0 0 0; pointer-events:auto; -webkit-appearance:none; appearance:none; width:100%; }
.arrow img { height:auto; width:210px; }

@container( min-width:1000px ) {

/* 見出し */
.magazine-content h2 { margin:auto; margin-bottom:24px; max-width:1000px; width:100%; }

/* テキスト */
.magazine-content p { margin:auto; margin-bottom:40px; max-width:1000px; width:100%; }

/* リスト */
.magazine-list { gap:56px; padding-left:120px; padding-right:120px; }
.magazine-list li { background-color:transparent; width:auto; }
.magazine-list li a { aspect-ratio:1/1; background-color:var(--wh); width:400px; }
.magazine-list li a p { text-align:center; margin:auto; max-width:100%; }

}

/* -------------------------------------------------- */
/* カレンダー */
/* -------------------------------------------------- */

/* 余白 */
.margin-b{ margin-bottom:40px; }

/* 見出し */
.bosyu-title { align-items:center; background-color:var(--gr-2); border-radius:100px; color:var(--wh); font-size:18px; font-weight:700; justify-content:center; margin:auto; margin-bottom:16px; height:70px; width:260px; }

/* 申し込み終了 */
p.end-application { align-items:center; font-size:18px; font-weight:700; flex-direction:column; gap:8px; justify-content:center; margin-bottom:24px; }
p.end-application span.application { align-items:center; background-color:var(--gr-3); border-radius:100px; color:var(--wh); justify-content:center; height:30px; width:285px; }
p.end-application span.end { font-size:16px; line-height:28px; }

/* アコーディオン */
.accordion-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s ease; }
.accordion-body.is-open { grid-template-rows:1fr; }
.accordion-inner { overflow:hidden; }
.accordion-trigger { cursor:pointer; }
.accordion-trigger::after { border-bottom:2px solid currentcolor; border-right:2px solid currentcolor; content:""; height:0.6em; margin-top:4px; rotate:45deg; transition:rotate .4s ease; width:0.6em; }
.accordion-trigger.is-open::after { rotate:225deg; }


/* カレンダーサムネイル */
.calendar-thumbs { flex-direction:column; gap:16px; margin-top:16px; margin-bottom:8px; }
.thumbs-1 img, .thumbs-2 img { width:100%; }

/* リスト */
.dot-list { padding:0 20px; }
.dot-list li { list-style-type:disc; }

/* 申し込み方法 */
.green-back { background-color:rgba(177, 239, 214, 0.50); padding:24px 16px 0 16px; }
.green-back h3 { font-size:18px; font-weight:700; margin-bottom:8px; }
.green-back .dot-list { padding-bottom:24px; }

/* テーブルレイアウト */
.table-grid { border:1px solid var(--bk); border-top:none; grid-template-columns:50px 1fr; grid-template-rows:auto auto auto; }
.table-grid.first-table { border-top:1px solid var(--bk); margin-top:16px; }
.table-grid .label { align-items:center; background-color:rgba(177, 239, 214, 0.50); border-right:1px solid var(--bk); box-sizing:border-box; display:flex; justify-content:center; grid-column:1; grid-row:1/4;  }
.table-grid p { border-bottom:1px solid var(--bk); grid-column:2; padding:0 8px; }
.table-grid p:last-child { border-bottom:none; }

/* 翌年カレンダー */
.bosyu-box { flex-direction:column; gap:16px; }
.call { flex-direction:column; gap:8px; }
.call-button a { align-items:center; border:1px solid var(--bk); border-radius:30px; justify-content:center; transition:.3s; height:30px; width:300px; }
.call-button a:hover { border:1px solid var(--gr-2); color:var(--gr-2); transition:.3s; }

/* カレンダー応募リスト */
.midashi-list { gap:16px; margin-bottom:8px; }
.midashi-list.midashi-list-2 { gap:16px; margin-top:8px; }
.midashi-list.midashi-list-2.margin-b { margin-bottom:40px; }
.midashi-list .row { gap:8px; }
.midashi-list.midashi-list-2 .row { flex-direction:column; }
.midashi-list dt { align-items:center; border:1px solid var(--bk); border-radius:100px; justify-content:center; height:30px; width:85px; }
.midashi-list dd { max-width:calc( 100% - ( 85px + 8px ) ); width:100%; }
.midashi-list.midashi-list-2 .row dd { max-width:100%; }


@container( min-width:1000px ) {

/* 見出し */
.bosyu-title { font-size:26px; margin-bottom:40px; height:54px; width:550px; }
.bosyu-title br { display:none; }

/* 申し込み終了 */
p.end-application { align-items:center; background-color:var(--gr-3); border-radius:100px; color:var(--wh); flex-direction:row; justify-content:center; gap:30px; margin:auto; margin-bottom:40px; height:45px; width:650px; }
p.end-application span.application, p.end-application span.end { font-size:26px; line-height:normal; }
p.end-application span.application { border-radius:auto; height:auto; width:auto; }

/* アコーディオン */
.accordion-trigger { position:relative; }
.accordion-trigger::after { border-bottom:2px solid currentcolor; border-right:2px solid currentcolor; content:""; flex-shrink:0; height:0.6em; margin-top:4px; rotate:45deg; transition:rotate .4s ease; width:0.6em; }

/* カレンダーサムネイル */
.calendar-thumbs { flex-direction:row; gap:40px; }
.thumbs-1, .thumbs-2 { flex:1; }

/* テーブルレイアウト */
.table-grid { grid-template-columns:50px repeat(3, 1fr); grid-template-rows:auto; }
.table-grid .label { grid-column:1; grid-row:1; }
.table-grid p { border-bottom:none; border-right:1px solid var(--bk); display:flex; align-items:center; grid-column:auto; grid-row:1; }
.table-grid p:last-child { border-right:none; }
.table-grid.grid.margin-b { margin-bottom:80px; }

/* 翌年カレンダー */
.pc-indent { text-indent:3rem; }
.bosyu-box.flex { display:flex; }
.bosyu-ph { transform:translateY(-35%); position:absolute; top:50%; right:0; }
.bosyu-ph img { width:450px; }
.green-back.green-back { padding:40px; }
.green-back .dot-list { padding-bottom:0; }
.call { flex-direction:row; }
.midashi-list .row { gap:16px; }
.midashi-list.midashi-list-2 .row { flex-direction:row; gap:16px; }

}

/* -------------------------------------------------- */
/* グッズ */
/* -------------------------------------------------- */

/* 見出し */
.page-title.goods::before { aspect-ratio:100/86; background-image:url('../07publications/goods/img/title-icon.png'); height:auto; width:70px; }
.goods-content h2 { color:var(--gr-2); font-size:18px; font-weight:700; margin:0 20px;; margin-bottom:24px; }

/* リスト */
.goods-list { flex-direction:column; gap:40px; }
.goods-list li { align-items:center; gap:8px; justify-content:center; }
.goods-list li div.goods-ph { text-align:center; max-width:285px; }
.goods-list li div.goods-ph img { margin:auto; }

/* 購入はこちら */
.goods-main { display:flex; flex-direction:column; gap:40px; }
.comment { top:-12px; left:-10px; height:150px; width:150px; }
.goods-main h2 { margin:0; }
.main-ph { text-align:center; }
.main-ph img { box-shadow:4px 4px 0 0 rgba(0, 0, 0, 0.25); margin:auto; height:auto; width:213px; }
.buy-button a { align-items:center; aspect-ratio:210/40; display:inline-block; transition:.3s; height:auto; max-width:210px; width:100%; }
.buy-button a:hover { background-image:url('../07publications/goods/img/buy-button-ov.png'); background-position:center; transition:.3s; }
.buy-button a img { aspect-ratio:210/40; height:auto; max-width:210px; width:100%; }
.buy-button a:hover img { transition:.3s; opacity:0; }
.buy-item { align-items:flex-end; gap:24px; justify-content:space-between; }
.buy-bnr img { height:auto; width:116px; }

/* アニメーション */
.anime-camera { aspect-ratio:142/347; display:none; height:232px; width:auto; }

@container( min-width:1000px ) {

/* 見出し */
.page-title.goods { margin-bottom:50px; }
.page-title.goods::before { width:100px; }
.page-title.goods h2 { margin:auto; margin-bottom:24px; max-width:1000px; width:100%; }
.goods-main h2 { font-size:26px; }

/* リスト */
.goods-list { align-items:flex-end; flex-direction:row; justify-content:center; }
.goods-list li div.goods-ph { max-width:100%; }
.goods-list li div.goods-ph img { height:190px; width:auto; }

/* 購入はこちら */
.comment { top:-30px; left:-50px; height:220px; width:220px; }
.goods-main { align-items:flex-start; flex-direction:row; justify-content:center; }
.main-text { align-items:flex-start; display:flex; flex-direction:column; justify-content:space-between; min-height:280px; height:100%; }
.buy-item { margin-top:auto; margin-bottom:0; }
.buy-bnr img { width:193px; }

/* アニメーション */
.anime-camera { display:block; bottom:-50px; right:10px; transform:scale(-1, 1); height:242px; }

}