// BASE COLOR
@white:#fff;
@black:#000;
@grayD:#444;
@gray:#ccc;
@grayL:#f5f5f5;
@red:#d60029;
@blue:#008ca8;
@blueL:#00c5ec;
@blueD:#005364;
@ivory:#e3dfde;

// KEY COLOR
@purple:#8b008b;
@purpleL:#e000e0;
@purpleD:#470047;
@pink:#f39;
@pinkL:#fde;

// LESS
@ncc:no-repeat center center;

// MIXIN
.trans{-webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s; transition:0.4s;}
.fb{font-weight:bold;}
.tac{text-align:center;}
.tdn{text-decoration:none;}
.tdu{text-decoration:underline;}
.bgsc{background-size:cover;}
.inline{display:-moz-inline-box; display:inline-block;}

/*BASE*/
html{height:100%;}
body{margin:0; width:100%; height:100%; line-height:1; color:@black; -webkit-text-size-adjust:100%; background:@white;
font-family:"Libre Baskerville","Georgia","Helvetica Neue","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","Hiragino Sans","ヒラギノ角ゴシック","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Roboto,"Droid Sans",Arial,"游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;}
img{max-width:100%; height:auto; vertical-align:middle;}
/*CF*/
.cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;}
/*LINK*/
a:link{color:@blue; .tdu; .trans}
a:visited{color:@blue; .tdu;}
a:hover{color:@grayD; .tdu;}
a:active{color:@blue; .tdn;}
a img{border:none; .tdn;}
a img:hover{border:none; opacity:0.5; .tdn;}
/*LETTER*/
.wf{font-family:Balthazar;}
strong{.fb;}
em{background:linear-gradient(transparent 60%, @blue 60%);}
.attention{color:@red;}
.small{font-size:85%;}
::selection{background:@blue; color:@white;}
::-moz-selection{background:@blue; color:@white;}

/*SP NAV*/
button#menubtn{position:absolute; right:10px; top:10px; line-height:42px; height:42px; width:42px; z-index:100;}
button.btn{background-color:@blue; color:@white; border:none;}
button.btn:after{content: '\f0c9'; font-family:'fontello'; vertical-align:top; font-size:154%;}
button.active{background-color:@white; color:@black;}
button.active:after{content: '\e800'; font-family:'fontello'; line-height:42px; height:42px; width:42px; font-size:154%;}
button#menubtn.active{position:fixed;}
div#spnav{display:none; position:fixed; top:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:99;
	a:link{color:@white; .tdn;}
	a:visited{color:@white; .tdn;}
	a:hover{color:@grayD; .tdn;}
	a:active{color:@white; .tdn;}
	nav{padding:90px 0 0;
		ul{.fb; .tac;
			li{width:50%; height:60px; float:left; padding:0 0 20px;
				a{display:block;
					i{font-size:181%;}
				}
			}
		}
	}
}

/*LOADING*/
div#loadingWrap{position:fixed; top:0; left:0; width:100%; height:100%; background:@white; z-index:98;
	img{position:absolute; top:50%; left:50%; max-width:69px; margin:-34.5px 0 0 -34.5px; width:auto;}
}

/*LAYER*/
div.layer{position:relative; z-index:97;}

/*LOGOBOX*/
div#logobox{position:relative; width:100%; max-width:100%; margin:0 auto;}

div#topnews{margin:100% 0 0; width:100%; max-width:100%; background:rgba(0,0,0,0.4); padding:10px; color:@white; word-wrap:break-word;
	a{color:@white;}
	h2{.fb; font-size:116%; line-height:1.4;}
	p{font-size:85%; line-height:1.6;}
}

div.topocr{position:absolute; width:80px; right:4%; top:70%;}

div#topvideo{width:100%; max-width:100%; margin:2% 0;}

/*HEADER*/
header{padding:23px 15px;
	h1{width:50px;}
}

/*FOOTER*/
footer{
	small{font-size:77%; display:block; margin:0 auto;}
	a:link{color:@white; .tdu;}
	a:visited{color:@white; .tdu;}
	a:hover{color:@gray; .tdn;}
	a:active{color:@white; .tdn;}
	div.footbg{.tac; color:@white; background:rgba(0,140,168,0.7); width:100%; padding:20px 0; }
}

/*MAIN*/
main{background:rgba(255,255,255,0.9); margin:0 0 4%;}

