/*
Theme Name: Innocareer
Author: OraiSaori
Version: 1.0
*/

/* 共通変数 */
:root{
  --ic-primary:#0066FF;
  --ic-accent:#1b1c69;
  --ic-text:#0B1220;
  --ic-muted:#5B6474;
  --ic-line:#E7EDF6;
  --ic-bg:#F7FAFF;
  --ic-arrow: #FFFFFF;
  --ic-arrow-size: 38px;
  --header: 68px;
}

/* 全体共通スタイル */
html {
  scroll-behavior:smooth;
  scroll-padding: var(--header);
}
body {
  margin: 0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

.sp-br {
  display: none;
}


#ic-root, #ic-faq {
  color:var(--ic-text);
  background:#fff
}
.container{
  max-width:1200px;
  position: relative;
  margin:0 auto;
  padding:0 20px
}
#ic-root h1 {
  font-size:clamp(28px,4.8vw,56px);
  line-height:1.5;
  letter-spacing:.2px;
  margin:0;
}
#ic-root h2 {
  font-size:clamp(20px,3vw,36px);
  margin:0 0 24px;
}
#ic-root img {
  max-width: 100%;
  height: auto;
  display: block;
}
#ic-root p, li {
  font-size: 16px;
  line-height: 1.6;
}

#ic-root p.lead {
  font-size:clamp(16px,2.2vw,20px);
  line-height:1.8;
  color:var(--ic-muted)
}

#ic-root .eyebrow {
  display:inline-block;
  font-size:24px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ic-accent);
  padding:6px 0px 40px;
  font-weight: 800;
}
#ic-root .marker-heading {
  position: relative;
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  z-index: 1;
}

#ic-root .marker-heading::before {
  content: "";
  position: absolute;
  bottom: 1.7em;
  left: 0.5em;
  width: 100%;
  height: 0.5em; /* 見出しの半分くらいの太さ */
  background: linear-gradient(to right, #62a2e3, #0055a4);
  z-index: -1; /* テキストの下に配置 */
  border-radius: 2px;
}
#ic-root .btn {
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:16px 22px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
}

#ic-root .btn-primary {
  background:var(--ic-primary);
  color:#fff;
  box-shadow:0 6px 18px rgba(11,95,255,.18);
  transition: background 0.3s;
}

#ic-root .btn-primary:hover {
  background-color: #66AAFF;
}

#ic-root .btn-quiet {
  color:var(--ic-text);
}

/* ヘッダー */
#ic-root .nav {
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(170%) blur(8px);
  border-bottom:1px solid var(--ic-line)
}

#ic-root .nav .inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height: var(--header);
}
#ic-root .nav a {
  text-decoration:none;
  font-weight:700;
}
#ic-root .nav .links {
  display: flex;
  gap: 24px;
  align-items: center;
  /* 変化を滑らかにするための設定 */
  transition: opacity 0.3s ease;
}
#ic-root .nav .links a.btn-quiet:hover {
  opacity: 0.6;
}
#ic-root .ic-logo-img {
  max-height: 40px;
}

/* フッター */
.footer {
  background: #1b1c69;
  color: #fff;
  padding: 80px 20px;
  text-align: center;

  p {
    font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
  }
}

/* セクション共通 */
#ic-root .section {
  padding:88px 0;
}
#ic-root .section .sub{color:var(--ic-muted);line-height:1.9;margin:0 0 26px}
#pricing-section,
#cases {
  background-color: #f7f7f7;
}

/* 導入事例 */
.cards-3 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.cards-3 .card { 
  background:#fff;
  border:1px solid var(--ic-line);border-radius:18px;
  padding:22px;
  box-shadow:0 6px 20px rgba(15,30,50,.05)
}

.cards-3 .card h3 {
  border-bottom: 1px solid var(--border-color);
  height: 60px;
  padding-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cards-3 .card .content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 14px;
  margin-top: 32px;
}

