/*cellahtml CSS*/
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

html,
div,
a {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    font-smooth: auto;
    -webkit-font-smoothing: true;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f1f1f1;
}

/*INDEX HTML*/

.instructionsContainer {
    position: absolute;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgb(46, 46, 46);
}

.logo-container {
    width: 100%;
    height: 70%;
    max-width: 5rem;
    max-height: 4rem;
    background-image: url('/imgs/logoalpro.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    position: absolute;
    z-index: 2;
    top: 10%;
    left: 3%;
    justify-content: center;
    align-items: center;
}

.upbevel {
     width: 100vw;
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 0px 2px 17px rgba(212, 212, 212, 0.73);
    z-index: 1;
    top: -5%;
    height: 15vh;
    border-radius: 0% 0% 20% 0%;
    transform: skewY(5deg);
}
.wakutext {
    display: flex;
    position: absolute;
    z-index: 4;
}
.wakutext p {
color: #003153;
}

.content-container {
    width: 100%;
    max-width: 100vw;
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background: #fff;
    box-shadow: 0px -2px 17px rgba(212, 212, 212, 0.73);
    z-index: 3;
    top: 70%;
    height: 45vh;
    border-radius: 20% 0% 0% 0%;
    transform: skewY(-10deg);
}

.brandset {
    width: 100vw;
    height: 10vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: absolute;
    z-index: 3;
    top:0vh;
}

.alprobrand {
    display: block;
    position: absolute;
    z-index: 2;
    left: 25%;
    width: 120px;
    top:10%;
}



.alprotext {
display: flex;
position: absolute;
flex-direction: column;

}

.alprotext1 {
font-family: 'Noto Sans JP', sans-serif;
color: #003153;
margin-block-end: 0em!important;
margin-block-start: 0em!important;
}


.alprotext2 {
color: #252525;
font-family: "Raleway", sans-serif;
font-weight: 400;
font-size: 1.6rem;
margin-block-end: 0em!important;
margin-block-start: 0em!important;
}


.miniscn {
height: 400px;
width: 100vw;
position: absolute;
display: block;
top:0%;
z-index: 1;
}

.scansim {
    width: 100%;
    height: 100%;
    max-width: 260px;
    max-height: 260px;
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/imgs/smth.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10rem 10rem;
}

.content-container strong {
    font-size: x-large;
    text-align: center;
}

.init-button {
    text-decoration: none;
    color: d6d6d6;
    font-weight: bold;
    font-size: larger;
    width: 100%;
    height: 50vh;
    text-align: center;
    background: #fff;
    padding: 1rem;
    border-radius: 50% 50% 0% 0%;
    box-shadow: 20px 20px 60px rgba(212, 212, 212, 0.73);
    animation: mymove 5s infinite;

}

@keyframes mymove {
  50% {box-shadow: 10px 20px 30px #198ef3;}
}

.init-button:hover {
    background: #035170;
    transition: background-color 0.2s ease;

}

.init-button:active {
    background: #f9fafa;
    transform: scale(0.95);
    transition: background-color 0.2s, transform 0.2s ease;
}

.startchar { 
    display: block;
    position: absolute;
    z-index: 3;
    top: 80%;
    text-decoration: none;
}

.startchar h3 {
    font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 3rem; 
  text-decoration: none;
  color: #003153;

}

.beveldown {
    width: 100vw;
      display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 0px -2px 17px rgba(212, 212, 212, 0.73);
    z-index: 3;
    top: 90%;
    height: 20vh;
    border-radius: 40% 20% 0% 0%;
    transform: skewY(-10deg);
}

.toiawasediv {
display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 4;
    height: 10vh;
    left: 65%;
    bottom: 0%;
}

.toiawasediv a {
  color:#252525;
  font-family: 'Noto Sans JP', sans-serif;
}

.mailogo {
height: 4vh;
display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    left: -15vw;
}

.mailogo svg {
    height: 100%;
    width: 100%;
}


/* 3DAR_用のスキャンAPP*/

#scanUi {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 0;
    padding: 5rem;
}

.hidden {
    display: none!important;
}

#scanUi .scanning {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

#scanUi .scanInner {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: .8;
    background: linear-gradient(to right, white 5px, transparent 5px) 0 0, linear-gradient(to right, white 5px, transparent 5px) 0 100%, linear-gradient(to left, white 5px, transparent 5px) 100% 0, linear-gradient(to left, white 5px, transparent 5px) 100% 100%, linear-gradient(to bottom, white 5px, transparent 5px) 0 0, linear-gradient(to bottom, white 5px, transparent 5px) 100% 0, linear-gradient(to top, white 5px, transparent 5px) 0 100%, linear-gradient(to top, white 5px, transparent 5px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

#scanUi .scanLine {
    position: absolute;
    width: 95%;
    height: 3px;
    background: #fff;
    animation: move 2s linear infinite;
}

@keyframes move {
    0%,
    100% {
        top: 0%;
    }
    50% {
        top: calc(100% - 10px);
    }
}

#load {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #121214;
}

