@charset "UTF-8";

@font-face {
	font-family: 'MyFont';
	src: url(../Font/851H-kktt.ttf);
}

@font-face {
	font-family: 'SmartFont';
	src: url(../Font/03スマートフォントUI.otf);
}


body{
    margin: 0;
    padding: 0;
    display: block;
    color:white;
    font-weight: 2px;

    font-size: 3.5em;
    font-family: SmartFont;
    overflow: hidden;

    box-sizing:border-box;
}

body::before {
    background:url('../images/bg.jpg') no-repeat left top;
    background-size:cover;
    background-position: center;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    -webkit-filter: blur(10px);
}
p{
    text-indent: 1em;
}

#hamburger{
    width: 100%;
    height: 144px;
}

#title_area {
    box-shadow: 0px 10px 30px black;
    position: fixed;
    background-color: rgba(217, 237, 247, 0.48);
    width: 100%;
    height: 144px;
    z-index: 1;
    top: 0
    
}
#list_main {
    display: none;
    margin-left: -15px;
    margin-top: 41px;
    position: fixed
    
}
#list_main .list_part {
    background-color: rgba(255, 255, 255, 0.9);
    display: blcok;
    height: 100px;
    border: 1px solid #444

}

.top_circle{
    -webkit-border-top-left-radius: 40px;
    -webkit-border-top-right-radius: 40px;
    -moz-border-radius-topleft: 40px;
    -moz-border-radius-topright: 40px;
}

.bottom_circle{
    -webkit-border-bottom-right-radius: 40px;
    -webkit-border-bottom-left-radius: 40px;
    -moz-border-radius-bottomright: 40px;
    -moz-border-radius-bottomleft: 40px;
}

#date, #logo {
    background-repeat: no-repeat;
    width: 100%;
    height: 136px;
    filter: invert(70%);
}
#list_main .list_part a {
    top: 0;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    font-family: 'Hiragino Kaku Gothic Pron', 'ヒラギノ 角ゴ ProN W3', Meiryo, sans-serif;
    font-size: .9em
}
#list_logo {
    background-image: url(../images/list.png);
    filter: invert(70%);
    background-repeat: no-repeat;
    background-size: 64px 64px;
    margin-top: 40px;
    margin-left: 16px;
    height: 64px;
    width: 64px
}
#logo {
    margin-top: 20px;
    background-image: url(../images/logo.png);
}
#date {
    margin-top: 35px;
    background-image: url(../images/date.png);
    background-size: 300px;

}

#menu_bar {
    margin-bottom: 30px
}
#access_button {
    background-color: #dff0d8
}
#event_button {
    background-color: #d9edf7
}
#store_button {
    background-color: #fcf8e3
}
#department_exhibition_button {
    background-color: #f7d9d9
}
#other_exhibition_button {
    background-color: #d9f7f0
}
#access_text, #department_exhibition_text, #event_text, #other_exhibition_text, #store_text {
    background-color: rgba(192, 192, 255, 0)
}

#time_area{
    display: flex;
    width: 100%;
    height: 15%;
    align-items: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}

#time_area .date_text{
    font-family:Myfont;
    color:white;
    -webkit-text-stroke: 3px;
    text-shadow: 3px 3px 2px #000, -3px 3px 2px #000, 3px -3px 2px #000, -3px -3px 2px #000;
}



.page{
    margin:30px;
    padding:20px;
    background-color: rgba(175, 175, 175, 0.64);
    -webkit-border-top-left-radius: 40px;
    -webkit-border-top-right-radius: 40px;
    -webkit-border-bottom-right-radius: 40px;
    -webkit-border-bottom-left-radius: 40px;
    -moz-border-radius-topleft: 40px;
    -moz-border-radius-topright: 40px;
    -moz-border-radius-bottomright: 40px;
    -moz-border-radius-bottomleft: 40px;
}

.center-block {
    font-size: .9em
}
.text{
    display: none;
}

#default_text{
    display:inline-block;
}
.access_font_color {
    color: red
}
.access_back_color {
    background-color: #fa8
}
.event_font_color {
    color: green
}
.event_back_color {
    background-color: #af8
}
.store_font_color {
    color: #00f
}
.store_back_color {
    background-color: #fa8
}
.department_back_color, .other_back_color {
    background-color: #af8
}
.department_font_color {
    color: purple
}
.other_font_color {
    color: #008db5
}
.white_back_color {
    background-color: #fff
}
.lotate {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}
.container {
    width: 100%;
    height: 100%;
    padding:0;
}

.attention {
    color: red;
    font-weight: 700
}


