@charset "utf-8";
/* フォント */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400;500;700&display=swap');

/* General */
*{
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
	transition: 0.15s all;
}
body{
	-webkit-text-size-adjust: 100%;
	font-size: 1.6vw;
}
@media (min-width: 1200px){
	body{
		font-size: 18px;
	}
}

/* Background */
body {
	background-color: #FFF;
}

main#wrapper{
	position: relative;
	width: 100%; max-width: 1000px; min-height: 100%;
	margin: 0 auto;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 400;
	line-height: 1.5;
}

/* Header */
header{
	display: inline-block;
	width: 100%;
}

header div.title {
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 5%;
	padding-bottom: 5%;
}

header img {
	width: 100%;
	max-width: 1000px;	
}

section {
	display:block;
	width: 100%;
	padding: 30px 0 30px 0;
}
section h2 {
	text-align: center;
}

main article{
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	margin: 0 auto calc(100% / 1000 * 40);
	border: 2px #142e06 solid;
	background-color: #fff;
}

main article cite{
	display: block;
	width: calc(100% / 1000 * 150);
}
main article cite img{
	display: block;
	width: 75%;
	margin: 0 auto 0 5%;
}

main article em{
	display: block;
	width: calc(100% / 1000 * 650);
}
main article em dfn{
	display: block;
	font-weight: 700;
	font-style: normal;
	line-height: 1.25;
}
main article em time{
	display: inline-block;
	font-size: 80%;
	line-height: 1.25;
}
main article em a{
	display: inline-block;
	color: #142e06;
	font-size: 90%;
	line-height: 1.25;
}
main article em a:hover{
	opacity: 0.72;
}

main article span{
	display: block;
	position: relative;
	width: calc(100% / 1000 * 150);
	margin-right: 2%;
	padding-bottom: calc(100% / 1000 * 60);
	background-image: url(/wp/wp-content/themes/bash_pc/images/report/redboost/bg_redboost_btn.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
main article span a{
	display: flex; position: absolute;
	align-items: center;
	left: 0; top: 0; width: 100%; height: 100%;
	font-size: 80%;
}
main article span a b{
	display: block; position: relative;
	width: 100%;
	color: #000;
	font-weight: 800;
	text-shadow: 0 0 0 #000;
	text-align: center;
	vertical-align: middle;
}
main article span a b::before{
	display: block; position: absolute; content: "";
	right: 15%; top: calc(50% - 4px); width: 0; height: 0;
	border-color: transparent transparent transparent #000;
	border-width: 5px 0 5px 7px;
	border-style: solid;
	transform-origin: right center;
}
main article span a:hover b{
	color: #142e06;
	text-shadow: 2px 2px 0 rgba(255,255,255,.96);
}
main article span a:hover b::before{
	border-color: transparent transparent transparent #f88;
}

@media (max-width: 600px){
	main article {
		width: 98%;
	}
	main article em{
		width: calc(100% / 1000 * 575);
	}
	main article span{
		width: calc(100% / 1000 * 225);
		padding-bottom: calc(100% / 1000 * 90);
	}
}

/* Mobile */
@media (max-width: 600px){
	header, article, footer{
		font-size: 1.8em;
	}
}
@media (max-width: 800px){
	main article span a b::before,
	main nav a::before{
		transform: scale(0.75);
	}
}
@media (max-width: 400px){
	main article span a b::before,
	main nav a::before{
		transform: scale(0.5);
	}
}