/* ===================================================
   page-main.css — トップページ専用スタイル（Figma準拠）
   =================================================== */

/* =============================================
   top / FV（ファーストビュー）
   ============================================= */
.p-top__fv {
    margin-top: var(--header-height);
    position: relative;
    height: 720px;
    overflow: hidden;
}
.p-top__fv-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.p-top__fv-slide {
    position: absolute;
    inset: 0;
    background-image: var(--fv-bg-pc);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.p-top__fv-slide.is-active {
    opacity: 1;
}
.p-top__fv::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 230px;
    background: linear-gradient(to bottom, rgba(228, 246, 255, 0) 0%, rgba(228, 246, 255, 0.8) 100%);
    z-index: 1;
    pointer-events: none;
}
.p-top__fv-inner {
    position: relative;
    z-index: 2;
    padding: 100px 0 0 186px;
}
.p-top__fv-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-white);
    text-shadow: 0px 0px 10px rgba(10, 49, 89, 0.42);
    margin-bottom: var(--space-sm);
}
.p-top__fv-line {
    display: block;
    line-height: normal;
}
.p-top__fv-line--indent {
    padding-left: 43px;
}
.p-top__fv-title span.large {
    font-size: 8.0rem;
}
.p-top__fv-title span.medium {
    font-size: 7.0rem;
}
.p-top__fv-title span.small {
    font-size: 6.0rem;
}
.p-top__fv-inner > p {
    font-family: var(--font-heading);
    font-size: var(--fz-lg);
    font-weight: 700;
    color: var(--color-white);
    text-shadow: 0px 0px 10px rgba(10, 49, 89, 0.43);
    line-height: 2;
    margin-bottom: var(--space-xl);
}
.p-top__fv .c-btn {
    background-color: var(--color-bg-btn);
}
.p-top__fv .c-btn:hover {
    background-color: var(--color-primary);
}

/* ===== FV メインコンテナ ===== */

.p-top__fv::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6.25vw;
    transform: translateX(-50%);
    width: 130%;
    height: 10.42vw;
    background: #e4f6ff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 2;
    pointer-events: none;
}


/* =============================================
   top / ABOUT（企業理念）
   ============================================= */
.p-top__about {
    position: relative;
    padding: 120px 0 80px;
}
.p-top__about::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/bg/top_about_bg.webp') center / cover no-repeat;
    pointer-events: none;
}
.p-top__about-inner {
    position: relative;
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}
.p-top__about-graphic {
    position: relative;
    flex-shrink: 0;
    width: 580px;
    aspect-ratio: 1 / 1;
}
.p-top__about-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
    transition:
        opacity 0.5s ease-out,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-top__about-layer img {
    display: block;
    width: 100%;
    height: auto;
}
.p-top__about-layer--01 { width: 26.85%; z-index: 5; transition-delay: 0.1s; }
.p-top__about-layer--05 { width: 79.86%; z-index: 4; transition-delay: 0.4s; }
.p-top__about-layer--02 { width: 49.91%; z-index: 3; transition-delay: 0.7s; }
.p-top__about-layer--03 { width: 69.54%; z-index: 2; transition-delay: 1.0s; }
.p-top__about-layer--04 { width: 100%;   z-index: 1; transition-delay: 1.3s; }
.p-top__about-graphic.is-active .p-top__about-layer {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .p-top__about-layer {
        transition: none;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
.p-top__about-content {
    max-width: 620px;
}
.p-top__about-content h1 {
    font-family: var(--font-heading);
    font-size: var(--fz-3xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: var(--space-2xl);
}
.p-top__about-content p {
    font-size: var(--fz-base);
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: var(--space-2xl);
}
.p-top__about-content .c-btn {
    gap: 24px;
}

/* =============================================
   top / SERVICE（支援事業）
   ============================================= */
.p-top__service {
    position: relative;
    padding: var(--space-5xl) 0;
    text-align: center;
}
.p-top__service::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: calc(100vw * 448 / 1440);
    background: url('../images/bg/arc-bg.svg') top center / 100% 100% no-repeat;
    pointer-events: none;
    z-index: -1;
}
.p-top__service-heading {
    position: relative;
    margin-bottom: var(--space-2xl);
}
.p-top__service-heading::before {
    content: "";
    display: block;
    width: 23px;
    height: 18px;
    margin: 0 auto var(--space-sm);
    background: url('../images/icons/icon-ttl.svg') no-repeat center / contain;
}
.p-top__service-heading h2 {
    font-family: var(--font-heading);
    font-size: var(--fz-3xl);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.5;
    margin-bottom: var(--space-md);
}
.p-top__service-heading p {
    font-size: var(--fz-base);
    color: var(--color-text);
    line-height: 1.8;
}
.p-top__service-list {
    max-width: var(--content-width);
    margin: 0 auto var(--space-2xl);
}
.p-top__service-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.p-top__service-row a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 160px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-white);
    transition: opacity var(--transition-base);
}
.p-top__service-row a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--hover-grad-1) 35%, var(--hover-grad-2) 100%);
    transition: --hover-grad-1 var(--transition-base), --hover-grad-2 var(--transition-base);
}
.p-top__service-row a:hover {
    opacity: 1;
}
.p-top__service-row a:hover::after {
    --hover-grad-1: rgba(0, 175, 236, 0.8);
    --hover-grad-2: rgba(12, 86, 160, 0.8);
}
.p-top__service-row a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.p-top__service-row a span {
    position: relative;
    z-index: 1;
    font-weight: 700;
}
.p-top__service-row a span.sub {
    font-size: var(--fz-sm);
}
.p-top__service-row a span.main {
    font-size: var(--fz-xl);
}
.p-top__service-row:first-child a {
    flex: 1;
    max-width: 632px;
}
.p-top__service-row:last-child a {
    flex: 1;
    max-width: 416px;
}

