@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ トップページ ◇◆◇
  
  
========================================================================================================================*/

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

  main visual
  
----------------------------------------------------------------------------------------------------*/

#mv-warp {
  width:100%;
  height:670px;
  position:relative;
  color:#fff;
  overflow:hidden;
}

#mv_slide {
  width:100%;
  height:100%;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:2;
}

#mv_slideL,
#mv_slideR {
  width:50%;
  height:100%;
  float:left;
  position:relative;
}

#mv_slide img {
  max-width:1000px;
}

#mv {
  width:1100px;
  height:100%;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:2;
}

#mv a,
#mv a:visited,
#mv a:hover { color:#fff; text-decoration:none; }

#mv_title {
  width:240px;
  height:100%;
  background:url(../image/top/mv/title.png) no-repeat center top;
  background-color:#1e1e1e;
  margin-left:auto;
  margin-right:auto;
}


/*-----------------------------------------------------------------------------------
  nav
-----------------------------------------------------------------------------------*/

#mv_nav {
  width:460px;
  position:absolute;
  left:0;
  top:372px;
  vertical-align:top;
}

#mv_nav ul {
  list-style:none;
  display:inline-block;
  font-size:106.3%;
}

#mv_nav li {
  padding-right:1em;
}

#mv_nav li a {
  display:inline-block;
  position:relative;
  -webkit-transition:padding ease 0.4s;
  -moz-transition:padding ease 0.4s;
  -ms-transition:padding ease 0.4s;
  -o-transition:padding ease 0.4s;
  transition:padding ease 0.4s;
}

.cssanimations #mv_nav li a:hover { padding-top:0.5em; } 

#mv_nav li a:before {
  content:"";
  width:1px;
  height:0;
  background-color:#fff;
  background-color:rgba(255,255,255,0.7);
  position:absolute;
  left:50%;
  top:-30px;
  -webkit-transition:height ease 0.5s;
  -moz-transition:height ease 0.5s;
  -ms-transition:height ease 0.5s;
  -o-transition:height ease 0.5s;
  transition:height ease 0.5s;
}

.cssanimations #mv_nav li a:hover:before { height:30px; }


/*-----------------------------------------------------------------------------------
  slide
-----------------------------------------------------------------------------------*/

#mv_slide {
  z-index:1;
  width:2000px;
  height:670px;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-1000px;
}

#mv_slide img {
  width:2000px !important;
  height:670px !important;
}


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

  pickup
  
----------------------------------------------------------------------------------------------------*/

#pickup-warp {
  width:100%;
  background:url(../image/bg-gray.gif) repeat center top;
  position:relative;
  padding-top:80px;
  padding-bottom:80px;
}

#pickup-warp:before {
  content:"";
  display:block;
  width:100%;
  height:160px;
  background-color:#fff;
  position:absolute;
  left:0;
  top:0;
}

#pickup {
  width:1100px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}

.pickup_head {
  width:292px;
  position:absolute;
  right:0;
  top:0;
}

.pickup_head h2 {
  font-weight:400;
  margin-right:20px;
}

.pickup_head h2 span {
  display:block;
  padding-top:3em;
}

.pickup_head p {
  margin-right:25px;
  margin-top:122px;
  line-height:2;
}

#pickup ul {
  list-style:none;
  width:808px;
}

#pickup li {
  width:196px;
  padding-top:270px;
  margin-right:6px;
  float:right;
  color:#fff;
  background-color:#141414;
  position:relative;
  -webkit-transition:margin-top ease 0.5s, opacity ease 0.3s;
  -moz-transition:margin-top ease 0.5s, opacity ease 0.3s;
  -ms-transition:margin-top ease 0.5s, opacity ease 0.3s;
  -o-transition:margin-top ease 0.5s, opacity ease 0.3s;
  transition:margin-top ease 0.5s, opacity ease 0.3s;
  transform:translate3d(0,0,0);
}

.cssanimations #pickup li:hover { margin-top:-15px; }

#pickup li a {
  display:block;
  -webkit-transition:opacity ease 0.3s;
  -moz-transition:opacity ease 0.3s;
  -ms-transition:opacity ease 0.3s;
  -o-transition:opacity ease 0.3s;
  transition:opacity ease 0.3s;
}

#pickup ul:hover li a {
  filter:alpha(opacity=30);
  opacity:0.3;
  -moz-opacity:0.3;
}

