@charset "utf-8";


.reaction-top #gnavi #gnv-2 a,
.reaction-detail #gnavi #gnv-2 a {
	color: #3ecbff ;
}
/* 魚探の仕組み TOP
------------------------ */
.reaction-top { background: url(/imgs/home/main_bg.jpg) repeat-x center 3em ;
}
.reaction-top #contents { background: #FFF ;
}
.reaction-top .page-title .copy-clm {
	color: #0b0b0b ;
	left: 30px ;
	position: absolute ;
	top: 42px ;
	width: 450px ;
}
.reaction-top .page-title .main-title {
	color: #000 ;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: normal ;
	font-size: 33px ;
	line-height: 1.2 ;
	padding-bottom: 0.45em;
}
.reaction-top .page-title .main-title small {
	font-size: 16px ;
	padding-left: 0.75em ;
}
.reaction-top .reaction-list {
}
.reaction-top .reaction-list li {
	position: relative ;
}
.reaction-top .reaction-list h2 {
	color: #3165b2 ;
	font-weight: normal ;
	font-size: 22px ;
	padding-bottom: 0.25em ;
}
.reaction-top .reaction-list li a {
	display: block ;
	box-sizing: border-box ;
	color: #313131 ;
	padding: 0.15em 2% ;
	position: relative ;
	width: 100% ;
}
.reaction-top .reaction-list li a.photo {
	padding: 0 ;
	width: 100% ;
}
.reaction-top .reaction-list li strong {
	display: block ;
	font-size: 106% ;
	padding: 0.2em 2% 0.25em ;
}
.reaction-top .reaction-list li > div {
	background: #ddeefa;
	width: 92% ;
	padding-bottom: 0.5em ;
}
.reaction-top .reaction-list li .thumbnail {
	display: block ;
	margin-bottom: 0.25em ;
	height: 120px ;
	overflow: hidden ;
	position: relative ;
}
.reaction-top .reaction-list li .icon-new {
	font-size: 14px;
	left: 1%;
	top: -3%;
	z-index: 3;
}
.reaction-top .reaction-list a:hover {
	text-decoration: none ;
	color: #008efc ;
}
.reaction-top .reaction-list .copy {
	display: block ;
}

/* 詳細
------------------------ */
.reaction-detail #contents {
	padding-bottom: 0 ;
}
.reaction-detail .bread {
	padding: 0 0 0.25em ;
	
}
.reaction-detail .page-title {
	background: #6ac0d9 ;
	line-height: 1.2 ;
	margin: 0 0 2em ;
}
.reaction-detail .page-title .copy-clm {
	margin: 0 auto ;
	max-width: 960px ;
	padding: 1em 0 ;
}
.reaction-detail .page-title .cat-title {
	color:#f4f6f3 ;
	padding-bottom: 0.75em ;
}
.reaction-detail .page-title .main-title {
	color: #124f62 ;
}
.reaction-detail .bodycopy-clm {
	padding-bottom: 3em ;
}
.reaction-detail .bodycopy-clm p {
	padding-bottom: 1.5em ;
}
.reaction-detail .bodycopy-clm h2 {
	color: #3165b2 ;
	font-weight: normal ;
	padding-bottom: 1em ;
}
.reaction-detail .bodycopy-clm .clm {
	padding-bottom: 3em ;
}
.reaction-detail .bodycopy-clm .clm.bg {
	background: #fcfcfc ;
	border: 1px solid #f3f3f3;
	padding: 1em;
	margin-bottom: 3em ;
}
.reaction-detail .bodycopy-clm .clm.bg h2 {
	padding-bottom: 0.5em ;
}
.reaction-detail .bodycopy-clm .copy-clm {
	float: left ;
	width: 63% ;
}
.reaction-detail .bodycopy-clm .photo {
	float: right ;
	margin: 0 ;
	max-width: 36% ;
	padding: 0 0 1em 1.5em;
}
.reaction-detail .bodycopy-clm .photo .caption,
.reaction-detail .bodycopy-clm .photo-clm {
	display: block ;
	font-size: 87.5%;
	line-height: 1.5 ;
}
.reaction-detail .bodycopy-clm .photo img {
	width: 100% ;
}
.reaction-detail .bodycopy-clm .photo .caption {
	background: #f2f2f2 ;
	padding: 0.25em 0.5em;
}
.reaction-detail .bodycopy-clm .photo-clm {
	padding: 0 ;
	text-align: center ;
}
.reaction-detail .bodycopy-clm .name {
	padding: 0 0 ;
	text-align: right ;
}
/* ページ下部ナビ */
.newall-clm h2 {
	padding-bottom: 1em ;
	font-weight: normal ;
}
.newall-clm h2 small {
	font-size: 13px ;
	padding-left: 0.5em ;
}

