html { font-size:24pt;
}
@media screen and (min-width: 2px) {
	html { font-size:11pt;
	}
}
@media screen and (min-width: 590px) {
	html { font-size:14pt;
	}
}
@media screen and (min-width: 840px) {
	html { font-size:17pt;
	}
}
@media screen and (min-width: 1150px) {
	html { font-size:24pt;
	}
}



body {	margin:0px; padding:0px; color:#000000; background:linear-gradient(0.25turn, #091, #3d4, #3d4, #091); text-align:center;
	font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN',sans-serif;
}
header {	color:#000000; padding:0px; margin:0px; width:100%; height:72px; text-align:center; display:flex; position:fixed;
		justify-content:space-between; z-index:60; background-color:#ccffd9; border-bottom:2px #005500 groove;
}
h1 {	font-size:1.5rem; margin:2px 8px; color:#ffff66; font-weight:bold; padding:0px; margin:0px;
}
h2 {	font-size:1.5rem; font-weight:bold; padding:10px 0px 16px; margin:0px; line-height:130%;
}
h3 {	font-size:1.5rem; font-weight:bold; padding:20px 0px 16px; margin:0px;
}
h4 {	font-size:1.2rem; font-weight:bold; padding:12px 0px 8px; margin:0px;
}

input[type="button"] {	font-size:0.9rem;
}


small.gid {	color:#ffee55; font-size:1rem;
}

table,td,tr {	margin:0px; border:0px #ffffff solid; text-align:left; vertical-align:top; 
	border-collapse:collapse; border-spacing:0px;
}
table.main {	width:96%; background-color:#ffffff;
}


div,p {	text-align:left; margin:0px; line-height:140%;
}
div.main {	width:100%;  text-align:center; margin:0px; padding:0px;
}


span.arw {	color:#226622; display:inline-block; transform:rotate(90deg); /* 90度回転文字 */
}

span.ao {	color:#0022bb; font-size:1rem;
}


a.shosai {  /* 詳細のLINKボタン */
	display:inline-block; margin:16px 0px 8px 4px; padding:12px 10px 10px; border-radius:20px; background-color:#117700; color:#ffffff;
	text-decoration:none;
}
a.shosai:hover {	background-color:#dd5500;
}


a.denwa {  /* 電話のLINKボタン */
	display:inline-block; margin:16px 0px 8px 4px; padding:16px 16px 12px; border-radius:32px; background-color:#0022aa; color:#ffffff;
	text-decoration:none; text-align:center; line-height:1.5em;
}
a.denwa::before {	content:url(tel-s.png); display:inline-block;
}
a.denwa:hover {	background-color:#ee4400;
}
@media screen and (min-width: 2px) {
	a.denwa { font-size:1.5rem;
	}
}
@media screen and (min-width: 590px) {
	a.denwa { font-size:1.4rem;
	}
}
@media screen and (min-width: 840px) {
	a.denwa { font-size:1.3rem;
	}
}
@media screen and (min-width: 1150px) {
	a.denwa { font-size:1rem;
	}
}




p.cmnt	{ margin:12px 20px 6px 20px; font-size:1rem; color:#000000;
}
@media screen and (max-width: 920px) {
	p.cmnt { margin:12px 8px; font-size:1rem;
	}
	span.ao { color:#0022bb; font-size:1rem;
	}
}


img.logo { margin-top:4px; margin-left:60px; margin-left:calc(50% - 200px); height:60px; width:auto;
}
@media screen and (min-width: 6px) {
	img.logo { margin-top:14px; margin-left:85px; height:38px; width:auto;
	}
}
@media screen and (min-width: 590px) {
	img.logo { margin-top:6px; margin-left:calc(50% - 90px); height:54px; width:auto;
	}
}
@media screen and (min-width: 1000px) {
	img.logo { margin-top:4px; margin-left:calc(50% - 110px); height:60px; width:auto;
	}
}


/* ▼カテゴリ・タイトル */

