@charset "utf-8";

:root {

/* .body-copy余白 */
  --bc-t: 25px;	/* .body-copyの余白 上 */
  --bc-b: 0;	/* .body-copyの余白 下 */
  --bc-r: 30px;	/* .body-copyの余白 右 */
  --bc-l: 30px;	/* .body-copyの余白 左 */

/* フォント種類 */
/*  --ff-sans: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;*/
  --ff-sans: 'Noto Sans JP', sans-serif;
  --ff-mincho: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro","HGS明朝E", "ＭＳ Ｐ明朝", serif;

/* フォントサイズ */
  --fs-root: 106.25%; /*17px相当*/ /* remの物差し（グローバル基準） */
  --fs-base: 1rem;	/* 本文の基準サイズ（意味トークン） */

/* line-height */
  --lh-body: 1.9; /* 本文の行間 */
  --lh-heading: 1.4; /* 見出しの行間 */
  --lh-narrow: 1.2; /* 行間狭め */

/* 本文 段落間隔 */
  --flow-space: 1.1rem;		/* 本文の標準段落間隔 */
  --flow-space-tight: 1.0rem;	/* 詰め版：カード内・箇条書き密集・補足文など、局所的に */
  --flow-space-loose: 2.0rem;	/* 広め版：重要見出し直後・区切り感を出したいブロックに */
  --media-space: 2.0rem;		/* メディア下：img/figure/動画/表などの直後はやや広めに */

/* 見出し段落間隔 */
  --h2-mt: calc(var(--flow-space) * 1.3);  /* 上を広め */
  --h2-mb: calc(var(--flow-space) * 1.0);  /* 下を詰める */
  --h2b-mt: calc(var(--flow-space) * 1.5);  /* 上を広め */
  --h2b-mb: calc(var(--flow-space) * 0.9);  /* 下を詰める */

/* カラー */
  --color-body: #333333;	/* 本文のフォント色 */
  --color-body-l: #444444;	/* 本文のフォント色（薄目） */
  --color-h2: #163357;	/* ■■■H2カラー■■■ */
  --color-wfot: #ffffff;		/* ホワイト系文字*/
  --color-subf: #333333;	/* 脚注などの薄め文字 */
  --color-main: #163357;	/* ■■■メインカラー■■■ */
  --color-sub: #;		/* ■■■サブカラー■■■ */
  --color-imp: #C0392B;		/* ■■■アクセントカラー■■■ */
  --color-a-link: #1A5D9A;	/* ■■■リンクカラー■■■ */
  --color-box-bg: #F9F9F9;	/* ■■■BOX背景カラー■■■ */
  --color-box-border: #163357;	/* ■■■BOX枠線カラー■■■ */
  --color-2stepbar: #007bff;		/* ■■■2stepオプトのカラーバーの色■■■ */

/* ボディコピー用装飾 */
  --dc-red: #c0392B;
  --dc-yellowline: linear-gradient(transparent 60%, #fff799 60%);
  --dc-bold: 700;

  /* グレー系 */
  --gray-20:  #fbfbfb; /* 最も薄い：背景、セクションの塗りつぶし */
  --gray-50:  #f5f5f5;/*#F5F7FA*/ /* かなり薄い：背景、セクションの塗りつぶし */
  --gray-100: #e6e6e6; /* 薄い：ボックス背景、淡い区切り線、フッター */
  --gray-200: #cccccc; /* 中間：ボーダー、非アクティブボタン */
  --gray-500: #999999; /* 補足文、キャプション */
  --gray-900: #333333; /* 濃い：本文より控えめな強調 */

  /* プロフィールBOX */
  --prof-bg: #f7f6ed;
  --prof-h2bottom-bar: #aaaaaa;
  --prof-font: #333333;
  --prof-border: #999999;

  /* CTAボタン */
  --color-cta-buttom: linear-gradient(to bottom, #ffaf4b, #ff920a); /* ボタン背景色 */
  --color-cta-border: ; /* ボタン枠線色 */
  --color-cta-shadow: ; /* ボタン陰色 */
  --color-cta-font: #ffffff; /* ボタン文字色 */

  /* LINE登録ボタン */
  --color-line-main: #00b900;
  --color-line-dark: #006500;
  --radius-md: 10px;
  --radius-sm: 9px;

  /* ボックス角丸 */
  --radius-xs: 5px;
  --radius-sm: 9px;
  --radius-md: 10px;
  --radius-lg: 12px;
}


.ivory{
/*	background-color:#f5f1d6;*/
	background-color:#AEE0E6;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height:40px;
  display: flex;           /* 中身を並べるためにflexを使用 */
  align-items: center;     /* 高さ方向で中央揃え */
  justify-content: flex-start; /* 左寄せ */
}

.logo-p {
  height: 26px;   /* バーより少し小さいサイズに調整 */
  width: auto;    /* アスペクト比維持 */
  padding-left: 10px;      /* 左端に余白をつけたい場合 */
}
.logo-m{display:none;}


/* 全体 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* PCではbox-sizingを基本とする */
  font-style: normal;
}
hr {
	display: none;
}
html {
  font-size: var(--fs-root);
  scroll-behavior: smooth; /* スムーズスクロール */
}
body {
color: var(--color-body);
  background-color: #fff;
  line-height: var(--lh-body);
  font-family: var(--ff-sans);
  -webkit-font-smoothing: antialiased; /* フォントを滑らかに */
}
a { color: var(--color-a-link); text-decoration: underline; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }

.mincho {
	font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	line-height:1.3em;
}


.container {
	width: 990px;
	margin-right: auto;
	margin-left: auto;
	margin-top:0px;
}

.wrapper {
	margin-top:55px;
	margin-bottom:55px;
	margin-right: auto;
	margin-left: auto;
	background-color: #fff;/* 白にする */
	width: 770px;
}
.wrapper p {
	font-size:1.2rem;
	margin-bottom: var(--flow-space);
}


.header {
	width:990px;
	margin-right: auto;
	margin-left: auto;
	height:auto;
	
}
.resizeimg{
	width:100%;
	height:auto;
	display: block; /* 画像下の隙間対策 */
}

/* --- 引用風ボックス --- */
.quote-box {
  background-color: var(--prof-bg); /* プロフィールBOXと同じ薄い背景色(#f7f6ed) */
  border-left: 4px solid var(--color-imp); /* 左側にアクセントカラーの線 */
  padding: calc(var(--flow-space) * 0.8) var(--bc-r); /* 上下は少し狭く、左右は.body-copyと同じ余白 */
  margin-top: var(--flow-space-loose); /* 上の段落との間を広めに */
  margin-bottom: var(--flow-space-loose); /* 下の段落との間を広めに */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; /* 右側だけ少し角丸に */
}

/* 引用符 */
.quote-box::before {
    content: "“";
    display: block;
    font-size: 3em;
    color: #ccc;
	text-align: left;
    line-height: 0;
    margin-bottom: 20px;
}



/* -------------------------------------------
   プロフィールセクション
   ------------------------------------------- */
.profile-box {
    background-color: var(--prof-bg);
    padding: 50px 40px; /* 余白をたっぷりとる */
    margin: var(--flow-space-loose) auto;
    max-width: 860px; /* Wrapperより少し広げて存在感を出す */
    border-radius: var(--radius-md);
    box-sizing: border-box;
    /* 内部をFlexboxで横並びにする（PCならではのレイアウト） */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

/* 写真と名前のエリア */
.profile-header-area {
    flex: 0 0 220px; /* 幅を固定 */
    text-align: center;
    margin-right: 40px; /* 本文との間隔 */
    margin-bottom: 20px;
}

/* プロフィール写真 */
.profile-photo img {
    width: 180px; /* スマホより少し大きく */
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--color-wfot);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	margin-right:20px;
}

/* 名前と肩書き */
.profile-name {
    font-family: var(--ff-mincho);
    color: var(--color-h2);
    font-size: calc(var(--fs-base) * 1.5);
    font-weight: 700;
    line-height: var(--lh-narrow);
    margin-top: 20px;
    margin-bottom: 0;
    /* PCでは下線をなくしてスッキリさせる（お好みで追加も可） */
}
.profile-position {
    font-size: calc(var(--fs-base) * 0.9);
    font-weight: normal;
    display: block;
    margin-bottom: 10px;
    color: var(--color-body-l);
}

/* プロフィール本文エリア */
.profile-body {
    flex: 1 1 500px; /* 残りの幅を使う（最小500px） */
    text-align: left;
	margin-top:20px;
}
.profile-body p {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--prof-font);
    margin-bottom: var(--flow-space);
}
.profile-body p:last-child {
    margin-bottom: 0;
}

