/*
Theme Name: Aeterlink Theme
Theme URI: https://aeterlink.com
Author: Your Name
Author URI: https://yoursite.com
Description: Custom theme for Aeterlink
Version: 1.0.0
License: GPL v2 or later
Text Domain: aeterlink
*/

/* カラーパレット定義 */
:root {
  /* ブランドカラー */
  --brand-blue: #0896b7;

  /* ベースカラー */
  --base-white: #ffffff;
  --base-gray: #ecf1f3;
  --base-yellow: #fbfbf4;
  --base-black: #3d3d3d;
  --base-dark-gray: #717171;

  /* ポイントカラー */
  --point-red: #ea4123;
  --point-yellow: #ffe945;

  /* バッジカラー */
  --badge-sky-blue: #ebfbff;
  --badge-yellow: #fffee9;
  --badge-green: #effff1;
  --badge-orange: #fff1e8;
  --badge-pink: #ffebf3;
  --badge-purple: #f6ebff;
}

/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* タイポグラフィ定義 */
h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.text--case {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* PC用タイポグラフィ */
@media (min-width: 768px) {
  h2 {
    font-size: 40px;
    line-height: 1.6;
  }

  p {
    font-size: 16px;
    line-height: 2;
  }
}

/* 表示制御ユーティリティ */
/* モバイルのみ表示 */
.spOnly {
  display: block !important;
}

.pcOnly {
  display: none !important;
}

@media (min-width: 450px) {
  .spOnly--middle {
    display: none !important;
  }
}

/* タブレット・PC用 */
@media (min-width: 768px) {
  .spOnly {
    display: none !important;
  }

  .pcOnly {
    display: block !important;
  }
}

/* インライン要素用 */
.spOnly--inline {
  display: inline !important;
}

.pcOnly--inline {
  display: none !important;
}

@media (min-width: 768px) {
  .spOnly--inline {
    display: none !important;
  }

  .pcOnly--inline {
    display: inline !important;
  }
}

/* フレックス要素用 */
.spOnly--flex {
  display: flex !important;
}

.pcOnly--flex {
  display: none !important;
}

@media (min-width: 768px) {
  .spOnly--flex {
    display: none !important;
  }

  .pcOnly--flex {
    display: flex !important;
  }
}

/* 固定CTA */
.fixedCta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .fixedCta {
    position: static;
    box-shadow: none;
  }
}

/* セクションタイトル中央揃え */
section h2 {
  text-align: center;
}

/* セクション見出し共通コンポーネント */
.sectionLabel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

@media screen and (min-width: 768px) {
  .sectionLabel {
    flex-direction: row;
  }
}

.sectionLabel__icon {
  width: 10px;
  height: 10px;
  background: var(--brand-blue);
  border-radius: 50%;
  flex-shrink: 0;
}

.sectionLabel__icon--cta {
  background: var(--base-white);
}

/* コンテナとセクション共通スタイル */
.container {
  padding: 60px 20px;
  max-width: 1440px;
  margin: 0 auto;
}

/* PC用 */
@media (min-width: 768px) {
  .container {
    padding: clamp(80px, 8.33vw, 120px) clamp(40px, 11.8vw, 170px);
  }
}

/* セクション背景色 */
.case,
.caseStudy {
  background-color: var(--base-gray);
}

.faq {
  background-color: var(--base-yellow);
}

/* 共通スタイル */
/* ボタン・リンク共通ホバーエフェクト */
button,
a {
  transition: filter 0.3s ease;
}

button:hover,
button:focus,
a:hover,
a:focus {
  filter: brightness(1.08);
}
.badge {
  display: inline-block;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--brand-blue);
  border: 1px solid var(--brand-blue);
  background-color: var(--base-white);
}

.badge--blue {
  color: var(--base-dark-gray);
  border: 1px solid #00a1c5;
  background-color: var(--badge-sky-blue);
}
.badge--yellow {
  color: var(--base-dark-gray);
  border: 1px solid #ffd900;
  background-color: var(--badge-yellow);
}
.badge--green {
  border: 1px solid #5bd06a;
  background-color: var(--badge-green);
}
.badge--orange {
  color: var(--base-dark-gray);
  border: 1px solid #ea964b;
  background-color: var(--badge-orange);
}
.badge--pink {
  color: var(--base-dark-gray);
  border: 1px solid #ee8db4;
  background-color: var(--badge-pink);
}
.badge--purple {
  color: var(--base-dark-gray);
  border: 1px solid #c792f3;
  background-color: var(--badge-purple);
}

.cta__button {
  flex: 1;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  cursor: pointer;
  color: var(--base-white);
  padding: 0 26px;
  border-radius: 100px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  border: none;
}

@media screen and (min-width: 768px) {
  .cta__button {
    width: 100%;
    max-width: 300px;
    min-height: 59px;
  }
}

.cta__button--primary {
  background-image: url('assets/images/cta-button-bg-1.png');
}

.cta__button--secondary {
  background-image: url('assets/images/cta-button-bg-2.png');
  color: var(--base-black);
}

/* スクロールアニメーション */
.fadeUp {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.fadeUp.isVisible {
  opacity: 1;
  transform: translateY(0);
}