@charset "UTF-8";
body{
	font-size: 14px;
	color: #333;
	line-height: 1.5;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 500;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background: #eee;
}
@font-face{
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto-Medium'), url('/font/esg/2020/Roboto-Medium.ttf') format('truetype');
	}
h1,h2,h3,h4,h5,p,ul,ol,li,img,table,th,td,dl,dt,dd{margin: 0px;padding: 0px;font-size: 14px;}
li{list-style-type: none;}
table{border-collapse: collapse;}
a:link,a:visited{cursor: pointer;color: #333;text-decoration: none;}
a{transition: opacity .4s cubic-bezier(.210, .60, .350, 1);}
img{vertical-align: top;border: 0;max-width: 100%;height: auto;}
a img{vertical-align: bottom;-webkit-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;transition: opacity .2s cubic-bezier(.210, .60, .350, 1);}
input {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0;}
input[type="text"] {line-height: 1.5;}
button {-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 0;border: none;background-color: transparent;cursor: pointer;transition: .1s linear;}
select {box-sizing: border-box;white-space: nowrap;}
.spOnly{display: none;}
@media only screen and (max-width:767px) {
.pcOnly{display: none;}
.spOnly{display: block;}
}


/* =================================================
  #wrapper
================================================= */
#wrapper{
	overflow: hidden;
	position: relative;
	background: #fff;
}
@media only screen and (max-width:768px) {
#wrapper{
}
}


/* =================================================
  header
================================================= */
header{
	padding: 0 40px;
	height: 100px;
}
header #gNavi{
	position: relative;
	padding-top: 8px;
	box-sizing: border-box;
	height: 32px;
	max-width: 1120px;
	margin: 0 auto;
}
header #gNavi > ul{
	font-size: 0;
}
header #gNavi > ul > li{
	display: inline-block;
	vertical-align: top;
	margin-right: 40px;
}
header #gNavi > ul > li > span,
header #gNavi > ul > li > a{
	font-size: 14px;
	vertical-align: top;
	cursor: pointer;
}
header #gNavi > ul > li > span::after{
	content: "";
	display: inline-block;
	vertical-align: top;
	width: 5px;
	height: 5px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(135deg);
	margin: 5px 0 0 5px;
}
header #gNavi .dropdownBg{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 11;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.2);
	display: none;
}
header #gNavi .dropdown{
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 12;
	background: #fff;
	width: 200px;
	padding: 20px;
	box-sizing: border-box;
	display: none;
}
header #gNavi .dropdown ul li{
	font-size: 12px;
	margin-top: 5px;
}
header #gNavi .dropdown ul li:first-child{
	margin-top: 0;
}
header #gNavi .dropdown ul li a:hover{
	text-decoration: underline;
}
header #gNavi .dropdown .close{
  box-sizing: content-box;
  display: block;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  border: solid 1px #888888;
  border-radius: 2px;
	cursor: pointer;
}
header #gNavi .dropdown .close::before,
header #gNavi .dropdown .close::after{
  display: block;
  position: absolute;
  top: -9px;
  width: 17px;
  height: 17px;
  border-bottom: solid 1px #888888;
  content: "";
}
header #gNavi .dropdown .close::before {
	left: 3px;
	transform: rotate(45deg);
}
header #gNavi .dropdown .close::after {
	left: -8px;
	transform: rotate(-45deg);
}
header #gNavi .btn{
	position: absolute;
	right: 0;
	top: 0;
}
header #gNavi .btn a{
	display: block;
	background: #279ef0;
	color: #fff;
	font-size: 12px;
	padding: 10px 10px 0;
	box-sizing: border-box;
	height: 32px;
	line-height: 1;
	transition: opacity .2s cubic-bezier(.210, .60, .350, 1);
}
header #gNavi .btn a:hover{
	opacity: .7;
}
header #gNavi .btn a::before{
	content: "メールマガジン登録";
}
header #lNavi{
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
}
header #lNavi .btn{
	position: absolute;
	left: 0;
	top: 20px;
	padding-top: 16px;
	cursor: pointer;
}
header #lNavi .btn i{
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: #333;
}
header #lNavi .btn i::before,
header #lNavi .btn i::after{
  display: block;
  position: absolute;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: #333;
  content: '';
}
header #lNavi .btn i::before {top: 6px;}
header #lNavi .btn i::after {top: 12px;}
header #lNavi .btn span{
  font-size: 12px;
}
header  #lNavi .search{
	position: absolute;
	left: 68px;
	top: 22px;
	border-bottom: 1px solid #333;
	width: 250px;
	padding-right: 18px;
	box-sizing: border-box;
}
header #lNavi .search [type="text"]{
	border: none;
	font-size: 14px;
	width: 100%;
	padding: 0;
}
header #lNavi .search [type="submit"]{
	position: absolute;
	right: 0;
	top: 0;
  display: block;
  width: 18px;
	height: 18px;
  border: none;
  background: url(/images/esg/2020/ico_search.svg) no-repeat;
  text-indent: -9999px;
  cursor: pointer;
}
header #lNavi .logo{
	width: 160px;
	margin: 0 auto;
	padding-top: 10px;
}
header #lNavi .logo a:hover img{
	opacity: .6;
}
header #lNavi > ul{
	position: absolute;
	right: 0;
	top: 0;
	font-size: 0;
}
header #lNavi > ul > li{
	position: relative;
	display: inline-block;
	vertical-align: top;
}
header #lNavi > ul > li > a{
	display: block;
	font-size: 12px;
	width: 74px;
	height: 68px;
	text-align: center;
	box-sizing: border-box;
	padding: 12px 0 0;
	transition: background .2s cubic-bezier(.210, .60, .350, 1);
}
header #lNavi > ul > li > a:hover{
	background: #f6f6f6;
}
header #lNavi > ul > li > a img{
	display: block;
	margin: 0 auto;
}
header #lNavi ul li .dropdown{
	width: 380px;
	position: absolute;
	top: 100%;
	right: 15px;
	background: #fff;
	box-sizing: border-box;
	border: 2px solid #333;
	padding: 20px;
	text-align: right;
	display: none;
	z-index: 10;
}
header #lNavi ul li:hover .dropdown{
	display: block;
}
header #lNavi ul li .dropdown::before{
	content: "";
	position: absolute;
	right: 8px;
	top: -8px;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #333;
  border-left: 8px solid transparent; 
}
header #lNavi ul li .dropdown ul{
	font-size: 0;
	text-align: left;
}
header #lNavi ul li .dropdown ul li{
	display: inline-block;
	vertical-align: top;
	margin: 0 10px 10px 0;
}
header #lNavi ul li .dropdown ul li a{
	display: block;
	border: 1px solid #e6e6e6;
	padding: 5px 15px;
	font-size: 14px;
}
header #lNavi ul li .dropdown ul li a:hover{
	border-color: #279ef0;
	color: #279ef0;
}
header #lNavi ul li .dropdown > a{
	font-size: 12px;
	display: inline-block;
}
header #lNavi ul li .dropdown > a:hover{
	text-decoration: underline;
}
header #lNavi ul li .dropdown > a::after{
	content: "";
	display: inline-block;
	vertical-align: top;
	width: 5px;
	height: 5px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	transform: rotate(45deg);
	margin: 5px 0 0 3px;
}
@media only screen and (max-width:1024px) {
header{
	height: 60px;
	padding: 20px 0 0 0;
	box-sizing: border-box;
}
header #gNavi{
	position: static;
	padding-top: 0;
	height: auto;
}
header #gNavi .btn{
	position: absolute;
	right: 20px;
	top: 16px;
}
header #gNavi .btn a{
	font-size: 11px;
	padding: 8px 8px;
	height: auto;
}
header #gNavi .btn a::before{
	content: "メルマガ登録";
}
header #gNavi ul{
	display: none;
}
header #lNavi .btn{
	left: 15px;
	top: 15px;
}
header  #lNavi .search{
	display: none;
}
header #lNavi{
	position: static;
	margin-top: 0;
}
header #lNavi .logo{
	width: 90px;
	padding-top: 0;
}
header #lNavi > ul{
	display: none;
}
}


/* =================================================
  #cNavi
================================================= */
#cNavi{
	background: #333;
}
#cNavi ul{
	display: flex;
	max-width: 1120px;
	width: 100%;
	margin: 0 auto;
}
#cNavi ul li{
	display: initial;
	width: 20%;
	border-left: 1px solid #fff;
}
#cNavi ul li:last-child {
	border-right: 1px solid #fff;
}
#cNavi ul li a{
	display: flex;
	color: #fff;
	padding: 10px 0;
	font-size: 14px;
	transition: background .2s cubic-bezier(.210, .60, .350, 1);
	font-family: 'Roboto', sans-serif;
	letter-spacing: .1em;
	align-items: center;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
}
#cNavi ul li.current a{
	background: #279ef0 !important;
	transition: background 0s cubic-bezier(.210, .60, .350, 1);
}
#cNavi ul li a:hover{
	text-decoration: underline;
	background: #666;
}
@media only screen and (max-width:1024px) {
#cNavi ul li a{
	padding: 12px 0;
	font-size: 12px;
}
#cNavi ul li:first-child {
	border-left: none;
}
#cNavi ul li:last-child {
	border-right: none;
}
#cNavi ul li a{
	padding: 10px 0;
}
}


/* =================================================
  #menu
================================================= */
#menuBg{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 11;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.8);
	display: none;
}
#menu{
	overflow: hidden;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 12;
	background: #fff;
	width: 400px;
	height: 100vh;
	transform: translateX(-100%);
	transition: transform .6s cubic-bezier(.210, .60, .350, 1);
}
#menu.active{
	transform: translateX(0);
}
#menu .close{
	position: absolute;
	left: 22px;
	top: 12px;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
