@charset "UTF8";

/*-------------------
スマホ縦
-------------------*/
@media screen and (max-width: 480px){

#business-detail-comment-area{
    width: 100%;
    height: 30vh;
    position: relative;
    z-index: -1;
}

#business-detail-comment-title{
    width: 50%;
    position: absolute;
    top: 5vh;
    left: 25%;
    background-color: #3d9cbf;
    z-index: -1;
}

#business-detail-comment-title h2{
    font-size: 5vw;
    line-height: 8vw;
    font-weight: 100;
    color: #fff;
    text-align: center;
}

#business-detail-comment{
    width: 80%;
    height: 17vh;
    padding: 5%;
    background-color: #fff;
    border: 2px solid #3ca5cb;
    position: absolute;
    top: 7vh;
    left: 10%;
    z-index: -2;
}

#business-detail-comment p{
    font-size: 3vw;
    line-height: 5vw;
}

#sub-image-area{
    width: 100%;
    min-height: 20vh;
    position: relative;
    background-image: url("../img/business_detail/sub_image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

#plan-list-area{
    width: 100%;
    height: 130vh;
    position: relative;
    z-index: -1;
}

#plan-list-title{
    width: 50%;
    position: absolute;
    top: -2vh;
    left: 10%;
    border-radius: 10px;
    background-color: #f4fafc;
    z-index: -1;
}

#plan-list-title h2{
    font-size: 5vw;
    line-height: 7vw;
    font-weight: 100;
    text-align: center;
}

#plan-list-backbox{
    width: 50%;
    height: 100vh;
    position: absolute;
    top: 12vh;
    right: 0;
    background-color: #3ca5cb;
    z-index: -2;
}

#plan-list-card-area{
    width: 90%;
    position: absolute;
    top: 5vh;
    left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

article{
    width:80%;
    height: 40vh;
    margin-bottom: 5%;
}

.hover-up{
    width: 100%;
}

.hover-up:hover{
    transform: translateY(-10%) !important;
}

.plan-card{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.plan-card-name{
    width: 90%;
    background-color: #3ca5cb;
    border-radius: 5px;
    margin-left: 5%;
}

.plan-card-name p{
    font-size: 5vw;
    line-height: 10vw;
    text-align: center;
    color: #fff;
}

.plan-card-photo{
    width: 100%;
    padding: 20% 0%;
    background-color: #f4f4f4;
    border: 2px solid #3ca5cb;
    border-radius: 15px;
    text-align: center;
    position: absolute;
    top: 2vh;
    z-index: -1;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-card-photo img{
    width: 90%;
    vertical-align: top;
}

#plan-list-sample-title{
    width: 40%;
    text-align: center;
    background-color: #004152;
    border-radius: 7px;
    padding: 1% 2%;
    position: absolute;
    top: 21vh;
    left: 30%;
}

#plan-list-sample-title p{
    font-size: 3vw;
    line-height: 5vw;
    color: #fff;
}

#plan-list-sample-title span{
    font-size: 2vw;
    line-height: 3vw;
    color: #fff;
}

#plan-list-sample-title hr{
    border: 1px solid #fff;
}

#introduction-to-each-plan-area{
    width: 100%;
    height: 180vh;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 7vh;
    z-index: -1;
}

#introduction-to-each-plan-title-area{
    width: 70%;
    height: 9vh;
    margin: 5% auto 25%;
    position: relative;
    z-index: -1;
}

#introduction-to-each-plan-title{
    width: 100%;
    padding: 2% 0;
    border: 3px solid #3ca5cb;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}

#introduction-to-each-plan-title h3{
    font-size: 5vw;
    line-height: 15vw;
    color: #3ca5cb;
    text-align: center;
    margin: 0;
}

#english-title{
    width: 60%;
    padding: 2% 0;
    background-color: #3ca5cb;
    position: absolute;
    top: 7vh;
    left: 20%;
}

#english-title p{
    font-size: 3vw;
    line-height: 5vw;
    color: #fff;
    text-align: center;
}

.plan-box{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.plan-top-box{
    width: 80%;
    margin-left: 20%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan-top-box2{
    width: 80%;
    margin-right: 20%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan-photo{
    width: 55%;
    text-align: left;
}

.plan-photo img{
    width: 100%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-photo2{
    width: 55%;
    margin-left: 50%;
}

.plan-photo2 img{
    width: 100%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-logo{
    width: 45%;
    text-align: center;
    position: absolute;
    top: -3vh;
    right: 0;
}

.plan-logo img{
    width: 60%;
    vertical-align: top;
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 1));
}

.plan-logo2{
    width: 45%;
    text-align: right;
    position: absolute;
    top: -3vh;
    left: 0;
}

.plan-logo2 img{
    width: 60%;
    vertical-align: top;
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 1));
}

.plan-logo3{
    width: 45%;
    text-align: center;
    position: absolute;
    top: -2vh;
    right: 0;
}

.plan-logo3 img{
    width: 85%;
    vertical-align: top;
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 1));
}

