@font-face {
  font-family: 'hakodate-font';
  src: url('hakodate-font.woff') format('woff');
}
html,body {
    background: #151515;
    color: #ccc;
    letter-spacing: 2px;
    margin: 0;
    font-family: 'abril-text','dnp-shuei-mincho-pr6n';
font-weight: 400;
font-style: normal;
}
a {
    text-decoration: none;
    color: #ccc;
}
#loading_screen{
    display: block;
    opacity: 1;
    height: 1200px;
    position: fixed;
    z-index: 7;
    width: 100%;
    top: 0;
    background: #151515;
}
#loading_bar{
    position: fixed;
    height: 3px;
    top: 48vh;
    background:#086A87;
    z-index:5;
     transition: .5s;
}
#loading_count{
    position: fixed;
    width: 20%;
    left: 40%;
    text-align: center;
    font-family: 'abril-text','dnp-shuei-mincho-pr6n';
    font-weight: 500;
    font-style:normal;
    color:#eee;
    z-index:5;
}

/* index.php */
#front_area{
    height: 110vh;
}
img.logo {
    position: relative;
    top: 0;
    z-index: 6;
    width: 15%;
    /* margin-left: 5%; */
    margin-top: 0vh;
    float: left;
}
.top_pic_PC{
    width: 100%;
    position: absolute;
    top: 0;
}
.top_pic {
    width: 40%;
    margin-top: 20vh;
    margin-left: 30%;
    position: absolute;
    z-index: 2;
    display: none;
} 
#title_area { 
   position: absolute;
    width: 93%;
    padding-left: 7%;
    text-align: left;
    border-top: 5px solid #086A87;
    padding-top: 4%;
}
#title {
    font-size: 5vh;
    margin-bottom: 10px;
    letter-spacing: 10px;
    margin-left: 17%;
    text-align: left;
    width: 80%;
    margin-top: 5vh;
}
#subtitle{
    letter-spacing: 5px;
    font-size: 2.5vh;
}
#title_sentence{
    display: none;
}
#title_sentence_M {
    font-size: 13px;
    margin-top: 150px;
    text-align: center;
    width: 93%;
    line-height: 2.3;
}
#gallery_wrap {
    margin-top: 50px;
    width: 40%;
    margin-left: 5%;
    float: left;
    margin-right: 5%;
    overflow: hidden;
    height: auto;
}
#title_A {
    width: 70%;
    margin-left: 5%;
    position: relative;
    border-left: 10px solid #086A87;
    padding-left: 3%;
    font-size: 4vh;
    letter-spacing: 9px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 50px;
    clear: both;
    margin-bottom: 30px; 
}
#title_A2 {
    width: 70%;
    margin-left: 3%;
    position: absolute;
    top: 0;
    padding-left: 5%;
    font-size: 5vh;
    letter-spacing: 9px;
    /* padding-top: 5px; */
    padding-bottom: 5px;
    margin-top: 3vh;
    margin-bottom: 3vh;
}#title_A3 {
    width: 70%;
    margin-left: 3%;
    position: absolute;
    top: 10vh;
    padding-left: 5%;
    font-size: 2vh;
    letter-spacing: 3px;
    /* padding-top: 5px; */
    padding-bottom: 5px;
}
#title_3 {
    writing-mode: vertical-lr;
    letter-spacing: 7px;
    margin-top: 10vh;
    background: #086A87;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #086A87;
    width: 7vh;
    /* padding-right: 90%; */
    font-size: 2.7vh;
}
#title_zone {
    margin-bottom: 60px;
    position: relative;
    border-bottom: 5px solid #086A87;
}
#title_B {
    width: 30%;
    margin-left: 8%;
    position: absolute;
    top: 22vh;
    padding-top: 5px;
    font-size: 1.7vh;
    border-top: 2px solid #086A87;
}
.gallery_toppic{
    width: 90%;
    position: relative;
    margin-left:5%;
}
#gallery_title {
    width: 17%;
    background: #086A87;
    text-align: center;
    position: relative;
    margin-top: -40px;
    margin-left: 73%;
}
#gallery_titleS {
    width: 17%;
    background: #a61c21;
    text-align: center;
    position: relative;
    margin-top: -40px;
    margin-left: 73%;
}
#nj{
    font-size: 24px;
}
#gallery_number {
    font-size: 40px;
    top: 10px;
    position: relative;
    font-family: 'abril-display','dnp-shuei-mincho-pr6n';;
}
#title_Y {
    margin-top: 50px;
    font-size: 14px;
    border-bottom: 2px solid #A61C21;
    letter-spacing: 1vh;
    text-align: center;
    width: 80%;
    position: relative;
    left: 10%;
}
#Y_row {
    font-size: 12px;
    width: 80%;
    left: 10%;
    position: relative;
}
#gallery_area_en {
    font-size: 8px;
    margin-top: 10px;
}
#history_box {
    border-bottom: 1px solid #086A87;
    width: 80%;
    position: relative;
    margin-left: 10%;
    top: 50px;
    margin-bottom: 30px;
    clear: both;
}
#history_date {
    width: 30%;
    position: relative;
    float: left;
    letter-spacing: 2px;
    overflow: hidden;
    font-size: 12px;
}
#history_style {
    
    position: relative;
    float: left;
    width: 15%;
    text-align: center;
    background: #086A87;
    border-radius: 9px;
    color: #eee;
    font-size: 12px;
    letter-spacing: 3px;
    overflow: hidden;
    left: 55%;

}
#history_title {
    font-size: 16px;
    clear: both;
    padding-top: 5px;
    position: relative;
    letter-spacing: 2px;
}
#history_subtitle {
    font-size: 12px;
    clear: both;
    padding-top: 5px;
    position: relative;
    letter-spacing: 2px;
    padding-bottom: 5px;
}
#footer {
    position: relative;
    top: 150px;
    font-size: 1.5vh;
    letter-spacing: 1px;
    text-align: center;
    padding: 10px;
    background: #086A87;
    clear: both;
}
#menu_area {
    position: absolute;
    width: 50%;
    left: 45%;
    top: 10vh;
    text-align: center;
    z-index: 5;
}
#menu_1 {
    width: 16%;
    float: left;
    font-size: 2vh;
    cursor: pointer;
    z-index: 3;
}
#menu_area2 {
    position: absolute;
    left: 16%;
    font-size: 1.8vh;
    text-align: center;
    width: 16%;
    line-height: 1.8;
    display: none;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    /* border-bottom: 2px solid #086A87; */
}
#menu_2 {
    border-bottom: 1px solid #086A87;
}
.menu_close{
    display: none;
}
/* Gallery */
#title_area2 {
    position: relative;
    width: 38%;
    padding-left: 5%;
    margin-top: 60px;
    margin-bottom: 50px;
    border-bottom: 2px solid #086A87;
    padding-bottom: 10px;
}
#gallerytitle_area {
position: relative;
    width: 15%;
    padding-left: 5%;
    background: #086A87;
    overflow: hidden;
    margin-bottom: 60px;
}
#gallery_number2 {
    float: left;
    font-size: 5.5vh;
    width: 25%;
    position: relative;
    top: 10px;
    font-family: 'abril-display','dnp-shuei-mincho-pr6n';;
}
#title_right {
    text-align: left;
    float: left;
    /* margin-left: 30%; */
    width: 70%;
}
#gallery_titleen2 {
    font-size: 1vh;
    position: relative;
    top: 5px;
}
#gallery_title2 {
    font-size: 3vh;
    letter-spacing: 5vh;
    /* text-align: center; */
    /* width: 70%; */
}
.gallery-box {
position: relative;
    float: left;
    width: 50%;
    /* display: flex; */
    height: 80vh;
}
.gallery-Width {
    width: 80%;
    left: 10%;
    position: relative;
    margin-top: 15vh;
    cursor:pointer;
}
.gallery-Height {
    width: 50%;
    left: 25%;
    position: relative;
    cursor:pointer;
}
#gallerytext{
    text-align: center;
    clear: both;
    width: 80%;
    margin-left: 10%;
    margin-bottom: 5vh;
    font-size: 2vh;
}
#gallery_detail {
    position: fixed;
    z-index: 3;
    top: 0;
    background: #151515;
    width: 100%;
    height: 100vh;
    display: none;
    opacity: 0;
}
#detail_left {
    position: relative;
    width: 100%;
    /* float: left; */
}
#gallery_back {
    position: absolute;
    font-size: 20px;
    letter-spacing: 2px;
    left: 5%;
    top: 5vh;
}
.detail_pic {
    width: 50%;
    left: 25%;
    position: relative;
    margin-top: 10vh;
}
#detail_right {
    width: 80%;
    position: absolute;
    margin-left: 5%;
    top: 85vh;
}
#detail_title {
    position: relative;
    margin-top: 0vh;
    font-size: 26px;
    /* border-bottom: 1px solid; */
    width: 100%;
    letter-spacing: 2px;
}
#detail_name {
    letter-spacing: 1px;
}
#detail_caption {
    letter-spacing: 2px;
    margin-top: 60px;
}
.deneba {
    width: 10%;
    position: absolute;
    margin-top: 30vh;
    text-align: center;
    cursor: pointer;
}
#detail_back {
    left: 5%;
}
#detail_next {
    left: 85%;
}
.detail_pic2 {
    width: 70%;
    position: relative;
    margin-top: 3vh;
}

