@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  background-image: url("ipadITP_V.jpg");
  background-size: cover;
  color: #000;
  font-family:'meiryo', serif;
}
a {
  color: #000;
  text-decoration: none;
}
a :hover{
    opacity: 0.6;
}
img {
  max-width: 100%;
}
li {
  list-style: none;
}
#nav{
    color: #000;
    padding:10px;
}
.wrapper {
  width: 100%;
  max-width: 1032px;
  margin: 0 auto;
  padding: 0 20px;
}

/* header */
.inner{
    display: flex;
    /* padding:20px 0 30px 0; */
}
.site-title{
    width: 100px;
    margin-right: 40px;
}
#header{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#header ul{
    display: flex;
}
#nav li{
    margin-right: 40px;
}
.info{
    display: inline-block;
    background-color: #000;
    color: #F0F0F0;
    width: 200px;
    height: 80px;
    text-align: center;
    padding:20px 0;
}

/* タイトル */
.section-title{
    margin-top: 30px;
}
.section-title .en {
    display: block;
    font-size: 2.25rem;
    letter-spacing: 0.3em;
  }
  .section-title .ja {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 10px;
  }
  h2::after{
    content: "";
    width: 20px;
    height: 1px;
    color: #000;
    display: flex;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 30px;
} 
h3{
    font-size:1.3rem;
    text-align: center;
    margin-bottom: 20px;
}
/* メイン */
#flex{
    display: flex;
}
#flex img{
    width: 100%;
    padding:20px
}
#flex p{
    text-align: center;
}

/* business */
#business .inner{
    padding:0 5%;
}
#business{
    margin-bottom: 120px;
}
#business  .block ul{
    display: block;
}
.block{
    margin-bottom: 50px;
}
.block li{
    margin-bottom: 10px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
}
.block li p{
    margin-left: 30px;
}
/* テキスト */

.ans{
    background-color: rgba(178, 203, 255,0.6);
    padding:100px 0;
}
.ans p{
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}

/* アイコン */
/* li 1 */
.mobile-solid.icon {
    margin-top: 5px;
    color: #000;
    position: absolute;
    margin-left: 4px;
    margin-top: 0px;
    width: 12px;
    height: 14px;
    border-radius: 2px;
    border-left: solid 1px currentColor;
    border-right: solid 1px currentColor;
    border-top: solid 3px currentColor;
    border-bottom: solid 4px currentColor;
  }
  
  .moon-solid.icon:before {
    content: '';
    position: absolute;
    left: 8px;
    top: 3px;
    width: 8px;
    height: 10px;
    color: #fff;
    background-color: currentColor;
    border-radius: 5px 0 0 5px;
  }
  
  .mobile-solid.icon:after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 5px;
    height: 2px;
    width: 2px;
    border-radius: 50%;
    color: white;
    background-color: currentColor;
  }
  
/* li 2 */
.browser-solid.icon {
    color: #000;
    position: absolute;
    margin-left: 2px;
    margin-top: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: solid 1px currentColor;
    background-color: currentColor;
  }
  
  .browser-solid.icon:before {
    content: '';
    position: absolute;
    left: 1px;
    top: 1px;
    width: 11px;
    height: 11px;
    border-radius: 85% 15%;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    color: white;
    border: solid 1px currentColor;
  }
  
  .browser-solid.icon:after {
    content: '';
    position: absolute;
    top: 7px;
    width: 15px;
    height: 1px;
    color: white;
    background-color: currentColor;
  }
  
  /* li 3 */
  .picture-solid.icon {
    color: #000;
    position: absolute;
    margin-left: 2px;
    margin-top: 2px;
    width: 15px;
    height: 15px;
    border-radius: 2px;
    border: solid 1px currentColor;
    background-color: currentColor;
  }
  
  .picture-solid.icon:before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    color: white;
    border: solid 1px currentColor;
  }
  
  .picture-solid.icon:after {
    content: '';
    position: absolute;
    left: 2px;
    top: 9px;
    width: 12px;
    height: 8px;
    color: white;
    border-top: solid 1px currentColor;
    border-right: solid 1px currentColor;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
   /* li 4 */
   .unamused-solid.icon {
    color: #000;
    position: absolute;
    margin-left: 2px;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: solid 1px currentColor;
    background-color: currentColor;
  }
  
  .unamused-solid.icon:before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 2px;
    height: 2px;
    color: white;
    border-radius: 50%;
    border-top: solid 1px transparent;
    border-left: solid 1px currentColor;
    border-bottom: solid 1px currentColor;
    border-right: solid 1px transparent;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  
  .unamused-solid.icon:after {
    content: '';
    position: absolute;
    right: 3px;
    top: 3px;
    width: 2px;
    height: 2px;
    color: white;
    border-radius: 50%;
    border-top: solid 1px transparent;
    border-left: solid 1px currentColor;
    border-bottom: solid 1px currentColor;
    border-right: solid 1px transparent;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  
  .unamused-solid.icon i {
    position: absolute;
    left: 3px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    color: white;
    border-bottom: solid 1px transparent;
    border-top: solid 1px currentColor;
    border-left: solid 1px transparent;
    border-right: solid 1px transparent;
  }
  
  


/* footer */
#footer{
    padding:50px 180px;
    background-color: #fff;
}
.footer-title{
    width: 100px;
}
.flex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
#footer p{
    text-align: left;
    font-size: small;
}

