@charset "utf-8";

/* common */
a {
    text-decoration: none;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
h1 {
    color: #333;
    font-size: 30px;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-weight: 600;
}
h2 {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 20px;
    line-height: 28px;
}
p {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 36px;
    color: #333;
}
main {
    background-color: #F2F4F2;
}
.container {
    padding-left: 9.3%;
    padding-right: 9.3%;
}
img {
    width: 100%;
    height: auto;
}
.questions-img {
    margin: 0 auto;
    padding-top: 17.8px;
}
.questions p {
    font-size: 34px;
    font-family: 'Cormorant Garamond', serif;
    font-family: 'Homemade Apple', cursive;
    font-family: 'Shippori Mincho', serif;
    text-align: center;
    margin-top: 5px;
}
.questions p span {
    font-size: 18px;
}
button {
    display: block;
    width: 100%;
    border: none;
    margin-bottom: 7px;
    padding: 18px 20px;
    border-radius: 10px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    background-color: #fff;
}
select {
    display: block;
    appearance: none;
    width: 100%;
    border: none;
    margin-bottom: 7px;
    padding: 18px 20px;
    border-radius: 10px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    background-color: #fff;
    height: 60px;
}
.answers {
    margin-bottom: 21px;
}
.btn-box {
    text-align: center;
}
.btn_white {
    display: block;
    width: 100%;
    text-align: center;
    padding: 17px 0;
    border-radius: 33px;
    margin-bottom: 21px;
    font-size: 18px;
    color: #333;
    border: 1px solid #333;
    font-weight: bold;
    transition: opacity 0.3s;
}
.btn_white:hover {
    opacity: 0.7;
}
@media(min-width: 768px) {
    .container {
        padding-left: 12.5%;
        padding-right: 12.5%;
    }  
    .answers {
        width: 66%;
        margin: 0 auto;
    } 
    .btn-box {
        margin-top: 32.4px;
    } 
    .btn-box .btn_black {
        width: 350px;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .btn-box .btn_reserve {
        margin-bottom: 50px;
    }
    .tips {
        margin-bottom: 45px;
    }
    .btn-box .btn_white  {
        width: 350px;
        margin: 0 auto;
        margin-bottom: 20px;
    }
}

/* index.html */
.text-wrapper {
    padding-left: 9.3%;
    padding-right: 9.3%;
}
.description {
   margin-top: 10px;
   margin-bottom: 20px; 
}
.time {
    text-align: center;
}
.btn_black {
    display: block;
    background-color: #333333;
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    border-radius: 33px;
    margin-bottom: 21px;
    font-size: 18px;
    transition: opacity 0.3s;
}
.btn_black:hover {
    opacity: 0.7;
}
.btn_sky-blue {
    display: block;
    background-color: #fff;
    color: #70c9e2;
    border: 1px solid #70c9e2;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    border-radius: 33px;
    margin:0 auto;
    font-size: 18px;
    transition: opacity 0.3s;
}
.btn_sky-blue:hover {
    opacity: 0.7;
}
.btn_reserve {
    display: inline-block;
    margin: 0 auto;
    margin: 0 auto;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #333;
    margin-bottom: 7px;
    font-size: 18px;
    font-weight: bold;
}
.tips {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}
.tips img {
    width: 18.01px;
    height: 10px;
    margin-right: 5px;
}
.tips p {
    font-size: 8px;
}
@media (min-width: 768px) {
    .mv {
        display: flex;
        flex-direction: row-reverse;
    }
    .index .img-wrapper {
        width: 46.666%;
    } 
    .index .text-wrapper {
        width: calc(100% - 46.666%);
        padding-top: 7%;
        padding-left: 12.5%;
        padding-right: 3%;
    }     
    .index .btn-box {
        text-align: center;
        width: 350px;
    }
    .index .btn_black {
        margin: 0 0 0;
        margin-bottom: 20px;
    }
    .index .tips {
        padding-bottom: 30px;
    }
}

/* q1.html */
.q1 {
    background-color: #F0E9DB;
}
.q1 .questions-img {
    width: 73px;
    height: auto;
}
/* q2-1.html */
.q2 {
    background-color: #C0D6E5;
}
.q2 .questions-img {
    width: 131px;
    height: auto;
}

/* q2-2.html */
.skip h2 {
    margin-top: 44px;
}
.q2-2 button {
    position: relative;
}
.circle-number {
    position: absolute;
    top: 20%;
    right: 2.28%;
    display: inline-block;
    background-color: #333;
    color: #fff;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    font-size: 14px;
    text-align: center;
}
/* q3.html */
.q3 {
    background-color: #F0D9D9;
}
.q3 .questions-img {
    width: 95px;
    height: auto;
}
.tag {
    font-size: 12px;
    line-height: 24px;
}
.prefecture {
    padding-top: 12px;
    padding-bottom: 12px;
    display: inline-block;
}
.prefecture p {
    font-size: 16px;
    color: #777;
}
input {
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 10px;
}
.selectbox {
    position: relative;
}
.selectbox::before,
.selectbox::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

.selectbox::before {
    right: 0;
    width: 2.8em;
    height: 2.8em;
    border-radius: 20px;
    background-color: #fff;
    display: none;
}

.selectbox::after {
    position: absolute;
    top: 50%;
    right: 1.4em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 9px;
    height: 9px;
    border-bottom: 2px solid #333;
    border-right: 2px solid #333;
}
.selectbox select:focus {
    outline: 2px solid #fff;
}

/* q4.html */
.q4 {
    background-color: #D5DED6;
}
.q4 .questions-img {
    width: 143.79px;
    height: auto;
}
.q4 .supplement {
    font-size: 12px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    line-height: 1rem;
    text-align: left;
    margin-bottom: 15px;
}
/* submit.html */
.submit-mv {
    display: flex;
    flex-direction: row-reverse;
    background-color: #E3E3E1;
    padding-bottom: 55px;
}
.submit .img-wrapper {
    width: 46.6666%;
}
.submit .text-wrapper {
    width: calc(100% - 46.6666%);
    padding-top: 16%;
    padding-left: 12.5%;
}
.submit h2 {
    font-size: 30px;
    font-family: 'Cormorant Garamond', serif;
    font-family: 'Homemade Apple', cursive;
    font-family: 'Shippori Mincho', serif;
    font-weight: 500;
    line-height: 50px;
}
.submit .btn-box {
    margin-top: 70px;
}
.submit .btn_black {
    width: 350px;
    margin: 0 0 0;
}
@media(max-width: 768px) {
    .submit-mv {
        display: block;
    }
    .submit .img-wrapper {
        width: 100%;
    }
    .submit .text-wrapper {
        width: 100%;
        padding-top: 0;
        padding-left: 9.3%;
        padding-right: 9.3%;
    }
    .submit .btn_black {
        width: 100%;
    }
}
body footer {
    padding: 2em 0 1em;
    text-align: center;
}
body footer img {
    height: auto;
    width: 24.4vw;
}
@media screen and (min-width: 769px) {
    body footer img {
        width: 240px;
    }
}
@media screen and (max-width: 480px) {
    body footer img {
        width: 37.33333vw;
        margin-bottom: 1.33333vw !important;
        margin-top: 5.33333vw !important;
    }
}
body footer p {
    font-size: 0.7em;
}
@media screen and (max-width: 480px) {
    body footer p {
        font-size: 1.86667vw;
    }
}
body img {
    height: auto;
}

body header#tophead {
    width: 100vw;
    top: 0;
    left: 0;
    background: #fff;
}
body header#tophead .shadow {
    border-bottom: 3px solid rgba(0, 0, 0, 0.16);
    margin-bottom: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}
