@charset "UTF-8";
/*
====================================================
　　　　　　　　　　　　フォーマット
====================================================
*/
html {
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  margin: 0;
  position: relative;
  left: 0;
}

h1, h2, h3, h4, h5, h6, th, td, li, p, a {
  font-weight: normal;
  color: #333;
}

ul {
  font-size: 0;
  margin: 0;
  padding-left: 0;
}

li {
  list-style-type: none;
}

th, td, li, p {
  font-size: 16px;
}

a {
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: .3s;
}
@media (max-width: 680px) {
  a {
    font-size: 14px;
  }
}
a:before, a:after {
  transition: .3s;
}

img {
  vertical-align: middle;
}

/*
====================================================
　　　　　　　　　　　　レスポンシブ
====================================================
*/
.pc1080 {
  display: none;
}

/*
====================================================
　　　　　　　　　　　　　ページ全体
====================================================
*/
#wrapper {
  margin: 0 auto;
  padding: 0 20px;
  min-width: 375px;
}
@media (max-width: 767px) {
  #wrapper {
    overflow: hidden;
    padding: 0 10px;
  }
}
@media (max-width: 482px) {
  #wrapper {
    overflow: hidden;
    padding: 0;
  }
}

.content {
  max-width: 1240px;
  margin: 0 auto;
}

.section {
  margin: 80px 0;
}
@media (max-width: 482px) {
  .section {
    margin: 80px 10px;
  }
}

.section1-1 {
  margin: 130px 0;
}

.section2 {
  margin: 100px 0;
}

.section3 {
  margin: 50px 0;
}

#article-pg .section {
  margin-top: 50px;
}

.content-title {
  text-align: center;
  margin-bottom: 50px;
  padding-bottom: 25px;
  position: relative;
}
.content-title:after {
  content: "";
  width: 50px;
  border: 1px solid #333;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 0px;
}
.content-title h2 {
  font-size: 24px;
  margin: 0;
}
@media (max-width: 680px) {
  .content-title h2 {
    font-size: 20px;
  }
}
.content-title h2 span {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}

#page-title {
  height: 284px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 10% center;
  margin: 72px -20px 0;
  position: relative;
}

.search-title {
  background: url(../images/search_back.jpg) no-repeat center center;
  background-size: cover;
}

.tag-title {
  background: url(../images/tag_back.jpg) no-repeat center center;
  background-size: cover;
}

#page-title:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}

.title-area {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.title-area h2 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  margin: 0;
}
.title-area p {
  display: none;
}

#article-pg {
  margin-top: 72px;
  padding-top: 50px;
}
@media (max-width: 768px) {
  #article-pg {
    margin-top: 0;
    padding-top: 25px;
  }
}

.hide {
  display: none;
}

.fixed {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  padding: 0 10px;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
}

/*
====================================================
　　　　　　　　　　　　　ヘッダー
====================================================
*/
/* ===============　共通　=============== */
header {
  padding: 0 20px;
  background-color: #fff;
}
@media (max-width: 980px) {
  header {
    padding: 0;
    position: fixed;
    z-index: 100;
    width: 100%;
    top: 0;
  }
}

#header-inner {
  position: relative;
}

#nav-upper h1, #nav-upper .nav-sns {
  display: inline-block;
}

#nav-area .nav-sns, .logo, .gNav, .nav-search, .search-icon {
  display: inline-block;
}

.nav-sns, .search-icon, .gNav {
  vertical-align: middle;
}

.nav-sns li {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 10px;
}
.nav-sns li:last-child {
  margin-right: 0;
}
.nav-sns li a {
  display: block;
  width: 100%;
  height: 100%;
  background: #e6e6e6;
  position: relative;
}
.nav-sns li a:before {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 24px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.nav-sns li a.fb:before {
  content: "\f09a";
}
.nav-sns li a.rss:before {
  content: "\f09e";
}
.nav-sns li a.fb:hover {
  background: #3B5998;
}
.nav-sns li a.rss:hover {
  background: #ff7d00;
}

.gNav ul {
  margin-left: 30px;
}
.gNav li {
  display: inline-block;
  text-align: center;
}
.gNav li a {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  padding: 4px 20px;
  position: relative;
}
.gNav li a:hover {
  color: #2286b4;
}
.gNav li a:before {
  display: block;
  content: "";
  width: 1px;
  height: 100%;
  -webkit-transform: rotate(345deg);
  -ms-transform: rotate(345deg);
  transform: rotate(345deg);
  position: absolute;
  top: 0;
}
.gNav li:last-child a:after {
  display: block;
  content: "";
  width: 1px;
  height: 100%;
  -webkit-transform: rotate(345deg);
  -ms-transform: rotate(345deg);
  transform: rotate(345deg);
  position: absolute;
  top: 0;
}
.gNav li a:before {
  border-left: 1px solid #e6e6e6;
  left: 0;
}
.gNav li:last-child a:after {
  border-right: 1px solid #e6e6e6;
  right: 0;
}
.gNav li a span {
  font-size: 12px;
}

/* ===================================== */
/* ===============　トップページナビ　=============== */
#nav-upper {
  padding: 20px 0;
  position: relative;
}
#nav-upper h1 {
  font-size: 12px;
  margin: 0;
}
#nav-upper .nav-sns {
  position: absolute;
  top: 14px;
  right: 0;
}
@media (max-width: 980px) {
  #nav-upper {
    display: none;
  }
}

#nav-lower {
  margin-bottom: 20px;
  padding: 20px 0;
  position: relative;
}
@media (max-width: 482px) {
  #nav-lower .logo {
    width: 180px;
  }
}
#nav-lower .logo img {
  width: 224px;
}
@media (max-width: 980px) {
  #nav-lower .logo img {
    width: 180px;
  }
}
@media (max-width: 482px) {
  #nav-lower .logo img {
    width: 100%;
  }
}
#nav-lower .nav-search {
  position: absolute;
  top: 27px;
  right: 0;
}
@media (max-width: 1280px) {
  #nav-lower .nav-search {
    top: -300px;
  }
}
@media (max-width: 767px) {
  #nav-lower .nav-search {
    top: -317px;
  }
}

