:root {
    /* --h2-text: clamp(30px, 5vw, 60px); */
    --h2-text: clamp(40px, 6vw, 80px);
    --shadow: 0 3px 5px rgba(102, 102, 102, 0.35);
}

/*------------------------------ここから共通------------------------------*/
.abotu-body {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10vw 0 0 0;
}

.subpage-en {
    margin-bottom: 25px;
    color: var(--base);
    font-size: var(--h2-text);
    font-weight: 900;
    font-style: italic;
    font-family: 'Roboto Condensed';
    letter-spacing: 2px;
    display: flex;
    align-items: baseline;
}

.subpage-ja {
    font-weight: 900;
    padding-left: 20px;
    position: relative;
}

.subpage-ja::before {
    content: "";
    height: 70%;
    aspect-ratio: 1 / 3;
    background: var(--base);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/*------------------------------ここまで共通------------------------------*/

/*------------------------------ここからOUR STRONGS------------------------------*/
.our-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: clamp(15px, 3vw, 30px);
}

.our-card {
    border: solid 2px var(--base);
    padding: clamp(25px, 3.5vw, 45px);
    box-shadow: var(--shadow);
}

.our-card h3 {
    color: var(--base);
    font-size: clamp(26px, 2.5vw, 42px);
    font-weight: 900;
    font-family: 'Roboto Condensed';
}

p.our-card-read {
    font-weight: 900;
    padding-left: 20px;

    margin-top: 18px;

    position: relative;
}

p.our-card-read::before {
    content: "";
    width: 5px;
    height: 100%;
    background: var(--base);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.our-card-inner p:nth-of-type(2)  {
    font-size: 14px;
    font-weight: 500;

    margin-top: 20px;
}

.our-card:nth-child(1),
.our-card:nth-child(2),
.our-card:nth-child(3),
.our-card:nth-child(4) {
    position: relative;
}

.our-card:nth-child(1)::before,
.our-card:nth-child(2)::before,
.our-card:nth-child(3)::before,
.our-card:nth-child(4)::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.05;
    z-index: -1;
    pointer-events: none;
}

.our-card:nth-child(1)::before {
    background-image: url(../img/support-3.svg);
    background-position: bottom right -30%;
}
.our-card:nth-child(2)::before {
    background-image: url(../img/support-5.svg);
    background-position: bottom right -50%;
}
.our-card:nth-child(3)::before {
    background-image: url(../img/support-6.svg);
    background-position: bottom right -10%;
}
.our-card:nth-child(4)::before {
    background-image: url(../img/support-4.svg);
    background-position: bottom right -30%;
}

/* ====================================
   OUR CARD 虹色ボーダー
==================================== */

.our-card {
    position: relative;
    isolation: isolate;
}

/* 虹色の光 */
.our-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;

    padding: 3px;

    background: conic-gradient(
        from var(--rainbow-angle),
        transparent 0deg,
        transparent 260deg,
        #ff0044 275deg,
        #ff9900 290deg,
        #ffff00 305deg,
        #00ff66 320deg,
        #00ccff 335deg,
        #6633ff 345deg,
        #ff00cc 355deg,
        transparent 360deg
    );

    /* ボーダー部分だけ表示 */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    mask-composite: exclude;

    opacity: 0;
    transition: opacity .3s ease;
}

/* ホバー */
/* .our-card:hover::after {
    opacity: 1;
    animation: rainbow-border-run 2s linear infinite;
} */
 /* ====================================
   PC：ホバーで虹色アニメーション
==================================== */

@media (hover: hover) and (pointer: fine) {
    .our-card:hover::after {
        opacity: 1;
        animation: rainbow-border-run 2s linear infinite;
    }
}

/* ====================================
   スマホ：タップで虹色アニメーション
==================================== */

@media (hover: none), (pointer: coarse) {
    .our-card.is-active::after {
        opacity: 1;
        animation: rainbow-border-run 2s linear infinite;
    }
}

/* 角度をアニメーション可能に */
@property --rainbow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* 回転 */
@keyframes rainbow-border-run {
    from {
        --rainbow-angle: 0deg;
    }

    to {
        --rainbow-angle: 360deg;
    }
}

/* カード内のコンテンツ */
.our-card-inner {
    position: relative;
    z-index: 1;
}


/*------------------------------ここまでOUR STRONGS------------------------------*/

/*------------------------------ここからEVENT------------------------------*/
.about-event {
    padding-top: 5vw;
}

.event-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: 20px;
}

.event-item {
    min-width: 0;
    display: flex;

    padding: 2vw;
    /* background: var(--base); */
}

.event-item:first-of-type {
     background: linear-gradient(
        135deg,
        #e60013 0%,
        #ff6000 100%
    );
}

.event-item:nth-of-type(2) {
    background: linear-gradient(
        135deg,
        #ffb900 0%,
        #119b66 100%
    );
}

.event-item:last-of-type {
    background: linear-gradient(
        135deg,
        #119b66 0%,
        #007bff 100%
    );
}


.event-img {
    flex: 1;
}

.event-img img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;

    filter: brightness(0) invert(1);
}

.event-text {
    flex: 2.5;
    position: relative;
    margin-left: 2vw;
    padding-left: 2vw;
}

