/* ==============================
  共通
============================== */
html {
    font-size: 62.5%;
}
body {
    background-color: #E2D133;

/*ゴシック*/

    font-family: "Century Gothic","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
}

img {
    width: 100%;

    vertical-align: bottom;
}

.pc {
    display: block;
}
.sp {
    display: none;
}
@media print, screen and (max-width: 768px) {
    body.active {
        overflow: hidden;

        height: 100%;
    }

    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
}

:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.h1-anime {
    transition: -webkit-clip-path 1.6s cubic-bezier(0.16,1,0.3,1);
    transition:         clip-path 1.6s cubic-bezier(0.16,1,0.3,1);
    transition:         clip-path 1.6s cubic-bezier(0.16,1,0.3,1),-webkit-clip-path 1.6s cubic-bezier(0.16,1,0.3,1);

    -webkit-clip-path: polygon(0 0,0 0,0 100%,0% 100%);
            clip-path: polygon(0 0,0 0,0 100%,0% 100%);
    ;
}
.h1-anime.inview {
    -webkit-clip-path: polygon(0 0,100% 0%,100% 100%,0% 100%);
            clip-path: polygon(0 0,100% 0%,100% 100%,0% 100%);
}

.foam {
    animation: fuwafuwa 2s infinite;
}

@keyframes fuwafuwa {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0px);
    }
}
@media print, screen and (max-width: 768px) {
    @keyframes fuwafuwa {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5vw);
        }
        100% {
            transform: translateY(0);
        }
    }
}

/* ==============================
  ヘッダー
============================== */
header {
    position: absolute;
    z-index: 1;

    width: 100%;
}

/* header .logos {
    position: relative;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
} */
/* ロゴ */
header h1 {
    position: absolute;
    top: -16.65vw;
    left: -16.65vw;

    width: 33.3vw;
    max-width: 640px;
    height: 33.3vw;

    border-radius: 50%;
    background-color: #FFFFFF;
}
header h1 img {
    position: absolute;
    right: 7.5vw;
    bottom: 6.5vw;

    width: 16.4%;
}

/* メニューボタン */
/* header button {

    width: 3.75%;
    max-width: 72px;

    cursor: pointer;

    border: none;
    background: none;
}
header button .btn-close {
    display: none;
}

header button.active .btn-open {
    display: none;
}
header button.active .btn-close {
    display: block;
} */

/* @media (min-width: 769px) {
    header {
        transition: top 0.6s ease-in-out;
    }
} */
@media print, screen and (max-width: 768px) {
    header {
        z-index: 100;
    }

    header .logos {
        padding: 1.6vh 0 0 1.6vh;
        padding: 1.6svh 0 0 1.6svh;
    }
    /* ロゴ */
    header h1 {
        display: none;
    }
    header #nav-menu h1 {
        position: relative;
        top: 0;
        left: 0;

        box-sizing: border-box;
        width: 100%;
        height: 14.58vh;
        height: 14.58svh;
        padding: 4.07vh 0 0;
        padding: 4.07svh 0 0;

        border-radius: 0;
    }
    header #nav-menu h1 a {
        display: block;

        width: 24.4vh;
        width: 24.4svh;
        margin: 0 5.2vh 0 auto;
        margin: 0 5.2svh 0 auto;
    }
    header #nav-menu h1 img {
        position: relative;
        right: 0;
        bottom: 0;

        width: 100%;
    }

    /* メニューボタン */
    header button {
        position: fixed;
        z-index: 10;

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

        width: 10.2vh;
        width: 10.2svh;
        height: 10.2vh;
        height: 10.2svh;

        border: none;
        border-radius: 50%;
        background-color: #FFFFFF;
    }
    header button.active {
        background-color: #E2D133;
    }
    header button img {
        width: 4.1vh;
        width: 4.1svh;
    }
    /* ボタン内の画像が360度回転するアニメーション */
    header button.active img {
        animation: rotate-image 0.6s linear;
    }

    @keyframes rotate-image {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    /* ボタン内の画像が360度逆回転するアニメーション */
    header button:not(.active) img {
        animation: rotate-image-reverse 0.6s linear 1s; /* 1秒の遅延を追加 */
    }

    @keyframes rotate-image-reverse {
        from {
            transform: rotate(360deg);
        }
        to {
            transform: rotate(0deg);
        }
    }
    header button .btn-open {
        display: block;
    }
    header button.active .btn-open {
        display: none;
    }
    header button .btn-close {
        display: none;
    }
    header button.active .btn-close {
        display: block;
    }
}

/* メニュー */
#nav-menu {
    position: absolute;
    z-index: 1;
    top: 2vw;
    right: 7.7vw;

    width: 40.8%;
    max-width: 784px;
    margin: 0 auto;
}

#nav-menu .menu-foam01,
#nav-menu .menu-foam02,
#nav-menu .menu-foam03 {
    display: none;
}

