/****************************************

          FlexBox

*****************************************/
	/**横並び2個のみの専用設計**/
.flex_container_box2cell {
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-flow: row wrap; /* Safari */
	flex-flow:         row wrap;
	-webkit-justify-content: space-between; /* Safari */
	justify-content:         space-between;
}

.box2cell {
	width: 49.4%;
	height: auto;
	margin: 1.2% 0 0;
	padding: 8px;
}

.box2cell:first-child,
.box2cell:nth-child(2) {
	margin: 0;
}
	/**横並び2個のみの専用設計**/

.flex_container_default {
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-flow: row wrap; /* Safari */
	flex-flow:         row wrap;
	-webkit-justify-content: flex-start; /* Safari */
	justify-content:         flex-start;
	/**コンテナ横並び(多数に対応)**/
}

.flex_container_around {
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-flow: row wrap; /* Safari */
	flex-flow:         row wrap;
	-webkit-justify-content: space-around; /* Safari */
	justify-content:         space-around;
	/**コンテナ横並び中央そろえ均等割付(多数に対応)**/
}

.flex_container_center {
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-flow: row wrap; /* Safari */
	flex-flow:         row wrap;
	-webkit-justify-content: center; /* Safari */
	justify-content:         center;
	/**コンテナ横並び中央そろえ改行あり**/
}

	@media only screen and (max-width: 480px) {
		.flex_container_box2cell,
		.flex_container_default,
		.flex_container_around,
		.flex_container_center {
			-webkit-flex-flow: row wrap; /* Safari */
			flex-flow:         row wrap;
		}
	}/*** Media Queries ***/

	/**ChangePhotoの専用設計**/
.flex_container_changephoto {
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-flow: row wrap; /* Safari */
	flex-flow:         row wrap;
	-webkit-justify-content: flex-start; /* Safari */
	justify-content:         flex-start;
	/**コンテナ横並び(多数に対応)**/
}

	@media only screen and (max-width: 768px) {
		.flex_container_changephoto {
			-webkit-flex-flow: row wrap; /* Safari */
			flex-flow:         row wrap;
		}
	}/*** Media Queries ***/

.flex_changephoto_box {
	width: 48%;
	height: auto;
	margin: 4% 4% 0 0;
	padding: 0;
}

.flex_changephoto_box:first-child {
	margin: 0 4% 0 0;
}

.flex_changephoto_box:nth-child(even),
.flex_changephoto_box:last-child {
	margin: 4% 0 0 0;
}

.flex_changephoto_box:nth-child(2) {
	margin: 0;
}

	@media only screen and (max-width: 768px) {
		.flex_changephoto_box,
		.flex_changephoto_box:first-child,
		.flex_changephoto_box:nth-child(even) {
			width: 19%;
			height: auto;
			margin: 1.25% 1.25% 0 0;
			padding: 0;
		}

		.flex_changephoto_box:nth-child(5n),
		.flex_changephoto_box:last-child {
			margin: 1.25% 0 0 0;
		}
	}/*** Media Queries ***/

.flex_changephoto_box:hover {
	cursor: pointer;
}
	/**ChangePhotoの専用設計**/

	/**Box側の設定--個数設定**/
	/**横並び2つの場合**/
.flex2box {
	width: 49.4%;
}

.flex2box:nth-child(even) {
	margin-right: 0;
}
	/**横並び2つの場合**/

	/**横並び3つの場合**/
.flex3box {
	width: 32.53333%;
}

.flex3box:nth-child(3n) {
	margin-right: 0;
}
	/**横並び3つの場合**/

	/**横並び4つの場合**/
.flex4box {
	width: 24.1%;
}

.flex4box:nth-child(4n) {
	margin-right: 0;
}
	/**横並び4つの場合**/

	/**横並び5つの場合**/
.flex5box {
	width: 19.04%;
}

.flex5box:nth-child(5n) {
	margin-right: 0;
}
	/**横並び5つの場合**/

	/**横並び6つの場合**/
.flex6box {
	width: 15.66666%;
}

.flex6box:nth-child(6n) {
	margin-right: 0;
}
	/**横並び6つの場合**/

	/**横並び7つの場合**/
.flex7box {
	width: 13.25714%;
}

.flex7box:nth-child(7n) {
	margin-right: 0;
}
	/**横並び7つの場合**/

	/**Height/Margin/Paddingの共通設定**/