@media screen and (max-width: 900px) {
    .logo{
        width: 80px;
        margin:8px 0;
    }
    .inner{
        padding:10px;
    }
    #nav{
        padding: 0;
    }
    #nav li:first-of-type {
        margin-left: 0;
    }
    #nav li{
        margin-left:30px;
        margin-right:0;
    }
    #header{
        display: block;
        margin-bottom: 20px;
    }
    .section-title{
        margin-bottom:34px;
    }
    .section-title .ja{
        margin-bottom: ;
    }
    .wrapper{
        display: block;
    }

    /* ハンバーガーメニュー */
    #nav{
        width: 300px;
        background: #fff;
        padding: 25px;
        position: fixed;
        top: 0;
        left: -300px;
        bottom: 0;
        opacity: 0;
        overflow-y: auto;
        transition: 0.5s;
        z-index: 20;
        }
        #nav li:first-of-type {
            margin-left: 30px;
        }
    
        .open #nav {
            left: 0;
            opacity: 1;
          }
          #nav ul.nav-menu {
            margin-bottom: 30px;
          }
          #nav ul{
            display: block;
          }
          #nav ul li {
            padding: 10px 0;
          }
          .hamburger {
            width: 30px;
            height: 30px;
            cursor: pointer;
            position: fixed;
            top: 22px;
            right: 18px;
            transition: 0.5s;
            z-index: 20;
          }
          .hamburger span {
            width: 30px;
            height: 2px;
            background-color: #121212;
            border-radius: 4px;
            display: block;
            position: absolute;
            left: 0;
            transition: 0.5s;
          }
          .hamburger span:nth-child(1) {
            top: 4px;
          }
          .hamburger span:nth-child(2) {
            top: 14px;
          }
          .hamburger span:nth-child(3) {
            bottom: 4px;
          }
          .open .hamburger span {
            background-color: #fff;
          }
          .open .hamburger span:nth-child(1) {
            transform: translateY(10px) rotate(-315deg);
          }
          .open .hamburger span:nth-child(2) {
            opacity: 0;
          }
          .open .hamburger span:nth-child(3) {
            transform: translateY(-10px) rotate(315deg);
          }
          #mask {
            display: none;
            transition: 0.5s;
          }
          .open #mask {
            width: 100%;
            height: 100%;
            background-color: #000;
            cursor: pointer;
            display: block;
            opacity: 0.8;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
          }
    


    /* mainvisual */

    #mainvisual {
        display: none;
    }
 

    #about .img {
        width: 100%;
    }
    /* /* 
    「flex-direction: column;」で縦並びにする
    */
    .info{
        display: none;
    }

    
    #footer{
        padding:30px 0;
    }

    #about,
    #business,
    .left,
    .right,
    .inner,
    .flex,
    #flex,
    .ans{
        flex-direction: column;
    }
    .ans p{
        text-align: left;
        margin-left: 10px;
        font-size: 0.8rem;
    }

    }