@charset "utf-8";
/* CSS Document */

/* CSSファイル内でのスタイルシートの記述 */
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

body {
    font-family: 'Kosugi Maru', sans-serif;
}


/* 全ての要素に対する共通のスタイル */
*{
    box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
}

a {
    color: blue; /* 通常のリンクを青色に設定 */
    text-decoration: none; /* 下線を削除 */
}

a:visited {
    color: purple; /* 訪問済みのリンクを紫色に設定 */
}

a:hover {
    color: red; /* ホバー時のリンクを赤色に設定 */
}

a:active {
    color: green; /* アクティブなリンクを緑色に設定 */
}



/* 画像に対する共通のスタイル */
img{
    max-width: 100%; /* 画像の最大幅を親要素の100%に設定 */
    height: auto; /* 高さは自動的に調整 */
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* メインのラッパー要素 */
#wrapper {
    position: relative; /* 子要素の絶対位置指定の基準点になる */
    width: 100%; /* 幅を親要素の100%に設定 */
    max-width:1050px; /* 最大幅を1050pxに設定 */
    padding:20px; /* 内側の余白を20pxに設定 */
    margin: 0 auto; /* 上下の余白を0、左右の余白を自動に設定（中央寄せ） */
}

/* ヘッダー要素 */
header{
    width:100%; /* 幅を親要素の100%に設定 */
    overflow:auto; /* 内部の要素がはみ出した場合、スクロールバーを表示 */
}

/* ロゴとキャラクターのスタイル */
header #logo,header #character{
    width: calc(100% / 3); /* 幅を親要素の1/3に設定 */
    float:left; /* 左に浮かせる */
    padding:10px; /* 内側の余白を10pxに設定 */
}

/* ロゴ画像のスタイル */
header #logo img{
    max-height:100px; /* 最大高さを100pxに設定 */
    width:auto; /* 幅は自動的に調整 */
}

/* キャラクター画像のスタイル */
header #character img{
    max-height:225px; /* 最大高さを225pxに設定 */
    width:auto; /* 幅は自動的に調整 */
}

/* トップメニューのスタイル */
header #topMenu{
    width:100%; /* 幅を親要素の100%に設定 */
}

/* トップメニューのリストのスタイル */
header #topMenu ul {
    display: flex; /* フレックスボックスを使用 */
    flex-wrap: wrap; /* 必要に応じて折り返す */
    width: 100%; /* 幅を親要素の100%に設定 */
}

/* トップメニューのリストアイテムのスタイル */
header #topMenu li {
    list-style: none; /* リストマーカーを非表示に設定 */
    flex: 0 0 50%; /* 幅を親要素の50%に設定し、伸縮しないようにする */
    padding: 0.5em; /* 内側の余白を0.5emに設定 */
    text-align: center; /* テキストを中央寄せに設定 */
}

/* トップメニューの画像のスタイル */
header #topMenu li img {
    width: 90%; /* 幅を親要素の90%に設定 */
    height: auto; /* 高さは自動的に調整 */
}

/* 画像に対する初期スタイル設定 */
header #topMenu ul li a img {
    transition: opacity 0.3s ease, transform 0.3s ease; /* 透明度と変形の変化にトランジションを適用 */
}

/* ホバー時のスタイル設定 */
header #topMenu ul li a:hover img {
    opacity: 0.7; /* 透明度を0.7に設定 */
    transform: scale(1.05); /* 画像を10%拡大 */
}

/* お知らせのスタイル */
.oshirase{
	overflow:auto;
}
main .oshirase, main .oshirase_hand{
    width:80%; /* 幅を親要素の80%に設定 */
    margin: 20px auto 20px auto; /* 上下の余白を20px、左右の余白を自動に設定（中央寄せ） */
    padding:20px; /* 内側の余白を20pxに設定 */
    background: #fff; /* 背景色を白に設定 */
    border-radius: 10px; /* ボーダーの角を丸くする */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* ボックスシャドウを設定 */
}

/* お知らせの見出しのスタイル */
main .oshirase h2{
    font-weight: bold; /* フォントを太字に設定 */
    text-align: center; /* テキストを中央寄せに設定 */
    font-size:20px; /* フォントサイズを20pxに設定 */
    margin-bottom:1em; /* 下の余白を1emに設定 */
}

/* お知らせの段落のスタイル */
main .oshirase p{
    margin-bottom:1em; /* 下の余白を1emに設定 */
}

/* お知らせのスクロールボックスのスタイル */
main .oshirase .scrollbox{
    overflow: auto; /* 内部の要素がはみ出した場合、スクロールバーを表示 */
    padding: 0 10px; /* 左右の内側の余白を10pxに設定 */
    height:7em; /* 高さを7emに設定 */
}

