@charset "utf-8";
.tpl-caption--out {
    padding-right: 0;
}

.tpl-article__title .en {
	font-family: Montserrat, sans-serif;
}

.tpl-figure.bg-normal {
    background-color: #F8F7F6;
}

.tpl-figure.bg-medium {
    background-color: #e5e2dd;
}

.tpl-figure img.mix-multiply {
    mix-blend-mode: multiply;
}

.caps {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
    margin-top: 15px;
}

.caps .han {
	font-size: 1.2rem;
	display: flex;
	line-height: 1;
	width: 100%;
	justify-content: flex-end;
}

.caps .han hr {
	margin: 0 5px 0 8px;
	height: 0.8em;
	width: 2em;
	border: 1px solid #333;
	padding: 0;
	background: #333;
}
.note-txt{line-height: 1.6;}
.caps .han hr.yukadan {
	background: #ECE6DD;
}

.caps .han hr.syunou {
	background: #C9C2AE;
}

@media screen and (max-width: 768px) {
    .note-txt {
        font-size: min(2.64vw, 1.2rem)
    }
}

.family-plan .mv{position: relative;line-height: 0;}
.family-plan .mv .m-cap{position: absolute; top: 100%; left:0px; color: #3F2021;line-height: 1.3;padding: 8px;z-index: 1;}
.family-plan .mv-slider figure img {
    max-height: 523px;
    width: auto;
}

@media screen and (max-width: 768px) {
    .family-plan .mv-slider figure img{height: 450px;}
    .family-plan .mv .m-cap{top: 100%;color: #3F2021;}
}

.tpl-figure.has-compass {
    overflow: unset;
}

.tpl-figure.has-compass::after {
    content: "";
    position: absolute;
    display: block;
    width: 26px;
    height: 54px;
    background: url(../images/family-plan/ic-safari.svg) no-repeat center center/contain;
}

/* Navigation List */
.nav-list {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid #3F2021;
    max-width: 600px;
    margin: 0 auto;
}

.nav-list li {
    flex: 1;
}

.nav-list li a {
    display: block;
    color: #3F2121;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.4;
    height: 65px;
    align-content: center;
    transition: .3s;
}

.nav-list li:not(:last-of-type) a {
    border-right: 1px solid #3F2021;
}

.nav-list li a.active {
    background: #3F2021;
    color: #ffffff;
}

.nav-list li a:hover {
    background: #3F2021;
    color: #ffffff;
}

@media screen and (max-width: 768px) {
    .nav-list {
        flex-direction: column;
    }

    .nav-list li {
        width: 100%;
    }

    .nav-list li:not(:last-of-type) a {
        border-right: none;
        border-bottom: 1px solid #3F2021;
    }
}

/* Section Content */
.sec-cont .block01__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.sec-cont .block01 .colL {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 50%;
    gap: 30px;
}

.sec-cont .block01 .plan-name {
    width: 110px;
    height: 110px;
    font-size: 2.4rem;
    background: #3F2021;
    color: #ffffff;
    text-align: center;
    align-content: center;
}

.sec-cont .block01 .plan-name span {
    font-size: 0.458333em;
    display: block;
}

.sec-cont .block01 .plan-detail {

}

.sec-cont .block01 .plan-detail .plan-room {
    font-size: 2.2rem;
    margin: -2px 0 20px;
    font-family: Montserrat, sans-serif;
}

.sec-cont .block01 .plan-detail .plan-size__item {
    display: flex;
    align-items: center;
}

.sec-cont .block01 .plan-detail .plan-size__item:first-of-type {
    margin-bottom: 10px;
}

.sec-cont .block01 .plan-detail .plan-size__item p {
    font-size: 1rem;
}

.sec-cont .block01 .plan-detail .plan-size__item p span {
    font-size: 1.6rem;
}

.sec-cont .block01 .plan-detail .plan-size__item p:first-of-type {
    width: 8.8em;
    text-align: center;
    background: #F8F7F6;
    padding: 3px 0 4px;
    margin-right: 10px;
}

.sec-cont .block01 .plan-detail .plan-size__item p:last-of-type {
    font-size: 1.3em;
    font-family: Montserrat, sans-serif;
}


.sec-cont .block01 .colR .plan-info-txt {
    font-size: min(1.8vw, 1.8rem);
    line-height: 1.8;
    text-align: right;
}

.sec-cont .block01 .tpl-figure {
    width: 94.214%;
    overflow: unset;
}

.sec-cont .block01 .tpl-figure::after {
    content: "";
    position: absolute;
    display: block;
    width: 26px;
    height: 54px;
    background: url(../images/family-plan/ic-safari.svg) no-repeat center center/contain;
    bottom: 15%;
    right: -7%;
}

.sec-cont .block01 .tpl-figure .tpl-caption {
    bottom: 12.4618%;
    width: unset;
    left: 88%;
    text-wrap: nowrap;
}

.sec-cont .block02__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.sec-cont .block02__inner .colL {
    width: 36.573%;
}

.sec-cont .block02__inner .colL .tpl-figure {
    height: fit-content;
}

.sec-cont .block02__inner .colR {
    width: 52.948%;
}

.sec-cont .block02__inner .colR .cont-item__tit {
    font-size: 1.6rem;
    line-height: 2;
    display: flex;
    padding: 0 0 15px;
    margin: 0 0 40px;
    border-bottom: 1px solid #3F2021;
}

.sec-cont .block02__inner .colR .cont-item__tit .num {
    font-size: 1.5em;
    line-height: 1.5;
    font-weight: 500; 
    font-family: 'Montserrat', sans-serif;
    margin-right: 20px;
}

.sec-cont .block02__inner .colR .cont-item__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sec-cont .block02__inner .colR .cont-item__inner .colTxt {
    width: 56.08247%;
}

.sec-cont .block02__inner .colR .cont-item__inner .colImg {
    width: 38.5567%;
}

.sec-cont .block02__inner .colR .cont-item:first-of-type {
    margin-bottom: 80px;
}


@media screen and (min-width: 769px) {
    .sec-cont .block01__inner {
        flex-wrap: nowrap;
    }

    .sec-cont .block02__inner .colL .caps .note-txt {
        margin-left: -40px;
    }
}


@media screen and (max-width: 768px) {
    .sec-cont .block01 {
        padding-top: 0;
    }

    .sec-cont .block01__inner {
        row-gap: 60px;
    }

    .sec-cont .block01 .colL {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        row-gap: 60px;
    }

    .sec-cont .block01 .colR {
        order: -1;
    }

    .sec-cont .block01 .colR .plan-info-txt {
        text-align: left;
        font-size: 1.6rem;
    }

    .sec-cont .block01 .tpl-figure {
        width: 110vw;
        margin: 0 -7vw 80px -10vw;
    }

    .sec-cont .block01 .tpl-figure::after {
        bottom: -40px;
        right: 30px;
    }

    .sec-cont .block01 .tpl-figure .tpl-caption {
        left: unset;
        bottom: -21.462%;
        right: 40px;
    }

    .sec-cont .block02__inner {
        row-gap: 60px;
    }

    .sec-cont .block02__inner .colL {
        width: 100%;
        order: -1;
    }

    .sec-cont .block02__inner .colR {
        width: 100%;
    }

    .sec-cont .block02__inner .colR .cont-item__tit {
        font-size: min(4vw, 1.6rem);
    }

    .sec-cont .block02__inner .colR .cont-item:not(:last-of-type) {
        margin-bottom: 60px;
    }

    .sec-cont .block02__inner .colR .cont-item__inner {
        row-gap: 20px;
    }

    .sec-cont .block02__inner .colR .cont-item__inner .colTxt {
        width: 100%;
    }

    .sec-cont .block02__inner .colR .cont-item__inner .colImg {
        width: 75.5%;
        margin-left: auto;
    }

    #sec2-cont.sec-cont .block02__inner .colR .cont-item__inner .colImg {
        width: 100%;
    }

    .sec-cont .block02__inner .colL .caps {
        justify-content: flex-start;
    }

    .sec-cont .block02__inner .colL .caps .han {
        justify-content: flex-start;
    }
}

/* Section Content 2 */
.sec-cont-2 .block01 .row01 {
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
}

.sec-cont-2 .block01 .row01 .colL {
    flex: unset;
    width: 75.765%;
}

.sec-cont-2 .block01 .row01 .colL .tpl-figure .tpl-caption {
    bottom: 45px;
    left: unset;
    right: -30px;
}

.sec-cont-2 .block01 .row01 .colR {
    flex: unset;
    width: 16.322%;
    padding-bottom: 5%;
}

.sec-cont-2 .block01 .row01 .colR .tpl-figure.has-compass::after {
    left: 104%;
    bottom: 15px;
}

.sec-cont-2 .block02 .tpl-row {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.sec-cont-2 .block02 .tpl-row .colL {
    flex: unset;
    width: 38%;
}

.sec-cont-2 .block02 .tpl-row .colR .row-inner {
    gap: 13px;
}

.sec-cont-2 .cont-tit {
    font-size: 1.6rem;
    border: 1px solid #3F2021;
}

.sec-cont-2 .cont-tit span:last-of-type {
    padding-left: 20px;
}

.sec-cont-2 .cont-tit .num {
    font-size: 1.5em;
    display: inline-block;
    width: 56px;
    height: 56px;
    background: #3F2021;
    text-align: center;
    align-content: center;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

.sec-cont-2 .block02 .tpl-row .colL .tpl-article__copy.fs-16 {
    font-size: 1.6rem;
}

@media screen and (min-width: 769px) {
    .sec-cont-2.tpl-section {
        padding: 0 0 100px;
    }

    .sec-cont-2 .block01 .row01 {
        flex-wrap: nowrap;
    }

    .sec-cont-2 .cont-tit {
        font-size: min(1.6vw, 1.6rem);
    }
}

@media screen and (max-width: 768px) {
    .sec-cont-2 .block01 .row01 .colL {
        width: 100%;
    }

    .sec-cont-2 .block01 .row01 .colL .tpl-figure {
        width: 100vw;
        margin: 0 -7vw;
    }

    .sec-cont-2 .block01 .row01 .colR {
        width: 100% !important;
        max-width: 150px;
        margin: 60px auto 0;
    }

    .sec-cont-2 .block02 .row-inner {
        flex-direction: row;
    }

    .sec-cont-2 .block02 > .tpl-row {
        gap: 50px !important;
    }

    .sec-cont-2 .block02 > .tpl-row .colL {
        width: 100%;
    }

    .sec-cont-2 .block02 > .tpl-row .colR {
        width: 100% !important;
    }
}

/*Section 1*/
#sec1 {
    padding-top: 0;
}

#sec1-cont .block01 .tpl-figure.has-compass::after {
    background: url(../images/family-plan/ic-safari-81.svg) no-repeat center center/contain;
    width: 57px;
    height: 34px;
    bottom: 17%;
    right: -8.6%;
}

@media screen and (max-width: 768px) {
    #sec1-cont .block01 .tpl-figure.has-compass::after {
        bottom: -11%;
        right: 12.4%;
    }
}

