@charset "utf-8";

main {
  position: relative;
  overflow-x: clip;
  padding-bottom: 220px;
}

@media screen and (max-width: 768px) {
  main {
    padding-bottom: 120px;
  }
}

main::before {
  content: '';
  position: absolute;
  translate: -50% 0;
  top: 0;
  left: 50%;
  width: 1920px;
  height: 100%;
  aspect-ratio: 1920/6649;
  background: url(/wp/wp-content/themes/cosmos-cpa/img/top/page-deco-pc.png) repeat-y;
  background-size: 100% auto;
}

@media screen and (max-width: 1280px) {
  main::before {
    width: min(calc(1920/1280*100vw), 1920px);
  }
}

@media screen and (max-width: 768px) {
  main::before {
    width: 100%;
    top: 0;
    aspect-ratio: initial;
    background: url(/wp/wp-content/themes/cosmos-cpa/img/top/page-deco-sp.png) repeat-y;
    background-size: 100% auto;
  }
}

/* ↓↓↓ common ↓↓↓ */
section .section-en {
  font-family: var(--jost);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: #dcf8ff;
  mix-blend-mode: hard-light;
}

section .txt-group {
  position: relative;
}

section .txt-group .section-head {
  position: relative;
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  section .txt-group .section-head {
    font-size: 2.4rem;
  }
}

section .txt-group .section-head::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 8px;
  background: linear-gradient(90deg, #17ceff 50%, #187df5 50%);
  translate: 0 -100%;
  top: 0;
  left: 0;
}

section .txt-group .section-ttl {
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
}

@media screen and (max-width: 768px) {
  section .txt-group .section-ttl {
    font-size: 2.4rem;
  }
}

section .txt-group .section-txt {
  position: relative;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.714;
  text-align: justify;
  margin-top: 18px;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  section .txt-group .section-txt {
    margin-top: 8px;
  }
}

section .more-btn {
  position: relative;
  width: 220px;
  height: 50px;
  border-radius: 9999px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  overflow: clip;
  padding: 5px 23px;
}

@media screen and (max-width: 768px) {
  section .more-btn {
    align-self: flex-end;
  }
}

section .more-btn.bg-none {
  background-color: unset;
}

section .more-btn::before {
  content: '';
  position: absolute;
  width: 30px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: linear-gradient(45deg, #17ceff 10%, #0019b4);
  translate: 0 -50%;
  top: 50%;
  right: 19px;
  transition: scale ease .3s;
}

section .more-btn:hover::before {
  scale: 14;
}

@media screen and (max-width: 768px) {
  section .more-btn:hover::before {
    scale: 1;
  }
}

section .more-btn::after {
  content: '';
  position: absolute;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 9999px;
  border: 1px solid transparent;
  background: linear-gradient(45deg, #17ceff 10%, #0019b4) border-box border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
}

section .more-btn .arrow {
  position: absolute;
  display: block;
  width: 30px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  translate: 0 -50%;
  top: 50%;
  right: 19px;
  transition: background-size ease .3s;
}

section .more-btn .arrow::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  scale: 0;
  transition: scale ease .3s;
}

section .more-btn:hover .arrow::before {
  scale: 1;
}

@media screen and (max-width: 768px) {
  section .more-btn:hover .arrow::before {
    scale: 0;
  }
}

section .more-btn .arrow::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 7px;
  mask-image: url(/wp/wp-content/themes/cosmos-cpa/img/top/more-arrow.svg);
  mask-position: center center;
  mask-size: 13px 7px;
  background: #fff;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  transition: background-color ease .3s;
}

