@charset "utf-8";

/* utility
------------------------------------------------------------ */
.dib { display: inline-block !important;}
.hidden { display: none !important;}
.fl { float: left !important;}
.fr	{ float: right !important;}
.clearfix:after { content: ""; display: block; clear: both;}
.mt20 { margin-top: 20px !important;}
.mb5 { margin-bottom: 5px !important;}
.ml5 { margin-left: 5px !important;}
.ml10 { margin-left: 10px !important;}
.mr5 { margin-right: 5px !important;}
.tc { text-align: center !important;}

.fz13 { font-size: 1.3rem !important;}
.fz16 { font-size: 1.6rem !important;}
.em { font-weight: bold !important; font-style: normal !important;}


/* ------------------------------------------------------------
   stand_alone
------------------------------------------------------------ */
.hl0 {
	margin: 10px 0;
	font-size: 1.6rem;
	font-weight: normal;
	text-align: center;
}
.hl1 {
	margin: 30px 0;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}
.hl2 {
	margin: 20px 0 0;
	font-size: 2.8rem;
	text-align: center;
}
.hl3 {
	font-size: 1.4rem;
	border-bottom: 3px solid #F7E058;
}
.hl4 {
	margin: 10px 0;
	padding: 0 10px;
	font-size: 1.4rem; font-weight: bold;
}

.avatar, .avatar_sm, .avatar_lg {
	display: block;
	background: #fff no-repeat center;
	background-size: cover;
	border-radius: 50%;
}
.avatar { width: 50px; height: 50px;}
.avatar_sm { width: 30px; height: 30px;}
.avatar_lg { width: 60px; height: 60px;}

.ic_def { width: 1.4em;}
.ic_rank { width: 1.2em;}
.ic_toolbar { width: 24px;}

