/* ===================================
   About Page CSS
   ベース: 1440px PC-First
=================================== */
/* ===================================
   共通レイアウト
=================================== */
/* セクション共通の内側コンテナ */
.about__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 115.6rem; /* 1156px = 1440 - 142*2 */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 7.2rem;
}
/* セクションタイトル（中央寄せ） */
.about__section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
.about__section-en {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 6rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: var(--color-light-blue);
    text-align: center;
}
.about__section-ja {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 2.3rem;
    line-height: 1.45;
    letter-spacing: 0.13em;
    color: var(--color-gray);
    text-align: center;
}
/* 背景装飾テキスト */
.about__bg-text {
    position: absolute;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    font-weight: 250;
    letter-spacing: 0.1em;
    background: linear-gradient(170deg, rgba(229, 243, 255, 1) 12%, rgba(255, 250, 219, 1) 94%), linear-gradient(170deg, rgba(0, 77, 136, 1) 12%, rgba(0, 34, 137, 1) 95%), linear-gradient(170deg, rgba(0, 100, 136, 1) 12%, rgba(0, 64, 139, 1) 95%), #2E2E2E;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.35;
    z-index: 0;
}
.about__bg-text--upper {
    font-size: 15rem;
    line-height: 1.5;
    top: 53.8rem;
    left: -5.8rem;
}
.about__bg-text--lower {
    font-size: 14rem;
    line-height: 1.5;
    bottom: 9.6rem;
    left: -1.7rem;
}
.about__bg-text--section {
    font-size: 14rem;
    line-height: 1.5;
    top: 50%;
    left: -1.7rem;
    transform: translateY(-50%);
}
/* ===================================
   MESSAGE（代表メッセージ）
=================================== */
.about-message {
    position: relative;
    padding: 14rem 14.2rem 9.6rem;
    background-color: var(--color-white);
    overflow: hidden;
}
/* 背景装飾画像 */
.about-message__bg-deco {
    position: absolute;
    top: -2.7rem;
    left: -10.2rem;
    width: 186.3rem;
    height: 170.9rem;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}
.about-message__bg-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* カード群 */
.about-message__cards {
    display: flex;
    flex-direction: column;
    gap: 5.6rem;
}
/* ティッカー：flow から外して section 全幅に */
.about-message > .subpage-footer-ticker {
    position: absolute;
    left: 0;
    top: 68rem;
    width: 100%;
    pointer-events: none;
}
/* 共通カードスタイル */
.about-message__card {
    background: rgba(213, 236, 255, 0.4);
    border-radius: 2rem;
    padding: 5.6rem 7.2rem 8rem;
}
/* カード1：左寄せ（880px幅） */
.about-message__card--first {
    width: 88rem;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}
