WP CSS変更後

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* ▼▼▼ 新しく追加・修正するスタイル ▼▼▼ */


/* 固定ページのタイトルヘッダーエリア（タイトルと日付を含む）を、余白ごと完全に非表示にする */
.content cf {
    display: none !important;
}

/* 固定ページのタイトルヘッダーエリア（タイトルと日付を含む）を、余白ごと完全に非表示にする */
.page .article-header {
    display: none !important;
}
/* 固定ページのメインコンテンツエリア上部の余白を強制的にリセット */
.page #content-in {
    padding-top: 0 !important;
}

/* 固定ページの日付表示エリア（date-tags）を非表示にする */
.page .date-tags {
    display: none !important;
}



/* --- CTAセクション --- */
/* WordPressのコンテンツエリア内で適用されることを想定して、詳細度を上げる */
.entry-content .flinters-cta-section, /* 通常の投稿・固定ページの場合 */
.page-content .flinters-cta-section, /* テーマによっては page-content を使う場合も */
.widget .flinters-cta-section, /* ウィジェットエリアに配置する場合 */
.flinters-cta-section { /* フォールバックとして単独も残す */
            background-color: #f0f7ff;
            padding: 2em;
            margin-top: 3em;
            margin-bottom: 3em; /* 下にもマージンを追加 */
            text-align: center;
            border-bottom: none;
            clear: both; /* 前の要素のfloatをクリア */
}
/* HTMLに合わせて h4 を対象にする */
.entry-content .flinters-cta-section h4,
.page-content .flinters-cta-section h4,
.widget .flinters-cta-section h4,
.flinters-cta-section h4 {
            color: #303131; /* var(--color-text-main) を使用しても良い */
            font-size: 1.2em; /* 親のフォントサイズに対する相対値 */
            font-weight: var(--font-weight-semibold); /* 変数を使用 */
            margin-top: 0;
            margin-bottom: 0.8em;
            padding: 0; /* 個別のパディングは基本的に不要 */
            border-bottom: none;
            line-height: 1.3;
}
.flinters-cta-button {
    display: inline-block;
    background-color: #ff6f61;
    color: white !important; /* テーマのaタグスタイルに負けないように!importantも考慮 */
    padding: 0.8em 1.5em;
    border-radius: 25px;
    text-decoration: none !important; /* 下線も消す */
    font-weight: bold;
    margin: 0.5em;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: none; /* ボタンのデフォルトボーダーを消す */
}
.flinters-cta-button:hover {
    background-color: #e65c50; /* ホバー色を少し暗く */
    color: white !important;
    text-decoration: none !important;
}
/* 2つ目のボタンのスタイル（例：secondary）*/
.flinters-cta-button.secondary {
    background-color: #5cb85c; /* 例: 緑色 */
}
.flinters-cta-button.secondary:hover {
    background-color: #4cae4c;
}
/* --- ハイライトボックス --- */
.highlight-box {
    border: 1px solid #1a5089;
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 4px;
}
.example-box strong {
    color: #424646;
}

/* --- アコーディオン用スタイル (新しいスタイルを優先) --- */
details {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1em;
    background-color: #fff;
}
details summary {
    font-weight: bold;
    padding: 0.8em 1.2em;
    cursor: pointer;
    position: relative;
    outline: none; /* フォーカス時の枠線を消す */
    background-color: #f7f7f7;
    border-bottom: 1px solid #ddd;
}
details summary::marker { /* Safariでのデフォルトマーカー非表示 */
    display: none;
}
details summary::-webkit-details-marker { /* Chrome/Edgeでのデフォルトマーカー非表示 */
    display: none;
}
details summary:before { /* カスタムマーカー（▼） */
    content: '▼';
    position: absolute;
    right: 1.2em;
    font-size: 0.8em;
    transition: transform 0.2s;
}
details[open] summary:before {
    transform: rotate(180deg);
}

details div.accordion-content { /* こちらを有効化 */
    padding: 1em 1.5em;
    border-top: 1px solid #e7e7e7;
}


