@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
		html,body{
			scroll-behavior: smooth;
			scroll-padding-top: 70px;
		}
		#cl_wrap{
			padding: 0;
			margin: 0;
			line-height: 2.3;
			letter-spacing: 1px;
			font-family: 'Hanken Grotesk', sans-serif;
			font-family: 'Noto Sans JP', sans-serif;
			color: #000;
			-webkit-text-size-adjust: 100%;
			word-break: break-all;
			opacity: 0;
    		animation: fade-in 2s forwards 0.5s ease;
			
		}
		@keyframes fade-in {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
		
		#cl_wrap img {
			width: 100%;
			border: none;
			vertical-align: bottom;
			line-height: 0;
		}
		#cl_wrap ul,#cl_wrap li {
			padding: 0;
			margin: 0;
			list-style: none;
		}
		#cl_wrap .spview {
			display: none;
		}
		#cl_wrap .pcview {
			display: block;
		}

		#cl_wrap{
			max-width: 1300px;
			min-width: 1100px;
			margin: 2% auto;
		}

		@media only screen and (max-width: 768px)  {
			#cl_wrap{
				min-width:inherit;
			}
			
			#cl_wrap .spview {
				display: block;
			}
			#cl_wrap .pcview {
				display: none;
			}
		}

#cl_wrap .read{
	width: 50%;
	font-size: 13px;
	text-align:center;
	margin: 5% auto;
}

#cl_wrap .text{
	width: 30%;
	font-size: 11px;
	text-align:center;
	margin: 5% auto;
	
}

#cl_wrap .text a {
	color: #000
}

/* ▼▼▼ YouTubeをレスポンシブ対応 */
#YTWrap {
  	position: relative;
    width:100%;
    margin: 0 auto;
    padding-top: 56.25%;
}

#YTWrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/* ▲▲▲ YouTubeをレスポンシブ対応 */

#linkWrap p {
  margin: .25em;
  cursor: pointer;
  display: inline-block;
}

.YTLink {
  color: #000;
  text-decoration: none;
}

#linkWrap .look {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	justify-content: center;
}
#linkWrap .look li{
	width: 25%;
	box-sizing: border-box;
	padding: 15px;
	margin: 5% 0;
	font-family: 'Hanken Grotesk', sans-serif;
}
#linkWrap .look li a{
	list-style: none;
	text-decoration: none;
}
#linkWrap .look li a .YTLink{
	font-size: 34px;
	line-height: 0;
}
#linkWrap .look li a img{
	display: inline-block;
	box-sizing: border-box;
	width: 15%;
	transform: translate(0,-4px);
}
#linkWrap .look li a .time{
	font-size: 18px;
	margin-left: 10px;
}
#linkWrap .look .item{
	margin: 0% auto;
}
#linkWrap .look .item .credit{
	font-size: 10px;
	font-family: 'Hanken Grotesk', sans-serif;
	margin: 3% auto;
	
}
#linkWrap .look .item .credit a{
	color: #000;
	text-decoration: underline;
	display:inline-block;
	padding-right: 1px;
}



				@media only screen and (max-width: 768px)  {
				#cl_wrap .read{
					width: 90%;
					font-size: 11px;
					text-align:center;
					margin: 8% auto 15%;
				}
				#linkWrap .look {
					width: 100%;
					display: block;
				}
				#linkWrap .look li{
					width: 80%;
					padding: 0;
					margin: 10% auto;
				}
				#linkWrap .look li a .YTLink{
					font-size: 26px;
				}
				#linkWrap .look li a img{
					width: 13%;
					transform: translate(0,-6px);
				}
				#linkWrap .look li a .time{
					font-size: 17px;
					margin-left: 10px;
					display: inline-block;
					transform: translate(0,-4px);
				}


				
				#cl_wrap .text{
					width: 100%;
					font-size: 10px;
					text-align:center;
					margin: 5% auto;
					line-height: 2;
				}
				}