/*グラデーション色*/
#about {
  --wp--preset--color--grad-start: #FFAC69;
  --wp--preset--color--grad-end: #40FF51;
}
#job, .job-type {
  --wp--preset--color--grad-start: #FF8BB1;
  --wp--preset--color--grad-end: #246BFF;
}
#info, .information {
  --wp--preset--color--grad-start: #64C2F4;
  --wp--preset--color--grad-end: #0008BF;
}
#anime, .anime {
  --wp--preset--color--grad-start: #F461D8;
  --wp--preset--color--grad-end: #78B2FF;
}
#new-graduate, .new-graduate {
  --wp--preset--color--grad-start: #ef6cf9!important;
  --wp--preset--color--grad-end: #08c2d6!important;
}
#mid-career, .mid-career {
  --wp--preset--color--grad-start: #08c2d6!important;
  --wp--preset--color--grad-end: #56ecbf!important;
}





h1, .parent-info {
  width: fit-content;
  background: linear-gradient(to right, var(--wp--preset--color--grad-start), var(--wp--preset--color--grad-end));
  margin: 100px auto 120px 0;
  padding: 20px 50px;
  border-radius: 50px 0px;
  border: 1px solid var(--wp--preset--color--main);
  box-shadow: 10px 10px 0px var(--wp--preset--color--main);
}
.parent-info {
  font-size: 2.2rem;
  letter-spacing: 0.5rem;
  color: #fff;
  line-height: 1.5;
}
h1 .eng, .parent-info .eng {
  font-size: 6rem;
  margin-right: 20px;
  text-transform: uppercase;
  word-break: break-all;
}
h2 {
  width: fit-content;
  background: linear-gradient(to right, var(--wp--preset--color--grad-start), var(--wp--preset--color--grad-end));
  margin: 80px auto 50px;
  padding: 10px 30px;
  border-radius: 30px 0px;
  border: 1px solid var(--wp--preset--color--main);
  box-shadow: 5px 5px 0px var(--wp--preset--color--main);
}
h2 span {
  display: inline-block;
}
h2 .eng {
  font-size: 4.5rem;
  letter-spacing: 0.2em;
  margin-right: 20px;
}
h2 .jpn {
  font-size: 2rem;
  margin-bottom: 0.6em;
}
h3 {
  position: relative;
  padding: 0.8em 1.5em;
  z-index: 1;
  color: var(--wp--preset--color--main);
}
h3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--wp--preset--color--grad-start), var(--wp--preset--color--grad-end));
  border-radius: 30px 0px;
  opacity: .2;
  z-index: -1;
}
h4 {
  font-size: 2.1rem;
}
h5 {
  padding-bottom: 0.5em;
  border-bottom: solid 1px var(--wp--preset--color--gray);
}
h6 {
  border-radius: 5px;
  padding: 0.5em 1em;
  background: var(--wp--preset--color--gray-2);
}

p {
  margin: 1em auto;
  font-size: 1.4rem;
  text-wrap: balance;         /* 均等な行幅に調整（対応ブラウザのみ） */
}
.eng {
  font-family: "Chakra Petch", sans-serif;
  font-style: italic;
  font-weight: 700;
}
small {
  font-size: 75%;
}
strong {
  font-weight: 900;
}

img {
  vertical-align: top;
}

a {
  text-decoration-line: none!important;
  color: var(--wp--preset--color--base);
  transition: 0.3s;
}
a:hover {
  opacity: 0.6;
}

ol,ul {
  counter-reset:item;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.nam-list li, .maru-list li {
  font-size: 1.4rem;
  line-height: 1.7;
  margin: 0.2em 0;
}
.nam-list li {
  padding-left: 1.2em;
  position: relative;
  margin: 0;
}
.nam-list li::before {
  counter-increment:item;
  content: counter(item) ". ";
  position: absolute;
  left: 0;
}
.nam-list li ol li {
  padding-left: 1.6em;
}
.nam-list li ol li::before {
  content: "（" counter(item) "）";
  left: -12px;
}
.nam-list li, .maru-list li {
  position: relative;
  padding-left: 1em;
  padding-bottom: 0.5em;
}
.maru-list li::before {
  content: "●";
  display: flex;
  align-items: center;
  position: absolute;
  font-size: .5em;
  height: calc(1.4rem * 1.7);
  left: 0;
  color: var(--wp--preset--color--grad-start);
}

/*表*/
table {
  margin-bottom: 50px;
  border: solid 1px var(--wp--preset--color--main);
}
th, td {
  background: none;
  padding: 0.2em;
}
th {text-align: center;}
td { font-size: 1.4rem;}
thead {
  background: var(--wp--preset--color--main);
  color: #fff;
}
thead tr { border-bottom: solid 1px #fff;}
thead th { border-right: solid 1px #fff;}
tbody th {
  position: relative;
  color: var(--wp--preset--color--main);
}
tbody th::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--wp--preset--color--grad-start), var(--wp--preset--color--grad-end));
  opacity: 0.2;
  z-index: -1;
}

.txt-center {
  text-align: center;
}
.txt-left {
  text-align: left;
}
.txt-right {
  text-align: right;
}
.txt-justify {
  text-align: justify;
}

.pc {display: block;}
.sp {display: none;}
.se {display: none;}
@media screen and (max-width: 992px) {
  .pc {display: none;}
  .sp {display: block;}
}
@media screen and (max-width: 480px) {
  .se {display: block;}
}



/* ーーーーーーーーー 背景テクスチャ ーーーーーーーーー */
.back-warp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  will-change: transform;
  z-index: -999;
  background: linear-gradient( transparent 0, transparent 100vh, var(--wp--preset--color--grad-start), var(--wp--preset--color--grad-end) 75%);
}
.home .back-warp {
  background: linear-gradient( transparent 0, transparent 100vh,#ffb2ff 0%, #ffa0bf 25%, #b483ff 50%, #05a3ff 75%);
}
.voice .back-warp {
  background: linear-gradient( transparent 0, transparent 100vh,#02ffff 0%, #05a3ff 15%, #ff8bb1 30%, #ffac69 45%, #38f05b 60%, #02ffff 75%);
}
.back-item, .back-top {
  position: relative;
  width: 100%;
  height: 100vh;
  line-height: 0;
  z-index: 0;
}
.back-item::after, .back-item::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  pointer-events: none
}
.back-item::after {
  height: 100%;
  top: 0;
  opacity: .4;
  z-index: -80;
}
.back-item::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12%;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  bottom: calc(100% - 1px);
  z-index: -90;
}

