@charset "UTF-8";
/* ==========================================================================//
//
// サンバリア100のものづくり
//
// ========================================================================== */
/* 共通
---------------------------------------------------------- */
@media all and (max-width: 750px) {
  .inner {
    padding: 0 32px;
  }
}

section:not(:first-of-type) {
  padding: 35px 0;
}
@media all and (min-width: 751px) {
  section:not(:first-of-type) {
    padding: 140px 0 0;
  }
}

@media all and (max-width: 750px) {
  .sp_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

@media all and (min-width: 1001px) {
  .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0 73px;
  }
}

.sec_ttl {
  color: #464646;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.45em;
}
@media all and (max-width: 750px) {
  .sec_ttl {
    margin-bottom: 20px;
    letter-spacing: 0.31em;
    line-height: 1.86;
    text-align: left;
  }
}
@media all and (min-width: 751px) {
  .sec_ttl {
    font-size: 24px;
    letter-spacing: 0.6em;
    line-height: 2.3;
    text-align: center;
  }
}

p,
.lead {
  letter-spacing: -0.015em;
  line-height: 1.7;
}
@media all and (max-width: 750px) {
  p,
  .lead {
    font-size: 14px;
  }
}

.center_video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* head_contents
---------------------------------------------------------- */
.head_contents {
  margin-bottom: 0px;
}
@media all and (min-width: 751px) {
  .head_contents {
    margin-bottom: 120px;
  }
}
@media all and (max-width: 750px) {
  .head_contents .ttl_contents .page_ttl {
    font-size: 21px;
    line-height: 1.8;
  }
}

