@charset "utf-8";

/* ===========================================================
	child about
=========================================================== */

main {
	overflow: hidden;
}

#about.child .contents {
	margin-bottom: 120px;
	padding: 0 !important;
}

#about.child .contents.message h3 {
	display: block;
	margin: 0 auto 20px;
	max-width: 500px;
}

#about.child .contents.company {
	margin-bottom: 0 !important;
}

#about.child .contents .txt-anchor {
	padding: 0 !important;
}

#about.child .contents.child-header {
	margin-bottom: 0;
}

@media screen and (min-width: 414px) {

	#about.child .contents.message h3 {
		margin: 0 auto 40px;
	}

}

@media screen and (min-width: 768px) {

	#about.child .contents.message h3 {
		max-width: 680px;
		margin: 0 auto 50px;
	}

}

@media screen and (min-width: 1024px) {

	#about.child .contents {
		margin-bottom: 200px;
	}

}

@media screen and (min-width: 1280px) {

	#about.child .contents.message .inner-wrap {
		width: 85%;
		margin: 0 auto;
	}

}

/*  message title -------- */

.inner-box.box-title {
	margin: 0 auto 40px;
}

.inner-box.box-title .en-title.en {
	font-size: 3.2rem;
	letter-spacing: 0.06rem;
}

.buisiness-wrap figure {
	margin: 0 -25px;
}

@media screen and (min-width: 414px) {

	.inner-box.box-title .en-title.en {
		font-size: 4rem;
	}

	#about.child .consept-wrap h3 .en.en-title {
		font-size: 3rem;
	}

	.buisiness-wrap figure {
		margin: 0 -40px;
	}

}

@media screen and (min-width: 768px) {

	.inner-box.box-title {
		margin: 0 auto 70px;
	}

	.inner-box.box-title .en-title.en {
		font-size: 4.5rem;
	}

	#about.child .consept-wrap h3 .en.en-title {
		font-size: 4rem;
	}

	.buisiness-wrap figure {
		margin: 0 -70px;
	}

}

@media screen and (min-width: 1024px) {

	.inner-box.box-title .en-title.en {
		font-size: 5.0rem;
	}

	#about.child .consept-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

	#about.child .consept-wrap h3 .en.en-title {
		font-size: 4.5rem;
		display: inline-block;
		width: 35%;
	}

	#about.child .consept-txt {
		display: inline-block;
		width: 65%;
	}

	.buisiness-wrap figure {
		margin: 0 -90px;
	}

}

/*  message -------- */

.child main .message-wrap p {
	margin-bottom: 15px;
	display: block;
	text-align: justify;
}

.message-wrap p:last-child {
	margin-bottom: 0 !important;
}

.message-wrap .hyphen {
	position: relative;
	text-indent: 30px;
}

.message-wrap .hyphen:before {
	position: absolute;
	left: 0;
	top: 12px;
	content: "";
	width: 25px;
	height: 1px;
	background: rgba(0,0,0,.7);
}

@media screen and (min-width: 768px) {

	.message-wrap p {
		margin-bottom: 30px;
		font-size: 1.5rem;
	}

}

@media screen and (min-width: 1024px) {

	.message-wrap p {
		margin-bottom: 40px;
	}

}

/*  company table -------- */

.company-wrap table th,
.company-wrap table td {
	width: 100%;
	display: block;
	font-size: 1.3rem;
}

.company-wrap table th {
	padding: 1em 0 0;
	font-weight: 600;
	font-size: 1.4rem;
	vertical-align: top;
}

.company-wrap table td {
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding: .25em 0 1.2em;
}

@media screen and (min-width: 1024px) {

	.company-wrap table tr {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.company-wrap table th,
	.company-wrap table td {
		display: inline-block;
		float: left;
		font-size: 1.4rem;
	}

	.company-wrap table th {
		clear: both;
		width: 25%;
		padding: 1em 0 1em;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}

	.company-wrap table td {
		width: 75%;
		padding: 1em 0 1em;
	}

}

/*  company list -------- */

.company-wrap td li {
	display: block;
	position: relative;
	padding-left: 18px;
	line-height: 1.5;
}

.company-wrap td li + li {
	margin-top: .5em;
}

.company-wrap td li:before {
	content: "";
	position: absolute;
	left: 3px;
	top: .7em;
	margin: auto;
	background-color: rgba(0,0,0,0.7);
	border-radius: 50px;
	width: 6px;
	height: 6px;
}

/*  Ms.Takagi -------- */

.message-img-wrap,
.consept-wrap{
	margin: 50px auto 0;
}

.message-img-wrap {
	position: relative;
}

.message-img-wrap .profile-img {
	width: 70%;
	margin: 0 auto 50px;
}

.message-img-wrap .profile-detail h4 {
	font-size: 2.5rem;
	line-height: 1.5;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 15px;
}

.message-img-wrap .profile-detail .name {
	margin-bottom: 15px;
}

.message-img-wrap .profile-detail .person {
	font-size: 1.5rem;
	font-weight: 500;
	color: #000;
}

.message-img-wrap .profile-detail .person .en {
	font-size: 1.2rem;
	color: rgba(0,0,0,0.5);
	margin-left: 8px;
	display: inline-block;
}

.message-img-wrap .profile-detail .status {
	font-size: 1.1rem;
	color: #000;
}

.message-img-wrap .profile-detail .detail {
	text-align: justify;
	margin-bottom: 15px;
}

.message-img-wrap .profile-detail .activity h5 {
	margin-bottom: .5em;
	font-weight: 500;
}

.message-img-wrap .profile-detail .activity li {
	position: relative;
	padding-left: 15px;
	margin-right: 1.5em;
	display: inline-block;
}

.message-img-wrap .profile-detail .activity li:before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	position: absolute;
	left: 0;
	top: .7em;
	background: rgba(0,0,0,.7);
	border-radius: 50%;
}

