@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================
   トップ・全体CSS
========================================= */
.top #content {
	padding: 0 6em;
	margin-bottom: 0;
}

.p-mainVisual__slideTitle {
	font-size: 4rem;
    font-weight: bold;
    line-height: 1.2;
}

.-height-full .p-mainVisual__slideText {
	font-size: 1.4rem;
}

.p-mainVisual__slideBtn .c-mvBtn__btn {
	font-size: 1rem;
	font-weight: bold;
    padding: 1rem 2rem;
    letter-spacing: normal;
}

/* paddingの計算調整 */
.custom-section-padding {
	padding-top: clamp(100px, 11vw, 160px) !important;
	padding-bottom: clamp(100px, 11vw, 160px) !important;
}

/* marginの計算調整 */
.custom-section-margin {
	margin-bottom: clamp(100px, 11vw, 160px) !important;
}

/* =========================================
   見出し下のひし形ライン装飾
========================================= */
.diamond-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0084d1; /* ひし形の色（Figmaの青色コードに合わせてください） */
  font-size: 14px; /* ひし形のサイズ */
  margin-top: 10px;
  margin-bottom: 40px;
}
.diamond-deco::before,
.diamond-deco::after {
  content: "";
  width: 30px; /* 線の長さ */
  height: 3px; /* 線の太さ */
  background-color: #0084d1; /* 線の色 */
  margin: 0 6px; /* ひし形と線の間の余白 */
}

.diamond-deco.-w {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; /* ひし形の色（Figmaの青色コードに合わせてください） */
  font-size: 14px; /* ひし形のサイズ */
  margin-top: 10px;
  margin-bottom: 40px;
}
.diamond-deco.-w::before,
.diamond-deco.-w::after {
  content: "";
  width: 30px; /* 線の長さ */
  height: 3px; /* 線の太さ */
  background-color: #fff; /* 線の色 */
  margin: 0 6px; /* ひし形と線の間の余白 */
}

/* =========================================
   はたらくからだ研究所とは本文
========================================= */
.top_about {
	width: 80%;
    margin-right: auto;
    margin-left: auto;
}

/* =========================================
   新着情報（テキスト型リスト）の白カード化
========================================= */

/* SWELLデフォルトの枠線を消す */
.custom-news-list .p-postList,
.custom-news-list .p-postList__item,
.custom-news-list .p-postList__link{
    border: none !important;
}

/* 1つ1つの記事を白いカードにする */
.custom-news-list .p-postList__item {
    background: #ffffff;
    margin-bottom: 16px; /* カード同士の隙間 */
    padding: 20px 30px; /* カード内側の余白 */
    border-radius: 0; /* Figmaが角丸なら 8px などに変更 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); /* うっすら影をつける（不要なら削除） */
}

.custom-news-list .p-postList__item:hover {
	box-shadow: 0 7px 10px rgba(0, 0, 0, 0.06);
}

.custom-news-list .p-postList__link:hover {
    background-color: unset;
}

/* リンク全体を横並び（Flexbox）にする */
.custom-news-list .p-postList__body {
    display: flex;
    align-items: center; /* 縦の真ん中で揃える */
    gap: 24px; /* メタ情報（日付・タグ）とタイトルの隙間 */
    text-decoration: none;
}

/* 日付とタグのエリアも横並びにする */
.custom-news-list .p-postList__meta {
    display: flex;
    align-items: center;
    gap: 16px; /* 日付とタグの隙間 */
    margin-bottom: 0 !important; /* デフォルトの下余白を消す */
}

/* 日付のスタイル */
.custom-news-list .c-postTimes__posted {
	margin: 0;
    font-size: 14px;
    color: #333333;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    opacity: 1;
}

/* 時計アイコンを消す場合（SWELLの設定でも消せますが念のため） */
.custom-news-list .c-postTimes__posted::before,
.custom-news-list .p-postList__cat::before {
    display: none;
}

