@charset "utf-8";

/* 本文のサイズ + 0.5vw(vwはビューポート幅を100%とした時の数値) */
:root {
    /* 掛け率 */
    --ratio: 1.5;
    /* 0.2962 / 1.5 = 0.19753...rem */
    --s-4: calc(var(--s-3) / var(--ratio));
    /* 0.44 / 1.5 = 0.2962...rem */
    --s-3: calc(var(--s-2) / var(--ratio));
    /* 0.66 / 1.5 = 0.44...rem */
    --s-2: calc(var(--s-1) / var(--ratio));
    /* 1 / 1.5 = 0.66...rem */
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    /* 1 * 1.5 = 1.5rem */
    --s1: calc(var(--s0) * var(--ratio));
    /* 1.5 * 1.5 = 2.25rem */
    --s2: calc(var(--s1) * var(--ratio));
    /* 2.25 * 1.5 = 3.375rem */
    --s3: calc(var(--s2) * var(--ratio));
    /* 3.375 * 1.5 = 5.0625rem */
    --s4: calc(var(--s3) * var(--ratio));
    /* 5.0625 * 1.5 = 7.59375rem */
    --s5: calc(var(--s4) * var(--ratio));

    /* 基本的なカラム幅を設定 */
    /* chは当該フォントの0の幅を1chとする単位 */
    --mesure: 60ch;

    /* ボーダー幅の設定 */
    /* remはroot要素のフォントサイズを1remとする単位 */
    --border-thin: 0.125rem;
    --border-normal: 0.25rem;
    --border-fat: 0.5rem;

    /* 色の指定 */
    --color-base: #cccccc;
    --color-main: #0076A9;
    --color-accent: #004EA2;
    --color-background: #23e0a1;

    --color-label: #2f5597;
    --color-label-font: white;

    --color-font: #222222;
    --color-link: #ffffff;

    --color-button-background-color: #10a88e;
    --color-button-font-color: #ffffff;

    --color-header-nav-border: #000000;

    --color-mobile-menu-background: #4e483ae6;

    /* font-sizeをremで指定するための変数 */
    /* 1rem=16pxとしたときの換算をしている */
    --10px: 0.625rem;

    --11px: 0.6785rem;
    --12px: 0.75rem;
    --13px: 0.8125rem;
    --14px: 0.875rem;
    --15px: 0.9375rem;
    --16px: 1rem;
    --17px: 1.0625rem;
    --18px: 1.125rem;
    --19px: 1.1875rem;
    --20px: 1.25rem;

    --21px: 1.3125rem;
    --22px: 1.375rem;
    --23px: 1.4375rem;
    --24px: 1.5rem;
    --25px: 1.5625rem;
    --26px: 1.625rem;
    --27px: 1.6875rem;
    --28px: 1.75rem;
    --29px: 1.8125rem;
    --30px: 1.875rem;

    --31px: 1.9375rem;
    --32px: 2rem;
    --33px: 2.0625rem;
    --34px: 2.125rem;
    --35px: 2.1875rem;
    --36px: 2.25rem;
    --37px: 2.3125rem;
    --38px: 2.375rem;
    --39px: 2.4375rem;
    --40px: 2.5rem;

    --41px: 2.5625rem;
    --42px: 2.625rem;
    --43px: 2.6875rem;
    --44px: 2.75rem;
    --45px: 2.8125rem;
    --46px: 2.875rem;
    --47px: 2.9375rem;
    --48px: 3rem;
    --49px: 3.00625rem;

    --50px: 3.125rem;
}

/* 全ての要素の計算をborder-boxに変更する */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

/* iosのフォーム要素の設定を削除 */
input,
button,
textarea,
select {
    -webkit-appearance: none;
    appearance: none;
}

/* スマホ横向き時のフォントサイズを制限 */
/* 通常だと勝手に拡大される可能性がある */
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* img要素の設定 */
/* max-widthを100%にしておくことで、ボックス範囲からはみ出さないようになる */
/* heightは横幅に合わせて縦幅を調整するようにするために設定 */
/* displayをblockに設定することでimgの下に隙間が入ることを回避 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 全称指定子で全ての要素にカラム幅を設定 */
/* * {
    max-width: var(--mesure);
} */

/* ブロックになるタグは例外として設定を解除  */
html,
body,
div,
header,
nav,
main,
footer {
    max-width: none;
}

/* リンクのアンダーバーを削除(色は一旦そのまま) */
a {
    color: #0000ff;
    text-decoration: none;
}

/* list要素のマーカーを削除 */
li {
    list-style-type: none;
}