/*初期化*/
@import url('https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Petit+Formal+Script&display=swap');
html {  
scrollbar-color: #ffffff #000000;
scrollbar-width: auto;
overflow-x: hidden;
background: url(null);
background-color:black;
margin: 0px;
} 

/*Google ChromeやSafariといった所謂「webkit」を採用しているブラウザ用*/
::-webkit-scrollbar {
  width: 15px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: black;
}
::-webkit-scrollbar-thumb {
  background: white;
}
*, *:before, *:after {/*border-boxを全ての要素に適用*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
p{margin: 0;}
h1,h2,h3{margin:0px;overflow: hidden;font-size: 1em;}
ol{margin: 0;padding: 0;list-style: none;}
ul{margin: 0;padding: 0;list-style: none;}
a{
text-decoration: none;
color: white;
outline:none;/*リンクをクリックした後に表示される点線の枠を消す*/
}
img{vertical-align: middle;}
#SiteName{font-family: 'Annie Use Your Telescope', cursive;}
.English{font-family: "Petit Formal Script", cursive;}
body {-webkit-text-size-adjust: 100%;/*Androidでフォントサイズが揃わないための対処*/
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
width: 100%;
margin: auto;
padding: 0;
overflow: hidden;
color: white;
}


#SiteName,#homeMain h3{
margin-bottom: 15px;
line-height: 70px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #008cd2), color-stop(1.00, #130505));
background: -webkit-linear-gradient(#008cd2, #130505);
background: -moz-linear-gradient(#008cd2, #130505);
background: -o-linear-gradient(#008cd2, #130505);
background: -ms-linear-gradient(#008cd2, #130505);
background: linear-gradient(#008cd2, #130505);
-pie-background: linear-gradient(top,#008cd2, #130505);
behavior: url(/PIE.htc);
position: relative;
}
#SiteName a,#SiteName h1{
font-size: 2.5em;
font-weight: bold;
border: 2px solid black;
height: 70px;
padding-left: 40px;
display: block;
}

#top{width: auto;
text-align: center;
}
#top h1{
border-top: solid 1px white;
border-bottom: solid 1px white;
padding:0.5em 1em;
font-weight: normal;
font-size: 1em;
text-align:center;
}

/*======パンくずリスト======*/
#topicPath{
font-size: 0.8em;
margin: 0.5em 0;
display:flex;
}
#topicPath li{
padding-left: 10px;
}
#topicPath a{
border: 2px solid black;
margin-right: 10px;
}
/*リンクの矢印(＞)表示*/
#topicPath li:not(:last-child)::after{
content: "＞";


}


/*======商品リスト======*/

#BoxItemList{
display:flex;
flex-flow: row wrap;
}
.BoxItem,.BoxItemW18{
border: solid 2px white;
margin:1%;
width: 23%;
}
.BoxItem{
position: relative;
width: 23%;
}
.BoxItemW18{
width: 18%;
}
.IMG{
position: relative;
}

.BoxItem img,.BoxItemW18 img{
width: 100%;
margin:0 !important;/*楽天画像リンクスタイル打消し*/
}
.BoxItem a,.IMG a{
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
}
.BoxItem .Name{
display: flex;/*上下の中央寄せ*/
align-items: center;/*上下の中央寄せ*/
height: 150px;
padding: 10px;
}
.BoxItemW18 .Name p{
height: 150px;
padding: 5px;
overflow: hidden;
}

