/*
 plan TOP
==============================================================================
*/

/** hero **/
.wrap-title-best{
    text-align: center;
    border-top: 2px solid #c89b50;
    border-bottom: 2px solid #c89b50;
    padding: 30px 0;
    color: #c89b50;
}

.wrap-title-best p img{width: 80px;}

.wrap-title-best h3{
    color: #c89b50;
    font-size: 2.4rem;
    margin: 0;
}

.wrap-title-best h3 span{
    display: block;
    font-size: 1.6rem;
}

/** subtitle **/
.second-title h2{
    position: relative;
    display: block;
    padding: 0 32px;
    color: #9f8050;
    margin-bottom: 40px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.second-title h2::before,
.second-title h2::after {
    display: inline-block;
    position: absolute;
    top: calc(50% - 3px);
    width: 30px;
    height: 5px;
    content: '';
    border-top: solid 2px #c2b89f;
    border-bottom: solid 2px #c2b89f;
    margin: auto;
    margin-bottom: 6px;
}
.second-title.gallery-title h2::before,
.second-title.gallery-title h2::after {
    margin-bottom: 0;
}
.second-title h2::before {
    left: 0px;
}
  
.second-title h2::after {
    right: 0px;
}

/** card plan **/
.plan-top-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card-plan{
    width: 40%;
    background: #f5f5f5;
    padding: 20px 4%;
    margin-bottom: 30px;
}

.card-plan-photo img{
    width: 100%;
    margin-bottom: 10px;
}

.card-plan-period span{
    font-size: 1rem;
    border-bottom: 1px solid #4b4b4b;
    padding-bottom: 5px;
}

.card-plan-title{
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

ul.card-plan-category{
    color: #cc2e21;
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid #cc2e21;
    border-left: none;
    border-right: none;
    padding: 10px 0;
}

.card-plan-txt{font-size: 1.2rem;}

/** button **/
.button-plan-top {
    background-color: #765730;
    color: #fff;
    border-radius: 6px;
    text-align: left;
    width: 100%;
    position: relative;
    font-size: 1rem;
}
/* Hover + Focus */
.button-plan-top:hover,
.button-plan-top:focus {
    background-color: #d7bd9d;
    color: #fff;
}
/* OnClick + Active */
.button-plan-top:active,
.button-plan-top.uk-active {
    background-color: #d7bd9d;
    color: #fff;
}
.button-plan-top:after{
    content: "竊�";
    position: absolute;
    right: 10px;
    top: 13px;
}


/* Tablet 
******************************************************************************
*/
@media all and (min-width: 768px) and (max-width: 1024px) { 
	
	
    .second-title h2::before,
    .second-title h2::after {
        width: 50px;
    }
	
}

/* Desktop
******************************************************************************
*/
@media (min-width: 1025px) {
    
    /** hero **/
    .wrap-title-best{
        width: 60%;
        margin: 0 auto;
    }
    
    /** subtitle **/
    .second-title h2{
        padding: 0 65px;
        margin-bottom: 80px;
        display: inline-block;
        min-width: 703px;
        text-align: center;
    }
    .second-title h2::before,
    .second-title h2::after {
        display: inline-block;
        position: relative;
        top: calc(50% - 3px);
        width: 130px;
        height: 5px;
        content: '';
        border-top: solid 2px #c2b89f;
        border-bottom: solid 2px #c2b89f;
        margin: auto;
        margin-bottom: 6px;
    }
    .second-title h2::before {
        left: -50px;
    }

    .second-title h2::after {
        right: -50px;
    }
    
    /** card plan **/
    .plan-top-list{
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto;
    }

    .card-plan{
        width: 90%;
        padding: 40px 5%;
        margin-bottom: 60px;
        display: flex;
        justify-content: space-between;
    }
    
    .card-plan div{width: 47%;}
    .card-plan-photo img{margin-bottom: 0;}
    .card-plan-period span{font-size: 1.6rem;}
    .card-plan-title{font-size: 1.8rem;}

    ul.card-plan-category{
        font-size: 1.6rem;
        display: flex;
    }
    
    ul.card-plan-category li{margin-right: 20px;}

    .card-plan-txt{font-size: 1.4rem;}
    
    /** button **/
    .button-plan-top {
        width: 200px;
        font-size: 1.4rem;
    }
    
}


/*
 plan detail
==============================================================================
*/

/** plan detail **/
.sec-plan-detail{
    padding-top: 70px 0;
    
}

/** overview **/
.overview{
    background: #f5f5f5;
    padding: 5%;
}

.overview .photo{margin-bottom: 20px;}

ul.category-detail{
    display: flex;
    flex-wrap: wrap;
}

ul.category-detail li{margin-right: 8px;}

.note{
    font-weight: 700;
    color: #765730;
}

.overview h3{font-weight: 700;}

/** plan detail **/
.plan-detail{
    background: #f5f5f5;
    padding: 5%;
}

.plan-detail dl{margin: 0 0 30px;}

.plan-detail dl dt{
    color: #a18050;
    background: #fff;
    text-align: center;
    padding: 5px 10px;
    margin-bottom: 15px;
}

.plan-detail dl dd{
    margin: 0 auto;
    width: 96%;
}

/* plan detail蜀��table */
.plan-detail-table table{
    font-size: 1rem;
    margin: 0;
    width: 100%;
}

.plan-detail-table table tbody tr td{
    padding: 15px 10px;
    vertical-align: top;
    border-bottom: 1px solid #fff;
    line-height: 1.6;
}

.plan-detail-table table tbody tr td:nth-child(1){width: 24%;}

.plan-detail-table table tbody tr:last-child td{
    border-bottom: none;
}

.plan-detail-table br{display: none;}
.plan-detail-table table tbody tr td br{display: block;}


/*.plan-detail dl dd table > tbody > tr {
  border-bottom: solid 1px #b2b2b2;
}

.plan-detail > tbody > tr > th, 
.plan-detail > tbody > tr > td {
  line-height: 2.0em;
  padding: 15px 30px;
  vertical-align: top;
}

.plan-detail > tbody > tr > th {
  white-space: nowrap;
  font-weight: 700;
  border-right: solid 1px #b2b2b2;
}

.plan-detail > tbody > tr > td.nopdd {
  padding: 0;
}

.plan-detail > tbody > tr > td table tr {
  border-bottom: solid 1px #b2b2b2;
}

.plan-detail > tbody > tr > td table tr th, 
.plan-detail > tbody > tr > td table tr td {
  font-size: .9em;
  text-align: left;
  padding: 15px 30px;
}

.plan-detail > tbody > tr > td table tr th,
td.nopdd > table > tbody > tr > td:nth-child(1) {
  font-weight: 700;
  background-color: #edebe9;
}*/

/** button **/
.btn-plan-detail{
    width: 230px;
    margin: 0 0 20px;
}


/* Tablet 
******************************************************************************
*/
@media all and (min-width: 768px) and (max-width: 1024px) { 
	
    /** overview **/    
    .overview .photo{
        width: 30%;
        float: right;
    }
    
    .overview .text{
        width: 60%;
        float: left;
    }
    
	/** button **/
    .btn-plan-detail{
        width: 230px;
        margin: 0 20px 0 0;
    }

	
}

/* Desktop
******************************************************************************
*/
@media (min-width: 1025px) {
    
    /** overview **/    
    .overview .photo{
        width: 30%;
        float: right;
    }
    
    .overview .text{
        width: 60%;
        float: left;
    }
    
    .note{font-size: 1.8rem;}
    
    ul.category-detail li{margin-right: 13px;}
    
    /** plan detail **/
    .plan-detail{padding: 0 5% 5%;}
    
    .plan-detail dl:first-child{border-top: 1px solid #d8d8d8;}
    
    .plan-detail dl{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0;
        border-bottom: 1px solid #d8d8d8;
        padding: 13px 0;
    }
    
    .plan-detail dl dt{
        color: #4b4b4b;
        background: transparent;
        padding: 0;
        margin-bottom: 0;
        width: 30%;
    }

    .plan-detail dl dd{
        margin: 0;
        width: 70%;
    }
    
    /* plan detail蜀��table */
    .plan-detail-table table tbody tr td:nth-child(1){width: auto;}
    .plan-detail-table table{font-size: 1.2rem;}
    .plan-detail-table table tbody tr td{line-height: 1.3;}
    
    
    /** button **/
    .btn-plan-detail{
        width: 230px;
        margin: 0 20px 0 0;
    }

    
    
    
}