/*
Template:easel
Theme Name:canvas on EASEL
Version: 1.1.0
*/

/* ここから下に書いたCSSが、親テーマCSSに上書きされます。 */

/* ======================================== */
/* 全ての画面サイズに共通で適用される基本スタイル（初期化・隠す要素など） */
/* ======================================== */

/* ローディング画面のスタイル */
#loading-screen {
    display: none;        /* 見た目を完全に消す */
    opacity: 0;           /* 透明にする */
    visibility: hidden;   /* 完全に隠す */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999 !important;
}

#loading-screen.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.9s ease, visibility 0.9s ease;
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loading-webp {
    max-width: 250px;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

#loading-screen p {
    color: #fff;
    font-size: 1.2em;
}

/* input[type="checkbox"]#menubar を完全に非表示にする */
/* これが画面に白い四角として見えてしまう主な原因なので、最優先で隠す */
input[type="checkbox"]#menubar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    position: absolute !important; /* 念のため絶対位置指定で画面外に */
    left: -9999px !important; /* 画面の遥か左に飛ばす */
    top: -9999px !important;
    z-index: -1 !important; /* 最背面 */
}

/* メニュー外をクリックで閉じるためのオーバーレイの初期状態（常に非表示） */
#nav-back {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background-color: transparent !important;
    z-index: 9998 !important; /* メニューよりは下 */
    cursor: pointer !important;
}

/* ヘッダー内の文字色を白に（グローバルに設定） */
#inner-header a,
#inner-header p,
#inner-header .site-desc
{
    color: #e6b422 ;
}

/* メニュー内アイコン（「日誌」横の鉛筆）の調整 */
.gnavi li a i.fas {
    background-color: transparent !important; /* 背景色を透明に */
    border: none !important; /* 枠線をなくす */
    box-shadow: none !important; /* 影をなくす */
    padding: 0 !important; /* アイコン自体の余白をなくす */
    margin-right: 5px !important; /* アイコンとテキストの間に少しスペースを確保 */
    vertical-align: middle !important; /* アイコンをテキストの真ん中に揃える */
    line-height: 1 !important; /* アイコンの行の高さをテキストに合わせる */
    color: inherit !important; /* 親要素（リンク）の文字色を継承 */
}

