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

#chapelDesc {

width: 100%;
position: relative;
background-image: url("../w2img/20200916183909chapelpic01.jpg");
background-repeat: no-repeat;
background-position: top right;
min-height: 900px;

}

#chapelDesc > section {
max-width:1280px;
margin: 0 auto;
width: 94%;
position: relative;
}
#chapelDesc > section:before {
content: "";
display: block;
background: url("../img/wedding/ganabira01.png") no-repeat left top;
background-size: contain;
width:35%;
max-width: 500px;
height: 300px;
left: -100px;
top:-50px;
position: absolute;
}
#chapelDesc > section:after {
content: "";
display: block;
background: url("../img/wedding/hanabira02.png") no-repeat left top;
background-size: contain;
width:35%;
max-width: 169px;
height: 300px;
right: -55px;
bottom:-50px;
position: absolute;
}
#chapelDesc > section h2 {
writing-mode:horizontal-tb;
color: #fff;
position: relative;
top:70px;
left: -30%;
width: 0;
text-align: left;
z-index: 2;
font-weight: normal;
display: flex;
flex-direction: row-reverse;
}
#chapelDesc > section h2 span {
display: inline-block;
background: rgba(255,255,255,.5);
line-height: 55px;
padding: 1rem;
font-size: 2.7rem;
color:#fff;
text-shadow: 0 0 10px #333;
margin-left: 1rem;
letter-spacing: .3rem;
width: 75px;
}
#chapelDesc > section .txtArea {
padding-top: 230px;
}
#chapelDesc > section .txtArea p {
width: 40%;
}
#chapelDesc > section .txtArea ul {
position: absolute;
max-width: 900px;
width: 60%;
right: 0px;
bottom:-50px;
display: flex;
}
#chapelDesc > section .txtArea ul li {
margin: 0 10px;
}
#chapelDesc > section .txtArea ul li:first-of-type {
margin-top: 2rem;
}
#chapelDesc > section .txtArea ul li img {
box-shadow: 0 0 10px #ddd;
}

@media screen and (max-width: 1280px) {
#chapelDesc {
background-position:  -550px top;
background-size: cover;
}
#chapelDesc > section h2 {
top: 50px;
left: -420px;
width: 310px;
}
#chapelDesc > section:after {
right: -30px;
}
}

@media screen and (max-width: 1000px) {
#chapelDesc > section h2 {
width: 450px;
}
}

@media screen and (max-width: 812px) {
#chapelDesc > section:after {
content: none;
}
#chapelDesc {
min-height: 700px;
}
#chapelDesc > section h2 {
left: -120px;
width: 0;
}
#chapelDesc > section .txtArea {
padding-top: 95px;
}
#chapelDesc > section .txtArea p {
width: 50%;
}
#chapelDesc > section .txtArea ul {
width: 48%;
}
#chapelDesc > section .txtArea ul li {
margin: 0 3px;
}
}

@media screen and (max-width: 640px) {
#chapelDesc > section h2 {
left: -60px;
}
}

@media screen and (max-width: 480px) {
#chapelDesc {
background-position: -180px top;
background-size: 200%;
}
#chapelDesc > section .txtArea ul{
position: relative;
margin-top: 1rem;
right: auto;
bottom: auto;
}
#chapelDesc > section .txtArea ul,
#chapelDesc > section .txtArea p {
width: 100%;
}
#chapelDesc {
min-height:inherit;
}
#chapelDesc > section h2 {
left: -15px;
top: 15px;
}
#chapelDesc > section h2 span {
font-size: 1.7rem;
line-height: 40px;
width: 60px;
}
#chapelDesc > section .txtArea {
padding-top: 45px;
}
#chapelDesc > section:after {
display:none;
}
}

/* =======================================
#gallery
======================================= */
#slider {
margin-top: 10rem;
}

#slider h3 {
text-align: center;
width: 96%;
margin: 0 auto;
color: #A9CEC4;
font-size:4rem;
position: relative;
z-index: 1;
}
#mainSlider {
margin-top: -3rem;
position: relative;
z-index: 0;
}
#mainSlider img {
width: 100%;
height: 550px;
object-fit: cover;
}
#thumbSlider {
max-width:800px;
margin: 0 auto;
}
#thumbSlider li {
margin: 1rem 2px;
width: calc(100% / 5 - 4px);
}
#thumbSlider li img {
width: 100%;
object-fit: cover;
height: 90px;
}

