@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$color-pink: #ed848b;
$color-blue: #007ac5;
$color-yellow: #fff2cb;
$color-orange: #f8ad4e;

//inner---------------------------
.inner {
	margin-top: 4rem;
	margin-bottom: 4rem;
	width: 87%;
	@include sm {
		margin-top: 2rem;
		margin-bottom: 2rem;
		width: 90%;
	}
}
.accordion-contents .inner {
	margin-top: 0;
	margin-bottom: 0;
	width: auto;
	@include sm {
		margin-top: 0;
		margin-bottom: 0;
		width: auto;
	}
}

//kiwi-maru---------------------------
.kiwi-maru{
	font-family: 'Kaisei Decol', serif;
	font-family: 'Kiwi Maru', serif;
}


//under-topimg---------------------------
.under-topimg{
	background: url("../img/under-title-img.png"),url("../img/under-title-back.png");
	background-repeat: no-repeat,repeat-x;
	background-position: bottom right,center center;
	background-size: contain,auto;
	height: 240px;
	display: flex;
    align-items: center;
	@include xs {
		background-size: 180%,auto;
	}
	h1{
		display: inline-block;
		background: #ffffff;
		font-size: 3rem;
		font-size: 30px;
		color: #D85775;
		padding: 0.8rem 1rem 1rem 1rem;
		box-shadow: 3px 3px 0 0 #c1c1c1;
		@include xs {
			text-align: center;
		}
	}
}




//breadcrumbs---------------------------
#breadcrumbs {
	li {
		display: inline-block;
		a{
			color: #D85775;
		}
		&:first-child {
			a {
				color: #333333;
				&::after {
					font-family: "Font Awesome 5 Free";
					content: '\f105';
					font-weight: 900;
					padding-left: 1rem;
					padding-right: 1rem;
				}
			}
		}

	}
}
//page-intro---------------------------
#page-intro {
	#page-nav {
		ul {
			background-color: $color-orange;
			padding-left: 1em;
			display: flex;
			align-items: center;
			align-content: center;
			flex-wrap: wrap;
			padding-top: 0.6rem;
			padding-bottom: 0.6rem;
			li {
				display: inline-block;
				vertical-align: middle;
				padding-right: 2em;
				a {
					color: #ffffff;			
					&::before {
						font-family: "Font Awesome 5 Free";
						content: "\f13a";
						font-weight: 900;
						padding-right: 5px;
						}
					&:hover {
						color: #ffe6a1;
					}

				}
			}
		}
	}
	P {
	text-align: justify;
	padding: 1rem;
	}
}

//共通見出し・枠・余白・アコーディオンメニュー-----------------------------------
.headline {
	font-size: 21px;
	font-size: 2.1rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	color: $color-blue;
	background-color: #fff;
	border: solid 1px $color-blue;
	margin-bottom: 2rem;
//	margin-top: 3rem;
	&::before {
		background-color: $color-blue;
		font-family: "Font Awesome 5 Free";
		content: "\f4ba";
		font-weight: 900;
		padding: 10px;
		color: #ffe6a1;
		margin: 0 0.6em 0 0;
		display: inline-block;
	}
}


