@charset "shift_jis";

/* body.css */
/*
	2017 new design ver.5.0
	県サイト作成・レスポンシブ
*/
/* --------------------------------------------------
header　オリジナル修正
-------------------------------------------------- */
*{
    font-size: inherit;
}
nav.gn_add001{
    display: none;
}

    /* メインエリア上部余白 */
    .mainarea {margin-top: 5px;}

/* --- フォントの基本設定（一箇所でOK） --- */
    body, section {
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    }

     ul.Top_thema_width h2.ap {
    font-size: clamp(26px, 4vw, 30px);
    font-family: "RoundedMgenplus-medium", sans-serif;
    }

    h3 {text-align: center;}

    .TOP_LINEBOX, h2, h3 {
    font-family:
    "RoundedMgenplus-medium",
    'Zen Maru Gothic',
    'Hiragino Maru Gothic ProN',
    'ヒラギノ丸ゴ ProN W6',
    'Meiryo',
    'メイリオ',
    sans-serif;
    letter-spacing: 1px;
    }


/* --- ボタンと青色題名 --- */
    h3.toparea_BLUE_h3,
    .flowswitch_btn_area {
    font-family:
    "RoundedMgenplus-medium",
    'Zen Maru Gothic',
    'Hiragino Maru Gothic ProN',
    'ヒラギノ丸ゴ ProN W6',
    'Meiryo',
    'メイリオ',
    sans-serif;
    letter-spacing: 0px;
    }



    /* --- スライダーゾーン --- */
    h3.h3_No002B{
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    }



/* --- 文字サイズ --- */
    .top_comment,
    .kibou_comment {
    font-weight: 400;
    font-size: clamp(20px, 4vw, 22px);
    }

    .HowStart_comment001 {
    font-weight: 400;
    text-align: left;
    padding: 0 5%;
    }

    .HowStart_comment002 {
    font-weight: 400;
    text-align: center;
    padding: 0 0%;
    font-size: clamp(14px, 4vw, 16px);
    }

    .HowStart_comment003 {
    font-weight: 400;
    text-align: left;
    padding: 0 4%;
    font-size: clamp(14px, 3vw, 16px);
    }

    .HowStart_comment {
    font-weight: 400;
    text-align: left;
    padding: 0 0%;
    }

    .QA_comment { font-size: clamp(14px, 4vw, 16px);}

    .HowStart_span { color: #ff374d; }

    .HowStart_span02 {
    color: #ff374d;
    font-weight: 700;
    }

    .NEXT_comment {
    font-size: clamp(14px, 3vw, 16px);
    }

    .NEXT_comment {
    font-weight: 400;
    text-align: left;
    padding: 0 0%;
    }

    /* --- TOP等メインビジュアル右側画像 --- */
    .innnerR_PC img {
    width: 85%;
    height: auto;
    }
    /* --- LINE--- */
    .LINE_LOGO {
    font-family: "Hiragino Sans", "ヒラギノ角ゴ StdN", "Yu Gothic", YuGothic, "Meiryo", sans-serif;
    font-weight: 900;
    -webkit-text-stroke: 2px #00b800;
    }



    h3.flowswitch_Link {
    color: #ffffff;
    font-size: clamp(20px, 4vw, 22px);
    font-weight: 900;
    font-family: "RoundedMgenplus-medium", sans-serif;
    line-height: 1.3;
    }

/* -----------------------------------------------
背景のでっぱり
-------------------------------------------------- */

    .HALFMOON_Block {
    width: 100%;
    background-color: #ddf1f1;
    /* （横幅） /（膨らみの深さ） */
    border-radius: 0 0 50% 50% / 0 0 50px 50px;
    padding-bottom: 40px;
    margin-bottom: 50px;
    }

/* -----------------------------------------------
/* --- セクション全体の基本設定 --- */
/* ----------------------------------------------- */

    section.toparea_FAQ {
    background-image: url(/tokushu/mycastle/images2/back_top_SP.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column; /* スマホ・デフォルトは縦並び */
    }

/* --- コンテンツの外枠 --- */
    .toparea_TOP_outbox {
    max-width: 960px;
    width: 100%;
    height: 100%;
    margin: 5% auto 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }

/* --- テキストエリアの設定 --- */
    .toparea_TOP_innner h1.ap {
    font-size: clamp(30px, 4vw, 39px);
    margin-bottom: 5px;
    }

    .toparea_TOP_innner .thema001top {
    font-size: clamp(16px, 4vw, 18px);
    margin-bottom: 10px;
    }

    .toparea_TOP_innner .thema001 {
    font-size: clamp(12px, 3vw, 14px);
    }

    /* --- 箇条書きコメントの調整 --- */
    ul.kibou_comment {
    font-size: clamp(14px, 4vw, 16px);
    text-align: left;
    }

    /* --- 画像エリアの調整（スマホ含む） --- */
    .toparea_App_innnerR_SF {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    }

    .toparea_App_innnerR_SF img {
    width: 100%;
    max-width: 450px;
    height: auto;
    display: block;
    padding: 0px 0 0;
    }

    /* --- 予備のダミー用 --- */
    .br_dummy {
    display: block;
    }

/* -----------------------------------------------
/* --- セクションに関わる基本設定 --- */
/* ----------------------------------------------- */

/* --- 1. 背景画像・タイトルエリア (H3小テーマ背景) --- */
    section.toparea_FLOW_H3body,
    section.toparea_HOWStart_H3body,
    section.area_SHOPTEL_H3body,
    section.area_PANKUZU_H3body {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    }

    section.toparea_FLOW_H3body {
    background-size: 400px auto;
    background-position: center center;
    background-color: #ddf1f1;
    background-image: url(/tokushu/mycastle/images2/back_h2_PC.png);
    height: 200px;
    padding: 20px 0;
    }

    section.toparea_HOWStart_H3body {
    background-color: #ffffff;
    background-image: url(/tokushu/mycastle/images2/back_h3_PC.png);
    height: 220px;
    padding: 2% 0;
    }

    section.area_SHOPTEL_H3body {
    background-color: #ffffff;
    background-image: url(/tokushu/mycastle/images2/back_h3_PC002.png);
    padding: 2% 0;
    }

    section.area_PANKUZU_H3body {
    background-color: #ffffff;
    padding: 2% 0;
    }

    /* --- 2. 基本セクション (白背景・水色背景) --- */
    section.toparea_HowStrat_body,
    section.toparea_FLOW_Block003 {
    background-color: #ffffff;
    padding-bottom: 10px;
    }

    section.toparea_FLOW_bodyHead
    {
    background-color: #ffffff;
    padding-bottom: 0px;
    }

    section.toparea_FLOW_body {
    background-color: #ddf1f1;
    padding-bottom: 10px;
    }

    /* 上記セクション共通のレイアウト */
    section.toparea_FLOW_bodyHead,
    section.toparea_HowStrat_body,
    section.toparea_FLOW_body {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    }

    section.toparea_FLOW_Block003 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    flex-direction: column;
    }


/* -----------------------------------------------
/* --- 3. 特定のテキスト・見出しスタイル --- */
/* ----------------------------------------------- */


    /* メインタイトル  */
    section.toparea_FAQ h1 {
    color: #ff374d;
    font-size: clamp(20px, 4vw, 25px);
    background-image: none;
    padding: 0px 0;
    font-family: "RoundedMgenplus-medium", sans-serif;
    }

/* メインタイトル　テキストエリア */
    .toparea_TOP_innner{
    width: 96%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    margin: 0 auto 30px;
    padding: 20px 0;
    background-color: rgba(255, 255, 255, 0.5);
    }


    /* TOP青背景のサブタイトル */
    ul.Top_thema_width h2.ap {
    color: #ffffff;
    background-color: #0050b3;
    background-image: none;
    padding: 10px 0;
    }

    /* 案内テキストエリア */
    ul.tophead_txt_inner {
    padding: 2%;
    margin: 0 auto;
    }


/* --------------------------------------------------
    /* TOP青背景のサブタイトル */
/* ----------------------------------------------- */

    div.txt_area_tophead {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0px;
    width: 90%;
    margin: 0 auto 15%;
    padding: 3%;
    box-sizing: border-box;
    background-color: #0050b3;
    }

    p.top_comment {
    color: #ffffff;
    background-color: #0050b3;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.8em;
    padding: 10px 2%;
    text-align: left ;
    }

/* --------------------------------------------------
	 /*SLIDER　ZONE*/
        /* TOP青背景のサブタイトル */
/* ----------------------------------------------- */

    section.toparea_SLIDER_body {
    background-color: #ddf1f1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding-bottom: 10px;
    }

    #contents_No002 {
    width: 100%;
    padding: 30px 0 0;
    }

    /* --- 横スクロール（スライダー）の仕組み --- */
    #contents_No002 UL.contentsNo002_list {
    padding: 5px 10px;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS用スムーズスクロール */
    display: flex;
    gap: 10px;
    list-style: none;
    scrollbar-width: none; /* Firefox用スクロールバー非表示 */
    }

    #contents_No002 UL.contentsNo002_list::-webkit-scrollbar {
    display: none; /* Chrome, Safari用スクロールバー非表示 */
    }

    /* スライダーの左右の余白（最初と最後） */
    #contents_No002 UL.contentsNo002_list > li:first-child { margin-left: 1vw; }
    #contents_No002 UL.contentsNo002_list > li:last-child { padding-right: 1vw; }

    /* --- スライダー内のカード（li）のデザイン --- */
    li.No002_itembox1 {
    min-width: 65vw;
    max-width: 250px;
    height: auto;
    padding: 10px 0px;
    border-radius: 4px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
    scroll-snap-align: center;
    transition: all .6s;
    position: relative;
    }

    /* 画像の基本設定 */
    .itembox1_img img {
    width: 100%;
    display: block;
    }