section .more-btn:hover .arrow::after {
  background: linear-gradient(45deg, #17ceff 10%, #0019b4) border-box border-box;
}

@media screen and (max-width: 768px) {
  section .more-btn:hover .arrow::after {
    background: #fff;
  }
}

section .more-btn .txt {
  position: relative;
  font-size: 1.4rem;
  font-family: var(--jost);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.08em;
  transition: color ease .3s;
}

section .more-btn:hover .txt {
  color: #fff;
}

section .more-btn.txt-w .txt {
  color: #fff;
}

section .more-btn.txt-w:hover .txt {
  color: inherit;
}

@media screen and (max-width: 768px) {
  section .more-btn.txt-w:hover .txt {
    color: #fff;
  }

  section .more-btn:hover .txt {
    color: inherit;
  }
}

/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ fv ↓↓↓ */
.fv {
  overflow-x: clip;
  margin: 0 auto;
}

.fv .inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.fv .swiper-area {
  position: relative;
  width: min(calc(1610/1280*100vw), 1610px);
  display: block;
  margin-left: 40px;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .fv .swiper-area {
    width: calc(365/375*100vw);
    margin-left: auto;
  }
}

.fv .inner .deco01 {
  position: absolute;
  width: 20.704%;
  top: 11.043%;
  left: -6.25%;
}

.fv .inner .deco02 {
  position: absolute;
  width: 21.875%;
  bottom: -40.537%;
  right: 15.938%;
  z-index: 0;
}

.fv .inner .txt-img {
  position: absolute;
  width: min(723/1280*100vw, 723px);
  bottom: 48px;
  left: 40px;
  z-index: 2;
  /* opacity: 0; */
  /* translate: 50px 0; */
}

@media screen and (max-width: 768px) {
  .fv .inner .txt-img {
    width: calc(289/375*100vw);
    bottom: -15px;
    left: 24px;
  }
}

.fv .inner .scroll-group {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  right: 32px;
  bottom: -80px;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .fv .inner .scroll-group {
    right: 20px;
    bottom: -50px;
  }
}

.fv .inner .scroll-group .txt {
  font-family: var(--jost);
  font-size: 1.3rem;
  font-style: italic;
  letter-spacing: 0.08em;
  writing-mode: vertical-lr;
  color: #fff;
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  .fv .inner .scroll-group .txt {
    font-size: 1rem;
    margin-bottom: 5px;
  }
}

.fv .inner .scroll-group .bar {
  position: relative;
  display: block;
  width: 1px;
  height: 152px;
  background-color: #fff;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .fv .inner .scroll-group .bar {
    height: 105px;
  }
}

.fv .inner .scroll-group .bar::before {
  content: '';
  position: absolute;
  translate: 0 -100%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  animation: scroolAnime 2s 2s ease normal infinite;
}

@keyframes scroolAnime {
  0% {
    translate: 0 -100%;
  }

  100% {
    translate: 0 100%;
  }
}

/* ↑↑↑ fv ↑↑↑ */

/* ↓↓↓ event ↓↓↓ */
.event {
  position: relative;
  padding: 0 30px;
  margin-top: 50px;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .event {
    padding: 0 25px;
    margin-top: 65px;
  }
}

.event .inner {
  display: flex;
  gap: 30px;
  margin-left: clamp(60px, 137 / 1280 * 100vw, 137px);
}

@media screen and (max-width: 768px) {
  .event .inner {
    display: block;
    margin-left: 0;
  }
}

