@charset "UTF-8";
html {
    background-color: #fffcf7;
}
.visually-hidden {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 4px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
}

.all{
    overflow-x: hidden;
    width: 100%;
    }

/******** main ********/
.kosugi-maru-regular {
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.main {
    text-align: center;
}
.mainVisual img {
    width: 100%;
    max-width: 60%;
}

/**　↓↓ shop ↓↓　**/
.wrap_shop .head_shop img {
    width: 100%;
    max-width: 50%;
    padding-top: 10%;
    padding-bottom: 15%;
}
#grid_container {
    width: 100%;
    max-width: 60%;
    align-items: center;
    display: inline-grid;
    grid-column: 1fr 1fr 1fr 1fr;
    grid-row: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.shop_pic2 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}
.shop_pic2 img {
    width: 100%;
    max-width: 50%;
    padding-bottom: 10%;
}
.shop_text1 {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
}
.shop_text1 p {
    padding-bottom: 10%;
    padding-left: 10%;
    text-align: left;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 250%;
}
.shop_pic3 {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
}
.shop_pic3 img {
    width: 100%;
    max-width: 60%;
    padding-bottom: 10%;
}
.shop_text2 {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
}
.shop_text2 p {
    padding-right: 10%;
    padding-bottom: 10%;
    text-align: right;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 250%;
}
.shop_acai {
    grid-column: 1 / 3;
    grid-row: 6 / 7;
}
.shop_acai img {
    width: 100%;
    max-width: 40%;
    padding-right: 10%;
    padding-bottom: 10%;
}
.shop_text3 {
    grid-column: 1 / 4;
    grid-row: 5 / 6;
}
.shop_text3 p {
    padding-right: 10%;
    text-align: right;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 250%;
}
.shop_crmbrure {
    grid-column: 2 / 4;
    grid-row: 6 / 8;
}
.shop_crmbrure img {
    width: 100%;
    max-width: 30%;
    padding-top: 40%;
}
.shop_text4 {
    grid-column: 1 / 4;
    grid-row: 8 / 9;
}
.shop_text4 p {
    padding-left: 10%;
    padding-bottom: 10%;
    text-align: left;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 250%;
}
.shop_ichigo {
    grid-column: 1 / 3;
    grid-row: 9 / 11;
}
.shop_ichigo img {
    width: 100%;
    max-width: 20%;
}
.shop_text5 {
    grid-column: 1 / 4;
    grid-row: 10 / 11;
}
.shop_text5 p {
    padding-top: 10%;
    padding-right: 10%;
    text-align: right;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 250%;
}

