@charset "UTF-8";

/*================================================

　concept

=================================================*/
.concept {
	width: 100%;
	margin: 0 auto 50px;
	padding: 0 25px;
}
.concept__content {
	position: relative;
	max-width: 1030px;
	margin: 0 auto;
	padding: 50px 0;
	background: url("../images/top/concept_bg_02.gif") center center / 100% auto repeat-y;
}
.concept__content::before,
.concept__content::after {
	position: absolute;
	content: '';
	top: -2px;
	left: 0;
	width: 100%;
	height: 52px;
	background: url("../images/top/concept_bg_01.gif") center center / 100% auto no-repeat;
}
.concept__content::after {
	top: auto;
	bottom: -2px;
	background: url("../images/top/concept_bg_03.gif") center center / 100% auto no-repeat;
}
.concept__content h3 {
	text-align: center;
	color: #FF00FF;
	margin-bottom: 35px;
	font-size: 2.1rem;
	font-weight: 700;
}
.concept__content .concept-card {
	position: relative;
	width: 732px;
	margin: 20px auto 0;
	padding: 25px 0;
}
.concept__content .concept-card::before {
	position: absolute;
	content: '';
	top: -21px;
	left: 0;
	width: 100%;
	height: 21px;
	background: url("../images/top/concept_line_01.png") center center / 100% auto repeat-y;
}
.concept__content .concept-card p {
	margin-bottom: 1.7em;
	color: #FFF;
	font-size: 1.7rem;
	line-height: 1.7;
}
.concept__content .concept-card .concept-card__text p:first-child {
	margin-top: -0.8em;
}
.concept__content .concept-card .concept-card__text p:last-child {
	margin-bottom: 0;
}
.concept__content .concept-card:nth-of-type(1) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
	margin: 0 auto 20px;
}
.concept__content .concept-card:nth-of-type(1) picture {
	width: 38.3879781%;
	transform: rotate(-3.3deg);
}
.concept__content .concept-card:nth-of-type(2) .concept-card__text,
.concept__content .concept-card:nth-of-type(3) .concept-card__text {
	padding: 0 55px;
}
.concept__content .concept-card:nth-of-type(3) .concept-card__text p {
	float: right;
	width: 323px;
}
.concept__content .concept-card:nth-of-type(2) .concept-card__text figure,
.concept__content .concept-card:nth-of-type(3) .concept-card__text picture {
	float: right;
	width: 38.3879781%;
	margin-top: 0.8em;
}
.concept__content .concept-card:nth-of-type(3) .concept-card__text picture {
	float: left;
}

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

	.concept__content {
		padding: 4.6339203vw 0;
	}
	.concept__content::before,
	.concept__content::after {
		top: -0.185356812vw;
		height: 4.81927711vw;
	}
	.concept__content::after {
		top: auto;
		bottom: -0.185356812vw;
	}

}

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

	.concept__content .concept-card {
		width: 81.4238042vw;
		margin: 2.2246941vw auto 0;
		padding: 2.78086763vw 0;
	}
	.concept__content .concept-card::before {
		top: -2.33592881vw;
		height: 2.33592881vw;
	}
	.concept__content .concept-card p {
		margin-bottom: 1.7em;
		font-size: 1.7rem;
		line-height: 1.7;
	}
	.concept__content .concept-card:nth-of-type(2) .concept-card__text,
	.concept__content .concept-card:nth-of-type(3) .concept-card__text {
		padding: 0 6.11790879vw;
	}
	.concept__content .concept-card:nth-of-type(3) .concept-card__text p {
		width: 35.9288098vw;
	}
}

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

	.concept {
		margin: 0 auto 6.66666666vw;
		padding: 0 2vw;
	}
	.concept__content {
		margin: 2.66666666vw auto;
	}
	.concept__content h3 {
		margin-bottom: 4vw;
		font-size: clamp(1.6rem, (100vw - 375px) * 15 / 393 + 16px, 3.1rem);
		line-height: 1.4;
	}
	.concept__content .concept-card {
		width: 88vw;
		padding: 4vw 0;
	}
	.concept__content .concept-card::before {
		width: 100%;
	}
	.concept__content .concept-card p {
		font-size: clamp(1.1rem, (100vw - 375px) * 11 / 393 + 11px, 2.2rem);
	}
	.concept__content .concept-card:nth-of-type(1) picture {
		width: 72.6666666vw;
		margin-bottom: 2.66666666vw;
		transform: rotate(0);
	}
	.concept__content .concept-card .concept-card__text p:first-child {
		margin-top: 0;
	}
	.concept__content .concept-card:nth-of-type(1) .concept-card__text p:nth-of-type(2) {
		margin-top: -1.7em;
	}
	.concept__content .concept-card:nth-of-type(2) .concept-card__text,
	.concept__content .concept-card:nth-of-type(3) .concept-card__text {
		padding: 0 2.66666666vw;
	}
	.concept__content .concept-card:nth-of-type(1) {
		flex-direction: column-reverse;
		margin: 0 auto 2.66666666vw;
	}
	.concept__content .concept-card:nth-of-type(3) .concept-card__text p {
		float: right;
		width: 53.2vw;
	}
	.concept__content .concept-card:nth-of-type(2) .concept-card__text figure,
	.concept__content .concept-card:nth-of-type(3) .concept-card__text picture {
		margin-top: 0.5em;
	}
	.concept__content .concept-card:nth-of-type(2) .concept-card__text figure {
		width: 35.8666666vw;
	}
	.concept__content .concept-card:nth-of-type(3) .concept-card__text picture {
		width: 26.2vw;
	}

}