/* =========================================
   プロフィール内の証拠写真セクション
   ========================================= */

/* 写真とキャプションをまとめる枠 */
.profile-evidence {
  /* 上下に広めの余白を取り、本文と明確に区切る */
  margin: 35px 0;
  display: block;
}

/* 写真本体のデザイン（PC最適化） */
.evidence-photo {
  width: 70%;       /* プロフィール本文エリアの幅いっぱいに表示 */
  max-width: 100%;   /* 念のためはみ出し防止 */
  height: auto;      /* アスペクト比を維持 */
  
  /* PC画面でリッチに見せるための装飾 */
  border-radius: var(--radius-sm);   /* 統一感のある角丸（9px） */
  border: 1px solid var(--gray-200); /* 薄いグレーの枠線で引き締める */
  box-shadow: 0 3px 8px rgba(0,0,0,0.08); /* スマホより少し強めの影で立体感を出す */
  
  display: block; /* 画像下の隙間を排除 */
}

/* キャプション（注釈テキスト）のデザイン（PC最適化） */
.evidence-caption {
  margin-top: 12px; /* 写真との間隔 */
  
  /* テキストスタイル */
  font-size: 14px; /* PC本文（16~18px）より明確に小さくして「注釈感」を出す */
  color: var(--gray-500); /* 定義済みの薄いグレー(#999999)で控えめに */
  line-height: 1.6; /* 読みやすい行間 */
  text-align: left; /* 左寄せ */
  letter-spacing: 0.02em; /* 少しだけ文字間を空けて読みやすく */
}


