@charset "UTF-8";

#about main{
	background: url(/images/about/main.jpg);
	background-size: cover;
	background-position: center;
}

#about .inner .box{
	width: 100%;
	margin: 0 auto 5rem;
	padding: 0;
}
#about .inner #greeting h3{
	border-left: 6px solid var(--color02);
	font-size: var(--font24-30);
	line-height: 2.4rem;
	width: 100%;
	margin: 0 auto 2rem;
	padding: 0 0 0 3rem;
}
#about .inner #greeting h3:before{
	display: none;
}
#about .inner .box .boxwrap{
	display: flex;
	flex-wrap: wrap;
}
#about .inner #greeting .boxwrap picture{
	order: 2;
	width: 30%;
	padding: 0;
}
#about .inner #greeting .boxwrap p{
	line-height: 2.8rem;
}
#about .inner #greeting .boxwrap p.text1st{
	order: 1;
	width: 70%;
	padding: 0 2rem 0 0;
}
#about .inner #greeting .boxwrap p.text2nd{
	order: 3;
	width: 100%;
	margin: 1.5rem auto;
}
#about .inner #greeting .name{
	width: fit-content;
	margin: 2rem 0 0 auto;
}
#about .inner #greeting .name p{
	font-size: var(--font18-22);
	font-weight: 500;
	letter-spacing: 0.2rem;
}
#about .inner #greeting .name picture{
	display: flex;
	align-items: center;
}
#about .inner #greeting .name picture span{
	display: block;
	height: fit-content;
	padding: 0 10px 0 0;
}
#about .inner #greeting .name picture img{
	max-width: 180px;
}

#about .inner .box02 dl{
	border-bottom: 1px dotted var(--colorG);
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto 2rem;
	padding: 0 0 1.2rem;
}
#about .inner .box02A dl dt{
	font-weight: 500;
	width: 18%;
}
#about .inner .box02A dl dd{
	width: 82%;
}
#about .inner .box02A dl dd p.head{
	width: 100%;
	margin: 0 0 10px;
}
#about .inner .box02A dl dd p.sub{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	margin: 0 0 10px;
}
#about .inner .box02A dl dd p.sub b{
	background: var(--colorG);
	color: var(--colorW);
	font-size: var(--font-menu);
	font-weight: 400;
	text-align: center;
	min-width: 90px;
	margin: 0 10px 0 0;
	padding: 0;
}
#about .inner .box02B dl dt,
#about .inner .box02C dl dt{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5%;
}
#about .inner .box02C dl dt{
	align-items: flex-start;
}
#about .inner .box02B dl dd,
#about .inner .box02C dl dd{
	width: 95%;
}
#about .inner .box02B dl dt span,
#about .inner .box02C dl dt span{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color01);
	color: var(--colorW);
	width: 25px;
	height: 25px;
	position: relative;
}
#about .inner .box02B dl dt span:after,
#about .inner .box02C dl dt span:after{
	content: "";
	border: 0.5px solid var(--colorW);
	width: 22px;
	height: 22px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}
