@charset "utf-8";

/* ---------------------------------------------------------------------- */
/**
 * 中学校英語Dマーク 読み上げ機能表示 キーセンテンス固有書式 
 * @version 2024.5.16
 */
/* ---------------------------------------------------------------------- */
/*
 * CSSは下記の順で呼び出すこと 
 * 1.読み上げ機能表示 共通書式(listening-common.css)
 * 2.読み上げ機能表示 カラオケ表示共通書式(listening-talk.css)
 * 3.本文・語句・キーセンテンス・本文簡易表示 固有書式(listening-body.css,listening-word.css,listening-sentence.css,listening-simplified.css)
 */
/* ---------------------------------------------------------------------- */

/* ---------- 他ファイル 呼び出し ---------- */

/* コンテンツ画面 共通書式  */
@import url("./listening-common.css");

/* コンテンツ画面 カラオケ表示共通書式 */
@import url("./listening-talk.css");



#contents{

    /* ---------- 変数設定 ---------- */

    /*  フォントサイズ・行高(英文) */
    --font-size-en:40px;
    --line-height-en:56px;

    /*  フォントサイズ・行高(和訳) */
    --font-size-jp:18px;
    --line-height-jp:36px;

}



/* ---------- 本文表示 パート見出し表示 ---------- */

/* パート見出し表示域 */
#contents .main h1{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:left;
    align-content:center;

    width:80%;
    min-width:fit-content;
    height:calc(40px * var(--zoom-rate));
    font-size:calc(26px * var(--zoom-rate));
    line-height:calc(40px * var(--zoom-rate));

    margin:calc(30px * var(--zoom-rate)) 0;
    padding:0;

    color:#fff;
    background-color:var(--theme-color);
    border-radius:calc(10px * var(--zoom-rate));
}

/* パート見出しテキスト画像 */
#contents .main h1>img{
    display:block;

    height:calc(30px * var(--zoom-rate));
    width:auto;

    margin:0 calc(15px * var(--zoom-rate));
    padding:0;
}


/* ---------- 本文表示 再生ブロック単位 ---------- */

/* 英文音声再生ブロック */
#contents .main .talk-area{
    margin:0;
    padding:calc(10px * var(--zoom-rate)) calc(15px * var(--zoom-rate));
    width:calc(100% - (10px * var(--zoom-rate)));
    min-width:calc(100% - (10px * var(--zoom-rate)));
    max-width:calc(100% - (10px * var(--zoom-rate)));

    display:flex;
    flex-direction:column;
    row-gap:calc(20px * var(--zoom-rate));

    background-color:#fff9cf;
    border-radius:calc(8px * var(--zoom-rate));

    outline:var(--debug-outline) var(--debug-outline-width) purple;
}
#contents .main .talk-area+.talk-area{
    /* 2つめ以降のブロック */
    margin-top:calc(50px * var(--zoom-rate));
}


/* ---------- 本文表示 段落 ---------- */

/* 段落 */
#contents .main .talk-area .talk{
    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;
    row-gap:calc(10px * var(--zoom-rate));

    width:100%;
    height:fit-content;

    outline:var(--debug-outline) var(--debug-outline-width) red;
}

/* 段落内の英文・和訳ブロック */
#contents .main .talk-area .talk .block{
    margin:0;
    padding:0;
    display:block;
    width:100%;
    height:fit-content;

    outline:var(--debug-outline) var(--debug-outline-width) hotpink;
}
#contents .main .talk-area .talk .block.en{
    /* 段落内の英文ブロック */
    font-size:calc(var(--font-size-en) * var(--zoom-rate));
    line-height:calc(var(--line-height-en) * var(--zoom-rate));
}
#contents .main .talk-area .talk .block.jp{
    /* 段落内の和訳ブロック */
    font-size:calc(var(--font-size-jp) * var(--zoom-rate));
    line-height:calc(var(--line-height-jp) * var(--zoom-rate));
}

/* 見出し指定 丸付き文字 */
#contents .main .talk-area .talk .block.en[data-header-shape*="c"]::before{
    content:attr(data-header-char);

    font-size:80%;
    --header-size-unit:calc(var(--font-size-en) * var(--zoom-rate));

    display:inline-block;
    width:var(--header-size-unit);
    height:var(--header-size-unit);
    line-height:calc(var(--header-size-unit) * 1.2);

    position:relative;
    top:-0.1em;

    padding:0;
    margin:0;
    margin-right:calc(var(--header-size-unit) * 0.5);

    text-align:center;

    border-radius:50%;
    background-color:#fdd10b;
    color:#271200;
    font-weight:bold;
}
#contents .main .talk-area .talk .block.en[data-header-shape*="c"]+.block.jp{
    /* 丸付き文字の段落の和訳 */
    margin-left:calc(var(--font-size-en) * var(--zoom-rate) * 1.5);
}

/* ---------- 本文表示 音声再生単位ごとの設定 ---------- */

/* 再生単位の1文(英文・和訳共通) */
#contents .main .talk-area .talk .sentence{
    display:inline;
}

/* 和訳の改行規則 */
#contents .main .talk-area .talk .jp .sentence{
    line-break:strict;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:break-all;
}

/* ---------- 本文表示 英文の1語ごとの設定 ---------- */

/* 英文の先頭でリスト記号になる1語 */
#contents .main .talk-area .talk .sentence.origin>.list-top{
    margin-right:0.8em;
}

/* ---------- 本文表示 和訳の表示切替 ---------- */

/* 和訳非表示 */
#contents #listening-translation-show~*.main .talk-area .talk .jp{
    visibility:hidden;
}
/* 和訳の表示 */
#contents #listening-translation-show:checked~*.main .talk-area .talk .jp{
    visibility:visible;
}