/* 魚に逢いたくて記事統合 詳細
------------------------ */
.sakana-detail .page-title {
	background: #6ac0d9 ;
}
.sakana-detail .page-title .cat-title {
	color:#f4f6f3 ;
	padding-bottom: 0.75em ;
}
.sakana-detail .bodycopy-clm p {
	padding-bottom: 2em ;
	line-height: 1.6;
}
.sakana-detail .photo-clm .caption {
	display: block ;
}
/* 魚に逢いたくて記事統合 */


/* 魚種ごとの調整 */
.akahata .bodycopy-clm .fishfinder-img,
.amadai2 .bodycopy-clm .fishfinder-img,
.aoriika3 .bodycopy-clm .fishfinder-img,
.hirame2 .bodycopy-clm .fishfinder-img,
.isaki3 .bodycopy-clm .fishfinder-img,
.kasago2 .bodycopy-clm .fishfinder-img,
.kawahagi2 .bodycopy-clm .fishfinder-img,
.kawahagi3 .bodycopy-clm .fishfinder-img,
.kouika2 .bodycopy-clm .fishfinder-img,
.maaji2 .bodycopy-clm .fishfinder-img,
.madai5 .bodycopy-clm .fishfinder-img,
.madai6 .bodycopy-clm .fishfinder-img,
.madai7 .bodycopy-clm .fishfinder-img,
.magochi2 .bodycopy-clm .fishfinder-img,
.mejina .bodycopy-clm .fishfinder-img,
.mebaru2 .bodycopy-clm .fishfinder-img,
.shirogisu2 .bodycopy-clm .fishfinder-img,
.shirogisu3 .bodycopy-clm .fishfinder-img {
	background: #FFF ;
	float: right ;
	width: 250px ;
	padding: 0 0 2em 2em ;
	line-height: 1.5 ;
}
.kawahagi8 .bodycopy-clm .clm .photo {
	text-align: center;
}
/* 写真を大きくしたら .fishfinder-img,  .photo-clm, .photo-clm li からページ名部分を削除すること */
.kawahagi5 .bodycopy-clm .fishfinder-img,
.kouika3 .bodycopy-clm .fishfinder-img,
.maaji5 .bodycopy-clm .fishfinder-img,
.surumeika2 .bodycopy-clm .fishfinder-img {
	max-width: 600px ;
}
.amadai2 .bodycopy-clm .photo-clm,
.kawahagi2 .bodycopy-clm .photo-clm,
.kouika2 .bodycopy-clm .photo-clm,
.hirame2 .bodycopy-clm .photo-clm,
.madai7 .bodycopy-clm .photo-clm {
	max-width: 655px ;
	margin: 0 auto;
	line-height: 1.5 ;
}
.amadai2 .bodycopy-clm .photo-clm li,
.kawahagi2 .bodycopy-clm .photo-clm li,
.kouika2 .bodycopy-clm .photo-clm li,
.hirame2 .bodycopy-clm .photo-clm li,
.madai7 .bodycopy-clm .photo-clm li { width: 49% ;
}
.surumeika2 .bodycopy-clm .photo-clm li {
	margin: 0 auto ;
	float: none ;
}

.amadai4 .photo-single,
.kouika3 .photo-single,
.mebaru5 .photo-single,
.surumeika2 .photo-single,
.houbou .photo-single,
.magochi5 .photo-single,
.kuromutsu2 .photo-single {
	font-size: 87.5% ;
	float: right ;
	line-height: 1.5 ;
	width: 45% ;
	padding: 0 0 2em 2em ;
}