/* ボタンのスタイル */
main #buttons {
    width: 80%; /* 幅を親要素の80%に設定 */
    margin: 20px auto 0px auto; /* 上の余白を20px、下の余白を0、左右の余白を自動に設定（中央寄せ） */
}

/* ボタンのリストのスタイル */
main #buttons ul {
    display: flex; /* フレックスボックスを使用 */
    justify-content: space-between; /* 要素間の余白を均等に分配 */
    flex-wrap: wrap; /* 必要に応じて折り返す */
}

/* ボタンのリストアイテムのスタイル */
main #buttons ul li {
    flex: 1 0 10em; /* 初期幅を10emに設定し、伸縮しないようにする */
    margin: 0.5em; /* 余白を設定 */
}

/* ボタンのリンクのスタイル */
main #buttons ul li a {
    display: flex; /* フレックスボックスを使用 */
    align-items: center; /* 縦方向の中央に配置 */
    justify-content: center; /* 横方向の中央に配置 */
    width: 100%; /* 親要素（ここではli）の幅に合わせる */
    height: 50px; /* 高さを統一 */
    padding: 2em 1em 2em 1em; /* 内側の余白を設定 */
    background: black; /* 背景色を黒に設定 */
    text-decoration: none; /* テキストの下線をなしに設定 */
    color: white; /* テキスト色を白に設定 */
    text-align: center; /* テキストを中央寄せに設定 */
    transition: background 0.3s ease, transform 0.3s ease; /* 背景色と変形の変化にトランジションを適用 */
}

/* ホバー時のスタイル */
main #buttons ul li a:hover {
    background: gray; /* 背景色を灰色に設定 */
    transform: scale(1.05); /* リンクを10%拡大 */
}

/* フッターのスタイル */
footer{
    margin-top:1em; /* 上の余白を1emに設定 */
    text-align: center; /* テキストを中央寄せに設定 */
}

footer p br{
    display:none;
}

/* パンくずリストのスタイル */
.pankuzu ul {
    list-style-type: none; /* リストマーカーを非表示にする */
    padding: 0; /* パディングをリセットする */
    margin: 0 0 1em 0; /* マージンをリセットする */
    display: flex; /* フレックスボックスを使用してリストアイテムを横並びにする */
    flex-wrap: wrap; /* スマートフォンなどの小さい画面でリストアイテムが折り返されるようにする */
}

.pankuzu li {
    margin-right: 10px; /* リストアイテムの間にマージンを設定する */
}

.pankuzu li::after {
    content: ">"; /* リストアイテムの後に ">" を挿入する */
    margin-left: 10px; /* ">" の左にマージンを設定する */
}

.pankuzu li:last-child::after {
    content: ""; /* 最後のリストアイテムの後には ">" を挿入しない */
}

.pankuzu a {
    text-decoration: none; /* リンクの下線を非表示にする */
    color: #000; /* リンクの文字色を黒にする */
}

.pankuzu a:hover {
    color: #888; /* マウスオーバー時のリンクの文字色を灰色にする */
}

/* メディアクエリ（ウィンドウの横幅が800px以下の場合のスタイル） */
@media (max-width: 800px) {
    header #topMenu li {
        flex: 0 0 100%; /* 幅を親要素の100%に設定し、伸縮しないようにする */
    }
    main #buttons ul li {
        flex: 1 0 100%; /* 初期幅を親要素の100%に設定し、伸縮しないようにする */
        margin: 0; /* 余白をなしに設定 */
    }
    main #buttons ul li a {
        margin-bottom: 0.5em; /* 縦方向の余白をより小さく調整 */
    }
    main #buttons ul li a br{
        display: none; /* 改行を非表示に設定 */
    }
    header #logo,header #character{
        width: calc(100% / 2); /* 幅を親要素の1/2に設定 */
        padding:20px; /* 内側の余白を20pxに設定 */
    }

}

/* メディアクエリ（ウィンドウの横幅が450px以下の場合のスタイル） */
@media (max-width: 450px) {
    header #logo,header #character{
        text-align: center; /* テキストを中央寄せに設定 */
        float:none; /* 浮きを解除 */
        width: calc(100% / 1); /* 幅を親要素の100%に設定 */
        padding:20px; /* 内側の余白を20pxに設定 */
    }
    header #character img{
        max-height:250px; /* 最大高さを250pxに設定 */
    }
    main .oshirase h2{
        font-size:18px; /* フォントサイズを18pxに設定 */
    }
}