@charset "utf-8";
html,body {
   margin:0px; padding:0px;
   font-size: 125%;
}
a{
  text-decoration: none;
}
.flex{
	display: flex;
  align-items: flex-start;
	}
.wrap{
  margin-top:-80px;
}
.video{
  width: 100%;
  /* min-height: 85%; */
  /* max-width: 1280px; */
  margin:0 0 0 auto;
}
#bg-video{
 background: url('../images/mainbcg.jpg') no-repeat;
 background-size: cover;
 object-fit:cover;
 width: 100%;
 min-height: 85%;
 /* max-width: 1280px; */
 margin:auto;
 height:95vh;
}

.header-title{
 position: relative;
 z-index: 100;
 display: flex;
 width:90%;
 justify-content: space-between;
 margin-left:10%;
}
.header-title p{
  color:var(--main-color);
}
.top-title{
	position: absolute;
	z-index: 4;
	width:100%;
	text-align:center;
	color:#000064;
	font-size:2.5rem;
	line-height:150%;
	text-shadow: 1px 2px 3px #808080;
  top:calc(25vw);
  display: block;
}
.header-title p{
	margin-left:5px;
	font-size:110%;
}
.header-title p:nth-child(2){
	margin-top:20px;
	line-height:120%;
}
.head-link div a{
	display:block;
	/*width:100px;*/
	margin:5px;
	padding:5px;
	border-radius:10px;
	text-align:center;
	color:#fff;
	text-decoration: none;
  font-size: 90%;
}
#global-nav.m_fixed {
  left: 0;
  position: fixed;
  top: 35px;
}
#global-nav-sub.m_fixed {
  left: 0;
  position: fixed;
  top: 0;
}
.menu-btn {
    position: fixed;
    top: 0;
    right: 0;
    height: 35px;
    width: 35px;
    align-items: center;
    z-index: 200;
    background-color: #3584bb;
    padding:15px 5px;
    box-sizing: border-box;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}
