/* =========================================
   TOP PAGE
   Guard Service Nagasaki
========================================= */

:root {
    --top-navy: #173a70;
    --top-navy-dark: #102f5e;
    --top-red: #c5161d;
    --top-text: #2f3540;
    --top-muted: #667085;
    --top-line: #dfe4ea;
    --top-bg-soft: #f5f8fc;
    --top-white: #ffffff;
    --top-shadow: 0 8px 24px rgba(15, 35, 68, 0.08);
}

body.top-body {
    margin: 0;
    color: var(--top-text);
    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        sans-serif;
}

.top-body *,
.top-body *::before,
.top-body *::after {
    box-sizing: border-box;
}

.top-body img {
    max-width: 100%;
}


/* =========================================
   Header
========================================= */

.top-header {
    position: relative;
    z-index: 1000;

    width: 100%;
    height: 80px;

    background: var(--top-white);
    border-bottom: 3px solid var(--top-red);
}

.top-header__inner {
    width: min(1600px, calc(100% - 60px));
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;
}

.top-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.top-header__logo img {
    display: block;

    width: 285px;
    max-width: 100%;
    height: auto;
}

.top-header__nav {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 34px;
}

.top-header__nav a {
    position: relative;

    color: #222222;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    text-decoration: none;

    transition: color 0.3s ease;
}

.top-header__nav > a:not(.top-header__instagram)::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -12px;

    width: 0;
    height: 2px;

    background: var(--top-red);

    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.top-header__nav > a:not(.top-header__instagram):hover,
.top-header__nav > a:not(.top-header__instagram):focus-visible {
    color: var(--top-red);
}

.top-header__nav > a:not(.top-header__instagram):hover::after,
.top-header__nav > a:not(.top-header__instagram):focus-visible::after {
    width: 100%;
}

.top-header__contact {
    color: var(--top-red) !important;
}

.top-header__instagram {
    width: 34px;
    height: 34px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #222222;
}

.top-header__instagram svg {
    width: 30px;
    height: 30px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.top-header__instagram .instagram-dot {
    fill: currentColor;
    stroke: none;
}

.top-header__instagram:hover,
.top-header__instagram:focus-visible {
    color: var(--top-red);
}


/* =========================================
   Hamburger
========================================= */

.top-menu-button {
    display: none;

    width: 44px;
    height: 44px;

    margin-left: auto;
    padding: 0;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
    background-color: transparent !important;

    appearance: none;
    -webkit-appearance: none;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 6px;

    cursor: pointer;
}

.top-menu-button:hover,
.top-menu-button:focus,
.top-menu-button:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
    background-color: transparent !important;
}

.top-menu-button span {
    display: block;

    width: 27px;
    height: 3px;

    margin: 0;
    padding: 0;

    border-radius: 10px;

    background: var(--top-red);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* =========================================
   Hero
========================================= */

.top-hero {
    --hero-image: none;

    position: relative;

    width: 100%;
    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image: var(--hero-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.top-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 24, 48, 0.76) 0%,
            rgba(8, 24, 48, 0.62) 30%,
            rgba(8, 24, 48, 0.22) 58%,
            rgba(8, 24, 48, 0) 80%
        );
}

.top-hero__inner {
    position: relative;
    z-index: 2;

    width: min(1400px, calc(100% - 100px));

    margin: 0 auto;
}

.top-hero__content {
    width: min(860px, 68%);
}

.top-hero__lead {
    margin: 0 0 18px;

    color: var(--top-white);

    font-size: clamp(18px, 1.8vw, 28px);
    font-weight: 700;
    letter-spacing: 0.08em;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.top-hero__title {
    margin: 0;

    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    color: var(--top-red);

    font-size: clamp(30px, 3vw, 48px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.25);
}

.top-hero__title span,
.top-hero__title i {
    color: var(--top-red);
}

.top-hero__title i {
    margin: 0 12px;
    font-style: normal;
}

.top-hero__catch {
    margin: 14px 0 0;

    color: var(--top-white);

    font-size: clamp(24px, 2.5vw, 38px);
    font-weight: 700;
    line-height: 1.5;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.top-hero__line {
    width: 60px;
    height: 4px;

    margin: 26px 0 28px;

    background: var(--top-red);
}

.top-hero__text {
    max-width: 700px;

    margin: 0;

    color: rgba(255, 255, 255, 0.92);

    font-size: 16px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.04em;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}


/* =========================================
   News / Instagram
========================================= */

.top-info {
    position: relative;

    width: 100%;

    padding: 70px 30px 75px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--top-white) 0%,
            var(--top-white) 55%,
            var(--top-bg-soft) 100%
        );
}

.top-info::before {
    content: "";

    position: absolute;
    top: -120px;
    right: -150px;

    width: 500px;
    height: 500px;

    background: rgba(23, 58, 112, 0.035);

    transform: rotate(45deg);

    pointer-events: none;
}

.top-info__inner {
    position: relative;
    z-index: 2;

    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 80px;
}

.top-info__news,
.top-info__instagram {
    min-width: 0;
}

.top-info__heading {
    margin-bottom: 26px;
}

.top-info__heading-main {
    min-height: 35px;

    display: flex;
    align-items: center;

    gap: 9px;
}

.top-info__heading-line {
    display: block;

    width: 4px;
    height: 25px;

    background: var(--top-red);
}

.top-info__heading h2 {
    margin: 0;

    color: var(--top-navy);

    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
}

.top-info__heading-en {
    margin-left: 2px;

    color: var(--top-red);

    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.04em;
}


/* =========================================
   News
========================================= */

.top-news__list {
    width: 100%;

    border-top: 1px solid #d9dee6;
}

.top-news__item {
    min-height: 50px;

    display: grid;
    grid-template-columns: 100px 92px minmax(0, 1fr);
    align-items: center;

    gap: 13px;

    padding: 7px 0;

    border-bottom: 1px solid #e1e5eb;

    text-decoration: none;
}

.top-news__date {
    color: #666666;

    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.top-news__category {
    min-height: 25px;

    padding: 4px 8px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--top-navy);
    color: var(--top-white);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;

    transition: background 0.3s ease;
}

.top-news__title {
    min-width: 0;

    color: #333333;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;

    overflow-wrap: anywhere;

    transition: color 0.3s ease;
}

.top-news__item:hover .top-news__category,
.top-news__item:focus-visible .top-news__category {
    background: var(--top-red);
}

.top-news__item:hover .top-news__title,
.top-news__item:focus-visible .top-news__title {
    color: var(--top-red);
}

.top-info__more {
    margin-top: 18px;

    text-align: right;
}

.top-info__more a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--top-red);

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}

.top-info__more a span {
    transition: transform 0.3s ease;
}

.top-info__more a:hover span,
.top-info__more a:focus-visible span {
    transform: translateX(5px);
}


/* =========================================
   Instagram
========================================= */

.top-info__instagram {
    width: 100%;
}

.top-info__instagram-icon {
    width: 24px;
    height: 24px;

    fill: none;
    stroke: var(--top-red);
    stroke-width: 2;
}

.top-info__instagram-icon .instagram-dot {
    fill: var(--top-red);
    stroke: none;
}

.top-info__instagram .top-info__heading h2 {
    color: var(--top-navy);
}

.top-instagram-feed {
    width: 100%;
    max-width: 500px;

    margin-left: auto;
}


/* =========================================
   Service
========================================= */

.top-service {
    position: relative;

    width: 100%;

    padding: 90px 30px 120px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--top-white) 0%,
            var(--top-white) 72%,
            var(--top-bg-soft) 100%
        );
}

.top-service::before {
    content: "";

    position: absolute;
    left: -220px;
    bottom: -250px;

    width: 520px;
    height: 520px;

    background: rgba(197, 22, 29, 0.025);

    transform: rotate(45deg);

    pointer-events: none;
}