/* --------------------------------------------------
#contents_No002 No003 No004　スライダー箇所 --
-------------------------------------------------- */
/* --- 1. カード全体のレイアウト（高さを揃える魔法） --- */
    .contentsNo002_list li.No002_itembox1 {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
    }

 /* --- 2. 画像エリア --- */
    .contentsNo002_list li .itembox1_img {
    flex-shrink: 0; /* 高さを削られないように固定 */
    text-align: center;
    margin-bottom: 10px;
    }


/* --- カード内画像 直接--- */
    .contentsNo002_list li .itembox1_img img,
    .contentsNo003_list li .itembox1_img img,
    .contentsNo004_list li .itembox1_img img {
    display: block;
    margin: 0 auto;
    object-fit: cover;
    width: auto;
    height: 400px;
    }

/* --- 3. テキスト本文エリア（可変エリア） --- */
    .contentsNo002_list li .wordbox_002 {
    flex-grow: 1; /* 重要：余ったスペースを埋めて、下の要素を押し下げる */
    text-align: left;
    padding: 0% 2%;
    }

/* カード内の見出し（青文字） */
    .wordbox_002 h3 {
    font-size: clamp(16px, 4vw, 18px);
    width: 100%;
    padding: 10px 0px;
    font-weight: bold;
    line-height: 1.6em;
    color: #0050b3;
    text-align: left;
    }

    .wordbox_002 h3 small {
        line-height: 1.5em;
        display: block;
        font-size: 12px;
    }

