/*
Theme Name: News Portal Theme
Theme URI: http://example.com/my-custom-theme
Author: sakadonohito
Author URI: http://example.com
Description: A custom theme for learning purposes.
Version: 1.0
*/
html {
  height: 100%; /* ビューポート全体の高さを確保 */
  margin: 0;
}

body {
    height: 100%;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
header.site-header {
    background-color: #002244;
    color: white;
    margin: 0;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    flex: 2;
    text-align: left;
    font-size: 2.25rem;
}

.logo .home-link {
    text-decoration: none;
    color: white;
}

.pc-nav {
    flex: 3;
    margin 0 auto;
    text-align: center;
}
.pc-nav nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pc-nav ul li {
    display: inline;
    line-height: 1.5;
}

.pc-nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    vertical-align: middle;
}

.pc-nav ul li a:hover {
    text-decoration: underline;
    color: #0073aa;
    vertical-align: middle;
}

.search-form {
    flex: 1;
    text-align: right;
    display: flex;
    align-items: center;
    /*border: 1px solid #ccc;*/ /* 枠線の色 */
    border-radius: 2px; /* 角丸 */
    background-color: #f7f7f7; /* 背景色 */
    /*padding: 0.5em;*/ /* 内側の余白 */
    width: 187px; /* フォーム全体の幅 */
    max-width: 187px;
    height: 40px;
    font-size: 1rem;
    position: relative;
}

.search-field {
  flex: 1; /* 検索入力欄を余白いっぱいに拡張 */
  border: none; /* 枠線を削除 */
  outline: none; /* フォーカス時のアウトラインを削除 */
  padding: 0 1.5rem 0 0.5em; /* 内側の余白 */
  /*font-size: 1em;*/ /* フォントサイズ */
  height: 100%;
  width: 100%;
  background-color: #f7f7f7; /* 背景色 */
  color: #000000;
}

.search-submit {
    display: inline-block;
    bottom: 0;
    right: 0;
    top: 0;
    height: auto;
    position: absolute;
    /*width: 38px;*/ /* ボタンの幅 */
    border: none; /* ボタンの枠線を削除 */
  /*background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center;*/
    /*background-size: contain;*/ /* アイコンを適切にサイズ調整 */
    cursor: pointer; /* ポインターに変更 */
    padding: 1px 9px;
    background-color: #f7f7f7; /* 背景色 */

    font-size: 1.5rem; /* fontawesome用 */
}
/*
.search-submit::before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-origin: content-box;
    background-color: transparent;
    vertical-align: middle;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
    width: 24px;
    min-width: 24px;
    height: 24px;
    background-color: #f7f7f7; /* 背景色 *
}
*/

.hamburger {
    display: none;
}
.sp-nav {
    display: none;
}


/* SP nav menu */
/* SP用ナビパート */
.sp-navi-container {
    display: none;
    align-items: center;
    justify-content: flex-end;
    background-color: #002244;
}
/* ハンバーガーメニューアイコン */
.sp-navi-container .hamburger {
    font-size: 24px;
    cursor: pointer;
    color: #ffffff;
    margin-right: 0.5rem;
}
/* メニューのトグル */
.toggle-menu {
    display: none; /* チェックボックス自体は非表示 */
}

/* メニューのスタイル */
.sp-nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 34, 68, 0.8);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

/* チェック時にメニューを表示 */
#toggle-menu:checked + .hamburger + .sp-nav-menu {
    right: 0;
}

/* モーダルが表示されたときにスクロールを無効化 */
body:has(input#toggle-menu:checked) .main {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* メニューの項目スタイル */
.sp-nav-menu ul {
    text-align: center;
}

.sp-nav-menu ul li {
    margin: 20px 0;
}

.sp-nav-menu a {
    color: white;
    text-decoration: none;
    font-size: 24px;
    /*margin: 1rem 0;*/
}

.submenu {
    margin-top: 10px;
    font-size: 20px;
}

/* 閉じるボタン */
.close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 24px;
    cursor: pointer;
    color: #ffffff;
}







/* main contents */

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
    flex-grow: 1;
}
main > article{
    max-width: 684px;
}

