@charset "UTF-8";
/* =========================================================
   KAIOH HP リフレッシュ用 追加CSS
   貼り付け先：WordPress管理画面 > 外観 > カスタマイズ > 追加CSS
   ・明朝体 → ヒラギノ角ゴ（Mac/iPhone）/ Noto Sans JP（Windows/Android）
   ・英字見出しは Inter
   ・文字サイズと字間を全体的に縮小、太い枠線を細く
   ・レイアウト（並び順・構成）は変更なし
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&display=swap");

:root {
  --k-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --k-en: "Inter", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --k-text: #222;
  --k-sub: #6b6b6b;
  --k-line: #e3e3e3;
  --k-green: #206553;
  --k-bg-soft: #f6f7f6;
}

/* ---------- ベース ---------- */
body,
input,
select,
textarea,
button {
  font-family: var(--k-font);
  color: var(--k-text);
  -webkit-font-smoothing: antialiased;
}
body {
  letter-spacing: 0.04em;
  line-height: 1.8;
}

/* ---------- ヘッダー（ナビを英語表記に） ---------- */
.l-header__inner {
  height: 5rem;
  max-width: 72rem;
  padding: 0 1.5rem;
}
.l-header__logo {
  width: 8.5rem;
}
.l-header-nav__lists {
  gap: 2.25rem;
}
.l-header-nav__list,
.l-header-nav__link {
  font-size: 0;
  letter-spacing: 0;
}
.l-header-nav__link::before {
  font-family: var(--k-en);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.l-header-nav__list:nth-child(1) .l-header-nav__link::before { content: "Service"; }
.l-header-nav__list:nth-child(2) .l-header-nav__link::before { content: "Works"; }
.l-header-nav__list:nth-child(3) .l-header-nav__link::before { content: "Company"; }
.l-header-nav__list:nth-child(4) .l-header-nav__link::before { content: "Contact"; }
.l-header-nav__list:nth-child(4) .l-header-nav__link {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: var(--k-green);
  color: #fff;
}
.l-header-nav__list:nth-child(4) .l-header-nav__link::after {
  display: none;
}
.l-header-nav__link::after {
  height: 1px;
  bottom: -0.25rem;
}
/* トップページの動画の上ではナビを白文字に（スクロール後は通常色） */
.home .l-header:not(.change) .l-header-nav__list:not(:nth-child(4)) .l-header-nav__link {
  color: #fff;
}
/* 下層ページ上部の黒い太線を削除し、ヘッダーの高さに合わせる */
.l-main {
  border-top: none;
  margin-top: 5rem;
}
.l-main_top {
  margin-top: 0;
}
.l-header-top {
  font-family: var(--k-en);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* スマホメニュー */
.c-hamburger-nav__list,
.c-hamburger-nav__link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ---------- セクション見出し（英語メイン＋日本語サブ） ---------- */
.c-title {
  padding-left: 0;
  max-width: 65rem;
  margin: 0 auto;
}
.c-title span {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0;
  letter-spacing: 0;
  padding-bottom: 0;
}
.c-title span::before {
  position: static;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--k-en);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--k-text);
}
.c-title span::after {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--k-sub);
}
#service .c-title span::before { content: "Service"; }
#service .c-title span::after { content: "事業内容"; }
#works .c-title span::before { content: "Works"; }
#works .c-title span::after { content: "制作実績"; }
#contact .c-title span::before { content: "Contact"; }
#contact .c-title span::after { content: "お問い合わせ"; }
.p-company-mvv .c-title span::before { content: "Philosophy"; }
.p-company-mvv .c-title span::after { content: "理念"; }
.p-company-greeting .c-title span::before { content: "Message"; }
.p-company-greeting .c-title span::after { content: "代表挨拶"; }
.p-company-info .c-title span::before { content: "Company"; }
.p-company-info .c-title span::after { content: "会社概要"; }

