/*
Theme Name: Daisho
Description: 大松精機グループの企業サイト用WordPressテーマ
Author: SODA
Version: 1.0
Text Domain: daisho
*/

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');






.ci {
    background: url(https://daisho-test.mssusers.com/wp-content/themes/daisho/img/logo-gray.svg);
    background-position: center 300px;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .ci {
        background-position: center 400px;
    }
}

.tech-card h3,
.tech-card h4,
.tech-card h5,
.tech-card strong,
.tech-card p {
    color: #fff;
}

.tech-card h5 {
    font-size: 1.2rem;
}

.tech-card strong {
    font-size: 1rem;
}

/* グリッドレイアウト */
.tech-grid {
    max-width: 1200px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
}

/* テックカード */
.tech-card {
    background: linear-gradient(135deg, rgb(4 52 160 / 20%) 0%, rgb(20 75 135 / 20%) 100%);
    padding: 40px 30px 10px;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.8s ease-out forwards;
    opacity: 0;
    display: flex;
    flex-direction: column;
}

/* 左からスライドイン（クリーニング技術） */
.tech-card:nth-child(1) {
    margin-left: -200px;
    animation: slideInFromLeft 0.8s ease-out forwards;
}

/* 右からスライドイン（マーキング技術） */
.tech-card:nth-child(2) {
    margin-right: -200px;
    animation: slideInFromRight 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

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

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

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

.tech-card h3 {
    margin-bottom: 20px;
}

.tech-card>p {
    margin-bottom: 30px;
}

/* タイトルと説明のレイアウト */
.tech-card-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 30px;
}

.tech-card-header h3 {
    margin-bottom: 0;
    padding-top: 5px;
}

.tech-card-header p {
    margin-bottom: 0;
}

/* テックサンプル */
.tech-examples {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 10px;
}

.tech-example {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.tech-example>div:first-child {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* 画像のスタイル */
.tech-example>div:first-child img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 適合素材セクション */
.suitable-materials {
    padding: 20px;
    border-radius: 8px;
    text-align: left;
    margin-top: auto;
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .section__title {
        font-size: 32px;
    }

    .tech-card {
        padding: 30px 20px;
    }

    .tech-card:nth-child(1) {
        margin-left: 0;

    }

    .tech-card:nth-child(2) {
        margin-right: 0;
    }

    .tech-card h3 {
        font-size: 22px;
    }

    .tech-examples {
        grid-template-columns: 1fr;
    }

    /* スマホではセルを解除して上下配置 */
    .tech-card-header {
        display: block;
    }

    .tech-card-header h3 {
        margin-bottom: 15px;
    }

    .tech-card-header p {
        margin-bottom: 20px;
    }
}


.hero-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    display: block;
    object-position: center bottom;
    object-fit: cover;
    margin-bottom: 4rem;
}

.content-area {
    padding: 50px 40px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
}

.wht,
.content-area h3,
.content-area p {
    color: #fff !important;
}

.p-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 0;
    position: relative;
}

.p-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.p-number {
    width: 100px;
    height: 100px;
    background-color: #2d3ba3;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    margin-bottom: 15px;
    margin-left: 0;
}

.p-label {
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 5px;
    margin-top: 20px;
}

.p-number-text {
    font-size: 48px;
    font-weight: 700;
    margin-top: -20px;
}

.p-image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.p-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.p-description {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.95;
    text-align: left;
}

/* ポイント画像全体のコンテナ */
.p-container {
    position: relative;
    width: 100%;
}

.p-item-wrapper {
    position: relative;
    display: inline-block;
    width: 96%;
    vertical-align: top;
    margin-right: 4%;
}

.p-item-wrapper:nth-child(2) {
    margin-right: 0;
}

.p-image-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.p-number-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    flex-shrink: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .section-header {
        padding: 40px 30px 30px;
    }

    .section-header h2 {
        font-size: 36px;
    }

    .content-area {
        padding: 40px 30px;
    }

    .p-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .p-number {
        width: 90px;
        height: 90px;
    }

    .p-number-text {
        font-size: 36px;
    }

    .p-image {
        height: 180px;
    }
}


.eco .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 3rem auto 0;
}

.eco .feature-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.eco .feature-card h3 {
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.4;
}

.eco .feature-card p {
    line-height: 1.8;
    word-break: break-word;
    color: #333;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .eco .features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .eco .feature-card {
        padding: 18px;
    }
}

.eco h3,
.eco p {
    color: #fff;
}

.eco h4 {
    text-align: center;
}

.hi-cl-env .section__grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.hi-cl-env .section__card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 20px 15px;
}

.processing .section__card:hover,
.support-sys .section__card:hover,
.dsm-creation .section__card:hover,
.jig-printer .section__card:hover,
.tec-spec .section__card:hover,
.hi-cl-env .section__card:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 左側のカード：2つのカードを積み重ね - テキストは上下、画像は右側 */
.hi-cl-env .section__card:nth-child(1),
.hi-cl-env .section__card:nth-child(2) {
    grid-column: 1;
    flex-direction: row;
}

/* 左側カード内のテキストコンテナ */
.hi-cl-env .section__card:nth-child(1),
.hi-cl-env .section__card:nth-child(2) {
    position: relative;
}

/* テキスト部分を上下配置するラッパー作成 */
.hi-cl-env .section__card:nth-child(1)>*:not(.section__card-image),
.hi-cl-env .section__card:nth-child(2)>*:not(.section__card-image) {
    flex: 1;
    min-width: 0;
}

/* 右側のカード：2行分の高さを占める */
.hi-cl-env .section__card:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / 3;
    flex-direction: column;
}

.hi-cl-env .section__card-title {
    padding: 20px 20px 16px;
}

/* 左側カード用タイトル */
.hi-cl-env .section__card:nth-child(1) .section__card-title,
.hi-cl-env .section__card:nth-child(2) .section__card-title {
    padding: 0 20px;
    flex-shrink: 0;
    text-align: left;
}

/* 右側カード用タイトル */
.hi-cl-env .section__card:nth-child(3) .section__card-title {
    padding: 0 20px 8px;
    margin: 0;
    text-align: left;
}

.hi-cl-env .section__card-description {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
    margin: 0;
    line-height: 1.6;
}

/* 左側カード用説明 */
.hi-cl-env .section__card:nth-child(1) .section__card-description,
.hi-cl-env .section__card:nth-child(2) .section__card-description {
    padding: 0 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
}

.hi-cl-env .section__card-description ul {
    list-style: none;
}

.hi-cl-env .section__card-description li {
    margin-bottom: 5px;
    display: flex;
    align-items: flex-start;
}

.hi-cl-env .section__card-description li:last-child {
    margin-bottom: 0;
    text-align: left;
}

.hi-cl-env .section__card-image {
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
}

/* 左側カード用：画像を右側に */
.hi-cl-env .section__card:nth-child(1) .section__card-image,
.hi-cl-env .section__card:nth-child(2) .section__card-image {
    width: 220px;
    min-height: 180px;
    flex-shrink: 0;
}

/* 右側カード用：画像を下に */
.hi-cl-env .section__card:nth-child(3) .section__card-image {
    width: 100%;
    min-height: 280px;
}

.hi-cl-env .section__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* テキストラッパー：タイトルと説明を上下に配置 */
.hi-cl-env .section__card-text-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .hi-cl-env .section__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hi-cl-env .section__card:nth-child(3) {
        grid-column: 1;
        grid-row: auto;
    }

    .hi-cl-env .section__card:nth-child(1),
    .hi-cl-env .section__card:nth-child(2) {
        flex-direction: column;
    }

    .section__card-image {
        width: 100% !important;
    }
}

.proven h3,
.proven p {
    color: #fff;
}

.proven .product-item img {
    width: 100%;
}

.badge-container {
    display: flex;
    gap: 30px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 30px;
}

.badge {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.4rem;
    color: #333333;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .badge {
        width: 110px;
        height: 110px;
        gap: 3px;
    }
}

.box {
    max-width: 900px;
    margin: 4rem auto 0;
    padding: 40px;
    border: 3px solid #1a3a7a;
    border-radius: 4px;
}

.box__title {
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.box__description {
    text-align: left;
}

.reduced-water-generator .spec h3,
.reduced-water-generator .spec p {
    text-align: center;
    color: #fff;
}

.product-container {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.product-item {
    flex: 1;
    min-width: 280px;
    justify-content: center;
    align-items: center;
}

.product-item img {
    width: 80%;
    height: auto;
    display: block;
    margin: auto;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .product-container {
        flex-direction: column;
        gap: 20px;
    }

    .product-item {
        min-width: 100%;
    }
}

.spec table {
    width: 100%;
    border-collapse: collapse;
}

.spec thead {
    background: linear-gradient(135deg, rgb(5 64 198 / 80%) 0%, rgb(25 92 165 / 80%) 100%);
    color: white;
}

.spec th {
    padding: 15px;
    text-align: center;
    font-weight: 600;
    border: 1px solid #ddd;
}

.spec td {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    color: #555;
    text-align: center;
}

.spec tbody tr {
    transition: background-color 0.2s ease;
}

.spec tbody tr:nth-child(odd) {
    background: #f9f9f9;
}

.spec tbody tr:nth-child(even) {
    background: #fff;
}

.spec tbody tr:hover {
    background: #f0f4ff;
}

.spec tbody tr:first-child td {
    background: #f5f5f5;
}


.spec .pulse-type {
    /*display: inline-block;
    background: #667eea;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;*/
}

/* モバイル対応 */
@media (max-width: 768px) {

    .spec th,
    td {
        padding: 10px 8px;
        font-size: 14px;
    }
}





.circles-wrapper {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.circle-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.circle-number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: bold;
    color: #1e3a8a;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow:
        -7px -7px 0 #fff,
        7px -7px 0 #fff,
        -7px 7px 0 #fff,
        7px 7px 0 #fff;
}

.circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 2px solid #1e3a8a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.circle-text {
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.6;
    color: #1e3a8a;
    font-weight: 600;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .ctr {
        text-align: left !important;
    }

    .circles-wrapper {
        gap: 30px;
    }

    .circle {
        width: 180px;
        height: 180px;
        padding: 25px;
    }

    .circle-text {
        font-size: 13px;
    }

    .circle-number {
        font-size: 40px;
        width: 70px;
        height: 70px;
    }
}


.environmental h3 {
    font-weight: 700;
    color: #fff;
}

.environmental p {
    color: #fff;
}

.env-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 3rem;
}