.plan-bottom-box{
    width: 90%;
    margin-left: 10%;
    position: relative;
    top: -10vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: -2;
}

.plan-bottom-box2{
    width: 90%;
    margin-right: 10%;
    position: relative;
    top: -10vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: -2;
}

.plan-vertical-english{
    width: 5%;
    writing-mode: vertical-rl
}

.plan-vertical-english p{
    font-size: 10vw;
    line-height: 13vw;
    letter-spacing: 10%;
    color: transparent;
    text-align: left;
    text-indent: 10.5vw;
    -webkit-text-stroke: 2px #3ca5cb;
    font-family: "Londrina Outline", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.plan-vertical-english2{
    width: 5%;
    writing-mode: vertical-rl;
    position: absolute;
    border: 0;
    right: -10%;
}

.plan-vertical-english2 p{
    font-size: 10vw;
    line-height: 13vw;
    letter-spacing: 10%;
    color: transparent;
    text-align: left;
    text-indent: 10.5vw;
    -webkit-text-stroke: 2px #3ca5cb;
    font-family: "Londrina Outline", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.plan-text-box{
    width: 95%;
    height: 35vh;
    background-color: #3ca5cb;
    display: flex;
    padding: 2%;
}

.plan-text-box-inner{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 15vh;
    left: 10%;
}

.plan-text-box-inner h3{
    width: 100%;
    font-size: 5vw;
    line-height: 5vw;
    margin: 0 0 5% 0;
    color: #fff;
}

.plan-text-box-inner p{
    width: 100%;
    font-size: 3vw;
    line-height: 5vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner2{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 15vh;
    right: 10%;
}

.plan-text-box-inner2 h3{
    width: 100%;
    font-size: 5vw;
    line-height: 5vw;
    margin: 0 0 5% 0;
    color: #fff;
}

.plan-text-box-inner2 p{
    width: 100%;
    font-size: 3vw;
    line-height: 5vw;
    margin: 0;
    color: #fff;
}

}
/*-------------------
スマホ横
-------------------*/
@media screen and (min-width: 481px) and (max-width: 896px) {

#business-detail-comment-area{
    width: 100%;
    height: 50vh;
    position: relative;
    z-index: -1;
}

#business-detail-comment-title{
    width: 30%;
    position: absolute;
    top: 6vh;
    left: 35%;
    background-color: #3d9cbf;
    z-index: -1;
}

#business-detail-comment-title h2{
    font-size: 2vw;
    line-height: 4vw;
    font-weight: 100;
    color: #fff;
    text-align: center;
}

#business-detail-comment{
    width: 70%;
    height: 30vh;
    padding: 3%;
    background-color: #fff;
    border: 2px solid #3ca5cb;
    position: absolute;
    top: 10vh;
    left: 15%;
    z-index: -2;
}

#business-detail-comment p{
        font-size: 1.8vw;
        line-height: 3vw;
}

#sub-image-area{
    width: 100%;
    min-height: 50vh;
    position: relative;
    background-image: url("../img/business_detail/sub_image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

#plan-list-area{
    width: 100%;
    height: 90vh;
    position: relative;
    z-index: -1;
}

#plan-list-title{
    width: 30%;
    position: absolute;
    top: -7vh;
    left: 10%;
    border-radius: 10px;
    background-color: #f4fafc;
    z-index: -1;
}

#plan-list-title h2{
    font-size: 2vw;
    line-height: 4vw;
    font-weight: 100;
    text-align: center;
}

#plan-list-backbox{
    width: 100%;
    height: 35vh;
    position: absolute;
    top: 40vh;
    left: 0;
    background-color: #3ca5cb;
    z-index: -2;
}

#plan-list-card-area{
    width: 70%;
    position: absolute;
    top: 10vh;
    left: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

article{
    width:30%;
}

.hover-up{
    width: 100%;
}

.hover-up:hover{
    transform: translateY(-10%) !important;
}

.plan-card{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.plan-card-name{
    width: 90%;
    background-color: #3ca5cb;
    border-radius: 20px;
    margin-left: 5%;
}

.plan-card-name p{
    font-size: 1.5vw;
    line-height: 3vw;
    text-align: center;
    color: #fff;
}

.plan-card-photo{
    width: 100%;
    padding: 20% 0%;
    background-color: #f4f4f4;
    border: 5px solid #3ca5cb;
    border-radius: 30px;
    text-align: center;
    position: absolute;
    top: 3vh;
    z-index: -1;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-card-photo img{
    width: 90%;
    vertical-align: top;
}

#plan-list-sample-title{
    width: 40%;
    text-align: center;
    background-color: #004152;
    border-radius: 20px;
    padding: 1% 2%;
    position: absolute;
    top: 65vh;
    left: 30%;
}

#plan-list-sample-title p{
    font-size: 2vw;
    line-height: 3vw;
    color: #fff;
}

