@charset "utf-8";

.fo-futura {
	font-family: "futura-pt", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: .8;
}
body.active {
	overflow: hidden;
}
/*header----------------------------*/
#header {
	background: #3FCEF5 url("../img/top/top_bg.png") bottom center repeat-x;
	background-size: auto;
	color: #fff;
	position: relative;
	height: 450px;
	overflow: hidden;
}
.headerWrap {
	height: 100%;
	position: relative;
}
.hLogo {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto;
	background: url("../img/h_bg.svg") bottom center no-repeat;
	background-size: 100% 100%;
	padding: 20px 0 33px;
	max-width: 869px;
	padding-right: 63px;
}
.hTxtArea {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 85px;
	z-index: 1;
	width: 90%;
	max-width: 562px;
	margin: 0 auto;
}
.hTxtWrap {
	position: relative;
	margin-bottom: 40px;
}
.hTxtArea .txt02 {
	position: absolute;
	right: 0;
	bottom: -5px;
}
.sdgs {
	width: 170px;
	margin: 0 auto;
	background: #fff;
	padding: 10px;
	border-radius: 20px;
}
.sdgs img {
	display: block;
	margin: 0 auto;
	max-height: 16px;
}
.serchBtn {
	position: absolute;
	top: 20px;
	z-index: 99999;
	width: 60px;
	height: 60px;
	transition: .2s;
	background: #0090DD;
	border-radius: 50%;
	right: 0;
	cursor: pointer;
}
.serchBtn::after {
	content: "";
	display: block;
	background: url("../img/icon_serch.png") center center no-repeat;
	background-size: contain;
	width: 24px;
	height: 24px;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: 0 auto;
	z-index: 1;
}
.serchBtn.scrollCrass {
	box-shadow: 3px 3px 0 rgba(0,0,0,.2);
} 
.serchBtn:hover {
	background-color: #FFCC4D;
}
.serchBtn.active {
	box-shadow: none;
	background: #0090DD!important;
}
.serchBtn.active::after {
	background-image: url("../img/icon_close.png")
}
#nav {
	background: #0090DD;
	position: fixed;
	z-index: 9990;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: .2s;
}
#nav.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
#nav .searchArea {
	padding: 50px;
}
#nav > .container {
	height: 100%;
	max-width: 1000px;
}
#nav .searchArea dl {
	display: block;
}
#nav .searchArea dt,#nav .searchArea dd {
	width: 100%;
}
#nav .searchArea dt {
	border: none;
	border-bottom: 1px solid #ccc;
}
#nav .searchArea dt b {
	font-size: 24px;
	font-weight: 800;
}
#nav .searchArea dt span {
	font-size: 100%;
}
#nav .searchWrap._word {
	text-align: center;
}
.nav {
	margin-top: 50px;
}
.nav li:not(:first-of-type) {
	margin-left: 50px;
}
.nav a {
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 115%;
	text-align: left;
	position: relative;
}
.nav a:hover {
	color: #FFCC4D;
}
.nav a::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid #fff;
	background: url("../img/arrow.svg") center left 55% no-repeat;
	background-size: 30% auto;
	border-radius: 50%;
	margin-right: 5px;
}
#index .hNav {
	display: none;
}

	/*subPage-header
	-------------------------------------------*/
	#subPage #header {
		background-image: url("../img/page/h_bg.jpg");
		height: 235px;
	}
	#subPage .headerWrap {
		padding-top: 40px;
	}
	#subPage .hLogo {
		width: 54%;
		max-width: 590px;
		background-size: 100% 100%;
		right: auto;
		left: -120px;
		margin: 0;
		padding: 10px 60px 35px 0;
	}
	#subPage .hTxtArea {
		width: 33%;
		bottom: auto;
		top: 20px;
		right: 25%;
		display: flex;
		left: auto;
		justify-content: center;
		flex-wrap: wrap;
		margin: 0;
	}
	#subPage .hTxtWrap {
		margin-bottom: 0;
	}
	#subPage .hTxtArea .txt02 {
		width: 57%;
		right: auto;
		left: 4.5%;
		bottom: -25px;
	}
	#subPage .headerWrap .sdgs {
		width: 37%;
		margin: 0 0 0 auto;
		padding: 10px 20px;
	}
	.hNav {
		text-align: right;
		margin-right: 85px;
	}
	.hNav > p {
		display: inline-block;
	}
	.hNav a {
		color: #fff;
		display: flex;
		align-items: center;
	}
	.hNav a::before {
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		background: #0090DD;
		border-radius: 50%;
		margin-right: 3px;
	}


