html {
  margin:    0 auto;
  max-width: 1200px;
}

body {
  font-family: "Segoe UI","游ゴシック体",YuGothic,"游ゴシック", "Yu Gothic";
  font-feature-settings: "palt";
  /*
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
   */
  color: #333333;
  margin: 0;

}
/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 765px) {
  body {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 3.5rem;
  }
  h3 {
    font-size: 1.75rem;
  }
 h4 {
    font-size: 1.9rem;
  }
}
@media screen and (max-width: 764px) {
  body {
    font-size: 2.5vw;
  }
  h2 {
    font-size: 6vw;
  }
  h3 {
    font-size: 4vw;
  }
  h4 {
    font-size: 5vw;
  }
}

h2 {
  font-weight: normal;
}
h3 {
  font-weight: normal;
}

.button:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  height: auto;
}

section.top {
  position: relative;
}

section.top > img{
  width: 100%;
}

.section-4 {;
    padding: 80px 0;
}

.section-4 .image {
    display: inline-block;
    width: 52.68%;
    vertical-align: bottom;
}

.section-4 .content:after {
    content: '';
    display: block;
    clear: both;
}

.section-4 .text-holder {
    background: #fff;
    width: 80%;
    display: inline-block;
    vertical-align: bottom;
    height: 600px;
	padding: 40px 40px 0px 40px;
    overflow: auto;
}

.section-4 .text-holder .text {}



.overlay {
  position: absolute;
  bottom: 3vw;
  left: 0;
  width: 100%;
}

ul {
  list-style: none;
}

ul.top-upper {
  /*background: blue;*/
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-evenly;
}

ul.top-bottom{
  /*background: red;*/
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
}

ul.top-upper > li:first-child {
  width: 25%;
}
ul.top-upper > li:nth-child(2) {
  width: 25%;
}
ul.top-upper > li:nth-child(3) {
  width: 17%;
}
ul.top-upper > li:nth-child(4) {
  width: 15%;
}

ul.top-bottom {
  margin-top: 5vw;
}

ul.top-bottom > li:first-child {
  width: 24%;
}
ul.top-bottom > li:nth-child(2) {
  width: 5%;
}
ul.top-bottom > li:nth-child(3) {
  margin-top: 3px;
  width: 19%;
}

section {
  text-align: center;
}

.section-header {
  margin-top: 2vw;
}

.section-body {
  margin-top: 2vw;
}

.section-link {
  margin-top: 5vw;
  display: flex;
  width: 100%;
  justify-content: center;
}

.section-link a {
  width: 100%;
  max-width: 650px;
  min-width: 300px;
}

.section-link a img {
  width: 60vw;
}

.card-container {
  padding: 20px;
  padding-top: 0px;
  max-width: 1300px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
}

.card-container::after {
  content: "";
  display:block;
  width:45%;
}

article.card {
  margin-top: 3vw;
  padding-bottom: 3vw;
  width: 30%;
  min-width: 280px;
  max-width: 470px;
  background-color: #F7F7F7;
}
article.card2 {
  margin-top: 1vw;
  padding-top: 1vw;
  padding-bottom: 1vw;
  width: 50%;
  min-width: 280px;
  max-width: 600px;
  background-color: #F7F7F7;
}

article.card p {
  margin: 0;
}

article.card img.youtube {
  width: 50%;
  min-width: 100px;
}

footer {
  width: 100%;
  margin-top: 15vw;
  padding-bottom: 15vw;
  display: flex;
  justify-content: center;
}

footer .container {
  width: 80%;
  max-width: 1200px;
  display: flex;
  justify-content: space-evenly;
}

footer .container li {
  width: 50%;
  max-width: 300px;
  min-width: 150px;
}