@charset "UTF-8";

/* PCの写真付きヒーロー：配置を保ち、画面高に合わせて全体を縮小する（js/common.js）。
   2026-11-11 ユーザー指示で採用情報も対象にした。 */
@media (min-width: 1024px) {
  :is(.p-aboutHero, .p-serviceHero, .p-schoolHero, .p-careersHero)[data-hero-fit] {
    height: var(--hero-fit-height);
  }

  :is(.p-aboutHero, .p-serviceHero, .p-schoolHero, .p-careersHero)[data-hero-fit] > [class$="Hero__inner"] {
    width: var(--hero-fit-inner-width);
    height: var(--hero-fit-inner-height);
    transform: translateY(var(--hero-fit-offset)) scale(var(--hero-fit-scale));
    transform-origin: center top;
  }

  [data-hero-fit] > [class$="Hero__wave"] {
    top: var(--hero-fit-wave-top);
    height: var(--hero-fit-wave-height);
  }
}
/* =========================================================
   下層ページ共通
   PCの数値はFigma（1440px幅）の座標を 1/10 にした rem 値
   ========================================================= */

/* フッターの波形の上に見える色（下層ページは最後のセクションがアイボリー） */
:root { --footer-bg: var(--c-ivory); }

body { background: var(--c-ivory); }

/* ---------- ページタイトル（Our Thought / unicoの想い など） ---------- */
.c-pageTitle {
  font-weight: 400;
  color: var(--c-black);
}

.c-pageTitle__en {
  display: block;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.7;
  white-space: nowrap;
}

.c-pageTitle__ja {
  display: block;
  margin-left: -1rem;
  font-size: 9.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--c-red);
}

.c-pageTitle__ja small { font-size: .823em; }

@media (max-width: 1023px) {
  .c-pageTitle__en { font-size: 1.5rem; }

  .c-pageTitle__ja {
    margin-left: -.4rem;
    font-size: 5.6rem;
  }
}

/* ---------- 見出し（アイコン＋見出し） ---------- */
.c-subHeading__icon {
  display: block;
  width: auto;
  height: 2.2rem;
  margin-bottom: 2.4rem;
}

.c-subHeading__title {
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 1.7;
}

@media (max-width: 1023px) {
  .c-subHeading__icon {
    height: 1.8rem;
    margin-bottom: 1.2rem;
  }

  .c-subHeading__title { font-size: 2.4rem; }
}

/* ---------- 点線の波（見出しの下の飾り） ---------- */
.c-dottedWave {
  position: absolute;
  left: calc(50% - 92.1rem);
  width: 182.2rem;
  height: 6.99rem;
  max-width: none;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .c-dottedWave {
    left: calc(50% - 46rem);
    width: 92rem;
    height: 3.5rem;
  }
}

/* ---------- 画面幅いっぱいの写真（波形で切り抜き済み） ---------- */
.c-bleedPhoto {
  position: relative;
  overflow: hidden;
}

.c-bleedPhoto img {
  position: relative;
  left: 50%;
  max-width: none;
  height: auto;
}

