/* =========================================================
   SANKO 応用試験対策講座 LP
   - SPベースの画像LP（画像を縦積み）
   - 最大幅 --lp-max 以下：レスポンシブ
   - 最大幅より大きい：中央にLP、左右余白は背景画像(PC_bg)で充填 + PC用ヘッダー
   ========================================================= */

:root{
  --lp-max: 680px;        /* コンテンツ最大幅（PC表示時の横幅） */
  --hero-blue: #1478c8;   /* ヒーロー下部のブルー（CTA背景の連続用） */
  --line-green: #06c755;
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--font);
  color: #1a1a1a;
  line-height: 1.6;
  /* PCで最大幅を超えたときに見える左右余白の背景 */
  background: #cfe6f7 url("../image/PC_bg.webp") center top repeat;
  background-size: auto;
}

img{ border: 0; vertical-align: bottom; }

a{ color: inherit; text-decoration: none; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.site-header__logo{ display: inline-flex; align-items: center; }
.site-header__logo img{
  height: 34px;
  width: auto;
}
/* ヘッダー右側グループ（バッジ＋PCボタン） */
.site-header__right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 文部科学大臣登録バッジ（右端／PCはボタンの左） */
.site-header__badge{
  height: 30px;
  width: auto;
  display: block;
}
/* PC用の追加ボタン（SPでは非表示） */
.site-header__nav{
  display: none;
  align-items: center;
  gap: 10px;
}
.site-header__btn img{
  height: 46px;
  width: auto;
  display: block;
}

/* =========================================================
   LP 本体（中央寄せの1カラム）
   ========================================================= */
.lp{
  max-width: var(--lp-max);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 40px rgba(0,0,0,.14);
  overflow: hidden;
}

/* 各セクション画像：横幅いっぱい */
.lp img{ display: block; width: 100%; height: auto; }

.sec{ position: relative; font-size: 0; }

/* =========================================================
   Hero（Section1）＋ CTAボタン（画像上に配置）
   ========================================================= */
.hero{
  position: relative;
}
.hero__bg{ width: 100%; display: block; }
/* 受講料ボックスの上（ヒーロー画像下部のブルー余白）に重ねて配置 */
.hero__cta{
  position: absolute;
  left: 50%;
  bottom: 21%;
  transform: translateX(-50%);
  width: 82%;
  max-width: 600px;
  transition: transform .15s ease, filter .15s ease;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
}
.hero__cta img{ width: 100%; display: block; }
.hero__cta:hover{ transform: translateX(-50%) translateY(-2px); }
.hero__cta:active{ transform: translateX(-50%) translateY(1px); }

/* =========================================================
   Section7 LINE ＋ LINE相談ボタン（画像の余白上に配置）
   ========================================================= */
.line-sec{ position: relative; font-size: 0; }
.line-sec__cta{
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 82%;
  max-width: 560px;
  transition: transform .15s ease;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
}
.line-sec__cta img{ width: 100%; display: block; }
.line-sec__cta:hover{ transform: translate(-50%, -54%); }
.line-sec__cta:active{ transform: translate(-50%, -48%); }

/* =========================================================
   連絡先（コーディング実装）
   ========================================================= */
.contact{
  background: #BAE3F9;
  padding: 26px 20px;
}
.contact__list{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact__item a{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0a3d68;
  font-size: 15px;
  font-weight: 500;
}
.contact .contact__icon{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}
.contact__item a:hover .contact__text{ text-decoration: underline; }

/* =========================================================
   フローティングCTA
   ========================================================= */
.floating-cta{
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(92%, 540px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
.floating-cta.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.floating-cta img{
  width: 100%;
  display: block;
}
/* 2秒おきに震えるアニメーション（先頭0.3s前後で揺れ、残りは静止） */
.floating-cta.is-visible img{
  animation: cta-shake 2s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes cta-shake{
  0%   { transform: rotate(0deg)  scale(1); }
  3%   { transform: rotate(-4deg) scale(1.03); }
  6%   { transform: rotate(4deg)  scale(1.03); }
  9%   { transform: rotate(-3deg) scale(1.02); }
  12%  { transform: rotate(3deg)  scale(1.02); }
  15%  { transform: rotate(-1.5deg) scale(1.01); }
  18%  { transform: rotate(0deg)  scale(1); }
  100% { transform: rotate(0deg)  scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .floating-cta.is-visible img{ animation: none; }
}

/* フローティングCTA表示中はページ下部に余白を確保 */
body.has-floating{ padding-bottom: 90px; }

/* =========================================================
   PC / タブレット（最大幅を超えた場合）
   ========================================================= */
@media (min-width: 681px){
  .site-header{ padding: 10px 28px; }
  .site-header__logo img{ height: 48px; }
  .site-header__badge{ height: 42px; }
  .site-header__nav{ display: flex; }

  .floating-cta{ width: 480px; bottom: 20px; }
  body.has-floating{ padding-bottom: 0; }
}