html, body {
    font-family: "Open Sans", sans-serif;
    margin:0;

}




/* 文字 */
h1 {
    
    font-family: "KoHo", sans-serif;
    font-weight: 700;
    font-style: normal;
}

a {
    text-decoration: none; /* 全てのリンクの下線を消す */
}
a:active { color: #007bff }




/* 要素のフェードイン */
.fade-in {
    opacity: 0; /* 最初は見えない */
    transform: translateY(30px); /* 下に少しズレている */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.show {
    opacity: 1; /* 透明度を100%に */
    transform: translateY(0); /* 位置を元に戻す */
}

/* タイトル下ボーダー */
.line-with-dots {
    text-align: center; /* Center the content horizontally */
    margin-bottom:100px;
  }
  .dots {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 50%;
    vertical-align: middle; /* Aligns with the middle of the line */     
  }
  .line {
    display: inline-block;
    width: 200px;
    height: 2px;
    background-color: black;
    vertical-align: middle; /* Ensures alignment with the dots */
  }






/* パンくずリスト用 */

/* パンくずリスト全体のスタイル */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* 各パンくず項目のスタイル */
.breadcrumb-item {
    display: inline-flex; /* テキストとアイコンを横並びに */
    align-items: center;
    position: relative; /* サブメニューの位置調整用 */
}

/* リンクのスタイル */
.breadcrumb-item a {
    text-decoration: none; /* デフォルトの下線を削除 */
    color: #007bff; /* リンクカラー */
    padding: 0 4px; /* 見やすいスペースを追加 */
    border-bottom: 1px solid transparent; /* カスタムの下線を設定 */
}

/* ホバー時のリンク */
.breadcrumb-item a:hover {
    text-decoration: none; /* 通常の下線を表示しない */
    border-bottom-color: #0056b3; /* カスタム下線にホバーカラーを追加 */
    color: #0056b3; /* ホバー時のテキストカラー */
}

/* 区切り記号（ > ）のスタイル */
.breadcrumb-item span {
    margin: 0 5px;
    color: #6c757d; /* 区切り記号の色を薄く */
}

/* 最初の「HOME」特有のスタイル */
.breadcrumb-item:first-child a {
    margin-left: 0; /* 余分なスペースを取り除く */
    padding-left: 0; /* 左余白を削除 */
}

/* アクティブなページ（現在のページ）のスタイル */
.breadcrumb-item.active a {
    color: #495057; /* 非リンクとして目立たせる */
    text-decoration: none; /* 下線なし */
    cursor: default; /* ポインターを非アクティブ表示 */
    border-bottom: none; /* カスタム下線も削除 */
}

/* 親要素に合わせるための追加スタイル */
nav[aria-label="breadcrumb"] {
    width: 100%;
    background-color: #dbdbdb; /* 必要に応じて背景色の設定 */
    padding: 10px; /* パディングの設定 */
    box-sizing: border-box; /* ボックスサイズの調整 */
    box-shadow: none !important; 
    margin-bottom: 50px;
}

/* サブメニューのスタイル */
.breadcrumb-item .submenu {
    display: none;
    position: absolute;
    left: -50%;
    top: 100%; /* 親要素の下に配置 */
    background-color: #ffffff;
    padding: 10px;
    border: 2px solid #007bff;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    list-style: none;
    font-size: 0.8rem;
}

/* 親要素かサブメニューにホバーしたら表示を維持 */
.breadcrumb-item.has-submenu:hover > .submenu {
    display: block;
}

.submenu li {
    padding: 3px 10px;
    position: relative; /* 子サブメニューの位置調整用 */
}

.submenu li a {
    text-decoration: none;
    color: #007bff;
}

/* 子サブメニューのスタイル */
.submenu .submenu {
    left: 20%; /* 親サブメニューの右側に表示 */
    top: 70%;
    margin-left: 5px; /* 親サブメニューとの間隔 */
    display: none; /* 初期状態では非表示 */
}

/* 子サブメニューをホバーで表示 */
.submenu li.has-submenu:hover > .submenu {
    display: block;
}




/* コンテナ（モバイル用） */
.container {
    display: flex;
    flex-direction: column; /* モバイルは縦並び */
    min-height: 100vh;
}

/* ナビゲーション（モバイル用） */
nav {
    width: 100%; /* モバイルは全幅 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    padding: 10px 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* モバイル用の影 */
    z-index: 1; /* navをmainより前面に表示 */
}

/* ナビゲーション内のリスト（モバイル用） */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row; /* モバイルは横並び */
    gap: 20px;
}

/* リンク */
nav ul li a {
    text-decoration: none;
    color: #333;
}

/* メインコンテンツ */
main {
    flex: 1;
    padding: 20px;
    background-color: pink;
    position: relative; /* mainをnavの影にかかるようにする */

}

/* 項目バー */
.subject-bar {
    border-left: 5px solid gray;
    width:95%;
    padding: 0.5rem;
    background-color: #FF1493;
    font-family: "Victor Mono", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:white;
    margin-top:10px;

}
  

/* TOPに戻るボタン*/
.circle {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    border: 1.5px solid rgb(71, 71, 71);
    margin-top:100px;
}
.arrow-icon {
    font-size: 2rem;
}













/* デスクトップ用スタイル */
@media screen and (min-width: 769px) {
    .container {
        display: flex;
        flex-direction: row; /* デスクトップは横並び */
        min-height: 100vh; /* ビューポート全体の高さ */
    }

    .fixed-nav {
        width: 20%; /* デスクトップは幅20% */
        height: 100vh; /* ビューポート全体の高さ */
        position: fixed; /* 固定位置にする */
        left: 0; /* 左に固定 */
        top: 0; /* 上端に固定 */
        background-color: #f4f4f4; /* 背景色 */
        box-shadow: 10px 0 20px rgba(0, 0, 0, 0.1); /* デスクトップ用の影 */
        z-index: 1000; /* 最前面に表示 */
    }

    .fixed-nav ul {
        flex-direction: column; /* デスクトップは縦並び */
        gap: 50px;
        padding: 20px; /* パディングを追加 */
    }

    main {
        margin-left: 20%; /* navの幅分だけ左にマージンを追加 */
        padding: 20px;
        background-color: pink;

    }

    .breadcrumb-nav {
        margin-left: 20%; /* メニューが固定されている場合の調整 */
    }

    /* 項目バー */
.subject-bar {
    width:60%;
    margin-top:10px;
}
    h1 { margin:0;
     padding:0;}
.centered {
  margin-left: 37.5%;
  transform: translateX(-50%);
  position: relative;
  display: inline-block;
}
   
 }


}