header div nav ul li:nth-of-type(4) a span {
  position: relative;
  font-weight: 600;
}
header div nav ul li:nth-of-type(4) a span::after {
  content: "";
  width: 100%;
}

@media (max-width: 768px) {
  header.is_active div {
    background-image: url(../image/pro13s.jpg);
    background-image: -webkit-image-set(url(../image/pro13s.jpg) 1x, url(../image/pro13.jpg) 2x);
    background-image: image-set(url(../image/pro13s.jpg) 1x, url(../image/pro13.jpg) 2x);
    background-position: center;
    background-size: cover;
  }
}
@media (max-width: 480px) {
  header.is_active div {
    background-image: url(../image/pro13s.jpg);
    background-position: 60% center;
    background-size: cover;
  }
}

.box {
  position: relative;
  color: #fff;
  width: 100%;
  overflow: hidden;
}
.box .clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  z-index: -1;
}
.box .clip .bg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.box .content {
  position: relative;
  width: 100%;
}
.box .content > section {
  padding: 300px 50px 100px;
  max-width: 1100px;
  height: 100vh;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .box .content > section {
    padding: 400px 50px 50px;
  }
}
@media (max-width: 480px) {
  .box .content > section {
    padding: 350px 30px 50px;
  }
}
.box .content > section h2 {
  color: #c5955e;
  font-size: 500%;
  margin-bottom: 30px;
  line-height: 1;
}
@media (max-width: 768px) {
  .box .content > section h2 {
    font-size: 350%;
    margin-bottom: 50px;
  }
}
@media (max-width: 480px) {
  .box .content > section h2 {
    font-size: 300%;
    margin-bottom: 35px;
  }
}
.box .content > section h2 small {
  display: block;
  font-size: 15px;
  margin-top: 0.7rem;
}
@media (max-width: 768px) {
  .box .content > section h2 small {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .box .content > section h2 small {
    font-size: 9px;
  }
}
.box .content > section h2 small span {
  text-transform: uppercase;
}
.box .content > section h2 + p {
  font-size: 250%;
  line-height: 1.5;
  font-weight: 800;
}
@media (max-width: 768px) {
  .box .content > section h2 + p {
    font-size: 200%;
  }
}
@media (max-width: 480px) {
  .box .content > section h2 + p {
    font-size: 180%;
  }
}
.box .content > section h2 + p small {
  display: inline-block;
  vertical-align: top;
  font-weight: 700;
  margin-top: 0.5rem;
}
@media (max-width: 480px) {
  .box .content > section h2 + p small {
    margin-top: 0.25rem;
  }
}
.box .content .products_box {
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 20%);
  padding: 10rem 0 0;
}
.box .content .products_box h3 {
  font-size: 250%;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .box .content .products_box h3 {
    font-size: 200%;
  }
}
@media (max-width: 480px) {
  .box .content .products_box h3 {
    margin-top: -80px;
    margin-bottom: 0;
    font-size: 150%;
  }
}
.box .content .products_box h3 small {
  font-size: 40%;
  color: #ddd;
}
.box .content .products_box p {
  font-size: 120%;
  line-height: 2.5;
  width: 100%;
}
@media (max-width: 768px) {
  .box .content .products_box p {
    font-size: 110%;
  }
}
.box .content .products_box p img {
  width: 100%;
  padding: 3rem 0;
}
@media (max-width: 768px) {
  .box .content .products_box p img {
    padding: 2rem 0;
  }
}
.box .content .products_box ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 3rem auto 0;
}
.box .content .products_box ul li {
  width: 48%;
  margin-bottom: 4%;
}
.box .content .products_box ul li img {
  width: 100%;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .box .content .products_box ul li img {
    border-radius: 7px;
  }
}
@media (max-width: 480px) {
  .box .content .products_box ul li img {
    border-radius: 5px;
  }
}
.box .mail {
  background: #000;
  width: 100%;
}
.box .mail h5 {
  font-size: 250%;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .box .mail h5 {
    font-size: 200%;
  }
}
@media (max-width: 480px) {
  .box .mail h5 {
    font-size: 160%;
  }
}
.box .mail dl {
  padding: 1rem 0 10rem;
}
@media (max-width: 768px) {
  .box .mail dl {
    padding: 1rem 0 5rem;
  }
}
@media (max-width: 480px) {
  .box .mail dl {
    padding: 1rem 0 3rem;
  }
}
.box .mail dt {
  margin-bottom: 1rem;
  font-size: 110%;
  line-height: 1.7;
}
.box .mail picture {
  display: block;
  margin-bottom: 1rem;
}
.box .mail picture img {
  width: 80%;
  max-width: 800px;
}
@media (max-width: 480px) {
  .box .mail picture img {
    width: 90%;
  }
}
.box .mail ul {
  display: flex;
  justify-content: center;
  margin: 0;
}
@media (max-width: 480px) {
  .box .mail ul {
    display: block;
  }
}
.box .mail ul li {
  margin: 0 1rem 0 0;
}
@media (max-width: 480px) {
  .box .mail ul li {
    margin: 0;
  }
}
.box .mail ul li img {
  width: 300px;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .box .mail ul li img {
    border-radius: 7px;
  }
}
@media (max-width: 480px) {
  .box .mail ul li img {
    border-radius: 5px;
  }
}
@media (max-width: 768px) {
  .box .mail ul li img {
    width: 250px;
  }
}
@media (max-width: 480px) {
  .box .mail ul li img {
    width: 230px;
  }
}
@media (min-width: 1440px) {
  .box .mail ul li img {
    width: 350px;
  }
}
.box .mail ul li > a {
  padding: 0;
  background: none;
}
.box .mail ul li > a:hover img {
  opacity: 0.8;
}
.box .mail ul li:nth-of-type(2) {
  margin: 0;
}
@media (max-width: 480px) {
  .box .mail ul li:nth-of-type(2) {
    margin-top: 0.8rem;
  }
}

