/* Common */
:root {
    --txt-color: #3E3A39;
    --bg-pink01: #FFEFF1;
    --bg-pink02: #FFDBDF;
    --bg-pink03: #F6BED0;
    --bg-blue01: #EAF6FD;
    --bg-blue02: #BBD4EF;
    --bg-yellow01: #FFFCDB;
    --bg-yellow02: #FFE893;
}

iframe#twitter-widget-0 {
    display: none !important;
}

.fb_iframe_widget {
    display: none !important;
}

.pc_only {
    display: block;
}

.sp_only {
    display: none;
}

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

.prod_left {
    float: left;
    width: 25%;
}

.prod_right {
    float: right;
    width: 70%;
    font-size: 16px;
}

ul.prod_list {
    margin-top: 50px;
    background-color: white;
}

ul.prod_list li {
    margin-bottom: 50px;
    padding-inline: 36px;
}

.blue ul.prod_list {
    border: 1px solid var(--bg-blue02);
}

.yellow ul.prod_list {
    border: 1px solid var(--bg-yellow02);
}


.prod_outer {
    margin-bottom: 10px;
}


h4.subtitle {
    background-color: #fff;
    border-bottom: 1px solid var(--bg-blue02);
    margin-bottom: 20px;
    font-size: 20px;
    width: 100%;
    padding-block: 18px;
}

h4.subtitle span {
    font-weight: 600;
}

.blue h4.subtitle {
    border-bottom: 1px solid var(--bg-blue02);
}

.yellow h4.subtitle {
    border-bottom: 1px solid var(--bg-yellow02);
}

sup {
    font-size: 10px;
    vertical-align: text-top;
}

ul.prod_list {
    margin-top: 50px;
}

.block-page-block {
    position: relative;
    padding-bottom: 120px;
}

.block-page-block--frame {
    position: relative;
    z-index: 2;
}

.block-page-block img {
    object-fit: contain;
}

h2,
h3,
h4 {
    border: 0;
    margin: 0;
    padding: 0;
}

.block-page-block--frame {
    margin-bottom: 0;
}

.block-page-caption h1 {
    font-size: 15px;
    margin: 0;
}

.block-page-block--contents-body-text-1column * {
    line-height: 1.6;
    font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: var(--txt-color);
}

.pane-main {
    padding-top: 0 !important;
}

.block-page-block,
.pane-contents {
    padding-bottom: 0 !important;
}

.pane-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.wrap {
    width: min(100%, 1000px);
    margin-inline: auto;
    padding-inline: 15px;
    background-color: var(--bg-pink01);
}

.inner {
    width: min(100%, 818px);
    margin-inline: auto;
}

/* Mv */
.mv {
    width: min(100%, 1000px);
    margin-inline: auto;
}

.mv * {
    line-height: 0;
}

/* Block01 */
.block01 {
    padding-top: 70px;
}

.block01 .top-txt {
    text-align: center;
    font-size: 18px;
    line-height: 1.4;
}

.block01 .ttl {
    position: relative;
    margin-top: 70px;
    text-align: center;
    font-size: 34px;
    font-weight: 600;
    z-index: 2;
}

.block01 .ttl span {
    border-bottom: 1px solid var(--txt-color);
}

.block01 .main {
    margin-top: -40px;
    position: relative;
    padding-block: 43px 60px;
    background: radial-gradient(ellipse 50% 50%, white 85%, transparent 100%);
}

.block01 .main-list {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.block01 .main-list>li {
    width: 316px;
}

.block01 .main-list h3 {
    width: 100%;
    aspect-ratio: 316/61;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
}

.block01 .main-list h3.blue {
    background: url(/img/usr/pg/1seasonal-251112/block01_ttl_blue.png) no-repeat center/contain;
}

.block01 .main-list h3.yellow {
    background: url(/img/usr/pg/1seasonal-251112/block01_ttl_yellow.png) no-repeat center/contain;
}

.block01 .check-list {
    margin-top: 20px;
    padding-left: 20px;
}

.block01 .check-list>li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 20px;
}

