@charset "utf-8";

.backdrop-grad {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(rgb(239 235 221 / 0%), rgb(239 235 221 / 100%));
}

#pagetitle {
    background-image: url("../img/history/title-back-drop.webp");
    background-position: bottom center;
}

#pagetitle::before {
    display: none;
}

#pagetitle .txt {
    top: 72%;
    right: initial;
    left: 50%;
    height: initial;
    padding-top: 0;
    transform: translate(-50%, -50%);
}

#pagetitle .txt::before {
    display: block;
    width: 143px;
    aspect-ratio: 143/207;
    content: "";
    background-image: url("../img/history/ayumi-title.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

#pagetitle .txt .ttl {
    display: none;
}

/* --------------------------
 #sec-history
-------------------------- */
#sec-history {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#sec-history .history-wrap {
    position: relative;
}

#sec-history::before {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 150px;
    content: "";

    /* background: -webkit-linear-gradient(-90deg, transparent, #faf9f5); */
    background: linear-gradient(transparent, rgb(239 235 221 / 100%));
}

#sec-history .history-path {
    position: absolute;
    top: 0;
    left: 29vw;
    z-index: -1;
    display: block;
    width: 1px;
    height: calc(100% + clamp(6.75rem, 5.2496rem + 3.12vw, 9rem));
    background: #c8c7c4;
    transform: scaleY(0);
    transform-origin: top center;
}

#sec-history .history-item {
    /* display: flex;
  flex-wrap: wrap;
  align-items: flex-start; */
    opacity: 0;
    transform: translateY(10px);
}

#sec-history .k-1 .year-area {
    position: relative;
    width: 29vw;
}

#sec-history .k-1 .ymblock {
    position: relative;
    width: 136px;
    margin-left: auto;
}

#sec-history .year-area .dot {
    position: absolute;
    top: calc(100% - 4.5px);
    right: -4.5px;
    z-index: 1;
    display: block;
    width: 9px;
    height: 9px;
    background-color: #fff;
    border: 2px solid #6e9143;
    border-radius: 50%;
    transform: scale(0);
}

#sec-history .year-area .under-line {
    position: absolute;
    right: 0;
    bottom: -0.5px;
    display: block;
    width: 0;
    height: 1px;
    content: "";
    background-color: #6e9143;
    transition: all 0.4s ease-in-out 0.28s;
}

#sec-history .year-area .under-line.enter {
    width: 100%;
}

#sec-history .kind.k-1 {
    align-items: start;
}

#sec-history .k-1 .year-txt {
    line-height: 1.3;
    color: #6e9143;
}

#sec-history .k-1 .item-area {
    flex: 1;
    padding-left: 30px;
}

#sec-history .k-1 .item-area p {
    line-height: 1.5;
}

#sec-history .k-1 .item-area p a {
    color: #18803f;
}

#sec-history .k-1 .his-img a {
    position: relative;
    display: block;
}

#sec-history .k-1 .his-img .zoom {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: rgb(0 0 0 / 20%);
}

#sec-history .k-1 .his-img .zoom::after {
    display: block;
    width: 19px;
    height: 19px;
    content: "";
    background-image: url("../img/history/zoom.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

#sec-history .k-1 .item-area {
    margin-right: 10vw;
}

#sec-history .his-img .photo-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

#sec-history .his-img .photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#sec-history .k-2 .item-area {
    padding-top: 0.2em;
    padding-left: 20px;
}

#sec-history .k-2 .year-txt,
#sec-history .k-2 .item-area p {
    line-height: 1.5;
    color: #666;
}

#sec-history .k-2 {
    position: relative;
    width: 100%;
}

#sec-history .line {
    position: absolute;
    top: 0;
    left: calc(-29vw - 90vw);
    z-index: -1;
    display: block;
    width: 90vw;
    height: 100%;
    content: "";
    background-color: #eeebdd;
    opacity: 0;
    clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 100%, 0 100%);
    transition: all 0.4s ease-in-out 0.28s;
}

#sec-history .his-text:has(.comment) .line {
    height: calc(100% - 10px);
}

#sec-history .his-img:has(.photo-wrap) ~ .his-text .line {
    top: 26px;
    height: calc(100% - 10px - 52px);
}

#sec-history .line.enter {
    left: -29vw;
    opacity: 1;
}

#sec-history .k-2 .his-text {
    position: relative;
    z-index: 1;
    flex: 1;
    align-items: start;
    padding-left: 30px;
    margin-right: 10vw;
}

