body {
   background: url("../img/access/bg-1.jpg") repeat center top;
   font-weight: 500;
}

@media only screen and (max-width: 767px) {
   .txt {
      text-align: justify;
   }

   .txt br {
      display: none;
   }
}

@media only screen and (min-width: 768px) {
   section {
      line-height: 40px;
   }
}

#sec1 {
   position: relative;
}

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

   #sec1 .col {
      padding: 0 4vw 8vw;
   }

   #sec1 h2 {
      font-weight: 700;
      font-size: 8vw;
      line-height: 2;
      letter-spacing: 0.08em;
      text-align: center;
      position: relative;
      padding: 2vw 0;
   }

   #sec1 h2:before {
      content: '';
      border-top: 4px solid;
      border-bottom: 4px solid;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
   }

   #sec1 h2 span {
      font-weight: 400;
      font-size: 6vw;
      letter-spacing: 0;
      padding-left: 4vw;
   }

   #sec1 h3 {
      font-weight: 700;
      font-size: 5vw;
      letter-spacing: 0.08em;
      line-height: 2;
      padding-top: 8vw;
   }

   #sec1 h3 span {
      font-size: 7vw;
   }

   #sec1 .txt {
      padding-top: 6vw;
   }

   #sec1 .photo {
      position: relative;
      padding: 0 0 20vw 8vw;
   }

   #sec1 .photo figure:first-child {
      padding-bottom: 4vw;
   }

   #sec1 .photo figure:last-child {
      width: 32vw;
      position: absolute;
      bottom: 0vw;
      left: 0vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      display: grid;
      grid-template-columns: 630px 1fr;
      align-items: flex-start;
      padding: 60px 0 158px 175px;
   }

   #sec1 .col {
      padding-top: 30px;
   }

   #sec1 h2 {
      font-weight: 700;
      font-size: 60px;
      line-height: 60px;
      letter-spacing: 0.08em;
      position: relative;
      padding: 28px 0 26px 66px;
   }

   #sec1 h2:before {
      content: '';
      border-top: 4px solid;
      border-bottom: 4px solid;
      position: absolute;
      top: 0;
      right: -120px;
      bottom: 0;
      left: 0;
   }

   #sec1 h2 span {
      font-weight: 400;
      font-size: 40px;
      letter-spacing: 0;
      padding-left: 30px;
   }

   #sec1 h3 {
      font-weight: 700;
      font-size: 40px;
      letter-spacing: 0.08em;
      line-height: 62px;
      padding-top: 70px;
   }

   #sec1 h3 span {
      font-size: 47px;
   }

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

   #sec1 .photo {
      margin-right: -40px;
      position: relative;
   }

   #sec1 .photo figure:first-child {
      padding-bottom: 20px;
   }

   #sec1 .photo figure:last-child {
      width: 180px;
      position: absolute;
      bottom: -100px;
      left: -30px;
   }
}

@media only screen and (min-width: 1201px) {
   #sec1 .col {
      padding-top: 70px;
   }

   #sec1 .photo figure:last-child {
      width: 280px;
      bottom: -103px;
      left: -96px;
   }
}