/* カテゴリータグ（ピル型）のスタイル */
.custom-news-list .p-postList__cat {
    background-color: #dff2fe; /* 薄い青色（Figmaに合わせて変更してください） */
    color: #0069a8; /* テキストの青色（Figmaに合わせて変更してください） */
    padding: 4px 13px;
	margin: 0;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap; /* タグ内で改行させない */
}

/* タイトルのスタイル */
.custom-news-list .c-postTitle {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    line-height: 1.5;
    margin: 0;
}

/* -----------------------------------------
   スマホ画面用の調整（縦幅が狭い時用）
----------------------------------------- */
@media (max-width: 767px) {
    .custom-news-list .p-postList__body {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start; /* 左寄せ */
        gap: 12px;
    }
    .custom-news-list .p-postList__item {
        padding: 16px 20px;
    }
}

/* =========================================
   リッチカラム：カード型デザインの微調整
========================================= */

/* カード内の要素の間隔を調整 */
.custom-card-column .swell-block-column {
    display: flex;
    flex-direction: column;
	border: 2px solid #fff;
	height: 460px;
}

@media (min-width: 960px) {
	.custom-card-column .swell-block-column {
	height: auto;
}
}

.custom-card-column .swell-block-column:hover {
	border-color: #00bcff;
}

.custom-card-column i[class^="fa-"] {
    font-size: 28px; /* アイコンの大きさ（Figmaに合わせて調整） */
    color: #0073cc; /* アイコンの色（Figmaの青色コード） */
    margin-bottom: 15px;
    display: inline-block;
}

/* 見出しのスタイル */
.custom-card-column h3.is-style-section_ttl {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
	margin-top: 0;
    margin-bottom: 20px !important;
    min-height: 2.8em; /* 見出しの行数が違っても位置を揃える */
}

/* 本文のスタイル */
.custom-card-column p {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

.custom-card-column div {
    flex-grow: 1; /* テキスト量が違っても下のボタンの位置を揃える */
}

.top-infobtn a{
	padding-left: 2rem;
	padding-right: 2rem;
	background-color: #fff !important;
}

.top-infobtn a:hover {
	background-color: #f6f3f4 !important;
}

/* =========================================
   フッター
========================================= */
.l-footer__widgetArea {
	padding-top: 2rem;
	margin: 0 1rem;
}

.w-footer.l-container {
	padding: 0;
    max-width: 1100px;
    border-bottom: 1px solid #1e2939;
}

.w-footer__box {
	padding: 1em 0;
}

.c-widget#text-3 p:first-child{
	width: 240px;
    margin-bottom: 5px;
}

.c-widget#text-3 p:nth-child(2){
	margin-bottom: .5em;
	font-size: 14px;
}

.c-widget#text-3 p:last-child{
	font-size: 0.75em;
	color: #99a1af;
}

#nav_menu-3.c-listMenu a {
	border-bottom: none;
	padding: 0;
	margin-bottom: 8px;
	font-size: 14px;
	color: #d1d5dc;
}

#nav_menu-3.c-listMenu a:before {
	content: "";
}

#swell_sns_links-2.widget_swell_sns_links .c-iconList {
	justify-content: start;
}

#text-4.c-widget {
	margin-top: 1em;
	font-size: 14px;
	color: #d1d5dc;
}

/* =========================================
   固定ページタイトル部分
========================================= */
@media (min-width: 600px) {
	.l-topTitleArea {
		min-height: 350px;
	}
}

.l-topTitleArea__body .c-pageTitle {
	text-align: center;
    font-size: 2.75rem;
}

.l-topTitleArea__body .c-pageTitle .c-pageTitle__subTitle {
	display: block;
    margin: 0;
    opacity: 1;
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: normal;
}

/* =========================================
   タブ切り替え（会社情報）のデザイン
========================================= */

.is-style-bb>.c-tabList .c-tabList__button:before {
	background-color: unset;
	opacity: 1;
}