.cate_title {
	position: fixed;
	top: 4px;
	left: 2px;
	font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN',sans-serif;
	letter-spacing:1px; font-weight:normal; padding:2px 0px 0px 2px; color:#000000;
	font-size: 0.7rem; line-height:130%;
}
@media screen and (min-width: 6px) {
	.cate_title { position: fixed; top:12px; left:0px; font-size:0.9rem;
	}
}
@media screen and (min-width: 590px) {
	.cate_title { position: fixed; top:6px; left:2px; font-size:0.8rem;
	}
}
@media screen and (min-width: 1000px) {
	.cate_title { position: fixed; top:4px; left:2px; font-size:0.7rem;
	}
}








/* ▼三本線 メニューボタンを右上に表示 */

.menu-btn {
	position: fixed;
	top: 3px;
	right: 6px;
	display: flex;
	height: 60px;
	width: 60px;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	padding-top: 4px;
	z-index: 90;
	background-color: rgba(0, 0, 32, 0.6);
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
	content: '';
	display: block;
	height: 4px;
	width: 40px;
	border-radius: 8px;
	background-color: #ffffff;
	position: absolute;
}
.menu-btn span:before {
	bottom: 11px;
}
.menu-btn span:after {
	top: 11px;
}

#menu-btn-check:checked ~ .menu-btn span {
	background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
	bottom: 0;
	transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
	top: 0;
	transform: rotate(-45deg);
}

#menu-btn-check {
	display: none;
}

.menu-moji {
	position: fixed;
	top: 5px;
	right: 5px;
	display: flex;
	height: 16px;
	width: 60px;
	color: #ffffff;
	font-size: 12px;
	justify-content: center;
	align-items: center;
	z-index: 91;
}

/* ▼メニュー表示 */

.menu-content {
	width: 480px;/*メニュー幅*/
	height: 100%;
	position: fixed;
	top: 0;
	left: 100%;/*leftの値を変更してメニューを画面外へ*/
	z-index: 80;
	background-color: rgba(0, 0, 32, 0.85);
	transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
	left: calc(100% - 480px);/*メニューを画面内へ*/
}
.menu-content ul {
	padding: 50px 10px 0;
}
.menu-content ul li {
	border-bottom: solid 1px #ffffff; margin:0px; height:50px;
	list-style: none;
}
.menu-content ul li a {
	display: block;
	width: 100%;
	font-size: 1rem;
	box-sizing: border-box;
	color:#ffffff;
	text-decoration: none;
	padding: 8px 15px 10px 0;
	margin: 0px;
	position: relative;
}
.menu-content ul li a::before {
	content: "";
	width: 12px;
	height: 14px;
	border-top: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	transform: rotate(45deg);
	position: absolute;
	right: 11px;
	top: 14px;
}
.menu-content a:hover {
	color:#44ffff;
}

@media screen and (max-width: 490px) {
	.menu-content {
		width: 260px;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;
	}
	#menu-btn-check:checked ~ .menu-content {
		left: calc(100% - 260px);
	}
	.menu-content ul {
		padding: 50px 10px 0;
	}
	.menu-content ul li a {
		font-size: 1.2rem;
		padding: 8px 10px 2px 10px;
	}
}
@media screen and (max-height: 540px) {
	.menu-content {
		width: 260px;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;
	}
	.menu-content ul li a {
		font-size: 0.9rem;
		padding: 0px 10px 3px 0px;
	}
	.menu-content ul li a::before {
		width: 10px;
		height: 10px;
		border-top: solid 2px #ffffff;
		border-right: solid 2px #ffffff;
		transform: rotate(45deg);
		position: absolute;
		right: 8px;
		top: 10px;
	}
	#menu-btn-check:checked ~ .menu-content {
		left: calc(100% - 260px);
	}
	.menu-content ul {
		padding: 35px 10px 0;
	}
	.menu-content ul li {
		height:32px;
	}

}








/* ▼TOPに戻るボタン */

#page_top {
	opacity:0.8;
	font-size: 1rem;
	position: fixed;
	bottom: 4px;
	left: 10px;
	z-index: 9900;
}

#page_top a {
	opacity: 0.8;
	background-color: rgba(48,48,32,0);
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 2px;
}
#page_top a:hover {
	opacity: 1;
	background-color: rgba(0,250,32,0);
	text-decoration: none;
}





.spc {	margin:20px;
}

