/* --- SAKULAB デザインシステム --- */
:root {
    --sakulab-blue: #66ccff;
    --sakulab-pink: #ff8899;
}

/* 1. 全体設定：高さの固定を解除し、スクロールを可能にする */
html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", sans-serif;
    background: radial-gradient(circle at center, #ffffff 0%, #f0f7ff 100%);
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 中身が少なくても背景を画面いっぱいに広げる */
}

/* 2. Home専用：1画面に収めてスクロール禁止 */
body.home-body {
    height: 100vh;
    overflow: hidden; 
}

/* 3. About/News等：中身に合わせて自動で伸びる */
body.scroll-body {
    height: auto; 
    overflow-y: auto; 
}

/* --- 共通パーツ：ヘッダー --- */
header { padding: 30px 5%; flex-shrink: 0; }
.header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }
.logo { font-size: 1.8rem; font-weight: 900; color: var(--sakulab-blue); text-decoration: none; }
nav ul { display: flex; list-style: none; gap: 20px; margin: 0; padding: 0; }
nav a { text-decoration: none; color: #444; font-weight: bold; font-size: 0.9rem; }
nav a:hover { color: var(--sakulab-blue); }

/* メインエリア */
.container { 
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    flex: 1;
}

/* Homeだけは上下中央に配置 */
.home-body .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Aboutカードのデザイン */
.about-card {
    background: #ffffff;
    padding: 60px 40px;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    text-align: center;
    margin: 20px auto 80px;
}

/* コンテンツ用装飾 */
.tag { background: var(--sakulab-pink); color: #fff; padding: 4px 12px; border-radius: 10px; font-size: 5.5rem; font-weight: 900; }
.blue-text { color: var(--sakulab-blue); }
.pink-text { color: var(--sakulab-pink); font-weight: bold; }

/* ヒーローセクション全体を中央に寄せる設定 */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;    /* 水平方向の中央揃え */
    justify-content: center; /* 垂直方向の中央揃え（必要に応じて） */
    text-align: center;      /* テキスト自体の中央揃え */
    padding: 100px 0;        /* 上下の余白調整 */
}

/* キャッチコピーの調整 */
.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

/* サブテキストの調整 */
.hero .sub-text {
    margin-bottom: 40px;
}

/* --- SAKULAB ボタン完全統一：重複削除＆訪問済み対策 --- */
/* 未訪問(:link)も、訪問済み(:visited)も、すべて同じデザインを強制 */
.btn-main, 
.btn-main:link, 
.btn-main:visited {
    display: inline-block !important;
    background-color: var(--sakulab-pink) !important; 
    color: #ffffff !important; 
    padding: 16px 50px !important;
    border-radius: 50px !important;
    text-decoration: none !important; 
    font-weight: bold !important;
    box-shadow: 0 8px 20px rgba(255, 136, 153, 0.4) !important;
    transition: 0.3s !important;
    margin: 20px 0 !important;
    cursor: pointer !important;
    border: none !important;
    text-align: center !important;
    line-height: 1.0 !important;
    white-space: nowrap !important;
}

.btn-main:hover {
    background-color: #ff8899 !important; 
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px #ffbfc9 !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

@media screen and (max-width: 480px) {
    .btn-main {
        display: block !important;    /* ブロック要素にする */
        width: fit-content !important; /* 文字の幅に合わせる */
        margin: 20px auto !important;  /* これで「中央揃え」になる */
        padding: 12px 24px !important; /* ボタンらしい余白 */
        
        font-size: 0.95rem !important;
        white-space: nowrap !important; /* 改行させない */
        text-align: center !important;
    }
}

footer { padding: 40px 0; text-align: center; color: #bbb; font-size: 0.8rem; flex-shrink: 0; }
/* --- Products ページ専用の調整 --- */

/* グリッドをAboutページ等のコンテンツ幅に合わせる */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 20px;
}

/* 商品カードにAboutカードのような清潔感を与える */
.product-card {
    background: #ffffff;
    border-radius: 20px; /* Aboutカードの角丸に合わせる */
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); /* 共通の薄い影 */
    overflow: hidden;
    transition: 0.3s;
    border: 1px solid rgba(0,0,0,0.05);
}
/* --- 商品グリッド：3列×2段を強制 --- */
.product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 横に3つ並べる */
    gap: 25px !important;
    margin-top: 30px !important;
}