@media screen and (max-width: 1024px) {
#mainSlider img {
height: 340px;
}
}

@media screen and (max-width: 812px) {
#mainSlider img {
height: 240px;
}
}

@media screen and (max-width:480px) {
#slider {
margin-top: 3rem;
}
#thumbSlider li img {
height: 50px;
}
#slider h3 {
font-size: 3rem;
}
#mainSlider {
margin-top: -2.3rem;
}
}

/* =======================================
#option
======================================= */
#option {
margin-top: 7rem;
}
#option > div {
background: #FAF6EC;
padding: 3rem 0;
margin: 2rem auto;
}

#option .flexBox {
width: 94%;
max-width:1280px;
margin: 0 auto;
position: relative;
}

#option .flexBox:before {
content: "";
background: url("../img/wedding/kazari01.png") no-repeat;
background-size: contain;
width: 120px;
height: 120px;
position: absolute;
top: -70px;
left: -30px;
}

#option .flexBox:after {
content: "";
background: url("../img/wedding/kazari02.png") no-repeat;
background-size: contain;
width: 90px;
height: 90px;
position: absolute;
bottom: -70px;
right: -17px;
}

#option .flexBox dl {
width: 25%;
padding:  0 2rem;
margin-top: 2rem;
border-right:1px solid #C6C6C6;
}

#option .flexBox dl:nth-child(4n+4) {
border-right: none;
}

#option .flexBox dl:nth-child(-n+4) {
margin-top: 0;
}

#option .flexBox dl dt {
text-align: center;
color: #445752;
font-size: 1.4rem;
}
#option .flexBox dl dd {
font-size: .9rem;
}
#option .flexBox dl dd .price {
color: #A9CEC4;
font-size: 1.3rem;
display: block;
margin:1rem auto;
text-align: center;
}
#option .flexBox dl dd div {
display: block;
text-align: center;
width: auto;
margin: 0 auto 1rem;
}

#option .flexBox dl dd div p {
text-align: left;
display: inline-block;
}
#option .flexBox dl dd .price strong {
font-size: 150%;
}

#option .other {
width: 92%;
max-width:1280px;
margin: 5rem auto;
}

#option .other h4 {
font-size: 2rem;
text-align: center;
background: url("../img/wedding/leaf.png") no-repeat center bottom;
padding-bottom: 1.5rem;
}
#option .other table {
border-collapse: collapse;
margin-top: 3rem;
width: 100%;
box-sizing: border-box;
}
#option .other tr {
border-bottom: #707070 1px dashed;
}
#option .other tr > * {
padding: 1rem 1.3rem;
text-align: left;
}

#option .other tr th {
width: 28%;
color: #6F6304;
}
#option .other tr td {
width: 65%;
}
#option .other tr td.priceTxt {
width: 7%;
background: #FAF5F9;
}

#option .other table + p {
text-align: center;
margin: 2rem auto;
}

@media screen and (max-width: 1024px) {
#option .flexBox dl {
width: 50%;
}
#option .flexBox dl:nth-of-type(2) {
border-right: none;
} 
#option .flexBox dl:nth-of-type(-n + 2) {
margin-bottom: 3rem;
}
}

@media screen and (max-width: 480px) {
#option .flexBox dl {
width: 100%;
border-right: none;
border-bottom: 1px solid #c6c6c6;
padding: 2rem;
}
#option .flexBox dl:last-of-type {
border-bottom: none;
}
#option .flexBox dl:nth-of-type(-n + 2) {
margin-bottom: 0;
}
}

#option .other tr {
display: flex;
flex-wrap:wrap;
}
#option .other tr > * {
display: block;
}
#option .other tr th {
width: 62%;
padding: 1rem;
}
#option .other tr td.priceTxt {
width: 38%;
align-self: center;
}
#option .other tr td:last-of-type {
padding: 0 1.3rem 1rem;
}
#option .other tr td {
width: 100%;
}