/* --- ステップボックス --- */
.step-box {
    padding: 1.5em;
    margin-bottom: 1.8em;
    /* padding-bottom: 0.3em; は h3 の padding-bottom との兼ね合いで調整の可能性あり */
    border-radius: 5px;
    /* 背景色や枠線が必要な場合は追加 */
    /* background-color: #e9f5ff; */
    /* border: 1px solid #b3d7ff; */
}
.step-box h3 {
    /* 既存のh3スタイルを上書き */
    margin-top: 0;
    margin-bottom: 0.8em; /* 例えば */
    padding-top:15; /* 例えば */
    padding-left:15; /* 例えば */
    padding-right:15; /* 例えば */
    padding-bottom:15;
    font-size: 1.4em; /* 例えば、他のh3と区別する場合 */
	color:#ff6363;
    border-bottom: 1px solid #ccc; /* 例えば、区切り線 */
}

/* --- 例文ボックス --- */
.example-box {
    background-color: #fff0f0;
    border: 1px solid #ff9999;
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em; /* 下にもマージンを追加することが多い */
    border-radius: 4px;
}
.example-box strong {
    color: #424646;
}


/* --- キーポイント --- */
.key-point {
    background-color: #fff0f0; /* #fffaf0 の方が黄色っぽくなるかも */
    border-left: 4px solid #ff9999; /* #ffcc00 の方が黄色っぽい */
    padding: 0.8em 1.2em;
    margin: 1em 0;
    list-style-type: none!important; /*数字を一旦消す*/
}
.key-point strong {
    color: #ff6363; /* #cc5500 の方が茶色っぽい赤 */
}
.key-point p,
.key-point li { /* key-point 内の p や li のマージンを調整する場合 */
    margin-bottom: 0.5em;
}
.key-point p:last-child,
.key-point li:last-child {
    margin-bottom: 0;
}


/* ↑↑↑ ここまでアコーディオン用スタイルを追記 ↑↑↑ */
/* 既存のスタイルがこの下に続く */
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ----------------------------------------
   FLINTERS Media Site CSS (Layout & Navigation Removed)
---------------------------------------- */

/* ----------------------------------------
   1. Variables
---------------------------------------- */
:root {
    /* Fonts from Guideline */
    --font-primary: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-weight-standard: 400; /* 標準 */
    --font-weight-medium: 500;   /* 中太 (Outfitでは500がMedium) */
    --font-weight-semibold: 600; /* 中太 (Outfitでは600がSemiBold, 見出しに推奨) */
    --font-weight-bold: 700;     /* 太字 */

    /* Colors from Guideline & flinters.co.jp */
    --color-text-main: #303131;         /* Black - メインカラー|文字 */
    --color-text-subtle: #424646;       /* Black - サブカラー */
    --color-text-light: #555555;        /* flinters.co.jp の本文に近い */
    --color-text-placeholder: #939999;  /* Black - サブカラー (薄い) */

    --color-accent-red: #fc4343;        /* Red - アクセントカラー */
    --color-accent-red-dark: #e73b3b;   /* Red - サブカラー */

    --color-link: #2261c2;              /* リンクテキストカラー */
    --color-link-hover: #1c4f9f;        /* リンクホバー (少し暗く) */

    --color-primary-blue: #ff9999;      /* flinters.co.jp のメインピンク (サービスカテゴリタイトルなど) */
    --color-primary-blue-light: #ff9999;/* flinters.co.jp のボタンなど */

	 /* ... (既存の変数) ... */
    --color-background-base: #f1f5f5; /* ガイドラインのベースカラー | スライド背景 */
    --color-background-body: #ffffff;
    --color-background-alt: #f1f5f5;    /* Black - サブカラー (薄いグレー) */
    --color-background-section: #f8f9fa;/* セクション背景 (白に近いが少し区別) */
    --color-background-header-footer: #ffffff; /* ヘッダー・フッター背景 */
    --color-background-footer-dark: #303131; /* フッターダーク版 (オプション) */
    --color-border: #e0e0e0; /* 一般的な境界線 (薄いグレー) */
    --color-border-light: #eeeeee; /* さらに薄い境界線 */


    --color-white: #ffffff;
    --color-black: #000000;

    /* Spacing */
    --space-xs: 0.25rem; /* 4px */
    --space-sm: 0.5rem;  /* 8px */
    --space-md: 1rem;    /* 16px (元々2remだったのを1remに変更、必要なら元に戻す) */
    --space-lg: 1.5rem;  /* 24px */
    --space-xl: 2rem;    /* 32px */
    --space-xxl: 3rem;   /* 48px */

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px; /* flinters.co.jp のボタンに近い */

    /* Transitions */
    --transition-fast: all 0.2s ease-in-out;
    --transition-normal: all 0.3s ease-in-out;

    /* Box Shadow */
    --box-shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --box-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
}