/* -------------------------------------------------*/
/* --- 4. ボタンエリア（最下部固定） --- */
/*------------------------------------------------- */
/* --- 1. カプセルボタンスイッチ --- */
    .topAPP_BTN {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0 0%;
    }

    .btn_row_container {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0 0%;
    }

    .flowswitch_btn_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px 0%;
    box-sizing: border-box;
    }

    .capsule_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 94%;
    min-height: 70px;
    margin: 0px auto;
    padding: 0 20px;
    background-color: #ffffff;
    border: 3.5px solid #ff374d;
    border-radius: 50px; /* 左右を丸める */
    color: #000000;
    font-size: clamp(22px, 4.5vw, 24px);
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
    transition: all 0.3s ease;
    box-sizing: border-box;
    }

    /* 右端の矢印（逆くの字） */
    .capsule_btn::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-top: 3px solid #ff374d;
    border-right: 3px solid #ff374d;
    transition: 0.3s;
    }

    /* ホバー設定 */
    .capsule_btn:hover {
    background-color: #fffef5;
    color: #333;
    text-decoration: none;
    }

    .capsule_btn:hover::after {
    text-decoration: none;
    }

    .contentsNo002_list li .btnbox_003 {
    flex-shrink: 0;
    margin-top: auto; /* wordbox_002が伸びることで、必ず最下部に来る */
    padding: 15px 5px;
    text-align: center;
    }

    /* --- 5. 補助的な装飾 --- */
    span.txt_box {
    font-size: clamp(16px, 4vw, 18px);
    width: 100%;
    line-height: 1.7em;
    display: block;
    padding: 0 10px 10px 10px;
    }


    /* --- 1. ボタン共通の矢印（魔法の共通化） --- */
    .No001area_btn_single a::after,
    .No001area_btn a::after,
    .No002area_btn a::after,
    .No006area_btn_single a::after {
    content: '';
    position: absolute;
    top: 57%;
    right: 5%;
    margin-top: -4px;
    transform: translateY(-50%) rotate(315deg);
    width: 7px;
    height: 7px;
    }

    /* 矢印の色：基本は青、No002（スライダー内）だけ白 */
    .No001area_btn_single a::after,
    .No001area_btn a::after,
    .No006area_btn_single a::after {
    border-right: 2px solid #0050b3;
    border-bottom: 2px solid #0050b3;
    }
    .No002area_btn a::after {
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    }

    p.cortion {
    font-size: clamp(14px, 4vw, 16px);
    padding: 0 5px 10px 5px;
    color: #000000;
    }


    /* --- 2. 白背景のボタン（No001系・No006） --- */
    .No001area_btn_single a,
    .No001area_btn a,
    .No006area_btn_single a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: #00758f;
    border: 1px solid #0050b3;
    border-radius: 30px;
    box-shadow: 0 2px 4px #cccccc;
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
    line-height: 1.2;
    }

    .No001area_btn_single a { min-width: 250px; min-height: 50px; font-weight: 700; }
    .No001area_btn a { width: 100%; max-width: 600px; min-height: 60px; font-weight: 800; }
    .No006area_btn_single a { width: 100%; min-width: 300px; min-height: 50px; font-weight: 700; font-size: 20px; }

    /* --- 3. スライダー内のカラーボタン (No002) --- */
    .No002area_btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    min-height: 70px;
    border-radius: 25px;
    margin: 0 auto;
    box-shadow: 0 2px 4px #cccccc;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    transition: all 0.2s;
    position: relative;
    }

    /* ボタン色バリエーション */
    .No002area_btn a.btn_a { background-color: #ff2b59; } /* ピンク */
    .No002area_btn a.btn_b { background-color: #00ba5a; } /* 緑 */
    .No002area_btn a.btn_c { background-color: #0050b3; } /* 青 */

    /* --- 4. 補助レイアウト --- */
    .button-containerQA_single.sm-only,
    .button-containerQA_duble.sm-only {
    display: flex;
    justify-content: center;
    }


    /* --- 1. 不要な要素の非表示 --- */
    .top_imgWoman {
    display: none;
    }

    /* --- 2. 見出し（h2, h3）共通設定 --- */
    h2, h3 {
    font-family: "RoundedMgenplus-medium", sans-serif;
    letter-spacing: 0px;
    }

    /* --- 3. セクションごとの見出しスタイル --- */
    /* FAQセクションのh2 */
    section.toparea_FAQ h2 {
    padding: 5px 0;
    color: #333;
    background-color: #ffffff;
    font-size: 2.5rem;
    background-image: none;
    text-align: center;
    }

    /* 青文字の特別なh2 */
    section.toparea_FAQ h2.top_page {
    color: #0050b3;
    font-size: 2.188rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 100%;
    }

/* 白文字・特大の見出し (AppDL用) */
    h3.toparea_AppDL_h3 {
    color: #ffffff;
    font-size: clamp(2.438rem, 2.313rem + 0.33vw, 2.5rem);
    font-weight: 900;
    padding: 20px 0;
    line-height: 1.8em;
    margin-bottom: 2%;
    }

    /* FAQセクションのh3 */
    h3.toparea_FAQ_h3 {
    width: 100%;
    color: #ffffff;
    font-size: clamp(1.875rem, 1.625rem + 1.33vw, 2.125rem);
    font-weight: 900;
    }

    /* 青色・濃い色のh3 */
    h3.toparea_BLUE_h3 {
    width: 100%;
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.4em;
    margin: 10px 0;
    color: #0050b3;
    letter-spacing: 0.0em;
    }

    /* 緑色（WHITERED?）のh3 */
    h3.toparea_WHITERED_h3 {
    width: 100%;
    font-size: clamp(2.25rem, 2.188rem + 0.33vw, 2.313rem);
    font-weight: 900;
    margin: 0 0 10px 0;
    color: #00b800;
    }

/* --- 4. コンテナ・レイアウト設定 --- */
    .topAPP_1024px,
    .topAPP002_1024px {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0 4%;
    }

    .topAPP_1024px {
    justify-content: center;
    align-content: center;
    }

    .topAPP_1024px_bar {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0 0%;
    }

    .topAPP_1024px_bar {
    justify-content: center;
    align-content: center;
    }

    /* --- 1. h4 見出しシリーズ --- */
    h4.thema_top,
    h4.thema_type02,
    h4.box_blue_thema {
    color: #0050b3;
    font-family: "RoundedMgenplus-medium", sans-serif;
    text-align: left;
    display: flex;
    align-items: center;
    }

    h4.thema_top {
    flex-grow: 1;
    font-size: clamp(2.063rem, 2rem + 0.33vw, 2.188rem);
    font-weight: 300;
    margin: 0;
    line-height: 1.2;
    }

    h4.thema_type02 {
    font-size: 1.75rem;
    font-weight: 300;
    margin: 7px 0;
    line-height: 2rem;
    }

    h4.box_blue_thema {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 300;
    line-height: 1.4em;
    }

/* --- 2. アプリダウンロードエリア --- */
    .foot_AppDL_area {
    background-color: #E50012;
    padding: 0 0 2% 0;
    text-align: center;
    }

    ul.AppDL_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    width: 100%;
    max-width: 960px;
    background-color: #ffffff;
    padding: 2%;
    margin: 0 auto;
    border-radius: 10px;
    }

    .AppDL_inner img {
    width: 160px;
    height: auto;
    }

    .AppDL_inner > li:nth-child(3) {
    width: 100%;
    text-align: center;
    font-size: 1.1em;
    }

    /* --- 3. 左右レイアウトコンテナ & 箇条書き --- */
    .LR_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    }

    ul.R {
    width: 90%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    }

    ul.R img {
    width: 100%;
    height: auto;
    margin: auto;
    }

    ul.R img.lineimg {
    width: 100%;
    max-width: 350px;
    height: auto;
    margin: auto;
    }

    /* 箇条書き共通 */
    ul.kibou_comment,
    ul.LINE_comment {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    }

/* kibou_comment (■つき) */
    ul.kibou_comment {
    font-size: clamp(14px, 4vw, 16px);
    padding: 5% 0;
    }

    ul.kibou_comment li.box_white_innner02{
    position: relative;
    padding: 0 0 0 20px;
    }
    ul.kibou_comment li.box_white_innner02 small{
        font-size: 12px;
        color: #666;
        display: block;
    }

    ul.kibou_comment li.box_white_innner02::before {
    content: "■";
    position: absolute;
    left: 0;
    font-size: 0.8em;
    top: 0.1em;
    }

    ul.LINE_comment li.box_white_innner02 {
    position: relative;
    /* padding-left: 1.2em; */
    line-height: 1.6;
    margin-bottom: 5px;
    width: 90%;
    max-width: 960px;
    margin: 0 auto 5% auto;
    font-size: clamp(14px, 3vw, 16px);
    }

/* --- 4. フォント・装飾パーツ --- */
    .font_size_small {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    vertical-align: baseline;
    }

    .font_size_MID {
    font-size: clamp(1.438rem, 1.334rem + 0.52vw, 1.625rem);
    }

    /* --- 2. 注意書き・画像調整 --- */
    .TOP_002blocks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 2% 5% 5% 5%;
    padding: 5%;
    text-align: left;
    color: #666666;
    background-color: #ebebeb;
    font-size: 12px;
    }

    .txt_yellow { color: #ffff22; }

    /* --- 1. 余白調整（スペーサー） --- */
    .sp_txtBox01 { padding-left: 10px; }
    .sp_mb5px  { margin-bottom: 5px; }
    .sp_mb10px { margin-bottom: 10px; }
    .sp_mb20px { margin-bottom: 20px; }
    .sp_mb40px { margin-bottom: 40px; }
    .sp_mL20px { margin-left: 20px; }
    .sp_mL40px { margin-left: 40px; }
    .sp_mL50px { margin-left: 50px; }
    .sp_mL60px { margin-left: 60px; }

    /* --- 2. スマホ向けナビゲーション --- */
    .test_gm001 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    height: 55px;
    }

    .test_gm001 li {
    flex-grow: 1;
    height: 100%;
    background-color: #dcdddd;
    margin-right: 1px;
    }

    .test_gm001 li:last-child { margin-right: 0; }
    .test_gm001 li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #000;
    text-decoration: none;
    }

    .test_gm001 li a img {
    display: block;
    margin-top: 10px;
    max-width: 100%;
    }

    /* --- 3. リンク付き見出しエリア --- */
    .topix_title_gaid {
    display: flex;
    align-items: center;
    gap: 5px;
    }



    .flowswitch_Link a {
    text-decoration: none;
    color: #0B79C4;
    }

    .flowswitch_Link a:hover {
    color: #f4a913;
    }