/* -------------------------------------------
   トリガーエリア＆ボタン（PC最適化）
   ------------------------------------------- */
/* CTAエリアのコンテナ */
.cta-area {
    background-color: var(--gray-50); /* 薄い背景で区切る */
    padding: var(--flow-space-loose) 0;
    margin: var(--flow-space-loose) 0;
    text-align: center;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.cta-area p {
  margin-bottom: 0;
}
.cta-lead {
    font-weight: 700;
    font-size: calc(var(--fs-base) * 1.2);
    margin-bottom: 30px;
}

/* トリガーエリア（ボタン周辺） */
.trigger-area {
    text-align: center;
    margin: 60px auto 40px; /* 上下を広く、中央寄せ */
    max-width: 700px; /* ボタンが広がりすぎないように制限 */
    padding: 0 20px;
}

/* トリガーボタン本体 */
.js-open-modal-btn {
    display: block;
    width: 100%;
    max-width: 640px; /* PCでの適切な最大幅を設定 */
    margin: 0 auto; /* 中央寄せ */
    box-sizing: border-box;
    
    /* タイポグラフィ */
    font-family: var(--ff-sans);
    font-size: 26px; /* PC用に固定サイズで大きく */
    font-weight: 900;
    color: var(--color-cta-font);
    text-decoration: none;
    line-height: 1.3;
    
    /* 形状・カラー（オレンジグラデ＋立体） */
    padding: 25px 20px; /* 厚みを増す */
    border: none;
    border-radius: var(--radius-md); /* 角丸を少し大きく */
    cursor: pointer;
    
    /* ここで root変数の色を直接指定（グラデーションは変数化が難しいため） */
    background: linear-gradient(to bottom, #ffaf4b, #ff920a);
    box-shadow: 0 6px 0 #d37800, 0 6px 15px rgba(0,0,0,0.2); /* 影を強くして立体感UP */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    
    transition: all 0.2s ease; /* ホバー時の動きを滑らかに */
    position: relative;
    top: 0;
}

/* PC専用ホバーエフェクト（浮き上がる） */
.js-open-modal-btn:hover {
    transform: translateY(-3px); /* 少し上に浮く */
    box-shadow: 0 9px 0 #d37800, 0 9px 20px rgba(0,0,0,0.3); /* 影を伸ばす */
    /* 鼓動アニメーションは止めない（PCでも目立たせるため） */
}

/* 押した瞬間の挙動 */
.js-open-modal-btn:active {
    top: 6px; /* 大きく沈み込む */
    box-shadow: 0 0 0 #d37800, 0 2px 5px rgba(0,0,0,0.2); /* 影をなくす */
    transform: translateY(0); /* 浮き上がりをリセット */
}

/* アイコン設定（Font Awesome） */
.js-open-modal-btn::before {
    content: "\f101";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 15px;
    display: inline-block;
    transition: transform 0.2s;
}
/* ホバー時にアイコンを動かす */
.js-open-modal-btn:hover::before {
    transform: translateX(5px);
}

/* トリガーボタンのアニメーション（静かな鼓動） */
@keyframes subtle-breath-pc {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); } /* PCでは少し控えめに */
    100% { transform: scale(1); }
}
.js-open-modal-btn {
    /* PCでもアニメーションを適用（視線誘導のため） */
    animation: subtle-breath-pc 3s ease-in-out infinite;
    will-change: transform;
}
/* ホバー時はアニメーションを一時停止して浮き上がりを優先 */
.js-open-modal-btn:hover {
    animation-play-state: paused;
}