#menu .close::before,
#menu .close::after{
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 24px;
  height: 2px;
  margin: auto;
  background: #333;
  content:"";
}
#menu .close::before{
  transform: rotate(45deg);
}
#menu .close::after{
  transform: rotate(-45deg);
}
#menu .inner{
	position: relative;
	overflow-y: auto;
	height: 100vh;
	box-sizing: border-box;
	padding: 60px 20px 40px 30px;
}
#menu .sns{
	position: absolute;
	right: 30px;
	top: 63px;
}
#menu .sns p{
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
}
#menu .sns ul{
	display: inline-block;
	vertical-align: middle;
}
#menu .sns ul li{
	display: inline-block;
	vertical-align: middle;
	margin-left: 15px;
}
#menu .sns ul li img{
	height: 24px;
	width: auto;
}
#menu .box{
	margin-bottom: 30px;
}
#menu .box::after{
	content: "";
	width: 60px;
	height: 3px;
	display: block;
	background: #279ef0;
	margin-top: 30px;
}
#menu .box:last-child{
	/* margin-bottom: 0; */
}
#menu .box:last-child::after{
	display: none;
}
#menu .box strong{
	display: block;
}
#menu .box strong a{
	font-size: 20px;
}
#menu .box strong a::after{
	content: "";
	display: inline-block;
	vertical-align: top;
	width: 7px;
	height: 7px;
	border-top: 3px solid #279ef0;
	border-right: 3px solid #279ef0;
	transform: rotate(45deg);
	margin: 11px 0 0 5px;
}
#menu .box dl{
margin-top: 20px;
}
#menu .box dl ul{
	font-size: 0;
}
#menu .box dl dt ul li{
	display: inline-block;
	vertical-align: top;
	margin-right: 40px;
	font-size: 16px;
	font-weight: bold;
}
#menu .box dl dd ul li{
	display: inline-block;
	vertical-align: top;
	margin: 5px 0 0 0;
	font-size: 14px;
	width: 50%;
}
#menu .box2 dl dd ul li,
#menu .box3 dl dd ul li{
	display: block;
	width: 100%;
}
#menu .box dl ul li a{
	position: relative;
}
#menu .box dl ul li a::after{
	content: "";
	display: inline-block;
	vertical-align: top;
	width: 5px;
	height: 5px;
	border-top: 2px solid #279ef0;
	border-right: 2px solid #279ef0;
	transform: rotate(45deg);
	margin: 7px 0 0 5px;
}
#menu .box dl dt ul li a::after{
	margin-top: 9px;
}
@media only screen and (max-width:768px) {
#menu{
	width: 100%;
}
#menu .close{
	position: absolute;
	left: 12px;
}
#menu .inner{
	padding: 60px 20px 40px 20px;
}
#menu .sns{
	right: 20px;
}
}


/* =================================================
  .content
================================================= */
.content{
	overflow: hidden;
	max-width: 1120px;
	margin: 40px auto 0;
	padding: 0 40px;
}
@media only screen and (max-width:768px) {
.content{
	overflow: visible;
	margin: 30px auto 0;
	padding: 0 20px;
}
}


/* =================================================
  #main
================================================= */
#main{
	width: calc(100% - 340px);
	float: left;
}
@media only screen and (max-width:1024px) {
#main{
	width: 100%;
	float: none;
}
}


/* =================================================
  #breadcrumb
================================================= */
#breadcrumb{
	font-size: 0;
}
#breadcrumb li{
	display: inline-block;
	font-size: 12px;
	margin-right: 10px;
}
#breadcrumb li::after{
	content: "＞";
	margin-left: 10px;
}
#breadcrumb li:last-child::after{
	display: none;
}
#breadcrumb li a{
	color: #279ef0;
}
#breadcrumb li a:hover{
	text-decoration: underline;
}
@media only screen and (max-width:768px) {
#breadcrumb{
	display: none;
}
}


/* =================================================
  #side
================================================= */
#side{
	width: 300px;
	float: right;
}
#side .bnr{
	max-width: 300px;
	margin: 20px auto 0;
}
#side .bnr:first-child{
	margin-top: 0;
}
#side section{
	margin-top: 40px;
}
#side h2{
	font-size: 18px;
	margin-bottom: 10px;
}
#side .ranking .tab{
	display: table;
	width: 100%;
	border-bottom: 1px solid #333;
}
#side .ranking .tab li{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size: 14px;
	width: 33.333%;
	line-height: 1.2;
}
#side .ranking .tab li.active{
	font-weight: bold;
	border-bottom: 2px solid #333;
}
#side .ranking .tab li a{
	display: block;
	padding: 0 0 8px;
}
#side .ranking .list ul{
	counter-reset: number;
	display: none;
}
#side .ranking .list ul.active{
	display: block;
}
#side .ranking .list ul li{
	margin-top: 15px;
	counter-increment: number;
}
#side .ranking .list ul li a{
	display: block;
}
#side .ranking .list ul li a span{
	position: relative;
	display: block;
	font-size: 12px;
	min-height: 25px;
	padding: 3px 0 0 35px;
}
#side .ranking .list ul li a span::before{
  content: counter(number);
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 26px;
	height: 26px;
	box-sizing: border-box;
	border: 1px solid #333;
	text-align: center;
	padding-top: 2px;
	font-size: 14px;
}
#side .ranking .list ul li:nth-child(1) a span::before,
#side .ranking .list ul li:nth-child(2) a span::before,
#side .ranking .list ul li:nth-child(3) a span::before{
	border-radius: 50%;
	color: #fff;
	border: none;
	padding-top: 3px;
}
#side .ranking .list ul li:nth-child(1) a span::before{background: #cfae29}
#side .ranking .list ul li:nth-child(2) a span::before{background: #a2a2a2}
#side .ranking .list ul li:nth-child(3) a span::before{background: #966d41}
#side .ranking .list ul li a .box{
	overflow: hidden;
	margin-top: 3px;
}
#side .ranking .list ul li a .box .txt{
	overflow: hidden;
	height: 100%;
	padding-right: 20px;
}
#side .ranking .list ul li a .box .txt h3{
	font-size: 16px;
}
#side .ranking .list ul li a:hover .box .txt h3{
	text-decoration: underline;
}
#side .ranking .list ul li a .box .img{
	overflow: hidden;
	float: right;
	width: 70px;
}
#side .news ul li,
#side .english ul li{
	position: relative;
	font-size: 16px;
	font-weight: bold;
	margin-top: 15px;
	padding-left: 1em;
}
#side .news ul li::before,
#side .english ul li::before{
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}
#side .news ul li:first-child,
#side .english ul li:first-child{
	margin-top: 0;
}
#side .news ul li a,
#side .english ul li a{
	display: block;
}
#side .news ul li a:hover,
#side .english ul li a:hover{
	text-decoration: underline;
}
#side .news ul li a time{
	font-size: 12px;
	font-weight: normal;
	display: block;
	margin-top: 5px;
}

#side .media .box{
	display: table;
}
#side .media .box .img{
	display: table-cell;
	vertical-align: top;
	width: 120px;
}
#side .media .box .img img{
	border: 1px solid #ccc;
	width: 100%;
}
#side .media .box .txt{
	display: table-cell;
	vertical-align: top;
	padding-left: 20px;
}
#side .media .box .txt p{
	font-size: 14px;
	font-weight: bold;
}
#side .media .box:hover .txt p{
	text-decoration: underline;
}
#side .media .box .txt p span{
	display: block;
	font-weight: normal;
	font-size: 12px;
	margin-bottom: 3px;
}
#side .seminar ul li{
	margin-top: 15px;
	font-size: 14px;
}
#side .seminar ul li a{
	display: block;
}
#side .seminar ul li a:hover{
	text-decoration: underline;
}
#side .seminar ul li span{
	display: block;
	font-weight: bold;
}
#side .seminar ul li:first-child{
	margin-top: 0;
}
@media only screen and (max-width:1024px) {
#side{
	float: none;
	width: 100%;
}
#side section{
	margin-top: 30px;
}
}
@media only screen and (max-width:768px) {
#side{
	margin-top: 40px;
}
}


/* =================================================
  topBtn
================================================= */
#topBtn{
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: none;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background: #279ef0;
	transition: background .2s cubic-bezier(.210, .60, .350, 1);
}
#topBtn:hover{
  background: #67bbf4;
}
#topBtn::before{
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: solid 3px #FFF;
  border-left: solid 3px #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 4px;
  transform: translate(-50%,-50%) rotate(45deg);
}
@media only screen and (max-width:768px) {
#topBtn{
	width: 45px;
	height: 45px;
	bottom: 64px;
}
#topBtn::before{
	width: 10px;
	height: 10px;
	margin-top: 2px;
}
}


/* =================================================
  lMenuFixed
================================================= */
#lMenuFixed{
	display: none;
}
@media only screen and (max-width:768px) {
#lMenuFixed{
	display: block;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 64px;
	background: #fff;
}
#lMenuFixed ul{
	display: table;
	width: 100%;
	height: 64px;
	background: #fff;
}
#lMenuFixed ul li{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
#lMenuFixed ul li a,
#lMenuFixed ul li span{
	display: block;
	font-size: 12px;
	padding: 5px 0 0 0;
	cursor: pointer;
}
#lMenuFixed ul li a img,
#lMenuFixed ul li span img{
	display: block;
	margin: 0 auto;
}
#lMenuFixed .searchBox{
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	background: #fff;
	transition: transform .4s cubic-bezier(.210, .60, .350, 1);
}
#lMenuFixed .searchBox.active{
	transform: translateY(-100%);
}
#lMenuFixed .searchBox [type="text"]{
	vertical-align: top;
  width: calc(100% - 74px);
  min-width: 0;
  height: 40px;
  padding: 5px 10px 3px;
	box-sizing: border-box;
  border: 0;
	border: 1px solid #333;
	border-right: none;
  outline: none;
  font-size: 16px;
	line-height: 16px;
}
#lMenuFixed .searchBox [type="submit"] {
	vertical-align: top;
  position: relative;
  width: 74px;
  height: 40px;
  border: none;
  background: #279ef0;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
	cursor: pointer;
}
#searchBg{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.8);
	display: none;
}
}


