@font-face {
    font-family: 'groldregular';
    src: url('../fonts/grold-regular-webfont.woff2') format('woff2'),
        url('../fonts/grold-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'groldlight';
    src: url('../fonts/grold-light-webfont.woff2') format('woff2'),
        url('../fonts/grold-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html,
body {
    height: 100%;
    font-family: "ヒラギノUD角ゴ W3 JIS2004";
    line-height: 1.8;
    background: #FFFDF9;
    color: #4E5255;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
    padding-right: 7px;
    padding-left: 7px;
}

.row {
    margin-right: -7px;
    margin-left: -7px;
}

button:focus {
    outline: none;
}

a,
a:hover {
    text-decoration: none;
}

p {
    font-size: 13px
}

.title {
    font-family: "秀英明朝 M";
    font-size: 17px;
    margin-bottom: 1rem;
}

.sub-title {
    font-size: 15px;
    margin-bottom: 0rem;
    font-family: 'groldregular';
    letter-spacing: 6px;
}

.section-title {
    font-family: "秀英明朝 M";
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 1.1rem;
}

#about .section-title,
#goldplane.section-title,
#sable .title,
#foodstuff .section-title,
#making .section-title {
    font-family: "リュウミン L-KL";
}

#sable .sub-color {
    font-family: "秀英明朝 B"
}

#yawaraka .section-title {
    font-family: "ヒラギノUD角ゴ W3 JIS2004";
}

.yawaraka-sub-title {
    font-family: "秀英明朝 M";
    font-size: 22px;
}

.section-sub-title {
    font-size: 15px;
    margin-top: -1rem;
}

.line-sub-title {
    font-size: 20px;
    margin-bottom: 0rem;
    font-family: 'groldregular';
    letter-spacing: 4px;
}

.discover-bottom {
    color: #FBD590;
    font-size: 15px;
    margin-bottom: -1rem;
    font-family: 'groldregular';
    letter-spacing: 6px;
}

.discover-top {
    color: #FBD590;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 1rem;
    font-family: 'groldregular';
    letter-spacing: 6px;
}

.read-more {
    width: 150px;
    display: block;
    text-align: center;
    color: #FBD590;
    border: solid 1px #FBD590;
    border-radius: 10px;
    padding: 3px 15px;
    margin: 0 auto;
    font-family: 'groldregular';
    font-size: 21px;
    line-height: 1;
    margin-bottom: .5rem;
}

.read-more:hover {
    color: #FBD590;
}

.read-more-description {
    font-size: 11px;
    font-family: "秀英明朝 B";
}

.fixed-left {
    display: none;
    width: 75px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    color: #FFFDF9;
    background: #FBD590;
    z-index: 10000;
    text-align: center;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
}

.fixed-left .head {
    position: absolute;
    top: 25px;
    left: 18px
}

.fixed-left p {
    font-size: 19px;
    position: absolute;
    top: 190px;
    left: 21px;
    margin: 0;
    font-family: "リュウミン L-KL";
}

.fixed-left .logo {
    position: absolute;
    bottom: 25px;
    left: 21px
}

.fixed-right {
    display: none;
    /* width: 95px; */
    width: 75px;
    /* height: calc(100vh - 95px); */
    height: calc(100vh - 75px);
    position: fixed;
    bottom: 0;
    right: 0;
    background: #FBD590;
    z-index: 10000;
    text-align: center;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
}

.fixed-right .cart {
    position: absolute;
    top: 20px;
    right: 17px;
    width: 38px;
}

.fixed-right .shop {
    color: #FFFDF9;
    font-size: 23px;
    position: fixed;
    top: 150px;
    right: 14px;
    margin: 0;
    font-family: 'groldregular';
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    font-weight: bold;
    letter-spacing: 6px;
}

.fixed-right .anniversary {
    position: absolute;
    bottom: 25px;
    right: 12px;
    width: 50px;
}

.fixed-right .share,
.fixed-right .follow {
    font-family: 'groldregular';
    position: fixed;
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    margin: 0;
    display: block;
    color: #4E5255;
}

.fixed-right .share {
    top: 400px;
    right: 21px;
}

.fixed-right .follow {
    top: 510px;
    right: 21px;
}

