@charset "utf-8";

/* general */

body{font-family:"Roboto Slab", "メイリオ" , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; font-size: 14px;}
body, div, p, ul, li,dt,dd{margin: 0; padding: 0;}
div{overflow: hidden;}
ul, li{list-style-type: none;}
img{border: none; max-width: 100%;}
a{color: #000;}
a, a > li{text-decoration: none; transition: 0.3s;}
a:hover, a > li:hover{opacity: 0.7;}

.alignLeft{text-align: left!important;}
.alignRight{text-align: right;}
.alignCenter{text-align: center;}
.floatLeft{float: left;}
.floatRight{float: right;}
.clearfix{content: " "; display: block; clear: both;}
.overFlowHidden{overflow: hidden;}
.valignMiddle{vertical-align: middle;}

.width980{width: 980px; margin-left: auto; margin-right: auto;}
.width980_1{
width: 980px; margin-left: auto; margin-right: auto;
}
@media screen and (max-width: 768px){
  .width980,.width980_1{width: 100%;}
  .bx-wrapper {margin-bottom: 0;}
  .bx-wrapper .bx-viewport{
    border: none;
    box-shadow: none;
    left:0;
  }
  .bx-wrapper .bx-controls-direction a{
    display: none;
  }
}
.width980_1 ul{
  display: flex;
  display:-webkit-box;
  display:-ms-flexbox;
}
.m5{margin: 5px;}
.m10{margin: 10px;}
.m15{margin: 15px;}
.m20{margin: 20px;}
.m25{margin: 25px;}
.m30{margin: 30px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.p5{padding: 5px;}
.p10{padding: 10px;}
.p15{padding: 15px;}
.p20{padding: 20px;}
.p25{padding: 25px;}
.p30{padding: 30px;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt25{padding-top: 25px;}
.pt30{padding-top: 30px;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}
.pb25{padding-bottom: 25px;}
.pb30{padding-bottom: 30px;}
.fs10{font-size: 10px;}
.fs12{font-size: 12px;}
.fs16{font-size: 16px;}
.fs20{font-size: 20px;}
.lh35{line-height: 35px;}
.h78{height: 78px; line-height: 78px;}

.leftColumn{width: 710px; padding: 30px 0;	}
.rightColumn{width: 240px; padding: 30px 0;	}
@media screen and (max-width: 768px){
  .leftColumn{width: 100%; padding:5vw 0 0 0;	}
  .rightColumn{width:100%;padding:5vw 5vw 0 5vw;box-sizing: border-box;display: flex;flex-wrap: wrap;justify-content: space-between;;}
  .rightColumn>*{width: 100%}
  .rightColumn>*.bn{width:44vw;}

}
.background_navy{background-color: #00365A;}
.background_gray{background: url('../image/bg_header.png') repeat-x;}

.red {color: #B20000;}
.mincho {font-family:"Roboto Slab", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; color: #00365a;}

.d-flex {display: -webkit-flex; display: -ms-flex; display: flex;}


/*header*/

header .header_link li{display: inline-block; padding: 5px 0 5px 20px; background: url('../image/icon1.png') left no-repeat;}
/*header nav a{color: #FFF;}
header nav ul li{display: inline-block; height: 60px; line-height: 60px; width: 16%; text-align: center; font-size: 14px;}*/

header nav a{color: #FFF;}
header nav ul li{

height: 60px;
line-height: 60px;
width: calc(100% / 7);
text-align: center;
font-size: 14px;
}
header h1{margin: 0;}

/*footer*/

footer, footer a{color: #FFF;}
@media screen and (max-width: 768px){
  footer>div:first-of-type>p:first-of-type{
    padding:0 2.5vw 0 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  footer>div:first-of-type>p:first-of-type>a{
    margin:0;
    width:50%;
    padding-left:2.5vw;
    padding-top:2.5vw;
    box-sizing: border-box;
    display: block;
  }
}
footer .footerlink{margin-bottom: 10px; margin-right: 20px;}
footer .footerlink li a{text-decoration: underline;}
footer .footerlink > li{background: url('../image/arrow3.png') left no-repeat; padding-left: 20px;	font-size: 14px !important; margin-bottom: 12px;line-height: normal;}
footer .footerlink > ul{margin-bottom: 12px;}
footer .footerlink > ul >li{padding-left: 30px !important;font-size: 12px !important; margin-bottom: 6px !important;line-height: normal;}
footer .footerlink > ul >li>a{;font-size: 12px !important;}
@media screen and (max-width: 768px){
  footer .footerlink{
    margin-right: 0;
    margin-bottom:0;
  }
  footer .footerlink li{
    margin-bottom:0;
    padding-top:2.5vw;
    background-position: 0 2.5vw;
  }
  footer .footerlink > ul{
    margin-bottom:0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-right: 5vw;
  }
  footer .footerlink > ul >li{
    padding-left: 5vw !important;
    padding-top:2.5vw;
    width :50%;
    margin-bottom: 0 !important;
    box-sizing: border-box;
  }
}
footer .area{border-left: 1px solid #00406A; padding-left: 30px;  width: 480px; height: 260px; }
footer .area p{text-align: left;line-height: normal;}
footer .area p a{font-size: 14px;}
footer .area dl{margin-top:1em;margin-bottom: 1em;}
footer .area dt{font-size:14px;line-height: normal;}
footer .area dd{font-size:12px;line-height: normal;}
@media screen and (max-width: 768px){
  footer .area{
    width:100%;
    padding: 5vw 2vw 0 2vw;
    box-sizing: border-box;
  }
  footer .area p a{
    font-weight: bold;
  }
  footer .area dl{
    box-sizing: border-box;
    padding-left: 2vw;
    margin-top:10px;
    margin-bottom:0;
  }
}
footer .copyright{height: 60px; line-height: 60px; font-size: 12px; background-color: #001C2F;}
@media screen and (max-width: 768px){
  footer .copyright{
    height: auto;
  }
  footer .copyright div p{
    width:100%;
    box-sizing: border-box;
    line-height: calc(1vw + 24px);
  }
  footer .copyright div p a{
    font-size: 1vw;
  }
}
/*sidebar*/

.sidebar{margin-bottom: 30px;}
.sidebar li{ width: 240px; text-align: center; box-sizing: border-box; font-size: 14px;}
@media screen and (max-width: 768px){
  .sidebar li{ width: 100%}
}
.sidebar > ul >li{ /*height: 70px;*/ line-height: 70px; /*background: #00365A url('image/arrow1.png') right no-repeat;*/ background: #00365A; color: #FFF;}
.sidebar > ul > li > a{margin-top: 20px; height: 70px; line-height: 70px; /*background: #00365A url('image/arrow2.png') right no-repeat;*/ background: #00365A; color: #FFF;}
@media screen and (max-width: 768px){
  .sidebar > ul > li > a{margin-top:2.5vw}
}
.sidebar > ul > li > ul > li > a{height: 50px; line-height: 50px; background: url('../image/icon2.png') left no-repeat;border: 1px solid #E3E3E3; border-width: 0 1px 1px 1px; text-align: left; padding-left: 30px; color: #333;}

.sidebar .banner{ margin-top: 20px; }

#content {position: relative;}
#content #pagetop{position: absolute; right: 0; bottom: 0; margin-top: 10px;}

/*TOP*/

.main{position: relative; margin-top: 5px;}
@media screen and (max-width: 768px){
  .main{margin-top:0}
}
.main a.a_menu{position: absolute; right: 26px; bottom: 33px; width: 200px; height: 35px; background-color: transparent; text-indent: -100%; overflow: hidden;}
@media screen and (max-width: 768px){
  .main a.a_menu{
    width:100%;
    height: 100%;
    top:0;
    right: 0;
  }
}
.text1{margin: 30px 0;}
@media screen and (max-width: 768px){
  .text1{margin:5vw 0;}
}
/*.photo{display: inline-block;}*/
.photo span{color: #00365A; font-weight: bold; font-size: 14px;line-height: 20px;display: block;padding-top:8px;}
@media screen and (max-width: 768px){
  .photo span{
    line-height: normal;
    padding-bottom:5vw;
  }
}
.text2{margin-top: 50px; height: 148px;}
@media screen and (max-width: 768px){
  .text2{
    margin-top:5vw;
    height: auto;
  }
}
.text2, .text2 > div{overflow: visible;}
.text2 img{margin-top: -32px;}

.news{margin: 20px 0 50px;}
.news>div:first-of-type{
  padding-bottom: 8px;
}
.news h2{float: left; margin: 0;}
.news .more{float: right; border-left: 1px solid #CCC; padding-left: 20px; height: 26px;margin-top: 7px;}
.news .more a,.news .more a span{display: block;width: 100%;height: 100%;box-sizing: border-box;}
.news .more span{line-height: 26px;padding:0 10px;background-color: #00365A; color: #FFF; font-size: 10px;}
.news li {padding: 20px; font-size: 12px; overflow: hidden;}
.news li:nth-child(odd) {background-color: #FAFAFA;}
.news li .date{float: left; width: 90px;}
.news li .text{float: right; width: 570px;}
@media screen and (max-width: 768px){
  .news{margin: 5vw 0 0 0;}
  .news h2{padding-left:5vw}
  .news .more{border-left:0;padding-left: 0;padding-right: 5vw}
  .news .more span{line-height: 26px;margin-bottom: 4px;padding:0 10px;}
  .news li .date{width: 100%;display: block;padding-bottom: 2.5vw}
  .news li .text{width: 100%;}
  .news iframe{width:90vw;margin:0 5vw}
}

hr{border:0; border-bottom: 2px dotted #E6E6E6;}

.inquiry{margin: 30px 0; position: relative;}
@media screen and (max-width: 768px){
  .inquiry{margin:0;padding:5vw 5vw 0 5vw}
}
.inquiry a.mail{position: absolute; top: 100px; left: 10px; width: 190px; height: 35px; background-color: transparent; text-indent: -100%; overflow: hidden;}

.facebook{width: 710px; height: 275px; background-color: #CCC;}

/*menu*/

.menu_box{ display: inline-block; width: 350px; height: 150px; background-color: #F7F4EE; border:1px solid #CDCDCD; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; margin: 2px 0;}
.menu_box h2{color: #003459; font-size: 16px; line-height: 1em; border-left: 3px solid #00365A; margin: 5px; padding-left: 10px;}
.menu_box .more{background: url('../image/icon3.png') 10px 49% no-repeat; font-size: 12px; margin: 5px; padding: 2px 5px 2px 30px; color: #777; border-left: 1px solid #777;}
.menu_box .photo{margin: 0px 8px;}
.menu_box .text{width: 190px;font-size: 12px;}

/*detail*/


.detail .text_detail1{margin-bottom: 20px;}
.detail .text_detail2{width: 400px;}
.detail h2{  border-left: 3px solid #00365A; padding: 0px; background-color: #F7F4EE; border:1px solid #CDCDCD; box-sizing: border-box;}
.detail h2 span{color: #003459; font-size: 20px; line-height: 40px; border-left: 7px solid #00365A; margin: 5px; padding-left: 20px; }
.detail p{font-size: 14px; margin-bottom: 20px;}
.detail table {border-top: 1px solid #00365A; border-left: 1px solid #00365A; color: #003459; width: 600px; margin: 20px;}
.detail table th{width: 275px; text-align: left;}
.detail table td{text-align: center;}
.detail table th, .detail table td{border-right: 1px solid #00365A; border-bottom: 1px solid #00365A; font-size: 14px; padding: 10px 20px;}

/*toggle menu*/
.accordion {
    display: block;
}
.accordion a, .accordion .toggle {
    display: block;
    position: relative;
    padding: 5px;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    -webkit-transition: .2s ease-in-out;
}
.accordion li a:after,
.accordion li .toggle:after {
    display: block;
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -5px;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -webkit-transition: .2s ease-in-out;
}
.accordion li:first-child .toggle:after {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.accordion li:first-child .toggle.open:after {
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.accordion li ul {
    display: none;
    background: #fff;
    margin: 0;
    font-size: small;
    overflow: hidden;
}
.sidebar li a {
	color: #fff;
}

/****追記****/

/*flexbox*/
.fBox {
	display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari（PC）用 ---*/
    display:flex;
	justify-content: space-around;
	-webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
    -ms-flex-pack: distribute;/*--- IE10 ---*/
    -webkit-justify-content:space-around;/*--- safari（PC）用 ---*/
}
.fStart {
    justify-content: flex-start;
	-ms-flex-pack: start;
}
.alignEnd {
	align-items: flex-end;
	-ms-flex-align: end;/*--- IE10 ---*/
	-webkit-box-align: end;/*--- Androidブラウザ用 ---*/
	-webkit-align-items: flex-end;/*--- safari（PC）用 ---*/
}
section.fBox {
    padding: 5px;
}
@media screen and (max-width: 768px){
  section.fBox {
    display: block;
    padding:0 5vw;
  }
}
.img_right {
    float: right;
    width: 40%;
}

img.floatRight.bm {
    margin-bottom: 10px;
}

.fBox.under {
    width: 100%;
}

.fBox.under img {
    margin-left: 3px;
}

.photo img {
    border: 3px solid #fff;
    /* border-radius */
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
    box-shadow: rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
    -webkit-box-shadow: rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
    -moz-box-shadow: rgba(113, 135, 164, 0.65098) 0px 0px 6px 3px;
}
@media screen and (max-width: 768px){
  .photo img {
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  .photo>a{
    display: block;
  }
}
.btn {
	display: inline-block;
	width: 250px;
    height: auto;
	text-align: center;
	padding: 20px;
	margin: 25px;
	border: 1px solid #eee;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */

}
#middle h1 {
	color: #fff!important;
	text-shadow: 1px 1px 3px #333;
	margin: 0 0 0 20px;
	padding: 30px 0;
}
.fb-page {
  width:100% !important;
}
@media screen and (max-width: 768px){
  .fb-page {
    width:90vw !important;
    margin:5vw 5vw 0 5vw;
    display: block !important;
  }
  .fb-page *{
    max-width: 100%;
  }
}