@charset "UTF-8";

body {
    font-family: "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Arial, sans-serif;
    margin: 0;
    /* 余白をなくす */
    padding: 0;
    /* 余白をなくす */

}
/* PC用レイアウト */
/*画面幅の一括調整*/
.container {
    margin: 0 auto;
    max-width: 1536px;
}

/*ロゴ＆メニュー*/

header {
    display: flex;
    /*ロゴとulを横に並べる*/
    height: 120px;
}

.companylogo {
    margin-top: 20px;
    /* 上の余白 */
    margin-left: 30px;

}

.telnumber {
    text-align: right;
    margin-top: 25px;
    /* 上の余白 */
    margin-right: 30px;
}



/*ナビゲーションメニュ */
nav {
    margin: 0 auto;
}

.nav__menu {

    text-decoration: none;
    /* 下線表示なし */
    position: relative;
    /* relative(相対位置)を指定(ナビアニメーションのため) */
    margin-top: 25px;
    /* 上の余白 */
    list-style: none;
    /* 線幅なし */
    display: flex;
    /* 横並び */


}

.nav__item {
    text-align: center;
    /* 文字の中央寄せ */
    font-size: 18px;
    flex: 1 0 auto;
    /* flevboxの拡大比率,縮小比率,表示方法　設定 */

}

nav .nav__menu .nav__item a {
    display: block;
    text-decoration: none;
    color: #333;
    text-align: center;
    padding: 8px;
    margin: auto;
}


/* ナビアニメーション */
/* 複数タグ選択時の表記確認 */
nav .nav__menu .nav__item a::after {
    /* 下線表示アニメーション */
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: #49AEFE;
    /* ポイント表示の下線色 */
    transform: scale(0, 1);
    /* 線表示非表示 */
    transition: .3s;
}

nav .nav__menu .nav__item a:hover {
    color: #49AEFE;
    /* ポイントで文字色変更 */
}

nav .nav__menu .nav__item a:hover::after {
    transform: scale(1, 1);
    /* 下線の拡大縮小 */
}

nav .nav__menu .nav__item a.current {
    /* 表示ページのナビ設定　*/
    color: #3885C2;

}




/* topページ */
.top {
    position: relative;
    height: auto;

}

.topsheetimg {

    width: 100%;
}

.toptext {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%); /* 垂直方向・水平方向ともに中央に配置 */
  white-space: nowrap;
  color: white;
  font-size: 30px;
  font-weight: bold;
  text-shadow: 6px 6px 8px rgba(0, 0, 0, 0.7);
    /* 文字の影 */
}

/* デフォルト（PC・タブレット）では p.sp-only を非表示にする */
.sp-only {
    display: none;
}

/* ↑↑　topページ ↑↑　*/


/* 各ページ共通画像タイトル部分 */
/* 各ページタイトル部分 */
.pagetitle {
    position: relative;
    height: 150px;

}

.name2 {
  position: absolute;
  /* topとleftを50%に設定 */
  top: 50%; 
  left: 50%;
  /* transformで要素自身の幅・高さの半分だけ戻すことで完全に中央に配置 */
  transform: translate(-50%, -50%); 
    color: rgb(255, 255, 255);
    /* 文字色を調整 */
    font-size: 30px;
    font-weight: bold;
    text-shadow: 6px 6px 8px rgba(0, 0, 0, 0.7);
    /* 文字の影 */
}



.backimg {
    width: 100%;
}

/* ↑↑各ページ共通画像タイトル部分↑↑ */

/* ↓↓各ページ↓↓ */


/* 会社概要ページ */
table.table1 {
    background-color: #ebf2fcb0;
    /* 背景色指定 */
    margin: 5% auto;
    width: 60%
}

th.th1 {
    background-color: #162842e0;
    /* 背景色指定 */

    color: #f2f2f2;
    font-weight: normal;
    /* 文字の太さ指定 */
    width: 200px;
    /* 幅指定 */

}

td.td1 {
    width: 480px;
    /* 幅指定 */
    padding: 20px;
    /* 余白指定 */
    line-height: 1.5;
    /* 文字上下幅 */
}

th.th1,
td.td1 {
    border: 2px solid rgb(255, 254, 254);
    /* 線の色とスタイル */
}

