@charset "utf-8";
/* =====================================================================
   field-c.net 2026 リニューアル フィールドクルーズについて（about.php）
   - 共通部品（ヘッダ・CTA・フッタ・見出し）は fc2026.css
   - メディアクエリはファイル末尾に集約
   ===================================================================== */

/* ---------------------------------------------------------------------
   オレンジ面（ヒーロー〜特色〜理念）
   背景のロゴ透かしは疑似要素で配置
--------------------------------------------------------------------- */
.ab_orange {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-orange);
}
.ab_orange::before,
.ab_orange::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(240px, 30vw, 520px);
  aspect-ratio: 639 / 626;
  background: url(../img/logo_field-c_01_shade_orange.svg) 0 0 / contain no-repeat;
}
.ab_orange::before { top: calc(var(--gh-full) + clamp(-40px, -2vw, -12px)); left: clamp(-120px, -6vw, -40px); }
.ab_orange::after { right: clamp(-120px, -5vw, -40px); bottom: clamp(-80px, -3vw, -20px); }

/* ---- ヒーロー ---- */
/* オレンジの面はページの最上部から始め、半透明のヘッダの裏に回り込ませる。中身はヘッダの高さ分（--gh-full）下げる */
.ab_orange { margin-top: calc(var(--gh-full) * -1); }
.ab_hero { padding-top: calc(var(--gh-full) + clamp(40px, 5vw, 84px)); color: #fff; }
.ab_hero_inner { width: min(100% - var(--gutter) * 2, 680px); margin-inline: auto; }
.ab_hero_ttl {
  margin-bottom: .8em;
  font-family: var(--ff-head);
  font-size: var(--fs-h2);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.3;
  text-align: center;
}
.ab_hero_inner p { font-size: var(--fs-m); line-height: 2; }
.ab_hero_nav {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 26px);
  margin-top: 1.6em;
}
.ab_hero_nav a {
  display: block;
  min-width: 7.6em;
  padding: .55em 1.2em;
  border: 2px solid #fff;
  color: #fff;
  font-size: var(--fs-l);
  font-weight: bold;
  letter-spacing: .2em;
  text-align: center;
  transition: background-color .2s, color .2s;
}
.ab_hero_photo {
  width: min(92%, 1200px);
  margin: clamp(24px, 3vw, 48px) auto 0;
}

