@charset "UTF-8";

/*------------------------
inner
------------------------*/

/* PC */
@media screen and (min-width:768px) {
	.single-inner{
		max-width: 1020px;
		margin: 0 auto;
		padding: 0 40px;
	}
	.single-sub-title{
		font-size: 24px;
		margin-bottom: 40px;
		padding-bottom: 4px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	.l-inner,
	.single-inner{
		padding: 0 5.33vw;
	}
	.single-sub-title{
		margin-bottom: 9.6vw;
		padding-bottom: .83vw;
		font-size: 4.27vw;
	}
}


/*------------------------
記事ヘッダー
------------------------*/
.single-inner .cat-wrap{
	display: flex;
	flex-wrap: wrap;
}
.single-inner .cat a{
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--opaW);
	width: 100%;
	height: 100%;
	color: #fff;
	line-height: 1;
}
.single-inner h1{
	line-height: 1.65;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.single-inner .date{
	white-space: nowrap;
	line-height: 1;
}
.single-inner .share{
	display: flex;
	align-items: center;
	border-left: 1px solid rgba(255,255,255,.25);
	border-right: 1px solid rgba(255,255,255,.25);
}
.single-inner .share p{
	line-height: 1;
	letter-spacing: 0.08em;
}
.single-inner .share ul{
	display: flex;
	align-items: center;
}
.single-inner .share li a{
	display: flex;
	align-items: center;
	justify-content: center;
}
.single-inner .share img{
	display: block;
	width: auto;
}

/* PC */
@media screen and (min-width:768px) {
	.single-inner .cat-wrap{
		gap: 8px;
		margin-bottom: 20px;
	}
	.single-inner .cat a{
		min-width: 84px;
		height: 30px;
		padding: 0 18px 1px;
		font-size: 14px;
  	}
	.single-inner h1{
		font-size: 27px;
		margin-bottom:25px;
	}
	.single-inner .date-wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 48px;
	}
	.single-inner .date{
		font-size: 15px;
	}
	.single-inner .share{
		min-height: 28px;
		gap: 18px;
		padding: 0 18px;
	}
	.single-inner .share p{
	}
	.single-inner .share ul{
		gap: 18px;
	}
	.single-inner .share li.x img{
		height: 19px;
	}
	.single-inner .share li.line img{
		height: 20px;
	}
}

/* SP：375px基準 */
@media screen and (max-width:767px) {
	.single-inner .cat-wrap{
		gap: 2.13vw;
		margin-bottom: 5.33vw;
	}
	.single-inner .cat a{
		min-width: 19.73vw;
		height: 6.4vw;
		padding: 0 2.13vw .267vw;
		font-size: 3.2vw;
	}
	.single-inner h1{
		margin-bottom: 6.4vw;
		font-size: 5.33vw;
	}
	.single-inner .date-wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10.66vw;
	}
	.single-inner .date{
		font-size: 3.2vw;
	}
	.single-inner .share{
		min-height: 5.33vw;
		gap: 3.2vw;
		padding: 0 4vw;
	}
	.single-inner .share p{
		font-size: 2.93vw;
	}
	.single-inner .share ul{
		gap: 3.2vw;
	}
	.single-inner .share li:first-child img{
		height: 4vw;
	}
	.single-inner .share li:nth-child(2) img{
		height: 4.8vw;
	}
}


/*------------------------
メイン画像・本文
------------------------*/
.single-inner .main-img{
	overflow: hidden;
}
.single-inner .post-content{
		line-height: 1.8;
	}
.single-inner .post-content h2,
.single-inner .post-content h3{
	letter-spacing: .08em;
	line-height: 1.65;
	}

.single-inner .post-content a{
	display: inline;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.single-inner .post-content ul{
	padding-left: 1.5em;
	list-style-type: disc;
}
.single-inner .post-content ol{
	padding-left: 1.5em;
	list-style-type: decimal;
}

/* PC */
@media screen and (min-width:768px) {
	.single-inner .main-img{
		margin-top: -10px;
		margin-bottom: 38px;
		text-align: center;
	}
	.single-inner .main-img img{
			display: block;
			max-width: 100%;
			width: auto;
			height: auto;
			max-height: 700px;
			margin: 0 auto;
			object-fit: contain;
		}
	.single-inner .post-content{
		font-size: 15px;
	}
	.single-inner .post-content h2{
		font-size: 22px;
		margin-bottom: 1.0em;
	}
		.single-inner .post-content h2:not(:first-child){
		margin-top: 2em;
	}
		.single-inner .post-content h3{
		font-size: 20px;
		margin-bottom: 0.75em;
	}
		.single-inner .post-content h3:not(:first-child){
		margin-top: 1.5em;
	}
	.single-inner .post-content p + p{
		margin-top: 1em;
	}
	.single-inner .post-content ul,
	.single-inner .post-content ol{
		margin-top: 1em;
	}
	.single-inner .post-content dl{
		margin-top: 1em;
	}	
	.single-inner .post-content dd + dt{
		margin-top: .6em;
	}	

	.single-inner .post-content a:hover{
		text-decoration:none;
	}
	/*記事中の画像*/
	.post-content img{
		display: block;
		max-width: 100%;
		max-height: 700px;
		margin: 0 auto;
		object-fit: contain;
	}
	/* 直前に別の要素がある場合だけ、上余白を付ける */
	.post-content > :not(noscript) + :is(
		img,
		:has(img)
	) {
		margin-top: 35px!important;
	}
	/* 直後に別の要素がある場合だけ、下余白を付ける */
	.post-content > :is(
		img,
		:has(img)
	):has(+ :not(noscript)) {
		margin-bottom: 35px!important;
	}
}

/* SP：375px基準 */
@media screen and (max-width:767px) {
	.single-inner .main-img{
		width: 100%;
		margin-top: -2.67vw;
		margin-bottom:8vw;
	}
	.single-inner .main-img img{
		width: auto;
		max-width: 100%;
		height: auto;
	}
	.single-inner .post-content{
		line-height: 1.85;
	}
.single-inner .post-content h2{
		font-size:4.53vw;
		margin-bottom: 1.0em;
	}
	.single-inner .post-content h2:not(:first-child){
		margin-top: 2em;
	}
	.single-inner .post-content h3{
		font-size: 4.0vw;
		margin-bottom: .8em;
	}
	.single-inner .post-content h3:not(:first-child){
		margin-top: 1.75em;
	}
	.single-inner .post-content p + p{
		margin-top: 1em;
	}
	.single-inner .post-content ul,
	.single-inner .post-content ol{
		margin-top: 1em;
	}
	.single-inner .post-content dl{
		margin-top: 1em;
	}	
	.single-inner .post-content dd + dt{
		margin-top: .6em;
	}	

	.single-inner .post-content a:hover{
		text-decoration:none;
	}
	/*記事中の画像*/
	.post-content img{
		display: block;
		max-width: 100%;
		width: auto;
		margin: 0 auto;
	}
	/* 直前に別の要素がある場合だけ、上余白を付ける */
	.post-content > :not(noscript) + :is(
		img,
		:has(img)
	) {
		margin-top:8vw!important;
	}
	/* 直後に別の要素がある場合だけ、下余白を付ける */
	.post-content > :is(
		img,
		:has(img)
	):has(+ :not(noscript)) {
		margin-bottom:8vw!important;
	}
}

/*------------------------
ホバー
------------------------*/
@media (hover:hover) and (pointer:fine) {
	.single-inner .cat a:hover{
		background: rgba(255,255,255,.12);
	}
}