@charset "UTF-8";

#randseru{
	display: block;
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
	margin: 0 auto 0;
	padding: 0 0 4em;
}
#randseru p{
	font-size: 1em;
	margin: 1em 0 0;
	padding: 0;
}
#randseru a{
	color: #fa9d23;
	font-size: 1em;
	font-weight: bold;
	display: block;
	width: fit-content;
	border: 2px solid;
	border-radius: 6px;
	box-shadow: 0 4px;
	margin: 0 0 4px auto;
	padding: 0.5em 1em;
}
#randseru a:hover{
	text-decoration: none;
	box-shadow: none;
	margin-top: 4px;
	margin-bottom: 0;
}
#randseru a::after {
	content: "";
	display: inline-block;
	width: 0.75em;
	height: 1rem;
	vertical-align: baseline;
	background: #fa9d23;
	margin: auto 0 auto 0.25em;
	padding: 0;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#randseru a.lngLnk br{
	display: block;
}
#randseru .btn {
	color: #02539d;
	text-align: center;
	line-height: 1;
	display: block;
	width: fit-content;
	box-sizing: border-box;
	background: #e5f5ff;
	border: 2px solid #02539d;
	border-radius: 8px;
	box-shadow: 0 4px 0;
	margin: 0 auto 4px;
	padding: 1em 2em;
}
#randseru .btn:hover{
	box-shadow: 0 0 0;
	margin-top: 4px;
	margin-bottom: 0;
}
#randseru .btn::after{
	background-color: #02539d;
}
#randseru h1{
	color: #01549d;
	font-size: 6vw;
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 0;
}
#randseru h2{
	color: #01549d;
	font-size: 6vw;
	font-weight: bold;
	text-shadow: 1px 1px 0 #ffffff;
	line-height: 1.15;
	position: relative;
	margin: 0;
	padding: 0 0 0 0.5em;
	z-index: 0;
}
#randseru h2::before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 60%;
	box-sizing: border-box;
	background: #a4dcff;
	margin: auto;
	padding: 0;
	clip-path: polygon(0.5em 0, 100% 0, calc(100% - 0.5em) 100%, 0 100%);
	z-index: -1;
}
#randseru h2 strong{
	color: #ffffff;
	font-size: 0.75em;
	font-weight: bold;
	text-shadow: none;
	line-height: 1;
	display: inline-block;
	vertical-align: text-bottom;
	background: #02539d;
	box-shadow: 2px 1px 0 #ffffff;
	margin: 0 0.15em 0 0;
	padding: 0.15em 0.25em;
}
#randseru h3{
	color: #01549d;
	font-size: 5vw;
	font-weight: bold;
	line-height: 1;
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0 0 0.5em 0.25em;
}
#randseru h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 0.25em;
	background: #a4dcff;
	margin: auto;
	padding: 0;
	clip-path: polygon(0.15em 0, 100% 0, calc(100% - 0.15em) 100%, 0 100%);
}
#randseru h4{
	color: #02539d;
	font-size: 1em;
	font-weight: bold;
	border: solid #a4ddff;
	border-width: 0 0 2px 0;
	margin: 0;
	padding: 0;
}
#randseru .keyVsl{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	max-width: 1200px;
	max-height: 480px;
	box-sizing: border-box;
	background: url(../../../img/usr/free/information_ranndoseru1/kv001.jpg) 0 0 no-repeat;
	background-size: contain;
	margin: 0 auto;
	padding: calc(100vw * 0.4) 0 0 0;
}
#randseru #kvImg02.keyVsl{
	background-image: url(../../../img/usr/free/information_ranndoseru1/kv002.jpg);
}
#randseru #kvImg03.keyVsl{
	background-image: url(../../../img/usr/free/information_ranndoseru1/kv003.jpg);
}
#randseru .keyVsl h1{
	color: #ffffff;
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: color(srgb 0 0.44 0.79 / 0.65);
	margin: auto;
	padding: 0.5em;
}
#randseru section{
	display: block;
	width: 90%;
	max-width: 1000px;
	box-sizing: border-box;
	margin: 2em auto 0;
	padding: 0;
}
#randseru > * section{
	width: auto;
	margin-top: 1.5em;
}
#randseru .read{
	display: block;
	width: 90%;
	max-width: 1000px;
	box-sizing: border-box;
	margin: 1em auto 0;
	padding: 0;
}
#randseru > * .read{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background: #ecf8ff;
	border: 1px solid #a4ddff;
	padding: 0.5em;
}
#randseru > * .read img{
	display: block;
	width: 100%;
}
#randseru > * .read p{
	color: #02539d;
	width: 100%;
}
#randseru .artworkBox{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	margin: 1em 0 0 0;
	padding: 0;
}
#randseru .artworkBox img{
	display: block;
	width: 100%;
}
#randseru .artworkBox > div{
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 1em 0 0 0;
	padding: 0;
}
#randseru .artworkBox > div p:first-of-type{
	margin-top: 0;
}
#randseru .episodeSct{
	margin: 1.5em 0 0 0;
}
#randseru .episodeSct:nth-of-type(n + 2){
	margin-top: 2em;
}
#randseru .episodeSct section{
	border: solid 2px #6ca0bf;
	border-radius: 8px;
	margin: 0;
	overflow: hidden;
}
#randseru .episodeSct section h3{
	color: #ffffff;
	font-size: 1.25em;
	line-height: 1.25;
	background: #6ca0bf;
	padding: 0.5em 0.5em;
}
#randseru .episodeSct section h3::after{
	display: none;
}
#randseru .episodeSct section h3 strong{
	color: #6ca0bf;
	font-weight: bold;
	line-height: 1;
	display: block;
	width: fit-content;
	background: #ffffff;
	margin: 0 0 0.5em 0;
	padding: 0.25em 0.5em;
}
#randseru .episodeSct section dl{
	padding: 1em;
}
#randseru .episodeSct section dl dt{
	color: #6ca0bf;
	font-weight: bold;
	border: solid;
	border-width: 0 0 1px 0;
}
#randseru dl.reasonLst div{
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #a4ddff;
	border-radius: 8px;
	margin: 2em auto 0;
	padding: 1em;
}
#randseru dl.reasonLst div dt {
	color: #02539d;
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.5;
	position: static;
	background: #ffffff;
	margin: 0 0 0.5em;
	padding: 0;
}
#randseru dl.reasonLst div dt strong{
	color: #ffffff;
	font-size: 0.75em;
	line-height: 1;
	display: block;
	width: fit-content;
	background: #02539d;
	margin: 0 0 0.25em;
	padding: 0.25em 0.5em;
}
#randseru dl.reasonLst div dd{
	margin: 0;
}
#randseru dl.reasonLst div dd:nth-of-type(n + 2){
	margin-top: 1em;
}
#randseru dl.compareLst{
	display: block;
	width: 100%;
	margin: 1em auto 0;
	padding: 0;
}
#randseru dl.compareLst div{
	color: #02539d;
	display: flow-root;
	background: #e8f6fe;
	margin: 0;
	padding: 0;
}
#randseru dl.compareLst div:nth-of-type(2){
	color: #dd8000;
	background-color: #f7ede3;
	margin-top: 1em;
}
#randseru dl.compareLst div dt{
	color: #ffffff;
	font-weight: bold;
	width: 100%;
	background: #4ea8ff;
	margin: 0;
	padding: 0.25em 0.5em;
}
#randseru dl.compareLst div:nth-of-type(2) dt{
	background-color: #ff904e;
}
#randseru dl.compareLst div dd{
	margin: 1em;
	padding: 0 0 0 1em;
}
#randseru dl.compareLst div dd ul li{
	list-style: disc;
	margin: 0;
}
#randseru dl.compareLst div dd ul li:nth-of-type(n + 2){
	margin-top: 0.5em;
}
#randseru .btnBlk{
	display: flow-root;
	width: 100%;
	box-sizing: border-box;
	margin: 1em auto 0;
	padding: 0;
}
#randseru > .btnBlk{
	margin-top: 3em;
}


