@charset "UTF-8";

/* =============================================
 SCENE VARIOUS CSS
============================================= */

#scene .page_main_img{
    background-image: url(../img/main_img.jpg);
}

#scene .scene_bg{
    background-image: url(../img/main_bg.gif);
}

#scene .scene_title{
    background-image: url(../img/scene_item_01.png);
    background-position: bottom right;
}

#scene .scene_point{
    background-image: url(../img/scene_item_02.png);

}


.family_img{
	margin: 0 auto;
	max-width: 600px;
}

/* =============================================
マタニティフォト1,000円キャンペーン
============================================= */
.m1000__main .page_main_img {
    background-image: url(../img/m1000_main_img.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 50vw 0 10vw;
    margin-top: 60px;
}
@media only screen and (min-width: 768px) {
    .m1000__main .page_main_img {
        padding: 41vw 0 4vw;
        max-width: 2500px;
        margin-top: 75px;
    }
}

.m1000 h2{
    text-align: center;
    color: #330706;
    font-weight: bold;
}
.m1000 h2{
    line-height: 2;
    font-size: 115%;
    letter-spacing: 2px;
    margin-bottom: 0;
    padding-bottom: 40px;
    font-family: "Segoe UI Light", "Segoe UI", sans-serif;
}
h2 span.ja {
    display: block;
    font-size: 14px;
    color: #886c3d;
    font-family: '游明朝', serif;
}
.m1000 p {
    font-size: 1rem;
    color: #4d4d4d;
}

.m1000 .m1000__camp {
    background-image: url(../img/m1000_main_bg.gif);
}

.m1000__camp {
    background-color: #deefec;
    padding: 120px 0;
    text-align: center;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.campaign-title {
    margin-bottom: 30px;
    line-height: 1.6;
}

.title-word {
    display: inline-block;
    font-weight: 100;
    letter-spacing: 0.1em;
    padding-bottom: 20px;
    border-bottom: 2px dotted gray;
    font-family: "Segoe UI Light", "Segoe UI", sans-serif;
}

.title-word span {
    display: inline-block;
    font-size: 2rem;
}

.title-word span::first-letter {
    color: #e74c3c;
}

.with-underline {
    border-bottom: 2px dashed #7f8c8d;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.campaign-period {
    font-size: 1rem;
    color: #7f8c8d;
    margin-top: 20px;
    letter-spacing: 0.05em;
}

.campaign-price {
    margin-top: 60px;
}

.price-number {
    font-size: 2.5rem;
    font-weight: lighter;
}

.dollar-mark {
    font-size: 1.7rem;
}

.price {
	font-size: 2em;
	font-weight: bold;
}

/* ▼BENEFITS 特典---------------- */
.m1000__benefits{
    max-width: 1000px;
    margin: 0 auto;
    padding: 120px 0;
    text-align: center;
}

.m1000__benefits p{
    font-size: 0.75rem;
    line-height: 1.6rem;
}

.benefits-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
    margin-bottom: 40px;
}

.benefit-card {
	width: 18%;
}

.benefit-card img{
    width: 100%;
    background-color: #e5e5e5;
}

.benefit-card-title{
    padding: 15px 0;
}

.benefits-list p {
    padding: 20px 0;
    border-top: 1px solid #4d4d4d;
    border-bottom: 1px solid #4d4d4d;
    font-family: '游明朝', serif;
}

/* ▼COSTUME 衣装---------------- */
.m1000__costume{
    padding: 120px 0;
    text-align: center;
    background-color: #f1f1e9;
}

.costume-images {
    max-width: 1000px;
    margin: 0 auto;
	display: flex;
	gap: 20px;
	justify-content: center;
}

.costume-images img{
    width: 24%;
}

/* ▼FAQ よくある質問---------------- */
.m1000__faq {
  max-width: 1000px;
  padding: 120px 0;
  margin: 0 auto;
  font-family: '游明朝', serif;
}

.faq-accordion-content{
    display: none;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    max-height: 0;
}

.faq-accordion-header{
    background-color: #f1f1e9;
    padding: 18px 45px 18px 20px;
    margin: 10px 0 0;
    transition: background .3s ease;
    cursor: pointer;
    position: relative;
}

.faq-accordion-header::before,
.faq-accordion-header::after{
    position: absolute;
    content: '';
    top: 1px;
    right: 20px;
    bottom: 0;
    width: 12px;
    height: 2px;
    margin: auto;
    background-color: #151E2F;
}

.faq-accordion-header::after{
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.faq-accordion-header.active + .faq-accordion-content {
    /* display: block;
    max-height: 500px; */
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

.faq-accordion-header.active::after{
    transform: rotate(0deg);
}

.faq-accordion-content{
    background-color: #fff;
    padding: 12px 20px 10px;
}

.faq-accordion-header span,
.faq-accordion-content span{
    display: block;
    padding-left: 25px;
    position: relative;
}

.faq-accordion-header span::before{
    position: absolute;
    content: "Q.";
    top: -2;
    left: 0;
    font-size: 15px;
}

.faq-accordion-content span::before{
    position: absolute;
  content:"A.";
  top: 0;
  left: 0;
  font-size: 15px;
}

.faq-accordion-header:hover {
  background-color: #F2F2F2;
}

/* ▼BTN ボタン---------------- */
.m1000__btn {
  padding: 120px 0;
  margin: 0 auto;
  text-align: center;
  background-color: #deefec;
  font-family: '游明朝';
}
.m1000__btn p{
   margin-bottom: 60px;
}

.m1000__btn .view_more {
    max-width: 300px;
    background-color: #a9d1ca;
    color: #FFF;
    font-weight: bold;
    border-color: #a9d1ca;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 0 3px #458e82;
    background: -webkit-repeating-linear-gradient(-45deg, #c3e3dd, #c3e3dd 3px, #a9d1ca 3px, #a9d1ca 7px);
    background: repeating-linear-gradient(-45deg, #c3e3dd, #c3e3dd 3px, #a9d1ca 3px, #a9d1ca 7px);
}
.m1000__btn .btn_l.btn a::after {
    border-left-color: #458e82;
}

/* PC---------------------------------*/
@media only screen and (min-width: 768px) {
    .m1000 h2{
         font-size: 130%;
        letter-spacing: 3px;
    }
    .m1000_main .page_main_img {
        padding: 54vw 0 4vw;
        max-width: 2500px;
    }
}

/* SP---------------------------------*/
@media screen and (max-width: 768px) {
    .m1000__camp {
        padding: 80px 15px;
    }

    .title-word {
        /* font-size: 2rem; */
    }

    .price-number {
        font-size: 2rem;
    }
    /* ▼BENEFITS 特典 */
    .m1000__benefits{
        padding: 60px 15px;
    }

    .benefit-card {
	width: 47%;
    padding-bottom: 30px;
    }

	.benefits-list {
		align-items: center;
        justify-content: space-around;
            gap: 10px;
	}

    .benefits-list p{
       width: 84%;
        height: 95px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* ▼COSTUME 衣装 */
    .m1000__costume{
        padding: 60px 15px;
    }
    	.costume-images {
		flex-wrap: wrap;
		align-items: center;
        gap: 10px;
	}
    .costume-images img{
        width: 47%;
    }
    .m1000__faq{
        padding: 60px 15px;
    }

    .m1000__btn {
    padding: 60px 0;
    }
}
/* =============================================
マタニティフォト特設ページ
============================================= */
.mplan__main .page_main_img {
    background-image: url(../img/mplan_main_img01.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 50vw 0 10vw;
    margin-top: 60px;
}
@media only screen and (min-width: 768px) {
    .mplan__main .page_main_img {
        padding: 30vw 0 4vw;
        max-width: 2500px;
        margin-top: 75px;
    }
}
.mplan h1{
    font-family: 'Cormorant Garamond', serif;
}

.mplan h2{
    text-align: center;
    color: #330706;
    line-height: 2;
    font-size: 170%;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 0;
    padding-bottom: 40px;
    font-family: 'Cormorant Garamond', serif;;
}
h2 span.ja {
    display: block;
    font-size: 14px;
    color: #886c3d;
    font-family: '游明朝', serif;
}
.mplan p {
    font-family: '游明朝', serif;
    font-size: 1rem;
    color: #4d4d4d;
}

.mplan .mplan__camp {
    background-image: url(../img/mplan_main_bg.gif);
}

.mplan__camp {
    background-color: #f7ece8;
    padding: 120px 0;
    text-align: center;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.campaign-title {
    margin-bottom: 30px;
    line-height: 1.6;
}

.title-word {
    display: inline-block;
    font-weight: 100;
    letter-spacing: 0.1em;
    padding-bottom: 20px;
    border-bottom: 2px dotted gray;
    font-family: "Segoe UI Light", "Segoe UI", sans-serif;
}

.title-word span {
    display: inline-block;
    font-size: 2rem;
}

.title-word span::first-letter {
    color: #e74c3c;
}

.with-underline {
    border-bottom: 2px dashed #7f8c8d;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.campaign-period {
    font-size: 1rem;
    color: #7f8c8d;
    margin-top: 20px;
    letter-spacing: 0.05em;
}

.campaign-price {
    margin-top: 60px;
}

.price-number {
    font-size: 2.5rem;
    font-weight: lighter;
}

.dollar-mark {
    font-size: 1.7rem;
}

.price {
	font-size: 2em;
	font-weight: bold;
}

/* ▼ABOUT プランについて---------------- */
.mplan__about{
    padding: 120px 0;
    text-align: center;
}

.mplan__about-text{
    margin-bottom: 20px;
    font-size: 0.75rem;
    line-height: 1.6rem;
}
.mplan__about h2 span.en{
    position: relative;
}
.mplan__about h2 span.en::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 53px;
    background-image: url('../img/image_pic01.png');
    background-size: cover;
    background-position: center;
    left:-50px;
    position: absolute;
}

/* ▼BENEFITS 特典---------------- */
.mplan__benefits{
    /* max-width: 1000px; */
    /* margin: 0 auto; */
    padding: 120px 0;
    text-align: center;
    background-color: #f1ece9;
}

.mplan__benefits h2 span.en{
    position: relative;
}
.mplan__benefits h2 span.en::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 53px;
    background-image: url('../img/image_pic02.png');
    background-size: cover;
    background-position: center;
    left:-50px;
    position: absolute;
}

.mplan__benefits .benefits-list{
    max-width: 1000px;
    margin: 0 auto;
}

.mplan__benefits p{
    font-size: 0.75rem;
    line-height: 1.6rem;
}

.benefits-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
    margin-bottom: 40px;
}

.benefit-card {
	width: 18%;
}

.benefit-card img{
    width: 100%;
    background-color: #e5e5e5;
}

.benefit-card-title{
    padding: 15px 0;
}

.benefits-list p {
    padding: 20px 0;
    border-top: 1px solid #4d4d4d;
    border-bottom: 1px solid #4d4d4d;
    font-family: '游明朝', serif;
    margin-top: 28px;
}

/* ▼ALBUM アルバム---------------- */
.mplan__album{
    padding: 120px 0;
    text-align: center;
}

.mplan__album h2 span.en{
    position: relative;
}
.mplan__album h2 span.en::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 53px;
    background-image: url('../img/image_pic03.png');
    background-size: cover;
    background-position: center;
    left:-50px;
    position: absolute;
}

.mplan__album-text{
    margin: 60px 0 40px;
    font-size: 0.75rem;
    line-height: 1.6rem;
}

.mplan__album-text span{
    display: inline-block;
    margin-top: 20px;
}

/* ▼OTHER その他のご案内---------------- */
.mplan__other{
    padding: 120px 0;
    text-align: center;
    background-color: #f1ece9;
}

.mplan__other h2 span.en{
    position: relative;
}
.mplan__other h2 span.en::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 53px;
    background-image: url('../img/image_pic04.png');
    background-size: cover;
    background-position: center;
    left:-50px;
    position: absolute;
}

.mplan__other p{
    /* margin: 60px 0 20px; */
    /* font-size: 0.75rem; */
    line-height: 2.6rem;
}

.other_shokai span.underline{
    /* display: inline-block; */
    border-bottom: 1px solid #938906;
}

/* ▼COSTUME 衣装---------------- */
.mplan__costume{
    padding: 120px 0 0;
    text-align: center;
}

.mplan__costume h2 span.en{
    position: relative;
}
.mplan__costume h2 span.en::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 53px;
    background-image: url('../img/image_pic05.png');
    background-size: cover;
    background-position: center;
    left:-50px;
    position: absolute;
}

.costume-images {
    max-width: 1000px;
    margin: 0 auto;
	display: flex;
	gap: 20px;
	justify-content: center;
}

.costume-images img{
    width: 24%;
}

/* ▼FAQ よくある質問---------------- */
.mplan__faq {
  max-width: 1000px;
  padding: 120px 0;
  margin: 0 auto;
  font-family: '游明朝', serif;
}

.faq-accordion-content{
    display: none;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    max-height: 0;
}

.faq-accordion-header{
    background-color: #f1ece9;
    padding: 18px 45px 18px 20px;
    margin: 10px 0 0;
    transition: background .3s ease;
    cursor: pointer;
    position: relative;
}

.faq-accordion-header::before,
.faq-accordion-header::after{
    position: absolute;
    content: '';
    top: 1px;
    right: 20px;
    bottom: 0;
    width: 12px;
    height: 2px;
    margin: auto;
    background-color: #151E2F;
}

.faq-accordion-header::after{
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.faq-accordion-header.active + .faq-accordion-content {
    /* display: block;
    max-height: 500px; */
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

.faq-accordion-header.active::after{
    transform: rotate(0deg);
}

.faq-accordion-content{
    background-color: #fff;
    padding: 12px 20px 10px;
}

.faq-accordion-header span,
.faq-accordion-content span{
    display: block;
    padding-left: 25px;
    position: relative;
}

.faq-accordion-header span::before{
    position: absolute;
    content: "Q.";
    top: -2;
    left: 0;
    font-size: 15px;
}

.faq-accordion-content span::before{
    position: absolute;
  content:"A.";
  top: 0;
  left: 0;
  font-size: 15px;
}

.faq-accordion-header:hover {
  background-color: #F2F2F2;
}

/* ▼BTN ボタン---------------- */
.mplan__btn {
  padding: 120px 0;
  margin: 0 auto;
  text-align: center;
  background-color: #f7ece8;
  font-family: '游明朝';
}
.mplan__btn p{
   margin-bottom: 60px;
}

.mplan__btn .view_more {
    max-width: 300px;
    background-color: #c96969;
    color: #FFF;
    font-weight: bold;
    border-color: #f9aeae;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 0 3px #854a4a;
    background: -webkit-repeating-linear-gradient(-45deg, #f2b0b0, #f2b0b0 3px, #efa2a2 3px, #efa2a2 7px);
    background: repeating-linear-gradient(-45deg, #f2b0b0, #f2b0b0 3px, #efa2a2 3px, #efa2a2 7px);
}
.mplan__btn .btn_l.btn a::after {
    border-left-color: #bf5858;
}

/* PC---------------------------------*/
@media only screen and (min-width: 768px) {
    .mplan h2{
        font-size: 130%;
        letter-spacing: 3px;
    }
    .mplan_main .page_main_img {
        padding: 54vw 0 4vw;
        max-width: 2500px;
    }
}

/* SP---------------------------------*/
@media screen and (max-width: 768px) {
    .mplan__camp {
        padding: 80px 15px;
    }

    .title-word {
        /* font-size: 2rem; */
    }

    .price-number {
        font-size: 2rem;
    }

    /* ▼COSTUME 衣装 */
    .mplan__about{
        padding: 60px 15px;
    }

    /* ▼BENEFITS 特典 */
    .mplan__benefits{
        padding: 60px 15px;
    }

    .benefit-card {
	width: 47%;
    padding-bottom: 30px;
    }

	.benefits-list {
		align-items: center;
        justify-content: space-around;
            gap: 10px;
	}

    .benefits-list p{
       width: 84%;
        height: 95px;
        /* margin: 0 auto; */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* ▼ALBUM アルバム */
    .mplan__album{
        padding: 60px 15px;
    }

    .mplan__album-text{
    margin: 0px 0 40px;
    }

    .album_shokai{
        margin-top: 30px;
        line-height: 2.2rem;
    }
    /* ▼OTHER その他のご案内 */
    .mplan__other{
        padding: 60px 15px;
    }
    .other_shokai span{
        display: inline-block;
    }
    .mplan__other p {
    max-width: 300px;
    margin: 0 auto;
    }
    .other_shokai span.newline{
        margin-bottom: 20px;
    }
    /* ▼COSTUME 衣装 */
    .mplan__costume{
        padding: 60px 15px;
    }
    	.costume-images {
		flex-wrap: wrap;
		align-items: center;
        gap: 10px;
	}
    .costume-images img{
        width: 47%;
    }
    .mplan__faq{
        padding: 0 15px 60px;
    }

    .mplan__btn {
    padding: 60px 0;
    }
}