/*TITLE*/
section.pagetitle{margin:40px 0; .tac;
	h2{font-size:197%; color:@white; text-shadow:1px 1px 5px rgba(0, 0, 0, 0.7); background:linear-gradient(transparent 60%, @blue 60%); .inline; padding-left:5px; letter-spacing:5px;}
}

/*PAGES*/
div.pagebody{padding:15px 10px 15px;
	article{margin-bottom:4%;
		span.postdate{font-size:93%;}
		h3{font-size:124%; padding:10px 0 10px 30px; margin-bottom:15px; line-height:1.5; border-top:1px solid @blue; border-bottom:1px solid @blue; .fb;
			background:url("../img/bg/tsuru.png") no-repeat left center; background-size:20px 17.3px;
			i{color:@blue; padding-right:5px; font-size:108%; display:none;}
		}
		div.postbody{line-height:1.7; word-wrap:break-word;
			section{margin-bottom:15px;}
			section:last-child{margin-bottom:0;}
			p{margin-bottom:15px;}
			p:last-child{margin-bottom:0;}
			h4{font-size:116%; padding:0 0 10px; margin-bottom:10px; border-bottom:1px solid @grayD; .fb;}
		}
	}
	article:last-child{margin-bottom:0;}
}

div.buybtn{.tac; .fb; letter-spacing:1px; width:80%; margin:0 auto;
	a{display:block; background:@blue; padding:10px; border-radius:8px;}
	a:link{color:@white; .tdn;}
	a:visited{color:@white; .tdn;}
	a:hover{color:@white; .tdn; background:@blueD;}
	a:active{color:@white; .tdn;}
}

/*GALLERY*/
ul.gallerylist{
	li{float:left; width:33%;
		img{min-width:100%;}
	}
}

/*PAGENATION*/
div.pagenation{font-size:77%;
	a div{background:@blue; color:@white; display:block; border-radius:6px; padding:15px; .fb; .tdn; .trans;}
	a div:hover{background:@grayD;}
	div.next{float:right;}
	div.prev{float:left;}
	div.back{.tac;}
}

/*PAGE TABLE*/
table{width:100%; margin-bottom:10px; 
	tr{width:100%; border-top:1px solid @gray; border-bottom:1px solid @gray;
		th{padding:10px; width:100%; display:block; text-align:left;}
		td{padding:10px; width:100%; display:block;}
	}
}

