@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;


//全体-----------------------------------
.headline {
	margin-top: 0rem;
	&::before {
		content: "\f086";
	}
}

#guardianship,#independence-support,#supportcenter {
	margin-bottom: 4rem;
}

//.ac-menu {
//	margin-top: 2rem;
//	margin-bottom: 0rem;
//	@include sm {
//		margin-top: 1.3rem;
//	}
//	&:last-child {
//		margin-bottom: 4rem;
//	}
//}

.links {
	margin-top: 2rem;
	li {
		a {
			@include lg {
				width: 50%;
			}
			@include sm {
				width: 70%;
			}
			@include xs {
				width: 100%;
			}
		}
	}
}

h3 {
	margin-top: 3rem;
}

p {
	text-align: justify;
}

//お問い合わせ
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;
				background: #ffffff;
				@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;
		}
	}
	.ac-menu .accordion-contents section .contact-table,.contact-table{
		width: 80%;
		@include sm {
			width: 90%;
		}
		tr{
			th{
				width: 55%;
				text-align: left;
				text-justify:inherit;
				text-align-last: inherit;
				text-justify:inherit;
				padding-right: 4rem;
				padding-left: 4rem;
				@include sm {
					width: 50%;
				}
				@include xs {
					width: 100%;
					display: block;
					text-align: center;
					padding-right: 1rem;
					padding-left: 1rem;
				}
			}
			td{
				text-align: center;
				@include xs {
					width: 100%;
					display: block;
					text-align: center;
				}
			}
		}
	}
}



//advocacy　権利擁護センター-----------------------------------
#advocacy {
	.inner {
		margin-bottom: 3rem;
	}
	.links {
		li {
			a {
				width: 335px;
				@include xs {
					width: 100%;
				}
			}
		}
	}
	#law-conference {
		.accordion-title {
			@include sm {
				font-size: 18px;
				font-size: 1.8rem;
			}
			&::before {
				@include xs {
					top: 18px;
				}
			}
		}
		.links {
			li {
				a {
					@include xs {
						font-size: 13px;
						font-size: 1.3rem;
					}
				}
			}
		}
		img {
			margin-top: 0.5rem;
			height: 160px;
		}
		
	}
	#lecture {
		.accordion-title {
			&::before {
				@include xs {
					top: 18px;	
				}
			}
		}
		.links {
			li {
				a {
					width: 50%;
					@include lg {
						width: 60%;
					}
					@include sm {
						width: 77%;
					}
					@include xs {
						width: 100%;
					}
				}
				&:nth-child(2) {
					@include xs {
						font-size: 12px;
						font-size: 1.2rem;
					}
				}
			}
		}
		.contact-table {
			tr th {
				@include lg {
					width: 52%;
					padding-right: 3rem;
				}
				@include sm {
					width: 42%;
					padding-left: 2rem;
					padding-right: 2rem;
				}
				@include xs {
					width: 100%;
					display: block;
					text-align-last: inherit;
				}
			}
		}
	}
}


