@charset "UTF-8";

body {
    --color1: #ea4f42;
}
#back1 {
	background-image: url("images/back.jpg");
}
#Delivery,#Purchase {
	background-color: #371513;
}

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

.linkArea {
    position: relative;
    a,a span {
        display: block;
        background: #ea4f42;
        color: #fff;
        height: 3.6em;
        line-height: 3.6em;
        text-align: center;
    }
    a {
        text-decoration: none;
        border-radius: .5em;
        transition: all .2s 0s ease-out;
        span {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            letter-spacing: .1em;
            font-size: 1.1em;
            font-weight: bold;
            border-radius: .5em;
        }
        span::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 3%;
            width: 10px;
            height: 10px;
            border: 1px solid;
            border-color: transparent #fff #fff transparent;
            transform: translateY(-50%) rotate(45deg);
            transition: all 160ms ease-out;
        }
    }
    a:hover,a:focus {
        opacity: .6;
        transform: translate(0, .1em);
    }
    a:hover span::after {
        transform: translateY(-50%) rotate(45deg) translateX(2px);
    }
}

article small {
    display: block;
    margin-top: 3em;
    text-align: center;
}

#Product {
    .contArea h3 {
        position: relative;
        line-height: 1.3;
        span {
            display: block;
            font-size: 70%;
        }
    }
    .contArea h4 {
        color: var(--color1);
    }
    .contArea h4::after {
        background-color: var(--color1) !important;
    }
    .contArea h5 { 
        font-size: 1.1em;
        color: var(--color1);
        border-bottom: var(--color1) 1px solid;
    }
}

#Benefits {
    .item h3 span { font-size: 86%; }
    .btn a { background-color: var(--color1); }
    .att {
        margin-inline: 1em;
        padding-bottom: 1.5em;
        line-height: 1.6;
        font-size: 90%;
    }
}

#bd .img img { background-image: url("images/bd.jpg"); }
#dvd1 .img img { background-image: url("images/dvd1.jpg"); }
#dvd2 .img img { background-image: url("images/dvd2.jpg"); }

.kenon .img img { background-image: url(./images/kenon.jpg); }
.amazon1 .img img { background-image: url(./images/amazon1.jpg); }
.amazon2 .img img { background-image: url(./images/amazon2.jpg); }
.asmart .img img { background-image: url(./images/asmart.jpg); }
.hmv .img img { background-image: url(./images/hmv.jpg); }
.kenon .img img { background-image: url(./images/kenon.jpg); }
.moviecan .img img { background-image: url(./images/movican.jpg); }
.rakuten .img img { background-image: url(./images/rakuten.jpg); }
.stardust .img img { background-image: url(./images/stardust.jpg); }


/* min-width 769px */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
header h1 img {
	padding-top: 50.5%;
    background-size: 100% auto;
}
.linkArea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5em;
    max-width: 800px;
    margin: 2em auto auto;
}
#Benefits {
    .hmv.item { margin-right: 20% !important; }
    .star.item { margin-right: 1em !important; }
}
}


/* max-width 768px */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
header h1 img {
	padding-top: 202.6%;
}
.linkArea {
    margin: 4vw 3vw auto;
    a:not(:first-of-type) {
        margin-top: 3vw;
    }
}
}