.top-service__bg-text {
    position: absolute;
    top: 34px;
    right: 7%;

    color: rgba(23, 58, 112, 0.055);

    font-size: clamp(100px, 11vw, 180px);
    font-weight: 800;
    line-height: 1;

    pointer-events: none;
    user-select: none;
}

.top-service__inner {
    position: relative;
    z-index: 2;

    width: min(1200px, 100%);

    margin: 0 auto;
}

.top-service__heading {
    width: 100%;

    margin: 0 0 55px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 60px;
}

.top-service__heading-title {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    flex-shrink: 0;
}

.top-service__heading-title > span {
    display: block;

    width: 4px;
    height: 58px;

    margin-top: 2px;

    background: var(--top-red);
}

.top-service__heading-title h2 {
    margin: 0;

    color: var(--top-navy);

    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

.top-service__heading-title p {
    margin: 8px 0 0;

    color: #333333;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.top-service__heading-copy {
    width: 100%;
    max-width: 620px;
}

.top-service__heading-copy h3 {
    margin: 0 0 10px;

    color: var(--top-navy);

    font-size: 25px;
    font-weight: 700;
    line-height: 1.5;
}

.top-service__heading-copy p {
    margin: 0;

    color: #555555;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
}

.top-service__grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* center → flex-start に変更 */
    justify-content: flex-start;
    align-items: stretch;
    gap: 32px 26px;
}

.top-service__item {
    position: relative;
    flex: 0 0 calc((100% - 52px) / 3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--top-white);
    box-shadow: var(--top-shadow);
}

.top-service__item::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 4px;

    background: var(--top-navy);
}

.top-service__image {
    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #eeeeee;
}

.top-service__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.top-service__content {
    flex: 1;

    min-height: 220px;

    padding: 22px 24px 30px;
}

.top-service__en {
    margin: 0 0 7px;

    color: var(--top-red);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.top-service__title {
    position: relative;

    margin: 0 0 16px;
    padding-bottom: 12px;

    color: var(--top-navy);

    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
}

.top-service__title::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 55px;
    height: 2px;

    background: var(--top-red);
}

.top-service__text {
    margin: 0;

    color: #333333;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.9;
}

/* サービス一覧ボタンは使用しない */
.top-service__more {
    display: none;
}

.sp-only {
    display: none;
}

/* =========================================
   Staff
========================================= */

.top-staff {
    position: relative;

    width: 100%;

    padding: 100px 30px 120px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--top-bg-soft) 0%,
            #eef3fb 72%,
            var(--top-white) 100%
        );
}


/* 背景文字 */
.top-staff__bg-text {
    position: absolute;

    top: 35px;
    right: 7%;

    color: rgba(23, 58, 112, 0.055);

    font-size: clamp(100px, 11vw, 180px);
    font-weight: 800;

    line-height: 1;

    pointer-events: none;
    user-select: none;
}


/* =========================================
   Inner
========================================= */

.top-staff__inner {
    position: relative;
    z-index: 2;

    width: min(1200px, 100%);

    margin: 0 auto;
}


/* =========================================
   Heading
========================================= */

.top-staff__heading {
    width: 100%;

    margin: 0 0 55px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 60px;
}


.top-staff__heading-title {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    flex-shrink: 0;
}


.top-staff__heading-title > span {
    display: block;

    width: 4px;
    height: 58px;

    margin-top: 2px;

    background: var(--top-red);
}


.top-staff__heading-title h2 {
    margin: 0;

    color: var(--top-navy);

    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}


.top-staff__heading-title p {
    margin: 8px 0 0;

    color: #333333;

    font-size: 12px;
    font-weight: 600;
}


.top-staff__heading-copy {
    width: 100%;
    max-width: 620px;
}


.top-staff__heading-copy h3 {
    margin: 0 0 10px;

    color: var(--top-navy);

    font-size: 25px;
    font-weight: 700;
    line-height: 1.5;
}


.top-staff__heading-copy p {
    margin: 0;

    color: #555555;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
}


/* =========================================
   Staff Grid
========================================= */

.top-staff__grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px;
}


/* =========================================
   Staff Card
========================================= */

.top-staff__item {
    min-height: 360px;

    padding: 28px;

    display: grid;

    grid-template-columns: 190px minmax(0, 1fr);

    gap: 28px;

    align-items: start;

    background: var(--top-white);

    border: 1px solid rgba(23, 58, 112, 0.28);

    box-shadow: var(--top-shadow);
}


/* =========================================
   Staff Image
========================================= */

.top-staff__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.top-staff__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}


/* =========================================
   Staff Content
========================================= */

.top-staff__content {
    min-width: 0;
}


.top-staff__profile {
    position: relative;

    min-height: 48px;

    margin-bottom: 20px;
    padding: 10px 14px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 10px;

    background: var(--top-navy);

    color: var(--top-white);
}


/* 赤のアクセント */
.top-staff__profile::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 62px;
    height: 3px;

    background: var(--top-red);
}


.top-staff__profile strong {
    font-size: 18px;
    font-weight: 800;

    white-space: nowrap;
}


.top-staff__profile span {
    font-size: 11px;
    font-weight: 700;

    text-align: right;

    opacity: 0.95;
}


.top-staff__text {
    margin: 0;

    color: #333333;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.9;
}


/* =========================================
   有資格者一覧
========================================= */

.top-license {
    width: min(900px, 100%);

    margin: 80px auto 0;
    padding: 38px 40px 42px;

    background: var(--top-white);

    border: 1px solid rgba(23, 58, 112, 0.28);

    box-shadow: var(--top-shadow);
}


.top-license__title {
    position: relative;

    margin: 0 0 32px;

    padding-bottom: 16px;

    color: var(--top-navy);

    font-size: 28px;
    font-weight: 800;

    text-align: center;
}


/* タイトル下の赤ライン */
.top-license__title::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 55px;
    height: 3px;

    background: var(--top-red);

    transform: translateX(-50%);
}


/* =========================================
   Table
========================================= */

.top-license__table-wrap {
    width: 100%;

    overflow-x: auto;
}


.top-license__table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    background: var(--top-white);
}


.top-license__table th,
.top-license__table td {
    border: 1px solid #dce3ed;
}


/* ヘッダー */
.top-license__table thead th {
    padding: 16px 18px;

    background: #dbe6f5;

    color: var(--top-navy);

    font-size: 14px;
    font-weight: 800;

    text-align: center;
}


.top-license__table thead th:first-child {
    width: 72%;
}


.top-license__table thead th:last-child {
    width: 28%;
}


/* データ */
.top-license__table tbody td {
    padding: 14px 18px;

    color: #333333;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.6;

    text-align: center;

    background: var(--top-white);
}


/* 交互に薄いブルー */
.top-license__table tbody tr:nth-child(even) td {
    background: #f5f8fc;
}


/* 人数 */
.top-license__table tbody td:last-child {
    color: var(--top-navy);

    font-weight: 800;

    white-space: nowrap;
}


/* =========================================
   Company
========================================= */

.top-company {
    position: relative;

    width: 100%;

    padding: 100px 30px 120px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--top-white) 0%,
            var(--top-white) 70%,
            var(--top-bg-soft) 100%
        );
}


/* 背景のCompany文字 */
.top-company__bg-text {
    position: absolute;

    top: 35px;
    right: 6%;

    color: rgba(23, 58, 112, 0.055);

    font-size: clamp(100px, 11vw, 180px);
    font-weight: 800;

    line-height: 1;

    pointer-events: none;
    user-select: none;
}



/* =========================================
   Inner
========================================= */

.top-company__inner {
    position: relative;
    z-index: 2;

    width: min(1200px, 100%);

    margin: 0 auto;
}


/* =========================================
   Heading
========================================= */

.top-company__heading {
    width: 100%;

    margin: 0 0 55px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 60px;
}


.top-company__heading-title {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    flex-shrink: 0;
}


