/*
Theme Name: KICCA
Theme URI: https://example.com/kicca
Author: KICCA
Description: 「きっかけを、価値に。」— AI・教育・コンサルティング企業KICCAのフルサイト編集(FSE)対応ブロックテーマ。サイトエディターで見出し・本文・ボタン・ナビゲーションを直接編集できます。
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kicca
*/

/* ==========================================================================
   Dark-mode aware brand tokens (mirrors the design's original palette).
   These are independent from WP's --wp--preset--* variables so the
   decorative CSS below stays simple and self-contained.
   ========================================================================== */
:root {
  --k-gold: #b8935a;
  --k-gold-dark: #9c7943;
  --k-brand-dark: #14161d;
  --k-heading: #17181c;
  --k-text: #2a2a2a;
  --k-muted: #6b6b6b;
  --k-surface: #ffffff;
  --k-surface-soft: #f7f5f2;
  --k-surface-card: #ffffff;
  --k-border: #e7e3dc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --k-gold: #c9a26c;
    --k-gold-dark: #b8905a;
    --k-heading: #f2efe9;
    --k-text: #d6d2c9;
    --k-muted: #9b968c;
    --k-surface: #17181d;
    --k-surface-soft: #1e1f26;
    --k-surface-card: #1c1d24;
    --k-border: #33343d;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
.site-header,
.hero,
.about,
.service,
.why,
.info,
.contact,
.site-footer {
  --local-surface: var(--k-surface);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--k-surface) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--k-border);
  padding: 0 !important;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 18px 32px;
}
.logo .wp-block-site-title,
.logo-en {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
}
.logo .wp-block-site-title a { color: var(--k-heading); text-decoration: none; }
.logo-jp,
.logo .wp-block-site-tagline {
  font-size: 10px !important;
  letter-spacing: 0.15em;
  color: var(--k-muted);
  margin: 2px 0 0;
}

.main-nav .wp-block-navigation__container { gap: 30px; }
.main-nav a.wp-block-navigation-item__content {
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--k-text);
  padding: 0;
}
.main-nav a.wp-block-navigation-item__content:hover { color: var(--k-gold); }
.main-nav .wp-block-navigation__responsive-container.is-menu-open,
.main-nav .wp-block-navigation__responsive-dialog {
  background: var(--k-surface);
}

.header-cta.wp-block-button .wp-block-button__link {
  font-size: 13px;
  padding: 11px 22px;
}

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.section-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}
.eyebrow {
  font-size: 12px !important;
  letter-spacing: 0.2em;
  color: var(--k-gold) !important;
  font-weight: 600;
  margin-bottom: 4px !important;
}
.section-heading { text-align: center; }
.section-heading h2 { font-size: 30px !important; letter-spacing: 0.05em; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--k-text);
}
.link-more:hover { color: var(--k-gold); }

/* Buttons: outline style refinement for the "is-style-outline" core variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--k-heading);
  color: var(--k-heading);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--k-heading);
  color: var(--k-surface);
}
.btn-outline-sm .wp-block-button__link {
  font-size: 13px;
  padding: 10px 22px;
  border: 1px solid var(--k-border);
  border-radius: 3px;
  color: var(--k-text);
  background: transparent;
}
.btn-outline-sm .wp-block-button__link:hover {
  border-color: var(--k-gold);
  color: var(--k-gold);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero.wp-block-cover {
  min-height: 640px !important;
}
.hero.wp-block-cover::before,
.hero .wp-block-cover__background {
  background:
    linear-gradient(100deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.75) 38%, rgba(20,22,28,0.55) 62%, rgba(20,22,28,0.85) 100%),
    linear-gradient(200deg, #fbeed9 0%, #dfe7ef 35%, #9fb3c8 60%, #3c4a5c 85%, #171d26 100%) !important;
  opacity: 1 !important;
}
.hero .wp-block-cover__inner-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  text-align: left;
}
.hero h1 {
  font-size: 52px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.03em;
  color: #1c1c1c !important;
  max-width: 620px;
}
.hero p {
  font-size: 15px !important;
  color: #2a2a2a !important;
  max-width: 460px;
}
.hero .wp-block-buttons { margin-top: 12px; }
.hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: #1c1c1c;
  color: #fff;
}
.hero .wp-block-button.is-style-outline .wp-block-button__link {
  color: #1c1c1c;
  border-color: #1c1c1c;
}
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #1c1c1c;
  color: #fff;
}

/* ==========================================================================
   About
   ========================================================================== */
