* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif; color: #333; line-height: 1.7; }
img { max-width: 100%; height: auto; display: block; }
strong{font-size:26px;}
p{font-size:18px;}
.mb50{margin-bottom:50px;}
.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 10s ease;
}

.fade-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.intro-section {
  display: flex;
  align-items: center;
  gap: 42px;
}
.circle {
  width: 150px;
  height: 150px;
  background-color: #005392; /* 青色 */
  border-radius: 50%; /* 丸にする */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* 白文字 */
  font-weight: bold;
  text-align: center;
  font-size:22px;  
}
/* リスト */
.intro-section ul {
  list-style: none;
  padding: 0;
}
.point-item {
  padding: 40px 0;
}

/* 最後以外に下線 */
.point-item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}
/* 背景はここに付ける（100%幅） */
.program-section02 {
  background-color: #f7f9fd;
  padding: 56px 0;
}

/* 横幅制限は中のdivに */
.program-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.flow-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.program-steps h3 {
    font-size: 26px;
    color: #005392;
    margin-bottom: 12px;
}
.program-steps p{
	font-size:20px;
	text-align:center;
}
.section-banner-nashi {
    color: #005392;
    text-align: center;
    padding: 10px 20px;
    font-size: 30px;
    font-weight: 700;
}

/* ▼▼▼ スマホ用 ▼▼▼ */
@media (max-width: 768px) {
  .intro-section {
    flex-direction: column; /* 縦並びにする */
    align-items: center;
    text-align: center;
	gap: 12px;
  }
}


/* Header & Hero */
.header-hero { position: relative; }
.header-top { padding: 24px 40px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; background: #fff; }
.logo-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.logo { height: 40px; width: auto; display: block; }
.logo-sub { font-size: 12px; color: #666; margin-top: 4px; }
.catchphrase {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 26px; color: #333; font-weight: 500; /*max-width: 420px;*/
	}
/*
.hero { position: relative; height: auto; background: linear-gradient(135deg, #e8f4ea 0%, #f5f9f6 100%); overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; background: #e0e8e4; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.25); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px; text-align: center; }
.hero-text { font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); max-width: 720px; line-height: 1.6; margin-bottom: 24px; }
*/
.hero {
    position: relative;
    width: 100%;
	z-index: 1;
}

.hero-img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===== テキスト：上に固定 ===== */
/* .hero-text { */
/* position: absolute; */
    /* top: 5%; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* background: rgba(0, 0, 0, 0.2); */
    /* color: #fff; */
    /* padding: 10px 20px; */
    /* border-radius: 10px; */
    /* text-align: center; */
    /* width: 90%; */
    /* max-width: 1000px; */
    /* font-size: 40px; */
    /* text-align: left; */
	/* font-family: 'M PLUS Rounded 1c', sans-serif; */
	    /* font-weight: bold; */
/* } */
.hero-text {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  
  /* ★ backgroundは削除 */
  /* background: rgba(0, 0, 0, 0.2); */

  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  text-align: left;
  width: 90%;
  max-width: 1000px;
  font-size: 40px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: bold;

  overflow: hidden;        /* ← 追加 */
  position: absolute;
  z-index: 1;
}
.hero-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2); /* ← 今使っている背景色 */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s ease;
  z-index: -1;
}

.hero-text.active::before {
  transform: scaleX(1);
}



/* ===== ボタン：下に固定 ===== */
.hero-btn-orange {
    position: absolute;
    bottom: 10%; /* 下の位置調整 */
    left: 50%;
    transform: translateX(-50%);
	min-width: 510px;
	display: inline-block;
	text-align: center;
	background: #e85c2b; color: #fff; padding: 14px 32px; border-radius: 4px; font-weight: 700; text-decoration: none; font-size: 26px; transition: background .2s; 
	overflow: hidden;   /* ← 追加 */
}
/*.hero-btn-orange:hover { background: #d44a2a; }*/
/* キラッと光る部分 */
.hero-btn-orange::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
}

