/*
Theme Name: KYS Light (Lightning-like)
Author: Your Team
Description: Elementor前提の超軽量オリジナルテーマ。ヘッダー/フッター/パンくず/スマホ電話ボタン/投稿1-3(CPT)。
Version: 1.0.0
Text Domain: kys-light
*/

:root{
  --kys-container: 750px;     /* 通常（スマホ/タブレット含む）基準幅 */
  --kys-gutter: 16px;
  --kys-text: #222;
  --kys-muted: #666;
  --kys-border: #e6e6e6;
  --kys-bg: #fff;
  --kys-link: #1e73be;
  --kys-header-h: 64px;       /* ヘッダー高さ目安 */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  color: var(--kys-text);
  background: var(--kys-bg);
  line-height: 1.75;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}

a{ color: var(--kys-link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.kys-container{
  width: min(100%, var(--kys-container));
  margin: 0 auto;
  padding: 0 var(--kys-gutter);
}

/* =========================
   ヘッダー（上部固定＋追従）
   ========================= */
.kys-header{
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid var(--kys-border);
  background: #fff;
}

.kys-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  min-height: var(--kys-header-h);
}

.kys-brand{
  display:flex; align-items:center; gap:10px;
  min-width: 220px;
}
.kys-site-title{
  font-size: 16px;
  margin:0;
  font-weight: 700;
  line-height: 1.2;
}
.kys-site-desc{
  margin:0;
  font-size: 12px;
  color: var(--kys-muted);
  line-height: 1.2;
}

/* メニュー（シンプル） */
.kys-nav ul{
  list-style:none;
  display:flex;
  gap: 10px;
  margin:0; padding:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.kys-nav a{
  display:inline-block;
  padding: 8px 10px;
  border-radius: 6px;
}
.kys-nav a:hover{
  background: #f5f5f5;
  text-decoration:none;
}

/* =========================
   スマホ専用 電話ボタン
   ========================= */
.kys-call{
  display:none; /* 基本は非表示 */
}
.kys-call a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--kys-border);
  background: #fff;
  text-decoration:none;
  white-space: nowrap;
}
.kys-call small{
  color: var(--kys-muted);
  font-size: 11px;
  line-height: 1.2;
}
.kys-call strong{
  color: var(--kys-text);
  font-size: 13px;
  line-height: 1.2;
}

/* 768px以下（スマホ想定）：電話ボタン表示＆メニュー縦並び */
@media (max-width: 768px){
  .kys-header-inner{ flex-direction:column; align-items:flex-start; padding: 10px 0; }
  .kys-nav ul{ width:100%; justify-content:flex-start; }
  .kys-call{ display:block; }
}

/* =========================
   パンくず
   ========================= */
.kys-breadcrumb{
  border-bottom: 1px solid var(--kys-border);
  background: #fafafa;
  font-size: 12px;
  color: var(--kys-muted);
}
.kys-breadcrumb a{ color: inherit; text-decoration: underline; }
.kys-breadcrumb-inner{
  padding: 8px 0;
}

/* =========================
   コンテンツ
   ========================= */
.kys-content{
  padding: 18px 0 40px;
}

/* フッター */
.kys-footer{
  border-top: 1px solid var(--kys-border);
  padding: 18px 0;
  color: var(--kys-muted);
  font-size: 13px;
}
.kys-footer-inner{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.kys-footer a{ color: inherit; text-decoration: underline; }

/* =========================
   重要：PCだけElementor全幅を許可
   - タブレット/スマホ：750px以内
   - PC：elementor-page のときだけ外枠制限を解除
   ========================= */
@media (max-width: 1024px){
  .kys-content > .kys-container{
    width: min(100%, var(--kys-container));
    max-width: var(--kys-container);
    padding-left: var(--kys-gutter);
    padding-right: var(--kys-gutter);
  }
}

@media (min-width: 1025px){
  body.elementor-page .kys-content > .kys-container{
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 管理バー対策（少しだけ） */
body.admin-bar .kys-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .kys-header{ top: 46px; }
}
