*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; letter-spacing: var(--ls-wide);}
/* smooth-scroll.js と競合しないよう、CSSの scroll-behavior を無効化 */
html {scroll-behavior: auto !important;}
    :root {
    --bg:      #1c1c1c;
    --bg2:      #ffffff;
    --nl-yellow:      #ffee1d;   /* アクセント黄（ボタン等） */
    --nl-yellow-deep: #ecd400;   /* やや沈んだ黄（ホバー） */
    --nl-gray:        #ededed;   /* 装飾グレー */
    --nl-dark:        #2e2e2e;   /* 装飾ダークサークル */
    --fv-pad-x:       5%;        /* 左右の基準パディング */
    --ff-display: 'Cormorant Garamond', Georgia, serif;
    --ff-mono:    'DM Mono', monospace;

    --cf-black:        #1a1a1a;   /* セクション背景（黒） */
    --cf-panel:        #f5f5f3;   /* 角丸グレーパネル */
    --cf-ink:          #1f1f1d;   /* 見出し・氏名・入力文字 */
    --cf-label:        #2e2e2e;   /* リード文 */
    --cf-req:          #e8531f;   /* 必須マーク「*」 */
    --cf-input-bd:     #e2e2e0;   /* 入力欄ボーダー */
    --cf-yellow:       #f3de1a;   /* マーカー・送信ボタン */
    --cf-yellow-deep:  #ecd400;
    --cf-link:         #2a6fd6;   /* プライバシーポリシーリンク */

    /* Line Height (行間) */
    --lh-tight: 1.25;
    --lh-base: 1.8;
    --lh-relaxed: 2.0;

    /* Letter Spacing (字間) */
    --ls-tight: -0.02em;
    --ls-normal: 0.02em;
    --ls-wide: 0.05em;
    --ls-extra-wide: 0.1em;

    /* Font Size Scale (1.25 Ratio / Major Third) */
    --fs-xs: 0.825rem;    /* 12px */
    --fs-sm: 0.875rem;   /* 14px */
    --fs-base: 1rem;     /* 16px */
    --fs-lg: 1.25rem;    /* 20px */
    --fs-xl: 1.563rem;   /* 25px */
    --fs-2xl: 1.953rem;  /* 31px */
    --fs-3xl: 2.441rem;  /* 39px */

    --sp-0: 0;
    --sp-xs: 0.25rem;  /* 4px */
    --sp-sm: 0.5rem;   /* 8px */
    --sp-md: 1rem;     /* 16px */
    --sp-lg: 1.5rem;   /* 24px */
    --sp-xl: 2rem;     /* 32px */
    --sp-2xl: 3rem;    /* 48px */
    --sp-3xl: 4rem;    /* 64px */
    /* セクション間の大きな余白用 */
    --sp-section: clamp(3rem, 8vw, 9rem);
}
html, body {
    /* width: 100%;
    height: 100%; */
    background: var(--nl-bg);
    color: var(--nl-ink);
    overflow-x: hidden;
}
body p{
    font-size: var(--fs-xs);
    line-height: var(--lh-base);;
}