.ac-menu{
	margin-bottom: 1rem;
	&:last-child {
		margin-bottom: 4rem;
	}
	.accordion-contents{ display: none; }
	.accordion-title{
		background-color: $color-pink;
		color: #FFFFFF;
		font-size: 21px;
		font-size: 2.1rem;
		font-weight: 500;
		letter-spacing: 0.1rem;
		border-radius: 50px;
		padding: 1rem 2rem;
		z-index: 1;
		position: relative;
		@include xs {
			font-size: 18px;
			font-size: 1.8rem;
			letter-spacing: 0rem;
		}
		&:before{/* 閉じている時 */
			content: "＋";
			position: absolute;
			right: 30px;
			font-weight: bold;
			@include xs {
				right: 15px;
			}
		}
	}
	.accordion-title.active::before{/* 開いている時 */
		content: "－";
		font-weight: bold;
	}
	.accordion-contents{
		background: #ffffff;
		border: 1px solid $color-pink;
		padding: 5rem 3rem 0rem 3rem;
		margin-top: -3rem;
		@include xs {
			padding: 5rem 2rem 0rem;
		}
		h3{
			display: block;
			color: $color-pink;
			font-size: 20px;
			font-size: 2rem;
			font-weight: 500;
			border-bottom: 1px dotted $color-pink;
			padding-bottom: 1rem;
			margin-bottom: 1rem;
		}
		section{
			h4{
				font-size: 18px;
				font-size: 1.8rem;
				color: $color-blue;
				font-weight: 500;
				&:before{
					font-family: "Font Awesome 5 Free";
					content: "\f138";
					font-weight: 900;
					padding: 10px 5px 0px 10px;
					color: $color-blue;
					display: inline-block;
				}
			}
			table{
				width: 90%;
				margin: auto;
				margin-bottom: 3rem;
				margin-top: 1rem;
				tr{
					border-top: 1px dotted #979797;
					th{
						font-weight: normal;
						background: #FFF2D0;
						padding: 1rem;
						text-align: center;
						@include xs {
							width: 100%;
							display: block;
						}
					}
					td{
						padding: 1rem;
						line-height: 1.5em;
						@include xs {
							width: 100%;
							display: block;
						}
						span{
							font-size: 18px;
							font-size: 1.8rem;
							font-weight: 500;
							margin-left: 1em;
						}
					}
				}
				tr:last-child{
					border-bottom:  1px dotted #979797;
				}
			}
		}
	}
}


.pdf-link{
	li{
		a{
			display: flex;
			align-items: center;
			background: #ffffff;
			border: 1px solid #CACACA;
			color: inherit;
			margin-bottom: 1rem;
			&:before{
				font-family: "Font Awesome 5 Free";
				content: "\f1c1";
				font-weight: 900;
				font-size: 27px;
				font-size: 2.7rem;
				padding: 10px 20px;
				color: #BF272D;
				display: inline-block;
				@include xs {
					padding: 10px 15px;
				}
			}
			&:hover{
				background: #E4E4E4;
			}
		}
	}
	li:nth-child(2n+1) a{
		margin-right: -1rem;
	}
	li:nth-child(2n) a{
		margin-left: -1rem;
	}
}


//アイコンつき中央揃えのリンク------------------------------------------
.links {
	li {
		&:last-child {
			margin-bottom: 3rem;
		}
		a {
			display: flex;
			align-items: center;
			background: #ffffff;
			border: 1px solid #CACACA;
			color: inherit;
			margin: auto;
			margin-bottom: 1rem;
			width: 50%;
			@include lg {
				width: 60%;
			}
			@include sm {
				width: 70%;
			}
			@include xs {
				width: 100%;
			}
			&::before {
				font-size: 27px;
				font-size: 2.7rem;
				padding: 10px 20px;
				display: inline-block;
			}
			&::after {
				font-size: 27px;
				font-size: 2.7rem;
				padding: 10px 20px;
				display: inline-block;
			}
			&:hover{
				background: #E4E4E4;
			}
		}
	}
//PDFアイコン------
	.pdf-icon {
		&::before {
			font-family: "Font Awesome 5 Free";
			content: "\f1c1";
			font-weight: 900;
			color: #BF272D;
		}
	}
//外部リンクアイコン------
	.link-icon {
		justify-content: center;
			&::after {
				font-family: "Font Awesome 5 Free";
				content: "\f138";
				font-weight: 600;
				color: $color-pink;
				font-size: 2rem;
				padding: 10px 0px 10px 10px;
			}
	}
}

//「申請書等についてはこちら」のリンクアイコン------
.links .paper-icon {
	justify-content: center;
	&::before {
		font-family: "Font Awesome 5 Free";
		content: "\f0c5";
		font-weight: 600;
		font-size: 2rem;
		color: #808080;
		padding: 10px 10px 10px 0px;
	}
	&::after {
		font-family: "Font Awesome 5 Free";
		content: "\f138";
		font-weight: 600;
		color: $color-pink;
		font-size: 2rem;
		padding: 10px 0px 10px 10px;
	}
	@include sm {
		width: 70%;
	}
	@include xs {
		width: 100%;
	}
}