@charset "utf-8";
/* CSS Document */
/* サポート、一眼、コンパクト、オーディオトップで使用するcss */

/* ★★サポートトップで使用★★ */
/* 製品の種類を選ぶ */
.main_cate, .main_cate_other {
	width: 98%
}
.main_cate li {
	float: left;
	list-style-type: none;
	display: block;
	position: relative;
	margin: 0 5px 10px 0;
	width: 32%;
	height: 110px;
	font-size: 16px;
	font-weight: bold;
	border: #999 solid 1px;
	border-radius: 3px;
	box-shadow: 2px 2px 1px 1px #CCC
}
.main_cate_other li {
	float: left;
	list-style-type: none;
	display: block;
	position: relative;
	margin: 0 5px 10px 0;
	padding: 3px 0;
	width: 48.5%;
	height: 40px;
	font-size: 14px;
	font-weight: bold;
	border: #999 solid 1px;
	border-radius: 2px;
	box-shadow: 2px 2px 1px 1px #CCC
}
.main_cate li a, .main_cate_bat li a, .main_cate_other li a {
	color: #000;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px
}
.main_cate a:hover, .main_cate_other a:hover, .index_cate li a:hover, .index_cate_bat li a:hover {
	text-decoration: none;
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity = 70)
}
/*サポートトップ*/
.sup_top {
	display: block;
	margin: 0 5px 10px 5px;
	padding: 22px 0 0 5px;
	width: auto;
	height: 70px;
	border: #999 solid 1px;
	border-radius: 3px;
	box-shadow: 2px 2px 1px 1px #CCC;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 98% bottom;
	font-size: 26px
}
/*一眼ボタン*/
.di {
	background-image: url(../img/sum_em1mk2.png);
	background-repeat: no-repeat;
	background-position: 98% bottom
}
.di a:hover {
	background-image: url(../img/sum_em1mk2_70per.png);
	background-repeat: no-repeat;
	background-position: 98% bottom
}
/*コンパクトボタン*/
.cdi {
	background-image: url(../img/sum_tg5.png);
	background-repeat: no-repeat;
	background-position: 98% bottom
}
.cdi a:hover {
	background-image: url(../img/sum_tg5_70per.png);
	background-repeat: no-repeat;
	background-position: 98% bottom
}
/*オーディオボタン*/
.audio {
	background-image: url(../img/sum_lsp4.png);
	background-repeat: no-repeat;
	background-position: 95% bottom
}
.audio a:hover {
	background-image: url(../img/sum_lsp4_70per.png);
	background-repeat: no-repeat;
	background-position: 95% bottom
}
/*その他ボタン*/
.other {
	text-align: right;
	margin: 0
}
.other li {
	display: inline;
	list-style-image: url(../img/arrow.gif);
	padding: 5px
}
.genre {
	padding: 5px 5px 0 5px
}
.genre2 {
	padding: 13px 5px 0 5px
}
/* 重要なお知らせ、サポートのお知らせ */
.scroll-wrap {
	border: 0;
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	height: 100px;
	padding: 5px;
	display: block;
	overflow: auto
}
.scroll-wrap::-webkit-scrollbar {
 height: 10px;
}
.scroll-wrap::-webkit-scrollbar-thumb {
 border-radius: 5px;
}
/* スマホ時のお知らせボタン */
.imp_info_btn, .info_btn {
	display: none
}
/*2020Indexここから*/
.content_index {
	margin-left: auto;
	margin-right: auto;
}
.main_index {
	width: 100%
}
.genre_index {
	position: relative;
	height: 200px;
	width: 100%;
}
.main_cate_index {
	width: 95%;
	margin: 0 0 0 -10px
}
.main_cate_index:after {
	content: "";
	display: block;
	clear: both
}
.main_cate_index li {
	float: left;
	list-style-type: none;
	display: block;
	position: relative;
	margin: 0 5px 5px 0;
	width: 48.5%;
	height: 220px;
	background-color: #EEE;
	font-size: 16px;
	font-weight: bold
}
.main_cate_index li a {
	color: #000;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px
}
.main_cate_index a:hover {
	text-decoration: none;
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity = 70)
}
.gi_title {
	position: absolute;
	top: 55%;
	left: 50%;
	-webkit-transform : translate(-50%, -50%);
	transform : translate(-50%, -50%);
	width: 155px;
	text-align: center
}
.gi_title_oocp {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%, -50%);
	transform : translate(-50%, -50%);
	width: 240px;
	text-align: center
}
/*2020Indexここまで*/
/* ★★ここまでサポートトップで使用★★ */

