@charset "UTF-8";

/* ★″
 * Layout.css
 * 
 * ページの見た目や要素の位置・余白を制御
 */


/* =========================================================
	ページ全体
========================================================= */

	html,body{
		background: url(../img/contact_background.jpg) repeat;
	}



/* =========================================================
	ページのヘッダー
========================================================= */

	body > header{
		position: absolute;
		top: 16px;
		left: 16px;
		z-index: 100;
	}
		body > header img{
			height: 32px;
		}


@media screen and (min-width: 768px) {

	body > header{
		top: 32px;
		left: 32px;
	}

		body > header img{
			height: auto;
		}

}

/* =========================================================
	ページのナビゲーション
========================================================= */


	body > nav{
		display: none;
	}


@media screen and (min-width: 768px) {

	body > nav{
		display: block;
		position: absolute;
		top: 32px;
		right: 32px;
		z-index: 100;
	}
		body > nav > ul{
				display: flex;
		}
			body > nav > ul > li{
				list-style: none;
				padding: 0 32px;
				border-right: 1px solid white;
			}
				body > nav > ul > li:nth-of-type(1){
					padding: 0 32px 0 0;
				}
				body > nav > ul > li:nth-last-of-type(1){
					border: none;
					padding: 0 0 0 32px;
				}
			
}

	
/* =========================================================
	ページのフッター
========================================================= */

	body > footer{
		background: #165DA9;
		padding: 32px 32px 16px 32px;
		text-align: center;
	}
		body > footer > small{
			color: white;
			font-size: 0.5em;
		}


/* =========================================================
	ページのメイン
========================================================= */

	body > main{
	}



/* =========================================================
	各セクション共通
========================================================= */

	main > article > section{
		position: relative;
		margin: 0 auto;
		padding: 64px 16px;
	}

	main > article > section > header{
		margin: 0 auto;
		padding: 0 0 24px 0;
	}
		main > article > section > header > h1{
			text-align: center;
		}

	main > article > section li{
		list-style: none;
	}


@media screen and (min-width: 768px) {

	main > article > section{
		padding: 80px 32px;
	}

	main > article > section > header{
		padding: 0 0 48px 0;
	}

}


/* =========================================================
	メインイメージ
========================================================= */

	#MAINIMAGE{
		background: #eee url(../img/mainimage_background.jpg) center center;
		background-size: cover;
		height: 100vh;
		padding: 24px 16px 16px 16px;
	}

@media screen and (min-width: 768px) {

	#MAINIMAGE{
		padding: 80px 32px;
	}

}


		#MAINIMAGE header{
			position: relative;
			top: 32px;
			left: 0px;
			z-index: 10;
		}
			#MAINIMAGE header h1{
				text-align: left;
			}



		#MAINIMAGE section ul{
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 10;
			overflow: hidden;
		}
			#MAINIMAGE section li{
				margin: 0 -32px 0 0;
			}

		#MAINIMAGE section h2{
			position: absolute;
			bottom: 104px;
			left: 16px;
			z-index: 10;
			width: 128px;
		}



		#MAINIMAGE [data-function="slider"]{
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			z-index: 1;
			display: flex;
				justify-content: center;
				align-items: center;			
		}
			#MAINIMAGE [data-function="slider"] li{
				display: flex;
					justify-content: center;
					align-content: center;
				height: 50vh;
				width: 100%;
			}
				#MAINIMAGE [data-function="slider"] li img{
					max-height: 50vh;
				}




@media screen and (min-width: 768px) {



		#MAINIMAGE section ul{
			bottom: 32px;
			right: 0;
		}

		#MAINIMAGE section h2{
			bottom: 32px;
			left: 32px;
			width: auto;
		}



		#MAINIMAGE [data-function="slider"]{
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
		}
			#MAINIMAGE [data-function="slider"] li{
				display: flex;
					justify-content: center;
					align-content: center;
				height: 75vh;
				width: 100%;
			}
				#MAINIMAGE [data-function="slider"] li img{
					max-height: 75vh;
				}

}


/* =========================================================
	サービスの概要
========================================================= */

	#POINT{
		background: #eee url(../img/point_background.jpg) center center;
		background-size: cover; 
	}

@media screen and (min-width: 768px) {
		#POINT p{
			text-align: center;
		}
}

	#POINT > section{
		font-size: 0.8em;
		max-width: 960px;
		margin: 16px auto 0 auto;
		padding: 16px;
		background: white;
		box-shadow: 0 0 8px rgba(0,0,0,0.33);
		display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column-reverse;
	}
@media screen and (min-width: 768px) {

	#POINT > section{
		font-size: 1rem;
		flex-direction: row;
		margin: 48px auto 0 auto;
		padding: 32px;
	}


}



	#POINT > section h2{
		font-size: 1.4em;
		text-align: center;
	}

@media screen and (min-width: 768px) {

	#POINT > section h2{
		text-align: left;
	}

}

		#POINT > section [data-divrole="frame"]{
		}

			#POINT > section [data-divrole="frame"] p{
				text-align: left;
			}

		#POINT > section figure{
			margin: 0 auto 8px auto;;
			max-width: 240px;
		}


@media screen and (min-width: 768px) {
		#POINT > section figure{
			margin: 0 0 0 24px;
		}
			#POINT > section figure img{
			}
}


