html, body {
  height: 100%;
}

.bg-container {
  position: absolute;
  left: 0;
  top: 0;
}

.bg-0 {
  background-color: #94beb6;
  position: absolute;
}

.bg-1 {
  background-color: #fff;
  position: absolute;
}

.bg-2 {
  background-color: #94beb6;
  position: absolute;
}

.main-container {
  overflow: hidden;
  opacity: 0;
}

.container,
.container-other {
  line-height: 28px;
}

.top-container,
.top-container-2 {
  max-width: 95%;
  
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  margin-bottom: 200px;

  position: relative;
  overflow: hidden;
}

.top-image-container {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.top-image-container-2 {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
}

.top-image-container-2 > img {
  max-width: 100%;
  width: 100%;
}

.top-image-copy {
  position: absolute;
  left: 10%;
  top: 10%;
}

.top-image-copy > div {
  position: absolute;
  opacity: 0;
}

.top-image-copy > div > img {
}

.top-image-logo {
  position: absolute;
  left: 9%;
  top: 54%;

  opacity: 0;
}

.top-image-logo > img {
  height: auto;
}

.top-image {
  width: 100%;
  opacity: 0;

  transform: scale(1.5);
  -webkit-transform: scale(1.5);

  transition: all 4.5s;
  -webkit-transition: all 4.5s;
}

.top-image-show {
  transform: scale(1.0);
  -webkit-transform: scale(1.0);
}

.line-top {
  width: 0;
  height: 2px;

  background-color: #DF6C58;

  position: absolute;
  left: 0;
  top: 0;

  transition: all linear 1.5s;
  -webkit-transition: all linear 1.5s;
}

.line-top-show {
  width: 100%;
}

.line-left {
  width: 2px;
  height: 0;

  background-color: #DF6C58;

  position: absolute;
  left: 0;
  bottom: 0;

  transition: all linear 1.5s;
  -webkit-transition: all linear 1.5s;

  transition-delay: 1.5s;
  -webkit-transition-delay: 1.5s;
}

.line-right {
  width: 2px;
  height: 0;

  background-color: #DF6C58;

  position: absolute;
  right: 0;
  top: 0;

  transition: all linear 1.5s;
  -webkit-transition: all linear 1.5s;

  transition-delay: 1.5s;
  -webkit-transition-delay: 1.5s;
}

.top-image-show {
  opacity: 1.0;
}

.line-bottom {
  width: 0;
  height: 2px;

  background-color: #DF6C58;

  position: absolute;
  right: 0;
  bottom: 0;

  transition: all linear 1.5s;
  -webkit-transition: all 1.5s;
}

.line-bottom-show {
  width: 100%;
}

.message-container {
  height: 1100px;
  position: relative;

  max-width: 730px;

  margin-left: auto;
  margin-right: auto;
}

.message-title {
  font-size: 60px;
  color: #fff;

  margin-bottom: 70px;

  position: absolute;
  opacity: 0;
}

.message-description {
  font-size: 18px;
  color: #fff;
  letter-spacing: 4px;
  line-height: 40px;
  white-space: nowrap;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  top: 260px;
  opacity: 0;
}

.responsive-container {
  max-width: 980px;
  height: 1200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.responsive-title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.responsive-image {
  position: absolute;
}

.responsive-image > img {
  width: 465px;
}

.responsive-images-0 {
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;

  margin-left: auto;
  margin-right: auto;
}

.responsive-images-1 {
  position: absolute;
  left: 0;
  right: 0;
  top: 630px;

  margin-left: auto;
  margin-right: auto;
}

.responsive-image-0 {
  left: 0;
}

.responsive-image-1 {
  left: 510px;
}

.responsive-image-2 {
  left: 0;
}

.responsive-image-3 {
  left: 510px;
}

.front-page-design-container {
  max-width: 980px;
  height: 1300px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.front-page-design,
.other-functions {
  position: absolute;
  left: 0;
  right: 0;

  text-align: center;
}

.item-billboard > .left {
  width: 50%;
  position: relative;
}

.item-billboard > .right {
  width: 50%;
  position: relative;
  left: 500px;
}

.item-billboard,
.item-topics,
.item-access-ranking {
  background-color: #fff;

  position: absolute;
  left: 0;
  right: 0;
}

.item-billboard {
  height: 520px;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
}

.topics-and-access-ranking {
  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 0;
  right: 0;
  top: 670px;
}

.container-other > .left {
  left: 0;
  position: absolute;
}

.container-other > .right {
  left: 510px;
  position: absolute;
}

.container-other > div {
  width: 460px;
}

.access-analysis {

}

.item-topics,
.item-access-ranking {
  height: 570px;
}

.billboard-flag,
.topics-flag,
.access-ranking-flag,
.new-information-flag,
.access-analysis-flag,
.auth-flag,
.questionnaire-flag,
.movie-flag,
.calendar-flag,
.like-flag,
.comment-flag,
.reservation-flag,
.file-flag,
.banner-flag,
.mypage-flag,
.inquiry-flag,
.csv-flag {
  position: absolute;
  left: -7px;
  top: 10px;
}

.billboard-icon,
.topics-icon,
.access-ranking-icon,
.new-information-icon,
.access-analysis-icon,
.auth-icon,
.questionnaire-icon,
.movie-icon,
.calendar-icon {
  position: absolute;
  left: 156px;
}

.billboard-icon {
  top: 90px;
}

.topics-icon,
.access-ranking-icon {
  top: 80px;
}

.new-information-icon,
.access-analysis-icon {
  top: 80px;
}

.auth-icon,
.questionnaire-icon {
  top: 80px;
}

.movie-icon,
.calendar-icon {
  top: 80px;
}

.billboard-title,
.topics-title,
.access-ranking-title {
  letter-spacing: 6px;
  text-align: center;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 0;
  right: 0;
}

.new-information-title,
.access-analysis-title,
.auth-title,
.questionnaire-title,
.movie-title,
.calendar-title {
  letter-spacing: 2px;
  font-size: 24px;

  position: absolute;
  left: 26px;
  right: 0;

  top: 240px;
}

.billboard-title {
  top: 270px;

  font-size: 32px;  
}

.topics-title,
.access-ranking-title {
  top: 240px;

  font-size: 28px; 
}

.billboard-description {
  font-size: 18px;

  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  padding: 20px;

  position: absolute;
  left: 0;
  right: 0;
}

.topics-description,
.access-ranking-description {
  font-size: 18px;

  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  padding: 6px;

  position: absolute;
  left: 0;
  right: 0;
}

.billboard-description {
  top: 310px;

  width: 460px;
}

.topics-description,
.access-ranking-description {
  top: 270px;

  width: 410px;
}

.new-information-description,
.access-analysis-description,
.auth-description,
.questionnaire-description,
.movie-description,
.calendar-description {
  font-size: 16px;

  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  padding: 6px;

  position: absolute;
  left: 0;
  right: 0;

  width: 410px;
}

.new-information-description,
.access-analysis-description,
.movie-description,
.calendar-description {
  top: 270px;
}

.auth-description,
.questionnaire-description {
  top: 300px;
}

.billboard-feature {
  position: absolute;
}

.billboard-feature-0 {
  top: 20px;
}

.billboard-feature-1 {
  top: 186px;
}

.billboard-feature-2 {
  top: 352px;
}

.topics-feature,
.access-ranking-feature {
  position: absolute;
  left: -7px;
  top: 385px;
}

.item-topics {
  background-color: #fff;
}

.item-access-ranking {
  background-color: #fff;
}

.other-functions-container {
  max-width: 980px;
  height: 2850px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.new-information-and-access-analysis {
  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
}

.auth-and-questionnaire {
  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 0;
  right: 0;
  top: 710px;
}

.movie-and-calendar {
  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 0;
  right: 0;
  top: 1350px;
}

.like-and-comment {
  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 0;
  right: 0;
  top: 1960px;
}

.reservation-and-file {
  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 0;
  right: 0;
  top: 2190px;
}

.banner-and-mypage {
  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 0;
  right: 0;
  top: 2420px;
}

.inquiry-and-csv {
  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 0;
  right: 0;
  top: 2650px;
}

.like,
.comment,
.reservation,
.file,
.banner,
.mypage,
.inquiry,
.csv {
  height: 180px;

  background-color: #fff;
}

.like-title,
.comment-title,
.reservation-title,
.file-title,
.banner-title,
.mypage-title,
.inquiry-title,
.csv-title {
  letter-spacing: 2px;
  font-size: 24px;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 32px;
  top: 55px;
}

.inquiry-title {
  line-height: 30px;
  font-size: 24px;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  left: 32px;
  top: 55px;}

.like-icon,
.comment-icon,
.reservation-icon,
.file-icon,
.banner-icon,
.mypage-icon,
.inquiry-icon,
.csv-icon {
  position: absolute;
  left: 335px;
  top: 41px;
}

.like-description,
.comment-description,
.reservation-description,
.file-description,
.banner-description,
.mypage-description,
.csv-description {
  position: absolute;
  left: 32px;
  top: 100px;

  width: 290px;

  font-size: 14px;
  line-height: 20px;
}

.inquiry-description {
  position: absolute;
  left: 32px;
  top: 120px;

  width: 290px;

  font-size: 14px;
  line-height: 20px;
}

.new-information,
.access-analysis,
.movie,
.calendar {
  height: 560px;

  background-color: #fff;
}

.auth,
.questionnaire {
  height: 590px;

  background-color: #fff;
}

.new-information-feature,
.access-analysis-feature,
.movie-feature,
.calendar-feature {
  position: absolute;
  left: -7px;
  top: 410px;
}

.auth-feature,
.questionnaire-feature {
  position: absolute;
  left: -7px;
  top: 440px;
}

.footer {
  position: relative;
  max-width: 970px;
  height: 350px;
  margin: 150px auto 0 auto;
}

.footer a {
  color: #fff;
  text-decoration: none;
}

.footer a:link,
.footer a:visited {
  color: #fff;
}

.footer a:hover {
  color: #ccc;
}

.footer-bg {
  position: relative;
  left: 50%;
  width: 3840px;
  margin-left: -1920px;
  margin-right: -1920px;
  position: absolute;
  z-index: 5;
}

.footer-bg-skew {
  position: absolute;
  left: 50%;

  width: 3840px;
  height: 1400px;
  
  margin-left: -1920px;
  margin-right: -1920px;
  
  background-color: #df6c58;

  transform-origin: 50% 0;
  transform: skewY(0.11066rad) skewX(-0.62565rad) translateX(310px);
}

.footer-bg-skew-left {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  -moz-transform: translateZ(0.1);
  -ms-transform: translateZ(0.1);
  -webkit-transform: translateZ(0.1);
  transform: translateZ(0.1);
  outline: 1px solid transparent;
  background: #df6c58;
}

.footer-bg-skew-right {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  left: 50%;
  -moz-transform: translateZ(0.1);
  -ms-transform: translateZ(0.1);
  -webkit-transform: translateZ(0.1);
  transform: translateZ(0.1);
  outline: 1px solid transparent;
  background: #df6c58;
  transform: translate(0px, -15px);

  border-left: 1px solid #b55648;
}

.footer-bg-skew-left:before,
.footer-bg-skew-right:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 260px;
  background-color: #d36554;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.footer-contact {
  z-index: 10;
}

.footer-contact-company {
  color: #fff;
  font-size: 24px;
  font-weight: bold;

  position: absolute;
  left: 40px;
  top: -10px;

  z-index: 11;
}

.footer-contact-tel {
  position: absolute;
  left: 0;
  top: 110px;

  z-index: 11;
}

.footer-contact-mail {
  position: absolute;
  left: 0;
  top: 140px;

  z-index: 11;
}

.footer-contact-tel-title,
.footer-contact-fax-title,
.footer-contact-mail-title {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 27px;

  float: left;

  width: 50px;
}

.footer-contact-tel-description,
.footer-contact-fax-description,
.footer-contact-mail-description {
  color: #fff;
  font-size: 20px;
  font-weight: bold;

  float: left;
}

.footer-menu {
  position: absolute;
  left: 0;
  top: 280px;

  z-index: 11;
}

.footer-menu-content-left {
  z-index: 11;

  color: #fff;
  font-weight: bold;

  float: left;
}

.footer-menu-content {
  z-index: 11;

  color: #fff;
  font-weight: bold;

  float: left;
}

.footer-menu-content:before {
  content: "\FF0F";
  display: inline-block;
  margin-left: 10px;
  margin-right: 6px;
  color: #fff;
}

.footer-external-links {
  position: absolute;
  left: 360px;
  top: 55px;

  z-index: 11;
}

.footer-external-link {
  z-index: 11;
  position: absolute;
  width: 300px;
}

.footer-external-link:nth-child(1) {
  top: 0;
}

.footer-external-link:nth-child(2) {
  top: 50px;
}

.footer-external-link:nth-child(3) {
  top: 100px;
}

.footer-external-link-title {
  font-weight: bold;
  font-size: 16px;
}

.footer-external-link-url {
  font-weight: bold;
  font-size: 11px;
}

.footer-external-link-url:after {
  content: "";
  width: 9px;
  height: 9px;
  background-image: url(../images/icon_external_link.png);
  background-repeat: no-repeat;
  display: inline-block;
  margin-left: 3px;
}

.footer-contact-button {
  position: absolute;
  left: 460px;
  top: 65px;

  z-index: 11;

  width: 200px;
  height: 90px;
}

.footer-contact-button-content {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 90px;

  transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
}

.footer-contact-button-content:hover {
  background-color: #d36554;
}

.footer-contact-button-line-top {
  position: absolute;
  left: 0;
  top: 0;

  width: 0;
  height: 2px;

  background-color: #fff;

  transition: all linear 0.15s;
  -webkit-transition: all linear 0.15s;
}

.footer-contact-button-line-bottom {
  position: absolute;
  right: 0;
  bottom: 0;

  width: 0;
  height: 2px;

  background-color: #fff;

  transition: all linear 0.15s;
  -webkit-transition: all linear 0.15s;
}

.footer-contact-button-line-left {
  position: absolute;
  left: 0;
  bottom: 0;

  width: 2px;
  height: 0;

  background-color: #fff;

  transition: all linear 0.15s;
  -webkit-transition: all linear 0.15s;
}

.footer-contact-button-line-right {
  position: absolute;
  right: 0;
  top: 0;

  width: 2px;
  height: 0;

  background-color: #fff;

  transition: all linear 0.15s;
  -webkit-transition: all linear 0.15s;
}

.footer-contact-button-content {
  opacity: 0.0;
}