#pickup ul:hover li:hover a {
  filter:alpha(opacity=100);
  opacity:1;
  -moz-opacity:1;
}

#pickup li:before {
  content:"";
  width:100%;
  height:270px;
  position:absolute;
  left:0;
  top:0;
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
  -webkit-transition:opacity ease 0.3s;
  -moz-transition:opacity ease 0.3s;
  -ms-transition:opacity ease 0.3s;
  -o-transition:opacity ease 0.3s;
  transition:opacity ease 0.3s;
}

#pickup li.no01:before { background-image:url(../image/top/pickup01.jpg); }
#pickup li.no02:before { background-image:url(../image/top/pickup02.jpg); }
#pickup li.no03:before { background-image:url(../image/top/pickup03.jpg); }
#pickup li.no04:before { background-image:url(../image/top/pickup04.jpg); }

#pickup ul:hover li:before {
  filter:alpha(opacity=70);
  opacity:0.7;
  -moz-opacity:0.7;
}

#pickup ul:hover li:hover:before {
  filter:alpha(opacity=100);
  opacity:1;
  -moz-opacity:1;
}

#pickup li p {
  box-sizing:border-box;
  height:225px;
  background-color:#464678;
  position:relative;
}

#pickup li p:before {
  content:"";
  width:100%;
  height:110px;
  background:url(../image/top/pickup_bg.png) no-repeat center bottom;
  background-size:cover;
  position:absolute;
  left:0;
  top:-110px;
}

.no-backgroundsize #pickup li p:before {
  background:url(../image/top/pickup_bg-s.png) no-repeat center bottom;
}

#pickup li p span {
  display:inline-block;
  padding-top:1em;
}

#pickup a,
#pickup a:visited,
#pickup a:hover { color:#fff; text-decoration:none; }


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

  お知らせ
  
----------------------------------------------------------------------------------------------------*/

#info {
  width:1100px;
  margin-left:auto;
  margin-right:auto;
  padding-top:80px;
  padding-bottom:80px;
  position:relative;
}

.info_head {
  width:100px;
  float:left;
}

.info_head h3 {
  display:inline-block;
  font-weight:400;
}

#info_list {
  list-style:none;
  width:957px;
  float:right;
}

#info_list li {
  width:312px;
  float:left;
  margin-left:7px;
  background-color:#fff;
  text-align:left;
}

#info_list li .photo-zoom {
  display:block;
  height:205px;
}

#info_list li p {
  padding:1em 1.25em 1.25em 1.25em;
}

#info_list li p .date {
  color:#9f9f9f;
  display:inline-block;
  margin-bottom:0.25em;
}

#info a,
#info a:visited { color:inherit; text-decoration:none; }
#info a:hover { color:#50508c; text-decoration:none; }

#info .l-btn {
  width:100px;
  display:inline-block;
  position:absolute;
  left:0;
  top:285px;
  text-align:center;
}


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

  畳選び
  
----------------------------------------------------------------------------------------------------*/

#tatamierabi-warp {
  width:100%;
  background:url(../image/bg3-black.gif) repeat center top;
  position:relative;
  padding-top:80px;
  color:#fff;
}

#tatamierabi {
  width:1100px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:2;
}

.tatamierabi_head {
  width:320px;
  position:absolute;
  right:0;
  top:0;
}

.tatamierabi_head h4 {
  display:inline-block;
  font-weight:400;
  background-color:#141414;
  line-height:1;
  padding:0.75em;
}

.tatamierabi_head p {
  margin-right:50px;
  padding-top:29px;
  line-height:2;
}

.tatamierabi_movie-warp {
  width:780px;
  float:left;
}

.tatamierabi_movie {
  position:relative;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-top:56.25%;
}

.tatamierabi_movie iframe {
  position:absolute;
  top:0;
  right:0;
  width:100% !important;
  height:100% !important;
}


/*-----------------------------------------------------------------------------------
  商品
-----------------------------------------------------------------------------------*/

#syohin {
  background-color:#1e1e1e;
  position:relative;
  padding-bottom:80px;
}

#syohin:before {
  content:"";
  width:100%;
  height:80px;
  background-color:#1e1e1e;
  position:absolute;
  left:0;
  top:-80px;
}

#syohin_list {
  list-style:none;
  width:1100px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:40px;
}