/* --- 4. 共通ブロック設定 (HOWSTART / LINE / POINT) --- */
    .bold { font-size: clamp(30px, 5vw, 36px); }

    .TOP_point01 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 960px;
    margin: 0% 0;
    padding: 0;
    border-radius: 10px;
    }

    .TOP_LINEBOX {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 960px;
    padding: 3% 0;
    border-radius: 10px;
    }

    .LINE_point01 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 960px;
    margin: 0% 0;
    padding: 3% 0;
    border-radius: 10px;
    }

    /* LINEデザインパーツ */
    .TOP_LINEBOX ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    list-style: none;
    width: 100%;
    }

    .TOP_LINEBOX li {
    font-size: clamp(28px, 4vw, 32px);    
    line-height: 1.2;
    }

    .line_txt { color: #00b800; }

    .TOP_LINEBOX .line_circle {
    background-color: #00b800;
    color: #ffffff;
    width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: clamp(20px, 3vw, 24px);
    margin: -5px 0;
    }

    .LINE_LOGO { font-size: clamp(40px, 4vw, 45px); }


/* --- 2. 矢印型パンクリスト（Mobile First） --- */
.LR_container_UD {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.breadcrumb_container {
display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0 0px 0;
    justify-content: center;
    /* はみ出しを絶対に許さない設定 */
    overflow: hidden;
    box-sizing: border-box;
}

.breadcrumb_icon {
/* 1. 高さを50pxから少し下げて「40px」程度にするとスマホで収まりが良くなります */
    height: 60px;
    width: auto;

    /* 2. 画面幅いっぱいに広がるのを許可しつつ、歪ませない */
    max-width: 100%;
    object-fit: contain;

    /* 3. Flexボックスの中で縮みすぎないように調整 */
    flex-shrink: 1;
}

.breadcrumb-arrow {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    background-color: #fff;
}

/* 矢印の各ステップ */
.breadcrumb-arrow li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 10px 40px 10px 35px;
    min-height: 80px;
    margin-left: -25px; /* 前の要素と重ねる */
    /* 形状切り抜き */
    clip-path: polygon(0% 0%, calc(100% - 35px) 0%, 100% 50%, calc(100% - 35px) 100%, 0% 100%, 35px 50%);
}

.breadcrumb-arrow li:first-child {
    margin-left: 0;
    padding-left: 10px; /* 左端の形に合わせて微調整 */
    clip-path: polygon(0% 0%, calc(100% - 35px) 0%, 100% 50%, calc(100% - 35px) 100%, 0% 100%);
}

/* リンクテキスト設定（2行制限） */
.breadcrumb-arrow a {
    text-decoration: none;
    font-weight: 900;
    font-size: clamp(16px, 3.5vw, 20px);
    line-height: 1.25;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ステップの色分け */
.step_light_blue { background-color: #e0f2f7; color: #333 !important; }
.step_red        { background-color: #ff0000; color: #fff !important; }
.step_light_blue a { color: inherit !important; }
.step_red a        { color: inherit !important; }

/* --------------------------------------------------
   window size 600px - (Tablet & Wide Mobile)
-------------------------------------------------- */
@media screen and (min-width: 600px) {
    /* メインエリア上部余白 */
    .mainarea { margin-top: 0; }




    /* --- 1. 見出し（h2, h3）のサイズアップ --- */
    section.toparea_FAQ h2 {
        font-size: 3.5rem;
        padding: 5px 0;
        text-align: center;
    }

    section.toparea_FAQ h2.top_page {
        font-size: clamp(2.5rem, 2.3rem + 0.8vw, 3.5rem);
        gap: 5px;
    }

    .toparea_TOP_innner{
    width: 100%;
    max-width: 600px;
    display: flex;
	flex-direction: column; /* ← ここを追加（縦並びにする） */
    margin: 0% ;
    padding: 2%;
background-color: rgba(255, 255, 255, 0.5);
}

    /* h3シリーズ共通 */
    h3.toparea_RED_h3,
    h3.toparea_AppDL_h3 {
        font-size: clamp(2.438rem, 2.313rem + 0.33vw, 2.5rem);
        font-weight: 900;
        margin-top: 20px;
    }

    h3.toparea_FAQ_h3 {
        font-size: clamp(1.875rem, 1.625rem + 1.33vw, 2.125rem);
    }

    /* --------------------------------------------------
	TOP txt Block
-------------------------------------------------- */

div.txt_area_tophead {

    width: 100%;
    max-width: 600px;
    margin: 0 auto 15%;

}

    /* --- 2. スライダー（No002）の調整 --- */
    .No002a_inner {
        padding: 80px 4% 10px 4%;
    }



    .No002_txtBlock {
        font-size: clamp(16px, 4vw, 18px);
        line-height: 1.7em;
        padding-bottom: 20px;
    }


    /* --- 2. LINE のエリア調整 --- */
    ul.LINE_comment li.box_white_innner02 {
    position: relative;
    /* padding-left: 1.2em; */
    line-height: 1.6;
    margin-bottom: 5px;
    width: 90%;
    max-width: 600px;
    margin: 0 auto 5% auto;
    font-size: clamp(14px, 4vw, 16px);
}

    /* --- 3. アプリダウンロードエリア --- */
    .foot_AppDL_area {
        max-width: 1024px;
        height: 280px;
        margin-bottom: 2%;
    }

    ul.AppDL_inner {
        max-width: 1024px;
        padding: 2%;
    }

    /* --- 4. パンクズ（矢印）の形状変更 --- */

    .breadcrumb_container {
justify-content: flex-start;
        padding: 0 0px 15px 0px;
    }
.breadcrumb_icon {
        /* スマホでは高さをさらに少しだけ調整して、横幅を稼ぎます */
        height: 70px;
        /* 左右に少し余裕を持たせる */
        width: 100%;
    }

    .breadcrumb-arrow li {
        min-height: 90px;
        padding: 0 55px 0 50px;
        margin-left: -40px; /* 形状に合わせて重ねを深く */
        /* PC向けに鋭角を50pxへ調整 */
        clip-path: polygon(0% 0%, calc(100% - 50px) 0%, 100% 50%, calc(100% - 50px) 100%, 0% 100%, 50px 50%);
    }

    .breadcrumb-arrow li:first-child {
        clip-path: polygon(0% 0%, calc(100% - 50px) 0%, 100% 50%, calc(100% - 50px) 100%, 0% 100%);
        padding-left: 20px;
    }

    .breadcrumb-arrow a {
        font-size: clamp(20px, 4vw, 22px);
    }



/* --------------------------------------------------
	SLIDER　ZONE
-------------------------------------------------- */

    /* スライダーカードの横幅（少し大きく） */
    #contents_No002 li.No002_itembox1 {
        min-width: 40vw;
        background: #ddf1f1;
    }

    /* スライダー内ボタンのサイズアップ */
    .No002area_btn a {
        max-width: 600px;
        min-height: 70px;
        border-radius: 50px;
        font-size: clamp(16px, 4vw, 18px); /* 文字を大きく */
        padding: 5px 50px 5px 20px;
    }




/* --- スライダーセクション全体 --- */
section.toparea_SLIDER_body {
    background-color: #ddf1f1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding-bottom: 10px;
}

#contents_No002 {
    width: 100%;
}

/* --- 横スクロール（スライダー）の仕組み --- */
#contents_No002 UL.contentsNo002_list {
    padding: 5px 10px;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS用スムーズスクロール */
    display: flex;
    gap: 15px;
    list-style: none;
    scrollbar-width: none; /* Firefox用スクロールバー非表示 */
}
#contents_No002 UL.contentsNo002_list::-webkit-scrollbar {
    display: none; /* Chrome, Safari用スクロールバー非表示 */
}

/* スライダーの左右の余白（最初と最後） */
#contents_No002 UL.contentsNo002_list > li:first-child { margin-left: 1vw; }
#contents_No002 UL.contentsNo002_list > li:last-child { padding-right: 1vw; }


/* 画像の基本設定 */



        .wordbox_002 h3 {
        font-size: clamp(16px, 4vw, 18px);
        line-height: 1.4em;
        padding: 10px;
        text-align: left;
    }



}


