@charset "UTF-8";

/* ========================================================
   🐾 ふみぽんっ！STUDIO 共通デザインシステム (common.css)
======================================================== */

:root {
    /* 🎨 1. 共通カラーパレット（色はここで一括管理！） */
    --color-bg-base: #fff0f5;        /* 背景の薄いピンク */
    --color-text-main: #5a4a42;      /* メインテキスト（焦げ茶） */
    --color-text-muted: #636e72;     /* 補足テキスト（グレー） */
    
    --color-pink-main: #fd79a8;      /* ふみぽんピンク */
    --color-pink-light: #ffb8b8;
    
    --color-blue-main: #0984e3;      /* ツールブルー */
    --color-blue-light: #74b9ff;
    --color-blue-bg: #e8f4ff;

    --color-yellow-main: #fdcb6e;    /* アクセントイエロー */
    --color-yellow-light: #ffeaa7;
    --color-yellow-bg: #fff9e6;

    /* 📐 2. 共通サイズ・余白・角丸（ズレの原因はここで撲滅！） */
    --font-main: 'M PLUS Rounded 1c', sans-serif;
    --radius-panel: 15px;            /* パネルの角丸 */
    --radius-btn: 25px;              /* ボタンの角丸 */
    --shadow-depth: 4px;             /* 押し込みボタンやパネルの影の深さ */
}

/* ========================================================
   基礎設定 (Base)
======================================================== */
body {
    font-family: var(--font-main);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--color-bg-base);
    color: var(--color-text-main);
    line-height: 1.6;
}

h1 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 20px;
}

/* ========================================================
   共通パーツ：アコーディオン (使い方・履歴・メニューなど)
   👉 クラス名: `fumi-accordion`
======================================================== */
details.fumi-accordion {
    background-color: #ffffff;
    border: 3px dashed var(--color-pink-light); /* デフォルトはピンク */
    border-radius: var(--radius-panel);
    padding: 15px 25px;
    margin-bottom: 20px;
    box-shadow: 0 var(--shadow-depth) 0 var(--color-yellow-light);
    transition: all 0.3s ease;
}

/* アコーディオンの見出し部分（クリックできる場所） */
details.fumi-accordion summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between; /* 矢印を必ず右端に固定！ */
    align-items: center;
    outline: none;
    margin: -5px -10px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 1.1em; /* 見出しのフォントサイズを完全統一 */
    font-weight: bold;
    color: var(--color-pink-main);
}

details.fumi-accordion summary::-webkit-details-marker { display: none; }
details.fumi-accordion summary::after { 
    content: '▼'; 
    font-size: 0.8em; 
    transition: transform 0.3s ease; 
}
details.fumi-accordion[open] summary::after { transform: rotate(180deg); }
details.fumi-accordion summary:hover { background: #fff0f5; }

/* 開いたときの見出しの下線 */
details.fumi-accordion[open] summary {
    border-bottom: 2px dashed var(--color-pink-light);
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-radius: 8px 8px 0 0;
}

/* 中身のリスト（ul/li）の余白統一 */
details.fumi-accordion ul {
    margin: 0;
    padding-left: 20px;
}
details.fumi-accordion li {
    margin-bottom: 6px;
}

/* 🎨 アコーディオンのカラーテーマ (青版・黄色版) */
details.fumi-accordion.theme-blue { border-color: var(--color-blue-light); }
details.fumi-accordion.theme-blue summary { color: var(--color-blue-main); }
details.fumi-accordion.theme-blue summary:hover { background: var(--color-blue-bg); }
details.fumi-accordion.theme-blue[open] summary { border-bottom-color: var(--color-blue-light); }

details.fumi-accordion.theme-yellow { border-color: var(--color-yellow-main); }
details.fumi-accordion.theme-yellow summary { color: var(--color-text-main); }
details.fumi-accordion.theme-yellow summary:hover { background: var(--color-yellow-bg); }
details.fumi-accordion.theme-yellow[open] summary { border-bottom-color: var(--color-yellow-main); }

/* ========================================================
   共通パーツ：ボタン
   👉 クラス名: `fumi-btn`
======================================================== */
.fumi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-btn); /* 丸みを完全統一 */
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: all 0.1s;
    text-decoration: none;
    box-sizing: border-box;
}

/* 押し込みアニメーション */
.fumi-btn:active {
    transform: translateY(var(--shadow-depth));
    box-shadow: none !important;
    margin-bottom: calc(var(--shadow-depth) * -1); /* 押し込んだ時のレイアウトズレ防止 */
}

/* トップに戻るボタン */
.fumi-btn-back {
    background-color: var(--color-yellow-light);
    color: #d63031;
    box-shadow: 0 var(--shadow-depth) 0 var(--color-yellow-main);
}


