.modal-nav__cont {
width: 100%;
height: 100vh;
vertical-align: top !important;
text-align: left;
position: relative
}

.modal-nav__cont .modal-nav__main {
width: 100%;
height: 100svh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: absolute;
top: 0;
left: 0;
}

.modal-nav__cont .modal-nav__list__item a {
padding: 20px 0;
display: inline-block;
letter-spacing: 0.05em;
line-height: 1;
color: #404040;
font-family: 'Shippori Mincho', serif;
font-weight: 400;
font-size: 1.8rem;
position: relative;
cursor: pointer
}

.modal-nav__cont .modal-nav__list__item a::after {
content: "";
width: 0;
height: 1px;
background: #404040;
position: absolute;
left: 0;
bottom: .45em;
-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}

.modal-nav__cont .modal-nav__list__item a:hover::after {
width: 100%
}

.modal-nav__cont .remodal-close {
width: 60px;
height: 60px;
position: absolute;
top: 60px;
right: 70px;
z-index: 100000000;
border: 1px solid rgba(0,0,0,.1);
border-radius: 100%
}

.modal-nav__cont .remodal-close::before,.modal-nav__cont .remodal-close::after {
content: "";
width: 20px;
height: 2px;
background: #333;
position: absolute;
top: 50%;
left: calc(50% - 10px)
}

.modal-nav__cont .remodal-close::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}

.modal-nav__cont .remodal-close::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}

@media only screen and (max-width: 1200px) {
.modal-nav__cont .modal-nav__list__item a {
font-size:1.4rem
}

.modal-nav__cont .remodal-close {
width: 50px;
height: 50px;
top: 48px;
right: 56px
}
}

.modal-nav__cont .modal-nav__main {
padding-left: 0;
left: 0;
}

.modal-nav__cont .modal-nav__list__item a {
font-size: 16px;
}

.modal-nav__cont .remodal-close {
width: 50px;
height: 50px;
top: 20px;
right: 20px;
background: #c3ad8d!important;
}

.modal-nav__cont .remodal-close::before,.modal-nav__cont .remodal-close::after {
height: 1px;
background: #fff;
}
}

@-webkit-keyframes toggle {
0% {
-webkit-transform: translateY(-116px);
transform: translateY(-116px)
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}

@keyframes toggle {
0% {
-webkit-transform: translateY(-116px);
transform: translateY(-116px)
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}


/*--------------------------------------------------------------------------
remodal
---------------------------------------------------------------------------*/
.remodal {
padding: 100px 60px!important;
}
.remodal .box {
max-width: 600px;
margin: 0 auto;
} 
.remodal .close {
padding: 20px 100px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 16px;
letter-spacing: 0.05em;
line-height: 16px;
box-shadow: 0 0 0 1px #d3d3d3 inset;
border-radius: 2px;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.remodal .close:hover {
background: #aa9d80;
color: #fff;
}
.remodal p {
font-size: 15px;
line-height: 2.4em;
text-align: left;
}

@media screen and (max-width: 768px) {
.remodal {
padding: 50px 30px!important;
}
.remodal p {
font-size: 13px;
line-height: 2em;
}
.remodal .close {
padding: 15px 60px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 15px;
letter-spacing: 0.05em;
line-height: 15px;
box-shadow: 0 0 0 1px #d3d3d3 inset;
border-radius: 2px;
}
}

/*--------------------------------------------------------------------------
btn-cm
---------------------------------------------------------------------------*/
.btn-cm {
width: 90%;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 0 0 1px #333 inset;
text-align: center;
position: relative;
border-radius: 2px;
}
.btn-cm::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #333;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform ease .3s;
}
.btn-cm::after {
content: "＋";
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 20px;
font-size: 12px;
pointer-events: none;
}
.btn-cm:hover {
color: #fff;
}
.btn-cm:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}
.btn-cm a {
display: block;
width: 100%;
padding: 35px 0;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 20px;
letter-spacing: 0.05em;
line-height: 20px;
}
@media screen and (max-width: 768px) {
.btn-cm {
width: 70%;
}
.btn-cm a {
font-size: 18px;
line-height: 18px;
}
.btn-cm a {
display: block;
width: 100%;
padding: 20px 0;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 18px;
letter-spacing: 0.05em;
line-height: 18px;
}
}

/*--------------------------------------------------------------------------
cm-title
---------------------------------------------------------------------------*/
.cm-title {
margin-bottom: 30px;
font-size: 13px;
line-height: 13px;
}
.cm-title span {
display: block;
margin-bottom: 10px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 60px;
letter-spacing: 0.05em;
line-height: 60px;
}

@media screen and (max-width: 768px) {
.cm-title {
margin-bottom: 30px;
font-size: 12px;
line-height: 12px;
}
.cm-title span {
font-size: 48px;
line-height: 48px;
}
}

/*--------------------------------------------------------------------------
Hero
---------------------------------------------------------------------------*/
#hero { 
height: 90vh;
min-height: 550px;
overflow: hidden;
}
#hero .main-slide {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
#hero .main-slide .logo {
position: absolute;
width: 150px;
right: 25px;
bottom: 25px;
text-align: center;
z-index: 100;
}
#hero .main-slide .label {
position: absolute;
width: 12%;
max-width: 200px;
left: 3%;
top: 4%;
text-align: center;
z-index: 100;
}
#hero .main-slide ul {
position: relative;
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
#hero .main-slide ul li {
width: 100%;
height: 90vh;
min-height: 578px;
position: relative;
}
#hero .main-slide .bg {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 0;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
#hero .main-slide .swiper-slide {
-webkit-transition-property: opacity, -webkit-transform !important;
transition-property: opacity, -webkit-transform !important;
transition-property: opacity, transform !important;
transition-property: opacity, transform, -webkit-transform !important;
pointer-events: none;
}
#hero .main-slide .swiper-slide-active {
pointer-events: auto;
}
#hero .swiper-slide-active .bg,
#hero .swiper-slide-duplicate-active .bg,
#hero .swiper-slide-prev .bg { 
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
-webkit-transition: all 7000ms linear;
transition: all 7000ms linear
}

