@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@500&display=swap');
/***********************************
 ODA top.css
 151111 
************************************/
.header h1.title{margin-bottom: 0;padding-bottom: 5px;}

.topimage { margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
overflow: hidden;}
.top-image img {display: block;
	width: 100%;
	height: auto;}

.topimage2 { width: 100%; max-width: 1024px;height:auto; margin: 0 auto;}
.top-image2 img {width: 100%; height:auto; margin: 0 auto; overflow: hidden;}
/*-----------------
  IMAGE MAIN
-----------------*/
.image-main { margin-bottom: 2em}
.image-main .wrap { width: 100%; max-width: 1024px; min-width: inherit; margin: 0 auto; padding-top: 1.5em; overflow: hidden;}
.image-main .box-main-image { float: right;}

/*-----------------
  Thema
-----------------*/
.thema-box{ width: 100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
h2.thema { text-align: center; color: #00677d; font-size: 1.8em; font-weight: 900; margin: 1em 0 1em; padding: 0;}
.t-item {
	width: 30%;
	height: auto;
    padding:5px 0px;
	margin: 0 0 20px;
	overflow:hidden!important;
}
.t-item img {
	margin: 0 auto;
	padding: 0;
	width: 96%; height: auto;
}

/*-----------------
  icon
-----------------*/
.color-wrap2 {background-color: #262673;}
.color-wrap2 h2 { text-align: center; color: #e3007f; font-size: 2em; font-weight: 900; margin: 1em 0 0; padding: 0;}
.color-wrap2 h2 span { color: #ffffff; font-size: 0.8em;display: block;}
.color-wrap2 p { width: 96%; color: #ffffff; margin: 1em auto;}

.top_mov { display:flex; flex-wrap:wrap; justify-content:center; width: 100%;}
.top_mov .mov-item {margin: 0 5px;}
.top_mov p { width: 100%; color: #ffffff;  font-size: 0.9em; text-align: center; margin: 1em auto;}


/*-----------------
  icon
-----------------*/
.icon {display:flex; flex-wrap:wrap; justify-content:space-between;	width: 100%;}
.icon .bt_item {
	width: 25%;
    text-align: center;
    padding:15px 30px;
	overflow:hidden!important;
}
.icon .bt_item img {
	max-width:90%;
	margin: 0.5em 0em 0.5em 0.5em;
	background: #e2fff7;
    border: solid 1px #efefef;
	box-shadow:0px 0px 10px 1px rgba(0, 0, 0, 0.2);
}

/*-----------------
  CONTENTS
-----------------*/
.contents { background-color: #ffffff; padding-bottom: 0;}

/* MAIN IMAGE - BxSlider */
.image-main .box-main-image { width: 1024px; height:auto/* 264px */; overflow: hidden;}
.image-main .box-main-image .bx-wrapper .bx-controls .bx-pager { background-image: none;}
.image-main .box-main-image .bx-wrapper .bx-viewport .bxslider { overflow: visible;}
.image-main .bx-wrapper .bx-controls .bx-pager { height: 0%;}

/* SLIDE BANNER - BxSlider */
.top-wrap {background-color: #262673; overflow: hidden;}
.article.topimage { width: 100%; height: auto; margin: 0 auto 0; padding: 0; position: relative; overflow: visible;background-color: #262674;}
.article.topimage img { width: 100%;}

.article .topimage_inner { padding-bottom: 35px;}
.article .topimage_inner div { padding-bottom: 0; overflow: visible;}
.article .topimage_inner .bx-wrapper { position: relative; width: 92%; max-width: 918px !important; /* margin: 0 4% !important; */ padding: 0;}
.article .topimage_inner .bx-controls-direction a{ display: block; position: absolute; text-indent: -1000em; top: 50%; margin-top: -11.5px; width: 13px; height: 23px;}
.article .topimage_inner .bx-controls-direction a.bx-prev{ left: -4%; background-image: url(../img/arrown.png);}
.article .topimage_inner .bx-controls-direction a.bx-next{ right: -4%; background-image:url(../img/arrows.png);}
.article .topimage_inner .bx-wrapper .bxslider .slide { width: 260px; margin: 0 8px;}
.article .topimage_inner .bx-wrapper .bxslider .slide img { max-width: 100%;}


/* NEWS */
.color-wrap {background-color: #ebf0fb;}
.color-wrap .box-news { width: 80%; margin: 0 auto; overflow: visible;}
.color-wrap .box-news h2 {text-align: center; color: #00677d; font-size: 1.8em; font-weight: 800; margin-top: 1em;}
.color-wrap .box-news dl { margin: 0 1.5em;}
.color-wrap .box-news dl dt ,
.color-wrap .box-news dl dd { padding: 0; margin: 0;}
.color-wrap .box-news dl dt { width: 10em; padding: 0.7em 0 0.6em 1em; float: left;}
.color-wrap .box-news dl dd { padding-left: 10em; border-bottom: 1px solid #cccccc;}
.color-wrap .box-news dl dd a { display:block;padding: 0.7em 0 0.6em 0;}
.color-wrap .box-news > a:nth-last-of-type(1) { margin: 1em 1em 1.5em; padding-left: 1.2em; display: block; float: right; background: url(../img/img_link_arrow.png) left center no-repeat;}

.color-wrap .box-news .list_link { width: 78px; padding: 0 3em; margin: 1em auto; text-decoration: none; text-align: center; color: #00677d; border: solid 1px #00677d; border-radius: 3px; transition: .4s; }
.color-wrap .box-news .list_link:hover { background: #00677d;}
.color-wrap .box-news .list_link a { color: #00677d;}
.color-wrap .box-news .list_link a:hover { color: #ffffff; text-decoration: none;}



/*-----------------
  NAV
-----------------*/
.article .nav { width: 27.5%; float: right; margin-bottom: 1.5em;}
.article .nav ul { }
.article .nav ul li, 
.article .nav > ul li:last-child { margin-bottom: 0.8em; }
.mov-box{
    position:relative;
    width:100%;
    height:0;
    padding-top:75%;
	margin-bottom: 0.8em;
}
.mov-box iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


@media screen and (max-width: 1044px) {

.article .box-news { width: calc(100% - 2.5% - 230px);}
.article .nav { width: 230px;}



/*-----------------
  IMAGE MAIN
-----------------*/
.image-main  {}
.image-main .wrap { max-width: 768px; position: relative;}

.image-main .information { position: absolute; top: 32px; left: 40px; z-index: 100; background-color: rgba(255,255,255,0.8);}

/* MAIN IMAGE - BxSlider */
.image-main .box-main-image { width: 768px; height:auto; overflow: hidden;}
.image-main .box-main-image .bx-wrapper .bx-controls .bx-pager { background-image: none;}

}

@media screen and (max-width: 787px) {
/*-----------------
  IMAGE MAIN
-----------------*/
.article.topimage img { width: 100%; margin: 0px; overflow: visible;}
	
.image-main .wrap { max-width: 468px;}

.image-main .information { width: 94%; padding: 3%; position: static; background-color: #ffffff; border: none; box-shadow: 0px 0px 0px 1px #cccccc inset;}

/* MAIN IMAGE - BxSlider */
.image-main .box-main-image { width: 468px; padding-bottom: 0em; height:auto; overflow: hidden;}
.image-main .box-main-image .bx-wrapper .bx-controls .bx-pager { background-image: none;}


/*-----------------
  CONTENTS

.article .box-news,
.article .nav { width: 100%; float: none;}

.article .box-news { margin-bottom: 2em;}

.box-news .tabmenu { }
.box-news .tabmenu ul.menu { display: none;}
.box-news .tabmenu .section { margin: 0 auto;}
.box-news .tabmenu .section h2 {
	height: 45px; padding: 0; display: block; position: relative; overflow: visible;
	background: url(../img/top_tab_center.png) left top repeat-x; border-bottom: 1px solid #cccccc;
}
.box-news .tabmenu .section h2:before,
.box-news .tabmenu .section h2:after { display: block; content: ""; position: absolute; height: 100%; top: 0px; bottom: 0px; width: 18px;}
.box-news .tabmenu .section h2:before { left: 0px; background-image: url(../img/top_tab_left.png);}
.box-news .tabmenu .section h2:after { right: 0px; background-image: url(../img/top_tab_right.png);}
.box-news .tabmenu .section h2.active { background-image: url(../img/top_tab_active_center.png); border-bottom: none;}
.box-news .tabmenu .section h2.active:before { background-image: url(../img/top_tab_active_left.png);}
.box-news .tabmenu .section h2.active:after { background-image: url(../img/top_tab_active_right.png);}
.box-news .tabmenu .section h2.active + div.division { border-top: none;}

.box-news .tabmenu .section h2 a { height: 45px; width: 100%; margin: 0; padding: 0; display: table; color: #000000; text-decoration: none; position: relative; z-index: 100;}
.box-news .tabmenu .section h2 a span { margin: 0; padding: 0.2em 1em 0 2.3em; display: table-cell; vertical-align: middle;}

.box-news .tabmenu .section .division dl { margin-top: 0em; margin-bottom: 4.5em; padding-top: 1em; padding-bottom: 0.5em;}
.box-news .tabmenu .section .division .list_link { display: block; top: auto; bottom: 1em; left: 5%; width: 90%; height: auto;}
.box-news .tabmenu .section .division .list_link a { display: block; padding-top: 0.7em; padding-bottom: 0.6em; text-align: center; letter-spacing: 1.5em; text-indent: 0.75em;}
------*/

}

@media screen and (max-width: 484px) {
.image-main .wrap { max-width: inherit;}
.image-main .information { width: 86%; margin-left: 4%; margin-right: 4%; }

.image-main .box-main-image { width: 100%;}
	
.article.topimage { width: 100%; margin: 0.5em 0; overflow: visible;}
.article.topimage img { width: 100%; overflow: visible;}

.topimage { width: 100%; height:auto; margin: 0 auto; overflow: visible;}
.top-image img {width: 100%; height:auto; margin: 0 auto; overflow: visible;}
/*-----------------
  CONTENTS
-----------------*/
.thema-box{ width: 100%; display:flex; flex-flow: column; margin: 0 auto;}
h2.thema { text-align: center; color: #00677d; font-size: 1.8em; font-weight: 900; margin: 1em 0 0; padding: 0;}
.t-item {
	width: 80%;
	height: auto;
    padding:10px 0;
	margin: 0 auto;
	overflow:hidden!important;
}
.t-item p {
	color: #ffffff;
	margin: 0;
	padding: 5px 0 0 10px;
	font-size: 0.9em;
}
.t-item a {
	color: #ffffff;
	margin: 0;
	padding: 5px 0 0 10px;
}
/* NEWS */
.article .box-news { width: 94%; padding-left: 3%; padding-right: 3%;}
.article .news_section dl dt {  padding-bottom: 0em; float: none;}
.article .news_section dl dd { padding-left: 2em;}
	
/* NEWS */
.color-wrap .box-news { width: 94%; margin: 0 auto; overflow: visible;}
.color-wrap .box-news dl { margin: 0 1.5em;}
.color-wrap .box-news dl dt ,
.color-wrap .box-news dl dd { padding: 0; margin: 0;}
.color-wrap .box-news dl dt { width: 8em; padding: 0.7em 0 0.6em 1em; float: none;}
.color-wrap .box-news dl dd { padding-left: 2em; border-bottom: 1px solid #cccccc;}
.color-wrap .box-news dl dd a { display:block; padding: 0em 0 0.6em 0;}

.icon {
	display:flex;
	flex-flow: column;
}
.icon .bt_item {
	width: 60%;
    text-align: center;
    padding:15px 30px;
	margin: 0 auto;
	overflow:hidden!important;
}
.icon .bt_item img {
	max-width:90%;
	margin: 0.5em 0em 0.5em 0.5em;
	background: #e2fff7;
    border: solid 1px #efefef;
	box-shadow:0px 0px 10px 1px rgba(0, 0, 0, 0.2);
}


}