@charset "utf-8";
/* -----------------------------
 index.css
----------------------------- */

body {
	width: 100%;
	background-image: url(../../images/bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

/* -------------------------------------- header -------------------------------------- */

header {
	position: absolute;
	left: 0;

	width: 100%;
	z-index: 2;
}

header > div,
header nav    { width: 50%; }

/* -------------------------------------- main_img -------------------------------------- */

#mainimg div img {
	width: 100%;
	height: auto;
}

/* -------------------------------------- aboutUs -------------------------------------- */

#aboutUs h2 {
	margin: auto 0px;
	color: #D7CCB5;
}

#aboutUs .img { width: 40%; }

#aboutUs .str {
	line-height: 200%;
	letter-spacing: 2px;
}

#aboutUs .str h3 {
	margin-bottom: 15px;
	font-size: x-large;
}

#aboutUs .str p:first-of-type {	text-align: start; }

#aboutUs .str p:nth-of-type(2) { margin-bottom: 15px; }

#aboutUs .str p:last-of-type {
	text-align: right;
	line-height: 100%;
}

/* -------------------------------------- features -------------------------------------- */

#features { background-color: #fbfaf6; }

#features h2 {
	margin: auto 0px 15px;
	text-align: center;
	color: #D7CCB5;
}

#features > p {	text-align: center; }

#features .container li div { margin: 0; padding: 0; }

#features .container li div img {
	margin-bottom: 30px;
	width: 100%;
	height: auto;
}

#features .container li p { letter-spacing: 1px; }


/* -------------------------------------- ourNmae -------------------------------------- */

#ourNmae { margin-bottom: 8vw; }

#ourNmae h2 {
	margin: auto 0px;
	color: #D7CCB5;
}

#ourNmae .img {
	height: auto;
	text-align: right;
}

#ourNmae .img img {
	width: 120%;
	height: auto;
}

#ourNmae .str {
	line-height: 200%;
	letter-spacing: 2px;
	font-size: 1.1vw;
}

#ourNmae .str h3 {
	margin-bottom: 30px;
	font-size: 2vw;
}

#ourNmae .str p:first-of-type {
	margin-bottom: 20px;
	text-align: start;
}

#ourNmae .str p:last-of-type {
	line-height: 200%;
	font-size: 1.3vw;
}



/* -------------------------------------- routeTime -------------------------------------- */

#routeTime { margin-bottom: 0; }

#routeTime h2 { text-align: center; }

#routeTime ol li img {
	margin-bottom: 20px;
	width: 100%;
	height: auto;
}

#routeTime ol li p {
	text-align: center;
	line-height: 150%;
	font-size: medium;
}


/* -------------------------------------- contact -------------------------------------- */

#contact { background-color: #fbfaf6; }

#contact h2 {
	text-align: center;
	color: #D7CCB5;
}


/* -------------------------------------- time -------------------------------------- */


#time {
	width: 100%;
	height: auto;
	background-image: url(../../images/bg2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	text-align: center;
}

#time img {
	height: auto;
}

#time > div:nth-of-type(2) {
	margin: 0 10%;
	text-align: center;
}

#time .category {
	margin: 0px auto 50px;
	padding: 40px 0px;
	width: 80%;
	background-color: #65B9CF;

	font-size: 3vw;

	color: #FFFFFF;
}

#time .address { background-color: #FFFFFF; }

#time .address > div { width: 30%; }

#time .address > div img {
	margin: 0;
	border-radius: 10% 10%;
}


/* -------------------------------------- footer -------------------------------------- */

footer {
	background-color: #A9907A;
	text-align: center;
	letter-spacing: 1px;
	color: #FFFFFF;
}

footer .fMenu li a { display: block; }

footer > p {
	padding-bottom: 30px;

	font-size: medium;
}