.event .lead {
  min-width: 132px;
  display: inline-block;
  height: max-content;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(90deg, #17ceff, #0019b4);
  padding: 0 16px;
}

@media screen and (max-width: 768px) {
  .event .lead {
    font-size: 1.4rem;
    padding: 0 10px;
    margin-bottom: 10px;
  }
}

.event .event-link {
  display: flex;
  gap: 30px;
}

@media screen and (max-width: 768px) {
  .event .event-link {
    display: block;
  }
}

.event .event-link+.event-link {
  margin-top: 10px;
}

.event .event-link .date {
  font-size: 1.4rem;
  color: #404040;
}

@media screen and (max-width: 768px) {
  .event .event-link .date {
    font-size: 1.2rem;
  }
}

.event .event-link .txt {
  text-align: justify;
  word-break: break-all;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}

.event .event-link:hover .txt {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  .event .event-link .txt {
    text-decoration: underline;
    font-size: 1.4rem;
  }
}

/* ↑↑↑ event ↑↑↑ */

/* ↓↓↓ intro ↓↓↓ */
.intro {
  overflow-x: clip;
  margin-top: 200px;
}

.event+.intro {
  margin-top: 100px;
}

@media screen and (max-width: 768px) {

  .intro,
  .event+.intro {
    margin-top: 78px;
  }
}

.intro .inner {
  position: relative;
  max-width: 1280px;
  padding: 0 var(--pad-pc);
  margin: 0 auto;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .intro .inner {
    padding: 0 var(--pad-sp);
  }
}

.intro .inner .en {
  position: absolute;
  font-size: 20rem;
  font-family: var(--jost);
  font-weight: 700;
  font-style: italic;
  line-height: 0.8;
  color: #f2f6f6;
  writing-mode: vertical-lr;
  top: -90px;
  right: 0;
  z-index: -1;
}

@media screen and (max-width: 768px) {
  .intro .inner .en {
    font-size: 7.8rem;
    top: -14px;
    right: -2px;
  }
}

.intro .inner .txt {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2.375;
  margin-left: clamp(60px, 137/1280*100vw, 137px);
}

@media screen and (max-width: 768px) {
  .intro .inner .txt {
    line-height: 2;
    text-align: justify;
    margin-left: unset;
  }
}

/* ↑↑↑ intro ↑↑↑ */

/* ↓↓↓ mission ↓↓↓ */
.mission {
  overflow-x: clip;
  margin-top: 153px;
}

.mission .inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.mission .inner .bg {
  position: absolute;
  width: 1768px;
  aspect-ratio: 1768/1038;
  background-color: #f2f6f6;
  clip-path: polygon(39% 0%, 100% 0%, 61% 100%, 0% 100%);
  top: 138px;
  left: -82px;
  z-index: -1;
}

@media screen and (max-width: 768px) {
  .mission .inner .bg {
    width: 1369px;
    aspect-ratio: 1369/1216;
    clip-path: polygon(59% 0%, 100% 0%, 41% 100%, 0% 100%);
    top: 40px;
    left: unset;
    right: calc((-200 + 444) * ((100vw - 375px) / (768 - 375)) - 444px);
  }
}

.mission .inner .mainImg {
  position: relative;
  width: min(calc(1574/1280*100vw), 1574px);
  margin-left: -27.188%;
}

@media screen and (max-width: 768px) {
  .mission .inner .mainImg {
    width: calc(440/375*100vw);
  }
}

.mission .inner .section-en {
  position: absolute;
  font-size: clamp(10rem, 250/1280*100vw, 25rem);
  bottom: -25.808%;
  right: 24px;
}

@media screen and (max-width: 768px) {
  .mission .inner .section-en {
    font-size: calc(76/375*100vw);
    bottom: -20.2%;
    right: 0;
  }
}

.mission .inner .flex-box {
  max-width: calc(1012px + (var(--pad-pc))*2);
  display: flex;
  align-items: flex-end;
  gap: 18px clamp(10px, 88/1280*100vw, 88px);
  padding: 0 var(--pad-pc);
  margin: 60px auto 0;
}

@media screen and (max-width: 768px) {
  .mission .inner .flex-box {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 var(--pad-sp);
  }
}

.mission .inner .flex-box .txt-group {
  max-width: 660px;
  flex: 1;
}

@media screen and (max-width: 768px) {
  .mission .inner .flex-box .txt-group {
    max-width: unset;
  }
}

/* ↑↑↑ mission ↑↑↑ */

/* ↓↓↓ business ↓↓↓ */
.business {
  overflow-x: clip;
  margin-top: 190px;
}

@media screen and (max-width: 768px) {
  .business {
    margin-top: 75px;
  }
}

.business .inner {
  position: relative;
  max-width: 1280px;
  padding: 0 var(--pad-pc) min(14.063%, 180px);
  margin: 0 auto;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .business .inner {
    padding: 0 var(--pad-sp);
  }
}

.business .inner .mainImg {
  position: absolute;
  width: min(calc(1117/1280*100vw), 1117px);
  bottom: 0;
  right: -15.86%;
}

@media screen and (max-width: 768px) {
  .business .inner .mainImg {
    position: relative;
    width: calc(440/375*100vw);
    bottom: unset;
    right: 19px;
  }
}

.business .inner .mainImg .section-en {
  position: absolute;
  font-size: clamp(10rem, 200/1280*100vw, 20rem);
  bottom: -20.91%;
  left: -20.592%;
}

@media screen and (max-width: 768px) {
  .business .inner .mainImg .section-en {
    font-size: calc(76/375*100vw);
    bottom: -37px;
    left: 0;
  }
}

.business .inner .txt-group {
  max-width: 1012px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .business .inner .txt-group {
    margin-top: 65px;
  }
}

.business .inner .txt-group :is(.section-head, .section-txt) {
  max-width: 352px;
}

@media screen and (max-width: 768px) {
  .business .inner .txt-group :is(.section-head, .section-txt) {
    max-width: unset;
  }
}

.business .inner .more-btn {
  margin-top: 28px;
}

/* ↑↑↑ business ↑↑↑ */

/* ↓↓↓ bg-area ↓↓↓ */
.bg-area {
  overflow-x: clip;
  margin-top: 160px;
}

@media screen and (max-width: 768px) {
  .bg-area {
    margin-top: 78px;
  }
}

.bg-area .inner {
  position: relative;
  max-width: 1280px;
  padding: 80px var(--pad-pc) 75px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .bg-area .inner {
    padding: 100px var(--pad-sp) 65px;
  }
}

.bg-area .inner::before {
  content: '';
  position: absolute;
  width: 2256px;
  height: 100%;
  background-color: #001932;
  clip-path: polygon(21% 0%, 100% 0%, 79% 100%, 0% 100%);
  translate: -50% -50%;
  top: 50%;
  left: 50%;
}

.bg-area .inner .bg-gray {
  content: '';
  position: absolute;
  width: 1768px;
  height: 1038px;
  background-color: #F2F6F6;
  clip-path: polygon(39% 0%, 100% 0%, 61% 100%, 0% 100%);
  translate: 0 100%;
  bottom: 280px;
  right: 243px;
  z-index: -1;
}

@media screen and (max-width: 768px) {
  .bg-area .inner .bg-gray {
    width: 1369px;
    height: 1216px;
    clip-path: polygon(59% 0%, 100% 0%, 41% 100%, 0% 100%);
    translate: unset;
    bottom: calc(226/375*100vw);
    right: calc((-200 + 444) * ((100vw - 375px) / (768 - 375)) - 444px);
  }
}

.bg-area .inner .flex-box {
  position: relative;
  max-width: 1012px;
  display: flex;
  gap: 44px;
  color: #fff;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .bg-area .inner .flex-box {
    flex-direction: column;
  }
}