/* --- Font Size Utilities --- */
.text-xs   { font-size: var(--fs-xs); }
.text-sm   { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-lg   { font-size: var(--fs-lg); }
.text-xl   { font-size: var(--fs-xl); }
.text-2xl  { font-size: var(--fs-2xl); }
.text-3xl  { font-size: var(--fs-3xl); }

/* --- Line Height Utilities --- */
.leading-tight   { line-height: var(--lh-tight); }
.leading-normal  { line-height: var(--lh-base); }
.leading-relaxed { line-height: var(--lh-relaxed); }

/* --- Letter Spacing Utilities --- */
.tracking-tight      { letter-spacing: var(--ls-tight); }
.tracking-normal     { letter-spacing: var(--ls-normal); }
.tracking-wide       { letter-spacing: var(--ls-wide); }
.tracking-extra-wide { letter-spacing: var(--ls-extra-wide); }

/* 本文用：可読性重視 */
.prose {
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
letter-spacing: var(--ls-normal);
font-weight: 900;
}
.fb{font-weight: 900;}

/* 見出し用：力強く、かつ間延びしない設定 */
.heading {
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
/* --- Padding Utilities --- */
.p-0  { padding: var(--sp-0); }
.p-xs { padding: var(--sp-xs); }
.p-sm { padding: var(--sp-sm); }
.p-md { padding: var(--sp-md); }
.p-lg { padding: var(--sp-lg); }
.p-xl { padding: var(--sp-xl); }
/* 方向別 (X: 左右, Y: 上下) */
.px-xs { padding-left: var(--sp-xs); padding-right: var(--sp-xs); }
.px-md { padding-left: var(--sp-md); padding-right: var(--sp-md); }
.py-xs { padding-top: var(--sp-xs); padding-bottom: var(--sp-xs); }
.py-md { padding-top: var(--sp-md); padding-bottom: var(--sp-md); }
.pt-md { padding-top: var(--sp-md); }
.pb-md { padding-bottom: var(--sp-md); }
.inner{ padding: 5%;}

/* --- Margin Utilities --- */
.m-0  { margin: var(--sp-0); }
.m-auto { margin: auto; }
.m-xs { margin: var(--sp-xs); }
.m-sm { margin: var(--sp-sm); }
.m-md { margin: var(--sp-md); }
.m-lg { margin: var(--sp-lg); }
.m-xl { margin: var(--sp-xl); }
/* 方向別 (X: 左右, Y: 上下) */
.mx-md { margin-left: var(--sp-md); margin-right: var(--sp-md); }
.my-xs { margin-top: var(--sp-xs); margin-bottom: var(--sp-xs); }
.my-md { margin-top: var(--sp-md); margin-bottom: var(--sp-md); }
.mt-md { margin-top: var(--sp-md); }
.mb-md { margin-bottom: var(--sp-md); }

/* --- Layout Components --- */
/* セクション用コンテナ（レスポンシブな上下余白） */
.section-gap {
    padding-top: var(--sp-section);
    padding-bottom: var(--sp-section);
}
/* 要素間の等間隔配置（Modern CSS: Gap） */
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-sm); }
.stack-md { display: flex; flex-direction: column; gap: var(--sp-md); }
.cluster  { display: flex; flex-wrap: wrap; gap: var(--sp-md); }

.center-block {
    margin-left: auto;   /* 左の余白を自動調整 */
    margin-right: auto;  /* 右の余白を自動調整 */
}
/* グリッドレイアウト（PC3列 SP1列） */
.grid {
    display: grid;
    grid-template-columns: 1fr;         /* スマホ: 1列 */
    gap: 16px;
}
@media (min-width: 768px) {
.grid {
    grid-template-columns: repeat(3, 1fr); /* PC: 3列 */
}
}

/* グリッドレイアウト（PC2列 SP1列） */
.grid2 {
    display: grid;
    grid-template-columns: 1fr;         /* スマホ: 1列 */
    gap: 16px;
}
@media (min-width: 768px) {
.grid2 {
    grid-template-columns: repeat(2, 1fr); /* PC: 2列 */
    gap: 40px;
}
}

.attempt-jp{
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 12px;
    margin-top: 4px;
    vertical-align: bottom;
}
.attempt-jp::before{
    border-top: 1px solid;
    content: "";
    width: 4em;
    margin-right: 1em;
}
.attempt2-jp{
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 14px;
    margin-top: 4px;
    vertical-align: bottom;
}
.attempt2-jp::before{
    border-top: 1px solid;
    content: "";
    width: 1em;
    margin-right: 0.5em;
}
.f_type1{
    font-family: "Bowlby One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 72px;
    color: grey;
}
.f_type2{
    font-family: "Bowlby One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 60px;
    color: #D4D4D4;
}
.btn-gradient-animated {
background-color: grey;
background-size: 200% 200%;
color: white;
border: none;
padding: 6px 12px;
font-size: var(--fs-xs);
border-radius: 50px;
cursor: pointer;
font-weight: 500;
}

