@charset "UTF-8";

body {
    --color1: #c32115;
    --color2: #ed6b29;
}

#back1 {
	background-image: url("images/back.jpg");
}

section h2.mt1 {
	color: #fff;
}
section h2.mt2 {
	color: #fff;
	background-color: var(--color1);
}
section h2.mt2::after {
	border-color: var(--color1) transparent transparent transparent;
}

#Introduction {
    background-color: var(--color1);
    color: #fff;
    h3 {
        margin-bottom: .4em;
        padding-bottom: .2em;
        border-bottom: 1px solid #fff;
        font-size: 120%;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 700;
    }
}

#Product {
    .contArea h3 { line-height: 1.4; }
    .contArea h4 {
        color: var(--color1);
    }
    .contArea h4::after {
        background-color: var(--color1) !important;
    }
    .contArea h5 {
        font-size: 100%;
        border-bottom: 1px solid #000;
    }
    .shiyo {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: .3em .5em;
        font-size: 105%;
        font-weight: bold;
        color: #fff;
        background-color: var(--color1);
        border-radius: 5px;
        span {
            display: inline-block;
            margin-right: .5em;
            padding: .1em .5em;
            color: var(--color1);
            background-color: #fff;
        }
    }
}

#Purchase {
	background-color: var(--color2);
}


/* img */
#bd_com .img img { background-image: url("images/bd_com.jpg"); }
#bd .img img { background-image: url("images/bd.jpg"); }
#dvd .img img { background-image: url("images/dvd.jpg"); }


/* min-width 769px */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
header h1 img {
	padding-top: 52.22%;
}
#Benefits {
    .itemArea{
        padding-left: 3em;
        padding-right: 3em;
    }
    .itemArea .item {
        width: calc(calc(100%/2) - 1rem);
    }
}
}


/* max-width 768px */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
header h1 img {
	padding-top: 161.33%;
}
#Product {
    .contArea h3 { font-size: 140%; }
}
}