@charset "utf-8";

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 font-size: inherit;
 line-height: inherit;
 margin: 0;
 padding: 0
}
*:before, *:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box
}

:root {
  --main-color: #063884;
  --sub-color:#0091FF;
 --font-minxho: YakuHanJP, 'Gelasio' , "Times New Roman", 'Noto Serif JP',"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


html {
 font-size: 62.5%;

 box-sizing: border-box;
 -webkit-text-size-adjust: 100%;

}
body {

 position: relative;
 height: 100%;
 overflow: auto;
 min-width: 320px;
 line-height: 1.8;
 font-size: 14px;
 font-size: 1.4rem;
 overflow-x: hidden;
 font-family: YakuHanJP, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Hiragino Sans , Hiragino Kaku Gothic ProN, 'ヒラギノ角ゴ ProN W3',"游ゴシック体", YuGothic, "Yu Gothic M", "Yu Gothic Medium", Meiryo, 'メイリオ','ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
 color: #333;
 margin: 0
}

#wrapper {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
   background: url(../images/common/content-bk1.png) repeat left top;
}


.js_isIe body {
 font-family: YakuHanJP, Verdana, Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
}
@media screen and (max-width: 768px) {
 .pc-only {
  display: none !important
 }
}
.sp-only {
 display: none
}
@media screen and (max-width: 768px) {
 .sp-only {
  display: inherit
 }
}
@media screen and (max-width: 896px) {
 .lg-only {
  display: none !important
 }
}
a {
 text-decoration: none;
 outline: none;
 display: inline-block;
 color: #063884;
}
a:hover {
 color: red
}

a[href^="http"], a[href^="https"]{
word-break: break-all;
}

hr {
 border: medium none;
 display: block;
 height: 1px;
 margin: 50px 0;
 width: 100%;
 background-color: #ccc
}
img {
 max-width: 100%;
 height: auto;
 vertical-align: bottom
}
.container {
 max-width: 1100px;
 padding-left: 15px;
 padding-right: 15px;
 margin-left: auto;
 margin-right: auto
}
@media screen and (max-width: 480px) {
 .container {
  padding-left: 4vw;
  padding-right: 4vw
 }
}
.container-large {
 max-width: 1400px;
 padding-left: 15px;
 padding-right: 15px;
 margin-left: auto;
 margin-right: auto
}
@media screen and (max-width: 480px) {
 .container-large {
  padding-left: 4vw;
  padding-right: 4vw
 }
}

/*=============================
#header
=============================*/
#header{
 position: fixed;
background-color: #fff;
z-index: 999;
 width: 100%;
 box-shadow: 0 3px 6px 0px rgba(0,0,0,0.3);
}

#header .header-inner{
 padding: 0 0px 0 5px;
 height: 60px;

 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: row;
 flex-direction: row;
 -webkit-flex-wrap: nowrap;
 flex-wrap: nowrap;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: flex-start;
 justify-content: flex-start;
 margin: 0 auto;
}
@media print, screen and (min-width: 700px) {
#header .header-inner{ padding: 0px 15px; height: 80px;}
}

/*=============================
.header-logo
=============================*/
.header-logo{
 max-width: 340px;
 
}
@media print, screen and (min-width: 700px) {
.header-logo{  max-width: 824px;}
}
.header-logo a{
 display: block;
  max-width:441px;
}
.header-logo img{

}
/*=============================
#pcNavi
=============================*/
#pcNavi{
 margin-left: auto;
 display: none;
}
#pcNavi ul{
 list-style: none;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: row;
 flex-direction: row;
 -webkit-flex-wrap: nowrap;
 flex-wrap: nowrap;
 -webkit-align-items: stretch;
 align-items: stretch;
 -webkit-justify-content: flex-start;
 justify-content: flex-start
}
#pcNavi ul li{margin-left: 1em;}
#pcNavi ul li a{display: block;}

@media print, screen and (min-width: 700px) {
#pcNavi{display:inline-flex;}
}


/*=============================
#sp-trigger
=============================*/
#sp-trigger{
 padding: 8px;
   cursor: pointer;
 margin-left: auto;
}
.sp-triggerIcon {
  position: relative;
  width: 30px;
  height: 30px;

}
.sp-triggerIcon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000;
  border-radius: 4px;
}
.sp-triggerIcon, .sp-triggerIcon span {
  display: block;
  transition: all .5s;
  box-sizing: border-box;
}
.sp-triggerIcon span:nth-of-type(1) {
  top: 5px;
}
.sp-triggerIcon span:nth-of-type(2) {
  top: 13px;
}
.sp-triggerIcon span:nth-of-type(3) {
  bottom: 5px;
}
#sp-trigger.active .sp-triggerIcon span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}
#sp-trigger.active .sp-triggerIcon span:nth-of-type(2) {
  opacity: 0;
}
#sp-trigger.active .sp-triggerIcon span:nth-of-type(3) {
  -webkit-transform: translateY(-8px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
}

@media print, screen and (min-width: 700px) {
 #sp-trigger{display:none;}
}

/*=============================
#spNavi
=============================*/
#spNavi{
 position: absolute;
