/****************************************/
/********** ArtLab-Tokyo [CSS] **********/
/****************************************/


/****************************** Common ******************************/

html {
	scroll-behavior: auto !important;
	font-size: 15px;
}

body {
	position: relative;
	overflow-y: scroll;/* - 高さが足りないページでも常時スクロールバーを表示(デザイン崩れ防止) - */
	margin: auto;
	margin-top: 50px;/* - navを[position :fixed;]にした場合には背景の潜り込みが発生するため[margin-top :(navの高さ)px;]を設定 - */
	color: #717071;
	background-color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
}

@media (min-width: 75em) {
	body {
		margin-top: 120px;
	}
}

body:not(.iframe_item) {
	display: none;/* - ページ読み込み時のStellarNav.jsの表示崩れ対策 - */
}

main {
	display: block;/* - IE対策(display: block;を全ブラウザで共通化) - */
}

a {
	text-decoration: none;
	color: #777777;
}

a:hover {
	text-decoration: none;
	color: #2dbdb4;
}

a:not(.btn):focus {
	transition-property: none !important;
}

a[href^='tel:'] {
	pointer-events: none;
}

img {
	max-width: 100%;/* - 解除はmax-width:initial; - */
	height: auto;
}

a,
img {
	transition: all 0.3s ease;
}

