.c-title {
text-align: center;
}
.c-title .en {
font-family: "Crimson Text", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 57px;
line-height: 57px;
}
.c-title .main {
margin-top: 5px;
font-size: 15px;
line-height: 1.6;
}


@media screen and (max-width: 768px) {
.c-title .en {
font-family: "Crimson Text", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 48px;
line-height: 48px;
}
.c-title .main {
margin-top: 5px;
font-size: 12px;
line-height: 1.6;
}
}


.c-btn p {
display: inline-block;
}
.c-btn p a {
display: flex;
padding: 5px 15px;
border-radius: 100px;
border: solid 1px #333;
font-size: 13px;
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;
}
.c-btn p a:hover {
background: #666;
border: solid 1px #666;
color: #fff;
}
.c-btn a i {
padding-left: 5px;
font-size: 10px;
font-style: normal;
align-self: center;
}


/*--------------------------------------------------------------------------
hero
---------------------------------------------------------------------------*/
.hero {
position: relative;
}
.hero .copy {
width: 30%;
padding: 30px;
text-align: center;
background: #fff;
position: absolute;
bottom: 30px;
left: 30px;
font-size: 1.2vw;
}

@media screen and (max-width: 768px) {
.hero .copy {
width: 90%;
margin: 20px auto 0;
padding: 0;
position: relative;
bottom: initial;
left: initial;
}
}


/*--------------------------------------------------------------------------
label
---------------------------------------------------------------------------*/
.label {
text-align: center;
}

.label h1 {
font-size: 24px;
letter-spacing: 0.2em;
}
.label span {
margin-top: 15px;
display: block;
font-family: "Crimson Text", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 70px;
line-height: 70px;
}
.label i {
display: block;
width: 300px;
margin: 10px auto 0;
}

@media screen and (max-width: 768px) {
.label {
margin-top: 70px!important;
}
.label h1 {
font-size: 20px;
letter-spacing: 0.1em;
}
.label span {
margin-top: 5px;
font-size: 56px;
line-height: 56px;
}
}


/*--------------------------------------------------------------------------
present
---------------------------------------------------------------------------*/
.present {
background: #f5f9fb;
padding: 30px;
position: relative;
text-align: center;
border-radius: 5px;
border: solid 2px #22aab9;
position: relative;
}
.present .dec {
width: 60px;
height: 60px;
position: absolute;
top: -4px;
left: -4px;
}

.present .title {
position: relative;
z-index: 10;
}
.present .title .en {
font-family: "Crimson Text", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 36px;
line-height: 36px;
color: #22aab9;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: #22aab9;
text-decoration-thickness: 1px;
}
.present .title .main {
font-size: 18px;
line-height: 1.4;
}
.present ul.present-list {
position: relative;
z-index: 10;
}
.present ul.present-list {
max-width: 600px;
margin: 0 auto;
align-items: flex-start;
}
.present ul.present-list li {
width: 31%;
}
.present ul.present-list li .cover img {
border-radius: 100%;
}
.present ul.present-list li .txt {
margin-top: 10px;
font-size: 14px;
line-height: 1.5;
}
.present .catch {
color: #22aab9;
font-size: 14px;
}

@media screen and (max-width: 768px) {
.present {
padding: 20px;
}
.present .dec {
width: 40px;
height: 40px;
position: absolute;
top: -4px;
left: -4px;
}
.present .title .en {
font-family: "Crimson Text", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 22px;
line-height: 22px;
color: #22aab9;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: #22aab9;
text-decoration-thickness: 1px;
}
.present .title .main {
font-size: 14px;
line-height: 1.5;
}
.present ul.present-list li .txt {
margin-top: 5px;
font-size: 11px;
}
.present ul.present-list li .txt br {
display: none;
}
.present .catch {
font-size: 13px;
}
}

/*--------------------------------------------------------------------------
point
---------------------------------------------------------------------------*/

.point ul.point-list {
 align-items: flex-start;
}
.point ul.point-list li {
width: 31%;
position: relative;
}
.point ul.point-list li .number {
content: "";
display: inline-block;
width: 45px;
height: 45px;
background-image: url("https://www.petitwedding.com/assets/lp/img/okinawa-local-point-budge.svg");
background-size: contain;
vertical-align: middle;
position: absolute;
top: -15px;
left: -15px;
text-align: center;
color: #fff;
line-height: 45px;
}


.point ul.point-list li .cover img {
border-radius: 5px;
}
.point ul.point-list li .txt {
margin-top: 25px;
}
.point ul.point-list li .txt h3 {
color: #25aab9;
font-size: 18px;
font-weight: bold;
line-height: 1.5;
}
.point ul.point-list li .txt p {
margin-top: 10px;
font-size: 13px;
}
.point ul.point-list li .txt span {
display: block;
margin-top: 5px;
font-size: 10px;
opacity: 0.8;
line-height: 1.5;
}