/* カードのデザインをAbout風に */
.product-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    transition: 0.3s !important;
}

.product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
}

/* 画像を正方形に統一 */
.product-img-wrapper {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: #f9f9f9 !important;
}

.product-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.product-content {
    padding: 20px !important;
    text-align: center !important;
}

.product-title {
    font-size: 1.0rem !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
    height: 2.8em !important;
    overflow: hidden !important;
}
/* ショップ誘導セクションの外枠 */
.shop-footer-section {
    margin-top: 80px;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
}

/* 白いカード部分 */
.shop-footer-card {
    background: #fff;
    border-radius: 40px; /* 大きな角丸 */
    padding: 60px 20px;
    text-align: center;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
}

.shop-footer-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
}

.shop-footer-card p {
    color: #888;
    margin-bottom: 35px;
}

/* メインのピンクボタン */
.booth-full-button {
    display: inline-block !important;
    background-color: #ff8899 !important; /* SAKULABブランドのピンク色 */
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 18px 80px !important; /* 横長のボタン */
    border-radius: 50px !important; /* 丸みのある形 */
    font-weight: bold !important;
    font-size: 1.1rem !important;
    transition: 0.3s ease !important;
    box-shadow: 0 8px 20px rgba(255, 133, 149, 0.3) !important;
}

.booth-full-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);
    box-shadow: 0 12px 25px rgba(255, 133, 149, 0.4) !important;
}
/* 「想像を、形にする。」の大きさを変える */
.hero h1 {
    font-size: 4rem; /* 数字を大きくすると文字も大きくなります */
    font-weight: bold;
}

/* 「クリエイターのための〜」の大きさを変える */
.hero .sub-text {
    font-size: 1.2rem; /* 標準より少し大きくする設定 */
}
.hero h1 {
    font-size: 4.5rem;   /* 先ほど調整したサイズ */
    font-weight: 900;    /* ここを追加！数字が大きいほど太くなります */
    line-height: 1.2;    /* 行の間隔を少し詰めると、より力強く見えます */
}
/* ニュースリスト全体のスタイル設定 */
.news-list {
    max-width: 900px; /* 見やすさのために横幅を制限 */
    margin: 0 auto 100px; /* 中央配置と下部の余白 */
}

/* 各ニュース記事（article）を囲むスタイル */
.news-item {
    background: #ffffff; /* 白い背景色 */
    padding: 40px; /* 内側の余白をしっかり取る */
    margin-bottom: 25px; /* 記事と記事の間の余白 */
    border-radius: 20px; /* 角丸で柔らかな印象に */
    border: 1px solid #f0f0f0; /* 薄い枠線を追加 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02); /* 薄い影をつけて浮いたように見せる */
    
    /* 記事内の日付・タイトル・内容を囲む */
    display: flex;
    flex-direction: column;
}

/* 日付とカテゴリ（Update）の囲み */
.news-meta {
    margin-bottom: 20px; /* タイトルとの間隔 */
}

.news-date {
    display: inline-block;
    font-size: 0.95rem; /* 標準より少し小さく */
    color: #888; /* 薄いグレーで目立ちすぎないように */
    margin-right: 15px; /* カテゴリタグとの間隔 */
}

.news-category {
    display: inline-block;
    background: var(--sakulab-pink); /* SAKULABブランドのピンク色 */
    color: white; /* 文字は白 */
    font-size: 0.8rem;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 5px;
}

/* タイトル部分（太字） */
.news-title {
    font-size: 1.4rem; /* Productsページ の見出しに合わせる */
    color: #333; /* 濃いめのグレー */
    font-weight: 700; /* しっかり太く強調 */
    margin-bottom: 15px; /* 内容との間隔 */
}

/* 内容部分（文章） */
.news-content p {
    font-size: 1rem; /* 標準サイズ */
    color: #666; /* タイトルより少し薄く */
    line-height: 1.7; /* 行間を広げて読みやすく */
}
/* ローディング全体の配置 */
.loading-container {
    text-align: center;
    padding: 50px 0;
}

/* くるくる回る丸のデザイン */
.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 15px;
    border: 4px solid #f3f3f3; /* 背景の円 */
    border-top: 4px solid #3498db; /* 動く部分の色（SAKULABブルー） */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* 1秒で1回転し続ける */
}

