@charset "utf-8";

/* -------------------------------------------------------------------------
	NEWS
========================================================================= */
#news,
#diary { background: url("../news/img/bg.svg") right 15% top 1080px / calc((18.6% / 136.6)* 100) no-repeat; }
/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#news,
#diary { background: none; }
}

.newsNavi {}
#listNavi {
	padding: 50px 0 90px;
	display: flex;
	justify-content: center;
	gap: 40px;
	}
#listNavi ul {
	display:  flex;
	flex-wrap: wrap;
	gap: 10px 40px;
	font-size: var(--font-size-large);
	font-weight: 500;
	text-align: center;
	}
#listNavi ul li > a {
	padding-bottom: 5px;
	position: relative;
	display: block;
	letter-spacing: 0.3rem;
	transition: all 0.3s ease;
	}
#listNavi ul li > a:hover {
	opacity: 1;
	transition: all 0.3s ease;
	}
#listNavi ul li > a::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--accent-color);
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform 0.3s; 
	}
#listNavi ul li > a:hover::after {
	transform: scale(1, 1);
	transform-origin: left top;
	}



/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#listNavi {
	padding: 28px 0 48px;
	flex-direction: column;
	gap: 10px;
	}
#listNavi ul {
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-wrap: nowrap;
	gap: 0;
	border: 1px solid var(--accent-color);
	box-sizing: border-box;
	font-size: var(--font-size-small);
	font-weight: 500;
	text-align: center;
	line-height: 100%;
	}
#listNavi ul {
	}
#listNavi ul li {
	height: 100%;
	display: flex;
	width: calc(100% / 4);
	}
#listNavi ul li > a {
	width: 100%;
	height: 100%;
	min-height: 25px;
	padding: 10px 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	letter-spacing: 0;
	color: var(--accent-color);
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid var(--accent-color);
	}
#listNavi ul li:last-of-type > a { border-right: none; }
/*#listNavi .lnWajiro ul li:last-of-type > a { border-right: none; }*/
#listNavi ul li > a:hover,
#listNavi ul li > a.now {
	color: #FFF;
	background: var(--accent-color);;
	}
#listNavi ul li > a::after { display: none; }
}


/* ------------------------ */
.newsWrapper,
.diaryWrapper {
	padding-bottom: 85px;
	display: flex;
	justify-content: space-between;
	}


#newsList {}
.newsContainer,
.diaryContainer {
	width: 72%;
	word-break: break-all;
	}
.categoryTitle {
	padding: 0 0 20px 42px;
	position: relative;
	color: #000;
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	}
.categoryTitle::before {
	content: "";
	width: 27px;
	height: 27px;
	position: absolute;
	top: -2px;
	left: 0;
	display: block;
	background: url("../img/icon_rainbow.svg") top left / contain no-repeat;
	}
.ctEng {
	padding-left: 15px;
	color: var(--def-font-color);
	font-size: var(--font-size-xsmall);
	font-family: var(--font-family-english);
	vertical-align: middle;
	}

.listWrapper {}
.listWrapper > dl:first-of-type { border-top: 1px dashed #ACACAC; }
.listWrapper > dl {
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	border-bottom: 1px dashed #ACACAC;
	}
.listTitle {
	order: 1;
	width: calc((49% / 72)* 100);
	font-size: var(--font-size-large);
	}
.listTitle > a {
	min-height: 60px;
	display: flex;
	align-items: center;
	color: #000;
	transition: all 0.2s ease;
	}
.listTitle > a:hover {
	color: var(--accent-color);
	transition: all 0.2s ease;
	}
.date {
	width: calc((9% / 72)* 100);
	color: var(--accent-color);
	font-size: var(--font-size-medium);
	font-family: var(--font-family-english);
	}
#newsPages .date { width: auto; }
#diaryPages .date { width: auto; }
.category {
	width: calc((11.8% / 72)* 100);
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: var(--font-size-med-small);
	text-align: center;
	letter-spacing: 0.1rem;
	}

.category > a { padding: 3px; }
/*.listWrapper .category > a:not(:first-of-type) { display: none; }*/

a.lcPrimary { color: var(--accent-color); }
.lcSecondary {
	background: var(--accent-color);
	border-radius: 50px;
	}
a.lcSecondary,
a.lcSecondary:hover { color: #FFF; }
/*.listTansui {}
.listWajiro > .listTitle > a:hover { color: var(--accent-sub-color); }
.listWajiro > .date,
.listWajiro .category > a.lcPrimary { color: var(--accent-sub-color); }
.listWajiro .category > .lcSecondary { background: var(--accent-sub-color); }*/

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
.newsWrapper,
.diaryWrapper { flex-direction: column; }
.categoryTitle {
	padding: 0 0 20px 42px;
	font-size: 2.2rem;
	}
.newsContainer,
.diaryContainer { width: 100%; }

.listWrapper > dl {
	padding: 10px 0 12px;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 5px;
	}
.listTitle { width: 100%; }
.listTitle > a { min-height: auto; }
.date {
	min-width: 70px;
	font-size: var(--font-size-small);
	}
.category {
	width: auto;
	flex-direction: row;
	gap: 5px;
	font-size: var(--font-size-small);
	}
.category > a { padding: 1px; }
.lcPrimary { font-size: var(--font-size-med-small); }
.lcSecondary { min-width: 94px; }
#newsPages .date {
	font-size: var(--font-size-medium);
	}
#newsPages .lcSecondary {
	min-width: 110px;
	padding: 4px;
	font-size: var(--font-size-med-small);
	}
}