.fumi-btn-main {
    display: inline-flex;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--radius-btn); 
    font-size: 1.05em;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: all 0.1s;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}


.btn-primary {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* 押し込んだ時のプニッと感 */
.fumi-btn-main:active {
    transform: translateY(var(--shadow-depth));
    box-shadow: none !important;
}


/* ========================================================
   共通パーツ：アクションエリア（ボタンを可愛く並べる箱）
   👉 クラス名: `fumi-action-area`
======================================================== */
.fumi-action-area {
    display: flex;
    gap: 12px;               /* ボタン同士の可愛い隙間 */
    justify-content: center; /* 中央にギュッと寄せる */
    flex-wrap: wrap;         /* スマホで狭い時は自動で縦並びに！ */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* アクションエリアに入ったメインボタンは、自動で横並びになる！ */
.fumi-action-area .fumi-btn-main {
    flex: 1;                 /* 横幅を仲良く均等に分ける */
    min-width: 140px;        /* スマホで潰れすぎないように最低幅をキープ */
    width: auto;             /* 100%広がる呪縛を解除 */
    margin-top: 0;           /* 余白は箱に任せるのでゼロに */
}

/* ========================================================
   共通パーツ：コンパクトコンテナ（間延び防止！）
   👉 クラス名: `fumi-container-compact`
======================================================== */
.fumi-container-compact {
    max-width: 800px;
    margin: 0 auto;
}

/* 🎨 カラーバリエーション（ボタン用） */
.fumi-btn-pink   { background-color: #ff7675; box-shadow: 0 var(--shadow-depth) 0 #d65d5c; }
.fumi-btn-green  { background-color: #00b894; box-shadow: 0 var(--shadow-depth) 0 #009477; }
.fumi-btn-purple { background-color: #a29bfe; box-shadow: 0 var(--shadow-depth) 0 #6c5ce7; }
.fumi-btn-blue   { background-color: #0984e3; box-shadow: 0 var(--shadow-depth) 0 #076bb8; }
.fumi-btn-yellow { background-color: #fdcb6e; box-shadow: 0 var(--shadow-depth) 0 #e1b15c; }
.fumi-btn-gray   { background-color: #b2bec3; box-shadow: 0 var(--shadow-depth) 0 #636e72; }
.fumi-btn-black  { background-color: #2d3436; box-shadow: 0 var(--shadow-depth) 0 #000000; }
.fumi-btn-red    { background-color: #d63031; box-shadow: 0 var(--shadow-depth) 0 #b32525; }
.fumi-btn-white { 
    background-color: #ffffff; 
    box-shadow: 0 var(--shadow-depth) 0 #d6d6d6; /* 影も白に合わせて薄いグレーに */
    
    /* 👇 白ボタンが「死なない」ための生命維持装置 */
    color: var(--color-text-main) !important;  /* 文字を焦げ茶に強制上書き */
    border: 2px solid var(--color-text-main); /* 輪郭をパキッとさせる */
}


/* ✨ 魔法のパルスアニメーション（色を自由に変えられる版） */
@keyframes fumi-pulse-glow { 
    0% { box-shadow: 0 0 0 0 var(--pulse-color); } 
    70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 
}

/* 色ごとの魔法クラス */
.fumi-pulse-pink   { --pulse-color: rgba(253, 121, 168, 0.6); animation: fumi-pulse-glow 2s infinite; }
.fumi-pulse-blue   { --pulse-color: rgba(9, 132, 227, 0.6);  animation: fumi-pulse-glow 2s infinite; }
.fumi-pulse-yellow { --pulse-color: rgba(253, 203, 110, 0.6); animation: fumi-pulse-glow 2s infinite; }
.fumi-pulse-green  { --pulse-color: rgba(0, 184, 148, 0.6);  animation: fumi-pulse-glow 2s infinite; }
.fumi-pulse-white  { --pulse-color: rgba(255, 255, 255, 0.7);  animation: fumi-pulse-glow 2s infinite; }

/* 𝕏 フォローボタン専用（共通CSS） */
.fumi-btn-x {
    display: inline-block;
    background-color: #1da1f2; /* 𝕏ブルー */
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 12px 30px;
    border-radius: 30px;
    border: 2px solid #2d3436;
    font-weight: 900;
    box-shadow: 4px 4px 0 #2d3436; /* パキッとした影 */
    transition: 0.2s;
}

.fumi-btn-x:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 0 #2d3436;
}

.fumi-btn-x:active {
    transform: translateY(2px);
    box-shadow: 2px 2px 0 #2d3436;
}