/* =========================================
   共通設定（PC / SP 共通）
========================================= */
html {
    /* アンカーリンクで飛んだ時、上から120px空ける */
    scroll-padding-top: 120px;
}

footer {
    padding: 0;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

/* --- 改行の制御クラス --- */
/* PCでは改行させない */
.br-sp {
    display: none;
}

.br-pc {
    display: inline;
}

/* --- 汎用ユーティリティ --- */
.mt-4em {
    margin-top: 4em;
}

/* スマホ時だけ改行を有効にする */
@media screen and (max-width: 767px) {
    .br-sp {
        display: inline;
    }
}

/* --- ナビゲーションのベース設定 --- */
/* ナビ全体 */
#nav_inner {
    margin: 0;
}

/* メニュー本体 */
.nav_content {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 10000;
    overflow-y: auto;
}

#nav.active .nav_content {
    display: block;
}


/* =========================================
   ハンバーガーボタン（三本線のアニメーション含む）
========================================= */
.hmg_btn {
    display: block;
    position: fixed !important;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    border: 1px solid #aaa;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
    z-index: 10001;
}

.hmg_line {
    display: block;
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #aaa;
    top: 20px;
    transform: translateX(-50%);
}

.hmg_text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 9px;
    color: #aaa;
    line-height: 1;
}

/* 開くボタンの設定 */
.hmg_btn:nth-of-type(1) .hmg_line::before,
.hmg_btn:nth-of-type(1) .hmg_line::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #aaa;
}

.hmg_btn:nth-of-type(1) .hmg_line::before {
    top: -7px;
}

.hmg_btn:nth-of-type(1) .hmg_line::after {
    top: 7px;
}

.hmg_btn:nth-of-type(1) .hmg_text::after {
    content: "メニュー";
}

/* 閉じるボタンの設定 */
.hmg_btn:nth-of-type(2) {
    display: none;
}

.hmg_btn:nth-of-type(2) .hmg_line-rotate {
    background: transparent;
}

.hmg_btn:nth-of-type(2) .hmg_line-rotate::before,
.hmg_btn:nth-of-type(2) .hmg_line-rotate::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #aaa;
    top: 0;
}

.hmg_btn:nth-of-type(2) .hmg_line-rotate::before {
    transform: rotate(45deg);
}

.hmg_btn:nth-of-type(2) .hmg_line-rotate::after {
    transform: rotate(-45deg);
}

.hmg_btn:nth-of-type(2) .hmg_text::after {
    content: "閉じる";
}

/* 開閉時の表示切り替え */
#nav.active .hmg_btn:nth-of-type(1) {
    display: none;
}

#nav.active .hmg_btn:nth-of-type(2) {
    display: block;
}


/* =========================================
   スマホ表示用ヘッダー設定（40rem以下）
========================================= */
@media screen and (max-width: 40rem) {

    .header_wrap-pc {
        display: none !important;
    }

    .header_wrap-sp {
        display: none;
        margin-bottom: 20px;
    }

    #nav.active .header_wrap-sp {
        display: block;
    }

    .header_wrap-sp li {
        margin-bottom: 10px;
    }

    .header_wrap-sp .header_link {
        display: block;
        width: 100%;
        text-align: center;
        padding: 8px 0;
        font-weight: bold;
        border-radius: 8px;
        font-size: 18px;
        box-sizing: border-box;
    }

    /* アコーディオンの矢印 */
    #nav span:after {
        border-top-color: #e89112;
        position: absolute;
        right: 20px;
        top: 50%;
        /* ここで中心に配置している */
        transform: translate(-50%, -50%);
        transition: transform 0.3s;
        /* 動きをなめらかにするなら追加 */
    }
}

/* =========================================
   スマホメニュー内部のデザイン
========================================= */
.hmg_menu {
    text-align: left;
}

#nav.active .hmg_menu {
    display: block;
}

/* 各リンクのボタン色設定 */
.header_link-document {
    /* background-color: #ff9200; */
    color: #fff !important;
}

.header_link-trial {
    background-color: #0a9f6b;
    color: #fff !important;
}

.header_link-seminar,
.header_link-contact {
    background-color: #fff;
    border: 1px solid #993333;
    color: #a63c3c !important;
}

/* メインナビゲーションのリスト */
.main_nav_ul>li {
    border-bottom: 1px solid #d3d3d3;
    /* width: 100%; */
}