@media screen and (max-width: 1200px) {
#hero .main-slide .label {
position: absolute;
width: 15%;
left: 3%;
top: 4%;
text-align: center;
z-index: 100;
}
#hero .main-slide ul li { min-height: 462px;}
}
@media screen and (max-width: 920px) {
#hero .main-slide {
width: 100%;
margin: 0 auto;
}
#hero .main-slide ul li {
min-height: initial;
height : 90vh;
}
}
@media screen and (max-width: 780px) {
#hero { 
height: 500px;
min-height: initial;
}
#hero .main-slide .label {
position: absolute;
width: 27%;
left: 5%;
top: 3%;
text-align: center;
z-index: 100;
}
#hero .main-slide .logo {
position: absolute;
width: 120px;
right: 20px;
bottom: 20px;
text-align: center;
z-index: 100;
}
#hero .main-slide ul li {
min-height: initial;
height : auto;
}
}

#hero .main-slide ul li .l1.bg {
background-image: url(https://www.petitwedding.com/assets/lp/img/stay-wedding-hero-01.jpg);
background-position: center center;
}
#hero .main-slide ul li .l2 { z-index: 1;}
#hero .main-slide ul li .l2.bg {
background-image: url(https://www.petitwedding.com/assets/lp/img/stay-wedding-hero-02.jpg);
background-position: center center;
}
#hero .main-slide ul li .l3 {z-index: 1;}
#hero .main-slide ul li .l3.bg {
background-image: url(https://www.petitwedding.com/assets/lp/img/stay-wedding-hero-03.jpg);
background-position: center center;
}
#hero .main-slide ul li .l4 {z-index: 1;}
#hero .main-slide ul li .l4.bg {
background-image: url(https://www.petitwedding.com/assets/lp/img/stay-wedding-hero-04.jpg);
background-position: center top;
}
@media screen and (max-width: 920px) {
#hero .main-slide ul li .l1.bg {
background-image: url(https://www.petitwedding.com/assets/lp/img/stay-wedding-hero-01-sp.jpg);
background-size: cover;
background-position: center bottom;
}
#hero .main-slide ul li .l2 { z-index: 1;}
#hero .main-slide ul li .l2.bg {
background-image: url(https://www.petitwedding.com/assets/lp/img/stay-wedding-hero-02-sp.jpg);
background-position: center center;
}
#hero .main-slide ul li .l3 {z-index: 1;}
#hero .main-slide ul li .l3.bg {
background-image: url(https://www.petitwedding.com/assets/lp/img/stay-wedding-hero-03-sp.jpg);
background-position: center top;
}
#hero .main-slide ul li .l4 {z-index: 1;}
#hero .main-slide ul li .l4.bg {
background-image: url(https://www.petitwedding.com/assets/lp/img/stay-wedding-hero-04-sp.jpg);
background-position: center center;
}
}

/*--------------------------------------------------------------------------
lead
---------------------------------------------------------------------------*/

.lead {

}
.lead .intro {
width: 630px;
}
.lead .intro .catch {
font-size: 24px;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.05em;
line-height: 2.2em;
}
.lead .intro .txt {
font-size: 14px;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.1em;
line-height: 2.4em;
}
.lead .movie {
width: calc(100% - 630px);
height: 100%;
background: #000;
aspect-ratio: 8 / 5;
position: relative;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}






.lead .movie::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
z-index: 10;
opacity: 0.2;
pointer-events: none;
}
.lead .movie:hover {
opacity: 0.5;
}
.lead .movie img {
width: 100%;
height: 100%;
object-fit: cover;
}

.lead .movie .icon {
width: 15%;
height: auto;
margin: 0 auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
z-index: 20;
}

@media screen and (max-width: 1300px) {
.lead.cont-l {
width: 90%;
margin-left: auto;
margin-right: 0;
}
.lead .intro {
width: 600px;
}
.lead .movie {
width: calc(100% - 600px);
height: 100%;
background: #000;
aspect-ratio: 1 / 1;
}
.lead .movie .icon {
width: 25%;
height: auto;
margin: 0 auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
z-index: 20;
}
}
@media screen and (max-width: 1100px) {
.lead .intro {
width: 550px;
}
.lead .intro .catch {
font-size: 20px;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.05em;
line-height: 2.2em;
}
.lead .intro .txt {
font-size: 13px;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.1em;
line-height: 2.4em;
}
.lead .movie {
width: calc(100% - 550px);
height: 100%;
background: #000;
aspect-ratio: 1 / 1;
}
}

@media screen and (max-width: 960px) {
.lead.cont-l {
width: 86.6666%;
margin: 0 auto;
padding-top: 60px!important;
}
.lead .intro {
width: 100%;
margin-bottom: 40px;
}
.lead .intro .txt {
font-size: 13px;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.1em;
line-height: 2em;
}
.lead .intro .txt br {
display: none;
}
.lead .movie {
width: 100%;
height: 100%;
background: #000;
aspect-ratio: 2 / 1;
}
.lead .movie .icon {
width: 20%;
max-width: 110px;
height: auto;
margin: 0 auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
z-index: 20;
}

}

