/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 220px;
height: auto;
width /***/:auto;
}
#container{
width:100%;
}


h1         {font-size:3em;font-family:"Balthazar", serif;}

h2         {font-size:1.5em;font-family:"Hind Madurai", serif;}

h3         {font-size:1.5em;font-family:"Hind Madurai", serif;}

h4         {font-size:1.5em;font-family:"Hind Madurai", serif;}


p          {font-size:1em;font-family:"Hind Madurai", serif;;color:#444444}

address    {font-size:0.8em;color:#444444}

body       {text-align:center}

ul         {list-style-type:none;margin-left:0;padding-left:0}

li         {display:inline;font-size:1em;padding-right:10px;}

li a       {color:#000000;font-family:"Hind Madurai", serif;}

a          {color:#000000;font-family:"Hind Madurai", serif;}

a:hover    {color:#808080}

.text      {font-family:"Noto Sans JP", serif;margin-left:auto;width:100%;margin-right:auto;text-align:left;}

.works      {font-family:"Noto Sans JP", serif}

.contents {display: inline-block}

#genre     {font-size:1em}

#massage   {font-size:0.7em;font-family:"Noto Sans JP", serif}

.topic    {font-size:1em}

#menu {display:none;}
 
.slicknav_menu {display:block;}

img:hover {opacity:0.5;}

.sns-icons {
    margin-top: 10px;
  }  

.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

}