.fixed-right .instagram {
    position: absolute;
    top: 390px;
    right: 21px;
}

.fixed-right .line {
    position: absolute;
    top: 510px;
    right: 21px;
}

.fixed-right a:hover,
.fixed-left a:hover {
    opacity: 0.5;
    transition: 1s;
}

.mobile-left {
    text-align: left;
}

.mobile-center {
    text-align: center;
}

/*---------- #menu ----------*/

.mobile-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 56px;
    padding: 10px 0;
    text-align: center;
    z-index: 1000;
    background: #FFFDF9;
    opacity: 0.95;
}

.mobile-header .instagram {
    position: absolute;
    left: 10px;
    top: 12px;
}

.mobile-header .line {
    position: absolute;
    left: 45px;
    top: 12px;
}

.mobile-footer {
    padding: 10px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50px;
    z-index: 100;
    background: #FBD590;
    text-align: center;
}

.mobile-footer p {
    margin-bottom: 0;
    margin-top: .3rem;
    color: #4E5255;
}

.mobile-footer .shop {
    position: absolute;
    left: 15px;
    bottom: 10px;
}

.mobile-footer .link {
    position: absolute;
    right: 25px;
    bottom: 15px;
}

.mobile-logo {
    margin-left: 10px;
}

#menu {
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: #FFFDF9;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    transform: translate(100%);
    transition: transform .5s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: auto;
    opacity: 0.95;
}

#menu.open {
    transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate(0);
}

#menu header {
    background: #FFFDF9;
    height: 75px;
    text-align: center;
    padding: 7px;
    display: none;
}

#menu header img {
    margin: 0 20px
}

#menu .pc-menu {
    padding: 5rem 2rem 0rem;
    margin-right: 0;
    margin-left: 0;
}

#menu .pc-menu a {
    display: block;
    color: #FBD590;
    font-size: 13px;
    margin-left: 1rem;
}

#menu .pc-menu a:hover {
    color: #FBD590;
}

#menu .pc-menu .link-item {
    font-size: 16px;
    margin-left: 0;
    display: block;
    color: #FBD590;
    border-bottom: 1px solid #FBD590;
    line-height: 1.3;
    padding-bottom: 3px;
    margin-bottom: .5rem;
    font-family: "秀英明朝 M";
}

#menu .pc-menu .link-item:hover {
    color: #FBD590;
}

#menu .pc-menu button {
    font-size: 16px;
    display: block;
    color: #FBD590;
    border-bottom: 1px solid #FBD590;
    line-height: 1.3;
    margin-bottom: .5rem;
    font-family: "秀英明朝 M";
    width: 100%;
    background: transparent;
    border-top: none;
    border-right: none;
    border-left: none;
    text-align: left;
    padding: 0;
    padding-bottom: 3px;
}

#menu .pc-menu .link-item span,
#menu .pc-menu button span {
    font-size: 12px;
    font-family: 'groldlight';
    letter-spacing: 2px;
}

#menu .list-group {
    margin-top: 1rem
}

#menu .list-group li {
    list-style: none;
    font-size: 11px;
    margin-right: 15px
}

#menu .list-group li a {
    display: block;
    color: #FFFDF9;
    border: none;
    font-size: 11px;
    margin-left: 0;
}

#menu a:hover {
    color: #FFFDF9;
}

#menu ul {
    list-style-type: none;
}

#menu li {
    color: #FFFDF9;
}

#menu_btn {
    position: fixed;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    color: #4E5255;
    padding: 9px;
    cursor: pointer;
    z-index: 1000;
    opacity: 0.95;
    font-family: 'groldregular';
    text-align: center;
}

#menu .mobile-link-right {
    position: absolute;
    right: 15px;
}

#menu .mobile-menu-footer {
    text-align: center;
}

#menu .mobile-menu-footer p {
    color: #FBD590;
}

#menu .Item {
    position: relative;
}

#menu .Item a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 95%;
    height: 1px;
    background: #FFFDF9;
}

#menu .Item:hover a::after {
    animation: menuUnderLine 1s ease;
}

@keyframes menuUnderLine {
    0% {
        width: 0;
    }

    100% {
        width: 95%;
    }
}

