@charset "utf-8";

/* ==========================================================================
   サクシード全社共通 カスタムユーティリティCSS
   （採用サイト・社内イントラ・50周年記念サイト 共通アセット）
   ========================================================================== */

/* ==========================================================================
   ① 汎用パーツ：PC・スマホの表示出し分けルール
   ========================================================================== */
/* --- 1. 最初は「PCサイズ」としての基本設定 --- */
/* 「スマホ専用」のものは、PCの画面ではあらかじめ消しておく */
.sp-only {
    display: none !important;
}

/* --- 2. 「スマホサイズ（767px以下）」になった時の切り替え設定 --- */
@media (max-width: 767px) {
    /* 「PC専用」のものを、スマホ画面で完全に消し去る */
    .pc-only {
        display: none !important;
    }
    /* 消しておいた「スマホ専用」のものを、スマホ画面で復活させる */
    .sp-only {
        display: block !important; 
    }
    /* 横並び（Flex）のパーツをスマホ用に出し分けたい時用 */
    .sp-only-flex {
        display: flex !important;
    }
    /* スマホの時の改行 */
    br.sp-only {
        display: inline !important;
    }
}

/* ==========================================================================
   ② 汎用パーツ：文字数自由自在！パタパタ空白システム
   ========================================================================== */
/* 1. PCの時だけ出現する透明な箱（スマホでは完全に消える） */
.pc-inline-space {
    display: inline-block !important;
}

/* 2. スマホの時だけ出現する透明な箱（PCではあらかじめ消しておく） */
.sp-inline-space {
    display: none !important;
}

/* 3. スマホ画面（767px以下）になった時のパタパタ切り替え */
@media (max-width: 767px) {
    .pc-inline-space {
        display: none !important;
    }
    .sp-inline-space {
        display: inline-block !important;
    }
}

/* ==========================================================================
   ③ アニメーション（回転・点滅・矢印の流れ）
   ========================================================================== */