/*footer
---------------------------------------------------------*/
#footer {
	background: #1a1a1a;
	color: #fff;
}
.footerWrap {
	padding: 40px 0;
	position: relative;
}
.fLogo {
	margin-right: 80px;
}
.fLogo img {
	max-height: 74px;
}
.fNav li:not(:first-of-type) {
	margin-left: 50px;
}
.fNav a {
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 115%;
	text-align: left;
	position: relative;
}
.fNav a::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: #0090DD url("../img/arrow.svg") center left 55% no-repeat;
	background-size: 30% auto;
	border-radius: 50%;
	margin-right: 5px;
}
.fNav a:hover {
	color: #FFCC4D;
}
.fTxtWrap {
	margin-top: 30px;
}
.fTxt {
	text-align: left;
}
.fTxtWrap .sdgs {
	border-radius: 0;
	padding: 15px;
	width: 255px;
	margin: 0;
}
.fTxtWrap .sdgs img {
	max-height: 26px;
}
.fBnr dl {
	margin-top: 20px;
	background: #333;
	padding: 20px 20px 20px 0;
	gap: 15px;
}
.fBnr dt {
	width: 140px;
	min-width: 150px;
	font-size: 95%;
	font-weight: 800;
}
.fBnr dd {
	width: 100%;
	background: #fff;
	padding: 15px 15px;
}
.fLinks {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 10px 15px;
	max-width: 620px;
}
.fLinks li img {
	max-height: 70px;
}
.fBnr h2 {
	flex: 1;
	text-align: center;
}
.fBnr h2 img {
	max-height: 45px;
}
.fBnr ._02 dd {
	background: #1F9EF5;
}
.fBnr ._02 h2 {
	min-width: 210px
}
.fBnr ._02 h2 img {
	max-height: 70px;
}
.footerWrap > .txt {
	margin-top: 25px;
}
.bnr-grampus {
	max-width: 536px;
	margin: 25px auto 0;
}
.footerWrap a {
	color: #fff;
}
.copyRight {
	background: #fff;
	padding: 10px;
	font-size: 80%;
	color: #333;
}
.pageTop {
	display: block;
	width: 54px;
	height: 54px;
	background: #0090DD url("../img/arrow.svg") center center no-repeat;
	position: absolute;
	right: -54px;
	top: -27px;
	border-radius: 50%;
	z-index: 5;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.pageTop:hover {
	background-color: #FFCC4D;
}
.fixNav {
	position: fixed;
	top: 100px;
	right: 0;
	z-index: 999;
}
.fixNav li {
	margin-bottom: 5px;
}
.btn-holings {
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 15px;
}
.btn-holings a {
	display: block;
	border: 1px solid #fff;
}

/*contents
---------------------------------------------------------*/
.searchArea {
	background: #fff;
	padding: 40px 0;
}
.searchArea dl {
	display: flex;
	text-align: center;
}
.searchArea dt,.searchArea dd {
	padding: 15px 0;
}
.searchArea dt {
	width: 18%;
	border-right: 1px solid #000;
	min-width: 198px;
}
.searchArea dt b {
	font-size: 26px;
	font-weight: 500;
}
.searchArea dt span {
	display: block;
	color: #808080;
	font-size: 75%;
	line-height: 1;
}
.searchArea dd {
	width: 82%;
	padding-left: 25px;
}
.searchWrap ul {
	display: flex;
	flex-wrap: wrap;
}
#nav .searchWrap ul {
	justify-content: center;
}
.searchWrap li {
	display: inline-block;
	margin: 3px 5px 3px 0;
}
.searchWrap li a {
	background: #3fcc77;
	color: #fff;
	border-radius: 5px;
	display: block;
	line-height: 1.1;
	padding: 7px 15px;
	font-weight: 600;
}
.searchWrap._tag li a {
	background: #ebe7e1;
	color: #000;
	border-radius: 30px;
	font-weight: 400;
}
.searchWrap li a:hover {
	text-decoration: none;
	background: #333!important;
	color: #fff;
}
.searchWrap._word {
	text-align: left;
}
input.txtSearchInput {
	width: 300px;
	padding: 10px 5px;
	border-radius: 5px;
	text-align: left;
	border: 1px solid #ccc;
}
.searchWrap input[type="submit"] {
	border: none;
	padding: 6px 20px;
	font-size: 16px;
	cursor: pointer;
	border-radius: 5px;
	transition: .2s;
}
.searchWrap input[type="submit"]:hover {
	background: #333;
	color: #fff;
}
#newTopics {
	background: url("../img/top/bg01_left.png") left 10px top 60px,url("../img/top/bg01_right.png") right 5% center;
	background-repeat: no-repeat;
	padding: 40px 0;
}
#newTopics h2 {
	text-align: left;
	font-size: 2.4rem;
	letter-spacing: .36em;
	background: url("../img/top/icon_newtopics.png") left center no-repeat;
	background-size: 21px;
	padding: 3px 0 3px 40px;
}
#newTopics .postBox {
	background: #fff;
}
#newTopics .postBox:nth-of-type(4) {
	display: none;
}
.postBox {
	width: 32%;
	margin: 25px 2% 25px 0;
	text-align: left;
}
.postBox:nth-of-type(3n) {
	margin-right: 0;
}
.postBox figure {
	height: 240px;
	overflow: hidden;
}
.postBox figure img {
	height: 100%;
	min-width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
.postBox figure:hover img {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	opacity: 1;
}
#newTopics figure {
	background: url("../img/no-img.jpg") center center no-repeat;
	background-size: cover;
	padding: 7px;
}
#newTopics figure .img,
#newTopics figure .img a {
	display: block;
	height: 100%;
}
#newTopics figure img[src*="no-img"] {
	opacity: 0;
}
#newTopics figure:hover img[src*="no-img"] {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	opacity: 1;
}
.postBox .ttl {
	font-size: 95%;
	font-weight: 800;
}
.postBox li {
	display: inline-block;
	margin: 2px 2px 2px 0;
	font-size: 80%;
}
.cate a {
	display: block;
	position: relative;
	padding: 0 10px 0 17px;
}
.cate a span {
	display: block;
	border: 3px solid #22B573;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.cate a:hover {
	color: #FFCC4D;
}
.tag li {
	display: inline-block;
	margin: 5px 5px 5px 0;
}
.tag a {
	display: inline-block;
	border-radius: 18px;
	background: #EBE7E1;
	padding: 5px 10px;
}
.tag a:hover {
	background: #333;
	color: #fff;
}
.postBox .ttl,.cate,.tag {
	margin-top: 10px;
}
.postBox .ttl a:hover {
	color: #0190DE
}
#topContents {
	background: url("../img/top/bg02_left.png") left bottom,url("../img/top/bg02_right.png") right bottom;
	background-size: 33.4375% auto,34.735% auto;
	background-color: #F9F9F3;
	background-repeat: repeat-y;
}
#topPickUp {
	margin-top: 80px;
}
.btn {
	max-width: 330px;
	margin: 30px auto 0;
	font-size: 24px;
}
.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #333;
	padding: 15px 10px;
}
.btn a::after {
	content: "";
	display: inline-block;
	background: url("../img/arrow.svg") center center no-repeat;
	background-size: contain;
	width: 10px;
	height: 17px;
	margin-left: 15px;
}
.btn a:hover {
	background: #000;
}
.secTtl {
	position: relative;
	font-size: 100%;
	color: #333;
	padding-bottom: 25px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 25px;
	font-weight: 400;
}
.secTtl::after {
	content: "";
	display: block;
	width: 35%;
	height: 1px;
	background: #22B573;
	position: absolute;
	left: 0;
	bottom: -1px;
	z-index: 1;
}
.secTtl > .fo-futura {
	font-size: 44px;
	font-weight: 600;
	display: block;
	margin-right: 50px;
	background: url("../img/ttl_icon01.png") left top no-repeat;
	background-size: auto 41px;
	padding: 5px 0 5px 55px
}
.secTtl .btn {
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	font-size: 15px;
}
.secTtl .btn a {
	padding: 10px 25px;
}
#ranking .secTtl > .fo-futura {
	background-image: url("../img/ttl_icon02.png")
}
#ranking .secTtl::after {
	background: #FFCC4D
}
.postSlider {
	margin: 0 -10px;
}
.postSlider .postBox {
	margin: 0 10px;
	position: relative;
}
.postSlider .slick-arrow {
	position: absolute;
	top: 33%;
	right: -5.5%;
	width: 50px;
	height: 50px;
	background: #fff url("../img/arrow_yellow.svg") center center no-repeat;
	background-size: auto 17px;
	z-index: 50;
	cursor: pointer;
	border-radius: 50%;
	transition: .1s;
	border: 2px solid #fff;
	box-shadow: 0 0 7px rgba(0,0,0,.1);
}
.postSlider .slick-arrow.prev {
	right: inherit;
	left: -5.5%;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.postSlider .slick-arrow:hover {
	border-color: #FFCC4D;
}
.postSlider  .slick-arrow.slick-disabled {
	opacity: 0;
	visibility: hidden;
}
.rankNum {
	position: absolute;
	left: 0;
	top: 0;
	background: #FFCC4D;
	z-index: 5;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-weight: 600;
	font-size: 115%;
	text-align: center;
}
.rankNum span::after {
	content: "1";
}
#ranking {
	overflow: hidden;
	padding: 80px 0;
}
#ranking .postBox:nth-of-type(2) .rankNum span::after{content:"2"}
#ranking .postBox:nth-of-type(3) .rankNum span::after{content:"3"}
#ranking .postBox:nth-of-type(4) .rankNum span::after{content:"4"}
#ranking .postBox:nth-of-type(5) .rankNum span::after{content:"5"}
#ranking .postBox:nth-of-type(6) .rankNum span::after{content:"6"}
#ranking .postBox:nth-of-type(7) .rankNum span::after{content:"7"}
#ranking .postBox:nth-of-type(8) .rankNum span::after{content:"8"}
#ranking .postBox:nth-of-type(9) .rankNum span::after{content:"9"}
#ranking .postBox:nth-of-type(10) .rankNum span::after{content:"10"}
#ranking .postBox:nth-of-type(11) .rankNum span::after{content:"11"}
#ranking .postBox:nth-of-type(12) .rankNum span::after{content:"12"}
#ranking .postBox:nth-of-type(13) .rankNum span::after{content:"13"}
#ranking .postBox:nth-of-type(14) .rankNum span::after{content:"14"}
#ranking .postBox:nth-of-type(15) .rankNum span::after{content:"15"}
#ranking .postBox:nth-of-type(16) .rankNum span::after{content:"16"}
#ranking .postBox:nth-of-type(17) .rankNum span::after{content:"17"}
#ranking .postBox:nth-of-type(18) .rankNum span::after{content:"18"}
#ranking .postBox:nth-of-type(19) .rankNum span::after{content:"19"}
#ranking .postBox:nth-of-type(20) .rankNum span::after{content:"20"}

