@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
*/
/* サイト全体の固定背景 */
body{
  background-image: url("https://oshigoto-zukan.jp/wp-content/uploads/2026/01/bg-img.png"); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
　backdrop-filter: blur(2px);
}
body::before{
  content:"";
  position: fixed;
  inset: -20%;
  background: rgba(255,255,255,.7); /* 白ベール */
  pointer-events: none;
  z-index: -1;
 /* 薄い雲っぽいレイヤー*/
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55) 0 30%, transparent 60%),
    radial-gradient(circle at 70% 40%, rgba(255,255,255,.35) 0 28%, transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.25) 0 25%, transparent 60%);
  filter: blur(12px);
  opacity: .8;

  animation: floatBg 18s ease-in-out infinite alternate;
}
@keyframes floatBg{
  from{ transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to  { transform: translate3d( 2%,  1%, 0) scale(1.05); }
}

/* 動きが苦手な人・省電力配慮 */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}

@media (max-width: 768px){
  body{
    background-attachment: scroll;
  }
}


.c-gnav>.menu-item {
width: 140px;   /*ナビ同士の間隔*/
letter-spacing: .1rem;   /*文字の間隔*/
}
.c-taxList__link {
    background: #e5e5e5;
    color: #333;
    border-radius: 99px;
    padding: 6px 10px;
}
/*---フォント
body{
  font-family:
    "Kosugi Maru", 
	  "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
}---*/


/* ===== kiratto：キラッ + タップ沈み ===== */
.wp-block-button.kiratto .wp-block-button__link{
  position: relative;
  overflow: hidden;
  display: inline-block;
  top: 0;
  box-shadow: var(--swl-btn_shadow);
  transition: top .12s ease, filter .12s ease;
}

/* PC：ホバーしただけで押し込み（1px沈む） */
@media (hover: hover) {
  .wp-block-button.kiratto .wp-block-button__link:hover{
    top: 2px;
    filter: brightness(.95);
  }
}

/* スマホ：タップ中に沈む（お好みで残す） */
@media (hover: none) {
  .wp-block-button.kiratto .wp-block-button__link:active{
    top: 1px;
    filter: brightness(.9);
  }
}

/* 光 */
.wp-block-button.kiratto .wp-block-button__link::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.7),
    transparent
  );
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}

/* キラッ（PCホバー / スマホタップ） */
.wp-block-button.kiratto .wp-block-button__link:hover::after,
.wp-block-button.kiratto .wp-block-button__link:active::after{
  animation: kiratto .6s ease;
}

@keyframes kiratto{
  0%{ left:-60%; opacity:0; }
  20%{ opacity:1; }
  100%{ left:120%; opacity:0; }
}

@media (hover: hover) {
  .wp-block-button.kiratto .wp-block-button__link:hover{
    top: 1px;
    filter: brightness(.95);
    box-shadow: 0 2px 0 rgba(0,0,0,.25) inset, var(--swl-btn_shadow);
  }
}

/* ===== kiratto：キラッ + タップ沈みここまで ===== */

/**---footer img pc調整---*/
.footer-pcimg {
left: calc(50% - 49vw + var(--swl-scrollbar_width, 0px) / 2);
}
/* =================================================================
   【決定版】リンク先URL判定で、一覧も詳細も一括で色を変えるCSS
   ================================================================= */

/* --- 共通設定 --- */
.c-postThumb__cat,
.c-categoryList__link {
    border-radius: 99px; /* 丸み */
}

/* --- 1. インタビュー記事 (URLに /interview/ が含まれるもの) --- */
/* 一覧ページのバッジ（親リンクを判定） */
a[href*="/interview/"] .c-postThumb__cat,
/* 詳細ページのボタン */
a[href*="/interview/"].c-categoryList__link {
    background-color: #27ae60 !important; /* 緑 */
    color: #fff !important;
}