.event-text::before {
    content: "";
    height: 100%;
    width: 3px;
    background: var(--white);

    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.event-text h3 {
    font-size: 18px;
    color: var(--white);
}

.event-text p {
    font-size: 14px;
    color: var(--white);
}


/*------------------------------ここまでEVENT------------------------------*/

/*------------------------------ここからMESSAGE------------------------------*/
.about-message {
    padding-top: 8vw;
}

.a-message-container {
    display: flex;
    align-items: normal;
    gap: clamp(30px, 4vw, 80px);
}

.a-message-text {
    flex: 1.2;

    position: relative;
}

.a-message-text .subpage-en,
.a-message-text .sub-title-br {
    display: block;
}

.a-message-text .subpage-en {
    line-height: 1;
}

.a-message-text .rade {
    font-weight: 900;
    font-size: clamp(18px, 1.5vw, 26px);
    padding-bottom: 30px;
}

.a-message-setsu {
    flex: 1;
}

.setsu-container {
    border: solid 2px var(--base);
    box-shadow: var(--shadow);
    position: relative;
}
.setsu-container::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../img/a-rainbow.webp);
    background-repeat: no-repeat;
    background-size: cover;

    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
.a-message-setsu img {
    display: block;
    width: 100%;
}

.a-message-bg {
    color: var(--base);
    font-size: clamp(60px, 12vw, 180px);
    font-weight: 900;
    opacity: .1;
    line-height: 0.9;

    position: absolute;
    top: 0;
    left: 0;
}

.a-message-bg span:nth-of-type(2) {
    padding-left: 8vw;
}

.a-message-bg span:last-of-type {
    padding-left: 16vw;
}


/*------------------------------ここからMESSAGE------------------------------*/

/*------------------------------ここからMESSAGE------------------------------*/
#about-comp {
    padding: 5vw 0 10vw;
}

.a-comp-container {
    display: flex;
    align-items: center;
    gap: clamp(30px, 4vw, 60px);
}

.conp-img {
    flex: 1;
}

.conp-img img {
    display: block;
    width: 100%;
}

.a-comp-contantes {
    flex: 1.8;
}

.a-comp-contantes dl {
    display: grid;
    grid-template-columns: 20% 80%;

    border: solid 2px var(--base);
    box-shadow: var(--shadow);
}

.a-comp-contantes dt {
    padding: 1vw;

    background: var(--base);
    border-top: solid 2px var(--base);
    border-bottom: solid 2px var(--white);
    color: var(--white);

    font-weight: 700;
}

.a-comp-contantes dt:last-of-type {
    border-bottom: none;
}

.a-comp-contantes dd {
    padding: 1vw;

    background: var(--white);
    border-bottom: solid 2px var(--base);
}

.a-comp-contantes dd:last-of-type {
    border-bottom: none;
}


@media (max-width: 1300px) {
    .a-message-container {
        align-items: center;
    }
}

@media (max-width: 900px) {
    .a-message-container {
        flex-direction: column;
    }

    .event-item {
        align-items: center;
    }

    .event-img img {
        width: 60%;
        margin: 0 auto;
    }

    .event-text {
        flex: 4;
        padding: 2vw 4vw;
        margin-left: 4vw;
    }

    .conp-img {
        display: none;
    }
    .a-comp-contantes {
        width: 100%;
    }

    .a-message-bg {
        display: inline;
    }

    .a-message-bg span:nth-of-type(2),
    .a-message-bg span:last-of-type {
        padding-left: 0;
    }
}


@media (max-width: 600px) {
    .about-event,
    .about-message,
    #about-comp {
        margin-top: 50px;
    }
    .our-container {
        grid-template-columns: 1fr;
    }
    .a-comp-contantes dl {
        grid-template-columns: 1fr;
    }

    .a-comp-contantes dt,
    .a-comp-contantes dd {
        padding: 15px;
    }
}

@media (max-width: 501px) {
    #about-comp .subpage-en {
        line-height: 1;
    }
}


@media (max-width: 440px) {
    .abotu-body {
        width: 90%;
    }
    .event-item {
        padding: 20px 10px;
    }
    .event-text h3 {
        margin-bottom: 10px;
        font-size: 16px;
    }
    .event-img img {
        width: 80%;
    }
    .event-text::before {
        width: 1.5px;
    }
    .a-message-text .rade {
        padding-bottom: 15px;
    }
    .comment {
        font-size: 14px;
    }
    .a-comp-contantes dl {
        font-size: 14px;
    }
    /* #about-comp {
        padding-bottom: 10vw;
    } */
}


/* ====================================
   OUR STRENGTHS 時間差
==================================== */

.about-our .our-card:nth-child(1) {
    transition-delay: 0s;
}

.about-our .our-card:nth-child(2) {
    transition-delay: .15s;
}

.about-our .our-card:nth-child(3) {
    transition-delay: .3s;
}

.about-our .our-card:nth-child(4) {
    transition-delay: .45s;
}


/* ====================================
   PAPRIKA EVENT 時間差
==================================== */

.about-event .event-item:nth-child(1) {
    transition-delay: 0s;
}

.about-event .event-item:nth-child(2) {
    transition-delay: .15s;
}

.about-event .event-item:nth-child(3) {
    transition-delay: .3s;
}


/* ====================================
   EVENT ホバーアニメーション
==================================== */

.event-item.fade-sub.is-show:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .15);
}


/* ====================================
   動きを減らす設定への対応
==================================== */

@media (prefers-reduced-motion: reduce) {

    .fade-sub,
    .fade-sub.is-show {
        opacity: 1;
        transform: none;
        transition: none;
    }

}