.nav-search form.search-box {
  width: 180px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 50px;
  overflow: hidden;
  padding: 5px 0 8px 14px;
  transition: .3s;
}
@media (max-width: 980px) {
  .nav-search form.search-box {
    padding: 0;
  }
}
.nav-search form.search-box input {
  border: none;
  outline: none;
}
.nav-search form.search-box input.s {
  width: 80%;
  padding: 0;
}
@media (max-width: 980px) {
  .nav-search form.search-box input.s {
    width: 65%;
    padding: 25px 20px;
  }
}
.nav-search form.search-box input.submit {
  display: inline-block;
  width: 16px;
  cursor: pointer;
  vertical-align: middle;
  background: url(../images/search_icon.png) no-repeat;
  background-position: center;
  background-size: contain;
}
@media (max-width: 980px) {
  .nav-search form.search-box input.submit {
    background: url(../images/search_icon_sp.png) no-repeat;
    width: 18%;
    min-width: 105px;
    height: 70px;
    float: right;
    background-color: #333;
    background-position: center;
    background-size: contain;
  }
}

.sp_nav-search {
  width: 100%;
}
.sp_nav-search form.search-box {
  width: 100%;
  min-width: 345px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  overflow: hidden;
  padding: 5px 0 8px 14px;
  transition: .3s;
}
@media (max-width: 980px) {
  .sp_nav-search form.search-box {
    padding: 0;
  }
}
.sp_nav-search form.search-box input {
  border: none;
  outline: none;
}
.sp_nav-search form.search-box input.s {
  width: 80%;
  padding: 0;
  background: #f2f2f2;
}
@media (max-width: 980px) {
  .sp_nav-search form.search-box input.s {
    width: 65%;
    padding: 25px 20px;
  }
}
.sp_nav-search form.search-box input.submit {
  display: inline-block;
  width: 16px;
  cursor: pointer;
  vertical-align: middle;
  background: url(../images/search_icon.png) no-repeat;
  background-position: center;
  background-size: contain;
}
@media (max-width: 980px) {
  .sp_nav-search form.search-box input.submit {
    background: url(../images/search_icon_sp.png) no-repeat;
    width: 18%;
    min-width: 80px;
    height: 70px;
    float: right;
    background-color: #333;
    background-position: center;
    background-size: contain;
  }
}

/* ============================================== */
/* ===============　下層ページナビ　=============== */
#nav-area {
  padding: 10px 0;
  position: relative;
}
#nav-area .logo h1 {
  line-height: 1;
  margin: 0;
}
#nav-area .logo img {
  width: 200px;
}

.nav-right-area {
  float: right;
  top: 10px;
  right: 0;
}
.nav-right-area .nav-sns {
  margin: 8px 5px 0 0;
}

.search-icon {
  width: 36px;
  height: 36px;
  background: #e6e6e6;
  cursor: pointer;
  margin-top: 8px;
  position: relative;
  transition: .3s;
}
.search-icon:before {
  display: inline-block;
  content: "\f002";
  font-family: FontAwesome;
  font-size: 24px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.search-icon:hover {
  background: #333;
}

/* ============================================ */
/*
====================================================
　　　　　　　　　　ピックアップコンテンツ
====================================================
*/
.pickup-article {
  width: 100%;
  height: 480px;
}
@media (max-width: 640px) {
  .pickup-article {
    height: auto;
  }
}

.pickup-article-list li {
  margin: 0;
  float: left;
}
@media (max-width: 640px) {
  .pickup-article-list li {
    float: none;
    width: 100%;
    height: 280px;
  }
}

.first-article, .ohter-article {
  overflow: hidden;
  position: relative;
}

.first-article {
  width: 62%;
  height: 480px;
}
@media (max-width: 482px) {
  .first-article {
    height: 280px;
  }
}

.ohter-article {
  width: 38%;
  height: 240px;
}

.pickup-article-list a {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}
@media (max-width: 482px) {
  .pickup-article-list a {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
  }
}

.pickup-area {
  width: 100%;
  height: 100%;
  background-color: transparent;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}

.first-article .pickup-area {
  background: -webkit-linear-gradient(transparent 50%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.5));
  background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.5));
}

.ohter-article .pickup-area {
  background: -webkit-linear-gradient(transparent 35%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.5));
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.5));
}

.pickup-area:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.pickup-area-detail {
  position: absolute;
}

.first-article .pickup-area-detail {
  padding: 0 30px;
  bottom: 30px;
}
@media (max-width: 482px) {
  .first-article .pickup-area-detail {
    padding: 0 10px;
    position: absolute;
    bottom: 20px;
  }
}

.ohter-article .pickup-area-detail {
  padding: 0 20px;
  bottom: 20px;
}

.pickup-area-detail h3, .pickup-area-detail p {
  color: #fff;
}
.pickup-area-detail h3 {
  font-weight: bold;
}

.first-article .pickup-area-detail h3 {
  font-size: 24px;
  margin-bottom: 40px;
}
@media (max-width: 482px) {
  .first-article .pickup-area-detail h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 20px;
  }
}

.ohter-article .pickup-area-detail h3 {
  font-size: 18px;
  margin: 0 0 30px;
}

.pickup-area-detail p.span {
  display: inline-block;
  line-height: 1;
  cursor: default;
  margin: 0;
  position: absolute;
  bottom: 0;
}

.first-article .pickup-area-detail p.span {
  font-size: 16px;
}

.ohter-article .pickup-area-detail p.span {
  font-size: 12px;
}

.pickup-area-detail p.border-left {
  border-left: 1px solid #fff;
}

.first-article .pickup-area-detail p.border-left {
  margin-left: 95px;
  padding-left: 15px;
}

.ohter-article .pickup-area-detail p.border-left {
  margin-left: 70px;
  padding-left: 10px;
}

.next-page {
  width: 100%;
  margin-top: 42px;
}

/*
====================================================
　　　　　　　　　　 　メインコンテンツ
====================================================
*/
#main-body {
  display: block;
}
@media (max-width: 980px) {
  #main-body {
    margin-top: 62px;
  }
}

#main-article {
  position: relative;
}

.main-article-area {
  width: 72%;
  max-width: 880px;
}

ul.person-list li {
  margin-bottom: 30px;
}

/*
====================================================
　　　　　　　　　　　 　記事リスト
====================================================
*/
.article-list li {
  display: inline-block;
  vertical-align: top;
}
.article-list li.general-article {
  width: 33.33333%;
  margin: 0 0 40px;
}
@media (max-width: 640px) {
  .article-list li.general-article {
    width: 47%;
    vertical-align: top;
    margin: 0 5px 30px;
  }
}

.article-list-inner {
  width: 90%;
}

.article-list li.general-article:nth-child(3n-1) .article-list-inner {
  margin: 0 auto;
}
.article-list li.general-article:nth-child(3n) .article-list-inner {
  margin: 0 0 0 auto;
}
.article-list a {
  display: block;
}