button:focus {
	outline: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

p {
	color: #717071;
	line-height: 35px;
}

h4 {
	letter-spacing: 0.2rem;
}

section {
	padding-top: 3.5rem;
	padding-bottom: 0rem;
}

@media (min-width: 62em) {
	section {
		padding-top: 4rem;
		padding-bottom: 1rem;
	}
}

.bg-full {
	width: 100%;
	height: auto;
	background: url(../img/bg_01.jpg);
	background-repeat: no-repeat;
	background-position: right;
	background-size: cover;
}

.bg-full1 {
	width: 100%;
	height: auto;
	background: url(../img/bg_02.jpg);
	background-repeat: no-repeat;
	background-position: right;
	background-size: cover;
}

.bg-full2 {
	width: 100%;
	height: auto;
	background: url(../img/bg_03.jpg);
	background-repeat: no-repeat;
	background-position: right;
	background-size: cover;
}

/****************************** Common End ******************************/


/****************************** Bootstrap Override ******************************/

.container,
.container-fluid {
	position: relative;
}

.container-fluid {
	max-width: 1140px;
}

/* - flex-item(特にSwiper)突き抜け対策 - */
.d-flex:not(.flex-column) > *,
.d-sm-flex:not(.flex-column) > *,
.d-md-flex:not(.flex-column) > *,
.d-lg-flex:not(.flex-column) > *,
.d-xl-flex:not(.flex-column) > * {
	min-width: 0;
}

.d-flex.flex-column > *,
.d-sm-flex.flex-column > *,
.d-md-flex.flex-column > *,
.d-lg-flex.flex-column > *,
.d-xl-flex.flex-column > * {
	max-width: 100%;
}

/* - ボタンのスタイル - */
.btn {
	padding: 0.25em 1.5em;
	transition: all 0.15s ease;
	white-space: normal;
	border: 0;
	background-image: linear-gradient(90deg, #2dbdb4, #0ca19d);
}

@media (any-hover: hover) {
	.btn:hover {
		background-color: #ffffff;
	}
}

.btn:active {
	transform: scale(0.975);
}

.btn:focus {
	outline: none;
	box-shadow: none;
}

.btn:focus-visible {
	outline: -webkit-focus-ring-color auto 1px;
}

.btn:disabled {
	cursor: auto;
}

/****************************** Bootstrap Override End ******************************/


/****************************** Global Navigation  ******************************/

nav {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fafafc;
	box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.0);
}

nav .nav-menu-row {
	display: flex;
	align-items: center;
}

@media (min-width: 75em) {
	nav .nav-menu-row {
		height: 120px;
	}
}

/* - ロゴのスタイル - */
nav .nav-menu-row a.navbar-logo {
	flex: none;
}

@media (min-width: 75em) {
	nav .nav-menu-row a.navbar-logo {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		order: 2;
		transform: translateX(-50%);
	}
}

nav .nav-menu-row a.navbar-logo img {
	width: auto;
	height: 40px;
	padding-left: 15px;
}

@media (min-width: 75em) {
	nav .nav-menu-row a.navbar-logo img {
		height: 100%;
		padding: 20px;
	}
}

/*===== StellarNav.js(desktop) =====*/

/* - StellarNavの高さは[.stellarnav ul li a]の[padding(X)][line-height]の合計値にて設定 - */

.stellarnav.desktop {
	width: calc(50vw - 80px);
}

/* - メニューの横方向ポジショニング - */
.stellarnav.desktop > ul {
	position: relative;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* - メニュー(第1階層)のスタイル - */
.stellarnav.desktop > ul > li > a {
	position: relative;
	margin-top: 40px;
	padding: 20px 20px !important;
	transition: background 0.5s ease-out;
	color: #777777;
	font-size: 12.5px;
	line-height: 20px;
}

.stellarnav.desktop > ul > li > a::before {
	position: absolute;
	top: 45px;
	left: 50%;
	width: 0;
	height: 2px;
	content: '';
	transform: translateX(-50%);
	background-image: linear-gradient(90deg, transparent, #a9a4a2 25%, #717071 50%, #a9a4a2 75%, transparent);
}

.stellarnav.desktop > ul > li > a.current::before {
	position: absolute;
	top: 45px;
	left: 50%;
	width: 100%;
	height: 2px;
	content: '';
	transform: translateX(-50%);
	background-image: linear-gradient(90deg, transparent, #a9a4a2 25%, #717071 50%, #a9a4a2 75%, transparent);
}

@media (any-hover: hover) {
	.stellarnav.desktop > ul > li > a:hover::before {
		width: 100%;
		transition: all 0.5s ease;
	}
}

/* - メニュー(第2階層以降)のスタイル - */
.stellarnav.desktop ul ul {
	top: 110px;
	width: 200px;
	background-color: rgba(0, 0, 0, 0.3);
}

.stellarnav.desktop ul ul > li > a {
	margin-top: 0;
	padding: 15px 20px !important;
	color: #ffffff;
	font-size: 12px;
	font-weight: normal;
}

@media (any-hover: hover) {
	.stellarnav.desktop ul ul > li > a:hover {
		background-color: rgba(0, 0, 0, 0.5);
	}
}

/*===== StellarNav.js(mobile ~768px) =====*/

/* - メニュー(第1階層)のスタイル - */
.stellarnav.mobile > ul {
	background-color: #eeeeee;
}

.stellarnav.mobile ul li a:not(.dd-toggle) {
	padding: 15px;
	transition-property: none;
	color: #777777;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	font-size: 12.5px;
	font-weight: normal;
	line-height: 20px;
}

/* - メニュー(第2階層)のスタイル - */
.stellarnav.mobile ul ul {
	background-color: rgba(0, 0, 0, 0.05);
}

.stellarnav.mobile ul ul li a:not(.dd-toggle) {
	padding-left: 25px;
	font-size: 12px;
}

/* - MENUトグルボタンのスタイル - */
.stellarnav.mobile a.menu-toggle {
	color: #777777;/* - メニューテキストラベルの文字色 - */
	font-size: 14px;/* - メニューテキストラベルのフォントサイズ(12px以下はStellarNavの高さに影響あり) - */
	line-height: 20px;
}

.stellarnav.mobile a.menu-toggle span.bars {
	top: 4px;
	margin: 0;
}

.stellarnav.mobile a.menu-toggle span.bars span {
	width: 20px;
	background-color: #333333;
}

/* - StellarNav.js position:'right'時のボタンエリアスタイル - */
.stellarnav.mobile.right {
	text-align: right;
}

.stellarnav.mobile.right > ul {
	top: 50px !important;
}

.stellarnav.mobile.right.active > ul {
	-webkit-animation: fadeInRight 0.3s;
	animation: fadeInRight 0.3s;
}

.stellarnav.mobile.right a.call-btn-mobile,
.stellarnav.mobile.right a.location-btn-mobile {
	color: #ffffff;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 1.25rem;
	line-height: 20px;
}

.stellarnav.mobile.right svg {
	top: 0;
}

.stellarnav.mobile.right a.close-menu {
	vertical-align: bottom;
	color: #ffffff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.875rem;
	font-weight: normal;
	line-height: 20px;
}

/* - CLOSEボタン非表示 - */
.stellarnav.mobile a.close-menu {
	display: none !important;
}

/* - CLOSEトグルボタンのスタイル - */
/* .stellarnav.mobile a.close-menu .icon-close::before,
.stellarnav.mobile a.close-menu .icon-close::after {
	border-bottom: 2px solid #ffffff;
} */

/* - ドロップダウンボタンのスタイル - */
.stellarnav.mobile li a.dd-toggle {
	width: 100%;
	height: 50px;
	text-align: right;
	margin-right: 20px;
}

.stellarnav.mobile li a.dd-toggle .icon-plus::before,
.stellarnav.mobile li a.dd-toggle .icon-plus::after {
	top: calc(50% - 1px);
	border-bottom: 2px solid #777777;
}

/*===== StellarNav.js(カスタムボタン等) =====*/

/* - メニュー内ボタンのスタイル - */
.nav-button-area {
	text-align: center;
}

.nav-button-area a.contact-btn {
	display: block;
	width: 166px;
	height: 36px;
	margin: auto;
	margin-top: 3rem;
}

@media (min-width: 75em) {
	.nav-button-area a.contact-btn {
		margin-top: 40px;
	}
}

.nav-sns-link {
	display: flex;
	justify-content: center;
}

.nav-sns-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin: 3rem 0.5rem;
	color: #eeeeee;
	border-radius: 50%;
	background-color: #777777;
	font-size: 2rem;
}

/* - iOS Safari[position:fixed;] バグフィックス - */
@media (max-width : 992px) {
	.stellarnav {
		overflow: visible;
	}
}

/****************************** Global Navigation End ******************************/


/****************************** Heading ******************************/

/* - 見出しのスタイル - */
.subtitle {
	margin-bottom: 1.75rem;
	text-align: left;
}

@media (min-width: 62em) {
	.subtitle {
		margin-bottom: 2rem;
	}
}

.subtitle h2 {
	margin-bottom: 0.75rem;
	font-size: 1.25rem;
	letter-spacing: 0.2rem
}
@media (min-width: 62em) {
.subtitle h2 {
	margin-bottom: 0.75rem;
	font-size: 1.75rem;
	letter-spacing: 0.2rem
}
}
.subtitle p {
	margin-top: 0.5rem;
	margin-bottom: 0;
	letter-spacing: 0.05em;
	font-size: 1rem;
}

/* - アンダーラインのスタイル - */
.underline {
	width: 150px;
	height: 2px;
	margin: auto;
	border-radius: 1.5px;
	background-image: linear-gradient(90deg, transparent, #2dbdb4 25%, #0ca19d 50%, #2dbdb4 75%, transparent);
}

/****************************** Heading End ******************************/



/****************************** Footer ******************************/

footer {
	background-color: #f7f7fa;
}

/* - footer リンクエリアのスタイル - */
footer .footer-link {
	display: flex;
	align-items: flex-end;
	height: auto;
}

@media (min-width: 62em) {
	footer .footer-link {
		padding-top: 3em;
	}
}

footer .footer-link .row {
	text-align: center;
}

@media (min-width: 62em) {
	footer .footer-link .row {
		text-align: left;
	}
}

footer .footer-link .footer-cell {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

@media (min-width: 62em) {
	footer .footer-link .footer-cell {
		position: relative;
		display: flex;
		align-items: left;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}
}

footer .footer-link .footer-cell img {
	width: 100px;
}

@media (min-width: 62em) {
	footer .footer-link .footer-cell img {
		width: 180px;
	}
}

/* - footer コピーライト表示 - */
footer .copyright {
	margin-top: 2rem;
	margin-bottom: 2rem;
	text-align: center;
	letter-spacing: 0.1em;
	color: #777777;
	font-size: 0.625rem;
}

@media (min-width: 62em) {
	footer .copyright {
		margin-top: 2rem;
		margin-bottom: 2rem;
		text-align: left;
		letter-spacing: 0.1em;
		color: #777777;
		font-size: 0.625rem;
	}
}

footer .footer-link li a {
	transition: none;
	font-size: 0.775rem;
	line-height: 2;
}

footer .footer-link .sns-link {
	text-align: center;
}

footer .footer-link .sns-link li {
	display: inline-block;
	margin: 0 0.5rem;
}

footer .footer-link .sns-link li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	transition: all 0.15s ease;
	color: #eeeeee;
	border-radius: 50%;
	background-color: #777777;
	font-size: 2rem;
}

@media (any-hover: hover) {
	footer .footer-link .sns-link a.ln-link:hover {
		color: #ffffff;
		background-color: #06c755;
	}

	footer .footer-link .sns-link a.yt-link:hover {
		color: #ff0033;
		background-color: #ffffff;
	}

	footer .footer-link .sns-link a.ig-link:hover {
		color: #ffffff;
		background-image: linear-gradient(315deg, #ffd600, #ff7a00, #ff0069, #d300c5, #7638fa);
	}
}

footer .footer-link .footer-banner {
	margin-bottom: 4rem;
	text-align: center;
}

/* - ページトップボタン - */
#pagetop {
	position: fixed;
	z-index: 1000;
	right: 5%;
	bottom: 5%;
}

#pagetop a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	text-decoration: none;
	color: #ffffff;
	border-radius: 50%;
	background-color: rgba(45, 189, 179, 0.5);
	font-size: 1.5rem;
}

@media (any-hover: hover) {
	#pagetop a:hover {
		background-color: #2dbdb4;
	}
}

/****************************** Footer End ******************************/

/*--------------------------------------------------------------
# link
--------------------------------------------------------------*/
a.anchor {
	display: block;
	margin-top: -120px;
	padding-top: 120px;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
	.pc {
		display: none !important;
	}

	.sp {
		display: block !important;
	}
}

/*--------------------------------------------------------------
# スマホのみ改行
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	.sp_br {
		display: none;
	}
}

/****************************** Print ******************************/

@media print {
	nav {
		position: relative !important;
	}
}

/****************************** Print End ******************************/