#about .inner .box03 .boxwrap{
	width: 100%;
	margin: 0 auto 5rem;
}
#about .inner .box03 .boxwrap h4 {
	border-bottom: 2px solid var(--color02);
	font-size: var(--font18-22);
	font-weight: 500;
	width: 100%;
	padding: 1rem 0 1rem 2rem;
	position: relative;
}
#about .inner .box03 .boxwrap h4:before{
	content:"";
	background: var(--color02);
	width: 15px;
	height: 15px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: var(--takasa01);
}
#about .inner .box03 .boxwrap picture{
	background: var(--color04);
	width: 100%;
	padding: 3rem 4rem;
}
#about .inner .box03 .boxwrap picture img{
	background: var(--colorW);
	display: block;
	padding: 4rem;
}
#about .inner .box03 .boxwrap dl{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
#about .inner .box03 .boxwrap dl dt{
	border-bottom: 1px dotted var(--colorL);
	width: 15%;
	padding: 2rem 2rem 1.5rem 0;
}
#about .inner .box03 .boxwrap dl dd{
	border-bottom: 1px dotted var(--colorL);
	width: 85%;
	padding: 2rem 2rem 1.5rem 0;
}
#about .inner .box03 .boxwrap dl dd.dd_line{
	display: flex;
	flex-wrap: wrap;
}
#about .inner .box03 .boxwrap dl dd.dd_line span{
	display: block;
	width: calc(100% / 3);
	margin: 0 0 10px;
	padding: 0 10px 0 0;
	white-space: nowrap;
}
#about .inner .box03 .boxwrap dl dd.dd_lineA span{
	width: calc(100% / 6);
}
#about .inner .box03 .boxwrap dl dd.dd_hyo ul{
	display: flex;
	flex-wrap: wrap;
}
#about .inner .box03 .boxwrap dl dd.dd_hyo ul li{
	padding: 10px 0;
}
#about .inner .box03 .boxwrap dl dd.dd_hyo ul li:nth-child(3n+1){
	width: 20%;
}
#about .inner .box03 .boxwrap dl dd.dd_hyo ul li:nth-child(3n+2){
	width: 45%;
}
#about .inner .box03 .boxwrap dl dd.dd_hyo ul li:nth-child(3n+3){
	width: 35%;
}
#about .inner .box03 .boxwrap dl dd table{
	border:  1px solid var(--colorL);
	width: 100%;
}
#about .inner .box03 .boxwrap dl dd table th{
	background: var(--color04);
	text-align: center;
	width: calc(100% / 3);
	padding: 10px 0;
}
#about .inner .box03 .boxwrap dl dd table th:not(.end){
	border-right: 1px solid var(--colorL);
}
#about .inner .box03 .boxwrap dl dd table td{
	border-top: 1px solid var(--colorL);
	text-align: center;
	padding: 10px 0;
}
#about .inner .box03 .boxwrap dl dd table td:not(.end){
	border-right: 1px solid var(--colorL);
}
#about .inner .box03 .boxwrap dl dd table td.iro{
	background: var(--color06);
}
#about .inner .box03 .boxwrap02 dl dt,
#about .inner .box03 .boxwrap02 dl dd{
	border-bottom: none;
}
#about .inner .box03 .boxwrap02 p{
	line-height: 2.4rem;
	width: 100%;
	margin: 1rem auto;
}
#about .inner .box03 .boxwrap02 p b{
	display: block;
	font-weight:normal
}
#about .inner .box03 .boxwrap .mapbox{
	background: var(--color04);
	width: 100%;
	margin: 0 auto;
	padding: 2rem 3rem;
}
#about .inner .box03 .boxwrap .mapbox iframe {
	width: 100%;
	min-height: 810px;
	margin: 0 auto;
}
#about .inner .box03 .boxwrap .mapbox p{
	width: fit-content;
	margin: 1rem 0 0 auto;
	padding: 0 0 0 30px;
	position: relative;
}
#about .inner .box03 .boxwrap .mapbox p:before{
	content:"";
	background: url(/images/icon_access.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 18px;
	height: 20px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: var(--takasa01);
}

#about .inner #activity.box .boxwrap,
#about .inner #proposal.box .boxwrap{
	display: block;
}
#about .inner #activity.box .boxwrap a,
#about .inner #proposal.box .boxwrap a{
	border-bottom: 1px solid var(--colorL);
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 1rem 3rem;
	position: relative;
}
#about .inner #activity.box .boxwrap a:hover,
#about .inner #proposal.box .boxwrap a:hover{
	text-decoration: underline;
}
#about .inner #activity.box .boxwrap a:nth-child(odd),
#about .inner #proposal.box .boxwrap a:nth-child(even){
	background: var(--colorW);
}
#about .inner #activity.box .boxwrap a:nth-child(even),
#about .inner #proposal.box .boxwrap a:nth-child(odd){
	background: var(--color07);
}

#about .inner #activity.box .boxwrap a[href$=".pdf"]::before,
#about .inner #proposal.box .boxwrap a[href$=".pdf"]::before {
    content: "";
	background: url(/images/icon_pdf.svg) no-repeat center / contain;
    width: 20px;
    height: 20px;
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: var(--takasa01);
}
#about .inner #activity.box .boxwrap a[href^="http://"]:not([href$=".pdf"])::before,
#about .inner #activity.box .boxwrap a[href^="https://"]:not([href$=".pdf"])::before,
#about .inner #proposal.box .boxwrap a[href^="http://"]:not([href$=".pdf"])::before,
#about .inner #proposal.box .boxwrap a[href^="https://"]:not([href$=".pdf"])::before {
    content: "";
	background: url(/images/icon_external.svg) no-repeat center / contain;
    width: 20px;
    height: 20px;
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: var(--takasa01);
}
#about .inner #activity.box .boxwrap a:after,
#about .inner #proposal.box .boxwrap a:after{
	content: "";
	background: url(/images/arrow02.svg) no-repeat;
	background-size: 100%;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 50%;
	right: 3rem;
	transform: var(--takasa01);
	transition: all ease 0.5s;
}
#about .inner #activity.box .boxwrap a:hover:after,
#about .inner #proposal.box .boxwrap a:hover:after{
	right: 2.5rem;
}
#about .inner #proposal.box .boxwrap04{
	margin: 0 auto 3rem;
}
#about .inner #proposal.box .boxwrap04 h4{
	margin: 0 auto 2rem;
}
#about .inner #proposal.box .boxwrap04 p{
	line-height: 2.4rem;
	margin: 0 auto 2.5rem;
}
#about .inner #proposal.box .boxwrap04 ul li{
	display: flex;
	margin: 0 auto 20px;
}
#about .inner #proposal.box .boxwrap04 ul li b{
	background: var(--colorB);
	color: var(--colorW);
	font-weight: normal;
	text-align: center;
	min-width: 90px;
	margin: 0 20px 0 0;
	padding: 0 20px;
}