/* =============================================
   top / VOICE（お客様の声）
   ============================================= */
.p-top__voice {
    position: relative;
    margin-top: calc(100vw * 100 / 1440);
    padding: 32px 0 4vw;
    text-align: center;
    background: linear-gradient(180deg, #9BE3FC 0%, #01AEEB 35%, #01AEEB 100%);
}
.p-top__voice::before {
    content: "";
    position: absolute;
    top: calc(-1 * 100vw * 46 / 1440);
    left: 50%;
    margin-top: 1px;
    transform: translateX(-50%);
    width: 100vw;
    height: calc(100vw * 46 / 1440);
    background: url('../images/img/top_voice_ark.svg') top center / 100% 100% no-repeat;
    pointer-events: none;
}
/* .p-top__voice::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6.25vw;
    transform: translateX(-50%);
    width: 200%;
    height: 10.5vw;
    background: #fff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 0;
    pointer-events: none;
} */
.p-top__voice-heading {
    position: relative;
    margin-bottom: var(--space-2xl);
}
.p-top__voice-heading::before {
    content: "";
    display: block;
    width: 23px;
    height: 18px;
    margin: 0 auto var(--space-sm);
    background: url('../images/icons/icon-ttl.svg') no-repeat center / contain;
}
.p-top__voice-heading h2 {
    font-family: var(--font-heading);
    font-size: var(--fz-3xl);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.5;
    margin-bottom: var(--space-md);
}
.p-top__voice-heading > p:first-of-type {
    font-family: var(--font-heading);
    font-size: var(--fz-xl);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}
.p-top__voice-heading > p:last-of-type {
    font-size: var(--fz-base);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}
.p-top__voice-list {
    max-width: var(--content-width);
    margin: 0 auto var(--space-2xl);
    display: flex;
    gap: var(--space-2xl);
    justify-content: center;
}
.p-top__voice-card {
    flex: 1;
    max-width: 402px;
    text-align: left;
}
.p-top__voice-card > a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    transition: opacity var(--transition-base);
}
.p-top__voice-card > a:hover {
    opacity: 0.8;
}
.p-top__voice-thumb {
    margin-bottom: var(--space-md);
}
.p-top__voice-thumb img {
    width: 100%;
    height: auto;
    display: block;
}
.p-top__voice-card p {
    font-size: var(--fz-base);
    color: var(--color-white);
    line-height: 1.8;
}
/* =============================================
   top / ALLIANCE（アライアンスパートナー）
   ============================================= */
