@charset "utf-8";

@media screen and (max-width : 320px){
　/*
　　'最大幅' 320px 以下の指定 スマートフォン以下専用スタイル
　　横幅320px以下の環境だけに適用されるスタイル
　　*/

section{
  width: 99px;
  margin-left: 10px;
}

.youtube{
  padding-bottom: 63.25%;
}

/****▼modal window****/

.lb {
   display: flex;
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   justify-content: center;
   align-items: center;
   background: rgba(0,0,0,.7);
   opacity: 0;
   transition: .3s opacity ease;
   z-index: -1;
}

.lb img {
   width: auto !important;
   max-height: 100%!important;
   transform: scale(.7);
   transition: .4s transform ease;
   pointer-events: none;
}

.lb:target {
   opacity: 1;
   z-index: 103;
}

.lb:target img {
   transform: scale(1);
}


/* なんちゃって閉じるボタン（いらない場合は消す） */
.lb::before,.lb::after {
   display: block;
   position: fixed;
   content: "";
   width: 24px;
   height:3px;
   top: 24px;
   right: 12px;
   background: #fff;
   border-radius: 4px;
}
.lb::before {
   transform: rotate(-315deg);
}
.lb::after {
   transform: rotate(315deg);
}
/****▼modal window****/

h3::before{
  width: 460px;
  height: 130px;
}


}


 @media screen and (max-width : 599px){
 　/*
 　　'最大幅' 599px 以下の指定 スマートフォン以下専用スタイル
 　　横幅599px以下の環境だけに適用されるスタイル
 　　*/

 img{
 max-width: 100%;
 height: auto;
 width /***/:auto;　
 }

html{
  width: 99%
}

 body{
 width:99%;
 }

 .flexbox {
     display: -webkit-flex;
     display: flex;
     justify-content: center;
      flex-wrap: wrap;
     }

 nav ul li.livelight_logo{
   display: none;
 }

 .groval{
	 margin-top: 8px;
   margin-left: 15px;
 }

nav ul li{
  margin-left: 10px;
  margin-top: 2px;
}

 nav ul li a{
	 margin-top: 8px;
	 /*width: 55px;*/
	 font-size: 8px;
 }


 p.text2{
	 padding: 6%;
   padding-top: 190px;
 }

 h4.w1{
 	color :red;
 }

 div.grid3{
	 width:45%;
	 margin: 2%;
 }

div.grid4{
  width: 95%;
  height: auto;
  margin: 2%;
}

div.grid4.first{
  width: 95%
}

section{
  width: 87px;
  margin-left: 10px;
}

h6{
  width: 90px;
  text-align: center;
}

.youtube{
  top: 5px;
  padding-bottom: 33.25%;
}

.youtube_2{
  padding-bottom: 23.25%;
}

.youtube iframe, .youtube_2 iframe{
  height: 70px;
  width: 90px;
}


 .dropmenu li{
  margin-left: 0px;
  }

  .imgonmouse img{
    margin-top: 4px;
    margin-bottom: 4px;
    width: 360px;
  }

  .imgonmouse ul li img {
    height: 30px;
    width: 30px;
  }

 div.flexbox .main{
   width: 99%;
 }

 /****▼modal window****/

.lb {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: .3s opacity ease;
    z-index: -1;
}

.lb img {
    width: auto !important;
    max-height: 100%!important;
    transform: scale(.7);
    transition: .4s transform ease;
    pointer-events: none;
}

.lb:target {
    opacity: 1;
    z-index: 103;
}

.lb:target img {
    transform: scale(1);
}


/* なんちゃって閉じるボタン（いらない場合は消す） */
.lb::before,.lb::after {
    display: block;
    position: fixed;
    content: "";
    width: 24px;
    height:3px;
    top: 24px;
    right: 12px;
    background: #fff;
    border-radius: 4px;
}
.lb::before {
    transform: rotate(-315deg);
}
.lb::after {
    transform: rotate(315deg);
}
/****▼modal window****/

.p_4 {
    position: absolute;
    left: 8px;
    top: 2200px;
     }

h3:before{
     width: 510px;
    height: 130px;
  }


}




