@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap");

:root {
    --background-main-color: #FAC3D5;
    --background-purple-color: #C3ABFF;
    --background-yellow-color: #FED35A;
    --background-pink-color: #FE7EC4;
    --background-white-color: #FFFFFF;
    --main-letter-color: #1E1E1E;
    --date-letter-color: #0505EE;
    --mail-letter-color: #FE7EC4;
    --padding-topbottom: clamp(1.5rem, 0.3696rem + 3.4783vw, 3.5rem);
    --padding-leftright: clamp(2.5rem, -0.3261rem + 8.6957vw, 7.5rem);
    --font-family-japanese: 'Noto Sans JP', sans-serif;
    --font-family-english: "Work Sans", sans-serif;
    --font-family-secttl: "RocknRoll One", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {

    text-rendering: optimizeLegibility;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

    /* macOS/iOS Safari/Chrome向けのアンチエイリアシング設定 (補完的) */
    -webkit-font-smoothing: antialiased;

    /* macOS Firefox向けのアンチエイリアシング設定 (補完的) */
    -moz-osx-font-smoothing: grayscale;
}

#wrapper {
    box-sizing: border-box;
    position: relative;
    background-color: var(--background-main-color);
    color: var(--main-letter-color);
    font-family: var(--font-family-japanese);
    font-size: clamp(1rem, 0.867rem + 0.4255vw, 1.25rem);
    width: 100%;

    /* min-height: 100vh; */
    /* font-feature-settings: "palt"; */
    padding-bottom: 30rem;
}

.header {
    position: relative;
    width: 100%;
}

.title_wrapper {
    position: relative;
    width: 60%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
}

.title {
    position: relative;
    align-self: baseline;
    padding-top: 24px;
    animation: boyon 1s ease 0s 2 normal forwards;
}

.title img {
    width: 100%;
}

.ppl_img {
    width: 55.555555555%;
    height: auto;
    margin-top: -64px;
    opacity: 0;
    animation: slide_up 1s ease 1.5s 1 normal forwards;
}

.ppl_img img {
    position: relative;
    width: 100%;
    height: auto;
}

.date {
    position: relative;
    display: flex;
    width: 100%;
    height: clamp(2rem, 0.8696rem + 3.4783vw, 4rem);
    margin-top: -2px;
    justify-content: center;
    align-items: center;
    background-color: var(--background-pink-color);
    color: var(--date-letter-color);
    text-align: center;
    font-family: var(--font-family-japanese);
    font-size: clamp(1rem, 0.6168rem + 1.1791vw, 1.678rem);
    font-style: normal;
    font-weight: 700;
    padding-top: 1rem;
    line-height: 3.64969rem;
    letter-spacing: -0.01675rem;
}

.date_big {
    font-size: clamp(2rem, 1.3094rem + 2.1248vw, 3.22175rem);
    font-style: normal;
    font-weight: 900;
    margin-top: -18px;
}

section {
    position: relative;
    display: flex;
    padding: var(--padding-topbottom) var(--padding-leftright);
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.4rem, 1.0609rem + 1.0435vw, 2rem);
    color: var(--main-letter-color);
    font-family: var(--font-family-japanese);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    /* line-height: 32px; */
    /* 160% */
    letter-spacing: 1.6px;
}

section.mail {
    position: relative;
    display: flex;
    width: 100%;
    padding: 2.5rem 0;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    /* margin-bottom: 2.5rem; */
}

.mail_inner {
    position: relative;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mail_title {
    position: relative;
    width: 94.444%;
    display: flex;
    padding: 0.5rem 0;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--background-pink-color);
    color: #FAFAFA;
    text-align: center;
    font-family: var(--font-family-japanese);
    font-size: clamp(1rem, 0.625rem + 1vw, 1.5rem);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: .2rem;
}

.mail_inner a {
    width: 100%;
    position: relative;
}

.mail_contents {
    position: relative;
    display: flex;
    height: clamp(1rem, -2.75rem + 10vw, 6rem);
    padding: 1.5625rem 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.78125rem;
    border: 8px solid #FE7EC4;
    background: #FAFAFB;
    box-shadow: 0 8px 16px #E491AA;
}

/* .mail_contents::after {
content: "";
    position: absolute;
    top: -0.5rem;
    right: -.5rem;
    bottom: 0;
    width: 90.6%;
    height: 7rem;
    padding: 1.5625rem 2.34375rem;
    border-radius: 0.78125rem;
    box-shadow: inset -1px -3px 6px rgba(251, 250, 250, .6);
    pointer-events: none;
} */

