/* -------------------------------- 

style

-------------------------------- */
body {
  font-size: 1.6rem;
  font-family: 'Sawarabi Gothic', sans-serif;
  font-family: 'Noto Sans JP', sans-serif;
  color: #595757;
  background-color: #ffffff;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
}

#contents .cd-hero-slider h1 {
    padding-top: 0px;
    font-weight:600!important;
    line-height:30px;
    color:#ffffff;
    text-shadow:0px 1px 10px #000000;
    font-size: 23px;
    max-width:300px;
    margin-bottom: 0px;
    margin:0 auto;
    text-align: center;
}

#contents .cd-hero-slider h2 {
    padding-top: 0px;
    font-weight:600;
    line-height:30px;
    color:#ffffff;
    text-shadow:0px 1px 10px #000000;
    font-size: 23px;
    max-width:300px;
    margin-bottom: 0px;
}

#contents .cd-hero-slider p {
     font-size:18px;
     font-weight: 600;
     color:#ffffff;
     text-shadow:0px 1px 10px #000000;
     line-height: 25px;
     padding-top:63px;
     margin-bottom:0px;
     }

.top-sub-title {
     font-size:18px;
     font-weight: 600;
     color:#ffffff;
     text-shadow:0px 1px 10px #000000;
     line-height: 25px;
     padding-top:63px;
     margin-bottom:0px;
     }

@media only screen and (min-width: 1170px){
#contents .cd-hero-slider h1 {
    font-size: 2.7em;
    line-height:30px;
    }

#contents .cd-hero-slider h2 {
    font-size: 2.7em;
    line-height:30px;
    }
    }

@media only screen and (min-width: 768px) {

#contents .cd-hero-slider h1 {
    padding-top: 10px;
    min-width: 550px;
    line-height:50px;
    color:#ffffff;
    text-shadow:0px 1px 10px #000000;
    font-size:35px;
    margin-bottom:-10px;
    font-weight: 600!important;
}


#contents .cd-hero-slider h2 {
    padding-top: 10px;
    min-width: 550px;
    font-weight: 900;
    line-height:50px;
    color:#ffffff;
    text-shadow:0px 1px 10px #000000;
    font-size:35px;
    margin-bottom:-10px;
}

.top-sub-title {
    font-size: 23px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0px 1px 10px #000000;
    line-height: 30px;
    margin-bottom: 0px;
    margin-top: 0px;
}

#contents .cd-hero-slider p {
     font-size:23px;
     font-weight: 600;
     color:#ffffff;
     text-shadow:0px 1px 10px #000000;
     line-height: 30px;
     margin-bottom:0px;
     margin-top:0px;
     }

}

@media only screen and (min-width: 497px) {
    padding-top: 10px;
    font-weight:600;
    line-height:30px;
    color:#ffffff;
    text-shadow:0px 1px 10px #595757;
    font-size: 23px;
}
}


element.style {
}
@media only screen and (min-width: 768px)
.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width {
    padding-top: 170px;
}
@media only screen and (min-width: 768px)
.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width {
    padding-top: 150px;
}
.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    padding-top: 150px;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

@media only screen and (min-width: 768px) {
.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
    padding-top: 170px;
  }
  }

@media only screen and (min-width: 1170px) {
  .cd-hero-slider .cd-full-width,
  .cd-hero-slider .cd-half-width {
    padding-top: 250px;
  }
  }
/* -------------------------------- 

Main content style

-------------------------------- */
.giga-school-main-content{
  height: auto;
}
/* -------------------------------- 

スライド画像

-------------------------------- */

.cd-hero-slider li:first-of-type {
  background-color: #2c343b;
  background-image: url(../img/header-for-mobile.jpg);
  background-size:cover;
  }

@media only screen and (min-width: 450px) {
.cd-hero-slider li:first-of-type {
  background-color: #2c343b;
  background-image: url(../img/top.jpg);
  background-size:cover;
} 
}



/* -------------------------------- 

コンテンツ-タイトル

-------------------------------- */
.giga-school .title {
  width: 100%;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5em;
  text-align: center;
  padding: 20px 20px 0 20px;
  
}


@media only screen and (min-width: 768px) {
  .giga-school{
    width: 100%;
    display: table;
      }	
      
  .giga-school .title {
    max-width:90%;
    font-size: 25px;
    font-weight:400;
    padding: 20px;
    margin:0 auto;
    margin-top:50px;
    font-weight:600;

  }

}


/* -------------------------------- 
コンテンツのテキスト
-------------------------------- */

.brand-box{
           width:100%;
           margin:0 auto;
           margin-top:20px;
           }

.main_txt{
    line-height:25px;
    padding:0 10px;
    font-size:14px;
    margin-bottom:40px;
    }

@media only screen and (min-width: 768px) {

.main_txt{
    font-size:16px;
    width:90%;
    line-height:27px;
    margin:0 auto;
    margin-bottom:50px;
    }
    
.brand-box{
           width:90%;
           border:0px solid #ccc;
           margin:0 auto;
           }
           

}

/* --------------------------------

section01

-------------------------------- */

#sec01 img{
            max-width:35%;
            }

@media only screen and (min-width: 768px) {
#sec01 img{
            min-width:70%;
            }
            }
            
/* --------------------------------

section02

-------------------------------- */

#sec02 img{
            max-width:100%;
            margin-top:20px;
            }

@media only screen and (min-width: 768px) {
#sec02 img{
            min-width:90%;
            }
            }
/* --------------------------------

section03

-------------------------------- */
#sec02 img{
            min-width:60%;
           }
#sec03 img{
            max-width:70%;
            margin-bottom: 0px!important;
            }
@media only screen and (min-width: 768px) {
#sec03 img{
            max-width:80%;
            margin-top:20px;
            margin-bottom: 0px!important;
            }
            }