/* -----------------------------
 PC
----------------------------- */
@media screen and (min-width:1000px) {

	.spOnly { display: none; }

/* -------------------------------------- header -------------------------------------- */

	header { top: 2.7vw; }

	header nav #menuBtn { display: none; }

	header h1 a { margin-left: 6.2%; }

	header h1 img {
		width: 50%;
		height: auto;
	}

	header nav ul {
		display: flex;
		justify-content: right;
		align-items: center;

		margin-right: 2%;
		color: #FFFFFF;
	}

	header nav li {
		position: relative;

		margin: 0px 1.5vw;
		font-size: 1.2vw;
	}

	header nav li::after {
		content: '';
		position: absolute;
		right: -1.5vw;

		width: 2px;
		height: 25px;
		background-color: #FFFFFF;
	}

	header nav li:last-of-type::after { background-color: inherit; }


/* -------------------------------------- main_img -------------------------------------- */

	#mainimg { margin-bottom: 4vw; }


/* -------------------------------------- aboutUs -------------------------------------- */

	#aboutUs {
		display: grid;                  /*グリッドレイアウト*/
		grid-template-rows: 12vw 1fr;   /*グリッド高さ*/
		grid-template-columns: 40% 1fr; /*グリッド横幅*/

		padding: 0px 10%;
	}

	#aboutUs h2 {
		grid-row: 1 / 2;    /*アイテム縦*/
		grid-column: 2 / 3; /*アイテム横*/
	}
	#aboutUs .img {
		grid-row: 1 / 2;    /*アイテム縦*/
		grid-column: 1 / 3; /*アイテム横*/
	}
	#aboutUs .str {
		grid-row: 2;        /*アイテム縦*/
		grid-column: 2 / 3; /*アイテム横*/
	}

	#aboutUs h2 {
		text-align: end;
		font-size: 8vw;
	}

	#aboutUs .img { text-align: left; }
	#aboutUs .img img {
		margin-left: -20%;
		width: 120%;
		height: auto;
	}

	#aboutUs .str {
		font-size: 1.1vw;
		text-align: end;
	}

	#aboutUs .str h3 {
		margin-bottom: 30px;
		font-size: 2vw;
	}

	#aboutUs .str > p:first-of-type {
		margin-bottom: 30px;
		letter-spacing: 5px;
		line-height: 200%;
		font-size: 1.3vw;
	}

	#aboutUs .str p:nth-of-type(3) { text-align: left !important; }

	#aboutUs .str div {
		margin-right: 0;
		margin-left: auto;
		width: fit-content;
		font-size: 1.2vw;
	}

	#aboutUs .str div > p { white-space: nowrap; }

	#aboutUs .str p:last-of-type img {
		width: auto;
		height: 4vw;
	}


/* -------------------------------------- features -------------------------------------- */

	#features {	padding: 150px 0; }

	#features h2 {
		margin: auto 0px 25px;
		font-size: 8vw;
	}

	#features > p {
		margin-bottom: 60px;
		font-size: 2vw;
	}

	#features .container {
		display: flex;
		justify-content: space-between;

		margin: 0px 10%;
	}

	#features .container li {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

		width: 30%;
	}

	#features .container li h3  { order: 2; }
	#features .container li div { order: 1; }
	#features .container li p   { order: 3; }

	#features .container li h3  {
		margin-bottom: 30px;
		font-size: 2vw;
	}

	#features .container li div { margin-bottom: 30px; }

	#features .container li div img {
		margin: 0;
		padding: 0;
	}

	#features .container li p {
		line-height: 200%;
		letter-spacing: 5px;
		font-size: 1.3vw;
	}


/* -------------------------------------- ourNmae -------------------------------------- */

	#ourNmae {
		display: grid;                  /*グリッドレイアウト*/
		grid-template-rows: 12vw 1fr;   /*グリッド高さ*/
		grid-template-columns: 1fr 40%; /*グリッド横幅*/

		padding: 0px 10%;
	}

	#ourNmae h2 {
		grid-row: 1 / 2;    /*アイテム縦*/
		grid-column: 1 / 2; /*アイテム横*/
	}
	#ourNmae .img {
		grid-row: 1 / 3;    /*アイテム縦*/
		grid-column: 2 / 3; /*アイテム横*/
	}
	#ourNmae .str {
		grid-row: 2;        /*アイテム縦*/
		grid-column: 1 / 2; /*アイテム横*/
	}

	#ourNmae h2 {	
		text-align: right;
		font-size: 8vw;
	}

	#ourNmae .img img {	margin-left: 10%; }

	#ourNmae h3 { text-align: right; }

	#ourNmae .str p:last-of-type { letter-spacing: 2px;	}


