@charset "utf-8";

/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");
@import url("slide.css");


/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;padding: 0;
	font-size: 13px;	/*基準となるフォントサイズ。下の方にある「画面幅900px以上」で基準を大きなサイズに再設定しています。*/
	height: 100%;
}

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #f7f7f7;	/*背景色*/
	color: #333;		/*全体の文字色*/
	line-height: 2;		/*行間*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定 */
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*section全般の設定*/
section + section {
	padding-top: 50px;	/*sectionの間に空けるスペース*/
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #333;	/*文字色*/
	transition: 0.3s;
}

a:hover {
	opacity: 0.6;	/*マウスオン時に60%の透明度にする*/
}


/*containerブロック
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}


/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	display: flex;			/*flexボックスを使う指定*/
	align-items: center;	/*垂直揃えの指定。上下中央に配置されるように。*/
	padding: 30px 20px;		/*上下、左右へのヘッダー内の余白*/
	background: #f7f7f7;		/*背景色*/
	color: #fff;			/*文字色*/
}

/*ヘッダーのリンクテキストの文字色*/
header a {
	color: #fff;
}

/*ロゴ画像*/
header #logo img {display: block;}
header #logo {
    margin: 0 0 0 50px;
    order: 1;
    width: 300px; /* 💡 300pxから180pxくらいに小さくする */
}

#header-icon {
    order: 2;
    margin-left: auto; /* 右端に寄せる */
    text-align: right;
    padding-right: 20px;
}

.header-contact {
    display: flex;
    flex-direction: column; /* 上下に並べる */
    align-items: flex-end;
}

/* ヘッダーの24時間対応ラベルの設定 */
.contact-label {
    display: block;        /* 💡 電話番号の上に配置 */
    font-size: 1.4rem;     /* 💡 文字を大きく（元の1.1倍〜1.2倍くらい） */
    font-weight: bold;     /* 💡 太字にして目立たせる */
    color: #d9534f;        /* 💡 もし目立たせたいなら、少し注意を引く色に変えるのもアリです（今のままなら削除OK） */
    margin-bottom: 2px;    /* 電話番号との隙間 */
    line-height: 1.2;
}

/* ついでに電話番号の方も少し調整してバランスを取る場合 */
.contact-number {
    font-size: 1.8rem;     /* 電話番号も少しだけ大きく */
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.contact-number i {
    font-size: 1.2rem;
    margin-right: 5px;
    color: rgb(11, 114, 67); /* 💡 アイコンだけ深い緑にする */
}

/*header内の右側に並んでいるアイコン類。FontAwesomeを使用しています。
---------------------------------------------------------------------------*/
/*アイコンを囲むブロック*/
#header-icon {
	order: 2;			/*表示させる順番。「#menubar_hdr」「#logo」「#header-icon」それぞれに指定しており、数字の「小さな順」に左から並びます。*/
	font-size: 18px;	/*アイコンのサイズ。文字サイズで指定します。*/
	margin-left: auto;	/*右側に寄せる為*/
}

/*１個あたりのアイコン設定*/
#header-icon i {
	padding: 5px;	/*余白*/
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
    position: fixed;
    z-index: 101;
    cursor: pointer;
    right: 15px;       /* 💡 leftからrightに変更 */
    top: 15px;         /* 💡 位置を微調整 */
    padding: 10px 8px;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #111;  /* 背景を黒にして目立たせる */
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 2px solid #fff;	/*線の幅、線種、色*/
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 26px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(6px, 7px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(6px, -7px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*menubarブロック初期設定
---------------------------------------------------------------------------*/
#menubar {height: 0px;overflow: hidden;}
#menubar ul {list-style: none;margin: 0;padding: 0;}


/*小さな端末用の開閉ブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
#menubar.db {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 180px;		/*メニューブロックの幅*/
	height: 100%;
	padding: 70px 0 0;	/*上、左右、下へのブロック内の余白*/
	background: rgba(0,0,0,0.9);		/*背景色。0,0,0は黒の事で0.9は色が90%出た状態の事。*/
	color: #fff;						/*文字色*/
	animation: animation1 0.2s both;	/*animation.cssの、animation1を実行する。0.2sは0.2秒の事。*/
}

/*メニュー１個あたりの設定*/
#menubar.db a {
	color: #fff;	/*文字色*/
}

