@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400&display=swap');
/*--------------------------------------------------------------
.title_area(カテゴリーページ共通です)
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.title_area {
		margin: 0;
		padding: 0;
		height: 150px;
		width: 100%;
		background-color: #4A71A8;
		background-position: center;
		background-size: 100% auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	
	.title_area h2 {
		color: #fff;
		font-size: 20px;
		font-weight: 700;
	}


}

/* Small than tablet */
@media (min-width: 768px) {
	

	
}


/* Larger than tablet */
@media (min-width: 992px) {
	.title_area {
		height: 200px;
		background-color: #4A71A8;
		background-position: center -200px;
		background-size: 100% auto;
	}
	
	.title_area h2 {
		font-size: 25px;
	}


}

/*↑↑ここまで共通↑↑*/


/*--------------------------------------------------------------
↓↓ここからコンテンツ↓↓
--------------------------------------------------------------*/


/* mobile */
@media (min-width: 300px) {
	.content {
		background: #F8F8F8;
		margin: 0;
		padding: 15px 0 23px;
	}
	
	.content-wrap {
		margin: 0;
		padding: 0;
	}
	
	.tab1,
	.tab2 {
		width: auto;
		max-width: 800px;
		margin: 0 10px;
		padding: 0;
	}
	
	.tab1 {
		margin-bottom: 56px;
	}
	
	.tab2 {
		margin-bottom: 30px;
	}
	
	.table-title {
		color: #fff;
		background: #4A64AA;
		font-size: 13px;
		font-weight: 600;
		width: 100%;
		text-align: center;
		margin: 0;
		padding: 13px 0 14px;
	}
	
	.tab1 dl {
		border-top: 3px solid #4A64AA;
		background: #fff;
		margin: 0;
		padding: 0;
		font-size: 14px;
		font-weight: 300;
	}
	
	.tab1 dl > div {
		position: relative;
	}
	
	.tab1 dl > div:not(:last-child) {
		border-bottom: 1px solid #E0E0E0;
	}
	
	.tab1 dl dt {
		width: 119px;
		margin: 0;
		padding: 20px 0;
		float: left;
		text-align: center;
	}
	
	.tab1 dl dd {
		margin: 0 0 0 119px;
		margin: 0;
		padding: 20px 10px 20px 0;
		overflow: hidden;
	}
	
	.tab1 dl dd a {
		color: #4A64AA;
		margin-left: 1em;
	}
	
	.tab1 div span {
		display: inline-block;
	}
	
	.tab1 .onebox {
		padding: 20px;
	}
	
	.tab2 dl {
		border-top: 3px solid #4A64AA;
		background: #fff;
		margin: 0;
		padding: 0;
		font-size: 14px;
		font-weight: 300;
	}
	
	.tab2 dl > div {
		position: relative;
	}
	
	.tab2 dl > div:not(:last-child) {
		border-bottom: 1px solid #E0E0E0;
	}
	
	.tab2 dl dt {
		width: 118px;
		margin: 0;
		padding: 20px 0 0 10px;
		float: left;
		text-align: left;
	}
	
	.tab2 dl dd {
		margin: 0 0 0 118px;
		margin: 0;
		padding: 20px 10px 20px 0;
		overflow: hidden;
	}


}

/* Small than tablet */
@media (min-width: 768px) {
	.tab1,
	.tab2 {
		width: 100%;
		max-width: 820px;
		margin: 0 auto 56px;
		padding: 0 10px;
	}

	
}


