/* 全体のスタイル */
body, ul, li, a {
    margin: 0; /* 一般的にmarginとpaddingはリセットするのが一般的です */
    padding: 0;
    list-style: none;
    text-decoration: none;
}


/*-------------------------------------------------------------------------------*/
/* ナビゲーションメニューのスタイル */
.main-nav {
    background-color: #000080; /* 濃紺の背景色 */
    color: white;
    padding: 0; /* メニューアイテムに直接パディングを適用 */
}

.main-nav > ul > li {
    display: inline-block;
    position: relative;
}

.main-nav a {
    color: white;
    font-weight: bold;
    padding: 10px 50px 10px; /* ＴＯＰ〜リンクまでの幅を指定 */
}

/* ナビゲーションメニューのアイテムにホバーした時のスタイル */
.main-nav a:hover {
    color: red;
    text-decoration: underline; /* テキストの下線を引く */
}

/* ドロップダウンメニュー関連のスタイル */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000080;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    text-align: center;
    min-width: 210px; /* 必要に応じて適用 */
}

/* ドロップダウンメニューのアイテムのスタイル */
.dropdown-content a {
    color: white; /* ドロップダウンメニューのテキスト色 */
    padding: 10px 20px 10px 20px;
    text-decoration: none; /* テキストの下線を削除 */
    display: block;
    white-space: nowrap; /* テキストを折り返さない */
    overflow: hidden; /* コンテンツがオーバーフローしたら隠す */
    text-overflow: ellipsis; /* オーバーフローしたテキストの末尾に省略記号を表示 */
    padding: 12px 16px; /* パディングを適切に設定 */
    display: block; /* ブロックレベル要素として表示 */
    /* その他のスタイル設定 */
}

/* ドロップダウンメニューのアイテムにホバーした時のスタイル */
.dropdown-content a:hover {
    background-color: #000080; /* ホバー時の背景色は#000080 */
    color: red; /* ホバー時のテキスト色を赤に変更 */
    text-decoration: underline; /* テキストの下線を引く */


}

/* ドロップダウンメニューがホバーされたときにドロップダウン内容を表示 */
.dropdown:hover .dropdown-content {
    display: block; /* ドロップダウンを表示 */

}




/*-------------------------------------------------------------------------------*/
/*ボタンの設定*/
.button-container {
    display: flex;
    background-color: #000080; /* ボタンの背景色 */
}

.button, .dropbtn {
    flex-grow: 1;
    text-align: center;
    padding: 10px 20px;
    margin: 0;
    background-color: #000080; /* ボタンの背景色 */
    color: white;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.button-dropdown {
    position: relative;
    display: flex;
    flex-grow: 1;
}

.button-dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%; /* ボタンの下にメニューを表示 */
    background-color: #4051db; /* ドロップダウンの背景色 */
    min-width: 100%; /* ドロップダウンの幅をボタンと同じにする */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.button-dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.button-dropdown:hover .dropdown-content {
    display: block; /* ホバー時にドロップダウンを表示 */

}

.button:hover, .dropdown:hover .dropbtn {
    background-color: #000080; /* ホバー時の色 */
}



/* 余分なスペースやボタンの高さ調整が必要な場合はこちらを調整 */
.button, .dropbtn, .dropdown-content {
    /* ここに追加のスタイルを書く */
}






/* レスポンシブ対応などその他のスタイルはここに追加 */

/*-------------------------------------------------------------------------------*/
/*お問い合わせの設定*/
.contact-link {
    text-align: right; /* 右寄せにする場合 */
    padding: 10px; /* 必要に応じて調整 */
    /* その他のスタイル属性 */
}

.contact-link a {
    color: #0056b3; /* リンクの色 */
    text-decoration: none; /* 下線を消す */
    /* ホバー状態のスタイル */
}

.contact-link a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}


/*-------------------------------------------------------------------------------*/
/*ロゴの設定*/
/*ヘッダーのロゴを左右に分ける*/
.header-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    /* 自衛隊のロゴに関するスタイル (必要に応じて) */
    width: 350px;
    height: 50px;
    margin-right: auto; /* 左に寄せる */
    margin-left: 30px; /* 左端から100px右にずらす */
}

