@charset "utf-8";

/* ====================================
    0. 定数定義
==================================== */
:root {
    --ats-blue: #47BFF3;
    --ats-blue-light: #DEF3FE;
    --ats-blue-bg: #F4FCFF;
    --ats-orange: #f90;
    --ats-orange-light: #FFCC99;
    --ats-orange-bg: #FFE7CE;
    --accent-color: #8fd3f5;
    --headline-bg: #56a9d6;
    --text-color: #333;
    --max-width: 1050px;
}

/* ====================================
    1. 基本・余白
==================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: '游ゴシック体', 'Yu Gothic', sans-serif; 
    color: var(--text-color); 
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
.inner-container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

section { padding: 80px 0; }
/* セクション内のテキストの基本設定（PC） */
section > p { margin-bottom: 25px; font-size: 16px; } 

section h2 { font-size: 1.6em; border-left: 8px solid var(--accent-color); padding: 5px 15px; margin-bottom: 40px; line-height: 1.4; }

/* 導入文などの装飾付き段落（PC） */
.section-description {
    text-align: left;
    margin-bottom: 40px;
    line-height: 1.8;
    color: #444;
    font-weight: 500;
    font-size: 16px;
}

/* ====================================
    2. ヘッダー・ナビゲーション
==================================== */
.top-headline, .header-main, .site-header { line-height: normal; }

