@charset "UTF-8";
/* CSS Document */
html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "a-otf-jun-pro"; }

/* 最小フォントサイズ : 16px */
html {
  font-size: 16px;
  overflow: hidden;
  /* 最大フォントサイズ : 幅 1280px 以上は 24px */
  color: #1a262a; }
  @media (min-width: 860px) {
    html {
      font-size: calc(1rem + ((1vw - 8.6px) * 1.9048)); } }
  @media (min-width: 1280px) {
    html {
      font-size: 24px; } }

#explanation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  margin: auto;
  background-image: url(../images/yubi.png);
  background-color: rgba(0, 0, 0, 0.5);
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 999; }
  @media screen and (min-width: 960px) {
    #explanation {
      background-image: url(../images/mouse.png); } }

.wf-loading {
  visibility: hidden; }

.wf-active {
  visibility: visible; }

.wf-inactive {
  visibility: hidden; }

h1 {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  padding-top: calc(65vh - 100px);
  height: 10vh;
  line-height: 1em;
  font-size: 200%; }
  @media screen and (min-width: 960px) {
    h1 {
      padding-top: 130px; } }

.headerimg {
  width: 100px;
  height: 100px; }
  @media screen and (min-width: 960px) {
    .headerimg {
      width: 300px;
      height: 300px; } }

.inner_ {
  margin-top: 5vh; }

.headertitle {
  width: 90vw; }
  @media screen and (min-width: 960px) {
    .headertitle {
      width: 1339px;
      height: 100px; } }

h2 {
  font-family: "vdl-lineg";
  font-size: 150%; }
  @media screen and (min-width: 960px) {
    h2 {
      font-size: 300%; } }

header {
  width: 100vw;
  background: url(../images/top_bg_1.png) 0 0 no-repeat;
  background-size: 100vw auto; }

#fixedBox {
  margin: 0;
  padding: 0;
  background: #eee; }

#wrap {
width: 100vw;
  overflow: hidden;
  margin: auto; }

#contents footer {
  width: 100%;
  margin: 0; }

.lh10 {
  line-height: 1.0em; }

.lh12 {
  line-height: 1.2em; }

.lh15 {
  line-height: 1.5em; }

.lh20 {
  line-height: 2.0em; }

.text-center {
  text-align: center; }

.text-wbr {
  word-break: keep-all; }

#about .inner, #news .inner, #creator .inner, #contact .inner, #works .inner, #copy .inner, #contactform .inner,#schedule .inner {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0; }
  #about .inner h2, #news .inner h2, #creator .inner h2, #contact .inner h2, #works .inner h2, #copy .inner h2, #contactform .inner h2,#schedule .inner h2 {
    padding: 5vh 0 0 0; }

#about {
  width: 100%;
  background-color: #fff369; }
  @media screen and (min-width: 960px) {
    #about .inner p {
      font-size: 140%; } }
  #about .inner ul {
    padding: 4vh 0; }
    #about .inner ul li {
      margin: 0.5em 0; }
      @media screen and (min-width: 960px) {
        #about .inner ul li {
          font-size: 140%; } }

#news {
  margin: auto;
  background-color: #55e4c1;
  text-align: center; }
  #news dl {
    display: inline-block;
    text-align: left;
    width: 90vw; }
    @media screen and (min-width: 960px) {
      #news dl {
        width: auto; } }
    #news dl dt {
      font-size: 80%;
      margin: 0;
      padding: 0;
      margin: 1vh 0 0 0; }

.hidden {
  visibility: hidden; }

.face {
  width: 34vw;
  height: auto; }
  @media screen and (min-width: 960px) {
    .face {
      width: 300px;
      height: 300px; } }

.c_comment {
  margin: 2vh 0; }

.pxv {
  width: 25px;
  height: 25px; }
  @media screen and (min-width: 960px) {
    .pxv {
      width: 50px;
      height: 50px; } }

#mignon {
  width: 100vw;
  height: 100vh;
  background-color: #ffaeba; }

#hamada {
  width: 100vw;
  height: 100vh;
  background-color: #c1e66a; }

#sonota {
  width: 100vw;
  height: 100vh;
  background-color: #6E94FF; }
#schedule{
  width: 100vw;
  height: 100vh;
  background-color: #FFA25B;
}


	#sch {
		margin: auto;
		width: 60vw;
}
#sch td {
	width:50%;
	height: 15vh;
	text-align: center;
}
	#sch p{
		font-size:50%;
	}

#works .inner {
  background-color: #f45e54;
  text-align: center; }
#works time {
  padding-right: 2em; }
@media screen and (min-width: 960px) {
  #works span, #works time {
    font-size: 50%; } }
#works dl {
  width: 90vw;
  text-align: left; }
  @media screen and (min-width: 960px) {
    #works dl {
      width: auto; } }
  #works dl dt {
    font-size: 70%;
    margin: 0;
    padding: 0;
    line-height: 1.2em; }
  #works dl dd {
    margin: 0 0 1vh 0;
    padding: 0;
    font-size: 90%;
    line-height: 1.1em; }

.inlinebrock {
  display: inline-block; }

#contact {
  font-size: 90%; }
  #contact .inner {
    background-color: #fff;
    text-align: center; }
  #contact p {
    width: auto;
    margin: auto;
    line-height: 1.6em;
    margin-bottom: 5vh; }
  #contact ul {
    list-style-position: inside;
    width: 90vw;
    text-align: left; }
    @media screen and (min-width: 960px) {
      #contact ul {
        width: auto; } }
    #contact ul li {
      list-style: disc;
      padding-left: 1em;
      text-indent: -1.5em;
      list-style-position: inside;
      line-height: 1.6em; }

body {
  -webkit-text-size-adjust: 100%; }

#contactF {
  margin-top: 2vh; }
  @media screen and (min-width: 960px) {
    #contactF {
      margin-top: 15vh; } }

#contactF2 {
  display: none;
  margin-top: 2vh; }
  @media screen and (min-width: 960px) {
    #contactF2 {
      margin-top: 15vh; } }

@media screen and (min-width: 960px) {
  #sbtn {
    width: 5vw;
    height: 4vh; } }

.formTable {
  text-align: left; }

#contactform {
  display: none;
  font-size: 90%; }
  #contactform input {
    font-size: 17px; }
  #contactform .inner {
    background-color: #fff;
    text-align: center; }
  #contactform p {
    width: auto;
    margin: auto;
    line-height: 1.6em;
    margin-bottom: 5vh; }
  #contactform ul {
    list-style-position: inside;
    width: 90vw;
    text-align: left; }
    @media screen and (min-width: 960px) {
      #contactform ul {
        width: auto; } }
    #contactform ul li {
      list-style: disc;
      padding-left: 1em;
      text-indent: -1.5em;
      list-style-position: inside;
      line-height: 1.6em; }
  #contactform table {
    margin: auto; }
    #contactform table input {
      width: 40vw; }
    #contactform table textarea {
      width: 40vw; }
    #contactform table td {
      padding: 0.5em 0.5em 0.5em 0; }

.submit {
  margin: 2em 0; }

.ruv {font-size: 50%;}
.roll {font-size: 120%;}

#copy .inner {
  background-color: #333543;
  color: #FFF; }
#copy ul {
  padding: 4vh 0; }
  #copy ul li {
    margin: 0.5em;
    line-height: 1.5em; }
    @media screen and (min-width: 960px) {
      #copy ul li {
        margin: 3em 0; } }
#copy p {
  line-height: 1.5em; }

#loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  margin: auto;
  background-image: url(../images/loading.png);
  background-color: #FFF;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1000; }