.box_1100 {
  padding: 0 50px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .box_1100 {
    padding: 0 30px;
  }
}

.box_900 {
  padding: 0 50px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .box_900 {
    padding: 0 30px;
  }
}

#head .clip .bg {
  background-image: url(../image/top5s.jpg);
  background-image: -webkit-image-set(url(../image/top5s.jpg) 1x, url(../image/top5.jpg) 2x);
  background-image: image-set(url(../image/top5s.jpg) 1x, url(../image/top5.jpg) 2x);
  background-position: 80% center;
  background-size: cover;
}
@media (max-width: 768px) {
  #head .clip .bg {
    background-image: url(../image/top5sss.jpg);
    background-image: -webkit-image-set(url(../image/top5sss.jpg) 1x, url(../image/top5ss.jpg) 2x);
    background-image: image-set(url(../image/top5sss.jpg) 1x, url(../image/top5ss.jpg) 2x);
    background-position: center;
    background-size: cover;
  }
}
@media (max-width: 480px) {
  #head .clip .bg {
    background-image: url(../image/top5sss.jpg);
    background-position: 60% center;
    background-size: cover;
  }
}

.line_box .line_photo {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url(../image/pro5s.jpg);
  background-image: -webkit-image-set(url(../image/pro5s.jpg) 1x, url(../image/pro5.jpg) 2x);
  background-image: image-set(url(../image/pro5s.jpg) 1x, url(../image/pro5.jpg) 2x);
  background-position: center;
  background-size: cover;
}
@media (max-width: 768px) {
  .line_box .line_photo {
    background-image: url(../image/pro5sss.jpg);
    background-image: -webkit-image-set(url(../image/pro5sss.jpg) 1x, url(../image/pro5ss.jpg) 2x);
    background-image: image-set(url(../image/pro5sss.jpg) 1x, url(../image/pro5ss.jpg) 2x);
  }
}
@media (max-width: 480px) {
  .line_box .line_photo {
    background-image: url(../image/pro5sss.jpg);
    background-position: 90% center;
  }
}
.line_box .line_photo h4 {
  color: #fff;
  background: #3E58BD;
  text-align: center;
  padding: 1rem 3rem;
}
@media (max-width: 768px) {
  .line_box .line_photo h4 {
    padding: 1rem 2rem;
  }
}
.line_box .line_photo span {
  display: block;
  font-size: 180%;
  margin-bottom: 0.25rem;
}
@media (max-width: 768px) {
  .line_box .line_photo span {
    font-size: 160%;
  }
}
.line_box .line_photo small {
  font-size: 90%;
}
.line_box .line_data p {
  font-size: 120%;
  line-height: 2;
  padding: 5rem 0 1rem;
}
@media (max-width: 768px) {
  .line_box .line_data p {
    font-size: 110%;
    padding: 3rem 0 1rem;
  }
}
@media (max-width: 480px) {
  .line_box .line_data p {
    font-size: 100%;
    padding: 2rem 0 1rem;
  }
}
.line_box .line_data table {
  width: 100%;
  text-align: center;
  margin: 3rem 0;
}
@media (max-width: 768px) {
  .line_box .line_data table {
    margin: 2rem 0;
  }
}
@media (max-width: 480px) {
  .line_box .line_data table {
    margin: 1rem 0;
  }
}
.line_box .line_data table.table2 td {
  background: #EAEEFB;
}
.line_box .line_data caption {
  text-align: center;
  font-size: 160%;
  margin-bottom: 2rem;
}
.line_box .line_data th {
  text-align: center;
  padding: 1.25rem;
  border: 1px solid #3E58BD;
  background: #B8C3ED;
  font-size: 115%;
  font-weight: 600;
}
@media (max-width: 768px) {
  .line_box .line_data th {
    padding: 0.75rem 0.5rem;
    font-size: 90%;
    vertical-align: middle;
  }
}
@media (max-width: 480px) {
  .line_box .line_data th {
    padding: 0.5rem 0.25rem;
    font-size: 85%;
  }
}
.line_box .line_data td {
  text-align: center;
  padding: 1.25rem;
  border: 1px solid #3E58BD;
  background: #eff0f5;
  vertical-align: middle;
  font-weight: 500;
  width: 20%;
}
@media (max-width: 768px) {
  .line_box .line_data td {
    padding: 1rem;
    font-size: 85%;
  }
}
@media (max-width: 480px) {
  .line_box .line_data td {
    padding: 0.5rem;
    font-size: 75%;
  }
}
.line_box .line_data .table1 td {
  line-height: 1.7;
}
.line_box .line_data td.db {
  background: #d5daf1;
}
@media (max-width: 480px) {
  .line_box .line_data td.db {
    width: 4rem;
  }
}

