@charset "UTF-8";
/* CSS Document */
#contents h2 {
  font-size: var(--font-size-36);
  font-weight: 700;
  text-align: center;
  margin-bottom: 4rem;
}
 #contents ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 4rem;
gap: 0 2rem;
}
.upper li:first-child {
width: 40%;
margin-bottom: 2rem;
}
.upper li:last-child {
width: 55%;
margin-bottom: 2rem;
padding-top: 2rem;
}
.upper li p {
font-size: var(--font-size-24);
font-weight: 600;
text-align: left;
line-height: 2.4em;
} 
.upper li img {
width: 100%;
height: 100%;
object-fit: cover;
}
.use li {
width: 48%;
border: solid 2px #2d77ba;
border-radius: 20px;
padding: 2rem 0;
}
.use li .title {
text-align: center;
color: #fff;
font-size: var(--font-size-32);
font-weight: 600;
padding: 1rem 0;
background: #2d77ba;
margin-bottom: 1rem;
width: 100%;
}
.use li .title span {
display: block;
font-size: var(--font-size-18);
font-weight: 400;
line-height: 1;
}
.use li dl {
text-align: center;
display: flex;
align-items: center;
width: 70%;
margin: 0 auto 1rem;
}
.use li dt {
width: 18%;
font-size: var(--font-size-24);
font-weight: 600;
}
.use li dt span {
display: block;
font-size: var(--font-size-32);
font-weight: 600;
}
.use li dd {
width: 80%;
font-size: var(--font-size-24);
font-weight: 600;
}
.use li dd span {
font-size: var(--font-size-72);
font-weight: 600;
color: #e83926;
}
.use li .box {
width: 90%;
margin: 0 auto 2rem;
background: #eee;
padding: 1rem;
}
.use li .box dl {
width: 80%;
}
.use li .box p {
text-align: center;
font-size: var(--font-size-24);
font-weight: 600;
}
.use li p.note {
font-size: var(--font-size-24);
font-weight: 600;
width: 80%;
margin: 0 auto 2rem;
}
.use li p.note2 {
font-size: var(--font-size-24);
font-weight: 600;
text-align: center;
}
.use li .btn {
width: 60%;
margin: 0 auto;
margin-bottom: 2rem;
}
.use li .btn a {
font-size: var(--font-size-24);
font-weight: 600;
color: #fff;
text-align: center;
display: block;
width: 100%;
background: #2d77ba;
padding: 1rem;
box-shadow: 10px 10px 0px 0px rgba(141,181,211, 1);
}
.mid li:first-child {
width: 55%;
margin-bottom: 2rem;
}
.mid li:last-child {
width: 42%;
margin-bottom: 2rem;
padding-top: 2rem;
}
.mid li dt {
font-size: var(--font-size-32);
font-weight: 600;
margin-bottom: 1rem;
} 
.mid li dd {
font-size: var(--font-size-24);
font-weight: 200;
line-height: 1.8em;
}
.mid li img {
width: 100%;
height: auto;
object-fit: cover;
}
.photo li {
width: 48%;
margin-bottom: 2rem;
}

@media screen and (min-width:769px)and (max-width:1024px){
#contents ul {
gap: 0 1rem;
}
}


@media screen and (min-width:521px) and (max-width:768px) {
#contents ul {
gap: 0 1rem;
}
}

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

.upper li:first-child {
width: 100%;
}
.upper li:last-child {
width: 100%;
}
.use li {
width: 100%;
margin-bottom: 2rem;
}
.mid li:first-child {
width: 100%;
}
.mid li:last-child {
width: 100%;
}
.photo li {
width: 45%;
}

}