@charset "UTF-8";
img{ width:100%;}
html { font-size:62.5%;font-family: Arial,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;}
body {font-size:1.4rem; line-height:1.5; background:linear-gradient(to bottom,#ffffff,#000);}

h1{ font-size: 36px; font-size: calc(2.4rem + ((1vw - 0.64rem) * 2));  /* 24px~36pxで可変*/ line-height: 1.3;}
h2{ font-size: 24px; font-size: calc(1.8rem + ((1vw - 0.64rem) * 1.2));/* 22px~24pxで可変*/ font-weight:bold; line-height: 1.3;}
h3{ font-size: 20px; font-size: calc(1.4rem + ((1vw - 0.64rem) * 1.2));/* 18px~20pxで可変*/ font-weight:bold; line-height: 1.3;}
/* calc( 基準サイズ ((1vm -  [ビューポートの幅の最小値/100] ) * [100 * フォントサイズの差 / ビューポートの幅の差] ) ) */

span{color:#000;}

h1{ background:linear-gradient(to bottom,#999,#000); color:#fff; padding:0.2rem; margin-bottom:1rem; text-align:center; box-shadow: 0px 8px 5px -5px #d9e4ff; text-shadow: #000 1px 1px 1px;}
h2{ background-color:#fff; border-radius: 28px; border:solid #000 3px; color:#000; padding:0.2rem; margin-bottom:1rem; text-align:center;}
h3{ color:#000; padding:0.2rem; margin-bottom:1rem; }
section{padding:0 2rem 2rem;}
/*-----  Input 設定 -------*/
button { margin: 10px auto;
  padding: 10px;
  color: #ffffff;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 28px;
  background: linear-gradient(to bottom,#333,#fff/*#76c8f3,#319ad0*/);
  text-shadow: #000 /*#0d75aa*/ 1px 1px 1px;
  box-shadow: 0px 8px 5px -5px #000/*#d9e4ff*/;
}

input,select,textarea{
  border: none;
  background-color: transparent;
  vertical-align: middle;
  color: #000;
  font-size:16px;
    padding: 0.5rem;
    background-color: #fff;
    border-radius: 4px;
    width: 100%;
    /*max-width: 275px;*/sad
    line-height: 1.5rem;
border:solid #008aac 1px;
}
/*==============================================*/
/*input[type=range]#txtsizeBar{max-width: 60%;}*/
input[type=range]#resizeBar{max-width: 100%;margin:0;}
::placeholder{ color: #000; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer; 
  outline: none;
  height: 2rem;
  width: 100%;
  background: #555/*#8acdff*/;
  border-radius: 10px; 
  border: solid 3px #dff1ff;
}

/* WebKit向けのつまみ */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #000/*#53aeff*/;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); 
}
/* Moz向けのつまみ */
input[type="range"]::-moz-range-thumb {
  background: #53aeff;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); 
  border: none; /* デフォルトの線を消す */
}
/* Firefoxで点線が周りに表示されてしまう問題の解消 */
input[type="range"]::-moz-focus-outer {
  border: 0;
}
/* つまみをドラッグしているときのスタイル */
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
}
/*--------------------------------------*/
input[type="color"]{width:90%;height:5rem;}

/*--------------------------------------*/
.selctFlame{}
.selctFlame ul{ background-color: #fff; padding:1rem; border-radius:10px; list-style-type:none; display: flex; justify-content: center; align-items: center;}
.selctFlame ul li{ margin:1rem; border-radius: 10px; width:calc(100%/6);}
.selctFlame input[type=radio], input[type=checkbox] { display: none; }
.selctFlame label { margin:0.5rem;}
.selctFlame img { border-radius:10px;}
.selctFlame input[type="radio"]:checked + label img {background: orange; }
/*.selctFlame label img{ filter: grayscale(100%);}
.selctFlame input[type="radio"]:checked + label img {filter: grayscale(0); }*/

/*-----  Vフレーム前後ボタン  ---------------*/
table.btnTable{}
table.btnTable td{margin:0 auto; text-align:center;}
.imgBtnTag {
    padding:0;
    margin:0;
    background:none;
    border:0;
    font-size:0;
    line-height:0;
    overflow:visible;
    cursor:pointer;
width:95%;

}
.imgBtnTag img{width:100%; height:33%;}
#fileInput{margin:0 auto 1rem;}
#backColor{ width:4rem;}
#ui{width:100%;}
#ui:after{  content: ""; display: block; clear: both;}
#ui #uil{margin:0 auto; text-align:center; }
#ui #uir{margin:0 auto; border-top:solid 1px #000;}

/*-----  ページデザイン  ---------------*/
.imageItem { width: 100%; margin-bottom:50px; }
.title { margin-top: 100px;  font-size: 16px; color: #555; }
.imageFit { position: relative;  overflow: hidden; padding-top: 100%; background:#fff; }

.userImg { width: 100%;  position: absolute;  top: 0;  left: 0;  z-index:400; }
.imageFlame{ width: 100%; position: absolute; top: 0; left: 0; z-index:250; }
.imageFlameTop{ width: 100%; position: absolute; top: 0; left: 0; z-index:250; }
.imageFlameRight{ width: 31.734%; position: absolute; bottom: 0; right: 0; z-index:260; }
.imageFlameLeft{ width: 31.934%; position: absolute; bottom: 0; left: 0; z-index:270; }
.imageFlameBotom{ width: 68.1%; position: absolute; bottom: 0; right: 0; z-index:280; }
.captureTitle{ color:#333;  position: absolute;  top: 20%;  left: 20%; z-index:1000;}

.footer{ width: 100%; margin: 0 auto; padding: 1rem; color: #000; text-align: center; font-size: 1.3rem; background-color:#fff;}
/*-------------------------------------*/
/* モーダル設定*/
/* *{  box-sizing: border-box;  margin: 0; padding: 0;}*/
.content{ margin: 0 auto;}
.modal{ display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index:99999;}
.modal_Bg{ background: rgba(0,0,0,0.8); height: 100vh; position: absolute; width: 100%;}
.modal_Content{ background: linear-gradient(to bottom,#ffffff,#76c8f3); left: 50%; padding:1%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 80%; height:80%; overflow-y:scroll;}
canvas{width:100%;height:100%;}
.btn_Preview { margin:2rem auto; text-align: left; width:100%;}
.btn_Preview a{ width:100%; color:#fff; background: linear-gradient(to bottom,#333,#000); padding:1rem; border-radius: 2rem; text-decoration:none;}
.btn_Download{ margin:2rem auto; text-align: center;}
.btn_Download a{ background: linear-gradient(to bottom,#ffffff,#d7f8ff); display:block; padding:2rem; border-radius: 2rem; text-decoration:none;}
.btn_Close { margin:2rem auto; text-align: right;}
.btn_Close a{color:#fff; background: linear-gradient(to bottom,#00426a,#191a3d); padding:2rem; border-radius: 2rem; text-decoration:none;}