@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: top center;
 font-family: 'object-fit: cover; object-position: top center;';
}
#kyoto #main .tBox span{
 padding: 13px 0 18px;
 width: 100%;
 font-size: 16px;
}
#kyoto #main .tBox span:last-child{
 padding: 10px 0 10px;
 font-size: 18px;
 line-height: 130%;
 letter-spacing: 0.5px;
}
#kyoto #main .tBox div{
 padding: 10px 0 23px;
 letter-spacing: 1px;
}
#kyoto #main .tBox div span{
 padding: 0 0 15px;
 font-size: 20px;
 line-height: 150%;
 display: block;
}
#kyoto #main .tBox div h2{
 font-size: 44px;
 letter-spacing: 4px;
}
#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 .shop .name{
 float: left;
 margin: 30px 0 0 1%;
 padding: 0;
 width: 30%;
 font-size: 20px;
 line-height: 135%;
 text-align: center;
 letter-spacing: 2px;
}
#kyoto #content .shop .name strong{
 margin: 8px 0 0;
 display: inline-block;
}
#kyoto #content .shop .name span{
 padding: 10px 0 0;
 font-size: 17px;
 line-height: 120%;
 letter-spacing: 1px;
 font-feature-settings: "palt";
 text-align: left;
 display: inline-block;
}
#kyoto #content .shop .addBox{
 width: 69%;
}



@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 .shop .name{
 float: left;
 margin: 2.2vw 0 0 1%;
 font-size: 1.8vw;
}
#kyoto #content .shop .name span{
 padding: 10px 0 0;
 font-size: 1.35vw;
}



}






@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: top center;
  font-family: 'object-fit: cover; object-position: top center;';
}
#kyoto #main .tBox span{
 padding: 2vw 0 2vw;
 width: 100%;
 font-size: 3vw;
 letter-spacing: 0.2vw;
}
#kyoto #main .tBox span:last-child{
 padding: 2vw 0 2vw;
 font-size: 3vw;
 letter-spacing: 0.5px;
}
#kyoto #main .tBox div span{
 padding: 0 0 2vw;
 font-size: 4vw;
}
#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 .txtR{
 margin: 5vw 0 0;
}
#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 .shop .name{
 float: none;
 margin: 0 auto 3px;
 padding: 0 0 2vw;
 width: 100%;
 font-size: 4.4vw;
 line-height: 130%;
 text-align: center;
 letter-spacing: 2px;
}
#kyoto #content .shop .name strong{
 margin: 1.5vw 0 0;
 display: inline-block;
}
#kyoto #content .shop .name span{
 padding: 10px 0 0;
 font-size: 3.8vw;
}
#kyoto #content .shop .addBox{
 width: 100%;
}




}


@media screen and (orientation: landscape) {



}