@media only screen and (min-width: 480px) {
#sec03 img{
            max-width:90%;
            margin-top:20px;
            margin-bottom: 0px!important;
            }
            }
.product-img {
    height: auto;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 0px!important;
}
@media only screen and (min-width: 1090px) {
#sec02 img{
            min-width:60%;
            }
            }

@media only screen and (min-width: 768px) {
#sec02 img{
            margin-top: -50px;
            padding:0 20px;
            min-width: 70%;
            }
            }

/* -------------------------------- 
コンテンツのテキスト
-------------------------------- */

.inner{
   width:90%;
   margin:0 auto;
   }

/* --------------------------------

5カラム

-------------------------------- */
.page-cover-5 {
  margin-top: 20px;
}

.page-cover-5 .thumbnail-title {
  hinfoeight: auto;
  color: #0F78B1;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.3em;
}

.page-cover-5 img {
  width: 100%;
}

.page-cover-5 .merit-inbox {
 padding: 0;
}

@media only screen and (min-width: 480px)  {
.page-cover-5 img {
  width: 60%;
}
}
      
@media only screen and (min-width: 768px)  {
  .page-cover-5 {
    display: table;
    width: 100%;
    margin: 20px 0 10px 0;
  }
  
  .page-cover-5 img {
	width: 100%;
}  

  .page-cover-5 .merit-inbox {
   padding: 10px;
  }
  .page-cover-5 .thumbnail-title {
    height: auto;
    margin:15px;
    margin-top:20px;
    text-align: center;
  }

  .thumbnail-column{
    display: table-cell;
    width: 180px;
    border-radius: 3px;
	}

  .thumbnail-column img {
    margin: 0 auto;
    text-align: center;
    width: 90%;
}
}



/* -------------------------------- 

ブルーバック

-------------------------------- */

.blue{
         width:100%;
         height:auto;
         background-color:#295098;
         clear:both;
         padding-bottom: 20px;
         }
         
@media only screen and (min-width: 768px) {

.blue{
         width:100%;
         height:auto;
         margin: 0 auto;
         overflow: hidden;
         background-color:#295098;
         clear:both;
         padding-bottom: 50px;
}
}

/* -------------------------------- 

濃いブルーバック

-------------------------------- */

.blue2{
         width:100%;
         height:auto;
         background-color:#03337f;
         padding-bottom:10px;
         clear:both;
         }
         
@media only screen and (min-width: 768px) {

.blue2{
         width:100%;
         height:auto;
         margin: 0 auto;
         overflow: hidden;
         background-color:#03337f;
         clear:both;
         
}
}

/* -------------------------------- 

製品群イメージ

-------------------------------- */
.product-img{
    height: auto;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
    }
    
@media only screen and (min-width: 800px) {

.product-img{
    max-height: 280px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
    }
    }

/* -------------------------------- 

製品群

-------------------------------- */

.w-title{
        text-align: center;
    font-weight: bold;
    font-size: 25px;
    padding: 50px 10px 50px 10px;
    line-height: 33px;
    color:#ffffff;
        }
@media only screen and (min-width: 768px) {
.w-title{
        text-align: center;
    font-weight: bold;
    font-size: 25px;
    padding: 50px 10px 50px 10px;
    line-height: 33px;
    color:#ffffff;
        }
        }
.product-name{
    height: auto;
    margin: 15px 0px;
    margin-top: 20px;
    text-align: center;
    font-size: 35px;
    line-height: 23px;
    color: #ffffff;
    background-color: #03337f;
    padding: 20px 20px 0 20px;
    font-weight: 700;
    font-size: 28px;
}

.product-text{
    font-size: 16px;
    color: #ffffff;
    font-weight: 600;
    line-height: 27px;
    margin: 0 0 20px 0;
    text-align: center;
}

@media only screen and (min-width: 768px) {
   .w-title{
    text-align: center;
    font-weight: bold;
    font-size: 35px;
    margin: 50px 20px;
    line-height: 40px;
    color:#ffffff;
        }


        
.product-name{
    height: auto;
    margin: 15px 15px 0 15px;
    margin-top: 20px;
    text-align: center;
    line-height: 23px;
    color: #ffffff;
    background-color: #03337f;
    padding: 30px 0;
    font-weight: 700;
}

.product-text{
    font-size: 22px;
    color: #ffffff;
    font-weight: 600;
    line-height: 35px;
    margin: 0 20px 20px 20px;
    text-align: center;
}
}

/* -------------------------------- 
グレーバック
-------------------------------- */

.gray-bg-2{
         width:100%;
         height:auto;
         overflow: hidden;
         background-color:#F5F5F5;
         padding:0 20px 0px 20px;
        
}

.gray-title{
         width:100%;
         height:auto;
         margin: 0 auto;
         overflow: hidden;
         font-size:18px;
         text-align:center;
         padding:40px 20px 0 20px;
         line-height: 35px;
         font-weight:600;
         
}


@media only screen and (min-width: 768px) {

.gray-bg-2{
         width:100%;
         height:auto;
         overflow: hidden;
         background-color:#F5F5F5;
         padding:0 30px 10px 30px;
        
}

.gray-title{
         width:100%;
         height:auto;
         margin: 0 auto;
         overflow: hidden;;
         font-size:23px;
         text-align:center;
         padding:40px 0 10px 0;
         line-height:35px;
         
}
}

/* -------------------------------- 
基本レイアウト
-------------------------------- */
.clumun{
	margin-top: 10px;
	
}

@media only screen and (min-width: 1170px) {
.clumun{
	margin-top: 0;
	margin-bottom: 50px;
}
}



/* -------------------------------- 

AIエッジ・コンピューティングによる検温と顔認証

-------------------------------- */

.brand_txt-2{
    font-size:15px;
    width:90%;
    line-height:35px;
    margin:0 auto;
    }

