@charset "UTF-8"; /* * Project-specific overrides * * Use this file for site-specific adjustments that should not be promoted * into the reusable template by default. * * If a rule proves broadly useful across projects, move it intentionally into * style/custom.css after validating it as a reusable template improvement. */ /* * モバイルヘッダーの応答調整は v0.4.0 でベース(style/custom.css)へ昇格した。 * ここでは案件固有の上書きのみを扱う。 */ /* ========================================================= * TACHIBANA_HEADER_FOOTER_CORAL_2026-07-06 * プロトタイプ(static-proto)基準のヘッダー/フッター実装。 * 色は下の :root トークンで一元管理する(共通パーツの色はここを変える)。 * ========================================================= */ /* ---- 0. デザイントークン(色・フォント) ---------------------------------- * [BASE-CANDIDATE: component-color-tokens] 共通パーツのカラートークン * [BASE-CANDIDATE: brand-font-tokens] 見出し/本文フォントのトークン化 */ :root{ /* === パレット(ブランド + アクセント) === */ --isv-coral: #e88c74; /* primary */ --isv-coral-deep: #db765c; /* strong / hover */ --isv-coral-soft: #fcede7; /* tint */ --isv-green: #7fb04a; --isv-amber: #eaa23c; --isv-blue: #6ba6d0; --isv-purple: #a98bc7; --isv-pink: #e58aa2; --isv-orange: #e6893f; --isv-ink: #55493f; /* 見出し等の濃色文字(暖色系) */ --isv-muted: #8c8178; --isv-white: #ffffff; /* サイト配色(Arkhe連携)。本文文字は --ark-color--text(#333) で別管理＝赤化しない */ --ark-color--main: var(--isv-coral); /* → --isv-color-primary */ --ark-color--link: var(--isv-coral-deep); /* → --isv-color-accent / link */ /* === 共通パーツの色(パーツ別セマンティックトークン) === */ --isv-drawer-bg: var(--isv-white); --isv-drawer-text: var(--isv-ink); --isv-footer-bg: linear-gradient(135deg, #e89286, #e7a093); --isv-footer-text: var(--isv-white); --isv-footer-text-soft: rgba(255, 255, 255, .9); --isv-footer-line: rgba(255, 255, 255, .3); --isv-footer-foot-bg: rgba(0, 0, 0, .06); --isv-on-coral: var(--isv-white); /* コーラル面の上の文字/アイコン */ --isv-shadow-coral: 0 3px 12px rgba(219, 118, 92, .28); /* フォント(プロト準拠): 見出し/ロゴ=Zen Maru、本文=Zen Kaku */ --isv-font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; --isv-font-body: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; } /* ---- フォント適用(プロト準拠) ---- */ body{ font-family: var(--isv-font-body); } h1, h2, h3, h4, .isv-brand__name, .isv-site-footer__company, .isv-footer-nav__title{ font-family: var(--isv-font-head); } /* ---- 2. ヘッダー: 1段レイアウト ---------------------------------------- * [BASE-CANDIDATE: header-single-row] 1段ヘッダー(ロゴ｜ナビ｜CTA) */ /* Arkhe下段のグローバルナビは非表示(ナビは isv_header_menu 側で表示) */ .l-header__bottom{ display: none; } /* ブランド(ロゴマーク + 園名 + サブ) */ .isv-brand{ display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--isv-ink); min-width: 0; } .isv-brand__mark{ width: 42px; height: 42px; flex: none; } .isv-brand__text{ display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } /* 2026-07-15: white-space:nowrapのままだと、モバイル幅で翻訳後の園名・コピーが * 折り返せずページ全体を横スクロールさせてしまう(body.scrollWidth > innerWidth)。 * 日本語表示では元々1行に収まるため、通常時の見た目は変わらない。 */ .isv-brand__name{ font-weight: 700; font-size: 1.5rem; white-space: normal; } .isv-brand__sub{ font-size: .68rem; color: var(--isv-muted); letter-spacing: .02em; white-space: normal; } /* ヘッダー本体を1行フレックスに(デスクトップ) */ @media (min-width: 1000px){ .l-header.isv-site-header .l-header__body{ display: flex; align-items: center; gap: 1.5rem; } .l-header__left{ display: none; } .l-header__center.isv-site-header__logo{ margin: 0; } .l-header__right.isv-site-header__right{ margin-left: auto; display: flex; align-items: center; gap: 1.5rem; min-width: 0; /* 2026-07-15: 翻訳などでメニュー幅が伸びた際、下のwrapが効くように縮小を許可 */ } .l-header__searchBtn, .l-header__drawerBtn{ display: none; } } /* グローバルナビ(header右): アイコン上・ラベル下、項目ごとに配色(プロト準拠) * [BASE-CANDIDATE: nav-item-icons] メニュー項目別アイコン(href+mask+色) * 2026-07-15: Google翻訳等でメニュー名が日本語より長くなると、flex-wrap:nowrapのままでは * ヘッダーがページ全体を横スクロールさせてしまう(body.scrollWidth > innerWidth)。 * wrapを許可し、収まる時は今まで通り1行、収まらない時だけ折り返す。 */ .isv-header-menu__list{ gap: clamp(.55rem, 1.2vw, 1.1rem); flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; min-width: 0; } .isv-header-menu__list a{ display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .78rem; font-weight: 500; color: var(--isv-ink); padding: .3rem .2rem; transition: color .2s; white-space: nowrap; } .isv-header-menu__list a:hover{ color: var(--isv-coral-deep); } .isv-header-menu__list a::before{ content: ""; width: 24px; height: 24px; display: block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } /* 項目別: アイコン(references/design/SVG由来) + 色(アクセントトークン) */ .isv-header-menu__list a[href*="/hoiku"]::before{ background: var(--isv-coral-deep); -webkit-mask-image:url(../assets/icons/book.svg); mask-image:url(../assets/icons/book.svg); } .isv-header-menu__list a[href*="/info"]::before{ background: var(--isv-green); -webkit-mask-image:url(../assets/icons/pin.svg); mask-image:url(../assets/icons/pin.svg); } .isv-header-menu__list a[href*="/visit"]::before{ background: var(--isv-amber); -webkit-mask-image:url(../assets/icons/calendar.svg); mask-image:url(../assets/icons/calendar.svg); } .isv-header-menu__list a[href*="/newbuilding"]::before{ background: var(--isv-blue); -webkit-mask-image:url(../assets/icons/helmet.svg); mask-image:url(../assets/icons/helmet.svg); } .isv-header-menu__list a[href*="/recruit"]::before{ background: var(--isv-purple); -webkit-mask-image:url(../assets/icons/people2.svg); mask-image:url(../assets/icons/people2.svg); } .isv-header-menu__list a[href*="/faq"]::before{ background: var(--isv-pink); -webkit-mask-image:url(../assets/icons/question.svg); mask-image:url(../assets/icons/question.svg); } .isv-header-menu__list a[href*="/news"]::before{ background: var(--isv-orange); -webkit-mask-image:url(../assets/icons/megaphone.svg); mask-image:url(../assets/icons/megaphone.svg); } /* お問い合わせはPCナビ非表示(コーラルCTAが担う。ドロワーには残す) */ .isv-header-menu__list li:has(> a[href*="/contact"]){ display: none; } /* お問い合わせボタン(コーラル + メールアイコン) */ .isv-header-contact{ gap: .5rem; padding: .6rem 1.15rem; background: var(--isv-coral); white-space: nowrap; box-shadow: var(--isv-shadow-coral); transition: background .2s, transform .2s; } .isv-header-contact:hover{ background: var(--isv-coral-deep); transform: translateY(-1px); } .isv-header-contact::before{ content: ""; width: 1.05em; height: 1.05em; flex: none; background: var(--isv-on-coral); -webkit-mask: url(../assets/icons/mail.svg) center/contain no-repeat; mask: url(../assets/icons/mail.svg) center/contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } /* ---- 3. フッター: コーラル帯 ------------------------------------------- */ .isv-site-footer{ background: var(--isv-footer-bg); color: var(--isv-footer-text); } .isv-site-footer__main{ background: transparent; padding-block: var(--isv-space-lg, 3rem); } .isv-site-footer__main-inner{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem clamp(2rem, 5vw, 4rem); } .isv-site-footer__logo{ display: flex; align-items: center; gap: .6rem; margin: 0 0 .3rem; } .isv-site-footer__logo img{ width: 40px; height: 40px; background: var(--isv-white); border-radius: 50%; padding: 4px; } .isv-site-footer__company{ font-size: 1.4rem; font-weight: 700; margin: 0; } /* ロゴ下の表現(プロト準拠): 法人名は園名の下に小さく寄せ、その後に住所ブロック */ .isv-site-footer__corporate{ font-size: .78rem; color: var(--isv-footer-text-soft); margin: .1rem 0 .9rem 3.1rem; } .isv-site-footer__address, .isv-site-footer__tel, .isv-site-footer__hours{ color: var(--isv-footer-text-soft); font-size: .9rem; margin: .25rem 0 0; } /* 電話番号は少し大きく強調(PC/スマホ共通) */ .isv-site-footer__tel{ font-size: 1.2rem; font-weight: 700; margin-top: .45rem; } .isv-site-footer__tel a{ color: var(--isv-footer-text); letter-spacing: .01em; } /* フッターナビ(2列 + 見出し: 園について / ご案内) * [BASE-CANDIDATE: footer-nav-columns] メニュー連動の2列+見出し */ .isv-footer-nav{ display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); } .isv-footer-nav__title{ font-size: .92rem; font-weight: 700; color: var(--isv-footer-text); margin: 0 0 .85rem; padding-bottom: .45rem; border-bottom: 1px solid var(--isv-footer-line); } .isv-footer-nav__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .isv-footer-nav__list a{ color: var(--isv-footer-text-soft); font-size: .9rem; text-decoration: none; } .isv-footer-nav__list a:hover{ color: var(--isv-footer-text); text-decoration: underline; } /* PC: brand｜園について｜ご案内｜CTA を4等分で均等配置。 * display:contents でナビの2列を main-inner の直接フレックス要素に昇格させ、 * space-between で均等に分配する。 */ @media (min-width: 1000px){ .isv-footer-nav{ display: contents; } } /* お問い合わせCTA (詳細度を上げてベースの .l-footer a 白を上書き) */ .isv-site-footer .isv-footer-contact{ display: inline-flex; align-items: center; gap: .5rem; background: var(--isv-white); color: var(--isv-coral-deep); font-weight: 700; padding: .7rem 1.3rem; border-radius: 999px; text-decoration: none; } .isv-site-footer .isv-footer-contact:hover{ background: var(--isv-coral-soft); } .isv-footer-contact::before{ content: ""; width: 1.05em; height: 1.05em; flex: none; background: var(--isv-coral-deep); -webkit-mask: url(../assets/icons/mail.svg) center/contain no-repeat; mask: url(../assets/icons/mail.svg) center/contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } .isv-site-footer__sns a{ color: var(--isv-footer-text); } /* CTA列: お問い合わせボタン + Instagramアイコンを縦積み * [BASE-CANDIDATE: footer-sns-icon] SNSアイコン導線(mask着色/company_*連動) */ .isv-site-footer__cta{ display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .isv-footer-ig{ display: inline-flex; align-items: center; justify-content: center; } .isv-footer-ig__icon{ width: 34px; height: 34px; display: block; background: var(--isv-footer-text); -webkit-mask: url(../assets/icons/instagram.svg) center/contain no-repeat; mask: url(../assets/icons/instagram.svg) center/contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; transition: opacity .2s; } .isv-footer-ig:hover .isv-footer-ig__icon{ opacity: .82; } /* フッター下部(著作権) */ .isv-site-footer__foot{ background: var(--isv-footer-foot-bg); border-top: 1px solid var(--isv-footer-line); } .isv-site-footer__copyright{ color: var(--isv-footer-text-soft); } /* ---- ドロワー(モバイルメニュー): 黒背景→白ベース(HPイメージに合わせる) ---- * [BASE-CANDIDATE: drawer-light-theme] Arkhe暗色ドロワーを白基調へ */ /* 詳細度を上げて Arkhe の暗色ドロワー設定を上書き。文字色も濃色に(白のままだと不可視)。 */ .l-header .p-drawer, .p-drawer.p-drawer{ background: var(--isv-drawer-bg); color: var(--isv-drawer-text); } .p-drawer .c-drawerNav__a{ color: var(--isv-drawer-text); } .p-drawer .c-drawerNav__a .__mainText{ color: inherit; } .p-drawer .c-drawerNav__a:hover{ color: var(--isv-coral-deep); } .p-drawer .c-drawerNav__li{ border-bottom: 1px solid var(--isv-color-border, #f1e7dc); } .p-drawer .c-iconBtn{ color: var(--isv-drawer-text); } /* ドロワー下部の「閉じる」は控えめ(主たる閉じるは右上アイコン) */ .p-drawer .p-drawer__close{ color: var(--isv-muted); margin-top: 1.2rem; } .p-drawer .p-drawer__close svg{ fill: currentColor; } /* ドロワー開閉アイコン(右上): コーラルの丸ボタンで目立たせる(開くと×) * [BASE-CANDIDATE: drawer-toggle-emphasis] 開閉トグルの強調 */ .l-header__drawerBtn .c-iconBtn{ color: var(--isv-on-coral); background: var(--isv-coral); width: 42px; height: 42px; border-radius: 50%; box-shadow: var(--isv-shadow-coral); } .l-header__drawerBtn .c-iconBtn:hover{ background: var(--isv-coral-deep); } .l-header__drawerBtn .c-iconBtn__icon{ font-size: 1.4rem; } .l-header__drawerBtn .c-iconBtn svg{ fill: currentColor; } /* ---- 4. モバイル調整 --------------------------------------------------- */ @media (max-width: 999.98px){ .l-header__drawerBtn{ display: flex; } .isv-header-menu{ display: none; } /* PCナビ非表示(ドロワー使用) */ /* モバイル: 各ブロックは中央寄せ、ブロック内テキストは左揃え */ .isv-site-footer__main-inner{ flex-direction: column; align-items: center; } .isv-site-footer__corporate{ margin-left: 0; } .isv-footer-nav{ justify-content: center; gap: 2.5rem; } .isv-site-footer__cta{ align-self: center; align-items: center; } } /* [BASE-CANDIDATE: fixed-menu-opt-out] 固定バーを使う/使わないの設定化を検討 * ベースのモバイル下部固定ナビ(.isv-fixed-menu)は本サイトでは使わない。 * isv_footer_menu はフッター列表示に必要なため割当は残し、固定バーのみ抑止。 * プロトはハンバーガー+ドロワー方式(Arkhe drawer_menu)。 */ @media (max-width: 781px){ .isv-fixed-menu{ display: none; } body{ padding-bottom: 0; } } /* ========================================================= * TACHIBANA_TOP_BODY_2026-07-07 * トップページ本文セクション(static-proto / モック top_imageboard.png 準拠)。 * ヒーロー / お知らせ+目的から探す / 強み / Instagram。 * 見出し・タイル・強みのアイコンは mask(../assets/icons/*.svg)で着色。 * ========================================================= */ /* ---- アイコン共通(mask geometry) ---- */ .isv-tile__ic::before, .isv-strength__ic::before{ content: ""; display: block; width: 24px; height: 24px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-mode: alpha; mask-mode: alpha; } /* mask-image マッピング(isv-i-* を持つ要素の ::before に適用) */ .isv-i-book::before{ -webkit-mask-image: url(../assets/icons/book.svg); mask-image: url(../assets/icons/book.svg); } .isv-i-pin::before{ -webkit-mask-image: url(../assets/icons/pin.svg); mask-image: url(../assets/icons/pin.svg); } .isv-i-calendar::before{ -webkit-mask-image: url(../assets/icons/calendar.svg); mask-image: url(../assets/icons/calendar.svg); } .isv-i-helmet::before{ -webkit-mask-image: url(../assets/icons/helmet.svg); mask-image: url(../assets/icons/helmet.svg); } .isv-i-people2::before{ -webkit-mask-image: url(../assets/icons/people2.svg); mask-image: url(../assets/icons/people2.svg); } .isv-i-mail::before{ -webkit-mask-image: url(../assets/icons/mail.svg); mask-image: url(../assets/icons/mail.svg); } .isv-i-building::before{ -webkit-mask-image: url(../assets/icons/building.svg); mask-image: url(../assets/icons/building.svg); } .isv-i-baby::before{ -webkit-mask-image: url(../assets/icons/baby.svg); mask-image: url(../assets/icons/baby.svg); } .isv-i-people::before{ -webkit-mask-image: url(../assets/icons/people.svg); mask-image: url(../assets/icons/people.svg); } .isv-i-food::before{ -webkit-mask-image: url(../assets/icons/food.svg); mask-image: url(../assets/icons/food.svg); } /* ---- Hero(全幅写真 + 左オーバーレイ・コピー) ---- */ .isv-hero{ position: relative; background: #fff; } .isv-hero .wp-block-image, .isv-hero__img{ margin: 0; } .isv-hero__img img{ width: 100%; display: block; } .isv-hero__copy{ position: absolute; left: 6%; top: 50%; transform: translateY(-50%); max-width: 46%; z-index: 2; } /* コピー背後の淡い生成りスクリム(左→透明)。白影を使わず地色でコントラストを確保。 */ .isv-hero::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(251, 246, 240, .92) 0%, rgba(251, 246, 240, .62) 26%, rgba(251, 246, 240, 0) 50%); } .isv-hero__lead{ font-family: var(--isv-font-head); font-weight: 700; font-size: clamp(28px, 4.6vw, 56px); color: var(--isv-ink); line-height: 1.25; letter-spacing: .02em; } .isv-hero__sub{ margin-top: 14px; font-size: clamp(14px, 1.5vw, 17px); color: var(--isv-ink); font-weight: 600; line-height: 1.7; } .isv-hero__org{ margin-top: 12px; font-size: clamp(11px, 1.25vw, 13.5px); color: var(--isv-muted); font-weight: 400; } .isv-hero__cta{ margin-top: 20px; gap: 12px; } /* ---- セクション見出し ---- */ .isv-block-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; } .isv-block-head__title{ font-size: clamp(20px, 2.4vw, 23px); color: var(--isv-ink); display: inline-flex; align-items: center; gap: .4em; margin: 0; } .isv-block-head__title.isv-i-megaphone::before{ content: ""; width: 1.1em; height: 1.1em; flex: none; background: var(--isv-coral); -webkit-mask: url(../assets/icons/megaphone.svg) center/contain no-repeat; mask: url(../assets/icons/megaphone.svg) center/contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } .isv-block-head__more{ font-size: 13px; font-weight: 700; margin: 0; } .isv-block-head__more a{ color: var(--isv-coral-deep); } .isv-block-head__more a:hover{ text-decoration: underline; } /* 中央見出し(強み): 両脇に双葉アイコン */ .isv-sec-head{ display: flex; align-items: center; justify-content: center; gap: .6em; font-size: clamp(22px, 3.2vw, 29px); color: var(--isv-ink); margin: 0 0 40px; } .isv-sec-head::before, .isv-sec-head::after{ content: ""; width: 26px; height: 22px; flex: none; background: var(--isv-coral); opacity: .7; -webkit-mask: url(../assets/icons/sprout.svg) center/contain no-repeat; mask: url(../assets/icons/sprout.svg) center/contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } /* ---- お知らせ + 目的から探す(2カラム) ---- */ .isv-top-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } /* お知らせリスト */ .isv-news-item{ position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 6px; border-bottom: 1px solid var(--isv-coral-soft); transition: background .2s; } .isv-news-item:hover{ background: var(--isv-coral-soft); } .isv-news-cat{ margin: 0; flex: none; box-sizing: border-box; width: 88px; text-align: center; font-size: 11px; font-weight: 700; color: #fff; border-radius: 999px; padding: 3px 8px; } .isv-news-cat--info{ background: var(--isv-coral); } .isv-news-cat--build{ background: var(--isv-amber); } .isv-news-cat--day{ background: var(--isv-green); } .isv-news-date{ margin: 0; flex: none; font-size: 13px; color: var(--isv-muted); } .isv-news-title{ margin: 0; flex: 1; font-size: 14px; } .isv-news-title a{ color: var(--isv-ink); text-decoration: none; } .isv-news-title a:hover{ color: var(--isv-coral-deep); } .isv-news-title a::after{ content: ""; position: absolute; inset: 0; } /* 目的から探すタイル */ .isv-tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .isv-tile{ position: relative; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 3px 12px rgba(191, 138, 110, .10); transition: transform .2s, box-shadow .2s; } .isv-tile:hover{ transform: translateY(-3px); box-shadow: 0 8px 22px rgba(191, 138, 110, .16); } .isv-tile__ic{ width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; } .isv-tile__tx{ margin: 0; font-size: clamp(13px, 1.35vw, 15px); font-weight: 700; color: var(--isv-ink); white-space: nowrap; } .isv-tile{ min-width: 0; } .isv-tile__tx a{ color: inherit; text-decoration: none; } .isv-tile__tx a::after{ content: ""; position: absolute; inset: 0; } /* タイル配色 */ .isv-tile--coral .isv-tile__ic{ background: var(--isv-coral-soft); } .isv-tile--coral .isv-tile__ic::before{ background: var(--isv-coral); } .isv-tile--green .isv-tile__ic{ background: #e9f2dd; } .isv-tile--green .isv-tile__ic::before{ background: var(--isv-green); } .isv-tile--amber .isv-tile__ic{ background: #fbf0d6; } .isv-tile--amber .isv-tile__ic::before{ background: var(--isv-amber); } .isv-tile--blue .isv-tile__ic{ background: #e2eff7; } .isv-tile--blue .isv-tile__ic::before{ background: var(--isv-blue); } .isv-tile--purple .isv-tile__ic{ background: #efe8f5; } .isv-tile--purple .isv-tile__ic::before{ background: var(--isv-purple); } .isv-tile--pink .isv-tile__ic{ background: #fbe6ec; } .isv-tile--pink .isv-tile__ic::before{ background: var(--isv-pink); } /* ---- 強み(4枚・円アイコン) ---- */ .isv-strengths{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; margin-inline: auto; } .isv-strength{ display: flex; gap: 18px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 3px 12px rgba(191, 138, 110, .10); } .isv-strength__ic{ width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center; } .isv-strength__ic::before{ width: 30px; height: 30px; background: #fff; } .isv-strength__body{ flex: 1; } .isv-strength__title{ font-size: 17px; margin: 0 0 6px; } .isv-strength__body p{ font-size: 13.5px; color: var(--isv-muted); line-height: 1.7; margin: 0; } .isv-strength--red .isv-strength__ic{ background: #df6b54; } .isv-strength--red .isv-strength__title{ color: #df6b54; } .isv-strength--green .isv-strength__ic{ background: var(--isv-green); } .isv-strength--green .isv-strength__title{ color: var(--isv-green); } .isv-strength--amber .isv-strength__ic{ background: var(--isv-amber); } .isv-strength--amber .isv-strength__title{ color: var(--isv-amber); } .isv-strength--blue .isv-strength__ic{ background: var(--isv-blue); } .isv-strength--blue .isv-strength__title{ color: var(--isv-blue); } /* 強み帯は coral-soft のtint(モック準拠) */ .isv-section--soft{ background: var(--isv-coral-soft); } /* Instagram連携は公開後に設定予定のため一時非表示(2026-07-16, ユーザー指示)。 * 本文(DB)側は編集しない方針のため、.isv-ig-head を含む囲みセクションごとCSSで隠す。 * 設定が決まり再表示する際はこのルールを削除するだけでよい。 */ .isv-section:has(.isv-ig-head), .wp-block-group:has(.isv-ig-head){ display: none; } /* ---- Instagram ---- */ .isv-ig-head{ display: flex; align-items: center; justify-content: center; gap: .4em; font-size: clamp(19px, 2.4vw, 22px); color: var(--isv-ink); margin: 0 0 26px; } .isv-ig-head.isv-i-instagram::before{ content: ""; width: 1.2em; height: 1.2em; flex: none; background: linear-gradient(45deg, #f09433, #e6683c 30%, #dc2743 50%, #cc2366 70%, #bc1888); -webkit-mask: url(../assets/icons/instagram.svg) center/contain no-repeat; mask: url(../assets/icons/instagram.svg) center/contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } .isv-ig-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 760px; margin-inline: auto; } .isv-ig-cell{ aspect-ratio: 1; border-radius: 12px; background: linear-gradient(135deg, #f0e6dd, #e7dccf); } .isv-ig-note{ text-align: center; margin: 24px 0 0; font-size: 13px; color: var(--isv-muted); } /* block-gap 打ち消し(KB-0001): CSS grid/flex 化したコンテナの子に * is-layout-flow の margin-block-start が乗ると、グリッド行間の余分な空きや * 2カラムの縦ズレ(右カラムが下がる)を招く。gap で間隔を制御するため 0 に。 */ .isv-top-two > *, .isv-news-list > *, .isv-tiles > *, .isv-tile > *, .isv-strengths > *, .isv-strength > *, .isv-ig-grid > *{ margin-block-start: 0; margin-block-end: 0; } /* 全幅(alignfull)セクション内側の左右ガター。 * .isv-align-content は max-width + margin-inline:auto のみで padding が無く、 * viewport が max-width 未満(モバイル)だと内容が画面端に接する。全幅配下にだけ付与 * (通常幅セクションは Arkhe のコンテンツ余白があるため二重ガターを避ける)。 * [BASE-CANDIDATE: align-content-inline-gutter] custom.css へ昇格検討。 */ .alignfull > .isv-align-content{ padding-inline: clamp(1.25rem, 4vw, 2rem); } /* ---- レスポンシブ ---- */ @media (max-width: 860px){ .isv-top-two{ grid-template-columns: 1fr; gap: 44px; } .isv-hero__copy{ position: static; transform: none; max-width: 100%; padding: 22px 6% 6px; background: #fff; } .isv-hero::after{ display: none; } } @media (max-width: 720px){ .isv-strengths{ grid-template-columns: 1fr; } } @media (max-width: 640px){ /* 目的から探す: 2×3 を維持し、タイルは縦積み(アイコン上/ラベル下・中央寄せ)で * 狭い列幅でも長いラベルが収まるようにする(横並びnowrapだと溢れるため)。 */ .isv-tile{ flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 6px; } .isv-tile__ic{ width: 42px; height: 42px; } .isv-tile__tx{ font-size: 12.5px; white-space: normal; line-height: 1.35; } .isv-ig-grid{ grid-template-columns: repeat(2, 1fr); } } /* お知らせ一覧カード: 汎用スタイルは custom.css の .isv-news-* に昇格済み（base v0.7.0）。 * ここは案件配色の微調整と、カテゴリ別ピル色（子カテゴリ slug を href で判定）のみ。 */ .isv-news-card{ border-bottom-color: var(--isv-coral-soft); } .isv-news-card:hover{ background: var(--isv-coral-soft); } .isv-news-card__date{ color: var(--isv-muted); } .isv-news-card__title a{ color: var(--isv-ink); } .isv-news-card__title a:hover{ color: var(--isv-coral-deep); } /* カテゴリ別の色分け（既定=coral は custom.css。build=amber / daily=green を上書き） */ .isv-news-card__cat a[href*="/build/"]{ background: var(--isv-amber); } .isv-news-card__cat a[href*="/daily/"]{ background: var(--isv-green); } /* ========================================================= * TACHIBANA_FAQ_TOC_2026-07-08 * FAQページ(page11)冒頭の目次。各カテゴリ(.isv-faq-cat)へアンカーでジャンプ。 * ヘッダーが sticky(高さ約63px)のため、飛び先に scroll-margin-top を付与。 * ========================================================= */ /* アンカー着地オフセット(sticky ヘッダー分 + 余白)。 * 注: html に scroll-behavior:smooth を付けると当テーマでは * fragment ナビ/scrollTo が動かなくなるため付けない(Arkhe側のスクロール挙動と競合)。 */ .isv-faq-cat{ scroll-margin-top: 84px; } /* 目次カード(生成りtintの枠)。ラベル + チップ状リンク */ .isv-faq-toc{ margin-top: 1.4rem; padding: 1.1rem 1.25rem; background: var(--isv-coral-soft); border-radius: 14px; } .isv-faq-toc__label{ margin: 0 0 .7rem; font-family: var(--isv-font-head); font-weight: 700; color: var(--isv-ink); font-size: 1rem; display: inline-flex; align-items: center; gap: .4em; } .isv-faq-toc__label::before{ content: ""; width: 1.05em; height: 1.05em; flex: none; background: var(--isv-coral); -webkit-mask: url(../assets/icons/book.svg) center/contain no-repeat; mask: url(../assets/icons/book.svg) center/contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } .isv-faq-toc__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; } .isv-faq-toc__list li{ margin: 0; } .isv-faq-toc__list a{ display: inline-flex; align-items: center; gap: .35em; padding: .45rem .9rem; background: #fff; border: 1px solid var(--isv-coral-soft); border-radius: 999px; font-size: .88rem; font-weight: 700; color: var(--isv-ink); text-decoration: none; box-shadow: 0 2px 6px rgba(191, 138, 110, .10); transition: background .2s, color .2s, transform .2s, box-shadow .2s; } .isv-faq-toc__list a::before{ content: "#"; color: var(--isv-coral); font-weight: 700; } .isv-faq-toc__list a:hover{ background: var(--isv-coral); color: #fff; transform: translateY(-1px); box-shadow: var(--isv-shadow-coral); } .isv-faq-toc__list a:hover::before{ color: rgba(255, 255, 255, .8); } /* ========================================================= * TACHIBANA_PAGE_TOPAREA_2026-07-08 * 下層ページのタイトル帯(Arkhe .p-topArea.-noimg = アイキャッチ無し時の * 既定の濃グレー帯)を、生成り(コーラルsoft)地 + 双葉モチーフに。 * 見出し文字は白→濃色(ink)へ。パンくずは帯外の白地にあるため変更不要。 * project.css は Arkhe の後に読み込まれるため同詳細度でも上書きできる。 * ========================================================= */ .p-topArea.-noimg{ background: linear-gradient(160deg, #fdf5f0 0%, var(--isv-coral-soft) 100%); } /* 見出しを濃色に(生成り地で白は読めないため) */ .p-topArea.-noimg .c-pageTitle__main{ color: var(--isv-ink); } /* 双葉モチーフ: coral を薄く、右上に大・左下に小。 * 帯は position:relative; overflow:hidden 済み(Arkhe)。mask で単色着色。 */ .p-topArea.-noimg::before, .p-topArea.-noimg::after{ content: ""; position: absolute; pointer-events: none; z-index: 0; background: var(--isv-coral); -webkit-mask: url(../assets/icons/sprout.svg) center/contain no-repeat; mask: url(../assets/icons/sprout.svg) center/contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } /* Arkhe の .c-filterLayer::before が left/top:0 を持つため、明示的に打ち消す */ .p-topArea.-noimg::before{ width: 160px; height: 140px; left: auto; right: -18px; top: -12px; bottom: auto; opacity: .15; transform: rotate(14deg); } .p-topArea.-noimg::after{ width: 96px; height: 84px; left: 22px; right: auto; top: auto; bottom: -10px; opacity: .11; transform: rotate(-16deg); } /* タイトル本体を双葉より前面に */ .p-topArea.-noimg .p-topArea__body{ position: relative; z-index: 1; } @media (max-width: 640px){ .p-topArea.-noimg::before{ width: 112px; height: 98px; } .p-topArea.-noimg::after{ width: 72px; height: 63px; } } /* TACHIBANA_TIMELINE_DOT_ALIGN: ベース v0.8.0 の custom.css に昇格済み(ここからは除去)。 */ /* ========================================================= * TACHIBANA_HOIKU_VOICE_NOTICE_2026-07-08 * 保育について(ID7)の「保護者・卒園児の声」で使われている * Arkhe notice(-ok=緑)を、コーラルブランドに合わせて着色。 * -ok は本来「成功」用の緑だが当サイトでは声カード専用のため、 * 誤爆回避に body.page-hoiku へスコープする。 * ========================================================= */ .page-hoiku .ark-block-notice.-ok{ background: var(--isv-coral-soft); border: 1px solid #f2c9bb; border-radius: 14px; } .page-hoiku .ark-block-notice.-ok .ark-block-notice__icon{ color: var(--isv-coral); fill: var(--isv-coral); } .page-hoiku .ark-block-notice.-ok .ark-block-notice__title{ color: var(--isv-ink); } /* 空の本文(空

)による余白を詰める */ .page-hoiku .ark-block-notice.-ok .ark-block-notice__body{ display: none; } /* 声カードは全幅だと中央寄せ文がバランスを欠くため、幅を絞って中央寄せ */ .page-hoiku .ark-block-notice.-ok{ max-width: 600px; margin-inline: auto; padding-block: 1.6rem; } /* 本文は左揃え。Arkhe notice 本来の「アイコン左＋テキスト」横並びに戻し、 * アイコンは1行目の高さに合わせて上寄せ(flex-start)。 */ .page-hoiku .ark-block-notice.-ok .ark-block-notice__head{ flex-direction: row; align-items: flex-start; gap: .6rem; } .page-hoiku .ark-block-notice.-ok .ark-block-notice__icon{ width: 22px; height: 22px; margin-top: .2em; } .page-hoiku .ark-block-notice.-ok .ark-block-notice__title{ text-align: left; line-height: 1.9; } /* ========================================================= * TACHIBANA_HOIKU_RASHISA_2026-07-08 * 保育について(ID7)「たちばな保育園らしさ」3カラムが素テキストで寂しいため、 * アイコンバッジ付きカード(coral/green/amber)に。isv-grid--3 + isv-card。 * ========================================================= */ .isv-rashisa{ text-align: center; padding-block: 30px; } .isv-rashisa__ic{ width: 74px; height: 74px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; } .isv-rashisa__ic::before{ content: ""; width: 38px; height: 38px; display: block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-mode: alpha; mask-mode: alpha; } .isv-rashisa__title{ margin: 16px 0 8px; font-size: 1.1rem; color: var(--isv-ink); } .isv-rashisa__text{ margin: 0; font-size: .9rem; color: var(--isv-muted); line-height: 1.85; } /* 配色(バッジ地tint + アイコン色) */ .isv-rashisa--baby .isv-rashisa__ic{ background: var(--isv-coral-soft); } .isv-rashisa--baby .isv-rashisa__ic::before{ background: var(--isv-coral); -webkit-mask-image: url(../assets/icons/baby.svg); mask-image: url(../assets/icons/baby.svg); } .isv-rashisa--sprout .isv-rashisa__ic{ background: #e9f2dd; } .isv-rashisa--sprout .isv-rashisa__ic::before{ background: var(--isv-green); -webkit-mask-image: url(../assets/icons/sprout.svg); mask-image: url(../assets/icons/sprout.svg); } .isv-rashisa--people .isv-rashisa__ic{ background: #fbf0d6; } .isv-rashisa--people .isv-rashisa__ic::before{ background: var(--isv-amber); -webkit-mask-image: url(../assets/icons/people.svg); mask-image: url(../assets/icons/people.svg); } /* ========================================================= * TACHIBANA_VISIT_LIST_CENTER_2026-07-08 * 園見学(ID9)の見学可能な曜日・時間/見学内容リストを中央寄せ。 * チェック(✓)は各項目の左に付くため、リストをブロックごと中央寄せして * 項目自体は左揃えのまま(可読性維持)。 * ========================================================= */ .page-visit .isv-check-list{ width: fit-content; max-width: 100%; margin-inline: auto; } /* ========================================================= * EXPERIMENTAL_GOOGLE_TRANSLATE_WIDGET_2026-07-15 * 多国籍の来訪者向けの簡易翻訳(Google翻訳ウィジェット)。実験的配置。 * 元に戻す場合: このブロックを削除するだけでよい(対応するHTMLは * template-parts/footer.php の同名マーカーを参照。widget自体はGoogle側の * iframeなので、このCSSはレイアウト調整のみ)。 * ========================================================= */ .isv-site-footer__translate { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; padding-block: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.82rem; } .isv-site-footer__translate-label { color: var(--isv-footer-text); opacity: 0.9; font-weight: 600; letter-spacing: 0.02em; } /* Google謹製ウィジェットの既定バナー・ロゴ帯を消し、シンプルなセレクトのみ残す。 * 2026-07-15追記: 旧来の `.goog-te-banner-frame` セレクタは現行のGoogle翻訳ウィジェットには * もう存在せず(クラス名が難読化されたもの (`VIpgJd-...`) に変わっている)、効いていなかった。 * 実機検証の結果、バナーiframeは `id=":N.container"` という末尾パターンを持つため、 * こちらで確実に非表示にする(実機確認済み: kanikamo-web.com/tachibana/、2026-07-15)。 */ .goog-te-gadget-icon { display: none !important; } iframe.skiptranslate[id$=".container"] { display: none !important; } body { top: 0 !important; } .isv-site-footer__translate-widget .goog-te-gadget { font-size: 0 !important; color: transparent !important; } .isv-site-footer__translate-widget .goog-te-gadget .goog-te-combo { margin: 0; padding: 0.3rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; background: #ffffff; color: #4a2f2a; font-size: 0.82rem; } /* フローティングバナー版(常時・全ページ幅共通で右下に固定表示)。 * 2026-07-15: 当初ヘッダーのナビ行にGoogleウィジェットの2個目インスタンスを追加していたが、 * Googleウィジェットは1ページに複数設置しても2個目が実際には描画されない制約があると判明 * (実機検証で確認: コンテナが空のまま)。ヘッダー埋め込みをやめ、常時表示のフローティング * バナー+自前UI(googtrans cookieを直接書き換え)に置き換えた。 */ .isv-translate-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 999px; background: #ffffff; box-shadow: 0 8px 24px rgba(20, 20, 20, 0.18); border: 1px solid rgba(0, 0, 0, 0.08); } .isv-translate-float__label { font-size: 0.9rem; line-height: 1; } /* 2026-07-15: 画面下端に固定配置しているため、ネイティブ