/* Google Fonts Import (Outfit) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

/* ----------------------------------------
   2. Reset & Base
---------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* margin: 0; と padding: 0; は新しいスタイルで上書き・調整されることが多いので、
       個別の要素で指定することを推奨。全体リセットは影響範囲が大きい場合がある。*/
}

html {
    font-size: 100%; /* 16px base */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-standard);
    line-height: 1.7; /* メディアサイトは読みやすさ重視 */
    color: var(--color-text-main);
    background-color: var(--color-background-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0; /* bodyのデフォルトマージンをリセット */
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------------------
   3. Typography
---------------------------------------- */

/* 一般的な見出しスタイル */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin-top: var(--space-xl); /* 上マージンを統一的に設定 */
    margin-bottom: var(--space-md); /* 下マージンを統一的に設定 */
    line-height: 1.3; /* 見出しの行間 */
}

/* 個別の見出しサイズ調整 */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; } /* 少し大きめに */
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }


p {
    margin-bottom: var(--space-md);
    color: var(--color-text-light); /* 本文の文字色を少し柔らかく */
}
p:last-child { /* 親要素の最後のp要素の下マージンを削除することが多い */
    margin-bottom: 0;
}

strong, b {
    font-weight: var(--font-weight-bold);
}

em, i {
    font-style: italic;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: var(--transition-fast);
}
a:hover,
a:focus {
    color: var(--color-link-hover);
    text-decoration: underline;
}

ul, ol {
    margin-bottom: var(--space-md);
    padding-left: 1.5em; /* 通常のリストのインデント、var(--space-lg) から変更 */
}
li {
    margin-bottom: var(--space-sm);
}

blockquote {
    margin: var(--space-md) 0 var(--space-md) var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-left: 4px solid var(--color-primary-blue);
    background-color: var(--color-background-alt);
    font-style: italic;
    color: var(--color-text-subtle);
}
blockquote p:last-child {
    margin-bottom: 0;
}



/* ----------------------------------------
   6. Elements
---------------------------------------- */
/* Buttons (flinters.co.jp風) */
.btn,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: var(--color-text-main); /* Black - メインカラー #303131 */
    color: var(--color-white);                /* Text color on black button */
    border: 1px solid var(--color-text-main); /* Border color same as background */
    padding: 0.65rem 1.25rem;                 /* Adjust padding as needed */
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--border-radius-md);   /* 8px rounded corners */
    text-decoration: none;
    transition: var(--transition-normal);
    white-space: nowrap;
}
.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--color-text-subtle); /* Black - サブカラー #424646 for hover (slightly lighter) */
    border-color: var(--color-text-subtle);
    color: var(--color-white);
    text-decoration: none;
    /* box-shadow: var(--box-shadow-sm); /* Optional: add a subtle shadow on hover */
}

.btn:focus,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
.wp-block-button__link:focus {
    outline: none;
    /* Create a focus ring using the main black color, slightly transparent */
    box-shadow: 0 0 0 0.2rem rgba(48, 49, 49, 0.35); /* #303131 with alpha */
}

/* Accent Red Button (Keep as is, or adjust if needed) */
.btn-accent,
.wp-block-button.is-style-accent .wp-block-button__link {
    background-color: var(--color-accent-red);
    border-color: var(--color-accent-red);
}
.btn-accent:hover {
    background-color: var(--color-accent-red-dark);
    border-color: var(--color-accent-red-dark);
}

/* Outline Button (Black Outline) */
.btn-outline {
    background-color: transparent;
    color: var(--color-text-main); /* Text color for outline button */
    border-color: var(--color-text-main); /* Border color */
}
.btn-outline:hover {
    background-color: var(--color-text-main); /* Fill with black on hover */
    color: var(--color-white);                /* Text becomes white */
    border-color: var(--color-text-main);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-standard);
    line-height: 1.5;
    color: var(--color-text-main);
    background-color: var(--color-white);
    background-clip: padding-box;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    margin-bottom: var(--space-md);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-link);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(34, 97, 194, 0.25); /* --color-link のRGB値に合わせた方が良い */
}
textarea {
    min-height: 120px;
    resize: vertical;
}
label {
    display: inline-block;
    margin-bottom: var(--space-sm);
    font-weight: var(--font-weight-medium);
}

