@charset "utf-8";

/* -----------------------------------------------------------
    入力ページ  intro-area
-------------------------------------------------------------- */
.intro-area {
	width: 1000px;
	margin: 50px auto 60px;
}

/*intro-other--------------------------------------------*/
.intro-other {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: center;
	width: fit-content;
	margin: 0 0 35px auto;
}

[class^="intro-other-"] {
	align-items: center;
	border-width: 1px;
	border-style: solid;
	border-radius: 4px;
	background: #fff;
	display: flex;
	justify-content: center;
	overflow: hidden;
	transition: .3s;
	height: 52px;
}

.intro-other-line {
	border-color: #06c755;
}

.intro-other-tel {
	border-color: transparent;
}

.intro-other-line:hover {
	background: #d5ebd5;
}

[class^="intro-other-"] a {
	align-items: center;
	color: var(--cmnblack);
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
}

.intro-other-tel a {
	align-items: center;
	display: flex;
	padding: 17px 15px 15px 20px;
}

.intro-other-line a {
	padding: 16px 24px 12px 15px;
}

.intro-other-line a::after {
	color: #06c755;
	content: "\f054";
	right: 8px;
	font: 900 1.1rem/1 var(--webicon);
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.intro-other-line .txt {
	padding: 0 0 0 37px;
	display: block;
	font-size: 1.65rem;
	font-weight: bold;
	position: relative;
	letter-spacing: .02em;
	line-height: 1.3;
}

.intro-other-tel .num {
	font: bold 3rem /1 var(--serif);
	padding: 0 0 0 24px;
	position: relative;
	letter-spacing: .02em;
}

.intro-other-tel .time-wrap {
	font-size: 1.7rem;
	letter-spacing: .02em;
}

.intro-other-tel .time {
	font-size: 1.9rem;
}

.intro-other-line .txt::before, .intro-other-tel .num::before {
	content: "";
	left: 0;
	position: absolute;
}

.intro-other-line .txt::before {
	background: url("../img/cmn_line_logo.png")center/contain no-repeat;
	width: 30px;
	height: 30px;
	top: 45%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.intro-other-tel .num::before {
	background: url("../img/cmn_tel.svg")center/contain no-repeat;
	width: 18px;
	height: 18px;
	top: 48%;
	-webkit-transform: translateY(-50%) scaleX(-1);
	transform: translateY(-50%) scaleX(-1);
}

.intro-other-tel .catch {
	display: none;
}

@media screen and (min-width: 769px) {
	.intro-area .swiper-wrapper {
		justify-content: space-between;
		gap: 20px;
		display: flex;
	}

	.intro-area .swiper-slide {
		width: calc((100% - 40px) / 3);
	}

	.intro-area .swiper-slide img {
		border-radius: 3px;
		aspect-ratio: 470/320;
		width: 100%;
		object-fit: cover;
	}
}

@media screen and (max-width: 768px) {
	.intro-area {
		width: 100%;
		margin: 40px auto 25px;
	}

	.intro-other {
		flex-direction: column;
		gap: 15px;
		margin: 0 auto 35px;
		width: 100%;
	}

	.intro-area li[class^="intro-other-"] {
		border-radius: 4px;
		width: 100%;
	}

	.intro-other-tel {
		border-color: var(--cmnblack);
	}

	.intro-other-tel a {
		text-decoration: none;
	}

	.intro-other-tel .time-wrap {
		text-align: center;
		line-height: 1.3;
		font-size: 1.4rem;
	}

	.intro-other-tel .time {
		display: block;
		font-size: 1.5rem;
	}

	.intro-other-tel .num {
		display: none;
	}

	.intro-other-tel .catch {
		display: block;
		font-weight: bold;
		position: relative;
		padding: 0 0 0 23px;
	}

	.intro-other-tel .catch::before {
		content: "";
		background: url("../img/cmn_tel.svg")center/contain no-repeat;
		width: 18px;
		height: 18px;
		position: absolute;
		left: 0;
		top: 48%;
		-webkit-transform: translateY(-50%) scaleX(-1);
		transform: translateY(-50%) scaleX(-1);
	}

	.intro-other-line a {
		padding: 5px 10px;
	}
	
	.intro-other-line .txt {
		font-size: 1.6rem;
		padding: 0 0 0 40px;
	}

	.intro-area .swiper-horizontal {
		padding: 0 0 30px;
		width: 100%;
	}

	.intro-area .swiper-pagination-bullet {
		border-radius: 2px;
		width: 40px;
		height: 5px;
	}

	.intro-area .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 6px;
	}

	.intro-area .swiper-pagination-bullet-active {
		background: var(--main);
	}
	
	.intro-area .swiper-slide {
		border-radius: 3px;
		overflow: hidden;
	}
}