/**
Theme Name: CIL-Hikari
Text Domain: cil-hikari
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: astra
*/

/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: https://wpastra.com/about/
Description: Astra Child Theme
Version: 1.0.0
Template: astra
Text Domain: astra-child
*/

/* =========================================================
   CIL Column CSS (FINAL / Replace-All)
   Scope: #cil-column-scope の中だけ
   - Max width: 1200px
   - Borderless (枠なし)
   - Long-read typography (読み物向け)
   ========================================================= */

/* ---------- Scope breakout (親コンテナ幅を突破して1200pxを作る) ---------- */
#cil-column-scope{
  /* palette */
  --cil-max: 1200px;
  --cil-accent: #F28D80;     /* コーラル */
  --cil-accent-2: #1A3334;   /* 濃い青緑 */
  --cil-warm: #F89F07;       /* オレンジ */
  --cil-peach: #FEF5EF;      /* ピーチ */
  --cil-cream: #FEF4E2;      /* クリーム */
  --cil-muted: #6d6875;
  --cil-text: #1A3334;

  /* breakout */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  color: var(--cil-text);
  font-family: inherit;
}

#cil-column-scope,
#cil-column-scope *{
  box-sizing: border-box;
}

/* Astra/Elementorの “本文側の変な余白” を吸収 */
#cil-column-scope .elementor-widget-container{
  margin: 0 !important;
}

/* ---------- Container (1200px) ---------- */
#cil-column-scope .cil-column{
  max-width: var(--cil-max);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 640px){
  #cil-column-scope .cil-column{
    padding: 0 14px;
  }
}

/* ---------- Typography (Long read) ---------- */
#cil-column-scope .cil-body{
  font-size: 17px;
  line-height: 2.05;
}
#cil-column-scope .cil-body p{
  margin: 0 0 18px;
}
#cil-column-scope .cil-body a{
  color: var(--cil-accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cil-column-scope .cil-body strong{
  color: var(--cil-accent-2);
  font-weight: 800;
}

@media (max-width: 640px){
  #cil-column-scope .cil-body{
    font-size: 16px;
    line-height: 1.95;
  }
}

/* ---------- Borderless policy (枠/影/背景を付けない) ---------- */
#cil-column-scope .cil-hero,
#cil-column-scope .cil-toc,
#cil-column-scope .cil-box,
#cil-column-scope .cil-box--accent,
#cil-column-scope .cil-faq{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* ---------- HERO ---------- */
#cil-column-scope .cil-hero{
  position: relative;
  padding: 0 0 18px;
}
#cil-column-scope .cil-hero:before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width: 260px;
  height: 260px;
  background:
    radial-gradient(circle at 30% 30%, rgba(242,141,128,.16), rgba(242,141,128,0) 62%),
    radial-gradient(circle at 70% 60%, rgba(248,159,7,.12), rgba(248,159,7,0) 62%);
  pointer-events:none;
}

/* badges */
#cil-column-scope .cil-badges{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
#cil-column-scope .cil-badge{
  display:inline-flex !important;
  align-items:center !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(254,244,226,.75) !important; /* クリーム */
  color: var(--cil-accent-2) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* title/lead/meta */
#cil-column-scope .cil-title{
  margin: 6px 0 10px;
  font-weight: 900;
  line-height: 1.22;
  font-size: clamp(28px, 3.2vw, 44px);
  color: var(--cil-accent-2);
}
#cil-column-scope .cil-lead{
  margin: 0;
  color: var(--cil-muted);
  line-height: 1.85;
  font-size: 16px;
}
#cil-column-scope .cil-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(242,141,128,.35);
  color: var(--cil-muted);
  font-size: 13px;
}
#cil-column-scope .cil-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#cil-column-scope .cil-meta .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(242,141,128,.55);
  display:inline-block;
}

/* ---------- TOC (枠なし) ---------- */
#cil-column-scope .cil-toc{
  margin-top: 18px;
  padding: 0;
}
#cil-column-scope .cil-toc-title{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 15px;
  color: var(--cil-accent-2);
}
#cil-column-scope .cil-toc ol{
  margin: 0;
  padding-left: 1.2em;
}
#cil-column-scope .cil-toc li{
  margin: 8px 0;
}
#cil-column-scope .cil-toc a{
  color: var(--cil-text);
  text-decoration: none;
  border-bottom: 1px dotted rgba(242,141,128,.45);
}
#cil-column-scope .cil-toc a:hover{
  border-bottom-style: solid;
}

