@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 1. 全体リセット & 基本設定 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
*, *:before, *:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: "メイリオ", Meiryo, "century gothic", "Josefin Sans", Futura, Helvetica, Arial, sans-serif;
}

body {
	-webkit-text-size-adjust: 100%;
	background: #5B3300;
	margin: 0;
	padding: 0;
	font: 17px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
	overflow-x: hidden; /* スマホでの不要な横スクロールを防止 */
}

a:link, a:visited {
	text-decoration: underline;
	color: #EC4413;
}
a:active { text-decoration: underline; }
a:hover { text-decoration: none; }

p { font: 17px/160% Verdana, Geneva, Arial, Helvetica, sans-serif; }

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2. 独自レイアウト構造（レスポンシブ） ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 全体枠 */
#container {
	margin: 0 auto;
	width: 100%;
	max-width: 825px; /* PCでの最大幅 */
	background: #f5efd9;
}

/* ヘッダー */
#header h1, #header a {
	padding: 10px 0 0 10px;
	font-family: "Helvetica", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	line-height: 1.3em;
	color: #5A3501;
	text-align: left;
}

/* 画像・メディアのレスポンシブ自動縮小 */
img, iframe, video, .j-content img {
	max-width: 100% !important;
	height: auto !important;
}

/* ナビゲーション（メニュー）とメインコンテンツの配置基本設定 */
#navigation {
	width: 100%;
	padding: 15px;
	background: #d3ae81;
}

#content {
	width: 100%;
	padding: 15px;
}

/* ■ スマホ表示時（768px以下）：本文を上に、メニューを下に配置 */
@media only screen and (max-width: 768px) {
	#container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	#content {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1; /* 本文を1番目（先頭）にする */
	}
	#navigation {
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2; /* メニューを2番目（本文の下）にする */
	}
}

/* ■ パソコン表示時（画面幅769px以上）は左右2カラム */
@media only screen and (min-width: 769px) {
	#container {
		display: block; /* PCではFlexboxを解除 */
	}
	#navigation {
		float: left;
		width: 240px; /* メニューの横幅 */
		padding: 17px;
	}
	#content {
		float: right;
		width: 585px; /* 本文の横幅 */
		padding: 17px;
	}
}

/* フッター（カラム解除） */
#footer {
	clear: both;
	margin-top: 10px;
	background: url(https://u.jimcdn.com/cms/o/s0666ac89740a625e/userlayout/img/footer-bg.gif?t=1426649254) repeat-x top;
	min-height: 65px;
}

#footer .gutter {
	min-height: 30px;
	padding: 20px 15px 0 15px;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 3. 画像メニュー・インデント調整 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.menuidt1 { margin: 0; }
.menuidt2 { margin: 0 0 0 10px; }
.menuidt3 { margin: 0 0 0 20px; }

/* スマホ表示時はインデント量と画像を調整 */
@media only screen and (max-width: 768px) {
	.menuidt2 { margin: 0 0 0 5px; }
	.menuidt3 { margin: 0 0 0 10px; }
	
	#navigation a img {
		max-width: 100% !important;
		height: auto !important;
		margin: 2px 0 !important;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 4. 見出し・装飾 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#container h2 {
	font: bold 14px/100% "Trebuchet MS", Verdana, sans-serif;
	background: #a21e11;
	color: #f5efd9;
	vertical-align: middle;
	padding: 8px 10px;
	margin: 10px 0;
}

#container h3 {
	font: bold 14px/100% "Trebuchet MS", Verdana, sans-serif;
	color: #5A3501;
	background-image: url(https://u.jimcdn.com/cms/o/s0666ac89740a625e/userlayout/img/apple.gif?t=1426652454);
	background-repeat: no-repeat;
	padding: 5px 0 5px 25px;
	margin: 10px 0;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 5. 本文内・スマホはみ出し完全防止 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#content * {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

#content table {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
	width: 100% !important;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 6. ユーティリティ・表示切替 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.center { margin: 0 auto; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.sm-display { display: block; }
.tb-display { display: none; }
.pc-display { display: none; }

@media only screen and (min-width: 641px) {
	.sm-display { display: none; }
	.tb-display { display: block; }
	.pc-display { display: none; }
}

@media only screen and (min-width: 769px) {
	.sm-display { display: none; }
	.tb-display { display: none; }
	.pc-display { display: block; }
}

.bg-color-base { background-color: #ffffff; }
.bg-color-assort { background-color: #f5f5f5; }
.bg-color-accent { background-color: #6b67fc; }
.text-color-base { color: #030136; }
.text-color-assort { color: #818181; }
.text-color-accent { color: #d3d8f6; }