/*--------------------------------------------------------*/
.products{}a,a:link,a:visited,a:active {
  color: #000;
  text-decoration: none;
}
/*--------------------------------------------------------*/
.feature{
  max-width: 1000px;
  margin: 30px auto 0;
  text-align: left;
}
/*--------------------------------------------------------*/
.overview{}
.overview > h1{
  text-align: center;
  font-size: 3em;
  color: white;
  width: auto;
  background-color: #00B7CE;
  margin: 0 auto .5em;
  padding: 0.1em .75em;
  border-radius: 10px;
}
.overview > p{
  font-size: 1.5em;
  margin: 0;
}
/*--------------------------------------------------------*/
.Dott-U{
  display:grid;
  grid-template-rows:auto auto;
  grid-template-columns:1fr 3fr;
  padding: 0 2em;
  margin: 0 0 1em;
}
.Dott-U > h2{
  grid-area:1/1/2/3;
  text-align: center;
  font-size: 25px;
  color: white;
  width: 8em;
  background-color: #00B7CE;
  margin: 1em 0 .5em;
  padding: 0 .75em;
  border-radius: 20px;
}
.Dott-U > img{
  width: 100%;
  border-radius: 10px;
}
.Dott-U > p{
  font-size: 1.5em;
  padding: 0 2em;
}
/*--------------------------------------------------------*/
.LoCom{
  display:grid;
  grid-template-rows:auto auto;
  grid-template-columns:1fr 3fr;
  padding: 0 2em;
}
.LoCom > h2{
  grid-area:1/1/2/3;
  text-align: center;
  font-size: 25px;
  color: white;
  width: 20em;
  background-color: #00B7CE;
  margin: 1em 0 .5em;
  padding: 0 .75em;
  border-radius: 20px;
}
.LoCom > h2 > br{
    display: none;
}
.LoCom > img{
  width: 100%;
  border-radius: 10px;
}
.LoCom > p{
  font-size: 1.5em;
  padding: 0 2em;
}
/*--------------------------------------------------------*/
.other{}
.other > p{
  font-size: 1.5em;
  margin: 2em 0;
}
/*--------------------------------------------------------*/
.schedule{}
.schedule > h2{
  font-size: 1.75em;
}
.schedule > p{
  font-size: 1.5em;
  margin: 0.5em 0 0.5em 1em;
}
/*--------------------------------------------------------*/

/*--以下、スマホにて表示した場合---------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 568px){
  .feature{
    max-width: 97%;
    margin:auto 1%;
  }
  /*--------------------------------------------------------*/
  .overview{}
  .overview > h1{
    font-size: 1.4em;
    margin: 0 auto .5em;
    padding: 0.1em 0.1em;
  }
  .overview > p{
    font-size: 1em;
    margin: 0 0.5em;
  }
  .overview > p > br{
    display: none;
  }
  /*--------------------------------------------------------*/
  .Dott-U{
    display:grid;
    grid-template-rows:auto auto auto;
    grid-template-columns:auto;
    padding: 0;
    margin: 0 0.5em 1em;
  }
  .Dott-U > h2{
    grid-area:1/1/2/2;
    font-size: 1.25em;
    width: 8em;
    margin: 1em 0 0.5em;
    padding: 0;
  }
  .Dott-U > img{
    width: 75%;
    margin: 0 auto;
  }
  .Dott-U > p{
    font-size: 1em;
    margin: 0.5em 0 0;
    padding: 0;
  }
  .Dott-U > p > br{
    display: none;
  }
  /*--------------------------------------------------------*/
  .LoCom{
    display:grid;
    grid-template-rows:auto auto auto;
    grid-template-columns:auto;
    padding: 0;
    margin: 0 0.5em 1em;
  }
  .LoCom > h2{
    grid-area:1/1/2/2;
    font-size: 1.25em;
    width: 12.5em;
    margin: 1em 0 0.5em;
    padding: 0;
  }
  .LoCom > h2 > br{
    display:inline;
  }
  .LoCom > img{
    width: 75%;
    margin: 0 auto;
  }
  .LoCom > p{
    font-size: 1em;
    margin: 0.5em 0 0;
    padding: 0;
  }
  .LoCom > p > br{
    display: none;
  }

  /*--------------------------------------------------------*/
  .other{
    margin: 2em 0.5em 1em;
  }
  .other > p{
    font-size: 1em;
    margin: 0.5em 0;
  }
  /*--------------------------------------------------------*/
  .schedule{
    margin: 0 0.5em 0;
  }
  .schedule > h2{
    font-size: 1.25em;
  }
  .schedule > p{
    font-size: 1em;
    margin: 0.5em 0;
  }
  /*--------------------------------------------------------*/
}