/* city */
.city_wrap {
    clear: both;
    overflow: hidden;
    margin-bottom: 50px;
}
img.tram_map {
    width: 45%;
    position: relative;
    left: 5%;
    float: left;
    /* background: #222; */
}

#tram_data {
    position: relative;
    float: left;
    left: 7%;
    font-size: 14px;
    letter-spacing: 2px;
    width: 40%;
}

th {
    border-bottom: 2px solid #086A87;
    font-size: 17px;
    letter-spacing: 15px;
}
#table_left {
    width: 19%;
    background: #086A87;
    padding-left: 1%;
}
#table_right {
    border-bottom: 2px solid #086A87;
}

/* My page*/
#mypage_box {
    position: relative;
    width: 76%;
    left: 10%;
    text-align: center;
    border: 2px solid #086A87;
    margin-bottom: 50px;
    padding: 2%;
     border-radius:10px;
}
#box_title {
    font-size: 24px;
    letter-spacing: 10px;
    background: #086A87;
     border-radius:5px;
}
#box_subtitle {
    font-size: 14px;
    margin-top: 20px;
    line-height: 2.5;
}
#katei_box {
    position: relative;
    width: 80%;
    left: 8%;
    border: 2px solid #086A87;
    padding: 2%;
    margin-bottom: 50px;
}
select {
    position: relative;
    clear: both;
    width: 70%;
    font-size: 20px;
    color: #eee;
    background: #333;
    margin-top: 10px;
     font-family: 'abril-text','dnp-shuei-mincho-pr6n';
font-weight: 400;
}

