@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;500;700&display=swap');
body, main ol, main ul, main dl, main li, main dt, main dd, main table, 
main th, main td, main input, main textarea, main select, main h2 ,main h2 span, main h3,main h4, 
main h5, main h6, main figure, main p ,
#tab ul li a, #sub .txtArea h2 , #sub .txtArea p , .scrollNav h2 , .scrollNav li{
font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Times New Roman", serif;
}

* {
box-sizing: border-box;
letter-spacing: .08rem;
}
a:link {
text-decoration: none;
}
main {
display: block;
border-left: 10px solid #F3B9BA;
border-right: 10px solid #F3B9BA;
}


@media screen and (min-width: 1367px) {
body,html,#keyVisual,#keyVisual > ul,#keyVisual li {
height: 100% !important;
}
}

@media screen and (min-width: 751px) {
.brStyle {
display: none;
}
}

/* =======================================
    keyVisual
======================================= */
#keyVisual {
width: 100%;
margin: 0 0 0 auto;
text-align: left;
position:relative;
}
#keyVisual img {
width: 100%;
height: 938px;
object-fit: cover;
}
@media screen and (max-width: 1366px) {
#keyVisual img {
height: 880px;
}
}

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

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

@media screen and (max-width: 480px) {
#keyVisual img {
height:450px;
}
}


/* =======================================
#bridalFirst
======================================= */
#bridalFirst {
margin-top: -7rem;
padding-top: 3rem;
position: relative;
z-index: 3;
overflow: hidden;
}
#bridalFirst .txtDes {
text-align: center;
margin-bottom: 4rem;
color: #fff;
font-size: 1.2rem;
letter-spacing: -0.02rem;
transition: all ease 0.5s;
max-width: 800px;
margin: auto auto 4rem;
}
#bridalFirst:after {
content: "";
background:#F3B9BA;
display: block;
width: 2800px;
position: absolute;
left: calc(50% - 1400px);
height: 80%;
top: 0;
z-index: -1;
}
#bridalFirst .flexBox {
width: 90%;
max-width: 1280px;
margin: 0 auto;
justify-content: space-between;
}
#bridalFirst .flexBox section {
width: 48%;
background: #F6E4DB;
text-align: center;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
position: relative;
margin-top: 4rem;
}
#bridalFirst .flexBox section:nth-child(-n+2) {
margin-top: 0;
}
#bridalFirst .flexBox section:nth-child(2n+2) {
background: #C3DDD6;
}
#bridalFirst .flexBox section h4 {
font-size: 4rem;
font-style: italic;
color: #fff;
line-height: 100%;
width: 90%;
text-shadow: 0 0 6px #A73C5D;
margin: -2.5rem auto 0;
}
#bridalFirst .flexBox section:nth-child(2n+2) h4 {
text-shadow: 0 0 6px #3C76A7;
}
#bridalFirst .flexBox section h4 span {
font-style: normal;
font-size: 1.5rem;
display: block;
}
#bridalFirst .flexBox section p {
padding: 0 2rem 2rem;
font-size: 1.2rem;
}
#bridalFirst a {
display: block;
position: absolute;
width: 100%;
height:100%;
top: 0;
left: 0;
}
.wedTxt {
color: #fff;
font-weight: 500;
font-style: italic;
font-size: 5rem;
width: 90%;
max-width: none;
background: none;
}
main h2.wedTxt:after {
display: none;
}
.wedTxt span {
font-style:normal;
font-size: 2rem;
color: #584343;
position: relative;
width: 80%;
max-width:400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.wedTxt span:before,
.wedTxt span:after {
content: "";
width: 80px;
display: inline-block;
height: 1px;
position: absolute;
text-align: center;
background: #584343;
}
.wedTxt span:before {
left: -80px;
}
.wedTxt span:after {
right: -80px;
}
#bridalFirst h3 {
text-align: center;
color: #fff;
font-size: 3.5rem;
line-height: 150%;
background: url("../img/wedding/txtbg.png") no-repeat center bottom;
background-size: contain;
padding: 2rem  3rem 4rem;
}

