@charset "utf-8";

/* -----------------------------------------------
body
header
menu
contents
footer
anchor
clear_float 
----------------------------------------------- */

/*body*/


body {
	background-color:#FFFFFF;
	color: #222222;
	}

body#home {
	margin: 0 auto;
	padding: 0;
	text-align:left;
	}

h1,h2, h3, h4, dl,dt,dd,ul,li{
	margin: 0;
	padding: 0;
	}

ol,ul{
	list-style:none;
	}
    
p {
	margin: 10px 0;
	}

.hidden {
	display: none;
	}

/* -- clear float -- */

.clr {
	clear: both;
	float: none;
	display: inline-block;
	}
	
.clr::after{
	content: "";
	display: block;
	clear: both;
	}

img {
	border: 0;
	}
	
.txt-small{
	font-size:11px;
    font-size:1.25rem;
	line-height:1.25em;
    margin:0 2px;
	}



@media screen and (min-width: 670px) { /* 897px以上*/
  .sp_only { display:none; }
  .pc { display:block; }
}

@media screen and (min-width: 461px) { /* 421px以上*/
  .sp_only { display:none; }
}

@media screen and (max-width: 460px){   
  .sp_only { display:block; }
  .pc { display:none; }
}

sub{ font-size:2.2rem; }

/*header*/

#header {
	/*position:relative;*/
	margin: 0;
	padding: 0;
	width:100%;
	/*height:137px;*/
	background-color:#000000;
	border:0px solid #0006d4;
    position:fixed;
    top:0;
    left:0;
    z-index:24;
	}

#header .logo img{
	margin-top:12px;
	margin-left:10px;
	border:0;
	}



/*navigation*/

/*　画面サイズが896pxまでははここを読み込む　*/
@media screen and (max-width: 896px) {
#header .logo{
    width:100%;
	height:78px;
    border-bottom:4px solid #ac9444;
	}

#contents {
    margin: 0 0 40px;
	padding-top: 79px; 
	width: 100%;
    text-align:center;
	}

#navi{
width: 90%;
margin:12px auto;
background: rgb(40,40,40);
z-index: 9999;
}


#navi ul{
  margin:0 auto;
  padding: 0 ;
  width:100%;
  display: -webkit-flex;
  display:flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  color:#FFF;
}

#navi li {
  border-bottom:1px solid #363636;
  padding:10px 5px 10px 30px;
}

#navi li a{
   color:#FFF;
   display:block;
}

#navi li.mail{
   display:none;
}

#navi li.lang_switch a{
   display: inline;
   font-size:1.25rem;
}

#navi li.sns a{
   display: inline;
   font-size:2.2rem;
   margin:0 5px;
}

#navi li:last-child {
border-bottom:0px;
}


#nav-drawer {
position: absolute;
top:1px;
right:0;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  content:"*";display: inline-block;
  width: 76px;
  height: 76px;
  vertical-align: middle;
  border:0px solid;
  background:url(../img/toggle_bt_menu.jpg) no-repeat  0  0;
  background-size: 76px auto;
}


/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}


/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 80%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 320px;/*最大幅（調整してください）*/
  height: 100%;
  padding-top:5px;
  background: rgb(40,40,40);/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

#nav-sponly {
  width:90%;
  margin:15px auto;
  color:#FFF; 
  border:0px solid #ff680d;
}

#nav-sponly h3 {
	font-family: 'Noto Serif JP', serif;
    font-weight:lighter;
    font-size:1.4rem;
    margin-top: 15px;
	margin-left:30px;
	}

#nav-sponly h3::before{
	content:'Xaos Co.,Ltd.';
	display:block;
	font-size:1.8rem;
}

#nav-sponly .mail_bt {
    width:80%;
    /*min-width:200px;*/
    margin: 0 auto;
    text-align:center;
    border-radius:25px;
    font-size:1.5rem;
}

#nav-sponly .mail_bt a{
    display:block;
    background-color: #FFFFFF;
    border-radius:25px;
    color:#ac9444;padding:10px;
}

#nav-sponly .mail_bt a:hover{
    display:block;
    background-color: #ac9444;
    color:#fff;
}



/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
}



}

/*　画面サイズが897pxからはここを読み込む　*/
@media screen and (min-width: 897px) {
#header .logo{
    width:100%;
	height:76px;
    border-bottom:4px solid #ac9444;
	background:url(../img/ah_sublogo.gif) no-repeat  center right 18px ;
	}

