@charset "UTF-8";


/* =================================ع
   会社情報全体（共通）
================================= */
.l_company_cont {
  padding-top: 70px;
}

.l_company_cont h2 {
  font-size:1.5rem;
  margin-bottom: 60px;
}


/* =================================
   会社概要（About）
================================= */
.company_about .wrapper {
  max-width: 980px;
  margin: 0 auto 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid #cdcdcd;
}

.company_about .image {
  float: right;
  width: 370px;
  margin: 0 40px;
  
}

.list_data {
  padding-left: 60px;
  font-size:17px;
}

.list_data dt {
  font-weight: bold;
}

.list_data dd {
  padding: 10px 0 10px 10px;
}


/* =================================
   理念・コンセプト（Concept）
================================= */
.company_concept .wrapper {
  max-width: 980px;
  margin: 0 auto;
}

.l_company_cont h2 {
  margin-bottom: 40px;
}

.company_concept .image {
  width: 290px;
  margin: 0 auto 40px;
  text-align: center;
}

.company_concept .text {
  line-height: 2;
}


/* =================================
   アクセス（Access）
================================= */
.company_access .wrapper {
  padding: 80px 0;
}

.company_access .image {
  max-width: 680px;
  margin: 0 auto 80px;
  text-align: center;
}

.company_access .text {
  max-width: 480px;
  margin: 20px auto 0;
  text-align: center;
}

.area_map iframe {
  width: 100%;
  height: 450px;
}


/* =================================
   スタッフ（Staff）
================================= */
.company_sfaff {
  padding: 80px 0 120px;
  background: #F2F1EF;
}

.company_sfaff .wrapper {
  max-width: 980px;
  margin: 0 auto;
}

.list_staff li {
  margin-top: 40px;
}

.list_staff li:first-child {
  margin-top: 0;
}

.list_staff li .box {
  padding: 60px;
  background-color: #fff;
}

.list_staff li .box.on_img{
  display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.list_staff li .box.on_img .image{
  width:322px;
}
.list_staff li .box.on_img .text{
  width:calc(100% - 322px - 40px);
}

.list_staff li .box .text h3 {
  margin-bottom: 20px;
  font-weight: bold;
}

.list_staff li .box .text p {
  line-height: 2;
}

/* レスポンシブ動画（リセット・統合） */
.list_staff li .movie {
  position: relative;
  max-width: 560px;
  margin: 60px auto 0;
}

.list_staff li .movie::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.list_staff li .movie iframe,
.list_staff li .movie > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


@media screen and (max-width:1081px) {

	.company_about .wrapper {
	  padding: 0 20px 40px;
	}
	
	.list_data {
	  font-size:16px;
	  padding: 0;
	}
	
	.company_concept .wrapper {
	  padding: 0 20px;
	}
	.company_access .area_map{ width: 100%;position: relative; }
	.company_access .area_map:before{ padding-top: 56.25%;content:"";display: block; }
	.company_access iframe{ position: absolute;top: 0;left: 0;width: 100%;height: 100%; }
	.company_access .wrapper {
	  padding: 80px 20px;
	}
	.company_sfaff .wrapper {
	  padding: 0 20px;
	}
}

@media screen and (max-width:767px) {
	.l_company_cont{padding-top:0px;}
	.l_company_cont h2 {
	  margin-bottom: 30px;
	  font-size:1.25rem;
	}
	
	.list_data {
	  margin: 0 auto;
	  max-width: 370px;
	}
	.company_about .image {
	  float: none;
	  margin: 0 auto 20px;
	  width: 100%;
	  max-width: 370px;
	}
	.list_data dd {
	  border-top: 1px solid #b2d6c7de;
	}
	.list_data dt {
	  padding: 0 0 10px 10px;
	}
	.company_concept .image {
	  width: 200px;
	}
	.company_about .wrapper {
	  margin-bottom: 40px;
	}
	.company_concept .text {
	  line-height: 1.5;
	}
	.company_access .wrapper {
	  padding: 40px 20px;
	}
	.company_access .image {
	  margin: 0 -20px 30px;
	}
	.company_sfaff {
	  padding: 40px 0 10px;
	}
	.list_staff li .box {
	  padding: 30px;
	}
	.list_staff li .box.on_img {
	  display: block;
	}
	.list_staff li .box.on_img .image {
	  width: 100%;
	  margin-bottom: 30px;
	  text-align: center;
	}
	.list_staff li .box.on_img .text {
	  width: 100%;
	}
	.list_staff li .box .text h3 {
	  margin-bottom: 10px;
	}
	.list_staff li .box .text p {
	  line-height: 1.5;
	}
}
