/*
Theme Name: My Original Theme
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: This is my custom WordPress theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-original-theme
Tags: custom-theme, blog
*/

/*==================================================
=            テーマの全体的なレイアウト            =
==================================================*/

/* 全体の高さを設定 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* bodyをFlexboxコンテナとして設定 */
body {
    display: flex;
    flex-direction: column;
}

.mytheme-tabs {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    font-size: 0.7rem;
}

/* メインコンテンツエリアのFlexboxを#content-wに適用 */
#content-w {
    display: flex;
    gap: 2rem; /* メインコンテンツとサイドバーの間に隙間を開ける */
    /* max-widthは削除 */
    margin: 0 auto; /* 中央寄せ */
    /* padding: 20px; はfunctions.phpで設定 */
    flex: 1; /* これが重要です */
}

/* メインコンテンツエリアのスタイル */
.content-area {
    flex: 1; /* 残りのスペースを全て占める */
}

/* サイドバーエリアのスタイル */
.widget-area {
    /* widthは削除 */
    flex-shrink: 0; /* サイドバーが縮まないようにする */
}

.site-main {
    border-radius: 10px;
    border: solid 1px #000000;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* サイドバーが左側の場合 */
.has-sidebar-left #content-w {
    flex-direction: row-reverse; /* 要素を右から左に並べる */
}

/*==================================================
=            サイドバーの位置切り替えCSS            =
==================================================*/

/* サイドバーが右側の場合（デフォルト） */
.has-sidebar-right {
/*    flex-direction: row; *//* 要素を左から右に並べる */
}

/* サイドバーが左側の場合 */
.has-sidebar-left {
/*    flex-direction: row-reverse; *//* 要素を右から左に並べる */
}

/* サイドバーが表示されない場合 */
.no-sidebar .content-area {
    width: 100%; /* メインコンテンツが幅全体を占める */
}
.no-sidebar .widget-area {
    display: none; /* サイドバーを非表示にする */
}

aside#secondary > section {
    border: solid 1px #000000;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px;
    margin-bottom: 15px;

}


/*==================================================
=            ブログ記事リストのスタイル            =
==================================================*/

/* 画像で提示されたブログリストのスタイルを再現 */
.content-area .entry {
    display: flex;
    margin-bottom: 20px;
    overflow: hidden;
    
    border-bottom-width: 2px;
    border-bottom-style: dashed;
    border-bottom-color: #0a0a0a;
    
    max-height: 250px;
    min-height: 250px;
}

.content-area .post-thumbnail {
    flex-shrink: 0;
    width: 200px;
    height: 150px;
    background-size: cover;
    background-position: center;
}

.content-area .entry-content-wrapper {
    padding: 15px;
}

.content-area .entry-header {
    margin-bottom: 10px;
}

.content-area .entry-title {
    font-size: 1.2rem;
    margin: 0;
}

.content-area .entry-meta {
    font-size: 0.8rem;
    color: #888;
}

.content-area .entry-summary p {
    font-size: 0.9rem;
    line-height: 1.5;
}

.content-area .entry-tags {
    margin-top: 10px;
}

.content-area .entry-tags .tag {
    display: inline-block;
    background-color: #f0f0f0;
    color: #555;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.8rem;
}

/*==================================================
=            投稿ナビゲーションのスタイル             =
==================================================*/

/* ページネーション全体のコンテナ */
#content-w .pagination {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/* ページ番号の各ボタン（全体） */
#content-w .pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #888;
    background-color: #fff;
    transition: background-color 0.3s;
}

/* ページ番号のホバー時 */
#content-w .pagination .page-numbers:hover,
#content-w .pagination .page-numbers:focus {
    background-color: #f0f0f0;
    color: #555;
    border-color: #ccc;
}

/* 現在のページ */
#content-w .pagination .page-numbers.current {
    background-color: #f0f0f0;
    font-weight: bold;
    color: #555;
    border-color: #ccc;
    cursor: default;
}

/* 前後ボタン */
#content-w .pagination .prev,
#content-w .pagination .next {
    font-weight: normal;
    font-size: 14px;
}

/* 省略記号 */
#content-w .pagination .page-numbers.dots {
    border: none;
    background-color: transparent;
    cursor: default;
}


/*=====================================
=            single.php のレイアウト            =
======================================*/

/* メインコンテンツとサイドバーのコンテナを横並びにする */
#content-w {
    display: flex;
    justify-content: center; /* コンテンツを中央に寄せる */
    gap: 30px; /* メインコンテンツとサイドバーの間隔 */
    margin: 30px auto; /* 上下の余白と中央寄せ */
    max-width: 1200px; /* ページの最大幅 */
}

/* メインコンテンツエリアの幅 */
#primary {
    flex: 1; /* 残りのスペースをすべて使う */
    min-width: 0; /* フレックスアイテムの最小幅をリセット */
}

