@charset "UTF-8";
/* CSS Document */

@media screen and (max-width:1024px) {
/*------------------------------------------------------------
nav
------------------------------------------------------------*/
#header nav ul {
    width: 53%;
	}
#brand {
		margin: -12% auto 60px;
    width: 96%;
}

}
@media screen and (max-width:768px) {
/*------------------------------------------------------------
nav
------------------------------------------------------------*/    
.logo img {
    width: 55%;
    max-width: 290px;
    height: auto;
}
    .hamburger__icon{
        display: block;
        
    }
/**************************************************
/* 1. 共通
***************************************************/
/*---------------------------------------
レイアウト　コンテンツの余白関係
------------------------------------------*/
main{
  width:100%;
  padding:20px 0 30px;
}
#content{
	width:100%;
  margin:0px auto;
}
.inner{
	width:100%;
	padding: 0 2%;
}
	
#content .pages{
	width: 92%;
	padding: 20px 0 40px;
}
#company .inner,#mail .inner{
	padding: 0 2%;
}

/*-----------------------------------------
/* h1-h6　
------------------------------------------*/
h2 {
	font-size:18px;
	font-size: 1.8rem;
}

.w-map{
	height:auto;
}

.sp { display: block; }
.pc { display: none; }	

#under-mv h2 span{
	position: absolute;
	top: 23%;
	}
#underlayer h3{
	font-size:17px;
	font-size: 1.7rem;
	text-align: center;
}
#underlayer h3 span{
		border-bottom: 1px solid #CFCFCF;
	padding-bottom: 8px;
}
	
/*------------------------------------------
その他
---------------------------------------------*/
img{
		width: auto;
	}
#underlayer dl,
#underlayer table{
	display: block;
	border: 1px solid #CFCFCF;
	margin-bottom: -1px;
}
#underlayer dt,#underlayer dd,
#underlayer th,#underlayer td{
	display: block;
	padding: 8px;
	border-bottom: none;
    width: 100%;
}
#underlayer dd{padding: 16px;}
#underlayer dt ,
#underlayer th{
  width: 100%; 
	border-bottom: none;
	background: #CFCFCF;
}
underlayer dl{
	width: 100%;
	margin: 0 auto;
	display: table;
}

/*------------------------------------------------
ボタン　btn01,btn02
---------------------------------------------------*/
	.btn{
	width: 80%;
	text-align: center;
	margin: 0 auto;
}

/*--------------------------------------------------
パンくず
----------------------------------------------------*/

nav#breadcrumbs {
  padding: 15px 0 0;
	margin: 0 auto;
}

/**************************************************
/* 2. footer
***************************************************/
	#footer {
		height:auto;
	  text-align:center;
}
	#footer .ft-menu{
	width: 100%;
	}
	
/**************************************************
/* 2. トップ
***************************************************/
	#news #update {
    padding: 20px 0;
}
	#news #update {
    padding: 8px 0;
}
	#news, #top-products, .brand {
    padding: 32px 0px;
}
	#top-mainvisual p img{
		width: 15%;
		height: auto;
	}
	#news #update dt,
	#news #update dd,
	#brand .brand-n ul li{
	display: block;
	}
	#news #update dt,
	#news #update dd{
	width: 94%;
}
	#news #update dt{
	padding-bottom: 4px;
}
	#top-products .cate-g{
    margin: 40px 0 50px;
    padding: 40px 0 50px;
	}
	#top-products .cate-g ul li {
 		width:26%; 
    margin: 1%;
}
	#top-products .cate-g li img{
		width: 100%;
}

	#brand,#brand .inner{
		padding: 2%;
		border-radius: 12px;
	}
	#brand {
		width: 94%;
		background: #fff;
		margin: -12% auto 60px;
}
	#brand .inner{
	max-width: 100%;
	width: 100%;
	border: 1px dashed #9AD9DA;
}

	#brand .brand-n ul li{
		text-align: center;
		padding-bottom: 40px;
	}
	
	#brand .brand-l:first-child {
    padding: 10px 0;
}
	#brand .brand-l h3::before,#brand .brand-l h3::after{
	display: block;
	width: 80%;
	margin: 5% auto;
}

/***************************************
/* products
****************************************/

	#products .pro-g{
	display: flex;
		justify-content: center;
}

/**************************************************
/* 2. company
***************************************************/
#company .map p{
	padding: 0 0 8px 0;
	}
	
/**************************************************
/* 2. Business
***************************************************/
	#business .step{
	display: block;
}
	#business .step .ste00{
	max-width: 100%;
	height: auto;
	padding: 24px 2%;
	text-align: center;
	border: 1px solid #CFCFCF;
	border-bottom: none;
	box-sizing: border-box;
}
#business .step .ste00:last-child{
	border-bottom: 1px solid #CFCFCF;
}
	#business .step .ste00 .ste-ttl{
		text-align: center;
		padding: 24px 2% 8px;
	}
#business .step .col p{
	padding: 8px 4% 16px;
}