@media screen and (max-width: 768px) {
.point ul.point-list {
width: 86.6666%;
margin: 0 auto;
}
.point ul.point-list li {
width: 100%;
margin-bottom: 45px;
}
.point ul.point-list li .txt {
margin-top: 20px;
}
.point ul.point-list li .txt h3 {
color: #25aab9;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
}
.point ul.point-list li .txt p {
margin-top: 5px;
font-size: 14px;
}
}

/*--------------------------------------------------------------------------
intro
---------------------------------------------------------------------------*/

.intro {
background: #f5f9fb;
}

.intro .inner {
width: 94%;
margin: 0 auto 40px;
background: #fff;
border-radius: 5px;
}

.intro .title {
text-align: center;
}
.intro .title .mes {
text-align: center;
}
.intro .title .mes p {
display: inline-block;
margin: 0 auto;
padding: 5px 15px;
border-radius: 100px;
background: #fff;
position: relative;
}
.intro .title .mes p:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 10px solid transparent;
border-top: 10px solid #fff;
}

.intro .title .catch {
text-align: center;
}
.intro .title .catch p {
display: inline-block;
color: #25aab9;
font-size: 24px;
font-weight: bold;
line-height: 24px;
}
.intro .title .catch p br {
display: none;
}
.intro .title .catch p i {
display: block;
width: 100%;
margin-top: 5px;
line-height: 1;
}



@media screen and (max-width: 768px) {
.intro .title .mes p {
font-size: 13px;
padding: 5px 15px;
letter-spacing: 0;
}
.intro .title .mes p:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 5px solid transparent;
border-top: 5px solid #fff;
}
.intro .title .catch p {
display: inline-block;
color: #25aab9;
font-size: 20px;
font-weight: bold;
line-height: 1.4;
}
.intro .title .catch p br {
display: block;
}
.intro .title .catch p i {
display: block;
width: 100%;
margin-top: 0;
}
}


.intro .title .area {
display: inline-block;
padding: 10px 15px;
background: #25aab9;
border-radius: 100px;
font-size: 15px;
color: #fff;
line-height: 15px;
letter-spacing: 0;
}
.intro .title .place {
margin-top: 10px;
font-size: 24px;
line-height: 1.5;
}
.intro .title .price {
margin-top: 10px;
font-size: 13px;
line-height: 1.5;
}
.intro .title .price::before {
content: "( ";
}
.intro .title .price::after {
content: " )";
}



.intro .box {
background: #fff;
}
.intro .box .cover {
width: 60%;
overflow: hidden;
}
.intro .box .txt {
padding: 30px 4%;
width: 40%;
}

.intro .reverse .box .txt {
order: -1;
}


.intro .box .txt .catch {
font-size: 24px;
font-family: "Shippori Mincho", serif;
font-weight: 400;
font-style: normal;
line-height: 1.5;
}
.intro .txt .price {
}
.intro .txt .price .icon {
display: block;
width: 100px;
height: 100px;
line-height: 100px;
background: #e6316e;
color: #fff;
border-radius: 100%;
font-family: "Crimson Text", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 14px;
letter-spacing: 0;
text-align: center;
}
.intro .txt .price .main {
width: calc(100% - 100px);
padding-left: 10px;
text-align: left;
}
.intro .txt .price .main p {
font-family: "Crimson Text", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 50px;
letter-spacing: 0;
line-height: 50px;
color: #e6316e;
}
.intro .txt .price .main p i {
font-style: normal;
font-size: 18px;
line-height: 18px;
}
.intro .txt .price .main small {
display: block;
font-size: 14px;
line-height: 1.5;
}
.intro .txt .price .main span {
display: inline-block;
margin-top: 4px;
padding: 3px 6px;
border: solid 1px #d3d3d3;
font-size: 12px;
border-radius: 100px;
line-height: 12px;
letter-spacing: 0;
}

@media screen and (max-width: 768px) {
.intro .txt .price .icon {
display: block;
width: 80px;
height: 80px;
line-height: 80px;
background: #e6316e;
color: #fff;
border-radius: 100%;
font-family: "Crimson Text", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 13px;
letter-spacing: 0;
text-align: center;
}
.intro .txt .price .main {
width: calc(100% - 80px);
padding-left: 10px;
text-align: left;
}
.intro .txt .price .main span {
margin-top: 2px;
}
}