@media screen and (max-width: 768px) {
    body header#tophead .shadow {
        justify-content: space-between;
    }
}
body header#tophead .c-zenplace-logo {
    z-index: 1;
    top: 7.40741vh;
    left: 80px;
    width: 200px;
    height: 25.89px;
    transition: 0.3s;
}
body header#tophead .c-zenplace-logo .c-zenplace-logo__svg {
    max-height: 37px;
}
body header#tophead .c-zenplace-logo .c-zenplace-logo__svg-group--1 {
    fill: #e5e5e6;
}
body header#tophead .c-zenplace-logo .c-zenplace-logo__svg-group--2 {
    fill: #7c7c7c;
}

/* ANSWERS PAGE */
.bg-pink {
    background-color: #F0D9D9;   
}
.bg-lightblue {
    background-color: #CEDBE3;   
}
.bg-lightbeige {
    background-color: #EBE6DE;   
}
.bg-lightgray {
    background-color: #DAE0DB;   
}
.bg-lightpurple {
    background-color: #E4DEE8;   
}
.text-bold {
    font-weight: bold;
}
.text-16 {
    font-size: 16px;
}
.padding-20 {
    padding: 20px 0;
}

.btn-gray {
    display: block;
    background-color: #6A6A6A;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    color: #fff;
    border-radius: 33px;
    margin-bottom: 21px;
    font-size: 18px;
    transition: opacity 0.3s;

}
.btn-gray:hover {
    opacity: 0.7;
}