/* --- 2. 職業ページ (URLに /jobs/ が含まれるもの) --- */
a[href*="/jobs/"] .c-postThumb__cat,
a[href*="/jobs/"].c-categoryList__link {
    background-color: #3498db !important; /* 青 */
    color: #fff !important;
}

/* --- 3. 記事 (URLに /article/ が含まれるもの) --- */
a[href*="/article/"] .c-postThumb__cat,
a[href*="/article/"].c-categoryList__link {
    background-color: #e67e22 !important; /* オレンジ */
    color: #fff !important;
}

/* --- 4. イベント (URLに /event/ が含まれるもの) --- */
a[href*="/event/"] .c-postThumb__cat,
a[href*="/event/"].c-categoryList__link {
    background-color: #9b59b6 !important; /* 紫 */
    color: #fff !important;
}

/* --- 5. インフォメーション (URLに /news/ が含まれるもの) --- */
a[href*="/news/"] .c-postThumb__cat,
a[href*="/news/"].c-categoryList__link {
    background-color: #f1c40f !important; /* 黄色 */
    color: #fff !important;
}

/* --- 6. ランキング (URLに /ranking/ が含まれるもの) --- */
a[href*="/ranking/"] .c-postThumb__cat,
a[href*="/ranking/"].c-categoryList__link {
    background-color: #e74c3c !important; /* 赤 */
    color: #fff !important;
}