/* Larger than tablet */
@media (min-width: 992px) {
	.content {
		margin: 0;
		padding: 33px 0 62px;
	}
	
	.tab1,
	.tab2 {
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
		padding: 0;
	}
	
	.tab1 {
		margin-bottom: 56px;
	}
	
	.tab2 {
		margin-bottom: 0;
	}
	
	.table-title {
		color: #fff;
		background: #4A64AA;
		font-size: 18px;
		font-weight: 600;
		width: 100%;
		text-align: center;
		margin: 0;
		padding: 15px 0 14px;
	}
	
	.tab1 dl {
		border-top: 3px solid #4A64AA;
		background: #fff;
		margin: 0;
		padding: 0;
		font-size: 15px;
		font-weight: 300;
	}
	
	.tab1 dl > div {
		position: relative;
	}
	
	.tab1 dl > div:not(:last-child) {
		border-bottom: 1px solid #E0E0E0;
	}
	
	.tab1 dl dt {
		width: 285px;
		margin: 0;
		padding: 20px 0;
		float: left;
		text-align: center;
	}
	
	.tab1 dl dd {
		margin: 0 0 0 285px;
		margin: 0;
		padding: 20px 0;
		overflow: hidden;
	}
	
	.tab1 dl dd a {
		color: #4A64AA;
		margin-left: 1em;
	}
	
	.tab1 div span {
		display: inline-block;
	}
	
	.tab1 .onebox {
		padding: 45.5px 0 55px 99.5px;
	}
	
	.tab2 dl {
		border-top: 3px solid #4A64AA;
		background: #fff;
		margin: 0;
		padding: 0;
		font-size: 15px;
		font-weight: 300;
	}
	
	.tab2 dl > div {
		position: relative;
	}
	
	.tab2 dl > div:not(:last-child) {
		border-bottom: 1px solid #E0E0E0;
	}
	
	.tab2 dl dt {
		width: 182px;
		margin: 0;
		padding: 20px 0 0 35px;
		float: left;
		text-align: left;
	}
	
	.tab2 dl dd {
		margin: 0 0 0 182px;
		margin: 0;
		padding: 20px 0;
		overflow: hidden;
	}


}

/*--------------------------------------------------------------
@media
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	.section_title {
		color: #4E4E4E;
		font-size: 18px;
		font-weight: 600;
		padding-left: 13px;
		position: relative;
		line-height: 1;
		margin: 0 0 0 20px;
	}
	
	.section_title::before {
	  background-color: #4A64AA;
	  bottom: 0px;
	  content: '';
	  height: 18px;
	  left: 0;
	  position: absolute;
	  width: 3px;
	}
	
	#message {
		width: 100%;
		max-width: 800px;
		height: auto;
		margin: 0 auto 50px auto;
		padding: 0;
	}
	
	.img_box {
		height: 0;
		width: 100%;
		background: url("img/ceo.png") no-repeat center;
		background-size: cover;
		position: relative;
		margin: 20px 0 190px;
		padding: 0;
		padding-top: 50%;
	}
	
	.txt_box {
		width: 100%;
		position: relative;
		background: #4A64AA;
		color: #fff;
		padding: 25px 40px;
		margin: 0;
		bottom: 0;
		right: 0;
	}
	
	.txt_box dl {
		margin: 0;
		padding: 0;
	}
	
	.txt_box dl dt {
		font-weight: 500;
		font-size: 16px;
		margin: 0 0 19px;
		padding: 0;
		line-height: 1;
	}
	
	.txt_box dl dt span {
		display: block;
		margin: 0 0 10px;
		font-size: 11px;
	}
	
	.txt_box dl dd {
		font-size: 11px;
		font-weight: 300;
		letter-spacing: 0;
	}
	
	.message_txt {
		background: #fff;
		margin: 0 10px;
		padding: 26px 20px 34px;
		width: auto;
	}
	
	.msg_title {
		font-size: 15px;
		font-weight: 600;
		line-height: 1.5;
		margin: 0 0 20px;
		padding: 0;
	}
	
	.msg_title span {
		color: #4A64AA;
	}
	
	.message_txt p {
		font-size: 13px;
		font-weight: 300;
		text-align: justify;
		line-height: 26px;
	}
	
	.message_txt .name {
		margin: 15px 0 0;
		padding: 0;
		font-weight: 500;
		font-size: 16px;
		text-align: right;
	}
	
	.message_txt .name span {
		font-size: 11px;
		display: block;
		margin: 0 0 11px;
	}


}

/* Small than tablet */
@media (min-width: 768px) {
	

	
}