/*Section 2*/
#sec2-cont {
    padding-top: 0;
}

#sec2-cont .block01 {
    padding-top: 0;
}

#sec2-cont .block01 .tpl-figure.has-compass::after {
    background: url(../images/family-plan/ic-safari-72.svg) no-repeat center center/contain;
    width: 57px;
    height: 34px;
    bottom: 17%;
    right: -8.6%;
}

#sec2-cont .block01 .tpl-figure.has-compass::after {
    background: url(../images/family-plan/ic-safari-72.svg) no-repeat center center/contain;
    width: 59px;
    height: 41px;
    bottom: 17%;
    right: -8.6%;
}

#sec2-cont.sec-cont .block01 .plan-detail .plan-size__item p:first-of-type {
    background: #E5E1DB;
}

@media screen and (max-width: 768px) {
    #sec2-cont {
        padding-top: 0;
    }

    #sec2-cont.sec-cont .block01 .tpl-figure::after {
        bottom: 20px;
        right: 47px;
    }

    #sec2-cont.sec-cont .block01 .tpl-figure .tpl-caption {
        bottom: 0;
    }
}

/*Section 3*/
#sec3 .sec3-intro {
    padding-top: 0px;
}

#sec3 .sec3-intro .tpl-headline__title-jp{
    font-size: 1.8rem;
    text-align: center;
    font-weight: 400;
    line-height: 2;
}