.sub-title{
	          text-align: left;
	          font-weight: 600;
	          font-size:18px;
	          display: inline; 
	          margin-bottom:20px;
	          padding: 3px 3px 3px 0px;
	          border-left:0px solid #ffffff;
}


@media only screen and (min-width: 768px) {

.brand_txt-2{
    font-size:15px;
    width:90%;
    line-height:30px;
    margin:0 auto;
    }
    
.sub-title{
	          text-align: left;
	          font-weight: 600;
	          font-size:18px;
	          display: block; 
	          margin-bottom:10px;             
}
}

/* -------------------------------- 

AIエッジ・コンピューティングによる検温と顔認証の
カラムCSS

-------------------------------- */

.about_inner{
         width:100%;
         height:auto;
         margin: 0 auto;
         overflow: hidden;
         background-color:#295098;
         margin-right:20px;
}

.about_inner-w{
         width:100%;
         height:auto;
         margin: 0 auto;
         overflow: hidden;
         background-color:#ffffff;
         margin-right:20px;
}


.about-box{
              width:100%;
              height:auto;
              border: 0px solid #dddddd;
              margin: 0 auto;
              margin-bottom:20px;
              padding:0 10px;
              padding-top:30px;
}

.about-box p{
          width:100%;
          font-size: 14px;
          line-height: 27px;
          margin:0 auto;
          color:#ffffff;
          padding-bottom:20px;
}


.product-box{
              margin:0 auto;
              border:1 solid #ccc;
}

.about-box-title{
    color:#ffffff;
    font-size:30px;
    text-align: left;
    padding:40px 20px 20px 0px;
    font-weight: 700;
    line-height: 30px;
    }
    
.about-box-title-1{
    color:#ffffff;
    font-size:30px;
    text-align: left;
    padding:0px 20px 10px 0px;
    font-weight: 700;
    line-height: 40px;
    border-bottom:0px;
    }
    
.about-box-title-2{
    color:#595757;
    font-size:30px;
    text-align: left;
    padding:40px 20px 10px 0px;
    font-weight: 700;
    line-height: 30px;
    }

@media only screen and (min-width: 768px)  {
.about-box-title-1{
    color:#ffffff;
    font-size:30px;
    text-align: left;
    padding:0px 20px 10px 0px;
    font-weight: 700;
    line-height: 40px;
    border-bottom:0px;
    margin-top: 20px;
    }
  .about_inner {
    display: table;
    width: 100%;
	}
	
.about_inner-w {
    display: table;
    width: 100%;
	}
	
	.about-box p{
          width:100%;
          font-size: 16px;
          line-height: 27px;
          margin:0 auto;
          padding:0px 0px 20px 0;
          color:#ffffff;
}

.about-box-title{
    color:#ffffff;
    font-size:44px;
    text-align: left;
    padding:40px 20px 20px 0px;
    font-weight: 700;
    line-height: 50px;
    }

.about-box-title-1{
    color:#ffffff;
    font-size:38px;
    text-align: left;
    padding:0px 20px 10px 0px;
    font-weight: 700;
    line-height: 50px;
    }

.about-box-title-2{
    color:#595757;
    font-size:44px;
    text-align: left;
    padding:40px 20px 20px 0px;
    font-weight: 700;
    line-height: 50px;
    }

.product-box{
              width:90%;
              margin:0 auto;
}
}
/* -------------------------------- 
802.11ax（Wi-Fi6）対応モデル
-------------------------------- */

.ap_text{
     font-size:20px;
     color: #ffffff;
     margin:0 0 20px 0;
     font-weight:600;
     line-height: 27px;
     }
     
.ap_text-2{
     font-size:22px;
     color: #595757;
     margin-bottom:10px;
     margin-left:20px;
     font-weight:600;
     line-height: 30px;
     }
     
@media only screen and (min-width: 768px)  {
.ap_text{
     font-size:22px;
     color: #ffffff;
     margin-bottom:20px;
     font-weight:600;
     line-height: 30px;
     margin-left:0px;
     }

.ap_text-2{
     font-size:24px;
     color: #595757;
     margin-bottom:40px;
     font-weight:600;
     line-height: 30px;
     margin-left:0px;
     }
     }

/* -------------------------------- 
305C ul
-------------------------------- */

.spec{
     color: #ffffff;
     line-height: 30px;
     padding: 20px 0 50px 0;
     font-size: 14px;
     text-align: left;
     }

.spec a{
     color: #ffffff;
     padding:10px 20px;
     line-height: 80px;
     background-color: #0F78B1;
     border-radius:3px;
     
} 

     
@media only screen and (min-width: 768px)  {
.spec{
     color: #ffffff;
     line-height: 30px;
     padding:20px;
     border-bottom: 0px dotted #ffffff;
     text-align: left;
     font-size: 16px;
     }
     
.spec a{
     min-width: 160px;
     font-weight: 600;
     color: #ffffff;
     padding:10px 20px;
     line-height: 80px;
     background-color: #0F78B1;
     border-radius:3px;
     transition: background-color 0.5s;
}

.spec a:hover{
       background-color: #bfd72f;
     }
     }
/* -------------------------------- 
410C ul
-------------------------------- */

.spec-b{
     color: #595757;
     line-height: 30px;
     }

/* -------------------------------- 
中央黒字タイトル
-------------------------------- */

.center-title-b{
            text-align: center;
            font-weight: bold;
            font-size:20px;
            margin:50px 10px 20px 10px;
            line-height: 33px;
            }

@media only screen and (min-width: 768px)  {
.center-title-b{
            text-align: center;
            font-weight: bold;
            font-size:32px;
            margin:70px 20px;
            line-height: 33px;
            }
            }
            
/* -------------------------------- 
中央黒字タイトル
-------------------------------- */