#sec-history .k-2 .his-img {
    width: 29vw;
}

#sec-history .k-2 .year-area {
    padding-left: 5px;
}

.fancybox-caption__body {
    text-align: center;
}

.comment {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% + 170px - 16px);
    min-height: 35px;
    margin-left: -170px;
}

.comment p {
    padding: 5px 2em;
    line-height: 1.5;
    color: #fff;
    text-align: center;
}

.comment::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #826c35;
    opacity: 1;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%);
}

.sbubble {
    position: relative;
    z-index: 3;
    flex: 1;
}

.sbubble .position {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 3;
    display: block;
    width: 100%;
}

#sec-history .his-img .photo-wrap.photo2 {
    max-width: 660px;
}

#sec-history .his-img .photo-wrap.photo3 {
    max-width: 600px;
}

#sec-history .item-area .his-img {
    position: relative;
    display: inline-block;
}

#sec-history .item-area .his-img .sbubble {
    display: contents;
}

#sec-history .k-1 .item-area .link {
    padding-right: 26px;
}

#sec-history .k-1 .item-area .link a {
    position: relative;
    color: #024503;
    text-decoration: underline !important;
}

#sec-history .k-1 .item-area .link a:hover {
    text-decoration: none !important;
}

#sec-history .k-1 .item-area .link a::after {
    position: absolute;
    top: 50%;
    right: -26px;
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    background-image: url("../img/history/arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%);
}

#sec-history .txt-area .year-area {
    display: flex;
    align-items: center;
}

/* area-196200 */
#area-196200 .item-area {
    gap: 20px;
}

#area-196200 .his-img {
    margin-top: -15px;
}

#area-196200 .his-img .photo-wrap {
    width: 110px;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

/* area-1964 */
#area-1964 .his-img .photo {
    max-width: 240px;
    margin-right: 30px;
    margin-left: auto;
}

#area-1964 .sbubble .position {
    top: -64px;
    width: 203px;
}

#area-1964 .his-text {
    padding-top: 60px;
}

#area-1964 .line {
    top: 26px;
}

/* area-196712 */
#area-196712 .sbubble .position {
    top: -20px;
    width: 156.5px;
}

/* area-1970 */
#area-1970 {
    position: relative;
}

#area-1970 .txt-area .item-area {
    flex: 1;
}

#area-1970 .txt-area .his-img {
    width: 0;
}

#area-1970 .his-img .photo {
    position: absolute;
    top: -80px;
    left: calc(61vw - 303px);
    max-width: 443px;
}

/* area-198204 */
#area-198204 {
    position: relative;
}

#area-198204 .backdrop {
    position: absolute;
    top: -40px;
    left: 0;
    width: 29.067vw;
    max-width: 436px;
}

#area-198204 .sbubble .position {
    top: -50px;
    left: 60%;
    z-index: 3;
    width: 231px;
}

#area-198204 .his-img {
    margin-right: 10vw;
    margin-left: calc(29vw + 30px);
}

#area-198204 .his-img .sbubble,
#area-198204 .his-img .photo {
    max-width: 1006px;
}

/* area-pg */
#area-pg {
    max-width: 1350px;
    margin-right: auto;
    margin-left: auto;
}

#area-pg .pamphlet-gallery {
    position: relative;
    padding: 45px;
    overflow: hidden;
    background-color: #d3dac0;
    border-radius: 60px 0;
}

#area-pg .pamphlet-gallery::before,
#area-pg .pamphlet-gallery::after {
    position: absolute;
    display: block;
    width: 488px;
    height: 439px;
    content: "";
    background-image: url("../img/history/img-pg-v.svg");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.3;
}

#area-pg .pamphlet-gallery::before {
    top: -90px;
    left: -310px;
    transform: scale(1.05) rotate(125deg);
}

#area-pg .pamphlet-gallery::after {
    right: -70px;
    bottom: -340px;
    transform: scale(1.2) rotate(120deg);
}

#area-pg .title-jp {
    position: absolute;
    top: 85px;
    left: 55px;
    z-index: 2;
    width: 58px;
}

#area-pg .title-jp .sp {
    display: none;
}

#area-pg .title-en {
    position: absolute;
    top: -1.1vw;
    right: -8px;
    z-index: 1;
    width: 48.666vw;
    max-width: 730px;
}

#area-pg .title-en img {
    opacity: 0.3;
}