.bg-area .inner .flex-box .img {
  position: relative;
}

@media screen and (max-width: 768px) {
  .bg-area .inner .flex-box .img {
    padding-right: 22px;
  }
}

.bg-area .inner .flex-box .img .en {
  position: absolute;
  font-size: 6.4rem;
  font-style: italic;
  font-family: var(--jost);
  font-weight: 700;
  writing-mode: vertical-rl;
  line-height: 1;
  mix-blend-mode: exclusion;
  top: -14px;
  right: -32px;
}

@media screen and (max-width: 768px) {
  .bg-area .inner .flex-box .img .en {
    font-size: calc(40/375*100vw);
    top: -11px;
    right: 0;
  }
}

.bg-area .inner .flex-box .txt-group {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .bg-area .inner .flex-box .txt-group {
    margin-top: 30px;
  }
}

.bg-area .inner .flex-box .section-head {
  font-size: 2.8rem;
}

@media screen and (max-width: 768px) {
  .bg-area .inner .flex-box .section-head {
    font-size: 2.4rem;
  }
}

.bg-area .inner .flex-box .more-btn {
  margin: 28px 0 0 auto;
}

@media screen and (max-width: 768px) {
  .bg-area .inner .flex-box .more-btn {
    margin: 20px 0 0 auto;
  }
}

