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

parts.css Ver.3.0

********************************************************************************/
/* @import 'parts-config.css'; */

/*============================================================
 ボタン
 ※ウェブアクセシビリティ対応の場合、ホバー時背景色エフェクトはフェードのみ
 　(スライドはフォームのinputで実現不可能なため)
*============================================================*/
/* user agent stylesheet 打消し
---------------------------------------- */
/*  */
button {
	font-family: var(--common-font-family);
}

.parts-btn,
a.parts-btn,
input.parts-btn,
button.parts-btn {
	display: block;
	box-sizing: border-box;
	width: var(--width, 320px);
	min-width: var(--min-width, unset);
	max-width: var(--max-width, unset);
	padding: var(--padding, 11px 8px);
	background: var(--background);
	border: solid var(--border-width, 1) var(--border-color, transparent);
	border-radius: var(--border-radius, 0);
	margin: var(--margin, 0 auto);

	font-weight: var(--font-weight, bold);
	font-size: var(--font-size, var(--rem16px));
	line-height: var(--line-height, 22px);
	color: var(--color);
	text-align: center;

	transition: background-color var(--transition, 0.3s);
}
.parts-btn:focus-visible,
a.parts-btn:focus-visible,
input.parts-btn:focus-visible,
button.parts-btn:focus-visible {
    outline: solid 2px var(--common-color-button-focus);
    outline-offset: unset;
}

.parts-btn:hover,
a.parts-btn:hover,
input.parts-btn:hover,
button.parts-btn:hover {
	background: var(--hover-background);
	border-color: var(--hover-border-color, transparent);
	color: var(--hover-color);
	cursor: pointer;
}


/*============================================================
 アコーディオン
*============================================================*/
/* 本体 */
.parts-accordions {
	--accordions-icon-width: 34px;
	display: flex;
	flex-direction: column;
	/* gap: 24px; */
}
/* 1set */
.parts-accordions .accordion {
	padding: 24px 16px 24px 24px;
	border-bottom: solid 1px #E3E3DA;
	display: flex;
	flex-direction: column;
	gap: 8px 0;
}
/* Question */
.parts-accordions .accordion .accordion-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	list-style: none;
}
.parts-accordions .accordion .accordion-summary::-webkit-details-marker {
	display:none;
}

