@charset "utf-8";





/*==========================================================================

	            #parlor-header
	
============================================================================*/

#parlor-header {
    overflow: hidden;
}
#parlor-header h1 {
    background-color: #3E3A39;
	padding: 3% 5%;
    line-height: 0;
}
#parlor-header h2 {
    background-color: #231815;
    color: #fff;
    font-size: clamp(20px, 4.5vw, 35px);
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.05em;
    padding: 0.5em 0;
}

#kousintex{
    font-size: clamp(5px, 4.5vw, 15px);
    color: #ff0000;
}

.tyuusyaku{
    font-size: clamp(5px, 2.5vw, 15px);
    color: #a7a7a7;
}


/*==========================================================================

	            #parlor-nav
	
============================================================================*/

#parlor-nav {
    background-color: #3E3A39;
    padding: 0.5%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
}
#parlor-nav li {
    background-color: #231815;
    width: 19%;
    margin: 0 0.5%;
    padding: 0.5em 0;
    font-size: clamp(10px, 2.5vw, 18px);
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}
#parlor-nav li a {
    text-decoration: none;
}

/*==========================================================================

	            #parlor-list
	
============================================================================*/

#parlor-list {
    background: url("../img/top/contents-bg.png");
    background-repeat: repeat;
    background-position: center top;
    background-size: 100% auto;
    background-color: #3E3A39;
	padding: 8% 5% 20%;
}
.list-box {
    overflow: hidden;
    padding-top: 3.5em;
    margin-top: -3.5em;
    margin-bottom: 2.5em;
}
.list-box h2 {
    font-size: clamp(18px, 4vw, 30px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.05em;
    border-left: #fff 0.3em solid;
    padding-left: 0.3em;
    margin-bottom: 0.7em;
    position: relative;
}
.list-box h2:before {
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 3em;
}
#parlor-list .list-box:nth-of-type(1) h2:before {
   left: 7.2em;
}

.list-box ul li {
    font-size: clamp(16px, 3.5vw, 25px);
    /*font-weight: bold;*/
    line-height: 1.5;
    padding-left: 2em;
    margin-bottom: 0.7em;
}
.list-box ul li span {
    background-color: #fff;
    color: #3E3A39;
    font-size: clamp(12px, 2.5vw, 16px);
    line-height: 1;
    padding: 0.2em 0.5em;
    margin-left: 1.5em;
    vertical-align: middle;
    border-radius: 5px;
}

@media screen and (max-width: 641px){
   .list-box ul li {
        padding-left: 1em;
    }
}