/* 基本デザイン */
body {
    margin-top: 110px; /* ロゴ＋ナビゲーションバーの高さ分を確保01091004 */
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333;
}

/* ✅ ヘッダー */
header {
    background: rgba(0, 0, 0, 0.9); /* 背景を半透明に */
    padding: 15px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    position: fixed; /* ヘッダーを固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 画像の上に表示 */
    /* 右にずらすためのマージン */
    margin-left: -5px; /* 全体を右にずらすための左マージン0224 */
}

/* ✅ ヘッダーの中身 */
.header-container {
    width: 90%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* スマホ用のスタイル調整 */
    margin-left: 20px; /* 右にずらす */
}

/* ページタイトル */
.page-title {
    text-align: center;
    font-size: 2rem;
    margin: 20px 0;
    color: #004080;
}

/* イントロテキスト */
.intro-text {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* 会社概要セクション ビルに文字入れ0206*/
.header-background {
    position: relative; /* 親要素を基準に */
    background-image: url('images/banner33.jpg'); /* 画像のパス */
    background-size: cover;
    background-position: center;
    height: 60vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px; /* 会社概要との間にスペースを追加 */
}

.header-text {
    position: absolute;
    text-align: center;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 読みやすさアップ */
}
/* 会社概要セクション */
.company-info {
    background-color: #fff;
    color: #333; /* 文字色を黒っぽい色に変更 */
    padding: 40px; /* 余白を調整 */
    margin: 20px auto;
    min-height: 400px; /* 会社概要と高さを揃える */
    max-width: 800px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex: 1; /* 横並びに対応するため追加 */
}

.company-info h2 {
    border-bottom: 2px solid #FF8000; /* オレンジのライン */
    padding-bottom: 5px;
    margin-bottom: 20px;
    color: #004080;
}

.company-info ul {
    list-style-type: none;
    padding: 0;
}

.company-info li {
    font-size: 1.1rem;
    margin-bottom: 15px;
    position: relative;
    padding-left: 15px;
}

.company-info li span {
    font-weight: bold;
    color: #004080;
}

.company-info li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    background-color: #004080;
    border-radius: 50%;
}

/* リンクスタイル会社概要メールの色 */
.company-info a {
    color: #ff6600; /* オレンジ色 */
    text-decoration: none;
}

/* 横並び用のレイアウト */
.content-wrapper {
    display: flex; /* 横並び */
    justify-content: space-between; /* 左右に均等配置 */
    align-items: flex-start; /* 上端を揃える */
    gap: 30px; /* 会社概要とマップの間隔 */
}

/* Googleマップ */
.map {
    flex: 1; /* 会社概要と同じ割合で配置 */
    height: 595px; /* スマホでは高さを少し縮める */
    min-height: 350px; /* 会社概要と高さを揃える */
    max-width: 600px; /* 会社概要と同じ幅 */
    background-color: #f4f4f9;
    border-radius: 10px; /* 角丸を統一 */
    overflow: hidden; /* 角丸を適用 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    transform: translateY(17px); /* 20px下に移動 */
}

/* Googleマップのサイズ調整 */
.map iframe {
    display: block;
    width: 100%;
    height: 100%;
}

/* ===== ナビゲーションと背景画像の調整各ボタンの配置調整一番上 ===== */
/* 固定ヘッダーの背景（全ページ共通） */
.navbar {
    position: fixed;
    top: 70px;/* ナビゲーション位置をロゴの下に調整0109 */
    left: 0;
    width: 100%;
    background-color: #778899; /* ヘッダーの背景色 */
    padding: 10px 0; /* 固定ヘッダーの高さを統一 */
    z-index: 90; /* ビル背景画像より前面に表示 0109*/
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-left: 10px; /* 全体を右にずらすための左マージン0224 */
}
/* Homeの画像２枚のサイズを調整・固定0116 */
.banner {
    position: relative; /* 子要素を重ねて配置0116 */
    width: 100%; /* 横幅を全体に合わせる */
    height: 900px; /* 高さを固定 */
    overflow: hidden; /* はみ出した部分を非表示 */
    margin-top: 0; /* ナビゲーションバーとつなげる 0117*/
}

.banner-image {
    position: absolute; /* 親要素内で重ねて配置0116 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 親要素に合わせた高さ */
    object-fit: cover; /* 画像の比率を保ちながら調整 */
    opacity: 0; /* 初期状態は非表示 */
    filter: brightness(1); /* 初期状態では通常の明るさ0120 */
    transition: opacity 2s ease-in-out, filter 2s ease-in-out; /* フェードとフィルターのアニメーション 速度0120*/
    z-index: 0; /* 背景に配置0120 */
}


