body {
    /* 1. サイズを 16px (以前の12px相当より少し大きく安定) に固定 */
    font-size: 16px; 
    line-height: 1.8;
    
    /* 2. フォント：プロポーショナル(P)を避け、等幅(Gothic)を優先させる */
    /* これにより（）が1マス分を正しく占有します */
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS Gothic", "ＭＳ ゴシック", "Osaka-mono", "メイリオ", monospace;
    
    color: #666;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: #ddd;
    overflow-x: scroll;

    /* 3. 縦書き設定 */
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: mixed;
    
    /* 隙間設定をリセット */
    word-spacing: 0;
    letter-spacing: 0;
    
    /* 追加：PC版でも wrap 自体をスクロールの器にする */
    @@width: 100vw;       /* または親要素いっぱいの幅 */
    @@overflow-x: auto;   /* bodyではなく、ここでスクロールさせる */
}

/* 三点リーダーとダッシュを明朝体にして直立させる */
.vertical-leader {
    font-family: "Yu Mincho", "MS Mincho", "Hiragino Mincho ProN", serif;
    
    /* inline-block を inline に戻すか、削除する */
    //display: inline; 
    
    /* 向きを強制的に直立させる */
    text-orientation: upright;
    -webkit-text-orientation: upright;

    /* 念のため文字詰めを無効化 */
    font-variant-ligatures: none;
    font-feature-settings: "palt" 0, "vpal" 0;
}

.screenplay{
	color: #666666;
	text-align: left;
	margin-top: 0px;
	word-spacing: 0.2em;
	border-collapse: collapse;
	margin-left:auto;
	margin-right:auto;
}

.screenplay_pre{
	color: #666666;
	text-align: left;
	word-spacing: 0.2em;
	font: 1em/1.6 Arial, Helvetica, sans-serif,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Osaka","ＭＳ Ｐゴシック","MS P ゴシック",'メイリオ';
	border-collapse: collapse;
	margin-top: 0px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	width:388px;
	//word-break: break-all;//単語を強制的に折り返します。
	white-space: normal;
	            white-space: normal; /* 通常の折り返し */
            overflow-wrap: break-word; /* 長い単語の折り返し */
            word-break: break-word; /* 適切な位置での折り返し */
}

.screenplay_line{
	text-align:right;
    border-bottom-style:solid; 
	border-width: 1px; /* 線の太さ */
	border-color: #888; /* 線色 */
	padding-bottom:5px;
	padding-right:0.3rem;
}
/* 4. 字詰め問題を解決する核心部分 */
.screenplay_text {
    padding-top: 5px;
    
    /* 重要：プロポーショナル（文字詰め）を強制オフ */
    font-variant-ligatures: none;
    font-feature-settings: "palt" 0, "vpal" 0, "pkna" 0;
    
    /* 英字フォントの影響を最小化し、等幅を意識させる */
    font-family: inherit; 
}
span.screenplay-speech{
	color:gray;
	font-weight:bolder;
}



div.screenplay_main{
 writing-mode: vertical-rl; /* 縦書き: 右から左へ */
 text-orientation: upright; /* テキストの方向を保持 */
 line-height: 1.5; /* 行の高さを指定 */
 border-radius: 0.5em; 
 z-index:7;
 background-color:#eeeeee;
 border:1px solid #000000;
 text-align:left;
 background-color:#ffffff;
 
 @@以降コピー防止
 -webkit-user-select: none; @@Safari
 -moz-user-select: none;    @@Firefox
 -ms-user-select: none;     @@IE10+
 user-select: none;         @@標準

}
div.screenplay_wrap{
 //font: 1.2em/1.6 Arial, Helvetica, sans-serif,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Osaka","ＭＳ Ｐゴシック","MS P ゴシック",'メイリオ'; 
 font-size: 20px; /* テキストのフォントサイズを指定 */
 width: max-content; /* コンテンツに基づいて幅を設定 */
 margin-bottom:0.2vh;
 height:95vh;
 white-space: nowrap; /* テキストを折り返さない */
 
 
}

.tcy {
    text-combine-upright: all;
    -webkit-text-combine-upright: all;
    display: inline-block; /* 効かない場合の予備 */
}





.test{
width:200px;
height:200px;
z-index:9999;
//position: absolute; /* 画面に張り付くのをやめる */
//bottom: 50px;
/* 脚本の左端（終点）のさらに左、余白の中に配置 */
//left: -150px;
}




/* --- A. デフォルトは「無」 --- */
.end_credit, .end_spacer {
    display: none; /* 最初は存在すらさせない */
    @@display: flex;
    @@z-index: 99999;
}


/* --- A. デバイス・画面サイズ制限をすべて解除 --- */
html.is-view-mode .end_credit {
    display: flex;
    /* どのデバイスでも常に表示（JSでiframe時のみ消去） */
    position: fixed;
    /* fixed が死ぬ環境なら absolute で強制配置 */
    @@position: absolute;
    bottom: 30px;
    left: 30px ;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    writing-mode: horizontal-tb;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- E. iframe（詳細ページ）内での完全抹消 --- */
/* 親（詳細ページ）から呼び出された時、JSが動く前に物理干渉を殺す */
@media screen {
    :where(html:not(:root)) .end_spacer, /* iframe内の可能性が高い状況を狙う */
    body:has(iframe) .end_spacer { /* 環境を特定できる場合 */
        /* ここは空欄でも良いですが、確実なのは以下の「対」の設定です */
    }
}

/* 確実なのは、親のJSが操作するプロパティに、最初から「隙」を与えないこと */
html.is-view-mode .end_spacer {
    display: inline-block;
    @@display: inline-block;
    @@display: none;
    width: 300px;
    height: 100vh;
    vertical-align: top;
    /* 詳細ページで親JSがここを display:none !important にした時、
       widthやheightが残っていると「ゴースト」になるため、
       JS側の命令を完全にサポートする */
}

/* --- B. 到着時（is-floatingが外れた時）の挙動 --- */
.end_credit:not(.is-floating) {
    /* 最後は少し右（脚本の余白の中）へ移動 */
    //left: 120px; 
}

/* --- C. ボタン本体の変形（道中は横伸び、最後は縦伸び） --- */
.back_to_garden {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.7);
    border: 1px solid #ccc;
    //transition: all 1.6s ease;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    /* ★追加：基本の並び（道中） */
    flex-direction: column; 
}