/* ↑↑↑ bg-area ↑↑↑ */

/* ↓↓↓ people ↓↓↓ */
.people {
  overflow-x: clip;
  margin-top: 182px;
}

@media screen and (max-width: 768px) {
  .people {
    margin-top: 90px;
  }
}

.people .inner {
  max-width: 1280px;
  margin: 0 auto;
}

.people .inner .txt-group {
  max-width: 660px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .people .inner .txt-group {
    max-width: calc(660px + (var(--pad-sp))*2);
    padding: 0 var(--pad-sp);
  }
}

.people .inner .txt-group {
  max-width: 660px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .people .inner .txt-group {
    max-width: unset;
  }
}

.people .inner .txt-group .section-ttl {
  position: relative;
}

.people .inner .txt-group .section-en {
  position: absolute;
  font-size: clamp(2rem, 300/1280*100vw, 30rem);
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  z-index: -1;
}

@media screen and (max-width: 768px) {
  .people .inner .txt-group .section-en {
    font-size: calc(89/375*100vw);
  }
}

.people .inner .txt-group .section-txt {
  margin-top: 30px;
}

.people .inner .txt-group .more-btn {
  margin: 24px auto 0;
}

.people .inner .people-swiper {
  max-width: calc(1144px + (var(--pad-pc))*2);
  overflow: unset;
  padding: 0 var(--pad-pc);
  margin: 45px auto 0;
}

@media screen and (max-width: 1024px) {
  .people .inner .people-swiper {
    max-width: calc((258 + 68)/375*100vw);
    padding: 0 28px 0 40px;
    margin: 40px auto 0;
  }
}

/* .people .inner .people-swiper .swiper-slide {
  width: 364px;
  display: block;
} */

.people .inner .people-swiper .img {
  position: relative;
  padding: 10px 15px 0 0;
}

.people .inner .people-swiper .img img {
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
}

@media screen and (max-width: 1024px) {
  .people .inner .people-swiper .img img {
    box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
  }
}