/* indexトップ画像の切り替えの明るさ0120 */
.banner-image.active {
    opacity: 1; /* active クラスがついた画像を表示 0116*/
    filter: brightness(1); /* 表示時は通常の明るさ0120 */
    z-index: 1; /* 前面に表示0120 */
}
.banner-image.fade-out {
    opacity: 0;
    filter: brightness(0.5); /* フェードアウト時に画像を暗くする */
    z-index: 0;
}

.banner-image.fade-in {
    opacity: 1;
    filter: brightness(1.1); /* フェードイン時に少し明るく見せる（調整可能） */
    z-index: 1;
}

/* CONTRKTロゴのと配置 */
/* ロゴのデザインと配置 */
/* ✅ ロゴ＋会社名 */
.logo-section {
    display: flex;
    align-items: center;
    margin-left: -50px; /* 🔥 左に移動 */
}

.logo-section img {
    height: 50px;
    width: auto;
    margin-right: 10px;
}

.company-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
}

/* ナビゲーションバーの位置調整0129 */
/* ✅ ナビゲーション */
.nav-bar {
    display: flex;
    gap: 20px;
}

.nav-bar a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.nav-bar a:hover {
    color: #ffcc00;
    text-decoration: underline;
}

/* ✅ バナー画像の修正 */
.banner {
    position: relative;
    width: 100%;
    height: 900px;
    overflow: hidden;
    margin-top: 80px; /* 🔥 ヘッダーの高さ分だけ余白を作る */
}

.banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    z-index: 0;
}

.banner-image.active {
    opacity: 1;
}
/* 採用情報 ContactPage */

