@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Noto+Sans+JP:wght@100;200;300;400;500;600;700&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

html {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
  max-width: 100vw;
    height: 100dvh;
    touch-action: manipulation;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
  max-width: 100vw;
    height: 100dvh;
    touch-action: manipulation;
}

div{
    touch-action: manipulation;
    touch-action: pan-y;
}

img{
    touch-action: manipulation;
    touch-action: pan-y;
}


a {
    text-decoration: none;
}


.margin0 {
    margin: 0;
}

.padding0 {
    padding: 0;
}

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

.center {
    text-align: center;
}

.weight_Thin {
    font-weight: 100;
}

.weight_ExtraLight {
    font-weight: 200;
}

.weight_Light {
    font-weight: 300;
}

.weight_Normal {
    font-weight: 400;
}

.weight_Medium {
    font-weight: 500;
}

.weight_SemiBold {
    font-weight: 600;
}

.weight_Bold {
    font-weight: 700;
}

.weight_ExtraBold {
    font-weight: 800;
}

.weight_Black {
    font-weight: 900;
}

.font_Kaisei-Opti {
    font-family: 'Kaisei Opti', serif;
}

.font_M-Plus-Rounded-1c {
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

.font_Noto-Sans-JP {
    font-family: 'Noto Sans JP', sans-serif;
}

.font_Zen-Maru-Gothic {
    font-family: "Zen Maru Gothic", serif;
}



.back_button {
    /* height: 6.5vh; */
    width: 75vw;
    height: auto;
}

.main {
    position: fixed;
    top: 0;
    left: 0;
    text-align: -webkit-center;
    display: block;
    width: 100vw;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 100000;
}

.main_container {
    position: fixed;

    left: 50%;
    transform: translateX(-50%);
}

.marker_ghost {
    width: 64.102vw;
    margin-top: 20vh;
}

.ghost {
    width: 82.051vw;
    margin-top: 5vw;
}

.check_button {
    position: fixed;
    width: 75vw;
    height: auto;
    left: 50vw;
    transform: translateX(-50%);
    bottom: 5vw;
    z-index: 100;
}


/* ここからローディングページ用CSS */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    touch-action: auto;
    pointer-events: all;
    /* background-image: url(../img/ar/ar_bg.png);
    background-size: cover; */
    width: 100vw;
    height: 216.410vw;
    min-height: 100dvh;
    z-index: 9999998;
}

.loading_img {
    touch-action: none;
    position: fixed;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 60vw;

}

/* ここから台帳ページ用CSS */
.checkpage {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 98;
    background-color: #53A5D6;
    background-image: url(../img/bg.png);
    background-size:cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: -webkit-center;
    overscroll-behavior: none;
    touch-action: auto;
    touch-action: pan-x pan-y; 
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100dvw;
    height: 211.538dvw;
    min-height: 100dvh;
    transform: translateZ(0);
    will-change: transform;
    touch-action: manipulation;
    text-align: center;
}

.checkpage_logo {
    position: absolute;
    top: 4.359vw;
    left: 50%;
    transform: translateX(-50%);
    width: 80.25923vw;
}

.point_bg_j {
    position: absolute;
    top:88.974vw;
    left: 7.4359vw;
    /* ↑マイナス2vwした */
    width: 39.2307vw;
}

.point_bg_o {
    position: absolute;
    top:88.974vw;
    right: 7.4359vw;
    width: 39.2307vw;
}

.point_bg_i {
    position: absolute;
    top: 128.205vw;
    left: 30vw;
    /* ↑マイナス2vwした */
    width: 39.2307vw;
}