.BoxItemW18 a:hover{
background: rgb(255,255,255,0.5);
}
.price{
text-align:
right;padding: 5px;
}
.rakuten a,.amazon a,.aliexpress a{border: solid white;
border-width: 2px 0px 0px 0px;
text-decoration: none;
font-size: 0.9em;
display: block;
padding: 10px 0;
width: 100%;
text-align: center;
}
.aliexpress a{color: #e52e20;}
.aliexpress a span{color: #f79817;}
.amazon a{font-family: Arial;color: #f5e4c7;}
.rakuten a span{color: #be0000;font-weight: bold;}
/*======その他の処理======*/

p.textCenter{
text-align:center;
margin: 0px 10px 0px 10px;
}
.ManualLink{
border: 2px dashed white;

}
#copyright{
text-align:center;
}
#contact{
width: 150px;
border-top: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
position: fixed;
top: 0px;
right: 0px;
height: 70px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #008cd2), color-stop(1.00, #130505));
background: -webkit-linear-gradient(#008cd2, #130505);
background: -moz-linear-gradient(#008cd2, #130505);
background: -o-linear-gradient(#008cd2, #130505);
background: -ms-linear-gradient(#008cd2, #130505);
background: linear-gradient(#008cd2, #130505);
-pie-background: linear-gradient(top,#008cd2, #130505);
behavior: url(/PIE.htc);
}
#contact a{
width: 100%;
height: 100%;
line-height: 20px;
padding-top: 13px;
display: block;
text-align: center;

}
/*======商品ページ======*/
h2{text-align: center;
}
#main_ItemContainer{
text-align: center;
letter-spacing:-1em;/*inline-block時の改行の隙間を消す処理*/
}
#main_ItemContainer *{
letter-spacing:normal;/*inline-block時の改行の隙間を消す処理*/
}
.ItemContainer{
display: inline-block;
}
.width100{
width:100%;
}
.ItemContainer h2{
padding: 0.5em 1em;
margin: 1em 0;
display: inline-block;
vertical-align:bottom;/*inline-block時の下の隙間を消す処理*/
border: 1px solid orange;
}


.Product_Description{
text-align: justify;/*両端揃えを指定*/
line-height: 1.6;
padding: 0 5%;
}
.LED_Mark_Red{
display: inline-block;
line-height: 1;
background: red;
color: red;
}
.LED_Mark_Orange{
display: inline-block;
line-height: 1;
background: orange;
color: orange;
}
.R{color: red;}
.O{color: orange;}
.Y{color: yellow;}
.G{color: green;}
.B{color: blue;}
.S{color: skyblue;}
.W{color: LightYellow;}/*ウォームホワイト*/
.A{color: #ffc107;}/*アンバー*/
.lightgreen{color: #B2FFB2;}
.underline{text-decoration:underline;}





table.LENS{
border-color: white;
border-collapse: collapse;
text-align: center;
width: 90%;
}
table.LENS td,th{
border: 1px solid white;
}


.SlidePictures{
font-size: 0; 	/*改行による隙間を消す*/
text-align: center;
}

/*↓↓↓↓↓ページトップへボタン↓↓↓↓↓*/
#pagetop{
    position: fixed;
    right: 1%;
    bottom: 10%;
    z-index: 9999;
    opacity: 0;
    -ms-filter: "alpha( opacity=0 )";
    filter:alpha(opacity:0);
    zoom:1;
}
#pagetop a{
    display: block;
    padding: 20px;
}
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	        box-sizing: border-box;
}
.cp_arrows {	width: 100px;
	height: 100px;

	display: flex;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrowcontainer {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100px;
	height: 100px;
	        transform: translate(-50%, -50%) rotateZ(0deg);
}
.cp_arrows .cp_arrowcontainer:hover {
	cursor: pointer;
}
.cp_arrows .cp_arrow {
	position: absolute;
	left: 50%;
	        transition: all 0.3s ease-in-out;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	display: block;
	width: 4px;
	height: 50px;
	content: '';
	        transition: all 0.3s ease-in-out;
	        transform: translate(-50%, -50%) rotateZ(-65deg);
	transform-origin: bottom right;
	border-radius: 10px;
	background: red;
}
.cp_arrows .cp_arrow:after {
	        transform: translate(-50%, -50%) rotateZ(65deg);
	        transform-origin: bottom left;
}
.cp_arrows .cp_arrow:nth-child(1) {
	top: 30%;
	opacity: 0.3;
}
.cp_arrows .cp_arrow:nth-child(2) {
	top: 50%;
	opacity: 0.6;
}
.cp_arrows .cp_arrow:nth-child(3) {
	top: 70%;
	opacity: 1;
}
/*↑↑↑↑↑ページトップへボタン↑↑↑↑↑*/


/*======フォトギャラリー======*/
#PhotoGalleryMain{
font-size: 0em; 	/*改行による隙間を消す*/
text-align: center;
}
#PhotoGalleryMain *{
font-size: 14px;
}
#PhotoGalleryMain a{
position: relative;
display: inline-block;
margin: 0 5px 10px 5px;
}
#PhotoGalleryMain a img{
border-radius: 5px;
height: 450px;
}
#PhotoGalleryMain a span:nth-child(2){text-shadow: 1px 1px 2px black;
position: absolute;
left: 20px;
bottom: 10px;
}

