<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">body { margin: 0; padding: 0; color: #222; font-size : 13px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
a:link { color:#1111CC; text-decoration: none; }
a:visited { color:#1111CC; text-decoration: none; }
a:hover { color:#AA0044; text-decoration: underline;}
a:active { color:#1111CC; text-decoration: none;}
a{outline:none;}

/* 最上部コースロゴ枠 */

.header {
	width: 100%;
	max-width: 960px;
	padding: 5px 0;
	margin: 0 auto;
}
	
.header img {
	max-width: 100%
}

/* トップ画像枠 */

.picture {
	width: 100%;
	height: auto;
	padding: 0;
	background: #000000;
	color: #ffffff;
	font-size: 16px;
}

.picture p{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	font-size: 16px;
}

.picture img{
	width: 100%;
	vertical-align:top;
}

/* 最下部アドレス枠 */

.address {
	background: #000000;
	width: 100%;
	height: 100%;
	font-size: 16px;
}

.address p{
	color: #fff;
	font-size: 18px;
}

/* メインフレーム枠 */

.main {
	clear: both;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 0 10px 0;
	font-size: 1.3em;
}

@media screen and (max-width: 480px) {
	.main {
		clear: both;
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
		padding: 0 0 10px 0;
		font-size: 1.2em;
	}
}

/* コピーライト表示枠 */

.copyright {
	width: 100%;
	max-width: 100%;
	font-size: 16px;
	text-align: center;
	padding: 5px 0px;
  }

/* バナー表示 */

h1 h2{
	margin:0;
	padding:0;
	font-weight: 600; /*※windowsでは細く表示される為*/
}

.heading {
    display: flex;
    justify-content: start;
    align-items: center;
	margin-left: 0.2em;
	margin-right: 0.2em;
    position: relative;
    padding: 0.2em .8em;
    overflow: hidden;
    border: 2px solid #0086d1;
    border-radius: 5px;
    font-size: 1.2em
}

.heading:before {
    position: absolute;
    top: -50%;
    left: -50px;
    z-index: -1;
    width: 100px;
    height: 200%;
    background-color: #0086d1;
    content: '';
}

.heading span {
    margin-right: 1.1em;
    color: #fff;
    font-size: 1.1em
}

/* 階層ナビゲーション表示 */

.menutree {
	padding: 10px 10px 0px 10px;
	line-height: 200%;
}

.navi {
	color: #0086d1;
	margin: 0 0.2em;
}

/* お知らせ表示用 */

.info {
	padding: 10px 10px 20px 10px;
	text-align: justify;
	line-height: 180%;
}

/* 汎用表示用 */

.topstaff {
	padding: 0px 10px 0px 10px;
	line-height: 200%;
	text-align: justify;
}

@media screen and (max-width: 480px) {
	.topstaff {
		padding: 0px 10px 0px 10px;
		line-height: 150%;
		text-align: justify;
	}
}

.topstaff table {
	padding: 10px 15px 10px 0px;
	text-align: left;
}

.topstaff td {
	padding: 5px 15px 5px 0px;
	text-align: left;
}

/* スタッフ・研究室表示用 */

td.staff {
	width: 100px;
	vertical-align: top;
}

span.staff{
	color: #009999;
	}

td.lab {
	vertical-align: top;
	text-align: justify;
}

img.lab {
	float:left;
	margin: 0px 10px 0px 0px;
}

hr {
	margin-left: 10px;
	margin-right: 10px;
	border-width: 1px 0 0 0; /* 線の太さを指定 */
	border-style: dashed; /* 線の種類を指定 */
	border-color: #ccc; /*線の色を指定 */
}

/* トップページメッセージ表示用 */

.topmss {
    padding: 0 10px 0px 10px;
	line-height: 200%;
	text-align: justify;
}

@media screen and (max-width: 768px) {
	.topmss {
    padding: 3px 10px 3px 10px;
		line-height: 150%;
		text-align: justify;
	}
}

h2 {
	color: #dd6a7a; /* 文字色 */
	padding: 3px 5px 0px 30px; /* 上・右・下・左の余白 */
	position: relative;
	font-size: 1em;
	line-height: 150%;
}

h2:before {
	background-color: #ef858c; /* 左側の線の色 */
	border-radius: 5px;
	content: '';
	position: absolute;
	top: 0;
	left: 3px; /* 左端からの位置 */
	width: 5px; /* 左側の線の幅 */
	height: 100%;
}

h2:after {
	background-color: #f3cbd0; /* 右側の線の色 */
	border-radius: 5px;
	content: '';
	position: absolute;
	top: 0;
	left: 12px; /* 左端からの位置 */
	width: 5px; /* 右側の線の幅 */
	height: 100%;
}

/* 1日体験化学教室用 */

.oneday {
	font-size: 16px;
	background-color: #fdf5e6;
	padding: 20px 30px 10px 30px;
	line-height: 200%;
}

.oneday2 {
	padding: 10px 0px 10px 0px;
}

.oneday_ul {
	padding-left: 20px;
	margin: 0px;
	}

.oneday_ul li{
	padding-left: 0.5em;
	}

.oneday_pic {
    max-width: 100%;
    height: auto;
}

.oneday_blue {
	color: #447777;
	font-weight: bold;
	}

.oneday_purple {
	color: #774477;
	font-weight: bold;
	padding: 15px 0px 5px 0px;
	}

/* オンライン研究室ツアー用 */

.labmovie {
	position:relative;
	width:100%;
	max-width: 560px;
}

.labmovie::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 56.25%;
}

.labmovie iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* 就職情報用 */

.recruit{
	padding: 10px 10px 0px 10px;
	line-height: 150%;
}

/* 体験実験講座用 */

.right {
	float: right;
	margin-right:10px;
}

/* グリッド表示 */

.flexbox {
	display: flex;
}

@media screen and (max-width: 768px) {
	.flexbox{
		display:block;
	} 
}

.box1 {
	padding-left: 10px;
	line-height: 175%;
}

@media screen and (max-width: 768px) {
	.box1{
	padding: 0px 10px 15px 10px;
	line-height: 150%;
	} 
}

.box2 {
	padding: 0px 10px 15px 10px;
	line-height: 175%;
	text-align: justify;
}

@media screen and (max-width: 768px) {
	.box2{
	padding: 10px 10px 15px 10px;
	line-height: 150%;
	} 
}

.box3 {
	padding: 20px 20px 10px 20px;
	line-height: 150%;
	color: #fff;
	font-size: 16px;
}

@media screen and (max-width: 768px) {
	.box3{
	padding: 20px 10px 0px 20px;
	line-height: 150%;
	color: #fff;
	font-size: 16px;
	} 
}

.box4 {
	padding: 20px 20px 10px 20px;
	line-height: 150%;
	color: #fff;
	font-size: 16px;
}

@media screen and (max-width: 768px) {
	.box4{
	padding: 5px 0px 0px 20px;
	line-height: 150%;
	color: #fff;
	font-size: 16px;
	} 
}

/* レスポンシブ対応メニュー */

.menu {
	width: 100%;
	height: 40px;
	padding: 0;
	background: #0086d1;
}

#menu{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	font-size: 16px;
}

#menu li{
	display: block;
	float: left;
	width: 12.5%;
	margin: 0;
	padding: 0;
}

#menu li a{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	color: #fff;
	line-height: 100%;
	text-align: center;
	text-decoration: none;
	background: #0086d1;
	transition: all .2s;
	@media (hover: hover) and (pointer: fine) {
	    &amp;:hover {
			background-color: #054990;
		}
	}
}