.bsp-only {
  display: none !important; /* スマホ専用要素を非表示にする */
}

.bpc-only {
  display: block !important; /* PC専用要素を通常のセル表示にする */
}

/* 事業紹介 */
.jigyoblock {
    margin-left: 30%;
}

.jigyoblock h1 {
    font-size: 16px;
}

.jigyoblock p {
    font-size: 14px;
}



/* 施工事例 */

.imagelist {
    display: flex;       /* Flexboxを有効にする */
    flex-direction: column; /* 要素を縦方向に並べる */
    gap: 20px;           /* 各画像ブロック間の隙間（任意） */
    /* width: fit-content; */ /* 必要に応じて幅を調整 */
}

.koujiblock {
    /* 上、右、下、左 */
    margin: 5% 10% 5% 15%;
}

.koujiimage,.caseyoko {
    margin-right: 2%
}

.koujitext {
    display: inline-block;
    /* テキストを画像の横に */
    vertical-align: top;
    /* テキストの垂直方向の位置指定 */
}

.koujiblock h1 {
    font-size: 18px;
    background-color: #95b1e49d;
    padding-left: 3%;
}

.koujiblock p {
    font-size: 19px;
}


/* 協力会社・求人 */
.contacttext {
    text-align: center;
}

/* フッター */
footer {
    height: 100px;
    background: #0e2f75d2;
    color: white;
    font-size: 15px;
}

.footerblock {
    padding: 7px 0 0 15px;
}

.footerlist {
    line-height: 0.7;
}

/* ====================================================== */
/* タブレット用レイアウト (画面幅 1024px 以下で適用) */
/* ====================================================== */
@media screen and (max-width: 1024px) {

    /* 全体の余白調整 */
    .container {
        padding: 0 10px; /* 左右に少し余白を追加して端の文字切れを防ぐ */
    }

    /* ヘッダー周り */
    header {
        height: auto; /* 高さを自動調整 */
        flex-direction: column; /* ロゴとメニューを縦方向に並べる */
        align-items: center; /* 中央揃え */
    }

    .compamylogo {
        margin: 10px 0; /* 上下の余白を調整 */
    }

    .telnumber {
        text-align: center; /* 電話番号を中央に配置 */
        margin: 10px 0;
    }

    /* ナビゲーションメニュー */
    .nav__menu {
        flex-wrap: wrap; /* 画面幅が狭い場合にメニュー項目を折り返す */
        margin-top: 0;
    }

    .nav__item {
        font-size: 16px; /* フォントサイズを少し小さく */
        flex: 1 1 50%; /* 2列表示にする (50%の幅を指定) */
        box-sizing: border-box; /* paddingやborderを幅に含める */
    }

    nav .nav__menu .nav__item a {
        padding: 15px 8px; /* タッチしやすいようにパディングを増やす */
    }

    /* トップページのテキスト位置調整 */
    .toptext {
        font-size: 18px;
        /* タブレットの画面比率に合わせてtopの位置を少し調整する場合があります */
        /* top: 40%; など */
    }

    /* 各ページ共通タイトル */
    .name2 {
        font-size: 24px; /* タイトル文字を少し小さく */
        top: 45%; /* 位置を調整 */
    }

    /* 会社概要テーブル */
    table.table1 {
        width: 90%; /* 画面幅に合わせてテーブル幅を広げる */
        margin: 3% auto;
    }

    th.th1, td.td1 {
        display: block; /* thとtdを縦積みに変更（レスポンシブ対応の基本） */
        width: auto; /* 幅指定を解除 */
        padding: 10px;
    }

    th.th1 {
        background-color: #162842e0; /* 背景色は維持 */
    }

    /* 事業紹介 */
    .jigyoblock {
        margin-left: 10px; /* 左マージンを減らす */
        padding: 0 10px;
    }

    /* 施工事例 */
    .koujiblock {
        margin: 3%;
    }

    .koujitext {
        display: block; /* 画像とテキストを縦積みに変更 */
        padding-top: 10px;
    }
}