.top-headline { background-color: var(--headline-bg); color: #fff; padding: 6px 0; font-size: 11px; text-align: center; }
.header-main { background-color: #fff; padding: 10px 0; border-bottom: 1px solid #eee; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-area h1 { font-size: 11px; font-weight: 500; color: #888; margin-bottom: 2px; }
.logo-area img { max-width: 280px; height: auto; display: block; }

.header-controls { display: flex; gap: 10px; align-items: center; }
.header-controls a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    font-size: 14px;
    height: 40px; 
    line-height: 1 !important; 
}
.top-btn-contact { background: var(--ats-orange) !important; color: #fff !important; padding: 0 18px !important; }
.top-btn-access { border: 2px solid var(--ats-blue) !important; color: var(--ats-blue) !important; padding: 0 16px !important; background: #fff !important; }

.site-header { background: var(--accent-color); position: sticky; top: 0; z-index: 999; }
.main-menu ul { display: flex; list-style: none; justify-content: space-between; padding: 0; }
.main-menu li { flex: 1; }
.main-menu a { display: block; color: #fff; padding: 16px 0; text-align: center; font-weight: bold; text-decoration: none; font-size: 15px; transition: background-color 0.3s; line-height: 1; }
.main-menu a:hover, .main-menu a.active { background-color: rgba(0, 0, 0, 0.15); color: #fff; box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.5); }

/* ====================================
    3. TOPページ：メインビジュアル・バナー
==================================== */
.main-visual {
        background: linear-gradient(
            to bottom,
            #f4fcff,
            #ffffff
        );
        padding: 30px 0;
    }

    .main-visual img {
        max-width: 1100px;
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }


.top-main-banner { background: #f9f9f9; padding: 10px 0; }

.banners { display: flex; gap: 30px; margin-top: 25px; }
.banner-item { flex: 1; }
.banner-item img { border-radius: 10px; margin-bottom: 20px; width: 100%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: block; }

.banner-item h3 { text-align: left; margin-bottom: 10px; color: var(--ats-blue); line-height: 1.4; }
.banner-item p { text-align: left; font-size: 15px; line-height: 1.6; }


/* ====================================
    TOPキャッチ
==================================== */
.site-catch {
    font-size: 11px;      /* 今の h1 と同等 */
    font-weight: 500;
    color: #888;
    margin-bottom: 2px;
    line-height: 1.4;
}

/* ====================================
    メインビジュアルh1非表示
==================================== */
.main-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}



/* ====================================
    ★スクールコンセプト
==================================== */
.school-concept {
    background: url('../img/school1_ats.jpg') no-repeat center/cover;
    min-height: 350px; 
    display: flex; 
    align-items: center;
    border-radius: 12px; 
    margin: 0 0 0 0;
    overflow: hidden;
}
.school-introduction { padding-bottom: 0 !important; }

.concept-content { 
    width: 55%; 
    padding: 35px 40px; 
    background: rgba(255, 255, 255, 0.95); 
    border-radius: 0 12px 12px 0; 
}
.concept-headline { color: var(--ats-blue) !important; font-size: 1.7em; font-weight: 900; line-height: 1.4; margin-bottom: 20px; }
.concept-text p { margin-bottom: 10px; }

/* 講師紹介 */
.instructors-list { display: flex; gap: 40px; margin-top: 30px; }
.instructor-item { flex: 1; background: #fff; padding: 25px; border-radius: 10px; text-align: left; }
.instructor-item img { border-radius: 50%; margin-bottom: 20px; border: 3px solid var(--accent-color); object-fit: cover; width: 150px; height: 150px; display: block; }
.instructor-item h3 { margin-bottom: 15px; border-bottom: 2px solid var(--accent-color); display: block; width: fit-content; padding-bottom: 5px; line-height: 1.4; }
.instructor-item p { font-size: 15px; line-height: 1.6; }

/* ====================================
    4. 共通パーツ（Course/Map/Footer）
==================================== */
/* コース見出し：旧CSSの「背景付きスパン」を再現 */
.course-h2 { 
    display: flex;
    align-items: flex-end;
    margin: 50px 0 25px;
    border-bottom: 3px solid; /* 色は下のクラスで指定 */
    line-height: 1;
}
.course-h2 span { 
    font-size: 18px; 
    color: #fff; 
    font-weight: bold; 
    padding: 10px 25px; 
    border-radius: 8px 8px 0 0; 
    display: inline-block; 
}

/* 青とオレンジの出し分け */
.course-h2.blue { border-color: var(--ats-blue); }
.course-h2.blue span { background: var(--ats-blue); }
.course-h2.orange { border-color: var(--ats-orange); }
.course-h2.orange span { background: var(--ats-orange); }

/* コーステーブル：旧CSSの配色＋読みやすさ向上 */
.course-table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0;
    margin-bottom: 40px; 
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden; /* 角丸を効かせるため */
}
.course-table th, .course-table td { padding: 15px; border: 1px solid; text-align: center; }

/* 青系テーブル（旧背景色 #F4FCFF / 見出し #DEF3FE） */
.blue-style { border-color: var(--ats-blue); }
.blue-style th { background: var(--ats-blue-light); border-color: var(--ats-blue); color: #333; }
.blue-style td { background: var(--ats-blue-bg); border-color: var(--ats-blue-light); }

/* オレンジ系テーブル（旧背景色 #FFE7CE / 見出し #FFCC99） */
.orange-style { border-color: var(--ats-orange); }
.orange-style th { background: var(--ats-orange-light); border-color: var(--ats-orange); color: #333; }
.orange-style td { background: var(--ats-orange-bg); border-color: var(--ats-orange-light); }

/* ★MAPのレスポンシブ対応 */
.map-container { 
    position: relative; 
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    height: 0; 
    overflow: hidden; 
    border-radius: 12px; 
    margin-top: 30px; 
}
.map-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    border: 0; 
}

/* ====================================
    5. お問い合わせ
==================================== */
.contact-box { background: #fff; border: 2px solid var(--ats-blue); padding: 40px; border-radius: 12px; max-width: 800px; margin: 40px auto; text-align: center; }
.external-link-button { display: inline-block; background-color: var(--ats-orange); color: #fff; padding: 15px 40px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 18px; transition: 0.3s; box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3); line-height: 1; 
margin-top: 25px;}

.contact-lead {
  font-size: 17px;
  font-weight: 500;              /* 強すぎない */
  color: var(--ats-blue);        /* 水色 */
  margin-bottom: 18px;
}



/* ====================================
    6. スマホ対応（メディアクエリ）
==================================== */
.menu-toggle-input { display: none; }
@media (max-width: 768px) {
    body { line-height: 1.55; }

    /* 学校所在地（address-details）内のpタグをスマホで小さくする */
    .address-details h3 {
        font-size: 1.15em;
        margin-bottom: 10px;
    }
    .address-details p {
        font-size: 14px !important; /* スマホで大きく見えないようサイズを固定 */
        line-height: 1.5;
        margin-bottom: 5px;
        color: #555;
    }
    /* 問い合わせリンクを押しやすく調整 */
    .address-details a {
        font-size: 14px;
        color: var(--ats-blue);
        text-decoration: underline;
        display: inline-block;
        margin-top: 5px;
    }
    
    /* セクション内の段落テキストをスマホで一括縮小 */
    section > p, 
    .section-description {
        font-size: 14.5px; /* PCの16pxから14.5pxへ縮小 */
        line-height: 1.6;
        margin-bottom: 20px;
    }

    section h2 { font-size: 1.25em; margin-bottom: 25px; padding: 5px 12px; line-height: 1.3; }
    .concept-headline { font-size: 1.4em !important; margin-bottom: 15px; line-height: 1.3; }

    .header-main { padding: 15px 0; line-height: normal; }
    .header-flex { flex-direction: column; gap: 15px; }
    .logo-area img { max-width: 200px; margin: 0 auto; }
    
    .header-controls { 
        display: flex; 
        gap: 8px; 
        width: 100%; 
        justify-content: center;
        padding: 0 10px;
    }
    .header-controls a {
        flex: 1;
        text-align: center;
        padding: 0 5px !important;
        height: 44px;
        font-size: 13px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        white-space: nowrap;
        line-height: 1 !important;
    }
    
    section { padding: 30px 0; }
    .school-introduction { padding-bottom: 0 !important; }

    .banners { flex-direction: column; gap: 25px; }
    .banner-item { display: flex; align-items: flex-start; text-align: left; gap: 15px; }
    .banner-item a { flex: 0 0 110px; }
    .banner-item img { margin-bottom: 0; }
    .banner-item-text { flex: 1; }
    .banner-item h3 { font-size: 1.05em; margin-bottom: 5px; line-height: 1.3; }
    .banner-item p { font-size: 13.5px; line-height: 1.5; }

    .instructors-list { flex-direction: column; gap: 30px; }
    .instructor-item { padding: 20px; }
    .instructor-item img { margin: 0 auto 20px 0; width: 120px; height: 120px; }
    .instructor-item h3 { font-size: 1.1em; line-height: 1.3; }
    .instructor-item p { font-size: 14px; line-height: 1.5; }

    .school-concept { background-image: none !important; display: block; min-height: auto; margin-bottom: 20px !important; }
    .school-concept::before { content: ""; display: block; width: 100%; height: 200px; background: url('../img/school2_ats.jpg') no-repeat center/cover; }
    .concept-content { width: 100%; padding: 25px; border-radius: 0; }
    .concept-text p { font-size: 14px; line-height: 1.5; }

    .hamburger-menu { display: flex; position: fixed; top: 12px; right: 12px; width: 40px; height: 40px; background: var(--accent-color); z-index: 10000; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 5px; }
    .hamburger-menu span { width: 22px; height: 2px; background: #fff; }
    .main-menu { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: #fff; z-index: 9998; transition: 0.4s; padding-top: 60px; box-shadow: -5px 0 15px rgba(0,0,0,0.1); }
    .menu-toggle-input:checked ~ .main-menu { right: 0; }
    .main-menu ul { flex-direction: column; }
    .main-menu a { color: #333; text-align: left; padding: 15px 30px; border-bottom: 1px solid #eee; line-height: 1.2; }
    .footer-menu ul { flex-direction: column; align-items: center; gap: 10px; }
}

/* ====================================
    7. TOPへ戻るボタン
==================================== */
.page-top-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--ats-blue);
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s, background-color 0.3s;
    line-height: 1.2;
}
.page-top-button:hover {
    background-color: var(--headline-bg);
    transform: translateY(-5px);
}
.page-top-button i { font-size: 18px; margin-bottom: 2px; }
.page-top-button span { font-size: 10px; font-weight: bold; }

@media (max-width: 768px) {
    .page-top-button {
        right: 15px;
        bottom: 15px;
        width: 45px;
        height: 45px;
    }
}

/* ====================================
    入学～卒業まで（Processページ）PC用
==================================== */




/* 偶数番目のセクションは画像と文字を入れ替える（PCのみのデザインアクセント） */
.course-wrap:nth-of-type(even) {
    flex-direction: row-reverse;
}

.course-left, .course-right {
    flex: 1;
}



/* 見出しデザイン */
.process-h2 {
    font-size: 1.8em;
    color: var(--ats-blue);
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}
.process-h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    background: var(--ats-blue);
}

.process-h3 {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #333;
    line-height: 1.4;
}

/* 矢印アイコン */
.process-arrow {
    text-align: center;
    color: var(--accent-color);
    font-size: 30px;
    margin: 40px 0;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* 卒業後の案内ボックス */
.after-graduation {
    background: #fdf9f4;
    padding: 25px;
    border-left: 5px solid var(--ats-orange);
    margin-top: 30px;
}
.after-graduation h4 {
    color: var(--ats-orange);
    margin-bottom: 10px;
}
.note {
    font-size: 13px;
    color: #888;
    display: block;
    margin-top: 10px;
}

/* 下部バナーリンク */
.courselinks-area {
    display: flex;
    gap: 20px;
    margin-top: 80px;
}
.courselinks {
    flex: 1;
    background: var(--ats-blue-bg);
    border: 1px solid var(--ats-blue-light);
    padding: 30px;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 10px;
    transition: 0.3s;
}
.courselinks:hover {
    background: var(--ats-blue-light);
    transform: translateY(-3px);
}
.courselinks span {
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--ats-blue);
    margin-bottom: 10px;
}

/* ====================================
    入学～卒業まで（Processページ）最適化
==================================== */

/* コンテンツ全体の余白を大幅にカット */
.graduation-box {
    padding: 30px 20px 60px; /* 上の余白を詰めました */
}

/* 各ステップのラップ */
.course-wrap {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px; /* セクション間の余白を短縮 */
    padding: 20px 0;
}

/* 偶数番目の入れ替え */
.course-wrap:nth-of-type(even) {
    flex-direction: row-reverse;
}

.course-left {
    flex: 1.2; /* テキスト側を少し広く */
}

.course-right {
    flex: 0.8; /* 画像側を少し狭くして、画像の肥大化（ボケ）を防止 */
    text-align: center;
}

/* 一般的な画像の制御（ボケ防止） */
.course-right img {
    width: 100%;
    max-width: 400px; /* 画像が大きくなりすぎて画質が落ちるのを防ぐ */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* g4.jpg（ディプロマ）の特別設定：解像度重視 */
.diploma-img {
    width: auto !important; /* 横幅いっぱいに広げない */
    max-width: 100% !important; /* 枠は超えない */
    height: auto;
    display: inline-block;
    margin-top: 15px;
    /* 元の画像サイズを尊重し、ボケを防ぐ */
    image-rendering: -webkit-optimize-contrast; 
}

/* 見出しとテキストの余白調整 */

.process-h3 {
    font-size: 1.1em;
    margin-bottom: 12px;
    color: #333;
}
.course-left p {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* 矢印アイコンの余白短縮 */
.process-arrow {
    text-align: center;
    color: var(--accent-color);
    font-size: 24px;
    margin: 10px 0; /* 矢印上下の巨大な隙間をカット */
}

/* 下部リンクエリア */
.courselinks-area {
    display: flex;
    gap: 15px;
    margin-top: 40px;
}
.courselinks {
    flex: 1;
    background: var(--ats-blue-bg);
    border: 1px solid var(--ats-blue-light);
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 8px;
    font-size: 14px;
}

/* ====================================
    スマホ対応（メディアクエリ）
==================================== */
@media (max-width: 768px) {
    .graduation-box { padding: 20px 15px; }

    .course-wrap, 
    .course-wrap:nth-of-type(even) {
        flex-direction: column;
        gap: 10px;           /* 15pxから10pxに微調整（文字と画像の間隔） */
        margin-bottom: 10px; /* ★30pxから10pxへ。矢印との間隔を詰めました */
        text-align: left;
    }

    /* ★追加：矢印自体の上下余白を極限まで詰める */
    .process-arrow {
        margin: 0 auto !important; /* 上下の余白をゼロに */
        padding: 5px 0;            /* ほんの少しだけ隙間を作る */
        font-size: 20px;           /* スマホでは少し控えめなサイズに */
    }

    /* スマホで画像が横幅いっぱいになってボケるのを防ぐ */
    .course-right img {
        max-width: 100%; 
        width: 90%; 
        margin: 0 auto;
        display: block; /* 中央寄せを確実にするため追加 */
    }

    /* ディプロマ画像（g4.jpg）をスマホで横幅MAXにする */
    .diploma-img {
        width: 100% !important;     /* 左右いっぱいに広げる */
        max-width: 100% !important;  /* 制限を解除 */
        margin: 15px 0 !important;   /* 中央寄せを解除し、上下の余白のみに */
        border-radius: 5px;          /* 角を少しだけ丸くして馴染ませる */
        display: block;
    }

    .process-h2 { font-size: 1.3em; margin-bottom: 5px; } /* 下の余白を少し詰めました */
    .process-h3 { font-size: 1em; margin-bottom: 8px; }

    .courselinks-area {
        flex-direction: column;
        margin-top: 30px; /* 上のセクションとの間隔 */
    }
}


/* ====================================
    追加：デザイン装飾（旧サイトの再現）
==================================== */

/* --- 汎用：旧CSS風のリスト矢印 --- */
.ats-list-arrow { list-style: none; }
.ats-list-arrow li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
}
/* 旧 arrow.gif の役割を擬似要素で再現 */
.ats-list-arrow li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent var(--ats-blue);
}

/* --- 画像の装飾（旧CSSの「プロ講師」画像などの角丸感） --- */
.img-decorated {
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.img-decorated:hover {
    transform: translateY(-5px);
}

/* --- 導入文のグラデーション（旧 graduation1 の背景感） --- */
.ats-gradient-bg {
    background: linear-gradient(to bottom, #ffffff, #f4f5f5);
    border: 1px solid #eee;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 40px;
}



/* ====================================
    追加：フッターのデザイン・ブラッシュアップ
==================================== */

.site-footer {
    background-color: #f8f8f8;
    padding: 60px 0 30px;
    border-top: 4px solid var(--ats-blue-light); /* 太めの線で区切りを強調 */
    color: #444;
}

/* フッター内のロゴ・住所エリア */
.footer-info {
    text-align: center;
    margin-bottom: 40px;
}

.footer-logo img {
    max-width: 240px;
    margin-bottom: 15px;
}

.footer-address {
    font-style: normal;
    font-size: 15px;
    line-height: 1.8;
}

/* フッターナビゲーションの装飾 */
.footer-menu ul {
    display: flex;
    justify-content: center;
    list-style: none;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin-bottom: 40px;
    padding: 0 20px;
}

.footer-menu a {
    color: #555;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s;
    position: relative;
}

/* ホバー時に旧サイトの青色をアクセントに */
.footer-menu a:hover {
    color: var(--ats-blue);
}

/* リンクの間に区切り線（PC用） */
@media (min-width: 769px) {
    .footer-menu li:not(:last-child) {
        border-right: 1px solid #ccc;
        padding-right: 30px;
    }
}

/* コピーライトエリア */
.copyright {
    text-align: center;
    font-size: 11px;
    color: #888;
    border-top: 1px solid #ddd;
    padding-top: 25px;
    letter-spacing: 0.05em;
}

/* スマホ用調整 */
@media (max-width: 768px) {
    .site-footer { padding: 40px 0 20px; }
    .footer-menu ul {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .footer-menu a {
        font-size: 15px; /* スマホで押しやすく */
        display: block;
        padding: 5px 0;
    }
}

/* ブランド導線 */
.brand-link-box {
    margin-top: 30px;
    text-align: center;
}

.brand-lead {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

/* ネイビー系・落ち着いた補足ボタン */
.brand-link-button {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.95rem;
    background-color: #2c3e50; /* ネイビー */
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.brand-link-button:hover {
    background-color: #1f2f3d;
}