.fb-logo {
    margin-left: auto; /* 右に寄せる */
    margin-right: 100px; /* 右端から100px左にずらす */
}


/*-------------------------------------------------------------------------------*/
/* ナビゲーションメニューのスタイル */

.main-nav ul {
    /* ... 既存のスタイル ... */
}

.main-nav li {
    position: relative;
    /* ... 他のスタイル ... */
}



/*-------------------------------------------------------------------------------*/
/* スライダーのスタイル */
.slide-items {
    width: 50%; /* bxSliderは通常100%の幅でよく使われます */
    height: 50%;
}

.slide-item {
    width: 100%;
    object-fit; cover;
}

/*-------------------------------------------------------------------------------*/
/*お知らせの設定*/
.news-container {
    justify-content: center;
    margin-top: 20px;
    margin-left: 200px;
    margin-right: 200px;
}

.news-section, .press-section {
    flex-basis: 48%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin: 50;
}

.news-items, .press-items {
    max-height: 300px;
    overflow-y: auto;
}

.news-item, .press-item {
    overflow-y: auto;
}

/* その他スタイリング… */

/* フッターのスタイル */
.news-footer, .press-footer {
    padding: 10px;
    text-align: center;
}

.more-news, .more-press {
    text-decoration: none;
    color: #0066cc;
    font-weight: bold;
}

.title {
    text-align: center;

}

/*-------------------------------------------------------------------------------*/
/* トップページの下部バナーの配置設定 */
.image-gallery {
    text-align: center;
}

.image-large img {
    width: 100%; /* 画像をコンテナの幅いっぱいに表示 */
    margin-bottom: 20px;
}

.image-smalls {
    display: flex;
    justify-content: center;
}

.image-small img {
    width: calc(30% - 10px);
    margin: 0 5px;
}

@media (max-width: 600px) {
    .image-smalls img {
        width: 100%;
        margin-bottom: 10px;
    }
}



/*-------------------------------------------------------------------------------*/
/*プロフィールの設定*/
/* 全体のコンテナスタイル */
.profile-container {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 30px;
}

.profile-leftside {
    flex: 2.5;
}

.profile-rightside {
    flex: 7.5;
    background-color: rgba(255, 255, 255, 0.1);
    margin-left: 20px; /* 内側の余白 */
    margin-right: 100px; /* 右側の余白 */
    align-items: start;
    justify-content: flex-start; /* 左側にコンテンツを配置 */
    text-align: left;
}

/* あいさつ文の最後に名前を入れる箇所に使用する */
.text-right {
    display: block; /* ブロックレベル要素として扱う */
    text-align: right; /* テキストを右揃えに */
}

.indented {
    text-indent: 1em; /* インデントを1emに設定 */
    margin-top: 0; /* 上の余白をなくす */
    margin-bottom: 0; /* 下の余白をなくす */
}

p {
    margin-top: 1em; /* 上の余白を1emに設定 */
    margin-bottom: 1em; /* 下の余白を1emに設定 */
    text-align: justify; /* テキストを両端揃えに */
}



.profile-photo {
    width: 90%; /* 画像の幅をコンテナに合わせる */
    height: auto; /* 画像の高さを自動調整 */
}



/* プロフィールの表 */
.profile table {
    width: 60%; /* 表の幅 */
    border-collapse: collapse; /* 表の罫線を1本にする */
    border: 1px solid #ddd; /*　表の枠線 */
    margin: auto; /* 中央にテキストを配置 */
}

.profile th {
    width: 20%; /* 左列の幅を設定 */
    background-color: #f2f2f2; /* 背景色を灰色に */
    font-weight: normal; /* フォントウェイトを標準に設定 */
    padding: 5px; /* セルの上下のパディングを設定 */
    border-bottom: 1px solid #ddd; /* 下罫線を引く */
    text-align: left; /* テキストを左揃えに */
}

.profile td {
    width: 40%; /* 右列の幅を設定 */
    padding: 15px; /* セルの上下のパディングを設定 */
    border-bottom: 1px solid #ddd; /* 下罫線を引く */
    text-align: left; /* テキストを左揃えに */
}