/* ホバー時にアニメーション */
.hero-btn-orange:hover::before {
  animation: shine 0.8s ease forwards;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}


.btn-orange {
  position: relative;
  display: inline-block;
  overflow: hidden;
    min-width: 510px; display: inline-block; background: #e85c2b; color: #fff; padding: 14px 32px; border-radius: 4px; font-weight: 700; text-decoration: none; font-size: 26px; transition: background .2s; }
/*.btn-orange:hover { background: #d44a2a; }*/
/* キラッと光る部分 */
.btn-orange::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
}

/* ホバー時にアニメーション */
.btn-orange:hover::before {
  animation: shine 0.8s ease forwards;
}


.ji-01-img {
    position: relative;
    top: -46px;   /* ← 被せたい分だけ調整 */
    z-index: 99;    /* heroより前に出す */
    width: 100%;
    max-width: 500px;
    height: auto;
}

.intro-block {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    gap: 0px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0px;
    height: 350px;
    align-items: center;
}

/* 表示時 */
.intro-animate {
  opacity: 0;
  transform: translateY(60px); /* 下から大きく移動させる */
  filter: blur(12px);          /* ぼやけを強くして浮遊感 */
  transition:
    opacity 1.4s ease,         /* 長めの時間でフェード */
    transform 1.4s cubic-bezier(.22,1,.36,1), /* ゆるやかに上がる */
    filter 1.4s ease;
}