.thumbnail {
  width: 100%;
  height: 150px;
  background-size: cover;
  background-position: center center;
  position: relative;
  background-color: #f5f5f5;
}
@media (max-width: 482px) {
  .thumbnail {
    height: 104px;
  }
}

.mask {
  opacity: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  transition: .3s;
  position: absolute;
  top: 0;
  left: 0;
}

.article-list-inner a:hover .mask {
  opacity: 1;
}

.mask-inner {
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  position: relative;
}

.mask-text {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mask-inner span, .mask-inner p {
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  transition: .3s;
}
.mask-inner span {
  display: inline-block;
  position: relative;
  top: -10px;
}
.mask-inner p {
  font-weight: bold;
  margin: 4px 0 0;
  position: relative;
  bottom: -10px;
}

.article-list-inner a:hover .mask span {
  top: 0;
}
.article-list-inner a:hover .mask p {
  bottom: 0;
}

.article-detail {
  position: relative;
}

.article-list li.general-article .article-detail p.span {
  font-size: 12px;
}
@media (max-width: 980px) {
  .article-list li.general-article .article-detail p.span {
    font-size: 11px;
  }
}
@media (max-width: 768px) {
  .article-list li.general-article .article-detail p.span {
    font-size: 12px;
  }
}
@media (max-width: 482px) {
  .article-list li.general-article .article-detail p.span {
    font-size: 10px;
  }
}

.article-detail p.category {
  color: #fff;
  margin: 0;
  padding: 4px 10px;
  transition: .3s;
  position: absolute;
  top: -38px;
  left: 0;
  background: #2286B4;
}
.article-detail p.parallel {
  background: #0071bc;
}
.article-detail p.independent {
  background: #ef6318;
}
.article-detail p.place {
  background: #00bc7a;
}
.article-detail p.knowledge {
  background: #c91f00;
}
.article-detail p.feature {
  background: #efbc48;
}

.article-list-inner a:hover .article-detail p.category {
  background: #333;
}

.article-detail p.time {
  color: #808080;
  margin: 24px 0 5px;
}
.article-detail h3 {
  margin: 0;
}

.article-list li.general-article .article-detail h3 {
  font-size: 18px;
}

/*
====================================================
　　　　　　　　　　　 ページネーション
====================================================
*/
.pagenation {
  text-align: center;
  margin: 30px 0;
}
@media (max-width: 482px) {
  .pagenation {
    margin: 50px 0;
  }
}
.pagenation li {
  display: inline-block;
  width: 40px;
  height: 40px;
  font-size: 14px;
  line-height: 2.8;
  margin: 0 5px !important;
}
.pagenation li.next {
  margin: 0 0 0 20px !important;
}
.pagenation li.prev {
  margin: 0 20px 0 0 !important;
}
.pagenation a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 16px;
  line-height: 2.5;
  background: #f2f2f2;
  border: 1px solid #f2f2f2;
}
.pagenation a:hover {
  background: #e6e6e6;
  border: 1px solid #e6e6e6;
}

/*
====================================================
　　　　　　　　　　　 パンくずリスト
====================================================
*/
.breadcrumbs, .breadcrumbs-ts {
  font-size: 12px;
  padding: 5px 0;
}
@media (max-width: 768px) {
  .breadcrumbs, .breadcrumbs-ts {
    display: none;
  }
}
@media (max-width: 480px) {
  .breadcrumbs, .breadcrumbs-ts {
    padding: 5px 15px;
  }
}
.breadcrumbs span, .breadcrumbs-ts span {
  font-size: 12px;
  margin: 3px;
}
.breadcrumbs span:first-child, .breadcrumbs-ts span:first-child {
  margin: 3px 3px 3px 0;
}
.breadcrumbs i.fa-home, .breadcrumbs-ts i.fa-home {
  font-size: 14px;
}
.breadcrumbs span.gray, .breadcrumbs-ts span.gray {
  color: #333;
}
.breadcrumbs span a, .breadcrumbs-ts span a {
  color: #5c5c5c;
}

.breadcrumbs-ts {
  display: none;
  text-align: left;
  font-size: 10px;
  background: #fafafa;
  padding: 5px 10px;
}
.breadcrumbs-ts span {
  font-size: 10px;
}
@media (max-width: 768px) {
  .breadcrumbs-ts {
    display: block;
  }
}

/*
====================================================
　　　　　　　　　　　 　　検索窓
====================================================
*/
.search-btn-area {
  display: none;
  background: #fff;
  margin-top: 72px;
  padding: 5px 10px;
  position: absolute;
  top: 0;
  right: 0;
}

/*@-moz-document url-prefix() {
	.search-btn-area{
		margin-top: 72.8px;
	}
}*/
:placeholder-shown, ::-webkit-input-placeholder {
  color: #ccc;
}

/* Google Chrome, Safari, Opera 15+, Android, iOS */
/* Firefox 18- */
:-moz-placeholder, ::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}

/* Firefox 19+ */
/* IE 10+ */
:-ms-input-placeholder {
  color: #ccc;
}

.search-btn-area:placeholder-shown, .search-btn-area::-webkit-input-placeholder {
  color: #808080;
}
.search-btn-area:-moz-placeholder, .search-btn-area::-moz-placeholder {
  color: #808080;
  opacity: 1;
}
.search-btn-area:-ms-input-placeholder {
  color: #808080;
}

/* Google Chrome, Safari, Opera 15+, Android, iOS */
/* Firefox 18- */
/* Firefox 19+ */
/* IE 10+ */
/*
====================================================
　　　　　　　　　　　 　サイドバー
====================================================
*/
/* ===============　共通　=============== */
.side-content {
  margin: 50px 0 0;
}
@media (max-width: 640px) {
  .side-content {
    margin: 50px 10px 0;
  }
}

.side-content-title {
  text-align: center;
  margin-bottom: 30px;
}
.side-content-title h2 {
  font-size: 20px;
  margin: 0;
}

/* ==================================== */
#sidebar {
  width: 280px;
  position: absolute;
  top: 0;
  right: 0;
}

/* ===============　X-book　=============== */
.ad-area img {
  width: 100%;
}