.kouika3 .photo-single {
	width: 193px ;
}
.amadai4 .photo-single img,
.mebaru5 .photo-single img,
.surumeika2 .photo-single img,
.kuromutsu2 .photo-single img {
	border: 1px solid #e6e6e6 ;
}
.kuromutsu .bodycopy-clm .photo {
	float: right ;
	padding: 0 0 1em 1.5em ;
	width: 45% ;
}
.kuromutsu .photo-clm li {
	background: #f2f2f2 ;
	margin: 0 2% 0 0 ;
	padding: 0 ;
	width: 48% ;
}
.kuromutsu .photo-clm li .caption {
	padding: 0.25em ;
}



/* ページごとのカスタム */
.reaction-detail.aomono .bodycopy-clm .dot-list,
.reaction-detail.aori2 .bodycopy-clm .dot-list,
.reaction-detail.isaki2 .bodycopy-clm .num-list {
	margin: -1em 0 0.5em 0 ;
}
.aomono .bodycopy-clm .photo,
.aoriika .bodycopy-clm .photo,
.amadai .bodycopy-clm .photo2,
.tako .bodycopy-clm .photo1,
.maaji .bodycopy-clm .photo1 { max-width: 310px ;
}
.aoriika2 .bodycopy-clm .photo,
.hirame .bodycopy-clm .photo1,
.hukaba .bodycopy-clm .photo1,
.hukaba2 .bodycopy-clm .photo2,
.madai2 .bodycopy-clm .photo2,
.madai3 .bodycopy-clm .photo2,
.maruika2 .bodycopy-clm .photo2,
.mebaru .bodycopy-clm .photo1 { max-width: 320px ;
}
.amadai .bodycopy-clm .photo1 { max-width: 271px ;
}
.isaki2 .bodycopy-clm .photo { max-width: 346px ;
}
.kasago .bodycopy-clm .photo2 { max-width: 307px ;
}
.kouika .bodycopy-clm .photo2,
.shirogisu .bodycopy-clm .photo2,
.inada .bodycopy-clm .photo,
.hirame .bodycopy-clm .photo2,
.hukaba .bodycopy-clm .photo2,
.hukaba2 .bodycopy-clm .photo1,
.magochi .bodycopy-clm .photo2,
.madai2 .bodycopy-clm .photo1,
.madai3 .bodycopy-clm .photo1,
.maruika .bodycopy-clm .photo1,
.maruika2 .bodycopy-clm .photo1,
.mebaru .bodycopy-clm .photo2,
.yariika .bodycopy-clm .photo1 { max-width: 300px ;
}
.maruika .bodycopy-clm .photo2 { max-width: 286px ;
}

/* ページごとのカスタム */



