@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	キービジュアル
--------------------------------------------------------------------------------------- */

main {
	margin-top: -80px;
	overflow-x: clip;
}

.key-image {
	color: #313131;
	position: relative;
}

.key-image section {
	align-items: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	height: 100svh;
	justify-content: center;
	letter-spacing: 1px;
	max-height: 982px;
	min-height: 982px;
	z-index: 0;
}

.key-image section::before {
	background: url(../img/top/particle_left.svg) no-repeat;
	background-size: 100% auto;
	content: '';
	height: 1086px;
	left: -730px;
	position: absolute;
	top: -520px;
	width: 1289px;
	z-index: -2;
}

.key-image section::after {
	background: url(../img/top/particle_right.svg) no-repeat;
	background-size: 100% auto;
	content: '';
	height: 1086px;
	position: absolute;
	right: -1090px;
	top: -520px;
	width: 1289px;
	z-index: -2;
}

.key-image h2 {
	filter:
		drop-shadow(0 0 107px #fff)
		drop-shadow(0 0 107px #fff)
		drop-shadow(0 0 107px #fff);
	font-size: 67.87px;
	font-weight: var(--Bold);
	line-height: 1.2;
	overflow: hidden;
	text-align: center;
}

.key-image h2 b {
	display: inline-block;
	font-weight: var(--Bold);
	overflow: hidden;
}

.key-image h2 strong {
	font-size: 101px;
	font-weight: var(--Bold);
}

.key-image h2 .char {
	display: inline-block;
	transform: translateY(2em);
	transition: all .3s cubic-bezier(.5, 1, .89, 1);
}

.key-image h2 .text-animate {
	filter: blur(0);
	opacity: 1;
	transform: translateY(0) translateX(0);
}

.key-image p {
	filter: blur(10px);
	font-size: 2.4rem;
	font-weight: var(--SemiBold);
	margin-top: 40px;
	opacity: 0;
	position: relative;
	text-align: center;
	transition: all .6s cubic-bezier(.5, 1, .89, 1);
}

.key-image p.lead-animate {
	filter: blur(0);
	opacity: 1;
}

.key-image .ring {
	left: -455px;
	position: absolute;
	top: 0;
	z-index: -1;
}

.key-image .ring-section { mix-blend-mode: multiply; }

.key-image .ring .deco-01 {
	left: 0;
	position: absolute;
	top: 455px;
	width: 350px;
}

.key-image .ring .deco-02 {
	left: 223px;
	position: absolute;
	top: 356px;
	width: 338px;
}

.key-image .ring .deco-03 {
	left: 376px;
	position: absolute;
	top: 104px;
	width: 554px;
}

.key-image .ring .deco-04 {
	left: 617px;
	position: absolute;
	top: 31px;
	width: 1171px;
}

.key-image .ring .deco-02 .ring-item { transform: translateX(-223px); }
.key-image .ring .deco-03 .ring-item { transform: translateX(-376px); }
.key-image .ring .deco-04 .ring-item { transform: translateX(-617px); }

.key-image .blur {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.key-image .ring .ring-item,
.key-image .ring .reveal-img { transition: all 5s cubic-bezier(.1, .9, .3, 1); }

.key-image .ring .reveal-img {
	opacity: 0;
	transform: scale(0,0) rotate3d(1, 1, 1, 360deg);
	transform-origin: center;
}

.key-image .ring .is-hidden {
	opacity: 0;
	visibility: hidden;
}

.key-image .ring .animate-translate { transform: translateX(0) !important; }

.key-image .ring .is-animate {
	opacity: 1;
	transform: scale(1,1) rotate3d(1, 1, 1, 0deg) !important;
	visibility: visible;
}

/* @keyframes scaleRing {
	0% {
		opacity: 0;
		transform: scale(0,0) rotate3d(1, 1, 1, 360deg);
	}

	100% {
		opacity: 1;
		transform: scale(1,1) rotate3d(1, 1, 1, 0deg);
	}
} */


/* .key-image .ring .is-animate {
	animation: sweep .8s cubic-bezier(0, .55, .45, 1) forwards;
	filter: sepia(0);
	opacity: 1;
	visibility: visible;
}

.key-image .ring .animate-01 { mask-image: repeating-conic-gradient(from 99deg,#000 0deg calc(var(--ang) + var(--pad)),transparent calc(var(--ang) + var(--pad)) 360deg); }
.key-image .ring .animate-02 { mask-image: repeating-conic-gradient(from 282deg,#000 0deg calc(var(--ang) + var(--pad)),transparent calc(var(--ang) + var(--pad)) 360deg); }
.key-image .ring .animate-03 { mask-image: repeating-conic-gradient(from 270deg,#000 0deg calc(var(--ang) + var(--pad)),transparent calc(var(--ang) + var(--pad)) 360deg); }
.key-image .ring .animate-04 { mask-image: repeating-conic-gradient(from 330deg,#000 0deg calc(var(--ang) + var(--pad)),transparent calc(var(--ang) + var(--pad)) 360deg); } */

.key-image .ring .yurayura { animation: yurayura 3s infinite; }

@keyframes yurayura {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-20px); }
}

/* 角度をアニメ可能に */
@property --ang { inherits: false; initial-value: 0deg; syntax: '<angle>'; }
/* 境界を飲み込む微小オーバーラップ量（調整可） */
@property --pad { inherits: false; initial-value: .6deg; syntax: '<angle>'; }


/* 開始は“ほぼゼロ”から。負の角度スタートで見た目は白紙のまま */
@keyframes sweep {
	from { --ang: calc(0deg - var(--pad)); }
	to   { --ang: 360deg; }
}

@media (max-width: 768px) {

	main {
		margin-top: 0;
		position: relative;
		z-index: 1;
	}

	.key-image section {
		max-height: 151.125vw;
		min-height: inherit;
	}

	.key-image section::before {
		height: 156.333vw;
		left: -33.667vw;
		top: -35.667vw;
		width: 160%;
	}

	.key-image section::after { display: none; }

	.key-image h2 { font-size: 8.75vw; }
	.key-image h2 strong { font-size: 13.25vw; }

	.key-image p {
		font-size: 4.05vw;
		font-weight: var(--Bold);
		line-height: 1.8;
		margin-top: 12.5vw;
	}

	/* .key-image .ring { display: none; } */

	.key-image .ring .deco-01,
	.key-image .ring .deco-02 { display: none; }

	.key-image .ring .deco-03 {
		left: 84.333vw;
		top: 21.333vw;
		width: 73.333vw;
	}

	.key-image .ring .deco-04 {
		left: 115.333vw;
		top: 11.333vw;
		width: 143.333vw;
	}

	.key-image .blur {
		background: url(../img/top/key_ring_blur_sp.png) no-repeat -72.667vw 1.333vw;
		background-size: 194% auto;
		left: auto;
		right: 0;
	}

	.key-image .blur img { display: none; }
}

/* --------------------------------------------------------------------------------------
	数字で見るAnyKan
--------------------------------------------------------------------------------------- */

.numbers-section { margin-top: 42px; }

.numbers-section-content {
	display: flex;
	gap: 32px;
	margin-top: 12px;
}

.numbers-section-content .numbers-columns {
	background: var(--color-cream) url(../img/top/particles.png) no-repeat right top;
	border-radius: var(--border-radius);
	padding: 42px 46px;
}

.numbers-section-content .numbers-columns dl { text-align: center; }

.numbers-section-content .numbers-columns dt {
	font-size: 2rem;
	font-weight: var(--Bold);
	letter-spacing: 2px;
}

.numbers-section-content .numbers-columns dd {
	color: var(--color-orange);
	font-size: 7.2rem;
	font-weight: var(--Bold);
	line-height: 1;
	margin-top: 10px;
	white-space: nowrap;
}

.numbers-section-content .numbers-columns dd span,
.numbers-section-content .numbers-columns dd .odometer-value {
	font-family: var(--font-inter);
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: var(--Bold);
	text-align: left;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value{
	min-width: 40px;
	text-align: right;
}

.odometer .odometer-digit .odometer-digit-inner,
.odometer .odometer-digit .odometer-value { width: fit-content; }

.numbers-section-content .numbers-columns dd sup { font-size: 60%; }

.numbers-section-content .numbers-columns dd sub {
	display: inline-block;
	font-size: 4rem;
	vertical-align: middle;
}

.numbers-section-content .numbers-columns p {
	line-height: 1.7;
	margin-top: 20px;
}

@media (max-width: 768px) {

	.anyKan-in-numbers { padding: 0 5vw; }

	.numbers-section-content {
		display: block;
	}

	.numbers-section-content .numbers-columns {
		background-position: 67.333vw top;
		background-size: 39.333vw auto;
		padding: 7.5vw 4vw;
	}

	.numbers-section-content .numbers-columns:nth-of-type(n+2) { margin-top: 3vw; }

	.numbers-section-content .numbers-columns dl {
		align-items: center;
		display: flex;
		justify-content: space-between;
		text-align: left;
	}

	.numbers-section-content .numbers-columns dt { font-size: 4.5vw; }

	.numbers-section-content .numbers-columns dd {
		font-size: 12.5vw;
		margin-top: 0;
	}

	.numbers-section-content .numbers-columns p { margin-top: 2.5vw; }

	.numbers-section-content .numbers-columns dd sub { font-size: 7.5vw; }

	.odometer.odometer-auto-theme .odometer-digit .odometer-value,
	.odometer.odometer-theme-default .odometer-digit .odometer-value {
		min-width: 6.333vw;
		text-align: right;
	}
}

/* --------------------------------------------------------------------------------------
	専門性に特化した３つのサービス
--------------------------------------------------------------------------------------- */

.our-business {
	margin: 168px auto auto;
	max-width: 1000px;
}

.our-business .diagram {
	margin-top: 48px;
	text-align: center;
}

.business-section {
	margin-top: 72px;
	position: relative;
	z-index: 0;
}

.business-section::before {
	background: url(../img/top/ring_pattern_01.svg) no-repeat;
	background-size: 100% auto;
	content: '';
	height: 0;
	left: -1494px;
	position: absolute;
	top: -703px;
	width: 1680px;
	z-index: -1;
}

.business-section.animate::before { animation: lineHeight 1s linear forwards; }

@keyframes lineHeight {
	from { height: 0; }
	to { height: 1341px; }
}

.business-section .business-columns {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.business-section .business-columns .head-title {
	background-color: var(--color-orange);
	border-radius: 100vw;
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 233px;
	justify-content: center;
	text-align: center;
	width: 233px;
}

.business-section .business-columns .head-title strong { font-size: 3.2rem; }

.business-section .business-columns .head-title strong span {
	display: block;
	font-size: 1.8rem;
}

.business-section .business-columns .head-title strong + span {
	display: block;
	font-size: 1.4rem;
	margin-top: 14px;
}

.business-section .business-columns section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* max-width: 700px; */
	width: 70%;
}

.business-section .business-columns section h4 {
	font-size: 2rem;
	font-weight: var(--Bold);
	letter-spacing: 2px;
}

.business-section .business-columns section p {
	line-height: 1.7;
	margin-top: 16px;
}

.business-section .business-columns:nth-of-type(even) section {
	border-bottom: 1px solid var(--color-border);
	border-top: 1px solid var(--color-border);
	min-height: 256px;
	padding-left: 88px;
}


.business-section .business-columns:nth-of-type(even) .head-title {
	margin-left: 93px;
	margin-right: -93px;
}

@media (max-width: 768px) {

	.our-business { margin-top: 20vw; }

	.our-business .diagram {
		margin: 9vw auto auto;
		max-width: 90vw;
	}

	.business-section::before { left: -371.333vw; }

	.business-section .business-columns { margin-right: 5vw; }

	.business-section .business-columns .head-title {
		height: 60vw;
		left: -20.667vw;
		padding-left: 24.333vw;
		position: absolute;
		text-align: left;
		width: 60vw;
	}

	.business-section .business-columns:nth-of-type(even) .head-title {
		margin-left: 0;
		margin-right: 0;
	}

	.business-section .business-columns .head-title strong span { font-size: 3.25vw; }

	.business-section .business-columns .head-title strong { font-size: 6vw; }

	.business-section .business-columns .head-title strong + span {
		font-size: 3.25vw;
		margin-top: 2.5vw;
	}

	.business-section .business-columns section {
		margin-left: 43.75vw;
		min-height: 62.875vw;
	}

	.business-section .business-columns:nth-of-type(even) section {
		min-height: 62.875vw;
		padding-left: 0;
	}

	.business-section .business-columns section h4 { font-size: 4vw; }

	.business-section .business-columns section p {
		font-size: 3.25vw;
		margin-top: 2.75vw;
	}
}

/* --------------------------------------------------------------------------------------
	AnyKanが展開する業界
--------------------------------------------------------------------------------------- */

.industries-served {
	margin-top: 145px;
	padding-bottom: 92px;
	position: relative;
}

.industries-served::after {
	animation: blur linear; /* アニメーションを指定。イージングはlinear */
	animation-range: entry 33% cover 100%;
	animation-timeline: view();
	background: url(../img/top/ring_pattern_02.svg) no-repeat;
	background-size: 100% auto;
	bottom: -253px;
	content: '';
	height: 1213px;
	position: absolute;
	right: -1090px;
	transition: filter 1.6s ease-in-out;
	width: 1492px;
	z-index: -1;
}

@keyframes blur {
	from { filter: blur(0);}
	to { filter: blur(20.4px); }
}

.industries-served.animate::after { filter: blur(20.4px); }

.industries-served-columns {
	background-color: #fdfaf4;
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 52px;
	min-height: 340px;
	padding: 45px 48px 45px 40px;
	position: relative;
}

.industries-served-columns:nth-of-type(n+2) { margin-top: 20px; }

.industries-served-columns .dotted-title,
.industries-served-columns p { max-width: 486px; }

.industries-served-columns .image {
	border-radius: var(--border-radius);
	max-width: 486px;
	overflow: hidden;
	position: absolute;
	right: 45px;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

@media (max-width: 1150px) {

	.industries-served-columns .dotted-title,
	.industries-served-columns p { max-width: 34.333vw; }

	.industries-served-columns .image { max-width: 41.333vw; }
}

.industries-served-columns p {
	line-height: 1.8;
	margin-top: 22px;
}

.industries-served .text {
	font-size: 1.8rem;
	font-weight: var(--Bold);
	letter-spacing: 1px;
	line-height: 1.8;
	margin-top: 50px;
	text-align: center;
}

@media (max-width: 768px) {

	.industries-served {
		margin-top: 25vw;
		padding-bottom: 11.25vw;
	}

	.industries-served::after {
		bottom: -74.667vw;
		right: -296.667vw;
	}

	.industries-served-columns {
		margin-top: 3vw;
		padding: 7.5vw 5vw;
	}

	.industries-served-columns:first-of-type { margin-top: 10vw; }

	.industries-served-columns .dotted-title {
		max-width: inherit;
		order: 1;
	}

	.industries-served-columns .image {
		margin-top: 5.25vw;
		max-width: 100%;
		order: 3;
		position: relative;
		right: auto;
		top: auto;
		transform: none;
	}

	.industries-served-columns p {
		margin-top: 3.75vw;
		max-width: 100%;
		order: 2;
	}

	.industries-served .text {
		font-feature-settings: 'palt';
		font-size: 3.75vw;
		margin: 7.5vw 5vw auto;
		text-align: left;
	}
}

/* --------------------------------------------------------------------------------------
	お客様の声
--------------------------------------------------------------------------------------- */

.customer-voice {
	margin-top: 80px;
	padding-bottom: 96px;
	position: relative;
	z-index: 0;
}

.customer-voice::before {
	background: url(../img/top/ring_pattern_03.svg) no-repeat;
	background-size: 100% auto;
	bottom: -737px;
	content: '';
	height: 1105px;
	left: -1070px;
	opacity: .5;
	position: absolute;
	width: 1384px;
	z-index: -1;
}

.customer-voice-columns { margin-top: 42px; }

.slider-columns {
	margin-top: 24px;
	position: relative;
}


.slider-columns .swiper-button-prev,
.slider-columns .swiper-button-next {
	background: none;
	background-color: var(--color-orange);
	border-radius: var(--border-radius);
	height: 80px;
	margin-top: 0;
	transform: translateY(-50%);
	width: 40px;
}

.slider-columns .swiper-button-prev { left: -20px; }
.slider-columns .swiper-button-next { right: -20px; }

.slider-columns .swiper-button-prev::before,
.slider-columns .swiper-button-next::before {
	background: url(../img/common/icon_swiper_arrow.png) no-repeat;
	background-size: 100% auto;
	content: '';
	height: 17.5px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 10.5px;
}

.slider-columns .swiper-button-next::before {
	transform: scale(-1,1) translate(-50%,-50%);
	transform-origin: left;
}

/* .slider-columns .swiper-wrapper { right: -2px; } */

.slider-columns .swiper-slide {
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	height: auto;
	max-width: 348px;
	padding: 38px 30px;
	position: relative;
	width: 100%;
}


.slider-columns .swiper-slide::after {
	/* background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: calc(100% - 1px);
	z-index: -1; */
}

.slider-columns .swiper-slide .swiper-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.slider-columns .swiper-slide .swiper-head .thum {
	max-width: 80px;
	width: 100%;
}

.slider-columns .swiper-slide .swiper-head dl {
	max-width: 180px;
	width: 100%;
}

@media (max-width: 1150px) {

	.slider-columns .swiper-slide .swiper-head dl {
		margin-left: 1.333vw;
	}
}

.slider-columns .swiper-slide .swiper-head dt,
.slider-columns .swiper-slide section h3 {
	font-size: 1.65rem;
	font-weight: var(--SemiBold);
}

.slider-columns .swiper-slide .swiper-head dd {
	font-size: 1.4rem;
	font-weight: var(--SemiBold);
}

.slider-columns .swiper-slide section { margin-top: 24px; }

.slider-columns .swiper-slide section p {
	font-size: 1.4rem;
	line-height: 1.6;
	margin-top: 12px;
}

@media (max-width: 768px) {

	.customer-voice {
		margin-top: 17.5vw;
		overflow: clip;
		padding-bottom: 16.75vw;
	}

	.customer-voice::before {
		bottom: -222.667vw;
		left: -271.333vw;
	}

	.customer-voice-columns { margin-top: 5vw; }
	.customer-voice-columns:nth-of-type(n+2) { margin-top: 7.25vw; }

	.customer-voice-columns .dotted-title {
		margin-left: 5vw;
		margin-right: 5vw;
	}

	.slider-columns { margin-top: 4vw; }

	.slider-columns .swiper-container {
		overflow: visible;
		width: 80vw;
	}

	.slider-columns .swiper-slide {
		max-width: 100%;
		padding: 6.75vw 6vw 6.25vw;
	}

	.slider-columns .swiper-slide .swiper-head .thum { max-width: 18vw; }

	.slider-columns .swiper-slide .swiper-head dl {
		margin-left: 0;
		max-width: 45.25vw;
	}

	.slider-columns .swiper-slide .swiper-head dt,
	.slider-columns .swiper-slide section h3 { font-size: 4vw; }

	.slider-columns .swiper-slide section { margin-top: 5.5vw; }

	.slider-columns .swiper-slide section p {
		font-size: 3.25vw;
		margin-top: 3.5vw;
	}

	.slider-columns .swiper-button-prev,
	.slider-columns .swiper-button-next {
		height: 17.875vw;
		width: 8.875vw;
	}

	.slider-columns .swiper-button-prev { left: 3.125vw; }
	.slider-columns .swiper-button-next { right: 3.125vw; }
}

/* --------------------------------------------------------------------------------------
	お知らせ
--------------------------------------------------------------------------------------- */

.news-content {
	background-color: #f5f5f5;
	padding-bottom: 84px;
	padding-top: 96px;
	position: relative;
	z-index: 1;
}

.news-wrap {
	display: flex;
	justify-content: space-between;
	max-width: 1000px;
}

.news-wrap section {
	max-width: 200px;
	width: 100%;
}

.news-wrap section .main-title {
	line-height: 1;
	text-align: left;
}

.news-list-section {
	max-width: 856px;
	width: 100%;
}

.news-list-section .banner-arrow {
	margin-top: 30px;
	text-align: right;
}

.news-category-list { margin-top: 88px; }

.news-category-list li:nth-of-type(n+2) { margin-top: 16px; }

.news-category-list li input { display: none; }

.news-category-list li label,
.news-list li a .catname {
	align-items: center;
	border: 1px solid var(--color-orange);
	border-radius: 100vw;
	color: var(--color-orange);
	cursor: pointer;
	display: flex;
	font-size: 1.2rem;
	font-weight: var(--Bold);
	justify-content: center;
	max-width: 104px;
	min-height: 24px;
	width: 100%;
}

.news-category-list li input:checked + label,
.news-list li a .catname {
	background-color: var(--color-orange);
	color: #fff;
}

.news-list { display: none; }

.news-wrap:has(input#all:checked) .news-list[date='all'],
.news-wrap:has(input#news:checked) .news-list[date='news'],
.news-wrap:has(input#press:checked) .news-list[date='press'],
.news-wrap:has(input#media:checked) .news-list[date='media'] { display: block; }

.news-list li { border-bottom: 1px solid var(--color-border); }
.news-list li:first-of-type { border-top: 1px solid var(--color-border); }

.news-list li a {
	align-items: center;
	color: var(--color-text);
	display: flex;
	padding: 20px 0;
}


.news-list li a time {
	max-width: 81px;
	width: 100%;
}

.news-list li a .catname { margin-left: 20px; }

.news-list li a .news-title {
	margin-left: 20px;
	position: relative;
}

.news-list li.new a .news-title { padding-left: 48px; }

.news-list li.new a .news-title::before {
	color: #f00;
	content: 'NEW';
	font-weight: var(--Bold);
	left: 0;
	position: absolute;
}

@media (max-width: 768px) {

	.news-content { padding: 13.75vw 5vw; }

	.news-wrap { display: block; }

	.news-wrap section { max-width: 100%; }
	.news-wrap section .main-title { text-align: center; }

	.news-category-list {
		display: flex;
		margin-top: 6.5vw;
	}

	.news-category-list li { width: 100%; }

	.news-category-list li:nth-of-type(n+2) {
		margin-left: 1vw;
		margin-top: 0;
	}

	.news-category-list li label,
	.news-list li a .catname {
		font-size: 2.75vw;
		max-width: 100%;
		min-height: 6vw;
	}

	.news-list-section { margin-top: 6vw; }

	.news-list li a {
		display: block;
		padding: 5vw 0;
	}

	.news-list li a time {
		display: inline-block;
		max-width: 100%;
		vertical-align: middle;
		width: auto;
	}

	.news-list li a .catname {
		align-items: center;
		display: inline-flex;
		margin-left: 5vw;
		min-width: 22vw;
		position: relative;
		text-align: center;
		width: auto;
	}

	.news-list li.new a .catname::after {
		color: #f00;
		content: 'NEW';
		font-size: 3.5vw;
		font-weight: var(--Bold);
		position: absolute;
		right: -11.333vw;
	}

	.news-list li.new a .news-title { padding-left: 0; }
	.news-list li.new a .news-title::before { display: none; }

	.news-list li a .news-title {
		margin-left: 0;
		margin-top: 2.25vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.news-list-section .banner-arrow { margin-top: 6.5vw; }
}

/* --------------------------------------------------------------------------------------
	まずはお気軽にご相談ください
--------------------------------------------------------------------------------------- */

.contact-us {
	margin-bottom: 90px;
	margin-top: 90px;
}

.contact-us h2 {
	font-size: 3.2rem;
	font-weight: var(--SemiBold);
	text-align: center;
}

.contact-us .step {
	align-items: center;
	counter-reset: number 0;
	display: flex;
	justify-content: center;
	margin-top: 52px;
}

.contact-us .step li {
	align-items: center;
	background-color: #f8eccd;
	border-radius: 100vw;
	display: flex;
	flex-direction: column;
	height: 233px;
	justify-content: center;
	position: relative;
	width: 233px;
}

.contact-us .step li:nth-of-type(n+2) { margin-left: 78px; }

.contact-us .step li:not(:last-of-type):after {
	background: url(../img/common/icon_arrow_no_bg.png) no-repeat;
	background-size: 100% auto;
	content: '';
	display: block;
	height: 25px;
	position: absolute;
	right: -52px;
	width: 29px;
}

.contact-us .step li:before {
	color: var(--color-orange);
	content: 'STEP'counter(number);
	counter-increment: number 1;
	font-family: var(--font-inter);
	font-weight: var(--Medium);
}

.contact-us .step li h3 {
	font-size: 2rem;
	font-weight: var(--SemiBold);
	margin-top: 16px;
}

.contact-us .step li .icon { margin-top: 22px; }

.contact-us .step li .icon img { max-width: 65px; }

.contact-us .text {
	font-size: 1.8rem;
	font-weight: var(--SemiBold);
	line-height: 1.7;
	margin-top: 52px;
	text-align: center;
}

@media (max-width: 768px) {

	.contact-us {
		margin-bottom: 13.75vw;
		margin-top: 15vw;
	}

	.contact-us .step {
		display: block;
		margin: 6.5vw 5vw auto;
		min-height: 90.75vw;
		position: relative;
	}

	.contact-us .step li {
		height: 51.875vw;
		position: absolute;
		top: 0;
		width: 51.875vw;
	}

	.contact-us .step li:nth-of-type(n+2) { margin-left: 0; }

	.contact-us .step li:nth-of-type(1) { left: 0; z-index: 1; }
	.contact-us .step li:nth-of-type(2) { right: 0; z-index: 1; }

	.contact-us .step li:nth-of-type(3) {
		bottom: 0;
		left: 19.375vw;
		top: auto;
		z-index: 2;
	}

	.contact-us .step li h3 {
		font-size: 4.5vw;
		margin-top: 3vw;
	}

	.contact-us .step li .icon { margin-top: 4.5vw; }
	.contact-us .step li .icon img { max-width: 14.375vw; }

	.contact-us .step li:first-of-type:after { display: none; }

	.contact-us .step li:not(:first-of-type):after {
		background: url(../img/common/icon_arrow_no_bg.png) no-repeat;
		background-size: 100% auto;
		content: '';
		display: block;
		height: 5.375vw;
		left: 2.933vw;
		position: absolute;
		width: 6.25vw;
		z-index: 2;
	}

	.contact-us .step li:last-of-type:after {
		left: auto;
		right: 20.333vw;
		top: .333vw;
		transform: rotate(135deg);
	}

	.contact-us .text {
		font-size: 4vw;
		margin-top: 6.75vw;
	}
}

/* --------------------------------------------------------------------------------------
	シゴトビラ
--------------------------------------------------------------------------------------- */

.sigotobira {
	padding-bottom: 96px;
	padding-top: 83px;
}

.sigotobira-content {
	display: flex;
	justify-content: center;
	margin-top: 60px;
}

.sigotobira-content .swiper-container { overflow: inherit; }

.sigotobira-content .swiper-slide {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	max-width: 348px;
	overflow: hidden;
	width: 100%;
}

.sigotobira-content .swiper-slide:nth-of-type(n+2) { margin-left: 28px; }

.sigotobira-content .swiper-slide .image { overflow: hidden; }

.sigotobira-content .swiper-slide .image > div {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	height: 166px;
	transition: all .3s ease-in-out;
}

@media (max-width: 1150px) {
	.sigotobira-content .swiper-slide { max-width: 27.133vw; }
	.sigotobira-content .swiper-slide .image > div { height: 12.533vw; }
}

.sigotobira-content .swiper-slide section {
	background: url(../img/common/icon_arrow_orange.svg) no-repeat right bottom / 18px auto;
	flex-grow: 1;
	margin: 20px 28px;
	padding-bottom: 28px;
	position: relative;
}

.sigotobira-content .swiper-slide time {
	bottom: 0;
	color: #a7a7a7;
	font-size: 1.2rem;
	font-weight: var(--SemiBold);
	position: absolute;
}

@media (min-width: 768px) {

	.sigotobira-content .swiper-slide:hover { text-decoration: none; }

	.sigotobira-content .swiper-slide .image:hover > div { transform: scale(1.06); }

}

.sigotobira .banner {
	margin: 40px auto auto;
	max-width: 232px;
}

@media (max-width: 768px) {

	.sigotobira {
		padding-bottom: 25vw;
		padding-top: 14.375vw;
	}

	.sigotobira h2 img { width: 71.25vw; }

	.sigotobira .swiper-container {
		overflow: visible;
		width: 80vw;
	}

	.sigotobira-content .swiper-slide { max-width: 100%; }

	.sigotobira-content .swiper-slide:nth-of-type(n+2) { margin-left: 0; }

	.sigotobira-content .swiper-slide .image > div { height: 37.875vw; }

	.sigotobira-content .swiper-slide section {
		background-size: 4vw auto;
		margin: 3vw 5vw 6vw;
		padding-bottom: 6.5vw;
	}

	.sigotobira-content .swiper-slide time { font-size: 3vw; }

	.sigotobira .banner {
		margin-top: 8vw;
		max-width: 72.5vw;
	}
}