@charset "utf-8";
html {
    height: 100%;
    overflow: hidden;
}

main {
    height: 100%;
    overflow: hidden;
}

body {
    background-image: url(../image/tutorial/welcome.png);
    background-size: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 100%;
}

.welcome_title {
    height: 22%;
    position: relative;
}

.welcome_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    text-align: center;
    color: #768191;
    font-size: 10.7vw;
    line-height: 6vw;
    font-weight: bold;
    font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

.welcome_text span {
    color: #768191;
    text-align: center;
    letter-spacing: 0.5vw;
    font-size: 3.8vw;
    font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

.text_box {
    width: 86%;
    margin: 0 auto;
    height: 65%;
}

.text_box p {
    font-size: 3.1vw;
    line-height: 5vw;
    color: #41464c;
    padding-bottom: 2vw;
    text-align: justify;
}

.welcome_button {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
    bottom: 5.5vw;
    background-color: #9baabe;
    width: fit-content;
    color: #fff;
    font-weight: bold;
    border-radius: 2vw;
}

.welcome_button p {
    padding: 1.2vw 10vw;
    font-size: 3.8vw;
}

.welcome_button:active {
    opacity: 0.6;
}

.owl-nav {
    display: none;
}

.page2 {
    background-color: #a4bec8;
}

.page1 {
    background-color: #e0bfb9;
}

.page3 {
    background-color: #ceb5be;
}

.page4 {
    background-color: #d5c6a9;
}

.page5 {
    background-color: #9eadc1;
}

.owl-dots {
    position: absolute;
    z-index: 1;
    bottom: 8%;
    left: 50%;
    transform: translate(-50%, 0);
}
 
.bd_block,
.bd2_block,
.bd4_block {
    bottom: 10%;
}
 
.welcome_button {
    bottom: 10%;
    margin-bottom: 2.5vw;
}

.owl-theme .owl-dots .owl-dot span {
    width: 2.5vw;
    height: 2.5vw;
    background-color: #e4e4e3;
    margin: 5px 4px;
}

@media screen and (max-width: 480px){

	@media screen and (min-height: 800px){
		.bd_block, .bd2_block, .bd4_block {
			bottom: 15%;
		}
		.owl-dots {
			position: absolute;
			z-index: 1;
			bottom: 13%;
			left: 50%;
			transform: translate(-50%, 0);
		}
		.welcome_button {
			bottom: 15%;
			margin-bottom: 2.5vw;
		}
	}

}

@media screen and (min-width: 481px) {
    .welcome_button {
        bottom: 5.5% !important;
    }
}

@media screen and (min-width: 900px) {
    .welcome_button {
        bottom: 6.5% !important;
    }
}

@media screen and (min-width: 1300px) {
    .welcome_button {
        bottom: 73px !important;
    }
}