@charset "UTF-8";
#content {
    min-width: 320px;
	background-size: 100% auto !important;
	padding-bottom: 50px;
}


#pagetop a {
	position: absolute;
	display: block;
    width: 120px;
    height: 26px;
    left: inherit;
	right: 5px;
	bottom: 10px;
    margin: 0;
}
#pagetop a img{height: 12px;}

/*** top_area start ***/

#top_area {
    min-width: 320px;
    height: 50px;
    padding: 10px 0 0;
	box-sizing: border-box;
	z-index: 9;
}

#btn_back a {
    width: 60px;
    height: 25px;
    margin: 0;
	border-radius: 0;
}

#btn_back a img{width: auto; height: 11px;}

#btn_comment a{
    width: 100px;
    height: 25px;
	border-radius: 0;
	float: right;
}
#btn_comment a img{width: auto; height: 11px;}


#search_area {
    width: 154px;
    margin: 0;
	box-sizing: border-box;
}
#search_area.openSearch{
	width: 100%; padding:10px 5px 15px;
	top: 0; left: 0;
	background: #ffffff;
	z-index: 1;
	position: absolute;
	text-align: center;
}
#search_area form{display: none;}
.text_search{display: none;}

#search_area.openSearch .text_search{height: 22px; width: auto; display: inline-block; float: none !important; vertical-align: middle;}
#search_area.openSearch form{display: inline-block; vertical-align: middle; float: none !important;}
#search_area.openSearch input{
	width: 140px !important;
    height: 25px !important;
	box-sizing: border-box;
}

#search_area.openSearch .btn_search{
	display: inline-block; vertical-align: middle;
}
#search_area.openSearch #text_box_search img {
    top: 25px;
	left: -10px;
    height: 10px;
}


#search_area.openSearch .closeBtn{
	border: 1px #0b7fd3 solid;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	position: relative;
	display: inline-block;
	border-radius: 50%;
	line-height: 16px;
	z-index: 99;
	margin-left: 5px;
	color: #0b7fd3;
	cursor: pointer;
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;}

#search_area.openSearch .closeBtn:before,
#search_area.openSearch .closeBtn:after{content:''; height:3px; width:16px; display:block; background:#0b7fd3; border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; position:absolute; top:6.5px; left:0; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);}
#search_area.openSearch .closeBtn:after{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}


#search_area.openSearch #btn_search{
	display: inline-block; vertical-align: middle;
}

#btn_search a {
    width: 54px;
    height: 25px;
    margin-right: 0;
	border-radius: 0;
}
#btn_search a img{width: auto; height: 16px;}

#btn_sort a{
    width: 100px;
    height: 25px;
    float: left;
    border-radius: 0;
}

#btn_sort a img{width: auto; height: 14px;}

#search_area.openSearch #btn_sort{
	display: none;
}

/*** top_area end ***/


#title_area {
    width: 98%;
    height: auto;
	max-width: 800px;
    margin: 70px auto 0;
    font-size: 25px;
	background-size: cover;
}

#title_area p {
    height: auto;
	min-height: 100px;
    width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
    font-size: 18px;
	line-height: 1.6;
}

@media screen and (max-width:520px){
	#title_area p{
		min-height: 65px;
	}
}

#title_area p img{
	width: 100%;
}

#info_area {
    width: 96.5%;
    box-sizing: border-box;
    padding: 15px 0 0;
    max-width: 790px;
}

#info_area #info_text{
    width: 100%;
    font-size: 12px;
    line-height: 1.6em;
    float: none;
	position: relative;
	overflow: hidden;
	height: 140px;
	padding-bottom: 50px;
	padding-left: 15px; padding-right: 15px;
	box-sizing: border-box;
}

#info_area #info_img {
    float: none;
    margin-right: 0;
	margin-bottom: 15px;
	text-align: center;
}

#info_area #info_img img{width:60px;}

/*****/


.grad-btn{
	display: block;
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 12px;
    left: 0;
    width: 74px;
    margin: auto;
    padding: 7px 12px;
    background: #0b7fd3;
    color: #fff;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
}


.grad-btn:before {
  content: "続きを読む"
}



#info_area .grad-trigger ~ #info_text:before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}

#info_text img{max-width: 100%; display: block; margin-left: auto; margin-right: auto;}

#info_area .grad-trigger:checked ~ .grad-btn:before {
  content: "閉じる";
}
#info_area .grad-trigger:checked ~ #info_text {
  height: auto;
}

#info_area .grad-trigger:checked ~ #info_text:before {
  display: none;
}

/*****/

#comment_area {
    width: 100%;
    padding: 15px 3px;
	box-sizing: border-box;
}

