@charset "utf-8";
/*このスタイルシートはPrivacyP.html用 */
body {
    margin: 0px;
    color: #151515;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    background-color: #EFF5F8;
}
#wrapper {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
}
#top {
    overflow: hidden;
}
#hero img {
    max-width: 100%;
}
h1, h2 {
    color: #3399CC;
    font-style: normal;
    font-weight: 600;
    font-family: source-sans-pro;
}
h1 {
    /*font-size: 30px;*/
    /* clamp(最小値, 推奨値, 最大値) */
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    text-transform: uppercase;
}
h2 {
    margin-top: 0.5em;
    font-size: 1.2rem;
}
#main100 {
    width: 96%;
    margin-left: 2%;
    float: left;
}
#main {
    width: 58%;
    margin-left: 2%;
    float: left;
}
#sidebar {
    width: 34%;
    margin-left: 4%;
    float: left;
}
figure {
    display: block;
    width: 420px;
}
figure img {
    padding: 10px;
    -webkit-box-shadow: 1px 1px 15px #999999;
    box-shadow: 1px 1px 15px #999999;
}
figcaption {
    font-size: 0.875em;
    font-weight: bold;
    text-align: center;
    display: block;
    margin-top: 0.5em;
}
footer {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2%;
    background-color: #43a6cb; /*#43a6cb*/
    color: #FFFFFF;
    clear: left;
}
a {
    font-weight: bold;
    text-decoration: none;
}
a:link {
    color: #FF6600;
}
a:visited {
    color: #FF944C;
}
a:hover, a:active, a:focus {
    color: #7F3300;
    text-decoration: underline;
}
/*メニューボタン*/
.section {
    margin-bottom: 2.4em;
    background-color: #43a6cb; /*#eceff1*/
}
/*AI様より260118 ここから*/
.button-container {
    display: flex;
    /*justify-content: space-between;  両端に寄せて、間を均等にする場合 */
    justify-content: space-around; /* ボタンの左右に均等な余白を作る場合 */
    background-color: #FFFFFF;
}
.btn {
    display: inline-block; /* Flexアイテムになっても幅の自動調節は有効です */
    padding: 0; /* 親の余白をなくす */ /*10px 20px*/
    background-color: #eceff1;
}
.btn a {
    display: block; /* 枠いっぱいに広げる */
    padding: 10px 20px; /* aタグの中に余白を作る */
    text-decoration: none;
    /* clamp(最小値, 推奨値, 最大値) */
    font-size: clamp(0.5rem, 1.3vw, 3rem);
}
/* マウスが重なった時 */
.btn:hover {
    background-color: #cfd8dc; /* 少し暗くする */
    cursor: pointer; /* カーソルを指の形にする */
}
/* クリックした瞬間 */
.btn:active {
    background-color: #b0bec5; /* さらに暗くする */
    transform: translateY(2px); /* 少し下に沈ませる演出 */
}
/* リンク自体の色や下線を消す設定（推奨） */
.btn a {
    text-decoration: none;
    color: #333;
    display: block; /* ボタン全体をクリック可能にする */
    padding: 10px 20px; /* aタグの中に余白を作る */
}
/* --- 現在のページのボタンだけ見た目を変える --- */
.btn.current {
    background-color: #FF9800; /* オレンジ色など、目立つ色に変更 */
}
.btn.current a {
    color: #fff; /* 文字色を白にして読みやすくする */
    font-weight: bold; /* 太字にする */
    pointer-events: none; /* 現在のページなのでクリックできないようにする（任意） */
}
/* カレントボタンにマウスが乗った時も色を維持したい場合 */
.btn.current:hover {
    background-color: #FB8C00; /* 少しだけ色を変えるか、そのままにする */
    cursor: default; /* カーソルを指の形にしない */
}
/*AI様より260118 ここまで*/
#hero article {
    width: 36%;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    top: 25px;
    right: 33px;
    background-color: #EA724F;
    border-radius: 21px;
    color: #FFFFFF;
}
#hero h2 {
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: -8px;
}
#hero {
    position: relative;
}
/*タッチ操作がメインのスマホ/タブレット用*/
/*【重要】screen and　が必要*/
@media screen and (hover: none) and (pointer: coarse) {
    #wrapper {
        width: 100%;
        /*min-width: 0;もし最初の定義でこれに数字をいれるのならここでゼロクリアする必要がある*/
    }
    #top {
        background-color: #EFF5F8; /*#3399CC*/
        width: 100%; /* 横幅いっぱいに広がるようにする */
    }
    h1 {
        color: #3399CC; /*#EFF5F8*/
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
        text-transform: uppercase;
    }
    /*AI様より260119a スマホではボタンを縦並びにする*/
    .button-container {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center; /* 中央寄せにする場合 */
        padding: 10px 0;
        background-color: #3399CC;
    }
    .btn {
        width: 80%; /* ボタンの幅を画面いっぱいに広げる（お好みで） */
        margin-bottom: 10px; /* ボタン同士の上下に隙間を作る */
        text-align: center; /* 文字を中央に */
    }
    .btn a {
        /* clamp(最小値, 推奨値, 最大値) */
        /*font-size: clamp(0.5rem, 5vw, 5rem);*/
        font-size: clamp(1.5rem, 1.5vw, 2.5rem);
    }
    .btn:last-child {
        margin-bottom: 0; /* 最後のボタン下の余白は消す */
    }
}