@charset "UTF-8";

#company img{
	width: 100%;
}
#company a:hover{
	opacity: 0.6;
	transition-duration: .3s;
}
#company a{
	transition-duration: .3s;
}
section {
    padding: 6rem 0;
    position: relative;
}

.mainTtl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 3rem;
    position: relative;
}

.mainTtl > h1 {
    font-size: 3.8rem;
    display: flex;
    align-items: center;
}

.mainTtl > div {
    color: #D30D1B;
    letter-spacing: 0.2rem;
    font-weight: bold;
}

#contents{
	background: #f7f7f7;
}

#topArea {
	background: url("../img/2022/com_bg.png") no-repeat top center;
	background-size: contain;
	max-width: 1280px;
	margin: 0 auto;
}
.com_logo{
	width: 52%;
	text-align: center;
	padding: 11% 5% 4%;
	margin: 0 auto;
}
.com_logo img{
	width: 100%;
}
.message{
	margin: 0 auto 3%;
	width: 94%;
}
.message img{
	width: 100%;
}
.sdgs{
	margin: 0 auto 3%;
	width: 94%;
}
.btn_wrap{
	display: flex;
	justify-content: center;
	margin-bottom: 8%;
}
.btn_wrap a{
	display: block;
	width: 290px;
	border: 2px solid #db002a;
	padding: 20px;
	text-align: center;
	color: #db002a;
	font-size: 1.8rem;
	font-weight: bold;
	margin: 15px;
	border-radius: 5px;
	background: #fff;
}
#infomation {
    z-index: 1;
    background: #fff;
    padding: 60px 0;
    max-width: 1200px;
    margin: 0 auto 5%;
    border-radius: 10px;
    border: 10px solid #f7f7f7;
    margin-bottom: -240px;
    position: relative;
}
#infomation h2 {
    font-weight:bold;
    text-align:center;
    font-size: 2.4rem;
    margin-bottom:30px;
}
#infomation .container{
    width: 96%;
    max-width: 1000px;
    margin: 0 auto;
}
#infomation a,
#prev a {
    transition: .3s;
}
#infomation a:hover,
#prev a:hover {
    opacity:.8;
}
#infomation ul {
    width: 100%;
    margin: 0 auto 40px auto;
}
#infomation ul li {
    border-bottom: 1px solid #ccc;
}
#infomation ul li a {
    color: #212529;
    text-decoration: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 10px;
}
#infomation .ttl {
    font-size: 136%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#infomation .date {
    font-size: 80%;
    font-weight: normal;
    margin-right: 2em;
}
#infomation a.more {
    display: block;
    width: 290px;
    border: 2px solid #db002a;
    padding: 20px;
    text-align: center;
    color: #db002a;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 15px auto;
    border-radius: 5px;
    background: #fff;
}
#prev {
    padding-bottom: 60px;
}
#prev a.prev {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 1.5%;
    font-size: 160%;
    letter-spacing: 0.2em;
    font-weight: bold;
    background: #466dc5;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
}
#infomation a.more i,
#prev a.prev i{
    margin: 0 0.5em;
}



#infomation .detail > img{
    display: block;
    max-width: 640px;
    margin: 0 auto;
}
#infomation .detail .ttl{
    margin-bottom:20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 150%;
}
#infomation .detail .text{
    margin-top:20px;
}
#infomation .detail .toiawase{
    margin-top:30px;
	text-align: center;
    font-weight: bold;
    font-size: 120%;	
}
#personalinfoMenu {
    padding: 2% 0;
    background: #fff;
    padding-top: 320px;
}
#personalinfoMenu h2{
	font-size: 3.2rem;
	font-weight: bold;
	margin: 0 0 1%;
}
#personalinfoMenu .columns {
    width: 100%;
    display: flex;
    position: relative;
    justify-content: center;
}

#personalinfoMenu .columns {
    width: 100%;
    margin-bottom: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}
#personalinfoMenu .columns>.column {
    width: 24%;
    margin: 0 0.5% 10px 0.5%;
    position: relative;
    color: #222;
    text-decoration: none;
    min-height: 68px;
    padding: 10px 10px 20px 0px;
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    font-size: 1.6rem;
}

@media screen and (max-width: 976px) and (min-width: 768px){
	#personalinfoMenu .columns>.column {
	     width: 32.3%;
	}
}
#personalinfoMenu .columns>.column:before {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 2px #db052a;
    bottom: 10px;
    left: 0;
    width: 100%;
    z-index: 0;
}
#personalinfoMenu i.fa-chevron-right{
	color: #db052a;
}