:root {
    --min-layout-width: 393px; /* SPのデザインカンプの横幅 */
    --min-fluid-ratio: calc(1 / var(--min-layout-width) * 100dvi);
    --main-color:#5CB431;
    --base-color:#FFFFFF;
    --color-red:#D5474F;
    --color-yellow:#FFD600;/* thanksicon */
    --color-light-yellow:#FFF690;
    --color-blue:#225DA7;
    --color-light-blue:#D1E6FF;
    --color-gray:#848484;
    --color-light-gray: #ddd;
    --color-font-gray: #989696;
    --border: #c1c1c1;
    --font-color:#000000;
    --bg-color: #D1E6FF;
    --font-family-marugo: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","M PLUS Rounded 1c", sans-serif;
    --font-weight-w4: 400;
    --font-weight-w5: 500;
    --font-weight-w6: 600;
    --base-font-size: 16;
    --rem-ratio: calc(1rem / var(--base-font-size));
    --letter-spacing: 0.2em;
    --drop-shadow-form: drop-shadow(0 4px 4px rgba(0 0 0 / 0.25));
    --drop-shadow-cart: drop-shadow(0 1px 4px rgba(0 0 0 / 0.25));
    --drop-shadow-uniform: drop-shadow(0 2px 2px rgba(0 0 0 / 0.25));

}

img {
    width: 100%;
    height: auto;
    display: block;
}

.Fz12 {
    font-size: 12px;
}

.SP_Only {
    display: none;
}

@media (max-width: 640px) {
    .SP_Only {
        display: block;
    }
}

.PC_Only {
    display: block;
}

@media (max-width: 640px) {
    .PC_Only {
        display: none;
    }
}

.Bg_Green {
    background-color: var(--main-color) !important;
}

.Bg_Gray {
    background-color: var(--color-gray) !important;
}

.Bg_Red {
    background-color: var(--color-red) !important;
}

.Bg_Blue {
    background-color: var(--color-blue);
}

.Color_Green {
    color: var(--main-color);
}

.Color_Red {
    color: var(--color-red);
}

.Color_Gray {
    color: var(--color-gray);
}
.Color_White {
    color: var(--base-color);
}

body {
    width: 100%;
    min-block-size: 100svb;
    font-family: var(--font-family-marugo);
    font-size: calc(16 * var(--rem-ratio));
    color: var(--font-color);
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 640px) {
    body {
        /* background-color: #f0f8ff; */
        /* background: linear-gradient(-45deg, #f9c2eb, #a8c2ee, #c2f9d0, #ffdea5) fixed; */
        background: linear-gradient(-45deg, #E8CBC0, #bfc9f4, #baeef6, #C4E0E5) fixed;
        background-size: 800% 800%;
        animation: GradietionAnimation 9s ease infinite;
        /* background-image: url(../images/common/bg3.jpg); */
    }
}

@keyframes GradietionAnimation { 
    0% {
        background-position:0% 50%
    }
    50% {
        background-position:100% 50%
    }
    100% {
        background-position:0% 50%
    }
}

.Main {
    background-color: var(--base-color);
}

@media (min-width: 640px) {
    .Main {
        /* background-color: var(--base-color); */
        max-width: 393px;
        margin-inline: auto;
    }
}

/* ヘッダー */
.Header {
    position: fixed;
    display: grid;
    place-items: center;
    background: var(--main-color);
    width: 100%;
    height: 70px;
    z-index: 100;
}

.Header_Headline {
    color: var(--base-color);
    font-size: calc(24 * var(--rem-ratio));
    font-weight: var(--font-weight-w6);
}

.Contents_Inner {
    /* padding-inline: calc(30 * var(--min-fluid-ratio)); */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* アンダーライン入りの見出し */
.UnderLine_Headline {
    display: grid;
    place-items: center;
    gap: 14px;
    font-size: calc(18 * var(--rem-ratio));
    font-weight: var(--font-weight-w6);
}

.UnderLine_Headline::after {
    display: block;
    content: "";
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--font-color);
}

/* コンテンツ一番下のロゴ */
.Logo {
    width: 200px;
    aspect-ratio: 4 / 1;
    /* object-fit: cover; */
    margin-inline: auto;
}

/* ボタン */
.Gray_Btn {
    width: 100%;
    display: grid;
    place-items: center;
    background-color: var(--color-light-gray);
    border-radius: 100vh;
    padding: 9px;
}

.Color_Btn {
    width: 100%;
    display: grid;
    place-items: center;
    color: var(--base-color);
    border-radius: 100vh;
    font-size: calc(16 * var(--rem-ratio));
    font-weight: var(--font-weight-w4);
    padding: 9px;
}

/* フッター */
.Footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: var(--base-color);
}

@media (min-width: 640px) {
    .Footer {
        filter: drop-shadow(0 -2px 1px rgba(0 0 0 / 0.25));
    }
}


.Nav__List {
    display: flex;
    align-items: center;
    justify-content: space-between;
    filter: drop-shadow(0 -2px 1px rgba(0 0 0 / 0.25));
    background-color: var(--base-color);
    font-size: calc(10 * var(--rem-ratio));
    padding: 12px 40px;
}

@media (min-width: 640px) {
    .Nav__List {
        max-width: var(--min-layout-width);
        margin-inline: auto;
        filter: none;
    }
}

.Nav__Link {
    display: grid;
    place-items: center;
    gap: 3px;
    position: relative;
}

.Icon-Badge::after {
    min-width: 20px;
    content: "";
    position: absolute;
    top: -5px;
    right: -8px;
    color: var(--font-color);
    font-weight: var(--font-weight-w6);
    font-size: calc(12 * var(--rem-ratio));
}

.Nav__Icon {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 40px;
    height: 40px;
}

/* フッター上部の金額合計と内自己負担のエリア */
.Price_Area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 23px;
    background-color: var(--main-color);
    padding: 9px 0;
}

.Price_Area dl {
    display: flex;
    gap: 23px;
    font-weight: var(--font-weight-w6);
    color: var(--base-color);
}