#key {
   background: url("../img/company/key.jpg") no-repeat center/cover;
}

#sec1 {
   position: relative;
}

#sec1 .wrap {
   z-index: 1;
}

@media only screen and (max-width: 767px) {
   #sec1 {
      padding: 15vw 0 30vw;
   }

   #sec1 .wrap {
      display: flex;
      flex-direction: column;
      gap: 6vw;
   }

   #sec1 .col {
      display: contents;
   }

   #sec1 h2 {
      font-weight: 500;
      font-style: italic;
      font-size: 8vw;
      letter-spacing: 0.1em;
      line-height: 1.2;
      text-align: center;
      order: 1;
   }

   #sec1 h2:after {
      content: '';
      display: block;
      width: 12vw;
      border-bottom: 4px solid;
      margin: 3vw auto 0;
   }

   #sec1 figure {
      order: 2;
   }

   #sec1 .txt {
      order: 3;
   }

   #sec1 .txt-name {
      width: 70%;
      margin-left: auto;
      order: 4;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      padding: 113px 0 133px;
   }

   #sec1 .wrap {
      display: flex;
      justify-content: flex-end;
      gap: 40px;
   }

   #sec1 figure {
      width: 579px;
   }

   #sec1 .col {
      width: 493px;
      padding-top: 20px;
   }

   #sec1 h2 {
      font-weight: 500;
      font-style: italic;
      font-size: 46px;
      letter-spacing: 0.1em;
      text-align: center;
   }

   #sec1 h2:after {
      content: '';
      display: block;
      width: 40px;
      border-bottom: 4px solid;
      margin: 10px auto 0;
   }

   #sec1 .txt {
      padding-top: 50px;
   }

   #sec1 .txt-name {
      text-align: right;
      padding-top: 32px;
   }
}

@media only screen and (min-width: 1241px) {
   #sec1 .wrap {
      gap: 76px;
   }

   #sec1 .col {
      padding-right: 20px;
   }
}

#sec2 {
   position: relative;
}

.gmap iframe {
   display: block;
   width: 100%;
   height: 100%;
}

