@charset "utf-8";

body {
    /* ページの全てのテキストに適用したいフォントファミリーを指定します。 */
    /* 複数のフォントを指定することで、ユーザーの環境に応じて表示できない場合の代替を用意できます。 */
    font-family: "Kosugi Maru", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

    padding-top: var(--header-height);
    /* フォントサイズなどもここで指定できます (任意) */
    /* font-size: 16px; */
    /* line-height: 1.6; */
}

/* ヘッダーの高さに合わせて設定します */
:root {
    --header-height: 200px;
    /* ヘッダーの高さに合わせて調整してください */
    --sidebar-width: 200px;
    /* サイドバーの幅 */
}

/* ------------------------------------------- */
/* サイドバーの基本設定 (広い画面用: md以上) */
/* ------------------------------------------- */
.sidebar {
    position: fixed;
    /* 画面に固定 */
    top: var(--header-height);
    /* ★ ヘッダーの下から開始 */
    bottom: 0;
    left: 0;
    z-index: 999;
    width: var(--sidebar-width);
    background-color: transparent;
    /* ★ 背景を透明に */
    border-right: none;
    /* ボーダーも削除（必要に応じて残す） */
    overflow-y: auto;
    padding-left: 10px;
    /* メニューの左パディング */
}

/* メインコンテンツエリアの調整 */
/* md以上の画面幅でのみ適用 */
@media (min-width: 768px) {
    #mainContent {
        margin-left: var(--sidebar-width);
        /* サイドバーの幅分、左にマージンを設定 */
    }
}

/* ------------------------------------------- */
/* 1. ハンバーガーメニューのアイコン色 指定 */
/* ------------------------------------------- */
/* ボタンが押されたときに表示される三本線のアイコンの色を制御 */
.navbar-toggler-icon {
    /* SVGの`filter`プロパティを使って色を黒に指定 */
    /* 黒のアイコンが見えない場合は、白など目立つ色に調整してください */
    filter: invert(0) grayscale(100%);
}

/* ------------------------------------------- */
/* メニュー項目のスタイル調整 (前回と同じ) */
/* ------------------------------------------- */
.sidebar .nav-link,
.offcanvas-body .nav-link {
    font-weight: 500;
    color: #333;
    padding: 0.75rem 1rem;
    display: inline-block;
    /* リンクの幅をテキストに合わせる */
}

.sidebar .nav-link.active,
.offcanvas-body .nav-link.active {
    color: #fff;
    background-color: #F8B551;
    border-radius: 5px;
}

.sidebar .nav-link:hover:not(.active),
.offcanvas-body .nav-link:hover:not(.active) {
    background-color: rgba(248, 181, 81, 0.1);
    /* ホバー時も透明感を残す */
}


/* 狭い画面では非表示 */
@media (max-width: 767.98px) {
    .sidebar {
        display: none !important;
    }
}

.navbar-toggler-icon {
    /* 💡 アイコンの色を #333333 に変更 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23333333' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ボタン自体を強調するために、ボタンの背景と枠線を設定 */
/* 現在 btn-outline-secondary なので枠線はありますが、目立たせるため調整 */
#hamburgerButton {
    color: #333;
    /* ボタンの背景を濃い色にする */
    border: 1px solid #ff7555;
    /* 枠線を白くする */
}

/* style.css などに追記 */
.content-wrapper {
    max-width: 750px;
}

/* 既存の CSS をベースに、position と z-index を追加・修正します */
.page-header-bg {
    /* ページの最上部全体に広がるように幅を100%に設定 */
    width: 100%;
    /* 適切な高さを設定 */
    height: 60px;
    /* ここは画像の高さに合わせてください */

    /* ★ 修正点: position を absolute に設定し、ヘッダーの上端に固定 */
    position: absolute;
    top: 0;
    left: 0;

    /* ★ ヘッダーコンテンツの下に隠れないように z-index を設定 */
    z-index: 1;

    /* 背景画像の設定はそのまま */
    background-image: url(../image/back-2.png);
    background-repeat: repeat-x;
    background-position: top center;
}

/* custom.css */

.pill-bg {
    /* 背景色を設定 */
    background-color: #f8b551;
    /* BootstrapのPrimaryカラーを例に */
    /* テキストの色を白に */
    color: #333;
    /* 上下のパディングで高さを出す */
    padding: 0.2rem 1.5rem;
    /* 左右のパディングでテキストの周りにスペースを作る */

    /* 両端を半円にする */
    border-radius: 9999px;
    /* 非常に大きな値で半円になるように */

    /* インライン要素のように振る舞いつつ、width/height/paddingを適用 */
    display: inline-block;

    /* テキストが中央揃えになるように (もし必要なら) */
    text-align: start;

    /* 必要に応じてフォントサイズを調整 */
    font-size: 1rem;
    /* h2の標準サイズに近い値を設定 */
    font-weight: bold;
    /* 太字 */
}

/* カスタムのピンク色（ホバー時）とグレー（通常時）を定義 */
.btn-outline-pink {
    /* --- 通常時の設定: グレー --- */
    --bs-btn-color: #6c757d;
    /* 文字色をグレーに変更 */
    --bs-btn-border-color: #ff7555;
    /* 枠線色をグレーに変更 */

    /* --- ホバー時・アクティブ時の設定: ピンク --- */
    --bs-btn-hover-color: #ffffff;
    /* ホバー時の文字色（白）*/
    --bs-btn-hover-bg: #ff7555;
    /* ホバー時の背景色（ピンク）*/
    --bs-btn-hover-border-color: #ff7555;
    /* ホバー時の枠線色（ピンク）*/
    --bs-btn-active-color: #ffffff;
    /* アクティブ時の文字色（白）*/
    --bs-btn-active-bg: #ff7555;
    /* アクティブ時の背景色（ピンク）*/
    --bs-btn-active-border-color: #ff7555;
    /* アクティブ時の枠線色（ピンク）*/
    --bs-btn-focus-shadow-rgb: 255, 105, 180;
    /* フォーカス時のシャドウ色（ピンクのRGB）*/
}

.btn-outline-pink i {
    color: #ff7555;
    /* アイコン要素自体をピンク色に指定 */
}

.btn-outline-pink:hover i {
    color: #fff;
    /* アイコン要素自体をピンク色に指定 */
}

.tight-row {
    --bs-gutter-x: 0;
    /* 横方向のガターを消す */
    justify-content: center;
    /* 中央寄せ */
}

/* バナーの高さを固定するためのカスタムCSS */
.banner-box {
    max-width: 600px;

    /* 背景色などは任意で設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

a:hover img {
    transform: scale(1.05);
    /* 5%拡大 */
    transition: transform 0.3s ease;
    /* 変化を滑らかにする */
}

/* ホバー時以外のデフォルトのスタイル */
a img {
    transform: scale(1);
    transition: transform 0.3s ease;
}

.kosugi-maru-regular {
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-style: normal;
}