@charset "UTF-8";
/* ============================================================
   ゲームチェンジ 採用サイト（デザイン再現・非公開テスト版）
   色はここで一括変更できます
   ============================================================ */
:root {
  --blue: #0864BE;       /* メインカラー */
  --l-blue: #0099d6;     /* 差し色 */
  --sky: #1AB2F5;        /* ボタン（新卒） */
  --band: #EBF8FF;       /* 背景の帯 */
  --yellow: #FFF100;     /* 追従ボタン */
  --gray: #F9F9F9;       /* フッター背景 */
  --text: #000;
  --en: 'Montserrat', sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, p, a, ul, li, section, header, footer, h3, big, small, img, iframe { margin: 0; padding: 0; border: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; vertical-align: top; }
big, small { font-size: inherit; }

html { font-size: 16px; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 2em;
  letter-spacing: 0.03em;
  font-weight: 500;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.wrapper { width: 100%; max-width: 90rem; padding: 0 5rem; margin: auto; }
.en { font-family: var(--en); font-weight: 700; }
.blu { color: var(--blue); }
.l_blu { color: var(--l-blue); }
.space { display: block; height: 1.25rem; }

/* 背景の水色帯（各セクション共通） */
.bq { position: relative; }
.bq::before { content: ""; display: block; position: absolute; z-index: -1; background-color: var(--band); width: 100vw; }

/* ---------- 見出し ---------- */
h3.big { text-align: center; line-height: 1; }
h3.big .en { font-size: 5.625em; line-height: 1; letter-spacing: 0.02em; }
h3.big .en small { display: block; font-size: 0.5556em; letter-spacing: 0.02em; line-height: 1; font-weight: 600; text-transform: lowercase; }
h3.big .jp { font-size: 1.5em; font-weight: 700; letter-spacing: 0.1em; margin-top: 0.75em; }
h3.big.blue { color: var(--blue); }

/* ---------- ボタン ---------- */
.btn1 {
  display: flex; justify-content: center; align-items: center;
  position: relative; z-index: 1; overflow: hidden;
  font-weight: bold; font-size: 1.125em; line-height: 1.4286em; letter-spacing: 0.1em;
  text-align: center; width: 20em; max-width: 100%;
  border: 4px solid #000; min-height: 4.1667em; padding: 0.67em 0;
  background: #fff;
  transition: 0.3s color;
}
.btn1::before {
  content: ""; position: absolute; z-index: -1; top: 50%; left: 50%;
  height: 110%; width: 0%; background-color: #000;
  transform: translate(-50%, -50%) skewX(-45deg); transition: 0.3s width;
}
.btn1:hover { color: #fff; }
.btn1:hover::before { width: 180%; }
.btn1.blue { color: var(--blue); border-color: var(--blue); }
.btn1.blue::before { background-color: var(--blue); }
.btn1.blue2 { color: #fff; border: none; background-color: var(--sky); }
.btn1.blue3 { color: #fff; border: none; background-color: var(--blue); }
.btn1.blue2::before, .btn1.blue3::before { background-color: #000; }

/* ---------- HEADER ---------- */
header {
  position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100px;
  display: flex; align-items: center; justify-content: space-between;
  transition: 0.3s background-color, 0.3s box-shadow;
}
body.scrolled header { background-color: rgba(255,255,255,0.95); box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
header .logo { width: 31.25em; display: flex; justify-content: center; transform: translateY(-150%); opacity: 0; transition: 0.5s transform, 0.5s opacity; }
body.scrolled header .logo { transform: translateY(0); opacity: 1; }
header .logo a { display: flex; align-items: center; line-height: 1; transition: opacity .3s; }
header .logo a:hover { opacity: .6; }
.logo_mark {
  display: inline-flex; justify-content: center; align-items: center;
  width: 1.75em; height: 1.75em; background: var(--blue); color: #fff;
  font-family: var(--en); font-weight: 700; font-size: 1.125em; letter-spacing: 0;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
}
.logo_name { font-weight: 800; font-size: 1.375em; letter-spacing: 0.02em; margin-left: 0.35em; display: inline-flex; align-items: center; }
.logo_name small { font-size: 0.4em; line-height: 1.1; margin-left: 0.3em; font-weight: 700; }
header .logo a .txt { color: var(--blue); font-family: var(--en); font-weight: 700; font-size: 1.0625em; letter-spacing: 0.02em; margin-left: 1em; }

header .navi { display: flex; align-items: center; height: 100%; }
header .navi .menu .main { display: flex; align-items: center; margin-right: 1.5em; }
header .navi .menu .main > li { position: relative; }
header .navi .menu .main > li > .btn {
  display: flex; align-items: center; cursor: pointer;
  font-size: 0.85em; font-weight: bold; line-height: 1; letter-spacing: 0.08em;
  padding: 2.5em 0.77em; color: #fff;
  filter: drop-shadow(0 0 15px rgba(0,0,0,.6)) drop-shadow(0 0 4px rgba(0,0,0,.8));
  transition: 0.3s color;
}
body.scrolled header .navi .menu .main > li > .btn { color: #000; filter: none; }
header .navi .menu .main > li > .btn:hover { color: var(--blue) !important; }
header .navi .menu .main > li > .btn.new { position: relative; }
header .navi .menu .main > li > .btn.new::after {
  content: "NEW"; position: absolute; top: 1.1em; right: 0.2em;
  background: #E60012; color: #fff; font-family: var(--en); font-size: 0.65em; line-height: 1;
  padding: 0.35em 0.5em; border-radius: 1em; filter: none;
}
header .navi .menu .main > li .sub {
  position: absolute; top: 100%; left: 50%; min-width: 15em;
  background-color: rgba(235, 248, 255, 0.95);
  opacity: 0; visibility: hidden; transform: translate(-50%, -0.77em);
  transition: 0.3s opacity, 0.3s transform, 0.3s visibility;
}
header .navi .menu .main > li:hover .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
header .navi .menu .main > li .sub ul { padding: 1em 1.4em; }
header .navi .menu .main > li .sub ul > li { padding: 0.3125em 0; font-size: 0.875em; font-weight: bold; white-space: nowrap; }
header .navi .menu .main > li .sub ul > li a:hover { color: var(--blue); }

header .navi .entry { height: 100%; }
header .navi .entry a.btn1 {
  width: 11.25em; height: 100%; min-height: 0; border: none; padding: 0;
  background-color: var(--blue); color: #fff; font-size: 1em;
}
header .navi .entry a.btn1::before { background-color: #fff; }
header .navi .entry a.btn1:hover { color: var(--blue); }
header .navi .entry a .inner { line-height: 1.5em; letter-spacing: 0.08em; font-weight: bold; }
header .navi .entry a .inner .slash { display: none; }
.navtoggle { display: none; }

/* 右下 追従ボタン */
.btn_entry_oya { position: fixed; z-index: 40; right: 27px; bottom: 25px; }
.btn_entry {
  display: flex; justify-content: center; align-items: center; text-align: center;
  width: 27em; height: 5.3em; border-radius: 850px;
  background: var(--yellow); color: #212529;
  font-weight: bold; font-size: 1em; line-height: 1.5;
  box-shadow: 0 6px 0 #d6ca00; transition: transform .2s, box-shadow .2s;
}
.btn_entry:hover { transform: translateY(4px); box-shadow: 0 2px 0 #d6ca00; }

/* 左上 大きいロゴ */
#logobig {
  position: fixed; z-index: 10; top: 2.8125em; left: 2.625em;
  width: 12.5em; height: 15em; background-color: rgba(255,255,255,0.9);
  text-align: center; padding-top: 2.4em; line-height: 1;
  transition: 0.3s opacity, 0.3s transform;
}
#logobig .mark {
  width: 3.4em; height: 3.4em; margin: auto; display: flex; justify-content: center; align-items: center;
  background: var(--blue); color: #fff; font-family: var(--en); font-weight: 700; font-size: 1.6em;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
}
#logobig .name { font-family: var(--en); font-weight: 700; font-size: 1.25em; margin-top: 0.9em; letter-spacing: 0.02em; }
#logobig .txt { font-size: 1.125em; color: var(--blue); font-family: var(--en); font-weight: 700; margin-top: 0.9em; letter-spacing: 0.02em; }
body.scrolled #logobig { opacity: 0; transform: scale(0.9); pointer-events: none; }

/* ---------- FV ---------- */
#fv { position: relative; height: 100vh; min-height: 600px; overflow: hidden; }
#fv .slider, #fv .slider li { position: absolute; inset: 0; }
#fv .slider li { opacity: 0; transition: opacity 1.5s; }
#fv .slider li.active { opacity: 1; }
#fv .collage {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: 32% 18% 18% 32%; grid-template-rows: 50% 50%;
}
#fv .collage .c { background-size: cover; background-position: center; transform: scale(1.06); transition: transform 7s linear; }
#fv .slider li.active .c { transform: scale(1); }
#fv .collage .c1 { grid-column: 1 / 3; grid-row: 1; }
#fv .collage .c2 { grid-column: 3 / 5; grid-row: 1; }
#fv .collage .c3 { grid-column: 1; grid-row: 2; background-position: center 20%; }
#fv .collage .c4 { grid-column: 2; grid-row: 2; background-position: center 20%; }
#fv .collage .c5 { grid-column: 3; grid-row: 2; background-position: center 20%; }
#fv .collage .c6 { grid-column: 4; grid-row: 2; }
#fv .main_copy {
  position: absolute; left: 5em; bottom: 5.625em; z-index: 10;
  filter: drop-shadow(0 0 30px rgba(0,0,0,0.5));
}
#fv .main_copy p { line-height: 1; margin-top: 0.18em; }
#fv .main_copy span {
  display: inline-block; color: #fff; font-weight: 900; font-size: 4.4em;
  letter-spacing: 0.06em; line-height: 1.25; padding: 0 0.15em;
  background: linear-gradient(transparent 62%, rgba(8,100,190,0.85) 62%);
}
#fv .main_copy em { font-style: normal; background: var(--blue); padding: 0 0.05em; }

/* ---------- MESSAGE ---------- */
#message { text-align: center; font-weight: bold; margin-top: 7.1875em; margin-bottom: 18em; }
#message::before { top: 34.375em; bottom: -8.125em; left: 71.354%; }
#message big { display: block; font-size: 2.375em; line-height: calc(60/38); letter-spacing: 0.05em; margin-bottom: 1.1em; font-weight: 800; }
#message .txt01 { line-height: 2.375em; letter-spacing: 0.08em; }

#message .stats { display: flex; justify-content: center; gap: 0; margin-top: 4.5em; border-top: 2px solid var(--blue); border-bottom: 2px solid var(--blue); background: #fff; }
#message .stats li { flex: 1; padding: 2.2em 0 2em; position: relative; }
#message .stats li:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 25%; height: 50%; border-right: 1px solid #cfe3f5; }
#message .stats .num { color: var(--blue); font-weight: 800; font-size: 1.25em; line-height: 1; }
#message .stats .num b { font-family: var(--en); font-weight: 700; font-size: 3.4em; letter-spacing: 0.02em; margin: 0 0.05em; }
#message .stats .num small { font-size: 0.9em; }
#message .stats .lbl { font-size: 0.95em; margin-top: 1em; letter-spacing: 0.08em; }

#message .navi { margin-top: 7.1875em; display: flex; justify-content: space-between; }
#message .navi > a { display: block; width: calc(610/1280*100%); border: 0.25em solid #000; background: #fff; transition: opacity 0.3s; }
#message .navi > a.vision { border-color: var(--blue); }
#message .navi > a:hover { opacity: 0.6; }
#message .navi > a img { display: block; width: 100%; aspect-ratio: 610/340; object-fit: cover; }
#message .navi > a .txt_wrap { text-align: center; padding: 3em 0 3.5em; }
#message .navi > a .txt_wrap big { margin-bottom: 0; }
#message .navi > a .txt_wrap big .en { font-size: 5.625rem; letter-spacing: 0.05em; line-height: 1; display: block; }
#message .navi > a .txt_wrap big .blk { color: #000; }
#message .navi > a .txt_wrap .txt { font-size: 1.25em; line-height: 1.8; letter-spacing: 0.05em; font-weight: 700; margin-top: 1em; }

/* ---------- KNOW THE COMPANY ---------- */
#know_the_company { margin-bottom: 14em; }
#know_the_company::before { top: -7.5em; bottom: -7.5em; right: 78.125%; }
#know_the_company .base { width: 100%; max-width: 90rem; padding: 0 5rem; margin: auto; display: flex; align-items: center; }
#know_the_company .base .content { width: 38.125em; flex-shrink: 0; text-align: center; }
#know_the_company .base .content .txt01 { font-weight: bold; margin-top: 3.125rem; letter-spacing: 0.05em; }
#know_the_company .base .content .txt01 big { display: block; font-size: 1.75em; line-height: calc(38/28); letter-spacing: 0.05em; font-weight: 700; color: var(--blue); margin-bottom: 1.5rem; }
#know_the_company .base .photo {
  flex: 1; height: 39.125em; margin-left: 3.75em; margin-right: calc(-1 * max(5rem, (100vw - 90rem) / 2 + 5rem));
  display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%;
}
#know_the_company .base .photo .img { background-size: cover; background-position: center; }
#know_the_company .navi { margin-top: 7.1875em; display: flex; justify-content: space-between; }
#know_the_company .navi > a { display: block; width: calc(610/1280*100%); border: 0.25em solid var(--blue); background: #fff; transition: opacity 0.3s; }
#know_the_company .navi > a:hover { opacity: 0.6; }
#know_the_company .navi > a img { display: block; width: 100%; aspect-ratio: 610/340; object-fit: cover; }
#know_the_company .navi > a .txt_wrap { text-align: center; padding: 2.5em 0; }
#know_the_company .navi > a .txt_wrap big { display: block; }
#know_the_company .navi > a .txt_wrap big .en { font-size: 2.25rem; letter-spacing: 0.05em; line-height: 1; display: block; }
#know_the_company .navi > a .txt_wrap .txt { font-size: 1.125em; line-height: 2.1; letter-spacing: 0.1em; font-weight: 700; color: var(--blue); margin-top: 0.3125em; }
.responsive-video-container { max-width: 60em; margin: 6em auto 0; padding: 0 5rem; text-align: center; box-sizing: content-box; }
.responsive-video-container p { font-size: 1.5em; font-weight: bold; margin-bottom: 1em; letter-spacing: 0.05em; }
.responsive-video-container iframe { width: 100%; aspect-ratio: 16/9; display: block; }

/* ---------- KNOW THE WORKS ---------- */
#know_the_works { text-align: center; margin-bottom: 13.75em; }
#know_the_works::before { top: -6.25em; bottom: -8.75em; left: 84.375%; }
#know_the_works .banner { position: relative; }
#know_the_works .banner .pc { height: 34.375em; position: relative; }
#know_the_works .banner .pc div { background-size: cover; background-position: center; position: absolute; top: 0; width: 33.3334%; height: 100%; }
#know_the_works .banner .pc .i01 { left: 0; }
#know_the_works .banner .pc .i02 { left: 33.3333%; }
#know_the_works .banner .pc .i03 { left: 66.6666%; }
#know_the_works .banner .pc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,0.45)); }
#know_the_works .banner h3 { position: absolute; z-index: 2; left: 50%; bottom: 12.7%; transform: translateX(-50%); color: #fff; white-space: nowrap; filter: drop-shadow(0 0 15px rgba(0,0,0,.4)); }
#know_the_works .txt01 { margin-top: 4.375em; margin-bottom: 3.75em; font-weight: bold; }
#know_the_works .txt01 big { display: block; font-size: 1.75em; line-height: calc(38/28); letter-spacing: 0.05em; font-weight: 700; margin-bottom: 1.5rem; }
#know_the_works .btn_list { display: flex; justify-content: space-between; max-width: 53.75em; margin: auto; }
#know_the_works .btn_list .btn1 { width: 16.25rem; }

/* ---------- KNOW THE PEOPLE ---------- */
#know_the_people { display: flex; align-items: center; margin-bottom: 13.75em; }
#know_the_people::before { top: -7.5em; bottom: -7.5em; right: 83.333%; }
#know_the_people .photo { flex: 1; position: relative; height: 52.5em; }
#know_the_people .photo div { height: 50%; width: 33.3334%; position: absolute; background-size: cover; background-position: center 15%; }
#know_the_people .photo .i01 { top: 0; left: 0; }
#know_the_people .photo .i02 { top: 0; left: 33.3333%; }
#know_the_people .photo .i03 { top: 0; left: 66.6666%; }
#know_the_people .photo .i04 { top: 50%; left: 0; }
#know_the_people .photo .i05 { top: 50%; left: 33.3333%; }
#know_the_people .photo .i06 { top: 50%; left: 66.6666%; }
#know_the_people .content { display: flex; justify-content: center; align-items: center; margin: 0 7.29%; }
#know_the_people .content .inner { text-align: center; }
#know_the_people .content .inner h3 { margin-left: -1em; margin-right: -1em; }
#know_the_people .content .inner .txt01 { font-weight: bold; margin-top: 4.375em; margin-bottom: 3.75em; }
#know_the_people .content .inner .txt01 big { display: block; font-size: 1.75em; line-height: calc(38/28); letter-spacing: 0.05em; font-weight: 700; color: var(--blue); margin-bottom: 1.5rem; }
#know_the_people .content .inner .buttons .btn1 { margin: 0 auto; }
#know_the_people .content .inner .buttons .btn1 + .btn1 { margin-top: 1.4em; }

/* ---------- KNOW THE ENVIRONMENT ---------- */
#know_the_environment { margin-bottom: 16.25em; }
#know_the_environment::before { top: -7.5em; bottom: -8.125em; left: 70.3125%; }
#know_the_environment .photo.p01 .main { background-size: cover; background-position: center 60%; height: 34.375em; }
#know_the_environment .base { display: flex; margin-top: 8.75em; }
#know_the_environment .base .photo.p02 { order: 2; flex: 1; margin-right: -8.75em; margin-left: 3.125%; background-size: cover; background-position: center; }
#know_the_environment .base .content { order: 1; text-align: center; position: relative; width: 37.5em; flex-shrink: 0; display: flex; flex-flow: column; justify-content: space-between; }
#know_the_environment .base .content h3 { position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); white-space: nowrap; padding-bottom: 3.625em; }
#know_the_environment .base .content h3 .en { font-size: min(5.625em, 6vw); filter: drop-shadow(0 0 15px rgba(255,255,255,.6)) drop-shadow(0 0 4px rgba(255,255,255,.8)); }
#know_the_environment .base .content .txt01 { letter-spacing: 0.05em; font-weight: bold; }
#know_the_environment .base .content .txt01 big { display: block; font-size: 1.75em; line-height: calc(38/28); letter-spacing: 0.05em; font-weight: 700; margin-bottom: 1.5rem; }
#know_the_environment .base .content .buttons { display: flex; flex-wrap: wrap; justify-content: space-between; width: 35em; max-width: 100%; margin: 0 auto; }
#know_the_environment .base .content .buttons .btn1 { width: 45.86%; margin-top: 2.5em; }

/* ---------- RECRUIT INFO ---------- */
#recruit_info { margin-bottom: 14.375em; }
#recruit_info::before { top: -7.5em; bottom: -7.5em; right: 87.5%; }
#recruit_info h3 { position: absolute; z-index: 2; top: -2.8125em; left: 50%; transform: translateX(-50%); white-space: nowrap; }
#recruit_info .base { display: flex; }
#recruit_info .base .img { flex: 1; background-size: cover; height: 37.5em; background-position: 35% 20%; }
#recruit_info .base .content { width: 25.625em; text-align: center; display: flex; justify-content: center; align-items: center; margin: 0 5.86%; }
#recruit_info .base .content .inner .txt01 { letter-spacing: 0.05em; font-weight: bold; padding-top: 5em; padding-bottom: 3.75em; }
#recruit_info .base .content .inner .buttons .btn1 { margin: auto; width: 22.5em; }
#recruit_info .base .content .inner .buttons .btn1 + .btn1 { margin-top: 1.4em; }

/* ---------- INTERNSHIP ---------- */
#internship { margin-bottom: 13.75em; }
#internship .bq::before { top: -7.5em; bottom: -7.5em; left: 84.375%; }
#internship .base { display: flex; align-items: center; }
#internship .base .photo { flex: 1; background-size: cover; background-position: center; margin-right: 5.47%; height: 43.75em; }
#internship .base .content { width: 30em; text-align: center; }
#internship .base .content .txt01 { font-weight: bold; margin-top: 3.75em; margin-bottom: 3.75em; letter-spacing: 0.05em; }
#internship .base .content .btn1 { margin: auto; }

/* ---------- NEWS & BLOG ---------- */
#newsfeed { margin-bottom: 10em; }
#newsfeed::before { top: -6.875em; bottom: -8.125em; right: 77.34%; }
#newsfeed h3 { text-align: left; margin-bottom: 3.5em; }
#newsfeed .postlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5em; }
#newsfeed .pitem > a { display: block; }
#newsfeed .pitem .photo { aspect-ratio: 1/1; overflow: hidden; }
#newsfeed .pitem .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
#newsfeed .pitem:hover .photo img { transform: scale(1.05); }
#newsfeed .pitem .info { margin-top: 1.2em; }
#newsfeed .pitem .date { font-family: var(--en); font-weight: 600; font-size: 0.875em; color: var(--blue); line-height: 1; }
#newsfeed .pitem .title { font-weight: bold; margin-top: 0.6em; line-height: 1.7; }
#newsfeed .pitem .tags span { display: inline-block; font-size: 0.75em; line-height: 1; padding: 0.5em 1em; border: 1px solid #000; margin-top: 0.9em; }
#newsfeed .morebtn { margin: 3.75em auto 0; }

/* ---------- FOOTER ---------- */
footer { padding-top: 5.875em; background-color: var(--gray); }
footer .base { max-width: 75em; margin: auto; padding: 0 5rem; }
footer .base .logo { text-align: center; }
footer .base .logo a { display: inline-flex; align-items: center; line-height: 1; transition: opacity .3s; }
footer .base .logo a:hover { opacity: .6; }
footer .base .logo .logo_mark { font-size: 1.5em; }
footer .base .logo .logo_name { font-size: 1.6em; }
footer .base .address { font-size: 0.9375em; line-height: 1; letter-spacing: 0.05em; text-align: center; margin-top: 1.87em; margin-bottom: 3.73em; }
footer .base .fnav { display: flex; justify-content: space-between; }
footer .base .fnav .part { font-size: 0.8125em; line-height: 1; letter-spacing: 0.05em; }
footer .base .fnav .part .title { font-size: 1.1538em; font-weight: bold; margin-bottom: 1.6em; }
footer .base .fnav .part .title:not(:first-child) { margin-top: 1.6em; }
footer .base .fnav .part ul li:not(:last-child) { margin-bottom: 1.15em; }
footer .base .fnav .part a:hover { color: var(--blue); }
footer .followus { display: flex; justify-content: center; align-items: center; gap: 1.5em; margin-top: 4em; font-weight: bold; }
footer .followus .txt { font-family: var(--en); font-weight: 700; letter-spacing: 0.1em; }
footer .followus a { font-family: var(--en); color: var(--blue); }
footer .copyright { text-align: right; font-size: 0.6875em; line-height: 1; letter-spacing: 0.05em; padding: 2.73em; }

/* Page Top */
.gotop { position: fixed; right: -5em; bottom: 9em; z-index: 55; opacity: 0.8; text-align: center; transition: 0.3s opacity, 0.3s right; }
.gotop:hover { opacity: 0.5; }
body.show_gotop .gotop { right: 1.875em; }
.gotop .arrow { display: block; width: 1.2em; height: 1.2em; margin: auto; border-top: 3px solid #000; border-left: 3px solid #000; transform: rotate(45deg); }
.gotop .txt { font-size: 0.6875em; line-height: 1.45; letter-spacing: 0.2em; font-weight: bold; margin-top: 0.6em; }

/* ---------- スクロールアニメーション ---------- */
.anim { opacity: 0; transform: translateY(40px); transition: 1s opacity, 1s transform; }
.anim.on { opacity: 1; transform: none; }

/* ============================================================
   中間幅（〜1440px）は vw で縮小
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1440px) {
  #logobig { font-size: 1.111vw; }
  #message .navi > a .txt_wrap { padding: 4.167vw 0; }
  #message .navi > a .txt_wrap big .en { font-size: 6.25vw; }
  #know_the_company .navi > a .txt_wrap big .en { font-size: 2.5vw; }
}
@media screen and (min-width: 768px) and (max-width: 1240px) {
  header .navi .menu .main > li > .btn { padding-left: .5em; padding-right: .5em; font-size: .78em; }
  header .logo { width: auto; padding-left: 1.5em; }
  #know_the_company .base { padding: 0 0 0 5rem; }
  #know_the_company .base .photo { margin-right: 0; margin-left: 2%; }
  #know_the_people .photo { height: 42.5em; }
  #fv .main_copy span { font-size: 3.6em; }
}

/* ============================================================
   スマホ（〜767px）
   ============================================================ */
@media screen and (max-width: 767px) {
  html { font-size: 13px; }
  .wrapper { padding: 0 2.3em; }
  h3.big .en { font-size: 2.6154em; }
  h3.big .jp { font-size: 1.15em; }

  header { height: 4.6em; background: #fff; }
  header .logo, body.scrolled header .logo { transform: none; opacity: 1; width: auto; flex: 1; justify-content: flex-start; padding-left: 0.77em; }
  .logo_name { font-size: 1.15em; }
  header .navi {
    position: fixed; top: 4.6em; left: 0; width: 100%; height: calc(100vh - 4.6em);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    background: rgba(79, 146, 201, 0.95); color: #fff; padding: 3em 2.3em; overflow-y: auto;
    opacity: 0; visibility: hidden; transition: .3s opacity, .3s visibility;
  }
  body.gnaviopen header .navi { opacity: 1; visibility: visible; }
  header .navi .menu .main { display: block; margin: 0; }
  header .navi .menu .main > li > .btn, body.scrolled header .navi .menu .main > li > .btn { color: #fff; filter: none; font-size: 1.077em; padding: 1em 0; }
  header .navi .menu .main > li > .btn.new::after { top: .6em; right: auto; left: 9em; }
  header .navi .menu .main > li .sub { position: static; opacity: 1; visibility: visible; transform: none; background: none; min-width: 0; }
  header .navi .menu .main > li .sub ul { padding: 0 0 .8em 1em; }
  header .navi .entry { height: auto; padding: 2em 0; }
  header .navi .entry a.btn1 { width: 100%; height: 3.85em; background: transparent; border: .25em solid #fff; }
  header .navi .entry a .inner br { display: none; }
  header .navi .entry a .inner .slash { display: inline; }
  .navtoggle { display: flex; align-items: center; justify-content: center; width: 4.6em; height: 4.6em; cursor: pointer; }
  .navtoggle .inner { position: relative; width: 1.8em; height: 1.3em; }
  .navtoggle span { position: absolute; left: 0; width: 100%; height: 2px; background: #000; transition: .3s; }
  .navtoggle span:nth-child(1) { top: 0; }
  .navtoggle span:nth-child(2) { top: 50%; }
  .navtoggle span:nth-child(3) { top: 100%; }
  body.gnaviopen .navtoggle span:nth-child(1) { top: 50%; transform: rotate(45deg); }
  body.gnaviopen .navtoggle span:nth-child(2) { opacity: 0; }
  body.gnaviopen .navtoggle span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

  .btn_entry_oya { right: 50%; transform: translateX(50%); bottom: 12px; }
  .btn_entry { width: 24em; height: 4.6em; font-size: 1em; }
  #logobig { display: none; }

  #main-contents { padding-top: 4.6em; }
  #fv { height: calc(100svh - 4.6em); min-height: 480px; }
  #fv .collage { grid-template-columns: 50% 50%; grid-template-rows: 34% 33% 33%; }
  #fv .collage .c1 { grid-column: 1 / 3; grid-row: 1; }
  #fv .collage .c2 { grid-column: 1; grid-row: 2; }
  #fv .collage .c3 { grid-column: 2; grid-row: 2; }
  #fv .collage .c4 { grid-column: 1; grid-row: 3; }
  #fv .collage .c5 { grid-column: 2; grid-row: 3; }
  #fv .collage .c6 { display: none; }
  #fv .main_copy { left: 1.5em; bottom: 7em; }
  #fv .main_copy span { font-size: 2.3em; }

  #message { text-align: left; margin-top: 2.3em; margin-bottom: 6.9em; }
  #message::before { top: 29em; bottom: -3em; left: 81.25%; }
  #message big { font-size: 1.385em; line-height: 1.5; text-align: center; }
  #message .txt01 { line-height: 2em; letter-spacing: 0.05em; }
  #message .txt01 br { display: none; }
  #message .stats { flex-wrap: wrap; margin-top: 2.5em; }
  #message .stats li { flex: 0 0 50%; text-align: center; padding: 1.4em 0; }
  #message .stats li:nth-child(2)::after { display: none; }
  #message .stats .num b { font-size: 2.6em; }
  #message .navi { margin-top: 3em; flex-wrap: wrap; }
  #message .navi > a { width: 100%; }
  #message .navi > a:first-child { margin-bottom: 1.9em; }
  #message .navi > a .txt_wrap { padding: 1.8em 0; }
  #message .navi > a .txt_wrap big .en { font-size: 2.6rem; }
  #message .navi > a .txt_wrap .txt { font-size: 1em; margin-top: 0.77em; }

  #know_the_company { margin-bottom: 8.46em; }
  #know_the_company::before { top: -3.85em; bottom: -3.85em; right: 73%; }
  #know_the_company .base { padding: 0 2.3em; flex-direction: column; }
  #know_the_company .base .content { width: 100%; text-align: left; order: 2; margin-top: 1.9em; }
  #know_the_company .base .content h3 { text-align: center; }
  #know_the_company .base .content .txt01 br { display: none; }
  #know_the_company .base .content .txt01 big { font-size: 1.31em; text-align: center; }
  #know_the_company .base .photo { order: 1; flex: none; width: calc(100% + 2.3em); height: 22.3em; margin: 0 0 0 -2.3em; }
  #know_the_company .navi { margin-top: 3em; flex-wrap: wrap; }
  #know_the_company .navi > a { width: 100%; }
  #know_the_company .navi > a:first-child { margin-bottom: 1.9em; }
  #know_the_company .navi > a .txt_wrap { padding: 1.8em 0; }
  #know_the_company .navi > a .txt_wrap big .en { font-size: 1.45em; }
  .responsive-video-container { padding: 0 2.3em; margin-top: 4em; }
  .responsive-video-container p { font-size: 1.1em; }

  #know_the_works { margin-bottom: 8.46em; }
  #know_the_works::before { top: -3.46em; bottom: -3.46em; left: 81.25%; }
  #know_the_works .banner .pc { height: 18em; }
  #know_the_works .banner h3 .en { font-size: 2.2em; }
  #know_the_works .txt01 { width: auto; margin: 2.15em 2.3em; text-align: left; }
  #know_the_works .txt01 br { display: none; }
  #know_the_works .txt01 big { font-size: 1.31em; text-align: center; }
  #know_the_works .btn_list { flex-direction: column; align-items: center; gap: 1.54em; }
  #know_the_works .btn_list .btn1 { width: 17.33em; }

  #know_the_people { flex-direction: column; margin-bottom: 8.46em; }
  #know_the_people::before { top: -3.85em; bottom: -3.85em; right: 73%; }
  #know_the_people .photo { flex: none; width: 100%; height: 28em; }
  #know_the_people .photo div { width: 50%; height: 33.3334%; }
  #know_the_people .photo .i01 { top: 0; left: 0; } #know_the_people .photo .i02 { top: 0; left: 50%; }
  #know_the_people .photo .i03 { top: 33.333%; left: 0; } #know_the_people .photo .i04 { top: 33.333%; left: 50%; }
  #know_the_people .photo .i05 { top: 66.666%; left: 0; } #know_the_people .photo .i06 { top: 66.666%; left: 50%; }
  #know_the_people .content { margin: 2.3em 2.3em 0; }
  #know_the_people .content .inner .txt01 { margin: 2em 0; text-align: left; }
  #know_the_people .content .inner .txt01 br { display: none; }
  #know_the_people .content .inner .txt01 big { font-size: 1.31em; text-align: center; }
  #know_the_people .content .inner .buttons .btn1 { width: 17.33em; }

  #know_the_environment { margin-bottom: 8.46em; }
  #know_the_environment::before { top: -3.85em; bottom: -3.85em; left: 81%; }
  #know_the_environment .photo.p01 .main { height: 16em; }
  #know_the_environment .base { flex-direction: column; margin-top: 2em; }
  #know_the_environment .base .photo.p02 { display: none; }
  #know_the_environment .base .content { width: 100%; }
  #know_the_environment .base .content h3 { position: static; transform: none; padding-bottom: 1.5em; }
  #know_the_environment .base .content .txt01 { text-align: left; }
  #know_the_environment .base .content .txt01 br { display: none; }
  #know_the_environment .base .content .txt01 big { font-size: 1.31em; text-align: center; }
  #know_the_environment .base .content .buttons .btn1 { width: 100%; margin-top: 1.54em; }

  #recruit_info { margin-bottom: 8.46em; padding-top: 1em; }
  #recruit_info::before { top: -3.85em; bottom: -3.85em; right: 81%; }
  #recruit_info h3 { position: static; transform: none; margin-bottom: 1.5em; }
  #recruit_info .base { flex-direction: column; }
  #recruit_info .base .img { height: 16em; flex: none; }
  #recruit_info .base .img.i02 { display: none; }
  #recruit_info .base .content { width: auto; margin: 0 2.3em; }
  #recruit_info .base .content .inner .txt01 { padding: 2em 0; }
  #recruit_info .base .content .inner .buttons .btn1 { width: 17.33em; }

  #internship { margin-bottom: 8.46em; }
  #internship .wrapper { padding: 0; }
  #internship .bq::before { top: -3.85em; bottom: -3.85em; left: 81%; }
  #internship .base { flex-direction: column; }
  #internship .base .photo { flex: none; width: 100%; height: 16em; margin: 0; }
  #internship .base .content { width: auto; margin: 2em 2.3em 0; }
  #internship .base .content .txt01 { margin: 2em 0; text-align: left; }
  #internship .base .content .txt01 br { display: none; }

  #newsfeed { margin-bottom: 6em; }
  #newsfeed h3 { text-align: center; margin-bottom: 2em; }
  #newsfeed .postlist { grid-template-columns: 1fr 1fr; gap: 1.5em; }
  #newsfeed .postlist .pitem:first-child { grid-column: 1 / 3; }

  footer { padding-top: 3.5em; padding-bottom: 7em; }
  footer .base { padding: 0 2.3em; }
  footer .base .address { line-height: 1.67; margin: 1.7em 0 2.5em; }
  footer .base .fnav { display: none; }
  footer .followus { margin-top: 1em; }
  footer .copyright { text-align: center; }
  .gotop { bottom: 7em; }
}