/* =========================================
   Variables & Reset
   ========================================= */
:root {
    --color-primary: #66CC99; /* Emerald Green */
    --color-primary-dark: #4DB382;
    --bg-secondary: #f4f7f5;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg-light: #F9F9F9;
    --color-bg-dark: #2C3E50;
    --color-white: #FFFFFF;
    
    /* フォント */
    --font-base: "Noto Sans JP", sans-serif;
    --font-en: "Montserrat", sans-serif;
    
    /* ブランドカラー（統一） */
    --accent-color: #57c688;
    --accent-dark: #3da86c;
    
    --easing: cubic-bezier(0.25, 1, 0.5, 1);
}



/* =========================================
   リセット & ベーススタイル (Rem基準の統一)
   ========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    /* ★重要: ここで基準を10pxにします (16px * 62.5% = 10px) */
    font-size: 62.5%; 
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    /* 基準が10pxになったので、16pxに戻すには1.6remを指定 */
    font-size: 1.6rem; 
    color: var(--color-text);
    line-height: 1.8;
    letter-spacing: 0.05em;
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
img { max-width: 100%; height: auto; vertical-align: bottom; object-fit: cover; }
ul { list-style: none; }

/* =========================================
   Breadcrumb Styles
   ========================================= */
.breadcrumb { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 30px; font-size: 14px; color: #333; }
.breadcrumb li { display: flex; align-items: center; line-height: 1.5; }
.breadcrumb li a { color: #333; text-decoration: none; transition: color 0.3s; }
.breadcrumb li a:hover { color: #0073e6; text-decoration: underline; }
.breadcrumb li.bc-sep { margin: 0 10px; color: #999; font-size: 0.8em; }
.breadcrumb li:last-child { font-weight: bold; color: #000; }

/* Utilities */
  .pc{display: none;}
  .sp{display: block;}
.container { width: 90%; max-width: 1080px; margin: 0 auto; }
.l-container { width: 90%; max-width: 1140px; margin: 0 auto; padding: 0 2rem; }
.l-section { padding: 10rem 0; position: relative; z-index: 1; }

.u-sp-only { display: block; }
/* 10px基準なので、1.2rem = 12px */
.u-text-sm { font-size: 1.2rem; } 
@media (min-width: 768px) { 
   .sp{display: none;}
   .pc{display: block;}
   .u-sp-only { display: none; } 
}
.u-mt-small { margin-top: 1rem; }
.u-text-highlight { color: var(--accent-color); font-weight: 700; }


.view-counts{position: fixed; bottom: 10%; left: 3%; z-index: 1000;}

/* =========================================
   Typography (サイズ再調整)
   ========================================= */
.section-title {
    font-family: var(--font-en);
    /* PCで48px, SPで小さく */
    font-size: clamp(3.2rem, 5vw, 4.8rem); 
    font-weight: 700;
    color: #333;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-family: var(--font-en);
    font-size: 1.4rem; /* 14px */
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 1rem;
    display: block;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.text-body {
    font-size: 1.5rem; /* 15px */
    color: var(--color-text-light);
    line-height: 1.9;
}

.section-header { text-align: center; margin-bottom: 6rem; }
.section-header__en { display: block; font-size: 1.3rem; color: var(--color-primary); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
.section-header__jp { font-size: 2.8rem; font-weight: 700; } /* 28px */


/* =========================================
   Components (Buttons)
   ========================================= */
.btn { display: inline-flex; justify-content: center; align-items: center; padding: 1em 2.5em; border-radius: 50px; font-weight: 700; transition: all 0.3s var(--easing); position: relative; overflow: hidden; gap: 0.5em; font-size: 1.6rem; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.btn--primary { background: var(--color-primary); color: var(--color-white); }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--white { background: var(--color-white); color: var(--color-primary); }
.btn--outline { border: 2px solid var(--color-white); color: var(--color-white); }
.btn--outline:hover { background: rgba(255,255,255,0.1); }

.c-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 1.4rem 4rem; color: #fff; font-weight: 700; border-radius: 100px; position: relative; overflow: hidden; z-index: 1; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--accent-color); box-shadow: 0 4px 15px rgba(87, 198, 136, 0.3); font-size: 1.6rem; }
.c-btn-primary span { position: relative; z-index: 2; letter-spacing: 0.05em; }
.c-btn-primary__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--accent-dark); z-index: 1; transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.c-btn-primary:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(87, 198, 136, 0.5); }
.c-btn-primary:hover .c-btn-primary__bg { transform: scaleX(1); }

/* セクション背景 */
.section { padding: 8rem 0; }
.section--gray { background: var(--color-bg-light); }
.section--dark { background: var(--color-bg-dark); color: var(--color-white); }


/* =========================================
   ヘッダー
   ========================================= */
.header{ position:fixed; top:0; left:0; width:100%; height:80px; z-index:100; display:flex; align-items:center; transition:background 0.4s cubic-bezier(0.16, 1, 0.3, 1),height 0.4s; }
.header.is-scrolled{ background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); box-shadow:0 2px 20px rgba(0,0,0,0.03); height:70px; }
.header__inner{ width:90%; max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.header__logo{ font-family:var(--font-en); font-size:2.4rem; font-weight:700; color:#333; letter-spacing:-0.03em; width: auto; max-width: 80px; }
.header__logo span{ color:var(--accent-color); }
.header__logo img { width: auto; }

.header__nav{ display:none; align-items:center; gap:3rem; }
@media (min-width:768px){ .header__nav{ display:flex; } }

.nav-list{ display:flex; gap:2.5rem; }
.nav-link{ font-size:1.4rem; font-weight:600; color:#333; position:relative; transition:color 0.3s; }
.nav-link::after{ content:""; position:absolute; bottom:-4px; left:50%; width:0; height:2px; background:var(--accent-color); transition:width 0.3s cubic-bezier(0.16, 1, 0.3, 1),left 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-link:hover{ color:var(--accent-color); }
.nav-link:hover::after{ width:100%; left:0; }

.c-btn-nav{ padding:0.8rem 2.4rem; border:1px solid var(--accent-color); border-radius:50px; color:var(--accent-color); font-weight:700; font-size:1.3rem; transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.c-btn-nav:hover{ background:var(--accent-color); color:#fff; transform:translateY(-2px); }

/* ハンバーガー */
.hamburger{ display:block; width:30px; height:24px; position:relative; cursor:pointer; z-index:102; }
@media (min-width:768px){ 
   .hamburger{ display:none; }
 }
.hamburger span{ position:absolute; left:0; width:100%; height:2px; background-color:#333; transition:0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.hamburger span:nth-of-type(1){ top:0; }
.hamburger span:nth-of-type(2){ top:11px; }
.hamburger span:nth-of-type(3){ bottom:0; }
.hamburger.active span:nth-of-type(1){ transform:rotate(45deg); top:11px; }
.hamburger.active span:nth-of-type(2){ opacity:0; transform:translateX(10px); }
.hamburger.active span:nth-of-type(3){ transform:rotate(-45deg); bottom:11px; }

/* モバイルメニュー */
.mobile-nav{ position:fixed; top:0; right:0; width:100%; height:100vh; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); z-index:101; pointer-events:none; opacity:0; transition:opacity 0.4s; display:flex; align-items:center; justify-content:center; }
.mobile-nav.active{ pointer-events:auto; opacity:1; }
.mobile-nav__inner{ display:flex; flex-direction:column; align-items:center; gap:3rem; }
.mobile-link{ font-size:2.4rem; font-weight:700; color:#333; }

/* =========================================
   Footer
   ========================================= */
.footer { background: #fff; border-top: 1px solid #eee; padding: 40px 0; color: var(--color-text-light); text-align: center; }
.footer__logo img { height: 30px; opacity: 0.6; margin-bottom: 20px; }
.footer__sns { margin-bottom: 20px; font-size: 2.4rem; }
.footer__sns a { margin: 0 10px; color: #ccc; }
.footer__sns a:hover { color: var(--color-primary); }
.footer__copyright { font-size: 1.2rem; }

/* Animation Utils */
.js-observe { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--easing), transform 0.8s var(--easing); }
.js-observe.is-visible { opacity: 1; transform: translateY(0); }



/* =========================================
   ヒーローセクション
   ========================================= */
.hero{ position:relative; width:100%; min-height:100vh; padding-top:80px; display:flex; align-items:center; overflow:hidden; background-color: var(--bg-secondary); z-index: 0;}
.hero__canvas{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }
.hero__container{ position:relative; z-index:1; pointer-events:none; }
.hero__content{ max-width:600px; pointer-events:auto; }

.hero__title{ font-size:clamp(3.0rem, 7vw, 6.4rem); line-height:1.2; font-weight:700; margin-bottom:2.4rem; color:#333; }
.hero__copy-en{ background:linear-gradient(135deg,#333 0%,#57c688 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero__subtitle{ font-family:var(--font-en); font-size:1.6rem; color:var(--text-light); margin-bottom:3rem; letter-spacing:0.05em; font-weight:600; }
.hero__desc{ margin-bottom:4rem; max-width:480px; font-size: 1.5rem; }


/* =========================================
   Service (Editorial / Bento)
   ========================================= */
#service{ background-color: var(--bg-secondary); }
.service-editorial{ background-color:#fff; padding-bottom:12rem; }
.editorial-list{ display:flex; flex-direction:column; gap:6rem; }
.editorial-item{ display:flex; flex-direction:column; gap:2.5rem; }
.editorial-item__img-wrap{ width:100%; position:relative; overflow:hidden; border-radius:16px; box-shadow:0 15px 40px rgba(0,0,0,0.08); }
.editorial-item__img{ width:100%; height:280px; object-fit:cover; transition:transform 1.5s cubic-bezier(0.16,1,0.3,1); }
.editorial-item:hover .editorial-item__img{ transform:scale(1.05); }
.editorial-item__tag{ position:absolute; top:20px; left:20px; background:rgba(255,255,255,0.95); color:var(--accent-color); padding:0.6rem 1.8rem; border-radius:50px; font-family:var(--font-en); font-weight:700; font-size:1.2rem; letter-spacing:0.05em; box-shadow:0 4px 10px rgba(0,0,0,0.1); backdrop-filter:blur(4px); }
.editorial-item__content{ display:flex; flex-direction:column; justify-content:center; }
.editorial-item__title{ font-size:2.4rem; font-weight:700; margin-bottom:1rem; color:var(--color-text); line-height:1.4; }
.editorial-item__role{ font-family:var(--font-en); font-size:1.3rem; color:var(--accent-color); font-weight:700; margin-bottom:1.2rem; letter-spacing:0.05em; display:flex; align-items:center; gap:1rem; }
.editorial-item__role::before{ content:""; width:30px; height:1px; background-color:var(--accent-color); }
.editorial-item__desc{ color:var(--color-text-light); line-height:2; text-align:justify; font-size: 1.5rem; }

@media (min-width:768px){
    .editorial-list{ gap:12rem; }
    .editorial-item{ flex-direction:row; gap:8rem; align-items:center; }
    .editorial-item__img-wrap{ width:50%; }
    .editorial-item__content{ width:50%; }
    .editorial-item__img{ height:400px; }
    .editorial-item__title{ font-size:3.2rem; margin-bottom:1.5rem; }
    .editorial-item__desc{ font-size: 1.6rem; }
    .editorial-item:nth-child(even){ flex-direction:row-reverse; }
}

/* Bento Card Styles (必要に応じて保持) */
.bento-card__bg-wrap {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;overflow: hidden;border-radius: 24px;opacity: 0.1;transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);}
.bento-card__bg {width: 100%;height: 100%;object-fit: cover;transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);}
.bento-card:hover .bento-card__bg-wrap {opacity: 0.25;}
.bento-card:hover .bento-card__bg {transform: scale(1.1);}
.bento-card__num {font-family: "Montserrat", sans-serif;;font-size: 5rem;font-weight: 700;color: #57c688;opacity: 0.2;line-height: 1;margin-bottom: auto;transform: translateY(0);transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);}
.bento-card:hover .bento-card__num {transform: translateY(-10px);opacity: 0.4;}
.bento-card__title {font-size: 2.2rem;font-weight: 700;margin-bottom: 1rem;}
.bento-card__desc {font-size: 1.4rem;color: #666;}


/* =========================================
   Intro
   ========================================= */
.intro__container { display: flex; flex-direction: column; gap: 40px; align-items: center; }
.intro__image { width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.intro__image img { width: 100%; transition: transform 0.5s; }
.intro__image:hover img { transform: scale(1.05); }
.intro__heading { font-size: 2.4rem; font-weight: 700; line-height: 1.6; margin-bottom: 1.5rem; color: var(--color-primary); }
.intro__desc { margin-bottom: 1.5rem; color: var(--color-text-light); text-align: justify; font-size: 1.5rem; }

@media (min-width: 768px) {
    .intro__container { flex-direction: row; gap: 60px; }
    .intro__image { flex: 1; }
    .intro__text { flex: 1; }
    .intro__heading { font-size: 2.8rem; }
}


/* =========================================
   Benefits
   ========================================= */
.benefits__grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
.benefit-card { background: var(--color-white); padding: 40px 15px; border-radius: 12px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: transform 0.3s, box-shadow 0.3s;}
.benefit-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.benefit-card__icon { font-size: 4rem; color: var(--color-primary); margin-bottom: 1.5rem; }
.benefit-card__title { font-size: 2.0rem; font-weight: 700; margin-bottom: 1rem; color: var(--color-text); }
.benefit-card__text { font-size: 1.5rem; color: var(--color-text-light); line-height: 1.8; text-align: left; }

@media (min-width: 768px) {
    .benefits__grid { grid-template-columns: repeat(3, 1fr); }
}


/* =========================================
   Job & Career
   ========================================= */
.job__mission { text-align: center; margin-bottom: 6rem; background: rgba(102, 204, 153, 0.1); padding: 3rem; border-radius: 8px; }
.job__sub-title { color: var(--color-primary); font-weight: 700; margin-bottom: 10px; font-size: 2.0rem; }
.job__mission-text { font-size: 1.6rem; font-weight: 500; }
.career-steps { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.career-step { background: var(--color-white); border: 2px solid #eee; padding: 25px; border-radius: 8px; width: 100%; text-align: center; position: relative; }
.career-step--highlight { border-color: var(--color-primary); background: #f0fff9; }
.career-step__num { display: inline-block; background: var(--color-text); color: var(--color-white); padding: 2px 10px; font-size: 1.0rem; border-radius: 20px; margin-bottom: 10px; }
.career-step--highlight .career-step__num { background: var(--color-primary); }
.career-step__title { font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; }
.career-step__desc { font-size: 1.3rem; color: var(--color-text-light); }
.career-step__badge { display: inline-block; margin-top: 10px; font-size: 1.2rem; color: var(--color-primary); font-weight: 700; }
.career-step__arrow { color: #ccc; font-size: 2.4rem; transform: rotate(90deg); }

@media (min-width: 768px) {
    .career-steps { flex-direction: row; align-items: stretch; }
    .career-step__arrow { transform: rotate(0); }
}


/* =========================================
   Interview
   ========================================= */
.interview__container { display: flex; flex-direction: column; gap: 40px; padding-left: 50px;padding-right: 50px; box-sizing: border-box; }
.interview__img-wrapper { position: relative; }
.interview__img { border-radius: 12px; filter: grayscale(30%); transition: filter 0.5s; }
.interview__img:hover { filter: grayscale(0%); }
.interview__label { color: var(--color-primary); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.1em; text-transform: uppercase; }
.interview__catch { font-size: 2.4rem; font-weight: 700; margin: 15px 0; line-height: 1.5; }
.interview__profile { font-size: 1.4rem; color: #aaa; margin-bottom: 30px; border-bottom: 1px solid #555; padding-bottom: 20px; }
.qa-item { margin-bottom: 20px; }
.qa-item__q { color: var(--color-primary); font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; font-size: 1.6rem; }
.qa-item__q::before { content: 'Q.'; background: var(--color-primary); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 1.2rem; }
.qa-item__a { font-size: 1.5rem; padding-left: 2em; color: #ddd; }

.carousel{ position:relative; width:100%; max-width:1000px; margin:0 auto; overflow:hidden; padding-bottom:3rem; }
.carousel__track{ display:flex; transition:transform 0.5s cubic-bezier(0.25,1,0.5,1); width:100%; }
.carousel__slide{ min-width:100%; padding:0 1rem; box-sizing:border-box; }
.interview__container{ display:flex; flex-direction:column; gap:30px; }
@media (min-width:768px){
.interview__container{ flex-direction:row; align-items:center; }
}
/* =========================================
   スマホ表示時の矢印被り修正
   ========================================= */
@media (max-width: 767px) {
  .container {width: 100%;}
  .carousel__slide{padding: 0;}
}
.carousel__btn{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff; width:40px; height:40px; border-radius:50%; cursor:pointer; z-index:10; transition:all 0.3s; display:flex; align-items:center; justify-content:center; background:var(--color-primary); border-color:var(--color-primary); }
.carousel__btn:hover{ background:var(--color-primary); border-color:var(--color-primary); }
.carousel__btn--prev{ left:0; }
.carousel__btn--next{ right:0; }
@media (min-width:768px){
.carousel__btn{ width:50px; height:50px; font-size:1.2rem; }
.carousel__btn--prev{ left:-60px; }
.carousel__btn--next{ right:-60px; }
.carousel{ overflow:visible; }
.carousel-wrapper{ overflow:hidden; }
}
@media (max-width:1100px){
.carousel{ overflow:hidden; }
.carousel__btn--prev{ left:10px; background:rgba(0,0,0,0.5); }
.carousel__btn--next{ right:10px; background:rgba(0,0,0,0.5); }
}
.carousel__dots{ display:flex; justify-content:center; gap:10px; margin-top:20px; position:absolute; bottom:0; width:100%; }
.carousel__dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.3); border:none; cursor:pointer; transition:background 0.3s; }
.carousel__dot.is-current{ background:var(--color-primary); transform:scale(1.2); }

@media (min-width: 768px) {
    .interview__container { flex-direction: row; }
    .interview__img-wrapper { flex: 1; }
    .interview__content { flex: 1; }
    .interview__catch { font-size: 3.0rem; }
    .interview__container {
    padding-left: 65px;
    padding-right: 65px;
  }
}


/* =========================================
   Numbers
   ========================================= */
.numbers__grid { display: grid; gap: 30px; grid-template-columns: 1fr; text-align: center; }
.number-box { padding: 30px; border: 1px solid #eee; border-radius: 12px; transition: 0.3s; }
.number-box:hover { border-color: var(--color-primary); background: #fcfcfc; }
.number-box__label { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin-bottom: 10px; }
.number-box__data { font-size: 5.6rem; font-weight: 700; color: var(--color-primary); line-height: 1; margin-bottom: 5px; font-family: sans-serif; }
.number-box__unit { font-size: 1.6rem; color: var(--color-text); }
.number-box__sub { font-size: 1.3rem; color: var(--color-text-light); }

@media (min-width: 768px) { .numbers__grid { grid-template-columns: repeat(3, 1fr); } }


/* =========================================
   FAQ & Flow
   ========================================= */
.faq-flow__wrapper { display: grid; gap: 60px; grid-template-columns: 1fr; }
.sub-section-title { font-size: 2.8rem; margin-bottom: 30px; color: var(--color-primary); border-left: 5px solid var(--color-primary); padding-left: 15px; }
.sub-section-title__jp { display: block; font-size: 1.4rem; color: var(--color-text); margin-top: 5px; }

/* Accordion */
.accordion__item { border-bottom: 1px solid #ddd; }
.accordion__head { width: 100%; text-align: left; padding: 20px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s; background-color:inherit; border: none; font-size: 1.6rem; }
.accordion__head:hover { color: var(--color-primary); }
.accordion__icon { width: 20px; height: 20px; position: relative; }
.accordion__icon::before, .accordion__icon::after { content: ''; position: absolute; background: #999; top: 50%; left: 0; transition: 0.3s; }
.accordion__icon::before { width: 100%; height: 2px; transform: translateY(-50%); }
.accordion__icon::after { width: 2px; height: 100%; left: 50%; transform: translate(-50%, -50%); }
.accordion__head.is-active .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.accordion__body { height: 0; overflow: hidden; transition: height 0.3s var(--easing); }
.accordion__inner { padding-bottom: 20px; color: var(--color-text-light); line-height: 1.6; font-size: 1.5rem; }

/* Flow */
.flow-list__item { display: flex; gap: 20px; margin-bottom: 30px; position: relative; }
.flow-list__item:not(.flow-list__item--final)::after { content: ''; position: absolute; left: 20px; top: 40px; width: 1px; height: calc(100% - 20px); border-left: 2px dashed #ddd; }
.flow-list__num { width: 40px; height: 40px; background: var(--color-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; z-index: 1; font-size: 1.6rem; }
.flow-list__title { font-weight: 700; font-size: 1.8rem; margin-bottom: 5px; }
.flow-list__desc { font-size: 1.4rem; color: var(--color-text-light); }

@media (min-width: 768px) { .faq-flow__wrapper { grid-template-columns: 1fr 1fr; } }


/* =========================================
   Recruit Info (募集要項)
   ========================================= */
.recruit-info{ background-color:#fff; }
.recruit-table-wrapper{ border-top:1px solid #ddd; }
.recruit-list{ display:flex; flex-direction:column; }
.recruit-row{ display:flex; flex-direction:column; border-bottom:1px solid #ddd; }
.recruit-row dt{ background-color:#f9f9f9; padding:1.5rem 2rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; font-size: 1.5rem; }
.recruit-row dd{ padding:1.5rem 2rem; color:var(--text-light); line-height:1.8; flex:1; font-size: 1.5rem; }

@media (min-width:768px){
    .recruit-row{ flex-direction:row; }
    .recruit-row dt{ width:25%; min-width:200px; padding:3rem; }
    .recruit-row dd{ padding:3rem; }
}
.recruit-detail-list{ list-style:disc; margin-left:1.5rem; margin-top:0.5rem; margin-bottom:0.5rem; }
.salary-box{ margin-bottom:1rem; }
.salary-title{ font-size:1.4rem; font-weight:700; color:var(--accent-color); margin-bottom:0.2rem; }
.salary-amount{ font-size:2.4rem; font-weight:700; color:var(--text-main); }
.salary-note{ font-size:1.4rem; }
.u-mt-small{ margin-top:1rem; }
.u-text-highlight{ color:var(--accent-color); font-weight:700; }


/* =========================================
   Company
   ========================================= */
.company__card { background: #fff; border: 1px solid #eee; padding: 40px; border-radius: 12px; max-width: 800px; margin: 0 auto; }
.company__row { display: flex; flex-direction: column; border-bottom: 1px solid #eee; padding: 15px 0; }
.company__row:last-child { border-bottom: none; }
.company__term { font-weight: 700; width: 100%; margin-bottom: 5px; font-size: 1.6rem; }
.company__desc { color: var(--color-text-light); font-size: 1.5rem; }

@media (min-width: 768px) {
    .company__row { flex-direction: row; }
    .company__term { width: 30%; margin-bottom: 0; }
    .company__desc { width: 70%; }
}


/* =========================================
   Recruit CTA
   ========================================= */
.recruit-cta { position: relative; color: var(--color-white); text-align: center; overflow: hidden; }
.recruit-cta__bg { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background: linear-gradient(135deg, var(--color-primary), var(--color-bg-dark)); z-index: -1; transform: translateY(0); }
.recruit-cta__title { font-size: 4.0rem; font-weight: 700; margin-bottom: 1.5rem; letter-spacing: 0.05em; }
.recruit-cta__message { font-size: 1.6rem; margin-bottom: 3rem; line-height: 1.8; opacity: 0.95; }
.recruit-cta__btns { display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; }

@media (min-width: 768px) {
    .recruit-cta__btns { flex-direction: row; gap: 30px; }
}




/* =========================================
   Entry Page Styles
   ========================================= */
/* ページヘッダー */
.page-header{ background-color:var(--bg-secondary); padding:120px 0 60px; text-align:center; }
.page-title{ font-family:var(--font-en); font-size:3.6rem; font-weight:700; color:var(--color-primary); margin-bottom:1rem; letter-spacing:0.05em; }
.page-subtitle{ font-size:1.4rem; font-weight:700; color:var(--color-text-light); }
/* フォームのコンテナ（幅を狭める） */
.l-container-sm{ max-width:720px; margin:0 auto; }
.form-lead{ text-align:center; margin-bottom:4rem; font-size:1.5rem; line-height:1.8; }
/* フォームグループ */
.form-group{ margin-bottom:3rem; }
.form-label{ display:flex; align-items:center; gap:1rem; font-size:1.6rem; font-weight:700; margin-bottom:1rem; }
/* 必須・任意バッジ */
.form-badge{ font-size:1.1rem; padding:2px 8px; border-radius:4px; color:#fff; font-weight:500; }
.form-badge--required{ background-color:#ff6b6b; }
.form-badge--any{ background-color:#999; }
/* 入力欄のスタイル */
.form-input,
.form-select,
.form-textarea{ width:100%; padding:1.5rem; font-size:1.6rem; border:1px solid #ddd; border-radius:8px; background-color:#fcfcfc; transition:border-color 0.3s,box-shadow 0.3s; font-family:inherit; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(102,204,153,0.2); }
.form-textarea{ height:180px; resize:vertical; }
/* 日付入力の調整 */
.form-input-date-wrap{ position:relative; max-width:300px; }
/* プライバシーポリシー同意 */
.form-privacy{ text-align:center; margin:4rem 0; }
.form-checkbox-label{ cursor:pointer; display:inline-flex; align-items:center; gap:1rem; font-size:1.6rem; font-weight:700; }
.form-checkbox-label input{ width:20px; height:20px; accent-color:var(--color-primary); }
.u-text-link{ color:var(--color-primary); border-bottom:1px solid var(--color-primary); }
/* 送信ボタンエリア */
.form-submit{ text-align:center; margin-top:4rem; }
.form-submit .c-btn-primary{ width:100%; max-width:300px; border:none; cursor:pointer; }


/* =========================================
   News Page Styles
   ========================================= */
/* リスト全体の枠組み */
.news-list{ border-top:1px solid #eee; margin-bottom:6rem; }
/* 各記事アイテム */
.news-item{ border-bottom:1px solid #eee; }
.news-link{ display:flex; flex-direction:column; padding:2rem 0; transition:background-color 0.3s,padding-left 0.3s; color:var(--color-text); }
.news-link:hover{ color:var(--color-primary); background-color:#fafafa; padding-left:10px; }
/* 日付とラベルのグループ */
.news-meta{ display:flex; align-items:center; gap:1.5rem; margin-bottom:1rem; min-width:200px; }
.news-date{ font-family:var(--font-en); font-size:1.4rem; color:#999; font-weight:700; }
/* カテゴリーラベル */
.news-label{ font-size:1.1rem; padding:3px 10px; border-radius:2px; font-weight:700; color:#fff; background-color:#ccc; }
.news-label--recruit{ background-color:var(--color-primary); }
.news-label--info{ background-color:#7f8c8d; }
.news-label--media{ background-color:#f39c12; }
/* タイトル */
.news-title{ font-size:1.6rem; font-weight:500; line-height:1.6; transition:color 0.3s; }
/* PC表示時のレイアウト変更 */
@media (min-width:768px){
.news-link{ flex-direction:row; align-items:center; padding:2.5rem 1rem; }
.news-meta{ margin-bottom:0; margin-right:2rem; }
}
/* ページネーション */
.pagination{ display:flex; justify-content:center; gap:1rem; margin-top:4rem; }
.pagination-link{ display:flex; justify-content:center; align-items:center; width:40px; height:40px; border:1px solid #ddd; color:var(--color-text); font-family:var(--font-en); font-weight:700; border-radius:50%; transition:all 0.3s; }
.pagination-link:hover{ border-color:var(--color-primary); color:var(--color-primary); background-color:#f0fff9; }
.pagination-link.is-current{ background-color:var(--color-primary); border-color:var(--color-primary); color:#fff; pointer-events:none; }
.pagination-link.is-disabled{ color:#eee; border-color:#eee; pointer-events:none; }

/* =========================================
   Single Article Page Styles
   ========================================= */
.article { background: #fff; }
.article-header { margin-bottom: 4rem; padding-bottom: 2rem; border-bottom: 1px solid #eee; }
.article-meta { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.article-date { font-family: var(--font-en); color: #999; font-weight: 700; }
.article-title { font-size: 2.4rem; font-weight: 700; line-height: 1.5; color: var(--color-text); }
@media (min-width: 768px) {
    .article-title { font-size: 3.2rem; }
}
.article-body { margin-bottom: 6rem; line-height: 1.9; font-size: 1.6rem; }
.article-body > * + * { margin-top: 2rem; }
.article-body h3 { font-size: 2.2rem; font-weight: 700; color: var(--color-text); margin-top: 4rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--color-primary); }
.article-body h4 { font-size: 1.8rem; font-weight: 700; margin-top: 3rem; margin-bottom: 1.5rem; border-left: 4px solid var(--color-primary); padding-left: 1rem; }
.article-body p { margin-bottom: 2rem; text-align: justify; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.article-body ul, .article-body ol { background: #f9f9f9; padding: 3rem; border-radius: 8px; list-style: disc; list-style-position: inside; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.5rem; }
.article-body blockquote { border-left: 5px solid #ccc; padding: 1.5rem; background: #f4f4f4; color: #555; font-style: italic; }
.article-body a { color: var(--color-primary); text-decoration: underline; }
.article-body a:hover { text-decoration: none; }
.post-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 4rem; padding-top: 4rem; border-top: 1px solid #eee; }
.post-nav-link { font-weight: 700; font-size: 1.4rem; color: var(--color-text-light); display: flex; align-items: center; transition: color 0.3s; }
.post-nav-link:hover { color: var(--color-primary); }
.c-btn-secondary { display: inline-block; padding: 1rem 3rem; border: 1px solid #ddd; border-radius: 50px; color: var(--color-text); font-size: 1.3rem; font-weight: 700; transition: all 0.3s; }
.c-btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); background-color: #f0fff9; }
/* =========================================
   404 Page Styles
   ========================================= */
.section-404 { min-height: 80vh; display: flex; align-items: center; justify-content: center; background-color: var(--bg-secondary); text-align: center; padding-top: 120px; }
.not-found-content { max-width: 600px; margin: 0 auto; }
.not-found-title { font-family: var(--font-en); font-size: 10rem; font-weight: 700; color: var(--color-primary); line-height: 1; margin-bottom: 1rem; opacity: 0.3; }
.not-found-subtitle { font-family: var(--font-en); font-size: 2.4rem; font-weight: 700; color: var(--color-text); margin-bottom: 2rem; letter-spacing: 0.05em; }
.not-found-text { font-size: 1.6rem; color: var(--color-text-light); line-height: 1.8; margin-bottom: 4rem; }
.not-found-btn { display: flex; justify-content: center; }
@media (max-width: 767px) {
  .not-found-title { font-size: 6rem; }
  .not-found-subtitle { font-size: 2.0rem; }
}