/* ======================================= */
/* ===============　RANKING　=============== */
.ranking-title {
  margin-bottom: 25px;
}
.ranking-title li {
  display: inline-block;
  width: 50%;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #e6e6e6;
  cursor: pointer;
  padding: 10px 0;
}
.ranking-title li.select {
  color: #fff;
  background: #333;
  border: 1px solid #333;
  position: relative;
}
.ranking-title li.select:after {
  content: "";
  border: 20px solid transparent;
  border-top: 10px solid #333;
  position: absolute;
  bottom: -28px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.ranking-detail .wpp-list {
  counter-reset: posts-rank;
}
.ranking-detail .wpp-list li {
  margin: 25px 0;
  transition: .3s;
  position: relative;
}
.ranking-detail .wpp-list li:before {
  counter-increment: posts-rank;
  content: counter(posts-rank);
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: #333;
  padding: 5px 8px;
  position: absolute;
  top: 0;
  left: 0;
}
.ranking-detail .wpp-list li a {
  display: block;
  font-size: 13px;
}
.ranking-detail .wpp-list li:hover a {
  color: #2286b4;
}

.sidebar-thumbnail {
  display: inline-block;
  width: 120px;
  height: 75px;
}

.ranking-detail .wpp-list li a img {
  margin: 0 10px 0 0;
  width: 100%;
  max-width: 127px;
  min-width: 120px;
  min-height: 80px;
  background-color: #f5f5f5;
}
@media (max-width: 768px) {
  .ranking-detail .wpp-list li a img {
    max-width: 25%;
    min-width: 80px;
    min-height: 74px;
  }
}
@media (max-width: 483px) {
  .ranking-detail .wpp-list li a img {
    max-width: 127px;
    min-height: 80px;
  }
}

/* ======================================== */
/* ===============　TAG LIST　=============== */
.tag-list li {
  display: inline-block;
  margin: 0 8px 8px 0;
}
.tag-list li a {
  display: block;
  font-size: 14px;
  background: #f2f2f2;
  padding: 4px 8px;
}
.tag-list li a:hover {
  background: #e6e6e6;
}

/* ========================================= */
/*
====================================================
　　　　　　　　　　　 　ノマドエリア
====================================================
*/
.nomad-inner img {
  width: 100%;
}

/*

====================================================
　　　　　　　　　　　 　著者ボックス
====================================================
*/
#profile-box {
  margin: 5px 10px;
  padding: 10px 10px;
  font-weight: bold;
  border: solid 2px #f2f2f2;
  background: white;
}
@media (max-width: 980px) {
  #profile-box {
     margin: 5px 7px;
     padding: 8px 5px;
  }
}

#profile-box-picture {
  float: left;
  width: 27%;
  margin-left: 10px;
}


#profile-box-text {
  float: right;
  margin-left: 10px;
}

#profile-box-text-with-pic {
  float: right;
  width:70%;
  margin-left: 10px;
}

@media (max-width: 482px) {
  #profile-box-picture {
    float: left;
    width: 100%;
    margin: 0px auto;
  }
  #profile-box-picture img{
    height: auto !important;
    margin: auto !important;
    max-width: 100% !important;
    width: auto !important;
    display: block !important;
  }

#profile-box-text-with-pic {
  float: right;
  width:100%;
  margin-left: 0px;
}
}

.box1 p {
  margin: 0;
  padding: 0;
}

.clearfix {
  display: inline-table;
}
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/*

====================================================
　　　　　　　　　　　 　　記事詳細
====================================================
*/
.article-summary {
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 30px;
}
.article-summary p.span {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  color: #808080;
  cursor: default;
  margin: 0;
}
@media (max-width: 680px) {
  .article-summary p.span {
    font-size: 10px;
  }
}

.author {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  color: #808080;
  cursor: default;
  margin: 0;
}

.article-summary p.border-left {
  border-left: 1px solid #808080;
  margin-left: 10px;
  padding-left: 10px;
}
.article-summary h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0 25px;
}
@media (max-width: 768px) {
  .article-summary h1 {
    font-size: 20px;
  }
}

.author:before {
  display: inline-block;
  content: "\f007";
  font-family: FontAwesome;
  font-size: 16px;
  color: #808080;
  vertical-align: middle;
  margin-right: 10px;
}

.article-sns {
  margin-top: 30px;
}
.article-sns li {
  display: inline-block;
  margin: 0 5px;
}
.article-sns li:first-child {
  margin: 0 5px 0 0;
}
@media (max-width: 680px) {
  .article-sns li iframe.hatena-bookmark-button-frame {
    width: 40px !important;
  }
}
.article-sns li a {
  display: block;
  padding: 20px 60px;
  position: relative;
}
@media (max-width: 680px) {
  .article-sns li a {
    padding: 20px;
  }
}
.article-sns li a.tw {
  background: #1da1f2;
}
.article-sns li a:hover.tw {
  background: #5ab8f2;
}
.article-sns li a.fb {
  background: #3b5998;
}
.article-sns li a:hover.fb {
  background: #617398;
}
.article-sns li a.line {
  background-color: #00b900;
}
.article-sns li a:hover.line {
  background: #33c733;
}
.article-sns li a.hatena {
  background: #00a4de !important;
}
.article-sns li a:hover.hatena {
  background: #33b6e5 !important;
}
.article-sns li a:before {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 20px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.article-sns li a.tw:before {
  content: "";
}
.article-sns li a.fb:before {
  content: "";
}
.article-sns li a.line:before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(../images/line_icon.png);
  background-size: cover;
}

.description {
  margin: 0 0 80px;
}

@media (max-width: 680px) {
  ul#menu-sitemap-category li, ul#menu-sitemap-person li, ul#menu-sitemap-page li {
    width: 100%;
  }
  ul#menu-sitemap-category li a, ul#menu-sitemap-person li a, ul#menu-sitemap-page li a {
    color: #2286b4;
    font-size: 14px;
  }
}