#icon_btn{
    width: 3em;
    height: 3em;
    background: url('../images/top/iconback.png') left 0 no-repeat;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    display:block;
    background: rgba(255, 255, 255, 0.36);
    border-radius: 50%;
    pointer-events: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.btn_top {
    width: 144px;
    height: 144px;
    display:block;
    margin:auto;
}



.btn_text{
    display:block;
    width: 7em;
    margin-left: -80%;
    margin-top: 150%;
    font-size:3vw;
    font-weight:lighter;
    color:white;
    text-shadow: 1px 1px 2px #000, -1px 1px 2px #000, 1px -1px 2px #000, -1px -1px 2px #000;
    font-family: MyFont;
    -webkit-text-stroke:0.8px;
}

.btn_top{
    position: absolute;
    top: -19%;
    right: -18%;
    pointer-events:none;
}

.btn_top.active{
    pointer-events:all;
}

.btn-icon{
    display: block;
    width:150%;
    height:150%;
}

.btn_about {
    background: url('../images/top/btn_about.png') left 0 no-repeat;
    background-size: cover;
}

a.btn_access {
    background: url('../images/top/btn_access.png') left 0 no-repeat;
    background-size: cover;
}



a.btn_katen {
    background: url('../images/top/btn_katen.png') left 0 no-repeat;
    background-size: cover;
}


a.btn_tenzi {
    background: url('../images/top/btn_tenzi.png') left 0 no-repeat;
    background-size: cover;
}



a.btn_mogiten {
    background: url('../images/top/btn_mogiten.png') left 0 no-repeat;
    background-size: cover;
}



a.btn_kikaku {
    background: url('../images/top/btn_kikaku.png') left 0 no-repeat;
    background-size: cover;
}

.DSmenu {
    will-change:translate;
    width:500px;
    height: 100vh;
    background:rgb(73, 73, 73);
    -webkit-transform:translate3d(-500px,0,0);
    transform:translate3d(-500px,0,0);
    -webkit-transition:all .8s ease .2s;
    transition:all .8s ease .2s;
    position:absolute;
    position:fixed;
    top:0;
    left:0;
    z-index:1;
    
}
.DSmenu.action {
    will-change:translate;
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    /*box-shadow:30px 0px 40px 0px rgba(4, 4, 4, 0.73);*/
}


.DSbtn {
    will-change:translate;
    position: absolute;
    top: 0;
    background:rgba(192, 192, 255, 0);
    width:144px;
    height:144px;
    -webkit-transition:all .8s ease .2s;
    cursor:pointer;
    z-index:999;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}
.DSbtn.action {
}

ul {
    width:100%;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}
ul li {
    list-style-type:none;
    padding:10px 20px;
    
    width:100%;
    font-size:60px;
}
ul a li {
    color:rgb(255, 255, 255);
    font-family:MyFont;
    border-color:white;
}
.DSmenu a:hover{
    color:white;
}
li:hover {
    list-style-type:none;
    padding:10px 20px;
    background:rgb(128, 124, 124);
    width:100%;
}

.hambarg{
    transition: all .8s ease .2s;
}

.hambarg:nth-child(1) {
    will-change:translate;
    position:absolute;
    top:30%;
    left:30%;
    
    
    height:4px;
    width:60px;
    background:#000;
    
    box-shadow: 10px 10px 30px black;
}
.hambarg:nth-child(2) {
    will-change:translate;
    position:absolute;
    top:50%;
    left:30%;
    
    height:4px;
    width:60px;
    background:#000;
    
    box-shadow: 10px 10px 30px black;
}
.hambarg:nth-child(3) {
    will-change:translate;
    position:absolute;
    top:70%;
    left:30%;
    height:4px;
    width:60px;
    background:#000;
    
    box-shadow: 10px 10px 30px black;
}


.DSbtn.action .hambarg:nth-child(1) {
    will-change:translate;
    background: white;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform-origin: 25% 100%;
    width: 70%;
    top: 40%;
}
.DSbtn.action .hambarg:nth-child(2) {
    will-change:translate;
    background: white;
    opacity: 0;
}
.DSbtn.action .hambarg:nth-child(3) {
    will-change:translate;
    background: white;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform-origin: 25% 30%;
    width: 70%;
    top: 67%;
}
.head-bar {
    background:#333;
    position:absolute;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100px;
    overflow:hidden;
}