/* =================================================
  footer
================================================= */
#lFooter{
	background: #f6f6f6;
	padding: 60px 40px;
	margin-top: 80px;
}
#lFooter .inner{
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
}
#lFooter .sns{
	position: absolute;
	right: 0;
	top: 5px;
}
#lFooter .sns p{
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
}
#lFooter .sns ul{
	display: inline-block;
	vertical-align: middle;
}
#lFooter .sns ul li{
	display: inline-block;
	vertical-align: middle;
	margin-left: 20px;
}
#lFooter .sns ul li img{
	height: 24px;
	width: auto;
}
#lFooter .box{
	margin-bottom: 60px;
}
#lFooter .box:last-child{
	margin-bottom: 0;
}
#lFooter .box strong{
	display: block;
}
#lFooter .box strong a{
	position: relative;
	font-size: 20px;
}
#lFooter .box strong a:hover{
	text-decoration: underline;
}
#lFooter .box strong a::after{
	content: "";
	display: inline-block;
	vertical-align: top;
	width: 7px;
	height: 7px;
	border-top: 3px solid #279ef0;
	border-right: 3px solid #279ef0;
	transform: rotate(45deg);
	margin: 11px 0 0 5px;
}
#lFooter .box dl{
	border-bottom: 1px solid #e1e1e1;
	padding: 20px 0;
}
#lFooter .box strong + dl{
	padding-top: 10px;
}
#lFooter .box dl ul{
	font-size: 0;
}
#lFooter .box dl dt ul li{
	margin-right: 40px;
	font-size: 16px;
}
#lFooter .box dl dd ul li{
	display: inline-block;
	margin: 10px 40px 0 0;
	font-size: 14px;
}
#lFooter .box dl ul li a{
	position: relative;
}
#lFooter .box dl ul li a:hover{
	text-decoration: underline;
}
#lFooter .box dl ul li a::after{
	content: "";
	display: inline-block;
	vertical-align: top;
	width: 5px;
	height: 5px;
	border-top: 2px solid #279ef0;
	border-right: 2px solid #279ef0;
	transform: rotate(45deg);
	margin: 6px 0 0 5px;
}
#lFooter .box dl dt ul li a::after{
	margin-top: 9px;
}
#lFooter .box > ul{
	font-size: 0;
	margin-top: 8px;
}
#lFooter .box > ul li{
	display: inline-block;
	margin: 10px 20px 0 0;
	font-size: 13px;
}
#lFooter .box > ul li a{
	position: relative;
	padding-right: 12px;
}
#lFooter .box > ul li a:hover{
	text-decoration: underline;
}
#lFooter .box > ul li a::after{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	vertical-align: top;
	width: 5px;
	height: 5px;
	border-top: 2px solid #279ef0;
	border-right: 2px solid #279ef0;
	transform: rotate(45deg);
	margin: 3px 0 0 5px;
}
#gFooter{
	background: #eee;
	padding: 40px;
}
#gFooter .inner{
	max-width: 1120px;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
	padding-left: 140px;
}
#gFooter .logo{
	width: 90px;
	position: absolute;
	left: 0;
	top: 0;
}
#gFooter .logo a:hover img{
	opacity: .6;
}
#gFooter ul{
	font-size: 0;
}
#gFooter ul li{
	display: inline-block;
	vertical-align: top;
	font-size: 12px;
	margin-bottom: 8px;
}
#gFooter ul li a:hover{
	text-decoration: underline;
}
#gFooter p{
	font-size: 12px;
}
@media only screen and (max-width:768px) {
#lFooter{
	padding: 30px 20px 40px;
}
#lFooter .sns{
	position: relative;
	right: 0;
	top: 0;
	text-align: center;
	margin-bottom: 20px;
}
#lFooter .sns p{
	display: block;
	margin-bottom: 10px;
}
#lFooter .sns ul li{
	margin: 0 12px;
}
#lFooter .sns ul li img{
	height: 30px;
}
#lFooter .box{
	margin-bottom: 40px;
}
#lFooter .box dl dt ul li{
	margin-right: 20px;
}
#lFooter .box dl dd ul li{
	margin: 10px 30px 0 0;
	font-size: 13px;
}
#gFooter{
	padding: 30px 20px 90px;
}
#gFooter .inner{
	padding-left: 0;
}
#gFooter .logo{
	width: 90px;
	position: relative;
	margin: 20px auto 0;
}
#gFooter ul li{
	font-size: 12px;
	margin-bottom: 5px;
}
#gFooter p{
	font-size: 11px;
	margin-top: 5px;
}
}




/* ==================================================================================================
  コンポーネント
================================================================================================== */


/* =================================================
  section
================================================= */
#main section:not([class]) {
	margin-top: 60px;
}
#main #breadcrumb + section:not([class]) {
	margin-top: 20px;
}
.topSec{
	padding: 50px 0;
	border-top: 1px solid #333;
}
.topSec:first-child{
	padding-top: 0;
	border-top: none;
}
.prBox + .topSec{
	border-top: none;
}
.secTtl{
	color: #279ef0;
	font-size: 26px;
	margin-top: 100px;
}
.secTtl:first-child{
	margin-top: 0;
}
.secTtl .icon{
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	line-height: 1;
	margin-top: -2px;
	margin-right: 10px;
}
.secLead{
	font-size: 16px;
	line-height: 1.75;
	margin-top: 20px;
}
.ttlArea + .secLead{
	margin-top: 30px;
}
@media only screen and (max-width:768px) {
#main #breadcrumb + section:not([class]) {
	margin-top: 0;
}
.secTtl{
	margin-top: 30px;
}
.profBox +.secLead{
	margin-top: 30px;
}
}


/* =================================================
  .more
================================================= */
.more{
	text-align: right;
	margin-top: 15px;
}
.more::before{
	content: "";
	display: block;
	clear: both;
}
.more span,
.more a{
	font-size: 14px;
	display: inline-block;
}
.more span:hover,
.more a:hover{
	text-decoration: underline;
}
.more span::after,
.more a::after{
	content: "";
	display: inline-block;
	vertical-align: top;
	width: 5px;
	height: 5px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	transform: rotate(45deg);
	margin: 7px 0 0 3px;
}


/* =================================================
  .prBox
================================================= */
.prBox{
	background: #f6f6f6;
	padding: 40px;
	margin-top: 30px;
}
.topSec + .prBox{
	margin-top: 0;
}
.prBox ul li{
	position: relative;
	margin-top: 10px;
	font-size: 16px;
}
.prBox ul li:first-child{
	margin-top: 0;
}
.prBox ul li a::before{
	position: absolute;
	left: 0;
	top: 3px;
	content: "PR";
	display: block;
	text-align: center;
	font-size: 11px;
	width: 35px;
	border: 1px solid #333;
}
.prBox ul li a{
	text-decoration: underline;
	padding-left: 50px;
}
.prBox ul li a:hover{
	text-decoration: none;
}
@media only screen and (max-width:768px) {
.prBox ul li{
	font-size: 14px;
}
.prBox{
	padding: 30px 20px;
	width: 100%;
	margin-left: -20px;
}
}


/* =================================================
  .topCol3
================================================= */
.topCol3{
	font-size: 0;
	margin-top: 15px;
	width: calc(100% + 30px);
}
.topCol3 > li{
	display: inline-block;
	vertical-align: top;
	width: 29.63%;
	padding-right: 30px;
}
.topCol3 li .img{
	overflow: hidden;
}
.topCol3 li .img img{
	transition: transform .4s cubic-bezier(.210, .60, .350, 1);
	width: 100%;
}
.topCol3 li a:hover .img img{
	transform: scale(1.06);
}
.topCol3 li .txt{
margin-top: 10px;
}
.topCol3 li .txt p{
	font-size: 12px;
}
.topCol3 li .txt h3{
	font-size: 16px;
}
.topCol3 li a:hover .txt h3{
	text-decoration: underline;
}
.topCol3 li .txt time{
	font-size: 12px;
}
.topCol3 li .txt ul{
	font-size: 0;
}
.topCol3 li .txt ul li{
	display: inline-block;
	vertical-align: top;
	font-size: 12px;
	margin-right: 10px;
}
.topCol3 .slick-slide{
	padding: 0 30px 0 0;
}
@media only screen and (max-width:768px) {
.topCol3{
	width: 100%;
	margin-top: 10px;
}
.topCol3 > li{
	width: 100%;
	padding-right: 0;
}
.topCol3 .slick-slide{
	padding: 0 6px;
}
}



/* =================================================
  .topCol2
================================================= */
.topCol2{
	font-size: 0;
	margin-top: -5px;
}
.topCol2 > li{
	display: inline-block;
	vertical-align: top;
	width: 48%;
	margin: 20px 4% 0 0;
}
.topCol2 > li:nth-child(2n){
	margin-right: 0;
}
.topCol2 li a{
	overflow: hidden;
}
.topCol2 li .img{
	overflow: hidden;
	float: right;
	width: 120px;
	border: 1px solid #e1e1e1;
	box-sizing: border-box;
}
.topCol2 li .img img{
	transition: transform .4s cubic-bezier(.210, .60, .350, 1);
}
.topCol2 li a:hover .img img{
	transform: scale(1.06);
}
.topCol2 li .txt{
	position: relative;
	height: 100%;
	overflow: hidden;
	padding-right: 20px;
}
.topCol2 li .txt p{
	font-size: 12px;
}
.topCol2 li .txt h3{
	font-size: 16px;
}
.topCol2 li a:hover .txt h3{
	text-decoration: underline;
}
.topCol2 li .txt time{
	font-size: 12px;
}
.topCol2 li .txt ul{
	font-size: 0;
}
.topCol2 li .txt ul li{
	display: inline-block;
	vertical-align: top;
	font-size: 12px;
	margin-right: 10px;
}
@media only screen and (max-width:768px) {
.topCol2{
	margin-top: -15px;
}
.topCol2 > li{
	display: block;
	width: 100%;
	margin: 30px 0 0 0;
	overflow: hidden;
}
}


/* =================================================
  .secCol2
================================================= */
.secCol2{
	font-size: 0;
	margin-top: 30px;
}
.secLead + .secCol2{
	margin-top: 50px;
}
.secCol2 > li{
	vertical-align: top;
	padding: 30px 0;
	border-top: 1px solid #e4e4e4;
}
.secCol2 > li:last-child{
	border-bottom: 1px solid #e4e4e4;
}
.secCol2 > li:nth-child(2n){
	margin-right: 0;
}
.secCol2 li a{
	display: block;
	overflow: hidden;
}
.secCol2 li .img{
	overflow: hidden;
	float: right;
	width: 160px;
	border: 1px solid #e1e1e1;
	box-sizing: border-box;
}
.secCol2 li .img img{
	transition: transform .4s cubic-bezier(.210, .60, .350, 1);
}
.secCol2 li a:hover .img img{
	transform: scale(1.06);
}
.secCol2 li .txt{
	position: relative;
	height: 100%;
	overflow: hidden;
	padding-right: 20px;
}
.secCol2 li .txt p{
	font-size: 12px;
}
.secCol2 li .txt h2,
.secCol2 li .txt h3{
	font-size: 22px;
}
.secCol2 li .txt h2 + h3{
	font-size: 14px;
}
.secCol2 li a:hover .txt h2,
.secCol2 li a:hover .txt h3{
	text-decoration: underline;
}
.secCol2 li .txt time{
	font-size: 12px;
}
@media only screen and (max-width:768px) {
.secCol2{
	margin-top: 30px;
}
.secCol2 > li{
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	margin-top: 30px;
}
.secCol2 > li:first-child{
	margin-top: 0;
}
.secCol2 > li:last-child{
	border-bottom: none;
}
.secCol2 li .img{
	width: 120px;
}
.secCol2 li .txt h2,
.secCol2 li .txt h3{
	font-size: 16px;
}
.secCol2 li .txt h2 + h3,
.secCol2 li .txt h3 + h4{
	display: none;
}
}


