@charset "UTF-8";

@font-face {
  font-family:'HATTEN';
  src:url('../font/HATTEN.TTF');
}
body {
  font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size:20px;
  line-height:1.5;
  word-wrap:break-word;
}
a:hover {
  text-decoration:underline;
}
div.inner {
  position:relative;
  width:1200px;
  margin:0 auto;
}
a.togglebutton {
  cursor:pointer;
}
a.togglebutton:hover {
  text-decoration:none;
}

header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  color:#000;
  background-color:#FFFF00;
}
header h1 {
  margin-bottom:16px;
  text-align:center;
  font-family:'HATTEN';
  font-size:500%;
  line-height:1.1;
}
header div.contact_button {
  position:absolute;
  top:50%;
  right:16px;
  transform:translate(0, -50%);
}
header div.contact_button a {
  display:block;
  padding:4px 8px;
  color:#fff;
  background-color:#000;
}

div.topbg {
  padding:16px;
  padding-top:128px;
  background-image:url('../img/docogenic/back.jpg');
  background-size:100% auto;
}
div.topbg div.topright {
  text-align:right;
  font-family:'HATTEN';
  font-size:200%;
  line-height:1.1;
  letter-spacing:0.03em;
  color:#DD2729;
}
div.topbg div.topright span {
  color:#fff;
  background-color:#DD2729;
}
div.topbg div.topright span >em {
  font-size:200%;
  background-color:#DD2729;
}
div.topbg div.topright span >em em{
  font-size:150%;
  background-color:#DD2729;
}
div.topbg div.bottomleft {
  overflow:hidden;
  font-family:'HATTEN';
  line-height:1.1;
  font-size:300%;
  letter-spacing:0.03em;
  color:#fff;
}
div.topbg div.bottomleft div {
  margin-left:16px;
  margin-bottom:32px;
}
div.topbg div.bottomleft em {
  font-size:125%;
}
div.topbg div.bottomleft a {
  font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size:60%;
  line-height:1.2;
  color:#fff;
}
div.topbg div.redcircle {
  position:absolute;
  bottom:64px;
  right:64px;
  box-sizing:border-box;
  width:400px;
  height:400px;
  border-radius:200px;
  padding-top:48px;
  text-align:center;
  font-size:125%;
  color:#fff;
  background-color:#DD2729;
}

main {
  background-color:#FFFF00;
}
main section {
  border:solid #000;
  border-width:0px 8px 8px 8px;
  padding:48px 128px;
}
main section:last-child {
  border-width:0px 8px 0px 8px;
}
main section.intro h2 {
  margin-bottom:32px;
  font-size:160%;
  font-weight:bold;
}
main section.live h2,
main section.booth h2,
main section.access h2 {
  margin-bottom:16px;
  font-family:'HATTEN';
  line-height:1.1;
  font-size:400%;
  letter-spacing:0.03em;
}
main section.live {
  position:relative;
  overflow:hidden;
}
main section.live div.box {
  margin-left:16px;
  margin-bottom:32px;
  font-family:'HATTEN';
  line-height:1.1;
  font-size:200%;
  letter-spacing:0.03em;
}
main section.live em {
  font-size:125%;
}
main section.live a {
  font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size:60%;
  line-height:1.2;
  color:#000;
}
main section.live div.movie {
  position:absolute;
  bottom:128px;
  right:32px;
  width:auto;
  text-align:center;
}
main section.booth h3 {
  font-family:'HATTEN';
  line-height:1.1;
  font-size:200%;
  letter-spacing:0.03em;
}
main section.booth div {
  margin-bottom:32px;
}
main section.access p.message {
  margin-bottom:32px;
  font-size:125%;
}
main section.access div.info em {
  font-family:'HATTEN';
  line-height:1.1;
  font-size:200%;
  letter-spacing:0.03em;
}
main section.contact_etc a.contact_toggle {
  display:block;
  margin:32px 0;
  padding:32px 0;
  text-align:center;
  font-family:'HATTEN';
  line-height:1.1;
  font-size:300%;
  letter-spacing:0.03em;
  color:#fff;
  background-color:#000;
}
main section.contact_etc div {
  text-align:center;
}
main section.contact_etc div a:hover {
  opacity:0.7;
}

div.togglebox {
  display:none;
  position:fixed;
  top:20%;
  right:16px;
  z-index:200;
  height:auto;
  box-sizing:border-box;
  border:solid 8px #000;
  padding:16px;
  background-color:#ffff00;
}
div.togglebox h2 {
  margin-bottom:16px;
  font-family:'HATTEN';
  line-height:1.1;
  font-size:200%;
  letter-spacing:0.03em;
}
div.togglebox a.togglebutton {
  position:absolute;
  top:0px;
  right:16px;
  padding:4px 8px;
  line-height:24px;
  font-size:24px;
  font-weight:bold;
  color:#fff;
  background-color:#000;
}
div.togglebox input {
  font-size:100%;
}
div.togglebox input[type=submit] {
  margin-top:16px;
  border:none;
  padding:4px 16px;
  font-size:100%;
  font-weight:bold;
  color:#fff;
  background-color:#000;
  cursor:pointer;
}
div.togglebox textarea {
  margin-top:8px;
  width:95%;
  height:8em;
  font-size:100%;
}

footer {
  padding:64px 0;
  text-align:center;
  color:#fff;
  background-color:#000;
}
footer em {
  font-family:'HATTEN';
  line-height:1.1;
  font-size:200%;
  letter-spacing:0.03em;
}



@media
screen and (max-width:1286px) {
  div.inner {
    width:100%;
  }
  div.topbg {
    background-size:auto 100%;
    background-position:center top;
  }
  section.access img {
    width:100%;
  }
}

@media
screen and (max-width:1000px) {
  body {
    font-size:16px;
  }
  div.topbg div.redcircle {
    bottom:16px;
    right:16px;
    width:300px;
    height:300px;
    border-radius:150px;
    padding-top:32px;
  }
}

@media
screen and (max-width:800px) {
  div.topbg div.redcircle {
    position:static;
    margin:16px auto;
  }
  main section {
    padding:32px;
  }
  main section.live div.movie {
    position:static;
    width:100%;
    margin:16px auto;
  }
}

@media
screen and (max-width:600px),
screen and (max-device-width:480px) and (orientation:portrait) {
  header div.contact_button {
    position:static;
    width:50%;
    margin:16px auto;
    transform:none;
    text-align:center;
  }
  div.topbg {
    padding:0;
    font-size:10px;
  }
  div.topbg div.inner {
    box-sizing:border-box;
    padding:16px;
    background-color:rgba(0,0,0,0.5);
  }
  div.topbg div.redcircle {
    width:200px;
    height:200px;
    border-radius:100px;
    padding-top:32px;
  }
  div.togglebox {
    display:none;
    position:fixed;
    top:64px;
    right:5%;
    width:90%;
    height:auto;
  }
}

@media
screen and (max-device-width:480px) and (orientation:landscape) {
  body{
    font-size:8px;
  }
}