/*
Theme Name: kimono-kind
Author: kimono-kind
*/
body {
  margin: 0
}
img {
  vertical-align: bottom
}
p {
  margin: 0
}
.pc-br{display:none}
/*  ヘッダー ---------------------------------------------------------------------------------------- */


/*  202606new --------------------------------------------  */
.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
header {
  padding: 0;
}
header .logo{
    text-align: center;
    position: fixed;
    top:50px;
  left: 50%;
  transform: translate(-50%, -50%);
}
header .logo img {
  width: 120px;
  margin: 0;
}

.mainimg{
    width:100%;
    max-width: 1000px;
    margin: 0 auto;
}
.mainimg img{
    width: 100%
}

.mainimg img.honmono-title{
    margin-top: 40px
}

.mainimg img.kind-emon-title{
    margin-top: 100px;
        width: 80%
}


.mainimg img.kind-emon-photo{
    margin-top: 40px;
        width: 100%
}

/*  PC --------------------------------------------  */
@media screen and (min-width: 780px) {
  header {
    width: 98%;
    margin: 0 auto;
    padding: 0;
  }

.pc-br{display: inline}
    
header .logo{
    top:100px;

}
header .logo img {
  width: 70%;
  margin: 0;
}
.mainimg img.honmono-title{
    margin-top: 80px
} 
.mainimg img.kind-emon-title{
    margin-top: 300px;
    width: 60%
}   
.mainimg img.kind-emon-photo{
    margin-top: 100px;
        width: 100%
    
}
}


/* 予約ボタン */
@media screen and (max-width: 779px) {
header .raiten-bt .inbox img.pc{display: none}
header .raiten-bt{ 
    width: 95%;
    margin: 0 auto;
    display: flex; 
    flex-wrap:nowrap;
    justify-content: space-between;
  position: fixed;  
    bottom: 0;
    z-index: 1000;
    padding: 2% 0;
    background-color: #ffffff;
    
}
header .raiten-bt .inbox {
flex: 0 0 auto; 
    width: 49%;
    text-align: center;
}
header .raiten-bt .inbox img.bt-yoyaku {
    width: 100%;
}
}
@media screen and (min-width: 780px) {
header .raiten-bt .inbox img.smp{display: none}
header .raiten-bt .bt-yoyaku {
  display: block;
  width: 120px;
  position: fixed;
  top: 38px;
  right: 260px;
  z-index: 1000;
}
header .raiten-bt .line {  right: 130px;}
header .raiten-bt .raiten{ right: 260px;}
}
/*   --------------------------------------------  */


/*  メイン ---------------------------------------------------------------------------------------- */
main {
  color: #222222;
}
main .top-photo_pc {
  display: none
}
main .top-photo_smp {
  display: flex;
  flex-direction: column;
  width: 100%
}
main .top-photo_smo img {
  flex: 1 1 auto;
  width: 100%
}
/*  PC --------------------------------------------  */
@media screen and (min-width: 780px) {
  main .top-photo_smp {
    display: none
  }
  main .top-photo_pc {
    display: block;
  }
  main .top-photo_pc img {
    width: 100%;
    height: auto
  }
}
/*  --------------------------------------------  */

/*  各サイトリンク  */
main nav {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  margin: 40px auto;
  padding: 0 2%;
}
main nav a {
  position: relative;
  flex: 0 0 auto;
  width: 95%;
  margin: 6px auto;
  z-index: 0;
}
main nav div::before {
  background: rgba(0, 0, 0, .4); /* マスクの色(黒の50%) */
  bottom: 0;
  content: '';
  height: auto;
  left: 0;
  opacity: 0; /* 最初は透明(非表示) */
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .6s ease; /* ゆっくりopacityのみへ変化させる */
  width: 100%;
  z-index: 10
}
main nav div img {
  display: block
}
main nav div .btimg {
  position: relative;
  width: 100%;
  z-index: 1
}
main nav div:hover::before {
  opacity: 1; /* hoverしたら透過しない(表示させる) */
}
main nav div .bttext {
  height: 30px;
  position: absolute; /*重ねたい子要素にabsolute*/
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%); /*ベンダープレフィックス*/
  -webkit-transform: translate(-50%, -50%); /*ベンダープレフィックス*/
  transform: translate(-50%, -50%); /*センター寄せの修正*/
  color: #fff;
  font-size: 1.8rem;
  z-index: 100;
}
/*  PC --------------------------------------------  */
@media screen and (min-width: 780px) {
  main nav {
    flex-direction: row;
    justify-content: space-between;
    max-width: 900px;
  }
  main nav a {
    width: 32%;
    margin: 0;
  }
  main nav a .bttext {
    height: 30px;
  }
}
/*   ---------------------------------------------------------------------------------------- 　メイン 　end */


