@charset "utf-8";


/* 
fonts roles
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
 
 color
    #00336C

h3 24px
*/

/*  ページ全体の横スクロール防止 */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* 横スクロールを防止 */
    margin: 0;
    padding: 0;
}

.container, .menu, .top_about, .top_our_business, .top_our_strong, 
.banner, .top_recruit, .top_news, .footer-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* 中央配置 */
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box; /* パディング込みで幅を計算 */
}


/* Initial state */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* Fade-in effect when in viewport */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

body{
    font-family: "Noto Sans JP", serif;
    font-style: normal;
    font-size: 13px;
}


/* header */
.hamburger {
    display: none;
    cursor: pointer;
    width: 40px;
    height: 30px;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1001;
}

.hamburger div {
    background-color: #333;
    height: 5px;
    width: 100%;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* ハンバーガーメニューが開いたときの「×」 */
.hamburger.active div:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.hamburger.active div:nth-child(2) {
    opacity: 0;
}

.hamburger.active div:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

header {
    position: relative;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f4f4f4;
    /* max-width: 1200px; */
    width: 100%;
    margin: auto;
    height: 75px;
}

header img.logo {
    height: 50px;
    margin-left: 20px;
}

.menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 20px;
}

.menu .contact {
    margin-bottom: 10px;
    width: 40%;
    text-align: center;
}

.menu .contact img{
    height: 13px;
    margin-right: 10px;
}

.menu .contact a {
    display: block;
    background: #00336C;
    color: white;
    padding: 10px 10px;
    text-decoration: none;
}

.menu .contact a:hover {
    background: orange; /* ホバー時の背景色 */
}

.menu ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
}

.menu ul > li {
    position: relative;
    margin: 0 15px;
    cursor: pointer;
}

.menu ul > li.drop::after {
    content: "";
    display: inline-block;
    width: 8px; /* 大きさ */
    height: 8px; /* 大きさ */
    margin: 0 5px;
    border-top: 1px solid #000; /* 線の太さ・色 */
    border-left: 1px solid #000; /* 線の太さ・色 */
    transform: rotate(-135deg); /* 初期状態の三角形 */
    -webkit-transform: rotate(-135deg); /* 初期状態の三角形 */
    transition: transform 0.5s ease-in-out; /* 回転アニメーションの設定 */
}

/* ホバー時に横線に戻る */
.menu ul > li.drop:hover::after {
    transform: rotate(0deg); /* 横線に戻す */
    -webkit-transform: rotate(0deg); /* 横線に戻す */
}
/* 初期状態のドロップダウンメニュー */
.menu ul ul {
     left: 0; /* 画面の左端に配置 */
    top: 75px; /* ヘッダーの下に表示 */
    transform: translateX(-50%); /* 中央寄せ */
    background: #f4f4f4;
    opacity: 0; /* 初期状態では透明 */
    visibility: hidden; /* 初期状態では非表示 */
    transform: translateY(-20px); /* 上にスライドアウトした状態 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0 0 8px 0; /* 余分な間隔を排除 */
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s; /* フェードインとスライドインのアニメーション */
    width: 100%; /* 画面全体に広がる */
    position: fixed;
}

/* 親liにホバーしたときに表示 */
.menu ul li:hover > ul {
    opacity: 1; /* ホバー時に透明度を1にして表示 */
    visibility: visible; /* 見えるようにする */
    transform: translateY(0); /* ホバー時にスライドイン */
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s; /* visibilityの変化が即時に反映されるように */
}

/* 子ulにホバーしている間も表示を維持 */
.menu ul li ul:hover {
    opacity: 1; /* 子ulがホバーされているときも表示 */
    visibility: visible; /* 見えるようにする */
    transform: translateY(0); /* 上にスライドイン */
}

/* 各リスト項目 */
.menu ul ul li {
    white-space: nowrap;
    padding: 5px 10px;
    width: 10%;
    text-align: center;
    font-size: 10px;
}

.menu ul ul li a {
    text-decoration: none;
    color: black;
}

.menu ul ul li a p{
    margin-top: 10px;
}

.menu ul ul li a img {
   width: 100%;
   transition: transform 0.3s ease; /* 拡大時のスムーズなアニメーション */
}

.menu ul ul li a:hover img {
    transform: scale(1.1); /* 1.1倍に拡大 */
}


.menu ul ul li a:hover {
    color: #00336C;
}


/* top_kv */
.slideshow-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 90vh;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2rem;
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    font-size: 56px;
    letter-spacing:.1em;
    line-height: 1.4em;
}
.caption span{
    font-size: 1.2em;

}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* top_about */
.top_about {

    max-width: 1200px;
    margin: 100px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* top_about_l のスタイル */
.top_about_l {
    width: 50%;
    position: relative;
    padding-top: 5px; /* 画像スペース */
    margin-left:20px;
}
/* h3タグに画像を挿入 */

/* ルール適用 */
.top_about_l h3 {
    font-size: 24px;
    font-weight: bold;
    position: relative;
}

.top_about_l h3::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 10px;
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
}

/* pタグ1 - 太字 */
/* ルール適用 */
.top_about_l p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
}

/* pタグ2 - 通常 */
.top_about_l p:nth-of-type(2) {
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5em;
}

/* aタグ - 青い線を右側に追加 */
/* aタグのスタイル */
.top_about_l p a {
    margin-top: 100px;
    display: inline-block;
    background-color: #00336C;
    color: white;
    padding: 10px 40px 10px 20px;
    text-decoration: none;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s all ease-in-out; /* 反転とアニメーションをスムーズに */
}

/* aタグのbeforeのスタイル */
.top_about_l p a::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 30px;
    height: 1px;
    background-color: white;
    transform: translateY(-50%);
}

/* aタグのafterのスタイル */
.top_about_l p a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -30px;
    width: 30px;
    height: 1px;
    background-color: #00336C;
    transform: translateY(-50%);
}

