/*

  Skin Name: グッドピラティス用スキン

  Description: グッドピラティス用にカスタマイズされたCocoonのスキンです。

  Skin URI: https://wp-cocoon.com/

  Author: 山中

  Author URI:

  Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png

  Version: 1.0.2

  Priority: 9999000000

*/



:root {

  --primary-color: #FF6B6Bcc;

  --primary-color-light: #FF6B6B66;

  --primary-color-lighter: #FF6B6B11;

  --secondary-color: #4ECDC4cc;

  --secondary-color-light: #4ECDC466;

  --secondary-color-lighter: #4ECDC411;

  --text-dark: #3c4444;

  --text-gray: #5c6666;

  --text-lighter: #8c9999;

  --text-p: #3c5555;

  --bg-light: #f8f9fa;

  --bg-white: #ffffff;

  --border-color: #e0e0e0;

  --shadow-light: 0 2px 10px rgba(0,0,0,0.1);

  --shadow-medium: 0 5px 15px rgba(0,0,0,0.1);

  --shadow-heavy: 0 10px 30px rgba(0,0,0,0.2);

}



/* ベーススタイル */

body {

    line-height: 1.6;

    color: var(--text-dark);

background-color: var(--bg-white);

}



.pilates-home {

    overflow-x: hidden;

}



/* 既存のCocoonスタイルとの調整 */

body.front-top-page .main {

    padding: 0 !important;

}



.pilates-home .entry-content {

    padding: 0 !important;

}



/*******************************************************************************/



/* グローバルメニューとメインコンテンツとの間のスキマを消す */

.pilates-home {

margin: -25px;

}



/* グローバルメニュー：通常時 */

.navi-in .menu-header .item-label {

  font-weight: bold;

  padding: 14px 20px;

  transition: color 0.3s, background-color 0.3s;

}



/* グローバルメニューリンク hover時 */

.navi-in .menu-header .item-label:hover {

  color: var(--secondary-color) !important;

  background: transparent;

}







/* 見出し */



.article h2 {

  background-color: var(--bg-white);

  color: var(--text-dark);

  padding: 0.25rem;

  border-right: none;

  border-left: 6px solid var(--primary-color);

  margin-top: 4.5rem;

  margin-bottom: 2.25rem;

  padding-left: 1rem;

}



.article h3{

  /* 元のborderは削除 */

  border: none;

  font-size: 20px;

  color: var(--text-dark);

  padding: .4em .6em;

  margin-top: 2.5rem; /* 40px相当 */

  margin-bottom: 1.2rem; /* 19.2px相当 */



  /* 背景としてグラデーションの線を設定 */

  background-image: linear-gradient(

    to right,

    var(--primary-color) 20%,

    var(--text-lighter) 20%

  );



  /* 背景のプロパティを調整して線に見せる */

  background-repeat: no-repeat;

  background-size: 100% 2px; /* 背景の幅を100%、高さを2px（線の太さ）に */

  background-position: left bottom; /* 背景を左下に配置 */

}



.article h3.no-design {

  background-image: none;

  background: none;

  border: none;

  margin: 8px;

}



.article h4 {

  font-size: 18px;

  border-top: none;

  border-bottom: none;

  margin-top: 2rem; /* 32px相当 */

  margin-bottom: 1rem !important; /* 16px相当 */

}



.article p {

  color: var(--text-p);

}





/* サイトバー */

/* サイドバータイトル */

.sidebar h3 {

  font-size: 24px;

  background: transparent;

  padding: 0;

  margin-top: 32px;

  color: var(--primary-color);

  border-bottom: 2px var(--primary-color) dotted;

  letter-spacing: 0.2em;

}

/* 検索ボタン */

.sidebar .search-filter button[type="submit"] {

  width: 100%;

  padding: 8px;

  background-color: var(--primary-color);

  color: white;

  font-weight: bold;

  border: none;

  border-radius: 2px;

  cursor: pointer;

  transition: background-color 0.3s;

  margin-bottom: 12px;

}

