@charset "UTF-8";
/* =========================================================
o-parts -  style
============================================================*/

/* 通知
--------------------------------------------------------- */
.o-partsNotification {
    position: fixed;
    top: var(--gap02);
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;

    display: flex;
    align-items: center;
    gap: var(--gap01);
    padding: var(--gap01) var(--gap01);
    background-color: var(--base-color02);
    border-radius: var(--radius01);

    max-width: clamp(90%,5vw,600px);
    width: fit-content;
    box-shadow: 0 0 12px var(--shadow-color01);
    @media screen and (max-width:768px){ 
        padding: var(--gap01) var(--gap01);
    }

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        margin: auto;
        height: 2px;
        width: 100%;
    }
}
.o-partsNotification__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.o-partsNotification {
    opacity: 0;
    /* //成功 */
    &.__succeed {
        background-color: #e6edf7;
        .o-partsNotification__title {
            &::before {
                content: "\e86c";
                font-family: var(--googleicon);
                color: var(--accent-color01);
            }
        }
        &::after {
            background-color: var(--accent-color01);
        }
    }

    /* 失敗 */
    &.__failed {
        background-color: #f7e8e5;
        .o-partsNotification__title {
            &::before {
                content: "\e000";
                font-family: var(--googleicon);
                color: var(--accent-color03);
            }
        }
        &::after {
            background-color: var(--accent-color03);
        }
    }
    /* アニメーション */
    &.__active {
        z-index: 10;
        animation-duration: 4s;
        animation-name: notificationShowHide01;
        animation-fill-mode:forwards;
        animation-timing-function: var(--timing02);
        &::after {
            animation-duration: 5s;
            animation-name: notificationBar01;
            animation-fill-mode:forwards;
            animation-timing-function: var(--timing02);
        }
    }
}


/* FAQ
--------------------------------------------------------- */
.o-partsFaq {
	display: flex;
	flex-direction: column;
}
.o-partsFaq__item {
	border-top: 1px solid var(--border-color03);
	border-bottom: 1px solid var(--border-color03);
	display: flex;
	flex-direction: column;
	&:first-child {
		border-top: none;
	}
	&:last-child {
		border-top: none;
	}
}
.o-partsFaq__title {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--gap01);
	padding: var(--gap05) var(--gap07) var(--gap05) 0;
	font-size: var(--fs-postp);
	font-weight: 700;
	cursor: pointer;

	&::before {
		content: "Q.";
		font-size: var(--fs-large);
		font-weight: 900;
		font-family: var(--font-outfit);
		color: var(--accent-color02);
	}
	&::after {
		content: "\e313";
		font-family: var(--googleicon);
		font-size: var(--fs-title);
		transition: transform .3s var(--timing02);

		width: 40px;
		height: 40px;

		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;

		display: flex;
		justify-content: center;
		align-items: center;

		background-color: var(--base-color02);
		color: var(--accent-color02); 
		transition: background-color .3s var(--timing02), filter .3s var(--timing02) ,color .3s var(--timing02), transform .3s var(--timing02), box-shadow .3s var(--timing02);
	}
	&:hover {
		&::after {
			color: var(--text-color04);
			background-color: var(--base-color01);
			filter: brightness(1.2);
			box-shadow: 0 0 12px var(--shadow-color01);
		}
	}
	&.is-active {
		&::after {
			transform: rotate(180deg);
			background-color: var(--base-color01);
			color: var(--text-color04);
		}
	}
}

.o-partsFaq__answer {
	padding: 0 var(--gap04);
	padding-left: 80px;
	background-color: var(--base-color02);

	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(-10px);
	transition: max-height 0.4s var(--timing02), opacity 0.3s var(--timing02), transform 0.3s var(--timing02), padding 0.3s var(--timing02);

	@media (max-width: 591px) {
		padding-left: 50px;
	}

	&.is-active {
		max-height: 1000px;
		opacity: 1;
		transform: translateY(0);
		padding: var(--gap05) var(--gap04);
		padding-left: 80px;
		@media (max-width: 591px) {
			padding-left: 50px; 
		}
	}

	p {
		margin-bottom: var(--gap00);
	}
}
.o-partsFaq__answerTitle {
	font-size: var(--fs-postp);
	font-weight: 700;
	line-height: 1.3;
    display: flex;
    gap: 5px;
	&::before {
		content: "A.";
		font-size: var(--fs-large);
		font-weight: 900;
		font-family: var(--font-outfit);
		color: var(--accent-color02);
		margin-left: -30px;
		@media (max-width: 591px) {
			margin-left: -30px;
		}
	}
}