/* スマホサイズ用 */
@media screen and (max-width: 960px) {
	.reaction-detail .page-title .cat-title,
	.reaction-detail .page-title .main-title,
	.writer-clm .writer-title h2 {
		width: 95% ;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 920px) {
	.reaction-top .page-title .copy-clm {
		top: 24px ;
		width: 430px;
	}
	.reaction-top .page-title .main-title {
		padding-bottom: 0.25em ;
	}
}
@media screen and (max-width: 870px) {
	.reaction-top { background: none ;
	}
	.reaction-top .new-bnr .copy-clm {
		padding: 0 1em 0 0;
		line-height: 1.4 ;
	}
	.reaction-top .new-bnr .title { margin-bottom: 0.25em ;
	}
}
@media screen and (max-width: 800px) {
	.reaction-top .page-title img {
		max-width: 110% ;
	}
	.reaction-top .page-title .main-title small {
		display: block ;
		padding: 0 ;
	}

	.reaction-top .page-title .copy-clm {
		left: 5% ;
		margin: -11.5em 0 0;
		padding-bottom: 2em ;
		position: relative ;
		top: 0 ;
		width: auto ;
		max-width: 53% ;
	}
	.reaction-top .sakana-list li { width: 33.3% ;
	}
	.reaction-top .sakana-list .thumbnail { height: auto ;
	}
	.reaction-top .sakana-list .thumbnail img { margin-top: 0 !important ;
	}
	.reaction-detail .bodycopy-clm .fishfinder-img { max-width: 100% ;
	}
}
@media screen and (max-width: 700px) {
	.reaction-top .page-title > img {
		width: 110% ;
		max-width: 110% ;
	}
	.newall-clm li { margin-bottom: 0.5em ;
	}
}

@media screen and (max-width: 680px) {
	.reaction-top .page-title .copy-clm {
		margin: -7.5em 0 0 ;
		max-width: none;
		width: 90% ;
	}
	.reaction-top .page-title .main-title {
		font-size: 27px;
		width: auto ;
	}
	.reaction-top .page-title .copy {
		position: relative;
		width: auto;
		margin-top: 5em;
	}
	.reaction-top .reaction-list {
		margin-top: 0;
	}
	.reaction-detail .bodycopy-clm .clm.bg h2 {
		font-size: 18px ;
	}
	.reaction-top .page-title .copy-clm .forPC {
		display: inline;
	}
	.reaction-top .reaction-list li img {
		padding-bottom: 0.25em ;
		width: 100% ;
	}
	.reaction-top .reaction-list li .thumbnail { height: 130px ;
	}
	.reaction-top .reaction-list li strong {
		background: none ;
		position: relative ;
	}
	.reaction-top .reaction-list {
		font-size: 100% ;
		width: auto ;
	}
	.reaction-detail .bodycopy-clm .photo {
		max-width: 50% ;
	}
	.reaction-top .reaction-list li a {
		width: auto ;
		box-sizing: border-box ;
	}
	.reaction-top .reaction-list li > div {
		width: 96% ;
	}
	.reaction-top .reaction-list li:nth-child(even) > div {
		float: right ;
	}
}
@media screen and (max-width: 580px) {
	.reaction-top .page-title .copy-clm {
		margin: -6.5em 0 0 ;
	}
	.reaction-top .page-title .main-title {
		font-size: 24px ;
		width: 100% ;
		line-height: 1.2 ;
	}
	.reaction-detail .page-title .cat-title { font-size: 14px ;
	}
	.reaction-detail .page-title .main-title { font-size: 21px ;
	}
	.reaction-detail .bodycopy-clm .photo-clm {
		float: none ;
		padding: 0 0 1em ;
	}
	.reaction-detail .bodycopy-clm .copy-clm,
	.reaction-detail .bodycopy-clm .photo {
		float: none ;
		width: 100% ;
		max-width: none ;
		padding: 0 0 1em;
	}
	.reaction-top .reaction-list li {
		font-size: 14px ;
	}
	.reaction-top .reaction-list li .thumbnail { height: 100px ;
	}
	.reaction-top .reaction-list li img { margin-top: 0 !important ;
	}
	.reaction-detail.inada .bodycopy-clm .photo img {
		width: 100% ;
	}
}
@media screen and (max-width: 520px) {
	.newall-clm .thumbnail {
		width: 30% ;
		float: right ;
	}
	.newall-clm a {
		background: #ddeefa ;
	}
	.newall-clm a .title {
		bottom: none ;
		background: none ;
		color: #008efc ;
		position: relative ;
		padding-left: 0.5em ;
	}
	.reaction-top .reaction-list {
		margin-top: 1em ;
	}
	.newall-clm .thumbnail {
		display: none ;
	}
	.newall-clm .name {
		width: auto ;
		min-height: auto;
	}

}
@media screen and (max-width: 450px) {
	.reaction-top .page-title .copy-clm {
		margin: -5.5em 0 0;
	}
}
@media screen and (max-width: 400px) {
	.reaction-top .page-title .copy-clm .forPC {
		display: none;
	}
	.reaction-top .page-title .main-title {
		font-size: 24px;
	}
	.reaction-top .page-title .copy-clm {
		margin: -4em 0 0;
		padding-bottom: 0 ;
		max-width: none ;
	}
	.reaction-top .page-title .copy {
		margin-top: 4em ;
		position: relative ;
		color: #313131 ;
		width: auto ;
	}
}
@media screen and (max-width: 350px) {
	.reaction-top .page-title .copy {
		margin-top: 3em ;
	}
	.reaction-top .reaction-list li .thumbnail { height: 80px ;
	}
}
@media screen and (max-width: 320px) {
	.reaction-top .reaction-list li .thumbnail { height: 100px ;
	}
	.reaction-top .reaction-list li > div {
		width: auto ;
	}
	.reaction-top .reaction-list li:nth-child(even) > div {
		float: none ;
	}
}

/* スマホサイズ用 */


