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

/*
=============================================================
共通
=============================================================
*/
.inner {
width: 95%;
margin-left: auto;
}
section {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section h3 {
width: 15%;
font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
font-weight: 600;
color: #fff;
}
section h3 span {
display: block;
margin-top: 10px;
font-family: "Kaisei Decol", serif;
font-weight: 400;
 font-style: normal;
font-size: clamp(2.625rem, 1.761rem + 4.32vw, 5rem)/*80px-42px*/
}
section .box {
width: 80%;
padding-right: 5%;
}
section .box .ttl {
font-weight: 600;
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
align-items: center;
color: #fff;
}
section .box .ttl span {
margin-left: 50px;
}
section .box dl {
margin-bottom: 50px;
}
section .box dt {
margin-bottom: 20px;
}
section .box dd.f18 {
font-weight: 600;
}
section .box dd {
margin-bottom: 16px;
line-height: 1.8em;
}
section .box ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0;
}
section .box .col2 li {
width: 48%;
margin-bottom: 1rem;
}
section .box .col3 li {
width: 31%;
}
.btn {
display: flex;
border: solid 1px #ccc;
border-radius: 40px;;
padding: 16px 0;
text-align: center;
width: 20%;
margin: 40px auto 0;
 justify-content: center;
font-size:  clamp(0.688rem, 0.597rem + 0.45vw, 0.938rem);
 letter-spacing: 0.2em;
color: #fff;
text-decoration: none;
}
.btn:hover {
background-color: #edeae6;
}

.ranking {
background-color: #edeae6;
padding: 3% 4% 4%;
}
.ranking p {
text-align: center;
margin-bottom: 1em;
font-weight: bold;
color: #333;
}
.ranking table {
background-color: #fff;
width: 100%;
font-size: clamp(0.688rem, 0.619rem + 0.34vw, 0.875rem);
font-weight: normal;
}
.ranking table th,
.ranking table td {
padding: 1em;
text-align: center;
border: solid 1px #ccc;
}
.ranking table th,
.ranking table td.rank {
background-color: #919191;
color: #fff;
width: 10%;
}
.ranking table td {
color: #333;
}


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

section {
width: 100%;
display: block;
}
section h3 {
width: 100%;
margin: 0 auto 30px;
text-align: center;
}
section h3 span {
margin-top: 0px;
}
section .box {
width: 100%;
}
section .box .ttl {
font-weight: 600;
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
color: #fff;
}
section .box .ttl span {
width: 100%;
margin-left: 0;
text-align: center;
}
ul.col3 {
display: block!important;
padding-left: 0;
}
ul.col3 li {
width: 100%!important;
}
section .box dl {
margin-bottom: 50px;
}
section .box dt {
margin-bottom: 20px;
}
section .box dd.f18 {
font-weight: 600;
}
section .box dd {
margin-bottom: 10px!important;
line-height: 1.8em;
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
}
.btn {
width: 50%;
color: #fff;
text-decoration: none;
}
section .box .col2 li {
width: 100%;
margin-bottom: 1rem;
}

}