@charset "UTF-8";
/*===============================================
  base
===============================================*/
/*google font*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

*{
  margin: 0;
  padding: 0;
}

*:focus{
  outline: 0;
}

html{
  font-size: 62.5%;
}

body{
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック  Medium", meiryo, sans-serif;
  font-size: 1.5rem;
  color: #333;
  line-height: 1.6;
  letter-spacing: .05em;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  -webkit-font-smoothing: antialiased;
}

/* HTML5 */
header, footer, section, aside, nav, article{
  display: block;
  margin: 0;
  padding: 0;
}

/* Link */
li, button{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a{
  color: #0773C8;
  text-decoration: none;
  transition: all .2s;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a:hover{
  color: #0773C8;
  text-decoration: underline;
}

a img{
  transition: all .2s;
  text-decoration: none;
  border-style: none;
}

a:hover img{
  opacity: .85;
}

/*sm時は透過しない*/
@media screen and (max-width: 760px){
  a:hover img{
    opacity: 1;
  }
}

/* Reset */
h1, h2, h3, h4, h5, h6, div, p, pre, ul, ol, dl, dt, dd, address, form, blockquote, iframe{
  display: block;
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}

li{
  list-style: none;
}

table{
  font-size: inherit;
}

img{
  border: none;
  vertical-align: bottom;
  text-align: right;
  width: 100%;
  height: auto;
}


/* Text */
p{
  margin: 10px 0 1em;
  line-height: 1.9;
  text-align: justify;
  text-justify: inter-ideograph;
}

small{
  display: block;
  font-size: 1.2rem;
}

time{
  display: block;
}

blockquote{
  margin: 1em 0 1em 0;
  padding: 1px 20px;
  border: 1px solid #ddd;
  color: #444;
}

strong{
  font-weight: bold;
  font-style: normal;
}

sup{
  font-weight: normal;
}

.fred {color: red;}
.bgyellow{background-color: #ffffcc;padding: 1em;}
.bgblue{background-color: #ebffff;padding: 1em;}
.bgpink{background-color: #ffedfd;padding: 1em;}
.fstrong{font-weight: bold;}
.f80 {font-size: 80%;}
.f90 {font-size: 90%;}
.f120 {font-size: 120%;}
.fl120 {line-height: 120%;}
.fl140 {line-height: 140%;}
.tcenter {text-align: center;}
.tleft {text-align: left;}
.tright {text-align: right;}
.clear {clear: both;}
ul.tattention {padding: 0; text-indent: -1em; font-size: 90%;}
ul.tattention li {list-style: none !important;}
img.img_right {float: right; width: 50%; margin-left: 25px;}
img.img_left {float: left; width: 50%; margin-right: 25px;}

/* clearfix */
.cf:after{
  content: "";
  display: block;
  clear: both;
}


/*===============================================
  jsイベント用
===============================================*/

/* inview
-----------------------------------------------*/
/*フェードイン*/
.inviewfadeIn {
  opacity: 0;
  transition:opacity 1s;
  transition-delay:.4s;
}

.fadeIn {
  opacity: 1.0;
}

/*上へスライド*/
.inviewUp {
  transform: translate(0, 40px);
  transition:transform .8s;
}

.Up {
  transform: translate(0, 0);
}

/*ズームイン*/
.inviewzoomIn {
  transform: scale(0, 0);
  transition:transform .8s;
}

.zoomIn {
  transform: scale(1, 1);
}

/*フェードインしながら上へスライド*/
.inviewfadeInUp {
  opacity: 0;
  transform: translate(0, 60px);
  transition:opacity .8s,transform .8s;
}

.fadeInUp {
  opacity: 1.0;
  transform: translate(0, 0);
}

/*右からフェードイン*/
.inviewfadeInRight {
  opacity: 0;
  transform: translate(60px, 0);
  transition:opacity .8s,transform .8s;
}

.fadeInRight {
  opacity: 1.0;
  transform: translate(0, 0);
}

/*左からフェードイン*/
.inviewfadeInLeft {
  opacity: 0;
  transform: translate(-100%, 0);
  transition:opacity .5s,transform .5s;
  transition-delay:.2s;
}

.fadeInLeft {
  opacity: 1.0;
  transform: translate(0, 0);
}


/*===============================================
  header
===============================================*/
header{
  display: block;
  position: relative;
  background: url(../img/header_img.jpg) no-repeat top center;
  -webkit-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

/*ロゴ背景色変化*/
@keyframes top_bgc {
  0% { background-color: rgba(7,115,200,.6); }
  25% { background-color: rgba(7,160,200,.6); }
  50% { background-color: rgba(24,95,168,.6); }
  75% { background-color: rgba(53,161,154,.6); }
  100% { background-color: rgba(7,115,200,.6); }
}

header .header_logo_bg{
  height: 100%;
  width: 50%;
  background-color: rgba(7,115,200,.6);
  animation: top_bgc 10s infinite;
  animation-delay: 2s;
  padding: 35px;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  -ms-flex-pack: center;
}

header .header_logo_bg img{
  display: block;
  max-width: 530px;
  width: 100%;
}


/*===============================================
  #container
===============================================*/
#container{
  min-height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}


/*===============================================
  #container > #side  -左ナビ部分-
===============================================*/
#side{
  background-color: #fff;
  height: 100%;
  z-index: 1;
}


/* ロゴ
-----------------------------------------------*/
.logo{
  width: 100px;
  margin: 20px auto;
  transition: all .3s;
}

#home .logo{
  width: 156px;
  margin: 30px auto;
  transition: all .3s;
}

#home .logo_fixed{
  width: 100px;
  margin: 20px auto;
}

.logo img{
  width: 100%;
  display: block;
}


/* プルダウンメニュー
-----------------------------------------------*/
.menu li{
  position: relative;
}

.menu li a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items:center;
  -ms-flex-align: center;
  width: 250px;
  height: 45px;
  color: #333;
  line-height: 45px;
  padding-left: 30px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 1.4rem;
  position: relative;
}

.menu li a:hover {
  background-color: #F7F7F7;
  border-left: 6px solid #8EB9DB;
  text-decoration: none;
}

.menu li a:hover:after {
  content: "\f105";
  font-family: FontAwesome;
  color: #8EB9DB;
  font-size: 2rem;
  position: absolute;
  right: 10px;
}

.menu li a img{
  display: block;
  width: 26px;
  border-radius: 100px;
  margin-right: 10px;
}

/*レベル2 レベル3*/
.menu__level_2 , .menu__level_3 {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  transition: all.3s;
  position: absolute;
  top: 0;
  left: 250px;
  box-shadow: 0 2px 4px 0  rgba(0,0,0,0.1);
}

.menu .menu__level_2 a,
.menu .menu__level_3 a{
  padding-left: 20px;
}

/*ホバーで表示*/
.menu__multi:hover .menu__level_2 ,
.menu__level_2 li:hover .menu__level_3{
  visibility: visible;
  opacity: 1;
}

/*罫線*/
.menu li:not(:last-child) , .menu > li:last-child{
  border-bottom: 1px solid #eee;
}

.menu > li:first-child{
  border-top: 1px solid #eee;
}


/* side フッター
-----------------------------------------------*/
.naviFooter{
  padding: 30px;
}

.naviFooter_sns{
  margin-bottom: 20px;
}

.naviFooter_sns a{
  font-size: 2rem;
  margin-right: 30px;
  color: #8EB9DB;
}

.naviFooter_sns a:hover{
  color: #0773C8;
}

.naviFooter small{
  line-height: 1.8;
}


/*===============================================
  #container > #contents  -右メインコンテンツ-
===============================================*/
#contents{
  width: calc(100% - 250px);
  margin-left: auto;
  padding: 30px;
  background-color: #f2f2f2;
  box-sizing: border-box;
  min-height: 100vh;
}

