#lp01 #fv {
background-image: url("../img/top.jpg");
background-repeat: no-repeat;
background-position: center bottom;
min-height: 650px;
position: relative;
margin-top:70px;
background-size:cover;
}

#fv::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

#lp01 #fv .column{
align-items: flex-start!important;
}

#lp01 #fv .left{
width: 50%;
padding: 10px;
height: 100%;
}

@media screen and (max-width : 768px ){
#lp01 #fv .left{
width: 100%;
height: auto;
}
}

#lp01 #fv .right{
flex: 1;
}

#lp01 #fv .column{
justify-content: space-between;
margin:0 auto;
padding-top: 30px;
}
@media screen and (max-width : 552px ){
#lp01 #fv .column{
justify-content: space-between;
margin:0 auto;
padding-top: 30px;
}
}

#lp01 #fv .catch-02,
#lp01 #fv .catch-03{
color: #fff;
}

#lp01 #fv .catch-02 {
margin: 15px 0 10px 0;
font-size: 27px;
font-weight: 600;
text-shadow: 0 0 15px rgba(0,0,0,1);
font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
    text-align: center;
}


#lp01 #fv .catch-03 {
margin: 0 0 10px 0;
font-size: 60px;
font-weight: 600;
line-height: 1.2em;
font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
text-align: center;
text-shadow: 0 0 15px rgba(0, 0, 0, 1);
}


#lp01 #fv .right{
height: 80%;
margin:0 auto;
}

#lp01 #fv .img img{
width: 100%;
}

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

#lp01 #fv {
height: auto;
}

#lp01 #fv .catch-02 {
margin: 0 0 10px 0;
font-size: 20px;
}

#lp01 #fv .catch-03 {
margin: 0px;
font-size: 40px;
font-weight: 500;
line-height: 1.2em;
}
}

@media screen and (max-width: 522px) {
#lp01 #fv .catch-03 span{
display: block;
padding-left: 0em;
margin-top: -1em;
}

#lp01 #fv .catch-03 {
margin: 0 0 10px 0;
font-size: 30px;
font-weight: 500;
line-height: 1.2em;
}
}


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

#lp01 #fv {
height: auto;
background-position: center top;
background-size: cover;
}

#lp01 #fv .column{
display: block;
}


#lp01 #fv .right{
max-width: 100%;
width: 100%;
height: auto;
margin-top: -50px;
}

#lp01 #fv .catch-03 {
font-size: 30px;
font-weight: 500;
line-height: 1.2em;
}

#lp01 #fv .img img{
max-width: 300px;
width: 100%;
margin-top: 20px;
}
}

#fv .text_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

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

Main content style

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

.title-text{
            text-align: center;
            font-weight: bold;
            font-size:24px;
            margin:20px 0 0px 0;
            line-height: 40px;
            font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
            }
.title-text2{
            text-align: center;
            font-weight: bold;
            font-size:20px;
            margin:30px 0;
            line-height:33px;
            font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
            }
.title-text2 span{    
                   font-size: 18px;
                   }       
            
@media only screen and (min-width: 768px)  {
.title-text{
            text-align: left;
            font-weight: bold;
            font-size:27px;
            margin:30px 0 30px 30px;
            line-height: 50px;
            font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
            }
.title-text2{
            text-align: center;
            font-weight: bold;
            font-size:27px;
            margin:30px 0 20px 0;
            line-height: 40px;
            font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
            }
            }
/* -------------------------------- 

margin

-------------------------------- */
.mgt20{
        margin-top: 20px!important;
        }
.mgt30{
        margin-top: 30px!important;
        }
.mgt50{
        margin-top: 50px!important;
        }
/* -------------------------------- 

関連記事

-------------------------------- */
.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: 80%;
}

@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:0px 10px; 
background-color: #ffffff; 
margin:30px 5px;
}
@media only screen and (min-width: 768px)  {
.line{
border:1px solid #ccc;
padding:0px 40px; 
background-color: #ffffff; 
margin:30px 5px;
}
}
.line-text{ 
padding:10px 20px 0 20px; 
text-align: left;
}

.text-bold-c {
    font-weight: 600;
    text-align: center;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 20px;
}
.text-bold {
    font-weight: 600;
    text-align: center;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
.text-bold-c {
        font-weight: 600;
        text-align: center;
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 20px;
    }
.text-bold {
        font-weight: 600;
        text-align: center;
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 20px;
    }
}
/* -------------------------------- 

インナー

-------------------------------- */
.line ul{
           padding: 10px 10px 30px 30px;
           }
.line li{
          line-height: 25px;
          list-style: circle;
          font-weight: 600;
          font-size: 14px;
          }
