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

#event , #project , #media {
    position: relative;
    padding-bottom: 80px;
}

#event h3.h3 , #project h3.h3 , #media h3.h3 {
    max-width: 1200px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    font-size: 2rem;
    font-weight: 500;
    color: #00344f;
}

#event .txt , #project .txt , #media .txt {
    max-width: 1200px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: column;
    gap: 30px;
    color: #55636b;
}

#event .txt > div , #project .txt > div , #media .txt > div {
    width: 100%;
}

#event .txt > a , #project .txt > a , #media .txt > a {
    margin-left: auto;
    margin-right: auto;
}


#event .news , #project .news , #media .news {
    max-width: 1200px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: column;
}

#event .news > * , #project .news > * , #media .news > * {
    display: flex;
    align-items: start;
    flex-flow: row;
    gap: 10px;
    padding: 27px 0;
    border-bottom: solid 1px #d8d8d8;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
    width: 100%;
}

#event .news > * > span:first-child {
    width: 140px;
    min-width: 140px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #008bd5;
    color: #ffffff;
    border-radius: 20px;
    font-size: 1.2rem;
    text-align: center;
}

#media .news > * > span:first-child {
    font-size: 1.4rem;
    color: #55636b;
    width: 11em;
}

#event .news > * > span:last-child , #project .news > * > span:last-child , #media .news > * > span:last-child {
    display: flex;
    flex-flow: column;
    width: 100%;
    padding-right: 70px;
}

#event .news > * > span:last-child > span:first-child , #media .news > * > span:last-child > span:first-child {
    font-size: 1.4rem;
    color: #55636b;
}

#event .news > * > span:last-child > span:last-child , #media .news > * > span:last-child > span:last-child {
    font-size: 1.6rem;
    color: #008bd5;
}

#event .news > * > span:last-child > span:last-child::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: #ffffff;
    -webkit-mask: url(/images/skjyaji01.svg) 0% / 100% no-repeat;
    mask: url(/images/skjyaji01.svg) 0% / 100% no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    z-index: 1;
}
#event .news > * > span:last-child > span:last-child::after {
    content: "";
    display: block;
    background-color: #008bd5;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#event .news > div > span:last-child > span:last-child::after {
    background-color: #d8d8d8;
}





#project .news > * > span::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: #ffffff;
    -webkit-mask: url(/images/skjyaji01.svg) 0% / 100% no-repeat;
    mask: url(/images/skjyaji01.svg) 0% / 100% no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    z-index: 1;
}
#project .news > * > span::after {
    content: "";
    display: block;
    background-color: #008bd5;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#project .news > div > span::after {
    background-color: #d8d8d8;
}





#media .news > * > span:last-child {
    position: relative;
}

#media .news > * > span:last-child::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: #ffffff;
    -webkit-mask: url(/images/skjyaji01.svg) 0% / 100% no-repeat;
    mask: url(/images/skjyaji01.svg) 0% / 100% no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    z-index: 1;
}
#media .news > * > span:last-child::after {
    content: "";
    display: block;
    background-color: #008bd5;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#media .news > div > span:last-child::after {
    background-color: #d8d8d8;
}

#serialization .block > div > .waku > div:first-of-type {
    margin-top: 0;
}


.block > div > .waku > div > dl dd {
    padding-top: 18px;
}

.block > div > .waku > div > dl dd a {
    margin-left: auto;
    margin-right: auto;
}



/***********************************************************/
@media only screen and (min-width:768px) {

#event h3.h3 , #project h3.h3 , #media h3.h3 {
    font-size: 2.6rem;
}

#event .txt , #project .txt , #media .txt {
    flex-flow: row;
    gap: 50px;
    margin-top: 20px;
}

#event .txt > a , #project .txt > a , #media .txt > a {
    margin-left: 0;
    margin-right: auto;
}

#event .news > * , #project .news > * , #media .news > * {
    flex-flow: row;
    gap: 50px;
    padding: 30px 0;
}

#event .news > * > span:first-child {
    font-size: 1.4rem;
    width: 120px;
    min-width: 120px;
}

#event .news > * > span:last-child , #project .news > * > span:last-child , #media .news > * > span:last-child {
    position: relative;
}

#event .news > * > span:last-child > span:last-child , #media .news > * > span:last-child > span:last-child {
    font-size: 1.8rem;
}

.block > div > .waku > div > dl dd {
    padding-top: 0;
}

.block > div > .waku > div > dl dd a {
    margin-left: 0;
    margin-right: auto;
}


}




/***********************************************************/
@media only screen and (min-width:1200px) {




}