.section {
    display: block;
    position: fixed;
    top: 144px;
    width:100%;
    height:-webkit-calc(100% - 144px);
    -webkit-transform:perspective(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    will-change:translate;
    -webkit-overflow-scrolling:touch;
    overflow-scrolling:touch;
    -webkit-transition:all .5s ease-in .3s;
    transition:all .5s ease-in .3s;
    overflow:scroll;
}



.section.blur {
    will-change:translate;
    opacity:0.75;
    -webkit-transform:translate3d(0px);
    transform:translate3d(0px);
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.tabs {
    padding-top:5%;
}

.aa {
    width: 100%;
}

.aa img {
    display: block;
    max-width: 100%;
    margin: auto;
}

table {
    width: auto;
    border-spacing: 0;
    text-align: center;
  }

#event_text table{
    font-size:6vw;
}

#store_text table{
    font-size:3vw;
}

table	{
	border-collapse: collapse;	border-spacing: 0;
	width: 100%;
	margin-bottom: 30px;
}
th, td	{
	padding: 10px 20px;
    text-align: center;
    vertical-align: middle !important;
}


/* サンプル3
----------------------------------------------------------- */
th	{
    border-right: 1px dotted #FFF;
    border-bottom: 4px double rgb(255, 255, 255) !important;
    font-size: 5vw;
    font-weight:lighter;
}

th:last-child{
    border-right: 0;
}

td	{
	border-right: 2px dotted #FFF;
}

td:last-child{
    border-right: 0;
}

.sample{
    color: #fcfcfc;
    font-size: 3em;
    margin: 9% -5px -0em;
    border-bottom: 10px double #ff080c;
    padding-bottom: 10px;
    /* border: double; */
    box-shadow: 0 1px 0 #aaaaaa !important;
    /* -webkit-box-shadow: 0 1px 0 #aaaaaa !important; */
    -moz-box-shadow: 0 1px 0 #aaaaaa;
    text-shadow: #c0c0c0 0px 3px 3px;
    margin-bottom:5%;
}
.sample:first-letter {
    color: #B92A2C; /* テキスト色 */
    font-size:1.8em; /* フォントサイズ */
    line-height: 38px; /* 見出しの高さの幅 */
}

#about_text .sample:first-letter,#information_text .sample:first-letter{
    color: rgb(74, 107, 252); /* テキスト色 */
}

#about_text .sample,#information_text .sample{
    border-bottom: 10px double rgb(74, 107, 252);;
}

#mechanical_text .sample::first-letter{
    color: #B92A2C;
}

#mechanical_text .sample{
    border-bottom: 10px double #B92A2C;
}

#event_text .sample::first-letter,#electrical_text .sample::first-letter{
    color: rgb(241, 207, 9); /* テキスト色 */
} 

#event_text .sample,#electrical_text .sample{
    border-bottom: 10px double rgb(241, 207, 9);
}


#store_text .sample:first-letter,#chemical_text .sample:first-letter{
    color: rgb(210, 90, 216); /* テキスト色 */
}    

#store_text .sample,#chemical_text .sample{
    border-bottom: 10px double rgb(210, 90, 216);
}

#department_text .sample{
    font-size: 2.7em;
}

#first_department_text .sample:first-letter,#control_text .sample:first-letter{
    color: rgb(15, 158, 2); /* テキスト色 */
}    

#first_department_text .sample,#control_text .sample{
    border-bottom: 10px double rgb(15, 158, 2);
}

#other_text .sample:first-letter{
    color: rgb(118, 255, 171); /* テキスト色 */
}    

#other_text .sample{
    border-bottom: 10px double rgb(118, 255, 171);
}