/* ★★メインコンテンツ内で使用★★ */
/*コンテンツ内のリスト*/
.content ul, .sp_banner ul {
	margin-left: -25px;
}
.sp_banner li {
	list-style-type: none
}
/*各種対応表のボタン*/
.cate {
	float: left;
	list-style-type: none;
	padding: 0
}
/*一眼トップ*/
.di_top {
	display: block;
	margin: 0 0 10px 0;
	width: 97%;
	height: 100%;
	padding: 10px 0 10px 10px;
	border: #999 solid 1px;
	border-radius: 3px;
	box-shadow: 2px 2px 1px 1px #CCC;
	background-image: url(../dslr/img/top_dslr.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 98% bottom;
	font-size: 26px
}
/*コンパクトトップ*/
.com_top {
	display: block;
	margin: 0 0 10px 0;
	width: 97%;
	height: 100%;
	padding: 15px 0 15px 10px;
	border: #999 solid 1px;
	border-radius: 3px;
	box-shadow: 2px 2px 1px 1px #CCC;
	background-image: url(../compact/img/top_compact.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 98% bottom;
	font-size: 26px
}
/*オーディオトップ*/
.audio_top {
	display: block;
	margin: 0 0 10px 0;
	width: 97%;
	height: 100%;
	padding: 10px 0 10px 10px;
	border: #999 solid 1px;
	border-radius: 3px;
	box-shadow: 2px 2px 1px 1px #CCC;
	background-image: url(../audio/image/top_audio.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 98% bottom;
	font-size: 26px
}
.series_di {
	padding: 0;
	margin: 0;
	font-size: 14px;
	width: 70%;
	line-height: 1em;
}
.series_audio {
	padding: 0;
	margin: 0;
	font-size: 14px;
	width: 85%;
	line-height: 1em;
}
/*一眼、コンパクト、オーディオトップのボタン*/
.index_cate, .index_cate_bat {
	text-align: center;
	margin-bottom: 30px
}
.index_cate li {
	float: left;
	list-style-type: none;
	padding: 0;
	width: 18%;
	height: 120px;
	margin: 0 4px;
	padding-top: 5px;
	background: linear-gradient(#F0F0F0, #DDD);
	border: #999 solid 1px
}
/*「電池を安全に・・」用*/
.index_cate_bat li {
	float: left;
	list-style-type: none;
	width: 18%;
	height: 135px;
	margin: 0 4px;
	padding-top: 5px;
	background: linear-gradient(#F0F0F0, #DDD);
	border: #999 solid 1px
}
.index_cate li img, .index_cate_bat li img {
	margin: 0;
	padding: 0
}
.index_cate li .txt, .index_cate_bat li .txt {
	color: #333;
	font-weight: bold;
	font-size: 14px;
	height: auto;
	line-height: 100%
}
.index_cate li a, .index_cate_bat li a {
	display: block;
	height: 100%;
	width: 100%
}
/*ボタンここまで*/

.c {
	clear: both;
	margin-bottom: 10px
}
/*対応表の見出し*/
h3 {
	color: #FFF;
	font-weight: bold;
	background-color: #69C;
	border: #666;
	margin-bottom: 0;
	padding: 0 5px
}
/*▼新サポートトップ 右カラム無し*/
.TopMenu {
	width: 80%;
	margin: 20px 0 30px 0;
	margin-left: auto;
	margin-right: auto
}
.product, .repair, .inquiry, .oocpmp {
	width: 100%;
	background-color: #DEF;
	text-align: center;
	padding: 1% 0;
	margin: 0
}
.product a, .repair a, .inquiry a, .oocpmp a {
	text-decoration: none;
	color: #000
}
.product a:hover, .repair a:hover, .inquiry a:hover, .oocpmp a:hover {
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity = 70)
}
.product p, .repair p, .inquiry p, .oocpmp p {
	font-weight: bold;
	margin: 0;
	padding: 0
}
.product p a:hover, .repair p a:hover, .inquiry p a:hover, .oocpmp p a:hover {
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity = 70)
}
/*▲新サポートトップ 右カラム無し ここまで*/

/*写真をもっと上手に、もっと楽しく*/
.content2 ul {
	margin: 0
}
.com, .com2, .com3 {
	float: left;
	width: 33.33%;
	list-style-type: none
}
.com img, .com img {
	margin: 0
}
.com p, .com2 p, .com3 p {
	margin: 0 0 0 -10px;
	padding: 5px
}
/*お知らせ*/
.infoarea1, .infoarea2 {
	height: auto
}
dl {
	margin: 0 0 15px 25px
}
dt {
	float: left;
	margin-right: 10px
}
dt, dd {
	margin-bottom: 10px
}
.sup_info, .moreinfo {
	font-size: 16px
}
.moreinfo {
	text-align: right;
	margin: 5px 10px 10px 0
}

/*↓↓↓レスポンシブ対応↓↓↓*/
/*★★★★★横幅が最小で930px時★★★★★*/
@media (min-width:930px) {
/* ★★サポートトップで使用★★ */
.infoarea1, .infoarea2 {
	display: block !important
}
/* ★★ここまでサポートトップで使用★★ */

/* ★★メインコンテンツ内で使用★★ */
/*対応表の見出し*/
h3 {
	font-size: 34px;
}
.com p, .com2 p, .com3 p {
	font-size: 14px;
	width: 90%
}
/*サポートトップのメニュー*/
.TopMenu {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px
}
/*コンテンツ内の右バナーは非表示*/
/*各種対応表のボタン*/
.cate {
	margin: 0 20px 0 -10px;
}
.sp_banner {
	display: none !important
}
#sp_h{
	height:360px;
	}
}

/*★★★★★横幅が最小で768px時★★★★★*/
@media (min-width:768px) {
/* ★★サポートトップで使用★★ */
.infoarea1, .infoarea2 {
	display: block !important
}
.sup_info, .moreinfo {
	font-size: 16px
}
/* ★★ここまでサポートトップで使用★★ */

/* ★★メインコンテンツ内で使用★★ */
/*対応表の見出し*/
h3 {
	font-size: 24px
}
/*▼新サポートトップ 右カラム無し*/
.TopMenu {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	padding: 10px
}
.product {
	width: 49%;
	color: #000;
	font-size: 14px;
	text-align: center;
	float: left
}
.repair {
	width: 49%;
	color: #000;
	font-size: 14px;
	text-align: center;
	float: right
}
.inquiry {
	width: 49%;
	color: #000;
	font-size: 14px;
	text-align: center;
	float: left
}
.oocpmp {
	width: 49%;
	color: #000;
	font-size: 14px;
	text-align: center;
	float: right
}
/*▲新サポートトップ 右カラム無し ここまで*/

/*各種対応表のボタン*/
.cate {
	margin: 0 15px 0 -5px;
}
.com p, .com2 p, .com3 p {
	font-size: 14px;
	width: 90%
}
/*右のバナーは非表示*/
.sp_banner {
	display: none !important
}
#sp_h{
	height:360px;
	}
}

/*★★★★★横幅が600px～767px時★★★★★*/
@media (min-width:600px) and (max-width:767px) {
/* ★★サポートトップで使用★★ */
.main_cate li {
	font-size: 16px
}
.infoarea1, .infoarea2 {
	display: block !important
}
/*★★★重要おしらせ幅★★★★*/
#sp_h{
	height:360px;
	}
	
.di, .cdi {
	background-position: 100% bottom
}
.sup_info, .moreinfo {
	font-size: 16px
}
/* ★★ここまでサポートトップで使用★★ */

/* ★★メインコンテンツ内で使用★★ */
/*対応表の見出し*/
h3 {
	font-size: 20px
}
/*▼新サポートトップ 右カラム無し*/
.TopMenu {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	padding: 10px
}
.product {
	width: 49%;
	color: #000;
	;
	font-size: 14px;
	text-align: center;
	margin-bottom: 10px;
	float: left
}
.repair {
	width: 49%;
	color: #000;
	font-size: 14px;
	text-align: center;
	margin-bottom: 10px;
	float: right
}
.inquiry {
	width: 49%;
	color: #000;
	font-size: 14px;
	text-align: center;
	margin-bottom: 10px;
	float: left
}
.oocpmp {
	width: 49%;
	color: #000;
	font-size: 14px;
	text-align: center;
	margin-bottom: 10px;
	float: right
}
/*▲新サポートトップ 右カラム無し ここまで*/

/*各種対応表のボタン*/
.cate {
	margin: 0 20px 0 -5px;
}
.com p, .com2 p, .com3 p {
	font-size: 14px;
	width: 90%
}
/*右のバナーは非表示*/
.pc {
	display: none !important
}
}

