@charset "UTF-8";

@import "./const.less";

/*■■■■■■■■■■■■■■■■■■■■■■■■■■
 解像度が 最大 のスタイル
  ■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (min-width: 641px) { /* このサイズ以上の場合に適用 */

	/*+++ 共通のスタイル設定 +++*/
	/*+++++++++++++++++++++++++++++
	 標準のbodyタグ
	 +++++++++++++++++++++++++++++*/
	.body-std {
		background-image: url("../images/bgImage.jpg");
		background-repeat: repeat;
	}

	/*+++++++++++++++++++++++++++++
	 コンテンツ全体の最上位要素
	 +++++++++++++++++++++++++++++*/
	.container {
		width: 960px;
		border: 1px solid lightgray;
		border-radius: 5px;		/* ボックスの角を丸くする */
	}

	/*-----------------------------
	 メニュー
	 -----------------------------*/
	.menu-box {
		padding-left: 20px;	/* タブの左側の余白 */

		li, a {
			text-decoration: none;
			display: block;
		}
		a {
			padding: 15px 30px 10px 30px;
			background-color: @menu_bg_color_active;
			border-radius: 10px 10px 0px 0px ~"/" 10px 10px 0px 0px;
			font-size: 20px;
			color: @menu_str_color;
		}
		li {
			margin-right: 3px;
			float: left;
		}
		ul:after {
			content: "";
			display: block;
			clear: both;
		}

		.menu_item_active {
			background-color: @menu_bg_color_active;
			border-top:   1px solid @menu_bg_color_hover;
			border-left:  1px solid @menu_bg_color_hover;
			border-right: 1px solid @menu_bg_color_deactive;
			border-bottom: none;
		}
		.menu_item_deactive {
			background-color: @menu_bg_color_deactive;
			border-left:  1px solid @menu_bg_color_active;
			border-right: 1px solid @menu_bg_color_deactive;
			border-bottom: 1px solid @menu_bg_color_hover;
		}

		.menu_item_active:hover , .menu_item_deactive:hover {
			background-color: @menu_bg_color_hover;
			border-top:   1px solid @menu_bg_color_hover;
			border-left:  1px solid @menu_bg_color_hover;
			border-right: 1px solid @menu_bg_color_active;
			border-bottom: none;
		}
	}

	/*+++++++++++++++++++++++++++++
	 メイン
	 +++++++++++++++++++++++++++++*/
	.main {
		padding: 10px 10px 10px 10px;
		border: 8px solid @menu_bg_color_active;
		border-radius: 8px 8px 0 0 ~"/" 8px 8px 0 0;

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

		.main-contents {
			float: left;
			display: block;
			width: 580px;
		}

	}

	/*-----------------------------
	 サイドバー
	 -----------------------------*/
	.sidebar-box {
		padding: 0px 5px 5px 5px;
		float: right;
		display: block;
		width: 320px;

	}


	/*+++ ページ毎のスタイル設定 +++*/
	/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
	 こうめとは 用
	 @@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
	#index-contents1 , #index-contents2 , #index-contents3 {
		aside {
			font-size: 14px;
			line-height: 20px;
			margin-left: 1em;
			text-indent: -1em;
			span {
				font-size: 14px;
				line-height: 20px;
			}
		}
	}
	#index-contents1 {
	 	.inner-box {
			&:after {
				content: "";
				display: block;
				clear: both;
			}
		}
		.inner-box-text {
			display: block;
			float: left;
			width: 50%;
			text-align: left;
		}

		/*-----------------------------
		 スライドショー（埋め込み）
		 -----------------------------*/
		 .slideshow-box {
				width:  260px; height: auto;
				box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
				float: right;
			.glide {
				.glide__slide {
					p {
						margin: 0px 0 0px 5px;
						font-size: 12px;
						line-height: 18px;
						text-align: left;
					}
					.img_box {
						width:  260px; height: 190px;
					}
				}
				.glide__arrow {
					padding: 10px;
				}
			}
		}
	}

	/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
	 アクセス情報 用
	 @@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
	/* 地図ポップアップ */
	#map-popup1 {
		img {
			display: block;
		}
		#map-popup1-img {
			z-index: 1;
		}
		#map-popup1-img2 {
			z-index: 2;
			position: absolute;
			left: 30%; top: 50%;

			span {
				display: block;
				color: white;
				font-size: 14px;
			}

		}
		#map-popup1-img3 {
			z-index: 3;

			border: 10px solid #ffdd33;
			border-radius: 10px;
			box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.8);
			position: absolute;
			left: 200px; top: 120px;
			height: 50%;
				display: none;
		}
	}

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

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