/*
 * style.css - メーテンカレッジ Cocoon子テーマ（飲食店サイト版）
 *
 * Theme Name: Cocoon Child（メーテンカレッジ）
 * Template:   cocoon-master
 * Version:    2.0.0
 */

/* =====================================================
   カラー変数
   ===================================================== */
:root {
  --mc-red:      #c0392b;
  --mc-red-dark: #922b21;
  --mc-gold:     #d4a017;
  --mc-gold-lt:  #f0c040;
  --mc-dark:     #1a1a1a;
  --mc-dark2:    #2c2c2c;
  --mc-gray:     #555;
  --mc-gray-lt:  #888;
  --mc-bg:       #fafaf8;
  --mc-bg2:      #f4f0eb;
  --mc-white:    #ffffff;
  --mc-border:   #e8e0d5;
}

/* =====================================================
   ヘッダー
   ===================================================== */
#header {
  background: linear-gradient(135deg, var(--mc-dark) 0%, var(--mc-dark2) 100%) !important;
  border-bottom: 1px solid rgba(212,160,23,0.3) !important;
}
#header .site-name-text {
  color: var(--mc-white) !important;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 22px;
}
#header .site-description { color: var(--mc-gold-lt) !important; font-size: 12px; }
#navi { background: var(--mc-dark) !important; }
#navi .navi-in > ul > li > a {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500; transition: all 0.2s;
}
#navi .navi-in > ul > li > a:hover {
  color: var(--mc-gold-lt) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* =====================================================
   TOPページ ヒーロー
   ===================================================== */
.mc-hero {
  position: relative; min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mc-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,26,26,0.9) 0%, rgba(192,57,43,0.7) 100%),
              center/cover no-repeat;
  /* アイキャッチ画像が設定されていない場合のフォールバック */
  background-color: var(--mc-dark);
}
.mc-hero-content {
  position: relative; z-index: 2;
  text-align: center; color: white;
  padding: 60px 24px; max-width: 800px; margin: 0 auto;
}
.mc-hero-label {
  display: inline-block;
  background: rgba(212,160,23,0.25);
  border: 1px solid rgba(212,160,23,0.6);
  padding: 6px 18px; border-radius: 20px;
  font-size: 13px; font-weight: 600; letter-spacing: 2px;
  color: var(--mc-gold-lt); margin-bottom: 20px;
}
.mc-hero-title {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 700; line-height: 1.4; margin-bottom: 16px;
  text-shadow: 0 3px 16px rgba(0,0,0,0.5);
}
.mc-hero-title span { color: var(--mc-gold-lt); display: block; }
.mc-hero-desc {
  font-size: 16px; opacity: 0.9; line-height: 1.9; margin-bottom: 36px;
}
.mc-hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mc-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--mc-red), var(--mc-red-dark));
  color: white; padding: 14px 32px;
  border-radius: 50px; font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 20px rgba(192,57,43,0.45);
  transition: all 0.3s; text-decoration: none;
}
.mc-btn-primary:hover { transform: translateY(-3px); opacity: 0.9; color: white; }
.mc-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12); color: white;
  padding: 14px 32px; border-radius: 50px; font-weight: 600; font-size: 15px;
  border: 1px solid rgba(255,255,255,0.35);
  transition: all 0.3s; text-decoration: none;
}
.mc-btn-secondary:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); color: white; }

/* =====================================================
   コンテンツラッパー
   ===================================================== */
.mc-top-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; }
.mc-section { padding: 64px 0; }
.mc-section-alt { background: var(--mc-bg2); margin: 0 -24px; padding: 64px 24px; }

.mc-section-head { text-align: center; margin-bottom: 40px; }
.mc-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 3px;
  color: var(--mc-red); margin-bottom: 10px; display: block;
}
.mc-section-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700; color: var(--mc-dark); line-height: 1.4;
}

/* =====================================================
   記事カードグリッド
   ===================================================== */