.cards-3 .card .content .item {
  display: flex;
  flex-direction: column;
  gap: 12px;

  > div {
    padding: 4px 16px;
    width: fit-content;
    font-weight: bold;
  }

  p {
    margin: 0;
    line-height: 1.8;
  }

  .problem {
    color: #4A2A8A;
    background-color: #F2EDFA;
  }

  .solution {
    color: #FF0000;
    background-color: #FFF2F2;
  }

  .result {
    color: var(--ic-primary);
    background-color: #ebf3fc;
  }
}

.cards-3 .card .content .item ul {
  margin: 0;
  padding-left: 22px;

  li {
    line-height: 1.8;
  }
}


/* トップページ個別スタイル */
.hero {
  position:relative; /* 子要素（ロゴ、キャッチコピー）の基準点とする */
  text-align: center;

  /* モヤモヤ背景の主要な設定 */
  background-image: 
    /* 1. 大きな円形のグラデーション（透明度の低い白で光のモヤを表現） */
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 1.0) 0%, transparent 60%),
    /* 2. 中くらいの円形のグラデーション（プライマリーカラーのぼかし） */
    radial-gradient(circle at 90% 80%, rgba(0, 102, 255, 0.5) 0%, transparent 70%),
    /* 3. 小さな円形のグラデーション（より明るい青の光沢感） */
    radial-gradient(circle at 40% 60%, rgba(51, 153, 255, 0.4) 0%, transparent 40%),
    /* 4. 全体に広がる非常に薄いモヤ（テクスチャのベース） */
    radial-gradient(circle at 65% 30%, rgba(255, 255, 255, 1.0) 0%, transparent 50%);
  /* 5. グラデーションを背景色と合成する */
  background-blend-mode: soft-light; 

  /* グラデーションが背景色に合わせて変化するように設定 */
  background-size: 150% 150%; /* グラデーションのサイズを大きくし、画面いっぱいに広がるように */
  background-position: center;
}

/* 薄いロゴ画像の設定 */
.hero .faded-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
  width: 100%;
  height: 100%;

  /* 背景画像の指定と拡大 */
  background-image: url('https://innocareer.jp/wp-content/uploads/2025/11/a134fb74-2b62-4caa-99c2-cdfb3ffbc1b5.svg'); /* 画像のURLを指定 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% auto;
  background-position: 90% 50%;

  /* 画像を要素全体に拡大表示し、縦横比を維持（一部が見切れる可能性あり） */
  /* background-size: cover; */

  /* ロゴを薄くする設定 */
  opacity: 0.4; /* 10%の透明度 */
  pointer-events: none; /* ロゴをクリックできないようにする */

  mask-image: linear-gradient(to left, 
        rgba(0, 0, 0, 1) 0%,   /* 左端: マスクが黒 = ぼかしが最大表示 */
        rgba(0, 0, 0, 1) 30%,  /* 30%までぼかしを最大表示 */
        rgba(0, 0, 0, 0) 50%   /* 70%でぼかしが完全に消える（透明になる） */
    );
    -webkit-mask-image: linear-gradient(to left, 
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 0, 0, 0) 100%
    );
}

.hero .catch-phrase {
  display:grid;
  padding:96px 0 56px;
  text-align: left;
}

.hero .catch-phrase h1 span {
  color:var(--ic-primary)
}

/* できること */
.services {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.method {
  border:1px solid var(--ic-line);
  border-radius:14px;
  text-align: center;
  overflow: hidden;
}

.method > p {
  padding: 0 14px;
  height: 50px;
}

.method .title {
  border-bottom: 1px solid var(--ic-line);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  margin-bottom: 32px;
  padding: 14px 14px 0 14px;
  background-color: #ebf3fc;

  p {
    font-size: 18px;
    font-weight: 600;
  }
}

.method .arrow {
  display:flex;
  justify-content:center;
  align-items:center;
}

.method .arrow-button {
  display: inline-block;
  width: var(--ic-arrow-size);
  height: var(--ic-arrow-size);
  background-color: #fff;
  border: 4px solid #1b1c69;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  vertical-align: middle;
}

#ic-root .method .arrow-button::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-bottom: 4px solid var(--ic-accent);
  border-right: 4px solid var(--ic-accent);
  border-radius: 2px;
  transform: translate(0, -50%) rotate(45deg);
}