.article-body {
  margin-top: 30px;
}
.article-body h2 {
  font-size: 24px;
  font-weight: bold;
  background: #f2f2f2;
  margin: 80px 0 40px;
  padding: 15px 20px;
}
@media (max-width: 680px) {
  .article-body h2 {
    font-size: 18px;
  }
}
.article-body h3 {
  font-size: 22px;
  font-weight: bold;
  margin: 40px 0 20px;
  padding-left: 10px;
  border-left: 15px solid #f2f2f2;
}
@media (max-width: 680px) {
  .article-body h3 {
    font-size: 16px;
    margin: 40px 0 20px;
  }
}
.article-body h4 {
  font-size: 16px;
  border-bottom: 1px solid #9e9d9d;
  margin: 30px 0 15px;
  padding-bottom: 5px;
  font-weight: bold;
}
@media (max-width: 680px) {
  .article-body h4 {
    font-size: 14px;
  }
}
.article-body h5 {
  font-size: 16px;
  margin: 30px 0 15px;
  padding-bottom: 5px;
  font-weight: bold;
}
@media (max-width: 680px) {
  .article-body h5 {
    font-size: 14px;
    margin: 8px 0 4px 0;
    font-weight: bold;
  }
}
.article-body p {
  font-size: 16px;
  line-height: 1.7;
  margin: 15px 0;
}
@media (max-width: 680px) {
  .article-body p {
    font-size: 14px;
    word-wrap: break-word;
  }
}
.article-body a {
  color: #2286b4;
}
.article-body a:hover {
  color: #7ab6d2;
}
.article-body img {
  height: auto;
  margin: 15px 0;
  width: 100%;
}
.article-body img.img-80 {
  width: 80%;
}
.article-body img.img-50 {
  width: 50%;
}
.article-body img.img-30 {
  width: 30%;
}
.article-body ul, .article-body ol {
  line-height: 1.7;
  padding-left: 25px;
}
.article-body ul li {
  list-style-type: disc;
}
.article-body ol li {
  list-style-type: decimal;
}
@media (max-width: 680px) {
  .article-body ul li, .article-body ol li {
    font-size: 14px;
  }
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}
.article-body table th {
  width: 120px;
  font-weight: bold;
  text-align: center;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  padding: 15px 20px;
}
.article-body table td {
  text-align: left;
  border: 1px solid #e6e6e6;
  padding: 15px 20px;
}

@media (max-width: 680px) {
  .article-body table{
    width:100%;
  }
  .article-body table tr td.sp_disp_none,.article-body table tr th.sp_disp_none{
    display:none;
  }
  .scroll{
    overflow: auto;　　　　/*tableをスクロールさせる*/
    white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
  }
  .scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
    height: 5px;
  }
  .scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
    background: #F1F1F1;
  }
  .scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
    background: #BCBCBC;
  }
}


.article-body blockquote {
    position: relative;
    padding: 10px 15px 10px 60px;
    margin:0 0 0 0;
    box-sizing: border-box;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #2286b4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

.article-body blockquote:before{
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #2286b4;
    font-size: 30px;
    line-height: 1;
}

.article-body blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

.article-body blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

.content_lead {
  background: rgba(63, 158, 197, 0.10);
  padding: 5px 10px;
  margin: 5px 0px;
  border-radius: 8px;
}

.article-series-toc-title {
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  margin: 15px 0px;
}

.article-series-toc {
  background: #f3f8fb;
  border-radius: 10px;
  border: 3px double #cbedfd;
  margin: 15px 0;
  padding: 10px 25px;
}
.article-series-toc ul li, .article-series-toc ul ol {
  list-style-type: disc;
  margin-bottom: 9px;
}
.article-series-toc ul li a, .article-series-toc ul ol a {
  text-decoration: underline;
}
.article-series-toc ul li a:hover, .article-series-toc ul ol a:hover {
  text-decoration: none;
}

.single-page .tag-list {
  margin: 100px 0 30px;
}

/* ===============　関連記事　=============== */
#main-article .yarpp-related {
  margin: 50px 0 0;
}

.yarpp-related p.related-title {
  font-size: 20px;
  margin: 0 0 20px;
}

.related-post li {
  display: inline-block;
  width: 33.33333%;
  vertical-align: top;
  margin: 0 0 40px;
}
@media (max-width: 640px) {
  .related-post li {
    width: 45%;
    vertical-align: top;
    margin: 0 11px 40px;
  }
}
@media (max-width: 482px) {
  .related-post li {
    width: 44%;
    vertical-align: top;
    margin: 0 11px 40px;
  }
}
@media (max-width: 386px) {
  .related-post li {
    margin: 0 10px 40px;
  }
}
.related-post li:nth-child(3n-1) .article-list-inner {
  margin: 0 auto;
}
.related-post li:nth-child(3n) .article-list-inner {
  margin: 0 0 0 auto;
}
.related-post .article-detail p.category {
  font-size: 12px;
}
.related-post .article-detail h3 {
  font-size: 18px;
  font-weight: normal;
}

/* ======================================== */
/*
====================================================
　　　　　　　　　　　 　404ページ
====================================================
*/
.not-found-title {
  background: url(../images/notfound_back.jpg) no-repeat center center;
  background-size: cover;
}

.not-found {
  text-align: center;
}
.not-found a {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  background: #333;
  border: 1px solid #333;
  margin-top: 30px;
  padding: 20px 80px;
}
.not-found a:hover {
  background: #808080;
  border: 1px solid #808080;
}
@media (max-width: 460px) {
  .not-found p {
    font-size: 12px;
  }
}

/*
====================================================
　　　　　　　　　　　　　フッター
====================================================
*/
footer {
  text-align: center;
  background: #f2f2f2;
  margin: 40px -20px 0;
  padding: 80px 0 30px;
}
@media (max-width: 768px) {
  footer {
    margin: 0;
    padding: 40px 0 30px;
  }
}

#footer-area .logo img {
  width: 320px;
}
@media (max-width: 980px) {
  #footer-area .logo img {
    width: 240px;
  }
}
#footer-area .nav-sns {
  margin: 50px 0 30px;
}
@media (max-width: 480px) {
  #footer-area .nav-sns ul li a.fb {
    background-color: #3B5998;
  }
}
@media (max-width: 480px) {
  #footer-area .nav-sns ul li a.rss {
    background-color: #ff7d00;
  }
}

#footer-nav li {
  display: inline-block;
  margin: 0 12px;
}
@media (max-width: 480px) {
  #footer-nav li {
    display: block;
    padding: 10px 0;
  }
}
#footer-nav li a {
  font-size: 14px;
}
#footer-nav li a:hover {
  color: #2286b4;
}

#page-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 40px;
  bottom: 30px;
}
#page-top a {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #808080;
  border-radius: 50%;
  background-color: #808080;
}
#page-top a:before {
  display: inline-block;
  content: "\f106";
  font-family: FontAwesome;
  font-size: 20px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#page-top a:hover {
  background: #808080;
}
#page-top a:hover:before {
  color: #fff;
}

#copyright {
  margin-top: 50px;
}
#copyright p {
  font-size: 12px;
  color: #808080;
  margin: 0;
}

/*
====================================================
　　　　　　　　　　　 　運営会社
====================================================
*/
.company-title {
  background: url(../images/company_back.jpg) no-repeat center center;
  background-size: cover;
}