/* aタグホバー時の反転効果 */
.top_about_l p a:hover {
    background-color: white;
    color: #00336C;
    border: #00336C 2px solid;
}

.top_about_l p a:hover::before {
    background-color: #00336C;
}



/* top_about_r のスタイル */
.top_about_r {
    width: 50%;
    display: flex;
    justify-content: space-between; /* 画像を横並びに配置 */
    position: relative;
}

/* 各画像のスタイル */
.top_about_r img {
    width: 48%; /* 画像の幅を100%に設定 */
    height: auto; /* 高さは自動調整 */
    display: block; /* 画像の下に余白ができないようにする */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* ドロップシャドウを追加 */
}

/* 2番目の画像に対して下にはみ出るように設定 */
.top_about_r img:nth-of-type(2) {
    position: relative;
    top: 50px; /* 画像を50px下に移動 */
}


/* top_our_business */
.top_our_business {
    max-width: 1200px;
    margin: 150px auto; /* セクションの左右マージンを自動に */
    padding: 20px;
    text-align: center; /* テキストを中央揃え */
}

/* h3タグのスタイル */
.top_our_business h3{
    font-size: 24px;
    font-weight: bold;
    position: relative;
    
}

.top_our_business h3::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%; /* 左から50%の位置 */
    width: 10px; /* 画像のサイズ */
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
    transform: translateX(-50%); /* 画像の幅の半分を左に移動して中央揃え */
}




/* h3タグの説明部分 */
.top_our_business p {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 80px;

}
/* .business_list のスタイル */
.business_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.business_list a{
    display: inline;
    width: 20%;
    height: auto;
    
}

/* 画像の初期状態 */
.business_list img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    opacity: 0; /* 初期状態では透明 */
    transform: translateY(50px); /* 下から50pxずらして表示 */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 画像が表示された時にアニメーションを適用 */
.business_list img.show {
    opacity: 1; /* 表示 */
    transform: translateY(0); /* 元の位置に戻る */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .business_list a{
        width: 45%;
    }

    .business_list img {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .business_list a {
        width: 45%;
    }

    .business_list img {
        width: 100%;
    }
}


/* top_our_strong */
.top_our_strong {
    max-width: 1200px;
    margin: 150px auto; /* セクションの左右マージンを自動に */
    padding: 20px;
}

/* h3タグのスタイル */
.top_our_strong h3 {
    font-size: 24px;
    font-weight: bold;
    position: relative;
    text-align: center; /* テキストを中央揃え */

}

.top_our_strong h3::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%; /* 左から50%の位置 */
    width: 10px; /* 画像のサイズ */
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
    transform: translateX(-50%); /* 画像の幅の半分を左に移動して中央揃え */
}

/* h3タグの説明部分 */
.top_our_strong > p {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 80px;
    text-align: center; /* テキストを中央揃え */
}

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

.strong_point_list ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.strong_point_list ul li {
    padding: 20px;
}

.strong_point_list ul li h4 span {
    color: #00336C;
    font-size: 46px;
    margin-right: 1ch;
    font-weight: bold;
}

.strong_point_list ul li h4 {
    font-size: 20px;
    margin: 0 0 10px 0;
    font-weight: bold;
    color: #333;
}

.strong_point_list ul li p {
    margin-top: 20px;
    color: #555;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .strong_point_list ul {
        grid-template-columns: 1fr;
    }
}


/* banner */
section.banner{
    max-width: 1200px;
    display: flex;
    margin: auto;
}

.banner_r,.banner_l{
    width: 50%;
    position: relative;
}

.banner_r img,
.banner_l img{
    width: 100%;
}

.banner_l p{
    color: white;
    position: absolute;
    bottom: 30px;
    transform: translateX(-50%); /* 中央寄せ */
    left: 50%;
}

.banner_l p a{
    background-color: #00336C;
    font-size: 16px;
    padding: 5px 15px;
    border-radius: 5px;
}

.banner_l a:hover{
    background-color: orange;
}

.banner_r_info{
    position: absolute;
    top: 0;
    height: 100%;
    transform: translateX(-50%); /* 中央寄せ */
    left: 50%;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90%;
}


.banner_r_info_company{
    padding-bottom: 30px;
    border-bottom: 1px solid white;
}

.banner_r_info_catch{
    padding-top: 20px;
}
.banner_r_info_company a{
    transition: color .2s ease; 
}

.banner_r_info_company a:hover {
    color: orange; /* ホバー時にオレンジ色に変わる */
}

/* 1つ目のpタグ（会社紹介の上部） */
.banner_r_info_company p:first-of-type {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 1つ目のpタグ（キャッチフレーズの最初の部分） */
/* 1つ目のpタグ（キャッチフレーズの最初の部分） */
.banner_r_info_catch p:first-of-type {
    font-size: 24px;
    font-weight: bold;
    background-color: #00336C;
    color: white; /* 初期文字色 */
    width: 40%;
    margin: 30px auto 0;
    padding: 10px;
    overflow: hidden; /* 画像のようなエフェクトに対応 */
    position: relative;
    z-index: 1;
    transition: color 0.2s ease; /* 文字色の変化にアニメーション */
}

/* 擬似要素によるエフェクト */
.banner_r_info_catch p:first-of-type::after {
    background: orange;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
}

/* ホバー時の文字色とエフェクトの変更 */
.banner_r_info_catch p:first-of-type:hover {
    color: #fff; /* ホバー時の文字色 */
}

.banner_r_info_catch p:first-of-type:hover::after {
    transform: scale(1, 1); /* 擬似要素のスケールを元に戻す */
}

/* 2つ目のpタグ（キャッチフレーズの2行目） */
.banner_r_info_catch p:nth-of-type(2) {
    font-size: 24px;
    font-weight: bold;
    margin-top: 15px;
}

/* 3つ目のpタグ（キャッチフレーズの3行目） */
.banner_r_info_catch p:nth-of-type(3) {
    font-weight: bold;
    margin-top: 15px;
}

/* top_recruit */
.top_recruit{
    margin: 150px auto; /* セクションの左右マージンを自動に */
    padding: 20px;
    text-align: center; /* テキストを中央揃え */
}

.top_recruit h3 {
    font-size: 24px;
    font-weight: bold;
    position: relative;
}

.top_recruit h3::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%; /* 左から50%の位置 */
    width: 10px; /* 画像のサイズ */
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
    transform: translateX(-50%); /* 画像の幅の半分を左に移動して中央揃え */
}

