:root{
    --mainColor:#39B8EF;
}


header #midashi{
    width: calc(1.5 * 100% / 3); /* 幅を親要素の1/3に設定 */
    float:left; /* 左に浮かせる */
    padding:10px; /* 内側の余白を10pxに設定 */
    height: 130px;
    display: flex; /* フレックスボックスレイアウトを適用 */
    align-items: center; /* 子要素を垂直方向の中央に配置 */
    justify-content: center; /* 子要素を水平方向の中央に配置 */
}

header #midashi h1{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
}

main{
    padding:20px;
    background:white;
}

main h3{
    font-weight: bold;
    font-size:1.5em;
    color:var(--mainColor);
    margin-bottom:1em;
}

main h3:before{
    content: "\25A1";
    margin-right:0.25em;
}

main p{
    font-size:16px;
    line-height:22px;
    margin-bottom:1em;
}

main table{
    margin-bottom:1em;
}

main .normal_table {
    width: 100%;
    border-collapse: collapse;
	font-size:13px;
}

main .normal_table th,
main .normal_table td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: left;
}

main .normal_table th {
	background-color: #E5E5E5;
}

main .normal_table tr:nth-child(even) {

}

ul {
    list-style-type: disc; /* ディスク型の箇条書きマークを使用 */
    margin:1em 0 1em 2em;
}

ul li {
    font-size: 16px; /* フォントサイズを16pxに設定 */
    line-height: 1.5; /* 行間を1.5に設定 */
    margin-bottom: 10px; /* リストアイテム間のマージンを10pxに設定 */
}

/*通常、スマホだけ表示*/
.dt{
    display: none;
}
.sp{
    display: block;
}

.center{
	text-align:center;
}

strong{
	font-size:bold;
}

.spacer {
    height: 1em; /* 余白の高さを1emに設定 */
}

.hover_effect {
    cursor: pointer;/* カーソルをポインターに変更 */
    transition: transform 0.3s ease-in-out; /* ホバーエフェクトのアニメーションを設定 */
}

.hover_effect:hover {
    transform: scale(1.1); /* ホバー時に要素を1.1倍に拡大 */
}

/*クリッカブルマップのeffectここまで*/

/*600px以上の場合、デスクトップだけ表示*/
@media (min-width: 600px) {

    .dt{
        display: block;
    }
    .sp{
        display: none;
    }

}
/* メディアクエリ（ウィンドウの横幅が800px以下の場合のスタイル） */
@media (max-width: 800px) {

    header #midashi{
        width: 100%;
        height:auto;
    }

}