#katei_title {
    background: #086A87;
    font-size: 3.5vh;
}
#form_button {
    width: 30%;
    text-align: center;
    margin-top: 20px;
    border: 2px solid #086A87;
    padding: 0.5%;
    background: #008800;
}
input[type="file"] {
    background: #333;
     font-family: 'abril-text','dnp-shuei-mincho-pr6n';
}
input[type="text"] {
    background: #333;
     font-family: 'abril-text','dnp-shuei-mincho-pr6n';
    position: relative;
    left: 10%;
    width: 80%;
    font-size: 18px;
    color: #eee;
}
textarea{
    background: #333;
    color: #eee;
    height: 150px;
     font-family: 'abril-text','dnp-shuei-mincho-pr6n';
    position: relative;
    left: 10%;
    width: 80%;
    font-size: 16px;
}
#choose_count {
    margin-top: 3vh;
    border-bottom: 2px solid #086A87;
    font-size: 3vh;
}
#choose_button {
    width: 34%;
    padding: 0.5%;
    text-align: center;
    border: 2px solid #086A87;
    background: #012;
    margin-top: 20px;
    margin-left: 10%;
    position: relative;
    float: left;
     color: #eee;
font-family: 'abril-text','dnp-shuei-mincho-pr6n';
}
#wait_screen {
    position: fixed;
    width: 100%;
    height: 105vh;
    background: #eee8;
    top: 0;
    z-index: 5;
    display: none;
    
}
#wait_sentence {
    position: fixed;
    color: #eee;
    text-align: center;
    width: 30%;
    margin-top: 43vh;
    background: #086A87;
    left: 33%;
    padding: 1%;
}
#mainsentence{
    width: 80%;
    left: 10%;
    position: relative;
}