/*CONTACT*/
span.required{background:@blue; color:@white; font-size:85%; padding:5px 10px; border-radius:5px; .fb;}
table.mailform textarea{width:100%; padding:10px; resize:vertical; background:@white; border:1px solid #ddd;}
input.wpcf7-text{width:100%; padding:10px;}
input[type="submit"],button{-webkit-appearance:button; cursor:pointer; outline:none;}
input.soushin{width:100%; height:60px; line-height:60px; position:relative; .inline; .fb; font-size:124%; .tac; .tdn; border:none; color:@white; margin:0 0 20px;
border-radius:10px; background-color:@blue; box-shadow:0 4px 0 @blueD; -webkit-transition:none; transition:none; cursor:pointer;}
input.soushin:hover{background-color:@blueL; box-shadow:0 4px 0 @blue;}
input.soushin:active{top:4px; box-shadow:none;}
img.ajax-loader{float:left; width:auto!important;}

/****************************************************/
/************************ PC ************************/
/****************************************************/
@media(min-width:769px){

nav#spmenu{display:none;}
.sp{display:none;}
.leftbox{padding-right:20px;}

/*LOGOBOX*/
div#topnews{position:absolute; width:auto; left:20px; bottom:106px; padding:20px; border-radius:10px;
	h2{font-size:139%; line-height:1.5;}
	p{font-size:100%; line-height:1.8;}
}

div.topocr{width:120px; right:4%; top:auto; bottom:12%;}

div#topvideo{position:absolute; width:320px; right:20px; bottom:106px; margin:0;}

/*HEADER*/
header{padding:20px 20px;
	h1{width:80px; float:left; padding:20px 0 0;}
	div.headnav{float:right;
		nav.mainnav{font-size:108%; text-shadow:1px 1px 1px @white;
			ul{.tac;
				li{.inline;
					a{display:block; padding:10px 12px;}
					a:link{color:@black; .tdn;}
					a:visited{color:@black; .tdn;}
					a:hover{color:@black; .tdn;}
					a:active{color:@black; .tdn;}
				}
			}
		}
		nav.snsnav{margin:0 0 18px;
			ul{text-align:right;
				li{.inline;
					a{padding:0 7px;
						i{font-size:182%; vertical-align:middle;}
					}
					a:link{color:@black; .tdn;}
					a:visited{color:@black; .tdn;}
					a:hover{color:@black; .tdn;}
					a:active{color:@black; .tdn;}
					a.am:hover{color:#3c0;}
					a.tw:hover{color:#4099FF;}
					a.fb:hover{color:#44609D;}
					a.yt:hover{color:#E52D27;}
					a.in:hover{color:#dd2879;}
				}
			}
		}
	}
}

/*FOOTER*/
footer{
	small{font-size:85%;}
	div.footbg{padding:25px 0;}
}

/*MAIN*/
main{margin:0 0 120px;}

/*TITLE*/
section.pagetitle{margin:60px 0;
	h2{font-size:300%; padding-left:10px; letter-spacing:10px;}
}

/*PAGES*/
div.pagebody{padding:60px;
	article{margin-bottom:60px;
		span.postdate{}
		h3{font-size:154%; padding:25px 0 25px 50px; margin-bottom:30px; background-size:40px 34.6px;
			i{padding-right:10px;}
		}
		div.postbody{
			section{margin-bottom:30px;}
			p{margin-bottom:20px;}
			h4{padding:0 0 15px; margin-bottom:15px;}
			.size-thumbnail{width:320px; height:auto;}
			.size-medium{width:320px; height:auto;}
			.size-large{width:640px; height:auto;}
			.aligncenter{clear:both; display:block; overflow:hidden; margin: 0 auto 20px;}
			.alignleft{float:left; margin:0 20px 20px 0; .inline;}
			.alignright{float:right; margin:0 0 20px 20px; .inline;}
			img.alignleft + br{display:none;}
			img.alignright + br{display:none;}
		}
	}
}

div.buybtn{letter-spacing:2px; width:50%; margin:0;
	a{padding:15px; border-radius:8px;}
}

/*GALLERY*/
ul.gallerylist{
	li{float:left; width:20%;}
}

/*PAGENATION*/
div.pagenation{font-size:100%;}

/*PAGE TABLE*/
table{margin-bottom:20px; border-bottom:1px solid @gray;
	tr{border-top:1px solid @gray; border-bottom:none;
		th{vertical-align:middle; padding:20px; width:auto; display:table-cell; background:none; white-space:nowrap;}
		td{vertical-align:middle; padding:20px; width:auto; display:table-cell;}
	}
}

div.formbox{
	margin:0 80px 0; padding:60px 60px 0px; background:@white; border:1px solid @gray;
}

}
/************************ SP ************************/
@media (max-width:768px)
{
	.pc{display:none;}
	.spmb{margin-bottom:4%;}

}
/************************ NAV ************************/
.topBotomBordersOut a{position:relative; z-index:0;}
.topBotomBordersOut a:before, .topBotomBordersOut a:after{position:absolute; left:0px; width:100%; height:1px; background:@black; content:""; opacity:0; transition:all 0.3s;}
.topBotomBordersOut a:before{top:0px; transform:translateY(5px);}
.topBotomBordersOut a:after{bottom:0px; transform:translateY(-5px);}
.topBotomBordersOut a:hover:before, .topBotomBordersOut a:hover:after{opacity:1; transform:translateY(0px);}
/************************ FUWA ************************/
.fuwafuwa{
-webkit-animation-name:fuwafuwa;
-webkit-animation-duration:2.5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease;
-moz-animation-name:fuwafuwa;
-moz-animation-duration:2.5s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:ease;
}
@-webkit-keyframes fuwafuwa{
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa{
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}
/************************ VIDEO ************************/
div.video_box{position:relative; overflow:hidden; padding-bottom:56.25%; padding-top:30px; height:0;}
div.video_box iframe,div.video_box object,div.video_box embed{position:absolute; top:0; left:0; width:100%; height:100%}
/*-----------------------------------------------------
10px = 77%     11px = 85%     12px = 93%     13px = 100%
14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
22px = 167%    23px = 174%    24px = 182%    25px = 189%
26px = 197%
------------------------------------------------------*/