@charset "utf-8";
/* CSS Document */
/*  目次 
 * 1. リセット
 * 2. 共通（レイアウト・見出し・その他・table・header nav・footer・ハンバーガー・btn・戻るボタン・footer）
 * 3. トップページ
 * 4. Company
 * 5. business
 * 6. recruit
 * 7. Mail
 * . WP
*/

/**************************************************
/* 1. リセット
***************************************************/
* {margin: 0; padding: 0; line-height:1.0;}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {display: block;}
html {font-size: 62.5%;}
body {font: normal 1.4rem/1.6  Helvetica Neue, Helvetica, Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;}
html,body { margin:0; padding:0;}
table {border-collapse:collapse; border-spacing: 0;}
td,th {padding: 0;}
ul, ol {list-style: none;}
a {text-decoration: none; }
img {vertical-align: bottom; border: 0;}
i, cite, em, var, address, dfn {font-style:normal;}
*, *:before, *:after {box-sizing: border-box;}
small { font-size: 11px;font-size: 1.1rem;}
button,select {text-transform: none;}
.cf:after {
    content: "";
    height: 0;
    display: block;
    clear: both;
}

/*IE用*/
a {background-color: transparent;}
a:active,a:hover {outline: 0;}
button {overflow: visible;}
textarea {overflow: auto;}
/*Androidでcの色がおかしくなる現象を回避*/
.meiryo {
    font-family: Meiryo;
}
/*firefox用リンクをクリックした後に表示される「枠線」を消す*/
a,a:focus {
    outline: none;
}

/* body */
body {
   width:100%;
}
/* html,body */
html,body{
   height:100%;
}

a, a:hover, a:visited, a:active, a:focus {
    text-decoration: none;
    color: #454444;
}

/*IE用*/
a {background-color: transparent;}
a:active,a:hover {outline: 0;}
button {overflow: visible;}
textarea {overflow: auto;}

/*Androidでcの色がおかしくなる現象を回避*/
.meiryo {
    font-family: Meiryo;
}
/*firefox用リンクをクリックした後に表示される「枠線」を消す*/
a,a:focus {
    outline: none;
}

/**************************************************************************************************************************
/* 共通スタイル
****************************************************************************************************************************/
/*------------------------------------------------------------
レイアウト
------------------------------------------------------------*/
#conteiner{
	background: url(/images/background/dot-bg.png) top left repeat;
}
main{
  width:100%;
  padding:0 0 70px;
}
#content{
	width:100%;
  margin:0px auto;
}
.inner{
	max-width:1000px;
	width: 100%;
	margin:0 auto;
	padding: 0;
}
#underlayer main{
  width:100%;
  padding:0 ;
}
#content .pages{
	max-width:1044px;
	width: 100%;
  background: #fff;
	margin: 0 auto;
	padding: 20px 0 40px;
}
#company .inner,#mail .inner{
	max-width:800px;
	width: 100%;
	margin:0 auto;
	padding: 0;
}

.under-p{padding-bottom: 35px;}

table a:hover{
	opacity: 0.7;
}
/*------------------------------------------------------------
見出し
------------------------------------------------------------*/
h1{
   font-size:12px;
	 font-size: 1.2rem;
	font-weight: 100;
}
h2,h3,h4,h5{
   color:#454444;
	font-weight: normal;
}

h2 {
	font-size:20px;
	font-size: 2.0rem;
	text-align: center;
}


h3{
	font-size:19px;
	font-size: 1.9rem;
}
h4{
	font-size:18px;
	font-size: 1.8rem;
}
h5{
	font-size:16px;
	font-size: 1.6rem;
}
/*------------------------------------------------------------
/* 下層ページ共通h1-h6
------------------------------------------------------------*/
#under-mv{
	background: url(/images/background/dot-w.png) top left repeat  #9AD9DA;
}
#under-mv h2{
	margin: 0 auto;
	display: block;
	background: url(/images/common/kasa-w.png) top center no-repeat;
	height: 180px;
	width: 127px;
	position: relative;
}
#under-mv h2 span{
	position: absolute;
	top: 26%;
	left: 2px;
	left: 0;
	right: 0;
	bottom: 0;
}
#under-mv h2{
	color: #fff;
}
#underlayer h3,#underlayer h4,#underlayer h5{
	padding-bottom: 32px;
}
#underlayer h3{
	font-size:23px;
	font-size: 2.3rem;
	text-align: center;
}
#underlayer h3 span{
	border-bottom: 1px solid #CFCFCF;
	padding-bottom: 8px;
}
#underlayer h4::before {
    content: "";
    width: 34px;
    display: block;
    height: 2px;
    background: #cfcfcf;
    margin-left: 0px;
    position: relative;
    top: 30px;
    left: 0;
}
/*------------------------------------------------------------
その他
------------------------------------------------------------*/
p,li,a,dd,dt,td,th{
  font-size:14px;
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: normal;
}
#underlayer dl,
#underlayer table{
	width: 100%;
	margin: 0 auto;
	display: table;
}
#underlayer dt,#underlayer dd,
#underlayer th,#underlayer td{
	display: table-cell;
	padding: 20px;
	border-bottom: 1px solid #CFCFCF;
}