#nav-menu ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#nav-menu li {
}
#nav-menu li:last-of-type {
}
#nav-menu li.menu01 {
    width: 6.25%;
    max-width: 49px;
}
#nav-menu li.menu02 {
    width: 16%;
    max-width: 126px;
}
#nav-menu li.menu03 {
    width: 11%;
    max-width: 87px;
}
#nav-menu li.menu04 {
    width: 13.9%;
    max-width: 109px;
}
#nav-menu li.menu05 {
    width: 16.07%;
    max-width: 126px;
}
#nav-menu li.menu06 {
    width: 13.3%;
    max-width: 105px;
}
#nav-menu li.menu07 {
    display: none;
}
#nav-menu li img {
    vertical-align: middle;
}
#nav-menu li a:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}
@media print, screen and (max-width: 768px) {
    /* メニュー */
    /* #nav-menu {
        top: 0;
        right: 0;

        display: none;

        width: 100vw;
        height: 100vh;
        height: 100svh;

        background-color: #E2D133;
    } */
    #nav-menu {
        position: fixed;
        z-index: 1; /*常にz-indexを設定 */
        top: 0;
        left: 0;

        overflow: hidden;

        width: 100%;  /* 常に100%に設定 */
        height: 100vh; /* 常に100vhに設定 */

        transform: scale(0); /* 初期状態ではスケールを0に設定 */
        transform-origin: top left; /* 変形の原点を左上に設定 */

        background-color: #E2D133;
    }
    #nav-menu.visible {
        transform: scale(1); /* visibleクラスがあるときはスケールを1に */
    }


    #nav-menu .menu-foam01,
    #nav-menu .menu-foam02,
    #nav-menu .menu-foam03 {
        display: block;

        transform: translateY(20px);

        opacity: 0;
    }
    #nav-menu .menu-foam01 {
        position: absolute;
        top: 21.8vh;
        top: 21.8svh;
        right: 2.2vh;
        right: 2.2svh;

        width: 8.7vh;
        width: 8.7svh;
    }
    #nav-menu .menu-foam02 {
        position: absolute;
        top: 42.1vh;
        top: 42.1svh;
        left: 0;

        width: 19.02vh;
        width: 19.02svh;
    }
    #nav-menu .menu-foam03 {
        position: absolute;
        right: 0;
        bottom: 5.2vh;
        bottom: 5.2svh;

        width: 11.06vh;
        width: 11.06svh;
    }
    #nav-menu ul {
        flex-direction: column;

        padding-top: 19.1vh;
        padding-top: 19.1svh;

        background-image: url(https://en.dailyservice.co.jp/craftbeer/sp-images/bg-foam.svg);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: 46.712vw auto;
    }
    #nav-menu li {
        margin-bottom: 7.29vh;
        margin-bottom: 7.29svh;

        transform: translateY(20px);

        opacity: 0;
    }
    #nav-menu li:last-of-type {
        margin-bottom: 0;
    }
    #nav-menu li.menu01 {
        display: none;
    }
    #nav-menu li.menu02 {
        width: 16.19vh;
        width: 16.19svh;
        max-width: 16.19vh;
    }
    #nav-menu li.menu03 {
        width: 11.2vh;
        width: 11.2svh;
        max-width: 11.2vh;
    }
    #nav-menu li.menu04 {
        width: 13.84vh;
        width: 13.84svh;
        max-width: 13.84vh;
    }
    #nav-menu li.menu05 {
        width: 16.14vh;
        width: 16.14svh;
        max-width: 16.14vh;
    }
    #nav-menu li.menu06 {
        width: 13.4vh;
        width: 13.4svh;
        max-width: 13.4vh;
    }
    #nav-menu li.menu07 {
        display: block;

        width: 20.19vh;
        width: 20.19svh;
        max-width: 20.19vh;
    }
    #nav-menu li a:hover img,
    #nav-menu li a:active img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(24%) hue-rotate(208deg) brightness(105%) contrast(106%);
    }

    #nav-menu .instagram {
        display: none;
    }
}

/* ==============================
  トップ
============================== */
#top {
    position: relative;

    background-repeat: no-repeat;
    background-size: 100% auto;
}
#top .top-wrapper {
    position: relative;

    overflow: hidden;

    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 5.4% 0 2%;
}

#top h1 {
    position: absolute;
    z-index: 1;
    top: 25.8%;
    right: 0;
    bottom: 0;
    left: 0;

    width: 20.1%;
    margin: auto;
}

#top .foam01 {
    position: absolute;
    right: 191.52px;
    right: 9.75vw;
    bottom: -85.48px;
    bottom: -4.45vw;

    width: 10.33vw;
    max-width: 198.48px;
}
#top .foam02 {
    position: absolute;
    right: 116.65px;
    right: 6.07vw;
    bottom: -193.35px;
    bottom: -10.07vw;

    width: 7.3vw;
    max-width: 140.35px;
}

