@charset "UTF-8";

@import "./const.less";

/*■■■■■■■■■■■■■■■■■■■■■■■■■■
 解像度が モバイル用 のスタイル
  ■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (max-width: 640px) { /* このサイズ以下の場合に適用 */

	/*+++++++++++++++++++++++++++++
	 ページフッター
	 +++++++++++++++++++++++++++++*/
	.page-footer {
		padding: 10px 0 10px 0;
		border-radius: 0;

		.moveTop {
			right: 15px;
		}
	}

	/*-----------------------------
	 メニュー
	 -----------------------------*/
	.menu-box {
		margin-bottom: 10px;

		ul:after {
			content: "";
			display: block;
			clear: both;
		}

		li, a {
			text-decoration: none;
		}
		li {
			display: block;
			float: left;
			width: 32%;
			margin-right: 3px;
			margin-bottom: 3px;
		}
		a {
			background-color: @menu_bg_color_deactive;
			padding: 15px 0 15px 0;
			display: block;
			color: @menu_str_color;
			font-size: 14px;
			text-align: center;
		}
	}

	/*+++++++++++++++++++++++++++++
	 メイン
	 +++++++++++++++++++++++++++++*/
	.main {

		/*+++++++++++++++++++++++++++++
		 文字サイズ
		 +++++++++++++++++++++++++++++*/
		h1 {
			font-size: 22px;
		}
		h2 {
			font-size: 18px;
		}
		h3 {
			font-size: 16px;
		}
		h4 {
			font-size: 14px;
		}
		h5 {
			font-size: 14px;
		}
		p , span, a , li , aside {
			line-height: 20px;
			font-size: 14px;
		}

		/*-----------------------------
		 ページ見出し（PC画面用をupdate）
		 -----------------------------*/
		.page-caption {
			height: 40px;
			margin-bottom: 10px;

			.page-caption-imgs {
				margin-top: 2px;
				margin-left: 2px;
				width: 40px; height: 40px;
			}
		}
	}

	/*+++++++++++++++++++++++++++++
	 メインコンテンツ
	 +++++++++++++++++++++++++++++*/
	.main .main-contents {
		.submenu-box {
			margin-bottom: 10px;
		}

		/*-----------------------------
		 コンテンツ ボックス１
		 -----------------------------*/
		.contents-box1 {
			background-color: @contents_bg_color;
			margin-bottom: 20px;
			padding: 10px;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

			h3 {
				padding-top: 5px;
				border-bottom: 1px dotted @contens_caption_underline_color;
			}

			p {
				color: @contents_str_color;
			}

			a {
				color: @contents_link_color;
				text-decoration: under-line;
				&:link, &:visited {
					color: @contents_link_color;
					text-decoration: under-line;
				}
				&:hover {
					color: @contents_link_color;
					text-decoration: under-line;
				}
			}

			aside {
				color: @contents_aside_color;
				p , span {
					color: @contents_aside_color;
				}
			}

			table {
				width: 100%;
				border-collapse: separate;
				border-spacing: 5px 5px ;

				th , td {
					padding: 5px 5px 5px 5px;
					box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
					line-height: 18px;
					font-size: 14px;
				}
				th {
					background-color: @contents_table_th_bg_color;
					border: 1px solid @contents_table_th_border_color;
				}
				td {
					background-color: @contents_table_td_bg_color;
					border: 1px solid @contents_table_td_border_color;
				}
			}

			.inner-box {
				padding: 5px 10px 5px 10px;

				.contents-block {
					.summary-box {
						.summary-img {
							width: 25%;
							img {
								width: 100%; height: auto;
							}
						}
						p {
							float: right;
							width: 65%;
						}
						a , span {
							font-size: 12px;
						}
					}

					.popup-img-box {
						a {
							margin-left: 5px;
							font-size: 12px;
							text-align: center;
						}
					}

					.legend-box {
						img {
						}

						.banner-box {
							a {
								img {
									width: 80px; height: auto;
								}
							}
						}
					}
				} /* end contents-block */

			} /* end inner-box */
		} /* end contents-box1 */
	} /* end main-contents */

	/*-----------------------------
	 お知らせボックス
	 -----------------------------*/
	.info-box {
		h2 {
			margin: 0 0 0 2px;
			font-size: 16px;
		}
		ul {
			height: 80px;
		}
	}

	/*-----------------------------
	 リンクボックス
	 -----------------------------*/
	.link-box {
		a {
			font-size: 20px;
		}
		.link-box-text {
			span {
				margin-top: 0;
				font-size: 20px;
			}
		}
	}

	/*-----------------------------
	 facebookボックス
	 -----------------------------*/
	.facebook-box {
		margin-left: auto; margin-right: auto;
		h2 span {
			margin-top: 0;
			padding-bottom: 5px;
		}
	}

	/*-----------------------------
	 QRコード
	 -----------------------------*/
	#link_QRcode_koume_blog , #link_QRcode_koume_fb {
		display: none;
		margin: 0; paddng: 0;
	}

	/*-----------------------------
	 バナー
	 -----------------------------*/
	#bn-QRcode {
		display: none;
	}


	/*+++ ページ毎のスタイル設定 +++*/
	/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
	 こうめとは 用
	 @@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
	#index-contents1 {

		.inner-box-text {
			display: block;
			width: 100%;
			text-align: left;
			margin-bottom: 10px;
		}

		/*-----------------------------
		 スライドショー（埋め込み）
		 -----------------------------*/
		.slideshow-box {
			.glide {
				border: 1px solid @slideshow_border_color;
				box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
				width: 100%;
				height: 195px;

				.glide__slide {
					p {
						font-size: 12px;
						line-height: 18px;
						text-align: center;
					}
					.img_box {
						width: 100%;
						height: 170px;
					}
				}
				.glide__arrow {
					padding: 10px;
				}
			}
		}
	}

	/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
	 採用情報 用
	 @@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
	#recruit-contents3 {
		th {
			width: 75px;
		}
	}
	#recruit-contents4 {
		th {
			text-align: center;
			width: 30px;
		}
	}

	/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
	 業務内容 用
	 @@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
	#content-contents1 , #content-contents2 , #content-contents3 {

		a {
			margin-bottom: 5px;
			display: inline-block;
		}
	}

	/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
	 アクセス情報 用
	 @@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
	#access-contents1 {
		.inner-box {
			margin-left: 5px;
			margin-right: 0px;

			.company_addr2:before {
				content: "\a";
				white-space: pre;
			}

		}
	}


	/* 地図ポップアップ */
	#map-popup1 {
		img {
			display: block;
		}
		#map-popup1-img2 , #map-popup1-img3 {
			display: none;
		}
	}
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■
 スマホ用メールフォームのスタイル
  ■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (max-width: 529px) { /* このサイズ以下の場合に適用 */
	#contact-contents3 {
		.mail-form-frame {
			margin-top: 10px;
			border: 3px inset orange;
			background-color: white;
			width: 100%;
			height: 570px;
			overflow: hidden;
		}
	}
}