.solution-title{
            text-align: center;
            font-weight: bold;
            font-size:20px;
            margin:50px 10px 50px 10px;
            line-height: 33px;
            }

@media only screen and (min-width: 768px)  {
.solution-title{
            text-align: center;
            font-weight: bold;
            font-size:25px;
            margin:70px 20px;
            line-height: 40px;
            }
            }
            
/* -------------------------------- 
左寄せ黒字タイトル
-------------------------------- */

.left-title{
            text-align: left;
            font-weight: bold;
            font-size:20px;
            margin-bottom:20px;
            line-height: 33px;
            margin-top:20px;
            }

@media only screen and (min-width: 768px)  {
.left-title{
            text-align: left;
            font-weight: bold;
            font-size:25px;
            margin:20px 20px 30px 0px;
            line-height: 33px;
            }
            }
            
/* -------------------------------- 
左寄せ黒字テキスト
-------------------------------- */

.left-text{
          width:100%;
          font-size: 16px;
          line-height: 27px;
          margin:0 auto;
          padding:0px 0px 20px 0;
          color:#595757;
}
            
/* -------------------------------- 
AIエッジ・コンピューティングによる検温と顔認証の
左ボックス
-------------------------------- */

.abouta_inbox{
              height:auto;
              width:100%;
              margin:0 auto;
              background-color: #5e89ab;
              border:0px solid #ccc;
              background-image: url(../img/);
              background-size:cover ;
              background-repeat: no-repeat;
              
}

@media only screen and (min-width: 768px)  {

.abouta_inbox{
              width:auto;
              display: table-cell;
              height:auto;
              margin:0 auto;
              background-image: url(../img/temp.);
              background-size:cover ;
              vertical-align:middle;
              background-repeat: no-repeat;
}
} 

/* -------------------------------- 

2カラム(白）

-------------------------------- */

.column_inbox-3{
              height:auto;
              width:100%;
              margin:0 auto;
              border:0px solid #ccc;
              background-color: #ffffff;
              
}

@media only screen and (min-width: 768px) {

.column_inbox-3{
              width:auto;
              display: table-cell;
              height:auto;
              margin:0 auto;
              vertical-align:middle;
             
} 

.column_inbox-3 p{
             color:#595757;
             line-height: 25px;
             padding:30px;
             }
} 


/* -------------------------------- 

2カラム(青背景）

-------------------------------- */

.column_inbox-2{
              height:auto;
              width:100%;
              margin:0 auto;
              border:0px solid #ccc;
              background-color: #295098;
              
}

@media only screen and (min-width: 768px) {

.column_inbox-2{
              width:auto;
              display: table-cell;
              height:auto;
              margin:0 auto;
              vertical-align:middle;
              background-color: #295098;
              margin-top:30px:
} 

.column_inbox-2 p{
             color:#ffffff;
             line-height: 25px;
             padding:0 30px 20px 0px;
             }
} 

/* -------------------------------- 

2カラム(白）

-------------------------------- */

.column_inbox{
              height:auto;
              width:100%;
              margin:0 auto;
              border:0px solid #ccc;
              background-image: url(../img/temperature.jpg);
              background-size:cover ;
              
}

@media only screen and (min-width: 768px)  {

.column_inbox{
              width:auto;
              display: table-cell;
              height:auto;
              margin:0 auto;
              background-image: url(../img/temperature.jpg);
              background-size:cover ;
              vertical-align:middle;
} 

.column_inbox p{
             color:#ffffff;
             line-height: 25px;
             padding:30px;
             }
} 

/* -------------------------------- 
白カラム
右ボックス

-------------------------------- */

.columnr-w_inbox{
              width:100%;
              background-size:cover ;

} 


@media only screen and (min-width: 768px)  {
.columnr-w_inbox{
	          display: table-cell;
              width:50%;
              height:auto;
              margin:0 auto;
              vertical-align:middle;
}
}

/* -------------------------------- 
白カラム
右ボックス

-------------------------------- */

.columnr-g_inbox{
              width:100%;
              background-image: url(../img/class-room.jpg);
              background-size:cover ;

} 


@media only screen and (min-width: 768px)  {
.columnr-g_inbox{
	          display: table-cell;
              width:50%;
              height:auto;
              margin:0 auto;
              vertical-align:middle;
              background-image: url(../img/class-room.jpg);
              background-size:cover ;
              
}
}

/* -------------------------------- 
白カラムのテキスト
-------------------------------- */
.text-b{
font-size: 1.6rem;
    line-height: 1.8em;
    margin: 20px 0;

    }
    
@media only screen and (min-width: 768px)  {
font-size: 1.4rem;
    line-height: 1.5em;
    margin: 1.5em 0;
    }
    }
    
    
/* -------------------------------- 
3カラムの青タイトル（ネットワーク管理サービスXIQ）
-------------------------------- */

.nw-title {
  height: auto;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  line-height: 25px;
  margin-top:40px;
  background-color: #295098;
  padding:10px;
}
.nw-title-3 {
  height: auto;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  line-height: 25px;
  margin-top:0px;
  background-color: #295098;
  padding:10px;
}
@media only screen and (min-width: 768px)  {
  .nw-title {
    height: auto;
    margin:15px;
    margin-top:20px;
    text-align: center;
    font-size:18px;
    line-height: 23px;
    color: #ffffff;
    background-color: #295098;
    padding:10px;
	}
  .nw-title-3 {
    height: auto;
    margin:0px;
    margin-top:0px;
    text-align: center;
    font-size:18px;
    line-height: 23px;
    color: #ffffff;
    background-color: #295098;
    padding:15px;
    margin-bottom: 20px;
	}
    }


/* -------------------------------- 
事例
-------------------------------- */
.page-cover {
  margin-top: 20px;
}

