@charset "utf-8";
/*
-フォーム
-チェックボックスとラジオ
-ボタン類
*/

/*フォーム-----------------------------*/

/*横幅100％*/
input[type="text"],
textarea,
select {
		width: 100%;
}

/*サイズ指定*/
input[type="text"],
input[type="submit"],
textarea,
select {
		margin: 0px;
		padding: 0.4em;
		outline: none;
		font-size: 1.5rem;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
}

/*基本色*/
input[type="text"],
select,
textarea{
border: 1px solid #666;
background: #f6f6f6;
color:#000;
}

textarea.secret{
border: 1px solid #666;
background: #333;
color:#999;
}


input::placeholder,
textarea::placeholder{
		color: #aaa;
		font-size:1.4rem;
}

input[type="text"]:focus,
select:focus,
textarea:focus,
texture:focus {
border: 1px solid #ccc;
background:#fff;
color:#000;
}

textarea.secret:focus
{
border: 1px solid #666;
background: #333;
color:#FFF;
}



/*編集不可*/
input:read-only,
input:focus:read-only{
	border: 1px solid #333;
	background:#000;
	color:#fff;
}

/*ボタン*/
button
{width:100%;
padding:10px;
background:#000;
color:#fff;
border:1px #666 solid;
border-radius:3px;}

button:hover,
button:active
{background:#333;
border:1px #999 solid;}



/*チェックボックスとラジオボタン--------------------------------*/

label,
input[type='checkbox'],
 input[type='radio']  {
 cursor: pointer;
}
input[type="checkbox"],
input[type='radio'] {
 display:none;
}
label {
		display: inline-block;
		margin: 3px;
		padding: 5px 10px;
		background: #CCC;
		border-radius: 3px;
		font-size: 1.3rem;
		color: #000;
		/*スマホでコピーボックスを表示しない*/
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer */
		-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
		-webkit-user-select: none; /* Chrome, Safari, and Opera */
		-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
label:hover {
	background:#ddd;
	color: #000;
}

/*マーク*/
label.check:before,
input[type="checkbox"]:checked + label:before,
label.radio:before,
input[type="radio"]:checked + label:before {
	color:#fff;
	font-family: font-awesome;
	font-size:1.2rem;
}
label.check:before {content: "\f112\ ";/*輪*/}
input[type="checkbox"]:checked + label:before {content:"\f05b\ ";/*チェック輪*/}
label.radio:before {content: "\f112\ ";/*輪*/}
input[type="radio"]:checked + label:before {content:"\f111\ ";/*黒丸*/}


/*チェック済*/
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label
 {
		color:#fff;
}
input[type="checkbox"]:checked + label
 {
		background:rgb(255, 83, 97);
}
input[type="radio"]:checked + label {
		background:rgb(0, 171, 224);
}


/*アイコン選択*/
.icon_choice label {
		display: inline-block;
		margin:2px;
		padding:2px;
		background: rgba(255, 255, 255, 0);
		border-radius: 3px;
		font-size: 1.3rem;
		color: #333333;
}
.icon_choice label:hover {
		background:rgb(210, 210, 210);
		/* マウス選択時の背景色を指定する */
		color: #000000;
		/* マウス選択時のフォント色を指定する */
}

.icon_choice label.radio:before,
.icon_choice input[type="radio"]:checked + label:before {
		content:"";
}
.icon_choice input[type="radio"]:checked + label {
		background:rgb(0, 171, 224);
		/* マウス選択時の背景色を指定する */
}

.icon_choice label img{
  width:50px;
  height:auto;
  border-radius:25px;
}
/*テンプレート挿入*/
.template button
{
font-size:1.2rem;
max-width:120px;
padding:5px;
background:#333;
color:#fff;
border:1px #666 solid;
border-radius:3px;}
.template button:hover
{
background:#999;}

/*丸い*/
button.circle{
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
	padding:0;}


/*プロフを更新する*/

/*携帯*/
@media screen and (max-width:768px) {
button.update_change_button {
	font-size: 1.5rem;
	width:50%;
	color: #fff;
	background:#333;
	border-radius:0px;
	border:none;
}
button.update_change_button:hover{
	background:#666;
	}
}

/*パソコン*/
@media screen and (min-width:768px) {
button.update_change_button {
	margin: 20px;
	font-size: 1.4rem;
	width: 80px;
	height: 80px;
	color: #000;
	border-radius:50%;
  background: rgba(255, 255, 255, 0.7);
	border: 3px #000 solid;
}button.update_change_button:hover {
	color: #fff;
  background: rgba(0, 0, 0, 0.5);
	border: 3px #fff solid;
}
}