.biz-udgothic-regular {
  font-family: "BIZ UDGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.biz-udgothic-bold {
  font-family: 'BIZ UDGothic', sans-serif;
  font-weight: 700;
  font-style: normal;
}


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body{
    background-color: rgba(119, 135, 160, 0.274);
    font-family: "BIZ UDGothic", sans-serif;
}

header {
    min-height: clamp(72px, 12vw, 120px);
    height: 200px;
    margin: 0;
    padding: 0;
    width: 100%;
}

header h1 {
    margin: 0;
    text-align: center;
    -webkit-text-stroke: 2px black;
    paint-order: stroke;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 30pt;
}

nav {
    width: 100%;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

nav li {
    flex: 1;
    text-align: center;
    background-color: #334;
    height: 50px;
    border-right: 2px solid white;
}

nav li:last-child a{
    border-right: none;
}

nav li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 0; 
}

#top-header{
    background-image: url(pic/header/dohoku.JPG);
    background-position: center;
    background-size: cover;
}

#chuo-header{
    background-image: url(pic/header/s200k4261.JPG);
    background-position: center;
    background-size: cover;
}

.main-frame{
    min-height: calc(100vh - 250px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    gap: 20px;
    margin:0;
    width:100%;
}

.tyuui{
    width:80%;
}

.content-row{
    width: 80%;
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin: 25px;
}

.tyuui p{
    text-align: center;
    font-size: 20pt;
}

.tyuui p span{
    background-color: yellow;
    color:red;
    font-weight: bold;
}

.main-contents{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 5px 0 0 5px;
}

.main-contents h3{
    text-align: center;
    font-size: 25pt;
    padding: 30px;
}

#bestshot{
    max-width: 100%;
    width: 50%;
    border-radius: 5px;
}

#bestshot-bun,
.bestshot-bun{
    width:50%;
    text-align: left;
}

#bestshot-bun table,
#bestshot-bun th,
#bestshot-bun td,
.bestshot-bun table,
.bestshot-bun th,
.bestshot-bun td {
    border: 1px solid #666;
    border-collapse: collapse;
    padding: 6px 10px;
}

#bestshot-bun table,
.bestshot-bun table {
    width: 100%;
}

#car-gaiyou span{
    font-weight: bold;
}

#photo-caption{
    font-style: italic;
}

.right-contents{
    width: 30%;
    background-color: white;
    padding: 20px;
    border-radius: 0 5px 5px 0;
}

.right-contents h4{
    font-size: 20pt;
}

.news-frame{
    width:95%;
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 20px auto;
    text-decoration: none;
    color: inherit;
    font-size: 14pt;
    background-color: rgba(109, 109, 116, 0.218);
    border-radius: 5px;
}

#news-title{
    font-weight: bold;
}

.news-frame img{
    width: 30%;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    border-radius: 5px 0 0 5px;
}

.news-caption{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
}

.news-caption p,
.news-caption h4{
    margin: 0;
}

@media (max-width: 900px) {
    .content-row {
        flex-direction: column;
    }
}