@charset "UTF-8";
/*
Template: arkhe
Theme Name: Arkhe Child
Theme URI: https://arkhe-theme.com/ja/
Description: Arkhe用子テーマ
Version: 1.0.0
Text Domain: arkhe
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ===========================================
   Googleフォント
   =========================================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', Meiryo, sans-serif;
}

/* ===========================================
   note風スタイル for Arkhe テーマ
   =========================================== */

/* 見出し1 (h1) - 記事タイトル スマホ用 */
@media (max-width: 999px) {
  .c-pageTitle__main {
    font-size: var(--ark-fz--xl);
  }
}

/* 見出し2 (h2) */
.l-content__body h2,
.post-content h2 {
  font-size: var(--ark-fz--xl);  /* スマホ: xl */
  font-weight: 700;
  line-height: 1.6;
  margin: 40px 0 20px 0;
  padding: 0;
  border: none;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

@media (min-width: 1000px) {
  .l-content__body h2,
  .post-content h2 {
    font-size: var(--ark-fz--xxl);  /* PC: xxl */
    margin: 56px 0 24px 0;
  }
}

/* 見出し3 (h3) */
.l-content__body h3,
.post-content h3 {
  font-size: var(--ark-fz--l);  /* スマホ: l */
  font-weight: 700;
  line-height: 1.6;
  margin: 36px 0 18px 0;
  padding: 0;
  border: none;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

@media (min-width: 1000px) {
  .l-content__body h3,
  .post-content h3 {
    font-size: var(--ark-fz--xl);  /* PC: xl */
    margin: 48px 0 20px 0;
  }
}

/* 見出し4 (h4) */
.l-content__body h4,
.post-content h4 {
  font-size: var(--ark-fz--m);  /* スマホ: m */
  font-weight: 700;
  line-height: 1.6;
  margin: 32px 0 14px 0;
  padding: 0;
  border: none;
  color: #1a1a1a;
}

@media (min-width: 1000px) {
  .l-content__body h4,
  .post-content h4 {
    font-size: var(--ark-fz--l);  /* PC: l */
    margin: 40px 0 16px 0;
  }
}

/* ===================================
   Arkhe用 目次フローティングボタン
   =================================== */

/* Arkheのデフォルトページトップボタンを非表示 */
#pagetop {
    display: none !important;
}

/* フローティングボタンのラッパー */
.arkhe-fix-btn-wrap {
    position: fixed;
    right: 1em;
    bottom: 1.25em;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

.arkhe-fix-btn-wrap.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 個別ボタンのスタイル */
.arkhe-fix-btn {
    width: 52px;
    height: 52px;
    background: #fff;
    border: 1px solid #131a1f;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 8px -4px rgba(0, 0, 0, 0.2);
    transition: all 0.25s;
    opacity: 0.85;
    padding: 0;
}

.arkhe-fix-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
}

.arkhe-fix-btn:active {
    transform: translateY(0);
}

/* ボタンアイコン */
.arkhe-fix-btn__icon {
    display: block;
    color: #131a1f;
    line-height: 1;
}

.arkhe-fix-btn__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* ボタンラベル */
.arkhe-fix-btn__label {
    display: block;
    font-size: 10px;
    margin-top: 2px;
    color: #131a1f;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ===================================
   目次モーダル
   =================================== */
.arkhe-toc-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

/* モーダルが開いている時 */
.arkhe-toc-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* オーバーレイ（背景） */
.arkhe-toc-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* モーダルコンテンツ */
.arkhe-toc-modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* モーダルヘッダー */
.arkhe-toc-modal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    position: relative;
}

.arkhe-toc-modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.arkhe-toc-modal__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #6b7280;
    transition: background-color 0.2s, color 0.2s;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.arkhe-toc-modal__close:hover {
    background: #f3f4f6;
    color: #111;
}

.arkhe-toc-modal__close svg {
    display: block;
}

/* モーダルボディ（目次コンテンツ） */
.arkhe-toc-modal__body {
    padding: 28px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}

/* 目次が存在しない場合のメッセージ */
.arkhe-toc-modal__body:empty::after {
    content: '目次がありません';
    display: block;
    text-align: center;
    color: #9ca3af;
    padding: 2em 0;
}

/* ===================================
   目次スタイルの調整（SWELLスタイル）
   =================================== */

/* Arkhe目次ブロックのタイトルと装飾を全て非表示 */
.arkhe-toc-modal__body .ark-block-toc__title {
    display: none !important;
}

/* 目次全体のスタイルリセット */
.arkhe-toc-modal__body .ark-block-toc,
.arkhe-toc-modal__body .ark-block-toc__list {
    all: unset;
    display: block;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* リスト項目 - 間隔を完全に削除 */
.arkhe-toc-modal__body .ark-block-toc li {
    all: unset;
    display: block;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* リンクスタイル（SWELLに合わせる） - パディングを最小化 */
.arkhe-toc-modal__body .ark-block-toc a {
    display: block;
    padding: 4px 0;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.5;
    transition: color 0.2s;
    position: relative;
    padding-left: 1.2em;
}

/* ブレットポイント（●）を追加 */
.arkhe-toc-modal__body .ark-block-toc a::before {
    content: "●";
    position: absolute;
    left: 0;
    color: #333;
    font-size: 0.6em;
    top: 50%;
    transform: translateY(-50%);
}

.arkhe-toc-modal__body .ark-block-toc a:hover {
    color: #131a1f;
    opacity: 0.7;
}

/* 入れ子（階層）のスタイル */
.arkhe-toc-modal__body .ark-block-toc ol ol,
.arkhe-toc-modal__body .ark-block-toc ul ul {
    all: unset;
    display: block;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 1em !important;
}

.arkhe-toc-modal__body .ark-block-toc ol ol a,
.arkhe-toc-modal__body .ark-block-toc ul ul a {
    font-size: 14px;
    padding-left: 1.5em;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* 階層の「└」を追加 */
.arkhe-toc-modal__body .ark-block-toc ol ol a::before,
.arkhe-toc-modal__body .ark-block-toc ul ul a::before {
    content: "└";
    color: #999;
    font-size: 1em;
    left: 0.3em;
}

/* 下線などの装飾を全て削除 */
.arkhe-toc-modal__body .ark-block-toc *::after {
    display: none !important;
}

.arkhe-toc-modal__body .ark-block-toc * {
    border: none !important;
    background: none !important;
}

/* ===================================
   スクロールバーのスタイル
   =================================== */
.arkhe-toc-modal__body::-webkit-scrollbar {
    width: 6px;
}

.arkhe-toc-modal__body::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

.arkhe-toc-modal__body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.arkhe-toc-modal__body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ===================================
   モーダルが開いている時のbodyスクロール防止
   =================================== */
body.arkhe-toc-modal-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0);
}

/* ===================================
   ポチップのAmazonを先頭にする
   =================================== */
.pochipp-box__btnwrap.-amazon{
    order: -2;
}

/* ===================================
   ポチップのロゴを消す
   =================================== */
.pochipp-box__logo {
	display: none !important;
}

/* タブボディ（左右の余白） */
.arkb-tabBody {
  padding-top: 0 !important;    /* 上の余白 */
  padding-right: 0 !important;  /* 右の余白 */
  padding-bottom: 0 !important; /* 下の余白 */
  padding-left: 0 !important;   /* 左の余白 */
}

/* タブ内コンテンツ（上下の余白） */
.arkb-tabBody__content {
  padding-top: 0px;    /* 上の余白（デフォルト: 12px） */
  padding-right: 0;     /* 右の余白 */
  padding-bottom: 24px; /* 下の余白（デフォルト: 12px） */
  padding-left: 0;      /* 左の余白 */
}