/*================================================

　system

=================================================*/
.system {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
.system p {
	max-width: 1002px;
	margin: 0 auto;
	padding: 0 15px;
	font-size: 1.5rem;
	font-weight: 700;
}
.system__content {
	position: relative;
	max-width: 1002px;
	margin: 20px auto;
	padding: 3px;
	height: 100%;
	width: 100%;
	background-image: linear-gradient(0deg, rgba(0, 151, 214, 1), rgba(35, 34, 128, 1) 20%, rgba(218, 0, 126, 1) 40%, rgba(220, 31, 31, 1) 60%, rgba(239, 172, 0, 1) 88%, rgba(0, 142, 75, 1) 92%);
	z-index: 10;
}
.system__content::after{
	position: absolute;
	content: '';
	top: 3px;
	left: 3px;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	background-color: #000;
	z-index: -1;
}
.system__content .system-card:first-child {
	position: relative;
	width: 520px;
	margin: 0 auto 40px;
	padding: 25px 0;
}
.system__content .system-card h3 {
	position: relative;
	text-align: center;
	color: #FF00FF;
	margin-bottom: 25px;
	padding-bottom: 20px;
	font-size: 2.1rem;
	font-weight: 700;
}
.system__content .system-card h3::after {
	position: absolute;
	content: '';
	left: 50%;
	bottom: 0;
	width: 964px;
	height: 3px;
	background-image : linear-gradient(to right, #FFF 3px, transparent 3px);
	background-size: 16px 3px;
	background-repeat: repeat-x; 
	background-position: left bottom;
	transform: translateX(-50%);
}
.system__content .system-card p {
	margin-bottom: 0.8em;
	font-size: 2.1rem;
	font-weight: 600;
}
.system__content .system-card:first-child p:nth-of-type(3) {
	font-size: 1.8rem;
}
.system__content .system-card p span {
	font-size: 1.4rem;
}
.system__content .system-card:first-child p:last-child {
	position: relative;
	width: 392px;
	margin: 25px auto 0;
	padding: 8px 0;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1;
	border: 1px solid #FFF;
	z-index: 2;
}
.system__content .system-card:first-child p:last-child::before,
.system__content .system-card:first-child p:last-child::after {
	display: inline-block;
	position: absolute;
	content:'';
	width: calc(100% - 15px);
	height: calc(100% + 4px);
	top: -2px;
	left: 50%;
	background-color: #000;
	transform: translateX(-50%);
	z-index: -1;
}
.system__content .system-card:first-child p:last-child::after {
	width: calc(100% + 4px);
	height: calc(100% - 15px);
	top: 50%;
	left: -2px;
	transform: translateY(-50%);
}
.system__content .system-card figure {
	width: 100%;
}
.system-card__price {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 780px;
	margin: 45px auto 0;
	padding: 0 30px;
	text-align: left;
}
.system__content .system-card__price p {
	margin-bottom: 25px;
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1.8;
}
.system__content .system-card__price p strong {
	color: #FFEF00;
}
.price-list {
	width: 300px;
	margin: 0;
	padding: 0;
}
.price-list h4 {
	margin-bottom: 25px;
	font-size: 2.1rem;
	font-weight: 600;
}
.price-list dl {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	font-size: 1.7rem;
	font-weight: 600;
}
.price-list dl dt {
	width: 50%;
	margin-bottom: 1em;
}
.price-list dl dd {
	width: 50%;
	margin-bottom: 1em;
	text-align: right;
}

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

	.system {
		padding: 0 25px;
	}
	.system p {
		padding: 0 15px;
	}
	.system__content .system-card h3::after {
		width: 89.3419833vw;
	}
	.system-card__price {
		margin: 45px auto 0;
	}

}

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

	.system {
		padding: 0 3.33333333vw;
	}
	.system p {
		padding: 0 4vw;
		font-size: clamp(1rem, (100vw - 375px) * 10 / 393 + 10px, 2rem);
		line-height: 1.6;
	}
	.system__content {
		margin: 2.66666666vw auto;
	}
	.system__content .system-card:first-child {
		width: 100%;
		margin: 0 auto 4vw;
		padding: 3.33333333vw 0;
	}
	.system__content .system-card h3 {
		position: relative;
		text-align: center;
		color: #FF00FF;
		margin-bottom: 3.33333333vw;
		padding-bottom: 2.66666666vw;
		font-size: clamp(1.2rem, (100vw - 375px) * 10 / 393 + 12px, 2.2rem);
	}
	.system__content .system-card h3::after {
		width: 84vw;
		height: 2px;
		background-image : linear-gradient(to right, #FFF 2px, transparent 2px);
		background-size: 12px 2px;
	}
	.system__content .system-card p {
		margin-bottom: 0.8em;
		padding-left: 3.33333333vw;
		font-size: clamp(1.3rem, (100vw - 375px) * 11 / 393 + 13px, 2.4rem);
	}
	.system__content .system-card:first-child p:nth-of-type(3) {
		font-size: clamp(1rem, (100vw - 375px) * 9 / 393 + 10px, 1.9rem);
	}
	.system__content .system-card p span {
		font-size: clamp(1rem, (100vw - 375px) * 6 / 393 + 10px, 1.6rem);
	}
	.system__content .system-card:first-child p:last-child {
		width: 57.4666666vw;
		margin: 3.33333333vw auto 0;
		padding: 8px 0 10px;
		font-size: clamp(1rem, (100vw - 375px) * 5 / 393 + 10px, 1.5rem);
	}
	.system__content .system-card:first-child p:last-child::before,
	.system__content .system-card:first-child p:last-child::after {
			width: calc(100% - 2vw);
			height: calc(100% + 4px);
	}
	.system__content .system-card:first-child p:last-child::after {
			width: calc(100% + 4px);
			height: calc(100% - 2vw);
	}
	.system__content .system-card figure {
		padding: 0 4vw;
	}
	.system__content .system-card figure:nth-of-type(2) {
		padding: 0 4vw 4vw;
	}
	.system-card__price {
		max-width: 57.0666666vw;
		margin: 6vw auto 0;
		padding: 0;
	}
	.system__content .system-card__price p {
		margin: 0 -8vw 4vw;
		font-size: clamp(1.3rem, (100vw - 375px) * 14 / 393 + 13px, 2.7rem);
	}
	.price-list {
		width: 100%;
	}
	.price-list h4 {
		margin-bottom: 3.33333333vw;
		font-size: 2.1rem;
		font-size: clamp(1.5rem, (100vw - 375px) * 15 / 393 + 15px, 3rem);
	}
	.price-list dl {
		width: 100%;
		margin: 0 auto 2.66666666vw;
		padding: 0;
		font-size: clamp(1.3rem, (100vw - 375px) * 12 / 393 + 13px, 2.5rem);
	}

}


/*================================================

　news

=================================================*/

.news {
	width: 100%;
	margin: 60px auto;
	padding: 0;
}
.news h2 {
	margin-bottom: 40px;
	text-align: center;
}
.news__content {
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	margin: 0;
}
.news-card {
	position: relative;
	width: calc(100% / 3);
	height: auto;
	background: #000;
}
.news-card__wrap p {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%;
	height: 33.333333vw;
	padding: 20%;
	color: #FFF;
	font-size: clamp(1.2rem, (100vw - 1080px) * 3 / 320 + 12px, 1.5rem);
	line-height: 1.8;
	background-color: rgba(0,0,0,0.6);
	opacity: 0;
	transition: all 0.5s ease;
}
.news-card__wrap:hover,
.news-card__wrap:hover p {
	opacity: 1;
}

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

}

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

	.news {
		margin: 8vw auto;
	}
	.news h2 {
		width: 24.2666666vw;
		margin: 0 auto 5.33333333vw;
	}

}