.point_bg_n {
    position: absolute;
    top: 112.307vw;
    right: 4.358vw;
    width: 36.430vw;
}
@keyframes scaleFade {
  0% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.point_get_j {
    position: absolute;
    top:88.974vw;
    left: 7.4359vw;
    /* ↑マイナス2vwした */
    width: 39.2307vw;

    transform: scale(1.5);      /* 初期スケール */
  opacity: 0;                 /* 初期透明 */
  animation: scaleFade 1s ease-out forwards;
}

.point_get_o {
    position: absolute;
    top:88.974vw;
    right: 7.4359vw;
    width: 39.2307vw;

    transform: scale(1.5);      /* 初期スケール */
  opacity: 0;                 /* 初期透明 */   
  animation: scaleFade 1s ease-out forwards;
}

.point_get_i {
    position: absolute;
    top: 128.205vw;
    left: 30vw;
    /* ↑マイナス2vwした */
    width: 39.2307vw;

    transform: scale(1.5);      /* 初期スケール */
  opacity: 0;                 /* 初期透明 */
  animation: scaleFade 1s ease-out forwards;
}

.point_get_n {
    position: absolute;
    top: 112.051vw;
    right: 3.846vw;
    width: 43.994vw;
}

.boxing{
    position: relative;
    width: 25dvw;
    height: 5dvw;
    z-index: 100;
    left: 28dvw;
    top: 68.487dvw;
}
.QRinfo{
    position: absolute;
    color: white;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 3.077dvw;
    line-height: 4.359dvw;
    width: 74.8718dvw;
    text-align: center;
    top:204.359dvw;
    padding-bottom: 2.82dvw;
    left: 50%;
    transform: translateX(-50%);
}.QRinfo2{
    position: absolute;
    color: white;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 3.077dvw;
    line-height: 4.359dvw;
    width: 74.8718dvw;
    text-align: center;
    margin-top: -7dvw;
    left: 50%;
    transform: translateX(-50%);
}
.toTop{
    position: fixed;
    bottom: 0;
    width: 10.2564dvw;
    right: 0;
    z-index: 100;
    bottom: 32dvw;
}

.howto_button {
    position: fixed;
   /* top: 172.8205vw;*/
    left: 6.1538vw;
    width: 42.564vw;
    bottom: 14.615dvw;
    z-index: 99;
}

.flow_button {
    z-index: 99;
    position: fixed;
    /*top: 140.9487vw;*/
    bottom: 32dvw;
    right: 2.564vw;
    width: 25.0256vw;
     pointer-events: auto
}
.camera_button {
    position: fixed;
    /*top: 172.8205vw;*/
    bottom: 14.615dvw;
    right: 6.1538vw;
    width: 42.564vw;
    z-index: 99;
}

.hamburger_button {
    position: absolute;
    top: 5.128vw;
    right: 5.128vw;
    width: 6.410vw;
}

.complete_button {
    position: fixed;
    /*top: 161.794vw;*/
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 71.794vw;
    z-index: 99;
}


.point_modal {
    position: absolute;
    top: 67.179vw;
    left: 50%;
    transform: translateX(-50%);
    width: 87.948vw;
    height: 87.948vw;
}

.point_modal_bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.point_modal_text {
    background-color: #003894;
    border-radius:30vw;
    position: fixed;
    display: flex;
    top: 76.6667vw;
    left: 50%;
    transform: translateX(-50%) ;
    width: 34.3589vw;
 /*   height: 8.9743vw;*/
    height: 7.6923vw;
    padding-bottom: 1.282vw;
    /*text-wrap: nowrap;*/
    display: flex;
    color: white;
    font-size: 3.333vw;
    line-height: 4.35897vw;
    text-align: center;
    align-items: end;
    justify-content: center;
}
.highlight {
    color: white;
    font-size: 7.435vw;
    line-height: 7.435vw;
    letter-spacing: 0;
    font-weight: bold;
    text-align: center;
    align-items: start;
    justify-content: center;
}
.complete_message_img{
    width: 63.84615vw;
    position: fixed;
    display: flex;
    top: 76.6667vw;
    left: 50%;
    transform: translateX(-50%) ;
}

.point_modal_close{
    position: absolute;
    bottom:5%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 29.917vw;
}

.copyright {
    position: absolute;
    top: 192.0512vw;
    left: 50%;
    transform: translateX(-50%);
    width: 36.410vw;
    padding-bottom:4.8717vw;
}



.complete{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #000000A0;
    background-size: cover;
    background-repeat: no-repeat;

    overflow-x: hidden;
    overflow-y: hidden;
    width: 100vw;
    height: 100vh;
    transform: translateZ(0);
    will-change: transform;
    touch-action: none; 
    overscroll-behavior: none;
    text-align: center;
}

.complete_close_button{
    top: 5.128vw;
    right: 5.128vw;
    width: 10.256vw;
}
.complete_main_img_container{
    position: relative;
    width:88.205vw;
    height: auto;
    margin-top:24.526dvh;  
  left: 50%;
  transform: translateX(-50%);

}
.complete_main_img{
    width:100%;
}
.complete_main_img_btn{
    position: absolute;
    width: 60.769vw;
    bottom:6.923vw;
    height: auto;
  left: 50%;
  transform: translateX(-50%);
}

.complete_back_button{
    width: 61.282vw;
    height: auto;
    margin-top: 5.128vw;
    z-index: 100;
}


.tips{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #000000A0;
    background-size: cover;
    background-repeat: no-repeat;

    overflow-x: hidden;
    overflow-y: hidden;
    width: 100vw;
    height: 100vh;
    transform: translateZ(0);
    will-change: transform;

    text-align: center;
}

.tips_close_button{
    position: absolute;
    top: 5.128vw;
    right: 5.128vw;
    width: 10.256vw;
}
.tips_main_img{
    position: absolute;
    top: 57.179vw;
    left: 50%;
    transform: translateX(-50%);
    width: 66.410vw;
}

ul.tips_text_list {
    position: absolute;
    margin: 0;
    top:125vw;
    padding-left: 16vw;
    list-style-type: "※";
    letter-spacing: 0vw;
    text-align: left;
    width: 70vw;
    font-size: 3.589vw;
    color: yellow;
}

.tips_text {
    display: block;
   /* text-wrap: nowrap;*/
    line-height: 6vw;
}

.error {
    background-color: white;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    z-index: 9999999;
}

.error_img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100vh;
    min-width: 100vw;
}