.infotitle {
  height: auto;
  color: #4b4b4c;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
  line-height: 25px;
  margin-top:0px;
}


.infotxt {
  font-size: 14px;
  padding: 20px 30px;
  color: #595757;
  text-align: left;
  height:auto;
}

.page-cover img {
  width: 100%;
  margin-bottom: 10px;
}

.merit-inbox {
 padding: 0;
 height:auto;
}

@media only screen and (min-width: 480px)  {
.page-cover img {
  width: 80%;
}
.merit-inbox {
 padding: 0;
 height:auto;
}

}
      
@media only screen and (min-width: 768px)  {

  .page-cover {
    display: table;
    width: 100%;
    margin: 20px 0 10px 0;
  }
  
  .page-cover img {
	width: 100%;
}  

  .merit-inbox {
   padding: 10px;
   height:auto;
  }
  
  .infotitle {
    height: auto;
    margin:15px;
    margin-top:20px;
    text-align: center;
    font-size:18px;
    line-height: 23px;
	}
  
  .infotxt {
    text-align: left;
    max-width: 100%;
    height:auto;
    padding: 20px 5px 0 5px;
	}

  .left-column,
  .middle-column,
  .right-column {
    display: table-cell;
    width: 250px;
    border-radius: 3px;

	}
	
  .middle-column{
    border-left:1px dotted #DCDCDC;
    border-right:1px dotted #DCDCDC;
	}
	

  .left-column img,
  .middle-column img,
  .right-column img {
    margin: 0 auto;
    text-align: center;
    width: 90%;
    vertical-align: middle;
}
}

   
/* -------------------------------- 
事例
-------------------------------- */
.page-cover2 {
  margin-top: 20px;
}

.page-cover2 img {
  width: 100%;
  margin-bottom: 10px;
}

  .merit-inbox2 {
   padding: 10px 0;
   height:auto;
   padding-bottom:30px;
   border-bottom: 1px dotted #ccc;
   width:90%;
   margin-right:0px;
  }


@media only screen and (min-width: 480px)  {
.page-cover2 img {
  width: 80%;
}
}
      
@media only screen and (min-width: 768px)  {

  .page-cover2 {
    display: table;
    width: 100%;
    margin: 20px 0 10px 0;
  }
  
  .page-cover2 img {
	width: 100%;
}  

  .left-column2,
  .middle-column2,
  .right-column2 {
    display: table-cell;
    width: 250px;
    border-radius: 3px;
	}


  .left-column2 img,
  .middle-column2 img,
  .right-column2 img {
    margin: 0 auto;
    text-align: center;
    width: 80%;
    vertical-align: middle;
    
}
}

/* -------------------------------- 
教室青背景

-------------------------------- */

.columnr_inbox{
              width:100%;
              background-color:#295098;
              background-image: url(../img/face3-r.jpg);
              background-size:cover ;
              

} 

.main-text{
                   margin:15px;
                   line-height: 27px;
}

@media only screen and (min-width: 768px)  {
.columnr_inbox{
	          display: table-cell;
              width:50%;
              height:auto;
              margin:0 auto;
              background-color:#295098;
              background-image: url(../img/face3-r.jpg);
              background-size:cover ;
              vertical-align:middle;
              
}
}

/* -------------------------------- 
グラウンド青背景

-------------------------------- */

.columnr0_inbox{
              width:100%;
              background-color:#295098;
              background-image: url(../img/ground.jpg);
              background-size:cover ;
              
} 

@media only screen and (min-width: 768px)  {
.columnr0_inbox{
	          display: table-cell;
              width:50%;
              height:auto;
              margin:0 auto;
              background-color:#295098;
              background-image: url(../img/ground.jpg);
              background-size:cover ;
              vertical-align:middle;
              
}
}


/* -------------------------------- 

カタログダウンロード(青→緑）

-------------------------------- */

.button {
  width: 220px;
  height:30px;
  margin:0 auto;
  padding: 20px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border: 0;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
  color: #ffffff;
  border-radius: 3px;
  background-color: #0F78B1;
  transition: background-color 0.5s;
  padding:0px;
}

.button a{
color: #ffffff;
    text-decoration: none;
    padding: 20px;
    display: block;
    text-align: center;
    background-color: #0F78B1;
    }

@media only screen and (min-width: 768px) {
.button {
  width: 250px;
  height: auto;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border: 0;
  color: #ffffff;
  border-radius: 3px;
  background-color: #0F78B1;
  transition: background-color 0.5s;
  cursor: pointer;
}

.button a:hover {
  background-color: #bfd72f;
}

.button a{
    color: #ffffff;
    text-decoration: none!important;
    padding: 20px;
    display: block;
    text-align: center;
    background-color: #0F78B1;
  transition: background-color 0.5s;
    }
    }
/* -------------------------------- 

-------------------------------- */

.button-wrap{
    max-width:250px;
    margin: 0 auto;
    }

/* -------------------------------- 

4つのアイコン

-------------------------------- */
.grid4{
border:0px solid #ccc;
margin:60px 100px;
}

.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
}

/* col */
.col {
	float: left;
	margin-left: 3.2%;
	}

.col p{
        text-align: left;
        margin-bottom: 50px;
        margin-top:0px;
        }
	
.icon{
     margin:0 auto;
     text-align:center;
     margin-bottom:15px;
     }
     

          
.icon-title{
     color:#3e3a39;
     text-align:center;
     margin:0 auto;
     font-weight:600;
     font-size:20px;
     margin-top:5px;
     margin-bottom:30px;
     height:40px;
     line-height: 25px;
     }

.icontxt{
     color:#5e89ab;
     text-align:center;
     font-size:14px;
     margin-top:-1px;
     margin-bottom:30px;
     }
     
     
/* grid4 col */
.grid4 .col {
	width: 22.6%;
}

