@charset "utf-8";

/* CSS Document */
/*==================================================
  COMMON
==================================================*/
:root {
	--color-main: #F0831E;
	--color-palemain: #FFEBD9;
	--color-dullmain: #E0C4A9;
	--color-white: #FFFFFF;
	--color-black: #222222;
	--color-darkgray: #797878;
	--color-gray: #CCCCCC;
	--color-lightgray: #DDDDDD;
	--color-palegray: #E5E5E5;

	--font-ja: 'Noto Sans JP', sans-serif;
	--font-en: 'Montserrat', sans-serif;

	--rad-lg: 12px;
	--rad-md: 8px;
	--rad-sm: 4px;

	--space-xl: 150px;
	--space-lg: 100px;
	--space-md: 70px;
	--space-sm: 40px;

	--fs-3xl: 45px;
	--fs-2xl: 30px;
	--fs-xl: 26px;
	--fs-lg: 24px;
	--fs-md: 20px;
	--fs-base: 16px;
	--fs-sm: 14px;
	--fs-xs: 13px;
	--fs-2xs: 12px;

	/* 固定ヘッダーの高さ。実際の値は js.php で実測してセットする（下記はJS無効時の既定値） */
	--header-height: 70px;
}

@media only screen and (max-width: 767px) {
	:root {
		--header-height: 60px;

		--space-xl: 130px;
		--space-lg: 80px;
		--space-md: 50px;
		--space-sm: 30px;

		--fs-3xl: 34px;
		--fs-2xl: 28px;
		--fs-xl: 20px;
		--fs-lg: 18px;
		--fs-md: 16px;
		--fs-base: 15px;
		--fs-sm: 14px;
		--fs-xs: 13px;
		--fs-2xs: 12px;
	}
}


@media (min-width: 767px) {

	/* ▼スマホサイズでのみ架電可能▼ */
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}

* {
	margin: 0;
	padding: 0;
}

html {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 10px;
	line-height: 1.5;
	color: var(--color-black);
	background: #fff;
	font-weight: 500;
	-webkit-tap-highlight-color: rgba(240, 131, 30, 0.09);
}

html img {
	max-width: 100%;
	height: auto;
}

html a {
	display: inline-block;
	text-decoration: none;
}

body {
	font-size: 1.6rem;
	overflow-x: hidden;
}

main {
	display: block;
	word-break: break-word;
	position: relative;
	min-height: 400px;
	overflow: hidden;
}

@media (any-hover:hover) {

	a:hover,
	a:active {
		text-decoration: none;
		filter: alpha(opacity=70);
		-webkit-transition: all .3s;
		transition: all .3s;
		-moz-opacity: 0.7;
		opacity: 0.7;
	}
}

/*==================================================
	recaptcha
==================================================*/
.grecaptcha-badge {
	bottom: 80px !important;
}


/*==================================================
  lightbox
==================================================*/
#lightbox a {
	transition: initial;
}

/*==================================================
  slick
==================================================*/
.slick-list {
	line-height: 0 !important;
}

/*arrow*/
.slick-arrow::before {
	content: "" !important;
	position: absolute;
	top: 0;
	width: 50px;
	height: 50px;
}

.slick-arrow.slick-prev {
	left: -28px !important;
}

.slick-arrow.slick-next {
	right: -28px !important;
}

.slick-next,
.slick-prev {
	z-index: 99 !important;
	width: 56px !important;
	height: 56px !important;
	transition: .3s;
	top: calc(50% - (33px * 0.5)) !important;
}

@media (any-hover:hover) {

	.slick-next:hover,
	.slick-prev:hover {
		transform: translate(0, -50%) scale(1.08);
	}
}

.slick-next::before {
	background: url(../img/common/slick_arrow_right_01.svg) !important;
	background-size: contain !important;
	opacity: 1 !important;
	width: 100% !important;
	height: 100% !important;
}