/* 最後の行の罫線を消す */
.profile tr:last-child th,
.profile tr:last-child td {
    border-bottom: none;
}

.profile th, .profile td {
  background-color: rgba(255, 255, 255, 0.5); /* 白の半透明の背景色 */
  /* その他のスタイル */
}


/* タイトルのスタイル */
.title {
    text-align: center;
    font-size: 24px;
}


/*-------------------------------------------------------------------------------*/
/*lightbox2の設定　サムネイル画像を大きくする物*/
#lightbox .lb-container { padding: 3px; }	 /*拡大画像の周囲にある白い枠線の太さをカスタマイズする場合*/
#lightbox .lb-container { padding: 0px; }	 /*拡大画像と白い枠線の表示がずれる場合に、ずれを解消するカスタマイズを加える*/
#lightbox .lb-outerContainer { padding: 6px; }   /*下の2行は、最初の「.lb-container」での余白量調整をキャンセルして、代わりに「.lb-outerContainer」で余白を設ける指定です。/*


/*-------------------------------------------------------------------------------*/
/*任務の設定*/
/* 全体のコンテナスタイル */
.ope-container {
    display: flex;
    width: 90%;
    height: 90%;
    margin: 30px;
}

.ope-photo {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;  /* 5列の1:1:1の配列 */
     width: 100%; /* 画像の幅をコンテナに合わせる */
    height: auto; /* 画像の高さを自動調整 */
    width: 100%;    /* ページの横幅いっぱいを利用 */
    write-space: break-word; /*テキストの折り返しを無効にする */

}

.ope-comment {
    width: 90%;
    height: 90%;
    margin: 30px;
}



/*-------------------------------------------------------------------------------*/
/*〇〇紹介の設定*/
/*プロフィールの設定*/
/* 全体のコンテナスタイル */
.force-container {
    display: flex;
    width: 95%;
    height: 100%;
    margin: 10px;
    text-align: center;
}


.force-leftside {
    flex: 3;
    margin-left: 20px; /* 内側の余白 */
    margin-right: 10px; /* 右側の余白 */

}

.force-rightside {
    flex: 7;
    margin-left: 30px; /* 内側の余白 */
    margin-right: 50px; /* 右側の余白 */
    align-items: start; /* 中央にテキストを配置 */
    justify-content: flex-start; /* 左側に好きなテキストを配置 */
    text-align: left; /* テキストを左揃え */

}


.force-photo {
    width: 90%; /* 画像の幅をコンテナに合わせる */
    height: auto; /* 画像の高さを自動調整 */
}

.force-image-container img {
    width: 100%;
    display: block;
    margin-bottom: 20px; /* 画像とテキスト入力エリアの間のスペース */
}

.force-input-container {
    text-align: center; /* センタリングする場合はこれを使用 */
}

#force-textInput {
    width: 80%; /* 必要に応じて調整 */
    height: 150px; /* 高さを指定 */
    padding: 10px; /* 内部のパディング */
    margin: 0 auto; /* 中央揃え */
    display: block; /* ブロックレベル要素として表示 */
    border: 1px solid #ccc; /* 境界線のスタイル */
    border-radius: 4px; /* 角を丸める */
    font-size: 16px; /* フォントサイズ */
}


.force-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.force-image-wrapper {
    width: 30%; /* 画像の幅をコンテナの30%に設定 */
    margin-bottom: 20px; /* 画像とテキスト入力エリアの間のスペース */
}

.force-responsive-image {
    width: 100%; /* 画像を包含するコンテナの幅に合わせる */
    height: auto; /* 画像の高さを自動調整 */
}

.force-text-input-wrapper {
    width: 30%; /* テキスト入力エリアの幅を画像と同じに設定 */
}

.force-textarea {
    width: 100%; /* テキストエリアを包含するコンテナの幅に合わせる */
    height: 100px; /* テキストエリアの高さを指定 */
    padding: 10px; /* 内部のパディング */
    border: 1px solid #ccc; /* 境界線のスタイル */
    border-radius: 4px; /* 角を丸める */
    font-size: 16px; /* フォントサイズ */
    box-sizing: border-box; /* ボックスサイズをborder-boxに設定 */
}

