/*
Theme Name: Yokohama Techno Auto
Theme URI: https://www.techno-auto.ac.jp/
Author: cielo design
Author URI: https://cielo-design.com/
Description: 横浜テクノオート HP リニューアル用の Gutenberg + ACF Block ベーステーマ。Phase 2 で生成した 78 ブロックを組み合わせてページを量産する。
Version: 0.2.1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: technoauto
*/

/* デザイントークン + レイアウトは functions.php の wp_enqueue_style で読込。
   ここで @import すると WP のバージョン付き URL よりも先に古いキャッシュが上書きするため撤去 (2026-09-21) */

/* ==========================================
   Base reset
   ========================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--technoauto-font-jp, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif);
    color: var(--technoauto-text-primary, #000);
    background: var(--technoauto-bg-base, #fff);
    /* Figma実測: Body/M = 13px lh1.85 が基準・Body/L は 15px */
    font-size: var(--technoauto-size-body-m, 13px);
    font-weight: 400;
    line-height: var(--technoauto-lh-body, 1.85);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "palt";  /* 日本語プロポーショナル字形 */
}

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

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.4;
}

p { margin: 0 0 1em; }

/* ==========================================
   Layout container
   ========================================== */
:root {
    --technoauto-container-max: 1200px;
    --technoauto-container-wide: 1440px;
    --technoauto-content-pad-pc: 40px;
    --technoauto-content-pad-sp: 20px;
    --technoauto-section-gap: 80px;
    --technoauto-section-gap-sp: 48px;
}

.page-body {
    padding: 0 0 var(--technoauto-section-gap);
}

.page-body__inner {
    max-width: var(--technoauto-container-max);
    margin: 0 auto;
    padding: 0 var(--technoauto-content-pad-pc);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    row-gap: var(--technoauto-section-gap);
    column-gap: 20px;
}

/* ページヒーローは container の外に出す（フル幅） */
.page-body__inner > .page-hero {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: auto;
}

/* section-heading 直下の要素は section-heading と密接 */
.page-body__inner > .section-heading + * {
    margin-top: calc(var(--technoauto-section-gap) * -0.6);
}

/* ==========================================
   隣接する同一カードの自動グリッド化
   （Gutenberg で同一ブロックを縦積みしたら、内部で自動横並びにする）
   ========================================== */

/* 4カラム系: feature-item / gallery-item / info-card / stat-card-sub / logo-item */
.page-body__inner > .feature-item,
.page-body__inner > .gallery-item,
.page-body__inner > .info-card,
.page-body__inner > .stat-card-sub,
.page-body__inner > .logo-item,
.page-body__inner > .facility-item,
.page-body__inner > .worry-item,
.page-body__inner > .check-item {
    flex-basis: calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
}

/* 3カラム系: course-card-sub / interview-card-sub / stat-card / pickup-card */
.page-body__inner > .course-card-sub,
.page-body__inner > .interview-card-sub,
.page-body__inner > .stat-card,
.page-body__inner > .pickup-card,
.page-body__inner > .curriculum-card,
.page-body__inner > .practical-item,
.page-body__inner > .practical-flow-card,
.page-body__inner > .info-card-wide,
.page-body__inner > .course-step {
    flex-basis: calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
}

/* 2カラム系: voice-card / review-card / body-card / category-card / info-box / interview-card-top / event-card / course-card-top / definition-row-compare */
.page-body__inner > .voice-card,
.page-body__inner > .review-card,
.page-body__inner > .body-card,
.page-body__inner > .category-card,
.page-body__inner > .info-box,
.page-body__inner > .interview-card-top,
.page-body__inner > .event-card,
.page-body__inner > .course-card-top {
    flex-basis: calc((50% - 20px));
    max-width: calc((50% - 20px));
}

/* section-heading / 本文単独ブロックはフル幅 */
.page-body__inner > .section-heading,
.page-body__inner > .section-heading-lead,
.page-body__inner > .section-heading-top,
.page-body__inner > .cta-card,
.page-body__inner > .primary-button,
.page-body__inner > .page-hero,
.page-body__inner > .curriculum-goal,
.page-body__inner > .info-box[data-fullwidth],
.page-body__inner > .anchor-link,
.page-body__inner > .share-row,
.page-body__inner > .fee-head,
.page-body__inner > .fee-row,
.page-body__inner > .fee-year-head,
.page-body__inner > .fee-row-2col,
.page-body__inner > .schedule-row,
.page-body__inner > .event-row,
.page-body__inner > .route-row,
.page-body__inner > .history-row,
.page-body__inner > .pdf-row,
.page-body__inner > .link-row,
.page-body__inner > .definition-row,
.page-body__inner > .definition-list-v,
.page-body__inner > .definition-head,
.page-body__inner > .article-row,
.page-body__inner > .article-row-h,
.page-body__inner > .faq-item,
.page-body__inner > .year-accordion,
.page-body__inner > .step-item,
.page-body__inner > .step-item-h,
.page-body__inner > .form-field,
.page-body__inner > .choice-row-h,
.page-body__inner > .choice-row-v,
.page-body__inner > .confirm-row,
.page-body__inner > .form-steps,
.page-body__inner > .tab,
.page-body__inner > .recruit-box,
.page-body__inner > .success-mark,
.page-body__inner > .location-card,
.page-body__inner > .map-embed,
.page-body__inner > .pagination,
.page-body__inner > .search-bar,
.page-body__inner > .search-field,
.page-body__inner > .search-field-filter,
.page-body__inner > .sitemap-head,
.page-body__inner > .sitemap-row,
.page-body__inner > .wordmark,
.page-body__inner > .company-chip,
.page-body__inner > .curriculum-goal,
.page-body__inner > .carousel-controls,
.page-body__inner > .carousel-dots {
    flex-basis: 100%;
    max-width: 100%;
}

/* section-heading は次のカード群と密着 */
.page-body__inner > .section-heading,
.page-body__inner > .section-heading-lead,
.page-body__inner > .section-heading-top {
    margin-bottom: calc(var(--technoauto-section-gap) * -0.5);
}

/* ==========================================
   WP core block
   ========================================== */
.wp-block-group {
    max-width: var(--technoauto-container-max);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-columns { gap: 24px; }
.wp-block-image img { max-width: 100%; height: auto; }

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.alignwide { max-width: var(--technoauto-container-wide); }

/* Screen reader / skip link */
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden;
    padding: 0; position: absolute; width: 1px;
    word-wrap: normal !important;
}
.skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--technoauto-bg-brand, #439FFF);
    color: #fff; padding: 8px 16px; z-index: 9999;
}
.skip-link:focus { top: 0; }

/* ==========================================
   Header/Footer は container の外
   ========================================== */
.site-header,
.site-footer,
.header,
.footer {
    width: 100%;
}

/* ==========================================
   SP
   ========================================== */
@media screen and (max-width: 768px) {
    :root {
        --technoauto-content-pad-pc: 20px;
        --technoauto-section-gap: 48px;
    }

    .page-body__inner {
        padding: 0 var(--technoauto-content-pad-sp);
        column-gap: 12px;
        row-gap: 40px;
    }

    /* SP は全カード縦積み */
    .page-body__inner > * {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}