@charset "UTF-8";

.sectionTitle {
	text-align: center;
}

/* kv
---------------------------------------------- */
.kvGrid {
	display: flex;
	column-gap: calc(20 / 1920 * 100vw);
}

.kvGridBox01 {
	display: flex;
	flex-wrap: wrap;
	gap: calc(20 / 960 * 100%) calc(20 / 1290 * 100%);
	width: calc(1290 / 1920 * 100%);
}
.kvGridBox01 .kvGridItem:nth-child(1) {
	display: grid;
	place-content: center;
	width: calc(510 / 1290 * 100%);
	aspect-ratio: 510 / 380;
	background-color: #2cb5a9;
}
.kv__title {
  position: static;
}
.kvGridBox01 .kvGridItem:nth-child(2) {
	width: calc(760 / 1290 * 100%);
}
.kvGridBox01 .kvGridItem:nth-child(3) {
	width: calc(800 / 1290 * 100%);
}
.kvGridBox01 .kvGridItem:nth-child(4) {
	width: calc(470 / 1290 * 100%);
}

.kvGridBox02 {
	width: calc(610 / 1920 * 100%);
}
.kvGridBox02 .kvGridItem + .kvGridItem {
	margin-top: calc(20 / 610 * 100%);
}

@media screen and (max-width: 768px) {
	.kvGrid {
		column-gap: calc(5 / 375 * 100vw);
	}

	.kvGridBox01 {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: calc(5 / 370 * 100%) 0;
		width: calc(150 / 375 * 100%);
	}
	.kvGridBox01 .kvGridItem:nth-child(1) {
		width: 100%;
		aspect-ratio: 150 / 100;
	}
	.kvGridBox01 .kvGridItem:nth-child(2) {
		width: 100%;
	}

	.kvGridBox02 {
		width: calc(225 / 375 * 100%);
	}
	.kvGridBox02 .kvGridItem + .kvGridItem {
		margin-top: calc(5 / 225 * 100%);
	}
}

/* point
---------------------------------------------- */
.point {
	padding-top: clamp(80px, 3.18rem + 7.77vw, 200px);
	z-index: 1;
}

.pointNav {
	max-width: 1400px;
	position: relative;
	z-index: 0;
}

.pointNavList {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px calc(80 / 1400 * 100%);
}

.pointNavList__btn {
	display: block;
	position: relative;
	z-index: 0;
}
.pointNavList__btn::after {
	content: '';
	position: absolute;
	bottom: 10%;
	left: 50%;
	width: 18px;
	height: 18px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	filter: drop-shadow(0 0 20px rgba(0 71 119 / .5));
	transform: translateX(-50%) rotate(45deg);
	z-index: 0;
}