/* 4カラムレイアウト */
@media (min-width: 1024px) {
    .env-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 3カラムレイアウト */
@media (max-width: 1023px) and (min-width: 768px) {
    .env-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2カラムレイアウト */
@media (max-width: 767px) and (min-width: 480px) {
    .env-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1カラムレイアウト */
@media (max-width: 479px) {
    .env-grid {
        grid-template-columns: 1fr;
    }
}

.env-grid figure {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 0 10px 20px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 220px;
    cursor: pointer;
}

/*
.env-grid figure:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
*/
.env-grid figure img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    display: block;
}

.env-grid figcaption {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

/* 大きな画像用の調整 */
.env-grid figure img[width="300"],
.env-grid figure img[width="296"],
.env-grid figure img[width="263"],
.env-grid figure img[width="281"] {
    max-width: 80%;
}

.env-grid figure img[width="80"] {
    max-width: 60%;
}

.contact .container,
.history .container {
    max-width: 900px;
}

.history .timeline {
    position: relative;
    padding: 20px 0;
}

/* タイムラインの縦線 */
.history .timeline::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, #333399, #333399);
    animation: drawLine 2s ease-out forwards;
}

@keyframes drawLine {
    from {
        height: 0;
    }

    to {
        height: 100%;
    }
}

.history .timeline-item {
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeInItem 0.6s ease-out forwards;
    display: flex;
    align-items: flex-start;
    position: relative;
}

/* 各アイテムのアニメーション遅延 */
.history .timeline-item:nth-child(1) {
    animation-delay: 0.2s;
}

.history .timeline-item:nth-child(2) {
    animation-delay: 0.35s;
}

.history .timeline-item:nth-child(3) {
    animation-delay: 0.5s;
}

.history .timeline-item:nth-child(4) {
    animation-delay: 0.65s;
}

.history .timeline-item:nth-child(5) {
    animation-delay: 0.8s;
}

.history .timeline-item:nth-child(6) {
    animation-delay: 0.95s;
}

.history .timeline-item:nth-child(7) {
    animation-delay: 1.1s;
}

.history .timeline-item:nth-child(8) {
    animation-delay: 1.25s;
}

.history .timeline-item:nth-child(9) {
    animation-delay: 1.4s;
}

.history .timeline-item:nth-child(10) {
    animation-delay: 1.55s;
}

.history .timeline-item:nth-child(11) {
    animation-delay: 1.7s;
}

.history .timeline-item:nth-child(12) {
    animation-delay: 1.85s;
}

.history .timeline-item:nth-child(13) {
    animation-delay: 2s;
}

.history .timeline-item:nth-child(14) {
    animation-delay: 2.15s;
}

.history .timeline-item:nth-child(15) {
    animation-delay: 2.3s;
}

.history .timeline-item:nth-child(16) {
    animation-delay: 2.45s;
}

.history .timeline-item:nth-child(17) {
    animation-delay: 2.6s;
}

.history .timeline-item:nth-child(18) {
    animation-delay: 2.75s;
}

.history .timeline-item:nth-child(19) {
    animation-delay: 2.9s;
}

.history .timeline-item:nth-child(20) {
    animation-delay: 3.05s;
}

@keyframes fadeInItem {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

/* タイムラインの丸 */
.history .timeline-dot {
    position: absolute;
    left: 30px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 4px solid #333399;
    border-radius: 50%;
    top: 2px;
    flex-shrink: 0;
    animation: popDot 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: inherit;
    z-index: 2;
}

@keyframes popDot {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* ドットから年号へつなぐ横ライン */
.history .timeline-dot::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(to right, #333399, #333399);
    animation: drawHorizontalLine 0.6s ease-out forwards;
    animation-delay: inherit;
}

@keyframes drawHorizontalLine {
    from {
        width: 0;
    }

    to {
        width: 40px;
    }
}

/* タイムラインのアイテム内容ラッパー */
.history .timeline-item-content {
    margin-left: 100px;
    flex: 1;
}

/* 年号と詳細を並べるフレックスコンテナ */
.history .timeline-item-inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* 年号 */
.history .timeline-year {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333399;
    min-width: 120px;
    flex-shrink: 0;
    line-height: 1;
}

/* 沿革の詳細 */
.history .timeline-content {
    flex: 1;
    line-height: 1.6;
}

.history .timeline-content img {
    max-width: 100%;
    height: auto;
    margin-top: 12px;
    border-radius: 4px;
    display: block;
}

.history .timeline-images {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.history .timeline-images img {
    flex: 1;
    min-width: 150px;
    height: auto;
    border-radius: 4px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .section__title {
        font-size: 36px;
    }

    .history .timeline::before {
        left: 20px;
    }

    .history .timeline-item {
        flex-direction: column;
    }

    .history .timeline-item-content {
        margin-left: 50px;
    }

    .history .timeline-item-inner {
        flex-direction: column;
        gap: 8px;
    }

    .history .timeline-dot {
        left: 12px;
    }

    .history .timeline-dot::after {
        width: 0;
        height: 0;
    }
}

.bg dt,
.bg dd {
    border-bottom: rgba(255, 255, 255, 0.4) solid 1px !important;
}

.company-info dt,
.company-info dd {
    padding: 24px 10px;
    margin: 0;
    border-bottom: #8e8e8e solid 1px;
    justify-content: center;
}

.logo-info {
    text-align: center;
}

.logo-info img {
    max-width: 360px;
}

.factory {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.factory-card {
    background: #f8f9fa;
    padding: 12px 15px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.factory-card-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.factory-card-text {
    flex: 1;
}

.factory-card-text h4 {
    margin: 0 0 6px 0;
}

.factory-card-text p {
    margin: 2px 0;
}

.factory-card-image {
    flex-shrink: 0;
}

.factory-card-image img {
    max-width: 130px;
    height: auto;
    display: block;
}

.company-item {
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.company-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f9f9f9;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease;
}

.company-header:hover {
    background-color: #f0f0f0;
}

.company-header h5 {
    font-size: 18px;
    color: #003399;
    font-weight: bold;
    margin: 0;
    flex: 1;
}

.toggle-btn {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.toggle-btn::before {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid #003399;
    border-bottom: 2px solid #003399;
    transform: rotate(45deg);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-btn.active::before {
    transform: rotate(-135deg);
}

.company-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: white;
}

.company-content.active {
    max-height: 1000px;
}

.company-details {
    padding: 20px;
}

.company-details dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    row-gap: 15px;
}

.company-details dt {
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

.company-details dd {
    color: #666;
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {

    h2 {
        font-size: 24px;
    }

    .company-header h5 {
        font-size: 16px;
    }

    .company-details dl {
        grid-template-columns: 100px 1fr;
        /* gap: 15px 20px;*/
    }

    .company-details dt,
    .company-details dd {
        font-size: 13px;
    }
}



/* フローコンテナ */
.flow-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* フローステップ */
.flow-step {
    flex: 0 0 calc(20% - 2px);
    margin-bottom: 20px;
    background: white;
    padding: 30px 20px;
    text-align: center;
    border-right: 2px solid #2c3e8f;
    position: relative;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.flow-step:last-child {
    border-right: none;
}

/* ステップ番号 */
.step-number {
    font-size: 2rem;
    font-weight: bold;
    color: #2c3e8f;
    margin-bottom: 0;
}

/* ステップタイトル */
.step-title {
    font-size: 1.2rem;
    /*16px*/
    font-weight: bold;
    color: #2c3e8f;
    margin-bottom: 25px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* アイコン */
.step-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ステップ説明 */
.step-description {
    color: #333;
    line-height: 1.8;
    text-align: left;
    padding: 0 10px;
}

/* 矢印（before疑似要素で実装） */
.flow-step::after {
    content: '▶';
    position: absolute;
    right: -23px;
    top: 50%;
    transform: translateY(-50%);
    color: #2c3e8f;
    font-size: 24px;
    z-index: 1;
}

.flow-step:nth-child(9n)::after {
    display: none;
}



/* レスポンシブ対応 */
@media (max-width: 1200px) {
    .flow-container {
        flex-wrap: wrap;
    }

    .flow-step {
        flex: 0 0 calc(33.333% - 10px);
        margin-bottom: 20px;
        border-right: none;
        border-bottom: 2px solid #2c3e8f;
    }

    .flow-step::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .flow-step {
        flex: 0 0 100%;
        margin-bottom: 20px;
        border-right: none;
        border-bottom: 2px solid #2c3e8f;
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-rows: auto auto auto;
        padding: 20px 15px;
        min-height: auto;
        align-items: start;
        gap: 0;
    }

    /* 左カラム - テキストコンテンツ（70%） */
    .step-number {
        grid-column: 1;
        grid-row: 1;
        font-size: 24px;
        margin-bottom: 0;
        margin-right: 0;
        display: block;
        text-align: left;
        padding-right: 15px;
    }

    .step-title {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
        margin-left: 25px;
        display: block;
        min-height: auto;
        text-align: left;
        /*padding-right: 15px;*/
    }

    .step-description {
        grid-column: 1;
        grid-row: 2;
        padding: 0;
        padding-right: 15px;
        margin-top: 5px;
        text-align: left;
    }

    /* 右カラム - アイコン（30%） */
    .step-icon {
        grid-column: 2;
        grid-row: 1 / 3;
        width: 100%;
        height: auto;
        margin: 0;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .step-icon img {
        max-width: 80px;
        max-height: 80px;
    }

    /* スマホ表示時は下向き矢印を表示 */
    .flow-step::after {
        content: '▼';
        position: absolute;
        right: auto;
        left: 50%;
        top: auto;
        bottom: -25px;
        transform: translateX(-50%);
        color: #2c3e8f;
        font-size: 20px;
        z-index: 1;
        display: block;
    }

    /* 最後のステップは矢印非表示 */
    .flow-container:last-child .flow-step:last-child::after {
        display: none;
    }

    .step-number,
    .step-title {
        font-size: 1.25rem;
    }
}


/* 2カラムレイアウト */
.pdt-overview h4,
.pdt-overview p {
    color: #fff;
}

.pdt-overview .effectiveness-item {
    align-items: center;
}

.pdt-overview .effectiveness-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pdt-overview .effectiveness-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.effectiveness-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 40px;
}

.effectiveness-item {
    display: flex;
    flex-direction: column;
}

.wht-dlaser .effectiveness-grid {
    margin-bottom: 0;
}

.wht-dlaser .effectiveness-image {
    height: auto;
}

.wht-dlaser .effectiveness-image img {
    object-fit: contain;
}

.effectiveness-image {
    width: 100%;
    height: 250px;
    border-radius: 8px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.effectiveness-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 左カラム（D-LASER） */
.laser-content {
    background-color: transparent;
    padding: 0;
}

.comparison-box {
    border: 2px solid #0066cc;
    border-radius: 8px;
    background: #fff;
    padding: 0;
    margin-bottom: 0;
}

.comparison-item {
    display: flex;
    align-items: center;
    min-height: 60px;
}

.comparison-item .label {
    background-color: #0066cc;
    color: white;
    padding: 4px 18px;
    margin: 0 10px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 6px;
    min-width: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.comparison-item .value {
    flex: 1;
    padding: 12px 18px;
    color: #333;
    background-color: white;
    border-radius: 0 6px 6px 0;
}

.arrow-down {
    position: relative;
    height: 25px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.arrow-down::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 15px solid #0066cc;
    top: 0;
}

.bg .arrow-down::before {
    border-top: 15px solid #fff;
}

.laser-content .highlight {
    background-color: white;
    padding: 30px 25px;
    border-radius: 8px;
    border: 2px solid #0066cc;
    margin-top: 0;
    position: relative;
    padding-top: 35px;
}

.laser-content .highlight p {
    font-size: 16px;
    font-weight: 700;
    color: #1a3a8a;
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

.laser-content .highlight p:first-child {
    font-size: 28px;
    margin-bottom: 12px;
}

.laser-content .highlight p:last-child {
    font-weight: 500;
}

.laser-button {
    width: 100%;
    padding: 14px;
    background-color: #1a3a8a;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.laser-button:hover {
    background-color: #0f2350;
}

/* 右カラム（還元水システム） */
.water-content {
    display: flex;
    flex-direction: column;
}

.water-benefits {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.benefit-item {
    display: flex;
    gap: 20px;
    padding: 14px;
    background-color: white;
    border-radius: 8px;
    border: 2px solid #0066cc;
    transition: border-color 0.3s;
}

.benefit-item:hover {
    border-color: #0066cc;
}

.benefit-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon img {
    width: 100%;
}

.benefit-text h4 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1a3a8a;
    margin-bottom: 5px;
}

.benefit-text p {
    color: #333;
    line-height: 1.5;
    margin-bottom: 0;
}

.water-button {
    width: 100%;
    padding: 14px;
    background-color: #1a3a8a;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.water-button:hover {
    background-color: #0f2350;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .effectiveness-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}




.differences.section.bg {
    padding-left: 0;
    padding-right: 0;
    background: url('https://daisho-test.mssusers.com/wp-content/uploads/2025/11/development-04.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: lighten;
    width: 100%;
    overflow: hidden;
}

/*
.vs {
    background: url('https://daisho-test.mssusers.com/wp-content/uploads/2025/11/development-04.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: lighten;
    width: 100%;
    overflow: hidden;
}
*/
.vs-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 30px;
    align-items: stretch;
    margin: auto;
    max-width: 1200px;
}

.column {
    color: white;
    text-align: center;
}

.column.center {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
}

.column h3 {
    font-size: 2.4em;
    font-weight: 700;
    margin-bottom: 30px;
    color: white;
}

.column ul {
    list-style: none;
}

.column li {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 15px;
    position: relative;
}


@media (max-width: 768px) {
    .vs-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0;
        width: 100%;
        height: 100vh;
        align-items: stretch;
    }

    .column {
        padding: 0 30px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-radius: 0;
        height: 100%;
    }

    .column h3 {
        font-size: 2.5em;
        margin-bottom: 0;
        margin-right: 20px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        white-space: nowrap;
        line-height: 1.2;
        flex-shrink: 0;
    }

    .column ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1;
    }

    .column li {
        font-size: 0.95em;
        line-height: 1.6;
        writing-mode: horizontal-tb;
        text-align: left;
    }

    .column li:before {
        display: none;
    }

    .column.left {
        border: none;
    }

    .column.left h3 {
        text-align: center;
    }

    .column.left ul {
        display: flex;

    }

    .column.center {
        display: flex;
    }

    .column.right {
        border: none;
        flex-direction: row-reverse;
    }

    .column.right h3 {
        margin-bottom: 20px;
        text-align: center;
    }

    .column.right ul,
    .column.right li {
        text-align: right;
    }
}



.development .section__card p {
    text-align: left;
    padding-left: 20px;
}

.differences p {
    color: #fff;
}


.development .timeline {
    position: relative;
    margin: 80px 0;
}

/* タイムラインの線 */
.development .timeline::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 3px;
    background: #515ac6;
    z-index: 1;
    animation: lineDrawn 1.5s ease-out forwards;
}

@keyframes lineDrawn {
    from {
        width: 0;
        left: 0;
    }

    to {
        width: 100%;
        left: 0;
    }
}

.development .timeline-items {
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 2;
}

.development .timeline-item {
    flex: 1;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.development .timeline-item-top {
    order: -1;
}

.development .timeline-item-bottom {
    order: 1;
}

/* タイムラインの点（円） */
.development .timeline-point {
    width: 30px;
    height: 30px;
    background: white;
    border: 6px solid #303996;
    border-radius: 50%;
    margin: 0 auto 10px;
    position: relative;
    box-shadow: none;
    transition: all 0.3s ease;
    opacity: 0;
    animation: pointAppear 0.5s ease-out forwards;
}

.development .timeline-item:nth-child(1) .timeline-point {
    animation-delay: 1.5s;
}

.development .timeline-item:nth-child(2) .timeline-point {
    animation-delay: 2.2s;
}

.development .timeline-item:nth-child(3) .timeline-point {
    animation-delay: 2.9s;
}

@keyframes pointAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.development .timeline-point:hover {
    transform: scale(1.1);
    box-shadow: none;
}

.development .timeline-label {
    opacity: 0;
    animation: fadeInLabel 0.6s ease-out forwards;
}

.development .timeline-item:nth-child(1) .timeline-label {
    animation-delay: 1.8s;
}

.development .timeline-item:nth-child(2) .timeline-label {
    animation-delay: 2.5s;
}

.development .timeline-item:nth-child(3) .timeline-label {
    animation-delay: 3.2s;
}

@keyframes fadeInLabel {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 下部の破線と説明 */
.dotted-line {
    width: 2px;
    height: 40px;
    /*background: #515ac6;*/
    background-image: repeating-linear-gradient(to bottom,
            #515ac6 0px,
            #515ac6 2px,
            transparent 2px,
            transparent 4px);
    margin: 0 auto;
    opacity: 0;
    animation: fadeInDot 0.4s ease-out forwards;
}

.development .timeline-item:nth-child(1) .dotted-line {
    animation-delay: 1.9s;
}

.development .timeline-item:nth-child(2) .dotted-line {
    animation-delay: 2.6s;
}

.development .timeline-item:nth-child(3) .dotted-line {
    animation-delay: 3.3s;
}

@keyframes fadeInDot {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.development .timeline-content {
    padding: 20px;
    min-height: 100px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: none;
    opacity: 0;
    animation: fadeInContent 0.6s ease-out forwards;
    transition: background 0.3s ease;
}

.development .timeline-item:nth-child(1) .timeline-content {
    animation-delay: 1.9s;
}

.development .timeline-item:nth-child(2) .timeline-content {
    animation-delay: 2.6s;
}

.development .timeline-item:nth-child(3) .timeline-content {
    animation-delay: 3.3s;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.development .timeline-content:hover {
    background: #efefef;
}

.content-title {
    margin-bottom: 10px;
}

.content-text {
    line-height: 1.6;
}

@keyframes fadeInTitle {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {

    .development .timeline-items {
        flex-direction: column;
        gap: 80px;
        margin-left: 30px;
    }

    .development .timeline::before {
        top: 0;
        left: 60px;
        width: 3px;
        height: 100%;
        animation: lineGrowVertical 2s ease-in-out;
    }

    @keyframes lineGrowVertical {
        from {
            height: 0;
            top: 0;
        }

        to {
            height: 100%;
            top: 0;
        }
    }

    .development .timeline-item {
        margin-left: 0;
        text-align: left;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        position: relative;
        padding-left: 40px;
    }

    .development .timeline-item-top {
        order: 0;
        position: absolute;
        left: -50px;
        top: -10px;
        width: 60px;
        text-align: right;
    }

    .development .timeline-item-bottom {
        order: 0;
        flex: 1;
        margin-top: 0;
    }

    .development .timeline-point {
        position: absolute;
        left: 20px;
        top: -10px;
        margin: 0;
        width: 24px;
        height: 24px;
        border-width: 4px;
    }

    .dotted-line {
        display: none;
    }

    .development .timeline-content {
        padding: 0;
        margin-left: 20px;
        margin-top: -10px;
        min-height: auto;
        max-width: 100%;
        border-left: none;
    }

    .development .timeline-label {
        font-weight: bold;
        margin-bottom: 5px;
    }
}







.form-group {
    margin-bottom: 35px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.form-label {
    flex: 0 0 160px;
    font-weight: 500;
    font-size: 14px;
    color: #333;
    padding-top: 12px;
    line-height: 1.4;
}

.form-label .required {
    color: #d9534f;
}

.form-input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
    background-color: #f9f9f9;
    color: #666;
    transition: border-color 0.3s;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
    color: #999;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    outline: none;
    border-color: #999;
    background-color: white;
}

textarea {
    resize: vertical;
    min-height: 180px;
    font-family: inherit;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #333;
}

.checkbox-label {
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.checkbox-label a {
    color: #0066cc;
    text-decoration: underline;
}

.checkbox-label a:hover {
    color: #0052a3;
}

.divider {
    height: 1px;
    background-color: #e0e0e0;
    margin-bottom: 30px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .form-group {
        flex-direction: column;
        gap: 10px;
    }

    .form-label {
        flex: 1;
        padding-top: 0;
    }

    .form-input-wrapper {
        width: 100%;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width: 100%;
    }
}

.buttons-wrapper {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

.button {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    padding: 20px 40px;
    background-color: #1e3a8a;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button:hover {
    background-color: #152753;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(0);
}

.bg .button {
    background-color: #ffffff !important;
    color: #1e3a8a;
}

.bg .button:hover {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .buttons-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .button {
        min-width: 100%;
        max-width: 100%;
    }
}

/* オプション：ボタンのバリエーション */
.button.outline {
    background-color: transparent;
    color: #1e3a8a;
    border: 2px solid #1e3a8a;
}

.button.outline:hover {
    background-color: #f0f4ff;
    border-color: #152753;
}

dl {
    display: flex;
    flex-wrap: wrap;
}

.jig-printer dt {
    width: 33%;
}

.jig-printer dd {
    width: 67%;
}

.company-info dt {
    width: 20%;
}

.company-info dd {
    width: 80%;
}

dt {
    padding: 10px;
    margin: 0;
    border-bottom: #8e8e8e solid 1px;
    justify-content: center;
}

dd {
    padding: 10px;
    margin: 0;
    border-bottom: #8e8e8e solid 1px;
}

/* 資格数値と単位の表示 */
.qualification-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.qualification-unit {
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* フッター統計用 */
.footer-stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    line-height: 1;
}

.footer-stat-unit {
    font-size: 2.6em;
    color: #fff;
    font-weight: bold;
}



.qualification-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
    /*251003-915 align-items: start;*/
}

.qualification-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.qualification-item {
    position: relative;
    animation: fadeInUp 0.6s ease-out;
}

.qualification-label {
    font-size: clamp(12px, 1.5vw, 16px);
    opacity: 0.9;
    line-height: 1.4;
}

.qualification-number {
    font-size: 6rem;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

.photo-section {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 50px;
}

.photo-section .photo-item {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.5s ease-out;
}

.photo-section .photo-item.slide-in {
    opacity: 1;
    transform: translateY(0);
}

/* 各写真に遅延を追加 */
.photo-section .photo-item:nth-child(1) {
    transition-delay: 0.8s;
}

.photo-section .photo-item:nth-child(2) {
    transition-delay: 1.4s;
}

.photo-item {
    border-radius: 3px;
    overflow: hidden;
    /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);*/
    transition: transform 0.3s ease;
}

.photo-item img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

/* 溶接・加工技術セクション */
.welding-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    justify-content: flex-end;
}

.welding-qualifications {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 25px;
}

.welding-photos {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
}

.welding-photos .photo-item {
    height: 320px;
    max-width: 500px;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease-out;
}

.welding-photos .photo-item.slide-in {
    opacity: 1;
    transform: translateX(0);
}

.welding-photos .photo-item:nth-child(1).slide-in {
    transform: translateX(0);
    z-index: 3;
}

.welding-photos .photo-item:nth-child(1) {
    margin-left: 100px;
    margin-top: 50px;
}

.welding-photos .photo-item:nth-child(2) {
    margin-left: -150px;
    margin-top: -50px;
}

.welding-photos .photo-item:nth-child(2).slide-in {
    transform: translateX(0);
    z-index: 2;
}

.welding-photos .photo-item:nth-child(3) {
    margin-left: -400px;
    margin-top: -50px;
}

.welding-photos .photo-item:nth-child(3).slide-in {
    transform: translateX(0);
    z-index: 1;
}

.welding-photos .photo-item img {
    height: 100%;
}

.machine-icon {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* レスポンシブデザイン */
/* 安全管理・作業主任者セクション */
.safety-section {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 40px;
    align-items: start;
}

.safety-qualifications {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.safety-photo {
    grid-column: 1 / -1;
    margin-top: 30px;
}

.safety-photo .photo-item {
    height: 300px;
    opacity: 0;
    transform: translateX(200px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
        transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.safety-photo .photo-item.slide-in {
    opacity: 1;
    transform: translateX(0);
}

.safety-photo .photo-item img {
    height: 100%;
}

.safety-photos .photo-item {
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.8s ease-out;
}

.safety-photos .photo-item.slide-in {
    opacity: 1;
    transform: translateX(0);
}


/* その他専門資格セクション */
.other-section {
    position: relative;
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    min-height: 500px;
}

.diagonal-photo {
    position: relative;
    height: 600px;
    overflow: hidden;
    margin-top: 30px;
}

/* .photo-itemのアニメーション設定 */
.diagonal-photo .photo-item {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0;
    transform: translateX(-200px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
        transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.diagonal-photo .photo-item.slide-in {
    opacity: 1;
    transform: translateX(0);
}

/* .photo-item内のimg設定 */
.diagonal-photo .photo-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
    clip-path: polygon(0 0, 70% 0, 0 100%);
    transform: translateX(-10%);
    filter: drop-shadow(8px 8px 12px rgba(0, 0, 0, 0.3));
}

.other-qualifications {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    z-index: 2;
}

.diagonal-item {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.diagonal-item:nth-child(1) {
    transform: translateY(0);
    transform: translateX(-50px);
}

.diagonal-item:nth-child(2) {
    transform: translateY(30px);
    transform: translateX(-200px);
}

.diagonal-item:nth-child(3) {
    transform: translateY(60px);
    transform: translateX(-350px);
}

.diagonal-item:nth-child(4) {
    transform: translateY(90px);
    transform: translateX(-500px);
}

.diagonal-item:nth-child(5) {
    transform: translateY(120px);
    transform: translateX(-650px);
}

/* フッターセクション */
.footer-stats {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 90px;
    margin-top: 60px;
    padding: 40px 20px;
    position: relative;
}

.footer-character {
    position: absolute;
    left: 80px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.speech-bubble {
    background: white;
    color: #1e88e5;
    padding: 15px 25px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
}

.character-icon {
    font-size: 48px;
}

.footer-stat {
    text-align: center;
}

.footer-stat-number {
    font-size: clamp(60px, 10vw, 120px);
    font-weight: bold;
    color: #ffd700;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
    line-height: 1;
    margin-bottom: 10px;
}

.footer-stat-label {
    font-size: clamp(16px, 2.5vw, 28px);
    font-weight: bold;
    color: white;
}

.plus-sign {
    font-size: clamp(40px, 6vw, 60px);
    color: #ffd700;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .qualification-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .qualification-item {
        padding: 0;
    }

    .qualification-label {
        font-size: clamp(12px, 2.5vw, 16px);
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .qualification-number {
        font-size: 3.4rem;
    }

    .qualification-unit {
        font-size: 1.6rem;
    }

    .qualification-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }




    .welding-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .welding-qualifications {
        grid-template-columns: repeat(3, 1fr);
    }

    /*
    .photo-section {
        order: -1;
    }
*/
    .machine-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .welding-photos {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
        padding: 0;
    }

    .welding-photos .photo-item {
        height: 200px;
        max-width: 100%;
        width: 100%;
        margin: 0 !important;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease-out;
        border-radius: 3px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .welding-photos .photo-item.slide-in {
        opacity: 1;
        transform: translateY(0);
    }

    .welding-photos .photo-item:nth-child(1) {
        z-index: 1;
    }

    .welding-photos .photo-item:nth-child(2) {
        z-index: 1;
        transition-delay: 0.1s;
    }

    .welding-photos .photo-item:nth-child(3) {
        z-index: 1;
        transition-delay: 0.2s;
    }

    .welding-photos .photo-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }





    /* 安全管理セクション */
    .safety-section {
        grid-template-columns: 1fr;
    }

    .safety-qualifications {
        grid-template-columns: repeat(3, 1fr);
    }

    /* その他専門資格セクション */
    .other-section {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: auto;
    }

    .other-qualifications {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .diagonal-photo {
        display: none;
        order: 99;
    }

    .other-qualifications {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .diagonal-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
    }

    .diagonal-item:nth-child(1),
    .diagonal-item:nth-child(2),
    .diagonal-item:nth-child(3),
    .diagonal-item:nth-child(4),
    .diagonal-item:nth-child(5) {
        transform: none;
    }

    .diagonal-item .qualification-label {
        text-align: left;
        font-size: clamp(12px, 2.5vw, 16px);
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .diagonal-item .qualification-value {
        display: flex;
        align-items: baseline;
        gap: 5px;
        justify-content: center;
    }

    .diagonal-item .qualification-number {
        font-size: 3.6rem;
    }

    .diagonal-item .qualification-unit {
        font-size: 1.6rem;
    }

    /* フッター */
    .footer-stats {
        gap: 20px;
        padding: 30px 0;
    }

    .footer-character {
        position: static;
        margin-bottom: 20px;
    }

    .plus-sign {
        display: none;
    }
}











































/* Global Styles */
:root {
    --ta3-delay-step: .02s;
    --ta3-dur: .3s;
    --ta3-ease: cubic-bezier(0.77, 0, 0.175, 1);
    --ta3-yoff: .4em;
}

.ta3 {
    display: block;
    /*display: inline-flex;
    flex-wrap: wrap;
    gap: .02em;*/
    line-height: 1.1;
    --ta3-opacity: 0;
}

.ta3.is-active {
    --ta3-opacity: 1;
}

.ta3 .char,
.ta3 .whitespace {
    display: inline-block;
    opacity: var(--ta3-opacity);
    /*transform: translateY(var(--ta3-yoff));*/
    transition: opacity var(--ta3-dur) var(--ta3-ease), transform var(--ta3-dur) var(--ta3-ease);
    transition-delay: calc(var(--ta3-delay-step)*var(--i));
    will-change: opacity, transform;
}

.ta3:not(.is-active) .char,
.ta3:not(.is-active) .whitespace {
    transition-delay: calc(var(--ta3-delay-step)*(var(--count) - var(--i)));
}

.ta3 .whitespace {
    width: .4ch;
}

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

    .ta3 .char,
    .ta3 .whitespace {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}


:root {
    --btn-blue: #1565c0;
    --btn-speed: .25s;
    --btn-radius: 8px;

}


a.btn,
button.btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: 15px 25px;
    border: 2px solid var(--btn-blue);
    background: var(--btn-blue);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    border-radius: var(--btn-radius);
    text-wrap: nowrap;

    transition:
        background-color var(--btn-speed) ease,
        color var(--btn-speed) ease,
        border-color var(--btn-speed) ease,
        box-shadow var(--btn-speed) ease,
        transform 80ms ease;
}


a.btn::after,
button.btn::after {
    content: "";
    width: .6em;
    height: .6em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(0) rotate(-45deg);
    transition: transform var(--btn-speed) cubic-bezier(.2, .8, .2, 1);
    display: inline-block;
    margin-left: .35em;
    translate: 0 1px;

}


a.btn:hover,
button.btn:hover {
    background: #fff;
    color: var(--btn-blue);
    border-color: var(--btn-blue);
}

a.btn:hover::after,
button.btn:hover::after {
    transform: translateX(6px) rotate(-45deg);
}


a.btn:focus-visible,
button.btn:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--btn-blue), white 70%);
    outline-offset: 2px;
}


a.btn:active,
button.btn:active {
    transform: translateY(1px);
}


.section .container>.btn {
    width: clamp(320px, 20vw, 600px);
    margin: 1.25rem auto 0;
    box-sizing: border-box;
}

/* 濃い背景の際のスタイル */
.news a.btn,
.news button.btn,
.customer a.btn,
.customer button.btn,
.processing a.btn,
.processing button.btn {
    border-color: #fff;
    background: #fff;
    color: var(--btn-blue);
}

.news a.btn:hover,
.news button.btn:hover,
.customer a.btn:hover,
.customer button.btn:hover,
.processing a.btn:hover,
.processing button.btn:hover {
    background: var(--btn-blue);
    color: #fff;
    border-color: var(--btn-blue);
}

.news a.btn:focus-visible,
.news button.btn:focus-visible,
.customer a.btn:focus-visible,
.customer button.btn:focus-visible,
.processing a.btn:focus-visible,
.processing button.btn:focus-visible {
    outline: 3px solid color-mix(in oklab, #fff, var(--btn-blue) 30%);
    outline-offset: 2px;
}





.solutions {
    position: relative;
}







* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clear {
    clear: both;
}

.mt-0 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mt-4 {
    margin-top: 4rem;
}

.mt-5 {
    margin-top: 5rem;
}

.mt-6 {
    margin-top: 6rem;
}

.mt-7 {
    margin-top: 7rem;
}

.mt-8 {
    margin-top: 8rem;
}

.mt-9 {
    margin-top: 9rem;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.mb-4 {
    margin-bottom: 4rem;
}

.mb-5 {
    margin-bottom: 5rem;
}

.mb-6 {
    margin-bottom: 6rem;
}

.mb-7 {
    margin-bottom: 7rem;
}

.mb-8 {
    margin-bottom: 8rem;
}

.mb-9 {
    margin-bottom: 9rem;
}

.mb-10 {
    margin-bottom: 10rem;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

/* iOSのSafariでの余白対策 */
body {
    -webkit-text-size-adjust: 100%;
    position: relative;
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Yu Gothic', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    max-width: 100%;
}

.sp {
    display: none;
}

.pc {
    display: block;
}

.ctr {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.lft {
    text-align: left;
}

.rit {
    text-align: right;
}

strong {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    display: inline-block;
}

.txt-s {
    font-size: 0.825rem;
}

/* Heading Styles */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #333399;
}

.bg .section__title,
.bg .section__subtitle,
.bg h2 {
    color: #fff;
}

.bg h2 {
    font-weight: 700 !important;
}

h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
}

h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.875rem;
}

h5 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

h6 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.625rem;
}

ul,
ol {
    list-style-type: none;
}


p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    color: #333;
}

.fin p {
    color: #fff;
}

p.lead {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #333;
}

.small {
    font-size: 0.9rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Block */
.header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    padding: 0 40px 20px 0;
}

.header__content {
    /*max-width: 1200px;*/
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.vsc-controller {
    display: none !important;
}

.header__logo {
    background: white;
    border-radius: 0 0 25px 0;
    padding: 15px 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333399;
}

.header__logo img {
    width: 240px;
    padding: 0;
}

.header__nav-container {
    background: white;
    border-radius: 25px;
    padding: 15px 50px;
    margin-top: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
}

.header__nav {
    display: flex;
    list-style: none;
    gap: 25px;
    margin: 0;
}

.header__nav-link {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s;
    white-space: nowrap;
    position: relative;
    padding-bottom: 4px;
}

.header__nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #333399;
    transition: width 0.3s ease, left 0.3s ease;
}

.header__nav-link:hover {
    color: #333399;
}

.header__nav-link:hover::after {
    width: 100%;
    left: 0;
}

/*
.header__nav-link {
    text-decoration: none;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s;
    white-space: nowrap;
}

.header__nav-link:hover {
    color: #333399;
}
*/
/* Hamburger Menu Button */
.header__hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
    background: none;
    border: none;
    padding: 8px;
    position: relative;
    z-index: 1001;
}

.header__hamburger-line {
    width: 25px;
    height: 3px;
    background-color: #666;
    transition: all 0.3s ease;
    transform-origin: center;
}

.header__hamburger.header__hamburger--active .header__hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.header__hamburger.header__hamburger--active .header__hamburger-line:nth-child(2) {
    opacity: 0;
}

.header__hamburger.header__hamburger--active .header__hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}


/* Mobile Menu - モダンデザイン */
.header__mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
}

.header__mobile-menu.header__mobile-menu--active {
    display: flex;
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

.header__mobile-menu-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    width: 85%;
    max-width: 320px;
    height: 100%;
    padding: 80px 0 30px;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.header__mobile-menu.header__mobile-menu--active .header__mobile-menu-content {
    transform: translateX(0);
}

.header__mobile-nav {
    list-style: none;
    padding: 0 30px;
    margin: 0;
}

.header__mobile-nav-item {
    margin-bottom: 0;
    opacity: 0;
    transform: translateX(-20px);
    animation: slideIn 0.3s ease forwards;
}

.header__mobile-menu--active .header__mobile-nav-item:nth-child(1) {
    animation-delay: 0.1s;
}

.header__mobile-menu--active .header__mobile-nav-item:nth-child(2) {
    animation-delay: 0.15s;
}

.header__mobile-menu--active .header__mobile-nav-item:nth-child(3) {
    animation-delay: 0.2s;
}

.header__mobile-menu--active .header__mobile-nav-item:nth-child(4) {
    animation-delay: 0.25s;
}

.header__mobile-menu--active .header__mobile-nav-item:nth-child(5) {
    animation-delay: 0.3s;
}

.header__mobile-menu--active .header__mobile-nav-item:nth-child(6) {
    animation-delay: 0.35s;
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* モバイルナビゲーションリンクのホバーエフェクト */
.header__mobile-nav-link {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
    padding: 15px 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

.header__mobile-nav-link::after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: 12px;
    width: 0;
    height: 3px;
    background: #333399;
    transition: width 0.3s ease;
}

.header__mobile-nav-link:hover::after,
.header__mobile-nav-link:active::after {
    width: calc(100% - 40px);
}

.header__mobile-nav-link:hover,
.header__mobile-nav-link:active {
    color: #333399;
}

/* モバイルナビアイテムのレイアウト調整 */
.header__mobile-nav-item {
    margin-bottom: 0;
    opacity: 0;
    transform: translateX(-20px);
    animation: slideIn 0.3s ease forwards;
}


.header__mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(51, 51, 153, 0.1);
    border: none;
    font-size: 24px;
    color: #333399;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    font-weight: 300;
}

.header__mobile-menu-close:hover {
    background: #333399;
    color: white;
    transform: rotate(90deg);
}

.header__mobile-menu-close:active {
    transform: rotate(90deg) scale(0.95);
}

/* ハンバーガーアイコンの改善 */
.header__hamburger {
    position: relative;
}

.header__hamburger-line {
    width: 25px;
    height: 2px;
    background-color: #333;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
}

.header__hamburger.header__hamburger--active .header__hamburger-line:nth-child(1) {
    transform: rotate(25deg) translate(4px, 4px);
}

.header__hamburger.header__hamburger--active .header__hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.header__hamburger.header__hamburger--active .header__hamburger-line:nth-child(3) {
    transform: rotate(-25deg) translate(4px, -4px);
}



/* Hero Block */
.hero {
    position: relative;
    height: 900px;
    /* Default height for ultra-wide screens (1921px+) */
    overflow: hidden;
    border-bottom-right-radius: 50px;
    box-shadow: 0px 36px 0 rgba(124, 177, 255, 1);
    margin-bottom: 36px;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__content {
    text-align: center;
    color: white;
    z-index: 2;
}

.hero__title {
    font-size: 3.5rem;
    color: white;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero__subtitle {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 30px;
}

/* Section Block */
.d-laser .vertical-col.section {
    padding: 120px 0 !important;
}

.section {
    padding: 120px 20px;
    position: relative;
    width: 100%;
}

.section__title {
    text-align: center;
    margin-bottom: 20px;
    color: #333399;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.home .section__subtitle {
    margin: 50px 0 80px !important;
}

.section__subtitle {
    text-align: center;
    margin: 20px 0 40px;
    color: #333;
}

.qualifications h3.section__title {
    font-weight: 700;
    text-align: left;
    color: #fff;
    line-height: 2;
    border-bottom: 1px solid #fff;
    padding-bottom: 24px;
    display: block;
    width: 100%;
}

.qualifications .section__title,
.news .section__title,
.home .processing .section__title,
.customer .section__title {
    font-weight: 700;
    color: #fff;
}

.section.bg .section__header p,
.qualifications .section__subtitle,
.news .section__subtitle,
.home .processing .section__subtitle,
.processing .equipment p,
.home .processing .section__bottom-text,
.home .customer .customer__innovation-text,
.customer .section__subtitle {
    color: #fff;
}


.processing .equipment .section__card-image {
    padding: 20px;
    background: linear-gradient(135deg, rgba(4, 56, 178, 0.8) 0%, rgba(19, 83, 151, 0.8) 100%);
}

.key .section__card-image img,
.processing .equipment .section__card-image img {
    width: 100%;
    max-width: 180px;
    max-height: 140px;
    object-fit: contain;
}

.section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.section__grid a {
    text-decoration: none;
}

.section__card {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    padding: 30px 15px 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.section__card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.section__card-title {
    font-size: 1.675rem;
    margin-bottom: 15px;
    color: #333399;
}

.section__card-description {
    padding: 0 10px;
    margin-bottom: 20px;
    color: #333;
    line-height: 1.8;
}

.processing .dx .section__card-description {
    margin-top: 20px;
    color: #333;
}

.processing .dx h3 {
    color: #fff;
    font-weight: 600;
}

.processing .dx p {
    color: #fff;
}

.key .section__card-description,
.processing .section__card-description,
.home .dx .section__card-description {
    text-align: left;
}

.section__features {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.section__feature {
    text-align: center;
}

.section__feature-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0070CC;
}

.section__card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.section__card-image img {
    width: 100%;
}

.pdt-record .section__card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.wide-range-app .section__card-image {
    background: linear-gradient(135deg, rgb(5 64 198 / 80%) 0%, rgb(25 92 165 / 80%) 100%);
    padding: 30px;
}

.wide-range-app .section__card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}



@media (max-width: 767px) {
    .processing .pdt-record .section__grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .processing .pdt-record .section__card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        width: 100%;
        background: #1e3a8a;
        padding: 10px 20px;

    }

    .processing .pdt-record .section__card-image {
        order: 1;
        flex: 0 0 15%;
        max-width: 15%;
        height: auto;
        background: none;
    }

    .processing .pdt-record .section__card-image img {
        width: 100%;
        max-height: 50px;
        height: auto;
        object-fit: contain;
        display: block;
    }

    .processing .pdt-record .section__card-title {
        order: 2;
        flex: 1;
        margin: 0;
        line-height: 1.4;
        color: #fff;
        font-size: 1.325rem;
        text-align: left;
    }

    .processing .pdt-record p {
        color: #fff;
    }

    .processing .pdt-record .section__grid {
        display: grid;
    }

    .dx .section__grid,
    .processing .section__grid {
        /* display: grid; */
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
    }

    .dx .section__card,
    .processing .section__card {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }

    .solutions .section__card-image,
    .dx .section__card-image,
    .processing .section__card-image {
        grid-area: image;
        height: 200px;
        margin: 0;
        border-radius: 5px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.6);
    }

    .solutions .section__card-image img,
    .dx .section__card-image img,
    .processing .section__card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
}




.use-cases.vertical-col .section__grid,
.processing .vertical-col .section__grid {
    grid-template-columns: 1fr 1fr;
}

.use-cases.vertical-col .section__card {
    min-width: 100%;
    grid-template-columns: 1fr;
}

.use-cases.vertical-col .section__card-description {
    padding: 0;
}

.processing .vertical-col .section__card {
    min-width: 100%;
    grid-template-columns: minmax(0, 1fr) 180px;
}

.processing .vertical-col .section__card-image {
    height: 180px;
}

.vertical-col,
.joinus {
    position: relative;
}

/* 縦3カラム */
.vertical-col .section__grid,
.joinus .section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.vertical-col .section__card,
.joinus .section__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto auto;
    grid-template-areas:
        "title image"
        "desc  image";
    column-gap: 20px;
    row-gap: 12px;
    align-items: center;
    background: rgba(226, 226, 227, 0.8);
    border-radius: 5px;
    padding: 15px 15px 15px 30px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    min-width: 800px;
}

.vertical-col .section__card-title,
.joinus .section__card-title {
    grid-area: title;
    margin: 0;
    text-align: left;
}

.vertical-col .section__card-description,
.joinus .section__card-description {
    grid-area: desc;
    margin: 0;
    line-height: 1.8;
    opacity: 0.9;
    color: #000;
    text-align: left;
}

.vertical-col .section__card-image,
.joinus .section__card-image {
    grid-area: image;
    height: 200px;
    margin: 0;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
}

.vertical-col .section__card-image img,
.joinus .section__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

/* スマートフォン最適化 */
@media (max-width: 767px) {

    .sp {
        display: block;
    }

    .pc {
        display: none;
    }


    .section {
        padding: 60px 20px;
    }

    .use-cases.vertical-col .section__grid {
        grid-template-columns: 1fr;
    }

    .processing #equipment.vertical-col .section__card {
        grid-template-columns: 1fr;
    }

    .vertical-col .section__card,
    .joinus .section__card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "image"
            "desc";
        padding: 20px 15px;
        gap: 15px;
        margin: 0;
        min-width: auto;
    }

    .vertical-col .section__card-title,
    .joinus .section__card-title {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .vertical-col .section__card-description,
    .joinus .section__card-description {
        font-size: 0.9rem;
        line-height: 1.7;
        margin-bottom: 15px;
    }

    .vertical-col .section__card-image,
    .joinus .section__card-image {
        height: 200px;
        width: 100%;
    }
}

/* より小さい画面用の追加最適化 */
@media (max-width: 480px) {

    .vertical-col .section__grid,
    .joinus .section__grid {
        gap: 20px;
        padding: 0;
        width: 100%;
    }

    .vertical-col .joinus .section__card,
    .joinus .section__card {
        padding: 15px;
        width: 100%;
    }

    .vertical-col .section__card-title,
    .joinus .section__card-title {
        font-size: 1.3rem;
    }

    .vertical-col .section__card-description,
    .joinus .section__card-description {
        font-size: 0.85rem;
    }

    .vertical-col .section__card-image,
    .joinus .section__card-image {
        height: 180px;
    }
}



/* Processing Block */


/*.processing,.customer,*/
.bg {
    background: linear-gradient(135deg, rgb(5 64 198 / 80%) 0%, rgb(25 92 165 / 80%) 100%);
    background-blend-mode: multiply;
    color: white;
    position: relative;
    overflow: hidden;
}

.white {
    color: white;
}

.dx {
    position: relative;
}



.processing h2,
.dx h2,
.joinus h2,
.processing h3,
.dx h3,
.joinus h3,
.section__intro-description,
.dx__intro-description,
.joinus__intro-description {
    color: #303996;
}

.processing h3.section__intro-highlight,
.customer h3.section__intro-highlight {
    font-weight: 700;
    color: #fff;
}

.processing .section__intro-description,
.customer .section__intro-description {
    color: #fff;
}

.section__header,
.dx__header,
.joinus__header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}


.dx__title,
.joinus__title {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #333399;
}



.section__intro {
    display: grid;
    grid-template-columns: 3.5fr 6.5fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 40px;
    color: #fff;
}









/* Gear Icon Component */
.gear {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #ffc107;
    border-radius: 50%;
    opacity: 0.3;
}

.gear--position-1 {
    top: 100px;
    left: 50px;
    animation: rotate 20s linear infinite;
}

/*
.gear--position-2 {
    bottom: 150px;
    right: 100px;
    animation: rotate 15s linear infinite reverse;
}*/

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Customer Solutions Block */

.customer__header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.customer__consultation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}


.customer__title {
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-weight: bold;
    color: white;
}

.customer__subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
}

.customer__problems {
    padding: 40px 0;
    position: relative;

}

.customer__problems-title {
    text-align: center;
    font-size: 2.5rem;
    color: #f9d979;
    font-weight: 700;
    margin-left: 350px;
}

.customer__problems-list {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    height: 240px;
}

.customer__problem-item {
    position: absolute;
    color: white;
    font-size: 2rem;
    font-weight: 500;
    white-space: nowrap;
    /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);*/
}

.customer__problem-item:nth-child(1) {
    top: 0;
    right: 30%;
}

.customer__problem-item:nth-child(2) {
    top: 25%;
    right: 35%;
}

.customer__problem-item:nth-child(3) {
    top: 50%;
    right: 40%;
}

.customer__problem-item:nth-child(4) {
    top: 75%;
    right: 45%;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    .customer__problems-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }

    .customer__problem-item {
        font-size: 1.4rem;
        line-height: 2;
        white-space: normal;
        position: relative;
    }

    .customer__problem-item:nth-child(1),
    .customer__problem-item:nth-child(2),
    .customer__problem-item:nth-child(3),
    .customer__problem-item:nth-child(4) {
        position: relative;
        top: auto;
        right: auto;
    }

    .section__intro {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: start;
        margin-bottom: 40px;
        color: #fff;
    }
}

.customer__innovation {
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.customer__innovation-title {
    font-size: 2.2rem;
    color: #f9d979;
    margin-bottom: 30px;
    font-weight: 700;
}

.customer__innovation-text {
    font-size: 1rem;
    line-height: 1.8;
    opacity: 0.9;
}

.customer__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.customer__btn {
    background: white;
    color: #303996;
    padding: 15px 40px;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);*/
}

.customer__btn:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.customer__robot-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.customer__robot-decoration {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, #6c757d, #495057);
    border-radius: 10px;
    position: relative;
}

.customer__robot-decoration::after {
    content: "🤁E;
 position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
}

.customer__speech-bubble {
    background: white;
    color: #333;
    padding: 15px 20px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.customer__speech-bubble::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid white;
    transform: translateY(-50%);
}

.customer__speech-bubble-text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: bold;
}

/* Statistics Block */
.statistics {
    position: relative;
}

.statistics__machine {
    position: relative;
    width: 120px;
    height: 100px;
    flex-shrink: 0;
}

.statistics__machine-base {
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 80px;
    height: 20px;
    background: #6c757d;
    border-radius: 5px;
}

.statistics__machine-body {
    position: absolute;
    bottom: 20px;
    left: 30px;
    width: 60px;
    height: 50px;
    background: linear-gradient(135deg, #495057, #6c757d);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.statistics__machine-body::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 15px;
    width: 30px;
    height: 20px;
    background: #333399;
    border-radius: 3px;
}

.statistics__machine-head {
    position: absolute;
    top: 0;
    left: 45px;
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, #333399, #1a1a66);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.statistics__machine-head::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 12px;
    width: 6px;
    height: 15px;
    background: #28a745;
    border-radius: 3px;
}

.statistics__person {
    position: relative;
    width: 80px;
    height: 100px;
    flex-shrink: 0;
}

.statistics__person-head {
    position: absolute;
    top: 0;
    left: 25px;
    width: 30px;
    height: 30px;
    background: #fdbcb4;
    border-radius: 50%;
}

.statistics__person-body {
    position: absolute;
    top: 30px;
    left: 15px;
    width: 50px;
    height: 70px;
    background: linear-gradient(135deg, #333399, #1a1a66);
    border-radius: 15px 15px 5px 5px;
}

.statistics__person-body::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -10px;
    width: 20px;
    height: 30px;
    background: #333399;
    border-radius: 10px;
}

.statistics__person-body::after {
    content: "";
    position: absolute;
    top: 15px;
    right: -10px;
    width: 20px;
    height: 30px;
    background: #333399;
    border-radius: 10px;
}

.statistics__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.statistics__card {
    background: transparent;
    /* 元の背景を削除 */
    border-radius: 50%;
    width: 160px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: none;
    /* シャドウは疑似要素に移動 */
    transition: all 0.3s ease;
    position: relative;
    animation: fadeInUp 0.6s ease forwards;
    z-index: 1;
    /* テキストを前面に */
}

/* 円形背景を疑似要素で作成 */
.statistics__card::before {
    content: '';
    position: absolute;
    top: 30px;
    /* 30px下に配置 */
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(215, 215, 215, 0.9);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: -1;
    /* テキストの背後に配置 */
}

.statistics__card:hover::before {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.statistics__card:hover {
    transform: none;
    /* ホバー時は疑似要素のみ動かす */
}

.statistics__card:nth-child(1) {
    animation-delay: 0.1s;
}

.statistics__card:nth-child(2) {
    animation-delay: 0.2s;
}

.statistics__card:nth-child(3) {
    animation-delay: 0.3s;
}

.statistics__card:nth-child(4) {
    animation-delay: 0.4s;
}

.statistics__card:nth-child(5) {
    animation-delay: 0.5s;
}

.statistics__number {
    font-size: 3.6rem;
    font-weight: 900;
    color: #333399;
    line-height: 1;
    margin-bottom: 0;
    transition: all 0.3s ease;
}

.statistics__unit {
    font-size: 2rem;
    font-weight: 900;
    color: #333399;
    line-height: 1.2;
}

.statistics__label {
    font-size: 1.4rem;
    color: #333;
    font-weight: 700;
    margin-top: 10px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* タブレット・スマホでのグリッドレイアウト改善 */
.section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
    justify-items: center;
    /* カードを中央揃え */
}

/* タブレット用(769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .section__grid {
        grid-template-columns: repeat(2, minmax(320px, 400px));
        justify-content: center;
        gap: 25px;
    }

    .section__card {
        max-width: 400px;
        width: 100%;
    }
}


@media (max-width: 767px) {
    .section__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        padding: 0 10px;
    }

    .section__card {
        max-width: 450px;
        width: 100%;
    }
}



/* Statistics セクション専用の調整 */
@media (max-width: 1024px) and (min-width: 769px) {

    .statistics .statistics__grid {
        grid-template-columns: repeat(3, 160px);
        justify-content: center;
        gap: 25px;
    }

    .statistics__card::before {
        top: 10px;
    }
}

@media (max-width: 767px) {
    .statistics .statistics__grid {
        grid-template-columns: repeat(2, 140px);
        justify-content: center;
        gap: 20px;
    }

    .statistics__card::before {
        top: 10px;
    }

    .statistics .statistics__grid>.statistics__card:nth-child(5) {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

/* News セクション専用の調整 */
@media (max-width: 1024px) and (min-width: 769px) {
    .news__grid {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .news__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 15px;
    }

    .news__card {
        max-width: 450px;
        width: 100%;
    }
}

/* Qualifications Block */
.qualifications {
    background: linear-gradient(135deg, rgb(5 64 198 / 80%) 0%, rgb(25 92 165 / 80%) 100%);
    position: relative;
}

.qualifications-01 {
    color: white;
    position: relative;
}

.qualifications-02.section,
.qualifications-03.section,
.qualifications-04.section {
    color: white;
    position: relative;
    padding-top: 0;
}

.qualifications__header {
    text-align: center;
    margin-bottom: 60px;
}

.qualifications__title {
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: white;
}

.qualifications__subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
}

.qualifications__content {
    max-width: 1200px;
    margin: 0 auto;
}

.qualifications__category {
    margin-bottom: 80px;
    position: relative;
}

.qualifications__category-title {
    font-size: 1.8rem;
    color: #ffc107;
    margin-bottom: 30px;
    font-weight: bold;
    text-align: left;
    border-bottom: 2px solid rgba(255, 193, 7, 0.3);
    padding-bottom: 10px;
}

.qualifications__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.qualifications__item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.qualifications__item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.qualifications__number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #ffc107;
    line-height: 1;
    margin-bottom: 5px;
}

.qualifications__unit {
    font-size: 1rem;
    color: white;
    margin-bottom: 10px;
}

.qualifications__label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
}

.qualifications__image,
.qualifications__images {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

.qualifications__image-placeholder {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qualifications__summary {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 60px;
    padding: 40px 20px;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.qualifications__summary-item {
    text-align: center;
}

.qualifications__summary-number {
    font-size: 3.5rem;
    font-weight: bold;
    color: #ffc107;
    line-height: 1;
    margin-bottom: 10px;
}

.qualifications__summary-unit {
    font-size: 2rem;
    color: #ffc107;
    font-weight: bold;
    display: inline;
    margin-left: 5px;
}

.qualifications__summary-label {
    font-size: 1rem;
    color: white;
    font-weight: 500;
}

/* News Block */
.news {
    background: linear-gradient(135deg, rgb(5 64 198 / 80%) 0%, rgb(25 92 165 / 80%) 100%);
    color: white;
    position: relative;

}

.news__filter {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.news__filter-btn {
    background: #333399;
    color: white;
    border: none;
    /*border: 1px solid #303996;*/
    padding: 8px 20px;
    border-radius: 7px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.news__filter-btn:hover,
.news__filter-btn--active {
    background: rgba(255, 255, 255, 0.9);
    color: #333399;
    font-weight: 500;
}

.news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 5rem;
    position: relative;
    z-index: 2;
}

.news__card {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    border-radius: 5px;
    padding: 20px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.news__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.news__card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.news__date {
    font-size: 0.85rem;
    color: #333399;
    font-weight: 900;
}

.news__category {
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
}

.news__category--notice {
    background: #333399;
}

.news__category--news {
    background: #28a745;
}

.news__category--column {
    background: #fd7e14;
}

.news__card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333399;
    margin-bottom: 12px;
    line-height: 1.4;
}

.news__card-content {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Footer Block */
.footer {
    background: #2c2c2c;
    color: white;
    padding: 60px 20px 20px;
}

.footer__content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    margin-bottom: 40px;
}

.footer__company {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer__logo-icon {
    width: 60%;
    height: auto;
    background: url("logo-white.svg") no-repeat center/contain;
    position: relative;
}


.footer__logo-text {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.3;
}

.footer__contact p,
.footer__contact {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #cccccc;
}

.footer__contact p {
    margin-bottom: 8px;
}

.footer__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.footer__nav-column-title a {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: white;
    font-weight: bold;
    transition: color 0.3s ease;
}

.footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__nav-item {
    margin-bottom: 12px;
}

.footer__nav-link {
    color: #cccccc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer__nav-column-title a:hover,
.footer__nav-link:hover {
    color: #4a7bc8;
}

.footer__bottom {
    padding-top: 20px;
    text-align: center;
}

.footer__bottom-text {
    font-size: 0.85rem;
    color: #999;
    margin: 0;
}

/* Hero responsive styles */
@media (max-width: 1920px) {

    .development .hero,
    .processing .hero,
    .home .hero {
        height: 700px;
        /* Standard desktop screens (1201-1920px) */
    }

    .hero {
        height: 450px;
    }
}

@media (max-width: 1200px) {

    .development .hero,
    .processing .hero,
    .home .hero {
        height: 500px;
        /* Medium screens (769-1200px) */
    }

    .hero {
        height: 300px;
    }
}

@media (max-width: 767px) {

    .development .hero,
    .processing .hero,
    .home .hero {
        height: 400px;
        box-shadow: 0px 24px 0 rgba(124, 177, 255, 1);
        margin-bottom: 36px;
    }

    .hero {
        height: 300px;
    }
}

/* Responsive Styles */
@media (max-width: 1200px) {

    /* Heading responsive styles for tablets */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.375rem;
    }

    h5 {
        font-size: 1.125rem;
    }

    h6 {
        font-size: 0.95rem;
    }
}







/* Hide slider dots on desktop */
.section__dots {
    display: none;
}












/* 共通のアニメーションスタイル */
[class^="illust__"] {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    transition-delay: 1.5s;
}

[class^="illust__"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[class^="illust__"] img {
    display: block;
    /* max-width: 100%;*/
    height: auto;
}




.illust__01 {
    position: absolute;
    top: 10px;
    right: 50%;
    margin-right: 490px;
}

.illust__02 {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: 480px;
}

.illust__03 {
    position: absolute;
    bottom: -30px;
    right: 50%;
    margin-right: 400px;
    z-index: 999;

}

.illust__04-1 {
    position: absolute;
    top: 80px;
    left: 50%;
    margin-left: 340px;
}

.illust__04-2 {
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: 540px;
}

.solutions {
    position: relative;
}

.illust__05 {
    position: absolute;
    bottom: -30px;
    right: 50%;
    margin-right: 430px;
    z-index: 999;
}

.illust__06 {
    position: absolute;
    top: 70px;
    left: 50%;
    margin-left: 450px;
}

.illust__05 img,
.illust__06 img {
    display: block;
    max-width: 100%;
    height: auto;
}

.illust__07 {
    position: absolute;
    top: 100px;
    right: 50%;
    margin-right: 500px;

}

.illust__08 {
    position: absolute;
    bottom: 60px;
    left: 50%;
    margin-left: 280px;
}

.illust__09 {
    position: absolute;
    top: 60px;
    right: 50%;
    margin-right: 330px;

}

.illust__10 {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: 480px;
}

.illust__11 {
    position: absolute;
    top: -30px;
    right: 50%;
    margin-right: 530px;

}

.illust__12 {
    position: absolute;
    top: -120px;
    left: 50%;
    margin-left: 530px;
}

.illust__13 {
    position: absolute;
    top: 180px;
    left: 50%;
    margin-left: 450px;

}

.illust__14 {
    position: absolute;
    top: -60px;
    left: 50%;
    margin-left: 530px;
}

.illust__15 {
    position: absolute;
    bottom: 250px;
    right: 50%;
    margin-right: 530px;

}

.illust__16 {
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: 450px;
}

.illust__17 {
    position: absolute;
    bottom: -110px;
    left: 50%;
    margin-left: -90px;
    z-index: 999;
}

.illust__15 img,
.illust__17 img {
    transform: scaleX(-1);
}







/* ポイント要素のスタイル */
[class^="points-"] {
    position: absolute;
    font-size: 0;
    color: rgba(124, 177, 255, 1);
    opacity: 0.7;
    pointer-events: none;
}

.solutions .points-01 {
    top: -25px;
    right: 50%;
    margin-right: 125px;
}

.solutions .points-02 {
    top: 195px;
    right: 50%;
    margin-right: 560px;
}

.solutions .points-03 {
    top: 195px;
    left: 50%;
    margin-left: 620px;
}

.solutions .points-04 {
    bottom: 140px;
    right: 50%;
    margin-right: 620px;
}

.processing .points-05 {
    top: 195px;
    right: 50%;
    margin-right: 150px;
}

.processing .points-06 {
    top: 195px;
    left: 50%;
    margin-left: 420px;
}

.processing .points-07 {
    bottom: 620px;
    right: 50%;
    margin-right: 700px;
}

.processing .points-08 {
    bottom: 280px;
    right: 50%;
    margin-right: 120px;
}

.dx .points-09 {
    top: 195px;
    right: 50%;
    margin-right: 990px;
}

.dx .points-10 {
    top: 195px;
    left: 50%;
    margin-left: 400px;
}

.dx .points-11 {
    top: 620px;
    right: 50%;
    margin-right: 330px;
}

.dx .points-12 {
    bottom: 400px;
    left: 50%;
    margin-left: 400px;
}

.customer .points-13 {
    top: 195px;
    right: 50%;
    margin-right: 580px;
}

.customer .points-14 {
    top: 195px;
    left: 50%;
    margin-left: 415px;
}

.customer .points-15 {
    bottom: 360px;
    right: 50%;
    margin-right: 560px;
}

.customer .points-16 {
    bottom: 30px;
    left: 50%;
    margin-left: 0px;
}

.customer .points-17 {
    bottom: 320px;
    left: 50%;
    margin-left: 550px;
}

.customer .points-18 {
    bottom: 90px;
    left: 50%;
    margin-left: 920px;
}

.statistics .points-19 {
    top: 195px;
    left: 50%;
    margin-left: 420px;
}

.statistics .points-20 {
    top: 195px;
    right: 50%;
    margin-right: 420px;
}

.statistics .points-21 {
    bottom: 120px;
    right: 50%;
    margin-right: 800px;
}

.qualifications-01 .points-22 {
    top: 195px;
    right: 50%;
    margin-right: 420px;
}

.qualifications-01 .points-23 {
    top: 195px;
    left: 50%;
    margin-left: 420px;
}

.qualifications-01 .points-24 {
    bottom: 700px;
    right: 50%;
    margin-right: 560px;
}

.qualifications-01 .points-25 {
    bottom: 320px;
    left: 50%;
    margin-left: 30px;
}

.qualifications-02 .points-26 {
    top: 120px;
    right: 50%;
    margin-right: 820px;
}

.qualifications-02 .points-27 {
    top: 280px;
    right: 50%;
    margin-right: 620px;
}

.qualifications-02 .points-28 {
    top: 280px;
    left: 50%;
    margin-left: 520px;
}

.qualifications-02 .points-29 {
    bottom: 260px;
    right: 50%;
    margin-right: 520px;
}

.qualifications-03 .points-30 {
    top: 70px;
    left: 50%;
    margin-left: 0px;
}

.qualifications-03 .points-31 {
    top: 400px;
    right: 50%;
    margin-right: 800px;
}

.qualifications-03 .points-32 {
    top: 400px;
    left: 50%;
    margin-left: 200px;
}

.qualifications-03 .points-33 {
    top: 260px;
    left: 50%;
    margin-left: 500px;
}

.qualifications-03 .points-34 {
    top: 400px;
    left: 50%;
    margin-left: 700px;
}

.qualifications-03 .points-35 {
    bottom: 0px;
    right: 50%;
    margin-right: 300px;
}

.qualifications-04 .points-36 {
    top: 400px;
    left: 50%;
    margin-left: 300px;
}

.qualifications-04 .points-37 {
    top: 860px;
    right: 50%;
    margin-right: 600px;
}

.qualifications-04 .points-38 {
    bottom: 0px;
    right: 50%;
    margin-right: 300px;
}

.qualifications-04 .points-39 {
    bottom: 100px;
    left: 50%;
    margin-left: 100px;
}

.joinus .points-40 {
    top: 195px;
    left: 50%;
    margin-left: 560px;
}

.joinus .points-41 {
    top: 195px;
    right: 50%;
    margin-right: 480px;
}

.joinus .points-42 {
    top: 400px;
    left: 50%;
    margin-left: 50px;
}

.joinus .points-43 {
    top: 630px;
    right: 50%;
    margin-right: 650px;
}

.joinus .points-44 {
    bottom: 500px;
    left: 50%;
    margin-left: 400px;
}

.joinus .points-45 {
    bottom: 150px;
    right: 50%;
    margin-right: 480px;
}

.news .points-46 {
    top: 210px;
    left: 50%;
    margin-left: 620px;
}

.news .points-47 {
    top: 500px;
    right: 50%;
    margin-right: 400px;
}

.news .points-48 {
    top: 700px;
    left: 50%;
    margin-left: 400px;
}

.news .points-49 {
    bottom: -30px;
    right: 50%;
    margin-right: 400px;
}



#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
}















/* Mobile responsive - スライド機能  */
@media (max-width: 767px) {
    .customer__problems-title {
        margin-left: 0;
    }

    .section__slider-container {
        position: relative;
        overflow: hidden;
        padding: 30px 0;
    }

    .section__grid {
        display: flex;
        transition: transform 0.5s ease;
        gap: 20px;
    }

    .section__card {
        min-width: 100%;
        flex-shrink: 0;
        margin: 0;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .section__card {
        width: calc(100%);
        margin: 0;
    }

    .section__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .section__dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: none;
        background: rgba(51, 51, 153, 0.3);
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .section__dot--active {
        background: #333399;
    }

}












@media (max-width: 767px) {


    h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    h2 {
        font-size: 1.75rem;
        margin-bottom: 0.875rem;
    }

    h3 {
        font-size: 1.65rem;
        margin-bottom: 0.75rem;
    }

    h4 {
        font-size: 1.25rem;
        margin-bottom: 0.625rem;
    }

    h5 {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }

    h6 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    p {
        font-size: 0.9rem;
        line-height: 1.7;
        margin-bottom: 0.875rem;
        text-align: left;
    }

    .header {
        padding: 15px 20px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
    }

    .header__content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        max-width: 100%;
        margin: 0;
    }

    .header__logo {
        background: transparent;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        display: flex;
        align-items: center;
    }

    .header__logo img {
        width: 160px;
        height: auto;
    }

    .header__nav-container {
        background: transparent;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .header__nav {
        display: none;
    }

    .header__hamburger {
        display: flex;
        flex-direction: column;
        gap: 3px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 5px;
    }

    .header__hamburger-line {
        height: 2px;
        background-color: #333;
        transition: all 0.3s ease;
    }

    .header__hamburger::after {
        content: "MENU";
        font-size: 9px;
        color: #333;
        font-weight: 500;
        letter-spacing: 0.5px;
        margin-top: 2px;
        text-align: center;
    }

    .hero {
        margin-top: 70px;
    }

    .hero__title {
        font-size: 2.5rem;
    }

    .section__title {
        font-size: 2rem;
        text-align: left;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .qualifications .section__title {
        font-size: 1.8rem;
    }

    .section__subtitle .char {
        line-height: 1.75;

    }

    .section__subtitle {
        text-align: left;
        align-items: flex-start;
        margin: 20px 0 20px;

    }

    .customer__title {
        font-size: 2rem;
    }

    .customer__problems-title {
        font-size: 1.6rem;
    }

    .customer__consultation {
        flex-direction: column;
        gap: 15px;
    }

    .customer__cta {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .customer__robot-right {
        justify-content: center;
    }

    .customer__innovation-title {
        font-size: 1.6rem;
    }

    .statistics__header {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .statistics__title {
        font-size: 2rem;
    }

    .statistics__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .statistics__card {
        width: 140px;
        height: 140px;
    }

    .statistics__number {
        font-size: 3.2rem;
    }

    .statistics__machine,
    .statistics__person {
        transform: scale(0.8);
    }

    .section .container>.btn {
        width: clamp(260px, 80vw, 520px);
    }

    .statistics .statistics__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 20px;
        /*justify-items: center;  */
    }

    .statistics .statistics__card {
        width: 140px;
        height: 140px;
    }

    .statistics .statistics__number {
        font-size: 3.6rem;
    }

    .statistics .statistics__grid>.statistics__card:last-child {
        grid-column: auto;
        justify-self: start;
    }

    .illust__04-1 {
        top: -10px;
        margin-left: -10px;
    }

    .illust__04-2 {
        top: 60px;
        margin-left: 130px;
    }

    .illust__07 {
        top: 30px;
        margin-right: -175px;
    }

    .illust__16 {
        top: 30px;
        margin-left: 60px;
    }

    .illust__17 {
        bottom: -80px;
        margin-left: -70px;
    }

    .illust__16 img {
        width: 160px;
    }

    .illust__15 img,
    .illust__17 img {
        max-width: 70%;
    }



    .footer__company {
        gap: 0;
    }

    .footer__content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer__nav {
        display: none;
    }

    .footer__logo {
        justify-content: center;
        text-align: center;
    }

    .footer__logo-icon {
        width: 70%;
    }

    .footer__contact {
        text-align: center;
        margin: 30px auto 0;
    }

    .footer__contact p {
        text-align: left;
        line-height: 1.5;
    }

    .qualifications__title {
        font-size: 2.2rem;
    }

    .qualifications__category-title {
        font-size: 1.5rem;
    }

    .qualifications__grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }

    .qualifications__item {
        padding: 15px;
    }

    .qualifications__number {
        font-size: 2rem;
    }

    .qualifications__images {
        flex-direction: column;
        gap: 15px;
    }

    .qualifications__image-placeholder {
        min-width: auto;
        padding: 30px 15px;
    }

    .qualifications__summary {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .qualifications__summary-number {
        font-size: 2.5rem;
    }

    .news__title {
        font-size: 2.2rem;
    }

    .news__filter {
        flex-wrap: wrap;
        gap: 10px;
    }

    .news__filter-btn {
        padding: 6px 15px;
        font-size: 0.8rem;
    }

    .news__grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .news__card {
        padding: 15px;
    }

    .news__card-title {
        font-size: 1rem;
    }

    .news__card-content {
        font-size: 0.85rem;
    }

    .news__bottom-message p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .statistics__grid {
        grid-template-columns: 1fr;
        /*max-width: 200px;*/
    }

    .statistics__card {
        width: 160px;
        height: 160px;
    }
}