/* =========================================================
	ご利用方法
========================================================= */

	#PRINT{
		background: #165DA9;
	}
		#PRINT p{
			text-align: left;
			color: white;
		}
@media screen and (min-width: 768px) {
		#PRINT p{
			text-align: center;
		}
}
		#PRINT li{
			text-align: center;
		}



/* =========================================================
	プライス
========================================================= */

	#PRICE{
		background: #eee url(../img/price_background.jpg) center center;
		background-size: cover; 
	}

		#PRICE p{
			text-align: center;
		}


		#PRICE [data-divrole="frame"]{
			overflow: hidden;
			padding: 32px 0;
			margin: -32px -16px 0 -16px;
		}
			#PRICE .otoku{
				margin: 0 auto;
				transform: rotate(-5deg);
				background: #B52510;
				text-align: center;
				padding: 24px 32px;
				margin: 0 -16px;
			}

@media screen and (min-width: 768px) {

		#PRICE [data-divrole="frame"]{
			overflow: hidden;
			padding: 64px 0;
			margin: -48px -32px 0 -32px;
		}
			#PRICE .otoku{
				margin: 0 auto;
				transform: rotate(-5deg);
				background: #B52510;
				text-align: center;
				padding: 24px 32px;
				margin: 0 -16px;
			}


}



		#PRICE table{
			width: 100%;
			max-width: 720px;
			margin:0 auto;
		}

@media screen and (min-width: 768px) {
		#PRICE table{
			margin: 160px auto 0 auto;
		}
}

			#PRICE table th,
			#PRICE table td{
				padding: 8px;
				text-align: center;
				position: relative;
				font-size: 0.75rem;
			}

@media screen and (min-width: 768px) {
			#PRICE table th,
			#PRICE table td{
				padding: 16px 24px;
				text-align: center;
				position: relative;
				font-size: 1rem;
			}
}


			#PRICE table td{
				width: 45%;
			}



				#PRICE table thead tr th{
					border: 1px solid #999999;
					background: white;
					padding: 8px;
					vertical-align: bottom;
				}

@media screen and (min-width: 768px) {
				#PRICE table thead tr th{
					border: 1px solid #999999;
					background: white;
					padding: 64px 24px 16px 24px;
				}
}	
					#PRICE table thead tr th{
						border-top: 2px solid black;
					}
						#PRICE table thead tr th:nth-of-type(1){
							border: none;
							background: none;
						}
						#PRICE table thead tr th:nth-of-type(1){
							border-right: 2px solid black;
						}
						#PRICE table thead tr th:nth-last-of-type(1){
							border-right: 2px solid black;
						}


					#PRICE table thead tr th i{
						display: block;
						width: 100%;
						text-align: center;
					}
@media screen and (min-width: 768px) {
					#PRICE table thead tr th i{
						display: block;
						position: absolute;
						width: 100%;
						bottom: 50%;
						left: 0;
						text-align: center;
					}
}


				#PRICE table tbody tr th{
					padding: 8px;
				}
	
				#PRICE table tbody tr td{
					border: 1px solid #999999;
					background: white;
				}
					#PRICE table tbody tr td:nth-of-type(1){
						border-left: 2px solid black;
					}
					#PRICE table tbody tr td:nth-last-of-type(1){
						border-right: 2px solid black;
					}
					#PRICE table tbody tr:nth-last-of-type(1) td{
						border-bottom: 2px solid black;
					}
	
				#PRICE table tbody tr td.strong{
					background: #FDEEED;
					font-weight: bold;
				}






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

	#CONTACT{
		margin: -32px auto;
		padding: 0 16px;
	}
		#CONTACT [data-divrole="frame"]{
			margin: 0 auto;
			padding: 16px;
			background: black;
			border: 4px solid white;
			box-shadow: 0 0 8px rgba(0,0,0,0.33);
			color: white;
			max-width: 800px;
			display: flex;
				justify-content: center;
				align-items: stretch;
				flex-direction: column;
		}
@media screen and (min-width: 768px) {

		#CONTACT [data-divrole="frame"]{
			padding: 32px;
			flex-direction: row;
		}	
}



	#CONTACT header{
		margin: 0;
		padding: 16px;
		border-bottom: 1px solid #808080;
		display: flex;
			justify-content: center;
			align-items: center;
	}
@media screen and (min-width: 768px) {

	#CONTACT header{
		padding: 16px 32px;
		border: none;
		border-right: 1px solid #808080;
	}
}

		#CONTACT header h1{
			font-size: 2rem;
			line-height: 0.8;
			text-align: center;
		}
			#CONTACT header h1::after{
				white-space: pre;
				content: '\A'attr(title);
				color: #808080;
				font-size: 0.9rem;
				font-weight: normal;
			}
@media screen and (min-width: 768px) {
		#CONTACT header h1{
			text-align: left;
		}
}


	#CONTACT dl{
		margin: 0;
		padding: 16px 32px;
		text-align: center;
		display: flex;
			flex-direction: column;
			justify-content: center;
	}
@media screen and (min-width: 768px) {

	#CONTACT dl{
		text-align: left;
	}

}
		#CONTACT dl dt{
			font-weight: normal;
		}
	
			#CONTACT dl dd a{
				color: white;
				border-bottom: 1px solid white;
				font-size: 0.9em;
			}