#sec2 {
   position: relative;
}

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

   #sec2 .wrap {
      border: 3px solid var(--primary);
      position: relative;
      box-sizing: border-box;
      padding: 12vw 8vw 15vw;
   }

   #sec2 .wrap:before,
   #sec2 .wrap:after {
      content: "";
      position: absolute;
   }

   #sec2 .wrap:before {
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      background: url("../img/recruit/sec1_decoTL.png") no-repeat top left/45px auto, url("../img/recruit/sec1_decoTR.png") no-repeat top right/45px auto, url("../img/recruit/sec1_decoBL.png") no-repeat bottom left/45px auto, url("../img/recruit/sec1_decoBR.png") no-repeat bottom right/45px auto;
   }

   #sec2 .wrap:after {
      border: 2px solid var(--primary);
      top: 7px;
      bottom: 7px;
      left: 6px;
      right: 6px;
   }

   #sec2 h2 {
      font-weight: 700;
      font-size: 7vw;
      letter-spacing: 0.08em;
      line-height: 1.5;
      padding-bottom: 5vw;
      position: relative;
   }

   #sec2 h2:before {
      content: '';
      width: 100%;
      height: 6px;
      border-top: 1px solid;
      border-bottom: 1px solid;
      position: absolute;
      bottom: 0;
      left: 0;
   }

   #sec2 h2 span {
      font-size: 5vw;
   }

   #sec2 .txt {
      padding-top: 6vw;
   }

   #sec2 ul {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 0 2vw;
      font-weight: 700;
      font-size: 4vw;
      line-height: 2;
      letter-spacing: 0.08em;
      padding-top: 8vw;
   }

   #sec2 ul li:not(.sp) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 40vw;
      height: 40vw;
      background: url("../img/shared/bg2.jpg") repeat center top;
      color: #fff;
      border-radius: 50%;
   }

   #sec2 ul li.sp {
      width: 100%;
   }
}

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

   #sec2 .wrap {
      max-width: 1145px;
      border: 6px solid var(--primary);
      padding: 110px 0 88px;
   }

   #sec2 .wrap:before,
   #sec2 .wrap:after {
      content: "";
      position: absolute;
   }

   #sec2 .wrap:before {
      top: -6px;
      left: -6px;
      right: -6px;
      bottom: -6px;
      background: url("../img/recruit/sec1_decoTL.png") no-repeat top left, url("../img/recruit/sec1_decoTR.png") no-repeat top right, url("../img/recruit/sec1_decoBL.png") no-repeat bottom left, url("../img/recruit/sec1_decoBR.png") no-repeat bottom right;
   }

   #sec2 .wrap:after {
      border: 2px solid var(--primary);
      top: 15px;
      bottom: 15px;
      left: 13px;
      right: 13px;
   }

   #sec2 h2 {
      max-width: 740px;
      font-weight: 700;
      font-size: 53px;
      letter-spacing: 0.08em;
      line-height: 72px;
      margin: 0 auto;
      padding-bottom: 39px;
      position: relative;
   }

   #sec2 h2:before {
      content: '';
      width: 100%;
      height: 6px;
      border-top: 1px solid;
      border-bottom: 1px solid;
      position: absolute;
      bottom: 0;
      left: 0;
   }

   #sec2 h2 span {
      font-size: 40px;
   }

   #sec2 .txt {
      padding-top: 35px;
   }

   #sec2 ul {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 23px;
      font-weight: 700;
      font-size: 25px;
      line-height: 37px;
      letter-spacing: 0.08em;
      padding-top: 50px;
   }

   #sec2 ul li:not(.sp) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 312px;
      height: 312px;
      background: url("../img/shared/bg2.jpg") repeat center top;
      color: #fff;
      border-radius: 50%;
   }
}

#sec3 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3 {
      background: url("../img/recruit/sec3-deco.png") no-repeat center top/150% auto;
      padding: 12vw 0 16vw;
   }

   #sec3 h2 {
      font-weight: 700;
      font-size: 8vw;
      letter-spacing: 0.08em;
      line-height: 1.5;
   }

   #sec3 h2 span {
      display: block;
      background: url("../img/recruit/sec3-h2.png") no-repeat center top/cover;
      width: 45vw;
      font-size: 5vw;
      margin: 0 auto 2vw;
      padding: 1vw 0 5vw;
   }

   #sec3 .block {
      padding-top: 8vw;
   }

   #sec3 .box {
      background: url("../img/shared/bg2.jpg") repeat center top;
      color: #f9f0e1;
      padding: 8vw 6vw;
   }

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

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

   #sec3 .box h3 {
      font-weight: 700;
      font-size: 5vw;
      letter-spacing: 0.08em;
      line-height: 1.7;
      text-align: center;
   }

   #sec3 .box h3 span {
      font-size: 7vw;
   }

   #sec3 .box .txt {
      padding: 4vw 0 0;
   }

   #sec3 .box .note {
      line-height: 24px;
      padding-top: 4vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 {
      background: url("../img/recruit/sec3-deco.png") no-repeat center top;
      padding: 40px 0 153px;
   }

   #sec3 h2 {
      font-weight: 700;
      font-size: 53px;
      letter-spacing: 0.08em;
      line-height: 60px;
   }

   #sec3 h2 span {
      display: block;
      background: url("../img/recruit/sec3-h2.png") no-repeat center top/cover;
      width: 366px;
      font-size: 40px;
      margin: 0 auto 8px;
      padding: 10px 0 40px;
   }

   #sec3 .block {
      padding: 80px 0px 0;
   }

   #sec3 .box {
      display: grid;
      grid-template-columns: 470px 1fr;
      align-items: center;
      gap: 30px;
      background: url("../img/shared/bg2.jpg") repeat center top;
      color: #f9f0e1;
      padding: 50px 30px;
   }

   #sec3 .box:not(:last-child) {
      margin-bottom: 30px;
   }

   #sec3 .box h3 {
      font-weight: 700;
      font-size: 35px;
      letter-spacing: 0.08em;
      line-height: 64px;
   }

   #sec3 .box h3 span {
      font-size: 45px;
   }

   #sec3 .box .txt {
      padding-top: 34px;
   }

   #sec3 .box .note {
      line-height: 30px;
      padding-top: 26px;
		 font-size: 14px;
   }
}

