/*====================
media query list
====================*/
/* 768px以下の時
@media only screen and (max-width: 48em) {

}
*/

#header,
#pc_footer {
	min-width: 0;
}

/* =============================================================
	1. Header
============================================================= */
@media only screen and (max-width: 48em) {
	#header {
		display: block;
		padding: 0 0 10px;
	}
	#header:after {
		content: "";
		display: block;
		clear: both;
	}

	/* Announce */
	#header > .header_announce {
		display: block;
	}
	.header_announce {
		display: none;
		border: none;
		width: 100%;
		min-height: 30px;
		text-align: center;
		background: #F3F3F3;
		padding: 0;
		margin: 0;
	}
	.header_announce:before,
	.header_announce:after {
		display: none;
	}
	.header_announce a {
		display: table;
		width: 100%;
		table-layout: fixed;
	}
	.header_announce a:before {
		height: 30px;
	}

	/* =========================
		1-1. Header - Logo
	========================= */
	#header_logo {
		float: left;
		max-width: 50%;
	}
	#header_logo a {
		margin: 15px 15px 10px;
	}

	/* =========================
		1-2. Header - Nav
	========================= */
	#header_nav {
		float: right;
		max-width: 50%;
		margin: 0;
		position: static;
	}
	#header_nav > ul {
		padding: 0;
		margin: 10px 15px 5px 0;
	}
	#header_nav > ul li {
	}
	#header_nav > ul li a {
		font-size: 10px;
	}

	/* =========================
		1-3. Header - Guide
	========================= */
	#header_guide {
		clear: both;
		max-width: 100%;
		margin: 0;
		border-bottom: 1px solid #CCC;
	}
	#header_guide > ul > li:nth-of-type(n+1) {
		display: inline-block;
		margin: 0;
		width: 33.333%;
	}
	#header_guide > ul > li > a {
		display: inline-block;
	}

	/* =========================
		1-4. Header - Search
	========================= */
	#header_search_form {
		clear: both;
		margin: 10px 15px 0;
		position: relative;
	}
	#header_search_form .header_search_frame {
		max-width: none;
		padding-right: 50px;
	}
	#header_search_form .header_search_more {
		line-height: 15px;
		padding: 4px 5px;
		border: 1px solid #A0A0A0;
		border-radius: 4px;
		top: 0;
		right: 0;
		box-sizing: border-box;
		-webkit-transform: none;
		transform: none;
	}
	#header_search_form .header_search_more:hover {
		text-decoration: none;
	}
	#header_search_form .header_search_more:before {
		display: none;
	}
	#header_search_form .header_search_more br {
		display: block;
	}
}

/* =============================================================
	2. Footer
============================================================= */
@media only screen and (max-width: 48em) {
	/* Banner */
	#subbnr {
		display: block;
		padding: 10px 20px;
		background: #DDD;
		text-align: center;
	}
	#subbnr a {
		display: inline-block;
		vertical-align: middle;
	}
	#subbnr a img {
		max-width: 100%;
		height: auto;
	}

	/* Footer */
	#pc_footer {
		display: none;
	}
	#sp_footer {
		display: block;
		background: #FFF;
	}

	#sp_footer nav {
		background: #EDEDED;
	}
	#sp_footer nav ul {
		font-size: 0;
		letter-spacing: -1em;
		padding: 12px 14px 4px;
	}
	#sp_footer nav ul + ul {
		border-top: 1px solid #FFF;
	}
	#sp_footer nav ul:after {
		content: "";
		display: table;
		clear: both;
	}
	#sp_footer nav ul li {
		display: inline-block;
		width: 50%;
		font-size: 11px;
		letter-spacing: normal;
		vertical-align: top;
		margin-bottom: 0.6em;
	}
	#sp_footer nav ul li a {
		color: #333;
		font-style: italic;
		text-decoration: none;
		line-height: 1.38;
	}

	/* button */
	#sp_footer nav .sp_footer_button {
		max-width: 500px;
		text-align: center;
		padding: 10px 0 20px;
		margin: 0 auto;
	}
	#sp_footer nav .sp_footer_button a {
		display: inline-block;
		width: 140px;
		height: 34px;
		color: #333;
		font-size: 12px;
		font-weight: bold;
		text-decoration: none;
		line-height: 34px;
		background: #FFF;
		margin: 0 5px;
	}

	/* logout */
	#sp_footer #sp_footer_logout {
		text-align: center;
		padding: 0;
		margin: 20px auto;
	}
	#sp_footer #sp_footer_logout a {
		display: inline-block;
		height: auto;
		color: #333;
		font-weight: bold;
		text-decoration: none;
		line-height: normal;
		background: #FFF;
		padding: 5px 10px;
		border: 2px solid #EDEDED;
		box-sizing: border-box;
	}

	/* sns */
	#sp_footer h3 {
		font-size: 11px;
		color: #333;
		text-align: center;
		margin-top: 20px;
	}
	#sp_footer h3 img {
		display: inline-block;
	}
	#sp_footer #sp_footer_sns_link {
		display: block;
		text-align: center;
		line-height: 1.0;
		margin: 8px 0 12px;
	}
	#sp_footer #sp_footer_sns_link li {
		display: inline-table;
		width: 50px;
		line-height: 1.0;
		margin: 0 3px;
	}
	#sp_footer #sp_footer_sns_link li a {
		display: block;
	}
	#sp_footer #sp_footer_sns_link li img {
		width: 100%;
	}

	/* copyright */
	#sp_footer > p.sp_copyright {
		color: #125ECF;
		font-size: 10px;
		font-style: italic;
		text-align: center;
		line-height: 1.6;
		padding: 0 7%;
		margin-bottom: 0.8em;
	}
}