/*================================================

　access

=================================================*/
.access {
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
}
.access__content {
	position: relative;
	max-width: 866px;
	margin: 20px auto;
	padding: 0 40px;
}
.access__content p {
	position: relative;
	margin: auto;
	padding: 0;
	text-align: center;
	font-size: 1.7rem;
	font-weight: 600;
}
.access__content .access-card {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	margin: 10px auto 20px;
	padding: 0;
}
.access__content .access-card h3 {
	margin: 0 15px 0 10px;
	color: #FF00FF;
	font-size: 2rem;
	font-weight: 600;
}

.google-map {
	position: relative;
	width: 100%;
	margin: 0;
	padding-bottom: 79.4%;
	overflow: hidden;
}
.google-map iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

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

	.access {
		padding: 0;
	}

}

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

	.access__content {
		margin: 2.66666666vw auto;
		padding: 0 8vw;
	}
	.access__content p {
		font-size: clamp(1.1rem, (100vw - 375px) * 11 / 393 + 11px, 2.2rem);
	}
	.access__content .access-card {
		margin: 1.33333333vw auto 3.33333333vw;
	}
	.access__content .access-card h3 {
		margin: 0 15px 0 10px;
		font-size: clamp(1.3rem, (100vw - 375px) * 12 / 393 + 13px, 2.5rem);
	}
	.access__content .access-card figure {
		width: 11.6vw;
	}
	.access__content .access-card a {
		width: 11.2vw;
	}

}