.slick-prev::before {
	background: url(../img/common/slick_arrow_left_01.svg) !important;
	background-size: contain !important;
	opacity: 1 !important;
	width: 100% !important;
	height: 100% !important;
}

/* dots */
.slick-dots li,
.slick-dots li button {
	width: 13px !important;
	height: 13px !important;
}

.slick-dots li button:before {
	content: "" !important;
	width: 13px !important;
	height: 13px !important;
	background: var(--color-gray);
	border-radius: 8px;
	opacity: 1 !important;
}

.slick-dots li.slick-active button:before {
	background: var(--color-main);
}

.slick-dotted.slick-slider {
	margin-bottom: 0 !important;
}

.slick-dots {
	position: static !important;
	line-height: 0 !important;
	margin-top: 20px !important;
}

@media only screen and (max-width: 767px) {

	.slick-arrow.slick-prev {
		left: -4% !important;
	}

	.slick-arrow.slick-next {
		right: -4% !important;
	}

	.slick-next,
	.slick-prev {
		width: 48px !important;
		height: 48px !important;
	}
}

/*==================================================
  HEADER
==================================================*/
header {
	background: rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	border-radius: 0 0 var(--rad-md) var(--rad-md);
	position: relative;
	width: min(96%, 1920px);
	height: 70px;
}

/* ヘッダー内側 */
.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30px;
	height: 100%;
}

/* ロゴ */
.header__logo {
	max-width: 149px;
	height: auto;
}

.header__logo a {
	display: block;
	height: 100%;
}

.header__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* グローバルナビ */
.header__nav {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2vw, 30px);
}

.header__navList {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2vw, 30px);
}

.header__navLink a {
	display: inline-flex;
	align-items: center;
	color: var(--color-black);
	font-size: clamp(12px, 1.2vw, 14px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .05em;
	transition: .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (any-hover:hover) {
	.header__navLink a:hover {
		opacity: 1;
		color: var(--color-main);
	}
}

/* お問い合わせボタン → 共通コンポーネント .linkBtn を使用 */

/* 固定ヘッダー */
header.fixed {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	transition: .3s;
	transform: translateX(-50%);
}

/* 固定ヘッダー分の余白。トップページはFVを画面上端から見せるため除外 */
body:not(.home) header.fixed+main:not(:has(.ttlWrap)) {
	padding-top: 70px;
}

/*==================================================
  externalIco（外部リンクアイコン）
  テキスト要素にクラスを付与すると、末尾に外部リンクアイコンが擬似要素で付く。
==================================================*/
.externalIco::after {
	display: inline-block;
	width: 0.86em;
	height: 0.86em;
	margin-left: .3em;
	background-color: var(--color-darkgray);
	content: "";
	vertical-align: -.1em;
	mask: url(/share/img/common/ico_external_01.svg) no-repeat center / contain;
	-webkit-mask: url(/share/img/common/ico_external_01.svg) no-repeat center / contain;
}

/*==================================================
  MAIN
==================================================*/
#ancPagetop {
	display: inline;
}

/*************** アンカーリンク ****************/
/* ページ遷移を伴うアンカーリンクでも固定ヘッダーに隠れないよう、id付き要素の停止位置をずらす */
[id] {
	scroll-margin-top: var(--header-height);
}

/*************** メインタイトル ****************/
.ttlWrap {
	background: url(/share/img/common/bg_ttlWrap_01.webp) center;
	background-size: cover;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: flex;
	font-size: clamp(30px, 4vw, 36px);
	padding: 3.2em 0 1.5em;
}

.ttlWrap__main {
	font-weight: bold;
	text-align: center;
	color: #fff;
}

.ttlWrap__en {
	display: block;
	text-align: center;
	font-size: 0.5em;
	line-height: 1.0;
	font-family: var(--font-en);
	color: #fff;
}

/* 一覧をカテゴリー・タグで絞り込んでいる場合に表示する名称 */
.ttlWrap__icon {
	display: inline-block;
	border: 1px solid #fff;
	border-radius: var(--rad-sm);
	background: rgba(255,255,255,0.15);
	margin-top: 15px;
	padding: .35em .8em;
	font-size: var(--fs-sm);
	line-height: 1.1;
	letter-spacing: .05em;
	text-align: center;
	color: #fff;
}

/*************** パンくず ****************/
.breadWrap {
	width: 100%;
}

#bread {
	font-size: var(--fs-sm);
	padding: 10px 0;
	margin-top: 10px;
}

