@charset "UTF-8";

/*ヘッダーの色*/
.navbar.custom-navbar {
    background-color: #C7B2D6 !important; 
    padding: 0.2rem 2rem; /* 上下の余白を少し広げる */
}

.custom-navbar .navbar-brand {
    color: #000000 !important;
	font-family: "Zen Antique Soft", serif !important;
    font-weight: bold;
    font-size: 2rem;
}

.navbar-nav .nav-link.active {
    color: #000000!important;
	font-family: "Zen Kaku Gothic New", sans-serif !important;
	font-size: 1.5rem;
}

.navbar-nav .nav-item {
    color: #000000!important;
	font-family: "Zen Kaku Gothic New", sans-serif !important;
	font-size: 1.5rem;
	background-color:  transparent !important;
	transition: all 0.2s ease;
}

/* :bulb: 通常時のボタン自体のデザイン（薄紫色の背景を直接ボタンに敷く） */
.custom-navbar .btn-outline-dark {
    background-color:transparent !important; /* ボタン自身を薄紫色に */
    color: #000000 !important;
	    border: 1px solid #5a2d82 !important;
}

/* :bulb: ナビゲーションバーのボタン：ホバー時を締まりのある濃い紫色にする設定 */
.custom-navbar .btn-outline-dark:hover {
    background-color: #5a2d82 !important; /* 背景を濃い紫色に */
    border-color: #5a2d82 !important;     /* 枠線も濃い紫色に */
    color: #ffffff !important;            /* 文字の色を白に変更 */
}



/* :bulb: ナビゲーションバーの検索ボタン（枠線が濃い紫のスタイル） */
.btn-outline-purple {
    color: #5a2d82 !important;            /* 文字の色を濃い紫に */
/*    border-color: #5a2d82 !important;    */
    background-color:  #E6E6FA !important; 
    font-weight: bold;
    transition: all 0.2s ease;            /* ホバー時の変化を滑らかに */
}

/* マウスを乗せた（ホバー）時のスタイル */
.btn-outline-purple:hover {
    color: #ffffff !important;             /* 文字を白に */
    background-color: #5a2d82 !important;  /* 背景を濃い紫に */
    border-color: #5a2d82 !important;      /* 枠線も濃い紫に */
}

/* オリジナルの紫色ボタンの設定 */
.btn-purple {
    background-color: #C7B2D6 !important; /* ヘッダーとお揃いの紫色 */
    border-color: #C7B2D6 !important;
    transition: background-color 0.2s ease; /* ホバー時の変化を滑らかに */
}

/* マウスを乗せたときに少し濃い紫色にする設定 */
.btn-purple:hover {
    background-color: #b59ec4 !important; 
    border-color: #b59ec4 !important;
}

/* :mag: ナビゲーションバーの検索ボックス：画面サイズに応じた幅の制御 */
.nav-search-form {
    width: 100%;
    /* :iphone: スマホ（画面幅が狭いとき）：ロゴや三本線とぶつからないようコンパクトに */
    max-width: 200px; 
    transition: max-width 0.2s ease; /* サイズ変化を滑らかにするアニメーション */
}

/* ➔ タブレットサイズ以上（画面幅 768px 以上）になったとき */
@media (min-width: 768px) {
    .nav-search-form {
        max-width: 300px;
    }
}

/* ➔ PCサイズ以上（画面幅 992px 以上）になったとき */
@media (min-width: 992px) {
    .nav-search-form {
        max-width: 400px;
    }
}

/* ==========================================
   :iphone: スマホ・タブレット用：3本線メニューのカスタム
   ========================================== */

/* 1. 3本線ボタン（トグラー）自体の枠線を濃い紫に */
.custom-navbar .navbar-toggler {
    border-color: #5a2d82 !important; 
    border-width: 2px !important;
    padding: 0.25rem 0.5rem;
}

/* 2. 三本線アイコンの色を濃い紫にする（SVGの色を濃い紫 #5a2d82 に変更して描画） */
.custom-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%235a2d82' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* 3. 3本線ボタンがクリックされた時の青いフォーカス影を、テーマカラーの極薄紫に */
.custom-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(90, 45, 130, 0.25) !important;
}

/* 4. メニューが開いた時（スマホ画面幅：991.98px以下）のスタイル調整 */
@media (max-width: 991.98px) {
	
	.custom-navbar .navbar-nav {
	        margin-top: 1.5rem !important; /* ここの数値（1.5remや2rem）でお好みの広さに調整できます */
	    }
	
    /* メニューの中の各項目を横幅いっぱいに広げる（中央寄せしつつ押しやすくする） */
    .custom-navbar .navbar-nav .nav-item {
        width: 100%;
        justify-content: center;
    }

    /* スマホで開いた時のボタンの幅を「画面幅の70%」にしてゆったりとした押しやすさに */
    .custom-navbar .btn-outline-dark {
        width: 70% !important;
        max-width: 280px; /* 画面が大きめのタブレットでも広がりすぎないストッパー */
        justify-content: center; /* 文字やアイコンを中央へ */
    }
}

/*入力テキストボックスの枠線*/
.form-control {
    border-color: #C7B2D6 !important; /* ヘッダーとお揃いの薄紫色 */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* 変化を滑らかに */
}

.img-hidden {
	max-height: 300px;
	overflow: hidden;
}

.container-m {
	margin-top: 80px;
}

.footer {
	position: fixed !important;
	bottom: 0 !important;
	width: 100% !important;
	background-color: #f8f9fa;
	text-align: center !important;
	justify-content: center;
	padding: 1rem;

}

/* サイト共通のメインボタン */
.btn-primary {
    background-color: #5a2d82 !important; /* 背景：濃い紫 */
    border-color: #5a2d82 !important;     /* 枠線：濃い紫 */
    color: #ffffff !important;            /* 文字：白 */
    font-weight: bold;
    transition: all 0.2s ease;            /* ホバー時の変化を滑らかに */
}

/* マウスを乗せた（ホバー）時のスタイル */
.btn-primary:hover {
    background-color: #723ba3 !important;  /* 背景を少し明るい紫にして反応を出す */
    border-color: #723ba3 !important;
    color: #ffffff !important;
}



table {
	border-collapse: collapse;
	margin-bottom: 20px;
}

th,
td {
	border: 1px solid #767676;
	padding: 4px 12px;
	text-align: left;
}

ul {
	list-style: none;
	/* 黒丸を消す */
}

/* :bulb: ナビゲーションバーのボタンの角丸はみ出し・にじみ防止対策 */
.custom-navbar .btn {
    overflow: hidden !important;             /* ① 内側の要素や余白のはみ出しを強制カット */
    background-clip: padding-box !important; /* ② 背景色が枠線の外側ににじみ出るのを防ぐ */
}