/* Larger than tablet */
@media (min-width: 992px) {
	.section_title {
    	padding-left: 15px;
	}
	
	.section_title::before {
    bottom: -1px;
    height: 20px;
    width: 5px;
  }
	
	#message {
		width: 100%;
		max-width: 800px;
		height: auto;
		margin: 0 auto 50px auto;
		padding: 0;
	}
	
	.img_box {
		height: 400px;
		width: 100%;
		background: url("img/ceo.png") no-repeat center;
		background-size: cover;
		position: relative;
		margin: 28px 0 52px;
		padding: 0;
	}
	
	.txt_box {
		width: 283px;
		position: absolute;
		background: #4A64AA;
		color: #fff;
		padding: 50px 28px;
		margin: 0;
		bottom: -30px;
		right: -30px;
	}
	
	.txt_box dl {
		margin: 0;
		padding: 0;
	}
	
	.txt_box dl dt {
		font-weight: 500;
		font-size: 20px;
		margin: 0 0 25px;
		padding: 0;
	}
	
	.txt_box dl dt span {
		display: block;
		margin: 0 0 12px;
		font-size: 14px;
	}
	
	.txt_box dl dd {
		font-size: 12px;
		font-weight: 300;
		letter-spacing: 0;
	}
	
	.message_txt {
		background: #fff;
		margin: 0;
		padding: 40px 50px 30px;
	}
	
	.msg_title {
		font-size: 22px;
		font-weight: 600;
		line-height: 1.5;
		margin: 0 0 40px;
		padding: 0;
	}
	
	.msg_title span {
		color: #4A64AA;
	}
	
	.message_txt p {
		font-size: 15px;
		font-weight: 300;
		text-align: justify;
		line-height: 26px;
	}
	
	.message_txt .name {
		margin: 30px 0 0;
		padding: 0;
		font-weight: 500;
		font-size: 20px;
		text-align: right;
	}
	
	.message_txt .name span {
		font-size: 14px;
		display: block;
		margin: 0 0 17px;
	}


}


/*--------------------------------------------------------------
mission vision value
--------------------------------------------------------------*/



