@charset "UTF-8";
/********************************************************************************

parts-config.css for サイト名

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

/*============================================================
 CSS変数 for parts共通　※サイトデザインに従い適宜設定
*============================================================*/
:root {
}

/*============================================================
 ボタン
*============================================================*/
/* 標準ボタン設定　※設定必須
---------------------------------------- */
.parts-btn {
	--width: 240px;
	--min-width: unset;
	--max-width: unset;
	--margin: 0 auto;
	--padding: 13px 8px;
	--font-size: var(--rem16px);
	--line-height: 20px;
	--border-radius: 100px;
	--border-width: 1px;
	--hover-border-radius: 4px;

	--color: var(--common-color-white);
	--background: var(--common-color-btn);
	--border-color: var(--common-color-btn);
	--hover-color: var(--common-color-white);
	--hover-background: var(--common-color-btn-hover);
	--hover-border-color: var(--common-color-btn-hover);

	--transition: 0.3s;
}
/* オプション設定
---------------------------------------- */
/* ヘッダーボタン */
.parts-btn[data-name^="header"] {
	--width: 144px;
}
.parts-btn[data-name^="header"] span {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 8px;
}
.parts-btn[data-name="header-document"] {
	--color: var(--common-color-text);
	--background: var(--common-color-btn-white);
	--border-color: var(--common-color-black);
	--hover-color: var(--common-color-text);
	--hover-background:  var(--common-color-btn-white-hover);
	--hover-border-color: var(--common-color-black);
}
.parts-btn[data-name="header-document"] .label::before {
	display: inline-block;
	content: "";
	width: 20px;
	height: auto;
	aspect-ratio: 1;
	background-image: url(../images/common/icon-download.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px auto;
}
.parts-btn[data-name="header-contact"] .label::before {
	display: inline-block;
	content: "";
	width: 20px;
	height: auto;
	aspect-ratio: 1;
	background-image: url(../images/common/icon-mail.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px auto;
}

/* 白ボタン(黒ボーダー) */
.parts-btn[data-name="white-border-black"] {
	--color: var(--common-color-text);
	--background: var(--common-color-btn-white);
	--border-color: var(--common-color-black);
	--hover-color: var(--common-color-text);
	--hover-background:  var(--common-color-btn-white-hover);
	--hover-border-color: var(--common-color-black);
}


/*============================================================
 テキスト
*============================================================*/
/* 行数制限(省略文字「...」付)
---------------------------------------- */
.parts-text[data-type="clamp"] {
	--line: 3;
}



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

for tablet

********************************************************************************/
@media screen and (max-width: 1247px) {
	/*============================================================
	 テキスト
	*============================================================*/
	/* 行数制限(省略文字「...」付)
	---------------------------------------- */
	.parts-text[data-type="clamp"] {
		--line: 3;
	}
}



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

for SP

********************************************************************************/
@media screen and (max-width: 767px) {
	/*============================================================
	 ボタン
	*============================================================*/
	/* 標準ボタン設定
	---------------------------------------- */
	.parts-btn {
		/* --width: 274px;
		--min-width: unset;
		--max-width: unset;
		--margin: 0 auto;
		--padding: 22px 0;
		--font-size: var(--rem16px);
		--line-height: 100%;
		--border-radius: 0; */
	}

	/*============================================================
	 テキスト
	*============================================================*/
	/* 行数制限(省略文字「...」付)
	---------------------------------------- */
	.parts-text[data-type="clamp"] {
		--line: 2;
	}

}