/* 日光に悩む人へ、完全遮光という約束
---------------------------------------------------------- */
section.sec_why .wrap {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: min(1265px, 100%);
  margin-inline: auto;
}
@media all and (min-width: 751px) {
  section.sec_why .wrap {
    margin-bottom: 120px;
  }
}
@media all and (max-width: 1000px) {
  section.sec_why .wrap .sec_ttl {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1001px) and (max-width: 1450px) {
  section.sec_why .wrap .sec_ttl {
    width: 45%;
  }
}
@media all and (min-width: 1451px) {
  section.sec_why .wrap .sec_ttl {
    width: 100%;
  }
}
@media all and (min-width: 751px) {
  section.sec_why .wrap .sec_ttl {
    text-align: left;
  }
}
@media all and (min-width: 1001px) {
  section.sec_why .wrap .lead {
    width: 39.55%;
  }
}
section.sec_why .image_wrap {
  margin: 110px calc(50% - 50vw) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
@media all and (min-width: 751px) {
  section.sec_why .image_wrap {
    margin: 0 calc(50% - 50vw);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0 10px;
  }
}

/* 工程ではなく、向き合い方にこだわる
---------------------------------------------------------- */
section.sec_confront {
  padding: 40px 0 120px;
}
@media all and (min-width: 751px) {
  section.sec_confront {
    padding: 140px 0;
  }
}
@media all and (min-width: 751px) {
  section.sec_confront .sec_ttl {
    margin-bottom: 30px;
  }
}
@media all and (min-width: 751px) {
  section.sec_confront .lead {
    width: min(500px, 100%);
    margin-inline: auto;
  }
}
section.sec_confront .confront_list {
  margin-top: 34px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media all and (min-width: 751px) {
  section.sec_confront .confront_list {
    margin-top: 110px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 86px;
    width: min(1269px, 100%);
    margin-inline: auto;
  }
}
section.sec_confront .confront_list .confront_detail {
  width: calc((100% - 6px) / 3);
}
@media all and (min-width: 751px) {
  section.sec_confront .confront_list .confront_detail {
    width: calc((100% - 60px) / 4);
  }
}
@media all and (min-width: 1201px) {
  section.sec_confront .confront_list .confront_detail {
    width: calc((100% - 344px) / 5);
  }
}
@media all and (max-width: 750px) {
  section.sec_confront .confront_list .confront_detail:nth-child(6) {
    display: none;
  }
}

.first_image video {
  display: block;
  width: 100%;
  height: auto;
}

/* 機械では作れない生地。だから、人の手でつくる
---------------------------------------------------------- */
@media all and (max-width: 750px) {
  section.sec_inevitable {
    margin-top: 20px;
  }
}
@media all and (max-width: 750px) {
  section.sec_inevitable .sec_ttl {
    margin-bottom: 40px;
  }
}
section.sec_inevitable .sec_ttl .for_md {
  display: block;
}
@media all and (min-width: 1101px) {
  section.sec_inevitable .sec_ttl .for_md {
    display: none;
  }
}
@media all and (min-width: 751px) {
  section.sec_inevitable .process_list {
    margin: 110px auto 0;
    width: min(1266px, 100%);
  }
}
section.sec_inevitable .process_list .process_detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #DCDCDA;
}
@media all and (max-width: 1100px) {
  section.sec_inevitable .process_list .process_detail {
    padding: 44px 0;
  }
}
@media all and (min-width: 1101px) {
  section.sec_inevitable .process_list .process_detail {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0 50px;
  }
}
@media all and (max-width: 1100px) {
  section.sec_inevitable .process_list .process_detail:first-child {
    border-top: 1px solid #DCDCDA;
  }
}
@media all and (min-width: 1101px) {
  section.sec_inevitable .process_list .process_detail:first-child {
    padding: 0 0 60px;
  }
}
@media all and (min-width: 1101px) {
  section.sec_inevitable .process_list .process_detail:not(:first-child) {
    padding: 60px 0;
  }
}
@media all and (max-width: 1100px) {
  section.sec_inevitable .process_list .process_detail .image {
    margin-bottom: 18px;
  }
}
@media all and (min-width: 1101px) {
  section.sec_inevitable .process_list .process_detail .image {
    width: 54.15%;
  }
}
@media all and (min-width: 1101px) {
  section.sec_inevitable .process_list .process_detail .txts {
    width: 34.78%;
  }
}
@media all and (max-width: 1100px) {
  section.sec_inevitable .process_list .process_detail .txts .number_ttl {
    margin-bottom: 15px;
  }
}
@media all and (min-width: 751px) {
  section.sec_inevitable .process_list .process_detail .txts .number_ttl span {
    display: block;
  }
}
section.sec_inevitable .process_list .process_detail .txts .number {
  position: relative;
  color: #787777;
  font-size: 14px;
}
section.sec_inevitable .process_list .process_detail .txts .number::after {
  position: absolute;
  content: "";
  background-color: #CBCBC6;
  width: 15px;
  height: 1px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 15px;
}
@media all and (min-width: 751px) {
  section.sec_inevitable .process_list .process_detail .txts .number::after {
    width: 24px;
    left: 24px;
  }
}
section.sec_inevitable .process_list .process_detail .txts .ttl {
  color: #464646;
  letter-spacing: 0.3em;
}
@media all and (max-width: 750px) {
  section.sec_inevitable .process_list .process_detail .txts .ttl {
    padding-left: 25px;
    font-size: 14px;
  }
}
@media all and (min-width: 751px) {
  section.sec_inevitable .process_list .process_detail .txts .ttl {
    margin: 15px 0 20px;
    font-size: 19px;
    letter-spacing: 0.6em;
  }
}

/* 100％自社職人でつくる独自の生産体制
---------------------------------------------------------- */
@media all and (max-width: 750px) {
  section.sec_system {
    margin-top: 110px;
  }
}
@media all and (min-width: 751px) {
  section.sec_system .sec_system_txt {
    margin: 0 auto;
    width: min(1266px, 100%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media all and (min-width: 751px) {
  section.sec_system .sec_ttl {
    text-align: left;
  }
}
@media all and (min-width: 751px) {
  section.sec_system .txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
section.sec_system .wrap {
  display: block;
}
@media all and (min-width: 751px) {
  section.sec_system .lead {
    width: 39.4%;
  }
}
section.sec_system .image_wrap {
  margin: 0 calc(50% - 50vw) 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
@media all and (min-width: 751px) {
  section.sec_system .image_wrap {
    margin: 160px calc(50% - 50vw) 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0 10px;
  }
}
section.sec_system .factory_list {
  margin: 70px -16px 0;
}
@media all and (min-width: 751px) {
  section.sec_system .factory_list {
    margin: 60px -64px 0 -10px;
    counter-reset: pagination-num;
  }
}
section.sec_system .factory_list .factory_detail {
  padding: 44px 0;
  border-bottom: 1px solid #DCDCDA;
}
@media all and (max-width: 1200px) {
  section.sec_system .factory_list .factory_detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
@media all and (min-width: 1201px) {
  section.sec_system .factory_list .factory_detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media all and (max-width: 750px) {
  section.sec_system .factory_list .factory_detail:first-child {
    border-top: 1px solid #DCDCDA;
  }
}
@media all and (min-width: 751px) {
  section.sec_system .factory_list .factory_detail:first-child {
    padding: 0 0 35px;
  }
}
@media all and (min-width: 751px) {
  section.sec_system .factory_list .factory_detail:not(:first-child) {
    padding: 44px 0;
  }
}
section.sec_system .factory_list .factory_detail .txts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media all and (max-width: 750px) {
  section.sec_system .factory_list .factory_detail .txts {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media all and (max-width: 1200px) {
  section.sec_system .factory_list .factory_detail .txts {
    margin-top: 25px;
  }
}
@media all and (min-width: 751px) {
  section.sec_system .factory_list .factory_detail .txts {
    padding: 0 3.15vw 0 0;
    gap: 0 145px;
  }
}
@media screen and (min-width: 751px) and (max-width: 1598px) {
  section.sec_system .factory_list .factory_detail .txts {
    gap: 0 60px;
  }
}
@media all and (min-width: 1201px) {
  section.sec_system .factory_list .factory_detail .txts {
    width: 59%;
  }
}
@media all and (max-width: 1200px) {
  section.sec_system .factory_list .factory_detail .txts .labo_name {
    width: 28.5%;
  }
}
section.sec_system .factory_list .factory_detail .txts .labo_name span {
  display: block;
}
section.sec_system .factory_list .factory_detail .txts .labo_name .place {
  margin-bottom: 5px;
  letter-spacing: 0.38em;
}
@media all and (min-width: 751px) {
  section.sec_system .factory_list .factory_detail .txts .labo_name .place {
    margin-bottom: 9px;
    font-size: 20px;
  }
}
section.sec_system .factory_list .factory_detail .txts .labo_name .gray {
  padding-left: 23px;
  position: relative;
  color: #787777;
  font-size: 12px;
  letter-spacing: 0.015em;
}
@media all and (min-width: 751px) {
  section.sec_system .factory_list .factory_detail .txts .labo_name .gray {
    padding-left: 33px;
    font-size: 14px;
  }
}
section.sec_system .factory_list .factory_detail .txts .labo_name .gray::after {
  position: absolute;
  content: "";
  background-color: #CBCBC6;
  width: 10px;
  height: 1px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
}
@media all and (min-width: 751px) {
  section.sec_system .factory_list .factory_detail .txts .labo_name .gray::after {
    background-color: #787777;
    width: 18px;
  }
}
@media all and (max-width: 750px) {
  section.sec_system .factory_list .factory_detail .txts .explanation {
    font-size: 13px;
    width: 65.8%;
  }
}
@media all and (min-width: 751px) {
  section.sec_system .factory_list .factory_detail .txts .explanation {
    width: 58%;
  }
}
@media all and (min-width: 1201px) {
  section.sec_system .factory_list .factory_detail .image {
    width: 44.2%;
  }
}

/* 直すことが、次の丈夫さを生む
---------------------------------------------------------- */
@media all and (max-width: 750px) {
  section.sec_circulation {
    margin-top: 110px;
  }
}
@media all and (min-width: 751px) {
  section.sec_circulation .sec_ttl {
    padding-top: 14px;
  }
}
section.sec_circulation .wrap {
  display: block;
}
section.sec_circulation .lead {
  margin-inline: auto;
  width: min(500px, 100%);
}
@media all and (min-width: 751px) {
  section.sec_circulation .lead {
    margin-top: 26px;
  }
}
section.sec_circulation .image {
  margin: 0 calc(50% - 50vw) 40px;
}
@media all and (min-width: 751px) {
  section.sec_circulation .image {
    margin: 140px calc(50% - 50vw) 0;
  }
}

/* 使い続けられる傘でありたい
---------------------------------------------------------- */
@media all and (max-width: 750px) {
  section.sec_future {
    margin-top: 30px;
  }
}
@media all and (min-width: 751px) {
  section.sec_future .sec_ttl {
    padding-top: 14px;
  }
}
section.sec_future .wrap {
  display: block;
}
section.sec_future .lead {
  width: min(500px, 100%);
  margin-inline: auto;
}
@media all and (min-width: 751px) {
  section.sec_future .lead {
    margin-top: 26px;
  }
}
section.sec_future .image_wrap {
  margin: 0 calc(50% - 50vw) 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media all and (min-width: 751px) {
  section.sec_future .image_wrap {
    margin: 140px calc(50% - 50vw) 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0 10px;
  }
}

/* 真夏の太陽の下でも、すべての人々が笑顔で外出できるように
---------------------------------------------------------- */
section.sec_last {
  margin-top: 110px;
  padding: 148px 0 404px;
  background-image: url(https://demo-service.ebisumart.com/client_info/UV100/contentimage/img/manufacturing/last_sp.webp);
  overflow: hidden;
  z-index: 0;
}
@media all and (min-width: 751px) {
  section.sec_last {
    text-align: left;
    margin-top: 180px;
    padding: 377px 141px;
    background-image: url(https://demo-service.ebisumart.com/client_info/UV100/contentimage/img/manufacturing/last_pc.webp);
  }
}
section.sec_last .sec_last_bg {
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
}
section.sec_last .sec_last_bg_video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.sec_last .inner {
  position: relative;
  z-index: 1;
}
@media all and (min-width: 1001px) {
  section.sec_last .sec_ttl {
    text-align: left;
  }
}