@charset "UTF-8";
/*
Theme Name: Te Amo Recruit
Theme URI: https://te-amo2014.com/
Description: 株式会社Te Amo 採用サイト専用オリジナルテーマ
Author: Te Amo
Version: 1.0.0
*/

/* ----------------------------------------------------------------
   1. 基本設定 (Base & Typography)
---------------------------------------------------------------- */
/* Google Fontsの読み込みはfunctions.phpで行っていますが、
   フォントファミリーの定義はここでも行います */
body {
    font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    color: #111;
    line-height: 1.8;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* 横揺れ防止 */
}

/* 英語見出し用フォント */
.font-oswald {
    font-family: 'Oswald', sans-serif;
}

/* リンクのトランジション */
a {
    transition: all 0.3s ease;
}

/* ----------------------------------------------------------------
   2. WordPress必須クラス (WP Core)
---------------------------------------------------------------- */
/* 管理バーが表示されるときのヘッダー位置調整 */
body.admin-bar #header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar #header {
        top: 46px;
    }
}

/* 画像の配置設定（WordPress標準） */
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright {
    float: right;
    margin-left: 1.5em;
}
.alignleft {
    float: left;
    margin-right: 1.5em;
}

/* ----------------------------------------------------------------
   3. アニメーション定義 (Animations)
---------------------------------------------------------------- */
/* ふわっと浮き上がるフェードイン */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* 左からスライドイン */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-left {
    opacity: 0;
    animation: slideInLeft 0.8s ease-out forwards;
}

/* 画像のゆっくりズーム */
@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}
.animate-slow-zoom {
    animation: slowZoom 20s linear infinite alternate;
}

/* 下向き矢印の点滅 */
@keyframes pulseSlow {
    0%, 100% { opacity: 1; transform: translate(-50%, 0); }
    50% { opacity: 0.5; transform: translate(-50%, 10px); }
}
.animate-pulse-slow {
    animation: pulseSlow 2s infinite;
}

/* ----------------------------------------------------------------
   4. 共通パーツデザイン (Components)
---------------------------------------------------------------- */
/* 斜めの区切り線 (セクション下部) */
.skew-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #fff;
    transform: skewY(-2deg);
    transform-origin: bottom right;
    z-index: 5;
}

/* 斜めの区切り線 (セクション上部) */
.skew-divider-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #fff;
    transform: skewY(-2deg);
    transform-origin: top left;
    z-index: 5;
}

/* 赤字強調ユーティリティ */
.text-red-600 {
    color: #E60012;
}

/* スクロール検知用クラス */
.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ----------------------------------------------------------------
   5. ブログ記事本文のスタイル (Blog Content)
---------------------------------------------------------------- */
.entry-content {
    font-size: 1rem;
    line-height: 1.9;
    color: #333;
}

.entry-content h2 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #E60012; /* 赤い下線 */
}

.entry-content h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 4px solid #111; /* 黒い左線 */
}

.entry-content p {
    margin-bottom: 1.5rem;
}

.entry-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    background: #f9f9f9;
    padding: 20px 20px 20px 40px;
    border-radius: 4px;
}

.entry-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.entry-content img {
    margin: 2rem auto;
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.entry-content blockquote {
    border-left: 4px solid #ddd;
    padding-left: 1rem;
    color: #666;
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------
   6. Contact Form 7 カスタマイズ
---------------------------------------------------------------- */
/* エラーメッセージ等の調整 */
.wpcf7-not-valid-tip {
    font-size: 0.8em;
    font-weight: bold;
    color: #E60012;
}
.wpcf7-response-output {
    border: 2px solid #E60012 !important;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    padding: 1em !important;
    margin: 2em 0 !important;
}

/* ----------------------------------------------------------------
   7. 応募フォーム・Q&A 共通スタイル (Recruit)
---------------------------------------------------------------- */
/* Q&A アコーディオン */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.accordion-content.open {
    transition: max-height 0.3s ease-in;
}

/* フォームのステップボタン */
.step-btn.selected {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}
.step-btn.selected h4,
.step-btn.selected p,
.step-btn.selected span,
.step-btn.selected i {
    color: #fff !important;
}

/* フォームの条件タグボタン */
.tag-btn.active {
    background-color: #E60012 !important;
    color: #ffffff !important;
    border-color: #E60012 !important;
}
.tag-btn.active:hover {
    background-color: #cc0010 !important;
    border-color: #cc0010 !important;
}