#top .instagram {
    position: fixed;
    z-index: 200;
    top: 19.5vw;
    right: -10vw;

    width: 20vw;
    max-width: 384px;
    height: 20vw;

    border-radius: 50%;
    background-color: #FFFFFF;
}
#top .instagram img {
    position: absolute;
    top: 20.4%;
    left: 24.5%;

    width: 13.3%;
}
@media print, screen and (max-width: 768px) {
    #top {
    }
    #top .top-wrapper {
        position: relative;

        width: 100%;
        height: 100%;
        padding: 2.6vh 0;
        padding: 2.6svh 0;
    }

    #top h1 {
        top: 27.47vh;
        top: 27.47svh;
        right: 0;
        bottom: 0;
        left: 0;

        width: 32.25vh;
        width: 32.25svh;
        margin: auto;
    }

    #top .foam01 {
        position: absolute;
        right: 0;
        bottom: -4.71vh;
        bottom: -4.71svh;

        width: 14.79vh;
        width: 14.79svh;
    }
    #top .foam02 {
        position: absolute;
        right: 9.34vh;
        right: 9.34svh;
        bottom: -11.15svh;
        bottom: -11.15ssvh;

        width: 10.96vh;
        width: 10.96svh;
    }

    #top .instagram {
        display: none;
    }
}
/* スライド */
#top .slide {
    overflow: hidden;

    width: 92.5%;
    max-width: 1440px;
    margin: 0 auto;

    border-radius: 2.6vw;
}

#top .slick-slide {
    position: relative;
}

#top .slide .slide-img {
    position: relative;
    z-index: 0;
}

/* Dots */
.custom-dots {
    position: absolute;
    z-index: 1;
    bottom: 6.1%;

    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;

    text-align: center;
}
.custom-dots li {
    position: relative;

    display: inline-block;

    width: clamp(2.1vw, 0.8vw, 16px);
    width: 0.8vw;
    max-width: 16px;
    height: clamp(2.1vw, 0.8vw, 16px);
    height: 0.8vw;
    max-height: 16px;
    margin: 0 clamp(1.6vw, 0.625vw, 12px);
    margin: 0 max(0.625vw, 12px);
    padding: 0;

    cursor: pointer;
}
.custom-dots li button {
    display: block;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;

    line-height: 0;
}
.custom-dots li button:hover,
.custom-dots li button:focus {
    outline: none;
}
.custom-dots li button:hover:before,
.custom-dots li button:focus:before {
    opacity: 1;
}
.custom-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: "";
    text-align: center;

    border-radius: 50%;
    background-color: #FFFFFF;
}
.custom-dots li.slick-active button:before {
    background-color: #E2D133;
}
@media print, screen and (max-width: 768px) {
    /* スライド */
    #top .slide {
        overflow: hidden;

        width: 89.3vw;
        max-width: 89.3vw;
        height: 94.79vh;
        height: 94.79svh;

        border-radius: 13.3vw;
    }


    #top .slide .slide-img {
        position: relative;

        height: 94.79vh;
        height: 94.79svh;

        border-radius: 0;
    }
    #top .slide .slide-img img {
        position: absolute;
        top: 50%;
        left: 50%;

        width: 100%;
        height: 100%;

        transform: translate(-50%, -50%);
    }

    /* Dots */
    .custom-dots {
        font-size: 1.8vw;
    }

    .custom-dots li {
        width: 2.1vw;
        height: 2.1vw;
        margin: 0 1.6vw;
    }
}

/* ==============================
  Concept
============================== */
#concept {
    position: relative;

    margin-bottom: 13.1%;
    padding: 8.3% 0 0;
}

#concept .inner {
    display: flex;
    justify-content: space-between;

    width: 80.3%;
    max-width: 1440px;
    max-width: 1542px;
    margin: 0 auto;
}
#concept h1 {
    width: 36.3%;
    width: 33.9%;
    max-width: 524px;
    margin-left: 3.3%;
}

#concept .text-wrapper {
    width: 47.5%;
    width: 47.6%;
    max-width: 684px;
    max-width: 735px;
}
#concept .text-wrapper p {
    font-size: 2.4rem;
    font-size: clamp(1.4rem, 1.45vw, 2.8rem);
    font-weight: bold;
    line-height: 2;
}
#concept .text-wrapper p + p {
    margin-top: 2em;
}

#concept .concept-img {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 47.81%;
    max-width: 918px;
}
@media print, screen and (max-width: 768px) {
    #concept {
        margin-bottom: 0;
        padding: 10.6vw 0;
    }

    #concept .inner {
        display: block;

        width: 82.9vw;
    }
    #concept h1 {
        width: 64vw;
        margin-bottom: 10.6vw;
        margin-left: 0;
    }

    #concept .text-wrapper {
        width: 100%;
    }
    #concept .text-wrapper p {
        line-height: 1.7;
    }
    #concept .text-wrapper p + p {
        margin-top: 2em;
    }

    #concept .concept-img {
        display: none;
    }
}

