@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: 17px 0;
	--font-size: 18px;
	--line-height: 20px;
	--border-radius: 0;
	--border-width: 1px;
	--hover-border-radius: 0;

	--color: var(--common-color-main);
	--background: transparent;
	--border-color: var(--common-color-main);
	--hover-color: #fff;
	--hover-background: var(--common-color-main);
	--hover-border-color: var(--common-color-main);
	
	--icon-width: 20px;
	--icon-height: 20px;
	--icon-background-image: url(../images/common/icon-link-arrow.svg);
	--icon-hover-background-image: url(../images/common/icon-link-arrow-white.svg);
}
/* オプション設定
---------------------------------------- */
/* 白ボタン */
.parts-btn[data-name="white"] {
	--font-size: 16px;
	--padding: 17px 250px 17px 0;
	--color: var(--common-color-main);
	--background: transparent;
	--border-color: transparent;
	--hover-color: var(--common-color-main);
	--hover-background: transparent;
	--hover-border-color: transparent;
	
	--icon-width: 22px;
	--icon-height: 8px;
	--icon-background-image: url(../images/common/icon-link-arrow-hover.svg);
	--icon-hover-background-image: url(../images/common/icon-link-arrow-hover.svg);
}
/* 白ボーターボタン */
.parts-btn[data-name="border-white"] {
	--color: #fff;
	--border-color: #fff;
	--hover-color: #fff;
	--hover-background: var(--common-color-sub);
	--hover-border-color: #fff;
	
	--icon-background-image: url(../images/common/icon-link-arrow-white.svg);
	--icon-hover-background-image: url(../images/common/icon-link-arrow-white.svg);
}
/* 予約ボタン */
.parts-btn[data-name^="cta"] {
}
.parts-btn[data-name^="cta"] > a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.parts-btn[data-name^="cta"] > a::before {
	display: block;
	content: "";
	width: 14px;
	height: 14px;
	background-image: url(../images/common/icon-calendar.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px auto;
}
.parts-btn[data-name^="cta"] > a:hover::before {
	background-image: url(../images/common/icon-calendar-white.svg);
}

/* 白予約ボタン */
.parts-btn[data-name="cta-white"] {
	--color: var(--common-color-white);
	--background: transparent;
	--border-color: var(--common-color-white);
	--hover-color: var(--common-color-white);
	--hover-background: var(--common-color-sub);
	--hover-border-color: var(--common-color-white);
	--icon-background-image: url(../images/common/icon-link-arrow-white.svg);
	--icon-hover-background-image: url(../images/common/icon-link-arrow-white.svg);
}
.parts-btn[data-name="cta-white"] > a::before {
	background-image: url(../images/common/icon-calendar-white.svg);
}
.parts-btn[data-name="cta-white"] > a:hover::before {
	background-image: url(../images/common/icon-calendar-white.svg);
}

/* header予約ボタン */
.parts-btn[data-name="cta-header"] {
	--width: 180px;
	--padding: 5px 0;
	--font-size: 14px;
	/* --color: #988268; */
	--background: linear-gradient(90deg, #FFF 0%, #E1E1E1 100%);
	/* --border-color: #988268; */
	--hover-color: #988268;
	--hover-background: linear-gradient(90deg, #E0D7C5 0%, #B4AD9E 86.54%);
	/* --hover-border-color: #988268; */
}
.parts-btn[data-name="cta-header"] > a {
	outline: solid 1px #988268;
    outline-offset: -2px;
}
.parts-btn[data-name="cta-header"] > a::before {
	background-image: url(../images/common/icon-calendar.svg);
}
.parts-btn[data-name="cta-header"] > a:hover::before {
	background-image: url(../images/common/icon-calendar.svg);
}
/* Footer予約ボタン */
.parts-btn[data-name="cta-footer"] {
	--color: #ffffff;
	--background: transparent;
	--border-color: #ffffff;
	--hover-color: #ffffff;
	--hover-background: #cbbba9;
	--hover-border-color: #cbbba9;
}

/*============================================================
 アコーディオン
*============================================================*/
/* 基本
---------------------------------------- */
.parts-accordions {
	--accordions-gap: 0;
	--accordion-gap: 0;

	--background-color: #fff;
	--border: solid 1px #E3E3DA;
	--box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.1);
    --border-radius: 20px;
	
	/* --icon-size: 30px; */
	--icon-width: 20px;
	--icon-height: 24px;
	--btn-size: 24px;

	--sw-padding: 32px 24px;
	--sw-inner-gap: 0 16px;
	/* --sw-icon-display: none; */
    --sw-font-family: var(--common-font-family);
	--sw-font-weight: bold;
	--sw-font-size: 16px;
	--sw-line-height: 32px;
    --sw-color: #1591EB; 
    /* --sw-text-align: center; */
	/* --sw-letter-spacing: 0.08; */
	/* --sw-btn-display: none; */

	--content-padding: 0 56px 32px 72px;
	--content-inner-gap: 0 16px;
	--content-border-margin: 24px;
    --content-border-top: solid 1px #E7E7E7;
    --content-font-size: 16px;
	--content-line-height: 26px;
	/* --content-icon-display: none; */

}
.parts-accordions .accordion-sw .accordion-sw-inner {
	align-items: flex-start !important;
}
.parts-accordions .accordion-sw .accordion-sw-inner::before {
	margin-top: 0.2em;
}

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




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

for HeaderSP

********************************************************************************/
@media screen and (max-width: 1239px) {
	/*============================================================
	 ボタン
	*============================================================*/
	/* オプション設定
	---------------------------------------- */
	/* 予約ボタン */
	.parts-btn[data-name="cta-header"] {
		--width: 140px;
		--padding: 9px 0;
	}
}



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

for tablet

********************************************************************************/
@media screen and (max-width: 1127px) {
	/*============================================================
	 テキスト
	*============================================================*/
	/* 行数制限(省略文字「...」付)
	---------------------------------------- */
	/*.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: 16px;
		--line-height: 100%;
		--border-radius: 0; */
	}
	
	.parts-btn[data-name="white"] {
		--font-size: 14px;
		--padding: 17px 150px 17px 0;
	}

	/*============================================================
	 アコーディオン
	*============================================================*/
	/* 基本
	---------------------------------------- */
	.parts-accordions {
		--accordions-gap: 0;
		--accordion-gap: 0;
	
		/* --icon-size: 30px; */
		--icon-width: 20px;
		--icon-height: 24px;
		--btn-size: 24px;
	
		--sw-padding: 24px 0;
		--sw-inner-gap: 0 16px;
		/* --sw-font-weight: bold; */
		--sw-font-size: 16px;
		--sw-line-height: 26px;
		/* --sw-text-align: center; */
		/* --sw-letter-spacing: 0.08; */
	
		--content-padding: 0 0 24px 0;
		/* --content-inner-gap: 0 16px; */
		/* --content-font-size: 16px; */
		/* --content-line-height: 26px; */
		/* --content-border-margin: 24px; */
	}


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

}