@charset "UTF-8";
/* CSS Document */
/* mainArea */
.mainArea {
	background-image: url("../img/about/main_bg.webp");
}
.mainArea .inner h1:before {
	content: "About";
}

/*aboutArea*/
.aboutArea {
	padding: 60px 0 40px;
}
.rinenBox {
	margin-bottom: 65px;
	padding: 40px 0;
	line-height: 1.5;
	text-align: center;
	background-color: #f0eeee;
}
.rinenBox p.rinenTxt {
	display: inline-block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	position: relative;
}
.rinenBox p.rinenTxt:before {
	content: "「";
	position: absolute;
	top: 0;
	left: -1.5em;
}
.rinenBox p.rinenTxt:after {
	content: "」";
	position: absolute;
	bottom: 0;
	right: -1.5em;
}
.aboutArea .h2Area {
	display: flex;
	justify-content: center;
	position: relative;
	margin-bottom: 30px;
	text-align: center;
}
.aboutArea .h2Area:after{
	content: "Company";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	line-height: 1;
	color: #baa58c;
	font-weight: 700;
}
.aboutArea .h2Area h2 {
	display: inline-block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	padding: 0 20px 20px;
	position: relative;
}
.aboutArea .h2Area h2:before {
	content: "/";
	position: absolute;
	top: 0;
	left: 0;
}
.aboutArea .h2Area h2:after {
	content: "/";
	position: absolute;
	top: 0;
	right: 0;
}

.aboutArea dl{
	max-width: 850px;
	margin: 0 auto;
}
.aboutArea dl div{
	display: flex;
	margin-bottom: 16px;
}
.aboutArea .strong{
	padding: 0 20px 100px;
}
.aboutArea .strong .h2Area:after{
	content: "Strength";
}
.aboutArea .strong .flexBox {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;
}
.aboutArea .strong .flexBox .imgBox {
	width: 30%;
	padding: 20px;
}
.aboutArea .strong .flexBox .txtBox {
	width: 70%;
}
.aboutArea .strong p{
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px 20px 0;
	text-align: left;
}
.aboutArea .strong .rightTxt{
	padding-top: 20px;
	text-align: right;
	font-size: 1.3em;
}
.aboutArea .strong .rightTxt span{
	font-size: .8em;
}

.aboutArea .company{
	padding: 0 20px 50px;
	background-image: url(../img/about/company_bg01.webp),url(../img/about/company_bg02.webp);
	background-position: top 50px left 0px, bottom 50px right 0px;
	background-repeat: no-repeat,no-repeat,no-repeat;
}
.aboutArea .company dl div dt span{
	display: inline-block;
	background-color: #534741;
	color: #FFF;
	width: 180px;
	padding: 4px 12px;
	margin-right: 30px;
}
.aboutArea .company dl div dd{
	padding: 4px 0;
}
.aboutArea .company dl dd span.space{
	padding-left: 15.25em;
}
.aboutArea .company dl dd span.txt01{
	padding-left: .5em;
	display: block;
}
.aboutArea .company dl dd span.logo{
	display: block;
	margin-top: 10px;
	max-width: 260px;
}