/* =================================================
  .footTheme
================================================= */
.footTheme{
	text-align: center;
	margin: 40px 0;
}
.footTheme h2{
	font-size: 22px;
}

/* =================================================
  .themeList
================================================= */
.secTtl + .themeList{
	margin-top: 20px;
	margin-bottom: 80px;
}
.ttlArea .themeList{
	margin-top: 5px;
	margin-bottom: -8px;
}
.themeList ul{
	font-size: 0;
	margin: 20px -8px 0;
}
.themeList li{
	font-size: 15px;
	line-height: 1.2;
	font-weight: bold;
	display: inline-block;
	vertical-align: top;
	margin: 8px;
}
.themeList li a{
	display: block;
	padding: 8px 20px 6px;
	border: solid 1px #279ef0;
	color: #279ef0;
}
.themeList li a:hover{
	transition: background 0.2s,color 0.2s;
	color: #fff;
	background: #279ef0;
}
@media only screen and (max-width:768px) {
.ttlArea .themeList{
	margin-bottom: -4px;
}
.secTtl + .themeList{
	margin-bottom: 60px;
}
.themeList ul{
	text-align: center;
}
.themeList li{
	margin: 4px;
}
}


/* =================================================
  .sortBtn
================================================= */
.sortBtn{
	font-size: 0;
	margin: 15px 0 60px;
	padding-top: 22px;
	border-top: solid 1px #4d4d4d;
}
.sortBtn input{
	display: none;
}
.sortBtn label{
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
	line-height: 1.2;
	position: relative;
	padding-left: 26px;
	margin-right: 30px;
	cursor: pointer;
}
.sortBtn label::before{
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	border: solid 1px #e4e4e4;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0%,-50%);
}
.sortBtn label::after{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translate(0%,-50%);
	background: #fff;
}
.sortBtn input:checked + label::after{
	background: #279ef0;
}
@media only screen and (max-width:768px) {
.sortBtn{
	margin: 15px 0 40px;
}
}


/* =================================================
  .searchNone
================================================= */
.searchNone{
	margin: 15px 0 110px;
	padding-top: 22px;
	border-top: solid 1px #4d4d4d;
	font-size: 16px;
	line-height: 1.75;
}
@media only screen and (max-width:768px) {
.searchNone{
	margin: 15px 0 60px;
	font-size: 14px;
}
}


/* =================================================
  .rankingTab
================================================= */
.rankingTab{
	display: table;
	width: 100%;
	margin-top: 20px;
	border-bottom: 1px solid #333;
}
.rankingTab li{
	display: table-cell;
	text-align: center;
	font-size: 14px;
}
.rankingTab li a,
.rankingTab li span{
	display: block;
	padding: 0 0 8px;
}
.rankingTab li.active{
	font-weight: bold;
	border-bottom: 2px solid #333;
}


/* =================================================
  .rankingList
================================================= */
.rankingList .tabBox{
	display: none;
}
.rankingList .tabBox.active{
	display: block;
}
.rankingList .tabBox .secCol2{
	counter-reset: number;
}
.rankingList .tabBox .prBox + .secCol2{
	counter-reset: none;
}
.rankingList .tabBox .secCol2:first-child{
	margin-top: 0;
	border-top: none;
}
.rankingList .tabBox .secCol2 li{
	counter-increment: number;
}
.rankingList .tabBox .secCol2 li .txt{
	padding-left: 60px;
	position: relative;
}
.rankingList .tabBox .secCol2 li .txt::before{
	content: counter(number);
	display: block;
	position: absolute;
	top: 4px;
	left: 0;
	width: 40px;
	height: 40px;
	font-size: 20px;
	font-weight: bold;
	box-sizing: border-box;
	border: solid 1px #808080;
	text-align: center;
	padding-top: 4px;
}
.rankingList .tabBox .secCol2:first-child li:nth-child(1) .txt::before,
.rankingList .tabBox .secCol2:first-child li:nth-child(2) .txt::before,
.rankingList .tabBox .secCol2:first-child li:nth-child(3) .txt::before{
	border-radius: 50%;
	color: #fff;
	border: none;
	padding-top: 5px;
}
.rankingList .tabBox .secCol2:first-child li:nth-child(1) .txt::before{
	background: #caa525
}
.rankingList .tabBox .secCol2:first-child li:nth-child(2) .txt::before{
	background: #999;
}
.rankingList .tabBox .secCol2:first-child li:nth-child(3) .txt::before{
	background: #8c6239;
}
@media only screen and (max-width:768px) {
.rankingList .tabBox .secCol2:first-child li:first-child{
	margin-top: 30px;
}
.rankingList .tabBox .secCol2 li .txt{
	padding-left: 54px;
}
.rankingList .tabBox .secCol2 li .txt::before{
	width: 34px;
	height: 34px;
	font-size: 18px;
	padding-top: 3px;
}
.rankingList .tabBox .secCol2:first-child li:nth-child(1) .txt::before,
.rankingList .tabBox .secCol2:first-child li:nth-child(2) .txt::before,
.rankingList .tabBox .secCol2:first-child li:nth-child(3) .txt::before{
	padding-top: 4px;
}
}
@media only screen and (max-width:480px) {
.rankingList .tabBox .secCol2 li .txt{
	padding-left: 0;
}
.rankingList .tabBox .secCol2 li .txt::before{
	position: relative;
	top: 0;
	margin-bottom: 2px;
}
}


/* =================================================
  .profBox
================================================= */
.profBox::after{
	content: "";
	display: block;
	clear: both;
}
.profBox .img{
	float: left;
	width: 120px;
	overflow: hidden;
}
a:hover .profBox .img img{
	opacity: .7;
}
.profBox .txt{
	margin-left: 140px;
}
.profBox .txt h1,
.profBox .txt h2{
	font-size: 22px;
	line-height: 1.3;
}
a:hover .profBox .txt h1,
a:hover .profBox .txt h2{
	text-decoration: underline;
}
.profBox .txt p{
	font-size: 12px;
	margin-top: 15px;
}
.profBox .txt h1 + p,
.profBox .txt h2 + p{
	margin-top: 0;
}


/* =================================================
  .profArea
================================================= */
.profArea{
	margin: 40px 0 0;
}
.profArea .profBox{
	padding-bottom: 30px;
	border-bottom: solid 1px #4d4d4d;
	position: relative;
	margin-bottom:25px;
}
.profArea .profBox .txt{
	padding-right: 120px;
}
@media only screen and (max-width:768px) {
.profArea{
	margin: 0 0 30px;
}
.profArea .profBox{
	padding: 0 20px 20px;
	margin: 0 -20px 25px;
}
.profArea .profBox .txt{
	padding-right: 0;
	padding-bottom: 54px;
}
}


/* =================================================
  .authorList
================================================= */
.authorList{
	font-size: 0;
}
.authorList li{
	display: inline-block;
	vertical-align: top;
	width: 48%;
	margin: 30px 4% 0 0;
}
.authorList li:nth-child(2n){
	margin-right: 0;
}
.authorList li a{
	display: block;
}
.authorList li a .link{
	display: none;
}
@media only screen and (max-width:768px) {
.authorList{
	margin-top: 20px;
}
.authorList li{
	width: 100%;
	margin: 10px 0 0 0;
	position: relative;
}
.authorList li:first-child{
	margin-top: 0;
}
.authorList li a .txt{
	padding-bottom: 1.5em;
}
.authorList li a .link{
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	font-weight: bold;
	line-height: 1.2;
}
.authorList li a .link::after{
	content: "";
	display: inline-block;
	vertical-align: top;
	width: 5px;
	height: 5px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	transform: rotate(45deg);
	margin: 4px 0 0 3px;
}
}


/* =================================================
  .specialFirst
================================================= */
.specialFirst{
	margin-top: 20px;
}
.specialFirst a{
	display: block;
}
.specialFirst a::after{
	content: "";
	display: block;
	clear: both;
}
.specialFirst .img{
	float: left;
	width: 48%;
	margin-right: 4%;
	overflow: hidden;
}
.specialFirst .img img{
	width: 100%;
	transition: transform .4s cubic-bezier(.210, .60, .350, 1);
}
.specialFirst a:hover .img img{
	transform: scale(1.06);
}
.specialFirst .txt{
	float: left;
	width: 48%;
}
.specialFirst .txt h2{
	font-size: 24px;
	line-height: 1.4;
}
.specialFirst a:hover .txt h2{
	text-decoration: underline;
}
.specialFirst .txt h3{
	font-size: 18px;
	margin-top: 10px;
}
.specialFirst .txt time{
	font-size: 12px;
	color: #666;
	margin-top: 10px;
}
@media only screen and (max-width:768px) {
.specialFirst .img{
	float: none;
	width: 100%;
	margin: 0;
}
.specialFirst .txt{
	float: none;
	width: 100%;
	margin-top: 15px;
}
}


/* =================================================
  .specialList
================================================= */
.specialList{
	font-size: 0;
}
.specialList li{
	display: inline-block;
	vertical-align: top;
	width: 30.76%;
	margin:30px 3.84% 0 0;
}
.specialList li:nth-child(3n){
	margin-right: 0;
}
.specialList li .img{
	overflow: hidden;
}
.specialList li .img img{
	width: 100%;
	transition: transform .4s cubic-bezier(.210, .60, .350, 1);
}
.specialList li a:hover .img img{
	transform: scale(1.06);
}
.specialList li .txt{
	margin-top: 15px;
}
.specialList li .txt h2{
	font-size: 16px;
}
.specialList li a:hover .txt h2{
	text-decoration: underline;
}
@media only screen and (max-width:768px) {
.specialList li{
	display: inline-block;
	vertical-align: top;
	width: 47.01%;
	margin:20px 5.97% 0 0;
}
.specialList li:nth-child(3n){
	margin-right: 5.97%;
}
.specialList li:nth-child(2n){
	margin-right: 0;
}
.specialList li .txt h2{
	font-size: 14px;
}
}


