// LESS



/*-----------------------------------------------------
   Front Page setting (default = iPhone)
 ------------------------------------------------------*/
#front-topics .frnt-btn {
	width: 96.666666666667%;
	margin-left: 1.6666666666667%;
	margin-right: 1.6666666666667%;
	margin-bottom: 24px;
	margin-bottom: 2.4rem;
	display: block;
	float: left;
}

/* Front Page main
 --------------------------------------*/
.home .front-title {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 12px;
	padding: 1.2rem;
	
	h1 {
		font-size: 30px;
		font-size: 3.0rem;
		font-weight: bold;
		line-height: 1.3;
		color: #3f6361;
	}
	h2 {
		font-size: 28px;
		font-size: 2.8rem;
		font-weight: bold;
		line-height: 1.3;
		color: #dd7143;
		margin-bottom: 24px;
		margin-bottom: 2.4rem;
	}
}

.front-article {
	max-width: 1024px;
	margin: 48px auto 12px;
	margin: 4.8rem auto 1.2rem;
	padding: 24px;
	padding: 2.4rem;
	padding-bottom: 0;
	background: rgba(255,255,255,1);
	border-radius: 24px;
	//box-shadow: 0 0 20px 20px rgba(236,235,214,0.7) inset;
	box-shadow: 0 0 15px 15px rgba(255,255,255,1);
	
	h1 {
		font-size: 30px;
		font-size: 3.0rem;
		color: #990c34;
		margin-top: 24px;
		margin-top: 2.4rem;
		margin-bottom: 48px;
		margin-bottom: 4.8rem;
	}
	p {
		font-size: 20px;
		font-size: 2.0rem;
		line-height: 2.0;
	}
}

/*-----------------------------------------------------
   Pagenation setting
 ------------------------------------------------------*/
.tablenav {
	color: #2583ad;
	//background: white;
	margin: 1em auto;
	line-height: 2;
	text-align: center;
}

a.page-numbers, .tablenav .current {
	color: #00019b;
	padding: 2px .4em;
	border:solid 1px #ccc;
	text-decoration: none;
	font-size: smaller;
}

a.page-numbers:hover {
	color: white;
	background: #328ab2;
}

.tablenav .current {
	color: white;
	background: #328ab2;
	border-color: #328ab2;
	font-weight: bold;
}

.tablenav .next, .tablenav .prev {
	border: none;
	background: transparent;
	text-decoration: underline;
	font-size: smaller;
	font-weight: bold;
}


/*-----------------------------------------------------
   Article in News Category
 ------------------------------------------------------*/
.post-cat {
	.cat-block {
		margin-bottom: 48px;
		margin-bottom: 4.8rem;
	}
	.cat-title {
		font-size: 24px;
		font-size: 2.4rem;
		padding: 8px 24px;
		padding: 0.8rem 2.4rem;
		margin-bottom: 24px;
		margin-bottom: 2.4rem;
		//border-top: 2px solid #999;
		border-bottom: 2px solid #999;
		
		.to-list {
			display: block;
			float: right;
			font-size: 12px;
			font-size: 1.2rem;
			margin-top: 6px;
			margin-top: 0.6rem;
			//margin-bottom: 48px;
			//margin-bottom: 4.8rem;
			
			a {
				padding: 5px;
				padding: 0.5rem;
				background: #fefefe;
				border: 2px solid #336699;
				border-radius: 12px;
				
				&:hover {
					background: #CCCCFF;
					color: #fff;
				}
			}
		}
	}
	
	.news-block {
		background: rgba(255,255,255,.6);
		padding: 16px;
		padding: 1.6rem;
		margin-bottom: 24px;
		margin-bottom: 2.4rem;
		//border-bottom: 1px solid rgba(0,0,0,.13);
		//border-right: 1px solid rgba(0,0,0,.13);
		
		.entry-title {
			border-bottom: 2px solid #D1D0A5;
		}
		.entry-meta {
			font-weight: bold;
			margin-bottom: 10px !important;
			margin-bottom: 1.0rem !important;
			span {
				font-size: 12px;
				font-size: 1.2rem;
				color: #fff;
				padding: 5px;
				margin-left: 20px;
				margin-left: 2.0rem;
			}
			span.activity {
				background: #FF5EAF;
			}
			span.report {
				background: #624BFF;
			}
			span.sale {
				background: #458B3D;
			}
		}
		.entry-content .sharedaddy .sd-block {
			border-top: none !important;
			display: none !important;
			visibility: hidden !important;
		}
	}
}


/*-----------------------------------------------------
   Article in Portfolio Category
 ------------------------------------------------------*/
