@charset "utf-8";
@import url("sanitize.css");

:root {
    --front-gap: 40px;
}

/* CSS Document */


.user-info-modal-content {
    background: #fff;
    padding: 24px;
    border-radius: 10px;
    width: 400px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.bt8 {
    border-top: 8px solid #736357;
}

.bt8-P {
    border-top: 8px solid white;
}

img {
    max-width: 100%;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.header_inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    background-color: #4d4b4a;
    display: flex;
    align-items: center;
    height: 117px;
}

.header_inner .d-flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.header_inner .row {
    height: 117px;
    display: flex;
    align-items: stretch;
}

.header_inner .col {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    background-color: #a89a81;

}

.header_inner img {
    margin: 0;
    padding: 0;
    max-height: 80px;
    align-self: center;
}

.header_inner .col.tab1 {
    background-color: #a89a81;
    border-right: solid 10px #fff;
}

.header_inner .col.tab2 {
    background-color: #a89a81;

}

.header_inner .col.tab3 {
    background-color: #acacac;
    border-right: solid 10px #fff;
}

.header_inner .col.tab4 {
    background-color: #acacac;
}

.header_inner .col>a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.appContainerU {
    display: flex;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-top: 1.5%;
    align-items: center;
}

.appContainerL {
    display: flex;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-top: 1%;
    align-items: center;
}

.appWrapper {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: fit-content;
}

.header_inner h1 {
    margin: 0 auto;
    font-size: 60px;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.header_inner h3 {
    color: #fff;
    margin: 0;
    padding: 0;
    font-weight: 700;
    line-height: 1.2;
}

.header_inner h4 {
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
}

.header_inner .fs32 {
    line-height: 1.4 !important;
}

.header_inner_index h3 {
    color: #fff;
}

.header_inner_index h4 {
    color: #fff;
    font-weight: 700;
    line-height: 10px;
}

.try-finger-img {
    width: 700px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}


.fixedMainContents.bg-tp-k {
    background-image: url("../Images/S1-tp384_K.gif");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.bg-d4 {
    background-color: #D43E41;
}

.fc-da {
    color: #D43E41;
}

.fc-4b {
    color: #736357;
    /*#4b4b4b*/
    margin-bottom: 38px;
}

.fc-brn {
    color: #736357;
}

.mb5 {
    margin-bottom: 48px;
}

.fc-e6 {
    color: #E6A738;
}

.fc-03 {
    color: #0373C7;
}

.bg-e6 {
    background-color: #E6A738;
}

.bg-da {
    background-color: #da7c25;
}

.bg-6d {
    background-color: #6DA1C8;
}

.und-line-yel {
    background: linear-gradient(transparent 75%, #F3DDAD 75%);
}

.main_contents {
    position: relative;
    display: block;
    width: 100%;
    min-height: 400px;
    height: 595px;
    background-color: #ffffff;
}

.main_inner_flex {
    display: flex;
    padding: 30px 20px 10px 20px;
}

.main_inner {
    padding: 30px 20px 10px 20px;
}

body.index-page .main_inner_flex {
    display: flex;
    gap: var(--front-gap);
    padding-left: var(--front-gap);
    padding-right: var(--front-gap);
}


.front-box {
    flex: 1 1 0;
    margin: 0;
    max-width: none;
    min-width: 0;
    background-color: #a89a81;
    height: 440px;
    border-radius: 25px;
}

body.index-page .main_inner_flex {
    display: flex;
    gap: var(--front-gap);
    padding-left: var(--front-gap);
    padding-right: var(--front-gap);
}

body.index-page .main_contents,
body.index-page .main_inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.lftbox {
    margin-bottom: 4px;
}

.rgtbox {
    margin-top: 20px;
    margin-bottom: 4px;
}

.sousa img {
    width: 100%;
    height: 100%;
}

.youtube-carousel {
    width: 80%;
    margin: 0 auto;
}

.video {
    position: relative;
    padding-bottom: 270px;
    height: 0;
}

.video video,
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: block;
}

.fullscreenVideo {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    background: #000;
}

.slick-prev,
.slick-next {
    display: none;
    /* 矢印を非表示にする*/
}

.slick-dots li button:before {
    font-size: 20px !important;
    color: #fff;
    opacity: 0.75;
}

.slick-dots li {
    width: 30px !important;
}

.slick-dots {
    bottom: -40px !important;
}

.slick-list {
    touch-action: pan-x;
}

.btnoverlaytext {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    /* ★ 中間：28px（26〜30の範囲で微調整可） */
    margin: 0;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    z-index: 2;
    background: transparent;
    pointer-events: none;
}

/* 必要なら個別の要素だけ下げる */
.btnoverlaytext--tweak-y {
    transform: translateY(-54%);
}

/* -52〜-58%で要素ごと */

.btnoverlaytext-3 {
    position: absolute;
    left: 0;
    right: 0;
    top: 25%;
    transform: translateY(-50%);
    height: 28px;
    /* ★ 中間：28px（26〜30の範囲で微調整可） */
    margin: 0;
    padding: 0 8px;
    display: block;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: #ffffff;
    text-shadow: 2px 2px 2px #000;
    z-index: 5000;
    background: transparent;
    pointer-events: none;
    text-align: center;
}

.btnoverlaytext-2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    transform: translateY(-50%);
    height: 28px;
    /* ★ 中間：28px（26〜30の範囲で微調整可） */
    margin: 0;
    padding: 0 8px;
    display: block;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: #ffffff;
    text-shadow: 2px 2px 2px #000;
    z-index: 5000;
    background: transparent;
    pointer-events: none;
    text-align: center;
}

.btnoverlaytext-3 h5,
.btnoverlaytext-3 h6,
.btnoverlaytext-2 h5,
.btnoverlaytext-2 h6 {
    color: white;
}

#controls {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    /* 任意の幅に調整可能 */
    height: 300px;
    border-radius: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 10;
    background-color: rgba(128, 128, 128, 0.6);
    /* 半透明グレー */
    padding: 20px;

}

#controls img {
    cursor: pointer;
    margin: 0 30px;
}

.ctrl-btn {
    height: 100px;
    width: auto;
}

.ctrl-btn--back {
    height: 130px;
}

.bg-dg {
    background-color: grey;
}

.bg-org {
    background-color: #fab97b;
    /*#e2e3e5*/
}

.white-box {
    background-color: white;
    border: 1px solid grey;
    border-radius: 30px;
    width: 272px;
    height: 337px;
    box-shadow: 4px 4px 8px grey;
    text-align: center;
    padding: 25px;
}

.bge-box {
    background-color: #a89a81;
    border-radius: 20px;
    width: 203px;
    height: 89px;
    text-align: center;
    align-content: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
}

