/* Miniflu操作ガイド画面スタイル */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横方向のスクロールバーを非表示にする */
}
/* ページ内のすべての要素が親要素の幅を超えないようにする */
* {
    box-sizing: border-box;
    max-width: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font-family:'Helvetica Neue', sans-serif;
    background: #eef2f7;
}

main {
    flex: 1;
}

/* アニメーション */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-guide-section {    
	max-width: 1300px;    
    margin:  auto; /* 中央寄せと上下の余白 */
    padding: 0 1.5rem; /* 左右のパディング */
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    color: #374151; /* グレイッシュな基本テキスト色 */
}

/* タイトル (h2) */
.user-guide-title {
    font-size: 2.25rem; 
    font-weight: 800; 
    color: #1F2937; /* より濃いタイトル色 */
    margin-bottom: 0.5rem;
    border-bottom: 4px solid #4CAF50; /* Minifluのキーカラー */
    padding-bottom: 0.5rem;
    display: inline-block; 
}

/* 説明文 */
.user-guide-description {
    font-size: 1.125rem; /* text-lg相当 */
    color: #6B7280; /* やや薄めのテキスト色 */
    margin-bottom: 2.5rem;
}

/* ------------------ */
/* 目次 (Navigation)  */
/* ------------------ */
.user-guide-index {
    max-width: 950px;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -2px rgba(0, 0, 0, 0.06);
    margin: 0 auto 3rem;   /* ← 上下0、左右auto、下3remで中央揃え＋余白維持 */
    border-left: 6px solid #4CAF50;
    display: flex;
    flex-direction: column;
    gap: 1rem;    
}

/* ステップ1〜4 基本操作（緑背景） */
.step-green {
    background-color: #E8F5E9;
    padding: 2px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
}

/* ステップ5 プラン・追加サービス（赤系） */
.step-premium {   
    background-color: #FCE4EC; /*薄いピンク  */      
    border-radius: 8px;
    padding: 2px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ステップ6　その他機能（グレー背景） */
.step-gray {
    background-color: #ECEFF1;
    padding: 2px;
    border-radius: 8px;
}

.flow-title {
    width: 100%;
    font-size: 1.17rem;
    font-weight: bold;
    margin-left: 1rem;
    margin-top:10px;
    color: #374151;
}

.card-groups-container {
    width: 100%;   
    display: flex;
    flex-wrap: wrap; 
}

.step-group {
    padding: 0.5rem;
    border-radius: 0.75rem;    
    background-color: transparent;
}
.step-group h3 {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #374151;
}

.card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start; /* ← 左寄せにする！ */
}

.operation-card {
    width: 200px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
    border-radius: 0.75rem;
    background-color: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}
.operation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.step-label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* アイコンを上に、テキストを下に */
.card-icon {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.card-content h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
}
.card-content p {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #555;
    text-align: center;
}

.guide-block {
    /* デフォルトは非表示 */
    display: none;
	width: 100%; /* PCでの最大幅 */
    max-width: none;      /* 制限を解除 */
    margin: 0;      
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
/* アクティブ時はモーダル風に中央配置 */
.guide-block.active {
    display: block;
    position: fixed;
    z-index: 20001;
    top: 20px;                /* 例：ヘッダーの下あたりに固定 */
    left: 50%;
    transform: translateX(-50%);  /* 横だけ中央寄せ */
    width: 1300px;             /* 固定幅 */
    max-width: calc(100vw - 40px);   /* 画面が狭い時の安全マージン */
    height: min(850px, calc(100vh - 60px));
    overflow: auto;           /* はみ出したらスクロール */
    -webkit-overflow-scrolling: touch;/* iOSで慣性スクロール */
    scrollbar-gutter: stable; /* これでスクロールバーの“溝”分を常に確保して幅ブレ防止 */

    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
    padding: 16px;
}
/* ガイドブロックの小見出し */
.guide-block h3 {
    font-size: 1.875rem; 
    font-weight: 800;
    color: #374151;
    margin-bottom: 1.5rem;
    text-align: center;       /* ← 中央寄せ */
    padding-left: 0;          /* 左余白をリセット */
    border-left: none;        /* 左線を削除 */
    margin-top: 3rem;
}
.guide-block h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #374151;
    margin: 1rem 0;
    text-align: center; 
}
/* 通常の段落 */
.guide-block p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}
/* 手順リスト (ol) */
.guide-block ol {
    list-style: none; /* デフォルトの数字を非表示 */
    padding: 0;
    margin: 1.5rem 0;    
}
.guide-block ol li {
    counter-increment: guide-step; /* カウンターをインクリメント */
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px dashed #d1d5db; /* 薄い区切り線 */
    font-size: 1rem;
    line-height: 1.6;
}