/*indexページのみ*/
#contents.grid_contents{
  padding: 15px 15px 30px;
}

/* テキストリンク インフォ
-----------------------------------------------*/
.info{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items:center;
  -ms-flex-align: center;
  margin: 15px 15px 30px;
}

.info_title{
  background-color: #8EB9DB;
  border-radius: 5px 0 0 5px;
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  -ms-flex-align: center;
  padding: 10px;
}

.info_title p{
  margin: 0;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
}

.info_txt{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  padding: 10px 15px;
}

.info_txt li{
  margin-right: 25px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items:center;
  -ms-flex-align: center;
}

.info_txt li:before {
  content: "\f0da";
  font-family: FontAwesome;
  margin-right: 3px;
  color: #8EB9DB;
}

.info_txt li a{
  color: #333;
}

.info_txt li a:hover{
  color: #0773C8;
}


/* バナー
-----------------------------------------------*/
.bana{
  margin: 15px 15px 30px;
}

.bana li a{
  display: block;
}

.bana li a img{
  display: block;
  border-radius: 5px;
}


/* グリッド設定
-----------------------------------------------*/
.gridItem {
  padding: 15px;
  box-sizing: border-box;
}

/*グリッド基本スタイル*/
.glidStyle{
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0  rgba(0,0,0,0.1);
  transition: all .2s;
}