/* h3タグの説明部分 */
.top_recruit > p  {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 50px;
}

.top_recruit ul{
    text-align: center;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.top_recruit ul li{
    width: 15%;
}

.top_recruit ul li a{
    display: block;
}

.top_recruit ul li img{
    width: 100%;
}


/* 初期状態のpタグ */
.top_recruit ul li p {
    position: relative; /* 擬似要素の基準を設定 */
    overflow: hidden; /* 背景がはみ出ないように設定 */
    line-height:30px ;
}

/* 擬似要素で背景のアニメーションを定義 */
.top_recruit ul li p::before {
    content: ""; /* 擬似要素を作成 */
    position: absolute;
    top: 0;
    left: -100%; /* 初期位置を左の外側に設定 */
    width: 100%;
    height: 100%;
    background-color: #00336C; /* 背景色をオレンジに設定 */
    transition: left 0.5s ease; /* アニメーション効果を設定 */
    z-index: -1; /* 背景がテキストの後ろに表示されるようにする */
    padding: 10px 0;
}

/* aタグをホバーした時のアニメーション */
.top_recruit ul li a:hover + p::before {
    left: 0; /* 背景が左から現れる */

}

.top_recruit ul li a:hover + p {
    color: white;
}


/* top_news */
.top_news {
    max-width: 1200px;
    margin: 100px auto 0;
}

.top_news_title{
    display: flex; /* 横並びにする */
    align-items: center; /* 縦方向の中央揃え */
    margin-left: 20px;
}

.top_news_title h3 {
    font-size: 24px;
    font-weight: bold;
    position: relative;
    display: flex; /* アイコンと文字を横並びにする */
    align-items: center; /* アイコンと文字の縦方向を中央揃え */
    margin: 0;
    padding-right: 20px; /* 線と文字の間隔 */
}

.top_news_title h3::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 10px;
    height: 10px;
    background-image: url('../img/hex.png'); /* 左上に挿入する画像のパス */
    background-size: cover;
    background-position: center;
    margin-right: 10px; /* 画像と文字の余白 */
}

.top_news_title h3::after {
    content: '';
    position: relative;
    flex-grow: 1; /* 線を伸ばす */
    height: 1px; /* 線の太さ */
    width: 100px;
    background-color: #00336C; /* 線の色 */
    margin-left: 10px; /* 線と文字の余白 */
}

.top_news_title p {
    font-size: 16px;
    margin: 0;
    margin-left: 20px; /* h3とpの間隔 */
}

/* タイトル部分 */
.top_news_title {
    margin-bottom: 20px; /* 下部余白を追加 */
}

.top_news_title h3 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.top_news_title p {
    font-size: 16px;
    margin: 5px 0 0;
    color: #555; /* 少し薄い文字色 */
}

/* ニュースリスト全体 */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 各ニュース項目の間隔 */
    margin-top: 50px;
}

/* 個々のニュース項目 */
.news-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px; /* 内側の余白 */
    background-color: #fff; /* 背景色 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影 */
    border-radius: 4px; /* 角を少し丸める */
    width: 60%;
    margin:
    auto;
}

/* 日付部分 */
.news-date {
    font-size: 12px;
    color: #00336C; /* 日付の文字色 */
    white-space: nowrap; /* 日付を折り返さない */
}

/* 内容部分 */
.news-content {
    font-size: 13px;
    margin-left: 20px; /* 日付と内容の間隔 */
    text-align: left;
    flex-grow: 1; /* 内容部分が広がる */
}

/* ホバー時の影を強くする */
.news-item:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* ホバー時の影を強調 */
}

/* スムーズなアニメーション */
.news-item {
    transition: box-shadow 0.3s ease; /* 影の変化をスムーズに */
}

/* top_links */
/* UL全体のスタイル */
.top_links_li {
    display: flex; /* 横並びにする */
    justify-content: space-around; /* 等間隔で配置 */
    align-items: flex-start; /* 垂直方向の揃え（画像とpタグ用） */
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;
    margin: 0;
}

/* LI要素 */
.top_links_li li {
    display: flex;
    flex-direction: column; /* 上下に要素を並べる */
    text-align: left; /* pタグの左揃え */
    width: 20%; /* 必要に応じて調整 */
}

/* pタグを左揃え */
.top_links_li li a p {
    margin-top: 10px; /* 画像との間隔 */
    font-size: 14px; /* フォントサイズ調整 */
    text-align: left; /* 左揃え */
}



/* pタグの後ろに画像を挿入 */
.top_links_li li a p::after {
    content: '';
    display: inline-block; /* インライン要素として表示 */
    margin-left: 10px; /* テキストと画像の間隔 */
    width: 10px; /* 画像の幅 */
    height: 10px; /* 画像の高さ */
    background-image: url('../img/link.png'); /* 画像のパスを指定 */
    background-size: contain; /* 画像を要素に収める */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    vertical-align: middle; /* テキストと画像を揃える */
}

/* li内の最初のimgのスタイル */
.top_links_li li img {
    width: 100%; /* 必要に応じて調整 */
    height: auto;
    margin-bottom: 5px; /* pタグと画像の間隔 */
    transition: transform 0.3s ease; /* スムーズな拡大アニメーション */
}

