@charset "UTF-8";

/***********************************************************************************
  初期設定
***********************************************************************************/

body, div, p, form, fieldset, input, textarea, select, option, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, table, th, td {
	margin: 0;
	padding: 0;
	line-height: 1.4;
	vertical-align: baseline;
}

body {
	color: #333333;
	font-size: 13px;
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, Verdana, sans-serif;
	background-color: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, strong {
	font-style: normal;
	font-weight: normal;
}

table {
	border-collapse: collapse;
}

table, th, td, img {
	border: 0;
}

caption, th {
	text-align: left;
	font-weight: normal;
}

dl, ul, ol {
	list-style: none;
	list-style-position: outside;
}

form {
	display: inline;
}

img, input {
	vertical-align: middle;
}

div, p, h1, h2, h3, h4, h5, h6 {
	word-break: break-all;
	word-wrap: break-word;
}

a {
	text-decoration: none;
	outline: none;
}

a:link {
	color: #0033cc;
}

a:visited {
	color: #990099;
}

a:active {
	color: #000000;
}

/***********************************************************************************
  共通
***********************************************************************************/

.clear {
	clear: both;
}

.red {
	color: #cc0000;
}

.icon {
	text-indent: -9999px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
}

.text {
	text-align: justify;
	text-justify: distribute;
}

.screen {
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.8;
	display: none;
	z-index: 6;
	position: fixed;
	top: 0;
	left: 0;
}

.message {
	padding: 8px;
	background-color: #ffffff;
	display: none;
	z-index: 7;
	position: fixed;
	border-radius: 3px;
	box-shadow: 1px 1px 2px #111111;
}

.message div {
	padding: 20px;
	border-radius: 3px;
	border: 1px #777777 solid;
	background-color: #ffffff;
}

.fixed_bg {
	background-color: #111111;
	opacity: 0.9;
}

.arrow {
	padding: 0 0 0 12px;
	background-image: url(../img/arrow_mini.png);
	background-position: left 8px;
	background-repeat: no-repeat;
	background-size: 6px 6px;
	display: block;
}

.space_top {
	margin: 10px 0 0 0;
}

.space_bottom {
	margin: 0 0 10px 0;
}

/***********************************************************************************
  広告
***********************************************************************************/

.ad {
	margin: 0 0 20px 0;
	text-align: center;
}

.h160 {
	height: 160px;
}

.h600 {
	height: 600px;
}

.ad_sp {
	height: 50px;
	position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
	display: none;
}

div.ad_sp {
	border-top: 1px #ffffff solid;
	z-index: 2;
}

a.ad_sp {
	text-indent: -9999px;
	overflow: hidden;
	background-image: url(../img/pr_k-jz_sp.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 320px 50px;
	z-index: 3;
}

/***********************************************************************************
  フォーム
***********************************************************************************/

input,
select,
textarea {
	color: #333333;
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, Verdana, sans-serif;
}

input[type=text],
textarea {
	border: 1px #333333 solid;
	box-shadow: 1px 1px 2px #cccccc inset;
}

input[type=text] {
	width: 90%;
	max-width: 400px;
	padding: 1px 0 1px 5px;
}

textarea {
	width: 90%;
	max-width: 600px;
	height: 180px;
	padding: 5px;
}

select {
	padding: 1px 5px;
	border: 1px #333333 solid;
}

label,
input[type=submit],
input[type=reset],
input[type=button] {
	cursor: pointer;
}

input[type=submit],
input[type=reset],
input[type=button] {
	width: 110px;
	height: 30px;
	padding: 1px 15px 1px 15px;
	color: #ffffff;
	background-color: #555555;
	border: 1px #333333 solid;
	border-radius: 3px;
	box-shadow: 1px 1px 1px #999999 inset, -1px -1px 1px #111111 inset;
	-webkit-appearance: none;
}

/***********************************************************************************
  ヘッダー
***********************************************************************************/

#header,
#c_header {
	top: 0px;
	left: 0px;
	right: 0px;
}

#header {
	height: 50px;
	background-color: #555555;
	background: linear-gradient(#777777, #555555);
	position: absolute;
	z-index: 5;
}

#c_header {
	height: 51px;
	position: fixed;
	z-index: 4;
}

#c_header .fixed_bg {
	border-bottom: 1px #ffffff solid;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

#c_header .help {
	width: 50px;
	height: 50px;
	background-image: url(../img/icon_help.png);
	background-size: 14px 22px;
	border-left: 1px #cccccc solid;
	position: absolute;
	top: 0px;
	right: 51px;
}