/*★★★★★横幅が最大で599px時★★★★★*/
@media (max-width:599px) {
/* ★★サポートトップで使用★★ */
/*▼新サポートトップ 右カラム無し*/
.TopMenu {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	padding: 10px
}
.product {
	width: 100%;
	font-size: 14px;
	margin-bottom: 2px;
	text-align: left;
	margin-bottom: 10px
}
.repair {
	width: 100%;
	font-size: 14px;
	margin-bottom: 10px;
	text-align: left;
	clear: both;
	margin-bottom: 10px
}
.inquiry {
	width: 100%;
	font-size: 14px;
	margin-bottom: 10px;
	text-align: left;
	margin-bottom: 10px
}
.oocpmp {
	width: 100%;
	font-size: 14px;
	margin-bottom: 10px;
	text-align: left;
	clear: both;
	margin-bottom: 10px
}
.product img, .repair img, .inquiry img, .oocpmp img {
	width: 25%;
	margin-left: 15px;
	float: left
}
.product p, .repair p, .inquiry p, .oocpmp p {
	float: right;
	position: relative;
	width: 65%;
	margin-left: 10px;
	font-size: 14px
}
.main_cate ul {
	width: 100%;
	padding-left: -10px;
}
.main_cate li {
	width: 95%;
	margin-bottom: 5px;
	height: 86px;
	font-size: 18px
}
.main_cate_other li {
	width: 95%;
	margin-bottom: 5px
}

/*★★★重要おしらせ幅★★★★*/
#sp_h{
	height:360px;
	}
	