.sidebar .search-filter button[type="submit"]:hover {

  background-color: #aaa;

}







/*固定ページの投稿日、更新日、投稿者名を非表示にする*/

.page .date-tags,

.page .author-info {

    display: none;

}





/* 目次 */

.toc {

width: 95%;

background-color: var(--bg-light);

border: none !important;

}

.toc-title {

font-weight: bold;

color: var(--text-dark);

}

.toc a {

color: var(--text-dark);

font-size: 16px;

}

.toc ol ol a {

font-size: 14px;

}



.toc li {

font-weight: 600;

}



.toc li::marker {

content: '';

}



.toc li li {

font-weight: 450;

}



.toc li li::marker {

content: '└ ';

}







.osusume-person-box {

max-width: 520px;

margin: 0 auto;

border: 0.5px var(--primary-color) solid;

}



.osusume-person-box .box-label span {

margin: 4px auto !important;

}



.osusume-person-box .wp-block-cocoon-blocks-button-wrap-1 {

  display: flex;

  justify-content: center; /* 横方向の中央揃え */

  padding-bottom: 0px;

  margin-bottom: 0px !important;

}



.osusume-person-box .caption-box-content {

padding: 2em 1.2em;

}



.osusume-person-box .caption-box-content ul{

list-style-position: inside;

padding-left: 0;

}



.osusume-person-box .caption-box-content li{

border-bottom: dotted 2px var(--border-color);

padding: 1px 8px;

}



/* li::before の代わりに ::marker を使用 */

.osusume-person-box .caption-box-content li::marker {

content: '・';

color: var(--primary-color);

font-weight: 900;

font-size: 1.5em; /* 大きさの変更も可能 */

}









.point-box {

background-color: var(--secondary-color-lighter);

}



.point-box .box-label span {

margin: 4px auto !important;

}



.point-box .caption-box-content ul{

list-style-position: inside;

padding-left: 0;

padding: 16px 12px 24px;


}



.point-box .caption-box-content li{

border-bottom: dotted 2px var(--border-color);

padding: 1px 8px;

}



/* li::before の代わりに ::marker を使用 */

.point-box .caption-box-content li::marker {

content: '・';

color: var(--secondary-color);

font-weight: 900;

font-size: 1.5em; /* 大きさの変更も可能 */

}







/* 口コミの引用テキスト */

.inyo,

.inyo a {

color: #cfcfcf;

text-decoration: none;

}







/* 記事一覧の写真左上にあるカテゴリラベル */

.cat-label {

  background-color: rgba(255,107,107,0.0);

color: transparent;

border: none !important;

}

.cat-link {

  background-color: rgba(255,107,107,0.0);

color: transparent;

border: none !important;

}

.cat-link:hover {

  background-color: rgba(255,107,107,0.0);

color: transparent;

border: none !important;

}







/* フッター */

h2.footer-title {

  margin-bottom: 0.5rem;

  font-size: 2.0rem;

}

p.footer-text {

  font-size: 0.9rem;

}



h3.footer-title {

padding: 20px 0px;

}





/* 特定のテーブルのみ横スクロール対応 */

@media screen and (max-width: 768px) {

  .mobile-scroll-table {

    display: block;

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

  }

  

  .mobile-scroll-table table {

    min-width: 800px;

    width: auto;

  }

  

  .mobile-scroll-table td,

  .mobile-scroll-table th {

    white-space: nowrap;

    padding: 8px 12px;

  }

  

  /* スクロールヒント */

  .mobile-scroll-table::after {

    content: "← 横にスクロールできます →";

    display: block;

    text-align: center;

    font-size: 12px;

    color: #666;

    padding: 8px 0;

    background: #f5f5f5;

    border-top: 1px solid #ddd;

  }

}



/* * 左列強調テーブル (emphasis-left)

 * 使い方: <table class="emphasis-left"> またはブロックエディタの「高度な設定」でクラス追加

 */



.emphasis-left {

    border-collapse: collapse;

    width: 100%;

}



/* 全セルの共通設定 */

