@charset "UTF-8";

/* CSS Document */
/*
header SP用 レイアウト
========================================================================================== */
@media (width <=767px) {
	header {
		padding: 0 76px 0 5px;
	}

	header h1 {
		width: calc(325/750*100vw);
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translate(-50%, -50%);
	}

	header h1 a {
		display: block;
	}

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

	header h2 {
		display: none;
	}
}

/*
sailer レイアウト
========================================================================================== */
html {
	/* scroll-behavior: smooth; */
	scroll-padding-top: 76px;
}

#sailer-contents {
	padding-top: 76px;
	font-family: "Noto Sans JP", sans-serif;
	letter-spacing: 0.06em;
	font-weight: bold;

	/* 変数 */
	--blue100-color: #1062ba;
	--blue90-color: #2872c1;
	--blue80-color: #4081c8;
	--blue70-color: #5891cf;
	--blue60-color: #70a1d6;
	--blue50-color: #87b0dc;
	--blue40-color: #9fc0e3;
	--blue30-color: #b7d0ea;
	--blue20-color: #cfe0f1;
	--blue10-color: #e7eff8;
	--white-color: #ffffff;
	--black-color: #000000;
	--accent-color: #37a5ff;
	--career-color: #ff638f;
}

/* ===========================
************ 共通 ************
=========================== */
.disp-pc {
	display: block;
}

@media (width <=767px) {
	.disp-pc {
		display: none;
	}
}

.disp-sp {
	display: none;
}

@media (width <=767px) {
	.disp-sp {
		display: block;
	}
}