@media only screen and (max-width: 767px) {
   #sec2 {
      color: #fff;
      padding-bottom: 8vw;
   }

   #sec2:before {
      content: '';
      width: 100%;
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      position: absolute;
      top: -20vw;
      bottom: 30vw;
      left: 0;
      transform: skewY(10deg);
   }

   #sec2:after {
      content: '';
      width: 100%;
      height: 60vw;
      background: #e5e4e2;
      position: absolute;
      bottom: 0;
      left: 0;
      transform: skewY(10deg);
   }

   #sec2 .bg-parallax {
      min-height: 100vw;
   }

   #sec2 .img-parallax img {
      object-position: -127vw -40vw;
   }

   #sec2 .wrap {
      padding-top: 15vw;
      padding-bottom: 30vw;
      z-index: 1;
   }

   #sec2 .photo-1 {
      width: 33vw;
      position: absolute;
      top: 10vw;
      right: 0;
   }

   #sec2 .photo-2 {
      width: 33vw;
      position: absolute;
      top: 50vw;
      left: 0;
   }

   #sec2 .photo-3 {
      width: 36vw;
      position: absolute;
      bottom: 10vw;
      right: 0;
   }

   #sec2 .photo-4 {
      width: 24vw;
      position: absolute;
      bottom: 0;
      right: 40vw;
   }

   #sec2 h2 {
      font-weight: 500;
      font-size: 4.8vw;
      line-height: 1.5;
      color: #fff;
      position: relative;
   }

   #sec2 h2 .en {
      font-weight: 400;
      font-style: italic;
      font-size: 12.8vw;
   }

   #sec2 h2 .ja {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2vw;
   }

   #sec2 h2 .ja:before,
   #sec2 h2 .ja:after {
      content: '';
      width: 4vw;
      border-top: 1px solid rgba(255, 255, 255, 0.55);
   }

   #sec2 .logo {
      padding-top: 6vw;
      position: relative;
   }

   #sec2 .logo img {
      max-width: 45vw;
   }

   #sec2 .logo figcaption {
      line-height: 24px;
      padding-top: 4vw;
   }

   #sec2 .txt-info {
      text-align: left;
      line-height: 28px;
      padding-top: 6vw;
      position: relative;
   }

   #sec2 .txt-info dl {
      display: grid;
      grid-template-columns: 22vw 1fr;
   }

   #sec2 .txt-info dl:not(:last-child) {
      padding-bottom: 4vw;
   }

   #sec2 .txt-info a {
      background: url("../img/shared/icon-location-wh.png") no-repeat center left/10px auto;
      border-bottom: 1px solid;
      padding-left: 15px;
   }

   #sec2 .tel {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      color: #253641;
      margin-top: 8vw;
      padding: 8vw 4vw;
      box-sizing: border-box;
      position: relative;
      font-weight: 500;
      font-size: 4vw;
      line-height: 1.5;
      letter-spacing: 0.14em;
   }

   #sec2 .tel:before {
      content: '';
      border-right: 14px solid #fff;
      border-left: 14px solid #fff;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
   }

   #sec2 .tel .num {
      font-weight: 900;
      font-size: 8vw;
   }

   #sec2 .tel .num small {
      font-size: 5vw;
   }

   #sec2 .tel code {
      font-weight: 900;
   }

   #sec2 .tel code small {
      font-size: 3.2vw;
   }

   #sec2 .gmap {
      height: 480px;
      margin-top: 12vw;
   }

   #sec2 .button {
      padding-top: 8vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 {
      color: #fff;
   }

   #sec2:before {
      content: '';
      width: 100%;
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      position: absolute;
      top: -185px;
      bottom: 100px;
      left: 0;
      transform: skewY(18deg);
   }

   #sec2:after {
      content: '';
      width: 100%;
      height: 510px;
      background: #e5e4e2;
      position: absolute;
      bottom: 0;
      left: 0;
      transform: skewY(20.8deg);
   }

   #sec2 .bg-parallax {
      background-image: url("../img/company/sec2-bg-img.jpg");
      min-height: 560px;
   }

   #sec2 .wrap {
      padding-top: 103px;
      padding-bottom: 238px;
      z-index: 1;
   }

   #sec2 .photo-1 {
      width: 249px;
      position: absolute;
      top: 185px;
      right: -196px;
   }

   #sec2 .photo-2 {
      width: 252px;
      position: absolute;
      top: 684px;
      left: -250px;
   }

   #sec2 .photo-3 {
      width: 279px;
      position: absolute;
      bottom: 180px;
      right: -250px;
   }

   #sec2 .photo-4 {
      width: 172px;
      position: absolute;
      bottom: 70px;
      right: 58px;
   }

   #sec2 h2 {
      position: relative;
   }

   #sec2 h2 span {
      display: flex;
      justify-content: center;
   }

   #sec2 h2 .en {
      font-weight: 400;
      font-style: italic;
      font-size: 80px;
      letter-spacing: 0.1em;
      line-height: 80px;
   }

   #sec2 h2 .ja {
      align-items: center;
      gap: 10px;
      font-weight: 500;
      font-size: 25px;
      line-height: 45px;
      letter-spacing: 0.14em;
      padding-top: 3px;
   }

   #sec2 h2 .ja:before,
   #sec2 h2 .ja:after {
      content: '';
      width: 22px;
      border-top: 1px solid rgba(255, 255, 255, 0.55);
   }

   #sec2 .logo {
      padding-top: 57px;
   }

   #sec2 .logo img {
      max-width: 321px;
   }

   #sec2 .logo figcaption {
      font-size: 19px;
      padding-top: 20px;
   }

   #sec2 .txt-info {
      width: 810px;
      margin: 0 auto;
      padding-top: 70px;
      text-align: left;
      line-height: 25px;
   }

   #sec2 .txt-info dl {
      display: grid;
      grid-template-columns: 137px 1fr;
      border-bottom: 1px solid rgba(255, 255, 255, 0.17);
      padding-bottom: 6px;
   }

   #sec2 .txt-info dl+dl {
      padding-top: 11px;
   }

   #sec2 .txt-info a {
      display: inline-block;
      background: url("../img/shared/icon-location-wh.png") no-repeat center left/10px auto;
      border-bottom: 1px solid;
      padding-left: 12px;
      line-height: 20px;
      margin-left: 10px;
   }

   #sec2 .txt-info a:hover {
      border-bottom-color: transparent;
   }

   #sec2 .tel {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      color: #253641;
      width: 458px;
      margin: 51px auto 0;
      padding: 22px 0;
      box-sizing: border-box;
      position: relative;
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      letter-spacing: 0.14em;
   }

   #sec2 .tel:before {
      content: '';
      border-right: 14px solid #fff;
      border-left: 14px solid #fff;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
   }

   #sec2 .tel .num {
      font-weight: 900;
      font-size: 37px;
      line-height: 45px;
      letter-spacing: 0.14em;
   }

   #sec2 .tel .num small {
      font-size: 26px;
   }

   #sec2 .tel code {
      font-weight: 900;
   }

   #sec2 .tel code small {
      font-size: 13px;
   }

   #sec2 .gmap {
      width: 800px;
      height: 396px;
      margin: 50px auto 0;
   }

   #sec2 .button {
      padding-top: 48px;
   }

   #sec2 .btn-print {
      color: #253641;
      font-size: 13px;
      letter-spacing: 0.1em;
      padding-top: 6px;
   }

   #sec2 .btn-print a {
      border-bottom: 1px solid;
   }

   #sec2 .btn-print a:hover {
      border-bottom-color: transparent;
   }
}