/*--------------------------------------------------------------------------
topics
---------------------------------------------------------------------------*/
.topics {
width: 80%;
max-width: 600px;
margin: 0 auto;
box-shadow: 0px 0px 18px -8px #777777;
}
.topics img {
border-radius: 3px;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.topics img:hover {
opacity: 0.5;
}

/*--------------------------------------------------------------------------
bridal-fair
---------------------------------------------------------------------------*/
.bridal-fair {
width: 86.6666%;
max-width: 900px;
margin: 0 auto;
background: #f8f6f6;
padding: 5% 4% 4%;
position: relative;
}
.bridal-fair:hover .cover {
opacity: 0.5;
}
.bridal-fair .label {
text-align: center;
color: #c2a772;
font-size: 40px;
line-height: 40px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings: "wdth" 100;
letter-spacing: 0.1em;
position: absolute;
top: -20px;
left: 0;
right: 0;
}
.bridal-fair .txt {
width: 45%;
padding-right: 3%;
}
.bridal-fair .txt .title {
font-size: 24px;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.05em;
line-height: 1.6em;
}
.bridal-fair .txt .lead {
font-size: 15px;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.05em;
line-height: 1.6em;
}
.bridal-fair .txt .btn {
display: inline-block;
font-size: 13px;
font-family: 'Shippori Mincho', serif;
color: #80704d;
letter-spacing: 0.05em;
line-height: 1.6em;
border-bottom: solid 1px #80704d;
}
.bridal-fair .cover {
width: 55%;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
.bridal-fair {
width: 86.6666%;
max-width: 900px;
margin: 0 auto;
background: #f8f6f6;
padding: 10% 7% 7%;
position: relative;
}
.bridal-fair .label {
text-align: center;
color: #c2a772;
font-size: 32px;
line-height: 32px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings: "wdth" 100;
letter-spacing: 0.1em;
position: absolute;
top: -15px;
left: 0;
right: 0;
}
.bridal-fair .txt .title {
font-size: 20px;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.05em;
line-height: 1.6em;
}
.bridal-fair .txt {
width: 100%;
padding-right: 0;
}
.bridal-fair .cover {
width: 100%;
margin-bottom: 15px;
order: -1;
}
}

/*--------------------------------------------------------------------------
about
---------------------------------------------------------------------------*/
.about {
width: 100%;
position: relative;
}
.about .main-vis {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
top: 0;
left: 0;
}

.about .label {
text-align: center;
font-size: 40px;
line-height: 40px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
text-align: center;
letter-spacing: 0.1em;
}
.about ul {
width: 86.6666%;
max-width: 800px;
margin: 0 auto;
}
.about ul li {
max-width: 48.5%;
flex: 0 1 48.5%;
background: #fff;
box-shadow: 0px 0px 18px -8px #c9c9c9;
border-radius: 2px;
cursor: pointer;
overflow: hidden;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;

}

.about ul li:hover {
box-shadow: 0px 0px 18px -8px #777777;
}

.about ul li a {
display: block;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.about ul li a .cover {
width: 120px;
}
.about ul li a p {
width: calc(100% - 150px);
font-family: 'Shippori Mincho', serif;
font-size: 14px;
letter-spacing: 0.05em;
align-self: center;
line-height: 1.5;
}
@media screen and (max-width: 768px) {
.about {
padding-top: 15px;
}
.about .label {
text-align: center;
font-size: 32px;
line-height: 32px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
text-align: center;
letter-spacing: 0.1em;
}
.about ul li {
max-width: 100%;
flex: 0 1 100%;
border-radius: 2px;
}
.about ul li:first-child {
margin-bottom: 10px;
}
.about ul li a {
padding: 0;
}
.about ul li a .cover {
width: 80px;
}
.about ul li a p {
width: calc(100% - 100px);
font-family: 'Shippori Mincho', serif;
font-size: 13px;
letter-spacing: 0.05em;
align-self: center;
line-height: 1.5;
}
}

.remodal.about-us {
padding: 0 0 80px!important;
}
.remodal.about-us .box {
max-width: initial;
}
.remodal.about-us .box .cover {
display: inline-block;
width: 100%;
height: 350px;
position: relative;
overflow: hidden;
}
.remodal.about-us .box .cover .main-vis {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.remodal.about-us .box .exp {
width: 80%;
max-width: 600px;
margin: 0 auto 20px;
font-family: 'Shippori Mincho', serif;
line-height: 2.3em;
text-align: left;
letter-spacing: 0.02em;
}

@media screen and (max-width: 768px) {
.remodal.about-us {
padding: 0 0 40px!important;
}
.remodal.about-us .box .cover {
width: 100%;
height: 200px;
}
.remodal.about-us .box .exp br {
display: none;
}
}

/*--------------------------------------------------------------------------
title
---------------------------------------------------------------------------*/
.title-cm {
text-align: center;
font-size: 13px;
}
.title-cm span {
display: block;
margin-bottom: 10px;
font-size: 60px;
line-height: 60px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.title-cm span {
margin-top: 50px !important;
font-size: 48px;
line-height: 48px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
text-align: center;
}
}


/*--------------------------------------------------------------------------
box
---------------------------------------------------------------------------*/
.facility-box#venue {
margin-top: 200px;
}
.facility-box {
margin-top: 250px;
}
.facility-box .vis {
width: calc(100% - 450px);
min-height: 90vh;
background-position: center center;
background-size: cover;
position: relative;
}
.facility-box .vis .main-vis {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}

.facility-box .vis:before {
content: "01";
font-size: 200px;
line-height: 200px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0;
top: -100px;
left: 50px;
position: absolute;
mix-blend-mode: difference;
color: #aa9d80;
z-index: 10;
}
.facility-box .intro {
width: 450px;
min-height: 90vh;
position: relative;
}
.facility-box .intro .label {
width: 70px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: absolute;
margin: 0 auto;
top: 20%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
}
.facility-box .intro .label h2 {
display: block;
width: 60px;
font-size: 60px;
line-height: 60px;
margin: 0 auto;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.2em;
}
.facility-box .intro .label:before {
content: "Wedding Venue";
display: block;
width: 12px;
margin-left: 15px;
font-size: 12px;
line-height: 12px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0.4em;
color: #8c8c8c;
}
.facility-box .intro p {
padding: 0 60px;
line-height: 2em;
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-family: 'Shippori Mincho', serif;
}

.facility-box#banquet .vis {
}
.facility-box#banquet .vis:before {
content: "02";
font-size: 200px;
line-height: 200px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0;
top: -100px;
left: initial;
right: 50px;
position: absolute;
mix-blend-mode: difference;
}
.facility-box#hotel .vis:before {
content: "03";
}
.facility-box#banquet .intro {
order: -1;
}
.facility-box#banquet .label:before {
content: "Banquet"!important;
}
.facility-box#hotel .label:before {
content: "Hotel"!important;
}

@media screen and (max-width: 1600px) {
.facility-box .vis:before {
content: "01";
font-size: 100px;
line-height: 100px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0;
top: -50px;
right: -30px;
position: absolute;
}
.facility-box#banquet .vis:before {
content: "02";
font-size: 100px;
line-height: 100px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0;
top: -50px;
left: initial;
right: 30px;
position: absolute;
}
}