/**　↓↓ fruits ↓↓　**/
.wrap_fruits .head_fruits img {
    width: 100%;
    max-width: 70%;
    padding-top: 15%;
    padding-right: 10%;
    padding-bottom: 5%;
}
.fruits_text {
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 250%;
    padding-bottom: 15%;
}
.fruits_p {
    display: inline-block;
}
.fruits_text::before {
    content: "";
    background-image: url(../images/fruits_peach.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    width: 12%;
    height: 200px;
    display: inline-block;
}
.fruits_text::after {
    content: "";
    background-image: url(../images/fruits_melon.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 15%;
    height: 250px;
    display: inline-block;
}
.fruits_set img {
    display: none;
}
.fruits_calendarPc img {
    width: 100%;
    max-width: 90%;
}
.fruits_calendarSp img {
    display: none;
}

/**　↓↓ cooking ↓↓　**/
.wrap_cooking .head_cooking img {
    width: 100%;
    max-width: 70%;
    padding-top: 15%;
    padding-right: 10%;
    padding-bottom: 5%;
}
.movie_cooking {
    position: relative;
}
.movie_cooking video {
    width: 100%;
    max-width: 60%;
    border-radius: 50px;
    position: relative;
}
.cooking_crepe img {
    width: 100%;
    max-width: 12%;
    position: absolute;
    transform: translate(-250%, -50%);
}

.cooking_textPc {
    padding-top: 10% ;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 250%;
}
.cooking_textSp {
    display: none;
}

/**　↓↓ family ↓↓　**/
.wrap_family .head_family img {
    width: 100%;
    max-width: 70%;
    padding-top: 15%;
    padding-right: 10%;
}
.family_text1Pc {
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 250%;
    padding-bottom: 5%;
}
.family_text1Sp {
    display: none;
}
.family_text2::before {
    content: "";
    background-image: url(../images/family_juice.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    width: 100px;
    height: 175px;
    display: inline-block;
}
.family_text2::after {
    content: "";
    background-image: url(../images/family_soft.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 100px;
    height: 167px;
    display: inline-block;
}
.family_p {
    width: 520px;
    padding: 20px 50px 20px 0;
    display: inline-block;
    margin: 0 auto;
    background-color: rgba(242, 158, 59, 0.22);
    border-radius: 25px;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 300%;
    text-align: right;
}
.family_p .small{
    font-size: 16px;
    line-height: 200%;
}

.family_p dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.family_p dl dt {
    width: calc(100% - 5em);
}
.family_p dl dd {
    width: 5em;
}
.family_set img {
    display: none;
}

/**　↓↓ 無限スライダー ↓↓　**/
.about_slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 20%;
}
.about_slider img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: 100%;
    object-fit: cover;
}

/**　↓↓ 回転クレープ ↓↓　**/
.planePath {
    stroke: #d9dada;
    stroke-width: 0.1%;
    stroke-width: 0.5%;
    stroke-dasharray: 1% 2%;
    stroke-linecap: round;
    fill: none;
}
#plane {
    transform: translateY(-450px);
}
.fil1 {
    fill: #d9dada;
}
.fil2 {
    fill: #c5c6c6;
}
.fil4 {
    fill: #9d9e9e;
}
.fil3 {
    fill: #aeafb0;
}
.st0 {
    fill: #dcf0ff;
}
.st0,
.st1,
.st2,
.st3 {
    stroke-width: 6px;
}
.st0,
.st1,
.st2,
.st3,
.st4,
.st5 {
    stroke: #564c4c;
    stroke-miterlimit: 10;
}
.st1 {
    fill: #f4f4e1;
}
.st2 {
    fill: #f98f8f;
}
.st3 {
    fill: #f7e6bf;
}
.st4 {
    fill: #564c4c;
}
.st4,
.st5 {
    stroke-width: 4px;
}
.st6 {
    fill: #fff;
}
.st7 {
    fill: #fcf506;
}
.st5 {
    fill: none;
}
.st8 {
    display: none;
}
.corster{
    max-width: 1700px;
    margin: 0 auto;
    width: 100%;
}

.corster svg{
    height: 700px;
    width: 100%;
}

@media screen and (max-width:1000px){
    .corster{
        max-width:900px;
    }
    .corster svg{
        height: 450px;
        width: 100%;
    }
}

@media screen and (max-width:500px){
    .corster{max-width:450px;
    }
    .corster svg{
        height: 300px;
        width: 100%;
    }
}

@media screen and (max-width: 800px) {
    /**　↓↓ shop(800px) ↓↓　**/
    .wrap_shop .head_shop img {
        width: 100%;
        max-width: 70%;
        padding-top: 10%;
        padding-bottom: 10%;
    }
    #grid_container {
        width: 100%;
        max-width: 90%;
        align-items: center;
        display: inline-grid;
        grid-column: 1fr 1fr 1fr 1fr;
        grid-row: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .shop_pic2 {
        grid-column: 2 / 4;
        grid-row: 1 / 2;
    }
    .shop_pic2 img {
        width: 100%;
        max-width: 40%;
        padding-bottom: 10%;
    }
    .shop_text1 {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }
    .shop_text1 p {
        padding-bottom: 10%;
        padding-left: 10%;
        text-align: left;
        font-size: 16px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_pic3 {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
    .shop_pic3 img {
        width: 100%;
        max-width: 60%;
        padding-bottom: 10%;
    }
    .shop_text2 {
        grid-column: 1 / 4;
        grid-row: 3 / 4;
    }
    .shop_text2 p {
        padding-right: 10%;
        padding-bottom: 10%;
        text-align: right;
        font-size: 16px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_acai {
        grid-column: 1 / 3;
        grid-row: 6 / 7;
    }
    .shop_acai img {
        width: 100%;
        max-width: 40%;
        padding-right: 10%;
        padding-bottom: 10%;
    }
    .shop_text3 {
        grid-column: 1 / 4;
        grid-row: 5 / 6;
    }
    .shop_text3 p {
        padding-right: 10%;
        text-align: right;
        font-size: 16px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_crmbrure {
        grid-column: 2 / 4;
        grid-row: 6 / 8;
    }
    .shop_crmbrure img {
        width: 100%;
        max-width: 30%;
        padding-top: 40%;
    }
    .shop_text4 {
        grid-column: 1 / 4;
        grid-row: 8 / 9;
    }
    .shop_text4 p {
        padding-right: 10%;
        padding-bottom: 10%;
        text-align: left;
        font-size: 16px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_ichigo {
        grid-column: 1 / 3;
        grid-row: 9 / 11;
    }
    .shop_ichigo img {
        width: 100%;
        max-width: 20%;
    }
    .shop_text5 {
        grid-column: 1 / 4;
        grid-row: 10 / 11;
    }
    .shop_text5 p {
        padding-top: 10%;
        padding-left: 10%;
        text-align: right;
        font-size: 16px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    /**　↓↓ fruits(800px) ↓↓　**/
    .wrap_fruits .head_fruits img {
        width: 100%;
        max-width: 80%;
        padding-top: 15%;
        padding-right: 10%;
        padding-bottom: 0;
    }
    .fruits_text {
        text-align: center;
        font-size: 15px;
        letter-spacing: 0.05em;
        line-height: 250%;
        padding-bottom: 15%;
    }
    .fruits_p {
        display: inline-block;
    }
    .fruits_text::before {
        content: "";
        background-image: url(/about/images/fruits_peach.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right bottom;
        width: 12%;
        height: 200px;
        display: inline-block;
    }
    .fruits_text::after {
        content: "";
        background-image: url(/about/images/fruits_melon.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left bottom;
        width: 15%;
        height: 250px;
        display: inline-block;
    }
    .fruits_set img {
        display: none;
    }
    .fruits_calendarPc img {
        width: 100%;
        max-width: 90%;
    }
    .fruits_calendarSp img {
        display: none;
    }
    /**　↓↓ cooking(800px) ↓↓　**/
    .wrap_cooking .head_cooking img {
        width: 100%;
        max-width: 80%;
        padding-top: 15%;
        padding-right: 10%;
        padding-bottom: 5%;
    }
    .movie_cooking {
        position: relative;
    }
    .movie_cooking video {
        width: 100%;
        max-width: 60%;
        border-radius: 40px;
        position: relative;
    }
    .cooking_crepe img {
        width: 100%;
        max-width: 12%;
        position: absolute;
        transform: translate(-250%, -50%);
    }
    .cooking_textPc {
        padding-top: 10%;
        text-align: center;
        font-size: 16px;
        letter-spacing: 0.05em;
        line-height: 250%;
    }
    .cooking_textSp {
        display: none;
    }
    /**　↓↓ family(800px) ↓↓　**/
    .wrap_family .head_family img {
        width: 100%;
        max-width: 80%;
        padding-top: 15%;
        padding-right: 10%;
        padding-bottom: 5%;
    }
    .family_text1Pc {
        display: none;
    }
    .family_text1Sp {
        display: block;
        font-size: 16px;
        letter-spacing: 0.05em;
        line-height: 220%;
        padding-bottom: 5%;
    }
    .family_text2::before {
        content: none;
        display: none;
    }
    .family_text2::after {
        content: none;
        display: none;
    }
    .family_set img {
        display: inline;
        width: 100%;
        max-width: 25%;
        padding-top: 2%;
    }
    .family_p {
        width: 400px;
        padding: 20px 30px 20px 0;
        background-color: rgba(242, 158, 59, 0.22);
        border-radius: 25px;
        font-size: 16px;
        letter-spacing: 0.05em;
        line-height: 250%;
    }
    /**　↓↓ 回転クレープ ↓↓　**/
    .corster svg {
        height: 400px;
        width: 100%;
    }
} /* 800px */

@media screen and (max-width: 500px) {
    /**　↓↓ shop(500px) ↓↓　**/
    .wrap_shop .head_shop img {
        width: 100%;
        max-width: 80%;
        padding-top: 10%;
        padding-bottom: 10%;
    }
    .shop_pic2 {
        grid-column: 2 / 4;
        grid-row: 1 / 2;
    }
    .shop_pic2 img {
        width: 100%;
        max-width: 50%;
        padding-bottom: 10%;
    }
    .shop_text1 {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }
    .shop_text1 p {
        padding-bottom: 10%;
        padding-left: 10%;
        text-align: left;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_pic3 {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
    .shop_pic3 img {
        width: 100%;
        max-width: 70%;
    }
    .shop_text2 {
        grid-column: 1 / 4;
        grid-row: 3 / 4;
    }
    .shop_text2 p {
        padding-right: 10%;
        padding-bottom: 10%;
        text-align: right;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_acai {
        grid-column: 1 / 3;
        grid-row: 6 / 7;
    }
    .shop_acai img {
        width: 100%;
        max-width: 40%;
        padding-right: 10%;
        padding-bottom: 10%;
    }
    .shop_text3 {
        grid-column: 1 / 4;
        grid-row: 5 / 6;
    }
    .shop_text3 p {
        padding-left: 10%;
        text-align: right;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_crmbrure {
        grid-column: 2 / 4;
        grid-row: 6 / 8;
    }
    .shop_crmbrure img {
        width: 100%;
        max-width: 30%;
        padding-top: 40%;
    }
    .shop_text4 {
        grid-column: 1 / 4;
        grid-row: 8 / 9;
    }
    .shop_text4 p {
        padding-left: 10%;
        padding-bottom: 10%;
        text-align: left;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_ichigo {
        grid-column: 1 / 3;
        grid-row: 9 / 11;
    }
    .shop_ichigo img {
        width: 100%;
        max-width: 20%;
    }
    .shop_text5 {
        grid-column: 1 / 4;
        grid-row: 10 / 11;
    }
    .shop_text5 p {
        padding-top: 10%;
        padding-right: 10%;
        text-align: right;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    /**　↓↓ fruits(500px) ↓↓　**/
    .wrap_fruits .head_fruits img {
        width: 100%;
        max-width: 90%;
        padding-top: 20%;
        padding-right: 10%;
        padding-bottom: 5%;
    }
    .fruits_text {
        text-align: center;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 250%;
        padding-bottom: 0;
    }
    .fruits_text::before {
        content: none;
        display: none;
    }
    .fruits_text::after {
        content: none;
        display: none;
    }
    .fruits_set img {
        display: inline;
        width: 100%;
        max-width: 50%;
        padding-left: 10%;
    }
    .fruits_calendarPc img {
        display: none;
    }
    .fruits_calendarSp img {
        display: inline;
        width: 100%;
        max-width: 90%;
    }
    /**　↓↓ cooking(500px) ↓↓　**/
    .wrap_cooking .head_cooking img {
        width: 100%;
        max-width: 90%;
        padding-top: 20%;
        padding-right: 10%;
        padding-bottom: 5%;
    }
    .movie_cooking {
        position: relative;
    }
    .movie_cooking video {
        width: 100%;
        max-width: 70%;
        border-radius: 30px;
        position: relative;
    }
    .cooking_crepe img {
        width: 100%;
        max-width: 15%;
        position: absolute;
        transform: translate(-230%, -50%);
    }
    .cooking_textPc {
        display: none;
    }
    .cooking_textSp {
        display: block;
        padding: 10% 10% 0;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 250%;
    }
    /**　↓↓ family(500px) ↓↓　**/
    .wrap_family .head_family img {
        width: 100%;
        max-width: 90%;
        padding-top: 20%;
        padding-right: 10%;
        padding-bottom: 5%;
    }
    .family_text1Sp {
        display: block;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
        padding: 0 10% 10%;
    }
    .family_p {
        width: 350px;
        padding-right: 5%;
        background-color: rgba(242, 158, 59, 0.22);
        border-radius: 25px;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
        display: inline-block;
    }
    .family_p .small{
        font-size: 12px;
        line-height: 180%;
    }
    .family_set img {
        display: inline;
        width: 100%;
        max-width: 30%;
        padding-top: 2%;
    }
    /**　↓↓ 回転クレープ ↓↓　**/
    .corster svg {
        height: 250px;
        width: 100%;
    }
} /* 500px */

@media screen and (max-width: 390px) {
    .mainVisual img {
        width: 100%;
        max-width: 80%;
    }
    .wrap_shop .head_shop img {
        width: 100%;
        max-width: 80%;
        padding-top: 10%;
        padding-bottom: 10%;
    }
    .shop_pic2 {
        grid-column: 2 / 4;
        grid-row: 1 / 2;
    }
    .shop_pic2 img {
        width: 100%;
        max-width: 50%;
        padding-bottom: 10%;
    }
    .shop_text1 {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }
    .shop_text1 p {
        padding-bottom: 10%;
        padding-left: 10%;
        text-align: left;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_pic3 {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
    .shop_pic3 img {
        width: 100%;
        max-width: 70%;
    }
    .shop_text2 {
        grid-column: 1 / 4;
        grid-row: 3 / 4;
    }
    .shop_text2 p {
        padding-right: 10%;
        padding-bottom: 10%;
        text-align: right;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_acai {
        grid-column: 1 / 3;
        grid-row: 6 / 7;
    }
    .shop_acai img {
        width: 100%;
        max-width: 45%;
        padding-right: 10%;
        padding-bottom: 10%;
    }
    .shop_text3 {
        grid-column: 1 / 4;
        grid-row: 5 / 6;
    }
    .shop_text3 p {
        padding-left: 10%;
        text-align: right;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_crmbrure {
        grid-column: 2 / 4;
        grid-row: 6 / 8;
    }
    .shop_crmbrure img {
        width: 100%;
        max-width: 35%;
        padding-top: 40%;
    }
    .shop_text4 {
        grid-column: 1 / 4;
        grid-row: 8 / 9;
    }
    .shop_text4 p {
        padding-left: 10%;
        padding-bottom: 10%;
        text-align: left;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    .shop_ichigo {
        grid-column: 1 / 3;
        grid-row: 9 / 11;
    }
    .shop_ichigo img {
        width: 100%;
        max-width: 20%;
    }
    .shop_text5 {
        grid-column: 1 / 4;
        grid-row: 10 / 11;
    }
    .shop_text5 p {
        padding-top: 10%;
        padding-right: 10%;
        text-align: right;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }

    /**　↓↓ fruits(390px) ↓↓　**/
    .wrap_fruits .head_fruits img {
        width: 100%;
        max-width: 100%;
        padding-top: 20%;
        padding-right: 10%;
        padding-bottom: 5%;
    }
    /**　↓↓ cooking(390px) ↓↓　**/
    .wrap_cooking .head_cooking img {
        width: 100%;
        max-width: 100%;
        padding-top: 20%;
        padding-right: 10%;
        padding-bottom: 5%;
    }
    /**　↓↓ family(390px) ↓↓　**/
    .wrap_family .head_family img {
        width: 100%;
        max-width: 80%;
        padding-top: 20% ;
        padding-right: 10%;
        padding-bottom: 5%;
    }
    .family_text1Sp {
        display: block;
        font-size: 14px;
        letter-spacing: 0.05em;
        line-height: 220%;
    }
    /**　↓↓ 回転クレープ ↓↓　**/
    .corster svg {
        height: 200px;
        width: 100%;
    }
} /* 390px */