/* line 136, ../sass/sp_top.scss */
h2 {
    color: rgb(255, 255, 255);
    font-size: 1.8em;
    position: relative;
    padding: 0 0 0px 9%;
    margin-bottom: 20px;
    border-bottom: 4px solid rgb(74, 107, 252);
  }
  /* line 143, ../sass/sp_top.scss */
  h2:before, h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 40px;
    border: 5px solid rgb(74, 107, 252);
    margin: auto;
  }

  #access_text h2:before, #access_text h2:after, #access_text  h2{
    border-color:#B92A2C;
  }

  #department_text h2:before, #department_text h2:after, #department_text h2{
    border-color:#B92A2C;
  }

  #event_text h2:before, #event_text h2:after,#event_text h2{
    border-color:rgb(241, 207, 9);
  }

  #other_text h2:before, #other_text h2:after ,#other_text h2{
    border-color:rgb(118, 255, 171); 
  }


  /* line 152, ../sass/sp_top.scss */
  h2:before {
    top: -25%;
    left: 0px;
  }
  /* line 156, ../sass/sp_top.scss */
  h2:after {
    top: 25%;
    left: 2.2%;
  }

  h3{
      display: inline;
      font-size:5vw;
      -webkit-text-stroke: 1px;
  }

  .page .aa img{
      width:90%;
      margin-top:5%;
      margin-bottom:5%;
      box-shadow: 0px 0px 40px 0px #000;
  }

  .horizontal dd{
      margin-top: 10%;
      margin-bottom: 10%;
      font-size:5vw;
  }

  .important_text{
    color: rgb(245, 245, 245);
    -webkit-text-stroke: 1px;
  }

  .indent_section{
    vertical-align: top;
  }
  .indent_block{
      display: inline-block;
      width:-webkit-calc(100% - 2em);
      height:auto;
  }


  /*太マーカー*/
  .pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}

  .blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #839afd 0%) repeat scroll 0 0;}

  .yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}

  .green_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #7fff90 0%) repeat scroll 0 0;}

  .red_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ff7f7f 0%) repeat scroll 0 0;}

  /*細マーカー*/
  .blue_line_narrow {background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #839afd 0%) repeat scroll 0 0;}

  .pink_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffb2d8 0%) repeat scroll 0 0;}

  .yellow_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffff7f 0%) repeat scroll 0 0;}

  .green_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #7fff90 0%) repeat scroll 0 0;}

  .red_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ff7f7f 0%) repeat scroll 0 0;}

  #map{
    display:block;width:90%;height:500px; margin:auto;
    box-shadow: 0px 0px 40px 0px #000;
  }

  #map img{
      box-shadow: 0 0;
  }

  #top{
    width:100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
  }
  #top_area{
    display: block;
    width: 100%;
    height: 85%;
    padding:2%;
    /*
    color: rgb(255, 255, 255);
    font-family:Seria;
    font-size: 3em;
    font-weight: bold;
    -webkit-text-stroke: 2px;
    text-shadow:3px 3px 8px #0d0d0d,0px 0px 10px #000000;
    margin: auto;
    */
    z-index:-1;
  }

  .top_logo{
    display: flex;
    height: 100%;
    width: 100%;
    background: url(../images/top_logo.png) no-repeat center 60%;
    background-size: contain;
    align-items: center;
  }

.btn_area{
    display: flex;
    width: 100%;
    height: 15%;
    align-items: center;
    justify-content: center;
}

  #layer{
    display: block;
    position: fixed;
    top: 0;
    width:100%;
    height: 100%;
    background-color:rgba(0, 0, 0, 0.671);
    z-index:0;
    margin: 0;
    padding: 0;
    position: fixed;
  }

  #layer_text{
    color: white;
    font-size: 7vw;
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 30%;
  }


  #contents{
    position: fixed;
    top:0;
    width: 100%;
    height: 100%;
    -webkit-clip-path: circle(110px at 50% calc(144px + 38.4%));
    clip-path: circle(110px at 50% calc(144px + 38.4%));
    z-index: 2;
    background: url(../images/bg.jpg) no-repeat left top;
    background-size: cover;
    background-position: center;
    transition: all 1.0s ease 1.0s;
    -webkit-transition: all 1.0s ease 1.0s;
    overflow: hidden;
    pointer-events: none;
    box-sizing:border-box;
    background-attachment: fixed;
  }



  .contents:before{
  }

  #contents.active{
    clip-path: circle(78% at center);
    -webkit-clip-path: circle(78% at center);
    transition: all .8s ease .3s;
    -webkit-transition: all .8s ease .3s;
    pointer-events: auto;
  }

  #layer a {
    padding-top: 70px;
  }
  #layer a span {
    position: absolute;
    top: 30%;
    left: 49%;
    width: 50px;
    height: 50px;
    margin-left: -12px;
    border-left: 7px solid #fff;
    border-bottom: 7px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb 1.5s infinite;
    animation: sdb 1.5s infinite;
    box-sizing: border-box;
  }
  @-webkit-keyframes sdb {
    0% {
      -webkit-transform: rotate(-45deg) translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      -webkit-transform: rotate(-45deg) translate(-20px, 20px);
      opacity: 0;
    }
  }
  @keyframes sdb {
    0% {
      transform: rotate(-45deg) translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: rotate(-45deg) translate(-20px, 20px);
      opacity: 0;
    }
  }

  .page a{
    color:rgb(0, 225, 255)
  }


  .page .container_menu a{
    display: block;
    color: rgba(123, 123, 123, 0.87);
  }

  .department_btn{
      width:100%;
      height:100%;
      
  }

  .department_btn:active{
    filter: hue-rotate(90deg);
}
  
  .de_btn_icon{
    width:25vw;
    height:auto;
    margin: auto;
  }
  .de_btn_text{
      text-align: center;
  }

  .icons{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
  }