/* ============================================== */
/* ここからスマートフォン用レイアウト (画面幅 768px以下) */
/* ============================================== */
@media screen and (max-width: 768px) {

    /* 全体のコンテナ幅は画面いっぱいに使う */
    .container {
        max-width: 100%;
        padding: 0 10px; /* 左右に少し余白 */
    }

    /* ヘッダー周りのレイアウト変更 */
    header {
        display: block; /* ロゴとメニューを縦積みに変更 */
        height: auto; /* 高さを自動調整 */
        padding-bottom: 10px;
        text-align: center; /* 要素を中央寄せ */
    }

    .compamylogo {
        margin: 10px auto 0 auto; /* 中央寄せ */
    }

    .telnumber {
        text-align: center; /* 中央寄せ */
        margin: 10px auto 0 auto;
    }

    /* ナビゲーションメニューの調整 */
    .nav__menu {
        display: block; /* 各メニュー項目を縦積みに変更 */
        margin-top: 20px;
    }

    .nav__item {
        font-size: 16px;
        border-bottom: 1px solid #eee; /* メニュー項目の区切り線 */
    }

    nav .nav__menu .nav__item a {
        padding: 10px 8px; /* タップしやすいように余白を広げる */
        text-align: center; 
    }

    /* topページ タイトル文字サイズ調整 */
    .toptext {
        font-size: 11px;
    }



    /* PC・タブレット用の要素をスマホでは完全に非表示にする */
    .pc-only {
        display: none !important; 
    }

    /* スマホ用の要素をスマホでは表示する（ブロック要素として配置） */
    .sp-only {
        display: block !important; 
        
        /* h1タグではなくpタグとして中央揃えするためのスタイル */
        font-size: 26px;          /* スマホ用の適切なフォントサイズに調整してください */
        white-space: normal;        /* スマホでは折り返しを許可する */
        text-align: center;         /* 中央寄せ */

        /* 必要ならマージンなどをここで調整 */
        margin: 0;
        padding: 0;
        color: white;  /* toptext内のテキスト色（PC設定の継承） */
        font-weight: bold;  /* PC設定の継承 */
    }

    /* 必要に応じて、その他のスマホ向け調整をここに追加 */
    
    /* 例：トップ画像内の文字位置調整（toptextは元々ある設定を利用） */
    .toptext {
        /* 左右に5%ずつの余白を設定する例 */
        /* これにより、画面幅の90%が文字表示領域として使えます */
        width: 90%; 
        left: 5%; /* leftを50%から変更し、transformを打ち消す */
        transform: translateY(-50%); /* 垂直方向の中央配置のみ維持 */
        
        /* または padding を使用する方法 */
        /* padding: 0 10px; */ /* 左右に10pxの余白 */
    }


    /* 各ページ共通タイトル部分 */
    .pagetitle {
        height: 150px; /* 高さを縮小 */
    }

    .name2 {
        font-size: 18px; /* 文字サイズを縮小 */
        top: 5%;

    }

    /* 会社概要ページのテーブル */
    table.table1 {
        width: 95%; /* 幅を画面いっぱいに */
         margin-top: -20px; /* 例: 上に20ピクセル移動させる */
    }
    
    th.th1, td.td1 {
        display: block; /* スマホでは項目名と内容を縦積みに */
        width: auto;
        padding: 10px;
        text-align: left;
    }

    th.th1 {
        background-color: #162842e0;
        color: #f2f2f2;
    }

  .bpc-only {
    display: none  !important;  /* PC専用要素を非表示にする */
  }

  .bsp-only {
    display: block !important; /* スマホ専用要素を表示にする */
    /* td要素のデフォルト表示は table-cell です */
  }

    /* 事業紹介 */
    .jigyoblock {
        margin-left: 5%; /* 左余白を調整 */
        margin-right: 5%;
        margin-top: -20px; /* 例: 上に20ピクセル移動させる */
    }

    /* 施工事例（画像とテキストを縦積みに） */
    .koujiimage {
        padding: 0;
        width: 100%; /* 画像幅を画面いっぱいに */
    }

    .koujitext {
        display: block;
        padding: 5%;
    }

    /* フッター */
    footer {
        height: auto;
        padding: 20px 0;
    }
    
    .footerblock {
        padding: 0 15px;
        text-align: center;
    }
    
    .footerlist {
        line-height: 1.5; /* 行の高さを調整して見やすく */
    }
}