body {
        font-family: Meiryo, sans-serif;
        font-size: 12px;
        margin: 0;
    }
	
	html {
    scroll-behavior: smooth;
	}

    /* --- ヘッダーエリア（赤背景・社名・メニュー） --- */
    .header-td {
        background-color: #990000; /* イメージカラーの赤 */
        border-bottom: 3px solid #660000;
        height: 85px;
    }

    .header-logo-area {
        display: flex;
        align-items: center;
        padding-left: 20px;
    }

    /* ロゴの調整：白い光をさらに強くしました */
    .header-logo-img {
        width: 55px;
        height: auto;
        margin-right: 15px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    }

    /* 社名：白文字に、ハッキリとした黒い影 */
    .company-name {
        font-family: "MS PMincho", serif;
        font-size: 26px;
        font-weight: bold;
        color: #FFFFFF !important; /* !importantを付けて強制的に白にします */
        letter-spacing: 0.15em;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    }

    .company-name-en {
        display: block;
        font-size: 10px;
        font-family: "Meiryo", sans-serif;
        letter-spacing: 0.25em;
        margin-top: -2px;
        color: #FFCCCC !important;
    }
	
	/* --- works.html専用の追加スタイル --- */
	.page-title {
    	background-color: #f4f4f4;
    	border-left: 8px solid #990000;
    
    	/* ★ここがポイント！ */
    	height: 120px;           /* 高さを固定して全ページ統一します */
    	display: flex;           /* 文字を上下中央に寄せるための魔法 */
    	align-items: center;     /* 文字の上下中央揃え */
    	padding: 0 40px;         /* 上下のpaddingを0にして、高さが変わるのを防ぎます */
    
    	font-family: "Meiryo", sans-serif;
    	font-size: 28px;         /* 32pxだと長い文字がはみ出やすいので、少しだけ絞ると綺麗です */
    	font-weight: bold;
    	color: #333;
    	letter-spacing: 0.1em;
    	margin-bottom: 40px;
	}

	.intro-text {
    	font-size: 16px;
    	line-height: 2;
    	color: #444;
    	margin-bottom: 40px;
	}
	
	/* --- 施工実績エリア専用のスタイル --- */
	.works-container {
   		max-width: 900px;
    	margin: 0 auto;
    	padding: 60px 20px;
	}

	/* 年度ごとのグループ */
	.year-group {
    	margin-bottom: 50px;
    	position: relative;
	}

	/* 年度ラベル */
	.year-label {
    	font-family: "Meiryo", sans-serif;
    	font-size: 20px;
    	font-weight: bold;
    	color: #990000; /* 会社の赤 */
    	background-color: #fff;
    	display: inline-block;
    	padding: 5px 15px;
    	border: 2px solid #990000;
    	margin-bottom: 20px;
    	border-radius: 50px;
	}

	/* 実績リストの枠組み */
	.works-list {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	border-left: 2px solid #eee; /* タイムライン風の縦線 */
    	margin-left: 15px;
	}

	.works-item {
    	position: relative;
    	padding: 15px 0 15px 30px;
    	border-bottom: 1px solid #f0f0f0;
    	font-size: 15px;
    	color: #333;
    	transition: background-color 0.3s;
	}

	/* 行の先頭のドット */
	.works-item::before {
    	content: "";
    	position: absolute;
    	left: -7px;
    	top: 22px;
    	width: 12px;
    	height: 12px;
    	background-color: #990000;
    	border-radius: 50%;
	}

	.works-item:hover {
   		background-color: #fafafa;
	}

	.works-item:last-child {
   		border-bottom: none;
	}

    /* メニュー部分 */
    .header-nav {
        display: flex;
        justify-content: flex-end;
        list-style: none;
        margin: 0;
        padding-right: 20px;
    }

    .header-nav li {
        margin-left: 35px;
        text-align: center;
    }

    .header-nav a {
        text-decoration: none;
        display: block;
        transition: opacity 0.3s;
    }

    .header-nav a:hover { opacity: 0.6; }

    .en-txt {
        display: block;
        color: #FFFFFF !important;
        font-family: "Meiryo", sans-serif;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 0.15em;
        line-height: 1.2;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    }

    .ja-txt {
        display: block;
        color: #FFCCCC !important;
        font-family: "MS PMincho", serif;
        font-size: 10px;
        letter-spacing: 0.05em;
        margin-top: 2px;
    }

    .message-text {
        font-family: "MS PMincho", serif;
        font-size: 22px;
        color: #FFFFFF;  /* 白文字に変更 */
    	font-weight: bold;
    	text-align: center;
    	letter-spacing: 0.15em;
    	text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 読みやすくするための軽い影 */
    }
	
		/* ページトップへ戻るボタン */
	.back-to-top {
    	position: fixed;
    	right: 20px;
    	bottom: 20px;
    	width: 50px;
    	height: 50px;
    	background-color: #990000; /* 会社の赤 */
    	color: #ffffff;
    	border-radius: 50%; /* 丸くする */
    	text-align: center;
    	line-height: 50px;
    	font-size: 24px;
    	text-decoration: none;
    	z-index: 9999;
    	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    	transition: transform 0.3s, opacity 0.3s;
    	opacity: 0.8;
	}

	.back-to-top:hover {
    	transform: translateY(-5px); /* マウスを置くと少し浮く */
    	opacity: 1;
	}
	iframe {
    width: 100%;     /* 横幅はいっぱい */
    max-width: 100%; 
    height: 470px;   /* ★ここで高さをしっかり指定します */
    border: 0;
    vertical-align: middle;
	}
	
	/* --- スマホ用の最終調整：ここから --- */
	@media screen and (max-width: 480px) {
    /* 1. ページ全体の横幅と下の空白カット */
    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. ヘッダー：TOPページと同じ「大きいサイズ」に統一 */
    header img, .header-logo-img {
        height: 45px !important; /* 45pxにアップ */
        width: auto !important;
        margin-right: 12px !important;
    }
    .company-name {
        font-size: 20px !important; /* 20pxにアップ */
        letter-spacing: 0.1em !important;
    }
    .header-nav {
        display: none !important;
    }

    /* 3. コンテナの余白調整 */
    .quality-container {
        padding: 20px 15px !important;
        width: 100% !important;
    }

    /* 4. タイトル（QUALITY）の調整 */
    .page-title {
        height: 70px !important;
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }

    /* 5. 品質方針のリスト（ここがQuality専用の微調整です） */
    .policy-list {
        padding: 0 !important;
    }
    .policy-list li {
        margin-bottom: 20px !important;
        border-left: 4px solid #990000 !important; /* 左に赤い線を入れて見やすく */
        padding-left: 15px !important;
        list-style: none !important;
    }
    .policy-content strong {
        font-size: 18px !important;
    }

    /* 6. 下のメッセージ文字を16pxに（Aboutと統一） */
    .message-text {
        font-size: 16px !important;
    }

    /* 7. トップに戻るボタン */
    .back-to-top {
        right: 15px !important;
        bottom: 15px !important;
        display: block !important;
        opacity: 1 !important;
    }
}