#sec3 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3 {
      padding: 10vw 0 15vw;
   }

   #sec3:before {
      content: '';
      height: 0;
      border-top: 1px solid;
      position: absolute;
      top: 0;
      right: 0;
      left: 4vw;
   }

   #sec3 h2 {
      font-style: italic;
      font-weight: 500;
      font-size: 8vw;
      line-height: 1;
      letter-spacing: 0.1em;
   }

   #sec3 .box {
      padding-top: 6vw;
   }

   #sec3 .box dl {
      display: grid;
      grid-template-columns: 60px 1fr;
      gap: 10px;
      position: relative;
      padding-left: 20px;
   }

   #sec3 .box dl:after {
      content: '';
      width: 10px;
      height: 10px;
      background: #253641;
      position: absolute;
      top: 10px;
      left: 0;
      border-radius: 50%;
   }

   #sec3 .box dl:not(:last-child) {
      padding-bottom: 34px;
   }

   #sec3 .box dl:not(:last-child):before {
      content: '';
      width: 3px;
      height: 100%;
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      position: absolute;
      top: 15px;
      left: 4px;
   }

   #sec3 .box dl dt {
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.06em;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 {
      padding-bottom: 140px;
   }

   #sec3:before {
      content: '';
      width: calc(50% + 500px);
      height: 0;
      border-top: 1px solid;
      position: absolute;
      top: 0;
      right: 0;
   }

   #sec3 h2 {
      font-style: italic;
      font-weight: 500;
      font-size: 46px;
      line-height: 78px;
      letter-spacing: 0.1em;
   }

   #sec3 .box {
      padding: 46px 20px 0;
   }

   #sec3 .box dl {
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 14px;
      position: relative;
      padding-left: 37px;
   }

   #sec3 .box dl:after {
      content: '';
      width: 14px;
      height: 14px;
      background: #253641;
      position: absolute;
      top: 10px;
      left: 0;
      border-radius: 50%;
   }

   #sec3 .box dl:not(:last-child) {
      padding-bottom: 34px;
   }

   #sec3 .box dl:not(:last-child):before {
      content: '';
      width: 7px;
      height: 100%;
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      position: absolute;
      top: 17px;
      left: 4px;
   }

   #sec3 .box dl dt {
      font-weight: 700;
      font-size: 21px;
      letter-spacing: 0.06em;
   }
}

