body {
    overflow-x: hidden;
}

.breadcrumbs,
.breadcrumb,
#md_contentsDetail {
    display: none;
}

#portal_based * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#portal_based img {
    display: block;
    width: 100%;
    max-width: 100%;
}

#portal_based h1,
#portal_based h2,
#portal_based h3,
#portal_based h4,
#portal_based h5,
#portal_based p,
#portal_based a,
#portal_based ul,
#portal_based li,
#portal_based dt,
#portal_based dd,
#portal_based figcaption {
    font-size: 100%;
    letter-spacing: 0.05em;
    font-weight: 400;
    color: #252525;
    font-feature-settings: "palt" 1;
    font-kerning: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#portal_based a {
    text-decoration: none;
    transition: opacity .4s cubic-bezier(.165, .84, .44, 1);
}

#portal_based a:hover {
    cursor: pointer;
    opacity: 1;
    transition: all .3s ease;
}

#portal_based a img {
    transition: all .3s;
}

#portal_based .pc {
    display: block;
}

#portal_based .sp {
    display: none;
}

#portal_based section.portal_items {
    width: 100vw;
}

/* hero */
#portal_based section.portal_cover {
    width: 100vw;
}

#portal_based section.portal_cover .cover {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 810px;
    overflow: hidden;
}

#portal_based .cover__bg {
    position: absolute;
    inset: 0;
}

#portal_based .cover__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#portal_based .cover img.logo01 {
    position: absolute;
    top: 60px;
    width: 44% !important;
}

#portal_based .cover img.logo02 {
    position: absolute;
    bottom: 60px;
    width: 30% !important;
}

/* section02 */
#portal_based section.portal_items div.item-list {
    display: flex;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

#portal_based section.portal_items div.item-list.section02 {
    display: block;
    margin: 80px auto 0;
}

#portal_based section.portal_items div.item-list.section02 div.item {
    width: 100%;
}

#portal_based section.portal_items div.read {
    width: 100%;
    margin: 0 0 120px;
    line-height: 2;
    text-align: center;
}

#portal_based section.portal_items div.read h4 {
    text-align: center;
    font-family: serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .1rem;
}

#portal_based section.portal_items div.read h4 small {
    display: inline-block;
    margin: 0 auto 20px;
    padding: 0 20px;
    border-bottom: .05px solid #666;
}

#portal_based section.portal_items div.read p {
    margin: 30px 0 0;
    font-size: 16px;
    text-align: center;
}

#portal_based section.portal_items div.item-list .item .item-wrapper {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin: 0 0 120px;
}

#portal_based section.portal_items div.item-list .item .item-wrapper a{
    flex: 1;
}

#portal_based .fade {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 4.5;
}

#portal_based .fade img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s ease;
}

#portal_based .fade img.is-show {
    opacity: 1;
}

#portal_based .text-item {
    flex: .8;
    font-size: 14px;
    line-height: 1.5rem;
}

#portal_based .brand-name {
    display: block;
    margin: 0 0 10px;
    color: #666;
}

#portal_based .item-name {
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1.8rem;
}

#portal_based .item-price {
    display: block;
    margin: 8px 0 20px !important;
    font-size: 18px;
    font-weight: 600;
}

#portal_based section.portal_items div.item-list.section02 .item .item-wrapper .text-item p {
    margin: 0 0 20px;
    max-width: 420px;
}

#portal_based section.portal_items div.item-list.section02 .item .item-wrapper .text-item p.border {
    padding: 18px 0;
}

#portal_based section.portal_items div.item-list.section02 .text-item p {
    position: relative;
    color: #333;
}

#portal_based .tag01 {
    display: inline-block;
    margin: 7px 0 4px !important;
    padding: 2px 10px !important;
    border: .1px solid #888;
    border-radius: 5px;
    font-family: serif;
    font-size: 14px;
    color: #888;
}

#portal_based .css-replacement {
    width: 380px;
    height: 48px;
}

#portal_based .css-replacement span {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

#portal_based a.css--btn-arrow-wrap-black {
    width: 380px;
    height: 48px;
}

