/*================================================
 *  common
 ================================================*/

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

:root{background: #edf2e7;
}
body {
    /* font-size: 14px;
    line-height: 1; */
    /* font-family: 'Noto Sans Japanese',   sans-serif; */

}

a {
  outline: none;
}

/*
	.image{width:100%;
		max-width: 1200px;
		    overflow-y:auto;
		margin: auto;
		text-align: center;
    -webkit-overflow-scrolling:touch;
	}
*/

/*sponly*/
.sponly2 {
    display: none !important;
}

/*image*/


#image{width: 100%;
    max-width: 1200px;
    overflow-y: auto;
    margin: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
	
}


.yoko-scroll::-webkit-scrollbar {
  display: none;
}

.fancybox-content{
overflow: hidden!important;
}



/*pin*/
.pin{
transform-box:fill-box;
transform-origin:center;
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */}
.pin:hover{transform: translateY(-20px) scale(1.1);}


 .caption{
transition:.3s ease; /* ゆっくり変化させる */
opacity:0;
visibility: hidden;
}
.pin_all:hover .caption{
	 visibility: visible;
	transform: translateY(-26px);
opacity:1;
transform: ;}




/*modal*/

.place {margin-bottom: 15px;
background: #ecf5f7;
	color: #009ad3;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 1px;
	display: inline-block;
	padding: 5px 8px;
	border-radius: 6px;
}

.p-r20 {padding-right: 20px}

.modal{width: 90%;
	max-width: 1000px!important;
}

.modal h3{
font-size: 25px;
margin-bottom: 20px;

letter-spacing: .3px;
line-height: 30px;}

.modal p{
	font-size: 15px;}

	.modal img{
margin: auto;
		display: flex;
/*max-width: 300px;*/
		object-fit:contain;
}

.tag {margin-top: 10px;
display:inline-flex;
	flex-wrap: wrap;
}

/*.tag li:first-child{margin-left: 0px;}*/



.tag li{ 
	margin-left: 5px;
	margin-bottom: 5px;
	display: inline-flex;
	border:1px solid #0893b4;
	color: #0893b4;
	vertical-align: middle;
	font-size: 12px;
padding: 2px 7px;
	border-radius: 15px;
}


/*hero*/
section.hero {
  width: 100%;
  /* height: 450px; */
  background: url("/product/bcpos/images/apparel-shop.jpg") 0 20% no-repeat;
  background-size: cover;
  color: #fff;
  padding: 0;
  position: relative;
}

/*hero*/
.red {
    color: #ff0000;
}

a:hover img {
    transition: 0.5s;
    opacity: 0.7;
}

img {
    max-width: 100%;
    height: auto;
}

*,
*:before,
*:after {
   /* -webkit-box-sizing: border-box;*/
   /* -moz-box-sizing: border-box;*/
    /*-o-box-sizing: border-box;*/
    /*-ms-box-sizing: border-box;*/
    /*box-sizing: border-box;*/
    /* boxのpadding borderを内包する */
}

section {
    line-height: 1.5;
}

.fancybox-slide--html .fancybox-close-small {
    right: -7px!important;
    top: -5px!important;
}

.fancybox-content {
    padding: 25px!important;
 
}


@-moz-document url-prefix() {
    section {
        font-family: "Noto Sans Japanese";
    }
}

main#hardware {
    font-size: 18px;
    color: #202020;
    font-family: 'Noto Sans Japanese', sans-serif;
    line-height: 1.5;
}

@media screen and (max-width:840px) {
	
	.p-r20 {padding-right: 20px}
	
	.y-scroll {
  width: 100%;
  overflow-x: scroll;
  -ms-overflow-style: none;
		cursor: grab
	
}
	
.y-scroll:active {
  cursor: grabbing;
}
	
	#image{width:950px
	}
	
    main#hardware {
        font-size: 16px;
    }
	
	
	
	
	/*sponly*/
.sponly2 {
    display: block !important;
    margin: 0 auto;
    text-align: center;
}
	
	
/*scrollpop*/
	.scrollpop{background:#25a825;
	padding: 10px 0;
		color: white;
		font-weight: 600;
		font-size: 16px;
	}
	
/*	modal*/
	.modal {
    width: 90%;
}
	.modal h3{font-size: 17px;
	margin-bottom: 10px;
		line-height: 20px;
	}	
	
		.modal p {font-size: 12px;
line-height: 20px;
			letter-spacing: -.5px;
			margin-bottom: 10px;
	}	
	
	.modal img{max-height: 200px;
		object-fit:contain;
}
	
.fancybox-content {
    padding: 20px!important;
 
	}
	
	.tag {
    margin-top: 10px;
}
	
	
	
}




.padding {
    border: 0.01rem solid #ffffff;
    background: #edf5f4;
}

.arrow::after {
    padding-left: 10px;
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
}

/*button color*/
:root {
    --color1: black;
    --color2: white;
}
pre {
    white-space: pre-wrap ;
}

.prettyprint .linenums{
    font-size:1.6rem;}
body {
/*    background-color: #f6f6f6;*/
}
#wrapper {
    max-width: 960px;
    margin: 0 auto;
    color: #7d7d7d;
    padding-bottom: 60px;
}

h1 {
    margin: 50px 0 70px;
}

.alpha:hover {
    opacity: 0.7;
}
.active {
    background: #d2d2d2;
}
#btn {
    overflow: hidden;
    margin-bottom: 40px;
}

#btn li {
    float: left;
    margin: 10px;
    cursor: pointer;
}

#animationList {
    overflow: hidden;
}

#animationList li {
    width: 220px;
    height: 220px;
    padding: 10px;
    float: left;
    color: #222;
}

#animationList li span {
    display: block;
    width: 180px;
    height: 180px;
    padding: 20px;
}

.html {
    background-color:#EE6E70;
}

.javascript {
    background-color:#F0EB2B;
}

.jquery {
    background-color:#A2F2EF;
}

.banner {
    background-color:#E786EB;
}



/*hero*/
section.hero {
  width: 100%;
  /* height: 450px; */
  background: url("/product/bcpos/images/apparel-shop.jpg") 0 20% no-repeat;
  background-size: cover;
  color: #fff;
  padding: 0;
  position: relative;
}


/*************************************************************************************/
/*Sp Layout*/
/*************************************************************************************/


@media screen and (max-width:728px) {


}