@media only screen and (min-width: 768px) {
.line ul{
           padding: 30px 30px 30px 50px;
           }
.line li{
          line-height: 35px;
          list-style: circle;
          font-weight: 600;
          font-size: 16px;
          }
          }
/* -------------------------------- 

製品説明

-------------------------------- */
.title-20-l{
              text-align: left;
              font-size: 18px;
              margin: 30px 20px 0 10px;
              font-weight: 700;
              }
@media only screen and (min-width: 768px) {
.title-20-l{
              text-align: left;
              font-size: 20px;
              margin: 30px 20px 0 30px;
              font-weight: 700;
              border-bottom: 1px solid #ccc;
              padding-bottom: 20px;
              }
              }

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

インナー

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

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

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

最初のタイトル

-------------------------------- */
.top-title {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin: 20px 0px;
    line-height: 27px;
}
@media only screen and (min-width: 768px) { 
.top-title{
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    margin: 30px 20px;
    line-height: 33px;
}}

/* -------------------------------- 
Niagara紹介

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

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

@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;
             }}

/* -------------------------------- 
Niagara紹介
右ボックス
vertical-align:middle
-------------------------------- */

.columnr_inbox{
              width:100%;
} 


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

/* 2カラム */
.column {
  display: flex;
  justify-content:center;
  margin-top: 40px;
  margin-right: 10px;
  margin-bottom: 40px;
  margin-left: 10px;
  align-items: center;
}
.column img {
       width: 97%;
       }
.column-img {
  width: 100%;
  display: flex;
	align-items: center;
	justify-content: center;
}
.column-img img {
  width: 100%;
}
.column-texts {
  box-sizing: border-box;
  padding-right: 30px;
  padding-left: 20px;
  width: 100%;
	align-items: center;
	justify-content: center;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
    font-weight: 600;
    line-height: 27px;
}
.column-texts2 {
  box-sizing: border-box;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .column {
    flex-direction: column;
      }
  .column--reserve {
    flex-direction: column-reverse;
  }
  .column-img {
    width: 100%;
  }
  .column-texts {
    width: 100%;
    padding:10px;
    margin:0 auto;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
    font-size: 14px;
    line-height: 23px;
  }
  .column-texts2 {
    width: 100%;
    padding:10px 0;
    margin:0 auto;
  }
}


/* -------------------------------- 
※
-------------------------------- */

.kome{
      font-size:13px;
      line-height: 20px;
      padding-left:1em;
      text-indent:-1em;
      text-align: center;
      padding-top: 5px;
      padding-bottom: 20px;
      }

.kome2 {
    font-size: 13px;
    line-height: 20px;
    padding-left: 30px;
    padding-left:1em;
   text-indent:-1em;
}
@media only screen and (min-width: 768px) {

.kome{
      font-size:13px;
      line-height: 20px;
      padding-left:1em;
      text-indent:-1em;
      text-align: center;
      padding-top: 10px;
      }
.kome2 {
    font-size: 13px;
    line-height: 20px;
    padding-left: 30px;
}
}
/* -------------------------------- 
コンテンツのテキスト
-------------------------------- */


#april-fool p{
    line-height:23px;
    font-size:14px;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
    font-weight: 600;
    padding:10px;
    }
#ioz-solution p{
    line-height:25px;
    font-size:14px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
    padding:10px;
    }

.g-txt{
    line-height:23px;
    font-size:14px;
    font-weight: 400;
    padding:10px;
    font-family: 'Noto Sans JP', sans-serif;
    }
.g-txt2{
      font-size:14px;
    font-weight: 400;
    padding:10px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
    background-color: #f0f8ff;
    padding: 30px;
    color: #4682b4;
    line-height: 23px;
    }

@media only screen and (min-width: 768px) {
#april-fool p{
    font-size:16px;
    line-height:27px;
    margin:0 auto;
    margin-bottom:20px;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
    font-weight: 600;
    padding: 0 30px;
    }

#ioz-solution p{
    font-size:16px;
    line-height:30px;
    margin:0 auto;
    margin-bottom:20px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
    padding: 0 30px;
    }
.g-txt{
    font-size:16px;
    line-height:27px;
    margin:0 auto;
    margin-bottom:20px;
    font-weight: 400;
    padding: 0 30px;
    font-family: 'Noto Sans JP', sans-serif;
    }
.g-txt2{
    font-size:16px;
    line-height:27px;
    margin:40px;
    font-weight: 600;
    padding: 0 30px;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #f0f8ff;
    padding: 30px;
    color: #4682b4;
}
}

/* -------------------------------- 
注意
-------------------------------- */

