@charset "utf-8";
/* CSS Document */


@font-face {
 font-family: "NotoSansCJKjp";
 font-style: normal;
 font-weight:normal; line-height:100%;
 src: url('../fonts/google/NotoSansCJKjp-Light.woff') format('woff'), url('../fonts/google/NotoSansCJKjp-Light.ttf') format('truetype');
}
@font-face {
 font-family: "NotoSansCJKjp";
 font-style:normal;
 font-weight:bold; line-height:100%;
 src: url('../fonts/google/NotoSansCJKjp-Medium.woff') format('woff'), url('../fonts/google/NotoSansCJKjp-Medium.ttf') format('truetype');
}

	
body{
  font-family: "NotoSansCJKjp" !important; margin:0; padding:0; width:98vw; height:100vh;
    word-wrap : break-word; overflow-wrap : break-word;
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}


html{
  overflow-x: auto;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  height:100vh; width:98vw; margin:0; padding:0; text-align:center;
  font-size:10px; line-height:16px}
  
input[type=radio] {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

tr td{ font-size:1.6rem; }

img { width:100%; }
a img{border:none;}
a:hover { opacity:0.8; transition-duration: 0.8s, 0.8s, 1.0s, 1.0s;} 
.top_header{ width:100vw; background-color:#FFF; margin:0; padding:5px 0; position:fixed; top:0; left:0; z-index:10; text-align:left  }
.top_header img{ width:70vw; max-width:450px; margin:5px} 
.menu { width:98vw; list-style:none; margin:0; padding:0; position:fixed; top:65px; height:90px; z-index:100; background:#FFF }
.menu dl { display:block; float:left;  font-weight:bold; width:14vw; text-align:center; padding:0; margin:0; height:90px; color:#003 }
.menu dl a { text-decoration:none; color:#003; height:90px; display:block; }
.menu dl a dt { font-size:1.4rem; margin:0; padding:20px 0 10px 0; }
.menu dl a dd { font-size:0.8rem; margin:0px; padding:0; }
.menu dl a img { height: 60px; width:auto; padding:15px 0;}
.menu dl a:hover { background-color:#097ACB; color:#FFF; } 
.tel { background-color:#D90000;   color:#FFF !important;}
.comname dt { font-size:1.5rem !important;  padding:10px 0 10px 0 !important;}
.menu dl dt { font-size:1.5rem; margin:0; padding:20px 0 10px 0; }
.menu dl dd { font-size:2rem; margin:0px; padding:0; }
.ac_menu {display:none;}

h1 { font-size:4.7rem; line-height:6.0rem; color:#003; padding:0; margin:10px; }
h2 { font-size:1.7rem; line-height:3.0rem; color:#333; padding:0; margin:10px;  }
h3 { font-size:3.0rem; line-height:3.6rem; padding:0; margin:0; font-weight:bold  }
h4 { font-size:4.6rem; line-height:5.0rem; padding:0; margin:0 60px; font-weight:normal; text-shadow: 2px 2px 1px #333;  }
.fbrack { color:#111111}
.fwhite { color:#FFF }
.flight{ font-weight:100 !important;}
.bkwhite { background-color: rgba(255,255,255,0.5);}
.bkred { background-color:#D90000; }
.bkblue { background-color:#0059B2;}
.bkgray { background-color:#EEEEEE;}

.ttl { display:block; text-align:center; width:98vw; margin:200px auto 0 auto; padding:0;}
.ttl dt { font-size:2.3rem;  }
.ttl dd { padding:0; margin:20px auto; width:50px }
.bdbtm{ border-bottom:#222 1px solid; }
.bdleft{ border-left:#FFF 1px dotted; }
.table { display:table; float:left; margin:0 1vw 0 0;   }
.table li { display:table-cell; vertical-align:baseline; padding:10px; font-size:1.6rem}
.table li img { height:60px; width:auto !important} 
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

input[type="checkbox"].on-off{
    display: none;
}

.bt{ margin:100px auto; padding:0;}
.bt a{ padding:3vh 5vw; font-size:2.7rem; line-height:3.2rem; font-weight:bold; text-decoration:none; clear:both; color:#333; background-color:#B2EAF0; border:#FFF 5px solid}
.btimg2 { width:98vw; display:table; list-style:none; padding:0; }
.btimg2 li{ display:table-cell; table-layout:fixed;  text-align:center; position:relative; z-index:1; background-color:#D3EDFB; height:300px; margin:10px auto; }
.zidx2{ position:absolute; z-index:2; top:50; left:0; width:100%;  } 


.info { width:70vw; margin:10vh auto }
.info dl{ width:100%; margin:0; padding:0; display:table; font-size:1.6rem; border-bottom:#666 dotted 1px}
.info dl dt{ margin:0; padding:0; display:table-cell; width:10vw; padding:2vh 2vw; text-align:left; vertical-align:middle }
.info dl dd{ margin:0; padding:0; display:table-cell; padding:2vh 2vw; text-align:left; line-height:160%; vertical-align:top; }
.info dl dd .sub { border-left:1px dotted #CCCCCC   }
.info dl dd .sub dt { width:20vw;}
.info dl dd .sub dd {  }
.bordernone{ border-bottom:none !important;}

.topics { margin-top:100px;}
.topics tr td { background-repeat: no-repeat; background-position:center; background-size:cover; width:98vw; vertical-align:middle; text-align:center}
.topics tr td dl { margin:30px auto; padding:0;} 
.topics tr td dl dt { margin:40px auto; padding:0; line-height:4.0rem; font-size:3.6rem; font-weight:bold} 
.topics tr td dl dd { margin:0 auto; padding:0; line-height:2.4rem; font-size:1.6rem; width:94vw} 

.map {width:98vw; height:40vh;  }

.topics tr td h4 { margin:auto; padding:0; list-style:none; color:#FFF; display:table} 

footer { border-top:#1C268B 5px solid; background: url(../img/common/bg_footer.png) repeat-y #1541A0; background-size:contain; width:99vw; padding:20px 0; margin:50px 0 0 0}
footer ul { display:table; margin:0 auto; padding:0; list-style:none;}
footer ul li { display:table-cell; margin:0; padding:30px; color:#FFF; font-size:1.3rem; line-height:2.4rem; vertical-align:middle; text-align:left}

.credit{ background-color:#097ACB; color:#FFF; line-height:50px; font-size:1.2rem; margin:0; width:99vw;}

.brc1 { border-bottom:#FFF 1px solid; border-top:#FFF 1px solid;  border-left:#FFF 1px solid; width:15px; height:200px;  } 
.brc2 { border-bottom:#FFF 1px solid; border-top:#FFF 1px solid;  border-right:#FFF 1px solid; width:15px; height:200px;   } 

.mtblarge { margin-bottom:100px !important; margin-top:100px !important;}

.staff { width:90vw; margin:50px auto; list-style:none; display:table; padding:0; }
.staff li { display:table-cell; width:50%; padding:0; color:#333; text-align:center; font-size:1.6rem; line-height:3.6rem; background-color:#999; color:#FFF; border:#FFF 1px solid}
.staff li img { width:96%; margin-top:10px}
.fsmall{font-size:1.3rem !important;}


.recruit { margin:50px auto; width:90vw; text-align:left; color:#111111;}
.subttl { border-left:#006 45px solid; height:45px; line-height:45px; font-size:1.7rem; margin:0; padding:0 0 0 30px; box-sizing:border-box} 
.subttl2 { line-height:3.0rem; font-size:1.8rem; margin:30px 0; padding:0; border-bottom:#333 1px dotted } 
.recruit ul { width:100%; margin:0; padding:0; list-style:none; }
.recruit ul li { width:49%; margin:0 1% 0 0; padding:0; float:left; font-size:1.5rem; line-height:40px; }
.recruit ul li img { width:47px; margin:10px 0 0 10px; padding:0; vertical-align:top }

input[type="text"],
textarea, select {
	outline: none;
	border: 1px solid ##DDDDDD; font-size:1.6rem; line-height:2.6rem; width:90%; height:auto; min-height:40px;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.mini {
	 width:26% !important; }
.medium {
	 width:45% !important; }
.large { height:120px;}

input[type="text"]:focus,
textarea:focus {
	box-shadow: 0 0 7px #1abc9c;
	border: 1px solid #1abc9c; width:150%;
}

.member { margin-top:100px;}
.member tr td { background-repeat: no-repeat; background-position:right; background-size:cover; width:98vw; text-align:left}
.member tr td dl { margin:50px; padding:50px; list-style:none; color:#FFF; display:block; background-color:#0059B2; float:left  } 
.member tr td dl dt { margin:0; padding:0; font-size:1.7rem; } 
.member tr td dl dd { margin:0; padding:0; font-size:3.0rem} 
.voice { margin:50px; padding:0; color:#333333; list-style:none; text-align:left }
.voice dt { margin:0; padding:0; font-size:3.8rem; line-height:5.0rem }
.voice dd { margin:0; padding:30px 0; font-size:1.6rem; }

.comment { background-color:#CCC; padding:30px 10px; }
.photo { width:82vw; margin:50px auto; list-style:none; padding:0; }
.photo li { width:25%; float:left; background-color:#069; padding:0; margin:0;}
.photo li a h3{ color:#FFF; font-size:2.0rem !important;  font-weight: normal;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;position:relative;bottom:-10px}
figure {
  position: relative;
  overflow: hidden;
  width:100%; padding:0; margin:0;
}
figcaption {
  position: absolute; 
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,77,192,0.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
figure:hover figcaption {
  opacity: 1; padding-top:20%;
}

.submit { width:39vw; margin:50px auto; text-align:center; clear: }
.submit input{ background-color:#006; border:#999 outset 3px !important; color:#FFF; padding:5px; width:100%; margin:20px auto; text-align:center; line-height:40px; font-size:2.0rem; cursor:pointer}
.submit2 ul li{ width:100%}
.submit2 ul li{ width:49%; float:left}
.submit2 input{ background-color:#006; border:#999 outset 3px !important; color:#FFF; padding:5px; width:100%; margin:20px auto; text-align:center; line-height:40px; font-size:2.0rem; cursor:pointer}

@media only screen and (max-width: 1200px) {
	.photo { width:98vw}

}

/* ------------------------------
   MEDIAQUERIES LAYOUT
------------------------------ */

@media only screen and (max-width: 1000px) {
.ac_menu { display:block;}
.menu { display:none;}
label { display: block; cursor :pointer; top:0; right:0; width:60px; height:60px; position:fixed; background:url(../image/common/bg_menu.jpg) #000 no-repeat top center; background-size:contain; color:#FFF; line-height:25px; font-size:16px; z-index:21;}
label span {
    display:block;
    position:absolute; /*#navToggle div に対して*/
    width:80%; margin:0 10%;
    border-bottom:solid 3px #FFFFFF;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out}
label span:nth-child(1) {top:30px}
label span:nth-child(2) {top:40px}
label span:nth-child(3) {top:50px}

input[type="checkbox"].bellows{
    display: none;/* チェックボックスの非表示 */
}

.ac_menu ul { z-index:22;
/* メニュー開閉時アニメーション */
    background:rgba(91, 91, 91, 0.8);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0; font-size:1.5rem;
    list-style: none; top:50px; right:0; position:fixed;
}

.ac_menu li {
    padding:10px; text-align:left; }
.ac_menu li a { border-left:#0CF 3px solid; text-decoration:none; color:#FFF; padding:0 20px;}
.ac_menu li a:hover { border-left:#069 3px solid; border-bottom:#FC3 3px solid;}


input[type="checkbox"].bellows + ul{
    max-height: 0;/* チェックが入っていない時の高さ */
    overflow: hidden;
}

input[type="checkbox"].bellows:checked + ul{
    max-height: 50em;/* チェックが入っているときの高さ */
}

.info { width:94vw; margin:5vh auto }
.info dl dt{  width:15vw;  }

.info dl dd .sub { display:block; }
.info dl dd .sub dt { display:block; width:80vw;}
.info dl dd .sub dd { display:block; width:80vw;}
h1 { font-size:3.6rem; }
.staff { width:98vw; }
.photo li { width:50%;}
.table { float:none; display:block;   }
.table li { display:block; }
}

@media print, screen and (max-width: 768px) {
.bt a{ font-size:2.0rem; }
.btimg2 { display:block;}
.btimg2 li {display:block; width:100%;}
.zidx2 { top:100;}
.bt{ margin:50px auto; }
.bt a{ padding:20px;  }
h1 { font-size:3.2rem; line-height:4.0rem; }
h3 { font-size:2.0rem; line-height:2.6rem; }
.works ul { width:96vw; }
.works ul li { float:none; margin:15px;}
.works ul li img { width:86vw;}
.recruit ul li { width:99%; float:none; }
.table { text-align:left; margin:0; padding:0;   }
.table li { text-align:left; margin:10px; padding:0; }

}

@media print, screen and (max-width: 500px) {
h1 { font-size:2.2rem; line-height:4.0rem; }
h2 { font-size:1.4rem; line-height:2.4rem;  }

.info dl{ display:block; }
.info dl dt{ display:block; width:100% }
.info dl dd{ display:block;}

footer ul { display:block; }
footer ul li { display:block; }
footer ul li img { max-width:250px;}

.bdleft{ border-left:none; }
.topics { margin-top:20px;}
.zidx2 { top:30;}
h4 { font-size:4.0rem; margin:0 20px; }

.staff { display:block; padding:0 }
.staff li { display:block; border:none; width:98vw; margin:0; padding:0;}
.photo li { width:100%;}
.topics tr td dl dd { margin:0 auto; padding:0; line-height:2.4rem; font-size:1.2rem; width:94vw} 
.btimg2 { display:block;}
.btimg2 li {display:block; width:100%; height:150px;}

}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*