/* ============================================================
   ThemeSimplicityPlus - theme.css
   NextCode テーマスタジオ (AI) 自動生成: 2026-07-07 08:37
   コンセプト: シンプルながらも高機能で、ブロックエディターの利用を最大限に活かしたテーマです。洗練されたデザインと使いやすさを両立し、ユーザーがコンテンツに集中できる環境を提供します。レスポンシブデザインにより、どのデバイスでも美しい表示を実現します。
   ============================================================ */

:root{
  --nc-brand:#005f73; --nc-brand-dark:#0a9396; --nc-accent:#94d2bd;
  --nc-bg:#e9d8a6; --nc-ink:#001219; --nc-line:#ca6702;
  --nc-header-bg:#ee9b00; --nc-header-ink:#001219;
  --nc-footer-bg:#94d2bd; --nc-footer-ink:#001219;
  --nc-radius:8px;
  --nc-font-display:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --nc-font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}

/* ===== AI generated design ===== */
/*
Theme Name: SimplicityPlus
Description: SimplicityPlus is a high-functionality theme that maximizes the use of the block editor. It combines sophisticated design and usability to provide an environment where users can focus on content. Responsive design ensures beautiful display on any device.
*/

/* Root variables */
:root {
    --nc-brand: #005f73;
    --nc-brand-dark: #0a9396;
    --nc-accent: #94d2bd;
    --nc-bg: #e9d8a6;
    --nc-ink: #001219;
    --nc-line: #ca6702;
    --nc-header-bg: #ee9b00;
    --nc-header-ink: #001219;
    --nc-footer-bg: #94d2bd;
    --nc-footer-ink: #001219;
    --nc-radius: 8px;
    --nc-font-display: 'Zen Kaku Gothic New', sans-serif;
    --nc-font-body: 'Noto Sans JP', sans-serif;
    --nc-drawer-bg: #94d2bd;
    --nc-drawer-ink: #001219;
    --nc-burger-color: #001219;
}

/* Base styles */
body.nc-body {
    background-color: var(--nc-bg);
    color: var(--nc-ink);
    font-family: var(--nc-font-body);
    line-height: 1.7;
}

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

a:hover {
    color: var(--nc-brand-dark);
}

/* Header styles */
.nc-header {
    background-color: var(--nc-header-bg);
    color: var(--nc-header-ink);
}

.nc-header-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.nc-logo {
    font-family: var(--nc-font-display);
    font-size: 1.5em;
    color: var(--nc-header-ink);
}

.nc-nav-link {
    margin: 0 15px;
    padding: 5px 10px;
    border-radius: var(--nc-radius);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nc-nav-link:hover {
    background-color: var(--nc-accent);
    color: var(--nc-bg);
}

.nc-nav-link.active {
    background-color: var(--nc-brand);
    color: var(--nc-bg);
}

.nc-tel-btn {
    background-color: var(--nc-brand);
    color: var(--nc-bg);
    padding: 5px 10px;
    border-radius: var(--nc-radius);
    transition: background-color 0.3s ease;
}

.nc-tel-btn:hover {
    background-color: var(--nc-brand-dark);
}

.nc-burger {
    color: var(--nc-burger-color);
}

/* Banner styles */
.nc-banner {
    background-color: var(--nc-accent);
    color: var(--nc-ink);
    padding: 30px 0;
    text-align: center;
}

.nc-banner-title {
    font-family: var(--nc-font-display);
    font-size: 2em;
}

/* Footer styles */
.nc-footer {
    background-color: var(--nc-footer-bg);
    color: var(--nc-footer-ink);
    padding: 20px 0;
}

.nc-foot-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.nc-foot-brandcol a,
.nc-foot-contact a,
.nc-foot-links a {
    color: var(--nc-footer-ink);
}

.nc-copy {
    text-align: center;
    padding: 10px 0;
    font-size: 0.9em;
}

/* Drawer styles */
.nc-drawer {
    background-color: var(--nc-drawer-bg);
    color: var(--nc-drawer-ink);
}

.nc-drawer-nav a {
    display: block;
    padding: 10px 20px;
    color: var(--nc-drawer-ink);
    transition: background-color 0.3s ease;
}

.nc-drawer-nav a:hover {
    background-color: var(--nc-accent);
    color: var(--nc-bg);
}

/* Main content and typography */
.nc-main h1, .nc-main h2, .nc-main h3 {
    font-family: var(--nc-font-display);
    color: var(--nc-ink);
}

.nc-entry-body p {
    margin-bottom: 1.5em;
}

.nc-entry-body ul {
    list-style-type: disc;
    padding-left: 20px;
}

.nc-entry-body blockquote {
    border-left: 5px solid var(--nc-line);
    padding-left: 15px;
    color: var(--nc-ink);
    background-color: #f5f5f5;
}

.nc-entry-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nc-radius);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Buttons and links */
.nc-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--nc-radius);
    background-color: var(--nc-brand);
    color: var(--nc-bg);
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nc-btn:hover {
    background-color: var(--nc-brand-dark);
    color: var(--nc-ink);
}