/* サイドバーエリアの幅 */
.widget-area {
    width: 300px; /* サイドバーの幅を固定 */
    flex-shrink: 0; /* 縮小させない */
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    #content-w {
        flex-direction: column; /* 縦並びにする */
        gap: 0;
        padding: 0 20px; /* 左右に余白を追加 */
    }
    #primary {
        order: 2; /* 縦並びにしたときにメインコンテンツを下にする */
    }
    .widget-area {
        width: 100%;
        order: 1; /* サイドバーを上に配置 */
    }
}


/*=====================================
=            ヘッダーとナビゲーションのレイアウト            =
======================================*/

/* ヘッダー全体の基本スタイル */
#masthead {
    /* ここに背景色、影、ボーダーなど、共通のスタイルを記述します */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* サイトコンテンツ全体のラッパー（ヘッダーの高さ分、余白を持たせるためのスタイル） */
body.fixed-header #content {
    /* padding-top: 100px; は動的に出力されるので不要 */
    margin: 0 auto;
}

/* ヘッダーを固定した場合のスタイル */
#masthead.fixed {
    /* position: fixed; 等は動的に出力されるので不要 */
}

/* ロゴとメニューを横並びにするためのコンテナ */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 25px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ロゴ画像のサイズを調整 */
.site-branding img {
    max-height: 50px; /* ロゴ画像の最大高さを指定 */
    width: auto;      /* 幅は自動で調整 */
}

/* メニューのスタイル */
#site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

#site-navigation li a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    transition: color 0.3s;
}

#site-navigation li a:hover {
    color: #007bff;
}



/*=====================================
=            投稿ページ共通スタイル            =
======================================*/

/* 単一記事表示（single.php）用のスタイル */
.single-post-thumbnail {
    margin-bottom: 30px; /* 画像の下に余白を追加 */
    width: 100%;
    height: auto;
}

.single-post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 投稿タイトル */
.single .entry-title {
    margin-top: 0;
}


/*=====================================
=            キービジュアルのスタイル            =
======================================*/
/* ここからスライダー用のスタイルを追加・修正 */

/* キービジュアル全体を囲むコンテナ */
.keyvisual {
    overflow: hidden;
    position: relative;
}

/* スライダーのラッパー */
.keyvisual-slider {
    width: 100%;
}

/* 画面いっぱいのキービジュアル */
.keyvisual-full {
    max-width: none;
    margin-left: calc(50% - 50vw);
    width: 100vw;
}

/* サイト幅に合わせたキービジュアル */
.keyvisual-container {
    max-width: 1200px; /* サイトの最大幅に合わせる */
    margin: 0 auto;
}

/* 各スライドアイテム */
.keyvisual-slide-item {
    position: relative;
    height: 600px; /* スライドの高さ。必要に応じて調整 */
    overflow: hidden;
}

/* 画像と動画 */
.keyvisual-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;'; /* IE用 */
}

/* テキストオーバーレイ */
.keyvisual-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    z-index: 10;
    text-align: center;
}

/* Slickスライダーのドットと矢印のスタイル */
.slick-dots {
    bottom: 20px;
    z-index: 20;
}

/* 矢印を画像の上に表示させるための設定 */
.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 50px !important;  /* 矢印の幅を大きくする */
    height: 50px !important; /* 矢印の高さを大きくする */
}

/* 矢印の左側 */
.slick-prev {
    left: 20px !important;
}

/* 矢印の右側 */
.slick-next {
    right: 20px !important;
}

/* 矢印のアイコン自体を大きくする */
.slick-prev:before, .slick-next:before {
    font-size: 50px !important; /* アイコンのサイズを大きくする */
    color: #fff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1 !important; /* アイコンの縦位置を調整 */
}

/* --- ここから追記 --- */
/* 矢印の背景色を消す */
.slick-prev:focus,
.slick-prev:hover,
.slick-next:focus,
.slick-next:hover {
    background-color: transparent !important;
    outline: none !important;
}

/* 矢印が隠れてしまう場合に備えて親要素に position:relative を設定 */
.slick-list {
    position: relative;
}

/*=====================================
=            フッターウィジェットのスタイル            =
======================================*/
.site-footer {
    /* functions.phpでフル幅のCSSを動的に出力するので、ここでは基本スタイルのみ */
    background-color: #f8f8f8;
    box-sizing: border-box;
}

.footer-widgets-container {
    /* functions.phpでレイアウトCSSを動的に出力するので、ここでは基本スタイルのみ */
    margin: 0 auto;
    padding: 0 10px; /* 左右に少し余白を持たせる */
}

/* フッターカラムの共通スタイル */
.footer-widget-column {
    margin-bottom: 20px;
    padding: 0 10px;
}

/* 列数に応じた幅の調整はPHPで出力されるCSSで制御 */
/* 例: .footer-widgets-container > .footer-widget-column { width: calc(33.333% - 20px); } */

