#wrapper{
    width:100vw;
    position: relative;
    overflow: hidden;
    display:none;
    font-family: "UD Shin Maru Go Light";
    min-height:-webkit-fill-available;
}
#wrapper_notice{
    width:100vw;
    height:100vh;
    display:none;
}
body{
    margin: 0 auto;
    min-height:100vh;
    min-height:-webkit-fill-available;
}
body,#topmask,#bottommask,#copyright_base,#copyright_text,#orientation_alert_base,#orientation_alert_base2,#loading {
    background-color: #ffe6cf;
}
p{
    margin: 0 auto;
}
#header_base{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 12.5vw;
    z-index: 99999;
    display: none;
    background:#60269e;
    display: grid; /* FlexからGridに変更 */
    grid-template-columns: repeat(3, 1fr); /* 3つの等間隔の列を作成 */
    box-sizing: border-box; /* パディングを含めて全体の幅を100%に */
    align-items: center; /* 各セルのアイテムを縦方向の中央に配置 */
    gap: 7vw; /* 各セル間のスペースを設定 */
}
#header_base > div {
    text-align: center; /* 各セル内のテキストを中央に配置 */
}

#header_base img {
    max-width: 100%;
    height: auto;
}
.logo{
    width: 60vw;
}
#btn-asobikata{
    margin-top:-0.4vw;
    margin-right:0vw;
    width: 100%;
}
#btn-home{
    margin-top:-0.4vw;
    margin-left:0vw;
    width: 100%;
}
#btn-home img{
    width: 13.5vw;
}
#topmask{
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 9996;
}
#bottommask{
    position: absolute;
    width: 100%;
    z-index: 9996;
}
#camera-inner,#frame-inner,#bottomline-inner{
    position: absolute;
    z-index:998;
}
#bottom_base {
    position: fixed;
    display: grid; /* FlexからGridに変更 */
    grid-template-columns: repeat(3, 1fr); /* 3つの等間隔の列を作成 */
    width: 100%;
    z-index: 9999;
    background-color: #60269e;
    padding: 0 1vw; /* 左右に1vwのパディングを追加して余白を確保 */
    box-sizing: border-box; /* パディングを含めて全体の幅を100%に */
    align-items: center; /* 各セルのアイテムを縦方向の中央に配置 */
    gap: 1vw; /* 各セル間のスペースを設定 */
    display: none; /* 最後のdisplayプロパティをnoneに設定 */
}

#bottom_base > div {
    text-align: center; /* 各セル内のテキストを中央に配置 */
}

#bottom_base img {
    max-width: 100%;
    height: auto;
}
#choice-inner,#shutter-inner,#rotate-inner{
    z-index:998;
}
#shutter-inner{
    height: 15vw;
}
#shutter-inner img{
    height: 11vw;
}
#rotate-inner,#choice-inner{
    height: 15vw;
}
#bottomline-inner,#bottomline-inner > img{
    position: absolute;
    width: 100vw;
    height: 1.83vw;
}
#btn-shutter{
    margin:0 auto;
    margin-bottom: 2vw;
    margin-top: 1.8vw;
    width: 13.75vw;
}
#btn-choice{
    margin:0 auto;
    width: 31vw;
    margin-top:1.5vw;
    margin-left:4vw;
}
#btn-rotate{
    margin:0 auto;
    width: 31vw;
    margin-top:1.5vw;
    margin-right:4vw;
}
#btn-back{
    margin:0 auto;
    width: 9.5vw;
    margin-top:2.5vw;
}
#btn-frame{
    width: 20vw;
    margin-top: -3.9vw;
    margin-left: 6vw;
    height: 20vw;
    background-color: white;
}
#btn-frame img{
    margin:0 auto;
    width: 20vw;
}

#frame-inner h2{
    margin-bottom: 3px;
}
#framelist{
    list-style: none;
    padding-left: 0px;
}
#framelist li{
    display: inline;
    cursor: pointer;
    margin-right: 5px;
}
.framelist > img{
    width:26vw;
}
.framechoice {
    position: relative;
    margin:0;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    transition: opacity 0.3s;
}

.framechoice.active .overlay {
    opacity: 1;
}
#frame_base{
    position:fixed;
    display:none;
    bottom:0px;
    width: 100%;
    background-color:white;
    z-index:9998;
    animation: SlideIn 0.3s;
}
@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateY(16vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#thumbnail-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0px 0.5vw;
  width: 100%;
  padding: 0.5vw 0;
  position: absolute;
  z-index:9999;
  display: none;
  background-color: #ffe6cf;
}