/*現在表示中のメニュー設定（current）*/
#menubar.db li.current a {
	background: #666;	/*背景色*/
}


/*メインメニュー（小さな端末、大きな端末共通設定）
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar li {
	margin-bottom: 30px;	/*下に空けるスペース。メニュー同士の上下間の余白です。*/
	font-size: 0.8em;		/*文字サイズを80%に。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる設定*/
}
#menubar a {
	display: block;text-decoration: none;
	text-align: center;	/*テキストを中央に*/
	padding: 2px 5px;	/*上下、左右への余白*/
}


/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {	
	flex: 1;
	margin: 50px;	/*ボックスの外側へ空けるスペース*/
}


/* 1. 外側の「覗き窓」：ここでサイズと位置をガッチリ固定 */

main img {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}


/*mainブロック内のh2タグ*/
main h2 {
	margin: 0;
	margin-bottom: 20px;
	font-weight: normal;
	border-bottom: 4px solid #eee;	/*下線の幅、線種、色。ベースカラーです。下のspanのborder-bottomと数字を合わせておく。*/
}

/*mainブロック内のh2タグに下線を引くための指定。*/
main h2 span.uline {
	display: inline-block;position: relative;
	border-bottom: 4px solid #0b7243;	/*下線の幅、線種、色。アクセントカラー。上のmain h2と数字を合わせておく。*/
	bottom: -4px;		/*下からの配置場所指定。上にある２つのborder-bottomと重ねる為の指定、数字を合わせてから冒頭にマイナス。*/
	padding: 0 20px;	/*上下、左右への余白。テキストの両脇に少し余裕をもって線を引くため。*/
}

/*mainブロック内のh3タグ*/
main h3 {
	margin: 0;
	margin-bottom: 20px;
	font-weight: normal;
	background: #fff;		/*背景色*/
	border: 1px solid #eee;	/*枠線の幅、線種、色*/
	padding: 3px 20px;		/*ボックス内の余白*/
	border-radius: 3px;		/*角丸のサイズ*/
}

/*mainブロックのpタグ*/
main p {
	margin: 0 20px 30px;	/*上、左右、下へ空けるスペース*/
}

/*トップイントロ*/
/* 自己紹介エリアの文字装飾 */
.company-intro {
    padding: 20px 0;
    text-align: center; /* 💡 全体を中央に寄せて堂々とした印象に */
}

/* 「株式会社浜本クレーンとは」の見出し */
.company-intro h2 {
    font-size: 2.2rem;     /* 💡 かなり大きくして存在感を出す */
    line-height: 1.5;      /* 💡 行間をたっぷり取って読みやすく */
    font-weight: bold;
    color: #000;
    margin-bottom: 30px;
}

/* 本文の装飾 */
.company-intro p {
    font-size: 1.2rem;     /* 💡 標準より少しだけ大きく */
    line-height: 1.7;      /* 💡 行間をたっぷり取って読みやすく */
    color: #333;
    max-width: 900px;      /* 💡 横に広がりすぎないように制限 */
    margin: 0 auto 50px;        /* 💡 中央に配置 */
    text-align: left;      /* 💡 文章の左端は揃える（読みやすさ優先） */
}

/* 強調したい一文 */
.company-intro .catchphrase {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #a30000;
    margin-bottom: 20px;
    text-align: center;    /* 💡 キャッチコピーだけは中央に */
}

/* mainブロック内のh2タグ（事業紹介など） */
main h2 {
    margin: 50px 0 30px;    /* 上下にしっかり余白を取って独立させる */
    font-weight: bold;
    font-size: 2rem;        /* 文字を大きく */
    border-bottom: 4px solid #eee; /* ベースの細い線 */
    text-align: center;     /* 中央に配置して堂々と */
}