/*▲新サポートトップ 右カラム無し ここまで*/

/*2020Indexここから*/
.main_cate_index {
	width: 95%;
	margin: 0 auto 0 auto
}
.main_cate_index li {
	width: 100%;
	height: 86px;
	margin-bottom: 5px;
	margin-left: -28px
}
.main_cate_index li a {
	color: #000;
	display: block;
	position: absolute;
	width: 100%;
	height: 86px;
	left: 0px;
	top: 0px
}
.main_cate_index img {
	width: 62.5px;
	height: 65px;
	position: absolute;
	top: 50%;
	left: 2%;
	-webkit-transform : translate(-50%, -50%);
	transform : translate(-50%, -50%)
}
.main_cate_index br {
	display: none
}
.genre_index {
	width: 100%;
	height: 86px;
	position: relative
}
.gi_title {
	width: 280px;
	text-align: left;
	padding-left: 50px
}
.gi_title_oocp {
	left: 52%;
	width: 310px;
	text-align: left;
	padding-left: 50px
}
/*2020Indexここまで*/
.audio {
	background-position: 90% bottom
}
.audio a:hover {
	background-image: url(../img/sum_lsp4_70per.png);
	background-repeat: no-repeat;
	background-position: 90% bottom
}
.genre {
	padding: 35px 0 0 15px
}
.genre2 {
	padding: 14px 0 0 15px
}
iframe {
	padding: 10px
}
.other, .info, .infoarea1, .infoarea2 {
	display: none
}
.sup_info, .moreinfo {
	font-size: 14px
}
.moreinfo {
	margin: 0 5px 5px 0
}
.other {
	text-align: left
}
.other li {
	display: block
}
/*お知らせボタンを表示*/
.imp_info_btn, .info_btn {
	display: table;
	position: relative;
	font-weight: bold;
	padding: 10px;
	border: solid 1px #aaaaaa;
	border-radius: 5px;
	background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	cursor: pointer
}
.imp_info_btn, .info_btn {
	width: 75%;  
	margin-bottom: 15px
}
.imp_info_btn:hover, .info_btn:hover {
	color: #999;
	background-color: #eee
}
.imp_info_btn:focus, .info_btn:focus {
	outline: none
}
/*お知らせボタンを表示ここまで*/
/* ★★ここまでサポートトップで使用★★ */

