@charset "utf-8";
/************************************************
 Responsive Design - Media Queries
************************************************ */

/* Make all images responsive by default */
img {
	max-width: 100%;
	height: auto;
}

/* Ensure box-sizing for all elements */
* {
	box-sizing: border-box;
}

*:before,
*:after {
	box-sizing: border-box;
}

/* ============================================
   TABLET STYLES (481px to 768px)
   ============================================ */
@media screen and (min-width: 481px) and (max-width: 768px) {
	
	#container {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 10px;
	}
	
	/* Header */
	#header {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 10px;
		height: auto;
	}
	
	#header h1 {
		width: 150px;
	}
	
	#header #navi ul {
		width: auto;
		margin-top: 10px;
	}
	
	#header #navi ul li {
		margin: 0 10px;
		font-size: 9px;
	}
	
	/* Brand Slider */
	#brand_slider {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 75px 10px 0;
	}
	
	#brand_slider img {
		width: 100%;
		height: auto;
	}
	
	/* Info Section */
	#info {
		width: 95%;
		margin: 10px auto;
		padding: 10px;
	}
	
	/* Brand Section */
	#brand {
		width: 100%;
		margin: 0;
		padding: 10px;
	}
	
	#brand .maker-block {
		width: 100%;
		margin: 10px 0;
	}
	
	#brand .maker-block h3 {
		width: 100%;
		float: none;
		padding: 10px;
		text-align: center;
	}
	
	#brand .maker-block .maker-comment {
		width: 100%;
		float: none;
		padding: 10px;
	}
	
	#brand ul {
		width: 100%;
		margin: 10px 0;
	}
	
	#brand li {
		width: calc(50% - 20px);
		margin: 10px;
		height: auto;
		padding: 10px;
		box-sizing: border-box;
	}
	
	/* Brand Detail */
	#brand_detail {
		width: 100%;
		margin: 0;
		padding: 80px 10px 10px;
	}
	
	#brand_detail .s_navi {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	
	#brand_detail .b_area {
		width: 100%;
		float: none;
	}
	
	#brand_detail .b_area .b_detail .visual {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	
	#brand_detail .b_area .b_detail .b_text {
		width: 100%;
		float: none;
	}
	
	#brand_detail .b_area .products {
		width: 100%;
	}
	
	#brand_detail .b_area .products ul {
		width: 100%;
	}
	
	#brand_detail .b_area .products li {
		width: calc(33.333% - 20px);
		margin: 10px;
	}
	
	/* News Page */
	#news_page {
		width: 100%;
		margin: 0;
		padding: 75px 10px 10px;
	}
	
	#news_page .other_main {
		width: 100%;
		float: none;
	}
	
	/* Press Page */
	#press_page {
		width: 100%;
		margin: 0;
		padding: 75px 10px 10px;
	}
	
	#press_page .other_main ul li {
		width: calc(33.333% - 10px);
		margin: 5px;
	}
	
	/* Other Pages */
	#other_page {
		width: 100%;
		margin: 0;
		padding: 75px 10px 10px;
	}
	
	.other_main {
		width: 100%;
		float: none;
	}
	
	.other_navi {
		width: 100%;
		float: none;
		margin: 20px 0;
	}
	
	/* Footer */
	#footer {
		width: 100%;
		margin: 0;
		padding: 15px 10px;
	}
	
	#footer .f_navi {
		width: 100%;
		float: none;
		margin-bottom: 10px;
	}
	
	#footer .copy {
		width: 100%;
		float: none;
		text-align: center;
		margin: 10px 0;
	}
	
	/* Contact Page */
	#contact_page {
		width: 95%;
		margin: 75px auto 0;
		padding: 10px;
	}
	
	#contact_page li.c_tl {
		width: 100%;
		margin-bottom: 5px;
	}
	
	#contact_page li.bl {
		width: 100%;
	}
	
	/* Tables */
	.table02 {
		width: 100%;
		margin: 20px 0;
		font-size: 11px;
	}
	
	.table03 {
		width: 100%;
		font-size: 11px;
	}
	
	.table04 {
		width: 100%;
		font-size: 11px;
	}
	
	/* Company */
	#company dt {
		width: 100%;
		float: none;
		height: auto;
		margin-bottom: 5px;
	}
	
	#company dd {
		width: 100%;
		float: none;
		height: auto;
		margin-bottom: 15px;
	}
	
	#access .address {
		width: 100%;
		float: none;
		margin: 10px 0;
	}
	
	#access .map {
		width: 100%;
		float: none;
		margin: 10px 0;
	}
	
	#access .map iframe {
		width: 100%;
		max-width: 100%;
	}
}

