/* ================================================
   福祉用具専門相談員指定講習会 LP - style.css
   ハクビデザイン参考：緑・水色・オレンジ系カラー
================================================ */

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #333;
    background: #fff;
    line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }

a { text-decoration: none; color: inherit; transition: .3s ease; }

ul { list-style: none; }

/* ===== VARIABLES ===== */
:root {
    --green-main:   #238c00;
    --green-dark:   #1b6a00;
    --green-light:  rgba(35,140,0,.1);
    --green-mid:    rgba(35,140,0,.9);
    --blue-main:    #37beeb;
    --blue-mid:     rgba(55,190,235,.9);
    --blue-light:   rgba(55,190,235,.1);
    --orange-main:  #e67014;
    --orange-mid:   rgba(230,112,20,.9);
    --orange-light: rgba(230,112,20,.1);
    --red-main:     #d90000;
    --yellow-bg:    #fefed1;
    --gray-bg:      #fafafa;
    --white:        #ffffff;
    --text-main:    #333333;
    --text-sub:     #666666;
    --shadow:       0 2px 12px rgba(0,0,0,.12);
    --radius:       8px;
    --max-width:    1000px;
}

/* ===== WRAPPER ===== */
.wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== FLOAT CTA (SP) ===== */
.float-cta-sp {
    display: none;
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(255,255,255,.95);
    box-shadow: 0 -2px 8px rgba(0,0,0,.15);
}
.float-cta-sp a {
    display: block;
    float: left;
    width: 50%;
    padding: 12px 0;
    text-align: center;
    font-size: .85em;
    font-weight: 700;
    color: #fff;
}
.float-btn-contact { background: var(--green-main); }
.float-btn-tel     { background: var(--blue-main);  }

/* ===== HEADER ===== */
#header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.97);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    padding: 10px 0;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.header-logo { flex-shrink: 0; }
.header-tagline {
    font-size: .65em;
    color: var(--green-main);
    font-weight: 700;
    display: block;
}
.logo-text {
    font-size: 1.2em;
    font-weight: 900;
    color: #222;
    line-height: 1.2;
}
.logo-text span { color: var(--green-main); }

.header-nav ul { display: flex; gap: 4px; flex-wrap: wrap; }
.header-nav ul li a {
    display: block;
    padding: 6px 10px;
    font-size: .8em;
    font-weight: 700;
    border-radius: 4px;
    color: #444;
    transition: .2s;
}
.header-nav ul li a:hover { background: var(--green-light); color: var(--green-main); }
.header-nav ul li.nav-cta a {
    background: var(--green-main);
    color: #fff;
    padding: 8px 14px;
}
.header-nav ul li.nav-cta a:hover { background: var(--green-dark); }

