@media screen and (min-width: 769px) {
  #kv_inside {
    background: url("../img/about/kv.jpg") center center no-repeat;
    background-size: cover; } }
@media screen and (max-width: 768px) {
  #kv_inside {
    background: url("../img/about/sp/kv.jpg") center center no-repeat;
    background-size: cover; } }

section .inner {
  position: relative;
  margin: 0 auto;
  display: flex; }
  @media screen and (min-width: 769px) {
    section .inner {
      align-items: stretch;
      justify-content: space-between;
      width: 100rem; } }
  @media screen and (max-width: 768px) {
    section .inner {
      align-items: flex-start;
      justify-content: flex-start;
      width: 63.6rem;
      flex-wrap: wrap; } }

/*section*/
@media screen and (min-width: 769px) {
  #sec1 {
    padding: 10rem 0 20rem; } }
@media screen and (max-width: 768px) {
  #sec1 {
    padding: 20rem 0 10rem; } }

#sec1::before {
  right: 0; }
  @media screen and (min-width: 769px) {
    #sec1::before {
      width: 29%; } }
  @media screen and (max-width: 768px) {
    #sec1::before {
      top: auto;
      bottom: 0;
      width: 33rem;
      height: 121rem; } }

.img1 {
  position: relative; }
  @media screen and (min-width: 769px) {
    .img1 {
      width: 50rem; } }
  @media screen and (max-width: 768px) {
    .img1 {
      width: 47rem;
      transform: translateX(23.8rem); } }

#sec1 .txt_set_box {
  position: relative; }
  @media screen and (min-width: 769px) {
    #sec1 .txt_set_box {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap; } }
  @media screen and (max-width: 768px) {
    #sec1 .txt_set_box {
      width: 100%;
      padding: 0 0 10rem; } }

@media screen and (min-width: 769px) {
  #sec1 .outline {
    position: absolute;
    bottom: -20rem;
    left: 50%;
    transform: translateX(-50%);
    width: 128rem; } }
@media screen and (max-width: 768px) {
  #sec1 .outline {
    width: 100%; } }

.img2 {
  position: relative; }
  @media screen and (min-width: 769px) {
    .img2 {
      width: 64rem; } }
  @media screen and (max-width: 768px) {
    .img2 {
      width: 70.8rem;
      margin-top: 5rem; } }

@media screen and (min-width: 769px) {
  #sec2 {
    padding: 10rem 0 0; } }
@media screen and (max-width: 768px) {
  #sec2 {
    padding: 10rem 0; } }

#sec2::before {
  left: 0; }
  @media screen and (min-width: 769px) {
    #sec2::before {
      width: 29%; } }
  @media screen and (max-width: 768px) {
    #sec2::before {
      top: auto;
      bottom: 0;
      width: 39rem;
      height: 120rem; } }

#sec2 .outline {
  position: relative; }
  @media screen and (min-width: 769px) {
    #sec2 .outline {
      width: 128rem;
      margin: 0 auto; } }
  @media screen and (max-width: 768px) {
    #sec2 .outline {
      width: 63.6rem;
      margin: 0 auto; } }

#sec2 .txt_set {
  position: relative; }
  @media screen and (min-width: 769px) {
    #sec2 .txt_set {
      width: 50rem;
      margin: 0 0 0 auto;
      padding: 0 0 10rem; } }
  @media screen and (max-width: 768px) {
    #sec2 .txt_set {
      width: 100%;
      padding: 0 0 10rem; } }

@media screen and (min-width: 769px) {
  .img3 {
    position: absolute;
    top: 20rem;
    left: 14rem;
    width: 50rem; } }
@media screen and (max-width: 768px) {
  .img3 {
    position: relative;
    width: 47rem; } }

.img4 {
  position: relative; }
  @media screen and (min-width: 769px) {
    .img4 {
      width: 50rem;
      margin: 0 0 0 auto; } }
  @media screen and (max-width: 768px) {
    .img4 {
      width: 47rem;
      transform: translateX(23.8rem);
      margin-top: 5rem; } }

@media screen and (min-width: 769px) {
  #sec3 {
    padding: 10rem 0 20rem; } }
@media screen and (max-width: 768px) {
  #sec3 {
    padding: 10rem 0; } }

#sec3::before {
  right: 0; }
  @media screen and (min-width: 769px) {
    #sec3::before {
      width: 29%; } }
  @media screen and (max-width: 768px) {
    #sec3::before {
      top: auto;
      bottom: 0;
      width: 33rem;
      height: 156rem; } }

#sec3 .outline {
  position: relative; }
  @media screen and (min-width: 769px) {
    #sec3 .outline {
      width: 128rem;
      margin: 0 auto; } }
  @media screen and (max-width: 768px) {
    #sec3 .outline {
      width: 63.6rem;
      margin: 0 auto; } }

#sec3 .txt_set {
  position: relative; }
  @media screen and (min-width: 769px) {
    #sec3 .txt_set {
      width: 50rem;
      margin: 0 0 0 14rem;
      padding: 0 0 10rem; } }
  @media screen and (max-width: 768px) {
    #sec3 .txt_set {
      width: 100%;
      padding: 0 0 10rem; } }

@media screen and (min-width: 769px) {
  .img5 {
    position: absolute;
    top: 0;
    right: 0;
    width: 64rem; } }
@media screen and (max-width: 768px) {
  .img5 {
    width: 70.8rem;
    transform: translateX(-7.2rem); } }

.img6 {
  position: relative; }
  @media screen and (min-width: 769px) {
    .img6 {
      width: 50rem;
      margin: 0; } }
  @media screen and (max-width: 768px) {
    .img6 {
      width: 47rem;
      transform: translateX(23.8rem);
      margin-top: 5rem; } }

@media screen and (min-width: 769px) {
  .img7 {
    position: absolute;
    bottom: -10rem;
    right: 14rem;
    width: 50rem; } }
@media screen and (max-width: 768px) {
  .img7 {
    width: 47rem;
    margin-top: 5rem; } }