.thepage .p-head {
  background-image: url(../img/culture/hero@2x.jpg);
}

main .sec-top {
  padding-bottom: 100px;
}
.wt-env {
  margin-top: 100px;
}
.env-desc {
  height: 100%;
  display: flex;
  align-items: center;
}
.env-desc .inn {
  font-size: 18px;
  line-height: 40px;
}
.env-desc .hl {
  color:#F6AA00;
}
.env-desc .un {
  display: inline-block;
  position: relative;
}
.env-desc .un:after {
  content:"";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 3px;
  width: 100%;
  background: #F6AA00;
}
.et {
  text-align: center;
  margin-bottom: 100px;
}
.et h2 {
  font-size: 36px;
  line-height: 50px;
}
.et h2 .hl {
  color:#fff;
  background: #F6AA00;
}
#m1, #m2 {
  padding:100px 0;
}
.row-gi {
  margin-bottom: 50px;
}
.row-gi>div {
  margin-bottom: 30px;
}
.gi-box {
  padding:25px 37px 38px;
  background: #fff;
  box-shadow: 3px 3px 0 #F6AA00;
  height: 100%;
}
.gi-box .t {
  margin-bottom: 30px;
}
.gi-box .t>div {
  display: inline-block;
  vertical-align: middle;
}
.gi-box .t .n {
  margin-left: 18px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}
.gi-box .txt {
  font-size: 15px;
}

.row-gi2 {
  text-align: center;
}
.row-gi2 figcaption {
  margin-top: 15px;
  line-height: 25px;
}

.row-bene {
  margin-bottom: -24px;
}
.row-bene>div {
  margin-bottom: 24px;
}
.row-bene .bene {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 436px;
  width: 436px;
  margin:auto;
  border-radius: 50%;
  padding:10px;
}
.bene .t {
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  margin-bottom: 20px;
}
.bene .ic {
  margin-bottom: 15px;
  text-align: center;
}
.bene .txt {
  font-size: 14px;
  line-height: 28px;
  max-width: 280px;
  margin:auto;
}

.work-env {
  position: relative;
}
.work-env .we-rel {
  background: #484545;
  height: 100%;
}
.work-env .w1 {
  width: 66.66666%;
}
.we-rel .inn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.work-env .wl2>.we-l {
  width: 25%;
}
.work-env .wl2 .wc {
  width: 50%;
  position: relative;
}
.wc-cont {
  position: absolute;
  bottom: 0;
  left:0;
  background: #F6AA00;
  padding:20px;
  width: 100%;
  height: 43.5vw;

  display: flex;
  justify-content: center;
  align-items: center;
}
.wc-cont .c-inn {
  max-width: 450px;
}
.wc-cont .t {
  margin-bottom: 60px;
  text-align: center;
  font-size: 36px;
  line-height: 52px;
  font-weight: 600;
}
.wc-cont .t .hl {
  color:#fff;
  background: #484545;
}
.wc-cont .txt {
  color:#fff;
  font-size: 18px;
  line-height: 36px;
}