img {
    max-width: 100%;    /* 親要素の幅を超えないようにする */
    height: auto;       /* アスペクト比を維持して高さを自動調整 */
    vertical-align: bottom; /* インライン要素特有の下の隙間を消す */
    display: block;     /* レイアウトしやすくするためにブロック化（推奨） */
}

.ttl_s1{
    font-size: var(--fs-3xl);
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 900;
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-tight);
}
.ttl_s1 span{
    display: block;
    font-size: clamp(14px, 4vw, 18px);
    color: gray;
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    line-height: var(--lh-tigh);
}
.news_img{
    padding: 16px 0;
}
.ttl_s2{
    font-size: 3rem;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 900;
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-tight);
}
.ttl_s2 .accent_c{
    color: 
    #f74008;
}
.ttl_s2_sub{
    display: block;
    font-size: clamp(14px, 4vw, 18px);
    color: gray;
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    line-height: var(--lh-tigh);
}
.ttl_s3{
    font-size: var(--fs-lg);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-base);
}
.mission p{
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.company {
    position: relative;
    background: #111;
    overflow: hidden;
    padding-bottom: 150px;
}
.profile-table {
    width: 100%;
    border-collapse: collapse;
}

.profile-table tr {
    border-top: 1px solid #ffffff;
}
.profile-table tr:first-child {
    border-top: none;
}
.profile-table tr:last-child {
    border-bottom: 1px solid #ffffff;
}

.profile-table td {
padding: 22px 0;
vertical-align: top;
line-height: 1.9;
}
.profile-table .label {
    white-space: nowrap;
    padding-right: 30px;
    width: 90px;
    padding-left: 20px;
}

.value p {
    margin: 0;
}
/* ── フェードイン ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.profile-table tr {
opacity: 0;
animation: fadeUp 0.55s ease forwards;
}

.profile-table tr:nth-child(1) { animation-delay: 0.10s; }
.profile-table tr:nth-child(2) { animation-delay: 0.20s; }
.profile-table tr:nth-child(3) { animation-delay: 0.30s; }
.profile-table tr:nth-child(4) { animation-delay: 0.40s; }
.profile-table tr:nth-child(5) { animation-delay: 0.50s; }

@keyframes fadeIn {
    from {
    opacity: 0;
    transform: translateY(2rem);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.card-rad{
border-radius: 8px;
/* スクロールに応じてアニメーション */
animation: fadeIn linear;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
.card-sha{
    box-shadow: 1px 1px 3px #333333;
}

.tx_uno{
    text-decoration: none;
}
.bgimg{
    width: 100%;
    height: 100%;
    background-image: url(../img/bg2.jpg);
    background-size: cover;
    background-position: center;    /* 中央に配置 */
    background-repeat: no-repeat;  /* 繰り返しなし */
}
.card {
gap: 12px;
align-items: center; /* 画像を中央に */
text-align: center;  /* テキストを中央に */
}
.logo-box{
    width: 150px;
}
small{
    font-size: var(--fs-xs);
}
.btn-area {
    padding: 32px 0px;
    display: flex;
    justify-content: center;
}
.btn-area {
    padding: 24px 24px 0;
    display: flex;
    justify-content: center;
}
.btn {
display: inline-block;
padding: 20px 48px;
width: 300px;
background: linear-gradient(135deg, #f5a623 0%, #e84517 55%, #c93500 100%);
box-shadow: 0 4px 20px rgba(232, 69, 23, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18);
transition: transform 0.2s ease, box-shadow 0.2s ease;
color: #ffffff;
border: none;
border-radius: 9999px;
font-size:  var(--fs-base);
font-weight: 900;
cursor: pointer;
}
.btn:hover {
background: #f97316;
color: #ffffff;
transition: 0.15s, color 0.15s;
}
.btn2 {
    display: inline-block;
    padding: 20px 48px;
    width: 300px;
    background: var(--text2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.18);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    font-size:  var(--fs-base);
    font-weight: 900;
    cursor: pointer;
    }


.contact{
    position: relative;
    background: #ffffff;
    overflow: hidden;
    padding-bottom: 50px;
}
.contact p{
    color: var(--text2);
    text-align: center;
}
.white_bg{
    background-color: #ffffff;
}
.grad_bg2 {
    padding: 20px 0 200px;
    position: absolute;
    inset: 0;
    background-image: url(../img/co_bg.jpg);
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 73%, white 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 73%, white 100%);
}
.ttl_s4{
    font-size: 3rem;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 900;
    text-align: center;
    letter-spacing: var(--ls-normal);
    line-height: 1.3;
    padding-bottom: 16px;
}

.ttl_s4 .accent_c{
    color: var(--text2);
}
.ttl_s4_sub{
    display: block;
    font-size: clamp(14px, 4vw, 18px);
    color: #f74008;
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    line-height: var(--lh-tigh);
}

@media only screen and (min-width:769px){
    .pc_no{
        display: none;
    }
    .inner {
        padding: 3%;
        max-width: 1200px;
        margin: 0 auto;
    }
    .my-md {
        margin-top: var(--sp-xl);
        margin-bottom: var(--sp-xl);
    }
    .about_img{
        max-width: 350px;
        margin: 0 auto;
    }
    .about_txt{
        padding: 3rem 0 0;
    }
    .bgimg {
        width: 100%;
        max-width: none;
        height: 100%;
        background-image: url(../img/bg2.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .offer_txt{
        text-align: center;
    }
    .flex{
        width: 100%;
        display: flex;
    }
}

.head_type1{
    display: block;
    width: 100%;
    background-color: var(--bg2);
    min-height: 30px;
}
.head_logo{
    width: 30%;
    max-width: 120px;
}
.single_ttl{
    color: var(--text);
    font-size: var(--fs-lg);
    margin-bottom: 8px;
}
table a{
    color: grey;
}

.hero__kaso {
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-image:
    linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)),url(../img/head_bg.jpg);
    background-size: cover;
    background-position: center top;
}

/* ===== LOGO ===== */

/* ===== CENTER TITLE ===== */
.hero-center {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -46%);
text-align: center;
white-space: nowrap;
}
.hero-ja {
font-size: 48px;
font-weight: 700;
color: #fff;
letter-spacing: 0.14em;
line-height: 1;
}
.hero-en {
font-size: 17px;
font-weight: 700;
color: #fff;
letter-spacing: 0.25em;
margin-top: 12px;
}

