@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
*/

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

/***********************************
**カテゴリーウジェットのカスタマイズ
***********************************/
/*-親カテゴリのカスタマイズ-*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
  line-height: 1.2;
  font-size:16px;
}
.widget_categories ul li a::before{
  font-family: FontAwesome;
  content: "\f07b"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px;
}
.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}
/*- 子カテゴリのカスタマイズ -*/
.widget_categories ul li ul li a::before{
  font-family: FontAwesome;
  content: "\f114"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px;
}

/***********************************
** Headerの画像の縦横比の歪を直す
***********************************/
div.header-container-in.hlt-top-menu .logo-header img {
height: auto;
max-height: none;
width: 400px;
}

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

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

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

/************************************
** 固定タブの設定
************************************/
/* 外枠：画面いっぱいに広がる背景帯 */
.top-tabs-nav {
  width: 100%;
  background-color: #0f172a; /* 帯の背景色 */
  border-bottom: 1px solid #1e293b;
  position: sticky; /* スクロール追従させる場合は指定 */
  top: 0;
  z-index: 2;
}

/* 内枠：1152px以上広がらないコンテナ */
.custom-top-tabs {
  max-width: 1152px; /* サンプルと同じ幅制限 */
  margin: 0 auto;    /* 左右中央寄せ */
  padding: 0 16px;   /* スマホ時の左右余白 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* タブアイテムの設定 */
.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.tab-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.tab-item.active {
  color: #f59e0b;
  border-bottom: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  font-weight: 700;
}

/* --- スマホ表示時の設定（画面幅 782px 以下） --- */

.custom-top-tabs .sp-text {
  display: none; /* スマホ用テキストを隠す */
}
.custom-top-tabs .pc-text {
  display: inline; /* PC用テキストを表示 */
}

@media screen and (max-width: 782px) {
  .custom-top-tabs .tab-item {
    font-size: 11px;   /* 文字サイズを小さく指定 */
    padding: 10px 2px;  /* 左右の余白を縮小 */
  }

  /* ★ スマホ表示時だけアイコン（iタグ）を隠す */
  .custom-top-tabs .tab-item i {
    display: none;
  }

  /* テキストの切り替え（スマホ用テキスト表示） */
  .custom-top-tabs .pc-text {
    display: none;
  }
  .custom-top-tabs .sp-text {
    display: inline;
  }
}