body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: url(/images/phase3/bg_c.png) 50% 0 / 76px 76px;
}

.content {
    padding-top: 40px;
    margin: 0 auto;
    width: 95vw;
}

header {
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tutorial_header_img {
    width: 60%;
    margin: 0 auto;
}

main {
    margin-top: 5%;
}

.main_image {
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tutorial_main_img {
    width: 90%;
    margin: 0 auto;
}

.main_text_1st{
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
}

.main_text_2nd{
    font-size: 0.6rem;
    text-align: center;
}

.main_next{
    height: 3%;
    margin-top: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tutorial_next_img{
    width: 60%;
    margin: 0 auto;
}

.tutorial_getpos_button {
    border: 0;
    background: none;
}

.tutorial_getpos_img{
    width: 60%;
    margin: 0 auto;
}

.btn_center {
    display: flex;
    justify-content: center;
    align-items: center;
}


.getpos_loading {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    z-index: 555;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.getpos_loading .txt {
    font-size: 45px;
    font-weight: bold;
    　color: rgb(30, 50, 93);
}

.map_img{
    width: 100%;
    margin-bottom: 5%;
}


.map_text_1st{
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1%;
}

.map_text_2nd{
    color: red;
    font-size: 0.6rem;
    text-align: center;
    margin-top: 1%;
}

.map_main_text_1st {
    font-size: 0.8rem;
    font-weight: bold;
    /* text-align: center; */
    width: 90%;
    margin: auto;

}
.page3_btns {
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
    align-items: center; /* 中央寄せ */
    width: 100%; /* コンテナの幅を画面全体に */
}

.page3_btn {
    width: 60%; /* ボタンの幅を画面幅に合わせる */
    display: flex;
    justify-content: center; /* ボタン内のimgを中央に */
    align-items: center; /* ボタン内のimgを中央に */
    margin: 1% 0; /* ボタン間の余白 */
}

.page3_btn img {
    max-width: 100%; /* 画像の最大幅をボタンの幅に合わせる */
    height: auto; /* 画像の高さを自動調整 */
    max-height: 100px; /* すべての画像の最大高さを統一 */
}
.page3_btn a{
    text-align: center;
}

.back_btn{
    width: 50%;
}
.messages {
    margin-top:2%;
    margin-bottom: 7%;
}

.message{
    padding: 2% 2% 0 2%;
}
.message_title {
    font-size: 1.0rem;
    font-weight: bold;
    text-align: left;
    margin-top: 1%;
    margin-bottom: 1%;
}
.message_body {
    font-size: 0.8rem;
    text-align: left;
    margin-top: 0;
}



.page_check_btns {
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
    align-items: center; /* 中央寄せ */
    width: 100%; /* コンテナの幅を画面全体に */
}

.page_check_btn {
    width: 60%; /* ボタンの幅を画面幅に合わせる */
    display: flex;
    justify-content: center; /* ボタン内のimgを中央に */
    align-items: center; /* ボタン内のimgを中央に */
    margin: 1% 0; /* ボタン間の余白 */
}

.page_check_btn img {
    max-width: 100%; /* 画像の最大幅をボタンの幅に合わせる */
    height: auto; /* 画像の高さを自動調整 */
    max-height: 100px; /* すべての画像の最大高さを統一 */
}
.page_check_btn a{
    text-align: center;
}

.page_check_info_text {
    font-size: 0.8rem;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 5%;
}

.check_img{
    width: 70%;
}
.goto_check_img {
    width: 85%;
}