@charset "utf-8";
/* CSS Document */

/**********************************************
    料金案内
***********************************************/

.price h3 {
    text-align: center;
}
.price h3.arrow_box {
    padding: .5em;
    background: #01A15E;
    color: #FFF;
}
.price h3.arrow_box::after {
    background: #01A15E;
}
.price .s-lead {
    text-align: center;
    padding-bottom: 1em;
    
}
.price .fl-block {
    justify-content: space-between;    
}
.price .plan-wrap {
    justify-content: flex-start;
    padding: 10px 10px 1em;
    margin-bottom: 2em;
}
@media screen and (min-width: 768px) {
    .price .plan-wrap {        
        width: 48%;
        padding: 1.5em;
        margin-bottom: 3em;
    }
}
@media screen and (min-width: 960px) {
    .price .plan-wrap {
        padding: 2em;
    }
}
.member-plan .fl-block {
    margin-bottom: 3em;
	align-items: flex-start;
}
.member-plan .fl-block.group {
    justify-content: center;
}
.member-plan .plan-wrap {
    border-style: solid;
    border-width: 1px;
    border-top-width: 1.5em;
}
.member-plan h4 {
    font-size: 1.6em;
    margin-bottom: 0;
}
@media screen and (min-width: 768px) {
    .member-plan h4 {
        font-size: 1.8em;
        margin-bottom: 0;
    }
}
.member-plan .basic .fee-wrap {
    background: rgba(75,210,125,.2);
}
.member-plan .premium .fee-wrap {
    background: rgba(255,208,10,.2);
}
.member-plan .day .fee-wrap {
    background: rgba(185,230,250,.2);
}
.member-plan .night .fee-wrap {
    background: rgba(160,155,255,.2);
}
.group .plan-wrap {
    border-color: #006E40;
    width: 100%;
}
.member-plan .group .fee-wrap {
    background: rgba(0,110,64,.2);
}
.plan-desc {
    padding: 1em 0;
    text-align: left;
}
.member-plan .fee-wrap {
    padding: 1em;
}
.member-plan .fee {
    font-size: 2.2em;
}
@media screen and (min-width: 768px) {
    .member-plan .fee {
        font-size: 2.4em;
    }
}
.member-plan .note_s {
    color: #505050;
}
.member-plan p.note_s {
    border-top: 1px dashed #CCC;
    padding: 10px;
}
.plan-detail {
    background: #FFF;
    border-spacing: 0;
    border-top: 1px solid #CCC;
    font-size: .9em;
    width: 100%;
    margin-top: 1em;
}
.plan-detail.more {
    border-top: none;
}
.plan-detail tr:nth-child(odd) {
    background: #F5F5F5;    
}
.plan-detail.more tr:nth-child(even) {
    background: #F5F5F5; 
}
.plan-detail th,
.plan-detail td {
    border-bottom: 1px solid #CCC;
    padding: 0 10px;
    height: 60px;
    text-align: left;
}
.plan-detail tbody th {
    font-size: .9em;
    font-weight: normal;
    width: 35%;
}
.plan-detail td {
    width: 65%;
}
.plan-icon {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
}
.plan-icon li {
    width: 33%;
    padding: 5px;
}
@media screen and (min-width: 768px) {
    .plan-icon li {
        width: 25%;
    }
}
.group .detail-wrap {
	display: flex;
}
.group .detail-wrap dl {
    padding: 1em 0;
    margin-top: 1em;
}
@media screen and (min-width: 768px) {    
    .group .detail-wrap dl {
        width: 50%;
        padding: 1em;
    }
}
.group .detail-wrap dt {
    font-weight: bold;
    background: rgba(0,0,0,.1);
    padding: 5px;
}
.group .detail-wrap .parent {
    background: rgba(185,255,210,.2);
}
.group .detail-wrap .child {
    background: #F5F5F5;
}

/*** もっと見る ***/

.member-plan .read-more {
    color: #FFF;
    background: #4BD27D;
    border-radius: 10px;
    /*font-size: .85em;*/
    display: inline-block;
    width: 100px;
    height: 20px;
    padding: 0 1em;
    position: relative;
}
.member-plan .read-more::before {
    content: "詳細を見る▼";
    font-size: .85em;
    display: inline-block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.member-plan .toggle:checked + .read-more::before {
    content: "詳細を隠す▲";
}
.member-plan .toggle:checked ~ .toggle-inner {
    transition: all .5s;
}

/* 初期費用 */
.initial-cost {
    background: #F5F5F5;
    padding: 3em 0;
}
.initial-cost .plan-wrap {
    border: 1px solid #CCC;
    border-top-width: 1.5em;
}
.initial-cost .fee-wrap {
    background: rgba(204,204,204,.2);
}
.option-plan {
    padding-top: 3em;
}
.option-plan .fl-block,
.visitor-plan .fl-block {
    flex-wrap: wrap;
    justify-content: flex-start;
}
.option-plan dl,
.visitor-plan dl {
    border: 1px solid #CCC;
    margin-bottom: 1em;
    text-align: center;
}
.option-plan dl {
    border-radius: 15px;
}
.visitor-plan dl {
    background: #FFF;
    padding: 10px;
}
@media screen and (min-width: 768px) {
    .option-plan dl,
    .visitor-plan dl {
        width: calc(50% - 1em);
        margin-right: 1em;
    }    
    .option-plan dl:nth-child(2n),
    .visitor-plan dl:nth-child(2n) {
        margin-right: 0;
    }
}
@media screen and (min-width: 960px) {
    .option-plan dl {
        width: calc(33.333% - 1em);
    }        
    .visitor-plan dl {
        width: calc(25% - 1em);
    }    .option-plan dl:nth-child(2n),
    .visitor-plan dl:nth-child(2n) {
        margin-right: 1em;
    }    
    .option-plan dl:nth-child(3n) {
        margin-right: 0;
    }    .visitor-plan dl:last-of-type {
        margin-right: 0;
    }
}
.option-plan dt,
.visitor-plan dt {
    background: #EBEBEB;
    font-weight: bold;
    font-size: 1.1em;
    padding: 10px;
}
.option-plan dt {
    border-radius: 15px 15px 0 0;
}
.option-plan dd,
.visitor-plan dd {
    padding: 1em;
    border-top: 1px dashed #CCC;   
}
.option-plan dd p.note_s {
    text-align: left;    
}
#visitor {
    background: #F3F7F4;
}


