/* ==========================================================================
  Tab
========================================================================== */

@media all and (min-width: 768px), print {
	/* -----------------------------
    Tabータブ切り替え
  ----------------------------- */
	.faq-tab-button-list {
		position: relative;
		height: calc(62 / var(--font-size) * 1rem);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: 0 calc(16 / var(--font-size) * 1rem);
	}
	.faq-tab-button-list:before {
		content: "";
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		margin: 0 auto;
		border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
	}
	.faq-tab-button-list__item {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		flex-grow: 1;
	}
	.faq-tab-button-list__item__link {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(62 / var(--font-size) * 1rem);
		padding: 0 calc(24 / var(--font-size) * 1rem);
		position: relative;
		border-radius: calc(5 / var(--font-size) * 1rem) calc(5 / var(--font-size) * 1rem) 0 0;
		overflow: hidden;
		font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
		font-weight: 700;
		background-color: var(--color-white);
	}
	.faq-tab-button-list__item__link.--disable {
		background-color: var(--color-gray_300);
		color: var(--color-gray_600) !important;
		pointer-events: none;
	}
	.faq-tab-button-list__item__link:before {
		content: "";
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0 auto;
		border-bottom: calc(4 / var(--font-size) * 1rem) solid var(--main-color);
		display: none;
		z-index: 1;
	}
	.faq-tab-button-list__item__link:after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
		border-radius: calc(5 / var(--font-size) * 1rem) calc(5 / var(--font-size) * 1rem) 0 0;
	}

	.faq-tab-button-list__item.--portal .faq-tab-button-list__item__link {
		color: var(--main-color-jigyo01);
	}
	.faq-tab-button-list__item.--portal .faq-tab-button-list__item__link[aria-selected="true"] {
		background-color: var(--bg-sub-color-jigyo01);
	}
	.faq-tab-button-list__item.--portal .faq-tab-button-list__item__link:before {
		border-color: var(--main-color-jigyo01);
	}
	.faq-tab-button-list__item.--kosodate .faq-tab-button-list__item__link {
		color: var(--main-color-jigyo02);
	}
	.faq-tab-button-list__item.--kosodate .faq-tab-button-list__item__link[aria-selected="true"] {
		background-color: var(--bg-sub-color-jigyo02);
	}
	.faq-tab-button-list__item.--kosodate
		.faq-tab-button-list__item__link:before {
		border-color: var(--main-color-jigyo02);
	}
	.faq-tab-button-list__item.--mado .faq-tab-button-list__item__link {
		color: var(--main-color-jigyo03);
	}
	.faq-tab-button-list__item.--mado .faq-tab-button-list__item__link[aria-selected="true"] {
		background-color: var(--bg-sub-color-jigyo03);
	}
	.faq-tab-button-list__item.--mado .faq-tab-button-list__item__link:before {
		border-color: var(--main-color-jigyo03);
	}
	.faq-tab-button-list__item.--kyuto .faq-tab-button-list__item__link {
		color: var(--main-color-jigyo04);
	}
	.faq-tab-button-list__item.--kyuto .faq-tab-button-list__item__link[aria-selected="true"] {
		background-color: var(--bg-sub-color-jigyo04);
	}
	.faq-tab-button-list__item.--kyuto .faq-tab-button-list__item__link:before {
		border-color: var(--main-color-jigyo04);
	}
	.faq-tab-button-list__item.--jaws .faq-tab-button-list__item__link {
		color: var(--main-color-jigyo05);
	}
	.faq-tab-button-list__item.--jaws .faq-tab-button-list__item__link[aria-selected="true"] {
		background-color: var(--bg-sub-color-jigyo05);
	}
	.faq-tab-button-list__item.--jaws .faq-tab-button-list__item__link:before {
		border-color: var(--main-color-jigyo05);
	}

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

	.faq-tab-button-list__item__link[aria-selected="true"] {
		pointer-events: none;
	}
	.faq-tab-button-list__item__link[aria-selected="true"]:before {
		display: block;
	}
	.faq-tab-button-list__item__link[aria-selected="true"]:after {
		border-bottom-color: var(--color-white);
	}
	/* -----------------------------
    Tabータブコンテンツ切り替え
  ----------------------------- */
	.faq-list-box {
		display: none;
	}
	.faq-list-box[aria-hidden="false"] {
		display: block;
	}
}
@media all and (max-width: 767px), print {
	/* -----------------------------
    Tabータブ切り替え
  ----------------------------- */
	.faq-tab-body:has(.faq-tab-button-list) {
		position: relative;
	}
	.faq-tab-body:has(.faq-tab-button-list):before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
	}
	.l-container .faq-tab-body:has(.faq-tab-button-list):before {
		margin: 0 calc(-15 / var(--font-size) * 1rem);
	}
	.faq-tab-button-list {
		position: relative;
		height: calc(40 / var(--font-size) * 1rem);
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
		overflow-x: scroll;
		gap: 0 calc(4 / var(--font-size) * 1rem);
	}
	.l-container .faq-tab-button-list {
		margin: 0 calc(-15 / var(--font-size) * 1rem);
		padding: 0 calc(15 / var(--font-size) * 1rem);
	}
	.faq-tab-button-list__item {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		flex-shrink: 0;
		flex-grow: 1;
		position: relative;
	}
	.faq-tab-button-list__item:before {
		content: "";
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		margin: 0 auto;
		border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
		z-index: 1;
	}
	.faq-tab-button-list__item__link.--disable {
		background-color: var(--color-gray_300);
		color: var(--color-gray_600) !important;
		pointer-events: none;
	}
	.faq-tab-button-list__item__link {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(40 / var(--font-size) * 1rem);
		padding: 0 calc(8 / var(--font-size) * 1rem);
		position: relative;
		border-radius: calc(5 / var(--font-size) * 1rem) calc(5 / var(--font-size) * 1rem) 0 0;
		overflow: hidden;
		font-size: calc(var(--text-size-xs) / var(--font-size) * 1rem);
		font-weight: 700;
		background-color: var(--color-white);
	}
	.faq-tab-button-list__item__link:before {
		content: "";
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0 auto;
		border-bottom: calc(4 / var(--font-size) * 1rem) solid var(--main-color);
		display: none;
		z-index: 2;
	}
	.faq-tab-button-list__item__link:after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border: calc(1 / var(--font-size) * 1rem) solid var(--color-gray_300);
		border-radius: calc(5 / var(--font-size) * 1rem) calc(5 / var(--font-size) * 1rem) 0 0;
		z-index: 1;
	}

	.faq-tab-button-list__item.--portal .faq-tab-button-list__item__link {
		color: var(--main-color-jigyo01);
	}
	.faq-tab-button-list__item.--portal .faq-tab-button-list__item__link[aria-selected="true"] {
		background-color: var(--bg-sub-color-jigyo01);
	}
	.faq-tab-button-list__item.--portal .faq-tab-button-list__item__link:before {
		border-color: var(--main-color-jigyo01);
	}
	.faq-tab-button-list__item.--kosodate .faq-tab-button-list__item__link {
		color: var(--main-color-jigyo02);
	}
	.faq-tab-button-list__item.--kosodate .faq-tab-button-list__item__link[aria-selected="true"] {
		background-color: var(--bg-sub-color-jigyo02);
	}
	.faq-tab-button-list__item.--kosodate
		.faq-tab-button-list__item__link:before {
		border-color: var(--main-color-jigyo02);
	}
	.faq-tab-button-list__item.--mado .faq-tab-button-list__item__link {
		color: var(--main-color-jigyo03);
	}
	.faq-tab-button-list__item.--mado .faq-tab-button-list__item__link[aria-selected="true"] {
		background-color: var(--bg-sub-color-jigyo03);
	}
	.faq-tab-button-list__item.--mado .faq-tab-button-list__item__link:before {
		border-color: var(--main-color-jigyo03);
	}
	.faq-tab-button-list__item.--kyuto .faq-tab-button-list__item__link {
		color: var(--main-color-jigyo04);
	}
	.faq-tab-button-list__item.--kyuto .faq-tab-button-list__item__link[aria-selected="true"] {
		background-color: var(--bg-sub-color-jigyo04);
	}
	.faq-tab-button-list__item.--kyuto .faq-tab-button-list__item__link:before {
		border-color: var(--main-color-jigyo04);
	}
	.faq-tab-button-list__item.--jaws .faq-tab-button-list__item__link {
		color: var(--main-color-jigyo05);
	}
	.faq-tab-button-list__item.--jaws .faq-tab-button-list__item__link[aria-selected="true"] {
		background-color: var(--bg-sub-color-jigyo05);
	}
	.faq-tab-button-list__item.--jaws .faq-tab-button-list__item__link:before {
		border-color: var(--main-color-jigyo05);
	}

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

	.faq-tab-button-list__item__link[aria-selected="true"] {
		pointer-events: none;
	}
	.faq-tab-button-list__item__link[aria-selected="true"]:before {
		display: block;
	}
	.faq-tab-button-list__item__link[aria-selected="true"]:after {
		border-bottom-color: var(--color-white);
	}
	/* -----------------------------
    Tabータブコンテンツ切り替え
  ----------------------------- */
	.faq-list-box {
		display: none;
	}
	.faq-list-box[aria-hidden="false"] {
		display: block;
	}
}