#syohin_list li {
  width:362px;
  box-sizing:border-box;
  padding-top:65px;
  float:left;
  margin-left:7px;
  text-align:center;
  transition:opacity 0.3s ease;
}

#syohin_list li:first-child {
  margin-left:0;
}

#syohin_list:hover li {
  filter:alpha(opacity=40);
  opacity:0.4;
  -moz-opacity:0.4;
}

#syohin_list:hover li:hover,
#syohin_list:hover li:hover .photo-zoom {
  filter:alpha(opacity=100);
  opacity:1;
  -moz-opacity:1;
}

#syohin_list li a {
  position:relative;
  height:240px;
}

#syohin_list .photo-zoom {
  height:100%;
  position:absolute;
  left:0;
  top:0;
}

.syohin__item {
  z-index:2;
  position:relative;
  padding-top:70px;
}

.syohin__item span {
  position:relative;
  display:inline-block;
  padding-bottom:0.5em;
  margin-bottom:0.75em;
}

.syohin__item span:after {
  content:"";
  width:2em;
  height:1px;
  background-color:#fff;
  background-color:rgba(255,255,255,0.7);
  position:absolute;
  left:50%;
  right:50%;
  bottom:0;
  margin-left:-1em;
}

.syohin__item b {
  font-weight:400;
}

#syohin a { display:block; }
#syohin a,
#syohin a:visited,
#syohin a:hover { color:#fff; text-decoration:none; }

@media screen\0 {
  .syohin__item:after {
    transform:rotate(-.03deg);
  }
}

#syohin .l-btn {
  display:inline-block;
}


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

  歴史
  
----------------------------------------------------------------------------------------------------*/

#rekishi {
  padding-top:120px;
  padding-bottom:120px;
  background:url(../image/top/rekishi_bg.jpg) no-repeat center bottom;
  background-size:cover;
  color:#fff;
  position:relative;
}

#rekishi:before {
  content:"";
  width:100%;
  height:100%;
  margin-left:auto;
  margin-right:auto;
  position:absolute;
  left:0;
  top:0;
  background:url(../image/top/rekishi_photo.png) no-repeat center center;
}

#rekishi h5 {
  font-weight:500;
  position:relative;
  z-index:2;
}

#rekishi h5 span:first-child {
  font-weight:100;
  letter-spacing:0.075em;
}

#rekishi h5 span:last-child {
  letter-spacing:0.1em;
}

#rekishi p {
  line-height:2.2;
  margin-top:60px;
  position:relative;
  z-index:2;
}


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

  職人
  
----------------------------------------------------------------------------------------------------*/

#syokunin {
  width:1100px;
  margin-left:auto;
  margin-right:auto;
  padding-top:130px;
  padding-bottom:140px;
}

.syokunin_block {
  margin-left:30px;
  width:460px;
  height:270px;
  float:left;
  position:relative;
  background-color:#e6e6e6;
}

.syokunin_block:last-child {
  margin-left:110px;
}

.syokunin__dai {
  width:196px;
  height:110px;
  position:absolute;
  left:-50px;
  top:-80px;
}

.syokunin__dai_inner {
  width:100%;
  height:100%;
  color:#fff;
  position:relative;
  display:block;
}

.syokunin__dai_inner:before,
.syokunin__dai_inner:after {
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:0;
}

.syokunin__dai_inner:before {
  top:0;
  border-left:98px solid transparent;
  border-right:98px solid transparent;
  border-bottom:55px solid #464678;
}

.syokunin__dai_inner:after {
  bottom:0;
  border-top:55px solid #464678;
  border-left:98px solid transparent;
  border-right:98px solid transparent;
}

.syokunin__dai_inner span {
  height:100%;
  display:inline-block;
  position:relative;
  z-index:2;
  text-align:center;
}

.syokunin__name-jp {
  letter-spacing:0.15em;
  white-space:nowrap;
  font-weight:400;
  display:inline-block;
  position:absolute;
  left:55px;
  top:70px;
}

.syokunin__name-en {
  letter-spacing:0.05em;
  white-space:nowrap;
  padding-right:0.5em;
  display:inline-block;
  position:absolute;
  left:25px;
  bottom:-40px;
  border-right:1px solid #3c3c3c;
  border-right-color:rgba(60,60,60,0.7);
}

.syokunin__photo {
  position:absolute;
  right:-40px;
  bottom:-40px;
}