#company table {
  border-collapse: collapse;
}
#company table th {
  text-align: left;
  padding: 20px 30px;
}
#company table th p {
  font-weight: bold;
  margin: 0;
}
#company table td {
  padding: 15px 15px 15px 25px;
}

/*
====================================================
　　　　　　　　　　　 　ノマド一覧
====================================================
*/
.nomad-title {
  background: url(../images/nomad_back.jpg) no-repeat;
  background-size: cover;
}

.person-thumbnail, .person-detail {
  display: inline-block;
}

.person-thumbnail {
  width: 200px;
  height: 200px;
  vertical-align: top;
  margin-right: 30px;
}
.person-thumbnail img {
  width: 100%;
  max-width: 242px;
  height: 100%;
}

.person-detail {
  width: 72%;
}
.person-detail p.name {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px;
}
@media (max-width: 768px) {
  .person-detail p.name {
    text-align: center;
  }
}
.person-detail p.introduction {
  margin: 0;
}

/*
====================================================
　　　　　　　　　　　 　著者一覧
====================================================
*/
.author-title {
  background: url(../images/author_back.jpg) no-repeat center center;
  background-size: cover;
}

.authors {
  margin-bottom: 30px;
}

/*
====================================================
　　　　　　　　　　　 　利用規約
====================================================
*/
.rules-title {
  background: url(../images/rules_back.jpg) no-repeat center center;
  background-size: cover;
}

.authors {
  margin-bottom: 30px;
}

/*
====================================================
　　　　　　　　　　　プライバシーポリシー
====================================================
*/
.privacy-title {
  background: url(../images/privacypolicy_back.jpg) no-repeat center center;
  background-size: cover;
}

.chapter {
  margin: 80px 0 0;
}
.chapter p.chapter-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 30px;
}
.chapter p.chapter-detail {
  font-size: 14px;
  margin: 10px 0;
}

.chapter-first {
  margin: 5px 10px;
}

/*
====================================================
　　　　　　　　　　　　サイトマップ
====================================================
*/
.sitemap-title {
  background: url(../images/sitemap_back.jpg) no-repeat center center;
  background-size: cover;
}

.sitemap-area-mt {
  margin-top: 80px;
}

.sitemap-area {
  margin: 5px 10px;
}
.sitemap-area p.sitemap-btitle {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #333;
  margin: 0 0 30px;
  padding-bottom: 5px;
}
.sitemap-area p.sitemap-stitle {
  font-weight: bold;
  margin: 25px 0 15px;
}
.sitemap-area li {
  display: inline-block;
}
.sitemap-area li a {
  display: block;
  background: #f2f2f2;
  margin: 0 10px 10px 0;
  padding: 10px 20px;
}
@media (max-width: 680px) {
  .sitemap-area li a {
    margin: 0 10px 5px 0;
  }
}
.sitemap-area li a:hover {
  background: #e6e6e6;
}

/*
====================================================
　　　　　　　　　　　　お問い合わせ
====================================================
*/
#contact {
  margin: 5px 0;
  padding: 0 10px;
  overflow-x: hidden;
}

.contact-title {
  background: url(../images/contact_back.jpg) no-repeat center center;
  background-size: cover;
}

form {
  max-width: 800px;
  margin: 0 auto;
}

.form-group {
  margin-top: 30px;
}
.form-group:first-child {
  margin-top: 0;
}
.form-group p.form-content-title {
  font-weight: bold;
  margin: 0 0 10px;
}
.form-group p.form-content-title span.required {
  display: inline-block;
  font-size: 10px;
  color: #fff;
  background: #333;
  vertical-align: text-bottom;
  margin-left: 10px;
  padding: 2px 4px;
}

.form-input-box {
  width: 100%;
}
.form-input-box select, .form-input-box input, .form-input-box textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

.submit-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

select {
  text-indent: 0.01px;
  text-overflow: '';
}
select::-ms-expand {
  display: none;
}

.form-input-box select, .form-input-box input, .form-input-box textarea {
  width: 100%;
  font-size: 16px;
  color: #333;
  box-sizing: border-box;
  background: #e6e6e6;
  border: 1px solid #e6e6e6;
  border-radius: 0;
}
.form-input-box select:placeholder-shown, .form-input-box input:placeholder-shown, .form-input-box textarea:placeholder-shown, .form-input-box select::-webkit-input-placeholder, .form-input-box input::-webkit-input-placeholder, .form-input-box textarea::-webkit-input-placeholder {
  color: #b3b3b3;
}

/* Google Chrome, Safari, Opera 15+, Android, iOS */
/* Firefox 18- */
.res-global-nav .nav-search:-moz-placeholder, .res-global-nav .nav-search::-moz-placeholder {
  color: #b3b3b3;
  opacity: 1;
}
.res-global-nav .nav-search:-ms-input-placeholder {
  color: #b3b3b3;
}

/* Firefox 19+ */
/* IE 10+ */
.form-input-box select, .form-input-box input {
  height: 72px;
  padding: 0 15px;
}
.form-input-box select {
  background-image: url(../images/form_allow.png);
  background-repeat: no-repeat;
  background-position: 97% center;
  background-size: 10px;
  cursor: pointer;
}
.form-input-box select.wpcf7c-conf {
  background-image: none;
  cursor: default;
}
.form-input-box textarea {
  height: 240px;
  padding: 20px 15px;
}

.submit-area {
  text-align: center;
  margin-top: 50px;
  position: relative;
}

.submit-btn {
  font-size: 16px;
  color: #fff;
  background: #333;
  border: 1px solid #333;
  border-radius: 0;
  padding: 20px 100px;
  cursor: pointer;
  transition: .3s;
}
.submit-btn:hover {
  background: #808080;
  border: 1px solid #808080;
}

.wpcf7-mail-sent-ok {
  display: none !important;
}

/*
====================================================
　　　　　　　　　　　　サンクスページ
====================================================
*/
.thanks-title {
  background: url(../images/contact_back.jpg) no-repeat center center;
  background-size: cover;
}

#thanks {
  text-align: center;
}
#thanks a {
  display: inline-block;
  font-size: 16px;
  color: #fff;
  background: #333;
  border: 1px solid #333;
  margin-top: 30px;
  padding: 20px 80px;
  transition: .3s;
}
#thanks a:hover {
  background: #808080;
  border: 1px solid #808080;
}

/*
====================================================
　　　　　　　　　　　　レスポンシブ
====================================================
*/
.pc1080, .btnMenu, .res-nav {
  display: none;
}