/* ==============================
  About
============================== */
#about {
    padding: 8.3% 0 8%;

    background-color: #FFFFFF;
}

#about h1 {
    width: 21.8%;
    max-width: 419px;
    margin: 0 auto;
}

#about h1 + p {
    margin: 3.9% 0 7.6%;

    text-align: center;

    font-size: clamp(1.4rem, 1.25vw, 2.4rem);
    line-height: 2;
}

#about .about-img {
    width: 96%;
    max-width: 1843.2px;
    margin: 0 auto;
}
@media print, screen and (max-width: 768px) {
    #about {
        padding: 10.6vw 0 4.4vw;
    }

    #about h1 {
        width: 51.46vw;
        margin: 0 0 8.5vw 8.5vw;
    }

    #about h1 + p {
        width: 81vw;
        margin: 0 0 0 8.5vw;

        text-align: left;
        text-align: justify; /* 両端揃え */
        text-justify: inter-ideograph; /* 両端揃えの種類 */

        line-height: 2.2;
    }
}

/* ==============================
  History
============================== */
#history {
    position: relative;

    padding: 8.3% 0 8%;

    background-image: url(https://en.dailyservice.co.jp/craftbeer/images/bg-foam.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 28.5vw auto;
}

#history .foam03 {
    position: absolute;
    top: 0;
    left: 3.4vw;

    width: 19.96vw;
    max-width: 383.25px;
}
#history .foam04 {
    position: absolute;
    top: 11.7vw;
    left: 9.8vw;

    width: 5.9vw;
    max-width: 113.87px;
}
#history .foam05 {
    position: absolute;
    top: 883px;
    top: 45.9vw;
    right: 0;

    width: 10vw;
    max-width: 192px;
}
#history .foam06 {
    position: absolute;
    top: 1186px;
    top: 61.7vw;
    right: 0;

    width: 5.5vw;
    max-width: 51.8px;
}
#history .foam07 {
    position: absolute;
    bottom: 379.1px;
    bottom: 19.74vw;
    left: 0;

    width: 12.07vw;
    max-width: 231.9px;
}
#history .foam08 {
    position: absolute;
    bottom: 150.31px;
    bottom: 7.82vw;
    left: 419px;
    left: 21.8vw;

    width: 14.61vw;
    max-width: 280.69px;
}
#history .foam09 {
    position: absolute;
    bottom: 86.94px;
    bottom: 4.52vw;
    left: 647px;
    left: 33.69vw;

    width: 6.87vw;
    max-width: 132.06px;
}

#history h1 {
    width: 21.7%;
    max-width: 418px;
    margin: 0 auto;
}

.timeline {
    position: relative;

    width: 100%;
    margin: 3.2% auto 0;
    padding: 0 0 3.6%;
}
/* Central line */
.timeline::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 2px;
    height: 100%;
    margin: 0 auto;

    content: "";

    background-color: #000000;
}

.history-wrap {
    display: grid;

    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content; /* 各行の高さをコンテンツの高さに合わせる */
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.history-wrap.wrap01 {
    margin-bottom: 6.25%;
}
.history-wrap.wrap02 {
    margin-bottom: 7.65%;
}
.history-wrap.wrap03 {
    margin-bottom: 7.39%;
}
.history-wrap.wrap04 {
    margin-bottom: 6.45%;
}
.history-wrap.wrap05 {
    margin-bottom: 7.81%;
}
.history-wrap.wrap06 {
    margin-bottom: 6.19%;
}

.div1 {
    margin-bottom: 8.3%;

    grid-area: 1 / 1 / 2 / 2;
}
.div2 {
    grid-area: 2 / 1 / 3 / 2;
}
.div3 {
    grid-area: 1 / 2 / 3 / 3;
}
/* 左 */
.div4,
.div6,
.div8,
.div10 {
    grid-area: 1 / 1 / 2 / 2;
}
/* 右 */
.div5,
.div7,
.div9,
.div11,
.div12 {
    grid-area: 1 / 2 / 2 / 3;
}

#history .history-box.left {
    margin-right: 0;
    margin-left: auto;
}

#history .history-box {
    position: relative;

    width: 72.5%;
    max-width: 696px;
}

