@charset "utf-8";

/* common */
.pc_display {
    display: inline !important;
}

.sp_display {
    display: none !important;
}

main {
    display: block;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ",
        sans-serif;
    font-weight: normal;
    overflow: hidden;
}

main .inner {
    margin: 0 auto;
    max-width: 110rem;
    position: relative;
}

main img {
    max-width: 100%;
}

main a:hover {
    opacity: .7;
}

section {
    display: block;
}

h1,
h2 {
    margin-bottom: 0;
}

h2,
h3 {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ",
        sans-serif;
}

sup {
    font-size: .8em;
    position: relative;
    top: 0;
}

/* parts */

@media screen and (min-width: 768px) and (max-width: 1100px) {
    .pc_display {
        display: block !important;
    }

    main img {
        width: 100%;
    }

    main .inner {
        padding-left: 5%;
        padding-right: 5%;
    }
}

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

    /* common */
    .pc_display {
        display: none !important;
    }

    .sp_display {
        display: block !important;
    }

    main .inner {
        width: 100%;
    }

    main img {
        width: 100%;
    }

    main .inner {
        padding-left: 4vw;
        padding-right: 4vw;
    }

    /* parts */
    main {
        padding-top: 0;
    }
}

/*==================================================
    追加したCSS
==================================================*/
/* common */
:root {
    --mPlus: "M PLUS Rounded 1c", sans-serif;
}

/* 背景色 */
.bg-cream {
    position: relative;
}

.bg-cream::before {
    background: #faf8c6;
    content: "";
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 1000px;
    z-index: 10;
}

@media screen and (max-width: 1024px) {
    .bg-cream::before {
        width: 94.66vw;
    }
}

/* 行間 */
.lh-0 {
    line-height: 0;
}

/* mainタグ */
.jagarico30th {
    overflow: hidden;
    text-align: center;
}

.jagarico30th picture {
    display: block;
}

.jagarico30th .container {
    margin: 0 auto;
    max-width: 1000px;
    position: relative;
}

/* セクションとセクションの間に配置している背景クリーム色の三角形 */
.is-diagonal {
    background: inherit;
    background-attachment: inherit;
    background-position: bottom left;
    background-size: inherit;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    content: "";
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1;
}

.is-diagonal::before {
    background: #faf8c6;
    content: "";
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 1000px;
}

.is-diagonal.is-reverse {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

@media screen and (max-width: 1024px) {
    .is-diagonal::before {
        width: 94.66vw;
    }
}

/* セクションとセクションの間にある30thの文字 */
.is-sectionLine {
    animation: bgMove 100s linear infinite;
    background-color: #fbe610;
    background-image: url(../img/img-30th.png);
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 9.3rem 5.9rem;
    border: .5rem solid #7d0000;
    height: 6.4rem;
    left: -10vw;
    position: absolute;
    transform: rotate(8deg);
    transform-origin: left top;
    width: 120vw;
    z-index: 20;
}

@keyframes bgMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 10000px 0;
    }
}

.is-sectionLine.is-reverse {
    transform: rotate(-10deg);
}

@media screen and (max-width: 767px) {
    .is-sectionLine {
        background-size: 14vw auto;
        height: 10vw;
        border: .7vw solid #7d0000;
    }
}

/* 横並びbox */
.gridBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.gridBox__img a {
    transition: .3s;
}

.gridBox__img a:hover {
    opacity: .6;
}

/* 共通テキスト */
.commonText {
    color: #5a3824;
    font-family: var(--mPlus);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.5;
    margin-top: 3rem;
}

@media screen and (max-width: 767px) {
    .commonText {
        font-size: 4.53vw;
        margin-top: 5.5vw;
    }
}

/* 共通ボタン */
.commonButton {
    position: relative;
    margin-top: 4rem;
    z-index: 1;
}

.commonButton__link {
    background: #fe0002;
    border: .4rem solid #000;
    border-radius: 999px;
    box-shadow: 0 .5rem 0 #21272a;
    color: #fff;
    display: inline-block;
    font-family: var(--mPlus);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    max-width: 33rem;
    padding: 2.3rem 0;
    position: relative;
    transition: .3s;
    width: 100%;
}

.commonButton__link:hover {
    opacity: .6;
}

