@charset "UTF-8";

.mainVisual {
    width: 100%;
    height: 51.857143vw;
    position: relative;
    overflow: hidden;
}
.mainVisual .imgView p.cap {
    font-family: var(--font_jp);
    line-height: 1;
    z-index: 2 !important;
}
.mainVisual .imgView img {
    width: 100vw;
    height: auto;
}
.mainVisual .imgView .box.only600 {
    display: block;
    position: absolute;
    top: 4.7362vw;
    left: 4.7673vw;
    transition: opacity 1s ease-out;
    opacity: 0;
    z-index: 3;
}
.mainVisual .imgView .box.only600 img {
    display: block;
    width: min(750px, 53.776208vw);
    opacity: 1;
    transition: opacity 1s ease-out;
    z-index: 2;
}
.arrow.arrowOther {
    position: relative;
}
.arrow.arrowOther span {
    border-top: 2px solid var(--border_color );
    border-right: 2px solid var(--border_color );
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    position: relative;
}
.arrow.arrowOther span:nth-of-type(1) {
  bottom: -10px;
}
.arrow.arrowOther span:nth-of-type(2) {
  bottom: 0;
}

.cont.ch {
    background: #fff;
    position: relative;
    overflow: hidden;
}
.back {
    width: min(120px, 8.571429vw);
    display: block;
    z-index: 2;
}
.cont.ch .back {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}
.cont.ch + .back {
    margin: 0 1.5rem 50px auto;
}
.cont.ch .box img {
    margin: 0;
    display: flex;
}
.cont.ch .box h2 {
    width: 100%;
    padding: 0 0 0.5rem 0;
    text-align: left;
    font-family: var(--font_jp);
    color: #231815;
    position: relative;
}
.cont.ch .box h2::before {
    content: "";
    display: block;
    width: 100%;
    border-bottom: solid 1px var(--border_color);
    position: absolute;
    right: 0;
    bottom: 0;
}
.cont.ch .box .copy p,
.cont.ch .box .copy div.fBox {
    color: #231815;
    text-shadow: unset;
}

/* animation */
.box.only600 p.target.trigger,
.box.spOnly600 p.target.trigger,
.back.target.trigger {
    opacity: 0;
}
@media (max-width: 1024px) {
    .back {
        width: clamp(80px, 9.765625vw, 100px);
    }
}
@media (max-width: 600px) {
    .mainVisual .imgView .box.only600 {
        display: none;
    }
    .box.spOnly600 {
        padding: 30px 5% 50px 5%;
    }
    .mainVisual .imgView.active .box.only600,
    .mainVisual .imgView.active .box.only600 img {
        opacity: 0;
        visibility: hidden;
        z-index: -100;
    }
}