#underlayer dt,
#underlayer th{
  width: 160px; 
	border-bottom: 2px solid #CFCFCF;
}

#underlayer th {
  width: 200px;
	padding-left: 10px;
	text-align: left;
}

.w100{
  max-width:100%;
	width:100%;
	height:auto;
	margin:0 auto;
}

.opa:hover{
    opacity:0.8;
}

.lead{ 
	text-align: center;
	padding: 16px 0;
	
}
.w-map{
  max-width:800px;
	width:100%;
	height:350px;
	margin:0 auto;
}

.t-center{
	text-align: center;
	display: block;
	padding-top: 16px;
}
.pc { display: block; }
.sp { display: none; }

/*------------------------------------------------------------
ボタン btn01,btn02
------------------------------------------------------------*/	
.btn01 {
	border: 1px solid #cfcfcf;
	width: 75px;
	height: 75px;	
}
.btn01 a {
  padding: 0 .3em;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(207,207,207,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
	display: block;
	width: 75px;
	height: 75px;
	text-align: center;
		padding: 17px 0;
}
.btn01 a:hover {
  background-position: -100% 0;
  color: #fff;
}

.btn{
	width: 30%;
	text-align: center;
	margin: 0 auto;
}
.btn a{
	color: #9AD9DA;

}
.btn02{
	margin: 0 auto;
	cursor: pointer;
	background: #fff;
	border: 1px solid #9AD9DA;
	color: #9AD9DA;
	padding: 20px 75px;
	display: inline-block;
/*	display: block;*/
	line-height: 20px;
	font-size: 1.4rem;
	font-size: 14px;
	
}
 .btn02:hover{
		background: #9AD9DA;
		color: #FFF;
	transition: .3s;
}

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

nav#breadcrumbs {
  padding: 6px 0 0;
	margin: 0 auto;
}
nav#breadcrumbs li {
    display: inline;
    font-size: 13px;
		font-size: 1.3rem;
    color: #fff;
}
nav#breadcrumbs li a{
	color:#fff;
	border-bottom: 1px solid #fff;
	padding-top: 2px;
	
}
nav#breadcrumbs li:last-child::before,
nav#breadcrumbs li.second:nth-child(2)::before{
	content:"/";
	padding-right: 4px;
	
}

/**************************************************************************************************************************
/* header
****************************************************************************************************************************/
/*------------------------------------------------------------
header
------------------------------------------------------------*/
header{
   width:100%;
	position: relative;
}
header .inner{
   margin:0 auto;
   padding: 10px 0px;
	text-align: center;
}
.logo{
    margin: 0px 0px 15px;
    text-align: center;
}
.logo img{
    width: 100%;
    max-width: 290px;
    height: auto;
}
header #catalog-link{
	position: absolute;
	top:0;
	right: 7%;
}
header .he-sns{
	position: absolute;
	bottom: 5%;
	right: 5%;
}
header .he-sns li{
    display: inline-block;
    margin: 8px;
}

.hamburger {
	display: none !important;
}
/*------------------------------------------------------------
nav
------------------------------------------------------------*/

header nav{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	width:100%;
	padding: 5px 0;
}
header nav ul{
	margin:0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	display: block;
	border-bottom: 1px solid #CFCFCF;
	width:45%;
	padding: 0 0 8px;
}

header nav li{
  font-size: 14px;
	font-size: 1.4rem;
	vertical-align: middle;
	display: inline-block;
	padding-right: 10px;
}
header nav li:last-child{
	padding-right: 0px;
}
header nav a {
  font-size: 13px;
	font-size: 1.3rem;
	 position: relative;
  display: inline-block;
  text-decoration: none;
}