background-color:var(--main-color);
display: none;
z-index: 10000;
width: 100%;
 top:100%;
 padding: 15px;
 list-style: none;
 box-sizing: border-box;
}
#spNavi ul{ list-style: none;}
#spNavi ul li{}
#spNavi ul li a{
 line-height: 1.4;
 text-decoration: none;
display: block;
font-size: 110%;
position: relative;
padding: 1em 2em 1em 0.8em;

color: #fff;
font-weight: bold;


}
#spNavi ul li + li{
border-top: solid 1px #CCC;

}
#spNavi ul li a::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 6px;
    height: 6px;
    margin: -4px 0 0 0;
    border-top: solid 2px #063884;
    border-right: solid 2px #063884;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*=============================
#footer
=============================*/
#footer {
 margin-top: auto;
    background: url(../images/common/content-bk4.png) repeat left top;
    padding: 20px 0px 40px;
    color: #FFF;
    clear: both;
}
#footer ul {
    float: left;
}
#footer li {
    list-style: none;
    display: inline;
}
#footer li a {
    color: #FFF;
    text-decoration: none;
    background: url(../images/common/arrow1.png) no-repeat left center;
    padding-left: 15px;
    margin-left: 20px;
}

#copy {
    float: right;
}
#footer ul li a{
   color:#fff;
}
#backtop{
	position: fixed;
	right: 20px;
	bottom: 20px;
}
@media screen and (max-width: 768px) {
 #footer ul {
 display: block;
    float: none;
}
#copy {
 display: block;
    float: none;
 text-align: center;
 font-size:1.1rem;
}
}


/*=============================
#articleMain
=============================*/
#articleMain{
 padding-top: 60px;
}
@media print, screen and (min-width: 700px) {
#articleMain{
 padding-top: 80px;
}
}


/*=============================
#topHero
=============================*/
#topHero{
  display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: column;
 flex-direction: column;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
  
 background: url(../images/common/main-bk_sp.jpg) no-repeat center bottom;
background-size: cover;
height: 34vw;
}
@media print, screen and (min-width: 700px) {
#topHero{
 background: url(../images/common/main-bk.jpg) no-repeat center bottom;
 height: 480px;
}
}

.topHero-inner{
 
}

.topHero-linkWrap{
 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: row;
 flex-direction: row;
 -webkit-flex-wrap: nowrap;
 flex-wrap: nowrap;
 -webkit-align-items: stretch;
 align-items: stretch;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 width: 860px;
}

.topHero-link01,.topHero-link02,.topHero-link03{ display: none;}

@media print, screen and (min-width: 700px) {
 .topHero-link01,.topHero-link02,.topHero-link03{ display: inline-flex;}
.topHero-link01{ -webkit-transform: translate(0%, -30%); transform: translate(0%, -30%);}
.topHero-link02{ -webkit-transform: translate(0%, 30%); transform: translate(0%, 30%);}
.topHero-link03{ -webkit-transform: translate(0%, -30%); transform: translate(0%, -30%);}
}






.sectionTitle{
   font-family: var(--font-minxho);
 padding: 20px 0;
 border-top:1px solid var(--main-color);
 border-bottom:1px solid var(--main-color);
 margin-bottom: 20px;
 text-align: center;
}
.sectionTitle .ja{
font-size: 3rem;
font-weight:bold;
  line-height: 1.2;
  color: var(--main-color);
  display: block;
}
.sectionTitle .en{
font-size: 1.4rem;
font-weight:400;
  line-height: 1.2;
  color: var(--sub-color);

  display: block;
}
@media screen and (max-width: 768px) {
.sectionTitle .ja{
font-size: 2rem;
}
.sectionTitle .en{
font-size: 1.2rem;

}
}



/*=============================
#topRead
=============================*/
#topRead{
 padding-top: 40px;
 padding-bottom: 40px;
}

#topRead-spbtn{

  display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: row;
 flex-direction: row;
 -webkit-flex-wrap: nowrap;
 flex-wrap: nowrap;
 -webkit-align-items: stretch;
 align-items: stretch;
 -webkit-justify-content: center;
 justify-content: center;
 list-style: none;
}

#topRead h2{
 font-weight: bold;
 line-height: 1.4;
 text-align: center;
 font-size:1.6rem;
}
@media print, screen and (min-width: 700px) {
#topRead-spbtn{
 display: none;
}
}
/*=============================
#topPurpose
=============================*/
#topPurpose{
  padding-top: 40px;
 padding-bottom: 40px;
}
.topPurpose-soukanzu{
 text-align: center;
 margin-top: 20px;
}
.topPurpose-soukanzu img{
max-width: 800px;
 width: 100%;
}
/*=============================
#topNews
=============================*/
#topNews{
   padding-top: 40px;
 padding-bottom: 40px;
 background-color: #E9EEFE;
}

