@charset "UTF-8";
/*
Theme Name: Geo-Snap Theme
Description: Geo-Snap LP WordPress Theme
Version: 2.7
Author: Your Name
*/

:root {
  /* ===============================
      ■ 共通変数
  =============================== */
  --width-full: 100%;
  --width-md: 1100px;
  --padding-block: var(--scale-80);
  --padding-inline: var(--scale-20);
  --gap-row: var(--scale-56);
  --gap-column: var(--scale-40);

  --scale-2: min(2px, 100vw / 375 * 2);
  --scale-4: min(4px, 100vw / 375 * 3);
  --scale-8: min(8px, 100vw / 375 * 6);
  --scale-12: min(12px, 100vw / 375 * 10);
  --scale-14: min(14px, 100vw / 375 * 12);
  --scale-16: min(16px, 100vw / 375 * 13);
  --scale-18: min(18px, 100vw / 375 * 15);
  --scale-20: min(20px, 100vw / 375 * 16);
  --scale-24: min(24px, 100vw / 375 * 20);
  --scale-28: min(28px, 100vw / 375 * 22);
  --scale-32: min(32px, 100vw / 375 * 24);
  --scale-40: min(40px, 100vw / 375 * 28);
  --scale-48: min(48px, 100vw / 375 * 30);
  --scale-56: min(56px, 100vw / 375 * 32);
  --scale-80: min(80px, 100vw / 375 * 40);

  --surface: rgba(255, 255, 255, 1);
  --on-surface: rgba(42, 44, 49, 1);
  --surface-variant: rgba(245, 246, 247, 1);
  --surface-variant-dark: rgba(223, 223, 223, 1);
  --primary: rgba(62, 162, 55, 1);
  --primary-variant: rgba(31, 106, 26, 1);
  --secondary: rgba(235, 92, 0, 1);
  --border: rgba(188, 191, 193, 1);
}

/* ===============================
   ■ 基本設定
=============================== */
* { box-sizing: border-box; }
span { display: inline-block; }
body { margin: 0; padding: 0; font-family: "Noto Sans JP", sans-serif; color: var(--on-surface); line-height: 1.6; width: 100%; }
img { max-width: 100% !important; height: auto !important; }

@media screen and (max-width: 768px) { .pc { display: none; } }
@media not screen and (max-width: 768px) { .sp { display: none; } }

/* ===============================
   ■ ヘッダー
=============================== */
header.header {
  width: 100%;
  height: 80px;
  position: sticky;
  top: 0;
  background: var(--surface, #fff);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 0 20px;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--width-md);
  height: 100%;
  margin: 0 auto;
}

.header__left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.header__logo a {
  font-size: 30px;
  font-weight: 900;
  color: var(--primary);
  text-decoration: none;
}

.header__nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}

.header__nav a {
  text-decoration: none;
  color: var(--on-surface);
  font-weight: 700;
  font-size: 20px;
  transition: color 0.3s;
}

.header__nav a:hover { color: var(--primary); }

.header__right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header__tel { text-align: right; }
.header__tel a {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--primary);
  font-weight: 700;
  font-size: 20px;
}
.tel__hours { font-size: 11px; font-weight: bold; margin-top: -2px; }