@media screen and (max-width: 1440px) {
.facility-box#venue {
margin-top: 100px;
}
.facility-box {
margin-top: 150px;
}
.facility-box .vis {
width: calc(100% - 350px);
min-height: 80vh;
}
.facility-box .intro {
width: 350px;
min-height: 80vh;
position: relative;
}
.facility-box .intro .label {
width: 70px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: absolute;
margin: 0 auto;
top: 10%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
}
.facility-box .intro .label h2 {
display: block;
width: 50px;
font-size: 50px;
line-height: 50px;
margin: 0 auto;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.2em;
}
.facility-box .intro .label:before {
content: "Wedding Venue";
display: block;
width: 12px;
margin-left: 15px;
font-size: 12px;
line-height: 12px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0.4em;
color: #8c8c8c;
}
.facility-box .intro p {
padding: 0 40px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 14px;
line-height: 1.8;
}
}

@media screen and (max-width: 960px) {
.facility-box#venue {
margin-top: 60px;
}
.facility-box {
margin-top: 80px;
}
.facility-box .vis {
width: 100%;
min-height: 500px;
}
.facility-box .vis:before {
content: "01";
font-size: 100px;
line-height: 100px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0;
top: initial;
bottom: -40px;
left: initial;
right: 25px;
position: absolute;
}
.facility-box#banquet .vis:before {
content: "02";
font-size: 100px;
line-height: 100px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0;
top: initial;
bottom: -40px;
left: initial;
right: 25px;
position: absolute;
}
.facility-box#banquet .intro {
order: 1;
}

.facility-box .intro {
width: 100%;
padding: 30px;
min-height: initial;
position: relative;
}
.facility-box .intro .label {
width: 100%;
padding-top: 20px;
-ms-writing-mode: initial;
writing-mode: initial;
position: relative;
margin: 0 auto;
top: initial;
-webkit-transform: none;
transform: none;
left: initial;
right: initial;
}
.facility-box .intro .label h2 {
display: block;
width: auto;
margin-bottom: 30px;
font-size: 26px;
line-height: 26px;
letter-spacing: 0.05em;
width: auto;
position: relative;
top: initial;
left: initial;
right: initial;
}
.facility-box .intro .label:before {
content: "Wedding Venue";
display: block;
width: auto;
margin: 0 0 10px 0;
font-size: 12px;
line-height: 12px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0.2em;
color: #8c8c8c;
}
.facility-box .intro p {
padding: 0;
position: relative;
bottom: initial;
left: initial;
right: initial;
font-size: 14px;
line-height: 2em;
}
}


@media screen and (max-width: 768px) {
.facility-box#venue {
margin-top: 40px;
}
.facility-box .vis {
width: 100%;
min-height: 300px;
height: 300px;
position: relative;
}
.facility-box .vis .main-vis {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}
.facility-box .vis:before {
content: "01";
font-size: 80px;
line-height: 80px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0;
top: initial;
bottom: -40px;
left: initial;
right: 20px;
position: absolute;
}
.facility-box#banquet .vis:before {
content: "02";
font-size: 80px;
line-height: 80px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0;
top: initial;
bottom: -40px;
left: initial;
right: 20px;
position: absolute;
}
}

.facility-box .gallery {
overflow: hidden;
}

.facility-box .gallery-title {
text-align: center;
}
.facility-box .gallery-title span {
text-align: center;
font-size: 34px;
line-height: 34px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0.05em;
}
@media screen and (max-width: 960px) {
.facility-box .gallery-title {
margin-top: 10px!important;
}
.facility-box .gallery-title span {
text-align: center;
font-size: 24px;
line-height: 24px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
letter-spacing: 0.05em;
}
}

.facility-box .swiper-gallery .controll {
width: 250px;
height: 60px;
margin: 0 auto;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-weight: 400;
font-style: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
z-index: 1;
}
.facility-box .swiper-gallery .controll .swiper-pagination-fraction {
position: relative!important;
bottom: 0!important;
}
.facility-box .swiper-gallery .controll .swiper-pagination-fraction span {
font-family: 'Shippori Mincho', serif;
}
.facility-box .swiper-gallery .controll .swiper-button-prev {
margin-top: 0!important;
background-image: url("https://www.petitwedding.com/assets/lp/img/cover-arrow.svg");
background-size: cover;
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
}
.facility-box .swiper-gallery .controll .swiper-button-next {
margin-top: 0!important;
background-image: url("https://www.petitwedding.com/assets/lp/img/cover-arrow.svg");
background-size: cover;
width: 60px;
height: 60px;
position: absolute;
top: 0;
right: 0;
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.facility-box .swiper-gallery .controll .swiper-button-prev:after, .facility-box .swiper-gallery .controll .swiper-button-next:after {
display: none;
}
.swiper-pagination-fraction {
line-height: 50px;
pointer-events: none;
}
@media screen and (max-width: 768px) {
.facility-box .swiper-gallery .controll {
width: 180px;
height: 40px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
z-index: 1;
font-size: 13px;
}
.facility-box .swiper-gallery .controll .swiper-button-prev {
margin-top: 0!important;
background-image: url("https://www.petitwedding.com/assets/lp/img/cover-arrow.svg");
background-size: cover;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
}
.facility-box .swiper-gallery .controll .swiper-button-next {
margin-top: 0!important;
background-image: url("https://www.petitwedding.com/assets/lp/img/cover-arrow.svg");
background-size: cover;
width: 40px;
height: 40px;
position: absolute;
top: 0;
right: 0;
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}

/*--------------------------------------------------------------------------
report
---------------------------------------------------------------------------*/
#report {

}
#report ul.report-list li {
width: 31%;
aspect-ratio: 1 / 1;
position: relative;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#report ul.report-list li:hover {
opacity: 0.5;
}
#report ul.report-list li .label {
display: block;
width: 100%;
padding: 20px;
position: absolute;
bottom: 0;
background: #000;
color: #fff;
opacity: 0.8;
}
#report ul.report-list li .label p {
font-size: 13px;
line-height: 1.7;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.05em;
}
#report ul.report-list li .label span {
display: block;
margin-top: 8px;
font-size: 10px;
opacity: 0.5;
}
#report .btn-all {
text-align: center;
text-decoration: underline;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#report .btn-all:hover {
color: #80704d;
}

