@charset "utf-8";

/*=========================================*/
/* 8020運動のお声 */
/*=========================================*/


/*-- CONTENTS --*/

.voice_hamigaki_area{
	position:relative;
	margin:0px auto 0px auto;
	padding:45px 45px 125px 45px;
	max-width:1000px;
}

@media all and (max-width:960px), print{

.voice_hamigaki_area{
	padding:25px 25px 75px 25px;
	max-width:640px;
}

}

@media screen and (max-width:640px){

.voice_hamigaki_area{
	padding:15px 15px 50px 15px;
}

}


/*-- TITLE --*/

.voice_hamigaki_title_frame{
	position:relative;
	width:100%;
	border-bottom:1px solid rgba(200,200,200,1.0);
	box-sizing:border-box;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.voice_hamigaki_title{
	position:relative;
	padding:0px 0px 0px 0px;
	width:100%;
	display:flex;
}

.voice_hamigaki_title .numb{
	padding:0px 0px 0px 10px;
	font-size:350%;
	line-height:100%;
	letter-spacing:-0.05em;
	font-family:"Reddit Sans", sans-serif;
	color:rgba(25,175,150,1.0);
	font-weight:700;
	text-align:center;
}

.voice_hamigaki_title .text{
	padding:17px 0px 0px 10px;
	font-size:200%;
	line-height:125%;
	letter-spacing:-0.01em;
	color:rgba(50,50,50,1.0);
	font-weight:900;
	text-align:center;
}

.voice_hamigaki_img{
	position:relative;
	padding:0px 10px 10px 0px;
}

.voice_hamigaki_img img{
	height:75px;
}

@media all and (max-width:960px), print{

.voice_hamigaki_title .numb{
	padding:0px 0px 0px 8px;
	font-size:300%;
}

.voice_hamigaki_title .text{
	padding:15px 0px 0px 8px;
	font-size:175%;
}

.voice_hamigaki_img{
	padding:0px 8px 9px 0px;
}

.voice_hamigaki_img img{
	height:60px;
}

}

@media screen and (max-width:640px){

.voice_hamigaki_title .numb{
	padding:0px 0px 0px 6px;
	font-size:250%;
}

.voice_hamigaki_title .text{
	padding:13px 0px 0px 6px;
	font-size:150%;
}

.voice_hamigaki_img{
	padding:0px 6px 8px 0px;
}

.voice_hamigaki_img img{
	height:45px;
}

}

@media screen and (max-width:375px){

.voice_hamigaki_title .numb{
	padding:0px 0px 0px 5px;
	font-size:225%;
}

.voice_hamigaki_title .text{
	padding:14px 0px 0px 5px;
	font-size:125%;
}

.voice_hamigaki_img{
	padding:0px 5px 7px 0px;
}

.voice_hamigaki_img img{
	height:40px;
}

}


/*-- NUMBER --*/

.voice_hamigaki_numb_frame{
	position:relative;
	padding:20px 0px 35px 0px;
	width:100%;
	display:flex;
	align-items:center;
}

.voice_hamigaki_numb_frame .text{
	padding:0px 5px 0px 15px;
	font-size:100%;
	line-height:125%;
	color:rgba(50,50,50,1.0);
	font-weight:500;
	text-align:left;
}

.voice_hamigaki_numb_frame .numb{
	padding:0px 0px 0px 0px;
	font-size:100%;
	line-height:125%;
	color:rgba(50,50,50,1.0);
	font-weight:500;
	text-align:left;
}

@media all and (max-width:960px), print{

.voice_hamigaki_numb_frame{
	padding:15px 0px 30px 0px;
}

.voice_hamigaki_numb_frame .text{
	font-size:93.75%;
}

.voice_hamigaki_numb_frame .numb{
	font-size:93.75%;
}

}

@media screen and (max-width:640px){

.voice_hamigaki_numb_frame{
	padding:10px 0px 25px 0px;
}

.voice_hamigaki_numb_frame .text{
	padding:0px 4px 0px 12px;
	font-size:87.5%;
}

.voice_hamigaki_numb_frame .numb{
	font-size:87.5%;
}

}

@media screen and (max-width:375px){

.voice_hamigaki_numb_frame .text{
	padding:0px 3px 0px 9px;
	font-size:81.25%;
}

.voice_hamigaki_numb_frame .numb{
	font-size:81.25%;
}

}


/*-- VOICE --*/

.voice_hamigaki_comment_area{
	position:relative;
	padding:0px 0px 45px 0px;
}

.voice_hamigaki_comment{
	position:relative;
	margin:0px 0px 10px 0px;
	padding:15px 15px 15px 15px;
	max-width:100%;
	background-color:rgba(245,245,245,1.0);
	/* radius */
	-webkit-border-radius:10px;
	   -moz-border-radius:10px;
	        border-radius:10px;
}

.voice_hamigaki_comment .comment{
	padding:5px 5px 5px 5px;
	font-size:112.5%;
	line-height:150%;
	color:rgba(50,50,50,1.0);
	font-weight:500;
	text-align:left;
}

.good_btn_frame{
	margin:10px 0px 0px 0px;
	padding:12px 5px 0px 5px;
	border-top:1px solid rgba(225,225,225,1.0);
	box-sizing:border-box;
	display:flex;
	align-items:center;
}

.good_btn_frame .icon{
	padding:0px 10px 0px 5px;
}

.good_btn_frame .icon img{
	width:22px;
	cursor:pointer;
}

.good_btn_frame .numb{
	font-size:93.75%;
	line-height:125%;
	color:rgba(100,100,100,1.0);
	text-align:left;
}

@media screen and (max-width:1280px){

.voice_hamigaki_comment .comment{
	font-size:106.25%;
}

}

@media all and (max-width:960px), print{

.voice_hamigaki_comment_area{
	padding:0px 0px 35px 0px;
}

.voice_hamigaki_comment{
	margin:0px 0px 8px 0px;
	padding:13px 13px 13px 13px;
	/* radius */
	-webkit-border-radius:8px;
	   -moz-border-radius:8px;
	        border-radius:8px;
}

.voice_hamigaki_comment .comment{
	font-size:100%;
}

.good_btn_frame{
	margin:8px 0px 0px 0px;
	padding:10px 5px 0px 5px;
}

.good_btn_frame .icon{
	padding:0px 8px 0px 5px;
}

.good_btn_frame .icon img{
	width:21px;
}

.good_btn_frame .numb{
	font-size:87.5%;
}

}

@media screen and (max-width:640px){

.voice_hamigaki_comment_area{
	padding:0px 0px 25px 0px;
}

.voice_hamigaki_comment{
	margin:0px 0px 6px 0px;
	padding:11px 11px 11px 11px;
	/* radius */
	-webkit-border-radius:6px;
	   -moz-border-radius:6px;
	        border-radius:6px;
}

.voice_hamigaki_comment .comment{
	font-size:93.75%;
}

.good_btn_frame{
	margin:6px 0px 0px 0px;
	padding:8px 5px 0px 5px;
}

.good_btn_frame .icon{
	padding:0px 6px 0px 5px;
}

.good_btn_frame .icon img{
	width:20px;
}

.good_btn_frame .numb{
	font-size:81.25%;
}

}


/*-- VOICE TIMER --*/

.voice_hamigaki_comment{
	opacity:0;
	transition:all 1.0s ease-out;
}
 
.voice_hamigaki_comment.show{
	opacity:1;
	transform:none;
}


/*-- FORM --*/

.voice_hamigaki_fix_frame{
	position:sticky;
	bottom:0px;
	padding:25px 0px 25px 0px;
	max-width:100%;
	background-color:rgba(255,255,255,1.0);
	align-self:flex-end;
	display:flex;
	justify-content:space-between;
}

.voice_hamigaki_fix_frame .comment_form{
	width:calc(100% - 215px);
}

.voice_hamigaki_fix_frame .comment_nav{
	width:200px;
}

.input_form_comment{
	padding:12px 15px 12px 15px;
	width:100%;
	height:50px;
	background-color:rgba(255,255,255,1.0);
	border:1px solid rgba(175,175,175,1.0);
	box-sizing:border-box;
	/* radius */
	border-radius:3px;
}

.voice_hamigaki_fix_frame .comment_form textarea{
	font-size:100%;
	font-feature-settings:"palt" 1;
	font-family:'Noto Sans JP', sans-serif;
	color:rgba(50,50,50,1.0);
}

.voice_hamigaki_fix_frame .comment_nav nav a{
	margin:0px auto 0px auto;
	width:100%;
	background-color:rgba(200,0,0,1.0);
	font-size:112.5%;
	line-height:50px;
	color:rgba(255,255,255,1.0);
	font-weight:500;
	text-align:center;
	text-decoration:none;
	transition:0.25s ease-out;
	display:block;
	/* radius */
	border-radius:3px;
}

.voice_hamigaki_fix_frame .comment_nav nav a:hover{
	background-color:rgba(175,0,0,1.0);
}

@media all and (max-width:960px), print{

.voice_hamigaki_fix_frame .comment_form{
	width:calc(100% - 190px);
}

.voice_hamigaki_fix_frame .comment_nav{
	width:180px;
}

.input_form_comment{
	padding:12px 14px 12px 14px;
	height:48px;
}

.voice_hamigaki_fix_frame .comment_form textarea{
	font-size:93.75%;
}

.voice_hamigaki_fix_frame .comment_nav nav a{
	font-size:106.25%;
	line-height:48px;
}

.voice_hamigaki_fix_frame .comment_nav nav a:hover{
	background-color:rgba(200,0,0,1.0);
}

}

@media screen and (max-width:640px){

.voice_hamigaki_fix_frame{
	padding:20px 0px 20px 0px;
}

.voice_hamigaki_fix_frame .comment_form{
	width:calc(100% - 150px);
}

.voice_hamigaki_fix_frame .comment_nav{
	width:140px;
}

.input_form_comment{
	padding:12px 13px 12px 13px;
	height:46px;
}

.voice_hamigaki_fix_frame .comment_form textarea{
	font-size:87.5%;
}

.voice_hamigaki_fix_frame .comment_nav nav a{
	font-size:100%;
	line-height:46px;
}

.voice_hamigaki_fix_frame .comment_nav nav a span{
	display:none;
}

}

@media screen and (max-width:375px){

.voice_hamigaki_fix_frame .comment_form{
	width:calc(100% - 125px);
}

.voice_hamigaki_fix_frame .comment_nav{
	width:120px;
}

.input_form_comment{
	padding:12px 12px 12px 12px;
	height:45px;
}

.voice_hamigaki_fix_frame .comment_form textarea{
	font-size:87.5%;
}

.voice_hamigaki_fix_frame .comment_nav nav a{
	font-size:93.75%;
	line-height:45px;
}

}


/*-- RUBY --*/

rt{
	font-size:20%;
	letter-spacing:-0.01em;
}

@media screen and (max-width:640px){

rt{
	font-size:10%;
}

}