.hamburger-menu label{
  display:none;
}
div.menu{
    position: absolute;
	  z-index: 10;
    margin-left: 20%;
    margin-top:-3%;
    background-color: var(--main-color);
    width:80%;
}
div.menu_sub{
    position: absolute;
	  z-index: 10;
    background-color: var(--main-color);
    width:100%;
}
div.menu ul, div.menu_sub ul{
  display: flex;
  list-style-type: none;
}
div.menu ul li, div.menu_sub ul li{
  display: inline-block;
}
div.menu .main_menu, div.menu_sub .main_menu{
  width:100%;
}
div.menu .main_menu ul, div.menu_sub .main_menu ul{
  width:14.28%;
}
/* div.menu ul > li:hover > a, div.menu_sub ul > li:hover > a{
    background-color: var(--hover-color);
    color: #444;
} */
 div.menu ul > li.main_menu:hover > a, div.menu_sub ul > li.main_menu:hover > a{
    background-color: var(--hover-color);
    color: #444;
}
.sub_menu{
    position: absolute;
    top: 42px;
    display: block;
}
div.menu ul li ul li, div.menu_sub ul li ul li{
    display: block;
}
div.menu ul li ul li a,div.menu_sub ul li ul li a{
    background-color: var(--hover-color);
    color: #444;
}
div.menu ul li ul li a:hover,div.menu_sub ul li ul li a:hover{
    background-color: var(--active-color);
    color:#fff;
}
div.menu ul li ul.sub_menu,div.menu_sub ul li ul.sub_menu{
    display: none;
}
div.menu ul li:hover ul,div.menu_sub ul li:hover ul{
    display: block;
}
div.menu a, div.menu_sub a{
    color:#fff;
    text-decoration: none;
    display: block;
    border-right:1px solid #fff;
    text-align: center;
    padding:15px 0;
}
div.menu ul li ul li a,div.menu_sub ul li ul li a{
  border-right:none;
}
div.wrap2{
   width:80%;
   margin-left:20%;
   background: linear-gradient(0.25turn, white 50%, var(--hover-color) 50%);
   height:300px;
}
div.wrap2_sub{
   width:100%;
   background-color:var(--hover-color);
   padding:120px 0 80px;
   background-image: url(../images/h1_bcg.png);
   background-repeat: no-repeat;
}
div.wrap2 h2{
  padding:50px 1% 0;
  font-size:1.3rem;
  margin-top:-1%;
}
div.wrap2 .news{
  width:80%;
  border:1px solid #999;
  margin:10px 1%;
  padding:8px;
  background-color: #fff;
  /* height:150px;
  overflow: scroll; */
}
div.wrap2 dl{
  display: flex;
  flex-wrap: wrap;
}
div.wrap2 dt{
  width:15%;
  padding:8px 0;
  border-bottom:1px dotted #999;
}
div.wrap2 dd{
  width:85%;
  padding:8px 0;
  border-bottom:1px dotted #999;
}
div.wrap2_sub h1{
  color:#000;
  text-shadow: #fff 1px 0 10px;
  width:90%;
  margin:auto;
  /*max-width:1080px;*/
  font-size: 1.3rem;
}
div.wrap3{
  background-color:#f5f2f6;
  width:100%;
  display: flex;
  height:440px;
  border-bottom:1px solid #999;
}
div.wrap3 div.img_area{
  width:400px;
}
div.wrap3 div.menu_erea{
  width:calc(100% - 400px);
}
div.wrap3 h2{
  font-size:1.3rem;
  text-align:center;
  margin:20px 0 50px;
}
div.wrap3 .top_menu{
  width:100%;
  display:flex;
  justify-content: space-around;
}
div.wrap3 .top_menu div{
  text-align:center;
  width:200px;
  border-radius:50%;
  height: 200px;
}
div.wrap3 .top_menu a{
  display: block;
  color:#fff;
  text-decoration: none;
}
div.wrap3 .top_menu img{
  margin-top:60px;
}
div.wrap3 .top_menu p{
  text-align:center;
  margin:20px 0;
  line-height:120%;
  /* font-size: 0.9rem; */
}
div.bread{
  box-sizing: border-box;
  width:100%;
  padding:5px;
}
div.bread ul{
  width:90%;
  margin:5px auto;
  /*max-width:1080px;*/
  display:flex;
}
div.bread ul li{
  list-style-type: none;
}
div.bread ul li::after{
  content: '>';
  margin:0 5px;
}
div.bread ul li:last-child::after{
  content: none;
  margin:0 5px;
}
div.contents{
  width:100%;
  padding:5px;
  width:90%;
  margin:10px auto;
  /*max-width:1080px;*/
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
div.contents .sub_area{
  width:calc(20% - 5px);
  margin-right:5px;
  word-wrap:break-word;
  max-width: 220px;
}
div.contents .main_area{
  width:calc(80% - 5px);
  margin-left:5px;
  flex:1 1 0;
}
div.contents .main_area_wide{
  width:calc(100% - 5px);
  margin-left:5px;
}
div.contents .main_area h2,div.contents .main_area_wide h2{
  width:95%;
  margin:10px auto;
  padding:5px 0 5px 10px;
  border-left:5px solid var(--main-color);
  border-bottom:1px solid var(--main-color);
}
div.contents .main_area h3{
  width:93%;
  margin:10px auto;
  padding:5px 0 5px 10px;
  background-color: var(--main-color);
  color:#fff;
}
div.contents div.main_area_in,div.contents_wide div.main_area_in{
  margin:20px;
}
div.contents .sub_area .list_menu{
  width:100%;
}
div.contents .sub_area .list_menu h2{
  width:100%;
  height:175px;
  background-image: url(../images/sub_h2_bcg.jpg);
  background-size: cover;
  padding-top:calc(50% - 1.2rem);
  box-sizing: border-box;
  text-align:center;
  font-size:1.2rem;
  color:#fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
div.contents .sub_area .list_menu ul{
  /* background-color: var(--cg--gray); */
}
div.contents .sub_area .list_menu li{
  list-style-type: none;
  border-bottom:1px solid #fff;
}
div.contents .sub_area .list_menu li:first-child{
  background-color:#2d3939;
}
div.contents .sub_area .list_menu li:nth-of-type(2){
  background-color:#4f636c;
}
div.contents .sub_area .list_menu li:nth-of-type(3){
  background-color:#4f88a3;
}
div.contents .sub_area .list_menu li:nth-of-type(4){
  background-color:#8e908f;
}
div.contents .sub_area .list_menu li:last-child{
  background-color:#b79a62;
}
div.contents .sub_area .list_menu li a{
  color:#fff;
  text-decoration:none;
  padding:20px 5px;
  display:inline-block;
  width:100%;
}
div.contents .sub_area img{
  width:100%;
  margin:5px 0;
}
div.contents table{
  border-collapse: collapse;
}
div.contents th,div.contents td{
  border:1px solid var(--main-color);
  padding:2px;
  font-size:0.9rem;
  line-height: 1.1;
  height:40px;
}
div.contents th,div.contents td span{
  font-weight:bold;
  color:var(--main-color);
}
div.contents th,div.contents td span:before{
  content:"[";
}
div.contents th,div.contents td span:after{
  content:"]";
}
div.contents p{
  padding:3px 0;
  margin:0 1rem;
}
footer div.ban{
  padding:10px 10%;
}
footer div.link{
  font-size: 0.8rem;
  color:#fff;
  background-color:#575757;
  padding:2px 10%;
  display: flex;
  justify-content: space-around;
}
footer div.link p{
  margin-left:10px;
  margin-top:20px;
}
footer div.link img{
  float:left;
  margin-right:10px;
}
footer div.copy{
  font-size: 0.7rem;
  text-align:right;
  background-color:#f5f2f6;
  padding:3px;
}
footer .footer_menu{
  display: flex;
  flex-wrap: wrap;
  margin-top:20px;
  margin-left:10px;
}
footer .footer_menu a{
  color:#fff;
  text-decoration:none;
  margin-right:20px;
}
/* button */
#page-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: var(--main-color);
  border-radius: 50%;
  width:30px;
  height:30px;
  text-align: center;
  padding-top: 8px;
  box-sizing: border-box;
}

/* button_color */
#page-top i {
  color: var(--right--gray);
}