#plan-list-sample-title span{
    font-size: 1vw;
    line-height: 2vw;
    color: #fff;
}

#plan-list-sample-title hr{
    border: 1px solid #fff;
}

#introduction-to-each-plan-area{
    width: 100%;
    height: 375vh;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 7vh 0 30vh;
    z-index: -1;
}

#introduction-to-each-plan-title-area{
    width: 40%;
    height: 17vh;
    margin: 5% auto 25%;
    position: relative;
    z-index: -1;
}

#introduction-to-each-plan-title{
    width: 100%;
    padding: 2% 0;
    border: 3px solid #3ca5cb;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}

#introduction-to-each-plan-title h3{
    font-size: 3vw;
    line-height: 7vw;
    color: #3ca5cb;
    text-align: center;
    margin: 0;
}

#english-title{
    width: 70%;
    padding: 2% 0;
    background-color: #3ca5cb;
    position: absolute;
    top: 61px;
    left: 15%;
}

#english-title p{
    font-size: 1.5vw;
    line-height: 1.5vw;
    color: #fff;
    text-align: center;
}

.plan-box{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.plan-top-box, .plan-top-box2{
    width: 70%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan-photo{
    width: 50%;
    text-align: left;
}

.plan-photo img{
    width: 90%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-photo2{
    width: 50%;
    margin-left: 50%;
}

.plan-photo2 img{
    width: 90%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-logo,.plan-logo3{
    width: 50%;
    text-align: center;
    position: absolute;
    top: -5vh;
    right: 0;
}

.plan-logo img,.plan-logo3 img{
    width: 60%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}

.plan-logo2{
    width: 60%;
    text-align: center;
    position: absolute;
    top: -7vh;
    left: 0;
}

.plan-logo2 img{
    width: 50%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}

.plan-bottom-box{
    width: 60%;
    margin-left: 40%;
    position: relative;
    top: -25vh;
    display: flex;
    justify-content: space-between;
    z-index: -2;
}

.plan-bottom-box2{
    width: 60%;
    margin-right: 40%;
    position: relative;
    top: -25vh;
    display: flex;
    justify-content: space-between;
    z-index: -2;
}

.plan-vertical-english, .plan-vertical-english2{
    width: 5%;
    writing-mode: vertical-rl
}

.plan-vertical-english p, .plan-vertical-english2 p{
    font-size: 2.4vw;
    line-height: 2.5vw;
    letter-spacing: 10%;
    color: transparent;
    text-align: left;
    text-indent: 15vw;
    -webkit-text-stroke: 2px #3ca5cb;
    font-family: "Londrina Outline", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.plan-text-box{
    width: 95%;
    height: 70vh;
    background-color: #3ca5cb;
    display: flex;
    padding: 2%;
}

.plan-text-box-inner{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 30vh;
    left: 10%;
}

.plan-text-box-inner h3{
    width: 100%;
    font-size: 2vw;
    line-height: 3vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner p{
    width: 100%;
    font-size: 1.5vw;
    line-height: 2vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner2{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 30vh;
    right: 10%;
}

.plan-text-box-inner2 h3{
    width: 100%;
    font-size: 2vw;
    line-height: 3vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner2 p{
    width: 100%;
    font-size: 1.5vw;
    line-height: 2vw;
    margin: 0;
    color: #fff;
}

}
/*-----------------------
 タブレットスタイル(縦)
-------------------------*/
@media screen and (min-width: 897px) and (max-width: 1024px) {

#business-detail-comment-area{
    width: 100%;
    height: 23vh;
    position: relative;
    z-index: -1;
}

#business-detail-comment-title{
    width: 30%;
    position: absolute;
    top: 3vh;
    left: 35%;
    background-color: #3d9cbf;
    z-index: -1;
}

#business-detail-comment-title h2{
    font-size: 2vw;
    line-height: 4vw;
    font-weight: 100;
    color: #fff;
    text-align: center;
}

#business-detail-comment{
    width: 50%;
    height: 14vh;
    padding: 3%;
    background-color: #fff;
    border: 2px solid #3ca5cb;
    position: absolute;
    top: 4.5vh;
    left: 25%;
    z-index: -2;
}

#business-detail-comment p{
    font-size: 1.5vw;
    line-height: 3vw;
}

#sub-image-area{
    width: 100%;
    min-height: 23vh;
    position: relative;
    background-image: url("../img/business_detail/sub_image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

#plan-list-area{
    width: 100%;
    height: 34vh;
    position: relative;
    z-index: -1;
}

#plan-list-title{
    width: 30%;
    position: absolute;
    top: -2vh;
    left: 10%;
    border-radius: 10px;
    background-color: #f4fafc;
    z-index: -1;
}

#plan-list-title h2{
    font-size: 2vw;
    line-height: 4vw;
    font-weight: 100;
    text-align: center;
}

#plan-list-backbox{
    width: 100%;
    height: 15vh;
    position: absolute;
    top: 15vh;
    left: 0;
    background-color: #3ca5cb;
    z-index: -2;
}