/*
=====================================================================
=====================================================================
PCレスポンシブ（〜1280px）
=====================================================================
=====================================================================
*/
@media screen and (max-width: 1280px) {
  /*
  ====================================================
  　　　　　　　　　　　　レスポンシブ
  ====================================================
  */
  .pc1280 {
    display: none;
  }

  .pc1080 {
    display: block;
  }

  /*
  ====================================================
  　　　　　　　　　　　　　ページ全体
  ====================================================
  */
  .content {
    max-width: 1040px;
  }

  /*
  ====================================================
  　　　　　　　　　　　　　ヘッダー
  ====================================================
  */
  /* ===============　トップページナビ　=============== */
  .up-nav-search {
    display: inline-block;
    position: absolute;
    top: 14px;
    right: 100px;
  }

  .nav-search form.search-box {
    display: inline-block;
  }

  #f-global-nav {
    position: absolute;
    top: 20px;
    right: 8px;
  }

  #nav-lower {
    margin-bottom: 0;
    padding: 30px 0 40px;
  }
}
@media screen and (max-width: 1280px) and (max-width: 980px) {
  #nav-lower {
    padding: 15px 0;
  }
}
@media screen and (max-width: 1280px) and (max-width: 482px) {
  #nav-lower {
    padding: 15px 10px;
  }
}

@media screen and (max-width: 1280px) {
  /* ============================================== */
  /* ===============　下層ページナビ　=============== */
  #nav-area .logo img {
    width: 180px;
  }

  #global-nav li a span {
    font-size: 10px;
  }

  /* ============================================ */
  /*
  ====================================================
  　　　　　　　　　　 　メインコンテンツ
  ====================================================
  */
  .article-list-inner {
    width: 94%;
  }
}
@media screen and (max-width: 1280px) and (max-width: 640px) {
  .article-list-inner {
    width: 100%;
  }
}

@media screen and (max-width: 1280px) {
  /*
  ====================================================
  　　　　　　　　　　　 　記事リスト
  ====================================================
  */
  .article-list li.general-article .article-detail h3 {
    font-size: 16px;
  }

  /*
  ====================================================
  　　　　　　　　　　　 　サイドバー
  ====================================================
  */
  #sidebar {
    width: 232px;
  }

  /* ===============　RANKING　=============== */
  .ranking-detail .wpp-list li a {
    font-size: 11px;
  }
}
@media screen and (max-width: 1280px) and (max-width: 768px) {
  .ranking-detail .wpp-list li a {
    font-size: 14px;
  }
}
@media screen and (max-width: 1280px) {
  .ranking-detail .wpp-list li a img {
    width: 100px;
    height: auto;
  }
}
@media screen and (max-width: 1280px) and (max-width: 768px) {
  .ranking-detail .wpp-list li a img {
    width: 100%;
  }
}

