@charset "utf-8";

/****************************************
*  Imports
****************************************/

@import url('/clibs/fonts/font-awesome/font.css');
@import url('/clibs/fonts/secret/font.css');

@import url('/clibs/fonts/noto-sans-jp/font.css');
@import url('/clibs/fonts/changa-one/font.css');
@import url('/clibs/fonts/open-sans/font.css');



/****************************************
* Body
****************************************/

body {
  background: #FFFFFF;
}

hr {
  border: none;
  border-top: 1px solid #C9C9C9;
}

/****************************************
* Typography
****************************************/

h1 {
  color: #0c2484;
  font: normal normal 60px/1em 'Changa One';
  text-transform: uppercase;
  text-shadow: none;
  letter-spacing: 1px;
}

h2 {
  color: #33A4D4;
  font: normal bold 22px/1.5em 'Noto Sans Jp';
  text-transform: none;
  letter-spacing: 0px;
}

h3 {
  color: #0c2484;
  font: normal normal 30px/1em 'Changa One';
  text-transform: uppercase;
  letter-spacing: 1px;
}

h4 {
  color: #000000;
  font: normal bold 18px/1.5em 'Open Sans';
  text-transform: none;
  letter-spacing: 0px;
}

h5 {
  color: #000000;
  font: normal normal 22px/1.2em 'Open Sans';
  text-transform: none;
  letter-spacing: 0px;
}

p,
label,
li {
  color: #000000;
  font: normal normal 16px/1.5em 'Noto Sans Jp';
  text-transform: none;
  letter-spacing: 0px;
}

a {
  color: #be0000;
}

p > a {
  font-weight: 700;
}

a:hover {
  color: #0c2484;
}

/****************************************
* Inside Billboard
****************************************/

.billboard.inside {
  height: 300px;
  background-size: cover;
}

.billboard.inside h1 {
  margin-bottom: 0;
  color: ;
  padding: 0;
  background-color: ;
}

/****************************************
* Ribbon
****************************************/

.ribbon {
  background: #33a4d4 ;
  background-repeat: ;
  background-size: ;
  background-position: ;
  text-align: center;
}

.ribbon h1,
.ribbon h2,
.ribbon h3,
.ribbon h4,
.ribbon h5,
.ribbon h6 {
  color: #FFFFFF;
  font: normal bold 32px/1em 'Noto Sans Jp';
  text-transform: none;
  letter-spacing: 0px;
  text-shadow: none;
}

.ribbon p {
  color: #E7E7E7;
}

/****************************************
* Main Content
****************************************/

.main-content {
  background: #FFFFFF url('/clibs/textures/60-lines.png');
  background-repeat: repeat;
  background-size: ;
  background-position: ;
}

/****************************************
* Footer
****************************************/

footer {
  background: #FFFFFF url('/clibs/textures/absurdity.png');
  background-repeat: ;
  background-size: ;
  background-position: ;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: #0c2484;
  font: normal normal 30px/1.5em 'Changa One';
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: ;
}

footer p,
footer li,
footer a[href^=tel] {
  color: #000000;
  font-size: 16px;
}

footer a {
  color: #be0000;
  font-size: 16px;
}

footer a:hover,
footer a:active {
  color: #C9C9C9;
}

footer hr {
  border: none;
  border-top: 1px solid #C9C9C9;
}

footer .button {
  background: rgba(255,255,255,.5);
  color: #be0000;
  border: 1px solid #be0000;
}

footer .button:hover {
  background: #be0000;
  color: #FFFFFF;
  border: 1px solid #000000;
}

/****************************************
* Attribution
****************************************/

.attribution {
  background: rgba(0,0,0,0.8);
}

.attribution p {
  font-size: 11px;
}

/****************************************
* Buttons
****************************************/

.button,
input[type='submit'] {
  padding: 10px 20px;
  border-radius: 0px;
  background: rgba(255,255,255,.5);
  color: #be0000;
  border: 1px solid #be0000;
  font: normal bold 16px/1em 'Open Sans';
  text-transform: uppercase;
  text-shadow: ;
  letter-spacing: 1px;
}

.button:hover,
input[type='submit']:hover {
  border: 1px solid #00000;
  background: #be0000;
  color: #FFFFFF;
}

.button.alt,
input[type='submit'].alt {
  padding: 21px;
  background: #000000;
  color: #be0000;
  border: 1px solid #fbba16;
  border-radius: 6px;
  font: normal normal 20px/1.5em 'inherit';
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 2px 2px 5px #000000;
}

.button.alt:hover,
input[type='submit'].alt:hover {
  border: 1px solid #000000;
  background: #be0000;
  color: #000000;
}

/****************************************
* Form
****************************************/

input,
select,
textarea {
  border: 1px solid #CCCCCC;
  border-radius: 0px;
  color: #000000;
  background-color: #FFFFFF;
  font: normal normal 16px/1.5em 'Noto Sans Jp';
  text-transform: none;
  letter-spacing: 0px;
}

input:focus,
select:focus,
textarea:focus {
  border: 1px solid #494847;
  background-color: #FFFFFF;
}

/****************************************
* Mobile
****************************************/

@media (max-width: 1008px) {
  /****************************************
  * Typography
  ****************************************/

  h1 {
    font-size: 45px;
  }

  h2 {
    font-size: 16px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 22px;
  }

  h6 {
    font-size: #H6_MOBILE_FONT_SIZE#;
  }

  /****************************************
  * Inside billboard
  ****************************************/

  .billboard.inside {
    height: 200px;
  }

  /****************************************
  * Ribbon
  ****************************************/

  .ribbon {
    text-align: center;
  }

  .ribbon h1,
  .ribbon h2,
  .ribbon h3,
  .ribbon h4,
  .ribbon h5,
  .ribbon h6 {
    font-size: 18px;
  }
  /****************************************
  * Footer
  ****************************************/

  footer h1,
  footer h2,
  footer h3,
  footer h4,
  footer h5,
  footer h6 {
    font-size: 24px;
  }

  /****************************************
  * Buttons
  ****************************************/

  .button,
  input[type='submit'] {
    font-size: 14px;
  }

  .button.alt,
  input[type='submit'].alt {
    font-size: 16px;
  }
}