/* --- リセット & 全体基本設定 --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 余白を含めたサイズ計算 */
}

body {
  font-family: "Helvetica Neue", Arial, "平角ゴシック ProN", sans-serif;
  line-height: 1.6;
  color: #ffffff;
  background-color: #000000;
  text-align: center;		/*基本センター置き*/
}

/* 画像が画面からはみ出さない設定 */
.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;

  margin: 0 auto;       /* 上下0、左右autoで中央寄せ */
  margin-bottom: 40px;
}

/* 画像が画面からはみ出さない設定 */
.responsive-img2 {
  max-width: 100%;
  height: auto;
  display: block;

  margin: 0 auto;       /* 上下0、左右autoで中央寄せ */
  margin-bottom: 20px;
}






/* --- 各セクションのスタイル --- */

/* ヘッダー・見出し */
.hero {
  position: relative;
  text-align: center;
  background-color: #000000;
}

.hero-text {
  padding: 20px 15px;
}

.hero-text h1 {
  font-size: 1.5rem; /* スマホに適した文字サイズ */
  color: #ffffff;
  margin-bottom: 1px;
}



/* セクション */
.container {
  padding: 30px 15px;
  max-width: 100%;
}

.container h2 {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.container p {
  font-size: 1.0rem;
  margin-bottom: 20px;
}


/* セクション */
.container2 {
  padding: 30px 15px;
  max-width: 100%;
  background-color: #f2f5f9;
}

.container2 h1 {
  font-size: 1.8rem;
  color: #111D32;
  margin-bottom: 20px;
  font-weight: bold;
}

.container2 p {
  font-size: 1.0rem;
  margin-bottom: 20px;
}



/* セクション */
.container3 {
  padding: 30px 15px;
  max-width: 100%;
  background-color: #ffffff;
}

.container3 h1 {
  font-size: 1.8rem;
  color: #000000;
  margin-bottom: 20px;
  font-weight: bold;
}

.container3 p {
  font-size: 1.0rem;
  color: #000000;
  margin-top: 20px;
  margin-bottom: 20px;
}


/* --- container4（グラデーション背景セクション） --- */

.container4 {
  /* 画像の色を再現したグラデーション背景（左：ダークネイビー → 右：ダークパープル） */
  background: linear-gradient(90deg, #111a2e 0%, #1c102c 100%);
    /* 上下の余白（全体のバランスに合わせて調整してください） */
  padding: 30px 15px;
   /* 全体の幅指定 */
  max-width: 100%;
}


.container4 h1 {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 20px;
  font-weight: bold;
}

.container4 p {
  font-size: 1.0rem;
  color: #dddddd;
  margin-top: 20px;
  margin-bottom: 20px;
}



/* container4 の中身（テキストやカードを中央寄せにする枠） */
/*  要らんはず、あとで、消して */
.container4-inner {
  max-width: 960px;          /* PCでの広がりすぎを防止 */
  margin: 0 auto;            /* 中央寄せ */
  color: #ffffff;            /* 暗い背景で見えやすいよう文字色を「白」に設定 */
}





/* --- container5（お問い合わせフォーム） --- */

.container5 {
  background-color: #0b0b14;   /* 画像のダークネイビー背景 */
  padding: 50px 20px;
  color: #ffffff;
}

.contact-inner {
  max-width: 500px;            /* フォームの最大幅制限 */
  margin: 0 auto;
}

/* タイトルエリア */
.contact-sub {
  color: #4ce0f5;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 5px;
}

.contact-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.contact-lead {
  text-align: center;
  font-size: 0.9rem;
  color: #a0aec0;
  line-height: 1.6;
  margin-bottom: 35px;
}

/* フォームの各入力ブロック */
.form-group {
  margin-bottom: 25px;
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 8px;
}

/* 必須・任意バッジ */
.badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: normal;
}

.badge.required {
  background-color: #3b1d48;   /* 暗い紫色 */
  color: #f0a5ff;              /* 明るいピンク紫文字 */
}

.badge.optional {
  background-color: #1e293b;
  color: #94a3b8;
}

.sub-label {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: normal;
  margin-left: 5px;
}

.note-text {
  font-size: 0.75rem;
  color: #ff6b81;
  margin-bottom: 8px;
}

/* テキスト入力欄（input / select / textarea）共通設定 */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width: 100%;
  background-color: #0d121f;   /* 入力欄のダーク背景 */
  border: 1px solid #1e2d4a;   /* 青枠線 */
  border-radius: 8px;
  padding: 12px 15px;
  color: #ffffff;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #4ce0f5;       /* 選択時に水色に光らせる */
}

