/* CSS Document */


body {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 20px;
    line-height: 1.8em;
    letter-spacing: 1px;
    font-weight: 700;
    text-align: justify;
    text-justify: inter-ideograph;
    color: #6A3906;
    background-color: #FBF8EC;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 1em;
}

h3 {
    font-size: 185%;
    margin-bottom: 1em;
}


img {
    max-width: 100%;
    vertical-align: bottom;
}

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

.title03_sp {
    width: 80%;
    margin: 0 auto;
}

.wrapper {
    width: 1020px;
    margin: 0 auto;
    padding-bottom: 130px;
}

.maingrafic {
    width: 940px;
    margin: 0 auto;
    height: 568px;
}

.subpage .wrapper {
    width: 930px;
}

.relative {
    position: relative;
}

a img {
    transition: .3s;
}

a img:hover {
    opacity: 0.8;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.flex {
    display: flex;
    align-items: center;
    align-content: center;
}

.logo {
    margin: 40px 0;
}

.logo img {
    width: 440px;
}

.mgb130px {
    margin-bottom: 100px;
}

.mgb90px {
    margin-bottom: 90px;
}

.mgb1em {
    margin-bottom: 2em;
}

.mgb2em {
    margin-bottom: 2em;
}

.mgb3em {
    margin-bottom: 3em;
}


.block-left,
.block-right {
    width: 50%;
    padding: 15px;
}

footer {
    background-color: #E9E9E9;
    padding: 130px 0;
}

.section-story {
    margin-bottom: 130px;
    padding-bottom: 3px;
    background-image: url(../images/line.svg);
    background-position: center bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.section-product h3.bg-color {
    background-color: #F3CE15;
    display: inline-block;
}

.hanashi-box .hanashi-box01 {
    order: 3;
    width: 14%;
}

.hanashi-box .hanashi-box02 {
    order: 2;
    width: 71%;
    text-align: center;
    padding-top: 0.5em;

}

.hanashi-box02 img {
    width: 75%;
}


.dogillust {
    width: 130px;
    margin: 20px auto 0;
}

.hanashi-box .hanashi-box03 {
    order: 1;
    width: 15%;
    padding-top: 3em;
}

.flex-boxRL .block-left {
    order: 2;
}

.flex-boxRL .block-right {
    order: 1;
}


.menu-content ul li {
    margin-bottom: 1em;
}

.menu-content ul li.menu-logo {
    margin-bottom: 5em;
}

.pre-link {
    width: 15%;
    margin: 0 auto;
}

.mgb1 {
    margin-bottom: 1em;
}

.story-box {
    width: 980px;
    margin: 0 auto;
}

.product-box {
    width: 980px;
    margin: 0 auto;
}

.padding-left1em {
    padding-left: 1em;
}

.padding-right1em {
    padding-right: 1em;
}

.pc-only {
    display: inherit;
}

.sp-only {
    display: none;
}

.logo img.pc-only {
    display: inline;
}

.link-store {
    width: 35%;
    margin: 0 auto;
}

.footer_logo {
    width: 18%;
    margin: 0 auto;
}

/******フェードイン******/
.animation {
    opacity: 0;
    visibility: hidden;
    transition: 1s;
    transform: translateY(30px);
}

.animation.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/******フェードイン******/
/******メニュー******/
.menu-btn {
    position: fixed;
    top: 38px;
    right: 3%;
    display: flex;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #FCF8ED;
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 55px;
    border-radius: 3px;
    background-color: #80501F;
    position: absolute;
    transition: all 0.1s;
}

.menu-btn span:before {
    bottom: 11px;
}

.menu-btn span:after {
    top: 11px;
}

.menu-btn span {
    background-color: rgba(255, 255, 255, 0);
    /*メニューオープン時は真ん中の線を透明にする*/
}

#menu-btn-check:checked~.menu-btn span::before {
    bottom: 0;
    transform: rotate(25deg);
}

#menu-btn-check:checked~.menu-btn span::after {
    top: 0;
    transform: rotate(-25deg);
}

#menu-btn-check {
    display: none;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #FBF8EC;
}

.menu-content ul {
    padding: 70px 10px 0;
    display: table-cell;
    vertical-align: middle;
}

.menu-content ul li {
    list-style: none;
    text-align: center;
}

.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color: #80501F;
    text-decoration: none;
    padding: 10px 0px 10px 0;
    position: relative;
}


.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: -100%;
    left: 0;
    /*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #FBF8EC;
    transition: all 0.3s;
    display: table;
    /*アニメーション設定*/
}

#menu-btn-check:checked~.menu-content {
    top: 0;
    /*メニューを画面内へ*/
}

/******メニュー******/
/******アニメーション******/
.anim-box.poyoyon2 {
    opacity: 0;
}

.anim-box.poyoyon2.is-animated {
    animation: poyoyon2 1s ease-in-out 1 forwards;
}

@keyframes poyoyon2 {
    0% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }

    15% {
        transform: scale(0.98, 0.9) translate(0, 5px);
    }

    30% {
        transform: scale(1.02, 1.0) translate(0, 8px);
    }

    50% {
        transform: scale(0.98, 1.05) translate(0, -8px);
    }

    70% {
        transform: scale(1.0, 0.9) translate(0, 5px);
    }

    100% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }

    0% {
        opacity: 0;

    }

    40% {
        opacity: 1;

    }

    100% {
        opacity: 1;
    }
}