.custom-loader {
    width: 200px;
    height: 200px;
    display: grid;
    border: 6px solid #0000;
    border-radius: 50%;
    border-color: #E4E4ED #0000;
    animation: s6 1s infinite linear;
}

.custom-loader::before,
.custom-loader::after {
    content: "";
    grid-area: 1/1;
    margin: 30px;
    border: inherit;
    border-radius: 50%;
}

.custom-loader::before {
    border-color: #003153 #0000;
    animation: inherit;
    animation-duration: .5s;
    animation-direction: reverse;
}

.custom-loader::after {
    margin: 60px;
}

@keyframes s6 {
    100% {
        transform: rotate(1turn)
    }
}

@media (max-width: 768px) {
    #scanUi .scanning {
        width: 80%;
        height: 40%;
        box-sizing: border-box;
    }
    #scanUi .scanInner {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5rem;
    }
}


/*END AR用スキャン*/


/*シーン*/


/*BTN ぽしーション用のグリッド*/

.btngrid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.5em;
    margin-top: 120%;
    margin-left: 2%;
}

.btnscols {
    position: absolute;
    z-index: 30;
    width: 100%;
}

.btnscols p {
    color: #fff;
    border-radius: 1rem;
    padding: 1rem;
}

.btnscols a {
    text-decoration: none;
    color: #fff;
    border-radius: 1rem;
    padding: 1rem;
}


/*btn class portrait 一般/動画ページ>>>width 360px*/

.btn1 p {
    /*動画見る*/
    color: #fff;
    background: #0067b6bb;
    border-radius: 1rem;
    box-shadow: 0 0.2rem 1rem #03517093;
    width: 90%;
    float: left;
    font-size: 1.1em;
}

.btn2 p {
    color: #fff;
    background: #0067b6bb;
    border-radius: 1rem;
    box-shadow: 0 0.2rem 1rem #03517093;
    width: 70%;
    margin-left: 1rem;
    float: left;
    font-size: 1.1em;
}

.btn3 a {
    /* お問い合わせリンク*/
    color: #fff;
    background: #5ac164c0;
    border-radius: 1rem;
    box-shadow: 0 0.2rem 1rem #35723b;
    width: 110%;
    float: left;
    font-size: 1.1em;
    text-decoration: none;
    background-image: url(/imgs/alpro_wht.png);
    background-repeat: no-repeat;
    background-position-x: 7.4em;
    background-position-y: 0.6em;
    background-size: 20%;
}

.playbtn {
    display: block;
    position: absolute;
    margin-top: 2.4rem;
    margin-left: 8.5rem;
    border-style: solid;
    border-width: 9.5px 0 9.5px 17px;
    border-color: transparent transparent transparent #fff;
}

.playbtn.active {
    box-shadow: 0 0 0 200vh #ffffffef;
    border-color: #fff #fff #fff #fff;
}

.clipgas {
    position: fixed;
    z-index: 15;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)scale(0);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.clipgas.active {
    transition-delay: 0.1s;
    transform: translate(-50%, -50%)scale(1);
}

.clipgas video {
    max-width: 100%;
    outline: none;
    border: 0.2rem solid #fff;
    box-shadow: 0 1rem 2rem #0134479a;
}


/*Video CSS buttons [width 360px]*/