.intro .box .txt ul.feature-list {
margin-top: 10px;
padding-left: 1em; 
list-style-type: disc;
}
.intro .box .txt ul.feature-list li {
margin-bottom: 5px;
padding-left: 5px;
font-size:14px;
line-height: 1.5;
}
.intro .box .txt ul.feature-list li::marker {
color: #e6dab4;
font-size: 11px;
line-height: 1.5;
vertical-align: top;
}
.intro .box .txt .campaign {
margin-top: 15px;
color: #be954f;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
}

@media screen and (max-width: 1200px) {
.intro .box .txt ul.feature-list li {
padding-left: 5px;
font-size:13px
}
.intro .box .txt .campaign {
margin-top: 15px;
color: #be954f;
font-size: 13px;
font-weight: bold;
}
}


@media screen and (max-width: 960px) {
.intro .title .area {
display: inline-block;
padding: 8px 15px;
background: #25aab9;
border-radius: 100px;
font-size: 13px;
color: #fff;
line-height: 13px;
letter-spacing: 0;
}
.intro .title .place {
margin-top: 10px;
font-size: 18px;
line-height: 1.5;
}
.intro .box {
margin: 20px 0 0;
background: #fff;
}
.intro .box .cover {
width: 100%;
}
.intro .box .txt {
padding: 20px 0 0;
width: 100%;
}
.intro .reverse .box .txt {
order: 0;
}
.intro .c-btn {
text-align: center;
}

}

.intro .cover-swiper .swiper {
position: relative;
}
.intro .cover-swiper .swiper-pagination {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
z-index: 100;
text-align: center;
}

.intro .cover-swiper .swiper-pagination-bullet {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 4px;
border-radius: 50%;
background: #fff;
}

.intro .cover-swiper .swiper-pagination-bullet-active {
background: #333;
}

.intro .cover-img {
border-radius: 4px;
}

/*--------------------------------------------------------------------------
gallery
---------------------------------------------------------------------------*/
.gallery {
max-width: 940px;
margin: 0 auto;
}
.gallery .gallery-lead {
text-align: center;
font-size: 13px;
opacity: 0.6;
letter-spacing: 0;
}
.gallery ul.gallery-list li {
width: 20%;
-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;
}
.gallery ul.gallery-list li:hover {
opacity: 0.6;
}
@media screen and (max-width: 768px) {
.gallery ul.gallery-list li {
width: 33.3333%;
}
}

/*--------------------------------------------------------------------------
voice
---------------------------------------------------------------------------*/
.voice .inner {
width: 86.6666%;
max-width: 1200px;
margin: 0 auto;
}
.voice ul.voice-list {
align-items: flex-start;
}
.voice ul.voice-list li .number {
margin-bottom: 20px;
text-align: center;
color: #25aab9;
font-family: "Crimson Text", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 14px;
line-height: 14px;
}
.voice ul.voice-list li {
width: 32%;
padding: 30px;
box-shadow: 0 0 0 1px #e6e6e6 inset;
border-radius: 3px;
}

.voice ul.voice-list li .cover {
margin-bottom: 20px;
}
.voice ul.voice-list li .cover img {
width: 150px;
display: block;
margin: 0 auto;
border-radius: 100px;
}
.voice ul.voice-list li p {
font-size: 13px;
line-height: 1.6;
}


@media screen and (max-width: 960px) {
.voice .inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
overflow-x: scroll;
}
.voice ul.voice-list {
width: 1000px;
padding: 0 7%;
}
}


/*--------------------------------------------------------------------------
clothing
---------------------------------------------------------------------------*/
.clothing {
background: #f5f9fb;
}
.clothing .box {
width: 86.6666%;
max-width: 1200px;
margin: 0 auto;
}
.clothing .cover {
width: 60%;
}
.clothing .txt {
width: 40%;
padding-left: 4%;
}
.clothing .c-btn a {
background: #fff;
}

@media screen and (max-width: 960px) {
.clothing .box {
width: 100%;
}
.clothing .cover {
width: 100%;
}
.clothing .txt {
width: 86.6666%;
margin: 15px auto 0;
font-size: 14px;
padding-left: 0;
}
.clothing .c-btn {
text-align: center;
}
}

// * -------------------------------------------------------------------
// * FAQ
// * -------------------------------------------------------------------


.okinawa-accordion_area {
    border-bottom: dotted 1px #d3d3d3;
}
.okinawa-accordion_area .okinawa-accordion_one .ac_header {
    border-top: dotted 1px #d3d3d3;
    padding: 30px 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: .2s;

}

.okinawa-accordion_area .okinawa-accordion_one .ac_header .i_box {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
}

.okinawa-accordion_area .okinawa-accordion_one .ac_header .i_box:before,.okinawa-accordion_area .okinawa-accordion_one .ac_header .i_box:after {
    position: absolute;
    content: "";
    margin: auto;
    box-sizing: border-box;
    vertical-align: middle;
}