#area-pg .pamph-list {
    z-index: 1;
    gap: 40px;
    justify-content: center;
    margin: auto;
}

#area-pg .pamph-list .pamph {
    position: relative;
    margin-bottom: 26px;
}

#area-pg .pamph-list .cover {
    position: relative;
    z-index: 1;
    width: 100px;
    aspect-ratio: 10/21;
    margin: auto;
    overflow: hidden;
}

#area-pg .pamph-list .year-num {
    position: absolute;
    top: 50%;
    right: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    aspect-ratio: 1/1;
    line-height: 1.2;
    text-align: center;
    background-color: rgb(255 255 255 / 50%);
    border-radius: 50%;
    transform: translateY(-50%);
}

#area-pg .pamph-list .pdf-link {
    width: 100%;
    max-width: 300px;
    height: 55px;
}

#area-pg .pamph-list .pdf-link a {
    display: flex;
    gap: 0 0.65em;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 1em;
    line-height: 1.5;
    color: #fff;
    background-color: #6e9143;
}

#area-pg .pamph-list .s57 .year-num {
    right: calc(50% + 30px);
}

#area-pg .pamph-list .s58 .year-num {
    right: calc(50% + 45px);
}

#area-pg .pamph-list .s62 .year-num {
    right: calc(50% + 35px);
}

/* area-1989 */
#area-1989 .his-img .position {
    top: -10px;
    left: 81%;
    width: 244px;
}

/* area-199503 */
#area-199503 .comment {
    position: relative;
}

#area-199503 .item-area .his-img {
    position: absolute;
    top: 50%;
    left: 65.25vw;
    transform: translateY(-50%);
}

#area-199503 .his-img .photo {
    width: 120px;
}

/* area-2002 */
#area-2002 .his-img .position {
    top: 5px;
    left: 64%;
    width: 215px;
}

/* area-200507 */

#area-200507 .his-img .position {
    top: -40px;
    left: 98%;
    width: 260px;
}

#area-200507 .his-img .photo {
    max-width: 400px;
}

/* area-200606 */
#area-200606 .his-img .position {
    top: -16px;
    left: 64%;
    width: 244px;
}

/* area-200807 */
#area-200807 .his-img .position {
    top: -10px;
    left: 64%;
    width: 316px;
}

/* area-2015 */
#area-2015 {
    position: relative;
}

#area-2015 > .his-img {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 3;
    transform: translateY(-50%);
}

#area-2015 > .his-img .photo {
    width: 25.6vw;
    max-width: 384px;
}

/* area-201703 */
#area-201703 .his-img .position {
    top: 10px;
    left: 70%;
    width: 268px;
}

/* area-202100 */
#area-202100 .his-img .position {
    top: -10px;
    left: 64%;
    width: 316px;
}

/* area-2023 */
#area-2023 .his-img .position.prim {
    top: -10px;
    left: 64%;
    width: 316px;
}

#area-2023 .his-img .position.seco {
    top: -10px;
    left: 64%;
    width: 296px;
}

/* area-2024 */
#area-2024 .his-img .photo {
    max-width: 260px;
    margin-right: 85px;
    margin-left: auto;
}

#area-2024 .sbubble .position {
    top: -80px;
    width: 300px;
}

#area-2024 .his-text {
    padding-top: 65px;
}

#area-2024 .line {
    top: 36px;
    height: 140px;
}

#area-2024 .item-area span {
    display: inline-block;
    margin-bottom: 10px;
}

/* area-202404 */
#area-202404 .txt-area .his-img {
    position: relative;
    flex: 1;
}

#area-202404 .txt-area .his-img .photo {
    position: absolute;
    top: -20px;
    left: 150px;
    width: 130px;
    aspect-ratio: 1/1;
}

#area-202404 .his-img .position.prim {
    top: 10px;
    left: 70%;
    width: 300px;
}

#area-202404 .his-img .position.seco {
    top: -10px;
    left: 64%;
    width: 296px;
}

/* area-2025 */
#area-2025 .k-2 .his-img {
    width: 0;
}

#area-2025 .k-2 .his-text {
    align-items: center;
    padding-left: 30px;
    margin-left: 29vw;
}

#area-2025 .his-img .photo {
    position: absolute;
    top: -30px;
    right: 30px;
    max-width: 230px;
}

/* area-202508 */
#area-202508 .his-img .photo {
    max-width: 400px;
}

@media (width <= 1500px) {
    #area-1970 .his-img .photo {
        right: -10vw;
        left: initial;
    }
}