.portfolio-block {
	//width: 92%;
	height: auto !important;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	
	.entry-title {
		font-size: 18px;
		font-size: 1.8rem;
		margin-bottom: 12px;
		margin-bottom: 1.2rem;
	}
	.entry-content {
		tex-align: center;
		.thumb-wrap.aligncenter {
			//display: inline-block;
			margin-left: auto !important;
			margin-right: auto !important;
		}
	}
	.summary {
		margin-left: 0 !important;
		padding-left: 0 !important;
		
		p {
			text-align: left;
			line-height: 1.625;
			margin-bottom: 12px;
			margin-bottom: 1.2rem;
		}
	}
	.entry-meta {
		text-align: right;
		font-size: 12px;
		font-style: 1.2rem;
		font-style: italic;
		font-weight: bold;
		text-align: right;
		//margin: 12px 12px 24px 0;
		//margin: 1.2rem 1.2rem 2.4rem 0;
	}
}


/*-----------------------------------------------------
   Single Page (News & Portfolio Category)
 ------------------------------------------------------*/
.single {
	.entry-header .entry-title {
		padding: 10px;
		padding: 1.0rem;
		//padding-left: 16px;
		//padding-left: 1.6rem;
		border-bottom: 2px solid #D1D0A5;
		margin-bottom: 10px;
		margin-bottom: 1.0rem;
	}
	.activity .entry-title::before {
		content: '　';
		border-left: 12px solid #FF5EAF;
	}
	.report .entry-title::before {
		content: '　';
		border-left: 12px solid #624BFF;
	}
	.sale .entry-title::before {
		content: '　';
		border-left: 12px solid #458B3D;
	}
}


/*-----------------------------------------------------
   Diary setting
 ------------------------------------------------------*/
#diary .page-header {
	text-align: center;
	letter-spacing: 1px;
	padding: 24px 0;
	padding: 2.4rem 0;
	margin: 0 auto 48px;;
	max-width: 600px;
	background: url(../images/diary-L_flower_01.png) left bottom no-repeat,
				  url(../images/diary-R_boy_01.png) right bottom no-repeat;
	hgroup {
		max-width: 300px; 
		margin: 0 auto;
		padding: 14px 0;
		padding: 1.4rem 0;
		background: rgba(255,255,255,.5);
		border-radius: 10px;
	}
	h1 {
		font-family: 'Ranchers', cursive, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", Helvetica, Arial, sans-serif;
		font-size: 38px;
		font-size: 3.8rem;
		color: #db5605;
		text-shadow: 1px 1px 2px rgba(0,0,0,.4);
		margin: 0 0 10px;
		margin: 0 0 1.0rem;
	}
	h2 {
		font-size: 20px;
		font-size: 2.0rem;
		color: #215c41;
		text-shadow: 1px 1px 3px rgba(255,255,255,1);
		margin: 0;
		padding: 0;
	}
}

#diary .entry-header {
	
	h1 {
		position: relative;
		font-size: 22px;
		font-size: 2.2rem;
		padding: 0 20px 3px 25px;
		padding: 0 2.0rem 0.3rem 2.5rem;
		border-bottom: 2px solid #fff;
		&::before {
			content: '◆ ';
			color: #E68DC4;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	ul.entry-meta {
		padding-top: 5px;
		padding-top: 0.5rem;
		text-align: right;
		font-size: 14px;
		font-size: 1.4rem;
		font-style: italic;
		line-height: 1.857142857;
		li {
			display: inline;
			margin-right: 16px;
			margin-right: 1.6rem;
			span a {
				display: inline-block;
				font-style: normal;
				font-size: 11px;
				font-size: 1.1rem;
				font-weight: bold;
				color: #333;
				text-decoration: none;
				padding: 8px 10px;
				padding: 0.8px 1.0rem;
				background: #fefefe;
				border: 2px solid #336699;
				border-radius: 12px;
				&:hover {
					background: #CCCCFF;
					color: #fff;
				}
			}
		}
	}
}


/*-----------------------------------------------------
   Thumbnail IMG setting
 ------------------------------------------------------*/
.archive .posts,
.category .posts {
	hr {
		margin: 0 24px 48px;
		margin: 0 2.4rem 4.8rem;
		height: 2px;
	}
	
	.sharedaddy {
		display: none !important;
		visibility: hidden !important;
	}
	
	.thumb-wrap {
		margin-right: 16px;
		margin-right: 1.6rem;
		
		a {
			width: 130px !important;
			//height: auto;
			border: none;
			border-radius: none !important;
			box-shadow: none !important;
			
			img {
				background: #fff;
				padding: 10px;
				max-width: 100%;
				
				&:hover {
					background: #ddf3fe;
				}
			}
		}
	}
}




/*-----------------------------------------------------
   Comments Area setting
 ------------------------------------------------------*/