#bread a {
	padding: 0 5px 0 0;
	display: inline-block;
	text-decoration: underline;
}

#bread a:hover {
	text-decoration: none;
}

#bread .List span:last-of-type span[property="name"] {
	display: inline-block;
	padding: 0;
	margin-top: -3px;
	vertical-align: middle;
	max-width: 500px;
	/* 500px超えた文字は「...」表示 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*************** 準備中 ****************/

.preparationBox {
	margin: var(--space-md) 0 var(--space-lg);
}

.preparationBox__ttl {
	font-size: var(--fs-md);
	font-weight: bold;
	text-align: center;
}

.preparationBox__btnWrap {
	margin-top: var(--space-sm);
	text-align: center;
}

/*************** 完了 ****************/
.attentionBox__btnWrap {
	margin-top: var(--space-sm);
	text-align: center;
}

/*==================================================
  FOOTER
==================================================*/

/* -------------------------------------------------------
  お問い合わせ誘導
---------------------------------------------------------- */
.contactBox {
	padding: var(--space-sm) 0;
	background: var(--color-main);
}

.contactBox__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.contactBox__lead {
	font-size: 32px;
	font-weight: bold;
	letter-spacing: .05em;
	color: var(--color-white);
}

.contactBox .linkBtn {
	border-color: #fff;
}

/* お問い合わせボタン → 共通コンポーネント .linkBtn（--outline --lg）を使用 */

/* -------------------------------------------------------
  フッターリンク
---------------------------------------------------------- */
.footerLinkBox {
	padding: var(--space-md) 0;
	background: var(--color-white);
}

.footerLinkBox__inner {
	display: flex;
	align-items: stretch;
}

.footerLinkBox__item {
	width: 25%;
	padding: 0 20px;
}

.footerLinkBox__item+.footerLinkBox__item {
	border-left: 1px solid var(--color-palegray);
}

.footerLinkBox__ttl {
	margin-bottom: 10px;
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: bold;
	letter-spacing: .05em;
	color: var(--color-main);
}

.footerLinkBox__link a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: var(--fs-xs);
	padding: 1.15em 0.38em;
	border-bottom: 1px solid var(--color-palegray);
	transition: .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (any-hover:hover) {
	.footerLinkBox__link a:hover {
		opacity: 1;
		color: var(--color-main);
		border-color: var(--color-main);
	}

	.footerLinkBox__link a:hover .footerLinkBox__txt {
		color: var(--color-main);
	}

	.footerLinkBox__link a:hover .footerLinkBox__ico {
		transform: translateX(3px);
	}

	.footerLinkBox__link.footerLinkBox__link--external a:hover .footerLinkBox__ico {
		transform: translateY(-2px);
	}
}

.footerLinkBox__txt {
	line-height: 1.4;
	letter-spacing: .05em;
	color: var(--color-black);
}