#plan-list-card-area{
    width: 70%;
    position: absolute;
    top: 5vh;
    left: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

article{
    width:30%;
}

.hover-up{
    width: 100%;
}

.hover-up:hover{
    transform: translateY(-10%) !important;
}

.plan-card{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.plan-card-name{
    width: 90%;
    background-color: #3ca5cb;
    border-radius: 20px;
    margin-left: 5%;
}

.plan-card-name p{
    font-size: 1.5vw;
    line-height: 3vw;
    text-align: center;
    color: #fff;
}

.plan-card-photo{
    width: 100%;
    padding: 20% 0%;
    background-color: #f4f4f4;
    border: 5px solid #3ca5cb;
    border-radius: 30px;
    text-align: center;
    position: absolute;
    top: 1vh;
    z-index: -1;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-card-photo img{
    width: 90%;
    vertical-align: top;
}

#plan-list-sample-title{
    width: 40%;
    text-align: center;
    background-color: #004152;
    border-radius: 20px;
    padding: 1% 2%;
    position: absolute;
    top: 26.5vh;
    left: 30%;
}

#plan-list-sample-title p{
    font-size: 2vw;
    line-height: 3vw;
    color: #fff;
}

#plan-list-sample-title span{
    font-size: 1vw;
    line-height: 2vw;
    color: #fff;
}

#plan-list-sample-title hr{
    border: 1px solid #fff;
}

#introduction-to-each-plan-area{
    width: 100%;
    height: 155vh;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 7vh 0 0;
    z-index: -1;
}

#introduction-to-each-plan-title-area{
    width: 30%;
    /* height: 0vh; */
    margin: 0 auto 20vh;
    position: relative;
    z-index: -1;
}

#introduction-to-each-plan-title{
    width: 100%;
    padding: 2% 0;
    border: 3px solid #3ca5cb;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}

#introduction-to-each-plan-title h3{
    font-size: 3vw;
    line-height: 5vw;
    color: #3ca5cb;
    text-align: center;
}

#english-title{
    width: 70%;
    padding: 2% 0;
    background-color: #3ca5cb;
    position: absolute;
    bottom: -5.9vh;
    left: 15%;
}

#english-title p{
    font-size: 1.5vw;
    line-height: 1vw;
    color: #fff;
    text-align: center;
}