/* 下線をクレーンの緑で強調する指定 */
main h2 span.uline {
    display: inline-block;
    position: relative;
    bottom: -4px;
    padding: 0 40px;        /* 💡 線の長さを少し広げて存在感を出す */
    letter-spacing: 0.2em;  /* 文字の間隔を広げて「タイトル感」を出す */
}

/*listブロック
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-container {
    display: flex;
    flex-direction: column;
	justify-content: space-around;
	gap: 2%; 
	flex-grow:1;
    width: 100%;           
    align-items: stretch;
}

/*１個あたりのボックス設定*/
.list {
    width: 100%;    /* 幅をいっぱいにする */
    padding: 20px;
    background: #fff;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
    max-width: 100%;
    margin: 0 auto 30px;  /*  */
}

/*ボックス内のh4タグ*/
.list h4 {
    margin: 30px auto 20px;       /* 下に余白をあけて、画像や文章と離す */
    text-align: center;
    color: #111;            /* 文字色を少し濃くしてクッキリさせる */
    font-size: 2.5rem;      /* 💡 文字サイズを大きく（元の約1.5倍強） */
    font-weight: bold;      /* 💡 太字にする */
    border-bottom: 2px solid #eee; /* 下にクレーンカラーの黄色い線を引く */
    display: table;           /* 線の長さを文字に合わせる */
    padding-bottom: 10px;
}

.list h4 a {
	color: #666;	/*リンクテキストの文字色*/
}

/*ボックス内のpタグ*/
.list p {
    font-size: 1.1em;
    line-height: 1.8; /* 💡 行間を少し広げると読みやすくなります */
    color: #444;      /* 💡 真っ黒より少しグレーにすると目が疲れにくいです */
    padding: 10px 20px;
    text-align: left;       
    max-width: 900px;       /* 💡 箱の横幅を「文章がちょうど収まるくらい」に絞る */
    margin: 0 auto;         /* 💡 絞った箱ごと、画面の真ん中に移動させる */
}

.list img {
    width: 100%;
    height: auto;
    object-fit: contain; /* 切り抜かない設定 */
	margin-top: 40px;
}

/* 車両リストの枠組み */

.spec-title {
    text-align: center;    /* 💡 文字を中央に */
    font-size: 1.2rem;     /* 少しだけ大きく */
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;   /* 表との間隔 */
    display: block;        /* 1行まるまる使う設定 */
}

.spec-list {
    background: #f9f9f9;    /* ほんのりグレーの背景 */
    border-left: 5px solid #a30000; /* 🏗️ クレーンカラーのアクセント線 */
    padding: 15px 20px;
    margin: 20px auto;
    max-width: 350px;       /* 💡 幅を絞ることで、左揃えのまま中央に配置 */
    text-align: left;       /* 💡 文字の左端を綺麗に揃える */
}

/* 項目ごとの設定 */
.spec-item {
    display: flex;
    justify-content: space-between; /* 💡 車種と台数を左右に振り分ける */
    border-bottom: 1px dashed #ccc; /* 点線で区切りを作る */
    padding: 5px 0;
    font-size: 1.1rem;
}