@media screen and (max-width: 1200px) {
#report ul.report-list li .label {
display: block;
width: 100%;
padding: 10px 15px;
position: absolute;
bottom: 0;
background: #000;
color: #fff;
opacity: 0.8;
}
}

@media screen and (max-width: 768px) {
#report ul.report-list li {
width: 100%;
aspect-ratio: initial;
}
#report ul.report-list li a {
padding: 15px 0;
border-bottom: dotted 1px #d3d3d3;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
#report ul.report-list li:first-child a {
border-top: dotted 1px #d3d3d3;
}
#report ul.report-list li .cover {
width: 130px;
}
#report ul.report-list li .label {
width: calc(100% - 130px);
padding: 0 0 0 20px;
position: relative;
background: #fff;
color: #333;
align-self: center;
}
#report ul.report-list li .label span {
opacity: 0.5;
}
#report .btn-all {
font-size: 13px;
}
}



/*--------------------------------------------------------------------------
feature
---------------------------------------------------------------------------*/
#feature {

}

#feature li {
max-width: 31%;
flex: 0 1 31%;
position: relative;
align-self: flex-start;
}
#feature li .dec{
width: 10%;
height: auto;
position: absolute;
top: -8%;
left: 2%;
}
#feature .txt h3 {
margin-top: 20px;
font-family: 'Shippori Mincho', serif;
font-size: 20px;
line-height: 1.6em;
}
#feature .txt h3 + p {
font-size: 14px;
line-height: 2em;
letter-spacing: 0;
opacity: 0.6;
}
#feature .txt .btn {
margin-top: 20px;
display: inline-block;
cursor: pointer;
box-shadow: 0 0 0 1px #333 inset;
color: #333;
border-radius: 2px;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#feature .txt .btn:hover {
background: #333;
box-shadow: 0 0 0 1px #333 inset;
color: #fff;
}
#feature .txt .btn ul li {
display: none;
}
#feature .txt .btn ul li:first-child,#feature .txt .btn a {
display: inline-block;
margin-bottom: 0;
padding: 10px 30px;
font-size: 13px;
line-height: 13px;
letter-spacing: 0;
max-width: initial;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 14px;
}

@media screen and (max-width: 1200px) {
#feature .txt h3 br {
display: none;
}
}

@media screen and (max-width: 1200px) {
#feature .cover {
align-self: flex-start;
}
#feature .txt h3 + p {
font-size: 13px;
line-height: 1.8em;
}
}

@media screen and (max-width: 960px) {
#feature li {
max-width: 100%;
flex: 0 1 100%;
margin-bottom: 60px;
position: relative;
align-self: flex-start;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
#feature .cover {
width: 400px;
}
#feature .txt {
width: calc(100% - 420px);
align-items: flex-start;
}
#feature .txt h3 {
margin-top: 0;
}
#feature .cover img {
display: block;
width: 90%;
max-width: 400px;
margin: 0 auto;
}
}

@media screen and (max-width: 768px) {
#feature li {
margin-bottom: 60px;
}
#feature li:last-child {
margin-bottom: 0;
}
#feature li .dec{
width: 18%;
height: auto;
position: absolute;
top: -4%;
left: 3%;
}
#feature li:nth-child(2) .dec{
width: 18%;
height: auto;
position: absolute;
top: -4%;
left: initial;
right: 3%;
}
#feature li:nth-child(2) .txt {
padding-left: 0;
order: 0;
}
#feature .cover {
width: 100%;
padding-right: 0;
}
#feature .cover img {
width: 100%;
max-width: initial;
}
#feature .txt {
width: 100%;
}
#feature .txt h3 {
margin-top: 20px;
font-family: 'Shippori Mincho', serif;
font-size: 20px;
line-height: 1.6em;
}
#feature .txt h3 + p {
font-size: 12px;
line-height: 2em;
}
#feature .txt .btn {
margin-top: 15px;
display: inline-block;
}
#feature .txt .btn a {
display: block;
padding: 8px;
font-size: 14px;
line-height: 14px;
}
#feature .txt .btn ul li:first-child,#feature .txt .btn a {
display: block;
margin-bottom: 0;
padding: 12px 20px;
font-size: 13px;
line-height: 13px;
letter-spacing: 0;
}
#feature .chef {
width: 100%;
margin-top: 30px;
padding: 15px;
border: solid 1px #ececec;
border-radius: 2px;
}
#feature .chef .name {
width: calc(100% - 90px);
padding-left: 15px;
font-size: 11px;
}
}




/*--------------------------------------------------------------------------
remodal cuisine
---------------------------------------------------------------------------*/

#remodal-cuisine-menu .cuisine-title {
text-align: center;
}
#remodal-cuisine-menu .cuisine-title p {
display: inline;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 50px;
letter-spacing: 0.05em;
line-height: 50px;
}
#remodal-cuisine-menu .cuisine-title span {
display: block;
margin-top: 10px;
font-size: 13px;
}
#remodal-cuisine-menu .cuisine-note {
display: inline-block;
text-align: center;
font-size: 12px!important;
line-height: 1.6!important;
opacity: 0.6;
}

#remodal-cuisine-menu ul.cuisine-menu {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
#remodal-cuisine-menu ul.cuisine-menu li {
width: 47.5%;
padding-bottom: 40px;
}
#remodal-cuisine-menu ul.cuisine-menu li .cover {
position: relative;
}
#remodal-cuisine-menu ul.cuisine-menu li .cover .label {
padding: 5px 10px;
position: absolute;
top: 10px;
left: 10px;
background: #80704d;
color: #fff;
border-radius: 100px;
font-size: 10px;
}


#remodal-cuisine-menu ul.cuisine-menu li .info {
margin-top: 18px;
text-align: left;
}

#remodal-cuisine-menu ul.cuisine-menu li .info .name {
margin-top: 7px;
font-size: 14px;
line-height: 1.6;
letter-spacing: 0.05em;
}
#remodal-cuisine-menu ul.cuisine-menu li .info .txt {
margin-top: 7px;
font-size: 12px;
line-height: 1.6;
opacity: 0.6;
}


