@media screen and (min-width:1280px) {
.sp { display: none;}
}
@media screen and (max-width:1279px) {
section { padding: 50px 0;}
body.active { overflow-y: hidden;}
.sec-title-text { font-size: 16px;}
.sec-title-text::before { font-size: 36px;}
.sec-img-title { height: 150px;}
.sec-img-title::before { width: 200px; height: 150px;}
.header { height: var(--header-height-sp);}
.header .logo, .footer .logo { width: 150px;}
.gloval-nav {
  position: absolute;
  top: 70px;
  left: 5%;
  width: 90%;
  background: var(--primary);
  display: block;
  font-size: 16px;
  text-align: center;
  height: 0;
  overflow: hidden;
  padding: 0;
  transition: all 0.2s ease;
}
.gloval-nav.active {
  height: 612px;
  max-height: calc(100vh - var(--header-height-sp));
  padding: 50px 5%;
  transition: all 0.2s ease;
  overflow-y: auto;
}
.gloval-nav a { display: block; height: auto; color: var(--white); padding: 20px 5%;}
.sp-menu {
  width: var(--header-height-sp);
  height: var(--header-height-sp);
  background-color: var(--primary);
  position: relative;
  cursor: pointer;
}
.sp-menu-bar {
  height: 3px;
  width: 35px;
  background-color: var(--white);
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}
.sp-menu-bar::before,
.sp-menu-bar::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 35px;
  background-color: var(--white);
  position: absolute;
  left: 0; right: 0;
  margin: auto;
  transition: all 0.2s ease;
}
.sp-menu-bar::before { top: -14px;}
.sp-menu-bar::after { bottom: -14px;}
.sp-menu.active .sp-menu-bar { height: 0;}
.sp-menu.active .sp-menu-bar::before { transform: rotate(45deg); top: 0; transition: all 0.2s ease;}
.sp-menu.active .sp-menu-bar::after { transform: rotate(-45deg); bottom: auto; top: 0; transition: all 0.2s ease;}

.wrapper { padding-top: var(--header-height-sp);}
.first-view {
  width: 90%;
  height: 138.46vw;
  background: url(../img/first-view-sp.png) no-repeat;
  background-size: 100%;
  margin: auto;
}
.fv-text {
  top: 34%;
  left: 10%;
}
.fv-text-sub { margin-top: 5vw;}
.fv-text-sub span { margin-bottom: 2vw;}
.sec-about {
  background-color: var(--bg);
  margin-top: -60vw;
  margin-left: 0;
  padding-top: 40vw;
  padding-left: 0;
}
.about-box { display: block;}
.about-text { width: 90%; padding-right: 0; max-width: 600px; margin: auto;}
.sec-about .sec-title { text-align: center;}
.about-text-head { font-size: min(6vw, 24px); text-align: center;}
.about-img { width: 90%; max-width: 600px; margin: 30px auto 0;}
.service-box,
.infomation-box { margin-top: 30px; column-gap: 4%;}
.company-content dl { width: 100%;}
.footer-nav { display: block; text-align: center;}
.kv-title { font-size: 36px;}
.gallery-box {
  margin: 0 auto 50px;
  column-gap: 4%;
  row-gap: 5vw;
}
.gallery-item { width: 48%;}
.privacy-item { margin: 30px 0;}
.privacy-title {
  padding: 2px 10px 6px;
  margin-bottom: 10px;
}
}
@media screen and (max-width:1049px) {
.service-box { row-gap: 30px;}
.service-item { width: 48%; padding: 20px 5%;}
.service-item img { margin-bottom: 10px;}
.service-item-no { margin-bottom: 5px; }
.infomation-item { width: 48%;}
.company-content dl { display: block;}
.company-content dt, .company-content dd { width: 100%; text-align: center;}
.gallery-item img { height: 30vw;}
.article-table dl { display: block;}
.article-table dt { text-align: center;}
.article-table dt, .article-table dd { width: 100%;}
}