/* ===== DIAGONAL CUT (bottom) ===== */
.hero-cut {
position: absolute;
bottom: -1px;
left: 0;
right: 0;
line-height: 0;
}
.hero-cut svg { display: block; width: 100%; }

/* ===== CONTENT ===== */
.content {
background: #fff;
padding: 52px 20px 64px;
text-align: center;
}
.content p {
color: #111;
line-height: 2.1;
}
.content .tel {
color: #111;
margin-top: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
.hero__kaso { height: 250px; }
.hero-ja { font-size: var(--fs-2xl); }
.hero-en { font-size: var(--fs-xs); }
}

/* ─── ページ全体のラッパー ─── */
.form-page {
max-width: 750px;
margin: 60px auto;
padding: 0 24px 80px;
}

/* ─── 必須凡例 ─── */
.form-legend {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--accent);
margin-bottom: 20px;
}

.form-legend::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}

/* ─── 区切り線 ─── */
.form-divider {
border: none;
border-top: 1px solid var(--border);
margin-bottom: 0;
}

/* ─── フォーム本体 ─── */
.contact-form {
margin-top: 0;
}

/* ─── 各行 ─── */
.form-row {
display: flex;
align-items: center;
border-bottom: 1px solid var(--border);
padding: 28px 0;
gap: 24px;
}

/* ─── ラベル列 ─── */
.form-label {
width: var(--label-w);
flex-shrink: 0;
font-size: 14px;
font-weight: 500;
color: var(--text2);
display: flex;
align-items: center;
gap: 10px;
width: 180px;
}

.form-label.required::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}

/* ─── 入力フィールド列 ─── */
.form-field {
flex: 1;
background-color: lightgray;
text-align: left;
}

