/* style.css */

/* 全体設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 変数定義 */
:root {
  /* --- PC版の指定サイズをベースに、スマホ用の最小値を設定 --- */
  /* clamp(最小値[スマホ], 推奨値[可変], 最大値[PC]) */
  --font-h1: 3rem;
  --font-h2: 2rem;
  --font-h3: 1.5rem;
  --font-h4: 1.25rem;
  --font-default: 1rem;
  --font-desc: 0.875rem;
  --font-note: 0.75rem;

  /* 行間（Line-height）も可読性のために定義しておくと便利です */
    --line-height-large: 2.0;
  --line-height-base: 1.7;
  --line-height-heading: 1.4;

  --color-opera: #FF008C;
  --color-pink: #FDC7E1;
  --color-light-pink: #FFE3EF;
  --color-yellow: #FFF6B6;
  --color-blue: #244480;
  --color-lime: #D9F6F3;
  --color-gray: #F5F5F5;
  --color-text: #222;
  --color-white: #fff;

  --pad-section: 20px 100px;
  --wid-section: 80x; /* この値が '80x' となっていますが、単位が不明です。
                          もし 80% の意味であれば '80%' に修正してください。
                          例: --wid-section: 80%; */
  --rd-s-cont: 8px;
}

/* レスポンシブ - 1024px以下 */
@media screen and (max-width: 1024px) {
  :root {
    --font-h1: 2.5rem;
    --font-h2: 1.75rem;
    --font-h3: 1.25rem;
    --font-h4: 1.125rem;
  }
}

/* レスポンシブ - 480px以下 */
@media screen and (max-width: 480px) {
  :root {
    --font-h1: 2rem;
    --font-h2: 1.5rem;
    --font-h3: 1.125rem;
    --font-h4: 1rem;
  }
}

/* 基本スタイル */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; /* Hiragino Sans を追加 */
  background: var(--color-white);
  font-size: var(--font-default);
  color: var(--color-text);
  max-width: 100%;
  font-weight: 500;
  margin: 0 auto;
}

.size-80{
      margin: 0px 30px
}



/* ===== HERO ===== */
.hero {
  position: relative;
  width: 100%;
  /* min-height: 700px; */
  background-image: url('../img/bg_hero.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: var(--pad-section);
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.confetti-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.confetti-wrap i {
  position: absolute;
  display: block;
  border-radius: 2px;
  opacity: 0.75;
}

.hero-sub-title {
  font-size: var(--font-h4);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.hero-main-title {
  font-size: var(--font-h1);
  font-weight: 900;
  color: var(--color-opera);
  line-height: 1.15;
  margin-bottom: 36px;
  letter-spacing: -0.01em;
}

.point-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 24px;
}

.point-card {
  background: var(--color-yellow); /* #FFF2B8 を変数に */
  border-radius: 14px;
  padding: 22px 48px 18px;
  flex: 1;
  max-width: 460px;
  text-align: center;
}

.point-card .pc-label {
  font-size: var(--font-default);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 6px;
}

.point-card .pc-num {
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--color-blue);
  line-height: 1.0;
}

.point-card .pc-num .pc-unit {
  font-size: 32px;
  font-weight: 900;
  color: var(--color-blue);
}

.hero-checks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  margin-top: 4px;
}

.hero-check-item {
  padding: 9px 28px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(2px);
}

.hero-check-item .check-icon {
  color: var(--color-opera);
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ===== ENTRY ===== */
.entry-section {
  background: var(--color-pink);
  padding: 32px 80px 32px;
  text-align: center;
}

.entry-title {
  font-size: 21px;
  font-weight: 900;
  color: var(--color-blue);
  margin-bottom: 24px;
  line-height: 1.4;
}

.steps {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 30px;
}

.step-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 16px;
  flex: 1;
  max-width: 340px;
  text-align: center;
}

.step-badge {
  display: inline-block;
  background: var(--color-opera);
  color: var(--color-white);
  font-size: var(--font-note);
  font-weight: 900;
  border-radius: 999px;
  padding: 4px 18px;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.step-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.step-desc {
  font-size: var(--font-default);
  line-height: 1.7;
}

.entry-btn {
  display: inline-block;
  background: var(--color-opera);
  color: var(--color-white);
  font-size: var(--font-h2);
  font-weight: 900;
  padding: 14px 64px;
  border-radius: 12px;
  text-decoration: none;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), inset 0 -5px 0 rgba(82, 0, 42, 0.3);
  transition: opacity 0.2s;
}

.entry-btn:hover {
  opacity: 0.88;
}

.entry-note {
  font-size: var(--font-note);
  line-height: var(--line-height-base);
}

