/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
 */
.more-link {
	display: block;
}

/*
 * 独自に追加した要素
 * /

/* 投稿部分の修正 */

.rating-value
{
    color: orange;
}

/* テーブルを囲む親要素に適用 */
.table-container {
	margin-top: 0;
    overflow-x: auto; /* 横幅が足りない場合にスクロールを有効にする */
    max-width: 100%; /* 親要素の幅を超えないようにする */
}

/* ベースとなるテーブル要素へのスタイル */
.table-container table {
    width: 100%; /* 横幅いっぱいに広げる */
    border-collapse: collapse; /* セルの境界線を結合して二重線にならないようにする */
    margin: 1em 0; /* 上下に余白を設定 */
    font-size: 1rem;
}

/* 枠線とパディングの設定 */
.table-container th, td {
    padding: 12px 15px; /* セル内の余白 */
    text-align: left; /* テキストを左寄せ */
    border: 1px solid #ddd; /* 明るいグレーの細い枠線 */
}

/* Googleマップリンク専用のスタイル */
.table-container td a {
	display: inline-block; /* インラインブロック化してパディングを適用可能に */
    margin-top: 5px; /* 上の住所から少し離す */
    padding: 0px 0px;
    color: #4466fb; /* Googleのブランドカラーに似た青 */
	text-decoration: none; /* 下線を非表示 */
	font-weight: bold; /* 文字を太くする */
}

.table-container td a:hover {
    color: #3333f9; /* ホバー時により濃い青 */
}

/* 行のホバー効果（マウスが乗ったときのスタイル） */
.table-container tr:hover {
    background-color: #f9f9f9;
}

/* 投稿内容 */
.entry-content {
	
}

/* コメント入力部分の修正 */

/*
 * 星評価（コメントフォーム用）
 */

/* ① inputタグ及びlabelタグを横一列にする */
.comment-form-rating fieldset {
    border: none; /* fieldsetの枠線を消す */
    padding: 0;
    margin: 0;
    display: flex; /* 横並びにする */
    
    /* 重要: HTMLの順序(5→1)を、
      視覚的に(1→5)に反転させる 
    */
    flex-direction: row-reverse; 
    
    /* 右揃えになっているものを左揃えに戻す
      (不要ならこの行を削除) 
    */
    justify-content: flex-end; 
}

/* 元のラジオボタンは非表示にする
  (labelをクリックすることで選択可能) 
*/
.comment-form-rating input[type="radio"] {
    display: none;		/* 上手く行かなかったので下記のIDで指定 */
}

/* IDが "rating" で始まるすべての要素を非表示にする */
.comment-form-rating #rating1,
.comment-form-rating #rating2,
.comment-form-rating #rating3,
.comment-form-rating #rating4,
.comment-form-rating #rating5 {
    display: none;
}

/* ② デフォルトの表示を☆マークにする */
.comment-form-rating label {
    font-size: 24px; /* 星の大きさ（お好みで調整） */
    color: #ccc;     /* ☆のデフォルト色 */
    cursor: pointer;
    margin: 0 2px;  /* 星と星の間の余白 */
}
.comment-form-rating label::before {
    content: "☆";
}

/* * ③ 選択した値を★
 * ④ 選択した値よりも小さい値も★
 * ⑤ 選択した値よりも大きい値は☆
 * (これら3つを以下のCSSで一括で実現)
 */

/* [CSSの仕組み]
  HTMLが5→1の順なので、例えば「3」を選ぶと
  input#rating3 が :checked になります。
  `~` セレクタは「それ以降の」兄弟要素を選ぶので、
  label[for="rating3"]、label[for="rating2"]、label[for="rating1"]
  が選択されます。(要件③と④)

  label[for="rating5"]とlabel[for="rating4"]は
  選ばれないので、☆のままです。(要件⑤)
*/

/* (おまけ) マウスを乗せた時の動作 */
.comment-form-rating label:hover,
.comment-form-rating label:hover ~ label {
    color: orange; /* ホバー時の色 */
}
.comment-form-rating label:hover::before,
.comment-form-rating label:hover ~ label::before {
    content: "★";
}

/* 選択された(:checked)時の動作 (③, ④) */
.comment-form-rating input[type="radio"]:checked ~ label {
    color: orange; /* ★の色 */
}
.comment-form-rating input[type="radio"]:checked ~ label::before {
    content: "★";
}

/* Select要素の設定 */

/* ----------------------------------------------------
 * 1. ラベル（年代、性別、役職など）の共通スタイル
 * ---------------------------------------------------- */
/* 適用対象: .comment-form-age label, .comment-form-sex label, .comment-form-position label */
.comment-form-age label,
.comment-form-sex label,
.comment-form-position label {
    display: block;
    margin-bottom: 5px;
}

/* ----------------------------------------------------
 * 2. セレクトボックス（.comment-___）の共通カスタムデザイン
 * ---------------------------------------------------- */