.mc-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-bottom: 20px;
}
.mc-card {
  background: var(--mc-white); border-radius: 14px;
  overflow: hidden; border: 1px solid var(--mc-border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  transition: transform 0.3s, box-shadow 0.3s;
}
.mc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.13);
}
.mc-card a { display: block; text-decoration: none; color: inherit; }
.mc-card-thumb {
  position: relative; overflow: hidden; aspect-ratio: 4/3;
  background: var(--mc-bg2);
}
.mc-thumb-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s;
}
.mc-card:hover .mc-thumb-img { transform: scale(1.06); }
.mc-no-thumb {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; background: var(--mc-bg2);
}
.mc-card-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; color: white;
}
.mc-card-badge.new { background: #27ae60; }
.mc-card-badge.hot { background: var(--mc-red); }
.mc-card-body { padding: 16px 18px 20px; }
.mc-card-cat {
  font-size: 11px; font-weight: 700; color: var(--mc-red);
  letter-spacing: 1px; margin-bottom: 6px;
}
.mc-card-cat a { color: var(--mc-red); text-decoration: none; }
.mc-card-title {
  font-size: 15px; font-weight: 700; color: var(--mc-dark);
  line-height: 1.55; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mc-card-excerpt {
  font-size: 13px; color: var(--mc-gray); line-height: 1.7;
  margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mc-card-date { font-size: 12px; color: var(--mc-gray-lt); }
.mc-card-views { font-size: 12px; color: var(--mc-gray-lt); margin-top: 4px; }

/* もっと見る */
.mc-more-wrap { text-align: center; margin-top: 32px; }
.mc-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mc-white); color: var(--mc-red);
  padding: 14px 36px; border-radius: 50px; font-weight: 700; font-size: 15px;
  border: 2px solid var(--mc-red); text-decoration: none;
  transition: all 0.2s;
}
.mc-btn-outline:hover {
  background: var(--mc-red); color: white;
  box-shadow: 0 6px 18px rgba(192,57,43,0.3);
}

/* =====================================================
   掲載申請CTA
   ===================================================== */
.mc-cta-section {
  background: linear-gradient(135deg, var(--mc-red-dark) 0%, var(--mc-red) 50%, #e67e22 100%);
  border-radius: 20px; padding: 60px 32px;
  text-align: center; color: white; margin: 40px 0;
}
.mc-cta-title {
  font-size: clamp(22px, 3.5vw, 34px); font-weight: 700;
  margin-bottom: 12px; line-height: 1.5;
}
.mc-cta-desc { font-size: 16px; opacity: 0.9; margin-bottom: 28px; }
.mc-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: white; color: var(--mc-red);
  padding: 15px 40px; border-radius: 50px;
  font-size: 16px; font-weight: 800; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transition: all 0.3s;
}
.mc-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.28); color: var(--mc-red); }

/* =====================================================
   フッター
   ===================================================== */
#footer {
  background: var(--mc-dark) !important;
  color: rgba(255,255,255,0.7) !important;
}
#footer a { color: rgba(255,255,255,0.6) !important; }
#footer a:hover { color: var(--mc-gold-lt) !important; }
.footer-bottom {
  background: rgba(0,0,0,0.3) !important;
  color: rgba(255,255,255,0.4) !important;
}

/* =====================================================
   お問い合わせフォーム（CF7）
   ===================================================== */
.wpcf7-form p { margin-bottom: 20px; }
.wpcf7-form label {
  display: block; font-weight: 600; margin-bottom: 6px;
  color: var(--mc-dark); font-size: 14px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid #cdd5e0; border-radius: 8px;
  font-size: 14px; font-family: inherit; transition: border-color 0.2s;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none; border-color: var(--mc-red);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}
.wpcf7-form .wpcf7-submit {
  background: linear-gradient(135deg, var(--mc-red), var(--mc-red-dark));
  color: white; padding: 14px 40px; border: none;
  border-radius: 50px; font-size: 16px; font-weight: 700;
  font-family: inherit; cursor: pointer; width: 100%;
  max-width: 280px; display: block; margin: 0 auto;
  transition: opacity 0.2s, transform 0.2s;
}
.wpcf7-form .wpcf7-submit:hover { opacity: 0.9; transform: translateY(-2px); }

/* =====================================================
   会社情報
   ===================================================== */
.company-table {
  width: 100%; border-collapse: collapse; font-size: 15px;
}
.company-table th {
  background: var(--mc-bg2); padding: 14px 20px;
  text-align: left; width: 30%; font-weight: 700;
  color: var(--mc-dark); border: 1px solid var(--mc-border);
}
.company-table td {
  padding: 14px 20px; border: 1px solid var(--mc-border); line-height: 1.7;
}

/* =====================================================
   レスポンシブ
   ===================================================== */
@media (max-width: 768px) {
  .mc-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mc-hero { min-height: 60vh; }
  .mc-hero-title { font-size: 26px; }
  .mc-hero-desc { font-size: 14px; }
}
@media (max-width: 480px) {
  .mc-cards-grid { grid-template-columns: 1fr; }
  .mc-hero-btns { flex-direction: column; align-items: stretch; }
  .mc-btn-primary, .mc-btn-secondary { justify-content: center; }
  .company-table th { width: 38%; padding: 10px 12px; }
  .company-table td { padding: 10px 12px; }
}