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

parts-config.css for サイト名

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

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

/*============================================================
 ボタン
*============================================================*/
/* 標準ボタン設定　※設定必須
---------------------------------------- */
.parts-btn {
	--width: fit-content;
	--min-width: 224px;
	--max-width: unset;
	--min-height: 48px;
	--margin: 0 auto;
	--padding: 8px 16px;
	--font-weight: 400;
	--font-size: var(--rem16px);
	--line-height: 160%;
	--border-radius: 9999px;
	--border: solid 1px #5960DA;
	--border-image: var(--common-color-gr);
	--hover-border-radius: 4px;

	--color: var(--common-color-text);
	--background:  var(--common-color-white);
	--hover-color: #000;
	--hover-background: var(--common-color-gr2);
	--hover-border: solid 1px #5960DA;
	--hover-border-image: var(--common-color-gr);

	--transition: 0.3s;
}
/* オプション設定
---------------------------------------- */
/* ヘッダーボタン */
.parts-btn[data-name="header"] {
	--min-width: 136px;
	--padding: 4px 20px;
	--font-weight: 600;
	--font-size: var(--rem16px);
	--line-height: 120%;
	text-align: left;

	--color: var(--common-color-white);
	--border: unset;
	--hover-border: unset;
}
.parts-btn[data-name="header"] .label-sub {
	display: block;
	margin-top: 4px;
	font-weight: 500;
	font-size: 11px;
	line-height: 150%;
}
.parts-btn[data-name="header"]::before {
	display: block;
    content: "";
    position: absolute;
    top: 1.8em;
    left: 20px;
    width: 0;
    height: 1px;
    border-radius: 9999px;
    background: var(--common-color-white);
    transition: width 0.3s;
}
.parts-btn[data-name="header"].current::before,
.parts-btn[data-name="header"]:hover::before {
	width: calc(100% - 40px);
}

/* 固定ヘッダーボタン */
#indiv-header .parts-btn[data-name="header"] {
}

/* グラデーションボタン */
.parts-btn[data-color="gr"] {
	--color: var(--common-color-white);
	--background: var(--common-color-gr);
	--border: unset;
	--hover-border: unset;
	--hover-color: var(--common-color-white);
	--hover-background: var(--common-color-gr);
	position: relative;
	z-index: 0;
}
.parts-btn[data-color="gr"]::after {
    content: "";
	border-radius: 9999px;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--common-color-gr-hover);
    opacity: 0;
    transition: opacity var(--transition);
}
.parts-btn[data-color="gr"]:hover::after {
    opacity: 1;
}
/* 送信ボタン対応 */
.parts-btn[data-color="gr"]:has(.btn-send) {
	padding: 0;
}
.parts-btn[data-color="gr"] .btn-send {
	width: 100%;
	height: 100%;
	padding: var(--padding);
	border-radius: var(--border-radius);
	background-color: transparent;
	color: var(--common-color-white);
	transition: background-color var(--transition, 0.3s);
}
.page-form:not([data-wa]) .wpcf7 form:not(.agreement-checked) .btn-area .parts-btn[data-color="gr"]:has(.forInput.btn-send) {
    background-color: transparent;
}
.page-form:not([data-wa]) .wpcf7 form:not(.agreement-checked) .btn-area .parts-btn[data-color="gr"]:has(.forInput.btn-send)::after {
    display: none;
}

/* form .parts-btn.btn-send {
	--hover-background: var(--common-color-gr-hover);
} */


/* グラデーションボタン2 */
.parts-btn[data-color="gr2"],
form .parts-btn.btn-send {
	--color: var(--common-color-text);
	--background: var(--common-color-white);
	--border-image: var(--common-color-gr);
	--hover-color: var(--common-color-text);
}
.parts-btn[data-color="gr2"] {
	--hover-background: var(--common-color-gr2);
	position: relative;
	z-index: 0;
}
.parts-btn[data-color="gr2"]::after {
    content: "";
	border-radius: 9999px;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--common-color-gr2-hover);
    opacity: 0;
    transition: opacity var(--transition);
}
.parts-btn[data-color="gr2"]:hover::after {
    opacity: 1;
}

/*============================================================
 リスト
*============================================================*/
/* 箇条書きリスト（ul）
---------------------------------------- */
/* 基本設定 */
.parts-list-dot {
	--gap: 8px;
	--marker-color: var(--common-color-text);
}
.parts-list-dot[data-marker="accesnt"] li::marker {
	color: var(--common-color-accent);
}

/* 連番リスト（ol）
---------------------------------------- */
/* 基本設定 */
.parts-list-num {
	--gap: 8px;
	--marker-color: var(--common-color-text);
}

/* 定義リスト（dl）
---------------------------------------- */
/* 基本設定 */
.parts-dl {
	--gap: 0;

	--row-padding: 32px 0;
	--row-border-bottom: solid 1px #DDD;
	--row-gap: 8px 80px;

	--label-width: 120px;
	--label-font-weight: 400;
	--label-font-size: 16px;
	--label-line-height: 160%;
	--label-color: var(--common-color-text);

	--data-font-weight: 400;
	--data-font-size: 16px;
	--data-line-height: 160%;
	--data-color: var(--common-color-text);
}


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



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

for tablet

********************************************************************************/
@media screen and (max-width: 1007px) {
	/*============================================================
	 ボタン
	*============================================================*/
	/* オプション設定
	---------------------------------------- */
	/* ヘッダーボタン */
	.parts-btn[data-name="header"] {
		--width: 112px;
        --min-width: unset;
		--min-height: 48px;
		--font-size: var(--rem14px);
	}

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



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

for SP

********************************************************************************/
@media screen and (max-width: 767px) {
	/*============================================================
	 ボタン
	*============================================================*/
	/* 標準ボタン設定
	---------------------------------------- */
	.parts-btn {
	}
	
	/*============================================================
	 リスト
	*============================================================*/
	/* 定義リスト（dl）
	---------------------------------------- */
	.parts-dl {
		--row-padding: 16px 0;
		--label-font-weight: 600;
	}

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

}