/* お客様の声 */
.quotes {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.quotes .card {
  background:#fff;
  border:1px solid var(--ic-line);
  border-radius:18px;
  padding:28px;
}

.quote {
  position:relative;
  font-weight: 600;
  padding: 16px 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote::before {
  content: '\201C';
  position: absolute;
  top: -34px;
  left: -10px;
  color: #e5eefb;
  font-size: 64px
}
.quote::after {
  content: '\201C';
  position: absolute;
  top: -5px;
  right: -10px;
  color: #e5eefb;
  font-size: 64px;
  transform: scale(-1, -1);
}

.quotes .card .content {
  margin-top: 40px;
  height: 120px;
}

.quotes .card .auther {
  font-size: 12px;
  text-align: right;
}

/* CTA */
.cta {
  padding:80px 0;
  text-align: center;
  /* border-top:1px solid var(--ic-line); */

}
.cta-card {
  background:#fff;
  border:2px solid var(--ic-line);
  border-radius:18px;
  padding: 60px 40px;
  box-shadow:0 20px 35px 10px rgba(66,60,60,.1);
  max-width: 600px;
  display: flex;
  flex-direction: column;
  line-height: 2;
}

.cta-card p {
  color: var(--ic-muted);
  line-height: 2.0;
}

.cta-card div {
  margin-top: 20px;
}

/* 料金詳細ページ個別スタイル */
#pricing-wrap {
  .header {
    border-bottom: 4px solid var(--ic-accent);
    width: fit-content;
    margin: 0 auto 40px;

    h2 {
      margin: 0;
    }
  }

  /* ★フォーカス・ホバー時のスタイル変更 */
  .card:hover,
  .card:focus {
    /* 拡大 */
    transform: scale(1.05);

    /* 影を濃くして浮き上がっている感を強調 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
  }

  .card {
    margin: 0 auto;
    border-radius:12px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    color: var(--ic-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0,  0.1);
    background-color: #fff;
    text-align: center;
    padding-bottom: 40px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-origin: center center;

    /* 特典リスト */
    .features-list {
      text-align: left;
      margin: 0 auto 30px;
    }

    .features-list ul {
      list-style: none;
      padding: 0;
    }

    .features-list li {
      font-size: 16px;
      padding: 8px 0;
      border-bottom: 1px dashed var(--ic-primary);
    }
  }

  .grid {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    margin-top: 40px;

    div {
      font-size: 24px;
      font-weight: 600;
    }

    .price {
      display: flex;
      padding: 20px 0;
      justify-content: center;
      align-items: baseline;
      gap: 8px;
      line-height: 1;

      .num {
        font-size: 80px;
        font-weight: 800;
      }

      .digit {
        font-size: 24px;
      }
    }

    .monthly {
      border-radius:8px;
      background: var(--ic-primary);
      color: #fff;
      width: fit-content;
      font-size: 24px;
      padding: 12px 16px;
    }
  }
}

/* 企業概要 */
#company .container{
  max-width: 1000px;
}

.company h2 {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--ic-line);
}

.company h3 {
  border-bottom: 3px solid #fff;
  padding-bottom: 16px;
}

.company .sub {
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 40px 0;
}

.company .sub .item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-bottom: 1px solid #dcdcdc;

  .key {
    padding:15px 0;
    font-weight: 700;
    line-height: 1.6;
    align-self: center;
  }

  .value {
    padding: 15px 0;
    line-height: 1.6;
    text-align: left;
  }
}