/* ---------- タグ ---------- */
.c-tag {
  display: inline-flex;
  align-items: center;
  padding: .4rem 1.4rem;
  font-size: max(1.1rem, 10px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .04em;
  color: var(--c-black);
  white-space: nowrap;
  background: var(--c-cream);
  border-radius: 99.9rem;
}

.c-tag--red {
  color: var(--c-white);
  background: var(--c-red);
}

.c-tag--blue {
  color: var(--c-white);
  background: #46b4eb;
}

/* ---------- 波形・飾り ---------- */
[class*="__wave"],
[class*="__chara"],
[class*="__line"],
[class*="__blob"] {
  max-width: none;
  pointer-events: none;
}

/* ---------- 見出しの文字サイズ（小） ---------- */
.c-subHeading__title--s { font-size: 3.2rem; }

@media (max-width: 1023px) {
  .c-subHeading__title--s { font-size: 2.2rem; }
}

/* ---------- チェックボックス ---------- */
.c-check {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: max(1.5rem, 13px);
  line-height: 1.7;
  cursor: pointer;
}

.c-check input {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin: 0;
  background: var(--c-white) no-repeat center / 1.3rem auto;
  border: 1.5px solid #cfcfcf;
  border-radius: .5rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.c-check input:checked {
  background-color: var(--c-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M1.5 5.5 5 9 11.5 1.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--c-red);
}

.c-check input:focus-visible,
.c-select select:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

/* ---------- セレクト ---------- */
.c-select {
  position: relative;
  display: inline-block;
}

.c-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 1.4rem;
  height: .8rem;
  margin-top: -.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ff3827' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

.c-select select {
  width: 26rem;
  height: 4.2rem;
  padding: 0 4.4rem 0 1.5rem;
  font: inherit;
  font-size: max(1.4rem, 13px);
  color: var(--c-black);
  background: var(--c-white);
  border: 1px solid #e5c7bf;
  border-radius: 1rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.c-select select:invalid,
.c-select select.is-placeholder { color: #8a8a8a; }

/* ---------- 開閉（details） ---------- */
.c-toggleIcon,
details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker { display: none; }

/* =========================================================
   お知らせ・ブログ・お問い合わせ・会社概要で使う部品
   PCの数値はFigma（1440px幅）の座標を 1/10 にした rem 値
   ========================================================= */

/* ---------- ページ見出し（News お知らせ など）：想い・教室と同じく、英字を小さく、日本語を大きく ---------- */
.c-pageHero {
  position: relative;
  padding: 10.2rem 0 1.7rem;
  overflow: hidden;
}

.c-pageHero__band {
  height: 34.3rem;
  background: var(--c-cream);
}

.c-pageHero__inner {
  position: relative;
  width: 144rem;
  height: 100%;
  margin: 0 auto;
}

/* 見出しのまとまりの中心は、英字を大きくしていたときと同じ高さ */
.c-pageHero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 7.9rem;
  margin: 0;
  color: var(--c-red);
  text-align: center;
}

.c-pageHero__en {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}

.c-pageHero__ja {
  font-size: 7.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  white-space: nowrap;
}

.c-pageHero__ja small { font-size: .823em; }

.c-pageHero--black .c-pageHero__ja { font-weight: 900; }

.c-pageHero__chara {
  position: absolute;
  max-width: none;
  height: auto;
  pointer-events: none;
}

.c-pageHero__chara--yellow { top: 6.8rem; left: 18rem; width: 15rem; }
.c-pageHero__chara--green { top: 4.8rem; left: 113rem; width: 14rem; }
.c-pageHero__chara--purple { top: 15.5rem; left: 101rem; width: 11rem; }
.c-pageHero__chara--blue { top: 16.2rem; left: 33rem; width: 12rem; }
.c-pageHero__chara--cyan { top: 19.8rem; left: 127rem; width: 9rem; }
.c-pageHero__chara--cyanB { top: 13.4rem; }
.c-pageHero__chara--pink { top: 21.8rem; left: 12rem; width: 8rem; }

.c-pageHero__wave {
  position: absolute;
  top: 34rem;
  left: 50%;
  width: max(160rem, 111.12%);
  height: 12.2rem;
  max-width: none;
  transform: translateX(-50%);
}

/* ---------- パンくず ---------- */
.c-breadcrumb {
  position: relative;
  z-index: 1;
  font-size: max(1.3rem, 11px);
  line-height: 1.45;
  color: #6b6b6b;
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  min-width: 0;
}

.c-breadcrumb__item {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "＞";
  color: #c9b8aa;
}

.c-breadcrumb__item:last-child {
  flex-shrink: 1;
  min-width: 0;
  max-width: 52rem;
  color: var(--c-black);
}

.c-breadcrumb__item:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-breadcrumb a { transition: opacity .3s var(--ease); }

@media (hover: hover) {
  .c-breadcrumb a:hover { opacity: .6; }
}

/* ---------- ページ送り ---------- */
.c-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

.c-pagination__list {
  display: flex;
  gap: 1.2rem;
}

.c-pagination__page,
.c-pagination__dots,
.c-pagination__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  font-size: max(1.6rem, 14px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  border-radius: 50%;
}

.c-pagination__arrow img { width: 100%; }

.c-pagination__page.is-current {
  color: var(--c-white);
  background: var(--c-red);
}

.c-pagination__arrow.is-disabled { opacity: .4; }

.c-pagination a { transition: background-color .3s var(--ease), opacity .3s var(--ease); }

@media (hover: hover) {
  a.c-pagination__page:hover { background: var(--c-white); }
  a.c-pagination__arrow:hover { opacity: .7; }
}

/* ---------- 「# 名前」タグ ---------- */
.c-hashTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  font-size: max(1.3rem, 11px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .02em;
}

.c-hashTags__mark { color: var(--c-red); }

.c-hashTags a { transition: opacity .3s var(--ease); }

@media (hover: hover) {
  .c-hashTags a:hover { opacity: .6; }
}

/* ---------- ブログ記事カード ---------- */
.c-blogCard__link { display: block; }

.c-blogCard__thumb {
  aspect-ratio: 274 / 183;
  overflow: hidden;
  background: #ece6db;
  border-radius: 1.2rem;
}

.c-blogCard__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.c-blogCard__date {
  display: block;
  margin-top: 1.8rem;
  font-size: max(1.4rem, 12px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--c-red);
}

.c-blogCard__title {
  margin: .6rem 0 0;
  font-size: max(1.6rem, 14px);
  font-weight: 500;
  line-height: 1.7;
  transition: opacity .3s var(--ease);
}

.c-blogCard__tags { margin-top: .6rem; }

@media (hover: hover) {
  .c-blogCard__link:hover .c-blogCard__thumb img { transform: scale(1.04); }
  .c-blogCard__link:hover .c-blogCard__title { opacity: .7; }
}

/* ---------- 記事（お知らせ・ブログの詳細） ---------- */
.c-post {
  width: 94.4rem;
  margin: 0 auto;
  padding-bottom: 7.4rem;
}

.c-post > .c-breadcrumb { margin-top: -5.38rem; }

.c-post__header { margin-top: 3.77rem; }

.c-post__date {
  display: block;
  font-size: max(1.6rem, 13px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--c-red);
}

.c-post__title {
  margin: 1.14rem 0 0;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.6;
}

.c-post__interviewee {
  margin: 1.2rem 0 0;
  font-size: max(1.5rem, 13px);
  font-weight: 700;
}

.c-post__tags {
  gap: 0 2rem;
  margin-top: 1.25rem;
  font-size: max(1.4rem, 12px);
}

.c-post__thumb {
  margin-top: 5.6rem;
  overflow: hidden;
  border-radius: 1.2rem;
}

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

.c-post__header + .c-postContent { margin-top: 6.4rem; }
.c-post__thumb + .c-postContent { margin-top: 5.6rem; }

.c-post__related { margin-top: 9.6rem; }

.c-post__relatedHeading {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--c-red);
}

.c-post__relatedList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.8rem 3.2rem;
  margin-top: 2.5rem;
}

.c-post__relatedList .c-blogCard__thumb { aspect-ratio: 293 / 195; }

.c-post__back {
  display: flex;
  justify-content: center;
  margin-top: 8rem;
}

.c-post__related + .c-post__back { margin-top: 5.6rem; }

/* ---------- 記事の本文（管理画面で入力した内容） ---------- */
.c-postContent {
  font-size: max(1.6rem, 14px);
  line-height: 2;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

.c-postContent > * { margin: 0; }
.c-postContent > * + * { margin-top: 2.4rem; }

.c-postContent h2 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

.c-postContent h3 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0;
}

.c-postContent h4 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.7;
}