/* 回転アニメーションの定義 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 読み込み中の文字のスタイル */
.loading-container p {
    color: #999;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}
/* FAQ全体の幅を絞って読みやすくする */
.faq-list {
    max-width: 700px;
    margin: 0 auto 100px;
}

/* カードをシンプルに */
.faq-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px 30px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* 影を薄くして清潔感を出す */
}

/* 質問行 */
.q-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.q-label {
    color: var(--sakulab-blue); /* SAKULABブルー */
    font-weight: 900;
    font-size: 1.4rem;
    margin-right: 15px;
}

.question-text {
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
}

/* 回答行 */
.a-row {
    padding-left: 33px; /* Qの文字の分だけ下げる */
}

.answer-text {
    color: #666;
    line-height: 1.6;
}

.answer-text strong {
    color: var(--sakulab-pink); /* 重要な言葉はピンクで */
}
/* コンタクトカードのスタイル */
.contact-card {
    background: #fff;
    padding: 60px 40px;
    border-radius: 32px;
    max-width: 600px;
    margin: 0 auto 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    text-align: center;
    border: 1px solid #f0f0f0;
}

.contact-card p {
    line-height: 1.8;
    color: #555;
}

.contact-action {
    margin: 40px 0;
}

/* 補足情報のスタイル */
.contact-note {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #eee;
}

.contact-note p {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 5px;
}
/* ロゴ全体のスタイル */
.logo {
    display: flex;
    align-items: center; /* 画像と文字を上下中央で揃える */
    gap: 10px;           /* ロゴと文字の間の隙間 */
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--sakulab-blue);
    text-decoration: none;
}

/* ロゴ画像のサイズ調整 */
.logo-img {
    width: 40px;         /* ロゴの幅（好みの大きさに調整してください） */
    height: 40px;        /* ロゴの高さ */
    object-fit: contain; /* 画像を歪ませずに収める */
}
/* --- お問い合わせフォーム専用：イメージ画像風レイアウト（追加のみ） --- */

/* フォーム全体の配置調整 */
.contact-form {
    text-align: left; /* 項目を左揃えにする */
}

/* ラベルと入力欄を横並びにする設定 */
.form-group {
    display: flex;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid #eee; /* 項目間の区切り線 */
}

/* 左側の項目名エリア */
.form-label {
    width: 250px;
    display: flex;
    align-items: center;
    font-weight: 900;
    color: #333;
}

/* 「必須」バッジ */
.badge-required {
    background: #ff8899; /* イメージ画像に近い落ち着いた青 */
    color: #fff;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
    font-weight: bold;
}

/* 右側の入力エリア */
.form-input-area {
    flex: 1;
}

/* 入力ボックス・セレクト・テキストエリアの共通デザイン */
.form-input-area input[type="text"],
.form-input-area input[type="email"],
.form-input-area select,
.form-input-area textarea {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: #f2f5f8; /* 薄いグレーの背景 */
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
    font-family: inherit;
}

/* テキストエリアの高さ調整 */
.form-input-area textarea {
    height: 150px;
    resize: vertical;
}

/* 入力中に色を変える（フォーカス時） */
.form-input-area input:focus,
.form-input-area textarea:focus {
    background-color: #e8eff6;
    box-shadow: inset 0 0 0 2px var(--sakulab-blue);
}

/* 送信ボタンのエリア */
.form-submit-area {
    text-align: center;
    margin-top: 50px;
}

/* プレースホルダー（入力例）の色 */
::placeholder {
    color: #bbb;
}

/* --- PC版・スマホ版共通：CREATORバッジのデザイン --- */
.creator-badge, 
div[class*="CREATOR"],
.about-hero h1 {
    display: inline-block;
    background-color: #ff8e99; /* ピンク背景 */
    color: #ffffff;           /* 白文字 */
    padding: 16px 48px;        /* 上下左右の余白 */
    border-radius: 8px;       /* 角丸 */
    font-weight: bold;
    font-size: 2.2rem;        /* PCでの適切なサイズ */
    text-align: center;
    margin-bottom: 20px;
}