.top-company__heading-title > span {
    width: 4px;
    height: 58px;

    display: block;

    margin-top: 2px;

    background: var(--top-red);
}


.top-company__heading-title h2 {
    margin: 0;

    color: var(--top-navy);

    font-size: 42px;
    font-weight: 800;

    line-height: 1;
}


.top-company__heading-title p {
    margin: 8px 0 0;

    color: #333333;

    font-size: 12px;
    font-weight: 600;
}


.top-company__heading-copy {
    width: 100%;
    max-width: 620px;
}


.top-company__heading-copy h3 {
    margin: 0 0 10px;

    color: var(--top-navy);

    font-size: 25px;
    font-weight: 700;

    line-height: 1.5;
}


.top-company__heading-copy p {
    margin: 0;

    color: #555555;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================
   Intro
========================================= */

.top-company__intro {
    margin-bottom: 90px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 60px;
}


.top-company__intro-label {
    margin: 0 0 12px;

    color: var(--top-red);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;
}


.top-company__intro-content h3 {
    position: relative;

    margin: 0 0 26px;

    padding-bottom: 20px;

    color: var(--top-navy);

    font-size: 30px;
    font-weight: 800;

    line-height: 1.55;
}


.top-company__intro-content h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 60px;
    height: 3px;

    background: var(--top-red);
}


.top-company__intro-content > p:not(.top-company__intro-label) {
    margin: 0 0 16px;

    color: #444444;

    font-size: 14px;
    line-height: 2;
}


.top-company__intro-image {
    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #eeeeee;
}


.top-company__intro-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================
   共通ブロック
========================================= */

.top-company__block {
    margin-top: 80px;
}


.top-company__section-title {
    margin-bottom: 30px;
}


.top-company__section-title > span {
    display: block;

    margin-bottom: 5px;

    color: var(--top-red);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.08em;
}


.top-company__section-title h3 {
    position: relative;

    margin: 0;

    padding-bottom: 14px;

    color: var(--top-navy);

    font-size: 25px;
    font-weight: 800;
}


.top-company__section-title h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 50px;
    height: 2px;

    background: var(--top-red);
}


/* =========================================
   Company Profile
========================================= */

.top-company__profile {
    overflow: hidden;

    background: var(--top-white);

    box-shadow: var(--top-shadow);
}


.top-company__profile-row {
    display: grid;

    grid-template-columns: 220px minmax(0, 1fr);

    border-bottom: 1px solid #e0e5ec;
}


.top-company__profile-row:last-child {
    border-bottom: none;
}


.top-company__profile-label {
    padding: 20px 24px;

    display: flex;
    align-items: center;

    background: var(--top-navy);

    color: var(--top-white);

    font-size: 14px;
    font-weight: 700;
}


.top-company__profile-value {
    padding: 20px 26px;

    color: #333333;

    font-size: 14px;

    line-height: 1.8;
}


.top-company__service-list {
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;

    gap: 8px 18px;

    list-style: none;
}


.top-company__service-list li {
    position: relative;

    padding-left: 13px;
}


.top-company__service-list li::before {
    content: "";

    position: absolute;

    top: 0.75em;
    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--top-red);
}


/* =========================================
   主要取引先 / 加盟団体
========================================= */

.top-company__info-grid {
    margin-top: 80px;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px;
}


.top-company__info-box {
    padding: 30px;

    background: var(--top-white);

    border-top: 4px solid var(--top-navy);

    box-shadow: var(--top-shadow);
}


.top-company__info-title {
    margin-bottom: 22px;
}


.top-company__info-title span {
    display: block;

    margin-bottom: 5px;

    color: var(--top-red);

    font-size: 10px;
    font-weight: 700;
}


.top-company__info-title h3 {
    margin: 0;

    color: var(--top-navy);

    font-size: 20px;
    font-weight: 800;
}


.top-company__info-content,
.top-company__info-content p,
.top-company__info-content li {
    color: #444444;

    font-size: 13px;

    line-height: 2;
}


.top-company__info-content p {
    margin: 0;
}


.top-company__info-content ul {
    margin: 0;

    padding-left: 20px;
}


/* =========================================
   License
========================================= */

.top-company__license {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;
}


.top-company__license-item {
    padding: 28px 30px;

    background: var(--top-white);

    border-left: 4px solid var(--top-navy);

    box-shadow: var(--top-shadow);
}


.top-company__license-item h4 {
    margin: 0 0 12px;

    color: var(--top-navy);

    font-size: 17px;
    font-weight: 800;
}


.top-company__license-item p {
    margin: 0;

    color: #444444;

    font-size: 13px;

    line-height: 1.9;
}

/* =========================================
   SDGs
========================================= */

.top-company__sdgs {
    margin-top: 90px;
}


/* タイトルとの間 */
.top-company__sdgs .top-company__section-title {
    margin-bottom: 38px;
}


/* =========================================
   SDGs Panel
========================================= */

.top-company__sdgs-panel {
    margin-top: 0;

    padding: 55px 60px 60px;

    box-sizing: border-box;

    background: var(--top-white);

    box-shadow:
        0 10px 35px rgba(23, 58, 112, 0.07);
}


/* =========================================
   導入文
========================================= */

.top-company__sdgs-lead {
    max-width: 1000px;

    margin:
        0
        0
        45px;

    color: #444444;

    font-size: 14px;

    line-height: 2;
}


/* =========================================
   SDGs 上部
========================================= */

.top-company__sdgs-inner {
    display: grid;

    grid-template-columns:
        360px
        minmax(0, 1fr);

    align-items: center;

    gap: 65px;
}


/* =========================================
   SDGs画像
========================================= */

.top-company__sdgs-icons {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


.top-company__sdgs-icon {
    overflow: hidden;
}


.top-company__sdgs-icon img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================
   説明
========================================= */

.top-company__sdgs-content {
    min-width: 0;
}


.top-company__sdgs-content h4 {
    position: relative;

    margin: 0 0 25px;

    padding-bottom: 17px;

    color: var(--top-navy);

    font-size: 22px;
    font-weight: 700;

    line-height: 1.6;
}


/* 赤ライン */
.top-company__sdgs-content h4::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 42px;
    height: 3px;

    background: var(--top-red);
}


.top-company__sdgs-content p {
    max-width: 720px;

    margin: 0;

    color: #444444;

    font-size: 14px;

    line-height: 2.1;
}


/* =========================================
   ワークライフ・バランス
========================================= */

.top-company__sdgs-goals {
    margin-top: 55px;

    padding: 38px 42px 40px;

    box-sizing: border-box;

    background: #f7f9fc;

    border: 1px solid #dce3ec;
}


/* タイトル */
.top-company__sdgs-goals-title {
    position: relative;

    margin: 0 0 32px;

    padding-bottom: 17px;

    color: var(--top-navy);

    font-size: 19px;
    font-weight: 700;

    text-align: center;

    line-height: 1.6;
}


.top-company__sdgs-goals-title::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 45px;
    height: 3px;

    transform: translateX(-50%);

    background: var(--top-red);
}


/* =========================================
   各目標
========================================= */

.top-company__sdgs-goal {
    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr);

    align-items: start;

    gap: 28px;

    padding: 23px 0;

    border-top: 1px solid #dce3ec;
}


.top-company__sdgs-goal:first-of-type {
    border-top: none;
}


/* 目標ラベル */
.top-company__sdgs-goal-label {
    min-height: 38px;

    padding: 8px 10px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--top-red);

    color: var(--top-white);

    font-size: 12px;
    font-weight: 700;

    line-height: 1;
}


/* 本文 */
.top-company__sdgs-goal p {
    margin: 0;

    padding-top: 2px;

    color: #333333;

    font-size: 14px;

    line-height: 2;
}

/* =========================================
   History
========================================= */

.top-company__history {
    margin-top: 100px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 60px;

    /* stretchから変更 */
    align-items: start;
}


/* =========================================
   History Image
========================================= */

