/* 筑前ガーデンビストロ 2026 — Colibriで組んだセクションの見た目 セクションのID（gb-hero など）と、見出しのレベル（H1/H2/H3/H4/H6）で装飾します。 Colibriで文字や写真を差し替えても、この見た目はそのまま保たれます。 */ :root{--gb-yellow:#F8E000;--gb-ink:#1E1B18;--gb-red:#D9381E;--gb-dim:#3A352F;--gb-deep:#0b5129;--gb-green:#1F5A32; --gb-round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif; --gb-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif; --gb-type:"Special Elite","Courier New",monospace} /* テーマの見出し帯（ページタイトルの写真）は隠し、メニューは緑の帯に */ body.gb26-page .page-header #hero{display:none!important} body.gb26-page .page-header .h-navigation_outer{position:relative!important;background:var(--gb-green)!important;border-bottom:2px solid var(--gb-ink)} body.gb26-page{overflow-x:hidden} html{scroll-padding-top:80px} /* 共通 */ [id^="gb-"].h-section{font-family:var(--gb-body);color:var(--gb-ink);padding-top:88px!important;padding-bottom:88px!important;background:#fff} [id^="gb-"] .h-heading h1,[id^="gb-"] .h-heading h2,[id^="gb-"] .h-heading h3,[id^="gb-"] .h-heading h4,[id^="gb-"] .h-heading h5,[id^="gb-"] .h-heading h6{font-family:var(--gb-round)!important;text-transform:none!important;letter-spacing:.02em!important;margin:0!important} [id^="gb-"] .h-heading h6{font-family:var(--gb-body)!important;font-weight:700!important;font-size:13px!important;letter-spacing:.16em!important;color:var(--gb-red)!important;line-height:1.6!important} [id^="gb-"] .h-heading h2{font-weight:900!important;font-size:clamp(28px,4vw,44px)!important;line-height:1.35!important;color:var(--gb-ink)!important} [id^="gb-"] .h-heading h3{font-weight:900!important;font-size:22px!important;line-height:1.4!important;color:var(--gb-ink)!important} [id^="gb-"] .h-heading h4{font-weight:800!important;font-size:20px!important;line-height:1.4!important;color:var(--gb-ink)!important} [id^="gb-"] .h-text,[id^="gb-"] .h-text p{font-family:var(--gb-body)!important;font-size:16.5px!important;font-weight:500;line-height:1.95!important;letter-spacing:.03em;color:var(--gb-ink)!important} [id^="gb-"] .h-text p{margin:0 0 .6em} [id^="gb-"] .h-text p:last-child{margin-bottom:0} [id^="gb-"] .h-text em{font-style:normal;color:var(--gb-red);font-weight:700} [id^="gb-"] .h-column__content>*+*{margin-top:14px} [id^="gb-"] img{max-width:100%;height:auto} /* 列の幅：同じ行の列は均等に。1列だけの行は横いっぱい */ @media (min-width:768px){ [id^="gb-"] .h-row{flex-wrap:nowrap!important} [id^="gb-"] .h-row>.h-column{flex:1 1 0!important;max-width:none!important;width:auto!important} } [id^="gb-"] .h-section-grid-container{max-width:1160px!important;margin:0 auto!important} /* 文字は左揃え（Colibriの中央揃えを上書き） */ [id^="gb-"] .h-column__content{text-align:left!important;align-items:flex-start!important} [id^="gb-"] .h-heading,[id^="gb-"] .h-heading *,[id^="gb-"] .h-text,[id^="gb-"] .h-text *{text-align:left!important} [id^="gb-"] .h-button__outer,[id^="gb-"] .h-buttons{justify-content:flex-start!important;text-align:left!important} [id^="gb-"] .h-column__content>*{width:100%} #gb-hero .h-row-container:nth-of-type(1) .h-row>.h-column:last-child .h-column__content>div:first-child p{text-align:center!important} /* ヒーロー（黄色） */ #gb-hero.h-section{background:var(--gb-yellow);padding-top:56px!important;padding-bottom:40px!important;border-bottom:2px solid var(--gb-ink);position:relative;overflow:hidden} #gb-hero .h-heading h1{font-weight:900!important;color:var(--gb-red)!important;font-size:clamp(40px,6vw,78px)!important;line-height:1.22!important} #gb-hero .h-text p{font-size:16.5px;font-weight:700} #gb-hero .h-text strong{display:inline-block;background:var(--gb-ink);color:var(--gb-yellow);font-family:var(--gb-body);font-size:13px;letter-spacing:.14em;padding:3px 12px;margin-right:10px;vertical-align:4px} #gb-hero .h-column:first-child .h-text:nth-of-type(2) p,#gb-hero .h-column:first-child .h-column__content>.h-text+.h-text p{font-family:var(--gb-round)!important;font-weight:900;font-size:clamp(20px,2.4vw,28px)!important} #gb-hero .h-button,#gb-hero .h-button__button,#gb-hero a.h-button{font-family:var(--gb-round)!important;font-weight:800!important;font-size:15px!important;color:var(--gb-ink)!important;background:#fff!important;border:2px solid var(--gb-ink)!important;border-radius:0!important;padding:12px 22px!important;box-shadow:none!important;text-transform:none!important;letter-spacing:.02em!important} #gb-hero .h-button:hover,#gb-hero a.h-button:hover{background:var(--gb-ink)!important;color:#fff!important} /* 右側：丸バッジ・キャッチ・ロゴ */ #gb-hero .h-row-container:nth-of-type(1) .h-row>.h-column:last-child .h-column__content>div:first-child p{width:118px;height:118px;border-radius:50%;background:var(--gb-red);color:#fff;display:grid;place-items:center;align-content:center;text-align:center;font-family:var(--gb-round);font-weight:900;font-size:20px;line-height:1.25!important;margin:0 0 0 auto;transform:rotate(8deg);font-size:20px!important} #gb-hero .h-row-container:nth-of-type(1) .h-row>.h-column:last-child .h-column__content>div:nth-child(2) p{font-family:var(--gb-round)!important;font-weight:900;font-size:clamp(22px,2.6vw,32px)!important;line-height:1.35!important} #gb-hero .h-row-container:nth-of-type(1) .h-row>.h-column:last-child .h-column__content>div:nth-child(2) em{color:var(--gb-red)} /* 下段：ポラロイド風の写真 */ #gb-hero .h-row-container:nth-of-type(2) .h-image__frame-container img{background:#fff;padding:8px 8px 26px;box-shadow:0 10px 20px rgba(0,0,0,.18);transform:rotate(-4deg);aspect-ratio:1/1!important;width:100%!important;object-fit:cover} #gb-hero .h-row-container:nth-of-type(2) .h-column:nth-child(2) .h-image__frame-container img{transform:rotate(3deg)} #gb-hero .h-row-container:nth-of-type(2) .h-column:nth-child(3) .h-image__frame-container img{transform:rotate(-2deg)} #gb-hero .h-row-container:nth-of-type(2) .h-column:nth-child(4) .h-image__frame-container img{transform:rotate(5deg)} /* はじめに：右の一覧は罫線つきの表に */ #gb-about .h-row>.h-column:last-child .h-text{border-top:2px solid var(--gb-ink)} #gb-about .h-row>.h-column:last-child .h-text p{margin:0;padding:16px 0;border-bottom:1px solid rgba(30,27,24,.3);font-size:16.5px!important;line-height:1.85!important} #gb-about .h-row>.h-column:last-child .h-text strong{display:block;color:var(--gb-red);font-size:14px;letter-spacing:.12em;margin-bottom:2px} #gb-about .h-row>.h-column:first-child .h-text p{font-family:var(--gb-round)!important;font-weight:800;font-size:clamp(18px,2vw,22px)!important;line-height:1.8!important} /* 紹介動画 */ #gb-movie.h-section{padding-top:24px!important} #gb-movie .h-video,#gb-movie iframe{border:3px solid var(--gb-ink);box-shadow:10px 10px 0 var(--gb-yellow)} /* 相関図・参加店 */ #gb-board.h-section{padding-top:40px!important} #gb-shops .h-heading h3{margin-top:40px!important;padding-bottom:10px!important;border-bottom:2px solid var(--gb-ink)} /* 参加方法（深緑） */ #gb-procedure.h-section{background:var(--gb-deep)} #gb-procedure .h-heading h2,#gb-procedure .h-heading h3,#gb-procedure .h-heading h4{color:#fff!important} #gb-procedure .h-heading h6{color:var(--gb-yellow)!important} #gb-procedure .h-text,#gb-procedure .h-text p{color:#fff!important;font-weight:600} #gb-procedure .h-row-container:nth-of-type(2) .h-column__inner,#gb-procedure .h-row-container:nth-of-type(3) .h-column__inner{border:1.5px solid rgba(255,255,255,.35);background:rgba(0,0,0,.14);padding:22px 20px!important;height:100%} #gb-procedure .h-row-container:nth-of-type(2) .h-heading h3{font-size:19px!important} #gb-procedure .h-row-container:nth-of-type(2) .h-heading h3::first-letter{color:var(--gb-yellow);font-size:1.5em} #gb-procedure .h-row-container:nth-of-type(4) .h-column__inner{border-top:3px solid var(--gb-yellow);padding-top:18px!important} #gb-procedure .h-row-container:nth-of-type(4) .h-column:first-child .h-heading h3{font-size:30px!important;color:var(--gb-yellow)!important} #gb-procedure .h-row-container:nth-of-type(4) .h-heading h3{font-size:24px!important} /* シェフディナー：写真を重ねて */ #gb-dinner .h-row>.h-column:first-child .h-image__frame-container img{background:#fff;padding:8px 8px 24px;box-shadow:0 10px 24px rgba(0,0,0,.2)} #gb-dinner .h-row>.h-column:first-child .h-column__content>div:nth-child(1) img{transform:rotate(-4deg);width:70%} #gb-dinner .h-row>.h-column:first-child .h-column__content>div:nth-child(2) img{transform:rotate(5deg);width:60%;margin:-60px 0 0 36%} #gb-dinner .h-row>.h-column:first-child .h-column__content>div:nth-child(3) img{transform:rotate(-2deg);width:78%;margin:-50px auto 0} #gb-dinner .h-row>.h-column:first-child .h-column__content>div{margin-top:0} #gb-dinner .h-row>.h-column:last-child .h-column__content>div:nth-child(3) p{font-family:var(--gb-round)!important;font-size:16px!important} #gb-dinner .h-row>.h-column:last-child .h-column__content>div:nth-child(3) strong{display:block;font-size:clamp(26px,3vw,36px);font-weight:900;color:var(--gb-red);line-height:1.3} #gb-dinner .h-row>.h-column:last-child .h-column__content>div:last-child .h-text{display:flex;gap:28px;flex-wrap:wrap;border-top:2px solid var(--gb-ink);padding-top:16px} #gb-dinner .h-row>.h-column:last-child .h-column__content>div:last-child p{margin:0;font-size:14px!important;color:var(--gb-ink)!important} #gb-dinner .h-row>.h-column:last-child .h-column__content>div:last-child strong{display:block;font-family:var(--gb-round);font-size:26px;font-weight:900;color:var(--gb-ink);line-height:1.3} /* イベント（黄色） */ #gb-events.h-section{background:var(--gb-yellow);border-top:2px solid var(--gb-ink);border-bottom:2px solid var(--gb-ink)} /* アクセス */ #gb-access .h-text{border-top:2px solid var(--gb-ink)} #gb-access .h-text p{margin:0;padding:14px 0;border-bottom:1px solid rgba(30,27,24,.3);font-size:16.5px!important} #gb-access .h-text strong{display:block;color:var(--gb-red);font-size:14px;letter-spacing:.12em} /* スマホ */ @media (max-width:767px){ [id^="gb-"] .h-text,[id^="gb-"] .h-text p{font-size:16px!important;line-height:1.9!important} [id^="gb-"].h-section{padding-top:60px!important;padding-bottom:60px!important} #gb-hero.h-section{padding-top:32px!important} #gb-hero .h-row-container:nth-of-type(1) .h-row>.h-column:last-child .h-column__content>div:first-child p{width:86px;height:86px;font-size:14px!important;position:absolute;right:0;top:-8px} [id^="gb-"] .h-row>.h-column{flex:0 0 100%!important;max-width:100%!important} #gb-hero .h-row-container:nth-of-type(2) .h-row>.h-column{flex:0 0 50%!important;max-width:50%!important} #gb-dinner .h-row>.h-column:first-child .h-column__content>div:nth-child(2) img{margin-top:-40px} #gb-procedure .h-row-container:nth-of-type(3) .h-row>.h-column{flex:0 0 50%!important;max-width:50%!important} } /* 見出し（太字）のすぐ後の改行は詰める */ #gb-about .h-text strong+br,#gb-access .h-text strong+br{display:none} #gb-about .h-row>.h-column:last-child .h-text strong,#gb-access .h-text strong{margin-bottom:4px} /* イベント：写真つきカード（左に写真、右に内容） */ #gb-events .h-row-container:not(:first-of-type) .h-column__inner{background:#fff;border:2px solid var(--gb-ink);box-shadow:6px 6px 0 var(--gb-ink);padding:22px!important;height:100%} #gb-events .h-row-container:not(:first-of-type) .h-column__content{display:grid!important;grid-template-columns:168px 1fr;column-gap:22px;align-content:start;align-items:start} #gb-events .h-row-container:not(:first-of-type) .h-column__content>*{margin-top:0!important;grid-column:2} #gb-events .h-row-container:not(:first-of-type) .h-column__content>*+*{margin-top:10px!important} #gb-events .h-row-container:not(:first-of-type) .h-column__content>div:first-child{grid-column:1;grid-row:1/span 6;margin:0!important} #gb-events .h-row-container:not(:first-of-type) .h-column__content>div:first-child img{width:100%!important;aspect-ratio:1/1;object-fit:cover;border:2px solid var(--gb-ink);transform:rotate(-2deg);box-shadow:0 6px 14px rgba(0,0,0,.15)} #gb-events .h-row-container:not(:first-of-type) .h-column:nth-child(2) .h-column__content>div:first-child img{transform:rotate(2deg)} #gb-events .h-row-container:not(:first-of-type) .h-heading h6{display:inline-block;background:var(--gb-ink);color:var(--gb-yellow)!important;padding:3px 10px!important;font-size:12px!important;letter-spacing:.08em!important} #gb-events .h-row-container:not(:first-of-type) .h-heading h3{font-size:21px!important;line-height:1.45!important} #gb-events .h-row-container:not(:first-of-type) .h-text p{font-size:15.5px!important;line-height:1.85!important} #gb-events .h-row-container:not(:first-of-type) .h-column__content>div:nth-child(5) p{font-size:14px!important;color:var(--gb-ink)!important;border-top:1px dashed rgba(30,27,24,.4);padding-top:10px} #gb-events .h-row-container:not(:first-of-type) .h-column__content>div:nth-child(5) strong{color:var(--gb-red)} #gb-events .h-text a{display:inline-flex;align-items:center;font-size:13px!important;font-weight:700;color:var(--gb-ink)!important;background:#fff;border:1.5px solid var(--gb-ink);padding:6px 12px;margin:2px 6px 2px 0;text-decoration:none!important;line-height:1.2} #gb-events .h-text a:hover{background:var(--gb-ink);color:#fff!important} #gb-events .h-row-container+.h-row-container{margin-top:8px} @media (max-width:767px){ #gb-events .h-row-container:not(:first-of-type) .h-column__content{grid-template-columns:96px 1fr;column-gap:14px} #gb-events .h-row-container:not(:first-of-type) .h-column__content>div:first-child{grid-row:1/span 3} #gb-events .h-row-container:not(:first-of-type) .h-column__content>div:nth-child(n+4){grid-column:1/-1} #gb-events .h-row-container:not(:first-of-type) .h-heading h3{font-size:18px!important} #gb-events .h-row-container:not(:first-of-type) .h-column__inner{padding:16px!important;box-shadow:4px 4px 0 var(--gb-ink)} #gb-events .h-row-container:not(:first-of-type) .h-column{margin-bottom:14px} } /* v1.3.1 スマホの左右余白を16pxに（枠つきの箱が画面端に付かないように） */ @media (max-width:767px){ [id^="gb-"] .h-section-grid-container{padding-left:16px!important;padding-right:16px!important} [id^="gb-"] .h-column__inner{padding-left:0!important;padding-right:0!important} }