.clipgas .playin {
    position: absolute;
    font-size: 0.8em;
    top: 10rem;
    left: 1rem;
    color: #fff;
    background: #0067b6bb;
    border-radius: 1rem;
    padding: 0.8rem;
    box-shadow: 0 0.2rem 1rem #03517093;
}

.clipgas .pause {
    position: absolute;
    font-size: 0.8em;
    top: 10rem;
    left: 5.5rem;
    color: #fff;
    background: #0067b6bb;
    border-radius: 1rem;
    padding: 0.8rem;
    box-shadow: 0 0.2rem 1rem #03517093;
}

.clipgas .tojiru {
    position: absolute;
    font-size: 0.8em;
    top: 10rem;
    left: 10.5rem;
    color: #fff;
    background: #0067b6bb;
    border-radius: 1rem;
    padding: 0.8rem;
    box-shadow: 0 0.2rem 1rem #03517093;
}


/*Video CSS buttons [width 360px] >>END<<*/


/*Responsive screens/////index////////////////////////// */

@media (orientation: landscape) {
    /* scanui */
    #scanUi .scanning {
        width: 50%;
        height: 100%;
        box-sizing: border-box;
    }
    /* index*/
    .logo-container {
        width: 100%;
        height: 100%;
        margin-top: 0.5rem;
        display: flex;
        position: absolute;
        bottom:55%;
        left: 0%;
    }

    .alprobrand {
        left: 11%;
    width: 120px;
    top: 6%;
    }

    .upbevel {
        top: -8%;
    height: 18vh;
    border-radius: 0% 0% 50% 0%;
    transform: skewY(-5deg);
    }

    .scansim {
        width: 100%;
        height: 100%;
        max-width: 18rem;
        max-height: 120rem;
        margin-bottom: 1rem;
        border: 2px solid #048fc8;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('/imgs/smth.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 8rem 8rem;
    }
    .init-button {
        padding: 1rem;
        width: 100%;
        text-align: center;
        padding: 1rem;
        margin-bottom: 0%;
        border-radius: 100% 50% 0% 0%;
    }
    
    .instructionsContainer {
        background-size: 100%;
        background-position-x: 0rem;
        background-position-y: -8rem;
        position: absolute;
        z-index: 30;
        display: flex;
        justify-content: center;
        color: rgb(46, 46, 46);
    }
    .content-container {
        width: 100%;
        max-width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0rem;
    }
}


/* Responsive screens indexhtml -> landscape media queries */


/* MEDIA QUERIES CELLAHTML/// PORTRAIT用 */

@media only screen and (min-width: 375px) and (orientation:portrait) {
    .btngrid {
        margin-top: 130%;
        margin-left: 4%;
        margin-right: 1%;
    }


}

@media only screen and (min-width:390px) and (min-height:800px) and (orientation:portrait) {
    .alprobrand {
        top:10%;
    }

    .btngrid {
        margin-top: 160%;
        margin-left: 4%;
        margin-right: 2%;
    }
    /*clipbuttons CSS*/
    .clipgas .tojiru {
        top: 20em;
    }
    .clipgas .pause {
        top: 20em;
    }
    .clipgas .playin {
        top: 20em;
    }

    .beveldown {
        top:92%;
    }
    .toiawasediv {
        bottom: -1%;
    }
}

@media only screen and (min-width:500px) and (min-height:700px) and (orientation:portrait) {
    .btngrid {
        margin-top: 100%;
    }

    .logo-container {
        top: 4%;
    }

    .alprobrand {
        left: 17%;
    }

    .beveldown {
        top: 91%;
        height: 13vh;
        border-radius: 70% 20% 0% 0%;
        transform: skewY(-5deg);
    }

    .toiawasediv {
        left: 80%;
    }

    .mailogo {
        height: 4vh;
        left:-10vw;
    }
}

@media only screen and (min-width:700px) and (min-height:800px) and (orientation:portrait) {
    
    .alprobrand {
        left: 15%;
    }
    
    .upbevel {
            transform: skewY(7deg);
        top: -8%;
    height: 22vh;
    }
    
    .btngrid {
        margin-top: 95%;
    }
    .btngrid p {
        font-size: 2rem;
    }
    .btn3 a {
        font-size: 2em;
        background-size: 15%;
        background-position-y: 0.4em;
        background-position-x: 8em;
    }
    .playbtn {
        margin-top: 3.5rem;
        margin-left: 15rem;
        border-width: 15px 0 15px 25px;
    }
    /*clipbuttons CSS*/
    .clipgas .tojiru {
        top: 26em;
    }
    .clipgas .pause {
        top: 26em;
    }
    .clipgas .playin {
        top: 26em;
    }
    /*>>> SCAN UI <<<*/
    #scanUi .scanning {
        width: 60%;
        height: 40%;
        box-sizing: border-box;
    }
}

