/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.8;
    color: #555;
    background-color: #fff;
}

li { list-style: none; }
a { text-decoration: none; color: inherit; }

.pc-only {
  /* PCの時は（横幅769px以上の時は）表示する */
  display: block;
}

.sp-only {
  /* SPの時は（横幅768px以下の時は）表示しない */
  display: none;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 100px 0;
}

/* Header */
.header {
    height: 80px;
    background: #fff;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px; /* ロゴと会社名の間 */
}

.logo-img {
    width: 48px; /* ロゴの大きさは調整OK */
    height: auto;
}

.header-name .corp-name {
    font-size: 16px;
    font-weight: 700;
}

.header-name .corp-en {
    font-size: 12px;
    color: #555;
    letter-spacing: 1px;
}

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

.nav ul {
    display: flex;
    gap: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #666;
}


.btn-contact-head {
    background: #26155c;
    color: #fff;
    padding: 25px 35px;
    font-size: 14px;
}
.close-btn {
  display: none;
}




/* about Section */
/* About 背景画像 */
.about {
    background-image: url("../images/背景.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 100px 0; /* セクションの余白はそのまま */
}

/* 白い薄膜（読みやすくする） */
.about::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

/* 文字を前面に出す */
.about * {
    position: relative;
    z-index: 2;
}

.about-flex {
    display: flex;
    align-items: center;
    gap: 40px;
}

.about-text {
    width: 50%;
}

.about-image {
    width: 50%;
    height: 260px;
    background-image: url("../images/about.jpeg"); /* ← 画像パスに変更 */
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

/* Hero Section */
.hero {
    height: 600px;
    background: #ddd url("../images/f.mv.png") center/cover no-repeat; /* デザインに合わせた背景画像 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}


.hero-sub { font-size: 14px; letter-spacing: 0.1em; }
.hero-category { font-size: 18px; margin-bottom: 20px; }
.hero-title { font-size: 48px; font-weight: bold; line-height: 1.4; }

/* Section Common */
.section-header { text-align: center; margin-bottom: 60px; }
.section-sub { font-size: 14px; color: #333; margin-bottom: 10px; }
.section-title { font-size: 36px; color: #26155c; }

/* Values Section */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.value-card {
    background: transparent;
    border: 2px solid #f4c542; /* ← 線 */
    padding: 40px 30px;
    border-radius: 8px;
}


.value-num { font-size: 24px; color: #333; font-weight: bold; }
.value-label { font-size: 12px; color: #aaa; margin-bottom: 20px; }
.value-card h3 { font-size: 20px; margin-bottom: 20px; }
.value-desc { font-size: 14px; color: #666; }

/* Business Section */

.business {
    background-color: #e7eaee;

    background-image:
        url("../images/訪問販売.jpeg"),
        url("../images/teleapo.jpeg"),
        url("../images/携帯販売.jpeg");
    background-size: 50% 33.40%, 40% 33.33%, 40% 33.33%;

   background-position:
        left top,     /* 上の画像 → 左寄せ */
        right center,/* 真ん中 → 中央 */
        left bottom; /* 下 → 右寄せ */
    background-repeat: no-repeat;
    padding: 100px 0;
    position: relative;
    border-radius: 0 100px 0 0;


}
.business::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    z-index: 1;
}

.business * {
    position: relative;
    z-index: 2;
}

.business-item {
    display: flex;

    border-bottom: 1px solid #eee;
    padding: 30px;
    align-items: center;

    background: rgba(255,255,255,0.6); /* ← 半透明の白背景 */
    padding: 40px;
}


.business-id {
    display: flex;
    align-items: center;
    width: 40%;
    gap: 20px;
}


.business-id .num { font-size: 28px; color: #e07e0e; }
.business-detail { width: 60%; font-size: 15px; }
.business-id .en { font-size: 15px; color: #8a81a5; }


/* company Section */
.company-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
}

.company-table th,
.company-table td {
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.company-table th {
    width: 140px;
    font-weight: 600;
    color: #333;
}

/* Contact Section */
/* Contact セクション背景画像 */
.contact {
    position: relative;
    background-image: url("../images/contact.jpeg"); /* ← ここに画像パスを入れる */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 0; /* 余白を広めにすると背景が映える */
}



.contact .section-title {
    color: #fff; /* ← 好きな色に変更 */
}
.contact .section-sub {
    color: #fff; /* ← 好きな色に変更 */
}
/* Contact セクション：2カラム横並び */

.contact-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px; /* カラム間の余白 */
}

/* 左カラム（タイトル） */
.contact-left {
    width: 40%;
}

/* 右カラム（文章＋ボタン） */
.contact-right {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

/* 説明文 */
.contact-lead {
    line-height: 1.8;
    color: #fff;
}

/* ボタン */
.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* アイコンと文字の間 */
    padding: 20px 35px;
    background: #26155c;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 1px;
    font-size: 16px;
}

.mail-icon {
    width: 18px;   /* アイコンの大きさ */
    height: auto;
    display: block;
}


/* Footer */
/* Footer */
.footer {
    background: #060606;
    padding: 60px 0;
    text-align: center;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ロゴ部分 */

.footer-logo .corp-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #8b8b8b;
}

.footer-logo .corp-en {
    font-size: 14px;
    letter-spacing: 1px;
    color: #8b8b8b;
}

/* ナビ */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.footer-nav a {
    text-decoration: none;
    color: #8b8b8b;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 500;
}

/* コピーライト */
.footer-copy {
    font-size: 12px;
    color: #8b8b8b;
    margin-top: 20px;
}

/* ===========================
   スマホ（SP）用レスポンシブ
=========================== */
@media (max-width: 768px) {

  /* 全体の余白 */
  body {
    padding: 0;
  }

  .container {
    padding: 0 20px;
  }

  /* Header */
  .header {
    height: auto;
    padding: 10px 0;
  }

  .header-inner {
    flex-direction: column;
    gap: 10px;
  }

  .nav ul {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }


  /* Hero */
  .hero {
     min-height: 50vh;
    padding: 80px 20px;
    text-align: center;
  }

  .hero-title {
    font-size: 38px;
    line-height: 1.4;
  }

  /* ABOUT */
  .about-flex {
    flex-direction: column;
    gap: 20px;
  }

  .about-text,
  .about-image {
    width: 100%;
  }

  .about-image {
    height: 200px;
  }

  /* VALUES */
  .values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .value-card {
    padding: 20px;
  }

  /* BUSINESS */
  .business-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .business-item {
    flex-direction: column;
    padding: 20px;
  }

  .business-id {
    width: 100%;
    margin-bottom: 10px;
  }

  .business-detail {
    width: 100%;
  }

  /* COMPANY */
  .company-table {
    font-size: 14px;
  }

  .company-table th {
    width: 100px;
  }

  /* CONTACT */
  .contact-flex {
    flex-direction: column;
    gap: 30px;
  }

  .contact-left,
  .contact-right {
    width: 100%;
  }

  .contact-btn {
    width: 100%;
    text-align: center;
    padding: 18px 0;
    font-size: 18px;
  }

  /* FOOTER */
  .footer-nav ul {
    flex-direction: column;
    gap: 10px;
  }

  .footer-copy {
    font-size: 12px;
    margin-top: 20px;
  }
}
/* ハンバーガーボタン（PCでは非表示） */
.hamburger {
  display: none;
  width: 30px;
  height: 22px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  background: #333;
  border-radius: 3px;
}

/* スマホ用 */
@media (max-width: 768px) {

  /* ヘッダー全体 */
  .header {
    height: 60px;
  }

  /* ★ 横並びを維持する */
  .header-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* ナビは非表示（ハンバーガーで開く） */
  .nav-menu {
    display: none;
    flex-direction: column;
    gap: 20px;
    background: #fff;
    padding: 20px;
    position: absolute;
    top: 60px;
    right: 0;
    width: 70%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  /* ハンバーガーを右側に配置 */
  .hamburger {
    display: flex;
    margin-left: auto;
  }

  /* PC時の横並び解除 */
  .nav-menu ul {
    flex-direction: column;
    gap: 15px;
  }


 @media (max-width: 768px) {

  .business {
    background-image:
      linear-gradient(#f2f2f2, #f2f2f2), /* ★ 1枚目：グレーの塗りつぶし */
      url("../images/訪問販売.jpeg"),
      url("../images/teleapo.jpeg"),
      url("../images/携帯販売.jpeg");

    /* ★ 4つを縦に均等に並べる */
    background-size:
      100% 25%,
      100% 25%,
      100% 25%,
      100% 25%;

    background-position:
      top,
      center top 30%,
      center 65%,
      center 100% ;

    background-repeat: no-repeat;
  }
}


  /* ★ 中の文字をグレーの上に表示 */
  .business .container {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 768px) {

  /* Contact Us / お問い合わせ */
  .contact-left {
    text-align: center;
  }

  /* ★ 文章が入っている右カラムを中央寄せにする */
  .contact-right {
    text-align: center;
  }

  /* 説明文（2行） */
  .contact-lead {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* ボタンも中央揃え */
  .contact-btn {
    margin-left: auto;
    margin-right: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
}



  /* ★ ボタンの崩れを修正する */
  .contact-btn {
    width: 50%;              /* 横幅いっぱい */
    display: flex;            /* アイコンと文字を横並び */
    justify-content: center;  /* 中央揃え */
    align-items: center;      /* 縦位置も中央 */
    gap: 10px;                /* アイコンとの間隔 */
    padding: 16px 0;          /* 押しやすい高さ */
    font-size: 18px;          /* 読みやすい文字サイズ */
    box-sizing: border-box;   /* はみ出し防止 */
  }

  /* アイコンのサイズ調整（必要なら） */
  .mail-icon {
    width: 22px;
    height: auto;
  }
@media (max-width: 768px) {

  /* メニュー全体（右からスライド） */
  .nav-menu {
    display: none;
    flex-direction: column;
    gap: 24px;
    background: #ffffff;
    padding: 40px 24px;
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    height: 100vh;
    box-shadow: -4px 0 12px rgba(0,0,0,0.1);
    z-index: 999;
    animation: slideIn 0.3s ease;
  }

  /* スライドアニメーション */
  @keyframes slideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }


/* ==========================================
   ★ ハンバーガーメニュー（通常時・非表示）
========================================== */
.nav-menu {
  display: none; /* 通常時は完全に非表示にする */
}

/* ★ ハンバーガーを押したら表示されるメニュー（全画面） */
.nav-menu.active {
  display: flex;       /* activeがついたらflexで表示 */
  flex-direction: column;
  justify-content: center; /* 縦方向の中央寄せ */
  align-items: center;     /* 横方向の中央寄せ */
  gap: 32px;
  padding: 60px 24px 40px; /* 重複していたpaddingを整理 */
  background: rgba(255, 255, 255, 0.95); /* 少し不透明度を上げて文字を見やすく */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
}

/* メニュー内のリンク */
.nav-menu ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
  width: 100%; /* 幅をいっぱいにして中央寄せしやすく */
  padding: 0;
  list-style: none;
}

.nav-menu ul li {
  text-align: center;
}

.nav-menu ul li a {
  display: block;
  font-size: 20px;
  padding: 16px 32px;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(0, 31, 51, 0.1);
}

/* CONTACT ボタン */
.btn-contact-head {
  display: block;
  width: 80%;
  max-width: 250px;
  margin: 20px auto 0;
  padding: 14px 0; /* 重複していたpaddingを整理 */
  text-align: center;
  background: #26155c;
  color: #fff;
  border-radius: 6px;
  font-size: 20px;
  text-decoration: none;
}

/* 閉じるボタン（スマホ時） */
@media (max-width: 768px) {
  /* nav-menuがactiveの時だけ、中のclose-btnを表示 */
  .nav-menu.active .close-btn {
    display: block;
    font-size: 32px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 1001;
  }
}
@keyframes slideOut {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

.nav-menu.closing {
  animation: slideOut 0.3s ease forwards;
}

}

/* ============================
   プライバシーポリシー ページ
============================ */
.page {
  padding: 120px 20px 80px;
  padding-bottom: 200px; /* 画像が表示される分のスペースを確保 */
}


.page-section {
  max-width: 820px;
  margin: 0 auto;
}
.policy-hero {
  width: 100%;
  height: 350px; /* 好きな高さに調整 */
  background-image: url('../images/privacy.png'); /* ← ここに使いたい画像 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 20px 80px;
  display: block;
  justify-content: center;
  align-items: center;
  text-align: left;
}

.policy-title {
  font-size: 50px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  padding: 10px 50px 20px 80px;
}


/* タイトル＋背景画像 */

.page-title {
  position: relative;
  display: block; 
  text-align: left; /* タイトルを中央に */
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: 1px;
  color: #26155c;
}



@media (max-width: 768px) 

  {
  .policy-title {
      font-size: 30px;
      padding: 10px 0 20px 0; }
  .page-lead {padding: 10px 0 20px 0; }

  .page {
  padding: 100px 20px 80px;
  padding-bottom: 200px; /* 画像が表示される分のスペースを確保 */
}
 

.policy-hero {
  width: 100%;
  height: 270px; /* 好きな高さに調整 */
  }
}

.page-lead {
  margin-bottom: 40px;
  line-height: 1.9;
  font-size: 15px;
  color: #444;
}

.page-heading {
  font-size: 20px;
  font-weight: 700;
  margin: 40px 0 12px;
  color: #26155c; /* 見出しにアクセントカラー */
}

.page-section p {
  line-height: 1.9;
  font-size: 14px;
  color: #333;
  margin-bottom: 16px;
}

.page-section ul {
  padding-left: 1.2em;
  margin-bottom: 20px;
}

.page-section ul li {
  line-height: 1.9;
  font-size: 14px;
  color: #333;
}

.policy-date {
  margin-top: 50px;
  font-size: 13px;
  color: #777;
}




/* フッターのプライバシーポリシーリンク */
.footer-link {
  color: #fff;
  font-size: 12px;
  opacity: 0.8;
  text-decoration: none;
}

.footer-link:hover {
  opacity: 1;
}

  .close-btn {
    display: none;
    }