@font-face {
  font-family: Tahu;
  src: url("css/fonts/Tahu.ttf") format("truetype")
}

@font-face {
  font-family: Gravity-Book;
  src: url("css/fonts/Gravity-Book.otf") format("opentype")
}

@font-face {
  font-family: Gravity-Regular;
  src: url("css/fonts/Gravity-Regular.otf") format("opentype")
}

@font-face {
  font-family: Gravity-Bold;
  src: url("css/fonts/Gravity-Bold.otf") format("opentype")
}

@font-face {
  font-family: Gravity-Bold-Italic;
  src: url("css/fonts/Gravity-BoldItalic.otf") format("opentype")
}

body {font-family: Gravity-Book; font-size: 18px; color: #000; margin: 0px;}

.lines {position: absolute; top: 63px; left: 0px; z-index: 0; width: calc(100vw - 20px);}
.line {height: 8px;}


#yellowLine {width: 50%; background: linear-gradient(to right, #fff140, #fff);}
#redLine { width: 75%; background: linear-gradient(to right,#f7201e, #fff);}
#greenLine { width: 75%; background: linear-gradient(to right,#0fe9ac, #fff);}
#blueLine { width: 100%; background: linear-gradient(to right,#5ea8e9, #fff);}



.container {max-width: 1000px; margin: 30px auto; }

#logoArea {position: relative; z-index: 2;}
.logo {width: 266px;}

#introArea {text-align: center; margin-top: 40px; margin-bottom: 40px;}
#intro1 {font-size: 120px; color: #038; font-family: Tahu;}
#intro2 {font-size: 70px; color: #000; font-family: Gravity-Bold;}
#intro3 {font-size: 70px; color: #000; font-family: Gravity-Bold;}
#intro4 {font-size: 80px; color: #038; font-family: Tahu; margin-top: 40px;}

#descriptionArea {text-align: center; margin-top: 50px; margin-bottom: 30px;}

#bookArea {text-align: center;}

#formIntro {margin-top: 20px;}
#formIntroCaption {font-family: Gravity-Bold-Italic; font-size: 30px; color: #038; text-align: center; margin-bottom: 40px;}
#formList {margin-left: calc(50% - 320px); display: inline-block; margin-bottom: 30px; }
#formList li {line-height: 1.8em;}
.level2 {margin-left: 40px;}
#form { padding: 20px 0px; background-color: #E4EEFF; margin: 20px 0px; border: 2px solid #5ea8e9; border-right-width: 0px; border-left-width: 0px;}
.fieldSet {display: table; margin-bottom: 30px; margin: auto;}
.field {display: table-cell; padding: 10px;}
.formIntro {margin-bottom: 40px;}
.fieldCaption {margin-bottom: 8px; }
.fieldError {display: none; color: red; font-family: Gravity-Bold; font-size: 0.9em; margin-top: 3px;}
.formInput {font-family: Gravity-Bold; font-size: 20px; width: 340px; border: 2px solid #5ea8e9; padding: 15px 10px; border-radius: 5px; color: #000; outline: none;}
.error {border-color: red; background-color: #FCC;}
#submitArea {text-align: center; margin-top: 20px; font-family: Gravity-Bold;}
.btn {font-family: Gravity-Bold; font-size: 18px; width: 340px; background-color: #5ea8e9; color: #FFF; padding: 15px 20px; border: none; border-radius: 5px; cursor: pointer; }
.btn:hover {box-shadow: 3px 3px 16px #000;}

#copyrightArea {color: #000; margin-top: 50px; margin-bottom: 50px; text-align: center;}

@media (max-width: 1000px) {
  .container {margin: 30px 20px; }
}

@media (max-width: 800px) {
  #intro2 {font-size: 55px;}
  #intro3 {font-size: 55px;}
  .bookImg {width: 81vw;}
  #formIntroCaption {font-size: 24px;}
  .fieldSet {display: block;}
  .field {display: block; padding: 10px 20px;}
  .formInput { width: calc(100% - 24px); }
  .btn { width: calc(100% - 40px); }
}

@media (max-width: 700px) {
  .container {margin: 30px 10px; }
  body {font-size: 16px;}
  #formList {padding-left: 10px; margin-left: 10px;}
}

@media (max-width: 640px) {
  #intro1 {font-size: 90px;}
  #intro4 {font-size: 60px;}
  #intro2 {font-size: 48px;}
  #intro3 {font-size: 48px;}
  #formIntroCaption {font-size: 20px;}
}

@media (max-width: 520px) {
  #intro4 {font-size: 55px;}
  #intro2 {font-size: 42px;}
  #intro3 {font-size: 42px;}
}

@media (max-width: 480px) {
  body {font-size: 15px;}
  #intro1 {font-size: 80px;}
  #intro4 {font-size: 42px;}
  #intro2 {font-size: 36px;}
  #intro3 {font-size: 36px;}
  #formIntroCaption {font-size: 18px;}
}

@media (max-width: 400px) {
  #intro2 {font-size: 32px;}
  #intro3 {font-size: 32px;}
}