.plan-box{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.plan-top-box, .plan-top-box2{
    width: 90%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan-photo{
    width: 50%;
    text-align: left;
}

.plan-photo img{
    width: 90%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-photo2{
    width: 50%;
    margin-left: 50%;
}

.plan-photo2 img{
    width: 90%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-logo{
    width: 50%;
    text-align: center;
    position: absolute;
    top: -5vh;
    right: 0;
}

.plan-logo img{
    width: 60%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}

.plan-logo2{
    width: 60%;
    text-align: center;
    position: absolute;
    top: -7vh;
    left: 0;
}

.plan-logo2 img{
    width: 50%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}


.plan-logo3{
    width: 50%;
    text-align: center;
    position: absolute;
    top: -4vh;
    right: 0;
}

.plan-logo3 img{
    width: 70%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}

.plan-bottom-box{
    width: 60%;
    margin-left: 40%;
    position: relative;
    top: -6vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: -2;
}

.plan-bottom-box2{
    width: 60%;
    margin-right: 40%;
    position: relative;
    top: -6vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: -2;
}

.plan-vertical-english, .plan-vertical-english2{
    width: 5%;
    writing-mode: vertical-rl
}

.plan-vertical-english p, .plan-vertical-english2 p{
    font-size: 2.4vw;
    line-height: 2.5vw;
    letter-spacing: 10%;
    color: transparent;
    text-align: left;
    text-indent: 10.5vw;
    -webkit-text-stroke: 2px #3ca5cb;
    font-family: "Londrina Outline", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.plan-text-box{
    width: 95%;
    height: 20vh;
    background-color: #3ca5cb;
    display: flex;
    padding: 2%;
}

.plan-text-box-inner{
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 7vh;
    left: 10%;
}

.plan-text-box-inner h3{
    width: 100%;
    font-size: 2vw;
    line-height: 3vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner p{
    width: 100%;
    font-size: 1.5vw;
    line-height: 2vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner2{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 7vh;
    right: 10%;
}

.plan-text-box-inner2 h3{
    width: 100%;
    font-size: 2vw;
    line-height: 3vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner2 p{
    width: 100%;
    font-size: 1.5vw;
    line-height: 2vw;
    margin: 0;
    color: #fff;
}

}

/*-------------------
タブレット_横
-------------------*/
@media screen and (min-width: 1025px) and (max-width: 1400px) {

#business-detail-comment-area{
    width: 100%;
    height: 50vh;
    position: relative;
    z-index: -1;
}

#business-detail-comment-title{
    width: 30%;
    position: absolute;
    top: 7.5vh;
    left: 35%;
    background-color: #3d9cbf;
    z-index: -1;
}

#business-detail-comment-title h2{
    font-size: 2vw;
    line-height: 4vw;
    font-weight: 100;
    color: #fff;
    text-align: center;
}

#business-detail-comment{
    width: 50%;
    height: 30vh;
    padding: 5%;
    background-color: #fff;
    border: 2px solid #3ca5cb;
    position: absolute;
    top: 10vh;
    left: 25%;
    z-index: -2;
}

#business-detail-comment p{
    font-size: 1.5vw;
    line-height: 3vw;
}

#sub-image-area{
    width: 100%;
    min-height: 50vh;
    position: relative;
    background-image: url("../img/business_detail/sub_image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

#plan-list-area{
    width: 100%;
    height: 59vh;
    position: relative;
    z-index: -1;
}

#plan-list-title{
    width: 30%;
    position: absolute;
    top: -7vh;
    left: 10%;
    border-radius: 10px;
    background-color: #f4fafc;
    z-index: -1;
}

#plan-list-title h2{
    font-size: 2vw;
    line-height: 4vw;
    font-weight: 100;
    text-align: center;
}

#plan-list-backbox{
    width: 100%;
    height: 27vh;
    position: absolute;
    top: 27vh;
    left: 0;
    background-color: #3ca5cb;
    z-index: -2;
}

#plan-list-card-area{
    width: 70%;
    position: absolute;
    top: 10vh;
    left: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

article{
    width:30%;
}

.hover-up{
    width: 100%;
}

.hover-up:hover{
    transform: translateY(-10%) !important;
}

.plan-card{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.plan-card-name{
    width: 90%;
    background-color: #3ca5cb;
    border-radius: 20px;
    margin-left: 5%;
}

.plan-card-name p{
    font-size: 1.5vw;
    line-height: 3vw;
    text-align: center;
    color: #fff;
}

.plan-card-photo{
    width: 100%;
    padding: 20% 0%;
    background-color: #f4f4f4;
    border: 5px solid #3ca5cb;
    border-radius: 30px;
    text-align: center;
    position: absolute;
    top: 3vh;
    z-index: -1;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-card-photo img{
    width: 90%;
    vertical-align: top;
}

#plan-list-sample-title{
    width: 40%;
    text-align: center;
    background-color: #004152;
    border-radius: 20px;
    padding: 1% 2%;
    position: absolute;
    top: 48vh;
    left: 30%;
}

#plan-list-sample-title p{
    font-size: 2vw;
    line-height: 3vw;
    color: #fff;
}

#plan-list-sample-title span{
    font-size: 1vw;
    line-height: 2vw;
    color: #fff;
}

#plan-list-sample-title hr{
    border: 1px solid #fff;
}

#introduction-to-each-plan-area{
    width: 100%;
    height: 274vh;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 7vh;
    z-index: -1;
}

#introduction-to-each-plan-title-area{
    width: 30%;
    height: 17vh;
    margin: 5% auto;
    position: relative;
    z-index: -1;
}

#introduction-to-each-plan-title{
    width: 100%;
    padding: 2% 0;
    border: 3px solid #3ca5cb;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}

#introduction-to-each-plan-title h3{
    font-size: 2vw;
    line-height: 3vw;
    color: #3ca5cb;
    text-align: center;
}

#english-title{
    width: 50%;
    padding: 2% 0;
    background-color: #3ca5cb;
    position: absolute;
    bottom: 58%;
    left: 25%;
}

#english-title p{
    font-size: 1vw;
    line-height: 0;
    color: #fff;
    text-align: center;
}