.block01 .check-list>li+li {
    margin-top: 10px;
}

.block01 .check-list>li::before {
    content: '';
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid var(--txt-color);
    top: 7px;
}

.block01 .main-img {
    margin: 16px auto 0;
    width: min(100%, 464px);
}

.block01 .bottom-txt {
    position: relative;
    text-align: center;
    padding-block: 15px;
    font-size: 24px;
    font-weight: 600;
}

.block01 .bottom-txt span {
    position: relative;
    z-index: 2;
}

.block01 .bottom-txt::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 231px;
    height: 70px;
    background: linear-gradient(to bottom,
            transparent,
            var(--bg-pink03));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.block01 .bottom-img {
    margin: 10px auto 0;
    width: min(100%, 422px);
}

/* Block02 */
.block02 {
    margin-top: 60px;
}

.block02 .ttl {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
}

.block02 .box {
    margin-top: 30px;
    position: relative;
    padding: 30px 50px 50px;
    isolation: isolate;
}

.block02 .box+.box {
    margin-top: 50px;
}

.block02 .box.blue {
    background-color: var(--bg-blue01);
}

.block02 .box.yellow {
    background-color: var(--bg-yellow01);
}

.block02 .box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    z-index: -1;
}

.block02 .box.blue::after {
    background: linear-gradient(-135deg,
            var(--bg-pink01) 50%,
            var(--bg-blue02) 50.5%,
            var(--bg-blue02));
}

.block02 .box.yellow::after {
    background: linear-gradient(-135deg,
            var(--bg-pink01) 50%,
            var(--bg-yellow02) 50.5%,
            var(--bg-yellow02));
}

.block02 h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
}

.block02 h3 .label {
    position: relative;
    top: 3px;
    display: block;
    width: 158px;
    height: 33px;
    line-height: 33px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.block02 h3 .label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(14px, -50%);
    right: 0;
    width: 14px;
    height: 14px;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    background-color: var(--bg-blue02);
}

.block02 h3 .txt {
    display: flex;
    align-items: center;
}

.block02 .box.blue h3 .label {
    background-color: var(--bg-blue02);
}

.block02 .box.yellow h3 .label {
    background-color: var(--bg-yellow02);
}

.block02 .box.blue h3 .label::after {
    background-color: var(--bg-blue02);
}

.block02 .box.yellow h3 .label::after {
    background-color: var(--bg-yellow02);
}

.block02 h3 .txt-lg {
    font-size: 36px;
}

.block02 .check-list {
    margin-top: 40px;
}

.block02 .check-list>li {
    display: flex;
    align-items: center;
    gap: 20px;
}

.block02 .check-list>li+li {
    margin-top: 40px;
}

.block02 .check-list figure {
    width: 183px;
}

.block02 .check-list .cont {
    flex: 1;
}

.block02 .check-list .cont h4 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 20px;
    font-weight: 600;
}

.block02 .check-list .cont h4::before {
    content: '';
    display: block;
    width: 22px;
    height: 20px;
}

.block02 .box.blue .check-list .cont h4::before {
    background: url(/img/usr/pg/1seasonal-251112/block02_check_blue.png) no-repeat center/contain;
}

.block02 .box.yellow .check-list .cont h4::before {
    background: url(/img/usr/pg/1seasonal-251112/block02_check_yellow.png) no-repeat center/contain;
}

.block02 .check-list .cont p {
    margin-top: 10px;
    font-size: 16px;
}

/* Block03 */
.block03 {
    padding-block: 50px 138px;
}

.block03 .ttl {
    font-size: 26px;
    font-weight: 600;
    text-align: center;
}