/* --- PCでは完全に隠す --- */
.mobile-only-nav {
    display: none !important;
}

/* --- スマホ用のデザイン --- */
@media screen and (max-width: 480px) {
    .mobile-only-nav {
        display: table-row !important; /* スマホの時だけ表の行として表示 */
    }

    .footer-sub-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    /* ボタン本体の設定 */
    .sub-nav-btn {
        width: calc(50% - 10px); 
        background-color: #f2f2f2 !important; /* 薄いグレー背景 */
        border: 1px solid #cccccc !important; /* 枠線 */
        text-decoration: none !important;
        padding: 12px 0 !important;
        border-radius: 4px !important;
        text-align: center !important;
        box-shadow: none !important; /* 影を消す */
        display: block !important;
    }

    /* 上段：英語（TOP, ABOUTなど）を濃いグレーに */
    .sub-nav-btn .en-txt {
        display: block !important;
        font-size: 10px !important;
        color: #666666 !important; /* ★ここでグレーに固定 */
        font-weight: bold !important;
        margin-bottom: 2px !important;
        text-shadow: none !important; /* ★白く光る影を消す */
    }

    /* 下段：日本語（トップページなど）を黒に近いグレーに */
    .sub-nav-btn .ja-txt {
        display: block !important;
        font-size: 13px !important;
        color: #333333 !important; /* ★ここで濃い色に固定 */
        font-weight: bold !important;
        text-shadow: none !important; /* ★白く光る影を消す */
    }
}