#history .history-box .content {
    align-self: center;
}
#history .history-box.right .content h5,
#history .history-box.right .content h6,
#history .history-box.right .content p {
    padding-left: 10.625%;
}
#history .history-box .content h5 {
    position: relative;

    padding-bottom: 1.4%;

    letter-spacing: 0.072em;

    color: #FFFFFF;
    border-bottom: 2px solid #000000;

    font-size: clamp(2.4rem, 2.34vw, 4.5rem);
    font-weight: bold;
}
#history .history-box .content h5::after {
    position: absolute;
    right: -4px;
    bottom: -5px;

    display: block;

    width: 8px;
    height: 8px;

    content: "";

    border-radius: 50%;
    background-color: #000000;
}
#history .history-box.right .content h5::after {
    right: 0;
    left: -4px;
}
#history .history-box .content h6 {
    padding: 2% 0;

    letter-spacing: 0.032em;

    font-size: clamp(1.6rem, 1.66vw, 3.2rem);
    font-weight: bold;
}
#history .history-box .content p {
    width: 83.4%;

    text-align: justify;
    text-justify: inter-ideograph;
    letter-spacing: 0.024em;

    font-size: clamp(1.2rem, 1.25vw, 2.4rem);
    line-height: 1.3;
}

/* HISTORY 画像 */
#history .image-box {
    position: relative;

    align-self: center;

    width: 60.52%;
    max-width: 581px;
}
#history .image-box.right {
    margin-right: auto;
    margin-left: 10.6%;
}
#history .image-box.left {
    margin-right: 11.3%;
    margin-left: auto;
}
#history .image-box .content {
    overflow: hidden;

    border-radius: 1.04vw;
    background-color: #FFFFFF;
    ;
}

@media print, screen and (max-width: 768px) {
    #history {
        padding: 10.6vw 0;

        background-image: url(https://en.dailyservice.co.jp/craftbeer/sp-images/bg-foam.svg);
        background-size: 46.712vw auto;
    }
    #history::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 4.2vw;

        display: block;

        width: 1px;
        height: 100%;

        content: "";

        background-color: #000000;
    }
    #history .foam {
        z-index: 1;
    }
    #history .foam03 {
        top: 20vw;
        right: 5.31vw;
        left: auto;

        width: 17.352vw;
    }
    #history .foam04 {
        top: 165.8vw;
        right: 0;
        left: auto;

        width: 20.8vw;
    }
    #history .foam05 {
        top: 423.9vw;
        right: 0;

        width: 23.2vw;
    }
    #history .foam06 {
        top: 603.5vw;
        right: 0;

        width: 16.2vw;
    }
    #history .foam07,
    #history .foam08,
    #history .foam09 {
        display: none;
    }

    #history h1 {
        width: 51.2vw;
        margin: 0 0 0 8.5vw;
    }

    .timeline {
        margin: 10.1vw auto 0;
        padding: 0;
    }
    /* Central line */
    .timeline::before {
        display: none;
    }

    .history-wrap {
        display: flex;
        flex-direction: column;
    }
    .history-wrap.wrap01,
    .history-wrap.wrap02,
    .history-wrap.wrap03,
    .history-wrap.wrap04 {
        margin-bottom: 6.4vw;
    }

    .div1 {
        margin-bottom: 4.2vw;
    }
    .div2 {
        margin-bottom: 6.4vw;
    }
    .div3 {
    }
    .div4 {
        order: 2;
    }
    .div5 {
        order: 1;

        margin-bottom: 6.4vw;
    }
    .div6 {
        margin-bottom: 6.4vw;
    }
    .div7 {
    }
    .div8 {
        order: 2;
    }
    .div9 {
        order: 1;

        margin-bottom: 6.4vw;
    }
    .div10 {
        margin-bottom: 6.4vw;
    }
    .div11 {
    }
    .div12 {
        order: 1;

        margin-bottom: 6.4vw;
    }
    .div13 {
        order: 2;
    }
    .div14 {
        margin-bottom: 6.4vw;
    }
    .div15 {
    }


    #history .history-box.left,
    #history .history-box.right {
        margin-right: auto;
        margin-left: 4.2vw;
    }

    #history .history-box {
        width: 86.6vw;
    }

    #history .history-box .content h5,
    #history .history-box .content h6,
    #history .history-box .content p,
    #history .history-box.right .content h5,
    #history .history-box.right .content h6,
    #history .history-box.right .content p {
        padding-left: 4.2vw;
    }
    #history .history-box .content h5 {
        position: relative;

        padding-bottom: 2.6vw;

        letter-spacing: 0.072em;

        border-bottom: 1px solid #000000;
    }
    #history .history-box .content h5::after {
        position: absolute;
        right: auto;
        bottom: -0.55vw;
        left: -0.34vw;

        display: block;

        width: 1.08vw;
        height: 1.08vw;

        content: "";

        background-color: #000000;
    }
    #history .history-box.right .content h5::after {
        right: 0;
        left: -0.34vw;
    }
    #history .history-box .content h6 {
        padding-top: 2vw;
        padding-bottom: 2.8vw;

        letter-spacing: 0.032em;

        line-height: 1.25;
    }
    #history .history-box .content p {
        width: 82.4vw;

        letter-spacing: 0.024em;
    }
    #history .history-box .white-box {
        width: 88.2vw;
        margin-top: 0;
        padding: 2.9vw 3.2vw;

        border-radius: 2.6vw;
    }
    #history .history-box .white-box::before {
        position: absolute;
        top: -4vw;

        content: "";

        border-right: 2.7vw solid transparent;
        border-bottom: 5.4vw solid #FFFFFF;
        border-left: 2.7vw solid transparent;
    }
    #history .history-box.left .white-box,
    #history .history-box.right .white-box {
        margin-left: 1.6vw;
    }
    #history .history-box .white-box  p {
        letter-spacing: 0.012em;

        line-height: 1.1;
    }

    /* HISTORY 画像 */
    #history .image-box {
        width: 85.6vw;
    }
    #history .image-box.left,
    #history .image-box.right {
        margin-right: auto;
        margin-left: 8.5vw;
    }
    #history .image-box .content {
        overflow: hidden;

        background-color: #FFFFFF;
    }
    #history .image-box .content {
        border-radius: 2.6vw;
    }
}