#contents {
    margin: 0 0 50px;
	padding-top: 130px; 
	width: 100%;
    text-align:center;
	}

/*navigation*/

#nav-drawer {
margin:0 auto;
}


/*チェックボックス等は非表示に*/
.nav-unshown,#nav-open,#nav-close,#nav-sponly {
  display:none;
}


/*中身*/
#nav-content {
  width: 100%;
  padding-top:1px;
  border-bottom:3px solid #4b4b4b;
}

#navi{
width: 100%;
height:43px;
margin-top:1px;
padding:0;
z-index: 9999;
background: rgb(40,40,40);
background: linear-gradient(180deg, rgba(40,40,40,1) 0%, rgba(75,75,75,1) 100%);
border-top:1px solid #363636;
border-bottom:1px solid #3c3c3c;

}


#navi ul{
  margin:0 auto;
  width:98%;
  display: -webkit-flex;
  display:flex;
　justify-content: space-between;
}


#navi li {
   width: 20%;
   height:42px;
   text-align: center;
   border-left:1px solid #5c5c5c;
   border-right:1px solid #3c3c3c;
   white-space: nowrap;
   line-height: 42px;
}

#navi li a{
   color:#FFF;
   display:block;
}

#navi li.homebt{
   display:none;
}


#navi li.lang_switch{
   border-left:1px solid #5c5c5c;
   border-right:0px;
   flex-basis:130px;
}

#navi li.lang_switch {
   text-align:right;
   font-size:1.3rem;
   font-weight:300;
   color:#999;
}

#navi li.sns {
   flex-basis:130px;
   font-size:2.0rem;
   border-left:0;
   border-right:0; 
   order:8;/* 末尾に移動 */
}

#navi li.lang_switch a {
   display: inline;
   border:0px solid #0f0f0f;
   padding:0 0.3em/**/
}

#navi li.sns a{
   display: inline;
   padding:0 0.4em/**/
}

}




/*----------------------------*/	 
/*contents*/

#main {
    margin:15px auto;
	padding: 0;
	border:0px solid #E00033;
	width: 100%;
    text-align:left;
	}

#container{
  width: 90%;
  padding: 0;
  margin: 20px auto 30px;
  text-align:left;
}

/* pankuzu */
#pan {
	width:100%;
    margin: 0 auto;
	padding: 15px 0 5px;
	font-size:1.4rem;
	text-align:left;
	}

#pan p{
	margin: 0 auto;
    width:95%;
	}


/* main_area_h3*/

#main h3 {
  position: relative;
  display: inline-block;
  padding: 0 80px;
  margin:8px 0 15px;
  }

#main h3:before {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 65px;
  height: 3px;
  background-color: #b3a065;
  }

#main h3:before {
  left:0;
}

#main h4 {
  padding: 0 0.5em;/*上下 左右の余白*/
  background: transparent;/*背景透明に*/
  border-left: solid 6px #b3a065;/*左線*/
}

h5 {
	margin:15px auto 5px;
	padding: 5px 20px;
	color:#fff;
	background-color:#999;
	border:1px solid #999;
    border-radius:4px;
	}

#main #spec,
#main #speaker,
#main #multipurpose,
#main #rca,
#main #power,
#main #jumper,
#main #spk2,
#main #xlrcable,
#main #shop-home,
#main #shop-car{
	width:90%;
    margin:40px auto 20px;
    margin-top:-160px;
    padding-top:160px;
	}


/*　画面サイズが896pxまでははここを読み込む　*/
@media screen and (max-width: 896px) {
#main h3 {
  position: relative;
  display: inline-block;
  padding: 0 50px;
  margin:8px 0;
  }

#main h3:before {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 35px;
  height: 3px;
  background-color: #b3a065;
  }

#main h3:before {
  left:0;
}


#main #spec,
#main #speaker,
#main #multipurpose,
#main #rca,
#main #power,
#main #jumper,
#main #spk2,
#main #xlr,
#main #shop-home,
#main #shop-car{
	width:90%;
    margin:40px auto 20px;
    margin-top:-120px;
    padding-top:120px;
	}

}



hr{
	width:90%;
	margin: 45px auto 10px;
    padding: 0px;
    height: 0px;
    border:0;
    border-top:3px solid #E0E0E0;
}




/*----------------------------*/
/* new_products_list */