.commonButton__link::after {
    background-image: url(../img/icon-arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 3.7rem;
    position: absolute;
    right: 2.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.7rem;
}

@media screen and (max-width: 767px) {
    .commonButton {
        margin-top: 10.13vw;
    }

    .commonButton__link {
        font-size: 5.33vw;
        max-width: 79.2vw;
        padding: 5.61vw 0;
    }

    .commonButton__link::after {
        height: 8.79vw;
        right: 6vw;
        width: 8.79vw;
    }
}

/* モーダル */
.is-fixed {
    overflow: hidden;
}

.firstModal {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;

    &.modal--active {
        opacity: 1;
        visibility: visible;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .firstModal__box {
        width: 1000px;
        aspect-ratio: 16 / 9;
        margin: 4rem;
        position: relative;
    }

    .firstModal__box iframe {
        width: 100%;
        height: 100%;
    }

    .modal-btnClose {
        position: absolute;
        bottom: 1.2rem;
        right: 1.2rem;
        cursor: pointer;
        z-index: 50;
    }

    .modal-btnClose img {
        max-width: 4rem;
    }

    @media screen and (max-width: 767px) {
        .firstModal__box {
            margin: 5vw;
        }

        .modal-btnClose {
            bottom: 2vw;
            right: 2vw;
        }

        .modal-btnClose img {
            max-width: 8vw;
        }
    }
}

/* メインビジュアル */
.mainVisual {
    background-image: url(../img/img-mainvisual_bg.png);
    background-color: #FBF51C;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 7vw 0 16vw;
    position: relative;

    .mainVisual__title {
        padding-left: 10rem;
        position: relative;
        z-index: 30;
    }

    .mainVisual__title img {
        max-width: 92rem;
    }

    .mainVisual__productOuter {
        position: relative;
        margin: -10.5rem auto 0;
        z-index: 40;
    }

    .mainVisual__30th {
        position: absolute;
        bottom: -3rem;
        left: 50%;
        transform: translateX(-50%);
        margin-left: -45.5rem;
    }

    .mainVisual__30th img {
        max-width: 25rem;
    }

    .productsList {
        display: flex;
        justify-content: center;
    }

    .productsList__item:first-of-type,
    .productsList__item:last-of-type {
        margin-top: -0.5rem;
    }

    .productsList__item:nth-of-type(2) {
        margin: 0 -1.5rem;
    }

    .productsList__item img {
        max-width: 20.9rem;
    }

    .productsList__item:first-of-type img,
    .productsList__item:last-of-type img {
        max-width: 24.5rem;
    }

    .mainVisual__deco {
        pointer-events: none;
        position: absolute;
        top: -2rem;
        left: 50%;
        transform: translateX(-50%) translateY(10%);
        z-index: 21;
        width: 100%;
        margin-left: -4rem;
    }

    .mainVisual__deco.scroll-in.active {
        transform: translateX(-50%) translateY(0);
    }

    .mainVisual__deco img {
        max-width: 144rem;
        width: 100vw;
    }

    @media screen and (min-width: 1025px) and (max-width: 1280px) {
        .mainVisual__30th {
            margin-left: -41.5rem;
        }

        .mainVisual__deco {
            margin-left: 0;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding: 7vw 0 9vw;

        .mainVisual__productOuter {
            margin: -10vw auto 0;
        }

        .mainVisual__30th {
            margin-left: -33rem;
        }

        .mainVisual__30th img {
            max-width: 21rem;
        }

        .productsList__item img {
            max-width: 17.9rem;
        }

        .productsList__item:first-of-type img,
        .productsList__item:last-of-type img {
            max-width: 21.5rem;
        }

        .mainVisual__deco {
            margin-left: 0;
        }
    }

    @media screen and (max-width: 767px) {
        padding: 26.13vw 0 20vw;
        background-image: url(../img/img-mainvisual_bg_sp.png);

        .mainVisual__title {
            padding-left: 0;
        }

        .mainVisual__title img {
            max-width: 93.46vw;
        }

        .mainVisual__productOuter {
            margin-top: -17vw;
        }

        .mainVisual__30th {
            bottom: auto;
            top: -60vw;
            left: 7vw;
            transform: unset;
            margin-left: 0;
        }

        .mainVisual__30th img {
            max-width: 31.46vw;
        }

        .productsList__item:first-of-type,
        .productsList__item:last-of-type {
            margin-top: 0;
        }

        .productsList__item:nth-of-type(2) {
            margin: 0 -2vw;
        }

        .productsList__item img {
            max-width: 26.8vw;
        }

        .productsList__item:first-of-type img,
        .productsList__item:last-of-type img {
            max-width: 31vw;
        }

        .mainVisual__deco {
            width: 100%;
            transform: translateY(15%);
            left: 0;
            margin-left: 0;
            top: 0;
        }

        .mainVisual__deco.scroll-in.active {
            transform: translateY(0);
        }
    }
}

/* 30周年記念カップ発売！ */
.package {
    background: #2cd0aa;
    padding: 0 0 14vw;
    position: relative;

    .is-sectionLine.is-reverse {
        transform: rotate(-7deg);
        top: -0.5vw;
    }

    .is-diagonal {
        height: 12.3vw;
        top: -12.3vw;
    }

    .is-diagonal::before {
        content: none;
    }

    .package__allBgImg {
        position: absolute;
        width: 100%;
        height: calc(100% + 12.3vw);
        top: -12.3vw;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .package__allBgImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: polygon(0 13.5vw, 100% 0, 100% 100%, 0 calc(100% - 13.5vw));
    }

    .container {
        position: relative;
        z-index: 10;
    }

    .package__title {
        padding-top: 2vw;
    }

    .package__titleImg {
        max-width: 55.4rem;
    }

    .package__text {
        color: #fff;
        font-family: var(--mPlus);
        font-size: 1.9rem;
        font-weight: 700;
        line-height: 1.5;
        margin-top: 3rem;
        text-shadow: 0 .3rem .4rem rgba(0, 0, 0, .25);
    }

    .packageList {
        display: flex;
        gap: 3.6rem;
        margin-top: 7rem;
    }

    .packageList__item {
        flex: 1;
    }

    .packageList__item--note {
        color: #fff;
        font-family: var(--mPlus);
        font-size: 1.1rem;
        font-weight: 500;
        margin-top: 1rem;
        text-shadow: 0 .3rem .4rem rgba(0, 0, 0, .25);
    }

    .commonButton {
        margin-top: 2.5rem;
    }

    .package__star {
        max-width: 1440px;
        margin-inline: auto auto;
        position: relative;
        text-align: center;
        height: fit-content;
        width: 100%;
        z-index: 5;
    }

    .package__star-inner {
        position: absolute;
        top: 0;
        left: 50%;
        margin-top: 7%;
        pointer-events: none;
        transform: translate(-50%, 10%);
        transition: all 0.8s;
        width: 100%;
    }

    .scroll-in.active .package__star-inner {
        transform: translate(-50%, 0%);
    }

    .package__bgImg {
        bottom: 0;
        position: absolute;
    }

    .package__bgImg.is-left {
        bottom: -6rem;
        left: -20.5rem;
        max-width: 19rem;
        z-index: 30;
    }

    .package__bgImg.is-right {
        bottom: -3rem;
        max-width: 19.5rem;
        right: -21rem;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        .package__title {
            padding-top: 6vw;
        }
    }

    @media screen and (max-width: 767px) {
        padding: 14vw 0 38.66vw;

        .package__star-inner {
            margin-top: 17%;
        }

        .package__titleImg {
            max-width: 92.4vw;
        }

        .package__text {
            font-size: 4.53vw;
            margin-top: 7.4vw;
        }

        .packageList {
            flex-flow: row wrap;
            gap: 3.86vw 5.73vw;
            justify-content: center;
            margin-top: 12vw;
        }

        .packageList__item {
            flex: unset;
            width: 27.20vw;
        }

        .packageList__item--note {
            font-size: 2.66vw;
            margin-left: -1vw;
            margin-top: .5vw;
            white-space: nowrap;
        }

        .commonButton {
            margin-top: 12vw;
        }

        .package__bgImg.is-left {
            display: none;
        }

        .package__bgImg.is-right {
            bottom: -36vw;
            max-width: 23.13vw;
            right: 0vw;
            z-index: 30;
        }
    }
}

/* 「食べてみたい！じゃがりこ」国民投票No.1 */
.no1 {
    background-color: #E4AFA2;
    background-image: url(../img/img-no1_bg.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 0 18.05vw;
    position: relative;

    .is-diagonal {
        height: 14vw;
        top: -14vw;
    }

    .is-sectionLine {
        top: -16vw;
    }

    .container {
        padding: 0 6rem;
        position: relative;
        z-index: 10;
    }

    .no1__titleImg {
        max-width: 79rem;
    }

    .gridBox {
        align-items: center;
        column-gap: 6rem;
        margin-top: 3.5rem;
        position: relative;
    }

    .no1__boxTitleImg {
        max-width: 40.9rem;
    }

    .commonText {
        margin-top: 2rem;
    }

    .commonButton {
        margin-top: 3.6rem;
    }

    .resultButton {
        margin-top: 4.4rem;
    }

    .resultButton__link {
        display: inline-block;
        font-family: var(--mPlus);
        font-size: 2.2rem;
        font-weight: 800;
        line-height: 1;
        padding: 0 5rem 1.5rem 1rem;
        position: relative;
        transition: .3s;
    }

    .resultButton__link:hover {
        opacity: .6;
    }

    .resultButton__link::before {
        background: repeat-x url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4'><rect x='0' y='0' width='5' height='4' rx='2' ry='2' fill='red'/></svg>");
        background-size: .8rem .4rem;
        bottom: 0;
        content: "";
        height: .4rem;
        left: 0;
        position: absolute;
        width: 100%;
    }

    .resultButton__link::after {
        background-image: url(../img/icon-arrow.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 3.7rem;
        position: absolute;
        right: 0;
        top: -.8rem;
        width: 3.7rem;
    }

    .no1__bgImg {
        position: absolute;
    }

    .no1__bgImg.is-flag {
        left: -.8rem;
        max-width: 25.1rem;
        top: -6.5vw;
    }

    .no1__bgImg.is-topLeft {
        bottom: -1rem;
        left: 2rem;
        max-width: 8.1rem;
    }

    .no1__bgImg.is-topRight {
        max-width: 8.1rem;
        right: 3.5rem;
        top: 5.5rem;
    }

    .no1__bgImg.is-bottomLeft {
        bottom: -8rem;
        left: 32.5rem;
        max-width: 15.2rem;
    }

    .no1__bgImg.is-bottomRight {
        bottom: 1.5rem;
        max-width: 14.1rem;
        right: -12rem;
    }

    .no1__bgImg.is-animal {
        bottom: -25.5rem;
        left: -19rem;
        max-width: 42.6rem;
    }

    @media screen and (min-width: 1025px) and (max-width: 1280px) {
        .no1__bgImg.is-animal {
            bottom: -18vw;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding: 4vw 0 18.05vw;

        .no1__bgImg.is-flag {
            top: -9.5vw;
        }

        .no1__bgImg.is-topLeft {
            bottom: -5vw;
            left: -6vw;
        }

        .no1__bgImg.is-topRight {
            right: -2vw;
            top: 7vw;
        }

        .no1__bgImg.is-bottomLeft {
            bottom: -8vw;
            left: 25vw;
        }

        .no1__bgImg.is-bottomRight {
            bottom: -4vw;
        }

        .no1__bgImg.is-animal {
            bottom: -20vw;
            left: -5vw;
            max-width: 36vw;
        }
    }

    @media screen and (max-width: 767px) {
        padding: 9vw 0 43.66vw;

        .is-diagonal {
            height: 14.33vw;
            top: -14vw;
        }

        .is-sectionLine {
            top: -23.33vw;
        }

        .container {
            padding: 0;
        }

        .no1__titleImg {
            max-width: 99.46vw;
        }

        .gridBox {
            column-gap: 1vw;
            grid-template-columns: 100%;
            margin-top: 7.66vw;
        }

        .gridBox__img img {
            max-width: 65.86vw;
        }

        .no1__boxTitleImg {
            max-width: 66.66vw;
        }

        .commonButton {
            margin-top: 10vw;
        }

        .resultButton {
            margin-top: 11.13vw;
        }

        .resultButton__link {
            font-size: 5.33vw;
            padding-right: 12vw;
        }

        .resultButton__link::after {
            height: 8.79vw;
            width: 8.79vw;
        }

        .no1__bgImg.is-flag {
            left: -1vw;
            max-width: 37vw;
            top: -16.5vw;
        }

        .no1__bgImg.is-topLeft {
            bottom: -24vw;
            left: 2vw;
            max-width: 17.06vw;
        }

        .no1__bgImg.is-topRight {
            max-width: 14vw;
            right: 5vw;
            top: 27vw;
        }

        .no1__bgImg.is-bottomLeft {
            bottom: 1vw;
            left: 0;
            max-width: 12.13vw;
        }

        .no1__bgImg.is-bottomRight {
            bottom: -7vw;
            max-width: 10.53vw;
            right: 0;
        }

        .no1__bgImg.is-animal {
            bottom: -42vw;
            left: -.4vw;
            max-width: 80.53vw;
        }

        .is-sp-packageLeft {
            left: 10vw;
            max-width: 14.93vw;
            top: 45vw;
        }

        .is-sp-packageRight {
            max-width: 23.46vw;
            right: 3vw;
            top: 49vw;
        }
    }
}

/* じゃがりこ探検隊 新メンバー大募集！ */
.recruitment {
    background: #159cff;
    padding: 3rem 0 16.31vw;
    position: relative;

    .is-diagonal {
        height: 18.05vw;
        top: -18.05vw;
    }

    .is-sectionLine {
        top: -.5vw;
    }

    .recruitment__allBgImg {
        position: absolute;
        width: 100%;
        height: calc(100% + 18.3vw);
        top: -18.3vw;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .recruitment__allBgImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: polygon(0 17.5vw, 100% 0, 100% 100%, 0 calc(100% - 17.5vw));
    }

    .container {
        padding: 0 3rem;
        position: relative;
        z-index: 20;
    }

    .gridBox {
        gap: 2.8rem;
    }

    .recruitment__boxTitleImg {
        max-width: 44.2rem;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding: 8vw 0 20.31vw;
    }

    @media screen and (max-width: 767px) {
        padding: 15vw 0 37.73vw;

        .is-diagonal {
            height: 17.33vw;
            top: -17.33vw;
        }

        .is-sectionLine {
            top: -2.5vw;
        }

        .container {
            padding: 0 7vw;
        }

        .gridBox {
            gap: 8.79vw;
            grid-template-columns: 100%;
        }

        .gridBox__img {
            order: 1;
        }

        .gridBox__textArea {
            order: 2;
        }

        .recruitment__boxTitleImg {
            max-width: 77.73vw;
        }
    }
}

/* じゃが力クイズ */
.quiz {
    background: #28cda7;
    padding: 3rem 0 20rem;

    .is-sectionLine {
        top: -19.5vw;
        transform: rotate(9.5deg);
    }

    .is-diagonal {
        height: 16.31vw;
        top: -16.31vw;
    }

    .quiz__allBgImg {
        position: absolute;
        width: 100%;
        height: calc(100% + 16.3vw);
        top: -16.3vw;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .quiz__allBgImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: polygon(0 0, 100% 16.3vw, 100% 100%, 0 100%);
    }

    .container {
        padding: 0 3rem;
        position: relative;
        z-index: 20;
    }

    .gridBox {
        gap: 6rem;
    }

    .quiz__boxTitleImg {
        max-width: 34.5rem;
    }

    .update {
        margin-top: 9rem;
    }

    .update__titleImg {
        max-width: 60.7rem;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        padding: 10vw 0;
    }

    @media screen and (max-width: 767px) {
        padding: 11vw 0 25vw;

        .is-diagonal {
            height: 13.33vw;
            top: -13.33vw;
        }

        .is-sectionLine {
            top: -24vw;
        }

        .container {
            padding: 0 7vw;
        }

        .gridBox {
            gap: 9.5vw;
            grid-template-columns: 100%;
        }

        .quiz__boxTitleImg {
            max-width: 58.13vw;
        }

        .update {
            margin: 14.93vw -7vw 0;
        }

        .update__titleImg {
            max-width: 92.26vw;
        }
    }
}

/* footer */
.footerImg {
    pointer-events: none;
    position: relative;
    margin-top: -21vw;
    z-index: 20;

    img {
        width: 100vw;
    }

    @media screen and (max-width: 767px) {
        margin-top: -29vw;
    }
}

/* animation */
.scroll-in {
    transform: translateY(10%);
    transition: all 1s;
    opacity: 0;
}

.scroll-in.active {
    transform: translateY(0);
    opacity: 1;
}

@media screen and (max-width: 767px) {
    .scroll-in {
        transform: translateY(15%);
    }
}