/* ==============================
  Product
============================== */
/* #our_beer {
    padding: 8.3% 0 9.7%;

    background-color: #FFFFFF;
}
#our_beer .inner {
    width: 80.83%;
    max-width: 1552px;
    margin: 0 auto;
}

#our_beer h1 {
    width: 26.9%;
    max-width: 418px;
    margin: 0 auto 6.6%;
}

#our_beer p {
    margin: 3% 0 0;

    text-align: center;
    letter-spacing: 0.036em;

    font-size: clamp(1.2rem, 1.25vw, 2.4rem);
    line-height: 2;
}
@media print, screen and (max-width: 768px) {
    #our_beer {
        padding: 10.6vw 0;
    }

    #our_beer .inner {
        width: 82.6vw;
    }

    #our_beer h1 {
        width: 51.2vw;
        margin: 0 0 6.4vw;
    }
    #our_beer h1 img {
        width: 100%;
    }

    #our_beer .our_beer-img {
        overflow: hidden;

        margin-bottom: 6.4vw;

        border-radius: 2.6vw;
    }
    #our_beer p {
        text-align: left;

        line-height: 1.3;
    }
} */
#our_beer {
    padding: 5.1% 0 8.8%;

    background-color: #FFFFFF;
}
#our_beer .inner {
    position: relative;
}
#our_beer .title-wrap {
    position: absolute;
    top: 3vw;
    left: 0;

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

    width: 46.35%;

    background-color: rgba(226, 209, 51, 0.95);

    aspect-ratio: 89 / 26;
}
#our_beer h1 {
    width: 53.9%;
    max-width: 418px;
}
#our_beer .our_beer-img {
    width: 76.4%;
    margin: 0 0 7% auto;
}

#our_beer .our_beer-box {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#our_beer .our_beer-box.left {
    justify-content: flex-end;
}
#our_beer .our_beer-box + .our_beer-box {
    margin-top: 7.8%;
}

#our_beer .our_beer-box .our_beer-image {
    width: 56.25%;
}
#our_beer .our_beer-box.left .our_beer-image {
    order: 2;
}

#our_beer .our_beer-box .our_beer-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 38.2%;
    margin-left: 5.4%;
}
#our_beer .our_beer-box.left .our_beer-text {
    order: 1;

    width: 28.64%;

/* margin-left: 0;
    margin-right: 2.1%; */
    margin: 0 auto;
}

#our_beer .our_beer-box .our_beer-text h4 {
    position: relative;
}
#our_beer .our_beer-box.no01 .our_beer-text h4 {
    left: -24.5%;

    width: 112.9%;
}
#our_beer .our_beer-box.no02 .our_beer-text h4 {
    left: 0;

    width: 100%;
}
#our_beer .our_beer-box.no03 .our_beer-text h4 {
    left: -25.1%;

    width: 106.1%;
}

