/****************************************



          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;

}

	/**タイルスタイル**/