.elementor-71 .elementor-element.elementor-element-kbtop001{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-71 .elementor-element.elementor-element-kbnews01{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-posts .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-posts .elementor-post__read-more{color:var( --e-global-color-accent );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-71 .elementor-element.elementor-element-dc35ef6{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-71 .elementor-element.elementor-element-dc35ef6 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-71 .elementor-element.elementor-element-dc35ef6:after{content:"0.66";}.elementor-71 .elementor-element.elementor-element-dc35ef6 .elementor-post__thumbnail__link{width:100%;}.elementor-71 .elementor-element.elementor-element-dc35ef6 .elementor-post__meta-data span + span:before{content:"///";}.elementor-71 .elementor-element.elementor-element-dc35ef6.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-71 .elementor-element.elementor-element-dc35ef6.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-71 .elementor-element.elementor-element-dc35ef6.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}@media(max-width:767px){.elementor-71 .elementor-element.elementor-element-dc35ef6 > .elementor-widget-container{margin:0px 15px 0px 15px;}.elementor-71 .elementor-element.elementor-element-dc35ef6 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-71 .elementor-element.elementor-element-dc35ef6:after{content:"0.5";}.elementor-71 .elementor-element.elementor-element-dc35ef6 .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS for container, class: .elementor-element-kbtop001 *//* ⚠ これは編集用のトークン版です。貼るのは _paste/00-custom-css.css の方。 直したら python3 _rebuild.py を実行する。 */ /* ================================================================ kibisu.org トップページ CSS — スコープ #kibisu-top 貼り先＝Elementor 最外コンテナの「高度な設定 > カスタムCSS」 最外コンテナの CSS ID に kibisu-top を設定すること（これが前提） ================================================================ */ #kibisu-top{ --ink:#333; /* 本文 */ --ink-soft:#5d6663; /* 補助テキスト */ --brand:#014E63; /* ブランド濃色（実測 #004D65〜#015568） */ --brand-2:#1d6b84; /* ホバー・罫 */ --bg:#fff; --bg-soft:#F7F9F6; /* 淡い緑がかった白（実測） */ --bg-soft2:#F4F5F1; /* もう一段落ち着いた背景（実測） */ --line:#dfe3dd; --radius:14px; --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif; --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; font-family:var(--sans); color:var(--ink); line-height:1.9; font-size:16px; -webkit-font-smoothing:antialiased; } #kibisu-top img{max-width:100%;height:auto;display:block} #kibisu-top a{color:inherit} #kibisu-top p{margin:0 0 1.2em} #kibisu-top p:last-child{margin-bottom:0} /* ---- 共通の器 ---- */ #kibisu-top .kb-sec{padding:84px 0} /* お知らせセクションだけは Elementor のコンテナが器になる（Loop Grid を挟むため）。 コンテナの「CSSクラス」設定は Elementor 4.2.4 では出力されなかったので（2026-09-16 本番で実測）、 CSS ID で .kb-sec ＋ .kb-sec--soft と同じ見た目を与える。CSS ID は反映される（実測済み）。 */ #kibisu-top #kb-news{padding:84px 0;background:var(--bg-soft)} #kibisu-top .kb-sec--white{background:var(--bg)} #kibisu-top .kb-sec--soft{background:var(--bg-soft)} #kibisu-top .kb-sec--soft2{background:var(--bg-soft2)} #kibisu-top .kb-inner{width:min(1080px,88vw);margin-inline:auto} /* ---- 見出し（右に細い罫が伸びる） ---- */ #kibisu-top .kb-h2{ font-family:var(--serif); font-size:clamp(22px,2.4vw,31px); font-weight:600; letter-spacing:.08em; color:var(--brand); margin:0 0 8px; display:flex;align-items:center;gap:20px; line-height:1.5; } #kibisu-top .kb-h2::after{ content:"";flex:0 0 76px;height:1px;background:var(--brand);opacity:.55; } /* 見出しの下に小見出しが無いときはこちらで余白をとる（  の空段落を使わない） */ #kibisu-top .kb-h2--solo{margin-bottom:36px} #kibisu-top .kb-subhead{ color:var(--ink-soft);font-size:15px;letter-spacing:.04em;margin:0 0 36px; } #kibisu-top .kb-catch{ font-family:var(--serif); font-size:clamp(19px,2vw,25px); line-height:1.85;letter-spacing:.05em;color:var(--brand); margin:0 0 22px;font-weight:600; } /* ---- ボタン ---- */ #kibisu-top .kb-btn{ display:inline-flex;align-items:center;justify-content:center;gap:12px; min-height:54px;padding:0 30px;border-radius:999px; background:var(--brand);color:#fff;text-decoration:none; font-size:15px;letter-spacing:.06em; border:1px solid var(--brand); transition:background .25s,color .25s,border-color .25s; } #kibisu-top .kb-btn:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff} #kibisu-top .kb-btn--ghost{background:transparent;color:var(--brand)} #kibisu-top .kb-btn--ghost:hover{background:var(--brand);color:#fff} #kibisu-top .kb-btn--light{background:#fff;color:var(--brand);border-color:#fff} #kibisu-top .kb-btn--light:hover{background:var(--brand);color:#fff;border-color:#fff} #kibisu-top .kb-btn--wide{width:min(420px,100%)} #kibisu-top .kb-btn .kb-arrow{font-size:17px;line-height:1} /* 文中の控えめなリンク（下線＋矢印） */ #kibisu-top .kb-link{ display:inline-flex;align-items:center;gap:10px; color:var(--brand);text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:3px; font-size:15px;letter-spacing:.04em; } #kibisu-top .kb-link:hover{opacity:.7} /* ================= ファーストビュー ================= */ #kibisu-top .kb-fv{position:relative;isolation:isolate} #kibisu-top .kb-fv .kb-fv__bg{ width:100%;height:clamp(380px,52vw,620px);object-fit:cover; } #kibisu-top .kb-fv .kb-fv__inner{ position:absolute;inset:0;z-index:1; width:min(1080px,88vw);margin-inline:auto; display:flex;align-items:center;justify-content:space-between; } #kibisu-top .kb-fv .kb-fv__body{max-width:min(520px,58%)} /* 2026-09-16 natsuki 決定＝見出しとリードは案B（白文字＋濃緑のにじみ）。 右の縦書きコピーだけは案A（濃い文字＋白いぼかし背景）のまま残す。 1px 刻みのオフセットで硬いフチを作るとステッカーのように浮くため使わない。 ぼかし半径の違う濃緑を4段重ねて、字の近くだけ密度が上がるようにする。 */ #kibisu-top .kb-fv .kb-fv__title{ font-family:var(--serif); /* 2026-09-16：スマホの見出しを 26→30px（natsuki 指示）。375px でも3行のまま折り返さず、 下寄せのスマホでもボタンが写真内に収まることを実機で確認済み。PC 側（46px）は変更なし */ font-size:clamp(30px,3.6vw,46px); line-height:1.55;letter-spacing:.06em;font-weight:600; color:#fff;margin:0 0 20px; text-shadow: 0 0 4px rgba(4,33,27,.72), 0 0 10px rgba(4,33,27,.6), 0 0 22px rgba(4,33,27,.48), 0 0 40px rgba(4,33,27,.34); } #kibisu-top .kb-fv .kb-fv__lead{ /* 2026-09-16：リード文のサイズを上げた（スマホ 13→15px・PC 16→17px。natsuki 指示）。 行数は4行のまま増えず、下寄せのスマホでも写真からはみ出さないことを実機で確認済み */ font-size:clamp(15px,1.2vw,17px);line-height:2;color:#fff; text-shadow: 0 0 3px rgba(4,33,27,.78), 0 0 8px rgba(4,33,27,.64), 0 0 18px rgba(4,33,27,.5), 0 0 32px rgba(4,33,27,.34); margin:0 0 26px; } /* 右の縦書きコピーだけは案A のまま＝濃い文字＋白い放射グラデ（natsuki 2026-09-16）。 見出しが白文字になっても、ここは白背景＋濃い文字で残す。揃えないこと */ #kibisu-top .kb-fv .kb-fv__vertical{ position:relative;z-index:0; writing-mode:vertical-rl; font-family:var(--serif); font-size:clamp(15px,1.6vw,22px);letter-spacing:.3em; color:#173028;margin:0;align-self:flex-start;padding-top:4%; } #kibisu-top .kb-fv .kb-fv__vertical::before{ content:"";position:absolute;z-index:-1; inset:-6% -70% -6% -70%; background:radial-gradient(ellipse at center, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 38%, rgba(255,255,255,.42) 62%, rgba(255,255,255,0) 82%); filter:blur(7px); } /* ================= 画像＋テキストの2枚組 ================= */ #kibisu-top .kb-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center} #kibisu-top .kb-media--rev .kb-media__img{order:2} #kibisu-top .kb-media__img img{border-radius:var(--radius);width:100%} #kibisu-top .kb-media__text{font-size:15px} /* ================= 魅力（円形4つ） ================= */ #kibisu-top .kb-charm{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px)} #kibisu-top .kb-charm__item{text-align:center} #kibisu-top .kb-charm__img{ width:100%;aspect-ratio:1/1;max-width:100%; border-radius:50%;overflow:hidden;margin-bottom:18px; } #kibisu-top .kb-charm__img img{width:100%;height:100%;object-fit:cover} #kibisu-top .kb-charm__no{ font-family:var(--serif);font-size:15px;letter-spacing:.16em; color:var(--brand);opacity:.85;margin:0 0 2px; } #kibisu-top .kb-charm__name{ font-family:var(--serif);font-size:19px;letter-spacing:.1em; color:var(--brand);margin:0 0 10px;font-weight:600; } #kibisu-top .kb-charm__desc{font-size:14px;line-height:1.9;color:var(--ink-soft);margin:0} /* ================= 楽しみ方（3カード） ================= */ #kibisu-top .kb-use{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.8vw,34px)} #kibisu-top .kb-use__card{ background:#fff;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line);display:flex;flex-direction:column; } #kibisu-top .kb-use__img{aspect-ratio:4/3} #kibisu-top .kb-use__img img{width:100%;height:100%;object-fit:cover} #kibisu-top .kb-use__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1} #kibisu-top .kb-use__name{ font-family:var(--serif);font-size:20px;letter-spacing:.1em; color:var(--brand);margin:0 0 10px;font-weight:600; } #kibisu-top .kb-use__desc{font-size:14px;line-height:1.9;color:var(--ink-soft);margin:0 0 18px;flex:1} /* ================= 商品紹介（4カード・価格なし） ================= */ #kibisu-top .kb-products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,28px)} #kibisu-top .kb-product{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:26px 22px 28px;display:flex;flex-direction:column;text-align:center; } #kibisu-top .kb-product__img{margin-bottom:18px} #kibisu-top .kb-product__img img{width:100%;max-width:200px;margin-inline:auto} #kibisu-top .kb-product__name{ font-family:var(--serif);font-size:17px;line-height:1.6;letter-spacing:.06em; color:var(--brand);margin:0 0 4px;font-weight:600; } #kibisu-top .kb-product__size{font-size:20px;font-family:var(--serif);color:var(--brand);margin:0 0 12px;letter-spacing:.06em} #kibisu-top .kb-product__desc{font-size:13.5px;line-height:1.85;color:var(--ink-soft);margin:0 0 20px;flex:1;text-align:left} #kibisu-top .kb-product .kb-btn{min-height:46px;font-size:14px;padding:0 20px} /* ================= 購入・取扱店 ================= */ #kibisu-top .kb-buy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center} #kibisu-top .kb-buy__img img{border-radius:var(--radius);width:100%} #kibisu-top .kb-buy__actions{margin-top:26px} /* ================= お知らせ ================= */ #kibisu-top .kb-news__head{ display:flex;align-items:flex-end;justify-content:space-between; gap:20px;flex-wrap:wrap;margin-bottom:34px; } #kibisu-top .kb-news__head .kb-h2{margin-bottom:8px} #kibisu-top .kb-news__note{ border:1px dashed var(--brand-2);border-radius:var(--radius); padding:44px 20px;text-align:center;color:var(--brand-2); background:#fff;font-size:15px; } /* ================= フッター ================= */ #kibisu-top .kb-footer{margin-top:0} /* フッターの帯写真には「奄美の恵みを、これからも。」が既に焼き込まれている （構成テキストの「写真内コピー」がこれ）。HTML 側で文字を重ねない。 高さを固定して object-fit で切ると焼き込みの文字が切れるため、自然比で出す。 */ #kibisu-top .kb-footer__hero img{width:100%;height:auto;display:block} #kibisu-top .kb-contact{background:var(--bg-soft);padding:56px 0;text-align:center} #kibisu-top .kb-contact__label{font-size:13px;letter-spacing:.2em;color:var(--ink-soft);margin:0 0 10px} #kibisu-top .kb-contact__text{font-size:15px;color:var(--ink-soft);margin:0 0 24px} #kibisu-top .kb-foot{background:var(--brand);color:#fff;padding:46px 0 30px} #kibisu-top .kb-foot a{color:#fff;text-decoration:none} #kibisu-top .kb-foot a:hover{text-decoration:underline} #kibisu-top .kb-foot__grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap} #kibisu-top .kb-foot__brand{font-family:var(--serif);font-size:19px;letter-spacing:.1em;line-height:1.7} #kibisu-top .kb-foot__nav{display:flex;gap:56px;flex-wrap:wrap} #kibisu-top .kb-foot__nav ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:2.3} #kibisu-top .kb-foot__bottom{ margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.28); font-size:12.5px;letter-spacing:.04em;opacity:.9; display:flex;gap:14px;flex-wrap:wrap; } /* ================= レスポンシブ ================= */ @media (max-width:900px){ #kibisu-top .kb-sec{padding:60px 0} #kibisu-top #kb-news{padding:60px 0} #kibisu-top .kb-charm{grid-template-columns:repeat(2,1fr);gap:30px} #kibisu-top .kb-products{grid-template-columns:repeat(2,1fr)} #kibisu-top .kb-use{grid-template-columns:1fr;max-width:460px;margin-inline:auto} } @media (max-width:720px){ #kibisu-top{font-size:15px} #kibisu-top .kb-media, #kibisu-top .kb-buy{grid-template-columns:1fr;gap:26px} #kibisu-top .kb-media--rev .kb-media__img{order:0} /* スマホは横幅が狭くリード文が3行になるため、FV の高さを確保しておかないと 文字とボタンが写真からはみ出す */ #kibisu-top .kb-fv .kb-fv__bg{height:clamp(440px,120vw,560px)} #kibisu-top .kb-fv .kb-fv__inner{align-items:flex-end;padding-bottom:34px} #kibisu-top .kb-fv .kb-fv__body{max-width:78%} #kibisu-top .kb-fv .kb-fv__vertical{display:none} #kibisu-top .kb-h2::after{flex-basis:38px} #kibisu-top .kb-products{grid-template-columns:1fr;max-width:420px;margin-inline:auto} #kibisu-top .kb-foot__nav{gap:32px} #kibisu-top .kb-btn--wide{width:100%} }/* End custom CSS */