@charset "utf-8";
/* CSS Document */
main h2 {
width: auto;
max-width: none;
}

/* =======================================
#chapelDesc
======================================= */
.planDetail.type02 h3,
.planDetail.type02 h3 + p{
width:  90%;
order: -3;
text-align: center;
margin: 0 auto;
}
.planDetail.type02 {
justify-content: center;
}
.blue .planDetail h3 {
text-shadow: 0 0 6px #82C9B6;
color: #fff;
font-size: 3rem;
font-style:italic;
}

.blue .planDetail h3 + p {
color: #A9CEC4;
font-size: 1.5rem;
margin-bottom: 4rem;
}

.planDetail > section {
max-width:500px;
margin-left: 3.5rem;
}

.planDetail section dl:first-of-type {
display: flex;
align-items: flex-end;
margin-top: 1rem;
}

.planDetail.type02 section dl:first-of-type dt {
color: unset;
}

.planDetail section dl:first-of-type dt {
font-size: 1.3rem;
margin-right: 1rem;
}
.planDetail section dl:first-of-type  dd strong {
font-size: 1.5rem;
color: #A9CEC4;
}

.planDetail section dl:first-of-type  dd strong span {
font-size: 2.5rem;
}

.planDetail section dl:first-of-type + .txtArea {
margin-top: .5rem;
}

@media screen and (max-width: 1280px) {
.planDetail > section {
width: 48%;
margin-left:4%;
}
.planDetail ul.list li {
width: 100px;
height: 100px;
}
}
@media screen and (max-width: 1024px) {
.planDetail > section {
width: 48%;
margin-left:4%;
}
.planDetail section dl:first-of-type {
flex-wrap:wrap;
}
.planDetail section dl:first-of-type dt,
.planDetail section dl:first-of-type dd {
width: 100%;
}
}

@media screen and (max-width: 812px){
.planDetail > section {
max-width: none;
width: 100%;
margin-left: 0;
}


.blue .planDetail h3 + p {
margin-bottom: 2rem;
}

}

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

#itemDetail {
margin-top: 5rem;
}

#itemDetail > h3 {
margin: 0 auto;
padding: 3rem 3rem 0;
max-width:400px;
text-align: center;
font-size: 2.5rem;
color: #A9CEC4;
background: url("../img/wedding/item_ttl.png") no-repeat center top;
position:relative;
}

#itemDetail > h3:before,
#itemDetail > h3:after {
content: "";
font-weight: normal;
height: 70%;
width: 1px;
display: block;
background: #A9CEC4;
position: absolute;
top: 30%;
left: -3%;
transform: rotate(35deg);
}

@media screen and (max-width: 812px){
.blue .planDetail h3 {
line-height: 100%;
margin-bottom: 1rem;
}
.planDetail ul.list {
justify-content: center;
}
.planDetail ul.list li {
width: 130px;
height: 130px;
border-radius: 50%;
margin: 2px;
}
.planDetail .list + .txtArea + .flexBox {
margin-top: 1rem;
}
}
#itemDetail > h3:after {
right: -3%;
left: auto;
}

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

#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%;
position: absolute;
left: 0;
top:-30%;
background: url("../img/commodity/omiya_pic.png") no-repeat;
background-size:contain;
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;
line-height: 130%;
}

#itemDetail article .flexBox {
margin: 2rem auto 3rem;
max-width:1140px;
}

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

#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;
top: 0;
text-align: center;
left: 0;
margin-top: -60px;
font-size: 1.7rem;
font-weight: bold;
padding-left: 58px;
}

#itemDetail article .flexBox > section h5::before {
counter-increment: subsection;
content: " 0"counter(subsection)" ";
border-bottom: 1px solid #333;
display: inline-block;
margin-right: 1.5rem;
font-weight: 400;
line-height: 110%;
font-size: 2.3rem;
position: absolute;
left: 0;
}

#itemDetail article .flexBox > section:nth-child(+n+10) h5 span::before {
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%;
}

#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-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 > h3:before {
height: 40%;
left:7%;
top: 45%;
}

#itemDetail > h3:after {
height: 40%;
right: 7%;
top: 45%;

}

#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: 90%;
margin: 0 auto 1rem;
}
#itemDetail article .flexBox figure img {
height: 150px;
}
#itemDetail article .flexBox > section h5 {
font-size: 1.3rem;
margin-top: -50px;
}
#itemDetail article .flexBox {
margin: 4rem auto 0;
}
}


/* =======================================
#gallery
======================================= */
.galleryTtl + .flexBox figure {
width: 25%;
position: relative;
z-index: 0;
transition: .3s all;
}

.galleryTtl + .flexBox figure:hover {
opacity: .6;
}

.galleryTtl + .flexBox figcaption {
width: 100%;
height: 35%;
position: absolute;
bottom:0;
padding: 2rem;
z-index: 1;
background: rgba(255,255,255,.6);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
font-size:1.7rem;
line-height: 180%;
color: #fff;
text-shadow: 0 0 10px #A73C5D;
}

.galleryTtl + .flexBox figure a {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}

.galleryTtl + .flexBox figcaption span {
font-size: 1.2rem;
color: #a57943;
text-shadow: none;
display: block;
}

@media screen and (max-width: 1024px) {
.galleryTtl + .flexBox figcaption {
font-size:1.15rem;
}
}

@media screen and (max-width: 812px) {
.galleryTtl + .flexBox figure {
width: 50%;
}

.galleryTtl + .flexBox figure img {
height: 500px;
width: 100%;
object-fit: cover;
}
}

@media screen and (max-width: 480px) {
.planDetail > section h3, h3.galleryTtl {
font-size: 2.5rem;
}
.galleryTtl + .flexBox figure img {
height: 280px;
}
.galleryTtl + .flexBox figcaption {
padding: .5rem;
font-size:1rem;
}

.galleryTtl + .flexBox figcaption span {
font-size: .8rem;
}
}