/* --- スマホ用レスポンシブ設定 (768px以下) --- */
@media screen and (max-width: 768px) {
    /* 1. ページ全体のはみ出し・縮小バグ防止 */
    html, body {
        overflow-x: hidden !important; /* 横揺れ防止 */
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
        font-size: 16px !important; /* 文字サイズをライセンスページに合わせる */
    }

    /* 2. ハンバーガーボタン */
    .menu-toggle {
        display: block;
        cursor: pointer;
        z-index: 1001;
    }

    .menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: var(--sakulab-blue);
        transition: all 0.3s ease-in-out;
    }

    /* 3. スマホメニュー（ナビ）本体 */
    nav {
        position: fixed;
        top: 0; 
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        transition: 0.3s;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    nav.active {
        right: 0;
    }

    nav ul {
        flex-direction: column;
        text-align: center;
        padding: 0;
    }

    nav ul li {
        margin: 15px 0;
    }

    nav ul li a {
        font-size: 20px !important; /* メニューの文字を大きく */
        color: #333;
        font-weight: bold;
    }

    /* CREATORバッジ：サイズを抑えつつデザインを復活 */
    .creator-badge, 
    div[class*="CREATOR"] {
        /* 1. デザインの復活 */
        background-color: #ff8e99 !important; /* 元のピンク色 */
        color: #ffffff !important;           /* 白文字 */
        font-weight: bold !important;
        border-radius: 8px !important;       /* 角を少し丸く */
        
        /* 2. サイズと位置の固定（はみ出し防止） */
        display: inline-block !important;    /* 文字の長さに合わせる */
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        
        /* 3. スマホに収まる大きさに調整 */
        width: auto !important;
        max-width: 90% !important;
        padding: 10px 30px !important;       /* バッジらしい余白 */
        font-size: 1.8rem !important;        /* スマホでちょうどいいデカ文字 */
        
        margin: 20px auto !important;        /* 中央に配置 */
        text-align: center !important;
    }

    /* 5. Aboutページなどの本文サイズ */
    .about-content p, 
    .container p {
        font-size: 1rem !important;
        line-height: 1.8;
        padding: 0 15px;
    }

    /* ボタンのアニメーション (Xにする) */
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* スマホ用改行を有効にする */
    .sp-only {
        display: block;
    }

    /* トップページのメインコピーを横一列に収める */
    .hero-content h1, 
    .hero h1 {
        font-size: 8.5vw !important; /* 画面幅に合わせてサイズを自動調整 */
        white-space: nowrap !important; /* 絶対に改行させない */
        letter-spacing: -0.05em !important; /* 文字の間隔をわずかに詰めて収まりを良くする */
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* 「形」の色が変わっている場合、その中の span も調整 */
    .hero-content h1 span,
    .hero h1 span {
        font-size: inherit !important; /* 親のサイズに合わせる */
    }

    .product-list {
        display: block !important; /* 横並びを完全にリセットします */
        width: 100% !important;
        padding: 0 20px !important;
    }

    /* 2. 商品1つずつの幅を100%（1列）にする */
    .product-item {
        display: block !important;
        width: 100% !important;   /* これで1列になります */
        margin-bottom: 40px !important; /* 商品ごとの隙間を作ります */
        float: none !important;    /* 横並びの古い命令を消します */
    }

    /* 3. 画像もカード幅いっぱいに広げる */
    .product-item img {
        width: 100% !important;
        height: auto !important;
    }
}

/* --- プロダクトページ：スマホ縦画面で1列に強制 --- */
@media screen and (max-width: 768px) {
    /* 親要素の「横並び」を解除して「縦並び」にする */
    .product-list {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        gap: 30px !important; /* カード間の上下余白 */
    }

    /* 子要素（各商品カード）の幅を100%にする */
    .product-item {
        width: 100% !important; 
        max-width: 340px !important; /* 左右に少し余白ができるサイズ */
        margin: 0 auto !important;
        flex: none !important; /* PC版の幅指定を解除 */
    }
}

/* --- PC用設定 (769px以上) --- */
@media screen and (min-width: 769px) {
    .menu-toggle { display: none; }
    .sp-only { display: none; }
}

/* --- プロダクトページ：スマホ縦画面で1枚ずつ表示（修正版） --- */
@media screen and (max-width: 768px) {
    /* 1. 3列並べているグリッド設定を解除して1列にする */
    .product-grid {
        display: flex !important;
        flex-direction: column !important; /* 縦に積む */
        align-items: center !important;
        gap: 30px !important;
    }

    /* 2. 各カードの幅を画面いっぱいに広げる */
    .product-card {
        width: 100% !important;
        max-width: 350px !important; /* 横に広がりすぎないよう調整 */
        margin: 0 auto !important;
    }

    /* 3. 中の画像やボタンを1列用に最適化 */
    .product-img-wrapper {
        aspect-ratio: auto !important; /* 正方形固定を解除（お好みで） */
    }
    
    .product-title {
        height: auto !important; /* 文字数による高さ制限を解除 */
        margin-bottom: 20px !important;
    }
}

/* --- ショップ誘導ボタンの改行を禁止する --- */
@media screen and (max-width: 768px) {
    .booth-full-button {
        white-space: nowrap !important; /* 文字を絶対に改行させない */
        padding: 18px 40px !important;  /* 左右の余白を少し削って画面内に収める */
        font-size: 1.0rem !important;   /* 文字サイズをわずかに調整 */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;         /* 幅を中身に合わせる */
        min-width: 280px !important;    /* ボタンらしい最低限の幅は維持 */
    }
}

/* --- コンタクトフォーム：スマホで入力しやすくする修正 --- */
@media screen and (max-width: 768px) {
    /* 1. 項目（ラベルと入力枠）を縦並びに変える */
    .form-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 0 !important;
    }

    /* 2. ラベル（お名前などの文字）の横幅制限をなくす */
    .form-label {
        width: 100% !important;
        margin-bottom: 12px !important; /* 入力枠との間に隙間を作る */
    }

    /* 3. 入力エリアを画面いっぱいに広げる */
    .form-input-area {
        width: 100% !important;
    }

    /* 4. 入力枠そのものを大きくして打ちやすくする */
    .form-input-area input[type="text"],
    .form-input-area input[type="email"],
    .form-input-area select,
    .form-input-area textarea {
        width: 100% !important;
        padding: 15px !important; /* 中の余白を増やして押しやすく */
        font-size: 16px !important; /* スマホでズームされないための適切なサイズ */
        border-radius: 12px !important; /* 角丸を少し強調して今風に */
        background-color: #f8fafd !important; /* 少し明るいグレーで見やすく */
        box-sizing: border-box !important;
    }

    /* テキストエリアの高さも確保 */
    .form-input-area textarea {
        height: 120px !important;
    }
}

