/*
Project Name: 阿蘇ミルク Create a Responsive Web Design Template
Author: Harry Atkins
Published on: http://www.onextrapixel.com/
*/

::-moz-selection 	{ background-color: #91D8f7; color: #fff; }
::selection 		{ background-color: #91D8f7; color: #fff; }

a					{ outline: 0; color: #000080; }
a:hover 			{ color: #0000ff; }
p a:hover 			{ color: #27B3CF; }
a:active 			{ outline: none; position: relative; top: 2px; }

.clearfix 			{ clear: both; }
.clearfix:after			{ content:""; clear:both; display:block; }

/*------------------------------------*\
  MAIN
\*------------------------------------*/
body 				{
	background: #81c4f7; color:#222; font-size:16px; font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; 
	-webkit-transition-property: font-size;
	-moz-transition-property: font-size;
	transition-property: font-size;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s;
	-webkit-transition-timing-function: linear, ease-in;
	-moz-transition-timing-function: linear, ease-in;
	transition-timing-function: linear, ease-in;
}

#wrapper 	{ position:relative; margin:0px auto; max-width:1080px; width: 90%; background: #fff; padding:10px 5px 10px;
		 box-shadow:0px 0px 20px 20px rgba(255,255,255,1); }
header 				{ padding-top:15px; margin-top:5px;
/* background:url(images/header.png) no-repeat; */
}

h1 { font-size:1.6em; }
header h1 { font-size: 90px; font-family: 'Droid Serif', serif; line-height: 75px; padding: 10px;
	-webkit-transition-property: font-size;
	-moz-transition-property: font-size;
	transition-property: font-size;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s;
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in;
	transition-timing function: linear, ease-in;
}
h1 a 	{ text-decoration: none;  color:#222;}
h1 a:hover	{ text-decoration: none; color: #27B3CF; }

header h2 					{ font-family: 'Helvetica'; font-size: 18px; padding: 10px;
	-webkit-transition-property: font-size;
	-moz-transition-property: font-size;
	transition-property: font-size;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s;
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in;
	transition-timing function: linear, ease-in;
}
h2 			{ font-size:1.4em; }
h2 a 			{ text-decoration:none; }
h3 			{ font-size:30px; }
h4 			{ padding:3px; margin:5px 0 0 0; }
h4 a 			{ text-decoration:underline; }
h4 a:hover 		{  }

#navigation 		{ font-size:12px; background:#f69a13; padding:0px 0px 0px 12px; margin:10px 0; 
			border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; }
#navigation a			{ color:#F9F9F9; display:block; float:left; width:12%; padding:15px 1px; text-decoration:none; border-left:1px dotted #ffd08b; text-align:center; }
#navigation a.lastr		{ border-right:1px dotted #ffd08b; }
#navigation a:hover		{ text-decoration: none; background:#4697c6; }
#navigation a:active		{ position: relative; top: 0; }
	@media screen and (max-width:740px) { 
		#navigation { background:#4898d4; padding:0px 0px 0px 10px; }
		#navigation a { line-height:2.2em; width:20%; padding:14px 5px; border:1px dotted #ffd08b; border-top:none; }
		#navigation a:hover {  }
		#navigation a:active { }
	}




.left-col 			{ width:68%; float:right; }
.sidebar 			{ width:28%; float:left; margin:0 10px 10px 0;
	-webkit-transition-property: width;
	-moz-transition-property: width;
	transition-property: width;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s;
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in;
	transition-timing function: linear, ease-in;
}

.left-col div , .sidebar div {  }
.left-col div h3 , .sidebar div h4 {
	padding-bottom:10px;
}
.sidebar div li {
	margin-bottom:6px;
}

#featured	{ padding: 0 20px;}
#latest	{ padding:20px 20px; }
	@media screen and (max-width:740px) { #latest { padding:20px 0px; } }


#about	{ padding: 20px; }

#featured div	{
	line-height: 1.5;
	padding-bottom:20px;
}

#menu_s {
	text-align:center;
	padding-bottom16px;
/* 	display:none; */
}

body.L0R0 .sidebar {
	display:none;
}
body.L0R0 .left-col {
	width:100%;
}

/* Center LR Column */
#CenterLColumn { float: left;  width: 49%;}
#CenterRColumn { float: right; width: 49%;}
/* #CenterLColumn div , #CenterRColumn div { clear: both; } */

p 					{ padding: 0 5px 0 5px; }

ul 					{ list-style: none; }
ul li 				{ margin: 0 5px; }

footer 				{ padding: 5px; text-align:center;}

pre					{ overflow: auto; font-size: 12px; }

/* basic5 headerSearch */
#headerSearch {
	position:absolute;
	height:30px;
	width:202px;
	top:2px;
	right:10px;
}
#headerSearch-searchform {
	width: 200px;
	background: transparent;
	display: block;
	height: 30px;
}
#headerSearch-keywords	{
	position: absolute;
	top: 0px;
	left: 12px;
	width: 156px;
	height: 20px;
	padding-left:6px;
	background-image:-moz-linear-gradient(top, #D7D7D7, #E7E7E7);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D7D7D7), to(#E7E7E7), color-stop(1,#E7E7E7));
	border:1px solid #AFAFAF;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25);
}
#headerSearch-searchBtn	{
	position: absolute;
	top: 3px;
	left: 182px;
}


/* XOOPS Code & Quote */
.xoopsCode {
  font-family: "Courier New",Courier,monospace;
	font-size:12px;
  padding: 6px;
	margin:10px;
	margin-bottom:0;
	word-break: break-all;
	border: 1px solid #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background:#dcdcdc;
}
.xoopsQuote {
  padding: 3px;
}

.xoopsCode pre{
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: pre-wrap;      /* CSS3 */
  word-wrap: break-word;      /* IE 5.5+ */
}



/* 阿蘇ミルクadd */
a { text-decoration:none; color:#4c9bd6;}
a:hover { text-decoration:underline; color:#ff0000;}
.sidebar ul.ul_img01 { background:#eee; padding:25px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
.sidebar ul.ul_img01 li { background:#fff; margin:0; padding:8px 8px 8px 2em; line-height:1.5; }
.sidebar ul.ul_img01 li:before { font-family:FontAwesome; content:"\f138"; position:absolute; left:4em; color:skyblue; }
.sidebar ul.ul_img01 li a { text-decoration:none; }
.sidebar ul.ul_img01 li a:hover { text-decoration:underline; }
	@media screen and (max-width:740px) { 
		.sidebar ul.ul_img01 { padding:10px; }
		.sidebar ul.ul_img01 li { display:inline; font-size:12px; margin:0px 8px 5px 0px; padding:8px 5px; line-height:3.2; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
		.sidebar ul.ul_img01 li:before { display:none; }
		.sidebar ul.ul_img01 li a { white-space:nowrap; }
		.sidebar ul.ul_img01 li a:hover {  }
	}


.headin { margin-bottom:30px; }
.headlogo { float:left; width:360px; }
.headnavi { float:right; width:580px; padding:12px 0; text-align:right; }
	@media screen and (max-width:740px) { 
		.headlogo { float:none; width:100%; text-align:center; }
		.headnavi { float:none; width:100%; text-align:center; }
	}
.headnavi ul { font-size:12px; padding:3px 0; }
.headnavi ul li { display:inline; }
.headnavi ul li:before { font-family:FontAwesome; content:"\f138"; color:#666; }
.headnavi ul li a { font-weight:bold; color:#666; }
.headnavi ul li a:hover { color:#f00; }

.footer_copy { font-size:12px; padding:20px 0; }
.footer_copy a {  }


#buttonblock { font-size:9px; text-align:center; }
#buttonblock ul {  }
#buttonblock ul li { display:inline; }
#buttonblock img { width:22%; margin:3px; }
#buttonblock span { display:none; }
	@media screen and (max-width:740px) { 
		#buttonblock ul {  }
		#buttonblock ul li { margin:0; }
		#buttonblock img { display:none; }
		#buttonblock span { display:inline-block; width:28%; padding:20px 1px; margin:3px 1px; border:1px solid #ccc; background:#eee; }
	}


table.plain { border-collapse:collapse; text-align:left; line-height:1.5; }
table.plain th { width:150px; padding:10px; font-weight:bold; vertical-align:top; border:1px solid #ccc; }
table.plain td {width:350px; padding:10px; vertical-align:top; border:1px solid #ccc; }

table.mcalen { border-collapse:collapse; text-align:left; line-height:1.5; }
table.mcalen th { width:150px; padding:10px; font-weight:bold; vertical-align:top; border:1px solid #ccc; }
table.mcalen td { width:350px; padding:10px; vertical-align:top; border:1px solid #ccc; }



/* 阿蘇ミルクadd 2017 */
#CenterLColumn table { width:100%; }
#ModuleContents { }
#ModuleContents h1.gmh1 { font-size:0.8em; font-weight:normal; color:#666; border-bottom:2px solid #eee; padding-bottom:10px; margin-bottom:30px; }
#ModuleContents h1.gmh1 a { color:#f00; padding:0 30px;}
#ModuleContents h2 { color:#666; border:1px solid #ccc; background:#eee; padding:10px; margin-bottom:20px; }
#ModuleContents h2 span { font-size:0.6em; }


.demoblock {  }
.smnone {  }
	@media screen and (max-width:740px) { 
		.smnone { display:none!important; }
		.gn_body_milk {  }
	 }


.twobox { margin:20px 0; }
.twobox .mbox { display:inline-block; vertical-align:top; width:30%; padding:0; margin:0 5px 10px 5px; }
.twobox .mbox .picture { width:100%; text-align:center; }
.twobox .mbox .descri p { width:100%; text-align:center; padding:0; }
	@media screen and (max-width:740px) { 
		.twobox .mbox { width:45%; margin:0 3px 5px 3px; }
		.twobox .mbox .descri p { font-size:0.8em; }
	 }
.threebox { margin:20px 0; }
.threebox .mbox { display:inline-block; vertical-align:top; width:30%; padding:0; margin:0 5px 10px 5px; }
.threebox .mbox .picture { width:100%; text-align:center; }
.threebox .mbox .descri p { width:100%; text-align:center; padding:0; }
	@media screen and (max-width:740px) { 
		.threebox .mbox { margin:0 3px 5px 3px; }
		.threebox .mbox .descri p { font-size:0.8em; }
	 }
.fourbox { margin:20px 0; }
.fourbox .mbox { display:inline-block; vertical-align:top; width:23%; padding:0; margin:0 2px 5px 2px; }
.fourbox .mbox .picture { width:100%; text-align:center; }
.fourbox .mbox .descri p { width:100%; text-align:center; padding:0; }
	@media screen and (max-width:740px) { 
		.fourbox .mbox { margin:0 1px 5px 1px; }
		.fourbox .mbox .descri p { font-size:0.8em; }
	 }


.toplistbox { padding:10px; margin:20px 0 20px 0; border:1px #ccc solid; }
.toplistbox .cut { float:left; width:30%; padding:0; margin:0 10px 0 0; }
.toplistbox .cut img { width:100%; }
.toplistbox .lead { float:left; width:65%; }
.toplistbox .lead h3 { font-size:26px; color:#ff6666; border-bottom:1px #ff6666 solid; padding:0; margin-bottom:10px; }
.toplistbox .lead h3 a { color:#ff6666; }
.toplistbox .lead h3 span { font-size:12px; display:block; }
.toplistbox .lead p { padding:0; }
	@media screen and (max-width:740px) { 
		.toplistbox {  }
		.toplistbox .cut {  }
		.toplistbox .cut img {  }
		.toplistbox .lead {  }
		.toplistbox .lead h3 { font-size:20px; }
		.toplistbox .lead h3 a {  }
		.toplistbox .lead h3 span {  }
		.toplistbox .lead p {  }
	 }

/* 阿蘇ミルクadd 2017 gnavi */
.gn_body_milk {  }
.gn_body_milk .quick1 { border-collapse:collapse; }
.gn_body_milk .quick1 th ,.gn_body_milk .quick1 td { border:1px solid #b9b9b9; padding:5px; }
.gn_body_milk .quick1 th { background:#def4ff; }
.gn_body_milk .quick2 { border-collapse:collapse; }
.gn_body_milk .quick2 th ,.gn_body_milk .quick2 td { border:1px solid #b9b9b9; padding:5px; }
.gn_body_milk .quick2 th { background:#fff0d7; }
.gn_body_milk .quick3 { border-collapse:collapse; }
.gn_body_milk .quick3 th ,.gn_body_milk .quick3 td { border:1px solid #b9b9b9; padding:5px; }
.gn_body_milk .quick3 th { background:#fff0f5; }

.gn_animal_box { border:15px solid #d2e7ff; background:#f8fbff; text-align:center; border-radius:10px; padding:15px; margin:0 0 30px 0; }
.gn_animal_box h4 { color:#ff66cc; font-weight:bold; text-shadow:1px 0px 0px #ffff00, 0px 1px 0px #ffff00, -1px 0px 0px #ffff00, 0px -1px 0px #ffff00; padding:0; margin:0; }

.gn_file img { width:100%!important; }
.gn_caption { background-color:#eee; color:#000; font-size:14px; padding:10px 0; margin:0; }
.gn_file { margin:0 0 30px 0; }

.gn_cate_box { margin:20px 0; }
.gn_cate_box .mbox { display:inline-block; vertical-align:top; width:27%; border:1px solid #ccc; padding:15px 10px; margin:0 5px 10px 5px; }
.gn_cate_box .mbox .picture { width:100%; text-align:center; }
.gn_cate_box .mbox .descri { width:100%; text-align:center; padding:0; }
.gn_cate_box .mbox .wtime { width:100%; text-align:center; padding:0; font-size:0.6em; color:#666; }
	@media screen and (max-width:960px) { 
		.gn_cate_box .mbox { padding:7px 6px; margin:0 3px 5px 2px; }
		.gn_cate_box .mbox .descri { font-size:0.8em; }
	 }




/* 201603 column Migration */
.box3c { float:left; width:26%; padding:10px; margin:0 15px 30px 0; border:solid 1px #ccc;
		border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:0px 0px 5px #ccc; }
.box3c img { width:100%; }
.box3c p { margin:10px 0 0; font-size:12px; }
.columnlast { margin-right:0; }
	@media screen and (max-width:740px) { 
		.box3c { padding:5px; margin:0 3px 8px 0; }
		.box3c p { margin:0; font-size:10px; }
	 }

.menuimg { float:left; width:200px; padding:10px; margin:0 15px 30px 0; background:#ffffff; border:solid 1px #ccc;
			border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:0px 0px 5px #ccc; }
.menuimg  img { width:100%; }
.menuexp { float:left; width:300px; font-weight:bold; }
.menuexp  p { margin:0; }
.menuexp span { font-size:12px; font-weight:normal; }
.menutitle { font-size:1.4em; line-height:2em; padding:10px 0; }
.menuprice { text-align:right; color:#ff0000; font-size:1.4em; font-weight:bold; }
	@media screen and (max-width:740px) { 
		.menuimg { float:none; width:90%; }
		.menuexp { float:none; width:100%; font-weight:bold; }
	 }


.floatl { float:left; }
.floatr { float:right; }
.marb20 { margin-bottom:20px }



/* 201603 add Migration */
.quick_title { font-size:20px; font-weight:bold; }

table.default { padding:5px 0px 10px; margin:5px 0px 20px; border-collapse:collapse; }
table.default th { text-align:left; font-weight:bold; padding:8px; min-width:80px; border:1px solid #ccc; vertical-align:middle; background:#e2f2f5; }
table.default td { padding:8px; border:1px solid #ccc; vertical-align:middle; background:#fff; }
table.default p { padding:0; margin:0; }


table.quick { width:670px; padding:5px 0px 10px; margin:5px 0px 20px; border-collapse:collapse; }
table.quick th { width:170px; text-align:left; white-space:nowrap; font-weight:bold; padding:8px; border:1px solid #ccc; vertical-align:middle; background:#f6f6f6; }
table.quick td { width:500px; padding:8px; border:1px solid #ccc; vertical-align:middle; background:#fff; }
table.quick p { padding:0; margin:0; }

table.quick1 { width:100%; padding:5px 0px 10px; margin:5px 0px 20px; border-collapse:collapse; }
table.quick1 th { text-align:left; white-space:nowrap; font-weight:bold; padding:8px; border:1px solid #ccc; vertical-align:middle; background:#def4ff; }
table.quick1 td { padding:8px; border:1px solid #ccc; vertical-align:middle; background:#fff; }
table.quick1 p { padding:0; margin:0; }

table.quick2 { width:670px; padding:5px 0px 10px; margin:5px 0px 10px; border-collapse:collapse; }
table.quick2 th { width:170px; text-align:left; white-space:nowrap; font-weight:bold; padding:8px; border:1px solid #ccc; vertical-align:middle; background:#fff0d7; }
table.quick2 td { width:500px; padding:8px; border:1px solid #ccc; vertical-align:middle; background:#fff; }
table.quick2 p { padding:0; margin:0; }

table.quick3 { width:670px; padding:5px 0px 10px; margin:5px 0px 10px; border-collapse:collapse; }
table.quick3 th { width:170px; text-align:left; white-space:nowrap; font-weight:bold; padding:8px; border:1px solid #ccc; vertical-align:middle; background:#fae1ff; }
table.quick3 td { width:500px; padding:8px; border:1px solid #ccc; vertical-align:middle; background:#fff; }
table.quick3 p { padding:0; margin:0; }