a {
    color: inherit;
}
.page-nav {
    --color: #05439a;
    background-color: #f2f2f2;
}

.page-nav__content {
    max-width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-nav .nav-list {
    display: flex;
    gap: clamp(12px, calc((46 / 1920) * 100vw), 46px);
    flex-wrap: wrap;
}

.page-nav .nav-item {
    color: #333;
    line-height: 1;
    padding: clamp(12px, calc((32 / 1920) * 100vw), 32px);
    position: relative;
}

.page-nav .nav-item .nav-item__header {
    font-size: clamp(16px, calc((20 / 1920) * 100vw), 20px);
    color: inherit;
    font-weight: bold;
    border-bottom: 1px solid transparent;
    transition: border .3s linear, color .3s linear;
    cursor: pointer;
}

.page-nav .nav-item.active .nav-item__header,
.page-nav .nav-item:hover>.nav-item__header {
    color: var(--color);
    border-color: var(--color);
}

.page-nav .nav-item__children {
    width: clamp(120px, calc((300 / 1920) * 100vw), 300px);
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 0 10px 2px #eee;
    border-radius: 4px;
    opacity: 0;
    z-index: -1;
    transform: translateY(20%);
    transition: all .5s linear;
}

.page-nav .nav-item:hover .nav-item__children {
    transform: translateY(0);
    opacity: 1;
    z-index: 1;
}

.page-nav .nav-item__children .nav-item__children-item {
    padding: clamp(8px, calc((12 / 1920) * 100vw), 12px) clamp(12px, calc((20 / 1920) * 100vw), 20px);
}

.page-nav .nav-item__children-item .inner-text {
    color: inherit;
    font-size: clamp(14px, calc((14 / 1920) * 100vw), 16px);
    transition: color .3s linear;
    display: block;
}

.page-nav .nav-item__children-item:hover .inner-text {
    color: var(--color);
}

.layer {
    --color: #333;
    --layer-spacing: clamp(24px, calc((80 / 1920) * 100vw), 80px) 0 clamp(24px, calc((150 / 1920) * 100vw), 150px);
    --layer-title: clamp(20px, calc((40 / 1920) * 100vw), 40px);
    --layer-title-color: #000000;
    color: var(--color);
    padding: var(--layer-spacing);
}

.layer.hide {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.layer-header__title {
    color: var(--layer-title-color);
    font-size: var(--layer-title);
    line-height: 1;
}

.layer-main {
    padding-top: clamp(20px, calc((40 / 1920) * 100vw), 40px);
}

.wrap-box {
    position: relative;
}

.wrap {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
}

.wrap.active {
    position: relative;
    opacity: 1;
    z-index: 1;
}

.tag-box {
    --size: clamp(14px, calc((20 / 1920) * 100vw), 20px);
    --hover-color: #fff;
    --hover-bg-color: #05439a;
    --gap: clamp(8px, calc((10 / 1920) * 100vw), 12px);
    font-size: var(--size);
    line-height: 1;
    margin-top: clamp(12px, calc((46 / 1920) * 100vw), 46px);
}

.tag-box .tag-box__content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.tag-box .tag-item {
    --tb: clamp(6px, calc((10 / 1920) * 100vw), 10px);
    --lr: clamp(16px, calc((30 / 1920) * 100vw), 30px);
    border: 1px solid #ccc;
    border-radius: 25px;
    padding: var(--tb) var(--lr);
    transition: background .3s linear, color .3s linear, border .3s linear;
    cursor: pointer;
}

.tag-box .tag-item.active,
.tag-box .tag-item:not(.active):hover {
    color: var(--hover-color);
    background: var(--hover-bg-color);
    border-color: transparent;
}

.table-box {
    --size: clamp(14px, calc((20 / 1920) * 100vw), 18px);
    overflow: auto;
}

.table-box .table {
    font-size: var(--size);
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--wp--preset--spacing--40);
    min-width: 960px;
}

.table-box tr,
.table-box td {
    border-color: transparent;
}

.table-box tbody tr:nth-of-type(odd) {
    background: #f2f2f2;
}

.table-box tbody tr:nth-of-type(even) {
    background: #ffffff;
}

.table-box tbody tr td {
    padding: 0 clamp(12px, calc((50 / 1920) * 100vw), 50px);
}
.table-box tbody tr .date {
    width: max-content;
}
.table-box tbody tr .download {
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.table-box tbody tr .download .icon-download {
    --w: clamp(24px, calc((36 / 1920) * 100vw), 36px);
    width: var(--w);
    height: var(--w);
    margin-right: var(--wp--preset--spacing--20);
}

.table-box tbody tr .download .inner-text {
    color: inherit;
    line-height: 1.2;
    border-bottom: 1px solid transparent;
    transition: border .3s linear;
}

.table-box tbody tr .download:hover .inner-text {
    border-bottom-color: var(--color);
}

.section-box {
    --font-size: clamp(14px, calc((20 / 1920) * 100vw), 20px);
    font-size: var(--font-size);
    color: var(--color);
}

.section-box p {
    line-height: 1.5;
}

.section-box p+p {
    margin-top: clamp(20px, calc((40 / 1920) * 100vw), 40px);
}

.director-box {
    margin-top: clamp(20px, calc((60 / 1920) * 100vw), 60px);
}

.director-box .director-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, calc((24 / 1920) * 100vw), 24px);
}