#left {
    position: absolute;
    right: 18px;
    stroke-dasharray: 100px;
    animation: left1 .5s 1;
}

#left circle {
    fill: transparent;
    stroke: #4E5255;
    stroke-width: 1;
}

#right {
    position: absolute;
    right: 4px;
    stroke-dasharray: 100px;
    animation: right1 .5s 1;
}

#right circle {
    fill: transparent;
    stroke: #4E5255;
    stroke-width: 1;
}

/* #menu_btn:hover #left,*/
.active #left {
    right: 10px;
    animation: left .5s 1;
}

/*#menu_btn:hover #right,*/
.active #right {
    right: 10px;
    animation: right .5s 1;
}

@keyframes right1 {

    0% {
        right: 10px;
    }


    100% {
        right: 4px;
    }

}

@keyframes right {

    0% {
        right: 4px;
    }


    100% {
        right: 10px;
    }

}

@keyframes left1 {

    0% {
        right: 10px;
    }


    100% {
        right: 18px;
    }

}

@keyframes left {

    0% {
        right: 18px;
    }


    100% {
        right: 10px;
    }

}

@keyframes just {

    0% {
        stroke-dashoffset: 100px;
    }


    100% {
        stroke-dashoffset: 0px;
    }

}

#menu_btn span {
    position: relative;
    top: 20px;
    right: 3px;
    font-weight: bold;
}

.active span {
    right: 7px !important;
}

/*---------- #menu ----------*/

.carousel {
    border-bottom-right-radius: 1500px 600px;
    border-bottom-left-radius: 1500px 600px;
    margin-bottom: -30px;
    margin-top: 0;
}

.carousel .monde-selection {
    position: absolute;
    height: 100px;
    left: 20px;
    bottom: 5px;
    z-index: 10;
}

.monde-selection {
    position: relative;
    height: 100px;
    left: 20px;
    top: -120px;
    z-index: 10;
    margin-bottom: -100px;
}

section {
    background: #FFFDF9;
    overflow: hidden;
    text-align: center;
    padding: 2rem 0;
}

.anniversary-banner {
    margin-top: -1rem;
}

#about {
    overflow: hidden;
}

.border-section {
    padding: 1rem 0;
    text-align: left;
}

.border-section .caption {
    font-size: 11px;
    margin-bottom: 1rem;
    font-family: "秀英明朝 B"
}

.border-section .img {
    padding: 0
}