#c_header .go_top {
	width: 50px;
	height: 50px;
	background-image: url(../img/arrow_up.png);
	background-size: 20px 23px;
	background-position: center 13px;
	border-left: 1px #cccccc solid;
	position: absolute;
	top: 0px;
	right: 0px;
}

#header h1,
#header .logo,
#c_header .logo {
	width: 103px;
	height: 24px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	position: absolute;
	top: 13px;
	left: 20px;
}

#header h1,
#c_header .logo {
	background-image: url(../img/title.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 103px 24px;
}

#header .switch {
	float: left;
}

#header .switch .display_type,
#header .switch .font_size {
	margin: 0 10px 0 0;
	white-space: nowrap;
	display: inline-block;
}

#header .switch .display_type span,
#header .switch .display_type a,
#header .switch .font_size span,
#header .switch .font_size a {
	padding: 3px 0;
	font-size: 12px;
	text-align: center;
	border-top: 1px #eeeeee solid;
	border-bottom: 1px #eeeeee solid;
	display: inline-block;
}

#header .switch .display_type .type_l,
#header .switch .display_type .type_r,
#header .switch .font_size .size_s,
#header .switch .font_size .size_m,
#header .switch .font_size .size_l {
	background-color: #eeeeee;
	box-shadow: 1px 1px 2px #ffffff inset, -1px -1px 2px #cccccc inset;
}

#header .switch .display_type .type_l,
#header .switch .display_type .type_r {
	width: 62px;
}

#header .switch .font_size .size_s,
#header .switch .font_size .size_m,
#header .switch .font_size .size_l {
	width: 24px;
}

#header .switch .title {
	width: 40px;
	color: #eeeeee;
	border-color: #cccccc;
	border-left: 1px #eeeeee solid;
	border-radius: 3px 0 0 3px;
}

#header .switch .display_type .type_r,
#header .switch .font_size .size_l {
	border-right: 1px #eeeeee solid;
	border-radius: 0 3px 3px 0;
}

#header form {
	display: block;
	position: absolute;
	top: 12px;
	right: 20px;
}

#header form input[type=text] {
	width: 213px;
	height: 23px;
	margin: 0 1px 0 0;
	border: none;
	border-radius: 3px 0 0 3px;
}

#header form input[type=submit] {
	width: 70px;
	height: 25px;
	padding: 1px 10px 1px 15px;
	letter-spacing: 5px;
	border: 1px #cccccc solid;
	border-radius: 0 3px 3px 0;
}

#menu {
	margin: 50px 0 0 0;
	padding: 0 20px;
	background-color: #eeeeee;
	border-bottom: 4px #555555 solid;
	box-shadow: 0px 2px 3px #cccccc;
	overflow: hidden;
}

#menu ul {
	border-left: 1px #cccccc solid;
}

#menu ul li {
	width: 90px;
	text-align: center;
	display: inline-block;
}

#menu ul li a {
	padding: 2px 0 1px 0;
	color: #555555;
	font-size: 12px;
	border-top: 1px #ffffff solid;
	border-left: 1px #ffffff solid;
	border-right: 1px #cccccc solid;
	border-bottom: 1px #cccccc solid;
	display: block;
}

/***********************************************************************************
  フッター
***********************************************************************************/

#footer {
	padding: 25px 20px 55px 20px;
	text-align: center;
	background-color: #ffffff;
	border-top: 1px #777777 solid;
	position: relative;
}

#footer .link {
	color: #777777;
	font-size: 12px;
}

#footer .link a {
	margin: 0 5px;
	color: #555555;
}

#footer .copy {
	padding: 10px 0 0 0;
	color: #555555;
	font-size: 12px;
}

/***********************************************************************************
  ボディ
***********************************************************************************/

#body {
	padding: 20px 0;
	position: relative;
}

/***********************************************************************************
  メイン
***********************************************************************************/

#main {
	margin: 0 200px;
}

#main .title {
	padding: 10px 12px 0 12px;
	background-color: #777777;
	background: linear-gradient(#888888, #777777);
	box-shadow: 2px 2px 3px #cccccc;
}

#main .title h2,
#main .title h3,
#main .title strong {
	color: #ffffff;
	padding: 0 0 10px 0;
	font-size: 15px;
	display: inline-block;
	text-shadow: 1px 1px 2px #333333;
}

#main .title .right {
	padding: 0 0 10px 0;
	display: inline-block;
	float: right;
}

#main .title .sort,
#main .title .add,
#main .title .delete {
	white-space: nowrap;
	display: inline-block;
}

