@charset "UTF-8";
:root {
    --color_yellow: #ffd200;
}
#back1 {
	background-color: var(--color_yellow);
}
#Delivery,#Purchase {
	background-color: #000;
}

section h2.mt1 {
	color: #fff;
}
section h2.mt2 {
	color: #fff;
	background-color: #000;
}
section h2.mt2::after {
	border-color: #000 transparent transparent transparent;
}


#Delivery {
    .itemlist {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 1em;
        margin-top: 2em;
        p {
            overflow: hidden;
            width: 25%;
            border-radius: 5px;
        }
        a {
            display: block;
            transition: opacity .2s ease-out;
            img { width: 100%; height: auto; }
        }
        a:hover { opacity: .6; }
    }
    .deliverybtn {
        padding: 1.75em 0;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        font-size: 120%;
        background-color: var(--color_yellow);
    }
}

#Introduction {
    padding: 0;
    background-color: #fff;
    > div:first-of-type { padding: 0 2em 2em; }
    .mt1 {
        padding: .6em 0;
        color: var(--color_yellow);
        background-color: #000;
    }
    .photo {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background-color: #fff;
        figure {
            box-sizing: border-box;
            padding: 3px;
        }
        img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 400 / 267;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% auto;
        }
    }
}

#Product {
    .contArea h3 { line-height: 1.3; }
    h5 { font-size: 100%; }
}

/* img */
#bd .img img { background-image: url("images/bd.jpg"); }
.pcsc .img img { background-image: url("images/pcsc.jpg"); }
.amazon .img img { background-image: url("images/amazon.jpg"); }
.rakuten .img img { background-image: url("images/rakuten.jpg"); }
.p1 { background-image: url(./images/p1.jpg); }
.p2 { background-image: url(./images/p2.jpg); }
.p3 { background-image: url(./images/p3.jpg); }
.p4 { background-image: url(./images/p4.jpg); }


/* min-width 769px */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
/* header h1 img {
	padding-top: ;
} */
}


/* max-width 768px */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
header h1 img {
	padding-top: 100%;
}
#Delivery {
    .itemlist {
        column-gap: 2%;
        margin-top: 3vw;
        p { width: 48%; }
    }
    .deliverybtn { padding: 1.1em 0; }
}
#Product {
    .contArea h3 { font-size: 180%; }
}
#Introduction {
    > div:first-of-type { padding: 0 3vw 6vw; }
    .photo { grid-template-columns: repeat(2, 1fr); }
}
}