/* プレイスホルダー（初期入力ヒント文字）の色 */
::placeholder {
  color: #4a5568;
}

/* セレクトボックスの右矢印位置調整 */
.select-wrapper {
  position: relative;
}

.form-group select {
  appearance: none;            /* ブラウザ標準の矢印を消す */
  cursor: pointer;
}

.select-wrapper::after {
  content: '∨';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0aec0;
  font-size: 0.7rem;
  pointer-events: none;
}

/* チェックボックスエリア */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: #d1d5db;
  font-weight: normal;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  accent-color: #4ce0f5;       /* チェック時の色 */
  cursor: pointer;
}

.group-title {
  margin-bottom: 10px;
}

/* 送信ボタン（グラデーションボタン） */
.submit-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(90deg, #4ce0f5 0%, #a39cfd 100%);
  border: none;
  border-radius: 10px;
  color: #1a1a1a;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
  box-shadow: 0 4px 12px rgba(76, 224, 245, 0.2);
  transition: opacity 0.2s;
}

.submit-btn:hover {
  opacity: 0.9;
}



/* --- フッターエリア全般 --- */

.custom-footer {
  background-color: #080a11;  /* 画像のダーク背景 */
  padding: 40px 20px;
  text-align: center;
}

.footer-inner {
  max-width: 600px;
  margin: 0 auto;
}

/* 1. ロゴ画像エリア */
.footer-logo {
  margin-bottom: 25px;
}

.footer-logo img {
  max-width: 180px;           /* ロゴの幅指定（大きさに合わせて調整してください） */
  height: auto;
  margin: 0 auto;
}

/* 2. 上段リンク（会社情報 | お問い合わせ） */
.footer-nav-top {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;                   /* 要素同士のすき間 */
}

.footer-nav-top li a,
.footer-nav-bottom a {
  color: #a0aec0;              /* 画像の落ち着いたグレー文字 */
  text-decoration: none;       /* 下線を消す */
  font-size: 0.85rem;
  transition: color 0.2s;
}

.footer-nav-top li a:hover,
.footer-nav-bottom a:hover {
  color: #ffffff;              /* ホバー時に白く光らせる */
}

/* 縦棒区切りマーク */
.footer-nav-top .separator {
  color: #4a5568;              /* 暗めのグレー */
  font-size: 0.85rem;
}

/* 3. 下段リンク（プライバシーポリシー） */
.footer-nav-bottom {
  margin-top: 10px;
}












/* --- グラデーション枠付きカードの設定 --- */

.dark-card {
  /* 背景色（グラデーション背景より若干明るいダークネイビー） */
  background-color: #111726;

  /* 薄い青紫系の枠線と角丸 */
  border: 1px solid #2b3a58;
  border-radius: 16px;

  /* レイアウト：左右に要素を並べる */
  display: flex;
  align-items: center;         /* 垂直方向中央寄せ */
  justify-content: space-between;

  /* サイズと余白の設定 */
  width: 90%;
  max-width: 650px;            /* PCでの最大幅 */
  margin: 0 auto 30px auto;    /* 中央寄せ＆下の要素との間隔 */
  padding: 24px 20px;
}

/* 左側：テキストコンテンツ */
.dark-card-content {
  flex: 1;                     /* 余った幅をテキストエリアに割り当てる */
  padding-right: 15px;         /* 画像との間のすき間 */
}