.main_nav_ul>li>a {
    position: relative;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 90%;
    color: #333;
    line-height: 2.4;
}

/* ドロップダウンメニュー（初期非表示） */
.main_nav_ul li ul {
    display: none;
    background: #ccc;
    padding-left: 20px;
}

.main_nav_ul li ul a {
    padding: 12px 0;
    font-weight: normal;
    color: #555;
}

.main_nav_ul li a {
    color: #000 !important;
}

/* アコーディオンが開いた状態 */
.main_nav_ul>li.open>a {
    background-color: #ccc;
    opacity: 1 !important;
}

/* =========================================
   PC表示用設定（40.01rem以上）
   ※ハンバーガーメニューを消してPCメニューを表示
========================================= */
@media screen and (min-width: 40.01rem) {

    .hmg_btn,
    .hmg_menu,
    .header_wrap-sp {
        display: none !important;
    }

    #nav_inner {
        width: 100%;
        margin: 5px 0 0 0;
    }

    .nav_content {
        display: block !important;
        max-width: 1200px;
        margin: 0 auto;
        position: static;
        overflow: visible !important;
        height: auto !important;
    }

    .main_nav_ul {
        display: flex;
        justify-content: center;
        /* flex-wrap: wrap; */
    }

    .main_nav_ul>li {
        position: relative;
        width: 16.6%;
        border: none;
    }

    .main_nav_ul>li>a {
        display: block;
        padding: 0;
        font-weight: bold;
        text-align: center;
    }

    /* マウスオーバー時のスタイル */
    .main_nav_ul>li:hover>a {
        background-color: #ccc;
        color: #000;
        opacity: 1 !important;
    }

    /* PC版ドロップダウンメニュー */
    .main_nav_ul li ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #ccc;
        /* border: 1px solid #ccc; */
        /* min-width: 220px; */
        z-index: 100;
        padding: 0;
    }

    .main_nav_ul li:hover>ul {
        display: block;
    }

    .main_nav_ul li ul li {
        border-bottom: 1px solid #eee;
    }

    .main_nav_ul li ul li a {
        display: block;
        padding: 8px 15px;
        font-size: 15px;
        font-weight: normal;
    }

    .main_nav_ul li ul li a:hover {
        background-color: #fff;
        opacity: 1 !important;
    }
}

/* =========================================
   メインコンテンツ・タイトル周り
========================================= */
/* 個別ページ設定 */
.main {
    padding-right: 1em !important;
    padding-left: 1em !important;
    padding-bottom: 3em !important;
    line-height: 1.6em;
}