.cat_label {
	display: block;
	width: 5.5rem;
	padding: .05em 0;
	font-size: 1.1rem;
/*	font-weight: bold;*/
	font-style: normal;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	border-radius: 5px;
}
.cat_label.blue { background-color: #436AD5;}
.cat_label.red { background-color: #E55858;}
.cat_label.yellow { background-color: #FFB600;}
.cat_label.sky { background-color: #38C7F2;}
.cat_label.brown { background-color: #8B4513;}

.status_label {
	display: block;
	width: 5rem;
	padding: .05em 0;
	border: 1px solid;
	font-size: 1rem;
	font-style: normal;
	text-align: center;
}
.status_label.offer { border-color: #017FFF; color: #017FFF;}
.status_label.end { border-color: #666; color: #666;}
.status_label.comp { border-color: #ED2020; color: #ED2020;}
.status_label.draft { border-color: #333; color: #fff; background-color: #333;}

.post_date { display: inline-block; color: #999; font-size: 1.1rem;}
.edit_date { display: block; text-align: right; color: #999; font-size: 1.1rem;}
.timelimit { display: inline-block; color: #0093FF; font-size: 1.1rem;}

.tool .nonactive { color: #999;}
.tool.fav .active { color: #FF5C9B;}

.att_img { display: block; position: relative;}
.att_img img { width: 100%; border-radius: 5px;}
.att_img::after {
	display: block; content: '';
	width: 24px; height: 24px;
	background: rgba(0, 0, 0, .25) url("../img/ic_zoom.svg") no-repeat center;
	position: absolute; top: 5px; right: 5px;
}
.att_mov { display: block; position: relative; line-height: 0;}
.att_mov video { width: 100%; border-radius: 5px;}
.att_mov::after {
	display: block; content: '';
	margin: auto;
	border-radius: 5px;
	background: rgba(0, 0, 0, .25) url("../img/ic_play.svg") no-repeat center;
	background-size: 50px;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
.att_aud {
	display: -webkit-flex; display: flex;
	height: 50px;
	padding: 0 10px;
	line-height: 50px;
	border-radius: 5px;
	box-shadow: 1px 0 2px 0 rgba(0,0,0, .16);
	background: #D3ECFF;
	color: #2B6DBA;
}
.att_aud .ic_def { width: 24px; margin-right: 5px;}
.att_aud .file_name {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.att_aud time {
	margin-left: auto;
	white-space: nowrap;
}

.btn_create {
	display: block;
	width: 50px; height: 50px;
	padding-top: 13px;
	background: #25CCC7;
	border-radius: 50%;
	box-shadow: 3px 0px 6px 0 rgba(0, 0, 0, .16);
	text-align: center;
}
.btn_create img { width: 24px;}

.btn_delete {
	display: block;
	width: 24px; height: 24px;
	background: #000;
	border-radius: 50%;
	text-align: center;
	
}
.btn_delete img { width: 20px;}

.btn_start {
	display: block;
	box-sizing: border-box;
	width: 44px; height: 44px;
	padding-top: 11px;
	border-radius: 50%;
	background: #25CCC7;
	text-align: center;
}
.btn_start img { width: 24px;}

.btn_stop {
	display: block;
	box-sizing: border-box;
	width: 44px; height: 44px;
	padding-top: 9px;
	border-radius: 50%;
	background: #E55858;
	text-align: center;
}
.btn_stop img { width: 12px;}

.btn_favsort {
	display: block;
	background: none;
	text-align: center;
	border: none;
}
.btn_favsort img { width: 30px;}

.progressbar,
.progressbar > span { border-radius: 4px;}
.progressbar {
	width: 100%;
	background: #EBEBEB;
}
.progressbar > span {
	display: block;
	height: 8px;
	background: #25CCC7;
	transition: width .2s;
}

/* form
------------------------------------------------------------ */
.btn {
	display: inline-block;
	padding: 9px 12px;
	background: #333;
	border: none;
	border-radius: 5px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	transition: opacity .1s;
}
.btn.yellow { background-color: #F7E058; color: #333;}
.btn.cyan { background-color: #66D9D6; color: #333;}
.btn.deepcyan { background-color: #25CCC7;}
.btn.c_fb { background-color: #4267B2;}
.btn.c_tw { background-color: #1DA1F2;}
.btn.c_go { background-color: #DB3236;}
.btn.c_ln { background-color: #00B900;}

.btn:active { opacity: .5;}

.btn.s_md {
	width: 220px; height: 50px;
	line-height: 50px;
	padding: 0;
	font-size: 1.8rem;
}
.btn.s_th {
	width: 220px; height: 80px;
	line-height: 80px;
	padding: 0;
	font-size: 2rem;
	border-radius: 10px;
}
.btn.s_sl {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
}

.select_wrap select {
	-webkit-appearance: none; appearance: none;
	border: none;
	height: 30px;
	padding: 0 25px 0 5px;
	color: #333;
	background: none;
	font-size: 1.6rem;
}
.select_wrap select::-ms-expand { display: none;}
.select_wrap select:focus { outline: none;}
.select_wrap {
	display: inline-block;
	background: #f2f2f2;
	position: relative;
	vertical-align: middle;
	border-radius: 5px;
	box-shadow: 0 0 1px 0 rgba(0,0,0, .25);
}
.select_wrap:before {
	display: block; content: '';
	width: 0; height: 0;
	margin-top: -3px;
	border-style: solid;
	border-width: 6px 5.5px 0 5.5px;
	border-color: #666 transparent transparent transparent;
	position: absolute; top: 50%; right: 10px;
	pointer-events: none;
}

.select2_wrap select {
	-webkit-appearance: none; appearance: none;
	border: none;
	height: 40px;
	padding: 0 25px 0 5px;
	color: #333;
	background: none;
	font-size: 1.6rem;
}
.select2_wrap select::-ms-expand { display: none;}
.select2_wrap select:focus { outline: none;}
.select2_wrap {
	display: inline-block;
	background: #fff;
	position: relative;
	vertical-align: middle;
	border: 1px solid #999;
	border-radius: 5px;
}
.select2_wrap:before {
	display: block; content: '';
	width: 0; height: 0;
	margin-top: -3px;
	border-style: solid;
	border-width: 6px 5.5px 0 5.5px;
	border-color: #666 transparent transparent transparent;
	position: absolute; top: 50%; right: 10px;
	pointer-events: none;
}
.input {
	display: inline-block;
	height: 30px;
	padding: 0 5px;
	border: none;
	border-radius: 5px;
	vertical-align: middle;
	background: #F2F2F2;
	box-shadow: 0 0 1px 0 rgba(0,0,0, .25);
	font-size: 1.6rem;
}
.input:focus { outline: none;}
.input.full { width: 100%;}

.input2 {
	display: inline-block;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #999;
	border-radius: 5px;
	vertical-align: middle;
	font-size: 1.6rem;
}
.input2:focus { outline: none;}
.input2.full { width: 100%;}

.input2:required {
	background: #FFEFEF;
	border-color: #ED2020;
}
.input2:valid {
	background: transparent;
	border-color: #999;
}

.flt_select_wrap .viewport {
	position: absolute;
	width: 100%; height: 40px;
	line-height: 40px;
	padding: 0 20px 0 5px;
	z-index: 1;
	overflow: hidden;
	text-overflow: clip;
}
.flt_select_wrap select {
	-webkit-appearance: none; appearance: none;
	border: none;
	height: 40px;
/*	padding: 0 25px 0 5px;*/
	color: transparent;
	background: none;
	position: relative;
	z-index: 2;
	font-size: 1.6rem;
}
.flt_select_wrap option {
	color: #000;
}
.flt_select_wrap select::-ms-expand { display: none;}
.flt_select_wrap select:focus { outline: none;}
.flt_select_wrap {
	display: block;
	background: none;
	position: relative;
	vertical-align: middle;
	border: none;
	border-radius: 5px;
}
.flt_select_wrap:before {
	display: block; content: '';
	width: 0; height: 0;
	margin-top: -3px;
	border-style: solid;
	border-width: 6px 5.5px 0 5.5px;
	border-color: #F9CA54 transparent transparent transparent;
	position: absolute; top: 50%; right: 5px;
	pointer-events: none;
}

/* error_list */
.error_list {
	margin: 5px 0;
	color: #B41E1E;
	position: relative;
}
.error_list li { padding-left: 1em;}
.error_list li:not(:last-child) { margin-bottom: 0.5em;}
.error_list li::before {
	display: inline-block; content: '*';
	position: absolute; left: 0;
}
/* ------------------------------------------------------------
   contents
------------------------------------------------------------ */

#wrapper {
	width: 100%;
	min-width: 320px;
}

.nav_actions {
	display: -webkit-flex; display: flex;
	align-items: center;
	height: 40px;
	margin-bottom: 0;
	background: #F7E058;
}
.nav_actions .item { width: 50%;}
.nav_actions .item.right { text-align: right;}
.nav_actions .action {
	display: inline-block;
	padding: 5px;
	color: #333;
}

.nav_tab {
	display: -webkit-flex; display: flex;
	margin-bottom: 0;
	box-shadow: 0 1px 1px 0 rgba(0,0,0, .25);
}
.nav_tab .item {
	width: 100%;
}
.nav_tab .btn_nav_tab {
	display: block;
	height: 40px;
	line-height: 40px;
	font-size: 1.3rem;
	text-align: center;
	color: #999;
	background: #f6f6f6;
}
.nav_tab .btn_nav_tab.active {
	color: #fff;
	background: #25CCC7;
}

/* modal_dialog
------------------------------------------------------------ */
.modal_dialog_wrap {
	display: none; /* flex */
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 10px;
	background: rgba(0,0,0, .5);
	position: fixed; top: 0; bottom: 0; left: 0; right: 0;
	z-index: 100;
}
.modal_dialog {
	border-radius: 5px;
	background: #fff;
	position: relative;
}

/* sounds_recording */
.modal_dialog.sounds_recording {
	width: 250px;
	padding: 70px 0;
}
.sounds_recording_img {
	margin: 10px 0;
	text-align: center;
}
.sounds_recording .btn_close {
	padding: 10px;
	position: absolute; top: 0; right: 0;
}
.sounds_recording .btn_start { margin: 40px auto 0;}
.sounds_recording .btn_stop { margin: 80px auto 0;}

/* howto_img */
.howto_img {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
	padding: 5px;
}
.howto_img > img {
	max-width: 100%;
	max-height: calc(100vh - 30px);
}

/* uploading */
.modal_dialog.uploading {
	width: 250px;
	padding: 70px 20px;
}
.uploading .percentage {
	display: block;
	margin: 30px auto 10px;
	font-size: 2.4em;
	color: #25CCC7;
	text-align: center;
	letter-spacing: .05em;
}
.uploading .percentage::after {
	display: inline-block; content: '%';
	font-size: 1.6rem;
}

/* post_complete */
.modal_dialog.post_complete {
	width: 250px;
	padding: 50px 20px;
}
.post_complete .btn {
	display: block;
	width: 100px;
	margin: 30px auto 0;
}

/* question
------------------------------------------------------------ */
.question {
	display: flex;
	flex-wrap: wrap;
	padding: 10px 10px 1px 0;
	background: #fff;
	cursor: pointer; /* iOS event 対応 */
}
.question > :first-child { width: 80px;}
.question > :nth-child(2) { width: calc(100% - 80px);}
.question:nth-of-type(even) { background: #f6f6f6;}
.question_side .avatar { margin: 0 auto;}
.question_side .cat_label { margin: 5px auto;}

/*削除↓*/
/* .hav_media {
	width: 60px;
	margin: auto;
	overflow: hidden;
}
.hav_media .item {
	float: left;
	text-align: center;
}
.hav_media .ic_def { width: 20px;} */
/*削除↑*/

.question_header {
	display: flex;
	align-items: flex-start;
}
.question_header > :first-child{
	flex-grow: 1;
}
.question_header > :last-child {
	flex-shrink: 0;
	margin-left: 5px;
}
.question_header .username {
	display: block;
	font-weight: normal; font-size: 1.2rem;
	word-break: break-all;
}
.question_body {
	display: flex;
	margin-top: 01em;
}
.question_body > :first-child {
	flex-grow: 1;
}
.question_body > :not(:first-child) {
	flex-shrink: 0;
	margin-left: 5px;
}
.question_body .ellipsis {
	height: 4.8em;
	overflow: hidden;
}

.question_attachment {
	width: 40px; height: 40px;
}
.question_attachment .img {
	display: block;
	padding-top: 100%;
	background: no-repeat center;
	background-size: cover;
}
.question_attachment .aud,
.question_attachment .mov {
	display: block;
	height: inherit;
	padding-top: 8px;
	text-align: center;
}
.question_attachment .aud { background: #D3ECFF;}
.question_attachment .mov {
	background: #333 no-repeat center;
	background-size: cover;
}
.question_attachment .mov img {
	filter: drop-shadow(0 0 3px rgba(0,0,0,.8));
	-webkit-filter: drop-shadow(0 0 3px rgba(0,0,0,.8));
}

.question_actions {
	display: flex;
	justify-content: space-around;
	width: 100%;
}
.question_actions .tool {
	font-size: 1rem;
}
.question_actions .tool a { display: inline-block; padding: 5px 0;}

/* master */
.question.hidden { background: #ddd;}

/* question_draft
------------------------------------------------------------ */
.question_draft {
	padding: 10px;
	background: #FFF6CE;
	cursor: pointer; /* iOS event 対応 */
}

.question_draft_header {
	margin-bottom: 5px;
	overflow: hidden;
}
.question_draft_header .status_label { float: right;}

.question_draft_body {
	margin-bottom: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* cmnt
------------------------------------------------------------ */
.cmnt {
	padding: 0px 10px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0,0,0, .16);
	overflow: hidden;
}
.cmnt_header { margin: 5px 0; overflow: hidden;}
.cmnt_header .username {
	font-weight: normal;
	word-break: break-all;
}
.cmnt_header .ic_rank { margin-left: 5px;}
.cmnt_header time { margin-left: 5px;}

.cmnt_actions {
	display: -webkit-flex; display: flex;
	margin: 2px 0 0 5px;
	float: right;
}
.cmnt_actions .tool {
	margin-top: 3px;
	font-size: 1rem;
}
.cmnt_actions .tool + .tool { margin-left: 5px;}

.cmnt_body { text-align: justify; text-justify: inter-ideograph;}

.cmnt_attachment .item { margin-bottom: 10px;}

.cmnt_edit { text-align: right; margin-bottom: 10px;}
.cmnt_edit a { padding: 5px; }

.cmnt.own { background: #F8E46E;}

.cmnt_choose { margin: 0 -10px;}
.cmnt_choose_btn {
	display: block;
	padding: 10px 0;
	background: #25CCC7;
	color: #fff;
	text-align: center;
	border-radius: 0 0 10px 10px;
}
.cmnt_choose_btn.open {
	border-radius: 0;
}
.cmnt_choose_body {
	padding: 10px;
	text-align: center;
	border: 1px solid #25CCC7;
	border-radius: 0 0 10px 10px;
}
.cmnt_choose_body textarea {
	width: 100%;
	margin-bottom: 10px;
	padding: 5px;
	background: #F6F6F6;
	border: none;
	resize: none;
	text-align: left;
	box-shadow: inset 0 0 1px 0 rgba(0,0,0, .16);
	font-size: 1.6rem;
}

.cmnt.best {
	border: 1px solid #FC8E93;
}
.cmnt_body.best {
	background: url(../img/bestmark.svg) no-repeat right top;
	background-size: 80px;
}
.hl_bestcmnt {
	margin: 0 -11px;
	padding: 5px 0;
	font-size: 1.4rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	border-radius: 10px 10px 0 0;
	background: #FC8E93;
}

/* master */
.cmnt.hidden { background: #ddd;}
.cmnt_hide { text-align: right; margin-bottom: 10px;}
.cmnt_hide a { padding: 5px; color: #ED2020;}

/* cmnt_tool
------------------------------------------------------------ */
.cmnt_tool_close {
	display: -webkit-flex; display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 40px;
	margin-bottom: 0;
	background: #FFF6CE;
}
.cmnt_tool_close .item.txt { width: 100%;}
.cmnt_tool_close .item span, .cmnt_tool_close .item a {
	display: inline-block;
	padding: 5px 12px;
	color: #999;
}

.cmnt_tool_open {
	display: -webkit-flex; display: flex;
	align-items: center;
	height: 40px;
	margin-bottom: 0;
	background: #FFF6CE;
}
.cmnt_tool_open .btn { width: 100px;}
.cmnt_tool_open .item a, .cmnt_tool_open .item span {
	display: inline-block;
	padding: 5px 12px;
}
.cmnt_tool_open .item:not(.send) { padding-right: 5px;}
.cmnt_tool_open .item.send {
	width: 100%;
	padding-right: 10px;
	text-align: right;
}

.cmnt_tool_txt {
	display: block;
	width: 100%;
	padding: 10px;
	border: none;
	resize: none;
	background: #FFF6CE;
	font-size: 1.6rem;
}

.cmnt_tool_att {
	padding: 10px 10px 0;
	background: #FFF6CE;
}

/* news_row
------------------------------------------------------------ */
.news_row {
	border-bottom: 1px solid #ccc;
	cursor: pointer; /* iOS event 対応 */
}
.news_row a {
	display: block;
	padding: 10px 10px 0;
	color: #333;
	overflow: hidden;
}
.news_row .avatar_sm { float: left;}
.news_row .time { color: #999;}

/* filter
------------------------------------------------------------ */
.filter {
	display: -webkit-flex; display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	overflow: hidden;
	background: #fff;
}
.filter .item {
	width: 22%;
	text-align: center;
}
.filter .item:not(:last-of-type) {
	border-right: 1px solid #f2f2f2;
}
.filter .favsort {
	width: 12%;
	position: relative;
	z-index: 1;
}

/* edit_attachment
------------------------------------------------------------ */
.edit_attachment {
	display: -webkit-flex; display: flex;
	margin-bottom: 0;
}
.edit_attachment .item:not(:last-of-type) { margin-right: 5px; }
.edit_attachment .btn_delete {
	pointer-events: auto;
	position: absolute; top: 5px; right: 5px;
}
.edit_att_img,
.edit_att_mov,
.edit_att_aud {
	display: block;
	width: 100px; height: 100px;
	border-radius: 5px;
	background: no-repeat center;
	position: relative;
}
.edit_att_img {
	background-size: cover;
}
.edit_att_mov,
.edit_att_aud {
	background-color: #333;
	background-size: 50px;
	text-align: center;
}
.edit_att_mov { background-image: url(../img/ic_mov_active.svg);}
.edit_att_aud { background-image: url(../img/ic_mic_active.svg);}
.edit_att_mov .time,
.edit_att_aud .time {
	display: inline-block;
	margin-top: 75px;
	color: #fff;
}

/* post_editor
------------------------------------------------------------ */
.post_editor_assist,
.post_editor_action {
	display: -webkit-flex; display: flex;
	align-items: center;
	margin-bottom: 0;
	background: #fff;
}
.post_editor_assist {
	height: 50px;
	box-shadow: 0 -1px 1px 0 rgba(0,0,0, .16);
}
.post_editor_assist .item {
	margin: 0 10px;
}
.post_editor_action {
	justify-content: space-between;
	height: 60px;
	padding: 0 10px 0 20px;
}

/* loading
------------------------------------------------------------ */
.loading {
	display: block;
	padding: 20px 0;
	text-align: center;
}
.loading img { width: 128px;}

/* more
------------------------------------------------------------ */
.more_data {
	padding: 10px; 
	background-color: #F7E058;
	color: #333; 
	text-align: center; 
}

/* howto_list
------------------------------------------------------------ */
.howto_list_item {
	padding: 15px 10px;
	border-bottom: 1px solid #ccc;
}

/*非表示質問、回答のための背景色グレー
--------------------------------------------------------------*/
.bk_grey {
	background-color: #DCDCDC!important;
}

/*非表示質問のためのテキスト
--------------------------------------------------------------*/
.question_hide { 
	text-align: center;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

/*「はじめる」ボタン調整用追加スタイル
--------------------------------------------------------------*/
.btn_start {
    height: 80px;
    padding: 15px 0;
    line-height: 25px;    
}
.en,
.uz {
    font-size: 80%;
}

/*規約
--------------------------------------------------------------*/
.btn_accept {
    width: 200px;
    height: 60px;
    margin: 20px auto 100px;
    background: #f7b21b;
	border-radius: 8px;
	box-shadow: rgba(0,0,0,.27) 0 2px 4px;
	border: none;
	color: #fff;
	font-family: 游ゴシック,"Yu Gothic",YuGothic,メイリオ,Meiryo,sans-serif;
	line-height: 60px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
    display: block;
    -webkit-appearance: none;
}
.indention {
    word-break: break-all;
}