﻿/* 正常環境下 */
.MainArea {
	clear: both;
	padding: 0px;
	margin: auto;
	width: 100%;
	max-width: 982px;
	background-color: white;
}
.MainArea:before,
.MainArea:after { content:""; display:table; }
.MainArea:after { clear:both;}
.MainArea { zoom:1; /* For IE 6/7 */ }

.Area {
	display: block;
	float: left;
	margin: 5px 0 5px 5px;
}

.Col2 { margin: 0; width: 50%; text-align: center }
.Col2_Right { width: calc(100% - 200px); max-width: 782px }
.Col2_Left, .Col3_Left { width: 185px }
.Col3_Middle, .Col2_Right .Col2_Left { width: 552px }
.Col3_Right, .Col2_Right .Col2_Right { width: 225px }
.Col2_Right .Col3_Middle { margin: 0 5px 0 0; }
.Col2_Right .Col3_Right { margin: 0; }

.ADBanner { width: 100%; max-width: 550px }
.QProc { white-space: nowrap }
.ShowWhenSmall { display: none }
header .OrangeButton, header .GrayButton { padding: 0.2em 1em; text-align: center }

@media screen and (max-width: 1001px) and (min-width: 745px) {
	.MainArea .Col3_Middle { width: calc(100% - 200px) }
	.MainArea .Col2_Right .Col3_Middle { width: 100%; }
	.MainArea .Col3_Right img { width: calc(33% - 10px) }
	.MainArea .Col3_Right .NewBlockStyle { width: calc(50% - 7.5px); display: inline-block }
}

@media screen and (min-width: 1002px) {
	.ShowIfSmallScreen { display: none }
	.JinseBanner { width: 49% }
}

@media screen and (max-width: 1001px) {
	.ShowIfSmallScreen { display: block }
	.ADBanner { width: 100%; width: calc(100% - 2px); max-width: initial }
	.QProc { display: none }
	header .OrangeButton, header .GrayButton { padding: initial; display: inline-block; text-align: center; margin-top: 3px; font-size: 150%; width: 32% }
	/*header .OrangeButton, header .GrayButton { font-size: 150%; width: 32%; display: inline-block }*/
	.JinseBanner { width: 99% }
	.MainArea .Col3_Right { width: calc(100% - 10px) }
	.MainArea .Col3_Right .NewBlockStyle img { width: initial }
}

@media screen and (max-width: 744px) {
	.HideWhenSmall { display: none }
	.ShowWhenSmall { display: initial }
	.Col2 { width: 100% }
	.MainArea .Area.Col3_Left, .MainArea .Area.Col2_Left { display: none; width: 0 }
	.MainArea .Area.Col3_Middle, .MainArea .Area.Col2_Right { width: calc(100% - 10px) }
	.MainArea .Col3_Right img { width: 100% }
}