@media only screen and (max-width: 768px) {
#remodal-cuisine-menu .cuisine-title p {
display: inline;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 40px;
letter-spacing: 0.05em;
line-height: 40px;
}
#remodal-cuisine-menu .cuisine-note {
display: inline-block;
text-align: center;
font-size: 10px!important;
line-height: 1.6!important;
opacity: 0.6;
}
#remodal-cuisine-menu ul.cuisine-menu {
}
#remodal-cuisine-menu ul.cuisine-menu li {
width: 100%;
padding-bottom: 35px;
}
#remodal-cuisine-menu ul.cuisine-menu li .info {
margin-top: 20px;
text-align: left;
align-self: center;
}
#remodal-cuisine-menu ul.cuisine-menu li .info .name {
margin-top: 7px;
font-size: 15px;
line-height: 1.6;
}
#remodal-cuisine-menu ul.cuisine-menu li .info .txt {
margin-top: 5px;
font-size: 12px;
}
}


/*--------------------------------------------------------------------------
remodal chef
---------------------------------------------------------------------------*/
.remodal.chef-intro .box .thum img {
display: block;
width: 300px;
margin: 0 auto;
}
.remodal.chef-intro .box .thum img {
display: block;
width: 300px;
margin: 0 auto;
}
.remodal.chef-intro .box .label {
text-align: center;
}
.remodal.chef-intro .box .label .cate {
font-size: 12px;
line-height: 12px;
}
.remodal.chef-intro .box .label .name {
font-family: 'Shippori Mincho', serif;
font-size: 20px;
line-height: 20px;
text-align: center;
}

.remodal.chef-intro .box .exp {
line-height: 2.3em;
text-align: left;
letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
.remodal.chef-intro .box .thum img {
display: block;
width: 200px;
margin: 0 auto;
}
.remodal.chef-intro .box .label .cate {
font-size: 11px;
line-height: 11px;
}
.remodal.chef-intro .box .exp {
line-height: 2em;
}
}


/*--------------------------------------------------------------------------
chef
---------------------------------------------------------------------------*/
#chef {
border-top: solid 1px #efefef;
}
#chef a {
width: 86.6666%;
max-width: 600px;
margin: 0 auto;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

#chef .cover {
width: 400px;
position: relative;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}


#chef .cover .dec {
width: 150px;
position: absolute;
top: -50px;
left:  -50px;
}
#chef .txt {
width: calc(100% - 450px);
}
#chef .txt span {
display: block;
margin-bottom: 10px;
font-family: 'Shippori Mincho', serif;
font-size: 14px;
line-height: 14px;
}
#chef .txt h2 {
display: inline-block;
padding-bottom: 5px;
font-family: 'Shippori Mincho', serif;
font-size: 28px;
}
#chef .txt .btn-prof p {
display: inline-block;
border: solid 1px #333;
padding: 5px 10px;
border-radius: 2px;
text-align: center;
letter-spacing: 0;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#chef a:hover .cover  {
opacity: 0.5;
}
#chef a:hover .btn-prof p {
background: #333;
color: #fff;
}

@media screen and (max-width: 768px) {
#chef .cover {
width: 150px;
position: relative;
}
#chef .cover .dec {
width: 100px;
position: absolute;
top: -40px;
left:  -15px;
}
#chef .txt {
width: calc(100% - 180px);
}
#chef .txt span {
font-size: 12px;
line-height: 12px;
}
#chef .txt h2 {
font-size: 20px;
}
#chef .txt .btn-prof p {
font-size: 12px;
}
}

/*--------------------------------------------------------------------------
plan
---------------------------------------------------------------------------*/
#plan {
padding-bottom: 60px;
position: relative;
background: #f0eeec;
}
#plan .label {
width: 200px;
position: relative;
z-index: 1;
}
#plan .label span {
display: block;
margin-top: -252px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 70px;
letter-spacing: 0.1em;
line-height: 70px;
writing-mode: vertical-rl;
text-align: initial;
}
#plan .cont {
width: calc(100% - 220px);
position: relative;
}
#plan .cont.adjust-width {
width: 86.6666%;
}

#plan .cont .title span {
display: inline-block;
padding: 5px 7px;
background: #aa9d80;
color: #fff;
font-size: 15px;
letter-spacing: 0;
border-radius: 2px;
}


#plan .cont .title h2 {
font-family: 'Shippori Mincho', serif;
font-size: 30px;
line-height: 30px;
}
#plan .cont .title h2 + p {
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 50px;
letter-spacing: 0;
line-height: 50px;
}

#plan .cont ul li {
margin-bottom: 10px;
font-size: 15px;
line-height: 1.6em;
letter-spacing: 0.05em;
}
#plan .cont ul li {
list-style-type: circle;
list-style-position: inside;
}

#plan .cont .attention {
font-size: 12px;
letter-spacing: 0.05em;
line-height: 1.7;
opacity: 0.5;
}

@media screen and (max-width: 960px) {
#plan {
margin-top: 100px;
padding-bottom: 60px;
}
#plan .label {
width: 100%;
margin-top: -40px;
position: relative;
z-index: 1;
}
#plan .label span {
margin-top: 0;
writing-mode: horizontal-tb;
}
#plan .cont .title span {
font-size: 14px;
}
#plan .cont {
width: 100%;
}
#plan .cont ul li {
margin-bottom: 8px;
font-size: 12px;
line-height: 1.6em;
}
#plan .cont ul li br {
display: none;
}
#plan .cont .attention {
font-size: 10px;
letter-spacing: 0.05em;
opacity: 0.5;
}

}


@media screen and (max-width: 768px) {
#plan {
padding-bottom: 40px;
}
#plan .label {
margin-top: -20px;
}
#plan .label span {
font-size: 48px;
line-height: 48px;
letter-spacing: 0.05em;
}
#plan .cont .title h2 {
font-family: 'Shippori Mincho', serif;
font-size: 24px;
line-height: 24px;
}
#plan .cont .title h2 + p {
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 36px;
letter-spacing: 0;
line-height: 36px;
}
}

#plan .cont .box-sub {
}
#plan .cont .box-sub .inner {
border: solid 1px #d3d3d3;
padding: 40px 50px;
border-radius: 3px;
}