/* モーダル */
#modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    text-align: center;
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: auto;
    /*padding-bottom: env(safe-area-inset-bottom);*/
    background-image: url(../img/modal/bg_main.png);
    box-sizing: border-box;
    overscroll-behavior: none;
    background-attachment: local;
    background-size:cover;
    background-position: center center;
      touch-action: manipulation;
}

/* モーダル上のバツボタン */
.modal_close_top {
    position: fixed;
    z-index: 4;
    width: 7.923vw;
    right: 5vw;
    /* バツボタンの位置 */
    top: 5vw;
    /* バツボタンの位置 */
}


.modal_container {
    /* モーダル全体の背景色 */
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
}

/* モーダルヘッダー */
.modal_header {
    position: relative;
    /* モーダルヘッダーの背景色 */
    background-image: url(../img/modal/1_fv.png);
    background-size: cover;
    width: 100vw;
    max-width: 100vw;
    height: 202.41025dvw;
    text-align: center;
}

/* モーダルヘッダータイトル */
.modal_header_title {
    margin: 0;
    padding: 0;
}

.modal_header_text {
    display: block;
    font-size: 3.589vw;
    line-height: 6vw;
}



ul.modal_header_list {
    margin: 0;
    padding-top: 4.871vw;
    list-style-type: "・";
    padding-left: 12vw;
    padding-bottom: 4vw;
    letter-spacing: 0vw;
    text-align: left;
    width: 80vw;
    font-size: 3.589vw;
    color: #000000;
}

.modal_link_button{
    padding-top: 182.06923dvw;
    display: flex;
    justify-content: space-evenly;
    
    align-items: center; /* 子要素を上下中央に揃える */
    height: 18.7179vw;
    width: auto;
}.modal_link_button_bottom{
    display: flex;
    justify-content: space-evenly;
    background-color: #53A5D6;
    align-items: center; /* 子要素を上下中央に揃える */
    height: 18.7179vw;
    width: auto;
    padding-bottom: 15.128dvw;
    margin-top: -35.128dvw;
}
.prolorgue{
    width: 94.8717vw;
    padding-top: 3.84615vw;
}
.about{
    width: 100vw;
    height: auto;
    padding: 0;
    margin: 0;
    padding-top: 9.7435vw;
    pointer-events: auto;
    background-color: #53A5D6;
    padding-bottom: 10dvw;
    margin-bottom: -3dvw;
}
/* 各ページに移るリンク */
.modal_header_link {
    margin-top: 2dvw;
    color: black;
    width: 38.717vw;
    height: auto;
}


/* 「起動方法」を入れ込むコンテナ */
.modal_contents {
    width: 77.6923vw;
    padding-top: 11.794vw;
    /* 文字色 */
}
.map1 {
    width: 88.974vw;
    padding: 0;
    padding-top: 9.74872vw;
    /* 文字色 */
}
.map2 {
    width: 88.974vw;
    padding: 0;
    margin: 0;
    /* 文字色 */
}
.map3 {
    width: 88.974vw;
    padding: 0;
    padding-bottom: 6.9231vw;
    /* 文字色 */
}
#fullscreenViewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  display: flex;
   flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow:hidden;
  touch-action: none; /*←すべて禁止してJS側で操作させる*/
}
#mapContainer{
  /*display: flex;
   flex-direction: column;
  justify-content: center;
  align-items: center;
    transform-origin: center center;
    will-change: transform;
    image-rendering: auto;*/
    /* position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: auto;
  display: block; */
  justify-content: center;
  align-items: center;
   position: absolute;
    overflow: hidden;
    touch-action: none;
}
#fullscreenViewer img {
  /*transform-origin: center center;*/
  display: block;
  /*touch-action: none;
  user-select: none;
  -webkit-user-drag: none;*/
}#zoomableImage{
    position: relative;
     width: auto;            /* ←ここ */
  max-width: 100%;
     display: block;
  transform: scale(1);
    transform-origin: center center;
     image-rendering: auto;
     
}
#closeBtn {
    position: fixed;
  top: 6.5dvw;
  width: 5dvw;
  right: 6.5dvw;
  height: 5dvw;
  z-index: 10000;
  cursor: pointer;
  z-index: 300;
}

