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

#contents h2 {
 font-size: var(--font-size-36);
 font-weight: 700;
 text-align: center;
 margin-bottom: 2rem;
}
.list {
margin-bottom: 6rem;
}
.list ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list ul li {
width: 45%;
display: flex;
flex-direction: column;
padding: 1em;
margin-bottom: 2rem;
box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}
.list ul li .thumb {
width: 100%;
  aspect-ratio: 4 / 3;  
  background: #eee;   
  overflow: hidden;
  margin-bottom: 1rem;
}
.list ul li .thumb img {
 width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center;
  display: block;
}
.list ul li p.text {
 font-size: var(--font-size-24);
 text-align: center;
}
.koushasan {
margin-bottom: 4rem;
}
.koushasan h2 {
margin-bottom: 4rem!important;
}
.koushasan ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.koushasan li {
width: 50%;
}
.koushasan h3 {
 font-size: var(--font-size-36);
 margin-bottom: 2rem;
}
.koushasan li p {
text-align: left;
margin-bottom: 1rem;
}
.koushasan li .banner {
width: 30%;
margin-bottom: 2rem;
}
.koushasan li dl {
padding: 0;
 font-size: var(--font-size-16);
 margin-bottom: 2rem;
}
.koushasan li dt {
}
.koushasan li dd .tel {
display: block;
 font-size: var(--font-size-36);
 font-weight: 600;
}
.koushasan li .note {
 font-size: var(--font-size-14);
}
.koushasan li .photo {
width: 100%;
} 

@media screen and (min-width:769px)and (max-width:1024px){
}


@media screen and (min-width:521px) and (max-width:768px) {
}

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

.list ul li {
width: 48%;
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);
}
.list ul li p.text {
font-size: 14px;
}
.koushasan ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column-reverse;
}
.koushasan li {
width: 100%;
margin-bottom: 2rem;
}

}