/* Search Form */
.search-form {
    display: flex;
    margin-bottom: var(--space-md);
}
.search-form label { /* Hide label visually, but keep for accessibility */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.search-form .search-field {
    flex-grow: 1;
    margin-bottom: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.search-form .search-submit {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* ----------------------------------------
   7. Article & Post Styles
---------------------------------------- */
.hentry, .post, .page { /* Article container */
    margin-bottom: var(--space-xxl);
}
.entry-header {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg); /* entry-header と entry-content の間隔 */
}
.entry-title { /*記事タイトル、ページタイトル*/
    font-size: 2.5rem; /* h1相当に */
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: var(--space-sm); /* タイトルとメタ情報の間隔 */
    padding:0; /* 個別のパディングは削除 */
}
.entry-meta {
    font-size: 0.9rem;
    color: var(--color-text-placeholder);
    margin-bottom: 0;
}
.entry-title a {
    text-decoration: none;
    color: inherit;
}
.entry-title a:hover {
    color: var(--color-link);
}

.entry-meta span {
    margin-right: var(--space-md);
}
.entry-meta a {
    color: var(--color-text-placeholder);
    text-decoration: none;
}
.entry-meta a:hover {
    color: var(--color-link);
    text-decoration: underline;
}
.entry-meta .posted-on::before,
.entry-meta .cat-links::before,
.entry-meta .tags-links::before,
.entry-meta .comments-link::before {
    /* Add icons here if desired, e.g., font-awesome */
    /* content: "\f073"; font-family: FontAwesome; margin-right: var(--space-xs); */
}

.entry-content { /* Article body */
    font-size: 1.05rem; /* 本文を少し大きく */
    line-height: 1.8; /* 本文の行間を少し広めに */
}
/* .entry-content 内の一般的な見出しスタイル */
.entry-content h1,
.entry-content h2,{ /* Content内の見出し */
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    padding: 20px;
    border-bottom: 2px solid var(--color-background-alt); /* 見出し下線 */
}
.entry-content h3,{ /* Content内の見出し */
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    padding: 20px;
    border-bottom: 2px solid var(--color-background-alt); /* 見出し下線 */
}

/* .entry-content 内の見出しサイズ */
.entry-content h1 { font-size: 2.2rem; } /* 記事内h1は少し小さめの場合も */
.entry-content h2 { font-size: 1.8rem; }
.entry-content h3 { font-size: 1.5rem; }
.entry-content h4 { font-size: 1.3rem; }
.entry-content h5 { font-size: 1.15rem; }
.entry-content h6 { font-size: 1rem; font-weight: var(--font-weight-bold);} /* h6は太字にするなど */

.entry-content p:last-child { /* entry-content 直下の最後の p */
    margin-bottom: 0;
}
.entry-content ul, .entry-content ol {
    margin-left: var(--space-sm); /* Content内リストのインデント調整 */
    padding-left: 1.2em; /* padding-leftも調整 */
}
.entry-content ul li, .entry-content ol li {
    margin-bottom: 0.4em; /* リストアイテム間のマージン調整 */
}

.post-thumbnail img { /* Featured image */
    margin-bottom: var(--space-lg);
    border-radius: var(--border-radius-md);
    /* box-shadow: var(--box-shadow-sm); */
}

/* Read More Link */
.read-more-link {
    display: inline-block;
    margin-top: var(--space-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-link);
    text-decoration: none;
}
.read-more-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}
.read-more-link::after { /* 矢印などのアイコンを付与する場合 */
    content: " \2192"; /* → */
    margin-left: var(--space-xs);
}

/* Tags and Categories */
.cat-links,
.tags-links {
    margin-bottom: var(--space-md);
}
.cat-links a,
.tags-links a {
    display: inline-block;
    background-color: var(--color-background-alt);
    color: var(--color-text-subtle);
    padding: var(--space-xs) var(--space-sm);
    margin-right: var(--space-xs);
    margin-bottom: var(--space-xs);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    text-decoration: none;
    transition: var(--transition-fast);
}
.cat-links a:hover,
.tags-links a:hover {
    background-color: var(--color-primary-blue);
    color: var(--color-white);
}

/* Author Box (Optional) */
.author-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    background-color: var(--color-background-section);
    padding: var(--space-lg);
    margin-top: var(--space-xl);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-light);
}
.author-box .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.author-box-content h4.author-title {
    margin-top: 0;
    margin-bottom: var(--space-xs);
    font-size: 1.2rem;
    border-bottom: none; /* Author box内の見出しは下線なし */
    padding-bottom: 0;
}
.author-box-content .author-description {
    font-size: 0.95rem;
    color: var(--color-text-light);
}
.author-box-content .author-description p:last-child {
    margin-bottom: 0;
}