.flex2box,
.flex3box,
.flex4box,
.flex5box,
.flex6box,
.flex7box {
	height: auto;
	margin: 1.2% 1.2% 0 0;
	padding: 8px;
}
	/**Height/Margin/Paddingの共通設定**/
	/**Box側の設定--個数設定**/

	/**Box側の設定--共通設定【削除･改変禁止】**/
	/**横並びセンター揃えの場合のみ適用**/
/*.box2cell:last-child,*/
.flex2box:last-child,
.flex3box:last-child,
.flex4box:last-child,
.flex5box:last-child,
.flex6box:last-child,
.flex7box:last-child {
	margin: 1.2% 0 0 0;
}

.flex2box:first-child,
.flex3box:first-child,
.flex3box:nth-child(2),
.flex4box:first-child,
.flex4box:nth-child(2),
.flex4box:nth-child(3),
.flex5box:first-child,
.flex5box:nth-child(2),
.flex5box:nth-child(3),
.flex5box:nth-child(4),
.flex6box:first-child,
.flex6box:nth-child(2),
.flex6box:nth-child(3),
.flex6box:nth-child(4),
.flex6box:nth-child(5),
.flex7box:first-child,
.flex7box:nth-child(2),
.flex7box:nth-child(3),
.flex7box:nth-child(4),
.flex7box:nth-child(5),
.flex7box:nth-child(6) {
	height: auto;
	margin: 0 1.2% 0 0;
	padding: 8px;
}

