@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* .company_brownカラムにSVG装飾を追加 */
.company_brown {
    position: relative;
    padding-top: 5vw;
    margin-bottom: 0 !important;
}

.company_brown::before {
    content: "";
    position: absolute;
    top: -5vw;
    left: 0;
    right: 0;
    height: 5vw;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path fill="%23ac6a00" d="M100,5.58L75,2c0,0-50,7.22-50,7.11L0,5.58V10h75h25V5.58z" /></svg>');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.company_brown > * {
    position: relative;
    z-index: 2;
}

/* =====================================================
   Contact Form 7 カスタムスタイル（recruit01/02/03共通）
   ===================================================== */
.recruit-form {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
}

.recruit-form fieldset {
    border: none;
    border-top: 2px solid #2a57dc;
    padding: 20px 0;
    margin-bottom: 20px;
}

.recruit-form legend {
    font-weight: bold;
    color: #2a57dc;
    font-size: 18px;
    padding: 0;
    margin-bottom: 15px;
}

.form-row {
    margin-bottom: 15px;
}

.form-row label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.recruit-form input[type="text"],
.recruit-form input[type="email"],
.recruit-form input[type="tel"],
.recruit-form input[type="number"],
.recruit-form select,
.recruit-form textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 0;
    font-size: 14px;
    transition: border-color 0.3s;
}

.recruit-form input[type="text"]:focus,
.recruit-form input[type="email"]:focus,
.recruit-form input[type="tel"]:focus,
.recruit-form input[type="number"]:focus,
.recruit-form select:focus,
.recruit-form textarea:focus {
    outline: none;
    border-color: #2a57dc;
}

.recruit-form textarea {
    height: 100px;
    resize: vertical;
}

.form-submit {
    text-align: center;
    margin-top: 30px;
}

.form-submit input[type="submit"] {
    background: #2a57dc;
    color: white;
    padding: 15px 3em;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.form-submit input[type="submit"]:hover {
    background: #1e47c7;
}

.required {
    background: #e74c3c;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}

/* エントリーページのタイトル中央揃え */
.page-id-233 .c-pageTitle,
.page-id-233 .c-pageTitle__inner,
.page-id-143 .c-pageTitle,
.page-id-143 .c-pageTitle__inner {
    float: none !important;
    text-align: center;
}

/* =====================================================
   recruit03 右側の黄緑ライン装飾
   ===================================================== */
/* フロントページ（page-id-3） */
.page-id-3 #content {
    position: relative;
}

.page-id-3 #content::after {
    content: "";
    position: absolute;
    top: 0;
    right: 40px;
    width: 80px;
    height: 100%;
    background: #daef86;
    pointer-events: none;
}

/* coworkersセクションとworkセクションでバーを非表示 */
.page-id-3 .coworkers,
.page-id-3 .work {
    position: relative;
    z-index: 2;
    background: #fff;
}

/* 他のページ（フロントページ以外のrecruit03全ページ） */
/* JavaScriptで.recruit03-siteクラスを追加 */
.recruit03-site:not(.page-id-3) #content {
    position: relative;
}

.recruit03-site:not(.page-id-3) #content::after {
    content: "";
    position: absolute;
    top: 0;
    right: 40px;
    width: 80px;
    height: 100%;
    background: #daef86;
    pointer-events: none;
}

/* スマホでは非表示 */
@media (max-width: 768px) {
    .page-id-3 #content::after,
    .recruit03-site:not(.page-id-3) #content::after {
        display: none;
    }
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .recruit-form {
        margin: 10px;
        padding: 20px;
    }

    .recruit-form fieldset {
        padding: 15px 0;
    }

    .form-submit {
        text-align: center !important;
    }

    .recruit-form .wpcf7-form p {
        text-align: center;
    }

    .form-submit input[type="submit"] {
        padding: 12px 30px;
        font-size: 14px;
    }

    /* チェックボックスとラジオボタンを縦1列に */
    .recruit-form .wpcf7-checkbox,
    .recruit-form .wpcf7-radio {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .recruit-form .wpcf7-list-item {
        margin: 0 !important;
    }
}

/* =====================================================
   アニメーション設定
   ===================================================== */