header nav a::after ,#header nav li.current a::after {
  position: absolute;
  bottom: 2px;
  content: '';
  width: 1px;
	height: 18px;
  background: #CFCFCF;
  opacity: 0;
  visibility: hidden;
  transition: .5s;
	top: 20px;
	left: 50%;
	right: 50%;
}
header nav a:hover::after,#header nav li.current a::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}

/**************************************************************************************************************************
/* footer
****************************************************************************************************************************/
#footer {
	 background: #9AD9DA;
    width: 100%;
		height:193px;
	  text-align:center;
		margin: 0 auto;
		padding: 20px 0;
}
#footer .ft-menu{
	width: 80%;
	margin: 0 auto;
}
#footer .sns li,
#footer .ft-menu li{
	display: inline-block;
	margin:8px;
}

#footer .ft-menu li a{
	font-size: 1.2rem;
	font-size: 12px;
}

#footer .ft-logo{
	padding: 24px 0 8px;
}

.copyright{
   height:20px;
   line-height:20px;
}
/*------------------------------------------------------------
戻るボタン
------------------------------------------------------------*/
#pageTop {
    position: fixed;
    bottom: 2%;
    right: 3%;
	z-index: 1;
}

/**************************************************************************************************************************
/* 3.トップページ
****************************************************************************************************************************/
#top main{
  padding:0;
}
#top h2 {
	font-size:22px;
	font-size: 2.2rem;
}
#top h3 {
	font-size:21px;
	font-size: 2.1rem;
}
#news,#top-products,.brand{
	width:100%;
	padding: 40px 0px;
}
#news,#top-mainvisual{
	background: #fff;
}
#top-mainvisual{
	text-align: center;
	margin: 0 auto;
}
/*
#top-mainvisual ul li{
    width:100%;
	height:auto;
}
*/
#top-mainvisual img{
    margin: 0 auto;
    width: 100%;
    height: auto;
}
#news h2{
	background: url(/images/common/kasa.png) center center no-repeat;
	height: 158px;
	padding-top: 40px;
	display: block;
	margin-top: 30px;
}
#news #update dl{
	margin: 0 auto;
	max-width: 800px;
	line-height: 20px;
	padding: 20px 0;
	border-bottom: 1px dashed #CFCFCF;
}
#news #update .h-color dd a:hover{
	border-bottom: 1px solid #CFCFCF;
	padding-bottom: 4px;
}
#news #update{
	padding: 40px 0;
}
#news #update .h-color dt,#news #update .h-color dd{
	display: inline-block;
	font-size: 1.3rem;
	font-size: 13px;
}
#news #update dt{
	width: 13%;
}
#news #update dd{
	word-break: break-all;
	width: 86%;
}
#top-products{
	background: url(/images/background/dot-w.png) top left repeat  #9AD9DA;
}
#top-products h2{
	margin-bottom: 20px;
}
#top-products h2 span {
	position: relative;
}
#top-products h2 span::before{
	content: "Category";
	position: absolute;
	top: 36px;
	right: 0;
	left: 0;
	font-size: 13px;
	font-size: 1.3rem;
}
/*
#top-products .cate-g ul{
	margin: 40px 0 70px;
	padding: 40px 0 70px;
	max-width: 100%;
	text-align: center;
}
*/
#top-products .cate-g{
	margin: 40px 0 70px;
	padding: 40px 0 70px;
	max-width: 100%;
	text-align: center;
}
#top-products .cate-g ul li{
	display: inline-block;
	margin: 35px;
}
#top-products .cate-g li {
	transition: .9s ;
	transform: rotateZ( 0deg ) ;
}
#top-products .cate-g li:hover {
	transform: rotateZ( 360deg ) ;
}
#brand {
	max-width: 1148px;
	background: #fff;
	border-radius: 12px;
	padding: 30px;
	margin: -6% auto 60px;
}
@media screen and (max-width:1700px) {

#brand {
		margin: -10% auto 60px;
}

}
#brand .inner{
	max-width: 1148px;
	width: 100%;
	border-radius: 12px;
	border: 1px dashed #9AD9DA;
	padding: 30px;
}
#brand .brand-l h3{
	text-align: center;
}
#brand .brand-l h3 span{
padding: 0 20px;
display: inline-block;
}
/*
#brand .brand-l h3::before,#brand .brand-l h3::after{
	content:url(/images/common/h3-line.png);
	display: inline-block;
	margin-bottom: 20px;
}
*/

