@charset "utf-8";

/*###################################

●ボックス分けのクラス（PC向け）
・初期値で幅900pxなので適宜修正する事。
・ボックスサイズの計算は下記が便利。
http://zeller-lab.com/img-width/

※ブレークポイントについて
・480px…iPhone（横）
・768px…iPad（横）
・1024px…IPad（縦）
http://www.nascha.jp/html_memo/mobile.html

●よく使うクラスの覚え書き

クラス名:first-child{最初の要素に別の設定をする。IE7〜}
クラス名:last-child{最後の要素に別の設定をする。IE8〜}
クラス名:nth-child(even or odd or 数値) {偶数ならeven。}

###################################*/


/*カラム分けの親ボックス（Firefox 2 〜、Safari 2 〜、Opera 9 〜、IE8 〜）*/
html>/**/body div.grid-box {
	display: table;
	vertical-align: top;
}

/*子（Firefox 2 〜、Safari 2 〜、Opera 9 〜、IE8 〜）*/
html>/**/body div.grid-box div.cell {
	display: table-cell;
	vertical-align: top;
}

/*カラム分けの親ボックス（〜IE7）*/
html*div.grid-box {
	height: 1%;
}

/*子（〜IE7）*/
html*div.grid-box div.cell {
	float: left;
}

/*=============================*/

/*意味段落のまとまり*/
.paragraph{
margin: 0 0 8em 0;
padding: 0;
}

/*段落の最小のまとまり*/
.column{
margin: 0 0 8em 0;
padding: 0;
}
.single_column .column{
margin: 0 0 10em 0;
padding: 0;
}
.single_column .column.nm{ margin-bottom: 3em; }
.column:last-child {
	margin-bottom: 0;
}
.column.last { margin-bottom: 1em; }

/*背景に色ベタを敷く時*/
.color-box{
margin: 0 0 7em 0;
padding: 20px;
position: relative;
}
.color-box:last-child {
	margin-bottom: 0;
}

.color-linebox{
box-sizing: border-box;
margin: 0 0 7em 0;
padding: 20px;
position: relative;
border:3px solid #c0d5ad;
border-radius: 15px;
}

.color-linebox.nm{
margin: 0 0 1em 0;
}

.color-linebox:last-child {
	margin-bottom: 0;
}

/*カラム分けの親ボックス*/
.grid-box{
position: relative;
margin: 0 0 7em 0;
padding: 0;
width:100%;
}
.single_column .grid-box{
position: relative;
margin: 0 0 7em 0;
padding: 0;
width:100%;
}
.grid-box:last-child {
	margin-bottom: 0;
}
.winter-close .grid-box:last-child,
.winter-open .grid-box:last-child {
	margin-bottom: 7em;
}
.winter-close .color-box .grid-box:last-child,
.winter-open .color-box .grid-box:last-child {
	margin-bottom: 0;
}

.grid-box:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
}


/*子セルの初期値*/
.grid-box .cell{
position: relative;
margin: 0;
padding: 0;
}

/*マージンをあえてなくす*/
.grid-box.nm{ margin-bottom: 0.8em; }

/*マージンをちょっと狭く*/
.grid-box.mb{ margin-bottom: 2em; }

/*マージンをあえて広く*/
.grid-box.lm{ margin-bottom: 9em; }

/*=============================*/

/*等分割*/

.half .cell {
	margin: 0;
	padding-left: 20px;
	width: 340px;
}
.half .cell:first-child {
	padding-left: 0;
}

/*色ベタboxでの等分割*/
.color-box .half .cell {
	margin: 0;
	padding-left: 20px;
	width: 320px;
}
.color-box .half .cell:first-child {
	padding-left: 0;
}

/*トップページでの等分割*/
.single_column .half .cell {
	margin: 0;
	padding-left: 18px;
	width: 466px;
}
.single_column .half .cell:first-child {
	padding-left: 0;
}