.pc-border-top {
    transform: translateX(-150%);
    transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.pc-border-bottom {
    transform: translateX(+150%);
    transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.mobile-border-top {
    transform: translateX(-150%);
    transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.mobile-border-bottom {
    transform: translateX(+150%);
    transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.mobile-border {
    overflow: hidden;
}

.white {
    background: #FFFDF9;
    padding: 2rem 0 !important;
}

.btn-custom {
    background: url(../img/button-back.png) left -10px bottom -5px no-repeat #FBD590;
    color: #FFFDF9;
    border-radius: 5px;
    padding: .5rem;
    background-size: 55px;
    font-size: 12px;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.btn-custom:hover {
    color: #FFFDF9;
    opacity: 0.5;
    transition: 1s;
}

.new {
    background: #FBD590;
    padding: 2rem 3px;
}

.new .container {
    border-radius: 10px;
}

.new .section-title {
    color: #FBD590;
    font-size: 21px;
    line-height: 1.5;
    font-family: "リュウミン L-KL";
}

.new .border-title {
    border-top: 3px solid #FBD590;
    border-bottom: 3px solid #FBD590;
}

.new p span {
    color: #E64F2C;
}

.sub-color {
    color: #FBD590;
    font-size: 15px;
    margin-top: -.5rem;
    font-family: "秀英明朝 M";
    /* margin-bottom: 0; */
}

#foodstuff {
    padding: 198px 0 -198px;
}

#foodstuff .sub-color {
    font-family: "ヒラギノUD角ゴ W3 JIS2004";
}

.sable {
    margin-left: -25%;
    width: 100%;
    margin-top: -1rem;
    transform: translateX(-150%);
    transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.mobile-sable-left {
    width: 100%;
    transform: translateX(-150%);
    transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.mobile-sable-right {
    width: 100%;
    margin-top: -1rem;
    transform: translateX(150%);
    transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.img-description {
    font-size: 10px;
    color: #FBD590;
    margin-top: .5rem;
    margin-bottom: .5rem;
    font-family: "リュウミン M-KL";
}

#gift .img-description {
    font-family: "秀英明朝 M";
    color: #4E5255;
}

#gift .img-description span {
    font-size: 10px;
    color: #FBD590;
}

.discover {
    padding: 7rem 0;
    background-image: url(../img/discover-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFFDF9;
    height: 350px;
}

.discover .title {
    font-family: "リュウミン L-KL";
}

.discover-mobile {
    padding: 6rem 0;
    background-image: url(../img/discover-back-mobile.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFFDF9;
    height: 350px;
}

#butter {
    padding: 0;
    position: relative;
    height: 526px;
    overflow: hidden;
    width: 100%;
}

.butter {
    position: absolute;
    width: 100%;
    height: 526px;
    background: url(../img/mobile-butter-back.png) no-repeat center center;
    background-size: cover;
    /* transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
    transform: matrix3d(1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1); */
    transition: all 1s ease;
    will-change: transform;
}

#kinako {
    padding: 0;
    position: relative;
    height: 526px;
    overflow: hidden;
    width: 100%;
    color: #FBD590;
}

.kinako {
    position: absolute;
    width: 100%;
    height: 526px;
    background: url(../img/mobile-kinako-back.jpg) no-repeat center center;
    background-size: cover;
    /* transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
    transform: matrix3d(1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1); */
    transition: all 1s ease;
    will-change: transform;
}

#gannash {
    padding: 0;
    position: relative;
    height: 526px;
    overflow: hidden;
    width: 100%;
}

.gannash {
    position: absolute;
    width: 100%;
    height: 526px;
    background: url(../img/mobile-gannash-back.png) no-repeat center center;
    background-size: cover;
    /* transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
    transform: matrix3d(1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1); */
    transition: all 1s ease;
    will-change: transform;
}

.foodstuff .row p {
    text-align: left;
    font-size: 10px;
    letter-spacing: -0.7px;
    line-height: 1.5;
    margin-top: .5rem;
}

.parallax {
    background-image: url(../img/yawaraka-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 345px;
}

.parallax-mobile {
    background-image: url(../img/yawaraka-back-mobile.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 345px;
}

.parallax1 {
    background-image: url(../img/parallax.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(255, 251, 247, 0.4);
    background-position: center center;
    padding: 7rem 0;
    background-blend-mode: lighten;
}

.parallax-mobile1 {
    background-image: url(../img/parallax-mobile.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(255, 251, 247, 0.4);
    background-position: center center;
    padding: 2rem 0;
    background-blend-mode: lighten;
}


.customer-voice {
    background: url(../img/customer-voice.png) no-repeat;
    border-bottom: 1px solid #FBD590;
}

.customer-voice .contents {
    text-align: left;
}

.customer-voice .contents .title-back {
    position: relative;
    top: -5px;
    left: -15px;
}

.customer-voice .contents .title {
    position: absolute;
    top: 10px;
    line-height: 1.5;
    margin-top: 1rem;
}

.customer-voice .contents .title span {
    font-size: 28px;
    font-family: 'groldlight';
}

.customer-voice .contents .main {
    border-bottom: 1px solid #4E5255;
    padding-top: 2.8rem;
    margin-bottom: 3px;
}

.customer-voice .contents .main-center {
    border-bottom: 1px solid #4E5255;
    margin-bottom: 3px;
}

.customer-voice .contents .main-bottom {
    border-bottom: 1px solid #4E5255;
}

/* .gift {
    border-top: 1px solid #FBD590;
} */
#media ul {
    margin: 2rem 0;
    padding-left: 0;
}

#media li {
    list-style-image: url("../img/media-style.svg");
    /* border-bottom: 1px solid #FBD590; */
    list-style-position: inside;
    max-width: 510px;
    margin: 0 auto;
    text-align: left;
    font-size: 13px;
    margin-bottom: .5rem;
}

#media li a {
    color: #4E5255;
}

#media .Item {
    position: relative;
}

#media .Item a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: #FBD590;
}

#media .Item:hover a:after {
    animation: underLine 1s ease;
}

.media-border {
    width: 200px;
    margin-top: 1.5rem;
    margin-bottom: -0.5rem;
}

.lineup {
    background: #FFEECE;
}

.lineup .shop-link {
    color: #4E5255;
}

.lineup .shop-link:hover {
    opacity: 0.5;
    transition: 1s;
}

.lineup .shopping {
    font-family: "游ゴシック";
    font-size: 10px;
    border-bottom: 1px solid #E64F2C;
}

.lineup .shopping span {
    color: #E64F2C;
}

.lineup .shopping .bold {
    font-size: 14px;
    font-weight: bold;
}

.lineup-line-top {
    margin-top: -4rem;
    margin-bottom: 1rem;
    margin-left: 50%;
    width: 1px;
    height: 100px;
    background-color: #FFFDF9;
}

.btn-custom-lineup {
    background: url(../img/button-back.png) bottom left -3% no-repeat #E64F2C;
    color: #FFFDF9;
    border-radius: 5px;
    padding: 10px 0;
    background-size: 55px;
    font-size: 12px;
    margin-bottom: 1rem;
}

.btn-custom-lineup:hover {
    color: #FFFDF9;
    opacity: 0.5;
    transition: 1s;
}

.btn-custom-lineup img {
    width: 23px;
    position: relative;
    top: -2px;
    margin-right: .5rem;
}

.item-description {
    font-size: 12px;
    line-height: 1.5;
}

.item-description span {
    font-size: 20px;
    font-family: "太ミンA101"
}

.item-description span span {
    font-size: 12px;
    font-family: "ヒラギノUD角ゴ W3 JIS2004";
}

.line .registered {
    position: relative;
    width: 90px;
    left: 50%;
    margin-left: -45px;
}

.line .registered img {
    width: 100%;
}

.line .registered p {
    position: absolute;
    top: 47%;
    left: 50%;
    -ms-transform: translate(-50%, -61%) rotate(2deg);
    -webkit-transform: translate(-50%, -61%) rotate(2deg);
    transform: translate(-50%, -61%) rotate(2deg);
    margin: 0;
    padding: 0;
    font-size: 13px;
    word-break: keep-all;
    text-align: center;
    line-height: 1.2em;
    font-weight: bold;
    color: #e64f2c;
    font-family: "秀英明朝 B";
}

.line .line-link img:hover {
    opacity: 0.5;
    transition: 1s;
}

.about {
    text-align: left;
    background: #FBD590;
}

.yawaraka-img {
    max-width: 220px;
    margin-bottom: 2rem;
}

footer {
    background: #FFFDF9;
    text-align: center;
    color: #FBD590;
    padding: 1rem 0 2rem;
}

.footer-menu a {
    font-size: 16px;
    display: block;
    color: #FBD590;
    /* border-bottom: 1px solid #FBD590; */
    line-height: 1.3;
    padding-bottom: 3px;
    margin-bottom: .5rem;
    font-family: "秀英明朝 M";
}

.footer-menu .Item a {
    position: relative;
    z-index: 1;
    font-size: 16px;
    display: block;
    color: #FBD590;
    line-height: 1.3;
    padding-bottom: 3px;
    margin-bottom: .5rem;
    font-family: "秀英明朝 M";
}

.footer-menu .Item a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: #FBD590;
    z-index: -1;
    /* transition: all 0.4s; */
}