/*** 入会方法
**************************************************/

#join .inner_s {
    padding-bottom: 5em;
}
#join h3 {
    text-align: center;
}


/*** ご入会に必要なもの *********************************************/

@media screen and (min-width: 768px) {
    .addmission-list {
        /*display: flex;*/
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1em;
        width: 100%;
    }
}
.addmission-list li {
    background: #01A15E;
    border-radius: 20px;
    color: #FFF;
    padding: 1em;
}
@media screen and (max-width: 767px) {
    .addmission-list li {
        margin-bottom: 1em;
    }
}
@media screen and (min-width: 768px) {
    .addmission-list li {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
    }
}
.addmission-list h4 {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}
.addmission-list figure {
    width: 70%;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    .addmission-list figure {
        width: 100%;
    }
}


/*** ご入会までの流れ *********************************************/

.join-flow {
    margin-top: 3em;
}
@media screen and (min-width: 768px) {
    .join-flow {
        margin-top: 5em;
    }
}
.join-flow .tabs {
    display: flex;
    justify-content: space-around;
    grid-gap: 10px;
    padding: 1em 0;
}
.join-flow .tab {
    background: #CCC;
    border-radius: 10px;
    width: 50%;
    padding: 1em;
    text-align: center;
    cursor: pointer;
}
.join-flow .tab.active {
    background: #006532;
    color: #FFF;
}
.panels .panel-content {
    display: none;
}
.panels .panel-content.show {
    display: block;
}
.join-flow .flow-wrap {
    border-spacing: inherit;
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 960px) {
    .hikone .flow-wrap {
        width: 80%;
        margin: auto;
    }
}
.flow-wrap .flow-class-hd {
    width: 100px;
}
.flow-wrap .flow-head {
    font-size: 1.2em;
    width: 50%;
    padding: 10px 5px;
}
.hikone .flow-wrap .flow-head {
    width: 100%;
}
@media screen and (min-width: 768px) {
    .flow-wrap .flow-head {
        font-size: 1.4em;
    }
}
.flow-head p {
    border-radius: 5px;
}
.flow-head .visit {
    background: #FFC482;
    padding: 10px;
}
.flow-head .web {
    background: #23C35F;
    padding: 10px;
}
.join-flow .flow-wrap th,
.join-flow .flow-wrap td {
    vertical-align: top;
    height: 100%;
}
.join-flow .flow-wrap td {
    position: relative;
    padding: 0 5px 0 10px;
}
.join-flow .flow-wrap td:nth-of-type(2) {
    padding: 0 10px 0 5px;
}
@media screen and (min-width: 768px) {
    .join-flow .flow-wrap td,
    .join-flow .flow-wrap td:nth-of-type(2) {
        padding: 0 1em;
    }
}
.join-flow .flow-wrap td::before {
    content: "";
    display: block;
    position: absolute;
    top: 1em;
    right: 50%;
    width: 1px;
    height: 100%;
    background: #CCC;
    z-index: -1;
}
tbody th {
    font-weight: normal;
}
.online td {
    background: rgba(185,230,250,.1);
}
.onshop td {
    background: rgba(255,215,170,.1);
}
.flow-class {
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    height: 100%;
    width: 40px;
}
@media screen and (min-width: 768px) {
    .flow-class {
        width: 50px;
    }
}
.online .flow-class {
    background: #B9E6FA;
}
.onshop .flow-class {
     background: #FFD7AA;
}
.flow-class span {
    display: block;
    width: 100%;
}
.join-flow .flow-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    height: 100%;
    padding-top: 10px;
}
@media screen and (min-width: 768px) {
    .join-flow .flow-list {
         padding-top: 1em;
    }
}
.join-flow .flow-list li {
    background: #FFF;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 100%;
}
@media screen and (min-width: 768px) {
    .join-flow .flow-list li {
        padding: 1em;
    }
}
.join-flow .flow-list li {
    margin-bottom: 2em;
}
.join-flow .flow-list.visit li {
    border-color: #FF8E10;
}
.join-flow .flow-list.web li {
    border-color: #23C35F;
}
.join-flow .flow-wrap tfoot td::before {
    width: 0;    
}
.finish {
    border-color:#006532;
    background: #5BC323!important;
    color: #FFF;
    font-size: 1.2em;
}