.p-top__alliance {
    position: relative;
    padding: var(--space-5xl) 0 0;
    max-width: var(--content-width);
    margin: 0 auto;
}
.p-top__alliance::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: calc(100vw * 448 / 1440);
    background: url('../images/bg/arc-bg.svg') top center / 100% 100% no-repeat;
    pointer-events: none;
    z-index: -1;
}
.p-top__alliance h2 {
    font-family: var(--font-heading);
    font-size: var(--fz-2xl);
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
    text-align: center;
    margin-bottom: var(--space-lg);
}
.p-top__alliance > p {
    font-size: var(--fz-base);
    color: var(--color-text);
    line-height: 1.8;
    text-align: center;
    margin-bottom: var(--space-2xl);
}
.p-top__alliance-logos {
    position: relative;
    background-color: var(--color-bg-alliance);
    border: 1px solid var(--color-border-blue);
    border-radius: var(--radius-lg);
    padding: 24px 0;
    overflow: hidden;
    display: flex;
}
.p-top__alliance-logos > div {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    padding-right: var(--space-2xl);
    animation: alliance-marquee 25s linear infinite;
}
.p-top__alliance-logos > div > img {
    height: 56px;
    width: auto;
    flex-shrink: 0;
}
@keyframes alliance-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
/* ----- 停止/再生コントロール ----- */
.p-top__alliance-logos.is-paused > div {
    animation-play-state: paused;
}
/* 右端フェード（ロゴをボタン背後でフェードアウト） */
.p-top__alliance-logos::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 120px;
    background: linear-gradient(to right, rgba(250, 254, 255, 0), var(--color-bg-alliance) 60%);
    pointer-events: none;
    z-index: 1;
}
.p-top__alliance-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-md);
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5.57px;
    width: 26px;
    height: 26px;
    padding: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-dark);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity var(--transition-base);
}
.p-top__alliance-toggle:hover {
    opacity: 0.7;
}
/* 再生中：一時停止アイコン（縦バー2本） */
.p-top__alliance-toggle::before,
.p-top__alliance-toggle::after {
    content: "";
    width: 2.786px;
    height: 11.143px;
    background-color: var(--color-primary);
}
/* 停止中：再生アイコン（三角） */
.p-top__alliance-logos.is-paused .p-top__alliance-toggle {
    gap: 0;
}
.p-top__alliance-logos.is-paused .p-top__alliance-toggle::before {
    width: 0;
    height: 0;
    background-color: transparent;
    border-style: solid;
    border-width: 5.5px 0 5.5px 9px;
    border-color: transparent transparent transparent var(--color-primary);
}
.p-top__alliance-logos.is-paused .p-top__alliance-toggle::after {
    display: none;
}

/* =============================================
   top / CTA（お問い合わせ）
   ============================================= */
.p-top__cta {
    padding: var(--space-2xl);
    max-width: var(--content-width);
    margin: var(--space-4xl) auto 0;
    background-color: var(--color-bg-cta);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}
.p-top__cta-text {
    max-width: 541px;
    flex-shrink: 0;
}
.p-top__cta-text h2 {
    font-family: var(--font-serif);
    font-size: var(--fz-xl);
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1.8;
    margin-bottom: var(--space-sm);
}
.p-top__cta-text p {
    font-size: var(--fz-base);
    color: var(--color-text);
    line-height: 1.8;
}
.p-top__cta-separator {
    width: 1px;
    align-self: stretch;
    background-color: var(--color-border-dark);
    flex-shrink: 0;
}
.p-top__cta-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.p-top__cta-mail {
    text-align: center;
}
.p-top__cta-mail > p {
    font-size: var(--fz-sm);
    color: var(--color-text);
    margin-bottom: 4px;
}
.p-top__cta-mail .c-conversion {
    width: 250px;
}
.p-top__cta-tel {
    text-align: center;
}
.p-top__cta-tel > p:first-child {
    font-size: var(--fz-sm);
    color: var(--color-text);
    margin-bottom: 4px;
}
.p-top__cta-tel > div {
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    padding: 10px 25px;
}
.p-top__cta-tel > div p:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: var(--fz-2xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.p-top__cta-tel > div p:first-child img {
    width: 24px;
    height: 24px;
}
.p-top__cta-tel > div p:last-child {
    font-size: var(--fz-base);
    color: var(--color-text);
    text-align: right;
}

/* =============================================
   top / CASE（事例紹介）
   ============================================= */
.p-top__case {
    padding: 0 0 var(--space-5xl);
    max-width: var(--content-width);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.p-top__case::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #F2FBFE;
    z-index: -1;
}
.p-top__case-heading {
    position: relative;
    margin-bottom: var(--space-md);
}
.p-top__case-heading::before {
    content: "";
    display: block;
    width: 23px;
    height: 18px;
    margin: 0 auto var(--space-sm);
    background: url('../images/icons/icon-ttl.svg') no-repeat center / contain;
}
.p-top__case-heading h2 {
    font-family: var(--font-heading);
    font-size: var(--fz-3xl);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.5;
    position: relative;
}
.p-top__case-tabs {
    text-align: left;
}
.p-top__case-tabs > p {
    font-size: var(--fz-base);
    color: var(--color-text);
    line-height: 1.8;
    text-align: center;
    margin-bottom: var(--space-2xl);
    position: relative;
    
}
.p-top__case-tab-buttons {
    display: flex;
    margin-bottom: -1px;
}
.p-top__case-tab-buttons button {
    flex: 1;
    padding: 10px;
    border: none;
    cursor: pointer;
    appearance: none;
    font-family: var(--font-heading);
    font-size: var(--fz-xl);
    font-weight: 700;
    text-align: center;
    transition: all var(--transition-base);
}
.p-top__case-tab-buttons button.is-active {
    background-color: var(--color-accent);
    color: var(--color-white);
}
.p-top__case-tab-buttons button:not(.is-active) {
    background-color: var(--color-tab-inactive);
    color: var(--color-text-gray);
}
.p-top__case-tab-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.p-top__case-tab-content[hidden] {
    display: none;
}
.p-top__case-tab-content a {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    height: 88px;
    padding: 24px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-gray);
    margin-right: -1px;
    margin-bottom: -1px;
    transition: background-color var(--transition-base);
}
.p-top__case-tab-content a:hover {
    opacity: 1;
    background-color: #f8fcff;
}
.p-top__case-tab-content a img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.p-top__case-tab-content a span {
    font-size: var(--fz-base);
    color: var(--color-text);
    line-height: 1.8;
}
.p-top__case-tab-content[data-tab-content="management"] a:last-child {
    justify-content: space-between;
}
.p-top__case-tab-content[data-tab-content="management"] a:last-child::after {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: url('../images/icons/icon_arrow_right.svg') no-repeat center / contain;
}