.aboutArea .nintei{
	margin: 0 auto 60px;
	max-width: 1000px;
}
.aboutArea .nintei .inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.aboutArea .nintei .inner .item {
	width: 33.3%;
  text-align: center;
}
.aboutArea .nintei .inner h2 {
	width: 100%;
	padding-top: 30px;
  font-size: 15px;
	letter-spacing: -0.01em;
	text-align: center;
}
.aboutArea .nintei .inner h2 span {
  font-size: .8em;
	display: block;
}
.aboutArea .nintei .inner .img {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
.aboutArea .nintei .inner .blr {
	padding-top: 100px;
}
.aboutArea .nintei .inner .img img {
	width: 100%;
	max-width: 300px;
}
.aboutArea .nintei .inner .sdgs {
	max-width: 230px;
	margin: 25px auto 70px;
}
.aboutArea .nintei .inner .img a:hover img {
	opacity: .8;
}
.aboutArea .nintei .inner .txt {
	width: 100%;
	padding: 20px 1em;
	text-align: center;
}

.aboutArea .history{
	background-color: #f0eeee;
	padding: 50px 20px;
}
.aboutArea .history .h2Area:after{
	content: "History";
}
.aboutArea .history dl div{
	border-bottom: 1px dotted #534741;
	margin-bottom: 10px;
	padding: 6px 12px 4px 12px;
}
.aboutArea .history dl div:first-child{
	padding: 0 12px 4px 12px;
}
.aboutArea .history dl div dt{
	width: 170px;
}

.aboutArea .access{
	padding: 50px 20px;
	text-align: center;
}
.aboutArea .access .h2Area:after{
	content: "Access Map";
}
.aboutArea .access .accessDetail {
	padding-bottom: 35px;
}
.aboutArea .access .campany_name{
	font-size: 19px;
	margin-bottom: 10px;
}
.aboutArea .access iframe{
	max-width: 850px;
	margin: 20px auto 0;
}
.aboutArea .access .accessDetail01 .campany_name img {
	/*width: 300px;*/
	width: 200px;
}
.aboutArea .access .accessDetail02 .campany_name img {
	width: 200px;
}
.aboutArea .access .addTxt {
	display: inline-block;
	padding: 2px 3em;
	margin: 0 auto 20px;
	background-color: #2f446b;
	border-radius: 25px;
	color: #FFF;
}
.i4ewOd-pzNkMb-haAclf {
	display: none!important;
}

@media screen and (max-width: 1000px) {
	.aboutArea .company{
		background-image:none;
	}
	.aboutArea .nintei .inner .item {
    width: 50%;
		padding-bottom: 30px;
	}
	#history,#access{
		margin-top: -60px;
		padding-top: 60px;
	}
	.aboutArea .strong .flexBox .imgBox {
		width: 100%;
		max-width: 500px;
		margin: 0 auto 15px;
		padding: 20px;
	}
	.aboutArea .strong .flexBox .txtBox {
		width: 100%;
	}
}
@media screen and (max-width: 650px) {
	.aboutArea{
		padding: 40px 0;
	}
	.rinenBox p.rinenTxt {
		font-size: 5.5vw;
		line-height: 1.5;
	}
	.aboutArea .h2Area h2{
		font-size: 20px;
	}
	.aboutArea .h2Area:after {
		font-size: 13px;
	}
	.aboutArea dl div{
		display: block;
		margin-bottom: 10px;
	}
	.aboutArea .company{
		padding: 0 6vw 30px;
	}
	.aboutArea .company dl div dt span{
		width: 100%;
	}
	.aboutArea .history {
		padding: 40px 6vw;
	}
	.aboutArea .access{
		padding: 40px 6vw 30px;
	}
	.aboutArea .access .campany_name{
		font-size: 17px;
	}
	.aboutArea .nintei .inner h2 {
			font-size: 4vw;
	}
	.aboutArea .nintei .inner .img{
		width: 80%;
		max-width: 400px;
		text-align: center;
		margin: 0 auto;
	}
	.aboutArea .nintei .inner .item {
		width: 100%;
	}
	.aboutArea .nintei .inner .txt{
		width: 100%;
		padding: 20px;
		text-align: center;
	}
	.aboutArea .nintei .inner .sdgs img {
		max-width: 230px;
		margin: 0 auto 50px;
	}
}	
@media screen and (max-width: 450px) {
	.aboutArea .nintei .inner {
		margin-bottom: 25px;
	}
	.aboutArea .nintei .inner h2 {
		font-size: 16px;
		padding: 0 5vw;
		text-align: left;
	}
}
@media screen and (max-width: 425px) {
.aboutArea .company dl dd span.space{
	padding-left: 0;
}
.aboutArea .company dl dd .non425{
	display: none;
}
}