.footer-widgets-container > .footer-widget-column {
    display: flex;
    justify-content: center;
}

/* ウィジェットタイトル */
.widget-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
}

/* スマホでのレイアウト調整 */
@media (max-width: 768px) {
    .footer-widgets-container {
        flex-direction: column;
    }
    .footer-widget-column {
        width: 100% !important;
        padding: 0;
    }
}




/* フル幅表示用のコンテナ */
.full-width-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* フッターのフル幅表示に適用 */
.site-footer.is-fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

/* 親要素のオーバーフローを隠す */
body {
    overflow-x: hidden;
}



.post-navigation-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.post-navigation-list li {
    flex: 1;
    text-align: center;
}

.post-navigation-list a {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

.post-navigation-list a:hover {
    background-color: #f5f5f5;
}

.prev-post-link a {
    justify-content: flex-start;
}

.next-post-link a {
    justify-content: flex-end;
}

.prev-post-link a .post-nav-thumbnail {
    margin-right: 15px;
}

.next-post-link a .post-nav-thumbnail {
    margin-left: 15px;
}

.post-nav-content {
    display: flex;
    flex-direction: column;
}

.nav-direction {
    font-size: 0.8em;
    color: #666;
}

.nav-title {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.4;
}

/* 左右の区切り線 */
.prev-post-link + .next-post-link {
    border-left: 1px solid #ccc;
}

/* スマホでの表示調整 */
@media (max-width: 768px) {
    .post-navigation-list {
        flex-direction: column;
    }
    .post-navigation-list a {
        flex-direction: row;
        justify-content: space-between;
    }
    .prev-post-link a {
        justify-content: space-between;
    }
    .next-post-link a {
        justify-content: space-between;
    }
    .prev-post-link + .next-post-link {
        border-left: none;
        border-top: 1px solid #ccc;
    }
}







/*==================================================
=            レスポンシブ対応の強制 (1024px以下)            =
==================================================*/
@media (max-width: 1024px) {
    /* 1024px以下でヘッダーメニューをハンバーガーメニューに切り替える */
    /* これまでのハンバーガーメニュー用のCSSはそのまま */
    /* ...省略... */

    /* `function.php`で設定された最小幅を上書き */
    #content-w {
        min-width: unset !important;
        flex-direction: row; /* 横並びを維持 */
        padding: 0 20px;
    }
}


/*==================================================
=            サイドバーとメインコンテンツのレイアウト (767px以下)            =
==================================================*/
@media (max-width: 767px) {
    /* 767px以下でメインコンテンツとサイドバーを縦並びにする */
    #content-w,
    .has-sidebar-left #content-w,
    .has-sidebar-right #content-w {
        flex-direction: column !important; /* 強制的に縦並びにする */
        gap: 0;
        padding: 0 20px;
    }

    #primary {
        order: 2; /* 縦並びにしたときにメインコンテンツを下にする */
    }

    .widget-area {
        width: 100%; /* サイドバーを全幅にする */
        order: 1; /* サイドバーを上に配置 */
    }

    /* メインコンテンツとサイドバーの間の余白を調整 */
    .site-main {
        margin-bottom: 20px;
    }
}



/*==================================================
=            ハンバーガーメニュー            =
==================================================*/
.hamburger-menu-toggle {
    display: none; /* デフォルトでは非表示 */
    padding: 0;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 999;
}

.hamburger-menu-toggle .line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333;
    margin-bottom: 5px;
    transition: transform 0.3s ease;
}

/* メニューが開いたときの線の動き */
.hamburger-menu-toggle[aria-expanded="true"] .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-menu-toggle[aria-expanded="true"] .line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu-toggle[aria-expanded="true"] .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* 1024px以下になったらハンバーガーメニューを表示し、通常メニューを隠す */
@media (max-width: 1024px) {
    .hamburger-menu-toggle {
        display: block;
    }
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 998;
    }
    .main-navigation[aria-expanded="true"] {
        display: block;
    }
    #site-navigation ul {
        flex-direction: column;
        padding: 10px 0;
    }
    #site-navigation li a {
        padding: 15px 25px;
        border-bottom: 1px solid #eee;
    }
}



/*==================================================
=          ローディング画面のスタイル            =
==================================================*/

/* preloaderが表示されている間、サイトコンテンツを隠す */
/* bodyにpreloader-activeクラスが付いているときにスクロールを無効にする */
body.preloader-active {
    overflow: hidden;
}

/* プリローダー全体のスタイル */
#mytheme-preloader { /* ID名を変更 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* 背景色 */
    z-index: 9999; /* 他の要素より前面に表示 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* スピナー（読み込み中のアイコン）のスタイル */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db; /* スピナーの色 */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* アニメーション */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ローディング完了後に表示を非表示にするためのクラス */
#mytheme-preloader.fadeout { /* ID名とクラス名を変更 */
    opacity: 0;
    visibility: hidden;
}