@charset "UTF-8";

/* ===================================
	File Name   : etc.css
	Description : Etc Contents CSS
	Editor      : Bface Nakamura
	Last Editor : Bface Nakamura
	
	Update Description :
	[2025/07/11] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Share Elements
	2. Section [faq]

====================================== */



/*===== 1. Redefinition =====*/


/*===== 2. Section [faq]  =====*/
#faq {
	.faq_q {
		display: flex;
  	justify-content: flex-start;
  	align-items: center;
		position: relative;
  	width: 100%;
  	padding: .5rem;
  	background: var(--GCd);
		&::before {
			position: absolute;
  		top: 50%;
  		right: 2rem;
  		width: 1rem;
  		height: 1rem;
  		border-right: .2rem solid var(--baseC);
  		border-bottom: .2rem solid var(--baseC);
  		transform: translateY(-50%) rotate(45deg);
  		transition: all .5s;
  		content: "";
		}
		&.active {
			&::before {
				transform: translateY(-50%) rotate(-135deg);
				transition: all .5s;
			}
			&::after {
				position:absolute;
				width: 5rem;
				height: 2rem;
				bottom: -2rem;
				left: 50%;
  			transform: translateX(-50%);
				background:linear-gradient(to top right, transparent 70%, var(--GCd) 50%) top left/ 50% 100% no-repeat,
				linear-gradient(to top left, transparent 70%, var(--GCd) 50%) top right / 50% 100% no-repeat;
  			content:"";
			}
			&:hover::before { top: 50%;}
			+ .ans_wrapper {
				max-height: 30rem;
        transition: max-height .5s ease;
			}
		}
		&:hover::before { top: calc(50%  + .5rem);}
		> span {
			display: flex;
  		align-items: center;
  		height: 100%;
  		padding: 1rem;
  		background: var(--baseC);
			font-weight: bold;
  		font-size: 3rem;
  		color: var(--GCd);
			+ p {
				margin: .5rem 5rem .5rem 1rem;
				color: var(--baseC);
  			font-size: 2.0rem;
  			font-weight: bold;
			}
		}
	}
	.ans_wrapper {
		overflow: hidden;
		max-height: 0;
		transition: max-height .5s ease;
	}
	.faq_ans {
  	display: flex;
  	justify-content: flex-start;
  	align-items: flex-start;
		position: relative;
  	width: 100%;
  	padding: 2rem .5rem .5rem;
		p { font-weight: bold;;}
		> span {
			display: inline-block;
  		padding: .5rem 1rem;
  		background: var(--dominantC);
  		font-size: 3.0rem;
  		font-weight: bold;
  		color: var(--baseC);
			+ div {
				width: 100%;
				margin-left: 1rem;
			}
		}
		a.textlink {margin: 0 .5rem;}
	}
}

@media (max-width: 768px) {
  #faq {
		.faq_q {
			padding: .5rem;
			&.active {
				&::after {
					width: 4rem;
					height: 2rem;
				}
			}
			&::before {    
				right: 1.5rem;
    		width: 1rem;
    		height: 1rem;
			}
			:hover::before { top: 50%;}
			> span {
				padding: .5rem 1rem;
				font-size: 2rem;
				+ p {
					margin: .5rem 4rem .5rem 1rem;
					font-size: 1.6rem;
				}
			}
		}
		.faq_ans {
			padding: 2rem 1rem 1rem;
			> span {
				padding: .5rem 1rem;
				font-size: 2rem;
				+ div { margin-left: 1rem;}
			}
		}
		dl {
			margin: 1rem 0;
		}
	} 
}