@charset "utf-8";

.about01-box-left {
    aspect-ratio: 1/1;
    overflow: hidden;
}

.about01-box-left>img {
    width: 100%;
    height: 100% !important;
    object-fit: contain;
}

.about-text-box {
    max-width: max-content;
}

.about-title {
    /* 22-40 */
    font-size: clamp(1.375rem, 1.102rem + 1.165vw, 2.5rem);
    letter-spacing: 0.05em;
    line-height: 1.2;
    font-weight: 600;
}

.about-title:nth-child(2) {
    margin: 15px 0 0 15px;
}

.about03-title-box .about-title:nth-child(2) {
    margin-left: 0;
}

.about-title s {
    text-decoration: none;
    font-size: 120%;
}

.about-title s span {
    display: inline-block;
    color: var(--tertiary);
    aspect-ratio: 1/1;
    padding: 5px;
    text-align: center;
    line-height: 1.15em !important;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
}

.about-title s span:nth-of-type(2n-1) {
    background: var(--secondary);
}

.about-title s span:nth-of-type(2n) {
    background: var(--primary);
}

.about01-title s span:nth-of-type(2n-1) {
    background: var(--primary);
}

.about01-title s span:nth-of-type(2n) {
    background: var(--secondary);
}

.about01-title s span:nth-child(3) {
    position: relative;
    rotate: 13deg;
    z-index: 1;
    top: -20px;
}

.about02-vertical-text02 span {
    line-height: 1.15em !important;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
}

.about-title-decoration {
    position: relative;
    display: inline-flex;
}

.about-title-decoration::after {
    content: "";
    display: block;
    width: clamp(30px, 24.660px + 1.424vw, 52px);
    height: 43px;
    background: url(/system_panel/uploads/images/about_title_decoration.svg) no-repeat center center / contain scroll;
    margin: -6% 0 0;
}

/*===========================================================

===========================================================*/

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:414px) {


    /*===========================================================

===========================================================*/



}

/* min-width: 414px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:544px) {


    /*===========================================================

===========================================================*/

    .about01-box-right {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

}

/* min-width: 544px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width: 768px) {

    .about01-box-right {
        align-items: flex-start;
    }

    .about-title:nth-child(2) {
        margin: 25px 0 0 25px;
    }

    .about02-title-box .about-title {
        writing-mode: vertical-rl;
        text-orientation: upright;
    }

    .about02-title-box {
        display: flex;
        flex-direction: row-reverse;
    }

    .about02-vertical-text02 {
        margin: 30px 20px 0 0 !important;
    }

    .about02-vertical-text02 span {
        padding: 5px 12px 10px 0 !important;
    }


    /*===========================================================

===========================================================*/



}

/* min-width: 768px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width: 1024px) {

    .about-title:nth-child(2) {
        margin: 35px 0 0 35px;
    }

    .about-title s {
        font-size: 175%;
    }

    /*===========================================================

===========================================================*/



}

/* min-width: 1024px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1200px) {


    /*===========================================================

===========================================================*/



}

/* min-width: 1200px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1440px) {


    /*===========================================================

===========================================================*/



}

/* min-width: 1440px ここまで */


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

/* min-width: 1520px ここまで */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */