/* CSS Document */

/* resetCSS
---------------------------------------------------------------------------------------------- */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
h1,h2,h3,h4,h5,h6{font-weight:400;}
*{margin:0;padding:0;list-style:none;}

/* global
---------------------------------------------------------------------------------------------- */
@color_acc		:#e75723;
@color_link		:#604df7;
@color_link_h	:#a08dff;
@color_link_d	:#501dd7;
@color_text		:#555555;
@color_strong	:#000000;
@color_white	:#ffffff;

@color_dgr		:#222;
@color_gr		:#444;
@color_lgr		:#666;

@mediaWidth		:560px;		// モバイル切り替え幅
@mediaWXGA		:1366px;
@imgWidth		:520px; 	// 画像の最大サイズ
@baseColor		:#fff; 		// ベースカラー
@baseColorEven	:#f5f5f5; 	// 偶数カラー

.grad(@start,@end){
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.37, @end), color-stop(0.00, @start));
	background: -webkit-linear-gradient(top, @end 0%, @start 37%);
	background: -moz-linear-gradient(top, @end 0%, @start 37%);
	background: -o-linear-gradient(top, @end 0%, @start 37%);
	background: -ms-linear-gradient(top, @end 0%, @start 37%);
	background: linear-gradient(top, @end 0%, @start 37%);
}

