@charset "utf-8";

/*==========================================
[common]
===========================================*/

/* fade
-------------------------------------------*/
@media (min-width: 993px)  {
  .js-fadeUp {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .9s, transform .9s;
  }
  .js-fadeUp.is-inview {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .15s;
  }
}

/* anc**
----------------------------------------*/
@media (max-width: 992px)  {
  .anc{
     display: block;
     margin-top:-40px;
     padding-top:40px;
  }
}
@media (min-width: 993px)  {
  .anc{
     display: block;
     margin-top:-80px;
     padding-top:80px;
  }
}

/* title
-------------------------------------------*/
/* page title */
.title_page_wrap {
  position: relative;
  background-image: url("../images/bg_title_page.png");
  background-repeat: repeat;
  background-size: auto 100%;
  margin-left: -15px;
  margin-right: -15px;
}
.title_page_wrap:after {
  display: block;
  padding-top: calc((230 / 1400) * 100%);
  content: '';
}
.title_page_wrap h1 {
  margin: 0 auto;
  position: absolute;
  right: 0;
  left: 0;
  line-height: 1;
  text-align: center;
}
.title_page_wrap h1 span{
  display: inline-block;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.45); ;
  text-align: center;
  font-weight: 500;
}
@media (max-width: 992px)  {
  .title_page_wrap {
    margin-bottom: 4.0rem;
  }
  .title_page_wrap h1{
    top: calc(50% - 2.0rem);
  }
  .title_page_wrap h1 span{
    font-size: 1.6rem;
    padding: 1.2rem;
  }
}
@media (min-width: 993px)  {
  .title_page_wrap {
    margin-bottom: 8.0rem;
  }
  .title_page_wrap h1 {
    top: calc(50% - 3.75rem);
  }
  .title_page_wrap h1 span {
    font-size: 4.0rem;
    padding: 2.4rem 60px;
  }
}

.main h2 {
  text-align: center;
  color: #7CAB94;
  line-height: 1.7;
  font-weight: 500;
  margin-top: 4.0rem;
  position: relative;
}

/* bg_before */
/*
.main h2 span.bg_before{
  position: relative;
}
.main h2 span.bg_before::before {
  content: "";
  background-image: url("../images/bg_title_qs.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size:contain;
  width: inherit;
  height: inherit;
  display: block;
  position: absolute;
}
  */

/* bg_after */
/*
.main h2 span.bg_after{
  position: relative;
}
.main h2 span.bg_after::after {
  content: "";
  background-image: url("../images/bg_title_qe.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size:contain;
  width: inherit;
  height: inherit;
  display: block;
  position: absolute;
}

@media (max-width: 992px)  {       
  .main h2 {
    text-align: left;
    color: #8abea5;
    font-weight: 700;
  }
  .main h2 span {
    display: none;
  }
}


@media (min-width: 993px)  {
  .main h2 {
    margin-bottom: 6.0rem;
  }  
  .main h2 span.bg_before,
  .main h2 span.bg_after {
    width: 40px;
    height: calc((93 / 43 ) * 40px);
  }
  .main h2 span.bg_before::before {
    top: -33%;
    left: 0px;
    margin-left: -60px;
  }
  .main h2 span.bg_after::after {
    top: -33%;
    right: 0px;
    margin-right: -60px;
  }

  .main h2 span.bg_before.line2::before {
    top: 33%!important;
  }
  .main h2 span.bg_after.line2::after {
    top: -83%!important;
    margin-right: -90px!important;
  }
}
*/


.main .sub_title {
  font-weight: 500;
	line-height: 1.2;
  padding: 2.0rem 1.5rem;
  background-color: #231815;
  color: #fff;
  text-align: center;
}
.main h4 {
	font-weight: 500;
	line-height: 1.2;
  margin-bottom: 1.0rem;
}
@media (max-width: 992px)  {
  .main h2 {
  	margin-bottom: 2.5rem;
  }
  .main .sub_title {
    margin-bottom: 2.0rem;
  }
}
@media (min-width: 993px)  {
  .main h2 {
  	margin-top: 10.0rem;
  	margin-bottom: 4.0rem;
  }
  .main .sub_title {
    margin-bottom: 4.0rem;
  }
}