/* 募集内容と待遇条件セクションのスタイル */
section {
    color: #333; /* 文字色を黒っぽい色に変更 */
    margin: 20px auto;
    padding: 50px;/* 調整20から0114 */
    max-width: 800px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

section h2 {
    color: #004080;
    border-bottom: 2px solid #004080;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* お問い合わせボタンのスタイル */
.contact-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #004080;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.contact-button:hover {
    background-color: #ff6600;
}

/* ✅ contactページの見出しをスタイリッシュに */
/* ✅ contactページの見出しを「画面いっぱい＆四角」に */
.contact-intro {
    margin-top: 170px; /* ヘッダーにかぶらないように */
    background: linear-gradient(135deg, #004080, #0073e6); /* 青系グラデーション */
    padding: 20px 0; /* 🔥 高さをスリムに */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 軽い影をつける */
    color: #fff; /* 文字色を白 */
    width: 100vw; /* 🔥 横幅を画面いっぱいに */
    max-width: 100%; /* 突き抜けるデザイン */
}

/* ✅ メイン見出し */
.contact-intro h1 {
    font-size: 2.5rem; /* 文字を少し小さめにしてバランス調整 */
    font-weight: bold; /* 太字 */
    margin-bottom: 5px; /* 間隔を少し狭く */
}

/* ✅ サブタイトル */
.contact-intro .sub-heading {
    font-size: 1.3rem; /* 少しコンパクトに */
    font-style: italic; /* 斜体でおしゃれに */
    opacity: 0.8; /* 少し薄めの色に */
}

.contact-image {
    text-align: right; /* 画像を右寄せ */
    margin-top: 20px; /* 上に余白を追加 */
}

.contact-image img {
    max-width: 70%; /* 画面サイズに応じて縮小 */
    height: auto; /* アスペクト比を維持 */
    border-radius: 0px; /* 角を少し丸くする */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 影をつけて見栄えを良くする */
}
.contact-content {
    display: flex; /* 横並びにする */
    align-items: center; /* 縦方向の中央揃え */
    justify-content: flex-start; /* 🔥 テキストが詰められすぎないように調整 */
    margin-top: 30px; /* 上に余白 */
    width: 100%; /* 🔥 コンテンツの幅を最大化 */
}


.contact-text {
    font-family: "Zen Kaku Gothic New", sans-serif; /* 🔥 ここを変更 */
    flex-grow: 1; /* 🔥 余ったスペースを全部使う */
    flex-shrink: 0; /* 🔥 縮小を防ぐ */
    font-size: 2.4em;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
    padding-left: 95px;
    margin-right: 50px; /* 右側に余白を追加 */
    white-space: nowrap;
    overflow: hidden;
}


    
/* 採用内容h2画像セクション */
/* 営業職セクションのスタイル */
.sales-position {
    margin: 40px auto;
    padding: 50px;/* 調整20から0114 */
    max-width: 800px;
    text-align: center;
    margin-top: 70px; /* もっと下にずらす */
}

.sales-position h2 {
    color: #004080;
    border-bottom: 2px solid #004080;
    padding-bottom: 5px;
    margin-bottom: 15px;

}

.sales-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin-top: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* 採用情報の下の文章0211 */
.catchphrase {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff; /* 🔥 白文字で見やすく */
    background-color: #004080; /* 🔥 濃い青でプロフェッショナル感UP */
    text-align: center;
    padding: 10px 20px; /* 🔥 文字の周りに余白 */
    border-radius: 8px; /* 🔥 角を少し丸くする */
    display: inline-block; /* 🔥 横幅を文字サイズに合わせる */
    margin-top: 10px;
    margin-bottom: 15px;
}

/* about代表者挨拶セクションのスタイル0113 */
/* 代表者挨拶サイズ調整0206 */
.representative-message {
    background-color: #2C3E50; /* 濃青（ダークネイビー）背景色 */
    color: #fff;/* 全体のテキストを白く */
    padding: 50px;
    margin: 50px auto; /* 上下中央揃え */
    width: 90%; /* 横幅を画面幅の90%に */
    max-width: 1200px; /* 最大横幅を指定 */
    border: 1px solid #FF8000;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center; /* 中央揃え */
}

/* 見出しのデザイン */
.representative-message h2 {
    color: #fff; /* 見出しを白に */
    font-size: 1.8rem; /* 見出しを大きく */
    font-weight: bold; /* 強調 */
    border-bottom: 2px solid #FF8000; /* オレンジのライン */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.bottom-line {
    border-bottom: 2px solid #FF8000; /* オレンジのライン */
    margin-top: 30px; /* 上部の余白を追加 */
    margin-bottom: 10px;
}

/* 代表者メッセージのレイアウト */
.message-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    max-width: 1000px;
    margin: 30px auto; /* 縦の間隔を追加 */
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.message-content img {
    width: 150px;
    height: auto;
    margin-right: 20px;
    border-radius: 50%; /* 丸くする（好みで） */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.message-content p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.8;
    flex: 1;/* テキストを左に */
}
/* 代表者の写真 */
.representative-photo {
    width: 150px; /* 写真の幅 */
    height: auto;
    margin-left: 20px; /* テキストとの間隔 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 立体感を出す */
}
/* 代表者挨拶の区切り線のデザイン */
.separator {
    width: 50px;
    height: 4px;
    background-color: #FF8000; /* オレンジのライン */
    margin: 20px auto; /* 中央揃え */
    border-radius: 2px; /* 角を少し丸くする */
}

/* 縁(円)つながりのスタイル0114 背景より全面配置0117 */
.circle-container {
    position: absolute; /* 親要素内で重ねて配置0117 */
    top: 50%; /* 上下中央揃え */
    left: 50%; /* 左右中央揃え */
    transform: translate(calc(-50% + 2.3cm), calc(-50% - 0.6cm)); /* 中心から右に2.5cm移動0117 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* 背景画像より前面 */
    width: 100%;
    height: 100%;
    pointer-events: none; /* 背景クリックを無効化0117 */
    
}

.circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent; /* 枠線を透明にする */
    animation: rotate 3s linear 1 forwards;/* 3秒で1週回る0114 */
    display: flex;/* スタイル0114 */
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap; /* テキストの改行を防ぐ0115 */
    padding: 10px; /* 必要に応じて調整0115 */
    font-size: 1.5rem; /* テキストサイズ調整 0115*/
}

@keyframes rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* 円内テキストサイズ 0114*/

.circle-text {
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(-10%, -50%); /* 水平方向の調整 */
    font-size: 4rem; /* 例としてフォントサイズを2.5remに設定 */
     /* ← 一旦赤にして見えるかチェック */
    text-align: left;
    line-height: 1.5; /* 行間 */
    pointer-events: none; /* 背景クリックを無効化 */
    z-index: 20; /* 他の要素より前面にする */
    white-space: nowrap; /* 改行を折り返さない無効化0120 */

    /* 虹色グラデーション */
    background: linear-gradient(90deg, 
        red, orange, yellow, green, cyan, blue, violet, red
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* アニメーション */
    animation: rainbow 8s linear infinite;
}


/* ゴールドの希望の光を追加 */
.circle-text {
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(-10%, -50%);
    font-size: 4.5rem;
    text-align: left;
    line-height: 1.5;
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;

    /* 🌈 虹色のグラデーション（現状維持） */
    background: linear-gradient(90deg, 
        red, orange, yellow, green, cyan, blue, violet, red
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 8s linear infinite;

    /* ✨ 文字をクッキリさせるために縁取りを追加 */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06); /* 白い細い枠を追加 */

    /* ✨ 一文字ごとにゴールドの光をつける */
    text-shadow: 
        0px 0px 10px rgba(255, 215, 0, 0.4),
        0px 0px 20px rgba(255, 215, 0, 0.3),
        0px 0px 30px rgba(255, 215, 0, 0.1);
}

/* ✨ 光がゆっくり明滅するアニメーション */
@keyframes glowing-text {
    0%, 100% {
        text-shadow: 
            0px 0px 10px rgba(255, 215, 0, 0.8),
            0px 0px 20px rgba(255, 215, 0, 0.5),
            0px 0px 30px rgba(255, 215, 0, 0.3);
    }
    50% {
        text-shadow: 
            0px 0px 15px rgba(255, 223, 80, 1),
            0px 0px 25px rgba(255, 223, 80, 0.7),
            0px 0px 35px rgba(255, 223, 80, 0.5);
    }
}

/* アニメーション適用 */
.circle-text {
    animation: rainbow 8s linear infinite, glowing-text 4s ease-in-out infinite;
}


/* キャッチフレーズの改行0120 */
.circle-text br + span {
    display: block;
    text-indent: 150px; /* 必要に応じて右寄せ0120 */
}
.circle.small {
    width: 250px;
    height: 250px;
    /* 背景画像会社ロゴを追加 0115*/
    background-image: url('images/rogo10.png'); /* 画像ファイルのパス */
    background-size: 190px auto; /* 画像の幅を150px、高さは自動調整 */
    background-repeat: no-repeat;
   
    background-color: transparent; /* 背景色を透明にする */

    /* 中心から右に1cm寄せる0115ロゴのずれ */
    background-position: calc(50% + 0.2cm) center;
    
}




@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);/* 完全に1周回る */
    }
}
/* indexメインの言葉と説明文0121 */
.tagline-container {
    margin-top: 40px; /* 上の要素との間隔を調整 */
    padding: 20px 10%;
    text-align: center;
    background-color: #004080; /* 必要に応じて背景色を調整 */
}