#thumbnail-container img {
    width: 100%;
    max-width: calc(100% - 0vw);
    height: auto;
    object-fit: cover;
}
#copyright_base{
    position:fixed;
    display: flex;
    bottom:0;
    width: 100%;
    z-index:9997;
    height: 5vw;
    overflow: hidden;
}
#copyright_text{
    position:relative;
    width: 100%;
    z-index:9997;
    height: 5vw;
    font-size: 2.5vw;
    margin-top: 0vw;
    text-align:center;
    color: white;
    background-color: #60269e;
}

#orientation_alert_base,#orientation_alert_base2,#loading{
    position:fixed;
    bottom:0px;
    width: 100%;
    height: 100%;
    z-index:9999;
    text-align:center;
    color:#5A1E00;
    font-size:5vw;
}
#orientation_alert_base,#orientation_alert_base2,#defaultbrowser_chrome,#defaultbrowser_safari{
    display:none;
}
#loading{
    top:15vw;
}
#camera{ position:absolute; z-index:10; }
#frame{ position:absolute; z-index:20; }
#still{ position:relative;display:none; }
#camera{ width:100%;height:100%; }
#frame,#still{ width:100%;height:100%;display:none; }
#result{ width:80%;height:80%; }
#frame,#still{ position:relative; }

.modal_preview_close_btn {
    position: absolute;
    z-index: 2;
    top: 2vw;
    right: 5vw;
    cursor: pointer;
    display: inline-block;
    width: 10vw;
    height: 10vw;
    overflow: hidden;
    border: none;
    background: transparent;
}
.modal_preview_close_btn::before, .modal_preview_close_btn::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #fff;
    border-radius: 5px;
    margin-top: -6px;
}
.modal_preview_close_btn::before {
    transform: rotate(45deg);
}
.modal_preview_close_btn::after {
    transform: rotate(-45deg);
}


@keyframes modal_picture{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@keyframes modal_picture_inner{
    from{
        transform:translate(0, 100px);
    }
    to{
        transform:translate(0, 0);
    }
}
.modal_picture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 10000000;
    opacity: 1;
    animation-timing-function: ease-out;
    animation-duration: .3s;
    animation-name: modal_picture;
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -ms-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
}
.modal_picture_close {
  opacity: 0
}

.modal_picture_close .modal_picture_wrap {
  -webkit-transform: translate(0, 100px);
  -moz-transform: translate(0, 100px);
  -ms-transform: translate(0, 100px);
  -o-transform: translate(0, 100px);
  transform: translate(0, 100px)
}

.modal_picture_body {
    max-width: 800px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: table;
}
.modal_picture_inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.modal_picture_wrap {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 100%;
    animation-timing-function: ease-out;
    animation-duration: .3s;
    animation-name: modal_picture_inner;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -ms-transition: -ms-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
}
.modal_picture_wrap img {
    position: absolute;
    top: 0;
    left: 0;
/*    width: 100%; */
}
.ff_qr {
  transform:translate(0,0);
  width: 1600px;
  height: 1600px;
  transform: scale(0.5);
  transform-origin: top left;
}
.modal_picture_close_btn {
    position: absolute;
    z-index: 2;
    top: -10vw;
    right: 5vw;
    cursor: pointer;
    display: inline-block;
    width: 10vw;
    height: 10vw;
    overflow: hidden;
    border: none;
    background: transparent;
}
.modal_picture_close_btn::before, .modal_picture_close_btn::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #fff;
    border-radius: 5px;
    margin-top: -6px;
}
.modal_picture_close_btn::before {
    transform: rotate(45deg);
}
.modal_picture_close_btn::after {
    transform: rotate(-45deg);
}


/*---------------------------------------*/
/* ダイアログ                            */
/*---------------------------------------*/
#dialog-outer{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1000;
    width: 100%;
    height: 100%;
    min-height: 1200px;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
    z-index:9999999;
}
.dialog{
    display: none;
    margin: 13vw 0 0 0;
    padding: 0px;
}

#dialog-result{
    width:100vw;
    padding-bottom: 2vw;
    text-align:center;
    background-color: white;
    font-size:5vw;
}
#result_img{
    width:100vw;
}
#dialog-result-close{
    cursor: pointer;
}
#dialog-result-dl{
    width: 650px;
    height: 60px;
}