@media only screen and (min-width:767px) and (min-height:1000px) and (orientation:portrait) {
    .clipgas .pause {
        top: 18em;
    }
    .clipgas .playin {
        top: 18em;
    }
    .clipgas .tojiru {
        top: 18em;
    }

    .upbevel {
        top: -8%;
        height: 19vh;
    }
}

@media only screen and (min-width:800px) and (orientation:portrait) {
    .btngrid {
        margin-top: 110%;
        margin-left: 5%;
        margin-right: 0%;
    }
    .btngrid p {
        font-size: 2rem;
    }
    .btn3 a {
        font-size: 2rem;
        background-position-x: 8em;
        background-position-y: 0.2em;
        background-size: 17%;
        width: 100%;
    }
    .playbtn {
        margin-top: 3.5rem;
        margin-left: 15rem;
        border-width: 15px 0 15px 25px;
    }
    .clipgas .tojiru {
        top: 23em;
    }
    .clipgas .pause {
        top: 23em;
    }
    .clipgas .playin {
        top: 23em;
    }
    /*>>> SCAN UI <<<*/
    #scanUi .scanning {
        width: 60%;
        height: 40%;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 1023px) and (orientation: portrait) {
    .btngrid {
        margin-top: 60rem;
        margin-left: 2rem;
    }
    .btngrid p {
        font-size: 2rem;
    }
    .btn3 a {
        font-size: 2rem;
        width: 150%;
        background-position-y: 0.4rem;
    }
}

@media only screen and (min-width:1023px) and (min-height:1100px) and (orientation:portrait) {
    .btn1 p {
        width: 65%;
    }
    .btn2 p {
        width: 65%;
        margin-left: -20%;
    }
    .btn3 a {
        width: 100%;
        background-position-y: 0rem;
    }
    .clipgas .tojiru {
        top: 78em;
    }
    .clipgas .pause {
        top: 78em;
    }
    .clipgas .playin {
        top: 78em;
    }
}


/*MEDIA QUERIES　CELLAHTML <<<<<<<<<<< LANDSCAPE用 >>>>>>>>>*/

@media only screen and (min-width:350px) and (orientation:landscape) {
    .btngrid {
        margin-top: 10rem;
    }
    .btn1 p {
        width: 50%;
    }
    .btn2 p {
        width: 50%;
        margin-left: -30%;
    }
    .btn3 a {
        width: 70%;
    }
    /* video buttons */
    .clipgas .tojiru {
        font-size: 0.8em;
        padding: 0.7em;
        top: 24em;
        left: 8.6rem;
    }
    .clipgas .pause {
        font-size: 0.8em;
        padding: 0.7em;
        top: 24em;
        left: 4.5rem;
    }
    .clipgas .playin {
        font-size: 0.8em;
        padding: 0.7em;
        top: 24em;
    }

    .beveldown {
        border-radius: 100% 20% 0% 0%;
    transform: skewY(-5deg);
    }

    .toiawasediv {
        left: 80%;
    bottom: 1%;
    }

    .mailogo {
        left: -5vw;
    }
}

@media only screen and (min-width:375px) and (orientation:landscape) {
    /*clipbuttons CSS*/
    .clipgas .tojiru {
        top: 25em;
    }
    .clipgas .pause {
        top: 25em;
    }
    .clipgas .playin {
        top: 25em;
    }
}

@media only screen and (min-width:400px) and (orientation:landscape) {
    .btngrid {
        margin-top: 13rem;
    }
    .btn3 a {
        width: 60%;
        background-size: 15%;
        background-position-x: 10rem;
    }
    /*clipbuttons CSS*/
    .clipgas video {
        height: 100%;
    }
    .clipgas .tojiru {
        top: 30em;
    }
    .clipgas .pause {
        top: 30em;
    }
    .clipgas .playin {
        top: 30em;
    }
}

