@charset "UTF-8";

#history {
    background-image: url("/images/bg.jpg");
    background-repeat: repeat;
    background-size: cover;
}

/* 共通項目 */
/* content */
#history .content {
    width: 87.2vw;
    height: auto;
    margin: auto;
    text-align: center;
}

/* br */
br.sp-only {
    display: block;
}
br.pc-only {
    display: none;
}

#history > picture img {
    width: 100%;
    height: auto;
}

/* top */
#history .top {
    margin: 80px auto 82px;
}

#history .top .page-title {
    margin-bottom: 20px;
}

#history .top .page-title h2 {
    font-family: 'Noto Serif JP', serif;
    font-size: 30px;
    font-size: clamp(30px, 1.442rem + 1.85vw, 42px);
    line-height: 1.3em;
    text-align: left;
    color: #5a5179;
}

#history .top .page-title small {
    font-family: "work-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-size: clamp(16px, 0.856rem + 0.62vw, 20px);
    line-height: 1em;
    text-align: left;
    color: #000000;
    display: block;
}


#history .top picture img {
    margin-bottom: 84px;
    width: 100%;
    height: auto;
}

#history .top p {
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-size: clamp(14px, 0.658rem + 0.92vw, 20px);
    letter-spacing: 0.02em;
    line-height: 2.28em;
    text-align: left;
    color: #000;
}

/* successive-feudal-lords */
#history .successive-feudal-lords {
    padding: 52px 0 41px;
    margin-bottom: 80px;
    background-image: url("/images/history-successive-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

#history .successive-feudal-lords__title {
    width: 100%;
    margin: auto auto 56px;
    position: relative;
}

#history .successive-feudal-lords__title::before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #bcac8b;
    position: absolute;
    top: -12px;
    left: 0;
}

#history .successive-feudal-lords__title::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #bcac8b;
    position: absolute;
    bottom: -16px;
    left: 0;
}

#history .successive-feudal-lords__title h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    font-size: clamp(20px, 0.817rem + 1.85vw, 32px);
    line-height: 1.7em;
    color: #d1c6ae;
}
#history .successive-feudal-lords__title small {
    font-family: Bookmania;
    font-weight: normal;
    font-size: 14px;
    font-size: clamp(14px, 0.731rem + 0.62vw, 18px);
    line-height: 1.42em;
    text-align: center;
    color: #ffffff;
}

#history .successive-feudal-lords__content {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}

#history .successive-feudal-lords__content img {
    width: 71.46vw;
    height: auto;
    aspect-ratio: 1/1;
    margin: auto auto 20px;
}

#history .successive-feudal-lords__content > div {
    font-family: 'Noto Serif JP', serif;
}

#history .successive-feudal-lords__content h4 {
    font-size: 30px;
    font-size: clamp(30px, 1.731rem + 0.62vw, 34px);
    letter-spacing: 0.1em;
    line-height: 2.16em;
    text-align: left;
    color: #d1c6ae;
    display: flex;
    align-items: center;
}

#history .successive-feudal-lords__content h4 span {
    margin-left: 14px;
    font-size: 16px;
    font-size: clamp(16px, 0.928rem + 0.31vw, 18px);
    letter-spacing: 0.1em;
    line-height: 1em;
    text-align: left;
    color: #ffffff;
}

#history .successive-feudal-lords__content p {
    margin-bottom: 40px;
    font-size: 14px;
    font-size: clamp(14px, 0.658rem + 0.92vw, 20px);
    letter-spacing: 0.1em;
    line-height: 2.28em;
    text-align: left;
    color: #ffffff;
}

.history-description{
    margin-bottom: 40px;
    font-size: 14px;
    font-size: clamp(14px, 0.658rem + 0.92vw, 20px);
    letter-spacing: 0.1em;
    line-height: 2.28em;
    text-align: left;
    color: #ffffff;
}


#history .successive-feudal-lords__content hr {
    width: 100%;
    height: 1px;
    margin: auto auto 0;
    background-color: #ffffff;
    border: none;
}

/* ishigaki */
#history .ishigaki {
    padding-bottom: 80px;
    background-image: url("/images/history-ishigaki-bg.png");
    background-size: cover;
}

#history .ishigaki__top {
    padding: 40px 0 0;
    margin-bottom: 80px;
    background-image: url("/images/history-ishigaki-top-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% auto;
    text-align: center;
}

#history .ishigaki__top .content {
}

#history .ishigaki__top .images {
    width: 67.2vw;
    height: auto;
    margin: auto auto 48px;
}

#history .ishigaki__top .images img:nth-child(1) {
    margin-bottom: 10px;
}

#history .ishigaki__top .texts {
    text-align: left;
}

#history .ishigaki__top .texts h3 {
    margin-bottom: 5px;
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    font-size: clamp(20px, 0.817rem + 1.85vw, 32px);
    letter-spacing: 0.27em;
    line-height: 1.1em;
    text-align: left;
    color: #000000;
    background: #ffffff;
    display: table;
}

