@charset "utf-8";
/*=============================================================
 base Setting
=============================================================*/

/*=============================================================
 header
=============================================================*/
#header {
	background-color: rgba(255, 255, 255, 1);
	width: 100%;
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 21;
}

#header a {
	display: block;
	color: var(--keyColor);
}

header .headerInner {}

header .headerInner .innerPart {}


/* hdr-logo
-------------------------------------------------------------*/
#hdr-logo {
	text-align: center;
}

/* globalNavSet
-------------------------------------------------------------*/
#globalNavSet {
	position: relative;
}

#globalNavSet>dt {
	display: none;
}

/* delete JS Style */
@media only screen and (min-width:768px) {
	#container {
		margin-top: 0 !important;
	}
}

/*#globalNavSet>dd>div{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row-reverse;
}*/
/* boxGNavBg */
.boxGNavBg {
	background: rgba(0, 0, 0, .5);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	visibility: hidden;
	opacity: 0;
	transition: .2s;
}

/* globalNav
-------------------------------------------------------------*/
#globalNav {
	width: 100%;
	margin-top: 59px;
}

#globalNav>li {
	line-height: 1.2;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	position: relative;
}

#globalNav>li>a {
	text-decoration: none;
	display: block;
	box-sizing: border-box;
	height: 100%;
	padding: 12px 30px;
	position: relative;
	font-size: 12px;
}

#globalNav>li#gb-list>a {
	padding-top: 19px;
	padding-bottom: 19px;
}

#globalNav>li:last-child>a {
	font-size: 14px;
	font-weight: 600;
	color: #858585;
	padding: 20px 30px;
}

#globalNav>li>a::after {
	content: '';
	width: 18px;
	height: 6.5px;
	background: url("../img/hdr-arw.svg") no-repeat;
	background-size: 18px 6.5px;
	position: absolute;
	top: calc((50% - 3px));
	right: 30px;
}

#globalNav>li>a>span {
	display: block;
	font-size: 15px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 600;
}

header .headerInner .innerPart {
	padding: 0 30px;
	box-sizing: border-box;
}

header .headerInner .popularArticles .ttl {
	font-size: 16px;
	font-weight: 700;
	color: #333333;
	margin-top: 40px;
}

.popularArticles .popularArticlesItems {
	margin-top: 12px;
}

.popularArticles .popularArticlesItems .text-box {
	background-color: inherit;
	border: none;
	margin-top: 5px;
	border-radius: 0;
	padding: 0;
	position: static;
}

.popularArticles .popularArticlesItems a:hover .text-box {
	border: none;
}

.popularArticles .popularArticlesItems li:nth-child(n+4) {
	display: none;
}

.popularArticles .popularArticlesItems li+li {
	margin-top: 20px;
}

.popularArticles .popularArticlesItems li a {
	display: block;
}

.popularArticles .popularArticlesItems li a figure {
	overflow: hidden;
}

.popularArticles .popularArticlesItems li a figure img {
	transition: all .3s;
}

.popularArticles .popularArticlesItems li a:hover figure img {
	transform: scale(1.05);
}

.popularArticles .popularArticlesItems li a:hover {
	text-decoration: none;
}

.popularArticles .popularArticlesItems li a .text-box .tag-ttl,
.popularArticles .popularArticlesItems li a .popularArticlesTag {
	display: inline-block;
	font-size: 10px;
	line-height: 1.2;
	font-family: 'Alexandria', sans-serif;
	color: #fff;
	background: #ccc;
	padding: 5px 10px 4px;
	box-sizing: border-box;
	margin: 4px 0 6px;
}

.popularArticles .popularArticlesItems li a .text-box .tag-ttl.color01,
.popularArticles .popularArticlesItems li a .popularArticlesTag.text-box.color01 {
	background: var(--color01);
}

.popularArticles .popularArticlesItems li a .text-box .tag-ttl.color02,
.popularArticles .popularArticlesItems li a .popularArticlesTag.color02 {
	background: var(--color02);
}

.popularArticles .popularArticlesItems li a .text-box .tag-ttl.color03,
.popularArticles .popularArticlesItems li a .popularArticlesTag.color03 {
	background: var(--color03);
}

.popularArticles .popularArticlesItems li a .text-box .tag-ttl.color04,
.popularArticles .popularArticlesItems li a .popularArticlesTag.color04 {
	background: var(--color04);
}

.popularArticles .popularArticlesItems li a .text-box .date,
.popularArticles .popularArticlesItems li a .popularArticlesDate {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: #707070;
	margin-bottom: 5px;
}

.popularArticles .popularArticlesItems li a .text-box .text,
.popularArticles .popularArticlesItems li a .popularArticlesTtl {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #000;
}

.popularArticles .popularArticlesItems li a:hover .text-box .text,
.popularArticles .popularArticlesItems li a:hover .popularArticlesTtl {
	color: var(--keyColor);
}

.navFooter {
	margin-top: 40px;
	text-align: center;
}

.navFooter figure {
	margin-bottom: 15px;
}

.navFooter img {
	width: 150px;
}

.navFooter a {
	font-size: 12px;
	font-weight: 400;
	color: #000 !important;
}

.navFooter a:hover {
	text-decoration: underline;
}

