@charset "UTF-8";
#back1 {
	background-image: url("images/back.jpg");
}
#Delivery,.Purchase {
	background-color: #111;
}
section h2.mt1 {
	color: #fff;
}
section h2.mt2 {
	color: #fff;
	background-color:#01a3a6;
}
section h2.mt2::after {
	border-color: #01a3a6 transparent transparent transparent;
}

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

#Product .contArea h3 {
    padding-bottom: .5em;
}
#Product .contArea h3 span {
    display: block;
}
#Product .contArea h3 span:first-of-type {
    margin-bottom: .5em;
}
#Product .contArea .startxt {
    font-weight: bold;
    
}
#Product .contArea h5 { 
    font-size: 1.1em;
    border-bottom: #000 1px solid;
}

.linkArea {
    position: relative;
}
.linkArea a,
.linkArea a span {
  display: block;
  background: #01a3a6;
  color: #fff;
  height: 3.6em;
  line-height: 3.6em;
  text-align: center;
}
.linkArea a {
  text-decoration: none;
  border-radius: .5em;
  transition: all .2s 0s ease-out;
}
.linkArea a:hover,
.linkArea a:focus {
  opacity: .6;
  transform: translate(0, .1em);
}
.linkArea a 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;
}
.linkArea a 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;
}

.linkArea a:hover span::after {
  transform: translateY(-50%) rotate(45deg) translateX(2px);
}


#Benefits .itemArea {
    text-align: center;
}
#Benefits .att {
    padding: 0 1em 1em 1em;
    line-height: 1.5;
    font-size: 90%;
}

#bd_pre .img img { background-image: url(./images/bd.jpg); }
#dvd_pre .img img { background-image: url(./images/dvd1.jpg); }
#dvd_tsu .img img { background-image: url(./images/dvd2.jpg); }
#Benefits .img img { background-image: url(./images/tokuten.jpg); }

/* 一時的 */
.wowshop {
    position: relative;
}
.wowshop a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 300 / 96;
    text-decoration: none;
    background-color: #fff;
}


/* min-width 769px */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {

header h1 img {
    padding-top: 66.6%;
    background-size: 100% auto;
}

.linkArea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5em;
    max-width: 800px;
    margin: 2em auto auto;
    }

.PopUP {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5em;
    max-width: 800px;
    margin: 2em auto auto;
    }



#Benefits .itemArea .item {
    width: 50%;
    margin-top: 2rem;
    display: inline-block;
    letter-spacing: normal;
    vertical-align: top;
}
}


/* max-width 768px */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
header h1 img {
	padding-top: 133.3%;
}
.linkArea {
    margin: 4vw 3vw auto;
}
.linkArea a:not(:first-of-type) {
    margin-top: 3vw;
}
#Product .contArea h3 {
    font-size: 140%;
}

header h1 img {
    padding-top: 185vw;
}

#Benefits .itemArea .item {
    width: 100%;
    margin-top: 2rem;
    display: inline-block;
    letter-spacing: normal;
    vertical-align: top;
}

}