.tagline-title {
    font-size: 3.5rem; /* キャッチフレーズのサイズ */
    font-weight: bold;
    color: #ffffff; /* タイトルの色 */
    margin-bottom: 15px;
}

.tagline-description {
    font-size: 1.4rem;
    line-height: 1.8;
    color: #ffffff;
    max-width: 800px;
    margin: 0 auto;
}
/* スマホで見る場合0121 */
@media (max-width: 768px) {
    .tagline-title {
        font-size: 1.5rem;
    }
    .tagline-description {
        font-size: 1rem;
    }
}
/*Welcome to Our Websiteのアニメ0121  */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}


/*Toward a future that connects people  */
.animated-title {
    font-size: 3.5rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    animation: typing 4s steps(120, end) forwards;
    background-color: #004080; /* 必要に応じて背景色を調整 */
}
/* トップのサービスのスタイル 0131*/
/* サービスを包むコンテナ */
.services-container {
    display: flex; /* 横並びにする */
    justify-content: space-between; /* 均等配置 */
    gap: 20px; /* サービス同士の間隔 */
    flex-wrap: wrap; /* 小さい画面では折り返し */
    margin-bottom: 50px; /* 下のヒーローコンテンツと距離をとる */
}

/* トップのサービスのスタイル 0131 */
.services-overview {
    background-color: transparent;
    color: #ffffff;
    font-weight: bold;
    border: none;
    padding: 0;
    box-shadow: none;
    width: 100%; /* 横幅を全体に広げる */
    
    
}

.services-overview h2 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-top: 50px; /* 上の余白を追加（必要に応じて調整） */
    margin-bottom: 50px; /* タイトル下の余白 */
    border-bottom: 4px solid orange; /* ボーダーをオレンジ色で太く設定 */
}

.service-item {
    color: #ffffff;
    font-weight: bold;
    background-color: transparent;
    border: none;
    padding: 10px 0;
    box-shadow: none;
    
    width: 45%; /* 3つ均等に配置 */
    text-align: center;
    position: relative; /* ボーダーの位置を相対的に設定 */
}
/* ボーダーを追加 */
.service-item::after {
    content: '';
    display: block;
    width: 100%; /* ボーダーを全幅に設定 */
    height: 4px; /* ボーダーの太さ */
    background-color: orange; /* オレンジ色のボーダー */
    position: absolute;
    bottom: -6px; /* ボーダーをアイテムの下に配置（少し隙間を開ける） */
    left: 0; /* 左に寄せる */
    
}