/* ボタン下の注釈 */
.trigger-note {
    font-size: 14px; /* PC用に固定サイズ */
    margin-top: 25px;
    color: var(--gray-500);
    line-height: 1.6;
    text-align: center;
}


/* -------------------------------------------
   フッター
   ------------------------------------------- */
#footer {
    background-color: var(--gray-50);
    padding: 40px 0;
    text-align: center;
    font-family: var(--ff-sans);
    font-size: 13px;
    color: var(--gray-500);
    border-top: 1px solid var(--gray-100);
    margin-top: 60px;
}
.footer-links a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s, text-decoration 0.2s;
}
.footer-links a:hover {
    opacity: 0.8;
    text-decoration: underline;
}
.footer-sep {
    margin: 0 1em;
    color: var(--gray-200);
}
.footer-copy {
    margin-top: 15px;
    font-style: normal;
}


/* ==========================================================================
   モーダルポップアップ（PC最適化）
   ========================================================================== */

/* モーダルの背景（オーバーレイ） */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 背景を少し濃くして集中させる */
    z-index: 9999;
    justify-content: center;
    align-items: center; /* 画面中央に配置 */
    padding: 20px;
    box-sizing: border-box;
}
/* 表示時のクラス（JSで付与） */
.modal-overlay.is-active {
    display: flex;
    /* フェードインアニメーション */
    animation: overlayFadeIn 0.3s ease-out;
}
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* モーダルの白い箱（PCサイズ固定・中央配置） */
.modal-wrap {
    width: 100%;
    max-width: 540px; /* PCでの最適な幅に固定 */
    background-color: var(--color-wfot);
    padding: 40px 30px; /* 余白を広めに */
    border-radius: var(--radius-lg); /* 角丸を大きくリッチに */
    box-shadow: 0 25px 50px rgba(0,0,0,0.5); /* 深い影で浮遊感を出す */
    position: relative;
    box-sizing: border-box;
    /* 下からスッと出てくるアニメーション */
    animation: modalSlideUpPC 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideUpPC {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 閉じるボタン（PC用に大きく、押しやすく） */
.modal-close-btn {
    position: absolute;
    top: -25px; /* 箱の外に出す */
    right: -25px;
    width: 50px;
    height: 50px;
    background-color: #000; /* 黒背景で目立たせる */
    border: 3px solid #fff; /* 白枠 */
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    z-index: 10;
}
/* ホバー時のアクション */
.modal-close-btn:hover {
    transform: scale(1.15) rotate(90deg); /* 大きくなって回転 */
    background-color: var(--dc-red); /* 赤色になって「閉じる」を強調 */
    border-color: var(--dc-red);
}
/* ×印の描画 */
.modal-close-btn::before,
.modal-close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px; /* 線を長く */
    height: 4px; /* 線を太く */
    background-color: #fff;
    border-radius: 2px;
}
.modal-close-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* モーダルヘッダー画像 */
.modal-header-img img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 軽く影をつけてリッチに */
}

/* --- PCでは進捗バーは非表示にする（HTMLに残っていても消す） --- */
.modal-progress-bar {
    display: none;
}


/* =========================================
   モーダル内の送信フォーム回り（PC最適化）
   ========================================= */

/* フォームタイトル */
.modal-content .form-box .form-box-title {
    text-align: center;
    margin-bottom: 25px;
}
.title-main {
    font-size: 22px; /* PC用に固定サイズ */
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}
.title-sub {
    font-size: 15px;
    color: var(--gray-500);
}