/* --------------------------------------------------
    window size 900px -
-------------------------------------------------- */
@media screen and (min-width: 900px) {

    /* --- 1. パンクズ（矢印）の最終調整 --- */
    .breadcrumb_container {
        gap: 0px; /* 隙間を広げてゆったりと */
    }

    .breadcrumb_icon {
        height: 75px; /* アイコンを最大サイズに固定 */
    }

    .breadcrumb-arrow li {
        min-height: 65px; /* PCでは高さを抑えてスマートに */
    }

    /* --- 2. レイアウトの固定（必要に応じて追加） --- */
    /* ここに .mainarea { max-width: 1024px; margin: 0 auto; }
       などが入ると、画面がどこまでも広がらずに中央に固定されます。
    */
}

/* --------------------------------------------------
-----------------------------------------------------
window size 900-
-----------------------------------------------------
-------------------------------------------------- */
@media screen and (min-width:900px){
    /* メインエリア上部余白 */
    .mainarea {margin-top: 100px;}

    /* FAQ見出し（共通設定） */
    h3.toparea_FAQ_h3 {
    color: #ffffff;
    font-weight: 900;
    font-family: "RoundedMgenplus-medium", sans-serif;
    }

    /* --- TOPテキストエリアの設定 --- */
    .toparea_TOP_innner h1.ap {
    font-size: clamp(40px, 4vw, 42px);
    padding: 10px 0;
    }

    /* --- TOP画像 & テキストエリア共通レイアウト --- */
    .toparea_TOP_outbox {
    display: flex;
    flex-direction: row;      /* PCで横並び */
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
    }

    /* 個別調整：全体の外枠 */
    .toparea_TOP_outbox {
    gap: 15px;
    padding: 5% 0 0 0;
    }

    /* 個別調整：青背景のヘッドエリア */
    div.txt_area_tophead {
    display: flex;           /* 横並びにする */
    flex-direction: row;      /* 左から右へ並べる */
    align-items: center;      /* 上下の中央を揃える */
    justify-content: center;  /* 全体を中央に寄せる */
    gap: 30px;                /* 画像とテキストの間の隙間 */

    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1% 0;
    box-sizing: border-box;
    background-color: #0050b3; /* 以前の青背景を維持 */
    }

    .toparea_TOP_outbox {
    display: flex;
    flex-direction: row;      /* PCで横並び */
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    box-sizing: border-box;
    }

    /* --- 内部要素のスタイル --- */
    .Top_thema_width {
    width: 100%;
    margin: 0;
    }

    .toparea_TOP_innner {
    max-width: 50%;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
    }

    /* 左側：画像 */
    ul.top_img_inner {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    .top_imgWoman {
        width: 100%;
        max-width: 350px;
        height: auto;
        display: block;
    }

    ul.top_img_inner img {
    width: 100%;
    max-width: 150px;
    height: auto;
    display: block;
    }

    /* 右側：テキスト */
    ul.top_txt_inner {
    width: 65%;
    background-color: #0050b3;
    padding: 0%;
    text-align: left;
    list-style: none;
    }

    /* --- 1. 背景画像があるセクション（高さ固定） --- */
    section.toparea_FLOW_H3body {
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 8% 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    }

    section.toparea_HOWStart_H3body {
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2% 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    }

    /* --- 2. 背景画像がないセクション（自然な隙間） --- */
    section.area_SHOPTEL_H3body,
    section.area_PANKUZU_H3body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 0; /* heightの代わりに上下の余白で隙間を作る */
    background-color: #ffffff;
    }

        /* --- 2. 各セクション個別の設定（背景色・画像） --- */
        section.toparea_FLOW_H3body {
        background-size: 500px auto;
        background-position: center center;
        background-color: #ddf1f1;
        background-image: url(/tokushu/mycastle/images2/back_h2_PC.png);
        }

        section.toparea_HOWStart_H3body {
        background-color: #ffffff;
        background-image: url(/tokushu/mycastle/images2/back_h3_PC.png);
        }

        section.area_SHOPTEL_H3body,
        section.area_PANKUZU_H3body {
        background-color: #ffffff;
        /* 背景画像がない場合は背景色のみ */
        }

        section.toparea_FLOW_bodyHead
        {
        background-color: #ffffff;
        padding-bottom: 5%;
        }

/* --------------------------------------------------
	スライダー関連
-------------------------------------------------- */

    h3.toparea_BLUE_h3 {
    font-size: clamp(40px, 4vw, 45px);
    letter-spacing: 0.0em;
    
    }

/* スライダーの左右の余白（最初と最後） */
#contents_No002 UL.contentsNo002_list > li:first-child { margin-left: 0vw; }
#contents_No002 UL.contentsNo002_list > li:last-child { padding-right: 0vw; }

/* --------------------------------------------------
	並列箇所
-------------------------------------------------- */

    h2.ap {
    text-align: left;
    }

    /* --- 1. 並列配置（ボックス） --- */
    .TOP_point01 {
    width: 40%;
    max-width: 960px;
    margin: 2% 0;
    padding: 1.5%;
    border-radius: 10px;
    display: flex;
    flex-direction: column; /* ボックス内部は縦並び */
    background-color: #ddf1f1;
    align-items: center;
    }

    /* --- 2. 箇条書き・画像調整 --- */
    ul.R img {
    max-width: 75%;
    height: auto;
    display: block;
    }

    /* --- 2. 注意書き・画像調整 --- */
    .TOP_002blocks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 850px;
    margin: 2% 0 5% 0;
    padding: 8%;
    text-align: left;
    background-color: #ebebeb;
    }

    .TOP_002blocks {
    font-size: clamp(14px, 4vw, 14px);
    }

    /* --- 3. 横並びコンテナ（Flexbox） --- */
    /* 中央寄せのコンテナ */
    .topAPP_1024px,
    .topAPP_LINE {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0;
    }

        .topAPP_1024px_bar {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0;
    }

    .topAPP_1024px { max-width: 900px; }
        .topAPP_1024px_bar { max-width: 900px; }
    .topAPP_LINE { max-width: 600px; }

    /* 両端寄せのコンテナ */
    .topAPP002_1024px {
        width: 100%;
        max-width: 900px;
        display: flex;
        flex-direction: row;
          justify-content: space-around;
        padding: 0;
    }

    /* 画像とテキストの横並び（上揃え） */
    .LR_container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: auto;
    }

    /* --- 4. その他微調整 --- */
    img.top_imgWoman {
    display: block;
    }

    .TOP_LINEBOX ul {
    gap: 15px;
    }