/* 数字（台数）の部分を強調 */
.spec-count {
    font-weight: bold;
    color: #111;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}

footer {
	font-size: 0.6rem;		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	background: #111;		/*背景色*/
	color: #fff;			/*文字色*/
	text-align: center;		/*内容をセンタリング*/
	padding: 10px;			/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {color: #fff;text-decoration: none;}

/*リンクテキストのマウスオン時*/
footer a:hover {color: #fff;}

/*著作部分*/
footer .pr {display: block;}

/* --- お問い合わせフォームのデザイン --- */

/* フォーム全体の囲み */
.contact-form {
    background: #fff;
    padding: 30px 40px;      /* 上下を少し詰めました */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin: 40px auto;       /* auto を入れて中央寄せに */
    max-width: 700px;        /* 💡 ここ！ 1000pxとかから 700px くらいに絞る */
}

.contact-form h2 {
    text-align: center;
    color: rgb(11, 114, 67); /* こだわりの深い緑 */
    margin-bottom: 10px;
    border-bottom: none;
}

.form-note {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 30px;
}

/* 各入力項目のまとまり */
.form-item {
    margin-bottom: 25px;
}

.label-title {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

/* 入力欄（テキスト、メール、電話、セレクト）の共通設定 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box; /* 幅の計算を正確に */
    background: #fafafa;
}

/* 名前の入力グループ（姓・名） */
.input-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

.sub-label {
    font-size: 0.8rem;
    color: #888;
}

/* 規約エリアの装飾 */
.form-agreement {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #eee;
    margin: 40px 0;
}

.policy-box {
    height: 150px;
    overflow-y: scroll; /* 💡 枠内でスクロールできるように */
    background: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.policy-box ul {
    padding-left: 20px;
    margin: 10px 0;
}

.checkbox-area {
    text-align: center;
    font-weight: bold;
}

.checkbox-area input {
    transform: scale(1.5); /* 💡 チェックボックスを少し大きく */
    margin-right: 10px;
    vertical-align: middle;
}

/* 送信ボタンの装飾 */

/* 共通のボタンデザイン（送信ボタン & 採用ページボタン） */
.btn-submit, 
.apply-btn {
    display: inline-block; /* 採用ページのリンクボタンをボタンらしく見せるために必須 */
    background: #0b7243 !important; /* 旦那様のグリーンを強制適用 */
    color: #fff !important;
    padding: 18px 60px;
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none; /* リンクの線を消す */
    text-align: center;
}

/* ホバー（マウスを乗せた時）の設定 */
.btn-submit:hover, 
.apply-btn:hover {
    background: #69bb84 !important; /* 少し濃い緑にして「押せる感」を出す */
    opacity: 0.9;
    color: #fff !important;
}

/* ボタンを中央に寄せるための親要素 */
.submit-area, 
.apply-btn-container {
    text-align: center;
    margin-top: 30px;
    width: 100%;
}

/* 📱 スマホ用の調整 */
@media screen and (max-width: 899px) {
    .contact-form {
        padding: 20px;
    }
    .input-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .btn-submit {
        width: 100%;
    }

.company-intro h2 {
        font-size: 1.5rem !important; /* 💡 1行に収まるサイズに微調整 */
        margin-bottom: 20px !important;
        border-bottom: 4px solid #eee !important; /* ベースのグレー線を復活 */
        display: block !important;
        overflow: visible !important; /* 線を重ねるために必要 */
    }

    /* 2. 緑色の短い線（span部分） */
    .company-intro h2 span.uline {
        display: inline-block !important;
        position: relative !important;
        border-bottom: 4px solid #0b7243 !important; /* アクセントの緑 */
        bottom: -4px !important;    /* グレーの線にピッタリ重ねる */
        padding: 0 10px !important;  /* 💡 スマホ用に左右の余白を少し詰めると1行に収まりやすい */
        white-space: nowrap !important; /* 💡 ここで改行を禁止 */
        width: auto !important;
    }

}

.recruit-hero {
        background: linear-gradient(rgba(255, 255, 255, 0.404), rgba(20, 136, 68, 0.603)), url('../images/hero-recruit.png'); /* 💡現場の写真を背景に */
        background-size: cover;
        color: #fff;
        padding: 80px 20px;
        text-align: center;
        margin-bottom: 40px;
    }
    .recruit-hero h2 { font-size: 2.5rem; margin-bottom: 10px; border:none; }
    
    .recruit-section { max-width: 900px; margin: 40px auto; padding: 0 20px; }
    .recruit-section h3 {
        color: rgb(11, 114, 67);
        border-left: 5px solid rgb(11, 114, 67);
        padding-left: 15px;
        margin-bottom: 20px;
    }

@media screen and (max-width: 900px) {
    .recruit-hero {
        /* 💡 50% 50% で「写真の真ん中」を常に中心に持ってくる */
        background-position: 50% 50% !important;
        /* 💡 高さを少し抑えて、横長の帯としての形を整える */
        padding: 40px 15px !important;
    }
}


    /* 募集要項テーブル */
    .recruit-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    .recruit-table th, .recruit-table td {
        border-bottom: 1px solid #eee;
        padding: 15px;
        text-align: left;
    }
    .recruit-table th { width: 30%; background: #f9f9f9; color: #333; }

    .apply-btn {
        display: block;
        width: fit-content;
        margin: 40px auto;
        padding: 20px 60px;
        background: #0b7243; 
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        border-radius: 50px;
        transition: 0.3s;
    }
    .apply-btn:hover { background: #0b7243; color: #fff; }


/* 写真の基本装飾 */
    .photo-frame {
        width: 100%;
        margin-bottom: 30px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .photo-frame img { width: 100%; height: auto; display: block; }

    /* メッセージ部分（写真と文字を並べる） */
    .message-area {
        display: flex;
        gap: 30px;
        align-items: flex-start;
        margin-bottom: 50px;
    }
    .message-area .photo { flex: 1; }
    .message-area .text { flex: 1.5; }

    /* スマホでは縦並びにする */
    @media screen and (max-width: 899px) {
        .message-area { flex-direction: column; gap: 15px; }
    }

/* スタッフ写真の横並び設定 */
.staff-photos {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.photo-item {
    flex: 1;
    margin: 0;
}

.photo-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    object-fit: cover; /* 💡 高さを揃えて綺麗に見せる */
}

.photo-item figcaption {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
    font-weight: bold;
}

/* 代表写真とメッセージのレイアウト設定 */
.message-area-with-photo {
    display: flex;
    gap: 30px; /* 写真と文字の間隔 */
    align-items: flex-start;
    margin-bottom: 50px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.president-photo {
    flex: 1; /* 写真の比率 */
    max-width: 300px; /* 写真が大きくなりすぎないように */
}

.president-photo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.message-text {
    flex: 2; /* 文字の比率 */
}

.message-text h3 {
    margin-top: 0;
    color: rgb(11, 114, 67);
}

/* スマホ用の調整：画面幅が狭い時は縦に並べる */
@media screen and (max-width: 899px) {
    .message-area-with-photo {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }
    .president-photo {
        max-width: 100%;
        margin-bottom: 20px;
    }
}

/* 事業紹介のフォトグリッド設定 */
/* 事業紹介のフォトグリッド：サイズ感を大きく、ゆったりさせる */
.work-photo-grid {
    display: flex;         /* 💡 gridからflexに変更して、並びをコントロールしやすくします */
    flex-wrap: wrap;       /* 折り返しを許可 */
    gap: 10px;             /* 写真同士の隙間を少し広げて、ゆとりを持たせる */
    margin-top: 25px;
    justify-content: center; /* 中央に寄せる */
}

.work-photo-grid img {
    /* 💡 ここがポイント：横幅を「45%（ほぼ半分）」にすることで、
       4枚あっても「2枚×2段」になり、1枚ずつが大きく表示されます */
    width: calc(50% - 10px); 
    max-width: 300px;      /* 大きくなりすぎない上限 */
    height: 400px;         /* 💡 高さを以前のサイズ（250px〜300pxくらい）に合わせる */
    object-fit: cover;     /* 写真の比率を保つ */
    border-radius: 8px;    /* 角の丸みを少し強めて柔らかい印象に */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 影を少しふわっとさせる */
}

/* スマホ用の調整 */
@media screen and (max-width: 600px) {
    .work-photo-grid img {
        width: 100%;       /* スマホでは1枚ずつドーンと大きく見せる */
        height: 220px;     /* スマホでの高さ */
    }
}

/* スマホで1枚ずつ大きく見せたい場合の設定（任意） */
@media screen and (max-width: 600px) {
    .work-photo-grid {
        /* もし「スマホだと2×2は小さいな」と思ったらここを 1fr に変えてください */
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    }
    .work-photo-grid img {
        height: 140px; /* スマホ用に少し高さを抑える */
    }
}

/* スマホでも横並びを維持する設定 */
@media screen and (max-width: 600px) {
    .work-photo-grid {
        display: flex;       /* 💡 縦にせず横並びをキープ */
        flex-direction: row; /* 横方向に並べる */
        justify-content: center;
        gap: 8px;            /* 隙間を少し詰めると並びやすいです */
        width: 100%;
    }

    .work-photo-grid img {
        /* 💡 スマホの時は1枚を 140px くらいまで小さくして並べます */
        width: 140px !important; 
        max-width: 45%;      /* 念のため、画面の半分を超えないように制限 */
        margin-bottom: 0;    /* 縦並び用の余白を消す */
    }
}
/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
#new {
	margin: 0;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	padding: 0 20px;	/*上下、左右へのボックス内の余白*/
}

/*日付(dt)、記事(dd)共通設定*/
#new dt,
#new dd {
	padding: 5px 0;		/*上下、左右へのボックス内の余白*/
}

/*日付(dt)設定*/
#new dt {
	width: 8em;	/*幅。8文字(em)分。※下の「900px以上」の端末用の設定に再設定があります。*/
}

/*日付の横のマーク（共通設定）*/
#new dt span {
	display: none;	/*小さな端末では非表示にしておく。*/
}

/*記事(dd)設定*/
#new dd {
	width: calc(100% - 8em);	/*「8em」は上の「#new dt」のwidthの値です。※下の「900px以上」の端末用の設定に再設定があります。*/
}



/*btnの設定
---------------------------------------------------------------------------*/
/*ボタンを囲むブロック*/
.btn {
	text-align: center;	/*内容をセンタリング*/
}

/*ボタン*/
.btn a,
.btn input {
	display: inline-block;text-decoration: none;border: none;
	border-radius: 3px;		/*角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 10px 40px;	/*上下、左右への余白。*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	font-size: 1rem;		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	background: #111;	/*背景色*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くする指定*/
	color: #fff;			/*文字色*/
	transition: 0.3s;
}

/*ボタンのマウスオン時（inputタグ使用時）*/
.btn input:hover {
	cursor: pointer;
	opacity: 0.6;	/*冒頭のリンクテキストのhoverと合わせました*/
}

/* --- 1. PC表示（基本の設定） --- */
.ta1 {
    width: 100% !important; /* 💡 枠いっぱいに広げる */
    max-width: 900px;       /* 💡 広がりすぎないよう上限を決める */
    margin: 20px auto;      /* 💡 autoで中央に配置 */
    border-collapse: collapse;
}

.ta1 th {
    width: 25%;             /* 見出しの幅 */
    background: #f0f4f0;    /* 薄いグリーンの背景 */
    padding: 20px;
    border: 1px solid #e0e0e0;
    text-align: left;
}

.ta1 td {
    width: 75%;
    padding: 20px;
    border: 1px solid #e0e0e0;
    background: #fff;       /* 内容は白背景 */
}

/* --- 2. スマホ表示（画面幅900px以下の時） --- */
@media screen and (max-width: 900px) {
    .ta1 {
        width: 100% !important;
        margin: 10px 0;
    }

    .ta1 tr, .ta1 th, .ta1 td {
        display: block;      /* 縦に並べる */
        width: 100% !important;
    }

    .ta1 th {
        border-bottom: none; /* 見出しの下線を消してスッキリ */
        padding: 10px 15px;
    }

    .ta1 td {
        padding: 10px 15px 20px;
    }

    /* Googleマップの調整 */
    .ta1 td iframe {
        width: 100% !important;
        height: 300px;
    }
}
/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.3);	/*背景色。0,0,0は黒の事で0.3は色が30%出た状態。*/
	width: 2em;			/*幅*/
	line-height: 2em;	/*高さ*/
}

/*マウスオン時*/
.pagetop a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒の事で0.8は色が80%出た状態。*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #560ea0 !important;}
.color-check, .color-check a {color: #ff5151 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;border: 1px solid #ccc;padding: 5px 20px;background: rgba(0,0,0,0.03);border-radius: 5px;margin: 5px 0;}
.ofx {overflow-x: hidden;}




/*---------------------------------------------------------------------------
ここから下は画面幅430px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:430px) {


/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo {
	margin-left: 40px;	/*左に空けるスペース*/
	width: 100px;		/*画像の幅*/
}


/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {	
	margin: 10px;	/*ボックスの外側へ空けるスペース*/
}

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}




/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {



/*全体の設定
---------------------------------------------------------------------------*/
html, body {
	font-size: 15px;	/*基準となるフォントサイズの上書き*/
}

main {	
        /* 左余白を 250px から 300px に広げると、メニューと重なりません */
        margin: 10px 50px 100px 250px; 
    }

}



/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
header #logo {
	margin: 0;
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*ハンバーガーメニューを非表示にする*/
@media screen and (min-width: 900px) {
    /* PCではハンバーガーを絶対出さない */
    #menubar_hdr {
        display: none !important;
    }

}