/* ★★メインコンテンツ内で使用★★ */
/*対応表の見出し*/
h3 {
	font-size: 18px;
	margin-top: 0
}
.cate {
	margin: 0
}
/*お知らせ*/
dl {
	margin-bottom: 10px
}
dt {
	float: none;
	margin-bottom: 0
}
dd {
	margin-bottom: 10px
}
/*インデックス、各種トップページ*/
.sup_top {
	height: 60px;
	font-size: 20px;
	padding: 20px 0 0 5px
}
.di_top, .com_top, .audio_top {
	height: 60px;
	font-size: 20px;
	padding: 5px 0 0 5px;
	background-image: none
}
/*一眼、コンパクト、オーディオトップのバナー*/
.series_di, .series_audio {
	width: 100%;
	font-size: 14px;
	padding-right: 5px
}

/*一眼、コンパクト、オーディオトップのボタン*/
/index_cate, .index_cate_bat {
 margin-left: -5px
}
.index_cate li, .index_cate_bat li {
	width: 48%;
	height: auto;
	margin: 0 8px 5px -5px;
	padding: 0
}
.index_cate li img, .index_cate_bat li img {
	display: none
}
.br {
	display: block
}
.txt {
	font-size: 14px;
	padding: 10px 0
}
/*ボタンここまで*/

/*写真をもっと上手に*/
.com {
	width: 100%;
	float: none;
	margin-bottom: 15px;
	padding-right: 5px;
	padding-bottom: 10px;
	border-bottom: #999 dotted 1px
}
.com2 {
	width: 100%;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: #999 dotted 1px
}
.com3 {
	width: 100%;
	margin-bottom: 15px
}
}
/*★★★★★横幅が最大で420px時★★★★★*/
@media (max-width:420px) {
.genre {
	padding: 5px 0 0 5px
}
.genre2 {
	padding: 13px 0 0 5px
}
/*▼新サポートトップ 右カラム無し*/
.product img, .repair img, .inquiry img, .oocpmp img {
	width: 25%;
	margin-left: 10px;
	float: left
}
.product p, .repair p, .inquiry p, .oocpmp p {
	float: right;
	position: relative;
	width: 65%;
	height: 100%;
	font-size: 14px;
	margin-bottom: 20px
}
.main_cate {
	width: 100%
}
.main_cate li, .main_cate_other li {
	width: 94%
}
/*▲新サポートトップ 右カラム無し ここまで*/
/*2020Indexここから*/
.main_cate_index {
	width: 95%
}
.main_cate_index li {
	width: 100%;
	height: 60px;
	margin-bottom: 5px
}
.main_cate_index li a {
	width: 100%;
	height: 60px
}
.main_cate_index img {
	display: none
}
.genre_index {
	width: 100%;
	height: 60px
}
.gi_title {
	text-align: center;
	margin-left:-20px
}
.gi_title_oocp {
	text-align: center;
	margin-left:-20px;
	width:100%
}
/*2020Indexここまで*/
}
 @media (max-width:319px) {
/*DSLR、オーディオトップのシリーズ名は横幅319px以下非表示*/
.di_top, .com_top, .audio_top {
	height: 100%
}
.series_di, .series_audio {
	display: none
}
/*▼新サポートトップ 右カラム無し*/
.product img, .repair img, .inquiry img, .oocpmp img {
	width: 20%;
	float: left
}
.product p, .repair p, .inquiry p, .oocpmp p {
	float: right;
	position: relative;
	width: 65%;
	height: 100%;
	font-size: 14px
}
/*▲新サポートトップ 右カラム無し ここまで*/
/*2020Indexここから*/
.content_index {
	width: 98%;
}
.main_cate_index {
	margin-left: auto;
	margin-right: auto
}
.main_cate_index li {
	width: 100%;
	height: 60px;
	margin-bottom: 5px;
	margin-left: -35px
}
.main_cate_index li a {
	width: 100%;
	height: 60px
}
.main_cate_index img {
	display: none
}
.genre_index {
	width: 95%;
	height: 60px;
	position: relative
}
.gi_title {
	top: 50%;
	padding-left: 40px;
	font-size: 14px;
	text-align: center
}
.gi_title_oocp {
	top: 50%;
	padding-left: 40px;
	font-size: 14px;
	text-align: center
}
/*2020Indexここまで*/
}