/* FAQページ個別スタイル */
#ic-faq .wrap{max-width:900px;margin:0 auto;padding:24px}
#ic-faq h1{font-size:clamp(28px,4vw,42px);margin:28px 0 8px}
#ic-faq p.lead{color:var(--ic-muted);line-height:1.9;margin:0 0 24px}
#ic-faq .toc{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
#ic-faq .toc a{font-size:13px;padding:8px 10px;border-radius:999px;border:1px solid var(--ic-line);text-decoration:none;color:var(--ic-text);background:#fff}
#ic-faq details{border:1px solid var(--ic-line);border-radius:14px;padding:14px 16px;background:#fff;box-shadow:0 4px 14px rgba(15,30,50,.04)}
#ic-faq details+details{margin-top:12px}
#ic-faq summary{cursor:pointer;font-weight:800;color:var(--ic-text)}
#ic-faq summary::-webkit-details-marker{display:none}
#ic-faq .a{color:var(--ic-muted);margin-top:8px;line-height:1.9}
#ic-faq .cta{display:inline-block;margin-top:16px;padding:12px 16px;border-radius:12px;background:var(--ic-primary);color:#fff;text-decoration:none;font-weight:800}

/* プライバシーページ個別スタイル */
#ic-privacy .wrap{
  max-width:900px;
  margin:0 auto;
  padding:24px;
}

#ic-privacy h1{
  font-size:clamp(28px,4vw,42px);
  padding-bottom: 40px;
  margin:28px 0 100px;
  border-bottom: 1px solid #1b1c69;
}

#ic-privacy h3 {
  margin:60px 0 40px;
}

#ic-privacy p {
  font-size: 14px;
}


/* 右下のガイドボタン */
#scrollToTopBtn {
  position: fixed; /* 画面に固定 */
  bottom: 20px; /* 下端からの距離 */
  right: 20px; /* 右端からの距離 */
  z-index: 1000; /* 他の要素より手前に表示 */
  padding: 12px 18px;
  background-color: var(--ic-primary); /* プライマリカラーを使用 */
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  opacity: 0; /* 初期状態では透明（非表示） */
  visibility: hidden; /* DOMからも非表示 */
  transition: opacity 0.3s, visibility 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
#scrollToTopBtn.show {
  opacity: 1;
  visibility: visible;
}

/* 問い合わせフォーム */
.wpcf7 {
  max-width: 100%;
  margin: 80px auto 0;
}

/* 入力フィールド（テキスト、メール、テキストエリアなど）の幅を調整 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    /* 画面幅いっぱいに広げたい場合 */
    width: 100%;
    /* ボックスのサイズ計算方法を指定（パディングやボーダーを含める） */
    box-sizing: border-box; 
    padding: 10px; /* 内側の余白 */
    border: 1px solid #ccc; /* 枠線 */
    margin-top: 8px;
    margin-bottom: 15px; /* 下の要素との間隔 */
    border-radius: 8px;
}

.wpcf7-form label {
  color: var(--ic-accent);
  padding-left: 8px;
}

/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
  display: block;
  width: 150px;
  margin-top: 40px;
  padding: 15px 30px;
  background-color: var(--ic-primary);
  color: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.3s;
}

/* ホバー時のデザイン */
.wpcf7-form input[type="submit"]:hover {
  background-color: #66AAFF;
}

.wpcf7-acceptance {
  > span {
    margin: 0;
  }
  a {
    color: var(--ic-primary);
  }
}

/* レスポンシブ (共通) */
@media(max-width:1024px){
  #ic-root .hero .grid{grid-template-columns:1fr}
  #ic-root .quotes{grid-template-columns:1fr 1fr}
}
@media(max-width:960px){
  .container {
    padding: 0 10px;
  }
}

@media(max-width:760px){

  .sp-br {
    display: block;
  }

  #ic-root .ic-logo-img {
    width: 160px;
  }
  #ic-root img {
    width: 50%;

  }
  #ic-root .cards-3{grid-template-columns:1fr}
  #ic-root .quotes{grid-template-columns:1fr}
  #ic-root .section {
    padding:40px 8px;
  }

  #faq-section .section {
    padding-top: 0;
  }

  .hero .catch-phrase {
    padding: 40px 0 20px;
    div {
      text-align: center;
    }
  }

  .hero .faded-logo {
    background-size: 90% auto;
    background-position: 90% 20%;
  }

  .services {
    grid-template-columns: 1fr;
  }

  .cta {
    padding: 50px 16px;
  }

  .cta-card {
    border: none;
    padding: 0;
    box-shadow: none;
  }
  .company .sub .item {
    grid-template-columns: 0.5fr 1.5fr;
  }

  #pricing-wrap {

    .monthly {
      padding: 8px 12px;
    }
    .num {
      font-size: 60px;
    }

    .digit {
      font-size: 20px;
    }


  }

  .footer {
    padding: 20px 16px;
  }

  #scrollToTopBtn {
    padding: 10px 14px;
    bottom: 15px;
}

}