/* タブを囲むエリア（下部にグレーの直線を引く） */
.custom-about-tabs > ul {
    border-bottom: 1px solid #e5e5e5 !important;
	justify-content: left;
    gap: 0 !important; /* タブ同士の隙間を消す */
    margin-bottom: 40px !important;
}

/* 各タブボタンの基本デザイン */
.custom-about-tabs > ul > li {
    background: transparent !important;
    border: none !important;
    color: #666666 !important; /* 非アクティブ時の文字色 */
    font-weight: bold;
    margin-bottom: 0px !important;
    transition: all 0.3s ease;
}

/* タブホバー時の動き */
.custom-about-tabs > ul > li:hover {
    color: #0073cc !important;
    opacity: 0.8;
}

/* アクティブ（選択中）のタブのデザイン */
.custom-about-tabs > ul > li.is-active {
    color: #0073cc !important; /* 文字を青く */
    border-bottom: 2px solid #0073cc !important; /* 青い下線を表示 */
}

.custom-about-tabs h2 {
	margin: 3rem 0 1.2rem;
}

/* =========================================
   タブタイトルのアイコン（::beforeで実装）
========================================= */

/* アイコンの共通設定 */
.custom-about-tabs > ul > li button::before {
    font-family: "Font Awesome 6 Free"; /* Font Awesome 6 を指定 */
    margin-right: 8px;
    font-size: 1.1em;
    position: unset !important;
    display: inline !important;
    transition: all 0.3s ease;
}

/* 1つ目のタブ（理念・ミッション）：ターゲットアイコン */
.custom-about-tabs > ul > li:nth-child(1) button::before {
    content: "\f140" !important; /* fa-bullseye のユニコード */
    font-weight: 900; /* Solidアイコンの場合は 900 */
}

/* 2つ目のタブ（組織概要）：ビルアイコン */
.custom-about-tabs > ul > li:nth-child(2) button::before {
    content: "\f1ad" !important; /* fa-building のユニコード */
    font-weight: 400; /* Regularアイコンの場合は 400 */
}

/* 3つ目のタブ（沿革）：時計/ヒストリーアイコン */
.custom-about-tabs > ul > li:nth-child(3) button::before {
    content: "\f1da" !important; /* fa-clock-rotate-left のユニコード */
    font-weight: 900; /* Solidアイコンの場合は 900 */
}

/* =========================================
   ゼロ埋め（01. 02.）のカスタムリスト
========================================= */

/* デフォルトの数字を消して、オリジナルカウンターを準備する */
ol.custom-zero-list {
    list-style-type: none !important;
    counter-reset: zero-counter; /* カウンターをリセット */
    padding-left: 0 !important;
}

/* リスト項目（li）の余白設定 */
ol.custom-zero-list > li {
    position: relative;
    padding-left: 2em; /* 数字を置くための左側のスペース */
    margin-bottom: 10px; /* 項目同士の隙間 */
    line-height: 1.7;
}

/* オリジナルの数字（01.）を作る */
ol.custom-zero-list > li::before {
    counter-increment: zero-counter; /* 番号を1ずつ増やす */
    content: counter(zero-counter, decimal-leading-zero) ". "; /* ゼロ埋めスタイルに指定 */
    position: absolute;
    left: 0;
    top: 0;
    color: #0073cc; /* 数字の青色（Figmaに合わせて変更してください） */
    font-weight: bold;
    font-size: 1.1em;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 数字が綺麗に見えるフォント */
}


/* =========================================
   代表メッセージのとこ
========================================= */
.representative-message {
	background-color: #fbf9fa;
	padding: 1.2rem;
}

@media (min-width: 960px) {
	.representative-message {
	padding: 2rem;
	}}

.representative-message figure {
	height: 100%;
}

.representative-message figure img {
	object-fit: cover;
    height: 100%;
	border-radius: 10px !important;
}

/* =========================================
   組織概要：CSS Gridによる交互配置レイアウト
========================================= */