#PhotoGalleryMain a span.ajax-iine{text-shadow: 1px 1px 2px black;
font-size:0px;
position: absolute;
right: 20px;
bottom: 10px;
}





#PhotoGalleryDescription{
text-align: justify;/*両端揃えを指定*/
border-top: 1px solid white;
border-bottom: 1px solid white;
line-height: 1.6;
padding: 1em;
}

/*======ご利用案内======*/
#infoMain h2{
padding: 5px 10px;
border-right: solid 30px white;
border-left: solid 30px white;
border-top: solid 1px white;
border-bottom: solid 1px white;
text-align: left;
}
#infoMain p{
text-align: justify;/*両端揃えを指定*/
padding: 10px 0px 0px 0px;
}
#infoMain p img{
height: 20px;
}
#infoNavi{
margin: 20px 0px;
padding: 0px;
font-size:0;/*display:inline-blockの隙間問題はテキストの改行が原因で起こるので、
inline-blockを使った要素の親要素にfont-size:0;を指定*/
width: 100%;
}
#infoNavi li{
border-style: solid;
border-width: 1px;
border-color: black gray;
display: inline-block;
width: 33%;
text-align: center;
font-size:16px;/*フォントサイズ0になっているので指定する(1em=16px)*/
}
#infoNavi a{
text-align: center;
display: block;
}


/*======トップページ======*/
#homeMain{
display:flex;
flex-flow: row wrap;
}
#leftBox{
margin: 1%;
width: 68%;
border-color: white;
border-style:solid;
border-width: 1px 1px 1px 1px;
padding-bottom: 5px;
}
.message{margin: 0 0;text-align: justify;
padding: 10px 10px 5px 10px;
border-color: white;
border-style:solid;
border-width: 0 0 0 0;
}
#Catalog_list{
margin: 1%;
width: 28%;
text-align: center;
}
#Catalog_list ul{
border-color: white;
border-style:solid;
border-width: 0 0 1px 0;
height: 100%;
}
#Catalog_list li{
height: 25%;
display: block; 
border-color: white;
border-style:solid;
border-width: 1px 1px 0 1px;
margin: 0 0;
}
#Catalog_list ul a{
height: 100%;
line-height: 3em;
display: block;
font-weight: bold;
display: flex;/*上下の中央寄せ*/
align-items: center;/*上下の中央寄せ*/
justify-content: center;/*左右の中央寄せ*/
}
#homeMain h3{width: 100%;text-align: center;border: 2px solid black;}
/*======在庫リスト======*/
#StockItems{
width: 100%;
display:flex;
flex-flow: row wrap;
}
.StockItem{
position: relative;
border: solid 2px white;
margin:1%;
width: 23%;
}
.StockItem img{
width: 100%;
}
.StockItem a{
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
}
.StockItem .Name{
display: flex;/*上下の中央寄せ*/
align-items: center;/*上下の中央寄せ*/
height: 150px;
padding: 0 10px;
}
/*===============================================
●style.css 画面の横幅が981px以上
===============================================*/
@media screen and (min-width: 981px){
#SiteName a:hover,#contact:hover,#topicPath a:hover,#infoNavi li:hover{
border-bottom-color: blue;	/*リンクにマウスが乗ったら色を変更する*/
}
.BoxItem:hover,.ManualLink:hover{
border-color: blue;	/*リンクにマウスが乗ったら色を変更する*/
}
.StockItem a:hover,.BoxItem a:hover,#Catalog_list li a:hover{
background: rgb(255,255,255,0.5);
}
.StockItem:hover{
}
.SlidePictures img{
max-width: 600px;
}
.Gaibu_Link:hover{color:blue;}