.grad2{
		background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ebebeb), color-stop(0.86, #f5f5f5));
		background: -webkit-linear-gradient(top, #f5f5f5 86%, #ebebeb 100%);
		background: -moz-linear-gradient(top, #f5f5f5 86%, #ebebeb 100%);
		background: -o-linear-gradient(top, #f5f5f5 86%, #ebebeb 100%);
		background: -ms-linear-gradient(top, #f5f5f5 86%, #ebebeb 100%);
		background: linear-gradient(top, #f5f5f5 86%, #ebebeb 100%);
}

.transition{
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
}		

.ex{
	border:1px solid red;
}

*{
	font-family: "メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-decoration:none;
	text-shadow:0 0px 2px rgba(100,100,100,0.4);
}

*:hover	{
	.transition;
}
		
a{	
	color:@color_link;
}

a:hover	{
	color:@color_link_h;
}

p{
	margin-bottom:0%;	
	color:@color_dgr;			
}

h1{
	font-size:28px;
	line-height:28px;
	margin-bottom:20px;
}

h3{
	font-size:15px;
	line-height:15px;
	color:@color_lgr;
	margin-bottom:1%;			
}

.em{
	color:red;
}

html,body{
	background:#f0f0f0;
	font-size:14px;
	line-height:140%;
	-webkit-text-size-adjust: 100%;
		
	@media screen and (min-width:560px){
		min-width:1200px;
	}
}
#wrapper{
	position:relative;
}

/* CommonParts
------------------------------------------------------------------------------------ */

// 汎用詳細ボタン
.button_detail{
	background:url(../img/button_detail_white.png) left top no-repeat;
	height:23px;
	width:114px;
	line-height:23px;
	font-size:11px;
	display:block;
	text-indent:20px;
	color:black;
	.transition;
	float:left;
	margin-right:20px;
}

.button_detail:hover{
	color:#501dd7;				
	opacity:0.5;
}

// windowsStoreボタン
.button_detail_ws{
	height:23px;
	width:114px;
	line-height:23px;
	display:block;
	color:black;
	.transition;
	float:left;
	margin-right:20px;
	background:url(../img/button_detail_white2.png) left top no-repeat;
	font-size:10px;
	text-indent:10px;	
}

.button_detail_ws:hover{
	color:#501dd7;				
	opacity:0.5;
}

#btn_pagetop{
			position:fixed;
			width:200px;
			bottom:-40px;
			opacity:0;
			line-height:20px;
			text-align:center;
			padding:10px 0;
			background:url(../img/common_bg_black_70.png);
			color:white;
			font-size:12px;
			text-shadow:none;
			height:20px;
			z-index:120;
			right:4%;
			border-radius:4px;
	}

table {
	border:1px solid #ddd;
	border-bottom:1px solid #aaa;
	margin-bottom:2%;
	width:100%;

	tr{
		width: auto;
		border-spacing: 0;
		font-size:14px;
		background: #fff;
		
		> *{vertical-align:middle;}
		
		th{
			color: #000;
			padding: 10px 15px;
			background: #eee;			
			background:-moz-linear-gradient(#eee, #ddd 50%);
			background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(#eee), to(#ddd));
			line-height: 120%;
			text-align: left;
			text-shadow:0 -1px 0 rgba(255,255,255,0.9);
			box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;	
			font-weight:400;
			font-size:11px;
			width:200px;
			
			@media screen and (max-width:@mediaWidth){
				width:30%;
				padding:5px 3px;
			}
			
			&:first-child{
				border-radius: 5px 0 0 0;		
			}
			&:last-child{
				border-radius:0 5px 0 0;
				box-shadow: 2px 2px 1px rgba(0,0,0,0.1);		
			}
		}
		
		td{
			padding: 8px 15px;			
			text-align: left;
				
			&:first-child{	
			}
			&:last-child{
				box-shadow: 2px 2px 1px rgba(0,0,0,0.1);	
				border-left:1px solid #ddd;
			}			
		}
		
		&:nth-child(2n+1) {
			background: #f5f5f5;
		}
		&:last-child td {
			box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
			
			&:first-child {
				border-radius: 0 0 0 5px;
			}
			&:last-child {
				border-radius: 0 0 5px 0;
				
			}

		}	
	}
}

/* header
------------------------------------------------------------------------------------ */
.PageTitle{
			height:100px;
			background:white url(../img/news_bg.jpg) center center no-repeat;
			background-size:cover;
			
			h1{
				text-indent:-1000px;
				overflow:hidden;
			}
		}

#logo	{
			position:absolute;
			left:3%;
			top:28px;
			z-index:10;
		}
		
/* globalNavi
------------------------------------------------------------------------------------ */

nav.global	{
			background:url(../img/nav_bg.png);			
			border-bottom:1px solid #cbcbcb;
			

			ul{
				overflow:hidden;
				padding-left:4%;
				
				
				li{
					float:left;					
					height:42px;
					min-width:120px;
					background:url(../img/nav_button_line.png) right top no-repeat;

					a{
						display:block;
						padding-right:50px;
						line-height:43px;
						text-indent:25px;
						font-size:11px;
						background:url(../img/arrow_right_gray.png) 10px center no-repeat;
						color:@color_dgr;
					}
				}
				
				li:hover{
						background:#333 url(../img/nav_button_line.png) right top no-repeat;

						a{
							color:white;
						}				
				}
			}
}

/* mobile */

@media screen and (max-width:@mediaWidth){

		nav.global	{
				border:none;

				ul{
					padding-left:0;
					
					li{
						background:url(../img/nav_bg.png) left bottom;
						border-bottom:1px solid #ddd;
						width:33.333%;
						min-width:0;
						height:30px;
						overflow:hidden;

	
						a{
							background:none;
							padding-right:0;
							font-size:9px;
							line-height:30px;
							text-indent:5px;
						}
					}
					
					li:hover{
						background:#333;
					}
				}
		}
}

/* footer
---------------------------------------------------------------------------------------------- */
footer {
		.inner{
			padding:60px 3%;
			font-size:12px;
			
			.leftBox{
				width:50%;
				min-width:760px;
				overflow:hidden;
				float:left;
				margin-bottom:30px;
				
				@media screen and (max-width:@mediaWidth){
					width:100%;
					min-width:0;										
				}
								
				div{
					float:left;
				}
				
				div.icon{
					width:320px;
					padding-top:20px;
					text-align:center;
					margin-right:30px;					
					
					img{
						margin-right:15px;
			
					}
				}
				
				div.address{
					@color_gr;									
					
					strong{
						font-size:15px;
						font-weight:800;
						display:block;
						}		
					
					.mail,.tel {
						padding:6px 0;
						font-style:normal;
						font-size:17px;
						font-family:Arial, Helvetica, sans-serif;
						width:198px;
						float:left;
						}
			
					span{
						font-size:12px;
						display:block;
						}
			
					.address,.open{
						font-size:11px;
						font-weight:400;
						display:block;
						}
				}				
			}
			
			.footer_navi{
				flort:right;
				overflow:hidden;
				margin-bottom:30px;



					
				ul{	

					float:left;
					list-style:none;
					min-height:160px;
					width:24%;
					
					
					li{
						font-weight:400;
						padding-left:8px;
						font-size:11px;
						line-height:23px;
						
						a{
							text-decoration:none;
							color:#666;					
							}	
							
						a:hover{
							text-decoration:underline;
							color:#666;	
							}
												
						}
						
					li.head{
						color:@color_link_d;
						font-weight:800;
						background:none;
						}					
						
						
					}	

					@media screen and (max-width:@mediaWidth){
						float:left;
						
						ul{
							width:50%;
							padding-bottom:0;

							li a{
								font-size:9px;
								}
						}
					}											
					
				}		
				
				.credit{
					background:url(../img/common_line_x.png) left top repeat-x;    
					font-size:10px;
					color:#666;
					clear:both;
					text-align:center;
					padding-bottom:30px;
					padding-top:30px;    
					margin:0px auto; 
					line-height:30px;   
				}				
			}
}
		
/* pankuzu
---------------------------------------------------------------------------------------------- */
.pankuzu	{
	color:@color_gr;
	background:@baseColorEven;
	padding:3% 4% 1% 4%;
	font-size:11px;	
	.grad(#f5f5f5,#eaeaea);	
}


/* ContentsSection
---------------------------------------------------------------------------------------------- */
@sBox	:38.2% - 1; // ペア短
@lBox	:61.8%;		// ペア長
@cBox	:32%;		// トリオ
//box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1); 

// サブメニュー
article.contents nav.subMenu{
	position:absolute;
	bottom:0;
	left:0;
	width:92%;
	padding-left:4%;
	
	ul{
		overflow:hidden;
		
		li{
			padding:8px 0px;
			width:20%;
			max-width:130px;		
			min-width:90px;
			text-align:center;
			font-size:12px;
			background:#e0e0e0;
			float:left;
			color:@color_link;
			
			&:hover{
				background:#f0f0f0;
				color:@color_link_h;		
			}
			
			&.active{
				background:white;
				color:black;
			}
		}		
	}
}

// コンテンツ
article.contents{

	section{		
		overflow:hidden;
		padding:30px 4%;
		background:@baseColor;
		position:relative;
		
		&.solo{
			background:white;
			
			&:nth-child(even){
				background:@baseColorEven;
			}			
		}		

		&.pair{
			> div{
				img {
					width:100%;
					max-width:@imgWidth;
					margin:0 auto;
					display:block;
				}
				
				&:nth-of-type(1){
					float:left;
					width:@sBox;					
				}
				
				&:nth-of-type(2){
					float:right;	
					width:@lBox;
				}

			}
					
			&:nth-child(even){
				background:@baseColorEven;		
			
				> div{
					&:nth-of-type(1){
						float:right;
					}
		
					&:nth-of-type(2){
						text-align:right;
						float:left;
					}
				}
			}

			@media screen and (max-width:@mediaWidth){
				> div{
					width:100%!important;
					text-align:left!important;
					margin-bottom:10px;

					> h1{
						font-size:16px;
						margin-bottom:5px;
						font-weight:800;
					}
				}
			}			
		}
		
		&.even{
			> div{
				img {
					width:100%;
					max-width:@imgWidth;
					margin:0 auto;
					display:block;
				}
				
				&:nth-of-type(1){
					float:left;
					width:49%;
				}
				
				&:nth-of-type(2){
					float:right;	
					width:49%;
				}


			}
					
			&:nth-child(even){
				background:@baseColorEven;
			}

			@media screen and (max-width:@mediaWidth){
				> div{
					width:100%!important;
					text-align:left!important;
					margin-bottom:10px;
					
					> h1{
						font-size:16px;
						margin-bottom:5px;
						font-weight:800;
					}
				}
			}			
		}

		&.trio{
			> h1{
				margin-bottom:40px;
			}
			
			> div{
				overflow:hidden;
				width:@cBox;
				float:left;
				
				&:nth-of-type(1){
				
				}
				
				&:nth-of-type(2){
					margin:0 2%;				
				}
				
				&:nth-of-type(3){		
				
				}
				@media screen and (max-width:@mediaWidth){
					width:100%;
					float:none;		
					margin:0 0 40px 0!important;
				}					
			}			
		}
		
	}


}

/* Import
--------------------------------------------------------------------------- */
html body{
	@import "subpage.less";
}

.sp_contact{
	label{
		display:block;
		margin-bottom:10px;
	}
	input{
		margin-bottom:20px;
	}
	button{
		margin:20px 0;
	}
	.contact_default{
		
	}
	.contact_success{
		padding:40px 0;
		color:#1dc761;
		font-size:120%;
		p{
			font-size:80%;
			margin-top:10px;
		}
		display:none;
	}
	.contact_faild{
		padding:40px 0;
		color:red;
		font-size:120%;
		p{
			font-size:80%;
			margin-top:10px;
		}
		display:none;
	}
}