/* [道中] カプセル型 */
.end_credit.is-floating .back_to_garden {
    flex-direction: column; /* 道中は縦並び固定 */
    width: 4rem;
    height: 4rem;
    border-radius: 2rem;
}

/* [道中ホバー] 横に伸びる */
.end_credit.is-floating .back_to_garden:hover {
    width: 10rem;
    height: 3rem;
    flex-direction: row; /* ★ホバーした瞬間に横並びを強制 */
    border-radius: 1.5rem;
}

/* [到着時] 縦に伸びる */
.end_credit:not(.is-floating) .back_to_garden {
    flex-direction: column; /* ★到着した瞬間に縦並びを強制 */
    width: 6rem;
    height: 10rem;
    border-radius: 1.5rem;
    background-color: rgba(255,255,255,1.0);
}

/* --- D. 日本語テキスト (.jp) --- */
.back_to_garden .jp {
    font-size: 1rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease;
    
    /* ★追加：透明なときは物理サイズを消してアイコンを中央に寄せる */
    height: 0;
    line-height: 0;
    overflow: hidden;
}

/* ホバー時 または 到着時に表示 */
.end_credit.is-floating .back_to_garden:hover .jp,
.end_credit:not(.is-floating) .jp {
    opacity: 1;
    /* ★追加：表示されたらサイズを戻す */
    height: auto;
    line-height: 1.5;
}

/* 到着時（縦伸び）の文字の向きを整える */
.end_credit:not(.is-floating) .jp {
    writing-mode: vertical-rl; /* ★強制 */
    margin-top: 0.5rem; /* アイコンとの隙間を確保 */
    margin-left: 0;
}

/* 道中ホバー時の文字の余白 */
.end_credit.is-floating .back_to_garden:hover .jp {
    margin-left: 8px;
    margin-top: 0;
    writing-mode: horizontal-tb; /* ★強制 */
}

.icon_mark::before {
    content: '🏠'; /* 絵文字を使う */
    font-size: 1.2rem;
    
    /* ★絵文字を白黒（グレースケール）にして主張を殺す魔法 */
    filter: grayscale(100%) contrast(300%);
    /* あるいは、透過度を下げて馴染ませる */
    opacity: 0.6;
}
.icon_mark {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}





/*■■■■■モバイル向けと共用■■■■■■■■■■■■■■*/
@media screen and (min-width:0px) { 
 body{
 /* スマホの勝手な文字サイズ変更を「100%」で固定（禁止）する */
    //-webkit-text-size-adjust: 100%;
    //text-size-adjust: 100%;
 }
 div.screenplay_main{
  //width:100%;
  //min-width :420px;
  padding:25px 0px 25px 25px;
  /* スマホ時のみ、100vh（画面いっぱい固定）を解除して文字量に合わせる */
  //height: auto !important;
  //height: initial !important;
  // font: 100%/120%; //←font-size: 100%;line-height: 120%;
  //background-color:red;
 }
 
 div.screenplay_wrap{
  //width:100%;
  //min-width :420px;
  //font-size: 22px; 
 }
}
/* ■■■■■モバイル向け（スマホ・タブレット）の上書き■■■■■ */
/* 画面幅が1024px以下の「モバイル環境」のみに限定し、PCを保護します */
@media screen and (max-width: 1024px), 
       screen and (orientation: landscape) and (pointer: coarse) {

    /* 1. ページ全体の縦スクロールを封印（モバイルのみ） */
    html, body {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* 2. 外枠：svhで高さを固定 */
    div.screenplay_wrap {
        height: 100svh !important; 
        width: 100vw !important;
        position: relative !important;
        overflow-x: auto !important;  
        overflow-y: hidden !important; 
        display: block !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    /* 3. 内枠（main）：上下の「切れ」と「隙間」を同時に解消 */
    div.screenplay_main {
        /* 上の隙間を消すために margin を 0 に（必要なら数pxだけ） */
        margin-top: 0 !important;
        
        /* 【重要】paddingで内側に余白を作り、文字が隠れないようにする */
        /* これなら「箱の大きさ」は変わらないので、底が画面外に切れません */
        padding-top: 8px !important; 
        padding-bottom: 8px !important;
        
        /* 高さを100%に固定し、中身が突き出さないようにする */
        height: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 4. 【横持ち限定】アドレスバー回避の最小限の補正 */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    div.screenplay_main {
        // 横持ちの時だけ、アドレスバーを避けるための微調整 
        padding-top: 12px !important;
    }
}

/*■■■■■■■デスクトップ向けの上書き■■■■■■■■■■■■■■*/
@media screen and (min-width:768px){ 
 div.screenplay_main{
  padding:25px 25px 25px 25px;
  //z-index:7;
 }
 div.screenplay_wrap{
  //font-size: 24px;   
 }
}