#new_products,
#products {
  width:90%;
  margin: 0 auto;
  padding: 0.2em;
  display: grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 1.8em;
  -webkit-box-sizing: border-box;  /* Chrome  */
  -moz-box-sizing: border-box;     /* Firefox */
  box-sizing: border-box;
}

#detail {
  width:90%;
  margin: 0 auto;
  padding: 0.2em;
  display: grid;
  grid-gap: 0 3.0em;
  grid-template-columns: 1fr minmax(320px, 1fr);
  grid-auto-rows:auto;
  -webkit-box-sizing: border-box;  /* Chrome  */
  -moz-box-sizing: border-box;     /* Firefox */
  box-sizing: border-box;
 }


#new_products > div,
#products > div {
  position:relative;
  overflow: hidden; 
  width: 23.5%;
  border: 1px solid #cdcdcd; 
  float: left;
  margin: 10px 15px 10px 0;
  padding: 0.2em;
  -webkit-box-sizing: border-box;  /* Chrome  */
  -moz-box-sizing: border-box;     /* Firefox */
  box-sizing: border-box;
}

#detail > div:last-child {
  margin-right: 0;
}

#detail > div {
   overflow: hidden;
   width:48%;
   min-width:300px;
   margin-right: 20px;
   float: left;
  -webkit-box-sizing: border-box;  /* Chrome  */
   -moz-box-sizing: border-box;     /* Firefox */
   box-sizing: border-box;
}


#detail > div:last-child {
  margin-right: 0;
}

#detail div.ins_wrap {
  overflow-x: auto;
  white-space: nowrap;
  }
  
#detail div.ins_wrap .scroll{
	font-size:11px;
    font-size:1.25rem;
	line-height:1.25em;
    margin:5px 0;
    color:#696969;
  }

@media(max-width: 896px){
#new_products,
#products{
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  }


#new_products > div,
#products > div {
  position:relative;
  overflow: hidden; 
  border: 1px solid #cdcdcd;
  width:47%;
  float: left;
  margin: 0 1.16% 20px 1.17%;
  padding: 0.2em;
  -webkit-box-sizing: border-box;  /* Chrome  */
  -moz-box-sizing: border-box;     /* Firefox */
  box-sizing: border-box;
}

#detail {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

#detail > div {
  width:100%;
  float: left;
  margin: 0px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;  /* Chrome  */
  -moz-box-sizing: border-box;     /* Firefox */
  }
  
}



/*---IE only---*/
@media all and (-ms-high-contrast: none) {


/*float:left clear*/
#new_products::after,
#products::after,
#detail::after{
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}

}

/*grid対応ブラウザ用*/
@supports (display: grid) {

#new_products,#products,#detail{ margin: 0 auto;}

#new_products > div,
#products > div,
#detail > div{
        width: auto;
        margin: 0;
    }
    }


#new_products img,
#products img,
#detail img {
  width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
  display: block;
}

#new_products .item p.txt{
    font-size:1.25rem;
	line-height:1.4;
    margin: 0.6em 0.5em 0.3em;
    color:#666666;
	}


#more_bt{
	display:block;
    position:absolute;
    bottom:0.4em;
	right:10px;
    font-size:1.4rem;
    font-family: 'Noto Sans JP', sans-serif;
}

#more_bt::after {
    font-family: "Font Awesome 5 Free";
    content: '\f101';
    font-weight: 600;
    margin-left:5px;
}


/* ラベル部分 右上に表示 */
.new_item{
	position:absolute;
    top:0px;
	right:0px;
	z-index:1;
	}

.new_item::before{
    content: "";
    top: 0;
    right: 0;
    border-bottom: 3.5em solid transparent;
    border-right: 3.5em solid #cc9900; 
    position: absolute;
    z-index: 100;
	} 
.new_item::after {
    content: "New";
    display: block;
    top: 8px;
    transform: rotate(45deg);
    color: #fff;
    right: 2px;
    position: absolute;
    z-index: 101;
    font-size:1.4rem;
    font-family: 'Open Sans', sans-serif;
	}

/*----------------------------*/
/* pdoucts_page_area */

#products-main-img img {
	display:block;
    width: 100%;
    margin-top:15px;
	object-fit: cover;
 }

#products_name {
    margin: 0;
	padding: 10px 30px 15px;
	background-color:#2d2d2d;
    border-bottom:5px solid #e5e5e5;
	text-align:left;
	color:#FFFFFF;
	}

#products_name h2{
	display: inline-block;
    margin: 12px 0;
	line-height: 1.0;
    vertical-align: middle;
}