.grid .glidStyle:hover{
  box-shadow: 0 8px 20px 0  rgba(0,0,0,0.1);
  margin-top: -3px;
}


.gridItem a{
  color: #333;
}

.gridItem a:hover{
  color: #666;
}

/*グリッド カラム幅設定*/
.col_all{
  width: 100%;
}

.col_m{
  width: calc(100% / 4 *2);
}

.col_s{
  width: calc(100% / 4);
}

.grid-item_sizer {
  width: calc(100% / 4);
}

.date-wrapper {
	padding: 15px;
}

.loading {
/*  background-color: #fff;*/
  background-color: #f2f2f2;
  border-radius: 5px;
  box-sizing: border-box;
  position:relative;
  padding: 15px;
  margin-top: 10px;
}

.loading_img {
  width: 100%;
  height: 80px;
  background: url("../img/loading.gif") center center no-repeat;
}

/*===============================================
  画面の横幅が1280px以下
===============================================*/
@media screen and (max-width:1280px){
  .col_m{
    width: calc(100% / 3 *2);
  }
  .col_s{
    width: calc(100% / 3);
  }
  .grid-item_sizer {
    width: calc(100% / 3);
  }
}

/*===============================================
  画面の横幅が959px以下
===============================================*/
@media screen and (max-width:959px){
  .grid-item_sizer {
    width: calc(100% / 2);
  }
  .col_m{
    width: 100%;
  }
  .col_s{
    width: calc(100% / 2);
  }
}

/*===============================================
  画面の横幅が599px以下
===============================================*/
@media screen and (max-width:599px){
  .grid-item_sizer {
    width: 100%;
  }
  .col_m{
    width: 100%;
  }
  .col_s{
    width: 100%;
  }
}


/* 記事サムネイル
-----------------------------------------------*/
/*サムネイル+タイトル*/
.itemContents{
  display: block;
}

.itemContents:hover{
  text-decoration: none;
}

.itemContents img{
  display: block;
  border-radius: 5px 5px 0 0;
}

.itemContents h2{
  padding: 20px;
}

/*フッター*/
.itemFooter{
  height: 60px;
  background-color: #F7F7F7;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -ms-flex-align: center;
  border-radius: 0 0 5px 5px;
  padding-right: 10px;


}

.itemFooter_channel img{
  display: block;
  width: 60px;
  border-radius: 0 0 0 5px;
}

.itemFooter_txt{
  margin-left: 15px;
  width: 100%;
  position: relative;
  font-size: 1.2rem;
  -ms-flex: 0 1 auto;

}

.itemFooter_txt time{
  font-family: 'Roboto Condensed', sans-serif;
}

.itemFooter_txt a:hover{
  color: #0773C8;
}

.itemFooter_sns{
  width: 30px;
  display: block;
}

/* 日付別 仕切り
-----------------------------------------------*/
.dateSeparate{
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  position:relative;
  padding: 15px;
  margin-top: 10px;
}

.dateSeparate:after {
  border:15px solid transparent;
  border-top-color:#fff;
  border-bottom-width:0;
  bottom:-15px;
  content:"";
  display:block;
  left:50%;
  position:absolute;
  width:0;
  margin-left: -15px;
}

.dateSeparate time{
  text-align: center;
  font-size: 1.6rem;
}