#portal_based .block-black--desc-btn {
    width: 380px;
    height: 48px;
    margin: 20px 0 0 !important;
}
@media screen and (max-width: 768px) {
    #portal_based .text-item {
        flex: 1;
    }
}
/* archive */
#portal_based .portal_items.bg-gray {
    background-color: #d8d8d8;
}

#portal_based section.portal_items.section03 {
    position: relative;
    padding: 80px 0 100px 60px;
}

#portal_based section.portal_items div.item-list.section03 {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: calc(100vw - 100px);
    max-width: unset;
    gap: 20px;
    margin: 40px 0 0;
    padding: 0 20px 0 0;
}

#portal_based section.portal_items div.item-list.section03 div.item {
    padding: 0;
}

#portal_based section.portal_items div.item-list.section03 div.item.section03 {
    width: 360px;
    flex-shrink: 0;
}

#portal_based section.portal_items div.item-list.section03 div.item .thumb {
    width: 360px;
}

#portal_based section.portal_items div.item-list.section03 div.item div.detail {
    width: 90%;
    max-height: 100%;
    margin: 20px 0 30px 4px;
    overflow-y: hidden;
}

#portal_based section.portal_items div.item-list div.item div.detail p.category {
    font-size: 14px;
    line-height: 1.4;
}

#portal_based section.portal_items div.item-list div.item div.detail h2.ttl-item {
    margin: 4px 0 0;
    font-family: serif;
    font-size: 14px;
    line-height: 1.5;
}

#portal_based .ttl-category {
    font-family: serif;
    font-size: 30px;
    font-weight: 400;
    text-align: left;
    letter-spacing: .2rem;
    color: #333;
}

#portal_based .ttl-category small {
    font-size: 16px;
}

#portal_based .fade-hover-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#portal_based .fade-hover-wrapper .base-image {
    width: 100%;
    height: auto;
}

#portal_based .fade-hover-wrapper .overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 1;
    transition: opacity .8s ease-in-out;
}

#portal_based .fade-hover-wrapper:hover .overlay-image {
    opacity: 0;
}

/* scroll */
#portal_based .scroll_down {
    display: none;
}

/* profile */
#portal_based .fade-wrapper {
    position: relative;
    width: 480px;
    height: 480px;
    overflow: hidden;
}

#portal_based .fade-wrapper .base-image {
    width: 100%;
    height: auto;
}

#portal_based .fade-wrapper .overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    animation: fadeCycle 8s infinite ease-in-out;
}

@keyframes fadeCycle {
    0%, 10%, 90%, 100% {
        opacity: 1;
    }
    45%, 55% {
        opacity: 0;
    }
}

#portal_based .fade-wrapper.large {
    width: 100vw;
    height: 440px;
}

#portal_based .fade-wrapper.large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#portal_based .text-wrapper {
    width: 100vw;
    max-width: 860px;
    margin: 0 auto !important;
}

#portal_based div#section04.ttl-category {
    width: 100vw;
    max-width: 860px;
    margin: 40px auto 20px;
    font-size: 30px;
}

#portal_based #section04 small {
    display: block;
}

#portal_based .text-wrapper p {
    margin: 0 0 20px !important;
    letter-spacing: 1.2px;
    line-height: 2rem;
}

/* info */
#portal_based .article-content-wrap.weather-sell-block {
    width: 100vw;
    max-width: 860px;
    margin: 0 auto !important;
}

#portal_based .article-content-inner {
    width: 860px;
}

#portal_based .article-product-summary--content {
    margin: 40px 0 !important;
    padding: 40px 80px !important;
}

#portal_based .article-product-summary--content-wrap {
    justify-content: left;
    gap: 40px;
    padding: 14px 0 !important;
}

#portal_based .article-notice {
    line-height: 1.8rem;
}
.weather-sell-block .article-product-summary--wrap .article-product-summary--content-wrap dt {
    min-width: 100px;
    font-weight: bold !important;
}
.weather-sell-block .article-product-summary--wrap .article-product-summary--content-head {
    padding: 0 0 20px !important;
}

