@charset 'utf-8';
/*
style.css
*/

body {
  position: relative;
  font-size: 62.5%;
  line-height: 1.8;
  margin: 0;
}

h1,h2,p,span,li {
  font-family: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #000;
}

  /*  リンク共通アニメーション  */
a, a.btn {
  text-decoration: none;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

/*コンテンツエリアの設定*/
.inner {
  position: relative;
  max-width: 960px;
  min-width: 720px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#wrapper {
  width: 100%;
}

/*ヘッダーエリアの装飾*/
#headerContainer {
  position: relative;
  z-index: 100;
  width: 100%;
  background:#1270b3;
  box-shadow:0px 3px 5px #999;

}

#headerTopicContainer {
  position: relative;
  background: #1270b3;
}
#headerTopicContainer img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

/*サイトロゴの装飾*/
#siteID {
  font-size: 2.0em;
  color: #fff;
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 0 8px;
  padding: 12px 0 14px;
}
#siteID .small {
  color: #fff;
  font-size: 0.7em;
}



/*フッターの装飾*/
#footerContainer {
  position: relative;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  background: #1270b3;
  padding: 12px 0;
}

#copyright{
  color: #fff;
  text-align: right;
  font-size: 1.4em;
  margin: 0;
}

/*
独自スタイル
*/

#contentContainer {
  padding: 30px 0;
}

#contentContainer .contentTitle {
  font-size: 1.8em;
  font: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.tabContainer {
  width:100%;
  font-size: 1.2em;
  margin: 0 0 5em;
  font: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.tabContainer ul.controls,
.tabContainer .controls li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabContainer .controls li {
  display: inline-block;
  word-wrap: break-word;
}

.tabContainer .controls li a {
  display: block;
  padding: 0.5em 1em;
  background: #0099ff;
  color: #fff;
  border-radius: 8px 8px 0 0 ;
  behavior: url(PIE.htc);
}
.tabContainer .controls li.current a,
.tabContainer .controls li a:hover {
  color: #333;
  background: #f0f0f0;
}

/* タブ固定幅 */
.tabContainer.tabWidthFixed .controls li {
  width: 19.5%;
}

.tabContainer .tabContentsContainer>* {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1%;
}


/* サンプル記事スタイル */

.post {
  overflow: hidden;
  background: #f0f0f0;
}
.post:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.post .entry-contentContainer {
  float: right;
  width: 65%;
}
.post .entry-thumbnail {
  float: left;
  width: 30%;
  margin-top: 60px;
  margin-left: 10px;
  font: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.post .entry-thumbnail img {
  width: 100%;
  height: auto;
}

.post .entry-thumbnail_s {
  float: left;
  width: 30%;
  margin-top: 60px;
  margin-left: 10px;
  font: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.post .entry-thumbnail_s img {
  width: 100%;
  height: auto;
}

.post .entry-thumbnail_yo {
  float: left;
  width: 30%;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  font: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.post .entry-thumbnail_yo img {
  width: 95%;
  height: auto;
}

.post h1 {
  margin: -0.15em 0 0.4em;
  font-size: 1.0em;
  line-height: 1.15;
}
.post p {
  font-size: 1.1em;
}


@media only screen and (max-width:968px){
  .inner {
    max-width: 95%;
    min-width: 95%;
    width: 95%;
  }
  .tabContainer .controls li {
    width: 24%;
    overflow: hidden;
  }
  .tabContainer .controls li a {
    padding: 1em 0.5em;
    line-height: 1.2;
  }
  .tabContainer .tabContentsContainer {
    border-radius: 0 0 8px 8px;
    padding: 1em 1em 0;
  }
  .tabContainer .tabContentsContainer p {
    font-size: 1.0em;
    line-height: 1.2;
  }

  #headerContainer {
    position: relative;
  }
  #siteID {
    float: none;
    text-align: center;
  }
  #navigation {
    position: relative;
  }
  #navigation li {
    width: 25%;
    margin: 1px 0;
  }
  #navigation a {
    padding-left: 0;
    padding-right: 0;
  }
  #navigation li:not(:first-child) a {
    border-left: 1px solid rgb(35, 111, 197);
  }
  #contentContainer {
    padding: 40px 60px 0;
    margin-bottom: 40px;
  }
  .post {
    width: 98%;
    padding: 2% 0 1em;
    margin: 0 auto 1em;
  }
  .post .entry-contentContainer {
    float: none;;
    width: 100%;
  }
  .post .entry-thumbnail {
    float: none;
    max-width: 420px;
    width: 100%;
    margin: 0 auto 1.5em;
  }
  .post h1 {
    margin: 0 0 0.4em;
    font-size: 1.1em;
  }
  .post p {
    font-size: 1.0em;
  }
}