@charset "utf-8";

@import "setting";

	section#index{
		width: 540px;
		margin-right: 9%;
		
		h2{
			width: 530px;
			line-height: 0;
			margin-bottom: 45px;
			
			img{
				width: 100%; height: auto;
			}
		}
		
		time{
			display: block;
			@include pp(4);
			@include fs(40,1.5,.15);
			margin-bottom: 20px;
		}
		
		p{
			margin: 30px 0 15px;
			@include fs(13,1.8,.1);
		}
		
		q{
			display: block;
			@include pp(4);
			@include fs(10,1.6,.1);
			color: #444;
		}
		
		ul.link{
			display: flex;
			justify-content: space-between;
			
			li{
				flex-basis: 46%;
				
				a{
					display: block;
					padding: .8em .8em .5em;
					background-color: #000;
					border-bottom: solid 1px #666;
					@include tr;
					
					strong{
						@include pp(6);
						@include fs(18,1.2,.1);
					}
					
					span{
						display: inline-block;
						@include fs(10,1.2,.15);
						opacity: .8;
						margin-left: 1em;
					}
					
					&:hover{
						border-bottom-color: #000;
						filter: invert(1);
					}
				}
			}
		}
		
		ul.sns{
			display: flex;
			justify-content: flex-start;
			column-gap: 50px;
			line-height: 0;
			margin-top: 50px;
			
			li{
				flex-basis: 36px;
				
				a{
					filter: brightness(.7);
					
					&:hover{
						filter: brightness(.9);
					}
				}
			}
		}
	}

// Large devices (desktops, 992px and up)
@media (max-width: 1199.98px) {
}

// Medium devices (tablets, 768px and up)
@media (max-width: 991.98px) {
}

/// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {

	section#index{
		width: 77%;
		margin: 0 auto;
		
		h2{
			width: 100%;
			max-width: 350px;
			margin-bottom: 35px;
		}
		
		time{
			@include sfs(28);
		}
		
		p{
			margin: 25px 0 10px;
			@include sfs(12);
		}
		
		q{
			@include sfs(9);
		}
		
		ul.link{
			flex-direction: column;
			
			li{
				flex-basis: auto;
				
				a{
					border-bottom: solid 1px #666;
					
					strong{
						@include sfs(20);
					}
					
					span{
						@include sfs(12);
					}
				}
			}
		}
		
		ul.sns{
			justify-content: space-between;
			column-gap: 0;
			
			li{
				flex-basis: 32px;
			}
		}
	}
}


@media (max-width: 991.98px) and (min-aspect-ratio: 8/5) and (orientation: landscape) {
}