/* PCサイズ（768px以上）のときだけ2列にする */
@media (min-width: 768px) {
    .custom-profile-grid > .wp-block-group__inner-container {
        display: grid !important;
        /* 横に2列（50%ずつ）並べる */
        grid-template-columns: 1fr 1fr; 
        /* 縦の隙間（40px）と横の隙間（80px）を一括指定（Figmaに合わせて調整） */
        gap: 20px 0px; 
    }
}

/* スマホサイズ（767px以下）のときの縦の隙間 */
@media (max-width: 767px) {
    .custom-profile-grid > .wp-block-group__inner-container {
        display: flex;
        flex-direction: column;
        gap: 20px; /* スマホ時のパーツごとの隙間 */
    }
}

.custom-profile-grid .custom-profile-group {
	padding-left: 15px;
	border-left: 4px solid #0084d1;
}

.content-list li {
	padding-left: 5px;
	margin-bottom: .5rem;
}

.content-list li::marker {
	color: #0084d1;
}

/* =========================================
   沿革（ステップブロック）
========================================= */

/* 繋ぎの線の位置と色・太さ */
.custom-history .swell-block-step__item:before {
    left: 14px; /* アイコンの中央を通るように */
    border-left: 2px solid #e5e5e5; /* Figmaのような薄いグレーの直線に */
}

/* アイコン（青い四角）の外枠 */
.custom-history .swell-block-step__number {
    height: 30px;
    width: 30px;
    background-color: #0073cc !important; /* Figmaの青色 */
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px; /* タイトルの高さと合うように微調整 */
}

/* アイコンの中の白い四角（入力された「■」を白箱にすり替える） */
.custom-history .swell-block-step__number .__label {
    font-size: 0; /* 元の■の文字を見えなくする */
    padding: 0;
    width: 10px;
    height: 10px;
    background-color: #ffffff; /* 白い四角として表示 */
}

/* SWELLが自動出力する数字を念のため非表示に */
.custom-history .swell-block-step__number::after {
    display: none !important;
}

/* タイトル（2026年4月）のカード上半分 */
.custom-history .swell-block-step__title {
    min-height: 0 !important;
    padding: 16px 20px 4px !important; /* 内側の余白 */
    background-color: #ffffff; /* 背景を白に */
    color: #0073cc !important; /* テキストを青に */
    border: 1px solid #f0f0f0; /* Figmaのような薄いグレーの枠線 */
    border-bottom: none; /* 下の枠線を消してbodyと一体化させる */
    box-shadow: 0 4px 10px rgba(0,0,0,0.02); /* うっすら影をつけて浮かす */
}

