@media screen and (max-width: 999px) {
/*-----------------------------------------------
__Default Clear
-----------------------------------------------*/
body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-size: 90%;
}
/*-----------------------------------------------
__layout
-----------------------------------------------*/
#main{
  margin-left: 0;
}
.wrap{
  max-width: 93%;
  padding: 60px 0;
}
.wrap02{
  max-width: 90%;
  margin: 0 auto;
}
img{
  max-width: 100%;
  height: auto;
}
.sp_none{
  display: none;
}
.pc_none{
  display: block !important;
}
.sp_none.carousel{
  display: none !important;
}
/*-----------------------------------------------
__h
-----------------------------------------------*/
h1{
  font-size: 2.6em;
  letter-spacing: 0.26em;
}
h2{
  font-size: 1.9em;
  margin-bottom: 10px;
}
/*-----------------------------------------------
__a
-----------------------------------------------*/
.a01{
  display: block;
  width: 100%;
  background: #fff;
  color: #333333;
  padding: 34px 0;
  font-size: 1.2em;
  transition: all .4s;
}
.a01 span{
  padding-left: 65px;
  position: relative;
}
.a01 span::before{
  content: '';
  display: inline-block;
  width: 40px;
  height: 2px;
  background: rgba(222,205,193,0.5);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.a01:hover{
  background: rgba(255,255,255,0.4);
}
/*-----------------------------------------------
__table
-----------------------------------------------*/
table{
  max-width: 100%;
  margin: 40px auto !important;
  border-collapse: collapse;
}
.scroll-table{
  overflow: auto;
  white-space: nowrap;
}

.tb01 td span{
  display: block;
  padding-left: 0;
}

.tb01.sm_bl,
.tb01.sm_bl > tbody,
.tb01.sm_bl > tbody > tr{
  display: block;
}
.tb01.sm_bl > tbody > tr > th,
.tb01.sm_bl > tbody > tr > td{
  display: block;
  width: 100%;
  text-align: left;
}
.tb01.sm_bl > tbody > tr > th{
  font-size: 80%;
  border-top: rgba(83,62,54,0.2) 1px solid;
  border-bottom: none;
  padding: 15px 0 5px 0;
  color: #ac9084;
}
.tb01.sm_bl > tbody > tr > td{
  padding: 0 0 15px 0;
  border-bottom: none;
}


/*-----------------------------------------------
__header
-----------------------------------------------*/
.header_flex{
  flex-direction: column-reverse;
}
header .header_img{
  width: calc(100%);
  height: 83vh;
}
header .header_img p{
  font-size: 1.2em;
  line-height: 1.8em;
  width: 90%; 
}
.header_flex_right{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  /*padding: 10px 15px;*/
  padding: 0;
  background: #fff;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
}

.header_flex .navi{
  display: none;
}

/*__hrader_catalog
-----------------------------------------------*/
.header_catalog, .u_header_menu .header_catalog{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 60px;
  height: 60px;
  background: #fff;
  position: relative;
  z-index: 20;
}
.header_catalog a{
  align-items: center;
}
.u_header_menu .header_catalog a{
  width: 35px;
  height: 35px;
}
.header_catalog span{
  display: none;
}
.header_catalog a::before, .u_header_menu .header_catalog a::before{
  display: inline-block;
  content: '';
  width: 35px;
  height: 35px;
  background: url(../images/header_catalog_img.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
/*__scroll
-----------------------------------------------*/
.scroll{
  display: none;
}
/*__header_flex2(お知らせ・ロゴ)
-----------------------------------------------*/
.header_flex2{
  flex-direction: column-reverse;
  height: inherit;
}
.news{
  width: calc(100%);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10px 20px;
}
.news dt{
  padding: 0 15px;
  margin-bottom: 15px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.news dd{
  width: calc(100%);
  height: 60px;
  padding-left: 5px;
}
.news dd li{
  margin-bottom: 10px;
}
.news dd li span{
  margin-right: 30px;
}

.index_logo{
  display: none;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 100%;
  background: #5f4840;
  position: relative;
  overflow: hidden;
}
.index_logo img{
  display: inline-block;
  max-width:100%;
  backface-visibility: hidden;
  position: relative;
  transition: all .4s;
}
.index_logo::before{
  content: '';
  display: inline-block;
  width: 580px;
  height: 355px;
  background: rgba(35,20,16,0.2);
  transform: rotate(-37deg);
  position: absolute;
  top: -155px;
  left: -460px;
}
.index_logo::after{
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("../images/bg_logo_noise.png");
  background-position: top 85px right 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
}

.u_header_menu {
  align-items: flex-start;
}
.u_header_menu .logo{
  padding-left: 0;
  padding: 5px;
  box-sizing: border-box;
  width: calc(100% - 120px);
}
.u_header_menu .nav{
  flex-direction: column;
}
.u_header_menu .header_nav{
  order: 3;
}
.u_header_menu .header_catalog{
  order: 2;
}
/*-----------------------------------------------
__main
-----------------------------------------------*/
.products .wrap{
  padding-top: 80px;
}
.products .introduction{
  background: url("../images/bg_logo_img.png") no-repeat;
  background-position: top 80px right 0;
}
.intro_txt{
  flex-direction: column;
  align-items: flex-start;
}
.intro_txt p{
  margin-left: 0;
}
.smf_introduction_slider{
  margin: 40px auto 20px;
}
/*__tsuki_ita
-----------------------------------------------*/
.tsuki_ita{
  font-size: 1.05em;
  padding: 80px 0;
}
.tsukiita_txt{
  position: relative;
  padding: 2em 0 50px !important;
  flex-direction: column;
  justify-content: space-between;
}
.tsukiita_txt p{
  margin-top: 10px;
}
.tsuki_ita .a01{
  margin-top: 50px;
}
.tsukiita_img{
  position: relative;
}
/*__tosou
-----------------------------------------------*/
.tosou ul{
  flex-direction: column;
  font-size: 1em;
}
.tosou ul li{
  width: 100%;
  padding: 30px 12px;
}
.tosou ul li:nth-child(2){
  border-top: none;
}
/*-----------------------------------------------
__下層ページメイン
-----------------------------------------------*/
.u_main{
  padding-top: 0px;
}
/*-----------------------------------------------
__visual_img
-----------------------------------------------*/
.visual{
  padding: 100px 0 0 3%;
}

.concept{
  font-size: 1.2em;
  padding-right: 0;
}

.products .dl01 ul{
  width: 100%;
  justify-content: space-between;
}
.products .dl01 ul li{
  width: 31%;
}
.products .dl01 ul li img{
  width: 100%;
}
.products_tsuki_ita .fl_box{
  flex-direction: column;
  align-items: flex-start;
}
.products_tsuki_ita .fl_box h1{
  margin-bottom: 10px;
}
.products_tsuki_ita .tsuki_ita_type{
  flex-direction: column;
}
.products_tsuki_ita .tsuki_ita_type img{
  max-width: 100%;
  height: auto;
}
.products_tsuki_ita .tsuki_ita_type p{
  margin-left: 0;
}

.case dd img{
  width: 100%;
}
.case dd img:not(:last-of-type){
  margin-bottom: 20px;
}

.page_link{
  width: 90%;
  justify-content: space-between;
}
.page_link > li{
  width: 48%;
  margin-right: 0;
}

.k_youchien{
  flex-direction: column;
}
.k_youchien_img {
  position: relative;
  top: 0;
  left: 0;
}
.k_youchien dd{
  width: 100%;
}
.k_youchien dd img{
  max-width: 100%;
}

.access .company_img{
  flex-direction: column;
}
.access .company_img p{
  width: 100%;
  margin-bottom: 10px;
}
.access .company_img ul.fl_box li:first-child{
  margin-left: 0;
}

.footer_inner .fl_box{
  flex-direction: column;
}
.company_area{
  margin: 0 0 20px 0;
}
.catalog{
  margin: 20px auto 10px 0;
}

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

.header_nav{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: #aa3819;
  margin-right: 0 !important;
}
.nav-button{
  display: block;
  cursor: pointer;
}
.nav-wrap{
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  z-index: 10;
  background-color: rgba(250,247,242,0.98);
  width: 100%;
  height: 100%;
}
.nav-wrap .nav{
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
.nav-wrap li{
  display: block;
  margin: 2em;
}
.u_header_menu .nav li{
  margin: 1em 2em;
}
.u_header_menu .nav li:first-of-type{
  margin-top: 2em;
}
/*メニューボタンのエフェクト*/
.nav-button,
.nav-button span{
  display: inline-block;
  transition: all 0.4s;
  box-sizing: border-box;
}
.nav-button{
  z-index: 20;
  position: relative;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #aa3819;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.nav-button span{
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
}
.nav-button span:nth-of-type(1){
  top: 20px;
}
.nav-button span:nth-of-type(2){
  top: 50%;
  transform: translateY(-50%);
}
.nav-button span:nth-of-type(3){
  bottom: 20px;
}
.nav-button.active span:nth-of-type(1){
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}
.nav-button.active span:nth-of-type(2){
  opacity: 0;
}
.nav-button.active span:nth-of-type(3){
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}
}

@media screen and (min-width: 0px) and (max-width: 640px) {/*smart*/
  #company h3 small.right{
    float: none;
  }
  .scroll-table{
    overflow-x: scroll;
    white-space: nowrap;
    padding-bottom: 15px;
  }
  .scroll-table::-webkit-scrollbar {
    height: 3px;
  }
  .scroll-table::-webkit-scrollbar-thumb {
    background: #5f4840;
    border-radius: 10px;
    box-shadow: none;
  }
  .scroll-table::-webkit-scrollbar-track {
    background: #decdc1;
    box-shadow: none;
    border: none;
  }

  .flow_flex{
    flex-direction: column;
    align-items: center;
  }
  .flow {
    margin-bottom: 30px;
  }
  .flow li{
    font-size: 100%;
  }
  .flow_img{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .flow_img li{
    width: 48%;
    margin-bottom: 10px;
  }
  .products .dl01 ul li{
    width: 48%;
  }
  .products .dl01 ul li img{
    height: 120px;
  }

  /*-----------------------------------------------
__pagetop
-----------------------------------------------*/
.pagetop{
  display: none;
}
/*-----------------------------------------------
__footer
-----------------------------------------------*/
footer.fl_box{
  flex-direction: column;
}
.footer_inner{
  width: calc(100%);
  padding: 70px 3.5% 30px;
  text-align: center;
}
.footer_inner::before{
  transform: rotate(-48deg);
  top: -130px;
  left: -300px;
}
.footer_inner .fl_box{
  flex-direction: column;
  align-items: center;
}
.company_area p{
  font-size: 1em;
  text-align: left;
}
.company_area .number{
  margin-top: 12px;
}
.number_margin, .address_margin{
  display: block;
}
.company_area .campany_name{
  font-size: 1.25em;
  margin-bottom: 1.3em;
}
.footer_inner .fl_box ul{
  margin-top: 20px;
}
.footer_inner .fl_box ul li{
  width: 50%;
}
.footer_inner .fl_box ul li a{
  color: #fff;
  font-size: 0.95em;
  padding-left: 23px;
  position: relative;
  transition: all .4s;
}
.catalog{
  margin: 20px auto;
}

}