#plan .cont .swiper-plan {
overflow: hidden;
}


@media screen and (max-width: 1200px) {
#plan .cont .box-sub .inner {
border: solid 1px #d3d3d3;
padding: 30px;
border-radius: 3px;
}
#plan .cont .box-sub .title h2 {
font-family: 'Shippori Mincho', serif;
font-size: 24px;
line-height: 24px;
}
#plan .cont .box-sub h2 + p {
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 40px;
letter-spacing: 0;
line-height: 40px;
}
#plan .cont .box-sub .title span {
font-size: 13px;
}
#plan .cont .box-sub ul li {
margin-bottom: 8px;
font-size: 12px;
line-height: 1.6em;
}
#plan .cont .box-sub .attention {
font-size: 10px;
letter-spacing: 0;
opacity: 0.5;
}
}

@media screen and (max-width: 768px) {
#plan .cont .other {
position: relative;
}
#plan .cont .box-sub .title h2 {
line-height: 1.4;
}
}



#plan .swiper-plan .controll {
width: 130px;
height: 60px;
margin-left:auto;
margin-right:0;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-weight: 400;
font-style: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
z-index: 1;
}
#plan .swiper-plan .controll .swiper-pagination-fraction {
position: relative!important;
bottom: 0!important;
}
#plan .swiper-plan .controll .swiper-pagination-fraction span {
font-family: 'Shippori Mincho', serif;
}
#plan .swiper-plan .controll .swiper-button-prev {
margin-top: 0!important;
background-image: url("https://www.petitwedding.com/assets/lp/img/cover-arrow-brown.svg");
background-size: cover;
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
}
#plan .swiper-plan .controll .swiper-button-next {
margin-top: 0!important;
background-image: url("https://www.petitwedding.com/assets/lp/img/cover-arrow-brown.svg");
background-size: cover;
width: 60px;
height: 60px;
position: absolute;
top: 0;
right: 0;
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
#plan .swiper-plan .controll .swiper-button-prev:after, #plan .swiper-plan .controll .swiper-button-next:after {
display: none;
}

#plan .swiper-plan .swiper-button-prev.swiper-button-disabled, #plan .swiper-plan .swiper-button-next.swiper-button-disabled {
pointer-events: none;
opacity: 0.2;
}





/*--------------------------------------------------------------------------
access
---------------------------------------------------------------------------*/
#access .box {
width: 86.6666%;
max-width: 800px;
margin: 0 auto;
}
#access .box p.name {
font-family: 'Shippori Mincho', serif;
font-size: 20px;
line-height: 1.6em;
letter-spacing: 0.05em;
}
#access .box .info {
width: calc(100% - 450px);
padding-right: 30px;
}
#access .box .info p {
line-height: 1.6;
}
#access .box .map iframe {
width: 450px;
height: 450px;
}

@media screen and (max-width: 960px) {
#access .box p.name {
font-family: 'Shippori Mincho', serif;
font-size: 18px;
line-height: 1.6em;
}
#access .box p {
font-size: 12px;
line-height: 1.6em;
}
#access .box .info {
width: 100%;
padding-right: 0;
text-align: center;
}
#access .box .map {
width: 100%!important;
margin-top: 20px;
}
#access .box .map iframe {
width: 100%;
height: 300px;
}
}

/*--------------------------------------------------------------------------
contact
---------------------------------------------------------------------------*/
#contact .box {
width: 100%;
text-align: center;
justify-content: center;
align-items: center;
background-attachment: fixed;
position: relative;
}
#contact .box-vis {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
top: 0;
left: 0;
z-index: -1;
}

#contact .box::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #000;
opacity: 0.7;
position: absolute;
top: 0;
}

#contact .box p {
color: #fff;
position: relative;
line-height: 1.8;
}

#contact .box .label {
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 70px;
letter-spacing: 0.05em;
line-height: 70px;
color: #fff;
position: relative;
}

#contact .box .cta-menu {
max-width: 850px;
margin: 0 auto;
position: relative;
z-index: 10;
}
#contact .box .cta-menu li.btn {
max-width: 48.5%;
flex: 0 1 48.5%;
height: 80px;
background: #aa9d80;
border-radius: 2px;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#contact .box .cta-menu .btn:hover {
background: #666;
}
#contact .box .cta-menu .btn a {
display: flex;
font-size: 16px;
line-height: 80px;
color: #fff;
justify-content: center;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#contact .box .cta-menu .btn a span {
display: flex;
}
#contact .box .cta-menu .btn a span img {
width: 25px;
padding-left: 10px;
}

@media screen and (max-width: 768px) {
#contact .box {
width: 100%;
text-align: center;
background-attachment: initial;
background-repeat: no-repeat;
}
#contact .box .label {
font-size: 48px;
line-height: 48px;
color: #fff;
position: relative;
z-index: 10;
}
#contact .box .label + p {
font-size: 13px;
text-align: left;
}
#contact .box .label + p br {
display: none;
}
#contact .box .cta-menu li.btn {
max-width: 100%;
flex: 0 1 100%;
max-width: initial;
height: 70px;
}
#contact .box .cta-menu .btn:first-child {
margin-bottom: 10px;
}
#contact .box .cta-menu .btn a {
display: block;
font-size: 15px;
line-height: 70px;
color: #fff;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0;
}
#contact .box .cta-menu .btn a span {
display: inline-block;
}
#contact .box .cta-menu .btn a span img {
display: flex;
width: 17px;
padding-left: 5px;
}
}

#contact .box .tel {
position: relative;
text-align: center;
z-index: 10;
text-align: center;
}
#contact .box .tel a {
display: inline-block;
padding-bottom: 5px;
border-bottom: dotted 1px #fff;
color: #fff;
font-size: 30px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#contact .box .tel .icon img {
width: 25px;
height: auto;
padding-right: 10px;
vertical-align: middle;
}

#contact .box .tel:hover a {
opacity: 0.6;
}
@media screen and (max-width: 768px) {
}


#contact .link-box {
background: #f0eeec;
}
#contact .link-box .inner {
width: 90%;
max-width: 550px;
margin: 0 auto;
}
#contact .link-box .inner a {
width: 100%;
height: auto;
}
#contact .link-box .inner .cover {
width: 200px;
overflow:hidden; 
position: relative;
}
#contact .link-box .inner .cover::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: solid 0 rgba(255,255,255,.5);
-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}