/* --- コンタクトフォーム：項目を縦並びにして入力しやすくする --- */
@media screen and (max-width: 768px) {
    /* 1. ラベルと入力欄を縦並びにする */
    .form-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 15px 0 !important;
    }

    .form-label {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .form-input-area {
        width: 100% !important;
    }

    /* 2. 入力欄を指でタップしやすく、文字を打ちやすくする */
    .form-input-area input,
    .form-input-area select,
    .form-input-area textarea {
        padding: 12px !important;
        font-size: 16px !important;
    }

    /* --- 「BOOTHでショップを見る」ボタンのはみ出し対策 --- */
    .booth-full-button {
        display: block !important;
        width: 90% !important;     
        margin: 0 auto !important;   
        padding: 15px 10px !important; 
        white-space: nowrap !important; 
        text-align: center !important;
    }

    @media screen and (max-width: 768px) {
    .hero h1 {
        font-family: 'Noto Sans JP', sans-serif !important;
        font-weight: 900 !important;
    }
}
}

/* ボタンの基本スタイル */
.page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    opacity: 0;        /* 最初は透明 */
    visibility: hidden; /* 最初はクリックできないように隠す */
    transition: 0.3s;   /* ふわっと出すためのアニメーション */
}

/* スクロールした時にクラスをつけて表示させる用 */
.page-top.is-show {
    opacity: 1;
    visibility: visible;
}

/* ボタンの見た目（丸いピンクのボタン例） */
.page-top a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff8e9e; /* SAKULABカラーに合わせて調整してください */
    color: #fff;
    width: 50px;
    height: 50px;
    text-decoration: none;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.page-top {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    /* その他、位置や色の設定 */
}

.page-top.is-show {
    opacity: 1;
    visibility: visible;
}

