/* ============================================================
   mobile-tail.css — <768px overrides for Q&A / Environment /
   Join Us / Company (sections 07-10).
   Desktop (>=768px) is untouched: everything lives inside the
   single media query below.
   ============================================================ */

@media (max-width: 767px) {

  /* shared baseline: the 1440px canvas becomes fluid */
  .page {
    width: 100%;
  }

  /* ==========================================================
     07 Q&A (#blog)
     ========================================================== */

  .blog {
    height: auto;
    padding: 56px 0 48px;
  }

  /* navy tail carried over from Work — kept as a small accent */
  .blog__tail {
    width: 62%;
    height: 36px;
  }

  /* the gray panel only makes sense behind the 1376px slider */
  .blog__panel {
    display: none;
  }

  .blog__head {
    position: static;
    padding: 0 20px;
  }

  .blog__en {
    font-size: clamp(3.2rem, 17vw, 5rem);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .blog__sub {
    height: auto;
    gap: 6px;
    margin-top: 6px;
  }

  .blog__sub-dot {
    width: 22px;
    height: 15px;
  }

  .blog__sub-text {
    font-size: 15px;
    line-height: 20px;
  }

  /* --- slider: Prev/Next hoisted above the track ------------- */

  .blog__slider {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
  }

  .blog__nav {
    order: -1;
    position: static;
    width: auto;
    height: auto;
    padding: 0 20px;
    background: none;
    justify-content: flex-start;
    gap: 10px;
  }

  .blog__nav-btn {
    width: auto;
    height: 44px;
    padding: 0 18px;
    flex-direction: row;
    gap: 10px;
    border-radius: 999px;
  }

  .blog__nav-label {
    font-size: 14px;
    line-height: 14px;
  }

  .blog__nav-arrow {
    width: 14px;
    height: 12.5px;
  }

  .blog__track {
    margin-left: 12px;
    height: auto;
  }

  /* --- card ------------------------------------------------- */

  .blog__card {
    width: 78vw;
    height: auto;
  }

  .blog__card-body {
    width: auto;
    height: auto;
    flex: 1;
    border-radius: 14px;
  }

  .blog__card-date {
    height: 46px;
    padding: 0 18px 1px 8px;
    border-radius: 0 0 12px 0;
  }

  .blog__card-year {
    font-size: 13px;
    line-height: 13px;
  }

  .blog__card-day {
    font-size: 28px;
    line-height: 28px;
  }

  .blog__notch {
    width: 12px;
    height: 13px;
  }

  .blog__notch--date-r {
    background: radial-gradient(circle 12px at 100% 100%, #0000 0 11.4px, var(--magenta) 12.2px);
  }

  .blog__notch--date-b {
    top: 45px;
    background: radial-gradient(circle 12px at 100% 100%, #0000 0 11.4px, var(--magenta) 12.2px);
  }

  .blog__notch--title {
    top: 18px;
    background: radial-gradient(circle 12px at 100% 0%, #0000 0 11.4px, var(--magenta) 12.2px);
  }

  /* cards share the tallest card's height, so the answer panel grows
     instead of leaving a magenta void under short answers */
  .blog__card-photo {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    border-width: 6px;
    border-radius: 14px;
  }

  .blog__card-answer {
    flex: 1;
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: 150px;
    padding: 52px 14px 14px;
  }

  .blog__card-answer p {
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0.3px;
  }

  .blog__card-foot {
    width: 100%;
    height: auto;
    margin-top: -28px;
    padding: 0 10px 64px 0;
    gap: 14px;
  }

  .blog__card-titlebox {
    margin-right: 20px;
    padding: 12px 12px 0 8px;
    border-radius: 0 12px 0 0;
  }

  .blog__card-title {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.4px;
  }

  .blog__card-btn {
    right: 12px;
    bottom: 12px;
    width: 48px;
    height: 48px;
  }

  /* --- View All --------------------------------------------- */

  .blog__viewall {
    position: static;
    height: auto;
    margin-top: 22px;
    padding: 0 20px;
    gap: 12px;
  }

  .blog__viewall-circle {
    width: 52px;
    height: 52px;
  }

  .blog__viewall-text {
    font-size: 20px;
    line-height: 20px;
  }

  /* --- 業務内容 card: text above, photo below ----------------- */

  .blog__pres {
    position: static;
    width: auto;
    height: auto;
    margin: 32px 12px 0;
    padding: 20px 16px;
    display: block;
  }

  .blog__pres-inner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .blog__pres-left {
    width: 100%;
    padding-right: 0;
    gap: 14px;
  }

  .blog__pres-head {
    height: auto;
  }

  .blog__pres-title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0.8px;
  }

  .blog__pres-body {
    width: 100%;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.3px;
  }

  .blog__pres-illust {
    position: static;
    align-self: flex-end;
    width: 84px;
    height: 139px;
    margin: -6px 4px -8px 0;
  }

  .blog__pres-right {
    width: 100%;
    height: 190px;
  }

  .blog__pres-photo {
    width: 100%;
    height: 190px;
  }

  .blog__pres-btn {
    right: 12px;
    bottom: 12px;
    width: 56px;
    height: 56px;
  }

  /* --- floating character ----------------------------------- */

  .blog__float {
    left: auto;
    right: 6px;
    top: 4px;
    width: 96px;
    height: 152px;
  }

  .blog__float-char,
  .blog__float-char img {
    width: 96px;
    height: 152px;
  }

  /* ==========================================================
     08 Environment (#recruit)
     ========================================================== */

  #recruit {
    height: auto;
  }

  .recruit__card {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0 8px;
    /* 上端をまたぐ浮遊キャラの足元を空けるため天地を広く取る */
    padding: 78px 16px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* --- 見出し（白箱） --- */

  .recruit__head {
    order: 1;
    position: static;
    width: 100%;
    height: auto;
    padding: 16px 16px 18px;
    border-radius: 14px;
  }

  .recruit__head-in {
    position: static;
    width: 100%;
    height: auto;
  }

  .recruit__title {
    display: block;
    width: 100%;
    height: auto;
    font-size: clamp(2.2rem, 10.5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .recruit__label {
    position: static;
    width: auto;
    height: auto;
    margin-top: 8px;
    gap: 6px;
  }

  .recruit__label-dot {
    width: 22px;
    height: 15px;
  }

  .recruit__label p {
    font-size: 15px;
    line-height: 20px;
  }

  /* --- リード文（縦書き → 横書き） --- */

  .recruit__lead {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
    padding: 16px;
    border-radius: 14px;
  }

  .recruit__lead-tx {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 4px;
  }

  .recruit__lead-tx p {
    writing-mode: horizontal-tb;
    width: 100%;
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 0.3px;
    white-space: normal;
  }

  /* 逆アールは絶対配置の白箱にしか意味がない */
  .recruit__notch {
    display: none;
  }

  /* --- 写真マーキー（円形コラージュ） --- */

  .recruit__art {
    order: 3;
    position: relative;
    inset: auto;
    width: 100%;
  }

  /* 1408px 前提のブロブは畳めないので非表示 */
  .recruit__blob {
    display: none;
  }

  .recruit__photos {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    clip-path: circle(50% at 50% 50%);
  }

  .recruit__photos-in {
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 6px;
  }

  .recruit__strip {
    flex: 0 0 40%;
    height: 180%;
  }

  .recruit__col img {
    width: 100%;
    height: 120px;
  }

  /* 1セット = 5枚 x 120px = 600px */
  .recruit__strip--1 .recruit__col {
    animation-name: recruit-marquee-down-m;
  }

  .recruit__strip--2 .recruit__col {
    animation-name: recruit-marquee-up-m;
  }

  .recruit__strip--3 .recruit__col {
    animation-name: recruit-marquee-down-m;
  }

  @keyframes recruit-marquee-up-m {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-600px); }
  }

  @keyframes recruit-marquee-down-m {
    0%   { transform: translateY(-600px); }
    100% { transform: translateY(0); }
  }

  /* --- 働く環境リスト --- */

  .recruit__links {
    order: 4;
    position: static;
    width: 100%;
    gap: 10px;
  }

  .recruit__link {
    width: 100%;
    height: auto;
    min-height: 52px;
    gap: 12px;
  }

  .recruit__circle {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
  }

  .recruit__link-tx {
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0.3px;
    white-space: normal;
  }

  /* --- 浮遊キャラ + 吹き出し --- */

  .recruit__float {
    top: -64px;
    left: auto;
    right: 4px;
    width: 124px;
    height: 135px;
  }

  .recruit__chara,
  .recruit__chara img {
    width: 124px;
    height: 135px;
  }

  .recruit__bubble {
    top: 6px;
    left: auto;
    right: 92px;
    height: auto;
    padding: 8px 14px;
  }

  .recruit__bubble p {
    height: auto;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 0.2px;
  }

  .recruit__bubble-tail {
    top: auto;
    bottom: 8px;
    left: auto;
    right: -6px;
    width: 18px;
    height: 15px;
    clip-path: polygon(100% 0, 0 100%, 0 34%);
  }

  /* ==========================================================
     09 Join Us (#entry)
     ========================================================== */

  #entry {
    height: auto;
    padding: 8px 0;
  }

  .entry__card {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    min-height: 70svh;
    margin: 0 8px;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 背景スウォッシュを % ベースに組み直す */
  .entry__swoosh-green {
    left: -30%;
    top: auto;
    bottom: -8%;
    width: 152%;
    height: 46%;
    transform: rotate(-8deg);
  }

  .entry__swoosh-blue {
    left: -8%;
    top: auto;
    bottom: -16%;
    width: 132%;
    height: 38%;
    transform: rotate(-6deg);
  }

  .entry__swoosh-cyan {
    left: -22%;
    top: auto;
    bottom: 4%;
    width: 58%;
    height: 28%;
  }

  .entry__swoosh-pink {
    left: auto;
    right: 8%;
    top: 12%;
    width: 62px;
    height: 34px;
  }

  .entry__swoosh-pink::after {
    left: 28px;
    top: 24px;
    width: 62px;
    height: 34px;
  }

  /* 6体 → 四隅の4体だけ小さく残す */
  .entry__char--3,
  .entry__char--6 {
    display: none;
  }

  .entry__char--1 {
    top: 4px;
    left: 2px;
    width: 96px;
    height: 108px;
  }

  .entry__char--4 {
    top: 0;
    left: auto;
    right: 2px;
    width: 96px;
    height: 92px;
  }

  .entry__char--2 {
    top: auto;
    bottom: 6px;
    left: 0;
    width: 86px;
    height: 100px;
  }

  .entry__char--5 {
    top: auto;
    bottom: 2px;
    left: auto;
    right: 0;
    width: 76px;
    height: 108px;
  }

  .entry__text {
    position: static;
    width: 100%;
    gap: 12px;
  }

  .entry__title {
    height: auto;
    font-size: clamp(4.8rem, 20vw, 8rem);
    line-height: 1.02;
  }

  .entry__sub {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.3px;
  }

  .entry__badges {
    flex-wrap: wrap;
    gap: 10px;
  }

  .entry__badge {
    padding: 10px 16px;
    font-size: 14px;
    line-height: 14px;
    gap: 3px;
  }

  .entry__badge small {
    font-size: 9px;
    line-height: 9px;
  }

  /* ==========================================================
     10 Company (#contact)
     ========================================================== */

  #contact {
    height: auto;
    padding-bottom: 40px;
  }

  .contact__rule {
    left: 20px;
    width: calc(100% - 40px);
  }

  .contact__tab {
    left: 20px;
    padding: 7px 44px 6px 12px;
  }

  .contact__h {
    position: static;
    width: auto;
    height: auto;
    padding: 52px 20px 0;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.8px;
  }

  .contact__body {
    position: static;
    width: auto;
    padding: 20px 20px 0;
    gap: 16px;
  }

  .contact__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .contact__row dt {
    flex: none;
    font-size: 13px;
    line-height: 20px;
  }

  .contact__row dd {
    font-size: 14px;
    line-height: 24px;
  }

}