/* @media screen and (min-width: 960px) { */
:root {
    --text-font: 'Yomogi', cursive;
    --text-font-size: 25px;
    --title-font-size: 25px;
    --card-title-font-size: 20px;
    --card-content-font-size: 30px;
    --header-height: 100px;
}

body {
    background-color: #eeddee;
    margin: 0;
}


div.text {
    font-family: var(--text-font);
    /* font-size: var(--text-font-size); */
}

div.title {
    font-size: 50px;
    text-align: center;
    padding: 10px;
    /* background-color: #dda0dd; */
}

.header-container {
    position: fixed;
    width: 100%;
    height: var(--header-height);
    z-index: 1;
    background-color: #ddaadd;
    border: 0px;
}

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

.icon-image {
    display: block;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    border: 10px solid;
    border-color: #dda0dd;
    width: 300px;
    box-shadow: 0px 0px 10px #805e80;
}

.lang-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    border: 0px;
    width: 50px;
    height: 50px;
    color: #222;
    background-color: #dda0dd;
    border-radius: 50%;
    box-shadow: -4px -4px 8px #fdf, 4px 4px 8px rgb(0 0 0 / 24%);
    font-family: var(--text-font);
    font-size: var(--text-font-size);
}

@media (any-hover: hover) {
    .lang-button {
        transition: box-shadow 0.2s;
    }

    .lang-button:hover {
        box-shadow: -2px -2px 4px #fff, 2px 2px 4px rgb(0 0 0 / 24%);
    }

    .lang-button:active {
        background-color: #d0a0d0;
        box-shadow: inset 4px 4px 8px rgb(0 0 0 / 16%);
    }
}

.x-link {
    font-size: 60px;
    color: black;
    text-decoration: none;
    text-align: center;
}

.short-intro {
    background-color: white;
    border: 2px solid #d0a0d0;
    padding: 10px;
    width: 70vw;
    margin: 30px auto 30px auto;
    border-radius: 10px;
    font-size: 20px;
}

.cards-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 20px;
}

.information-card {
    margin: 10px;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    border: 2px solid;
    border-color: #dda0dd;
    width: 40%;
}

.card-title {
    font-size: var(--card-title-font-size);
}

.card-content {
    font-size: var(--card-content-font-size);
    text-align: center;
}

.heart {
    position: relative;
    width: 100px;
    height: 40px;
    left: 50%;
    margin-top: -45px;
    margin-left: -50px;
}

.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #e68be6;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

.heart-size {
    transform: scale(0.2) translateY(60px);
}

.bottom-heart {
    margin-top: 100px;
    margin-bottom: 30px;
}
.button-date {
    margin-top: 10px;
    margin-bottom: 50px;
    text-align: center;
    color: #dda0dd;
}

/* } */
@media screen and (max-width: 959px) {

    /* 959px以下に適用されるCSS（タブレット用） */
    :root {
        --text-font: 'Yomogi', cursive;
        --text-font-size: 3vw;
        --title-font-size: 8vw;
        --card-title-font-size: 15px;
        --card-content-font-size: 30px;
        --header-height: 13vw;

    }

    div.title {
        font-size: var(--title-font-size);
        text-align: left;
        padding: 10px;
    }

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

    .icon-image {
        display: block;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 50%;
        border: 5px solid;
        border-color: #dda0dd;
        width: 200px;
        box-shadow: 0px 0px 10px #805e80;
    }

    .lang-button {
        position: absolute;
        right: 0;
        top: 8vw;
        /* transform: translateY(-50%) translateX(-50%); */
        border: 0px;
        width: 8vw;
        height: 8vw;
        color: #222;
        background-color: #dda0dd;
        border-radius: 50%;
        box-shadow: -4px -4px 8px #fdf, 4px 4px 8px rgb(0 0 0 / 24%);
        font-family: var(--text-font);
        font-size: var(--text-font-size);
    }

    @media (any-hover: hover) {
        .lang-button {
            transition: box-shadow 0.2s;
        }

        .lang-button:hover {
            box-shadow: -2px -2px 4px #fff, 2px 2px 4px rgb(0 0 0 / 24%);
        }

        .lang-button:active {
            background-color: #d0a0d0;
            box-shadow: inset 4px 4px 8px rgb(0 0 0 / 16%);
        }
    }

    .short-intro {
        background-color: white;
        border: 2px solid #d0a0d0;
        padding: 10px;
        width: 70vw;
        margin: 30px auto 30px auto;
        border-radius: 10px;
        font-size: 20px;
    }

    .cards-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding-top: 20px;
    }

    .information-card {
        margin: 10px;
        padding: 10px;
        background-color: white;
        border-radius: 10px;
        border: 2px solid;
        border-color: #dda0dd;
        width: 40%;
    }

    .card-title {
        font-size: var(--card-title-font-size);
    }

    .card-content {
        font-size: var(--card-content-font-size);
        text-align: center;
    }

    .heart-size {
        transform: scale(0.2) translateY(60px);
    }
}

@media screen and (max-width: 480px) {

    /* 480px以下に適用されるCSS（スマホ用） */
    :root {
        --text-font: 'Yomogi', cursive;
        --text-font-size: 25px;
        --title-font-size: 30px;
        --card-title-font-size: 15px;
        --card-content-font-size: 20px;
        --header-height: 70px;
    }

    div.title {
        font-size: var(--title-font-size);
        text-align: center;
        padding: 10px;
    }

    .icon-image {
        display: block;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 50%;
        border: 5px solid;
        border-color: #dda0dd;
        width: 200px;
        box-shadow: 0px 0px 10px #805e80;
    }

    .lang-button {
        position: absolute;
        right: 0;
        top: 100%;
        transform: translateY(25%) translateX(-25%);
        border: 0px;
        width: 50px;
        height: 50px;
        color: #222;
        background-color: #dda0dd;
        border-radius: 50%;
        box-shadow: -4px -4px 8px #fdf, 4px 4px 8px rgb(0 0 0 / 24%);
        font-family: var(--text-font);
        font-size: var(--text-font-size);
    }

    @media (any-hover: hover) {
        .lang-button {
            transition: box-shadow 0.2s;
        }

        .lang-button:hover {
            box-shadow: -2px -2px 4px #fff, 2px 2px 4px rgb(0 0 0 / 24%);
        }

        .lang-button:active {
            background-color: #d0a0d0;
            box-shadow: inset 4px 4px 8px rgb(0 0 0 / 16%);
        }
    }

    .short-intro {
        background-color: white;
        border: 2px solid #d0a0d0;
        padding: 10px;
        width: 70vw;
        margin: 30px auto 30px auto;
        border-radius: 10px;
        font-size: 15px;
    }

    .cards-container {
        display: block;
        padding-top: 20px;
    }

    .information-card {
        margin: 10px;
        padding: 10px;
        background-color: white;
        border-radius: 10px;
        border: 2px solid;
        border-color: #dda0dd;
        width: auto;
    }

    .card-title {
        font-size: var(--card-title-font-size);
    }

    .card-content {
        font-size: var(--card-content-font-size);
        text-align: center;
    }

    .heart-size {
        transform: scale(0.2) translateY(60px);
    }
}