#our_beer .our_beer-box .our_beer-text p {
    padding: 8.5% 0 9.8%;

    letter-spacing: 0.015em;

    font-size: clamp(1.2rem, 1.25vw, 2.4rem);
    line-height: 1.3;
}
#our_beer .our_beer-box .our_beer-text p.detail {
    padding: 0;

    letter-spacing: 0.005em;

    font-size: clamp(1.2rem, 1.04vw, 2.0rem);
    line-height: 1.6;
}
@media print, screen and (max-width: 768px) {
    #our_beer {
        padding: 10.6vw 0 0;
    }
    #our_beer .title-wrap {
        position: relative;
        top: 0;

        display: block;

        width: 82.6vw;
        margin: 0 auto 6.4vw;

        background: none;

        aspect-ratio: unset;
    }
    #our_beer h1 {
        width: 51.2vw;
        max-width: 51.2vw;
    }
    #our_beer .our_beer-img {
        width: 82.6vw;
        margin: 0 auto 6.6vw;
    }

    #our_beer .our_beer-box {
        flex-direction: column;

        padding-top: 21.8vw;
    }
    #our_beer .our_beer-box.left {
        justify-content: flex-start;
    }
    #our_beer .our_beer-box + .our_beer-box {
        margin-top: 0;
    }

    #our_beer .our_beer-box .our_beer-image {
        overflow: hidden;

        width: 82.6vw;

        border-radius: 2.6vw;
    }
    #our_beer .our_beer-box.left .our_beer-image {
        order: 1;
    }

    #our_beer .our_beer-box .our_beer-text,
    #our_beer .our_beer-box.left .our_beer-text {
        justify-content: center;

        width: 82.6vw;
        margin: 6.4vw auto 0;
    }
    #our_beer .our_beer-box.left .our_beer-text {
        order: 2;

        margin: 6.4vw auto 0;
    }

    #our_beer .our_beer-box.no01 {
        padding-top: 33.86vw;

        background-color: #DEAE35;
    }
    #our_beer .our_beer-box.no01 .line_up {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;

        width: 46.712vw;
        margin: 0 auto;
    }
    #our_beer .our_beer-box.no02 {
        background-color: #45B035;
    }
    #our_beer .our_beer-box.no03 {
        background-color: #EA5504;
    }

    #our_beer .our_beer-box .our_beer-text h4 {
        position: absolute;
        right: 0;
        left: 0;

        margin: 0 auto;
    }
    #our_beer .our_beer-box.no01 .our_beer-text h4 {
        top: 20.8vw;
        /* left: 11.7vw; */
        left: 0;

        width: 71.2vw;
    }
    #our_beer .our_beer-box.no02 .our_beer-text h4 {
        top: 8.8vw;
        /* left: 11.7vw; */
        left: 0;

        width: 54.15vw;
    }
    #our_beer .our_beer-box.no03 .our_beer-text h4 {
        top: 8.8vw;
        /* left: 11.7vw; */
        left: 0;

        width: 66.9vw;
    }

    #our_beer .our_beer-box .our_beer-text p {
        padding: 8.5% 0 9.8%;
        padding: 0 2.9vw 6.4vw;
    }
    #our_beer .our_beer-box .our_beer-text p.detail {
        padding: 0;
        padding: 6.9vw 2.9vw 9.6vw;

        border-top: 1px solid #000000;
    }
}

/* ==============================
  ACCESS
============================== */
#access {
    position: relative;

    padding: 8.3% 0 6.8%;

    background-image: url(https://en.dailyservice.co.jp/craftbeer/images/bg-foam.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 28.5vw auto;
}
#access .foam10 {
    position: absolute;
    top: -5.5vw;
    right: 1.8vw;

    width: 19.24vw;
    max-width: 369.58px;
}
#access .foam11 {
    position: absolute;
    bottom: 4.5vw;
    left: 1.5vw;

    width: 14.61vw;
    max-width: 280.69px;
}
#access .foam12 {
    position: absolute;
    bottom: 2.9vw;
    left: 12.34vw;

    width: 6.61vw;
    max-width: 127.04px;
}
#access .access-wrapper {
    width: 77.9%;
    max-width: 1496px;
    margin: 0 auto;
}
#access h1 {
    width: 31.4%;
    max-width: 470px;
    margin: 0 auto 5.6%;;
}

#access .map-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 5.4%;
}
#access .map-wrapper iframe,
#access .map-wrapper iframe + picture {
    width: 48.12%;
    height: auto;

    aspect-ratio: 9 / 8;
}
#access .address {
    text-align: center;

    font-size: clamp(1.2rem, 1.66vw, 3.2rem);
    font-weight: bold;
}
#access .address p + p {
    margin-top: 1em;
}
@media print, screen and (max-width: 768px) {
    #access {
        padding: 10.6vw 0;

/* background-image: url(https://en.dailyservice.co.jp/craftbeer/sp-images/bg-foam.svg);
        background-position: right top;
        background-size: 46.712vw auto; */

        background: none;
    }
    #access .foam10 {
        position: absolute;
        top: 12.8vw;
        right: 2.9vw;

        width: 10.95vw;
    }
    #access .foam11,
    #access .foam12 {
        display: none;
    }
    #access .access-wrapper {
        width: 82.94vw;
    }
    #access h1 {
        width: 57.6vw;
        margin: 0 0 6.4vw;
    }
    #access h1 img {
        width: 57.6vw;
    }

    #access .map-wrapper {
        display: block;

        margin-bottom: 4.1vw;
    }
    #access .map-wrapper iframe,
    #access .map-wrapper iframe + picture {
        width: 100%;
    }
    #access .map-wrapper iframe + picture {
        display: block;

        margin-top: 6.2vw;
    }
    #access .address {
    }
    #access .address p + p {
        margin-top: 0.4em;
    }
}