/* ─── input / select / textarea 共通 ─── */
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
background: var(--bg-input);
border: 1px solid transparent;
border-radius: 3px;
padding: 14px 16px;
font-family: inherit;
font-size: 14px;
color: var(--text);
letter-spacing: 0.04em;
appearance: none;
-webkit-appearance: none;
outline: none;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
color: var(--text-muted);
font-weight: 300;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--accent);
background: #fff;
box-shadow: 0 0 0 3px rgba(74,184,224,0.12);
}

/* ─── select カスタム矢印 ─── */
.select-wrap {
position: relative;
}

.select-wrap select {
cursor: pointer;
color: var(--text-muted);
}

.select-wrap select option {
color: var(--text);
}

.select-wrap::after {
content: '';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #aaa;
pointer-events: none;
transition: border-top-color 0.2s;
}

.select-wrap:focus-within::after {
border-top-color: var(--accent);
}

/* ─── 半幅フィールド（お名前など） ─── */
.form-field.half input {
max-width: 420px;
}

/* ─── textarea ─── */
.form-field textarea {
resize: vertical;
min-height: 160px;
line-height: 1.8;
}

/* ─── ラジオ・チェックボックス ─── */
.form-check-group {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.form-check-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
user-select: none;
}

.form-check-label input[type="radio"],
.form-check-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent);
cursor: pointer;
flex-shrink: 0;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}

/* ─── 送信ボタン ─── */
.form-submit {
margin-top: 48px;
text-align: center;
}

.btn-submit {
display: inline-block;
min-width: 240px;
padding: 16px 48px;
background: var(--accent);
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.1em;
border: none;
border-radius: 2px;
cursor: pointer;
transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
box-shadow: 0 4px 16px rgba(74,184,224,0.3);
}

.btn-submit:hover {
background: #2fa8d0;
box-shadow: 0 6px 22px rgba(74,184,224,0.4);
transform: translateY(-1px);
}

.btn-submit:active {
transform: translateY(0);
}

/* ─── プライバシーポリシー同意 ─── */
.privacy-note {
font-size: 12px;
color: #888;
text-align: center;
margin-top: 20px;
line-height: 1.8;
}

.privacy-note a {
color: var(--accent);
text-decoration: none;
}

.privacy-note a:hover {
text-decoration: underline;
}

/* ════════════════════════════════
    レスポンシブ（タブレット以下）
    ════════════════════════════════ */
@media (max-width: 768px) {
.form-page {
    margin: 32px auto;
    padding: 0 16px 60px;
}

.form-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 0;
    gap: 10px;
}

.form-label {
    width: 100%;
    font-size: 13px;
}

.form-field {
    width: 100%;
}

.form-field.half input {
    max-width: 100%;
}

.form-field input,
.form-field select,
.form-field textarea {
    font-size: 16px; /* iOSズーム防止 */
    padding: 13px 14px;
}

.btn-submit {
    width: 100%;
    max-width: 360px;
}
}

@media (max-width: 480px) {
.form-check-group {
    flex-direction: column;
    gap: 14px;
}
}

/* =====================
スクロールフェードアップ
===================== */
.js-fade {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* ディレイバリエーション */
.js-fade[data-delay="100"] { transition-delay: 0.1s; }
.js-fade[data-delay="200"] { transition-delay: 0.2s; }
.js-fade[data-delay="300"] { transition-delay: 0.3s; }
.js-fade[data-delay="400"] { transition-delay: 0.4s; }
.js-fade[data-delay="500"] { transition-delay: 0.5s; }
/* profile-table の既存CSSアニメを上書き（JS制御に統一） */
.profile-table tr {
    opacity: 0;
    animation: none;         /* 既存のCSSアニメを無効化 */
    transform: translateY(20px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}
.profile-table.is-visible tr          { opacity: 1; transform: translateY(0); }
.profile-table.is-visible tr:nth-child(1) { transition-delay: 0.05s; }
.profile-table.is-visible tr:nth-child(2) { transition-delay: 0.15s; }
.profile-table.is-visible tr:nth-child(3) { transition-delay: 0.25s; }
.profile-table.is-visible tr:nth-child(4) { transition-delay: 0.35s; }
.profile-table.is-visible tr:nth-child(5) { transition-delay: 0.45s; }