/* Comments Section */
.comments-area {
    margin-top: var(--space-xxl);
}
.comments-title,
.comment-reply-title {
    font-size: 1.6rem; /* h3相当 */
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}
.comment-list {
    list-style: none;
    padding: 0;
}
.comment-list .comment {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border-light);
}
.comment-list .comment:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.comment-list .children { /* Nested comments */
    list-style: none;
    padding-left: var(--space-lg); /* or more for deeper nesting */
    margin-top: var(--space-lg);
}
.comment-author .avatar {
    float: left;
    margin-right: var(--space-md);
    border-radius: 50%;
}
.comment-author .fn { /* Author name */
    font-weight: var(--font-weight-medium);
    font-size: 1.1rem;
}
.comment-author .says {
    display: none; /* "says" is often redundant */
}
.comment-meta {
    font-size: 0.85rem;
    color: var(--color-text-placeholder);
    margin-bottom: var(--space-xs);
}
.comment-meta a {
    color: var(--color-text-placeholder);
    text-decoration: none;
}
.comment-meta a:hover {
    text-decoration: underline;
}
.comment-content p:last-child {
    margin-bottom: var(--space-xs);
}
.reply .comment-reply-link {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--color-link);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
}
.reply .comment-reply-link:hover {
    background-color: var(--color-link);
    color: var(--color-white);
    border-color: var(--color-link);
}
/* Comment Form */
.comment-form p {
    margin-bottom: var(--space-md);
}
.comment-form label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: var(--font-weight-medium);
}
.comment-form .comment-notes,
.comment-form .logged-in-as {
    font-size: 0.9rem;
    color: var(--color-text-light);
}
.comment-form .required {
    color: var(--color-accent-red);
}

/* ----------------------------------------
   8. Widgets & Sidebar
---------------------------------------- */
.widget {
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background-color: var(--color-background-section);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
}
.widget-title { /* Widgetのタイトル */
    font-size: 1.3rem; /* h4相当 */
    font-weight: var(--font-weight-semibold);
    margin-top: 0;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}
.widget ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}
.widget ul li {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px dotted var(--color-border-light);
}
.widget ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.widget ul li a {
    text-decoration: none;
    color: var(--color-text-subtle);
}
.widget ul li a:hover {
    color: var(--color-link);
}
.widget_search .search-form {
    margin-bottom: 0;
}
.widget_tag_cloud .tagcloud a {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    margin: 0 var(--space-xs) var(--space-xs) 0;
    background-color: var(--color-background-alt);
    border-radius: var(--border-radius-sm);
    font-size: 0.9em !important; /* Override default tag cloud sizing if needed */
    text-decoration: none;
    color: var(--color-text-subtle);
    transition: var(--transition-fast);
}
.widget_tag_cloud .tagcloud a:hover {
    background-color: var(--color-primary-blue);
    color: var(--color-white);
}

/* ----------------------------------------
   9. Service Page Specific Styles (from previous HTML)
---------------------------------------- */
.service-header { /* For service listing page */
    background-color: var(--color-background-alt);
    padding: var(--space-xxl) var(--space-md);
    text-align: center;
}
.service-header h1 { /* Service PageのH1 */
    font-size: 2.5em; /* h1相当 */
    margin-bottom: var(--space-md);
    color: var(--color-text-main);
    border-bottom: none; /* ページタイトルなので下線なし */
    padding-bottom: 0;
}
.service-header p.page-description { /* メインの説明文 */
    font-size: 1.1em;
    color: var(--color-text-light);
    max-width: 800px;
    margin: 0 auto var(--space-lg) auto;
}
.company-info-link { /* 会社情報へのリンク (サービスページヘッダー内) */
    text-align: center;
    margin-top: var(--space-lg);
}
.company-info-link a {
    font-size: 1.1em;
    color: var(--color-link);
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
}
.company-info-link a:hover {
    color: var(--color-link-hover);
}