@media (width > 760px) {
  .fade-in {
    opacity: 0;
    transform: translateY(60px); /* ← 移動距離増やす */
    animation: fadeInUp 1.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; /* ← 時間＆勢い */
    animation-timeline: view();
    animation-range: entry 60% cover 100%; /* アニメーションの発火タイミング。要素がどれぐらい見えたら発火するかを設定 */
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(80px); /* ← ここも同じにする */
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}


/* モバイル */
/* --- チェックボックスとハンバーガーアイコンのスタイル --- */
.menu-checkbox,
.nav-menu {
  display: none;
}
.hamburger {
  display: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1000;
}

.bar {
  display: block;
  width: 25px;
  height: 2px;
  margin: 7px 0;
  background-color: var(--ic-accent);
  transition: 0.4s;
}

/* --- モバイル用スタイル (メディアクエリ) --- */
@media (max-width: 768px) {
  .header-nav {
    display: none;
  }
  /* 1. ハンバーガーアイコン（ラベル）を表示し、メニューを非表示にする */
  .hamburger,
  .nav-menu {
      display: block; /* モバイルで表示 */
  }

  /* 2. ナビゲーションメニューのスタイルを設定 */
  .nav-menu {
    /* メニューを絶対位置で配置し、ヘッダー直下から画面幅いっぱいに広げる */
    position: absolute;
    top: 100%; /* ヘッダーの真下（ヘッダー高さの100%）から開始 */
    right: 0;
    width: 200px;
    background-color: #fff; /* 既存のヘッダーとは異なる新しいスタイル */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 998; /* ヘッダーアイコンより下に、メインコンテンツより上に */
    border-top: 1px solid var(--ic-line);

    /* 非表示の設定: 完全に透明にし、操作できないようにする */
    opacity: 0; 
    visibility: hidden;

    /* アニメーション設定: 透明度と位置の移動を滑らかにする */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out visibility 0s 0.3s;
    transform: translateY(10px);

  }

  .nav-menu ul {
    text-align: center;
    padding: 0;
    list-style: none;
    margin: 0;

    li {
      border-bottom: 1px solid var(--ic-line);
    }
  }

  .nav-menu a {
    display: block;
    padding: 15px 0;
    transform: background-color 0.3s;
  }

  .nav-menu a:hover {
    background-color: #e5eefb;
  }

  /* 2. メニューを開くロジック (コア機能) */
  /* チェックボックスがチェックされた状態（:checked）のとき、*/
  /* 隣接するナビゲーションメニュー（~ .nav-menu）のスタイルを上書きする */
  .menu-checkbox:checked ~ .nav-menu {
      /* 表示の設定: 不透明にし、操作できるようにする */
      opacity: 1; 
      visibility: visible;

      /* translateX(0) に戻すことで、右から滑らかにスライドイン */
      transform: translateY(0);

      transition: opacity 0.3s ease-out, 
                    transform 0.3s ease-out, 
                    visibility 0s 0s; /* 遅延なし（0秒）でvisibility: visible; を適用 */
  }

  /* 3. (オプション) 開いたときのアイコンの変化 */
  /* チェックボックスがチェックされたとき、隣接するハンバーガーアイコン（~ .hamburger）の */
  /* bar要素を回転させて、×印のような形にする */
  .menu-checkbox:checked ~ .hamburger .bar:nth-child(1) {
      transform: rotate(-45deg) translate(-7px, 5px);
  }

  .menu-checkbox:checked ~ .hamburger .bar:nth-child(2) {
      opacity: 0; /* 真ん中のバーを消す */
  }

  .menu-checkbox:checked ~ .hamburger .bar:nth-child(3) {
      transform: rotate(45deg) translate(-7px, -5px);
  }
}