main > header {
    background:url(../up_load_files/page_header/aboutus.jpg) center center / cover no-repeat;
}

.network p {
    max-width:800px;
    margin:0 auto;
}

.column {
    border:solid 2px #ccc;
    border-radius:8px;
    margin:0 auto 40px auto;
    padding:20px;
    max-width:600px;
}
.column .univ img {
    margin:20px;
}
.column h3 {
    text-align:center;
    color:#0b76b8;
}

.photo {
    background:url(../_img/aboutus/cherry.png) right top no-repeat;
}
.photo h1 {
    font-weight:bold;
    color:#000;
    padding-bottom:20px;
    margin:0;
}
.photo h2 {
    text-align:center;
    color:#0b76b8;
    padding-bottom:40px;
    margin:0;
}
.photo .flex p {
    text-align:center;
}
.photo .flex em {
    display:block;
    background:#0B76B8;
    color:#fff;
    padding:5px;
    border-radius:4px 4px 0 0;
    margin-bottom:5px;
    text-align:center;
}

.coordinate {
    background:#eee;
}
.coordinate h1 {
    font-weight:bold;
    color:#000;
    padding-bottom:20px;
    margin:0;
}
.coordinate h2 {
    text-align:center;
    color:#0b76b8;
    padding-bottom:40px;
    margin:0;
}
.coordinate .flex div {
    padding-bottom:40px;
    text-align:center;
}
.coordinate p {
    margin:0 auto;
    max-width:167px;
}

.info {
    background:#50a1c9;
    padding-bottom:80px;
}
.info h1 {
    font-weight:bold;
    color:#000;
    padding-bottom:20px;
    margin:0;
}
.info h2 {
    text-align:center;
    color:#fff;
    padding-bottom:40px;
    margin:0;
}
.info p {
    background:#eee;
    padding:40px 20px;
}
.info p img {
    margin-bottom:20px;
}
.info p .button {
    background:#0b76b8;
    border:none !important;
    border-radius:0 !important;
    color:#fff;
    padding-top:10px;
    padding-bottom:10px;
    margin-right:15px;
    margin-left:15px;
}
.info p .button:first-of-type {
    margin-top:20px;
}

main .access {
    padding-bottom:40px;
}
main .access h2 span {
    display:block;
    font-size:0.7em;
    color:#666;
    padding-top:5px;
}
main .access .map iframe {
    height:300px;
}

main ul.links li a {
    width:100%;
    border:solid 1px #000;
    padding:20px;
    text-align:left;
}
main ul.links li a:hover {
    background:#0b76b8;
}
main ul.links li a:before {
    display:none;
}


/* 地図 */
.map {
    position:relative;
    height:fit-content;
    container-type: inline-size;
}
.map img {
    width:100%;
}
.map div {
    color:var(--color-yellow);
    font-size:1.2em;
    position:absolute;
    top:54%;
    left:24%;
    translate: -50% -50%;
}
.map span {
    font-size:3cqw;
    position:absolute;
    background:var(--color-blue);
    display:flex;
    align-items: center;
    justify-content: center;
    width:5cqw;
    height:5cqw;
    font-weight:bold;
    font-family: 'Bahnschrift Regular';
    aspect-ratio: 1;
    color:var(--color-white);
    border-radius: 100%;
    border:solid 2px var(--color-white);
    translate: -50% -50%;
}
.map span.sub {
    background:var(--color-blue);
}
.map span {
    top:var(--top);
    left:var(--left);
}

.map-container .g4 img {
    width:100%;
    max-width:300px;
}
.map-container img + p {
    font-weight:bold;
    margin-left:20px;
    margin-top:10px;
}
.map-container img + p i {
    color:var(--color-yellow);
    font-size:1.6em;
}
.map-container ol {
    counter-reset:count;
    list-style-type: none;
    margin-left:20px;
}
.map-container ol li {
    position: relative;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:10px;
    padding:5px 0;
    font-weight:bold;
}
.map-container ol li::before {
    display: flex;
    justify-content: center;
    align-items: center;
    counter-increment: count;
    content: counter(count);
    background: var(--color-red);
    color: var(--color-white);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: 'Bahnschrift Regular';
    font-size:1.2em;
}
.map-container ol li.sub::before {
    background: var(--color-blue);
}

.map-container .emphasis {
    margin-left:20px;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:10px;
}
.map-container .emphasis span {
    display:block;
    width:60px;
    height:2em;
    background:var(--color-red);
    border:solid 2px var(--color-lightgray);
    border-radius:10px;
}

.all-japan h3 {
    color:var(--color-red);
    font-size:2em;
    font-weight:bold;
    margin-top:20px;
}
.all-japan div {
    border:solid 5px var(--color-lightgray);
    padding:20px;
    flex-wrap: nowrap;
}
.all-japan div figure {
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap:20px;
}
.all-japan div figure img {
    width:auto;
    height:120px;
}
.all-japan div figure figcaption {
    font-size:1.8em;
    font-weight:bold;
    flex:1;
}


/** Media Query **/
@media only screen and (max-width : 900px) {
    main .access article ,
    main .access p {
        width:calc(50% - 40.01px) !important;
        word-wrap: break-word;
    }
    main .access table ,
    main .access tr ,
    main .access th ,
    main .access td {
        display:block;
        width:calc(100% - 40px);
        word-wrap: break-word;
    }
    main .access th {
        background:none;
        border:none;
        color:#0b76b8;
        padding:0 0 5px 0;
    }
    main .access td {
        padding:0 0 20px 0;
        border:none;
        word-wrap: break-word;
    }

    .all-japan div figure {
        flex-direction: column;
        justify-content: center;
        margin-inline:auto;
    }
}
@media only screen and (max-width : 720px) {
    .map-container {
        flex-direction: column;
    }
    .map-container > * {
        width:100%;
    }
    .map-container ol {
        display:grid;
        gap:5px 10px;
        grid-template-columns: repeat(3, 1fr);
        margin-left:0;
    }
    .map-container .emphasis {
        margin-left:0;
    }

    .all-japan div figure figcaption {
        font-size:1.2em;
    }
}
@media only screen and (max-width : 640px) {
    .map-container ol {
        grid-template-columns: repeat(2, 1fr);
    }

    .all-japan div {
        flex-direction: column;
        gap:20px;
    }

    .photo .flex .g4 {
        width:100% !important;
    }
    .coordinate p {
        width:100% !important;
    }
    .info p {
        width:100% !important;
        margin-bottom:20px;
    }
    main .access article ,
    main .access p {
        width:100% !important;
    }
    main .access article tr ,
    main .access article th ,
    main .access article td {
        width:100% !important;
    }
    main .access iframe {
        height:300px;
    }
    .links .g4 {
        width:100%;
    }
}