.director-box .director-item {
    --tb: clamp(12px, calc((32 / 1920) * 100vw), 32px);
    --lr: clamp(16px, calc((32 / 1920) * 100vw), 32px);
    color: var(--color);
    font-size: clamp(14px, calc((20 / 1920) * 100vw), 20px);
    padding: var(--tb) var(--lr);
    background-color: #f2f2f2;
}

.director-box .director-item__content {
    background: url(../images/director-bg.png) no-repeat right bottom / 60%;
}

.director-box .director-item .director-name {
    font-size: clamp(14px, calc((20 / 1920) * 100vw), 20px);
}

.director-box .director-item .director-desc {
    color: #999999;
    padding-top: clamp(12px, calc((24 / 1920) * 100vw), 24px);
}

.map-box {
    position: relative;
}

.map-box .map-box__bg {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: right center;
}

.map-box .map-box__content {
    --tb: clamp(20px, calc((80 / 1920) * 100vw), 80px);
    --lr: clamp(12px, calc((40 / 1920) * 100vw), 40px);
    width: 100%;
    height: 100%;
    background: url(../images/map-bg.png) no-repeat left top / auto 100%;
    padding: var(--tb) var(--lr);
    position: absolute;
    top: 0;
    left: 0;
}

.map-box .map-box__wrap {
    --t: clamp(20px, calc((80 / 1920) * 100vw), 80px);
    --lr: clamp(12px, calc((30 / 1920) * 100vw), 30px);
    --b: clamp(12px, calc((30 / 1920) * 100vw), 30px);
    max-width: 100%;
    width: max-content;
    height: 100%;
    background-color: rgba(255, 255, 255, .8);
    padding: var(--t) var(--lr) var(--b);
}

.map-box .map-box__header {
    padding-bottom: clamp(12px, calc((30 / 1920) * 100vw), 30px);
    border-bottom: 1px solid rgba(2, 27, 33, .15);
}

.map-box .map-box__title {
    font-size: clamp(16px, calc((24 / 1920) * 100vw), 24px);
    font-weight: bold;
    color: #05439a;
}

.map-box .map-box__main {
    font-size: clamp(14px, calc((18 / 1920) * 100vw), 18px);
    padding-top: clamp(12px, calc((30 / 1920) * 100vw), 30px);

}

.map-box .map-box__main .info {
    display: flex;
}

.map-box .map-box__main li+li {
    margin-top: clamp(12px, calc((20 / 1920) * 100vw), 20px);
}

.map-box .map-box__main .label {
    flex: 0 0 auto;
    margin-right: 8px;
}

.map-box .map-box__main .label img {
    width: clamp(12px, calc((30 / 1920) * 100vw), 30px);
    margin-right: clamp(6px, calc((12 / 1920) * 100vw), 12px);
    ;
}

.map-box .map-box__main .value {
    flex: 1 0 0;
}

.kline-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, calc((24 / 1920) * 100vw), 24px);
}

.kline-box .kline-title {
    font-size: clamp(14px, calc((24 / 1920) * 100vw), 16px);
}

@media screen and (max-width: 768px) {
    .director-box .director-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .kline-box {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 550px) {
    .director-box .director-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .map-box .map-box__content {
        height: auto;
        background: url(../images/map-bg.png) no-repeat left top / cover;
        position: relative;
    }

    .map-box .map-box__wrap {
        width: 100%;
        height: auto;
    }
}