/*===============================================

  画面の横幅が599px以下

===============================================*/
@media screen and (max-width:599px){
  /* header
  -----------------------------------------------*/
  header{
    display: none;
  }

  #home header{
    display: block;
    background: url(../img/header_img.jpg) no-repeat center right;
    -webkit-background-size: cover;
    background-size: cover;
  }

  header .header_logo_bg{
    width: 100%;
  }

  /* side
  -----------------------------------------------*/
  #side{
    display: none;
  }

  /* 右メインコンテンツ
  -----------------------------------------------*/
  #contents{
    width: 100%;
    padding: 12px;
  }

  /*indexページのみ*/
  #contents.grid_contents{
    padding: 6px;
  }

  /*info  */
  .info{
    margin: 6px 6px 12px;
  }

  .info_txt li a{
    font-size: 1.3rem;
  }

  /*bana*/
  .bana{
    margin: 6px 6px 30px;
  }


  /*可変グリッド*/
  .gridItem {
    padding: 6px;
    box-sizing: border-box;
  }

  /*smはhverアクションなし*/
  .grid .glidStyle:hover{
    box-shadow: 0 2px 4px 0  rgba(0,0,0,0.1);
    margin-top: 0;
  }

  /*日付区切り*/
  .dateSeparate{
    margin-bottom: 15px;
  }
}


/*===============================================


  共通モジュール


===============================================*/

/* 個別ページ テンプレ
-----------------------------------------------*/

/*ページ余白*/
.page{
  height: 100%;
  padding: 60px;
  box-sizing: border-box;
  border-top: 6px solid #8EB9DB;
}

.page_inner{
  max-width: 930px;
  margin: 0 auto;
}

#info .page_inner ol, #info .page_inner ul, #contact .page_inner ul {
	margin-left: 2em;
}

#info .page_inner ol li {
	line-height: 1.9;
}

#info .page_inner ul li, #contact .page_inner ul li {
	line-height: 1.9;
}

#info .page_inner ol li {
	list-style: decimal;
}

#info .page_inner ul li, #contact .page_inner ul li {
	list-style: disc;
}

#contact dt {
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 5px;
}

#contact dd {
	line-height: 1.9;
	margin-left: 1em;
	margin-bottom: 1.5em;
}

#contact .page_inner ul li {
	margin-bottom: 1em;
}

#contact .page_inner ul li ul li {

	margin-bottom: 0;
}

#contact .page_inner ul {
	margin-top: 1em;
	margin-bottom: 0;
	margin-left: 1.5em;
}

#contact .page_inner ul li ul {
	margin-top: 5px;
}

#contact h6 {
	/*font-size: 1.2em;*/
}

#contact h7 {
	font-weight: bold;
	display: block;
}

#contact p {
	margin: 5px 0 10px;
}

.page_inner table, .page_inner td, .page_inner th {
	border: 1px solid #ccc;
	border-collapse: collapse;
	padding: 5px;
}

.page_inner td {
	vertical-align: top;
}

.page_inner .textalign-r {
	text-align: right;
}

.tbstyle1 th {
	color: #fff;
	background-color: #1072C7;
}

.tbstyle1 td {
	padding: 7px;
}

.tbstyle1 td:not(:first-child) {
	text-align: center;
}

/*ページトップ用アイコン*/
.sm_top_icon{
  display: none;
  width: 60px;
  margin: 0 auto 15px;
}

.sm_top_icon img{
  display: block;
  width: 100%;
}

/*===============================================
  画面の横幅が599px以下
===============================================*/
@media screen and (max-width:599px){
  .sm_top_icon{
    display: block;
  }
}

/*個別ページ 見出し*/
.page_title_en{
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2.3rem;
  letter-spacing: .1em;
  margin: 0;
}

.page_title_en i{
  color: #666;
}

.page_title_ja{
  font-size: 2.8rem;
  margin: 25px auto;
  color: #444;
}

.page_header{
  margin: 40px 0 20px;
  padding: 20px;
  background-color: #f7f7f7;
  border-left: 6px solid #8EB9DB;
  font-size: 1.7rem;
}

.page_header_small{
  margin: 40px 0 20px;
  padding-bottom: 10px;
  font-size: 1.6rem;
  border-bottom: 1px solid #aaa;
}