.plan-box{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.plan-top-box, .plan-top-box2{
    width: 80%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan-photo{
    width: 50%;
    text-align: left;
}

.plan-photo img{
    width: 90%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-photo2{
    width: 50%;
    margin-left: 50%;
}

.plan-photo2 img{
    width: 90%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-logo,.plan-logo3{
    width: 50%;
    text-align: center;
    position: absolute;
    top: -5vh;
    right: 0;
}

.plan-logo img,.plan-logo3 img{
    width: 60%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}

.plan-logo2{
    width: 60%;
    text-align: center;
    position: absolute;
    top: -7vh;
    left: 0;
}

.plan-logo2 img{
    width: 50%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}

.plan-bottom-box{
    width: 65%;
    margin-left: 35%;
    position: relative;
    top: -18vh;
    display: flex;
    justify-content: space-between;
    z-index: -2;
}

.plan-bottom-box2{
    width: 60%;
    margin-right: 40%;
    position: relative;
    top: -18vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: -2;
}

.plan-vertical-english, .plan-vertical-english2{
    width: 5%;
    writing-mode: vertical-rl
}

.plan-vertical-english p, .plan-vertical-english2 p{
    font-size: 2.4vw;
    line-height: 2.5vw;
    letter-spacing: 10%;
    color: transparent;
    text-align: left;
    text-indent: 16.5vw;
    -webkit-text-stroke: 2px #3ca5cb;
    font-family: "Londrina Outline", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.plan-text-box{
    width: 95%;
    height: 46vh;
    background-color: #3ca5cb;
    display: flex;
    padding: 2%;
}

.plan-text-box-inner{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 20vh;
}

.plan-text-box-inner h3{
    width: 100%;
    font-size: 2vw;
    line-height: 3vw;
    margin-bottom: 2%;
    color: #fff;
}

.plan-text-box-inner p{
    width: 100%;
    font-size: 1.5vw;
    line-height: 2vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner2{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 20vh;
    right: 7%;
}

.plan-text-box-inner2 h3{
    width: 100%;
    font-size: 2vw;
    line-height: 3vw;
    margin-bottom: 2%;
    color: #fff;
}

.plan-text-box-inner2 p{
    width: 100%;
    font-size: 1.5vw;
    line-height: 2vw;
    margin: 0;
    color: #fff;
}

}

/*-------------------
ＰＣ
-------------------*/
@media all and (min-width: 1401px){

#business-detail-comment-area{
    width: 100%;
    height: 50vh;
    position: relative;
    z-index: -1;
}

#business-detail-comment-title{
    width: 30%;
    position: absolute;
    top: 6vh;
    left: 35%;
    background-color: #3d9cbf;
    z-index: -1;
}

#business-detail-comment-title h2{
    font-size: 2vw;
    line-height: 4vw;
    font-weight: 100;
    color: #fff;
    text-align: center;
}

#business-detail-comment{
    width: 50%;
    height: 30vh;
    padding: 5%;
    background-color: #fff;
    border: 2px solid #3ca5cb;
    position: absolute;
    top: 10vh;
    left: 25%;
    z-index: -2;
}

#business-detail-comment p{
    line-height: 2vw;
}

#sub-image-area{
    width: 100%;
    min-height: 50vh;
    position: relative;
    background-image: url("../img/business_detail/sub_image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

#plan-list-area{
    width: 100%;
    height: 75vh;
    position: relative;
    z-index: 0;
}

#plan-list-title{
    width: 30%;
    position: absolute;
    top: -7vh;
    left: 10%;
    border-radius: 10px;
    background-color: #f4fafc;
    z-index: -1;
}

#plan-list-title h2{
    font-size: 2vw;
    line-height: 4vw;
    font-weight: 100;
    text-align: center;
}

#plan-list-backbox{
    width: 100%;
    height: 35vh;
    position: absolute;
    top: 40vh;
    left: 0;
    background-color: #3ca5cb;
    z-index: -1;
}

#plan-list-card-area{
    width: 70%;
    position: absolute;
    top: 10vh;
    left: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#plan-list-card-area a{
    width: 30%;
    cursor: pointer;
}

article{
    width:100%;
}

.hover-up{
    width: 100%;
}

.hover-up:hover{
    transform: translateY(-10%) !important;
}

.plan-card{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.plan-card-name{
    width: 90%;
    background-color: #3ca5cb;
    border-radius: 20px;
    margin-left: 5%;
}

.plan-card-name p{
    font-size: 1.5vw;
    line-height: 3vw;
    text-align: center;
    color: #fff;
}

.plan-card-photo{
    width: 100%;
    padding: 20% 0%;
    background-color: #f4f4f4;
    border: 5px solid #3ca5cb;
    border-radius: 30px;
    text-align: center;
    position: absolute;
    top: 3vh;
    z-index: -1;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-card-photo img{
    width: 90%;
    vertical-align: top;
}

#plan-list-sample-title{
    width: 40%;
    text-align: center;
    background-color: #004152;
    border-radius: 20px;
    padding: 1% 2%;
    position: absolute;
    top: 65vh;
    left: 30%;
}

#plan-list-sample-title p{
    font-size: 2vw;
    line-height: 3vw;
    color: #fff;
}