/* grid3 col */
.grid3 .col {
	width: 31.2%;
}

/* grid2 col */
.grid2 .col {
	width: 48.4%;
}

@media screen and (max-width: 740px) {
	/* change grid4 to 2-column */

.col p{
        text-align: left;
        }

	
.icon-title{
     color:#3e3a39;
     text-align:center;
     margin:0 auto;
     font-weight:600;
     font-size:18px;
     margin-top:0px;
     margin-bottom:15px;
     height:35px;
     }


.grid4{
border:0px solid #ccc;
margin:0 30px;
}
	
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* change grid3 to 2-column */
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

}

@media screen and (max-width: 400px) {
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}

/* -------------------------------- 

4つのアイコン箇条書き

-------------------------------- */

.icon ul{
	        height:auto;
            padding: 20px 5px;
            margin:0 10px;
	}
	
.icon li{
	       list-style: circle;
	       line-height: 25px;
	       text-align: left;
	       padding:0 5px;
	}

@media screen and (max-width: 740px) {
.icon ul{
	        height:auto;
            padding: 20px 5px;
            margin:0 10px;
	}
	
.icon li{
	       list-style: circle;
	       line-height: 25px;
	       text-align: left;
	}
	}

/* -------------------------------- 

トラブルなどによる業務負担を軽減

電波干渉を気にせず授業に集中できます

安価で将来的な拡張にも安心

-------------------------------- */

.effect{
    text-align: center;
    color:#295098;
    padding:20px;
    background-color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    width;auto;
    line-height: 25px;
    margin-bottom: 50px;
    }
    
/* -------------------------------- 
テーブル
-------------------------------- */


#product .table03{
  width: 100%;
  height: auto;
  font-size: 1.4rem;
  margin: 0 auto;
  table-layout: fixed;
  margin-top:30px;
}

.table03 th{
	width: 20%;
	padding: 10px;
	text-align: center;
	font-weight: 600;
	vertical-align: middle;
	background: #eee;
	border:1px solid #ccc;
}

.table03 th.teacher{
	width: 20%;
	padding: 10px;
	text-align: center;
	font-weight: 600;
	vertical-align: middle;
	background: #295098;
	border:1px solid #ccc;
	color:#ffffff;
}

.table03 th.student{
	width: 20%;
	padding: 10px;
	text-align: center;
	font-weight: 600;
	vertical-align: middle;
	background: #bfd72f;
	border:1px solid #ccc;
}


#product .table03 td{
	padding: 0;
	text-align: center;
	vertical-align: middle;
	border:1px solid #ccc;
	word-break: break-all;
}

.table03 td.pd-name{
	padding: 0;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	font-weight: 400;
	font-size: 14px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

#product .table03 td img{
	width: 100%;
}