#products_name h2 span{
	font-size:60%;
}
    

#products_name p{
   margin: 2px 0;
   font-family: 'Open Sans', sans-serif;
   letter-spacing: 0.1em;
}
    

/*NEWマーク*/
.boxes{
  margin: 5px 0px 0px;
  display: flex;
}
.box{
  text-align:center;
  padding: 5px 10px;
  margin-right:5px;
  font-family: 'Open Sans', sans-serif;
}

.new_mark{
  background-color: #cc9900;
  width: 50px;
}

.overseas{
  background-color: #2c5016;
  width:115px;
}

.end_mark{
  background-color: #2d5a8d;
  width:100px;
}


@media(min-width: 641px){
#products_name h2 br{
	display:none;
}
}

/*名称 右横に表示 
.new_mark::after,
.end_mark::after{
  position:absolute;
  top:0;
  z-index:1;
  display: inline-block;
  text-align:center;
  padding: 8px 10px;
  margin-left:20px;
  font-family: 'Open Sans', sans-serif;
}

.new_mark::after {
  content: 'NEW';
  right:-30%;
  font-size:50%;
  background-color: #cc9900;
}

.end_mark::after {
  content: '生産終了';
  right:-22%;
  font-size:40%;
  background-color: #2d5a8d;
}*/

/*.overseas {  display: inline-block;  padding: 8px 10px;
  background-color: #2c5016;
}*/
/*.overseas::after {
  content: '海外専用モデル';
  right:-45%;
  font-size:40%;
  background-color: #2c5016;
}*/

@media(max-width: 640px){

/*NEWマーク*/
.boxes{
  margin: 5px 0px 0px;
  display: flex;
}
.box{
  text-align:center;
  padding: 5px 10px;
  margin-right:5px;
  font-size:1.2rem;
  font-family: 'Open Sans', sans-serif;
}

.new_mark{
  background-color: #cc9900;
  width: 30px;
}

.overseas{
  background-color: #2c5016;
  width:85px;
}

/*
.new_mark::after,
.end_mark::after{
  position:absolute;
  top:0;
  right:-8%;
  z-index:1;
  display: inline-block;
  text-align:center;
  padding: 6px 10px;
  font-size:1.2rem;
  font-family: 'Open Sans', sans-serif;
}

#products_name p.overseas{
   margin: 5px 0 0;
   font-size:1.2rem;
   display: block;
   width:88px;
   padding: 5px 10px;
   background-color: #2c5016;text-align:center;
	}*/

}


#products_copy {
    margin: 0 0 30px;
	padding: 20px 30px;
	border: 0px solid #00cdcd;
	font-family: 'Noto Serif JP', serif;
	font-size: 32px;/* IE8以下とAndroid4.3以下用フォールバック */
    ｚ(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 28px~36pxで可変*/
    line-height: 1.4;
	text-align:left;
    letter-spacing: 0.02em;
	}

@media(max-width: 896px){
#products_copy {
    margin: 0 0 25px;
	padding: 20px 30px;
	border: 0px solid #00cdcd;
	font-family: 'Noto Serif JP', serif;
	font-size:2.4rem;
	font-size:24px;
	text-align:left;
    letter-spacing: 0.02em;
	}

#products_copy br{
    display:none;
	}
}

.detail_list {
	margin:0px auto 20px;
	padding: 0.2em;
	/*text-align: justify;*/
	}

.detail_list p {
    text-indent: -1em;
    margin-left: 1.0em;
    padding:4px 0;
}
.detail_list p::before {
    content: '●';
    font-size:70%;
    margin-right:0.5em;
}
    
.detail_list .list li{
display:inline-block;
margin-left:20px;
}

.detail_list .list li img{
max-width:155px !important;
}


@media(max-width: 960px){
.detail_list .list li{
display:inline-block;
margin-left:5px;
}

.detail_list .list li img{
max-width:90px !important;
}
}

.options {
	margin: 5px auto;
	padding: 0.5em 2.0em;

	}

.options p{
		font-family: 'Noto Serif JP', serif;
		font-weight:bolder;
	}

.notes {
	margin: 0px auto;
	padding: 0;
	border: 0px solid #cdcdcd;
    font-size:1.3rem;
    color:#696969;
    text-align: justify;
	}

.notes p {
    text-indent: -1em;
    margin-left: 1.0em;
    padding:2px;
}
.notes p::before {
    content: '※';
}


