<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/* =======================================

	CSS
	Last Up Date 17/11/24

------------------------------------------

		1.Reset
		2.Structure
		3.Header
		4.Article
		5.Footer
※type01 = bk.white h.pink
　type02 = bk.white h.yellow (Elephant)
　type03 = bk.offwhite h.pink

========================================== */


/*	1.Reset
========================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
//	font: inherit;
//	font-size: 100%;
	vertical-align: baseline;
}

html {	line-height: 1;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

ol, ul {	list-style: none;}

q, blockquote {	quotes: none;}
q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none;
}

a {
	margin:0;
	padding:0;
	border:0;
	outline: none;
// 	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
a:focus {	outline:none;}

fieldset, img {	border: 0;}
img {	max-width: 100%; width: 100%; height: auto; vertical-align: top;}

h1,h2,h3,h4,h5,h6 {	
	clear: both; 
//	font-size: 100%; 
//	font-weight: normal;}

strong {
//	font-weight: bold;}


/*	2.Structure
========================================== */

body {
	font-family: "Meiryo", "メイリオ", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Helvetica, Arial, Verdana, sans-serif;
	color: #2f251e;
	text-align: center;
//	font-size: 14px;
	background-color: #fff;
}


.fzSS  { font-size:  72%;}/* base 14px -&gt; 10px */
.fzS   { font-size:  86%;}/* base 14px -&gt; 12px */
.fzM   { font-size: 100%;}
.fzL   { font-size: 115% !important;}/* base 14px -&gt; 16px */
.fzLL  { font-size: 129%;}/* base 14px -&gt; 18px */
.fzLLL { font-size: 143%;}/* base 14px -&gt; 20px */

.mb0 {  margin-bottom: 0 !important;}
.mb10 {  margin-bottom: 10px !important;}
.mb20 {  margin-bottom: 20px !important;}
.mb30 {  margin-bottom: 30px !important;}
.mb40 {  margin-bottom: 40px !important;}
.mb50 {  margin-bottom: 50px !important;}
.mb60 {  margin-bottom: 60px !important;}
.mb70 {  margin-bottom: 70px !important;}
.mb80 {  margin-bottom: 80px !important;}
.mb90 {  margin-bottom: 90px !important;}
.mb100 {  margin-bottom: 100px !important;}

.w600{	max-width: 600px; margin: auto;}

.text-left {	text-align: left !important;}
.text-center {	text-align: center !important;}
.text-right {	text-align: right !important;}


/* 強調 */
.fb{	font-weight: bold;}
.fc{	color: #ff5d94;}
.fline{	text-decoration: underline;}
.price{
	font-size: 86%;
	font-weight: bold;
	line-height: 1.2;
}

/* 背景色 */
body#type01 ,body#type21{	background: #fff;}
body#type03 header ,body#type03 article ,body#type03 aside{	background: #fcfbf7;}


header ,footer ,article{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

article .content ,article aside{
	margin: 0 3.125%;
	padding-bottom: 5%;
}

body#type01 a{	color: #ff5d94;}
body#type02 a{	color: #0c378b;}
body#type03 a{	color: #ff5d94;}
a:hover ,a:focus{}

body#type02 h1 ,body#type03 h1{
	font-size: 30px;
	line-height: 1.1;
	margin: 5% 0 3%;
}
h2{
	font-size: 129%;
    font-weight: bold;
	margin-bottom: 5%;
	line-height: 1.3;
}
body#type01 h2{    border-bottom: solid 3px #e5007f;}
body#type02 h2{    border-bottom: solid 3px #e6d117;}
body#type03 h2{    border-bottom: solid 3px #e5007f;}

h3{
	margin-bottom: 5%;
//	font-size: 115%;
	line-height: 1.3;
//	font-weight:bold;
	border-bottom:solid 1px #333;
}
h4{
//	font-weight: bold;
	text-decoration: underline;
//	font-size: 115%;
}

small{	font-size: 58%;}
figure{	margin-bottom: 5%;}

/*	3.Header
========================================== */
header{	padding-bottom: 5%;}
#sitename{
	border-bottom: solid 1px #ccc;
	padding: 3px 0;
}
	#sitename img{
		max-width: 200px;	/*800pxより小さい画像の場合に指定*/
	}
	/*body#type03 #sitename img{	max-width: 800px;}　GRINロゴのため*/