.top-company__history-image {
    width: 100%;

    /* 600px固定を解除 */
    min-height: 0;

    /* 写真サイズを固定 */
    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #eeeeee;

    align-self: start;
}


.top-company__history-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* =========================================
   History Content
========================================= */

.top-company__history-content {
    min-width: 0;

    padding-top: 15px;
}


/* =========================================
   Timeline
========================================= */

.top-company__timeline {
    margin-top: 10px;
}


.top-company__timeline-item {
    display: grid;

    grid-template-columns: 110px minmax(0, 1fr);
}


.top-company__timeline-date {
    padding: 18px 20px 18px 0;

    color: var(--top-navy);

    font-size: 14px;
    font-weight: 800;

    text-align: right;
}


.top-company__timeline-text {
    position: relative;

    padding: 18px 0 18px 30px;

    color: #444444;

    font-size: 13px;

    line-height: 1.8;

    border-left: 2px solid #dbe3ee;
}


.top-company__timeline-text::before {
    content: "";

    position: absolute;

    top: 23px;
    left: -7px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--top-red);
}

/* =========================================
   Company Detail List
========================================= */

.top-company__detail-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.top-company__detail-list li {
    position: relative;

    padding-left: 16px;

    color: #444444;

    font-size: 13px;
    line-height: 1.9;
}

.top-company__detail-list li::before {
    content: "";

    position: absolute;

    top: 0.75em;
    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--top-red);
}

.top-company__detail-list li + li {
    margin-top: 5px;
}


/* =========================================
   License Full
========================================= */

.top-company__license-full {
    overflow: hidden;

    background: var(--top-white);

    box-shadow: var(--top-shadow);
}

.top-company__license-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.top-company__license-list > li {
    display: grid;

    grid-template-columns: 260px minmax(0, 1fr);

    border-bottom: 1px solid #e0e5ec;
}

.top-company__license-list > li:last-child {
    border-bottom: none;
}

.top-company__license-list > li > strong {
    padding: 20px 24px;

    display: flex;
    align-items: center;

    background: var(--top-navy);

    color: var(--top-white);

    font-size: 13px;
    font-weight: 700;
}

.top-company__license-list > li > span,
.top-company__license-sub {
    padding: 20px 26px;

    color: #333333;

    font-size: 13px;
    line-height: 1.8;
}

.top-company__license-sub {
    display: flex;
    flex-direction: column;

    gap: 6px;
}
/* =========================================
   License Layout
========================================= */

.top-company__license-layout {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 1fr);

    gap: 35px;

    align-items: center;
}


/* =========================================
   License Certificate
========================================= */

.top-company__license-certificate {
    width: 100%;

    /* 外側の枠・余白・影は付けない */
    padding: 0;

    background: transparent;
    box-shadow: none;
}


.top-company__license-certificate img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

/* =========================================
   Message
========================================= */

.top-message {
    position: relative;

    width: 100%;

    padding: 95px 30px 110px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f7f9fc 0%,
            #eef4fb 100%
        );
}


/* =========================================
   背景の大きな文字
========================================= */

.top-message__bg-text {
    position: absolute;

    top: 25px;
    left: 50%;

    transform: translateX(-50%);

    color: rgba(23, 58, 112, 0.035);

    font-size: clamp(110px, 14vw, 220px);
    font-weight: 800;

    line-height: 1;

    pointer-events: none;
    user-select: none;
}


/* =========================================
   Inner
========================================= */

.top-message__inner {
    position: relative;
    z-index: 2;

    width: min(1200px, 100%);

    margin: 0 auto;
}


/* =========================================
   Heading
========================================= */

.top-message__heading {
    margin-bottom: 50px;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    gap: 15px;
}


.top-message__heading-line {
    width: 4px;
    height: 60px;

    display: block;

    margin-top: 3px;

    background: #c5161d;
}


.top-message__heading-text {
    text-align: left;
}


.top-message__heading h2 {
    margin: 0;

    color: #173a70;

    font-size: 46px;
    font-weight: 800;

    line-height: 1;
}


.top-message__heading p {
    margin: 10px 0 0;

    color: #333333;

    font-size: 13px;
    font-weight: 600;
}


/* =========================================
   Panel
========================================= */

.top-message__panel {
    padding: 55px 60px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    gap: 60px;

    align-items: center;

    box-sizing: border-box;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(23, 58, 112, 0.08);

    border-top: 4px solid #173a70;
}


/* =========================================
   Text
========================================= */

.top-message__content {
    min-width: 0;
}


.top-message__content > p {
    margin: 0 0 22px;

    color: #333333;

    font-size: 14px;
    font-weight: 500;

    line-height: 2;
}


.top-message__content > p:last-of-type {
    margin-bottom: 0;
}


/* =========================================
   Photo
========================================= */

.top-message__photo {
    width: 100%;

    overflow: hidden;

    background: #eeeeee;

    box-shadow:
        10px 10px 0 rgba(23, 58, 112, 0.08);
}


.top-message__photo img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: cover;
}


/* =========================================
   Signature
========================================= */

.top-message__signature {
    margin-top: 35px;

    display: flex;
    justify-content: flex-end;
    align-items: baseline;

    gap: 18px;
}


.top-message__signature span {
    color: #444444;

    font-size: 13px;
    font-weight: 500;
}


.top-message__signature strong {
    position: relative;

    color: #173a70;

    font-size: 27px;
    font-weight: 700;

    letter-spacing: 0.12em;
}

/* =========================================
   Office Referral
========================================= */

.top-office {
    position: relative;

    width: 100%;

    padding: 100px 30px 120px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 74%,
            var(--top-bg-soft) 100%
        );
}


/* 背景文字 */
.top-office__bg-text {
    position: absolute;

    top: 30px;
    right: 5%;

    color: rgba(23, 58, 112, 0.045);

    font-size: clamp(100px, 11vw, 180px);
    font-weight: 800;

    line-height: 1;

    pointer-events: none;
    user-select: none;
}


/* =========================================
   Inner
========================================= */

.top-office__inner {
    position: relative;
    z-index: 2;

    width: min(1100px, 100%);

    margin: 0 auto;
}


/* =========================================
   Heading
========================================= */

.top-office__heading {
    margin-bottom: 65px;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    gap: 15px;
}


.top-office__heading-line {
    width: 4px;
    height: 60px;

    margin-top: 3px;

    display: block;

    background: var(--top-red);
}


.top-office__heading-text h2 {
    margin: 0;

    color: var(--top-navy);

    font-size: 44px;
    font-weight: 800;

    line-height: 1;
}


.top-office__heading-text p {
    margin: 10px 0 0;

    color: #333333;

    font-size: 12px;
    font-weight: 600;

    text-align: center;
}


/* =========================================
   Office Item
========================================= */

.top-office__item {
    padding: 45px 20px 60px;

    border-top: 2px solid var(--top-navy);
}


.top-office__item + .top-office__item {
    margin-top: 30px;
}


/* =========================================
   Main
========================================= */

.top-office__main {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.9fr);

    gap: 70px;

    align-items: start;
}


/* =========================================
   Info
========================================= */

.top-office__info h3 {
    position: relative;

    margin: 0 0 15px;

    padding-bottom: 16px;

    color: var(--top-navy);

    font-size: 23px;
    font-weight: 800;
}


.top-office__info h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 50px;
    height: 3px;

    background: var(--top-red);
}


/* =========================================
   Data
========================================= */

.top-office__data {
    margin: 0;

    padding: 0;
}


.top-office__data-row {
    min-height: 76px;

    display: grid;

    grid-template-columns: 90px minmax(0, 1fr);

    align-items: center;

    border-bottom: 1px solid #d9dee6;
}


.top-office__data-row dt {
    margin: 0;

    color: var(--top-navy);

    font-size: 13px;
    font-weight: 800;
}


.top-office__data-row dd {
    margin: 0;

    color: #444444;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.8;
}