/* 1. コンテンツのふわっと表示アニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* アニメーション対象要素 */
.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

/* 遅延表示用クラス */
.fade-in-up.delay-1 { animation-delay: 0.1s; }
.fade-in-up.delay-2 { animation-delay: 0.2s; }
.fade-in-up.delay-3 { animation-delay: 0.3s; }
.fade-in-up.delay-4 { animation-delay: 0.4s; }
.fade-in-up.delay-5 { animation-delay: 0.5s; }

/* 2. 画像のちょこちょこ動くアニメーション */
@keyframes wiggle {
    0% {
        transform: rotate(0deg) translateY(0);
    }
    15% {
        transform: rotate(-5deg) translateY(-8px);
    }
    30% {
        transform: rotate(5deg) translateY(-15px);
    }
    45% {
        transform: rotate(-5deg) translateY(-8px);
    }
    60% {
        transform: rotate(3deg) translateY(-12px);
    }
    75% {
        transform: rotate(-3deg) translateY(-5px);
    }
    100% {
        transform: rotate(0deg) translateY(0);
    }
}

/* 画像に適用 */
img[data-src*="pile-driver"],
img[data-src*="backhoe"],
img[data-src*="qustion-man"],
img[src*="pile-driver"],
img[src*="backhoe"],
img[src*="qustion-man"] {
    display: inline-block !important;
}

/* アニメーション起動クラス - data-srcとsrcの両方に対応 */
.wiggle-animate {
    animation: wiggle 1s ease-in-out 1s !important;
    animation-fill-mode: both !important;
}

/* より具体的なセレクタ */
img.wiggle-animate[data-src*="pile-driver"],
img.wiggle-animate[data-src*="backhoe"],
img.wiggle-animate[data-src*="qustion-man"],
img.wiggle-animate[src*="pile-driver"],
img.wiggle-animate[src*="backhoe"],
img.wiggle-animate[src*="qustion-man"] {
    animation: wiggle 1s ease-in-out 1s !important;
    animation-fill-mode: both !important;
}

/* =====================================================
   キャラクター画像用アニメーション
   ===================================================== */
@keyframes characterWiggle {
    0% {
        transform: translateX(0) translateY(-50%) rotate(0deg);
    }
    15% {
        transform: translateX(-5px) translateY(-50%) rotate(-3deg);
    }
    30% {
        transform: translateX(5px) translateY(-50%) rotate(3deg);
    }
    45% {
        transform: translateX(-5px) translateY(-50%) rotate(-3deg);
    }
    60% {
        transform: translateX(3px) translateY(-50%) rotate(2deg);
    }
    75% {
        transform: translateX(-3px) translateY(-50%) rotate(-2deg);
    }
    100% {
        transform: translateX(0) translateY(-50%) rotate(0deg);
    }
}

/* character01用（左側、下に配置） */
@keyframes character01Wiggle {
    0% {
        transform: translateX(0) translateY(-40%) rotate(0deg);
    }
    15% {
        transform: translateX(-5px) translateY(-40%) rotate(-3deg);
    }
    30% {
        transform: translateX(5px) translateY(-40%) rotate(3deg);
    }
    45% {
        transform: translateX(-5px) translateY(-40%) rotate(-3deg);
    }
    60% {
        transform: translateX(3px) translateY(-40%) rotate(2deg);
    }
    75% {
        transform: translateX(-3px) translateY(-40%) rotate(-2deg);
    }
    100% {
        transform: translateX(0) translateY(-40%) rotate(0deg);
    }
}

/* =====================================================
   recruit02 アセットファンテックを深堀り大調査！見出し装飾
   ===================================================== */
/* has-character-decorationクラスを持つ見出しにのみ適用 */
.post_content .has-character-decoration.is-style-section_ttl {
    position: relative;
    padding-left: calc(12rem + 6rem) !important;
    padding-right: calc(12rem + 6rem) !important;
}

/* 左側のキャラクター - 詳細度を上げてテーマのCSSを上書き */
.post_content .has-character-decoration.is-style-section_ttl::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    margin-top: -6rem !important;
    width: 12rem !important;
    height: 12rem !important;
    background: none !important;
    background-image: url('http://localhost:8080/recruit02/wp-content/uploads/sites/3/character01.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    border: none !important;
}