/* ===== NAV ===== */
.nav-section {
  text-align: center;
  background: var(--color-white);
  padding: 40px 80px 36px;
}
.nav-section img{
  width: 100%;
}

.nav-chars {
  width: var(--wid-section);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
}
.nav-chars img{
 max-width: 1200px;

}

.nav-char {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-pink); /* #FBC8DE を変数に */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.nav-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.nav-message p {
  font-size: var(--font-h4);
  text-align: center;
  color: var(--color-blue);
  padding-bottom: 26px;
  font-weight: 700;
}
.nav-message{
  margin-bottom: 12px;
}

.to_blog{
text-decoration: none;
color: var(--color-opera);
font-weight: 800;
padding-bottom: 12px;
}

/* ページ内リンクボタン */
.nav-btn {
  background: var(--color-gray); /* #F3F4F6 を変数に */
  border-radius: var(--rd-s-cont);
  padding: 18px 20px;
  flex: 1;
  text-align: center;
  cursor: pointer;
  font-size: var(--font-default);
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.6;
  text-decoration: none;
  display: block;
  transition: background 0.2s, border-color 0.2s;
}

.nav-btn::after {
  content: "▼";
  display: block;
  font-size: 11px;
  color: var(--color-blue);
  margin-top: 6px;
}

.nav-btn:hover {
  background: #E8EAF0;
  border-color: var(--color-blue);
}

/* ===== SECTION COMMON ===== */
.section {
  padding: 32px 80px;
  background: var(--color-white);
}

/* スクロールオフセット（固定ヘッダーがある場合に備えて） */
.section-anchor {
  display: block;
  height: 0;
  visibility: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid #69D0D0;
}

.section-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  /* background: var(--color-pink); /* #FBC8DE を変数に */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.section-title {
  font-size: var(--font-h3);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.35;
}

.point-band {
  background: var(--color-lime); /* #D8F3F3 を変数に */
  border-radius: 8px;
  padding: 13px 22px;
  font-size: 17px;
  font-weight: 900;
  color: var(--color-blue);
  margin-bottom: 22px;
}

/* ===== NETWORK ===== */
.network-highlight {
  width: 100%;
  text-align: center;
  margin-bottom: 18px;
}

.network-highlight .nh-sub {
  font-size: var(--font-default);
  color: var(--color-text);
  margin-bottom: 4px;
}

.network-highlight img{
width: 100%;
max-width: 1000px;
}

.nh-main {
  width: 100%;
  text-align: center;
  font-size: var(--font-h4);
  font-weight: 900;
  color: var(--color-blue);
  margin-bottom: 8px;
}

.network-cards {
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
}

.network-card {
  background: var(--color-gray); /* #F3F4F6 を変数に */
  border-radius: 10px;
  padding: 20px 16px;
  flex: 1;
  text-align: center;
}

.network-card .nc-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--color-blue);
  margin-bottom: 8px;
}

.network-card .nc-desc {
  color: var(--color-text);
  font-size: var(--font-desc);
  line-height: 1.65;
  text-align: left;
}

.quality-band {
  background: var(--color-lime); /* #D8F3F3 を変数に */
  border-radius: 8px;
  padding: 13px 22px;
  font-size: 17px;
  font-weight: 900;
  color: var(--color-blue);
  text-align: center;
}

/* ===== MERIT ===== */
.merit-section {
  background: var(--color-white);
  padding: 52px 100px;
}

.merit-cards {
  display: flex;
  gap: 18px; /* 各 merit-card 間の間隔 */
  margin-bottom: 28px;
}

.merit-card {
  min-height: 180px;
  flex: 1; /* 各 merit-card が均等に幅を占める */
  background: var(--color-light-pink);
  border-radius: 12px;
  padding: 20px 22px; /* カード全体のパディング */
  display: flex;
  align-items: center; /* 垂直方向の中央寄せ (必要であれば) */
  gap: 15px; /* テキスト部分と画像部分の間隔 */
}

.merit-card-content {
  flex: 0 0 80%; /* テキスト部分の幅を70%に固定 */
}

.merit-card-image-wrapper {
  flex: 1; /* 残りのスペースを画像部分が占める */
  text-align: center; /* 画像を中央寄せ (必要であれば) */
}

.merit-card-image {
  max-width: 100%; /* 親要素からはみ出さないようにする */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 余分な下マージンをなくす */
}

.merit-card-label {
  font-size: var(--font-default);
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: 6px;
}

.merit-card-title {
  font-size: var(--font-h3);
  font-weight: 900;
  color: var(--color-opera);
  margin-bottom: 10px;
  line-height: 1.35;
}