@media (width <= 1440px) {
    #sec-history .k-2 .his-text {
        padding-left: 0;
    }

    .comment {
        justify-content: start;
    }

    .comment p {
        text-align: left;
    }

    .k-2 .comment {
        width: calc(100% + 136px - 16px);
        margin-left: -136px;
    }

    #sec-history .item-area .txt-area {
        flex: 1;
    }

    #area-1964 .comment p,
    #area-2024 .comment p {
        padding-left: 136px;
    }

    #area-202404 .txt-area .his-img .photo {
        top: -70px;
        right: 0;
        left: initial;
    }

    #area-pg .title-jp {
        left: 3.82vw;
    }

    #area-pg .pamphlet-gallery {
        /* padding-right: 9vw; */
        padding-left: 9vw;
    }

    #area-2025 .item-area {
        flex: 1;
        padding-right: 230px;
    }

    #area-2025 .comment p {
        padding-right: 150px;
    }

    #area-1970 {
        margin-top: 4em;
    }

    #area-1970 .txt-area .his-img {
        width: 453px;
    }

    #area-1970 .his-img .photo {
        top: -70px;
    }

    #area-1970 .comment p {
        padding-right: 8em;
    }

    #area-1970 .txt-area .his-img {
        margin-right: -10vw;
    }

    #area-2024 .his-img .photo {
        margin-right: 5.9vw;
    }

    #sec-history .k-2 .year-area {
        padding-left: 0;
    }
}

@media (width <= 1280px) {
    #area-196200 .item-area p {
        flex: 1;
    }

    #area-1964 .item-area {
        flex: 1;
    }

    #area-1964 .line {
        height: 140px;
    }

    #area-196712 .txt-area {
        gap: 20px;
    }

    #area-196712 .item-area p {
        flex: 1;
    }

    #area-2021 .line {
        height: 130px;
    }

    #area-2021 .item-area {
        flex: 1;
    }

    #area-202404 .txt-area .his-img {
        max-width: 130px;
    }

    #area-202404 .txt-area p {
        flex: 1;
    }

    #area-2024 .sbubble .position {
        top: -110px;
        right: calc(5vw * -1);
        left: initial;
    }

    #area-196712 .sbubble {
        display: contents;
    }

    #area-196712 .sbubble .position {
        right: 5vw;
        left: initial;
    }
}

@media (width <= 1160px) {
    #area-pg .pamphlet-gallery {
        padding: 40px;
    }

    #area-pg .title-jp {
        position: initial;
        width: 100%;
        max-width: 300px;
    }

    #area-pg .title-jp .pc {
        display: none;
    }

    #area-pg .title-jp .sp {
        display: block;
    }

    #area-pg .pamph-list .pdf-link a {
        flex-flow: column;
    }

    #sec-history .k-1 .item-area p {
        flex: 1;
    }

    #area-196712 .sbubble {
        flex: initial;
    }

    #area-196712 .sbubble .position {
        position: initial;
    }

    #area-1989 .his-img .position {
        left: 64%;
    }

    #area-199503 .comment p {
        padding-right: 6em;
    }

    #area-2024 .item-area {
        flex: 1;
    }

    #area-2024 .sbubble {
        flex: initial;
        margin-right: -9vw;
    }

    #area-2024 .line {
        height: 140px;
    }

    #area-2015 .k-2 .item-area {
        flex: 1;
        padding-right: 11em;
    }

    #area-1964 .sbubble {
        display: contents;
    }

    #area-1964 .sbubble .position {
        top: -5px;
        right: 0;
        left: initial;
    }

    #area-2024 .sbubble {
        display: contents;
    }

    #area-2024 .sbubble .position {
        top: -5px;
        right: -5vw;
    }

    #area-2025 .item-area {
        padding-right: 160px;
    }

    #area-1970 .txt-area .his-img {
        width: 120px;
        margin-right: 0;
    }

    #area-1970 .his-img .photo {
        top: -80px;
        max-width: 340px;
    }

    #area-1970 .comment p {
        padding-right: 6em;
    }
}