/*menubarブロック設定
---------------------------------------------------------------------------*/
#menubar {
	width: 190px;				/*メニューブロックの幅*/
	left: 0px;top: 210px;		/*左から、上からの配置場所指定*/
	height: calc(100% - 210px);	/*メニューブロックの高さ。上の行のtopの数値(116px)を引いた高さになります。*/
	position: fixed;			/*スクロールしても固定表示させる設定*/
}

#menubar a {
        display: block;
        text-decoration: none;
        text-align: left;           /* 💡 中央から左揃えに変更してプロっぽく */
        padding: 10px 30px;         /* 💡 上下左右にたっぷり余白を取る */
        font-size: 1.0rem;          /* 💡 文字サイズを大きく（0.8emから拡大） */
        font-weight: bold;          /* 💡 太字にする */
        letter-spacing: 0.1em;      /* 文字の間隔を広げる */
        color: #fff;                /* 文字色は白 */
		background: #000;        /* 濃い緑で「今ここ」を表現 */
        transition: 0.3s;           /* */
    }

    /* マウスを乗せた時（ホバー）にクレーンの緑色にする */
    #menubar a:hover {
        background: #69bb84;        /*  クレーンのライムグリーンに変更 */
        color: #000;
        padding-left: 40px;         /* 少し右に動くアニメーション */
    }

    /* 現在表示中のページの装飾 */
    #menubar li.current a {
        background: #000;        /* 濃い緑で「今ここ」を表現 */
        border-left: 8px solid hsl(135, 50%, 75%); /* 左側に明るい緑のアクセント線 */
        color: #fff;                /* */
    }