.service-container { /* Service page main content area */
    max-width: 1000px;
    margin: var(--space-xl) auto;
    padding: 0 var(--space-md);
}
.service-category {
    margin-bottom: var(--space-xxl);
}
.service-category h2.category-title { /* サービスカテゴリの見出し */
    font-size: 1.8em; /* h2相当 */
    color: var(--color-primary-blue); /* FLINTERS様のブランドカラー */
    border-bottom: 2px solid var(--color-primary-blue);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.service-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-sm);
    transition: var(--transition-normal);
}
.service-item:hover {
    box-shadow: var(--box-shadow-md);
    transform: translateY(-3px);
}
.service-item-icon {
    flex: 0 0 100px; /* アイコンの固定幅 */
    text-align: center;
    margin-right: var(--space-md); /* アイコンとコンテンツの間隔 */
}
.service-item-icon img {
    max-width: 80px; /* アイコンの最大サイズ */
    height: auto;
    margin-bottom: var(--space-sm);
}
.service-item-content {
    flex: 1;
    min-width: 250px; /* 折り返し時の最小幅 */
}
.service-item-content h3.service-title { /* Service Item内のH3 */
    font-size: 1.5em; /* h3相当 */
    margin-top: 0;
    margin-bottom: var(--space-sm);
    color: var(--color-text-main);
    border-bottom: none; /* 通常下線なし */
    padding-bottom: 0;
}
.service-item-content p.service-description {
    margin-bottom: var(--space-md);
    font-size: 0.95em;
    color: var(--color-text-light);
}
.service-item-tags {
    margin-bottom: var(--space-md);
}
.service-item-tags span.tag-item {
    background-color: var(--color-background-alt);
    color: var(--color-primary-blue);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.8em;
    margin-right: var(--space-xs);
    display: inline-block;
    margin-bottom: var(--space-xs);
}
.service-item-link a.btn-service-detail {
    /* .btn スタイルを継承しつつ、個別に調整可能 */
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
}


/* ----------------------------------------
   10. Utility Classes
---------------------------------------- */
.text-center { text-align: center !important; } /* !important で必要なら強制 */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.hidden { display: none !important; }
.visually-hidden { /* Screen reader only text */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }
.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-top-0 { margin-top: 0 !important; }

/* ----------------------------------------
   11. WordPress Core & Block Editor Styles
---------------------------------------- */
/* Alignments for blocks */
.alignleft {
    float: left;
    margin-right: var(--space-md);
    margin-bottom: var(--space-md);
    max-width: 50%; /* 必要に応じて調整 */
}
.alignright {
    float: right;
    margin-left: var(--space-md);
    margin-bottom: var(--space-md);
    max-width: 50%; /* 必要に応じて調整 */
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* 画像だけでなく、その親ブロックも中央揃えにする場合 */
}
img.aligncenter { /* 中央揃え画像の下マージン */
    margin-bottom: var(--space-md);
}

/* Captions */
.wp-caption {
    margin-bottom: var(--space-md);
    max-width: 100%; /* 親要素に収まるように */
}
.wp-caption img {
    margin-bottom: var(--space-xs);
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption .wp-caption-text {
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-align: center;
    padding: var(--space-sm) 0;
}

/* Gutenberg specific wide/full alignments */
/*
  注意: .alignwide, .alignfull はテーマのコンテナ構造に大きく依存します。
  Cocoonテーマがどのようにこれらのクラスを扱っているかによって、
  以下のスタイルは調整が必要になるか、Cocoon側のスタイルを優先するべきです。
  子テーマで上書きする場合は、より詳細なセレクタや !important が必要になることがあります。
*/
.entry-content .alignwide {
    margin-left: calc(-1 * (100vw - 100%) / 2); /* ビューポート幅いっぱいに広げる試み */
    margin-right: calc(-1 * (100vw - 100%) / 2);
    max-width: 100vw;
    width: 100vw;
}
.entry-content .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
    position: relative; /* z-indexなどで他の要素との重なりを制御する場合 */
}

/* Cocoonのコンテナ幅を考慮した調整例 (一般的なテーマの場合) */
/* Cocoonが独自に処理している場合は不要・または調整 */
/*
@media (min-width: 1140px) {
    .entry-content .alignwide {
        margin-left: -50px;
        margin-right: -50px;
        width: calc(100% + 100px);
        max-width: calc(100% + 100px);
    }
}
*/