/* -------------------------------------- contact -------------------------------------- */

	#contact {
		margin-bottom: 0;
		padding: 150px 0;
	}

	#contact h2 {
		margin: auto 0px 25px;
		font-size: 8vw;
	}

	#contact > p {
		margin-bottom: 50px;
		text-align: center;
		font-size: 2vw;
	}

	#contact div { margin: 0px 20% 50px; }

	#contact a {
		display: block;
		overflow: hidden;
	}

	#contact a img {
		width: 100%;
		height: auto;
	}


/* -------------------------------------- routeTime -------------------------------------- */

	#routeTime h2 {
		margin-bottom: 60px;
		font-size: 3vw;
	}

	#routeTime ol {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		margin: 0px 10% 80px;
	}

	#routeTime ol li {
		margin: 0px 0px 80px;
		width: calc((100% - 80px) / 3);
	}

	#routeTime ol li:nth-of-type(2),
	#routeTime ol li:nth-of-type(5) { margin: 0px 40px 80px; }

	#routeTime ol li p {
		line-height: 200%;
		letter-spacing: 5px;
		font-size: 1.3vw;
	}


/* -------------------------------------- time -------------------------------------- */

	#time {
		margin-bottom: 0;
		padding: 200px 0px 100px;
	}

	#time img {
		margin-bottom: 50px;
		width: 80%;
	}

	#time > div:nth-of-type(2) { margin-bottom:50px; }

	#time > div:nth-of-type(2) p {
		margin-bottom: 10px;
	}

	#time .address {
		display: flex;
		justify-content: center;
		vertical-align: middle;

		margin: 0px 10%;
		padding: 40px 0;
	}

	#time .address address {
		width: 70%;
		text-align: left;
	}

	#time .address address > div { margin-bottom: 30px; }

	#time .address address > div:first-of-type h3 { margin-bottom: 10px; }

	#time .address address h3 { margin-left: -20px; }

	#time .address address p { font-size: 1.5vw; }

	#time .address address div:last-of-type div { margin-bottom: 10px; }

	#time .address address div:last-of-type div a {	font-size: 4vw; }



/* -------------------------------------- footer -------------------------------------- */

	footer .fMenu {
		display: flex;
		justify-content: center;
	}

	footer .fMenu li { border-right: 2px solid #FFFFFF; }
	footer .fMenu li:last-of-type { border-right: none; }

	footer .detail { margin-bottom: 50px; }

}









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

	.pcOnly { display: none; }

	section { margin: 0px auto;	}

	h2 {
		text-align: center;
		font-size: 10vw;
	}

/* -------------------------------------- header -------------------------------------- */

	header div h1 img {
		width: 78%;
		height: auto;
	}

/* -------------------------------------- mainimg -------------------------------------- */

	#mainimg {
		position: relative;

		margin-bottom: 50px;
	}

/* -------------------------------------- aboutUs -------------------------------------- */

	#aboutUs { margin-bottom: 50px; }

	#aboutUs  .img,
	#ourNmae .img {
		margin: 0px auto 30px;
		width: 100%;
		text-align: center;
	}

	#aboutUs  .img img,
	#ourNmae .img img {
		width: 50%;
		height: auto;
	}

	#aboutUs  .str,
	#ourNmae .str {
		margin: 0px 15px;
		font-size: 3vw;
	}

	#aboutUs .str h3,
	#ourNmae .str h3 {
		text-align: center;
		font-size: large;
	}

	#aboutUs .str p:last-of-type { text-align: center; }

	#aboutUs .str img {
		display: block;

		margin: 0px auto;
		width: 60%;
		height: auto;

		overflow: hidden;
	}

	#aboutUs .str > p:first-of-type,
	#ourNmae .str p:first-of-type { margin-bottom: 20px; }

	#aboutUs .str p:last-of-type,
	#ourNmae .str p:last-of-type {
		margin-bottom: 30px;
		text-align: left;
		line-height: 5vw;
		font-size: 3vw;
	}

	#aboutUs .str > div p:first-of-type {
		text-align: center;
		font-size: 3vw;
	}


