@charset "UTF-8";

#kyoto #main{
 width: 100vw;
 height: 505px;
 position: relative;
}
/*#kyoto #main .tBox{
 background-image: url(../images/craftTpt.jpg);
}*/
#kyoto .bg{
 position: fixed;
 top: 100px;
 left: 0;
 right: 0;
 width: 100vw;
 height: 505px;
 z-index: -1;
}
#kyoto .bg img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 font-family: 'object-fit: cover; object-position: center;';
}
#kyoto #main .tBox div h2{
 font-size: 44px;
 letter-spacing: -1px;
}
#kyoto #content .btSp{
 display: none;
}
#kyoto #content .inner .photoL div p.cp1{
 color: #000;
 background-image: none;
 text-align: left;
 right: auto;
 bottom: auto;
 left: 0;
 top: 0;
}
#kyoto #content .inner .photoL div p.cp2{
 color: #000;
 background-image: none;
 width: 35%;
 text-align: left;
 left: -10px;
 bottom: -5px;
}
#kyoto #content .inner .photoL div p.cp3{
 right: 0;
 bottom: 0;
}
#kyoto #content .inner .photoR div p.gra.gra2{
 background-image: url(../../../common/images/gra2.png);
 background-size: 100% auto;
}
#kyoto #content .owner .inner .ownerR p sup{
 margin: 0 0 0 -0.4vw;
 position: relative;
}
#kyoto #content .owner .inner .ownerR .ownerC{
 font-family: "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
 padding: 15px 0 0;
 font-size: 11px;
 line-height: 100%;
 color: #5E794A;
}
#kyoto #content .shop .name{
 float: left;
 margin: 60px 0 0 1%;
 padding: 0;
 width: 26%;
 font-size: 25px;
 line-height: 110%;
 text-align: center;
 letter-spacing: 2px;
}



@media screen and (max-width: 1290px) {
#kyoto .bg{
 position: fixed;
 top: 6.8vw;
}
}
@media screen and (max-width: 1100px) {

#kyoto #main{
 width: 100vw;
 height: 505px;
 background-position: center top;
}
/*#kyoto #main .tBox{
 background-image: url(../images/craftTpt.jpg);
}*/
#kyoto .bg{
 position: fixed;
 top: 6.6vw;
 left: 0;
 right: 0;
 width: 100vw;
 height: 505px;
 z-index: -1;
}
#kyoto #content .owner .inner .ownerR .ownerC{
 padding: 1.4vw 0 0;
 font-size: 1vw;
}
#kyoto #content .shop .name{
 float: left;
 margin: 4.8vw 0 0 1%;
 font-size: 2.2vw;
}



}






@media screen and (max-width: 767px) {

#kyoto #main{
 width: 100vw;
 height: 55vh;
 position: relative;
}
#kyoto .bg{
 position: fixed;
 top: 2vw;
 left: 0;
 right: 0;
 width: 100vw;
 height: 56vh;
 z-index: -1;
}
#kyoto .bg img{
 width: 120%;
 height: 120%;
	object-fit: cover;
  object-position: center;
  font-family: 'object-fit: cover; object-position: center;';
}
#kyoto #main .tBox div h2{
 font-size: 7vw;
 letter-spacing: 0;
}
#kyoto #content .lead h3{
 font-size: 5.4vw;
}
#kyoto #content .btSp{
 margin: 0 auto 4vw;
 width: 90%;
 height: 33vw;
 position: relative;
 display: block;
}
#kyoto #content .btSp a{
 width: 100%;
 height: 100%;
 display: block;
 background-position: center center;
 background-size: cover;
 background-repeat: no-repeat;
 position: relative;
 transition: .3s;
}
#kyoto #content .btSp.bt1 a{
 background-image: url(../images/nav1.jpg);
}
#kyoto #content .btSp.bt2 a{
 background-image: url(../images/nav2.jpg);
}
#kyoto #content .btSp.bt3 a{
 background-image: url(../images/nav3.jpg);
}
#kyoto #content .btSp.bt1 a.active{
 background-image: url(../images/nav1.jpg);
}
#kyoto #content .btSp.bt2 a.active{
 background-image: url(../images/nav2.jpg);
}
#kyoto #content .btSp.bt3 a.active{
 background-image: url(../images/nav3.jpg);
}
#kyoto #content .btSp a div{
 width: 100%;
 height: 100%;
 transition: .3s;
}
#kyoto #content .btSp:hover a div{
 background: rgba(0,0,0,0.3);
}
#kyoto #content .btSp p{
 margin: 0;
 padding: 2vw 0;
 width: 100%;
 font-size: 4.5vw;
 line-height: 145%;
 text-align: center;
 color: #fff;
 font-weight: bold;
 background: rgba(35,24,21,0.4);
 position: absolute;
 left: 0;
 right: 0;
 top: 40%;
 -webkit-transform: translateY(-40%);
 transform: translateY(-40%);
 z-index: 10;
}
#kyoto #content .btSp span{
 padding: 1vw 0;
 width: 100%;
 font-size: 3vw;
 text-align: center;
 color: #fff;
 font-weight: bold;
 position: absolute;
 bottom: 0;
 background-image: url(../../../common/images/acc.png),url(../images/craftTpt.jpg);
 background-position: right 3% center,left top;
 background-size: 4vw auto,20vw;
 background-repeat: no-repeat,repeat;
 transition: .3s;
}
#kyoto #content .btSp:hover span{
 opacity: .9;
}
#kyoto #content .btSp a.active span{
 background-image: url(../../../common/images/acc2.png),url(../images/craftTpt.jpg);
}
#kyoto #content .inner .photoL div p.cp1{
 padding: 0.5vw 2% 0.5vw;
 font-size: 3.2vw;
 color: #000;
 background-image: none;
 text-align: left;
 right: auto;
 bottom: auto;
 left: 0;
 top: 0;
}
#kyoto #content .inner .photoL div p.cp2{
 font-size: 3.2vw;
 line-height: 130%;
 color: #000;
 background-image: none;
 width: 34%;
 text-align: left;
 left: 0;
 bottom: 0;
}
#kyoto #content .inner .photoL div p.cp3{
 font-size: 3.2vw;
 color: #fff;
 background-image: url(../../../common/images/gra.png);
 right: 0;
 bottom: 0;
}
#kyoto #content .inner .photoR div p.gra.gra2{
 background-image: url(../../../common/images/gra2.png);
 background-size: 120% auto;
}
#kyoto #content .owner .inner .ownerR p sup{
 margin: 0 0 0 -3vw;
 position: relative;
}
#kyoto #content .owner .inner .ownerR .ownerC{
 font-family: "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
 padding: 3vw 0 0;
 font-size: 2.8vw;
 line-height: 140%;
 color: #5E794A;
}
#kyoto #content .shop .name{
 float: none;
 margin: 0 auto 3px;
 padding: 0 0 1vw;
 width: 100%;
 font-size: 4.8vw;
 line-height: 110%;
 text-align: center;
 letter-spacing: 2px;
}




}


@media screen and (orientation: landscape) {



}