@media only screen and (min-width: 768px) {

.table03 th{
	width: 130px;
	padding: 10px;
	background: #eee;
	font-weight: 600;
	text-align: center;
	font-size: 16px;
}

.table03 th.teacher{
	width: 130px;
	padding: 10px;
	background: #295098;
	font-weight: 600;
	text-align: center;
	font-size: 16px;
	color:#ffffff;
}

.table03 th.student{
	width: 130px;
	padding: 10px;
	background: #bfd72f;
	font-weight: 600;
	text-align: center;
	font-size: 16px;
	color:#ffffff;
}

.table03 td{
	padding: 5px;
}
.table03 td.pd-name{
	padding: 0;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	font-weight: 400;
	font-size: 16px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

}

/* -------------------------------- 
囲み
-------------------------------- */
.spec-frame-w{
             border:1px solid #ffffff;
             padding:5px;
             text-align: center;
             color:#ffffff;
             margin:10px;
             padding:10px 5px;
             font-size: 14px;
             }
@media only screen and (min-width: 768px) {
.spec-frame-w{
             border:1px solid #ffffff;
             padding:5px;
             text-align: center;
             color:#ffffff;
             margin:20px;
             padding:20px 10px;
             }
             }
             
.spec-frame-b{
             border:1px solid #595757;
             padding:5px;
             text-align: center;
             margin-bottom: 20px;
             color:#ffffff;
             margin:20px;
             padding:20px;
            }
             
/* -------------------------------- 
マーカー
-------------------------------- */
             
.highlight {
    background: linear-gradient(transparent 50%, #ffff66 0%);
    line-height: 1.3em;
}

/* -------------------------------- 
マーカー＋太字
-------------------------------- */

.hightlight-text{
            text-align: left;
            font-weight: 600;
            font-size:20px;
            margin-bottom:20px;
            line-height: 33px;
            background: linear-gradient(transparent 50%, #ffff66 0%);
            }

@media only screen and (min-width: 768px)  {
.hightlight-text{
            font-weight: 600;
            font-size:25px;
            line-height: 40px;
            background: linear-gradient(transparent 50%, #ffff66 0%);
            margin-bottom:30px;
            }
            }
            
/* -------------------------------- 
マーカー＋太字(14pt)
-------------------------------- */

.hightlight2-text{
            text-align: left;
            font-weight: 600;
            font-size:14px;
            margin-bottom:20px;
            background: linear-gradient(transparent 50%, #ffff66 0%);
            }

@media only screen and (min-width: 768px)  {
.hightlight2-text{
            font-weight: 600;
            font-size:16px;
            background: linear-gradient(transparent 50%, #ffff66 0%);
            margin-bottom:30px;
            }
            }

.w-text{
width: 100%;
    font-size: 16px;
    line-height: 27px;
    margin: 0 auto;
    padding: 0px 0px 20px 0;
    color: #ffffff;
    }

  
  
/* -------------------------------- 
改行
-------------------------------- */
@media screen and (min-width: 768px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 768px){   
  .pc { display:none; }
  .sp { display:block; }
}



/* -------------------------------- 
事例
-------------------------------- */


div.centering p {
	display: table-cell;
	vertical-align: middle;
	margin: 0 auto;
	width: 450px;
}


/*for IE6 */
* html .centering p {
	display: inline;
	zoom: 1;
}

/*for IE7 */
*:first-child+html .centeringTest p {
	display: inline;
	zoom: 1;
}

.case-study-title{
    max-width: 400px;
    margin:15px 15px 15px 0;
    margin-top:20px;
    text-align: left;
    font-size:20px;
    line-height: 23px;
	}
	
.qty{
   text-align: left;
    font-size:25px;
    font-weight: 700;
    line-height: 50px;
}

@media screen and (max-width: 768px){

div.centering p {
	display: table-cell;
	vertical-align: middle;
	margin: 0 auto;
	width: 450px;
	margin-left:20px;

}

.case-study-title{

    margin:15px 15px 15px 0;
    margin-top:18px;
    text-align: left;
    font-size:18px;
    line-height: 23px;
	}
	
.qty{
   text-align: left;
    font-size:28px;
    font-weight: 700;
    line-height: 50px;
}
}

/*カラム落ちなし */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  max-width: 1000px;
  width: 90%;
  margin: auto;
}



.flexbox {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.flexitem {
  flex: 0 0 49%;
}

.flexitem:last-child {
    margin-bottom: 50px;
    }

.flexitem p {
  text-align: center;
}

.flex-grow{
  flex-grow: 1;
}
/* -------------------------------- 
関連情報
-------------------------------- */

.merit-inbox-3 {
 padding: 0;
 height:auto;
 border:1px solid #ccc;
 margin:0 auto;
 margin-bottom: 20px;
 max-width: 470px;
 background-color: #ffffff;
}

@media only screen and (min-width: 480px)  {
.merit-inbox-3 {
 padding: 0;
 height:auto;
 background-color: #ffffff;
 margin-bottom: 40px;
}
}

@media only screen and (min-width: 768px)  {
.merit-inbox-3 {
   padding: 0px;
   border: 1px solid #ccc;
   margin:0 10px 40px 10px;
   height: 330px;
   background-color: #ffffff;
  }
  


  .left-column3,
  .middle-column3,
  .right-column3 {
    display: table-cell;
    width: 250px;
    border-radius: 3px;
	}
	

.left-column3 img,
.middle-column3 img,
.right-column3 img {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    vertical-align: middle;
}
}

/* -------------------------------- 
関連情報タイトル
-------------------------------- */
.infotitle3 {
  height: auto;
  color: #4b4b4c;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  line-height: 25px;
  margin-top:0px;
  padding:0 10px;
}

@media only screen and (min-width: 768px)  {
  .infotitle3 {
    height: auto;
    margin:15px;
    margin-top:5px;
    text-align: center;
    font-size:18px;
    line-height: 23px;
    padding:0px;
    vertical-align: middle;
	}
}

/* -------------------------------- 

関連情報

-------------------------------- */
.column-2 {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-right: 10px;
  margin-bottom: 40px;
  margin-left: 10px;
}
.column-2-img {
  width: 40%;
}
.column-2-img img {
  width: 100%;
}
.column-2-texts {
  box-sizing: border-box;
  padding-left: 10px;
  width: 100%;
}

@media screen and (max-width: 500px) {
  .column-2 {
    flex-direction: column;
  }
  .column-2--reserve {
    flex-direction: column-reverse;
  }
  .column-2-img {
    width: 100%;
  }
  .column-2-texts {
    width: 100%;
    padding:10px 0;
    margin:0 auto;
  }
}
.line{border:1px solid #ccc;padding:10px; background-color: #ffffff; margin: 20px 0;}
.line-2{border:1px solid #ccc;padding:0 30px; background-color: #ffffff; margin: 20px 0;}
.line-3{border:1px solid #ccc;padding:0px; background-color: #ffffff; padding-bottom: 20px;min-height: 350px;margin-bottom: 50px; }
.line-text{ padding:10px 20px 0 20px; text-align: left;}

@media screen and (max-width: 768px) {
.line-3{
border:1px solid #ccc;
padding:0px; 
background-color: #ffffff; 
padding-bottom: 20px;
margin-bottom: 20px;
min-height: auto;
}
}
.text-bold-c{
            font-weight: 600;
            text-align: center;
            font-size: 18px;
            line-height: 27px;
            }
            
.line .kanren{
          background-color: #8EC926;
          color: #ffffff;
          text-align: center;
          padding: 10px;
          width: 18%;
          font-size: 14px;
          font-weight: 600;
          border-radius:0 0 10px 0;
          margin-left: -10px;
          }
@media screen and (max-width: 607px) {
.line .kanren{
          background-color: #8EC926;
          color: #ffffff;
          text-align: center;
          padding: 10px;
          width: 30%;
          font-size: 14px;
          font-weight: 600;
          border-radius:0 0 10px 0;
          margin-left: -10px;
          }
          }
          
/* 関連製品 2カラム */
.flex-product {
  display: flex;
  width: auto;
  border:1px solid #ccc;
  margin-top: 30px;
  background-color: #ffffff;
  }

.flex-product .item1 {
  flex: 0 0 170px;
  margin-right: 10px;
  background-color: #ffffff;
  padding:10px;
}

.flex-product .item2 {
  flex: 1;
  padding: 0 10px 10px 0px;
}

.flex-product-title{
  font-size: 14px;
  font-weight: 600;
  background-color:#8EC926;
  color: #ffffff;
  margin:10px 0 0px 0;
  padding:5px;
  width: 50%;
  border-radius:3px;
  text-align: center;
  }
.flex-product .item1 img{
  margin: 5px;
  }
@media only screen and (min-width: 768px) {
.flex-product {
  display: flex;
  width: auto;
  border:1px solid #ccc;
  margin-top: 30px;
  background-color: #ffffff;
}
.flex-product .item1 {
  flex: 0 0 250px;
  margin-right: 10px;
  background-color: #ffffff;  
}

.flex-product .item1 img{
  margin: 0px;
  }

.flex-product .item2 {
  flex: 1;
  padding-right: 30px;
  padding-left: 30px;
  margin-left: 30px;
}

.flex-product-title{
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background-color:#8EC926;
  padding:10px;
  border-radius:3px;
  width: 20%;
  text-align: center;
  margin: 20px 0 10px 0;
  min-width: 200px;
}
}

.flex-product-title-2{
  font-size: 15px;
  font-weight: 600;
  padding:10px 0px 0px 0px;
  text-align: left;
  line-height: 23px;
}
@media only screen and (min-width: 768px) {
.flex-product-title-2{
  font-size: 20px;
  font-weight: 600;
  color:#586775;
  margin:10px 10px 0px 0px;
  text-align: left;
  line-height: 27px;
}
.flex-product-title-2 a:hover{
                         text-decoration: underline;
                         }
                         }

/* 高品質な無線LANを実現する電波管理機能 */
.flex-text {
  display: flex;
  width: auto;
  margin-top: 30px;
  }

.flex-text .item1 {
  flex: 0 0 170px;
  margin-right: 10px;
}

.flex-text .item2 {
  flex: 1;
  padding-right: 10px;
}

.flex-text-title{
  font-size: 14px;
  font-weight: 600;
  background-color:#8EC926;
  margin:10px 0 0px 0;
  padding:5px;
  width: 50%;
  border-radius:3px;
  text-align: center;
  }

.flex-text-title-2{
  font-size: 15px;
  font-weight: 600;
  color:#0F78B1;
  padding:10px 0px 0px 0px;
  text-align: left;
  line-height: 23px;
}

@media only screen and (min-width: 768px) {
.flex-text {
  display: flex;
  width: auto;
  margin-top: 30px;
}
.flex-text .item1 {
  flex: 0 0 250px;
  margin-right: 10px;
  }

.flex-text .item1 img{
  margin: 20px;
  }

.flex-text .item2 {
  flex: 1;
  padding-right: 30px;
  padding-left: 30px;
  margin-left: 30px;
}

.flex-text-title{
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background-color:#8EC926;
  padding:10px;
  border-radius:3px;
  width: 20%;
  text-align: center;
  margin: 20px 0 10px 0;
}
}
@media only screen and (min-width: 530px) {

.flex-text-title-2{
  font-size: 20px;
  font-weight: 600;
  color:#586775;
  margin:10px 10px 10px 0px;
  text-align: left;
  line-height: 25px;
}
.flex-text-title-2 a:hover{
                         text-decoration: underline;
                         }
                         }
                         
.blue-bg{
          background-color: #295098;
          padding:50px 0;
          }
.container {
  display: flex;
  flex-wrap: wrap;
}
.column {
  width: 100%;
  color: #ffffff;
}
.green-list li {
  position: relative;
  padding-left: 20px;
  line-height: 23px;
  color: #595757;
  font-size: 14px;
}
@media only screen and (min-width: 768px) {
.column {
    width: 50%;
    padding:0 10px;
  }
.green-list li {
  position: relative;
  padding-left: 20px;
  line-height: 25px;
  color: #595757;
  font-size: 16px;
}
}

.green-list ul {
  list-style: none;
  padding-bottom: 10px;
}

.green-list li::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #74b72e;
  border-radius: 5px;
}

.list ul {
  list-style: circle!important;
}
.list li {
  position: relative;
  padding-left: 0px!important;
  line-height: 25px;
  list-style: circle!important;
  margin-left: 20px;
  line-height: 25px;
}
.list li::before {
  content:none;
}

.flex-sample {
  display: flex;
}
.flex-sample .item {
  flex: 1;
  color: #ffffff;
  border-right:1px dotted #ffffff;
}

.flex-sample .item:last-child {
  border-right: 0;
}

/*5カラム*/
*, *:before, *:after {
    box-sizing: border-box;
}

.col_5{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col_5 > *{
    width: calc( 20% - 20px );
    margin-right: 25px;
    margin-bottom: 25px;
}
.col_5 > *:nth-child(5n){
    margin-right: auto;
}
@media screen and (max-width: 960px) {
    .col_5 > *{
        width: calc( 25% - 9px );
        margin-right: 12px;
        margin-bottom: 12px;
    }
    .col_5 > *:nth-child(5n){
        margin-right: 12px;
    }
    .col_5 > *:nth-child(4n){
        margin-right: auto;
    }
}
@media screen and (max-width: 580px) {
    .col_5 > *{
        width: calc( 33.33333% - 8px ) ;
    }
    .col_5 > *:nth-child(5n){
        margin-right: 12px;
    }
    .col_5 > *:nth-child(4n){
        margin-right: 12px;
    }
    .col_5 > *:nth-child(3n){
        margin-right: auto;
    }
}

/* 4カラム */
*, *:before, *:after {
	box-sizing: border-box;
}
.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
	border-right: 1px dotted #fff;
}
.col_4 > div:last-child{
      border-right:0px;
      }

@media screen and (max-width: 1090px) {
	.col_4 > div{
		width: 50%;
		margin-bottom: 50px;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 100%;
		border-right:0px;
	}
}

.number{
         font-size: 70px;
    font-weight: 600;
    color: #91CA26;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    text-align: center;
    border-bottom: 6px solid #91CA26;
    width: 15%;
         }
@media screen and (max-width: 768px) {
.number{
         font-size: 70px;
    font-weight: 600;
    color: #91CA26;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    text-align: left;
    border-bottom: 0px;
         }
         }