/* ---// カスタム投稿 新着カードスライダー--- */
.js-custom-post-slider{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.js-custom-post-slider .p-postList__item{
  flex:0 0 280px;
  scroll-snap-align:start;
}
.left-cut {
left: -100px;
}
@media not all and (min-width: 960px) {
.left-cut {
left: 0;
}
}
.c-postThumb {
    margin-bottom: 10px;
}

    .stl-latestSlider{ width:100%; }
    .stl-latestTrack{
      display:flex;
      gap:20px;
      overflow: auto;
      padding:10px 2px;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
    }
    .stl-card{
      flex:0 0 320px;
      scroll-snap-align:start;
      border-radius:18px;
      overflow:hidden;
      background:#fff;
      box-shadow: 0 6px 18px rgba(0,0,0,.06);
    }
    .stl-cardLink{ display:block; color:inherit; text-decoration:none; }

/* latest_slider のカード画像（背景でcover表示） */
.stl-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;     /* ←ここで高さ決める 4/3 や 1/1 でもOK */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  background-color: #e9eef5;
}

    .stl-body{ padding:12px 14px 14px; }

    /* バッジ */
    .stl-meta{ margin-bottom:8px; }
    .stl-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      line-height:1;
      color:#fff;
      text-decoration:none;
      white-space:nowrap;
    }

    /* postのカテゴリ用（基本色） */
    .stl-badge--cat{ background: var(--color_main, #27ae60); }

    /* 投稿タイプ別の色（必要なら増やす） */
    .stl-pt-interview{ background:#27ae60; } /* インタビュー：グリーン */
    .stl-pt-jobs{ background:#3498db; }      /* 職業ページ：ブルー */
    .stl-pt-article{ background:#e67e22; }   /* 記事：オレンジ */
    .stl-pt-news{ background:#e74c3c; }      /* ニュース：レッド */

    h3.stl-title{
      font-size:16px;
      line-height:1.35;
      margin:0;
      display:-webkit-box;
      -webkit-line-clamp:4; /*新着カードのタイトルの行数*/
      -webkit-box-orient:vertical;
      overflow:hidden;
		padding:10px;
    }

     /* 波線版（こっちが良ければ上の.stl-dividerを消してこれを使う）*/
    .stl-divider{
      margin-top:10px;
      height:6px;
      background:
        radial-gradient(circle at 3px 3px, rgba(0,0,0,.18) 2px, transparent 2.2px) 0 0/12px 6px repeat-x;
      opacity:.8;
    }

    /* スマホで少し小さく */
    @media (max-width: 600px){
      .stl-card{ flex-basis: 260px; }
    }
.sidebar-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:12px;
  padding-left:8px;
  border-left:4px solid var(--color_main);
}

.stl-widget{ margin: 0 0 24px; }
.stl-widget__title{
  font-weight:700;
  margin-bottom:10px;
}
.stl-widget__list{ list-style:none; padding:0; margin:0; }
.stl-widget__item + .stl-widget__item{ margin-top:8px; }

.stl-widget__link{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  background:#f3f5f7;
  text-decoration:none;
}
.stl-widget__link:hover{ opacity:.85; }

/* 投稿タイプ別の色（調整OK） */
.stl-pt-interview .stl-widget__link{ background:#27ae60; color:#fff; }
.stl-pt-jobs .stl-widget__link{ background:#3498db; color:#fff; }
.stl-pt-article .stl-widget__link{ background:#e67e22; color:#fff; }

@media (max-width: 768px){
.-sidebar-on #sidebar {
    margin: 0 auto;
}
}
/*--サイドバナー用--*/
.stl-recent-mixed{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.stl-recent-item a{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none;
}

.stl-recent-media{
  width:64px;
  flex-shrink:0;
}

.stl-recent-thumb{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:8px;
  background:#eee;
}

.stl-recent-thumb.no-thumb{
  aspect-ratio:1/1;
  background:#ddd;
  border-radius:8px;
}

.stl-recent-text{
  flex:1;
}

.stl-recent-type{
  display:block;
  font-size:11px;
  margin-bottom:4px;
  opacity:.7;
}

.stl-recent-title{
  display:-webkit-box;
  -webkit-line-clamp:3;   /* ← 3行まで見せる */
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13px;
  line-height:1.4;
}

/* 投稿タイプ別の色 */
.stl-pt-interview .stl-recent-type{ color:#27ae60; }
.stl-pt-article   .stl-recent-type{ color:#e67e22; }
.stl-pt-jobs      .stl-recent-type{ color:#3498db; }

.l-content {
    margin-bottom: 0;
}

.more-link-arrow {
    font-size: 0.8rem !important;
}
.more-link-arrow .icon-arrow {
    width: 30px !important;
    height: 30px !important;
}

/* ===== CF7: お仕事図鑑コンタクト（簡易） ===== */
.cf7-oshigoto{
  max-width: 760px;
	margin: 0 auto;
}

.cf7-oshigoto .cf7-section{
  padding: 18px 16px;
  margin: 0 0 16px;
  /*border: 1px solid rgba(0,0,0,.08);*/
  border-radius: 12px;
  background: #fff;
}

.cf7-oshigoto .cf7-title{
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.4;
}

.cf7-oshigoto .cf7-row{
  margin: 0 0 14px;
}

.cf7-oshigoto label{
  display: block;
  margin: 0 0 6px;
  font-weight: 600;
}

.cf7-oshigoto .cf7-guide{
  margin: 0 0 8px;
  font-size: 13px;
  opacity: .8;
}

.cf7-oshigoto input[type="text"],
.cf7-oshigoto input[type="email"],
.cf7-oshigoto input[type="tel"],
.cf7-oshigoto textarea,
.cf7-oshigoto select{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
}

.cf7-oshigoto textarea{
  min-height: 140px;
}

.cf7-oshigoto .req{
  font-size: 12px;
  color: #c62828;
  margin-left: 6px;
}

.cf7-oshigoto .opt{
  font-size: 12px;
  opacity: .75;
  margin-left: 6px;
}

.cf7-oshigoto .wpcf7-list-item{
  display: inline-block;
  margin: 0 14px 6px 0;
}

.cf7-oshigoto .cf7-submit{
  margin-top: 10px;
}

.cf7-oshigoto input[type="submit"]{
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

.cf7-oshigoto .cf7-conditional{ display:none; }
.cf7-oshigoto .cf7-conditional.is-open{ display:block; }
/*mainVisual軽くする*/
@media (max-width: 768px){
.p-mainVisual .c-filterLayer::before {
display:none !important;
content:none !important;
  }
}