/* --- 🔄 レシピ1：ずーっと滑らかに「回転」し続ける動き --- */
@keyframes mi-spinning {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.mi-spin {
    animation: mi-spinning 2s linear infinite !important;
}

/* --- 💡 レシピ2：じわ〜っと「点滅（ホタル）」し続ける動き --- */
@keyframes mi-pulsing {
    0%   { opacity: 1; }
    50%  { opacity: 0.2; }
    100% { opacity: 1; }
}
.mi-pulse {
    animation: mi-pulsing 1.5s ease-in-out infinite !important;
}

/* --- ➡️ レシピ3：左から右へ「トントン」と流れる動き（右矢印用） --- */
@keyframes mi-flowing-right {
    0%   { transform: translateX(0); opacity: 0.8; }
    50%  { transform: translateX(6px); opacity: 1; }
    100% { transform: translateX(0); opacity: 0.8; }
}
.mi-flow-right {
    animation: mi-flowing-right 1.2s ease-in-out infinite !important;
}

/* --- ⬇️ レシピ4：上から下へ「すーっ」と流れる動き（下矢印・スクロール用） --- */
@keyframes mi-flowing-down {
    0%   { transform: translateY(0); opacity: 0.6; }
    50%  { transform: translateY(8px); opacity: 1; }
    100% { transform: translateY(0); opacity: 0.6; }
}
.mi-flow-down {
    animation: mi-flowing-down 1.5s ease-in-out infinite !important;
}

/* ==========================================================================
   ④ マテリアルアイコンの縦位置補正
   ========================================================================== */
.material-icons,
.material-symbols-outlined {
    vertical-align: -0.25em;
}

/* ==========================================================================
   ⑤ 汎用パーツ：aタグの後ろに自動でリンクマーク（f08e）を出現させるシステム
   ========================================================================== */
.ext-link::after {
    content: "\f08e" !important; 
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important; 
    display: inline-block !important;
    margin-left: 6px !important;      
    font-size: 0.85em !important;     
}

/* ==========================================================================
   ⑥ 汎用パーツ：写真の中にタイトルを重ねる（元サイズ・余白100%維持版）
   ========================================================================== */
/* 1. 写真と文字を包む箱 */
.img-box {
    position: relative !important;
    display: inline-block !important; 
    max-width: 100% !important;       
}

/* 箱の中の画像 */
.img-box img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* 2. 写真の下側に重なる文字のベース */
.img-title {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 30px 15px 12px 15px !important; 
    font-size: 0.95rem !important;
    font-weight: bold !important;
    letter-spacing: 0.05em !important;
}

/* 🖤 黒っぽく締める（下からじわ〜っと黒い影＋白い文字） */
.img-title.dark-fade {
    color: #ffffff !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* 🤍 白っぽくボカす（下からじわ〜っと白い霧＋濃いグレーの文字） */
.img-title.light-fade {
    color: #333333 !important;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

/* ==========================================================================
   ⑦ 汎用パーツ：写真の下にタイトルを並べる（王道：前にマークがつく版）
   ========================================================================== */
.img-bottom-box {
    display: block !important;
    margin: 0 auto 2.5em auto !important;
    text-align: center !important;
    max-width: 100% !important;
}
.img-bottom-box img {
    display: inline-block !important; 
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 10px auto !important;
}

/* 👑 タイトルのデザイン（文字は通常フォント、少し小さくしてグレーにするのが他サイトの定番！） */
.img-bottom-title {
    display: inline-block !important; /* 中央揃えのマークを綺麗に出すお守り */
    /*font-size: 0.85rem !important;    /* 本文（1rem）より少しだけ小さくするのがコツ！ */
    font-weight: bold !important;
    color: #555555 !important;         /* 真っ黒ではなく、少しだけ薄いグレーにして差別化 */
    letter-spacing: 0.05em !important;
}

/* 🪄 【魔法の仕掛け】文字の前に、自動でサクシードカラーの「■」を表示させます */
.img-bottom-title::before {
    content: "▲" !important;          /* 💡 ここを "▲" や "※" や "図：" に変えることも可能です！ */
    color: #555555 !important; /* サクシード様のメインカラーが自動で塗られます */
    margin-right: 0.2em !important;    /* マークと文字の間の隙間 */
    /*font-size: 0.85em !important;*/
    vertical-align: 1% !important;
}
/* ==========================================================================
   汎用パーツ：万能フレックスボックス・システム
   ========================================================================== */
/* --- 1. ベースとなるコンテナ --- */
.f-container {
    display: flex !important;
    flex-wrap: wrap !important; /* スマホや要素が増えた時に自動で折り返す安全設定 */
    box-sizing: border-box !important;
}

/* --- 2. 水平方向の位置（Justify Content） --- */
.f-jc-start   { justify-content: flex-start !important; } /* 左寄せ（標準） */
.f-jc-center  { justify-content: center !important; }     /* 中央寄せ */
.f-jc-end     { justify-content: flex-end !important; }   /* 右寄せ */
.f-jc-between { justify-content: space-between !important; } /* 両端揃え（均等配置） */
.f-jc-around  { justify-content: space-around !important; }  /* 程よくスペース空け */

/* --- 3. 垂直方向の位置（Align Items） --- */
.f-ai-start   { align-items: flex-start !important; } /* 上揃え */
.f-ai-center  { align-items: center !important; }     /* 上下中央揃え */
.f-ai-end     { align-items: flex-end !important; }   /* 下揃え */
.f-ai-stretch { align-items: stretch !important; }    /* 高さを揃えて引き伸ばす（標準） */

/* --- 要素同士の「隙間」もその場で操れるクラス --- */
.f-gap-10 { gap: 10px !important; }
.f-gap-20 { gap: 20px !important; }
.f-gap-30 { gap: 30px !important; }

/* --- 幅指定 --- */
.sp-w100 { width: 100% !important; } /* 基本は100%にしておきます */

@media (max-width: 767px) {
  .sp-w100 {
        width: 100% !important;
        max-width: 100% !important; 
    }
  /* --- スマホの時にアイテムをセンター寄せする ---*/
  .sp-center {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        margin-top: 15px !important; /* スマホの時だけ、上の文字リストとの間に少し綺麗な隙間をあける優しさ */
    }
}