@charset "utf-8";

/**
 *
 * global: サイト共通
 *
 */


/*--------------------------------------------------------------------------
	reset
---------------------------------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,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;}
ul,ol,li,dl,dt,dd{list-style-type:none;list-style-position:outside;}
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{text-decoration:none;}
img{vertical-align:top;border:0;}
del{text-decoration:line-through;}
hr{display:block;height:0;border:0;margin:0;padding:0;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
em,strong{ font-weight: bold;}
input,select,textarea{margin:0;padding:0;vertical-align:baseline;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
img {max-width: 100%;}


/*--------------------------------------------------------------------------
	head
---------------------------------------------------------------------------*/
head{
	font-family: pc;
}

/* @TB */
@media all and (max-width: 1024px){
	head{
		content: "tb";
	}
}

/* @SP */
@media all and (max-width: 767px){
	head{
		content: "";
		font-family: sp;
	}
}


/*--------------------------------------------------------------------------
	html
---------------------------------------------------------------------------*/
html{
	overflow-y: scroll;
}


/*--------------------------------------------------------------------------
	body
---------------------------------------------------------------------------*/
body{
	font-family: "Lato", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	font-size:14px;
	line-height:1.8;
	color: #3d3d3d;
	-webkit-text-size-adjust:100%;
}

/* @SP */
@media all and (max-width: 767px){
	body{
		min-width: 320px;
		font-size:12px;
	}
}


/*----------------------------------------------------------------------
	a
----------------------------------------------------------------------*/
a        { color: #0063dc; outline:none;}
/*
a:link,
a:visited{ color: #3b41a4;}
a:focus,
a:active { color: #f90;}
*/

/*--------------------------------------------------------------------------
	.inner_base
--------------------------------------------------------------------------*/
.inner_base{
	max-width: 980px;
	margin: 0 auto;
	padding: 0 20px;
}


/*--------------------------------------------------------------------------
  #Page
---------------------------------------------------------------------------*/
#Page{}



/*--------------------------------------------------------------------------
	header
---------------------------------------------------------------------------*/
#Header{
	z-index: 500;
	position: fixed;
	top: 0;
	left: 0;
	min-width: 320px;
	width: 100%;
	height: 71px;
	background: #fff;
	border-bottom: 1px solid #e8e8e8;
}

/* .logo */
#Header .logo{
	z-index: 20;
	position: absolute;
	top: 23px;
	left: 40px;
}
#Header .logo img{
	width: 180px;
}

/* .btn */
#Header .btn{
	z-index: 20;
	position: absolute;
	top: -10px;
	right: 30px;
}

/* .btn > .hide */
#Header .btn._hide{
	top:-110px;

}

/* @PC */
@media all and (max-width: 1249px){
	/* .logo */
	#Header .logo{
		left: 20px;
	}
	/* .btn */
	#Header .btn{
		right: 20px;
	}
}
@media all and (max-width: 1149px){
	/* .logo */
	#Header .logo{
		left: 10px;
	}
	#Header .logo img{
		width:170px;
	}
	
	/* .btn */
	#Header .btn{
		right: 10px;
	}
	#Header .btn img{
		width: 65px;
	}
}

/* @TB */
@media all and (max-width: 1024px){
	#Header{
		height: 68px;
	}
	/* .logo */
	#Header .logo{
		top: 26px;
		left: 15px;
	}
	#Header .logo img{
		width: 115px;
		height: 15px;
	}

	/* .btn */
	#Header .btn,
	#Header .btn._hide{
		top: 20px;
		right: 75px;
		-webkit-transition: all 0s;
  	transition: all 0s;
	}
	#Header .btn img{
		width: 120px;
	}
}

/* @SP */
@media all and (max-width: 340px){
	/* .btn */
	#Header .btn,
	#Header .btn._hide{
		top: 21px;
		right: 68px;
	}
	#Header .btn img{
		width: 100px;
	}
}


/* #GlobalNavi
-----------------------------------------------------------------*/
#GlobalNavi{
	position: relative;
	max-width: 1020px;
	padding-left: 220px;
	margin: 0 auto;
}
#GlobalNavi li{
	float: left;
	padding: 0 10px;
}
#GlobalNavi li a{
	display: block;
	border-bottom: 3px solid transparent;
	-webkit-transition: border-color 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95);
	        transition: border-color 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.dev_pc #GlobalNavi li a:hover,
.dev_pc #GlobalNavi li a.active{
	border-color: #5dab92;
}

/* @PC */
@media all and (max-width: 1249px){
	#GlobalNavi{
		padding-left: 240px;
	}
	#GlobalNavi li{
		padding: 0 4px;
	}
}
@media all and (max-width: 1199px){
	#GlobalNavi{
		padding-left: 220px;
	}
}
@media all and (max-width: 1149px){
	#GlobalNavi{
		padding-left: 200px;
	}
	#GlobalNavi li{
		padding: 0;
	}
}
@media all and (max-width: 1148px){
	#GlobalNavi{
		padding-left: 180px;
	}
	#GlobalNavi li{
		padding: 0;
	}
}

