@charset "UTF-8";
main > section:first-child .txtArea {
text-align: center;
margin: 3rem auto;
width:90%;
}

main > section:first-child .txtArea p {
display: inline-block;
text-align:left;
}
/* =======================================
#list 商品のリスト
======================================= */
#list,#itemDetail article .flexBox {
display: flex;
flex-wrap:wrap;
justify-content: center;
max-width:1280px;
margin: 0 auto;
width: 94%;
}

#list a {
display: block;
width: calc(100% / 4 - 1%);
background:url("../img/commodity/blue_bnr.jpg");
border-radius: 10px;
margin: 0 .5% 2rem;
}

#list a figure {
display: flex;
align-items: center;
position: relative;
}

#list a figure:after {
position: absolute;
top: 3px;
left: 3px;
display: block;
border:1px solid #808080;
content: "";
width: 100%;
height: 100%;
border-radius: 10px;
}

#list a figure img,
#list a figure figcaption {
width: 48%;
color: #fff;
text-align: center;
position: relative;
z-index: 5;
line-height: 150%;
}

#list a:nth-of-type(6) {
background:url("../img/commodity/purple_bnr.jpg");
}

#list a:nth-of-type(7) {
background:url("../img/commodity/yellow_bnr.jpg");
}

#list a figure img {
margin-top: -10px;
}

@media screen and (max-width: 812px){
#list a {
width: calc(100% / 3 - 2%);
margin: 0 1% 1.5rem;
}
}
@media screen and (max-width: 480px) {
#list a {
width: calc(100% / 2 - .6rem);
margin: 0 .3rem 1rem;
}
#list a figure figcaption {
padding: .5rem 0;
}
#list a figure img {
margin-top: -2px;
}
}

/* =======================================
#itemDetail 商品情報
======================================= */

#itemDetail {
margin-top: 5rem;
}

#itemDetail article > div:not(.flexBox) {
background: #F7F7FD;
text-align: center;
position: relative;
margin-top: 7rem;
}

#itemDetail article > div:not(.flexBox)::after {
content: "";
width: 100%;
height: 20px;
background: url("../img/common/line-flag.svg") repeat-x;
background-size: contain;
display: block;
position: absolute;
bottom: -20px;
}

#itemDetail article > div:not(.flexBox) span {
display: block;
}

#itemDetail article > div:not(.flexBox) h4 {
max-width: 980px;
margin: 0 auto;
padding: 2.5rem;
font-size: 1.5rem;
color: #9CD8D8;
line-height: 150%;
position: relative;
}

#itemDetail article > div:not(.flexBox) h4:before {
content: "";
display: block;
height: 130%;
width: 50%;
background: url("../img/commodity/omiya_pic.png") no-repeat;
background-size:contain;
position: absolute;
left: 0;
top:-30%;
z-index: 0;
}

#itemDetail article#birthday > div:not(.flexBox) h4:before {
background: url("../img/commodity/birthday_pic.png") no-repeat;
background-size:contain;
}

#itemDetail article#shichi > div:not(.flexBox) h4:before {
background: url("../img/commodity/shichi_pic.png") no-repeat;
background-size:contain;
}

#itemDetail article#sekku > div:not(.flexBox) h4:before {
background: url("../img/commodity/sekku.png") no-repeat;
background-size:contain;
}
#itemDetail article#entry > div:not(.flexBox) h4:before {
background: url("../img/commodity/entry_pic.png") no-repeat;
background-size:contain;
}

#itemDetail article#adult > div:not(.flexBox) h4:before {
background: url("../img/commodity/adult_pic.png") no-repeat;
background-size:contain;
}
#itemDetail article#goods > div:not(.flexBox) h4:before {
background: url("../img/commodity/goods_pic.png") no-repeat;
background-size:contain;
}

#itemDetail article > div:not(.flexBox) h4 > span {
position: relative;
z-index: 1;
}
#itemDetail article > div:not(.flexBox) h4 > span > span {
color: #333;
font-size: 1rem;
font-family: 'TsukuBRdGothic-Regular','Courier',sans-serif;
line-height: 130%;
}

#itemDetail article .flexBox {
margin: 7rem auto 3rem;
max-width:1140px;    
counter-reset: subsection;
}

#itemDetail article .flexBox.colmun3 {
max-width: 1800px;
}