.back-top { background: var(--wp--preset--color--gray);}
.home .back-top { background: linear-gradient(#a8ebff 0%, #e8e8e8 60%, #e3e3e3 100%);}
.home .back-top img { width: 100%; height: 100%; opacity: .2; mix-blend-mode: overlay; object-fit: cover; object-position: bottom;}

.back-1 { background: linear-gradient(#dcdcdc 0%, rgba(221, 219, 221, 0) 100%);}
.back-2 { background: linear-gradient(#d1dae0 0%, rgba(209, 218, 224, 0) 100%);}
.back-3 { background: linear-gradient(#c4d8e3 0%, rgba(196, 216, 227, 0) 100%);}
.back-4 { background: linear-gradient(#b8d6e6 0%, rgba(184, 214, 230, 0) 100%);}
.back-5 { background: linear-gradient(#acd4e9 0%, rgba(172, 212, 233, 0) 100%);}
.back-6 { background: linear-gradient(#9fd2ec 0%, rgba(159, 210, 236, 0) 100%);}
.back-7 { background: linear-gradient(#94d0f0 0%, rgba(148, 208, 240, 0) 100%);}
.back-8 { background: linear-gradient(#82c2e9 0%, rgba(130, 194, 233, 0) 100%);}
.back-9 { background: linear-gradient(#6eaad8 0%, rgba(110, 170, 216, 0) 100%);}
.back-10 { background: linear-gradient(#5890c4 0%, rgba(88, 144, 196, 0) 100%);}
.back-11 { background: linear-gradient(#3f74b1 0%, rgba(63, 116, 177, 0) 100%);}
.back-12 { background: linear-gradient(#1e4d95 0%, rgba(30, 77, 149, 0) 100%);}
.back-13 { background: linear-gradient(#113683 0%, rgba(17, 54, 131, 0) 100%);}
.back-14 { background: linear-gradient(#322095 0%, rgba(50, 32, 149, 0) 100%);}
.back-15 { background: linear-gradient(#501ba4 0%, rgba(80, 27, 164, 0) 100%);}
.back-16 { background: linear-gradient(#7e14bb 0%, rgba(126, 20, 187, 0) 100%);}

.back-1::after {background-image: url(../image/back/texture-1.png);}
.back-2::after {background-image: url(../image/back/texture-2.png);}
.back-3::after {background-image: url(../image/back/texture-3.png);}
.back-4::after {background-image: url(../image/back/texture-4.png);}
.back-5::after {background-image: url(../image/back/texture-5.png);}
.back-6::after {background-image: url(../image/back/texture-6.png);}
.back-7::after {background-image: url(../image/back/texture-7.png);}
.back-8::after {background-image: url(../image/back/texture-8.png);}
.back-9::after {background-image: url(../image/back/texture-9.png);}
.back-10::after {background-image: url(../image/back/texture-10.png);}
.back-11::after {background-image: url(../image/back/texture-11.png);}
.back-12::after {background-image: url(../image/back/texture-12.png);}
.back-13::after {background-image: url(../image/back/texture-13.png);}
.back-14::after {background-image: url(../image/back/texture-14.png);}
.back-15::after {background-image: url(../image/back/texture-15.png);}
.back-16::after {background-image: url(../image/back/texture-16.png);}

.back-1::before { background-image: url(../image/back/wave-1.svg);}
.back-2::before { background-image: url(../image/back/wave-2.svg);}
.back-3::before { background-image: url(../image/back/wave-3.svg);}
.back-4::before { background-image: url(../image/back/wave-4.svg);}
.back-5::before { background-image: url(../image/back/wave-5.svg);}
.back-6::before { background-image: url(../image/back/wave-6.svg);}
.back-7::before { background-image: url(../image/back/wave-7.svg);}
.back-8::before { background-image: url(../image/back/wave-8.svg);}
.back-9::before { background-image: url(../image/back/wave-9.svg);}
.back-10::before { background-image: url(../image/back/wave-10.svg);}
.back-11::before { background-image: url(../image/back/wave-11.svg);}
.back-12::before { background-image: url(../image/back/wave-12.svg);}
.back-13::before { background-image: url(../image/back/wave-13.svg);}
.back-14::before { background-image: url(../image/back/wave-14.svg);}
.back-15::before { background-image: url(../image/back/wave-15.svg);}
.back-16::before { background-image: url(../image/back/wave-16.svg);}


#stone-background {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-image: url(../image/back/texture-stone.svg);
  background-position: center top;
  background-size: 100%;
  will-change: transform;
  z-index: -999;
}


/* ーーーーーーーーー 背景 穴 ーーーーーーーーー */
.hole {
  position: absolute;
  bottom: 0;
  z-index: -50;
}
.hole img {
  width: 100%;
  max-height: 100vh;
  object-fit: cover;
  object-position: center;

  /* マスク画像として線形グラデーションを使用 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.hole-1 { width: 30%; left: 7%;}
.hole-1 img { max-height: 200vh;}
.hole-2 { width: 38%; left: 57%;}
.hole-3 { width: 30%; left: 8%;}
.hole-4 { width: 25%; left: 65%;}
.hole-5 { width: 50%; left: 42%;}

.hole-line {
  width: 10%;
  height: 100%;
  max-width: 300px;
  left: 70%;
background: linear-gradient(rgba(255, 178, 255, 0) 0%, #00d2e9 100%);
}

@media screen and (max-width: 1000px) {
.hole-1 { width: calc(30% * 1.5); left: 7%;}
.hole-2 { width: calc(38% * 1.5); left: calc(57% - 19%);}
.hole-3 { width: calc(30% * 1.5); left: 8%;}
.hole-4 { width: calc(25% * 1.5); left: calc(65% - 12%);}
.hole-5 { width: calc(50% * 1.5); left: calc(42% - 25%);}
}

@media screen and (max-width: 680px) {
.hole-1 { width: calc(30% * 2.5); left: 7%;}
.hole-2 { width: calc(38% * 2); left: calc(57% - 38%);}
.hole-3 { width: calc(30% * 2); left: 8%;}
.hole-4 { width: calc(25% * 2); left: calc(65% - 25%);}
.hole-5 { width: 90%; left: 5%;}
}

/* ーーーーーーーーー 背景 浮遊物 ーーーーーーーーー */
.stone {
  width: 20%;
  position: relative;

}
.stone.parallax-fast, .stone.parallax-fast-2 { z-index: 50;}
.stone.parallax-slow, .stone.parallax-slow-2 { z-index: -50;}
.stone img { width: 100%;}
.stone-1 { left: 75%;}
.stone-2 { left: -5%; top: -100px;}
.stone-3 { left: 95%;}
.stone-4 { left: -5%;}
.stone-5 { left: 95%;}
.stone-7 { left: 80%;}
.stone-8 { left: 10%;}
.stone-9 { left: -5%;}
.stone-11 { left: 90%;}
.stone-12 { left: -5%;}
.stone-13, .stone-14 { top: -80px; height: 0; width: 25%;}
.stone-13 { left: 80%;}
.stone-14 { left: -15%;}


.back-aki-1, .back-yuki-1, .back-tec-1, .back-yuki-2 {
  width: 40%;
}
.back-aki-1 img, .back-yuki-1 img, .back-tec-1 img, .back-aki-2 img, .back-yuki-2 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.back-aki-1 { margin-left: 50%;}
.back-yuki-1 { margin-left: -5%;}
.back-tec-1 { margin-left: 30%;}
.back-yuki-2 { margin-left: 0%;}

.back-aki-2 {
  position: absolute;
  height: 300px;
  width: 100%;
  text-align: center;
  top: -220px;
  transform: translate(0px, 0px) scale(1) rotate(0deg);
}

@media screen and (max-width: 680px) {
  .back-aki-1, .back-yuki-1, .back-tec-1, .back-yuki-2 {
    width: 70%;
  }
  .back-aki-1 {
    margin-left: 20%;
  }
  .back-aki-2 {
    width: 50%;
    left: 25%;
  }
}

.back-text-r, .back-text-l {
  margin: 2.5em auto;
  font-family: var(--wp--preset--font-family--eng);
  font-style: italic;
  font-weight: 700;
  font-size: 6rem;
  letter-spacing: 0.1em;
  color: #fff;
  line-height: 1.2;

text-shadow:
    -1px -1px 0 var(--wp--preset--color--main), /* 左上 */
     1px -1px 0 var(--wp--preset--color--main), /* 右上 */
    -1px  1px 0 var(--wp--preset--color--main), /* 左下 */
     1px  1px 0 var(--wp--preset--color--main), /* 右下 */
     5px 5px 0px var(--wp--preset--color--main); /* ぼかしシャドウ */
}
.back-text-r span, .back-text-l span { display: block; margin-right: 20%;}
.back-text-l { text-align: left;}
.back-text-r { text-align: right;}


@media screen and (max-width: 1000px) {
  .stone {
    width: 40%;
    position: relative;
  }
  .back-text-r, .back-text-l {
    font-size: 4.5rem;
  }
}
@media screen and (max-width: 680px) {
    .back-text-r, .back-text-l {
    font-size: 3rem;
    text-shadow:
    -1px -1px 0 var(--wp--preset--color--main), /* 左上 */
     1px -1px 0 var(--wp--preset--color--main), /* 右上 */
    -1px  1px 0 var(--wp--preset--color--main), /* 左下 */
     1px  1px 0 var(--wp--preset--color--main), /* 右下 */
     3px 3px 0px var(--wp--preset--color--main); /* ぼかしシャドウ */
  }
}



/* ーーーーーーーーー ボタン ーーーーーーーーー */
.button a {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0 auto;
  color: #fff;
  font-weight: bold;
  width: 100%;
  max-width: 300px;
  padding: 15px 30px;
  border-radius: 50px;
  border: 1px solid var(--wp--preset--color--main);
  box-shadow: 5px 5px 0px var(--wp--preset--color--main);
  background: linear-gradient(to right, var(--wp--preset--color--grad-start), var(--wp--preset--color--grad-end));
}
.button a::after {
  content: "\25B6";
  position: absolute;
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1;
  top: calc(50% - 0.8rem);
  right: 25px;
  transition: 0.3s;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
}
.button a:hover {
  opacity: 1;
  top: 5px;
  left: 5px;
  box-shadow: 0px 0px 0px var(--wp--preset--color--main);
}



/* ーーーーーーーーー ページトップ ーーーーーーーーー
.page-top {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 50px;
  bottom: 50px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wp--preset--color--main);
}
.page-top::before,.page-top::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background-color: #fff;
  top: 26px;
}
.page-top::before {
  transform: rotate(-45deg);
  left: 14px;
}
.page-top::after {
  transform: rotate(45deg);
  right: 14px;
} */




/* ーーーーーーーーー ヘッダー ーーーーーーーーー */

header {
  position: fixed;
  z-index: 1000;
  width: 100%;
  transition: 0.3s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.header-cont {
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: space-between;
}
header h1 {
  all: unset;
}
header .title a {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 10px 20px;
  font-size: 2rem;
  color: var(--wp--preset--color--main);
  position: relative;
  z-index: 2;
}
header .title img {
  height: 35px;
  margin-right: 10px;
}
.title span {
  display: inline-block;
  font-family: var(--wp--preset--font-family--eng);
  font-style: italic;
  font-weight: 700;
}

/*ハンバーガーメニュー*/
.menu-btn {
  display: flex;
  height: 60px;
  width: 80px;
  justify-content: center;
  align-items: center;
  z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 2px;
  width: 50px;
  background-color: var(--wp--preset--color--main);
  position: absolute;
  transition: all 0.2s ease-in-out;
}
.menu-btn span:before {
  bottom: 10px;
}
.menu-btn span:after {
  top: 10px;
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(0, 0, 0, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(30deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-30deg);
}

#menu-btn-check {
  display: none;
}

.menu-list {
  position: relative;
  padding: 0;
  display: block;
  border-radius: 30px 0;
  border: 1px solid var(--wp--preset--color--main);
  box-shadow: 5px 5px 0px var(--wp--preset--color--main);
  background: linear-gradient( #a8ebff 0%, #dcdcdc 100%);
  z-index: 1;
}
.menu-list::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 30px 0;
  z-index: -1;
  background-image: url(../image/grid.svg);
  background-size: 30px;
  background-position: left center;
}
.menu-list-item {
  list-style: none;
  border-bottom: solid 1px var(--wp--preset--color--main);
}
.menu-list-item:first-child {
  border-radius: 30px 0 0 0;
}
.menu-list-item:last-child {
  border: none;
  border-radius: 0 0 30px 0;
}
.menu-list-item:hover {
  background: #fff;
}
.menu-list-item .manu-en {
  font-size: 2.5rem;
  font-family: var(--wp--preset--font-family--eng);
  font-style: italic;
  font-weight: 700;
  font-weight: bold;
}
.menu-list-item .manu-jp {
  font-size: 1.3rem;
  font-weight: bold;
  display: block;
}
.menu-list-item a {
  color: var(--wp--preset--color--main);
  display: block;
  width: 100%;
  margin-left: auto;
  position: relative;
  left: 0px;
  line-height: 1.3;
  padding: 15px 10px 15px 35px;
  transition: all 0.6s cubic-bezier(0.1, 0.7, 0.1, 1);
  z-index: 1;
}
.menu-list-item a:hover {
  opacity: 1;
  left: -20px;
}

.menu {
  max-width: 400px;
  width: 100%;
  height: 100vh;
  position: fixed;
  overflow-y: auto;
  top: 0px;
  padding: 80px 20px 30px;
  right: -400px;
  z-index: 1;
  background-color: #fff;
  border-left: solid 1px var(--wp--preset--color--main);
  transition: all 0.6s cubic-bezier(0.1, 0.7, 0.1, 1);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: auto;
}

@media screen and (max-width: 480px) {
  header .title img {
    height: 25px;
  }
  .menu {
    border: none;
    max-width: 100%;
    right: -100%;
  }
  .menu-list {
    max-width: 300px;
    margin: auto;
  }
}

#menu-btn-check:checked ~ .menu {
  right: 0;
}



/* ーーーーーーーーー フッター ーーーーーーーーー */
footer {
  position: relative;
  z-index: 999;
  border-radius: 150px 150px 0 0;
  background: #fff;
  box-shadow: 0 0 30px rgba(1, 40, 123, 0.3);
}
.footer-cont {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1500px;
  margin: auto;
  padding: 80px 50px;
}
footer .title {
  margin-bottom: 20px;
  display: block;
}
footer .title img { width: 100%;}

.footer-nav {
  width: 100%;
  max-width: 300px;
  margin-right: 80px;
}
.link-list li {
  width: 100%;
  margin-top: 15px;
}
.link-list li a {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  font-size: 1.8rem;
}
.link-list-insta a { background: linear-gradient(to right, #ffd341 0%, #eb6286 50%, #b94dfc 100%);}
.link-list-youtube a { background: linear-gradient(to right, #F461D8 0%, #00d2e9 100%);}
.link-list-insta a img, .link-list-youtube a img { width: calc(1.8rem * 1.7);}
.link-list-corp a { background: linear-gradient(to right, #01b698 0%, #0008bf 100%);}

.footer-menu {
  display: flex;
  width: calc(100% - 350px);
  flex-wrap: wrap;
  margin-right: -50px;
  line-height: 1.2;
}
.footer-menu-item {
  margin-right: 50px;
  margin-bottom: 20px;
}
.footer-menu-item a {
  display: inline-block;
  color: var(--wp--preset--color--main);
  padding: 5px 0;
  width: 100%;
}
.footer-menu-item > a {
  font-weight: bold;
  font-size: 1.5rem;
}
.footer-menu-item ul {
  margin: 5px 0;
}
.footer-menu-item li a {
  position: relative;
  font-size: 1.4rem;
  padding-left: 1rem;
}
.footer-menu-item li a::before {
  content: "−";
  position: absolute;
  left: 0rem;
}

.footer-menu-item li.footer-rikunabi {
  width: 100%;
  max-width: 150px;
}
.footer-menu-item li.footer-rikunabi a { padding-left: 0;}
.footer-menu-item li.footer-rikunabi a::before { content: none;}
@media screen and (max-width: 1000px) {
  footer {
    border-radius: 100px 100px 0 0;
  }
  .footer-menu {
    flex-flow: column;
    width: 100%;
    height: 350px;
    flex-wrap: wrap;
    margin: 0;
  }
  .footer-nav {
    width: 50%;
    min-width: 200px;
    margin-right: 50px;
  }
}
@media screen and (max-width: 680px) {
  .footer-cont {
    flex-flow: column;
    align-items: center;
  }
  .footer-nav {
    margin: 0 0 50px;
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  footer {
    border-radius: 50px 50px 0 0;
  }
  .footer-cont {
    padding: 60px 20px;
  }
  .footer-menu-item {
    margin-right: 25px;
    margin-bottom: 15px;
  }
}



/* ーーーーーーーーー パララックス用 ーーーーーーーーー */

.focus-target {
  transition: transform 0.2s ease, filter 0.1s ease;
  transform-style: preserve-3d;
  will-change: transform, filter;
  position: relative;
}

/*エレメント用*/
#test {
  text-align: center;
}
#test .focus-target {
  width: fit-content;
}

#test .focus-target > img {
  display: block;
}

/* ーーーーーーーーー メモ
  will-change: transform;
🔹 will-change: transform;
transform（位置や回転など）に変化があるよ！とブラウザに伝える
→ ブラウザはあらかじめ GPU レイヤーを準備してくれる

🔸 will-change: transform, filter;
transform に加えて filter（例：blur, brightness）も変化することを伝える
→ filter も GPU処理されやすくなる（ただしGPUに負荷がかかる）

ーーーーーーーーー */


/* ーーーーーーーーー コンテンツ ーーーーーーーーー */

.home section {
  margin: 300px auto;
}

.content-box {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 100px auto;
  border-radius: 30px 0px;
  background: #fff;
  border: 1px solid var(--wp--preset--color--main);
  box-shadow: 5px 5px 0px var(--wp--preset--color--main);
  padding: 0 0 40px;
  z-index: 1;
}
.content-text-box {
  padding: 0 50px;
}
.content-box h2:first-child {
  margin: 0;
  position: relative;
  top: -30px;
  left: -30px;
}

.page .content-box {
  padding: 0 50px 50px;
}
.wp-block-group h2:first-child {
  left: -80px;
  max-width: max-content;
  width: calc(100% + 100px);
}

.reed {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--main);
  margin: 0.5em 0 1em;
}


.content-link-list {
  display: flex;
  padding: 0 40px;
  text-align: center;
  justify-content: center;
}
.content-link-item {
  width: calc(25% - 20px);
  margin: 0 10px 20px;
}
.content-link-item a, .content-link-item > div {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: #fff;
  border: 3px solid;
  padding: 30px 20px;
}
.content-link-item img {
  max-width: 150px;
  width: 100%;
  height: auto;
}
.content-link-title {
  display: block;
  font-size: 2rem;
  font-weight: 300;
  color: var(--wp--preset--color--main);
  letter-spacing: 0.15em;
  line-height: 1.7;
}
.content-link-title span {
  display: inline-block;
}
.content-link-title .eng {
  font-size: 1.2rem;
}
.content-link-item a:hover {
  opacity: 1;
}
.content-link-item a:hover .content-link-title, .content-link-item a:hover .content-link-title .eng {
  font-weight: 600;
  color: #fff!important;
}

@media screen and (max-width: 1000px) {
  .content-link-list {
    flex-wrap: wrap;
  }
  .content-link-item {
  width: calc(50% - 20px);
  }
  .content-link-item > div {
    padding: 10px;
  }
  .content-link-item a {
    padding: 10px 0;
  }
}

@media screen and (max-width: 680px) {
  .content-text-box {
    padding: 0 30px;
  }
  .content-link-list {
    padding: 0 10px;
  }
  .wp-block-group {
    padding: 0 30px 30px;
  }
  h2 .eng {
    font-size: 3rem;
    margin: 0;
  }
  h2 .jpn {
    display: block;
  }
  .content-link-item img {
    max-width: 100px;
  }
}

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

  .content-text-box {
    padding: 0 20px;
  }
  .content-link-item {
    width: 100%;
    margin: 0 10px 10px;
  }
  .content-link-item a, .content-link-item > div {
    padding: 10px;
    display: flex;
    align-items: center;
  }
  .content-link-item a > *, .content-link-item > div > * { width: 50%;}
  .content-link-item .child-thumbnail { width: 40%;}
  .content-link-item .content-link-title { width: 60%;}
}


/*トップ*/

#top {
  margin: 0 auto;
  padding: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/*斜めボックス*/
.overlap-box {
  margin: 12vh auto 8vh;
}
.skew-box {
  position: relative;
  margin: -10px auto;
  padding: 0;
  width: 70%;
  height: 100%;
  overflow-x: hidden;
  border-radius: 20px;
  border: 1px solid var(--wp--preset--color--main);
  box-shadow: 10px 10px 0px var(--wp--preset--color--main);
}
.top-1 .skew-box, .top-3 .skew-box { transform: skewx(-20deg);   /* Y方向に斜め */}
.top-2 .skew-box, .top-4 .skew-box { transform: skewx(20deg);   /* Y方向に斜め */}
.skew-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  display: block;
  width: 120%;
  height: 100%;
  opacity: .2;
  z-index: 0;
}
.skew-box-content {
  position: relative;
  padding: 20px 30px;
  color: var(--wp--preset--color--main);
  text-align: center;
  z-index: 1;
}
.top-1 .skew-box-content, .top-3 .skew-box-content, .top-1 .skew-box::before, .top-3 .skew-box::before { transform: skewx(20deg);   /* Y方向に斜め */}
.top-2 .skew-box-content, .top-4 .skew-box-content, .top-2 .skew-box::before, .top-4 .skew-box::before { transform: skewx(-20deg);   /* Y方向に斜め */}
.top-text {
  height: 12vh;
  max-width: 100%;
}
.top-img {
  position: absolute;
  width: 28%;
  height: fit-content;
  bottom: 0;
  text-align: center;
}
.top-img img {
  width: 100%;
  height: auto;
  max-height: 32vh;
  max-width: 300px;
  object-fit: contain;
}
.top-2 .top-img {
  right: 10%;
  bottom: 30px;
}
.top-3 .top-img {
  left: 8%;
  bottom: 20px;
}
.top-4 .top-img {
  right: 1%;
  bottom: 30px;
}

.top-1 .skew-box {
  background: linear-gradient(to right, var(--wp--preset--color--orange) 50%, var(--wp--preset--color--gray) 100%);
  left: -20%;
}
.top-2 .skew-box {
  background: linear-gradient(to left, var(--wp--preset--color--blue) 50%, var(--wp--preset--color--gray) 100%);
  right: -10%;
}
.top-3 .skew-box {
  background: linear-gradient(to right, var(--wp--preset--color--pink) 50%, var(--wp--preset--color--gray) 100%);
  left: -10%;
}
.top-4 .skew-box {
  background: linear-gradient(to left, var(--wp--preset--color--green-2) 50%, var(--wp--preset--color--gray) 100%);
  right: -20%;
}
.top-1 .skew-box::before, .top-3 .skew-box::before {background-image: url(../image/top-texture-1.svg);}
.top-2 .skew-box::before {background-image: url(../image/top-texture-3.svg);}
.top-4 .skew-box::before {background-image: url(../image/top-texture-2.svg);}

.top-eng {
  padding: 0 20px;
  text-align: center;
  font-size: 3rem;
  letter-spacing: 0.2em;
  color: var(--wp--preset--color--main);
}

@media screen and (min-width: 680px) {
  .top-pc { display: block;}
  .top-sp { display: none;}

  .top-2 .skew-box-content, .top-4 .skew-box-content {
    padding-right: 50%;
    text-align: right;
  }
  .top-3 .skew-box-content {
    padding-left: 50%;
    text-align: left;
  }
}
@media screen and (max-width: 680px) {
  .skew-box {
    margin: -5px auto;
  }
  .top-text {
    height: 8vh;
  }
  .skew-box-content {
    padding: 10px 20px;
  }
  .top-pc { display: none;}
  .top-sp { display: block;}

  .fade-up.top-sp {
    height: calc(8vh + 20px);
  }

  .fade-up.top-2.top-sp {
    margin-top: 20px;
  }
  .top-2.top-sp .skew-box {
    right: auto;
    left: -20%;
  }
  .top-2.top-sp .top-img {
    right: auto;
    left: 5%;
    bottom: 10px;
  }

  .top-3.top-sp .skew-box {
    left: auto;
    right: -20%;
  }
  .top-3.top-sp .top-img {
    left: auto;
    right: 5%;
    bottom: 5px;
  }

  .fade-up.top-4.top-sp {
    margin-top: 20px;
  }
  .top-4.top-sp .skew-box {
    right: auto;
    left: -20%;
  }
  .top-4.top-sp .top-img {
    right: auto;
    left: 5%;
    bottom: 5px;
  }
  .top-img {
    width: 50%;
    max-width: 160px;
  }
}
@media screen and (max-width: 480px) {
  .top-text {
    height: 6vh;
  }
  .fade-up.top-sp {
    height: calc(6vh + 20px);
  }
  .top-img img {
    max-width: 140px;
    max-height: 140px;
  }
}

/* 共通アニメーション */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1s ease-out forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 順番に出すためのディレイ */
.top-1 {
  animation-delay: 0.2s;
}
.top-2 {
  animation-delay: 0.4s;
}
.top-3 {
  animation-delay: 0.6s;
}
.top-4 {
  animation-delay: 0.8s;
}
.top-eng {
  animation-delay: 1.2s;
}

/*地盤は世界を救う*/
.read-warp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.read-box {
  width: 50%;
}
.read-img {
  width: 45%;
  margin-left: 5%;
  z-index: 1;
}
.read-img img {
  width: 100%;
}
.read-box h2 {
  font-size: 2rem;
}
#read .reed {
  font-size: 3.2rem;
}
@media screen and (max-width: 1000px) {
  .read-box, .read-img {
    width: 100%;
    margin: auto;
    max-width: 500px;
  }
}

/*地盤改良とは*/
#about .content-link-item > div { border-color: var(--wp--preset--color--gray);}
/*.about-1 > div { border-color: var(--wp--preset--color--orange);}
.about-2 > div { border-color: var(--wp--preset--color--pink);}
.about-3 > div { border-color: var(--wp--preset--color--green-2);}
.about-4 > div { border-color: var(--wp--preset--color--blue);}
.about-1 a:hover { background-color: var(--wp--preset--color--orange);}
.about-2 a:hover { background-color: var(--wp--preset--color--pink);}
.about-3 a:hover { background-color: var(--wp--preset--color--green-2);}
.about-4 a:hover { background-color: var(--wp--preset--color--blue);}*/
#about p { text-align: center;}

/*職種紹介*/
#job h2 {
  margin-left: 0;
  padding: 20px 50px;
}
.job-list .content-box {
  width: 70%;
  max-width: 700px;
  padding: 0;
}
.job-list .content-box:nth-child(even) { margin-left: 0;}
.job-list .content-box:nth-child(odd) { margin-right: 0;}


.job-list .content-box a {
  display: flex;
  flex-flow: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40px 0;
  align-items: center;
  min-height: 400px;
  border-radius: 30px 0px;
}

.job-list .content-text-box {
  width: 100%;
}

.job-list h3, .job-type .job-list h2 {
  padding: 0;
  letter-spacing: 0.15em;
  margin-top: 0;
  margin-right: 30%;
}
.job-list h3 .jpn { font-size: 3rem;}
.job-list h3 .eng { font-size: 1.6rem;}
.job-list h3::after { content: none;}
.job-list h3 span { display: block;}
.job-list .consultant-sales h3 { color: var(--wp--preset--color--blue);}
.job-list .construction-management h3 { color: var(--wp--preset--color--pink);}
.job-list .ground-design h3 { color: var(--wp--preset--color--green-1);}

.job-list .content-text-box p {
  margin-right: 40%;
}

.job-list .content-box a:hover {
  opacity: 1;
}
.job-list .consultant-sales a:hover { background: var(--wp--preset--color--blue);}
.job-list .construction-management a:hover { background: var(--wp--preset--color--pink);}
.job-list .ground-design a:hover { background: var(--wp--preset--color--green-2);}
.job-list .content-box a:hover h3, .job-list .content-box a:hover p { color: #fff;}
.job-list .ground-design.content-box a:hover h3, .job-list .ground-design.content-box a:hover p { color: var(--wp--preset--color--main);}

.job-img {
  position: absolute;
  display: block;
  width: 45%;
  bottom: 45px;
  right: 5%;
}
.job-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

@media screen and (max-width: 1000px) {
  .job-list .content-box {
    width: 100%;
  }
}
@media screen and (max-width: 780px) {
  .job-list h3, .job-list .content-text-box p {
    margin-right: 0;
  }
  .job-list .content-box {
    margin-top: 300px;
    max-width: 420px;
  }
  .job-list .content-box a {
    min-height: auto;
    padding-top: 120px;
  }
  .job-img {
    bottom: auto;
    right: auto;
    top: -200px;
    width: 100%;
    text-align: center;
    padding: 0 20px;
  }
  .job-img img {
    height: 300px;
    width: auto;
  }
  .job-list .content-text-box {
    padding: 0 30px;
  }
}
@media screen and (max-width: 420px) {
  .job-list > div:first-child h3 .jpn, .job-type .job-list > div:first-child h2 .jpn {
    font-size: 2.6rem;
    letter-spacing: 0.05em;
  }
  .job-list .content-text-box {
    padding: 0 25px;
  }
}

@media screen and (max-width: 320px) {
  .job-list .content-text-box {
    padding: 0 20px;
  }
  .job-list > div:first-child h3 .jpn, .job-type .job-list > div:first-child h2 .jpn {
    font-size: 2.4rem;
  }
}

/*先輩社員の声*/
#voice .content-box {
  max-width: 900px;
  width: 100%;
  padding: 0;
}

#voice h2 {
  all: unset;
  display: block;
  margin: 50px auto 0;
  text-align: center;
  letter-spacing: 0.5rem;
  font-family: "Noto Sans JP", sans-serif;
}
#voice h2 .eng {
  background: linear-gradient(to right, #0ff 0%, #9a6fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 8rem;
  line-height: 1;
}
#voice h2 .jpn { color: var(--wp--preset--color--main);}
.content-voice-box { display: flex;}
.content-voice-item {
  width: 25%;
  position: relative;
}
.content-voice-item a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-voice-item img {
  transition: 0.3s ease-out;
}
.voice-1 { top: -150px;}
.voice-2 { left: -30px;}
.voice-3 { top: 60px; right: -30px; z-index: 1;}
.voice-4 { top: -180px;}

.voice-1 img { width: 120%; filter: drop-shadow(0 0 15px var(--wp--preset--color--blue));}
.voice-2 img { width: 125%; filter: drop-shadow(0 0 15px var(--wp--preset--color--pink));}
.voice-3 img { width: 135%; filter: drop-shadow(0 0 15px var(--wp--preset--color--orange));}
.voice-4 img { width: 130%; filter: drop-shadow(0 0 15px var(--wp--preset--color--green-2));}

.content-voice-item a:hover { opacity: 1;}
.content-voice-item a:hover img { transform: scale(1.1);}

@media screen and (max-width: 900px) {
  #voice .content-box {
    max-width: 550px;
  }
  #voice h2 .eng {
    font-size: 6rem;
  }
  .content-voice-box { flex-wrap: wrap;}
  .content-voice-item {
    width: 50%;
    top: 0;
    left: 0;
    right: 0;
  }
  .content-voice-item:nth-child(even) {
    top: 60px;
  }
}

/*会社情報*/
.content-link-list .career-plan .eng { color: var(--wp--preset--color--blue);}
.content-link-list .see-by-data .eng { color: var(--wp--preset--color--pink);}
.content-link-list .walfare-information .eng { color: var(--wp--preset--color--green-1);}
.content-link-list .faq .eng { color: var(--wp--preset--color--orange);}

.content-link-list .career-plan a { border-color: var(--wp--preset--color--blue);}
.content-link-list .see-by-data a { border-color: var(--wp--preset--color--pink);}
.content-link-list .walfare-information a { border-color: var(--wp--preset--color--green-2);}
.content-link-list .faq a { border-color: var(--wp--preset--color--orange);}

.content-link-list .career-plan a:hover { background-color: var(--wp--preset--color--blue);}
.content-link-list .see-by-data a:hover { background-color: var(--wp--preset--color--pink);}
.content-link-list .walfare-information a:hover { background-color: var(--wp--preset--color--green-2);}
.content-link-list .faq a:hover { background-color: var(--wp--preset--color--orange);}

@media screen and (max-width: 680px) {
  #info .content-link-item a {
    padding-top: 0;
  }
}

/*アニメ*/
#anime .content-box {
  background: none;
  border: none;
  box-shadow: none;
  padding-bottom: 80px;
}
#anime .content-box::before {
  content: "";
  position: absolute;
  width: 150vw;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--wp--preset--color--main);
  box-shadow: 5px 5px 0px var(--wp--preset--color--main);
  z-index: -1;
}
.anime-title { margin: 50px 0;}
.anime-title img { width: 100%;}

.anime-img img {
  width: 100%;
  height: auto;
}
.anime-img {
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 50%;
}
#anime .button {
  max-width: 300px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -25px;
  z-index: 1;
}
@media screen and (min-width: 993px) {
  #anime .content-text-box {
    padding-right: 50%;
  }
}
@media screen and (max-width: 992px) {
  #anime .content-box {
    padding-top: 100px;
    padding-bottom: 50px;
  }
  .anime-title {
    max-width: 350px;
    margin: 30px 0;
    margin: 10px 0 20px;
  }
  .anime-img {
    position: relative;
    bottom: 0;
    width: 100%;
    max-width: 350px;
  }
  .anime-img img {
    position: absolute;
    width: 100%;
    height: auto;
    z-index: -1;
    bottom: 8em;
  }
}

/*地盤に興味がでたアナタへ*/
.home #reqs {
  margin-top: 500px;
}
#reqs .content-box {
  border-radius: 30px 0;
  background: linear-gradient(#a8ebff 0%, #dcdcdc 100%);
  padding: 80px 0;
  max-width: 900px;
}
#reqs .content-box::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 30px 0;
    z-index: -1;
    background-image: url(../image/grid.svg);
    background-size: 50px;
    background-position: left center;
}
#reqs .content-text-box {
  text-align: center;
}
#reqs h2 {
  all: unset;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
  color: var(--wp--preset--color--main);
}
.reqs-link-list {
  display: flex;
  justify-content: space-evenly;
  margin: 50px auto 0;
  padding: 0 40px;
}
.reqs-link-item {
  position: relative;
  width: 50%;
  max-width: 300px;
  margin: 0 10px;
}
.reqs-link-item a {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  color: var(--wp--preset--color--main);
  width: 100%;
  text-align: center;
  padding: 30px 15px;
  border-radius: 100px;
  border: 1px solid var(--wp--preset--color--main);
  box-shadow: 5px 5px 0px var(--wp--preset--color--main);
  line-height: 1.8;
  letter-spacing: 3px;
}
.reqs-link-item a span {
  display: block;
  font-size: 2.2rem;
}
.reqs-1 a { background: linear-gradient(#ffb2ff 0%, #00d2e9 100%);}
.reqs-2 a { background: linear-gradient(#00d2e9 0%, #96ffc7 100%);}

.reqs-link-item a:hover {
  opacity: 1;
  top: 5px;
  left: 5px;
  box-shadow: 0px 0px 0px var(--wp--preset--color--main);
}

@media screen and (max-width: 800px) {
  .reqs-link-list {
    flex-wrap: wrap;
  }
  .reqs-link-item {
    width: 100%;
    margin: 0 0 20px;
  }
}

/* ーーーーーーーーー 固定ページ ーーーーーーーーー */

.current-page {
  display: flex;
}
.page-thumbnail {
  width: 30%;
}
.page-thumbnail img {
  width: 100%;
  height: auto;
}
.page-text {
  width: 70%;
  margin-left: 50px;
}
.page-title {
  all: unset;
  font-size: 4rem;
  letter-spacing: 0.15em;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
}
.page-text .eng {
  color: var(--wp--preset--color--grad-start);
  font-size: 2.3rem;
  letter-spacing: 0.2em;
  margin: 0.3em auto 1em;
}



.sibling-title {
  all: unset;
  font-family: "Noto Sans JP", sans-serif;
  display: block;
  margin: 2.5em auto;
  text-align: center;
  margin: auto;
  font-size: 2rem;
  line-height: 1.5;
  font-weight: bold;
  color: var(--wp--preset--color--main);
  margin-bottom: 30px;
}
.sibling-title .eng {
  display: block;
  font-size: 6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    -1px -1px 0 var(--wp--preset--color--main),
    1px -1px 0 var(--wp--preset--color--main),
    -1px 1px 0 var(--wp--preset--color--main),
    1px 1px 0 var(--wp--preset--color--main),
    5px 5px 0px var(--wp--preset--color--main);
}

@media screen and (max-width: 1000px) {
  h1 .eng, .parent-info .eng {
    font-size: 4rem;
    display: block;
    margin: 0;
  }
}
@media screen and (max-width: 680px) {
  h1, .parent-info {
    padding: 15px 25px;
    border-radius: 30px 0px;
  }
  .current-page {
    flex-flow: column;
  }
  .parent-info {
    margin-bottom: 20px;
  }
  .page-text ,.page-thumbnail {
    margin: auto;
    width: 100%;
  }
  .page-thumbnail {
    max-width: 250px;
  }

  .page .content-box h2:first-child {
    left: -40px;
  }
  .page .content-box {
    padding: 0 20px 20px;
  }

  .sibling-title .eng {
    font-size: 4rem;
  }
}

@media screen and (max-width: 480px) {
  h1 .eng, .parent-info .eng {
    font-size: 3rem;
  }
}



/*職業紹介*/
.job-head .parent-info {
  margin-bottom: 0;
  z-index: 0;
  position: relative;
}
.job-head .current-page {
  margin-top: -150px;
  z-index: -1;
  position: relative;
}
.job-head .page-text {
  margin-top: 100px;
  padding: 100px 0 30px 50px;
  width: 50%;
  min-width: 550px;
  height: fit-content;
  border-radius: 30px 0px;
  background: #fff;
  border: 1px solid var(--wp--preset--color--main);
  box-shadow: 5px 5px 0px var(--wp--preset--color--main);
}
.job-head .page-title {
  color: var(--wp--preset--color--grad-start);
}
.job-head .page-thumbnail {
  width: 50%;
  padding: 0 50px;
}
.job-head .page-thumbnail img {
  max-width: 450px;
  margin: auto;
  display: block;
}

.job-schedule {
  padding-left: 30px;
  position: relative;
}
.job-schedule::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2rem;
  display: block;
  width: 4px;
  height: calc(100% - 4rem);
  border-radius: 10px;
  background: linear-gradient(var(--wp--preset--color--grad-start), var(--wp--preset--color--grad-end));
}
.job-schedule .eng {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 4rem;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    -1px -1px 0 var(--wp--preset--color--main),
    1px -1px 0 var(--wp--preset--color--main),
    -1px 1px 0 var(--wp--preset--color--main),
    1px 1px 0 var(--wp--preset--color--main),
    3px 3px 0px var(--wp--preset--color--main);
}
.job-schedule .eng::before {
  content: "";
  position: absolute;
  left: -30px;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: solid 1px var(--wp--preset--color--main);
  background: #fff;
}
.job-schedule h3 {
  padding: 0;
  margin: 0 auto 10px;
}
.job-schedule h3::after {
  content: none;
}
.job-schedule p {
  margin: 0;
}

.sibling-pages .job-list {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: auto;
}
.sibling-pages .job-list > div {
  width: calc(50% - 20px);
  max-width: 400px;
  margin: 220px auto 0 !important;
  text-align: center;
}
.sibling-pages .job-list > div a {
  min-height: auto;
  padding-top: 120px;
}
.sibling-pages .job-list .job-img {
  bottom: auto;
  right: auto;
  top: -200px;
  width: 100%;
  text-align: center;
  padding: 0 20px;
}
.sibling-pages .job-list .job-img img {
  height: 300px;
  width: auto;
  max-width: 100%;
}
.sibling-pages .job-list h3 {
  margin: auto;
  padding: 0 10px;
}

@media screen and (max-width: 1100px) {
  .job-head .page-text, .job-head .page-thumbnail {
    width: 100%;
    min-width: fit-content;
  }
  .job-head .current-page {
      flex-flow: column;
  }
}

@media screen and (max-width: 680px) {
  .job-head .page-title {
    font-size: 3rem;
  }
  .job-head .page-thumbnail {
    padding: 0;
    max-width: 300px;
    margin: 50px auto 0;
  }

  .sibling-pages .job-list {
    flex-flow: column;
  }
  .sibling-pages .job-list > div {
    width: 100%;
    margin: 120px auto 0 !important;
    padding: 0;
  }
  .job-type .job-list > div {
    padding: 0;
  }
  .sibling-pages .job-list .job-img {
    top: -100px;
  }
  .sibling-pages .job-list .job-img img {
    height: 200px;
  }
}
@media screen and (max-width: 480px) {
  .job-head .parent-info {
    margin-left: -20px;
  }
  .job-head .page-text {
    padding: 70px 0px 10px 20px;
    margin-left: 10px;
  }
  .job-head .page-text .eng {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 380px) {
  .job-head .page-title {
    font-size: 2.5rem;
  }
}

/*先輩社員の声*/
.voice .content-box {
  padding: 0;
  margin-bottom: 200px;
}
.voice h1 {
  all: unset;
  display: block;
  text-align: center;
  letter-spacing: 0.5rem;
  line-height: 1.5;
  font-size: 2rem;
  font-family: "Noto Sans JP", sans-serif;
  margin: 120px auto 0;
  width: fit-content;
  color: var(--wp--preset--color--base);
}
.voice h1 .eng {
  position: relative;
  font-size: 8rem;
  display: block;
  font-weight: bold;
  background: linear-gradient(to right, #0ff 0%, #9a6fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.voice h1 .eng::before {
  content: "VOICE"; /* 本文をコピー */
  position: absolute;
  top: 0;
  color: var(--wp--preset--color--main);
  z-index: -1; /* 後ろに置く */
  text-shadow: -1px -1px 0 var(--wp--preset--color--main), /* 左上 */ 1px -1px 0 var(--wp--preset--color--main), /* 右上 */ -1px 1px 0 var(--wp--preset--color--main), /* 左下 */ 1px 1px 0 var(--wp--preset--color--main), /* 右下 */ 5px 5px 0px var(--wp--preset--color--main);
}

.voice-title {
  text-align: center;
  margin: 5rem auto 0;
  padding: 0 50px;
}
.voice-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.voice-list > div {
  position: relative;
  width: 25%;
  height: 250px;
  margin: 0 !important;
}
.voice-list div div {
  position: absolute;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  line-height: 1.7;
}
.voice-message {
  margin: 0 auto .5em;
  color: #fff;
  font-size: 1.7rem;
  text-shadow: 0px 2px 8px rgba(0, 40, 123, 0.3);
}
.voice-neme {
  margin: 0 auto;
  color: var(--wp--preset--color--main);
  font-size: 1.4rem;
}

.voice-list > div:nth-of-type(3n+1) .voice-message {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
}
.voice-list > div:nth-of-type(3n+2) .voice-message { font-family: "Yusei Magic", sans-serif;}
.voice-list > div:nth-of-type(3n) .voice-message { font-family: "Kosugi Maru", sans-serif;}

.voice-list > div:nth-of-type(5n+1) div { --voice-grad: #BAECFF;}
.voice-list > div:nth-of-type(5n+2) div { --voice-grad: #C4C9FF;}
.voice-list > div:nth-of-type(5n+3) div { --voice-grad: #F8C1FF;}
.voice-list > div:nth-of-type(5n+4) div { --voice-grad: #FFFCBE;}
.voice-list > div:nth-of-type(5n) div { --voice-grad: #CCFFE4;}

.voice-list > div:nth-of-type(8n+1) div { top: -100px; left: -25%;}
.voice-list > div:nth-of-type(8n+2) div { top: 60px; left: -10%;}
.voice-list > div:nth-of-type(8n+3) div { top: 40px; right: -25%;}
.voice-list > div:nth-of-type(8n+4) div { top: -80px; right: -25%;}
.voice-list > div:nth-of-type(8n+5) div { top: -80px; left: -20%;}
.voice-list > div:nth-of-type(8n+6) div { top: 40px; left: -35%;}
.voice-list > div:nth-of-type(8n+7) div { top: 80px; right: 0%;}
.voice-list > div:nth-of-type(8n) div { top: -20px; right: -10%;}

.voice-box-1 .voice-title { filter: drop-shadow(0 0 15px var(--wp--preset--color--blue));}
.voice-box-2 .voice-title { filter: drop-shadow(0 0 15px var(--wp--preset--color--pink));}
.voice-box-3 .voice-title { filter: drop-shadow(0 0 15px var(--wp--preset--color--orange));}
.voice-box-4 .voice-title { filter: drop-shadow(0 0 15px var(--wp--preset--color--green-2));}

.voice-box-1 .voice-list div div {
  width: 120%;
  height: auto;
  max-width: 300px;
  min-height: 250px;
  background: linear-gradient(var(--wp--preset--color--blue) 0%, var(--voice-grad));
  box-shadow: 0px 0px 30px var(--wp--preset--color--blue);
}
.voice-box-1 .voice-list > :nth-of-type(8n+1) div,
.voice-box-1 .voice-list > :nth-of-type(8n+3) div,
.voice-box-1 .voice-list > :nth-of-type(8n+6) div,
.voice-box-1 .voice-list > :nth-of-type(8n) div {
  border-radius: 150px 150px 20px 20px;
  padding-top: 60px;
}
.voice-box-1 .voice-list > :nth-of-type(8n+2) div,
.voice-box-1 .voice-list > :nth-of-type(8n+4) div,
.voice-box-1 .voice-list > :nth-of-type(8n+5) div,
.voice-box-1 .voice-list > :nth-of-type(8n+7) div {
  border-radius: 20px 20px 150px 150px;
  padding-bottom: 60px;
}

.voice-box-2 .voice-list div { filter: drop-shadow(0px 0px 15px var(--wp--preset--color--pink));}
.voice-box-2 .voice-list div div {
  max-width: 320px;
  width: 120%;
  height: 120%;
  background: linear-gradient(var(--wp--preset--color--pink) 0%, var(--voice-grad));
  padding: 40px 16% 20px;
}
.voice-box-2 .voice-list > :nth-of-type(8n+1) div,
.voice-box-2 .voice-list > :nth-of-type(8n+3) div,
.voice-box-2 .voice-list > :nth-of-type(8n+6) div,
.voice-box-2 .voice-list > :nth-of-type(8n) div {
  -webkit-mask: url('../image/voice/voice-2-1.svg') no-repeat center / contain;
  mask: url('../image/voice/voice-2-1.svg') no-repeat center / contain;
}
.voice-box-2 .voice-list > :nth-of-type(8n+2) div,
.voice-box-2 .voice-list > :nth-of-type(8n+4) div,
.voice-box-2 .voice-list > :nth-of-type(8n+5) div,
.voice-box-2 .voice-list > :nth-of-type(8n+7) div {
  -webkit-mask: url('../image/voice/voice-2-2.svg') no-repeat center / contain;
  mask: url('../image/voice/voice-2-2.svg') no-repeat center / contain;
}

.voice-box-3 .voice-list div { filter: drop-shadow(0px 0px 15px var(--wp--preset--color--orange));}
.voice-box-3 .voice-list div div {
  max-width: 320px;
  width: 130%;
  height: 120%;
  padding: 40px;
  background: linear-gradient(var(--wp--preset--color--orange) 0%, var(--voice-grad));
}
.voice-box-3 .voice-list > :nth-of-type(8n+1) div,
.voice-box-3 .voice-list > :nth-of-type(8n+3) div,
.voice-box-3 .voice-list > :nth-of-type(8n+6) div,
.voice-box-3 .voice-list > :nth-of-type(8n) div {
  -webkit-mask: url('../image/voice/voice-3-2.svg') no-repeat center / contain;
  mask: url('../image/voice/voice-3-2.svg') no-repeat center / contain;
}
.voice-box-3 .voice-list > :nth-of-type(8n+2) div,
.voice-box-3 .voice-list > :nth-of-type(8n+4) div,
.voice-box-3 .voice-list > :nth-of-type(8n+5) div,
.voice-box-3 .voice-list > :nth-of-type(8n+7) div {
  -webkit-mask: url('../image/voice/voice-3-1.svg') no-repeat center / contain;
  mask: url('../image/voice/voice-3-1.svg') no-repeat center / contain;
}

.voice-box-4 .voice-list div { filter: drop-shadow(0px 0px 15px var(--wp--preset--color--green-2));}
.voice-box-4 .voice-list div div {
  max-width: 300px;
  width: 125%;
  height: 120%;
  background: linear-gradient(var(--wp--preset--color--green-2) 0%, var(--voice-grad));
}
.voice-box-4 .voice-list > :nth-of-type(8n+1) div,
.voice-box-4 .voice-list > :nth-of-type(8n+3) div,
.voice-box-4 .voice-list > :nth-of-type(8n+6) div,
.voice-box-4 .voice-list > :nth-of-type(8n) div {
  -webkit-mask: url('../image/voice/voice-4-1.svg') no-repeat center / contain;
  mask: url('../image/voice/voice-4-1.svg') no-repeat center / contain;
  padding: 40px 16% 20px;
}
.voice-box-4 .voice-list > :nth-of-type(8n+2) div,
.voice-box-4 .voice-list > :nth-of-type(8n+4) div,
.voice-box-4 .voice-list > :nth-of-type(8n+5) div,
.voice-box-4 .voice-list > :nth-of-type(8n+7) div {
  -webkit-mask: url('../image/voice/voice-4-2.svg') no-repeat center / contain;
  mask: url('../image/voice/voice-4-2.svg') no-repeat center / contain;
  padding: 40px 25% 20px 20%;
}


.namakubi {
	position: absolute;
	z-index: 1;
}

.voice-box-1 .namakubi {
  right: 21%;
  top: 130px;
  width: 130px;
  transform: rotate(20deg);
}
.voice-box-2 .namakubi {
  left: 20%;
  top: 100px;
  width: 120px;
  transform: rotate(-5deg);
}
.voice-box-3 .namakubi {
  right: 22%;
  top: 90px;
  width: 110px;
  transform: rotate(20deg);
}
.voice-box-4 .namakubi {
  left: 22%;
  top: 110px;
  width: 100px;
  transform: rotate(-35deg);
}

@media screen and (max-width: 1100px) {
  .voice .content-box { max-width: 800px;}
  .voice-list > div { width: calc(100% / 3);}
  .voice-list > div:nth-of-type(6n+1) div { top: -50px; left: -25%; right: auto;}
  .voice-list > div:nth-of-type(6n+2) div { top: 60px; left: -10%; right: auto;}
  .voice-list > div:nth-of-type(6n+3) div { top: -20px; right: -25%; left: auto;}
  .voice-list > div:nth-of-type(6n+4) div { top: -40px; left: -15%; right: auto;}
  .voice-list > div:nth-of-type(6n+5) div { top: 50px; right: -10%; left: auto;}
  .voice-list > div:nth-of-type(6n) div { top: -10px; right: -15%; left: auto;}
}
@media screen and (max-width: 900px) {
  .voice .content-box { max-width: 500px;}

  .voice-list > div { width: 50%;}
  .voice-list > div:nth-child(odd) div { top: 0; left: -20%; right: auto;}
  .voice-list > div:nth-child(even) div { top: 80px; left: -5%; right: auto;}

  .voice-box-1 .voice-list > :nth-of-type(4n+1) div,
  .voice-box-1 .voice-list > :nth-of-type(4n) div {
    border-radius: 150px 150px 20px 20px;
    padding-top: 60px;
  }
  .voice-box-1 .voice-list > :nth-of-type(4n+2) div,
  .voice-box-1 .voice-list > :nth-of-type(4n+3) div {
    border-radius: 20px 20px 150px 150px;
    padding-bottom: 60px;
  }

  .voice-box-2 .voice-list > :nth-of-type(4n+1) div,
  .voice-box-2 .voice-list > :nth-of-type(4n) div {
    -webkit-mask: url('../image/voice/voice-2-1.svg') no-repeat center / contain;
    mask: url('../image/voice/voice-2-1.svg') no-repeat center / contain;
  }
  .voice-box-2 .voice-list > :nth-of-type(4n+2) div,
  .voice-box-2 .voice-list > :nth-of-type(4n+3) div {
    -webkit-mask: url('../image/voice/voice-2-2.svg') no-repeat center / contain;
    mask: url('../image/voice/voice-2-2.svg') no-repeat center / contain;
  }

  .voice-box-3 .voice-list > :nth-of-type(4n+1) div,
  .voice-box-3 .voice-list > :nth-of-type(4n) div {
    -webkit-mask: url('../image/voice/voice-3-2.svg') no-repeat center / contain;
    mask: url('../image/voice/voice-3-2.svg') no-repeat center / contain;
  }
  .voice-box-3 .voice-list > :nth-of-type(4n+2) div,
  .voice-box-3 .voice-list > :nth-of-type(4n+3) div {
    -webkit-mask: url('../image/voice/voice-3-1.svg') no-repeat center / contain;
    mask: url('../image/voice/voice-3-1.svg') no-repeat center / contain;
  }

  .voice-box-4 .voice-list > :nth-of-type(4n+1) div,
  .voice-box-4 .voice-list > :nth-of-type(4n) div {
    -webkit-mask: url('../image/voice/voice-4-1.svg') no-repeat center / contain;
    mask: url('../image/voice/voice-4-1.svg') no-repeat center / contain;
    padding: 40px 16% 20px;
  }
  .voice-box-4 .voice-list > :nth-of-type(4n+2) div,
  .voice-box-4 .voice-list > :nth-of-type(4n+3) div {
    -webkit-mask: url('../image/voice/voice-4-2.svg') no-repeat center / contain;
    mask: url('../image/voice/voice-4-2.svg') no-repeat center / contain;
    padding: 40px 25% 20px 20%;
  }

  .voice-box-1 .namakubi {
    right: -5%;
    top: 130px;
  }
  .voice-box-2 .namakubi {
    left: -8%;
    top: -80px;
  }
  .voice-box-3 .namakubi {
    right: -5%;
    top: 100px;
  }
  .voice-box-4 .namakubi {
    left: -8%;
    top: -60px;
  }
}
@media screen and (max-width: 680px) {
  .voice-box-1 .namakubi {
    right: -6%;
    top: 100px;
    width: 110px;
  }
  .voice-box-2 .namakubi {
    left: -9%;
    top: -90px;
    width: 110px;
  }
  .voice-box-3 .namakubi {
    right: -7%;
    top: 80px;
  }
  .voice-box-4 .namakubi {
    width: 90px;
  }
}
@media screen and (max-width: 480px) {
  .voice-list {
    margin-top: 30px;
  }
  .voice-list > div {
    width: 100%;
  }
  .voice-list > div:nth-child(odd) div {
    left: -5%;
  }
  .voice-list > div:nth-child(even) div {
    top: 0;
    left: auto;
    right: -5%;
  }
}


/*キャリアプラン*/

@media screen and (min-width: 782px) {
  .career-plan-img {
    position: relative;
    width: 205px;
    height: 200px;
    max-width: 100%;
    margin: auto;
    text-align: left!important;
  }
  .career-plan-img img {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
}

/*よくある質問*/
.accordion {
  position: relative;
  margin-bottom: 30px;
  padding: 10px;
}
.accordion::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--wp--preset--color--grad-start), var(--wp--preset--color--grad-end));
  border-radius: 30px 0px;
  opacity: .2;
  z-index: -1;
}
.accordion summary {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  padding-right: 50px;
  font-weight: 600;
  color: var(--wp--preset--color--main);
  transition: transform .3s;
}
.accordion summary::before, .accordion summary::after {
  content: '';
  position: absolute;
  right: 20px;
  width: 20px;
  height: 1px;
  transition: transform .3s;
  background-color: var(--wp--preset--color--main);
}
.accordion summary::before {
  content: "";
}
.accordion summary::after {
    transform: translateY(-25%) rotate(90deg);
}
.accordion[open] summary::after {
    transform: rotate(0deg);
}

.accordion p {
  margin: 0;
  transform: translateY(-10px);
  opacity: 0;
  transition: transform .5s, opacity .5s;
  background: #fff;
  border-radius: 0 0 20px 0;
  padding: 10px;
}
.accordion[open] p {
  transform: none;
  opacity: 1;
  margin-top: 10px;
}

/*データで見る*/
.deta-list {
  display: flex;
  flex-wrap: wrap;
  margin: 100px auto;
  margin-right: -60px;
}
.deta-list .content-box {
  margin: 0 60px 60px 0 !important;
  width: calc(33.3% - 60px);
}
.deta-list .deta-item-big {
  width: calc(66.6% - 60px);
}
.deta-list .deta-text {
  line-height: 1.2;
  color: var(--wp--preset--color--main);
}
.deta-list small {
  font-size: 50%;
}
.deta-list .wp-block-columns {
  gap: 0;
}

@media screen and (max-width: 1200px) {
  .deta-list .content-box {
    width: calc(50% - 60px);
  }
}
@media screen and (max-width: 992px) {
  .deta-list .content-box {
    margin: 0 40px 60px 0 !important;
    width: calc(50% - 40px);
    padding: 0px 30px 30px;
  }
  .deta-list .content-box h2:first-child {
    left: -50px;
  }
}
@media screen and (max-width: 680px) {
  .deta-list .content-box {
    width: 100%;
    max-width: 350px;
    margin: 0 auto 60px !important;
  }
  .deta-list {
    padding: 0;
    margin-right: 0;
  }
}


/*募集要項*/

.requ-schedule > div {
  border: solid 1px var(--wp--preset--color--main);
  margin-bottom: 20px;
  gap: 0;
}
.requ-schedule .eng {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--main);
  border-right: solid 1px var(--wp--preset--color--main);
}

.requ-schedule .eng p {
  font-size: 2rem;
}
.requ-schedule .eng::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--wp--preset--color--grad-start), var(--wp--preset--color--grad-end));
  opacity: 0.2;
  z-index: -1;
}
.requ-schedule .eng::before {
  content: "";
  position: absolute;
  bottom: -21px;
  display: block;
  width: 6px;
  height: 21px;
  background-color: var(--wp--preset--color--main);
}

.requ-schedule > div:last-child .eng::before {
  content: none;
}

.requ-schedule > div > div:last-child {
  padding: 20px 30px 0;
}

.requ-schedule > div > div:last-child h4, .requ-schedule > div > div:last-child p {
  margin: 0 auto 1em;
}

@media screen and (max-width: 781px) {
  .requ-schedule .eng {
    border: none;
  }
  .requ-schedule .eng::before {
    content: none;
  }
  .requ-schedule > div {
    position: relative;
  }
  .requ-schedule > div::before {
    content: "";
    position: absolute;
    bottom: -21px;
    display: block;
    width: 6px;
    height: 21px;
    left: calc(50% - 3px);
    background-color: var(--wp--preset--color--main);
  }
    .requ-schedule > div:last-child::before {
    content: none;
  }
}