.emphasis-left th,

.emphasis-left td {

    padding: 0.5em 0.75em;

    border: 1px solid var(--border-color, #ddd); /* 枠線 */

    vertical-align: middle;

font-size: 14px;

}



/* --- 一番左の列（thまたはtd）の設定 --- */

.emphasis-left tr > th:first-child,

.emphasis-left tr > td:first-child {

    background-color: #4ECDC411; /* secondary-color-lighter */

    color: #333;

    width: 25%; /* お好みで調整（左列の幅） */

    text-align: center; /* 左列は中央寄せが見やすい */

}



/* スマホ対応（画面が狭いときは縦並びにするなど、必要に応じて） */

@media screen and (max-width: 480px) {

    .emphasis-left tr > th:first-child,

    .emphasis-left tr > td:first-child {

        width: 30%; /* スマホでは少し広げるか、autoにする */

        font-size: 0.8em;

        padding: 0.8em 0.5em;

    }

}



/* テーブルの親要素をスクロール可能にする */

.scrollable-table {

    overflow-x: auto;

    position: relative;

border: 1px solid #eee;

}



.scrollable-table table {

    border-collapse: separate; /* 枠線を綺麗に表示するため */

    border-spacing: 0;

    width: 100%;

font-size: 0.85rem;

line-height: 1.4;

}



/* ヘッダーの設定 */

.scrollable-table th {background-color: var(--primary-color, #333);

    color: white;

    padding: 10px 15px;

    font-weight: 600;

    text-align: center;

    position: sticky;

    top: 0;

    z-index: 2;

    border-bottom: 1px solid #eee;

    border-right: 1px solid rgba(255, 255, 255, 0.1); /* ヘッダー内の境界線は白の透過 */

}



/* 1列目（左端）の固定設定 */

.scrollable-table td:first-child {

    position: sticky;

    left: 0;

    z-index: 1;

    background-color: #fff; /* データ行の1列目は白 */

    border-right: 1px solid #eee; /* 細い罫線 */

}



/* ★一番左上のセルをPrimary Colorに固定 */

.scrollable-table th:first-child {

    position: sticky;

    left: 0;

    top: 0;

    z-index: 3; /* 最前面 */

    background-color: #FE8888;

    border-right: 1px solid rgba(255, 255, 255, 0.1);

}



/* セルの基本スタイル（罫線を細く） */

.scrollable-table td {

    padding: 8px 12px;

text-align: left;

vertical-align: top;

    border-bottom: 1px solid #eee; /* 細く薄い線 */

    border-right: 1px solid #eee;

    white-space: nowrap;

}



/* 最後の列の右線を消す（デザイン調整） */

.scrollable-table td:last-child,

.scrollable-table th:last-child {

    border-right: none;

}







/* 特定のテーブルのみデザイン変更 */

.basic-info-table {

width: 100%; /* テーブルの幅を親要素いっぱいに広げる */

table-layout: fixed;

border-collapse: collapse;

}



.basic-info-table tr {

    background-color: var(--bg-white) !important;

}



/* [basic-info-table]属性を持つテーブル内のすべてのセル（th, td） */

.basic-info-table th,

.basic-info-table td {

border: 1px solid var(--border-color);

padding: 0.8em 1em; /* セル内の余白 */

text-align: left;   /* 文字を左揃えに */

vertical-align: top; /* 文字を上揃えに */

width: 80%;

}



/* 左端の列（各行の最初のthまたはtd）のデザイン */

.basic-info-table th:first-child,

.basic-info-table td:first-child {

background-color: var(--secondary-color-lighter);

width: 240px;

font-weight: bold; /* 見出しセルとして文字を太くする（推奨） */

}



/* 左端"以外"のデータセル（td）のデザイン */

.basic-info-table td {

background-color: var(--bg-white);

}



/* 補足：左端のthの背景色も上書きされないように、tdだけでなくthも指定しておく */

.basic-info-table th:not(:first-child),

.basic-info-table td:not(:first-child) {

    background-color: var(--bg-white);

}