/* 全デバイスの背景を白に統一 */
body, html {
    background: #ffffff !important;
}

/* Elementor のセクション背景も強制白 */
.elementor-section {
    background: #ffffff !important;
}

.directorist-login-form .directorist-alert-danger {
    display: none !important;
}

/* ===== 検索フォーム全体 ===== */
.koko-search-wrapper {
  margin: 0 auto 90px;
  padding: 0 20px;
  perspective: 1200px;
}

.koko-search-inner {
  max-width: 900px;
  margin: 0 auto;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  will-change: transform;
}

/* 初期状態 */
.koko-search-form {
  background: #fff;
  border-radius: 18px;
  padding: 35px 30px;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.06);
  transition:
    transform 0.6s ease,
    box-shadow 0.6s ease;
}

/* ===== マウス hover 時 ===== */
.koko-search-wrapper:hover .koko-search-inner {
  transform: translateY(-8px) scale(1.01);
}

.koko-search-wrapper:hover .koko-search-form {
  box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

/* ===== フォーム内部 hover ===== */
.koko-search-form:hover {
  transform: translateY(-4px);
}

/* ===== 入力欄フォーカス ===== */
.koko-search-form input:focus,
.koko-search-form select:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}

/* ===== モバイルでは hover 無効 ===== */
@media (hover: none) {
  .koko-search-wrapper:hover .koko-search-inner,
  .koko-search-form:hover {
    transform: none;
  }
}
/* ▼ 全体の余白と配置（高級ブランド風のゆったり余白） */
.koko-forum-section {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 00px;
    font-family: "Noto Serif JP", serif;
    color: #222;
}

/* ▼ タイトル */
.kf-header h2 {
    font-size: 38px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    color: #111;
    margin-bottom: 8px;
}

/* ▼ サブタイトル */
.kf-sub {
    text-align: center;
    font-size: 15px;
    color: #666;
    letter-spacing: 0.4px;
    margin-bottom: 18px;
}

/* ▼ 極細ライン（KOKO JOBS の世界観に合わせたミニマルライン） */
.kf-divider {
    width: 70px;
    height: 1px;
    background: #ccc;
    margin: 0 auto 25px;
}

/* ▼ 説明文章（上品なトーン） */
.kf-text {
    text-align: center;
    font-size: 15px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 40px;
}

/* ▼ 最近の投稿タイトル */
.kf-latest-title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-align: left;
    margin-bottom: 10px;
    color: #222;
}

/* ▼ 最近の投稿枠（高級ブランドのような極細ボーダー） */
.kf-latest-box {
    border: 1px solid #e5e5e5;
    padding: 20px 18px;
    border-radius: 8px;
    background: #fafafa;
}

/* ▼ ボタン（CHANEL風のミニマル × 黒 × 丸角） */
.kf-button-area {
    text-align: center;
    margin-top: 35px;
}

.kf-button {
    display: inline-block;
    padding: 12px 36px;
    background: #000;
    color: #fff !important;
    border-radius: 50px;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: 0.8px;
    transition: 0.25s ease;
    font-family: "Noto Sans JP", sans-serif;
}

.kf-button:hover {
    opacity: 0.75;
}

/* ▼ レスポンシブ対応（スマホで完璧に美しく表示） */
@media (max-width: 780px) {
    .koko-forum-section {
        padding: 0 16px;
        margin: 50px auto;
    }
    .kf-header h2 {
        font-size: 30px;
    }
}
/* ----------------------------------
   COMMUNITY FORUM SECTION  (FULL WIDTH + CLEAN DESIGN)
-------------------------------------*/

.koko-forum-section {
       width: 110% !important;
    max-width: 100% !important; /* 1200px の制限を外す */
    margin: 0 !important;
    padding: 0px 0px;
}