.c-postContent > h2:not(:first-child) { margin-top: 6.4rem; }
.c-postContent > h3:not(:first-child) { margin-top: 4.8rem; }
.c-postContent > h4:not(:first-child) { margin-top: 4rem; }

.c-postContent strong,
.c-postContent b { font-weight: 700; }

.c-postContent a {
  font-weight: 500;
  color: var(--c-red);
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (hover: hover) {
  .c-postContent a:hover { text-decoration: none; }
}

.c-postContent ul,
.c-postContent ol { padding: 0; }

.c-postContent li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.8;
  list-style: none;
}

.c-postContent li + li { margin-top: .62rem; }

.c-postContent ul > li::before {
  content: "";
  position: absolute;
  top: calc(.9em - .3rem);
  left: 0;
  width: .6rem;
  height: .6rem;
  background: var(--c-red);
  border-radius: 50%;
}

.c-postContent ol { counter-reset: post-ol; }

.c-postContent ol > li {
  padding-left: 2.4rem;
  counter-increment: post-ol;
}

.c-postContent ol > li::before {
  content: counter(post-ol) ".";
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
  color: var(--c-red);
}

.c-postContent img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 1.2rem;
}

.c-postContent > figure,
.c-postContent > .wp-block-image,
.c-postContent > p:has(> img:only-child) { margin-top: 6.4rem; }