.nc-btn-outline {
    background-color: transparent;
    border: 2px solid var(--nc-brand);
    color: var(--nc-brand);
}

.nc-btn-outline:hover {
    background-color: var(--nc-brand);
    color: var(--nc-bg);
}

/* Paginator */
.bk-paginator span a {
    padding: 5px 10px;
    margin: 0 5px;
    background-color: var(--nc-bg);
    color: var(--nc-ink);
    border-radius: var(--nc-radius);
    transition: background-color 0.3s ease;
}

.bk-paginator span a:hover {
    background-color: var(--nc-accent);
}

.bk-paginator span.current {
    padding: 5px 10px;
    margin: 0 5px;
    background-color: var(--nc-brand);
    color: var(--nc-bg);
    border-radius: var(--nc-radius);
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .nc-header-in {
        padding: 15px 30px;
    }

    .nc-foot-grid {
        flex-direction: row;
        justify-content: space-around;
    }
}

@media (min-width: 992px) {
    .nc-header-in {
        padding: 20px 40px;
    }

    .nc-foot-grid {
        justify-content: space-between;
    }
}

/* Specific components styling */
.nc-404 {
    text-align: center;
    color: var(--nc-ink);
}

.nc-404-code {
    font-size: 5em;
    font-weight: bold;
}

.nc-404-msg {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.nc-404-btn {
    margin-top: 20px;
}

.nc-totop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--nc-brand);
    color: var(--nc-bg);
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

.nc-totop:hover {
    background-color: var(--nc-brand-dark);
}

.nc-share-btn {
    display: inline-block;
    padding: 10px;
    margin: 5px;
    border-radius: var(--nc-radius);
    background-color: var(--nc-brand);
    color: var(--nc-bg);
    transition: background-color 0.3s ease;
}

.nc-share-btn:hover {
    background-color: var(--nc-brand-dark);
}

.nc-postnav-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--nc-brand);
    color: var(--nc-bg);
    border-radius: var(--nc-radius);
    transition: background-color 0.3s ease;
}

.nc-postnav-link:hover {
    background-color: var(--nc-brand-dark);
}

.nc-comments {
    margin-top: 40px;
}

.nc-comments-h {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.nc-comment {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: var(--nc-radius);
    background-color: #f5f5f5;
}

.nc-comment-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}

.nc-comment-body {
    font-size: 1em;
    line-height: 1.6;
}

.nc-no-comments {
    text-align: center;
    font-size: 1.2em;
    color: #999;
}

.bk-block-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.bk-block-content table th,
.bk-block-content table td {
    border: 1px solid var(--nc-line);
    padding: 10px;
    text-align: left;
}

.bk-block-content blockquote {
    border-left: 5px solid var(--nc-line);
    padding-left: 15px;
    color: var(--nc-ink);
    background-color: #f5f5f5;
    margin: 20px 0;
}

.tm-vt-btn {
    padding: 10px 20px;
    background-color: var(--nc-bg);
    color: var(--nc-ink);
    border-radius: var(--nc-radius);
    transition: background-color 0.3s ease;
}

.tm-vt-btn:hover {
    background-color: var(--nc-accent);
}

.tm-vt-btn.is-active {
    background-color: var(--nc-brand);
    color: var(--nc-bg);
}

/* ============================================================
   ThemeStudio structural base
   （テーマスタジオが全生成テーマへ自動付与する構造CSS。
     見た目のデザインは上部のAI生成CSSが担当し、この層は
     グリッド・レスポンシブ・編集モードの土台だけを保証する）
   ============================================================ */

