@import url("reset.css");

html {
    font-size: 62.5%;
}

body {
    color: #fff;
    background: #222233;
    line-height: 1;
    font-size: 1.4rem;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans CJK JP', 'メイリオ', Meiryo, sans-serif;;
    font-weight: 400;
}

.block {
    text-align: center;
    margin: 0 auto;
    width: 275px;
    max-width: 80%;
}

.header{
    width: 122px;
    margin: 18px auto 10px;
}

model-viewer {
    width: auto;
    background: #222233;
    --poster-color: transparent;
}
model-viewer::part(default-progress-bar){
    top: auto;
    bottom: 0;
    background-color: rgba(255, 255, 255, 1);
}
model-viewer::part(default-progress-mask){
    top: auto;
    bottom: 0;
    height: 5px;
    background: #ffffff;
}

.container {
    background: #222233;
}

button.hide {
    display: none;
}

#ar-click {
    margin-top: 25px;
    padding: 16px 60px 15px;
    color: #7A7A84;
    border: solid 1px #7A7A84;
    font-size: 1.3rem;
    font-weight: 700;
}

.text {
    margin-top: 25px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
}