@charset "UTF-8";
/* ==========================================================================
   オリジナルスタイルの定義
   - SWELL前提。htmlのfont-size は --swl-fz--root（14px〜16pxのリキッド）
       （〜1024px：1rem = 14px / 1440px〜：1rem = 16px / 間はリキッド）
   - モバイルファースト。PCは min-width: 960px（SWELLのPC幅）
   - メディアクエリは各セレクタの直後に記述
   ========================================================================== */

/* カスタム変数 */
:root {
  --swl-fz--root: clamp(14px, 9.0769px + 0.4808vw, 16px) !important; /* ルートフォントをリキッドに */
  --swl-font_family: 'Inter', sans-serif; /* SWELLの基本設定GPUに合わせる */
  --wp--preset--color--black: #555555; /* テキスト・SWELLのGPUに合わせる */
  --color_text: #555555; /* SWELLの基本設定のGPUに合わせる */
  --color_main: #abc622; /* SWELLの基本設定のGPUに合わせる */
  --color_deep01: #9d3b9e; /* SWELLのエディター設定のGPUに合わせる */
  --color_deep03: #4b134b;
  --color_deep04: #dc3a6b;
  --color_pale01: #f8f7f8; /* SWELLのエディター設定背景グレー（Why Japan／Mentors）*/
  --color_pale02: #fff7ff /* 背景の薄ピンク（Schedule）*/;
  --gradient-fv-bg: linear-gradient(135deg, #ffffff 0%, #f5eff7 50%, #eedcf2 100%); /* FV背景（薄紫） */
  --gradient-fv-title: linear-gradient(90deg, var(--color_deep03) 0%, var(--color_deep01) 50%, #c153b4 100%); /* FVタイトル文字 */
  --color-purple-mid: #643a64;
  --color-border: #e0e0e0;
  --color-card-border: #ebd9ea;
  --shadow-card: 0 4px 16px rgba(69, 31, 69, 0.08);
}

body {
  letter-spacing: 0em;
  font-family: var(--swl-font_family);
  font-weight: 400;
}

p {
  letter-spacing: 0;
  font-family: var(--swl-font_family);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.03em;
  font-size: 1rem;
}

/* フルワイドブロックの余計なマージンを削除
***************************************************************/
.swell-block-fullWide + .swell-block-fullWide {
  margin-top: 0 !important;
}

.post_content > .swell-block-fullWide {
  margin-bottom: 0 !important;
}

/* SWELLのデフォルトの「l-content」の余計な下マージンを削除
***************************************************************/
.home .l-content {
  margin: 0 auto;
}

.l-content:has(.swell-block-fullWide) {
  padding: 0;
}

.l-content {
  margin: 0 auto;
}

/* SWELLのデフォルトのTOPページFVエリアの余白を削除
***************************************************************/
.top #content {
  padding-top: 0;
}

/* SWELLのデフォルトのパンくずの背景色を消す
***************************************************************/
.-body-solid .p-breadcrumb.-bg-on {
  box-shadow: none;
}
.p-breadcrumb.-bg-on {
  background: transparent !important;
}

/* SWELLのデフォルトのスクロールヒントが隠れてしまうのを調整
***************************************************************/
.c-scrollHint {
  margin-right: 0.5rem;
}

/* デバイス制限
***************************************************************/
@media (min-width: 768px) {
  .u-sp {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .u-pc {
    display: none !important;
  }
}

/* 英語の小文字を大文字にする（SEO対策）
***************************************************************/
.u-text-uppercase {
  text-transform: uppercase;
}

/* オリジナルH2見出し（共通）
※オリジナルのクラス「c-section-title」を付与
***************************************************************/
.post_content h2.is-style-section_ttl.c-section-title {
  font-size: calc(28 / 14 * 1rem);
  line-height: 1.6;
  text-transform: uppercase;
  margin: 0 0 3rem;
  letter-spacing: 0.05em;
  color: #333333;

  @media (min-width: 960px) {
    font-size: calc(40 / 16 * 1rem);
  }
}

.post_content h2.c-section-title::after {
  content: '';
  display: block;
  position: static;
  width: calc(60 / 14 * 1rem);
  height: 2px;
  margin: 1.5rem auto 0;
  background: var(--color_deep01);
  border: 0;
  transform: none;
}

/* 白いテキストバージョン */
.post_content h2.is-style-section_ttl.c-section-title.c-section-title--white {
  color: #fff;
}
.post_content h2.c-section-title.c-section-title--white::after {
  content: '';
  display: block;
  position: static;
  width: calc(60 / 14 * 1rem);
  height: 2px;
  margin: 1.5rem auto 0;
  background: #fff;
  border: 0;
  transform: none;
}

/* オリジナルH3見出し（共通セクションリード文）
※オリジナルのクラス「c-lead-title」を付与
***************************************************************/
.post_content h3.is-style-section_ttl.c-lead-title {
  font-size: calc(22 / 14 * 1rem);
  line-height: 1.6;
  margin: 0 0 2rem;
  letter-spacing: 0.03em;
  color: #333333;

  @media (min-width: 960px) {
    font-size: calc(28 / 16 * 1rem);
  }
}

/* ボタンレイアウト（共通）
※SWELLボタンをカスタム「c-original-button」を付与
***************************************************************/
.c-original-button .swell-block-button__link {
  white-space: nowrap;
  text-transform: uppercase !important;
}

/* カードコンポーネントH3タイトル（Program／WhyJapan／AREA）※c-card_badgeはGPUに直接記載
***************************************************************/
.c-card {
  box-shadow: var(--shadow-card);
  border-radius: 12px;
  padding: 1.5rem;
  background: #fff;
}

.post_content h3.is-style-section_ttl.c-card__title {
  font-size: calc(20 / 14 * 1rem);
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.01em;

  @media (min-width: 960px) {
    font-size: calc(26 / 16 * 1rem);
  }
}

/* スクロール監視アニメーション
***************************************************************/
/*下からふわっふわっと（Stagger）アニメーション */
.stagger-item {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;

  .js-stagger-group.is-in-view & {
    opacity: 1;
    transform: translateY(0);
  }
}

/*下からふわっとアニメーション */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s,
    transform 1s;

  &.is-in-view {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 「視差効果を減らす」設定のユーザーにはアニメーションせず最初から表示 */
@media (prefers-reduced-motion: reduce) {
  .stagger-item,
  .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ヘッダーナビ
***************************************************************/
/* 文字の太さ・サイズ */
.c-gnav > .menu-item > a {
  padding: 0px 14px;
}

.c-gnav > .menu-item > a .ttl {
  font-weight: 500;
  text-transform: uppercase;
}

/* ヘッダーナビカスタム（ヘッダーはinner幅に合わせず拡大させる） */
.l-header__inner.l-container,
.l-fixHeader__inner.l-container {
  max-width: 100%;
  /* padding-right: 0; 右側はボタンべたづけなど */
}

/* ドロワー
***************************************************************/
/* ドロワーメニューの文字の太さ・サイズ・boforeアイコン  */

.c-spnav.c-listMenu a {
  padding: 1em 1em 1em 1.5em;
  font-weight: 500;
  text-transform: uppercase;

  &::before {
    color: var(--color_main);
  }
}

/* ドロワーメニューの「MENU」タイトルを非表示にしたい場合 */
.c-widget__title.-spmenu {
  /*display: none;*/
}

/* ドロワーメニューのボディの上部paddingを調整（上部余白が「0」のため） */
.p-spMenu__body {
  padding-top: 4rem;
}

/* ファーストビュー
***************************************************************/
.p-fv {
  background-image: var(--gradient-fv-bg);
  color: var(--color_text);
}

.p-fv .l-container {
  max-width: calc(1400px + var(--swl-pad_container, 0px) * 2) !important;
}

.p-fv__label {
  display: inline-block;
  width: fit-content;
  padding: 0.5rem 2rem;
  border-radius: 999px;
  background-image: linear-gradient(135deg, var(--color_deep03) 0%, #a22c86 55%, #c254b5 100%); /* 濃い紫グラデ */
  color: #ffffff;
  font-size: calc(12 / 14 * 1rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@media (min-width: 960px) {
  .p-fv__label {
    font-size: 1rem;
  }
}

.p-fv__eyebrow {
  color: var(--color_deep01);
  font-size: calc(18 / 14 * 1rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
@media (min-width: 960px) {
  .p-fv__eyebrow {
    font-size: calc(28 / 16 * 1rem);
  }
}

.post_content h2.p-fv__title {
  margin: 0 0 1.5rem;
  color: var(--color_deep03);
  font-size: min(calc(32 / 390 * 100vw), 64px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em; /* 「The Global Gateway」を1行に収めるため */
}

@media (min-width: 960px) {
  .post_content h2.p-fv__title {
    font-size: min(calc(64 / 1440 * 100vw), 76px);
  }
}

/* タイトルのグラデーション文字
   - JSで行分割したあとは、動く行（.p-fv__title-inner）にグラデーションを付ける
     （親の見出しに付けると、動いている間も文字が元の位置に表示されてしまうため）
   - JSが動かないときは見出し自体に付ける */
.post_content h2.p-fv__title:not(:has(.p-fv__title-inner)),
.p-fv__title-inner {
  background-image: var(--gradient-fv-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.p-fv__lead {
  font-size: calc(16rem / 14);
  line-height: 1.7;
}
@media (min-width: 960px) {
  .p-fv__lead {
    font-size: 1.25rem; /* 20px */
  }
}

.post_content ul.p-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.post_content ul.p-fv__tags > li {
  margin: 0;
  padding: 0.375rem 0.875rem;
  background: #ffffff;
  border: 1px solid rgba(157, 59, 158, 0.3);
  color: var(--color_deep01);
  border-radius: 6px;
  font-size: calc(13rem / 14);
  letter-spacing: 0.03em;
  line-height: 1.5;
}
@media (min-width: 960px) {
  .post_content ul.p-fv__tags > li {
    font-size: 0.875rem; /* 14px */
  }
}

.post_content ul.p-fv__tags > li::before {
  content: none;
}

.p-fv__buttons {
  gap: 1rem;
  margin-bottom: 1rem;
}

.p-fv__note {
  color: #777777;
  font-size: calc(12rem / 14); /* SP 12px */
}
@media (min-width: 960px) {
}

.p-fv__visual {
  margin-top: 2.5rem;
  text-align: center;
}
@media (min-width: 960px) {
  .p-fv__visual {
    margin-top: 0;
  }
}

.p-fv__visual figcaption {
  margin-top: 1.5rem;
  color: var(--color_deep01);
  font-size: calc(12rem / 14); /* SP 12px */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}
@media (min-width: 960px) {
  .p-fv__visual figcaption {
    font-size: 0.85rem; /* 12px */
  }
}

/* FVアニメーション（読み込み時）
   ①ラベル・小見出し → ②タイトルを1行ずつせり上げ → ③それ以外
   - 隠す指定は .js-enabled（functions.phpでhead内に付与）の下にだけ書く
   - タイトルの行分割・開始は script.js（.js-text-reveal の <br> を span に変換）
***************************************************************/
.p-fv {
  --fv-fade-duration: 0.8s; /* ①③のふわっと */
  --fv-line-start: 0.4s; /* ②の開始 */
  --fv-line-duration: 0.8s; /* ②の1行あたり */
  --fv-line-stagger: 0.15s; /* ②の行ごとのずれ */
  --fv-after-delay: calc(var(--fv-line-start) + var(--fv-line-stagger) * (var(--line-count, 1) - 1) + var(--fv-line-duration)); /* ③の開始 = ②の最終行が終わる時間（--line-count はJSで付与） */
}

/* 行ごとの「見えない線」 */
.p-fv__title-line {
  display: block;
  overflow: hidden;
}

.p-fv__title-inner {
  display: block;
}

/* ①ラベル・小見出し */
.js-enabled .p-fv__label,
.js-enabled .p-fv__eyebrow {
  opacity: 0;
  transition: opacity var(--fv-fade-duration) ease;
}

.js-enabled .p-fv.is-loaded .p-fv__label,
.js-enabled .p-fv.is-loaded .p-fv__eyebrow {
  opacity: 1;
}

/* ②タイトル（1行ずつ） */
.js-enabled .p-fv__title-inner {
  transform: translateY(120%);
  transition: transform var(--fv-line-duration) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--fv-line-start) + var(--fv-line-stagger) * var(--line-index, 0));
}

.js-enabled .p-fv.is-loaded .p-fv__title-inner {
  transform: translateY(0);
}

/* ③タイトルより後ろの要素・ほかのカラム（画像など） */
.js-enabled .p-fv__title ~ *,
.js-enabled .p-fv .swell-block-column:not(:has(.js-text-reveal)) {
  opacity: 0;
  transition: opacity var(--fv-fade-duration) ease;
  transition-delay: var(--fv-after-delay);
}

.js-enabled .p-fv.is-loaded .p-fv__title ~ *,
.js-enabled .p-fv.is-loaded .swell-block-column:not(:has(.js-text-reveal)) {
  opacity: 1;
}

/* 「視差効果を減らす」設定のユーザーにはアニメーションせず最初から表示 */
@media (prefers-reduced-motion: reduce) {
  .js-enabled .p-fv__label,
  .js-enabled .p-fv__eyebrow,
  .js-enabled .p-fv__title ~ *,
  .js-enabled .p-fv .swell-block-column:not(:has(.js-text-reveal)) {
    opacity: 1;
    transition: none;
  }

  .js-enabled .p-fv__title-inner {
    transform: none;
    transition: none;
  }
}

/* SCHEDULE　※ボーダーはGPU側で個別に指定
***************************************************************/
.p-schedule__card {
  box-shadow: var(--shadow-card);
  border-radius: 0 0 12px 12px;
  background: #fff;
}

/* APPLICATION
***************************************************************/
.p-application__row {
  padding: 1.5rem;
  border-bottom: 1px solid #ebd9ea;
  margin: 0;
}

.p-application__row:first-child {
  border-top: 1px solid #ebd9ea;
}

.p-application .wp-block-columns.p-application__row {
  --wp-column-gap: 1rem;
}

.p-application__row a {
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}

@media (any-hover: hover) {
  .p-application__row a:hover {
    border-bottom: 1px solid currentColor;
  }
}

/* MENTOR
***************************************************************/
.p-mentor__card {
  box-shadow: var(--shadow-card);
  border-radius: 12px;
  background: #fff;
}

.p-mentor__card-img img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

/* MESSAGE
***************************************************************/
.p-message {
  background-image: linear-gradient(135deg, var(--color_deep03) 0%, #a22c86 55%, #c254b5 100%);
  color: #fff;
}

.p-message__text {
  gap: 1.8em;
}

/* ORGANIZER
***************************************************************/
.p-organizer__box {
	padding:3em 2em;
}
@media(min-width:960px) {
	.p-organizer__box {
	  padding:3em 4em;
  }
}

.p-organizer__link a {
  transition: all 0.3s ease;
  border-bottom: 1px solid currentColor;
	color:var(--color_deep01)!important;
}

@media (any-hover: hover) {
  .p-organizer__link a:hover {
	opacity:0.7;
  }
}

.p-organizer__img {
	width:calc(250 / 14 * 1rem);
	margin-inline:auto;
	@media(min-width: 960px) {
		width:100%;
	}
}

/* SWELLのデフォルトのフッター直前ウィジェット
***************************************************************/
/*余計なマージンをリセット*/
.w-beforeFooter {
  margin: 0 auto;
  overflow: hidden;
}

/*余計なフッターボックスの余白をリセット*/
.w-footer__box {
  padding: 0;
}

/*余計なウィジェットの余白をリセット*/
.l-footer__widgetArea {
  padding: 0;
}

/*余計な余白をリセット（全幅にできるように）*/
.l-footer .w-footer {
  max-width: none;
  padding: 0;
}

.l-footer .c-widget {
  margin: 0;
}

/* SWELLのフッター直前ウィジェットオリジナルスタイル
***************************************************************/

.l-footer__container {
  flex-direction: column;
  @media (min-width: 600px) {
    flex-direction: row;
  }
}

.l-footer__logo {
  text-align: center;

  @media (min-width: 600px) {
    text-align: left;
  }
}

.l-footer__logo img {
  max-width: min(calc(250 / 14 * 1rem), 250px);
}

.l-footer__nav-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
  list-style-type: none;

  @media (min-width: 600px) {
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
  }
}

.l-footer__nav-list li {
  list-style-type: none;
}

.l-footer__nav-list li a {
  text-transform: uppercase;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}
@media (any-hover: hover) {
  .l-footer__nav-list li a:hover {
    border-bottom: 1px solid var(--color_deep01);
    color: var(--color_deep01) !important;
  }
}