#itemDetail article .flexBox > section {
width: 47%;
margin: 3rem 1.5% 0;
background: #FAF6EC;
padding: 2rem 3rem 2rem;
border-radius: 10px;
display: flex;
align-items: center;
flex-direction: column;
position: relative;
}

#itemDetail article:last-of-type {
margin-bottom: 10rem;
}

#itemDetail article .flexBox > section h5 {
position: relative;
margin-top: -60px;
text-align: center;
left: 0;
font-size: 1.7rem;
font-weight: bold;
}
#itemDetail article .flexBox > section h5 span {
display: inline-block;
margin-right: 1.5rem;
font-family: 'Gill Sans','Franklin Gothic Medium',sans-serif;
font-weight: 400;
line-height: 110%;
font-size: 2.3rem;
border-bottom:1px solid #333;
}
#itemDetail article .flexBox > section h5 span::before {
counter-increment: subsection;
content: " 0"counter(subsection)" ";
}
#itemDetail article .flexBox > section:nth-child(+n+10) h5 span::before {
counter-increment: subsection;
content: " "counter(subsection)" ";
}
#itemDetail article .flexBox figure {
display: flex;
}
#itemDetail article .flexBox figure img {
max-width: 400px;
margin: 0 auto;
width: 100%;
height: 200px;
object-fit: contain;
}
#itemDetail article .flexBox figure:not(.noTxt) img {
width: 52%;
}

#itemDetail article .flexBox figcaption{
width: 45%;
align-self: center;
font-weight: 700;
}

#itemDetail article .flexBox .txtArea {
text-align: center;
margin-top: 1rem;
padding-top: 1.5rem;
border-top:1px solid #BEBEBE;
width: 100%;
box-sizing: border-box;
}

#itemDetail article .flexBox .txtArea p:first-of-type {
display: inline-block;
text-align: left;
margin-bottom: 1.3rem;
}

#itemDetail article .flexBox .txtArea dl {
display: flex;
justify-content: center;
flex-wrap:wrap;
}
#itemDetail article .flexBox .txtArea dl dt {
width: 45%;
text-align: right;
line-height: 110%;
align-self: center;
font-size: .9rem;
}
#itemDetail article .flexBox .txtArea dl dd {
font-weight: 400;
color: #A9CEC4;
font-size: 1.2rem;
width: 55%;
align-self: center;
}
#itemDetail article .flexBox .txtArea dl dd strong {
font-size: 2rem;
font-family: 'Gill Sans','Franklin Gothic Medium',sans-serif;
font-weight: 400;
padding: 0 .3rem;
}


@media screen and (min-width: 1367px) {
#itemDetail article .flexBox.colmun3 > section {
width: 32%;
margin: 3rem .5% 0;
}
}
@media screen and (max-width: 1280px) {
#itemDetail article .flexBox > section {
padding: 2rem;
}
#itemDetail article .flexBox .txtArea dl dt {
width: 45%;
}
#itemDetail article .flexBox .txtArea dl dd {
width: 50%;
}
}
@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 812px){
#itemDetail article .flexBox figure:not(.noTxt) {
flex-wrap:wrap;
}
#itemDetail article .flexBox > section {
width:49%;
margin:  0 .5% 2rem;
}
#itemDetail article .flexBox figcaption,
#itemDetail article .flexBox figure:not(.noTxt) img,
#itemDetail article .flexBox .txtArea dl dd,
#itemDetail article .flexBox .txtArea dl dt{
width: 100%;
}
#itemDetail article .flexBox .txtArea dl dt {
text-align: center;
}
}
@media screen and (max-width: 480px) {
#itemDetail article > div:not(.flexBox) h4 {
z-index: 1;
}

#itemDetail article > div:not(.flexBox) h4 span {
text-shadow: 1px 1px 3px #fff;
padding-left:20%;
}
#itemDetail article > div:not(.flexBox) h4:before {
width: 60%;
height: 80%;
top: 20%;
}
#itemDetail article .flexBox > section {
width: 100%;
}
#itemDetail article .flexBox figure img {
height: 150px;
}
#itemDetail article .flexBox > section h5,
#itemDetail article .flexBox > section h5 span {
font-size: 1.3rem;
margin-top: -55px;
}
#itemDetail article .flexBox {
margin: 4rem auto 0;
}
}