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


.clicked{
    animation: animScale 2s ease-out;
    transform-origin: 50% 50%;
    animation-play-state:running;
    
}
@keyframes animScale {
    0% { transform: scale(0.9, 0.9); }
    5% { transform: scale(1.05, 1.05); }
    10% { transform: scale(1, 1); }
    15% { transform: scale(1.01, 1.01); }
    20% { transform: scale(1, 1); }
    100% { transform: scale(1, 1); }
}

.shakex_l{
    animation: animSlateleft 2s ease-out;
    transform-origin: 50% 50%;
    animation-play-state:running;
    
}
@keyframes animSlateleft {
    0% { left:12px; }
    5% { left:15px; }
    10% { left:10px; }
    15% { left:15px; }
    20% { left:15px; }
    100% { left:15px; }
}

.shakex_r{
    animation: animSlateright 2s ease-out;
    transform-origin: 50% 50%;
    animation-play-state:running;
    
}
@keyframes animSlateright {
    0% { right:12px; }
    5% { right:15px; }
    10% { right:10px; }
    15% { right:15px; }
    20% { right:15px; }
    100% { right:15px; }
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■   　デフォルト   　■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

html, body, div, span, iframe,
p, a, img, small, dl, dt, dd, ol, ul, li,
h1, h2, h3, h4, h5{
	border: 0;
	margin: 0;
	padding: 0;
	color:#000;
	font-size:14px;
	letter-spacing:0px;
  font-family: "a-otf-gothic-bbb-pr6n",sans-serif;

}
body {
	line-height: 1;
	width: 100%;
	height: 100%;
	position: relative;
}
ol, ul {
	list-style: none;
}
a{
	outline:none;
	text-decoration:none;
	cursor: pointer;
	}
a img {
	border: none;
	border-style:none;
}
img {
	border-style:none;
	vertical-align: top;
  width: 100%;
  height: auto;
}
li{
	list-style:none;
}
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

#sp_menu{
  width: 100%;
  position: fixed;
  background: rgba(255,255,255,0.95);
  top: -500px;
  left: 0;
  z-index: 9998;
  padding: 60px 0 40px;
  transition: all 0.3s ease;
}

.action{
  top: 0 !important;
}

#sp_menu li{
  text-align: center;
}
#sp_menu li a{
  text-align: center;
  font-size: 14px;
  line-height: 30px;

}


body {
    position: relative;
    width: 100%;
    height: 100vh;
}


header{
  width: 100%;
  position: relative;
  z-index: 9997;
}

header .wrap{
width: 100%;
margin: 0 auto;
}

header h1{
  width: 80px;
position: fixed;
top: 30px;
left: 30px;
z-index: 9998;
}
header nav{
  display: none;
}
.tcon {
  position: fixed;
  top: 30px;
  right: 20px;
  z-index: 9999999999;
  appearance: none;
  border: none;
  cursor: pointer;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 30px;
  transition: 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 25px;
  background: transparent;
  outline: none; }
  .tcon > * {
    display: block; }
  .tcon:hover, .tcon:focus {
    outline: none; }
  .tcon::-moz-focus-inner {
    border: 0; }
.sp_menu_title{
  position: absolute;
  font-size: 8px;
  letter-spacing: 1px;
  top: 28px;
  left: 9px;
  text-align: center;
  color: #333;
  width: 30px;
}
.tcon-menu__lines {
  display: inline-block;
  height: 3px;
  width: 25px;
  border-radius: 1px;
  transition: 0.3s;
  background: #333;
  position: relative; }
  .tcon-menu__lines::before, .tcon-menu__lines::after {
    display: inline-block;
    height: 3px;
    width: 25px;
    border-radius: 1px;
    transition: 0.3s;
    background: #333;
    content: '';
    position: absolute;
    left: 0;
    -webkit-transform-origin: 2.85714px center;
    transform-origin: 2.85714px center;
    width: 100%; }
  .tcon-menu__lines::before {
    top: 9px; }
  .tcon-menu__lines::after {
    top: -9px; }
  .tcon-transform .tcon-menu__lines {
    -webkit-transform: scale3d(.8, .8, .8);
    transform: scale3d(.8, .8, .8); }