/* ----- コンテナ / 12カラムグリッド ----- */
.nc-container{ max-width:var(--nc-cmax,1180px); margin:0 auto; padding-left:18px; padding-right:18px; width:100%; box-sizing:border-box; }
.nc-cols{ display:flex; flex-direction:column; gap:26px; }
@media (min-width:992px){
  .nc-cols{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:30px; align-items:start; }
  .nc-cols > *{ grid-column:span var(--nc-span,12); min-width:0; }
  /* fix(2026-07-11): サイドバー追従。align-items:start だと aside が中身の高さに縮み、
     中の position:sticky が動く余地を失って本文と一緒に上へ流れてしまう。aside を行の高さ
     いっぱいに伸ばして sticky に移動幅を与える。さらに sticky 自体に max-height + overflow を
     付け、メニューが長い時は画面外に出さず“右側だけ”で内部スクロールできるようにする。 */
  .nc-side{ align-self:stretch; }
  .nc-side-sticky{
    position:sticky;
    top:calc(var(--nc-head-h,64px) + 20px);
    max-height:calc(100vh - var(--nc-head-h,64px) - 40px);
    overflow-y:auto;
    overscroll-behavior:contain;
    /* 内部スクロールバーで中のブロックの影が切れないよう少し余白 */
    padding-right:2px;
    scrollbar-width:thin;
  }
  .nc-side-sticky::-webkit-scrollbar{ width:8px; }
  .nc-side-sticky::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:8px; }
}
@media (max-width:991.98px){
  .nc-cols > *{ order:var(--nc-sporder,0); }
}
.nc-main{ min-width:0; }
.nc-content{ padding-top:26px; padding-bottom:44px; }

/* ----- デバイス別表示（ページ別レイアウト設定） ----- */
@media (max-width:767.98px){ .nc-hide-sp{ display:none !important; } }
@media (min-width:768px) and (max-width:991.98px){ .nc-hide-tab{ display:none !important; } }
@media (min-width:992px){ .nc-hide-pc{ display:none !important; } }

