@charset "utf-8";

header{
    margin-bottom: 3%;
    display: block;
}
header section{
    width: 86%;
    margin-bottom: 2%;
}
header section main h2{
    margin-right: 0;
}
header section h3{
    width: 100%;
    height: 100%;
    margin-top: -3%;
    /* aspect-ratio: initial; */
    color: #ffffff;
    letter-spacing: 1.8em;
    position: relative;
}
header section h3 img {
    width: 100%;
    height: 100%;
    display: block;
}
header section h3 span{
    z-index:5;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 37px;
    transform: translate(-45%,-50%);
    mix-blend-mode: hard-light;
}
#content section ul{
    width: 100%;
    max-width: 690px;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: right;
    margin: 0 0 8% 0;
    color: #02219e;
    box-sizing: border-box;
}
#content section ul li:first-child{
    width: 100%;
    margin-left: -20%;
}
#content section ul li h2{
    font-size: 12px;
    color: #02219e;
}
#content section ul h2::after{
    content: "";
    display: inline-block;
    height: 1px;
    width: 50px;
    background-color: #02219e;
    margin-left: 3%;
}
#content section ul h4{
    color: #02219e;
    font-size: 13px;
    font-weight: normal;
    /* width: 20%; */
    margin-left: auto;
}
#content section ul li p{
    font-family: "Vujahday Script", cursive;
    font-weight: 400;
    font-style: normal;
    color: #02219e;
    font-size: 20px;
    margin-top: 2%;
    padding: 3% 0;
}
#content section ul li:nth-child(3n){
    color: #02219e;
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    align-self: center;
    text-align: right;
    width: 70%;
}
#content section ul ul li.wide{
    width: 20.5%;
    max-width: 105px;
}

@media screen and (max-width: 880px) {
header section h3{
    margin-top: -2%
}
    header section h3 span{
        font-size: 2rem;
    }
}

@media screen and (max-width: 680px) {
header, header section{
    margin-bottom: 5%;
}
    header section h3 span{
        font-size: 1.7rem;
        letter-spacing: 1.6rem;
    }
header ul{
}
#content section ul li:first-child{
    min-width: 58px;
}
#content section ul li h2{
    font-size: 9px;
}
#content section ul h2::after{
    width: 60%;
}
#content section ul li p{
    font-size: 14px;
}
#content section ul li:nth-child(2n){
    width: initial;
}
#content section ul li{
    font-size: 10px;
}
#content section ul li:nth-child(3n){
    padding: 0;
    border: none;
}
}

@media screen and (max-width: 480px) {
    header section h3 span{
        font-size: 1.3rem;
        letter-spacing: 1.3rem;
    }
}




#content section{
    max-width: 690px;
    width: 100%;
    margin: 0 auto 11%;
}
#content section p{
    font-family: "Outfit", "Noto Sans JP", sans-serif;
    font-size: 13px;
    color: #02219e;
    max-width: 690px;
    width: 100%;
    margin: 0 auto 5%;
}
#content section img{
    width: 100%;
    margin: 0 auto;
    display: block;
}
#content section figure{
    width: 100%;
    margin: 0 0 5% 0;
}
#content section figure img{
    margin-bottom: 3%;
}
#content section figure p{
    font-size: 12px;
}
#content section .ssize{
    width: 50%;
    margin: 0 auto;
}
#content section .msize{
    width: 80%;
    margin: 0 auto;
}

#content section p.more a{
    color: #02219e;
    background-color: unset;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: .08em;
    position: relative;
    display: inline-block;
    padding: 0;
    padding-right: 45px;
    min-width: initial;
    margin: 0 0 5% 0;
    width: auto;
}
#content section p.more a::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    width: 20px;
    height: 1px;
    background: #02219e;
    transition: .3s;
}
#content section p.more a::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    width: 4px;
    height: 4px;
    border-left: 1px solid #02219e;
    border-bottom: 1px solid #02219e;
    transform: rotate(-135deg);
    transition: .3s;
}
#content section p.more a:hover::before{
    right: 10px;
    width: 30px;
}
#content section p.more a:hover::after{
    right: 10px;
}
#content section p.more a:hover{
    opacity: .3;
    transition: .8s;
}

#content section p a{
    display: block;
    color: #ffffff;
    background-color: #022ccd;
    text-decoration: none;
    padding: 2%;
    width: 15%;
    min-width: 130px;
    text-align: center;
    margin: 10% auto 0;
}
#content section p a:hover{
    opacity: .4;
    transition: 1s;
}

@media screen and (max-width: 1080px) {
#content section ul li:first-child {
    width: 90%;
    margin-left: -10%;
}
}

@media screen and (max-width: 880px) {
    
#content section{
    width: 70%;
    margin: 0 auto 13%;
}
#content section p a{
    padding: 4% 2%;
}
}

@media screen and (max-width: 480px) {
    
#content section{
    margin-bottom: 12%;
}
#content section ul li:first-child {
    width: 84%;
}
#content section ul h4{
    font-size: 10px;
}
#content section p{
    font-size: 10px;
    margin-bottom: 4%;
}
#content section p.more a{
    font-size: 10px;
}
#content section p a{
    font-size: 10px;
    padding: 5% 0;
    margin-top: 12%;
}
}
@media screen and (max-width: 390px) {
#content section ul{
}
}


.Pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 12%;
  max-width: 300px;
  width: 100%;
}
.Pagination li{
    /* width: 20%; */
}
.Pagination-Item-Link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 30px;
  height: 30px;
  background: #fff;
  font-size: 12px;
  color: #02219e;
  font-weight: normal;
  transition: all 0.15s linear;
  text-decoration: none;
  position: relative;
}
.Pagination-Item-Link-Icon {
  width: 20px;
}
.Pagination-Item-Link.isActive {
  pointer-events: none;
  color: #ffffff;
  background-color: #022ccd;
}
.Pagination-Item-Link:not(.isActive):hover {
  opacity: 0.5;
  transition: 0.5s;
}
.Pagination-Item-Link::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #02219e;
  bottom: -8px;               /*アンダーラインがaタグの下端から現れる*/
  transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
  transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
  transition: transform .3s; /*変形の時間*/
}
.Pagination-Item-Link:hover::after {
  transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
  transform-origin: left top;
}

@media (prefers-color-scheme: dark) {
    header ul li h2, header ul li p, header ul li:nth-child(3n){
        color: #ffffff;
    }
    header ul h2::after{
        background-color: #ffffff;
    }
    #content section ul li p, #content article .more a{
        color: #ffffff;
    }
    #content section p.more a::before{
        background: #ffffff;
    }
    #content section p.more a::after{
        border-left: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
    }
}





@media (prefers-color-scheme: dark) {
    #content section ul h4, #content section p{
        color: #ffffff;
    }
}