@media all and (min-width:769px){

}

@media all and (max-width:768px){
	#about .inner #greeting h3{
		line-height: 2rem;
    	padding: 0 0 0 1rem;
	}
	#about .inner #greeting .boxwrap picture{
		text-align: center;
		order:1;
		width: 100%;
		margin: 0 auto 1rem;
	}
	#about .inner #greeting .boxwrap picture img{
		width: 60%;
	}
	#about .inner #greeting .boxwrap p{
		line-height: 2.4rem;
	}
	#about .inner #greeting .boxwrap p.text1st{
		order: 2;
		width: 100%;
		padding: 0;
	}
	#about .inner #greeting .boxwrap p.text2nd{
		order: 3;
		width: 100%;
	}
	#about .inner .box{
		margin: 0 auto 3rem;
	}
	#about .inner .box02A dl dt{
		width: 100%;
	}
	#about .inner .box02B dl dt, #about .inner .box02C dl dt{
		width: 8%;
	}
	#about .inner .box02B dl dd, #about .inner .box02C dl dd{
		width: 92%;
		padding: 0 0 0 1rem;
	}
	#about .inner .box03 .boxwrap{
		margin: 0 auto 2rem;
	}
	#about .inner .box03 .boxwrap picture{
		padding: 1rem 1rem;
	}
	#about .inner .box03 .boxwrap picture img{
		padding: 1rem;
	}
	#about .inner .box03 .boxwrap dl dt{
		width: 30%;
		padding: 1rem 1rem 0.5rem 0;
	}
	#about .inner .box03 .boxwrap dl dd{
		width: 70%;
		padding: 1rem 1rem 0.5rem 0;
	}
	#about .inner .box03 .boxwrap dl dd.dd_line span{
		width: calc(100% / 1);
		white-space: unset;
	}
	#about .inner .box03 .boxwrap dl dd.dd_lineA span{
		width: calc(100% / 2);
	}
	#about .inner .box03 .boxwrap dl dd.dd_hyo ul li{
		padding: 5px 0;
	}

	#about .inner .box03 .boxwrap dl dd.dd_hyo ul li:nth-child(3n+1){
		border-bottom: 1px dotted var(--colorL);
		width: calc(100% / 3);
	}
	#about .inner .box03 .boxwrap dl dd.dd_hyo ul li:nth-child(3n+2){
		border-bottom: 1px dotted var(--colorL);
		width: calc(100% / 3);
	}
	#about .inner .box03 .boxwrap dl dd.dd_hyo ul li:nth-child(3n+3){
		border-bottom: 1px dotted var(--colorL);
		width: calc(100% / 3);
	}
	#about .inner .box03 .boxwrap02 dl dt,
	#about .inner .box03 .boxwrap03 dl dt{
		width: 100%;
	}
	#about .inner .box03 .boxwrap02 dl dd,
	#about .inner .box03 .boxwrap03 dl dd{
		width: 100%;
		padding: 0rem 1rem 0.5rem 0;
	}
	#about .inner .box03 .boxwrap03 dl dd{
		border-bottom : none;
	}
	#about .inner .box03 .boxwrap .mapbox{
		padding: 1rem;
	}
	#about .inner .box03 .boxwrap .mapbox p{
		margin: 1rem auto 0;
		padding: 0 0 0 40px;
	}
	#about .inner .box03 .boxwrap .mapbox p:before{
		top:0;
		transform: translate(0,0);		
	}
	#about .inner #activity.box .boxwrap a:after,
	#about .inner #proposal.box .boxwrap a:after{
		right: 1rem;
	}
	#about .inner #activity.box .boxwrap a:hover:after,
	#about .inner #proposal.box .boxwrap a:hover:after{
		right: 0.5rem;
	}
	#about .inner .box03 .boxwrap .mapbox iframe {
		min-height: 420px;		
	}
}