/*-------------------------------------------------------------------------------*/
/*部隊編成と沿革*/
.history-container {
    display: flex;
    width: 90%;
    height: auto;
    justify-content: center; /* 左側にコンテンツを配置 */
    margin-bottom: 30px;
    margin-left:50px;
}

/*-------------------------------------------------------------------------------*/
/*パスワードサイト用*/
body {
    font-family: Arial, sans-serif;
}

.login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #5cb85c;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}

#message {
    margin-top: 10px;
    color: red;
}


/*-------------------------------------------------------------------------------*/

.gallery-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;

}

.gallery-large img {
    width: 100%; /* 画像をコンテナの幅いっぱいに表示 */
    margin-bottom: 20px;
}

.gallery-smalls {
    display: flex;
    justify-content: center;
}

.gallery-small img {
    width: calc(20% - 10px);
    margin: 0 5px;
}

@media (max-width: 600px) {
    .gallery-smalls img {
        width: 100%;
        margin-bottom: 10px;
    }
}







/*家族支援用*/

.family-main {
    justify-content: space-between;
    margin-top: 30px;
    margin-left: 100px;
}

.family-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-left: 100px;
    margin-right: 100px;
}


.column {
    flex: 1; /* 各列が均等な幅を持つように設定 */
    padding: 10px; /* やや余白を持たせる */
    text-align: center; /* テキストを中央揃えに */
    border: 1px solid #000; /* 列を視覚的に分けるためのボーダー */
}

/* 必要に応じて個別の列にスタイルを適用 */
#col-1
#col-2 { background-color: }
#col-3 { background-color: }
#col-4 { background-color: }
#col-5 { background-color: }


.content-table {
    width: calc(100% - 200px); /* 左右のマージンを引いた幅に設定 */
    margin-left: 100px; /* 左のマージンを100pxに設定 */
    margin-right: 100px; /* 右のマージンを100pxに設定 */
    border-collapse: collapse;
    box-sizing: border-box; /* パディングとボーダーを含めた幅が100%に */
    /* その他のスタイリングは変更なし */
}

.content-table thead th {
    text-align: center; /* テーブルヘッダのテキストを中央揃えに */
}

.content-table thead tr {
    background-color: #f2f2f2; /* 一行目の背景色 */
}

.content-table th, .content-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

/*-------------------------------------------------------------------------------*/
/* リンクＮＡＶＩ */
.link-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;  /* 5列の1:1:1の配列 */
     width: 100%; /* 画像の幅をコンテナに合わせる */
    height: auto; /* 画像の高さを自動調整 */
    width: 90%;    /* ページの横幅いっぱいを利用 */
    write-space: break-word; /*テキストの折り返しを無効にする */
    margin-top: 10px;
    margin-left: 50px;
}

.yokosuka, .kure, .sasebo, .maizuru, .ominato {
   margin: 30px;
}



/*-------------------------------------------------------------------------------*/
/*スライドショーの設定*/
/*スライダーの設定*/

.slider .slick-prev
{
    /* デフォルトでは-25px(= スライダーの外側) */
    left: 400px;
}
.slider .slick-next
{
    /* デフォルトでは-25px(= スライダーの外側) */
    right: 400px;
}

.slider .slick-prev,
.slider .slick-next
{
    /* スライド画像の後ろに隠れないようにする */
    z-index: 100;
}

.slider .slick-prev::before,
.slider .slick-next::before {
    font-size: 28px; /* アイコンのサイズ */
    color: black; /* アイコンの色 */
}


/* Slickスライドのカスタムスタイリング */
.slider .slick-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px; /* スライドの高さを設定 */
}

.slider img {
    max-width: 480px; /* 画像の表示サイズを480ピクセルの幅に制限 */
    max-height: 400px; /* 画像の表示サイズを600ピクセルの高さに制限 */
    width: auto; /* オリジナルのアスペクト比を維持 */
    height: auto; /* オリジナルのアスペクト比を維持 */
}


/*-------------------------------------------------------------------------------*/
/*フッターの設定*/
.footer {
    text-align: center;
    padding: 20px;

}

/*画像拡大用(モーダル)*/