#plan-list-sample-title span{
    font-size: 1vw;
    line-height: 2vw;
    color: #fff;
}

#plan-list-sample-title hr{
    border: 1px solid #fff;
}

#introduction-to-each-plan-area{
    width: 100%;
    height: 335vh;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 7vh;
    z-index: -1;
}

#introduction-to-each-plan-title-area{
    width: 30%;
    height: 17vh;
    margin: 5% auto;
    position: relative;
    z-index: -1;
}

#introduction-to-each-plan-title{
    width: 100%;
    padding: 2% 0;
    border: 3px solid #3ca5cb;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}

#introduction-to-each-plan-title h3{
    font-size: 2vw;
    line-height: 3vw;
    color: #3ca5cb;
    text-align: center;
}

#english-title{
    width: 50%;
    padding: 2% 0;
    background-color: #3ca5cb;
    position: absolute;
    bottom: 38%;
    left: 25%;
}

#english-title p{
    font-size: 1vw;
    line-height: 0;
    color: #fff;
    text-align: center;
}

.plan-box{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.plan-top-box, .plan-top-box2{
    width: 60%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan-photo{
    width: 50%;
    text-align: left;
}

.plan-photo img{
    width: 90%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-photo2{
    width: 50%;
    margin-left: 50%;
}

.plan-photo2 img{
    width: 90%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-logo,.plan-logo3{
    width: 50%;
    text-align: center;
    position: absolute;
    top: -5vh;
    right: 0;
}

.plan-logo img,.plan-logo3 img{
    width: 60%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}

.plan-logo2{
    width: 60%;
    text-align: center;
    position: absolute;
    top: -7vh;
    left: 0;
}

.plan-logo2 img{
    width: 50%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}

.plan-bottom-box{
    width: 60%;
    margin-left: 40%;
    position: relative;
    top: -20vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: -2;
}

.plan-bottom-box2{
    width: 60%;
    margin-right: 40%;
    position: relative;
    top: -20vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: -2;
}

.plan-vertical-english, .plan-vertical-english2{
    width: 5%;
    writing-mode: vertical-rl
}

.plan-vertical-english p, .plan-vertical-english2 p{
    font-size: 2.4vw;
    line-height: 2.5vw;
    letter-spacing: 10%;
    color: transparent;
    text-align: left;
    text-indent: 10.5vw;
    -webkit-text-stroke: 2px #3ca5cb;
    font-family: "Londrina Outline", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.plan-text-box{
    width: 95%;
    height: 50vh;
    background-color: #3ca5cb;
    display: flex;
    padding: 2%;
}

.plan-text-box-inner{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 20vh;
}

.plan-text-box-inner h3{
    width: 100%;
    font-size: 1.5vw;
    line-height: 3vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner p{
    width: 100%;
    font-size: 1vw;
    line-height: 1.5vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner2{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 20vh;
    right: 7%;
}

.plan-text-box-inner2 h3{
    width: 100%;
    font-size: 1.5vw;
    line-height: 3vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner2 p{
    width: 100%;
    font-size: 1vw;
    line-height: 1.5vw;
    margin: 0;
    color: #fff;
}

}
/*-------------------
印刷用
-------------------*/
@media print{

#business-detail-comment-area{
    width: 100%;
    height: 50vh;
    position: relative;
    z-index: -1;
}

#business-detail-comment-title{
    width: 30%;
    position: absolute;
    top: 6vh;
    left: 35%;
    background-color: #3d9cbf;
    z-index: -1;
}

#business-detail-comment-title h2{
    font-size: 2vw;
    line-height: 4vw;
    font-weight: 100;
    color: #fff;
    text-align: center;
}

#business-detail-comment{
    width: 50%;
    height: 30vh;
    padding: 5%;
    background-color: #fff;
    border: 2px solid #3ca5cb;
    position: absolute;
    top: 10vh;
    left: 25%;
    z-index: -2;
}

#business-detail-comment p{
    line-height: 2vw;
}

#sub-image-area{
    width: 100%;
    min-height: 50vh;
    position: relative;
    background-image: url("../img/business_detail/sub_image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

#plan-list-area{
    width: 100%;
    height: 75vh;
    position: relative;
    z-index: -1;
}

#plan-list-title{
    width: 30%;
    position: absolute;
    top: -7vh;
    left: 10%;
    border-radius: 10px;
    background-color: #f4fafc;
    z-index: -1;
}

#plan-list-title h2{
    font-size: 2vw;
    line-height: 4vw;
    font-weight: 100;
    text-align: center;
}

#plan-list-backbox{
    width: 100%;
    height: 35vh;
    position: absolute;
    top: 40vh;
    left: 0;
    background-color: #3ca5cb;
    z-index: -2;
}