.footer-menu .Item:hover a:after {
    animation: underLine 1s ease;
}

@keyframes underLine {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.footer-menu a span {
    font-size: 12px;
    font-family: 'groldlight';
    letter-spacing: 2px;
}

footer .list-group {
    margin-top: 1rem
}

footer .list-group li {
    list-style: none;
    font-size: 11px;
    margin-right: 15px
}

footer .list-group li a {
    display: block;
    color: #FBD590;
    font-family: "ヒラギノUD角ゴ W3 JIS2004";
}

footer a:hover {
    color: #FBD590;
}

.footer-logo {
    margin-bottom: 1.5rem;
    max-width: 230px;
}

.footer-sns {
    margin: 0 .5rem
}

.footer-sns:hover {
    opacity: 0.5;
    transition: 1s;
}

.overflow {
    width: 150%;
    margin-left: -25%;
}

.new-appearance {
    max-width: 110px;
}

.copyright {
    font-family: 'groldregular';
}

/*-----  swiper  -----*/
.swiper-container {
    width: 100%;
    height: auto;
}

.line-swiper {
    overflow: hidden;
}

/*-----  swiper  -----*/

.container {
    padding-right: 10px;
    padding-left: 10px;
}

#lineTop1,
#lineTop2 {

    stroke-dasharray: 106px;
    /* animation: lineTop 2s infinite; */
    animation-iteration-count: 1;
    margin-top: -4rem;
    margin-bottom: 2rem;
}