#brand .brand-l h3::before,#brand .brand-l h3::after{
	content:"";
	display: inline-block;
	width: 9%;
	padding: 1px;
	background:#b7b7b7;
	margin: 0 auto 7px;
}

#brand .brand-l{
	padding: 20px 0;
}
#brand .brand-l:first-child{
	padding: 40px 0;
}
#brand .brand-l:last-child{
	padding: 20px 0 40px;
}
#brand .brand-l p{
	text-align: right;
	padding: 16px 0 8px;
}
#brand .brand-n{
	padding:8px 0 32px;
}
#brand .brand-n ul li{
	display: inline-block;
} 
#brand .brand-n table{
	margin: 0 auto;
	
}

/**************************************************************************************************************************
/* 4.products
****************************************************************************************************************************/
/*
#products .pro-g{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
#products .pro-nest{
	flex-basis: 244px;
	height:420px; 
	margin:0 3px 40px;
	padding: 0;
	text-align: center;
}
#products .pro-nest a{
	display: block;
}
#products .pro-nest a:hover{
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
	transition: .3s;
}
#products p.pro-logo{
	width: 244px;
	height: 60px;
	position: relative;
}
#products p.pro-logo img{
	position: absolute;
	top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#products .pro-kana{
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: 500;
	text-align: center;
	padding: 8px 0;
}
#products .pro-txt{
	word-break: break-all;
	padding:0 2% 6%;
}
*/
/**************************************************************************************************************************
/* 4.Company
****************************************************************************************************************************/
#company .map{
	text-align: center;
	padding-bottom: 32px;
}
#company .map p{
	padding: 0 0 8px;
	text-align: left;
	}

/**************************************************************************************************************************
/* 5.business
****************************************************************************************************************************/

#business .step{
	display: flex;
	padding-bottom: 40px;
}
#business .step .ste00{
	max-width: 250px;
	width: 100%;
	height: 315px;
	padding: 2%;
	border: 1px solid #CFCFCF;
	border-right: none;
	box-sizing: border-box;
}
#business .step .ste00:last-child{
	border-right: 1px solid #CFCFCF;
	box-sizing: border-box;
}
#business .step .ste00 img,#business .step .ste-ttl{
	text-align: center;
}
#business .step .ste-ttl{
	font-size: 17px;
	font-size: 1.7rem;
	color: #9ad9da;
	padding: 42px 0 41px;
}
#business .step .col p{
	padding:30px 0 0;
	
}
#business .w100 {
    width: auto;
}

/**************************************************************************************************************************
/* 6.recruit
****************************************************************************************************************************/
#recruit .rec-lead{
	font-size: 17px;
	font-size: 1.7rem;
	color: #9ad9da;
	text-align: center;
	padding-bottom: 16px;
	}

#recruit .rec-mess-g,#recruit .rec-img-g{
	display: flex;
	padding: 24px 0;
}
#recruit .mess2,
#recruit .mess{
	flex-basis: 33.333%;
}
#recruit .mess2 p:nth-child(2),
#recruit .mess p:nth-child(2){
	padding: 16px 10px;
}
#recruit .mess{
	width: 80%;
	text-align: center;
	font-size: 16px;
	font-size: 1.6rem;
	margin: 0 auto;
	line-height: 1.7;
	padding-bottom: 20px;
}
#recruit .mess2{
	padding: 16px;
	border: 1px solid #CFCFCF;
}
#recruit .mess2:nth-child(2){
	border-right: none;
	border-left: none;
}
#recruit .rec-ttl{
	font-size: 1.6rem;
	font-size: 16px;
	text-align: center;
	color: #fff;
	background:url(/images/common/rec-ttl-bg.png) no-repeat center center;
	width: 300px;
	height: 65px;
	line-height: 65px;
}
#recruit .con2{
	padding: 35px 0;
}
#recruit .con2 .lead2{
	text-align: left;
	width: 228px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#recruit .r-img-l{padding-right: 8px;}
#recruit .r-img-r p:first-child{padding-bottom: 8px;}

