@charset "UTF-8";

/*==============================================
 共通 ここから
================================================*/
html {
    font-size: 16px;
    @media screen and (max-width: 1000px) {
    font-size: 14px;
    .tablet-none{display: none;}
    }
}
/* 変数指定 */
:root {
    --main-text-color: #1c1c1d;
    --font-size-text: 1rem;
}

/* フッター外の背景も指定 */
body {
    background-color: #fff;
}
/* パンくず削除 */
#pankuzu {
    display: none;
}
main, main#wrapper {
    padding: 0;
    max-width: none !important;
}
#marketplace-introduction img {
    width: 100%;
    height: 100%;
    display: block;
}
#marketplace-introduction a {
    display: block;
}
#marketplace-introduction a:hover {
    opacity: .7;
}
#marketplace-introduction .pc-none {
    display: none;
}
/* マーカー */
span.marker {
    background: linear-gradient(transparent 60%, #fbab3b99 40%);
    font-weight: bold;
    line-height: 1;
}
/* SVG共通 */
#marketplace-introduction svg {
    width: 100%;
    height: auto;
    display: block;
}
/* 価格プロリセット */
.buy_price>ol .spesicalprice, .buy_price>ul .spesicalprice {
    display: none;
}
.buy_price>ul .intax {
    display: none !important;
}
.buy_price>ol .price, .buy_price>ul .price {
    color: #eb0012;
    font-size: 4cqw; /* 30px */
    display:inline-block
}
/* ¥マークの指定 */
.buy_price>ol .price, .buy_price>ul .price::first-letter {
    font-size: 3cqw;
}

/* ヘッダー画像削除 */
.header-info-red a{
    display: none;
}
/* header-sticky 高さ固定 */
.header-sticky {
    top: 141px !important;
}

/* ヘッダー画像削除 */
.header-info img {
    display: none;
}
/* フッター調整 */
footer {
    position: relative;
}
footer,
footer .bottom {
    margin: 0 !important;
}
article#contents {
    padding-bottom: 0 !important;
}

/*==============================================
#marketplace-introduction 共通 ここから
================================================*/
/* フォント */
#marketplace-introduction{
    color: var(--main-text-color);
    font-size: var(--font-size-text);
}
#marketplace-introduction p {
    font-size: var(--font-size-text);
}

/* セクション共通 */
#marketplace-introduction .section {
    position: relative;
}

/*==============================================
#marketplace-introduction 共通 ここまで
================================================*/
#marketplace-introduction .marketplace-introduction__outer{
    background: url(../../IMAGE/marketplace-introduction/parts_confetti02.webp),url(../../IMAGE/marketplace-introduction/parts_confetti01.webp)  ;
    background-position: top 0px right 0px,bottom 0px left 0px;
    background-size: 30%;
    background-repeat: no-repeat;
    background-color: #f6f9fc;
}


#marketplace-introduction .marketplace-introduction__inner {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    @media screen and (max-width: 1400px) {
    min-width: 600px;
    }
}

#marketplace-introduction #top {
    position: relative;
    overflow-x: clip;
    display: flex;
    align-items: center;

    .top-item {
        width: 100%;
        min-width: 400px;
        box-sizing: border-box;
        padding:3% 0;

        & h1{
            text-align: center;
            margin:3% 0 ;
            font-size: 2.4rem;
        }
        & span{
            color:#e42537;
            font-size: 2.4rem;}
        & p{text-align: center;
        }

        .top-item__img {
            width: 30%;
            margin: 0 auto;
        }

        .top-item__btn {
            position: relative;
            width: 64%;
            margin: 4% auto;
            padding: .7em 0;
            text-align: center;
            background: linear-gradient(180deg, #ea315b 10%, #de0d2a 90%);
            color: #FFF !important;
            border-radius: 100px;
            font-size: 1.5rem;
            box-shadow: 0px 10px 10px -6px rgba(7, 16, 63, 0.3);

            &::after {
                position: absolute;
                display: inline-block;
                vertical-align: middle;
                content: "";
                width: .4em;
                height: .4em;
                border-top: 3px solid #fff;
                border-right: 3px solid #fff;
                top: 0;
                bottom: 0;
                right: 8%;
                margin: auto;
                transform: rotate(45deg);
                transition: all 0.3s ease 0s;
            }
        }
    }
    .top-pic{
        width: 100%;
        min-width: 500px;
        @media screen and (max-width: 1400px) {
        min-width: 450px;
        }
        
        & img {
            width: 100%;
            object-fit: cover;
            object-position:top;
            margin: auto; 
        }
    }
}
/* ==============================================
コンテンツ
================================================*/
#marketplace-introduction #contents01{
    background: linear-gradient(135deg, #e9eef3 10%, #f6f9fc 90%);
    color: white;
    padding: 5% 5% 1%;

    .contents-wrap{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 5%;

        .contentsbox{
            width: calc(100% / 2);

            .elementsbox{
                display: flex;
                flex-wrap: wrap;
                gap:2%;
                color: #1c1c1d;

                & h2{font-size: 2rem;}
                & p{
                    margin: 5% 0;}
                .co_02{width: calc(66% / 2)}              
                }
        }
    }
}
            .elementsbox-picture{
                margin: 0 auto; 
                .pic{width: 80% !important; }
                }

#marketplace-introduction #finish{
    background: #fff;
    color: #1c1c1d;
    padding: 5%;
    text-align: center;

    & h2{
        color:#e42537;
        font-size: 1.8rem; 
        margin-bottom: 3%;}
    & p{font-size: 1.2rem;}

        .top-item__btn {
            position: relative;
            width: 60%;
            margin: 4% auto;
            padding: .8em 0;
            text-align: center;
            background: linear-gradient(180deg, #ea315b 10%, #de0d2a 90%);
            background-size: 200% auto;
            background-position: right center;
            color: #FFF !important;
            border-radius: 100px;
            font-size: 1.5rem;
            box-shadow: 0px 10px 10px -6px rgba(7, 16, 63, 0.3);

            &::after {
                position: absolute;
                display: inline-block;
                vertical-align: middle;
                content: "";
                width: .4em;
                height: .4em;
                border-top: 3px solid #fff;
                border-right: 3px solid #fff;
                top: 0;
                bottom: 0;
                right: 8%;
                margin: auto;
                transform: rotate(45deg);
                transition: all 0.3s ease 0s;
            }
            &:hover {
            background-position: left center !important;
            color: white !important;
            }
        }
}