/* =====================
   1. 基本設定・共通
===================== */
:root {
    --background-color: #111111;
    --text-color: #FFFFFF;
    --accent-color: #00AEEF;
    --font-primary: serif,'Bebas Neue', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; }
body {
    font-family: var(--font-secondary);
    font-size: 1.4rem;
    line-height: 1.7;
    background-color: var(--background-color);
    color: var(--text-color);
    overflow-x: hidden;
}
.sp { display: none; }
a { text-decoration: none; }
/*----------パンくずリスト------------*/
.bred { background: white;color: black;}
.bred p { font-size: 1.2rem;padding-left: 24px;}
/* =====================
   2. レイアウト・コンテナ
===================== */
.container {
    width: 90%;
    max-width: 140rem;
    margin: 0 auto;
}
.content-section { padding: 12rem 0; }

/* =====================
   3. 見出し・テキスト
===================== */
#intro1,#intro2{
    font-family: var(--font-primary);
    font-size: 6rem;
}
h2, .section-title, footer h2 {
    font-family: var(--font-primary);
    font-size: 3.2rem;
    margin-bottom: 3rem;
    color: var(--text-color);
    text-align: center;
    letter-spacing: 0.5rem;
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 0.8s, transform 0.8s;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}
.content-section.in-view .section-title { opacity: 1; transform: translateY(0); }
h3, .section-subtitle {
    font-family: var(--font-primary);
    font-size: 2.8rem;
    color: var(--accent-color);
    text-align: center;
    letter-spacing: 0.2rem;
}
h4, .card-title, .faq-question {
    font-family: var(--font-primary);
    font-size: 2.4rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}
p, li { font-size: 1.8rem; }
.logo { font-family: var(--font-primary); font-size: 2.4rem; letter-spacing: 0.2rem; min-width: 240px;}
.logo a{text-decoration: none;color: white;}
.en{font-style: italic;color: #afafaf;}
.background-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-primary);
    font-size: 25vw;
    color: rgba(255, 255, 255, 0.05);
    z-index: -1;
    user-select: none;
}
.faq-question{ text-align: left; }
.section-subtitle.skillup-subtitle {
    margin-bottom: 16px;
    padding: 16px;
    position: relative;
    box-shadow: 0px 6px 9px 0 rgb(5 174 239 / 39%);
}
.section-subtitle.skillup-subtitle::after {
    content: "\f078";
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    position: absolute;
    right: 8px;
}

/* =====================
   4. ヘッダー・ナビ
===================== */
header {
    position: fixed;
    width: 100%;
    top: 0; left: 0;
    z-index: 100;
    padding: 3rem 0;
    background: linear-gradient(to bottom, rgb(135 135 135 /70%), transparent);
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header nav a {
    color: var(--text-color);
    text-decoration: none;
    margin-left: 4rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: color 0.3s;
    font-size: 1.6rem;
}
header nav a:hover { color: var(--accent-color); }
.contact-button {
    padding: 1rem 2rem;
    transition: background-color 0.3s, color 0.3s;
}
.contact-button:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
}

/* =====================
   5. ヒーロー・動画
===================== */
#hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero-video-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: -1;
}
.hero-video-wrapper video {
    width: 100%; height: 100%; object-fit: cover;
}
#hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.hero-content { z-index: 1; }
.hero-text {
    font-family: var(--font-primary);
    font-size: 6rem;
    letter-spacing: 1rem;
    line-height: 1.1;
}