.tcon-menu--xcross {
  width: auto; }
  .tcon-menu--xcross.tcon-transform .tcon-menu__lines {
    background: transparent; }
    .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before, .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after {
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      top: 0;
      width: 25px; }
    .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before {
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg); }
    .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after {
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg); }

.tcon-visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .tcon-visuallyhidden:active, .tcon-visuallyhidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

header small{
  position: fixed;
  bottom: 20px;
  width: 100%;
text-align: center;
font-size: 10px;
}



/*■■■■■■■■　TOP　■■■■■■■■*/

section.mv{
  position: relative;
  width:100%;
  height:90%;
}
section.mv ul{
  width:100%;
  height:90%;
}

section.mv ul li{
  width:100%;
  height:90%;
}
#slider {
  height: 90vh;
}
#slider li {
  height: 90vh;
}


section.mv ul li.image01{
  background: url(../images/mv_bg01_sp.jpg) no-repeat;
  background-size: cover;
  background-position:center;
}
section.mv ul li.image02{
  background: url(../images/mv_bg02_sp.jpg) no-repeat;
  background-size: cover;
  background-position:center;
}
section.mv ul li.image03{
  background: url(../images/mv_bg03_sp.jpg) no-repeat;
  background-size: cover;
  background-position:center;
}
section.mv ul li.image04{
  background: url(../images/mv_bg04_sp.jpg) no-repeat;
  background-size: cover;
  background-position:center;
}
section.mv ul li.image05{
  background: url(../images/mv_bg05_sp.jpg) no-repeat;
  background-size: cover;
  background-position:center;
}
section.mv ul li.image06{
  background: url(../images/mv_bg06_sp.jpg) no-repeat;
  background-size: cover;
  background-position:center;
}

/*■■■■■■■■　concept　■■■■■■■■*/

section#concept,
section#product,
section#sensei,
section#contact
{
  position: relative;
  width: 100%;
}
section#concept h2{
  width: 240px;
  margin: 0 auto;
}
section#concept h3{
  font-weight: 200;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 34px;
  text-align: center;
  padding-bottom: 20px;
}

section#product h2.title{
  width: 158px !important;
  margin: 0 auto;
}

section#contact h2{
  width: 156px;
  margin: 0 auto;
}

section .wrap{
  width: 75%;
  position: relative;
  margin:0 auto;
  padding-top: 50px;
}


section h2{
  padding-bottom: 30px;
  text-align: center;
}

section p{
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 24px;
  text-align: left;
  padding-bottom: 50px;
}

section p br {
  display: none;
}



section#sensei dl{
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding-top: 50px;
  margin-bottom: 50px;
}
section#sensei dl dt{
  width: 100%;
  color: #999;
  font-size: 11px;
  text-align: center;
}
section#sensei dl dd{
  
}
section#sensei dl dd h3{
  width: 230px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 30px; 
}
section#sensei dl dd p{
  font-size: 11px;
  line-height: 20px;
  text-align: left;
}



section#product p{
  padding-bottom: 30px;
  text-align: left;
}
section#product p br{
  display: none;

}

section#product ul{
  padding-bottom: 0px;
}

section#product ul li{
   float: left;
   width: 46%;
   padding-right: 8%;
   padding-bottom: 20px;
}
section#product ul li p{
  padding-bottom: 0px;
  line-height: 16px;
  padding-top: 10px;
  text-align: center;
  font-size: 11px;
}


section#product ul li:nth-child(2n){
  padding-right: 0;
}

section#product ul li a{
  transition: all 0.3s ease;
}
section#product ul li a:hover{
  opacity: 0.3;
}


section#contact{
  padding-bottom: 50px;
}
section#contact h2{
  padding-bottom: 30px;
}
section#contact ul li{
  margin-bottom: 20px;
  border-bottom: 1px solid #EEE;
  padding-bottom: 20px;
}

