@charset "utf-8";
@media screen and (max-width:640px){


/*	ドキュメント全体	*/
body {
	word-break: break-all;
	width: 98%;
	margin: 0px;
/*	font-family:  "ヒラギノ", "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif; */
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	font-size: 1.0rem;
	font-size: 1.4rem;
	background-color: #ffffff;
}

a {
	color: #0077aa;
	text-decoration: under-line;
}


.container {
	margin: 0 auto 0 auto;
	padding: 20px 0 20px 0;
	overflow: hidden;
}

.main_contents {
	float: left;
	overflow: hidden;
	width: 100%;
}

.content_left {
	float: left;
	width: 100px;
	height: 120px;
	margin: 5px 10px 0 5px;
}

.content_left .date {
	display: none;
	text-align: center;
	font-size: 8px;
}

.content_right {
	clear: both;
	float: left;
	margin: -125px 0 0 5px;
	width: 95%;
}

.no_title {
	margin: 20px 0 0 0;
}

.category {
	margin: -3px 0 0 0;
}

.content_top {
	clear: both;
	float: left;
	/* background-image: url( "../img/content_top_sp.png" ); */
	background-position: 0px 0px;
	margin: 10px 10px 0 auto;
	padding: 5px 5px 5px 5px;
	overflow: hidden;
	height: auto;
	width: 95%;
}

.content_top.reverse {
	background-image: url( "../img/content_top_sp_reverse.png" );
}

.no_title .content_top {
	background-position: 0 -120px;
	padding: 30px 0px 0px 30px;
}

.content_top a.title {
	display: block;
	text-decoration: none;
	line-height: 1.3;
	font-size: 213%;
	height: 115px;
	margin: 0 0 25px 90px;
	overflow: hidden;
	width: calc( 100% - 100px );
}

.content_top .date, .date {
	clear: both;
	margin: 0 10px 10px 0;

	font-weight: bold;
	text-align: right;

	border-top: none;
	border-bottom: solid 1px <?php echo( $strLightColor ); ?>;
	color: <?php echo( $strDarkColor ); ?>;
	padding: 3px 10px 3px 10px;
}

.content_bottom {
	clear: both;
	float: left;
	height: 7px;
	/* background-image: url( "../img/content_bottom_sp.png" ); */
	background-position: bottom left;
	background-repeat: no-repeat;
	margin: 0px auto 22px auto;
	padding: 0px 5px 0px 5px;
	width: 95%;
}

.content_bottom.reverse {
	background-image: url( "../img/content_bottom_sp_reverse.png" );
}

.sidebar {
	clear: both;
	float: left;
	border: solid 1px #ff0000;
}

.sidebar .element_contents {
	width: 198px;
	min-height: 100px;
	border: solid 1px #bcbcbc;
	background-color: #ffffff;
}

.paginator {
	clear: both;
}

ul.pagination {
	list-style-type: none;
	padding-left: 0px;
}

ul.pagination li a, div.paginator p {
	display: block;
	float: left;
	margin: 0 0 0 2px;
	padding: 5px;
	border: solid 1px #aaaaaa;
	text-decoration: none;
	color: #666666;
	background-color: #ffffff;
}

ul.pagination li.active a {
	color: #ff0000;
	font-weight: bold;
	border: solid 1px #ff0000;
	background-color: #ffeeee;
}

.slideshow {
	overflow: hidden;
	width: 100%;
	min-width: auto;
	height: 250px;
	border-top: solid 1px #888888;
	border-bottom: solid 1px #888888;
	background-color: #cdcdcd;
}

.character_element {
	float: left;
	width: 260px;
	height: 450px;
	text-align: center;
	padding: 20px;
	overflow: hidden;
}

.character_element img {
	width: 260px;
}

.character_element p {
	font-size: 14px;
	text-align: left;
}

h1 {
	line-height: 1.3;
	font-family: Roboto, "Hiragino Sans";
	font-size: 213%;
	font-weight: 700;
	margin: 0px 0 36px 0;
	padding: 33px 0 33px 0;
	text-align: center;
}

h2 {

	font-size: 130%;
	font-weight: bold;
	color: #000000;
	padding: 10px;
	margin-right: 5px;
	background-image: -webkit-gradient(
                  linear
                , left top
                , left bottom
                , from(#ffffff)
                , to(#eeeeee));
}

.speak_ballon {
	width: 100%;
	height: 40px;
	background-image: url( '../img/view_bottom_sp.png' );
	background-position: center;
	background-repeat: no-repeat;
	margin: 0 auto 0 auto;
}

.description {
	clear: both;
	padding: 0 0px;
	line-height: 1.8;
	font-size: 130%;
}

.description img {
	margin: 10px 10px 20px 10px;
	padding: 10px;
	border: solid 1px #cdcdcd;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
	width: 240px;
}

.view_author {
	margin-left: 10px;
}

.view_image {
	text-align: center;
	padding: 0 0 50px 0;
	overflow: hidden;
}

.view_image img {
	max-width: 80%;
	padding: 10px;
	border: solid 1px #cdcdcd;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}

.link {
	background-image: url( '../img/ic_link.png' );
	background-position: left center;
	background-repeat: no-repeat;
	padding: 0 0 0 20px;
	margin: 0 0 20px 50px;
}

.twitter-share-button {
	float: right;
	margin-right: 10px;
}

.fb-like {
	float: right;
	margin-right: 10px;
}

#map {
	height: 400px;
	overflow: hidden;
}

#map_border {
	border: solid 1px #aaaaaa;
	margin-bottom: 20px;
	padding-left: 1px;
}

.weather {
	overflow: hidden;
	height: auto;
	clear: both;
	margin: 0 auto 20px auto;

	border: solid 1px #aaaaaa;
	border-right: none;
	border-bottom: none;
	border-radius: 5px;
}

.weather_header {
	float: left;
	overflow: hidden;
}

.weather_body {
	float: left;
	overflow: hidden;
}

.weather_data {
	height: 60px;
}

.weather_header div {
	border-right: solid 1px #aaaaaa;
	border-bottom: solid 1px #aaaaaa;
	padding: 5px;
	background-color: #eeeeee;
	color: #333333;
	font-weight: bold;
	width: 117px;
}

.weather_body div {
	width: 117px;
	border-right: solid 1px #aaaaaa;
	border-bottom: solid 1px #aaaaaa;
	padding: 5px;
	background-color: #ffffff;
	color: #000000;
	text-align: center;
}

.weather_body div.weather_data {
	border-right: solid 1px #aaaaaa;
	border-bottom: solid 1px #aaaaaa;
	padding: 5px;
	background-color: #ffffff;
	color: #000000;
	text-align: center;
}


.calender {
	overflow: hidden;
	height: auto;
	width: 388px;
	clear: both;
	border-left: solid 1px #aaaaaa;
	border-top: solid 1px #aaaaaa;
	margin: 0 auto 20px auto;
	border: solid 1px #aaaaaa;
	border-radius: 5px;
}

.calender_title_cell {
	display: none;
	float: left;
	width: 390px;
	padding: 5px 0 5px 0;
	text-align: center;
	font-size: 1.0%;
	font-weight: bold;
	border-right: solid 1px #aaaaaa;
	border-bottom: solid 1px #aaaaaa;
	background-color: #eeeeee;
}

.calender_cell {
	float: left;
	width: 390px;
	height: 100px;
	border-right: solid 1px #aaaaaa;
	border-bottom: solid 1px #aaaaaa;
}

.today {
	background-color: #ffeeaa;
}

.holiday {
	background-color: #ffdddd;
}

.no_display {
	display: none;
}

.calender_cell .day {
	display: none;
	float: left;
	font-size: 100%;
	font-weight: bold;
	color: #000000;
	width: 25px;
	height: 20px;
	padding: 10px 5px 5px 5px;
	text-align: center;
	border-right: solid 1px #aaaaaa;
	border-bottom: solid 1px #aaaaaa;
	background-color: #ffffff;
}

.calender_cell .day_sp {
	display: block;
	float: left;
	font-size: 100%;
	font-weight: bold;
	color: #000000;
	width: 150px;
	height: 20px;
	padding: 10px 5px 5px 5px;
	text-align: center;
	border-right: solid 1px #aaaaaa;
	border-bottom: solid 1px #aaaaaa;
	background-color: #ffffff;
}

.calender_cell .calender_weather {
	float: left;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
	width: 218px;
	height: 25px;
	padding: 5px;
	text-align: center;
	border-bottom: solid 1px #aaaaaa;
	background-color: #ffffff;
}

.calender_cell .calender_weather img {
	width: 20px;
}

.calender_controller {
	display: block;
	border: solid 1px #aaaaaa;
	background-color: #eeeeee;
	border-radius: 5px;
	overflow: hidden;
	margin: 0 5px 20px 0;
}

.calender_controller a, .calender_controller .month, .calender_controller .menu {
	display: block;
	padding: 22px 10px 22px 10px;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	float: left;
	border-right: solid 1px #aaaaaa;
}

.calender_controller .month {
	background-color: #ffffff;
}

.calender_item {
	font-size: 12px;
	padding: 2px;
}

.holiday .calender_item {
	color: #ff00aa;
}

.calender_item a {
	color: #ff6600;
	text-decoration: none;
}



.clear {
	clear: both;
}

input[type="text"],
input[type="password"],
input[type="file"],
textarea,
select
 {
 	-webkit-appearance: none;
 	max-width: 80%;
}

.input_field {
	border-top: dotted 1px #aaaaaa;
}

.calender_controller input[type="text"] {
	width: 80px;
}

.calender_controller input[type="submit"] {
	padding: 15px 10px 15px 10px;
	width: 80px;
	font-size: 10px;
}

a.link_command, .form_return_link a, input[type=submit], .button  {
 	-webkit-appearance: none;
}

.tab_area {
  min-width: 100%;
}

.tab_border {
	display: none;
}

.tab a {
	width: 94%;
	border-right: solid 1px #aaaaaa;
	margin: 0px 20px 0px 0px;
	margin-bottom: 0px;
}

.tab.active a {
	background-color: #ffffff;
	border-bottom: solid 1px #aaaaaa;
}

.tab_border_last {
	height: 0px;
	border-left: none;
	border-bottom: none;
	margin-bottom: 10px;
}


.data_table {
	display: inline;
	max-width: 10px;
	overflow: hidden;
}

.data_table tbody {
	display: inline;
	width: 320px;
}

.data_table tr {
	display: block;
	float: left;
	border: solid 1px #aaaaaa;
	border-top: none;
	margin-bottom: 0px;
}

.data_table th.list_title {
	display: block;
	clear: both;
	width: 270px;
	border-bottom: none;
	margin: 0px;
	margin-bottom: 1px;
}

.data_table td.list_data {
	display: inline;
	float: left;
	clear: both;
	width: 290px;
	min-height: 40px;
	margin-bottom: 1px;
	padding-bottom: 0px;
	border-bottom: none;
}

.data_table th {
	margin-top: 0px;
	margin-bottom: 0px;
}

.project_user {
	font-size: 0.8em;
	width: 94%;
	padding: 5px;
	border-left: solid 1px #dddddd;
	border-right: solid 1px #dddddd;
	border-top: solid 3px <?php echo( $strDarkColor ); ?>;
}

.project_icon {
	border: solid 1px #dddddd;
}

.project_content {
	width: 94%;
	padding: 5px;
	border-top: none;
	font-size: 0.8em;
}

.vertical_scroll {
	width: 100%;
	overflow-x: scroll;
}

.vertical_scroll_inner {
	width: 1024px;
}

.vertical_scroll_inner .data_table td.list_data {
	float: none;
}

.category_element {
	width: 97%;
}