@import url('./fonts.css');

/* ============================================================
   Pattern 07 — MEG-SNOW STYLE (food / new-graduate recruit site)
   観察元: meg-snow.com/recruit/newgraduates/
   - 左カラム固定の縦ナビ(白いタイル状)
   - 右上の小ナビ(FAQ / 採用情報 / アクセス) + ENTRY ピル
   - 大型ビジュアル + 中央の手書き風スクリプトタイトル
   - サブページは {h1} のブラケット見出し + タブ群
   - フッターは水色一面の多列リンク
   ============================================================ */

:root{
  --p07-bg:        #ffffff;
  --p07-ink:       #3e3a39;
  --p07-ink-soft:  #6a6a69;
  --p07-mute:      #9a9a99;
  --p07-line:      #e3e2df;
  --p07-sky:       #7bc1e0;        /* メインのスカイブルー */
  --p07-sky-d:     #4fa9cf;
  --p07-sky-l:     #b8dff0;
  --p07-sky-bg:    #6ec0e2;        /* フッター背景 */
  --p07-cream:     #f7f3ea;
  --p07-yellow:    #f4ed3a;        /* ENTRYピルのアクセント */
  --p07-accent:    #1f6fa3;
  --p07-side-bg:   #2f2f2e;        /* 左ナビの暗いタイル(ロゴ部) */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--p07-bg);
  color:var(--p07-ink);
  font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Verdana,Roboto,"Droid Sans",游ゴシック,YuGothic,メイリオ,Meiryo,sans-serif;
  font-size:15px; line-height:1.85; letter-spacing:.02em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* === Skip link === */
.p07-skip{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:8px 14px;z-index:1000}
.p07-skip:focus{left:8px;top:8px}

/* ============================================================
   LEFT SIDE NAV (固定・縦タイル)
   ============================================================ */
.p07-side{
  position:fixed; top:0; left:0; width:130px; height:100vh;
  background:#fff; border-right:1px solid var(--p07-line);
  z-index:50;
  display:flex; flex-direction:column;
}
.p07-side__logo{
  display:block;
  background:var(--p07-side-bg); color:#fff;
  padding:18px 14px 22px;
  text-align:center;
}
.p07-side__logo__tag{
  font-size:9px; letter-spacing:.18em; color:#cfe7f4;
  display:block; margin-bottom:6px;
}
.p07-side__logo__name{
  font-size:14px; font-weight:700; line-height:1.4;
  letter-spacing:.05em;
  display:block;
}
.p07-side__logo__name::before{
  content:""; display:inline-block; width:10px; height:10px; margin-right:4px;
  background:var(--p07-sky);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  vertical-align:middle;
}
.p07-side__list{ list-style:none; margin:0; padding:0; }
.p07-side__list li{
  border-bottom:1px solid var(--p07-line);
}
.p07-side__list a{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 12px;
  font-size:11px; font-weight:700; line-height:1.4;
  color:var(--p07-ink);
}
.p07-side__list a small{
  display:block; font-size:9px; font-weight:400; color:var(--p07-mute);
  letter-spacing:.12em; margin-top:3px;
}
.p07-side__list a::after{
  content:"▸"; color:var(--p07-sky); font-size:10px; margin-left:6px;
}
.p07-side__list a:hover{background:#f7fbfd}
.p07-side__list a[aria-current="page"]{
  background:var(--p07-sky); color:#fff;
}
.p07-side__list a[aria-current="page"] small{color:#eaf6fb}
.p07-side__list a[aria-current="page"]::after{color:#fff}

/* ============================================================
   TOP UTILITY NAV (右上 + ENTRY)
   ============================================================ */
.p07-top{
  position:absolute; top:0; left:130px; right:0;
  display:flex; justify-content:flex-end; align-items:flex-start;
  padding:14px 24px 0; z-index:40;
  gap:24px;
}
.p07-top__menu{
  display:flex; gap:22px; align-items:center;
  padding-top:10px;
}
.p07-top__menu a{
  font-size:12px; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:6px;
}
.p07-top__menu a::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--p07-yellow);
}
.p07-entry{
  background:#fff; color:var(--p07-ink); font-weight:900;
  width:88px; height:88px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; letter-spacing:.12em;
  border:4px solid var(--p07-yellow);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  position:relative; top:-4px;
}
.p07-entry:hover{background:var(--p07-yellow)}

/* dark-bg variant for sub pages */
.p07-top--light .p07-top__menu a{color:var(--p07-ink)}

/* ============================================================
   MAIN OFFSET
   ============================================================ */
main{ margin-left:130px; }

/* ============================================================
   HERO (top page) — full-bleed photo + center script title
   ============================================================ */
.p07-hero{
  position:relative;
  min-height:560px;
  background:
    linear-gradient(180deg, rgba(123,193,224,.35) 0%, rgba(123,193,224,.05) 40%, rgba(255,255,255,0) 70%),
    url('https://picsum.photos/seed/megsnow-hero-pasture/1800/1100') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  padding:120px 24px 80px;
  overflow:hidden;
}
.p07-hero__center{
  text-align:center; color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.18);
}
.p07-hero__badge{
  display:inline-block;
  background:var(--p07-yellow); color:var(--p07-ink);
  font-size:11px; font-weight:900; padding:6px 14px;
  border-radius:999px; text-shadow:none;
  margin-bottom:14px; letter-spacing:.1em;
}
.p07-hero__script{
  font-family:"Snell Roundhand","Brush Script MT","Apple Chancery",cursive;
  font-size:clamp(56px, 9vw, 128px);
  line-height:1; font-weight:400;
  margin:0 0 8px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-style:italic;
}
.p07-hero__script em{font-style:italic; color:#fff}
.p07-hero__script span.rays{
  display:inline-block; width:38px; height:38px; position:relative;
  background:radial-gradient(circle, var(--p07-yellow) 30%, transparent 32%);
}
.p07-hero__verb{
  font-family:"ヒラギノ明朝 ProN","Hiragino Mincho ProN",serif;
  font-size:18px; letter-spacing:.5em; font-weight:300;
  margin:14px 0 28px;
}
.p07-hero__logo{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.92); color:var(--p07-ink);
  padding:12px 24px; border-radius:4px;
  text-shadow:none;
}
.p07-hero__logo__mark{
  width:24px; height:24px; background:var(--p07-sky);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.p07-hero__logo__name{font-weight:700; font-size:16px}
.p07-hero__logo__tag{font-size:10px; color:var(--p07-sky-d); margin-left:6px}

/* ============================================================
   TOP SECTIONS (Our Vision / Job Guide / About Us 等のリンクタイル)
   ============================================================ */
.p07-tiles{
  padding:80px 40px;
  background:#fff;
  max-width:1100px; margin:0 auto;
}
.p07-tiles__h{
  font-size:14px; letter-spacing:.2em; color:var(--p07-sky-d);
  text-align:center; margin:0 0 6px;
}
.p07-tiles__h2{
  font-family:"ヒラギノ明朝 ProN",serif;
  font-size:28px; text-align:center; margin:0 0 48px;
  font-weight:400;
}
.p07-tiles__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.p07-tile{
  display:block; border:1px solid var(--p07-line);
  background:#fff; transition:transform .2s, box-shadow .2s;
}
.p07-tile:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(123,193,224,.18)}
.p07-tile__plate{
  aspect-ratio:16/10; overflow:hidden; background:var(--p07-sky-l);
}
.p07-tile__plate img{width:100%; height:100%; object-fit:cover}
.p07-tile__body{padding:18px 18px 22px}
.p07-tile__eyebrow{
  font-size:10px; color:var(--p07-sky-d); letter-spacing:.2em;
  margin:0 0 6px; font-weight:700;
}
.p07-tile__title{
  font-size:16px; font-weight:700; margin:0 0 6px; line-height:1.5;
}
.p07-tile__sub{font-size:12px; color:var(--p07-ink-soft); margin:0}

/* ============================================================
   NUMBERS strip
   ============================================================ */
.p07-numbers{
  background:var(--p07-cream);
  padding:60px 40px;
}
.p07-numbers__inner{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.p07-num{ text-align:center; }
.p07-num__v{
  font-family:"ヒラギノ明朝 ProN",serif;
  font-size:48px; color:var(--p07-sky-d); font-weight:300;
  line-height:1;
}
.p07-num__v small{font-size:18px; margin-left:4px}
.p07-num__lab{font-size:13px; font-weight:700; margin-top:8px}
.p07-num__note{font-size:11px; color:var(--p07-mute); margin-top:4px}

/* ============================================================
   MESSAGE block (top)
   ============================================================ */
.p07-topmsg{
  padding:80px 40px;
  max-width:980px; margin:0 auto;
  text-align:center;
}
.p07-topmsg__lead{
  font-family:"ヒラギノ明朝 ProN",serif;
  font-size:22px; line-height:2.0; font-weight:400;
  margin:0 0 24px;
}
.p07-topmsg__cta{
  display:inline-block; background:var(--p07-sky);
  color:#fff; padding:14px 40px; border-radius:999px;
  font-weight:700; font-size:14px;
}
.p07-topmsg__cta:hover{background:var(--p07-sky-d)}

/* ============================================================
   SPECIAL MOVIE
   ============================================================ */
.p07-movie{
  background:#fff;
  padding:80px 40px;
  max-width:1100px; margin:0 auto;
  text-align:center;
}
.p07-movie__head{
  font-family:"Snell Roundhand","Brush Script MT",cursive;
  font-style:italic;
  font-size:64px; color:var(--p07-sky-d); font-weight:400;
  margin:0 0 24px;
}
.p07-movie__head .play{
  display:inline-block; width:60px; height:60px; border-radius:50%;
  background:var(--p07-sky); color:#fff; line-height:60px;
  vertical-align:middle; font-size:24px; font-style:normal;
  margin:0 12px;
}
.p07-movie__frame{
  aspect-ratio:16/9; max-width:760px; margin:0 auto;
  background:#cfd5d8;
  display:flex; align-items:center; justify-content:center;
  color:#6a6a69; font-size:13px;
}

/* ============================================================
   COMMON SUB-PAGE STYLES
   ============================================================ */
.p07-page{
  max-width:980px; margin:0 auto;
  padding:60px 40px 80px;
}
.p07-page__crumb{
  font-size:11px; color:var(--p07-mute);
  letter-spacing:.05em; margin:0 0 28px;
}
.p07-page__crumb a{color:var(--p07-sky-d); text-decoration:underline}
.p07-page__h{
  text-align:center; margin:0 0 24px;
  font-family:"ヒラギノ明朝 ProN",serif;
  font-size:34px; font-weight:400;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.p07-page__h::before, .p07-page__h::after{
  content:""; display:inline-block; width:14px; height:34px;
  border:2px solid var(--p07-sky); border-right:0;
}
.p07-page__h::after{ border:2px solid var(--p07-sky); border-left:0; }
.p07-page__lead{
  text-align:center; font-size:14px; color:var(--p07-ink-soft);
  max-width:680px; margin:0 auto 36px;
}
.p07-tabs{
  display:flex; justify-content:center; gap:12px;
  margin:0 0 56px; flex-wrap:wrap;
}
.p07-tabs a{
  display:inline-block; padding:10px 26px;
  border:1px solid var(--p07-sky); color:var(--p07-sky-d);
  font-size:12px; font-weight:700;
  position:relative;
}
.p07-tabs a::after{
  content:"▼"; color:var(--p07-sky); font-size:8px;
  display:block; text-align:center; margin-top:4px;
  position:absolute; left:0; right:0; bottom:-10px;
}
.p07-tabs a:hover{background:var(--p07-sky); color:#fff}

/* sub-page section heading (sky band) */
.p07-secband{
  background:var(--p07-sky); color:#fff;
  text-align:center; padding:14px 20px;
  font-size:18px; font-weight:700;
  margin:0 0 32px;
}

/* ============================================================
   JOBS LIST / DETAIL
   ============================================================ */
.p07-jobs__grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
  margin-top:8px;
}
.p07-jobcard{
  border:1px solid var(--p07-line); background:#fff;
  transition:transform .2s, box-shadow .2s;
  display:block;
}
.p07-jobcard:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(123,193,224,.18)}
.p07-jobcard__plate{aspect-ratio:16/10; overflow:hidden; background:var(--p07-sky-l)}
.p07-jobcard__plate img{width:100%; height:100%; object-fit:cover}
.p07-jobcard__body{padding:20px 22px}
.p07-jobcard__code{font-size:10px; color:var(--p07-sky-d); letter-spacing:.2em; margin:0 0 6px; font-weight:700}
.p07-jobcard__title{font-size:18px; font-weight:700; margin:0 0 6px}
.p07-jobcard__sub{font-size:13px; color:var(--p07-ink-soft); margin:0 0 14px}
.p07-jobcard__meta{display:flex; flex-wrap:wrap; gap:10px 18px; font-size:11px; color:var(--p07-ink-soft); border-top:1px solid var(--p07-line); padding-top:12px}
.p07-jobcard__meta b{color:var(--p07-sky-d); margin-right:4px}

/* job detail */
.p07-job__hero{
  background:var(--p07-sky-l);
  padding:48px 40px;
}
.p07-job__hero__inner{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:32px;
  align-items:center;
}
.p07-job__hero__code{font-size:11px; color:var(--p07-sky-d); letter-spacing:.2em; margin:0 0 10px; font-weight:700}
.p07-job__hero__title{font-family:"ヒラギノ明朝 ProN",serif; font-size:36px; font-weight:400; margin:0 0 8px}
.p07-job__hero__sub{font-size:15px; color:var(--p07-ink-soft); margin:0 0 22px}
.p07-job__hero__meta{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; font-size:13px}
.p07-job__hero__meta dt{font-weight:700; color:var(--p07-sky-d)}
.p07-job__hero__meta dd{margin:0}
.p07-job__hero__plate{aspect-ratio:4/3; overflow:hidden}
.p07-job__hero__plate img{width:100%; height:100%; object-fit:cover}

.p07-job__sec{
  max-width:880px; margin:0 auto; padding:32px 40px;
}
.p07-job__sec__head{
  font-family:"ヒラギノ明朝 ProN",serif;
  font-size:22px; font-weight:400; margin:0 0 16px;
  border-left:4px solid var(--p07-sky); padding-left:14px;
}
.p07-job__sec ul{margin:0; padding-left:1.2em}
.p07-job__sec li{margin:.4em 0}

/* 1日の流れ */
.p07-day{ margin:0; }
.p07-day__row{
  display:grid; grid-template-columns:90px 1fr;
  gap:18px; padding:14px 0; border-bottom:1px dashed var(--p07-line);
}
.p07-day__time{
  font-family:"ヒラギノ明朝 ProN",serif;
  font-size:22px; color:var(--p07-sky-d); font-weight:300;
}
.p07-day__body h4{margin:0 0 4px; font-size:14px}
.p07-day__body p{margin:0; font-size:13px; color:var(--p07-ink-soft)}

/* ============================================================
   REQUIREMENTS TABLE
   ============================================================ */
.p07-reqtable{
  width:100%; border-collapse:collapse;
  margin:0 0 20px; font-size:14px;
}
.p07-reqtable tr{border-bottom:1px solid var(--p07-line)}
.p07-reqtable th{
  width:30%; text-align:left; padding:18px 16px;
  background:#f7fbfd; color:var(--p07-sky-d);
  font-weight:700; vertical-align:top;
}
.p07-reqtable td{padding:18px 16px; vertical-align:top}

/* ============================================================
   FAQ
   ============================================================ */
.p07-faqlist{ display:flex; flex-direction:column; gap:10px; }
.p07-faqitem{
  border:1px solid var(--p07-line);
  background:#fff;
}
.p07-faqitem summary{
  list-style:none; cursor:pointer; padding:16px 50px 16px 60px;
  font-weight:700; font-size:14px; position:relative;
}
.p07-faqitem summary::-webkit-details-marker{display:none}
.p07-faqitem summary::before{
  content:"Q"; position:absolute; left:20px; top:50%; transform:translateY(-50%);
  color:var(--p07-sky-d); font-family:"ヒラギノ明朝 ProN",serif;
  font-size:22px;
}
.p07-faqitem summary::after{
  content:"＋"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  color:var(--p07-sky); font-weight:700;
}
.p07-faqitem[open] summary::after{content:"−"}
.p07-faqitem > div{
  padding:0 60px 18px; font-size:13px; color:var(--p07-ink-soft);
  position:relative;
}
.p07-faqitem > div::before{
  content:"A"; position:absolute; left:20px; top:-4px;
  color:var(--p07-coral, #f48a6c); font-family:"ヒラギノ明朝 ProN",serif;
  font-size:22px;
}

/* ============================================================
   ENTRY / APPLY FORM
   ============================================================ */
.p07-form{
  display:grid; gap:18px;
  max-width:680px; margin:0 auto;
}
.p07-form > div{display:flex; flex-direction:column; gap:6px}
.p07-form label{font-size:12px; font-weight:700; color:var(--p07-sky-d)}
.p07-form label small{
  background:var(--p07-coral, #f48a6c); color:#fff;
  padding:2px 6px; border-radius:3px; font-size:9px; margin-left:6px;
}
.p07-form input, .p07-form select, .p07-form textarea{
  width:100%; padding:12px 14px; font:inherit;
  border:1px solid var(--p07-line); background:#fff;
  border-radius:2px;
}
.p07-form input:focus, .p07-form select:focus, .p07-form textarea:focus{
  outline:none; border-color:var(--p07-sky); box-shadow:0 0 0 3px rgba(123,193,224,.18);
}
.p07-form button{
  background:var(--p07-sky); color:#fff; border:0;
  padding:16px 24px; font:inherit; font-weight:700;
  border-radius:999px; cursor:pointer; letter-spacing:.1em;
  margin-top:8px;
}
.p07-form button:hover{background:var(--p07-sky-d)}
.p07-form__note{
  font-size:12px; color:var(--p07-ink-soft);
  background:#f7fbfd; padding:14px 18px;
  border-left:3px solid var(--p07-sky);
  max-width:680px; margin:0 auto 24px;
}

/* ============================================================
   HISTORY (沿革)
   ============================================================ */
.p07-history{ margin:24px 0; }
.p07-history__row{
  display:grid; grid-template-columns:120px 1fr; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--p07-line);
}
.p07-history__year{
  font-family:"ヒラギノ明朝 ProN",serif;
  font-size:22px; color:var(--p07-sky-d); font-weight:300;
}
.p07-history__event{font-size:14px; color:var(--p07-ink)}

/* ============================================================
   MESSAGE (代表)
   ============================================================ */
.p07-message{
  background:var(--p07-cream); padding:48px 40px;
  margin:48px 0; border-left:6px solid var(--p07-sky);
}
.p07-message__title{
  font-family:"ヒラギノ明朝 ProN",serif;
  font-size:24px; font-weight:400; margin:0 0 18px;
}
.p07-message__body{
  font-size:14px; line-height:2; color:var(--p07-ink);
  white-space:pre-wrap;
}
.p07-message__sign{
  margin:20px 0 0; text-align:right; font-size:13px;
}

/* ============================================================
   BIG CENTERED STATEMENT (Our Vision page)
   ============================================================ */
.p07-statement{
  text-align:center; padding:80px 40px;
}
.p07-statement__small{
  font-size:14px; color:var(--p07-sky-d); letter-spacing:.2em;
  margin:0 0 14px;
}
.p07-statement__big{
  font-family:"ヒラギノ明朝 ProN",serif;
  font-size:80px; color:var(--p07-sky-d); font-weight:700;
  letter-spacing:.2em; margin:0 0 18px;
}
.p07-statement__cap{font-size:14px; color:var(--p07-ink-soft); margin:0}

/* ============================================================
   FOOTER (sky band, multi-col link list)
   ============================================================ */
.p07-foot{
  background:var(--p07-sky-bg); color:#fff;
  padding:48px 40px 28px;
  margin-left:130px;
}
.p07-foot__cols{
  max-width:1100px; margin:0 auto 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.p07-foot__col h4{
  font-size:13px; font-weight:700; margin:0 0 10px;
  padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.4);
}
.p07-foot__col ul{list-style:none; padding:0; margin:0}
.p07-foot__col li{font-size:11px; margin:.45em 0; line-height:1.6}
.p07-foot__col a:hover{text-decoration:underline}
.p07-foot__small{
  max-width:1100px; margin:0 auto;
  display:flex; gap:18px; flex-wrap:wrap;
  font-size:11px; padding:12px 0;
  border-top:1px solid rgba(255,255,255,.35);
}
.p07-foot__bot{
  max-width:1100px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:10px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.35);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px){
  .p07-side{ position:static; width:100%; height:auto; border-right:0; border-bottom:1px solid var(--p07-line) }
  .p07-side__list{ display:flex; flex-wrap:wrap; }
  .p07-side__list li{ flex:1 1 33.33%; border-right:1px solid var(--p07-line) }
  .p07-top{ left:0; position:static; padding:8px 12px; background:#fff; border-bottom:1px solid var(--p07-line) }
  .p07-top__menu a{color:var(--p07-ink)}
  .p07-entry{width:60px; height:60px; font-size:11px; border-width:3px}
  main, .p07-foot{margin-left:0}
  .p07-hero{min-height:380px; padding:60px 18px}
  .p07-hero__script{font-size:54px}
  .p07-tiles, .p07-numbers, .p07-topmsg, .p07-movie{padding:48px 18px}
  .p07-tiles__grid, .p07-numbers__inner, .p07-jobs__grid{grid-template-columns:1fr}
  .p07-foot__cols{grid-template-columns:repeat(2,1fr)}
  .p07-page{padding:36px 18px 60px}
  .p07-job__hero__inner{grid-template-columns:1fr}
  .p07-statement__big{font-size:54px}
}