#plan-list-card-area{
    width: 70%;
    position: absolute;
    top: 10vh;
    left: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

article{
    width:30%;
}

.hover-up{
    width: 100%;
}

.hover-up:hover{
    transform: translateY(-10%) !important;
}

.plan-card{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.plan-card-name{
    width: 90%;
    background-color: #3ca5cb;
    border-radius: 20px;
    margin-left: 5%;
}

.plan-card-name p{
    font-size: 1.5vw;
    line-height: 3vw;
    text-align: center;
    color: #fff;
}

.plan-card-photo{
    width: 100%;
    padding: 20% 0%;
    background-color: #f4f4f4;
    border: 5px solid #3ca5cb;
    border-radius: 30px;
    text-align: center;
    position: absolute;
    top: 3vh;
    z-index: -1;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-card-photo img{
    width: 90%;
    vertical-align: top;
}

#plan-list-sample-title{
    width: 40%;
    text-align: center;
    background-color: #004152;
    border-radius: 20px;
    padding: 1% 2%;
    position: absolute;
    top: 65vh;
    left: 30%;
}

#plan-list-sample-title p{
    font-size: 2vw;
    line-height: 3vw;
    color: #fff;
}

#plan-list-sample-title span{
    font-size: 1vw;
    line-height: 2vw;
    color: #fff;
}

#plan-list-sample-title hr{
    border: 1px solid #fff;
}

#introduction-to-each-plan-area{
    width: 100%;
    height: 335vh;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 7vh;
    z-index: -1;
}

#introduction-to-each-plan-title-area{
    width: 30%;
    height: 17vh;
    margin: 5% auto;
    position: relative;
    z-index: -1;
}

#introduction-to-each-plan-title{
    width: 100%;
    padding: 2% 0;
    border: 3px solid #3ca5cb;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}

#introduction-to-each-plan-title h3{
    font-size: 2vw;
    line-height: 3vw;
    color: #3ca5cb;
    text-align: center;
}

#english-title{
    width: 50%;
    padding: 2% 0;
    background-color: #3ca5cb;
    position: absolute;
    bottom: 38%;
    left: 25%;
}

#english-title p{
    font-size: 1vw;
    line-height: 0;
    color: #fff;
    text-align: center;
}

.plan-box{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.plan-top-box, .plan-top-box2{
    width: 60%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan-photo{
    width: 50%;
    text-align: left;
}

.plan-photo img{
    width: 90%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-photo2{
    width: 50%;
    margin-left: 50%;
}

.plan-photo2 img{
    width: 90%;
    vertical-align: top;
    box-shadow: 8px 8px 8px #0b3844;
}

.plan-logo,.plan-logo3{
    width: 50%;
    text-align: center;
    position: absolute;
    top: -5vh;
    right: 0;
}

.plan-logo img,.plan-logo3 img{
    width: 60%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}

.plan-logo2{
    width: 60%;
    text-align: center;
    position: absolute;
    top: -7vh;
    left: 0;
}

.plan-logo2 img{
    width: 50%;
    vertical-align: top;
    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 1));
}

.plan-bottom-box{
    width: 60%;
    margin-left: 40%;
    position: relative;
    top: -20vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: -2;
}

.plan-bottom-box2{
    width: 60%;
    margin-right: 40%;
    position: relative;
    top: -20vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: -2;
}

.plan-vertical-english, .plan-vertical-english2{
    width: 5%;
    writing-mode: vertical-rl
}

.plan-vertical-english p, .plan-vertical-english2 p{
    font-size: 2.4vw;
    line-height: 2.5vw;
    letter-spacing: 10%;
    color: transparent;
    text-align: left;
    text-indent: 10.5vw;
    -webkit-text-stroke: 2px #3ca5cb;
    font-family: "Londrina Outline", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.plan-text-box{
    width: 95%;
    height: 50vh;
    background-color: #3ca5cb;
    display: flex;
    padding: 2%;
}

.plan-text-box-inner{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 20vh;
}

.plan-text-box-inner h3{
    width: 100%;
    font-size: 1.5vw;
    line-height: 3vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner p{
    width: 100%;
    font-size: 1vw;
    line-height: 1.5vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner2{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 20vh;
    right: 7%;
}

.plan-text-box-inner2 h3{
    width: 100%;
    font-size: 1.5vw;
    line-height: 3vw;
    margin: 0;
    color: #fff;
}

.plan-text-box-inner2 p{
    width: 100%;
    font-size: 1vw;
    line-height: 1.5vw;
    margin: 0;
    color: #fff;
}

}


/*-------------------
共通
-------------------*/