/***************************************************
/* recruit
****************************************************/
#recruit .rec-mess-g,#recruit .rec-img-g{
	display: block;
	padding: 24px 0;
}
	#recruit .rec-ttl{
	width: auto;
}
	#recruit .mess{
	width: 100%;
	text-align: left;
	font-size: 15px;
	font-size: 1.5rem;
	padding-bottom: 8px;
}
#recruit .mess2{
	padding: 16px;
}
#recruit .mess2:nth-child(2){
	border-right: 1px solid #CFCFCF;
	border-left: 1px solid #CFCFCF;
}
#recruit .mess2:nth-child(2){
	border-top: none;
	border-bottom: none;
}
#recruit .con2{
	padding: 24px 0;
}
#recruit .con2 .lead2{
	text-align: left;
	width: 228px;
	display: block;
	margin-left: auto;
	margin-right: auto;

}
#recruit .r-img-l{
	padding-right: 0;
	padding-bottom: 2%}
#recruit .r-img-r p:first-child{
	padding-bottom: 2%;
	}

/**************************************************
/* 2. Mail
***************************************************/
	#mail .tel{
	width: 80%;
	}
	#mail .tel div{
	width: 80%;
	}
	#mail .tel div .pc{
	display: none;
}
	#mail .tel div a{
		display: inline-block;
	line-height: 2;
	font-size: 1.6rem;
	font-size: 16px;
}
/**************************************************
/* 　wp
***************************************************/
/*一覧ページ*/
    #itemlist ul{
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
	#itemlist ul li{
	display: block;
	margin: 0 auto;
	text-align: center;
}
	/*詳細ページ*/
	.mod_gallery {
    margin: 0 auto;
		 width: 100%;
}
	.mod_gallery_navi ul {
    max-width: 420px;
    flex-wrap: wrap;
    width: 100%;
	}

	#item{
 display: block;
}
	#item tr{
		border-bottom: 1px solid #CFCFCF;
	}
	#item tr:last-child{
		border-bottom:none;
	}
	
	#detail .dotto {
  padding: 8px 6px 8px;
}
#detail .w-10{width: 100%;padding-top:0;padding-bottom: 0;}
#detail .w-15{width: 100%;padding-bottom: 0;}
#detail .w-35{width: 100%;padding-top:0;padding-bottom: 0;}
#detail .w-75{width: 100%;padding-top: 0;}

/* .mod_gallery_navi */
.mod_gallery_navi ul{
	width:100%;
}
.mod_gallery_navi li{
	width:20%;
	height:20%;
	padding-bottom: 24px;
	margin-bottom: 0;
	}

.mod_gallery_navi li a{
	width:20%;
	height:20%;
}
/*
.mod_gallery_photo::before {
    content: "";
    display: block;
    padding-top: 50%;
}
*/
	
/* mod_gallery_photo */

/*
.mod_gallery_photo img{
	position:static;
}
*/




	/*カタログ*/
#underlayer #catalog table,
#underlayer #brand-detail table{
border: none;
}
}
@media screen and (max-width:414px) {
/**************************************************
/* 　共通
***************************************************/
	.btn02 {
    padding: 16px 40px;
	}
/**************************************************
/* 　トップ
***************************************************/
	#news h2{
	height: 123px;
	padding-top: 32px;
	display: block;
	margin-top: 30px;
	background-size: 27%;
	}
	
	#top-products .cate-g{
    margin: 40px 0 30px;
    padding: 40px 0 30px;
	}

#brand .brand-l h3 span{
padding: 0 10px;
	}
	

/**************************************************
/* 2. Business
***************************************************/
	#business .step{
	display: block;
}
/**************************************************
/* 2. recruit
***************************************************/
	#recruit .rec-ttl{
	background-size: 90%;
	width: auto;
}
/**************************************************
/* 2. mail
***************************************************/
#mail .tel div{
	width: 95%;
	}
}
@media screen and (max-width:320px) {
/**************************************************
/* 1. 共通
***************************************************/
	p,li,a,dd,dt,td,th{
  font-size:13px;
	font-size: 1.3rem;
		line-height: 1.7;
}
	h2,h3,h4,h5,h6{
		line-height: 1.5;
	}
	h2{
	font-size: 22px;
	font-size: 2.2rem;
	}
	h3{
	   font-size:20px;
	font-size: 2.0rem;
}
	h4{
	   font-size:18px;
	font-size: 1.8rem;
}
	h5{
	   font-size:16px;
	font-size: 1.6rem;
}	
/**************************************************
/* 2. トップ
***************************************************/
.ani-mess {
    padding: 6%;
	}
.ani-mess p{
	font-size: 1.3rem;
	font-size: 13px;
	}
	

/*-------------------------------------------------
/*h1-h6　その他
----------------------------------------------------*/
#underlayer h3{
	font-size:20px;
	font-size: 2.0rem;
	text-align: center;
}

/**************************************************
/* 2. Recruit
***************************************************/
	#recruit .rec-ttl{
	font-size: 1.5rem;
	font-size: 15px;
	text-align: center;
	padding-bottom: 4px;
}
	
}