/* ==============================
  NEWS
============================== */
#news {
    padding: 8.3% 0 11.09%;

    background-color: #FFFFFF;
}
#news .inner {
    width: 80.8%;
    max-width: 1552px;
    margin: 0 auto;
}
#news h1 {
    width: 40.2%;
    max-width: 580px;
    margin: 0 auto;
}
#news h1 + p {
    margin: 2.8% 0 3.8%;

    text-align: center;

    font-size: clamp(1.4rem, 1.25vw, 2.4rem);
}

#news .instagram-wrapper ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#news .instagram-wrapper ul li {
    width: 30.9%;
}
#news .btn-wrapper {
    margin: 3.9% auto 0;
}
#news .btn-wrapper a {
    display: block;

    width: 30.9%;
    max-width: 480px;
    margin: 0 auto;
}
@media print, screen and (max-width: 768px) {
    #news {
        padding: 10.6vw 0;
    }
    #news .inner {
        overflow: hidden;

        width: 100%;
    }
    #news h1 {
        width: 72vw;
        margin: 0 0 2.4vw 8.5vw;
    }
    #news h1 + p {
        width: 84.8vw;
        margin: 0 0 6.4vw 8.5vw;

        text-align: left;
    }

    #news .instagram-wrapper ul {
        position: relative;
        top: 0;
        left: -32.8vw;

        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 165.54vw;
    }
    #news .instagram-wrapper ul li {
        width: 51.2vw;
    }
    #news .btn-wrapper {
        margin: 6.4vw auto 0;
    }
    #news .btn-wrapper a {
        width: 51.2vw;
    }
}

/* ==============================
  フッター
============================== */
footer {
    position: relative;

    padding: 7.2% 0 6.01%;

    background-color: #E2D133;
    background-image: url(https://en.dailyservice.co.jp/craftbeer/images/bg-foam.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 28.5vw auto;
}
footer .foam13 {
    position: absolute;
    right: 21.3vw;
    bottom: 4.2vw;

    width: 6.6vw;
    max-width: 127px;
}
footer .inner {
    position: relative;

    width: 75%;
    max-width: 1440px;
    margin: 0 auto;
}
footer h1 {
    width: 18.76%;
    max-width: 270.18px;
    margin-bottom: 1.25vw;
}
footer .adress {
    font-size: clamp(1rem, 0.8vw, 1.6rem);
}

footer nav {
    position: absolute;
    top: 0;
    left: 29.86%;

    display: flex;
    justify-content: space-between;

    width: 32.18%;
    max-width: 459px;
}
footer nav ul:first-of-type {
    width: 22.87%;
    max-width: 105px;
}
footer nav ul:last-of-type {
    width: 22.77%;
    max-width: 105px;
}
footer nav li {
    margin-bottom: 38%;
}
footer nav ul:last-of-type li {
    margin-bottom: 38.8%;
}
footer nav li :last-of-type {
    margin-bottom: 0;
}
footer nav li.menu01 {
    width: 39%;
    max-width: 41px;
}
footer nav li.menu02 {
    width: 100%;
    max-width: 105px;
}
footer nav li.menu03 {
    width: 69.52%;
    max-width: 73px;
}
footer nav li.menu04 {
    width: 86.66%;
    max-width: 91px;
}
footer nav li.menu05 {
    width: 100%;
    max-width: 105px;
}
footer nav li.menu06 {
    width: 83.8%;
    max-width: 88px;
}

footer .copyright {
    width: 35.83%;
    max-width: 516px;
    margin-top: 13.6%;

    font-size: 0;
    line-height: 1;
}
@media print, screen and (max-width: 768px) {
    footer {
        padding: 6.4vw 0;

        background-image: none;
    }
    footer .foam13 {
        position: absolute;
        top: -3.7vw;
        right: 0.7vw;
        bottom: 0;

        width: 15.768vw;
    }
    footer .foam14 {
        position: absolute;
        top: 8vw;
        right: 12.18vw;

        width: 5.41vw;
    }
    footer .foam15 {
        position: absolute;
        top: 6.4vw;
        left: 6.4vw;

        width: 5.4vw;
    }
    footer .foam16 {
        position: absolute;
        top: 8.2vw;
        left: 8.53vw;

        width: 11.97vw;
    }

    footer .inner {
        width: 100%;
    }

    footer h1 {
        width: 28.8vw;
        margin: 0 auto 2.7vw;
    }

    footer .adress {
        text-align: center;
    }

    footer nav {
        display: none;
    }

    footer .copyright {
        width: 68.8vw;
        margin: 3.2vw auto 0;
    }
}