@charset "UTF-8";
/* =====================================================================
   細本和子の六星占術 共通CSS
   旧デザイン（2カラム・青アクセント）を踏襲し、背景gifをすべてCSSに置換。
   ライブラリ依存なし。
   ===================================================================== */

/* ========VARIABLES======== */
:root {
   --accent: #3298D3;        /* 見出しの線 */
   --accent-strong: #0096E7; /* フッター帯・ホバー */
   --accent-dark: #0082C6;
   --link: #0172AB;
   --text: #333;
   --line: #DCDCDC;
   --line-soft: #D4D8DB;
   --bg: #fff;
   --page-bg: #fff;
   --sub-width: 270px;
   --gap: 30px;
   --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect width='12' height='12' rx='2' fill='%230096E3'/%3E%3Cpath d='M4.5 3.2 8.6 6l-4.1 2.8z' fill='%23fff'/%3E%3C/svg%3E");
   --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 1l3 3-3 3' fill='none' stroke='%230082C6' stroke-width='1.6'/%3E%3C/svg%3E");
   --icon-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Cpath d='M3 0l3 4H0z' fill='%23333'/%3E%3C/svg%3E");
}

/* ========BASIC======== */
*, *::before, *::after {
   box-sizing: border-box;
}

html {
   overflow-y: scroll;
   scroll-behavior: smooth;          /* 旧 common.js（jQuery）のスムーススクロールを置換 */
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
}

body {
   margin: 0;
   line-height: 1.7;
   letter-spacing: 1px;
   font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, Verdana, sans-serif;
   font-size: 1rem;
   color: var(--text);
   background: var(--page-bg);
}

a {
   color: var(--text);
   text-decoration: none;
}

a:hover {
   color: var(--link);
}

a:focus-visible {
   outline: 2px solid var(--accent-strong);
   outline-offset: 2px;
}

img {
   border: 0;
   vertical-align: bottom;
   max-width: 100%;
   height: auto;
}

h1, h2, h3, h4, h5, h6 {
   margin: 0;
}


/* ========TEMPLATE LAYOUT======== */
/* 旧: 1280px固定＋左右の影gif → max-width＋box-shadow */
#top {
   max-width: 1280px;
   margin: 0 auto;
   background: var(--bg);
   box-shadow: 0 0 6px rgba(0, 0, 0, .12);
}

#header {
   padding: 0 10px;
}

/* 旧: float の2カラム → Grid */
#contents {
   display: grid;
   grid-template-columns: var(--sub-width) minmax(0, 1fr);
   column-gap: var(--gap);
   padding: 20px 25px 0;
}

#sub  { grid-column: 1; grid-row: 1; }
#main { grid-column: 2; grid-row: 1; min-width: 0; }

#footer {
   padding: 0 25px;
}


/* ========HEADER======== */
#header .site-logo {
   margin: 0;
   padding: 10px 0;
   line-height: 70px;
}

#header .site-logo img {
   vertical-align: middle;
}


/* ========SUB (左サイドバー)======== */
#sub .section {
   margin-bottom: 10px;
   padding-left: 10px;
}

#menu ul {
   margin: 0 0 20px;
   padding: 0;
   list-style: none;
}

#menu li a {
   display: block;
   width: 220px;
   padding: 10px 0 10px 20px;
   color: var(--text);
   border-bottom: 1px solid var(--line);
   background: var(--icon-menu) 0 12px / 12px 12px no-repeat;
}

#menu li a:hover,
#menu li a[aria-current="page"] {
   color: var(--accent-strong);
}


/* ========MAIN======== */
#main a {
   color: var(--link);
}

#main a:hover {
   text-decoration: underline;
}

/* 記事タイトル */
#main .entry-title {
   margin: 0 0 16px;
   padding: 4px 0 10px;
   font-size: 1.5rem;
   line-height: 1.45;
   letter-spacing: .5px;
   color: var(--text);
   border-bottom: 3px solid var(--accent);
}

/* アイキャッチ */
#main .eyecatch {
   margin: 0 0 20px;
}

#main .eyecatch img {
   display: block;
   width: 100%;
   aspect-ratio: 1200 / 670;
   object-fit: cover;
   border-radius: 4px;
}

#main .lead {
   font-size: 1.05rem;
}

/* トップのプロフィール枠 */
#main .icatch {
   margin-bottom: 20px;
}

.profile {
   display: flex;
   gap: 20px;
   align-items: flex-start;
   padding: 16px;
   background: #f7f9fa;
   border: 1px solid var(--line);
}

.profile img {
   flex: 0 0 auto;
   width: 160px;
}

.profile-name {
   margin: 0 0 6px !important;
   font-size: 1.2rem;
   font-weight: bold;
}

.profile-name span {
   font-size: .85rem;
   font-weight: normal;
}

.profile dl {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 2px 12px;
   margin: 0 0 10px;
}

.profile dt {
   color: var(--accent-dark);
   font-weight: bold;
}

.profile dd {
   margin: 0;
}

/* 細本和子のひとこと */
.kazuko-say {
   display: flex;
   gap: 14px;
   margin: 1.5em 0;
   padding: 14px 16px;
   background: #f2f8fc;
   border: 1px solid #cfe3f1;
   border-radius: 6px;
}