.about { padding: 100px 0; }
.about-text h2 { font-size: 30px !important; }
.value-item .eyebrow { margin-bottom: 10px !important; }
.value-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
}
.value-icon-mission { background-image: var(--icon-mission); }
.value-icon-vision { background-image: var(--icon-vision); }
.value-icon-value { background-image: var(--icon-value); }
.value-label {
  font-size: 12px !important;
  letter-spacing: 0.15em;
  color: var(--k-gold) !important;
  font-weight: 600;
}

/* ==========================================================================
   Service
   ========================================================================== */
.service { padding: 100px 0; background: var(--k-surface-soft); }
.service-card {
  background: var(--k-surface-card);
  border: 1px solid var(--k-border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.08); }
.service-thumb.wp-block-cover { min-height: 150px !important; }
.thumb-1 .wp-block-cover__background { background: linear-gradient(135deg, #1c2430, #3d4c5e) !important; }
.thumb-2 .wp-block-cover__background { background: linear-gradient(135deg, #ece3d8, #cbb89a) !important; }
.thumb-3 .wp-block-cover__background { background: linear-gradient(135deg, #232323, #55606b) !important; }
.thumb-4 .wp-block-cover__background { background: linear-gradient(135deg, #e7ded0, #b9a37f) !important; }
.service-body { padding: 24px; position: relative; }
.service-icon {
  position: absolute;
  top: -22px;
  left: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--k-gold);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(184,147,90,0.4);
}
.service-body h3 { font-size: 17px !important; margin: 10px 0 16px !important; }
.check-list { font-size: 13px; }
.check-list li {
  color: var(--k-text);
  padding-left: 20px;
  position: relative;
  list-style: none;
  margin-bottom: 8px;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--k-gold);
  font-weight: 700;
}

/* ==========================================================================
   Why
   ========================================================================== */
.why { padding: 100px 0; }
.why-item { text-align: center; }
.why-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 1px solid var(--k-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}
.why-icon-1 { background-image: var(--icon-why-1); }
.why-icon-2 { background-image: var(--icon-why-2); }
.why-icon-3 { background-image: var(--icon-why-3); }
.why-icon-4 { background-image: var(--icon-why-4); }
.why-num {
  font-size: 12px !important;
  letter-spacing: 0.15em;
  color: var(--k-gold) !important;
  font-weight: 700;
}
.why-item h3 { font-size: 17px !important; }
.why-item p { font-size: 13px !important; color: var(--k-muted) !important; }

/* ==========================================================================
   Info: message / news / column
   ========================================================================== */
.info { padding: 90px 0; background: var(--k-surface-soft); }
.info-block {
  background: var(--k-surface-card);
  border: 1px solid var(--k-border);
  padding: 32px;
  height: 100%;
}
.message-photo.wp-block-cover { min-height: 220px !important; margin-bottom: 24px !important; }
.message-photo .wp-block-cover__background { background: linear-gradient(150deg, #efe6d8, #c9b393) !important; }
.message-text h3 { font-size: 20px !important; }
.message-text .quote { font-family: var(--wp--preset--font-family--serif); font-size: 16px !important; color: var(--k-heading) !important; }
.info-block h3 { font-size: 18px !important; }

.post-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--k-border);
  list-style: none;
  font-size: 13px;
}
.post-list li:first-child { padding-top: 0; }
.post-list .date { display: block; color: var(--k-gold); font-size: 12px; letter-spacing: 0.05em; margin-bottom: 4px; }

.thumb-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--k-border);
  list-style: none;
  font-size: 12.5px;
  color: var(--k-text);
}
.thumb-list li:first-child { padding-top: 0; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact.wp-block-cover { padding: 40px 0 !important; }
.contact .wp-block-cover__background {
  background: linear-gradient(120deg, var(--k-brand-dark) 0%, #1d212b 55%, #2a2f3b 100%) !important;
  opacity: 1 !important;
}
.contact .wp-block-cover__inner-container { max-width: 1160px; margin: 0 auto; padding: 0 32px; width: 100%; }
.contact-text h2 { color: #fff !important; font-size: 30px !important; }
.contact-text p { color: #d7d7d7 !important; font-size: 14px !important; }
.contact-sub { font-size: 13px; color: #cfcfcf; }
.contact-info ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  list-style: none;
  color: #fff;
}
.contact-info .icon { color: var(--k-gold); width: 18px; text-align: center; }
.btn-gold .wp-block-button__link { background: var(--k-gold); color: #fff; }
.btn-gold .wp-block-button__link:hover { background: var(--k-gold-dark); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--k-brand-dark); color: #cfcfcf; padding: 56px 0 24px; }
.footer-inner {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 32px;
}
.footer-logo .wp-block-site-title a { color: #fff; }
.footer-logo .wp-block-site-tagline { color: #9a9a9a; }
.footer-nav a.wp-block-navigation-item__content {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: #cfcfcf;
  padding: 0;
}
.footer-nav a.wp-block-navigation-item__content:hover { color: var(--k-gold); }
.footer-social a { color: #cfcfcf; font-size: 16px; }
.footer-social a:hover { color: var(--k-gold); }
.copyright { text-align: center; font-size: 11.5px !important; color: #8a8a8a !important; margin-top: 24px !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 782px) {
  .hero h1 { font-size: 34px !important; }
  .service-icon { top: -20px; }
}
@media (max-width: 480px) {
  .section-inner { padding: 0 20px; }
  .hero .wp-block-cover__inner-container,
  .header-inner { padding: 0 20px; }
  .hero h1 { font-size: 28px !important; }
}

/* ==========================================================================
   Decorative icon data-URIs (brand gold line icons, swap freely)
   ========================================================================== */
:root {
  --icon-mission: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8935a' stroke-width='1.6'%3E%3Ccircle cx='24' cy='24' r='6'/%3E%3Ccircle cx='10' cy='14' r='3'/%3E%3Ccircle cx='38' cy='14' r='3'/%3E%3Ccircle cx='10' cy='34' r='3'/%3E%3Ccircle cx='38' cy='34' r='3'/%3E%3Cpath d='M19 20l-6-4M29 20l6-4M19 28l-6 4M29 28l6 4'/%3E%3C/svg%3E");
  --icon-vision: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8935a' stroke-width='1.6'%3E%3Cpath d='M6 24c6-10 30-10 36 0-6 10-30 10-36 0z'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3C/svg%3E");
  --icon-value: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8935a' stroke-width='1.6'%3E%3Cpath d='M24 6l4 12 12 2-9 8 3 12-10-7-10 7 3-12-9-8 12-2z'/%3E%3C/svg%3E");
  --icon-why-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8935a' stroke-width='1.6'%3E%3Cpath d='M14 30l-6 6M20 24l-8 8M30 14l-8 8'/%3E%3Cpath d='M28 8l12 12-6 6L22 14z'/%3E%3C/svg%3E");
  --icon-why-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8935a' stroke-width='1.6'%3E%3Ccircle cx='24' cy='24' r='4'/%3E%3Cellipse cx='24' cy='24' rx='18' ry='7'/%3E%3Cellipse cx='24' cy='24' rx='18' ry='7' transform='rotate(60 24 24)'/%3E%3Cellipse cx='24' cy='24' rx='18' ry='7' transform='rotate(120 24 24)'/%3E%3C/svg%3E");
  --icon-why-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8935a' stroke-width='1.6'%3E%3Cpath d='M8 12h32M8 24h32M8 36h20'/%3E%3C/svg%3E");
  --icon-why-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b8935a' stroke-width='1.6'%3E%3Cpath d='M24 4v8M24 36v8M4 24h8M36 24h8'/%3E%3Ccircle cx='24' cy='24' r='10'/%3E%3C/svg%3E");
}