/* GlobalCSS */

/* WebFont「Noto Sans Japanese」の読み込み */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic&family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@500;700&display=swap');

/* カラーとフォントの定義 */
:root {
    /* テーマ */
    /* 帯の背景色 */
    --custom-theme-background: #bbbbbb;
    /* 帯の文字色 */
    --custom-theme-text: white;
    /* home.htmlのトップビューの背景画像 */
    --custom-theme-topview: url(../img/home/img_topview.png);
    /* テーマテキストホバーカラー */
    --custom-theme-hoverColor: rgb(58, 58, 204);

    /* その他利用しているカラー */
    --custom-red: #ff0000;
    --custom-green: #3e9f99;
    --custom-green-2: #73c29a;
    --custom-green-3: #29847e;
    --custom-blue: #d9e5ec;
    --custom-blue-2: #365187;
    --custom-blue-3: #0f285b;
    --custom-black: #000000;
    --custom-gray-2: #333333;
    --custom-gray-3: #cccccc;
    --custom-gray-4: #464646;
    --custom-gray-5: #b1b1b1;
    --custom-gray-6: rgba(0, 0, 0, 0.3);
    --custom-gray-7: rgba(0, 0, 0, 0.05);
    --custom-gray-8: #bbbbbb;
    --custom-gray-9: rgba(51, 51, 51, 0.25);
    --custom-gray-10: #4d4d4d;
    --custom-gray-11: #f1f1f1;
    --custom-gray-12: #9e9e9e;
    --custom-gray-13: #ececec;
    --custom-white: #ffffff;
    --custom-white-2: rgba(255, 255, 255, 0.9);

    /* 影 */
    --custom-box-shadow: 3px 3px 5px 0 var(--custom-gray-6);
    --custom-box-shadow2: 3px 3px 5px 0 var(--custom-gray-7);

    /* width */
    --custom-width: 1280px;
    --custom-width2: 1080px;
    --custom-width3: 90%;
    --custom-width4: 768px;
    --custom-width5: 846px;

    /* headerの高さ */
    --custom-header-height_pc: 192px;
    --custom-header-height_sp: 80px;

    /* z-index */
    --custom-z-index-30: 30;
    --custom-z-index-40: 40;
    --custom-z-index-50: 50;
    --custom-z-index-60: 60;
    --custom-z-index-70: 70;
    --custom-z-index-80: 80;
    --custom-z-index-90: 90;
}

* {
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
    margin: 0;
    font-size: 16px;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
div,
span {
    font-size: 16px;
    margin: 0;
    text-decoration: none;
    font-weight: 500;
    list-style: none;
    color: var(--custom-gray-2);
}

main {
    padding-top: var(--custom-header-height_pc);
}

@media screen and (max-width:1280px) {
    main {
        padding-top: var(--custom-header-height_sp);
    }
}