/* 適用対象: .comment-age, .comment-sex, .comment-position */
.comment-age,
.comment-sex,
.comment-position {
    /* ネイティブな外観をリセット */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* サイズとパディング */
    width: 100%;
    padding: 10px 35px 10px 12px; /* 右側に矢印スペースを確保 */
    
    /* ボーダーと角丸 */
    border: 1px solid #bbb; /* 枠線 */
    border-radius: 8px;
    
    /* 背景色とフォント */
    background-color: #fff; /* 背景色を白に */
    cursor: pointer;
    line-height: 1.5;
    
    /* トランジション */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* フォーカス時のデザイン */
.comment-age:focus,
.comment-sex:focus,
.comment-position:focus {
    outline: none;
    border-color: #0088cc;
    box-shadow: 0 0 0 1px #0088cc, 0 0 0 4px rgba(0, 136, 204, 0.15);
}

/* ----------------------------------------------------
 * 3. カスタムの矢印（文字 ▼）を疑似要素で再現
 * ---------------------------------------------------- */
/* 適用対象: 親要素 .comment-form-___ */
.comment-form-age,
.comment-form-sex,
.comment-form-position {
    position: relative;
}

/* 疑似要素（:after）で文字の矢印を追加 */
.comment-form-age:after,
.comment-form-sex:after,
.comment-form-position:after {
    content: "\25BC"; /* 下向き三角形のユニコード文字 ▼ */
    position: absolute;
    top: 50%; /* 垂直方向の中央に */
    right: 20px; /* 右端からの位置を調整 */
    transform: translateY(3px); /* 垂直方向の中央揃えの微調整 */
    pointer-events: none; /* 矢印の上をクリックしてもセレクトボックスが反応するようにする */
    font-size: 10px;
    color: #666;
}

/* 疑似要素（:after）で文字の矢印を追加 */
.comment-form-age:after {
    content: "\25BC"; /* 下向き三角形のユニコード文字 */
    position: absolute;
    top: 50%; /* 垂直方向の中央に */
    right: 20px; /* 右端からの位置を調整 (padding: 35pxと整合性を取る) */
    transform: translateY(3px); /* labelとpタグのpadding/marginを考慮して微調整 */
    pointer-events: none; /* 矢印の上をクリックしてもセレクトボックスが反応するようにする */
    font-size: 10px; /* 矢印の大きさ */
    color: #666;
}

/* コメント送信ボタン（カラー反転） */
.wp-element-button:active, .wp-block-button__link:active {
	color: var(--wp--preset--color--contrast);
    background-color: var(--wp--preset--color--cyan-bluish-gray);
}

/* コメントの表示部分のスタイル修正 */

/* コメントのカスタムフィールドと内容のレイアウト調整 */
.wp-block-comment-content {
	/* 要素のスペース */
	margin: 10px 0px; /* 必要以上にスペースを取らないように設定 */
	padding: 0; /* 必要以上にスペースを取らないように設定 */
	line-height: 1.0; /* 文字の上下の空白の高さを変更 */
	
    /* 親要素にFlexboxを適用し、子要素を横並びにする */
    display: flex;
    /* 子要素を折り返さずに横一直線に並べる */
    flex-wrap: wrap; 
    /* 子要素間の水平方向のスペース */
    gap: 15px;
    /* 垂直方向のアイテムを中央揃えにする（任意） */
    align-items: center;
}

/* 評価、年代、性別、立場のフィールドを横並びにする */
.wp-block-comment-rating,
.wp-block-comment-age,
.wp-block-comment-sex,
.wp-block-comment-position {
    /* 必要以上にスペースを取らないように設定 */
    margin: 0;
    padding: 0;
    
    /* 各要素の幅をコンテンツに合わせて調整 */
    flex-shrink: 0;
	
	/* フォントサイズを小さくして灰色にする */
    font-size: var(--wp--preset--font-size--small);
}

/* rating（評価）部分の色をオレンジに (コメント表示部分) */
.wp-block-comment-rating {
    color: orange;
}

/* タイトルとコメント内容を下の行に移動（スタック）させる */
/* .wp-block-comment-title 以降の要素を新しい行に配置する */
.wp-block-comment-title {
    /* この要素を新しい行の先頭に配置する */
    margin: 0; /* 必要以上にスペースを取らないように設定 */
	padding: 0; /* 必要以上にスペースを取らないように設定 */
    flex-basis: 100%; /* 親要素の幅いっぱいに広げ、改行を強制 */
	/* 太字にする */
	font-weight: bold;
	/* フォントサイズを小さくする */
    font-size: var(--wp--preset--font-size--small);
}

/* コメント内容（タイトル要素の次の <p> タグ）も縦にスタックされる */
.wp-block-comment-content > p:last-child {
    /* 親要素の幅いっぱいに広げ、縦に積み重ねを維持 */
	margin: 0; /* 横並び要素との間に垂直スペースを追加 */
	padding: 0;
    flex-basis: 100%;
}

/* ----------------------------------------------------
 * ### 🌙 ① ダークテーマ対応の追加
 * ---------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	
	/* サイト全体の背景と文字色 */
    body {
        background-color: #1a1a1a; /* 暗い背景色 */
        color: #f0f0f0;            /* 明るい文字色 */
    }

    /* リンクの色 */
    a {
        color: #8ab4f8; /* ダークモードで見やすいリンク色 */
    }
	
	a:hover,
	a:focus {
        color: #c5e1ff; /* ホバー時により明るくする */
    }	
	
	/* テーブル要素のダークテーマ対応 */
	.table-container table {
        
    }
    .table-container th, td {
        border-color: #555; /* 濃いグレーの枠線 */
        color: #e0e0e0; /* 明るいテキスト色 */
    }
    .table-container th {
        background-color: #333; /* 濃い背景色 */
        color: #f0f0f0;
    }
    .table-container td {
        background-color: #222; /* 濃い背景色 */
    }
	.table-container td a {
        color: #5b92e5; /* ダークテーマで少し明るい青 */
    }
    .table-container td a:hover {
        color: #4285f4;
    }
    .table-container tr:hover {
        background-color: #444; /* ホバー時の背景色 */
    }
	
	/* コメント標準機能部分のリンクの色を変更 */
    .wp-block-comment-date a,
	.wp-block-comment-reply-link a {
        color: #8ab4f8; /* ダークモードで視認性の高い、明るい青系統の色 */
    }

    /* ホバー時の色も調整（任意） */
    .wp-block-comment-date a:hover,
    .wp-block-comment-date a:focus,
	.wp-block-comment-reply-link a:hover,
	.wp-block-comment-reply-link a:focus {
        color: #c5e1ff; /* ホバー時により明るくする */
    }	
	
	/* コメントの投稿者のレイアウト */
	.wp-block-comment-author-name {
		color: #f0f0f0;            /* 明るい文字色 */
	}

	/* ----------------------------------------------------
     * フォームラベルのテキスト色
     * ---------------------------------------------------- */
	.comment-form-author label,
	.comment-form-rating label,
	.comment-form-age label,
	.comment-form-sex label,
	.comment-form-position label,
    .comment-form-author label,
    .comment-form-comment label {
        color: #f0f0f0; /* ラベルの文字色を明るい色に */
    }
	
	/* セレクトボックスのダークテーマ対応 */
	.comment-age,
	.comment-sex,
	.comment-position {
		background-color: #333; /* 背景色を暗く */
		color: #eee; /* 文字色を明るく */
		border-color: #666; /* 枠線を調整 */
	}

	/* セレクトボックスの矢印のダークテーマ対応 */
	.comment-form-age:after,
	.comment-form-sex:after,
	.comment-form-position:after {
		color: #aaa; /* 矢印の色を調整 */
	}

	/* コメントフォームの星評価のデフォルト色を調整
	   ダークテーマでも見やすいようにデフォルトの☆の色を少し明るく */
	.comment-form-rating label {
		color: #777;
	}

    /* 必須マーク（※）の色調整 */
	
    .comment-form-author .required,
	.comment-form-rating .required,
	.comment-form-age .required,
	.comment-form-sex .required,
	.comment-form-position .required,
	.comment-form-title .required,
    .comment-form-comment .required {
        color: #ffa07a; /* 必須マークの色をダーク背景でも視認性の高い色に */
    }

    /* ----------------------------------------------------
     * テキスト入力フィールド (input) と テキストエリア (textarea)
     * ---------------------------------------------------- */
    #author,
	#siteguard_captcha,
	#comment-title ,
    #comment {
        background-color: #333333; /* 背景色を暗く */
        color: #ffffff;            /* 入力される文字色を白く */
        border: 1px solid #555555; /* 枠線を少し明るくして区別しやすくする */
    }

    /* フォーカス時の調整（入力中の強調） */
    #author:focus,
	#siteguard_captcha:focus,
	#comment-title:focus,
    #comment:focus {
        border-color: #00bcd4; /* フォーカス時に明るい色で強調 */
        box-shadow: 0 0 5px rgba(0, 188, 212, 0.5); /* 影でさらに強調 */
    }
	
	/* コメント送信ボタン (submit input) のスタイル調整 */
    .form-submit #submit.wp-block-button__link {
        background-color: #007bff; /* ダークモードでも目立つテーマカラー */
        /* background-color: #555555; */ /* または、より落ち着いた暗めの色 */
        color: #ffffff;    /* ボタンの文字色を明るくする */
        border-color: #007bff; /* 背景色に合わせた枠線 */
    }

    /* ホバー/フォーカス時の調整 */
    .form-submit #submit.wp-block-button__link:hover,
    .form-submit #submit.wp-block-button__link:focus {
        background-color: #0056b3; /* ホバー時に少し暗くして変化を出す */
        border-color: #0056b3;
        color: #ffffff;
    }
	
}