/* 本文（一般社団法人〜）のカード下半分 */
.custom-history .swell-block-step__title + .swell-block-step__body {
    padding: 0 20px 20px !important;
    margin-top: 0;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-top: none; /* 上の枠線を消してtitleと一体化させる */
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
/* -----------------------------------------
   スマホサイズ（767px以下）の微調整と崩れ修正
----------------------------------------- */
@media (max-width: 767px) {
    /* 1. スマホで消えてしまう「繋ぎの縦線」を強制的に復活させる */
    .custom-history.swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item::before {
        display: block !important;
    }

    /* 2. スマホで本文（body）が左に食い込むSWELLの初期設定を強制解除 */
    .custom-history.swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body {
        margin-left: 0 !important;
    }
    
    /* 3. アイコンとカードの隙間をスマホ用に調整 */
    .custom-history .swell-block-step__item {
        padding-left: 48px !important; 
    }

    /* 4. 箱の中の余白（テキストが窮屈に改行されないように調整） */
    .custom-history .swell-block-step__title {
        padding: 16px 16px 4px !important;
    }
    .custom-history .swell-block-step__title + .swell-block-step__body {
        padding: 0 16px 16px !important;
    }
}

/* -----------------------------------------
   会員向けコンテンツ
----------------------------------------- */
.custom-sticky {
	width: 100%;
	padding: 2rem;
}

/* =========================================
   オリジナル手順（プロセス）カード
========================================= */

/* カード全体を横並び（Flexbox）にして影をつける */
.custom-process-card {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* うっすら影 */
    margin-bottom: 24px; /* カード同士の隙間 */
    border: 1px solid #f0f0f0; /* Figmaのような薄い枠線 */
    overflow: hidden; /* 角丸からはみ出た部分を隠す */
}

/* 左側の青いエリア */
.process-left {
    width: 140px; /* 青い帯の幅 */
    background-color: #0084d1 !important; /* 青色 */
    color: #ffffff !important; /* 文字を白に */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	gap: 8px;
    flex-shrink: 0; /* スマホでも幅を縮めない */
    padding: 24px 0 !important;
}

/* 青いエリア内の数字とアイコン */
.process-left p {
    font-size: 50px !important;
    font-weight: bold;
    line-height: 1;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.process-left i {
    font-size: 38px;
}

/* 右側のテキストエリア */
.process-right {
    padding: 24px 32px !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.process-right h4 {
    font-size: 1.8rem
}
.process-right p {
    margin-bottom: 0 !important;
    color: #333333;
}

/* --- スマホサイズの時の調整 --- */
@media (max-width: 767px) {
	.custom-process-card {
		flex-direction: column;
	}
	
    .process-left {
        width: 100%; /* スマホ時は青帯を少し細く */
		flex-direction: row !important;
		gap: 2rem;
    }
	
	.process-left p {
    font-size: 35px !important;
}
.process-left i {
    font-size: 30px;
}

    .process-right {
        padding: 20px !important;
    }
	
	.process-right h4 {
    font-size: 1.5rem
}
}

/* --- プログラムの特徴 --- */
.custom-features .swell-block-column {
	border: 1px solid #e5e5e5;
	background-color: #fff;
	padding: 1rem;
    line-height: 1.4;
}

/* --- アンケート調査項目 --- */
.custom-questionnaire.has-border.-border01 {
	border-color: #e5e5e5;
	background-color: #fff;
}

.custom-questionnaire-list .swell-block-column {
	border: 1px solid #b8e6fe;
	background-color: #f0f9ff;
	padding: .8rem;
}

/* =========================================
   表彰制度
========================================= */
.custom-award {
	border: 2px solid #fee685;
	background-color: #fefce8;
	padding: 2.5rem;
}

.custom-award-list > .swell-block-columns__inner {
	justify-content: center;
}

.custom-award-list .swell-block-column {
	width: 27%;
	border: 1px solid #fee685;
	background-color: #fff;
	padding: 1.5rem;
}

@media (max-width: 767px) {
	.custom-award {
	padding: 2.5rem 1rem;
}
	.custom-award-list .swell-block-column {
	width: 100%;
}
}

@media (max-width: 767px) {
.custom-contents-info h3 {
	font-size: 1.8rem !important;
}
}

/* =========================================
   投稿リスト（カード型）の完全Figma再現
========================================= */
.p-postList.-type-card {
	gap: 5%;
}

.p-postList.-type-card .p-postList__link {
    display: flex;
    flex-direction: column;
    height: 100%; 
}

/* カード全体の枠線と影 */
.p-postList.-type-card .p-postList__item {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    border-radius: 4px;
	padding: 0;
    overflow: hidden;
}

/* カード内の構造をFlexboxにして「順番」を操作できるようにする */
.p-postList.-type-card .p-postList__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
	flex-grow: 1;
}

/* ① 一番上：メタ情報（日付とカテゴリ） */
.p-postList.-type-card .p-postList__meta {
    order: 1; /* 順番を1番目に変更！ */
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    justify-content: flex-start;
}

/* カテゴリタグのスタイル（Figmaの薄い青色ピル） */
.p-postList.-type-card .p-postList__cat {
    background-color: #e6f2ff !important;
    color: #0073cc !important;
    padding: 4px 12px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: bold;
    border: none; /* SWELLの標準枠線を消す */
}

/* ② 二番目：タイトル */
.p-postList.-type-card .p-postList__title {
    order: 2; /* 順番を2番目に！ */
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    line-height: 1.5;
    margin-bottom: 12px !important;
}

/* ③ 三番目：抜粋文（ここでflex-growを使って下の余白を埋める） */
.p-postList.-type-card .p-postList__excerpt {
    order: 3; /* 順番を3番目に！ */
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* ④ 四番目：「続きを読む →」を追加 */
.p-postList.-type-card .p-postList__body::after {
    content: "続きを読む →";
    order: 4; /* 順番を一番最後に！ */
    display: block;
    color: #0073cc;
    font-weight: bold;
    font-size: 14px;
	margin-top: auto;
}

/* ホバー時の「続きを読む」の透け感 */
.p-postList.-type-card .p-postList__link:hover .p-postList__body::after {
    opacity: 0.7;
	background-color: unset;
}

@media (min-width: 1020px) {
	.p-postList.-type-card .p-postList__item {
		width: 30% !important;
	}
}


/* -----------------------------------------
   会員一覧
----------------------------------------- */
/* 1つ目のタブ（正会員） */
.custom-about-tabs.memberlist > ul > li:nth-child(1) button::before {
    content: "\f024" !important; /* fa-bullseye のユニコード */
    font-weight: 400; /* Solidアイコンの場合は 900 */
}

/* 2つ目のタブ（賛助会員） */
.custom-about-tabs.memberlist > ul > li:nth-child(2) button::before {
    content: "\f500" !important; /* fa-building のユニコード */
	font-weight: 900;
}

.houjin-ttl::before,
.kojin-ttl::before {
	font-family: "Font Awesome 6 Free";
    margin-right: 8px;
    font-size: 1.1em;
    position: unset !important;
    display: inline !important;
}

.kojin-ttl::before {
	content: "\f183" !important;
}

.houjin-ttl::before {
	content: "\e4da" !important;
}

.memberlist .p-postList.-type-card .p-postList__body::after {
	content: "";
	display: none;
}

.memberlist .p-postList.-type-card .p-postList__body h3,
.memberlist .p-postList.-type-card .p-postList__body div {
	margin: 0 !important;
}

.memberlist .member-mess {
	color: #1c398e;
    background-color: #f0f9ff;
    padding: .5rem 1rem;
	border-color: #bedbff;
}


.custom-person .p-postList__thumb {
	display: none !important;
}

.member-counter {
	border-radius: 10px;
    padding: 2rem;
	background-image: linear-gradient(90deg, rgba(0, 132, 209, 1), rgba(0, 146, 184, 1));
	color: #fff;
	text-align: center;
}

.c-member-count {
	font-weight: bold;
    font-size: 2rem;
    line-height: 1;
}

@media (max-width: 767px) {
	.custom-about-tabs.memberlist .p-postList.-type-card {
		gap: 2%;
		justify-content: space-between;
	}
	
	.custom-about-tabs.memberlist .p-postList.-type-card .p-postList__item {
		width: 49%;
	}
	
	.custom-about-tabs.memberlist .p-postList.-type-card .p-postList__body {
		padding: 14px;
	}
	.memberlist .p-postList.-type-card .p-postList__body h3,
	.memberlist .p-postList.-type-card .p-postList__body div {
		font-size: 1rem;
	}
}

/* =========================================
   会員リストのリンクとホバーアクションを無効化
========================================= */

/* リンク機能を完全に殺し、カーソルも通常に戻す */
.no-link-list .p-postList__link {
    pointer-events: none !important; /* クリックとホバーを無効化 */
    cursor: default !important; /* 指マーク（👆）にならないようにする */
}

/* =========================================
   会員種別・会費カード（2カラム）
========================================= */
.custom-price-cards > .swell-block-columns__inner {
	justify-content: center;
}

/* カードの基本設定（Flexboxでボタンを下揃えに） */
.custom-price-cards .swell-block-column {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff;
    padding: 40px 32px !important;
    border-radius: 0;
}

/* 左カード（正会員）を青枠にする */
.custom-price-cards .swell-block-column:nth-child(1) {
    border: 2px solid #0073cc !important;
}

/* 右カード（賛助会員）に影をつける */
.custom-price-cards .swell-block-column:nth-child(2) {
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
}

/* h3タイトル（中央揃え・線なし） */
.custom-price-cards h3 {
    font-size: 22px;
    margin-bottom: 16px !important;
}
.custom-price-cards h3::before {
	background: unset;
    margin-right: 8px;
    color: #0073cc;
}

/* 価格テキスト（青色・巨大化） */
.custom-price-cards .price-text {
    font-size: 36px;
    font-weight: bold;
    color: #0073cc;
    margin-bottom: 24px !important;
    line-height: 1;
}

/* リストブロックの設定（緑のチェックマーク） */
.custom-price-cards ul {
    margin-bottom: 32px !important;
    padding-left: 0 !important;
    list-style: none !important;
    flex-grow: 1; /* リスト部分を伸ばしてボタンを一番下に押しやる */
}
.custom-price-cards li {
    margin-bottom: 16px !important;
    position: relative;
    padding-left: 1.5em;
    font-size: 15px;
}
.custom-price-cards li::before {
    content: "\f00c"; /* FontAwesomeのチェックマーク */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #28a745; /* 緑色 */
    position: absolute;
    left: 0;
}

/* 右カードの最後のリストだけ「グレーの対象外マーク」にする */
.custom-price-cards .swell-block-column:nth-child(2) li:last-child {
    color: #999999;
}
.custom-price-cards .swell-block-column:nth-child(2) li:last-child::before {
    content: "\f111"; /* FontAwesomeの丸マーク */
    font-weight: 400; /* 白抜き丸 */
    color: #cccccc;
}

/* ボタンを一番下に固定し、横幅100%にする */
.custom-price-cards .wp-block-button {
    margin-top: auto !important;
    width: 100%;
}
.custom-price-cards .wp-block-button__link {
    width: 100%;
    text-align: center;
    padding: 16px !important;
    font-weight: bold;
}

/* =========================================
   入会の流れ（矢印ステップ）
========================================= */
.flow {
	padding: 3rem 6rem 5rem;
    max-width: 860px;
    margin: 0 auto;
	background-color: #fff;
}
/* 全体の余白と配置 */
.custom-arrow-step .swell-block-step__item {
    padding-left: 96px !important; /* 青い四角とテキストの隙間 */
    padding-bottom: 64px !important; /* 矢印のためのスペース */
    margin-bottom: 16px !important;
    position: relative;
}
.custom-arrow-step .swell-block-step__item:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 数字の入った青い四角 */
.custom-arrow-step .swell-block-step__number {
    width: 64px !important;
    height: 64px !important;
    background-color: #0073cc !important;
    border-radius: 0 !important; /* 完全に四角にする */
    top: 0 !important;
    left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SWELLデフォルトの「STEP」という小さな文字を消す */
.custom-arrow-step .swell-block-step__number .__label {
    display: none !important;
}

/* 数字のサイズと色 */
.custom-arrow-step .swell-block-step__number::after {
    font-size: 28px !important;
    font-weight: bold;
    color: #ffffff !important;
}

/* タイトルのスタイル */
.custom-arrow-step .swell-block-step__title {
    font-size: 20px;
    font-weight: bold;
	min-height: 36px !important;
}

/* 説明文（本文）のスタイル */
.custom-arrow-step .swell-block-step__title + .swell-block-step__body {
    margin-top: 0 !important;
    color: #666666;
    font-size: 15px;
}

/* --- ここから魔法の矢印 --- */

/* 矢印の「縦線」を作る */
.custom-arrow-step .swell-block-step__item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 24px;
    background-color: #0073cc;
}

/* SWELLデフォルトの縦線（点線）を上書きして、矢印の「V（先端）」部分に変身させる */
.custom-arrow-step .swell-block-step__item:not(:last-child)::before {
    border: none !important; /* デフォルトの線を一旦リセット */
    border-right: 2px solid #0073cc !important;
    border-bottom: 2px solid #0073cc !important;
    width: 12px !important;
    height: 12px !important;
    top: auto !important;
    bottom: 14px !important; /* 縦線と重なるように微調整 */
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg); /* 斜め45度に傾けてV字にする */
    z-index: 1;
}

/* 最後の項目の縦線は完全に消す */
.custom-arrow-step .swell-block-step__item:last-child::before {
    display: none !important;
}

/* --- スマホサイズの時の調整と崩れ修正 --- */
@media (max-width: 767px) {
	.flow {
	padding: 2rem .5rem 3rem;
    max-width: 100%;
    margin: 0 auto;
}
	
    /* 1. スマホで消えてしまう::before（V字の先端）を強制的に復活 */
    .custom-arrow-step.swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item::before {
        display: block !important;
    }

    /* 2. スマホで本文が左に食い込むSWELLの初期設定を強制解除 */
    .custom-arrow-step.swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body {
        margin-left: 0 !important;
    }

    /* 3. 青い四角とテキストの重なりを解消（アイコン幅48px + 隙間16px） */
    .custom-arrow-step .swell-block-step__item {
        padding-left: 64px !important;
    }

    /* 4. 青い四角のサイズと数字の大きさをスマホ用に調整 */
    .custom-arrow-step .swell-block-step__number {
        width: 48px !important;
        height: 48px !important;
    }
    .custom-arrow-step .swell-block-step__number::after {
        font-size: 22px !important;
    }

    /* 5. タイトルの位置を整える */
    .custom-arrow-step .swell-block-step__title {
        font-size: 18px;
        padding-top: 0 !important;
    }
}

/* =========================================
   お問い合わせフォーム
========================================= */

/* フォーム全体を白いカードにする */
.custom-contact-form {
    background: #ffffff;
    padding: 48px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    max-width: 860px;
    margin: 0 auto; /* 中央寄せ */
}

/* 各項目のまとまりの余白 */
.custom-contact-form .form-group {
    margin-bottom: 24px;
}

/* ラベル（項目名）のスタイル */
.custom-contact-form label {
    display: block;
    font-weight: bold;
    color: #333333;
    margin-bottom: 8px;
    font-size: 15px;
}

/* 赤い必須マーク（*） */
.custom-contact-form .required {
    color: #d32f2f;
    margin-left: 4px;
    font-weight: bold;
}

/* 入力欄のスタイル */
.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form select,
.custom-contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    background-color: #ffffff;
    font-size: 15px;
    color: #333333;
    box-sizing: border-box; /* はみ出し防止 */
}

/* プレースホルダー（薄い文字）の色 */
.custom-contact-form input::placeholder,
.custom-contact-form textarea::placeholder {
    color: #999999;
}

/* 送信ボタンのスタイル */
.custom-contact-form .wpcf7-submit {
    width: 100%;
    background-color: #0073cc; /* 青色 */
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    padding: 16px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: opacity 0.3s;
    margin-top: 16px;
}

/* 送信ボタンのホバー時 */
.custom-contact-form .wpcf7-submit:hover {
    opacity: 0.8;
}

/* --- スマホサイズの時の調整 --- */
@media (max-width: 767px) {
    .custom-contact-form {
        padding: 32px 20px; /* スマホ時は内側の余白を狭くする */
    }
}

.custom-faq .swell-block-faq__item {
	background-color: #fff;
	padding: 10px;
	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.04);
}

.custom-faq.is-style-faq-box .faq_q {
	border: none;
	padding-bottom: 10px;
}

/* =========================================
   Turnstileウィジェットの配置調整
========================================= */

.custom-contact-form .turnstile-wrap {
    margin-bottom: 0; /* 送信ボタンとの隙間 */
    display: flex;
    justify-content: center; /* ウィジェットを中央寄せにする（左寄せがいい場合はこの行を削除） */
}

/* iframeの高さによる変な隙間を防ぐ */
.custom-contact-form .turnstile-wrap iframe {
    margin-bottom: 0 !important;
}