#lineBottom1,
#lineBottom2 {

    stroke-dasharray: 106px;
    /* animation: lineTop 2s infinite; */
    animation-iteration-count: 1;
    margin-top: 3rem;
    margin-bottom: -4rem;
}


@keyframes lineTop {

    0% {

        stroke-dashoffset: 106px;
    }


    100% {

        stroke-dashoffset: 0px;
    }

}

#sable .images img {
    max-width: 100%;
}

.se-block {
    display: block;
}

@media (min-width: 321px) {
    .container {
        padding-right: 18px;
        padding-left: 18px;
    }

    .se-block {
        display: none;
    }
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }

    .carousel {
        margin-top: 56px;
    }

    .yawaraka-img {
        max-width: 400px;
        margin-bottom: 0;
    }

    .line-sub-title {
        font-size: 23px;
    }
}

@media (min-width: 768px) {

    section {
        padding: 4rem 0;
    }

    .section-title {
        font-size: 27px;
    }

    .new {
        padding: 4rem 0;
    }

    p {
        font-size: 15px
    }

    .mobile-left {
        text-align: center;
    }

    .container {
        max-width: 720px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .border-section .img {
        padding: 3rem 3rem 2rem 3rem
    }

    .read-more {
        color: #FBD590;
        border: solid 1px #FBD590;
        border-radius: 20px;
        padding: 2px 15px 0;
        display: inline;
        font-size: 15px;
    }

    #menu {
        background: #FBD590;
    }

    #menu header {
        margin-top: 56px;
    }

    #menu .pc-menu {
        padding: 10rem 1rem;
    }

    #menu .pc-menu .link-item {
        color: #FFFDF9;
    }

    #menu .pc-menu .link-item:hover {
        color: #FFFDF9;
    }

    .carousel {
        margin-top: 56px;
        margin-bottom: 0;
    }

    .carousel .monde-selection {
        right: 120px;
        top: 50px;
        left: auto;
        height: 145px;
    }


    .line .container {
        /* border: 3px solid #FBD590;
border-radius: 10px; */
        padding: 2rem 1rem;
    }

    .new .section-title {
        font-size: 32px;
    }

    .img-description {
        font-size: 15px;
    }

    .item-description {
        font-size: 14px;
    }

    .item-description span {
        font-size: 26px;
    }

    .item-description span span {
        font-size: 15px;
    }

    .line .registered {
        width: 120px;
        margin-left: 0;
        margin-top: -2rem;
        top: 55px;
        left: 350px;
    }

    .line .registered p {
        font-size: 18px;
    }

    .btn-custom {
        background: url(../img/button-back.png) left -10px bottom -5px no-repeat #FBD590;
        color: #FFFDF9;
        border-radius: 5px;
        padding: 1rem;
        font-size: 18px;
    }

    .btn-custom-lineup {
        background: url(../img/button-back.png) bottom left -3% no-repeat #E64F2C;
        color: #FFFDF9;
        border-radius: 5px;
        padding: 1rem;
        font-size: 18px;
    }

    .btn-custom-lineup img {
        width: 30px;
    }

    .lineup .shopping {
        font-size: 14px;
    }

    .lineup .shopping .bold {
        font-size: 18px;
        font-weight: bold;
    }

    .anniversary-banner {
        margin-top: -2rem;
    }

    #lineTop1,
    #lineTop2 {

        stroke-dasharray: 198px;
        /* animation: lineTop 2s infinite; */
        animation-iteration-count: 1;
        margin-top: -4rem;
        margin-bottom: 2rem;
    }

    #lineBottom1,
    #lineBottom2 {

        stroke-dasharray: 198px;
        /* animation: lineTop 2s infinite; */
        animation-iteration-count: 1;
        margin-top: 3rem;
        margin-bottom: -4rem;
    }

    @keyframes lineTop {

        0% {

            stroke-dashoffset: 198px;
        }


        100% {

            stroke-dashoffset: 0px;
        }

    }

    .butter {
        background: url(../img/butter-back.jpg) no-repeat;
        background-size: cover;
    }

    .kinako {
        background: url(../img/kinako-back.jpg) no-repeat;
        background-size: cover;
    }

    .gannash {
        background: url(../img/gannash-back.jpg) no-repeat;
        background-size: cover;
    }

    .butter,
    .kinako,
    .gannash {
        padding: 7rem 0;
    }

    .discover-bottom {
        margin-top: 2rem;
    }

    .discover-top {
        margin-top: 2rem;
    }

    .lineup-line-top {
        margin-bottom: 3rem;
    }

    footer {
        padding: 5rem 0 2rem;
    }

    .new-appearance {
        max-width: 130px;
    }

    .media-border {
        width: 352px;
        margin-top: 2.5rem;
        margin-bottom: -3rem;
    }

    #media li {
        font-size: 16px;
    }

    #gift .img-description span {
        font-size: 16px;
    }

    #sable .images img {
        max-width: 160px;
    }
}

