@media screen and (max-width: 414px) {
html{
  height:100%;
}
body {
      opacity: 1;
      animation-duration: 3s;
      animation-name: fade-in;
      -moz-animation-duration: 3s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 3s;
      -webkit-animation-name: fade-in;
  text-align:center;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
}

::-webkit-scrollbar {
    width: 0px;
  	height:0px;
}
  
.hot_top{
/*width:140px;height:346px;*/
  margin:0 auto;
  padding-top:28px;
  position:relative
  background-color:#FF0000;
  width:120px;
}
.tm_logo{width:79px;height:79px;margin:0 auto;}
.b_logounder{width:120px;height:25px;}
.b_about{width:130px;height:34px;}
.b_staff{width:130px;height:34px;}
.b_works{width:130px;height:34px;}
.b_material{width:130px;height:34px;}
.b_line0{width:120px;height:3px;}
.b_line1{width:120px;height:2px;}
.b_line2{width:120px;height:2px;}
.b_line3{width:120px;height:2px;}
.b_line4{width:120px;height:2px;}
.b_line5{width:120px;height:2px;}
.b_line6{width:120px;height:2px;}
.b_line7{width:120px;height:2px;}
.tm_logo img{width:79px;height:79px;margin:0 auto;}
.b_logounder img{width:120px;}
.b_about img{width:130px;height:34px;}
.b_staff img{width:130px;height:34px;}
.b_works img{width:130px;height:34px;}
.b_material img{width:130px;height:34px;}
.b_line0 img{width:120px;height:3px;}
.b_line1 img{width:120px;height:2px;}
.b_line2 img{width:120px;height:2px;}
.b_line3 img{width:120px;height:2px;}
.b_line4 img{width:120px;height:2px;}
.b_line5 img{width:120px;height:2px;}
.b_line6 img{width:120px;height:2px;}
.b_line7 img{width:120px;height:2px;}

.tm_logo{
height=0.1%;
}

.tm_text{
  height:1.3%;
}
.tml_text{
  height:1.5%;
}
.tm_line{
height:0.1%;
}

a:hover img{
  opacity:0.5;
  -moz-opacity:0.5;
  filter:alpha(opacity = 50);
}

#whitein{
    background-image:url("../img/top_bg.jpg?0");
background-repeat:no-repeat;
  background-size:cover;
  background-position:left bottom;
  height:100%;
}

.firstimg {
      animation-duration: 3s;
      animation-name: fade-in;
      -moz-animation-duration: 3s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 3s;
      -webkit-animation-name: fade-in;
  background-image:url("../img/paper.jpg?1"); 
   background-size:cover;
     background-position:right top;
	position:absolute;
	z-index:10;
  height:100%;
  width:100%;
/*    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;*/
}

.firstimg img{
margin:20% auto;
}



div#content{
      animation-duration: 3s;
      animation-name: fade-in;
      -moz-animation-duration: 3s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 3s;
      -webkit-animation-name: fade-in;
width:15%;
/*min-width:240px;*/
margin:0 auto;
  text-align:center;
  letter-spacing: 0.5em;
  z-index:2;
  height:100%;
  background-color:#FF0000;
}

img{
  padding-bottom:0.5%;
  padding-top:0.5%;
  margin:0 auto;
}
.menulogo{
padding-bottom:2.5%;
  padding-top:2.5%;
  margin: 0 auto;
}

.ttl_area{
  font-size:1.2em;
  letter-spacing: 0.5em;
  text-align:left;
    width:25%;
  margin:0 auto;
}

img.lodoSize{
  width:50%;
}

#sidemenu1 {display:none;}
.sidemenu_area{display:none;}
.tr{display:none;}
.sidemenu_close{display:none;}
}
@media screen and (min-width: 415px) {
html{
  height:100%;
}
body {
      opacity: 1;
      animation-duration: 3s;
      animation-name: fade-in;
      -moz-animation-duration: 3s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 3s;
      -webkit-animation-name: fade-in;
  text-align:center;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
}

::-webkit-scrollbar {
    width: 0px;
  	height:0px;
}
  
.hot_top{
width:140px;height:346px;
  margin:0 auto;
  padding-top:60px;
  position:relative;
}
.tm_logo{width:79px;height:79px;margin:0 auto;}
.b_logounder{width:140px;height:48px;}
.b_about{width:150px;height:36px;}
.b_staff{width:150px;height:36px;}
.b_works{width:150px;height:36px;}
.b_material{width:150px;height:36px;}
.b_line0{width:140px;height:4px;}
.b_line1{width:140px;height:3px;}
.b_line2{width:140px;height:3px;}
.b_line3{width:140px;height:3px;}
.b_line4{width:140px;height:3px;}
.b_line5{width:140px;height:3px;}
.b_line6{width:140px;height:3px;}
.b_line7{width:140px;height:3px;}
.tm_logo img{width:79px;height:79px;margin:0 auto;}
.b_logounder img{width:140px;}
.b_about img{width:150px;height:36px;}
.b_staff img{width:150px;height:36px;}
.b_works img{width:150px;height:36px;}
.b_material img{width:150px;height:36px;}
.b_line0 img{width:140px;height:4px;}
.b_line1 img{width:140px;height:3px;}
.b_line2 img{width:140px;height:3px;}
.b_line3 img{width:140px;height:3px;}
.b_line4 img{width:140px;height:3px;}
.b_line5 img{width:140px;height:3px;}
.b_line6 img{width:140px;height:3px;}
.b_line7 img{width:140px;height:3px;}


.tm_logo{
height=0.1%;
}

.tm_text{
  height:1.3%;
}
.tml_text{
  height:1.5%;
}
.tm_line{
height:0.1%;
}

a:hover img{
  opacity:0.5;
  -moz-opacity:0.5;
  filter:alpha(opacity = 50);
}

#whitein{
    background-image:url("../img/top_bg.jpg?1");
background-repeat:no-repeat;
  background-size:cover;
  height:100%;
}

.firstimg {
      animation-duration: 3s;
      animation-name: fade-in;
      -moz-animation-duration: 3s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 3s;
      -webkit-animation-name: fade-in;
  background-image:url("../img/paper.jpg?1");  
  background-size:cover;
	position:absolute;
	z-index:10;
  height:100%;
  width:100%;
/*    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;*/
}

.firstimg img{
margin:15% auto;
}


div#content{
      animation-duration: 3s;
      animation-name: fade-in;
      -moz-animation-duration: 3s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 3s;
      -webkit-animation-name: fade-in;
width:15%;
/*min-width:240px;*/
margin:0 auto;
  text-align:center;
  letter-spacing: 0.5em;
  z-index:2;
  height:100%;
  background-color:#FF0000;
}

img{
  padding-bottom:0.5%;
  padding-top:0.5%;
  margin:0 auto;
}
.menulogo{
padding-bottom:2.5%;
  padding-top:2.5%;
  margin: 0 auto;
}

.ttl_area{
  font-size:1.2em;
  letter-spacing: 0.5em;
  text-align:left;
    width:25%;
  margin:0 auto;
}

img.lodoSize{
  width:50%;
}

#sidemenu1 {display:none;}
.sidemenu_area{display:none;}
.tr{display:none;}
.sidemenu_close{display:none;}
}