.service-image {
    max-width: 100%; /* 画像をコンテナの幅に合わせる */
    height: auto; /* アスペクト比を保つ */
    margin-bottom: 10px; /* 画像とテキストの間に余白 */
    margin-top: 10px; /* ボーダーの上に余白を追加 */
}


/* ✅ Servicesページの見出しを下にずらす 0207*/
/* ✅ Servicesページの見出しデザインを採用情報と統一 */
.services-intro {
    margin-top: 170px; /* 🔥 ヘッダーと被らないように */
    background: linear-gradient(135deg, #004080, #0073e6); /* 🔥 青系グラデーション */
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 軽い影 */
    color: #fff; /* 文字色を白 */
    width: 100vw;
    max-width: 100%;
}

.services-intro h1 {
    font-size: 2.9rem; /* 🔥 大きさ統一 */
    font-weight: bold;
    margin-bottom: 5px;
}

.services-intro .catchphrase {
    font-size: 1.5rem;
    font-weight: bold;
    background-color: rgba(0, 64, 128, 0.8); /* 🔥 半透明の青 */
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    margin-top: 10px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .service-item {
        width: 100%; /* 小さい画面では縦並び */
    }
}

/* ヒーローコンテンツのスタイル 0127 */
.hero-content {
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    background-color: #002b5c; /* 濃青 */
    color: #fff;
    width: 100%; /* 全幅 */
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 300;
}

/* ボタンスタイル */
.cta-button {
    display: inline-block;
    background-color: #ff6f3c;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(255, 111, 60, 0.3);
}

.cta-button:hover {
    background-color: #e65b2a;
    box-shadow: 0 6px 12px rgba(255, 111, 60, 0.4);
    transform: translateY(-2px);
}

.cta-button:active {
    transform: translateY(2px);
}

/* serviceページ0128全体のリセット */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #001f3f; /* 濃青 */
    color: #ffffff; /* 白文字 */
}

/* ヘッダーのスタイル */
.header {
    text-align: center; /* 中央寄せ */
    margin-top: 50px; /* 上の余白を追加 */
    padding: 50px 20px;
    background-color: #003366; /* さらに濃い青 */
}

.header h1 {
    font-size: 2.5rem; /* 見出しのサイズ */
    color: #f8f8f5; /* 見出しの文字色 */
    font-weight: 700; /* 太字 */
    margin-bottom: 10px; /* キャッチフレーズとの余白 */
}

/* キャッチフレーズのスタイル */
.header .catchphrase {
    display: block; /* ブロック要素にする */
    text-align: center; /* テキストを中央寄せ */
    margin: 0 auto; /* ブロック要素として中央寄せ */
    max-width: 100%; /* 幅いっぱいにして中央に配置しやすく */
    font-size: 2rem; /* 文字サイズを大きく */
    color: #ff6f3c; /* 目立つ色 */
    font-weight: 700; /* より強調 */
    letter-spacing: 0.1em; /* 字間を広げる */
    line-height: 1.4; /* 行間を調整 */
    margin-top: 10px; /* h1との間隔 */
}
/* サービスセクション */
.services {
    max-width: 900px;
    margin: 50px auto;
    padding: 20px;
}

.service {
    background-color: #002b5c; /* セクションの背景色 */
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加 */
}

.service h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #ff6f3c; /* オレンジでアクセント */
}

.service p {
    font-size: 1rem;
    line-height: 1.5;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* 影をつけて読みやすく */
}

.service-visual {
    display: flex; /* 横並び */
    align-items: center; /* 縦方向の中央揃え */
    justify-content: flex-end; /* 右寄せ */
    height: 340px; /* 🔥 縦幅を直接指定 */
    
    
}

.service-text {
    font-size: 2.2rem; /* フレーズの文字サイズ */
    font-weight: bold;
    color: #ffffff; /* テキストカラー */
    margin-left: 20px; /* 🔥 もう少し左に移動 */
    margin-right: 120px; /* 🔥 画像との間に余白を作る */
    transform: translateX(-70px); /* 🔥 強制的に少し左に移動 */
}

.service-image {
    max-width: 30%; /* 画像サイズを調整 */
    height: auto;
    margin-left: 20px; /* 🔥 もう少し左に移動 */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 影をつける */
}

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

    .service h2 {
        font-size: 1.5rem;
    }

    .service p {
        font-size: 0.9rem;
    }
}

/* フッターのスタイル 0131*/
.footer {
    background-color: #003366; /* ヘッダーと統一 */
    color: #ffffff;
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
}

