@charset "utf-8";
/* ==========================================================================
   共通レイアウト設定
============================================================================= */


/* ==============================
// container
// コンテンツ幅
================================= */
.l-container{
	width: 85%;
    max-width: var(--contents--large);
    margin: 0 auto;
	@media (max-width: 768px) {
		width: 88%;
	}
}
/* サイズの異なるコンテンツ幅を増やしたいときは以下をコピーして増やす */
.w1300{
	max-width: var(--contents--medium);
	margin: 0 auto;
}
.w1100{
	max-width: var(--contents--small);
	margin: 0 auto;
}
.w900{
	max-width: var(--contents--x-small);
	margin: 0 auto;
}
.w600{
	max-width: var(--contents--2x-small);
	margin: 0 auto;
}


/* ==============================
// main
// ヘッダーナビより下の共通コンテンツラップ
// ヘッダーの高さ分コンテンツの位置を下げるためだけに使用
================================= */
.l-main{
	position: relative;
	/* headerをfixedにするときは有効化
	padding-top:$header__heightPc; 
	@include mqMax(smallHeader){
		padding-top:$header__heightSp;
	} */
}


/* ==============================
// anchor
// アンカーリンクのジャンプ先をヘッダーの高さ分下げるために使用
// ページ内遷移であればJSの処理で自動で移動距離を制御するため不要だが､
// 違うページのアンカーを指定している場合､垂直位置指定がレンダリングのスピードでずれるため使用する
================================= */
.l-anchor{
	margin-top: calc(-1*var(--header--heightPc));
	padding-top: var(--header--heightPc);
	@media (max-width: 900px) {
		margin-top: 0;
		padding-top: 0;
	}
}


/* ==============================
// section
// 下層ページの章ごとのスペース
// section.l-section のほか　div.l-sectionなど､見出しのないブロックにも使う
================================= */
.l-section{
	padding-top: var(--padding--tb-pc);
	padding-bottom: var(--padding--tb-pc);
	@media (max-width: 900px) {
		padding-top: var(--padding--tb-sp);
		padding-bottom: var(--padding--tb-sp);
	}
}


/* ==============================
// safeArea
// スマホでセーフエリアのある機種の場合の余白設定
================================= */
.l-safeArea{
	@media (max-width: 768px) {

	}
}


/* ==============================
// l-list
// サービス内容・運営ツール
================================= */
.l-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--color-font5);
}
.l-item {
	padding: max(var(--padding--7x-large),40px) max(var(--padding--2x-large),16px);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-font5);
	gap: max(var(--padding--x-large),32px);
	@media (max-width: 480px) {
		flex-direction: column;
		align-items: center;
	}
}
.l-img {
	width: 20%;
	border: 1px solid var(--color-bg);
	border-radius: 100vh;
	@media (max-width: 480px) {
		width: 50%;
	}
}
.l-img__none {
	border-radius: 0 !important;
	border: none !important;
}
.l-textArea {
	width: calc(100% - 20% - var(--padding--x-large));
	display: flex;
	flex-direction: column;
	gap: max(var(--font-size--large),16px);
	@media (max-width: 480px) {
		width: 100%;
	}
}
.l-img2 {
	width: 40%;
	@media (max-width: 480px) {
		width: 80%;
	}
}
.l-textArea2 {
	width: calc(100% - 40% - var(--padding--x-large));
	display: flex;
	flex-direction: column;
	gap: max(var(--font-size--x-large),16px);
	@media (max-width: 480px) {
		width: 100%;
	}
}


/* ==============================
// l-catArea
// ctaボタンエリア
================================= */
.l-catArea {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap--x-large);
	margin-top: max(var(--margin--x-large),32px);
}
.l-catArea2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap--x-large);
	margin-top: max(var(--margin--x-large),16px);
}
.l-catArea__right {
	justify-content: flex-end;
}
.l-catArea__link {
	display: flex;
	align-items: center;
	gap: var(--gap--x-small);
	position: relative;
	&::before {
		content: "";
		right: 0;
		bottom: -16px;
		position: absolute;
		height: 2px;
		width: 100%;
		background-color: var(--color-bg);
		@media (max-width: 900px) {
			bottom: -8px;
		}
	}
	&:hover {
		&::before {
			animation: .5s next__line forwards;
		}
	}
}
@keyframes next__line {
	0%{
		right: 0;
	    left: auto;
	    width: 100%;
	}
	50%{
		right: 0;
	    left: auto;
	    width: 0;
	}
	51%{
		right: auto;
	    left: 0;
	    width: 0;
	}
	100%{
		right: auto;
	    left: 0;
	    width: 100%;
	}
}
.l-catArea__text {
	font-size: max(var(--font-size--medium),16px);
	font-weight: var(--font-weight--2x-large);
	transition:.3s;
}
.l-catArea__icon {
	width: max(var(--font-size--medium),16px);
	path {
		transition:.3s;
	}
}
.l-catArea__link2 {
	border: 1px solid var(--color-bg);
	border-radius: 100vh;
	padding: max(var(--padding--small),16px) max(var(--padding--medium),32px);
	&:hover {
		background-color: var(--color-bg);
		color: var(--color-font);
		.l-catArea__icon {
			path {
				fill: var(--color-font);
			}
		}
	}
	
}