#sec3 .sec3-intro .tpl-headline__title-jp .fs-24 {
    font-size: 1.34em;
}

#sec3 .sec3-intro .tpl-headline__copy {
    font-weight: 400;
}

#sec3-1.sec-cont-2 .block02 .tpl-row {
    gap:  85px;
}

#sec3-1 .row01 .colL .tpl-figure.has-compass::after {
    background: url(../images/family-plan/ic-safari-54.svg) no-repeat center center/contain;
    width: 59px;
    height: 53px;
    bottom: 62px;
    right: -25px;
}

#sec3-1.sec-cont-2 .block02 .tpl-row .colR {
    flex: unset;
    width: 36.137%;
}


#sec3-2.sec-cont-2 .block02 .tpl-row {
    gap: 35px;
}

#sec3-2.sec-cont-2 .block02 .tpl-row .row-inner {
    gap: 13px;
}

#sec3-2.sec-cont-2 .block02 .tpl-row .colR {
    flex: unset;
    width: 41.158%;
}

#sec3-2 .row01 .colL .tpl-figure.has-compass::after {
    background: url(../images/family-plan/ic-safari-68.svg) no-repeat center center/contain;
    width: 60px;
    height: 44px;
    bottom: 62px;
    right: -25px;
}

#sec3-3.sec-cont-2 .block01 .row01 {
    justify-content: flex-start;
    gap: 0;
}

#sec3-3.sec-cont-2 .block01 .row01 .colR .tpl-figure.has-compass::after {
    left: 156%;
}