/* =============================================
   top / 区切りアーチ（voice → cta2）
   ============================================= */
.p-top__arch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    /* 写真(::before)と同一ボックス・同一coverで白線を描き、カーブにロックする */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2880 1200' width='2880' height='1200'%3E%3Cpath d='M-1912 899 C-1912 404.152%2C-411.258 3%2C1440 3 C3291.26 3%2C4792 404.152%2C4792 899' fill='none' stroke='%23ffffff' stroke-width='6'/%3E%3C/svg%3E") top / cover no-repeat;
    z-index: 0;
    pointer-events: none;
}

/* =============================================
   top / CTA2（中小企業もコンサルティングで強くなる）
   ============================================= */
.p-top__cta2 {
    position: relative;
    padding: 140px 0 180px;
    max-width: var(--content-width);
    margin: 0 auto;
    color: var(--color-white);
    z-index: 1;
}
.p-top__cta2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: url('../images/img/p-top__cta2_bg.webp') top / cover no-repeat;
    background-color: #01AEEB; /* 写真上端の透明カーブ部分に下地の青を出す */
    z-index: -1;
}
.p-top__cta2 h2 {
    font-family: var(--font-heading);
    font-size: var(--fz-3xl);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: var(--space-md);
}
.p-top__cta2 > p {
    font-size: var(--fz-base);
    line-height: 1.8;
    max-width: 400px;
    margin-bottom: var(--space-lg);
}
.p-top__cta2 {
    position: relative;
  }
  
/* 下部の湾曲（FVと同じ仕様） */

.p-top__cta2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6.25vw;
    transform: translateX(-50%);
    width: 200vw;
    height: 10.5vw;
    background: #F2FBFE;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 0;
    pointer-events: none;
}

/* =============================================
   top / NEWS（新着情報）
   ============================================= */
.p-top__news {
    padding: 0 0 var(--space-5xl);
    max-width: var(--content-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.p-top__news::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #F2FBFE;
    z-index: -1;
}
.p-top__news-heading {
    position: relative;
    text-align: center;
    margin-bottom: var(--space-2xl);
}
.p-top__news-heading::before {
    content: "";
    display: block;
    width: 23px;
    height: 18px;
    margin: 0 auto 10px;
    position: relative;
    z-index: 1;
    background: url('../images/icons/icon-ttl.svg') no-repeat center / contain;
}
.p-top__news-heading h2 {
    font-family: var(--font-heading);
    font-size: var(--fz-3xl);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.5;
    position: relative;
    z-index: 1;
}
.p-top__news-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: var(--space-2xl);
    position: relative;
}
.p-top__news-tabs > button {
    width: 110px;
    padding: 2px 8px;
    text-align: center;
    font-family: inherit;
    font-size: var(--fz-xs);
    color: var(--color-primary);
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    line-height: 1.8;
    cursor: pointer;
    transition: all var(--transition-base);
}
.p-top__news-tabs > button:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    opacity: 1;
}
.p-top__news-tabs > button.is-active {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.p-top__news-empty {
    text-align: center;
    padding: var(--space-2xl) 0;
    margin-bottom: var(--space-2xl);
}
.p-top__news-empty > p {
    color: var(--color-text-gray);
    font-size: var(--fz-base);
}
.p-top__news-list {
    margin-bottom: var(--space-2xl);
    border-top: 1px solid var(--color-border-dark);
}
.p-top__news-list > div {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-dark);
}
.p-top__news-list dt {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}
.p-top__news-list dt time {
    font-size: var(--fz-base);
    color: var(--color-text);
    line-height: 1.8;
}
.p-top__news-list dt span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    padding: 2px 8px;
    font-size: var(--fz-xs);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    line-height: 1.8;
}
.p-top__news-list dd {
    font-size: var(--fz-base);
    line-height: 1.8;
}
.p-top__news-list dd a {
    color: var(--color-text);
    transition: color var(--transition-base);
}
.p-top__news-list dd a:hover {
    opacity: 1;
    color: var(--color-primary);
}
.p-top__news > .c-btn {
    display: flex;
    margin: 0 auto;
}

