@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=LINE+Seed+JP:wght@400;700&family=Nothing+You+Could+Do&family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');


.l-header {
display: none;
}
.l-nav-cta {
display: none;
}

.quickvow {
color: #606060;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.quickvow b {
font-weight: 500;
}


.cm-title {
text-align: center;
}

.cm-title .en {
display: block;
font-family: "LINE Seed JP", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 32px;
line-height: 1.5;
}
.cm-title .ja {
font-size: 13px;
line-height: 1.5;
}

/*--------------------------------------------------------------------------
header
---------------------------------------------------------------------------*/
.quickvow-header {
text-align: center;
}
.quickvow-header a {
width: 160px;
display: block;
margin: 0 auto;
padding: 25px 0;
}

@media screen and (max-width: 1200px) {
.quickvow-header a {
width: 120px;
padding: 15px 0;
}
}


/*--------------------------------------------------------------------------
hero
---------------------------------------------------------------------------*/
.hero {
width: auto;
position: relative;
height: calc(45vw - 93px);
}
.hero picture {
display: inline;
}
.hero img.main {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}

.hero img.budge {
width: 10%;
display: block;
position: absolute;
left: 3%;
top: 6%;
}

.hero img.copy {
width: 50%;
display: block;
margin: 0 auto;
margin-left: 40%;
position: absolute;
left: 0;
right: 0;
bottom: -15%;
}

@media screen and (max-width: 1200px) {
.hero {
width: auto;
position: relative;
height: calc(45vw - 62px);
}
}

@media screen and (max-width: 960px) {
.hero {
width: auto;
position: relative;
min-height: 500px;
height: calc(90vh - 62px);
}
.hero img.budge {
width: 25%;
display: block;
position: absolute;
left: 3%;
top: initial;
bottom: 10%;
}

.hero img.copy {
width: 86.6666%;
display: block;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
bottom: -15%;
}
}

@media screen and (max-width: 768px) {
.hero img.budge {
width: 35%;
left: initial;
right: 4%;
bottom: 2%;
}
.hero img.copy {
width: 86.6666%;
display: block;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
bottom: initial;
}
}


/*--------------------------------------------------------------------------
lead
---------------------------------------------------------------------------*/
.lead {
position: relative;
}

.lead .dec1 {
width: 30%;
position: absolute;
top: -10%;
left: 0;
z-index: -1;
}

.lead .dec2 {
width: 17%;
position: absolute;
bottom: 0;
right: 15%;
}


.lead-inner {
width: 86.6666%;
max-width: 680px;
margin-left: 20%;
}

.lead-inner b {
display: block;
font-size: 36px;
line-height: 1.5;
letter-spacing: 0.05em;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
font-style: normal;
}
.lead-inner p {
margin-bottom: 20px;
line-height: 2.2;
}


@media screen and (max-width: 960px) {
.lead {
padding-top: 0!important;
}
.lead .dec1 {
width: 40%;
position: absolute;
top: -5%;
left: 0;
z-index: -1;
}
.lead .dec2 {
width: 20%;
position: absolute;
bottom: -6%;
right: 2%;
}
.lead-inner {
width: 86.6666%;
max-width: 680px;
margin: 0 auto;
position: relative;
left: initial;
}
.lead-inner b {
font-size: 26px;
}
.lead-inner p {
font-size: 14px;
line-height: 1.8;
}
.lead-inner p br {
display: none;
}
}


/*--------------------------------------------------------------------------
slider
---------------------------------------------------------------------------*/
.slider {
overflow: hidden;
}

.slider .swiper-wrapper {
transition-timing-function: linear;
}


/*--------------------------------------------------------------------------
grada
---------------------------------------------------------------------------*/
.grada {
background-image:url("https://www.petitwedding.com/assets/lp/img/quickvow-grada.jpg");
background-repeat:  no-repeat;
background-position:center center;
width:100%;
height:100%;
}


/*--------------------------------------------------------------------------
scene
---------------------------------------------------------------------------*/
ul.scene-list {
width: 86.6666%;
max-width: 980px;
margin: 0 auto;
}
ul.scene-list li {
width: 30.5%;
text-align: center;
}
ul.scene-list li .cover img {
border-radius: 100%;
}