/*マウスオン時*/
#menubar:hover {
	overflow: auto;	/*高さ以上のコンテンツ量の場合に自動でスクロールバーを出します*/
}

@media screen and (max-width: 899px) {

    /* 1. 三本線ボタン：左上に固定 */
    #menubar_hdr {
        display: flex !important;
        position: fixed !important;
        left: 10px !important;
        top: 10px !important;
        z-index: 1001 !important; /* 💡 メニューよりさらに手前に出す */
        /* ...その他の背景色などの設定はそのまま... */
    }

    /* 2. メニュー本体：最初は左に隠しておく */
    #menubar {
        display: block !important; /* 常に存在はさせる */
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;   /* 💡 画面の左外に完全に隠す */
        width: 50% !important;    /* 💡 画面の8割くらいの幅にする */
        height: 100% !important;
        z-index: 1000 !important;
        background: #111 !important; /* 背景を黒にして文字を見やすく */
        transition: left 0.3s !important; /* 動くアニメーション */
        overflow-y: auto !important;
        padding-top: 60px !important; /* 💡 ボタンと重ならないよう、上に隙間を作る */
    }

    /* 3. ボタンを押した時（dbクラスがついた時）：左から出てくる */
    #menubar.db {
        left: 0 !important; /* 💡 左端にピッタリ合わせる */
    }