@media only screen and (max-width: 768px) {
	.menu {
		width: 100%;
		height: 30px;
		padding: 0;
		background: #0086d1;
	}
	
	#menu li{
		width: 25%;
		border-bottom: 1px solid #fff;
	}
	
	#menu li a{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		color: #fff;
		line-height: 100%;
		text-align: center;
		text-decoration: none;
		background: #0086d1;
		transition: all .2s;
		@media (hover: hover) and (pointer: fine) {
	    	&amp;:hover {
				background-color: #054990;
			}
		}
	}
}

/* トップページコンテンツボタン */

.button-c {
    justify-content: center;
	text-align: center;
	width: 315px;
    height: 50px;
	line-height: 50px;
    margin-left: 10px;
    padding-left: 10px;
    border: 2px solid #fff;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
    font-size: 1.2em;
	content: '';
	transition: all .2s;
	i.fas {
		margin-right: 0.8rem;
	}
}

.button-1 {
    background-color: #0569b0;
    box-shadow: 0 0 0 3px #0569b0;
	@media (hover: hover) and (pointer: fine) {
	    &amp;:hover {
			background-color: #054990;
		}
	}
}

.button-2 {
    background-color: #2c4f54;
    box-shadow: 0 0 0 3px #2c4f54;
	@media (hover: hover) and (pointer: fine) {
	    &amp;:hover {
			background-color: #0c2f34;
		}
	}
}

.button-3 {
    background-color: #8d6449;
    box-shadow: 0 0 0 3px #8d6449;
	@media (hover: hover) and (pointer: fine) {
	    &amp;:hover {
			background-color: #6d4429;
		}
	}
}

.botton_mss {
	margin-left: 5px;
	a:hover {
		text-decoration: none;
	}
}

/* 追従するトップへ戻るボタン */

.pagetop {
	display: none;
	position: fixed;
	z-index: 2;
	bottom: 20px;
	right: 20px;
	a {
		display: block;
		width: 50px;
		height: 50px;
		line-height: 45px;
		text-align: center;
		font-size: 20px;
		color: #fff;
		background: #0086d1;
		border-radius: 50%;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .20);
		opacity: 0.5;
		transition: all .2s;
		@media (hover: hover) and (pointer: fine) {
	    	&amp;:hover {
				background-color: #333;
			}
		}
	}
}

/* 新着情報 */

.info2 {
	text-align: left;
	font-size: 1em;
	overflow: auto;
}
.info2 dl {
	line-height: 1.5em;
	margin-top: 0px;
}

.info2 dt {
	margin-left: 0.8em;
	float: left;
}

.info2 dd {
	margin:0 0.8em 0 7.5em;
	text-align: justify;
}

/* 新着情報アコーディオン */

.readmore {
	position: relative;
	padding: 0px 0px 35px;
}

.readmore-content {
	position: relative;
	height: 280px;
	transition: all .4s;
	overflow: hidden;
}

@media screen and (max-width: 768px) {
	.readmore-content {
		height: 400px;
	}
}

.readmore-content::before {
	position: absolute;
	display: block;
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 45px;
	transition: all .4s;
	background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100% );
}

@media screen and (max-width: 768px) {
	.readmore-content::before {
		height: 75px;
	}
}

.readmore-content.is_open:before{
	display: none;
}

.readmore button{
	position: absolute;
	display: table;
	left: 50%;
	font-size: 1em;
	bottom: 0px;
	margin: 0 auto;
	width: 200px;
	padding: 10px 0;
	color: #fff;
	text-align: center;
	border:none;
	border-radius: 20px;
	background-color: #555;
	transform: translateX(-50%);
	cursor: pointer;
	z-index: 1;
	transition: all .2s;
	@media (hover: hover) and (pointer: fine) {
	    &amp;:hover {
			background-color: #777;
		}
	}
}</pre></body></html>