/* ----
	くりえいと創
	2019-04-04	レスポンシブ対応
	2014-12-18	作成
	http://homepage2.nifty.com/create/
---- */

@charset "UTF-8";

/*////////////////////////////////////////////
//////////////////////////////////////////////
//	Reset
//////////////////////////////////////////////
////////////////////////////////////////////*/

body,
h1, h2, h3, h4, h5, h6	{ margin: 0; padding: 0; }


/*////////////////////////////////////////////
//////////////////////////////////////////////
//	Original
//////////////////////////////////////////////
////////////////////////////////////////////*/
body {
	font-family: "Meiryo", "MS PGothic", "Hiragino Kaku Gothic Pro", "MS UI Gothic", sans-serif;
	background-color: #fff;
}

img	{ max-width: 100%; }

h1, h2, h3, h4, h5, h6	{ font-weight: normal; }

h1	{ margin: 0; padding: 0; }
h2,
h3,
h4	{ margin: 20px 0 1em; padding: 2px 1em; }
h5	{ margin: 40px 10px 10px; padding: 0; }
h6	{ margin: 10px 10px; padding: 0; }

h1	{ color: #444; line-height: 1.2; }
h2	{ color: #fff; background-color: rgba(0,0,0,.5); }
h3	{ font-size: 13pt; color: #fff; background-color: rgba(0,0,0,.5); }
h4	{ font-size: 12pt; color: #fff; background-color: rgba(0,0,0,.5); }
h5	{ font-size: 14pt; color: #555; }
h6	{ font-size: 12pt; color: #333; text-decoration: underline; clear: both; }

h1 span	{ font-size: 18px; font-family: meiryo, serif; }
h3 span	{ font-size: 11px; padding-left: 1em; }

a			{ transition: all 0.3s ease; }
a:link		{ color: #36c; text-decoration: none; }
a:visited	{ color: #36c; text-decoration: none; }
a:active	{ color: #93c; text-decoration: none; }
a:hover		{ color: #93c; text-decoration: none; }


.l	{ text-align: left;  }
.r	{ text-align: right; }
.c	{ text-align: center; }
.vt	{ vertical-align: top; }

.s		{ font-size:  .8em; }
.m		{ font-size:  .9em; }
.lg		{ font-size: 1.1em; }
.lg2x	{ font-size: 1.2em; }

.b		{ font-weight: bold; }
.bb		{ font-size: 1.2em; font-weight: bold; color: #000; }

.date	{ color: #090; font-size: 12px; }
.url	{ color: #393; font-size: .9em; }
.caution{ color: #d00; font-size: .8em; }


.sep	{ clear: both;
	margin: 40px 0px 0px; padding: 40px 0px 0px;
	color: #333; font-size: 13pt;
	background: transparent url(./bg_hr.png) no-repeat 50% 0%;
}

.clr,
.clear	{ clear:both; }

.catgy	{ padding-right: 20px; }

.dec	{ margin-left: 1em; padding-left: 0; }
.dec li	{ list-style-type: none; margin: 0 10px; padding: 10px 0; border: none; background-image: none; }
.dec li:before { content: "\f138"; font-family: FontAwesome; }


/*--------*/
table	{ margin:10px; font-family:Arial; }

table.solid		{ margin:10px 0; font-family:Arial; line-height:1.2; border-collapse:collapse; }
table.solid th,
table.solid td	{ padding:0.5em 0.7em; border:1px solid #ccc; }
table.solid th	{ color:#333; background-color:#eee; }
table.solid .ng	{ color:#666; text-decoration:line-through; background-color:#f8f8f8; }
table.solid .next	{ color:#abc; font-size:0.8em; line-height:1.0; }
table.solid .ec	{ white-space:nowrap; text-align:center; background-color:#f0f0f0; }
table.solid .dc	{ white-space:nowrap; text-align:center; background-color:#ddd; }
table.solid .e	{ white-space:nowrap; background-color:#cde; color:#000; }
table.solid .d	{ white-space:nowrap; background-color:#eee; }
table.solid .w	{ white-space:nowrap; }

table.stripe		{ margin:10px; font-family:Arial; border-bottom:1px solid #ddd; border-collapse:collapse; }
table.stripe tr		{ line-height:1.3; border-top:1px solid #ddd; }
table.stripe th,
table.stripe td		{ padding:1.0em; padding-right: 1.0em; vertical-align:top; }
table.stripe .e		{ white-space:nowrap; background-color:#cde; color:#000; }
table.stripe .d		{ white-space:nowrap; background-color:#eee; }

table.simple		{ margin:10px; font-family:Arial; border-collapse:collapse; }
table.simple tr		{ font-size:1.0em; line-height:1.3; }
table.simple th		{ padding:0.5em 0.8em; vertical-align:top; }
table.simple td		{ padding:0.5em 0.8em; vertical-align:top; }
table.simple .e		{ white-space:nowrap; background-color:#cde; color:#000; }
table.simple .d		{ white-space:nowrap; background-color:#eee; }

table.forest	{ border-collapse:collapse; color:#666; background-color:#e8edb1; border:1px solid #fff; }
table.forest th,
table.forest td	{ padding:0.3em 0.6em; border:1px solid #fff; }
table.forest .d	{ white-space:nowrap; color:#222; background-color:#a1bf87; }
table.forest .e	{ white-space:nowrap; color:#333; background-color:#b5dcc1; }

table.tbiz td	{ padding:0.8em 0.8em; }
table.tbiz span	{ font-size: 0.8em; }
table.tbiz .t01	{ color: #fff; background-color:#00b6bc; font-size: 1.0em; white-space:nowrap; }
table.tbiz .t02	{ color: #fff; background-color:#3fb34f; font-size: 1.0em; white-space:nowrap; }
table.tbiz .t03	{ color: #fff; background-color:#689bd0; font-size: 1.0em; white-space:nowrap; }
table.tbiz .t04	{ color: #fff; background-color:#f38130; font-size: 1.0em; white-space:nowrap; }
table.tbiz .b01	{ color: #333; background-color:#a7d8c9; font-size: 0.9em; }
table.tbiz .b02	{ color: #333; background-color:#bad77b; font-size: 0.9em; }
table.tbiz .b03	{ color: #333; background-color:#badcf2; font-size: 0.9em; }
table.tbiz .b04	{ color: #333; background-color:#faba7b; font-size: 0.9em; }
table.tbiz .s01	{ color: #333; background-color:#d8ecde; font-size: 0.8em; white-space:nowrap; padding:0.4em 0.8em; }
table.tbiz .s02	{ color: #333; background-color:#f4f19f; font-size: 0.8em; white-space:nowrap; padding:0.4em 0.8em; }


/*----画像サムネイル表示----*/
.phbox_r, .phbox_nr,
.phbox_l, .phbox_nl,
.phbox_c, .phbox_nc	{ text-align: center; color: #666; font-size: 0.8em; line-height: 1.6; }

.phbox_r, .phbox_nr	{ float: right; margin: 0 10px 20px; }
.phbox_l, .phbox_nl	{ float: left;  margin: 0 10px 20px; }
.phbox_c, .phbox_nc	{ margin: 20px 0; }

.phbox_r	{ margin: 10px 20px 40px 40px; }
.phbox_l	{ margin: 10px 40px 40px 20px; }
.phbox_c	{ margin: 20px 0; }

.phbox_r, .phbox_l, .phbox_c	{
	padding: 10px;
 	background-color: #fff;
	box-shadow:	0px 0px 15px 2px rgba(0,0,0,.2);
}
.phbox_nr, .phbox_nl, .phbox_nc	{ padding: 10px; }

.phbox_r  img, .phbox_l  img, .phbox_c  img	{ border:0px solid #ccc; }
.phbox_nr img, .phbox_nl img, .phbox_nc img	{ border:0px solid #ccc; }



/*////////////////////////////////////////////
//////////////////////////////////////////////
//	Default
//////////////////////////////////////////////
////////////////////////////////////////////*/
/*-- トップページ インフォメーション --*/
.top_info		{}
.top_info ul	{ margin: 0; padding: 0; }
.top_info li	{ clear: both;
	list-style-type: none;
	height: 60px;
	overflow: hidden;
	margin: 0 10px 6px;
	padding: 0 0 5px; 
	border-bottom: 1px dotted #ccc; 
	background-image: none; 
}
.top_info .ctg	{ padding:0.3em 0; color:#ccc; font-size:13px; font-weight:normal; font-family:Arial; text-align:right; }
.top_info .vevent		{ font-weight:normal; }
.top_info .dtstart		{ float:left; padding-top:4px; color:#090; font-size:12px; }
.top_info .summary		{ display:block; margin-left:90px; color:#555; font-weight:bold; }
.top_info .description	{ display:block; clear:left; margin-left:90px; font-size:12px; }
.top_info .description img	{ margin:1em 0; border-width:0; }


/*-- インフォメーション --*/
.info ul	{ margin:0; padding:0; }
.info li	{ clear:both; margin:0 0 20px; padding: 0 0 20px; border-bottom: 1px dotted #ccc; background-image: none; list-style-type: none; }
.info li:first-child	{ padding-top:20px; }
.info li li	{ padding-left:18px; border:none; background:transparent url(./arrow13.gif) no-repeat left 2px; }
.info .vevent		{ font-weight:normal; }
.info .dtstart		{ color: #090; font-size: .9em; }
.info .summary		{ display: block; color: #036; font-size: 1.2em; font-weight: bold; }
.info .description	{ display: block; font-size: 1.0em; }
.info .description img	{ margin: 1em 0; border-width: 0; }
.info .ctg	{ display: none; }


/*--------
.pagelink	{ clear:both; padding:24px 6px; font-size:14px; line-height:1.0; text-align:center; }
.pagelink .blank,
.pagelink .self,
.pagelink a.plink	{ margin:0 3px; padding:3px 6px; text-decoration:none; border:1px solid #ccc; background-color:#fff; }
.pagelink .blank	{ color:#999; }
.pagelink .self		{ color:#c00; font-weight:bold; padding:4px 6px; }
.pagelink a.plink:visited	{ color:#00f; text-decoration:none; }
.pagelink a.plink:hover		{ color:#fff; background-color:#36c; }
*/
.pagelink	{ clear: both; padding: 1em 0; font-size: 13px; line-height: 2; }
.pagelink	{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.pagelink .blank,
.pagelink .self,
.pagelink a.plink	{ margin: 1px; padding: 0 5px; text-decoration: none; border: 1px solid #ccc; background-color: #fff; }
.pagelink .blank	{ color: #999; }
.pagelink .self		{ color: #c00; font-weight: bold; }
.pagelink a.plink:visited	{ color: #00f; text-decoration: none; }
.pagelink a.plink:hover		{ color: #fff; background-color: #36c; }


/*=========================
	works/index.html
	archive.html
=========================*/
.panels		{ margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.panels li	{ font-size: .8em; text-align: center; list-style-type: none; }
.panels li	{
/*
	width: 29%;
	margin: 1% 1% 2%;
	padding: 1%;
*/
	width: 130px;
	margin: 5px auto 10px;
	padding: 5px;
	margin: 5px 3px 10px;
	padding: 4px;
	box-shadow:	0px 0px 6px 2px rgba(0,0,0,.15);
}
.panels .ph	{ margin-bottom: .5rem; background-color: #ccc; }
.panels img	{ max-width: 100%; max-height: 87px; object-fit: contain; vertical-align: bottom; }
.panels a:hover	{ opacity: .8; }



/* Fixed Menu */
.fixed {
	position: fixed;
	top: 0;
	z-index: 10000;
/*
	width: 100%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 -3px 10px rgba(0, 0, 0, 0.1);
*/
}



/*----------------------
	SNS Icon
----------------------*/
.sns 	{ display: flex; gap: 1rem; }
.sns a	{ display: flex; justify-content: center; align-items: center; }
.sns a	{ width: 32px; height: 32px; font-size: 22px; }
.sns a	{ color: #fff; background-color: rgba(0,0,0,.5); border-radius: 5px; transition: .2s; }
.sns a:hover	{ transform: scale(1.1); text-decoration: none; }
.sns i	{ display: none; }
.sns .instagram	{ background-image: url(gradient-768x768.jpg); background-size: cover; }
.sns .facebook	{ background-color: #1977f1; }
.sns .youtube	{ background-color: #f00; }
.sns .twitter	{ background-color: #1DA1F2; }
.sns .envelope	{ background-color: #6c9; }
.sns .website	{ background-color: #f90; }
.sns .website2 	{ background-color: #f60; }

.sns .instagram:before	{ content: '\f16d'; font-family: fontAwesome; }
.sns .facebook:before	{ content: '\f09a'; font-family: fontAwesome; }
.sns .youtube:before	{ content: '\f16a'; font-family: fontAwesome; }
.sns .twitter:before	{ content: '\f099'; font-family: fontAwesome; }
/* For PC */
.sns.pc	{ padding-top: 50px; }
.sns.pc .instagram	{ background-image: none; }
.sns.pc .instagram:hover	{ background-image: url(gradient-768x768.jpg); }
/* For SmartPhone */
.sns.sp	{ position: absolute; top: -56px; right: 64px; }
.sns.sp .instagram	{ width: 30px; height: 30px; font-size: 22px; }
.sns.sp .instagram	{ font-size: 32px; background: none; }




/*----------*/
#wrapper	{}

#header	{
	background-color: rgba(0,0,0,.5);
}
#header .logo {
	display: inline-block;
	padding: 10px;
	transition: .3s;
}
#header .logo:hover	{ background-color: rgba(0,0,0,1); }
#header .logo a {
	display: block;
	width: 260px;
	height: 50px;
	text-indent: -9999px;
	background-image: url(logo_780x150.png);
	background-size: 100%;
}


#navi-wrap	{ display: none; }
#navi-wrap	{ float: left; margin:0; padding: 15px; }
#navi-wrap	{ z-index: 1; }

#navi	{ position: relative; line-height: 1.5; }
/*
#navi	{ font-family: arial, helvetica, sans-serif; line-height: 1; }
*/
/* Anker */
#navi a		{ display: block; margin: 0; padding: 10px; transition: none; }
#navi a		{ color: #eee; background-color: rgba(0,0,0,.5); }
#navi a:hover	{ color: #fff; background-color: rgba(0,0,0,1); }
#navi .toggle { position: absolute; line-height: 1; border-radius: 5px; }
#navi .toggle:before { content: "\f067"; font-family: FontAwesome; }
/* 1階層以下 */
#navi ul { position: absolute; }
#navi ul { margin: 0; padding: 0; font-size: 13px; }
#navi li { position: relative; }
#navi li { margin: 0; padding: 0; white-space: nowrap; list-style-type: none; }
#navi li:hover { color: #fff; background-color: rgba(0,0,0,.5); }
/* 2階層以下 */
#navi ul ul	{ position: absolute; top: 0; left: 100%; }
#navi ul ul	{ background-color: rgba(0,0,0,.4); box-shadow: 0px 0px 10px 2px rgba(0,0,0,.3); }
/* 表示制御 */
#navi ul { visibility: hidden; }
#navi:hover .toggle	{ visibility: hidden; }
#navi:hover ul		{ visibility: visible; }
#navi:hover ul ul	{ visibility: hidden; }
#navi ul li:hover ul { visibility: visible; }

#submenu	{
	margin-top: 50px;
	padding: 0;
	width: 200px;
	font-size: 13px;
	line-height: 1.5;
}
#submenu ul { margin: 0; padding: 0; }
#submenu li	{ margin: 0; padding: 0; list-style-type: none; }
#submenu li+li	{ border-top: 1px solid #ccc; }
#submenu a	{ display:block; margin: 0; padding: 10px; }
#submenu a			{ color:#888; background-color:#fff; }
#submenu a:hover	{ color:#fff; background-color:#333; text-decoration:none; }

/*----------------------
	NavigationDrawer
----------------------*/
#nav-drawer {
	position: relative;
	margin: auto;
	max-width: 1000px;
}
#nav-open	{
	position: absolute;
	top: -70px;
	right: 5px;
	z-index: 2;
}
#nav-open	{
	display: block;
	width: auto;
	height: 50px;
	padding: 10px;
	font-size: .5em;
	text-align: center;
	text-decoration: none;
	color: #fff;
/*
	background-color: rgba(0,0,0,.5);
	background-color: #727272;
	background-color: #36c;
	border-radius: .5em;
*/
}
#nav-open:hover	{
	color: #fff;
	background-color: #39f;
}
#nav-open .fa	{ display: block; font-size: 36px; }

/* 閉じる用の薄黒カバー（全体）※初期は非表示 */
#nav-close {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: black;
	transition: .3s ease-in-out;
	opacity: 0;
	z-index: 99;
}
/* メニューコンテンツ（最前面） */
#nav-content {
	overflow: auto;
	position: fixed;
	width: 90%; height: 100%;
	max-width: 400px;
	background-color: rgba(0,0,0,.7);
	transition: .3s ease-in-out;
	z-index: 9999;
/*	左に隠しておく
	top: 0; left: 0;
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);
*/
/*	右に隠しておく */
	top: 0; right: 0;
	-webkit-transform: translateX(105%);
	transform: translateX(105%);
}
#nav-content ul	{ margin: 0; padding: 0; display: block; }
#nav-content li	{ border: none; border-top: thin solid rgba(255,255,255,.3); list-style-type: none; }
#nav-content li li	{ border-top: thin dotted rgba(255,255,255,.2); margin-left: 8vw; }
#nav-content a	{ display: block; padding: 1em; color: #fff; font-size: 13px; }
/* チェックが入ったら→カバーを表示 */
#nav-input:checked ~ #nav-close {
	display: block;
	opacity: .7;
}
/* チェックが入ったら→メニュー表示（スライド） */
#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
	box-shadow: -6px 0 25px rgba(0,0,0,.5);
}
/* チェックボックス等は非表示に */
.nav-unshown { display: none; }
/*+++++*/


#pankz	{ display: none; }

#container	{}

#main	{
	padding: 15px;
	color: #444;
	font-size: .9em;
	line-height: 1.6;
	overflow: hidden ;	/* clearfixを使わずにfloatを解除 */
}
/*=========================
	reference/index.html
	studio/index.html
=========================*/
#main dl	{ overflow: hidden ;	/* clearfixを使わずにfloatを解除 */ }
#main dt	{ clear: left; float: left; text-align: right; width: 85px; }
#main dd	{ margin: 0; margin-left: 100px; padding: 0 0 15px 15px; border-left: 1px solid #ccc; }
#main dt span	{ font-size: 11px; display: block; }
/*
#main dd span	{ font-size: .9em; color: #777; }
*/
#main a:hover	{ background-color: #f0f0f0; }
#main .hl	{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

#footer	{
	clear:both;
	margin: 15px;
	padding:15px;
	color: #aaa;
	font-size: 11px;
	text-align: center;
	border-top: 1px solid #ccc;
}
#footer address	{ margin:0; padding: 0 0 20px; line-height: 1.5; }
#footer .cprt {}











/* for SmartPhone Landscape (横) */
@media screen and (min-width:480px) {

	.lg		{ font-size: 1.2em; }
	.lg2x	{ font-size: 1.6em; }

	.panels li	{ width: 210px; }
	.panels img	{ max-height: 140px; }

	/*-- インフォメーション --*/
	.info		{ margin: 15px; }
	.info .dtstart		{ float: left; padding-top: 2px; }
	.info .summary		{ margin-left: 100px; }
	.info .description	{ margin-left: 100px; }

	#header	{ margin: 15px; }

	#main dt	{ clear: left; float: left; width: 110px; padding-top: 15px; }
	#main dd	{ margin: 0 0 0 130px; padding: 15px 0 15px 20px; border-left: 1px solid #ccc; }
	#main a:hover	{ background-color: #f0f0f0; }
	#main .hl	{ height: 1.5em; line-height: 1.7em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

@media screen and (min-width:728px) {
	h1	{ font-size: 48pt; }
	h2	{ font-size: 24pt; }
}

/* for Tablet */
@media screen and (min-width:768px) {
}

/* View Tomorrow Weather */
@media screen and (min-width:800px) {
	#nav-drawer { display: none; }
	#navi-wrap	{ display: block; }

	#header	{ background-color: rgba(0,0,0,.1); }
	#header .logo { background-color: rgba(0,0,0,.5); }

	#main	{ min-height: 500px; margin-left: 240px; }
	#main dl	{ margin: 1em; }
}

/* for PC */
@media screen and (min-width:1024px) {
}

@media screen and (min-width:1280px) {
	.panels li	{ width: 240px; }
	.panels img	{ max-height: 160px; }
}