#main_visual {
        height: 300px !important; /* 💡 700pxから300pxくらいにギュッと縮める */
        width: 95% !important;   /* 💡 横幅も少しだけ余裕を持たせる */
        margin-top: 10px;        /* 💡 ロゴや三本線ボタンとの間に隙間を作る */
        margin-bottom: 30px;     /* 下の文章との隙間 */
    }

/* スマホ用の調整 */
    .main_visual_wrapper {
        padding: 30px 0;
    }
    #main_visual {
        width: 95%;
        box-shadow: 10px 10px 0px rgb(63, 177, 111);
    }

/* 1. 電話番号エリア全体の調整 */
    /* 1. ヘッダー全体の余白調整（重なり防止の土台） */
    header {
        padding: 10px 5px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 2. ロゴのサイズ（少し小さくして右側のスペースを作る） */
    header #logo {
        margin-left: 50px !important;
        width: 190px !important; /* 💡 200pxより少し絞るとさらに安全です */
    }

    /* 3. 24時間対応ラベル（ここを修正依頼通りに強化！） */

/* --- 24時間対応ラベルをさらに強調 --- */
    .contact-label {
        display: inline-block !important; /* 背景色をつけるために inline-block に */
        font-size: 1.17rem !important;    /* 💡 さらに一回り大きく！ */
        font-weight: 900 !important;      /* 💡 ガッツリ太字に */
        color: #fff !important;           /* 💡 文字を白抜きに */
        background: #a30000;              /* 💡 濃い赤色の背景で目立たせる */
        padding: 2px 8px;                 /* 💡 文字の周りに余白 */
        border-radius: 4px;               /* 角を少し丸める */
        white-space: nowrap;
        margin-bottom: 2px;
        transform: scale(0.9);            /* 💡 少しだけ縮小してロゴとの衝突を防ぐ隠し味 */
        transform-origin: right;          /* 右側を基準に縮小 */
    }

    /* --- 電話番号もバランス調整 --- */
    .contact-number {
        font-size: 1.15rem !important;   /* 電話番号も少しだけアップ */
        font-weight: bold;
        color: #333 !important;
        display: block;
        text-align: right;
    }
}