#sec3-3.sec-cont-2 .block01 .row01 .colR {
    width: 16.377%;
}

#sec3-3.sec-cont-2 .block02 .tpl-row {
    gap: 22.5px;
}

#sec3-3.sec-cont-2 .block02 .tpl-row > .colR {
    flex: unset;
    width: 37.555%;
    margin-right: 42px;
}

#sec3-3.sec-cont-2 .block02 .tpl-row .row-inner {
    gap: unset;
    justify-content: space-between;
}

#sec3-3.sec-cont-2 .block02 .tpl-row .row-inner .tpl-col {
    flex: unset;
}

#sec3-3.sec-cont-2 .block02 .tpl-row .row-inner .col01 {
    width: 54.365%;
}

#sec3-3.sec-cont-2 .block02 .tpl-row .row-inner .col02 {
    width: 44.19%;
}

#sec3-3 .row01 .colL .tpl-figure.has-compass::after {
    background: url(../images/family-plan/ic-safari-90.svg) no-repeat center center/contain;
    width: 54px;
    height: 26px;
    bottom: 70px;
    right: 40px;
}

#sec3-3.sec-cont-2 .block01 .row01 .colL .tpl-figure .tpl-caption {
    right: 30px;
}

#sec3-4.sec-cont-2 .block02 .tpl-row .colR {
    flex: unset;
    width: 26.53%;
}

#sec3-4.sec-cont-2 .block02 .tpl-row .colR .row-inner {
    flex-direction: column;
}

#sec3-4.sec-cont-2 .block02 > .tpl-row {
    gap: 165px;
}

#sec3-4 .row01 .colL .tpl-figure.has-compass::after {
    background: url(../images/family-plan/ic-safari-65.svg) no-repeat center center/contain;
    width: 60px;
    height: 46px;
    bottom: 20px;
    right: 65px;
}

#sec3-4.sec-cont-2 .block01 .row01 .colL .tpl-figure .tpl-caption {
    bottom: 0;
    right: 60px;
}

@media screen and (min-width: 769px) {
    #sec3-3.sec-cont-2 .block02 .tpl-row > .colR {
        margin-top: 80px;
    }

    #sec3-4.sec-cont-2 .block01 .row01 .colR {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 768px) {
    #sec3 .sec3-intro .tpl-headline__title-jp {
        text-align: left;
    }

    #sec3 .sec3-intro .tpl-headline__title-jp {
        font-size: 1.6rem;
    }

    #sec3 .sec3-intro .tpl-headline__title-jp .fs-24 {
        font-size: 1.125em;
    }

    #sec3-1.sec-cont-2 .block01 .row01 .colL .tpl-figure .tpl-caption {
        bottom: -50px;
        right: 48px;
    }

    #sec3-1 .row01 .colL .tpl-figure.has-compass::after {
        bottom: -30px;
        right: 50px;
    }

    #sec3-2.sec-cont-2 .block01 .row01 .colL .tpl-figure .tpl-caption {
        bottom: -55px;
        right: 20px;
        padding: 8px 0;
        line-height: 1.4;
    }

    #sec3-2 .row01 .colL .tpl-figure.has-compass::after {
        bottom: -25px;
        right: 20px;
    }

    #sec3-3.sec-cont-2 .block01 .row01 .colL .tpl-figure .tpl-caption {
        bottom: -20px;
        right: 20px;
        line-height: 1.4;
    }

    #sec3-3 .row01 .colL .tpl-figure.has-compass::after {
        bottom: 20px;
        right: 30px;
    }

    #sec3-3.sec-cont-2 .block01 .row01 .colR .tpl-figure.has-compass::after {
        left: 132%;
    }

    #sec3-4 .row01 .colL .tpl-figure.has-compass::after {
        bottom: -10px;
    }

    #sec3-4.sec-cont-2 .block01 .row01 .colL .tpl-figure .tpl-caption {
        bottom: -30px;
        right: 60px;
    }

    #sec3-4.sec-cont-2 .block02 .tpl-row .colR .row-inner {
        width: 64.8%;
        margin-left: auto;
    }
}

/* Section 4 */

#sec4 .tpl-row {
    max-width: 544px;
    margin: 0 auto;
    gap: 30px;
}

#sec4 {
    padding: 40px 0;
}

#sec4 .tpl-row .tpl-col .tpl-button {
    height: 48px;
    font-size: 1.4rem;
    color: #ffffff;
}

@media screen and (max-width: 768px) {
    #sec4 .tpl-row {
        padding: 0 30px;
        gap: 20px;
    }

    #sec4 .nav-list li:nth-of-type(2) {
        background: #ffffff;
    }
}