//guardianship　法人後見事業-----------------------------------
#guardianship {
	.frame {
		background-color: #FFFFFF;
		border: solid 1px $color-pink;
	}
	.inner {
		width: 90%;
		margin: auto;
		padding-top: 2rem;
		@include sm {
			padding-top: 2rem;
		}
		@include xs {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		}
	}
	.flow {
		display: inline-block;
		position: relative;
		left: 2em;
//		@include lg {
//			display: revert;
//			position: revert;
//			left: revert;
//		}
		@include xs {
			left: 0.7em;
		}
		dl {
			&:not(:last-child)::after {
				font-family: "Font Awesome 5 Free";
				content: "\f0d7";
				font-weight: 900;
				color: $color-pink;
				font-size: 35px;
				font-size: 3.5rem;
				position: relative;
				top: 1px;
				left: 20%;
			}
			dt {
				font-size: 20px;
				font-size: 2rem;
				color: $color-pink;
				margin-bottom: 0.5rem;
				display: inline;
				background: linear-gradient(transparent 70%, $color-yellow 30%);
			}
			dd {
				margin-bottom: 1rem;
			}
		}
	}
	p {
		span {
		font-weight: bold;
		border-bottom: solid 1px #4d4d4d;
		display: inline;
		}
	}
	.contact-table {
		tr th {
			@include lg {
				width: 51%;
				padding-right: 2rem;
			}
			@include sm {
				width: 48%;
				padding-right: 1rem;
				padding-left: 2rem;
			}
			@include xs {
				width: 100%;
				display: block;
				text-align-last: inherit;
			}
		}
	}
}
//independence-support　日常生活自立支援事業--------------------
#independence-support {
	p {
		margin-bottom: 0rem;
	}
	span {
		font-weight: bold;
		border-bottom: solid 1px #4d4d4d;
		display: inline;
	}
}
//supportcenter　生活あんしんサポートセンター--------------------
#supportcenter {
	.headline {
		font-size: 20px;
		font-size: 2rem;
	}
	.frame {
		background-color: #FFFFFF;
		border: solid 1px $color-pink;
	}
	.inner {
		width: 90%;
		margin: auto;
		padding-top: 2rem;
		@include sm {
			padding-top: 2rem;
		}
		@include xs {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		}
	}
	section {
		h3 {
			&:first-child {
			margin-top: 0rem;
			}
		}
	}
	.chart {
		img {
			height: revert;
			display: inline;
			width: 80%;
			margin-top: 1rem;
			margin-bottom: 2rem;
			@include sm {
				width: 100%;
			}
		}
	}
	.links {
		li {
			a {
				width: 410px;
				@include md {
					width: 370px;
				}
				@include xs {
					width: 100%;
					line-height: 2.5rem;
					height: 65px;
				}
			}
		}
	}
	.contact-table {
		width: 88%;
		@include sm {
			font-size: 1.5rem;
		}
		tr th {
			padding-right: 3rem;
			padding-left: 3rem;
			@include lg {
				padding-right: 2rem;
			}
			@include sm {
				padding-left: 2rem;
				width: 48%;
			}
			@include xs {
				width: 100%;
				display: block;
				text-align-last: inherit;
			}
		}
	}
}

//life-welfare　生活福祉資金----------------------------------
#life-welfare {
	p {
		margin-bottom: 0rem;
	}
	span {
		font-weight: bold;
		border-bottom: solid 1px #4d4d4d;
		display: inline;
	}
	.links {
		li {
			a {
				width: 335px;
			}
		}
	}
}

//loan　福祉資金貸付事業---------------------------------------
#loan {
	.links {
		li {
			a {
				width: 335px;
				@include xs {
					width: 100%;
				}
			}
		}
	}
	img {
		margin-top: 0.5rem;
		height: 172px;
	}
	.back-yellow {
		text-align: justify;
		background-color: $color-yellow;
		padding: 1em;
		margin-bottom: 1rem;
	}
	span {
		font-weight: bold;
	}
	.contact-table {
		tr th {
			@include lg {
				width: 47%;
				padding-right: 2rem;
			}
			@include xs {
				width: 100%;
				display: block;
				text-align-last: inherit;
			}
		}
	}
}

//address　相談支援課専用メールアドレス--------------------------
#address {
	border: solid 1px $color-blue;
	border-radius: 10px;
	background-color: #FFFFFF;
	padding-top: 2rem;
	padding-bottom: 2rem;
	.box {
		width: 90%;
		margin: auto;
		dl {
			dt {
				text-align: center;
				font-size: 23px;
				font-size: 2.3rem;
				font-weight: bold;
				margin: 2rem 0rem;
				color: #4d4d4d;
				&::before {
					color: $color-blue;
					font-family: "Font Awesome 5 Free";
					content: "\f0e0";
					padding: 10px;
					font-weight: 400;
				}
			}
			dd {
				width: 90%;
				margin: auto;
				span {
					font-weight: bold;
				}
			}
		}
	}
}