@charset "utf-8";

/* -------------------------------------------------- */
/* #block-news */
/* -------------------------------------------------- */
#block-news .news-box {flex: 1;}
#block-news .news-box li:first-child {border-top: 1px solid #999;}
#block-news .news-box li {border-bottom: 1px solid #999;}
#block-news .news-box li a {display: flex;padding: 30px 40px 30px 15px;position: relative;}
#block-news .news-box li a:after {content: '';width: 16px;height: 13px;display: block;position: absolute;right: 15px;top: 0;bottom: 0;margin: auto;background: url(../img/icon-arrow-red.svg) center / cover no-repeat;transition: .3s;}
#block-news .news-box li a:hover:after {right: 10px;}
#block-news .news-box li a .date {width: 7em;font-weight: bold;}
#block-news .news-box li a .txt {flex: 1;}
#block-news .pager{margin-top:50px;font-family: 'Reddit Sans';text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:15px;}
#block-news .pager > li a,
#block-news .pager > li span{white-space:nowrap;display:block;width:31px;height:31px;position:relative;display:flex;align-items:center;justify-content:center;line-height:1;}
#block-news .pager > li.current span::after{content:"";display:block;width:100%;height:100%;border:1px solid #333;border-radius:100%;position:absolute;top:0;left:0;box-sizing:border-box;pointer-events:none;}
#block-news .pager > li.next a::before{content:"";display:block;width:15px;height:12px;background:url(../img/icon-arrow-red.svg) no-repeat;background-size:contain;}
#block-news .pager > li.prev a::before{content:"";display:block;width:15px;height:12px;background:url(../img/icon-arrow-red.svg) no-repeat;background-size:contain;transform:scale(-1,1);}

/* -------------------------------------------------- */
/* #block-detail */
/* -------------------------------------------------- */
#block-detail .editarea{max-width:900px;margin:auto;}
#block-detail .editarea img{display:block;margin:40px auto;}
#block-detail .editarea h2{font-size:3.4rem;font-weight:bold;border-bottom:2px solid #979797;line-height:1.2;padding-bottom:15px;margin:80px auto 40px;position:relative;}
#block-detail .editarea h2::after{content:"";display:block;width:50px;height:2px;background:#d5443f;position:absolute;left:0;bottom:-2px;}
#block-detail .editarea h3{font-size:2.8rem;font-weight:bold;position:relative;padding:0 0 12px 20px;margin:50px auto 0;line-height:1.5;}
#block-detail .editarea h3::before{content:"";display:block;width:6px;height:30px;background:#d5423c;position:absolute;left:0;top:8px;}
#block-detail .editarea h3:first-child{margin-top:0;}
#block-detail .editarea h4 {font-size:2.4rem;color: #9f312d; font-weight:bold;line-height:1.2;padding-bottom:15px;margin:30px auto 0;position:relative;}
#block-detail .editarea ul,
#block-detail .editarea ol{margin:40px auto;counter-reset:item;}
#block-detail .editarea ul > li,
#block-detail .editarea ol > li{position:relative;padding-left:28px;counter-increment:item;}
#block-detail .editarea ul > li::before{content:"";display:block;width:7px;height:7px;background:#d5423c;position:absolute;left:0;top:13px;}
#block-detail .editarea ol > li::before{content:counter(item)".";display:block;position:absolute;left:0;top:5px;line-height:1;font-family: 'Reddit Sans';color:#d5423c;font-weight:bold;font-size:2rem;}
#block-detail .editarea ul > li + li,
#block-detail .editarea ol > li + li{margin-top:8px;}
#block-detail .editarea a:not(.wp-block-button__link){text-decoration:underline;}
#block-detail .editarea a:hover{text-decoration:none;}

#block-detail .otherarea{margin: 100px auto 0;max-width: 900px;}
#block-detail .otherarea ul {display: flex;	justify-content: space-between;	align-items: center;}
#block-detail .otherarea ul li {flex: 1;}
#block-detail .otherarea ul .back a{display:block;font-size:2rem;font-weight:bold;color:#fff;background:#d5443f;border-radius:100px;padding:12px 40px;width:100%;max-width:360px;margin:auto;text-align:center;}
#block-detail .otherarea ul .next a,
#block-detail .otherarea ul .prev a{display: flex;align-items: center;gap:10px;}
#block-detail .otherarea ul .prev a {justify-content: flex-end;}
#block-detail .otherarea ul .next a::before,
#block-detail .otherarea ul .prev a::after {content: '';width: 16px;height: 13px;display: inline-block; background: url(../img/icon-arrow-red.svg) center / cover no-repeat;}
#block-detail .otherarea ul .next a::before { transform: scale(-1, 1);}
#block-detail .otherarea ul .next a span,
#block-detail .otherarea ul .prev a span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 10em;display: inline-block;vertical-align: middle;}

/* ======================================================================================================================= */
/* for tablet */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:999px){
	
}

/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:767px){

	/* -------------------------------------------------- */
	/* #block-news */
	/* -------------------------------------------------- */
	#block-news .news-box li a {display: block;padding-top: 20px;padding-bottom: 20px;}

	/* -------------------------------------------------- */
	/* #block-detail */
	/* -------------------------------------------------- */
	#block-detail .editarea h2{font-size:2.6rem;padding-bottom:10px;margin:60px auto 25px;}
	#block-detail .editarea h3{font-size:2.2rem;padding:0 0 10px 18px;margin:40px auto 0;}
	#block-detail .editarea h3::before{width:5px;height:22px;top:5px;}
	#block-detail .editarea h4{font-size:1.8rem;margin:30px auto 0;}
	#block-detail .editarea img{margin:25px auto;}
	#block-detail .editarea ul, #block-detail .editarea ol{margin:30px auto;}

	#block-detail .otherarea{margin-top:60px;}
    #block-detail .otherarea ul .next a, 
	#block-detail .otherarea ul .prev a{gap:5px;}
	#block-detail .otherarea ul .back {flex: none;}
	#block-detail .otherarea ul .back a{font-size:1.6rem;}
    #block-detail .otherarea ul .next a span,
	#block-detail .otherarea ul .prev a span{display: none;}
    #block-detail .otherarea ul .next a::after {content: '次へ';font-size: 1.6rem;}
	#block-detail .otherarea ul .prev a::before {content: '前へ';font-size: 1.6rem;}
}