/* liタグ全体をホバーしたとき、最初のimgを拡大 */
.top_links_li li:hover img {
    transform: scale(1.2); /* 画像を1.2倍に拡大 */
}


/* footer */
/* フッター全体 */
.footer {
    background-color: #f3f3f3;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
    margin-top: 100px;
}

/* コンテナ */
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

/* ロゴセクション */


.footer_ad{
    width: 26%;
}


.footer-logo {
    display: block;
    text-align: left;
}

.footer-logo img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* 連絡先セクション */
.footer-contact {
    display: block;
    text-align: left;
}

.footer-contact address {
    font-style: normal;
    line-height: 1.8;
    margin-bottom: 10px;
    font-size: 10px;
    width: 100%;
}

.footer-contact-btn {
    display: inline-flex;
    align-items: center;
    background-color: #00336C;
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 100;
}

.footer-contact-btn img {
    width: 16px;
    height: auto;
    margin-right: 10px;
}

/* フッターリンクセクション */
.footer-links {
    text-align: left;
    width: 74%;
}

.footer-links h4 {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-bottom: 5px;
}

/* フッターリンクのグループ */
.footer-links-groups {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.footer-links-group {
    min-width: 30%;
}

.footer-links-group p {
    font-size: 13px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000000;
}

.footer-links-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-group li {
    margin-bottom: 10px;

}

.footer-links-group li a {
    text-decoration: none;
    color: #333;
    font-size: 12px;
}

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

.top_privacy{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.top_privacy span{
    font-size: 6px;
    margin-top: 30px;

}


/* 事業紹介ページ */
/* 共通 ヘッダー*/

.about_kv {
    width: 98%;
    max-width: 1200px;
    position: relative;
    padding-top: 5px; /* 画像スペース */
    margin-top: 50px;
    margin-left:auto ;
    margin-right: auto;
    background-image: url(../img/about_1.jpg);
    background-size: 70% auto;  /* 画像を70%に縮小して右側に配置 */
    background-position: right center; /* 画像を右寄せに */
    background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
    background-color: #fff; /* 空白部分の背景色（必要に応じて変更） */
}


.about_kv h3 {
    font-size: 36px;
    font-weight: bold;
    position: relative;
}

.about_kv h3::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 10px;
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
}

.about_kv p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
}


/* about_catch */
.about_catch{
    max-width: 1200px;
    margin: 50px auto;
    display: flex;
}


.about_catch_txtarea {
    width: 50%;
    display: block;
    margin-top: 50px;
}

.about_catch_txtarea h3{
    line-height: 2;
    font-size: 24px;
    font-weight: bold;
}

.about_catch_txtarea p{
    line-height: 1.8;
    margin-top: 50px;
}

/* 各画像のスタイル */

.about_catch_img{
    display: flex;
    position: relative;
    width: 45%;
    height: auto;
    object-fit: cover;
}


.about_catch_img img {
    width: 40%; /* 画像の幅を100%に設定 */
    height: auto; /* 高さは自動調整 */
    display: block; /* 画像の下に余白ができないようにする */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* ドロップシャドウを追加 */
    margin-left: .5%;
}

/* 2番目の画像に対して下にはみ出るように設定 */
.about_catch_img img:nth-of-type(2) {
    position: relative;
    top: 100px; /* 画像を50px下に移動 */
}


/* ルール適用 */
.about_features{
    margin-top: 200px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.features h3 {
    font-size: 24px;
    font-weight: bold;
    position: relative;
    text-align: center;
}

.features h3::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%; /* 左から50%の位置 */
    width: 10px; /* 画像のサイズ */
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
    transform: translateX(-50%); /* 画像の幅の半分を左に移動して中央揃え */
}

/* pタグ1 - 太字 */
/* ルール適用 */
.features p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
    text-align: center;
}

.features p:nth-of-type(2) {
    margin: 50px 0;
    text-align: center;
    line-height: 2;
}

.about_rl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 100px;
}

.about_rl > p{
    width: 50%;
    text-align: center;
}

.about_rl p img{
    width: 70%;
}

.about_r{
    width: 50%;
}

.about_r h4{
     background-color: #00336C;
     color: white;
     font-size: 18px;
     display: inline-block;
     padding: 10px;
}

.about_r p:nth-of-type(1) {
    margin-top: 20px;
}

.about_r p:nth-of-type(2) {
    margin-top: 20px;
    line-height: 2;
}

.about_r p:nth-of-type(3) {
    color: #00336C;
    margin-top: 20px;
    line-height: 2;
}

.about_rl p.about_chiku img{
    width: 50%;
}

.about_contact{
    margin-top: 200px;
    background-color: #bddcff;
    padding-top: 50px;
}

.contact_btn_area {
    display: flex;
    justify-content: center;
    gap: 40px; /* ボタン間のスペース */
    padding: 20px;
}

.contact_btn {
    display: flex;
    align-items: center;  /* アイコンとテキストを中央揃え */
    background-color: #00336C;
    color: #fff;
    text-decoration: none;  /* リンクの下線を消す */
    padding: 15px 30px;
    transition: all 0.3s ease;
    width: 300px;  /* ボタンの幅 */
    justify-content: center;
}

.contact_btn:hover {
    background-color: orange;
}

.contact_btn img {
    width: 10px;  /* アイコンサイズ */
    height: auto;
    margin-right: 15px; /* 画像とテキストの間隔 */
}

.phone_info {
    display: flex;
    flex-direction: column;  /* 縦並びに配置 */
    
}

.phone_number {
    font-weight: bold;
    margin: 0;

}

.direct {
    font-size: .7em;
    margin: 0;
    padding-top: 10px;
}




/* new_construction_work */

/* 共通 ヘッダー*/

