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

/* カラーパレット */
:root {
--bg:#fff9eb;
--bk:#231815;
--gr:#00a73c;
--gray:#595757;
--or:#ea5504;
--wh:#fff;
}

/* 全体 */
html {
background-color:var(--bg);
color:var(--bk);
color-scheme:light;
font-family:"Noto Sans JP", sans-serif;
font-optical-sizing:auto;
font-style:normal;
line-break:strict;
line-height:1.8;
overflow-wrap:anywhere;
overflow-x:clip;
scroll-behavior:smooth;
scroll-padding-block-start:var(--header-h, 0);
}
body { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; overflow-x:clip; }
:root {
--shadow:4px 4px 0 0 rgba(0,0,0,.25);
--header-h:60px;
--width:calc( 100% - 40px );
}

/* 文字太さ */
.w500 { font-weight:500; }
.w600 { font-weight:600; }
.w700 { font-weight:700; }

/* 装飾 */
.u { text-decoration:underline; }

@media (prefers-reduced-motion: reduce) {

/* 全体 */
html { scroll-behavior:auto; }
*, ::before, ::after {
animation-duration:1ms !important;
animation-iteration-count:1 !important;
transition-duration:1ms !important;
}

}

@media( min-width:960px ) {

/* 全体 */
:root {
--shadow:8px 8px 0 0 rgba(0,0,0,.25);
--header-h:92px;
--width:1000px;
}

/* 状況マーク */
.status-mark { font-size:24px; padding:16px; }

}

/* ================================================== */
/* ヘッダ */
/* ================================================== */

/* ベース */
.site-header img { position:absolute; top:15px; left:14px; height:auto; width:40px; }

@media(min-width:960px) {

/* ベース */
.site-header img { top:56px; left:65px; width:68px; }

}

/* ================================================== */
/* メイン */
/* ================================================== */

/* ベース */
.main-content { container:main / inline-size; flex:1 0 auto; overflow-x:clip; }

/* 汎用見出し */
.card-label { margin-bottom:4px; }
.card-label span { align-items:center; background-color:var(--gr); border-radius:50%; color:var(--wh); display:flex; font-size:18px; font-weight:800; height:32px; justify-content:center; line-height:1; width:32px; }
.card-label span + span { margin-left:-6px; }

/* 状況マーク
 * カードの上下中央に帯で重ねる。
 * 親に position がないと画面基準になるため状況クラスで相対配置にする。
 * pointer-events を切ってボタンとリンクの操作は残す
 */
.is-closed, .is-notice { position:relative; }
.is-closed .thumb { filter:grayscale(.8); }
.status-mark { color:var(--wh); font-size:20px; font-weight:800; left:0; letter-spacing:.08em; line-height:1.5; padding:12px 16px; pointer-events:none; position:absolute; right:0; text-align:center; top:50%; transform:translateY(-50%); z-index:1; }
.is-closed .status-mark { background-color:rgba(35, 24, 21, .72); }
.is-notice .status-mark { background-color:rgba(234, 85, 4, .88); }

/* ================================================== */
/* フッタ */
/* ================================================== */

/* ベース */
.site-footer { color:var(--gray); gap:8px; padding:24px 0 16px 0; margin:auto; max-width:var(--width); }

/* ピーケンくん */
.pken-family { justify-content:center; margin-bottom:8px; }
.pken-family img { height:auto; max-width:178px; }

/* フッターコンテンツ */
.footer-info { flex-direction:column; gap:8px; }
.footer-info h2 { align-items:center; flex-direction:column; font-size:22px; font-weight:800; justify-content:center; line-height:28px; }
.footer-info address { flex-direction:column; font-size:12px; font-weight:400; }
.tel-fax { gap:30px; }

/* フッターナビ */
.footer-nav li { font-size:16px; font-weight:400; line-height:24px; }
.footer-nav li a { align-items:center; }

/* コピーライト */
.copy { font-size:11px; font-weight:400; text-align:center; line-height:22px; }

@media(min-width:960px) {

/* ベース */
.site-footer.flex.flex-col { align-items:center; display:grid; column-gap:40px; grid-template-columns:1fr auto; row-gap:24px; max-width:1440px; }

/* ピーケンくん */
.pken-family img { max-width:277px; }

/* フッターコンテンツ */
.footer-info h2 { align-items:center; flex-direction:row; font-size:36px; gap:20px; height:72px; }
.footer-info address { flex-direction:row; gap:30px; }

/* フッターナビ */
.footer-nav { flex-direction:column; gap:15px; }

/* コピーライト */
.copy { font-size:14px; grid-column:1 / -1; }

}