.wbr-parent {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.fw-bold {
	font-weight: bold;
}

.sec {}

.sec-title {
	margin-bottom: 45px;
	font-size: 2.4rem;
	text-align: center;
}

@media (width <=767px) {
	.sec-title {
		font-size: 1.6rem;
	}
}

button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

/* ===========================
*********** メニュー ***********
=========================== */
/* ハンバーガー */
.ham {
	width: 145px;
	height: 145px;
	border-radius: 50%;
	border: 1px solid var(--white-color);
	background: var(--accent-color);
	cursor: pointer;
	position: fixed;
	top: 30px;
	right: 40px;
	z-index: 999;
}

@media (width <=767px) {
	.ham {
		width: 76px;
		height: 76px;
		border-radius: 0;
		border: none;
		top: 0;
		right: 0;
	}
}

.ham-text {
	color: var(--white-color);
	font-size: 2rem;
	text-transform: uppercase;
	position: absolute;
	top: 35px;
	left: 50%;
	transform: translateX(-50%);
}

@media (width <=767px) {
	.ham-text {
		font-size: 1.2rem;
		top: 10px;
	}
}

.ham-line {
	width: 60px;
	height: 4px;
	background: var(--white-color);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

@media (width <=767px) {
	.ham-line {
		width: 40px;
		height: 2px;
	}
}

.ham-line.top {
	top: 68px;
}

@media (width <=767px) {
	.ham-line.top {
		top: 30px;
	}
}

.ham-line.center {
	top: 83px;
}

@media (width <=767px) {
	.ham-line.center {
		top: 42px;
	}
}

.ham-line.bottom {
	top: 98px;
}

@media (width <=767px) {
	.ham-line.bottom {
		top: 54px;
	}
}

.hamMenu {
	display: none;
	width: 553px;
	max-height: 100vh;
	padding: 90px 80px 170px;
	background: rgba(16, 98, 186, 0.9);
	overflow-y: scroll;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
}

@media (width <=767px) {
	.hamMenu {
		width: 100%;
		padding: 76px 47px 216px;
		background: var(--blue100-color);
	}
}

.ham-close {
	width: 128px;
	height: 128px;
	position: absolute;
	top: 40px;
	right: 48px;
}

@media (width <=767px) {
	.ham-close {
		width: 64px;
		height: 64px;
		top: 10px;
		right: 5px;
	}
}

.ham-close:before,
.ham-close:after {
	content: "";
	width: 1px;
	height: 100%;
	background: var(--white-color);
	position: absolute;
	top: 0;
	left: 0;
}

.ham-close:before {
	transform: translate(64px, 0) rotate(45deg);
}

@media (width <=767px) {
	.ham-close:before {
		transform: translate(32px, 0) rotate(45deg);
	}
}

.ham-close:after {
	transform: translate(64px, 0) rotate(-45deg);
}

@media (width <=767px) {
	.ham-close:after {
		transform: translate(32px, 0) rotate(-45deg);
	}
}

.hamMenu-head {
	display: block;
	margin-bottom: 60px;
	color: var(--white-color);
	font-size: 2rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (width <=767px) {
	.hamMenu-head {
		font-size: 1.6rem;
	}
}

.hamMenu > ul > li {
	border-bottom: 1px solid var(--white-color);
	padding: 10px 0;
}

.hamMenu > ul > li:last-child {
	border-bottom: none;
}

.hamMenu ul ul {
	padding-left: 40px;
}

.hamMenu ul li li {
	list-style: disc;
	color: var(--white-color);
}

.hamMenu ul li a {
	display: inline-block;
	padding: 20px 0;
	color: var(--white-color);
	font-size: 2rem;
	position: relative;
}

@media (width <=767px) {
	.hamMenu ul li a {
		padding: 15px 0;
		font-size: 1.6rem;
	}
}

.hamMenu ul li a:after {
	content: "";
	width: 16px;
	height: 16px;
	border: 1px solid;
	border-color: transparent var(--white-color) var(--white-color) transparent;
	position: absolute;
	top: 50%;
	right: -25px;
	transform: translate(0, -50%) rotate(-45deg);
}

@media (width <=767px) {
	.hamMenu ul li a:after {
		width: 13px;
		height: 13px;
	}
}

/* ===========================
************ KV ************
=========================== */
.secKv {
	display: grid;
	grid-template-columns: calc(440/1440*100vw) calc(280/1440*100vw) calc(720/1440*100vw);
	grid-template-rows: 334px 40px 167px 167px;
	width: 100%;
	background: var(--blue100-color);
	position: relative;
}

@media (width <=767px) {
	.secKv {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: calc(335/750*100vw) calc(60/750*100vw) calc(335/750*100vw) calc(182/750*100vw) calc(182/750*100vw);
	}
}

.kv-cont {}

.kv-cont.ph01 {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
	animation: fade 2s both;
}

@media (width <=767px) {
	.kv-cont.ph01 {
		grid-row: 3 / 4;
		grid-column: 1 / 3;
	}
}

.kv-cont.ph02 {
	grid-row: 1 / 2;
	grid-column: 3 / 4;
	animation: fade 2s 0.5s both;
}

@media (width <=767px) {
	.kv-cont.ph02 {
		grid-row: 1 / 2;
		grid-column: 1 / 3;
	}
}

.kv-cont.ph03 {
	grid-row: 3 / 5;
	grid-column: 1 / 2;
	animation: fade 2s 0.2s both;
}

@media (width <=767px) {
	.kv-cont.ph03 {
		display: none;
	}
}

.kv-cont.ph04 {
	grid-row: 3 / 4;
	grid-column: 2 / 3;
	animation: fade 2s 0.8s both;
}

@media (width <=767px) {
	.kv-cont.ph04 {
		grid-row: 4 / 5;
		grid-column: 1 / 2;
	}
}

.kv-cont.ph05 {
	grid-row: 4 / 5;
	grid-column: 2 / 3;
	animation: fade 2s 0.5s both;
}

@media (width <=767px) {
	.kv-cont.ph05 {
		grid-row: 5 / 6;
		grid-column: 1 / 2;
	}
}

.kv-cont.ph06 {
	grid-row: 3 / 5;
	grid-column: 3 / 4;
	animation: fade 2s 0.3s both;
}

@media (width <=767px) {
	.kv-cont.ph06 {
		grid-row: 4 / 6;
		grid-column: 2 / 3;
	}
}

.kv-cont:is(.ph01, .ph02, .ph03, .ph06) img {
	width: 100%;
	height: 334px;
	object-fit: cover;
}

@media (width <=767px) {
	.kv-cont:is(.ph01, .ph02, .ph03, .ph06) img {
		width: 100%;
		height: auto;
		object-fit: fill;
	}
}

.kv-cont:is(.ph04, .ph05) img {
	width: 100%;
	height: 167px;
	object-fit: cover;
}

@media (width <=767px) {
	.kv-cont:is(.ph04, .ph05) img {
		width: 100%;
		height: auto;
		object-fit: fill;
	}
}

.kv-cont.title {
	display: grid;
	place-content: center;
	grid-row: 2 / 3;
	grid-column: 1 / 4;
	text-align: center;
	color: var(--white-color);
	font-size: 2.5rem;
	animation: fade 2s 1s both;
}

@media (width <=767px) {
	.kv-cont.title {
		grid-row: 2 / 3;
		grid-column: 1 / 3;
		font-size: calc(38/750*100vw);
	}
}

.kv-cont.message {
	width: calc(984/1440*100vw);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% - 60px));
	animation: fade 2s 2s both;
}

@media (width <=767px) {
	.kv-cont.message {
		width: auto;
		top: 35%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

@keyframes fade {
	0% {
		opacity: 0;
		filter: blur(20px);
	}

	100% {
		opacity: 1;
		filter: blur(0);
	}
}

.kv-cont.message .message01 {
	width: 100%;
	height: auto;
}

@media (width <=767px) {
	.kv-cont.message .message01 {
		width: calc(399/750*100vw);
		height: auto;
		margin-left: 30px;
	}
}

.kv-cont.message .message02 {
	display: none;
}

@media (width <=767px) {
	.kv-cont.message .message02 {
		display: block;
		width: calc(699/750*100vw);
		height: auto;
	}
}

/* ===========================
************ タブ ************
=========================== */
.secTab {
	padding: 20px 0;
	background: var(--blue20-color);
}

.tab {
	display: flex;
	justify-content: center;
	gap: 20px;
}

@media (width <=767px) {
	.tab {
		gap: 10px;
	}
}

.tab .tabList {
	display: grid;
	place-content: center;
	width: 350px;
	height: 70px;
}

@media (width <=767px) {
	.tab .tabList {
		width: 158px;
		height: 57px;
		border-radius: 12px 12px 0 0;
	}
}

.tab.top .tabList {
	border-radius: 16px 16px 0 0;
}

@media (width <=767px) {
	.tab.top .tabList {
		border-radius: 12px 12px 0 0;
	}
}

.tab.bottom .tabList {
	border-radius: 0 0 16px 16px;
}

.tabList:has(a) {
	display: block;
}


.tabList.tabList-new {
	background: var(--accent-color);
}

.tabList.tabList-career {
	background: var(--career-color);
}

.tabList.active {
	background: var(--white-color);
}

.tabList a {
	display: grid;
	place-content: center;
	width: 100%;
	height: 100%;
}

.tabList h3 {
	font-size: 2.6rem;
}

@media (width <=767px) {
	.tabList h3 {
		font-size: 1.6rem;
	}
}

.tabList.tabList-new.active h3 {
	color: var(--accent-color);
}

.tabList.tabList-career.active h3 {
	color: var(--career-color);
}

.tabList h3 {
	color: var(--white-color);
}

.tab-contents {
	margin-inline: max(10px, 50% - 1340px/2);
	padding: 90px 10px 170px;
	border-radius: 16px;
	background: var(--white-color);
}

@media (width <=767px) {
	.tab-contents {
		padding: 35px 10px 50px;
		border-radius: 20px;
	}
}

.anchor {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
	margin-inline: max(10px, 50% - 900px/2);
	margin-bottom: 70px;
}

@media (width <=767px) {
	.anchor {
		gap: 10px;
		margin-bottom: 50px;
	}
}

.anchor.one {
	grid-template-columns: 1fr;
	margin-bottom: 50px;
}

@media (width <=767px) {
	.anchor.one {
		margin-bottom: 25px;
	}
}

.anchorList {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	place-content: center;
	place-items: center;
	gap: 20px;
	position: relative;
}

@media (width <=767px) {
	.anchorList {
		gap: 15px;
	}
}

.anchorList:after {
	content: "";
	width: 20px;
	height: 20px;
	border: 1px solid;
	border-color: transparent transparent var(--accent-color) var(--accent-color);
	transform: translate(-50%, 0) rotate(-45deg);
	position: absolute;
	top: 100%;
	left: 50%;
	transition: all ease 0.5s;
}

.anchorList.active:after {
	content: none;
}

.anchorList:hover:after {
	transform: translate(-50%, 10px) rotate(-45deg);
}

.anchorList img {
	display: block;
	width: 57px;
}

@media (width <=767px) {
	.anchorList img {
		width: calc(76/750*100vw);
	}
}

.anchorList h4 {
	display: block;
	font-size: 2.4rem;
	line-height: 1.2;
	text-align: center;
	color: var(--accent-color);
}

@media (width <=767px) {
	.anchorList h4 {
		font-size: 1.5rem;
	}
}

.anchorList.active h4 {
	color: var(--black-color);
}

/* =====タブコンテンツ===== */
/* 募集要項 */
.recruitment {
	margin-inline: max(10px, 50% - 1140px/2);
	margin-bottom: 100px;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.875;
	letter-spacing: normal;
	text-align: left;
}

@media (width <=767px) {
	.recruitment {
		margin-bottom: 50px;
		font-size: 1.2rem;
	}
}

.recruitment table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 4px;
}

@media (width <=767px) {
	.recruitment table {
		border-spacing: 0 15px;
	}
}

@media (width <=767px) {

	.recruitment th,
	.recruitment td {
		display: block;
		width: 100%;
	}
}

.recruitment th {
	width: 300px;
	padding-left: 25px;
	vertical-align: middle;
	background: var(--blue30-color);
}

@media (width <=767px) {
	.recruitment th {
		width: 100%;
		padding-left: 15px;
		font-size: 1.4rem;
	}
}

.recruitment td {
	width: calc(100% - 304px);
	padding: 20px 10px 20px 25px;
	background: var(--blue10-color);
}

@media (width <=767px) {
	.recruitment td {
		width: 100%;
		padding: 20px 10px 20px 15px;
	}
}

.recruitment td a {
	color: var(--accent-color);
}

/* 入社時の教育と乗船の流れ */
.education {
	margin-bottom: 100px;
}

@media (width <=767px) {
	.education {
		margin-bottom: 50px;
	}
}

.education-flow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-inline: max(10px, 50% - 1016px/2);
}

@media (width <=767px) {
	.education-flow {
		grid-template-columns: 1fr;
	}
}

.education-flowList {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	place-items: center;
	gap: 0;
	padding: 27px 10%;
	background: var(--blue20-color);
	position: relative;
}

@media (width <=767px) {
	.education-flowList {
		padding: 32px 10%;
	}
}

.education-flowList:after {
	content: "";
	width: 20px;
	height: 40px;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	background: var(--blue20-color);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(100%, -50%);
}

@media (width <=767px) {
	.education-flowList:after {
		width: 40px;
		height: 20px;
		clip-path: polygon(0 0, 50% 100%, 100% 0);
		top: auto;
		bottom: 1px;
		right: 50%;
		transform: translate(50%, 100%);
	}
}

.education-flowList:last-child::after {
	content: none;
}

.flowNumber {
	width: 44px;
	margin-bottom: 38px;
	position: relative;
}

@media (width <=767px) {
	.flowNumber {
		margin-bottom: 35px;
	}
}

.flowNumber:after {
	content: "";
	width: 20px;
	height: 2px;
	background: var(--blue100-color);
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
}

@media (width <=767px) {
	.flowNumber:after {
		bottom: -10px;
	}
}

.flowHead {
	margin-bottom: 15px;
	color: var(--blue100-color);
	font-size: 1.8rem;
	line-height: 2;
	text-align: center;
}

@media (width <=767px) {
	.flowHead {
		font-size: 1.6rem;
	}
}

.flowText {
	font-size: 1.6rem;
	line-height: 2;
	font-weight: normal;
	text-align: center;
}

@media (width <=767px) {
	.flowText {
		font-size: 1.2rem;
	}
}

/* 乗船してからの流れ */
.flow {}

.flow-contents {
	margin-inline: max(10px, 50% - 800px/2);
}

.flow-cont {
	padding: 90px 12% 30px;
	position: relative;
}

@media (width <=767px) {
	.flow-cont {
		padding: 90px 5% 30px;
	}
}

.flow-cont:first-child {
	padding: 30px 12%;
}

@media (width <=767px) {
	.flow-cont:first-child {
		padding: 37px 5%;
	}
}

.flow-cont:not(:last-child):after {
	content: "";
	width: 100%;
	height: 50px;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	background: inherit;
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	z-index: 1;
}

.flow-cont.cont01 {
	background: var(--blue10-color);
}

.flow-cont.cont02 {
	background: var(--blue20-color);
}

.flow-cont.cont03 {
	background: var(--blue30-color);
}

.flow-contHead {
	margin-bottom: 20px;
	text-align: center;
}

@media (width <=767px) {
	.flow-contHead {
		margin-bottom: 32px;
	}
}

.flow-contHead span {
	display: block;
}

.flow-contHead span:first-child {
	margin-bottom: 20px;
	font-size: 2.8rem;
}

@media (width <=767px) {
	.flow-contHead span:first-child {
		font-size: 1.6rem;
		letter-spacing: 0.06em;
	}
}

.flow-contHead span:last-child {
	font-size: 1.6rem;
	font-weight: normal;
}

@media (width <=767px) {
	.flow-contHead span:last-child {
		font-size: 1.2rem;
	}
}

.flow-contBand:not(:last-child) {
	margin-bottom: 25px;
}

@media (width <=767px) {
	.flow-contBand:not(:last-child) {
		margin-bottom: 20px;
	}
}

.flow-contBand span {
	display: grid;
	place-content: center;
	width: 100%;
	height: 50px;
	margin-bottom: 20px;
	border-radius: 15px;
	background: var(--blue100-color);
	color: var(--white-color);
	font-size: 2rem;
}

@media (width <=767px) {
	.flow-contBand span {
		width: 175px;
		height: 40px;
		margin-inline: auto;
		font-size: 1.6rem;
	}
}

.flow-contBand p {
	font-size: 1.6rem;
	line-height: 1.875;
	font-weight: normal;
	text-align: center;
}

@media (width <=767px) {
	.flow-contBand p {
		font-size: 1.2rem;
	}
}

.flow-contBox {
	padding: 20px 0 20px 20%;
	border-radius: 15px;
	background: var(--white-color);
}

@media (width <=767px) {
	.flow-contBox {
		padding: 25px 6% 25px 15%;
	}
}


.flow-contBox:has(.flow-contImage) {
	padding: 20px 0;
}

@media (width <=767px) {
	.flow-contBox:has(.flow-contImage) {
		padding: 25px 9%;
	}
}

.flow-contBox > li {
	list-style: disc;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.875;
	font-feature-settings: "palt";
}

@media (width <=767px) {
	.flow-contBox > li {
		font-size: 1.2rem;
	}
}

.flow-contBox > li::marker {
	/* font-size: 0.8em; */
}

.flow-contTitle {
	display: block;
	margin-bottom: 20px;
	font-size: 2rem;
	letter-spacing: 0.14em;
	text-align: center;
}

@media (width <=767px) {
	.flow-contTitle {
		font-size: 1.6rem;
		line-height: 1.75;
	}
}

.flow-contBox + .flow-contTitle {
	margin-top: 40px;
}

.flow-contImage {
	display: grid;
	grid-template-columns: 1fr;
	gap: 37px;
}

.flow-contImageList {
	position: relative;
}

.flow-contImagePosi {
	display: grid;
	place-content: center;
	width: 282px;
	height: 35px;
	margin-inline: auto;
	padding-top: 5px;
	background: var(--blue10-color);
	font-size: 1.8rem;
	font-weight: normal;
	position: relative;
}

@media (width <=767px) {
	.flow-contImagePosi {
		width: 182px;
		margin-inline: auto 0;
		font-size: 1.4rem;
	}
}

.flow-contImagePosi:after {
	content: "";
	width: 100%;
	height: 18px;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	background: inherit;
	position: absolute;
	top: 99%;
	left: 0;
}

.flow-contImageList:last-child .flow-contImagePosi {
	height: 56px;
	padding-top: 0;
	background: var(--blue40-color);
}

@media (width <=767px) {
	.flow-contImageList:last-child .flow-contImagePosi {
		width: 100%;
	}
}

.flow-contImageList:last-child .flow-contImagePosi::after {
	content: none;
}

.flow-contImageAge {
	font-size: 2rem;
	letter-spacing: 0.14em;
	position: absolute;
	top: 50%;
	left: calc(50% - 166px);
	transform: translate(-100%, -50%);
}

@media (width <=767px) {
	.flow-contImageAge {
		font-size: 1.4rem;
		left: 0;
		transform: translate(0, -50%);
	}
}

.flow-contImageIcon {
	width: 69px;
	position: absolute;
	bottom: 0;
}

@media (width <=767px) {
	.flow-contImageIcon {
		display: none;
	}
}

.flow-contImageIcon.icon01 {
	left: calc(50% - 141px - 10px);
	transform: translate(-100%, 0);
}

.flow-contImageIcon.icon02 {
	left: calc(50% + 141px + 10px);
}

/* ===========================
*********** テーブル ***********
=========================== */
.secTable {
	padding: 100px 0;
}

.schedule {
	margin-inline: max(10px, 50% - 1140px/2);
	overflow-x: scroll;
	position: relative;
}

.schedule table {
	width: 1140px;
	margin: 0 auto;
	font-size: 1.6rem;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
}

@media (width <=767px) {
	.schedule table {
		width: 855px;
		font-size: 1.2rem;
	}
}

.schedule tr {
	height: 70px;
}

@media (width <=767px) {
	.schedule tr {
		height: 53px;
	}
}

.schedule th,
.schedule td {
	vertical-align: middle;
	line-height: 1.375;
	position: relative;
}

.schedule th:not(:last-child):after,
.schedule td:not(:last-child):after {
	content: "";
	width: 1px;
	height: 40px;
	background: var(--black-color);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

@media (width <=767px) {

	.schedule th:not(:last-child):after,
	.schedule td:not(:last-child):after {
		height: 30px;
	}
}

.schedule thead {
	background: var(--blue20-color);
}

.schedule thead th span {
	display: block;
	font-weight: normal;
}

.schedule tbody tr:nth-child(even) {
	background: var(--blue10-color);
}

.schedule-icon {
	display: none;
}

@media (width <=767px) {
	.schedule-icon {
		display: block;
		width: 120px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

/* 上書きクラス */
.scroll-hint-icon {
	width: 120px;
	height: 100px;
	border-radius: 15px;
	background: rgba(35, 28, 29, 0.8);
	background-image: none;
}

.scroll-hint-icon:before {
	width: 50px;
	height: 61px;
	background-image: url(../../images/sailer/icon_swipe.svg);
}

.scroll-hint-icon:after {
	display: none;
}

.scroll-hint-text {
	display: none;
}

/* ===========================
************ FAQ ************
=========================== */
.secFaq {
	background: var(--blue20-color);
	padding: 100px 0;
}

.faq-lists {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}

@media (width <=767px) {
	.faq-lists {
		gap: 20px;
	}
}


.faq-list {
	margin-inline: max(10px, 50% - 1140px/2);
	background: var(--white-color);
	border-radius: 45px;
	position: relative;
}

@media (width <=767px) {
	.faq-list {
		border-radius: 30px;
	}
}

.faq-list:before,
.faq-list:after {
	content: "";
	position: absolute;
	top: 50px;
	background: var(--black-color);
}

@media (width <=767px) {

	.faq-list:before,
	.faq-list:after {
		top: 63px;
	}
}

.faq-list:before {
	right: 30px;
	width: 32px;
	height: 2px;
	transform: translateY(-50%);
}

.faq-list:after {
	right: 45px;
	width: 2px;
	height: 32px;
	transform: translate(50%, -50%);
	transition: all 0.3s;
}

.faq-list:has(.js-active):after {
	transform: translate(50%, -50%) rotate(90deg);
}

.faq-cont {
	display: flex;
	gap: 40px;
	width: 100%;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.75;
}

@media (width <=767px) {
	.faq-cont {
		flex-direction: column;
		gap: 0;
		font-size: 1.4rem;
	}
}

.faq-cont img {
	width: 24px;
}

@media (width <=767px) {
	.faq-cont img {
		width: 14px;
		margin-inline: auto;
	}
}

.faq-cont.contQ {
	align-items: center;
	height: 100px;
	padding: 0 110px 0 40px;
	color: var(--black-color);
}

@media (width <=767px) {
	.faq-cont.contQ {
		place-content: center;
		align-items: flex-start;
		height: 132px;
		padding: 0 8%;
		gap: 10px;
		text-align: left;
	}

	.faq-cont.contQ span {
		display: block;
		margin-right: 30%;
	}
}

.faq-cont.contA {
	align-items: flex-start;
	padding: 30px 110px 70px 40px;
}

@media (width <=767px) {
	.faq-cont.contA {
		padding: 0 8% 30px;
	}
}

.faq-cont.contA p {
	font-weight: normal;
}

.js-accoCont {
	display: none;
}

.faq-contList {
	display: grid;
	grid-template-columns: 1fr;
	gap: 50px;
	font-size: 2rem;
	line-height: 1.75;
	text-align: left;
}

@media (width <=767px) {
	.faq-contList {
		gap: 20px;
		font-size: 1.2rem;
	}
}

.faq-contList li {
	display: flex;
}

@media (width <=767px) {
	.faq-contList li {
		flex-direction: column;
	}
}

.faq-contList li span {
	display: block;
	width: 120px;
	font-weight: normal;
	position: relative;
}

@media (width <=767px) {
	.faq-contList li span {
		width: 100%;
		font-weight: bold;
	}
}

.faq-contList li span:after {
	content: "";
	width: 1px;
	height: 86%;
	background: var(--black-color);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

@media (width <=767px) {
	.faq-contList li span:after {
		content: none;
	}
}

.faq-contList li p {
	width: calc(100% - 120px);
	margin-left: 30px;
}

@media (width <=767px) {
	.faq-contList li p {
		width: 100%;
		margin-left: 0;
	}
}

/*
footer SP用 レイアウト
========================================================================================== */
@media (width <=767px) {
	footer div#footer-inner {
		line-height: 1.5;
		letter-spacing: 0.06em;
	}

	footer div#footer-inner > *:not(:last-child) {
		margin-bottom: 5px;
	}

	footer div#footer-inner ul {
		border-right: none;
	}

	footer div#footer-inner li {
		border-left: none;
	}

	footer div#footer-inner small {
		display: block;
	}
}