.block03>ul {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.block03>ul>li {
    position: relative;
    width: calc((100% - (20px * 2)) / 3);
    aspect-ratio: 1/1;
    border-radius: 100vh;
    background-color: var(--bg-pink02);
    text-align: center;
}

.block03>ul>li h4 {
    margin-top: 25px;
    font-size: 26px;
    font-weight: 600;
}

.block03>ul>li p {
    margin-top: 6px;
    font-size: 18px;
}

.block03>ul>li p span {
    font-weight: 600;
}

.block03>ul>li figure {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 50%);
}

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

    /* Common */
    .pc_only {
        display: none;
    }

    .sp_only {
        display: block;
    }

    /* Block01 */
    .block01 {
        padding-top: 60px;
    }

    .block01 .top-txt {
        font-size: 14px;
    }

    .block01 .ttl {
        margin-top: 40px;
        font-size: 24px;
    }

    .block01 .main {
        padding: 43px 15px 60px 15px;
        background: radial-gradient(ellipse 77% 50%, white 85%, transparent 100%);
        margin: -40px calc(50% - 50vw) 0;
        width: 100vw;
    }

    .block01 .main-list {
        flex-direction: column;
        align-items: center;
    }

    .block01 .main-list>li {
        width: 316px;
    }

    .block01 .main-list h3 {
        width: 100%;
        aspect-ratio: 316/61;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-weight: 600;
    }

    .block01 .check-list {
        margin-top: 20px;
        padding-left: 50px;
    }

    .block01 .check-list>li {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        font-size: 16px;
    }

    .block01 .check-list>li+li {
        margin-top: 10px;
    }

    .block01 .check-list>li::before {
        width: 16px;
        height: 16px;
        top: 6px;
    }

    .block01 .main-img {
        margin: 40px auto 0;
    }

    .block01 .bottom-txt {
        font-size: 20px;
    }

    .block01 .bottom-img {
        margin: 10px auto 0;
        width: min(100%, 422px);
    }

    /* Block02 */
    .block02 {
        margin-top: 60px;
    }

    .block02 .ttl {
        font-size: 26px;
    }

    .block02 .box {
        margin-top: 30px;
        padding: 30px 15px;
    }

    .block02 .box+.box {
        margin-top: 50px;
    }

    .block02 h3 {
        flex-direction: column;
        gap: 0;
        font-size: 26px;
        line-height: auto;
    }

    .block02 h3 .label {
        top: 0;
        width: 158px;
        height: 40px;
        line-height: 40px;
    }

    .block02 h3 .label::after {
        transform: translate(-50%, 100%);
        right: auto;
        left: 50%;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        background-color: var(--bg-blue02);
    }

    .block02 h3 .txt {
        display: flex;
        align-items: center;
    }

    .block02 h3 .txt-lg {
        font-size: 36px;
    }

    .block02 .check-list {
        margin-top: 40px;
    }

    .block02 .check-list>li {
        flex-direction: column;
        gap: 20px;
    }

    .block02 .check-list>li+li {
        margin-top: 40px;
    }

    .block02 .check-list figure {
        margin-inline: auto;
    }

    .block02 .check-list .cont {
        flex: 100%;
    }

    .block02 .check-list .cont h4 {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 20px;
        font-weight: 600;
    }

    .block02 .check-list .cont h4::before {
        content: '';
        display: block;
        width: 22px;
        height: 20px;
    }

    .block02 .check-list .cont p {
        margin-top: 10px;
        font-size: 16px;
    }

    /* Block03 */
    .block03 {
        padding-block: 50px 138px;
    }

    .block03 .ttl {
        font-size: 26px;
        font-weight: 600;
        text-align: center;
    }

    .block03>ul {
        margin-top: 30px;
        flex-direction: column;
        gap: 60px;
    }

    .block03>ul>li {
        width: min(100%, 260px)
    }

    ul.prod_list li {
        margin-bottom: 50px;
        padding-inline: 20px;
    }

    .prod_left {
        float: none;
        width: min(450px, 100%);
    }

    .prod_right {
        float: none;
        width: min(450px, 100%);
    }

    .prod_name {
        margin-block: 20px 15px;
        font-size: 18px;
        font-weight: 600;
    }

}