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;
    }
	
	/* --- 本文エリアの共通設定 --- */
	.container {
   		max-width: 900px;
    	margin: 0 auto;
    	padding: 60px 20px;
	}

	/* ページタイトル (Quality) */
	.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;
	}

	/* 章タイトル (品質方針・環境方針) */
	.section-title {
    	font-family: "MS PMincho", serif;
    	font-size: 24px;
    	color: #990000;
    	border-bottom: 1px solid #ddd;
    	padding-bottom: 10px;
    	margin: 50px 0 20px 0;
    	font-weight: bold;
	}

	/* 箇条書きリスト */
	.policy-list {
    	list-style: none;
    	padding: 0;
	}


	/* 本文（導入文）*/
	.intro-text {
    	font-size: 16px;
    	line-height: 2;
    	color: #444;
    	margin-bottom: 40px;
	}

	/* リスト内の文字を大きくし、余白も広げる */
	.policy-list li {
    	background-color: #fff;
    	border: 1px solid #eee;
    	margin-bottom: 20px;
    	padding: 25px; /* 余白を広げてゆったりさせる */
    	border-radius: 4px;
    	line-height: 1.8;
    	font-size: 16px; /* ここを17?18pxにすると読みやすくなります */
    	display: flex;
    	align-items: flex-start; /* centerからflex-start（上揃え）に変更 */
	}
	
	/* --- 箇条書きのマーク（中央揃え調整版） --- */
	.policy-list li::before {
    	content: "";
    	width: 12px;
   		height: 12px;
    	background-color: #990000;
    	border-radius: 50%;
    	margin-right: 15px;
    
    	/* ここがポイント：上からの位置を微調整します */
    	margin-top: 10px; 
    
    	flex-shrink: 0;
    	display: inline-block;
	}

	/* 「1. 顧客」などの見出しをもっと強調 */
	.policy-list li strong {
    	font-size: 20px; /* 見出しをパッと目立たせる */
    	color: #333;
    	display: block;
    	margin-bottom: 5px;
		white-space: nowrap; /* これで「3. 従業員」が途中で改行されるのを防ぎます */
	}

    /* メニュー部分 */
    .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;
	}
	
	/* --- スマホ用の最終調整：ここから --- */
	@media screen and (max-width: 480px) {
    /* 1. ページ全体の横幅をスマホに合わせ、下の空白をカット */
    html, body {
        width: 100% !important;
        overflow-x: hidden !important; /* 右へのグラグラを防止 */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. ヘッダーをスッキリさせ、ナビを隠す */
    .header-td {
        height: 60px !important; /* ヘッダーの高さを少し抑える */
    }
    .header-nav {
        display: none !important; /* 上のメニューを非表示 */
    }
    .header-logo-img {
        width: 40px !important; /* ロゴを少し小さく */
        margin-right: 10px !important;
    }
    .company-name {
        font-size: 16px !important; /* 社名を1行に収める */
        letter-spacing: 0.05em !important;
    }
    .company-name-en {
        font-size: 8px !important; /* 英語表記をさらに小さく */
    }

    /* 3. コンテナの余白をスマホ用に調整 */
    .works-container {
        padding: 30px 15px !important;
    }

    /* 4. タイトル（ABOUT US）の背景をスマホサイズに */
    .page-title {
        height: 80px !important;
        font-size: 22px !important;
        padding: 0 20px !important;
        margin-bottom: 20px !important;
    }

    /* 5. 会社概要の「表」をスマホで読みやすくする */
    .profile-table {
        display: block !important;
        width: 100% !important;
    }
    .profile-table tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    .profile-table th, .profile-table td {
        display: block !important;
        width: 100% !important;
        padding: 10px !important;
        text-align: left !important;
    }
    .profile-table th {
        background-color: #f0f0f0 !important;
        border-bottom: none !important;
    }

    /* 6. Googleマップの高さ調整 */
    iframe {
        height: 300px !important;
    }

    /* 7. 下のメッセージ文字を小さく */
    .message-text {
        font-size: 16px !important;
        padding: 0 10px !important;
    }

    /* 8. トップに戻るボタンを見える位置に固定 */
    .back-to-top {
        right: 15px !important;
        bottom: 15px !important;
        display: block !important;
        opacity: 1 !important;
    }
}

/* --- 1. まず、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; /* ★白く光る影を消す */
    }
}