.article-title {
    font-size: 2rem;
}

/* single post */
.post-eye-catch {
    margin-top: 2rem;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem; /* 全体のフォントサイズ */
  margin: 10px 0;
}

.article-meta .left i, .right i {
  margin-right: 5px; /* アイコンとテキストの間隔 */
  color: #0073aa; /* アイコンの色 */
}
.article-meta .article-author {
  text-align: left; /* 左寄せ（デフォルト） */
}

.article-meta .article-date {
  text-align: right; /* 右寄せ */
}

/*
.article-container {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.article-content, .article-info {
  padding: 10px;
}
*/
.divider {
  height: 10px; /* 区切り線の高さ */
  background: repeating-linear-gradient(
    45deg,         /* 斜め方向 */
    #6E7B91,       /* 青色 */
    #6E7B91 10px,  /* 青色の幅 */
    white 10px,    /* 白色に切り替わる位置 */
    white 20px     /* 白色の幅 */
  );
  margin: 20px 0; /* 上下のマージン */
}
/* #0073aa #5A6A8A #6E7B91 #4C6276 #5A6A8A */

/* Top Page */
.list-contents > .list-divider {
    margin-top: 10px;
    border-top 1px solid #6e7b91;
    width: 976px;
}

.list-contents > .list-divider > h2 {
    padding-inline-start: 0.5rem;
    border-inline-start: 4px solid #005aa3;
}

/* List layout */
.list-page-header {
    width: 100vw;
    border-bottom: 0.1rem dashed #6e7b91;
    justify-items: center;
}
.list-page-title-container {
    width: 976px;
    text-align: left;
}

.list-contents {
    width: 100%;
    justify-items: center;
}

/* 投稿リスト全体のスタイル */
.post-list {
    display: flex;
    flex-direction: row;
    gap: 20px; /* 各投稿の間の余白 */
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
    width: 976px;
    /*
    min-width: 976px;
    max-width: 976px;
    */
    border-top: 1px solid #ddd; /* 区切り線 */
    padding-top: 10px;
    /*align-items: flex-start;*/
    justify-content: space-between;
}

.post-list .post-image {
    flex: 0 0 20%; /* 画像エリアの幅を20%に設定 */
    max-height: 102px; /* 最大高さ */
    overflow: hidden; /* はみ出す部分を非表示 */
}

.post-list .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を維持して収める */
}

.post-list .post-title {
    font-size: 1.25rem;
    margin: 0;
    color: #333;
    font-weight: bold;
}

.post-list .post-title > a {
    text-decoration: none;
    color: inherit;
}

.post-list .post-content p {
    color: #888;
}


/* 1件目（特大表示）のスタイル */
.post-list.list-first {
    margin-top: 0;
    border-top: none; /* 区切り線 */
}

/* 1件目の画像スタイル */
.post-list.list-first .post-image {
    flex: 0 0 40%; /* 画像エリアの幅を40%に設定 */
    max-height: 238px; /* 最大高さ */
    overflow: hidden; /* はみ出す部分を非表示 */
}

/* 1件目のテキスト部分 */
.post-list.list-first .post-content {
    flex: 1;
}

.post-list.list-first .post-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.post-list.list-first .post-excerpt {
    font-size: 1rem;
    color: #555;
}

footer {
    background-color: #002244;
    color: white;
    text-align: center;
    padding: 1rem;
}
@media screen and (max-width: 820px) {
    .pc-nav {
        display: none;
    }

    .sp-navi-container {
	display: flex;
    }

    .hamburger {
        display: block;
        cursor: pointer;
    }
    .sp-nav {
	display: block;
	width: 100vw;
    }
    .sp-nav ul {
        /*display: none;*/
	list-style-type: none;
        flex-direction: column;
        gap: 1rem;
        /*background-color: #002244;*/
        padding: 1rem;
        cursor: pointer;
    }

    .list-contents > .list-divider, 
    .list-page-title-container {
	padding: 0 1rem;
	width: calc(100vw - 2rem);
    }
    .post-list {
	padding: 0 1rem;
	width: calc(100vw - 2rem);
    }
}

@media (max-width: 430px) {
    .post-image {
	display: none;
    }
}