.utilities{
	font-size: 86%;
	text-align: left;
	padding: 2%;
	margin-bottom: 3%;
	border-bottom: solid 1px #ccc;
}


/*	4.Article
========================================== */
.content{
	line-height: 1.8;
//	font-size: 115%;
	text-align: left;
}

.content p{	margin-bottom: 5%;}
	.content p img{}

.content .read{
	font-size: 86%;
	color: #666;
	line-height: 1.3;
	margin-top: -3%;
}

.content blockquote{
	padding: 1%;
    margin-bottom: 3%;
}
	.content blockquote.bqgi{
		background: #ebebeb;
		font-style: italic;
	}
	.content blockquote.bqp{
		background: #FCF6F6;
	}

.content ul{
	list-style: disc;
	margin-left: 16px;
	margin-bottom: 5%;
}

aside{
	font-size: 72%;
	text-align: left;
	line-height: 1.5;
}
	aside p{	margin-bottom: 3%;}

video{
	width: 100%;
	margin-bottom: 5%;
}

/*	5.Footer
========================================== */
footer{		overflow: hidden;}
footer.black{		background: #000;}
footer.pink{		background: url(../images/footer_bg.gif) repeat-y;}

footer ul{		margin: 3.125%;}
	footer li{	margin-bottom: 2%;}
.copylight{
	color: #fff;
	font-size: 86%;
	margin-bottom: 3%;
}




/*	案1
========================================== */
aside#recomend1{
	font-size: 86%;
	max-width: 800px;
	margin: auto;
	overflow: hidden;
}
aside#recomend1 nav{
	margin: 0 3.125%;
}
		aside#recomend1 nav a{	color: #000;}

		aside#recomend1 nav li{
			background: url(../images/bgico.png) no-repeat 100% 35%;
			margin: 0 0 3.125%;
			padding-bottom:  3.125%;
			width: 48%;
			border-bottom: 1px solid #ccc;
		}
		aside#recomend1 nav li:nth-child(2n-1) {	float: left;}
		aside#recomend1 nav li:nth-child(2n) {	float: right;}
		aside#recomend1 nav figure{
			height: 72px;
			overflow: hidden;
			line-height: 1.3;
			margin: 0 20px 0 0;
		}
		aside#recomend1 nav figure img {
			width: 120px;
//			border-radius: 50%;
			margin-right: 3.125%;
			float: left;
		}
		aside#recomend1 nav figcaption{
			display: table-cell;
			vertical-align: middle;
			height: 72px;
		}
@media screen and (max-width:680px){
		aside#recomend1 nav li{	width: 100%;}
		aside#recomend1 nav li:nth-child(2n-1)  ,
		aside#recomend1 nav li:nth-child(2n) {	float: none;}
		aside#recomend1 nav li:last-child {	border: none;}
}




/*	案2
========================================== */
.uenavi header{	margin-top: 36px;} /*bodyタグにclass指定　reco.html*/
aside#recomend2{
	font-size: 100%;
	width: 800px;
	margin: auto;
}
aside#recomend2 nav{
	background: #000;
	max-width: 800px;
	width: 100%;
	position: absolute;
	top: 0;
}
		aside#recomend2 nav p{
			margin: 0;
			padding: 6px 3.125%;
		}
			aside#recomend2 nav p a{	color: #fff;}
		aside#recomend2 nav ul{
			display: none;
			background: #fff;
			overflow: hidden;
			padding: 0 3.125%;
		}
		aside#recomend2 nav li{
			margin: 3.125% 0;
			width: 49%;
		}
		aside#recomend2 nav p:hover + ul ,aside#recomend2 nav p + ul:hover{
			display: block;
		}
		aside#recomend2 nav li:nth-child(2n-1) {	float: left;}
		aside#recomend2 nav li:nth-child(2n) {	float: right;}
		aside#recomend2 nav figure{
			height: 80px;
			overflow: hidden;
			line-height: 1.3;
			margin: 0;
		}
		aside#recomend2 nav figure img {
			width: 100px;
			border-radius: 50%;
			margin-right: 3.125%;
			float: left;
		}
		aside#recomend2 nav figcaption{
			display: table-cell;
			vertical-align: middle;
			height: 80px;
		}
@media screen and (max-width:600px){
		aside#recomend2 nav li{	width: 100%;}
		aside#recomend2 nav li:nth-child(2n-1)  ,
		aside#recomend2 nav li:nth-child(2n) {
			float: none;
		}
}






</pre></body></html>