@charset "UTF-8";
/*
Theme Name: NANO
Theme URI:https://tcd-theme.com/tcd065
Description:"NANO" is a WordPress theme that allows you to create a large corporate website at a low cost. The multi-level site structure organized and transmits a wide range of business info. Also you can easy to design the top page that conveys your company's message and achievements.
Author:TCD
Author URI:https://tcd-theme.com/
Text Domain: tcd-nano
Version:1.9
*/
/* ========================================================================== Foundation ========================================================================== */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/* Sections ========================================================================== */
/** Remove the margin in all browsers (opinionated). */
body { margin: 0; }

/** Add the correct display in IE 9-. */
article, aside, footer, header, nav, section { display: block; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content ========================================================================== */
/** Add the correct display in IE 9-. 1. Add the correct display in IE. */
figcaption, figure, main { /* 1 */ display: block; }

/** Add the correct margin in IE 8. */
figure { margin: 1em 40px; }

/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }

/** 1. Remove the bottom border in Chrome 57- and Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ }

/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font style in Android 4.3-. */
dfn { font-style: italic; }

/** Add the correct background and color in IE 9-. */
mark { background-color: #ff0; color: #000; }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Add the correct display in IE 9-. */
audio, video { display: inline-block; }

/** Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }

/** Remove the border on images inside links in IE 10-. */
img { border-style: none; }

/** Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** 1. Add the correct display in IE 9-. 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. */
details, menu { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Scripting ========================================================================== */
/** Add the correct display in IE 9-. */
canvas { display: inline-block; }

/** Add the correct display in IE. */
template { display: none; }

/* Hidden ========================================================================== */
/** Add the correct display in IE 10-. */
[hidden] { display: none; }

* { box-sizing: border-box; }

body { color: #000; line-height: 1; -webkit-font-smoothing: antialiased; }

a { color: #000; text-decoration: none; transition-property: background-color, color; transition-duration: 0.2s; transition-timing-function: ease; }

img { vertical-align: bottom; }

h1, h2, h3, h4, h5, h6, p, ol, ul { margin-top: 0; }

p { margin-bottom: 0; }

ol, ul { padding-left: 0; list-style: none; }

.admin-bar { padding-top: 32px; }

/* -------------------------------------------------------------------------------- web fonts　ウェブフォントファイルを変更した場合はv=1.0の数字を変更（キャッシュ対策） -------------------------------------------------------------------------------- */
@font-face { font-family: "design_plus"; src: url("assets/fonts/design_plus.eot?v=1.0"); src: url("assets/fonts/design_plus.eot?v=1.0#iefix") format("embedded-opentype"), url("assets/fonts/design_plus.woff?v=1.0") format("woff"), url("assets/fonts/design_plus.ttf?v=1.0") format("truetype"), url("assets/fonts/design_plus.svg?v=1.0#design_plus") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: "update_icon"; src: url("assets/fonts/update_icon.eot?v=1.2"); src: url("assets/fonts/update_icon.eot?v=1.2#iefix") format("embedded-opentype"), url("assets/fonts/update_icon.woff?v=1.2") format("woff"), url("assets/fonts/update_icon.ttf?v=1.2") format("truetype"), url("assets/fonts/update_icon.svg?v=1.2#update_icon") format("svg"); font-weight: normal; font-style: normal; }

@font-face {
  font-family: 'tiktok_x_icon';
  src: url('assets/fonts/tiktok_x_icon.eot?v=1.0');
  src: url('assets/fonts/tiktok_x_icon.eot?v=1.0#iefix') format('embedded-opentype'),
       url('assets/fonts/tiktok_x_icon.woff?v=1.0') format('woff'),
       url('assets/fonts/tiktok_x_icon.ttf?v=1.0') format('truetype'),
       url('assets/fonts/tiktok_x_icon.svg?v=1.0#tiktok_x_icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* keyframes */
@-webkit-keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@-webkit-keyframes fadeOut { from { visibility: visible;
    opacity: 1; }
  to { visibility: hidden;
    opacity: 0; } }

@keyframes fadeOut { from { visibility: visible;
    opacity: 1; }
  to { visibility: hidden;
    opacity: 0; } }

@-webkit-keyframes slideDown { 0% { top: -100%; }
  100% { top: 0; } }

@keyframes slideDown { 0% { top: -100%; }
  100% { top: 0; } }

@-webkit-keyframes slideUp { 0% { bottom: -100%; }
  100% { bottom: 0; } }

@keyframes slideUp { 0% { bottom: -100%; }
  100% { bottom: 0; } }

@-webkit-keyframes fadeInUp { from { opacity: 0;
    -webkit-transform: translateY(50%);
            transform: translateY(50%); }
  to { opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes fadeInUp { from { opacity: 0;
    -webkit-transform: translateY(50%);
            transform: translateY(50%); }
  to { opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@-webkit-keyframes zoom-in { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1.2); transform: scale(1.2); } }

@keyframes zoom-in { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1.2); transform: scale(1.2); } }

@-webkit-keyframes zoom-out { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@keyframes zoom-out { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@media screen and (max-width: 782px) { .admin-bar { padding-top: 46px; } }

/* コピーボタン */
.single_copy_title_url { text-align: center; }
.single_copy_title_url_btn {
  font-size:14px; background:#fff; border:3px solid #ccc; cursor:pointer; line-height:54px; min-width:300px; padding: 0 15px;
  -webkit-box-sizing:border-box; box-sizing:border-box;
  -webkit-transition-property:background-color, color; -webkit-transition-duration:0.3s; -webkit-transition-timing-function:ease;
  transition-property:background-color, color; transition-duration:0.3s; transition-timing-function:ease;
}
.single_copy_title_url_btn.copied { background:#ccc; color:#fff; pointer-events:none; }
#single_copy_title_url_bottom { margin-bottom:50px; margin-top:38px; }
#single_share_bottom + #single_copy_title_url_bottom { margin-top:55px; }
.single_copy_title_url_btn:hover { color: #777; }

@media screen and (max-width:750px) {
  #single_copy_title_url_bottom { margin-top:10px; margin-bottom: 35px; }
  .single_copy_title_url_btn { border-width:2px; font-size:12px; line-height:46px; min-width:200px; }
}

/* ----------------------------------------------------------------------
 汎用スタイルの追加
 https://tcd-theme.com/2023/09/utility-classes.html
---------------------------------------------------------------------- */
.p-entry .a_break { display: inline-block; }
@media (max-width: 767px) {
  .p-entry .is-pc { display:none!important; }
}
@media not all and (max-width: 767px) {
  .p-entry .is-sp { display:none!important; }
}
.p-entry .e_link {
  display: inline-block; position: relative; padding-right:1em;
}
.p-entry .e_link:after {
  font-family: 'design_plus'; content: '\e92a'; font-size: 100%; display: block;
  position: absolute; transition:none; margin-top:-0.1em;
  right:0; top:50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.p-entry img.frame {
  border: 1px solid #d2d2d2;
  -webkit-box-shadow: 0 6px 6px -6px #cccccc;
  -moz-box-shadow: 0 6px 6px -6px #cccccc;
  box-shadow: 0 6px 6px -6px #cccccc;
}

.slick-track{top:-60px;}

.canva_sp{ display:none;}
@media (max-width: 767px) {
	.canva_sp{ display:block;}
	.canva{display:none;}
}

.titlebox{ margin-top:50px;margin-bottom:40px; margin-left: 50px; padding-left: 15px; border-left: 13px solid #6a5acd;height:60px;}
.contentstitle{font-size: 2.0rem;text-align: left;font-weight:500;position: absolute;transform: translateY(40%); margin-left: 0px;}
.welfarep_title{text-align:center; font-size:60px; font-weight:600; color:black;}
.welfare_ul{display: flex; flex-wrap: wrap; width: 85%;height: 235px; margin-left: auto; margin-right: auto;}
.welfare_li{display:table; flex-wrap: wrap; width:25%;height: 300px; margin-left: auto; margin-right: auto;border-radius:10px; text-align:center;}
.welfare_ul1{display: flex; flex-wrap: wrap; width: 85%;height: 235px; margin-left: auto; margin-right: auto;}
.welfare_txt{font-size:22px; font-weight:700; padding:15px 0px;}
.welfare_img{width:45%; margin-left:auto;margin-right:auto;display:block;}
.welfare_sbtxt{font-size:18px;}
.welfare_div{display: table; flex-wrap: wrap; width: 90%; margin-left: auto; margin-right: auto; background-color:#ffff;border-radius:10px; text-align:center; margin-bottom:150px;	padding-bottom: 70px;}
.welfare_li_n{display:table; flex-wrap: wrap; width:25%;height: 300px; margin-left: auto; margin-right: auto;border-radius:10px; text-align:center;}
@media screen and (max-width: 767px) {
	.welfarep_title{font-size:30px;}
	.titlebox{margin-left: 25px; border-left: 10px solid #6a5acd;height:30px;}
	.contentstitle{font-size:22px;}
	.l-header {position: fixed;}
	.l-main{width:100%;}
	.welfare_div{ margin-bottom:50px;	padding-bottom: 0px;}
	.welfare_li{width:45%;height:165px;margin:4px;}
	.welfare_txt{font-size:15px;}
	.welfare_sbtxt{font-size:12px;}
	.welfare_ul{height: 360px; width:98%;margin-left:0;}
	.welfare_ul1{height: 180px; width:98%;margin-left:0;}
	.welfare_li_n{display:none;}
}


/* --- 福利厚生ページ全体 --- */
.p-welfare-page {
    width: 100%;
    overflow: hidden;
    background-color: #f4f7f9; /* 背景色を少しつけてカードを浮き立たせる */
    padding-bottom: 100px;
}

/* タイトル周り */
.p-welfare-header {
    text-align: center;
    padding: 120px 20px 80px;
    background-color: #fff;
    margin-bottom: 50px;
}

.welfarep_title {
    font-size: 48px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.welfarep_desc {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
}

/* コンテンツ幅の制限 */
.welfare_div {
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 20px;
}

/* 各セクションの箱 */
.welfare-section-box {
    margin-bottom: 80px;
}

/* 見出しデザイン（既存を踏襲しつつ微調整） */
.titlebox {
    margin: 0 0 30px 0;
    padding-left: 20px;
    border-left: 8px solid #0044CC; /* ウイングブルーに統一 */
    height: auto;
    display: flex;
    align-items: center;
}

.contentstitle {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    position: static;
    transform: none;
    margin: 0;
}

/* --- グリッドレイアウト（PCは4列） --- */
.welfare-grid-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 0;
    padding: 0;
}

/* カードデザイン */
.welfare-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    border-bottom: 4px solid transparent;
}

.welfare-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 68, 204, 0.1);
    border-bottom-color: #0044CC;
}

/* アイコン周り（白丸背景を追加） */
.welfare-icon-circle {
    width: 100px;
    height: 100px;
    background-color: #f9f9f9; /* カードより少し濃いグレーか、逆に薄い色 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

.welfare-card:hover .welfare-icon-circle {
    background-color: #eef4ff; /* ホバーで薄い青に */
}

/* 画像制御 */
.welfare_img {
    width: auto;
    height: auto;
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}

/* テキスト */
.welfare-content {
    width: 100%;
}

.welfare_txt {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.4;
    font-feature-settings: "palt";
}

.welfare_sbtxt {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}


/* --- レスポンシブ対応 (スマホ) --- */
@media screen and (max-width: 900px) {
    /* タブレットは3列 */
    .welfare-grid-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .p-welfare-header {
        padding: 100px 20px 50px;
    }
    
    .welfarep_title {
        font-size: 28px;
    }
    
    .titlebox {
        margin-bottom: 20px;
        border-left-width: 5px;
    }
    
    .contentstitle {
        font-size: 20px;
    }

    /* スマホは2列 */
    .welfare-grid-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .welfare-card {
        padding: 10px 5px;
    }

    .welfare-icon-circle {
        width: 70px;
        height: 70px;
        margin-bottom: 15px;
    }

    .welfare_txt {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .welfare_sbtxt {
        font-size: 10px;
    }
}

/* --- フッターCTAセクション --- */
.p-footer-cta {
    padding: 100px 0;
    background-color: #0044CC; /* ウイングブルー */
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
}

/* ヘッダーエリア */
.cta-header {
    text-align: center;
    margin-bottom: 60px;
}

.cta-en {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    letter-spacing: 0.1em;
    opacity: 0.8;
    margin-bottom: 10px;
}

.cta-jp {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}

.cta-desc {
    font-size: 15px;
    line-height: 1.8;
    opacity: 0.9;
}

/* 2カラムグリッド */
.cta-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

/* 各ボックス */
.cta-box {
    background-color: rgba(255, 255, 255, 0.1); /* 半透明の白 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 50px 40px;
    width: 48%;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.cta-box:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

/* ボックス内のヘッダー */
.cta-box-header {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-cat-en {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 5px;
}

.cta-cat-jp {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.cta-box-desc {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 40px;
    min-height: 50px; /* 高さ揃え */
}

/* ボタンエリア */
.cta-btn-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cta-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    padding: 18px;
    border-radius: 50px;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.cta-btn .arrow {
    margin-left: 10px;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
}

/* 枠線ボタン（募集要項） */
.btn-outline {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* 塗りつぶしボタン（エントリー） */
.btn-solid {
    background-color: #fff;
    border: 2px solid #fff;
    color: #0044CC; /* 文字色は青 */
}

.btn-solid:hover {
    background-color: #ffde59; /* ホバーで黄色（アクセント）など */
    border-color: #ffde59;
    color: #333;
    transform: scale(1.03);
}


/* --- スマホ対応 (レスポンシブ) --- */
@media screen and (max-width: 768px) {
    .p-footer-cta {
        padding: 60px 0;
    }

    .cta-jp {
        font-size: 24px;
    }

    .cta-grid {
        flex-direction: column;
        gap: 30px;
    }

    .cta-box {
        width: 100%;
        padding: 30px 20px;
    }

    .cta-cat-jp {
        font-size: 20px;
    }

    .cta-box-desc {
        min-height: auto;
        margin-bottom: 30px;
    }
}








/* --- 採用情報セクション --- */
.recruit-info-section {
    padding: 120px 0;
    position: relative;
    background-color: #fff;
    overflow: hidden;
}

/* 背景の巨大文字 (RECRUIT) */
.bg-recruit-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央配置 */
    font-size: 25vw; /* 画面幅に応じた巨大サイズ */
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #f7f7f7; /* ほぼ白に近いグレー */
    z-index: 0; /* 一番奥 */
    pointer-events: none; /* 選択不可 */
    line-height: 1;
    white-space: nowrap;
}

/* コンテナは背景より手前に */
.recruit-info-section .container {
    position: relative;
    z-index: 1;
}

/* --- リンクカードグリッド --- */
.recruit-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列 */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 60px auto;
}

/* カード本体 */
.recruit-link-card {
    display: block;
    background-color: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    padding: 50px 40px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

/* ホバー時の反転アクション */
.recruit-link-card:hover {
    background-color: #0044CC; /* ウイングブルー */
    border-color: #0044CC;
    color: #fff; /* 文字を白く */
    transform: translateY(-5px); /* 少し浮く */
    box-shadow: 0 15px 30px rgba(0, 68, 204, 0.2);
}

/* カード内の要素 */
.card-inner {
    text-align: center;
}

.cat-en {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.recruit-link-card:hover .cat-en {
    opacity: 0.9; /* 白文字になったときは少し濃く */
}

.cat-jp {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.cat-desc {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
    opacity: 0.8;
}

/* 矢印アイコン */
.card-arrow {
    display: inline-block;
    font-size: 20px;
    font-family: 'Oswald', sans-serif;
    transition: transform 0.3s;
}

.recruit-link-card:hover .card-arrow {
    transform: translateX(10px); /* 右へ動く */
}

/* --- エントリーエリア --- */
.entry-cta-area {
    text-align: center;
    margin-top: 80px;
}

.entry-msg {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 700;
}

/* 大きなエントリーボタン */
.big-entry-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: #333; /* 黒に近いグレー */
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 20px 80px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.big-entry-btn .btn-arrow {
    margin-left: 15px;
    transition: transform 0.3s;
}

/* エントリーボタンのホバー */
.big-entry-btn:hover {
    background-color: #0044CC; /* 青に変化 */
    transform: scale(1.05); /* 少し大きく */
    box-shadow: 0 10px 25px rgba(0, 68, 204, 0.3);
}

.big-entry-btn:hover .btn-arrow {
    transform: translateX(5px);
}


/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .bg-recruit-text {
        font-size: 80px; /* スマホではサイズを調整 */
    }

    .recruit-link-grid {
        grid-template-columns: 1fr; /* 1列 */
        gap: 20px;
    }

    .recruit-link-card {
        padding: 30px 20px;
    }

    .cat-jp {
        font-size: 20px;
    }

    .big-entry-btn {
        width: 80%; /* 幅を広めに */
        padding: 15px 0;
        font-size: 20px;
    }
}


/* --- セクションタイトル --- */
.section-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.header-en {
    display: block;
    color: #0044CC; /* ウイングブルー */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
    font-family: 'Oswald', sans-serif; /* 英語用フォント */
}

.header-jp {
    font-size: 36px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.05em;
}

/* ==============================================
   ヘッダーナビゲーション デザイン修正
   ============================================== */

/* --- ナビゲーションバー全体 (PC) --- */
.l-header__nav {
    background-color: #fff; /* 白背景で清潔感を出す */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* うっすら影をつけて浮かる */
    width: 100%;
    position: relative;
    z-index: 999;
}

.p-global-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    height: 80px; /* ヘッダーの高さ */
    margin: 0 auto;
    width: 95%;
    max-width: 1400px;
}

/* --- 各メニュー項目 --- */
.p-global-nav > li {
    border: none !important; /* 既存の枠線を消す */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ロゴ部分の調整 */
.p-global-nav > li.nav-logo {
    margin-right: auto; /* ロゴだけ左に寄せる */
}
.p-global-nav > li.nav-logo img {
    height: 40px; /* ロゴサイズ調整 */
    width: auto;
    vertical-align: middle;
}

/* リンクのデザイン */
.p-global-nav > li > a {
    color: #333 !important; /* 文字は黒系 */
    font-weight: 700;
    font-size: 14px;
    padding: 0 20px;
    line-height: 80px;
    display: block;
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
}

/* ホバー時の動き */
.p-global-nav > li > a:hover {
    color: #0044CC !important; /* ホバーで青く */
}


/* --- 「応募はこちら」ボタンのデザイン --- */
.p-global-nav > li.nav-item-cta {
    margin-left: 15px;
}

/* リンクタグ自体をボタンの形にする */
a.nav-btn-entry {
    line-height: 1 !important; /* 高さリセット */
    padding: 15px 30px !important;
    background-color: #0044CC; /* ウイングブルー */
    color: #fff !important;
    border-radius: 50px; /* 丸いボタン */
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 68, 204, 0.3);
    border: 2px solid #0044CC;
}

/* ボタンホバー時 */
a.nav-btn-entry:hover {
    background-color: #fff;
    color: #0044CC !important;
    transform: translateY(-2px);
}


/* --- ドロップダウンメニュー (PC) --- */
.sub-menu {
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-top: 2px solid #0044CC;
    min-width: 200px;
    padding: 10px 0;
    display: none; /* 初期状態は非表示 */
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 100;
}

.p-global-nav > li:hover .sub-menu {
    display: block; /* ホバーで表示 */
}

.sub-menu li a {
    padding: 15px 20px;
    color: #333 !important;
    font-size: 13px;
    display: block;
    border-bottom: 1px solid #eee;
}

.sub-menu li a:hover {
    background-color: #f9f9f9;
    color: #0044CC !important;
}

/* --- 2. メニューバーの修正（スマホ・PC共通） --- */

/* ナビ全体 */
.l-header__nav {
    background-color: #fff !important; /* 白背景 */
}

.p-global-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* PCでのメニュー項目 */
@media (min-width: 992px) {
    .p-global-nav > li {
        border: none !important;
        margin: 0;
        padding: 0 15px;
    }

    .p-global-nav > li > a {
        color: #333 !important;
        font-weight: 700;
        text-decoration: none;
        font-size: 14px;
        line-height: 80px; /* ヘッダー高さに合わせる */
        display: block;
    }
    
    /* 応募ボタン(PC) */
    .nav-btn-entry {
        background-color: #0044CC;
        color: #fff !important;
        padding: 12px 30px;
        border-radius: 30px;
        line-height: 1;
    }
}


/* --- 3. スマホメニューの崩れ修正（強制リセット） --- */
@media (max-width: 991px) {
    
    /* ハンバーガーボタン */
    .c-menu-btn {
        display: block !important;
        position: fixed; /* スクロールしてもついてくる */
        top: 15px;
        right: 15px;
        z-index: 10000;
    }

    /* ナビゲーション本体 */
    #js-header__nav {
        display: block !important; /* TCDのJSによる非表示を解除 */
        position: fixed;
        top: 0;
        right: -100%; /* 画面外へ */
        width: 80% !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 9999;
        transition: right 0.4s ease;
        visibility: hidden;
        overflow-y: auto;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        padding-top: 60px !important; /* 閉じるボタン用余白 */
    }

    /* 開いた状態 */
    #js-header__nav.is-active {
        right: 0 !important;
        visibility: visible !important;
    }

    /* リストを縦並びに */
    .p-global-nav {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 各項目 */
    .p-global-nav > li {
        display: block !important;
        width: 100% !important;
        border: none !important;
        border-bottom: 1px solid #eee !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* リンク文字 */
    .p-global-nav > li > a {
        display: block !important;
        padding: 15px 20px !important;
        color: #333 !important;
        font-size: 16px !important;
        font-weight: 700;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    /* ドロップダウン（採用情報の子メニュー） */
    .sub-menu {
        display: block !important;
        position: static !important;
        box-shadow: none !important;
        background-color: #f9f9f9 !important;
        padding-left: 20px !important;
    }
    
    .sub-menu li {
        border-bottom: 1px solid #ddd !important;
    }

    /* 応募ボタン（スマホ） */
    .p-global-nav > li.nav-item-cta {
        border-bottom: none !important;
        padding: 30px 20px !important;
        text-align: center;
    }

    a.nav-btn-entry {
        display: block !important;
        background-color: #0044CC !important;
        color: #fff !important;
        padding: 15px !important;
        border-radius: 50px;
        text-align: center !important;
        width: 100%;
    }

    /* 閉じるボタン */
    .l-header__nav-close {
        display: block !important;
        position: absolute;
        top: 10px;
        right: 15px;
        width: 40px;
        height: 40px;
        background: #f0f0f0;
        border-radius: 4px;
        z-index: 10001;
    }
}
/* ==============================================
   ヘッダー「応募はこちら」ボタン（強制適用版）
   ============================================== */

/* 親要素を含めて指定し、優先度を高める */
li.nav-item-cta a.nav-btn-entry,
li.nav-item-cta a.nav-btn-entry span {
    background-color: #0044CC !important;    /* 背景：青 */
    color: #ffffff !important;               /* 文字：白 (強制) */
    border: 2px solid #0044CC !important;    /* 枠線：青 */
    opacity: 1 !important;                   /* 透明度リセット */
    text-decoration: none !important;        /* 下線なし */
}

/* ホバー時（マウスを乗せた時）：白背景・青文字 */
li.nav-item-cta a.nav-btn-entry:hover,
li.nav-item-cta a.nav-btn-entry:hover span {
    background-color: #ffffff !important;    /* 背景：白 */
    color: #0044CC !important;               /* 文字：青 (強制) */
}

/* --- カード全体のレイアウト調整 --- */
.welfare-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    border-bottom: 4px solid transparent;
    height: 100%; /* グリッド内で高さを最大にする */
}

/* アイコンエリア（高さ固定） */
.welfare-icon-circle {
    width: 90px;
    height: 90px;
    background-color: #f9f9f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0; /* 縮小させない */
}

/* 情報エリアラッパー（残りの高さを埋める） */
.welfare-info-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* カード下部まで伸ばす */
    width: 100%;
}

/* タイトルエリア（高さの最小値を確保して揃える） */
.welfare-title-box {
    min-height: 3em; /* 2行分程度の高さを確保 */
    display: flex;
    align-items: flex-start; /* 上揃え */
    justify-content: center;
    margin-bottom: 10px;
}

.welfare_txt {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    margin: 0;
}

/* 説明文エリア */
.welfare-text-box {
    flex-grow: 1; /* 残りのスペースを埋める */
}

.welfare_sbtxt {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}
/* ==============================================
   福利厚生ページ：スマホ表示のレイアウト変更 (横長2カラム)
   ============================================== */

@media screen and (max-width: 767px) {

    /* --- グリッドを1列に変更 --- */
    .welfare-grid-list {
        display: grid;
        grid-template-columns: 1fr; /* 1列表示 */
        gap: 15px; /* カード間の隙間 */
    }

    /* --- カードを横並びレイアウトに変更 --- */
    .welfare-card {
        display: flex;
        flex-direction: row; /* 子要素を横並びに */
        align-items: center; /* 垂直方向中央揃え */
        justify-content: flex-start; /* 左寄せ */
        padding: 10px 5px; /* 余白調整 */
        text-align: left; /* テキスト左揃え */
        min-height: auto; /* 高さ制限解除 */
    }

    /* --- アイコンエリアの調整 (左側) --- */
    .welfare-icon-circle {
        width: 60px; /* アイコンサイズ少し縮小 */
        height: 60px;
        margin-bottom: 0; /* 下の余白削除 */
        margin-right: 20px; /* 右に余白追加 */
        flex-shrink: 0; /* アイコンが潰れないように */
    }
    
    .welfare_img {
        max-width: 60%;
        max-height: 60%;
    }

    /* --- テキストエリアのラッパー調整 (右側) --- */
    /* もしHTML構造にラッパーがない場合は、以下の .welfare-content を使用 */
    .welfare-content {
        flex-grow: 1; /* 残りの幅を埋める */
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: auto; /* 幅制限解除 */
    }

    /* --- タイトル調整 --- */
    .welfare_txt {
        font-size: 12px;
        font-weight: 700;
        margin: 0 0 5px 0; /* 下に少し余白 */
        text-align: left;
        line-height: 1.4;
    }

    /* --- 説明文調整 --- */
    .welfare_sbtxt {
        font-size: 10px;
        line-height: 1.5;
        text-align: left;
        margin: 0;
        color: #666;
    }
}

/* ==============================================
   スマホ表示：福利厚生カードの横並び化
   ============================================== */
@media screen and (max-width: 767px) {

    /* --- カード全体を横並び設定に --- */
    .welfare-card {
        display: flex !important;           /* Flexboxを有効化 */
        flex-direction: row !important;     /* 横並びにする */
        align-items: center !important;     /* 垂直方向の中央揃え */
        justify-content: flex-start !important; /* 左寄せ */
        padding: 10px 5px !important;      /* 余白の調整 */
        text-align: left !important;        /* テキストを左揃えに */
        min-height: auto !important;        /*高さ制限を解除 */
    }

    /* --- アイコン（左側）の調整 --- */
    .welfare-icon-circle {
        margin-bottom: 0 !important;        /* 下の余白を削除 */
        margin-right: 20px !important;      /* 右側に余白を追加 */
        flex-shrink: 0 !important;          /* アイコンが潰れないように固定 */
        
        /* アイコンサイズ（必要に応じて調整してください） */
        width: 60px !important;
        height: 60px !important;
    }
    
    /* アイコン画像自体のサイズ調整 */
    .welfare_img {
        max-width: 60% !important;
        height: auto !important;
    }

    /* --- テキストエリア（右側）の調整 --- */
    .welfare-info-wrapper {
        flex-grow: 1 !important;            /* 残りのスペースを埋める */
        display: flex !important;
        flex-direction: column !important;  /* タイトルと本文は縦並び */
        justify-content: center !important;
        text-align: left !important;
    }

    /* タイトルの調整 */
    .welfare_txt {
        margin: 0 0 5px 0 !important;       /* 下に少し隙間 */
        text-align: left !important;
        font-size: 12px !important;         /* 読みやすいサイズに */
		padding:5px 0px;
    }

    /* 説明文の調整 */
    .welfare_sbtxt {
        margin: 0 !important;
        text-align: left !important;
        font-size: 11px !important;
    }
	
	.welfare-title-box {
    justify-content:left;
    margin-bottom: 0px;
   min-height: 1.5em; /* 2行分程度の高さを確保 */
	}
	
	.welfarep_desc {
    font-size: 12px;
}

}