.intro .inner {
    padding-top: 0;
}

.intro .borderframe {
    display: inline-block;
    padding: .75em .2em;
    font-size: .9em;
    border-left: none;
    border-right: none;
    line-height: 1;
}

.intro h1 {
    letter-spacing: .1em;
    font-size: min(1.6em, 5.8vw);
}

.intro h1 .sml {
    font-size: .85em;
}

.intro .time {
    width: min(27em, 100%);
    margin: 1em auto 0;
}

.intro .time img {
    width: 100%;
    height: auto;
}


/*====== story ======*/
.story-wrp .inner {
    padding: 60px 20px;
}

.story-wrp .inner h2 {
    font-size: 1.2em;
}

.story-wrp .inner .dash {
    margin: 2em auto 1.25em;
    font-size: 1.1em;
}

.story-wrp .inner .dash+p {
    line-height: 1.6;
}

.story-wrp .case-wrp {
    width: 100%;
    margin: min(80px, 12vw) auto 0;
    display: grid;
    grid-template-areas: 'title img1 img2' 'text text text' 'img3 img3 img3';
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}

@media screen and (max-width:740px) {
    .story-wrp .case-wrp {
        grid-template-areas: 'title title' 'text text' 'img1 img2' 'img3 img3';
        grid-template-columns: repeat(2, 1fr);
    }
}

.story-wrp .case-wrp+.case-wrp {
    margin: min(120px, 20vw) auto 0;
}

@media screen and (max-width:740px) {
    .story-wrp .case-wrp {
        gap: min(1em, 2vw);
    }
}

.story-wrp .case-wrp h3 {
    grid-area: title;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.4;
    font-size: min(1.15em, 4.6vw);
    background-color: #111;
    color: #fff;
}

@media screen and (max-width:740px) {
    .story-wrp .case-wrp h3 {
        padding: 1em;
        aspect-ratio: auto;
        background-color: transparent;
        color: #111;
        border-top: double;
        border-bottom: double;
    }
}

.story-wrp .case-wrp h3 .sml {
    display: block;
    margin: 0 auto;
    font-size: .9em;
    line-height: 2;
}

.story-wrp .case-wrp .img1 {
    grid-area: img1;
}

.story-wrp .case-wrp .img2 {
    grid-area: img2;
}

.story-wrp .case-wrp .img3 {
    grid-area: img3;
    background-color: #eee;
}

.story-wrp .text-box-wrp {
    grid-area: text;
}

.story-wrp .text-box {
    width: max-content;
    height: 60vh;
    margin: 0 auto;
    padding: min(30px, 5vw) 0;
    writing-mode: vertical-rl;
    color: #3f3b3b;
}

.story-wrp .text-box .hinv {
    text-combine-upright: all;
    font-style: normal;
}

@media screen and (max-width:740px) {
    .story-wrp .text-box {
        height: calc(100vh - 90px);
        min-height: 36em;
        font-size: min(.9em, 4vw);
    }
}

.story-wrp .text-box p {
    margin-left: 1em;
    line-height: 1.8;
    text-align: left;
}

@media screen and (max-width:740px) {
    .story-wrp .text-box p {
        margin-left: .75em;
    }
}

.story-wrp .text-box p:last-child {
    margin-left: 0;
}