/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 0.5rem;
  color: #5a5a5a;
  background:url(../images/bk.png);
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

/* width
-------------------------------------------------- */
	.w-15{
		width: 15%!important;
	}
	.w-70{
		width: 70%!important;
	}
	.w-150{
		width: 150%!important;
	}
	.w-200{
		width: 200%!important;
	}

	.clear{
		clear:both;
	}

/* font-size
-------------------------------------------------- */	

.font-xsmall {
  font-size: 0.7rem;
}
	
.font-small {
  font-size: 0.9rem;
}

.font-large {
  font-size: 1.1rem;
}
.font-xlarge {
  font-size: 1.5rem;
}
.font-2 {
  font-size: 2rem;
}
.font-3 {
  font-size: 3rem;
}
.font-5 {
  font-size: 5rem;
}

/* h
-------------------------------------------------- */	

h5{
	font-weight: bold;
}


/* リンクカラー
-------------------------------------------------- */
a{
	color:#5a5a5a;
	}
div a:hover{
	color:#5a5a5a;
	text-decoration:underline;
	}
a img {
transition: .3s;
}
a img:hover {
  opacity: 0.7;
}

/* カラー
-------------------------------------------------- */

.line-color{
	color:#00b900;
}

.bg_l_orange{
	background:#fdf0e0;
}

.orange{
	color: #ef8809;
}

/* リスト
-------------------------------------------------- */
ul li{
	list-style:none;
}


/* フォームカスタマイズ
-------------------------------------------------- */
.form-control {
	padding: 0.1rem 0.5rem;
	font-size: 0.8rem;
	height: 2.4rem;
}

/* スライドカスタマイズ
-------------------------------------------------- */

.carousel-item .img-fluid {
  width:100%;
  height:auto;
}

.carousel-item{
  height: auto;
}

/* パーツ別
-------------------------------------------------- */

.col-lg-9 h2{
	background:#fdf0e0;
	 display:block;
	 padding:0.5rem 1rem;
}

.col-lg-9 .par{
	background:#fff;
	 padding:0.3rem;
	 filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}

.col-lg-9 .par a{
	background:#fff;
	 display:block;
	 padding:1rem;
	 margin:;
}

/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* コンテンツ下のマージン */
.flex-child { margin-bottom: 10px; }

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child { width: calc( (100% - 10px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child { width: calc( (100% - 20px) / 3 ); }

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child { width: calc( (100% - 30px) / 4 ); }
	
/* 最終行は両端揃えにしない */
.flex-col3::after,
.flex-col4::before,
.flex-col4::after { content: ""; }

.flex-col4::before { order: 1; }

/* レスポンシブ対応 */

/* 991px以下で4列 → 3列 */
@media screen and (max-width: 991px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}

/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 767px) {
	.flex-col3 .flex-child,	
	.flex-col4 .flex-child { width: calc( (100% - 10px) / 2 ); }
}

/* 575px以下で全て1列 */
@media screen and (max-width: 575px) {
	.flex-col3 .flex-child,	
	.flex-col2 .flex-child
	 { width: 100%; }
}


/* メーカー別
-------------------------------------------------- */
.tabs img{
  cursor:pointer;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#truck:checked ~ #truck_content,
#car:checked ~ #car_content,
#ship:checked ~ #ship_content {
  display: block;
  cursor:pointer;
}

/* 商品検索
-------------------------------------------------- */
.kensakulist select {
		font-size: 0.9rem;
		width: 90%;
		}

@media screen and (max-width: 767px) {
	.kensakulist {
		width: ;
		}
}

/* フッター
-------------------------------------------------- */

footer{
	background:#c6c6c6;
}

@media screen and (max-width: 767px) {
	footer  {
		padding-bottom: 7rem;
		}
	footer img {
		width: 100%;
		}
}

.back-to-top {
    position: fixed;
    bottom: 90px;
    right: 110px;
    display: none;
	background:#f67844;
	color:#fff;
}
@media screen and (max-width: 767px) {
.back-to-top {
    right: 10px;
}
}
.back-to-top i {
	color:#fff;
}


/* フッター
-------------------------------------------------- */

._fukugan_title{
	margin-bottom:0;
	box-sizing:content-box;
}
	

/* 一覧
-------------------------------------------------- */
.itemlist li{
	 filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
	 background:#fff;
	 padding: 0.5rem;
}


/* 商品詳細　詳細画像
-------------------------------------------------- */

#thumbnail{
    overflow: hidden;
    width: 100%;
}
#thumbnail li{
    float: left;
}
#thumbnail li img{
    width: 100%;
    opacity: 0.5;
    filter: alpha(opacity=80); 
}
#thumbnail li.current img{
    opacity: 1;
    filter: alpha(opacity=100);
}
#main_photo{
    position: relative;
    height: 550px;
}
#main_photo img{
    position: absolute;
    top:0;
    width: 100%;
}

.detail1{
	 filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
	 background:#fff;
	 padding: 1rem;	
}


/* カゴの中
-------------------------------------------------- */
.table-c td, .table-c th{
	padding: 0.3rem;
}


/* QA
-------------------------------------------------- */
.q {
	background:#fedcb2;
	padding: 0.3rem;
	display:block;
}
.q span {
	font-size: 2rem;
	color:#F30;
	margin: 0 0.5rem;
}
.a {
	padding: 0.3rem;
}
.a span {
	font-size: 2rem;
	color:#390;
	margin: 0 0.5rem;
}


/* リアルタイム
-------------------------------------------------- */


#nt-example1 {
	max-width: 100%;
}

#nt-example1-container {
	text-align: center;
}

#nt-example1 ul {
	width: 100%;
}

#nt-example1 li {
	background: #fff;
	height: 110px;
	padding: 10px;
	line-height: 30px;
	list-style: none;
	text-align: left;
	border-bottom: 1px dotted #dee2e6;
	font-size: 0.8rem;
}

#nt-example1-container li span{
	display:block;
	float:left;
	margin-right:1rem;
	padding-top:1.8rem;
}

#nt-example1-container li span.no{
	width: 2%;
	padding-left:0.5rem;
}
#nt-example1-container li span.nitiji{
	width: 15%;
}
#nt-example1-container li span.ken{
	width: 8%;
}
#nt-example1-container li span.img{
	width: 15%;
	padding-top:0;
}
#nt-example1-container li span.name{
	width: 50%;
}

/* ブログ新着レイアウト調整
-------------------------------------------------- */

.ninja-recommend{
	width: 255px;
	margin:0 auto;
}
.ninja-recommend-block .ninja-recommend .horizontal .ninja-recommend-article{
	float:left;
	display:block;
}

/* youtubeレスポンシブ
-------------------------------------------------- */

.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}