/* ==========================================================================
  faq-list
========================================================================== */

@media all and (min-width: 768px), print {
	.faq-list {
		padding-top: calc(24 / var(--font-size) * 1rem);
		margin-top: calc(-16 / var(--font-size) * 1rem);
	}
	.faq-result + .faq-list {
		padding-top: calc(8 / var(--font-size) * 1rem);
	}

	.faq-list__item {
		border-radius: calc(10 / var(--font-size) * 1rem);
		background-color: var(--sub-color-jigyo01-03);
		padding: calc(27 / var(--font-size) * 1rem)
			calc(24 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
		position: relative;
		margin-top: calc(16 / var(--font-size) * 1rem);
	}
	.faq-list-box {
		--jigyo-color: var(--main-color);
    --jigyo-accent-color: var(--main-accent-color);
	}
	.faq-list-box.--kosodate {
		--jigyo-color: var(--main-color-jigyo02);
    --jigyo-accent-color: var(--accent-color-jigyo02);
	}
	.faq-list-box.--mado {
		--jigyo-color: var(--main-color-jigyo03);
    --jigyo-accent-color: var(--accent-color-jigyo03);
	}
	.faq-list-box.--kyuto {
		--jigyo-color: var(--main-color-jigyo04);
    --jigyo-accent-color: var(--accent-color-jigyo04);
	}
	.faq-list-box.--jaws {
		--jigyo-color: var(--main-color-jigyo05);
    --jigyo-accent-color: var(--accent-color-jigyo05);
	}
	.faq-no-result-text {
		padding-top: 2rem;
	}

	.faq-list__item {
		transition: 0.3s ease;
	}
	.faq-list__item:hover {
		opacity: 0.7;
	}

	.faq-list-box.--kosodate .faq-list__item {
		background-color: var(--sub-color-jigyo02-03);
	}
	.faq-list-box.--mado .faq-list__item {
		background-color: var(--sub-color-jigyo03-03);
	}
	.faq-list-box.--kyuto .faq-list__item {
		background-color: var(--sub-color-jigyo04-03);
	}
	.faq-list-box.--jaws .faq-list__item {
		background-color: var(--sub-color-jigyo05-03);
	}

	.faq-list__contents {
		padding-left: calc(
			48 / var(--font-size) * 1rem + 24 / var(--font-size) * 1rem
		);
		position: relative;
	}

	.faq-list__contents__question {
		border-radius: 100%;
		width: calc(48 / var(--font-size) * 1rem);
		height: calc(48 / var(--font-size) * 1rem);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
	}
	.faq-list__contents__question:not(:has(img)) {
		text-align: center;
		font-size: calc(24 / var(--font-size) * 1rem);
		font-weight: 700;
		color: var(--color-white);
		line-height: 1;
		background-color: var(--jigyo-color);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		border: calc(2 / var(--font-size) * 1rem) solid var(--jigyo-color);
		width: calc(48 / var(--font-size) * 1rem);
		height: calc(48 / var(--font-size) * 1rem);
		padding-bottom: calc(3 / var(--font-size) * 1rem);
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.faq-list__contents__text {
		font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
		font-weight: 700;
		line-height: 1.6;
		letter-spacing: 0.025em;
	}

	.faq-list__link {
		padding-left: calc(27 / var(--font-size) * 1rem);
		font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
		font-weight: 700;
		color: var(--jigyo-color);
		display: block;
		position: relative;
	}

	/* .faq-list__link:before {
    content: "";
    border: calc(2 / var(--font-size) * 1rem) solid var(--jigyo-color);
    border-radius: 100%;
    display: block;
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(20 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(1 / var(--font-size) * 1rem);
    left: 0;
  }
  .faq-list__link:after {
    content: "";
    border: calc(2 / var(--font-size) * 1rem) solid var(--jigyo-color);
    border-left: 0;
    border-bottom: 0;
    width: calc(6 / var(--font-size) * 1rem);
    min-width: calc(6 / var(--font-size) * 1rem);
    height: calc(6 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(8 / var(--font-size) * 1rem);
    left: calc(6 / var(--font-size) * 1rem);
    transform: rotate(45deg);
  } */
}

@media all and (max-width: 767px), print {
	.faq-list {
		padding-top: calc(24 / var(--font-size) * 1rem);
		margin-top: calc(-16 / var(--font-size) * 1rem);
	}
	.faq-result + .faq-list {
		padding-top: calc(8 / var(--font-size) * 1rem);
	}
	.faq-list__item {
		border-radius: calc(10 / var(--font-size) * 1rem);
		background-color: var(--sub-color-jigyo01-03);
		padding: calc(16 / var(--font-size) * 1rem);
		position: relative;
		margin-top: calc(16 / var(--font-size) * 1rem);
	}
	.faq-list-box {
		--jigyo-color: var(--main-color);
    --jigyo-accent-color: var(--main-accent-color);
	}
	.faq-list-box.--kosodate {
		--jigyo-color: var(--main-color-jigyo02);
    --jigyo-accent-color: var(--accent-color-jigyo02);
	}
	.faq-list-box.--mado {
		--jigyo-color: var(--main-color-jigyo03);
    --jigyo-accent-color: var(--accent-color-jigyo03);
	}
	.faq-list-box.--kyuto {
		--jigyo-color: var(--main-color-jigyo04);
    --jigyo-accent-color: var(--accent-color-jigyo04);
	}
	.faq-list-box.--jaws {
		--jigyo-color: var(--main-color-jigyo05);
    --jigyo-accent-color: var(--accent-color-jigyo05);
	}
	.faq-no-result-text {
		padding-top: 2rem;
	}

	.faq-list__item {
		transition: 0.3s ease;
	}
	.faq-list__item:hover {
		opacity: 0.7;
	}

	.faq-list-box.--kosodate .faq-list__item {
		background-color: var(--sub-color-jigyo02-03);
	}
	.faq-list-box.--mado .faq-list__item {
		background-color: var(--sub-color-jigyo03-03);
	}
	.faq-list-box.--kyuto .faq-list__item {
		background-color: var(--sub-color-jigyo04-03);
	}
	.faq-list-box.--jaws .faq-list__item {
		background-color: var(--sub-color-jigyo05-03);
	}

	.faq-list__contents {
		padding-left: calc(
			36 / var(--font-size) * 1rem + 12 / var(--font-size) * 1rem
		);
		position: relative;
	}

	.faq-list__contents__question {
		border-radius: 100%;
		width: calc(36 / var(--font-size) * 1rem);
		height: calc(36 / var(--font-size) * 1rem);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
	}
	.faq-list__contents__question:not(:has(img)) {
		text-align: center;
		font-size: calc(16 / var(--font-size) * 1rem);
		font-weight: 700;
		color:var(--color-white);
		line-height: 1;
		background-color: var(--jigyo-color);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		border: calc(2 / var(--font-size) * 1rem) solid var(--jigyo-color);
		width: calc(32 / var(--font-size) * 1rem);
		height: calc(32 / var(--font-size) * 1rem);
		padding-bottom: calc(3 / var(--font-size) * 1rem);
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.faq-list__contents__text {
		font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
		font-weight: 700;
		line-height: 1.6;
		letter-spacing: 0.025em;
	}

	.faq-list__link {
		padding-left: calc(27 / var(--font-size) * 1rem);
		font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
		font-weight: 700;
		color: var(--jigyo-color);
		display: inline-block;
		vertical-align: top;
		position: relative;
	}

	.faq-list__link:before {
		content: "";
		border: calc(2 / var(--font-size) * 1rem) solid var(--jigyo-color);
		border-radius: 100%;
		display: block;
		width: calc(20 / var(--font-size) * 1rem);
		height: calc(20 / var(--font-size) * 1rem);
		position: absolute;
		top: calc(1 / var(--font-size) * 1rem);
		left: 0;
	}
	.faq-list__link:after {
		content: "";
		border: calc(2 / var(--font-size) * 1rem) solid var(--jigyo-color);
		border-left: 0;
		border-bottom: 0;
		width: calc(6 / var(--font-size) * 1rem);
		min-width: calc(6 / var(--font-size) * 1rem);
		height: calc(6 / var(--font-size) * 1rem);
		position: absolute;
		top: calc(8 / var(--font-size) * 1rem);
		left: calc(6 / var(--font-size) * 1rem);
		transform: rotate(45deg);
	}
}

/* ==========================================================================
  no-list
========================================================================== */

@media all and (min-width: 768px), print {
	.faq-tab-button-list__item.--portal.--inactive
		.faq-tab-button-list__item__link[aria-selected="true"] {
		color: var(--main-color-jigyo01);
	}
	.faq-result {
		margin-top: calc(32 / var(--font-size) * 1rem);
	}
	.faq-result__text {
		font-size: calc(18 / var(--font-size) * 1rem);
	}
	.faq-no-list {
		padding-top: calc(50 / var(--font-size) * 1rem);
		padding-bottom: calc(100 / var(--font-size) * 1rem);
	}
	.faq-no-list__contents {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.faq-no-list__contents__ico {
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(62 / var(--font-size) * 1rem);
		height: calc(62 / var(--font-size) * 1rem);
		border-radius: calc(62 / var(--font-size) * 1rem);
		background: var(--color-gray_100);
	}
	.faq-no-list__contents__ico svg {
		width: calc(24 / var(--font-size) * 1rem);
		height: calc(24 / var(--font-size) * 1rem);
		fill: var(--color-gray_400);
	}
	.faq-no-list__contents__text {
		margin-top: calc(20 / var(--font-size) * 1rem);
		text-align: center;
		line-height: 1.8;
		font-size: calc(16 / var(--font-size) * 1rem);
		color: var(--color-gray_600);
	}
	.faq-no-list__contents__text:first-child {
		margin-top: 0;
	}
	.faq-no-list__contents__text em {
		font-size: calc(20 / 16 * 100%);
		font-weight: bold;
		color: var(--color-gray_600);
	}
}

@media all and (max-width: 767px), print {
	.faq-tab-button-list__item.--portal.--inactive
		.faq-tab-button-list__item__link[aria-selected="true"] {
		color: var(--main-color-jigyo01);
	}
	.faq-tab-button-list__item.--inactive
		.faq-tab-button-list__item__link::before {
		content: none;
	}
	.faq-result {
		margin-top: calc(32 / var(--font-size) * 1rem);
	}
	.faq-result__text {
		font-size: calc(18 / var(--font-size) * 1rem);
	}
	.faq-no-list {
		padding-top: calc(50 / var(--font-size) * 1rem);
		padding-bottom: calc(100 / var(--font-size) * 1rem);
	}
	.faq-no-list__contents {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.faq-no-list__contents__ico {
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(62 / var(--font-size) * 1rem);
		height: calc(62 / var(--font-size) * 1rem);
		border-radius: calc(62 / var(--font-size) * 1rem);
		background: var(--color-gray_100);
	}
	.faq-no-list__contents__ico svg {
		width: calc(24 / var(--font-size) * 1rem);
		height: calc(24 / var(--font-size) * 1rem);
		fill: var(--color-gray_400);
	}
	.faq-no-list__contents__text {
		margin-top: calc(20 / var(--font-size) * 1rem);
		text-align: center;
		line-height: 1.8;
		font-size: calc(16 / var(--font-size) * 1rem);
		color: var(--color-gray_600);
	}
	.faq-no-list__contents__text:first-child {
		margin-top: 0;
	}
	.faq-no-list__contents__text em {
		font-size: calc(20 / 16 * 100%);
		font-weight: bold;
		color: var(--color-gray_600);
	}
}
