:root {
    --mtg-midnight: #181a24;
    --mtg-grey-1: #85878f;
    --mtg-grey-2: #b9babd;
    --mtg-grey-3: #e8e8e8;
    --mtg-grey-4: #f5f5f6;
    --mtg-urbanblue: #004098;
    --mtg-blue-1: #3359cc;
    --mtg-blue-2: #7386e5;
    --mtg-blue-3: #b6c0f2;
    --mtg-blue-4: #edeefa;
    --mtg-skyblue: #01a0e8;
    --mtg-skyblue-1: #35bdfb;
    --mtg-skyblue-2: #8ddafd;
    --mtg-skyblue-3: #cde9f5;
    --mtg-skyblue-4: #e3f2f9;
    --mtg-live-red: #e6002d;
    --mtg-red-1: #e55c73;
    --mtg-red-2: #f291a1;
    --mtg-red-3: #f7c6ca;
    --mtg-red-4: #ffe5e6;
    --mtg-white: #ffffff;

    --mtg-line-color: #06c755;
    --mtg-line-1: #0dd962;
    --mtg-facebook-color: #3779ea;
    --mtg-facebook-1: #478bff;
    --mtg-twitter-color: #4ca0ec;
    --mtg-twitter-1: #52adff;

    /* font setting s=size, w=weight  */
    --mtg-h1-s: 26px;
    --mtg-h1-w: 700;
    --mtg-h2-s: 22px;
    --mtg-h2-w: 700;
    --mtg-h3-s: 18px;
    --mtg-h3-w: 500;
    --mtg-body-s: 14px;
    --mtg-body-w: 400;
    --mtg-body-strong-s: 14px;
    --mtg-body-strong-w: 500;
    --mtg-body-list-s: 14px;
    --mtg-body-list-w: 400;
    --mtg-caption-s: 12px;
    --mtg-caption-w: 400;
    --mtg-caption-strong-s: 12px;
    --mtg-caption-strong-w: 500;
    --mtg-button-s: 16px;
    --mtg-button-w: 700;
    --mtg-number-exlg-s: 44px;
    --mtg-number-exlg-w: 400;
    --mtg-number-lg-s: 32px;
    --mtg-number-lg-w: 400;
    --mtg-number-m-s: 24px;
    --mtg-number-m-w: 400;
    --mtg-number-body-s: 15px;
    --mtg-number-body-w: 400;
    --mtg-number-body-unit-s: 12px;
    --mtg-number-body-unit-w: 400;
    --mtg-number-caption-s: 13px;
    --mtg-number-caption-w: 400;
    --mtg-body-number-only-s: 14px;
    --mtg-body-number-only-w: 400;
    --mtg-caption-list-s: 12px;
    --mtg-caption-list-w: 400;
}

/* HTMLタグに対するデフォルトCSS定義 */
* {
  outline: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

p {
    font-family: "Noto Sans JP", sans-serif;
    color: var(--mtg-midnight);
    font-size: 14px;
    line-height: 1.57;
    letter-spacing: 0em;
    font-weight: 400;
    padding: 0;
    margin: 0;
}

::placeholder {
    color: var(--mtg-grey-2);
}

body {
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-size: var(--mtg-body-s);
    font-weight: var(--mtg-body-w);
    line-height: 157%;
    color: var(--mtg-midnight);
    margin: 0;
    background: var(--mtg-grey-4);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1 {
    font-family: "Noto Sans JP", sans-serif;
    color: var(--mtg-midnight);
    line-height: 1.57;
    font-size: var(--mtg-h1-s);
    font-weight: var(--mtg-h1-w);
    margin: 0;
}

h2 {
    font-size: var(--mtg-h2-s);
    font-weight: var(--mtg-h2-w);
    line-height: 1.57;
    margin: 0;
}

h3 {
    font-size: var(--mtg-h3-s);
    font-weight: var(--mtg-h3-w);
    line-height: 1.57;
    margin: 0;
}

h4 {
    font-weight: bold;
    font-size: 16px;
    line-height: 1.57;
    margin: 0;
}

a {
    font-family: "Noto Sans JP", sans-serif;
    color: var(--mtg-urbanblue);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.57;
    letter-spacing: 0em;
    font-weight: 400;
    text-decoration: none;
}

a:hover {
    text-decoration: underline solid #004098;
}

input {
    -webkit-appearance: none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]) {
    height: 56px;
    width: 100%;
    background: white;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 11px 16px;
    border: 1px solid var(--mtg-grey-3);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):focus {
    border: 1px solid var(--mtg-urbanblue);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):disabled {
    color: var(--mtg-grey-1);
    background-color: var(--mtg-grey-3);
    border: none;
    opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])::placeholder {
    color: var(--mtg-grey-2);
}

input::-ms-reveal {
    visibility: hidden;
}

textarea {
    height: 168px;
    width: 100%;
    background: white;
    box-sizing: border-box;
    border-radius: 8px;
    -webkit-appearance: none;
    padding: 11px 16px;
    border: 1px solid var(--mtg-grey-3);
}

textarea:focus {
    border: 1px solid var(--mtg-urbanblue);
}

textarea::-ms-reveal {
    visibility: hidden;
}

button,
input[type="button"],
input[type="submit"] {
    height: 56px;
    font-size: var(--mtg-button-s);
    font-weight: var(--mtg-button-w);
    border-radius: 8px;
    border: 0;
}

ul {
    margin: 0;
}

label {
    display: inline-block;
    font-size: var(--mtg-body-strong-s);
    font-weight: var(--mtg-body-strong-w);
    line-height: 22px;
    margin-bottom: 12px;
}