/* 通常のページタイトル（背景ストライプ） */
.title h1 {
    position: relative;
    padding: 1.5rem 1rem 1.5rem 2em;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 26px;
    color: black;
    background-color: #ffecd3;
    background-image: repeating-linear-gradient(45deg, #e28a17 0px 2px, transparent 2px, transparent 4px);
    background-repeat: no-repeat;
    background-size: 2rem;
    line-height: normal;
}

.corporate-title h1 {
    background-color: #e7f5ef;
    background-image: repeating-linear-gradient(45deg, #0a9f6b 0px 2px, transparent 2px, transparent 4px);
}

/* =========================================
   リボンデザイン
========================================= */
.main-title {
    position: relative;
    display: table;
    margin: 0 auto 4em;
    text-align: center;
    width: auto;
    min-width: 320px;
}

/* リボンの両端（テール）の共通設定 */
.main-title::before,
.main-title::after {
    content: "";
    position: absolute;
    top: 15px;
    width: 70px;
    height: 100%;
    background: #c7760c;
    z-index: -1;
}

/* 左のテール（V字カット） */
.main-title::before {
    left: -55px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20% 50%);
}

/* 右のテール（V字カット） */
.main-title::after {
    right: -55px;
    clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
}

/* リボンの本体（文字部分） */
.main-title h1 {
    position: relative;
    background: linear-gradient(to bottom, #ffae45, #e28a17);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 18px 40px;
    margin: 0;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.4;
    z-index: 1;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* リボンの折り返し部分（影） */
.main-title h1::before,
.main-title h1::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 2;
}

/* 左の折り返し（影） */
.main-title h1::before {
    left: 0;
    border-width: 0 15px 15px 0;
    border-color: transparent #94570b transparent transparent;
}

/* 右の折り返し（影） */
.main-title h1::after {
    right: 0;
    border-width: 0 0 15px 15px;
    border-color: transparent transparent transparent #94570b;
}

/* --- スマホ用リボン調整 --- */
@media screen and (max-width: 767px) {
    .main-title {
        width: 85%;
    }

    .main-title h1 {
        font-size: 24px;
        padding: 15px 20px;
    }

    .main-title::before {
        left: -25px;
        width: 40px;
    }

    .main-title::after {
        right: -25px;
        width: 40px;
    }
}


/* =========================================
   各コンポーネント（ボタン、リスト、フォームなど）
========================================= */
/* ボタン類 */


.qualification_btn a {
    padding: 10px;
}

/* リード文エリア */
.lead-box {
    margin-bottom: 2.5em;
}

.lead-text,
.main-lead-text {
    padding: 0 1em;
}

.lead-img {
    text-align: center;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    max-width: 300px;
}

/* サブタイトル（オレンジ背景） */
.sub-title h2 {
    padding: 10px 10px;
    border-radius: 4px 4px 0 0;
    background-color: #e28a17;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    margin-bottom: 1em;
}

/* セクション枠（オレンジ枠線） */
.section {
    border: #e28a17 2px solid;
    border-radius: 10px;
    padding: 0 0 3em !important;
    margin-bottom: 2em;
}

.section-note {
    padding: 0.5em;
}

.section-note ul {
    list-style: disc;
    margin-left: 2em;
}

.section-note ol {
    list-style: decimal;
    margin-left: 2em;
    margin-bottom: 1.5em;
}

.section-note p {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.section-note ul li {
    margin-bottom: 1.2em;
    line-height: 1.6
}

.section-note li p {
    margin-left: 1em;
    margin-right: 1em;
}

.section-note small {
    font-size: 0.9em;
}

.main strong {
    font-weight: 600;
}

/* リスト内サブタイトル */
.list-subtitle h3 {
    font-size: 18px;
    font-weight: 600;
}

.link-list-subtitle h3 {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5em;
    color: #e28a17;
}

/* .corporate h3 {
    color: #0a9f6b;
} */

.qualification-logo {
    text-align: center;
    min-width: 200px;
}

.method-box {
    padding: 0.5em;
}

.pd-0 {
    padding: 0;
}

.method-box h3 {
    display: block;
    background: #fff4e0;
    padding: 8px 10px;
    border-left: 5px solid #e28a17;
    margin: 1.5em 0 1em;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.method-box h4 {
    font-size: 17px;
    font-weight: 600;
    margin: 2em 0 0.4em;
}

.method-box>ol>li {
    margin-top: 1em;
}

.method-box>ol>li p {
    margin-bottom: 0.5em;
}

.method-box ol li ul li {
    margin-left: 1em;
    line-height: 1.4em;
}

/* フォーム関連 */
.form-btn a,
.form-area a,
.lead-form-btn a {
    background-color: #00a2c9;
    color: #fff;
    display: inline-block;
    padding: 0.5em 2.5em;
    font-weight: bold;
    border-radius: 15px;
    box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.4);
    transition: all 0.3s;
}

.form-btn a:hover,
.form-area a:hover,
.lead-form-btn a:hover {
    transform: translate(3px, 3px);
    box-shadow: none;
}

.form-btn {
    margin: 1em;
    text-align: center;
}

.lead-form-btn {
    text-align: center;
}

.lead-form-btn a {
    width: 85%;
    padding: 0.5em 2em;
}

.form-area a i {
    margin-right: 0.8em;
}

.form-area {
    text-align: center;
    margin-top: 2em;
}

.mb-2em {
    margin-bottom: 2.5em;
}

.annotation {
    margin-top: 1.5em !important;
}

.caution-box {
    background-color: #fff0f0;
    border: 1px solid #ffcccc;
    color: #d8000c;
    padding: 0.5em;
    border-radius: 5px;
    margin: 1.5em 0;
    font-size: 0.9em;
}

.section-table>p:first-child {
    margin-bottom: 2em;
}

/* =========================================
   リスト（横スクロール系）の設定
   teacher-list / corporate-list
========================================= */
.teacher-list,
.corporate-list {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    border-collapse: collapse;
    font-size: 16px;
    border: #ffd399 2px solid;
    margin-left: auto;
    margin-right: auto;
}



.corporate-list {
    max-width: 800px;
}

/* セル（th, td）共通の設定（teacher/corporateのみ） */
.teacher-list th,
.corporate-list th,
.teacher-list td,
.corporate-list td {
    border: 1px solid #ccc;
    padding: 10px 5px;
    text-align: center;
    vertical-align: middle;
}


.teacher-list td:last-child {
    padding: 0;
}

.teacher-list td,
.corporate-list td {
    border: 1px solid #ccc;
    padding: 1.5em 0.7em;
    margin: 0 auto;
    vertical-align: middle;
}

.corporate-list td:first-child {
    text-align: center;
    max-width: 290px;
    white-space: normal;
    min-width: 200px;
}

/* 見出し行のデザイン（teacher/corporateのみ） */
.teacher-list th,
.corporate-list th {
    background-color: #fff4e0;
    color: #333;
    font-weight: bold;
}

th span {
    color: #242424;
    font-size: 12px;
    margin-top: 0.5em;
    margin-left: 0.1em;
}

/* 1. 外側の箱（スクロールバーを「上」にする ＆ 枠線をつける） */
.scroll-box {
    overflow-x: auto;
    transform: rotateX(180deg);
    border: #ffd399 2px solid;
    width: 100%;
    margin-bottom: 20px;
}

.teacher-list,
.corporate-list {
    transform: rotateX(180deg);
    border: none;
    margin-bottom: 0;
    white-space: nowrap;
}

.teacher-list,
.corporate-list {
    overflow-x: visible;
}

/* =========================================
   表のリンクセル（名前欄）の調整
========================================= */
.teacher-list td:has(a),
.corporate-list td:has(a),
.link-list td:has(a) {
    height: 1px;
}

.teacher-list td a,
.link-list td a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 1em 1.5em;
    box-sizing: border-box;
    color: #00a2c9;
    transition: all 0.2s;
}

.teacher-list td a:hover,
.link-list td a:hover {
    background-color: #fff4e0;
    color: #d17600;
}

/* リンクの文字の後ろに「▶」をつける */
.teacher-list td a::after {
    content: "▶";
    font-size: 10px;
    margin-left: 10px;
    transition: transform 0.2s;
}

/* マウスを乗せたら「▶」が少し右に動く */
/* .teacher-list td a:hover::after,
.corporate-list td a:hover::after {
    transform: translateX(3px);
} */

/* =========================================
   2. .link-list （縦積みカード型リスト）
========================================= */

/* 表全体の設定 */
.link-list {
    display: block;
    width: 100%;
    border: #ffd399 2px solid;
    margin: 0 auto;
    font-size: 16px;
    white-space: normal;
    border-collapse: collapse;
    max-width: 800px;
}

/* 各要素をブロック化（テーブルの解除） */
.link-list tbody,
.link-list tr,
.link-list th,
.link-list td {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.link-list tr {
    border: 1px solid #dddddd;
    padding-bottom: 1.5em;
}

.link-list th {
    /* background-color: #fff4e0; */
    text-align: center;
    padding: 1em;
}

.link-list td {
    padding: 0;
    background-color: #fff;
    border: none;
    margin-bottom: 2em;
}

/* リンクボタンのレイアウト */
.link-list td a {
    width: 100%;
    /* padding: 1em 3em 2em; */
    font-weight: bold;
    font-size: 17px;
}

.link-list td a span {
    margin-left: 1em;
}

/* 画像のサイズ調整 */
.link-list th img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* スクロールヒントの文字 */
.scroll-hint {
    display: block;
    font-size: 14px;
    color: #e28a17;
    margin-bottom: 5px;
    font-weight: bold;
    text-align: center;
}

/* --- スクロールバーのカスタマイズ --- */
/* スクロールバー全体 */
.scroll-box::-webkit-scrollbar {
    height: 10px;
}

/* スクロールバーの背景 */
.scroll-box::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

/* 動くつまみの部分 */
.scroll-box::-webkit-scrollbar-thumb {
    background: #e28a17;
    border-radius: 5px;
}

/* =========================================
   メディアクエリ：画面幅に応じた調整
========================================= */

/* --- 画面幅750px以下（タッチ操作用のカーソル） --- */
@media screen and (max-width: 750px) {

    /* 1. 外側の箱にカーソル設定をする */
    .scroll-box {
        cursor: grab;
        user-select: none;
    }

    /* 2. 掴んでいる（activeクラスがついた）時 */
    .scroll-box.active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }

    .teacher-list,
    .corporate-list {
        cursor: inherit;
    }
}

/* --- 画面幅700px以上（タブレット・PCレイアウト） --- */
@media(700px < width) {
    .scroll-hint {
        display: none;
    }

    .teacher-list,
    .corporate-list,
    .link-list {
        display: table;
        overflow-x: visible;
        white-space: normal;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-collapse: collapse;
    }

    .link-list {
        table-layout: fixed;
    }

    /* テーブル表示に戻す */
    .link-list tbody {
        display: table-row-group !important;
    }

    .link-list th,
    .link-list td {
        display: table-cell !important;
        border: 1px solid #ccc;
        vertical-align: middle;
    }

    .link-list tr {
        display: table-row !important;
        border: none;
    }

    .link-list th {
        width: 300px;
        padding: 1em;
    }

    .link-list td {
        width: auto;
        padding: 0 !important;
    }

    .section-table {
        text-align: center;
    }

    .scroll-box {
        border: none;
        transform: none;
        width: 100%;
        overflow: visible;
        margin-bottom: 20px;
    }

    .corporate-list,
    .teacher-list {
        border: #ffd399 2px solid;
        transform: none;
        width: auto;
        margin: 0 auto;
    }
}

/* --- 画面幅767px以上（Flexbox配置や余白調整） --- */
@media(767px < width) {
    .lead-flex {
        display: flex;
        justify-content: space-around;
        margin-top: 3em;
    }

    .lead-text {
        width: 70%;
        margin-left: 2em;
        margin-right: 2em;
    }

    .lead-form-btn a {
        width: fit-content;
        margin-top: 2em;
        /* margin-left: 2em; */
    }

    .section-flex {
        display: flex;
        justify-content: space-between;
    }

    .section-note {
        /* width: 75%; */
        padding: 0 2em;
        margin-left: auto;
        margin-right: auto;
    }

    .qualification-logo {
        margin-left: 1.5em;
        min-width: 350px;
    }

    .form-area {
        margin-top: 4em;
        margin-bottom: 3em;
        font-size: 20px;
    }

    .form-area a {
        padding: 0.7em 3em;
    }

    .form-btn {
        margin: 1.5em 3em;
    }

    /* 1番目のth（横幅調整） */
    .teacher-list th:nth-child(1) {
        min-width: 90px;
    }

    /* 2番目のth（横幅調整） */
    .teacher-list th:nth-child(2) {
        min-width: 330px;
    }

    td a {
        font-size: 16px;
    }

    .lead-img {
        width: 35%;
        margin-top: 0;
    }

    .link-list td a {
        justify-content: space-between;
        padding: 1em 3em;
    }

    .link-list-subtitle h3 {
        font-size: 22px;
        margin-top: 3em;
        margin-bottom: 2em;
    }
}

/* --- 画面幅1200px以上（大画面用調整） --- */
@media(1200px < width) {
    .lead-box {
        margin-top: 2em;
        margin-bottom: 3em;
    }

    .main-lead-text {
        margin-right: auto;
        margin-left: auto;
        width: 80%;
    }

    .section-note {
        padding: 0.5em 2em;
    }

    .form-btn {
        text-align: left;
        margin-left: 7em;
    }

    .method-box ol li ul li {
        line-height: 1.6em;
    }


}

/* 各マイスター紹介ページ */
.meister-name h1 {
    border-left: 7px solid #000;
    padding-left: 1em;
    font-size: 180%;
    margin: 1em 0 0 0;
    line-height: normal;
}

/* ボックス内のテキスト全体を折り返す設定 */
.meistar_box {
    overflow-wrap: break-word;
    word-break: break-all;
}

.nintei_img {
    width: 100%;
    text-align: center;
}

.meister-list {
    list-style: disc;
    font-size: 15px;
    margin-left: 1em;
}

.meister-list li {
    line-height: 1.8em !important;
}

@media(767px < width) {

    section.meister_flex {
        display: block !important;
    }


    .nintei_img {
        float: right;
        width: 300px;
        margin: 1em 0 2em 1em;
        text-align: center;
    }

    .meistar_box {
        display: block;
        width: auto;
        overflow: visible;
        float: none;
        max-width: none;
    }

    .meistar_box p {
        max-width: none;
    }

    section.meister_flex::after {
        content: "";
        display: block;
        clear: both;
    }

    .meister-list li {
        margin-left: 2em !important;
    }
}