/* --- 全体幅とリストの基本設定 --- */
    #contents_No002 {
    width: 100%;
    }

    #contents_No002 UL.contentsNo002_list,
    #contents_No003 UL.contentsNo003_list,
    #contents_No004 UL.contentsNo004_list {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    -webkit-overflow-scrolling: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    list-style: none;
    border: 0;
    width: 100%;
    max-width: 1024px;
    margin: auto;
    }

    /* --- テキスト装飾 --- */
    .No002_txtBlock, .No003_txtBlock, .No004_txtBlock {
    width: 80%;
    margin: 0 auto;
    padding: 0 0 20px 0;
    line-height: 1.7em;
    }

    span.txt_box {
    line-height: 1.7em;
    }

    /* --- 各カードのサイズ調整 --- */
    /* No002, No004共通（2列） */
    #contents_No002 li.No002_itembox1,
    #contents_No004 li.No004_itembox1 {    

    height: auto;
    padding: 10px 10px;
    transition: all .6s;
    background: #ddf1f1;
    width: 33%;
    min-width: inherit;
    max-width: inherit;
    }

    #contents_No004 li.No004_itembox1 {
    background: #ffffff;
    padding: 50px 10px;
    }

    /* No003共通（3列） */
    #contents_No003 li.No003_itembox1 {
    min-width: 33%;
    padding: 40px 0;
    }

    /* 特殊指定（50%上書き分） */
    #contents_No002 li.No003_itembox1,
    #contents_No004 li.No003_itembox1 {
        max-width: 50%;
    }

    /* 余白のリセット */
    #contents_No002 UL.contentsNo002_list > li:last-child { padding-right: 0vw; }
    #contents_No003 UL.contentsNo003_list > li:first-child,
    #contents_No004 UL.contentsNo004_list > li:first-child { margin-left: 0vw; }

    /* --- カード内画像 --- */
    .contentsNo002_list li .itembox1_img img,
    .contentsNo003_list li .itembox1_img img,
    .contentsNo004_list li .itembox1_img img {
        width: auto;
        height: 420px;
    }
}

