/* --- Google Fontsの読み込み --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');

/* --- Typo & Base --- */
body {
    /* 背景画像の設定 */
    background: #333333 url(https://u.jimcdn.com/cms/o/sd80da29bc85f4afc/userlayout/img/background-1.jpg?t=1773385905) no-repeat center top fixed; 
    background-size: cover; 
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #444;
}

a:link, a:visited { text-decoration: underline; color:#EC4413; }
a:hover { text-decoration:none; }

/* --- 1. Full Width Header Section --- */
#header-full {
    width: 100%;
    background: #fff;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
}

.main-header-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

/* --- 2. マウス編集エリア (黒背景 & カスタムボタン) --- */
#editable-column {
    width: 100%;
    background: #000000; 
    padding: 5px 0;
    border-bottom: 1px solid #333;
    font-size: 14px;
    line-height: 1;
    letter-spacing: normal;
}

#editable-column .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 5px;
    min-height: 10px;
}

/* 編集エリア内のボタン：オレンジ背景・緑枠 */
#editable-column .j-button, 
#editable-column .cc-button,
#editable-column .j-calltoaction-button {
    display: inline-block;
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 700;
    font-size: 22px;
    padding: 20px 40px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 0;
    box-sizing: border-box;
    /* 通常時 */
    background-color: #ff9900 !important; 
    color: #ffffff !important;
    border: 3px solid #00b050 !important;
    cursor: pointer;
}

/* 編集エリア内のボタンホバー：緑背景 */
#editable-column .j-button:hover, 
#editable-column .cc-button:hover,
#editable-column .j-calltoaction-button:hover {
    background-color: #00b050 !important;
    border-color: #00b050 !important;
    color: #ffffff !important;
}

/* --- 3. Full Width Navigation (画面端まで・黒背景・白枠) --- */
#navigation-full {
    width: 100%;
    background: #000000; 
    border-top: 1px solid #333;
    border-bottom: 2px solid #EC4413;
    letter-spacing: normal;
}

.nav-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

ul.mainNav1, ul.mainNav2, ul.mainNav3 {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    width: 100%;
}

ul.mainNav1 li, ul.mainNav2 li, ul.mainNav3 li {
    flex: 1;
    display: flex;
}

ul.mainNav1 li a, ul.mainNav2 li a, ul.mainNav3 li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 22px 0;
    font-family: 'Noto Serif JP', serif;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    /* 通常時：黒背景・白文字・白枠 */
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    margin-right: -1px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* --- 【追記・修正箇所】 --- */

/* マウスホバー時：明るいオレンジ */
ul.mainNav1 li a:hover,
ul.mainNav2 li a:hover,
ul.mainNav3 li a:hover {
    background-color: #ff9900 !important;
    color: #ffffff !important;
}

/* 現在のページのボタン：濃いめのオレンジ・白文字 */
ul.mainNav1 a.current,
ul.mainNav2 a.current,
ul.mainNav3 a.current {
    background-color: #d35400 !important; /* 濃いオレンジ */
    color: #ffffff !important;           /* 文字色：白 */
    border: 1px solid #ffffff !important; /* 枠線：白を維持 */
}

/* --- 4. Main Content Area (透明度 & ぼかし & 白文字) --- */
#container {
    margin: 30px auto;
    width: 95%;
    max-width: 834px;
    
    /* 背景色：少し暗めの透過にすると白文字がより映えます */
    background: rgba(0, 0, 0, 0.5); /* 黒の50%透過（お好みでrgba(255,255,255,0.2)などに調整可） */
    
    /* ★全体の文字色を白に設定 */
    color: #ffffff !important; 
    
    /* 背景のすりガラス効果 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

#wrapper {
    padding: 50px 40px;
}

/* ★メインエリア内の見出しもフォントを統一し、色を白にする */
#content h1, #content h2, #content h3 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    color: #ffffff !important; /* 見出しを白に */
    border-bottom: 2px solid #ffffff; /* 見出しに下線をつける場合（不要なら消してください） */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* フッターも合わせて白文字にする場合 */
#footer {
    background: rgba(0, 0, 0, 0.7); /* フードも暗めにして統一感を */
    padding: 30px;
    text-align: center;
    border-top: 1px solid #333;
    color: #ffffff !important;
}

#footer a {
    color: #ffffff; /* フッター内のリンクも白に */
}

/* --- 5. Slick Slider Custom Styles --- */

/* スライダー全体のコンテナ */
.main-slider {
    width: 100%;
    margin: 0 auto;
    background: #000; /* 画像読み込み前のチラつき防止 */
    overflow: hidden;
}

/* スライド内の画像調整 */
.main-slider img {
    width: 100%;
    height: auto;
    display: block;
}

/* 左右の矢印ボタンのカスタマイズ */
.slick-prev, .slick-next {
    z-index: 10;
    width: 50px;
    height: 50px;
}

/* 矢印の位置調整（画面端に寄せる） */
.slick-prev { left: 20px; }
.slick-next { right: 20px; }

/* 矢印の見た目（白に変更） */
.slick-prev:before, .slick-next:before {
    font-size: 40px;
    color: #ffffff !important;
    opacity: 0.8;
}

/* 下部のドットナビゲーション */
.slick-dots {
    bottom: 20px; /* 画像の上に被せる */
}

.slick-dots li button:before {
    color: #ffffff !important; /* ドットの色を白に */
    font-size: 12px;
    opacity: 0.5;
}

.slick-dots li.slick-active button:before {
    color: #ff9900 !important; /* アクティブなドットをオレンジに（ボタン色と統一） */
    opacity: 1;
}

/* スライダーとコンテンツの間の余白（お好みで） */
.main-slider {
    border-bottom: 2px solid #EC4413; /* ナビゲーションの線と合わせる */
    margin-bottom: 0; 
}

/* --- 6. リンク・ボタン限定の柔らかいホバーエフェクト --- */

/* 1. 変化をなめらかにする（リンク・ボタン系のみ） */
a, 
button, 
.j-button, 
.cc-button, 
.j-calltoaction-button {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 2. リンク全般のホバー：少し浮き上がり、影をつける */
a:hover, 
.j-button:hover, 
.cc-button:hover, 
.j-calltoaction-button:hover {
    transform: translateY(-3px); /* 3px上にふわっと浮く */
    text-decoration: none;       /* ホバー時に下線を消す設定 */
}

/* 3. リンク付き画像のみのホバー：少し透明にする */
a img:hover {
    opacity: 0.7;
    transform: scale(1.02); /* わずかに大きく（柔らかい拡大） */
}

/* 4. ナビゲーションボタンのホバー：浮き上がりの調整 */
ul.mainNav1 li a:hover,
ul.mainNav2 li a:hover,
ul.mainNav3 li a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* 黒背景に合う深めの影 */
}

/* ★(修正) ヘッダー2スライダー用の基本スタイル */
.header-2-slider {
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* 画面端からはみ出さないようにする */
    background: #000;
}

/* スライド内の画像設定 */
.header-2-slider img { 
    width: 100%;       /* ★修正：centerPaddingを使うので幅は100%でOK */
    height: auto;
    display: block;
    /* 左右に少し隙間（余白）が欲しい場合はここを調整 */
    padding: 0 20px; 
    box-sizing: border-box;
}

/* ★(追加) 隣の画像（中央以外）を少し暗くして目立たなくする場合 */
.header-2-slider .slick-slide {
    opacity: 0.5;
    transition: opacity 0.5s;
}
.header-2-slider .slick-center {
    opacity: 1;
}