@charset 'utf-8';

/***************************************

ZB CSS
2018/06

******************************************/

/***********************

common

**********************/


*{
box-sizing:border-box;
}

a{
text-decoration:none;
color:inherit;
}

b{
    font-weight: 800;
    color: #111;
}

i{
font-style:normal;
}

li{
list-style:none;
}

body,html{
margin:0px;
color:#353E47;
padding:0px; 
background: #000 !important;
font-family: 'Yu mincho','游明朝';
font-feature-settings:'palt';
}

body{
overflow-x:hidden;
}

ul{
margin:0;
padding:0;
}

.ib{
width:1000px;
margin:0 auto;
position:relative;
}

.pc_content{
display:block !important;
}
.sp_content{
display:none !important;
}

/****************************************

header

**************************************/

header {
    position: fixed;
    top: 0;z-index: 9;
    left: 0;
    width: 100%;height: 100px;
    border-bottom: 1px solid #D4AF37;
    background: url(../img/kado_l.png) 10px 10px no-repeat ,url(../img/kado_r.png) calc(100% - 10px) 10px no-repeat,#000;
    -webkit-background-size: ;
    background-size:70px,70px ,cover;
}

header h1{
    text-align: center;
    margin-bottom: 0;margin-top: 10px;
}

header h1 img{
    width: 150px;
}

header nav{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    width: 800px;
    margin: 0px auto;
    margin-top: -10px;
    padding-top: 5px;
}
header nav a{
    display: block;
    text-align: center;
    padding: 5px 0;
    width: 25%;
    color: #fff;
    transition:0.3s ease;
}

header nav a:hover{
    background: #fff;
    color: #111;transition:0.3s ease;
}

/***********************************************

ふわっとアニメーション

************************************************/

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/************************************

topimg

************************************/

.topimg{
    height: 580px;
    margin-top: 100px;
    background: url(../img/mask02.png) 50% 50% no-repeat,url(../img/ts.png) -1px 0 no-repeat,url(../img/ts02.png) 101% 0 no-repeat,url(../img/opera.jpg);
    background-size: 300px auto,500px 102%,500px 102%,cover;background-blend-mode: normal,multiply,multiply;
}

/***********************************

article

**********************************/

article h2{
    width: 100%;text-align: center;
    padding: 10px 0;
    color: #fff;border-bottom: 1px solid #D4AF37;
    background: url(../img/h2_l.png) 10px 15px no-repeat ,url(../img/h2_r.png) calc(100% - 10px) 15px no-repeat,#000;
    -webkit-background-size: 60px;margin: 40px 0;
    background-size:  60px auto,60px auto,cover;
}

article p{
    color: #fff;
    font-size: 18px;
    margin: 30px 0;
    text-align: center;
}

article p b{
    color: #fff;
}

article .ib{
    padding: 60px 0;
}

article table{
    width: 100%;
    border-collapse: collapse;
    color: #fff;margin: 50px 0;
}
article table th{
    width: 23%;
    padding: 15px 0;text-align: left;
    border-bottom: 1px solid  #fff;
}
article table th:before{
    font-family: ionicons;
    content: "\f284";
    color: #D4AF37;
    margin-right: 10px;
}
article table td a{
    display: inline-block;
    padding: 5px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border: 1px solid  #fff;    background: #fff;
    color: #111;margin-left: 10px;border-radius: 3px;
}
article table td{
    width: 77%;
    padding: 15px;

    border-bottom: 1px solid  #fff;
}

h3{
    font-size: 18px;
    text-align: center;
    border-bottom: 1px solid  #fff;
    padding-bottom: 7px;
}
/********************************

intro

********************************/


/*******************************

map

******************************/

.map{

}

.map iframe{
    height: 450px;
    width: 100%;
}

.map .ib{
    padding: 10px 0;
}

/******************************

subpage

****************************/

.panlist{
    margin-top: 100px;
    border-bottom: 1px solid  #666;
}

.panlist .ib{
    font-size: 12px;
    padding: 10px;
    color: #fff;
}

/*****************************

contact

********************************/

.contact table{
    width: 100%;
border-collapse: collapse;
}

.contact table th{
    width: 25%;
    padding: 15px 0;
}

.contact table td{
    padding: 15px 0;
}

.contact label{
    padding: 10px 0;
    color: #fff;
    display: inline-block;
}
.contact input[type="text"],.contact input[type="email"],.contact textarea{
    width: 100%;
    padding: 10px;
}

.contact input[type="submit"]{
    display: block;
    width: 300px;
    padding: 20px;
    text-align: center;
    border: 1px solid  #fff;
    color: #fff;
    margin: 30px auto;
    cursor: pointer;
    background: none;
}

.contact > *{
    color: #FFF !important;
}

.contact .pagetop{
    color: #111 !important;
}
/******************************

footer

******************************/

.pagetop{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 65px;
    height: 65px;
    padding: 5px;
    cursor: pointer;
    background: #D4AF37;
}

.pagetop span{
    display: block;
    text-align: center;
    font-size: 10px;
    font-family:'Yu Gothic';
}

.pagetop:before{
    font-family: ionicons;
    content: "\f3d8";
    font-size: 40px;
    position: absolute;
    top: 15px;
    left: 20px;
    
}

footer{
    
}

footer .ib{
    padding: 10px 0;
}



footer p{
    font-size: 12px;
    text-align: center;
    color: #fff;
}