/* ボタンを囲んでいるカードやセクション全体の設定 */
.about-card { /* クラス名は実際のHTMLに合わせて適宜変えてください */
    text-align: center !important; /* 子要素（テキストやインラインブロック）を中央へ */
    display: flex;
    flex-direction: column;
    align-items: center; /* 子要素（ブロック要素）を中央へ */
}

/* ボタン自体の設定（スマホ用） */
@media screen and (max-width: 480px) {
    .btn-main {
        display: inline-flex !important; /* 中身の文字に合わせて幅を決める */
        align-items: center;
        justify-content: center;
        
        width: auto !important;         /* 幅を固定しない */
        min-width: 200px;               /* 短くなりすぎないように最低幅だけ指定 */
        margin: 20px auto !important;   /* 左右の auto で中央へ */
        padding: 12px 30px !important;  /* 内側の余白でボタンの大きさを調整 */
        
        /* 寄ってしまう原因のリセット */
        position: static !important; 
        transform: none !important;
        left: auto !important;
    }
}

/* 1. ボタンを包んでいる「白い背景の枠」の修正 */
.about-card { 
    width: 90%;            /* 画面幅の90%に収める */
    max-width: 400px;      /* 大きくなりすぎない限界を決める */
    margin: 20px auto;     /* 枠自体を画面の中央に置く */
    padding: 20px;         /* 内側に余白を作る */
    box-sizing: border-box; /* paddingを含めて幅を計算する */
    overflow: hidden;      /* 中身がはみ出さないようにガード */
    text-align: center;    /* 中のテキストやボタンを中央寄せにする */
}

/* 2. ボタン自体の修正（スマホ用） */
@media screen and (max-width: 480px) {
    .btn-main {
        display: inline-block !important; /* 横幅いっぱいにせず、文字に合わせる */
        width: auto !important;
        min-width: 200px;                 /* ある程度の存在感は保つ */
        max-width: 100% !important;       /* 親要素（白い枠）からは絶対出さない */
        margin: 10px auto !important;
        padding: 12px 24px !important;
        box-sizing: border-box;
    }
}

/* --- PC版の最終レイアウト調整 --- */
@media screen and (min-width: 769px) {
    /* 1. カード全体の幅を広げ、中身を左揃えベースにする */
    .about-card {
        max-width: 900px !important;
        padding: 60px !important;
        text-align: left !important; /* 基本は左揃え */
        display: block !important;
    }

    /* 2. CREATORバッジと横のテキストを並べる */
    .creator-badge, 
    div[class*="CREATOR"] {
        display: inline-block !important;
        margin-right: 20px !important;
    }

    /* 3. Skills/Works などのセクションを横に並べる */
    /* もしHTMLでこの部分を囲むクラスがあれば flex を使うと綺麗です */

    /* 4. LINEセクションを横長のレイアウトに変更 */
    .about-card .line-section { /* LINE部分を囲む要素があれば */
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #f8fafd; /* 少し色を変えて区切りを出す */
        padding: 30px !important;
        border-radius: 15px;
        text-align: left !important;
    }

    /* LINEセクション内のボタンを右側に配置 */
    .btn-main {
        margin: 0 !important; /* PCでは余計な上下マージンを消す */
    }
}

/* --- スマホ版（今の良さをキープ） --- */
@media screen and (max-width: 768px) {
    .about-card {
        max-width: 95% !important;
        padding: 25px !important;
        text-align: center !important; /* スマホは中央揃え */
    }
    
    /* LINEセクションを縦並びに戻す */
    .btn-main {
        width: 100% !important;
        max-width: 280px !important;
        margin: 20px auto !important;
    }
}