.appBnrArea {
	overflow: hidden;
	padding: 80px 0;
	background: url(../img/top/bg03_left.png) left top, url(../img/top/bg03_right.png) right bottom;
	background-size: 15.416% auto, 15.833% auto;
	background-repeat: no-repeat;
	background-color: #F9F9F3;
}
/*supPage
---------------------------------------------------------*/
.pnkz {
	font-size: 85%;
	padding: 15px 0;
	text-align: left;
}
.pnkz li {
	display: inline-block;
	color: #4d4d4d;
}
.pnkz a {
	display: inline-block;
	color: #4d4d4d;
}
.pnkz li:not(:first-of-type)::before {
	content: ">"
}
.postContWrap {
	background: url("../img/page/bg_left.png") left top 200px,url("../img/page/bg_right.png") right bottom;
	background-size: 21.5625% auto,35.3125% auto;
	background-repeat: no-repeat
}
.postArea {
	padding-top: 0;
	overflow: visible;
}
.postWrap {
	width: 65%;
}
.postTtl {
	position: relative;
	font-size: 150%;
	padding-bottom: 15px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
}
.postTtl::after {
	content: "";
	display: block;
	width: 35%;
	height: 1px;
	background: #22B573;
	position: absolute;
	left: 0;
	bottom: -1px;
	z-index: 1;
}
.postWrap .postBox figure {
	height: 168px;
}
.date {
	font-size: 85%;
	color: #808080;
	margin-top: 2px;
}
.pager {
	width: 100%;
	text-align: center;
	margin-top: 20px;
}
.pager span, .pager a {
	display: inline-block;
	padding: 3px 10px;
	margin: 2px;
	transition: .1s;
}
.pager .next,.pager .prev {
	border: none;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.pager .current {
	background: #0090DD;
	color: #fff;
}
span.page-numbers.dots {
	border: none;
	padding: 0;
}


#aside {
	width: 30%;
}
.aside {
	display: block;
	position: sticky;
	top: 2.5%;
	background: #F9F9F3;
	padding: 30px 5%;
	text-align: left;
}
.aside dl:not(:first-of-type) {
	margin-top: 30px;
}
.aside dt {
	font-size: 12px;
	color: #808080;
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.aside ._serch dt {
	border-bottom: none;
	padding-bottom: 0;
}
.aside dt .fo-futura {
	color: #333;
	margin-right: 30px;
	font-size: 165%;
	font-weight: 600;
}
.aside ul {
	display: flex;
	flex-wrap: wrap;
}
.aside li {
	font-size: 95%;
	display: inline-block;
	padding: 5px 5px 5px 0;
}
.aside ._word li {
	width: auto;
	font-size: 80%;
	padding: 0;
}
.aside .txtSerch {
	display: flex;
}
.aside input.txtSearchInput {
	width: 70%;
	margin-right: 10px;
	background: #F9F9F3;
}
.aside .searchWrap input[type="submit"] {
	flex-grow: 1;
}


#fSerch {
	overflow: hidden;
	background: #F9F9F3;
	padding: 80px 0;
}
.boxCont {
	position: relative;
	z-index: 1;
}
.boxCont::before,.boxCont::after {
	content: "";
	display: block;
	background: url("../img/top/dots_box.png") top left no-repeat;
	background-size: contain;
	width: 120px;
	height: 120px;
	position: absolute;
	top: -30px;
	left: -30px;
	z-index: -5;
}
.boxCont::after {
	top: auto;
	left: auto;
	right: -30px;
	bottom: -30px;
	background-image: url("../img/top/slash_box.png")
}
.postHeader {
	text-align: left;
}
.postHeader .tag {
	margin-top: 0;
}
.postContents {
	margin-top: 30px;
	text-align: left;
	border-bottom: 1px solid #000;
	padding-bottom: 30px;
}
.postContents .thumb {
	margin-bottom: 30px;
	text-align: center;
}
.postContents img {
	display: block;
	margin: 10px auto;
}
.postContents h2 {
	margin: 1em 0 5px;
}
.postContents a {
	color: #8cc540;
	text-decoration: underline;
}
.btn._back a::after {
	display: none;
}
.btn._back a::before {
	content: "";
	display: inline-block;
	background: url(../img/arrow.svg) center center no-repeat;
	background-size: contain;
	width: 10px;
	height: 17px;
	margin-right: 15px;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.columnFoot_bnr {
	display: block;
}

















/*ieハック*/
@media screen\0  {
}

/*********************************/
/* タブレット用のスタイル記述 */
/*********************************/
@media screen and (max-width: 1420px) {
	.fixNav {
		top: auto;
		bottom: 15%;
	}
}
@media screen and (max-width: 1240px) {
	.postBox figure {
		height: 19.387vw
	}
	.pageTop {
		right: 0;
	}
}
@media screen and (max-width: 1200px) {
	#subPage .hLogo {
		width: 48%;
		left: -80px;
		padding: 10px 40px 30px 0
	}
	#subPage .hLogo img {
		max-height: 60px
	}
	#subPage .hTxtArea {
		right: 30%;
	}
}