#sec4 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec4 {
      background: url("../img/company/sec4-deco.png") no-repeat bottom right/50% auto, url("../img/company/sec4-bg-img.jpg") no-repeat center/cover;
      padding: 15vw 0;
   }

   #sec4 h2 {
      font-weight: 500;
      font-size: 4.8vw;
      line-height: 1.5;
   }

   #sec4 h2 .en {
      font-weight: 400;
      font-style: italic;
      font-size: 12.8vw;
   }

   #sec4 h2 .ja {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2vw;
   }

   #sec4 h2 .ja:before,
   #sec4 h2 .ja:after {
      content: '';
      width: 4vw;
      border-top: 1px solid rgba(37, 54, 65, 0.55);
   }

   #sec4 .box {
      padding-top: 14vw;
   }

   #sec4 .box .item {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      border-radius: 20px;
      padding: 7vw 4vw;
      position: relative;
   }

   #sec4 .box .item:not(:last-child) {
      margin-bottom: 6vw;
   }

   #sec4 .box figure {
      width: 26.4vw;
      height: 26.4vw;
      position: absolute;
      top: 7vw;
      left: 9vw;
   }

   #sec4 .box figure img {
      width: 100%;
      max-width: inherit;
      height: 100%;
      /* border-radius: 50%; */
      object-fit: cover;
   }

   #sec4 .box h3 {
      display: flex;
      align-items: center;
      height: 26.4vw;
      font-weight: 700;
      font-size: 4.1vw;
      line-height: 1.5;
      letter-spacing: 0.06em;
      padding-left: 36vw;
   }

   #sec4 .box dl {
      border-top: 1px solid rgba(37, 54, 65, 0.5);
      margin-top: 4vw;
      padding-top: 4vw;
   }

   #sec4 .box dl dt br {
      display: none;
   }

   #sec4 .box dl dd {
      display: none;
   }
}

@media only screen and (min-width: 768px) {
   #sec4 {
      background: url("../img/company/sec4-deco.png") no-repeat bottom right, url("../img/company/sec4-bg-img.jpg") no-repeat center/cover;
      padding: 107px 0 160px;
   }

   #sec4 h2 {
      position: relative;
   }

   #sec4 h2 span {
      display: flex;
      justify-content: center;
   }

   #sec4 h2 .en {
      font-weight: 400;
      font-style: italic;
      font-size: 80px;
      letter-spacing: 0.1em;
      line-height: 80px;
   }

   #sec4 h2 .ja {
      align-items: center;
      gap: 10px;
      font-weight: 500;
      font-size: 25px;
      line-height: 45px;
      letter-spacing: 0.14em;
      padding-top: 3px;
   }

   #sec4 h2 .ja:before,
   #sec4 h2 .ja:after {
      content: '';
      width: 22px;
      border-top: 1px solid rgba(37, 54, 65, 0.55);
   }

   #sec4 .box {
      padding: 70px 6px 0 7px;
   }

   #sec4 .box .item {
      display: grid;
      grid-template-columns: 174px 1fr;
      align-items: center;
      gap: 60px;
   }

   #sec4 .box .item:not(:last-child) {
      margin-bottom: 26px;
   }

   #sec4 .box figure {
      width: 174px;
      height: 174px;
   }

   #sec4 .box figure img {
      width: 100%;
      max-width: inherit;
      height: 100%;
      /* border-radius: 50%; */
      object-fit: cover;
   }

   #sec4 .box .text {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      border-radius: 10px;
      padding: 29px 30px 23px 35px;
      box-sizing: border-box;
      position: relative;
   }

   #sec4 .box .text:before {
      content: '';
      width: 33px;
      height: 20px;
      background: url("../img/index/sec4-arrow.png") no-repeat center top/cover;
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
   }

   #sec4 .box .text h3 {
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.06em;
      border-bottom: 1px solid rgba(37, 54, 65, 0.5);
      padding-bottom: 11px;
   }

   #sec4 .box .text dl {
      /* display: grid; */
      grid-template-columns: 1fr 104px;
      gap: 20px;
      line-height: 30px;
      padding-top: 10px;
   }
}

#sec4 .s4_txt {
   text-align: center;
   font-size: 25px;
   margin-top: 20px;
   line-height: 2em;
}

@media only screen and (max-width: 768px) {
   #sec4 .s4_txt {
      text-align: center;
      font-size: 5vw;
      margin-top: 5vw;
      display: flex;
   }

   #sec4 .s4_txt img {
      width: 50%;
      height: 50%;
   }
}