section#contact ul li h4{
  float: left;
  width:100%;
  font-weight: normal;
  letter-spacing: 1.5px;
  padding:0 0 10px;
  font-size: 12px;
}
section#contact ul li input,
section#contact ul li textarea{
  width: 90%;
  border:1px solid #999;
  padding:10px 10px;
  resize: none;  
  border-radius: 2px;
}

section#contact ul li textarea{
  height: 200px;
}
#btn_area{
  width: 100%;
  margin: 0 auto;
}
#btn_area input{
  border-radius: 2px;
  text-align: center;
  width: 70%;
  margin: 0 15%;
  line-height: 40px;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  letter-spacing: 2px;
}
#btn_area input:hover{
  opacity: 0.5;
}


#btn_area input#submit{
  background: #962036;
  border:1px solid #962036;
  color: #FFF;
  margin-right: 20px;
  margin-bottom: 10px; 
}
#btn_area input#reset{
  background: #FFF;
  border:1px solid #333;
  color: #333;
}

input[type="submit"],
input[type="reset"] {
-webkit-appearance: none;
border-radius: 0;
}

#form_ray{
  position: relative;
  width: 100%;
  height: 100%;
}

#complate{
  width: 80%;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 10%;
  margin-top:-50px; 

}

#complate h3{
  font-size: 40px;
  padding-bottom: 20px;
  text-align: center;
  color: #EEE;
}
#complate p{
  text-align: center;
  
}





footer{
  background: #eee;

}
footer small{
  padding: 30px 0;
  display: block;
  text-align: center;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■   　デフォルト   　■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


section#syohin .wrap{
  width: 100%;
  position: relative;
  margin:0 auto;
  padding-top:0px;
}


#syohin_slider{
  padding-bottom: 50px;
}
#syohin_slider ul.Thumbnail_pager li{
  width: 100%;
  height: 0;
  padding-bottom: 120%;
  overflow: hidden;
  background-size:cover;
  background-repeat: no-repeat;
}