.right{
 text-align:right;}


/* products_message */

#products_message{
    margin: 40px 0 0;
    background:#f5eed1;
	border-top:1px solid #f3eed1;
	border-bootom:1px solid #f3eed1;
	}

#products_message .txt_area{
    margin: 0 auto ;
    padding:25px;
	width:80%;
    text-align:center;
	}

#products_message .txt_area p{
    font-family: 'Noto Serif JP', serif;
    margin: 20px 0;
    text-align:left;	font-weight:500;
	}


/*----------------*/
/* メージ内リンク */
/*----------------*/

#page-link ul{
  width:85%;
  margin: 20px auto 5px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;  /* Chrome  */
  -moz-box-sizing: border-box;     /* Firefox */
   text-align:center;
    }

#page-link li{
  margin: 2px;
  white-space: nowrap;/**/
    }

#page-link li a{
  display:block;
  border:1px solid #cdcdcd;
  padding:0.6em 0.8em 0.4em;
  border-radius:3px;
  background: rgb(237,237,237);
  background: linear-gradient(0deg, rgba(237,237,237,1) 0%, rgba(254,254,254,1) 76%);
    }

/*----------------*/
/* table */
/*----------------*/

table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  text-align:left;
  }

table tr{
  border-top: solid 1px #cdcdcd;
}

table th,
table td{
  padding: 5px 3px 5px 6px;
  text-align:left;
}


/*----------------*/
/* th,td */

table.spec {
  font-size:1.4rem;
  table-layout: fixed;
}

table.spec th {
  width: 20% ;
  font-weight:normal;
}

table.spec td{ 
 border-left: 1px solid #cdcdcd;
}

table.spec td.noborder{
  border-left: 0px;
}

/*table.spec.takumi{
  font-size:1.4rem;
}*/

table.spec.takumi td.bgc{
  background-color: #eee;
  font-size:1.15rem;
  text-align: center;
  padding: 5px;
}

@media(max-width: 460px){
 table.spec th { width:115px; }
 table.spec.takumi { font-size:1.3rem; }
 table.spec.takumi th { width:75px;font-size:1.2rem; }
}

/*------------------*/

table.ins {
  font-size:78%;
}

table.ins th{
  background:#fffdf5;
  text-align:center;
  white-space: nowrap;
  width: 15%;
}

table.ins td{
  border-left: solid 1px #cdcdcd;
  text-align:center;
  white-space: nowrap;
  width: 23%;
}

.tlt{
  font-weight:bold;
}

/*------------------*/

table.price{
 max-width: 370px;/**/
}

table.price tr{
  border-top: 0px;
}

table.price th{
    width: 10%;
    border-left: solid 3px #cdcdcd;
}

table.price td{
  width: 40%;
  padding: 2px;  white-space: nowrap;
}

/*------------------*/

.corporate  {
 width: 80%;
 margin: 0 auto;
}

.corporate th  {
 width: 30%;
 min-width:160px;
 text-align: left;
 padding:16px 35px;
}

.corporate td  {
 padding:18px 25px 18px 5px;
}

.corporate td ul.list{
	list-style:disc;
    margin-left:20px;
	}
    
.corporate td ul li{
	margin-bottom:15px;
	}

.corporate td ul li:last-child{
	margin-bottom:0px;
	}

.corporate tr:last-child{
  border-bottom: solid 1px #cdcdcd;
}


/*------------------*/


.shop_list {
 width: 90%;
 margin: 0 auto;
}

.shop_list th  {
 width: 35%;
 min-width:180px;
 text-align: left;
 /*white-space: nowrap;*/
 padding:15px 20px;
}

.shop_list td  {
padding:15px 20px 15px 5px;
}


.corporate tr:last-child{
  border-bottom: solid 1px #cdcdcd;
}

.shop_list tr:first-child{
  border-top: solid 0px #cdcdcd;
}


@media only screen and (max-width:1200px){
.corporate,
.shop_list { margin: 0;  width: 100%;}
.corporate th,
.corporate td,
.shop_list th,
.shop_list td{
    width: 95%;
    display: block;
    border-top: none;
    }

.corporate th,
.shop_list th  {
 padding:8px 15px 4px;
}


.corporate td,.shop_list td  {
 padding:4px 15px 8px;
}

}



/*shop_list_box*/


/*ボックス全体*/