@media screen and (min-width: 414px) {

	.message-img-wrap .profile-img {
		width: 250px;
	}
}

@media screen and (min-width: 768px) {

	.message-img-wrap,
	.consept-wrap {
		margin: 60px auto 0;
	}

}

@media screen and (min-width: 1024px) {

	.message-img-wrap,
	.consept-wrap {
		margin: 100px auto 0;
	}

	.message-img-wrap .profile-img {
		width: 400px;
		margin: 0;
		position: relative;
		margin-left: auto;
	}

	.message-img-wrap .profile-detail {
		width: calc(100% - 350px);
		position: absolute;
		left: 0px;
		top: 40px;
	}

}

@media screen and (min-width: 1280px) {

	.message-img-wrap .profile-detail {
		top: 60px;
	}

}

.consept-wrap dl {
	margin-top: 35px;
}

.consept-wrap dt {
	font-weight: 600;
	margin-bottom: 12px;
}

.consept-wrap dd {
	margin-bottom: 25px;
	text-align: justify;
}

.consept-wrap p {
	margin: 0;
	font-size: 1.6rem;
}

	.consept-wrap p .br {
		display: inline;
	}

@media screen and (min-width: 414px) {

	.consept-wrap p .br {
		display: inline-block;
	}

}

@media screen and (min-width: 768px) {

	.consept-wrap dl {
		margin-top: 40px;
	}

	.consept-wrap dt {
		margin-bottom: 20px;
		font-size: 1.6rem;
	}

	.consept-wrap dd {
		margin-bottom: 40px;
	}

	.consept-wrap dd:last-child {
		margin-bottom: 0;
	}

	.consept-wrap p {
		margin: 0;
		font-size: 1.8rem;
	}

	.consept-wrap p .br {
		display: block;
	}

}

/*  map -------- */

table {
	width: 100%;
}

.map-wrap {
	position: relative;
}

.map-wrap .about-info-wrap {
	position: relative;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	height: 100%;
	display: none;
}

.map-wrap #map {
	width: 100%;
	height: 400px;
}

.map-wrap h1 {
	width: 40px;
}


@media screen and (min-width: 768px) {

	.map-wrap #map {
		height: 650px;
	}

}

@media screen and (min-width: 1024px) {

	.map-wrap .about-info-wrap {
		position: absolute;
		display: block;
	}

}

/*  map info -------- */

.map-wrap .about-info {
	background-color: rgba(255,255,255,0.9);
	width: 100%;
	padding: 60px 20px 35px;
	text-align: center;
	display: block;
}

.map-wrap .about-info h1 {
	width: 60px;
	margin: 0 auto 20px;
	text-align: center;
}

.map-wrap .about-info p {
	text-align: left;
	color: #000;
	font-size: 1.2rem;
	line-height: 1.6;
	display: inline-block;
}

.map-wrap .about-info p .company-name {
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.6;
	display: block;
	margin-bottom: 8px
}

.map-wrap {
	margin: 50px auto 0
}

@media screen and (min-width: 768px) {

	.map-wrap .about-info h1 {
		width: 85px;
		margin: 0 auto 28px;
	}

	.map-wrap {
		margin: 80px auto 0
	}

	.map-wrap .about-info {
		position: absolute;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		z-index: 100;
		width: auto;
		height: calc(100% - 20%);
		max-height: 340px;
	}

}

@media screen and (min-width: 1024px) {

	.map-wrap {
		margin: 100px auto 0
	}

}

/* ===========================================================
	wave
=========================================================== */

#about .message {
	background-image: url(../images/about/img-about-bg-wave.png);
	background-position: center top;
}