@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 ,.mfp-title,
#tab ul li a, #sub .txtArea h2 , #sub .txtArea p , .scrollNav h2 , .scrollNav li , #bridal #keyVisual section p ,#bridal #keyVisual section h2{
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) {
#keyVisual,#keyVisual > ul,#keyVisual li {
height: 100% !important;
}
}

main > section {
margin-top: 5rem;
}
#bridal #shootingPlan > div {
margin-top: 3rem;
}
#bridal #keyVisual section {
max-width: 70%;
}

/* =======================================
    keyVisual
======================================= */
#keyVisual {
width: 100%;
margin: 0 0 0 auto;
text-align: left;
position:relative;
}
#keyVisual img {
width: 100%;
height: 938px;
object-fit: cover;
}
#bridal #keyVisual section {
top: 37%;
}

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

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

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

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

/* =======================================
#bridalNav
======================================= */
#bridalNav {
width: 96%;
max-width: 1280px;
display: flex;
justify-content: center;
flex-wrap:wrap;
margin: 0 auto;
position: relative;
background: #fff;
padding: 2rem 0;
background-image:url("../img/wedding/tulip01.png"),url("../img/wedding/tulip02.png");
background-repeat: no-repeat;
background-position: 5% top,90% 100%;
overflow: visible;
}
#bridalNav:after {
z-index: -1;
position: absolute;
content: "";
overflow:hidden;
top: 90%;
bottom: 2%;
width: 70%;
left: 15%;
background: rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 13px rgba(224, 224, 224, 0.5);
border-radius:50%;
}
#bridalNav li {
margin:0  1%;
border-right:1px solid #707070;
padding-right:2%;
}
#bridalNav li:last-of-type {
border-right: none;
}

@media screen and (max-width: 812px) {
#bridalNav li {
width: 30%;
text-align: center;
border-bottom: 1px solid #E3E3E3;;
border-right: none;
background-position: 5% -5px,bottom 90%;
}
}

@media screen and (max-width: 480px) {
#bridal #keyVisual section {
left: 5%;
top: 33%;
}
#bridalNav li {
width: 48%;
border-bottom: none;
}
#bridalNav {
background-size: auto 70px,auto 70px;
}
}


/* =======================================
#bridalNav
======================================= */
#description {
background-image: url("../img/wedding/pink-dot.png"),linear-gradient(#FFE3EA 90%, #FFF 90%);
background-repeat:no-repeat;
background-position:left top;
}
.blue #description {
background-image: url("../img/wedding/blue-dot.png"),linear-gradient(#E4FAF4 90%, #FFF 90%);
}
#description .flexBox {
max-width: 1280px;
width:94%;
margin: 0 auto;
justify-content: space-between;
padding: 3rem;
position: relative;
}
#description .flexBox:before {
content: "";
background: url("../img/wedding/wasou-img.png") no-repeat center bottom;
position: absolute;
bottom: 50px;
width: 300px;
height: 390px;
background-size: contain;
left: -180px;
z-index: 0;
}
.blue #description .flexBox:before {
content: "";
background: url("../img/wedding/dress-img.png") no-repeat center bottom;
position: absolute;
bottom: 50px;
width: 300px;
height: 390px;
background-size: contain;
left: -30px;
z-index: 0;
}
#description .flexBox > * {
width: 48%;
position: relative;
z-index: 2;
}
#description .flexBox figure img {
width: 100%;
height: 650px;
object-fit: cover;
}
#description .txtArea {
align-self: center;
font-size: 1.2rem;
min-height: 250px;
}
#description .txtArea p {
line-height:320%;
text-shadow: 0 0 5px #fff;
}
#description .txtArea p a {
line-height: 180%;
}
#description .txtArea .commLink4 i{
color: #D67D7D;
}
.blue .commLink4 a {
border: 1px solid #C3DDD6;
}
.blue #description .txtArea .commLink4 i {
color: #C3DDD6;
}

@media screen and (max-width: 1366px) {
#description .flexBox:before {
bottom: 0px;
width: 300px;
height: 390px;
background-size: contain;
left: -50px;
z-index: 0;
}
}

@media screen and (max-width: 1280px) {
#description .flexBox {
padding: 3rem 0;
}
#description .flexBox:before {
display: none;
}
#description .txtArea {
font-size: 1rem;
min-height: 250px;
}
#description .flexBox figure img {
height: 550px;
}
}

@media screen and (max-width: 812px) {
#description .flexBox figure img {
height: 450px;
}
}

@media screen and (max-width: 480px) {
#description .flexBox > * {
width: 90%;
margin: 0 auto;
}
#description .flexBox figure img {
height: 350px;
margin-top: 2rem;
}
}

