@charset "utf-8";
@import "base.less";
@import "../js/fotorama/fotorama.css";

main#index {
	article {
		section {
			h2 {
				text-align: center;
			}
			
			/* スマホ用にトップページのみメインメニューもどき */
			&.sec05 {
				nav {
					display: none;
					@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
						width: 100%;
						display: table;
						margin: auto;
						&.main {
							width: 100%;
						  table-layout: fixed;
							@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
								width: initial;
							}
							ul {
								display: table-row;
								&:last-of-type {
									li {
										border-bottom: solid 1px @blue;
									}
								}
								li {
									display: table-cell;
									vertical-align: middle;
									text-align: center;
									width: calc(100% / 3);
									background-color: @white;
									padding-top: 10px;
									border-top: solid 1px @blue;
									border-left: solid 1px @blue;
									position: relative;
									top: 0;
									left:0;
									&:last-of-type {
										border-right: solid 1px @blue;
									}
									img {
										min-height: 30px;
										max-height: 50px;
										width: 100%;
									}
									span {
										display: none;
									}
									&:after {
										display: block;
										content:"";
										height: 5px;
										width: 80%;
										margin: 5px auto 0;
										background-color: transparent;
									}
									&:hover,
									&.active {
										&:after {
											background-color: @blue;
										}
									}
								}
							}
						}/* end element nav.main */
					}
				}/* end element .menu2 */
			}/* end element section.sec05 */
			/* スマホ用にトップページのみメインメニューもどき 終了 */

			&.sec01 {/* fotorama image slider */
				position: relative;
				top:  0;
				left: 0;
				width:100%;
				.on_fotorama {
					width:100%;
					margin: auto;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					-webkit-transform: translateY(-50%);
					z-index: 50;
					display: inline-block;
					>div {
						width: @width1;
						margin: auto;
						@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
							width: initial;
						}
						a {
							display: inline-block;
							&.how_to_hbg {
								@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
									width: 50%;
								}
								img {
									width: 500px;
									@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
										width: 100%;
									}
								}
							}
							&.branding,
							&.request {
								position:absolute;
								right: 0;
								@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
									display: none;
								}
								img {
									height: 150px;
								}
							}
							&.request {
								top: 150px;
							}
							span {
								display: none;
							}
							&:hover {
								opacity: .5;
							}
						}
					}
				}
				.fotorama {
				}
			}/* end element secsion.sec01 */
			
			
			&.sec02 {/* ニュース */
				/* tab menu */
				>div {
					@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
						width: 100%;
					  margin: 0;
					 }
					.tab {
						display: table;
						border-collapse: separate;
						border-spacing: 10px;
					  table-layout: fixed;
					  text-align: center;
					  width: 100%;
						@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
							display: block;
						  width: initial;
						  margin-bottom: 20px;
						}
						ul {
							display: table-row;
							@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
								display: block;
								text-align: left;
							}
							li {
								display: table-cell;
								text-align: center;
								border-bottom:solid 5px @black;
								@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
									display: inline-block;
								  min-width: 32%;
									border-bottom: solid 3px;
								}
								@media all and (min-width: @layout-min-width) and (max-width: @layout-small-width) {
								  min-width: 48%;
								}
								span {
									display: block;
									font-weight:  bold;
									padding: 10px 0;
									@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
										padding: 5px 0;
										font-size: .8rem;
									}
								}
								&:hover,
								&.active {
									border-bottom:solid 5px @blue;
									@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
										border-bottom: solid 3px ;
									}
								}
							}
						}
					}/* end element secsion.sec02 .tab */
					/* news list area */
					.content {
						>div {
							display: none;/* カテゴリタブをクリックで表示する */
							&.active {
								display: block;
							}
							ul {
								&:extend(.table);
								border-spacing: 10px;
								width: 100%;
								@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
									text-align: left;
									display: block;
								}
								li {
									&:extend(.table .tr);
									@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
										display: block;
									}
									span {
										&:extend(.table .tr .td);
										vertical-align: middle;
										padding: 5px 10px;
										text-align: left;
										@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
											font-size: .8rem;
											display: inline-block;
										}
										&:nth-of-type(1) {
											text-align: center;
											width: 100px;
											white-space: nowrap;
											@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
												width: initial;
												padding: 0 10px;
											}
										}
										&:nth-of-type(2) {
											text-align: center;
											font-weight: bold;
											font-size: .8rem;
											width: 150px;
											white-space: nowrap;
											&:extend(.moz05);
											@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
												width: initial;
												font-size: .8rem;
												padding: 5px 20px;
											}
										}
										&:nth-of-type(3) {
											a {
												@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
													font-size: .8rem;
												}
											}
										}
									}
								}
							}
						}
					}/* end element secsion.sec02 .content */
				}
			}/* end element secsion.sec02. */
			
			
			&.sec03 {/* トピックス */
				>div {
					@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
						margin: 0;
						width: 100%;
					}
					h2 {
						margin-bottom: 20px;
					}
					.list {
						width: 49%;
						display: inline-block;
						@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
							width: initial;
						}
						&:nth-of-type(1) {/* 文化学園 */
							padding-right: 20px;
							@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
								padding-right: 0;
							}
							strong {
								color: @univ_color_common;
								&:before {
									background-color: @univ_color_common;
								}
								&:after {
									background-color: @univ_color_common;
								}
							}
						}
						&:nth-of-type(2) {/* 文化学園短期大学*/
							padding-left: 20px;
							@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
								padding-left: 0;
							}
							strong {
								color: @junior_univ_color_common;
								&:before {
									background-color: @junior_univ_color_common;
								}
								&:after {
									background-color: @junior_univ_color_common;
								}
							}
						}
						strong {
							display: block;
							font-size: 1.4rem;
							margin-bottom: 20px;
							text-align: center;
							position: relative;
							@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
								font-size: 1rem;
							}
							&:before,
							&:after {
								position: absolute;
								top: 50%;
								display: inline-block;
								content:"";
								width: 25%;
								height: 2px;
							}
							&:before {
								margin-right: 5%;
								left: 0;
							}
							&:after {
								right: 0;
								margin-left: 5%;
							}
						}
						.table {
							.tr {
								.td {
									width: 50%;
									vertical-align: top;
									&:nth-of-type(1) {
										padding-right: 20px;
										@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
											padding-right: 0;
										}
									}
									@media all and (min-width: @layout-min-width) and (max-width: @layout-small-width) {
										padding-right: 0;
										width: 100%;
										margin-bottom: 10px;
										display: block;
									}
									.thumb {
										position: relative;
										z-index: 0;
										height: 150px;
										overflow: hidden;
										span {/* 日付設定 */
											position: absolute;
											top: 5px;
											left: 5px;
											z-index: 1;
											background-color: @white;
											padding: 2px 5px;
											display: inline-block;
											color: @blue;
											font-weight: bold;
											@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
												font-size: .6rem;
											}
										}
										img {
											min-width: 100%;
											max-width: 500px;
											max-height: 500px;
											position: relative;
											top: 50%;
											left: 50%;
											transform: translateY(-50%) translateX(-50%);
											-webkit-transform: translateY(-50%) translateX(-50%);
										}
									}
									.text {
										span {
											display: block;
											padding: 5px 10px;
											font-weight: bold;
											color: @white;
											@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
												font-size: .8rem;
											}
										}
									}
								}
							}
						}
					}
				}
			}/* end element secsion.sec03. */
			
			
			&.sec04 {/* ４つのキャンパス */
				h2 {
					display: block;
					font-size: 1.4rem;
					line-height: initial;
					text-align: center;
					position: relative;
					padding: 40px 0;
					background-color: @gray03;
					@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
						font-size: 1rem;
					}
					span {
						display: inline-block;
						&:before,
						&:after {
							position: absolute;
							top: 50%;
							display: inline-block;
							content:"";
							width: 100px;
							height: 4px;
							background-color: @black;
							@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
								display: none;;
							}
						}
						&:before {
							transform: translateX(-100%) translateY(-100%);
							-webkit-transform: translateX(-100%) translateY(-100%);
						}
						&:after {
							transform: translateX(10%) translateY(-100%);
							-webkit-transform: translateX(10%) translateY(-100%);
						}
					}
				}
				>div {
					.list {
						text-align: center;
						&:nth-of-type(1) {/* 文化学園 */
							&:extend(.dot_color_univ_common);
							strong {
								color: @univ_color_common;
								border-top: solid 5px @univ_color_common;
							}
						}
						&:nth-of-type(2) {/* 文化学園短期大学*/
							&:extend(.dot_color_junior_common);
							strong {
								color: @junior_univ_color_common;
								border-top: solid 5px @junior_univ_color_common;
							}
						}
						strong {
							font-size: 1.4rem;
							background-color: @white;
							display: block;
							padding: 20px 0;
							@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
								font-size: 1rem;
							}
						}
						>div {
							width: @width1;
							margin: auto;
							@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
								width: initial;
							}
							.table {
								width: initial;
								table-layout: fixed;
								max-width: 100%;
								border-spacing: 0;
								margin: 0 auto;
								background: none;
								@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
									width: 100%;
									display: block;
								}
								.tr {
									@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
										width: 100%;
										display: block;
									}
									.td {
										padding: 0;
										@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
											width: 100%;
											display: block;
										}
										>div {
											display: table;
											border-spacing: 10px;
								table-layout: fixed;
											>div {
												display: table-row;
												>div {
													display: table-cell;
													width: 280px;
													color: @white;
													@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
														width: initial;
													}
													a {
														text-decoration: none;
														img {
															max-width: 500px;
															max-height: 500px;
															width: 100%;
															display: block;
														}
														>span {
															display: block;
															padding: 10px;
															font-weight: bold;
															@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
																font-size: .8rem;
																overflow: hidden;
															}
															>span {
																font-size: .9rem;
																font-weight: normal;
																padding: 0 5px;
																@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
																	font-size: .7rem;
																}
															}
														}
													}
														&.junior_univ_space {/* tableの枠を空白で埋める用 */
															display: none;
															@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
																display: table-cell;
																width: 50%;
															}
														}
												}
											}
										}
									}
								}
							}
						}
					}
					.campus {/* 各キャンパス詳細 */
						background-color: @gray05;
						>div {
							padding: 10px;
							width: @width1;
							margin: auto;
							@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
								width: 100%;
							}
							&.table {
								border-spacing: 20px;
								@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
								display: block;
								border-spacing: 0;
								width: 100%;
								}
								.tr {
									@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
										display: block;
									}
									.td {
										background-color: @white;
										padding: 10px;
										@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
											display: block;
											margin-bottom: 10px;
										}
										strong {
											display: block;
											text-align: center;
											padding: 10px;
											margin-bottom: 10px;
											font-weight: bold;
											border: solid 2px;
											@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
												padding: 5px 20px;
												text-align: left;
												font-size: .8rem;
											}
										}
										&:nth-of-type(1) strong {/* 長束キャンパス */
											color: @orange;
										}
										&:nth-of-type(2) strong {/* 広島坂キャンパス */
											color: @skyblue;
										}
										&:nth-of-type(3) strong {/* 呉阿賀キャンパス */
											color: @green;
										}
										&:nth-of-type(4) strong {/* 呉郷原キャンパス */
											color: @azuki;
										}
										p {
										}
										.univ {
											>span {
												font-weight: bold;
												@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
													font-size: .8rem;;
												}
												&:before {
													content:"■ ";
													@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
														font-size: .8rem;;
													}
												}
											}
											ul {
												margin: 10px 5px;
												li {
													color: @white;
													display: inline-block;
													margin-bottom: 5px;
													a {
														text-decoration: none;
														span {
															padding: 5px 10px;
															display: block;
															font-size: .9rem;
															white-space: nowrap;
															@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
																white-space: initial;
																font-size: .8rem;
															}
														}
													}
												}
											}
										}/* end element secsion.sec04 .cumpus .table .univ */
										.map {
											ul {
												li {
													display: inline-block;
													a {
														text-decoration: none;
														span {
															font-weight: bold;
															color: @black;
															@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
																font-size: .8rem;;
															}
															&:before {
																content:"□ ";
																display: inline-block;
																@media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
																	font-size: .8rem;;
																}
															}
														}
													}
												}
											}
										}
									}
								}
							}/* end element secsion.sec04 .cumpus .table */
						}
					}
				}
			}/* end element secsion.sec04. */
		}
	}
}