@media (width <= 1024px) {
    .comment {
        width: auto;
        margin-right: 16px;
    }

    .k-2 .comment {
        width: calc(100% - 16px);
    }

    #area-1964 .k-2 .comment,
    #area-2024 .k-2 .comment {
        width: calc(100% + 136px - 16px);
    }

    #sec-history .line {
        width: 95vw;
    }

    #sec-history .k-2 .his-text,
    #sec-history .k-1 .item-area {
        margin-right: 5vw;
    }

    #sec-history .k-2 > .his-img:not(:has(.lert-p)) {
        width: calc(29vw - 136px);
    }

    #sec-history .k-2 > .his-img:not(:has(.lert-p)) ~ .his-text .line {
        left: calc((29vw - 136px) * -1);
    }

    #sec-history .k-2 > .his-img:not(:has(.lert-p)) ~ .his-text .year-area {
        padding-left: 0;
    }

    #sec-history .k-2 > .his-img:not(:has(.lert-p)) ~ .his-text .comment {
        margin-left: 0;
    }

    #area-1964 .item-area {
        flex: 1;
    }

    #area-1964 .sbubble {
        flex: initial;
    }

    #area-1964 .sbubble .position {
        right: 0;
    }

    #area-1964 .his-img:has(.photo-wrap) ~ .his-text .line {
        height: calc(100% - 10px - 52px);
    }

    #area-1970 .item-area {
        flex: 1;
    }

    #area-1970 .comment p {
        padding-right: 8em;
    }

    #area-2024 .his-img .photo {
        max-width: 240px;
        margin-right: 30px;
        margin-left: auto;
    }

    #area-2024 .his-img:has(.photo-wrap) ~ .his-text .line {
        height: calc(100% - 10px - 26px);
    }

    #area-202404 .item-area .his-img {
        width: 100%;
    }

    #area-202404 .his-img .position.prim {
        left: 68%;
    }

    #area-2025 .comment p {
        padding-right: 12em;
    }

    #area-1970 {
        margin-top: 128px;
        margin-bottom: 128px;
    }

    #area-199503 .item-area .his-img {
        right: -4vw;
    }

    #sec-history .item-area > .his-img {
        width: 100%;
    }

    #sec-history .item-area .his-img .sbubble {
        display: block;
    }

    #sec-history .item-area .his-img .sbubble .position {
        position: initial;
        margin-left: auto;
    }

    #area-196200 .item-area .his-img {
        width: initial;
    }

    #area-198204 .k-1 .item-area p {
        padding-bottom: 0;
    }

    #area-198204.history-item .sbubble .position {
        position: initial;
        margin-left: auto;
    }

    #area-198204 .his-img {
        margin-right: 5vw;
    }

    #area-198204 .his-img .sbubble {
        padding-top: 10px;
    }

    #sec-history .item-area:has(.his-img) .txt-area {
        padding-bottom: 20px;
    }

    #area-2025 .k-2 .his-text {
        margin-left: calc(29vw - 136px);
    }

    #area-2025 .k-2 .his-text .comment {
        margin-left: 0;
    }

    #area-2025 .k-2 > .his-img:not(:has(.lert-p)) {
        width: 0;
    }

    #area-2025 .line.enter {
        left: calc((29vw - 136px) * -1);
    }

    #area-2025 .k-2 .his-text .txt-area {
        width: 100%;
    }

    #area-1970 .his-img .photo {
        top: -90px;
        right: -5vw;
    }
}

@media (width <= 991px) {
    #area-2024 .his-img:has(.photo-wrap) ~ .his-text .line {
        height: calc(100% - 10px - 52px);
    }

    #area-1964 .his-img .photo,
    #area-2024 .his-img .photo,
    #area-2025 .his-img .photo {
        max-width: 220px;
        margin-right: 0;
        margin-left: 0;
    }

    #area-200507 .txt-area {
        padding-bottom: 60px;
    }

    #area-200507 .item-area .his-img {
        width: 100%;
    }

    #area-200507 .his-img .position {
        top: -50px;
        right: -4vw;
        left: initial;
    }

    #area-198204 .sbubble .position {
        left: 60%;
    }

    #area-2025 {
        margin-bottom: 120px;
    }

    #area-2015 .comment p {
        padding-right: 9em;
    }

    #area-1970 .line {
        height: 140px;
    }

    #area-2025 .item-area {
        padding-right: 240px;
    }

    #area-1970 .comment p {
        padding-right: 9em;
    }
}