.merit-card-desc {
  font-size: var(--font-default);
  color: var(--color-text);
  line-height: 1.75;
}

.merit-highlight {
  background-image: url(../img/bg_banner.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: var(--color-white); /* デフォルトの背景色 */
  border-radius: 12px; /* 追加: .merit-highlight にも border-radius が必要 */
  min-height: 200px;
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 28px;
}

.merit-highlight .mh-sub {
  font-size: var(--font-default);
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: 6px;
  line-height: 1.6;
}

.merit-highlight .mh-main {
  font-size: 42px;
  font-weight: 900;
  color: var(--color-opera);
  line-height: 1.2;
}

.merit-sub-cards {
  display: flex;
  gap: 14px;
}

.merit-sub-card {
  flex: 1;
  background: var(--color-light-pink);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
}

.merit-sub-card .msc-title {
  font-size: var(--font-default);
  font-weight: 700;
  color: var(--color-opera);
  margin-bottom: 8px;
}

.merit-sub-card .msc-desc {
  font-size: var(--font-default);
  font-weight: 700;
  color: var(--color-opera);
  line-height: 1.65;
}

/* ===== HOW TO START ===== */
.howto-section {
  background: var(--color-white);
  padding: 52px 100px;
}

.check-band {
  background: var(--color-lime); /* #D8F3F3 を変数に */
  border-radius: 8px;
  padding: 13px 22px;
  font-size: 17px;
  font-weight: 900;
  color: var(--color-blue);
  margin-bottom: 20px;
}

.check-panel {
  background: var(--color-gray);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column; /* 子要素を縦に並べる */
  gap: 12px; /* ヘッダーと詳細の間隔 */
}

.check-panel-header {
  display: flex; /* タイトルとボタンを横並びにする */
  align-items: center; /* 垂直方向の中央寄せ */
  justify-content: space-between; /* タイトルとボタンを左右に配置 */
  flex-wrap: wrap; /* 画面幅が狭いときに折り返す */
  gap: 10px; /* タイトルとボタンの間隔 */
}

.check-panel-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-blue);
}

.sub-btn {
  display: inline-block;
  background: var(--color-white);
  border: 1.5px solid var(--color-blue);
  color: var(--color-blue);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.sub-btn:hover {
  background: var(--color-blue);
  color: var(--color-white);
}

.device-btns {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.device-btn-card{
  text-align: center;
  padding: 8px;
  width: 50%;
 flex: 1;
}

.device-btn-card p{
  line-height: var(--line-height-large);
  color: var(--color-text);
  font-size: var(--font-desc);
  margin-bottom: 12px;
}

.device-btn-title{
  font-size: var(--font-default);
  font-weight: 700;
}

.device-btn-card-left{
  border-right: solid 1px #ccc;
}



.start-band {
  background: var(--color-lime); /* #D8F3F3 を変数に */
  border-radius: 8px;
  padding: 13px 22px;
  font-size: 17px;
  font-weight: 900;
  color: var(--color-blue);
  margin: 30px 0 22px;
}

.howto-step {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 24px;
  background: var(--color-gray); /* #F3F4F6 を変数に */
  border-radius: 10px;
  padding: 24px 22px;
  font-size: var(--font-desc);
}

.howto-step-text {
  flex: 1;
}
.howto-step-text p{
  line-height: var(--line-height-base);
}

.howto-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-opera);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 900;
  border-radius: 50%;
  margin-bottom: 10px;
}

.howto-step-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--color-blue);
  margin-bottom: 14px;
  line-height: 1.4;
}

.howto-step-img {
  width: 300px;
  height: 190px;
  background: #E6E6E6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #AAAAAA;
  font-size: 13px;
  flex-shrink: 0;
  border: 1px solid #DDDDDD;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--color-gray); /* #F3F4F6 を変数に */
  padding: 30px 100px;
  text-align: center;
  font-size: 11px;
  color: #777777;
  line-height: 2.0;
  border-top: 1px solid #E6E6E6;
}

/* ============================================================
    RESPONSIVE
============================================================ */

