@charset "utf-8";
 .salon_list{
display: grid;
grid-template-columns: repeat(2,1fr);
gap:2rem;
}
.salon_list_item{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
position: relative;
padding: 1.5rem;
transition: all .3s ease;
.article_eyecatch{
margin-top: 0;
border-radius: 1rem;
overflow: hidden;
}
.article_eyecatch img{
transition: all .3s ease;
height: 100%;
object-fit: cover;
}
.salon_info{
display: flex;
flex-direction: column;
gap: 1rem;
}
.salon_info_title,
.salon_info_content{
padding: 0;
border-bottom: none;
}
.salon_info_content{
font-size: 1.2rem;
}
.salon_title{
font-weight: bold;
}
.salon_tel{
font-size: 1rem;
}
.salon_page{
margin-top: auto;
margin-left: auto;
display: grid;
place-content: center;
}
.salon_page a svg{
width: 3rem;
height: 3rem;
border-radius: 50%;
background:var(--maincolor);
padding: .5rem  ;
}
.salon_page a::after{
content: "";
z-index: 2;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.salon_page a svg{
fill: #fff;
}
.salon_page a:hover svg{
transform: translateX(.5rem);
}
}
.salon_list_item:has(.salon_page a:hover){
background:#fff;
.article_eyecatch img{
scale:1.1;
}
}
@media (max-width: 768px) {
.salon_list{
grid-template-columns: 1fr;
}
} .salon_article{
max-width: 85rem;
margin-left: auto;
margin-right: auto;
}
.salon_info{
display: grid;
grid-template-columns: 1fr 2fr;
}
.salon_info_title,
.salon_info_content{
padding: 3rem 2rem;
border-bottom: 1px solid rgb(from var(--graycolor) r g b / 0.4);
}
.salon_calendar{
width: 100%;
border-collapse:collapse;
text-align:center;
table-layout:fixed;
}
.salon_calendar caption{
font-size:3rem;
font-weight:700;
margin-bottom:3rem;
text-align: center;
}
.salon_calendar th,
.salon_calendar td{
width:calc(100% / 7);
height:5rem;
font-size:2rem;
font-weight:700;
text-align: center;
}
.salon_calendar th{
padding-bottom:1.5rem;
}
.salon_calendar .sat{
color:#3F8DFF;
}
.salon_calendar .sun{
color:#FF5A5A;
}
.salon_calendar .openday span,
.salon_calendar .event{
display:inline-flex;
justify-content:center;
align-items:center;
width:3.5rem;
height:3.5rem;
border-radius:50%;
background:var(--maincolor);
color:#fff;
}
.salon_calendar tfoot td{
font-size: 1.4rem;
font-weight: normal;
}
.salon_calendar .mark{
color: var(--maincolor);
}
.article_eyecatch{
margin-top: 5em;
}
.salon_attention_list{
font-size: 1.4rem;
}
.salon_attention_list_item{
text-indent: -1em;
padding-left: 1em;
}
.salon_attention_list_item::before{
content: "・ ";
}
@media (max-width: 768px) {
.salon_info{
grid-template-columns: 1fr;
}
.salon_info_title{
border-bottom: none;
padding-bottom: 0;
}
}