*{
  box-sizing:border-box;
}

.sp__menu{
  display:none;
}

a{
  color:#000;
  text-decoration:none;
}

h2{
  letter-spacing:3px;
}

h4,p{
  letter-spacing:1px;
}

body{
  font-family: '游明朝体+36ポかな','YuMincho +36p Kana',YuMincho,'Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Noto Serif JP',serif !important;
    width:980px;
     margin:auto
}

.container{
  width: 100%;
  margin:auto;
}

.header {
  width: 100%;
  position:sticky;  
    position:-webkit-sticky;
  top:0;
  z-index: 10;
  background-color: white;
  display:flex;
   margin-top:30px;
}
.header__icon{
  width:10%;
}
.header__icon img{
  width:100%;
}
.header ul{
  display:flex;
  width:90%;
  justify-content:flex-end;
  align-items:center;
}

.header li {
  list-style: none;
  padding-top: 10px;
  padding-left: 20px;
  font-size:15px;

}
#otoiawase--label,
#nohin--label,
#gijutu--label,
#document--label,
#gaiyou--label{
  opacity:0.3;
}
.main {
  text-align: center;
}

.main img{
  margin-top: 100px;
  width: 100%;
  height: 60%;
  display: block;
}

.copy-container img{
  margin-top: 10px;
  width: 900px;
  height: 500px;
  object-fit: cover;

}

.copy-container{
  margin-top: 100px;
}

.copy-container h1{
 margin: 150px 0px;
  font-size: 23px;
    letter-spacing:3px;
}

.red{
  color:red;
}

.copy-container h2{
    text-align:left;
  font-size:18px;
    line-height:1.8;
    letter-spacing:4px;


}

.contents h2{
  margin-top:0px;
  margin-bottom: 10px;
  border-bottom: 2px solid #dee7ec;
}

.gaiyou,
.gijutu,
.nohin,
.otoiawase,
.document{
  margin-top:40px;
  padding-top:120px;
}

.gaiyou table{
  display:block;
}


.gaiyou th,
.gaiyou tr{
  text-align:left !important;
  padding:10px;
  padding-left:0px;
  letter-spacing:1px;
}
.sp_gaiyou{
  display:none;
}

.gijutu_abount{
  font-size:18px;
  font-weight:bold;
}

.gijutu h3{
  letter-spacing:2px;
}
.gijutu__example{
  display:flex;
}

.gijutu__example__description h4{
  margin:40px 0 0 0;
}

.gijutu__example__description ul,
.gijutu__example__platform ul {
  padding:0 0 0 20px;
}
.gijutu__example__description ul li,
.gijutu__example__platform ul li{

  line-height:1.8;
letter-spacing:1px;
    margin-bottom:10px;

}

.nohin__flow{
  display:flex;
  justify-content:space-between;
  margin-top:20px;
}
.nohin__flow__content h4,
.sp_gaiyou h4{
  margin-top:30px;
 margin-bottom:10px;
}
.nohin__flow__content p,
.sp_gaiyou p{
  margin:0;
  line-height:1.8;
    margin-left:20px;
}

.nohin__flow__image img{
  width:100%;
}

#otoiawase{
    margin-top:40px;
  padding-top:120px;
  margin-bottom:350px;
}

#otoiawase h2{
  margin-bottom:20px;
}

#form__name,
#form__mail,
#form__title,
#otoiawase form textarea{
  width:50%;
  resize:vertical;
border-width:0.5px;
}

#form__submit{
    padding:10px 20px;
   border-width:0.1px;
}

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

   body{
     width:80%;

  }

}

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

   .header ul{
  display:none;
  width:90%;
  justify-content:flex-end;
  align-items:center;
}

.header li {
  list-style: none;
  padding-top: 10px;
  padding-left: 20px;
  font-size:15px;

}

}


@media screen and (max-width: 480px){
.br::before {
  content: "\A" ;
  white-space: pre ;
}
h2{
  letter-spacing:3px;
}

h4,p{
  letter-spacing:1px;
}

body{

    width:100%;
     margin:auto;
  padding:20px;
}

.container{
  width: 100%;
  margin:auto;
  padding:20px;
}

.header {
  width: 100%;
  position:sticky;  
    position:-webkit-sticky;
  top:0;
  z-index: 10;
  background-color: white;
  display:flex;
   margin-top:0px;
}
.header__icon{
  width:20%;
}
.header__icon img{
  width:100%;
}
.header ul{
  display:none;
  width:90%;
  justify-content:flex-end;
  align-items:center;
}

.header li {
  list-style: none;
  padding-top: 10px;
  padding-left: 20px;
  font-size:15px;

}
#otoiawase--label,
#nohin--label,
#gijutu--label,
#gaiyou--label{
  opacity:0.3;
}
.main {
  text-align: center;
}

.main img{
  margin-top: 80px;
  width: 100%;
  height: 60%;
  display: block;
}

.copy-container{
  margin-top: 80px;
}

.copy-container h1{
 margin: 80px 0px;
  font-size: 18px;
    letter-spacing:3px;
}

.copy-container h2{

  font-size:12px;
    line-height:1.8;
    letter-spacing:2px;


}

.contents h2{
  margin-top:0px;
  margin-bottom: 10px;
  border-bottom: 2px solid #dee7ec;
}

.gaiyou table{
  display:none;
}

.gaiyou,
.gijutu,
.nohin,
.otoiawase,
.document{
  margin-top:40px;
  padding-top:72px;
}
.gaiyou th,
.gaiyou tr{
  letter-spacing:1px;
  font-size:10px;
}

.gaiyou th{
   width:30%;
}

.sp_gaiyou{
  display:block;
}

.gijutu_abount{
  font-size:12px;
  font-weight:bold;
}


.gijutu h3{
  letter-spacing:2px;
  line-height:1.5;
}
.gijutu__example{
  display:block;
}

.gijutu__example__description,
.gijutu__example__platform{
  width:100%;
  margin-top:30px;
}


.gijutu__example__description ul,
.gijutu__example__platform ul {
  padding:0 0 0 20px;
}
.gijutu__example__description ul li,
.gijutu__example__platform ul li{

  line-height:1.8;
letter-spacing:1px;
    margin-bottom:15px;

}

.nohin__flow{
  display:block;
  margin-top:20px;
}

.nohin__flow__content{
  width:100%;
}
.nohin__flow__image{
  width:80%;
  margin:auto;
  margin-top:50px;
}

.nohin__flow__content p,
.sp_gaiyou p{
  margin:0;
  line-height:1.8;
  margin-left:20px;
}

.nohin__flow__image img{
  width:100%;
}

#otoiawase{
    margin-top:40px;
  padding-top:72px;
  margin-bottom:50px;
}

#otoiawase h2{
  margin-bottom:20px;
}

#form__name,
#form__mail,
#form__title,
#otoiawase form textarea{
  width:100%;
  resize:vertical;
border-width:0.5px;
}

#form__submit{
    padding:10px 20px;
   border-width:0.1px;
}