#main .title .sort,
#main .title .add,
#main .title .delete,
#main .title .rss {
	margin: 0 0 0 10px;
}

#main .title .sort span,
#main .title .sort a {
	width: 60px;
	padding: 2px 0;
	font-size: 12px;
	text-align: center;
	background-color: #eeeeee;
	border-top: 1px #eeeeee solid;
	border-bottom: 1px #eeeeee solid;
	display: inline-block;
	box-shadow: 1px 1px 2px #ffffff inset, -1px -1px 2px #cccccc inset;
}

#main .title .sort .sort_l {
	border-left: 1px #eeeeee solid;
	border-radius: 3px 0 0 3px;
}

#main .title .sort .sort_r {
	border-right: 1px #eeeeee solid;
	border-radius: 0 3px 3px 0;
}

#main .title .add,
#main .title .delete {
	padding: 2px 8px;
	font-size: 12px;
	background-color: #eeeeee;
	border: 1px #eeeeee solid;
	border-radius: 3px;
	box-shadow: 1px 1px 2px #ffffff inset, -1px -1px 2px #cccccc inset;
}

#main .title .add .icon,
#main .title .delete .icon {
	width: 11px;
	height: 11px;
	margin: 0 5px -1px 0;
	background-size: 11px 11px;
	opacity: 0.4;
}

#main .title .add .icon {
	background-image: url(../img/icon_add.png);
}

#main .title .delete .icon {
	background-image: url(../img/icon_delete.png);
}

#main .title .rss {
	width: 22px;
	height: 22px;
	background-image: url(../img/icon_feed.png);
	background-size: 22px 22px;
	float: right;
}

#main .text {
	padding: 20px 10px;
	font-size: 14px;
	line-height: 1.7;
}

#main .border {
	padding: 20px 0 0 0;
	border-top: 1px #777777 dotted;
}

#main .back a {
	padding: 10px 15px 10px 40px;
	color: #ffffff;
	background-color: #555555;
	background-repeat: no-repeat;
	background-position: 10px center;
	background-image: url(../img/arrow_l.png);
	background-size: 20px 23px;
	border-radius: 3px;
	display: inline-block;
	box-shadow: 1px 1px 2px #999999 inset, -1px -1px 2px #111111 inset;
}

#main .form {
	padding: 20px 0 30px 0;
	border-top: 1px #777777 dotted;
	display: block;
}

#main .form .form_title {
	margin: 0 0 8px 0;
}

#main .form .form_parts {
	margin: 0 0 12px 1px;
	padding: 0 0 0 0.5em;
}

#main .form .form_button {
	margin: 0 0 15px 1px;
	padding: 10px 0 0 0.5em;
}

/***********************************************************************************
  左サイド
***********************************************************************************/

#left {
	left: 20px;
}

/***********************************************************************************
  右サイド
***********************************************************************************/

#right {
	right: 20px;
}

/***********************************************************************************
  サイド
***********************************************************************************/

#fixed_left,
#fixed_right {
	width: 160px;
}

.side {
	width: 160px;
	position: absolute;
	top: 20px;
}

.side .title {
	padding: 8px 10px 7px 10px;
	background-color: #777777;
	background: linear-gradient(#888888, #777777);
}

.side .title h3,
.side .title h4,
.side .title strong {
	color: #ffffff;
	display: block;
	text-shadow: 1px 1px 2px #333333;
}

.side .box {
	margin: 0 0 20px 0;
	border: 1px #777777 solid;
	border-radius: 3px;
	box-shadow: 1px 1px 2px #cccccc;
}

.side .text {
	padding: 15px;
}

.side .box .text {
	padding: 10px;
}

.side .list li {
	border-top: 1px #cccccc solid;
}

.side .list li a {
	padding: 5px 10px;
	border-top: 1px #ffffff solid;
	display: block;
}

.side .list li:first-child {
	border-top: none;
}

.side .list li:first-child a {
	border-radius: 3px 3px 0 0;
}

.side .list li:last-child a {
	border-radius: 0 0 3px 3px;
}

.side .arrow {
	background-position: left 6px;
}

.side .space_top {
	margin: 5px 0 0 0;
}

.side .space_bottom {
	margin: 0 0 5px 0;
}

.side .s_word a {
	margin: 0 15px 0 0;
	line-height: 1.6;
}

.side .s_word a:last-child {
	margin: 0;
}

/***********************************************************************************
  SNSボタン
***********************************************************************************/

#sns_bg {
	height: 30px;
	border-top: 1px #ffffff solid;
	position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 2;
}