/* --------------------------------------------------
-----------------------------------------------------
window size 900-
-----------------------------------------------------
-------------------------------------------------- */
@media screen and (min-width: 900px) {


/* --- 1. カード内テキスト・見出しの余白調整 --- */
    .wordbox_001 h3 { padding: 0 0 20px 0; }
    .No.No003a_inner { padding: 60px 2% 0 2%; }
    .wordbox_002 h3 { padding: 10px 0px 5px 0px; }

    .wordbox_002 h3,
    .wordbox_003 h3,
    .wordbox_004 h3 {
    text-align: left;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.6em;
    }

    .titleBlock_No002 { padding: 40px 0 0 0; }
    .titleBlock_No004 { padding: 80px 0 0 0; }

    /* --- 2. ボタン共通スタイル --- */
    .No002area_btn a,
    .No003area_btn a,
    .No004area_btn a {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    max-width: 600px;
    min-height: 70px;
    margin: 0 auto;
    padding: 5px 20px 5px 10px;
    border-radius: 50px;
    box-shadow: 0 2px 4px #cccccc;
    text-align: left;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    transition: all 0.2s;
    position: relative;
    }

    /* ボタンごとの個別フォントサイズ調整 */
    .No002area_btn a.btn_a,
    .No002area_btn a.btn_b,
    .No002area_btn a.btn_c {
    font-size: clamp(16px, 4vw, 18px);
    }

    .No002area_btn a.btn_c {
    letter-spacing: -0.08rem;
    }

    section.toparea_FLOW_Block003 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    flex-direction: column;
    }

/* --------------------------------------------------
		h3
-------------------------------------------------- */

    h3.toparea_FAQ_h3 {
    width: 100%;
    color: #ffffff;
    font-size: clamp(2.563rem, 2.506rem + 0.1vw, 2.625rem); /* size 41px-42px 900px-1900px */
    font-weight: 900;
    font-family: "RoundedMgenplus-medium", sans-serif;
    }

    h3.toparea_RED_h3 {
    width: 100%;
    font-size: clamp(2.563rem, 2.506rem + 0.1vw, 2.625rem);
    font-weight: 900;
    margin:0 0 10px 0;
    letter-spacing: 0px;
    color: #ffffff;
    font-family: "RoundedMgenplus-medium", sans-serif;
    }

    h3.fontsize_REDback_h3 {
    letter-spacing: 0px;
    }

    .TOP_002blocks {
    padding: 3%;
    }

/* --------------------------------------------------
	HOW_START
-------------------------------------------------- */
    ul.bottom_B{
    width: 90%;
    text-align: left;
    }

/* --------------------------------------------------
	LINE_BLOCK
-------------------------------------------------- */

    .LINE_LOGO {
    font-size: clamp(65px, 4vw, 70px);
    }


    .TOP_LINEBOX li {
    font-size: clamp(35px, 4vw, 45px);
    line-height: 1.2;
    }

    ul.R img.lineimg {
    width: 100%;
    max-width: 450px;
    height: auto;
    margin: auto;
    }

/* --------------------------------------------------
-----------------------------------------------------
FAQ　Add　20250207
-----------------------------------------------------
-------------------------------------------------- */

    h3.fontsize_REDback_h3 {
    letter-spacing: 0px;
    }


/* --------------------------------------------------
    TOP	width
-------------------------------------------------- */
    br.br_dummy{
    display: none;
    }

    .Top_thema_width{
    width:100% ;
    }

    .toparea_App_innnerR_PC img {
    width: 100%;
    height: auto;
    }

    /* ---------ＭＩＮＩＭＩＮＩ　ロゴ------------------ */
    .thema001 img {
    width: 25%;
    margin: 0vh 0.5vh 0.9vh 0.5vh;
    height: auto;
    }

/* --------------------------------------------------
		TOP_font_size
-------------------------------------------------- */

    /* テキスト部分（ＴＯＰ一部小文字）のスタイル */
    .font_size_small {
    font-size:clamp(1.875rem, 1.875rem + 0vw, 1.875rem);/* テキスト部分（VALUES_16px-16px View_900px-1940px）のスタイル */
    }

    .font_size_MID {
    font-size: clamp(1.438rem, 1.269rem + 0.3vw, 1.625rem);
    }

    /* TOPテキスト部分 赤の小文字スタイル */
    .toparea_TOP_innner .ap {
    font-size: clamp(25px, 4vw, 35px);

    }

    /* TOPテキスト部分 黒の小文字スタイル */
    .toparea_TOP_innner .thema001top {
    font-size: clamp(18px, 4vw, 20px);
    font-weight: 500;
    }

    /* TOPテキスト部分 黒の小文字スタイル */
    .toparea_TOP_innner .thema001 {
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 500;
    }

    /* どうやって? 題名  黒の小文字スタイル */
    .HowStart_comment {
    font-size: clamp(14px, 4vw, 16px);
    }

    .NEXT_comment {
    font-size: clamp(14px, 4vw, 16px);
    max-width: 700px;
    }

    .QA_comment {
    font-size: clamp(14px, 4vw, 16px);
    }

/* ---------FAQ------------------ */

    .toparea_FAQ_innner .ap {
    font-size: 3.5rem;
    font-weight: 900;
    text-align: center;
    }
    .toparea_FAQ_innner .thema001 {
    font-size: 3.0rem;
    font-weight: 900;
    text-align: center;
    display: flex;
    justify-content: center;
    }

    /* デフォルト縦並べ スマホmode*/
    section.toparea_FAQ {
    flex-direction: column;
    }

/* デフォルト縦並べ スマホmode imag_area*/
.toparea_App_innnerR_SF img {
    width: 100%;
	max-width: 600px;
	height: auto;
	display: block;   /* 余計な余白を削除 */
}




.toparea_App_innnerR_PC {
    width: 70%;
    display: flex;
    /* justify-content: space-evenly; */
    /* align-items: center; */
    /* flex-direction: column; */
    margin: 0 0% 0 0;
}

.toparea_App_innnerR_PC img {
    width: 55%;
	height: auto;
}

/* TOP　右画像 */
.innnerR_PC {
    width: 60%;
	height: auto;
}


