section {
  overflow: hidden;
}

.outer {
  width: 100%;
  margin: 0 0 6rem;
  background: rgba(255, 255, 255, 0.3);
}

.content {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 6rem 0 1rem;
}

.content-2 {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 6rem 0 6rem;
}

.header {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 1rem;
}

.header-text {
  color: #333;
  font-size: min(66px, 6.6vw);
  font-family: "TensegritySans";
  font-style: normal;
  line-height: 1;
}

.main-inner {
  width: 100%;
  padding: 0 0 5rem;
  margin: 0 auto 5rem;
  border-bottom: #666 solid 1px;
}

.main-inner:last-child {
  width: 100%;
  padding: 0 0 5rem;
  margin: 0 auto;
  border-bottom: none;
}

.main-inner-noframe {
  width: 100%;
  padding: 0 0 2rem;
  margin: 0 auto 5rem;
  border-bottom: #666 solid 1px;
}

.main-inner-noborder {
  width: 100%;
  padding: 0;
  margin: 0 auto 5rem;
}

.main-inner-nobtm {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.button {
  width: 36%;
}

.button-margin {
  margin: 0 3rem 0 0;
}

.button a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
  padding: 5% 10%;
  width: 100%;
  text-align: center;
  color: #6b58c6;
  font-size: min(16px, 1.6vw);
  text-decoration: none;
  border: #6b58c6 solid 1px;
  background-image: url(../img/common/btn_arrow.png);
  background-position: center right 4%;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.3s;
}

a.button-link {
  text-decoration: none;
  text-decoration-color: #6b58c6;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.button-off {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
  padding: 5% 10%;
  width: 100%;
  text-align: center;
  color: #ccc;
  font-size: min(16px, 1.6vw);
  text-decoration: none;
  border: #ccc solid 1px;
  background-image: url(../img/common/btn_arrow_off.png);
  background-position: center right 4%;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  .pc_display {
    display: none;
  }

  .pc {
    display: none;
  }

  .outer {
    margin: 0 0 3rem;
  }

  .content {
    width: 90%;
    margin: 1rem auto 0;
    padding: 3rem 0 0;
  }

  .content-2 {
    width: 90%;
    margin: 1rem auto 0;
    padding: 3rem 0;
  }

  .header {
    margin: 0 auto 1rem;
  }

  .header-text {
    color: #333;
    font-size: min(66px, 6.6vw);
    font-family: "TensegritySans";
    font-style: normal;
    line-height: 1;
  }

  .main-inner {
    padding: 0 0 3rem;
    margin: 0 auto 3rem;
    border-bottom: #666 solid 1px;
  }

  .main-inner:last-child {
    padding: 0 0 3rem;
    margin: 0 auto;
    border-bottom: none;
  }

  .main-inner-noframe {
    width: 100%;
    padding: 0 0 3rem;
    margin: 0 auto 3rem;
    border-bottom: #666 solid 1px;
  }

  .main-inner-noborder {
    width: 100%;
    padding: 0 0 3rem;
    margin: 0 auto 3rem;
  }

  .main-inner-nobtm {
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }

  .header {
    width: 90%;
    margin: 0 auto;
  }

  .header-text {
    font-size: min(42px, 10.77vw);
  }

  .line {
    width: 80%;
    margin: 3rem auto 0;
  }

  .button {
    width: 80%;
  }

  .button-margin {
    margin: 0 0 2rem;
  }

  .button a {
    padding: 5% 5%;
    font-size: min(14px, 3.59vw);
    border: #6b58c6 solid 1px;
  }

  .button a:hover {
    text-decoration: none;
    color: #fff;
    border: #6b58c6 solid 1px;
  }

  a.button-link {
    text-decoration: none;
    text-decoration-color: #fff;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
  }

  a.button-link:hover {
    text-decoration: none;
  }

  .button-off {
    width: 100%;
    padding: 4% 4%;
    font-size: min(16px, 4.1vw);
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sp_display {
    display: none;
  }

  .pc {
    display: none;
  }

  .sp_br {
    display: none;
  }

  .content {
    width: 90%;
    margin: 3rem auto;
  }

  .content-2 {
    width: 90%;
    margin: 3rem auto;
  }

  .button {
    width: 40%;
  }

  .button a {
    font-size: min(16px, 1.98vw);
    background-position: center right;
  }
}

@media screen and (min-width: 1025px) {
  .sp_display {
    display: none;
  }

  .sp {
    display: none;
  }

  .sp_br {
    display: none;
  }

  .button {
    width: 300px;
  }

  .alpha a {
    display: block;
  }

  .alpha a:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
  }

  .alpha a {
    display: block;
  }

  .alpha a:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
  }

  a.btn_over img {
    -webkit-transition: -weblit-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }

  a.btn_over img:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  .md_br {
    display: none;
  }

  .button a:hover {
    text-decoration: none;
    color: #6b58c6;
    background-position: center right 0;
    background-color: rgba(255, 255, 255, 1);
  }

  a.button-link:hover {
    text-decoration: none;
  }
}

@media screen and (min-width: 1200px) {
  .md_br {
    display: none;
  }

  .button a:hover {
    text-decoration: none;
    color: #6b58c6;
    background-position: center right 0;
    background-color: rgba(255, 255, 255, 1);
  }

  a.button-link:hover {
    text-decoration: none;
  }
}