@charset "shift_jis";

.shopify
{ display: none!important; }

a,a:hover
{
	border: none;
	text-decoration: none !important;
}
.modelno{ list-style: none !important; }
.texr_sp02{ letter-spacing: 2px; }
.color_w
{ color: white !important; }

#global
{
	width: 100%;
	margin: 0px;
}

.sec_box
{
	max-width: 1060px;
	margin: auto;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

.underline_btm20
{
	padding: 0px 0px 20px 0px;
	border-bottom: 1px solid #ccc;
}

.img_line
{
	padding: 3px;
	border: 1px solid #ccc;
}

#product_img
{ text-align: center; }
	

.product_menu_fixed
{
	position: fixed;
	top: 0px; left: 0px;
}

#product_menu
{
	display: flex;
	z-index: 100;
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	font-weight: bold;
	background: #eeeeee;
	justify-content: center;
	border-bottom: 1px solid #CCC;
	overflow: hidden;
}

	#product_menu p
	{
		margin: 7px 5px;
		padding: 0px 20px;
		font-size: 13px;
		border-radius: 5px;
		letter-spacing: 1px;
		white-space: nowrap;
		color: #333;
	}
	
	#product_menu p:hover
	{
		opacity: 0.7;
	}
	
		#product_menu p a
		{
			text-decoration: none;
			color: #333;
		}


.img_intro
{
	width: 100%;
	margin: auto;
	padding-bottom: 50px;
	text-align: center;
	border-bottom: 1px solid #ddd;
}

.img_intro img
{ width: 100%; }

.shop_cart
{
	background: #bf0000;
	border-radius: 5px;
	color: white !important;
}

a.shop_cart_bg
{ 
	display: block;
	margin: 20px 0px;
	padding: 10px;
	color: #bf0000 !important; 
	text-align: center;
	border: 2px solid #bf0000;
	font-size: 18px;
	font-weight: bold;
	border-radius: 10px;
}

a.shop_cart_bg:hover
{
	background: #bf0000;
	color: white !important;
}

a.shop_cart_bigbg
{ 
	display: block;
	margin: 20px 0px;
	padding: 25px;
	color: #bf0000 !important; 
	text-align: center;
	border: 2px solid #bf0000;
	font-size: 18px;
	font-weight: bold;
	border-radius: 10px;
}

a.shop_cart_bigbg:hover
{
	background: #bf0000;
	color: white !important;
}


a.koukei_bigbg
{ 
	display: block;
	margin: 20px 0px;
	padding: 25px;
	color: #bf0000 !important; 
	text-align: center;
	border: 2px solid #bf0000;
	font-size: 18px;
	font-weight: bold;
	border-radius: 10px;
}

a.koukei_bigbg:hover
{
	background: #bf0000;
	color: white !important;
}


.shop_cart:hover
{ opacity: 0.7; }

.shop_cart_text
{ color: white !important; }

.out_btm
{ margin: 0px !important; }



#select_img ul li div
{
	width: 70px; height: 53px;
	margin: 25px 5px 5px 5px;
	padding: 5px;
	border-radius: 10px;
	border: 1px solid #999;
	background-size: 80% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.spacing30
{ padding: 30px 0px;}
.spacing40
{ padding: 40px 0px;}
.spacing100
{ padding: 100px 0px;}

.font_size13
{ font-size: 13px; }

.flex
{ display: flex; }
.flex_center
{ display: flex; justify-content: center; }
.flex_between
{ display: flex; justify-content: space-between; }
.flex_wrap
{ flex-wrap: wrap; }

.fas_r
{ margin-right: 3px; }

.text_red
{ color: red; }

.separation
{
	width: 100%;
	min-width: 700px;
	margin: 30px auto;
	text-align: center;
}





#function-logo
{
	width: 80%;
	margin: 10px auto;
	text-align: center;
	font-size: 13px;
	letter-spacing: 1px;
}

#function-logo ul li
{ padding: 0px 2px; }




/* 製品紹介(特徴・機能・接続例・スペック)共通 */
.cap_title
{
	text-align: center;
	min-height: 38px;
	font-size: 32px; letter-spacing: 2px;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	padding: 100px 35px 20px 35px;;
	color: #757575;
}

.spec_list
{
	padding-bottom: 50px;
	border-bottom: 1px solid #ddd;
}

.spec_list div.explain
{ margin: 20px 0px 30px 0px; }

.spec_list h2
{
	text-align: left;
	padding: 5px 0px;
	letter-spacing: 0.1em;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	color: #253746;
}

.spec_list h3
{
	padding: 5px 0px 2px 0px;
	font-size: 16px; font-weight: bold; letter-spacing: 0.1em;
	color: #111; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

.spec_list p
{
	padding: 2px 0px 10px 0px;
	font-size: 13px; letter-spacing: 0.1em;
	color: #333; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;	
}

.spec_list h4.naka
{
	color: #111;
	font-size: 15px; font-weight: bold; letter-spacing: 0.1em;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}


/* スペック表 */
.dimen-spec
{	width: 100% !important; letter-spacing: 1px; margin-top: 10px; }	
.dimen-spec-contents
{ width: 20% !important;	padding: 7px 5px; }
.dimen-spec-dimen
{ width: 80% !important; padding: 7px 5px; background-color: #f5f5f5; }


.info_text
{
	width: 50%;
	margin-right: 5%; 
}

.info_img
{
	width: 45%;
	margin: auto;
	text-align: center;
}

.info_text h1
{
	font-size: 26px;
}

.info_list li
{
	padding: 15px;
	border-bottom: 1px solid #e1e1e1;
}

.info_profile
{
		font-size: 13px;
		padding: 15px;
		border-bottom: 1px solid #e1e1e1;
}



.info_profile li
{
	width: 95%;
	margin-bottom: 3px;
	list-style: disc;
}


#s-price
{
	color: red;
}


#spmenu
{
	display: none;
}



.text_nowrap
{
	font-weight: normal;
	white-space: nowrap;
}

.head_taglist
{
	color: #757575;
	margin: 5px 0px;
	padding: 1px 10px;
	background: #eee;
	border-radius: 6px;
	overflow: hidden;
}


.head_taglist ul li
{
	font-size: 13px;
	padding: 0px 15px;
	border-right: 1px solid #999;
}

.head_taglist ul li:first-child
{
	background: none;
	font-weight: bold;
}


.splist_title
{
	text-align: left;
	margin: 5px 0px;
	font-size: 24px;
	color: #2A2A2A;
	letter-spacing: 0.1em;
	padding-top: 15px;
	line-height: 15px;
	font-weight: normal;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}



.youtube_box
{
	padding: 40px;
	aspect-ratio:16 / 9;
	background: #ECECEC;
}

.youtube_box p
{
	background: #029f94;
	color: white;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	padding: 15px 0px;
}


.box_gray
{
	background: #E4E4E4;
	padding: 20px;
	border-radius: 5px;
}

.box_dlicon
{
	background: #006597;
	border-radius: 5px;
	text-align: center;
	color: white;
	padding: 10px;
}

.box_dlicon
{
	padding: 20px 10px;
	color: white !important;
	font-size: 14px;
}

.box_dlicon i
{
	font-size: 55px;
	padding: 5px;
}


.box_dlicon p
{
	font-size: 14px;
	padding: 0px !important;
	font-weight: bold;
	color: white !important;
}

.link_hover:hover
{
	opacity: 0.7;
}



/* floatクリア */
.clearman
{ clear: both; }

*
{ margin: 0; padding: 0; }

img
{ -ms-interpolation-mode: bicubic; border: 0px; } 

dfn
{
	font-style: normal;
	font-weight: bold;
	border-bottom: 1px dashed #888;
}

abbr
{
	font-style: normal;
	font-weight: bold;
	border-bottom: 1px dashed #888;
}

h2
{ FONT-WEIGHT: bold; font-size: 24px; color: inherit; }
	



	#select_img
	{
		text-align: center;
	}

	#select_img li:hover
	{	opacity: 0.5; }
	
div.maincenter
{
	width: 80%;
	margin: auto;
}


.modelno
{
	 background: none !important;
	 padding-left: 0px;
}

.print-btn
{
	width: 180px;
	padding: 5px 10px;
	color: #666; font-weight: bold; text-align: center;
	cursor: pointer;
	background-color: #F2F2F2;
	background: -moz-linear-gradient(top, #fafafa 0%, #e2e2e2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#e2e2e2));
	border: 1px solid #E3E3E3;
	-webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px;
	box-shadow: 0px 0px 1px #ffffff inset;
}

mark.rbg
{	background: linear-gradient(transparent 60%, #f0f 60%); }

mark.ybg
{	background: linear-gradient(transparent 60%, #ffff66 60%); }

section#tablink
{	
	width: auto;
	margin: 30px 0px 15px 0px;
	text-align: center;
}
section#tablink h3#titles
{
	font-size: 13px;
	margin: 2px 0px;
	color: #757575;
	letter-spacing:  2px;
}


section#tablink nav
{
	overflow:  hidden;
	padding: 0px 5px;
	background: #eee;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

section#tablink ul
{	list-style: none; }

	section#tablink ul li
	{
		float: left;
		font-size: 13px;
		margin: 6px 2px; padding: 0px 6px;
		
	}
	
	
	
	
.explain-in
{
	display: flex;
}
	

	


/*スマホメニュー表示*/

#spmenu_box
{ width: 100%; }

#pagetitle
{
	width: 100%;
	height: 85px;
}

#spheader_box
{
	padding: 0px 10px;
	height: 85px;
	overflow: hidden;
}

#pagetitle
{
	width: 100%;
	display: block;
	background: url(/ccd/common/img/header/spheader_logo.webp) no-repeat left center;
}
	
.img_point
{
	position: fixed;
	z-index: 10000;
	top: 0%;
	left: 100%;
	margin: 20px 0px 0px -55px;
	padding: 5px;
	background: #0b6ec4;
	border-radius: 5px;
}

.img_point:hover
{
	opacity: 0.7;
	cursor: pointer;
}

.spmenu_box
{ width: 100%; }

.spmenu_box ul li
{
	color: white;
	text-align: center;
	font-size: 22px;
	margin: 0px 0px;
	padding: 15px 0px;
	border-bottom: 1px solid #CCC; 	
}

.spmenu_box ul li a
{
	display: block;
	width: 100%;
}


.spmenu_box ul li:first-child
{ margin-top: 50px; }

.img_point_text
{
	color: white !important;
	font-weight: bold;
}



/* アニメーション前のメニューの状態 */
.spmenu_box{
	display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s linear;
}
/* アニメーション後のメニューの状態 */
.spmenu_box.is-active{
	display: block;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	min-height: 100%;
	z-index: 100;
  pointer-events: auto;
  opacity: 1;
	background: #0b6ec4;
}

#spmenu_footer
{
	padding: 30px 0px;
	color: white;
	text-align: center;
	line-height:20px;
	font-size: 12px;
}

#spmenu_footer p
{
	margin-top: 10px;
	color: white !important;
}


#spmenu_footer a
{
	color: white !important;
	text-decoration: overline;
}


.split90
{
	width: calc(90% - 20px);
	padding: 10px;
}

.split80
{
	width: calc(80% - 20px);
	padding: 10px;
}

.split70
{
	width: calc(70% - 20px);
	padding: 10px;
}
.split60
{
	width: calc(60% - 20px);
	padding: 10px;
}
.split50
{
	width: calc(50% - 20px);
	padding: 10px;
}
.split40
{
	width: calc(40% - 20px);
	padding: 10px;
}
.split30
{
	width: calc(30% - 20px);
	padding: 10px;
}
.split20
{
	width: calc(20% - 20px);
	padding: 10px;
}
.split10
{
	width: calc(10% - 20px);
	padding: 10px;
}

	


/* 印刷時非表示項目 */
@media print{
	.print_hidden{ display: none !important; }
	.print-btn{ display: none; }
	.content li{ display: block; }
	.printarea{ font-size: 11px; }
}

@media screen and (max-width:600px){
	.info_list
	{ text-align: center;	}
	
	.sec_box
  {
		min-width: 300px !important;
		background: url(/ccd/common/img/header/spheader_shadow.webp) repeat-x top;
	}
	
	.img_intro
  { min-width: 300px !important; }
	
	.img_intro img
	{ min-width: 300px !important; }
	
	div.maincenter
	{ width: 100% !important; }
	
	.separation
	{ min-width: 300px !important; }
	
	.info_text
	{ width: 100% !important; }
	
	.info_img
	{ width: 100% !important; }
	
	#buy
	{ display: block !important }
	
	.display_sp
	{ display: block !important; }
	
	#product_menu
	{ min-width: 300px !important; }
	
	.display_pc_hidden
	{ display: none !important; }
	
	#global
	{ margin: 0px !important; }
	
	.youtube_box p
	{ font-size: 14px !important; }
	.side30{ width: 100% !important; }
	.side50{ width: 100% !important; }
	.side70{ width: 100% !important; }
}


@media screen and (min-width:599px){
	
	.display_sp
	{ display: none; }
}

@media screen and (max-width:700px){
  /*画面幅が700px以上の時*/
	.display_700_hidden
	{ display: none; }

}

@media screen and (max-width:800px){
  /*画面幅が800px以上の時*/
	.display_800_hidden
	{ display: none; }

}

/* スクロールアイコン */
#floatcart_ks
{ 
	position: fixed; top: 100%; left: 100%;
	margin: -100px 0px 0px -80px;
}



.buyend
{
	opacity: 0.3;
	pointer-events: none;
}


.tabselect
{
	display: flex;
	flex-wrap: wrap;
	gap: 0 10px;
	max-width: 500px;
}

.tabselect > label
{
	flex: 1 1;
	order: -1;
	opacity: .5;
	font-weight: bold;
	min-width: 70px;
	padding: .6em 1em;
	border-radius: 20px;
	background-color: #c40078;
	color: #fff;
	font-size: 1.1em;
	text-align: center;
	cursor: pointer;
}

.tabselect > label:hover
{
	opacity: .8;
}

.tabselect input
{
	display: none;
}

.tabselect > div
{
	display: none;
	width: 100%;
	padding: 1.5em 1em;
	background-color: #fff;
}

.tabselect label:has(:checked)
{
	opacity: 1;
}

.tabselect label:has(:checked) + div
{
	display: block;
}