.accbox {
    margin: 0 auto;
    padding: 0;
    width: 100%;/*最大幅*/
    z-index:99;
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 2px 0;
    padding : 10px 28px;
    font-weight: bold;
    cursor :pointer;
    transition: all 0.5s;
    font-size:1.8rem;
	color:#666;
	font-weight:normal;
	border:1px solid #f4e4b0;
    border-radius:4px;
	background-color:#f4e4b0;
}

/*アイコンを表示*/
.accbox label:before {
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    font-weight: 900;
    padding-right: 12px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#ac9444;
    color:#FFF;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 0;
    background: #fff;
    opacity: 1;
}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    font-family: "Font Awesome 5 Free";
    content: '\f107';
    font-weight: 600;
}

/*アイコンを入れ替える*/
.cssacc:checked + label {
    background :#696969;
	border:1px solid #696969;
    color:#FFF;
}


/*footer*/

#footer {
    margin: 0;
	padding: 30px 0 0;
	background-color:#2e2e2e;
	text-align:center;
	color:#FFF;
	}

#footer h3 a{
	font-family: 'Noto Serif JP', serif;
    font-size:2.0rem;
    margin: 10px auto;
    color:#FFF;
	}

#footer h3 a::before{
	content:'Xaos Co.,Ltd.';
	display:block;
	font-size:3.2rem;line-height:1.2;
}


/* address */
#footer address {
  width:98%;
  margin: 15px auto 30px;
  display: -webkit-flex;
  display: flex;
  padding-bottom:15px;
  border-bottom:1px solid #3c3c3c; 
}

#footer address > p {
  margin: 0.2em 0.6em;
  font-style:normal;
}


.honsha {
  width: 50%;
  text-align:right;
	}

.kanto {
  width: 50%;
  text-align:left;
}

#footer address span {
	color:#866811;
     font-weight:400;
	}

#footer address br {
	display:none;
	}

@media only screen and (max-width: 897px) {
#footer address {
  width:90%;
  display: block;
  padding-bottom:15px;
  border-bottom:1px solid #3c3c3c;
  margin: 15px auto 30px;
}

#footer address > p {
  margin: 0.4em auto ;
  font-style:normal;
}

.honsha {
  width: 100%;
  text-align:center;
	}

.kanto {
  width: 100%;
  text-align:center;
}

#footer address span {
	color:#866811;
    font-weight:300;
	}

#footer address br {
	display:inline-block;
	}


}


#contact p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size:1.4rem;
    font-size:14ox;
    font-weight:400;
}

#contact .mailbtn {
    width:50%;
    min-width:320px;
    margin: 0 auto;
    text-align:center;
    border-radius:25px;
    font-size:2.0rem;
    font-size:20px;
    font-weight:bolder;
    font-family: 'Noto Sans JP', sans-serif; 
}

#contact .mailbtn a{
    display:block;
    background-color: #FFFFFF;
    border-radius:25px;
    color:#ac9444;
    padding:10px;
}

#contact .mailbtn a:hover{
    display:block;
    background-color: #ac9444;
    color:#fff;
}


#footer .sns_bt{
  margin: 5px 8px 15px;
}

#footer .sns_bt::before{
   content:'＼ Follow Us! ／';
   display:block;
   font-size:1.2rem;
   letter-spacing:0.08em;
   font-family: 'Noto Sans JP', sans-serif;
}

#footer .sns_bt a{
  display:inline-block;
  margin: 15px 10px;
  color:#FFF;　border:1px solid;
}

#footer .sns_bt a:hover{
  color:#ac9444;
}

#footer .copyrights{
	width:100%;
    height:36px;
    margin-top:20px;
    padding-top:15px;
    text-align:center;
    color:#FFF;
	font-size:12px;
	font-size:1.2rem;
    background-color:#000000;
    border-top:4px solid #ac9444;
	}
	 


/* Pagetop-btn*/

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;background: #DDDDDD;
}

#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 40px;text-align:center;padding-top:10px;
  text-decoration: none;
color:#666666;
}/**/



/*anchor*/
a:link { color: #3366CC; text-decoration:none; }
a:visited { color: #006699; text-decoration:none; }
a:hover,#navi a:hover { color: #ac9444;  text-decoration:none; }
a:active { color: #009944;  text-decoration:none; }


/*image_alpha*/
a:hover img {
	-moz-opacity:0.75;
	opacity:0.75;/*mozilla*/
	filter: alpha(opacity=75);/*IE*/
	-ms-filter: alpha(opacity=75);
    }