/* 中央揃えの領域だけ微調整（可動域あり） */
.kf-header,
.kf-latest,
.kf-button-area {
    max-width: 900px;
    margin: 0 auto;
	

/* タイトルデザイン */
.kf-header h2 {
    font-size: 38px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 6px;
}

.kf-sub {
    text-align: center;
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.kf-text {
    text-align: center;
    line-height: 1.9;
    color: #555;
    max-width: 850px;
    margin: 0 auto 40px;
}

/* 最近の投稿タイトル */
.kf-latest-title {
    font-size: 20px;
    margin-bottom: 16px;
    color: #333;
}

/* 最近の投稿ボックス */
.kf-latest-box {
    padding: 18px;
    border-radius: 14px;
    background: #ffffffcc;
    border: 1px solid #e8e8e8;
    backdrop-filter: blur(6px);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* マウスで浮くアニメーション */
.kf-latest-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

/* 掲示板を見るボタン */
.kf-button-area {
    text-align: center;
    margin-top: 30px;
}

.kf-button {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 40px;
    background: #000;
    color: #fff;
    font-size: 15px;
    transition: 0.3s ease;
}

.kf-button:hover {
    opacity: 0.8;
    transform: translateY(-3px);
}

/* --- スマホ表示の全体余白を増やす（余裕のあるUI） --- */
@media (max-width: 800px) {
    body,
    .site,
    .elementor-section,
    .elementor-container,
    .elementor-widget-container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* テキストの行間を広めにしてゆとりを出す */
    body p,
    body span,
    .elementor-widget-text-editor {
        line-height: 1.9 !important;
    }

    /* 見出しにも余裕を追加 */
    h1, h2, h3, h4 {
        margin-top: 28px !important;
        margin-bottom: 20px !important;
        line-height: 1.35 !important;
    }

    /* セクションの上下余白を広げる */
    .elementor-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* ボックス類の角丸を統一して柔らかい印象に */
    .elementor-widget-container {
        border-radius: 14px !important;
    }
}
/* ===== Blog list with image ===== */

.kokojobs-blog-list-image {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.kokojobs-blog-item {
  display: flex;
  align-items: center;
  gap: 40px;
  text-decoration: none;
  color: #111;
}

/* Image */
.kokojobs-blog-item img {
  width: 260px;
  height: 170px;
  object-fit: cover;
  border-radius: 0;
}

/* Text */
.kokojobs-blog-item .blog-text {
  flex: 1;
}

.kokojobs-blog-item .blog-date {
  font-size: 11px;
  color: #8c8c8c;
  letter-spacing: 0.15em;
}

.kokojobs-blog-item .blog-title {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.7;
  margin-top: 10px;
}

/* Hover */
.kokojobs-blog-item:hover {
  opacity: 0.8;
}

/* Mobile */
@media (max-width: 768px) {
  .kokojobs-blog-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .kokojobs-blog-item img {
    width: 100%;
    height: 220px;
  }

  .kokojobs-blog-item .blog-title {
    font-size: 18px;
  }
}
	
	/* =============================
   Premium Motion System
============================= */

@keyframes fadeLift {
  0% {
    opacity: 0;
    transform: translateY(36px) scale(0.96);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes softFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.hero {
  text-align: center;
  padding: 90px 20px;
  font-family: 'Didot','Noto Serif JP',serif;
}

.hero .item {
  opacity: 0;
  animation: softReveal 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}

/* 時差は“気づかれない程度” */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
	
body {
  background: linear-gradient(
    180deg,
    #f8f7f5 0%,
    #ffffff 55%,
    #f6f7f8 100%
  );
}

.hero {
  background:
    radial-gradient(
      circle at top center,
      rgba(0,0,0,0.025),
      transparent 65%
    );
}

  border-radius: 12px !important;
	

/* =========================================================
   KOKO SHOP — WooCommerce CSS ONLY (Calm & Luxe / CELINE-ish)
   目的:
   - iPhoneの黄色いタップハイライトを消す
   - 画像は一切加工しない（黄色オーバーレイ/フィルタ等を無効化）
   - 商品カードは上品に“ふわっ”と浮く
   - タイトルは上品に強調（見やすく、疲れない）
   - 通知（カート追加など）も落ち着いて見やすく
   ========================================================= */

/* WooCommerceページだけに効かせる（安全） */
.woocommerce-page,
.woocommerce,
body.woocommerce,
body.woocommerce-page,
body.woocommerce-shop,
body.post-type-archive-product{

  --ink:#141414;
  --muted:rgba(20,20,20,.62);
  --line:rgba(20,20,20,.12);
  --line2:rgba(20,20,20,.18);
  --paper:rgba(255,255,255,.92);
  --bg1:#fbfbfb;
  --bg2:#f5f5f5;
  --shadow-soft:0 10px 28px rgba(0,0,0,.07);
  --shadow:0 18px 55px rgba(0,0,0,.10);
  --r:18px;
  --ri:14px;
}

/* 背景 */
body.woocommerce-shop,
body.post-type-archive-product,
body.woocommerce-page{
  background: linear-gradient(180deg,var(--bg1),var(--bg2)) !important;
}

/* iPhoneの黄色いタップ強調を消す（これが“黄色くなる”の正体） */
body.woocommerce-page a,
body.woocommerce-page button,
body.woocommerce-page .woocommerce a,
body.woocommerce-page .woocommerce button,
body.woocommerce-page .woocommerce *{
  -webkit-tap-highlight-color: transparent !important;
}

/* :active / :focus で背景色が付くのも防ぐ（テーマ対策） */
body.woocommerce-page a:active,
body.woocommerce-page a:focus,
body.woocommerce-page a:focus-visible{
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   SHOP見出し（SHOPタイトル周りを上品に）
   ========================================================= */
body.woocommerce-shop .entry-title,
body.post-type-archive-product .page-title,
body.woocommerce-shop h1,
body.post-type-archive-product h1{
  font-family: ui-serif, "Times New Roman", "Noto Serif JP", serif !important;
  color: var(--ink) !important;
  letter-spacing: .10em !important;
  font-weight: 600 !important;
}

/* パンくず等が重いなら軽く */
.woocommerce-breadcrumb{
  color: var(--muted) !important;
  letter-spacing: .06em;
}

/* =========================================================
   Woo通知（“カートに追加しました”みたいな帯）を落ち着かせる
   ========================================================= */
.woocommerce-notices-wrapper{
  margin: 18px 0 18px !important;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border: 1px solid var(--line2) !important;
  background: rgba(255,255,255,.85) !important;
  color: rgba(20,20,20,.78) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 14px 16px !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  opacity: .55 !important;
}

/* 通知内ボタン（“カートを見る”など） */
.woocommerce-message a.button,
.woocommerce-info a.button{
  background: transparent !important;
  border: 1px solid rgba(20,20,20,.25) !important;
  color: rgba(20,20,20,.82) !important;
  border-radius: 14px !important;
  letter-spacing: .10em !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
@media (hover:hover){
  .woocommerce-message a.button:hover,
  .woocommerce-info a.button:hover{
    transform: translateY(-2px) !important;
    border-color: rgba(20,20,20,.38) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.08) !important;
  }
}

/* =========================================================
   結果数/並び替え/フィルター周り（上品に）
   ========================================================= */
.woocommerce-result-count{
  color: rgba(20,20,20,.55) !important;
  letter-spacing: .06em;
}
.woocommerce-ordering select{
  border-radius: 14px !important;
  border: 1px solid var(--line2) !important;
  padding: 10px 12px !important;
  background: rgba(255,255,255,.9) !important;
}

/* =========================================================
   商品一覧（ショップ/カテゴリ）
   ========================================================= */
.woocommerce ul.products{
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
@media (max-width: 1024px){
  .woocommerce ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px){
  .woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
}

/* 商品カード */
.woocommerce ul.products li.product{
  list-style: none !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 14px 14px 16px !important;
  overflow: hidden !important;
  transform: translateY(0) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
  will-change: transform;
  animation: kokoCardIn .55s ease both;
}
@keyframes kokoCardIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (hover:hover){
  .woocommerce ul.products li.product:hover{
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow) !important;
    border-color: rgba(20,20,20,.18) !important;
  }
}

/* 画像：絶対に加工しない（これ重要） */
.woocommerce ul.products li.product a img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: var(--ri) !important;
  margin: 0 0 12px !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  mix-blend-mode: normal !important;
}

/* 画像やリンクに被せてくる“疑似要素オーバーレイ”を完全無効化（黄色原因） */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::before,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after,
.woocommerce ul.products li.product a::before,
.woocommerce ul.products li.product a::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

/* タイトル：上品に強調 + 下線 */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: ui-serif, "Times New Roman", "Noto Serif JP", serif !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: .10em !important;
  font-weight: 600 !important;
  margin: 10px 0 10px !important;
  padding-bottom: 10px !important;
  position: relative !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width: 52px !important;
  height: 1px !important;
  background: rgba(20,20,20,.20) !important;
}

/* 価格：静かに */
.woocommerce ul.products li.product .price{
  color: rgba(20,20,20,.70) !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  margin: 0 0 10px !important;
}

/* ボタン（カートに追加） */
.woocommerce ul.products li.product a.button{
  width: 100% !important;
  text-align: center !important;
  border-radius: 14px !important;
  background: transparent !important;
  border: 1px solid rgba(20,20,20,.22) !important;
  color: rgba(20,20,20,.80) !important;
  letter-spacing: .10em !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  transition: transform .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease !important;
}
@media (hover:hover){
  .woocommerce ul.products li.product a.button:hover{
    transform: translateY(-2px) !important;
    border-color: rgba(20,20,20,.35) !important;
    color: var(--ink) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.08) !important;
  }
}

/* =========================================================
   ページネーション（上品）
   ========================================================= */
.woocommerce nav.woocommerce-pagination ul{
  border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li{
  border: 0 !important;
  margin: 0 4px !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border-radius: 12px !important;
  border: 1px solid rgba(20,20,20,.14) !important;
  background: transparent !important;
  color: rgba(20,20,20,.75) !important;
  padding: 10px 12px !important;
  transition: transform .2s ease, border-color .2s ease !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  border-color: rgba(20,20,20,.28) !important;
  color: var(--ink) !important;
}
@media (hover:hover){
  .woocommerce nav.woocommerce-pagination ul li a:hover{
    transform: translateY(-2px) !important;
    border-color: rgba(20,20,20,.28) !important;
  }
}

/* =========================================================
   モバイル疲れ防止（余白と文字調整）
   ========================================================= */
@media (max-width: 767px){
  .woocommerce ul.products li.product{
    padding: 12px 12px 14px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 15px !important;
  }
}