/* =======================================
.planDetail
======================================= */
.planDetail {
display: flex;
width: 94%;
max-width: 1280px;
margin: 5rem auto 0;
flex-wrap:wrap;
justify-content: space-between;
position: relative;
background: url("../img/wedding/kazari05.png") no-repeat right top;
background-size: 20% auto; 
}
.planDetail > * {
width: 48%;
}
.planDetail + .planDetail {
margin-bottom: 3rem;
}
.planDetail > div {
order: -1;
text-align: center;
}
.planDetail > div ul {
order: -1;
display: grid;
width:100%;
grid-template-columns: 50% 50%;
overflow: hidden;
}
.planDetail > div ul li.itemA {
grid-row: 1;
grid-column: 1 / 3;
}
.planDetail > div ul li.itemB {
grid-row: 2;
grid-column: 1;
}
.planDetail > div ul li.itemC {
grid-row: 2;
grid-column: 2;
}
.planDetail > div ul li.itemD {
grid-row: 3;
grid-column: 1 / 3;
}
.planDetail > div ul li img {
width: 100%;
height: calc(630px / 2);
object-fit: cover;
}
.planDetail > div p {
text-align: center;
border-bottom:1px solid #C996B1;
display: inline-block;
margin: 1rem auto;
}
.planDetail > div p i,
.planDetail > section dl  dt,
.planDetail > section dl dd strong {
color: #C996B1;
}
.planDetail > section h3,
h3.galleryTtl {
font-size: 3.5rem;
font-style:italic;
color: #fff;
text-shadow:0 0 6px #A73C5D;
line-height: 100%;
margin-bottom: 1.5rem;
}
h3.galleryTtl {
text-align: center;
margin-bottom:4rem;
}
.planDetail > section > dl dt {
font-size: 1.3rem;
}
.planDetail > section dl dd strong {
font-size: 1.5rem;
}
.planDetail > section dl dd strong span {
font-size: 2.5rem;
}
.planDetail > section .txtArea {
margin-top: .5rem;
}
.planDetail .list {
display: flex;
justify-content:flex-start;
margin-top:1rem;
flex-wrap:wrap;
align-items: center;
}
.planDetail .catList .list {
align-items: flex-start;
}
.planDetail dl.list:nth-child(+n+2) {
margin-top: 0;
}
.planDetail ul.list li:nth-child(-n+4) {
margin-top: 0;
}
.planDetail ul.list li {
width: 120px;
height: 120px;
border-radius: 60px;
border: #C996B1 1px solid;
text-align: center;
justify-content: center;
display: flex;
align-items: center;
margin-right: 5px;
margin-top: 5px;
}
.planDetail .list dt {
width: 15%;
background: #C996B1;
border-radius: 40px;
text-align: center;
color: #fff;
padding: .1rem;
margin-right: 2%;
margin-top: .5rem;
}
.planDetail .list dd {
width: 82%;
margin-top: .5rem;
}
.planDetail .list + .txtArea {
font-size: .9rem;
margin-top: 1rem;
}
.planDetail .flexBox {
width: 100%;
justify-content: center;
}
.planDetail p.commLink {
width: 50%;
position: relative;
margin-top: 1rem;
}
.planDetail p.commLink:after {
content:'\f105';
font-family:'Font Awesome 5 Free';
font-weight:900;
position: absolute;
top: 30%;
right: 20px;
color: #D67D7D;
}
.planDetail p.commLink a {
width: 100%;
display: block;
padding: 1.5rem;
background: #F6E4DB;
border: 1px solid #fff;
}
.expire {
width: 100%;
padding: .8rem;
border-radius: 30px;
text-align: center;
border: 1px solid #D67D7D;
margin-top: 1rem;
}

@media screen and (max-width: 1024px) {
.planDetail {
background: url("../img/wedding/kazari05.png") no-repeat right top;
background-size: 15% auto; 
}
.planDetail ul.list li {
width: 100px;
height: 100px;
}
}

@media screen and (max-width: 812px) {
.planDetail {
background-size: 30% auto; 
}
.planDetail > * {
width: 100%;
}
.planDetail > div {
order: 2;
width: 90%;
margin: 3rem auto;
}
.planDetail > div ul {
height: 500px;
}
.planDetail > div ul li img {
height: 250px;
}
}

@media screen and (max-width: 480px) {
.planDetail > section h3 {
font-size: 2.7rem;
}
.planDetail > section dl dd strong {
display: block;
margin-top: .5rem;
}
.planDetail > section dl dd strong span {
font-size: 2.3rem;
}
.planDetail ul.list li {
width: 89px;
height: 89px;
line-height: 130%;
}
.planDetail ul.list li:nth-child(-n+3) {
margin-top: 0;
}
.planDetail ul.list li:nth-child(-n+4) {
margin-top: 5px;
}
.planDetail > div ul {
height: 300px;
}
.planDetail > div ul li img {
height: 150px;
}
.planDetail p.commLink {
width: 100%;
}
.planDetail p.commLink:last-of-type {
margin-top: 0;
}
}


/* =======================================
.blue
======================================= */
#bridal.blue #keyVisual section h2 {
color:#9CD8D8;
}
#bridal.blue #keyVisual section h2 span:before {
border-top: 1px solid #C3DDD6;
}
.blue .planDetail > section h3 {
text-shadow: 0 0 6px #82C9B6;
}
.blue .planDetail > div p i, .blue .planDetail > section > dl dt, .blue .planDetail > section dl dd strong {
color: #A9CEC4;
}
.blue .planDetail ul.list li,
.blue .expire {
border: 1px solid #C3DDD6;
}
.blue .planDetail > div p {
border-bottom: 1px solid #C3DDD6;
}
.blue .planDetail .list dt {
background: #A9CEC4;
}
.blue .planDetail p.commLink:after {
color: #A9CEC4;
}
.blue .planDetail p.commLink a {
background:#E4F2EE ;
}