.recommended {
    padding: 60px 9.3% 90px 9.3%;
}

.recommended .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0; 
}

.recommended .btn-box {
    margin:0 0 60px 0;
}

.recommended .btn_black {
    background-color: #6A6A6A;
    padding: 10px 0;
    margin: 0 auto;
    width: 250px;
}

.recommended h2,
.recommended h3 {
    font-family: 'Cormorant Garamond', serif;
    font-family: 'Homemade Apple', cursive;
    font-family: 'Shippori Mincho', serif;
    font-weight: bold;
    line-height: 50px;
}

.recommended h2 {
    font-size: 24px;
    text-align: center;
}

.recommended img {
    width: 225px;
    margin: 75px auto 50px auto;
}

.recommended .plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 50px auto 25px auto;
    max-width: 900px;
}

.recommended .plans .plan {
    background-color: #fff;
    padding: 50px 35px 40px 35px;
    text-align: center;
    max-width: 430px;
}

.recommended .plan h3 {
    position: relative;
    padding: 10px 0;
    margin-bottom: 35px;
    font-size: 1.9rem;
}

.recommended .plan h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: #000;
}

.recommended .plan span {
    font-size: 41px;
}

.recommended .plan > p:first-of-type {
    font-size: 16px;
}

.recommended .plan .plan-box-red, 
.recommended .plan .plan-box-black {
    /* margin: 20px 0; */
    padding: 20px 20px;
    border-radius: 10px;
}

.recommended .plan .plan-box-red {
    border: solid 2px #E93842;
    margin: 20px 0 5px 0;
}

.recommended .plan .plan-box-red p {
    color: #E93842;
}

.recommended .plan-box-red p:first-of-type {
    background-color: #E93842;
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
}

.recommended .plan-box-red p:nth-child(2) {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

.recommended .plan-box-red p:nth-child(3) {
    font-size: 14px;
}

.recommended .plan-box-red p:nth-child(4) {
    font-size: 14px;
    font-weight: bold;
}

.recommended .plan-box-red p:nth-child(5) {
    font-size: 18px;
    font-weight: bold;
}

.recommended .plan .plan-box-black {
    margin: 5px 0 20px 0;
    border: solid 2px #333333;
    min-height: 200px;
}

.recommended .plan-box-black p:first-of-type {
    font-size: 20px;
    font-weight: bold;
}

.recommended .plan-box-black p:nth-child(2) {
    font-size: 16px;
    margin-top: 10px;
}

.recommended .plan-box-black p:nth-child(3) {
    font-size: 14px;
    line-height: 25px;
    margin-top: 10px;
}

@media (max-width: 768px) {
 
    .recommended {
        padding: 60px 20px 90px 20px;
    }

    .recommended .text-container {
        padding: 0 20px;
    }

    .recommended .plans {
        grid-template-columns: 1fr;
    }    

    .recommended .plans .plan {
        max-width: 100%;
        padding: 50px 20px 40px 20px;
    }

    .recommended h2 {
        font-size: 22px;
    }

    .recommended p:first-of-type {
        font-size: 16px;
    }

    .sp-view {
        display: none;
    }
}