/* カード2：右寄せ（960px幅） */
.about-message__card--second {
    width: 96rem;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.about-message__card-text {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}
.about-message__card-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    line-height: 1.7;
    color: var(--color-navy);
}
.about-message__card-body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.7;
    color: var(--color-navy);
    text-align: justify;
}
/* カード2 フッター（エンブレム右寄せ） */
.about-message__card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.about-message__card-emblem {
    height: 3.3rem;
    width: auto;
}
/* ===================================
   COMPANY（会社概要）
=================================== */
.about-company {
    position: relative;
    padding: 9.6rem 14.2rem;
    background-color: var(--color-white);
    overflow: hidden;
}
/* 会社概要カード */
.about-company__card {
    width: 96.6rem;
    margin: 0 auto;
    background: linear-gradient(110deg, rgba(189, 225, 255, 1) 12%, rgba(255, 252, 229, 1) 77%);
    border-radius: 4rem;
    padding: 5.6rem 7.2rem 8rem;
}
.about-company__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
    width: 100%;
}
.about-company__row {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    gap: 4.8rem;
    /* padding-bottom: 3.2rem; */
}
.about-company__row--last {
    border-bottom: none;
    padding-bottom: 0;
}
.about-company__label {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--color-navy);
    min-width: 8rem;
    flex-shrink: 0;
    padding-top: 0.2rem;
}
.about-company__value {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--color-navy);
    flex: 1;
}
.about-company__tel-img {
    height: 1.2rem;
    width: auto;
    display: inline-block;
}
.about-company__phone-note {
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 0.4rem;
}
/* Googleマップ（グレースケール） */
.about-company__row--map .about-company__value {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.about-company__map {
    width: 100%;
    height: 32rem;
    border-radius: 1.2rem;
    overflow: hidden;
    margin-top: 0.8rem;
    filter: grayscale(1);
}
.about-company__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}
/* ===================================
   CLIENTS（取引先企業）
=================================== */
.about-clients {
    position: relative;
    padding: 9.6rem 14.2rem;
    background-color: var(--color-white);
    z-index: 1;
}
/* 取引先カード */
.about-clients__card {
    width: 96.6rem;
    margin: 0 auto;
}
.about-clients__text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: -0.01em;
    color: var(--color-gray);
}
/* ===================================
   LICENSE（保有資格一覧）
=================================== */
.about-license {
    position: relative;
    padding: 9.6rem 14.2rem;
    background-color: var(--color-white);
    overflow: hidden;
}
.about-license__card {
    width: 96.6rem;
    margin: 0 auto;
}
.about-license__cols {
    display: flex;
    gap: 6.4rem;
}
.about-license__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.about-license__col-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--color-gray);
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(35, 54, 102, 0.3);
}
.about-license__list {
    list-style: none;
    display: flex;
    flex-direction: column;
}
.about-license__item {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: -0.01em;
    color: var(--color-gray);
}
/* ===================================
   Responsive: スマホ (max-width: 767px)
   375px基準: 1rem = 10px (common.css の calc(100vw/37.5) に合わせる)
=================================== */
@media (max-width: 767px) {
    /* ===== 共通 ===== */
    .about__inner {
        max-width: none;
        padding: 0 2.4rem;
        gap: 4rem;
    }
    .about__section-en {
        font-size: 3.4rem;
    }
    .about__section-ja {
        font-size: 1.8rem;
        letter-spacing: 0.1em;
    }
    .about__bg-text {
        font-size: 5.5rem;
        opacity: 0.2;
    }
    .about__bg-text--upper {
        font-size: 5.5rem;
        top: 28rem;
        left: -1.7rem;
    }
    .about__bg-text--lower {
        font-size: 5.5rem;
        bottom: 4rem;
        left: -1rem;
    }
    .about__bg-text--section {
        font-size: 5.5rem;
        top: 40%;
        left: -1rem;
    }
    /* ===== MESSAGE ===== */
    .about-message {
        padding: 6.4rem 0;
    }
    /* MESSAGE セクションはh-padding=0, 内側コンテナに24px */
    .about-message .about__inner {
        padding: 0 2.4rem;
        gap: 4rem;
    }
    .about-message__bg-deco {
        top: 0rem;
        left: -11.6rem;
        width: 68.4rem;
        height: auto;
        opacity: 0.4;
    }
    /* カード群：内側コンテナより幅広く（カードが画面端まで届くように） */
    .about-message__cards {
        gap: 2.4rem;
        overflow: visible;
    }
    /* 共通カードスタイル（SP） */
    .about-message__card {
        width: 35.1rem; /* 351px - 内側コンテナ(327px)よりも24px広い */
        padding: 3.2rem 3.2rem 3.6rem;
        flex-shrink: 0;
    }
    /* カード1：右端に寄せて左画面端まで伸ばす */
    .about-message__card--first {
        border-radius: 1.7rem 0 0 1.7rem; /* 左丸・右フラット */
        align-self: start;
    }
    /* カード2：左端に寄せて右画面端まで伸ばす */
    .about-message__card--second {
        border-radius: 0 1.7rem 1.7rem 0; /* 左フラット・右丸 */
        align-self: end;
    }
    .about-message__card-title {
        font-size: 2.2rem;
        line-height: 1.5;
    }
    .about-message__card-body {
        font-size: 1.4rem;
        line-height: 1.7;
        letter-spacing: -0.02em;
    }
    .about-message__card-emblem {
        height: 2.5rem;
    }
    /* ===== COMPANY ===== */
    .about-company {
        padding: 6.4rem 0;
    }
    .about-company .about__inner {
        padding: 0 2.4rem;
    }
    .about-company__card {
        width: 100%; /* コンテナに合わせてフル幅 */
        padding: 2.4rem 2.4rem 3.2rem;
        border-radius: 1.7rem;
    }
    .about-company__list {
        gap: 1.6rem;
    }
    .about-company__row {
        flex-direction: column;
        gap: 0.2rem;
        /* padding-bottom: 1.6rem; */
    }
    .about-company__label {
        font-size: 1.4rem;
        font-weight: 700;
        min-width: auto;
    }
    .about-company__value {
        font-size: 1.4rem;
    }
    .about-company__access {
        font-size: 1.3rem;
    }
    .about-company__tel-img {
        height: 1.05rem;
        margin: 0.3rem 0;
    }
    .about-company__phone-note {
        font-size: 1.2rem;
    }
    .about-company__map {
        height: 12.9rem;
        border-radius: 0.8rem;
    }
    /* ===== CLIENTS ===== */
    .about-clients {
        padding: 6.4rem 0;
        overflow: hidden;
    }
    .about-clients .about__inner {
        padding: 0 2.4rem;
    }
    .about-clients__card {
        width: 100%;
    }
    .about-clients__text {
        font-size: 1.4rem;
    }
    /* ===== LICENSE ===== */
    .about-license {
        padding: 6.4rem 0;
    }
    .about-license .about__inner {
        padding: 0 2.4rem;
    }
    .about-license__card {
        width: 100%;
    }
    .about-license__cols {
        flex-direction: column;
        gap: 3.2rem;
    }
    .about-license__col-title {
        font-size: 1.4rem;
    }
    .about-license__item {
        font-size: 1.4rem;
    }
}
/* ===================================
   HISTORY（沿革）
=================================== */
.about-history {
    position: relative;
    padding: 9.6rem 0 0;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: 7.2rem;
}
/* タイトル・コントロール共通ラッパー */
.about-history__header-wrap, .about-history__controls-wrap {
    padding: 0 14.2rem;
    max-width: 144rem; /* 115.6 + 14.2*2 */
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
/* スライダーラッパー（フル幅・SPスクロール誘導の起点） */
.about-history__slider-outer {
    position: relative;
    width: 100%;
}
/* ===== カード ===== */
.about-history__card {
    width: 45.7rem;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    flex-shrink: 0;
}
/* 年 + 水平線 */
.about-history__card-head {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.about-history__card-year {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #233666;
    white-space: nowrap;
}
/* タイムライン水平線（左端に丸ドット） */
.about-history__card-line {
    width: 100%;
    height: 3px;
    background-color: #233666;
    position: relative;
}
.about-history__card-line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: #233666;
}
/* 本文カード */
.about-history__card-body {
    background: rgba(213, 236, 255, 0.4);
    border-radius: 2rem;
    padding: 2.8rem 3.3rem 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.about-history__card-month {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 3.2rem;
    line-height: 1;
    color: #233666;
}
.about-history__card-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #233666;
    text-align: justify;
}
.about-history__card-text p {
    margin: 0;
    text-align: justify;
    word-break: break-all;
    text-justify: inter-ideograph;
    text-justify: inter-character;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* ===== カスタム矢印ボタン ===== */
.about-history__controls {
    display: flex;
    gap: 4.8rem;
    align-items: center;
}
.about-history__btn {
    position: relative;
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 50%;
    background-color: #7DB0DC;
    border: 2px solid #7DB0DC;
    color: white;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.4s ease;
}
/* prev: 初期は非表示 */
.about-history__btn--prev {
    opacity: 0;
    pointer-events: none;
}
/* prev: スライド後に表示 */
.about-history__btn--prev.is-visible {
    opacity: 1;
    pointer-events: auto;
}
/* next: 最後まで到達したら非表示 */
.about-history__btn--next.is-end {
    opacity: 0;
    pointer-events: none;
}
.about-history__btn:hover {
    background-color: white;
    color: #7DB0DC;
}
/* 矢印画像 */
.about-history__btn-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 2.6rem;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}
/* ホバー時: 元色で表示 */
.about-history__btn:hover .about-history__btn-arrow {
    filter: none;
}
/* prev ボタンの矢印は 180° 回転で左向きに */
.about-history__btn--prev .about-history__btn-arrow {
    transform: translate(-50%, -50%) rotate(180deg);
}
/* 次の矢印（初期位置） */
/* next: サブ矢印は左外 */
.about-history__btn--next .about-history__btn-arrow--next {
    left: -50%;
    opacity: 0;
}
/* prev: サブ矢印は右外 */
.about-history__btn--prev .about-history__btn-arrow--next {
    left: 150%;
    opacity: 0;
}
/* ===== SPスクロール誘導 ===== */
.about-history__scroll-hint {
    display: none;
}
/* ===================================
   HISTORY: Responsive (SP)
=================================== */
@media (max-width: 767px) {
    .about-history {
        padding: 6.4rem 0 0;
        overflow: hidden;
        margin-bottom: 0;
        gap: 0;
    }
    .about-history__inner {
        max-width: none;
        gap: 3.2rem;
    }
    .about-history__header-wrap {
        margin-bottom: 3.2rem;
    }
    /* タイトル・コントロールの横padding（SP） */
    .about-history__header-wrap, .about-history__controls-wrap {
        padding: 0 2.4rem;
    }
    /* カード SP サイズ */
    .about-history__card {
        width: 26.4rem;
        gap: 2rem;
    }
    .about-history__card-year {
        font-size: 2.1rem;
    }
    .about-history__card-body {
        border-radius: 1.7rem;
        padding: 1.6rem 2rem 2.4rem;
        gap: 0.4rem;
    }
    .about-history__card-month {
        font-size: 2.2rem;
    }
    .about-history__card-text {
        font-size: 1.4rem;
    }
    /* SP ではボタン非表示（スワイプのみ） */
    .about-history__controls {
        display: none;
    }
    /* SPスクロール誘導（スライダー上に重ねて表示） */
    .about-history__scroll-hint {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10rem;
        height: 10rem;
        border-radius: 50%;
        background-color: rgba(125, 176, 220, 0.5);
        pointer-events: none;
        transition: opacity 0.4s ease;
        z-index: 10;
    }
    .about-history__scroll-hint.is-hidden {
        opacity: 0;
    }
    .about-history__scroll-hint-text {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 1.2rem;
        letter-spacing: 0.1em;
        color: white;
        line-height: 1;
        text-align: center;
    }
}
/* ===================================
   背景モヤ装飾（about-haze）
=================================== */
.about-haze-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.about-haze-inner {
    max-width: 144rem;
    margin: 0 auto;
    height: 100%;
    position: relative;
}
.about-haze {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}
/* filter は img に分けて適用（transform + filter の競合を回避） */
.about-haze img {
    width: 100%;
    height: auto;
    display: block;
    filter: blur(10px);
}
/* PC: 各ハゼ配置 */
.about-haze--01 {
    width: 85rem;
    right: -28rem;
    top: -5rem;
    animation: aboutHaze1 6s ease-in-out infinite;
}
.about-haze--02 {
    width: 68rem;
    left: -30rem;
    top: 60rem;
    animation: aboutHaze2 7s ease-in-out infinite;
}
.about-haze--03 {
    width: 68rem;
    right: -25rem;
    top: 10rem;
    animation: aboutHaze1 8s ease-in-out infinite;
}
.about-haze--04 {
    width: 68rem;
    left: -30rem;
    top: 5rem;
    animation: aboutHaze2 7s ease-in-out infinite;
}
.about-haze--05 {
    width: 85rem;
    right: -28rem;
    bottom: -15rem;
    animation: aboutHaze1 6s ease-in-out infinite;
}
.about-haze--06 {
    width: 68rem;
    left: -30rem;
    bottom: 0;
    animation: aboutHaze2 8s ease-in-out infinite;
}
@keyframes aboutHaze1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(-5rem, 1.5rem) rotate(30deg);
    }
    66% {
        transform: translate(4rem, -1.5rem) rotate(-20deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}
@keyframes aboutHaze2 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    40% {
        transform: translate(6rem, -1.5rem) rotate(-25deg);
    }
    72% {
        transform: translate(-4rem, 1.5rem) rotate(20deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}
@media (max-width: 767px) {
    .about-haze img {
        filter: none;
    }
    .about-haze--01 {
        width: 40rem;
        right: -8rem;
        top: 3rem;
        animation-duration: 14s;
    }
    .about-haze--02 {
        width: 25rem;
        left: -6rem;
        top: 100rem;
        animation-duration: 18s;
    }
    .about-haze--03 {
        width: 25rem;
        right: -5rem;
        top: 1rem;
        animation-duration: 16s;
    }
    .about-haze--04 {
        width: 25rem;
        left: auto;
        right: -6rem;
        top: 3rem;
        animation-duration: 18s;
    }
    .about-haze--05 {
        width: 40rem;
        right: -15rem;
        bottom: -5rem;
        top: auto;
        animation-duration: 14s;
    }
    .about-haze--06 {
        width: 25rem;
        left: -6rem;
        bottom: 0;
        animation-duration: 18s;
    }
}
/* ===================================
   保有資格一覧：2段目用のレイアウト調整（自動グリッド化）
=================================== */
.about-license__cols--mt {
    margin-top: 6.4rem;
}
/* ベンダー資格の枠を横幅いっぱい(100%)にする */
.about-license__col--full {
    flex: 0 0 100%;
    max-width: 100%;
}
/* 中身のリストを自動で2列にするコード */
.about-license__list--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4rem; /* 左右の列の隙間（好みに応じて調整可能） */
}

@media (max-width: 767px) {
    .about-license__cols--mt {
        margin-top: 3.2rem;
    }
    /* スマホ画面では自動的に1列に戻す */
    .about-license__list--grid {
        grid-template-columns: 1fr;
    }
}