#pager {
	margin: 78px auto 70px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	}
#pager > li,
#pager > li a {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	border-radius: 50px;
	}
#pager.pagNumber > li {
	width: 30px;
	height: 30px;
	font-size: var(--font-size-large);
	font-weight: 500;
	font-family: var(--font-family-english);
	line-height: 100%;
	}
#pager > li a {
	width: 100%;
	height: 100%;
	position: relative; 
	background: var(--accent-sub-color-3rd);
	color: #000;
	}
#pager .prev > a::before, 
#pager .next > a::before {
	content: "";
	width: 5px;
	height: 5px;
	margin: auto;
	position: absolute;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	}
#pager .prev > a::before {
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	}
#pager .next > a::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	}
#pager.pagNumber .prev > a,
#pager.pagNumber .next > a { color: transparent; }
#pager.pagNumber .prev > a::before { margin-left: 3px; }
#pager.pagNumber .next > a::before { margin-right: 3px; }
#pager.pagDetails { gap: 50px; }
#pager.pagDetails > li a { padding: 1px 16px 2px; }
#pager.pagDetails .prev > a { padding-left: 30px; }
#pager.pagDetails .next > a { padding-right: 30px; }
#pager.pagDetails .prev > a::before { left: 15px; }
#pager.pagDetails .next > a::before { right: 15px; }

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#pager { margin: 40px auto 0; }
#pager.pagDetails { gap: 15px; }
#pager.pagDetails > li {
	font-size: var(--font-size-xsmall);
	line-height: 100%;
	}
#pager.pagDetails > li a { padding: 3px 10px 4px; }
#pager.pagDetails .prev > a { padding-left: 22px; }
#pager.pagDetails .next > a { padding-right: 22px; }
#pager.pagDetails .prev > a::before { left: 11px; }
#pager.pagDetails .next > a::before { right: 11px; }
}

#archivesNavi { width: 18%; }
#archivesNavi > dt {
	padding-bottom: 20px;
	font-size: var(--font-size-large);
	font-weight: 500;
	}
#archivesNavi > dd {
	padding: 15px 18px 8px;
	border: 1px solid var(--accent-color);
	background: #FFF;
	letter-spacing: 0.1rem;
	}
#archivesNavi > dd > ul {
	display: flex;
	flex-direction: column;
	gap: 0;
	}
#archivesNavi .toggle { display: none; }
#archivesNavi .arcLabel {
	width: 100%;
	margin-bottom: 8px;
	display: block;
	position: relative;
	z-index: 10;
	cursor: pointer;
	color: var(--accent-color);
	}
#archivesNavi .arcLabel::before {
	content: "";
	display: block;
    width: 6px;
    height: 6px;
	position: absolute;
	top: 5px;
	right: 8px;
    border-top: 1px solid var(--accent-color);
    border-right: 1px solid var(--accent-color);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
	/*opacity: 0.6;*/
	}
#archivesNavi .arcLabel,
#archivesNavi .arcMonth {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: all .3s ease-out;
	}
#archivesNavi .arcMonth {
	height: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	transform: translateY(-10px);
	opacity: 0.5;
	overflow: hidden;
	}
#archivesNavi .arcMonth > li:last-of-type { margin-bottom: 10px; }
#archivesNavi .arcMonth > li a {
	padding-left: 28px;
	position: relative;
	color: var(--accent-color);
	font-size: var(--font-size-normal);
	}
#archivesNavi .arcMonth > li a::before  {
	content: "";
	width: 16px;
	height: 16px;
	top: 0;
	bottom: 0;
	left: 15px;
	margin: auto;
	position: absolute;
	}
#archivesNavi .toggle:checked + .arcLabel + .arcMonth {
	height: auto;
	opacity: 1;
	transform: translateY(0);
	transition: all .3s ease-out;
	}
#archivesNavi .toggle:checked + .arcLabel { cursor: pointer; }
#archivesNavi .toggle:checked + .arcLabel::before {
	top: 10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#archivesNavi { width: 100%; margin-top: 40px; }
}


/* ------------------------ */
#newsPages {}
#newsPages .category { 
	width: auto!important;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 3px 5px;
	}
#newsPages .category > a {
	width: auto;
	min-width: 118px;
	}

.pageData {
	display: flex;
	align-items: center;
	gap: 5px 30px;
	}
.pageTitle {
	width: 100%;
	padding: 20px 0 25px;
	font-size: 2.6rem;
	text-align: left;
	line-height: 120%;
	letter-spacing: 0.2rem;
	border-bottom: 1px solid #ACACAC;
	}
.pageText {
	padding: 25px 0;
	font-size: var(--font-size-large);
	line-height: 180%;
	}
.pageText > img {
	width: auto;
	max-width: 100%;
	}
.pageText > p img {
	width: auto;
	max-width: 100%;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#newsPages .category > a {
	min-width: auto;
	padding: 3px 10px;
	}
.pageData { flex-wrap: wrap; }
.pageTitle {
	font-size: 2.2rem;
	line-height: 120%;
	}
.pageText {
	padding: 25px 0;
	font-size: var(--font-size-medium);
	line-height: 180%;
	}
}


/* -------------------------------------------------------------------------
	DIARY
========================================================================= */
#diary {}
.diaryNavi {}

.diaryWrapper {}
#diaryList {}
#diaryList > .categoryTitle::before {
	width: 30px;
	height: 30px;
	top: -2px;
	background: url("../img/icon_sun.svg") top left / contain no-repeat;
	}

.diaryContainer {}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
}