/*
Theme Name: tokyoparts2025recruit
Theme URI: 
Author: 
Author URI: 
Description: リクルートサイト用テーマ
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tokyoparts2025recruit
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

@import url("assets/css/variable.css");
@import url("assets/css/header.css");
@import url("assets/css/footer.css");
@import url("assets/css/content.css");
@import url("assets/css/component.css");
@import url("assets/css/utility.css");


html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', 'Yu Gothic', YuGothic, 'MS PGothic', Osaka, arial, sans-serif;
}

/* リセットCSS */
a {
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

a:hover {
    opacity: 0.8;
}

nav, button {
    outline: none;
}



/* adobe font TOKYOPARTS専用 */
.font-hsj-light {
    font-family: var(--font-hsj);
    font-weight: 200;
}
.font-hsj-regular {
    font-family: var(--font-hsj);
    font-weight: 400;
}
.font-hsj-bold {
    font-family: var(--font-hsj);
    font-weight: 700;
}

.font-industry-book {
    font-family: var(--font-industry);
    font-weight: 400;
}
.font-industry-demi {  
    font-family: var(--font-industry);
    font-weight: 600;
}
.font-industry-bold-italic {
    font-family: var(--font-industry);
    font-weight: 700;
    font-style: italic;
}
.font-industry-black-italic {
    font-family: var(--font-industry);
    font-weight: 800;
    font-style: italic;
}
.font-industry-ultra-italic {
    font-family: var(--font-industry);
    font-weight: 900;
    font-style: italic;
}

/* 製品情報一覧出力用 row grid & cards */
.row-index {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 auto;
    justify-content: center; /* カードを中央揃え */
}

.row-index .col {
    flex: 1 1 calc(100% - 16px); /* 初期値: 1列 */
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 576px) {
    .row-index .col {
        flex: 1 1 calc(50% - 16px); /* スマホ: 2列 */
        max-width: calc(50% - 16px);
    }
}

@media (min-width: 992px) {
    .row-index .col {
        flex: 1 1 calc(25% - 16px); /* PC: 4列 */
        max-width: calc(25% - 16px);
    }
}

/* カードのスタイル */

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%; /* カード全体をリンク化 */
}

.card-link:hover .card-title {
    text-decoration: underline;
}

.card img {
    transition: transform 0.2s ease-in-out;
}

.card:hover img {
    transform: scale(1.05); /* ホバー時の画像拡大 */
}

/* 製品カテゴリープルダウンリスト */
/* プルダウン全体のスタイル */
#product-category-select {
    width: 100%;
    max-width: 400px; /* プルダウンの最大幅 */
    padding: 10px;
    font-size: 16px;
    font-family: monospace; /* 等幅フォント */
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    appearance: auto; /* ブラウザ標準のスタイルを保持 */
    -moz-appearance: auto; /* Firefox用 */
    -webkit-appearance: auto; /* Safari用 */
}
#product-category-select option {
    font-family: monospace; /* 選択肢にも等幅フォント */
    white-space: pre; /* スペースをそのまま表示 */
}

/* プルダウンのホバー状態 */
#product-category-select:hover {
    border-color: #0078d4; /* ホバー時のボーダーカラー */
}

/* プルダウンのフォーカス状態 */
#product-category-select:focus {
    outline: none;
    border-color: #0078d4;
    box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* フォーカス時のエフェクト */
}

/*---- トップページ   ----*/
header {
    z-index: 1000;
    /* position: relative; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.page-id-2 .entry-content {
    margin-top: -111px;
}
footer .wp-block-columns {
    margin-bottom: 0 !important;
}


/*---- 製品情報  ----*/
.single-products .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
}
.single-products .products_lineup {
    text-align: center;
    margin:3rem 0 1rem;
}
/* table 縦段組み換え */
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
}
.tandem table, .tandem table th, .tandem table td, table.tandem { border-collapse: collapse; border:1px solid #ccc;}
.tandem table th,table.tandem  { background-color: #efefef;white-space: nowrap;}
.tandem table th, .tandem table td, .tandem table th, .tandem table td { padding: 10px; }
@media screen and (max-width: 767px) {
    .tandem table,table.tandem {
        border: none;
        border-top: 1px solid #ccc;
    }
    .tandem thead {
        display: none;
    }

    .tandem table tr, .tandem table tr {
        display: block;
    }
    .tandem table th, .tandem table tr {
        display: block;
        text-align: center;
        border-top:none;
    }
    .tandem table td, .tandem table td {
        display: block;
        padding: 10px;
        text-align: left;
        border-top:none;
    }
    .tandem table td.tandem-title , .tandem table td.tandem-title {
        text-align: center;
        font-weight: bold;
        border-top: double #ccc;
    }
    .tandem table td::before , .tandem table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
}

/*通常blockのtableスタイル */
.wp-block-table {
    width: 100%;
    margin-bottom: 1rem;
}

.wp-block-table table {
    border-collapse: collapse;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
    background: #fff; /* テーブル全体の背景色を白に */
}

/* ヘッダー部分（<th>）のスタイル */
.wp-block-table table th {
    background-color: #f0f0f0; /* ヘッダーを薄いグレー */
    padding: 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #ccc; /* 上下左右のボーダーを統一 */
}

/* データセル（<td>）のスタイル */
.wp-block-table table td {
    background-color: #fff; /* データ部分を白背景 */
    padding: 10px;
    border: 1px solid #ccc; /* 上下左右のボーダーを統一 */
}

/* ストライプデザイン */
.wp-block-table .is-style-stripes {
    border-spacing: 0;
    border-collapse: inherit;
    background-color: transparent;
    border: none;
}

.wp-block-table .is-style-stripes td,
.wp-block-table .is-style-stripes th {
    border-bottom: 1px solid #ccc;
}

/* ストライプデザインの交互行スタイル */
.wp-block-table .is-style-stripes.has-subtle-light-gray-background-color tr:nth-child(odd),
.wp-block-table .is-style-stripes tr:nth-child(odd) {
    background-color: #f9f9f9; /* 交互行に薄いグレーを適用 */
}



input, select, textarea {
    background: white;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: var(--wp--custom--form--box-shadow);
    color: #555;
    line-height:1.75;
    padding:0.5rem;
    transition-duration: .15s;
    transition-property: background-color,border-color,box-shadow;
    transition-timing-function: ease-in-out;
    width: calc(100% - 1rem);
  }