@media screen and (max-width: 1280px) {
  /* ======================================== */
  /*
  ====================================================
  　　　　　　　　　　　 　記事詳細
  ====================================================
  */
  /* ===============　関連記事　=============== */
  .related-post .article-detail p.span {
    font-size: 12px;
  }
}
@media screen and (max-width: 1280px) and (max-width: 414px) {
  .related-post .article-detail p.span {
    font-size: 10px;
  }
}
@media screen and (max-width: 1280px) {
  .related-post .article-detail h3 {
    font-size: 16px;
  }

  /* ======================================== */
  /*
  ====================================================
  　　　　　　　　　　　 　ノマド一覧
  ====================================================
  */
  .person-thumbnail {
    width: 180px;
    height: 180px;
  }
}
/*
=====================================================================
=====================================================================
PCレスポンシブ（〜1080px）
=====================================================================
=====================================================================
*/
@media screen and (max-width: 1080px) {
  /*
  ====================================================
  　　　　　　　　　　　　　ページ全体
  ====================================================
  */
  #page-title {
    margin: 70px -20px 0;
  }

  /*
  ====================================================
  　　　　　　　　　　　　　ヘッダー
  ====================================================
  */
  /* ===============　下層ページナビ　=============== */
  #global-nav ul {
    margin-left: 18px;
  }
  #global-nav li a {
    padding: 4px 18px;
  }

  .nav-right-area .nav-sns {
    margin: 10px 3px 0 0;
  }
  .nav-right-area .nav-sns li {
    width: 32px;
    height: 32px;
    margin-right: 8px;
  }
  .nav-right-area .nav-sns li:last-child {
    margin-right: 0;
  }
  .nav-right-area .nav-sns li a:before {
    font-size: 20px;
  }

  .search-icon {
    width: 32px;
    height: 32px;
    margin-top: 10px;
  }
  .search-icon:before {
    font-size: 20px;
  }

  /* ============================================ */
  /*
  ====================================================
  　　　　　　　　　　 　メインコンテンツ
  ====================================================
  */
  /*
  ====================================================
  　　　　　　　　　　　 　記事リスト
  ====================================================
  */
  .article-list li.general-article .article-detail h3 {
    font-size: 14px;
  }

  /*
  ====================================================
  　　　　　　　　　　　 　サイドバー
  ====================================================
  */
  #sidebar {
    width: 24%;
  }

  /*
  ====================================================
  　　　　　　　　　　　 　記事詳細
  ====================================================
  */
  /* ===============　関連記事　=============== */
  .related-post .article-detail h3 {
    font-size: 14px;
  }

  /*
  ====================================================
  　　　　　　　　　　　 　ノマド一覧
  ====================================================
  */
  .person-thumbnail {
    margin-right: 4%;
  }

  .person-detail {
    width: 68%;
  }
}
/*
=====================================================================
=====================================================================
PCレスポンシブ（〜980px）
=====================================================================
=====================================================================
*/
@media screen and (max-width: 980px) {
  /*
  ====================================================
  　　　　　　　　　　　　レスポンシブ
  ====================================================
  */
  .res-nav {
    display: block;
  }

  /*
  ====================================================
  　　　　　　　　　　　　　ページ全体
  ====================================================
  */
  #page-title {
    margin: 72px -20px 0;
  }

  /*
  ====================================================
  　　　　　　　　　　　　　ヘッダー
  ====================================================
  */
  /* ===============　トップページナビ　=============== */
  #nav-upper h1 {
    font-size: 10px;
  }

  #f-global-nav {
    display: none;
  }

  .btnMenu {
    display: block;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    top: 15px;
    right: 4%;
  }
}
@media screen and (max-width: 980px) and (max-width: 980px) {
  .btnMenu {
    width: 32px;
    height: 32px;
  }
}
@media screen and (max-width: 980px) and (max-width: 482px) {
  .btnMenu {
    top: 15px;
    right: 5px;
  }
}
@media screen and (max-width: 980px) and (max-width: 375px) {
  .btnMenu {
    top: 15px;
    right: 5px;
  }
}
@media screen and (max-width: 980px) and (max-width: 319px) {
  .btnMenu {
    display: none;
  }
}
@media screen and (max-width: 980px) {
  .btnMenu span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    transition: .3s;
  }
  .btnMenu span:before, .btnMenu span:after {
    content: '';
    width: 100%;
    height: 100%;
    background: #333;
    position: absolute;
    left: 0;
    transition: .3s;
  }
  .btnMenu span:before {
    top: -7px;
  }
  .btnMenu span:after {
    bottom: -7px;
  }
  .btnMenu.btn-rotate {
    cursor: pointer;
  }
  .btnMenu.btn-rotate span {
    background: rgba(0, 0, 0, 0.01);
  }
  .btnMenu.btn-rotate span:before {
    background: #333;
    top: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .btnMenu.btn-rotate span:after {
    background: #333;
    bottom: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .res-nav {
    width: 50%;
    height: 100vh;
    box-sizing: border-box;
    background: #fff;
    z-index: 9998;
    position: fixed;
    top: 70px;
    right: -980px;
  }

  .res-global-nav ul#menu-res-global-nav {
    position: absolute;
    top: 34.5%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  .res-global-nav a {
    display: block;
    text-align: center;
    margin: 20px 0;
  }
  .res-global-nav a span {
    font-size: 12px;
  }

  /* ============================================== */
  /* ===============　下層ページナビ　=============== */
  #nav-area {
    padding: 15px 0;
  }
  #nav-area .logo h1 {
    line-height: 0.5;
  }

  #global-nav, .nav-right-area {
    display: none;
  }

  .btnMenu2 {
    top: 15px;
  }

  .res-global-nav {
    width: 100%;
    position: absolute;
    top: 34.5%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 980px) and (max-width: 767px) {
  .res-global-nav {
    top: 37.3%;
  }
}
@media screen and (max-width: 980px) and (max-width: 414px) {
  .res-global-nav {
    top: 45%;
  }
}
@media screen and (max-width: 980px) {
  .res-global-nav .nav-search {
    display: block;
    width: 100%;
    min-width: 300px;
    position: fixed;
    top: -80px;
  }
}
@media screen and (max-width: 980px) and (max-width: 980px) {
  .res-global-nav .nav-search {
    display: none;
  }
}
@media screen and (max-width: 980px) {
  .res-global-nav .nav-search form.search-box {
    width: 100%;
    background: #e6e6e6;
    border-radius: 0;
    padding: 20px 18px 18px 15px;
  }
}
@media screen and (max-width: 980px) and (max-width: 980px) {
  .res-global-nav .nav-search form.search-box {
    padding: 0;
  }
}
@media screen and (max-width: 980px) {
  .res-global-nav .nav-search form.search-box input.s {
    font-size: 14px;
    background: #e6e6e6;
  }
}
@media screen and (max-width: 980px) and (max-width: 768px) {
  .res-global-nav .nav-search input {
    height: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    outline: none;
    float: left;
  }
}
@media screen and (max-width: 980px) {
  .res-global-nav .nav-search :placeholder-shown, .res-global-nav .nav-search ::-webkit-input-placeholder {
    color: #808080;
  }
  .res-global-nav .nav-search :-moz-placeholder, .res-global-nav .nav-search ::-moz-placeholder {
    color: #808080;
    opacity: 1;
  }
  .res-global-nav .nav-search :-ms-input-placeholder {
    color: #808080;
  }
  .res-global-nav .nav-search form.search-box i {
    color: #fff;
  }

  /* Google Chrome, Safari, Opera 15+, Android, iOS */
  /* Firefox 18- */
  /* Firefox 19+ */
  /* IE 10+ */
  #nav-area .res-global-nav ul#menu-res-global-nav {
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  /* ============================================= */
  /*
  ====================================================
  　　　　　　　　　　ピックアップコンテンツ
  ====================================================
  */
  .first-article {
    width: 64%;
  }

  .ohter-article {
    width: 36%;
  }

  .first-article .pickup-area-detail h3 {
    font-size: 20px;
  }
}
@media screen and (max-width: 980px) and (max-width: 482px) {
  .first-article .pickup-area-detail h3 {
    font-size: 16px;
  }
}
@media screen and (max-width: 980px) {
  .first-article .pickup-area-detail p.span {
    font-size: 14px;
  }

  .ohter-article .pickup-area {
    background: linear-gradient(transparent 30%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5));
  }
  .ohter-article .pickup-area-detail h3 {
    font-size: 16px;
  }

  /*
  ====================================================
  　　　　　　　　　　 　メインコンテンツ
  ====================================================
  */
  .article-list-inner {
    width: 95%;
  }
}
@media screen and (max-width: 980px) and (max-width: 482px) {
  .article-list-inner {
    width: 100%;
  }
}

@media screen and (max-width: 980px) {
  /*
  ====================================================
  　　　　　　　　　　　 　サイドバー
  ====================================================
  */
  #sidebar {
    width: 25%;
  }

  /* ===============　RANKING　=============== */
  .ranking-detail .wpp-list li a {
    font-size: 10px;
  }
}
@media screen and (max-width: 980px) and (max-width: 768px) {
  .ranking-detail .wpp-list li a {
    font-size: 14px;
  }
}

@media screen and (max-width: 980px) {
  /* ===============　TAG LIST　=============== */
  .tag-list li a {
    font-size: 12px;
  }

  /* ========================================= */
  /*
  ====================================================
  　　　　　　　　　　　 　ノマド一覧
  ====================================================
  */
  .person-thumbnail {
    width: 25%;
    height: auto;
  }
}
@media (max-width: 768px) {
  .res-nav {
    width: 100%;
  }

  #sidebar {
    width: 100%;
    position: static;
  }

  .main-article-area {
    width: 100%;
  }
  .main-article-area p {
    padding: 0 10px;
  }

  .person-thumbnail, .person-detail {
    width: 95%;
    height: auto;
    margin: 5px auto;
    padding: 10px;
  }

  .person-thumbnail {
    text-align: center;
  }
}
img.nomad_pc_img {
  display: block;
}
@media (max-width: 480px) {
  img.nomad_pc_img {
    display: none;
  }
}

img.nomad_sp_img {
  display: none;
}
@media (max-width: 480px) {
  img.nomad_sp_img {
    display: block;
    width: 95%;
    margin: 0 auto;
  }
}