@charset "utf-8";

/* ****************************************************************************************************
 * レスポンシブ対応（スマホ・タブレット）
 * PC幅(960px)のデザインはそのまま、画面幅が狭い時のみ上書きする
**************************************************************************************************** */

/* スマホ専用要素はPCでは非表示（メディアクエリ内で表示する） */
.hero-lead,
#business .biz-title,
#business .biz-arrow,
#business .biz-dots,
#business .biz-more { display: none; }

/* ===== タブレット（〜1000px）：横幅を画面に合わせて流動化 ===== */
@media screen and (max-width: 1000px) {
	div#header,
	div#g-navi,
	div#visual p,
	div#main-container,
	div#footer,
	div#copyright p {
		width: auto;
		max-width: 960px;
		padding-left: 15px;
		padding-right: 15px;
	}
	div#main-container { width: auto; }

	/* 事業内容ギャラリーを2列に */
	div#business div.gallery { justify-content: space-around; }
	div#business div.gallery div.article { width: 46%; max-width: 236px; }

	/* topics と rakuhou を縦積み */
	div#topics, div#rakuhou { width: 100%; display: block; }
	div#rakuhou { margin-top: 30px; }

	/* フッターナビの幅調整 */
	div#f-navi { width: 100%; }
	div#f-info { width: 100%; }
}

