/*
==========================================================================
画像アップロードフォーム
==========================================================================
*/

div#upload_image{
width:100%;
margin:0 auto;}
div#upload_image div{
display:flex;
width:100%;
align-items:center;
flex-wrap:wrap;
margin:0 auto 20px auto;}
div#upload_image div input{display:none;}

/*擬似テキストエリア*/
div#upload_image div p.text{
display:inline-block;
width:calc(100% - 170px);
color:#555;
background-color:#fff;
font-size:14px;
font-weight:bold;
border:3px solid #14546a;
margin:0 20px 0 0;
padding:10px;}
div#upload_image div p.text.select{
font-size:12px;
font-weight:normal;
background:#ff5050;
border:3px solid #ff5050;
color:#fff;
text-align:center;}
div#upload_image div p.text span{color:#f00;}
#upload3 p.text span,
#upload4 p.text span,
#upload5 p.text span{color:#888 !important;}

/*ファイルを選択 ボタン*/
div#upload_image div button,
button.preview{
width:150px;
height:56px;
color:#fff;
background-color:transparent !important;
background-image:url(../images/original/upload/btn_form.png);
background-size:100% auto;
background-repeat:no-repeat;
font-size:12px;
font-weight:bold;
border:none;
cursor:pointer;}
div#upload_image div button:hover{background-position:0 -56px;}
div#upload_image div button span{vertical-align:10px;}
div#upload_image div button:hover span{vertical-align:0;}

button.preview{width:110px; height:41px;}
button.preview:hover{background-position:0 -41px;}
button.preview:disabled{filter:grayscale(100%); opacity:.7;}
@media screen and (max-width:370px){
button.preview{width:90px; height:34px;}
button.preview:hover{background-position:0 -34px;}}

/*確認文言*/
div#upload_image #notice{display:block !important; width:100%; color:#14546a; font-size:15px; font-weight:bold; text-align:center !important; margin:50px auto;}
div#upload_image #notice span{color:#ed1e79; font-size:20px;}

/*プレビューを確認ボタン*/
div#upload_image input#preview_btn{background-image:url(../images/original/upload/btn_preview.png);}