/* メニューリンクのパディング調整（アイコンの領域を考慮） */
.gnavi li a {
    padding-left: 10px !important; /* 左側のパディングを調整してアイコンに重ならないように */
    padding-right: 10px !important; /* 右側のパディングも調整 */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ==========================================================================
   PC表示時のスタイル（769px以上の画面幅）
   ========================================================================== */
@media screen and (min-width: 769px) {
    /* PC表示時にはハンバーガーアイコン（ラベル要素）を非表示にする */
    #formenubar {
        display: none !important;
    }

    /* ヘッダー部分の左右の白い余白をなくす（PC用） */
    .header .wrap {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ヘッダー全体の親要素の中央寄せ（PC用） */
    body #container #hcatopheader,
    body #container header.header,
    body #container #inner-header {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    /* ロゴの画像とサイトタイトル、キャッチフレーズの調整（PC用） */
    .logo img {
        display: block;
        margin: 0 auto;
    }
    #logo,
    .site-desc,
    #logo a {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* PC表示時のメニューのスタイル（横並び、中央寄せ） */
    nav[role="navigation"] {
        position: static !important; /* 絶対位置指定を解除して通常の流れに戻す */
        left: auto !important;      /* 隠す設定を解除 */
        top: auto !important;       /* 隠す設定を解除 */
        width: auto !important;     /* 幅の強制解除 */
        height: auto !important;    /* 高さの強制解除 */
        background-color: transparent !important; /* 背景色も透明に */
        z-index: auto !important;   /* z-indexも解除 */
        display: block !important;  /* 必ずブロック要素として表示 */
        text-align: center;         /* メニュー全体を中央に寄せる */
        padding-top: 0 !important; /* 上のパディングを解除 */
    }
    .nav.top-nav {
        display: flex !important; /* PCではFlexboxで横並び */
        justify-content: center !important; /* 中央寄せ */
        flex-wrap: wrap !important; /* 折り返し */
        list-style: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
    .nav.top-nav li {
        margin: 0 10px !important; /* メニュー項目間の余白 */
        border-bottom: none !important; /* スマホ時の下線を消す */
		color: #95a0a6; /* PCメニューの文字色 */
    }
    .nav.top-nav li a {
        display: block !important;
        padding: 10px 15px !important;
        color: #95a0a6; /* PCメニューの文字色 */
        text-decoration: none ;
		border-radius: 5px; /* ここを追加！角を丸くするよ！ */
    }
    .nav.top-nav li a:hover {
        background-color: transparent !important; /* ホバー時の背景色を透明に */
        color: #ADD8E6 !important; /* PCメニューホバー時の色 */
		color: #95a0a6; /* PCメニューの文字色 */
    }
}

/* ==========================================================================
   スマホ・タブレット表示時のスタイル（768px以下の画面幅）
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* ハンバーガーアイコンを表示する */
    #formenubar {
        display: block !important; /* スマホでは表示 */
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 99999 !important;
        font-size: 1em !important;
        color: #ffffff !important;
        cursor: pointer !important;
    }

    /* ハンバーガーアイコンのFont Awesomeのアイコン自体に色を適用（白） */
    #formenubar i.fas { /* これもスマホ用の設定なのでメディアクエリ内へ */
        color: #ffffff !important;
        font-size: 1em !important;
        vertical-align: middle !important;
    }

    /* メニュー本体を画面外に隠す（初期状態） */
    nav[role="navigation"] {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important; /* 左に隠す */
        width: 100% !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.9) !important;
        transition: all 0.3s ease !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        display: block !important;
        text-align: left !important;
        padding-top: 60px !important;
    }

    /* チェックボックスがONの時にメニューを表示する */
    /* ここは #menubar:checked + nav[role="navigation"] に戻すのが正しいはず */
    /* もし、#formenubar と #menubar の間に別の要素がないなら、これが正解 */
    #menubar:checked + nav[role="navigation"] {
        left: 0 !important; /* 画面内にスライドして表示 */
    }

    /* nav-back（メニュー外をクリックで閉じるためのオーバーレイ） */
    /* チェックボックスがONの時にnav-backを表示 */
    /* これも #menubar:checked + #nav-back が正しいはず */
    #menubar:checked + #nav-back {
        display: block !important;
    }

    /* nav-back自体はメニューより一つ下のz-indexで、デフォルトは非表示 */
    #nav-back {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background-color: transparent !important;
        z-index: 9998 !important;
        cursor: pointer !important;
    }

    /* スマホ時のメニュー項目スタイル */
    .nav.top-nav {
        display: block !important; /* 縦並びにする */
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .nav.top-nav li {
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .nav.top-nav li:last-child {
        border-bottom: none !important;
    }
    .nav.top-nav li a {
        padding: 15px 20px !important;
        display: block !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
    .nav.top-nav li a:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #ADD8E6 !important;
    }
}
/* ======================================== */
/* サイト全体の本文の文字色調整 */
/* ======================================== */

/* サイト全体の本文（段落、リストなど）の基本色 */
body,
#container p,
#container li,
#container a:not(.btn):not(.top-nav a):not(.widget_text a) {
    color: #DDDDDD;
    line-height: 1.8;
}

/* 記事のタイトルや見出しの色 */
h1, h2, h3, h4, h5, h6 {
    color: #EEEEEE;
}

/* ======================================== */
/* リンク文字の調整（全体） */
/* ======================================== */

/* サイト全体のリンクの通常時の文字色を統一 */
#container a {
    color: #6da0a8 !important; /* スカイブルーを強制的に適用 */
    text-decoration: none !important;
}

/* リンクにマウスカーソルを合わせた時の色 */
#container a:hover {
    color: #FFD700 !important; /* ゴールドに統一 */
    text-decoration: none !important;
}

/* ナビゲーションメニューのリンク（PC用、スマホ用） */
.nav.top-nav li a:hover {
    color: #FFD700 !important;
}
@media screen and (max-width: 768px) {
    .nav.top-nav li a:hover {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #FFD700 !important;
    }
}

/* ======================================== */
/* サイト全体の背景 */
/* ======================================== */

body {
    background: linear-gradient(to bottom, #1c1526 0%, #282033 50%, #B0A0B0 100%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

#container, header.header, footer.footer, #hcatopheader, #inner-header {
    background-color: transparent !important;
}

/* ======================================== */
/* 個別の要素の調整 */
/* ======================================== */

/* 更新履歴の文字色 */
#new_list_01 a {
    color: #FFFFFF !important; /* ここは白でOK */
}
.news_list li a span.news_title {
    display: block;
    -webkit-box-flex: 1;
    flex: 1;
    color: #bbc9ed;
}

/* ハンバーガーメニューのアイコンサイズ */
#formenubar .fa-bars {
    font-size: 15px;
}

/* ヘッダーの固定 */
.header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
}