/* ----- ヘッダー構造 ----- */
.nc-header-in{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.nc-logo{ text-decoration:none; min-width:0; }
.nc-logo-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.nc-nav{ display:none; }
@media (min-width:992px){
  .nc-nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
  .nc-burger{ display:none; }
}
.nc-nav-link{ text-decoration:none; white-space:nowrap; }
.nc-tel-btn{ text-decoration:none; display:inline-flex; align-items:center; gap:6px; }

/* バーガーボタン（3本線はここで描画。色はAI CSSの--nc-burger-colorで変更可） */
.nc-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; padding:10px;
  background:transparent; border:1px solid currentColor; cursor:pointer; color:var(--nc-burger-color,var(--nc-ink,#333)); flex:0 0 auto; border-radius:var(--nc-radius,6px); }
.nc-burger span{ display:block; height:2px; width:100%; background:currentColor; border-radius:2px; }

/* ----- モバイルドロワー ----- */
.nc-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); z-index:1200;
  transform:translateX(105%); transition:transform .25s ease; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--nc-drawer-bg,#fff); color:var(--nc-drawer-ink,var(--nc-ink,#333)); box-shadow:-6px 0 24px rgba(0,0,0,.18); }
.nc-drawer-open .nc-drawer{ transform:translateX(0); }
.nc-drawer-overlay{ position:fixed; inset:0; z-index:1190; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s; }
.nc-drawer-open .nc-drawer-overlay{ opacity:1; pointer-events:auto; }
html.nc-drawer-open, .nc-drawer-open body{ overflow:hidden; }
.nc-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
.nc-drawer-title{ font-weight:700; }
.nc-drawer-close{ background:none; border:none; font-size:30px; line-height:1; cursor:pointer; color:inherit; padding:4px 8px; }
.nc-drawer-body{ padding:6px 16px 24px; }
.nc-drawer-tel{ display:flex; justify-content:center; margin-bottom:14px; }
.nc-drawer-nav{ list-style:none; margin:0; padding:0; }
.nc-drawer-nav a{ display:block; padding:13px 6px; text-decoration:none; color:inherit; border-bottom:1px solid var(--nc-line,#e5e5e5); font-weight:600; }

/* ----- トップへ戻る ----- */
.nc-totop{ position:fixed; right:18px; bottom:18px; z-index:1100; width:46px; height:46px; font-size:20px; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .2s; border:none; border-radius:var(--nc-radius,8px);
  background:var(--nc-brand,#333); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.2); }
.nc-totop.is-show{ opacity:1; pointer-events:auto; }

/* ----- フッター構造 ----- */
.nc-foot-grid{ display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:768px){ .nc-foot-grid{ grid-template-columns:1.2fr 1fr 1fr; } }
.nc-foot-links{ display:flex; flex-direction:column; gap:2px; }
.nc-foot-links a{ text-decoration:none; color:inherit; padding:5px 0; }
.nc-copy{ text-align:center; padding:16px 0 4px; cursor:default; user-select:none; -webkit-user-select:none; }

/* ----- ブロック（bk-系）の安全レール: はみ出し防止 ----- */
.bk-block img, .bk-block-content img{ max-width:100%; height:auto; }
.bk-block iframe, .bk-block video, .bk-block-content iframe, .bk-block-content video{ max-width:100%; }
.bk-block table, .bk-block-content table{ max-width:100%; }
.bk-block-content{ overflow-wrap:anywhere; }
.nc-main .bk-block-content img{ max-width:100% !important; height:auto !important; }
.nc-main .bk-block-content .outer{ max-width:100% !important; }
.nc-main .bk-block-content iframe, .nc-main .bk-block-content video{ max-width:100% !important; }

/* ----- ページャー（bk-paginator）構造。配色はAI CSS側で上書き可 ----- */
.bk-paginator{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:10px 0 32px; }
.bk-paginator span{ display:inline-flex; }
.bk-paginator span a, .bk-paginator span.current{ display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 12px; font-weight:700; line-height:1; text-decoration:none;
  border:1px solid var(--nc-line,#ddd); border-radius:var(--nc-radius,6px); background:#fff; color:var(--nc-ink,#333); }
.bk-paginator span a:hover{ border-color:var(--nc-brand,#333); color:var(--nc-brand,#333); }
.bk-paginator span.current{ background:var(--nc-brand,#333); border-color:var(--nc-brand,#333); color:#fff; }
.bk-paginator span.disabled, .bk-paginator span.disabled a{ opacity:.4; pointer-events:none; }

/* ----- 記事一覧の表示切替（s119_blog_list互換: 一覧/画像グリッド） ----- */
.tm-viewtoggle{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 18px; flex-wrap:wrap; }
.tm-vt-tabs{ display:flex; gap:6px; }
.tm-vt-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; font-weight:700; cursor:pointer;
  background:#fff; color:var(--nc-ink,#333); border:1px solid var(--nc-line,#ddd); border-radius:var(--nc-radius,6px); }
.tm-vt-btn.is-active{ background:var(--nc-brand,#333); border-color:var(--nc-brand,#333); color:#fff; }
.tm-vt-count select{ padding:7px 10px; border:1px solid var(--nc-line,#ddd); border-radius:var(--nc-radius,6px); font-size:15px; }
#entries.is-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:768px){ #entries.is-grid{ grid-template-columns:repeat(3,1fr); } }
#entries.is-grid .nc-entry{ margin:0; }
#entries.is-grid .nc-entry-sub, #entries.is-grid .nc-entry-excerpt, #entries.is-grid .nc-more{ display:none; }
#entries.is-grid .nc-entry-title{ font-size:14px; line-height:1.4; margin:6px 0 0; }
#entries.is-grid + .bk-paginator{ }
.nc-entry-thumb{ display:block; overflow:hidden; }
.nc-entry-thumb img{ width:100%; height:auto; display:block; }
#entries.is-grid .nc-entry-thumb img{ aspect-ratio:4/3; object-fit:cover; }
.nc-entry-thumb--none{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:120px; padding:14px;
  background:linear-gradient(135deg,var(--nc-brand,#555),var(--nc-brand-dark,#333)); color:#fff; font-weight:700; }
#entries.is-grid .nc-entry-thumb--none{ aspect-ratio:4/3; min-height:0; }

/* ----- 編集モードの土台（ブロック操作UIを崩さない） ----- */
.nc-sheet .bk-add-block-outer{ margin:8px 0; text-align:center; }
.nc-side .bk-add-block-outer{ text-align:left; }
body .bk-block{ position:relative; }
body.bk-editting-on .bk-block{ outline:1px dashed transparent; transition:outline-color .12s; }
body.bk-editting-on .bk-block:hover{ outline-color:var(--nc-brand,#e21d7a); }
body.bk-editting-on .bk-sheet .bk-blocks{ padding-bottom:6px; }
body.bk-editting-on .bk-block{ margin-bottom:6px; }
body.bk-editting-on .bk-sheet-common{ position:relative; }
body.bk-editting-on .bk-sheet-common::before{ content:'共通（全ページ）'; position:absolute; top:-2px; left:6px; z-index:31;
  font-size:10px; font-weight:800; color:#fff; background:#6b46c1; padding:1px 7px; border-radius:0 0 6px 6px; }

/* fix(2026-07-10): 記事ナビの空プレースホルダが「空のダークピル」として表示される問題を修正。
   記事が1件のみ＝前後の記事が無い時、entry.ctp が空の <span class="nc-postnav-link disabled"> を出すが、
   .nc-postnav-link に背景色があるため空のピルになっていた。空プレースホルダを不可視化し、
   ナビを左右振り分け＋「一覧へ戻る」をアウトラインボタン化して整える。 */
.nc-postnav{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:28px 0; }
.nc-postnav-link.disabled{ background:transparent; color:transparent; padding:0; box-shadow:none; pointer-events:none; }
.nc-postnav-back{ display:inline-block; padding:10px 20px; border:1.5px solid var(--nc-brand); color:var(--nc-brand); background:transparent; border-radius:var(--nc-radius); text-decoration:none; transition:background-color .2s ease, color .2s ease; }
.nc-postnav-back:hover{ background:var(--nc-brand); color:var(--nc-bg); }
.nc-postnav-link .nc-postnav-dir{ display:block; font-size:.8em; opacity:.85; }
.nc-postnav-link .nc-postnav-title{ display:block; font-weight:700; font-size:.95em; }
@media (max-width:560px){ .nc-postnav-link .nc-postnav-title{ display:none; } }

/* fix(2026-07-10): SNSシェアボタンにブランドアイコンを付与＋各SNSのブランド色に。
   従来は "X/Facebook/LINE" のテキストだけの単色ピルだった。 */
.nc-share-btn{ display:inline-flex; align-items:center; gap:8px; line-height:1; text-decoration:none; }
.nc-share-btn i{ font-size:1.05em; }
.nc-share-btn.x{ background-color:#111; color:#fff; }
.nc-share-btn.x:hover{ background-color:#000; }
.nc-share-btn.fb{ background-color:#1877F2; color:#fff; }
.nc-share-btn.fb:hover{ background-color:#0e5fce; }
.nc-share-btn.line{ background-color:#06C755; color:#fff; }
.nc-share-btn.line:hover{ background-color:#05a548; }
@media (max-width:480px){ .nc-share-btn .nc-share-txt{ display:none; } .nc-share-btn{ padding:11px 13px; } }

/* ----- TOPへ戻るボタンとチャット相談ボタンの重なり回避（TOPを左下・チャットを右下に分離） ----- */
.nc-totop{ left:18px; right:auto; }
@media (max-width:599px){ .nc-totop{ left:14px; right:auto; bottom:14px; } }

/* ===== NextCode nav polish 2026-07-12: リンクをハンバーガーに集約・見た目調整 ===== */
.nc-nav{ display:none !important; }
.nc-burger{ display:flex !important; border:0 !important; background:rgba(0,0,0,.10); border-radius:12px; width:48px; height:48px; padding:12px; transition:background .16s ease; }
.nc-burger:hover{ background:rgba(0,0,0,.18); }
.nc-logo{ min-width:0; }
.nc-logo-name{ white-space:nowrap; }
.nc-logo-caption{ font-size:.66em; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70vw; }
.nc-drawer{ width:min(340px,88vw); }
.nc-drawer-head{ padding:16px 18px; border-bottom:1px solid rgba(0,0,0,.08); }
.nc-drawer-title{ font-weight:800; font-size:15px; }
.nc-drawer-close{ width:40px; height:40px; background:rgba(0,0,0,.05) !important; border-radius:10px !important; font-size:22px !important; padding:0 !important; }
.nc-drawer-body{ padding:12px 12px 24px; }
.nc-drawer-nav a{ display:flex !important; align-items:center; justify-content:space-between; padding:15px 14px !important; font-weight:700 !important; font-size:16px; border-bottom:0 !important; border-radius:12px; }
.nc-drawer-nav a::after{ content:"\203A"; opacity:.35; font-size:20px; font-weight:400; }
.nc-drawer-nav a:hover{ background:rgba(0,0,0,.05); }
.nc-drawer-nav a.active{ color:var(--nc-brand); background:rgba(0,0,0,.04); }