.footerLinkBox__ico {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.footerLinkBox__link--external .footerLinkBox__ico {
	width: 12px;
	height: 12px;
}

/* 会社情報 */
.footerInfo {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.footerInfo__logo {
	width: 100px;
}

.footerInfo__catch {
	font-size: 28px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: .1em;
	font-feature-settings: "palt"1;
	color: var(--color-black);
}

.footerInfo__catch--em {
	color: var(--color-main);
}

.footerInfo__text {
	font-size: var(--fs-sm);
	line-height: 1.8;
	letter-spacing: .05em;
	color: var(--color-black);
}

.footerInfo__sns {
	display: flex;
	align-items: center;
	gap: 15px;
	padding-top: 20px;
	border-top: 1px solid var(--color-palegray);
}

.footerInfo__snsItem img {
	width: 32px;
	height: auto;
}

.footerInfo__sns a {
	display: flex;
}

/* -------------------------------------------------------
  コピーライト
---------------------------------------------------------- */
.footerCopyrights {
	padding: clamp(20px, 2vw, 30px) 0;
	background: var(--color-black);
}

.footerCopyrights__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.footerCopyrights__linkWrap {
	display: flex;
	gap: 30px;
}

.footerCopyrights__linkWrap a {
	font-size: var(--fs-xs);
	letter-spacing: .05em;
	color: var(--color-white);
}

.footerCopyrights__copy {
	font-size: var(--fs-2xs);
	letter-spacing: .05em;
	color: var(--color-white);
}

/* eNCLの「e」を大文字の高さに合わせる */
.footerCopyrights__copyInitial {
	font-size: 1.27em;
	line-height: 1;
}

/* -------------------------------------------------------
  ページトップボタン（追従）
---------------------------------------------------------- */
.footFix {
	z-index: 100;
	position: fixed;
	right: 10px;
	bottom: 10px;
	display: none;
}

.footFix .ancPagetop a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 60px;
	height: 60px;
	border: 1px solid var(--color-main);
	border-radius: 50%;
	background: var(--color-white);
	font-family: var(--font-en);
	font-size: var(--fs-2xs);
	font-weight: bold;
	letter-spacing: .05em;
	color: var(--color-main);
}

.footFix .ancPagetop a::before {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--color-main);
	border-right: 2px solid var(--color-main);
	transform: rotate(-45deg);
}