.back-to-index {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;       /* 大きめの × */
    font-weight: bold;
    color: #374151;        /* ダークグレー */
    cursor: pointer;
    z-index: 20002;        /* 常に最前面 */
    transition: color 0.2s ease;
}
.back-to-index:hover {
    color: #4CAF50;        /* ホバーで緑に */
}

/* ------------------ */
/* ステップバー   */
/* ------------------ */
.step-flow {
    position: fixed;   /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;       /* 横幅いっぱいに */
    background: #fff;
    z-index: 1000;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.3rem;
    margin: 0;    
}

/* ステップボックス */
.step-box {
    background-color: #e5e7eb;
    color: #6b7280;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 1rem 2rem;
    border: 2px solid #d1d5db;
    border-radius: 0.5rem;
    min-width: 160px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
/* 現在ステップの強調 */
.step-box.active {
    background-color: #4CAF50;
    color: #fff;
    border: 2px solid #4CAF50;
}

.step-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}
.step-dots span {
    width: 8px;
    height: 8px;
    background-color: #d1d5db;/* グレー */
    border-radius: 50%;
}
/* アクティブ隣接用クラス */
.step-dots span.active-dot {
    background-color: #4CAF50 !important; /*  緑 */
}

/* -------------------------------------- */
/* メインガイドカードと見出し領域のスタイル */
/* -------------------------------------- */
/* 全体を囲むカード */
.main-guide-card {
    /* guide-content-with-nav の幅に合わせて調整 */
    max-width: 1100px; 
    margin: 40px auto 40px auto; 
    background-color: white; /* カード全体の背景を白に */
    border: 1px solid #ddd;   /* 枠線 */
    border-radius: 8px;       /* 角を丸く */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 軽い影で浮き立たせる */
    position: relative;
    z-index: 100;
}

/* ------------------ */
/* ナビゲーションボタンの固定配置 */
/* ------------------ */
.fixed-nav {
    position: absolute;          
    top: 50%;                   /* 画面上端から50%の位置 */
    transform: translateY(-50%);/* 自身の高さの半分だけ上に移動して、上下中央に配置する */
    z-index: 9999;              /* 常に最前面に表示 */
    
    /* ボタンの視認性を高めるためのスタイル */
    width: 50px; 
    height: 50px;
    border-radius: 50%;
    background-color:rgba(0, 0, 0, 0.); 
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    border: none;
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: 1.5rem; 
    transition: background-color 0.2s;
}

/* ------------------ */
/* 戻る・進むボタン   */
/* ------------------ */
/* 共通スタイル */
.prev-section,
.next-section {
    position: fixed;         /* ← absolute から fixed に */
    top: 100px;              /* ← 画面上端から100px */
    transform: none;         /* ← translateY を無効化 */
    z-index: 20002;              /* 常に最前面に表示 */
    width: 40px;
    height: 40px;
    border-radius: 50%;        /* 丸型にする */
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}
/* 矢印の文字 */
.prev-section .arrow,
.next-section .arrow {
    font-size: 1.2rem;
    color: #9e9e9e; /* 矢印はさらに薄いグレー */
    font-weight: bold;
}
/* ホバー時の効果 */
.prev-section:hover,
.next-section:hover {
    background-color: #bdbdbd; /* 少し濃いグレーに */
}
.prev-section:hover .arrow,
.next-section:hover .arrow {
    color: #ffffff; /* ホバー時は矢印を白に */
}
/* 「前へ」ボタンの位置 */
.prev-section.fixed-nav {
    left: 0; 
}
/* 「次へ」ボタンの位置 */
.next-section.fixed-nav {
    right: 0px;     
}

.heading-area h3::before {
    /* データ属性の値を取得して表示 */
    content: attr(data-sub-step);   
    display: inline-block;
    color: #4CAF50; 
    font-size: 1em; /* h3の文字より少し小さくする */
    font-weight: 700;    
    /* h3のタイトルとの間に余白を作る */
    margin-right: 10px;
}
/* 見出し領域（背景色を付ける部分） */
.heading-area {
    background-color: #e6f4ea; /* 薄いグレーや薄いブルーなど、目を引く色 */
    padding: 20px 30px;        /* 上下左右のパディング */
    border-bottom: 1px solid #e0e0e0; /* コンテンツとの境界線 */
    text-align: center;        /* h3/h4を中央揃えにする場合 */
}
.heading-area-premium{
    background-color:  #FCE4EC; /* 目次と同じ薄いピンク */
    padding: 20px 30px;        /* 上下左右のパディング */
    border-bottom: 1px solid #e0e0e0; /* コンテンツとの境界線 */
    text-align: center;        /* h3/h4を中央揃えにする場合 */
}
/* h3 と h4 のマージン調整 */
.heading-area h3, 
.heading-area h4{
    margin: 0; 
    padding: 0;    
}
.heading-area-premium h3, 
.heading-area-premium h4 {
    margin: 0; 
    padding: 0;  
    color: #e91e63;  
}