.about_new_construction_work_kv {
    width: 98%;
    max-width: 1200px;
    position: relative;
    padding-top: 5px; /* 画像スペース */
    margin-top: 50px;
    margin-left:auto ;
    margin-right: auto;
    background-image: url(../img/about_2.jpg);
    background-size: 70% auto;  /* 画像を70%に縮小して右側に配置 */
    background-position: right center; /* 画像を右寄せに */
    background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
    background-color: #fff; /* 空白部分の背景色（必要に応じて変更） */
}


.about_new_construction_work_kv h3 {
    font-size: 36px;
    font-weight: bold;
    position: relative;
}

.about_new_construction_work_kv h3::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 10px;
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
}

.about_new_construction_work_kv p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
}


/* 共通 ヘッダー*/

.about_renovation_kv {
    width: 98%;
    max-width: 1200px;
    position: relative;
    padding-top: 5px; /* 画像スペース */
    margin-top: 50px;
    margin-left:auto ;
    margin-right: auto;
    background-image: url(../img/about_3.jpg);
    background-size: 70% auto;  /* 画像を70%に縮小して右側に配置 */
    background-position: right center; /* 画像を右寄せに */
    background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
    background-color: #fff; /* 空白部分の背景色（必要に応じて変更） */
}


.about_renovation_kv h3 {
    font-size: 36px;
    font-weight: bold;
    position: relative;
}

.about_renovation_kv h3::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 10px;
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
}

.about_renovation_kv p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
}

.about_renovation_4works {
    display: flex;
    justify-content: space-between;  /* 画像を横並びに配置 */
    align-items: center;
    gap: 20px;  /* 画像間のスペース */
    padding: 20px;
}

.work_item {
    text-align: center;  /* pタグを中央配置 */
    max-width: 250px;  /* 各アイテムの最大幅を設定 */
}

.work_item img {
    width: 100%;  /* 親要素にフィット */
    height: auto;
    border-radius: 10px;  /* 角の丸みを追加（任意） */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* ドロップシャドウ */
    transition: transform 0.3s ease;  /* ホバーアニメーション */
}

.work_item img:hover {
    transform: scale(1.05); /* 画像を拡大 */
}

.work_item p {
    margin-top: 10px;
    color: #333;  /* 文字色 */
}


/*real_estate_leasing */

/* about_real_estate_leasing_kv */



/* 共通 ヘッダー*/

.about_real_estate_leasing_kv {
    width: 98%;
    max-width: 1200px;
    position: relative;
    padding-top: 5px; /* 画像スペース */
    margin-top: 50px;
    margin-left:auto ;
    margin-right: auto;
    background-image: url(../img/about_4.jpg);
    background-size: 70% auto;  /* 画像を70%に縮小して右側に配置 */
    background-position: right center; /* 画像を右寄せに */
    background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
    background-color: #fff; /* 空白部分の背景色（必要に応じて変更） */
}


.about_real_estate_leasing_kv h3 {
    font-size: 36px;
    font-weight: bold;
    position: relative;
}

.about_real_estate_leasing_kv h3::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 10px;
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
}

.about_real_estate_leasing_kv p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
}


.feature_lease {
    display: flex;
    justify-content: space-between; /* 画像を横並びで均等配置 */
    gap: 20px; /* 画像間のスペース */
    padding: 20px;
}

.lease_item {
    text-align: center;
    max-width: 250px; /* 各項目の最大幅 */
}

.image_wrapper {
    position: relative;
    overflow: hidden;
}

.image_wrapper img {
    width: 100%; /* 画像を親要素いっぱいに */
    height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* ドロップシャドウ */
}

.overlay {
    position: absolute;
    bottom: 30px; /* 画像の下部に配置 */
    width: 100%;
    background: rgba(255, 255, 255, 0.7); /* 薄い白背景 */
    padding: 10px 0;
    text-align: center;
}

.overlay_text {
    font-weight: bold;
}

.description {
    margin-top: 10px;
    line-height: 1.8;
}

.lease_soudan{
    position: relative;
    border:1px solid #00336C;
    margin: 100px auto;
    width: 60%;
}

.lease_soudan h4{
    background-color: white;
    position: absolute;
    text-align: center;
    top: -10px; /* 上に10px飛び出させる */
    left: 50%;  /* 左端を中央へ */
    transform: translateX(-50%);  /* 中央揃え */

}
.sodan_list{
    display: flex;
    justify-content: space-around;
    width: 80%;
    padding:3% 10%;
}

.sodan_list p{
    line-height: 2;
}

p.lease_group{
    width: 70%;
    margin: 50px auto;
    text-align: center;
}

p.lease_group img{
    width: 100%;
}

.lease_banner{
    background-image: url('../img/lease_banner.jpg'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}

.lease_banner h3{
    font-size: 28px;
}

/* public_works */


/* 共通 ヘッダー*/

.about_public_works_kv {
    width: 98%;
    max-width: 1200px;
    position: relative;
    padding-top: 5px; /* 画像スペース */
    margin-top: 50px;
    margin-left:auto ;
    margin-right: auto;
    background-image: url(../img/about_5.jpg);
    background-size: 70% auto;  /* 画像を70%に縮小して右側に配置 */
    background-position: right center; /* 画像を右寄せに */
    background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
    background-color: #fff; /* 空白部分の背景色（必要に応じて変更） */
}


.about_public_works_kv h3 {
    font-size: 36px;
    font-weight: bold;
    position: relative;
}

.about_public_works_kv h3::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 10px;
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
}

.about_public_works_kv p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
}

.permit {
    display: flex;
    justify-content: space-between; /* 画像を横並び */
    gap: 40px; /* 画像間のスペース */
    padding: 20px;
    width: 50%;
    margin: auto;
}

.permit_item {
    border: 2px solid #00336C; /* 枠線の設定 */
    text-align: center;
    max-width: 300px; /* 各アイテムの最大幅 */
}

