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

.page-top-menu {
    position: relative;
    background: url("../images/menu/main@2x.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 50px 0;
    height: 400px;
    background-position: 80% 50%;
}

.page-ttl{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 100%;
    text-align: center;
}

.page-ttl h1{
	font-size: 24px;
	font-weight:bold;
	color: #fff;
}

.sub-ttl{
	background-color: #fff;
	width: 100%;
	max-width: 412px;
	padding: 20px;
	position: absolute;
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.sub-ttl h2{
	font-size: clamp(18px, 2.5vw, 24px);
	font-weight:bold;
	text-align: center;
}

.menu-list{
  display: flex;   
  display: -webkit-flex;
  justify-content: flex-start;
  flex-wrap: wrap;   
  list-style: none;  
  margin: 0;
  padding: 0;
  width: 100%;	
}

.menu-list li {
  width: 20%;         
  box-sizing: border-box;
  position: relative;
  padding-left: 25px;  
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;	
  line-height: 2.0;	
}

.menu-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 21px;
  height: 15px;
  transform: translateY(-50%);
  background-image: url("../images/menu/menu_icon.svg"); /* 好きなアイコン画像 */
  background-size: contain;
  background-repeat: no-repeat;
}

.bg__white {background-color: var(--white);}

.width-box-850 { max-width: 850px; }

.kakko-menu{
    padding: 0.1em 3em;
    position: relative;
}

.kakko-menu::before, .kakko-menu::after {
    content: '';
    width: 20px;
    height: 100%;
    position: absolute;
    border-top: solid 1px var(--sub-color_01);
    border-bottom: solid 1px var(--sub-color_01);
    top: 0;
}

.kakko-menu::before {
    border-left: solid 1px var(--sub-color_01);
    left: 0;
}

.kakko-menu::after {
    border-right: solid 1px var(--sub-color_01);
    right: 0;
}

.menu-area-ttl{
	font-size: clamp(22px, 3vw, 28px);
	font-weight: bold;
	text-align: center;
}

.menu-icon {
    position: relative;
    padding-left: 25px;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 auto 20px;
}

.menu-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 21px;
  height: 15px;
  transform: translateY(-50%);
  background-image: url("../images/menu/menu_icon.svg"); /* 好きなアイコン画像 */
  background-size: contain;
  background-repeat: no-repeat;
}

.menu-icon2 {
    position: relative;
    padding-left: 25px;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 auto 10px;
}

.menu-icon2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  width: 21px;
  height: 15px;
  background-image: url("../images/menu/menu_icon.svg"); /* 好きなアイコン画像 */
  background-size: contain;
  background-repeat: no-repeat;
}

.menu-icon3 {
    position: relative;
    padding-left: 25px;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 auto 20px;
}

.menu-icon3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 21px;
  height: 15px;
  transform: translateY(-50%);
  background-image: url("../images/menu/menu_icon.svg"); /* 好きなアイコン画像 */
  background-size: contain;
  background-repeat: no-repeat;
}
.menu-text{
	font-size: 14px;
	text-align: left;
	line-height: 1.6;
	padding-left: 21px;
}

.font-libre-ba {
    font-family: "Libre Baskerville", "Noto Serif JP", serif;
}

.gap40 { gap: 4rem; }
.gap15 { gap: 1.5rem; }

.pl10-30 { padding-left: clamp(1rem, 4vw, 3rem); }

.sec-menu-reverve h2 {
    padding: 1em;
    background: url(../images/salon-syowa/bg-salon02.jpg) no-repeat center / cover;
    margin: 60px 0;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tbl-border tr {
	border-bottom: 1px solid #000;
}
.tbl-border tr:first-of-type {
	border-top: 1px solid #000;
}
.tbl-border th {
	vertical-align: text-top;
    text-align: left;
	padding-left: 2rem;
    padding-right: 2rem;
	width: 72.5%;
	 position: relative;    
}

.tbl-border th::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    width: 0.5px;
    height: 80%;
    background-color: #000;
}

.tbl-border td{
	font-size: 21px;
	font-weight: 600;
	text-align: end;
}

@media screen and (max-width: 960px) {
	/* テーブル(同色下線) */
	.tbl-border.table960 th {padding-left: .5rem; padding-right: .5rem;}
	}

@media screen and (max-width: 820px) {

.menu-list li {
    width: 33%;
    }
}

@media screen and (max-width: 768px) {
	/* テーブル(同色下線) */
	.tbl-border.table768 th {padding-left: .5rem; padding-right: .5rem; padding-bottom: 10px;}
	
	
	.tbl-border th::after {
    display: none;
}
	
	.pl10-30 { padding-left: 0; }
	
	.sec-menu-reverve h2 {
       margin: 0;
   }
	
}
@media screen and (max-width: 560px) {
	/* テーブル(同色下線) */
	.tbl-border.table560 th {padding-left: .5rem; padding-right: .5rem;}
	
	.sub-ttl {
    max-width: 300px;
    }
	
	.menu-list li {
    width: 50%;
    }
	
	.menu-icon2::before {
    top: 7%;
    }
	
	.menu-icon3::before {
    top: 25%;
    }
	
	.gap15 { gap: 0.5rem; }
}