.page_header_small:before {
  content: "\f00c";
  font-family: FontAwesome;
  margin-right: 5px;
  color: #8EB9DB;
}

/*画像*/
.page_img_100{
  margin: 40px auto;
  display: block;
  width: 100%;
}

/* 記事プレビュー用
-----------------------------------------------*/
/*タイトル部分*/
.article_header{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -ms-flex-align: center;
  margin-bottom: 40px;
}

.article_header img{
  width: 60px;
  margin-right: 15px;
  border-radius: 5px;
}

.article_header time{
  font-family: 'Roboto Condensed', sans-serif;
}

.article_header a{
  color: #333;
  font-size: 1.4rem;
}

.article_header a:hover{
  color: #0773C8;
}

/*テキスト*/
.article_body h3 {
  font-size: 2.5rem;
  line-height: 1.8;
  margin-bottom: 30px;
  color: #444;
}

.detail-body h2 {
  margin: 60px auto 20px;
  padding: 20px 25px;
  background-color: #f3f3f3;
  border-left: 6px solid #80BACC;
  color: #000;
  font-size: 26px;
  line-height: 1.5;
}

.detail-body h3 {
  margin: 60px auto 20px;
  padding: 15px 25px;
  border: 1px solid #000;
  color: #000;
  font-size: 22px;
  line-height: 1.5;
}

.detail-body h4 {
  margin: 60px auto 20px;
  padding: 10px 5px;
  border-bottom: 3px solid #000;
  color: #000;
  font-size: 20px;
  line-height: 1.5;
}

#home .detail-body h2, #home .detail-body h3, #home .detail-body h4 {
  margin: 20px 25px;
}

#article .detail-body p {
  margin: 0 25px 25px;
}

#info .detail-body p {
	margin: 0 0 25px;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 30px;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* リンクリスト
-----------------------------------------------*/
.page_link{
  margin: 30px auto;
}

.page_link li{
  margin-bottom: 8px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -ms-flex-align: center;
  padding-left: .5em;
}

.page_link li:before {
  content: "\f0da";
  font-family: FontAwesome;
  margin-right: 5px;
  color: #666;
}

/*外部リンクアイコン*/
.external_link:after {
  content: "\f08e";
  font-family: FontAwesome;
  margin-left: 5px;
  display: inline-block;
}


/* 基本ボタン
-----------------------------------------------*/
.button{
  display: block;
  margin: 20px 0;
  border: 1px solid #8EB9DB;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: #0773C8;
  font-size: 1.3rem;
}

.button:hover{
  background-color: #0773C8;
  border: 1px solid #0773C8;
  color: #fff;
  text-decoration: none;
}

/*横150px*/
.w150{
  width: 150px;
}


/* topics チャンネルタイトル
-----------------------------------------------*/
.topics_title{
  margin: 15px;
}

.topics_title > img{
  border-radius: 5px 5px 0 0;
  width: 100%;
}

.topics_title_detail{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 30px;
  box-sizing: border-box;
}

.topics_title_icon{
  margin-right: 30px;
}

.topics_title_icon img{
  width: 120px;
  border-radius: 5px;
}

.topics_title_text h2{
  font-size: 2.8rem;
}

.topics_title_text h3{
  font-size: 1.4rem;
  margin-bottom: 5px;
}