/* 画面サイズが768pxからはここを読み込む */
@media screen and (min-width:768px) {
	#randseru a{
		font-size: 1.25em;
	}
	#randseru a.lngLnk br{
		display: none;
	}
	#randseru h1{
		font-size: 3em;
	}
	#randseru h2{
		font-size: 2.5em;
		text-shadow: 2px 2px 0 #ffffff;
		line-height: 1.5;
	}
	#randseru h2 strong{
		box-shadow: 3px 2px 0 #ffffff;
	}
	#randseru h3{
		font-size: 2em;
	}
	#randseru h4{
		font-size: 1.5em;
	}
	#randseru .keyVsl{
		height: calc(100vw * 0.4);
		padding: 0;
	}
	#randseru .keyVsl h1{
		position: absolute;
		place-self: center;
		inset: 0;
		padding: 0.5em calc((100% - 900px) / 2) 0.5em;
	}
	#randseru > * section{
		margin-left: 1.5em;
	}
	#randseru > * .read{
		width: calc(400px + 25em);
		padding: 1em;
	}
	#randseru > * .read img{
		width: 400px;
	}
	#randseru > * .read p{
		font-size: 1.25em;
	}
	#randseru > * .read > p{
		width: calc(100% - 400px - 1em);
		margin: 0 0 0 1em;
	}
	#randseru .artworkBox img{
		width: 400px;
	}
	#randseru .artworkBox > div{
		width: calc(100% - 400px - 1em);
		margin: 0 0 0 1em;
	}
	#randseru .episodeSct{
		margin-left: 1.5em;
	}
	#randseru .episodeSct section h3{
		line-height: 1;
	}
	#randseru .episodeSct section h3 strong{
		display: inline-block;
		margin: 0 0.5em 0 0;
	}
	#randseru dl.reasonLst div{
		padding: 1.5em 1.5em 1em;
	}
	#randseru dl.reasonLst div dt {
		line-height: 1;
		position: absolute;
		top: -0.5em;
		left: 0.5em;
		margin: auto;
		padding: 0 0.5em;
	}
	#randseru dl.reasonLst div dt strong{
		display: inline-block;
		vertical-align: bottom;
		margin: 0 0.25em 0 0;
	}
	#randseru dl.compareLst{
		display: flex;
		justify-content: space-between;
		padding: 0 1em 1em;
	}
	#randseru dl.compareLst div{
		width: calc((100% - 2em) / 2);
	}
	#randseru dl.compareLst div:nth-of-type(2){
		margin-top: 0;
	}
	#randseru dl.compareLst div dd ul li:nth-of-type(n + 2){
		margin-top: 1em;
	}
}