/*玄関の椅子*/
#syohin_slider ul.Thumbnail_pager li#genkannoisu01{
  background-image: url(../images/desks_item01_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#genkannoisu02{
  background-image: url(../images/desks_item02_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#genkannoisu03{
  background-image: url(../images/desks_item03_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#genkannoisu04{
  background-image: url(../images/desks_item04_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#genkannoisu05{
  background-image: url(../images/desks_item05_sp.jpg);  
}

/*黒ん棒*/
#syohin_slider ul.Thumbnail_pager li#kuronbo01{
  background-image: url(../images/kurobo_item01_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kuronbo02{
  background-image: url(../images/kurobo_item02_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kuronbo03{
  background-image: url(../images/kurobo_item03_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kuronbo04{
  background-image: url(../images/kurobo_item04_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kuronbo05{
  background-image: url(../images/no_item_sp.jpg);  
}

/*木と革の時計*/
#syohin_slider ul.Thumbnail_pager li#kitokawakei01{
  background-image: url(../images/kitokawatokei_item01_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kitokawakei02{
  background-image: url(../images/kitokawatokei_item02_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kitokawakei03{
  background-image: url(../images/kitokawatokei_item03_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kitokawakei04{
  background-image: url(../images/no_item_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kitokawakei05{
  background-image: url(../images/no_item_sp.jpg);  
}
/*組子時計*/
#syohin_slider ul.Thumbnail_pager li#kumiko01{
  background-image: url(../images/kumikotokei_item01_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kumiko02{
  background-image: url(../images/kumikotokei_item02_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kumiko03{
  background-image: url(../images/kumikotokei_item03_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kumiko04{
  background-image: url(../images/no_item_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kumiko05{
  background-image: url(../images/no_item_sp.jpg);  
}

/*Aスツール*/
#syohin_slider ul.Thumbnail_pager li#stool01{
  background-image: url(../images/stool_item01_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#stool02{
  background-image: url(../images/stool_item02_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#stool03{
  background-image: url(../images/stool_item03_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#stool04{
  background-image: url(../images/stool_item04_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#stool05{
  background-image: url(../images/no_item_sp.jpg);  
}

/*格子の杜*/
#syohin_slider ul.Thumbnail_pager li#koushinomori01{
  background-image: url(../images/koushi_item01_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#koushinomori02{
  background-image: url(../images/koushi_item02_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#koushinomori03{
  background-image: url(../images/koushi_item03_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#koushinomori04{
  background-image: url(../images/no_item_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#koushinomori05{
  background-image: url(../images/no_item_sp.jpg);  
}



/*フォトスクリーン*/
#syohin_slider ul.Thumbnail_pager li#photoscreen01{
  background-image: url(../images/photoscreen_item01_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#photoscreen02{
  background-image: url(../images/photoscreen_item02_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#photoscreen03{
  background-image: url(../images/photoscreen_item03_sp.jpg);  
}



/*赤ちゃんの畳ベッド*/
#syohin_slider ul.Thumbnail_pager li#tatami_bed01{
  background-image: url(../images/tatami_bed_item01_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#tatami_bed02{
  background-image: url(../images/tatami_bed_item02_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#tatami_bed03{
  background-image: url(../images/tatami_bed_item03_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#tatami_bed04{
  background-image: url(../images/tatami_bed_item04_sp.jpg);  
}



/*背比べフォトフレーム*/
#syohin_slider ul.Thumbnail_pager li#photoflame01{
  background-image: url(../images/photoflame01_item01_sp.jpg);  
}


/*木の器*/
#syohin_slider ul.Thumbnail_pager li#kinoutsuwa01{
  background-image: url(../images/kinoutsuwa_item01_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kinoutsuwa02{
  background-image: url(../images/kinoutsuwa_item02_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kinoutsuwa03{
  background-image: url(../images/kinoutsuwa_item03_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kinoutsuwa04{
  background-image: url(../images/kinoutsuwa_item04_sp.jpg);  
}
#syohin_slider ul.Thumbnail_pager li#kinoutsuwa05{
  background-image: url(../images/kinoutsuwa_item05_sp.jpg);  
}



#syohin_slider #thmb-pager{

}
#syohin_slider #thmb-pager a{
  display: block;
  float: left;
  width: 33.3%;
  padding-right: 0px;
  overflow: hidden;
}
#syohin_slider #thmb-pager a.active{
  opacity: 0.2;
}

#syohin_slider #thmb-pager a img{
  width: 100%;
  height: auto;
}
#syohin_slider #thmb-pager a:last-child{
  padding-right: 0;
}

#syohin_detail{
  width: 80%;
  margin: 0 auto
}

#syohin_detail h2{
  font-size: 28px;
  letter-spacing:3px;
  font-weight: 200;
  padding-bottom:30px;
}
#syohin_detail h3{
  text-align: center;
  font-size: 16px;
  letter-spacing:3px;
  font-weight: 200;
  padding-bottom: 30px;
}
#syohin_detail p{
  text-align: left;
  font-size: 14px;
  line-height: 26px;
  letter-spacing:0.5px;
  font-weight: 200;
  padding-bottom: 30px;
}
#syohin_detail dl{
}
#syohin_detail dl dt{
  padding: 10px 0;
  width: 100%;
  text-indent: 20px;
  border-top: 2px solid #000;
  border-bottom: 1px solid #c9c9c9;
  font-size: 14px;
  line-height: 24px;
}
#syohin_detail dl dd{
  width: 100%;
  box-sizing: border-box;
  padding: 15px 20px;
  font-size: 14px;
  line-height: 24px;
}
#syohin_detail dl dd a{
  color: #962037;
}
#syohin_detail dl dd a:hover{
  text-decoration:underline;
}
#syohin_detail dl dd img{
  padding-top: 20px;
  padding-bottom: 10px;
}
#product h2{
  width:100% !important;

  font-size: 20px;
  font-weight: 200;
  padding-bottom: 50px;
}
.pd_btm{
  padding-bottom: 100px;
}