/* topicsリストページ
-----------------------------------------------*/
.topics_list_wrap{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

.topics_list_wrap a {
	display: block;
}

.topics_item{
  width: 20%;
  padding: 10px;
  color: #333;
  box-sizing: border-box;
}

/*===============================================
  画面の横幅が959px以下
===============================================*/
@media screen and (max-width:959px){
  .topics_item{
    width: 33.333%;
    padding: 10px;
    color: #333;
    box-sizing: border-box;
  }
}

.topics_item img{
  display: block;
  border-radius: 5px;
  max-width: 120px;
  width: 100%;
  margin: 0 auto;
}

.topics_item p{
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.4;
}


/* メディアリスト
-----------------------------------------------*/
.media_list{
  margin: 30px auto;
  padding-bottom: 30px;
  border-bottom: 1px solid #ddd;
}

.media_list:last-child{
  border-bottom: none;
}

.media_list dt{
  font-weight: bold;
  font-size: 1.7rem;
  margin-bottom: 10px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items:center;
  -ms-flex-align: center;
}

.media_list dt img{
  width: 60px;
  margin-right: 15px;
  border-radius: 5px;
}

.media_list dd {
  margin-left: 75px;
  font-size: 1.4rem;
  margin-bottom: 5px;
  padding-left: 1em;
}

.media_list dt.media_subtitle {
  display: block;
  font-size: 1.5rem;
  margin-left: 75px;
  margin-bottom: 7px;
}

.media_list dt p {
  margin-top: 5px;
  margin-bottom: 5px;
}

.media_list dd ul {
	margin-top: 5px;
	margin-bottom: 10px;
}

.media_list dd li {
	font-size: 1.4rem;
	line-height: 1.8em;
	margin-left: 2em;
}

.media_list .media_subtitle.mt {
	margin-top: 1.5em;
}

/* お問い合わせリスト
-----------------------------------------------*/
.inquiry_list h5{
  margin: 20px 0 10px;
}

.inquiry_list ul{
  font-size: 1.4rem;
}

.inquiry_list > ul{
  padding-left: 1em;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.inquiry_list > ul:last-child{
  border-bottom: none;
}

.second_level span{
  display: block;
  font-weight: bold;
  margin: 20px 0 3px;
}

.second_level{
  padding-left: 1em;
}

/* サイトマップ
-----------------------------------------------*/
.sitemap_wrap{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid #ddd;
}

.sitemap_wrap a{
  color: #333;
  display: block;
}

.sitemap_wrap a:hover{
  color: #0773C8;
}

.sitemap_wrap div{
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

.sitemap_wrap div > a , .sitemap_wrap div > p{
  font-size: 1.6rem;
  font-weight: bold;
  margin: 40px 0 20px;
}

.sitemap_wrap div > span {
  padding-left: 0.5em;
  font-weight: bold;
}

.sitemap_wrap div  a:before {
  content: "\f105";
  font-family: FontAwesome;
  margin-right: 5px;
  display: inline-block;
}

.sitemap_wrap div  p:before {
  content: "\f107";
  font-family: FontAwesome;
  margin-right: 5px;
  display: inline-block;
}

.sitemap_wrap div ul{
  margin: 10px 0 40px 20px;
  line-height: 1.8;
  font-size: 1.4rem;
}

.sitemap_wrap div ul > li >ul{
  margin: 10px 0 10px 20px;
}

.sitemap_wrap div ul li{
  margin-bottom: 6px;
}


/*===============================================
  画面の横幅が599px以下
===============================================*/
@media screen and (max-width:599px){
  /*シングルページ*/
  .page{
    padding: 30px 20px;
  }

  /*タイトル*/
  .page_title_en{
    font-size: 1.6rem;
  }

  .page_title_ja{
    font-size: 2.3rem;
    margin: 15px auto;
  }

  /*topics*/
  .topics_title{
    margin: 6px 6px 12px;
  }

  .topics_title_detail{
    flex-direction: column;
    padding: 20px;
  }

  .topics_title_icon{
    margin-right: 0;
    text-align: center;
    margin-bottom: 20px;
  }

  .topics_title_icon img{
    width: 60px;
  }

  .topics_title_text h2{
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-align: center;
  }

  .topics_title_text h3{
    font-size: 1.3rem;
    margin-bottom: 10px;
    text-align: center;
  }

  .topics_title_text p{
    font-size: 1.4rem;
  }

  /*サイトマップ*/
  .sitemap_wrap{
    display: block;
  }

  .sitemap_wrap div{
    width: 100%;
    padding: 0;
  }

  /*記事ページ*/
  .article_body h3{
    font-size: 2.2rem;
    line-height: 1.7;
  }

}

/*===============================================
  Slide Window
===============================================*/
.more-load {
	width: 100%;
	height: 60px;
	background-color: aqua;
}

/*.date-md {
	margin: 15px 0;
	width: 100%;
	text-align: center;
}*/

a.open-window {
	display: block;
}

/*a:hover.open-window .grid {
	background-color: coral;
}*/

.modal-window {
	display: none;
}

.modal-contents {
    background: #fff;
    position: fixed;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    z-index: 123456;
}

.load-contents {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 123457;
}

#detail-wrapper {
  	display: none;
  	background-color: #fff;
  	z-index: 10000;
  	/*width : 550px;*/
	width: 50%;
	max-width: 800px;
  	top: 0;
	right: 0;
  	bottom:0;
  	height: 100%;
  	position: absolute;
}

@media screen and (max-width: 768px) {
	#detail-wrapper {
		width: 100%;
		background-color: #fff;
	}
}

#overlay{
  	position: fixed;
  	z-index: 9999;
  	top:0;
  	left:0;
  	width:100%;
  	height:120%;
  	background-color:rgba(0,0,0,0.75);
  	display: none;
}