@media (width <= 767px) {
    #sec-history .k-2 > .his-img:not(:has(.lert-p)) ~ .his-text .comment {
        margin-left: -5vw;
    }

    #sec-history .k-2 > .his-img:not(:has(.lert-p)) ~ .his-text .comment p {
        padding-left: 5vw;
    }

    #sec-history .k-1 .year-area {
        width: auto;
    }

    #sec-history .k-2 .year-area {
        width: 100%;
        padding-left: 0;
    }

    #sec-history .k-2 .item-area {
        flex: initial;
        width: 100%;
        padding: 0;
    }

    #area-1970 {
        margin-bottom: 80px;
    }

    #sec-history .k-2 .his-img {
        width: auto;
    }

    #sec-history .k-1 .item-area {
        padding-top: 15px;
    }

    #sec-history .kind.k-1 {
        display: block;
        padding-left: 5vw;
    }

    #sec-history .k-2 .his-text {
        padding-bottom: 0;
        margin-left: 0;
    }

    #area-1964 .k-2 .his-text,
    #area-2024 .k-2 .his-text {
        margin-left: 5vw;
    }

    #area-1964 .k-2 .comment,
    #area-2024 .k-2 .comment {
        width: calc(100% + 200px + 5vw - 16px);
    }

    #sec-history .history-path {
        left: 5vw;
    }

    #sec-history .year-area .dot {
        right: initial;
        left: -4.5px;
    }

    #sec-history .k-1 .ymblock {
        width: 150px;
        padding-bottom: 5px;
        margin-left: 0;
    }

    #sec-history .year-area .under-line {
        right: initial;
        left: 0;
    }

    #sec-history .k-1 .year-txt {
        padding-bottom: 10px;
        padding-left: 30px;
    }

    #sec-history .his-text .line {
        height: 100%;
    }

    #sec-history .his-text:has(.comment) .line {
        height: calc(100% - 40px);
    }

    #area-2015 .his-text:has(.comment) .line {
        height: calc(100% - 20px);
    }

    #area-2024 .his-text:has(.comment) .line {
        height: calc(100% - 50px);
    }

    #area-1964 .comment p,
    #area-2024 .comment p {
        padding-left: 5vw;
    }

    .k-1 .comment {
        width: 100%;
        margin-left: 0;
    }

    .k-1 .comment p {
        padding-right: 5vw;
    }

    #area-1970 .kind > .his-img,
    #area-1989 .kind > .his-img,
    #area-2005 .kind > .his-img,
    #area-2015 .kind > .his-img,
    #area-2019 .kind > .his-img,
    #area-2021 .kind > .his-img {
        display: none;
    }

    #area-1970 .k-2 .his-text,
    #area-1989 .k-2 .his-text,
    #area-2005 .k-2 .his-text,
    #area-2015 .k-2 .his-text,
    #area-2019 .k-2 .his-text,
    #area-2021 .k-2 .his-text,
    #area-2025 .k-2 .his-text {
        padding-left: 5vw;
    }

    #area-1970 .txt-area .year-area {
        width: 100%;
    }

    #area-1970 .txt-area .his-img {
        width: 160px;
    }

    #area-1970 .line.enter,
    #area-1989 .line.enter,
    #area-2005 .line.enter,
    #area-2015 .line.enter,
    #area-2019 .line.enter,
    #area-2021 .line.enter,
    #area-2025 .line.enter {
        left: 0;
    }

    #area-1970 .comment,
    #area-1989 .comment,
    #area-2005 .comment,
    #area-2015 .comment,
    #area-2021 .comment,
    #area-2025 .comment {
        width: calc(100% + 5vw - 16px);
        margin-left: -5vw;
    }

    #area-1970 {
        margin-top: 60px;
        margin-bottom: 50px;
    }

    #area-198204 .backdrop {
        top: 90px;
        width: 222px;
    }

    #area-2015 .comment p {
        padding-right: 2em;
    }

    #area-2025 {
        display: flex;
        flex-flow: column-reverse;
        margin-bottom: 60px;
    }

    #area-2025 .k-2 .item-area {
        padding-right: 13em;
    }

    #area-2025 .comment p {
        padding-left: 5vw;
    }

    #area-2025 .line {
        top: -10px;
    }

    #area-2025 .his-text:has(.comment) .line {
        height: calc(100% - 10px);
    }

    #area-2024 .his-img .photo,
    #area-1964 .his-img .photo,
    #area-2025 .his-img .photo {
        width: 100%;
        max-width: 200px;
    }

    #area-198204 .sbubble .position {
        right: 0;
        left: initial;
    }

    #area-198204 .k-1 .item-area p {
        padding-bottom: 0;
    }

    #area-198204 .kind .his-img {
        padding-top: 30px;
    }

    #area-198204 .his-img {
        margin-left: calc(5vw + 30px);
    }

    #area-2015 > .his-img {
        top: 25%;
    }

    #area-202404 .txt-area .his-img .photo {
        top: -8vw;
    }

    .k-2 .comment {
        margin-left: calc((170px + 30px + 5vw) * -1);
    }

    .k-2 .comment::before {
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
    }

    .k-1 .comment {
        width: calc(100% + 5vw);
        margin-right: -5vw;
    }

    .k-1 .comment::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%);
    }

    #area-2025 .his-img .photo {
        display: block;
        width: 100%;
        max-width: 200px;
    }

    #area-2019 .k-2 .his-text {
        padding-bottom: 30px;
    }

    #sec-history .k-2 > .his-img:not(:has(.lert-p)) ~ .his-text .line {
        left: 0;
    }

    #area-1964 .his-img:has(.photo-wrap) ~ .his-text .line,
    #area-2024 .his-img:has(.photo-wrap) ~ .his-text .line {
        left: -230px;
        height: calc(100% - 10px - 26px);
    }

    #area-2025 .k-2 .his-text .comment {
        margin-left: -5vw;
    }

    #area-196712 .sbubble .position {
        position: absolute;
        top: 0;
    }

    #area-199503 .comment p {
        padding-right: 130px;
    }

    #area-199503 .item-area .his-img {
        right: 0;
    }

    #area-2024 .sbubble .position {
        top: -35px;
        right: -5vw;
    }

    #area-196902 {
        margin-bottom: 130px;
    }

    #area-1970 .his-img .photo {
        right: 0;
    }

    #area-1970 .comment p {
        padding-right: 2em;
    }

    #area-1970 .his-img .photo {
        max-width: 300px;
    }
}