/*********************************/
/* スマートフォン用のスタイル記述 */
/*********************************/
@media screen and (max-width: 780px) {
/*全体レイアウト
------------------------------------------------*/
	body {
		font-size: 1.4rem;
	}
	body.active {
		overflow: hidden;
	}
	article > section {
		padding: 40px 0;
	}
	/*header-------------------------------------*/
	#header {
		height: 85vw;
		background-size: auto 58%;
	}
	.headerWrap {
		position: static;
	}
	.hLogo {
		width: 100%;
		padding-right: 41px;
		padding: 15px 0 25px;
		background-size: 140% 100%;
		background-position: top right 68%;
	}
	.hLogo img {
		max-height: 60px;
	}
	.serchBtn {
		position: fixed;
		width: 45px;
		height: 45px;
		top: 10px;
		right: 10px;
	}
	.hTxtArea {
		bottom: 11vw;
	}
	.hTxtWrap {
		padding-bottom: 4vw;
    margin-bottom: 18vw;
	}
	.hTxtArea .txt02 {
		background: #3FCEF5;
	}
	#nav {
		padding: 50px 0 30px;
		height: auto!important;
	}
	#nav .flex-center {
		height: auto;
		display: block;
	}
	#nav .searchArea {
		padding: 10px 5%;
	}
	#nav .searchArea dt b {
		font-size: 16px;
	}
	#nav .searchArea dt span {
		margin-top: 0;
	}
	.nav {
		margin-top: 30px;
	}
	.nav li:not(:first-of-type) {
    margin-left: 30px;
	}
	.spLogo {
		margin-bottom: 20px;
	}
	.spLogo img {
		max-height: 42px;
	}
	/*subPage
	--------------------------------------------------*/
	#subPage #header {
		height: 58vw;
		height: 215px;
	}
	#subPage .headerWrap {
		padding-top: 90px;
	}
	#subPage .hLogo {
		width: 100%;
		left: 0;
		right: 0;
		background-size: 140% 100%;
		padding: 15px 0 22px
	}
	#subPage .hLogo img {
		max-height: 50px;
	}
	#subPage .hTxtArea {
		width: 100%;
		max-width: 350px;
		margin: 0 auto;
		position: static;
	}
	#subPage .hTxtWrap {
		padding-bottom: 1vw;
	}
	#subPage .hTxtWrap .txt01 {
		width: 80%;
		margin: 0 auto;
	}
	#subPage .hTxtArea .txt02 {
    width: 57%;
    bottom: -20px;
	}
	#subPage .headerWrap .sdgs {
    width: 34%;
    padding: 7px 14px;
	}
	.hNav {
		display: none
	}
	
	
	/*footer
	-----------------------------------------------------*/
	.fTop {
		display: block;
	}
	.fLogo {
		width: 80%;
		margin: 0 auto 30px;
	}
	.fNav {
		justify-content: center;
	}
	.fNav li:not(:first-of-type) {
    margin-left: 20px;
	}
	.fTxtWrap {
		display: block;
	}
	.fTxtWrap .sdgs img {
    max-height: 16px;
	}
	.fTxtWrap .sdgs {
		width: 190px;
		padding: 12px 5px;
		margin: 0 auto 10px;
	}
	.fBnr dl {
		display: block;
		padding: 15px 10px;
	}
	.fBnr dt {
		font-size: 15px;
		width: 100%;
		margin-bottom: 10px;
	}
	.fBnr dd {
		display: block;
	}
	.fBnr h2 {
		width: 100%;
		margin-bottom: 15px;
	}
	.fBnr h2 img {
    max-height: 32px;
	}
	.fBnr ._02 h2 {
    padding-left: 10px;
	}
	.fLinks {
		grid-template-columns: repeat(1,1fr);
	}
	.fLinks li img {
		max-height: none;
	}
	.pageTop {
		width: 44px;
		height: 44px;
		top: -22px;
	}
	.fixNav {
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
	}
	.fixNav li {
		width: 50%;
		margin: 0
	}
	.btn-holings {
		margin-top: 30px;
		grid-template-columns: repeat(1,1fr);
	}
	
	/*contents
	-------------------------------------------------------*/
	.searchArea {
		padding: 20px 5%;
	}
	.searchArea dt, .searchArea dd {
		padding: 10px 0;
		width: 100%;
	}
	.searchArea dt {
		display: flex;
		align-items: center;
    border: none;
    border-bottom: 1px solid #ccc;
	}
	.searchArea dt b {
		font-size: 20px;
		display: inline-block;
		margin-right: 15px;
	}
	.searchArea dd {
		text-align: center;
		padding-left: 0;
	}
	#nav .searchWrap ul {
		justify-content: flex-start;
	}
	.searchWrap._word {
		text-align: center;
	}
	input.txtSearchInput {
		width: 60%;
	}
	.searchWrap li a {
		font-size: 90%;
		line-height: 1;
	}
	.searchArea dl {
		display: block;
	}
	.searchArea dt span {
		margin-top: 5px;
	}
	.postBox,.postBox:nth-of-type(3n) {
		width: 49%;
		margin-right: 2%;
	}
	#newTopics .postBox:nth-of-type(4) {
		display: block;
	}
	.postBox:nth-of-type(even) {
		margin-right: 0;
	}
	.postBox figure {
		height: 30vw;
	}
	.postBox .ttl {
		line-height: 1.4;
	}
	.postBox li {
		font-size: 75%;
	}
	.tag li {
    margin: 1px 2px 1px 0;
	}
	.cate a span {
		width: 8px;
		height: 8px;
		border-width: 2px;
	}
	.cate a {
		padding-left: 10px;
		padding-right: 5px;
	}
	.tag a {
		font-size: 90%;
		padding: 3px 8px;
	}
	#newTopics {
		background-position: top left,bottom right;
		background-size: 45% auto;
	}
	#topContents {
		background-position: top -50px left,right bottom;
		background-size: 35% auto;
		background-repeat: no-repeat;
	}
	#topContents .postBox {
		background: #F9F9F3
	}
	#newTopics .postBox figure {
		padding: 5px;
	}
	.btn {
		font-size: 20px;
	}
	#topPickUp {
		margin-top: 60px;
	}
	#topPickUp .secTtl {
		background: #F9F9F3
	}
	.secTtl {
		flex-wrap: wrap;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
	.secTtl > .fo-futura {
		font-size: 34px;
		display: inline-block;
		margin-right: 15px;
		background-size: auto 34px;
		background-position: left center;
		padding-left: 45px;
	}
	.secTtl .btn {
		margin: 0 0 0 auto;
		top: 120%;
	}
	.secTtl .btn a {
		padding: 5px 10px;
		line-height: 1.5;
		font-size: 90%;
	}
	.secTtl .btn a::after {
		width: 6px;
		height: 13px;
		margin-left: 7px;
	}
	#ranking {
		padding: 60px 0;
	}
	#ranking .secTtl {
		margin-bottom: 50px;
	}
	#ranking .postBox figure {
    height: 26vw;
	}
	.postSlider .slick-arrow {
		width: 40px;
		height: 40px;
		right: -5%
	}
	.postSlider .slick-arrow.prev {
		right: auto;
		left: -5%;
	}
	.postSlider {
		margin: 0;
		padding: 0 5px;
	}
	.boxCont::before, .boxCont::after {
		left: -20px;
		top: -20px;
		width: 80px;
		height: 80px;
	}
	.boxCont::after {
		left: auto;
		top: auto;
		right: -20px;
		bottom: -20px;
	}
	#fSerch {
		padding: 40px 0;
	}
	.appBnrArea {
		padding: 40px 0;
		background-size: 30% auto, 36% auto;
	}


	/*subpage
	----------------------------------------------------*/
	.postContWrap {
		padding-bottom: 60px;
		background-size: 35% auto;
	}
	.postArea {
		display: block;
	}
	.postWrap {
		width: 100%;
		background: #fff;
	}
	.postTtl {
		font-size: 18px;
		padding-bottom: 10px;
		margin-bottom: 5px;
	}
	.postWrap .postBox figure {
		height: 30vw
	}
	#aside {
		display: none!important;
	}
	.aside {
		position: relative;
	}
	
	
	
	
	
	
	
	
	
}