/* WordPress 化で足した部品（手で保守する。カンプに無いもの）。tools/build-theme.py が assets/css/extra.css に写す */

/* 管理バーが出ているときの固定ヘッダーの位置 */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}

/* スマホ・タブレットのメニュー（カンプはボタンの見た目だけ。開いたときの画面をここで足す） */
.menu-btn{cursor:pointer;border:0;padding:0}
.drawer{position:fixed;inset:0;z-index:100;background:var(--c-dark);color:#fff;display:flex;flex-direction:column;padding:28px var(--gutter) 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.drawer.is-open{opacity:1;visibility:visible}
.drawer__head{display:flex;align-items:center;justify-content:space-between}
.drawer__head img{height:26px;width:auto}
.drawer__close{width:44px;height:44px;border-radius:50%;background:#fff;border:0;position:relative;cursor:pointer}
.drawer__close::before,.drawer__close::after{content:"";position:absolute;left:14px;top:21px;width:16px;height:2px;background:var(--c-text);transform:rotate(45deg)}
.drawer__close::after{transform:rotate(-45deg)}
.drawer__nav{margin-top:40px;display:grid;gap:4px}
.drawer__nav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:17px;font-weight:700}
.drawer__nav a span{font-family:var(--f-en);font-weight:300;font-size:13px;letter-spacing:.12em;color:rgba(255,255,255,.6);text-transform:uppercase}
.drawer__cta{display:grid;gap:10px;margin-top:32px}
.drawer__cta a{display:flex;align-items:center;justify-content:center;height:52px;border-radius:999px;font-weight:700;font-size:15px}
.drawer__cta .tel{background:#fff;color:var(--c-text);font-family:var(--f-en);font-size:19px;letter-spacing:.06em}
.drawer__cta .reserve{border:1px solid rgba(255,255,255,.6)}
.drawer__cta .line{background:var(--c-line)}
html.is-drawer-open{overflow:hidden}

/* 投稿の本文（取り込んだ記事の写真・動画） */
.kb-figure{margin:32px 0}
.kb-figure img{width:100%;height:auto;border-radius:var(--radius-m)}
.kb-embed{margin:32px auto;max-width:560px;aspect-ratio:16/9}
.kb-embed iframe{width:100%;height:100%;border:0;border-radius:var(--radius-m)}
.article__body .article__video{margin:32px auto;max-width:400px}
.article__body .article__sign,.style-body .article__sign{margin-top:48px}
.article__body .links,.style-body .links{margin-top:28px}
.style-body .article__tags{display:none}
.sb-empty,.post-empty{padding:40px 0;text-align:center;color:var(--c-gray)}
.sgallery__slide--thumbonly img{object-fit:contain;background:var(--c-pale)}
.post img,.sb-item img{background:var(--c-pale)}

/* エントリーフォームの確認画面・送信完了・エラー */
.form-confirm{max-width:860px;margin:32px auto 0}
.form-confirm dl{margin:0}
.form-confirm dl > div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid rgba(34,16,13,.15);font-size:15px;line-height:1.9}
.form-confirm dt{font-weight:700}
.form-confirm dd{margin:0;white-space:pre-wrap;word-break:break-word}
.form-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.form-actions .btn{min-width:220px}
.form-message{max-width:860px;margin:32px auto 0;padding:28px 32px;border-radius:var(--radius-m);background:var(--c-pale);font-size:15px;line-height:1.9;text-align:center}
.form-message strong{display:block;font-size:19px;margin-bottom:6px}
.form-errors{max-width:860px;margin:24px auto 0;padding:18px 24px;border-radius:var(--radius-m);border:2px solid var(--c-accent);color:var(--c-accent);font-size:14px;font-weight:700}
.form-errors li{list-style:none}
.kb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
@media (max-width:767px){.form-confirm dl > div{grid-template-columns:1fr;gap:4px}}

/* 404 */
.notfound{text-align:center}
.notfound p{margin-top:20px;font-size:15px;line-height:2}
.notfound .btn{margin-top:40px}

/* 表示速度: 画面外の区画は、見える位置に来るまで描画しない（wp-site-build-checklist 2-2）。固定ヘッダー・メニュー画面は対象外 */
.band,.menu,.blog,.recruit,.marquee,main > .sec-wrap:not(:first-of-type),.contact,.footer{content-visibility:auto;contain-intrinsic-size:auto 900px}

.kb-embed--facade .kb-embed__play{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:var(--radius-m);overflow:hidden;background:#000;cursor:pointer}
.kb-embed--facade img{width:100%;height:100%;object-fit:cover;opacity:.9}
.kb-embed__play::after{content:"";position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:rgba(52,25,20,.85) no-repeat center/26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l14 8-14 8z' fill='%23fff'/%3E%3C/svg%3E")}