@charset "UTF-8";

/* frame.css
**************************************************************************************/


/* Frame
=============================================================================*/

/*common*/

html,
#body-in {
	overflow-x:hidden;
	min-width:1200px;
}

#header {
	width:100%;
	height:120px;
	background-color:rgba(255,255,255,0.80);
	position:fixed;
	z-index:80;
	/* box-shadow */
	box-shadow:0px 3px 3px 0px rgba(0,0,0,0.15);
	-moz-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.15);
	-webkit-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.15);
}

.main-container {
	background:url("../../image/under-bg002.jpg") no-repeat 0 0 , url("../../image/under-bg001.gif") repeat-y center top ;
	padding:250px 0 0 0;
}

.wrapper-area {
	width:1200px;
	margin:0 auto;
	padding-top:15px;
}

#main {
	float:right;
	width:935px;
}

#side {
	float:left;
	width:220px;
	margin:-166px 0 0 0;
}

#footer {
	width:1200px;
	margin:0 auto;
	padding:30px 0 25px;
}


/*home*/
.home #header {
	background-color:rgba(255,255,255,0.45);
}
.home .main-container {
	margin:0 auto;
	background:none;
	padding:0;
}

.home #main {
	width:auto;
	float:none;
}

@media screen and (max-width: 1199px){
html {
	overflow-x:auto;
}
#header {
	position:absolute;
	min-width:1200px;
}
}
@media screen and (max-width: 767px){
html,
#body-in {
	overflow-x:hidden;
	min-width:auto;
}
#header {
	position:fixed;
	min-width:auto;
	height:60px;
	background-color:rgba(255,255,255,0.85);
}
#side {
	width:100%;
	float:none;
	margin:0;
}

.main-container {
	background:none;
	width:auto;
	padding:60px 10px 0;
}
.wrapper-area {
	width:auto;
}

#main {
	float:none;
	width:auto;
	margin:0 0 30px 0;
}
.home #main {
	padding:0 10px;
}
#footer {
	width:auto;
	padding:30px 10px 20px;
	position:relative;
	border-top:1px solid #46b7e9;
}

}


/* 2.Font
=============================================================================*/
/*
77% = 10px	| 	123.1% = 16px	|	167% = 22px	
85% = 11px	|	131% = 17px	    |	174% = 23px
93% = 12px	|	138.5% = 18px	|	182% = 24px
100% = 13px	|	146.5% = 19px	|	189% = 25px
107% = 14px	|	153.9% = 20px	|	197% = 26px
114% = 15px	|	161.6% = 21px	|
*/

/*Link*/
a{overflow:hidden;}
a:link { 
	color:#2988ca;
	text-decoration:underline;}
a:visited { 
	color:#636;
	text-decoration:underline;}
a:hover { color:#f39a00; }
a:active { color:#f39a00; }
a.blank {
	padding: 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 300;
}
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}
} 

body {
	margin:0;
	padding:0;
	color: #222;
	font-family: YuGothic,"Custom Yu Gothic","Yu Gothic","メイリオ",Meiryo,sans-serif;
	letter-spacing:normal;
	line-height:1.6;
	font-size:88%;
}

#main h1 {	font-size: 153.9%;}
h2 {	font-size: 123.1%;}
h3 {	font-size: 107%;}
h4 {	font-size: 107%;}
#main h1,h2,h3,h4, #wrapper-under strong{	font-weight: bold;}



/* 3.IE PNG FIX
=============================================================================*/
* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}