/* モーダル */
#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;
}

/* 各セクションの区切り */
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-color: #FFFEEEed;
    /* 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-color: #53A5D6;
    width: 100vw;
    height: auto;
    text-align: center;
    color: white;
    font-size: 3.333vw;
}

/* モーダルヘッダーの三角部分 */
.modal_header::after {
    content: '';
    position: absolute;
    top: 100%;
    left: calc(50vw - 50%);
    width: 0;
    height: 0;
    border-top: 12.820vw solid #53A5D6;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
}

/* モーダルヘッダータイトル */
.modal_header_title {
    margin: 0;
    padding: 0;
    padding-top: 14.102vw;
    padding-bottom: 2.564vw;
    width: 57.051vw;
}

/* モーダルヘッダーの注釈的な部分の親玉 */
ul.modal_header_list {
    margin: auto;
    padding: 0;
    padding-top: 4.871vw;
    list-style-type: "・";
    padding-bottom: 4vw;
    letter-spacing: 0vw;
    text-align: left;
    width: 76vw;
    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: #003894;
    width: 21.794vw;
    height: auto;
    margin: auto;
    font-size: 3.333vw;
    border-radius: 10px;
    color: white;
    margin-top: 7vw;
    margin-bottom: -2vw;
}

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

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

/* モーダル内タイトル(下に英訳があるもの) */
.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: #0086C9;
    color: white;
    width: 8vw;
    height: 7.5vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2vw;
    position: relative;
    font-size: 4.615vw;
    padding-bottom: 0.5vw;
}

/* ①～③をつなぐ点線 */
.modal_text_number_line {
    position: absolute;
    top: 100%;
    left: 46%;
    width: 0.8vw;
    -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: #D1D1D1;
}

/* 各番号の説明 */
.modal_contents_text {
    font-size: 4.102vw;
    line-height: 6vw;
    color: #000000;
    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: 6vw;
    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 #0074D5);
}

/* 移動、写真といった各要素の親 */
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: #0086C9;
    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: 23.333vw;
    padding-top: 4.102vw;
}

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

/* 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: #FFFFFFb3;
    width: 100vw;
    height: auto;
    text-align: center;
    color: #0086C9;
}

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

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

/* ※を用いて色々書くときの元締め */
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.820vw;
    color: black;
}

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

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

/* モーダル最下部の閉じるボタン */
.modal_close_button_parent {
    background-color: #0086C9;
    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;
}

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