@charset "UTF-8";

:root {
  --main-color: #5d9ab2;
  --acsent-color: #bf6a7a;
  --dark-color: #2b5566;
  --text-bright1-color: rgb(233, 133, 66);
  --text-bright2-color: rgb(253, 253, 18);
  --large-width: 1000px;
}

body {
  margin: 0;
  font-family: "M PLUS 1p", sans-serif;
}

.conA {
  height: 100vh;
  text-align: center;
  background-image: linear-gradient(
      rgba(0, 0, 0, 0.1),
      rgba(230, 228, 250, 0.2)
    ),
    url(img/high_header.jpg);
  background-position: center;
  background-size: cover;
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(233, 133, 66);
  color: var(--text-bright1-color);
}

.conA h1 {
  font-size: 8vw;
  margin-top: 0;
  margin-bottom: 0;
  font-family: "Kosugi Maru", sans-serif;
  letter-spacing: 0.1em;
  margin-left: 0.1em;
}

.conB {
  background-image: linear-gradient(
    rgba(166, 194, 218, 0.9),
    rgba(88, 78, 90, 0.774)
  );
  background-position: center;
  background-size: cover;
  color: rgb(253, 253, 18);
  color: var(--text-bright2-color);
}

.conB h1 {
  font-size: 4vw;
  margin-top: auto;
  margin-bottom: auto;
  text-align: left;
  margin-left: 1.6em;
}

.conC {
  background-color: antiquewhite;
  color: rgb(15, 15, 15);
}

.conC .text {
  padding: 20px;
}

.conC .photo {
  min-height: 200px;
  background-image: linear-gradient(#ff6298, #ff6298);
  background-position: center;
  background-size: cover;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: rgb(52, 46, 138);
  font-family: "Kosugi Maru", sans-serif;
}

.conC h1 {
  font-size: 5vw;
  margin-top: 0;
  margin-bottom: 0;
  font-family: "Kosugi Maru", sans-serif;
  letter-spacing: 0.2em;
  margin-left: 0.2em;
}

.conC h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
}

.conC p {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.8;
  opacity: 0.8;
}

.conC a {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 30px;
  border: solid 3px currentColor;
  border-radius: 6px;
  background-color: rgb(245, 141, 103);
  font-size: 14px;
  text-decoration: none;
}

.conC a:hover {
  background-image: linear-gradient(
    rgba(109, 96, 96, 0.521),
    rgba(109, 100, 100, 0.521)
  );
}

.conD {
  background-color: cadetblue;
  color: rgb(15, 15, 15);
}

.conD .text {
  padding: 20px;
}

.conD .photo {
  min-height: 200px;
  background-image: url(img/picban.png);
  background-position: center;
  background-size: cover;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: rgb(52, 46, 138);
  font-family: "Kosugi Maru", sans-serif;
}

.conD h1 {
  font-size: 5vw;
  margin-top: 0;
  margin-bottom: 0;
  font-family: "Kosugi Maru", sans-serif;
  letter-spacing: 0.2em;
  margin-left: 0.2em;
}

.conD h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
}

.conD p {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.8;
  opacity: 0.8;
}

.conD a {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 30px;
  border: solid 3px currentColor;
  border-radius: 6px;
  background-color: rgb(245, 141, 103);
  font-size: 14px;
  text-decoration: none;
}

.conD a:hover {
  background-image: linear-gradient(
    rgba(109, 96, 96, 0.521),
    rgba(109, 100, 100, 0.521)
  );
}

.conE {
  background-color: bisque;
  color: rgb(15, 15, 15);
}

.conE .text {
  padding: 20px;
}

.conE .photo {
  min-height: 200px;
  background-image: url(img/pika.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: rgb(52, 46, 138);
  font-family: "Kosugi Maru", sans-serif;
}

.conE h1 {
  font-size: 3vw;
  margin-top: 0;
  margin-bottom: 0;
  font-family: "Kosugi Maru", sans-serif;
  letter-spacing: 0.2em;
  margin-left: 0.2em;
}

.conE h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
}

.conE p {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.8;
  opacity: 0.8;
}

.conE a {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 30px;
  border: solid 3px currentColor;
  border-radius: 6px;
  background-color: rgb(245, 141, 103);
  font-size: 14px;
  text-decoration: none;
}

.conE a:hover {
  background-image: linear-gradient(
    rgba(109, 96, 96, 0.521),
    rgba(109, 100, 100, 0.521)
  );
}

@media (min-width: 768px) {
  .conC .container {
    display: flex;
    max-width: 1000px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }

  .conC .photo {
    flex: 3;
  }

  .conC .text {
    flex: 2;
    padding: 50px;
  }

  .conD .container {
    display: flex;
    max-width: 1000px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }

  .conD .photo {
    flex: 3;
  }

  .conD .text {
    flex: 2;
    padding: 50px;
  }

  .conE .container {
    display: flex;
    max-width: 1000px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }

  .conE .photo {
    flex: 3;
  }

  .conE .text {
    flex: 2;
    padding: 50px;
  }
}