.flow {
  padding: 8rem 0 0;
  background: #000;
}
@media (max-width: 768px) {
  .flow {
    padding: 5rem 0 0;
  }
}
@media (max-width: 480px) {
  .flow {
    padding: 8rem 0 0;
  }
}
.flow h3 {
  font-size: 250%;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .flow h3 {
    font-size: 200%;
  }
}
@media (max-width: 480px) {
  .flow h3 {
    margin-top: -80px;
    margin-bottom: 0;
    font-size: 150%;
  }
}
.flow h3 small {
  font-size: 40%;
  color: #ddd;
}
.flow p {
  font-size: 120%;
  line-height: 2.5;
  width: 100%;
}
@media (max-width: 768px) {
  .flow p {
    font-size: 110%;
  }
}
.flow p img {
  width: 100%;
  padding: 2rem 0;
}
@media (max-width: 768px) {
  .flow p img {
    padding: 1rem 0;
  }
}
.flow .fbox ul {
  display: block;
  margin: 3rem auto 0;
}
@media (max-width: 480px) {
  .flow .fbox ul {
    margin: 2rem auto;
  }
}
@media (max-width: 480px) {
  .flow .fbox ul {
    margin: 1rem auto;
  }
}
.flow .fbox ul li {
  width: 100%;
  margin: 0;
}
.flow .fbox ul li > p.upper {
  margin-bottom: 1rem;
}
.flow .fbox ul li > p {
  font-size: 200%;
  color: #888;
}
@media (max-width: 768px) {
  .flow .fbox ul li > p {
    font-size: 180%;
  }
}
@media (max-width: 480px) {
  .flow .fbox ul li > p {
    font-size: 160%;
  }
}
.flow .fbox ul li > p img {
  width: 35px;
}
@media (max-width: 768px) {
  .flow .fbox ul li > p img {
    width: 30px;
  }
}
@media (max-width: 480px) {
  .flow .fbox ul li > p img {
    width: 20px;
  }
}
.flow .fbox ul li section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}
@media (max-width: 480px) {
  .flow .fbox ul li section {
    display: block;
  }
}
@media (max-width: 768px) {
  .flow .fbox ul li section {
    margin-bottom: 1rem;
  }
}
.flow .fbox ul li section div {
  position: relative;
  width: 48%;
  height: 300px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .flow .fbox ul li section div {
    border-radius: 7px;
  }
}
@media (max-width: 480px) {
  .flow .fbox ul li section div {
    border-radius: 5px;
  }
}
@media (max-width: 768px) {
  .flow .fbox ul li section div {
    height: 250px;
  }
}
@media (max-width: 480px) {
  .flow .fbox ul li section div {
    width: 100%;
    height: 200px;
    margin-bottom: 1rem;
  }
}
.flow .fbox ul li section div span {
  position: absolute;
  top: -5rem;
}
.flow .fbox ul li section dl {
  width: 48%;
  text-align: left;
}
@media (max-width: 480px) {
  .flow .fbox ul li section dl {
    width: 100%;
  }
}
.flow .fbox ul li section dl dt {
  font-size: 140%;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .flow .fbox ul li section dl dt {
    font-size: 130%;
  }
}
@media (max-width: 480px) {
  .flow .fbox ul li section dl dt {
    margin-bottom: 0.5rem;
  }
}
.flow .fbox ul li section dl dd {
  line-height: 2;
  font-weight: 400;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .flow .fbox ul li section dl dd {
    font-size: 90%;
    margin-bottom: 0.5rem;
  }
}
.flow .fbox ul li section dl dd p {
  font-size: 200%;
  margin: 1rem 0;
  color: #c5955e;
}
@media (max-width: 768px) {
  .flow .fbox ul li section dl dd p {
    font-size: 170%;
  }
}
.flow .fbox ul li section dl dd i {
  margin-right: 0.5rem;
}
.flow .fbox ul li section dl dd a {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  background: #a86e2c;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .flow .fbox ul li section dl dd a {
    padding: 0.25rem 1rem;
  }
}
.flow .fbox .f1 div {
  background-image: -webkit-image-set(url(../image/pro6s.jpg) 1x, url(../image/pro6.jpg) 2x);
  background-image: image-set(url(../image/pro6s.jpg) 1x, url(../image/pro6.jpg) 2x);
}
.flow .fbox .f2 div {
  background-image: -webkit-image-set(url(../image/pro7s.jpg) 1x, url(../image/pro7.jpg) 2x);
  background-image: image-set(url(../image/pro7s.jpg) 1x, url(../image/pro7.jpg) 2x);
}
.flow .fbox .f3 div {
  background-image: -webkit-image-set(url(../image/pro8s.jpg) 1x, url(../image/pro8.jpg) 2x);
  background-image: image-set(url(../image/pro8s.jpg) 1x, url(../image/pro8.jpg) 2x);
}
.flow .fbox .f4 div {
  background-image: -webkit-image-set(url(../image/pro9s.jpg) 1x, url(../image/pro9.jpg) 2x);
  background-image: image-set(url(../image/pro9s.jpg) 1x, url(../image/pro9.jpg) 2x);
}
.flow .fbox .f5 div {
  background-image: -webkit-image-set(url(../image/pro10s.jpg) 1x, url(../image/pro10.jpg) 2x);
  background-image: image-set(url(../image/pro10s.jpg) 1x, url(../image/pro10.jpg) 2x);
}
.flow .fbox .f6 div {
  background-image: -webkit-image-set(url(../image/pro11s.jpg) 1x, url(../image/pro11.jpg) 2x);
  background-image: image-set(url(../image/pro11s.jpg) 1x, url(../image/pro11.jpg) 2x);
}
.flow .fbox .f7 div {
  background-image: -webkit-image-set(url(../image/pro12s.jpg) 1x, url(../image/pro12.jpg) 2x);
  background-image: image-set(url(../image/pro12s.jpg) 1x, url(../image/pro12.jpg) 2x);
}
/*# sourceMappingURL=products.css.map */