/**********************************************************


 全共通


**********************************************************/


main #news{
  font-size:16px;
}
.newscat{
  font-size:14px;
}
.breadcrumbs{
  font-size:14px;
}
#gallery .grad a:hover, #gallery .grad a:active{
text-decoration:none;
}
.grad:hover{
background: linear-gradient(to left, rgba(50,50,50,0.5), #555 70%);
}
.grad:active{
background: linear-gradient(to left, rgba(50,50,50,0.5), #666 70%);
}
.grad{
width:100%;height:100%;background-size: cover;
background: linear-gradient(to left, rgba(50,50,50,0.5), #333 70%);
}

.grad h2{
margin-top:0.5em;
font-size:23px;
}

.grad p{
font-size:18px;
font-weight:500;
}

main{
  margin-bottom:60px; /*フッターの上の隙間**/
}

#distributor h2{
  border-bottom:1px solid #ccc;
  padding:3px 0;
}



.youtube {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/**********products************/
figure img{
  width:100%;
  height:100%;
}

.products-a h2{
border-top:2px solid #cccccc;
margin-top:45px;
padding-top:0.5em;
}
.products-a h3{
border-top:1px dotted #cccccc;
margin-top:25px;
padding-top:0.5em;
}

/*******************************/



footer .site-info a{color:#fff;}

footer .site-info a:hover{
  color:#fff;
  text-decoration:none;
}


footer #menu-footer a.nav-link {
  color:#9A9DA0;
}

footer #menu-footer a:hover{
  color:#fff;
  text-decoration:none;
}
/*--------news-------*/
#news .news, #news .event, #news .newproducts{
  text-align:center;
  margin-bottom:3px;
  padding:0px 4px 2px;
  width:5em;
  color:#FFF;
  font-size:13px;
  font-weight:bold;
}

#news .news{
  background:tomato;
}
#news .event{
  background:orange;
}
#news .newproducts{
  background:lightseagreen;
}
#news .newscat{
  display: flex;
}
#news .newscat p{
  margin-right:0.5em;
  margin-top:3px;
}


#products section{margin-bottom:3em;}

#products figcaption{
width:100%;
text-align:center;
}

/***コンタクト共通****/
.resp-tbl{
  margin-bottom:20px;
}
table.resp-tbl { width: 100%;}
table.resp-tbl th, table.resp-tbl td  { padding: 10px; border: 1px solid #ccc; }
table.resp-tbl th  { background: #f4f4f4;
 }

.resp-tbl th  { width: 30%; text-align: left; font-weight:normal;}

.resp-tbl .name,.resp-tbl .company,.resp-tbl .address1,.resp-tbl .address2 { width: 75%; }
.resp-tbl .message {  width: 75%; height: 20em; }
.resp-tbl input{
  height:1.5em;
}
.subm{
 color:#fff;
  background:#3c6db5;
  border:1px solid #3c6db5;
  display:block;
  text-decoration:none;
  text-align:center;
  padding:10px;
  cursor: pointer;
  width:100%;
  border-radius: 4px;
  font-size:16px;
}
.subm:hover, .subm:active{
  color:#fff;
  background:#2C4F83;
  border:1px solid #2C4F83;
  text-decoration:none;
}

.contact input{
  padding:1em 0.5%;
  border:1px solid #ccc;
}
.contact select, .contact textarea{
  border:1px solid #ccc;
}
/***コンタクトここまで****/


/*--------トップへ戻るボタン ここから-------*/
.page-top
{
	margin: 0 ;
	padding: 0 ;
	z-index:999;
}
.page-top p
{
	margin: 0 ;
	padding: 0 ;
	position: fixed ;
	right: 16px ;
	bottom: 16px ;
}
.move-page-top
{
	display: block ;
	background: #D36015 ;
	width: 50px ;
	height: 50px ;
	color: #fff ;
	line-height: 50px ;
	text-decoration: none ;
	text-align: center ;

	-webkit-transition:all 0.3s ;
	-moz-transition:all 0.3s ;
	transition:all 0.3s ;
}
.move-page-top:hover
{
	opacity: 0.85 ;
}

/*PAGE TOPボタン追加*/
.pagetop{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 50px;
  background: #00AEEF; /*ボタンの色*/
  opacity: 0.6;
  border-radius: 50%; /*角の丸み*/
}
.pagetop a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
.pagetop a::before{
font-family: "Font Awesome 5 Free";
content: "\f102"; /*アイコン*/
font-weight: 900;
font-size: 25px;
color: #fff; /*アイコンの色*/
position: absolute;
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
margin-top:6px;
text-align: center;
}
/*--------トップへ戻るボタン ここまで-------*/


/*--------artistここから-------*/

.twitter a::after {
margin-left:0.5em;
font-family: 'Font Awesome 5 Brands';
font-weight:400;
content: "\f081"; /*アイコン*/
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;

}
.facebook a::after {
margin-left:0.5em;
font-family: 'Font Awesome 5 Brands';
font-weight:400;
content: "\f082"; /*アイコン*/
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;
}




/*--------artistここまで-------*/





/*--------メニュー要検討-------*/
footer .menu-footer-container ul li{
list-style:none;
}
footer .menu-footer-container ul,footer .menu-footer-container ul li{
margin:0;
}
footer .menu-footer-container ul li a{
color:#fff;
}


/*--------メニュー要検討ここまで-------*/

/**********************************************************


 サイズごと


**********************************************************/
@media (max-width: 991px) {
  footer .site-info{
    text-align:center;
  }
}
@media (min-width: 992px) {
  footer .menu-footer-container ul{
    display: flex;
  }
  footer .site-info{
    margin-top:15px;
  }
footer ul#menu-footer li a{
padding-left:8px;padding-right:8px;
}
}