.header-tel { text-align: right; flex-shrink: 0; }
.tel-label  { font-size: .7em; color: #666; }
.tel-number { font-size: 1.5em; font-weight: 900; color: var(--green-main); letter-spacing: 1px; line-height: 1.2; }
.tel-hours  { font-size: .65em; color: #888; }

/* ===== HERO ===== */
.hero {
    position: relative;
    background: linear-gradient(135deg, #1b6a00 0%, #238c00 40%, #3ca800 70%, #7bc80a 100%);
    color: #fff;
    padding: 70px 20px 90px;
    text-align: center;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }

.hero-badge {
    display: inline-block;
    background: var(--orange-main);
    color: #fff;
    font-size: .85em;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: 30px;
    margin-bottom: 16px;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.hero-title {
    font-size: 3em;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 16px;
    text-shadow: 1px 2px 4px rgba(0,0,0,.3);
}
.hero-title-small {
    display: block;
    font-size: .45em;
    font-weight: 700;
    opacity: .9;
    margin-bottom: 4px;
}
.hero-title-accent {
    display: block;
    color: #ffe066;
    font-size: 1.1em;
}

.hero-subtitle {
    font-size: 1.1em;
    margin-bottom: 28px;
    opacity: .95;
    font-weight: 500;
}

.hero-features {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.hero-feature-item {
    background: rgba(255,255,255,.15);
    border: 2px solid rgba(255,255,255,.4);
    border-radius: var(--radius);
    padding: 12px 18px;
    min-width: 100px;
    text-align: center;
    backdrop-filter: blur(4px);
}
.hero-feature-item i {
    font-size: 1.6em;
    display: block;
    margin-bottom: 6px;
    color: #ffe066;
}
.hero-feature-item span { font-size: .8em; font-weight: 700; line-height: 1.3; }

.hero-cta-wrap {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== BUTTONS ===== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--orange-main);
    color: #fff;
    font-size: 1.1em;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(230,112,20,.4);
    transition: .25s;
}
.btn-primary:hover { background: #c05d0a; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(230,112,20,.5); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.7);
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: var(--radius);
    transition: .25s;
}
.btn-secondary:hover { background: rgba(255,255,255,.35); }

.hero-wave {
    position: absolute;
    bottom: -1px; left: 0;
    width: 100%;
    line-height: 0;
}
.hero-wave svg { display: block; width: 100%; }

/* ===== PICKUP BANNER ===== */
.pickup-banner {
    background: var(--yellow-bg);
    padding: 18px 0;
    border-bottom: 3px solid #e6d800;
}
.pickup-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}
.pickup-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .9em;
}
.pickup-item i { color: var(--green-main); font-size: 1.3em; }

/* ===== SECTION TITLES ===== */
.section-title {
    font-size: 1.8em;
    font-weight: 900;
    color: #fff;
    text-align: center;
    background: var(--green-mid);
    padding: .4em 0;
    margin-bottom: 0;
    position: relative;
}
.section-title span { display: inline-block; padding: 0 .5em; }
.section-title::after {
    content: '';
    display: block;
    width: 0; height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 20px solid var(--green-main);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.section-title-white { background: rgba(55,190,235,.9); }
.section-title-white::after { border-top-color: var(--blue-main); }

/* ===== ABOUT SECTION ===== */
.section-about { background: #fff; padding-bottom: 40px; }

.about-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 36px 0 20px;
}
.about-text-block { flex: 1; }
.about-text-block h3 {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--green-main);
    background: var(--green-light);
    padding: 6px 12px;
    margin: 20px 0 10px;
    display: inline-block;
}
.about-text-block h3:first-child { margin-top: 0; }
.about-text-block p {
    font-size: 1em;
    line-height: 1.8;
    color: #444;
    margin-bottom: 8px;
}
.about-text-block strong { color: var(--green-main); }

.about-image-block {
    flex-shrink: 0;
    width: 200px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.about-icon-card {
    background: var(--green-light);
    border: 2px solid rgba(35,140,0,.3);
    border-radius: var(--radius);
    padding: 16px 8px;
    text-align: center;
}
.about-icon-card i { font-size: 1.8em; color: var(--green-main); margin-bottom: 8px; }
.about-icon-card p { font-size: .72em; font-weight: 700; color: #333; margin: 0; line-height: 1.3; }

/* ===== TEXTLINK BUTTON ===== */
.about-link-wrap { text-align: center; padding: 28px 0 12px; }
.textlink-btn {
    display: inline-block;
    font-size: 1.2em;
    font-weight: 700;
    padding: .5em 2.5em;
    border: 4px solid var(--blue-main);
    color: var(--blue-main);
    background: #fff;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: .3s;
}
.textlink-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--blue-mid);
    transform: scaleX(0);
    transform-origin: left;
    z-index: -1;
    transition: .3s ease;
}
.textlink-btn:hover { color: #fff; }
.textlink-btn:hover::after { transform: scaleX(1); }

/* ===== PERSON (向いている方) ===== */
.person-section { padding: 32px 0; }
.person-block {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: var(--shadow);
}
.person-title {
    font-size: 1.3em;
    font-weight: 700;
    padding: 12px 20px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}
.person-title-blue   { background: var(--blue-mid); }
.person-title-orange { background: var(--orange-mid); }

.person-content {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
    background: #fff;
    border: 3px solid transparent;
}
.person-block-blue   .person-content { border-color: var(--blue-main); }
.person-block-orange .person-content { border-color: var(--orange-main); }
.person-content-rev  { flex-direction: row; }

.person-text { flex: 1; }
.person-text p { font-size: .95em; color: #444; margin-bottom: 12px; }

.person-illust {
    width: 100px;
    text-align: center;
    flex-shrink: 0;
}
.person-icon-large {
    font-size: 4.5em;
    color: var(--blue-main);
    opacity: .8;
}
.person-icon-large.orange { color: var(--orange-main); }

.circle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.circle-item {
    border-radius: 50%;
    width: 90px; height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.circle-item span {
    font-size: .72em;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.3;
}
.circle-blue   { background: var(--blue-mid); }
.circle-orange { background: var(--orange-mid); }

/* ===== ONLINE FEATURE ===== */
.section-online {
    background: linear-gradient(135deg, #1b6a00 0%, #238c00 100%);
    padding-bottom: 48px;
}
.section-online .section-title-white { margin-bottom: 0; }
.section-online .about-link-wrap .textlink-btn {
    border-color: rgba(255,255,255,.9);
    color: #fff;
    background: rgba(255,255,255,.1);
}
.section-online .about-link-wrap .textlink-btn::after { background: rgba(255,255,255,.2); }
.section-online .about-link-wrap .textlink-btn:hover  { color: var(--green-main); }
.section-online .about-link-wrap .textlink-btn:hover::after { background: #fff; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 32px 0 20px;
}
.feature-card {
    background: rgba(255,255,255,.95);
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    text-align: center;
}
.feature-num {
    font-size: .75em;
    font-weight: 700;
    color: #999;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.feature-num span { font-size: 1.6em; color: var(--green-main); margin-left: 2px; }
.feature-icon { font-size: 2.4em; color: var(--green-main); margin-bottom: 12px; }
.feature-title {
    font-size: 1em;
    font-weight: 700;
    color: var(--green-main);
    margin-bottom: 12px;
    line-height: 1.4;
}
.feature-text { font-size: .85em; color: #555; line-height: 1.7; text-align: left; }

/* ===== CURRICULUM ===== */
.section-curriculum { background: var(--gray-bg); padding-bottom: 40px; }

.curriculum-intro {
    text-align: center;
    font-size: 1em;
    color: #555;
    padding: 24px 0 16px;
}

.curriculum-table-wrap {
    overflow-x: auto;
    margin: 0 0 12px;
}
.curriculum-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95em;
}
.curriculum-table thead tr {
    background: var(--green-main);
    color: #fff;
}
.curriculum-table th {
    padding: 12px 16px;
    text-align: center;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.2);
}
.th-subject { width: 55%; text-align: left; }
.th-hours   { width: 20%; }
.th-format  { width: 25%; }

.curriculum-table tbody tr {
    border-bottom: 1px solid #ddd;
    transition: .2s;
}
.curriculum-table tbody tr:nth-child(even) { background: rgba(35,140,0,.05); }
.curriculum-table tbody tr:hover { background: var(--green-light); }
.curriculum-table td { padding: 12px 16px; }
.curriculum-table td:nth-child(2) { text-align: center; font-weight: 700; color: var(--green-main); }
.curriculum-table td:nth-child(3) { text-align: center; }

.tr-total { background: rgba(35,140,0,.12) !important; }
.tr-total td { font-size: 1.05em; }

/* スマホでの合計行（colspan="2"で2列結合済み） */
@media (max-width: 768px) {
    .tr-total td:nth-child(2) {
        font-size: .85em;
    }
}

.badge-online {
    display: inline-block;
    background: var(--blue-mid);
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

.badge-ondemand {
    display: inline-block;
    background: var(--blue-mid);
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

.badge-zoom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--green-main);
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.badge-exam {
    display: inline-block;
    background: #888;
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

.tr-zoom {
    background: rgba(35,140,0,.07) !important;
}
.tr-zoom td:nth-child(2) {
    color: var(--green-main);
    font-weight: 700;
}

.tr-exam {
    background: rgba(0,0,0,.03) !important;
}
.tr-exam td:nth-child(2) {
    color: #888;
    font-weight: 700;
}

.curriculum-note {
    font-size: .82em;
    color: #888;
    padding: 0 4px 8px;
}

/* ===== FLOW ===== */
.section-flow { background: #fff; padding-bottom: 48px; }

.flow-steps { padding: 32px 0 16px; }

.flow-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: var(--shadow);
    border-left: 6px solid var(--green-main);
    position: relative;
}
.flow-step-goal { border-left-color: var(--orange-main); }

.step-head {
    flex-shrink: 0;
    text-align: center;
    background: var(--green-light);
    border-radius: var(--radius);
    padding: 8px 14px;
    min-width: 64px;
}
.step-head-goal { background: var(--orange-light); }

.step-label {
    display: block;
    font-size: .65em;
    font-weight: 700;
    color: var(--green-main);
    letter-spacing: 2px;
}
.step-head-goal .step-label { color: var(--orange-main); }

.step-num {
    display: block;
    font-size: 2.2em;
    font-weight: 900;
    color: var(--green-main);
    line-height: 1;
}
.step-head-goal .step-num { color: var(--orange-main); }

.step-title {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--green-main);
    margin-bottom: 8px;
}
.flow-step-goal .step-title { color: var(--orange-main); }

.step-desc { font-size: .9em; color: #555; line-height: 1.7; margin-bottom: 12px; }

.step-col2 {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.step-sub-item {
    flex: 1;
    border-radius: var(--radius);
    padding: 14px 16px;
}
.bg-green-light { background: var(--green-light); border: 1px solid rgba(35,140,0,.2); }
.bg-blue-light  { background: var(--blue-light);  border: 1px solid rgba(55,190,235,.3); }

.step-sub-title {
    font-size: .85em;
    font-weight: 700;
    margin: 0 0 8px !important;
    padding: 4px 8px !important;
}
.bg-green-light .step-sub-title { color: var(--green-main); background: rgba(35,140,0,.15) !important; }
.bg-blue-light  .step-sub-title { color: var(--blue-main);  background: var(--blue-light) !important; }

.step-sub-item ul { padding-left: 4px; }
.step-sub-item ul li {
    font-size: .82em;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(0,0,0,.1);
    color: #444;
}
.step-sub-item ul li::before { content: '・'; }
.step-sub-item ul li:last-child { border-bottom: none; }

.pass-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red-main);
    color: #fff;
    font-size: 1.1em;
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 30px;
    margin-top: 8px;
}

.flow-arrow {
    text-align: center;
    font-size: 1.8em;
    color: var(--green-main);
    margin: 8px 0;
    opacity: .7;
}

.flow-note {
    text-align: center;
    font-size: 1em;
    font-weight: 700;
    color: var(--orange-main);
    background: var(--orange-light);
    padding: 12px 24px;
    border-radius: var(--radius);
    border: 2px solid rgba(230,112,20,.3);
    margin: 8px 0;
}
.flow-note i { margin-right: 6px; }

/* ===== PRICE ===== */
.section-price { background: var(--gray-bg); padding-bottom: 48px; }

.price-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 0 16px;
    flex-wrap: wrap;
}
.price-badge {
    display: inline-block;
    background: var(--blue-main);
    color: #fff;
    font-size: 1.1em;
    font-weight: 700;
    padding: .25em .8em;
    border-radius: var(--radius);
}
.price-tag-text { font-size: 1em; font-weight: 700; color: var(--red-main); }

.price-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.price-col { text-align: center; }
.price-label {
    font-size: .8em;
    font-weight: 700;
    color: #888;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.price-value {
    font-size: 2em;
    font-weight: 900;
    line-height: 1.1;
}
.price-value span { font-size: .5em; font-weight: 500; }
.price-strikethrough {
    color: #aaa;
    text-decoration: line-through;
    text-decoration-color: var(--red-main);
}
.price-main { color: var(--red-main); font-size: 2.6em; }
.price-note { font-size: .75em; color: #888; margin-top: 4px; }

.price-arrow {
    font-size: 1.8em;
    color: var(--red-main);
    flex-shrink: 0;
}

.price-includes {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}
.price-includes-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--green-main);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.price-includes-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.price-includes-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9em;
    color: #444;
}
.price-includes-list li i { color: var(--green-main); font-size: 1em; }

.subsidy-box {
    background: linear-gradient(135deg, rgba(55,190,235,.08) 0%, rgba(55,190,235,.15) 100%);
    border: 2px solid var(--blue-main);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 8px;
}
.subsidy-title {
    font-size: 1em;
    font-weight: 700;
    color: var(--blue-main);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.subsidy-text { font-size: .9em; color: #555; line-height: 1.8; }
.subsidy-text strong { color: var(--blue-main); }

/* ===== FAQ ===== */
.section-faq { background: #fff; padding-bottom: 48px; }

.faq-list { padding: 28px 0; }

.faq-item {
    margin-bottom: 12px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.faq-question {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(55,190,235,.1);
    padding: 16px 20px;
    cursor: pointer;
    border-bottom: 1px dotted var(--blue-main);
    transition: .2s;
}
.faq-question:hover { background: rgba(55,190,235,.18); }
.faq-question p {
    flex: 1;
    font-size: 1em;
    font-weight: 700;
    color: var(--blue-main);
    margin: 0;
}
.faq-toggle {
    color: var(--blue-main);
    transition: .3s;
    flex-shrink: 0;
}
.faq-item.open .faq-toggle { transform: rotate(180deg); }

.faq-answer {
    display: none;
    align-items: flex-start;
    gap: 12px;
    background: rgba(231,0,111,.05);
    padding: 16px 20px;
    border-bottom: 1px dotted rgba(231,0,111,.4);
}
.faq-answer p {
    font-size: .95em;
    color: #555;
    line-height: 1.75;
    flex: 1;
    margin: 0;
}
.faq-item.open .faq-answer { display: flex; }

.faq-icon {
    display: inline-block;
    min-width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    text-align: center;
    font-size: 1.2em;
    font-weight: 900;
    flex-shrink: 0;
}
.faq-icon.q { background: var(--blue-mid); color: #fff; }
.faq-icon.a { background: rgba(231,0,111,.8); color: #fff; }

/* ===== CONTACT ===== */
.section-contact {
    background: linear-gradient(135deg, rgba(55,190,235,.1) 0%, rgba(55,190,235,.2) 100%);
    padding-bottom: 60px;
}
.contact-intro {
    text-align: center;
    font-size: .95em;
    color: #555;
    padding: 24px 0 16px;
    line-height: 1.8;
}

.contact-tel-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 20px 28px;
    box-shadow: var(--shadow);
    margin-bottom: 28px;
    border-left: 6px solid var(--green-main);
}
.contact-tel-box > i { font-size: 2.2em; color: var(--green-main); flex-shrink: 0; }
.contact-tel-label  { font-size: .8em; color: #888; margin: 0; }
.contact-tel-number { font-size: 1.8em; font-weight: 900; color: var(--green-main); letter-spacing: 1px; line-height: 1.2; margin: 0; }
.contact-tel-hours  { font-size: .75em; color: #999; margin: 0; }

.contact-form {
    background: #fff;
    border-radius: 12px;
    padding: 32px 36px;
    box-shadow: var(--shadow);
}

.form-group { margin-bottom: 20px; }
.form-label {
    display: block;
    font-size: .9em;
    font-weight: 700;
    color: #444;
    margin-bottom: 6px;
}
.required-badge {
    display: inline-block;
    background: var(--red-main);
    color: #fff;
    font-size: .7em;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #ddd;
    border-radius: var(--radius);
    font-size: .95em;
    font-family: inherit;
    color: #333;
    transition: .2s;
    background: #fafafa;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--green-main);
    background: #fff;
    box-shadow: 0 0 0 3px var(--green-light);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-check-group { display: flex; align-items: center; }
.form-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .9em;
    color: #555;
}
.form-check-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green-main); }
.privacy-link { color: var(--blue-main); text-decoration: underline; }

.form-submit { text-align: center; margin-top: 8px; }
.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--green-main);
    color: #fff;
    font-size: 1.15em;
    font-weight: 700;
    padding: 14px 48px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: .25s;
    box-shadow: 0 4px 12px rgba(35,140,0,.3);
}
.btn-submit:hover { background: var(--green-dark); transform: translateY(-2px); }

.form-success {
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 48px 24px;
    box-shadow: var(--shadow);
}
.form-success i { font-size: 3em; color: var(--green-main); display: block; margin-bottom: 16px; }
.form-success h3 { font-size: 1.4em; color: var(--green-main); margin-bottom: 12px; }
.form-success p { font-size: .95em; color: #666; line-height: 1.8; }

/* ===== APPLY BANNER ===== */
.apply-banner {
    display: flex;
    align-items: center;
    gap: 40px;
    background: #fff;
    border-radius: 16px;
    padding: 40px 48px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    margin: 32px 0 48px;
    border-left: 8px solid var(--green-main);
    flex-wrap: wrap;
}

.apply-banner-left {
    flex: 1;
    min-width: 260px;
}

.apply-banner-lead {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--orange-light);
    color: var(--orange-main);
    font-size: .85em;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(230,112,20,.3);
    margin-bottom: 12px;
}

.apply-banner-title {
    font-size: 1.4em;
    font-weight: 900;
    color: #222;
    line-height: 1.4;
    margin-bottom: 12px;
}
.apply-banner-title span {
    color: var(--green-main);
    font-size: 1.05em;
}

.apply-banner-note {
    font-size: .85em;
    color: #666;
    line-height: 1.8;
}

.apply-banner-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.apply-banner-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--orange-main);
    color: #fff;
    font-weight: 700;
    padding: 18px 40px;
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(230,112,20,.4);
    transition: .25s;
    text-align: center;
    min-width: 220px;
}
.apply-banner-btn i {
    font-size: 1.5em;
    margin-bottom: 2px;
}
.apply-banner-btn span {
    font-size: 1.15em;
    letter-spacing: .5px;
}
.apply-banner-btn small {
    font-size: .72em;
    opacity: .88;
    font-weight: 500;
}
.apply-banner-btn:hover {
    background: #c05d0a;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(230,112,20,.5);
}

.apply-banner-tel {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--green-light);
    border: 1px solid rgba(35,140,0,.2);
    border-radius: var(--radius);
    padding: 14px 20px;
    width: 100%;
}
.apply-banner-tel > i {
    font-size: 1.6em;
    color: var(--green-main);
    flex-shrink: 0;
}
.apply-tel-label  { font-size: .72em; color: #888; margin: 0; }
.apply-tel-number { font-size: 1.35em; font-weight: 900; color: var(--green-main); letter-spacing: 1px; line-height: 1.2; margin: 0; }
.apply-tel-hours  { font-size: .68em; color: #999; margin: 0; }

@media (max-width: 768px) {
    .apply-banner {
        flex-direction: column;
        padding: 28px 20px;
        gap: 24px;
    }
    .apply-banner-right {
        width: 100%;
    }
    .apply-banner-btn {
        width: 100%;
    }
    .apply-banner-title {
        font-size: 1.15em;
    }
}

/* ===== FOOTER ===== */
#footer {
    background: var(--blue-mid);
    color: #fff;
    padding: 28px 0 60px;
}
.footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.footer-logo-text {
    font-size: 1.15em;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 4px;
}
.footer-logo-sub {
    display: block;
    font-size: .78em;
    font-weight: 500;
    opacity: .88;
    margin-top: 2px;
}
.footer-corp { font-size: .75em; opacity: .75; margin: 4px 0 2px; }
.footer-copy { font-size: .68em; opacity: .7; margin: 0; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-nav ul li a {
    font-size: .85em;
    color: rgba(255,255,255,.9);
    padding: 4px 10px;
    border-bottom: 1px solid rgba(255,255,255,.3);
    transition: .2s;
}
.footer-nav ul li a:hover { color: #fff; border-bottom-color: #fff; }

/* ===== PAGE TOP ===== */
.page-top-btn {
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 46px;
    height: 46px;
    background: var(--green-main);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    box-shadow: 0 4px 12px rgba(35,140,0,.4);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 99;
}
.page-top-btn.show { opacity: 1; visibility: visible; }
.page-top-btn:hover { background: var(--green-dark); transform: translateY(-3px); }

/* sp-br */
.sp-br { display: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .feature-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    body { font-size: 15px; }

    /* header */
    #header { padding: 8px 0; }
    .header-inner { flex-wrap: wrap; gap: 8px; }
    .header-nav { display: none; }
    .header-tel { text-align: left; }
    .tel-number { font-size: 1.2em; }

    /* hero */
    .hero { padding: 48px 16px 80px; }
    .hero-title { font-size: 2em; }
    .sp-br { display: block; }
    .hero-features { gap: 10px; }
    .hero-feature-item { padding: 10px 12px; min-width: 80px; }
    .hero-cta-wrap { flex-direction: column; align-items: center; }
    .btn-primary, .btn-secondary { width: 100%; max-width: 300px; justify-content: center; }

    /* about */
    .about-content { flex-direction: column; }
    .about-image-block { width: 100%; }
    .section-title { font-size: 1.4em; }

    /* person */
    .person-content { flex-direction: column; }
    .person-content-rev { flex-direction: column; }
    .person-illust { width: 100%; text-align: center; }
    .circle-item { width: 80px; height: 80px; }

    /* feature */
    .feature-grid { grid-template-columns: 1fr; }

    /* curriculum */
    .curriculum-table { font-size: .85em; }

    /* flow */
    .step-col2 { flex-direction: column; }
    .flow-step { flex-direction: column; }

    /* price */
    .price-box { flex-direction: column; gap: 16px; }
    .price-arrow { transform: rotate(90deg); }
    .price-includes-list { grid-template-columns: 1fr; }

    /* contact */
    .contact-form { padding: 20px 16px; }
    .contact-tel-box { flex-direction: column; align-items: flex-start; }

    /* footer */
    #footer { padding-bottom: 70px; }
    .footer-inner { flex-direction: column; }

    /* float CTA */
    .float-cta-sp { display: block; }
    .float-cta-sp::after { content: ''; display: table; clear: both; }

    /* page top */
    .page-top-btn { bottom: 70px; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.7em; }
    .hero-subtitle { font-size: .9em; }
    .pickup-inner { flex-direction: column; align-items: flex-start; padding: 0 16px; gap: 12px; }
    .header-tel { display: none; }
    .textlink-btn { font-size: 1em; padding: .5em 1.5em; }
    .price-main { font-size: 2em; }
}