/* ブラウザの初期余白をすべて消し去る魔法のコード */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
header, .header-td {
	display: block;
}
	
/* .header-logo-area {
	display: flex;
	align-items: center;
	height: 85px;
	/* 親の高さに合わせる 
	padding-left: 20px;
}*/

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

img {
    max-width: 100%; /* 親要素（画面）より大きくならないでね */
    height: auto;    /* 横幅に合わせて高さも自動調整してね */
}


/* --- ヘッダー全体の土台 --- */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    padding: 10px 0 0 0; 
}

.header-inner {
    max-width: 1250px; /* 少し広げてゆとりを持たせる */
    margin: 0 auto;
    padding: 0 20px;   /* 左端の余白を10pxから20pxに。寄りすぎによるチープさを防ぐ */
    display: flex;
    justify-content: space-between;
    align-items: center; /* ★ロゴとメニューの「中心」を水平に揃える */
}

/* ロゴと社名のリンクエリア */
.header-logo a {
    display: flex;
    align-items: center; /* ★ロゴと社名の上下中央をピタッと合わせる */
    text-decoration: none;
}

header img {
    height: 50px; 
    width: auto;
    display: block;
    margin-right: 1px; /* ★ロゴと文字の距離 */
   /* ★ここが重要！ ぼかし（px）を「0」にして、4方向に白い影をずらして重ねる */
    filter: drop-shadow(1px 1px 0 #ffffff) 
            drop-shadow(-1px -1px 0 #ffffff)
            drop-shadow(1px -1px 0 #ffffff)
            drop-shadow(-1px 1px 0 #ffffff)
            /* 最後に、全体を少し浮かせるための薄い黒影を足す */
            drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
}


/* --- style.css の該当箇所を書き換え --- */

.header-logo-img {
    height: 110px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)); /* 枠ではなく、ぼんやりした白い後光 */
    animation: pulse-animation 5s infinite;
}

header h1 {
	position: absolute;
	top: 35px;
	/* ★文字の高さも固定（ロゴと中心を合わせる） */
	left: 85px;
	/* ★ロゴの横（20px + ロゴ幅 + 余白）に固定 */
	margin: 0;
	font-size: 24px;
	line-height: 1;
}

/* 会社名の仕上げ */
.company-name {
    font-family: "BIZ UDPGothic", "Meiryo", sans-serif; /* キャッチコピーとフォントを統一 */
    color: #990000 !important;
    font-size: 24px;   /* 26pxから少しだけ絞ることで、ロゴとの対比が綺麗になります */
    font-weight: 900;
    letter-spacing: 0.15em; /* 文字間を少し広げて、ゆったりとした風格を */
    text-shadow: 
        1px 1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        2px 2px 4px rgba(0,0,0,0.2);
    white-space: nowrap;
    line-height: 1; /* 行間の余計な隙間をカット */
}

.company-name-en {
	display: block;
	font-size: 10px;
	font-family: "Meiryo", sans-serif;
	letter-spacing: 0.25em;
	margin-top: -2px;
	color: #FFCCCC !important;
}

.company-name {
    /* 1pxの鋭い白縁で赤（#990000）を際立たせる今の設定を維持 */
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #990000 !important;
    font-size: 26px; /* ロゴに合わせて文字も少しだけ大きく（24px→26px） */
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-left: 20px; /* ロゴが大きくなった分、少しだけ隙間を広げます */
    
    text-shadow: 
        1px 1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        2px 2px 4px rgba(0,0,0,0.3);

    white-space: nowrap;
    line-height: 1.2;
}

/* ★動きの正体（右下の時に使っていたものを再利用） */
@keyframes pulse-animation {
    0% {
        transform: scale(1); /* 最初は元のサイズ */
    }
    50% {
        transform: scale(1.1); /* 途中で1.1倍に膨らむ */
    }
    100% {
        transform: scale(1); /* 最後は元に戻る */
    }
}

.header-nav ul {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
}

.header-nav a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.3s;
}

.en-txt {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1em;
    /* 写真の上でも文字を読みやすくする影 */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.ja-txt {
    color: #ffffff;
    font-size: 10px;
    margin-top: 2px;
    opacity: 0.8;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* ホバー時の下線 */
.header-nav a::after {
    content: '';
    width: 0;
    height: 2px;
    background-color: #ffffff;
    margin-top: 5px;
    transition: width 0.3s;
}

.header-nav a:hover::after,
.header-nav a.active::after {
    width: 100%;
}

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


/* --- スライドショーの設定 --- */

.mosaic-container {
	position: relative;
	width: 100%;
	height: 400px;
	margin: 0 auto;
	overflow: hidden;
}
.slide {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	/* 全体15秒（1枚5秒 × 3枚）で一定のリズムにします */
	animation: slideAnime 15s linear infinite;
}
/* 0秒、5秒、10秒と、きっちり5秒間隔でスタートさせます */

.s1 {
	background-image: url(img1/bg01.jpg);
	animation-delay: 0s;
}
.s2 {
	background-image: url(img1/bg02.jpg);
	animation-delay: 5s;
}
.s3 {
	background-image: url(img1/bg03.jpg);
	animation-delay: 10s;
}
@keyframes slideAnime {
	0% {
		opacity: 0;
		transform: scale(1.0);
	}
	/* 最初の1.5秒でふわっと表示 */
	10% {
		opacity: 1;
	}
	/* 5秒間（全体の33%）表示し続けながら、ゆっくりズーム */
	33% {
		opacity: 1;
	}
	/* 次のスライドが来るタイミングでスッと消える */
	43% {
		opacity: 0;
		transform: scale(1.1);
	}
	100% {
		opacity: 0;
	}
}
.pulsing-logo {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 10;
}
.pulsing-logo img {
	width: 80px;
	height: auto;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}
	50% {
		transform: scale(1.1);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 0.8;
	}
}

/* --- キャッチコピーの設定 --- */

.hero-text-overlay {
	position: absolute;
	bottom: 15%;
	left: 80px;
	z-index: 100;
}

.hero-catchphrase {
	color: #333333;
	font-family: "BIZ UDPGothic", "Meiryo", sans-serif;
	font-size: 38px;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 0.5);
	margin: 0;
	padding-left: 20px;
	border-left: 6px solid #990000;
	animation: moveLoopOnlyHorizontal 15s linear infinite;
	opacity: 0;
}

@keyframes moveLoopOnlyHorizontal {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	10% {
		opacity: 1;
		transform: translateX(0);
	}
	90% {
		opacity: 1;
		transform: translateX(100px);
	}
	100% {
		opacity: 0;
		transform: translateX(130px);
	}
}

/* --- フッター・その他 --- */
.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;
}