.top-office__data-row a {
    color: inherit;

    text-decoration: none;
}


.top-office__data-row a:hover {
    color: var(--top-red);
}


/* =========================================
   Google Map
========================================= */

.top-office__map {
    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #eeeeee;

    box-shadow:
        0 8px 24px rgba(23, 58, 112, 0.08);
}


.top-office__map iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


/* =========================================
   Gallery
========================================= */

.top-office__gallery {
    margin-top: 40px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


.top-office__gallery--two {
    grid-template-columns: repeat(2, 1fr);

    max-width: 720px;
}


.top-office__gallery figure {
    margin: 0;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: #eeeeee;
}


.top-office__gallery img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.45s ease;
}


.top-office__gallery figure:hover img {
    transform: scale(1.03);
}

/* =========================================
   Contact Section
========================================= */
.contact-hero {
    position: relative;
    width: 100%;
    padding: 90px 20px 100px;
    overflow: hidden;
    background-image:
        url("../images/company01.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: auto;
}


/* 写真を少し暗くして文字を見やすくする */
.contact-hero__overlay {
    display: block;

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        rgba(20, 45, 82, 0.48);

    pointer-events: none;
}


/* フォームをオーバーレイより前面へ */
.contact-hero__inner {
    position: relative;
    z-index: 2;

    width: min(760px, 100%);

    margin: 0 auto;
}

.contact-hero__heading {
    text-align: center;
    margin-bottom: 50px;
}

.contact-hero__heading h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(52px, 7vw, 86px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.02em;
}

.contact-hero__heading p {
    margin: 12px 0 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* =========================================
   Form Layout
========================================= */
.contact-hero__form,
.contact-cf7 {
    width: 100%;
}

.contact-cf7__row {
    margin-bottom: 34px;
}

.contact-cf7__row:last-of-type {
    margin-bottom: 0;
}

/* =========================================
   Label
========================================= */
.contact-cf7__label {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

/* Contact Form 7 が自動で p や br を入れても横並びにする */
.contact-cf7__label p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.contact-cf7__label br {
    display: none;
}

.contact-cf7__label .required,
.contact-cf7__label .optional {
    display: inline-block;
    margin: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.contact-cf7__label .required {
    background: #c5161d;
    color: #ffffff;
}

.contact-cf7__label .optional {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* =========================================
   Fields
========================================= */
.contact-cf7__field input[type="text"],
.contact-cf7__field input[type="email"],
.contact-cf7__field input[type="tel"],
.contact-cf7__field textarea,
.contact-cf7__field select {
    width: 100%;
    padding: 16px 18px;
    box-sizing: border-box;

    border: none;
    border-radius: 0;

    background: #ffffff;
    color: #333333;

    font-size: 16px;
    line-height: 1.6;

    outline: none;
}

.contact-cf7__field textarea {
    min-height: 240px;
    resize: vertical;
}

.contact-cf7__field input::placeholder,
.contact-cf7__field textarea::placeholder {
    color: #999999;
}

/* フォーカス */
.contact-cf7__field input:focus,
.contact-cf7__field textarea:focus,
.contact-cf7__field select:focus {
    box-shadow: 0 0 0 2px #c5161d inset;
}

/* =========================================
   Radio
========================================= */
.contact-cf7__field--radio .wpcf7-form-control-wrap {
    display: block;
}

.contact-cf7__field--radio .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.contact-cf7__field--radio .wpcf7-list-item {
    margin: 0;
}

.contact-cf7__field--radio .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
}

.contact-cf7__field--radio input[type="radio"] {
    accent-color: #c5161d;
}

/* =========================================
   Privacy
========================================= */
.contact-cf7__privacy {
    margin-top: 28px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.8;
}

.contact-cf7__privacy .wpcf7-list-item {
    margin: 0;
}

.contact-cf7__privacy label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-cf7__privacy input[type="checkbox"] {
    accent-color: #c5161d;
}

.contact-cf7__privacy a {
    color: #ffffff;
    text-decoration: underline;
}

/* =========================================
   Submit
========================================= */
.contact-cf7__submit {
    margin-top: 28px;
    text-align: center;
}

.contact-cf7__submit .wpcf7-submit {
    min-width: 220px;
    padding: 16px 36px;

    border: 2px solid #ffffff;
    background: #c5161d;
    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;

    transition: background 0.3s ease, transform 0.3s ease;
}

.contact-cf7__submit .wpcf7-submit:hover {
    background: #a80f15;
    transform: translateY(-2px);
}

/* =========================================
   Validation / Message
========================================= */
.wpcf7-not-valid-tip {
    margin-top: 8px;
    color: #ffe1e1;
    font-size: 13px;
}

.wpcf7-response-output {
    margin: 24px auto 0 !important;
    padding: 12px 16px !important;
    color: #ffffff;
    border-color: #ffffff !important;
    max-width: 760px;
}

/* =========================================
   Contact Form 余計な余白をリセット
========================================= */

.contact-cf7 p {
    margin: 0;
}

.contact-cf7__row {
    margin-bottom: 30px;
}


/* =========================================
   Label
========================================= */

.contact-cf7__label {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;
}


/* 万が一CF7がbrを入れても非表示 */
.contact-cf7__label br {
    display: none;
}


/* 必須 */
.contact-cf7__label .required {
    display: inline-block;

    margin: 0;

    color: #ffffff;

    font-size: 12px;
    font-weight: 500;
}


/* =========================================
   Field
========================================= */

.contact-cf7__field {
    width: 100%;
}

.contact-cf7__field > p {
    margin: 0;
}

.contact-cf7__field .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}


/* =========================================
   Footer
========================================= */

.top-footer {
    position: relative;

    width: 100%;

    background: #173a70;
    color: #ffffff;

    border-top: 5px solid #c5161d;
}


/* =========================================
   Inner
========================================= */

.top-footer__inner {
    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;

    padding: 70px 0 60px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 80px;
}


/* =========================================
   Company
========================================= */

.top-footer__company {
    width: 42%;
}


/* ロゴ */
.top-footer__logo {
    display: inline-block;

    margin-bottom: 30px;
}


.top-footer__logo img {
    display: block;

    width: 240px;
    max-width: 100%;
    height: auto;

    padding: 10px 15px;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 4px;
}


/* 会社情報 */
.top-footer__company-info {
    font-size: 14px;
    line-height: 1.9;
}


.top-footer__company-info p {
    margin: 0 0 6px;
}


.top-footer__company-info a {
    color: #ffffff;
    text-decoration: none;

    transition: color 0.3s ease;
}


.top-footer__company-info a:hover {
    color: #ffb5b8;
}


/* =========================================
   Navigation
========================================= */

.top-footer__nav-area {
    flex: 1;

    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));

    gap: 50px;
}


.top-footer__nav-title {
    position: relative;

    margin: 0 0 25px;

    padding-bottom: 12px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.12em;
}


/* 赤ライン */
.top-footer__nav-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 32px;
    height: 2px;

    background: #c5161d;
}


.top-footer__nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.top-footer__nav li {
    margin: 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.15);
}


.top-footer__nav a {
    position: relative;

    display: block;

    padding: 13px 26px 13px 0;

    color: #ffffff;

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}


/* 矢印 */
.top-footer__nav a::after {
    content: "→";

    position: absolute;

    top: 50%;
    right: 5px;

    transform: translateY(-50%);

    color: #c5161d;

    transition: right 0.3s ease;
}


.top-footer__nav a:hover {
    padding-left: 6px;

    color: #ffb5b8;
}


.top-footer__nav a:hover::after {
    right: 0;
}


/* =========================================
   Bottom
========================================= */

.top-footer__bottom {
    border-top:
        1px solid rgba(255, 255, 255, 0.15);
}


.top-footer__bottom-inner {
    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;

    padding: 22px 0;

    text-align: center;
}


.top-footer__bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.7);

    font-size: 11px;

    letter-spacing: 0.05em;
}