/* --- PC版：中央揃えのまま幅広にする最終調整 --- */
@media screen and (min-width: 769px) {
    /* 1. カード全体を中央に配置しつつ幅を広げる */
    .about-card {
        max-width: 900px !important;  /* 枠自体を大きく */
        width: 90% !important;
        margin: 60px auto !important; /* 左右autoで中央固定 */
        padding: 60px !important;
        text-align: center !important; /* ★中身をすべて中央揃えに戻す */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* flex子要素も中央へ */
    }

    /* 2. CREATORバッジ周りの調整 */
    .creator-badge, 
    div[class*="CREATOR"] {
        display: inline-block !important;
        margin: 0 auto 20px !important;
    }

    /* 3. 文章が左に寄りすぎないよう、中央配置で幅を整える */
    .about-card p {
        max-width: 700px !important; /* 文章が広がりすぎないように制限 */
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important; /* 文章も中央揃え */
        line-height: 1.8 !important;
    }

    /* 4. LINEセクションも中央揃えを維持しつつ幅広に */
    .line-section {
        width: 100% !important;
        max-width: 800px !important;
        margin: 40px auto 0 !important;
        padding: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* 縦に並べて中央揃え */
        align-items: center !important;
        text-align: center !important;
    }

    /* 5. LINEボタンを中央に */
    .btn-main {
        margin: 30px auto 0 !important;
        display: inline-block !important;
    }
}

/* --- PC版：SkillsとWorksを横に広げる調整 --- */
@media screen and (min-width: 769px) {
    /* SkillsとWorksを包んでいるエリア（仮に .skills-works-container とします） */
    /* 適切なクラス名がない場合は、HTML側でこの2つを <div> で囲ってください */
    .about-card .flex-container { 
        display: flex !important;
        justify-content: space-around !important; /* 均等に、かつ端に寄りすぎない配置 */
        width: 100% !important;
        max-width: 700px !important; /* 広がりすぎ防止 */
        margin: 40px auto !important; /* 中央に配置 */
    }

    /* 各アイテム（Skills単体、Works単体）の幅を確保 */
    .skills-works-item {
        flex: 1 !important;
        padding: 0 20px !important;
    }
}

/* --- スマホ版：縦並びを維持 --- */
@media screen and (max-width: 768px) {
    .about-card .flex-container {
        display: block !important; /* スマホでは横並びを解除 */
    }
    .skills-works-item {
        margin-bottom: 30px !important;
    }
}

@media screen and (max-width: 600px) {
    .info-grid {
        flex-direction: column !important; /* スマホでは縦に並べる */
        gap: 30px !important;            /* 縦の隙間を適度にする */
        align-items: center;
    }
}

/* --- LINE専用の独立した白いカード --- */
.line-card-independent {
    background: #fff !important;         /* 真っ白な背景 */
    border-radius: 30px !important;      /* 角丸 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; /* 柔らかい影 */
    padding: 40px 0px !important;       /* 中の余白をたっぷり取る */
    margin: 40px auto 80px !important;   /* 上のカードとの間隔を空ける */
    width: 90% !important;
    max-width: 900px !important;         /* 上のカードと幅を合わせる */
    text-align: center !important;       /* 中身は中央揃え */
}

/* スマホ版の調整 */
@media screen and (max-width: 768px) {
    .line-card-independent {
        padding: 40px 20px !important;
        margin: 20px auto 40px !important;
        width: 95% !important;
        border-radius: 20px !important;
    }
}

/* --- スマホではみ出しを強制的に直す --- */
@media screen and (max-width: 768px) {
    /* LINEカードの幅を画面に合わせる */
    .line-card-independent {
        width: 92% !important;        /* 左右に少し隙間を作る */
        max-width: none !important;    /* 固定幅の制限を解除 */
        padding: 30px 15px !important; /* 左右の余白を少し削る */
        margin: 20px auto !important;  /* 中央寄せ */
        box-sizing: border-box !important; /* パディングを含めた幅にする */
    }

    /* 中の文章がはみ出さないようにする */
    .line-card-independent p {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        word-break: break-all !important; /* 長い単語があっても改行させる */
    }

    /* ボタンが大きすぎる場合は調整 */
    .line-card-independent .btn-main {
        width: 100% !important;
        max-width: 260px !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* 1. 送信メッセージが表示された時、親要素の padding-top を強制的に 0 にする */
.contact-card:has(#successMessage[style*="display: block"]) {
    padding-top: 0 !important;
}

/* 2. 【最重要】LINEパーツが持っている「勝手な余白」を送信後だけ抹殺する */
.contact-card:has(#successMessage[style*="display: block"]) .line-card-independent {
    margin-top: 0 !important;   /* これが赤枠の正体です */
    padding-top: 0 !important;
    border-top: none !important; /* 点線も不要ならこれで消えます */
}

/* 3. 送信メッセージ自体の上の余白も詰める */
#successMessage {
    margin-top: 10px !important;
}