@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/************************************
** Shukatsu UI (single source of truth)
************************************/

/* Design Tokens */
:root{
  --sk-bg:#f6f7fb;
  --sk-card:#ffffff;
  --sk-text:#0f172a;
  --sk-sub:rgba(15,23,42,.65);
  --sk-line:rgba(15,23,42,.10);
  --sk-shadow:0 18px 40px rgba(15,23,42,.08);
  --sk-radius:18px;

  --sk-ask:#334155;      /* 質問する */
  --sk-answer:#0f766e;   /* 回答する */
  --sk-accent:#2563eb;   /* UIアクセント（検索など） */
}

/* Base */
body{ background:var(--sk-bg); color:var(--sk-text); }

/* グローバルメニュー非表示（必要なら） */
#navi,
.navi,
nav#navi,
.header-menu,
.menu-header-container,
#global-navi,
.global-navi{
  display:none !important;
}
#header-container,
#header,
.header-container,
.header-in{
  padding-top:6px !important;
  padding-bottom:6px !important;
}

/* -------------------------
   Hero（検索ブロック）
   ------------------------- */
.sk-hero{
  max-width:980px;
  margin:18px auto 0;
  padding:26px 18px;
  border-radius:22px;
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(900px 380px at 90% 20%, rgba(15,118,110,.10), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #fbfcff 100%);
  border:1px solid var(--sk-line);
  box-shadow:var(--sk-shadow);
}
.sk-hero__title{
  font-size:28px;
  line-height:1.2;
  margin:0 0 10px;
  letter-spacing:-0.02em;
}
.sk-hero__sub{
  font-size:14px;
  color:var(--sk-sub);
  margin:0 0 14px;
  line-height:1.7;
}

.sk-search{
  display:flex;
  gap:10px;
  align-items:center;
}
.sk-search__input{
  flex:1;
  height:44px;
  padding:0 14px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  background:#fff;
}
.sk-search__btn{
  height:44px;
  padding:0 16px;
  border:0;
  border-radius:14px;
  background:var(--sk-accent);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

/* -------------------------
   CTA（質問する / 回答する）
   ------------------------- */
.sk-cta.sk-cta--pair{
  max-width:980px;
  margin:14px auto 0;
  padding:0 16px;
  display:flex;
  gap:12px;
}
.sk-cta.sk-cta--pair a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  height:64px;
  border-radius:16px;
  font-weight:900;
  text-decoration:none !important;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  color:#fff !important;
}
.sk-cta__ask{ background:var(--sk-ask); }
.sk-cta__answer{ background:var(--sk-answer); }
.sk-cta.sk-cta--pair a:hover{ filter:brightness(1.05); }

/* -------------------------
   Section title
   ------------------------- */
.sk-section__title{
  max-width:980px;
  margin:28px auto 12px;
  padding:0 16px;
  font-size:20px;
  font-weight:900;
  letter-spacing:-0.01em;
}

/* -------------------------
   Category cards（カテゴリ改訂版）
   例：ES / 面接 / OB訪問 / GD / WEBテスト / 商社 / デベ ... / その他
   ------------------------- */
.sk-cats{
  max-width:980px;
  margin:0 auto;
  padding:0 16px 24px;
}
.sk-cats__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (min-width: 900px){
  .sk-cats__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

.sk-card{
  display:block;
  padding:14px;
  border-radius:var(--sk-radius);
  border:1px solid var(--sk-line);
  background:var(--sk-card);
  text-decoration:none !important;
  transition:transform .15s ease, box-shadow .15s ease;
  min-height:92px;
}
.sk-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(15,23,42,.10);
}
.sk-card__top{
  display:flex;
  align-items:center;
  gap:10px;
}
.sk-card__icon{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(37,99,235,.10);
  font-size:18px;
}
.sk-card__label{
  font-size:16px;
  font-weight:900;
  color:var(--sk-text);
}
.sk-card__hint{
  margin-top:8px;
  font-size:12px;
  color:rgba(15,23,42,.60);
}

/* -------------------------
   Actions（詰まったら…）
   ------------------------- */
.sk-actions{
  max-width:980px;
  margin:14px auto 0;
  padding:0 16px 24px;
}
.sk-actions__box{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  padding:14px;
  border-radius:var(--sk-radius);
  border:1px solid var(--sk-line);
  background:#fff;
}
.sk-actions__text{ min-width:0; }
.sk-actions__title{
  font-weight:900;
  font-size:14px;
  line-height:1.25;
  margin:0 0 6px;
}
.sk-actions__sub{
  margin:0;
  color:rgba(15,23,42,.65);
  font-size:12px;
  line-height:1.55;
}

.sk-actions__btns{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}
.sk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:14px;
  font-weight:800;
  font-size:13px;
  text-decoration:none !important;
}
.sk-btn--primary{ background:var(--sk-ask); color:#fff !important; border:0; }
.sk-btn--ghost{ background:#fff; color:var(--sk-text) !important; border:1px solid rgba(15,23,42,.14); }

/* -------------------------
   Mobile
   ------------------------- */
@media (max-width: 834px){
  .sk-hero{ padding:18px 14px; border-radius:16px; }
  .sk-hero__title{ font-size:22px; }
  .sk-hero__sub{ font-size:13px; margin-bottom:12px; }

  .sk-search{ flex-direction:column; align-items:stretch; }
  .sk-search__input,
  .sk-search__btn{ width:100%; height:44px; }

  .sk-cta.sk-cta--pair{ flex-direction:column; }
  .sk-cta.sk-cta--pair a{ height:56px; font-size:16px; border-radius:14px; }

  .sk-actions__box{ flex-direction:column; align-items:stretch; }
  .sk-actions__btns{ width:100%; flex-direction:column; }
  .sk-btn{ width:100%; height:44px; font-size:14px; }
}