<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&amp;family=Noto+Sans+JP:wght@100..900&amp;display=swap');
@import url('https://cdn.skypack.dev/sanitize.css');

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
	variable Settings
   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



:root {
	--l_green	:#F8FCEE;
	--green		:#00A73C;
	--brack		:#333333;
}

html,body {
	font-family: 'Noto Sans JP', 'メイリオ',Meiryo,'ＭＳ Ｐゴシック','Lucida Grande',Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,,serif;
	font-feature-settings: "palt";
	font-optical-sizing: auto;
	font-style: normal;
	_zoom: 63%;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
	Main Tag Settings
   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/*------------------------------
		common
-------------------------------*/
img,
figure {
	width: 100%;
	height: auto;
	margin: 0;
}

br.sp {
	display: none;
}

@media screen and (max-width: 641px) {

	br.sp {
		display: inline-block;
	}
}


/*------------------------------
		header
-------------------------------*/

header {
	background: #fff;
	padding: 15px;
	max-width: 1024px;
	width: calc(100% -30px);
	margin: 0 auto;
	position: relative;
	text-align: center;
	
	
}

header &gt; .logo {
	width: 120px;
	position: absolute;
	right: 15px;
	top:0;
}

header &gt; h1 {
	display: flex;
	width: 51.8vw;
	max-width: 550px;
	margin: 0 auto;
}

header &gt; h1 &gt; .pg_title{
	width: 26vw;
	max-width: 205px;
}

header &gt; h1 &gt; .wb_title{
	width: 40vw;
	max-width: 320px;
	margin-left: 25px;
	align-content: center;
}

@media screen and (max-width: 781px) {
	header {
		padding-top: 40px;
	}
}
@media screen and (max-width: 641px) {
	header &gt; h1 {
		display: inline-block;
		width: 60vw;
		margin: 0 auto;
	}

	header &gt; h1 &gt; .pg_title{
		display: inline-block;
		width: 100%;
		
	}

	header &gt; h1 &gt; .wb_title{
		display: inline-block;
		width: 100%;
		max-width: 600px;
		margin-left: 0px;
		
	}
}
@media screen and (max-width: 561px) {
	header &gt; .logo {
		width: 20vw;
		position: absolute;
		right: 15px;
		top:0;
	}
}

/*------------------------------
		main
-------------------------------*/

main {
	background-color: var(--l_green);
}

.article {
	padding: 50px 15px;
	max-width: 1024px;
	width: calc(100% -30px);
	margin: 0 auto;
}

/* -- movie */

.article &gt; .frame {
	width: 100%;
	max-width: 800px;
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 0 auto 30px;
}

.article &gt; .frame iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	border: solid 1px #ccc;
}

/* -- chapter */

.article &gt; dl.chapter {
	display: flex;
	width: 100%;
	max-width: 800px;
	column-gap: 40px;
	margin: 0 auto;
}

.article &gt; dl.chapter &gt; div {
	padding: 5px;
	margin: 0;
	cursor: pointer;
	border-radius: 6px;
	-webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	-o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
	transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}

.article &gt; dl.chapter &gt; div &gt; dt{
	color: var(--green);
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
}
.article &gt; dl.chapter &gt; div &gt; dd {
	margin: 0;
	font-size: 14px;
	color: var(--brack);
}

.article &gt; dl.chapter &gt; div &gt; dd &gt; figure &gt; img {
	border: solid 1px #ccc;
}

.article &gt; dl.chapter &gt; div &gt; dd &gt; figure &gt; figcaption {
	margin-top: 10px;
}

.article &gt; dl.chapter &gt; div:hover,
.article &gt; dl.chapter &gt; div.clip {
	background-color: #00a0e9;
}

.article &gt; dl.chapter &gt; div:hover dt,
.article &gt; dl.chapter &gt; div:hover dd,
.article &gt; dl.chapter &gt; div.clip dt,
.article &gt; dl.chapter &gt; div.clip dd {
	color: #fff;
}

@media screen and (max-width: 1024px) {
	.article &gt; dl.chapter &gt; div &gt; dt {
		font-size: 1.6vw;
	}

	.article &gt; dl.chapter &gt; div &gt; dd {
		font-size: 1.4vw;
	}
}

@media screen and (max-width: 781px) {
	.article &gt; dl.chapter &gt; div &gt; dt{
		font-size: 2.2vw;
	}

	.article &gt; dl.chapter &gt; div &gt; dd {
		font-size: 1.8vw;
	}
}

@media screen and (max-width: 641px) {

	.article &gt; dl.chapter {
		display: block;
		width: 100%;
		max-width: 800px;
		column-gap: 40px;
		margin: 0 auto;
	}

	.article &gt; dl.chapter &gt; div {
		position: relative;
		height: 150px;
		margin-bottom: 15px;
	}
	
	.article &gt; dl.chapter &gt; div &gt; dt{
		position: absolute;
		top: 5px;
		padding-left : 250px;
		font-size: 4vw;
	}
	
	.article &gt; dl.chapter &gt; div &gt; dd{
		position: absolute;
	}
	
	.article &gt; dl.chapter &gt; div &gt; dd &gt; figure{
		position: relative;
		width: 89vw;
		height: 140px;
	}

	.article &gt; dl.chapter &gt; div &gt; dd &gt; figure &gt; img {
		position: absolute;
		width: auto;
		height: 140px;
	}
	
	.article &gt; dl.chapter &gt; div &gt; dd &gt; figure &gt; figcaption {
		width: 89vw;
		position: absolute;
		top: 4.5vw;
		padding-left : 250px;
		margin-top: 15px;
		font-size: 4vw;
	}

}

/*------------------------------
		footer
-------------------------------*/

footer {
	background-color: var(--green);
	text-align: center;
	color: #fff;
	padding: 40px 0;
}
</pre></body></html>