.comments-area {
	position: relative;
	//margin-top: -24px;
	//margin-top: -2.4rem;
	
	.cmnt-ttl-wrap {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		text-align: center;
		margin-top: -28pz !important;
		margin-top: -2.8rem !important;
		
		.comments-title {
			display: inline-block;
			line-height: 1;
			padding: 0px;
			padding: 2.0rem 2.0rem;
			margin: 0 auto !important;
			margin: 0 auto !important;
			background: #fff;
			// border-radius: 80px / 35px;
			border: 4px solid #6699CC;
			
			span {
				font-size: 20px;
				font-size: 2.0rem;
				font-weitgh: bold;
				color: red;
				line-height: 1;
			}
		}
	}
	
	.commentlist {
		text-align: left;
		background: #dedede;
		background: rgba(222,222,222,.8);
		padding: 24px 3.3333333333333%;
		padding: 2.4rem 3.3333333333333%;
		padding-top: 48px;
		padding-top: 4.8rem;
		border-radius: 16px 16px 0 0;
		
		.comment-body {
			padding: 24px 3.3333333333333%;
			padding: 2.4rem 3.3333333333333%;
		}
		
		> .comment {
			background: #f5f5f3;
			background: rgba(255,255,255,.9);
			padding: 0;
			margin: 24px 0;
			margin: 2.4rem 0;
			border: 1px solid #999;
			
			.comment-body {
				margin: 0;
				margin: 0;
			}
		}
		
		.children {
			margin: 0 !important;
			padding: 0 0 0 24px !important;
			padding: 0 0 0 2.4rem !important;
			
			.comment-body {
				margin: 24px 0;
				margin: 2.4rem 0;
				margin-right: 3.3333333333333%;
				border: 1px solid #999;
				background: #e3e3e2;
				background: rgba(200,200,200,.3);
			}
		}
	}
}

.comment-author {
	display: block;
	margin-bottom: 24px;
	margin-bottom: 2.4rem;
	
	.avatar {
		float: left;
		margin-right: 3.3333333333333%;
	}
	
	.fn {
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 1.625;
		font-weight: bold;
		font-style: normal;
		float: left;
		&::before {
			content: 'from ';
			font-size: 12px;
			font-size: 1.2rem;
			font-weight: normal;
			font-style: italic;
		}
	}
	
	.says {
		display: none;
	}
	
	.comment-meta {
		float: right !important;
		clear: right;
		
		a {
			font-size: 12px !important;
			font-size: 1.2rem !important;
			font-style: italic !important;
			margin-bottom: 24px !important;
			margin-bottom: 2.4rem !important;
		}
	}
}

.comment-body p {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.625;
	margin: 24px 0;
	margin: 2.4rem 0;
}

p.form-allowed-tags {
	color: #5E5E5E;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.625;
	margin: 0;
}



/*-----------------------------------------------------
   Gallery setting
 ------------------------------------------------------*/
#gallery {
	display: block;
	padding: 24px 0 24px;
	padding: 2.4rem 0 2.4rem;
	//background: rgba(255,255,255,.4);
	>h1 {
		font-size: 28px;
		font-size: 2.8rem;
		text-align: center;
		padding: 24px 24px;
		padding: 2.4rem 2.4rem;
	}
}

.gallery_box {
	display: inline-block;
	text-align: center;
	float: left;
	width: 96.666666666667%;
	//margin-top: 24px;
	//margin-top: 2.4rem;
	margin-bottom: 24px;
	margin-bottom: 2.4rem; 
	margin-left: 1.6666666666667%;
	margin-right: 1.6666666666667%;
	//background: #CCCCCC;
	
	.entry-header {
		margin: 16px 0 8px;
		margin: 1.6rem 0 0.8rem;
		
		h1.entry-title {
			font-family: 'Expletus Sans', cursive, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", Helvetica, Arial, sans-serif;
			font-weight: 700;
			font-size: 20px;
			font-size: 2.0rem;
			line-height: 1.6;
			margin: 0;
			margin: 0;
		}
		h2 {
			font-family: 'Expletus Sans', cursive, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", Helvetica, Arial, sans-serif;
			font-weight: 500;
			font-size: 16px;
			font-size: 1.6rem;
			line-height: 1.2;
			margin: 0;
		}
	}
	
	.thumb-wrap {
		float: none;
		clear: both;
		margin: 0 0 8px;
		margin: 0 0 0.8rem;
		padding: 10px !important;
		padding: 1.0rem !important;
		background: #fff;
		
		img {
			max-width: 100%;
			margin: 0 auto !important;
		}
	}
	
	.entry-footer {
		margin: 8px 0 24px;
		margin: 0.8rem 0 2.4rem;
		p {
			margin: 0 !important;
			text-align: left;
			font-size: 14px;
			font-size: 1.4rem;
			line-height: 1.857142857;
		}
		.comment_link {
			float: left;
			font-size: 12px;
			font-size: 1.2rem;
			font-weight: bold;
			
			a {
				padding:3px;
				background: #ededed;
				border: 2px solid #98ceba;
				&:hover {
					background: #e9ffcd;
				}
			}
		}
				
		.create_date {
			float: right;
			font-weight: bold;
			font-style: italic;
		}
	}
}