.bg-bge {
    background-color: #a89a81;
}

.bg-grey {
    background-color: #acacac;
}

.bg-brn {
    background-color: #736357;
}

.two-boxes-m {
    width: 272px;
    height: 152px;
    border: none;
    display: flex;
    box-shadow: 4px 4px 8px grey;
    margin-bottom: 34px;
}

.two-boxes {
    width: 272px;
    height: 152px;
    border: none;
    display: flex;
    box-shadow: 4px 4px 8px grey;
}

.two-boxtitle {
    box-sizing: border-box;
    width: 172px;
    height: 152px;
    align-content: center;
}

.two-boxtitle h4 {
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.two-boxtitle h5 {
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.two-boxtitle h6 {
    color: #fff;
    font-weight: 400;
    text-align: center;
}

.smlr h5 {
    color: #fff;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
}

.two-boxpic img {
    width: 100px;
    height: 152px;
}

.pct-btn-u {
    width: 272px;
    height: 152px;
    border: none;
    box-shadow: 4px 4px 8px grey;
    margin-bottom: 34px;
}

.pct-btn-u img,
.pct-btn-l img {
    width: 272px;
    height: 152px !important;
}

.pct-btn-l {
    width: 272px;
    height: 152px;
    border: none;
    box-shadow: 4px 4px 8px grey;
}

.mb3 {
    margin-bottom: 16px;
}

.whtbox {
    box-sizing: border-box;
    background-color: #fff;
    width: 90%;
    height: auto;
    padding: 20px 64px 20px 32px;
}

.whtbox .d-flex.mt-2.whtbox_ml90 {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.whtbox .d-flex.mt-2.whtbox_ml90>a {
    box-sizing: border-box;
    display: block;
    flex: 0 0 200px;
    max-width: 200px;
    text-decoration: none;
}

.whtbox_ml90 {
    margin-left: clamp(32px, 6vw, 70px);
}


.menu-end {
    margin-left: 3px;
}

.menu-front {
    margin-left: 10px;
}

.menu-front5 {
    margin-left: 25px;
}

.menu-front20 {
    margin-left: 20px;
}

.menu-key {
    margin-right: 5px;
    margin-left: 3px;
}

.after-slash {
    margin-left: 1px;
}

.about-mrg {
    margin-left: 9px;
    margin-right: 9px;
}

.sousa-front {
    margin-left: 4px;
}

.timer21 {
    margin: 0 6px 0 16px;
}

.timer21_46 {
    margin: 0 46px 0 16px;
}

.timer21_72 {
    margin: 0 72px 0 16px;
}

.min-front46 {
    margin-left: 46px;
}

.sec-front66 {
    margin-left: 66px;
}

.min-end3 {
    margin-right: 3px;
    ;
}

.min-front5 {
    margin-left: 5px;
}

.sec-end2 {
    margin-right: 2px;
}

.sec-end8 {
    margin-right: 8px;
}

.hyphen-end {
    margin-right: 34px;
}

.finish-end {
    margin-right: 35px;
}

.remain45 {
    margin-left: 8px;
    margin-right: 45px;
}

.remain7 {
    margin: 0 7px 0 9px;
}

.remain17 {
    margin-left: 9px;
    margin-right: 17px;
}

.remain44 {
    margin-left: 17px;
    margin-right: 44px;
}

.remain37 {
    margin: 0 37px 0 9px;
}

.remain70 {
    margin-left: 8px;
    margin-right: 70px;
}

.remain71 {
    margin-left: 17px;
    margin-right: 71px;
}

.remainTimer {
    margin-left: 17px;
    margin-right: 5px;
}

.remain5min {
    margin-left: 8px;
    margin-right: 71px;
}

.remain42sec {
    margin-left: 8px;
    margin-right: 45px;
}

.remain4min {
    margin-left: 17px;
    margin-right: 70px;
}

.tempicon {
    margin-right: 17px;
    margin-left: 15px;
}

.temp-end15 {
    margin-right: 15px;
}

.mes-front8 {
    margin-left: 8px;
}

.mes-front9 {
    margin-left: 9px;
}

.mes-front18 {
    margin-left: 18px;
}

.annc-front19 {
    margin-left: 19px;
}

.annc-front29 {
    margin-left: 29px;
}

.turn-arrow {
    margin-left: 29px;
    margin-top: 3px;
    width: 25px;
}

.panA {
    margin-left: 23px;
    width: 60px;
    position: absolute;
    left: 23px;
    bottom: 6px;
    width: 60px;
    margin: 0 !important;
}

.panA-7 {
    position: absolute;
    left: 23px;
    bottom: 7px;
    width: 60px;
    margin: 0 !important;
}

.prgAnime {
    display: none;
    position: relative;
}

.prg-bar {
    position: absolute;
    left: 0;
}

.m250032 {
    margin: 25px 0 0 32px;
}

.ml32 {
    margin-left: 32px;
}

.mt20 {
    margin-top: 20px;
}

.mt-117 {
    margin-top: -117px;
}

.cir-title {
    letter-spacing: 5px;
    margin-left: 18px;
}

.cir-arrow {
    height: 40px;
    width: 40px;
}

.v-ht {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

.whtscrn {
    box-sizing: border-box;
    background-color: #fff;
    width: 80%;
    max-width: 1120px;
    min-width: 400px;
    height: 170px;
    text-align: center;
    padding-top: 20px;
}

.imgA {
    width: 365px;
    height: 185px;
    border-right: 1vw solid #fff;
}

.imgB {
    width: 415px;
    height: 185px;
    border-right: 1vw solid #fff;
}

.imgC {
    width: 315px;
    height: 185px;
}

.imgD {
    width: 365px;
    height: 185px;
}

.yelbox {
    box-sizing: border-box;
    border: none;
    background-color: #E6A738;
    width: 176px;
    height: 216px;
    border-radius: 10px;
    text-align: center;
    padding: 10px 5px;
    position: absolute;
    z-index: 500;
    top: 300px;
    right: 80px;
}

.yelbox p {
    font-weight: 700;
    color: #fff;
}

.qr-app {
    box-sizing: border-box;
    border: 1px solid #707070;
    width: 141px;
    height: 141px;
    background-color: #fff;
    margin: auto;
}

/* シュミレーター用CSS */

#lcdScreen {
    width: 384px;
    height: 80px;
    border: none;
    background-color: black;
    /*isolation: isolate;*/
    color: white;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 394px;
    left: 558px;
    transition: background-color 0.3s ease;
    /* トランジションを追加 */
}

#lcdScreen.lcd-on {
    background-color: #363a49;
}

#lcdScreen.lcd-off {
    background-color: black;
}

#lcdScreen img {
    filter: invert(1);
    mix-blend-mode: screen;
}