/* ★グラデーション文字（水色→薄紫） */
.gradient-text-blue {
  background: linear-gradient(90deg, #7be5f6 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: bold;
}

.dark-card-content h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

/* 金額テキストの強調サイズ */
.price-text {
  font-size: 1.6rem;
  margin-bottom: 16px;
  line-height: 1.2;
}

/* 普通の<p>タグテキスト */
.dark-card-desc {
  color: #a0aec0;              /* 読みやすい薄グレー */
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* 右側：画像ブロック */
.dark-card-image {
  width: 100px;                /* スマホ表示時の画像幅固定値 */
  flex-shrink: 0;              /* 画像が押しつぶされるのを防ぐ */
}

.dark-card-image img {
  width: 100%;
  height: auto;
  display: block;
}










/* コンテンツカード 1 */
.card {
  background: #111130;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;

/* --- 枠線の追加（ここを追記・変更） --- */
  border: 2px solid #222260; /* 太さ1px、実線、明るいグレー */

/*  box-shadow: 0 2px 5px rgba(0,0,0,0.05);*/
}

.card-body {
  padding: 15px;
}

.card-body h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #ff0000; /*#0066cc;*/
}

.card-body p {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #ffffff;
}


/* コンテンツカード 2 */
.card2{
  background: #010818;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;

/* --- 枠線の追加（ここを追記・変更） --- */
  border: 2px solid #444480; /* 太さ1px、実線、明るいグレー */
}





/*ハイライト用カード*/

/* ★「強調する下地」テキストブロックの設定 */
.highlight-card {
  background: #e6eaef;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;

  padding: 20px 20px;         /* 上下と左右の内側余白 */
}

/* 中のテキストスタイル */
.highlight-card p {
  color: #333333;             /* 濃いグレーの文字色 */
  font-size: 1.5rem;            /* 文字サイズ */
  font-weight: bold;          /* 太字で強調 */
  line-height: 1.6;           /* 行間 */
  margin: 0;                  /* 余分な余白を消す */
  word-break: break-all;      /* スマホでの自動改行対策（お好み） */
}


/* コンテンツカード 3 */
.card3{
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;

/* --- 枠線の追加（ここを追記・変更） --- */
  border: 2px solid #aaaaaa; /* 太さ1px、実線、明るいグレー */
}

.card3-body {
  padding: 15px;
	text-align: left;
}

.card3-body h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #000000; /*#0066cc;*/
}

.card3-body p {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #000000;
}



/* 画像重ねとさらにテキスト */

/* 親容器：すべての重ね合わせの「基準点」にする */
.image-wrapper {
  position: relative;          /* 子要素の absolute の位置基準になる */
  width: 100%;                 /* レスポンシブ対応 */
  max-width: 600px;            /* 画像Aのサイズに合わせて調整 */
  margin: 0 auto;
}

/* 1. 画像A：通常の配置（親要素の高さと幅を自動決定する土台） */
.img-a {
  width: 100%;
  height: auto;
  display: block;
}

/* 2. 画像B：画像Aにぴったり重ねる */
.img-b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                 /* 画像Aとまったく同じ幅 */
  height: 100%;                /* 画像Aとまったく同じ高さ */
  object-fit: cover;           /* 縦横比のズレ防止 */
}

/* 3. 画像C：任意の場所に配置（一回り小さく） */
.img-c {
  position: absolute;
  width: 25%;                  /* 画像Aに対して一回り小さいサイズ（任意で調整） */
  height: auto;
  
  /* ★配置場所の調整（例：右上から少し離れた位置） */
  top: 20%;
  left: 3%;
}

/* 4. テキストエリア：画像の上に重ねて配置 */
.overlay-text {
  position: absolute;
  
  /* ★配置場所の調整（例：左下寄りに配置する場合） */
  top: 10%;
  left: 30%;
/*  right: 20px;                 /* 端まで広がりすぎない指定 */

  color: #ffffff;              /* 画像の上で見やすいよう白文字 */
/*  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); /* 画像と同化しないよう影をつける */
	text-align: left;

}

.overlay-text h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
  color: #ffffff;              /* 画像の上で見やすいよう白文字 */
}

.overlay-text p {
  margin-top: 2px;
  font-size: 1.0rem;
  line-height: 1.4;			/* 改行した時の余白 */
  color: #ffffff;              /* 画像の上で見やすいよう白文字 */
}