/* ---- 特色：白い帯を skewY で斜めに敷く ---- */
.ab_feature {
  position: relative;
  isolation: isolate;
  /* 写真への食い込みは写真の幅（min(92%, 1200px)）に比例させる。
     写真が 1200px で止まる広い画面でも、斜めの帯が写真のどこを横切るかを変えない */
  margin-top: max(-9vw, -117px);
  padding-block: calc(4.8vw + clamp(24px, 3vw, 48px));
}
.ab_feature::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--c-bg);
  transform: skewY(-5.4deg);
}
.ab_feature_inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "list ttl"
    "free ttl";
  column-gap: clamp(16px, 2vw, 32px);
  width: min(100% - var(--gutter) * 2, 880px);
  margin-inline: auto;
}
.ab_feature_ttl {
  grid-area: ttl;
  display: flex;
  align-items: flex-start;
  gap: .6em;
  padding-left: clamp(10px, 1vw, 16px);
  border-left: 1px solid #e5e5e5;
  color: var(--c-orange);
  font-size: var(--fs-xl);
  letter-spacing: .4em;
  line-height: 1;
  writing-mode: vertical-rl;
}
.ab_feature_ttl span { color: #cccccc; font-size: var(--fs-xs); font-weight: normal; letter-spacing: .3em; }
.ab_feature_list {
  grid-area: list;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-around;
  gap: 1em 1.6em;
}
.ab_feature_list li {
  display: flex;
  align-items: center;
  gap: .7em;
  font-size: var(--fs-l);
  font-weight: bold;
  line-height: 1.35;
}
.ab_feature_list img { flex: none; width: auto; height: 1.9em; }
.ab_feature_list em { color: var(--c-red); }
.ab_feature_free {
  grid-area: free;
  margin-top: 1.2em;
  padding: .4em 1em;
  background: var(--c-yellow);
  color: var(--c-red);
  font-size: clamp(16px, 13.6px + .96vw, 28px);
  font-weight: bold;
  letter-spacing: .04em;
  text-align: center;
}

/* ---- 理念 ---- */
.ab_philo { padding-block: calc(4.7vw + clamp(32px, 4vw, 72px)) var(--sec-pad); color: #fcfcfc; }
.ab_philo_inner { width: min(100% - var(--gutter) * 2, 880px); margin-inline: auto; }
.ab_philo_ttl { border-bottom-color: rgba(255, 255, 255, .35); color: #fcfcfc; }
.ab_philo_ttl span { color: #db7b33; }
.ab_philo_lead {
  margin-block: 1.4em 1.6em;
  font-size: clamp(19px, 15.7px + 1.05vw, 36px);
  font-weight: bold;
  letter-spacing: .1em;
  line-height: 1.6;
}
.ab_philo_inner p:not(.ab_philo_lead) { line-height: 2.1; }
.ab_philo_inner p + p { margin-top: 1.6em; }

/* ---------------------------------------------------------------------
   提供サービス
--------------------------------------------------------------------- */
.ab_service {
  position: relative;
  overflow: hidden;
  padding-block: var(--sec-pad);
  background: var(--c-yellow);
}
.ab_service .wrap { position: relative; z-index: 1; max-width: 1100px; }
.ab_menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4em 2em;
  margin-top: clamp(20px, 2vw, 36px);
  padding: clamp(20px, 2.4vw, 40px) clamp(20px, 3vw, 48px);
  border-radius: var(--radius);
  background: #fff6c8;
}
.ab_menu a { display: flex; align-items: center; gap: .6em; transition: opacity .2s; }
.ab_menu img { flex: none; width: clamp(44px, 3vw + 30px, 76px); }
.ab_menu span {
  font-family: var(--ff-head);
  font-size: clamp(22px, 2.6vw, 42px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.15;
  white-space: nowrap;
}
.ab_menu small {
  display: block;
  margin-top: .2em;
  color: var(--c-text);
  font-family: var(--ff-base);
  font-size: var(--fs-xs);
  font-weight: bold;
  letter-spacing: .2em;
}
.ab_menu .is-karada { color: var(--c-karada); }
.ab_menu .is-seikatsu { color: var(--c-seikatsu); }
.ab_menu .is-shokuji { color: var(--c-shokuji); }
.ab_menu .is-uta { color: var(--c-uta); }
.ab_menu .is-online { color: var(--c-online); }
.ab_menu_more { margin-top: 1.6em; text-align: center; }
.ab_menu_more a {
  display: inline-block;
  padding: 0 1.2em .3em;
  border-bottom: 2px solid var(--c-text-sub);
  color: var(--c-text-sub);
  font-size: var(--fs-l);
  font-weight: bold;
  letter-spacing: .2em;
}

.ab_biz { display: grid; gap: clamp(32px, 3.4vw, 56px); max-width: 860px; margin-top: clamp(40px, 4.4vw, 72px); }
.ab_biz section { padding: .4em 0 .8em clamp(16px, 1.4vw, 24px); border-left: 4px solid var(--c-orange); }
.ab_biz h3 {
  margin-bottom: 1em;
  color: var(--c-orange);
  font-size: clamp(18px, 15.6px + .75vw, 28px);
  letter-spacing: .08em;
  line-height: 1.5;
}
.ab_biz p { font-size: var(--fs-s); line-height: 1.9; }
.ab_biz dl,
.ab_biz_strong { margin-top: 1.2em; font-size: var(--fs-s); font-weight: bold; line-height: 1.7; }
.ab_biz_member dt { margin-top: .6em; }
.ab_biz_member dd { padding-left: 1em; text-indent: -1em; }
.ab_biz_member dd::before { content: "･"; }
.ab_service_img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(240px, 32vw, 600px);
}

/* ---------------------------------------------------------------------
   会社概要
--------------------------------------------------------------------- */
.ab_company { padding-block: var(--sec-pad) 0; }
.ab_company .sec_ttl,
.ab_ceo .sec_ttl { color: var(--c-blue); letter-spacing: .12em; }
.ab_company_list {
  width: min(100% - var(--gutter) * 2, 980px);
  margin: clamp(28px, 3vw, 52px) auto 0;
}
.ab_company_list > div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  column-gap: 1.6em;
}
.ab_company_list > div + div { margin-top: 1.2em; }
.ab_company_list dt {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .3em 1.2em .3em 0;
  border-right: 3px solid var(--c-blue);
  color: var(--c-blue);
  font-size: var(--fs-s);
  letter-spacing: .15em;
}
.ab_company_list dd {
  align-self: center;
  padding-block: .3em;
  font-size: var(--fs-l);
  font-weight: bold;
  letter-spacing: .08em;
  line-height: 1.55;
}
.ab_company_list small { margin-right: .4em; font-size: .7em; font-weight: normal; }
.ab_company_list .is-block { display: block; margin-right: 0; }
.ab_company_officer { display: flex; flex-wrap: wrap; gap: 0 2em; }
.ab_company_officer span:last-child { flex-basis: 100%; }

/* ---------------------------------------------------------------------
   代表
--------------------------------------------------------------------- */
.ab_ceo { padding-block: var(--sec-pad); }
.ab_ceo_body {
  display: grid;
  grid-template-columns: 1fr minmax(0, 380px);
  grid-template-areas:
    "txt  photo"
    "sign photo";
  column-gap: clamp(16px, 2vw, 40px);
  width: min(100% - var(--gutter) * 2, var(--w-mid));
  margin: clamp(28px, 3vw, 52px) auto 0;
}
.ab_ceo_txt { grid-area: txt; max-width: 34em; }
.ab_ceo_txt p { color: var(--c-text); line-height: 2; }
.ab_ceo_sign {
  grid-area: sign;
  display: flex;
  flex-direction: column;
  margin-top: clamp(24px, 2.4vw, 40px);
}
.ab_ceo_sign img { align-self: center; width: clamp(150px, 12vw, 200px); }
.ab_ceo_sign p {
  align-self: flex-end;
  margin: .8em calc(clamp(16px, 2vw, 40px) * -1 - 2.4em) 1em 0;
  color: #000;
  font-size: var(--fs-m);
  line-height: 1.6;
  text-align: right;
  white-space: nowrap;
}
.ab_ceo_photo {
  position: relative;
  grid-area: photo;
  align-self: end;
  width: 100%;
  margin-bottom: calc(var(--fs-l) * -2.3);
}

/* 保有資格・講師歴 */
.ab_career { position: relative; z-index: 1; width: min(100% - var(--gutter) * 2, var(--w-mid)); margin-inline: auto; }
.ab_career_ttl {
  padding: .35em 1.6em;
  border: 1px solid var(--c-blue);
  background: var(--c-blue);
  color: #bbddff;
  font-size: var(--fs-l);
  letter-spacing: .1em;
}
.ab_career_ttl::before { content: "●"; margin-right: .4em; }
.ab_career_ttl--line { margin-top: clamp(28px, 2.6vw, 44px); background: none; color: var(--c-blue); }
.ab_career_ttl--line::before { content: "○"; }
.ab_license {
  display: flex;
  flex-wrap: wrap;
  gap: .7em .8em;
  padding: 1.2em 0 0 clamp(0px, 4vw, 56px);
}
.ab_license li {
  padding: .3em .7em;
  border-radius: 4px;
  background: #bbddff;
  color: #334466;
  font-size: var(--fs-s);
  font-weight: bold;
  letter-spacing: .04em;
  white-space: nowrap;
}
.ab_activity { padding: 1em 0 0 clamp(0px, 4vw, 56px); }
.ab_activity li {
  padding-left: 1.3em;
  text-indent: -1.3em;
  color: var(--c-blue);
  font-size: var(--fs-s);
  font-weight: bold;
  line-height: 1.6;
}
.ab_activity li + li { margin-top: .6em; }
.ab_activity li::before { content: "◦"; display: inline-block; width: 1.3em; text-indent: 0; }

/* =====================================================================
   メディアクエリ
   ===================================================================== */

/* ---- ホバー（マウス環境のみ） ---- */
@media (hover: hover) {
  .ab_hero_nav a:hover { background: #fff; color: var(--c-orange); }
  .ab_menu a:hover { opacity: .65; }
  .ab_menu_more a:hover { border-color: var(--c-orange); color: var(--c-orange); }
}

/* ---- タブレット ---- */
@media (max-width: 1024px) {
  /* ヒーロー：PCと同じく中央に置き、見出しを大きく */
  .ab_hero { padding-top: calc(var(--gh-full) + 7vw); }
  .ab_hero_inner { width: min(100% - 12vw, 820px); }
  .ab_hero_ttl { font-size: min(var(--fs-h2l), 5vw); }

  /* 特色：見出しを横組みで上に、項目は2列のまま */
  .ab_feature_inner {
    grid-template-columns: 1fr;
    grid-template-areas: "ttl" "list" "free";
  }
  .ab_feature_ttl {
    margin-bottom: 1em;
    padding: 0 0 .5em;
    border-left: 0;
    border-bottom: 2px solid #e5e5e5;
    align-items: baseline;
    writing-mode: horizontal-tb;
  }
  .ab_feature_list { justify-content: start; column-gap: 3em; }

  /* 提供サービス：1列、写真は右端に寄せる */
  .ab_menu { grid-template-columns: 1fr; }
  .ab_menu span { font-size: clamp(22px, 4.1vw, 42px); }
  .ab_service_img { width: 35vw; }
  .ab_biz { max-width: 62vw; }

  /* 代表：写真を右端の外へはみ出させる */
  .ab_ceo_body { grid-template-columns: 1fr 34%; }
  .ab_ceo_photo { width: calc(100% + var(--gutter) + 6vw); max-width: none; }
  .ab_ceo_sign img { width: clamp(150px, 20vw, 200px); }
}

/* ---- スマートフォン ---- */
@media (max-width: 767px) {
  /* ヒーロー：見出しを左寄せ・ボタンを縦積み */
  .ab_hero_ttl { font-size: min(32px, 8.2vw); }
  .ab_hero_ttl .nw { display: block; }
  .ab_hero_nav { flex-direction: column; align-items: stretch; padding-inline: 8%; }
  .ab_hero_photo { width: 112%; max-width: none; margin-left: -6%; }

  /* 特色：見出しを横組みで先頭に、項目は1列 */
  .ab_feature { margin-top: -14vw; padding-block: calc(4.8vw + 40px) calc(4.8vw + 32px); }
  .ab_feature_inner {
    grid-template-columns: 1fr;
    grid-template-areas: "ttl" "list" "free";
  }
  .ab_feature_ttl {
    margin-bottom: 1em;
    padding: 0 0 .5em;
    border-left: 0;
    border-bottom: 2px solid #e5e5e5;
    align-items: baseline;
    writing-mode: horizontal-tb;
  }
  .ab_feature_list { grid-template-columns: minmax(0, max-content); justify-content: center; }  /* 項目の塊ごと中央に置き、行頭は揃える */
  .ab_feature_list li { font-size: 19px; }
  .ab_feature_list img { height: 2.1em; }
  .ab_feature_list li:nth-child(3) { order: 4; }
  .ab_feature_free { font-size: min(22px, 5.6vw); line-height: 1.5; }
  .ab_philo { padding-bottom: 80px; }
  .ab_philo_lead { font-size: min(26px, 6.6vw); }

  /* 提供サービス：1列、写真は本文の後ろに */
  .ab_menu { gap: 1em; }
  .ab_menu span { font-size: clamp(20px, 6.5vw, 26px); }
  .ab_biz { max-width: none; }
  .ab_service { padding-bottom: 0; }
  .ab_service_img { position: static; width: 80%; margin: 24px 0 0 auto; }

  /* 会社概要：項目名を上、内容を下に */
  .ab_company_list > div { display: block; }
  .ab_company_list > div + div { margin-top: 1.4em; }
  .ab_company_list dt {
    justify-content: flex-start;
    margin-bottom: .4em;
    padding: 0 0 .2em;
    border-right: 0;
    border-bottom: 2px solid var(--c-blue);
  }
  .ab_company_list small { margin-right: 0; font-size: .85em; letter-spacing: .02em; }
  .ab_company_officer { display: block; }
  .ab_company_officer small { margin-right: .6em; }
  .ab_company_officer span { display: block; }

  /* 代表：本文の下に「書＋署名」と写真を左右に並べる */
  .ab_ceo_body {
    grid-template-columns: minmax(0, 1fr) 42%;
    grid-template-areas:
      "txt  txt"
      "sign photo";
  }
  /* 書と署名は写真横の余白に対して上下中央 */
  .ab_ceo_sign { align-items: center; justify-content: center; margin: 1em 0 0; }
  .ab_ceo_sign img { width: 76%; }
  .ab_ceo_sign p { align-self: center; margin: .6em 0 0; font-size: min(15px, 3.8vw); }
  .ab_ceo_photo { width: calc(100% + 12vw); margin-top: 1em; }
  .ab_license, .ab_activity { padding-left: 0; }
  .ab_license { gap: .6em .5em; }
  .ab_license li { padding-inline: .5em; font-size: min(14px, 3.3vw); letter-spacing: .02em; }
}