/* mobile */
@media (min-width: 300px) {
	
	#statement-area {
		background-color: #FFF;
		width: 100%;
		margin: 0 auto 50px auto;
		padding: 50px 0;
		text-align: left;
	}

	#statement-area dl {
		margin: 0;
		padding: 0;
	}

	#statement-area dt {
		margin: 0 auto;
		padding: 0 5% 30px 5%;
		width: auto;
	}
	
	#statement-area dd {
		margin: 0;
		padding: 0 25px;
		font-size: 13px;
		line-height: 2;
		letter-spacing: 1px;
		font-family: 'Noto Serif JP', serif;
		font-weight: 400;
		color: #000000;
		text-align: justify;
		text-justify: inter-ideograph; 
	}
	
	#statement-area dd br {
		display: none;
	}
	
	#mission-area h5 {
		font-size: 20px;
		color: #4A71A8;
		font-weight: 600;
		text-align: center;
		letter-spacing: 1px;
		margin: 0 0 50px 0;
		padding: 0;
	}
	
	#mission-area h5 span {
		font-size: 13px;
		color: #4E4E4E;
		text-align: center;
		display: block;
		margin: 10px 0 0 0;
		padding: 0;
	}
	
	#mission-area dl.vision {
		margin-bottom: 80px;
		padding: 0;
	}
	
	#mission-area dl.vision dt {
		margin: 0 0 20px 0;
		padding: 0 10%;
		text-align: center;
	}
	
	#mission-area dl.vision dt img {
		width: 100%;
		height: auto;
	}
	
	#mission-area dl.vision dd {
		margin: 0;
		padding: 0;
		text-align: center;
		font-weight: 600;
		font-size: 13px;
		color: #4E4E4E;
		line-height: 1.8;
	}
	
	.working_hearts {
		margin: 0 0 50px 0;
	}
	
	.working_hearts h4 {
		margin: 0 10% 20px 10%;
		text-align: center;
	}
	
	.working_hearts h4 img {
		width: 100%;
		height: auto;
	}
	
	.working_hearts ul {
		margin: 0 auto;
		padding: 0 10px;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.working_hearts ul li {
		background-color: #FFF;
		border-bottom: dotted 1px #4A71A8;
		border-right: dotted 1px #4A71A8;
		width: 33%;
		padding: 0;
		box-sizing: border-box;
		line-height: 0;
	}
	
	.working_hearts ul li:nth-child(3),
	.working_hearts ul li:nth-child(6),
	.working_hearts ul li:nth-child(9),
	.working_hearts ul li:nth-child(12),
	.working_hearts ul li:nth-child(15){
		border-right: none;
	}
	
	.working_hearts ul li:nth-child(16),
	.working_hearts ul li:nth-child(17),
	.working_hearts ul li:nth-child(18){
		border-bottom: none;
	}
	
	.working_hearts li dt {
		font-family: 'Noto Serif JP', serif;
		font-weight: 600;
		color: #4A71A8;
		font-size: 20px;
		text-align: left;
		padding: 10px 0 0 10px;
	}
	
	.working_hearts dd {
		text-align: center;
		position: relative;
		font-size: 15px;
		font-weight: 600;
	}
	
	
	
	.mission {
		background-color: #FFF;
		padding: 50px 0;
	}
	
	.mission h6 {
		font-size: 15px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 40px;
	}
	
	.mission h6 span {
		color: #4A71A8;
	}
	
	.img1 {
		width: auto;
		margin: 0 10% 50px 10%;
	}
	
	.img2 {
		width: auto;
		margin: 0 10%;
	}
	
	.value-area {
		padding: 50px 0;
	}
	
	.value-area h6 {
		margin: 0 5% 50px 5%;
		text-align: center;
	}
	
	.value-area h6 img {
		width: 100%;
		height: auto;
	}
	
	.value-point{
		background-color: #4A71A8;
		padding: 30px 0;
		margin-bottom: 80px
	}
	
	.value-point h4{
		text-align: center;
		color: #FFF;
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 30px
	}
	
	.value-point h4 span{
		font-size: 20px;
	}
	
	.value-point ul{
		margin: 0 10px;
	}
	
	.value-point p{
		font-size: 15px;
		color: #4A71A8;
		position: absolute;
		top: 20px;
		right: 20px;
	}
	
	.value-point li{
		margin: 0 0 10px 0;
		width: 100%;
		background-color: #FFF;
		text-align: left;
		padding: 30px;
		box-sizing: border-box;
		position: relative;
	}
	
	.value-point h6{
		text-align: left;
		color: #4A71A8;
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 10px;
		margin-left: 0;
	}
	
	.value-point h6 span{
		font-size: 12px;
		margin: 0 0 0 10px;
	}
	
	.value-point dd{
		font-size: 13px;
		font-weight: 400;
		line-height: 1.8;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	#statement-area {
		background-color: #FFF;
		width: 100%;
		margin: 0 auto 100px auto;
		padding: 100px 0 130px 0;
		text-align: center;
	}

	#statement-area dl {
		margin: 0;
		padding: 0;
	}

	#statement-area dt {
		margin: 0 auto;
		padding: 0 0 30px 0;
		width: 450px;
	}
	
	#statement-area dd {
		margin: 0;
		padding: 0;
		font-size: 13px;
		line-height: 2;
		letter-spacing: 1px;
		font-family: 'Noto Serif JP', serif;
		font-weight: 400;
		color: #000000;
		text-align: center;
	}
	
	#statement-area dd br {
		display: inherit;
	}
	
	#mission-area h5 {
		font-size: 20px;
		color: #4A71A8;
		font-weight: 600;
		text-align: center;
		letter-spacing: 1px;
		margin: 0 0 50px 0;
		padding: 0;
	}
	
	#mission-area h5 span {
		font-size: 15px;
		color: #4E4E4E;
		text-align: center;
		display: block;
		margin: 10px 0 0 0;
		padding: 0;
	}
	
	#mission-area dl.vision {
		margin-bottom: 80px;
		padding: 0;
	}
	
	#mission-area dl.vision dt {
		margin: 0 0 20px 0;
		padding: 0;
		text-align: center;
	}
	
	#mission-area dl.vision dt img {
		width: auto;
		height: 38px;
	}
	
	#mission-area dl.vision dd {
		margin: 0;
		padding: 0;
		text-align: center;
		font-weight: 600;
		font-size: 15px;
		color: #4E4E4E;
		line-height: 1.8;
	}
	
	.working_hearts {
		margin: 0 0 100px 0;
	}
	
	.working_hearts h4 {
		margin: 0 0 20px 0;
		text-align: center;
	}
	
	.working_hearts h4 img {
		margin: 0 auto;
		width: 560px;
		height: auto;
	}
	
	.working_hearts ul {
		margin: 0 auto;
		padding: 0 5%;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		flex-wrap: wrap;
		max-width: 1200px;
	}
	
	.working_hearts ul li {
		background-color: #FFF;
		border-bottom: dotted 1px #4A71A8;
		border-right: dotted 1px #4A71A8;
		width: 16%;
		padding: 0;
	}
	
	.working_hearts ul li:nth-child(3),
	.working_hearts ul li:nth-child(9),
	.working_hearts ul li:nth-child(15){
		border-right: dotted 1px #4A71A8;
	}
	
	.working_hearts ul li:nth-child(6),
	.working_hearts ul li:nth-child(12),
	.working_hearts ul li:nth-child(18){
		border-right: none;
	}
	
	.working_hearts ul li:nth-child(13),
	.working_hearts ul li:nth-child(14),
	.working_hearts ul li:nth-child(15),
	.working_hearts ul li:nth-child(16),
	.working_hearts ul li:nth-child(17),
	.working_hearts ul li:nth-child(18){
		border-bottom: none;
	}
	
	
	
	.mission {
		background-color: #FFF;
		padding: 80px 0;
	}
	
	.mission h6 {
		font-size: 15px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 20px;
	}
	
	.mission h6 span {
		color: #4A71A8;
	}
	
	.img1 {
		width: 500px;
		margin: 0 auto 50px auto;
	}
	
	.img2 {
		width: 490px;
		margin: 0 auto;
	}
	
	.value-area {
		padding: 80px 0;
	}
	
	.value-area h6 {
		margin: 0 0 50px 0;
		text-align: center;
	}
	
	.value-area h6 img {
		height: 82px;
	}
	
	.value-point{
		background-color: #4A71A8;
		padding: 50px 0;
		margin-bottom: 80px
	}
	
	.value-point h4{
		text-align: center;
		color: #FFF;
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 40px
	}
	
	.value-point h4 span{
		font-size: 20px;
	}
	
	.value-point ul{
		margin: 0 auto;
	}
	
	.value-point p{
		font-size: 15px;
		color: #4A71A8;
		position: absolute;
		top: 20px;
		right: 20px;
	}
	
	.value-point li{
		margin: 0 auto 10px auto;
		width: 600px;
		background-color: #FFF;
		text-align: left;
		padding: 30px;
		box-sizing: border-box;
		position: relative;
	}
	
	.value-point h6{
		text-align: left;
		color: #4A71A8;
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 10px;
	}
	
	.value-point h6 span{
		font-size: 12px;
		margin: 0 0 0 10px;
	}
	
	.value-point dd{
		font-size: 13px;
		font-weight: 400;
		line-height: 1.8;
	}
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.img1 {
		width: 930px;
		margin: 0 auto 50px auto;
	}
	
	.value-point ul{
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		width: 1200px;
	}
	
	.value-point li{
		margin: 0 0.5%;
		width: 32.3%;
		background-color: #FFF;
		text-align: left;
		padding: 30px;
		box-sizing: border-box;
		position: relative;
	}
	
}


/*--------------------------------------------------------------
pc sp
--------------------------------------------------------------*/



/* mobile */
@media (min-width: 300px) {
	
	#mission-area .pc_on {
		display: none;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	

	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#mission-area .pc_on {
		display: inherit;
	}
	
	#mission-area .sp_on {
		display: none;
	}
	
}