@media only screen and (max-width: 767px) {
  .menu{
    display: none;
    width: 100%;
  }

  .menu .inmenu{
    display: block;
    padding: 12px 10px;
    background: #457B9D;
    color: #fff;
    text-decoration: none;
}

  .menu a:hover{
    background: #ccc;
  }

  .toggle{
    display: block;
    position: relative;
    width: 100%;
  }

  .close{
    display: block;
    position: relative;
    width: 100%;
    background: #457B9D;
  }

  .toggle a{
    display: block;
    padding: 12px 0 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background:#1D3557;
  }

  .toggle:before{
    position: absolute;
    font-family: "blogicon";
    content: "\f003";
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color:#fff;
  }

  /****▼modal window****/

 .lb {
     display: flex;
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     justify-content: center;
     align-items: center;
     background: rgba(0,0,0,.7);
     opacity: 0;
     transition: .3s opacity ease;
     z-index: -1;
 }

 .lb img {
     width: auto !important;
     max-height: 100%!important;
     transform: scale(.7);
     transition: .4s transform ease;
     pointer-events: none;
 }

 .lb:target {
     opacity: 1;
     z-index: 103;
 }

 .lb:target img {
     transform: scale(1);
 }


 /* なんちゃって閉じるボタン（いらない場合は消す） */
 .lb::before,.lb::after {
     display: block;
     position: fixed;
     content: "";
     width: 24px;
     height:3px;
     top: 24px;
     right: 12px;
     background: #fff;
     border-radius: 4px;
 }
 .lb::before {
     transform: rotate(-315deg);
 }
 .lb::after {
     transform: rotate(315deg);
 }
 /****▼modal window****/


 .chuu1{
  width: 180px;
 }

}



 @media screen and (min-width : 600px) and (max-width : 959px){
 　　/*
 　　600px ~ 959px 以下の指定 タブレット専用スタイル
 　　横幅600px ~ 959px以下の環境だけに適用されるスタイル
 　　*/

 img{
 max-width: 100%;
 height: auto;
 width /***/:auto;　
 }

 body{
 width:100%;
 }

 nav ul li.livelight_logo{
	 margin: 5px;
	 width: 60px;
 }

 nav ul li{
	 margin-left: 60px;
 }

 p.text2{
	 padding-left: 20%;
 }

 h4.w1{
 	color :red;
 }

 div.grid3{
	 margin: 5%;
   width: 40%;
 }

 div.grid4{
   margin: 4%;
   width: 44%;
   height: auto;
 }

section{
  width: 160px;
  float: left;
  margin-left: 92px;
  text-align: center;
      }

      .imgonmouse img{
        margin-top: 4px;
        margin-bottom: 4px;
        width: 360px;
      }

      .imgonmouse ul li img {
        height: 30px;
        width: 30px;
      }


.youtube{
  padding-bottom: 56.25%;
  margin-top: 0px;
  padding-top: 0px;
  height: 240px;
}

  .youtube_2{
    padding-bottom: 36.25%;
    margin-top: 0px;
    padding-top: 0px;
}

.youtube iframe{
  height: 120px;
}


 table.company {
     width: 400px;
   }

 }


 @media ( min-width : 600px ){
 .flexbox {
     display: -webkit-flex;
     display: flex;
     justify-content: center;
      flex-wrap: wrap;
     }

 /*.main {
     margin: 0 10px 0 0;
   }*/

   /****▼modal window****/

   .lb {
      display: flex;
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,.7);
      opacity: 0;
      transition: .3s opacity ease;
      z-index: -1;
   }

   .lb img {
      width: auto !important;
      max-height: 100%!important;
      transform: scale(.7);
      transition: .4s transform ease;
      pointer-events: none;
   }

   .lb:target {
      opacity: 1;
      z-index: 103;
   }

   .lb:target img {
      transform: scale(1);
   }


   /* なんちゃって閉じるボタン（いらない場合は消す） */
   .lb::before,.lb::after {
      display: block;
      position: fixed;
      content: "";
      width: 24px;
      height:3px;
      top: 24px;
      right: 12px;
      background: #fff;
      border-radius: 4px;
   }
   .lb::before {
      transform: rotate(-315deg);
   }
   .lb::after {
      transform: rotate(315deg);
   }
   /****▼modal window****/


 }


 @media screen and (min-width : 599px) and (max-width : 690px){
   /*
   　　599px ~ 640px 以下の指定 タブレット専用スタイル
   　　横幅599px ~ 640px以下の環境だけに適用されるスタイル
   　　*/

 section{
   float: none;
   margin-left: 80px;
   margin-top: 5px;
 }

   .youtube{
     padding-bottom: 66.25%;
     margin-top: 0px;
     padding-top: 0px;
     height: 240px;
   }

   div.grid4{
     height: auto;
   }

   /****▼modal window****/

   .lb {
      display: flex;
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,.7);
      opacity: 0;
      transition: .3s opacity ease;
      z-index: -1;
   }

   .lb img {
      width: auto !important;
      max-height: 100%!important;
      transform: scale(.7);
      transition: .4s transform ease;
      pointer-events: none;
   }

   .lb:target {
      opacity: 1;
      z-index: 103;
   }

   .lb:target img {
      transform: scale(1);
   }


   /* なんちゃって閉じるボタン（いらない場合は消す） */
   .lb::before,.lb::after {
      display: block;
      position: fixed;
      content: "";
      width: 24px;
      height:3px;
      top: 24px;
      right: 12px;
      background: #fff;
      border-radius: 4px;
   }
   .lb::before {
      transform: rotate(-315deg);
   }
   .lb::after {
      transform: rotate(315deg);
   }
   /****▼modal window****/

   .chuu1{
   	width: 180px;
   }

 }



 @media screen and (min-width : 960px) and (max-width : 1280px){
 　　/*
 　　960px ~ 1280px 以下の指定 狭いPC専用(横置きタブレット)スタイル
 　　横幅600px ~ 959px以下の環境だけに適用されるスタイル
 　　*/

 /*img{
 max-width: 100%;
 height: auto;
 width /***:auto;　
 }*/

 body{
 width:99%;
 }

 div.grid4.first{
 	margin-left: 5%;
 }

 div.grid3.first{
  margin-left: 4%;
 }

 .grid4{
   width: 45%;
   margin-left: 70px;
   height: auto;
 }

 .imgonmouse{
   overflow: hidden;
 }

 .imgonmouse img{
   margin-top: 4px;
   margin-bottom: 4px;
   width: 360px;
 }

 .imgonmouse ul li img {
   height: 30px;
   width: 30px;
 }

 .imgonmouse ul li{
   list-style-type: none;
   float: left;
 }

 .youtube iframe {
     width: 140px;
 }

.grid{
width: 23%;
}


table.company {
    width: 500px;
  }

  h4.w1{
   color :red;
  }

  /****▼modal window****/

 .lb {
     display: flex;
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     justify-content: center;
     align-items: center;
     background: rgba(0,0,0,.7);
     opacity: 0;
     transition: .3s opacity ease;
     z-index: -1;
 }

 .lb img {
     width: auto !important;
     max-height: 100%!important;
     transform: scale(.7);
     transition: .4s transform ease;
     pointer-events: none;
 }

 .lb:target {
     opacity: 1;
     z-index: 103;
 }

 .lb:target img {
     transform: scale(1);
 }


 /* なんちゃって閉じるボタン（いらない場合は消す） */
 .lb::before,.lb::after {
     display: block;
     position: fixed;
     content: "";
     width: 24px;
     height:3px;
     top: 24px;
     right: 12px;
     background: #fff;
     border-radius: 4px;
 }
 .lb::before {
     transform: rotate(-315deg);
 }
 .lb::after {
     transform: rotate(315deg);
 }
 /****▼modal window****/

 .sample5_img{
 	position: absolute;
  left: 383px;
 	}

}



 @media screen and (min-width : 1281px){
 　　/*
 　　最小幅 1281px 以上の指定 広いPC以上専用スタイル
 　　横幅1281px以上のすべての環境に適用されるスタイル
 　　*/

 img{
 max-width: 99%;
 height: auto;
 width /***/:auto;
 }

 body{
 width:100%;
 }

 .first{
	 margin-left: 5%;
 }

div.grid4.first{
      margin-left: 10%;
}

table.company {
    width: 500px;
  }

  h4.w1{
   color :red;
  }

  .image img {
  	display: block;
  	margin: auto;
  }

  a.a3{
   margin-left: 5px;
   margin-right: 5px;
  }

  /****▼modal window****/

 .lb {
     display: flex;
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     justify-content: center;
     align-items: center;
     background: rgba(0,0,0,.7);
     opacity: 0;
     transition: .3s opacity ease;
     z-index: -1;
 }

 .lb img {
     width: auto !important;
     max-height: 100%!important;
     transform: scale(.7);
     transition: .4s transform ease;
     pointer-events: none;
 }

 .lb:target {
     opacity: 1;
     z-index: 103;
 }

 .lb:target img {
     transform: scale(1);
 }


 /* なんちゃって閉じるボタン（いらない場合は消す） */
 .lb::before,.lb::after {
     display: block;
     position: fixed;
     content: "";
     width: 24px;
     height:3px;
     top: 24px;
     right: 12px;
     background: #fff;
     border-radius: 4px;
 }
 .lb::before {
     transform: rotate(-315deg);
 }
 .lb::after {
     transform: rotate(315deg);
 }
 /****▼modal window****/

 .sample5_img{
 	position: absolute;
  left: 383px;
 	}


 }