@charset "UTF-8";
@import 'variable';
/* ==================================

 よくあるご質問

================================== */
#page_faq{
		
	.sec_faq{
		margin-top: 95px;
		.page_in_link{
			@media(min-width: $bp_min){
				display: flex;
				justify-content: center;
			}
			li{
				@media(min-width: $bp_min){
					max-width: 240px;
					width: 100%;
					&:not(:first-child){
						margin-left: 16px;
					}
				}
				@media(max-width: $bp_max){
					width: 90%;
					margin: 0 auto;
					&:nth-child(n + 2){
						margin-top: 10px;
					}
				}
				a{
					border: 1px solid;
					border-radius: 5px;
					padding: 15px 0;
					text-align: center;
					font-size: 18px;
					font-weight: bold;
				}
			}
		}
		.faq_list{
			max-width: 880px;
			margin: 100px auto 0;
			@media(max-width: $bp_max){
				margin-top: 40px;
			}
			>li{
				&:nth-child(n + 2){
					margin-top: 95px;
				}
				.list_title{
					font-size: 23px;
					@media(max-width: $bp_max){
						padding: 0 17px;
					}
				}
				dl{
					margin-top: 25px;
					@media(max-width: $bp_max){
						margin-top: 35px;
					}
					dt{
						font-size: 17px;
						font-weight: bold;
						border-radius: 20px;
						padding: 28px 49px;
						position: relative;
						background-size: 9px 7px;
						background-repeat: no-repeat;
						background-position: right 27px center;
						cursor: pointer;
						@media(max-width: $bp_max){
							font-size: 15px;
							padding: 18px 54px 18px 15px;
							min-height: 80px;
							display: flex;
							align-items: center;
						}
						&:nth-child(n + 2){
							margin-top: 10px;
						}
						span{
							display: block;
							padding-left: 23px;
							text-indent: -23px;
							&:before{
								content: 'Q.';
								padding-right: 5px;
							}
						}
					}
					dd{
						display: none;
						line-height: 1.8em;
						text-align: justify;
						letter-spacing: 0.07em;
						max-width: 820px;
						margin-left: 46px;
						padding: 30px 30px 20px 30px;
						text-indent: -28px;
						@media(max-width: $bp_max){
							line-height: 1.6em;
							margin-left: 11px;
						}
						a{
							display: inline;
							text-decoration: underline;
						}
						&:before{
							content: 'A.';
							font-size: 17px;
							font-weight: bold;
							padding-right: 10px;
						}
						.photo_list{
							margin-top: 22px;
							@media(min-width: $bp_min){
								display: flex;
								justify-content: space-between;
							}
							li{
								width: calc((100% - 23px)/2);
								@media(max-width: $bp_max){
									width: 100%;
									&:nth-child(n + 2){
										margin-top: 23px;
									}
								}
								img{
									border-radius: 38px;
									@media(max-width: $bp_max){
										border-radius: 20px;
									}
								}
								.text{
									text-align: right;
									margin-top: 5px;
								}
							}
						}
					}
				}
				//幼稚園・保育園共通
				&.list_com{
					dt{
						background-color: $pink_thin_color;
						background-image: url("../img/common/arrow_pink_bottom.svg");
						&.open{
							background-image: url("../img/common/arrow_pink_top.svg");
						}
					}
					dd:before{ color: $pink_color; }
				}
				//八木ヶ谷幼稚園
				&.list_kinder{
					dt{
						background-color: $main_thin_color;
						background-image: url("../img/common/arrow_green_bottom.svg");
						&.open{
							background-image: url("../img/common/arrow_green_top.svg");
						}
					}
					dd:before{ color: $main_color; }
				}
				//やぎがやなかよし保育園
				&.list_nursery{
					dt{
						background-color: $blue_thin_color;
						background-image: url("../img/common/arrow_blue_bottom.svg");
						&.open{
							background-image: url("../img/common/arrow_blue_top.svg");
						}
					}
					dd:before{ color: $blue_color; }
				}
			}
		}
	}
}