/* --- ボタン共通：ぶわーんと大きくなる設定 --- */
.menu-button {
	display: inline-block;
	/* 左右に 15px ずつ（合計 30px 分）の隙間を作ります */
	margin: 0 15px;
	/* 0.4秒かけて、少し弾むような自然な動きにします */
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

/* マウスを乗せた（hover）ときの動き */
.menu-button:hover {
	transform: scale(1.05);
}
/* --- 詳細ボタン（最新版） --- */

.about-detail-button {
	display: inline-block;
	padding: 12px 40px;
	background-color: #990000;
	/* 三光電気の赤 */
	color: #FFFFFF !important;
	/* 文字は白 */
	background: linear-gradient(135deg, #990000 0%, #cc0000 100%);
	border: none;
	text-decoration: none;
	font-family: "MS PMincho", serif;
	font-size: 18px;
	font-weight: bold;
	border-radius: 5px;
	/* 0.4秒かけて、少し弾むような自然な動きにします */
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
	border: 2px solid #990000;
}
/* マウスを乗せた（hover）ときの設定 */

.about-detail-button:hover {
	background-color: #990000;
	/* 背景が濃い赤になる */
	color: #ffffff;
	/* ★文字を白にする（重要！） */
	text-decoration: none;
	/* 下線を消してスッキリさせる */
	transform: scale(1.05);
	/* 例の「ぶわーん」の動き */
}

.back-to-top:hover {
    transform: translateY(-5px); /* 上に5px浮き上がらせる */
    opacity: 1;                  /* 透明度をなくしてハッキリさせる */
    color: #ffffff;             /* 文字色を白で固定 */
}

	/* --- スマホ用の調整 --- */
	@media screen and (max-width: 480px) {
    /* 0. ページ全体の横幅をスマホに合わせ、下の空白をカット */
    html, body {
        width: 100%;
		overflow-x: hidden !important; /* 横のグラグラ防止 */
		overflow-y: scroll !important; /* 縦スクロールは残す */
        margin: 0;
        padding: 0;
    }
	
	/* 1. テーブルの下の余計な隙間をカット */
	table {
        display: block !important;
        border-collapse: collapse !important;
        margin-bottom: 0 !important;
    }

    /* 2. 画像を「スマホの幅」に合わせて自動で縮める魔法 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* 3. メイン画像などの大きなパーツを無理やり収める */
    td img[width="453"] {
        width: 100% !important;
        height: auto !important;
    }

    /* 4. 社名とロゴを一行に収める */
    .company-name {
        font-size: 20px !important;
        letter-spacing: 0.1em !important;
        margin-left: 12px !important;
    }
	
	.company-name-en {
        font-size: 8px !important; /* 英語表記もバランスを見て調整 */
        letter-spacing: 0.15em !important;
    }
	
	/* ロゴエリア全体の余白も少し調整して見やすくします */
    .header-logo-area {
        padding-left: 15px !important;
        height: 70px !important; /* ヘッダーの高さを少し広げてゆとりを出す */
    }
	
    header img {
        height: 45px !important;
    }

    /* 5. ナビゲーションを一旦非表示（重なり防止） */
    .header-nav {
        display: none;
    }

    /* 6. ボタンを縦に並べる */
    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
        display: block !important;
        width: 100% !important;
        padding: 5px 0 !important;
    }

    /* 7. トップに戻るボタンを「見える場所」に固定 */
    .back-to-top {
        right: 20px !important;
        bottom: 20px !important;
        display: block !important;
		opacity: 1 !important;
    }
	
	.message-text {
            font-size: 16px !important; /* スマホの時だけ16pxにする */
	}
	
	/* --- キャッチコピーのスマホ最適化 --- */
    .hero-text-overlay {
        left: 15px !important;   /* 左の余白を少し詰める */
        bottom: 15% !important;
        width: auto !important;  /* 幅を固定せず、中身に合わせる */
        max-width: none !important; /* 制限を解除 */
        white-space: nowrap !important; /* 箱ごと改行禁止にする */
    }

    .hero-catchphrase {
        font-size: 20px !important; /* 文字を小さくして1行に収める */
        border-left: 4px solid #990000 !important; /* 赤い線を少し細く */
        padding-left: 10px !important;
        white-space: nowrap !important; /* 絶対に改行させない */
    }

    /* 文字が流れる範囲をスマホサイズに合わせる */
    @keyframes moveLoopOnlyHorizontal {
        0% {
            opacity: 0;
            transform: translateX(-20px); /* 動き出しを小さく */
        }
        10% {
            opacity: 1;
            transform: translateX(0);
        }
        90% {
            opacity: 1;
            transform: translateX(30px); /* 流れる距離を短くして画面内に収める */
        }
        100% {
            opacity: 0;
            transform: translateX(40px);
        }
    }