ul.scene-list li .txt b {
display: block;
font-size: 22px;
line-height: 1.5;
}
ul.scene-list li .txt p {
margin-top: 5px;
font-size: 15px;
line-height: 1.7;
}



@media screen and (max-width: 1200px) {
ul.scene-list li .txt p {
text-align: left;
}
ul.scene-list li .txt p br {
display: none;
}
}

@media screen and (max-width: 960px) {
ul.scene-list li {
width: 100%;
display: flex;
margin-bottom: 20px;
text-align: left;
}
ul.scene-list li:last-child {
margin-bottom: 0;
}

ul.scene-list li .cover {
width: 120px;
}
ul.scene-list li .txt {
width: calc(100% - 120px);
margin: 0 0 0 15px!important;
align-self: center;
}
ul.scene-list li .txt b {
font-size: 15px;
}
ul.scene-list li .txt p {
font-size: 12px;
line-height: 1.6;
}
}

/*--------------------------------------------------------------------------
plan
---------------------------------------------------------------------------*/
.plan {}

.plan .plan-lead {
text-align: center;
}

.plan .plan-lead .price {
margin-top: 8px;
}
.plan .plan-lead .price img {
display: block;
max-width: 220px;
margin: 0 auto;
}

.plan ul.plan-include-list {
width: 86.6666%;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.plan ul.plan-include-list li {
width: 32.5%;
aspect-ratio: 1 / 1;
position: relative;
}
.plan ul.plan-include-list li::before {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
background: #fff;
z-index: 1;
box-shadow: 0px 0px 20px -11px #dadada;
}
.plan ul.plan-include-list li .box {
position: absolute;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 10;
}
.plan ul.plan-include-list li .box .cover img {
width: 100px;
display: block;
margin: 0 auto;
}
.plan ul.plan-include-list li .box .cover img {
width: 100px;
display: block;
margin: 0 auto;
}
.plan ul.plan-include-list li .box .txt {
margin-top: 10px;
font-size: 14px;
line-height: 1.5;
}
@media screen and (max-width: 768px) {

.plan .plan-lead .price img {
display: block;
max-width: 200px;
margin: 0 auto;
}
.plan ul.plan-include-list li .box .cover img {
width: 70px;
display: block;
margin: 0 auto;
}
.plan ul.plan-include-list li .box .txt {
margin-top: 6px;
font-size: 11px;
font-weight: 500;
}
}


.plan .label-option {
text-align: center;
font-size: 28px;
font-family: "Google Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"GRAD" 0;
line-height: 28px;
text-align: center;
}

.plan .plan-option-box {
width: 86.6666%;
max-width: 760px;
margin: 0 auto;
padding: 30px;
background: #fff;
box-shadow: 0px 0px 20px -11px #dadada;
}
.plan ul.plan-option-list {
}
.plan ul.plan-option-list li {
width: 48%;
padding: 15px 0;
display: flex;
border-bottom: dashed 1px #d3d3d3;
font-size: 13px;
}
.plan ul.plan-option-list li:nth-last-child(-n+2) {
border-bottom: none;
}
.plan ul.plan-option-list li .cate {
width: calc(100% - 100px);
}
.plan ul.plan-option-list li .price {
width: 100px;
text-align: right;
}

@media screen and (max-width: 768px) {
.plan .label-option {
text-align: center;
font-size: 20px;
font-family: "Google Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"GRAD" 0;
line-height: 28px;
text-align: center;
}
.plan .plan-option-box {
width: 86.6666%;
max-width: 760px;
margin: 0 auto;
padding: 20px 25px;
background: #fff;
}
.plan ul.plan-option-list li {
width:  100%;
padding: 12px 0;
display: flex;
border-bottom: dashed 1px #d3d3d3;
font-size: 12px;
}
.plan ul.plan-option-list li:nth-last-child(-n+2) {
border-bottom: dotted 1px #d3d3d3;
}
.plan ul.plan-option-list li:last-child {
border-bottom: none;
}

}



/*--------------------------------------------------------------------------
point
---------------------------------------------------------------------------*/
.point {
text-align: center;
}
.point .label p {
max-width: 200px;
margin: 6px auto 0;
}
.point ul.point-list {
width: 86.6666%;
max-width: 1120px;
margin: 0 auto;
}
.point ul.point-list li {
display: flex;
margin-bottom: 100px;
}
.point ul.point-list li .cover {
width: 55%;
position: relative;
}
.point ul.point-list li .cover .number {
width: 70px;
height: 70px;
color: #ed5cb6;
line-height: 70px;
border-radius: 100px;
border: solid 1px #ed5cb6;
background: #fff;
font-family: "Google Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
font-variation-settings:
"GRAD" 0;
position: absolute;
top: -30px;
left: -30px;
}
.point ul.point-list li.reverse .cover .number {
top: -30px;
left: inherit;
right: -30px;
}


.point ul.point-list li .txt {
width: 45%;
padding-left: 5%;
align-self: center;
text-align: left;
}

.point ul.point-list li.reverse .txt {
order: -1; 
padding-left: 0;
padding-right: 5%;
}
.point ul.point-list li .txt b {
display: block;
font-size: 22px;
line-height: 1.5;
}
.point ul.point-list li .txt p {
margin-top: 8px;
line-height: 1.6;
}


@media screen and (max-width: 960px) {
.point-list-wrapper {
width: initial;
max-width: 960px;
overflow-x: scroll;
}
.point-list-wrapper .point-list-inner {
width: 960px;
margin: 0 10%;
}

.point ul.point-list {
width: 100%;
max-width: initial;
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.point ul.point-list li {
width: 31%;
display: block;
margin-bottom: 0;
}
.point ul.point-list li .cover {
width: 100%;
}

.point ul.point-list li .cover .number {
width: 60px;
height: 60px;
color: #ed5cb6;
line-height: 60px;
border-radius: 100px;
border: solid 1px #ed5cb6;
background: #fff;
font-family: "Google Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
font-variation-settings:
"GRAD" 0;
position: absolute;
top: -20px;
left: -20px;
}
.point ul.point-list li.reverse .cover .number {
top: -20px;
left: -20px;
right: initial;
}

.point ul.point-list li .txt {
width: 100%;
margin-top: 18px;
padding-left: 0;
align-self: center;
text-align: left;
}
.point ul.point-list li .txt b {
margin-top: 15px;
font-size: 15px;
}
.point ul.point-list li .txt p {
margin-top: 6px;
line-height: 1.7;
}
}

/*--------------------------------------------------------------------------
bg-cover
---------------------------------------------------------------------------*/

.bg-cover {
width: 100%;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
color: #fff;
clip-path: inset(0);
position: relative;
}

.bg-cover::before {
content: "";
width: 100%;
height: 100vh;
background-image: url("https://www.petitwedding.com/assets/lp/img/quickvow-cover.jpg");
background-size: cover;
background-position: center center;
position: fixed;
top: 0;
z-index: -2;
}


@media screen and (max-width: 960px) {
.bg-cover {
width: 100%;
height: 60vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
color: #fff;
clip-path: inset(0);
position: relative;
}
.bg-cover::before {
content: "";
height: 100vh;
background-image: url("https://www.petitwedding.com/assets/lp/img/quickvow-cover-sp.jpg");
top: initial;
bottom: 0;
}
}

/*--------------------------------------------------------------------------
schedule
---------------------------------------------------------------------------*/

.schedule {
background: #ebf5fa;
}
.schedule .lead {
width: 90%;
max-width: 360px;
margin: 0 auto;
text-align: center;
position: relative;
}
.schedule .lead .dec {
display: block;
width: 100%;
margin: 0 auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
}

.schedule ul.schedule-list {
width: 86.6666%;
max-width: 720px;
margin: 0 auto;
position: relative;
}
.schedule ul.schedule-list::after {
content: "";
width: 1px;
height: 100%;
display: block;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
background: #c1dcde;
}


.schedule ul.schedule-list li {
display: flex;
margin-bottom: 20px;
background: #fff;
position: relative;
z-index: 10;
}
.schedule ul.schedule-list li .cover {
width: 220px;
}
.schedule ul.schedule-list li .txt {
width: calc(100% - 220px);
padding: 0 30px;
align-self: center;
}
.schedule ul.schedule-list li .txt .time {
display: inline-block;
padding: 3px 10px;
border-radius: 100px;
background: #ed5cb6;
color: #fff;
font-size: 13px;
line-height: 1.5;
}
.schedule ul.schedule-list li .txt .label {
display: block;
margin-top: 10px;
font-size: 18px;
line-height: 1.5;
}
.schedule ul.schedule-list li .txt .intro {
margin-top: 6px;
font-size: 14px;
line-height: 1.5;
}

@media screen and (max-width: 768px) {
.schedule .lead {
width: 90%;
max-width: 300px;
margin: 0 auto;
text-align: center;
position: relative;
}
.schedule ul.schedule-list li .cover {
width: 150px;
}
.schedule ul.schedule-list li .txt {
width: calc(100% - 150px);
padding: 0 20px;
align-self: center;
}

.schedule ul.schedule-list li .txt .time {
display: inline-block;
padding: 3px 10px;
border-radius: 100px;
background: #ed5cb6;
color: #fff;
font-size: 12px;
line-height: 1.5;
}
.schedule ul.schedule-list li .txt .label {
display: block;
margin-top: 10px;
font-size: 15px;
line-height: 1.5;
}
.schedule ul.schedule-list li .txt .intro {
margin-top: 4px;
font-size: 12px;
line-height: 1.6;
}
}


/*--------------------------------------------------------------------------
promise
---------------------------------------------------------------------------*/
.promise {
background-image:url("https://www.petitwedding.com/assets/lp/img/quickvow-promise-bg.jpg");
background-repeat:  no-repeat;
background-position:center center;
background-size:cover;
width:100%;
height:100%;
}
.promise .promise-wrapper {
display: flex;
}
.promise .cover {
width: 600px;
}
.promise dl.promise-list {
width: calc(100% - 600px);
display: flex;
flex-wrap: wrap;
padding-left: 50px;
}
.promise dl.promise-list dt {
width: 100px;
padding: 20px 0;
border-bottom: solid 1px #d7e8ea;
}
.promise dl.promise-list dd {
width: calc(100% - 100px);
padding: 30px 0;
border-bottom: solid 1px #d7e8ea;
}
.promise dl.promise-list dt {
color: #96c3c6;
font-family: "Nothing You Could Do", cursive;
font-weight: 400;
font-style: normal;
font-size: 70px;
line-height: 70px;
}
.promise dl.promise-list dd b {
display: block;
font-size: 22px;
font-weight: 500;
line-height: 1.5;
}
.promise dl.promise-list dd p {
margin-top: 10px;
line-height: 1.5;
}


@media screen and (max-width: 1200px) {
.promise .cover {
width: 500px;
}
.promise dl.promise-list {
width: calc(100% - 500px);
display: flex;
flex-wrap: wrap;
padding-left: 40px;
}
}

@media screen and (max-width: 960px) {

.promise .promise-wrapper {
display: block;
}
.promise .cover {
width: 100%;
}
.promise dl.promise-list {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 20px;
padding-left: 0;
}
.promise dl.promise-list dt {
width: 90px;
padding: 15px 0;
border-bottom: solid 1px #d7e8ea;
}
.promise dl.promise-list dd {
width: calc(100% - 90px);
padding: 15px 0;
border-bottom: solid 1px #d7e8ea;
}
.promise dl.promise-list dt {
color: #96c3c6;
font-family: "Nothing You Could Do", cursive;
font-weight: 400;
font-style: normal;
font-size: 60px;
line-height: 60px;
}
.promise dl.promise-list dd b {
display: block;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}
.promise dl.promise-list dd p {
margin-top: 3px;
font-size: 13px;
line-height: 1.5;
}
}


/*--------------------------------------------------------------------------
chapel
---------------------------------------------------------------------------*/
.chapel {
min-height: 1000px;
}

.chapel ul.chapel-cate {
max-width: 1120px;
margin: 0 auto;
}
.chapel ul.chapel-cate li {
width: 16%;
padding: 15px 0;
box-shadow: 0 0 0 1px #d3d3d3 inset;
text-align: center;
cursor: pointer;
-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;
}
.chapel ul.chapel-cate li:hover {
box-shadow: 0 0 0 1px #666 inset;
background: #666;
color: #fff;
}
.chapel ul.chapel-cate li.active {
box-shadow: 0 0 0 1px #48aeb5 inset;
background: #48aeb5;
color: #fff;
}
@media screen and (max-width: 960px) {
.chapel ul.chapel-cate {
border-top: solid 1px #e1e1e1;
border-left: solid 1px #e1e1e1;
border-bottom: solid 1px #e1e1e1;
position: relative;
}
.chapel ul.chapel-cate::before {
content: "";
width: 100%;
height: 1px;
display: block;
background: #e1e1e1;
position: absolute;
left: 0;
top: 50%;
}
.chapel ul.chapel-cate li {
width: 33.3333%;
padding: 12px 0;
box-shadow: none;
text-align: center;
font-size: 13px;
box-shadow: -1px 0 0 0 #e1e1e1 inset;
}
}

.chapel .area-box {
display: none;
}
.chapel .area-box.active {
display: block;
}
.chapel ul.area-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.chapel ul.area-list:before {
  content: "";
  display: block;
  width: 31%;
  order: 1;
}
.chapel ul.area-list:after {
  content: "";
  display: block;
  width: 31%;
}
.chapel ul.area-list li {
width: 31%;
margin-top: 40px;
}
.chapel ul.area-list li .info {
margin-top: 15px;
}
.chapel ul.area-list li .info h3 {
line-height: 1.5;
}
.chapel ul.area-list li .info p {
margin-top: 3px;
font-size: 13px;
line-height: 1.8;
opacity: 0.8;
}
@media screen and (max-width: 960px) {
.chapel {
min-height: 600px;
}
.chapel ul.area-list li {
width: 48%;
margin-top: 20px;
}
.chapel ul.area-list li .info {
margin-top: 10px;
}
.chapel ul.area-list li .info p {
margin-top: 2px;
font-size: 11px;
line-height: 1.6;
}
}


/*--------------------------------------------------------------------------
contact
---------------------------------------------------------------------------*/
.contact {
background-image:url("https://www.petitwedding.com/assets/lp/img/quickvow-contact-bg.jpg");
background-repeat:  no-repeat;
background-position:center center;
background-size:cover;
width:100%;
height:100%;
}
.contact .lead {
text-align: center;
line-height: 1.8;
}
.contact .btn-reserve {
width: 86.6666%;
max-width: 560px;
margin: 0 auto;
justify-content: center;
background: #fff;
text-align: center;
justify-content: center;
border-radius: 100px;
-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 .btn-reserve:not(.tel):hover {
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 0 1px #fff inset;
}

.contact .btn-reserve a {
display: flex;
height: 110px;
font-size: 18px;
line-height: 1.5;
letter-spacing: 0.05em;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
font-style: normal;
color: #73a4ba;
position: relative;
justify-content: center;
align-items: center;
}
.contact .btn-reserve.tel a {
pointer-events: none;
}

.contact .btn-reserve a .icon {
width: 18px;
height: auto;
display: flex;
margin-right: 18px;
}
.contact .btn-reserve a span {
display: flex;
}
.contact .btn-reserve a span.number {
font-family: "LINE Seed JP", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 20px;
line-height: 20px;
}

.contact .info {
font-size: 13px;
line-height: 1.8;
text-align: center;
color: #73a4ba;
}


@media screen and (max-width: 960px) {
.contact .btn-reserve a {
display: flex;
height: 80px;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.05em;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
font-style: normal;
color: #73a4ba;
position: relative;
justify-content: center;
}
.contact .btn-reserve.tel:hover {
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 0 1px #fff inset;
}
.contact .btn-reserve.tel a {
pointer-events: initial;
}
.contact .info {
font-size: 12px;
line-height: 1.7;
}
}