.permit_item img {
    width: 100%; /* 親要素にフィット */
    height: auto;
}

.permit_description {
    margin-top: 10px;
    font-weight: bold;
    padding-bottom: 10px;
}

.features span{
    display: block;
    font-weight: bold;
}


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

/* top_about_l のスタイル */
.about_construction_work_l {
    width: 50%;
    position: relative;
    padding-top: 5px; /* 画像スペース */
    margin-left:20px;
}
/* h3タグに画像を挿入 */

/* ルール適用 */
.about_construction_work_l h3 {
    font-size: 24px;
    font-weight: bold;
    position: relative;
}

.about_construction_work_l h3::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 10px;
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
}

/* pタグ1 - 太字 */
/* ルール適用 */
.about_construction_work_l p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
}

/* pタグ2 - 通常 */
.about_construction_work_l p:nth-of-type(2) {
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5em;
}

.about_construction_work_r{
    width: 45%;
}

.about_construction_work_r > img{
    width: 100%;
}

.about_construction_work_r .cw_small_img{
    display: flex;
    justify-content: space-between;
}

.about_construction_work_r .cw_small_img img{
    width: 49%;
    margin-top: 2%;
}



.about_construction_work_l h5:nth-of-type(1){
    margin-top: 50px;
}

.about_construction_work_l h5{
    background-color: #00336C;
    color: white;
    display: inline-block;
    font-size: 16px;
    padding: 10px;
    width: 150px;
    text-align: center;
}

.about_construction_work_l p:nth-of-type(3),
.about_construction_work_l p:nth-of-type(4),
.about_construction_work_l p:nth-of-type(5) {
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5em;
    margin-top: 10px;
    margin-left: 1em;
    margin-bottom: 20px;
}


/* company */

/* 共通 ヘッダー*/

.about_company_kv {
    width: 98%;
    max-width: 1200px;
    position: relative;
    padding-top: 5px; /* 画像スペース */
    margin-top: 50px;
    margin-left:auto ;
    margin-right: auto;
    /* background-image: url(../img/about_5.jpg); */
    background-size: 70% auto;  /* 画像を70%に縮小して右側に配置 */
    background-position: right center; /* 画像を右寄せに */
    background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
    background-color: #fff; /* 空白部分の背景色（必要に応じて変更） */
}


.about_company_kv h3 {
    font-size: 36px;
    font-weight: bold;
    position: relative;
}

.about_company_kv h3::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 10px;
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
}

.about_company_kv p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
}

.about_company_kv p:nth-of-type(2) img {
 width: 150px;
 position: absolute;
}

.company_overview {
    max-width: 800px;
    margin: 100px auto 0;
}