#topNews .sectionTitle{
padding: 0;
 border: none;
 text-align: left;
}
.overflowScrollWrap{
 overflow-y: scroll;
 max-height:300px; 
}
.topNews-titleArea{
  padding: 1em 0;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: column;
 flex-direction: column;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-align-items: stretch;
 align-items: stretch;
 -webkit-justify-content: flex-start;
 justify-content: flex-start
}
@media screen and (max-width: 896px) {
 .topNews-titleArea{
  -webkit-flex-direction: row;
 flex-direction: row;
   -webkit-justify-content: space-between;
 justify-content: space-between;
   -webkit-align-items: center;
 align-items: center;
}
}
.newsList {
 padding-bottom: 30px
}
.newsList li {
 padding: 1em 0;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: row;
 flex-direction: row;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-align-items: stretch;
 align-items: stretch;
 -webkit-justify-content: flex-start;
 justify-content: flex-start
}
.newsList li {
 border-top: 1px dotted #ccc
}
.newsList li:last-child {
 border-bottom: 1px dotted #ccc
}
.newsList li .news-date {
 width: 7em;
 margin-bottom: 0;
 white-space: nowrap;
 padding-right: 1em;
 line-height: 1.4;
 font-size: 1.4rem;
 font-family: Verdana, Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
}
.newsList li .news-cat{
  width: 5em;
 line-height: 1.3;
}
@media screen and (max-width: 896px) {
 .newsList li .news-date {
 width:auto;

}
 
.newsList li .news-cat{
  width: auto;
 line-height: 1.3;
}
}

.newsList li .news-cat span{color:#fff;
font-size:1.1rem;
line-height: 1;
white-space: nowrap;
padding: 0.1em 0.5em;}
.newsList li .news-cat .news{background-color:var(--sub-color);}
.newsList li .news-cat .event{background-color:green;}
@media screen and (max-width: 896px) {
 .newsList li .news-date {
  margin-bottom: 0.2em;

 }
}
.newsList li .news-txt {
 line-height: 1.4;
 margin-bottom: 0;
width: calc(100% - 12em);
}
@media screen and (max-width: 896px) {
 .newsList li .news-txt {
  width: 100%
 }
}
.newsList li .news-txt a {
 color: #063C86
}
.newsList li .news-txt a:hover {
 color: red
}


/*=============================
#topBoshu
=============================*/
#topBoshu{
    padding-top: 50px;
 padding-bottom: 50px;

}
.topBoshu-midashi{
 font-size:3rem;
 line-height: 1.4;
 font-weight:bold;
 text-align: center;
 color:var(--main-color);
 margin-bottom: 0.5em;
}
@media screen and (max-width: 768px) {
 .topBoshu-midashi{
   font-size:2rem;
 }
}
#topBoshu p{
 margin-bottom: 0.5em;
}

/*=============================
#topHeimenzu
=============================*/
#topHeimenzu{
    padding-top: 50px;
 padding-bottom: 50px;
}

/*=============================
#topContact
=============================*/
#topContact{
 background: url(../images/common/content-bk3.png) repeat left top;
    padding-top: 50px;
 padding-bottom: 50px;
 color:#fff;
}

#topContact .sectionTitle{

 border-top:1px #3F65A0 solid;
 border-bottom:1px #3F65A0 solid;

}
#topContact .sectionTitle .ja{

font-weight:bold;
  line-height: 1.2;
  color: #fff;
  display: block;
}
#topContact .sectionTitle .en{

font-weight:400;
  line-height: 1.2;
  color: var(--sub-color);

  display: block;
}


/*=============================
コンテント関連（ページ）
=============================*/
#content-main{
 width:100%;
  margin-bottom: 30px;
}

#content-row{
  display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: row-reverse;
 flex-direction: row-reverse;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-align-items: stretch;
 align-items: stretch;
 -webkit-justify-content: space-between;
 justify-content: space-between;
}
#content-row #content-main{
 width: calc(100% - 260px);
  margin-bottom: 30px;
}
#content-row #content-side{
 width: 230px;
 margin-bottom: 30px;
}

@media screen and (max-width: 896px) {
#content-row #content-main{
 width: 100%;
 
}
#content-row #content-side{
 width: 100%;
}
}


#content-side h3 {
    background-color: #13438B;
    padding: 1em;
    text-align: center;
    color: #FFF;
    font-size: 1.6rem;
 font-weight:bold;
 line-height: 1.2;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
 border-top-right-radius: 5px;
}
#content-side ul li + li{
 border-top:1px solid #fff;
}
#content-side ul li a {
    display: block;
    padding: 1em;
    background-color: #CAD5ED;
    color: #333;
 text-decoration: none;

}
#content-side ul li a:hover {
background-color:#4373BA;
 color:#fff;
}

.row div[class^="col-"] > * {
 margin-top: 0
}

/*=============================
ポップアップボックス
=============================*/
.popupBox{
 background-color: #fff;
 padding: 20px;
  position: relative;


  width: auto;

  margin: 0 auto;
 
}

/*=============================
.googlemapをレスポンシブにする
=============================*/
.google-map {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 overflow: hidden
}
.google-map iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%
}
/*=============================
.youtubeをレスポンシブにする
=============================*/
.video, .youtube {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
 margin: 20px 0 20px
}
.video iframe, .youtube iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%
}