@charset "UTF-8";
/* ----------------------------------------------------------------------
トップページ
---------------------------------------------------------------------- *//*# sourceMappingURL=index.css.map */
                                                                          * 



        body {
            font-family: 'Noto Sans JP', sans-serif;
            color: #333;
            overflow-x: hidden;
        }



        /* 回路図のような背景模様（SVG/CSSで再現） */
        .bg-pattern {
            background-image: radial-gradient(#e0e7ff 1px, transparent 1px);
            background-size: 40px 40px;
            position: relative;
        }
        .bg-pattern::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(90deg, transparent 39px, #e0e7ff 40px),
                        linear-gradient(0deg, transparent 39px, #e0e7ff 40px);
            background-size: 40px 40px;
            opacity: 0.3;
            z-index: -1;
        }

        /* グラデーションセクション */
        .works-gradient {
            background: linear-gradient(180deg, #0044cc 0%, #002266 100%);
            color: white;
        }

        .contact-gradient {
            background: linear-gradient(180deg, #002266 0%, #0044cc 100%);
            color: white;
        }

        /* 装飾的なライン */
        .section-title::after {
            content: "";
            display: inline-block;
            width: 100px;
            height: 2px;
            background: #facc15;
            margin-left: 1rem;
            vertical-align: middle;
        }

        /* プレースホルダーのスタイリング */
        .image-placeholder {
            background-color: #f3f4f6;
            border: 2px dashed #d1d5db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 0.875rem;
            position: relative;
            overflow: hidden;
        }

        .image-placeholder::after {
            content: "IMAGE";
        }

        /* フォームボタン */
        .btn-orange {
            background-color: #f1a139;
            transition: all 0.3s ease;
        }
        .btn-orange:hover {
            background-color: #e09028;
            transform: translateY(-2px);
        }

        .company-logo {
        font-weight: bold;        /* font-bold */
        font-size: 1.25rem;       /* text-xl (約20px) */
        color: #1e3a8a;           /* text-blue-900 */
         letter-spacing: 0.15rem;  /* tracking-wide */
        }


        /*ここから自分なりのCSS記述*/
/* 基本設定 */
.hero-section {
    background-image: url("images/top.webp");
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh; /* 画面の高さに応じて調整 */
    padding-top: 80px; /* pt-20相当 */

    background-size: cover;
    background-position: center;
    color: #ffffff;
}

.container {

    /* 画像のパス */
    background-size: cover;             /* 画面いっぱいに広げる */
    background-position: center;        /* 中央に配置 */
    background-attachment: fixed;       /* スクロールしても動かさない（お好みで） */
            position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem; /* px-6相当 */
    z-index: 10;
}

.hero-content {
    max-width: 42rem; /* max-w-2xl相当 */
}

/* タイトル部分 */
.hero-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 1rem;
    line-height: 1.5; /* 文字の大きさの1.5倍の行間に設定 */
}

/* PCサイズ (md:以上) */
@media (min-width: 768px) {
    .hero-title {
        font-size: 3rem; /* text-5xl */
    }
}

.text-accent {
    color: #facc15; /* text-yellow-400 */
    font-size:4rem;
}

.border-u {
    border-bottom: 5px solid #ffffff;
padding-bottom: -1rem; /* この数値を小さくする */
}
.text-litle{
    font-size:2.5rem;
}

/* 説明文 */
.hero-text {
    font-size: 1.125rem; /* text-lg */
    opacity: 0.9;
    line-height: 1.625; /* leading-relaxed */
    margin-bottom: 1rem;
}