/* ============================================================
   style_responsive.css
   サイト全体のレスポンシブ対応スタイル
   style.css の固定幅・スプライト設定を上書きする
   ============================================================ */

/* ----------------------------------------------------------
   1. 全幅での固定幅解除（全ブレークポイント共通）
   ---------------------------------------------------------- */

div#main_shadow {
	width: 100%;
	max-width: 980px;
}

div#main {
	width: 100%;
	max-width: 960px;
	box-sizing: border-box;
}

header {
	width: 100%;
	max-width: 960px;
	box-sizing: border-box;
}

div#contents {
	width: 100%;
	box-sizing: border-box;
}

div#main_image {
	width: 100%;
	max-width: 940px;
	box-sizing: border-box;
}

div#wrapper {
	width: 100%;
	box-sizing: border-box;
}

/* サブページ固有の固定幅解除 */
div#sub_image {
	width: 100%;
	max-width: 940px;
	box-sizing: border-box;
}

div#sub_image img {
	max-width: 100%;
	height: auto;
	display: block;
}

div#topic_path {
	width: auto;
	max-width: 720px;
	box-sizing: border-box;
}

div#sub_wrapper {
	width: 100%;
	max-width: 720px;
	box-sizing: border-box;
}


/* ----------------------------------------------------------
   2. グローバルナビをテキストリンクに置き換え
      （style.css のスプライト設定を上書き）
   ---------------------------------------------------------- */

nav#global_nav {
	background-image: none;
	background-color: #006E41;
	height: auto;
	min-height: 50px;
}

ul#menu-global-nav {
	width: 100%;
	max-width: 960px;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}

ul#menu-global-nav li {
	float: none;
	margin: 0;
}

ul#menu-global-nav li a {
	background-image: none !important;
	background-color: transparent !important;
	color: #fff !important;
	text-indent: 0;
	width: auto;
	height: auto;
	line-height: 50px;
	padding: 0 28px;
	display: block;
	font-size: 0.9em;
}

ul#menu-global-nav li a:hover {
	background-color: rgba(0, 0, 0, 0.15) !important;
	background-image: none !important;
	color: #fff !important;
	text-decoration: none;
}

/* モバイルメニューはデスクトップでは非表示 */
#mobile_menu {
	display: none;
}

/* ----------------------------------------------------------
   ドロップダウンメニュー（デスクトップ）
   ---------------------------------------------------------- */

ul#menu-global-nav li.has-dropdown {
	position: relative;
}

ul#menu-global-nav li.has-dropdown > ul.dropdown {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	background-color: #005530;
	min-width: 160px;
	z-index: 100;
	list-style: none;
	margin: 0;
	padding: 0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

ul#menu-global-nav li.has-dropdown:hover > ul.dropdown {
	display: block;
}

ul#menu-global-nav li.has-dropdown > ul.dropdown li {
	float: none;
	margin: 0;
}

ul#menu-global-nav li.has-dropdown > ul.dropdown li a {
	line-height: 1.4 !important;
	padding: 10px 16px !important;
	white-space: nowrap;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ----------------------------------------------------------
   3. 中間幅対応（769px〜900px）
      ナビアイテムのパディングを縮小して折り返しを防ぐ
   ---------------------------------------------------------- */

@media (max-width: 900px) and (min-width: 769px) {
	ul#menu-global-nav li a {
		padding: 0 14px;
	}
}

/* ----------------------------------------------------------
   4. モバイル対応（768px 以下）
   ---------------------------------------------------------- */

@media (max-width: 768px) {

	/* ヘッダー：縦積みに変更 */
	div#header_left {
		width: 100%;
		float: none;
	}

	div#header_left a {
		width: 100%;
		max-width: 410px;
		float: none;
		margin: 0 auto;
		display: block;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		height: 70px;
	}

	div#header_right {
		width: 100%;
		float: none;
	}

	div#text_link {
		width: 100%;
		height: auto;
	}

	div#text_link ul {
		float: none;
		margin: 8px 10px;
		display: flex;
		flex-wrap: wrap;
	}

	div#text_link li {
		padding: 0 10px;
	}

	div#search {
		width: 100%;
		height: auto;
		float: none;
	}

	div#search form {
		float: none;
		margin: 5px 10px 8px;
		display: block;
	}

	#search_text {
		width: 60%;
		font-size: 1em;
	}

	/* ナビ：デスクトップ版を非表示、ハンバーガーを表示 */
	ul#menu-global-nav {
		display: none;
	}

	/* モバイル内のサブメニュー（details/summary） */
	#mobile_menu li details > summary {
		color: #fff;
		padding: 13px 20px;
		cursor: pointer;
		list-style: none;
		display: block;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		font-size: 1em;
	}

	#mobile_menu li details > summary::-webkit-details-marker {
		display: none;
	}

	#mobile_menu li details[open] > summary {
		background-color: rgba(0, 0, 0, 0.12);
	}

	#mobile_menu li details > ul {
		background-color: #004422;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#mobile_menu li details > ul li a {
		display: block;
		color: #fff;
		background-color: transparent;
		padding: 11px 32px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		font-size: 0.95em;
		text-decoration: none;
	}

	#mobile_menu {
		display: block;
	}

	#mobile_menu > summary {
		color: #fff;
		padding: 12px 16px;
		font-size: 1em;
		cursor: pointer;
		list-style: none;
		user-select: none;
	}

	#mobile_menu > summary::-webkit-details-marker {
		display: none;
	}

	#mobile_menu[open] > summary {
		background-color: rgba(0, 0, 0, 0.12);
	}

	#mobile_menu > ul {
		background-color: #005530;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#mobile_menu > ul li a {
		display: block;
		color: #fff;
		background-color: transparent;
		padding: 13px 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		font-size: 1em;
		text-decoration: none;
		text-indent: 0;
	}

	#mobile_menu > ul li a:hover {
		background-color: rgba(255, 255, 255, 0.1);
		color: #fff;
		text-decoration: none;
	}

	/* コンテンツエリア */
	div#main_image {
		width: 100%;
		max-width: 100%;
	}

	/* 2カラム → 1カラム */
	div#whatsnew_wrapper {
		width: 100%;
		float: none;
	}

	section#whatsnew {
		width: auto;
		margin: 15px 10px;
	}

	div.whatsnew_contents {
		width: auto;
		margin: 10px 10px;
	}

	p.date {
		width: auto;
		float: none;
		color: #666;
		font-size: 0.85em;
	}

	p.title {
		width: auto;
		float: none;
		margin-left: 0;
		margin-top: 2px;
	}

	div#side_bar {
		width: 100%;
		float: none;
	}

	div.banner {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		margin: 15px 0;
		box-sizing: border-box;
		padding: 0 10px;
	}

	div.banner a {
		display: inline-block;
	}

	div.banner img {
		max-width: 180px;
		height: auto;
	}

	/* フッター */
	footer ul {
		float: none;
		display: flex;
		flex-wrap: wrap;
		margin: 10px;
		padding: 0;
	}

	footer li {
		float: none;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
		padding: 9px 15px;
		width: 100%;
		box-sizing: border-box;
	}

	div#copyright {
		float: none;
		display: block;
		margin: 8px 10px 12px;
		font-size: 0.75em;
	}

	/* サブページ：2カラム → 1カラム */
	div#sub_image {
		width: 100%;
		max-width: 100%;
	}

	div#topic_path {
		width: auto;
		margin: 5px 10px;
	}

	div#sub_wrapper {
		width: 100%;
		max-width: 100%;
		float: none;
	}

	section#sub_contents {
		width: auto;
		float: none;
		margin: 10px;
		display: block;
	}
}