/* ---------- Headings (読み物風：下線) ---------- */
#cil-column-scope .cil-body h2{
  margin: 44px 0 14px;
  font-weight: 900;
  line-height: 1.35;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--cil-accent-2);
  position: relative;
}
#cil-column-scope .cil-body h2::after{
  content:"";
  display:block;
  width: 72px;
  height: 3px;
  margin-top: 10px;
  border-radius: 99px;
  background: rgba(242,141,128,.55);
}
#cil-column-scope .cil-body h3{
  margin: 22px 0 10px;
  font-weight: 900;
  line-height: 1.45;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--cil-accent-2);
}

#cil-column-scope .cil-body ul,
#cil-column-scope .cil-body ol{
  margin: 0 0 18px;
  padding-left: 1.2em;
}
#cil-column-scope .cil-body li{
  margin: 6px 0;
}

/* ---------- Separator ---------- */
#cil-column-scope .cil-hr{
  border: none;
  height: 1px;
  margin: 26px 0;
  background: linear-gradient(90deg, rgba(242,141,128,0), rgba(242,141,128,.35), rgba(248,159,7,0));
}

/* ---------- NOTE (チェック帯) ---------- */
#cil-column-scope .cil-note{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(248,159,7,.14);
  margin: 18px 0;
}
#cil-column-scope .cil-note p{
  margin: 0;
}
#cil-column-scope .cil-note .icon{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(248,159,7,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  line-height: 1;
  flex: 0 0 auto;
  color: var(--cil-accent-2);
}
/* 保険：もし「!」がpで入っていてもアイコン化 */
#cil-column-scope .cil-note > p:first-child{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(248,159,7,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  line-height: 1;
  flex: 0 0 auto;
}

/* ---------- CTA (淡い面だけ / 枠なし) ---------- */
#cil-column-scope .cil-cta{
  margin: 24px 0 10px;
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(254,245,239,.92); /* ピーチ */
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
#cil-column-scope .cil-cta .txt{
  min-width: 240px;
}
#cil-column-scope .cil-cta .txt .t{
  margin: 0 0 4px;
  font-weight: 900;
  color: var(--cil-accent-2);
}
#cil-column-scope .cil-cta .txt .d{
  margin: 0;
  color: var(--cil-muted);
  font-size: 14px;
  line-height: 1.8;
}
#cil-column-scope .cil-cta .btns{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
#cil-column-scope .cil-cta a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  transition: transform .15s ease, filter .15s ease;
}
#cil-column-scope .cil-cta a.btn--primary{
  background: var(--cil-warm);
  color: #fff;
}
#cil-column-scope .cil-cta a.btn--ghost{
  background: #fff;
  color: var(--cil-accent-2);
}
#cil-column-scope .cil-cta a.btn:hover{
  filter: brightness(.99);
  transform: translateY(-1px);
}
/* ===== TOC: 区切りを強く + 目次文字を淡いピンクに ===== */
#cil-column-scope .cil-toc{
  margin-bottom: 28px;                 /* 本文との余白 */
  padding-bottom: 18px;                /* 目次内の下余白 */
  border-bottom: 1px dashed rgba(242,141,128,.35); /* うっすら仕切り */
}

/* 目次だけ淡いピンク */
#cil-column-scope .cil-toc,
#cil-column-scope .cil-toc-title,
#cil-column-scope .cil-toc li{
  color: rgba(242,141,128,.85);
}

/* 目次リンク（点線下線も淡いピンクへ） */
#cil-column-scope .cil-toc a{
  color: rgba(242,141,128,.85);
  border-bottom-color: rgba(242,141,128,.45);
}

/* ホバー時：少しだけ濃く */
#cil-column-scope .cil-toc a:hover{
  color: rgba(242,141,128,1);
  border-bottom-color: rgba(242,141,128,.7);
}