#sns {
	height: 25px;
	position: fixed;
	right: 20px;
	bottom: 0px;
	z-index: 3;
}

#sns .share {
	height: 20px;
	margin: 0 4px 4px 0;
	display: inline-block;
	float: left;
}

#sns .share_facebook {
	max-width: 85px;
}

#sns .share_line {
	margin: 0 0 4px 0;
}

#sns .share_pocket {
	margin: 0 1px 4px 0;
	text-indent: -3px;
}

/***********************************************************************************
  リスト
***********************************************************************************/

#main .list {
	margin: 0 0 20px 0;
	overflow: hidden;
	border: 1px #777777 solid;
	border-radius: 3px;
	box-shadow: 1px 1px 2px #cccccc;
}

#main .list .title {
	box-shadow: none;
}

#main .list .link {
	padding: 10px 10px 10px 12px;
	font-size: 14px;
	line-height: 1.8;
	text-align: justify;
	text-justify: distribute;
}

#main .list .link .page {
	margin: 0 7px 0 0;
}

#main .list .link .no_indent {
	margin: 0 7px 0 -0.5em;
}

#main .list .link .icon {
	width: 21px;
	height: 21px;
	margin: -2px 0 0 0;
	opacity: 0.3;
	background-size: 11px 11px;
	vertical-align: middle;
}

#main .list .link .add {
	background-image: url(../img/icon_add.png);
}

#main .list .link .delete {
	background-image: url(../img/icon_delete.png);
}

#main .list .link .site {
	margin: 0 0 0 10px;
	float: right;
}

#main .list .link .site .icon {

}

#main .list .link .site .site_title {
	margin: 0 7px 0 0;
	color: #555555;
	font-size: 12px;
}

#main .pickup {
	border: 3px #cc3333 solid;
	border-radius: 3px;
	box-shadow: 1px 1px 2px #cccccc;
}

#main .list .bg_w,
#main .list .disp_s:nth-child(odd){
	background-color: #ffffff;
}

#main .list .bg_g,
#main .list .disp_s:nth-child(even){
	background-color: #eeeeee;
}

/***********************************************************************************
  リスト（画像あり）
***********************************************************************************/

#main .list .disp_i {
	width: 50%;
	float: left;
}

#main .list .disp_i .link {
	padding: 10px 10px 12px 10px;
}

#main .list .disp_i .link .image {
	height: 100px;
	margin: 0 0 8px 0;
	text-indent: -9999px;
	background-image: url(../img/no_image.png);
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border: 1px #cccccc solid;
	display: block;
}

#main .list .disp_i .link .fix,
#main .list .disp_i .link .fix_h {
	overflow: hidden;
	display: block;
}

#main .list .disp_i .link .fix {
	height: 74px;
}

#main .list .disp_i .link .fix_h {
	height: 101px;
}

#main .list .disp_i .link .site {
	height: 22px;
	margin: 3px 0 0 0;
	overflow: hidden;
}

#main .pickup .disp_i {
	width: 100%;
	float: none;
	position: relative;
}

#main .pickup .disp_i .link .image {
	width: 170px;
	height: 120px;
	margin: 0 0 0 10px;
	float: right;
}

#main .pickup .disp_i .link .fix {
	height: 95px;
}

#main .pickup .disp_i .link .site {
	margin: 3px 0 0 10px;
	position: absolute;
	right: 190px;
	bottom: 12px;
}

/***********************************************************************************
  ページネーション
***********************************************************************************/

#pagination {
	height: 56px;
	position: relative;
}

#pagination .num {
	padding: 18px 0 0 0;
	text-align: center;
}

#pagination .prev,
#pagination .next {
	width: 56px;
	padding: 32px 0 3px 0;
	color: #ffffff;
	text-align: center;
	background-color: #555555;
	background-repeat: no-repeat;
	background-position: center 10px;
	background-size: 23px 20px;
	border-radius: 3px;
	display: block;
	position: absolute;
	top: 0px;
	box-shadow: 1px 1px 2px #999999 inset, -1px -1px 2px #111111 inset;
}

#pagination .prev {
	background-image: url(../img/arrow_l.png);
	left: 0px;
}

#pagination .next {
	background-image: url(../img/arrow_r.png);
	right: 0px;
}

#pagination span {
	opacity: 0.3;
}

#pagination #loading {
	text-indent: -9999px;
	overflow: hidden;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../img/loading.gif);
	background-size: contain;
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 1;
}