.pointNavListBox {
	width: 100%;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.pointNavList__num {
	font-size: clamp(60px, -0.84rem + 9.56vw, 170px);
	font-weight: 500;
	color: rgb(255 255 255 / .4);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.pointNavList__name {
	font-size: clamp(16px, 0.16rem + 1.74vw, 36px);
	text-shadow: 0 0 20px rgb(0 71 119 / 1);
	position: relative;
	z-index: 0;
}

/* pointSection */
.pointSection {
	padding-top: clamp(80px, 3.18rem + 7.77vw, 200px);
}
.pointSection + .pointSection {
	margin-top: -150px;
}

.pointHead {
	max-width: 1620px;
}
.pointHead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px calc(60 / 1200 * 100%);
}
.pointHead__img {
	width: calc(1000 / 1620 * 100%);
}

.pointHeadContents {
	flex: 1;
}
.pointHead__title {
	display: flex;
	align-items: center;
	column-gap: 1em;
	font-size: clamp(24px, 0.83rem + 1.39vw, 40px);
	line-height: 1;
	color: #2cb5a9;
}
.pointHead__title .num {
	font-size: clamp(100px, 2.91rem + 6.95vw, 180px);
	font-weight: 500;
	line-height: 1;
	background: linear-gradient(90deg, rgba(255, 244, 113, 1) 0%, rgba(135, 208, 244, 1) 50%, rgba(44, 181, 169, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pointHeadInfo {
	margin-top: 70px;
}
.pointHeadInfo__title {
	display: flex;
	align-items: center;
	column-gap: 1em;
	color: #2cb5a9;
	font-size: clamp(12px, 0.5rem + 0.52vw, 18px);
	white-space: nowrap;
}
.pointHeadInfo__title::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #95dad4;
}
.pointHeadInfo__title .em {
	font-size: calc(24 / 18 * 100%);
}
.pointHeadInfo__text {
	font-size: clamp(20px, 0.21rem + 1.39vw, 30px); /* 1201 - 1920 */
	line-height: 2;
	border-bottom: 1px solid #95dad4;
	padding-block: 1em;
	padding-left: 1.2em;
}

.pointLoop {
	display: flex;
	overflow: hidden;
	margin-top: 150px;
}
.pointLoopSlider {
  display: flex;
  align-items: flex-start;
  animation: scroll-left 30s infinite linear .5s both;
  position: relative;
  z-index: -1;
}
.pointLoopSlider > li {
  width: 545px;
  padding-inline: 25px;
}
.pointLoopSlider > li img {
  display: block;
  width: 100%;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.pointBtnBox {
	gap: 20px calc(60 / 1440 * 100%);
}
* .pointBtnBox {
	margin-top: 100px;
}
.pointBtnBox__button {
	width: 100%;
	max-width: 400px;
	height: auto;
	background-color: #e0aa6e;
	font-size: clamp(14px, 0.62rem + 0.52vw, 20px);
	letter-spacing: 0.02em;
	padding: 1em;
}

/* interviewBox */
.interviewBox {
	margin-top: 200px;
	padding-bottom: 150px;
	overflow: hidden;
}
.interviewBox + .interviewBox {
	margin-top: 0;
}
.interviewBoxHead {
	display: flex;
	align-items: center;
	column-gap: calc(100 / 1620 * 100%);
	max-width: 1620px;
	position: relative;
	z-index: 1;
}
.interviewHuman {
	width: calc(240 / 1620 * 100%);
}
.interviewBoxCopy {
	flex: 1;
	margin-right: calc(50% - 50vw);
	padding: 30px calc(100 / 1620 * 100%);
	position: relative;
	z-index: 0;
}
.interviewBoxCopy::before {
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 50vw 0 0 50vw;
	background: linear-gradient(135deg, rgba(255, 244, 113, 1) 0%, rgba(135, 208, 244, 1) 50%, rgba(44, 181, 169, 1) 100%);
	opacity: .5;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.interviewBoxCopy__text {
	font-size: clamp(15px, 0.31rem + 1.3vw, 30px);
	line-height: 1.86;
}

.interviewBoxBody {
	max-width: 1620px;
	margin-top: 15px;
	padding-left: min(calc(50 / 1620 * 100%), 50px);
}
.interviewBoxBody__inner {
	display: flex;
	align-items: flex-start;
	gap: 20px calc(100 / 1570 * 100%);
	padding-left: calc(100 / 1570 * 100%);
	padding-bottom: calc(100 / 1570 * 100%);
	position: relative;
	z-index: 0;
}
.interviewBoxBody__inner::before {
	content: '';
	width: calc(100% - 170px);
	height: calc(100% + 6vw + 15px);
	background : linear-gradient(135deg, rgba(255, 244, 113, 1) 0%, rgba(116, 216, 255, 1) 50%, rgba(47, 247, 229, 1) 100%);
	border-radius: 30px;
	opacity: .1;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.interviewBoxContents {
	flex: 1;
	padding-top: calc(50 / 1570 * 100%);
}
.interviewBox__text {
	font-size: clamp(14px, 0.71rem + 0.35vw, 18px);
	letter-spacing: 0.1em;
	line-height: 2;
}

.interviewBoxTag {
	margin-top: 40px;
}
.interviewBoxTag > li {
	width: fit-content;
	font-size: clamp(12px, 0.5rem + 0.52vw, 18px);
	line-height: 1.5;
	padding: .4em 1.2em;
	text-align: center;
	position: relative;
	z-index: 0;
}
.interviewBoxTag > li::before {
	content: '';
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 244, 113, 1) 0%, rgba(135, 208, 244, 1) 50%, rgba(44, 181, 169, 1) 100%);
	border-radius: 50vw;
	opacity: .4;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.interviewBoxTag > li + li {
	margin-top: 20px;
}

.interviewBoxContents .pointBtnBox {
	justify-content: flex-start;
	margin-top: 80px;
}

.interviewBoxImg {
	width: calc(730 / 1470 * 100%);
	position: relative;
	z-index: 0;
}

.interviewBoxImg__img--small {
	width: calc(400 / 730 * 100%);
	position: absolute;
	bottom: -30%;
	left: -28%;
	z-index: 1;
}

.pointWrap {
	padding-block: clamp(40px, 1.59rem + 3.88vw, 100px);
}
.pointSection:last-of-type .pointWrap {
	padding-bottom: 0;
}


.pointContainer {
	max-width: 1620px;
}

.pointRanking {
	width: calc(780 / 1620 * 100%);
}

.graph {
	width: calc(632 / 1620 * 100%);
}

.pointRankingItem {
	padding-inline: calc(40 / 780 * 100%);
	padding-bottom: 40px;
	position: relative;
	z-index: 0;
}
.pointRankingItem:not(.pointRankingItem:first-of-type) {
	max-width: 620px;
	border-bottom: 1px solid #ccc;
	padding-inline: 20px;
	padding-bottom: 30px;
}
.pointRankingItem + .pointRankingItem {
	margin-top: 35px;
}

.pointRankingItem__body {
	column-gap: 2em;
}
.pointRankingItem__crown {
	display: block;
	width: 40px;
	margin-inline: auto;
}
.pointRankingItem__numText {
	font-size: clamp(20px, 0rem + 2.61vw, 50px);
	font-weight: 500;
	margin-top: 6px;
}
.pointRankingItem__text {
	font-size: clamp(11px, 0.31rem + 0.78vw, 20px);
	line-height: 1.4;
}
.pointRankingItem__text + .pointRankingItem__text {
	margin-top: 1em;
}
.pointRankingItem__text .em {
	font-size: calc(28 / 19 * 100%);
	line-height: 1;
}
.pointRankingItem__text .num {
	font-size: calc(45 / 19 * 100%);
	line-height: 1;
	margin-inline: 6px;
}
.pointRankingItem__text .em .num {
	font-size: calc(44 / 28 * 100%);
	line-height: 1;
}

.pointRankingItem01::before {
	content: '';
	width: 100%;
	height: calc(100% - 40px);
	background: linear-gradient(135deg, rgba(255, 244, 113, 1) 0%, rgba(116, 216, 255, 1) 50%, rgba(47, 247, 229, 1) 100%);
	opacity: .2;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}
.pointRankingItem01 .pointRankingItem__body {
	margin-top: 40px;
}
.pointRankingItem01 .pointRankingItem__crown {
	width: 50px;
}
.pointRankingItem01 .pointRankingItem__numText {
	font-size: clamp(32px, 0rem + 4.17vw, 80px);
}
.pointRankingItem01 .pointRankingItem__text {
	font-size: clamp(13px, 0.27rem + 1.13vw, 26px);
}
.pointRankingItem01 .pointRankingItem__text .em {
	font-size: calc(38 / 26 * 100%);
}
.pointRankingItem01 .pointRankingItem__text .num {
	font-size: calc(60 / 26 * 100%);
}
.pointRankingItem__text .em .num {
	font-size: calc(60 / 38 * 100%);
}

/* carMap */
.carMap {
	max-width: 1200px;
	margin-top: 100px;
}

.carMap__annotation {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: #e9425b;
	margin-top: 2em;
	text-align: center;
}

.carMapInfo {
	margin-top: 30px;
}

/* equipment */
.equipment {
	max-width: 1570px;
	margin-top: 100px;
}

/* busBox */
.busBox {
	max-width: 1200px;
	margin-top: 100px;
}

.busBox__title {
	font-size: clamp(18px, 0.62rem + 1.04vw, 30px);
	font-weight: 500;
	letter-spacing: 0.05em;
}
.busBox--01 .busBox__title {
	color: #2c926d;
}
.busBox__title .text {
	display: flex;
	align-items: center;
	column-gap: .5em;
}
.busBox__title .text::before {
	width: calc(50 / 1180 * 100%);
}
.busBox--01 .busBox__title .text::before {
	background-color: #2c926d;
}
.busBox--02 .busBox__title .text::before {
	background-color: #e9425b;
}
.has-busIcon::before {
	content: '';
	display: block;
	aspect-ratio: 1;
	background-color: #fff;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}
.has-busIcon01::before {
	-webkit-mask-image: url(../../access/img/icon_bus01.svg);
  mask-image: url(../../access/img/icon_bus01.svg);
}

.busMap {
	margin-top: 15px;
}
.busBox--02 .busMap {
	margin-top: 50px;
}

.busInfo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 80px;
	margin-inline: auto;
}
.busBox--01 .busInfo {
	gap: 30px calc(60 / 1180 * 100%);
}
.busBox--02 .busInfo {
	/* grid-template-columns: calc(500 / 1050 * 100%) calc(470 / 1050 * 100%); */
	gap: 30px calc(80 / 1050 * 100%);
	max-width: 1050px;
}
.busInfo img {
	width: 100%;
}

.busInfo02 {
	margin-top: 50px;
	margin-inline: auto;
}

.busInfo__item--start {
	width: calc(680 / 1050 * 100%);
}

.bus .sectionCircle {
	bottom: 0;
	right: 0;
	width: calc(1417 / 1920 * 100%);
	z-index: -1;
}

.bus__caption {
	max-width: 1340px;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 1em;
	text-align: right;
}

/* standard */
.standard {
	max-width: 1570px;
	margin-top: 140px;
}
.standard__copy {
	font-size: clamp(20px, 0.83rem + 0.87vw, 30px);
	letter-spacing: 0.1em;
	line-height: 1.8;
	color: #2cb5a9;
	text-align: center;
}
.standard__copy .em {
	font-style: italic;
}

.standardList {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px calc(50 / 1570 * 100%);
	margin-top: 50px;
}
.standardList__name {
	font-size: clamp(14px, 0.71rem + 0.35vw, 18px);
	letter-spacing: 0.1em;
	line-height: 1.8;
	margin-top: 1em;
}


/* point02 */
.point02 .interviewBox01 .interviewBoxBody__inner {
	padding-bottom: calc(200 / 1570 * 100%);
}
.point02 .interviewBox01 .interviewBoxImg__img--small {
	bottom: -50%;
}

.point02 .interviewBox05 .interviewBoxImg__img--small02 {
	bottom: -68%;
	left: 34%;
}

@media screen and (min-width: 1921px) {
	.pointLoopSlider > li {
		width: 700px;
	}
}

@media screen and (min-width: 769px) {
	.pointRankingItem02 {
		margin-left: calc(60 / 780 * 100%);
	}

	.pointRankingItem03 {
		margin-left: calc(110 / 780 * 100%);
	}

	.point02 .pointRankingItem01 .pointRankingItem__body {
		padding-inline: 28px;
	}
}

@media screen and (max-width: 1200px) {
	.pointLoopSlider > li {
    width: 400px;
    padding-inline: 15px;
	}

	.interviewBoxImg__img--small {
		margin-top: 20px;
		position: static;
	}
}

@media screen and (max-width: 768px) {
	.pointNav {
		max-width: 560px;
	}
	.pointNavList {
		grid-template-columns: 1fr;
	}
	.pointNavList__btn::after {
		width: 10px;
		height: 10px;
	}

	.pointBtnBox {
		max-width: 280px;
		margin-inline: auto;
	}
	* .pointBtnBox {
		margin-top: 40px;
	}

	.pointSection + .pointSection {
    margin-top: -60px;
	}

	.pointHead {
		width: 100%;
		max-width: 560px;
	}
	.pointHead__inner {
		flex-direction: column;
	}
	.pointHead__img {
		width: 100%;
	}

	.pointHeadContents {
		width: calc(320 / 375 * 100%);
		margin-inline: auto;
	}
	.pointHead__title {
		justify-content: center;
	}
	.pointHeadInfo {
		margin-top: 10px;
	}
	.pointHeadInfo__text {
		line-height: 1.8;
		padding-left: 0.8em;
	}

	.pointLoop {
		margin-top: 40px;
	}
	.pointLoopSlider > li {
		width: 180px;
		padding-inline: 10px;
	}

	.interviewBox {
		margin-top: 60px;
		padding-bottom: 60px;
	}

	.interviewBoxHead {
		width: calc(340 / 375 * 100%);
    column-gap: calc(20 / 340 * 100%);
    max-width: 560px;
	}
	.interviewHuman {
		width: calc(90 / 340 * 100%);
	}
	.interviewBoxCopy {
    padding: 20px calc(40 / 340 * 100%);
		padding-right: 0;
	}
	.interviewBoxBody {
    max-width: 560px;
    padding-left: 0;
	}
	.interviewBoxBody__inner {
		flex-direction: column-reverse;
    padding-inline: 30px;
    padding-bottom: 30px;
	}
	.interviewBoxBody__inner::before {
		width: 100%;
		height: 110%;
		border-radius: 20px;
	}
	.interviewBoxContents {
		padding-top: 0;
	}
	.interviewBoxTag {
		margin-top: 15px;
	}
	.interviewBoxTag > li + li {
		margin-top: 10px;
	}
	.interviewBoxImg {
		width: 100%;
	}
	.interviewBoxImg__img--small {
		width: 100%;
	}

	.interviewBoxContents .pointBtnBox {
		margin-top: 30px;
	}

	.pointContainer {
		width: 100%;
	}

	.pointBox {
		flex-direction: column-reverse;
		row-gap: 20px;
	}

	.graph {
		width: min(calc(320 / 375 * 100%), 400px);
	}
	.graph .p-caption {
		margin-top: 1em;
	}

	.pointRanking {
		width: 100%;
	}
	.pointRankingItem:not(.pointRankingItem:first-of-type) {
		width: calc(320 / 375 * 100%);
		margin-inline: auto;
		padding-inline: 0;
		padding-bottom: 10px;
	}
	.pointRankingItem + .pointRankingItem {
		margin-top: 10px;
	}
	.pointRankingItem__body.flex {
		justify-content: flex-start;
		column-gap: 1em;
		padding-inline: 5px;
	}
	.pointRankingItem:not(.pointRankingItem:first-of-type) .pointRankingItem__body {
		padding-inline: 10px;
	}
	.pointRankingItem__crown {
		width: 16px;
	}
	.pointRankingItem__text + .pointRankingItem__text {
		margin-top: 5px;
	}
	.pointRankingItem__text .num {
		margin-inline: 2px;
	}

	.pointRankingItem01 {
		margin-bottom: 20px;
		padding-inline: calc(27.5 / 375 * 100%);
		padding-bottom: 20px;
	}
	.pointRankingItem01 .pointRankingItem__crown {
		width: 20px;
	}
	.pointRankingItem01 .pointRankingItem__body {
		margin-top: 20px;
	}

	.equipment {
		max-width: 400px;
		margin-top: 30px;
	}

	.carMap {
		width: calc(260 / 375 * 100%);
		max-width: 560px;
		margin-top: 50px;
	}

	.carMap .sp-modalIcon {
		top: -20px;
		right: -20px;
	}

	.carMap__annotation {
		font-size: 10px;
		margin-top: 1em;
		padding-left: 1em;
		text-indent: -1em;
		text-align: left;
	}

	.carMapInfo {
		margin-top: 20px;
	}

	/* busBox */
	.busBox {
		width: calc(260 / 375 * 100%);
		margin-top: 40px;
	}

	.busBox__title .text::before {
		width: 30px;
	}

	.busMap {
		margin-top: 25px;
	}
	.busBox--02 .busMap {
		margin-top: 40px;
	}

	.busModal .swipeInner {
		padding-inline: 20px;
	}

	.busInfo {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-top: 30px;
		/* padding-inline: calc(29 / 348 * 100%); */
	}
	.busInfo02 {
		max-width: 560px;
		margin-top: 30px;
	}

	.busInfo__item--holiday {
		width: calc(273 / 290 * 100%);
	}
	.busInfo__item--start {
		width: calc(240 / 290 * 100%);
	}

	.busMap .sp-modalIcon {
		top: -20px;
	}

	.bus .sectionCircle {
		width: calc(250 / 375 * 100%);
	}

	.bus__caption {
		max-width: 560px;
		font-size: 10px;
		text-align: left;
	}

	.standard {
		max-width: 400px;
		margin-top: 40px;
	}
	.standardList {
		flex-direction: column;
    margin-top: 20px;
	}
}