/* ------------------ */
/* 各ガイドブロック   */
/* ------------------ */
.guide-content-with-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    counter-reset: guide-step; 
}
.guide-content-with-nav {
    display: flex;
    flex-direction: column; /* ← これで縦並びに！ */
    gap: 2rem; /* セクション間の余白を調整 */
}
/* コンテンツ部分のパディング調整 (h4と一体化しないように) */
.guide-content-with-nav {
    padding: 30px; /* カード内部のパディング */    
}

/* 中央のコンテンツ */
.guide-content {
    flex: 1;             
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.section-divider {
    display: block; 
    width: 100%;
    border: none;
    border-top: 1px solid #E0E0E0;
    margin: 2rem 0;
}

.content-row {
    display: flex;            /* 内部の画像とテキストを横並びにする */
    align-items: flex-start;  /* 上揃え */
    gap: 2rem;                /* guide-contentのgapと合わせるか、調整 */
    width: 100%;              /* guide-contentの幅いっぱいに広げる */
}

/* 左側の画像 */
.guide-image-wrapper {
	flex: 0 0 auto;	
}

.guide-image {
	width: 100%;	
	height: auto;
	border-radius: 0.5rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.guide-image.custom-size {
	width: 700px;
	height: 400px;
	object-fit: contain;
}

/* 右側のテキスト */
.guide-text {
	flex: 1;
	min-width: 0px;
    font-weight: normal !important; /* 標準の太さに強制設定 */
}

/* ステップ番号"有り"のスタイル */
.guide-list-numbered {  
    list-style: none;
    padding-left: 0;
}

.guide-list-numbered.no-reset {
    counter-reset: none;
}
.guide-list-numbered li {
    display: flex;
    align-items: center;
    counter-increment: guide-step;
    margin-bottom: 1rem;
}
.guide-list-numbered li::before {
    content: counter(guide-step);
    flex-shrink: 0;
    margin-right: 1rem;
    width: 28px;
    height: 28px;
    background-color: #A5D6A7;
    color: #1B5E20;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 注意書きや補足 (note) */
.guide-note {
    background-color: #FFFBEB; /* 警告色に近い薄いイエロー */
    color: #92400E; /* 濃いブラウンの文字 */
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid #FBBF24; /* オレンジ色の強調線 */
    margin-top: 1.5rem;
    font-style: italic;
    font-size: 0.95rem;
}
ul.guide-note { 
    list-style: none; /* デフォルトの黒丸を削除 */
    padding-left: 0;  /* デフォルトの左パディングを削除 */
    margin: 15px 0;   /* 上下のマージン */
}
/* LI項目ごとの設定 */
ul.guide-note li {
    position: relative;
    padding-left: 1.2em; /* 箇条書き記号の分のパディング */
    margin-bottom: 5px;  /* 項目間のスペース */
    line-height: 1.6;
}
/* 疑似要素で「・」を挿入し、ぶら下げインデントを形成 */
ul.guide-note li::before {
    content: "・"; 
    position: absolute;
    left: 0;
    color: #CC9900; /* 注釈の色に合わせる */
    font-weight: bold;
}

.premium-link {
    color: #AD1457; /* ピンク系で親和性あり */
    font-weight: bold;
    text-decoration: underline;
}
.premium-link:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* 暗幕 */
#guide-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 20000;
    display: none;
}
#guide-backdrop.show { display: block; }

/* ---------------------- */
/* モバイル対応 (768px以下) */
/* ---------------------- */
@media (max-width: 768px) {
    .user-guide-section {
        margin: 1rem auto;
        padding: 0 1rem;
    }

    .user-guide-title {
        font-size: 1.75rem; 
    }

    .user-guide-description {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .user-guide-index {
        grid-template-columns: 1fr; /* スマホでは1列 */
        padding: 1rem;
        margin-bottom: 2rem;
    }

    .card-groups-container {
        display: flex;
        justify-content: center; /* 横方向中央揃え */
        flex-wrap: wrap;         /* 複数カードが折り返す場合 */
        margin-bottom: 20px;
    }
    
    .card-list {
        /* カード間の隙間を狭くする（例：20pxから10pxへ） */
        gap: 10px; 
        /* もしくは、カードの下部のマージンを調整 */
        margin-bottom: -10px; /* カードリスト全体の底上げが必要な場合 */
    }

    /* カード全体の幅を画面いっぱいに広げ、影や角丸を調整 */
    .main-guide-card {
        margin: 0; /* マージンを削除 */
        border: none; /* 枠線を削除 */
        border-radius: 0;
        box-shadow: none;
        margin-top: 50px !important;
    }

    /* 見出し領域のパディングをモバイル向けに縮小 */
    .heading-area,
    .heading-area-premium  {
        padding: 15px 20px;
    }
    /* h3, h4 のフォントサイズをモバイル向けに微調整 */
    .heading-area h3,
    .heading-area-premium h3 {
        font-size: 1.3rem;
        margin-bottom: 5px;
    }
    .heading-area h4,
    .heading-area-premium h4 {
        font-size: 0.9rem;
        margin-top: 0;
    }
    .heading-area h3::before {
        /* データ属性の値を取得して表示 */
        content: attr(data-sub-step);   
        display: inline-block;
        color: #4CAF50; 
        font-size: 1.1em; /* h3の文字より少し小さくする */
        font-weight: 700;    
        /* h3のタイトルとの間に余白を作る */
        margin-right: 10px;
    }

    /* コンテンツラッパーのパディングを調整 */
    .guide-content-with-nav {
        display: flex;
        flex-direction: column; 
        padding: 20px 20px 20px 20px;
    }       

    /* 1. コンテンツを囲むラッパー（.content-row）を縦並びに強制 */
    .content-row {
        display: flex; 
        flex-direction: column; 
        padding: 0;
        flex-wrap: nowrap;
    }
    
    .guide-content {
    	flex-direction: column;
    }

    /* 2. 画像ラッパーをテキストの上に配置 */
    .guide-image-wrapper {
        order: 1; 
        width: 100%; /* モバイル幅いっぱいに広げる */
		max-width: 100%;
        margin-bottom: 0px; /* テキストとの間に隙間を作る */
        /* 中央寄せのために以下を追記 */
        margin-left: auto;
        margin-right: auto;
    }    
    .guide-image,
	.guide-image.custom-size {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

    /* 3. テキストを画像の下に配置 */
    .guide-text {
	    word-break: break-word;
	    overflow-wrap: break-word;
        order: 2;
        width: 100%; 
        min-width: 0; 
        flex-shrink: 1; 
        flex-grow: 1;      
        padding: 0 10px; 
        margin-top: 0px; 
    }
    .guide-text p,
    .guide-text ol,
    .guide-text ul,
    .guide-text li {
        /* テキストがコンテナからはみ出さないように自動で折り返す */
        word-wrap: break-word; 
        overflow-wrap: break-word;
    }
    
    .guide-list-numbered {
        padding-top: 5px;   /* リスト全体の上のパディングを詰める */
        padding-bottom: 5px; /* リスト全体の下のパディングを詰める */
        margin-top: 5px;    /* 上のマージンを詰める */
        margin-bottom: 5px; /* 下のマージンを詰める */
    }

    /* guide-noteも調整 */
    .guide-note {
        padding: 8px; /* パディングを少し詰める */
        margin-top: 15px; /* 上のマージンを詰める */
        margin-bottom: 5px;
    }

    .step-gray .card-list {
        justify-content: center;
    }

    /* ステップボックスのテキスト（ステップ名）を非表示にする */
    .step-box[data-step]::before {
        /* data-step属性の値（数字）を content として表示 */
        content: attr(data-step);        
        display: block;
        font-size: 1.2rem; 
        font-weight: bold;
    }
    /* 1. ステップフロー全体の設定 */
    .step-flow {
        /* 横並びを強制 */
        flex-wrap: nowrap;        
        justify-content: center; 
        width: 100%; 
        padding: 8px 5px; 
        margin: 0 ; 
    }
    .step-box {        
        flex-shrink: 1;        
        font-size: 0; 
        min-width: 30px; 
        width: 30px;        
        height: 30px;
        border-radius: 50%; /* 円形にする */
        padding: 0;
        margin: 0 4px; 
        border-radius: 50%;
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .step-dots {
        flex-grow: 0; 
        flex-shrink: 0;
        gap: 0px;
        align-items: center; 
    }    
    .sub-count {
        display: none !important;
    }
   
    /*緑色の背景を持つ親要素 (.step-group-wrapper) の調整 */
    .step-group-wrapper.step-green {       
        margin: 0 !important;     
        
        padding-top: 20px !important; 
        padding-bottom: 40px !important;
        
        /* 幅の計算方法を統一 */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /*カードリストの横幅を親要素に合わせる */
    .step-group-wrapper .card-list {
        width: 100% !important;
    } 
    .step-group-wrapper .card-list,
    .step-group-wrapper .operation-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }    
}