/* =========================================
   Scroll Animation
========================================= */

/* 基本 */
.js-anim {
    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: opacity, transform;
}


/* 左から */
.js-anim--left {
    transform: translateX(-50px);
}


/* 右から */
.js-anim--right {
    transform: translateX(50px);
}


/* 少し拡大しながら */
.js-anim--scale {
    transform: scale(0.96);
}


/* 表示 */
.js-anim.is-show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}


/* =========================================
   Service カード
========================================= */

.top-service__item.js-anim {
    transition-duration: 0.7s;
}


/* =========================================
   Company profile
========================================= */

.top-company__profile-row.js-anim {
    transition-duration: 0.55s;
}


/* =========================================
   Office
========================================= */

.top-office__item.js-anim {
    transition-duration: 0.8s;
}


/* =========================================
   Hero
========================================= */

.top-hero__lead,
.top-hero__title,
.top-hero__catch,
.top-hero__line,
.top-hero__text {
    opacity: 0;
    transform: translateY(25px);

    animation: heroFadeUp 0.8s ease forwards;
}


.top-hero__lead {
    animation-delay: 0.15s;
}


.top-hero__title {
    animation-delay: 0.3s;
}


.top-hero__catch {
    animation-delay: 0.45s;
}


.top-hero__line {
    animation-delay: 0.6s;
}


.top-hero__text {
    animation-delay: 0.75s;
}


@keyframes heroFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   背景英字
========================================= */

.top-service__bg-text,
.top-company__bg-text,
.top-message__bg-text,
.top-office__bg-text {
    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}


/* =========================================
   動きを減らす設定のユーザー
========================================= */

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

    .js-anim,
    .top-hero__lead,
    .top-hero__title,
    .top-hero__catch,
    .top-hero__line,
    .top-hero__text {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

}

/* =========================================
   PC Recruit Fixed Banner
========================================= */