/* -------------------------------------- features -------------------------------------- */

	#features {
		margin-bottom: 50px;
		padding: 50px 0;
	}

	#features h2 { margin-bottom: 5px; }

	#features > p {
		margin-bottom: 30px;
		font-size: large;
	}

	#features .container { margin: 0px 20px; }

	#features .container li {
		display: flex;
		flex-wrap: wrap;

		margin-bottom: 40px;
	}
	#features .container li:last-of-type { margin-bottom: 0; }

	#features .container li h3  { order: 2; }
	#features .container li div { order: 1; }
	#features .container li p   { order: 3; }

	#features .container li h3  {
		margin-bottom: 20px;
		font-size: large;
		text-align: center;
	}

	#features .container li div { margin-bottom: 20px; }

	#features .container li div img {
		display: block;

		margin: 0px auto;
		width: 100%;
		height: auto;

		overflow: hidden;
	}

	#features .container li p   {
		line-height: 150%;
		letter-spacing: 1px;
		font-size: 4vw;
	}


/* -------------------------------------- ourNmae -------------------------------------- */

	#ourNmae { margin-bottom: 100px; }

	#ourNmae h2 { font-size: 10vw; }


/* -------------------------------------- routeTime -------------------------------------- */

	#routeTime {
		margin-bottom: 50px;
		padding: 0px 10px;
	}

	#routeTime h2 {
		margin-bottom: 30px;
		font-size: 6vw;
	}

	#routeTime ol {	justify-content: space-around; }

	#routeTime ol li {
		margin: 0px 0px 80px;
		width: 100%;
	}

	#routeTime ol li:last-of-type {
		margin-bottom: 0;
	}

	#routeTime ol li p {
		text-align: center;
		font-size: 4vw;
	}


/* -------------------------------------- contact -------------------------------------- */

	#contact { padding: 50px 0; }

	#contact h2 { margin-bottom: 10px; }

	#contact > p {
		margin-bottom: 50px;
		text-align: center;
		font-size: large;
	}

	#contact div {
		margin-bottom: 20px;
		padding: 0 15px;
	}

	#contact div a {
		display: block;

		width: 100%;

		overflow: hidden;
	}

	#contact div a img {
		width: 100%;
		height: auto;
	}


/* -------------------------------------- time -------------------------------------- */

	#time { padding: 70px 5px 0; }

	#time img {
		margin-bottom: 30px;
		width: 100%;
	}

	#time > div:nth-of-type(2) { margin-bottom: 30px; }

	#time > div:nth-of-type(2) p {
		margin-bottom: 5px;
		text-align: center;
		font-size: 4vw;
	}

	#time > div:nth-of-type(2) p:last-of-type { margin-bottom: 0; }

	#time .category {
		margin: 0px auto 30px;
		padding: 20px 0px;
		width: 100%;
		background-color: #65B9CF;

		font-size: 5vw;

		color: #FFFFFF;
	}

	#time .address { padding: 20px 0; }

	#time .address > div {
		margin-bottom: 20px;
		width: 100%;
		text-align: center;
	}

	#time .address > div img {
		width: 50%;
		height: auto;
	}

	#time .address address { padding: 0 10px; }

	#time .address address > div { margin-bottom: 20px;	}

	#time .address address h3 {
		margin-bottom: 5px;
		font-size: 4vw;
	}

	#time .address address p {
		line-height: 150%;
		font-size: 4vw;
	}

	#time .address address div div { margin-bottom: 10px; }

	#time .address address a { font-size: 12vw; 
}


/* -------------------------------------- footer -------------------------------------- */

	footer { padding: 10px 5px 0; }

	footer div:first-of-type { margin: 0px auto 5px;	}

	footer div img { width: 60%; }

	footer .detail > div:nth-of-type(2) p,
	footer .detail > div:nth-of-type(2) address {
		margin-bottom: 10px;
		line-height: 150%;
		font-size: 3.5vw;
	}

	footer .detail .tel { margin-bottom: 20px; }

	footer .detail .tel p {	font-size: 3.5vw; }

	footer .detail .tel div { font-size: 7vw; }


}