/*///////////////////////////////////////////////////////////

スマホ・タブレット共通（～1079px）

///////////////////////////////////////////////////////////*/
@media only screen and (max-width: 1079px) {

	/*==================================================
      スマホ・タブレット共通 HEADER
    ==================================================*/
	header {
		width: 100%;
		border-radius: 0;
	}

	/*==================================================
      スマホ・タブレット共通 HEADER（ハンバーガーボタン）
    ==================================================*/
	.head__smpBtn {
		z-index: 300;
		padding: 14px 12px;
		background-color: var(--color-main);
		border-radius: 50%;
	}

	.head__smpBtn span {
		position: relative;
		display: block;
		height: 2px;
		width: 26px;
		background: #fff;
		-webkit-transition: ease .3s;
		transition: ease .3s;
	}

	.head__smpBtn span:nth-child(1) {
		top: 0;
	}

	.head__smpBtn span:nth-child(2) {
		margin: 8px 0;
	}

	.head__smpBtn span:nth-child(3) {
		top: 0;
	}

	.head__smpBtn.active span:nth-child(1) {
		top: 10px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.head__smpBtn.active span:nth-child(2) {
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		opacity: 0;
	}

	.head__smpBtn.active span:nth-child(3) {
		top: -10px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/*==================================================
      スマホ・タブレット共通 HEADER（ドロワーメニュー）
    ==================================================*/
	.smpMenu__wrap {
		position: relative;
		z-index: 300;
		display: none;
	}

	.smpMenu__ttl {
		font-family: var(--font-en);
		font-size: 18px;
		font-weight: bold;
		letter-spacing: .05em;
		color: var(--color-main);
	}

	.smpMenu__wrap {
		padding: 5%;
		background: rgba(255, 255, 255, 0.95);
		overflow-y: scroll;
		/*縦方向の超過分はスクロールする*/
		height: calc(100vh - 150px);
		/*.drawerの高さ＋.snsの高さ合計px*/
		transform: translateZ(0);
		/*retinaディスプレイでoverflow-yが効かなくなるのを回避する*/
	}

	/* お問い合わせボタン → 共通コンポーネント .linkBtn（--lg --icon）を使用 */
	.smpMenu__btnWrap {
		margin: var(--space-sm) auto;
		text-align: center;
	}

	.smpMenu__btnWrap .linkBtn {
		width: 100%;
		max-width: 400px;
	}

	/* メニューリスト（フッターの SITE MENU と同じ体裁で縦並び） */
	.smpMenu__link a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 1.15em .38em;
		border-bottom: 1px solid var(--color-palegray);
		font-size: var(--fs-base);
	}

	.smpMenu__txt {
		line-height: 1.4;
		letter-spacing: .05em;
		color: var(--color-black);
	}

	.smpMenu__ico {
		flex-shrink: 0;
		width: 14px;
		height: 14px;
	}

	header.fixed .smpMenu__wrap {
		height: calc(100dvh - 70px);
		/*.drawerの高さ＋.snsの高さ合計px*/
	}

	body.isMenuOpen {
		overflow: hidden;
	}


	/*==================================================
      スマホ・タブレット共通 フッター
    ==================================================*/
	.footerLinkBox__inner {
		flex-wrap: wrap;
		gap: 40px 0;
	}

	.footerLinkBox__item {
		width: calc(100% / 3);
	}

	.footerLinkBox__item.footerInfo {
		width: 100%;
		align-items: center;
		border: none;
	}
}

/*///////////////////////////////////////////////////////////

スマホ版（～767px）

///////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px) {

	/*==================================================
      スマホ版 MAIN
    ==================================================*/
	main {
		min-height: 50vh;
		position: inherit;
	}

	/* スマホのヘッダーは60pxのため、PC用70pxを上書き */
	body:not(.home) header.fixed+main:not(:has(.ttlWrap)) {
		padding-top: 60px;
	}

	header.fixed .smpMenu__wrap {
		height: calc(100dvh - 60px);
		/*.drawerの高さ＋.snsの高さ合計px*/
	}

	.btnSend a {
		margin: 5% auto 0;
	}

	h3.formTitle {
		margin: 5% 2% 0;
	}

	/*************** パンくず ****************/
	#bread {
		margin-top: 10px;
		white-space: nowrap;
		overflow: hidden;
		overflow-x: scroll;
		-webkit-overflow-scrolling: auto;
	}

	#bread .List span:last-of-type span[property="name"] {
		max-width: 140px;
		/* 140px超えた文字は「...」表示 */
	}

	/*==================================================
      スマホ版 HEADER
    ==================================================*/
	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		padding: 0;
		z-index: 1000;
		max-width: 100% !important;
		border-radius: 0;
	}

	.header__inner {
		height: 60px;
		padding: 0 10px;
	}

	.header__logo {
		width: auto;
		height: 35px;
	}

	.header__logo a {
		display: block;
		height: 100%;
	}

	.header__logo img {
		width: auto;
		height: 100%;
	}

	/*==================================================
	  スマホ版 FOOTER
	==================================================*/
	.contactBox__inner {
		gap: 20px;
	}

	.contactBox__lead {
		font-size: var(--fs-xl);
		text-align: center;
	}

	.footerLinkBox__inner {
		flex-direction: column;
	}

	.footerLinkBox__item {
		width: 100%;
		padding: 0;
	}

	.footerLinkBox__item+.footerLinkBox__item {
		border-left: none;
	}

	.footerInfo {
		align-items: center;
	}

	.footerInfo__catch,
	.footerInfo__text {
		text-align: center;
	}

	.footerInfo__sns {
		justify-content: center;
		width: 100%;
	}

	.footerCopyrights__linkWrap a {
		text-decoration: underline;
	}

	.footerCopyrights__inner {
		flex-direction: column;
		gap: 15px;
	}
}

/* スマホ版ここまで --------------------------------------- */