/* =====================
   6. 画像
===================== */
.skillup-image-wrapper{ text-align: center; }
.skillup-image {
    width: 100%;
    height: auto;
    max-width: 960px;
}
.about-image{ clip-path: polygon(0 25%, 25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%);border: 2px solid;}
/* =====================
   7. セクション・グリッド
===================== */
.about-content { text-align: center; }
.philosophy-content {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
}
.philosophy-content h3 { margin-bottom: 3rem; }
.philosophy-content p { line-height: 2; }
#works { padding-bottom: 0; }
.works-section{padding: 12rem 6rem;}
.works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.work-item {
    height: 50rem;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.work-info {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.work-info .card-title{ text-shadow: 0px 2px 8px #000000; }
.skillup-list { max-width: 960px; margin: auto; }
.skillup-list > li { margin-bottom: 16px; }
.skillup-list dd::before { content: "┗"; position: absolute; left: 0; }
.skillup-list dd { position: relative; padding-left: 24px; }

/* =====================
   8. リクルート・カード
===================== */
.recruitment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    text-align: center;
}
.recruitment-item {
    background-color: rgba(255,255,255,0.05);
    padding: 4rem;
    border: 1px solid rgba(255,255,255,0.1);
}
.recruitment-item h4 {
    font-family: var(--font-primary);
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}
.recruitment-cards {
    display: flex;
    overflow-x: auto;
    margin-top: 4rem;
    margin-bottom: 4rem;
    gap: 16px;
    overflow-y: hidden;
    padding: 32px;
}
.recruitment-card {
    background: rgba(255,255,255,0.07);
    border: 0.15rem solid rgba(255,255,255,0.13);
    border-radius: 1.8rem;
    box-shadow: 0 0.4rem 2.4rem rgba(0,0,0,0.10);
    padding: 3.8rem 2rem 3.2rem 2rem;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s, box-shadow 0.2s;
    flex: 0 0 400px;
}
.recruitment-card:hover {
    transform: translateY(-0.8rem) scale(1.03);
    box-shadow: 0 0.8rem 3.2rem rgba(0,174,239,0.18);
    border-color: var(--accent-color);
}
.recruitment-card h4 {
    font-family: var(--font-primary);
    color: var(--accent-color);
    margin-bottom: 1.8rem;
    letter-spacing: 0.2rem;
}
.recruitment-card ul {
    list-style: none;
    padding-left: 0;
    line-height: 2.1;
    width: 100%;
}
.recruitment-card li {
    margin-bottom: 0.6rem;
    word-break: break-all;
}
.recruitment-card strong {
    color: var(--accent-color);
    font-weight: 700;
}

/* =====================
   9. 資格手当テーブル
===================== */
.qualification-table {
    width: 100%;
    max-width: 640px;
    margin: 32px auto 24px auto;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0.4rem 2.4rem rgba(0,0,0,0.10);
    color: var(--text-color);
    font-family: var(--font-secondary);
}
.qualification-table th, .qualification-table td {
    padding: 16px 12px;
    text-align: left;
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.13);
}
.qualification-table th {
    background: var(--accent-color);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 2rem;
    letter-spacing: 0.1rem;
}
.qualification-table tr:last-child td { border-bottom: none; }
.qualification-table tbody tr:hover {
    background: rgba(0,174,239,0.10);
    transition: background 0.2s;
}

/* =====================
   10. スケジュール・タイムライン
===================== */
.schedule-timeline {
    max-width: 960px;
    margin-top: 4rem;
    margin-bottom: 4rem;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}
.schedule-card {
  box-shadow: 0 0.2rem 1.2rem rgba(0,174,239,0.08);
  padding: 3.2rem 1.8rem 2.4rem 1.8rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.schedule-card:hover{
    transform: translateY(-0.6rem);
    box-shadow: 0 0 3.2rem rgb(0 174 239 / 52%);
    border-color: var(--accent-color);
}
.schedule-timeline::before {
    content: "";
    width: 2px;
    height: 100%;
    background: aliceblue;
    position: absolute;
    left: 0;
}
.schedule-card::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 1px;
    background: aliceblue;
    left: 0;
}
.schedule-time {
  font-family: var(--font-primary);
  color: var(--accent-color);
  margin-bottom: 1rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
}
.schedule-desc {
  color: var(--text-color);
  letter-spacing: 0.1rem;
}
.schedule-list{
    padding-left: 2.4rem;
    position: relative;
}
.schedule-list::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0.4rem;
    left: 1rem;
    background: #05aeef;
    z-index: -1;
}

/* =====================
   11. SNS
===================== */
.social-media-grid{ margin-bottom: 32px; }
.tiktok-item{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden;min-width: 322px}
.tiktok-embed{margin:0}
.tt-iframe{position:relative;width:100%;padding-top:177.78%;}
.tt-iframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* =====================
   12. CTA・フッター
===================== */
.join-us-cta { text-align: center; }
.join-us-cta a, .entry-button, .more-info-cta a {
    font-size: 2rem;
    font-family: var(--font-primary);
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: 0.3rem;
    padding: 2rem 4rem;
    border: 2px solid var(--text-color);
    transition: all 0.3s;
    display: inline-block;
    background-color: var(--accent-color);
    font-weight: 700;
    margin: 3rem 0;
}
.join-us-cta a:hover, .entry-button:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}
.more-info-cta a{
    font-size: 1.6rem;
    padding: 1rem 2rem;
}
footer {
    padding: 8rem 0;
    text-align: center;
    background-color: #000;
}
.footer-info { margin-top: 5rem; }
.footSns{ display: flex; gap: 20px; justify-content: center; }
.footSns a{ color: white; }

/* =====================
   13. お問い合わせフォーム
===================== */
.contact-form {
    background: #565656cf;
    border: 3px solid #ffffff;
    border-radius: 16px;
    max-width: 960px;
    margin: 16px auto;
    box-shadow: 0px 0px 10px 1px rgb(130 130 130);
}
.wpcf7{ padding:16px; }
.wpcf7-form-control-wrap > input, textarea{
    background: #ffffff;width:100%;color: #919191;padding-left: 4px;
}
.submitbutton { text-align: center; }
.submitbutton > p{
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.wpcf7-submit{
    padding: 4px 16px;
    border: 2px outset;
    background: #eaeaea;
}
.wpcf7-form{position:relative;}
.wpcf7-form > p { margin-bottom: 16px; }
.submitbutton{ text-align: center; }
.contact-phone {
    text-align: center;
    margin-top: 8rem;
    color: #000000;
    position: relative;
    padding: 20px 0;
}
.contact-phone a {
    font-size: 2.4rem;
    font-weight: bold;
    font-style: italic;
}
.contact-phone::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: -1;
}

.contact-note{
    margin-top: 50px;
}