.comment_block {
    width: 100%;
    padding: 15px 10px;
	box-sizing: border-box;
}

.comment_text img{max-width:100%; display: block; margin-left: auto; margin-right: auto;}

.comment_block .comment_title {
    font-size: 16px;
	line-height: 1.5;
}
.comment_block .user_info{
	margin-top: 15px;
}

.comment_block .user_info .comment_icon {
    margin-right: 10px;
}

.comment_block .user_info .comment_icon img{
	width: 39px;
}


.comment_block .user_info .comment_nickname {
    font-size: 14px;
}
.comment_block .comment_text {
    font-size: 12px;
    line-height: 1.5em;
    margin-top: 20px;
	word-break: break-all;
	word-wrap: break-word;
}

.comment_block .user_info .comment_grade{
	float: right;
	margin-right: 0;
}
.comment_block .user_info .comment_grade img{
	width: 40px;
}

.comment_block .user_info .comment_date{
	clear: both;
	float: left;
	margin-top: 10px;
}
.comment_block ul.btn_good_area{
	margin-left: -8px;
	margin-right: -8px;
}

.comment_block ul.btn_good_area li {
    margin-right: 0;
	padding-right: 1px;
    margin-bottom: 10px;
	min-height: 53px;
	width: 25%; box-sizing: border-box;
	max-width: 160px;
}
.comment_block ul.btn_good_area li:last-child{
	padding-right: 0;
}

.comment_block ul.btn_good_area li a{width: 100%; overflow: hidden; position: relative; display: block;}

.comment_block ul.btn_good_area li div.good_counter span{
	font-size: 11px;
}

.comment_block ul.btn_good_area li a img{
	width: 100%;
}

.comment_block .comment_text font[size]{
	font-size: 130%;
}

.navi_area{margin-left: -15px; margin-right: -15px; margin-bottom: 15px;}
.holder a{width: 24px; height: 24px; font-size: 12px; line-height: 24px;}
.holder a.jp-next,
.holder a.jp-previous{width: 26px; height: 26px; background-size: cover !important;}


/*****/

#bl_bg{z-index: 9;}
#popup{z-index: 9; width: 100%; top:0;}
#alert{z-index: 9; width: 100%; top: 10%;}
#popup_title{
    height: 25px;
    padding: 10px 0 0 15px;
}
#alert_title{
    height: 25px;
    padding: 7px 0 5px 15px;
}
#btn_pop_alert a {
    width: 110px; height: 40px
}

#popup_title > img{width:100px;}
#popup_title a,
#alert_title a{top: 8px; right: 10px;}


#alert p{font-size: 14px;}

#form_area, #check_area, #finish_area {
    width: 100%;
    padding: 15px;
	box-sizing: border-box;
}

#text_box_title, #form-result-title,
#text_box_nickname, #form-result-nickname,
#icon_select, #form-result-icon,
#text_box_comment, #form-result-txt{
    padding-left: 0;
	padding-top: 26px;
    margin-bottom: 15px;
    background-size: 180px auto;
}
#icon_select, #form-result-icon{
	background-position: 0 5px;
}
#grade_select, #form-result-grade{
    padding-left: 0;
	padding-top: 26px;
    margin-bottom: 15px;
    background-size: 110px auto;
}



#text_box_title input, #text_box_nickname input{
	width: 100% !important;
	box-sizing: border-box;
}

#text_box_comment textarea{
	width: 100% !important;
	height: 140px !important;
	box-sizing: border-box;
}

#grade_select ul li a{
    width: 53px;
	height: 30px;
    margin-left: 0px;
	margin-right: 10px;
    margin-bottom: 10px;
	position: relative; display: block;
	background-size: 100% auto;
}

.pop_text_caution{
	margin-left: auto !important;
	margin-right: auto !important;
	display: block;
	max-width: 100%;
}

.btn_area{
    width: 100%; max-width: 320px;
}

#btn_pop_back a, #btn_pop_back_2 a, #btn_pop_finish a {
    width: 100px;
    height: 40px;
    margin: 0;
}

#btn_pop_back a img, #btn_pop_back_2 a img, #btn_pop_finish a img{
	width: auto; height: 18px;
}

#btn_pop_check a, #btn_pop_send a {
    width: 180px;
    height: 40px;
    float: right;
}

#btn_pop_check a img{
	height: 28px;
}
#btn_pop_send a img{
	height: 18px;
}

#btn_pop_finish {
    margin: 35px auto; width: 100px; height: 40px; display: block;
}
#finish_area > img{max-width:100%;}



.movieBlock{
	content: '';
	clear: both;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movieBlock video, .movieBlock iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}