/* タブレット（〜1024px） */
@media (max-width: 1024px) {

.device-btn-card-left{
  border-right: none;
}
.device-btn-card{
  text-align: left;
  width: 100%;
}

.size-80{
      margin: 0px ;
}

  .hero {
    padding: 48px 48px;
    min-height: auto;
  }

  .hero-main-title {
    font-size: 38px;
  }

  .hero-main-title .num {
    font-size: 52px;
  }

  .point-card {
    padding: 18px 24px;
  }

  .point-card .pc-num {
    font-size: 56px;
  }

  .point-card .pc-num .pc-unit {
    font-size: 26px;
  }

  .entry-section {
    padding: 24px 48px 24px;
  }

  .nav-section {
    padding: 32px 48px 28px;
  }

  .section {
    padding: 40px 48px;
  }

  .merit-section {
    padding: 40px 48px;
  }

  .howto-section {
    padding: 40px 48px;
  }

  .footer {
    padding: 24px 48px;
  }

  .network-highlight .nh-main {
    font-size: var(--font-h3);
    
  }

  .merit-highlight {
    background-image: url(../img/bg_banner.png);
  }
  .merit-highlight .mh-main {
    font-size: var(--font-h2);
  }
}

/* スマートフォン（〜768px） */
@media (max-width: 768px) {

.device-btn-card-left{
  border-right: none;
}
.device-btn-card{
  text-align: left;
  width: 100%;
}


  body {
    width: 100%;
  }

  .size-80{
      margin: 0px 0px
}

  /* HERO */
  .hero {
    padding: 36px 20px 40px;
    min-height: auto;
  }

  .hero-sub-title {
    font-size: 13px;
  }

  .hero-main-title {
    font-size: 28px;
    margin-bottom: 24px;
  }

  .hero-main-title .num {
    font-size: var(--font-h1);
  }

  .point-cards {
    flex-direction: column;
    gap: 12px;
  }

  .point-card {
    max-width: 100%;
    padding: 16px 20px;
  }

  /* ENTRY */
  .entry-section {
    padding: 28px 20px 24px;
  }

  .entry-title {
    font-size: 16px;
  }

  .steps {
    flex-direction: column;
    gap: 12px;
  }

  .step-card {
    max-width: 100%;
  }

  .entry-btn {
    font-size: var(--font-h2);
    padding: 16px 32px;
    width: 100%;
    text-align: center;
  }

  /* NAV */
  .nav-section {
    padding: 24px 20px 20px;
      display: flex;
      text-align: center;
      justify-content: center; 
  }

  .nav-chars {
    gap: 8px;
    width: 100%;
   
  }

  .nav-char {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }

  .nav-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .nav-btn {
    font-size: 13px;
  }

  /* SECTIONS */
  .section {
    padding: 32px 20px;
  }

  .merit-section {
    padding: 32px 20px;
  }

  .howto-section {
    padding: 32px 20px;
  }

  .section-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .network-cards {
    flex-direction: column;
    gap: 10px;
  }

  .network-highlight .nh-main {
        font-size: var(--font-h3);
  }

  /* MERIT */
  .merit-cards {
    flex-direction: column;
    gap: 12px;
  }

  .merit-highlight .mh-main {
    font-size: var(--font-h2);
  }

  .merit-sub-cards {
    flex-direction: column;
    gap: 10px;
  }

  /* HOW TO */
  .howto-step {
    flex-direction: column;
    gap: 16px;
  }

  .howto-step-img {
    width: 100%;
    height: 180px;
  }

  .check-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .check-panel-header {
    flex-direction: column; /* スマホではタイトルとボタンを縦に並べる */
    align-items: flex-start; /* 左寄せ */
    gap: 8px;
  }

  .device-btns {
    flex-direction: column;
  }

  /* FOOTER */
  .footer {
    padding: 20px;
    font-size: 10px;
  }
}

/* 小型スマートフォン（〜480px） */
@media (max-width: 480px) {

.device-btn-card-left{
  border-right: none;
}
.device-btn-card{
  text-align: left;
  width: 100%;
}


  .hero-main-title {
    font-size: var(--font-h1)
  }

  .size-80{
     margin: 0px 0px
}

  .point-card .pc-num {
    font-size: 44px;
  }

  .entry-title {
    font-size: 14px;
  }

  .merit-highlight .mh-main {
    font-size: var(--font-h2);
  }

  .network-highlight .nh-main {
        font-size: var(--font-h3);
  }
}

/* merit-sub-heading */
.merit-sub-heading {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 16px;
}

/* howto-list */
.howto-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.howto-list li {
  font-size: var(--font-desc);
  color: var(--color-text);
  line-height: 1.8;
  padding-left: 1.2em;
  position: relative;
}

.howto-list li::before {
  content: "✓";
  color: var(--color-opera);
  position: absolute;
  left: 0;
  font-weight: 900;
}

/* レスポンシブ追加 */
@media (max-width: 768px) {
  .merit-sub-cards {
    flex-direction: column;
    gap: 10px;
  }

  .howto-step {
    flex-direction: column;
  }

  .howto-step-img {
    width: 100%;
    height: 160px;
  }
}