@media screen and (max-width: 812px) {
#bridalFirst .flexBox section h4 {
font-size: 3rem;
}
#bridalFirst .flexBox section p {
text-align: left;
font-size: 1rem;
padding: 0 2rem 2rem;
}
#bridalFirst h3 {
padding: 0 0 2rem;
font-size: 2rem;
}
#bridalFirst .txtDes {
margin: auto auto 2rem;
width: 90%;
}
}

@media screen and (max-width: 480px) {
#bridalFirst .txtDes {
text-align: left;
font-size: 4.45vw;
}
.wedTxt {
font-size: 3rem;
font-weight: 200;
}
.wedTxt span {
font-size:1.3rem;
}
.wedTxt span:before, .wedTxt span:after {
width: 40px;
top: 39px;
}
.wedTxt span:before {
left: -10px;
}
.wedTxt span:after {
left: auto;
right: -10px;
}
#bridalFirst {
padding-top: 0;
}
#bridalFirst .flexBox {
justify-content: center;
}
#bridalFirst .flexBox section {
width: 96%;
margin-bottom: 1.5rem;
}
#bridalFirst .flexBox section:nth-child(-n+2) {
margin-top: 1.5rem;
}
#bridalFirst .flexBox section:first-child {
margin-top: 0 !important;
}
}


/* =======================================
    チャペルについて #aboutChapel
======================================= */
#aboutChapel {
background-image: url("../w2img/20200915184659aboutpic.jpg");
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
min-height: 1000px;
display:flex;
}
#aboutChapel > section {
width: 80%;
max-width: 500px;
background: rgba(255,255,255,.8);
align-self: center;
text-align: center;
margin:  3rem 10% 3rem auto;
padding: 3rem;
position:relative;
border-radius:20px;
}
#aboutChapel > section:after{
width: 100px;
height: 100px;
top: -30px;
right: -30px;
background:url("../img/wedding/kazari01.png") no-repeat;
}
#aboutChapel > section:before{
width: 80px;
height: 80px;
bottom: -30px;
left: -30px;
background:url("../img/wedding/kazari02.png") no-repeat;
}
#aboutChapel > section:after,
#aboutChapel > section:before {
content: "";
display: block;
background-size: contain;
position: absolute;
}
#aboutChapel > section p {
display: inline-block;
text-align: left;
margin-bottom: 2rem;
}
.commTtl {
font-size: 1.5rem;
line-height: 150%;
margin-bottom: 3rem;
font-style: italic;
}
.commTtl span {
color: #99C5D0;
font-style:normal;
display: block;
}

@media screen and (max-width: 1480px) {
#aboutChapel {
background-image:url("../w2img/20200915184659aboutpic.jpg");
background-position: center;
min-height: 800px;
}
}

@media screen and (max-width: 480px) {
#aboutChapel {
background-image:url("../w2img/20200915184659aboutpic.jpg");
background-position: -640px top;
min-height:0;
background-size: inherit;
}
#aboutChapel > section:after{
width: 70px;
height: 70px;
top: -10px;
right: -10px;
}
#aboutChapel > section:before{
width: 50px;
height: 50px;
bottom: -10px;
left: -10px;
}
#aboutChapel > section {
padding: 2rem;
}
.commTtl {
margin-bottom: 2rem;
}
}

/* =======================================
#item
======================================= */
#item {
background-image: url("../w2img/20200916104128itempic-pc.jpg");
background-repeat: no-repeat;
background-position: right top;
position: relative;
z-index: 0;
}
#item section {
width: 90%;
margin: 0 auto;
position: relative;
padding: 10rem 0;
}
#item h4,
#item h4 span {
color: #fff;
}
#item h4,#item a {
position: relative;
z-index: 8;
text-align: center;
}
#item:before {
content: "";
display: block;
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,191,191,.6);
}
#item figure {
max-width:590px;
width: 55%;
z-index: 2;
position: absolute;
left: 0;
bottom: 0;
}
#item figure img {
width: 100%;
height: 320px;
object-fit: contain;
}

@media screen and (max-width: 1000px) {
#item {
background-position: center;
}
}

@media screen and (max-width: 812px) {
#item figure {
display: none;
}
}

@media screen and (max-width: 480px) {
#item {
background-size: cover;
background-position: 70% 30%;
}
#bridal #shootingPlan {
padding: .5rem;
}
#bridal #shootingPlan > div {
width: 100%;
padding: 1rem;
}
}