#lcdScreen img.no-invert {
    filter: none;
    mix-blend-mode: normal;
}

#lcdScreen img.invert {
    filter: invert(1);
    mix-blend-mode: screen;

}

#powerIndicator {
    width: auto;
    font-size: 19px;
    color: black;
    /* 初期色は黒 */
    position: absolute;
    top: 452px;
    right: 206px;
}

#econaviLamp {
    width: 10px;
    height: 10px;
    background-color: black;
    /* 初期色は黒 */
    position: absolute;
    top: 435px;
    left: 996px;
}

.area-indicator {
    position: absolute;
    top: 395px;
    left: 511px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.areaTop,
.areaBottom {
    width: 21px;
    height: 22px;
    margin: 3px 0;
    display: block;
    background-color: transparent;
}

/* 非選択側：薄暗いピンク（縦向きでも有効にする） */
.areaTop.dim-red,
.areaBottom.dim-red {
    background-color: #79454a;
}

@keyframes redBlink {
    0% {
        background-color: red;
    }

    50% {
        background-color: black;
    }

    100% {
        background-color: red;
    }
}

/* 点滅（個別） */
.areaTop.blinking-red,
.areaBottom.blinking-red {
    animation: redBlink 1.5s step-end infinite;
    /*animation-timing-function: linear;*/
    animation-fill-mode: both;
}

/* 点灯 */
.areaTop.red,
.areaBottom.red {
    background-color: red !important;
}

.areaBoth {
    width: 21px;
    height: 50px;
    /* 上下合計の高さ */
    background-color: transparent;
    display: none;
    /* 初期は非表示 */
}

.areaBoth.blinking-red {
    animation: redBlink 1.5s step-end infinite;
    /*animation-timing-function: linear;*/
    animation-fill-mode: both;
}

#areaButton {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 525px;
    left: 480px;
    background-color: transparent;
}

#timerButton {
    width: 60px;
    height: 50px;
    position: absolute;
    top: 532px;
    left: 588px;
    background-color: transparent;
}

#modeLeft {
    width: 60px;
    height: 50px;
    position: absolute;
    top: 532px;
    left: 675px;
    background-color: transparent;
}

#modeRight {
    width: 60px;
    height: 50px;
    position: absolute;
    top: 532px;
    left: 760px;
    background-color: transparent;
}

#startButton {
    width: 60px;
    height: 50px;
    position: absolute;
    top: 532px;
    left: 850px;
    background-color: transparent;
}

#powerButton {
    width: 75px;
    height: 60px;
    position: absolute;
    top: 528px;
    left: 1018px;
    background-color: transparent;
}

@keyframes blink-colon {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blinking-colon {
    animation: blink-colon 1s step-end infinite;
}

.displayLine {
    display: flex;
    width: 384px;
    height: 56px;
    transition: opacity 0.3s ease;
    color: white;
}

.displayLine .left,
.displayLine .center,
.displayLine .right {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    color: white;
}

.displayLine .left,
.displayLine .right {
    width: 108px;
    font-size: 24px;
    align-items: center;
    height: 56px;
    justify-content: center;
}

.displayLine .center {
    width: 168px;
    position: relative;
    color: inherit;
}

.displayLine .center span,
.displayLine .center div {
    color: #fff;
}

.displayLine.right img {
    width: 100%;
    height: auto;
}

.displayLine.mode {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    width: 384px;
}

.displayLine.mode.step3 {
    display: flex;
    justify-content: flex-start;
    /* ← 左寄せ */
    align-items: center;
    height: 56px;
    width: 384px;
}

.displayLine.mode .icon-left,
.displayLine.mode .icon-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    /* 必要に応じて調整 */
    height: auto;
}

.displayLine.mode .icon-left {
    left: 32px;
}

.displayLine.mode .icon-right {
    right: 32px;
}

.displayLine.mode .mode-center {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 32px;
    color: white;
}

.displayLine.mode span {
    color: white;
}

.menu {
    display: flex;
    width: 384px;
    height: 24px;
    color: white;
    transition: opacity 0.3s ease;
}

.menu .left,
.menu .right {
    display: flex;
    justify-content: center;
    align-items: center;
    /* ← これで上下中央揃え */
    height: 24px;
    font-size: 18px;
    color: white;
    /*letter-spacing: 2px;*/
}

.menu .left,
.menu .right {
    width: 108px;
}

.menu .center {
    width: 168px;
    position: relative;
    display: flex;
    align-items: center;
    /* ← これで上下中央揃え */
    justify-content: center;
    height: 24px;
    font-size: 18px;
    color: white;
}

.menu .center span {
    color: white;
    letter-spacing: 1px;
}

.menu .center .dotted {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 15px;
    width: 3px;
}

.menu .center .left-dot {
    left: 0px;
    /* テキストの左に固定 */
}

.menu .center .right-dot {
    right: 0px;
    /* テキストの右に固定 */
}

.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    height: 15px;
    width: 3px;
    left: 80px;
}

.menu .center .menu-text {
    position: relative;
    z-index: 1;
}

.idou {
    position: absolute;
    left: 102px;
    margin-top: 2px;
    margin-bottom: 0;
}

.icon {
    width: auto;
    /* 必要に応じてサイズを調整 */
    height: auto;
    /* BMPのサイズを元データに基づく */
}

.icon-left {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
}

.icon-right {
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
}

.poweroff-summary {
    width: 377px;
    /* 固定幅 */
    height: 50px;
    /* 固定高さ */
    font-size: 21px;
    color: #fff;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    /* 中央揃え（必要に応じて） */
}

.summary-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.veryleft {
    margin-left: 15px;
    margin-right: 12px;
    flex-shrink: 0;
}

.centerandright {
    display: flex;
    margin-left: 0;
    align-items: center;
    justify-content: flex-start;
    color: white;
    font-size: 21px;
}

.summary_inner_left {
    display: flex;
    width: 91px;
    height: 46px;
    margin: 1px;
    align-items: center;
    justify-content: center;
}

.summary_inner_left_anime {
    display: flex;
    flex-direction: column;
    width: 91px;
    height: 46px;
    margin: 1px;
    justify-content: flex-start;
    position: relative;
    /* ★子要素の absolute 配置の基準にする */
    overflow: visible;
    /* ★アニメがはみ出しても欠けないように */
}

.summary_inner_right {
    display: flex;
    width: 280px;
    height: 46px;
    margin: 1px 1px 1px 0;
    align-items: center;
    justify-content: flex-start;
}

.inline-icon {
    height: 21px;
    vertical-align: middle;
    margin-right: 2px;
    /* ← 余白を調整 */
}