@media (min-width: 992px) {
    #menu header {
        display: block;
        margin-top: 56px;
    }

    .container {
        max-width: calc(100vw - 190px);
    }

    #menu {
        width: 100%;
        max-width: 68%;
        height: 100%;
        background-color: #FBD590;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        transform: translate(100%);
        transition: all .5s;
        overflow: hidden;
        opacity: 1;
    }

    #menu header {
        margin-top: 0;
    }

    #menu_btn {
        width: 75px;
        height: 75px;
        padding: 15px;
        background: #FFFDF9;
    }

    .carousel {
        border-bottom-right-radius: 2000px 700px;
        border-bottom-left-radius: 2000px 700px;
        margin-top: 0;
    }

    .title {
        font-size: 22px;
        margin-bottom: 1.5rem;
    }

    .mobile-header {
        display: none;
    }

    .mobile-footer {
        display: none;
    }

    .fixed-left {
        display: block;
    }

    .fixed-right {
        display: block;
    }

    .mobile-center {
        text-align: inherit;
    }

    .yawaraka-img {
        max-width: 100%;
    }

    #left {
        position: absolute;
        right: 27px;
        stroke-dasharray: 100px;
        animation: left1 .5s 1;
    }

    #left circle {
        fill: transparent;
        stroke: #4E5255;
        stroke-width: 1;
    }

    #right {
        position: absolute;
        right: 13px;
        stroke-dasharray: 100px;
        animation: right1 .5s 1;
    }

    #right circle {
        fill: transparent;
        stroke: #4E5255;
        stroke-width: 1;
    }

    #menu_btn:hover #left,
    .active #left {
        right: 19px;
        animation: left .5s 1;
    }

    #menu_btn:hover #right,
    .active #right {
        right: 19px;
        animation: right .5s 1;
    }

    @keyframes right1 {

        0% {
            right: 19px;
        }


        100% {
            right: 13px;
        }

    }

    @keyframes right {

        0% {
            right: 13px;
        }


        100% {
            right: 19px;
        }

    }

    @keyframes left1 {

        0% {
            right: 19px;
        }


        100% {
            right: 27px;
        }

    }

    @keyframes left {

        0% {
            right: 27px;
        }


        100% {
            right: 19px;
        }

    }

    #menu_btn span {
        position: relative;
        top: 30px;
        right: -2px;
        font-weight: bold;
    }

    .active span {
        right: 0px !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 980px;
    }

    .discover {
        padding: 0;
    }
}

/* 点滅 */
.blinking {
    -webkit-animation: blink 1.5s ease-in-out infinite alternate;
    -moz-animation: blink 1.5s ease-in-out infinite alternate;
    animation: blink 1.5s ease-in-out infinite alternate;
}

@keyframes blink {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}