#detail-close {
	max-width: 800px;
	border-bottom: 1px solid #ccc;
}

#detail-article {
	/*height: 100%;*/
	overflow: auto;
	max-width: 800px;
	background-color: #fff;
}

.btn-cancel {
	border-left: 1px solid #ccc;
	cursor: pointer;
	float: right;
	padding: 15px;
}

.btn-cancel img {
	width: 18px;
	height: 18px;
}

.detail-image img {
	/*width:550px;*/
}

#detail-wrapper h3 {
	font-size:1.4em;
	line-height: 1.25em;
	padding: 20px;
}

.grid a.text-window {
	display: block;
	padding: 20px;
	text-decoration: none;
}

.grid .text-window h3 {
	margin-bottom: 7px;
}

.detail-window .daily-abst {
	word-wrap: break-word;
	margin-bottom:10px;
}

.detail-body {
	padding: 0;
}

.detail-body img {
	background-color: #fff;
	margin-bottom: 25px;
}

.detail-body p {
	line-height: 1.9em;
	margin: 0 35px 25px;
}

@media screen and (min-width: 600px) {
	.detail-body .twitter-tweet, .detail-body iframe[width="500"] {
		margin: 0 35px 25px;
	}
}

.detail-header {
	color: #999;
	font-size: 80%;
	margin: 20px 35px 0 35px;
}

.detail-header .article-editor {
	margin-right:1em;
}

.detail-header .article-editor a {
	display: inline;
}

.detail-header span.article-editor:before {
    content: "\f040";
    font-family: FontAwesome;
    margin-right: 3px;
}

.detail-header time {

}

.detail-header time:before {
    content: "\f017";
    font-family: FontAwesome;
    margin-right: 3px;
}

.detail-link a {
	border: 1px solid #ccc;
	display: block;
	font-size: 90%;
	margin: 0 auto;
	padding: 20px;
	width: 80%;
	text-align: center;
}

.detail-link a:hover {
	background-color: #eee;
	transition: background-color .2s;
}

#detail-sns {
	padding: 20px 35px 50px 35px;
}

#detail-sns .fb-like, #detail-sns .twitter-tweet {
	display: table-cell;
	vertical-align: bottom;
}

#detail-sns .fb-like {
	padding-right: 5px;
}

.detail-sns .fb-like {
	height: 18px;
	/*padding: 50px;*/

}

/* ページ先頭に戻る
-----------------------------------------------*/
#page-top {
  position: fixed;
  right: 25px;
  bottom: 40px;
  width: 80px;
  height: 80px;
  font-size: 93%;
  z-index: 120;
  display: none;
}

#page-top a {
  width:80px;
  height:80px;
  background: url(../img/common/btn_up.png) no-repeat 0px 6px;
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
  display:block;
}

#page-top a:hover {
  background-position:0px 0px;
}

/*===============================================
  画面の横幅が959px以下
===============================================*/
@media screen and (max-width:959px){

  #page-top {
    position: fixed;
    right: 25px;
    bottom: 20px;
    width: 80px;
    height: 80px;
    font-size: 93%;
    z-index: 9999;
  }

  #page-top a {
    width:80px;
    height:80px;
    background: url(../img/common/btn_up.png) no-repeat 0px 3px;
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
    display:block;
    -moz-background-size: cover;
    background-size: cover;
  }

  #page-top a:hover {
    background-position:0px 0px;
  }
}