#contact .link-box .inner .cover img {
display: block;
-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}
#contact .link-box .inner:hover .cover img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: 0.6;
}
#contact .link-box .inner .txt {
width: calc(100% - 200px);
padding-left: 40px;
}
#contact .link-box .inner .txt p {
font-size: 15px;
line-height: 2em;
}
#contact .link-box .inner .btn {
display: inline-block;
margin-top: 2px;
font-size: 15px;
line-height: 15px;
color: #80704d;
border-bottom: dotted 1px #80704d;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
#contact .link-box .inner .cover {
width: 140px;
}
#contact .link-box .inner .txt {
width: calc(100% - 140px);
padding-left: 20px;
}
#contact .link-box .inner .txt p {
font-size: 12px;
line-height: 1.8em;
}
#contact .link-box .inner .txt p br {
display: none;
}
#contact .link-box .inner .btn {
display: inline-block;
font-size: 12px;
}
}

/*--------------------------------------------------------------------------
fix-contact
---------------------------------------------------------------------------*/

#fix-contact * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#fix-contact {
width : 100%;
position: fixed;
display: none;
top: 0;
z-index: 100;
opacity: 0;
background: #aa9d80;
}
#fix-contact ul.menu-cta {
display: flex;
height: 60px;
}
#fix-contact ul.menu-cta li {
width:  50%;
height: 100%;
display: flex;
background: #f0eeec;
text-align: center;
position: relative;
}
#fix-contact ul.menu-cta li::after {
content: "";
display: block;
width: 1px;
height: 70%;
border-right: solid 1px #d8d6d1;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
#fix-contact ul.menu-cta li a {
width: 100%;
align-self: center;
justify-content: center;

}
#fix-contact ul.menu-cta li a img.icon {
width: 30px;
display: block;
margin: 0 auto;
}
#fix-contact ul.menu-cta li a p {
display: block;
margin-top: 5px;
color: #666;
font-size: 10px;
letter-spacing: 0;
line-height: 1.4;
}

@media screen and (max-width: 960px) {
#fix-contact.active {
display: block;
opacity: 1;
}
}


/*--------------------------------------------------------------------------
bnr-fair
---------------------------------------------------------------------------*/
.bnr-fair {
width: 400px;
position: fixed;
bottom: 0;
right: 0;
background: #fff;
z-index: 10;
box-shadow: 0px 0px 43px -18px #cccccc;
}
.bnr-fair:hover a {
text-decoration: underline;
}
.bnr-fair .bnr-close {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
font-size: 30px;
text-align: center;
color: #666;
position: absolute;
top: 10px;
right: 10px;
z-index: 20;
border: solid 1px #666;
border-radius: 100%;
cursor: pointer;
}
.bnr-fair a {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.bnr-fair a .cover {
width: 120px;
}
.bnr-fair a .txt {
width: calc(100% - 120px);
padding: 20px;
align-self: center;
}
.bnr-fair a .txt span {
display: inline-block;
margin-bottom: 6px;
padding: 2px 4px;
font-size: 12px;
line-height: 1.5;
color: #80704d;
border: solid 1px #80704d;
border-radius: 2px;
}
.bnr-fair a .txt p {
font-size: 13px;
line-height: 1.6;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.bnr-fair {
width: 320px;
position: fixed;
bottom: 0;
right: 0;
background: #fff;
z-index: 10;
box-shadow: 0px 0px 43px -18px #cccccc;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.bnr-fair a .cover {
width: 80px;
}
.bnr-fair a .txt {
width: calc(100% - 80px);
padding: 7px 15px;
}
.bnr-fair a .txt span {
display: inline-block;
margin-bottom: 4px;
padding: 1px 3px;
font-size: 10px;
line-height: 1.5;
color: #80704d;
border: solid 1px #80704d;
border-radius: 2px;
}
.bnr-fair a .txt p {
font-size: 11px;
line-height: 1.6;
letter-spacing: 0.05em;
}
}


/*--------------------------------------------------------------------------
footer
---------------------------------------------------------------------------*/
footer ul.sns {
width: 86.6666%;
max-width: 400px;
height: 30px;
margin: 0 auto;
text-align: center;
position: relative;
justify-content: center;
border-left: solid 1px #d3d3d3;
border-right: solid 1px #d3d3d3;
}
footer ul.sns::before {
content: "";
display: block;
width: 1px;
height: 100%;
margin: 0 auto;
background: #d3d3d3;
position: absolute;
top: 0;
left: 0;
right: 0;
}
footer ul.sns li {
width: 50%;
display: flex;
justify-content: center;
}
footer ul.sns li a {
display: flex;
text-align: center;
font-size: 14px;
letter-spacing: 0;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
footer ul.sns li a:hover {
opacity: 0.5;
}
footer ul.sns a img {
width: 20px;
padding-right: 7px;
}
footer .box {
width: 96%;
margin: 0 auto;
text-align: center;
}
footer .box .logo img {
width: 150px;
}
footer .box .copy {
font-size: 10px;
font-family: "Noto Serif Display", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
opacity: 0.6;
}

@media screen and (max-width: 768px) {
footer.ptb60 {
padding-top: 0!important;
}
footer ul.sns {
width: 100%;
max-width: initial;
height: 60px;
margin: 0 auto;
text-align: center;
position: relative;
justify-content: center;
border-left: none;
border-right: none;
border-bottom: solid 1px #efefef;
}
footer ul.sns::before {
content: "";
display: block;
width: 1px;
height: 100%;
margin: 0 auto;
background: #efefef;
position: absolute;
top: 0;
left: 0;
right: 0;
}
footer ul.sns li {
display: flex;
justify-content: center; 
align-items: center; 
height: 100%;
}
footer ul.sns li a {
display: flex; 
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 13px;
}
footer .box {
margin: 0 auto 30px;
text-align: center;
}
footer .box .logo {
width: 100%;
}
footer .box .logo img {
display: block;
width: 130px;
margin: 0 auto;
}
footer .box .copy {
width: 100%;
margin-top: 15px;
}
}