.kazuko-say::before {
   content: "";
   flex: 0 0 56px;
   height: 56px;
   border-radius: 50%;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px #cfe3f1;
   background: url("../images/kazuko-icon.jpg") 50% 30% / cover no-repeat;
}

.kazuko-say > div::before {
   content: "細本和子のひとこと";
   display: block;
   margin-bottom: 2px;
   font-size: .85rem;
   font-weight: bold;
   color: var(--accent-dark);
}

#main .kazuko-say p {
   margin: 0 0 .5em;
}

#main .kazuko-say p:last-child {
   margin-bottom: 0;
}

/* ポイントまとめ */
.point {
   margin: 1.5em 0;
   padding: 12px 16px;
   border: 2px solid var(--accent);
   border-radius: 4px;
}

.point-title {
   margin: 0 0 4px !important;
   font-weight: bold;
   color: var(--accent-dark);
}

#main .point ul,
#main .point ol {
   margin: 0;
   padding-left: 1.4em;
}

/* 記事末尾の著者枠 */
.author-box {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   margin: 2.5em 0 1em;
   padding: 14px 16px;
   border-top: 2px solid var(--accent);
   background: #f7f9fa;
}

.author-box img {
   flex: 0 0 auto;
   width: 80px;
}

#main .author-box p {
   margin: 0 0 4px;
   font-size: .9rem;
}

.author-label {
   color: #777;
}

#main .author-name {
   font-size: 1.05rem;
   font-weight: bold;
}

/* 本文中の埋め込み枠 */
.inline-unit,
.c-box {
   margin: 2em 0;
}

/* 旧: border-top＋グラデーションgif */
#main h2 {
   margin: 1em 0 8px;
   padding: 5px;
   font-size: 1rem;
   font-weight: bold;
   color: var(--text);
   border-top: 2px solid var(--accent);
   border-bottom: 2px solid var(--line-soft);
   background: linear-gradient(#fff, #eeefef);
}

/* 旧: border-left＋点線gif */
#main h3 {
   margin: 1em 0 3px;
   padding: 0 0 3px 8px;
   font-size: 1rem;
   border-left: 5px solid var(--accent);
   background: repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 2px) 0 100% / 100% 1px no-repeat;
}

#main h4 {
   margin: 5px 0 2px;
   padding: 2px;
   font-size: 1rem;
   background: #d0dfe9;
}

#main p {
   margin: 0 0 1em;
}

#main ul,
#main ol {
   margin: 0 0 1em;
}

#main table {
   width: 100%;
   border-collapse: collapse;
}

#main th,
#main td {
   padding: 5px;
   text-align: left;
   border: 1px solid #ddd;
}

#main th {
   background: #e0eef8;
}

/* 記事下のメニュー（リンク・記事一覧） */
#main .article-nav {
   margin-top: 2em;
}

#main .menu {
   margin: 10px 0 20px;
   padding: 0;
   list-style: none;
}

#main .menu li {
   padding: 4px 0;
   line-height: 1.5;
}

#main .menu li a {
   display: inline-block;
   padding-left: 14px;
   background: var(--icon-list) 0 .5em / 8px 8px no-repeat;
}

#main .menu li a[aria-current="page"] {
   color: var(--text);
   font-weight: bold;
}

/* ページトップ */
#pageTop {
   margin: 0;
   padding: 20px 0 10px;
   text-align: right;
}

#main #pageTop a {
   padding-left: 12px;
   color: var(--link);
   background: var(--icon-top) 0 50% / 6px 4px no-repeat;
}


/* ========FOOTER======== */
.disclaimer {
   margin: 0;
   padding: 10px 10px 8px;
   font-size: .8rem;
   color: #777;
   text-align: center;
   border-top: 1px dotted var(--line);
}

.copyright {
   margin: 0;
   padding: 5px 10px;
   color: #fff;
   text-align: center;
   background: var(--accent-strong);
}

.copyright small {
   font-size: 1rem;
}


/* ========SMARTPHONE (799px以下)======== */
/* 旧: サイドバーを display:none（スマホでメニューが消えていた）
   → メニューをヘッダー下の横並びナビとして表示 */
@media (max-width: 799px) {
   #top {
      box-shadow: none;
   }

   #header .site-logo {
      line-height: 1.4;
   }

   #main .entry-title {
      font-size: 1.25rem;
   }

   .profile {
      flex-direction: column;
      align-items: center;
   }

   .profile img {
      width: 140px;
   }

   .kazuko-say::before {
      flex-basis: 44px;
      height: 44px;
   }

   .author-box img {
      width: 60px;
   }

   #contents {
      display: block;
      padding: 0 12px;
   }

   #sub .section {
      display: none;
   }

   #menu ul {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      margin: 0 -12px 16px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #f7f9fa;
   }

   #menu li {
      flex: 1 1 50%;
   }

   #menu li.banner {
      flex: 0 0 auto;
   }

   #menu li a {
      width: auto;
      padding: 10px 8px 10px 26px;
      font-size: .9rem;
      letter-spacing: 0;
      border-bottom: 0;
      background-position: 8px 50%;
   }

   #menu li.banner a {
      padding: 6px 12px;
      background: none;
   }

   #footer {
      padding: 0;
   }

   .copyright small {
      font-size: .85rem;
   }
}