/* =============================================
   top / COMPANY（会社情報）
   ============================================= */
.p-top__company {
    position: relative;
    padding: var(--space-5xl) 0;
    max-width: var(--content-width);
    margin: 0 auto;
    text-align: center;
}
.p-top__company::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: calc(100vw * 448 / 1440);
    /* 全面 F2FBFE→白（透明な角が出ないよう塗りつぶし／カーブは ::after の白線で表現） */
    background: linear-gradient(180deg, #F2FBFE 0%, #ffffff 100%);
    pointer-events: none;
    z-index: -1;
}
.p-top__company::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: calc(100vw * 448 / 1440);
    /* アーチカーブ上に重ねる白線（::before と同一ボックス・同一カーブ） */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 448' width='1440' height='448' preserveAspectRatio='none'%3E%3Cpath d='M-956 450 C-956 202.576%2C -205.629 2%2C 720 2 C1645.63 2%2C 2396 202.576%2C 2396 450' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3C/svg%3E") top center / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 0;
}
.p-top__company-heading {
    position: relative;
    margin-bottom: var(--space-2xl);
}
.p-top__company-heading::before {
    content: "";
    display: block;
    width: 23px;
    height: 18px;
    margin: 0 auto 10px;
    background: url('../images/icons/icon-ttl.svg') no-repeat center / contain;
}
.p-top__company-heading h2 {
    font-family: var(--font-heading);
    font-size: var(--fz-3xl);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.5;
}
.p-top__company-list {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
}
.p-top__company-list a {
    flex: 1;
    max-width: 411px;
    display: block;
    position: relative;
    overflow: hidden;
    transition: opacity var(--transition-base);
}
.p-top__company-list a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* @property の初期値(青0.6)を上書きし、静止時は透明に（ホバーで青を表示）。@property inherits:false のため ::after 自身に指定する */
    --hover-grad-1: rgba(0, 175, 236, 0);
    --hover-grad-2: rgba(12, 86, 160, 0);
    background: linear-gradient(135deg, var(--hover-grad-1) 35%, var(--hover-grad-2) 100%);
    transition: --hover-grad-1 var(--transition-base), --hover-grad-2 var(--transition-base);
}
.p-top__company-list a:hover {
    opacity: 1;
}
.p-top__company-list a:hover::after {
    --hover-grad-1: rgba(0, 175, 236, 0.8);
    --hover-grad-2: rgba(12, 86, 160, 0.8);
}
.p-top__company-list a img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1279px) {
    .p-top__fv {
       height: 640px;
    }
    .p-top__fv-inner {
        padding: 80px 0 0 80px;
    }
    /* ----- ABOUT（≤1279px：graphic / content を 5:5 等分） ----- */
    .p-top__about-inner {
        gap: var(--space-2xl);
        align-items: center;
    }
    .p-top__about-graphic {
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }
    .p-top__about-content {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
    .p-top__about-content .c-btn {
        width: 100%;
        max-width: 320px;
    }
    /* ----- CTA（≤1279px：text / buttons を 5:5 等分） ----- */
    .p-top__cta-text {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
    .p-top__cta-buttons {
        flex: 1 1 0;
        min-width: 0;
    }

    .p-top__cta-tel > div {
        white-space: nowrap;
    }
}

/* =============================================
   1280px以下：各セクションに左右16pxの余白を付与
   （1281px以上は1280px固定で余白なし。端への張り付き防止）
   ============================================= */
@media screen and (max-width: 1280px) {
    /* 全幅背景 / 通常セクション：中身を左右16px内側へ（背景は全幅維持） */
    .p-top__about,
    .p-top__service,
    .p-top__voice,
    .p-top__alliance,
    .p-top__cta2,
    .p-top__case,
    .p-top__news,
    .p-top__company {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    /* CTAバンド（カード型）：カード自体に左右マージン */
    .p-top__cta {
        margin-left: var(--space-md);
        margin-right: var(--space-md);
    }
}

/* =============================================
   レスポンシブ — タブレット (1024px以下)
   ============================================= */
@media screen and (max-width: 1024px) {
    /* ----- FV（タブレット） ----- */
    .p-top__fv {
        height: 560px;
        display: flex;
        align-items: center;
    }
    .p-top__fv::before {
        background-position: 70% center;
    }
    .p-top__fv-inner {
        width: 100%;
        padding: 0 var(--space-md);
    }
    .p-top__fv-line--indent {
        padding-left: 20px;
    }
    .p-top__fv-title span.large {
        font-size: 5.6rem;
    }
    .p-top__fv-title span.medium {
        font-size: 5.0rem;
    }
    .p-top__fv-title span.small {
        font-size: 4.0rem;
    }
    /* ----- ABOUT（タブレット：5:5 等分は 1279px ルールで処理。ここでは padding と文字サイズのみ） ----- */
    .p-top__about {
        padding: var(--space-5xl) var(--space-2xl);
    }
    .p-top__about-content h1 {
        font-size: var(--fz-2xl);
        margin-bottom: var(--space-lg);
    }
    .p-top__about-content p {
        margin-bottom: var(--space-lg);
    }
    .p-top__about-content .c-btn {
        width: 100%;
        max-width: 320px;
        padding: 14px;
    }
    /* ----- SERVICE（タブレット：横並び維持） ----- */
    .p-top__service {
        padding: var(--space-4xl) var(--space-2xl);
    }
    .p-top__service-list {
        padding: 0;
    }
    .p-top__service-row {
        gap: 12px;
        margin-bottom: 12px;
    }
    .p-top__service-row a {
        height: 140px;
    }
    .p-top__service-row:first-child a {
        flex: 1;
        max-width: none;
    }
    .p-top__service-row:last-child {
        flex-wrap: wrap;
    }
    .p-top__service-row:last-child a {
        flex: 0 0 calc(50% - 6px);
        max-width: none;
    }
    .p-top__service-row:last-child a:last-child {
        flex-basis: 100%;
    }
    .p-top__service-row a span.sub {
        font-size: var(--fz-xs);
    }
    .p-top__service-row a span.main {
        font-size: var(--fz-lg);
    }
    /* ----- VOICE（タブレット：3カード横並び維持） ----- */
    .p-top__voice {
        margin-top: var(--space-5xl);
        padding: var(--space-3xl) var(--space-2xl) 64px;
    }
    .p-top__voice-list {
        padding: 0;
        gap: var(--space-lg);
    }
    .p-top__voice-card {
        flex: 1;
        max-width: none;
    }
    .p-top__voice-card > p {
        font-size: var(--fz-sm);
    }
    /* ----- ALLIANCE（タブレット） ----- */
    .p-top__alliance {
        padding: var(--space-4xl) var(--space-2xl) 0;
    }
    .p-top__alliance-logos {
        padding: 20px 24px;
    }
    .p-top__alliance-logos img {
        height: 48px;
    }
    /* ----- CTA（タブレット：横2分割維持） ----- */
    .p-top__cta {
        padding: var(--space-2xl);
        margin: var(--space-2xl) var(--space-2xl) 0;
    }
    .p-top__cta-text {
        flex: 1;
        max-width: none;
    }
    .p-top__cta-text h2 {
        font-size: var(--fz-lg);
    }
    .p-top__cta-text p {
        font-size: var(--fz-sm);
    }
    .p-top__cta-buttons {
        flex-direction: column;
        gap: 12px;
        max-width: 220px;
    }
    .p-top__cta-mail .c-conversion {
        width: 100%;
        min-width: 0;
        height: 56px;
    }
    .p-top__cta-tel > div {
        padding: 8px 16px;

    }
    .p-top__cta-tel > div p:first-child {
        font-size: var(--fz-xl);
    }
    .p-top__cta-tel > div p:last-child {
        font-size: var(--fz-xs);
    }
    /* ----- CASE（タブレット：3列維持） ----- */
    .p-top__case {
        padding: var(--space-4xl) var(--space-2xl);
    }
    .p-top__case-tab-content a {
        height: 80px;
        padding: 20px;
        gap: var(--space-sm);
    }
    .p-top__case-tab-content a img {
        width: 36px;
        height: 36px;
    }
    .p-top__case-tab-content a span {
        font-size: var(--fz-sm);
    }
    /* ----- CTA2（タブレット） ----- */
    .p-top__cta2 {
        padding: var(--space-4xl) var(--space-2xl) 12.5vw;
        text-align: center;
    }
    .p-top__cta2 h2 {
        font-size: var(--fz-2xl);
    }
    .p-top__cta2 > p {
        max-width: 560px;
        margin: 0 auto var(--space-lg);
    }
    .p-top__cta2 .c-btn {
        margin: 0 auto;
        display: flex;
    }
    /* ----- NEWS（タブレット：1行維持） ----- */
    .p-top__news {
        padding: var(--space-4xl) var(--space-2xl);
    }
    .p-top__news-list > div {
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: var(--space-md);
        padding: 16px 12px;
    }
    .p-top__news-list dt {
        flex-shrink: 0;
        gap: var(--space-md);
    }
    .p-top__news-list dd {
        flex: 1;
        min-width: 0;
    }
    /* ----- COMPANY（タブレット：2列＋最後1個フル幅） ----- */
    .p-top__company {
        padding: var(--space-4xl) var(--space-2xl);
    }
    .p-top__company-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    .p-top__company-list a {
        max-width: none;
    }
    .p-top__company-list a:nth-child(3) {
        grid-column: span 2;
    }
}

/* =============================================
   レスポンシブ — スマートフォン (600px以下)
   ============================================= */
@media screen and (max-width: 600px) {
    /* ----- FV（SP） ----- */
    .p-top__fv {
        height: clamp(400px, 70vh, 520px);
    }
    /* スマホ用スライド画像に切替（未設定スライドはPC画像で代替） */
    .p-top__fv-slide {
        background-image: var(--fv-bg-sp);
    }
    .p-top__fv::before {
        background-position: 65% center;
    }
    .p-top__fv-line--indent {
        padding-left: 8px;
    }
    .p-top__fv-inner h1 span.large {
        font-size: 4.8rem;
    }
    .p-top__fv-inner h1 span.medium {
        font-size: 4.0rem;
    }
    .p-top__fv-inner h1 span.small {
        font-size: 3.2rem;
    }
    .p-top__fv-inner > p {
        font-size: var(--fz-sm);
        line-height: 1.7;
    }
    /* ----- ABOUT（SP：縦積み） ----- */
    .p-top__about {
        padding: var(--space-3xl) var(--space-md);
    }
    .p-top__about::before {
        background-position: -80px;
    }
    .p-top__about-inner {
        flex-direction: column;
        gap: var(--space-lg);
    }
    .p-top__about-graphic {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    .p-top__about-content {
        text-align: left;
    }
    .p-top__about-content h1 {
        font-size: var(--fz-xl);
        text-align: center;
        margin-bottom: var(--space-md);
    }
    .p-top__about-content p {
        margin-bottom: var(--space-lg);
    }
    .p-top__about-content .c-btn {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        display: flex;
    }
    /* ----- SERVICE（SP） ----- */
    .p-top__service {
        padding: var(--space-3xl) var(--space-md);
    }
    .p-top__service-heading h2 {
        font-size: var(--fz-2xl);
    }
    /* 1段目（大2カード）: 2列横並び */
    .p-top__service-row:first-child {
        gap: 10px;
    }
    .p-top__service-row:first-child a {
        height: 100px;
    }
    /* 2段目（小3カード）: 2列wrap + 最後100% */
    .p-top__service-row:last-child {
        gap: 10px;
    }
    .p-top__service-row:last-child a {
        box-sizing: border-box;
        flex-basis: calc(50% - 5px);
        height: 100px;
        padding: 8px;
    }
    /* ----- VOICE（SP：1カラム縦積み） ----- */
    .p-top__voice {
        padding: var(--space-3xl) var(--space-md) 64px;
    }
    .p-top__voice-heading h2 {
        font-size: var(--fz-2xl);
    }
    .p-top__voice-heading > p:first-of-type {
        font-size: var(--fz-lg);
    }
    .p-top__voice-heading > p:last-of-type {
        font-size: var(--fz-sm);
    }
    .p-top__voice-list {
        flex-direction: column;
        align-items: center;
        gap: var(--space-lg);
    }
    .p-top__voice-card {
        max-width: 440px;
        width: 100%;
    }
    .p-top__voice-card > p {
        font-size: var(--fz-sm);
        line-height: 1.7;
    }
    /* ----- ALLIANCE（SP：マーキー継続） ----- */
    .p-top__alliance {
        padding: var(--space-3xl) var(--space-md) 0;
    }
    .p-top__alliance h2 {
        font-size: var(--fz-xl);
    }
    .p-top__alliance > p {
        font-size: var(--fz-sm);
    }
    .p-top__alliance-logos {
        padding: 16px 12px;
    }
    .p-top__alliance-logos img {
        height: 32px;
    }
    /* ----- CTA（SP：完全縦積み） ----- */
    .p-top__cta {
        flex-direction: column;
        padding: var(--space-xl) var(--space-md);
        margin: var(--space-xl) var(--space-md) 0;
        text-align: center;
    }
    .p-top__cta-separator {
        display: none;
    }
    .p-top__cta-text {
        width: 100%;
    }
    .p-top__cta-text h2 {
        font-size: var(--fz-lg);
    }
    .p-top__cta-text p {
        font-size: var(--fz-sm);
    }
    .p-top__cta-buttons {
        width: 100%;
        flex-direction: column;
        gap: var(--space-md);
        max-width: 300px;
    }
    .p-top__cta-mail {
        width: 100%;
    }
    .p-top__cta-mail .c-conversion {
        width: 100%;
        max-width: 360px;
        min-width: 0;
        height: 56px;
        margin: 0 auto;
    }
    .p-top__cta-tel {
        width: 100%;
    }
    .p-top__cta-tel > div {
        padding: 8px 16px;
    }
    .p-top__cta-tel > div p:first-child {
        font-size: var(--fz-xl);
    }
    .p-top__cta-tel > div p:last-child {
        font-size: var(--fz-xs);
        text-align: center;
    }
    /* ----- CASE（SP：2列化） ----- */
    .p-top__case {
        padding: var(--space-3xl) var(--space-md);
    }
    .p-top__case-heading h2 {
        font-size: var(--fz-2xl);
    }
    .p-top__case-tabs > p {
        font-size: var(--fz-sm);
    }
    .p-top__case-tab-buttons button {
        font-size: var(--fz-base);
        padding: 8px 4px;
    }
    .p-top__case-tab-content {
        grid-template-columns: repeat(2, 1fr);
    }
    .p-top__case-tab-content a {
        height: 72px;
        padding: 12px;
        gap: var(--space-sm);
    }
    .p-top__case-tab-content a img {
        width: 32px;
        height: 32px;
    }
    .p-top__case-tab-content a span {
        font-size: var(--fz-sm);
        line-height: 1.4;
    }
    .p-top__case-tab-content[data-tab-content="management"] a:last-child {
        justify-content: center;
    }
    /* ----- CTA2（SP） ----- */
    .p-top__cta2 {
        padding: var(--space-3xl) var(--space-md) 12.5vw;
    }
    .p-top__cta2 h2 {
        font-size: var(--fz-2xl);
    }
    .p-top__cta2 > p {
        font-size: var(--fz-sm);
        max-width: 100%;
        margin: 0 auto var(--space-md);
    }
    /* ----- NEWS（SP） ----- */
    .p-top__news {
        padding: var(--space-3xl) var(--space-md);
    }
    .p-top__news-heading h2 {
        font-size: var(--fz-2xl);
    }
    .p-top__news-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }
    .p-top__news-tabs button {
        flex: 1 1 calc(33.333% - 4px);
        width: auto;
        min-width: 0;
        padding: 4px 6px;
        font-size: 1rem;
    }
    .p-top__news-list > div {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        padding: 12px 4px;
    }
    .p-top__news-list dt {
        gap: var(--space-sm);
    }
    .p-top__news-list dt time {
        font-size: var(--fz-xs);
    }
    .p-top__news-list dt span {
        width: auto;
        min-width: 90px;
        padding: 0 6px;
        font-size: 1rem;
    }
    .p-top__news-list dd {
        font-size: var(--fz-sm);
        line-height: 1.6;
    }
    /* ----- COMPANY（SP：3段縦積み・高さ100px） ----- */
    .p-top__company {
        padding: var(--space-3xl) var(--space-md);
    }
    .p-top__company-heading h2 {
        font-size: var(--fz-2xl);
    }
    .p-top__company-list {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        justify-items: center;
    }
    .p-top__company-list a {
        width: 100%;
        max-width: 440px;
    }
    .p-top__company-list a:nth-child(3) {
        grid-column: auto;
    }
}

.wpcf7-spinner {
    display: none !important;
}