.middledots {
    margin-left: 4px;
    font-size: inherit;
    line-height: inherit;
    display: inline;
    margin-bottom: 10px;
}

.fire-icon-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.fire-bar {
    position: absolute;
    width: 163px;
    height: auto;
    bottom: 10px;
    left: 0;
}

.fire-icon {
    position: absolute;
    bottom: 16px;
    width: 17px;
    margin-left: 1px;
    height: auto;
}

.fire-icon-0 {
    position: absolute;
    left: 0px;
    bottom: 16px;
}

.fire-icon-1 {
    position: absolute;
    left: 1px;
    bottom: 16px;
    width: 17px;
}

.fire-icon-2 {
    position: absolute;
    left: 18px;
    bottom: 16px;
    width: 17px;
}

.fire-icon-3 {
    position: absolute;
    left: 36px;
    bottom: 16px;
    width: 17px;
}

.fire-icon-4 {
    position: absolute;
    left: 54px;
    bottom: 16px;
    width: 17px;
}

.fire-icon-5 {
    position: absolute;
    left: 72px;
    bottom: 16px;
    width: 17px;
}

.fire-icon-6 {
    position: absolute;
    left: 90px;
    bottom: 16px;
    width: 17px;
}

.fire-icon-7 {
    position: absolute;
    left: 108px;
    bottom: 16px;
    width: 17px;
}

.fire-icon-8 {
    position: absolute;
    left: 126px;
    bottom: 16px;
    width: 17px;
}

.fire-icon-9 {
    position: absolute;
    left: 144px;
    bottom: 16px;
    width: 17px;
}

.fire-icon-edit {
    width: auto;
    position: absolute;
    bottom: 16px;
    width: 17px;
    margin-left: 1px;
    left: 0px;
}

/* 火力画像のスタイル */
#firePowerImage {
    position: absolute;
    top: 0px;
    left: 330px;
    width: 847px;
    height: auto;
    display: none;
}

@keyframes firePowerBlinkSync {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#firePowerImage.blinking-sync {
    animation: firePowerBlinkSync 1.5s step-end infinite;
    animation-fill-mode: both;
}

/* ホットサーフェス画像のスタイル */
#hotSurfaceImage {
    position: absolute;
    top: 397px;
    left: 1000px;
    width: 75px;
    height: auto;
    display: none;
}

/* 揚げ物モード 火力画像のスタイル */
#firePowerImageFry {
    position: absolute;
    top: 0px;
    left: 330px;
    width: 847px;
    height: auto;
    display: none;
}

.fry-center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0px;
    width: 100%;
    height: 100%;
}

.fry-center span {
    font-size: 35px;
    color: white;
    margin: 0;
}

/*焼き物アシスト*/
.mode-center span.small-text {
    font-size: 29px;
    /* 通常より小さめ */
    letter-spacing: -1px;
}

.blinking {
    animation: blink 1s step-end infinite;
    /*will-change: opacity;*/
}

.preheat {
    animation: blink 2s step-end infinite;
    /*will-change: opacity;*/
}

.preheat-left { 
    display:flex; 
    flex-direction:column; 
    align-items:flex-start;
}

.time-row { 
    display:flex; 
    align-items:center; 
}

.phS {
    margin: 2px 57px 2px 2px;
}

.temp-right { 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
}

.temp-row { 
    display:flex; 
    align-items:center; 
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#progressAnimation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 640px;
    /* 高さはバーの高さに合わせて調整 */
    z-index: 999;
    display: none;
    background-color: transparent;
}

#progressBar {
    position: absolute;
    top: 0;
    /* 垂直方向中央に表示（必要に応じて調整） */
    left: 0;
    /* ← 左端からスタート */
    height: 640px;
    width: auto;
    animation: none;
}

@keyframes slideProgress {
    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}

/* 枠は元画像比率（440:270 ≒ 1.63:1） */
.cover_fct {
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 270;
    overflow: hidden;
}

.cover_fct img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 黒帯を出したくなければ cover（全部見たいなら contain） */
    object-position: center;
    display: block;
    background: transparent;
}

/* function.html 用（cover_fct) : 16:9でも崩れないベース（枠比率+fit）　*/
.cover_fct2 {
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 270;
    overflow: hidden;
}

.cover_fct2 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: transparent;
}

.digit-img {
    height: 35px;
    width: auto;
}

.temp-right .digit-img-small { 
    height: 21px; 
}

.animation-img {
    height: 34px;
    /* 適宜調整 */
    width: auto;
}

.futa-animation {
    height: 18px;
    width: auto;
    z-index: 10;
    position: absolute;
    top: 3px !important;
    left: 14px !important;
    margin: 0 !important;
}

.asst-start-animation {
    height: 21px;
    width: auto;
    z-index: 20;
    position: absolute;
    top: 4px !important;
    left: 20px !important;
    margin: 0 !important;
}

.nabe-turn-animation {
    height: 25px;
    z-index: 30;
    position: absolute;
    left: 29px !important;
    top: 3px !important;
    width: auto;
    /*25px*/
    margin: 0 !important;
}

/*メッセージ位置 */

.message-control-a {
    top: 525px;
    left: 510px;
}

.message-control-b {
    top: 525px;
    left: 595px;
}

.message-control-c {
    top: 525px;
    left: 680px;
}

.message-control-d {
    top: 525px;
    right: 455px;
}

.message-control-e {
    top: 525px;
    right: 365px;
}