@media screen and (max-width: 768px) {
    #portal_based .pc {
        display: none;
    }

    #portal_based .sp {
        display: block;
    }

    #portal_based section.portal_items {
        margin: 0;
        padding: 0;
    }

    #portal_based section.portal_cover .cover {
        width: 100%;
        height: 550px;
    }

    #portal_based .cover img.logo01 {
        width: 75% !important;
    }

    #portal_based .cover img.logo02 {
        width: 60% !important;
    }

    #portal_based section.portal_items div.item-list.section02 {
        margin: 0 auto;
        padding: 40px 20px 10px;
        overflow-x: unset;
    }

    #portal_based section.portal_items div.read {
        margin: 0 0 60px;
    }

    #portal_based section.portal_items div.read h4 {
        font-size: 20px;
        line-height: initial;
        letter-spacing: 2px;
    }

    #portal_based section.portal_items div.read h4 small {
        font-size: 16px;
    }

    #portal_based section.portal_items div.read p {
        margin: 24px 0 0;
        font-size: 16px;
        text-align: left;
    }

    #portal_based section.portal_items div.item-list .item .item-wrapper {
        flex-wrap: wrap;
        gap: 20px;
        margin: 0 0 40px;
    }

    #portal_based .fade {
        width: calc(100vw - 0px);
    }

    #portal_based .text-item {
        position: unset;
        width: 100%;
        font-size: 14px;
        line-height: 1.8;
    }

    #portal_based section.portal_items div.item-list.section02 .item .item-wrapper .text-item p {
        margin: 20px 0 0;
    }

    #portal_based .block-black--desc-btn,
    #portal_based a.css--btn-arrow-wrap-black,
    #portal_based .css-replacement {
        width: 100%;
    }

    #portal_based .css-replacement span {
        font-weight: 600;
        line-height: 40px;
    }

    #portal_based .portal_items.bg-gray {
        padding-bottom: 40px !important;
    }

    #portal_based section.portal_items.section03 {
        padding: 40px 0 40px 20px;
    }

    #portal_based section.portal_items div.item-list.section03 {
        display: flex;
        width: 100vw;
        gap: 20px;
        margin: 40px 0 0;
        padding: 0 20px 0 0;
    }

    #portal_based section.portal_items div.item-list.section03 div.item.section03,
    #portal_based section.portal_items div.item-list.section03 div.item .thumb {
        width: 75vw;
    }

    #portal_based section.portal_items div.item-list div.item div.detail p.category {
        margin: 10px 0 0;
        font-size: 18px;
    }

    #portal_based section.portal_items div.item-list div.item div.detail h2.ttl-item {
        margin: 0 0 5px;
        font-family: serif !important;
        font-size: 13px;
        line-height: 1.2;
    }

    #portal_based .ttl-category {
        font-size: 30px;
    }

    #portal_based #section04 {
        padding: 20px 0 10px;
        font-size: 24px !important;
        line-height: 1.6;
        text-align: center;
    }

    #portal_based #section04 small {
        margin: 14px 0 0;
        font-size: 13px;
    }

    #portal_based .fade-wrapper {
        width: 100%;
        height: auto;
    }

    #portal_based .text-wrapper {
        padding: 0 24px !important;
    }

    #portal_based .article-content-inner {
        width: 100%;
    }

    #portal_based .article-product-summary--content {
        padding: 40px 30px !important;
    }

    #portal_based .scroll_down {
        display: block;
        position: absolute;
        z-index: 9999;
        right: 10%;
        bottom: 21%;
        transform: rotate(270deg);
        animation: arrowmove 2s ease-in-out infinite;
        font-size: 12px !important;
    }

    #portal_based .scroll_down.bottom01 {
        bottom: 37%;
    }

    #portal_based .scroll_down a {
        position: absolute;
        left: -24px;
        bottom: 17px;
        margin-bottom: 38px;
        color: #fff !important;
        font-family: serif;
        font-size: 13px;
        letter-spacing: .2em;
        writing-mode: vertical-rl;
        text-decoration: none;
        text-transform: uppercase;
    }

    #portal_based .scroll_down::before {
        content: "";
        position: absolute;
        right: -6px;
        bottom: 5px;
        width: 1.3px;
        height: 14px;
        background: #fff;
        transform: skewX(-40deg);
    }

    #portal_based .scroll_down::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 5px;
        width: 1px;
        height: 120px;
        background: #fff;
    }
}

@keyframes arrowmove {
    0%, 100% {
        right: 10%;
    }
    50% {
        right: 5%;
    }
}