/* ---------- ファーストビュー下のキャッチコピー ---------- */
.p-fv {
  border-bottom: none;
}
.p-fv-cope__inner {
  padding-top: 7.5rem;
}
.p-fv-cope__text {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.p-fv-cope__text::before {
  content: "Video Solutions for Your Business";
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--k-en);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--k-green);
}
.p-fv-cope__text .big {
  font-size: inherit;
  color: var(--k-green);
}
.p-fv-cope__text .pozi,
.p-fv-cope__text .pozi03 {
  left: 0;
}

/* トップのYouTube動画を非表示（テンプレートから削除したらこの指定は不要） */
.video-outer {
  display: none;
}

/* ---------- 事業内容 ---------- */
.p-fv-service__inner {
  padding: 6rem 1.5rem 0;
  margin-top: 2rem;
}
.p-fv-service__wrapper {
  gap: 1.5rem;
  margin-top: 3rem;
}
.p-fv-service__column,
.p-fv-service__column_reverse {
  margin: 0;
  border: none;
  border-radius: 0.75rem;
  background: var(--k-bg-soft);
  counter-increment: k-service;
}
.p-fv-service__cont,
.p-fv-service__cont_reverse {
  min-height: 0;
  gap: 3rem;
  padding: 2.5rem;
}
.p-fv-service__img {
  max-width: 24rem;
}
.p-fv-service__img img {
  border-radius: 0.5rem;
}
.p-fv-service__subTitle,
.p-fv-service__subTitle_reverse {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  padding: 0;
  border-bottom: none;
}
.p-fv-service__subTitle br {
  display: none;
}
.p-fv-service__subTitle::before {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--k-en);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--k-green);
}
/* 「採用動画作成」（1番目）は現在提供していないため非表示 */
.p-fv-service__column:nth-child(1) {
  display: none;
}
.p-fv-service__column:nth-child(2) .p-fv-service__subTitle::before { content: "01 — Event & Seminar"; }
.p-fv-service__column:nth-child(3) .p-fv-service__subTitle::before { content: "02 — Training Contents"; }
.p-fv-service__column:nth-child(4) .p-fv-service__subTitle::before { content: "03 — In-house Support"; }
.p-fv-service__column:nth-child(5) .p-fv-service__subTitle::before { content: "04 — Web Production"; }
.p-fv-service__text,
.p-fv-service__text_reverse {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-top: 1rem;
  padding: 0;
  color: #444;
}

