@charset "UTF-8";

/* ==========================================================================
   1. 基本設定・共通フォント（ohzora.css 準拠）
   ========================================================================== */
body {
  line-height: 1.6;
  color: #333;
  font-size: min(4.2672vw, 18px);
  font-family: "Noto Sans JP", "Avenir Next", Verdana, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  background-color: #ffffff;
}

a {
  color: #00a3e9;
  text-decoration: none;
}

p {
  margin-top: 1em;
}
p:first-child {
  margin-top: 0;
}

.container, .section-inner {
  width: 100%;
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ==========================================================================
   2. タイポグラフィ・ヘッダー装飾（ohzora.css 準拠）
   ========================================================================== */
.font-mincho, .s-font-micho, .p-font-mincho {
  font-family: "a-otf-ryumin-pr6n", "Noto Serif JP", serif !important;
}

.font-gothic, .s-font-gothic, .p-font-gothic {
  font-family: "Noto Sans JP", sans-serif !important;
}

.font-blue, .clr-mirai {
  color: #00a3e9 !important;
}

.font-red {
  color: #d80001 !important;
}

.clr-tsunagaru {
  color: #8ec21f !important;
}

.hdr-section {
  color: #00a3e9;
  text-align: center;
  font-size: min(5.6007vw, 30px);
  font-family: "a-otf-ryumin-pr6n", "Noto Serif JP", serif;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .075em;
}

.hdr-section span.tag {
  display: block;
  font-size: min(3.5vw, 16px);
  color: #f37021;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  margin-bottom: min(1.3335vw, 10px);
}

.hdr-blue {
  color: #00a3e9;
  font-size: min(4.8006vw, 22px);
  font-weight: normal;
}

/* ==========================================================================
   3. ヘッダーエリア（SVGロゴ対応・ohzora.css 準拠）
   ========================================================================== */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: min(18.669vw, 80px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* 公式SVGロゴの読み込み・配置ルール */
#logo {
  flex: 0 0 auto;
}

#logo a {
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: min(45vw, 200px);
  aspect-ratio: 178/39;
  background: url("/sitelogo.svg") no-repeat left center;
  background-size: contain;
}

/* ヘッダー右側ボタン */
#header .header-cta {
  display: flex;
  gap: min(2.5vw, 12px);
}

#header .header-cta .btn-shiryo,
#header .header-cta .btn-counseling {
  width: auto;
}

#header .header-cta a {
  height: min(10vw, 40px);
  padding: 0 min(3vw, 16px);
  font-size: min(3.2vw, 14px);
  border-radius: 4px;
}

/* ==========================================================================
   4. ファーストビュー（FV）
   ========================================================================== */