.flex2box:nth-child(2),
.flex3box:nth-child(3),
.flex4box:nth-child(4),
.flex5box:nth-child(5),
.flex6box:nth-child(6),
.flex7box:nth-child(7) {
	margin: 0;
}
	/**横並びセンター揃えの場合のみ適用**/

	@media only screen and (max-width: 768px) {
		/**横並び2つも768以下ではマージン設定**/
		.flex2box,
		.flex3box {
			width: 48.8%;
		}

		.flex4box,
		.flex5box,
		.flex5box:nth-child(5n) {
			width: 31.73333%;
		}

		.flex6box,
		.flex6box:nth-child(6n),
		.flex7box,
		.flex7box:nth-child(7n) {
			width: 23.2%;
		}

		/**Marginの共通設定**/
		.flex2box:first-child,
		.flex3box:first-child,
		.flex3box:nth-child(2),
		.flex4box:first-child,
		.flex4box:nth-child(2),
		.flex5box:first-child,
		.flex5box:nth-child(2),
		.flex6box:first-child,
		.flex6box:nth-child(2),
		.flex6box:nth-child(3),
		.flex7box:first-child,
		.flex7box:nth-child(2),
		.flex7box:nth-child(3) {
			margin: 0 2.4% 0 0;
		}

		.flex2box,
		.flex3box,
		.flex3box:nth-child(3),
		.flex4box,
		.flex4box:nth-child(4n),
		.flex5box,
		.flex5box:nth-child(4n),
		.flex5box:nth-child(5n),
		.flex6box,
		.flex6box:nth-child(5n),
		.flex6box:nth-child(6n),
		.flex7box,
		.flex7box:nth-child(5n),
		.flex7box:nth-child(6n),
		.flex7box:nth-child(7n) {
			margin: 2.4% 2.4% 0 0;
		}

		.flex2box:last-child,
		.flex3box:last-child,
		.flex3box:nth-child(even),
		.flex4box:nth-child(3n),
		.flex4box:last-child,
		.flex5box:nth-child(3n),
		.flex5box:last-child,
		.flex6box:last-child,
		.flex6box:nth-child(4n),
		.flex7box:last-child,
		.flex7box:nth-child(4n) {
			margin: 2.4% 0 0 0;
		}

		.flex2box:nth-child(2),
		.flex3box:nth-child(2),
		.flex4box:nth-child(3),
		.flex5box:nth-child(3),
		.flex6box:nth-child(4),
		.flex7box:nth-child(4) {
			margin: 0;
		}
		/**Marginの共通設定**/
	}/*** Media Queries ***/

	@media only screen and (max-width: 640px) {
		.flex5box,
		.flex6box,
		.flex6box:nth-child(4n),
		.flex6box:nth-child(6n),
		.flex7box,
		.flex7box:nth-child(4n),
		.flex7box:nth-child(7n) {
			width: 31.73333%;
			margin: 2.4% 2.4% 0 0;
		}

		.flex5box:nth-child(3n),
		.flex6box:nth-child(3n),
		.flex7box:nth-child(3n)  {
			margin: 2.4% 0 0 0;
		}

		.flex5box:nth-child(3),
		.flex6box:nth-child(3),
		.flex7box:nth-child(3)  {
			margin: 0;
		}
	}/*** Media Queries ***/

	/**box2cellは480以下では1列表示固定**/
	@media only screen and (max-width: 480px) {
		.box2cell,
		.box2cell:first-child,
		.box2cell:nth-child(2) {
		    width: 100%;
		    margin: 0 0 3%;
		}

		.box2cell:last-child {
		    margin: 0;
		}
	}/*** Media Queries ***/

	@media only screen and (max-width: 480px) {
		/**スマホでも2つ表示にする場合コメントアウト**/
		/**以下全てコメントアウトすると1～5は2つ表示6～7は3つ表示になる**/
		/*
		.flex2box,
		.flex2box:first-child,
		.flex2box:nth-child(2),
		.flex3box,
		.flex3box:first-child,
		.flex3box:nth-child(2),
		.flex3box:nth-child(4n),
		.flex3box:nth-child(3n),
		.flex4box,
		.flex4box:first-child,
		.flex4box:nth-child(2),
		.flex4box:nth-child(3),
		.flex4box:nth-child(3n),
		.flex4box:nth-child(4n),
		.flex5box,
		.flex5box:first-child,
		.flex5box:nth-child(2),
		.flex5box:nth-child(4),
		.flex5box:nth-child(8),
		.flex5box:nth-child(3n),
		.flex5box:nth-child(5n),
		.flex6box,
		.flex6box:first-child,
		.flex6box:nth-child(2),
		.flex6box:nth-child(3n),
		.flex6box:nth-child(4n),
		.flex6box:nth-child(5n),
		.flex6box:nth-child(6n),
		.flex7box,
		.flex7box:first-child,
		.flex7box:nth-child(2),
		.flex7box:nth-child(3),
		.flex7box:nth-child(3n),
		.flex7box:nth-child(4n),
		.flex7box:nth-child(5n),
		.flex7box:nth-child(7n) {
			width: 100%;
			margin: 0 0 3%;
		}

		.flex2box:last-child,
		.flex3box:last-child,
		.flex4box:last-child,
		.flex5box:last-child,
		.flex6box:last-child,
		.flex7box:last-child {
			margin: 0;
		}
		*/
	}/*** Media Queries ***/
	/**スマホでも2つ表示にする場合コメントアウト**/

	/**スマホでも2つ表示にする場合以下をONにする**/
	/**/
	@media only screen and (max-width: 480px) {
		.flex4box,
		.flex4box:nth-child(3n),
		.flex5box,
		.flex5box:nth-child(3n),
		.flex5box:nth-child(5n),
		.flex6box,
		.flex6box:nth-child(3n),
		.flex6box:nth-child(4n),
		.flex7box,
		.flex7box:nth-child(3n),
		.flex7box:nth-child(4n),
		.flex7box:nth-child(5n),
		.flex7box:nth-child(7n) {
			width: 48.5%;
			margin: 3% 3% 0 0;
		}

		.flex4box:first-child,
		.flex5box:first-child,
		.flex6box:first-child,
		.flex7box:first-child {
			margin: 0 3% 0 0;
		}

		.flex4box:nth-child(even),
		.flex5box:nth-child(even),
		.flex6box:nth-child(even),
		.flex7box:nth-child(even) {
			margin: 3% 0 0 0;
		}

		.flex4box:nth-child(2),
		.flex5box:nth-child(2),
		.flex6box:nth-child(2),
		.flex7box:nth-child(2) {
			margin: 0;
		}

		.flex4box:last-child,
		.flex5box:last-child,
		.flex6box:last-child,
		.flex7box:last-child {
			margin: 3% 0 0 0;
		}
	}/*** Media Queries ***/
	/**スマホでも2つ表示にする場合以下をONにする**/
	/**/
}/*** Media Queries ***/
	/**Box側の設定--共通設定【削除･改変禁止】**/

	/**Box内に入れたコンテンツで高さを揃える**/
.height_uniform {
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-direction: column;
}

.flexbox_note {
	margin-top: auto;
	font-size: 70%;
}


	/**タイルスタイル**/
.tile_style {
	width: 100%;
    margin: 0;
	padding: 0;
	text-align: center;
}

.tile_style a {
	margin: 0;
	padding: 4px;
	display: block;
	border: 1px solid #DFDFDF;
	text-align: center;
}

.tile_style li {
	width: 10%;
	/**全体幅に合わせて調整**/
	height: auto;
	display: inline-block;
    margin: 0 0.5% 4%;
    padding: 0;
    vertical-align: top;
}
	/**タイルスタイル**/