form#login {
    width: 76%;
    position: relative;
    left: 10%;
    background: #888;
    padding: 2%;
}
input[type="password"] {
    width: 80%;
    background: #333;
    font-family: 'abril-text','dnp-shuei-mincho-pr6n';
    position: relative;
    margin-left: 10%;
    width: 80%;
    font-size: 18px;
    color: #eee;
}
button#button {
    clear: both;
    width: 25%;
    text-align: center;
    /* background: #008800; */
    margin-top: 50px;
    font-family: 'abril-text','dnp-shuei-mincho-pr6n';
}
#log_IP_W {
    font-weight: 700;
    background: #aa0000;
}
#incorrect {
    width: 80%;
    text-align: center;
    margin-left: 10%;
    background: #aa0000;
    display: none;
}
#sentence {
    width: 80%;
    left: 10%;
    position: relative;
    font-size: 2vh;
    letter-spacing: 0.5vh;
    line-height: 2.5;
}
#namearea {
    width: 80%;
    left: 10%;
    position: relative;
    font-size: 7vh;
    letter-spacing: 2vh;
    border-bottom: 5px solid #086A87;
    margin-bottom: 50px;
}
img.namepic {
    width: 15%;
}
#pagenums {
    text-align: center;
    margin-top: 10vh;
    width: 60%;
    margin-left: 20%;
    border-top: 2px solid #086A87;
     font-family: 'abril-display';
    padding-top: 30px;
}
span#otherpage {
    margin-left: 2%;
    margin-right: 2%;
    font-size: 3vh;
}
#thispage {
    margin-left: 2%;
    margin-right: 2%;
    font-size: 6vh;
    color: #086A87;
    
}
#pagenext {
    font-size: 2.5vh;
    margin-top: 10vh;
    width: 30%;
    margin-left: 34.5%;
    text-align: center;
    background: #086A87;
    padding: 0.5%;
}
#pic_config {
    position: relative;
    margin-top: 50px;
    padding: 5vh;
    background: #333;
}
#pic_configbox {
    clear: both;
    overflow: hidden;
    margin-bottom: 30px;
}
.config_img {
    position: relative;
    float: left;
    width: 15%;
}
#configbox_right {
    float: left;
    width: 80%;
    margin-left: 5%;
}
#config_status {
    position: relative;
    float: left;
    width: 25%;
    font-size: 2.5vh;
    border-bottom: 2px solid #086A87;
}
#config_button {
    position: relative;
    float: left;
    width: 25%;
    text-align: center;
    margin-left: 5%;
    background: #086A87;
    font-size: 2.5vh;
}
#config_text {
    clear: both;
    font-size: 2vh;
    margin-top: 5vh;
}
img.config_topimg {
    width: 20%;
}
#katei_check {
    background: #086A87;
    text-align: center;
    border: 1px solid #ee0;
    margin-top: 10px;
}
div#pageshare {
    position: relative;
    width: 40%;
    left: 30%;
    margin-top: 10vh;
}
#share_title {
    font-size: 3vh;
    letter-spacing: 0.5vh;
    border-bottom: 2px solid #086A87;
    margin-bottom: 5vh;
}
#share_imgs {
    width: 60%;
    left: 20%;
    position: relative;
}
.shares {
    width: 15%;
    margin-left: 9%;
    margin-right: 8%;
}
#linkarea {
    position: relative;
    width: 45%;
    float: left;
    margin-right: 5%;
    height: 45vh;
    top: 100px;
    /* overflow: hidden; */
}
#linkarea a{
    color: #eeeeee;
}
#linktitle {
    background: #086A87;
    border-radius: 2px;
    padding-left: 5%;
    font-size: 16px;
    letter-spacing: 4px;
    margin-bottom: 20px;
}
#linksentence {
    font-size: 12px;
    margin-bottom: 50px;
}
.linkurl{
   border-bottom:2px solid #086A87;
}
#footer_new {
    width: 100%;
    margin-top: 70px;
    background: #222;
    padding-bottom: 20px;
}
.footer_logo {
    position: relative;
    width: 30%;
    left: 30%;
}
#footer_title {
    margin-top: 20px;
    margin-bottom: 5px;
    border-bottom: 2px solid #086A87;
    width: 80%;
    position: relative;
    left: 10%;
    text-align: center;
    font-size: 18px;
    letter-spacing: 4px;
}
#footer_subtitle {
    margin-top: 8px;
    line-height: 1.5;
    text-align: center;
    font-size: 14px;
    letter-spacing: 3px;
}
#Sgallery_wrap {
    width: 100%;
}
img.Sgallery_toppic {
    width: 90%;
    position: relative;
    left: 5%;
    margin-bottom: 0;
}
#Sgallery_right {
    width: 84%;
    position: relative;
    left: 5%;
    background: #A61C21;
    top: -5px;
    padding: 3%;
}
#Sgallery_area {
    font-size: 24px;
}
#Sgallery_date {
    font-size: 12px;
}