/**************************************************************************************************************************
/* 7.Mail
****************************************************************************************************************************/
#mail .lead{
	text-align: center;
	line-height: 2;
}
#mail .tel{
	border: 1px solid #CFCFCF;
	width: 38%;
	padding: 28px 2px;
	margin: 24px auto;	
}
#mail .tel-ttl{
	text-align: center;
	padding-bottom: 16px;
}
#mail .tel div{
	width:  68%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
#mail .tel div .pc{
	display: inline-block;
}
#mail .req-comment span,
#underlayer th span{
	margin-left: 8px;
	margin-right: 8px;
	color: #ec73a0;
}
#submit{
    margin: 30px auto 0px;
	}
#mail td{
	line-height: 1.8;
}
#mail td .kubun1,#mail td .kubun2{
	display: inline-block;
}
#mail td .kubun1{
	padding-right: 8px;
}
#mail .con2 p{
	padding-bottom: 24px;
}
#mail .con2 ol{
	list-style: decimal inside;
}

/**************************************************************************************************************************
/* WP
****************************************************************************************************************************/
/*News*/
#info #infolist .date{
	text-align: left;
	color: #9AD9DA;
}
#info #infolist  h3{
	text-align: center;
	margin: 32px auto;
}
#info #infolist .infotxt{
	width: 80%;
	line-height: 1.5;
	margin: 32px auto;
}

/*   #maintop   */
#maintop{
	padding-bottom: 40px;
}

/*カテゴリー 一覧ページ*/
#brand-detail{}

#content #brand-detail.pages{
	display: table;
}
#itemlist ul li{
	display: inline-block;
} 
#itemlist li{
	padding: 16px 0;
	text-decoration: none;
}
#itemlist li{
	padding: 16px 0;
}
#itemlist .item{
	display: block;
}
#maintop #itemlist td{
	padding: 8px 0;
}

/*詳細ページ*/
#detail{}

#detail h2{
	text-align: left;
	padding-top: 16px;
}
#detail h3{
	text-align: left;
	padding: 40px 0 10px;
}
#detail h3,#detail .detail p{
	font-size: 13px;
	font-size: 1.3rem;
}
#detail .detail-txt{
	line-height: 1.5em;
}
#detail .dotto,
#detail .dotto2{
	padding:3px 0;
}
#detail .w-10{width: 10%;}
#detail .w-15{width: 15%;}
#detail .w-35{width: 35%;}
#detail .w-75{width: 75%;}
#detail .w-85{width: 85%;}

/* mod_gallery(複数設置の場合)
-----------------------------------------*/
.mod_gallery{
 	margin: 20px 24px 0 0;
}

#item,.mod_gallery_navi ul{
 display: flex;
font-size: 13px;
font-size: 1.3rem;
justify-content: space-between;
}

/* .mod_gallery_navi */
.mod_gallery_navi ul{
	width:420px;
	flex-wrap: wrap;
}
.mod_gallery_navi li{
	width:30%;
	height:30%;
	background:none;
	list-style:none;
	margin-bottom: 16px;
}
.mod_gallery_navi li a{
	width:30%;
	height:30%;
}

.mod_gallery_navi li a:link    {}
.mod_gallery_navi li a:visited {}
.mod_gallery_navi li a:hover   {opacity:0.8;}
.mod_gallery_navili a:active  {opacity:0.8;}
/* IE用 ↓*/
.mod_gallery_navi li a:hover img {filter:alpha(opacity=80);}
.mod_gallery_photo{
	width:420px;
	height:420px;
	margin-bottom:50px;
	position: relative;
}
.mod_gallery_navi #border0::before{
	  content: "";
    display: block;
    padding-top: 100%;
}

.mod_gallery_navi #border0 img{
/*
	max-width:420px;
	width: 100%;
	height:auto;
	margin:0 auto;
*/
}
.mod_gallery_photo img{
	position:absolute;
	top:0;
	left: 0;
	max-width:420px;
	width: 100%;
	height: auto;
}

/*
.mod_gallery_photo::before {
    content: "";
    display: block;
    padding-top: 100%;
}
*/


/*
.mod_gallery_navi #border0 img ::before{
	border:none;
}
*/
#maintop th,
#maintop td{
 border: none;
padding: 0;
}
#item th{width: 20%;}
/*
#item .other{
	padding-top: 16px;
}
*/

/*カタログ*/

#underlayer #catalog td{
border-bottom: none;
}
#catalog .catalog-btn{
	padding-top: 24px;
}