.fv {
  margin-top: min(18.669vw, 80px);
  padding: min(10.668vw, 70px) 0 min(13.335vw, 90px);
  background: linear-gradient(135deg, #fff5ed 0%, #ffffff 100%);
  text-align: center;
}

.fv-badge {
  display: inline-block;
  background: #d80001;
  color: #ffffff;
  font-weight: 700;
  font-size: min(3.5vw, 15px);
  padding: min(1vw, 6px) min(3vw, 20px);
  border-radius: 50px;
  margin-bottom: min(4vw, 20px);
}

.fv-title {
  font-family: "a-otf-ryumin-pr6n", "Noto Serif JP", serif;
  font-size: min(6.4008vw, 38px);
  font-weight: 700;
  line-height: 1.4;
  color: #333333;
  margin-bottom: min(4vw, 25px);
  letter-spacing: .05em;
}

.fv-title mark {
  background: linear-gradient(transparent 60%, #ffe0b2 60%);
  color: #f37021;
}

.fv-subtitle {
  font-size: min(4vw, 18px);
  color: #555555;
  max-width: 800px;
  margin: 0 auto min(6vw, 40px);
  line-height: 1.8;
}

.fv-image-box {
  background: #ffffff;
  padding: min(2vw, 15px);
  border: 2px solid #e5f6fd;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  max-width: 760px;
  margin: 0 auto;
}

.fv-image-placeholder {
  width: 100%;
  height: min(45vw, 320px);
  background: #e5f6fd;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00a3e9;
  font-weight: 500;
}

/* ==========================================================================
   5. セクション＆コンテンツ（STORY 01-04）
   ========================================================================== */
.section {
  margin-top: min(13.335vw, 90px);
}

.bg-aqua {
  background: #e5f6fd;
  color: #333333;
  padding: min(10.668vw, 70px) 0;
}

.system-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: min(4vw, 24px);
  margin-top: min(8vw, 40px);
}

.system-card {
  background: #ffffff;
  border: 2px solid #00a3e9;
  border-radius: 12px;
  padding: min(6vw, 30px) min(4vw, 24px);
  position: relative;
}

.system-card-num {
  position: absolute;
  top: -15px;
  left: 20px;
  background: #00a3e9;
  color: #ffffff;
  font-weight: 700;
  font-size: min(3.2vw, 14px);
  padding: 2px 16px;
  border-radius: 20px;
}

.system-card h3 {
  font-size: min(4.5vw, 20px);
  color: #00a3e9;
  margin-bottom: min(2vw, 12px);
  margin-top: 5px;
}

.highlight-box {
  background: #ffffff;
  border: 2px solid #f37021;
  border-radius: 12px;
  padding: min(4vw, 24px);
  text-align: center;
  margin-top: min(6vw, 30px);
}

.highlight-box p {
  font-size: min(4.2vw, 20px);
  font-weight: 700;
  color: #f37021;
}

/* STORY 03 選択肢 */
.choice-banner {
  background: #ffffff;
  border-radius: 16px;
  padding: min(8vw, 40px) min(5vw, 30px);
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  text-align: center;
}

.choice-banner p {
  font-size: min(4vw, 18px);
  line-height: 1.8;
}

/* STORY 04 一番伝えたいこと */
.core-card {
  background: #ffffff;
  border: 3px solid #f37021;
  border-radius: 20px;
  padding: min(10vw, 50px) min(5vw, 30px);
  text-align: center;
  box-shadow: 0 10px 30px rgba(243, 112, 33, 0.1);
}

.core-badge {
  background: #f37021;
  color: #ffffff;
  font-size: min(3.5vw, 16px);
  font-weight: 700;
  padding: 6px 24px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: min(4vw, 20px);
}

.core-title {
  font-family: "a-otf-ryumin-pr6n", "Noto Serif JP", serif;
  font-size: min(5.6vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: min(4vw, 24px);
}

.core-title mark {
  background: linear-gradient(transparent 60%, #ffe0b2 60%);
  color: #f37021;
}

.check-list {
  max-width: 640px;
  margin: min(6vw, 30px) auto 0;
  text-align: left;
}

.check-list li {
  background: #fff5ed;
  padding: min(3.5vw, 18px) min(4vw, 20px);
  border-radius: 8px;
  margin-bottom: min(2.5vw, 12px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: min(4vw, 18px);
}

.check-list li::before {
  content: "✔";
  color: #8ec21f;
  font-size: 1.3em;
}

/* ==========================================================================
   6. コンバージョンエリア（mod-cv / btns / btn-counseling / btn-shiryo）
   ========================================================================== */
.mod-cv {
  margin-top: min(13.335vw, 90px);
}

.mod-cv .cv {
  border: 2px solid #00a3e9;
  background: #e5f6fd;
  text-align: center;
  padding: min(8vw, 48px) min(4vw, 20px);
}

.mod-cv .cv .cta-title {
  font-size: min(5.6vw, 28px);
  font-family: "a-otf-ryumin-pr6n", "Noto Serif JP", serif;
  font-weight: 500;
  color: #00a3e9;
  margin-bottom: min(3vw, 15px);
}

.mod-cv .cv .cta-sub {
  font-size: min(3.8vw, 16px);
  color: #555555;
  margin-bottom: min(6vw, 30px);
}

.btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(4vw, 20px);
  flex-wrap: wrap;
}

.btn-counseling, .btn-shiryo {
  line-height: 1;
  font-family: "a-otf-ryumin-pr6n", "Noto Serif JP", serif;
  font-size: min(4vw, 20px);
  width: min(100%, 360px);
}

.btn-counseling a, .btn-shiryo a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
  letter-spacing: .1em;
  height: min(16vw, 68px);
  border-radius: 4px;
  transition: opacity .4s ease;
  font-weight: 500;
}

.btn-counseling a {
  background: #d80001;
}

.btn-shiryo a {
  background: #00a3e9;
}

*[class^=btn-] a:hover {
  opacity: 0.8;
}

/* ==========================================================================
   7. フッター
   ========================================================================== */
#footer {
  background: #333333;
  color: #ffffff;
  text-align: center;
  padding: min(6vw, 30px) 20px;
  font-size: min(3.2vw, 14px);
  margin-top: min(13.335vw, 90px);
}

/* PC向け調整（821px以上） */
@media only screen and (min-width: 821px) {
  .btns {
    flex-wrap: nowrap;
  }
}