/* ヘッダーの設定 */
.header-table {
    table-layout: fixed;
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    border: rgb(154, 157, 156);
    color: rgb(113, 113, 113);
    text-align: center;
    border-collapse: collapse;
}
/* ロゴの大きさを調整 */
.site-logo {
    width: auto;
    height: 100px;
}
/* ヘッダーテーブルの幅*/
/*ロゴだけ少し広くして、あとは均等*/
.header-table td:first-child {
    width:20%;
}
.header-table td:not(:first-child) {
    width: auto;
    border-left: 1px solid #ccc;
}
/*カーソルを合わせると背景色が変わる*/
.header-table td:not(.header-logo):hover {
    background-color: #eafcfc;
}


/* ヒーロービューの設定 */
.hero-table {
    table-layout: fixed;
    width: 100%;
    height: 450px;
    background-image: url(gazou/hero-mizuna.jpg);
    background-size: cover;       /* 隙間なく全体に広げる */
    background-position: 50% 10%;   /* */
    background-repeat: no-repeat; /* 繰り返し表示させない */
    border-collapse: collapse;
}
.hero-table td {
    height: 450px; /* セルにも高さを指定 */
    padding: 0; /* 隙間をなくす */
    /* 背景を透かせるために、セルの背景を透明にする（デフォルトで透明です） */
    background-color: rgba(255, 255, 255, 0.227);
    overflow: hidden; /* 万が一のはみ出しを防ぐ */
}
/*ヒーロービュー文章*/
.hero-table tr:nth-child(1) td:nth-child(1) {
    width: 35%;
    height: 300px;
    font-family: sans-serif;
    color: #84ecfc;
    text-shadow: 
    1px 1px 2px black,
    0 0 1em rgb(35, 200, 255),
    0 0 0.2em rgb(35, 200, 255);
    text-align: center; /* テキストを真ん中に（横） */
    vertical-align: middle; /*テキストを真ん中に（縦）*/
}
.subtitle {
    font-size: 25px;
    padding: 0%;
}
.maintitle {
    font-size: 35px;
}
/*ヒーロービュー紹介とスケジュール*/
.hero-table tr:nth-child(2) td:nth-child(1),
.hero-table tr:nth-child(2) td:nth-child(2) {
    height: 150px;
    font-size: 18px;
    color: #595959;
    text-align: center;
    vertical-align: middle;
}
.maruwaku {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.659);
}
.maruwaku:hover {
    background-color: #c1ffffc6;
}
/*ヒーロービュー2列目*/
.hero-table tr:nth-child(1) td:nth-child(2) {
    width: 65%;
}


/* 投稿リストの親要素 */
.post-list {
    display: flex;          /* 横並びにする */
    flex-wrap: wrap;       /* 幅が足りない場合は折り返す */
    gap: 20px;             /* 投稿同士の隙間 */
    padding: 20px 0;
}
/* 投稿1つ1つのカード */
.post-list article {
    flex: 1;               /* 均等に広がる */
    min-width: 200px;      /* スマホとかで狭くなりすぎないように */
    max-width: calc(25% - 20px); /* 4件横並びにする計算（隙間分を引く） */
    
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}
.post-list article:hover {
    transform: translateY(-5px); /* ホバーで少し浮かす */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/*アイキャッチ画像の設定*/
.post-thumbnail img {
    width: 100%;
    height: 180px;      /* 高さを揃える */
    object-fit: cover;  /* 縦横比を保ったまま切り抜く（超便利！） */
    display: block;
}
.post-content {
    padding: 15px;      /* 文字の周りに余白を作る */
}
/*記事のタイトルと投稿日の設定*/
.post-content h3 {
    font-size: 18px;
    margin: 0 0 10px;
}
.post-content p {
    font-size: 14px;
    color: #666;
}
/*----------------------------------
詳細ページ（single.php）専用の設定
----------------------------------*/
/* --- 詳細ページ用の小さいサイズ設定 --- */
.post-list-small {
    justify-content: left; /* 中央に寄せる */
    gap: 10px;               /* 隙間も少し狭くする */
}

.post-list-small article {
    flex: none;               /* 均等に広がる設定を解除 */
    width: 150px;             /* カード全体の幅を思い切って固定してみる */
    min-width: 0;             /* 親クラスの 200px 設定を打ち消す */             
}
.post-list-small .post-content h3 {
    font-size: 13px;          /* タイトルをさらに小さく */
    line-height: 1.2;
}

.post-list-small .post-content p {
    font-size: 11px;          /* 日付も小さく */
}
/*----------------------------------
ヒーロービュー内のリンク設定
----------------------------------*/
.hero-link {
    text-decoration: none; /* 下線を消す */
    color: inherit;        /* 文字色を親（tdなど）から引き継ぐ */
    display: inline-block; /* リンクの反応範囲を適切にする */
}

.hero-link:hover {
    /* ホバーした時に少し変化をつけたい場合はここに書く */
    opacity: 0.8; 
}
/*----------------------------------
固定ページ専用の設定
----------------------------------*/
.page-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.page-container article {
    margin-bottom: 20px;
}