@charset "utf-8";
html{
  overflow-x: hidden;
}
/*.sample{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url("../image/top.png");
}*/
.image{
  height: 100%;
}
.topimage{
  width: 100vw;
  height: calc(100vw * 0.375);
}
.sample{
  background-color: #f2efde;
  text-align: center;
  height: 70%;

}
.topsample{
  background-color: #f2efde;
  text-align: center;
  height: calc(100vw * 0.375);
}
h2{
  margin-block-end:0;
}
@media all and (-ms-high-contrast: none) {
  h2{
    margin-bottom:0;
  }
}

.movie{
  width: 60%;
  position: relative;
  left: 21%;
  margin: 2% 0;
  margin-top: 0.5%;
}
.midashi{
  color: #8ea9de;
  font-weight: bold;
  font-size: 2.6em;
  font-style: italic;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 60%;/*行間調整*/
  margin-bottom: 1.4%;
}
.subtitle{
  color: #959489;
  font-size: 0.3em;
  letter-spacing: normal;
}
.main{
  padding-top: 2%;
}
.saisei{
  width: 2.3%;
  display: inline-block;
  vertical-align: middle;
}
.minititle{
  margin-left: 0.2em;
  font-weight: bold;
  color:#65645d;
  font-size: 1.4em;
  display: inline-block;
  vertical-align: sub;
}
.movietitle{
  position: relative;
  left: 21%;
  width:80%;
}

.leftside{
  padding-left: 8%;
  padding-bottom: 5%;
  padding-top: 1%;
  display: inline-block;
  vertical-align: top;
  width: 38%;
}
.leftside h2{
  margin-left: 0;
}
.browser{
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.4em;
}
.fab{
  margin-right: 1rem;
}
.hajimeni{
/*  background: #8ed2df;*/
background: rgb(142,210,223);
background: linear-gradient(180deg, rgba(142,210,223,1) 37%, rgba(118,217,203,1) 100%);  text-align: center;
  color: white;
  padding: 2% 0
}
.word{
  font-weight: bold;
  font-size: 3rem;
  padding-bottom: 1%;
}
.box{
  border: solid 3px white;
  text-align: left;
  padding: 2%;
  width: 72%;
  margin-top: 2%;
  margin-left: 10%;
  font-size: 1.2rem;
  font-weight: bold;
}
.mtop{
  margin-top: 0.4rem;
}
.data{
  font-weight: bold;
  font-size: 2em;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  padding:4% 0;
  width:55%;
}
.pie{
  display: inline-block;
  width: 30%;
}
.number{
  font-size: 2.3em;
  margin: 0 0.1em;
}
.begin{
  font-weight: bold;
  font-size: 2em;
  width: 100%;
  text-align: center;
}
.button{
  background: #ff8595;
  font-size: 1.4rem;
  padding: 0.7rem 0;
  width: 20%;
  font-weight: bold;
  position: relative;
  left: 40%;
  margin-top: 1.5%;
}
.arrowright{
  margin-left: 4%;
}
.glass{
  color: white;
  text-decoration: none;
}
.glass:hover{
  text-decoration: underline;
}

/*追加*/
/*.top_eyecatch{
  width:22%;
  display: inline-block;
  vertical-align: top;
  margin-top: 6%;
}*/



/*以下から武田追加*/
.negai{
  margin:4% 0% 2% 0;
  padding:0 0 3% 0;
}
.negai p{
  width:auto;
  margin:0% 2% 1% 10%;
  display:inline-block;
  line-height:230%;
  font-size: 1.2rem;
}
.toha{
  font-size:1.5rem;
}

.topimage{
  display: block;
}
.topimage_responsive{
  display: none;
}
.top-icon1{
  display:none;
}
.top-icon2{
  width: 5%;
  margin-left: -1%;
  margin-bottom: -1%;
}

/*タブレット対応（画面サイズが959px以下の場合ここの記述が適用される）*/

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



}

/*スマホ対応（画面サイズが559px以下の場合ここの記述が適用される）*/
@media screen and (max-width:559px) {

  .midashi{
    font-size: 1.55em;
    line-height: 50%;/*行間調整*/
    margin-bottom: 2%;
    margin-top: 5%;
  }
  .subtitle{
    font-size: 8px !important;
  }
  .saisei{
    width: 7%;
  }
  .minititle{
    font-size: 1.3em;
  }
  .movie{
    width: 91%;
    padding: 50px 4%  ;
    left: 0%;
    margin: 0;
  }
  .word{
    font-size: 1.4rem;
    padding-bottom: 2%;
  }
  .toha{
    font-size:1.0rem;
  }
  .box{
    border: solid 3px white;
    text-align: left;
    padding: 2%;
    width: 75%;
    margin-top: 2%;
    margin-left: 10%;
    font-size: 1.2rem;
    font-weight: bold;
  }
  /*変わるかもしれないので今のとこここまで（12月30日）*/


  .begin{
    font-weight: bold;
    font-size: 1.3em;
    width: 100%;
    text-align: center;
  }
  .button{
    font-size: 1.3rem;
    padding: 0.5rem 0;
    width: 32%;
    left: 34%;
  }

  .leftside{
    padding:30px;
    width:80%;
  }

  /*改訂版*/
  .topimage{
    display: none;
  }
  .topimage_responsive{
    display: block;
    width:100%;
  }
  .flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex!important;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .topsample{
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    height: auto;
  }
  .main{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order:1;
  }
  .movietitle,.midashi{
    display: none;
  }
  .hajimeni{
    padding: 30px;
    text-align: left;
  }
  .box{
    margin: 20px 0;
    width: 90%;
    padding:13px 25px 25px 0px;
  }
  .mtop{
    font-size: 15px;
  }
  .mtop li{
    margin: 13px;
    line-height: 180%;
  }
  .index_komoji{
    font-size: 0.6em!important;
  }
  .negai p{
    margin:20px 0;
    font-size: 13.3px;
  }
  .word{
    width: 100%;
  }
  .button{
    left: 0;
    width: auto;
    margin: 20px 10px 0 0;
  }
  .leftside p{
    font-size: 13px;
  }
  .twitter-timeline{
    margin-top: 20px!important;
  }
  .top-icon1{
    width:5%;
    margin-left: 0%;
    margin-bottom: 0%;
    display: inline;
  }
  .top-icon2{
    display:none;
  }
}