@media only screen and (min-width: 1201px) {
   #sec3 .box {
      grid-template-columns: 470px 1fr;
      gap: 63px;
      padding: 49px;
   }
}

#sec4 {
   background: url("../img/recruit/sec4-bg-img.jpg") no-repeat center top/100% auto, url("../img/recruit/sec4-bg.jpg") repeat center top;
   position: relative;
}

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

   #sec4 h2 {
      width: 50vw;
      font-weight: 700;
      font-size: 8vw;
      line-height: 2;
      letter-spacing: 0.08em;
      border-top: 4px solid;
      border-bottom: 4px solid;
      text-align: center;
      margin: 0 auto;
      padding: 0;
   }

   #sec4 .txt {
      padding-top: 6vw;
   }

   #sec4 .box {
      background: url("../img/access/bg-1.jpg") repeat center top;
      margin-top: 12vw;
   }

   #sec4 .box h3 {
      background: url("../img/recruit/sec4-ttl-bg.jpg") no-repeat center top/cover;
      color: #f9f0e1;
      text-align: center;
      font-weight: 700;
      font-size: 6vw;
      letter-spacing: 0.08em;
      line-height: 2;
      padding: 3vw 2vw;
   }

   #sec4 .box .text {
      padding: 8vw 4vw;
      line-height: 25px;
   }

   #sec4 .box .text dl {
      display: grid;
      grid-template-columns: 80px 1fr;
      border-bottom: 1px solid rgba(40, 27, 5, 0.5);
      padding-bottom: 14px;
   }

   #sec4 .box .text dl+dl {
      padding-top: 15px;
   }
}

@media only screen and (min-width: 768px) {
   #sec4 {
      padding: 150px 20px 124px;
   }

   #sec4 h2 {
      width: 310px;
      font-weight: 700;
      font-size: 53px;
      line-height: 77px;
      letter-spacing: 0.08em;
      border-top: 4px solid;
      border-bottom: 4px solid;
      text-align: center;
      margin: 0 auto;
      padding: 13px 0 19px;
   }

   #sec4 .txt {
      text-align: center;
      padding-top: 57px;
   }

   #sec4 .box {
      background: url("../img/access/bg-1.jpg") repeat center top;
      margin-top: 95px;
   }

   #sec4 .box+.box {
      margin-top: 80px;
   }

   #sec4 .box h3 {
      background: url("../img/recruit/sec4-ttl-bg.jpg") no-repeat center top/cover;
      color: #f9f0e1;
      text-align: center;
      font-weight: 700;
      font-size: 40px;
      letter-spacing: 0.08em;
      line-height: 60px;
      padding: 28px 20px 31px;
   }

   #sec4 .box .text {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      width: 94%;
      max-width: 1000px;
      margin: 0 auto;
      padding: 66px 0 72px;
      line-height: 30px;
   }

   #sec4 .box .text dl {
      display: grid;
      grid-template-columns: 90px 1fr;
      border-bottom: 1px solid rgba(40, 27, 5, 0.5);
      padding-bottom: 14px;
   }

   #sec4 .box .text dl+dl {
      padding-top: 15px;
   }
}

@media only screen and (min-width: 1201px) {
   #sec4 .box .text {
      gap: 60px;
   }

   #sec4 .box .text dl {
      grid-template-columns: 113px 1fr;
   }
}