.top-hero__recruit-banner {
    position: fixed;

    right: 30px;
    bottom: 120px;

    z-index: 900;

    display: block;

    width: clamp(320px, 26vw, 420px);

    line-height: 0;

    text-decoration: none;

    filter:
        drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


.top-hero__recruit-banner img {
    display: block;

    width: 100%;
    height: auto;
}


.top-hero__recruit-banner:hover {
    transform: translateY(-5px);

    filter:
        drop-shadow(0 15px 26px rgba(0, 0, 0, 0.28));
}

/* =========================================
   SP Recruit Fixed Footer
========================================= */

.sp-recruit-fixed {
    display: none !important;
}



/* =========================================
   Responsive: 1100px
========================================= */

@media screen and (max-width: 1100px) {

    .top-header {
        height: 72px;
    }

    .top-header__inner {
        position: relative;

        width: 100%;

        padding: 0 15px;
    }

    .top-header__logo img {
        width: 250px;
    }

    .top-header__nav {
        display: none;

        position: absolute;
        top: 72px;
        left: 0;
        z-index: 2000;

        width: 100%;

        margin: 0;
        padding: 10px 20px 20px;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        background: var(--top-white);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
    }

    .top-header__nav.is-open {
        display: flex;
    }

    .top-header__nav a {
        display: block;

        width: 100%;

        padding: 16px 5px;

        color: #222222;

        font-size: 15px;

        border-bottom: 1px solid #eeeeee;
    }

    .top-header__nav > a::after {
        display: none;
    }

    .top-header__contact {
        color: var(--top-red) !important;
    }

    .top-header__instagram {
        width: auto;
        height: auto;

        display: flex !important;
        align-items: center;

        border-bottom: none !important;
    }

    .top-header__instagram svg {
        width: 28px;
        height: 28px;
    }

    .top-menu-button {
        display: flex;
    }

    .top-menu-button.is-open span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .top-menu-button.is-open span:nth-child(2) {
        opacity: 0;
    }

    .top-menu-button.is-open span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .top-hero {
        min-height: 580px;
        background-position: 63% center;
    }

    .top-hero__inner {
        width: calc(100% - 60px);
    }

    .top-hero__content {
        width: 76%;
    }

    .top-hero__title {
        font-size: clamp(30px, 4.5vw, 48px);
    }

    .top-hero__title i {
        margin: 0 8px;
    }

    /* =========================================
    PCバナー
    ========================================= */
   
    .top-hero__recruit-banner {
        right: 20px;
        bottom: 20px;

        width: 320px;
    }

}


/* =========================================
   Responsive: 900px
========================================= */

@media screen and (max-width: 900px) {

    .top-info {
        padding: 60px 25px;
    }

    .top-info__inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .top-instagram-feed {
        max-width: 100%;
        margin-left: 0;
    }

    .top-service {
        padding: 70px 25px 85px;
    }

    .top-service__heading {
        display: block;
        margin-bottom: 40px;
    }

    .top-service__heading-copy {
        max-width: none;
        margin-top: 28px;
    }

    .top-service__bg-text {
        top: 40px;
        right: -20px;
    }

    .top-service__grid {
        gap: 25px 20px;
    }

    .top-service__item {
        flex: 0 0 calc((100% - 20px) / 2);
    }

    .top-service__content {
        min-height: 210px;
    }

    /* =========================================
    Staff Tablet
    ========================================= */

        .top-staff {
        padding: 75px 25px 90px;
    }


    .top-staff__heading {
        display: block;

        margin-bottom: 40px;
    }


    .top-staff__heading-copy {
        max-width: none;

        margin-top: 28px;
    }


    .top-staff__bg-text {
        top: 40px;
        right: -20px;
    }


    .top-staff__grid {
        grid-template-columns: 1fr;
    }


    .top-staff__item {
        min-height: auto;

        grid-template-columns: 180px minmax(0, 1fr);
    }


    .top-license {
        margin-top: 65px;
    }

    /* =========================================
    Company
    ========================================= */
     .top-company {
        padding: 75px 25px 90px;
    }


    .top-company__heading {
        display: block;

        margin-bottom: 40px;
    }


    .top-company__heading-copy {
        max-width: none;

        margin-top: 28px;
    }


    .top-company__bg-text {
        top: 40px;
        right: -30px;
    }


    .top-company__intro {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .top-company__info-grid,
    .top-company__license {
        grid-template-columns: 1fr;
    }
   
    .top-company__sdgs-inner {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .top-company__sdgs-icons {
        width: min(380px, 100%);

        margin: 0 auto;
    }


    .top-company__sdgs-content {
        width: min(760px, 100%);

        margin: 0 auto;
    }

    .top-company__history {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .top-company__history-image {
        min-height: auto;

        aspect-ratio: 16 / 9;
    }

    /* =========================================
    Message
    ========================================= */
        .top-message {
        padding: 75px 25px 90px;
    }


    .top-message__panel {
        padding: 45px 40px;

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .top-message__photo {
        width: min(320px, 100%);

        margin: 0 auto;

        grid-row: 1;
    }


    .top-message__content {
        grid-row: 2;
    }


    .top-message__signature {
        justify-content: center;
    }

    /* =========================================
    Office Referral
    ========================================= */

       .top-office {
        padding: 75px 25px 90px;
    }


    .top-office__heading {
        margin-bottom: 50px;
    }


    .top-office__main {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .top-office__map {
        max-width: 600px;
    }


    .top-office__gallery {
        gap: 18px;
    }


    .top-company__license-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .top-company__license-certificate {
        width: 100%;
        margin: 0;
    }


    /* =========================================
    Footer
    ========================================= */

        .top-footer__inner {
        gap: 50px;

        padding: 60px 0 50px;
    }


    .top-footer__company {
        width: 40%;
    }


    .top-footer__logo img {
        width: 210px;
    }


    .top-footer__nav-area {
        gap: 30px;
    }

}


/* =========================================
   Responsive: 767px
========================================= */

@media screen and (max-width: 767px) {

    .top-hero {
        min-height: 560px;
        align-items: flex-end;
        background-position: 68% center;
    }

    .top-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(8, 24, 48, 0.08) 0%,
                rgba(8, 24, 48, 0.24) 28%,
                rgba(8, 24, 48, 0.86) 70%,
                rgba(8, 24, 48, 0.94) 100%
            );
    }

    .top-hero__inner {
        width: 100%;

        padding: 0 22px 44px;
    }

    .top-hero__content {
        width: 100%;
    }

    .top-hero__lead {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .top-hero__title {
        display: block;

        font-size: 34px;
        line-height: 1.45;
        white-space: normal;
    }

    .top-hero__title i {
        margin: 0 4px;
    }

    .top-hero__catch {
        margin-top: 6px;
        font-size: 22px;
    }

    .top-hero__line {
        width: 50px;
        height: 3px;
        margin: 18px 0 20px;
    }

    .top-hero__text {
        font-size: 14px;
        line-height: 1.9;
    }

    /* =========================================
    Contact Hero
    ========================================= */
    .contact-hero {
        padding: 60px 15px 70px;
    }

    .contact-hero__heading {
        margin-bottom: 38px;
    }

    .contact-hero__heading h1 {
        font-size: clamp(40px, 12vw, 58px);
    }

    .contact-hero__heading p {
        font-size: 15px;
    }

    .contact-cf7__row {
        margin-bottom: 26px;
    }

    .contact-cf7__label {
        font-size: 16px;
    }

    .contact-cf7__label p {
        gap: 8px;
    }

    .contact-cf7__field--radio .wpcf7-radio {
        flex-direction: column;
        gap: 12px;
    }

    .contact-cf7__field textarea {
        min-height: 200px;
    }

    .contact-cf7__submit .wpcf7-submit {
        width: 100%;
        min-width: auto;
    }

    /* =========================================
    Footer
    ========================================= */

        .top-footer__inner {
        width: calc(100% - 40px);

        padding: 50px 0 40px;

        flex-direction: column;

        gap: 45px;
    }


    .top-footer__company {
        width: 100%;
    }


    .top-footer__logo {
        margin-bottom: 25px;
    }


    .top-footer__logo img {
        width: 210px;
    }


    .top-footer__company-info {
        font-size: 13px;
    }


    .top-footer__nav-area {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .top-footer__nav-title {
        margin-bottom: 15px;
    }


    .top-footer__nav a {
        padding: 13px 30px 13px 0;

        font-size: 14px;
    }


    .top-footer__bottom-inner {
        width: calc(100% - 40px);

        padding: 18px 0;
    }


    .top-footer__bottom p {
        font-size: 10px;
    }


    /* =========================================
     PC Recruit Banner
    ========================================= */
   
    .top-hero__recruit-banner {
        display: none !important;
    }

    /* =========================================
    SP Recruit Fixed Footer
    ========================================= */
      .sp-recruit-fixed {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        z-index: 999999 !important;

        display: grid !important;

        grid-template-columns:
            1fr
            1.15fr;

        width: 100% !important;

        margin: 0 !important;

        padding:
            0
            0
            env(safe-area-inset-bottom);

        visibility: visible !important;
        opacity: 1 !important;

        background: #ffffff;

        box-shadow:
            0 -5px 20px rgba(0, 0, 0, 0.18);
    }


    .sp-recruit-fixed a {
        min-height: 68px;

        display: flex !important;

        align-items: center;
        justify-content: center;

        margin: 0;

        box-sizing: border-box;

        color: #ffffff !important;

        text-decoration: none !important;
    }


    /* 左側 */
    .sp-recruit-fixed__recruit {
        flex-direction: column;

        background: #173a70;
    }


    .sp-recruit-fixed__recruit > span {
        margin-bottom: 3px;

        color: rgba(255, 255, 255, 0.7);

        font-size: 9px;
        font-weight: 700;

        line-height: 1;

        letter-spacing: 0.15em;
    }


    .sp-recruit-fixed__recruit strong {
        color: #ffffff;

        font-size: 14px;
        font-weight: 700;

        line-height: 1.4;
    }


    /* 右側 */
    .sp-recruit-fixed__entry {
        gap: 12px;

        background: #c5161d;
    }


    .sp-recruit-fixed__entry strong {
        color: #ffffff;

        font-size: 15px;
        font-weight: 700;
    }


    .sp-recruit-fixed__entry > span {
        color: #ffffff;

        font-size: 20px;
        line-height: 1;
    }


    /* 固定CTAの高さ分だけ余白を確保 */
    body {
        padding-bottom:
            calc(68px + env(safe-area-inset-bottom));
    }

    /* =========================================
    SDGs
    ========================================= */

    .top-company__sdgs-panel {
        padding: 25px 18px;
    }


    .top-company__sdgs-lead {
        margin-bottom: 25px;

        font-size: 13px;

        line-height: 1.9;
    }


    .top-company__sdgs-inner {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .top-company__sdgs-icons {
        width: min(100%, 340px);

        margin: 0 auto;

        gap: 8px;
    }


    .top-company__sdgs-content h4 {
        font-size: 18px;
    }


    .top-company__sdgs-content p {
        font-size: 13px;
    }


    .top-company__sdgs-goals {
        margin-top: 30px;

        padding: 25px 18px;
    }


    .top-company__sdgs-goals-title {
        font-size: 16px;
    }


    .top-company__sdgs-goal {
        grid-template-columns: 1fr;

        gap: 12px;

        padding: 18px 0;
    }


    .top-company__sdgs-goal-label {
        width: 70px;

        min-height: 32px;

        padding: 7px 8px;

        font-size: 11px;
    }


    .top-company__sdgs-goal p {
        font-size: 13px;

        line-height: 1.9;
    }

     }

/* =========================================
   Responsive: 600px
========================================= */

@media screen and (max-width: 600px) {

    .top-info {
        padding: 45px 18px 55px;
    }

    .top-info__inner {
        gap: 50px;
    }

    .top-info__heading {
        margin-bottom: 20px;
    }

    .top-info__heading h2 {
        font-size: 20px;
    }

    .top-news__item {
        grid-template-columns: 84px 74px minmax(0, 1fr);
        gap: 8px;
        padding: 10px 0;
    }

    .top-news__date {
        font-size: 11px;
    }

    .top-news__category {
        min-height: 23px;
        padding: 4px 5px;
        font-size: 10px;
    }

    .top-news__title {
        font-size: 12px;
    }

    .top-service {
        padding: 55px 18px 70px;
    }

    .top-service__bg-text {
        top: 25px;
        right: -25px;
        font-size: 90px;
    }

    .top-service__heading {
        margin-bottom: 32px;
    }

    .top-service__heading-title {
        gap: 11px;
    }

    .top-service__heading-title > span {
        width: 3px;
        height: 46px;
    }

    .top-service__heading-title h2 {
        font-size: 32px;
    }

    .top-service__heading-copy {
        margin-top: 22px;
    }

    .top-service__heading-copy h3 {
        font-size: 21px;
    }

    .top-service__heading-copy p {
        font-size: 12px;
    }

    .top-service__grid {
        gap: 22px;
    }

    .top-service__item {
        flex: 0 0 100%;
    }

    .top-service__content {
        min-height: auto;
        padding: 20px 20px 26px;
    }

    .top-service__title {
        font-size: 17px;
    }

    .top-service__text {
        font-size: 12px;
        line-height: 1.8;
    }

    .sp-only {
        display: block;
    }

    /* =========================================
    Staff Smartphone
    ========================================= */

        .top-staff {
        padding: 55px 18px 70px;
    }


    .top-staff__bg-text {
        top: 25px;
        right: -25px;

        font-size: 90px;
    }


    .top-staff__heading {
        margin-bottom: 32px;
    }


    .top-staff__heading-title {
        gap: 11px;
    }


    .top-staff__heading-title > span {
        width: 3px;
        height: 46px;
    }


    .top-staff__heading-title h2 {
        font-size: 32px;
    }


    .top-staff__heading-copy {
        margin-top: 22px;
    }


    .top-staff__heading-copy h3 {
        font-size: 21px;
    }


    /* カード */
    .top-staff__grid {
        gap: 22px;
    }


    .top-staff__item {
        padding: 20px;

        display: block;
    }


    .top-staff__image {
        width: min(180px, 65%);

        margin: 0 auto 20px;
    }


    .top-staff__profile {
        margin-bottom: 16px;
    }


    .top-staff__profile strong {
        font-size: 17px;
    }


    .top-staff__profile span {
        font-size: 10px;
    }


    .top-staff__text {
        font-size: 12px;

        line-height: 1.8;
    }


    /* 有資格者 */
    .top-license {
        margin-top: 55px;

        padding: 26px 16px 20px;
    }


    .top-license__title {
        margin-bottom: 24px;

        font-size: 22px;
    }


    .top-license__table {
        min-width: 600px;
    }


    .top-license__table thead th {
        padding: 13px 12px;

        font-size: 13px;
    }


    .top-license__table tbody td {
        padding: 12px;

        font-size: 12px;
    }

    /* =========================================
    Company
    ========================================= */

    .top-company {
        padding: 55px 18px 70px;
    }


    .top-company__bg-text {
        top: 25px;
        right: -30px;

        font-size: 82px;
    }


    .top-company__heading {
        margin-bottom: 32px;
    }


    .top-company__heading-title {
        gap: 11px;
    }


    .top-company__heading-title > span {
        width: 3px;
        height: 46px;
    }


    .top-company__heading-title h2 {
        font-size: 32px;
    }


    .top-company__heading-copy {
        margin-top: 22px;
    }


    .top-company__heading-copy h3 {
        font-size: 21px;
    }


    .top-company__intro {
        margin-bottom: 60px;
    }


    .top-company__intro-content h3 {
        font-size: 23px;
    }


    .top-company__intro-content > p:not(.top-company__intro-label) {
        font-size: 13px;

        line-height: 1.9;
    }


    .top-company__block,
    .top-company__info-grid {
        margin-top: 60px;
    }


    .top-company__section-title h3 {
        font-size: 22px;
    }


    /* 会社概要 */
    .top-company__profile-row {
        display: block;
    }


    .top-company__profile-label {
        padding: 12px 16px;
    }


    .top-company__profile-value {
        padding: 16px;
    }


    .top-company__service-list {
        display: block;
    }


    .top-company__service-list li + li {
        margin-top: 7px;
    }


    /* BOX */
    .top-company__info-box,
    .top-company__license-item {
        padding: 24px 20px;
    }


    /* SDGs */
    .top-company__sdgs {
        margin-top: 65px;
    }


    .top-company__sdgs-inner {
        padding: 24px 20px;

        grid-template-columns: 1fr;

        gap: 30px;
    }


    .top-company__sdgs-icons {
        width: min(340px, 100%);

        margin: 0 auto;
    }


    /* 沿革 */
    .top-company__history {
        margin-top: 70px;
    }


    .top-company__timeline-item {
        grid-template-columns: 78px minmax(0, 1fr);
    }


    .top-company__timeline-date {
        padding-right: 15px;

        font-size: 12px;
    }


    .top-company__timeline-text {
        padding-left: 22px;

        font-size: 12px;
    }

    /* =========================================
    Company Detail List
    ========================================= */

        .top-company__license-list > li {
        display: block;
    }

    .top-company__license-list > li > strong {
        padding: 13px 16px;
    }

    .top-company__license-list > li > span,
    .top-company__license-sub {
        padding: 16px;
    }

    /* =========================================
    Message
    ========================================= */

        .top-message {
        padding: 55px 18px 70px;
    }


    .top-message__bg-text {
        top: 30px;

        font-size: 80px;
    }


    .top-message__heading {
        margin-bottom: 32px;

        gap: 10px;
    }


    .top-message__heading-line {
        width: 3px;
        height: 48px;
    }


    .top-message__heading h2 {
        font-size: 34px;
    }


    .top-message__heading p {
        margin-top: 7px;

        font-size: 12px;
    }


    .top-message__panel {
        padding: 28px 20px 32px;

        gap: 30px;
    }


    .top-message__photo {
        width: min(240px, 75%);
    }


    .top-message__content > p {
        margin-bottom: 18px;

        font-size: 12px;

        line-height: 1.9;
    }


    .top-message__signature {
        margin-top: 28px;

        display: block;

        text-align: right;
    }


    .top-message__signature span {
        display: block;

        margin-bottom: 8px;

        font-size: 11px;
    }


    .top-message__signature strong {
        font-size: 22px;
    }

    /* =========================================
        Office Referral
    ========================================= */

     .top-office {
        padding: 55px 18px 70px;
    }


    .top-office__bg-text {
        top: 25px;
        right: -30px;

        font-size: 75px;
    }


    .top-office__heading {
        margin-bottom: 35px;

        gap: 10px;
    }


    .top-office__heading-line {
        width: 3px;
        height: 48px;
    }


    .top-office__heading-text h2 {
        font-size: 32px;
    }


    .top-office__heading-text p {
        margin-top: 7px;

        font-size: 11px;
    }


    .top-office__item {
        padding:
            35px
            0
            45px;
    }


    .top-office__item + .top-office__item {
        margin-top: 10px;
    }


    .top-office__info h3 {
        font-size: 20px;
    }


    /* 情報 */
    .top-office__data-row {
        min-height: auto;

        padding: 15px 0;

        grid-template-columns: 70px minmax(0, 1fr);
    }


    .top-office__data-row dt {
        font-size: 12px;
    }


    .top-office__data-row dd {
        font-size: 12px;

        line-height: 1.7;
    }


    /* MAP */
    .top-office__map {
        width: 100%;

        aspect-ratio: 4 / 3;
    }


    /* 写真は1列 */
    .top-office__gallery,
    .top-office__gallery--two {
        max-width: none;

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .top-office__gallery figure {
        aspect-ratio: 16 / 10;
    }

    /* =========================================
    Contact
    ========================================= */

        .top-contact {
        padding: 60px 18px 70px;

        background-position: center;
    }


    .top-contact__heading {
        margin-bottom: 38px;
    }


    .top-contact__heading h2 {
        font-size: 40px;
    }


    .top-contact__heading p {
        margin-top: 10px;

        font-size: 12px;
    }


    .top-contact-form__field {
        margin-bottom: 22px;
    }


    .top-contact-form__label {
        font-size: 14px;
    }


    .top-contact-form input[type="text"],
    .top-contact-form input[type="email"],
    .top-contact-form input[type="tel"] {
        height: 44px;
    }


    .top-contact-form textarea {
        height: 200px;
    }


    .top-contact-form__radio .wpcf7-list-item {
        display: block;

        margin:
            0
            0
            10px;
    }


    .top-contact-form__privacy {
        font-size: 11px;

        line-height: 1.7;
    }


    .top-contact-form__submit .wpcf7-submit {
        width: 180px;
    }

    /* =========================================
        警備業者
    ========================================= */

    .top-company__license-layout {
    gap: 25px;
    }


    .top-company__license-certificate {
        padding: 10px;
    }


}


/* =========================================
   Responsive: 480px
========================================= */

@media screen and (max-width: 480px) {

    .top-header {
        height: 68px;
    }

    .top-header__logo img {
        width: 220px;
    }

    .top-header__nav {
        top: 68px;
    }

    .top-hero__title {
        font-size: 30px;
    }

    .top-hero__catch {
        font-size: 20px;
    }

    .top-hero__text {
        font-size: 13px;
    }

    .top-news__item {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .top-news__date,
    .top-news__category,
    .top-news__title {
        width: fit-content;
    }

    .top-news__category {
        min-width: 78px;
    }

    .ast-scroll-to-top-right {
    bottom: 110px !important;
}
}