ul.aware-txt{
         width:auto;
         height:auto;
         font-size:14px;
         line-height:25px;
         border:0px solid #ccc;
         text-align:left;
         margin:0 auto;
         padding:0px 0px 20px 20px;
         }
         
ul.aware-txt li{
list-style-type: circle; 
font-size:14px;
}

ul.aware-txt li a{
       font-weight: 600;
       color: #0F78B1;
       }

ul.aware-txt li a:hover{
       color:#595757;
       text-decoration: underline;
       }

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


ul.aware-txt{
         width:100%;
         font-size:14px;
         line-height:30px;
         border:0px solid #ccc;
         text-align:left;
         padding-left:30px;         
         }
         
ul.aware-txt li{ 
list-style-type: circle;
font-size:16px;
line-height: 27px;         }
         }

/* -------------------------------- 
マーカー
-------------------------------- */
             
.highlight {
    background: linear-gradient(transparent 50%, #ffff66 0%);
    line-height: 1.3em;
}

.highlight-p {
    background: linear-gradient(transparent 75%, #ff9ece 75%);
    line-height: 1.3em;
    font-size: 20px;
    font-weight: 700;
}

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

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

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

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

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

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

.gray-bg{
         width:100%;
         height:auto;
         overflow: hidden;
         background-color:#F5F5F5;
         padding:30px;
         margin-top:50px;
         margin-bottom: 0px;
        }
.gray-bg .inner{
                 padding: 0px;
                 }
}


/* -------------------------------- 
タイトル
-------------------------------- */
.solution-title{
            text-align: center;
            font-weight: bold;
            font-size:25px;
            margin:30px 0 50px 0;
            line-height: 40px;
            font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
            }
.solution-title2{
            text-align: center;
            font-weight: bold;
            font-size:28px;
            margin:50px 0 30px;
            line-height: 35px;
            font-family: "Noto Sans", serif;
            }
.solution-title_2{
            text-align: left;
            font-weight: bold;
            font-size:28px;
            margin:30px 0 50px 0;
            line-height: 40px;
            font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
            }
.solution-title3{
            text-align: center;
            font-weight: bold;
            font-size:22px;
            margin:30px 0 50px 0;
            line-height: 30px;
            font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
  padding-bottom: 20px;
            }
  .content-title {
    height: auto;
    margin:15px;
    text-align: left;
    font-size: 20px;
    line-height: 27px;
    font-family: "Noto Sans", serif;
    font-weight: 700;
	}
@media only screen and (min-width: 768px)  {
.solution-title{
            text-align: center;
            font-weight: bold;
            margin:50px 0;
            line-height: 45px;
            font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
  font-size: 35px;
            }
.solution-title2{
            text-align: center;
            font-weight: bold;
            font-size:40px;
            margin:50px 0;
            line-height: 55px;
            font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
            }
.solution-title3{
            text-align: center;
            font-weight: bold;
            font-size:30px;
            margin:50px 0;
            line-height: 45px;
            font-family: "Noto Sans", serif;
            padding-bottom: 30px;
            }
.content-title {
  height: auto;
  color: #4b4b4c;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  line-height: 25px;
}
            }

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

ボタン

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

.button {
  width: 220px;
  margin:0 auto;
  padding: 20px;
  font-size: 16px;
  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;

}

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

.button a{
    color: #ffffff;
    text-decoration: none;
    display: block;
    }

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

.hum{
      background-image: url(../img/office1.gif);
      background-size: cover;
      min-height: 200px;
      }

@media only screen and (min-width: 768px)  {
.hum{
      background-image: url(../img/office1.gif);
      background-size: cover;
      min-height: 250px;
      }}
.ui-title{
           font-size: 16px;
           text-align: center;
           margin:10px 10px 20px 10px;
           font-weight: 600;
           }
@media only screen and (min-width: 768px)  {
.ui-title{
           font-size: 18px;
           text-align: center;
           margin-top: 20px;
           font-weight: 600;
           }
           }
.mgt100{
        margin-top: 0px;
        }
@media only screen and (min-width: 768px)  {           
.mgt100{
        margin-top: 100px;
        }
        }


div.animation_box {
  padding: 10px;
  opacity: 0;
  /*transform: translateY(30px);*/
  transition: 9s ease;
}
#pdf .btn{
    font-size: 15px;
    max-width: 300px;
    font-weight: bold;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 15px;
    color: #fff;
    background-color: #069 !important;
    border: 1px solid #069;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 27px;

           }
@media only screen and (min-width: 768px)  {  
#pdf .btn{
    max-width: 400px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 15px;
    color: #fff;
    background-color: #069 !important;
    border: 1px solid #069;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 27px;
    }
    }