/* button_hover*/
#page-top i:hover {
  cursor: pointer;
}
/*wide screen*/
@media screen and (min-width: 1500px) {
  .top-title{
    top:calc(15vw);
  }
  div.contents .main_area{
  width:calc(95% - 216px);
  margin-left:5px;
}
}
/*tablet*/
@media screen and (max-width: 1024px) {
  div.wrap2 dt{
    width:30%;
  }
  div.wrap2 dd{
    width:70%;
  }
  div.wrap3 div.img_area{
    display:none;
  }
  div.wrap3 div.menu_erea{
    width:100%;
  }
  div.contents{
    display:block;
  }
  div.contents .main_area{
    width:100%;
    margin:20px 0 0;
  }
  div.contents .sub_area{
    width:100%;
    margin:0;
    max-width: none;
  }
  div.contents .sub_area .list_menu h2{
  width:100%;
  height:1.5em;
  padding:5px;
  box-sizing: border-box;
  text-align:center;
  font-size:1.2rem;
  color:var(--cg--gray);
  text-shadow: none;
  background-color:none;
  margin-bottom:5px;
}
div.contents .sub_area .list_menu ul{
  background-color:#fff;
  display:flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
div.contents .sub_area .list_menu li{
  list-style-type: none;
  padding:10px 4px;
  border:1px solid var(--cg--gray);
  word-wrap:break-word;
  text-align:center;
  background-color: var(--hover-color);
  margin-bottom:10px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
div.contents .sub_area .list_menu li a{
  /* color:var(--main-color); */
  text-decoration:none;
  width:20vw;
  padding:0;
}
  div.contents .sub_area img{
    display:none;
  }
}
/*mobile*/
@media screen and (max-width:599px) {
  .wrap{
    margin-top:0;
  }
  .hamburger-menu label{
    display:block;
  }
  .head-link{
    display:none;
  }
  div.wrap3 .top_menu{
    display:block;
  }
  div.wrap3{
    height:auto;
  }
  div.wrap3 h2{
    margin-bottom:10px;
  }
  div.wrap3 .top_menu div{
    margin:10px auto;
  }
  div.wrap3 .top_menu p.sub_text{
    display:none;
  }
  div.menu,div.menu_sub{
    position: fixed;
    top:0;
    width:100%;
    margin:0;
    z-index: 150;
    left:102%;
    transition: 1.0s ;
  }
div.menu ul li ul li a, div.menu_sub ul li ul li a{
    background-color:var(--main-color);
    color:#fff;
  }
div.menu a, div.menu_sub a{
  border:none;
}
  #menu-btn-check:checked ~ .menu,  #menu-btn-check:checked ~ .menu_sub{
      left:0;
      transition: 1.0s ;

    }{
    left:0;

  }
  #global-nav.m_fixed{
    top:0;
    left:102%;
  }
  #global-nav-sub.m_fixed{
    top:0;
    left:102%;
  }
  div.menu ul,div.menu ul li ul.sub_menu,div.menu_sub ul,div.menu_sub ul li ul.sub_menu{
    display:block;
  }
  div.contents .sub_area .list_menu li{
    flex:1 1 0;
    margin:5px;
  }
  div.contents .sub_area .list_menu li a{
    display: block;
    width:100%;
  }
  div.menu .main_menu ul,div.menu_sub .main_menu ul{
    width:100%;
    position:static;
  }
  .hb_none{
    display:none;
  }
  div.wrap2{
    width:100%;
    margin-left:0;
  }
  div.wrap2 h2{
    margin-top:0;
  }
  div.wrap2 .news{
    box-sizing: border-box;
    width:98%;
  }
  div.bread ul{
    width:100%;
  }
  div.contents{
    width:100%;
  }
  .sub_area .about li{
  width:40%;
  }
  footer div.link{
    display:block;
    padding:2px 1%;
  }
  footer div.link img{
    display:none;
  }
  footer .footer_menu{
    margin-bottom:10px;
  }
  .top-title{
  font-size: 1rem;
  margin-top: 30vh;
  }
}
/*print*/
@media print{
  .sub_area{
  	display:none;
  	}
  .main_area{
  width:100% !important;
  }
  .news iframe{
  height:500px !important;
  }

  div.wrap3{
  margin-top:500px;
  }
}