/*  フッター  ---------------------------------------------------------------------------------------- */
footer {
  display: flex;
  width: 87%;
  margin: 40px auto 20px;
  padding: 40px 6%;
  flex-direction: column;
  border-top: solid 1px #000000
}
footer .idolmake {
  flex: 1 1 auto;
  margin: 0 0 40px
}
footer .idolmake img {
  margin: 0 0 20px 0;
  height: 15px
}
/*  */
footer .footer-menu {
  flex: 1 1 auto;
  margin: 0 0 40px
}
footer .footer-menu img {
  margin: 0 0 20px 0;
  width: auto;
  height: 13px
}
footer .footer-menu .in-menu {
  display: flex
}
footer .menu1 {
  flex: 1 1 auto
}
footer .menu2 {
  flex: 1 1 auto
}
/* contact */
footer .contact {
  flex: 1 1 auto;
  margin: 0 0 40px
}
footer .contact img {
  margin: 0 0 20px 0;
  width: auto;
  height: 18px
}
footer .contact table {
  width: 100%;
  font-size: 12px;
  color: #555555;
}
footer .contact table th {
  width: 35%;
  margin: 0 0 10px 0;
  padding: 3px 0;
  text-align: left;
  vertical-align: top
}
footer .contact table th img {
  margin: 0 0 20px 0;
  width: auto;
  height: 13px
}
footer .contact table td {
  padding: 0;
  vertical-align: top
}
footer .contact table td .sns {
  vertical-align: top;
  margin: 0 10px 0 0;
  padding: 0;
  width: auto;
  height: 15px
}
 /* contact2 */
footer .contact2 {
  flex: 1 1 auto;
  margin: 0 0 40px
}
footer .contact2 img {
  margin: 0 0 20px 0;
  width: auto;
  height: 18px

}
footer .contact2 table {
  width: 100%;
  font-size: 12px;
  color: #555555;
}
footer .contact2 table th {
  width: 35%;
  margin: 0 0 10px 0;
  padding: 3px 0;
  text-align: left;
  vertical-align: top
}
footer .contact2 table th img {
  margin: 0 0 20px 0;
  width: auto;
  height: 13px
}
footer .contact2 table td {
  padding: 0;
  vertical-align: top
}
footer .contact2 table td .sns {
  vertical-align: top;
  margin: 0 10px 0 0;
  padding: 0;
  width: auto;
  height: 15px
} 
@media screen and (min-width: 1100px) {
  footer {
    max-width: 1100px;
    margin: 40px auto 20px;
    padding: 40px 0;
    flex-wrap: nowrap;
    flex-direction: row
  }
  footer img {
    margin: 0 0 12px 0
  }
  footer .idolmake {
    flex: 1 1 auto;
    width: 6%;
    margin: 0
  }
  /*  */
  footer .footer-menu {
    flex: 1 1 auto;
    width: 20%;
    margin: 0
  }
  footer .footer-menu .in-menu {
    display: flex;
    width: 240px
  }
  footer .menu1 {
    flex: 1 1 auto;
    width: 50%
  }
  footer .menu2 {
    flex: 1 1 auto;
    width: 50%
  }
  /* contact */
  footer .contact {
    flex: 1 1 auto;
    width: 15%;
    margin: 0 2% 0 0;
  }
  footer .contact table th {
    width: 31%;
  }
  /* contact2 */
  footer .contact2 {
    flex: 1 1 auto;
    width: 12%;
    margin: 0
  }
  footer .contact2 table {
    margin: 38px 0 0 0;
    }
  footer .contact table th {
    width: 31%;
  }
}
/*   ---------------------------------------------------------------------------------------- 　フッター 　end */