/* バッジ */
.badge-gradient {
  /* 1. 文字の長さに合わせて幅を自動調整し、左寄りにする */
  display: inline-block;

  /* 2. 背景のグラデーション（ダークブルー → ダークパープル） */
  background: linear-gradient(90deg, #1d4860 0%, #3e3363 100%);

  /* 3. 文字色と角丸 */
  color: #ffffff;
  font-weight: bold;
  font-size: 0.95rem;
  border-radius: 6px;

  /* 4. 余白の設定（内側余白でバッジの大きさを調整、下側に隙間をあける） */
  padding: 8px 16px;
  margin-bottom: 16px;
}





/* 2枚の画像を横並びにする設定 */
.image-group {
  display: flex;       /* 横並びにする */
  gap: 15px;           /* ★画像と画像の間の隙間（お好みで調整） */
  width: 100%;         /* 親要素の幅いっぱいに使う */
}

/* 横並びにする際、各画像が均等に幅を分かち合う設定 */
.image-group .responsive-img {
  flex: 1;             /* 2枚の画像を同じ幅（50%ずつ）にする */
  min-width: 0;        /* スマホ画面での画像はみ出し防止 */
  height: auto;        /* 縦横比を維持 */
}



/* アクションボタン (CTA) */
.cta-section {
  text-align: center;
  padding: 30px 15px;
  background-color: #ffffff;
}

.btn {
  display: block; /* スマホで押しやすいよう横幅いっぱいに */
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 15px 0;
  background-color: #ff6600;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  border-radius: 30px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* フッター */
footer {
  text-align: center;
  padding: 20px;
  font-size: 0.8rem;
  color: #888888;
}

/* --- CSSスライダー設定 --- */

.slider-section {
  margin: 20px 0;
}

.slider-instruction {
  text-align: center;
  font-size: 0.85rem;
  color: #666666;
  margin-bottom: 8px;
}

/* スライダーの外枠（横スクロールを有効化） */
.slider-container {
  display: flex;                /* 画像を横一列に並べる */
  overflow-x: auto;             /* 横スクロールを許可 */
  scroll-snap-type: x mandatory;/* スワイプ時に位置を磁石のように吸着させる */
  -webkit-overflow-scrolling: touch; /* iOS（iPhone）での滑らかなスクロール */
  gap: 0px;/*15px;                    /* 画像同士のすき間 */
  padding: 0;/*10px 15px;           /* 左右にチラ見せ用の余白 */
  scrollbar-width: none;        /* Firefoxでスクロールバーを非表示 */
}

/* Chrome, Safariでスクロールバーを非表示にする */
.slider-container::-webkit-scrollbar {
  display: none;
}

/* 各スライド（1枚ごとの枠） */
.slide {
  flex: 0 0 100%;/*85%;                /* 横幅85%（次の画像が少し見えて「めくれる」とわかる） */
  scroll-snap-align: start;/*center;    /* スクリーンの中央にピッタリ止まる */
}

.slide img {
  width: 100%;
/*  height: 200px;                /* 画像の買い高さを揃える場合設定（お好みで調整） */
  object-fit: cover;            /* 画像の縦横比を崩さず枠いっぱいに収める */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* スライダー専用画像クラス（トリミング無効化） */
.slider-img {
  width: 100%;                  /* 横幅を画面いっぱいに広げる */
  height: auto;                 /* 高さは自動で計算し、オリジナルの縦横比を完全に維持 */
  display: block;
}


/* ボタンの外枠・背景グラデーション設定 */
.gradient-btn {
  display: block;               /* 横幅全体に広げるためブロック化 */
  width: 100%;                  /* 親要素（card）の幅に合わせる */
  padding: 16px 10px;           /* 上下の内側余白（高さの調整） */
  margin-top: 20px;             /* 上の画像との間隔 */

  /* ★ここがポイント：左から右への美しいグラデーション */
  background: linear-gradient(90deg, #4ce0f5 0%, #a39cfd 100%);

  /* 角丸の設定 */
  border-radius: 12px;          /* 角をしっかり丸くする */

  /* 文字のスタイル設定 */
  color: #1a1a1a;               /* 濃いグレーの文字（黒に近く読みやすい色） */
  font-size: 1rem;              /* 文字サイズ */
  font-weight: bold;            /* 太字 */
  text-align: center;           /* テキストを中央寄せ */
  text-decoration: none;        /* リンクの下線を消す */

  /* タップした時の感覚を滑らかにする設定 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 軽く立体感（影）を付ける場合 */
  transition: opacity 0.2s;
}

/* タップ・ホバー時の変化（少し透明にする） */
.gradient-btn:hover {
  opacity: 0.9;
}


.gradient-text {
  /* 1. 背景にグラデーションを設定 */
/*  background: linear-gradient(90deg, #4ce0f5 0%, #a39cfd 100%);*/
  background: linear-gradient(90deg, #4ce0f5 0%, #b3acff 100%);
  
  /* 2. 背景を「テキストの形」に切り抜く（Safari/Chrome用の-webkit-も併記） */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* 3. 本来の文字色を「透明」にして、背景のグラデーションを透けて見せる */
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* 見やすくするための太字指定 */
  font-size: 3rem;              /* 文字サイズ */
  font-weight: bold;
  text-align: center;           /* テキストを中央寄せ */

}




/* ===================================================
   PC・タブレット表示用（画面幅 768px 以上）の設定
   =================================================== */
@media (min-width: 768px) {

  /* 1. 全体コンテナ：PCで横に広がりすぎないよう幅を制限して中央寄せ */
  .container {
    max-width: 960px;          /* PCでの最大横幅 */
    margin: 0 auto;            /* 画面の中央に配置 */
    padding: 50px 20px;
  }

  .container2 {
    max-width: 960px;          /* PCでの最大横幅 */
    margin: 0 auto;            /* 画面の中央に配置 */
    padding: 50px 20px;
  }
  .container3 {
    max-width: 960px;          /* PCでの最大横幅 */
    margin: 0 auto;            /* 画面の中央に配置 */
    padding: 50px 20px;
  }

  .container4 {
    max-width: 960px;          /* PCでの最大横幅 */
    margin: 0 auto;            /* 画面の中央に配置 */
    padding: 50px 20px;
  }
  .container5 {
    max-width: 960px;          /* PCでの最大横幅 */
    margin: 0 auto;            /* 画面の中央に配置 */
    padding: 50px 20px;
  }



  /* 2. カードエリア：PCでは縦並びから「横2列」に切り替え */
  /* カード群を包む枠があれば Flexbox で並べられますが、
     今回は既存構造のままカード幅を絞り中央寄せにします */
  .card {
    max-width: 700px;          /* カードが横に間延びしない設定 */
    margin: 0 auto 30px auto;  /* 中央寄せ */
  }

  .card2 {
    max-width: 700px;          /* カードが横に間延びしない設定 */
    margin: 0 auto 30px auto;  /* 中央寄せ */
  }

  .card3 {
    max-width: 700px;          /* カードが横に間延びしない設定 */
    margin: 0 auto 30px auto;  /* 中央寄せ */
  }


  .dark-card {
    padding: 35px 40px;
	width: 50%;
  }
  .dark-card-content h3 {
    font-size: 1.8rem;
  }
  .price-text {
    font-size: 2.2rem;
  }
  .dark-card-image {
   /* width: 140px;              /* PCでは画像を少し大きく表示 */
  }


  .highlight-card {
    max-width: 700px;          /* カードが横に間延びしない設定 */
    margin: 0 auto 10px auto;  /* 中央寄せ */
  }

  .gradient-btn {
    max-width: 700px;          /* 横に間延びしない設定 */
    margin: 0 auto 30px auto;  /* 中央寄せ */
  }


  /* 3. メインビジュアル：文字サイズをPC用に少し大きく */
  .hero-text h1 {
    font-size: 2.2rem;
  }
  .hero-text p {
    font-size: 1.1rem;
  }

  /* 4. スライダー：PC画面では横幅を一定にして見やすく調整 */
  .slider-container {
    max-width: 960px;
    margin: 0 auto;
  }
  .slide {
    flex: 0 0 400px;           /* PCでは各スライドの幅を固定(400px)にする */
  }

  /* 5. お問い合わせボタン：PCで巨大化しないようサイズを制限 */
  .btn {
    max-width: 350px;
    transition: opacity 0.3s;  /* マウスホバー時のアニメーション */
  }
  .btn:hover {
    opacity: 0.85;             /* PCでマウスを乗せた時に少し半透明にする */
  }

}