/*=============================================================
 footer
=============================================================*/
#footer p {
	font-size: 12px;
	line-height: 1.2;
	font-family: 'Alexandria', sans-serif;
	text-align: center;
	padding: 30px 0;
	box-sizing: border-box;
}



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 PC Only
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (min-width:1024px) {
	header {
		max-width: 250px;
	}

	header .headerInner {
		margin: 50px auto;
	}

	html:not(.touchDevice) #globalNav>li>a:hover,
	#globalNav>.act>a {
		color: #fff !important;
		background-color: var(--keyColor) !important;
	}

	html:not(.touchDevice) #globalNav>li>a:hover::after,
	#globalNav>.act>a::after {
		background: url("../img/hdr-arw-on.svg") no-repeat;
	}
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:1023px) {

	#header {
		position: fixed;
		height: 70px;
		padding-top: 0;
	}

	#header::after {
		content: '';
		height: 2px;
		background: linear-gradient(90deg, rgba(252, 171, 34, 1) 0%, rgba(240, 52, 0, 1) 25%, rgba(200, 0, 103, 1) 50%, rgba(128, 47, 146, 1) 75%, rgba(63, 148, 184, 1) 100%);
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	#header>.headerInner {
		padding: 0 15px;
		box-sizing: border-box;
	}

	header .headerInner .innerPart {
		padding: 0 15px;
	}

	header .headerInner .popularArticles .ttl {
		margin-top: 30px;
	}

	/* hdr-logo
-------------------------------------------------------------*/
	#hdr-logo {
		width: 70px;
		position: static;
		margin-top: 12px;
	}

	/* globalNavSet
-------------------------------------------------------------*/
	#globalNavSet {
		position: static;
	}

	#globalNavSet>dt {
		background-color: var(--keyColor);
		display: block;
		width: 45px;
		height: 45px;
		position: absolute;
		border-radius: 10px;
		top: 12px;
		right: 15px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	#globalNavSet>dt::before,
	#globalNavSet>dt::after {
		content: "";
		background-color: #fff;
		display: block;
		width: 18px;
		height: 2px;
		position: absolute;
		top: 22px;
		left: 50%;
		margin-left: -9px;
		z-index: 1;
	}

	#globalNavSet>dt>span::before {
		content: "";
		width: 18px;
		height: 12px;
		margin-left: -9px;
		border-top: 2px solid #fff;
		border-bottom: 2px solid #fff;
		top: 15px;
		left: 50%;
		position: absolute;
	}

	#globalNavSet>dt>span .open,
	#globalNavSet.open>dt>span .close {
		display: none;
	}

	#globalNavSet.open>dt>span .open {
		display: inherit;
	}

	#globalNavSet>dt::before,
	#globalNavSet>dt::after,
	#globalNavSet>dt>span {
		transition: all 0.3s ease;
	}

	#globalNavSet.open>dt>span::before {
		border-color: rgba(255, 255, 255, 0);
	}

	#globalNavSet.open>dt::before {
		transform: rotate(45deg);
	}

	#globalNavSet.open>dt::after {
		transform: rotate(-45deg);
	}

	#globalNavSet>dt>span>span {
		display: none;
	}

	#globalNavSet>dd {
		color: #000;
		background-color: #fff;
		box-sizing: border-box;
		width: 100%;
		visibility: hidden;
		overflow: hidden;
		position: fixed;
		top: 70px;
		bottom: 100%;
		left: 0;
		z-index: 71;
		opacity: 0;
		transition: all 0.3s ease;
		height: 0;
	}

	#globalNavSet.open>dd {
		height: calc(100vh - 70px);
		visibility: visible;
		/*bottom:0;*/
		opacity: 1;
	}

	#globalNavSet>dd>div {
		display: block;
	}

	#globalNavSet>dd>* {
		visibility: hidden;
	}

	#globalNavSet.open>dd>* {
		visibility: inherit;
	}

	html.gNavOpen,
	html.gNavOpen body {
		height: 100%;
		overflow: hidden;
	}

	html.gNavOpen #globalNavSet>dd>div {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		overflow: auto;
		position: relative;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 150px;
	}

	/* boxGNavBg */
	html.gNavOpen .boxGNavBg {
		visibility: visible;
		opacity: 1;
	}

	/* hdr-search
-------------------------------------------------------------*/
	#hdr-search {
		/*dummy*/
		width: auto;
		margin: 0 4%;
		position: relative;
	}

	/* globalNav
-------------------------------------------------------------*/
	#globalNav {
		display: block;
		margin-top: 0;
	}

	#globalNav>li {
		text-align: left;
		padding: 0 !important;
		border-bottom: 1px solid #FAE5ED;
	}

	#globalNav>li:before,
	#globalNav>li:last-child:after {
		display: none;
	}

	#globalNav>li>a {
		font-weight: bold;
		box-sizing: border-box;
		padding: 12px 15px 12px 15px;
	}

	#globalNav>li:last-child>a {
		color: #333;
		padding: 20px 15px 20px 15px;
	}

	#globalNav>li>a::after {
		right: 15px;
	}

	#globalNav>li>a:hover {
		background: none !important;
	}


	.popularArticles .popularArticlesItems li a {
		display: flex !important;
		flex-direction: row;
		column-gap: 12px;
	}

	.popularArticles .popularArticlesItems li a:hover {
		text-decoration: none;
	}

	.popularArticles .popularArticlesItems li a>* {
		width: calc((100% - 12px) / 2);
	}

	/* hdr-gbDrop
-------------------------------------------------------------*/
	.hdr-gbDrop {
		display: none !important;
	}


}