div.white {	color:#000000; background-color:rgba(255,255,255,0.95); width:94%; text-align:center; padding:0px 0px 16px 0px; margin:2px;
	box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .5); position:relative;
}
div.black {	color:#ffffff; background-color:rgba(0,0,16,0.9); width:94%; text-align:center; padding:0px;
	box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .5); position:relative;
}


div.titlebar {	font-size:1.4rem; background-color:#99ffff; width:100%; margin:0px; padding:10px 0px; color:#000000; text-align:center;
		font-weight:bold; letter-spacing:0.5em; border-bottom:1px #008888 solid;
}
@media screen and (min-width: 10px) {
	div.titlebar { font-size:0.9rem; letter-spacing:0.2em;
	}
}
@media screen and (min-width: 800px) {
	div.titlebar { font-size:1.1rem; letter-spacing:0.3em;
	}
}



div.gray {	color:#000000; background-color:#c0cccc; text-align:center; margin:1px 0px 10px; padding:10px 2px 6px; font-weight:bold;
	background-image:url('./bg_gray.jpg'); background-repeat:repeat;
}
div.orange {	color:#000000; background-color:#ffcc99; text-align:center; margin:1px 0px 10px; padding:10px 2px 6px; font-weight:bold;
	background-image:url('./bg_orange.jpg'); background-repeat:repeat;
}
div.green {	color:#000000; background-color:#aaffbb; text-align:center; margin:1px 0px 10px; padding:10px 2px 6px; font-weight:bold;
	background-image:url('./bg_green.jpg'); background-repeat:repeat;
}
div.red {	color:#000000; background-color:#aaffbb; text-align:center; margin:1px 0px 10px; padding:10px 2px 6px; font-weight:bold;
	background-image:url('./bg_red.jpg'); background-repeat:repeat;
}
div.yellow {	color:#000000; background-color:#aaffbb; text-align:center; margin:1px 0px 10px; padding:10px 2px 6px; font-weight:bold;
	background-image:url('./bg_yellow.jpg'); background-repeat:repeat;
}

div.twit {	color:#ffffff; background-color:#3bbafb; margin:1px 40px 10px; padding:1px; text-align:center;
}

@media screen and (min-width: 10px) {
	div.gray { font-size:1.3rem;
	}
	div.orange { font-size:1.3rem;
	}
	div.green { font-size:1.3rem;
	}
	div.red { font-size:1.3rem;
	}
	div.yellow { font-size:1.3rem;
	}
}
@media screen and (min-width: 800px) {
	div.gray { font-size:1rem;
	}
	div.orange { font-size:1rem;
	}
	div.green { font-size:1rem;
	}
	div.red { font-size:1rem;
	}
	div.yellow { font-size:1rem;
	}
}



/* ▼グラデーション ボタン  */
a.go {	display:inline-block; position:relative; font-size:1.5rem; color:#000000; text-decoration:none; font-weight:bold; border-radius:24px;
	 padding:12px 0px 12px 0px; margin:2px; z-index:0; width:98%;
}
a.go:before {
	border-radius:24px;
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	bottom:0;
	z-index:-1;
	transition:0.5s;
	background:linear-gradient(180deg, rgba(255, 240, 232, 1), rgba(254, 128, 16, 1));
}
a.go:after{
	border-radius:24px;
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	bottom:0;
	z-index:-2;
	background:linear-gradient(180deg, rgba(254, 254, 238, 1), rgba(254, 230, 90, 1));
}
a.go:hover:before{
	opacity:0;
}

@media screen and (min-width: 2px) {
	a.go { font-size:1.3rem; padding:0px 0px 4px 0px;
	}
}
@media screen and (min-width: 590px) {
	a.go { font-size:1.5rem; padding:10px 0px 10px 0px;
	}
}
@media screen and (min-width: 955px) {
	a.go { font-size:1.5rem; padding:16px 0px 16px 0px;
	}
}



div.footer {	 background-color:#005500; color:#ffffff; margin:0 0; padding:6px; text-align:center; font-size:0.6rem;
}
@media screen and (max-width: 428px) {
	div.footer { font-size:0.4rem;
	}
}
@media screen and (max-width: 920px) {
	div.footer { font-size:0.5rem;
	}
}



img {	margin:0px; padding:0px; border:0px #ffffff solid;
}