.people .inner .people-swiper .img figcaption {
  position: absolute;
  font-size: clamp(2rem, 26/1204*100vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.6;
  writing-mode: vertical-rl;
  color: #fff;
  display: inline;
  top: 10px;
  right: 0;
}

@media screen and (max-width: 1024px) {
  .people .inner .people-swiper .img figcaption {
    font-size: 1.8rem;
    top: 5px;
  }
}

.people .inner .people-swiper .img figcaption .txt {
  display: block;
  height: max-content;
  line-height: 1;
  background: linear-gradient(-90deg, #001932 0%, #001932 0%);
  filter: drop-shadow(0 -10px 0 #001932);
  padding: 0 2px 8px;
}

@media screen and (max-width: 1024px) {
  .people .inner .people-swiper .img figcaption .txt {
    filter: drop-shadow(0 -5px 0 #001932);
    padding: 0 2px 5px;
  }
}

.people .inner .people-swiper .img figcaption .txt:not(:last-of-type) {
  margin-left: 5px;
}

.people .inner .people-swiper .year {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-top: 20px;
}

.people .inner .people-swiper .name {
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin-top: 4px;
}

.people .inner .people-swiper .arrow {
  position: absolute;
  width: 50px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  cursor: pointer;
  translate: 0 -50%;
  top: 50%;
  transition: background-size ease .3s;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .people .inner .people-swiper .arrow {
    width: 40px;
  }
}

.people .inner .people-swiper .arrow-prev {
  background: linear-gradient(135deg, #17CEFF, #0019B4);
  rotate: 180deg;
  left: 0;
}

@media screen and (max-width: 1024px) {
  .people .inner .people-swiper .arrow-prev {
    left: -16px;
  }
}

.people .inner .people-swiper .arrow-next {
  background: linear-gradient(45deg, #17CEFF, #0019B4);
  right: 1%;
}

@media screen and (max-width: 1024px) {
  .people .inner .people-swiper .arrow-next {
    right: -16px;
  }
}

.people .inner .people-swiper .arrow::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  scale: 0;
  transition: scale ease .3s;
}

.people .inner .people-swiper .arrow:hover::before {
  scale: 0.95;
}

@media screen and (max-width: 768px) {
  .people .inner .people-swiper .arrow:hover::before {
    scale: 0;
  }
}

.people .inner .people-swiper .arrow::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 7px;
  mask-image: url(/wp/wp-content/themes/cosmos-cpa/img/top/more-arrow.svg);
  mask-position: center center;
  mask-size: 13px 7px;
  background: #fff;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  transition: background-color ease .3s;
}

.people .inner .people-swiper .arrow:hover::after {
  background: linear-gradient(45deg, #17ceff 10%, #0019b4) border-box border-box;
}

@media screen and (max-width: 768px) {
  .people .inner .people-swiper .arrow:hover::after {
    background: #fff;
  }
}

/* ↑↑↑ people ↑↑↑ */

/* ↓↓↓ career ↓↓↓ */
.career {
  overflow-x: clip;
  margin-top: 180px;
}

@media screen and (max-width: 768px) {
  .career {
    margin-top: 72px;
  }
}

.career .inner {
  position: relative;
  max-width: 1280px;
  padding: min(17.5%, 224px) var(--pad-pc) 0;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .career .inner {
    padding: 0 var(--pad-sp);
  }
}

.career .inner .bg-gray {
  content: '';
  position: absolute;
  width: 1768px;
  height: 1038px;
  background-color: #F2F6F6;
  clip-path: polygon(39% 0%, 100% 0%, 61% 100%, 0% 100%);
  top: -270px;
  left: min(calc((443 - 160) * ((100vw - 768px) / (1280 - 768)) + 160px), 443px);
  z-index: -1;
}

@media screen and (max-width: 768px) {
  .career .inner .bg-gray {
    width: 1369px;
    height: 1216px;
    clip-path: polygon(59% 0%, 100% 0%, 41% 100%, 0% 100%);
    /* translate: 0 -100%; */
    top: unset;
    bottom: 123px;
    left: -300px;
  }
}

.career .inner .mainImg {
  position: absolute;
  width: clamp(800px, 1086/1280*100vw, 1086px);
  top: 0;
  left: -292px;
}

@media screen and (max-width: 768px) {
  .career .inner .mainImg {
    position: relative;
    width: calc(440/375*100vw);
    left: calc(-90px - (var(--pad-sp)));
  }
}

.career .inner .txt-group {
  position: relative;
  max-width: clamp(300px, 352/1024*100vw, 352px);
  margin: 0 calc(min(((223 - 60) * ((100vw - 768px) / (1280 - 768)) + 60px), 223px) - var(--pad-pc)) 0 auto;
}

@media screen and (max-width: 768px) {
  .career .inner .txt-group {
    max-width: unset;
    margin: 60px auto 0;
  }
}

.career .inner .txt-group .section-en {
  position: absolute;
  width: max-content;
  font-size: clamp(10rem, 150/1280*100vw, 15rem);
  text-indent: 0.6em;
  bottom: -10%;
  left: -90px;
}

@media screen and (max-width: 768px) {
  .career .inner .txt-group .section-en {
    font-size: calc(76/375*100vw);
    line-height: 0.85;
    translate: 0 -100%;
    bottom: unset;
    top: 7%;
    left: -2%;
  }
}

.career .inner .txt-group .section-en .s-txt {
  font-size: clamp(5.5rem, 100/1280*100vw, 10.5rem);
}

@media screen and (max-width: 768px) {
  .career .inner .txt-group .section-en .s-txt {
    font-size: calc(57/375*100vw);
  }
}

.career .inner .txt-group .more-btn {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .career .inner .txt-group .more-btn {
    margin: 20px 0 0 auto;
  }
}

/* ↑↑↑ career ↑↑↑ */

/* ↓↓↓ guidelines ↓↓↓ */
.guidelines {
  position: relative;
  background: url(/wp/wp-content/themes/cosmos-cpa/img/top/guidelines-bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: clip;
  padding: 154px 0 212px;
  margin-top: 176px;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .guidelines {
    padding: 110px 0;
    margin-top: 74px;
  }
}

.guidelines .inner {
  max-width: 1280px;
  color: #fff;
  padding: 0 var(--pad-pc);
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .guidelines .inner {
    padding: 0 var(--pad-sp);
  }
}

.guidelines .inner .txt-group {
  max-width: 660px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .guidelines .inner .txt-group {
    max-width: unset;
  }
}

.guidelines .inner .section-ttl {
  position: relative;
}

.guidelines .inner .section-ttl .txt {
  position: relative;
}

.guidelines .inner .section-en {
  position: absolute;
  width: max-content;
  font-size: clamp(18rem, 241/1280*100vw, 24.1rem);
  color: #002467;
  mix-blend-mode: difference;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
}

@media screen and (max-width: 768px) {
  .guidelines .inner .section-en {
    width: calc(324/375*100vw);
    font-size: min(calc(88/375*100vw), 10rem);
    text-align: center;
    word-break: break-all;
  }
}

.guidelines .inner .section-txt {
  position: relative;
  z-index: 1;
}

.guidelines .inner .more-btn {
  position: relative;
  margin: 28px auto 0;
  z-index: 1;
}

/* ↑↑↑ guidelines ↑↑↑ */


/* ↓↓↓ foot-entry-btn ↓↓↓ */
.foot-entry-group {
  position: relative;
  max-width: 1012px;
  width: calc(100% - 30px * 2);
  display: flex;
  gap: 5.138339920948617cqw;
  margin: -110px auto 0;
  container-type: inline-size;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .foot-entry-group {
    width: calc(100% - 25px * 2);
    flex-direction: column;
    gap: 8px;
    margin-top: -50px;
  }
}

.foot-entry-btn {
  position: relative;
  width: clamp(600px, 1012/1280*100vw, 1012px);
  height: 220px;
  font-size: 4rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(90deg, #17ceff, #0c76da);
  display: flex;
  align-items: center;
  padding-left: 4.446640316205533cqw;
  margin: 0 auto;
}

.foot-entry-btn:last-of-type {
  background: linear-gradient(90deg, #0c76da, #0019b4);
}

@media screen and (max-width: 768px) {
  .foot-entry-btn {
    width: clamp(325px, 400/480*100vw, 400px);
    height: 100px;
    font-size: 2.4rem;
    padding: 0 26px;
    margin: 0 auto;
  }
}

.foot-entry-btn .en {
  font-family: var(--jost);
  font-size: 4.8rem;
}

@media screen and (max-width: 768px) {
  .foot-entry-btn .en {
    display: inline-block;
    font-size: 2.8rem;
    margin-left: 4px;
  }
}

.foot-entry-btn::before {
  content: '';
  position: absolute;
  width: 66px;
  height: 7px;
  background: url(/wp/wp-content/themes/cosmos-cpa/img/top/foot-entry-arrow_pc.svg) no-repeat;
  background-size: contain;
  background-position: center;
  top: 50%;
  right: 48px;
}

@media screen and (max-width: 768px) {
  .foot-entry-btn::before {
    width: 42px;
    height: 5px;
    background: url(/wp/wp-content/themes/cosmos-cpa/img/top/foot-entry-arrow_sp.svg) no-repeat;
    background-size: cover;
    background-position: center;
    right: 20px;
  }
}

.foot-entry-btn .txt {
  background: linear-gradient(90deg, #fff, #fff) 0 100% /var(--d, 0%) 1px no-repeat;
  background-position: right bottom;
  transition: background-size ease .3s;
}

@media screen and (max-width: 768px) {
  .foot-entry-btn .txt {
    background: linear-gradient(90deg, #fff, #fff) 0 100% / 100% 1px no-repeat;
    padding: 0 8px;
  }
}

.foot-entry-btn:hover .txt {
  --d: 100%;
  background-position: left bottom;
}

/* ↑↑↑ foot-entry-btn ↑↑↑ */