.mail_inner a,
.mail_inner a:visited,
.mail_inner a:hover {
    color: #FE7EC4;
    text-decoration: none;
}

.mail_contents_inner:hover {
    opacity: .8;
    animation: jello_h 2s ease 0s 1 normal forwards;
}

.mail_contents_inner,
.mail_contents_white {
    display: flex;
    /* width: 29.79069rem; */
    justify-content: center;
    align-items: center;
    gap: 0.39063rem;
    color: #FE7EC4;
    text-align: center;
    font-family: var(--font-family-english);
    font-size: clamp(1.6rem, 0.0829rem + 2.9789vw, 2.68944rem);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.08069rem;
    text-decoration: none;
}

.mail_contents_white {
    position: absolute;
    /* top: -0.5rem; */
    /* right: -.5rem; */
    bottom: 0;
    width: 100%;
    height: clamp(2rem, -1.75rem + 10vw, 7rem);
    /* padding: 1.5625rem 2.34375rem; */
    padding-top: 1.5625rem;
    padding-bottom: 1.5625rem;
    border-radius: 0.78125rem;
    box-shadow: inset -1px -3px 6px rgba(251, 250, 250, .6);
    pointer-events: none;
}

.ppl {
    position: relative;
    background-color: var(--background-yellow-color);
}

.corner {
    position: relative;
    background-color: var(--background-white-color);
}

h4.section_ttl {
    font-family: var(--font-family-secttl);
    font-size: clamp(2rem, 1.7174rem + 0.8696vw, 2.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1rem;
}

.section_inner {
    position: relative;
    display: flex;
    padding: 0 1.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    align-self: stretch;
}

.ppl .section_inner {
    display: grid;
    /* height: 20.75rem; */
    padding: 0 1.5rem;
    row-gap: 4rem;
    column-gap: 4rem;
    grid-template-rows: repeat(2, minmax(0, auto));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-row: span 1;
    grid-column: span 1;
    grid-auto-flow: row;
    justify-self: stretch;
}

.prof {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.prof_name {
    position: relative;
    font-size: clamp(1.25rem, 0.8261rem + 1.3043vw, 1.8rem);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.16rem;
}

.prof_contents {
    position: relative;
    display: flex;
    padding-left: 1rem;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: clamp(1rem, 0.8587rem + 0.4348vw, 1.25rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    /* 160% */
    letter-spacing: 0.1rem;
}

.about {
    background-color: var(--background-purple-color)
}

/* .bottom_text {
    position:absolute;
    bottom:1rem;
    width: 100%;
    text-align: center;
    font-size: 2.95381rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 0.14769rem;
} */

.bottom_text {
    width: 98%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 1%;
    padding-bottom: 1rem;
}

/* トップへ戻るボタン */

#pagetop {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 5500;
    display: block;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: .5s;
}

#pagetop.visible {
    opacity: .8;
    pointer-events: auto;
}

#pagetop.visible:hover {
    opacity: 1;
}

.sml {
    display: none;
}

/*===============================================
●style.css 画面の横幅が1024pxまで
===============================================*/

@media screen and (max-width: 1024px) {
    .title_wrapper {
        position: relative;
        width: 80%;
    }

    .mail_inner {
        width: 60%;
    }

    .date_big {
        font-size: clamp(2rem, 1.3094rem + 2.1248vw, 3.22175rem);
        font-style: normal;
        font-weight: 900;
        margin-top: -15px;
    }

    .ppl .section_inner {
        position: relative;
        display: flex;
        padding: 0 1.5rem;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2rem;
        align-self: stretch;
    }
}

/*===============================================
●style.css 画面の横幅が520pxまで　スマホ
===============================================*/

@media screen and (max-width: 520px) {
    #wrapper {
        padding-bottom: 20rem;
    }

    .title_wrapper {
        position: relative;
        width: 90%;
    }

    .mail_inner {
        width: 90%;
    }

    .mail_contents_inner img {
        width: 3rem;
    }

    .ppl_img {
        margin-top: -1.4rem;
    }

    .section_inner {
        padding: 0 0;
    }

    .prof_contents {
        padding-left: 0;
    }

    .ppl .section_inner {
        padding: 0;
    }
    .ppl .prof_contents {
        padding-left: 1rem;
    }
    #pagetop {
        width: 3rem;
        height: 3rem;
    }

    #pagetop img {
        width: 100%;
    }

    .sml {
        display: block;
    }
}