/* 入力フォーム（PC最適化） */
.modal-input-email {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px; /* 余白を広くして入力しやすく */
    font-size: 18px; /* 文字を大きく */
    border-radius: var(--radius-sm);
    font-family: var(--ff-sans);
    border: 2px solid var(--gray-200); /* 枠線を少し薄く上品に */
    background-color: #fff;
    color: var(--color-body);
    transition: all 0.3s ease;
    outline: none;
    /* PC特有のスタイルリセットは不要だが念のため */
    -webkit-appearance: none;
    appearance: none;
}
/* フォーカス時のスタイル */
.modal-input-email:focus {
    border-color: var(--color-main); /* メインカラーで強調 */
    box-shadow: 0 0 0 4px rgba(22, 51, 87, 0.15); /* 外側にふわっとした影 */
}
.modal-input-email::placeholder {
    color: var(--gray-500);
    opacity: 1;
}

/* 送信ボタン（modal-submit-btn）PC最適化 */
/* ※HTMLのクラス名が modal-submit-btn になっている前提です */
.modal-submit-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    
    /* タイポグラフィ */
    font-family: var(--ff-sans);
    font-size: 24px; /* PC用に固定サイズで大きく */
    font-weight: 900;
    color: var(--color-cta-font);
    text-decoration: none;
    line-height: 1.3;
    
    /* 形状・カラー（オレンジ立体） */
    padding: 22px 20px; /* 厚みを持たせる */
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-top: 20px; /* 入力欄との間隔 */
    margin-bottom: 15px;
    
    /* トリガーと同じオレンジグラデーションを直接指定 */
    background: linear-gradient(to bottom, #ffaf4b, #ff920a);
    box-shadow: 0 5px 0 #d37800, 0 5px 15px rgba(0,0,0,0.2);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    
    transition: all 0.2s ease;
    position: relative;
    top: 0;
}
/* PCホバー時（浮き上がる） */
.modal-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #d37800, 0 7px 20px rgba(0,0,0,0.3);
}
/* 押した瞬間 */
.modal-submit-btn:active {
    top: 5px;
    box-shadow: 0 0 0 #d37800, 0 2px 5px rgba(0,0,0,0.2);
    transform: translateY(0);
}

/* アイコン設定 */
.modal-submit-btn::before {
    content: "\f101"; /* Font Awesome アイコン */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 12px;
    display: inline-block;
    transition: transform 0.2s;
}
/* ホバー時にアイコンを動かす */
.modal-submit-btn:hover::before {
    transform: translateX(5px);
}

/* 脚注リスト（PC最適化） */
.form-box .second-step-note ul {
    margin-top: 35px;
    padding: 0 20px; /* 左右に少し余白 */
}
.micro-copy-list {
    list-style: none;
    padding: 0;
    text-align: left;
    font-size: 14px; /* PC用に固定サイズ */
    color: var(--gray-500);
    line-height: 1.7; /* 行間を広げて読みやすく */
}
.micro-copy-list li {
    position: relative;
    padding-left: 1.3em;
    margin-bottom: 8px;
}
.micro-copy-list li::before {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
    color: inherit;
}







.p50{font-size:50%;}







/* =====================
   共通
   ===================== */

/*font-style
-----------------------------------*/
.bold {font-weight: var(--dc-bold);}
.underline {text-decoration: underline;}
/*color*/
.red {color: var(--dc-red);}
.yellowline {background: var(--dc-yellowline);display: inline;}

/*deco*/
.center {text-align: center;}

/*size*/
.p70 {font-size: 70%;}
.p80 {font-size: 80%;}
.p105{font-size: 105%;}
.p110{font-size: 110%;}
.p120{font-size: 120%;}
.p130 {font-size: 130%;}
.p150 {font-size: 150%;}
.p170 {font-size: 170%;}
.p190 {font-size: 190%;}
.p220 {font-size: 220%;}
.p240 {font-size: 240%;}
.p350 {font-size: 350%;}

/*gyo-kan*/
.s0 {padding-bottom:0px;clear:both;}
.s5 {padding-bottom:5px;clear:both;}
.s10 {padding-bottom:10px;clear:both;}
.s15 {padding-bottom:15px;clear:both;}
.s25 {padding-bottom:25px;clear:both;}
.s35 {padding-bottom:35px;clear:both;}
.s45 {padding-bottom:45px;clear:both;}
.s50 {padding-bottom:50px;clear:both;}
.s60 {padding-bottom:60px;clear:both;}
.s65 {padding-bottom:65px;clear:both;}
.s75 {padding-bottom:75px;clear:both;}
.s100 {padding-bottom:100px;clear:both;}
.s115 {padding-bottom:115px;clear:both;}
.s125 {padding-bottom:125px;clear:both;}
.s150 {padding-bottom:150px;clear:both;}
.s400 {padding-bottom:400px;clear:both;}