/* =====================
   14. 社員の声
===================== */
#voices { background: #a9a9a9; padding: 60px 0; }
.voices-grid {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.voice-item {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 32px 28px 24px 28px;
  max-width: 340px;
  min-width: 260px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.voice-item::before {
  content: "";
  display: block;
  position: absolute;
  left: 32px;
  top: -32px;
  width: 48px;
  height: 48px;
  background: url('https://jobs.takumipaint.co.jp/wp-content/themes/jobthema/img/man_shadow.png') no-repeat center/cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.voice-item:nth-child(2)::before {
  left: auto;
  right: 32px;
  background: url('https://jobs.takumipaint.co.jp/wp-content/themes/jobthema/img/woman_shadow.png') no-repeat center/cover;
}
.voice-item p {
  color: #333;
  margin: 0 0 18px 0;
  position: relative;
  padding-left: 18px;
}
.voice-item p::before {
  content: "“";
  font-size: 2.2rem;
  color: #009688;
  position: absolute;
  left: 0;
  top: -8px;
}
.voice-item span {
  font-size: 1.08rem;
  color: #888;
  margin-top: auto;
  align-self: flex-end;
}

/* =====================
   15. レスポンシブ
===================== */
@media (max-width: 1024px) {
    h1 { font-size: 4.5rem; }
    h2, .section-title, footer h2 { font-size: 2.6rem; }
    h3, .section-subtitle { font-size: 2.1rem; }
    .join-us-cta a, .entry-button { font-size: 1.7rem; }
    .schedule-timeline { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .qualification-table { max-width: 98vw; }
    .qualification-table th, .qualification-table td { font-size: 1.5rem; padding: 12px 8px; }
}
@media (max-width: 768px) {
    .sp{display: block;}
    .pc{display: none;}
    #intro1,#intro2{ font-size: 3.2rem; }
    .hero-text {font-size: 4rem;}
    h1 { font-size: 3.2rem; }
    h2, .section-title, footer h2 { font-size: 2.6rem; }
    h3, .section-subtitle { font-size: 2.1rem; }
    h4, .card-title, .faq-question { font-size: 1.8rem; }
    p, li { font-size: 1.4rem; }
    .join-us-cta a, .entry-button { font-size: 1.3rem; }
    .logo { font-size: 2rem; }
    header nav a { font-size: 1.2rem; }
    header{ max-width: 100vw; }
    .works-section{padding: 12rem 0;}
    .works-grid { grid-template-columns: 1fr;}
    header nav a { margin-left: 2rem; }
    .join-us-cta a { padding: 1.5rem 3rem; }
    .recruitment-cards { grid-template-columns: 1fr; gap: 2rem; }
    .recruitment-card { padding: 2.8rem 1.2rem 2.4rem 1.2rem;width: 100%;}
    .schedule-timeline {
        grid-template-columns: 1fr;
        gap: 1.6rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem;
    }
    .schedule-card {
        min-width: 22rem;
        scroll-snap-align: start;
    }
    .work-info { padding: 1rem 2rem; }
    .work-info .card-title{ margin-bottom: 0; }
    .work-item { width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 16px; }
    .qualification-table { font-size: 1.3rem; max-width: 98vw; }
    .qualification-table th, .qualification-table td { padding: 10px 6px; font-size: 1.3rem; }
    .voices-grid { flex-direction: column; align-items: center; gap: 20px; }
    .voice-item { max-width: 95vw; min-width: 0; padding: 24px 12px 18px 12px; margin-bottom: 16px; }
    .about-image{ width: 100%;height: auto;}
}
@media (max-width: 480px) {
    .entry-button { padding: 1.5rem 3rem; }
}

/* =====================
   16. ハンバーガーメニュー
===================== */
.hamburger {
  width: 30px;
  height: 24px;
  z-index: 3000;
  cursor: pointer;
  display: none;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span {
  height: 3px;
  background: white;
  display: block;
  border-radius: 1px;
  transition: all 0.3s;
}

/* =====================
   17. モバイルナビ
===================== */
.mobile-nav {
  position: fixed;
  top: 0; left: 0;
  height: 100vh; width: 100vw;
  background-color: rgba(0,0,0,0.95);
  z-index: 2000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px;
}
.mobile-nav ul { list-style: none; text-align: center; }
.mobile-nav li {
  margin: 20px 0;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.4s ease forwards;
}
.mobile-nav li:nth-child(1) { animation-delay: 0.2s; }
.mobile-nav li:nth-child(2) { animation-delay: 0.4s; }
.mobile-nav li:nth-child(3) { animation-delay: 0.6s; }
.mobile-nav li:nth-child(4) { animation-delay: 0.8s; }
.mobile-nav a {
  font-family: var(--font-primary);
  color: white;
  text-decoration: none;
  letter-spacing: 3px;
}
.close-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 2.5rem;
  color: white;
  cursor: pointer;
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  .hamburger { display: flex; }
  header nav { display: none; }
}
/* =====================
   採用までの流れ
===================== */
.flow-desc{ margin-bottom: 32px;}
.flow-title { display: flex;gap: 20px;}
/* =====================
   FAQ
===================== */
.faq-item {margin-bottom: 16px;}