/* Basic Table Styling */
.entry-content table {
    width: 100%;
    margin-bottom: var(--space-md);
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    font-size: 0.95em; /* テーブル内の文字を少し小さく */
}
.entry-content th,
.entry-content td {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top; /* セル内のコンテンツを上揃え */
}
.entry-content th {
    background-color: var(--color-background-alt);
    font-weight: var(--font-weight-semibold);
}
.entry-content tr:nth-child(even) td { /* 互い違いの背景色 */
    background-color: var(--color-background-section);
}

/* ----------------------------------------
   12. Responsive Design
---------------------------------------- */
@media (max-width: 992px) { /* Tablet and below */
    h1, .entry-title { font-size: 2rem; } /* h1と記事タイトルを統一 */
    h2, .entry-content h1 { font-size: 1.7rem; } /* h2と記事内h1 */
    h3, .entry-content h2 { font-size: 1.4rem; } /* h3と記事内h2 */
    h4, .entry-content h3 { font-size: 1.2rem; } /* h4と記事内h3 */

    .service-header h1 { font-size: 2.2em; }
    .service-category h2.category-title { font-size: 1.6em; }
    .service-item-content h3.service-title { font-size: 1.3em; }
}

@media (max-width: 768px) { /* Mobile */
    /* レイアウト関連の .container, .content-area, .widget-area はCocoon側のスタイルを尊重 */
    .widget-area {
        margin-top: var(--space-xl); /* サイドバーがメインコンテンツの下に来る場合のマージン */
    }

    .service-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .service-item-icon {
        margin-right: 0;
        margin-bottom: var(--space-md);
    }
    .service-item-content {
        text-align: left;
    }

    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .author-box .avatar {
        margin-bottom: var(--space-md);
    }
    .author-box-content {
        text-align: left;
    }

    /* alignwide/alignfull for mobile - Cocoonの挙動を確認して調整 */
    .entry-content .alignwide,
    .entry-content .alignfull {
        margin-left: calc(-1 * var(--space-md)); /* Assuming --space-md is page padding */
        margin-right: calc(-1 * var(--space-md));
        width: calc(100% + (2 * var(--space-md)));
        max-width: 100vw; /* Ensure it doesn't exceed viewport */
    }
     /* body { overflow-x: hidden; } は最終手段。原因を特定して修正が望ましい */
}

@media (max-width: 480px) { /* Smaller Mobile Devices */
    h1, .entry-title { font-size: 1.7rem; }
    h2, .entry-content h1 { font-size: 1.5rem; }
    h3, .entry-content h2 { font-size: 1.3rem; }
    h4, .entry-content h3 { font-size: 1.1rem; }

    .btn,
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .wp-block-button__link,
    .flinters-cta-button { /* CTAボタンも対象に */
        width: 100%;
        padding-top: var(--space-md);
        padding-bottom: var(--space-md);
        font-size: 1rem; /* ボタンの文字サイズも確認 */
    }
    .search-form .search-submit { /* 検索ボタンはフル幅にしない */
        width: auto;
    }

    .entry-content {
        font-size: 1rem;
    }

    .comment-author .avatar {
        width: 40px;
        height: 40px;
        margin-right: var(--space-sm);
    }
    .social-share-link { /* SNSボタンのサイズ調整 */
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}
	/* ----------------------------------------
   SNS Share Buttons (Monochrome Style)
---------------------------------------- */

.social-share-buttons-container {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-light);
    text-align: left;
}

.social-share-buttons-container .share-title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin-bottom: var(--space-md);
    text-align: inherit;
}

.social-share-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
/*
.social-share-buttons-container.align-center .social-share-list {
    justify-content: center;
}
*/

.social-share-item {
    margin: 0;
}

.social-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: transparent;
    color: var(--color-text-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    font-size: 1.1rem;
    transition: var(--transition-normal);
    line-height: 1;
}

.social-share-link:hover,
.social-share-link:focus {
    background-color: var(--color-background-alt);
    color: var(--color-text-main);
    border-color: var(--color-text-subtle);
    outline: none;
}

.social-share-link .fab,
.social-share-link .fas,
.social-share-link .far,
.social-share-link .fa {
    line-height: 1;
}

.social-share-link .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}