/* ---------- 実績紹介 ---------- */
.p-fv-works__inner {
  padding: 6rem 1.5rem 0;
}
.p-fv-works__wrapper {
  max-width: 65rem;
  margin-top: 2.5rem;
  padding: 2.5rem;
  border-radius: 0.75rem;
  background: var(--k-bg-soft);
}
.p-fv-works__text {
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.p-fv-works__text::after {
  display: none;
}
.p-fv-works__link {
  max-width: 15rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 999px;
  font-family: var(--k-en);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.p-fv-works__link::before {
  display: none;
}

/* ---------- お問い合わせ ---------- */
/* 葉っぱの画像は、kaioh-refresh.js の木々アニメーションに置き換え */
.p-fv-contact__item,
.p-fv-contact__item02 {
  display: none;
}
.p-fv-contact__inner {
  padding: 6rem 1.5rem 8rem;
  margin-top: 0;
}
.p-fv-contact__text {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  padding-left: 0;
  margin-top: 2rem;
}
.p-contact-form__inner {
  border: 1px solid var(--k-line);
  border-radius: 0.75rem;
  padding: 3rem;
}
.p-contact-form__name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-contact-form__required {
  font-size: 0.75rem;
  color: #c0392b;
}
.p-contact-form__radioBox label {
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.p-contact-form__inputBox input,
.p-contact-form__selectBox,
.p-contact-form__selectBox select,
.p-contact-form__textareaBox textarea {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  border: 1px solid #d5d8d8;
  border-radius: 0.375rem;
  background: #fff;
}
.p-contact-form__inputBox input,
.p-contact-form__selectBox,
.p-contact-form__selectBox select {
  height: 2.75rem;
  max-width: 24rem;
}
.p-contact-form__selectBox select {
  border: none;
}
.p-contact-form__selectBox::after {
  top: 50%;
  margin-top: -0.25rem;
  border-width: 0.5rem 0.3125rem 0 0.3125rem;
}
.p-contact-form__textareaBox textarea {
  height: 10rem;
}
.p-contact-form__button {
  height: 3.5rem;
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
}
.p-contact-form__button::before {
  display: none;
}
.p-contact-form__button input {
  color: #fff;
}

/* ---------- フッター ---------- */
.l-footer__link,
.l-footer__small {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* ---------- 会社概要ページ ---------- */
.p-company-mvv__inner,
.p-company-greeting__inner,
.p-company-info__inner {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.p-company-mvv__box {
  border: 1px solid var(--k-line);
  box-shadow: none;
}
.p-company-mvv__subTitle {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.p-company-mvv__subTitle span {
  font-family: var(--k-en);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-green);
  margin-top: 0.75rem;
}
.p-company-mvv__text {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
}
.p-company-greeting__inner {
  padding-top: 7.5rem;
}
.p-company-greeting__wrapper {
  margin-top: 3rem;
  padding: 0;
  border: none;
}
.p-company-greeting__column {
  border: none;
  border-radius: 0.75rem;
  background: var(--k-bg-soft);
  padding: 3.5rem;
}
.p-company-greeting__img {
  box-shadow: none;
}
.p-company-greeting__img img {
  border-radius: 0.5rem;
}
.p-company-greeting__name {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-top: 2.5rem;
}
.p-company-greeting__name span {
  font-size: 1.5rem;
  font-weight: 700;
}
.p-company-greeting__text {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: 0.04em;
  margin-top: 2rem;
}
.p-company-info__tableGroup {
  border-bottom: 1px solid var(--k-line);
  padding: 1.5rem 0;
}
.p-company-info__tableGroup:first-of-type {
  border-top: 1px solid var(--k-line);
  padding-top: 1.5rem;
}
.p-company-info__tableTitle {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding-left: 1rem;
}
.p-company-info__tableText {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* =========================================================
   スマホ（767px以下）
   ========================================================= */
@media screen and (max-width: 767px) {
  .l-header__inner {
    height: 4rem;
    padding: 0 1rem;
  }
  .l-header__logo {
    width: 6.5rem;
  }
  .l-main {
    margin-top: 4rem;
  }
  .l-main_top {
    margin-top: 0;
  }
  .c-title span::before {
    font-size: 2rem;
  }
  .c-title span::after {
    font-size: 0.75rem;
  }
  .p-fv-cope__inner {
    padding: 4.5rem 1.25rem 0;
  }
  .p-fv-cope__text {
    font-size: 1.5rem;
    letter-spacing: 0.04em;
  }
  .p-fv-cope__text::before {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .p-fv-service__inner,
  .p-fv-works__inner,
  .p-fv-contact__inner {
    padding: 4rem 1.25rem 0;
  }
  .p-fv-contact__inner {
    padding-bottom: 5rem;
  }
  .p-fv-service__wrapper {
    padding: 0;
    margin-top: 2rem;
    gap: 1rem;
  }
  .p-fv-service__cont,
  .p-fv-service__cont_reverse {
    gap: 1.25rem;
    padding: 1.25rem 1.25rem 1.75rem;
  }
  .p-fv-service__img {
    padding: 0;
  }
  .p-fv-service__subTitle,
  .p-fv-service__subTitle_reverse {
    font-size: 1.25rem;
    margin: 0;
    padding: 0;
  }
  .p-fv-service__text,
  .p-fv-service__text_reverse {
    font-size: 0.875rem;
    line-height: 1.9;
    padding: 0;
  }
  .p-fv-works__wrapper {
    max-width: 100%;
    padding: 1.75rem 1.25rem;
    text-align: center;
  }
  .p-fv-works__text {
    font-size: 0.875rem;
  }
  .p-fv-works__link {
    max-width: 100%;
    height: 3.25rem;
    margin: 1rem 0 0;
    font-size: 0.8125rem;
  }
  .p-fv-works__link::after {
    display: none;
  }
  .p-fv-contact__text {
    font-size: 0.8125rem;
  }
  .p-contact-form {
    padding: 0;
  }
  .p-contact-form__inner {
    padding: 1.5rem 1.25rem 2.5rem;
  }
  .p-contact-form__name {
    font-size: 0.8125rem;
  }
  .p-contact-form__inputBox,
  .p-contact-form__textareaBox {
    padding: 0;
    margin-top: 0.375rem;
  }
  .p-contact-form__selectBox {
    margin: 0.375rem 0 0;
  }
  .p-contact-form__inputBox input,
  .p-contact-form__selectBox,
  .p-contact-form__selectBox select {
    max-width: 100%;
    height: 2.75rem;
  }
  .p-contact-form__radioBox label {
    font-size: 0.8125rem;
  }
  .l-footer__link,
  .l-footer__small {
    font-size: 0.6875rem;
  }
  .p-company-mvv__subTitle {
    font-size: 1.5rem;
  }
  .p-company-greeting__column {
    padding: 1.5rem 1.25rem 2rem;
  }
  .p-company-greeting__name span {
    font-size: 1.25rem;
  }
  .p-company-greeting__text {
    font-size: 0.875rem;
  }
  .p-company-info__tableGroup {
    padding: 1.25rem 0.25rem;
  }
  .p-company-info__tableTitle {
    padding-left: 0;
    font-size: 0.8125rem;
    color: var(--k-sub);
  }
  .p-company-info__tableText {
    font-size: 0.9375rem;
  }
}

/* =========================================================
   アニメーション（kaioh-refresh.js とセット）
   JSが動かない環境では .k-js が付かないので、通常表示のまま
   ========================================================= */

/* ---------- 事業内容：スクロールで横からスライドイン ---------- */
/* 隠すときは一瞬で、現れるときだけアニメーションさせる */
.k-js .p-fv-service__column {
  opacity: 0;
  transform: translateX(-4rem);
}
.k-js .p-fv-service__column_reverse {
  transform: translateX(4rem);
}
.k-js .p-fv-service__column .p-fv-service__group {
  opacity: 0;
  transform: translateY(1rem);
}
.k-js .p-fv-service__column.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.k-js .p-fv-service__column.is-in .p-fv-service__group {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease 0.35s, transform 0.8s ease 0.35s;
}

/* ---------- お問い合わせ：木漏れ日・風に揺れる木々・舞う葉 ---------- */
.p-fv-contact {
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f5faef 40%, #e6f0da 100%);
}
.p-fv-contact__inner {
  z-index: 1;
}
.k-forest {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.k-defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* 右上から差し込む日差し */
.k-sun {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 75%;
  height: 85%;
  background: radial-gradient(closest-side, rgba(255, 243, 196, 0.85), rgba(255, 243, 196, 0) 100%);
  animation: k-breathe 9s ease-in-out infinite;
}
.k-rays span {
  position: absolute;
  top: -10%;
  right: 12%;
  width: 7rem;
  height: 130%;
  background: linear-gradient(180deg, rgba(255, 246, 215, 0.6), rgba(255, 246, 215, 0) 75%);
  transform-origin: top center;
  transform: rotate(28deg);
  animation: k-ray 11s ease-in-out infinite;
}
.k-rays span:nth-child(2) {
  right: 26%;
  width: 4rem;
  animation-delay: -4s;
}
.k-rays span:nth-child(3) {
  right: 40%;
  width: 9rem;
  opacity: 0.6;
  animation-delay: -7s;
}

/* 木漏れ日のボケ */
.k-bokeh span {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 252, 214, 0.55) 0%, rgba(240, 249, 200, 0.4) 62%, rgba(250, 255, 222, 0.7) 68%, rgba(240, 249, 200, 0) 72%);
  animation: k-bokeh var(--d) ease-in-out var(--dl) infinite;
}
.k-bokeh span:nth-child(3n) {
  background: radial-gradient(circle, rgba(196, 228, 150, 0.4) 0%, rgba(196, 228, 150, 0.28) 62%, rgba(214, 238, 170, 0.5) 68%, rgba(196, 228, 150, 0) 72%);
}

/* 地面 */
.k-ground {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -3rem;
  height: 8rem;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 0%, #cfe2bf 0%, #dde9cf 60%, rgba(230, 240, 218, 0) 100%);
}

/* 木（根元を支点にゆっくり揺れ、枝先ほど大きく揺れる） */
.k-tree {
  position: absolute;
  bottom: 0;
  width: calc(var(--h) * 30rem);
  height: calc(var(--h) * 36rem);
  transform-origin: 50% 100%;
  animation: k-sway var(--sd) ease-in-out var(--sdl) infinite;
  will-change: transform;
}
.k-tree--back {
  opacity: 0.6;
}
.k-layer {
  position: absolute;
  inset: 0;
  transform-origin: var(--ox) var(--oy);
  animation: k-branch var(--d) ease-in-out var(--dl) infinite;
  will-change: transform;
}
.k-layer--trunk {
  animation: none;
  will-change: auto;
}
.k-tree svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.k-bark {
  fill: none;
  stroke: #6b5846;
  stroke-linecap: round;
}
.k-bark-hi {
  fill: none;
  stroke: #b09b80;
  stroke-linecap: round;
  opacity: 0.55;
}

/* 風に乗って舞う葉 */
.k-wind {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 600px;
}
.k-fly {
  position: absolute;
  left: 0;
  width: 3.5rem;
  height: 2rem;
  animation: k-fly-x var(--dur) linear var(--dl) infinite;
  will-change: transform;
}
.k-fly-y {
  display: block;
  width: 100%;
  height: 100%;
  animation: k-fly-y var(--yd) ease-in-out var(--dl) infinite alternate;
}
.k-fly svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: k-tumble var(--td) linear infinite;
}

@keyframes k-sway {
  0%, 100% { transform: rotate(-0.6deg); }
  50% { transform: rotate(0.9deg); }
}
@keyframes k-branch {
  0%, 100% { transform: rotate(calc(var(--a) * -1)); }
  50% { transform: rotate(var(--a)); }
}
@keyframes k-bokeh {
  0%, 100% { opacity: 0.35; transform: translate(0, 0) scale(0.92); }
  50% { opacity: 1; transform: translate(14px, -8px) scale(1.04); }
}
@keyframes k-breathe {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
@keyframes k-ray {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}
@keyframes k-fly-x {
  0% { transform: translate(-12vw, 0); opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { transform: translate(112vw, var(--rise)); opacity: 0; }
}
@keyframes k-fly-y {
  from { transform: translateY(calc(var(--amp) * -1)); }
  to { transform: translateY(var(--amp)); }
}
@keyframes k-tumble {
  from { transform: scale(var(--sc)) rotate3d(var(--ax), 0deg); }
  to { transform: scale(var(--sc)) rotate3d(var(--ax), 360deg); }
}

@media screen and (max-width: 767px) {
  .k-js .p-fv-service__column {
    transform: translateX(-2rem);
  }
  .k-js .p-fv-service__column_reverse {
    transform: translateX(2rem);
  }
  .k-tree {
    width: calc(var(--h) * 18rem);
    height: calc(var(--h) * 21.6rem);
  }
  .k-rays span {
    width: 4rem;
  }
  .k-fly {
    width: 2rem;
    height: 1.2rem;
  }
}

/* 動きを減らす設定の人には、アニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .k-tree,
  .k-layer,
  .k-bokeh span,
  .k-sun,
  .k-rays span {
    animation: none;
  }
}