/* =================================================
  .articleHead
================================================= */
.articleHead{
	margin: 50px 0 25px;
}
@media only screen and (max-width:768px) {
.articleHead{
	margin: 0 0 25px;
}
}


/* =================================================
  .ttlArea
================================================= */
.ttlArea{
	padding: 30px 0;
	border-top: solid 1px #4d4d4d;
	border-bottom: solid 1px #4d4d4d;
}
.ttlArea::after{
	content: "";
	display: block;
	clear: both;
}
.ttlArea .txt{
	float: left;
	position: relative;
	width: 100%;
}
.ttlArea.imgIn .txt{
	width: 64.1%;
}
.ttlArea .txt .catTtl{
	font-size: 16px;
	line-height: 1.2;
	color: #279ef0;
	font-weight: bold;
}
.ttlArea .txt .catTtl.iconIn{
	position: relative;
	padding-left: 36px;
}
.ttlArea .txt .catTtl.iconIn .icon{
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	line-height: 1;
	margin-top: -4px;
}
.ttlArea .txt .catTtl a{
	color: #279ef0;
}
.ttlArea .txt .catTtl a:hover{
	text-decoration: underline;
}
.ttlArea .txt .parentTtl{
	font-size: 14px;
	font-weight: bold;
	text-align:right;
}
.ttlArea .txt .catTtl + .parentTtl{
	position: absolute;
	top: 0;
	right: 0;
	font-size: 14px;
	margin-left: 100px;
}
.ttlArea .txt .parentTtl a:hover{
	text-decoration: underline;
}
.ttlArea .txt h1{
	font-size: 24px;
	line-height: 1.25;
	margin-top: 20px;
}
.ttlArea .txt h2{
	font-size: 18px;
	margin-top: 4px;
}
.ttlArea .txt h2:after{
	content: "";
	display: block;
	clear: both;
}
.ttlArea .txt .meta{
	position: relative;
	padding: 23px 100px 0 0;
}
.ttlArea .txt .meta time{
	font-size: 12px;
	color: #666;
}
.ttlArea .txt .meta p{
	font-size: 12px;
	font-weight: bold;
}
.ttlArea .txt .meta p a:hover{
	text-decoration: underline;
}
.ttlArea .img{
	float: right;
	width: 30.76%;
}
.ttlArea .img img{
	width: 100%;
}
@media only screen and (max-width:768px) {
.ttlArea{
	padding: 0 20px 40px;
	border-top: none;
	margin: 0 -20px;
}
.ttlArea .txt{
	float: none;
}
.ttlArea.imgIn .txt{
	width: 100%;
}
.ttlArea .txt .parentTtl{
	position: relative;
	font-size: 13px;
	margin: 10px 0 0;
	text-align: left;
}
.ttlArea .txt .catTtl + .parentTtl{
	position: relative;
	font-size: 13px;
	margin-left: 0;
}
.ttlArea .txt .meta{
	padding: 6px 0 0;
}
.ttlArea .txt .meta p{
	margin-top: 8px;
}
.ttlArea .txt h1{
	margin-top: 10px;
}
.ttlArea .img{
	float: none;
	width: 100%;
	margin-top: 20px;
}
}


/* =================================================
  .notesRight
================================================= */
.notesRight{
	text-align: right;
	margin-top: 10px;
}


/* =================================================
  .mainSns
================================================= */
.mainSns{
	font-size: 0;
	text-align: center;
	margin-top: 40px;
}
.profBox .mainSns{
	position: absolute;
	bottom: 30px;
	right: 20px;
	margin-top: 0;
}
.ttlArea .mainSns{
	position: absolute;
	bottom: 0;
	right: 0;
	margin-top: 0;
}
.pagenation + .mainSns{
	margin: -40px 0;
}
.prBox + .mainSns{
	margin: 40px 0 -40px;
}
.mainSns li{
	display: inline-block;
	vertical-align: middle;
	margin-left: 20px;
	font-size: 12px;
	line-height: 1.2;
	font-weight: bold;
}
.mainSns li:first-child{
	margin-left: 0;
}
.mainSns li a{
	display: block;
	transition: opacity 0.2s;
}
.mainSns li:nth-child(1) a{
	color: #385aa9;
}
.mainSns li:nth-child(2) a{
	color: #0693f1;
}
.mainSns li a:hover{
	opacity: 0.7;
}
.mainSns li img{
	height: 22px;
	width: auto;
}
.mainSns li span{
	display: block;
	margin-top: 8px;
}
@media only screen and (max-width:768px) {
.profBox .mainSns{
	position: relative;
	bottom: 0;
	right: 0;
	width: 100%;
	margin-top: 20px;
	float: left;
}
.ttlArea .mainSns{
	position: relative;
	margin-top: 25px;
}
.pagenation + .mainSns{
	margin: -20px 0;
}
.prBox + .mainSns{
	margin: 20px 0 -20px;
}
}



/* =================================================
  .backnumber
================================================= */
.backnumber{
	font-size: 0;
	margin-top: 15px;
	width: calc(100% + 30px);
}
.backnumber > li:nth-child(3n){
	margin-right: 0;
}
.backnumber li .img{
	width: 160px;
	margin: 0 auto;
}
.backnumber li .img img{
	width: 100%;
	border: 1px solid #ccc;
}
.backnumber li .txt{
	margin-top: 10px;
}
.backnumber li .txt p{
	font-size: 12px;
}
.backnumber li .txt h3{
	font-size: 14px;
}
.backnumber li a:hover .txt h3{
	text-decoration: underline;
}
.backnumber .slick-slide{
	padding: 0 30px 0 0;
}
@media only screen and (max-width:768px) {
.backnumber{
	width: 100%;
	margin-top: 10px;
	overflow: hidden;
}
.backnumber li .img{
	width: 200px;
}
.backnumber .slick-slide{
	padding: 0 20px;
}
}

/* =================================================
  .articlesBacknumber
================================================= */
.articlesBacknumber{
	margin-top: 70px;
}
.articlesBacknumber ul{
	margin-top: 20px;
}
.articlesBacknumber li{
	padding: 20px 0;
	border-top: solid 1px #e4e4e4;
}
.articlesBacknumber li:last-child{
	border-bottom: solid 1px #e4e4e4;
}
.articlesBacknumber li a{
	display: block;
}
.articlesBacknumber li h3{
	font-size: 18px;
}
.articlesBacknumber li a:hover h3{
	text-decoration: underline;
}
.articlesBacknumber li time{
	font-size: 12px;
	color: #666;
}
@media only screen and (max-width:768px) {
.articlesBacknumber{
	margin-top: 35px;
}
.articlesBacknumber ul{
	margin-top: 15px;
}
.articlesBacknumber li{
	padding: 15px 0;
}
.articlesBacknumber li h3{
	font-size: 16px;
}
}

/* =================================================
  .relation
================================================= */
.relation{
	margin-top: 60px;
}
.relation ul{
	font-size: 0;
}
.relation ul li{
	display: inline-block;
	vertical-align: top;
	width: 23.078%;
	margin: 20px 2.56266667% 0 0;
}
.relation ul li:nth-child(4n){
	margin-right: 0;
}
.relation ul li .img{
	overflow: hidden;
}
.relation ul li .img img{
	transition: transform .4s cubic-bezier(.210, .60, .350, 1);
}
.relation ul li a:hover .img img{
	transform: scale(1.06);
}
.relation ul li .txt{
	margin-top: 10px;
}
.relation ul li .txt p{
	font-size: 14px;
}
.relation ul li a:hover .txt h3{
	text-decoration: underline;
}
@media only screen and (max-width:768px) {
.relation{
	margin-top: 40px;
}
.relation ul li{
	display: inline-block;
	vertical-align: top;
	width: 48%;
	margin: 20px 4% 0 0;
}
.relation ul li:nth-child(2n){
	margin-right: 0;
}
}

/* =================================================
  .articlesList
================================================= */
.articlesList{
	margin-top: 60px;
}
@media only screen and (max-width:768px) {
.articlesList{
	margin-top: 40px;
}
}


/* =================================================
  .pagenation
================================================= */
nav.pagenation{
	position: relative;
}
nav.pagenation + .footTheme {
	margin-top: -40px;
}
nav.pagenation {
	margin: 60px 0 80px;
	padding: 0 70px;
	text-align: center;
}
nav.pagenation ul{
	font-size: 0;
}
nav.pagenation ul li{
	font-size: 14px;
	line-height: 1.2;
	display: inline-block;
	vertical-align: middle;
	margin: 0 3px;
}
nav.pagenation ul li.prev{
	margin-left: 0;
	margin-right: 12px;
}
nav.pagenation ul li.next{
	margin-right: 0;
	margin-left: 12px;
}
nav.pagenation ul li a{
	display: block;
	min-width: 38px;
	height: 38px;
	box-sizing:border-box;
	padding: 11px 10px 0;
	color: #279ef0;
	background: #f6f6f6;
}
nav.pagenation ul li.prev a,
nav.pagenation ul li.next a{
	font-size: 0;
	background-color: transparent !important;
	position: relative;
}
nav.pagenation ul li a:hover,
nav.pagenation ul li.active a{
	background-color: #279ef0;
	color: #fff;
	transition: background 0.2s;
	opacity: 1;
}
nav.pagenation ul li.prev a::before,
nav.pagenation ul li.next a::before{
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-top: 3px solid #279ef0;
	border-right: 3px solid #279ef0;
	position: absolute;
	top: 50%;
	left: 50%;
}
nav.pagenation ul li.prev a::before{
	margin-left: 2px;
	transform: translate(-50%,-50%) rotate(-135deg);
}
nav.pagenation ul li.next a::before{
	margin-left: -2px;
	transform: translate(-50%,-50%) rotate(45deg);
}
nav.pagenation ul li.prev a:hover::before,
nav.pagenation ul li.next a:hover::before{
	transition: border 0.2s;
	border-top: 3px solid #67bbf4;
	border-right: 3px solid #67bbf4;
}
@media only screen and (max-width:767px) {
nav.pagenation {
	margin: 35px 0 60px;
	padding: 0;
}
nav.pagenation + .footTheme {
	margin-top: 0;
}
}
@media only screen and (max-width:360px) {
nav.pagenation ul li.prev{
	margin-right: 9px;
}
nav.pagenation ul li.next{
	margin-left: 9px;
}
nav.pagenation ul li.prev a,
nav.pagenation ul li.next a{
	min-width: 20px;
}
}


