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

/*.history .maintitle p.othertxt{ text-align: center; }
@media screen and (max-width: 600px){ .history .maintitle p.othertxt{ text-align: justify; } }*/

.history-wrapper{ padding: 80px 0;}
.history-wrapper ul {
    display: flex;
    flex-direction: column;
    grid-row-gap: 20px;
    margin-bottom: 60px;
}
.history-wrapper ul li.title{ font-size: 70px; text-align: center; line-height: 1; font-family: "Roboto", sans-serif; }
@media only screen and (max-width : 600px){ .history-wrapper ul li.title{ font-size: 50px;} }
.history-wrapper ul li.title span{ font-size: 40px; font-weight: 700; }
.history-wrapper ul li.subtitle{ font-size: 22px; font-weight: 700; text-align: justify; }
@media only screen and (max-width : 600px){ .history-wrapper ul li.subtitle{ font-size: 20px;} }
.history-wrapper ul li.subtitle br.sp_in{ display: none !important;}
.history-wrapper ul li.photo {
    display: flex;
    flex-direction: column;
    grid-row-gap: 20px;
}
.history-wrapper ul li.photo span{ font-size: 15px; }
@media only screen and (max-width : 600px){ .history-wrapper ul li.photo span{ font-size: 13px; } }
.history-wrapper ul li.txt{ font-size: 17px; }
@media only screen and (max-width : 600px){ .history-wrapper ul li.txt{ font-size: 15px; } }
.history-wrapper ul li.txt small{ font-size: 80%; }

.history .split-left-inner{ background: none; }
.history .nav-list{
    position: relative;
    z-index: 10;
}
.history .nav-list ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    grid-column-gap: 5%;
    grid-row-gap: 30px;
    padding: 0;
    margin: 0 auto;
    flex-wrap: wrap;
    width: 60%;
}
@media screen and (max-width: 1680px){ .history .nav-list ul { width: 70%; grid-row-gap: 20px; } }
@media screen and (max-width: 1440px){ .history .nav-list ul { width: 65%; grid-row-gap: 10px; } }
@media screen and (max-width: 1024px){ .history .nav-list ul { width: 86%; } }
@media screen and (max-width: 600px){ .history .nav-list ul { width: 100%; grid-column-gap: 2%; grid-row-gap: 10px; } }
.history .nav-list ul li {
    text-align: left;
    width: 30%;
}
@media screen and (max-width: 600px){ .history .nav-list ul li { width: 32%; } }
.history .nav-list ul li a {
    background-color: #fff;
    border: solid 1px #9E9E9E;
    border-radius: 32px;
    text-decoration: none;
    color: #9E9E9E;
    padding: 5px 15px;
    display: block;
    text-align: center;
    line-height: 1.6;
    font-size: 16px !important;
}
@media screen and (max-width: 1440px){ .history .nav-list ul li a { font-size: 15px !important;} }
@media screen and (max-width: 600px){ .history .nav-list ul li a { font-size: 13px !important;} }

.history .nav-list ul li a.active{
    border: solid 1px #333;
    color: #333;
    font-weight: 700;
}
.history .split-left-inner ul li:nth-of-type(2){ color: #333; }
@media screen and (max-width: 1024px){ .nav-list__active{ position: fixed !important; top: 60px; left: 0; right: 0; margin: 0 auto; width: 90%; z-index: 10; } }

@media screen and (max-width: 1440px){
    .history .maintitle {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 1440px){
    .history .maintitle p.photo {
        width: 55%;
    }
}
@media screen and (max-width: 600px){
    .history .maintitle p.photo {
        width: 100%;
    }
}
/*
.history .maintitle {
    display: flex;
    flex-direction: column;
    grid-row-gap: 20px;
    margin-bottom: 40px;
    color: #333;
    z-index: 100;
}
@media screen and (max-width: 1440px){ .history .maintitle { grid-row-gap: 15px; margin-bottom: 30px; } }
@media screen and (max-width: 768px){ .history .maintitle {  } }
@media screen and (max-width: 600px){ .history .maintitle { margin-bottom: 20px; } }
.history .maintitle p:nth-of-type(1){ width: 80%; margin: 0 auto; }
@media screen and (min-width: 1681px){ .history .maintitle p:nth-of-type(1){ width: 65%; } }
@media screen and (max-width: 1680px){ .history .maintitle p:nth-of-type(1){ width: 65%; } }
@media screen and (max-width: 1024px){ .history .maintitle p:nth-of-type(1){ width: 60%; } }
@media screen and (max-width: 600px){ .history .maintitle p:nth-of-type(1){ width: 100%; } }
.history .maintitle p:nth-of-type(2){ text-align: center; font-size: 26px; font-weight: 700; line-height: 1.6; }
@media screen and (max-width: 1440px){ .history .maintitle p:nth-of-type(2){ font-size: 22px; } }
@media screen and (max-width: 600px){ .history .maintitle p:nth-of-type(2){ font-size: 20px;} }
.history .maintitle p:nth-of-type(3){ text-align: center; }
@media screen and (max-width: 600px){ .history .maintitle p:nth-of-type(3){ text-align:justify; } }*/