@charset "utf-8";

/*-------------------------------
	キービジュアル
-------------------------------*/

.Keyvisual{
	background-image: url(../images/news/bg_keyvisual.jpg);
	background-image: image-set(url(../images/news/bg_keyvisual.jpg) 1x, url(../images/news/bg_keyvisual@2x.jpg) 2x);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1380px) and (min-width: 769px){

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

}



/*-------------------------------
	共通
-------------------------------*/

.News__inner{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.News__content{
	transition: var(--transition);
	width: calc(100% - 30rem);
	padding-right: 5rem;
}

/*----- サイドバー */
.News-sidebar{
	transition: var(--transition);
	width: 30rem;
}
.News-sidebar-block:not(:last-child){
	margin-bottom: 7.5rem;
}
.News-sidebar-block__title{
	background: var(--maincolor);
	width: 100%;
	height: 5rem;
	padding: .5rem 2rem;
	font-size: 2rem;
	line-height: 1;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.News-sidebar-block__list{
	padding-left: 1rem;
	padding-right: 1rem;
}
.News-sidebar-block__list-item{
	width: 100%;
	border-bottom: 1px solid var(--graycolor);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.News-sidebar-block__list-item::before{
	content: "";
	display: block;
	width: 1rem;
	height: 1px;
	background: var(--subcolor1);
}
.News-sidebar-block__list-item a{
	width: calc(100% - 1rem);
	padding-left: 1rem;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
	font-weight: 700;
	display: block;
	opacity: 1 !important;
}
.News-sidebar-block__list-item a:hover{
	color: var(--maincolor);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1380px) and (min-width: 769px){

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.News__content{
		width: calc(100% - 25rem);
		padding-right: 5rem;
	}

	/*----- サイドバー */
	.News-sidebar{
		width: 25rem;
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

	.News__inner{
		flex-direction: column;
	}

	.News__content{
		width: 100%;
		padding-right: 0;
	}

	/*----- サイドバー */
	.News-sidebar{
		width: 60rem;
		margin-top: 10rem;
		margin-left: auto;
		margin-right: auto;
	}

}
@media screen and (max-width:768px){

	.News__inner{
		flex-direction: column;
	}

	/*----- サイドバー */
	.News-sidebar{
		width: calc(100% - (var(--padding-leftright) * 2));
		margin-top: 12.5rem;
		margin-left: auto;
		margin-right: auto;
	}
	.News-sidebar-block:not(:last-child){
		margin-bottom: 7.5rem;
	}
	.News-sidebar-block__title{
		height: 7.5rem;
		padding: .5rem 2.5rem;
		font-size: 3rem;
	}
	.News-sidebar-block__list{
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.News-sidebar-block__list-item::before{
		width: 2rem;
	}
	.News-sidebar-block__list-item a{
		width: calc(100% - 2rem);
		padding-left: 2.5rem;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

}



/*-------------------------------
	一覧
-------------------------------*/

.News-block{
	width: 100%;
}
.News-block a{
	width: 100%;
	padding: 2.2rem 1rem;
	border-bottom: 1px solid var(--graycolor);
	display: block;
	position: relative;
	opacity: 1 !important;
}
.News-block:first-child a{
	border-top: 1px solid var(--graycolor);
}
.News-block a::after{
	background: var(--maincolor);
	transition: transform .3s ease-in-out;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	transform: scale(0, 1);
	transform-origin: right top;
}
.News-block__data{
	width: 100%;
	margin-bottom: .8rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.News-block__time{
	transition: var(--transition);
	font-size: 1.4rem;
    margin-right: 1.5rem;
    line-height: 1;
    display: block;
}
.News-block__category{
	transition: var(--transition);
    min-width: 6.8rem;
    height: 2.5rem;
    font-size: 1.4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-weight: 700;
    border-radius: 50rem;
    letter-spacing: 0;
    background: var(--graycolor);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.News-block__title{
	transition: var(--transition);
	width: 100%;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.News-block a:hover::after{
	transform-origin: left top;
    transform: scale(1, 1);
}
.News-block a:hover .News-block__time{
	color: var(--maincolor);
}
.News-block a:hover .News-block__title{
	color: var(--maincolor);
}
.News-block a:hover .News-block__category{
	background: var(--maincolor);
	color: #fff;
}

.News-block.-new .News-block__data::after{
	content: "NEW";
	border: 1px solid var(--subcolor1);
	color: var(--subcolor1);
	transition: var(--transition);
	width: 6.8rem;
	height: 2.5rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-left: 1rem;
    font-weight: 700;
	border-radius: 50rem;
    letter-spacing: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
}
.News-block.-new a:hover .News-block__data::after{
	background: var(--subcolor1);
	color: #fff;
}

/*----- ページャー */
.wp-pagenavi-wrap{
	width: 100%;
	margin-top: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wp-pagenavi{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wp-pagenavi > *{
	border: 1px solid var(--maincolor);
	width: 5rem;
	height: 5rem;
	margin-left: .6rem;
	margin-right: .6rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wp-pagenavi > a{
	color: var(--maincolor);
	font-weight: 700;
	opacity: 1 !important;
}
.wp-pagenavi > *:hover,
.wp-pagenavi > .current{
	background: var(--maincolor);
	font-weight: 700;
	color: #fff;
}
.wp-pagenavi > a:hover{
	transform: scale(.95);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1380px) and (min-width: 769px){

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.News__content{
		width: 100%;
		padding-right: 0;
	}

	.News-block a{
		padding: 4rem 1rem 3rem;
	}
	.News-block__data{
		margin-bottom: 2rem;
	}
	.News-block__time{
		font-size: 2.6rem;
		margin-right: 3rem;
	}
	.News-block__category{
        min-width: 15.8rem;
        height: 4.5rem;
        font-size: 2.4rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
	}
	.News-block__title{
		white-space: normal;
		text-overflow: unset;
	}

	.News-block a:hover .News-block__time{
		color: var(--maincolor);
	}
	.News-block a:hover .News-block__title{
		color: var(--maincolor);
	}
	.News-block a:hover .News-block__category{
		background: var(--maincolor);
		color: #fff;
	}

	.News-block.-new .News-block__data::after{
		width: 15.8rem;
        height: 4.5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
		margin-left: 1.5rem;
        font-size: 2.4rem;
	}
	.News-block.-new a:hover .News-block__data::after{
		background: var(--subcolor1);
		color: #fff;
	}

	/*----- ページャー */
	.wp-pagenavi > *{
		width: 7.5rem;
		height: 7.5rem;
		margin-left: 1rem;
		margin-right: 1rem;
	}

}



/*-------------------------------
	詳細
-------------------------------*/

.Detail-header{
	margin-bottom: 5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--graycolor);
}
.Detail-header__data{
	width: 100%;
    margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.Detail-header__time{
	font-size: 1.4rem;
    margin-right: 1.5rem;
    line-height: 1;
    display: block;
}
.Detail-header__category{
	transition: var(--transition);
    min-width: 6.8rem;
    height: 2.5rem;
    font-size: 1.4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-weight: 700;
    border-radius: 50rem;
    letter-spacing: 0;
    background: var(--graycolor);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.Detail-header__title{
	font-size: 2.8rem;
	font-weight: 700;
	line-height: calc(4 / 2.8);
}
.Detail-image{
	max-width: 100%;
}
.Detail-image img{
	max-width: 100%;
	height: auto;
}
.Detail-body{
	border-bottom: 1px solid var(--graycolor);
	padding-bottom: 5rem;
}
.Detail-body *{
	font-weight: 500;
}
.Detail-body > *:not(:last-child){
	margin-bottom: 1.5em;
}
.Detail-body strong{
	font-weight: 700;
}
.Detail-body a{
	color: var(--maincolor);
	text-decoration: underline;
}
.Detail-body ul{
	padding-left: 1.5em;
	list-style-type: disc;
}
.Detail-body ol{
	padding-left: 1.5em;
	list-style-type: decimal;
}
.Detail-image + .Detail-body{
	margin-top: 3.5rem;
}

.News__content.-new .Detail-header__data::after{
	content: "NEW";
    border: 1px solid var(--subcolor1);
    color: var(--subcolor1);
    transition: var(--transition);
    width: 6.8rem;
    height: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 50rem;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Detail-nav{
	width: 100%;
	height: 8rem;
	margin-top: 5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}
.Detail-nav__item.-prev a{
	flex-direction: row-reverse;
}
.Detail-nav__item.-prev .C-Arrow{
	margin-left: 0;
	margin-right: 1rem;
	transform: scale(-1,1);
}
.Detail-nav__item.-prev a:hover .C-Arrow{
	transform: scale(-1,1) translateX(.5rem);
}
.Detail-nav__button{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

/* 「前の記事へ」が無い場合 */
.Detail-nav:has(.Detail-nav__button:first-child){
	justify-content: flex-end;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1380px) and (min-width: 769px){

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.Detail-header{
		padding-bottom: 4rem;
	}
	.Detail-header__data{
        margin-bottom: 3.5rem;
	}
	.Detail-header__time{
        font-size: 2.6rem;
        margin-right: 3rem;
	}
	.Detail-header__category{
		min-width: 15.8rem;
        height: 4.5rem;
        font-size: 2.4rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
	}
	.Detail-header__title{
		font-size: 3.2rem;
		line-height: calc(5 / 3.2);
	}
	.Detail-body{
		padding-bottom: 7.5rem;
	}
	.Detail-image + .Detail-body{
		margin-top: 5rem;
	}

	.News__content.-new .Detail-header__data::after{
		width: 15.8rem;
        height: 4.5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        margin-left: 1.5rem;
        font-size: 2.4rem;
	}

	.Detail-nav{
		height: auto;
		margin-top: 7.5rem;
		flex-wrap: wrap;
	}
	.Detail-nav__item{
		margin-bottom: 7.5rem;
	}
	.Detail-nav__item.-prev .C-Arrow{
		margin-right: 3rem;
	}
	.Detail-nav__button{
		position: static;
		order: 99;
	}

	/* 「前の記事へ」が無い場合 */
	.Detail-nav:has(.Detail-nav__button:first-child){
		flex-direction: column;
	}
	.Detail-nav:has(.Detail-nav__button:first-child) .Detail-nav__item.-next{
		align-self: flex-end;
	}

	/* 「次の記事へ」が無い場合 */
	.Detail-nav:has(.Detail-nav__button:last-child){
		flex-direction: column;
	}
	.Detail-nav:has(.Detail-nav__button:last-child) .Detail-nav__item.-prev{
		align-self: flex-start;
	}

}