/* =================================================
  .media
================================================= */
#main .media{
	padding: 40px;
	border: 1px solid #333;
	border-left: none;
	border-right: none;
	margin-top: 80px;
}
#main .media a{
	display: table;
	width: 100%;
}
#main .media a .img{
	display: table-cell;
	vertical-align: top;
	width: 120px;
}
#main .media a .img img{
	border: 1px solid #ccc;
	width:100%;
}
#main .media a .txt{
	position: relative;
	display: table-cell;
	vertical-align: top;
	padding: 0 0 20px 20px;
}
#main .media a .txt h3{
	font-size: 18px;
	font-weight: bold;
}
#main .media a:hover .txt h3{
	text-decoration: underline;
}
#main .media a .txt p{
	font-size: 16px;
	line-height: 1.75;
	margin-top: 5px;
}
#main .media a .txt .more{
	position: absolute;
	right: 0;
	bottom: 0;
}
#main .media a:hover .txt .more span{
	text-decoration: underline;
}
@media only screen and (max-width:768px) {
#main .media{
	padding: 30px 20px;
	margin: 40px 0 0 -20px;
	width: 100%;
}
#main .media a .txt h3{
	font-size: 16px;
}
#main .media a .txt p{
	font-size: 14px;
}
}


/* =================================================
  .slick
================================================= */
.slick-slider{
	position:relative;
	z-index: 1;
	display:block;
	box-sizing:border-box;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-touch-callout:none;
	-khtml-user-select:none;
	-ms-touch-action:pan-y;
	touch-action:pan-y;
	-webkit-tap-highlight-color:transparent;
}
.slick-list{
	position:relative;
	display:block;
	margin:0;
	height: 100%;
}
.slick-list.dragging{
	cursor:pointer;
	cursor:hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list{
	-webkit-transform:translate3d(0, 0, 0);
	-ms-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
}
.slick-track{
	position:relative;
	top:0;
	left:0;
	display:block;
	margin-left:auto;
	margin-right:auto;
	height: 100%;
}
.slick-track:before,
.slick-track:after{
	display:table;
	content:'';
}
.slick-track:after{
	clear:both;
}
.slick-loading .slick-track{
  visibility:hidden;
}
.slick-slide{
	float:left;
	height:100%;
	min-height:1px;
}
.slick-slide:focus{
	outline:none;
}
[dir='rtl'] .slick-slide{
	float:right;
}
.slick-initialized .slick-slide{
	display:block;
}
.slick-loading .slick-slide{
	visibility:hidden;
}
.slick-vertical .slick-slide{
	display: block;
	height: auto;
}
.slick-dots{
	text-align: center;
	margin-top: 20px;
}
.slick-dots li{
	display: inline-block;
	vertical-align: top;
	margin: 0 5px;
}
.slick-dots li button{
	vertical-align: top;
	width: 13px;
	height: 13px;
	background: #e4e4e4;
	font-size: 0;
	border-radius: 50%;
}
.slick-dots li.slick-active button{
	background: #279ef0;
}
.slick-slider *:focus {
outline: none;
}
.slick-slider .slick-arrow{
	position: absolute;
	top: 90px;
	z-index: 1;
	font-size: 0;
	width: 50px;
	height: 50px;
}
.slick-slider .slick-next{
	right: -10px;
}
.slick-slider .slick-prev{
	left: -10px;
}
.slick-slider .slick-arrow::after{
	content: "";
	display: inline-block;
	vertical-align: top;
	width: 16px;
	height: 16px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
}
.slick-slider .slick-next::after{
	transform: rotate(45deg);
}
.slick-slider .slick-prev::after{
	transform: rotate(-135deg);
}
.slick-slider .slick-arrow[aria-disabled="true"]::after{
	border-color: #e4e4e4;
}


/* ================================================
■BP標準CSSサンプルコード
================================================  */
.sample{
	background: #279ef0;
	color: #fff;
	padding: 10px 15px;
	font-size: 16px;
}

/* リード */
.articleBody {
font-size: 16px;
}

.articleBody .bplead {
line-height: 2em;
font-weight: bold;
margin-bottom: 30px;
}

/* 中見出し */
.articleBody h3 {
margin: 40px 0 20px;
font-size: 22px;
line-height: 1.36;
clear: both;
}

/* 小見出し */
.articleBody h4 {
margin: 40px 0 15px;
font-size: 18px;
line-height: 1.16;
clear: both;
}

/* 地の文 */
.articleBody p {
font-size: 16px;
line-height: 1.87;
margin-bottom: 18px;
}

/* テキストリンク */
.articleBody p a,
.articleBody li a {
color: #1e90ff;
}
.articleBody p a:hover,
.articleBody li a:hover {
text-decoration: underline;
}

/* フォントのサイズ変更 */
.articleBody .fontSizeXXL { font-size: 3em; }
.articleBody .fontSizeXL { font-size: 2em; }
.articleBody .fontSizeL { font-size: 1.5em; }
.articleBody .fontSizeS { font-size: 0.8em; }
.articleBody .fontSizeXS { font-size: 0.4em; }

/* 文字色と背景色 */
.articleBody .textCol { color: dodgerblue; }
.articleBody .textColTintA { color: deepskyblue; }
.articleBody .textColTintB { color: lightskyblue; }
.articleBody .textColShade { color: lightblue; }
.articleBody .textColShadeA { color: lightcyan; }
.articleBody .textColShadeB { color: aliceblue; }
.articleBody .bgCol { background-color: dodgerblue; }
.articleBody .bgColTintA { background-color: deepskyblue; }
.articleBody .bgColTintB { background-color: lightskyblue; }
.articleBody .bgColShade { background-color: lightblue; }
.articleBody .bgColShadeA { background-color: lightcyan; }
.articleBody .bgColShadeB { background-color: aliceblue; }
.articleBody .textColBlackTintA { color: dimgray; }
.articleBody .textColBlackTintB { color: darkgray; }
.articleBody .textColBlackShade { color: lightgrey; }
.articleBody .textColBlackShadeA { color: gainsboro; }
.articleBody .textColBlackShadeB { color: whitesmoke;}
.articleBody .bgColBlack { background-color: black; }
.articleBody .bgColBlackTintA { background-color: dimgray; }
.articleBody .bgColBlackTintB { background-color: darkgray; }
.articleBody .bgColBlackShade { background-color: lightgrey; }
.articleBody .bgColBlackShadeA { background-color: gainsboro; }
.articleBody .bgColBlackShadeB { background-color: whitesmoke;}

.articleBody .textColBlack { color: black; }
.articleBody .textColGray { color: gray; }
.articleBody .textColSilver { color: silver; }
.articleBody .textColWhite { color: white; }
.articleBody .textColRed { color: red; }
.articleBody .textColYellow { color: yellow; }
.articleBody .textColLime { color: lime; }
.articleBody .textColAqua { color: aqua; }
.articleBody .textColBlue { color: blue; }
.articleBody .textColFuchsia { color: fuchsia; }
.articleBody .textColMaroon { color: maroon; }
.articleBody .textColOlive { color: olive; }
.articleBody .textColGreen { color: green; }
.articleBody .textColTeal { color: teal; }
.articleBody .textColNavy { color: navy; }
.articleBody .textColPurple { color: purple; }
.articleBody .bgColBlack { background-color: black; }
.articleBody .bgColGray { background-color: gray; }
.articleBody .bgColSilver { background-color: silver; }
.articleBody .bgColWhite { background-color: white; }
.articleBody .bgColRed { background-color: red; }
.articleBody .bgColYellow { background-color: yellow; }
.articleBody .bgColLime { background-color: lime; }
.articleBody .bgColAqua { background-color: aqua; }
.articleBody .bgColBlue { background-color: blue; }
.articleBody .bgColFuchsia { background-color: fuchsia; }
.articleBody .bgColMaroon { background-color: maroon; }
.articleBody .bgColOlive { background-color: olive; }
.articleBody .bgColGreen { background-color: green; }
.articleBody .bgColTeal { background-color: teal; }
.articleBody .bgColNavy { background-color: navy; }
.articleBody .bgColPurple { background-color: purple; }

/* テキストの強調 */
.articleBody b, .articleBody .fontBold { font-weight: bold; }
.articleBody .fontNormal { font-weight: normal; }
.articleBody i, .articleBody .fontItalic { font-style: italic; }
.articleBody em, .articleBody strong { font-style:normal; font-weight: normal; }

/* テキストの上付き、下付き */
.articleBody sup { vertical-align: super; }
.articleBody sub { vertical-align: sub; }

/* 下線と取り消し線 */
.articleBody u, .articleBody .textSolidUndrLine { text-decoration: none; padding-bottom: 0.15em; border-bottom: solid 0.1em gray; }
.articleBody .textUnsolidUndrLine { padding-bottom: 0.15em; border-bottom: dashed 0.1em gray; }
.articleBody s, .articleBody del, .articleBody .textLineThrough { text-decoration: line-through; }

/* マーカー（Highlight） */
.articleBody .textHighlight { padding: 0.15em; background: dodgerblue; }
.articleBody .textHighlightTintA { padding: 0.15em; background: red; color: white; }
.articleBody .textHighlightTintB { padding: 0.15em; background: greenyellow; }
.articleBody .textHighlightShade { padding: 0.15em; background: lightcyan; background: linear-gradient(transparent 60%, deepskyblue 60%); }
.articleBody .textHighlightShadeA { padding: 0.15em; background: plum; background: linear-gradient(transparent 60%, plum 60%); }
.articleBody .textHighlightShadeB { padding: 0.15em; background: palegreen; background: linear-gradient(transparent 60%, palegreen 60%); }

/* 左寄せ、左右中央、右寄せ */
.articleBody .textAlignLeft { text-align: left;}
.articleBody .textAlignCenter { text-align: center; }
.articleBody .textAlignRight { text-align: right; }

/* 区切り要素 */
.articleBody hr.asterisk { border: none;}
.articleBody hr.asterisk:after { content: "＊＊＊"; letter-spacing: 4em; margin-right: -4em; text-align:center; }
.articleBody hr.diamond { border: none; }
.articleBody hr.diamond:after { content: "◇◇◇"; letter-spacing: 4em; margin-right: -4em; text-align:center; }
.articleBody hr, .articleBody hr.line { width: 80%; /* border: none; height: 1px; background: #e4e4e4; */ }
.articleBody hr:after, .articleBody hr.line:after { content: ""; display: block; }

/* 回り込み解除 */
.articleBody .clearLeft { clear: left; }
.articleBody .clearRight { clear: right; }
.articleBody .clearBoth { clear: both; }
.articleBody .clearfix:after { content:""; display:block; clear:both; }

/* 図（画像） */
.articleBody .bpimage_image {
margin-bottom:0px;
margin-top: 5px;
}
.articleBody .bpimage_image:first-child {
margin-top: 0;
}
.articleBody .bpimage_image + * {
margin-top: 5px;
}

.articleBody .bpimage_title + .bpimage_image {
margin-top:5px;
}
.articleBody .bpimage_image img {
	width: 100%;
}

/* 画像のキャプション */
.articleBody .bpimage_title {
font-size: 0.8em;
line-height: 1.5em;
font-weight: bold;
}

.articleBody .bpimage_caption {
font-size: 0.8em;
line-height: 1.5em;
}

.articleBody .bpimage_click {
font-size: 0.8em;
line-height: 1.5em;
color:#279ef0;
}

/* 図（回り込み：左）右配置 */
.articleBody .bpimage_right {
float: right;
margin: 10px 0 15px 30px;
}
/* 図（回り込み：右）左配置 */
.articleBody .bpimage_left {
float: left;
margin: 10px 30px 15px 0;
}
/* 図（スタンダード）中央配置 */
.articleBody .bpimage_center {
/* width: 100% !important; */
margin: 10px auto 30px;
}
@media only screen and (max-width:767px) {
/* 図（回り込み：左）右配置 */
.articleBody .bpimage_right {
	float: none;
	margin: 0 0 15px 0;
	width: 100% !important;
}
/* 図（回り込み：右）左配置 */
.articleBody .bpimage_left {
	float: none;
	margin: 0 0 15px 0;
	width: 100% !important;
}
/* 図（スタンダード）中央配置 */
.articleBody .bpimage_center {
	margin: 20px auto;
	width: 100% !important;
}
}

/* 図（二つ並び） */
.articleBody .bpimage_double {
	overflow: hidden;
	margin: 10px auto 30px;
	/* width: calc(100% + 20px) !important; */
}
.articleBody .bpimage_double .bpimage_left,
.articleBody .bpimage_double .bpimage_right {
	box-sizing: border-box;
	/* padding-right: 20px; */
	margin: 0;
	/* width: 50% !important; */
}
.articleBody .bpimage_double .bpimage_left{
	float: left;
}
.articleBody .bpimage_double .bpimage_right {
	float: right;
}
@media only screen and (max-width:767px) {
.articleBody .bpimage_double {
	width: 100% !important;
}
.articleBody .bpimage_double .bpimage_left,
.articleBody .bpimage_double .bpimage_right {
	padding-right: 0;
	margin: 10px 0 0 0;
	width: 100% !important;
	float: none;
}
}

/* 図（三つ並び） */
.articleBody .bpimage_triple {
	/* width: calc(100% + 20px) !important; */
	margin: 10px auto 30px;
	overflow: hidden;
}
.articleBody .bpimage_triple .bpimage_wrap {
	margin: 0;
	/* width: 66.666% !important; */
	box-sizing: border-box;
	float: left;
}
.articleBody .bpimage_triple .bpimage_left,
.articleBody .bpimage_triple .bpimage_center,
.articleBody .bpimage_triple .bpimage_right{
	margin: 0;
	box-sizing: border-box;
	/* padding-right: 20px; */
}
.articleBody .bpimage_triple .bpimage_left {
	/* width: 50% !important; */
	float: left;
}
.articleBody .bpimage_triple .bpimage_center{
	/* width: 50% !important; */
	float: right;
}
.articleBody .bpimage_triple .bpimage_right{
	/* width: 33.333% !important; */
	float: right;
}
@media only screen and (max-width:767px) {
.articleBody .bpimage_triple {
	width: 100%!important;
	margin: 10px auto 30px;
	overflow: hidden;
}
.articleBody .bpimage_triple {
	margin: 0;
}
.articleBody .bpimage_triple .bpimage_wrap {
	width:100% !important;
	float: none;
}
.articleBody .bpimage_triple .bpimage_left,
.articleBody .bpimage_triple .bpimage_center,
.articleBody .bpimage_triple .bpimage_right{
	float: none;
	width: 100% !important;
	margin: 10px 0 0 0;
	padding-right: 0;
}
}

/* 図（縦積み）*/
.articleBody .bpbox_left{ float:left; margin:10px 10px 10px 0; }
.articleBody .bpbox_right{ float:right; margin:10px 0 10px 10px; }
.articleBody .bpimage_set{ margin:0 0 10px 0; }
@media only screen and (max-width:767px) {
.articleBody .bpbox_left{
	width: 100% !important;
	float: none;
	margin:10px 0 0 0;
}
.articleBody .bpbox_right{
	width: 100% !important;
	float: none;
	margin: 10px 0 0 0;
}
.articleBody .bpimage_set{
	margin: 10px 0 0 0;
}
}

/* 図（エトキ右配置） */
.articleBody .bpimage_caption_right {
margin: 0 auto 20px;
overflow:hidden; zoom:1;
}
	.articleBody .bpimage_caption_right .bpimage_left {
	margin-bottom:0;
	}
.articleBody .bpimage_caption_right .bpimage_title{ 
padding:10px 0 0; 
clear:none; 
}
.articleBody .bpimage_caption_right .bpimage_caption{ 
clear:none; 
}

/* テーブル基本 */
.articleBody .bptable{
width:600px;
margin:10px auto 30px;
overflow-x:auto;
}
.articleBody .bptable table{
width:600px;
border-collapse:collapse;
}

.articleBody .bptable th,
.articleBody .bptable td{
border:1px solid #bebebe;
padding:9px;
font-size:0.8em;
line-height:1.3em;
}
.articleBody .bptable th{
text-align:left;
background:#f6f6f6;
}

.articleBody .bptable_title {
font-size: 0.8em;
line-height: 1.5em;
font-weight: bold;
}
.articleBody .bptable_caption {
font-size: 0.8em;
line-height: 1.5em;
}
.articleBody .bptable_title + table,
.articleBody .bptable_caption + table{
margin-top:10px;
}

/* テーブル（イ）表左寄せ */
.articleBody .bptable_left{
float:left;
clear:both;
margin:0 30px 10px 0;
}
/* テーブル（ウ）表右寄せ */
.articleBody .bptable_right{
float:right;
clear:both;
margin:0 0 10px 30px;
}

/* テーブル（エ）表中央 */
.articleBody .bptable_center{
clear:both;
}

/* プロフィール */
.articleBody .bpprofile, 
.articleBody .bpprofile_photo {
width: auto;
clear: both;
border-top: 3px solid #999;
margin: 50px 0 50px;
padding: 18px 5px 0;
overflow: hidden; zoom: 1;
}
.articleBody .bpprofile_profile{
margin:0 0 15px;
}

.articleBody .bpprofile_position {
font-size: 0.9em;
line-height: 1.3em;
display: inline-block;
margin: 5px 0 0;
}

.articleBody .bpprofile_name {
line-height: 1.3em;
font-weight: bold;
display: inline-block;
margin: 0;
}
.articleBody .bpprofile_text {
font-size: 0.9em;
line-height: 1.6;
margin:15px 0 0;
}

/* プロフィール（顔写真付） */
.articleBody .bpprofile_photo .bpprofile_text img {
float: right;
margin: 0 0 0 30px;
padding: 0;
}

/* インタビュープロフィール用 */
.articleBody .bpinterview {
width: auto;
margin: 30px 0;
padding:15px;
border: 1px solid #ccc;
}
.articleBody .bpinterview_profile {
margin: 0 0 15px;
}
.articleBody .bpinterview_position {
font-size: 0.8em;
line-height: 1.3;
display: inline-block;
margin: 0 0 5px;
}
.articleBody .bpinterview_name {
line-height: 1.3;
font-weight: bold;
display: inline-block;
}
.articleBody .bpinterview_text{ 
font-size: 0.8em;
line-height: 1.8;
margin: 15px 0 0;
}

/* リスト */
.articleBody ul > li, .articleBody ol > li { padding-left: 0.4em; line-height: 1.4; font-size: 16px; margin-top: 4px;}
.articleBody dl > dd { line-height: 1.4; margin: 0 0 0.5em 2em; }    
.articleBody ul, .articleBody ol, .articleBody dl { margin-bottom: 1.5em; }
.articleBody ul, .articleBody ul.disc { padding-left: 2em; list-style-type: disc;}
.articleBody ul li, .articleBody ul.disc li { list-style-type: disc;}
.articleBody ul.circle { padding-left: 2em; list-style-type: circle;}
.articleBody ul.circle li { list-style-type: circle;}
.articleBody ul.square { padding-left: 2em; list-style-type: square;}
.articleBody ul.square li { list-style-type: square;}
.articleBody ul.none { padding-left: 0.5em; list-style-type: none;}
.articleBody ul.none li { list-style-type: none;}
.articleBody ol { padding-left: 2em; list-style-type: decimal; }
.articleBody ol li { list-style-type: decimal; }
.articleBody ol.upperAlpha, .articleBody ol.upperAlpha li { list-style-type: upper-alpha; }
.articleBody ol.lowerAlpha, .articleBody ol.lowerAlpha li { list-style-type: lower-alpha; }
.articleBody ol.upperRoman, .articleBody ol.upperRoman li { list-style-type: upper-roman; }
.articleBody ol.lowerRoman, .articleBody ol.lowerRoman li { list-style-type: lower-roman; }
.articleBody ol.circledDecimal { padding-left: 1.5em; list-style: none; }
.articleBody ol.circledDecimal li { list-style: none; }
.articleBody ol.circledDecimal li { text-indent: -1em; }
.articleBody ol.circledDecimal li:before { padding-right: 0.5em; }
.articleBody ol.circledDecimal li:first-child:before { content: "\2460"; }
.articleBody ol.circledDecimal li:first-child+li:before { content: "\2461"; }
.articleBody ol.circledDecimal li:first-child+li+li:before { content: "\2462"; }
.articleBody ol.circledDecimal li:first-child+li+li+li:before { content: "\2463"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li:before { content: "\2464"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li:before { content: "\2465"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li:before { content: "\2466"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li:before { content: "\2467"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li:before { content: "\2468"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li:before { content: "\2469"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li+li:before { content: "\246a"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li+li+li:before { content: "\246b"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\246c"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\246d"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\246e"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\246f"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\2470"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\2471"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\2472"; }
.articleBody ol.circledDecimal li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\2473"; }
.articleBody dl > dt { text-decoration: underline; margin: 1em 10px; }    
.articleBody dl > dd > ul { margin-top: 0.5em; }

/* 対談、インタビュー */
.articleBody p span.speaker01 { color: blue; font-weight: bold; margin-right: 0.5em;}
.articleBody p span.speaker02 { color: red; font-weight: bold; margin-right: 0.5em;}
.articleBody p span.speaker03 { color: green; font-weight: bold; margin-right: 0.5em;}
.articleBody p span.speaker04 { color: lime; font-weight: bold; margin-right: 0.5em;}
.articleBody p span.speaker05 { color: olive; font-weight: bold; margin-right: 0.5em;}
.articleBody p span.speaker06 { color: yellow; font-weight: bold; margin-right: 0.5em;}
.articleBody p span.speaker07 { color: fuchsia; font-weight: bold; margin-right: 0.5em;}
.articleBody p span.speaker08 { color: lightcoral; font-weight: bold; margin-right: 0.5em;}
.articleBody p span.speaker09 { color: purple; font-weight: bold; margin-right: 0.5em;}

/* 質問と回答 */
.articleBody .bpquestion{
line-height: 2em;
font-weight: bold;
margin:0 0 10px;
}
	 .articleBody .bpquestion::before{
	content:'—';
	}
.articleBody .bpanswer {
line-height: 2em;
}

/* 囲み共通 */
.articleBody .bpbox,
.articleBody .bpbox2,
.articleBody .bpbox3,
.articleBody .bpbox4,
.articleBody .bpframe {
width: auto;
clear: both;
margin: 30px 0;
padding: 20px 30px;
}
.articleBody .bpbox_title {
line-height: 1.3;
font-weight: bold;
margin: 0 0 15px;
padding:0 0 5px;
}
.articleBody .bpbox_text h3 {
    line-height: 1.3;
    margin-bottom: 10px;
}
.articleBody .bpbox_text h4 {
    font-size: 0.8em;
    line-height: 1.7;
    margin-bottom: 10px;
}
.articleBody .bpbox_text p + h3 ,
.articleBody .bpbox_text p + h4 {
    margin-top: 20px;
}
.articleBody .bpbox_text,
.articleBody .bpbox_text p {
/* font-size: 0.8em; */
line-height: 1.6;
margin: 0;
overflow:hidden;
}
/* .articleBody .bpbox_text .bpimage_left{margin: 0 15px 0 0;} */

.articleBody .bpbox_text p + p {
margin-top: 15px;
}
/* .articleBody .bpbox_text li {
    font-size: 0.8em;
    line-height: 1.5;
    margin: 0 0 8px 30px;
    text-indent: -14px;
} */

/* 囲み1 */
.articleBody .bpbox {
border: 1px solid #cecece;
background: #f5f5f5;
}
.articleBody .bpbox .bpbox_title {
color:#000;
border-bottom:1px solid #7d7d7d;
}
.articleBody .bpbox .bpbox_text h3 {
color:#000;
}

/* 囲み2 */
.articleBody .bpbox2 {
border: 1px solid #b4c8c8;
background: #f5fafa;
}
.articleBody .bpbox2 .bpbox_title {
color:#3c6478;
border-bottom:1px solid #3c6478;
}
.articleBody .bpbox2 .bpbox_text h3 {
color:#3c6478;
}

/* 囲み3 */
.articleBody .bpbox3 {
border: 1px solid #ccccaa;
background: #fffae6;
}
.articleBody .bpbox3 .bpbox_title {
color:#be6400;
border-bottom:1px solid #be6400;
}
.articleBody .bpbox3 .bpbox_text h3 {
color:#be6400;
}

/* 囲み4 */
.articleBody .bpbox4 {
border: 1px solid #ccb4cc;
background: #fff7fa;
}
.articleBody .bpbox4 .bpbox_title {
color:#503c8c;
border-bottom:1px solid #503c8c;
}
.articleBody .bpbox4 .bpbox_text h3 {
color:#503c8c;
}

/* シンプル囲み */
 .articleBody .bpframe {
border: 1px solid #999;
background: #fff;
}
.articleBody .bpframe .bpbox_title {
color:#333;
border-bottom:1px solid #333;
}
.articleBody .bpframe .bpbox_text h3 {
color:#333;
}

/* 引用 */
.articleBody blockquote{ background-color: aliceblue; margin: 1em 0; padding:3em 1em; position: relative; }
.articleBody blockquote:before{ content:"“"; font-size: 6em; line-height: 1; font-family: sans-serif; color: gray; position: absolute; left: 0; top: 0; }
.articleBody blockquote:after{ content:"”"; font-size: 6em; line-height: 0; font-family: sans-serif; color: gray; position: absolute; right: 0; bottom: 0; }
.articleBody blockquote cite  { font-style: normal; }

/* コード */
.articleBody pre { margin: 1em 0 1.5em; padding: 1em; white-space: pre; font-size: 12px; line-height: 1.2; overflow:auto; border: 1px solid black; }
.articleBody pre.light { color: black; background-color: whitesmoke; border: 1px solid gray; }
.articleBody pre.dark { color: white; background-color: black; border: 1px solid silver; }
.articleBody pre > code { font-family: "ＭＳ ゴシック" , "MS Gothic"; }

/* コードリスト共通 ★廃止。互換性のために残す必要がある場合に使用★ */
.articleBody .bpcode,
.articleBody .bpcode2 {
width: auto;
clear: both;
margin: 30px 0;
padding: 15px;
overflow: auto;
}
.articleBody .bpcode pre,
.articleBody .bpcode2 pre {
line-height: 1.5em;
font-size: 14px;
}
/* コードリスト（灰色） ★廃止。互換性のために残す必要がある場合に使用★ */
.articleBody .bpcode {
background: #fafafa;
border: 1px solid #ccc;
}
/* コードリスト（緑色） ★廃止。互換性のために残す必要がある場合に使用★ */
.articleBody .bpcode2 {
background: #f5fafa;
border: 1px solid #b4c8c8;
}

/* 訂正  */
.articleBody div.bpteisei_box {
width: auto;
clear: both;
margin: 30px 0;
padding: 15px 20px;
background: #f6f6f6;
border-radius: 3px;
}
.articleBody div.bpteisei_box .bpteisei{
font-size:0.8em;
line-height:1.5;
}
.articleBody div.bpteisei_box .bpteisei b{
color:#279ef0;
margin:0 0 5px;
}

/* 用語解説 */
.articleBody div.bpword {
line-height: 1.5;
padding: 0;
margin: 30px 0;
}

/* 注釈  */
.articleBody div.bpannotation {
font-size: 0.8em;
line-height: 1.5;
margin: 30px 0;
}

/* 参考文献 */
.articleBody div.bpreference {
font-size: 0.8em;
line-height: 1.5;
border-top: 1px solid #ccc;
padding: 15px 20px;
}

/* 動画 */
.articleBody iframe {
	margin: 0 auto;
	display: block;
}
@media only screen and (max-width:767px) {
.articleBody iframe {
	width: 100% !important;
	height: 56.25vw !important;
}
}

/* =================================================
  .l-popUp
================================================= */
.l-popUp header{
	padding: 15px 20px;
	height: auto;
	border-bottom: solid 1px #eee;
}
.l-popUp header #lNavi .logo{
	padding-top: 0;
}
.l-popUp .content{
	max-width: 1120px;
	margin: 0 auto 40px;
	text-align: center;
}
.l-popUp .content h1{
	margin: 40px 0 20px;
	font-size: 22px;
	text-align: left;
}
.l-popUp .content figure{
	display: inline-block;
	margin: 0 auto;
	text-align: center;
}
.l-popUp .content figcaption{
	text-align: left;
	font-size: 16px;
	line-height: 1.5;
	margin-top: 0.5em;
}
.l-popUp .content figcaption strong{
	font-size: 18px;
	display: block;
}
.l-popUp .content .btn{
	width: 100%;
	max-width: 340px;
	margin: 30px auto 0;
}
.l-popUp .content .btn a{
	display: block;
	padding: 14px 20px;
	border: 1px solid #279ef0;
	background: #fff;
	color: #279ef0;
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	transition: background .4s cubic-bezier(.210, .60, .350, 1),color .4s cubic-bezier(.210, .60, .350, 1);
}
.l-popUp .content .btn a:hover{
	background: #279ef0;
	color: #fff;
}
.l-popUp footer{
	text-align: center;
}
.l-popUp footer #gFooter p{
	margin-top: 10px;
}
@media only screen and (max-width:767px) {
.l-popUp .content h1{
	margin: 30px 0 20px;
}
.l-popUp .content .btn{
	max-width: 220px;
}
}

/* =================================================
  More News from NikkeiBP (202112)
================================================= */

#menu .box dl dd ul li:last-child{
width:100%;
}
.sdgs-mv{
margin: 10px 0 20px;
}
.sdgs-lead{
font-size: 16px;
font-weight: bold;
}
.secCol2 li .txt .summary {
font-size: 14px;
margin: 10px 0 4px;
}
.secCol2 li .txt .box-bottom {
	margin-top: auto;
	display: flex;
	justify-content:space-between;
	margin-top: 10px;
}
.secCol2 li .txt .box-bottom .icon{
	display:contents;
}
.secCol2 li .txt .box-bottom .icon,
.secCol2 li .txt .box-bottom img{
	width: 100px;
}

#side .sdgs-media h2 span {
	display:block;
	font-size: 12px;
	line-height: 1;
}
#side .sdgs-media h2 {
	border-bottom: 1px solid #ccc;
	padding-bottom: 8px;
	margin-bottom: 5px;
}
#side .sdgs-media {
	border-bottom: 1px solid #ccc;
	margin-bottom: 40px;
}

#side .sdgs-media .aside-box {
	padding: 15px 0;
	margin: 0 25px;
}
.aside-box .aside-box-image{
	width: 280px;
	text-align: center;
	margin: 0 auto;
}
.aside-box .aside-box-image img{
	max-width:100%;
	max-height: auto;
	transition: all  0.5s ease;
}
.aside-box .aside-box-image img:hover{
	opacity: .7;
}

.aside-box a{
	transition: 0.5s;
}
@media only screen and (max-width:767px) {
	.secCol2 li .txt .summary{
		display: none;
	}
}