@charset "Shift_JIS";

/* =========================================
   ナビゲーションメニュー全体の設定
   ========================================= */
/* 全体の箱：高さを固定せず、中身に合わせて広がるようにします */
.nara-nav-container {
    width: 100%;
    height: auto !important; /* 高さを強制的に自動調整 */
    overflow: visible !important; /* はみ出しを隠さない */
    background-color: #005a8d;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    position: relative;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    clear: both; /* ヘッダーロゴの左右回り込みを確実に解除 */
    margin-top: 15px; /* メニューバー上の余白 */
}

/* メニューの並び：flex-wrapで2段・3段になるのを許可します */
.nara-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-wrap: wrap !important; /* 折り返しを強制 */
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    height: auto !important;
}

/* 各項目の基本設定 */
.nara-nav > li {
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1; /* 通常時は低く */
}

/* 【ここが解決策】マウスを乗せた項目（とサブメニュー）を最前面へ */
.nara-nav > li:hover {
    z-index: 10000 !important; /* 2段目の文字よりも上に表示させる */
}

.nara-nav a {
    display: block;
    padding: 12px 18px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
}

.nara-nav li:hover > a {
    background-color: #003d60;
}

/* サブメニュー：絶対配置で表示 */
.nara-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    min-width: 240px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 3px solid #003d60;
}

.nara-nav li:hover .nara-sub {
    display: block !important;
}

.nara-sub li {
    border-bottom: 1px solid #eeeeee;
}

.nara-sub a {
    color: #333333 !important;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: normal;
}

.nara-sub a:hover {
    background-color: #f0f7ff !important;
    color: #005a8d !important;
}

/* 矢印アイコン */
.d-arrow {
    font-size: 0.8em;
    margin-left: 4px;
}

/* =========================================
   ヘッダー（ロゴと連絡先）のデザイン
   ========================================= */
#masthead {
    position: relative;
    padding-bottom: 10px;
    text-align: left; /* 中央揃えを解除 */
    
    /* 旧デザインの背景画像（波線など）がある場合は以下のコメントを外してパスを合わせます */
    /* background-image: url(img/header-main-back.png); */
    /* background-position: left bottom; */
    /* background-repeat: repeat-x; */
}

#masthead-inner {
    position: relative;
    width: 900px;
    margin: 0 auto;
    height: 90px; /* ヘッダーの高さを確保 */
}

/* ロゴのエリア（左側に配置） */
.site-branding {
    float: left;
    padding-top: 27px;
    margin-left: 4px;
}

.site-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.site-title a {
    text-decoration: none;
    color: #333;
    
    /* -----------------------------------------------------
       ★重要：旧デザインのように「学校名の画像ロゴ」を使う場合
       以下の /* から */ までのコメントを外して、画像のパスを入れます。
       （文字が見えなくなり、代わりに画像が表示される仕組みです）
    ------------------------------------------------------- */
    /*
    display: block;
    width: 272px;
    height: 52px;
    padding-top: 52px;
    overflow: hidden;
    background-image: url(画像のパス/画像22.gif);
    background-repeat: no-repeat;
    */
}

/* 連絡先のエリア（右側に配置） */
#hpb-header-extral {
    position: absolute;
    top: 30px; /* 上からの位置 */
    right: 0;  /* 右端に合わせる */
    text-align: right;
    font-size: 0.9em;
    color: #535353;
}

#hpb-header-extral p {
    margin: 0;
    line-height: 1.5;
}