.topAPP_1024px_tate {
    width: 100%;
    max-width: 800px;
    display: flex;
	flex-direction: row; /* ← ここを追加（縦並びにする） */
    padding: 0% 0% 0 0%;
}

.topAPP_1024px_tate002 {
    width: 100%;
    max-width: 900px;
    display: flex;
	flex-direction: column; /* ← ここを追加（縦並びにする） */
    padding: 0% 0% 0 0%;
}

/* --------------------------------------------------
		ボタンスイッチ
-------------------------------------------------- */


/* ボタンの外側のコンテナ（以前の設定を継承） */
.flowswitch_btn_area {
    text-align: center;
    width: 100%;
    padding: 40px 0;
}

.btn_row_container
{
    width: 70%;
}

.topAPP_BTN {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0 0% 0 0%;
}


/* TOP boy img横並び */

section.toparea_FAQ{
		background-image: url(/tokushu/mycastle/images2/back_top_PC.png);
		background-repeat: no-repeat;
		background-position: center top;  /* 画像配置位置 */
		background-size: cover; /* 画面全体に画像がカバーされるようにする */
		width: 100%;
		height: 28.5vh;  /*  28.5vh */
		margin: 0;
		padding: 20xp 0 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		height:100% ; /* 高さ100vhで中央揃え */
}

	section.toparea_FAQ {
        flex-direction: row; /* 横並びに変更 */
        align-items: center; /* 縦方向の中央揃え */
		justify-content: center;
    }


section.toparea_TOP {
        flex-direction: row; /* 横並びに変更 */
        /* justify-content: space-between; 左右の要素を均等配置 */
        align-items: center; /* 縦方向の中央揃え */
    }

    .toparea_TOP_innner {
        width: 40%; /* 左側のコンテンツの幅を調整 */
    }

    .toparea_App_innnerR {
        width: 30%; /* 右側の画像の幅を調整 */
        display: flex;
        justify-content: center;
        align-items: center;
    }



    .toparea_FAQ_innner {
        width: 70%; /* 左側のコンテンツの幅を調整 */
        text-align: left; /* 左寄せに */
    }

    .toparea_App_innnerR {
        width: 30%; /* 右側の画像の幅を調整 */
        display: flex;
        justify-content: center;
        align-items: center;
    }


	section.toparea_TOP {
        flex-direction: row; /* 横並びに変更 */
        /* justify-content: space-between; 左右の要素を均等配置 */
        align-items: center; /* 縦方向の中央揃え */
    }



    .toparea_TOP_innnerR {
        width: 30%; /* 右側の画像の幅を調整 */
        display: flex;
        justify-content: center;
        align-items: center;
    }


/* TOP PAGE*/
.toparea_TOP_innner {
        max-width: 450px;
        display: flex;
        flex-direction: column;
        gap: 0px;
        text-align: center;
        width: 97%;
    }



section.toparea_FAQ h2 {
    padding: 5px 0;
    color: #333;
	background-color: #ffffff;
    font-size: 3.5rem;
    background-image: none;
    font-family: "RoundedMgenplus-medium", sans-serif;
}



.toparea_FAQ_innner h2 {
  font-size: 1.5rem; /* h2のフォントサイズ */
  font-weight: 900;
  background-color: transparent; /* 背景を透明に設定 */
}

section.toparea_TOP h2 {
    padding: 5px 0;
    color: #333;
	background-color: #ffffff;
    font-size: 3.5rem;
    background-image: none;
    font-family: "RoundedMgenplus-medium", sans-serif;
}

.toparea_TOP_innner h2 {
  font-size: 1.5rem; /* h2のフォントサイズ */
  font-weight: 900;
  background-color: transparent; /* 背景を透明に設定 */
}



.flow span {
    font-size: 3.5rem;
}




.rounded-obalbox {
    display: inline-block;
    padding: 1.8% 1%;
    margin: 1% 2% 1% 1%;
    background-color: #E50012;
    border-radius: 8px;
}

.topic_in {
    color: #333;
    font-size: 2.8rem;
    font-weight: bold;
    padding: 0% 0 0 0;
}
/* --------------------------------------------------
/* --- 1. カプセルボタンスイッチ --- */
-------------------------------------------------- */

.flowswitch_btn_area {
display: flex;
    flex-direction: column; /* ボタンを縦に並べる場合 */
    align-items: center;    /* 中央寄せ */
    width: 100%;            /* 常に画面幅に合わせる */
    padding: 20px 0;
    box-sizing: border-box;
}

.capsule_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 90%;
max-width: 850px;
    min-width: 300px;
    min-height: 70px;
    margin: 10px auto;
   padding: 0 20px;
    background-color: #ffffff;
    border: 4.5px solid #ff374d;
    border-radius: 50px; /* 左右を丸める */
    color: #000000;
    font-size: clamp(20px, 4.5vw, 22px);
    
    text-decoration: none;
    line-height: 1.4;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* 右端の矢印（逆くの字） */
.capsule_btn::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 15px;
    height: 15px;
    border-top: 4px solid #ff374d;
    border-right: 4px solid #ff374d;
    transition: 0.3s;
}



/* --------------------------------------------------
  Gnavi PC用スタイル（900px以上）
-------------------------------------------------- */

  .gn_add001 {
         width: 100%;
        background-color: #e8e8e8;
  }

  .test_gm001 {
    width: 500px;
    margin: 0 auto;
  }

  .breadcrumb_icon {
        /* スマホでは高さをさらに少しだけ調整して、横幅を稼ぎます */
        height: 80px;
        /* 左右に少し余裕を持たせる */
        width: 100%;
    }
/* --------------------------------------------------
アプリダウンロード
-------------------------------------------------- */

.foot_AppDL_area{
	width: 100%;
	max-width:1024px ;
	height: 30%;
		margin: 0 0 2% 0;
		background-color: #E50012;
}


ul.AppDL_inner{
width: 100%;
max-width: 1024px;
height: auto;
background-color: #ffffff;
padding:1%;
margin: 0 auto 0% auto ;
border-radius: 10px;
}

ul.AppDL_inner {
    width: 100%;
    max-width: 1024px;
    height: auto;
    background-color: #ffffff;
    padding: 1%;
    margin: 0 auto 0% auto;
    border-radius: 10px;
}

.App_icon_sp{
margin: 1% 0 2% 0 ;
}


/* ---------------@ MEdia END ------------- */
}/* ---------------　DOnt　erase --- */
/* --------------　@ MEdia END ------------- */


/* EOF */