/*================================================

　directions

=================================================*/
.directions-card {
	max-width: 866px;
	margin: 0 auto;
	padding: 40px 40px 0;
}
.directions-card h4 {
	margin-bottom: 25px;
	text-align: center;
}
.directions-card h5 {
	position: relative;
	width: 464px;
	margin: 0 auto 40px;
	padding: 2px 0 4px;
	text-align: center;
	font-size: 2.1rem;
	font-weight: 600;
	line-height: 1;
	border: 1px solid #FFF;
	z-index: 2;
}
.directions-card h5::before,
.directions-card h5::after {
	display: inline-block;
	position: absolute;
	content:'';
	width: calc(100% - 15px);
	height: calc(100% + 4px);
	top: -2px;
	left: 50%;
	background-color: #000;
	transform: translateX(-50%);
	z-index: -1;
}
.directions-card h5::after {
	width: calc(100% + 4px);
	height: calc(100% - 15px);
	top: 50%;
	left: -2px;
	transform: translateY(-50%);
}
.directions-card p {
	position: relative;
	margin: 0 auto 1em;
	padding: 0;
	text-align: center;
	font-size: 1.7rem;
	font-weight: 600;
}
.directions-card ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	margin: 10px auto 20px;
	padding: 0;
}
.directions-card ul li {
	position: relative;
	width: 44.9109415%;
	margin-bottom: 45px;
}
.google-sv {
	position: relative;
	width: 100%;
	margin: 0;
	padding-bottom: 100%;
	overflow: hidden;
}
.google-sv iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.directions-card ul li::after {
	position: absolute;
	content: '';
	right: -50px;
	bottom: 164px;
	width: 21px;
	height: 25px;
	background-color: #FFF;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.directions-card ul li:nth-of-type(2)::after {
	left: -54px;
	right: auto;
	bottom: -50px;
	transform: rotate(135deg);
}
.directions-card ul li:last-child::after {
	display: none;
}

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

	.directions-card {
		padding: 5.33333333vw 6.66666666vw 0;
	}
	.directions-card h4 {
		width: 71.2vw;
		margin: 0 auto 4vw;
	}
	.directions-card h5 {
		width: 61.8666666vw;
		margin: 0 auto 5.33333333vw;
		padding: 2px 0 4px;
		font-size: clamp(1.1rem, (100vw - 375px) * 11 / 393 + 11px, 2.2rem);
	}
	.directions-card h5::before,
	.directions-card h5::after {
		width: calc(100% - 2vw);
		height: calc(100% + 4px);
	}
	.directions-card h5::after {
		width: calc(100% + 4px);
		height: calc(100% - 2vw);
	}
	.directions-card p {
		font-size: clamp(1.1rem, (100vw - 375px) * 11 / 393 + 11px, 2.2rem);
	}
	.directions-card ul {
		justify-content: center;
		flex-direction: column;
		flex-wrap: wrap;
		margin: 1.33333333vw auto 2.66666666vw;
		padding: 0 5.33333333vw;
	}
	.directions-card ul li {
		margin-bottom: 12vw;
		width: 100%;
	}
	.directions-card ul li:last-child {
		margin-bottom: 8vw;
	}
	.directions-card ul li::after {
		right: 50%;
		bottom: -8.6vw;
		width: 6.66666666vw;
		height: 5.6vw;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		transform: translateX(50%);
	}
	.directions-card ul li:nth-of-type(2)::after {
		left: auto;
		right: 50%;
		bottom: -8.6vw;
		transform: translateX(50%);
	}

}