.parts-accordions .accordion .accordion-summary:hover {
	cursor: pointer;	
}
.parts-accordions .accordion .accordion-summary::before {
	display: block;
	content: "";
	width: var(--accordions-icon-width);
	height: var(--accordions-icon-width);
	background-image: url(../images/parts/icon-accordion-q.svg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: var(--accordions-icon-width) auto;
}
.parts-accordions .accordion .accordion-summary .summary {
	font-weight: bold;
	font-size: var(--rem20px);
	line-height: 200%;
	flex: 1;
}
.parts-accordions .accordion .accordion-summary::after {
	display: block;
	content: "";
	width: var(--accordions-icon-width);
	height: var(--accordions-icon-width);
	background-image: url(../images/parts/icon-accordion-open.svg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: var(--accordions-icon-width) auto;
	transition: background-image 0.3s;
}
/* Answer */
.parts-accordions .accordion .accordion-content .content-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 8px 0 0 0;
}
.parts-accordions .accordion .accordion-content .content-inner::before {
	display: block;
	content: "";
	width: var(--accordions-icon-width);
	height: var(--accordions-icon-width);
	background-image: url(../images/parts/icon-accordion-a.svg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: var(--accordions-icon-width) auto;
}
.parts-accordions .accordion .accordion-content .content-inner .content {
	flex: 1;
	font-weight: 500;
}
.parts-accordions .accordion .accordion-content .content-inner::after {
	display: block;
	content: "";
	width: var(--accordions-icon-width);
	height: 0;
}

/* open時 */
.parts-accordions .accordion[open] .accordion-summary::after {
	background-image: url(../images/parts/icon-accordion-close.svg);
}

/*============================================================
 リスト
*============================================================*/
/* 箇条書きリスト（ul ドット）
---------------------------------------- */
.parts-list-dot,
.parts-list-dot > li {
	list-style-type: disc;
} 
.parts-list-dot {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: var(--gap);
	margin-left: 24px;
} 
.parts-list-dot li::marker {
	color: var(--marker-color);
} 

/* 連番リスト（ol）
---------------------------------------- */
.parts-list-num,
.parts-list-num > li {
	list-style-type: decimal;
} 
.parts-list-num {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: var(--gap);
	margin-left: 24px;
} 
.parts-list-num li::marker {
	color: var(--marker-color);
} 

/* 定義リスト（dl）
---------------------------------------- */
.parts-dl {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}
.parts-dl .row {
	padding: var(--row-padding);
	border-bottom: var(--row-border-bottom);
	display: flex;
	flex-wrap: wrap;
	gap:  var(--row-gap);
}
.parts-dl .row .label {
	width: var(--label-width);
	font-weight: var(--label-font-weight);
	font-size: var(--label-font-size);
	line-height: var(--label-line-height);
	color: var(--label-color);
}
.parts-dl .row .data {
	flex: 1;
	font-weight: var(--data-font-weight);
	font-size: var(--data-font-size);
	line-height: var(--data-line-height);
	color: var(--data-color);
}

/*============================================================
 テキスト
*============================================================*/
/* 行数制限(省略文字「...」付)
---------------------------------------- */
.parts-text[data-type^="clamp"] {
	display: -webkit-box;
    overflow: hidden;
	white-space: normal;
    -webkit-line-clamp: var(--line, 2);
    -webkit-box-orient: vertical;
}

/*============================================================
 タブ
*============================================================*/
.parts-tab {
	--duration: 0.2s
}
/* タブ */
.parts-tab .tab-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0px;
	margin-bottom: 40px;
	border-bottom: solid 1px #b3b3b3;
}
/* .parts-tab .tab-menu::after {
	display: block;
	content: "";
	width: px;
	height: px;
} */
.parts-tab .tab-menu .item {
    flex-grow: 1;
	height: 78px;
    cursor: pointer;
    padding: 16px;
    background-color: transparent;
    border-bottom: solid 4px transparent;
    transition: border-bottom-color var(--duration), color var(--duration);
	transform: translateY(1px);

	font-weight: bold;
	font-size: 20px;
	line-height: 160%;
    color: #B3B3B3;
    text-align: center;
	align-content: center;
}
/* 選択されたタブの表示 */
.parts-tab .tab-menu .item.active {
    border-bottom-color: var(--common-color-accent);
    color: var(--common-color-accent);
}

/* コンテンツ */
.parts-tab .tab-content {
    position: relative;
}
.parts-tab .tab-content .item {
    display: none;
}



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

for tablet

********************************************************************************/
@media screen and (max-width: 1127px) {
}

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

for SP

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

	/*============================================================
	 リスト
	*============================================================*/
	/* 定義リスト（dl）
	---------------------------------------- */
	/* 基本設定 */
	.parts-dl .row {
		flex-direction: column;
	}


	/*============================================================
	 アコーディオン
	*============================================================*/
	.parts-accordions {
		/* --accordions-icon-width: 32px; */
	}
	/* 1set */
	.parts-accordions .accordion {
		padding: 16px 8px 16px 16px;
	}
	/* Question */
	.parts-accordions .accordion .accordion-summary {
		gap: 16px;
	}	
	.parts-accordions .accordion .accordion-summary .summary {
		font-size: var(--rem18px);
		line-height: 180%;
	}
	/* Answer */
	.parts-accordions .accordion .accordion-content .content-inner {
		gap: 16px;
	}
	.parts-accordions .accordion .accordion-content .content-inner .content {
		font-weight: 400;
	}

	/*============================================================
	 タブ
	*============================================================*/
	.parts-tab .tab-menu .item {
		font-size: 16px;
	}

}