/******アニメーション******/

/******スライドショー******/
.slideshow {
    width: 100%;
    /* スライドショー幅（PC）*/
    list-style-type: none;
    position: relative;
}

.slideshow>li {
    opacity: 0;
    position: absolute;
    transition: opacity 1.5s ease-in-out;
    /*フェード時間・イージング*/
}

.slideshow>li.showSlide {
    opacity: 1;
}

.slideshow>li>img {
    width: 100%;
    height: auto;
}

.slideshow-sp {
    width: 100%;
    /* スライドショー幅（PC）*/
    list-style-type: none;
    position: relative;
}

.slideshow-sp>li {
    opacity: 0;
    position: absolute;
    transition: opacity 1.5s ease-in-out;
    /*フェード時間・イージング*/
}

.slideshow-sp>li.showSlide {
    opacity: 1;
}

.slideshow-sp>li>img {
    width: 100%;
    height: auto;
}

/* SP用メディアクエリ */
@media screen and (max-width:600px) {
    .slideshow {
        width: 100%;
        /* スライドショー幅（SP）*/
    }
}

/******スライドショー******/

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

    .maingrafic,
    .product-box,
    .story-box {
        width: 100%;
    }

    .maingrafic {
        height: 478px;
    }

    .footer_logo {
        width: 32%;
    }

    body {
        font-size: 16px;
    }

    h3 {
        font-size: 20px;
    }

    .hanashi-box02 img {
        width: 80%;
    }

    .hanashi-box01 img {
        width: 30%;
    }

    .hanashi-box03 img {
        width: 80%;
    }

    .mgb130px {
        margin-bottom: 60px;
    }

    .wrapper,
    .subpage .wrapper {
        width: 94%;
        padding-bottom: 60px;
    }

    .pre-link {
        width: 11%;
    }

    .section-story {
        margin-bottom: 130px;
    }

    .subpage-wrapper {
        padding: 15px;
    }
}

@media screen and (max-width: 480px) {
    body {
        font-size: 13px;
    }

    .pc-only {
        display: none;
    }

    .sp-only {
        display: inherit;
    }

    .flex {
        display: block;
    }

    .block-left,
    .block-right {
        width: 100%;
    }

    .hanashi-box.flex {
        display: flex;
    }

    .maingrafic {
        height: 680px;
    }

    .mgb130px {
        margin-bottom: 10px;
    }

    .section-story {
        margin-bottom: 40px;
    }

    .link-store {
        width: 60%;
        margin: 50px auto 0;
    }

    .footer_logo {
        width: 50%;
        margin: 0 auto;
    }

    footer {
        padding: 50px 0;
    }

    .logo {
        margin: 25px 20px;
        width: 65%;
    }

    .logo img {
        width: 100%;
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        width: 48px;
    }

    .menu-btn span:after {
        top: 9px;
    }

    .menu-btn span:before {
        bottom: 9px;
    }

    .menu-btn {
        top: 12px;
        right: 2%;
        width: 60px;
        height: 60px;
    }

    .menu-content li img {
        height: 21px;
    }

    .menu-content li.menu-logo img {
        height: 33px;
    }

    .maingrafic {
        position: relative;
        height: 100vh;
        margin-top: -80px;
    }

    .slideshow-sp>li {
        margin-top: 100px;
    }

    .scroll {
        position: absolute;
        bottom: 5%;
        right: 4%;
        width: 3%;
    }

    .hanashi-box03 img {
        width: 60%;
    }

    .hanashi-box-sp {
        background-image: url(../images/line_sp.svg);
        background-position: center bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        padding-bottom: 40px;
        margin-bottom: 0px;
    }

    h3 {
        text-align: center;
        font-size: 23px;
        margin-bottom: 1.5em;
    }

    .dogillust02 {
        margin-left: 12%;
    }

    .title03_sp img {
        width: 95%;
        margin: 0 auto;
    }

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

    .block-left,
    .block-right {
        overflow: inherit;
        margin-bottom: 0px;
    }

    .block-left img,
    .block-right img {
        margin-top: 1em;
    }

    .section-story {
        background-image: url(../images/line_sp.svg);
    }

    .logo img.pc-only {
        display: none;
    }

    .pre-link {
        width: 20%;
    }

    /*スクロールアニメーション*/

    .animation_scroll {
        position: absolute;
        right: 5%;
        bottom: 2.4rem;
        z-index: 2;
        padding-top: 8.2rem;
    }

    .animation_scroll img {
        width: 1.4rem;
    }

    .animation_scroll::after {
        content: '';
        position: absolute;
        top: 61px;
        left: -2px;
        right: 0;
        margin: auto;
        width: 1px;
        height: 3.8rem;
        background: #603915;
        animation: scroll 2s cubic-bezier(1, 0, 0, 1) infinite;
    }

    @keyframes scroll {
        0% {
            transform: scale(1, 0);
            transform-origin: 0 0;
        }

        30% {
            transform: scale(1, 1);
            transform-origin: 0 0;
        }

        70% {
            transform: scale(1, 1);
            transform-origin: 0 100%;
        }

        100% {
            transform: scale(1, 0);
            transform-origin: 0 100%;
        }
    }

}