/* モーダル */
#modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  text-align: center;
  z-index: 1000;
  overflow-y: auto;
  box-sizing: border-box;
  overscroll-behavior: none;
  overflow-x: hidden;
}

/* 各セクションの区切り */
hr {
  width: 65.897vw;
}

/* モーダル上のバツボタン */
.close_button {
  display: block;
  position: absolute;
  z-index: 4;
  width: 5vw;
  height: 5vw;
  right: 3vw;
  top: 3vw;
}
.close_button::before,
.close_button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5vw;
  height: 5vw;
  background: white;
}

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

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

/* モーダル全体の箱 */
.modal_container {
  background-image: url(../img/modal/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  padding-bottom: 10vw;
}

/* モーダルヘッダー */
.modal_header {
  position: relative;
  background-image: url(../img/modal/menu_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  height: 113.846vw;
  text-align: center;
  color: white;
  font-size: 3.333vw;
}

/* モーダルヘッダータイトル */
.modal_logo {
  width: 57.179vw;
  margin-top: 7.5vw;
}

/* モーダルヘッダーの注釈的な部分の親玉 */
ul.modal_header_list {
  margin: auto;
  padding: 0;
  list-style-type: "・";
  padding-bottom: 4vw;
  letter-spacing: 0vw;
  text-align: left;
  width: 64vw;
  font-size: 3.589vw;
  color: white;
}

/* モーダルヘッダーの注釈的な部分の子分 */
.modal_header_text {
  display: block;
  line-height: 6vw;
  margin: 0;
  padding: 0;
  font-size: 3.589vw;
  white-space: nowrap;
}

/* カプセルに囲われている部分 */
.modal_header_title_accessory {
  display: block;
  background-color: white;
  width: 21.794vw;
  height: auto;
  margin: auto;
  font-size: 3.333vw;
  border-radius: 10px;
  color: black;
  margin-top: 7vw;
  margin-bottom: -2vw;
}

/* 各ページに移るリンク */
.modal_header_link {
  color: white;
  padding-bottom: 1.5vw;
}

/* 各セクションの親 */
.modal_contents {
  color: #000c98;
  margin-top: 4vw;
  margin-bottom: 8vw;
}

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

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

/* ①や②といった要素の親 */
.modal_text_contents {
  display: flex;
  align-items: center;
  text-align: left;
  margin-left: 10vw;
}

/* ①の部分 */
.modal_text_number {
  background-color: #c31323;
  color: white;
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5vw;
  position: relative;
  font-size: 4.615vw;
}

.modal_number {
  width: 14.102vw;
  height: 13.589vw;
  z-index: 20;
}

/* ①～③をつなぐ点線 */
.modal_text_number_line {
  position: absolute;
  top: 90%;
  left: 7.25%;
  width: 1.4vw;
  -webkit-mask-image: url(../img/line.png);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: repeat-y;
  -webkit-mask-position: center;
  mask-image: url(../img/line.png);
  mask-size: contain;
  mask-repeat: repeat-y;
  mask-position: center;
  background-color: #B900005f;
  z-index: 0;
}

/* 各番号の説明 */
.modal_contents_text {
  font-size: 4.102vw;
  line-height: 6vw;
  color: white;
  margin-left: 3vw;
}

/* ARを起動、の上にかかる指 */
.modal_containts_hand {
  position: absolute;
  width: 13vw;
  top: 7vw;
  left: 65vw;
}

/* 各画像の大きさ調整。全部同じ大きさなことは基本的にない */
.modal_containts_img1 {
  width: 70vw;
  margin-left: 10vw;
  padding-top: 4vw;
  padding-bottom: 10vw;
}

.modal_containts_img2 {
  width: 32.576vw;
  padding-top: 2vw;
  padding-bottom: 10vw;
}

.modal_containts_img3 {
  width: 30.256vw;
  padding-top: 2vw;
  padding-bottom: 3vw;
  margin-top: 7.5vw;
}

.modal_img_shadow {
  filter: drop-shadow(1vw 1vw #c31323);
}

/* 移動、写真といった各要素の親 */
ul.modal_shoot_list {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 移動、写真といった各要素の箱 */
.modal_shoot_list_contents {
  display: inline-block;
  text-align: center;
}

/* 移動、写真といった各動作のタイトルの箱 */
.modal_shoot_list_title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 3.9vw;
  background-color: #c31323;
  border-radius: 1vw;
  width: 30.769vw;
  height: 7.692vw;
  margin: 0 auto;
  color: white;
}

/* 移動、写真といった各要素のタイトルの配置 */
.modal_shoot_list_title_text {
  margin-left: 2.5vw;
}

/* 移動、写真といった各要素のg象 */
.modal_shoot_list_img {
  width: 33.076vw;
}

/* 移動、写真といった各要素のテキスト */
.modal_shoot_list_text {
  color: white;
  font-size: 3.4vw;
  margin: 0 auto;
  width: 40.066vw;
  margin-top: -5vw;
}

/* Model-Viewerの時しか使わないやつ */
.modal_shoot_text {
  font-size: 3.076vw;
  width: 70vw;
  color: #000000;
  margin: auto;
  margin-top: 6.923vw;
}

/* アイコン */
.modal_icon {
  position: absolute;
  left: 2.5vw;
  top: 0;
  bottom: 0;
  width: 4.615vw;
  height: 4.615vw;
  margin: auto 0;
  background-color: white;
}

.allow {
  -webkit-mask-image: url(../img/icon_allow.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_allow.svg);
  mask-size: 5vw;
  mask-position: center;
}

.download {
  -webkit-mask-image: url(../img/icon_download.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_download.svg);
  mask-size: 5vw;
  mask-position: center;
}

.expand {
  -webkit-mask-image: url(../img/icon_expand.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_expand.svg);
  mask-size: 5vw;
  mask-position: center;
}

.frame {
  -webkit-mask-image: url(../img/icon_frame.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_frame.svg);
  mask-size: 5vw;
  mask-position: center;
}

.hide {
  -webkit-mask-image: url(../img/icon_hide.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_hide.svg);
  mask-size: 5vw;
  mask-position: center;
}

.minus {
  -webkit-mask-image: url(../img/icon_minus.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_minus.svg);
  mask-size: 5vw;
  mask-position: center;
}

.photo {
  -webkit-mask-image: url(../img/icon_photo.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_photo.svg);
  mask-size: 5vw;
  mask-position: center;
}

.plus {
  -webkit-mask-image: url(../img/icon_plus.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_plus.svg);
  mask-size: 5vw;
  mask-position: center;
}

.refresh {
  -webkit-mask-image: url(../img/icon_refresh.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_refresh.svg);
  mask-size: 5vw;
  mask-position: center;
}

.return {
  -webkit-mask-image: url(../img/icon_return.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_return.svg);
  mask-size: 5vw;
  mask-position: center;
}

.share_icon {
  -webkit-mask-image: url(../img/icon_share.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_share.svg);
  mask-size: 5vw;
  mask-position: center;
}

.touch {
  -webkit-mask-image: url(../img/icon_touch.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_touch.svg);
  mask-size: 5vw;
  mask-position: center;
}

.video {
  -webkit-mask-image: url(../img/icon_video.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_video.svg);
  mask-size: 5vw;
  mask-position: center;
}

.change {
  -webkit-mask-image: url(../img/icon_change.svg);
  -webkit-mask-size: 5vw;
  -webkit-mask-position: center;
  mask-image: url(../img/icon_change.svg);
  mask-size: 5vw;
  mask-position: center;
}

/* 推奨環境の元締め */
.modal_recommend {
  position: relative;
  background-color: #430303;
  width: 100vw;
  height: auto;
  text-align: center;
  color: #000c98;
}

/* 本コンテンツは～の部分 */
.modal_recommend_device_text {
  font-size: 3.589vw;
  color: white;
}

/* iOS 16以降～の部分 */
.modal_recommend_device {
  font-size: 4.102vw;
  margin-top: 2vw;
  margin-bottom: 0;
  color: white;
}

/* ※を用いて色々書くときの元締め */
ul.modal_recommend_list {
  margin: 0;
  padding-top: 4.871vw;
  list-style-type: "※";
  padding-left: 13.333vw;
  padding-bottom: 6vw;
  text-align: left;
  width: 82vw;
  font-size: 2.82vw;
  color: white;
}

/* 各解説 */
.modal_recommend_text {
  display: block;
  line-height: 6vw;
}

/* 各解説のリンク用 */
.modal_recommend_text_link {
  color: white;
  text-decoration: underline;
}

/* モーダル最下部の閉じるボタン */
.modal_close_button_parent {
  width: 61.538vw;
  height: 12.82vw;
  margin: auto;
  margin-top: 10vw;
}

.modal_close_button {
  width: 100%;
}

.button_modal {
  margin: auto;
  width: 46.923vw;
}

.modal_title_bg {
  position: absolute;
  width: 20.512vw;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
}

.modal_title_img {
  position: absolute;
  height: 13vw;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
}



@media screen and (orientation: landscape) {
  #modal {
    position: fixed;
    width: 390px;                /* 100vw */
    height: 100vh;
    top:0;
    left:50%;
    transform: translateX(-50%);
  }

  hr {
    width: 257px;                /* 65.897vw */
  }

  .close_button {
    width: 19.5px;               /* 5vw */
    height: 19.5px;              /* 5vw */
    right: 11.7px;               /* 3vw */
    top: 11.7px;                 /* 3vw */
  }

  .close_button::before,
  .close_button::after {
    width: 1.9px;                /* 0.5vw */
    height: 19.5px;              /* 5vw */
  }

  .modal_container {
    padding-bottom: 39px;        /* 10vw */
  }

  .modal_header {
    width: 390px;                /* 100vw */
    height: 444px;               /* 113.846vw */
    font-size: 13px;             /* 3.333vw → 13.0px */
  }

  .modal_logo {
    width: 223px;                /* 57.179vw */
    margin-top: 29.2px;          /* 7.5vw */
  }

  ul.modal_header_list {
    padding-bottom: 15.6px;      /* 4vw */
    letter-spacing: 0px;         /* 0vw */
    width: 250px;                /* 64vw */
    font-size: 14px;             /* 3.589vw → 14.0px */
  }

  .modal_header_text {
    line-height: 23.4px;         /* 6vw */
    font-size: 14px;             /* 3.589vw → 14.0px */
  }

  .modal_header_title_accessory {
    width: 85px;                 /* 21.794vw */
    font-size: 13px;             /* 3.333vw → 13.0px */
    margin-top: 27.3px;          /* 7vw */
    margin-bottom: -7.8px;       /* -2vw */
  }

  .modal_header_link {
    padding-bottom: 5.8px;       /* 1.5vw */
  }

  .modal_contents {
    margin-top: 15.6px;          /* 4vw */
    margin-bottom: 31.2px;       /* 8vw */
  }

  .modal_title {
    padding-top: 27.3px;         /* 7vw */
    font-size: 20px;             /* 5.128vw → 20.0px */
  }

  .modal_subtitle {
    font-size: 12px;             /* 3.076vw → 12.0px */
  }

  .modal_text_contents {
    margin-left: 39px;           /* 10vw */
  }

  .modal_text_number {
    width: 31.2px;               /* 8vw */
    height: 31.2px;              /* 8vw */
    margin-right: 19.5px;        /* 5vw */
    font-size: 18px;             /* 4.615vw → 18.0px */
  }

  .modal_number {
    width: 55px;                 /* 14.102vw */
    height: 53px;                /* 13.589vw */
  }

  .modal_text_number_line {
    width: 5.5px;                /* 1.4vw */
  }

  .modal_contents_text {
    font-size: 16px;             /* 4.102vw → 16.0px */
    line-height: 23.4px;         /* 6vw */
    margin-left: 11.7px;         /* 3vw */
  }

  .modal_containts_hand {
    width: 50.7px;               /* 13vw */
    top: 27.3px;                 /* 7vw */
    left: 253.5px;               /* 65vw */
  }

  .modal_containts_img1 {
    width: 273px;                /* 70vw */
    margin-left: 39px;           /* 10vw */
    padding-top: 15.6px;         /* 4vw */
    padding-bottom: 39px;        /* 10vw */
  }

  .modal_containts_img2 {
    width: 127px;                /* 32.576vw */
    padding-top: 7.8px;          /* 2vw */
    padding-bottom: 39px;        /* 10vw */
  }

  .modal_containts_img3 {
    width: 118px;                /* 30.256vw */
    padding-top: 7.8px;          /* 2vw */
    padding-bottom: 11.7px;      /* 3vw */
    margin-top: 29.2px;          /* 7.5vw */
  }

  .modal_img_shadow {
    filter: drop-shadow(3.9px 3.9px #c31323); /* 1vw */
  }

  .modal_shoot_list_title {
    font-size: 15.2px;           /* 3.9vw */
    border-radius: 3.9px;        /* 1vw */
    width: 120px;                /* 30.769vw */
    height: 30px;                /* 7.692vw */
  }

  .modal_shoot_list_title_text {
    margin-left: 9.8px;          /* 2.5vw */
  }

  .modal_shoot_list_img {
    width: 129px;                /* 33.076vw */
  }

  .modal_shoot_list_text {
    font-size: 13.3px;           /* 3.4vw */
    width: 156px;                /* 40.066vw */
    margin-top: -19.5px;         /* -5vw */
  }

  .modal_shoot_text {
    font-size: 12px;             /* 3.076vw → 12.0px */
    width: 273px;                /* 70vw */
    margin-top: 27.0px;          /* 6.923vw → 約27.0px */
  }

  .modal_icon {
    left: 9.8px;                 /* 2.5vw */
    width: 18px;                 /* 4.615vw → 約18px */
    height: 18px;                /* 同上 */
  }

  .allow,
  .download,
  .expand,
  .frame,
  .hide,
  .minus,
  .photo,
  .plus,
  .refresh,
  .return,
  .share_icon,
  .touch,
  .video,
  .change {
    -webkit-mask-size: 19.5px;   /* 5vw */
    mask-size: 19.5px;           /* 5vw */
  }

  .modal_recommend {
    width: 390px;                /* 100vw */
  }

  .modal_recommend_device_text {
    font-size: 14px;             /* 3.589vw → 14.0px */
  }

  .modal_recommend_device {
    font-size: 16px;             /* 4.102vw → 16.0px */
    margin-top: 7.8px;           /* 2vw */
  }

  ul.modal_recommend_list {
    padding-top: 19px;           /* 4.871vw → 約19.0px */
    padding-left: 52px;          /* 13.333vw → 約52.0px */
    padding-bottom: 23.4px;      /* 6vw */
    width: 320px;                /* 82vw */
    font-size: 11px;             /* 2.82vw → 約11.0px */
  }

  .modal_recommend_text {
    line-height: 23.4px;         /* 6vw */
  }

  .modal_close_button_parent {
    width: 240px;                /* 61.538vw */
    height: 50px;                /* 12.82vw */
    margin-top: 39px;            /* 10vw */
  }

  .button_modal {
    width: 183px;                /* 46.923vw */
  }

  .modal_title_bg {
    width: 80px;                 /* 20.512vw */
  }

  .modal_title_img {
    height: 50.7px;              /* 13vw */
  }
}