/* ============================================
   SMALL LAPTOP / TABLET LANDSCAPE (769px to 1024px)
   ============================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	
	#container {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 20px;
	}
	
	/* Header */
	#header {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 10px 20px;
	}
	
	/* Brand Slider */
	#brand_slider {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 75px 20px 0;
	}
	
	/* Info Section */
	#info {
		width: 95%;
		margin: 10px auto;
	}
	
	/* Brand Section */
	#brand {
		width: 100%;
		margin: 0;
		padding: 10px 20px;
	}
	
	#brand .maker-block {
		width: 100%;
	}
	
	#brand ul {
		width: 100%;
	}
	
	#brand li {
		width: calc(33.333% - 20px);
		margin: 10px;
	}
	
	/* Brand Detail */
	#brand_detail {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 80px 20px 10px;
	}
	
	#brand_detail .b_area {
		width: 100%;
		max-width: 100%;
	}
	
	#brand_detail .b_area .b_detail .visual {
		width: 45%;
	}
	
	#brand_detail .b_area .b_detail .b_text {
		width: 50%;
	}
	
	/* News Page */
	#news_page {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 75px 20px 10px;
	}
	
	#news_page .other_main {
		width: 100%;
		max-width: 100%;
	}
	
	/* Press Page */
	#press_page {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 75px 20px 10px;
	}
	
	#press_page .other_main ul li {
		width: calc(25% - 10px);
	}
	
	/* Other Pages */
	#other_page {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 75px 20px 10px;
	}
	
	.other_main {
		width: 70%;
	}
	
	.other_navi {
		width: 25%;
	}
	
	/* Footer */
	#footer {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 15px 20px;
	}
	
	/* Contact Page */
	#contact_page {
		width: 90%;
		max-width: 800px;
		margin: 75px auto 0;
	}
}

/* ============================================
   DESKTOP (1025px and above)
   ============================================ */
@media screen and (min-width: 1025px) {
	
	#container {
		width: 960px;
		margin: 0 auto;
	}
	
	/* Ensure proper max-widths for large screens */
	#brand_slider {
		max-width: 940px;
	}
	
	#brand {
		max-width: 960px;
	}
	
	#brand_detail {
		max-width: 940px;
	}
}

/* ============================================
   LARGE DESKTOP (1440px and above)
   ============================================ */
@media screen and (min-width: 1440px) {
	
	#container {
		width: 1200px;
		max-width: 1200px;
	}
	
	#header {
		width: 1180px;
		max-width: 1180px;
	}
	
	#brand_slider {
		width: 1180px;
		max-width: 1180px;
	}
	
	#brand {
		width: 1200px;
		max-width: 1200px;
	}
	
	#brand li {
		width: calc(25% - 20px);
	}
	
	#brand_detail {
		width: 1180px;
		max-width: 1180px;
	}
	
	#footer {
		width: 1180px;
		max-width: 1180px;
	}
}

/* ============================================
   UTILITY: Hide on mobile/tablet
   ============================================ */
@media screen and (max-width: 768px) {
	.other_navi {
		display: none;
	}
	
	.archives_year {
		display: none;
	}
}

/* ============================================
   UTILITY: Responsive tables
   ============================================ */
@media screen and (max-width: 768px) {
	.table02,
	.table03,
	.table04 {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ============================================
   UTILITY: Construction banner responsive
   ============================================ */
@media screen and (max-width: 768px) {
	div[style*="UNDER CONSTRUCTION"] {
		font-size: 14px !important;
		padding: 8px !important;
	}
}