@media only screen and (min-width:600px) and (orientation:landscape) {
    .btngrid {
        margin-top: 12rem;
    }
    .btn3 a {
        background-position-x: 8.5rem;
        background-position-y: 1rem;
    }
    /*clipbuttons CSS*/
    .clipgas .tojiru {
        top: 25em;
    }
    .clipgas .pause {
        top: 25em;
    }
    .clipgas .playin {
        top: 25em;
    }
}

@media only screen and (min-width:700px) and (orientation:landscape) {
    .btngrid {
        margin-top: 9rem;
    }
    .clipgas .tojiru {
        top: 20em;
    }
    .clipgas .pause {
        top: 20em;
    }
    .clipgas .playin {
        top: 20em;
    }

    .upbevel {
    top: -8%;
    height: 22vh;
    border-radius: 0% 0% 100% 30%;
    transform: skewY(-4deg);
    }

    .logo-container {
        width: 100%;
        height: 100%;
        margin-bottom: 0rem;
        margin-top: 0rem;
        padding-bottom: 3rem;
        max-width: 4rem;
        max-height: 3rem;
    }

    .alprobrand { 
        left: 7%;
    width: 120px;
    top: 0%;
    }


}

@media only screen and (min-width:800px) and (orientation:landscape) {
    /*clipbuttons CSS*/
    .clipgas video {
        height: 100%;
        width: 80%;
    }
    .clipgas .tojiru {
        top: 23em;
        margin-left: 2%;
    }
    .clipgas .pause {
        top: 23em;
        margin-left: 1%;
    }
    .clipgas .playin {
        top: 23em;
    }
}

@media only screen and (min-width:900px) and (orientation:landscape) {
    /*clipbuttons CSS*/
    .clipgas .tojiru {
        top: 27em;
    }
    .clipgas .pause {
        top: 27em;
    }
    .clipgas .playin {
        top: 27em;
    }
}

@media only screen and (min-width: 1023px) and (orientation: landscape) {
    .btngrid {
        margin-top: 32rem;
    }
    /*clipbuttons CSS*/
    .btngrid p {
        font-size: 2rem;
    }
    .btn1 p {
        width: 60%;
    }
    .btn2 {
        width: 80%;
        margin-left: -20%;
    }
    .btn3 a {
        font-size: 2rem;
        width: 70%;
        background-position-y: 0.6rem;
        background-position-x: 16rem;
        background-size: 15%;
    }
    .playbtn {
        margin-top: 3.5rem;
        margin-left: 17rem;
        border-width: 15px 0 15px 25px;
    }
    .clipgas video {
        height: 75%;
    }
    /*clipbuttons CSS*/
    .clipgas .tojiru {
        top: 56em;
    }
    .clipgas .pause {
        top: 56em;
    }
    .clipgas .playin {
        top: 56em;
    }
    /*>>> SCAN UI <<<*/
    #scanUi .scanning {
        width: 40%;
        height: 60%;
        box-sizing: border-box;
    }
}

@media only screen and (min-width:1100px) and (min-height:1000px) and (orientation:landscape) {
    .btngrid {
        margin-top: 32rem;
    }
    .clipgas video {
        height: 75%;
    }
    .clipgas .tojiru {
        top: 72em;
    }
    .clipgas .pause {
        top: 72em;
    }
    .clipgas .playin {
        top: 72em;
    }
}

@media only screen and (min-width:1300px) and (orientation:landscape) {
    .btngrid {
        margin-top: 40rem;
    }
    .btn1 p {
        width: 45%;
    }
    .btn3 a {
        width: 55%;
    }
}


/* media queries for galaxyfold*/

@media only screen and (min-width:600px) and (max-height:300px) {
    .btngrid {
        margin-top: 5rem;
    }
    .btngrid p {
        font-size: 1rem;
    }
    .btn1 p {
        width: 50%;
    }
    .btn2 p {
        width: 50%;
        margin-left: -30%;
    }
    .btn3 a {
        font-size: 1rem;
        width: 70%;
        background-position-x: 8rem;
        background-position-y: 0.5rem;
    }
}