.intro-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.intro-text h2 { font-size: 26px; color: #333; margin-bottom: 16px; }
.intro-text p { font-size: 15px; color: #555; margin-bottom: 20px; }
.intro-text h3 { font-size: 16px; color: #333; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.intro-text ul {
  list-style: none;
  font-size: 20px;
  color: #555;
}

.intro-text li {
  padding: 6px 0;
  padding-left: 30px;
  position: relative;
  line-height: 1.6; /* 行の高さを安定させる */
}

.intro-text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;                 /* 中央基準 */
  transform: translateY(-50%); /* 本当の中央にする */
  width: 20px;
  height: 20px;
  background-color: #005392;
  border-radius: 50%;
}
.intro-img { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; background: #005392; object-fit: cover; }
.section-banner {
    background: #005392;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 30px;
    font-weight: 700;
}


/* Point section */
.point-section { max-width: 1100px; margin: 0 auto; padding: 56px 24px; }
.point-grid { display: grid; gap: 48px; }
.point-item { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.point-item:nth-child(even) { direction: rtl; }
.point-item:nth-child(even) > * { direction: ltr; }
.point-item h3 {
    font-size: 30px;
    color: #595757;
    margin-bottom: 12px;
}

.point-item .point-img { border-radius: 8px; overflow: hidden; aspect-ratio: 16/10; background: #e8e8e8; object-fit: cover; }
.point-cta { text-align: center; margin-top: 40px; }

/* 導入プログラム・日数例 */
.program-section { max-width: 1100px; margin: 0 auto; padding: 56px 24px; display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.program-steps { display: flex; flex-direction: column; gap: 12px; }
.program-step {
    text-align: center;
    background: #005392;
    color: #fff;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 20px;
    border-radius: 12px;
}
.program-note { font-size: 13px; color: #666; margin-top: 16px; }
.program-images { display: flex; flex-direction: column; gap: 20px; }
.program-images img { border-radius: 8px; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #e8e8e8; }

/* オンライン日本語テスト */
.test-section { max-width: 1100px; margin: 0 auto; padding: 56px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.test-buttons { display: flex; flex-direction: column; gap: 30px; }
.test-btn {
    background: #ffffff;
    color: #005392;
    padding: 16px 16px;
    font-weight: 600;
    font-size: 18px;
    border: 3px solid #005392;
    border-radius: 10px;
    /* cursor: pointer; */
    text-align: center;
    transition: background .2s;
}
.test-btn:hover { background: #f7f9fd; }
.test-note { font-size: 14px; color: #333; margin-top: 16px; }
.test-section img { border-radius: 8px; aspect-ratio: 4/3; object-fit: cover; background: #e8e8e8; }

/* 導入の流れ */
.flow-section {
  background-color: #f7f9fd;
  padding: 56px 0;
}

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 矢印分の余白を多めに */
  position: relative;
}

.flow-step {
  position: relative; /* ::afterを絶対配置する基準 */
  text-align: center;
  background: #005392;
  color: #fff;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 20px;
  border-radius: 12px;
}

/* 枠の下に矢印を出す */
.flow-step::after {
  content: '▼';               /* 矢印 */
  position: absolute;
  bottom: -35px;              /* ボックスの下に配置 */
  left: 50%;                  /* 横中央 */
  transform: translateX(-50%);
  font-size: 24px;
  color: #005392;             /* ボックスと同色か変更可 */
}

/* 最後だけ非表示 */
.flow-step:last-child::after {
  content: '';
}

/* 導入企業様 */
.client-section {
	background-color: #f7f9fd;
    padding: 56px 0; }
.client-section > p { text-align: center; margin-bottom: 40px; font-size: 15px; color: #555; }
.tit-client {
  display: block;               /* 横幅100%に対応 */
  width: 100%;                  /* 横幅いっぱい */
  background-color: #ffffff;    /* 白背景 */
  border: 2px solid #005392;    /* 枠線（企業カラーに変更可能） */
  padding: 16px 0;              /* 上下の余白、左右は100%なので不要 */
  text-align: center;           /* 文字を中央揃え */
  border-radius: 0;             /* 角を丸めない場合は0 */
  font-weight: bold;            /* 太字 */
  font-size: 30px;              /* 文字サイズ調整可 */
  box-sizing: border-box;       /* パディング込みで幅100%に収める */
  color: #005392;
    margin: 50px 0;
}
.client-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.client-item01 {
    display: grid;
    grid-template-columns: 1fr 0.75fr;
    gap: 40px;
    align-items: center;
	padding: 50px 0;
}
.client-item01 strong{
    color: #005392;
}
.client-item02 {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    gap: 40px;
    align-items: center;
}
.client-item02 strong{
    color: #005392;
}

/* テキスト側（吹き出し本体） */
.client-item01 > div:first-child {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    position: relative; /* 三角の基準 */
}

/* 右向き三角 */
.client-item01 > div:first-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;              /* ボックスの外に出す */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid #fff; /* 背景色と同じ */
}

/* テキスト側（右カラム） */
.client-item02 > div:last-child {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    position: relative; /* 三角の基準 */
}

/* 左向き三角 */
.client-item02 > div:last-child::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20px;              /* ボックスの外に出す */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 20px solid #fff; /* 背景色と同じ */
}

/* 画像調整 */
.block-img {
    width: 100%;
    height: auto;
    display: block;
}

/*.client-case { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 40px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }*/
.client-case h3 { font-size: 20px; color: #333; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid #1e5f8a; }
.client-block { margin-bottom: 28px; }
.client-block h4 { font-size: 16px; color: #1e5f8a; margin-bottom: 12px; }
.client-block p { font-size: 14px; color: #555; margin-bottom: 12px; }
.client-block .block-img { width: 100%; max-width: 400px; border-radius: 8px; aspect-ratio: 16/10; object-fit: cover; background: #e8e8e8; margin-top: 8px; }

/* プラン・料金 */
.plan-section { max-width: 1100px; margin: 0 auto; padding: 56px 24px; text-align: center; }
.plan-section p { font-size: 18px; color: #555; margin-top: 16px; }

/* FAQ */
.faq-section {
	background-color: #f7f9fd;
    padding: 56px 0; 	
}
.faq-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.faq-item { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;    padding: 50px 0;}
.faq-section h2 { text-align: center; font-size: 24px; margin-bottom: 32px; color: #333; }
/*.faq-item { margin-bottom: 24px; padding: 24px; background: #f9f9f9; border-radius: 8px; border-left: 4px solid #1e5f8a; }*/
.faq-item q { font-weight: 700; font-size: 15px; color: #333; display: block; margin-bottom: 12px; }
.faq-item p { font-size: 18px; color: #555; }
.faq-cta { text-align: center; margin-top: 32px; }

/* Footer */
footer { background: #005392; color: #fff; text-align: center; padding: 24px; font-size: 18px; }

@media (max-width: 768px) {
  .header-top { padding: 16px 20px;gap: 6px; }
  .intro-block, .point-item, .program-section, .test-section, .flow-section {width: 100%;
         grid-template-columns: 1fr; gap: 16px;}
  .point-item:nth-child(even) { direction: ltr; }
  .hero-text { font-size: 14px; }
  .hero-overlay { padding: 24px; }
.hero-btn-orange {min-width: 280px;font-size: 14px;}
.btn-orange {min-width: 280px;font-size: 14px;}
.catchphrase{font-size: 14px;}
strong{font-size:16px;}
p{font-size:14px;}
.intro-text h2 {font-size: 16px;}
.intro-block{height:auto;padding: 50px 20px 0;}
.intro-text ul {font-size:14px;}
.intro-text li {text-align: left;}
.ji-01-img {top: 0px;width: 60%;margin: 0 auto;}
.section-banner {font-size: 16px;}
.point-item h3 {font-size: 16px;}
.point-section {padding: 0px 40px 24px;}
.point-item {padding: 16px 0;}
.point-grid{gap: 16px;}
.program-inner {grid-template-columns: 1fr;gap: 16px;}
.program-steps h3 {font-size: 16px;}
.program-step {font-size: 16px;}
.program-steps p {font-size: 14px;}
.section-banner-nashi {font-size: 16px;}
.test-section {padding-top:0px;}
.test-btn {font-size: 14px;}
.flow-inner {grid-template-columns: 1fr;gap: 16px;}
.flow-section {padding-top:0px;}
.flow-step {font-size: 14px;}
.client-section {padding-top:0px;}
.tit-client {font-size: 16px;margin: 12px 0;}
.client-item01 {grid-template-columns: 1fr;}
    .client-item01 > div:first-child::after {
        top: auto;      /* 元の中央揃えを解除 */
        right: auto;    /* 元の右位置を解除 */
        bottom: -20px;  /* 下に出す */
        left: 50%;      /* 横中央に配置 */
        transform: translateX(-50%); /* 横中央に調整 */
        border-left: none;          /* 左向き矢印を解除 */
        border-top: 20px solid #fff; /* 下向き矢印 */
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-bottom: none;
        width: 0;
        height: 0;
    }
.client-item02{grid-template-columns: 1fr;}
.client-item02 .text-block {grid-row: 1;}
.client-item02 .img-block {grid-row: 2;}
.client-item02 > div:last-child::before {
        top: auto;      /* 元の中央揃えを解除 */
        right: auto;    /* 元の右位置を解除 */
        bottom: -20px;  /* 下に出す */
        left: 50%;      /* 横中央に配置 */
        transform: translateX(-50%); /* 横中央に調整 */
        border-left: none;          /* 左向き矢印を解除 */
        border-top: 20px solid #fff; /* 下向き矢印 */
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-bottom: none;
        width: 0;
        height: 0;
}
.plan-section p  {font-size: 14px;}
.faq-section {padding-top:0px;}
.faq-item {grid-template-columns: 1fr;padding:0px 0 50px 0;}
.faq-item p {font-size: 14px;}
.faq-cta {margin-top: 0px;}
footer {font-size: 14px;}
.circle {
    width: 100px;
    height: 100px;
    background-color: #005392;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
}
  
}
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 12px 16px;
  font-size: 14px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: none; /* 最初は非表示 */
  z-index: 1000;
}

#backToTop:hover {
  background-color: #555;
}