/* @TB */
@media all and (max-width: 1024px){
	#GlobalNavi{
		padding-left: 0;
	}

	#GlobalNavi dl{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	#GlobalNavi dt{
		float: right;
		width: 68px;
		height: 68px;
		cursor: pointer;
	}
	#GlobalNavi dd{
		clear: both;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
		opacity: 0;
		height: 0;
		-webkit-transition: opacity 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
		        transition: opacity 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
		display: none;
	}
	.is_globalnavi #GlobalNavi dd{
		opacity: 1;
	}
	#GlobalNavi ul{
		padding: 10px 27px 235px;
		background: rgba(230,243,239,0.96) url(//www.paxnaturon.com/images/shared/gnavi_bg.png) no-repeat 100% 100%;
		background-size: 290px 205px;
	}
	#GlobalNavi li{
		float: none;
		padding: 0;
		border-bottom: 1px solid #abd6c8;
	}
	#GlobalNavi li a{
		position: relative;
		border: none;
	}
	#GlobalNavi li a:after{
		content: "";
		position: absolute;
		top: 50%;
		right: 15px;
		width: 12px;
		height: 21px;
		margin-top: -11px;
		background: url(//www.paxnaturon.com/images/shared/ico_arw01.png) no-repeat;
		background-size: 12px 21px;
	}
	#GlobalNavi li img{
		height: 80px;
	}
}

/* @SP */
@media all and (max-width: 767px){
	#GlobalNavi dt{
		width: 68px;
		height: 68px;
	}
	#GlobalNavi li a:after{
		width: 8px;
		height: 14px;
		margin-top: -7px;
		background-size: 8px 14px;
	}
	#GlobalNavi li img{
		height: 59px;
	}
}

/* @SP */
@media all and (max-width: 340px){
	#GlobalNavi ul{
		padding: 10px 20px 235px;
	}
}



/*--------------------------------------------------------------------------
	#Content
---------------------------------------------------------------------------*/
#Content{
	padding-top: 72px;
	background: url(//www.paxnaturon.com/images/shared/bg01.png);
}

/* @TB */
@media all and (max-width: 1024px){
	#Content{
		padding-top: 69px;
	}
}



/*--------------------------------------------------------------------------
	footer
---------------------------------------------------------------------------*/
#Footer{
	position: relative;
	z-index: 100;
}

.ft_inner{
	background: #fff;
}

/* .ft_navi */
.ft_navi{
	padding: 70px 0 60px;
	border-bottom: 1px solid #ededed;
}
.ft_navi .list_logo{
	letter-spacing: -0.4em;
	text-align: center;
}
.ft_navi .list_logo li{
	display: inline-block;
	letter-spacing: 0;
	padding: 0 31px;
}
.ft_navi .list_logo li:first-child{	padding-left: 0;}
.ft_navi .list_logo li:last-child { padding-right: 0;}
.ft_navi .list_logo img{ height: 70px;}

/* .sns_btn */
.sns_btn{
	position: absolute;
	right: 50%;
	width: 70px;
	margin: 35px -115px 0 0;
}
.sns_btn li{
	float: left;
}
.sns_btn li img{
	height: 30px;
}
.sns_btn li + li{
	margin-left: 10px;
}

/* .ft_info */
#Footer .ft_info{
	padding: 40px 0 60px;
	font-size: 12px;
}

#Footer .ft_info p.links{
	float: left;
}
#Footer .ft_info p.links a{
	text-decoration: none;
	color: #3d3d3d;
}
.dev_pc #Footer .ft_info .links a:hover{
	text-decoration: underline;
}

#Footer .ft_info p.copyright{
	float: right;
}
#Footer .ft_info p.copyright img{
	height: 12px;
}

/* .pagetop */
#Footer .pagetop{
	z-index: 500;
	display: none;
	position: fixed;
	right: 40px;
	bottom: 20px;
}

/* @PC */
@media all and (max-width: 1250px){
	/* .pagetop */
	#Footer .pagetop{
		right: 20px;
		bottom: 80px;
	}
}

/* @TB */
@media all and (max-width: 1024px){
	/* .ft_navi */
	.ft_navi .list_logo li{
		padding: 10px 26px !important;
	}
}
/* @TB */
@media all and (max-width: 1023px){
	/* .ft_navi */
	.ft_navi{
		padding: 40px 0;
	}

	.ft_navi .list_logo{
		margin: 0 auto;
		max-width: 600px;
	}
	.ft_navi .list_logo li{
		padding: 10px 20px !important;
	}

	/* .sns_btn */
	.sns_btn{
		margin-right: 364px;
		right: 0;
	}
}

/* @SP */
@media all and (max-width: 767px){
	#Footer{
    padding-top: 14px;
    background-size: 220px 14px;
	}

	/* .ft_navi */
	.ft_navi{
		padding: 25px 0 0;
		border-bottom: 0;
	}
	.ft_navi .list_logo{
		max-width: 330px;
	}
	.ft_navi .list_logo li{
		padding: 5px 10px !important;
	}
	.ft_navi .list_logo img{ height: 35px;}

	/* .sns_btn */
	.sns_btn{
		position: relative;
		width: auto;
		max-width: 88px;
		height: 38px;
		margin: 0 auto;
		padding-top: 20px;
	}
	.sns_btn li img{
		height: 38px;
	}
	.sns_btn li + li{
		margin-left: 12px;
	}

	/* .ft_info */
	#Footer .ft_info{
		padding: 20px 0;
		font-size: 10px;
	}

	#Footer .ft_info p.links,
	#Footer .ft_info p.copyright{
		float: none;
		text-align: center;
	}
	#Footer .ft_info p.copyright{
		padding-top: 10px;
	}
	#Footer .ft_info p.copyright img{
		height: 9px;
	}
}



/*--------------------------------------------------------------------------
	clearfix
---------------------------------------------------------------------------*/
.cf:before,
.cf:after{
	content:"";
	display:table;
}
.cf:after{
	clear:both;
}
.cf{
	zoom:1;
}