.c-postContent > figure + *,
.c-postContent > .wp-block-image + *,
.c-postContent > p:has(> img:only-child) + * { margin-top: 6.4rem; }

.c-postContent > :first-child { margin-top: 0; }

.c-postContent figcaption {
  margin-top: .8rem;
  font-size: max(1.3rem, 11px);
  line-height: 1.6;
  color: #6b6b6b;
  text-align: center;
}

.c-postContent blockquote {
  padding: 2.4rem 3.2rem;
  background: var(--c-cream);
  border-radius: 1.2rem;
}

.c-postContent table {
  width: 100%;
  border-collapse: collapse;
  font-size: max(1.5rem, 13px);
  line-height: 1.7;
}

.c-postContent th,
.c-postContent td {
  padding: 1.2rem 1.6rem;
  text-align: left;
  border-bottom: 1px solid #e5c7bf;
}

.c-postContent iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* =========================================================
   SP（1023px以下）
   ========================================================= */
@media (max-width: 1023px) {
  .c-pageHero { padding: 6rem 0 1.2rem; }

  .c-pageHero__band { height: 22rem; }

  .c-pageHero__inner { width: auto; }

  .c-pageHero__title { padding-top: 5.2rem; }

  .c-pageHero__en { font-size: 1.6rem; }

  /* 「unicoのブログ」でも下のキャラクターと重ならない大きさ */
  .c-pageHero__ja { font-size: 4.8rem; }

  .c-pageHero__chara--yellow { top: 2.4rem; left: -2rem; width: 8rem; }
  .c-pageHero__chara--blue { top: 13.6rem; left: 2rem; width: 6.4rem; }
  .c-pageHero__chara--pink { top: 12rem; left: -1.6rem; width: 4rem; display: none; }
  .c-pageHero__chara--green { top: 1.6rem; left: auto; right: -1.6rem; width: 7.2rem; }
  .c-pageHero__chara--purple { top: 13.2rem; left: auto; right: 3.2rem; width: 5.6rem; }
  .c-pageHero__chara--cyan { top: 16.4rem; left: auto; right: -1.2rem; width: 4.8rem; display: none; }

  .c-pageHero__wave {
    top: 23.4rem;
    width: 160%;
    height: 5rem;
  }

  .c-breadcrumb { font-size: 1.1rem; }

  .c-breadcrumb__list { gap: .6rem; }
  .c-breadcrumb__item { gap: .6rem; }

  .c-pagination,
  .c-pagination__list { gap: .8rem; }

  .c-pagination__page,
  .c-pagination__dots,
  .c-pagination__arrow {
    width: 4rem;
    height: 4rem;
  }

  .c-post {
    width: auto;
    max-width: 64rem;
    padding: 0 2rem 7rem;
  }

  .c-post > .c-breadcrumb { margin-top: .8rem; }

  .c-post__header { margin-top: 2.4rem; }

  .c-post__title {
    margin-top: .8rem;
    font-size: 2.2rem;
    line-height: 1.55;
  }

  .c-post__tags { gap: 0 1.6rem; }

  .c-post__thumb { margin-top: 3.2rem; }

  .c-post__header + .c-postContent { margin-top: 4rem; }
  .c-post__thumb + .c-postContent { margin-top: 3.2rem; }

  .c-postContent > * + * { margin-top: 2rem; }

  .c-postContent h2 { font-size: 2rem; }
  .c-postContent h3 { font-size: 1.8rem; }
  .c-postContent h4 { font-size: 1.6rem; }

  .c-postContent > h2:not(:first-child) { margin-top: 4.8rem; }
  .c-postContent > h3:not(:first-child) { margin-top: 4rem; }

  .c-postContent > figure,
  .c-postContent > .wp-block-image,
  .c-postContent > p:has(> img:only-child),
  .c-postContent > figure + *,
  .c-postContent > .wp-block-image + *,
  .c-postContent > p:has(> img:only-child) + * { margin-top: 4rem; }

  .c-postContent img { border-radius: .8rem; }

  .c-post__related { margin-top: 7.2rem; }

  .c-post__relatedHeading { font-size: 2rem; }

  .c-post__relatedList {
    grid-template-columns: 1fr;
    gap: 3.2rem;
    margin-top: 2rem;
  }

  .c-post__back { margin-top: 5.6rem; }

  .c-blogCard__date { margin-top: 1.2rem; }
}