/*↓↓↓↓↓ページトップへボタン↓↓↓↓↓*/
.cp_arrows .cp_arrowcontainer:hover .cp_arrow {
	top: 50%;
}
a.underline:hover{color:blue;}
/*↑↑↑↑↑ページトップへボタン↑↑↑↑↑*/
}
/*===============================================
●tablet.css 画面の横幅が980pxまで
===============================================*/
@media screen and (max-width: 980px){
html {}
#SiteName h1{padding: 0;}
#SiteName{text-align:center;font-size: 0.8em;}
#SiteName a{padding: 0;}
/*======パンくずリスト======*/
#topicPath{display: none;}
/*======商品リスト======*/
.BoxItem{
border-width: 1px 0px 0px 0px;
margin: 0;
width: 100%;
}
.BoxItem img{
}
.BoxItem a{
z-index: 1000;

}
.BoxItem .Name{
position: absolute;
top: 0px;;
left: 0px;
width: 100%;
height: 100%;
padding: 0 8% 0 5%;
text-shadow: 
    black 1px 0px,  black -1px 0px,
    black 0px -1px, black 0px 1px,
    black 1px 1px , black -1px 1px,
    black 1px -1px, black -1px -1px,
    black 1px 1px,  black -1px 1px,
    black 1px -1px, black -1px -1px,
    black 1px 1px,  black -1px 1px,
    black 1px -1px, black -1px -1px;
}
.textCenter{
}
#copyright{
padding-bottom: 15%;
}
/*======お問い合わせ======*/
#contact{
padding: 0px;
width: 100%;
position : fixed;
top: auto;
right: auto;
bottom: 0px;
left: 0px;
height: 10%;
}
#contact a{
width: 100%;


}
h2{
}


.Product_Description{
padding: 0 2%;
}

table.LENS{
width: 100%;
}

.ItemContainer{
width: 100%;
}
.SlidePictures{
white-space: nowrap;/*自動的な折り返し禁止*/
overflow-x: scroll;/*横スクロール*/
-webkit-overflow-scrolling: touch;/*iOSでの横スクロールを滑らかな惰性スクロールにする効果*/
}

.SlidePictures img{
max-width: 2000px;
width: 80vw;
}
.textLeft{
}

/*リンクの矢印(＞)表示*/
#SiteName a:after,.BoxItem .Name:after,.StockItem a:after,#Catalog_list ul li a:after{
position: absolute;
top: 50%;
right: 10px;
width: 15px;
height: 15px;
margin-top: -9px;
border-top: solid 2px white;
border-right: solid 2px white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
}




/*======フォトギャラリー======*/
#PhotoGalleryMain a{
display: block;
}
#PhotoGalleryMain a img{
width: 100%;
height: auto;
}
/*======ご利用案内======*/
#infoMain p,#infoMain h2{
}
#infoMain p img{

}
#infoNavi a{
}
/*======トップページ======*/
#homeMain table img{width: 300px;}
.message{
border-left-width: 0px;
}
#Catalog_list{
}
#homeMain h3{
}
#leftBox{
margin: 0;
width: 100%;
border-width: 1px 0 0 0;
}
#Catalog_list{

margin: 0;
width: 100%;
}
#Catalog_list li{

width: 100%;
border-width: 1px 0 0 0;
}
#Catalog_list li a{
position: relative;
}
.StockItem{
display:flex;
flex-flow: row wrap;
border-width: 1px 0px 1px 0px;
margin: 0px 0px 0px 0px;
width: 100%;
}
.StockItem img{

}

.StockItem .Name{
}
}