/* ===== スマホ（〜768px） ===== */
@media screen and (max-width: 768px) {

	/* --- ヘッダー：ロゴと電話番号を左右1行に並べる --- */
	div#header {
		padding-top: 8px;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
	}
	div#header h1 { display: none; }
	div#header div.left { width: auto; float: none; flex: 1 1 auto; text-align: left; min-width: 0; }
	div#header div.right { width: auto; float: none; flex: 0 0 auto; }
	p#h-logo { margin: 0; }
	p#h-logo img { width: 100%; max-width: 215px; }
	p#h-contact { text-align: right; margin: 0; }
	p#h-contact img { width: 100%; max-width: 120px; }

	/* --- グローバルナビ：ハンバーガーメニュー化 --- */
	div#g-navi-base { margin: 0; padding: 0; background: #408fcb; }
	div#g-navi { width: 100%; padding: 0; }

	/* ハンバーガーボタン表示 */
	#navi-toggle {
		display: block;
		width: 100%;
		padding: 14px 16px;
		background: #408fcb;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		border: none;
		text-align: left;
		cursor: pointer;
		position: relative;
	}
	#navi-toggle:after {
		content: "≡";
		position: absolute;
		right: 18px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 22px;
	}

	/* メニュー本体：トグルで開閉。画像ナビは隠してテキストナビに置換 */
	div#g-navi > ul.dropdown {
		display: none;
		letter-spacing: normal;
		background: #fff;
		border-top: solid 1px #2f6e9e;
	}
	div#g-navi > ul.dropdown.open { display: block; }

	div#g-navi > ul > li {
		height: auto;
		display: block;
		border-bottom: solid 1px #e2e2e2;
	}
	/* 画像ナビはスマホでは非表示にし、テキストで見せる */
	div#g-navi > ul > li > a { height: auto; overflow: visible; }
	div#g-navi > ul > li > a img { display: none; }
	div#g-navi > ul > li > a:before {
		content: attr(data-label);
		display: block;
		padding: 14px 16px;
		color: #333;
		font-size: 15px;
		font-weight: bold;
	}
	div#g-navi > ul > li:hover > a:before,
	div#g-navi > ul > li.current > a:before { background: #f2f8fc; color: #408fcb; }

	/* ドロップダウン2階層目：常時展開（アコーディオン表示） */
	div#g-navi ul ul {
		position: static;
		visibility: visible;
		opacity: 1;
		min-width: 0;
		width: 100%;
		border: none;
		border-top: dotted 1px #ddd;
		box-shadow: none;
		white-space: normal;
		background: #f9f9f9;
	}
	div#g-navi ul ul li a { padding: 11px 16px 11px 32px; font-size: 14px; }
	div#g-navi ul ul li a:before { content: "・"; margin-left: -14px; color: #408fcb; }

	/* --- ビジュアル --- */
	div#visual-wrap { padding-bottom: 0; background: none; }
	div#visual-base { background: #115aba; }
	div#visual { background-size: cover; background-position: center; }
	div#visual p { width: 100%; padding: 0; }

	/* --- メイン --- */
	div#main-container { padding: 20px 12px 30px; }
	div.section ~ div { margin-top: 35px; }

	/* --- ヒーロー下の会社説明文 --- */
	.hero-lead {
		display: block;
		margin: 0;
		padding: 14px 15px 4px;
		font-size: 13px;
		line-height: 1.7;
		color: #555;
	}

	/* --- 事業内容：見出し＋横スライド＋全てみる --- */
	#business .biz-title {
		display: block;
		margin: 0 0 14px;
		padding: 2px 0 2px 10px;
		font-size: 18px;
		font-weight: bold;
		color: #333;
		border-left: solid 5px #408fcb;
	}
	/* カルーセル本体（1枚ずつ表示・スライド） */
	#business .biz-carousel { position: relative; overflow: hidden; }
	div#business div.gallery {
		margin-top: 0;
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		transition: transform .4s ease;
		touch-action: pan-y;
	}
	div#business div.gallery div.article {
		flex: 0 0 100%;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0 6px;
		display: block;
	}
	/* 薄い左右矢印 */
	#business .biz-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 38%;
		transform: translateY(-50%);
		z-index: 5;
		width: 40px;
		height: 64px;
		padding: 0;
		border: none;
		background: none;
		color: rgba(255, 255, 255, 0.9);
		font-size: 48px;
		line-height: 1;
		text-shadow: 0 0 5px rgba(0, 0, 0, 0.45);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	#business .biz-prev { left: 0; }
	#business .biz-next { right: 0; }
	/* 下部ドット */
	#business .biz-dots {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 9px;
		margin-top: 16px;
	}
	#business .biz-dots button {
		width: 9px;
		height: 9px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: #cfcfcf;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	#business .biz-dots button.active { background: #408fcb; }
	#business .biz-more {
		display: block;
		margin: 18px 0 0;
		text-align: center;
	}
	#business .biz-more a {
		display: inline-block;
		min-width: 180px;
		padding: 11px 30px;
		background: #408fcb;
		color: #fff;
		font-weight: bold;
		border-radius: 4px;
		text-decoration: none;
	}
	#business .biz-more a:hover { background: #357bb0; text-decoration: none; }
	div#business div.gallery div.top,
	div#business div.gallery div.bottom { background: none; padding-top: 0; }
	div#business div.gallery div.body {
		background: none;
		padding: 0;
		border: solid 1px #ddd;
		border-radius: 4px;
		padding: 14px;
	}
	div#business div.gallery div.article h2 { height: auto; min-height: 2.6em; margin-bottom: 8px; }
	div#business div.gallery div.article div.photo {
		width: 100%;
		height: auto;
		max-height: none;
	}
	div#business div.gallery div.article div.photo img { width: 100%; }
	div#business div.gallery div.article p { min-height: 0; }

	/* --- 新着情報 --- */
	.title-2 img { max-width: 100%; }
	div#topics div.container { margin: -18px 0 0; padding: 0.25em 1em 0; }
	div#topics dl { display: block; padding: 0.6em 0; }
	div#topics dl dt { display: block; background-position: left 0.5em; padding-left: 14px; }
	div#topics dl dt a { padding: 0.2em 0 0.2em 0.5em; }
	div#topics dl dd { display: block; }
	div#topics dl dd a { padding: 0 0 0 14px; }
	div#rakuhou img { max-width: 237px; }

	/* --- フッター --- */
	div#footer { display: block; }
	div#footer > div.container { margin: 16px 0; }
	div#f-info { text-align: center; }
	div#f-navi { display: block; }
	div#f-navi > ul { padding: 0; margin-bottom: 8px; }
	div#copyright p { width: auto; padding: 0.6em 12px; text-align: center; }
}

/* ===== 小型スマホ（〜400px） ===== */
@media screen and (max-width: 400px) {
	p#h-logo img { width: 90%; }
	div#header h1 { font-size: 9px; }
}