.section_title {
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.section_title .bullet img{
    margin-right: 8px;
    height: .5em;
    line-height: 1em;
}


.overview_table {
    width: 100%;
    border-collapse: collapse;
}

.overview_table th {
    text-align: left;
    font-weight: bold;
    padding: 25px;
    width: 25%;

}

.overview_table td {
    padding: 25px;

    width: 75%;
    line-height: 2;
}


.overview_table tr{
    border-bottom: 1px solid #00336C;
}

.overview_table tr:last-child th, 
.overview_table tr:last-child td {
    border-bottom: none;
}


.about_contact_kv{
    margin-top: 100px;
}

.contact_tel_area{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.about_contact_kv > p{
    margin-top: 50px;
    text-align: center;
    line-height: 2;
}

.contact_form {
    padding: 30px;
    max-width: 500px;
    width: 90%;
    margin: 50px auto;
}

.form_group {
    margin-bottom: 20px;
    display: flex;

}

.form_group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
    width: 30%;
}

.form_group .required {
    background: #003366;
    color: #fff;
    font-size: 0.5em;
    padding: 3px 8px;
    border-radius: 5px;
    margin-left: 5px;
}

.form_group input,
.form_group select,
.form_group textarea {
    width: 65%;
    padding: 10px;
    border: 1px solid #003366;
    border-radius: 5px;
    font-size: 1em;
}

.form_group select {
    appearance: none; /* カスタムスタイル */
    background: #fff url('down-arrow.png') no-repeat right 10px center;
    background-size: 20px;
    width: 65%;
}

.form_group textarea {
    resize: none;
}

.form_submit {
    text-align: center;
}

.form_submit button {
    background: #003366;
    color: #fff;
    padding: 15px 0;
    width: 100%;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.form_submit button:hover {
    background: #002244;
}

/* recruit */
.recruit_kv{
    position: relative;
    background-image: url(../img/recruit_kv.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 80vh;
    margin: auto;
}

.recruit_kv h2{
    position: absolute;
    bottom: 20px;
    right: 10px;
    font-size: 36px;
    line-height: 1.8;
}

/* 特定のテーブル用スタイル */
.job_table {
    max-width: 600px;
    margin: 0 auto;
}

.job_table .job_listing {
    width: 100%;
    border-collapse: collapse;
}

.job_table .job_listing th {
    text-align: left;
    font-weight: bold;
    padding: 10px;
    width: 30%;
}

.job_table .job_listing td {
    padding: 10px;
}

.job_table .job_listing tr:last-child td, 
.job_table .job_listing tr:last-child th {
    border-bottom: none;
}

.job_table .job_listing th, 
.job_table .job_listing td {
    vertical-align: top;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .job_table {
        width: 100%;
    }
    .job_table .job_listing th, 
    .job_table .job_listing td {
        display: block;
        width: 100%;
    }
}

.job_bd{
    border-bottom: 1px solid #002244;
}


/* about_works_kv */


.about_works_kv {
    width: 98%;
    max-width: 1200px;
    position: relative;
    padding-top: 5px; /* 画像スペース */
    margin-top: 50px;
    margin-left:auto ;
    margin-right: auto;
    background-image: url(../img/about_6.jpg);
    background-size: 70% auto;  /* 画像を70%に縮小して右側に配置 */
    background-position: right center; /* 画像を右寄せに */
    background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
    background-color: #fff; /* 空白部分の背景色（必要に応じて変更） */
}


.about_works_kv h3 {
    font-size: 36px;
    font-weight: bold;
    position: relative;
}

.about_works_kv h3::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 10px;
    height: 10px;
    background-image: url('../img/hex.png'); /* 画像のパスを指定 */
    background-size: cover;
    background-position: center;
}

.about_works_kv p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
}

.about_works_r{
    width: 60%;
}

.about_works_r img{
    width: 30%;
}

.contact_form h2{
    text-align: center;
    font-size: 18px;
    margin-bottom:40px;
    letter-spacing: -1px;
    line-height: 1.5;
}
/* レスポンシブ */

/* タブレット対応（1200px以下） */
@media (max-width: 1200px) {
    
            /* メニュー全体を縦並びに */
    .menu {
        display: none; /* デフォルトで非表示（ハンバーガークリックで表示） */
        flex-direction: column;
        align-items: center;
        width: 100%;
        background: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        height: 100vh; /* 全画面を覆う */
        padding-top: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        overflow-y: auto; /* スクロール可能に */
    }

    /* メニューのリストを縦並びに */
    .menu ul {
        flex-direction: column;
        width: 100%;
        text-align: center;
        padding: 0;
    }

    /* 各メニュー項目を幅いっぱいに */
    .menu ul > li {
        width: 100%;
        padding: 15px 0;
        font-size: 15px;
        margin: auto;
    }

    .menu ul > li:nth-child(1),
    .menu ul > li:nth-child(3){
        color:orange;
    }

    .menu ul > li:nth-child(2),
    .menu ul > li:nth-child(4){
        font-size: 13px;
    }


    /* サブメニューを最初から開いた状態に */
    .menu ul ul {
        position: static;
        transform: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        width: 50%;
        display: block; /* クリックなしで常に表示 */
        text-align: center;
        box-shadow: none;
        padding: 0;
        margin: auto;
    }

    /* サブメニューのアイテムを縦並びに */
    .menu ul ul li {
        width: 100%;
        padding: 5px 0;
        font-size: 13px;
        text-align: center;
    }

    .menu ul ul li:hover{
        color: orange;
    }

    /* 画像を非表示 */
    .menu ul ul li a img {
        display: none;
    }

    /* メニューが開いたときにサブメニューも開いたまま */
    .menu.active ul ul {
        display: block;
    }
   
    /* メニューを開いた時に表示 */
    .menu.active {
        display: flex;
    }

    /* ハンバーガーボタンを表示 */
    .hamburger {
        display: flex;
    }

    .menu ul > li.drop::after {
        display: none;
    }

    .top_about {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .top_our_business {
        width: 90%;
    }

    .top_our_strong {
        width: 90%;
    }

    section.banner {
        width: 90%;
    }

    .top_recruit {
        width: 90%;
    }

    .top_about_l p br{
        display: none;
    }

    .strong_point_list ul {
        grid-gap: 0px;
    }

    .strong_point_list ul li h4 {
        font-size: 15px;
    }

    .banner_r_info_catch p:first-of-type {
        font-size: 16px;
    }

    .banner_r_info_catch p:nth-of-type(2) {
        font-size: 16px;
        font-weight: bold;
        margin-top: 15px;
    }

    .banner_r_info_company p:first-of-type {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .banner_r_info_catch p:nth-of-type(3) {
        font-weight: bold;
        margin-top: 15px;
        font-size: 10px;
    }

    .top_recruit ul li {
        width: 30%;
    }

    .top_news {
        width: 90%;
    }

    .news-item {
        width: 90%;
    }

    .footer-links-group li a {
        font-size: 9px;
    }

    .footer-links-group li {
        margin-bottom: 3px;
    }

    .footer-links-group {
        min-width: 20%;
    }

    .footer_ad {
        width: 20%;
    }

    .footer-container {
        width: 90%;
    }

    .about_company_kv p:nth-of-type(2) img {
        width: 80px;
        position: absolute;
        right: 0;
        top: 0;
       }

}

/* スマートフォン対応（767px以下） */
@media (max-width: 767px) {
    header img.logo {
        height: auto;
        width: 150px;
    }

    .hamburger {
        cursor: pointer;
        width: 35px;
        height: 30px;
        flex-direction: column;
        justify-content: space-between;
        position: fixed;
        right: 0;
        z-index: 1001;
        margin-right: 30px;
    }
    .caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 2rem;
        color: white;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        opacity: 0;
        animation: fadeIn 2s ease-in forwards;
        font-size: 28px;
        letter-spacing: .1em;
        line-height: 1.4em;
        width: 90%;
    }

    .slide {
        position: absolute;
        width: 100%;
        height: 90vh;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 1.5s ease-in-out;
    }

    header {
        position: relative;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f4f4f4;
        /* max-width: 1200px; */
        width: 100%;
        margin: auto;
        height: 10vh;
    }
    
    .menu ul ul li a p {
        margin-top: 5px;
    }

    .menu ul > li {
        width: 100%;
        padding: 5px 0px;
        font-size: 15px;
        margin: auto;
    }
    .top_about {
        flex-wrap: wrap;
    }

    .top_about_l {
        width: 100%;
    }
    .top_about_l p a {
        margin-top: 25px;    
    }

    .top_about_r {
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-top: 30px;
    }

      .business_list img {
        width: 100%;
    }
    section.banner {
        max-width: 1200px;
        display: flex;
        margin: auto;
        flex-wrap: wrap;
    }
    .banner_r, .banner_l {
        width: 100%;
        position: relative;
    }

    .top_recruit ul li {
        width: 40%;
    }
    .top_recruit ul li a {
        display: block;
        font-size: 10px;
    }
    .news-content {
        font-size: 10px;
        margin-left: 20px;
        text-align: left;
        flex-grow: 1;
    }

    .menu.active {
        display: flex;
        position: fixed;
    }

    .top_links_li {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
    }

    .top_links_li li {
        display: flex;
        flex-direction: column;
        text-align: left;
        width: 100%;
        margin: 20px;
    }

    .footer-container {
        width: 90%;
        flex-direction: column;
    }

    .footer_ad {
        width: 100%;
    }
    .footer-links-groups {
        display: flex;
        justify-content: space-between;
        gap: 40px;
        flex-direction: column;
        width: 100%;
    }

    .footer-links {
        text-align: left;
        width: 100%;
    }

    .about_new_construction_work_kv h3 {
        font-size: 24px;
    }

    .about_new_construction_work_kv p:nth-of-type(1) {
        font-size: 16px;
        font-weight: bold;
        margin: 5px 0;
    }

    .about_catch {
        max-width: 1200px;
        margin: 50px auto;
        display: flex;
        flex-wrap: wrap;
    }
    .about_catch_img {
        display: flex;
        position: relative;
        width: 80%;
        height: auto;
        object-fit: cover;
    }

    .about_catch_txtarea {
        width: 90%;
        display: block;
        margin-top: 150px;
        margin-left: auto;
        margin-right: auto;
    }

    .about_catch_img {
        display: flex;
        position: relative;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .about_features {
        margin-top: 100px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }

    .about_features br {
        display: none;
    }

    .about_rl {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin: 100px auto 0;
        flex-wrap: wrap;
        width: 90%;
    }
    .about_rl > p {
        width: 100%;
        text-align: center;
    }
    .about_r {
        width: 100%;
        margin-top: 20px;
    }

    .about_r h4 {
        background-color: #00336C;
        color: white;
        font-size: 18px;
        display: block;
        padding: 10px;
        text-align: center;
        margin: auto;
    }

    .about_renovation_4works {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 20px;
        flex-wrap: wrap;
    }

    .work_item {
        text-align: center;
        max-width: 45%;
    }


    .about_catch_txtarea h3 {
        line-height: 2;
        font-size: 20px;
        font-weight: bold;
    }

    .permit {
        display: flex;
        justify-content: space-between;
        gap: 40px;
        padding: 20px;
        width: 90%;
        margin: auto;
    }

    .about_construction_work {
        max-width: 1200px;
        margin: 100px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        width: 90%;
    }
    .about_construction_work_l {
        width: 100%;
        position: relative;
        padding-top: 5px;
        margin-left: 0px;
    }

    .about_construction_work_r {
        width: 100%;
    }

    .feature_lease {
        display: flex
    ;
        justify-content: space-between;
        gap: 20px;
        padding: 20px;
        flex-wrap: wrap;
    }


    .lease_item {
        text-align: center;
        max-width: 250px;
        margin: auto;
    }

    .description {
        margin-top:-1px;
        line-height: 1.8;
        background-color: #002244;
        color: white;
    }
    
    .lease_soudan {
        position: relative;
        border: 1px solid #00336C;
        margin: 100px auto;
        width: 90%;
    }
    .sodan_list {
        display: flex;
        justify-content: start;
        width: 90%;
        padding: 3% 5%;
        flex-wrap: wrap;
        margin-left: 60px;
    }

    .sodan_list br{
        display: block;
    }

    p.lease_group {
        width: 96%;
        margin: 50px auto;
        text-align: center;
    }

    .lease_banner h3 {
        font-size: 12px;
    }

    .lease_banner {
        background-image: url(../img/lease_banner.jpg);
        background-size: cover;
        background-position: center;
        height: 200px;
        display: flex
    ;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
    }
    .about_construction_work_l h3 {
        font-size: 18px;
        font-weight: bold;
        position: relative;
    }

.about_construction_work_l p:nth-of-type(1) {
    font-size: 14px;
    font-weight: bold;
    margin: 20px 0;
}
.company_overview {
    max-width: 800px;
    margin: 100px auto 0;
    width: 90%;
}
.about_company_kv {
    width: 90%;
}
.overview_table th {
    text-align: left;
    font-weight: bold;
    padding: 10px;
    width: 25%;
}
.about_contact_kv > p {
    margin-top: 50px;
    text-align: center;
    line-height: 2;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.about_contact_kv > p br{
    display: none;
}

.form_group {
    margin-bottom: 20px;
    display: flex
;
    flex-wrap: wrap;
}

.form_group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
    width: 100%;
}
.form_group input, .form_group select, .form_group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #003366;
    border-radius: 5px;
    font-size: 1em;
}
.menu {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    padding-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto;
}

.banner_l p a {
    background-color: #00336C;
    font-size: 13px;
    padding: 5px 15px;
    border-radius: 5px;
}
.contact_btn {
    display: flex
;
    align-items: center;
    background-color: #00336C;
    color: #fff;
    text-decoration: none;
    padding: 15px 0px;
    transition: all 0.3s ease;
    width: 300px;
    justify-content: center;
}
.top_news_title p {
    font-size: 13px;
    margin: 5px 0 0;
    color: #555;
}

.about_company_kv p:nth-of-type(2) img {
    width: 80px;
    position: absolute;
    right: 0;
    top: 0;
   }
   
}

/* 小さなスマホ（480px以下） */
@media (max-width: 480px) {

    .about_catch_txtarea h3 {
        line-height: 2;
        font-size: 18px;
        font-weight: bold;
    }

    .work_item p {
        margin-top: 10px;
        font-size: 12px;
        color: #333;
    }
    .contact_form h2{
        text-align: center;
        font-size: 16px;
        margin-bottom:40px;
        letter-spacing: -1px;
        line-height: 1.5;
    }

}