@charset "UTF-8";
/* ===============
common
=============== */
:root {
    --primary-bule: #DEEAEA;
    --primary-orange: #FAA786;
    --primary-yellow: #FFFA91;
    --primary-black: #595757;
}

html {
    font-size: 62.5%;
    background-color: var(--primary-bule);
}

body {
    font-family: 
    "Noto Sans JP",
    Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: 1.5;
    font-size: 1.6rem;
    font-weight: 300;
    width: 100%;
    max-width: 450px;
    margin: auto;
}

img {
    max-width: 100%;
    height: auto;
}

.section_title {
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
    margin: 0 auto;
    background: linear-gradient(#DEEAEA, 70%, #fff);
    padding: 30px 10px;

    align-items: center; 
    justify-content: center;
    display: flex;
}


.section_title:before, .section_title:after {
    border-top: 1px solid;
    content: "";
    width: 30px;
    flex-grow: 1;
}

.section_title:before {
    margin-right: 10px;
}

.section_title:after {
    margin-left: 10px; 
}
  
.main {
    max-width: 450px;
    margin: auto;
    background-color: #fff;
    z-index: 2;
    
    box-shadow: 0 0 10px 5px rgba(135, 133, 133, 0.2);
}

/* common pc */
@media screen and (min-width: 1180px) {
    body {
        width: 100%;
        max-width: 1440px;
        margin: auto;
    }

    .main {
        position: absolute;
        right: 50%;
        transform: translateX(35%);
    }

    .nav_header {
        display: none;
    }
}

/* ===============
header
=============== */
.header {
    background-color: var(--primary-bule);
}

.nav {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
    background-color: var(--primary-bule);
}

.nav.active {
    transform: translateX(0);
}

.header_btn {
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    top: 30px;
    right: 6.5%;
}

.header_logo {
    display: block;
    width: 170px;
    margin-top: 130px;
    margin-left: 30%;
}

.nav_list {
    margin-top: 40px;
}

.nav_item {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    margin-left: 20%;
    pointer-events: auto;
}

.nav_item img {
    width: 90px;
    height: 90px;
    display: inline-block;
    vertical-align: -35px;
}

.side_images {
    display: none;
}

/* header pc */
@media screen and (min-width: 1180px) {
    .header {
        position: fixed;
        background-color: var(--primary-bule);
        width: 100%;
        height: 100vh;
        z-index: 0;

        background-image:

        radial-gradient(circle 70px at 87% 10%,rgba(255,250,145, 0.7) 50%,transparent 10%),
        radial-gradient(circle 250px at 55% 5%,rgba(255,250,145, 0.7) 50%,transparent 30%),
        radial-gradient(circle 200px at 70% 60%,rgba(255,250,145, 0.7) 50%,transparent 10%),
        radial-gradient(circle 100px at 55% 90%,rgba(255,250,145, 0.7) 50%,transparent 10%),
        radial-gradient(circle 270px at 90% 93%,rgba(255,250,145, 0.7) 50%,transparent 10%)
    
    }

    .header_btn {
        display: none;
    }

    .nav {
        width: 300px;
        height: 100vh;
        position: static;
        transform: translate(0);
        position: absolute;
        white-space: nowrap;
    }

    .header_logo {
        display: block;
        width: 170px;
        margin-top: 25%;
    }

    .nav_list {
        height: 100vh;
    }

    .nav_item {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1;
        margin-left: 5%;
        pointer-events: auto;
    }

    .side_images {
        display: grid;
        width: 500px;
    }

    .img_fun {
        animation: fuwafuwa 3s ease-in-out infinite alternate;
        display: inline-block;
        transition: 1.5s ease-in-out;
        width: 152px;
        margin-top: 80px;
        position: absolute;
        left: 60%;
        z-index: 10;
        animation-delay: 0.5s;
    }
        
    @keyframes fuwafuwa {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-20px);
        }
    }

    .img_color {
        width: 170px;
        position: absolute;
        top: 123px;
        left: 79%;

        animation: fuwafuwa 3s ease-in-out infinite alternate;
    }

    .img_mama {
        width: 280px;
        position: absolute;
        top: 320px;
        left: 67%;

        animation: fuwafuwa 4s ease-in-out infinite alternate;
    }

    .img_style {
        width: 170px;
        position: absolute;
        top: 548px;
        left: 85%;

        animation: fuwafuwa 2.5s ease-in-out infinite alternate;
        animation-delay: 0.2s;
    }

    .img_it {
        width: 200px;
        position: absolute;
        top: 634px;
        left: 58%;

        animation: fuwafuwa 3.5s ease-in-out infinite alternate;
        animation-delay: 0.1s;
    }

}

/* ===============
footer
=============== */
.footer {
    background-color: #fff;
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 15px 10px 5px rgba(135, 133, 133, 0.2);
}

.footer_logo {
    display: block;
    width: 170px;
    margin: 0 auto;
    padding-top: 50px;
}

.footer_sns {
    display: flex;
    padding-top: 30px;
    justify-content: center;
}

.sns_item {
    width: 200px;
    margin-right: 50px;
}

.sns_item:last-child {
    margin-right: 0;
}

.copy {
    margin: 35px 25px 0;
    text-align: center;
    padding-bottom: 50px;
}

.copy small {
    font-size: 1.4rem;
}