@media (max-width: 1199px) {
  .cate-row>.col {
    width: 33.33333%;
  }
  .gi-box {
    padding:22px 28px;
  }
  .gi-box .t {
    margin-bottom: 20px;
  }
  .gi-box .t .ic img {
    width: 70px;
  }
  .gi-box .t .n {
    margin-left: 10px;
  }
}
@media (max-width: 992px) {
  main .sec-top {
    padding-bottom: 80px;
  }
  #m1, #m2 {
    padding:80px 0;
  }
  .et {
    margin-bottom: 60px;
  }
  .row-gi2>div {
    margin-bottom: 30px;
  }
  .wc-cont .txt {
    font-size: 14px;
    line-height: 28px;
  }
  .wc-cont .t {
    margin-bottom: 18px;
    font-size: 24px;
    line-height: 38px;
  }
}
@media (max-width: 767px) {
  .thepage .p-head {
    background-image: url(../img/culture/SP/hero@2x.jpg);
  }
  .btn.pt-cate {
    font-size: 12px;
    padding-left: 50px;
  }
  .wt-env {
    margin-top: 40px;
  }
  #m1, #m2 {
    padding:40px 0;
  }
  .et {
    margin-bottom: 30px;
  }
  .et h2 {
    font-size: 26px;
    line-height: 40px;
  }
  .gi-box .t {
    margin-bottom: 15px;
  }

  .env-desc .inn {
    font-size: 16px;
    line-height: 38px;
    margin-bottom: 20px;
  }

  .row-bene .bene {
    width: 90vw;
    height: 90vw;
    max-width: 450px;
    max-height: 450px;
  }
  .bene .inn {
    margin-top: -25px;
  }
  .bene .t {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px;
  }
  .bene .ic {
    margin-bottom: 8px;
  }
  .bene .ic img {
    max-width: 100px;
  }
  .bene .txt {
    font-size: 13px;
    line-height: 25px;
    max-width: 240px;
  }

  .wc-cont.sp {
    position: relative;
    height: auto;
    padding:60px 40px;
  }
  .wc-cont .t {
    margin-bottom: 30px;
  }
  .wc-cont .txt {
    font-size: 16px;
    line-height: 32px;
  }
  .work-env .wl1 {
    flex-wrap: wrap;
  }
  .work-env .w1 {
    width: 100%;
  }
  .work-env .w2 {
    width: 100%;
  }
  .work-env .we-rel {
    height: 220px;
  }
  .work-env .wl2>.we-l {
    width: 50%;
  }


}


/* pdf button */
.btn-pdf{
  --color-bg: #484545;
  --color-text: white;
  --margin-offset: 40px calc(40px - 100px);
  
  color: var(--color-text) !important;
  background: var(--color-bg);
  
  padding: 1em 2em;
  margin-block: var(--margin-offset);
  
  display: flex;
  align-items: center;
  column-gap: 1em;
  
  max-width: fit-content;
  margin-inline: auto;
  
  @media (max-width: 992px) {
    --margin-offset: 30px calc(30px - 60px);
  }
  
  @media (max-width: 767px) {
    --margin-offset: 20px calc(20px - 30px);
  }
  
  &::after{
    --color-bg: #484545;
    --color-text: #F6AA00;
  
    content: "";
    line-height: 1;
    color: var(--color-bg);
    
    border-radius: 100vmax;
    width: 1.25em;
    height: 1.25em;
    
    display: grid;
    place-items: center;
    
    --arrow-size: .5em;
    --arrow-width: 2px;
    background:
      linear-gradient(45deg, transparent calc(50% - calc(var(--arrow-width) / 2)), var(--color-bg) calc(50% - calc(var(--arrow-width) / 2)) calc(50% + calc(var(--arrow-width) / 2)), transparent 0) no-repeat center calc(50% - (var(--arrow-size) / 4)) / var(--arrow-size) calc(var(--arrow-size) / 2),
      linear-gradient(-45deg, transparent calc(50% - calc(var(--arrow-width) / 2)), var(--color-bg) calc(50% - calc(var(--arrow-width) / 2)) calc(50% + calc(var(--arrow-width) / 2)), transparent 0) no-repeat center calc(50% + (var(--arrow-size) / 4)) / var(--arrow-size) calc(var(--arrow-size) / 2),
      var(--color-text);
  }
  
  &:hover{
    --color-bg: #F6AA00;
    --color-text: #484545;
    
    text-decoration: none;
    
    &::after{
      --color-bg: white;
      --color-text: #484545;
    }
  }
  
  &:visited{
    --color-text: white;
  }
}

.pdf-icon{
  width: 40px;
  height: 40px;
  
  @media (max-width: 992px) {
    width: 30px;
    height: 30px;
  }
  
  @media (max-width: 767px) {
    width: 26.64px;
    height: 26.64px;
  }
  
  .fix-for-vscode{}
}