/* フォントを強制的に「ブロック（準備できるまで待機）」させる設定 */
@font-face {
  font-family: 'IBM Plex Sans';
  font-display: block; /* swap ではなく block にすると、準備できるまで文字を出さない */
}

body{
    background-color: rgb(224, 215, 215);
    padding: 0;
    margin: 0;
}

#mobile{
    display: block;
    position: relative;
    height: 100svh;
    width: calc(100svh * 9 / 16);
    padding: 0;
    margin: 0;
    background-color: rgb(38, 40, 42);
}

#mobile::after{
    content: "カメラを起動してください";
    display: inline-block;
    position: relative;
    width: 100%;
    text-align: center;


    /*文字周り*/
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: var(--white);
    
    /*文字サイズ調整*/
    font-size: calc(var(--scale) * var(--unit) * 25);
    line-height: 80svh;
    letter-spacing: 0.015em;

    z-index: 0;
}

#video{
    object-fit: cover;
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

#cam{
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:1;
}

#ui{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;

    /*字間調整*/
}

.overlay{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}

/*セリフ部分の枠*/
.dialogue-content{
    position: absolute;
    display: block;
    width: 78%;
    margin: 0;
    padding: 0;
    /*位置調整*/
    left: 11%;
    top: 76.4%;
}

.dialogue-content p{
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;

    /*文字周り*/
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: var(--textcolor);
    
    /*文字サイズ調整*/
    font-size: calc(1vh * 2.02 * var(--scale));
    line-height: calc(1vh * 2.9 * var(--scale));
    letter-spacing: 0.015em;
}

/*設定画面*/
.settings{
    width: calc(100svh * 9 / 16);
    padding-top: calc(var(--scale) * var(--unit) * 10);
    padding-bottom: calc(var(--scale) * var(--unit) * 25);
}

.settings-inside{
    display: block;
    width: 86%;
    margin: 0 auto;
}

.settings-area{
    display: block;
    background-color: var(--white);

    border-radius: 0 calc(var(--scale) * var(--unit) * 12) 0 calc(var(--scale) * var(--unit) * 15);

    padding: 0;
    padding-bottom: calc(var(--scale) * var(--unit) * 30);
    margin: 0;
    margin-bottom: calc(var(--scale) * var(--unit) * 15);
}

.singlebutton-area{
    display: block;
    position: relative;

    width: 100%;
}

.singlebutton-area::before{
    content: "";

    display: block;
    position: absolute;

    top: 48%;
    left: 0;

    width: 27%;
    height: calc(var(--scale) * var(--unit) * 4);
    border: none;
    border-radius: 9999px;

    background-color: var(--bordercolor);
}

.singlebutton-area::after{
    content: "";

    display: block;
    position: absolute;

    top: 48%;
    right: 0;

    width: 27%;
    height: calc(var(--scale) * var(--unit) * 4);
    border: none;
    border-radius: 9999px;

    background-color: var(--bordercolor);
}

.double-button-area{
    display: block;
    width: 100%;
    text-align: center;
}