/* 左側のキャラクター アニメーション */
.post_content .has-character-decoration.is-style-section_ttl.character-animated::before {
    animation: character01WiggleNoY 1s ease-in-out 1 !important;
}

/* 右側のキャラクター - 詳細度を上げてテーマのCSSを上書き */
.post_content .has-character-decoration.is-style-section_ttl::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    margin-top: -6rem !important;
    width: 12rem !important;
    height: 12rem !important;
    background: none !important;
    background-image: url('http://localhost:8080/recruit02/wp-content/uploads/sites/3/character02.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    border: none !important;
}

/* 右側のキャラクター アニメーション */
.post_content .has-character-decoration.is-style-section_ttl.character-animated::after {
    animation: characterWiggleNoY 1s ease-in-out 1 !important;
    animation-delay: 0.5s !important;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .post_content .has-character-decoration.is-style-section_ttl {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .post_content .has-character-decoration.is-style-section_ttl::before,
    .post_content .has-character-decoration.is-style-section_ttl::after {
        display: none !important;
    }
}

/* =====================================================
   recruit02 character04装飾（1つのキャラクターのみ左側）
   ===================================================== */
.post_content .has-character04-decoration.is-style-section_ttl {
    position: relative;
    padding-left: 2.5rem !important;
}

/* 左側のキャラクター04 */
.post_content .has-character04-decoration.is-style-section_ttl::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    margin-top: -4.8rem !important;
    width: 9.6rem !important;
    height: 9.6rem !important;
    background: none !important;
    background-image: url('http://localhost:8080/recruit02/wp-content/uploads/sites/3/character04.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    border: none !important;
}

/* 左側のキャラクター04 アニメーション */
.post_content .has-character04-decoration.is-style-section_ttl.character-animated::before {
    animation: characterWiggleNoY 1s ease-in-out 1 !important;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .post_content .has-character04-decoration.is-style-section_ttl {
        padding-left: 0 !important;
    }

    .post_content .has-character04-decoration.is-style-section_ttl::before {
        display: none !important;
    }
}

/* =====================================================
   recruit02 character画像アニメーション
   ===================================================== */
/* character01-04画像にアニメーション適用 */
img[src*="character01.png"],
img[data-src*="character01.png"],
img[src*="character02.png"],
img[data-src*="character02.png"],
img[src*="character03.png"],
img[data-src*="character03.png"],
img[src*="character04.png"],
img[data-src*="character04.png"] {
    display: inline-block !important;
}

/* character01アニメーション再定義（確実に読み込むため） */
@keyframes character01Wiggle {
    0%, 100% {
        transform: translateX(0) translateY(-40%) rotate(0deg);
    }
    15% {
        transform: translateX(-5px) translateY(-40%) rotate(-3deg);
    }
    30% {
        transform: translateX(5px) translateY(-40%) rotate(3deg);
    }
    45% {
        transform: translateX(-5px) translateY(-40%) rotate(-3deg);
    }
    60% {
        transform: translateX(3px) translateY(-40%) rotate(2deg);
    }
    75% {
        transform: translateX(-3px) translateY(-40%) rotate(-2deg);
    }
}

/* character01アニメーション（translateY不使用版） */
@keyframes character01WiggleNoY {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    15% {
        transform: translateX(-5px) rotate(-3deg);
    }
    30% {
        transform: translateX(5px) rotate(3deg);
    }
    45% {
        transform: translateX(-5px) rotate(-3deg);
    }
    60% {
        transform: translateX(3px) rotate(2deg);
    }
    75% {
        transform: translateX(-3px) rotate(-2deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}

/* character02/04アニメーション（translateY不使用版） */
@keyframes characterWiggleNoY {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    15% {
        transform: translateX(-5px) rotate(-3deg);
    }
    30% {
        transform: translateX(5px) rotate(3deg);
    }
    45% {
        transform: translateX(-5px) rotate(-3deg);
    }
    60% {
        transform: translateX(3px) rotate(2deg);
    }
    75% {
        transform: translateX(-3px) rotate(-2deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}