/* btn
-------------------------------------------*/
.btn_more{
	list-style: none;
	width: 100%;
  margin-top: 3.0rem;
  display: flex;
  justify-content:center;
}
.btn_more a{
 	width: 280px;
	background-color: #8abea5;
	text-align: center;
	padding: 14px 10px;
	display: block;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none!important;
  position: relative;
}
.btn_more a i {
  float: right;
  margin-right: 0.5rem;
	margin-top: 0.4rem;
  position: absolute;
  right: 20px;
}
/*
@media (min-width: 993px)  {
  .btn_more a{
    width: 80%;
  }
}
*/

/* Box
-------------------------------------------*/
.photo_Box {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
.photo_Box > figure{
  width: 31%;
}


/* text
-------------------------------------------*/
.main p,
.main_top p {
	line-height: 1.7;
}

.text_red {
  color: #ff0000;
}

.text_left {
  text-align: left;
}
.text_center {
  text-align: center;
}
.text_right {
  text-align: right;
}

.text_bold {
  font-weight: 700;
}

.text_lg {
  font-size: 137.5%;
}
.text_sm {
  font-size: 80%;
}

@media (max-width: 992px)  {
  .text_read {
    font-size: 1.6rem;
  }
  .text_lg {
    font-size: 112.5%;
  }
}
@media (min-width: 993px)  {
  .text_lg125 {
    font-size: 125%;
  }
}


/* color
-------------------------------------------*/
.clRed {
  color: #F30;
}

/* img
-------------------------------------------*/
.main img,
.main_top img  {
  max-width: 100%;
}

/* vis_main */
.vis_main {
  margin-top: 4.5rem;
  margin-bottom: 4.6rem;
}


/* margin / padding
-------------------------------------------*/
/* top */
.mg-t_1 {
  margin-top: 1.0rem;
}
.mg-t_2 {
  margin-top: 2.0rem;
}
.mg-t_3 {
  margin-top: 3.0rem;
}
.mg-t_4 {
  margin-top: 4.0rem;
}
.mg-t_5 {
  margin-top: 5.0rem;
}

/* *.5 */
.mg-t_1h {
  margin-top: 1.6rem;
}
.mg-t_2h {
  margin-top: 2.6rem;
}

/* bottom */
.mg-b_1 {
  margin-bottom: 1.0rem;
}
.mg-b_2 {
  margin-bottom: 2.0rem;
}
.mg-b_3 {
  margin-bottom: 2.0rem;
}
.mg-b_4 {
  margin-bottom: 4.0rem;
}
.mg-b_5 {
  margin-bottom: 5.0rem;
}
.mg-b_8 {
  margin-bottom: 8.0rem;
}

/* *.5 */
.mg-b_1h {
  margin-bottom: 1.6rem;
}
.mg-b_2h {
  margin-bottom: 2.6rem;
}

.pd-l_1{
	padding-left: 1.6em;
}

.pd-r_1{
	padding-right: 1.6em;
}

.pd-l_2{
	padding-left: 2.6em;
}

.pd-r_2{
	padding-right: 2.6em;
}

/* youtube */
.youtubeWrapp {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtubeWrapp iframe {
  width: 100%;
  height: 100%;
}


/* sub-list */
.sub-list li a {
  margin-left: 0.5rem;
}
.sub-list li.current,
.sub-list li.current a {
  color: #7CAB94;
  text-decoration: none;
}

@media (max-width: 992px)  {
  .sub-list {
    border: 1px #000 solid;
    padding: 4% 5% 1.5%;
  }
  .sub-list li {
    width: 100%;
    margin-bottom: 15px;
    display: block;
  }
}

@media (min-width: 993px) {
  .sub-list {
    list-style: none;
    display: flex;
    justify-content: space-between;
  }
  /*
  .sub-list li {
    display: flex;
    width: 33.333%;
    justify-content:center;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    justify-content:center;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
  }
  .sub-list li+ li {
    border-left: 0;
    border-right: 2px solid #000;
  }*/
}



/*==========================================
 top
===========================================*/
@media (max-width: 992px)  {
  .main_top {
    padding-top: 60px;
  }
}
@media (min-width: 993px) and (max-width: 1399px)  {
  .main_top {
    padding-top: 60px;
  }
}
@media (min-width: 1400px)  {
  .main_top {
    padding-top: 80px;
  }
}


.main_top .content_wrap_top > section {
	margin-bottom: 8.0rem;
}

/* title
-------------------------------------------*/
.top_sec h2 {
  text-align: center;
  color: #231815;
  line-height: 1.7;
  font-weight: 500;
  margin-top: 4.0rem;
}

/* bg_before */
.top_sec h2 span.bg_before{
  position: relative;
}
.top_sec h2 span.bg_before::before {
  content: "";
  background-image: url("../images/bg_title_qs.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size:contain;
  width: inherit;
  height: inherit;
  display: block;
  position: absolute;
}

/* bg_after */
.top_sec h2 span.bg_after{
  position: relative;
}
.top_sec h2 span.bg_after::after {
  content: "";
  background-image: url("../images/bg_title_qe.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size:contain;
  width: inherit;
  height: inherit;
  display: block;
  position: absolute;
}

@media (max-width: 992px)  {
  .top_sec h2 {
    font-size: 125%;
    margin-bottom: 3.0rem;
  }        
  .top_sec h2 span {
    width: 20px;
    height: calc((41 / 22 ) * 20px); 
  }
  .top_sec h2 span.bg_before,
  .top_sec h2 span.bg_after {
    width: 20px;
    height: calc((42 / 21 ) * 20px);
  }
  .top_sec h2 span.bg_before::before {
    top: -17.5%;
    left: 0px;
    margin-left: -30px;
  }
  .top_sec h2 span.bg_after::after {
    top: -17.5%;
    right: 0px;
    margin-right: -30px;
  }

  .top_sec h2 span.bg_before.line2::before {
    top: 33%!important;
  }
  .top_sec h2 span.bg_after.line2::after {
    top: -83%!important;
    margin-right: -45px!important;
  }
}

@media (min-width: 993px)  {
  .top_sec h2 {
    margin-bottom: 6.0rem;
  }  
  .top_sec h2 span.bg_before,
  .top_sec h2 span.bg_after {
    width: 40px;
    height: calc((93 / 43 ) * 40px);
  }
  .top_sec h2 span.bg_before::before {
    top: -33%;
    left: 0px;
    margin-left: -60px;
  }
  .top_sec h2 span.bg_after::after {
    top: -33%;
    right: 0px;
    margin-right: -60px;
  }

  .top_sec h2 span.bg_before.line2::before {
    top: 33%!important;
  }
  .top_sec h2 span.bg_after.line2::after {
    top: -83%!important;
    margin-right: -90px!important;
  }
}

.top_sec h3 {
  text-align: center;
  color: #231815;
  line-height: 1.2;
  margin-top: 4.5rem;
  margin-bottom: 4.0rem;
  font-weight: 500;
}


/* btn
-------------------------------------------*/
.top_sec .btn{
	list-style: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
  margin-top: 5.0rem;
}
.top_sec .btn a{
	background-color: #8abea5;
	text-align: center;
	padding: 14px 10px;
	display: block;
  text-transform: uppercase;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none!important;
  position: relative;
}
.top_sec .btn a i {
  float: right;
  margin-right: 0.5rem;
	margin-top: 0.4rem;
  position: absolute;
  right: 20px;
}
@media (max-width: 992px)  {
  .top_sec .btn{
    margin-top: 2.5rem;
  }
	.top_sec .btn a{
		width: 100%;
  }
}
@media (min-width: 993px)  {
  .top_sec .btn{
    margin-top: 5.0rem;
  }
  .top_sec .btn a{
		width: 60%;
  }
}


/*-------------------------------------------
  main_img
-------------------------------------------*/
.main_img {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}


/*-------------------------------------------
  topic_read
-------------------------------------------*/
@media (max-width: 992px)  {
	.topic_read {
		padding-top: calc(60px);
	}
}
@media (min-width: 993px)  {
	.topic_read {
		padding-top: calc(60px);
	}
}

.topic_read h3 {
  color: #231815;
  line-height: 1.6;
}
.topic_read p {
  line-height: 1.7;
}
@media (max-width: 992px)  {
  .text_read {
  /*  margin-top: -6%;*/
    padding-left: 15px;
    padding-right: 15px;
  }
  .text_read h3 {
    margin-top: 2.5rem;
    margin-bottom: 2.0rem;
  }
}


/*-------------------------------------------
  topic_attempt
-------------------------------------------*/
.topic_attempt {
  width: 100%;
  background-color: #231815;
  color: #fff;   
}
@media (max-width: 992px)  {
  .topic_attempt {
    padding-top: 2.0rem;
    padding-bottom: 4.0rem;
    margin-top: 5.0rem;
		margin-bottom: 5.0rem;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 993px)  {
  .topic_attempt {
    padding-top: 4.0rem;
    padding-bottom: 8.0rem;
    margin-top: 10.0rem;
		margin-bottom: 10.0rem;
  }
}

/* h2  */
.topic_attempt h2 {
    color: #fff;
}
.topic_attempt h2 span::before {
    top: 8px;
}
.top_sec h2 span::after {
    top: 8px;
}
@media (max-width: 992px)  {
  .topic_attempt h2 span::before {
      width: 27px;
      margin-left: -35px;
  }
  .topic_attempt h2 span::after {
      width: 27px;
      margin-right: -60px;
  }
}
@media (min-width: 993px)  {
  .topic_attempt h2 span::before {
      width: 54px;
      margin-left: -70px;
  }
  .topic_attempt h2 span::after {
      width: 54px;
      margin-right: -120px;
  }
}

/* top_photobox */
.topic_attempt .attempt_list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
}
.topic_attempt .attempt_list li{
  font-weight: 500;
}

@media (max-width: 992px)  {
  .topic_attempt .attempt_list li{
    width: 30%;
    margin-bottom: 1.6rem;
    font-size: 1.2rem;
  }
  .topic_attempt .attempt_list li br{
    display: none;
  }
  .topic_attempt .attempt_list li img{
    margin-bottom: 1.0rem;
    width:80%;
    display: block;
    margin-left:auto;
    margin-right: auto;
  }
}
@media (min-width: 993px)  {
  .topic_attempt .attempt_list li{
    width: 25%;
    margin-bottom: 3.0rem;
    font-size: 1.325rem;
  }
  .topic_attempt .attempt_list li img{
    margin-bottom: 1.6rem;
    width:75%;
    display: block;
    margin-left:auto;
    margin-right: auto;
  }
}



/*-------------------------------------------
  topic_about
-------------------------------------------*/
@media (max-width: 992px)  {
  .topic_about {
  /*  margin-top: 5.0rem;*/
    margin-bottom: 5.0rem;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 993px)  {
  .topic_about {
  /*  margin-top: 10.0rem;*/
    margin-bottom: 10.0rem;
  }
}


/*-------------------------------------------
  topic_case
-------------------------------------------*/
.topic_case {
  width: 100%;
  background-image: url("../images/bg_top_case.png");
  background-repeat: no-repeat;
  background-position: top center;
}
.topic_case h2 {
    color: #fff;
}
.topic_case .top_textbox {
    color: #fff;
}
.topic_case .top_textbox .btn a {
    width: 100%;
    background-color: #fff;
    border: 2px #231815 solid;
    text-align: center;
    padding: 14px 10px;
    display: block;
    text-transform: uppercase;
    color: #231815;
    text-decoration: none !important;
    position: relative;
}
@media (max-width: 992px)  {
  .topic_case {
    background-size: auto 100%;
    padding-top: 1.0rem;
    padding-bottom: 4.0rem;
    margin-top: 5.0rem;
		margin-bottom: 5.0rem;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 993px)  {
  .topic_case {
    background-size: cover;
    padding-top: 4.0rem;
    padding-bottom: 8.0rem;
    margin-top: 10.0rem;
		margin-bottom: 10.0rem;
  }
}

/* top_photobox */
.topic_case .top_photobox > figure {
    text-align: center;
}
@media (max-width: 992px)  {
  .topic_case .top_photobox > figure {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 993px)  {
  .topic_case .top_photobox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .topic_case .top_textbox {
    width: 48%;
    order: 1;
  }
  .topic_case .top_photobox > figure {
    width: 48%;
    order: 2;
  }
}



/*==========================================
[common read]
===========================================*/
/* read_wrapp
-------------------------------------------*/
/*
.read_wrapp figure {
  margin-top: 4.0rem;
}
*/

/*==========================================
 case
===========================================*/
/* figure
-------------------------------------------*/
.case_sec figure {
  margin-bottom: 1.6rem;
}

/* btn_all
-------------------------------------------*/
.case_all h3 {
  color: #000;
  text-align: center;
}
.case_all .btn_more a{
	background-color: #71bf7a;
}


/* craftsman
-------------------------------------------*/
.craftsman-list{
  list-style: none;
}
/* craftsman-list */
@media (max-width: 992px)  {
  .craftsman-list li {
    margin-bottom: 80px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 993px) {
  .craftsman-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .craftsman-list li {
    width: 48%;
    margin-bottom: 100px;
  }
}

/* case_no */
.craftsman-list .case_no {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}
@media (max-width: 992px)  {
  .craftsman-list .case_no h3{
    font-size: 112.5%;
  }
}
@media (min-width: 993px)  {
  .craftsman-list .case_no h3{
    font-size: 125%;
  }
}

/* no */
.craftsman-list .case_no em{
  margin-right: 1rem;
  font-style: normal;
  color: #fff;
  background-color: #231815;
  text-align:center;
  border-radius: 50%;
  display: inline-block;
  font-weight: 500;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
@media (max-width: 992px)  {
  .craftsman-list .case_no em{
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 2.0rem;
  }
}
@media (min-width: 993px)  {
  .craftsman-list .case_no em{
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 3.0rem;
  }
}


.craftsman-list .name_text {
    font-weight: 500;
    font-size: 125%;
}




/*==========================================
 talk
===========================================*/
.talk_list_wrapp{
  margin-bottom: 3.0rem!important;
}

/* talk_main_img */
.talk_main_img {
  margin-bottom: 30px;
}
@media (max-width: 992px)  {
  .talk_main_img {
    margin-left: -15px;
    margin-right: -15px;
  }
}

/* h3 */
@media (max-width: 992px)  {
  .talk_list_wrapp h3{
    text-align: center;
    margin-bottom: 20px;
  }
}

/* talk_list */
.talk_list_wrapp .talk_list {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}
.talk_list_wrapp .talk_list li {
  margin-bottom: 30px;
}

.talk_list_wrapp .talk_list figure {
  text-align: center;
  margin-bottom: 10px;
}
.talk_list_wrapp .talk_list .co_name {
  line-height: 1.4;
  text-align: center;
}
.talk_list_wrapp .talk_list .person_name {
  text-align: center;
  line-height: 1.4;
  margin-bottom: 10px;
}
.talk_list_wrapp .talk_list .person_comment {
  line-height: 1.4;
  font-size: 80%;
}

@media (max-width: 992px)  {
  .talk_list_wrapp .talk_list li {
    width: 45%;
  }
}



/* talk_newcomer 
-------------------------------------------*/
.talk_newcomer {
  background-color: #231815;
}
@media (max-width: 992px)  {
  .talk_newcomer {
    padding: 8% 5% 2%;
  }
  .talk_newcomer h3 img {
    width: 150px;
  }
}
@media (min-width: 993px)  {
  .talk_newcomer {
    padding: 4% 4% 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .talk_newcomer h3 {
    width: 34%;
    margin-top: 100px;
  }
  .talk_newcomer ul {
    width: 62%;
  } 
  .talk_newcomer ul li{
    width: 30%;
  } 
}


/* talk_veteran
-------------------------------------------*/
.talk_veteran {
  background-color: #c9a063;
}
@media (max-width: 992px)  {
  .talk_veteran {
    padding: 8% 5% 2%;
  }
  .talk_veteran h3 img {
    width: 240px;
  }
}
@media (min-width: 993px)  {
  .talk_veteran {
    /*padding: 4% 4% 0;*/
    padding: 4% 3.5% 0;
  }
  .talk_veteran .talk_list li {
    width: 18.35%;
  }
  .talk_veteran h3{
    margin-bottom: 4px;
    text-align: center;
  }
  .talk_veteran h3 img {
    width: 680px;
  }
}



/* talk_sec 
-------------------------------------------*/
.talk_sec .sub_title {
  line-height: 1.6;
  color: #231815;
  background-color: #fff;
  padding: 0;
}
@media (max-width: 992px)  {
  .talk_sec .sub_title {
    font-size: 2.0rem;
  }
}
@media (min-width: 993px)  {
  .talk_sec .sub_title {
    font-size: 200%;
  }
}


.talk_sec p {
  margin-bottom: 26px;
}
.talk_sec p .talk_name {
  display: block;
  font-weight: 500;
}
.talk_sec p .talk_name::after {
  content: "●";
  color: #c9a063;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}







/*==========================================
 contact
===========================================*/
.company_name {
  text-align: center;
}

/* telWrapp */
.telWrapp {
  width: 100%;
  margin-top: 3.0rem;
  margin-bottom: 3.0rem;
  padding: 5.5% 4%;
  text-align: center;
  font-style: normal;
  color: #fff;

  background-image: url(../images/bg_cta.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  margin-bottom: 5.0rem;
}
.telWrapp > p {
  font-weight: 500;
}
.telWrapp > p a {
  text-decoration: none!important;
  color: #fff;
}
@media (min-width: 993px)  {
  .company_name {
    font-size: 3.0rem;
  }
  .telWrapp .text_tel,
  .telWrapp .text_fax,
  .telWrapp .text_mail{
    font-size: 3.0rem;
  }
  .telWrapp .text_tel,
  .telWrapp .text_fax{
    display: inline-block;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
}