@media screen and (max-width:800px){
div#upload_image{width:96%;}
div#upload_image #notice{font-size:13px; margin:30px auto;}
div#upload_image #notice span{font-size:16px;}}

@media screen and (max-width:700px){
div#upload_image div p.text{font-size:12px;}}

@media screen and (max-width:670px){
div#upload_image #notice{text-align:left !important; margin:20px auto;}}

@media screen and (max-width:600px){
div#upload_image div p.text{width:calc(100% - 130px); font-size:11px; margin:0 10px 0 0;}
div#upload_image div button{width:120px; height:45px; font-size:12px;}
div#upload_image div button:hover{background-position:0 -45px;}
div#upload_image div button span{vertical-align:5px;}}

@media screen and (max-width:545px){
div#upload_image div p.text{width:calc(100% - 105px); padding:10px 5px; margin:0 5px 0 0;}
div#upload_image div button{width:100px; height:38px; font-size:11px;}
div#upload_image div button:hover{background-position:0 -37px;}}

@media screen and (max-width:505px){
div#upload_image{width:90%;}
div#upload_image div{justify-content:flex-end !important; margin:0 auto 15px auto;}
div#upload_image div p.text{width:100%; margin:0 auto 5px;}
div#upload_image #notice{font-size:12px; margin:10px auto;}}

@media screen and (max-width:420px){
div#upload_image{width:96%;}}

@media screen and (max-width:400px){
div#upload_image{width:98%;}
div#upload_image div p.text{font-size:10.5px;}}

/*
==========================================================================
upload-preview
==========================================================================
*/
#upload-preview{width:100%; margin:0 auto;}
#upload-preview div:after, #upload-preview ul:after{display:none;}

#upload-preview .card-preview .preview-inner{display:flex; align-items:flex-start; justify-content: center; margin-bottom: 30px;}
#upload-preview .card-preview .preview-inner .card-area{width:341px;}

/*card-img*/
#upload-preview .card-preview .preview-inner .card-area .card-img{position:relative; width:341px; height:528px; /*上5px 下5px+6px*/ background-color:#fff; border:5px solid #0a3c4e;}
#upload-preview .card-preview .preview-inner .card-area .card-img img{width:331px; height:512px;}
#upload-preview .card-preview .preview-inner .card-area .card-img .canvas_wrapper{width:331px; height:512px;position:relative;}
#upload-preview .card-preview .preview-inner .card-area .card-img #qr_canvas{width:331px; height:512px;position:absolute;top:0px;left:0px;}
#upload-preview .card-preview .preview-inner .card-area .card-img #preview_canvas{width:331px; height:512px;position:absolute;top:0px;left:0px;}
#upload-preview .card-preview .preview-inner .card-area .card-img #preview_canvas_holo_text{width:331px; height:512px;position:absolute;top:0px;left:0px;}
#upload-preview .card-preview .preview-inner .card-area .card-img #preview_canvas_holo_text_view{width:331px; height:512px;position:absolute;top:0px;left:0px;}
#upload-preview .card-preview .preview-inner .card-area .card-img .ct_b{display:none;}

#upload-preview .card-preview .preview-inner:not(.yoko) .card-area .card-img{border-bottom-width:11px;}

/*frame*/
#upload-preview .card-preview .preview-inner .card-area .card-img #frame{
position:absolute;
top:0;
left:0;
width:331px;
height:512px;
background-size:100% auto;
background-repeat:no-repeat;}
#upload-preview .card-preview .preview-inner .card-area .card-img #frame.frame00{background-image:url(../images/original/upload/frame_none.png);}
#upload-preview .card-preview .preview-inner .card-area .card-img #frame.frame01{background-image:url(../images/original/shimajiro/frame01.png);}
#upload-preview .card-preview .preview-inner .card-area .card-img #frame.frame02{background-image:url(../images/original/shimajiro/frame02.png);}
#upload-preview .card-preview .preview-inner .card-area .card-img #frame.frame03{background-image:url(../images/original/shimajiro/frame03.png);}


/*holo*/
#upload-preview .card-preview .preview-inner .card-area .card-img #holo{
position:absolute; top:0; left:0; width:331px; height:512px; background-size:100% auto;background-repeat:no-repeat;}

#upload-preview .card-preview .preview-inner .card-area .card-img #holo.holo01{background-image:url(../images/original/shimajiro/holo01.png);}
#upload-preview .card-preview .preview-inner .card-area .card-img #holo.holo02{background-image:url(../images/original/shimajiro/holo02.png);}


/*sample*/
#upload-preview .card-preview .preview-inner .card-area .card-img #sample{
position:absolute;
top:0;
left:0;
width:331px;
height:512px;
background-image:url(../images/original/upload/sample.png);
background-size:100% auto;
background-repeat:no-repeat;}

/*slider*/
#upload-preview .card-preview .preview-inner .card-area .slider{position:relative; display:flex; width:341px; height:36px; margin:10px auto 0;}
#upload-preview .card-preview .preview-inner .card-area .slider span{display:inline-block; width:36px; height:36px; background-position:center;}
#upload-preview .card-preview .preview-inner .card-area .slider span:hover{cursor:pointer;}
#upload-preview .card-preview .preview-inner .card-area .slider span#scale_s{background-image:url(../images/original/upload/scale01.png); margin:0 5px 0 0;}
#upload-preview .card-preview .preview-inner .card-area .slider span#scale_b{background-image:url(../images/original/upload/scale02.png); margin:0 0 0 5px;}
#upload-preview .card-preview .preview-inner .card-area .slider #zoomslider{background:transparent !important;}

/*フレーム試着*/
#custom > div{
color:#14546a;
text-align:center;
font-weight:bold;
padding:0;}
.box{
background:rgba(255,255,255,.5);
border:3px solid #14546a;
border-radius:20px;
padding:10px;}

p.box-title > span{
display:inline-block;
position:relative;
height:30px;
color:#fff;
background:#14546a;
font-size:20px;
line-height:36px;
padding:0 15px;}
p.box-title > span::before,
p.box-title > span::after{
display:block;
content:"";
position:absolute;
top:0;
width:0;
height:0;
border-style:solid;}
p.box-title > span::before{
left:-30px;
border-color:transparent transparent #14546a transparent;
border-width:0px 0px 30px 30px;}
p.box-title > span::after{
right:-30px;
border-color:transparent transparent transparent #14546a;
border-width:30px 0px 0px 30px;}

#frame-btn,#holo-btn{margin-bottom:20px;}
#frame-btn > div,#holo-btn > div{display:flex; flex-wrap:wrap; margin-bottom:5px;}
#frame-btn > div > p,#holo-btn > div > p{
min-height:40px;
aspect-ratio:1/1;
background-color:#fff;
background-size: 100%;
border:1px solid #000;
margin:5px;
cursor:pointer;
transition:all .2s ease;
filter:saturate(100%) brightness(100%);}
#frame-btn > div > p:hover,#holo-btn > div > p:hover{transform:translateY(-5px); filter:saturate(120%) brightness(110%);}

#frame-btn > div > p#frame00{background-image:url(../images/original/upload/icon_frame_none.jpg);}
#frame-btn > div > p#frame01{background-image:url(../images/original/shimajiro/icon_f01.png);}
#frame-btn > div > p#frame02{background-image:url(../images/original/shimajiro/icon_f02.png);}
#frame-btn > div > p#frame03{background-image:url(../images/original/shimajiro/icon_f03.png);}

#holo-btn > div > p#holo01{background-image:url(../images/original/shimajiro/icon_h01.png);}
#holo-btn > div > p#holo02{background-image:url(../images/original/shimajiro/icon_h02.png);}

#frame-btn > div > p.none,#holo-btn > div > p.none{
background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
pointer-events:none;}

@media screen and (min-width:801px){
#custom{width:calc(100% - 431px); margin: auto;}
#frame-btn > div,#holo-btn > div{padding:/*30px*/ 10px;}
#frame-btn > div > p,#holo-btn > div > p{width:/*calc((100% / 3) - 10px)*/ calc((100% / 6) - 10px);}}
@media screen and (max-width:800px){#frame-btn > div > p,#holo-btn > div > p{width:calc((100% / 6) - 10px);}}
@media screen and (max-width:640px){#frame-btn > div > p,#holo-btn > div > p{width:calc((100% / 5) - 10px);}}
@media screen and (max-width:480px){
#frame-btn,#holo-btn{font-size:11px;}
.box{border-radius:10px;}
p.box-title > span{height:24px; font-size:16px; line-height:26px;}
p.box-title > span::before{left:-24px; border-width:0px 0px 24px 24px;}
p.box-title > span::after{right:-24px; border-width:24px 0px 0px 24px;}
#frame-btn > div > p,#holo-btn > div > p{width:calc((100% / 6) - 5px); margin:5px 2.5px;}}

/*ホロ文字追加*/
#holo_text label{display:block; width:50px; height:50px; background:#fff; font-size:40px; border:1px solid #14546a; border-radius:5px; cursor:pointer; transition:all .2s ease;}
#holo_text label::before{content:"あ";}
#holo_text label span{display:none;}
#holo_text ul{display:flex; justify-content:center; margin:8px auto;}
#holo_text ul li + li{margin-left:8px;}
#holo_text ul li:nth-child(1){font-family:"Noto Serif JP", serif; font-weight:900; line-height:43px;}
#holo_text ul li:nth-child(2){font-family:"Noto Sans JP", sans-serif; font-weight:800; line-height:44px;}
#holo_text ul li:nth-child(3){font-family:"M PLUS Rounded 1c", sans-serif; font-weight:700; line-height:48px;}
#holo_text ul li:nth-child(4){font-family:"Kaisei Decol", serif; font-weight:700; line-height:45px;}

#holo_text input[type="radio"]:checked + label{color:#fff; background:#14546a;}
#holo_text input[type="text"]{border:1px solid #000; font-size:14px; text-align:center; padding:5px;}

.taboo_word,
#holo_text .box > span{color:#ed1e79;}
.taboo_word{margin:0 auto 5px;}

/*edit-btn*/
#upload-preview .card-preview .preview-inner #edit-btn{width:70px; height:528px; background-image:url(../images/original/upload/edit_bg.png); background-position:top left; background-size:100% 100%; padding:8px;}
#upload-preview .card-preview .preview-inner #edit-btn p{width:50px; height:50px; background-size:100% auto;}
#upload-preview .card-preview .preview-inner #edit-btn p:hover{cursor:pointer; background-position:0 -50px;}
#upload-preview .card-preview .preview-inner #edit-btn p#up_btn{background-image:url(../images/original/upload/arrow01.png);}
#upload-preview .card-preview .preview-inner #edit-btn p#down_btn{background-image:url(../images/original/upload/arrow02.png);}
#upload-preview .card-preview .preview-inner #edit-btn p#left_btn{background-image:url(../images/original/upload/arrow03.png);}
#upload-preview .card-preview .preview-inner #edit-btn p#right_btn{background-image:url(../images/original/upload/arrow04.png);}
#upload-preview .card-preview .preview-inner #edit-btn p#rotate_right{background-image:url(../images/original/upload/rotate01.png);}
#upload-preview .card-preview .preview-inner #edit-btn p#rotate_left{background-image:url(../images/original/upload/rotate02.png);}

@media screen and (min-width:801px){
#upload-preview .inner{display:flex; flex-wrap:wrap; justify-content:space-between;}
#upload-preview .card-preview .preview-inner{padding-top:30px;}}
@media screen and (max-width:800px){
#upload-preview .card-preview .preview-inner:not(.yoko){width:411px; margin:0 auto 30px;}}
@media screen and (max-width:420px){
#upload-preview .card-preview .preview-inner{width:100%; max-width:341px; flex-wrap:wrap; margin:0 auto 30px;}
#upload-preview .card-preview .preview-inner .card-area .slider{width:100%; max-width:341px; margin:10px auto;}
#upload-preview .card-preview .preview-inner #edit-btn{
display:flex;
width:100%;
max-width:341px;
height:auto;
background-image:none;
justify-content:space-between;
padding:0;}}

/*画像プレビュー 右エリア*/
.card-notice{width:100%; margin:20px auto 0;}

/*エラー文言*/
.card-notice div{
display:none;
color:#ed1e79;
background-color:#fff;
font-size:13px;
border:2px solid #ed1e79;
padding:20px;}
.card-notice div strong{display:block; font-size:16px; text-align:center; margin:0 auto;}
.card-notice div strong span{
display:inline-block;
width:30px;
height:30px;
color:#fff;
background-color:#ed1e79;
font-size:20px;
line-height:30px;
text-align:center;
border-radius:50%;
margin-right:5px;}
.card-notice div p span{display:inline-block; font-size:15px; font-weight:bold; margin-right:5px;}

/*裏面を見るボタン*/
.card-notice #back_btn{background-image:url(../images/original/upload/btn_back.png);}
.card-notice #front_btn{background-image:url(../images/original/upload/btn_front.png);display:none;}
@media screen and (max-width:830px){
.card-notice div{padding:10px 15px;}
.card-notice div strong{display:block; font-size:14px; margin:0 auto 10px;}}
@media screen and (max-width:800px){
.card-notice{/*width:411px;*/ margin:0 auto;}
.card-notice div{padding:20px; margin:0 0 30px 0;}
.card-notice div strong{font-size:16px; margin:0 auto 20px;}}
@media screen and (max-width:420px){
.card-notice div{font-size:12px; padding:10px;}
.card-notice div strong{font-size:13px; margin:0 auto 10px;}
.card-notice div strong span{width:25px; height:25px; font-size:18px;}}

/*アップロードするボタン*/
#upload_btn{background-image:url(../images/original/upload/btn_upload.png);}

/*
@media screen and (min-width:801px){
#upload-preview .inner{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
#upload-preview .card-preview .preview-inner{padding-top:30px;}}
*/

@media screen and (max-width:830px){
.card-notice div{padding:10px 15px;}
.card-notice div strong{display:block; font-size:14px; margin:0 auto 10px;}}

/*
@media screen and (max-width:800px){
#upload-preview .card-preview .preview-inner{width:411px; margin:0 auto 30px;}
#upload-preview .card-preview .preview-inner .card-area{margin:0 auto;}
*/

.card-notice{ margin:0 auto;}
.card-notice div{padding:20px; margin:0 0 30px 0;}
.card-notice div strong{font-size:16px; margin:0 auto 20px;}}

/*
@media screen and (max-width:420px){
#upload-preview .card-preview .preview-inner{width:100%; max-width:341px; flex-wrap:wrap; margin:0 auto 30px;}
#upload-preview .card-preview .preview-inner .card-area .slider{width:100%; max-width:341px; margin:10px auto;}
#upload-preview .card-preview .preview-inner #edit-btn{
display:flex;
width:100%;
max-width:341px;
height:auto;
background-image:none;
justify-content:space-between;
padding:0;}
*/

.card-notice div{font-size:12px; padding:10px;}
.card-notice div strong{font-size:13px; margin:0 auto 10px;}
.card-notice div strong span{width:25px; height:25px; font-size:18px;}}


/*調整
@media screen and (min-width:421px){
#upload-preview .card-preview .preview-inner #edit-btn{margin-left:-2px;}
#upload-preview .card-preview .preview-inner .card-area .card-img{border-radius:0 0 3px 0;}}*/

/*注意文言*/
#upload-preview .rule-notce{
width:100%;
color:#ed1e79;
background-color:#fff;
font-size:13px;
font-weight:bold;
border:2px solid #ed1e79;
padding:20px;
margin:20px auto 0;}

#upload-preview .rule-notce .inner{flex-wrap: nowrap; display:flex; width:100%; /*max-width:700px;*/ align-items:center; margin:0 auto;}
#upload-preview .rule-notce .inner p span{
display:inline-block;
width:30px;
height:30px;
color:#fff;
background-color:#ed1e79;
font-size:20px;
font-weight:bold;
line-height:30px;
text-align:center;
border-radius:50%;}
#upload-preview .rule-notce .inner p:first-child{margin-right:20px;}


/*
==========================================================================
QR画像
==========================================================================
*/
/*注意文言*/
#upload-qr .qr-notce{
width:100%;
color:#ed1e79;
background-color:#fff;
font-size:13px;
font-weight:bold;
border:2px solid #ed1e79;
padding:20px;
margin:0 auto;}

#upload-qr .qr-notce .inner{display:flex; width:100%; max-width:550px; align-items:center; margin:0 auto;}
#upload-qr .qr-notce .inner p span{
display:inline-block;
width:30px;
height:30px;
color:#fff;
background-color:#ed1e79;
font-size:20px;
font-weight:bold;
line-height:30px;
text-align:center;
border-radius:50%;}
#upload-qr .qr-notce .inner p:first-child{margin-right:20px;}

/*QR画像*/
#thumb{position:relative;margin-top:50px;}
#qr-img{position:absolute; top:25%; left:57%; width:33.45%; background-color:#fff; border:5px solid #0a3c4e;}
#qr-img #id_output{width:100%;padding-top:100%;height:0;}
#qr-img #id_output canvas{width:96%;position:absolute;top:2%;left:2%;}

/*ボタン*/
#other_btn{background-image:url(../images/original/upload/btn_other.png); margin:30px auto;}
#end_btn{background-image:url(../images/original/upload/btn_end.png); margin:0 auto 30px;}

.thumb_l #id_period{position:absolute; top:10%; left:50%; width:47%; font-size:2.9vw; color:#ed1e79; text-align:center;font-weight:bold;}

@media screen and (min-width:980px){
#id_period{font-size:26px !important;}}

@media screen and (max-width:800px){
#upload-qr .qr-notce{width:96%; max-width:411px;}}

@media screen and (max-width:420px){
#upload-qr .qr-notce{width:90%; max-width:341px; font-size:12px; padding:10px;}
#upload-qr .qr-notce .inner p:first-child{margin-right:10px;}}

#upload-qr #thumb.thumb_l #upload_frame{position:absolute; top:8.4%; left:19.5%; width:30%; height: 83%; background-size: 100% auto; background-repeat: no-repeat;}
#upload-qr #thumb #upload_frame.frame00{background-image:url(../images/original/upload/frame_none.png);}
#upload-qr #thumb #upload_frame.frame01{background-image:url(../images/original/shimajiro/frame01.png);}
#upload-qr #thumb #upload_frame.frame02{background-image:url(../images/original/shimajiro/frame02.png);}
#upload-qr #thumb #upload_frame.frame03{background-image:url(../images/original/shimajiro/frame03.png);}

#upload-qr #thumb.thumb_l #upload_holo{position:absolute; top:8.4%; left:19.5%; width:30%; height: 83%; background-size: 100% auto; background-repeat: no-repeat;}
#upload-qr #thumb #upload_holo.holo01{background-image:url(../images/original/shimajiro/holo01.png);}
#upload-qr #thumb #upload_holo.holo02{background-image:url(../images/original/shimajiro/holo02.png);}


#upload-qr #thumb.thumb_l #upload_sample{
position:absolute; top:8.4%; left:19.5%; width:30%; height: 83%; background-size: 100% auto; background-repeat: no-repeat;
background-image:url(../images/original/upload/sample.png);
}



/*
==========================================================================
画像プレビュー/拡縮スライダー
==========================================================================
*/
input[type=range]{width:calc(100% - 82px); -webkit-appearance:none; margin:0;}
input[type=range]:focus,input[type=range]:active{outline:none;}

/*WebKit/Blink レンジ*/
input[type=range]::-webkit-slider-runnable-track{
width:calc(100% - 82px);
height:15px;
background:#ddebf0;
background:-moz-linear-gradient(left, #ddebf0 0%, #217c9c 100%);
background:-webkit-linear-gradient(left, #ddebf0 0%,#217c9c 100%);
background:linear-gradient(to right, #ddebf0 0%,#217c9c 100%);
border:3px solid #0a3c4e;
cursor:pointer;}

/*WebKit/Blink つまみ*/
input[type=range]::-webkit-slider-thumb{
display:block;
position:relative;
top:-10px;
width:20px;
height:30px;
background:#fff;
border:3px solid #00698d;
border-radius:5px;
cursor:pointer;
-webkit-appearance:none;}

/*Firefox レンジ*/
input[type=range]::-moz-range-track{
width:100%;
height:10px;
background:#ddebf0;
background:-moz-linear-gradient(left, #ddebf0 0%, #217c9c 100%);
background:-webkit-linear-gradient(left, #ddebf0 0%,#217c9c 100%);
background:linear-gradient(to right, #ddebf0 0%,#217c9c 100%);
border:3px solid #0a3c4e;
cursor:pointer;}

/*Firefox つまみ*/
input[type=range]::-moz-range-thumb{
width:15px;
height:25px;
background:#fff;
border:3px solid #00698d;
border-radius:5px;
cursor:pointer;}

/*Edge/IE*/
input[type=range]::-ms-tooltip{display:none;}

/*Edge/IE レンジ*/
input[type=range]::-ms-track{
width:100%;
height:15px;
color:transparent;
background:transparent;
border-color:transparent;
border-width:10px 0;}

/*Edge/IE レンジ(つまみより左側)*/
input[type=range]::-ms-fill-lower{
background:#ddebf0;
background:-moz-linear-gradient(left, #ddebf0 0%, #83b6c8 100%);
background:-webkit-linear-gradient(left, #ddebf0 0%,#83b6c8 100%);
background:linear-gradient(to right, #ddebf0 0%,#83b6c8 100%);
border:3px solid #00698d;}

/*Edge/IE レンジ(つまみより右側)*/
input[type=range]::-ms-fill-upper{
background:#83b6c8;
background:-moz-linear-gradient(left, #83b6c8 0%, #0a3c4e 100%);
background:-webkit-linear-gradient(left, #83b6c8 0%,#0a3c4e 100%);
background:linear-gradient(to right, #83b6c8 0%,#0a3c4e 100%);
border:3px solid #00698d;}

/*Edge/IE つまみ*/
input[type=range]::-ms-thumb{
width:15px;
height:25px;
background:#fff;
border:3px solid #00698d;
border-radius:5px;}

/*
==========================================================================
画像プレビュー/編集完了チェックボックス
==========================================================================
*/

.card-type{
display:flex;
width:100%;
justify-content:center;
align-items:center;
margin:20px auto;}
.card-type > div + div{margin-left:20px !important;}
.card-type .input-radio{width:116px; line-height:40px; margin:0;}
@media screen and (min-width:801px){.card-type{margin:20px auto 0;}}
@media screen and (max-width:480px){.card-type .input-radio{width:91px; line-height:30px;}}

input[type="checkbox"]{display:none !important; border:0 !important; margin:0 !important;}

.input-checkbox{
position:relative;
width:200px;
color:#14546a;
font-size:30px;
font-weight:bold;
letter-spacing:2px;
padding:0 0 0 50px;
margin:50px auto;}

.input-checkbox label{display:inline-block; cursor:pointer;}
.input-checkbox label:before,
.input-checkbox label:after{content:""; position:absolute; display:inline-block; transition:transform .2s ease;}

.input-checkbox label:before{
top:0;
left:0;
width:40px;
height:40px;
background-color:rgba(255,255,255,0.7);
border:3px solid #14546a;
border-radius:5px;}

.input-checkbox label:after{
top:-4px;
left:15px;
width:15px;
height:40px;
border-right:6px solid transparent;
border-bottom:6px solid transparent;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

.input-checkbox input[type="checkbox"]:checked + label:after{border-color:#ed1e79;}

@media screen and (max-width:480px){
.input-checkbox{width:130px; font-size:20px; padding:0 0 0 40px; margin:30px auto;}
.input-checkbox label:before{width:30px; height:30px;}
.input-checkbox label:after{top:-4px; left:10px; width:15px; height:30px;}}

/**/
input[type="radio"]{display:none !important; border:0 !important; margin:0 !important;}

.input-radio{
position:relative;
width:280px;
color:#14546a;
font-size:20px;
font-weight:bold;
letter-spacing:2px;
padding:0 0 0 50px;
margin:30px auto;}

.input-radio label{display:inline-block; cursor:pointer;}
.input-radio span{
display:block;
font-size:13px !important;
font-weight:normal !important;
letter-spacing:1px !important;
line-height:16px !important;}

.input-radio label:before,
.input-radio label:after{content:""; position:absolute; display:inline-block; transition:transform .2s ease;}

.input-radio label:before{
top:0;
left:0;
width:40px;
height:40px;
background-color:rgba(255,255,255,0.7);
border:3px solid #14546a;
border-radius:5px;}

.input-radio label:after{
top:-4px;
left:15px;
width:15px;
height:40px;
border-right:6px solid transparent;
border-bottom:6px solid transparent;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

.input-radio input[type="radio"]:checked + label:after{border-color:#ed1e79;}

.canvas_thumb{display:none;}
#thumb.thumb_l .canvas_thumb{position:absolute; top:8.4%; left:19.5%; width:29%; height: 82%; }
#thumb.thumb_w .canvas_thumb{position:absolute; top:37%; left:7%; width:46.8%; height: 54.2%;  }
#thumb #canvas_backlam_bg,
#thumb #canvas_back_bg,
#thumb #canvas_lamc_bg,
#thumb #canvas_lam_bg,
#thumb #canvas_holo_bg{
display:none !important;}

@media screen and (max-width:480px){
.input-radio{width:230px; font-size:15px; padding:0 0 0 40px; margin:30px auto;}
.input-radio label:before{width:30px; height:30px;}
.input-radio label:after{top:-4px; left:10px; width:15px; height:30px;}
.input-radio span{font-size:12px !important;}
.input-radio span br{display:none;}}

/*注意テキスト*/
#text-notice{
color:#fff;
background:#14546a;
text-align:center;
font-weight:bold;
padding:10px 0;
margin:0 auto 20px;}
#text-notice br{display:none;}
@media screen and (max-width:460px){#text-notice{font-size:12px;}}
@media screen and (max-width:390px){
#text-notice{font-size:11px;}
#text-notice br{display:block;}}


/*canvas ios対策
.canvas-font {
    font-smooth: always; /*  または auto, never */
    -webkit-font-smoothing: antialiased; /*  Safari, Chrome */
    -moz-osx-font-smoothing: grayscale; /*  Firefox */
  }*/