/* ==============================
// l-list2
// 会社情報
================================= */
/* l-list2 */
.l-list2 {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--color-font5);
}
.l-list2__dl {
	padding: max(var(--padding--x-large),24px) max(var(--padding--large),16px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-font5);
}
.l-list2__dt,
.l-list2__dd {
	span {
		font-size: max(var(--font-size--medium),16px);
		font-weight: var(--font-weight--2x-large);
	}
}
.l-list2__dt {
	width: 120px;
	@media (max-width: 768px) {
		width: 100px;
	}
}
.l-list2__dd {
	width: calc(100% - 120px - var(--padding--x-large));
	@media (max-width: 768px) {
		width: calc(100% - 100px - var(--padding--x-large));
	}
}
.l-list2__dt-text {}
.l-list2__dd-text {
	opacity: var(--opacity--small);
	word-break: keep-all;
}
.l-list2__dd-small {
	font-weight: var(--font-weight--2x-large);
	font-size: max(var(--font-size--x-small),12px);
	@media (max-width: 430px) {
		display: block;
	}
	.l-list2__dd-link {
		&::before {
			content: "";
			right: 0;
			bottom: 0px;
			position: absolute;
			height: 2px;
			width: 100%;
			background-color: var(--color-bg);
		}
		&:hover {
			&::before {
				animation: .5s next__line forwards;
			}
		}
	}
}
.l-list2__dd-link {
	opacity: var(--opacity--large);
	position: relative;
}


/* ==============================
// l-list3
// お問い合わせ
================================= */
/* l-list3 */
.l-list3 {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--color-font5);
}
.l-list3__dl {
	padding: var(--padding--x-large) var(--padding--large);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-font5);
}
.l-list3__dt,
.l-list3__dd {
	span {
		font-size: max(var(--font-size--medium),16px);
		font-weight: var(--font-weight--2x-large);
	}
}
.l-list3__dt {
	width: 250px;
}
.l-list3__dd {
	width: calc(100% - 250px - var(--padding--x-large));
}
.l-list3__dt-text {}
.l-list3__dd-text {
	opacity: var(--opacity--small);
}

.l-list4 {
	display: flex;
	flex-direction: column;
	gap: max(var(--gap--3x-small),4px);
}
.l-item4{
	position: relative;
	padding-left: max(var(--gap--small),14px);
	display: flex;
	align-items: center;
	&::after {
	  content: "";
	  position: absolute;
	  border-radius: 100vh;
	  transition: .3s;
	}
	&::after {
		width: max(var(--gap--3x-small),4px);
		aspect-ratio: 1 / 1;
		background-color: var(--color-bg);
		left: 0px;
		top: .5rem;
		@media (max-width: 768px) {
			top: 1rem;
		}
		@media (max-width: 430px) {
			top: 2rem;
		}
	}
}





.l-scrollbar {
	height: 100vh;
	width: 100%;
	top: 0;
	position: absolute;
	transition:.3s;
	z-index: 1;
}

.l-scrollbar__dot {
	position: absolute;
	left: 5%;
	transform: translateX(-50%);
	bottom: 1px;
}

.l-scrollbar__dot::after {
	content: "";
	position: absolute;
	bottom: -150px;
	left: 0;
	width: 1px;
	height: 300px;
	background: #fff;
}

.l-scrollbar__dot::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: circlemove 3s ease-in-out infinite,
    cirlemovehide 3s ease-out infinite;
}

@keyframes circlemove {
	0% {
		bottom: 120px;
	}
	100% {
		bottom: -120px;
	}
}

@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}