/* -----
共通
----- */

	/* -----
	メイン画像
	----- */

		/* --------
		背景・カラー
		-------- */

			#mainIng {
				width: 100%;
				background-color: #231815;
			}

			#mainIng::after {
				content: "";
				display: block;

				width: 100%;

				background-color: #FFFFFF;

				border-bottom: 10px solid #DEB887;
			}

		/* --------
		画像設定
		-------- */

		#mainIng .fade {
			position: relative;

			max-width: 1100px;

			margin: auto;
		}

		#mainIng .fade img {
			width: 100%;

			transition: 2s;
		}

		#mainIng .fade img:not(:first-of-type) {
			position: absolute;
			top: 0;
			left: 0;
			
			opacity: 0;
		}


	/* -----
	NEWS
	----- */

		/* --------
		タイトル
		-------- */
		
			#news {
				max-width: 1200px;

				margin: auto;
				margin-bottom: 100px;
			}


			#news h1 {
				width: 150px;

				margin-bottom: 20px;
				padding-left: 10px;
				padding-bottom: 5px;
				font-size: x-large;

				border-bottom: 3px solid #231815;
			}

		/* --------
		ボタン
		-------- */

			#news .list {
				width: 150px;

				margin: auto;
			}

			#news .list a {
				display: block;

				text-align: center;

				padding: 10px 20px;

				background-color: #DEB887;
				
				color: #FFFFFF;

				transition: 0.3s;
			}

			#news .list a:hover {
				opacity: 0.6;
			}


	/* -----
	メインメニュー
	----- */

		#menu {
			display: flex;
		}

		#menu a {
			background-size: contain;
		}

		#menu .btnAbout {
			background-image: url(../../images/index/btn_about_hover.jpg);
			background-repeat: no-repeat;
		}
		
		#menu .btnProduct {
			background-image: url(../../images/index/btn_product_hover.jpg);
			background-repeat: no-repeat;
		}
		
		#menu .btnCompany {
			background-image: url(../../images/index/btn_company_hover.jpg);
			background-repeat: no-repeat;
		}
		
		#menu .btnSafety {
			background-image: url(../../images/index/btn_safety_hover.jpg);
			background-repeat: no-repeat;
		}

		#menu img {
			transition: 0.3s;
		}

		#menu img:hover {
			opacity: 0;
		}


	/* -----
	お問い合わせ
	----- */

		#contact {
			text-align: center;

			max-width: 1180px;

			margin: auto;
			margin-bottom: 100px;
		
			border: 1px solid #231815;
		}

		#contact div {
			display: flex;
		}

		#contact h2 {

			background-color: #231815;
			color: #FFFFFF;
		}

		#contact a {
			background-size: contain;
		}

		#contact .btnAgency {
			background-image: url(../../images/index/btn_agency_hover.jpg);
			background-repeat: no-repeat;
		}

		#contact .btnContact {
			background-image: url(../../images/index/btn_contact_hover.jpg);
			background-repeat: no-repeat;
		}

		#contact a > img {
			transition: 0.3s;
		}

		#contact a > img:hover {
			opacity: 0;
		}

		#contact .time {
			align-content: center;
		}


/* -----
PC
----- */

	@media not screen and (max-width:1200px) {

		/* -----
		メイン画像
		----- */

			/* --------
			背景・カラー
			-------- */

				#mainIng::after {
					padding-top: 30px;
				}




		/* --------
		table
		-------- */

			#news table {
				width: 1000px;

				margin: auto;
				margin-bottom: 20px;

				background-color: #DCDCDC;
				border-radius: 10px;
			}

			#news th {
				width: 25%;

				padding: 5px 0 5px 50px;
			}

			#news td {
				padding: 5px;
			}


		/* -----
		メインメニュー
		----- */

			#menu {
				flex-wrap: wrap;

				margin-bottom: 100px;
				
			}
			
			#menu a {
				margin: auto;
				margin-bottom: 50px;
			}


		/* -----
		お問い合わせ
		----- */

			#contact div {
				flex-wrap: wrap;
			}
					
			#contact a {
				margin: auto;
				margin-bottom: 50px;
				margin-top: 50px;
			}
			
			#contact .number {
				margin-left: 30px;
				margin-right:30px ;
			}

			#contact .time {
				margin-right: 30px;
			}
			
			#contact .tel {
				margin: auto;
				margin-bottom: 50px;
			}
	}


/* -----
SP
----- */
	@media screen and (max-width:1200px) {

		/* -----
		メイン画像
		----- */

			/* --------
			背景・カラー
			-------- */

				#mainIng::after {
					padding-top: 15px;
				}

		/* --------
		NEWS
		-------- */

			/* --------
			table
			-------- */

				#news table {
					width: 90%;

					margin: auto;
					margin-bottom: 20px;

					background-color: #DCDCDC;
					border-radius: 10px;
				}

				#news th {
					align-content: center;

					width: 25%;

					padding: 5px 5px 5px 10px;
				}

				#news td {
					word-break: break-word;
				}

				#news td a {
					display: block;

					padding: 5px;
				}


		/* -----
		メインメニュー
		----- */

			#menu {
				flex-direction: column;
				width: 90%;

				margin: auto;
				margin-bottom: 100px;			
			}
			
			#menu a {
				margin-bottom: 50px;
			}

			#menu img {
				width: 100%;

			}


		/* -----
		お問い合わせ
		----- */

			#contact {
				width: 98%;
			}

			#contact div {
				flex-direction: column;
			}
				
			#contact h2 {
				font-size: medium;
			}
				
			#contact a {				
				width: 90%;

				margin: auto;
				margin-bottom: 50px;
			}

			#contact a:first-child {
				margin-top: 50px;
			}

			#contact img {
				width: 100%;
			}
			
			#contact .number {
				width: 80%;

				margin: auto;
				margin-bottom: 5px;
			}
			
			#contact .tel {
				margin-bottom: 20px;
			}
	}