.message-comment-a {
    top: 600px;
    left: 50px;
    font-size: 18px;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-comment-b {
    top: 600px;
    left: 500px;
    font-size: 18px;
    color: red;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-comment-c {
    top: 600px;
    left: 560px;
    font-size: 18px;
    color: red;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-comment-d {
    top: 600px;
    left: 600px;
    /*600か620*/
    font-size: 18px;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-comment-e {
    top: 600px;
    left: 680px;
    font-size: 18px;
    color: red;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

/*専用モード*/
.message-heat-a {
    top: 250px;
    left: 570px;
    font-size: 42px;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-heat-b {
    top: 200px;
    left: 455px;
    font-size: 42px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-dfry-a {
    top: 200px;
    left: 450px;
    font-size: 42px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-dfry-b {
    top: 250px;
    left: 550px;
    font-size: 42px;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-dfry-c {
    top: 250px;
    left: 370px;
    font-size: 42px;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-dfry-d {
    top: 250px;
    left: 525px;
    font-size: 42px;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-dfry-e {
    top: 200px;
    left: 460px;
    font-size: 42px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-dfry-f {
    top: 250px;
    left: 650px;
    font-size: 42px;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

/*調理終了です*/
.message-assist-a {
    top: 250px;
    left: 370px;
    font-size: 42px;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

/*焼き物アシスト専用*/
.message-assist-b {
    top: 200px;
    left: 545px;
    font-size: 42px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-assist-c {
    top: 250px;
    left: 520px;
    font-size: 42px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-assist-d {
    top: 250px;
    left: 540px;
    font-size: 42px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-assist-e {
    top: 250px;
    left: 640px;
    font-size: 42px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-assist-f {
    top: 200px;
    left: 540px;
    font-size: 42px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-assist-g {
    top: 250px;
    left: 530px;
    font-size: 42px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.message-assist-h {
    top: 200px;
    left: 530px;
    font-size: 42px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

/*できあがり*/
.message-assist-i {
    top: 200px;
    left: 545px;
    font-size: 72px;
    text-align: center;
    text-shadow:
        0.05em 0.05em 0.05em #fff,
        -0.05em -0.05em 0.05em #fff,
        -0.05em 0.05em 0.05em #fff,
        0.05em -0.05em 0.05em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff;
}

.insert-video,
.assist-video {
    position: absolute;
    top: 50px;
    left: 20%;
    transform: translateX(-50%);
    width: 300px;
    height: 170px;
    z-index: 1000;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

.finish-video {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: black;
}


.insert-video iframe,
.assist-video iframe {
    width: 100%;
    height: 100%;
    display: block;
}


/* ▼ 横長スマホ汎用 */
@media (orientation: landscape) and (min-width: 740px) and (max-height: 430px) {
    :root {
        --front-gap: 55px;
    }


    .popup-window:not(.popup--toast) {
        width: 320px;
        max-width: 90%;
    }

    .main_contents {
        width: 915px;
        aspect-ratio: 16 / 9;
        min-width: unset;
        font-size: 12px;
        height: 351px !important;
        min-height: 351px;
    }

    .user-info-modal-content {
        background: #fff;
        padding: 18px;
        border-radius: 10px;
        width: 360px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    /* タイトル（フォントが巨大化する対策） */
    .user-info-modal-content h6 {
        font-size: 22px;
        line-height: 0.8;
        margin-bottom: 8px;
    }

    /* 各 label のフォントを下げる */
    .user-info-modal-content label {
        font-size: 16px;
        margin-top: 2px;
    }

    /* インプット枠も少し調整（必須ではない） */
    .user-info-input {
        font-size: 14px;
        padding: 8px;
        margin-bottom: 10px;
    }

    /* OK ボタンの縮小 */
    .userinfo-save-btn {
        padding: 8px 20px;
        font-size: 14px;
        border-radius: 20px;
    }

    /* ヘッダー */
    header,
    .header_inner,
    .header_inner .row {
        width: 100%;
        height: 56px !important;
    }

    .header_inner img {
        height: 40px;
        width: auto;
    }

    .header_inner .col {
        height: 100% !important;
        padding-bottom: 0 !important;
    }

    .bt8-P {
        border-top: 5px solid white;
    }

    .main_inner {
        padding: 10px 14px 8px 14px;
    }

    .main_inner_flex {
        padding: 16px 14px 8px 14px;
        display: flex;
    }

    img {
        max-width: 60%;
        max-height: 60%;
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .front-box {
        flex: 1 1 0;
        margin: 0;
        max-width: none;
        min-width: 0;
        background-color: #a89a81;
        height: 250px;
    }

    .lftbox {
        margin-bottom: 2px;
    }

    .rgtbox {
        margin-top: 6px;
        margin-bottom: 2px;
    }

    .fc-4b {
        color: #736357;
        /*#4b4b4b*/
        margin-bottom: 16px;
    }

    .try-finger-img {
        width: 487px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .video {
        position: relative;
        padding-bottom: 162px;
        height: 0;
    }

    .slick-dots li button:before {
        font-size: 12px !important;
        color: #fff;
        opacity: 0.75;
    }

    .slick-dots li {
        width: 14px !important;
    }

    .slick-dots {
        bottom: -30px !important;
    }

    .sousa {
        width: 275px;
        height: 177px;
        max-width: 275px;
        max-height: 177px;
    }

    .mb3 {
        margin-bottom: 0px;
    }

    .whtbox {
        box-sizing: border-box;
        background-color: #fff;
        width: 90%;
        height: auto;
        padding: 11px 30px 11px 15px;
    }

    .whtbox .d-flex.mt-2.whtbox_ml90 {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
    }

    .whtbox .d-flex.mt-2.whtbox_ml90>a {
        box-sizing: border-box;
        display: block;
        flex: 0 0 150px;
        max-width: 150px;
        text-decoration: none;
    }

    .whtbox_ml90 {
        margin-left: clamp(15px, 6vw, 40px);
    }

    .ml32 {
        margin-left: 20px;
    }

    .mt20 {
        margin-top: 12px;
    }

    .mt-117 {
        margin-top: -71px;
    }

    .cir-title {
        letter-spacing: 4px;
        margin-left: 11px;
    }

    .cir-arrow {
        height: 24px;
        width: 24px;
    }

    /* 枠は元画像比率（440:270 ≒ 1.63:1） */
    .cover_fct {
        position: relative;
        width: 190px;
        aspect-ratio: 440 / 270;
        overflow: hidden;
    }

    .cover_fct img {
        width: 190px !important;
        max-width: 190px !important;
        height: 107px !important;
        max-height: 107px !important;
    }

    .cover_fct2 {
        position: relative;
        width: 100%;
    }

    .cover_fct2 img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .btnoverlaytext-3 {
        position: absolute;
        left: 0;
        right: 0;
        top: 35%;
        transform: translateY(-50%);
        height: 28px;
        /* ★ 中間：28px（26〜30の範囲で微調整可） */
        margin: 0;
        padding: 0 8px;
        display: block;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        color: #ffffff;
        text-shadow: 2px 2px 2px #000;
        z-index: 5000;
        background: transparent;
        pointer-events: none;
        text-align: center;
    }

    .btnoverlaytext-2 {
        position: absolute;
        left: 0;
        right: 0;
        top: 42%;
        transform: translateY(-50%);
        height: 28px;
        /* ★ 中間：28px（26〜30の範囲で微調整可） */
        margin: 0;
        padding: 0 8px;
        display: block;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        color: #ffffff;
        text-shadow: 2px 2px 2px #000;
        z-index: 5000;
        background: transparent;
        pointer-events: none;
        text-align: center;
    }

    #controls {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        /* 任意の幅に調整可能 */
        height: 180px;
        border-radius: 40px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 10;
        background-color: rgba(128, 128, 128, 0.6);
        /* 半透明グレー */
        padding: 12px;

    }

    .ctrl-btn {
        height: 60px;
        width: auto;
    }

    .ctrl-btn--back {
        height: 78px;
    }

    .v-ht {
        max-width: 100%;
    }

    .whtscrn {
        box-sizing: border-box;
        background-color: #fff;
        width: 80%;
        max-width: 614px;
        min-width: 300px;
        height: 95px;
        text-align: center;
        padding-top: 12px;
    }

    .imgA {
        width: 219px;
        height: 103px;
        border-right: 8px solid #fff;
    }

    .imgB {
        width: 249px;
        height: 103px;
        border-right: 8px solid #fff;
    }

    .imgC {
        width: 189px;
        height: 103px;
    }

    .imgD {
        width: 219px;
        height: 103px;
    }

    .yelbox {
        box-sizing: border-box;
        border: none;
        background-color: #E6A738;
        width: 135px;
        height: 145px;
        border-radius: 10px;
        text-align: center;
        padding: 6px 3px;
        position: absolute;
        z-index: 500;
        top: 180px;
        right: 48px;
    }

    .qr-app {
        box-sizing: border-box;
        border: 1px solid #707070;
        width: 85px;
        height: 85px;
        background-color: #fff;
        margin: auto;
    }

    .qr-app {
        max-width: none;
        max-height: none;
        object-fit: contain;
    }

    .header_inner .col>a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
    }

    .header_inner .col.tab1 {
        background-color: #a89a81;
        border-right: solid 6px #fff;
    }

    .header_inner .col.tab2 {
        background-color: #a89a81;

    }

    .header_inner .col.tab3 {
        background-color: #acacac;
        border-right: solid 6px #fff;
    }

    .header_inner .col.tab4 {
        background-color: #acacac;
    }

    .header_inner img {
        height: 48px;
        width: auto;
    }

    .header_inner h1 {
        margin: 0 auto;
        font-size: 36px;
        color: #fff;
        font-weight: 700;
        text-align: center;
    }

    .header_inner h3 {
        color: #fff;
        margin: 0;
        padding: 0;
        line-height: 1.2;
    }

    .header_inner h4 {
        color: #fff;
        font-weight: 700;
        line-height: 1.2;
    }

    .header_inner .fs32 {
        line-height: 1.4 !important;
    }

    .white-box {
        background-color: white;
        border: 1px solid grey;
        border-radius: 20px;
        width: 190px;
        height: 235px;
        box-shadow: 3px 3px 6px grey;
        text-align: center;
        padding: 17px;
    }

    .bge-box {
        background-color: #a89a81;
        border-radius: 15px;
        width: 138px;
        height: 64px;
        text-align: center;
        align-content: center;
        margin-right: auto;
        margin-left: auto;
        margin-top: 16px;
    }

    .pct-btn-u {
        width: 190px;
        height: 107px;
        border: none;
        box-shadow: 4px 4px 8px grey;
        margin-bottom: 22px;
    }

    .pct-btn-u img,
    .pct-btn-l img {
        width: 190px;
        height: 107px !important;
    }

    .pct-btn-l {
        width: 190px;
        height: 107px;
        border: none;
        box-shadow: 4px 4px 8px grey;
    }

    .two-boxes-m {
        width: 190px;
        height: 107px;
        border: none;
        display: flex;
        box-shadow: 3px 3px 6px grey;
        margin-bottom: 22px;
    }

    .two-boxes {
        width: 190px;
        height: 107px;
        border: none;
        display: flex;
        box-shadow: 3px 3px 6px grey;
    }

    .two-boxtitle {
        box-sizing: border-box;
        width: 120px;
        height: 107px;
        align-content: center;
    }

    .two-boxtitle h5 {
        color: #fff;
        font-weight: 700;
        font-size: 20px;
        text-align: center;
    }

    .smlr h5 {
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        text-align: center;
    }

    .two-boxpic {
        width: 70px !important;
        height: 107.5px !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain;
        display: block;
    }

    .header_inner2 {
        max-width: 915px;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        background-color: #4d4b4a;
        display: flex;
        align-items: center;
        height: 48px;
    }

    .fixedMainContents.bg-tp-k {
        background-image: url("../Images/S1-tp384_K_915x364.gif");
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: cover;
    }

    #progressAnimation {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 364px;
        /* 高さはバーの高さに合わせて調整 */
        z-index: 999;
        display: none;
        background-color: transparent;
    }

    #progressBar {
        position: absolute;
        top: 0;
        /* 垂直方向中央に表示（必要に応じて調整） */
        left: 0;
        /* ← 左端からスタート */
        height: 364px !important;
        width: auto;
        animation: none;
    }

    /* ▼ SE横向きで progressBar を汎用 img の縮小指定から除外し、高さをきっちり固定 */
    #progressBar,
    img#progressBar,
    .fixedMainContents #progressBar {
        max-width: none !important;
        max-height: none !important;
        height: 364px !important;
        /* 既存と同じ値で“念押し” */
        display: block;
        /* <img> の表示安定化（念のため） */
        border: 0;
        /* 高さ計算に影響しないよう念のため */
        padding: 0;
        /* 同上 */
        box-sizing: content-box;
        /* 同上：高さに余白を含めない */
    }

    /* インジケーター系の縮小 */

    /* LCDやボタンのスケール＆座標再調整（768→SE向けの一段縮小） */
    #lcdScreen {

        width: 384px;
        /* ← 計測した原寸に置き換え（例：384） */
        height: 80px;

        transform: scale(0.72);
        /* 0.6→0.5 へ */
        transform-origin: top left;

        position: absolute;
        top: 51.5%;
        /* 位置はパーセントで安定させる */
        left: 43.5%;
    }

    /* 各ボタン領域（大まかに縮小＆詰める） */
    #areaButton,
    #timerButton,
    #modeLeft,
    #modeRight,
    #startButton,
    #powerButton {
        width: 40px;
        height: 43px;
        top: 77%;
        /* 下部の操作列位置 */
    }

    .indicator {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 0 3px;
    }

    #powerIndicator {
        font-size: 11px;
        top: 230px;
        right: 147px;
    }

    #econaviLamp {
        width: 6px;
        height: 6px;
        background-color: black;
        /* 初期色は黒 */
        position: absolute;
        top: 217px;
        left: 713px;
    }

    .area-indicator {
        position: absolute;
        top: 188px;
        left: 366px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 10;
    }

    .areaTop,
    .areaBottom {
        width: 13px;
        height: 14px;
        margin: 2px 0;
        display: block;
        background-color: transparent;
    }

    .areaBoth {
        width: 13px;
        height: 30px;
        /* 上下合計の高さ */
        background-color: transparent;
        display: none;
        /* 初期は非表示 */
    }

    /* 非選択側：薄暗いピンク */
    .areaTop.dim-red,
    .areaBottom.dim-red {
        background-color: #79454a;
    }

    #areaButton {
        width: 42px;
        height: 42px;
        position: absolute;
        top: 281px;
        left: 341px;
        background-color: transparent;

    }

    #timerButton {
        width: 42px;
        height: 42px;
        position: absolute;
        top: 281px;
        left: 419px;
        background-color: transparent;
    }

    #modeLeft {
        width: 42px;
        height: 42px;
        position: absolute;
        top: 281px;
        left: 485px;
        background-color: transparent;
    }

    #modeRight {
        width: 42px;
        height: 42px;
        position: absolute;
        top: 281px;
        left: 544px;
        background-color: transparent;
    }

    #startButton {
        width: 42px;
        height: 42px;
        position: absolute;
        top: 281px;
        left: 608px;
        background-color: transparent;
    }

    #powerButton {
        width: 48px;
        height: 42px;
        position: absolute;
        top: 281px;
        left: 729px;
        background-color: transparent;
    }

    /* 火力画像のスタイル */
    #firePowerImage {
        position: absolute;
        top: 0px;
        left: 248px;
        width: 582px !important;
        height: 140px;
        display: none;
        max-width: 582px !important;
    }

    /* ホットサーフェス画像のスタイル */
    #hotSurfaceImage {
        position: absolute;
        top: 191px;
        left: 716px;
        width: 52px !important;
        height: auto;
        display: none;
    }



    .displayLine .left img,
    .menu .left img {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .mode-center img {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .menu .center img {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /*焼き物アシスト*/
    .mode-center span.small-text {
        font-size: 17px;
        /* 通常より小さめ */
        letter-spacing: -0.8px;
    }

    /*タイマーボタン*/
    .message-control-a {
        top: 285px;
        left: 375px;
    }

    /*<Button*/
    .message-control-b {
        top: 285px;
        left: 443px;
    }

    /*>button*/
    .message-control-c {
        top: 285px;
        left: 500px;
    }

    /*double*/
    .message-control-d {
        top: 285px;
        right: 242px;
    }

    /*startButton*/
    .message-control-e {
        top: 285px;
        right: 210px;
    }

    .message-comment-a {
        top: 338px;
        left: 30px;
        font-size: 11px;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-comment-b {
        top: 338px;
        left: 300px;
        font-size: 11px;
        color: red;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-comment-c {
        top: 338px;
        left: 336px;
        font-size: 11px;
        color: red;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-comment-d {
        top: 338px;
        left: 360px;
        /*360か372*/
        font-size: 11px;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-comment-e {
        top: 338px;
        left: 408px;
        font-size: 11px;
        color: red;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    /*専用モード*/
    .message-heat-a {
        top: 130px;
        left: 420px;
        font-size: 26px;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-heat-b {
        top: 95px;
        left: 353px;
        font-size: 26px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-dfry-a {
        top: 60px;
        left: 340px;
        font-size: 26px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-dfry-b {
        top: 95px;
        left: 420px;
        font-size: 26px;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-dfry-c {
        top: 95px;
        left: 310px;
        font-size: 26px;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-dfry-d {
        top: 95px;
        left: 395px;
        font-size: 26px;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-dfry-e {
        top: 60px;
        left: 356px;
        font-size: 26px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-dfry-f {
        top: 95px;
        left: 470px;
        font-size: 26px;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    /*調理終了です*/
    .message-assist-a {
        top: 130px;
        left: 310px;
        font-size: 26px;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    /*焼き物アシスト専用*/
    .message-assist-b {
        top: 60px;
        left: 400px;
        font-size: 26px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-assist-c {
        top: 95px;
        left: 355px;
        font-size: 26px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-assist-d {
        top: 95px;
        left: 400px;
        font-size: 26px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-assist-e {
        top: 95px;
        left: 480px;
        font-size: 26px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-assist-f {
        top: 60px;
        left: 380px;
        font-size: 26px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-assist-g {
        top: 95px;
        left: 380px;
        font-size: 26px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .message-assist-h {
        top: 60px;
        left: 400px;
        font-size: 26px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    /*できあがり*/
    .message-assist-i {
        top: 60px;
        left: 400px;
        font-size: 44px;
        text-align: center;
        text-shadow:
            0.05em 0.05em 0.05em #fff,
            -0.05em -0.05em 0.05em #fff,
            -0.05em 0.05em 0.05em #fff,
            0.05em -0.05em 0.05em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff,
            0px 0px 0.3em #fff;
    }

    .insert-video {
        position: absolute;
        top: 38px;
        left: 20%;
        transform: translateX(-50%);
        width: 225px;
        height: 130px;
        z-index: 1000;
        background: #000;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
        pointer-events: auto;
        /* クリック無効化したい場合 none */
    }

    .assist-video {
        position: absolute;
        top: 38px;
        left: 20%;
        transform: translateX(-50%);
        width: 225px;
        height: 130px;
        z-index: 1000;
        background: #000;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
        pointer-events: auto;
        /* クリック無効化したい場合 none */

    }

    .insert-video iframe,
    .assist-video iframe {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 12px;
    }


    /* === フリーモードの LCD 内は引き伸ばさない（自然寸法に戻す）=== */
    #lcdScreen .displayLine img,
    #lcdScreen .menu img,
    #lcdScreen .center img,
    #lcdScreen .left img,
    #lcdScreen .right img {
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: none !important;
        flex-shrink: 0 !important;
    }

    /* welcome 専用：横長時のスプラッシュ画像全面フィット用*/
    body.welcome-page .splash-img {
        max-width: none !important;
        max-height: none !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }
}

/* =========================================================
   Tenmen 固有 最終オーバーライド（AutoScale 共通は common.css）
   目的：
   - #appViewport（キャンバス）基準で header / main / ラッパーの横幅・余白を統一
   - ページ固有の“戻し”だけをここに書く（共通は common.css）
   ========================================================= */

/* --- header を #appViewport 基準へ統一（.header_inner/2 両対応） --- */
#appViewport header,
#appViewport .header_inner,
#appViewport .header_inner2,
#appViewport .header_inner .row,
#appViewport .header_inner2 .row {
    width: 100% !important;
    /* 100vw 起点の中央寄せや max-width を無効化 */
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    /* 横帯が出ないように内側もゼロ基準へ */
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* --- main と最上位ラッパーを #appViewport 基準へ統一 --- */
/* 天面では .main_contents を使用。将来 .fixedMainContents を使うページにも効くよう両対応 */
#appViewport main,
#appViewport .main_contents,
#appViewport .fixedMainContents {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* --- portrait 時に“中身の段組み”だけ左右インセットを戻す（必要な場合） --- */
/* 天面 index 系では .main_inner_flex が存在するため、ここで front-gap を戻す */

@media (orientation: portrait) {
    body.index-page #appViewport .main_inner_flex {
        padding-left: var(--front-gap, 40px) !important;
        padding-right: var(--front-gap, 40px) !important;
        gap: var(--front-gap, 40px) !important;
    }
}


/* =========================================================
   横長時：common.css の等方スケールを強制復元（freemodetrial）
   目的：X=Y の等方縮小に統一し、見かけサイズを
        1280→40 / 1024→32 / iPhone SE→20.83 / Pixel7横長→28.8 に合わせる
   注意：既存の landscape 側 transform/zoom 上書きを打ち消すために !important を使用
   ========================================================= */
@media (orientation: landscape) {
    #appViewport {
        /* common.css と同じ原点と式を “後勝ち”＆強制 */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        width: var(--base-w) !important;
        height: var(--base-h) !important;
        transform-origin: center center !important;
        transform: translate(-50%, -50%) scale(var(--scale)) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}


/* === styles.css ===*/

/* ================================
   モーダルの半透明オーバーレイ（濃いグレー）
   ================================ */
/* 背景をうっすら見せる（黒ではなく濃いグレー）＋前面に配置 */
#userInfoModal.user-info-modal {
    position: fixed;
    inset: 0;
    display: none;
    /* .hidden が外れたら display:flex にする */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    /* ← 濃いグレー（0.45〜0.65でお好み調整可） */
    z-index: 1100;
    /* コンテンツより前、スプラッシュより下の想定は不要（スプラッシュ中は非表示にしているため） */
}

#userInfoModal.user-info-modal:not(.hidden) {
    display: flex;
}

/* モーダルコンテンツ本体は背景上に浮かせる */
#userInfoModal .user-info-modal-content {
    position: relative;
    z-index: 1;
    /* 例：最低限の見栄え（必要に応じて既存CSSで上書き） */
    background: #fff;
    color: #333;
    border-radius: 10px;
    padding: 16px 20px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}


/* === ここから（控えめリング・明るいグレー） === */
/* モーダル内の入力フォーカスを“明るいグレー”で統一 */
#userInfoModal.user-info-modal .user-info-input,
#userInfoModal.user-info-modal input,
#userInfoModal.user-info-modal select,
#userInfoModal.user-info-modal textarea {
    outline: none;
    /* 既定アウトラインを消す */
    box-shadow: none;
    /* 既定フォーカス影を消す */
    border: 1px solid #bbb;
    /* ベース枠（薄めグレー） */
    border-radius: 6px;
    background-color: #fff;
    color: #333;
    transition: box-shadow 140ms ease, border-color 140ms ease;
}

/* キーボード操作でのフォーカス可視化を優先（対応ブラウザ） */
#userInfoModal.user-info-modal .user-info-input:focus-visible,
#userInfoModal.user-info-modal input:focus-visible,
#userInfoModal.user-info-modal select:focus-visible,
#userInfoModal.user-info-modal textarea:focus-visible {
    border-color: #bfc3c8;
    /* 明るいグレーの枠 */
    box-shadow: 0 0 0 3px rgba(191, 195, 200, 0.45);
    /* 控えめリング */
    outline: none;
}

/* fallback: :focus-visible 非対応ブラウザ向け */
#userInfoModal.user-info-modal .user-info-input:focus,
#userInfoModal.user-info-modal input:focus,
#userInfoModal.user-info-modal select:focus,
#userInfoModal.user-info-modal textarea:focus {
    border-color: #bfc3c8;
    box-shadow: 0 0 0 3px rgba(191, 195, 200, 0.35);
    outline: none;
}

/* 保存ボタン等のフォーカスも同じトーンで */
#userInfoModal.user-info-modal .userinfo-save-btn:focus-visible,
#userInfoModal.user-info-modal button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(191, 195, 200, 0.45);
}

#userInfoModal.user-info-modal .userinfo-save-btn:focus,
#userInfoModal.user-info-modal button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(191, 195, 200, 0.35);
}

/* Chrome のオートフィル黄色を白寄せに中和（必要最小限） */
#userInfoModal.user-info-modal input:-webkit-autofill,
#userInfoModal.user-info-modal input:-webkit-autofill:hover,
#userInfoModal.user-info-modal input:-webkit-autofill:focus {
    -webkit-text-fill-color: #333;
    box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 9999s ease 0s;
    /* 背景塗りつぶしを事実上無効化 */
}

/* === ここまで === */

/* ▼ iPhone SE など幅375px以下の端末向け調整 */
@media (max-height: 400px) {

    /* モーダル本体の幅を画面に合わせて縮小 */
    .user-info-modal-content {
        width: 100%;
        max-width: 320px !important;
        padding: 16px;
        border-radius: 10px;
        margin: 0 auto;
    }

    /* タイトル（フォントが巨大化する対策） */
    .user-info-modal-content h6 {
        font-size: 18px;
        line-height: 0.5;
        margin-bottom: 6px;
    }

    /* 各 label のフォントを下げる */
    .user-info-modal-content label {
        font-size: 14px;
        margin-top: 2px;
    }

    /* インプット枠も少し調整（必須ではない） */
    .user-info-input {
        font-size: 14px;
        padding: 8px;
        margin-bottom: 10px;
    }

    /* OK ボタンの縮小 */
    .userinfo-save-btn {
        padding: 8px 20px;
        font-size: 14px;
        border-radius: 20px;
    }
}

@media (orientation: landscape) and (min-width: 740px) and (max-height: 430px) {
    body.welcome-page .stage {
        background-image: url("../Images/img_bg_bg_01_915.png");
        background-position: bottom;
        background-size: cover;
    }
}

/* =========================================
   Welcome（スプラッシュ専用）— .welcome-page スコープ
   - welcome.html の <body> に class="welcome-page" を付与して使用
   - 画像のみフェード（白フラッシュなし）
   - 背景は少し薄めのグレー（#585858）
   ========================================= */
/* ページ全体の高さ確保（他ページへ波及させないため .welcome-page で限定） */
body.welcome-page {
    min-height: 100vh;
    margin: 0;
    background: #585858;
    /* ご指定の薄めグレー */
    overflow: hidden;
}

/* 全面レイヤー */
body.welcome-page .stage {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: #000;
    /* フェード中は黒地に画像が乗る */
    background-image: url("../Images/img_bg_01.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 1;
    transition: opacity 800ms ease;
}

body.welcome-page .fade {
    opacity: 0;
}

/* 動きに弱い設定は演出を省略 */
@media (prefers-reduced-motion: reduce) {
    body.welcome-page .stage {
        transition: none;
    }
}