#gallery .cat-sec {
	margin-bottom: 0;
	margin-bottom: 0;
	.cat-title {
		font-size: 20px;
		font-size: 2.0rem;
		line-height: 1.3;
		color: #fff;
		padding: 8px;
		background: rgba(0,0,0,.2);
		margin-bottom: 48px;
		margin-bottom: 4.8px;
	}
}
#gallery p.toAll {
	clear: both;
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: right;
	margin-bottom: 48px;
	margin-bottom: 4.8rem;
	a {
		padding: 5px;
		padding: 0.5rem;
		background: #ffe5f8;
		border: 2px solid #336699;
		border-radius: 12px;
		
		&:hover {
			background: #CCCCFF;
			color: #fff;
		}
	}
}


/*------------------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------
   Subnavi Widget
 ------------------------------------------------------*/
.sub_navi-widget {
	text-align: center;
	
	h1 {
		font-size: 20px;
		font-size: 2.0rem;
		color: #fff;
		letter-spacing: 3px;
		margin: 0;
		padding: 10px;
		padding: 1.0rem;
		width: 90%;
		background: #487e7d;
		background: rgba(72,126,125,.8);
		border: 3px solid #eee;
	}
	li.page_item {
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 1.625;
		margin: 10px 0;
		margin: 1.0rem 0;
		margin-left: 0 !important;
		padding: 0;
		text-indent: 0;
		list-style: none;
		position: static;
		&::before {
			content: '';
			position: static;
		}
		a {
			display: block;
			padding: 10px;
			padding: 1.0rem;
			margin: 0 auto;
			width: 80%;
			background: #d3d2b1;
			background: rgba(211,210,177,.7);
		
			&:hover {
				background: #e4e3b8;
			}
		}
	}
}


/*-----------------------------------------------------
   Contact Form
 ------------------------------------------------------*/
.form-area {
	padding: 10px;
	padding: 1.0rem;
	border: 2px dashed #666;
	
	h2 {
		text-align: center;
		font-size: 19px;
		font-size: 1.9rem;
		color: #fff;
		margin-top: 0;
		padding: 6px;
		padding: 0.6rem;
		background: #9d7cc0;
	}
}

.contact-form {
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
	
	input {
		width: 95% !important;
	}
	textarea {
		width: 100% !important;
	}
	.contact-submit {
		text-align: center;
		margin-top: 24px;
		margin-top: 2.4rem;
		
		.pushbutton-wide {
			width: 30% !important;
			margin-left: auto !important;;
			margin-right: auto !important;;
		}
	}
}




@media only screen and (min-width: 481px) {

	#front-topics .frnt-btn {
		width: 46.666666666667%;
	}


	.archive .entry-content,
	.category .entry-content {
		
		img {
			margin-top: -10px;
			margin-top: -1.0rem;
			border-radius: none !important;
			box-shadow: none !important;
		}
		.summary {
			padding-left: 174px;
			padding-left: 17.4rem;
		}
	}
	
	#gallery {
		.gallery_box {
			width: 46.666666666667%;
		}
		.entry-content {
			img {
				margin: 0 auto !important;
			}
		}
	}
}

@media only screen and (min-width: 600px) {
	#gallery .gallery_box {
		width: 30%;
	}

	.portfolio-block {
		width: 46.666666666667%;
		margin-left: 1.6666666666667%;
		margin-right: 1.6666666666667%;
		margin-bottom: 48px !important;
		margin-bottom: 4.8rem !important;
		float: left;
		display: block;
		
	}

	/*   Contact Form
	----------------------------------------*/
	.contact-form {
		div {
			clear: both !important;
			
			label {
				display: block;
				float: left !important;
				clear: left !important;
				width: 28% !important;
				color: #fff !important;
				text-align: right !important;
				padding: 6px 1% !important;
				padding: 0.6rem 1% !important;
				margin-bottom: 20px !important;
				margin-bottom: 2.0rem !important;
				background: #b6b68b !important;
				
				span {
					color: #333 !important;
				}
			}
			input {
				font-size: 16px !important;
				font-size: 1.6rem !important;
				width: 65% !important;
				padding: 5px !important;
				padding: 0.5rem !important;
				margin-left: 2%;
				float: left !important;
				clear: right !important;
			}
			
			label.textarea {
				width: 100% !important;
				text-align: left !important;
				margin-bottom: 6px !important;
				margin-bottom: 0.6rem !important;
			}
		}
	}

}
@media only screen and (min-width: 920px) {
	
	#front-topics .frnt-btn {
		width: 21.666666666667%;
	}
	
	#gallery .gallery_box {
		width: 21.666666666667%;
	}
}