/* 共通 / about01 */
.box.about01,
.box.about02,
.box.about03 {
    width: 95vw;
    margin: 0 0 0 auto;
}
.box.about01 {
    padding: 30px 0 0 0;
}
.box.about01 .copy {
    margin: 1.5625rem 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.box.about01 .copy p {
    width: 44.0238vw;
    letter-spacing: 0.1em;
}
.box .imgBox {
    width: 47.4741vw;
    margin: 0;
}
.box .imgBox img {
    width: 100%;
}
@media (max-width: 768px) {
    .box.copy p,
    .box .imgBox {
        width: 100%;
    }
    .box.about01 .copy {
        flex-direction: column-reverse;
    }
    .box.about01 .copy p,
    .cont.ch .box .copy div.fBox {
        width: auto;
        padding: 1.5rem 0 0 0;
    }
}


/* about02 / about03 */
.cont.ch .box.about02 .copy h2,
.cont.ch .box.about03 .copy h2 {
    padding: 0 0 0.75rem 0;
}
.cont.ch .box.about02 .copy h2::before,
.cont.ch .box.about03 h2::before {
    content: "";
    display: none;
}

/* about02 */
.box.about02 {
    margin: 50px 0 0 auto;
    padding: 50px 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: solid 1px var(--border_color);
}
.box.about02 .copy {
    width: auto;
    margin: 0;
}
.box.about02 .imgBox {
    width: 47.4741vw;
    display: flex;
    justify-content: flex-start;
}
.box.about02 .copy p,
.box.about02 .copy div.fBox {
    width: 44.0238vw;
    letter-spacing: 0.1em;
}
.box.about02 .copy p sup {
    font-size: 50%;
    /* vertical-align: top; */
}
.box.about02 p.textCap {
    margin: 1.25rem 0 1.75rem;
    font-size: 10px;
    line-height: 1.5;
}
.box.about02 p.barTime {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.5;
}
.box.about02 p.barTime span.barDerail {
    width: 4rem;
}
.box.about02 p.barTime span.barDerail.usage {
    letter-spacing: 0.523em;
}
.box.about02 p.barTime span.barDerail + span {
    width: auto;
}
@media (max-width: 1024px) {
    .box.about02 p.barTime {
        font-size: clamp(12px, 1.367188vw, 14px);
    }
    .box.about02 p.barTime span.barDerail {
        width: clamp(3.5rem, 6.25vw, 4rem);
    }
}
@media (max-width: 768px) {
    .box.about02 {
        margin: 40px 0 0 auto;
        flex-direction: column-reverse;
    }
    .cont.ch .box.about02 .copy h2,
    .cont.ch .box.about03 .copy h2 {
        padding: 1.5rem 0 0.75rem;
    }
    .box.about02 .imgBox,
    .box.about02 .copy p {
        width: 100%;
    }
    .box.about02 p.barTime {
        font-size: 11px;
        letter-spacing: 0.05em;
    }
    .box.about02 p.barTime span.barDerail {
        width: 3.15rem;
    }
}

/* about03 */
.box.about03 {
    margin: 50px 0 50px auto;
    padding: 50px 0 0 0;
    border-top: solid 1px var(--border_color);
}
.box.about03 .list {
    width: 89.3305vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.cont.ch .box.about03 .list .copy {
    width: 27.5222vw;
}
.cont.ch .box.about03 .list .copy .imgBox {
    width: 100%;
}
.cont.ch .box.about03 .list .copy h3 {
    font-family: var(--font_jp);
    padding: 0.75rem 0 0.5rem 0;
    text-align: left;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    color: #231815;
}
.cont.ch .box.about03 .list .copy p {
    font-size: 14px;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .box.about03 .list {
        display: flex;
        flex-direction: column;
    }
    .cont.ch .box.about03 .list .copy {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .cont.ch .box.about03 .list .copy:nth-of-type(n + 2) {
        margin: 1rem 0 0 0;
    }
    .cont.ch .box.about03 .list .copy .text {
        width: 50%;
        padding: 0 0 0 1rem;
        display: flex;
        flex-direction: column;
    }
    .cont.ch .box.about03 .list .copy h3 {
        padding: 0.15rem 0 0.5rem 0;
        font-size: clamp(16px, 2.34375vw, 18px);
    }
    .cont.ch .box.about03 .list .copy p {
        font-size: 13px;
    }
    .cont.ch .box.about03 .list .copy .imgBox {
        width: 50%;
    }
}
@media (max-width: 600px) {
    .cont.ch .box.about03 .list .copy h3 {
        border-top: unset;
        border-bottom: unset;
    }
}
@media (max-width: 480px) {
    .cont.ch .box.about03 .list .copy {
        flex-direction: column;
    }
    .cont.ch .box.about03 .list .copy:nth-of-type(n + 2) {
        margin: 2rem 0 0 0;
    }
    .cont.ch .box.about03 .list .copy .text,
    .cont.ch .box.about03 .list .copy .imgBox {
        width: 100%;
    }
    .cont.ch .box.about03 .list .copy .text {
        padding: 1rem 0 0 0;
    }
    .cont.ch .box.about03 .list .copy h3 {
        padding: 0 0 0.75rem 0;
    }
}