#history .ishigaki__top .texts h3:nth-last-of-type(1) {
    margin-bottom: 40px;
}
#history .ishigaki__top .texts div.pc-only {
    display: none;
}
#history .ishigaki__top .texts div.sp-only {
    display: block;
}

#history .ishigaki__top .texts p {
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-size: clamp(14px, 0.658rem + 0.92vw, 20px);
    letter-spacing: 0.05em;
    line-height: 2.28em;
    text-align: left;
    color: #000000;
}

/* ishigaki__from-then */
#history .ishigaki__from-then {
    width: 100%;
    height: auto;
    margin-bottom: 60px;
}

/* ishigaki__description--1 */
/* ishigaki__description--2 */
#history .ishigaki__description--1,
#history .ishigaki__description--2 {
}

#history .ishigaki__description--1 .wrapper,
#history .ishigaki__description--2 .wrapper {
    margin-bottom: 67px;
    font-family: 'Noto Serif JP', serif;
    color: #000000;
}

#history .ishigaki__description--1 img,
#history .ishigaki__description--2 img {
    margin-bottom: 26px;
}

#history .ishigaki__description--1 > div,
#history .ishigaki__description--2 > div {
    text-align: left;
}

#history .ishigaki__description--1 h4,
#history .ishigaki__description--2 h4 {
    margin-bottom: 6px;
    font-size: 24px;
    font-size: clamp(24px, 1.283rem + 0.92vw, 30px);
    line-height: 1.79em;
}

#history .ishigaki__description--1 p,
#history .ishigaki__description--2 p {
    font-size: 14px;
    font-size: clamp(14px, 0.731rem + 0.62vw, 18px);
    line-height: 2.5em;
}

#history .ishigaki__description--1 {
    margin-bottom: 87px;
}

#history .ishigaki__description--2 {
    margin-bottom: 66px;
}

/* ishigaki__cooperator */
.ishigaki__cooperator {
    margin-bottom: 59px;
}

.ishigaki__cooperator img {
    width: 100%;
    height: auto;
}

.ishigaki__cooperator h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 30px;
    font-size: clamp(30px, 1.442rem + 1.85vw, 42px);
    line-height: 1.3em;
    text-align: center;
    color: #000000;
}

/* ishigaki__load */
.ishigaki__load {
    width: 100%;
    height: auto;
    display: block;
    border: solid 4px #796B4C;
}
.ishigaki__load img {
    width: 100%;
    height: auto;
}


/**********************************************************
* min-width: 600px
/**********************************************************/
@media screen and (min-width: 600px) {
}