.header__button {
  background: var(--secondary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

@media screen and (max-width: 768px) {
  header.header { height: auto !important; padding: 10px !important; }
  .header__inner { flex-wrap: wrap; }
  .header__left { width: 100%; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
  .header__nav a { font-size: 18px; }
  .header__right { width: 100%; justify-content: space-between; }
  .header__tel a { font-size: 16px; }
  .header__button { font-size: 12px; padding: 8px 12px; }
}

/* ===============================
   ■ NEWSセクション
=============================== */
section#news {
  padding: 80px 20px;
  background: #fff;
  width: 100%;
}

.news__list {
  max-width: 900px;
  margin: 40px auto 0;
}

.news__item {
  border-bottom: 1px solid #eee;
  padding: 20px 0;
}

.news__item a {
  display: flex !important;
  align-items: center !important;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
  gap: 25px;
}

.news__item a:hover { opacity: 0.6; }

.news__meta {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  flex-shrink: 0 !important; /* メタ情報（日付＋カテゴリ）全体を絶対に縮ませない */
}

.news__date {
  color: var(--primary);
  font-weight: 700;
  min-width: 100px;
  font-size: 18px;
}

.news__cat {
  background: var(--surface-variant) !important;
  padding: 2px 10px !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  /* 強制的に幅を固定し、タイトルに押されても縦長にならないようにする */
  width: 110px !important;
  min-width: 110px !important;
  text-align: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.news__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .news__item a { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .news__date { min-width: auto; }
  .news__cat { width: auto !important; min-width: 0 !important; }
}

/* ===============================
   ■ 導入企業様 例
=============================== */
.example__items {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--width-md);
  margin: 0 auto;
}

.example__items .items__item {
  width: 32%; 
}

.example__items .items__item .item__image {
  width: 100%;
  height: 220px; 
  overflow: hidden;
  margin-bottom: 15px;
  border-radius: 8px;
}

.example__items .items__item .item__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 768px) {
  .example__items {
    flex-direction: column; 
    gap: 40px;
  }
  .example__items .items__item {
    width: 100% !important; 
  }
  .example__items .items__item .item__image {
    height: 200px; 
  }
}

/* ===============================
   ■ 記事詳細ページ (single.php)
=============================== */
.single-post {
  width: 100%;
  padding: 40px 0 80px; 
}

.single-post__inner {
  max-width: 850px;
  margin: 0 auto;
  padding: 0 24px;
}

.post-header { 
  margin-bottom: 40px; 
  text-align: left;
}

.entry-date {
  color: var(--primary);
  font-weight: bold;
  font-size: 14px;
}

.entry-title { 
  font-size: 36px; 
  margin: 16px 0; 
  line-height: 1.3; 
  font-weight: 700;
}

.post-body { 
  line-height: 1.9; 
  font-size: 16px; 
}

.post-body p {
  margin-bottom: 24px;
}

.post-footer { 
  margin-top: 60px; 
  text-align: center; 
  border-top: 1px solid #eee;
  padding-top: 40px;
}

.back-btn { 
  display: inline-block; 
  color: var(--on-surface); 
  padding: 10px 0; 
  text-decoration: underline; 
  font-weight: 700; 
  transition: 0.3s; 
}

/* ===============================
   ■ FAQ / お問い合わせ
=============================== */
.faq__question { 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  text-align: left;
}

.faq__answer { 
  display: none; 
  background: var(--surface-variant, #f5f6f6); 
  padding: 24px 30px; 
  width: 100%; 
  text-align: left !important; /* 強制左寄せ */
}

/* Aマークを左端に固定 */
.faq__a-mark {
  display: block;
  color: var(--secondary);
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 8px;
  text-align: left !important;
}

.faq__answer p {
  margin: 0;
  text-align: left !important;
  line-height: 1.8;
}

.faq__item.is-open .faq__icon--add { display: none; }
.faq__item.is-open .faq__icon--minus { display: block; }
.faq__icon--minus { display: none; }

section#contact { padding: 80px 20px; }
section#contact .contact__body { width: 100%; max-width: 600px; margin: 0 auto; }

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: bold;
}

.must {
  background: #e60000 !important;
  color: #fff !important;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 3px;
  margin: 0 !important;
  display: inline-block;
  white-space: nowrap;
}

.wpcf7-submit {
    display: block !important;
    width: 100% !important;
    max-width: 400px;
    margin: 40px auto 0 !important; 
    background: var(--secondary) !important;
    color: #fff !important;
    padding: 18px !important;
    border-radius: 50px !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.3s, transform 0.2s !important;
}

.wpcf7-submit:hover {
    background: var(--primary-variant) !important;
    transform: translateY(-2px);
}

/* ===============================
   ■ フッター
=============================== */
footer.footer { 
  width: 100%; 
  background: var(--primary); 
  color: #fff; 
  padding: 60px 0; 
  margin-top: auto;
}

.footer__inner { 
  max-width: var(--width-md); 
  margin: 0 auto; 
  text-align: center; 
  padding: 0 20px; 
}

.footer__logo a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 900;
  display: block;
  margin-bottom: 10px;
}

.copyright {
  font-size: 12px;
}

/* ===============================
   ■ お知らせ一覧ページ (archive.php)
=============================== */
.archive-news {
    padding: 80px 20px;
    background: #fff;
}

.archive-news__inner {
    max-width: 900px;
    margin: 0 auto;
}

.archive-news .heading__sub-title {
    font-size: 24px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    color: var(--primary);
    font-weight: 800;
    text-align: center;
}

.archive-news .heading__title {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--on-surface);
    text-align: center;
}

.pagination {
    margin-top: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination .page-numbers {
    padding: 8px 16px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--on-surface);
    border-radius: 4px;
    transition: 0.3s;
}

.pagination .page-numbers.current {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.pagination .page-numbers:hover:not(.current) {
    background: var(--surface-variant);
}

@media screen and (max-width: 768px) {
    .archive-news .heading__sub-title { font-size: 18px; }
    .archive-news .heading__title { font-size: 30px; }
}

/* ===============================
   ■ お知らせ一覧ボタン（追記分）
=============================== */
.news__more {
    text-align: center;
    margin-top: 40px;
}

.more-btn {
    display: inline-block;
    padding: 12px 50px;
    background: #fff;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
}

.more-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 162, 55, 0.2);
}