@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

@font-face {
	font-family: "xanomin";
	src: url("../../common/fonts/xanomin.woff2") format('woff2'),
			 url("../../common/fonts/xanomin.woff")  format('woff'),
			 url("../../common/fonts/xanomin.ttf")   format('truetype');
}




/* --------------------------------------------
									全ページ共通
---------------------------------------------- */ 
html,
body { height:100%; }

html{ overflow-x:hidden; }
body { height:auto; background:#fff;}

body *{ /*border:1px solid #000000; background:rgba(000,000,000,0.1)*/}



/* --------------------------------------------
								共通フォント指定
---------------------------------------------- */ 
body,input,select,textarea {
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000; font-size:14px; line-height:1.8; letter-spacing:0.05em;}

	
a {color:#000;}
p {text-align:justify; text-justify:inter-ideograph;}


@media (max-width:960px) {
body,input,select,textarea { font-size:11px;}

}



/* --------------------------------------------
									websフォント
---------------------------------------------- */ 
/* Noto Sans */
a.btn,
#index article .about p,
#index article .service dl dt,
h3.def,
h3.opt,
footer
{ font-family: 'Noto Sans JP', sans-serif; font-weight:400;}

/* HG明朝B */
#index article h2,
article div.plan p.price strong,
.contents h1,
#price article>p,
#company section.service ul li h3
{ font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝B", serif; font-weight: normal;}

/* HG明朝E */
#about section h2
{ font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif; font-weight: normal;}

/* XANO明朝 */
nav,
#index article .service ul li h3,
#contact h2,
#request h2,
#company h2
{ font-family: "xanomin", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝B", serif; letter-spacing:-0.05em; font-weight: normal;}




/* --------------------------------------------
										header
---------------------------------------------- */ 
header { width:94%; margin:0 auto ; padding:3em 3% 2em 3%; background:#fff;}
header h1,
header h1 *,
header p,
header p *{ display:block; width:290px; height:116px; overflow:hidden;}
header h1,
header p { position:relative; margin:0;}
header h1 *,
header p *{ position:absolute; top:0; left:0;}
header h1 span,
header p span { background: url(../img/share/rogo.png) no-repeat;}

header div { padding-top:1em; margin-top:-116px; float: right;}
header div img { vertical-align:middle; padding:0 2em ; }

@media (max-width:1172px) {
header div { margin-top:-90px; /* padding-top:2.8em;*/}

}

@media (max-width:960px) {
header div img { display:block; padding:0 0 1em; }

}

@media (max-width:640px) {
header { padding:1em 3% 1em 3%;}
header h1,
header h1 *,
header p,
header p *{ width:174px; height:69.6px; }
header h1,
header p { display:block; margin:0 auto 0;}
header h1 span,
header p span { background-size:174px;}

header div { display:none; }

}



/* --------------------------------------------
										nav
---------------------------------------------- */ 
nav { clear: both; float:right; font-size:1.43em; }
nav ul {width: auto; text-align:center; margin:0em auto 0em;}
nav ul li { display:inline-block; padding:0 1.5em; border-right:1px solid #142568; line-height:1.2; }
nav ul li:first-child { border-left:1px solid #142568; }
nav ul li * { text-decoration:none; color:#142568; }

header nav { margin-top:-2em;}

@media (max-width:1172px) {
header nav { margin-top:2em;}
nav { float:none; margin-top:1em; }

}

@media (max-width:960px) {
header nav { display:none; position:fixed; margin-top:0; top:0; left:0; background:#fff; width:100%; height:100%; z-index:9997; font-size:1.6em; }
header nav ul { height:60%; padding:20% 0; }
header nav ul li { display: table; width:100%; padding:0; height:25%; border-right:none; }
header nav ul li:first-child { border-left: none; }
header nav ul li a { display: table-cell; height:100%; text-align:center; vertical-align:middle;}
}



/* --------------------------------------------
										article
---------------------------------------------- */ 
article { width:90%; margin:auto; overflow-x:hidden; }
article section { margin:auto; }




/* --------------------------------------------
										footer 
---------------------------------------------- */ 
footer { clear:both; width:94%; padding:0 3%; }
footer  nav { float:none; margin:3em auto 2em;}
footer>div { float:right; }
footer>div img { display:block; padding-bottom:0.8em;}
footer>div a.btn { font-size:0.83em;}
footer p { font-size:0.86em;}
footer p strong { font-size:1.67em; font-weight:500;}
footer p strong span { font-size:0.7em; padding-right:0.5em;}
footer p strong a { font-size:0.8em; padding-left:1em;}
footer p small { font-size:1em;}
footer p>img { float:left; max-width:206px; margin:-1em 2em 0 0; }
footer p.copy { clear:both; font-size:0.7em; text-align:right; padding:2em 0 1em;}

@media (max-width:960px) {
footer { background:url(../img/share/line.png) top center no-repeat; padding-top:3em; }
footer  nav { display:none; }

footer>div { float:none; text-align:center; padding-bottom:1em; }
footer>div img { margin: auto; width:100%; max-width:392px;}
footer>div a.btn {}
footer p { text-align: center;}
footer p>img { display: none; }

}



/* --------------------------------------------
										menu
---------------------------------------------- */ 
.menu { display:none ; }

@media (max-width:960px) {
.menu { display:block; width: 36px; height:30px; top:20px; right:30px; position:fixed; cursor:pointer; z-index:9999; }
.menu1,
.menu2,
.menu3 { width:32px; height:2px; background:#c2c2c2; position:absolute; border-radius:6px;
 transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; /* opera */ -moz-transition: all 0.5s ease-out; /* firefox */-webkit-transition: all 0.5s ease-out; /* chrome, safari */-ms-transition: all 0.5s ease-out; /* ie */   } 
.menu1 { top:0px; } 
.menu2 { top:12px; } 
.menu3 { top:24px; } 
.menuclick1 {top:10px;-moz-transform: rotate(405deg);-webkit-transform: rotate(405deg);-o-transform: rotate(405deg);-ms-transform: rotate(405deg); transform: rotate(405deg); }
.menuclick2 { opacity:0;}
.menuclick3 { top:10px;-moz-transform: rotate(-405deg);-webkit-transform: rotate(-405deg);-o-transform: rotate(-405deg);-ms-transform: rotate(-405deg);transform: rotate(-405deg); }
}