@charset "UTF-8";

/*-- ==================================================== -*/
/*-- ▼このページ用のレイアウトを記述したCSS（パターンC） -*/
/*-- ==================================================== -*/

/* ======================================= */
/* ▼横幅600px～849pxの場合に適用されるCSS */	/* ※この部分の解説は、記事4ページ目をご参照下さい。 */
/* ======================================= */
@media (max-width: 600px) {

	body {
		padding: 			0;
		margin: 			0 auto;

		width:  			100%;			/* 追加 */

	}


	p.navi_box {
		margin: 				0;
		padding: 				0;
		}

	p.navi_box img {
		margin: 				0.25em 1em;
/*
		padding-top: 			0.5em;
		padding-bottom: 		0.5em;

		padding-left: 			1em;
		padding-right: 			0.5em;
*/
		width: 					85%;
	}


	.txtTwoCellBox {

/*
			color: 				#552200;
*/
			border-radius: 		0px 0px 10px 10px;
			background-color: 	#fff7ef;

			width: 				98%;
			float: 				left;
	}

	.linkspc {
			margin: 			0.5em;
			width: 				98%;
			float: 				left;
	}

	.otherspc {
			margin: 			0 0 10px 0;
			padding: 			0.5em;
			width: 				98%;
			float: 				left;
	}

	.recSpcTtl {
			text-align: 		center;
			width: 				100%;			
			float: 				left;
	}

	.recSpcCel {
			width: 				100%;
			float: 				left;
	}

	.txtOne {
			margin-left: 		auto;
			font-size: 			normal;
			padding: 			0;
			text-align: 		left;
			width: 				90%;
			clear: 				both;
	}


	.lkspc {
			color: 				#FF0000;
			width: 				100%;
			float: 				left;
	}

	.txtThreCellBox {
			color: 				#552200;
			width: 				100%;
			float: 				left;
	}

	.txtFourCellBox {
			color: 				#552200;
			width: 				50%;
			float: 				left;
	}

	.picfull6 {
			margin: 			0.5em;
			text-align: 		center;
	}

	.picfull6 img{
			width: 				95%;
	}

	.picfull4 {
			margin: 			0.5em;
			text-align: 		center;
	}

	.picfull4 img{
			width: 				60%;
	}

	/* ▼サイドカラムの装飾 */
	.side-column {
		text-align: center;   /* 内部のインラインブロックを中央に寄せる */
		padding: 1em 0.2em;   /* 上下に若干の余白を設ける */
	}

	/* ▼サイドカラムの内側だけで各ボックスを2段組にする */
	.side-box {
		display: inline-block;  /* インラインブロック化 */
		width: 98%;             /* 横幅を48%に(2段組にするため) */
		vertical-align: top;    /* 横並びのブロック間では上端を揃える */
		margin: 0;              /* 外側の余白をなくす */
		text-align: left;       /* ボックス内部は左寄せ */
	}

	/* ▼サイドカラムの内側だけで各ボックスを2段組にする */
	.side-box_bn {
		display: inline-block;  /* インラインブロック化 */
		width: 48%;             /* 横幅を48%に(2段組にするため) */
		vertical-align: top;    /* 横並びのブロック間では上端を揃える */
		margin: 0;              /* 外側の余白をなくす */
		text-align: left;       /* ボックス内部は左寄せ */
	}


}


/* ======================================= */
/* ▼横幅600px～849pxの場合に適用されるCSS */	/* ※この部分の解説は、記事4ページ目をご参照下さい。 */
/* ======================================= */
@media (min-width: 600px) and (max-width: 849px) {

	body {
		padding: 			0;
		margin: 			0 auto;

		width:  			100%;			/* 追加 */

	}


	/* ▼サイドカラムの装飾 */
	.side-column {
		text-align: center;   /* 内部のインラインブロックを中央に寄せる */
		padding: 1em 0.2em;   /* 上下に若干の余白を設ける */
	}

	/* ▼サイドカラムの内側だけで各ボックスを2段組にする */
	.side-box {
		display: inline-block;  /* インラインブロック化 */
		width: 48%;             /* 横幅を48%に(2段組にするため) */
		vertical-align: top;    /* 横並びのブロック間では上端を揃える */
		margin: 0;              /* 外側の余白をなくす */
		text-align: left;       /* ボックス内部は左寄せ */
	}

	.side-box_bn {
		display: inline-block;  /* インラインブロック化 */
		width: 48%;             /* 横幅を48%に(2段組にするため) */
		vertical-align: top;    /* 横並びのブロック間では上端を揃える */
		margin: 0;              /* 外側の余白をなくす */
		text-align: left;       /* ボックス内部は左寄せ */
	}

}


/* ==================================== */
/* ▼横幅850px以上の場合に適用されるCSS */	/* ※この部分の解説は、記事3ページ目をご参照下さい。 */
/* ==================================== */
@media (min-width: 850px) {

	/* ▼ページレイアウト */
	.page-cover {
		display: flex;       /* フレキシブルボックスでレイアウト */
   		flex-direction: row; /* 横並びにする */
		align: center;
	}

	/* ▼メインカラムの装飾 */
	.main-column {
		align: 			center;
		width: 			95%;
		padding: 		0.25em;
	}

}