@media (width <= 656px) {
    #area-2025 .comment p {
        padding-right: 5vw;
    }
}

@media (width <= 640px) {
    #sec-history .k-2 {
        display: block;
    }

    #area-1964 .his-text {
        padding-top: 20px;
    }

    #area-1964 .line.enter,
    #area-2024 .line.enter {
        left: 0;
    }

    #area-1964 .line,
    #area-2024 .line {
        top: -20px;
    }

    #area-1964 .k-2 .comment,
    #area-2024 .k-2 .comment {
        width: calc(100% + 5vw - 16px);
        margin-left: -5vw;
    }

    #area-2024 .k-2 .his-text {
        padding-top: 20px;
    }

    #area-2015 > .his-img .photo {
        width: 164px;
    }

    #area-2024 .sbubble {
        top: -20px;
    }

    #sec-history .item-area .his-img .sbubble {
        display: block;
        margin-top: -10px;
    }

    #sec-history .his-img .position,
    #sec-history .his-img .position.prim,
    #sec-history .his-img .position.seco {
        position: initial;
        margin-left: auto;
    }

    #sec-history .k-1 .txt-area {
        padding-bottom: 30px;
    }

    #area-198204 .backdrop {
        top: 120px;
        left: -30px;
    }

    #area-198204 .k-1 .txt-area {
        padding-bottom: 0;
    }

    #area-198204 .kind .his-img {
        padding-top: 10px;
    }

    #area-1970 {
        margin-top: 0;
    }

    #area-1964 .his-img:has(.photo-wrap) ~ .his-text .line,
    #area-2024 .his-img:has(.photo-wrap) ~ .his-text .line {
        top: 0;
        left: -5vw;
        height: calc(100% - 10px);
    }

    #area-1964 .sbubble .position {
        top: -20px;
    }

    #area-196712 .sbubble .position {
        top: -10px;
    }

    #area-1970 .his-img .photo {
        top: -130px;
    }

    #area-196902 {
        margin-bottom: 140px;
    }
}