/**********************************************************
* min-width: 1025px
/**********************************************************/
@media screen and (min-width: 1025px) {
    #history {
    }

    /* 共通項目 */
    /* content */
    #history .content {
        width: 82.08vw;
    }
    /* br */
    br.sp-only {
        display: none;
    }
    br.pc-only {
        display: block;
    }

    #history > picture img {
    }

    /* top */
    #history .top {
        margin: 120px auto 160px;
    }

    #history .top .page-title {
        margin-bottom: 47px;
    }

    #history .top .page-title h2 {
        font-size: 50px;
        font-size: clamp(40px, 1.784rem + 1.12vw, 50px);
        line-height: 1.3em;
    }

    #history .top .page-title small {
        font-size: 20px;
        font-size: clamp(18px, 0.982rem + 0.22vw, 20px);
        line-height: 1em;
    }

    #history .top img {
        margin-bottom: 119px;
    }

    #history .top p {
        font-size: 24px;
        font-size: clamp(20px, 0.964rem + 0.45vw, 24px);
        letter-spacing: 0.1em;
        line-height: 3.54em;
        text-align: center;
    }

    /* successive-feudal-lords */
    #history .successive-feudal-lords {
        padding: 93px 0 134px;
        margin-bottom: 123px;
        background-image: url("/images/history-successive-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
    }

    #history .successive-feudal-lords__title {
        width: 52.08vw;
        margin: auto;
        margin: 83px auto 98px;
        position: relative;
    }

    #history .successive-feudal-lords__title::before {
        top: -20px;
        left: 0;
    }

    #history .successive-feudal-lords__title::after {
        bottom: -22px;
        left: 0;
    }

    #history .successive-feudal-lords__title h3 {
        font-size: 64px;
        font-size: clamp(48px, 1.855rem + 1.79vw, 64px);
        line-height: 1.3em;
    }
    #history .successive-feudal-lords__title small {
        font-size: 20px;
        font-size: clamp(18px, 0.982rem + 0.22vw, 20px);
        line-height: 1.42em;
    }

    #history .successive-feudal-lords__content {
        width: 100%;
        height: auto;
        margin-bottom: 25px;
        display: flex;
        gap: 5.72vw;
    }

    #history .successive-feudal-lords__content img {
        width: 18.02vw;
        height: 100%;
        margin: auto;
    }

    #history .successive-feudal-lords__content > div {
        display: flex;
        flex-direction: column;
    }

    #history .successive-feudal-lords__content h4 {
        font-size: 40px;
        font-size: clamp(32px, 1.427rem + 0.89vw, 40px);
        letter-spacing: 0.1em;
        line-height: 2.5em;
    }

    #history .successive-feudal-lords__content h4 span {
        margin-left: 20px;
        font-size: 24px;
        font-size: clamp(18px, 0.696rem + 0.67vw, 24px);
        letter-spacing: 0.1em;
        line-height: 1em;
    }

    #history .successive-feudal-lords__content p {
        font-size: 24px;
        font-size: clamp(20px, 0.964rem + 0.45vw, 24px);
        letter-spacing: 0.1em;
        line-height: 55px;
    }

    .history-description{
        font-size: 24px;
        font-size: clamp(20px, 0.964rem + 0.45vw, 24px);
        letter-spacing: 0.1em;
        line-height: 55px;
    }

    #history .successive-feudal-lords__content hr {
    }

    /* ishigaki */
    #history .ishigaki {
        padding-bottom: 200px;
    }

    #history .ishigaki__top {
        padding: 172px 0;
        margin-bottom: 149px;
        background-image: url("/images/history-ishigaki-top-bg.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-size: 50% 100%;
        text-align: center;
    }

    #history .ishigaki__top .content {
        display: flex;
        justify-content: center;
        gap: 2.08vw;
    }

    #history .ishigaki__top .images {
        width: 24.53vw;
        height: auto;
        margin: 0;
    }

    #history .ishigaki__top .texts {
        width: auto;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #history .ishigaki__top .texts h3 {
        margin-bottom: 22px;
        padding-left: 19px;
        font-size: 64px;
        font-size: clamp(36px, 0.246rem + 3.13vw, 64px);
        letter-spacing: 0.27em;
        line-height: 1.1em;
        text-align: left;
        color: #000000;
        background: #ffffff;
        display: inline-block;
    }

    #history .ishigaki__top .texts h3:nth-last-of-type(1) {
        margin-bottom: 87px;
    }
    #history .ishigaki__top .texts div.pc-only {
        display: contents;
    }
    #history .ishigaki__top .texts div.sp-only {
        display: none;
    }
    #history .ishigaki__top .texts p {
        margin-bottom: 31px;
        padding-left: 19px;
        font-size: 24px;
        font-size: clamp(14px, 0.159rem + 1.12vw, 24px);
        letter-spacing: 0.1em;
        line-height: 2.12em;
        background-color: #ffffff;
        display: inline-block;
    }

    /* ishigaki__from-then */
    #history .ishigaki__from-then {
        width: 82.08vw;
        margin: auto auto 40px;
    }

    /* ishigaki__description--1 */
    /* ishigaki__description--2 */
    #history .ishigaki__description--1 .wrapper,
    #history .ishigaki__description--2 .wrapper {
        display: flex;
        margin-bottom: 0;
    }

    #history .ishigaki__description--1 .wrapper:nth-of-type(even),
    #history .ishigaki__description--2 .wrapper:nth-of-type(even) {
        flex-direction: row-reverse;
    }

    #history .ishigaki__description--1 .wrapper > img,
    #history .ishigaki__description--2 .wrapper > img {
        width: 50%;
        margin-bottom: 0;
    }

    #history .ishigaki__description--1 .wrapper > div,
    #history .ishigaki__description--2 .wrapper > div {
        width: 50%;
        margin: 1.25vw;
        border: 2px solid #073340;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: left;
        font-family: 'Noto Serif JP', serif;
        padding: 20px 0;;
    }

    #history .ishigaki__description--1 h4,
    #history .ishigaki__description--2 h4 {
        width: 82.5%;
        margin-bottom: 17px;
        font-size: 30px;
        font-size: clamp(20px, 0.534rem + 1.12vw, 30px);
        line-height: 43px;
        text-align: left;
        color: #000;
    }

    #history .ishigaki__description--1 p,
    #history .ishigaki__description--2 p {
        width: 82.5%;
        font-size: 24px;
        font-size: clamp(14px, 0.159rem + 1.12vw, 24px);
        line-height: 1.75em;
        text-align: left;
        color: #000;
    }

    #history .ishigaki__description--1 {
        margin-bottom: 65px;
    }

    #history .ishigaki__description--2 {
        margin-bottom: 80px;
    }

    /* ishigaki__cooperator */
    .ishigaki__cooperator {
        margin-bottom: 42px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ishigaki__cooperator .sp-only {
        display: none;
    }

    .ishigaki__cooperator img {
        width: 44.4vw;
        height: auto;
    }

    .ishigaki__cooperator h3 {
        width: 100%;
        font-size: 51px;
        font-size: clamp(34px, 0.908rem + 1.9vw, 51px);
        line-height: 1.78em;
        text-align: left;
    }

    /* ishigaki__load */
    .ishigaki__load {
        overflow: hidden;
    }
    .ishigaki__load:hover img {
        transform: scale(1.1);
        filter: brightness(0.7);
    }
    .ishigaki__load img {
        transition: transform 0.3s, filter 0.3s;
    }

}