@media screen and (max-width: 600px){
  table.resp-tbl td  { padding: 10px; border:none;margin-bottom:20px; }
    .resp-tbl { margin: 0 -10px; }
    .resp-tbl table,
    .resp-tbl th,
    .resp-tbl td{
    width: 100%;
    display: block;
    border-top: none;
  }
  table.resp-tbl{
  border-top: 0px solid #ccc;
  margin-top:10px;
  }
  .resp-tbl tr:first-child th { border-top: 1px solid #ccc; }



.area-list{
margin-bottom:30px;
}
.area-list ul{
  font-size:1.2em;
  display: flex;
  justify-content: flex-start;
}
.area-list ul li i{
  margin-right:3px;
}
.area-list ul li{
  margin-right:20px;
  list-style: none;
}
.area-list p{
  display: none;
}
.area-border{
  margin:0 5px;
}
}
@media ( min-width : 601px ){
 .subm{
    margin-top:20px;
    width:12em;
    margin:0 auto;
 }
footer .menu-footer-container{
   margin-top:7px;
}
/** area list **/

#distributor .area-list{
  width:600px;
  margin: auto;
  position:relative;
}

.area-list ul{
  width:768px;
  font-size:1.2em;
  padding-left:0px;
}
.area-list ul li:nth-child(1){
  position:absolute;
  left: 100px;  /* 左からの位置指定 */
  top: 100px;
  background:#fff;
  border:1px solid #999;
}
	.area-list ul li:nth-child(2){
		position:absolute;
		left: 310px;  /* 左からの位置指定 */
		top: 100px;
		background:#fff;
		border:1px solid #999;
	}
		.area-list ul li:nth-child(3){
		position:absolute;
		left: 430px;  /* 左からの位置指定 */
		top: 110px;
		background:#fff;
		border:1px solid #999;
}

	.area-list ul li i{
		margin:0 3px 0 0;
	}
	.area-list ul li{
		margin-right:16px;
		padding:0px 3px;
}
	.area-list li {
		list-style: none;
}
	.area-list li{
		display: block;
	}
	.area-list p{
		margin:0 auto;
		position: relative;
		width: 481px;
}
/**area list 終わり**/



}


@media screen and (min-width: 992px) {
#distributor .area-list{
		width:832px;
		margin: auto;
		position:relative;
}
.area-list ul{
  width:832px;
}
.area-list ul li:nth-child(1){
  left: 100px;  /* 左からの位置指定 */
  top: 150px;
}
.area-list ul li:nth-child(2){
  left: 460px;  /* 左からの位置指定 */
  top: 150px;
}
.area-list ul li:nth-child(3){
  left: 660px;  /* 左からの位置指定 */
  top: 180px;
}

.area-list p{
  width: 832px;
}
}



@media (min-width: 1200px) {
  .pcw {
    max-width: 960px;
    margin:0 auto;
  }
}



.jumbotron{
	margin-bottom:0;
}

/*--------レイアウト-------*/
section figure img{
  width:100%;
  height:100%;
}

.breadcrumbs{
  margin-top:20px;
  margin-bottom:30px;
}