/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*日付(dt)設定*/
#new dt {
	width: 14em;	/*幅。14文字(em)分。*/
	display: flex;	/*flexボックスを使う指定*/
	justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
}

/*日付の横のマーク（共通設定）*/
#new dt span {
	display: inline-block;	/*表示させる*/
	width: 6em;				/*幅。6文字(em)分。*/
	background: #999;		/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.9em;		/*文字サイズを90%に。*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 3px;		/*角を少しだけ丸くする*/
	margin-right: 1.2em;	/*アイコンの右側に空けるスペース*/
	align-self: flex-start;	/*高さを間延びさせない指定*/
	line-height: 1.5;		/*行間を少し狭く*/
	position: relative;top: 0.4em;	/*上下の配置バランスの微調整*/
}

/*bg1設定。サンプルテンプレートでは「サービス」と書いてあるマーク*/
#new dt span.icon-bg1 {
	background: #111;	/*背景色*/
}

/*記事(dd)設定*/
#new dd {
	width: calc(100% - 14em);	/*「14em」は上の「#new dt」のwidthの値です。*/
}


@media screen and (max-width: 900px) {
    .ta1 {
        /* 💡 width: fit-content を打ち消すために 95% を指定 */
        width: 95% !important;   
        
        /* 💡 左右を auto にして、強制的に中央へ */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 10px !important;
        margin-bottom: 30px !important;
        
        display: table; /* blockからtableに戻すと中央寄せが効きやすくなります */
    }

    .ta1 tr, .ta1 th, .ta1 td {
        /* 💡 中身は縦並びを維持 */
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    .ta1 th, .ta1 td {
        /* 文字も中央に寄せると、より「真ん中感」が出ます */
        text-align: center !important;
        padding: 12px 15px !important;
    }
}
/*その他
---------------------------------------------------------------------------*/
.ws {width: 48%;display: inline;}


/*　※注意！。　*/





/*---------------------------------------------------------------------------
ここから下は画面幅1200px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1200px) {


/*listブロック
---------------------------------------------------------------------------*/
/*１個あたりのボックス設定*/
.list {
	width: 80%;	/*幅。４列になります。*/
}

}
/*　※注意！削除しないで。　*/