.okinawa-accordion_area .okinawa-accordion_one .ac_header .i_box:before {
    border-top: 1px solid #25aab9;
    width: 20px;
    height: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.okinawa-accordion_area .okinawa-accordion_one .ac_header .i_box:after {
    border-left: 1px solid #25aab9;
    width: 0;
    height: 20px;
    top: 0;
    bottom: 0;
    right: 9px;
    transition: .3s;
}

.okinawa-accordion_area .okinawa-accordion_one .ac_header.open .i_box:after {
    height: 0;
}

.okinawa-accordion_area .okinawa-accordion_one .ac_inner {
    display: none;
    padding: 0 0 30px;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .okinawa-accordion_area .okinawa-accordion_one .ac_header {
        padding: 20px 0;
    }

    .okinawa-accordion_area .okinawa-accordion_one .ac_header .i_box {
        right: .8rem;
        width: 15px;
        height: 15px;
        margin-top: -7px;
    }

    .okinawa-accordion_area .okinawa-accordion_one .ac_header .i_box:before {
        width: 15px;
    }

    .okinawa-accordion_area .okinawa-accordion_one .ac_header .i_box:after {
        height: 15px;
        right: 7px;
    }

    .okinawa-accordion_area .okinawa-accordion_one .ac_inner {
        padding: 0 0 20px;
    }
}

.p-faq__headinner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.p-faq__q-txt {
    width: calc(100% - 80px);
    padding-left: 40px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

.p-faq__q-txt::before {
    content: "Q";
    color: #25aab9;
    font-family: "Crimson Text", serif;
    font-size: 24px;
    font-style: normal;
    line-height: 24px;
    position: absolute;
    top: 0;
    left: 0;
}

.p-faq__bodyinner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.p-faq__a-txt {
    width: calc(100% - 80px);
    padding-left: 40px;
}

.p-faq__a-txt::before {
    content: "A";
    font-family: "Crimson Text", serif;
    font-size: 24px;
    font-style: normal;
    line-height: 24px;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1200px) {
    .p-faq__q-txt {
        font-size:1.4rem;
    }
}

@media screen and (max-width: 768px) {
    .p-faq__q-txt {
        width:calc(100% - 30px);
        padding-left: 30px;
        font-size: 13px;
    }

    .p-faq__q-txt::before {
        content: "Q";
        color: #25aab9;
        font-size: 20px;
        font-style: normal;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .p-faq__a-txt {
        width: calc(100% - 30px);
        padding-left: 30px;
        font-size: 13px;
    }

    .p-faq__a-txt::before {
        content: "A";
        font-size: 20px;
        font-style: normal;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
    }
}



/*--------------------------------------------------------------------------
contact
---------------------------------------------------------------------------*/
.contact {
background: #f5f9fb;
}
.contact .box {
width: 86.6666%;
max-width: 900px;
margin: 0 auto;
}
.contact .mes {
text-align: center;
}
.contact .mes p {
display: inline-block;
margin: 0 auto;
padding: 5px 15px;
background: #fff;
border-radius: 100px;
}
.contact .contact-lead {
font-size: 14px;
text-align: center;
}

.contact .btn-list li {
width: 49%;
height: 80px;
background :#25aab9;
text-align: center;
justify-content: center;
align-items: center;
position: relative;
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;
}
.contact .btn-list li:hover {
background :#666;
}
.contact .btn-list li a {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
color: #fff;
}
.contact .btn-list li a p {
display: block;
width: 100%;
}
.contact .btn-list li a {
font-size: 18px;
line-height: 18px;
}
.contact .btn-list li a .tel {
font-size: 40px;
line-height: 30px;
font-family: "Crimson Text", serif;
font-weight: 400;
font-style: normal;
}
.contact .btn-list li a span {
display: block;
margin-top: 10px;
font-size: 12px;
line-height: 12px;
letter-spacing: 0;
}

@media screen and (max-width: 768px) {
.contact .mes p {
font-size: 13px;
}
.contact .contact-lead {
font-size: 13px;
text-align: left;
}
.contact .contact-lead br {
display: none;
}
.contact .contact-lead br {
display: none;
}
.contact .btn-list li {
width: 100%;
height: 70px;
}
.contact .btn-list li:first-child {
margin-bottom: 12px;
}
.contact .btn-list li a {
font-size: 15px;
line-height: 15px;
}
.contact .btn-list li a .tel {
font-size: 30px;
line-height: 25px;
}
.contact .btn-list li a span {
margin-top: 7px;
font-size: 11px;
line-height: 11px;
}
}