/* モーダル内タイトル(下に英訳があるもの) */
.modal_title {
    margin: 0;
    font-size: 5.128vw;
    /* 文字サイズ */
}

/* モーダル内サブタイトル(英訳のやつ) */
.modal_subtitle {
    margin: 0;
    font-size: 3.076vw;
    /* 文字サイズ */
}



/* 推奨環境の元締め */
.modal_recommend {
    position: relative;
    background-color: #FFFFFF;
    /* 推奨環境の背景色 */
    width: 100vw;
    height: auto;
    text-align: center;
    color: #1374D5;
    /* 推奨環境の文字色 */
}

/* 本コンテンツは～の部分 */
.modal_recommend_device_text {
    font-size: 3.589vw;
    /* 文字サイズ */
    color: #434343;
    /* 文字色 */
}

/* iOS 16以降～の部分 */
.modal_recommend_device {
    font-size: 4.102vw;
    /* 文字サイズ */
    margin-bottom: 0;
    color: #434343;
    /* 文字色 */
}

/* ※を用いて色々書くときの元締め */
ul.modal_recommend_list {
    margin: 0;
    padding-top: 4.871vw;
    list-style-type: "※ ";
    text-align: left;
    width: 82vw;
    font-size: 2.820vw;
    /* 文字サイズ */
    color: #434343;
    /* 文字色 */
}

/* 各解説 */
.modal_recommend_text {
    display: block;
    line-height: 3.84615vw;
    margin-bottom: 1.282vw;
}

.modal_recommend_text_link {
    color: #0094A7;
    text-decoration: underline;
    /* 「こちら」のリンク用文字色 */
}

/* モーダル最下部の閉じるボタン */
.modal_close_button_parent {
    background-color: #0094A7;
    /* 背景色 */
    font-size: 4.102vw;
    /* 文字サイズ */
    color: white;
    /* 文字色 */
    width: 61.538vw;
    /* ボタンサイズ */
    height: 12.820vw;
    /* ボタンサイズ */
    display: table;
    text-align: center;
    margin: auto;
    margin-top: 10vw;
    border-radius: 10px;
}

.modal_close_button {
    display: table-cell;
    vertical-align: middle;
}
.close_button {
    display: block;
    position: absolute;
    z-index: 4;
    width: 5.1282vw;
    height: 5.1282vw;
    right: 5vw;
    top: 5vw;
}
.close_button::before,
.close_button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5vw;
    height: 5.1282vw;
    background: white;
}


.close_button::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.close_button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.modal_text_contents {
    display: flex;
    align-items: flex-start;
    text-align: left;
    margin-left: 10vw;
}

.modal_line{
    width: 5.641vw;
}

/* 各画像の大きさ調整。全部同じ大きさなことは基本的にない */
.modal_containts_img1 {
    width: 46.410vw;
    /* モーダル内1枚目の画像の横幅(縦幅はオート) */
    margin-left: 10vw;
}

.modal_containts_img2 {
    width: 64.102vw;
    /* モーダル内2枚目の画像の横幅(縦幅はオート) */
    padding-top: 2vw;
    padding-bottom: 10vw;
}

.modal_containts_img3 {
    width: 73.076vw;
    /* モーダル内3枚目の画像の横幅(縦幅はオート) */
    padding-top: 5vw;
    padding-bottom: 10vw;
}


.modal_contents_text {
    font-size: 4.102vw;
    color: black;
}

.modal_contents_text p {
    margin-top: 0vw;
    margin-bottom: 0vw;
}

.modal_containts_img {
    padding-top: 5.384vw;
    padding-bottom: 10vw;
}

.modal_containts_hand {
    position: absolute;
}




a-scene {
    pointer-events: none;
}