@media (width <= 480px) {
    .comment p {
        font-size: 1.6rem;
    }

    #area-1964 .sbubble {
        position: absolute;
        top: 30px;
        right: 0;
        bottom: 80%;
    }

    #area-196712 .sbubble {
        position: absolute;
        top: -10px;
        right: 0;
    }

    #area-1970 {
        margin-top: 0;
    }

    #area-1970 .his-img .photo {
        max-width: 280px;
    }

    #area-pg .pamph-list .pdf-link a {
        flex-flow: row;
    }

    #area-1964 .his-text {
        padding-top: 65px;
    }

    #area-pg .pamphlet-gallery {
        width: 100%;
        padding: 30px;
        margin-right: auto;
        margin-left: auto;
    }

    #area-pg .title-en {
        top: -10px;
        right: 0;
        left: auto;
        width: 95%;
        transform: translateX(8%);
    }

    #area-pg .title-jp {
        width: 100%;
        margin: 10px auto 0;
    }

    #area-199503 .item-area .his-img {
        top: 20px;
        right: -5px;
    }

    #area-2024 .k-2 .his-text {
        padding-top: 115px;
    }

    #area-2015 > .his-img {
        top: 8%;
    }

    #area-198204 .backdrop {
        top: 90px;
        left: -40px;
        width: 280px;
        opacity: 0.45;
    }

    #area-199503 .his-img .photo {
        width: 100px;
    }

    #area-199503 .comment p {
        padding-right: 105px;
    }

    #area-2024 .sbubble .position {
        top: 55px;
        right: -10vw;
    }

    #area-202404 .txt-area .his-img .photo {
        right: -28px;
        width: 120px;
    }

    #area-202404 .txt-area .his-img {
        max-width: 100px;
    }

    #area-pg .pamph-list .pamph {
        margin-bottom: 10px;
    }

    #pagetitle .txt::before {
        width: 129px;
    }

    #area-pg .pamph-list .cover {
        width: 85px;
    }

    #area-pg .pamph-list .s57 .year-num {
        right: calc(50% + 20px);
    }

    #area-pg .pamph-list .s58 .year-num {
        right: calc(50% + 32px);
    }

    #area-pg .pamph-list .s62 .year-num {
        right: calc(50% + 25px);
    }

    #area-1970 .txt-area .his-img {
        margin-right: 0;
    }

    #area-198204 .his-img {
        margin-left: calc(5vw - 5px);
    }

    #sec-history .item-area > .his-img {
        width: calc(100% + 40px);
        margin-left: -35px;
    }

    #area-200507 .item-area > .his-img {
        margin-left: 0;
    }

    .history-item .his-img:has(.photo2),
    .history-item .his-img:has(.photo3),
    #area-200507 .his-img {
        margin-left: -29px;
    }

    #area-1964 .sbubble .position {
        top: 50px;
        right: -8vw;
    }

    #area-196200 .item-area > .his-img {
        position: absolute;
        top: -40px;
        right: 5vw;
        width: initial;
    }

    #area-2025 .kind {
        display: flex;
        flex-flow: column-reverse;
    }

    #area-2025 .his-img {
        display: contents;
    }

    #area-2025 .his-img .photo {
        position: relative;
        top: 40px;
        left: 52%;
        transform: scale(0.85);
    }

    #area-2025 .k-2 .item-area {
        padding-right: initial;
    }

    #area-202408 {
        margin-bottom: 0;
    }

    #area-2024 .his-img .photo {
        position: relative;
        top: 0;
        left: 5%;
        max-width: 160px;
    }

    #area-198204 .kind .his-img .photo {
        width: calc(100% + 60px);
        margin-left: -10px;
    }

    #area-2025 .k-2 .his-img {
        position: absolute;
        top: -10px;
        width: fit-content;
    }

    #area-1964 .his-img .photo {
        max-width: 170px;
    }

    #area-1964 .k-2 .his-text {
        padding-top: 120px;
    }

    #area-200507 .his-img .photo {
        max-width: 230px;
    }

    #sec-history #area-200507 .item-area:has(.his-img) .txt-area {
        padding-bottom: 0;
    }

    #sec-history #area-2024 .k-2 .his-img {
        position: absolute;
        top: -40px;
    }

    #area-202508 .his-img .photo {
        max-width: 260px;
    }

    #sec-history #area-202508 .item-area > .his-img {
        margin-left: 0;
    }

    #sec-history #area-200507 .item-area .his-img .sbubble .position {
        margin-left: 15vw;
    }

    #sec-history #area-1964 .k-2 .his-img {
        position: absolute;
        top: -20px;
    }

    #pagetitle .txt {
        transform: translate(-50%, -50%) scale(0.9);
    }

    #pagetitle {
        background-position: top center;
        background-size: 125% auto;
    }

    #area-198204 .his-img .photo {
        min-width: 450px;
    }
}

@media (width <= 360px) {
    #area-2024 .sbubble .position {
        top: 70px;
        right: -15vw;
    }

    #sec-history #area-2024 .k-2 .his-img {
        top: -40px;
        width: 130px;
    }

    #area-pg .pamphlet-gallery {
        width: 100%;
    }
}