.footer-container {
    display: flex;
    justify-content: center; /* 中央揃え */
    align-items: flex-start; /* 上揃え */
    gap: 50px; /* 要素間の間隔を調整 */
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap; /* 画面が狭い場合は縦並び */
}

.footer-info, .footer-social {
    flex: 1;
    min-width: 280px;
    max-width: 400px; /* 幅が広がりすぎないように制限 */
    text-align: left; /* 左揃え */
}

.footer h3 {
    border-bottom: 2px solid #ff6f3c;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.footer p, .footer a {
    color: #ffffff;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer-copyright {
    margin-top: 20px;
    font-size: 0.9rem;
    opacity: 0.8;
    text-align: center;
}




/* PC版：横並びメニュー */


.menu {
    display: flex;
}

.menu li {
    margin: 0 15px;
}

.menu a {
    color: white;
    font-size: 18px;
}

/* ハンバーガーメニュー用 */
.menu-btn {
    display: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

/* スマホ向けスタイル */
@media (max-width: 768px) {

    .banner {
        height: 315px; /* 高さを小さくする */
        
    }

    .banner-image {
        object-fit: contain; /* 画像を全体に収める */
        
    }

    .circle {
        margin: 10px; /* サークル間の余白を追加 */
        margin-left: -120px; /* 左に移動させるためにマイナスのマージンを設定 */
    }
    .circle-container {
        margin-top: 20px; /* サークルコンテナの上部余白を追加 */
    }
    .circle-text {
        font-size: 2rem; /* スマホ用に小さめに設定 */
        left: -13%; /* 左に寄せる */
        transform: translate(-10%, -1%); /* 水平方向の調整を変更 */
        position: absolute;
        top: 52%; /* スマホではテキストをさらに下に表示 */
        text-align: left;
        line-height: 1.5; /* 行間 */
        pointer-events: none; /* 背景クリックを無効化 */
        z-index: 20; /* 他の要素より前面にする */
        white-space: nowrap; /* 改行を折り返さない無効化0120 */
    }

    .circle.small {
        width: 100px; /* スマホ用にサイズを小さく */
        height: 100px; /* スマホ用にサイズを小さく */
        margin-left: -120px; /* 左に移動させるためにマイナスのマージンを設定 */
        z-index: 20; /* 他の要素より前面にする */
        /* 中心から右に1cm寄せる0115ロゴのずれ */
        background-position: calc(50% + 0.08cm) center;
        background-size: 85px auto; /* スマホ版ではロゴを小さく */
    }
    .animated-title {
        font-size: 1.35rem; /* スマホ用の小さめのサイズ */
        margin: -10px 0; /* スマホ用の上下の余白を小さく設定 */
        margin-top: 10px; /* 文字の位置も調整 */
    }

    .header {
        flex-direction: column;
        align-items: flex-end; /* 🔥 右寄せにする */
        padding: 10px;
        margin-left: 5px; /* スマホ用にさらに少し右にずらす0224 */
    }
    .header-container {
        margin-left: 20px; /* スマホ向けに調整 */
    }

    .logo-section img {
        height: 30px; /* スマホ用にロゴの高さを小さくする */
        margin-left: 10px; /* スマホ用にさらに少し右にずらす0224 */
    }

    .company-name {
        font-size: 1rem; /* スマホ用にフォントサイズを小さくする */
        margin: 5px 0; /* 上下のマージンを減らす */
    }

    .nav-bar a {
        font-size: 0.9rem; /* スマホ用にナビゲーションリンクのフォントサイズを小さくする */
    }

    .menu-btn {
        display: block;
        justify-content: flex-end; /* 🔥 メニューを右寄せ */
        margin-right: -40px; /* 右に寄せるためのマージンを追加 */
    }

    .menu {
        display: none;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.8);
        width: 100%;
        position: absolute;
        top: 50px;
        left: 0;
        font-size: 14px; /* ナビゲーションメニューのフォントサイズを小さくする */
        
    }

    .menu.active {
        display: flex;
    }

    .menu li {
        text-align: center;
        padding: 15px 0;
    }

    .menu a {
        font-size: 16px;
    }

    .hero-content {
        padding: 10px; /* パディングを小さくする */
        margin: 0 auto; /* 上下のマージンを0に、左右は自動で調整 */
        max-width: 85%; /* 最大幅を設定して横幅を狭める */
        min-height: 100px; /* 必要なら高さを指定 */
        padding-bottom: 20px; /* 下の余白を増やす */
    }

    .hero-content p {
        font-size: 1.0rem; /* フォントサイズを小さくする */
    }

    .cta-button {
        font-size: 0.9rem; /* ボタンのフォントサイズをさらに小さくする */
        padding: 6px 15px; /* ボタンのパディングをさらに小さくする */
    }

    /* 背景の高さ調整 */
    body {
        background-size: contain; /* 高さがスクロールしないように調整 */
    }

    .services {
        margin-top: 20px; /* ここを減らして上にずらす */
    }

    .services-intro {
        margin-top: 110px; /* ヘッダーとの距離を調整 */
        margin-left: 0; /* 左の余白をリセット */
        padding: 10px 0; /* 上下の余白を小さくする */
        width: 100vw; /* 横幅を画面いっぱいに広げる */
        
    }

    .services-intro h1 {
        font-size: 1.8rem; /* 見出しを少し小さく */
    }

    .services-intro .catchphrase {
        font-size: 1.1rem; /* キャッチフレーズの文字サイズも調整 */
        padding: 8px 15px; /* 余白を少し縮める */
    }

    .services-overview h2 {
        font-size: 1.5rem; /* 🔥 タイトルのサイズを小さく */
        margin-bottom: 40px; /* 🔥 余白を少し減らす */
    }
    

    .service-item {
        font-size: 0.9rem; /* 🔥 サービスの文字を小さく */
        padding: 1px 0; /* 🔥 上下の余白を減らす */
        align-items: center; /* 🔥 完全に中央にする */
    }

    .service-image {
        max-width: 70%; /* 画像を80%に設定（必要に応じて調整） */
        margin-right: 40px; /* 右にずらすためのマージンを追加 */
    }


    .header-background {
        height: 40vh; /* 🔥 スマホ版では背景画像の高さを小さく */
        background-size: contain; /* 必要ならcontainに変更して全体を収める */
        background-position: center center; /* 💡 画像を中央寄せ */
        width: 90%; /* 幅を90%に設定 */
        margin-bottom: 40px; /* 会社概要との間にスペースを追加 */
    }
    .header-text {
        margin-top: 50px; /* 上にマージンを追加して下にずらす */
        font-size: 1.2rem; /* フォントサイズを小さく */
        padding: 10px; /* 余白を追加 */
    }

    .representative-message {
        width: 75%; /* スマホでは幅を80%に設定 */
        padding: 30px; /* 余白を少し減らす */
        margin: 30px auto; /* 上下の余白を調整 */
    }
    .representative-message h2 {
        font-size: 1.4rem; /* スマホでは見出しを小さく */
    }

    .container {
        display: flex;
        flex-direction: column; /* 縦並び */
        align-items: center; /* 中央寄せ */
        text-align: center; /* テキストも中央揃え */
        width: 100%; /* 幅を100%にして中央寄せを強調 */
        margin: 0 auto; /* 自動マージンで中央寄せ */
    }

    .company-info {
        padding: 20px; /* 余白を調整 */
        margin: 5px auto; /* 端に寄らないように中央寄せ */
        min-height: auto; /* 最小高さを自動調整 */
        width: 100%; /* 幅を100%に設定して全体に合わせる */
        max-width: 80%; /* 幅を90%に設定 */
        box-shadow: none; /* シャドウを削除 */
        text-align: left; /* テキストを左寄せ */
        word-wrap: break-word; /* 長い単語を適切に改行 */
        overflow-wrap: break-word; /* こちらも適用 */
        margin-bottom: 30px; /* マップとの間にスペースを追加 */
        
       
    }
    .company-info h2 {
        font-size: 1.5rem; /* ヘッダーのサイズを小さく */
    }
    .company-info li {
        font-size: 1rem; /* リストのフォントサイズを小さく */
        display: block; /* 各リストアイテムをブロック要素に */
        margin-bottom: 5px; /* アイテム間のスペースを追加 */
    }
    .content-wrapper {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center; /* 中央に配置 */
        gap: 20px; /* スペースを調整 */
    }

    .map {
        min-height: 360px; /* 会社概要と高さを揃える */
        max-width: 350px; /* 会社概要と同じ幅 */
        height: 200px; /* スマホでは高さを少し縮める */
        margin: 0 auto; /* 💡 中央に配置 */   
        

    }
    .map iframe {
        height: 100%; /* 高さを100%に設定 */
        
        
    }

    iframe {
        height: 300px; /* 🔥 地図の高さを少し縮める */
    }

    .message-wrapper { /* ← 代表者挨拶の大枠 */
        max-width: 20%; /* 🔥 枠全体を小さく */
        padding: 5px; /* 🔥 余白を調整 */
        margin: 5px auto; /* 🔥 端に寄らないように */
        height: auto; /* 縦幅を自動調整 */
        max-height: 250px; /* 縦幅の最大値を設定（必要に応じて調整） */
    }

    .message-content {
        width: 85%; /* 幅を100%に設定して横に大きくする */
        flex-direction: column; /* 🔥 スマホでは縦並び */
        text-align: center; /* 🔥 テキストを中央揃え */
        padding: 15px; /* 余白を調整 */
        margin: 15px auto; /* 上下の余白を15px、左右を自動で中央寄せ */
        
    }

    .message-content p {
        font-size: 1rem; /* 🔥 テキストを少し小さく */
        line-height: 1.6; /* 読みやすく */
    }


    section {
        margin: 10px auto; /* マージンを狭くする */
        padding: 20px; /* パディングを狭くする */
        max-width: 80%; /* 最大幅を90%に */
    }

    section h2 {
        font-size: 1.5rem; /* 見出しのフォントサイズを小さく */
        margin-bottom: 10px; /* 下のマージンを狭くする */
    }

    ul {
        padding-left: 15px; /* リストの左側の余白を追加 */
    }

    li {
        font-size: 1rem; /* リストアイテムのフォントサイズを小さく */
        margin-bottom: 5px; /* 下のマージンを狭くする */
    }

    .contact-image img {
        max-width: 100%; /* 画面サイズに応じて画像を全幅に */
        height: auto; /* アスペクト比を維持 */
    }
    
    .contact-content {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 中央揃え */
        justify-content: center; /* 中央揃え */
    }
    
    .contact-text {
        font-size: 1.2em; /* フォントサイズを小さくする */
        padding-left: 20px; /* 左側の余白を減らす */
        margin-right: 0; /* 右側の余白を削除 */
        text-align: center; /* テキストを中央揃え */
        white-space: normal; /* 改行を許可する */
    }

    .contact-button {
        padding: 8px 15px; /* ボタンのパディングを狭くする */
        font-size: 0.9rem; /* ボタンのフォントサイズを小さくする */
    }

    .contact-intro {
        margin-top: 90px; /* ヘッダーにかぶらないように */
        padding: 15px 0; /* 高さをスリムに */
    }

    .contact-intro h1 {
        font-size: 1.6rem; /* メイン見出しのサイズを小さく */
        margin-bottom: 5px; /* 間隔を少し狭く */
    }

    .contact-intro .sub-heading {
        font-size: 1.0rem; /* サブタイトルのサイズを小さく */
    }

    .sales-position {
        margin: 20px auto; /* マージンを狭くする */
        padding: 30px; /* パディングを狭くする */
        max-width: 75%; /* 横幅を90%に設定 */
        height: 420px; /* スマホでは高さを少し縮める */
        margin-bottom: 40px; /* 下のマージンを狭くする */
        margin-top: 50px;
    }

    .sales-position h2 {
        font-size: 1.4rem; /* 営業職セクションの見出しのフォントサイズを小さく */
        margin-top: -1px; /* 上にずらす（必要に応じて値を調整） */
    }

    .recruitment,
    .benefits,
    .contact {
        margin-bottom: 40px; /* 🔥 下の余白を追加 */
    }

    .sales-image {
        max-width: 100%; /* 幅を100%にして縮める */
        margin-top: -5px; /* 上にずらす（必要に応じて値を調整） */
    }

    .catchphrase {
        font-size: 1rem; /* キャッチフレーズのフォントサイズを小さく */
        padding: 5px 10px; /* パディングを狭くする */
        margin-top: 5px; /* 上のマージンを狭くする */
        margin-bottom: 10px; /* 下のマージンを狭くする */
    }

    .service-visual {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start; /* 左寄せ */
        height: auto; /* 縦幅を自動調整 */
        padding: 20px; /* 上下に余白を追加 */
    }

    .service-text {
        font-size: 1.3rem; /* フレーズの文字サイズを小さく */
        margin-left: 10px; /* 左の余白をリセット */
        margin-right: 0; /* 右の余白をリセット */
        transform: translateX(0); /* 強制移動を解除 */
        text-align: left; /* テキストを左寄せ */
        margin-bottom: 10px; /* テキストと画像の間にスペースを追加 */
    }

    .service-image {
        max-width: 70%; /* 画像サイズを調整 */
        margin-left: 0; /* 左の余白をリセット */
        margin-top: 20px; /* テキストと画像の間にスペースを追加 */
        margin-left: 50px; /* 右にずらすためのマージンを追加 */
    }

}