/*トップページ色枠での等分割*/
.single_column .color-linebox .half .cell {
	margin: 0;
	padding-left: 18px;
	width: 442px;
}
.single_column .color-linebox .half .cell:first-child {
	padding-left: 0;
}

/*=============================*/

/*3分割*/
.three .cell {
	margin: 0;
	padding-left: 20px;
	width: 220px;
}
.three .cell:first-child {
	padding-left: 0;
}

/*色ベタboxでの3分割*/
.color-box .three .cell {
	margin: 0;
	padding-left: 21px;
	width: 206px;
}
.color-box .three .cell:first-child {
	padding-left: 0;
}

/*トップページでの3分割*/
.single_column .three .cell {
	margin: 0;
	padding-left: 19px;
	width: 304px;
}
.single_column .three .cell:first-child {
	padding-left: 0;
}


/*=============================*/

/*4分割*/
.four .cell {
	margin: 0;
	padding-left: 20px;
	width: 160px;
}
.four .cell:first-child {
	padding-left: 0;
}

/*色ベタboxでの4分割*/
.color-box .four .cell {
	margin: 0;
	padding-left: 20px;
	width: 150px;
}
.color-box .four .cell:first-child {
	padding-left: 0;
}

/*トップページでの4分割*/
.single_column .four .cell {
	margin: 0;
	padding-left: 22px;
	width: 221px;
}
.single_column .four .cell:first-child {
	padding-left: 0;
}



/*=============================*/

/*5分割*/
.five .cell {
	margin: 0;
	padding-left: 20px;
	width: 164px;
}
.five .cell:first-child {
	padding-left: 0;
}

/*=============================*/

/*1：2 左が大きい*/
.one-two .cell {
	margin: 0;
	padding-left: 20px;
	width: 220px;
}
.one-two .cell:first-child {
	padding-left: 0;
	width: 460px;
}

/*色ベタboxでの1：2 左が大きい*/
.color-box .one-two .cell {
	margin: 0;
	padding-left: 21px;
	width: 206px;
}
.color-box .one-two .cell:first-child {
	padding-left: 0;
	width: 433px;
}


/*1：3 左が大きい*/
.one-three .cell {
	margin: 0;
	padding-left: 20px;
	width: 160px;
}
.one-three .cell:first-child {
	padding-left: 0;
	width: 520px;
}

/*色ベタboxでの1：3 左が大きい*/
.color-box .one-three .cell {
	margin: 0;
	padding-left: 20px;
	width: 150px;
}
.color-box .one-three .cell:first-child {
	padding-left: 0;
	width: 490px;
}


/*=============================*/

/*2：1 右が大きい*/
.two-one .cell {
	margin: 0;
	padding-left: 20px;
	width: 460px;
}
.two-one .cell:first-child {
	padding-left: 0;
	width: 220px;
}

/*色ベタboxでの2：1 右が大きい*/
.color-box .two-one .cell {
	margin: 0;
	padding-left: 21px;
	width: 433px;
}
.color-box .two-one .cell:first-child {
	padding-left: 0;
	width: 206px;
}


/*3：1 右が大きい*/
.three-one .cell {
	margin: 0;
	padding-left: 20px;
	width: 520px;
}
.three-one .cell:first-child {
	padding-left: 0;
	width: 160px;
}

/*色ベタboxでの3：1 右が大きい*/
.color-box .three-one .cell {
	margin: 0;
	padding-left: 20px;
	width: 490px;
}
.color-box .three-one .cell:first-child {
	padding-left: 0;
	width: 150px;
}


/*=============================*/

/*トップページ　1：2 左が大きい*/
.single_column .one-two .cell {
	margin: 0;
	padding-left: 19px;
	width: 627px;
}
.single_column .one-two .cell:first-child {
	padding-left: 0;
	width: 304px;
}

/*トップページ　2：1 右が大きい*/
.single_column .two-one .cell {
	margin: 0;
	padding-left: 19px;
	width: 304px;
}
.single_column .two-one .cell:first-child {
	padding-left: 0;
	width: 627px;
}