@charset "UTF-8";
/* =====================================================================
   コラム（下層ページ用 / ショートコード [professional_column]）
   ---------------------------------------------------------------------
   2026-09-25 海外研修のお知らせの上に、トップと同じコラムを入れるため作成。
   値はすべて renewal/css/pages/front.css からの写し
     1. 共通パーツ（.front-h2 / .front-tag）
     4. スライダー共通（.front-slider）
     7. コラム・10-4. コラム（PC）・12. 調整ログ 2026-08-30 コラム
   ▼トップ側を直したら、こちらも合わせること。
   ▼front.css の :root の色・書体はここでは .rnw-column に置く
     （下層ページの :root を汚さないため）。
   ▼front.css の「0. ルート・リセット」は .front 配下だけに効くので、
     同じ打ち消しを .rnw-column 配下に持たせる。
   ===================================================================== */

.rnw-column {
  --front-bg-column:   #EEE8DE;  /* common/bg2（コラムセクションの背景） */
  --front-font-mincho: 'Yu Mincho Pr6N', 'YuMincho', 'Yu Mincho', '游明朝', 'Noto Serif JP', serif;
  --front-font-en:     'Lusitana', serif;

  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
}

.rnw-column *,
.rnw-column *::before,
.rnw-column *::after { box-sizing: border-box; }

:where(.rnw-column) :is(h2, p, ul, li) {
  margin: 0;
  padding: 0;
}
:where(.rnw-column) ul { list-style: none; }


/* --- 見出し（Figma コンポーネント title/h2） --- */
.rnw-column .front-h2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  font-family: var(--rnw-font-jp);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--rnw-text);
}

.rnw-column .front-h2__en {
  color: var(--rnw-main);
  font-family: var(--front-font-en);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-column .front-h2__jp {
  color: var(--rnw-text);
  font-family: var(--front-font-mincho);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

/* --- タグ（Figma コンポーネント tag） --- */
.rnw-column .front-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rnw-white);
  border: 0.745px solid var(--rnw-main);
  color: var(--rnw-main);
  font-family: var(--rnw-font-jp);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.rnw-column .front-tag--square {
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
}

.rnw-column .front-tag--pill {
  padding: 12px 19.926px;
  border-radius: 55.96px;
  font-size: 14px;
}

.rnw-column .front-tag--pill-on {
  background-color: var(--rnw-main);
  border-color: var(--rnw-white);
  color: var(--rnw-white);
}


/* --- スライダー --- */
.rnw-column .front-slider {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.rnw-column .front-slider__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 239px;
  height: 24px;
  margin-inline: auto;
}

.rnw-column .front-slider__btn {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.rnw-column .front-slider__btn img { display: block; width: 24px; height: 24px; }
.rnw-column .front-slider__btn--prev img { transform: rotate(180deg); }
.rnw-column .front-slider__btn[disabled] { opacity: 0.5; cursor: default; }

.rnw-column .front-slider__bar {
  position: relative;
  width: 160px;
  height: 1px;
  background-color: var(--rnw-main);
}

.rnw-column .front-slider__bar-thumb {
  position: absolute;
  top: -1px;
  left: 0;
  width: 40.8%;
  height: 3px;
  border-radius: 10px;
  background-color: var(--rnw-main);
}

.rnw-column .front-slider__track {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: calc(100% + 32px);
  margin-inline: -16px;
  padding-inline: 16px;
  padding-block: 24px 48px;
  margin-block: -24px -48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rnw-column .front-slider__track::-webkit-scrollbar { display: none; }

.rnw-column .front-slider__track--wide {
  width: calc(100% + 48px);
  margin-inline: -24px;
}


/* --- コラム本体 --- */
.rnw-column.front-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 80px 24px;
  background-color: var(--front-bg-column);
}

.rnw-column .front-column__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.rnw-column .front-column__filter button {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.rnw-column .front-ccard {
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
  scroll-snap-align: start;
  box-shadow: 0 4px 56px rgba(0, 0, 0, 0.08);
  color: inherit;
  text-decoration: none;
}

.rnw-column .front-ccard[hidden] { display: none; }

.rnw-column .front-ccard__ph {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.rnw-column .front-ccard__ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rnw-column .front-ccard__tag {
  position: absolute;
  top: 143.56px;
  left: 10.988px;
  padding: 12px 19.926px;
}

.rnw-column .front-ccard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 16px;
  background-color: var(--rnw-white);
}

.rnw-column .front-ccard__text {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: justify;
}


/* --- PC（front.css 10節・10-4） --- */
@media only screen and (min-width: 768px) {
  .rnw-column .front-h2__en { font-size: 24px; }
  .rnw-column .front-h2__jp { font-size: 42px; }

  .rnw-column .front-tag--square { font-size: 18px; }
  .rnw-column .front-tag--pill   { font-size: 18px; }

  .rnw-column.front-column {
    align-items: center;
    gap: 56px;
    padding: 80px;
  }

  .rnw-column > .front-h2 { text-align: center; }

  .rnw-column .front-column__filter {
    justify-content: center;
    width: 980px;
    max-width: 100%;
  }

  .rnw-column .front-slider {
    width: 980px;
    max-width: 100%;
  }

  .rnw-column .front-slider__ctrl { display: none; }

  .rnw-column .front-slider__track {
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    margin-block: 0;
    padding-block: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .rnw-column .front-ccard { flex: 0 0 calc((100% - 32px) / 3); }

  .rnw-column .front-ccard__body { gap: 12px; padding: 16px; }
  .rnw-column .front-ccard__text { font-size: 16px; }
}

/* 768〜1024は2列（front.css 12節 2026-08-30） */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-column .front-ccard { flex: 0 0 calc((100% - 16px) / 2); }
}