@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
*/

.c-pageTitle__subTitle {
	display:none; !important
}

/* 汎用カテゴリータブ */
.universal-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 2em 0;
}

.universal-tab-list .tab-item a {
    display: block;
    padding: 6px 14px;
    background-color: #1a1a1a;
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid #333;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* 選択中またはホバー時：紫の光 */
.universal-tab-list .tab-item.current a,
.universal-tab-list .tab-item a:hover {
    background-color: #A259FF; /* メインカラー */
    color: #fff;
    border-color: #A259FF;
    box-shadow: 0 0 12px rgba(162, 89, 255, 0.4);
}

.icon-home:before {
    content:none;
}

.p-articleMetas__termList {
	display: none;
}

/* 詳細ページスライダーのカスタマイズ */
.works-detail-slider {
    margin-bottom: 40px;
    background: #000;
}

/* スライダーの矢印とドットを紫に */
.works-detail-slider .swiper-button-next,
.works-detail-slider .swiper-button-prev {
    color: #A259FF !important; /* あの紫！ */
}

.works-detail-slider .swiper-pagination-bullet-active {
    background: #A259FF !important;
}

/* 画像に少しだけ高級感のある影を */
.works-detail-slider img {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* フォーム全体のコンテナ */
.c-form-container {
    max-width: 800px;
    margin: 0 auto;
    color: #fff;
}

/* 各入力項目の間隔 */
.c-form-item {
    margin-bottom: 25px;
}

/* ラベルのデザイン */
.c-form-item label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 15px;
}

/* 必須ラベル */
.c-form-required {
    background: #ff4d4d;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

/* 任意ラベル */
.c-form-optional {
    background: #555;
    color: #ccc;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

/* 入力フィールドの基本（ダークモード仕様） */
.wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    color: #fff !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease;
}

/* フォーカス時の「紫の光」演出 */
.wpcf7-form-control:not(.wpcf7-submit):focus {
    border-color: #A259FF !important;
    box-shadow: 0 0 10px rgba(162, 89, 255, 0.4) !important;
    outline: none;
}

/* 同意チェックボックスのエリア */
.c-form-acceptance {
    text-align: center;
    margin: 30px 0;
    font-size: 14px;
}

/* 送信ボタンのカスタマイズ */
.c-form-submit {
    text-align: center;
}

.wpcf7-submit {
    background: #A259FF !important; /* あの紫！ */
    color: #fff !important;
    font-weight: bold !important;
    padding: 18px 60px !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    letter-spacing: 0.1em;
}

.wpcf7-submit:hover {
    background: #b37dff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(162, 89, 255, 0.6) !important;
}

.l-article {
    max-width: var(--container_size);
    padding-left: 0;
    padding-right: 0;
}

/* CF7スピナー非表示 */
.wpcf7-spinner {
    display: none !important;
}

/* Works セクション: スマホ時のみ写真を上・テキストを下に変更 */
@media (max-width: 599px) {
    .wp-block-columns:has(#works_title) {
        flex-direction: column-reverse;
    }
}

/* Works / Equipment トップページ投稿リスト: リンク無効・ホバー無反応 */
.wp-block-columns:has(#works_title) .p-postList__link,
.wp-block-columns:has(#equipment_title) .p-postList__link,
.wp-block-columns:has(#company_title) .p-postList__link {
    pointer-events: none;
    cursor: default;
}

.wp-block-columns:has(#works_title) .p-postList__link:hover .c-postThumb__img,
.wp-block-columns:has(#equipment_title) .p-postList__link:hover .c-postThumb__img,
.wp-block-columns:has(#company_title) .p-postList__link:hover .c-postThumb__img {
    transform: none;
    opacity: 1;
}

/* TOPページ: Company・Our Serviceの写真クリック拡大を無効化 */
#company_title ~ * .wp-block-image a,
#company_title ~ * .wp-block-image img,
.wp-block-columns:has(#company_title) .wp-block-image a,
.wp-block-columns:has(#company_title) .wp-block-image img,
.wp-block-columns:has(#service_title) .wp-block-image a,
.wp-block-columns:has(#service_title) .wp-block-image img {
    pointer-events: none;
    cursor: default;
}

/* Companyページ: 沿革の行間を狭める */
.swell-block-step__item {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
}

.swell-block-step__item .swell-block-step__body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.swell-block-step__item .swell-block-step__body p {
    margin: 0 !important;
    line-height: 1 !important;
}

/* トップページ メインビジュアル: テキストロゴをスライダー上に重ねて表示 */
.p-mvSlider,
.p-top-mv {
    position: relative;
}

.p-mvSlider::after,
.p-top-mv::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 800px;
    aspect-ratio: auto;
    background-image: url('https://synchrolight.jp/wp-content/uploads/2026/04/70A19A77-FE28-4277-A43C-5CBB2F5E3FBF.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 10;
}

@media (max-width: 767px) {
    .p-mvSlider::after,
    .p-top-mv::after {
        width: 85%;
    }
}

/* トップページ メインビジュアルにテキスト画像を重ねて表示 */
.p-mainVisual {
    position: relative;
}

.p-mainVisual::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('https://synchrolight.jp/wp-content/uploads/2026/04/70A19A77-FE28-4277-A43C-5CBB2F5E3FBF.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 60%;
    height: 20%;
    z-index: 10;
    pointer-events: none;
}

/* スマホ用 */
@media (max-width: 767px) {
    .p-mainVisual::after {
        width: 85%;
        height: 15%;
    }
}

/* カテゴリーツリー（階層対応アコーディオン） */
.universal-tab-tree {
    flex-direction: column;
    gap: 4px;
}

.universal-tab-tree > .tab-item > a,
.universal-tab-tree > .tab-item > .tab-parent__label {
    display: block;
    padding: 6px 14px;
    background-color: #1a1a1a;
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid #333;
    transition: all 0.3s ease;
    border-radius: 2px;
    cursor: pointer;
}

/* ホバー・選択中 */
.universal-tab-tree > .tab-item.current > a,
.universal-tab-tree > .tab-item > a:hover,
.universal-tab-tree > .tab-item.current:not(.tab-parent) > .tab-parent__label,
.universal-tab-tree > .tab-item > .tab-parent__label:hover {
    background-color: #A259FF;
    color: #fff;
    border-color: #A259FF;
    box-shadow: 0 0 12px rgba(162, 89, 255, 0.4);
}

/* 親カテゴリーが current でも子を開いているだけの場合は色を変えない */
.universal-tab-tree > .tab-item.tab-parent.current > .tab-parent__label {
    background-color: #2a2a2a;
    color: #ccc;
    border-color: #555;
    box-shadow: none;
}

/* 親ラベルの矢印 */
.tab-parent__arrow {
    float: right;
    transition: transform 0.3s ease;
    display: inline-block;
}

.tab-parent.is-open .tab-parent__arrow {
    transform: rotate(180deg);
}

/* 子カテゴリーリスト */
.tab-child-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.tab-parent.is-open .tab-child-list {
    max-height: 500px;
}

.tab-child {
    padding-left: 12px;
    margin-top: 2px;
}

.tab-child a {
    display: block;
    padding: 5px 14px;
    background-color: #111 !important;
    color: #aaa !important;
    text-decoration: none;
    font-size: 12px;
    border: 1px solid #2a2a2a !important;
    border-radius: 2px;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.tab-child.current a {
    background-color: #7a3fbf !important;
    color: #fff !important;
    border-color: #7a3fbf !important;
    box-shadow: 0 0 8px rgba(162, 89, 255, 0.3) !important;
}

.tab-child a:hover {
    background-color: #7a3fbf !important;
    color: #fff !important;
    border-color: #7a3fbf !important;
}

/* 動画スライド表示時はSwiperのページネーションを動画の下に移動 */
.custom-slider-outer .swiper-pagination {
    bottom: -28px !important;
    background: rgba(0,0,0,0.5);
    padding: 4px 0;
}

.custom-slider-outer {
    padding-bottom: 32px;
}

/* 動画コントロールが操作しやすいよう、video要素を最前面に */
.swiper-slide--video video {
    position: relative;
    z-index: 5;
}

/* Works詳細ページのテーブルスタイル */
.single-works .wp-block-table {
    max-width: 600px;
}

.single-works .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.single-works .wp-block-table td,
.single-works .wp-block-table th {
    padding: 6px 12px !important;
    line-height: 1.5;
    border: 1px solid #444;
}