@charset "utf-8";
/**
 * style 
 * (c) FOURDIGIT Inc.
 *
 * 1. import
 * 2. html, body
 * 3. HTMLtag, siteCommonClass
 * 4. Layout
 * 5. EachPageStyle
 *
 */
/**
 * 1. import
 */
/*
@import "import/reset.css";
@import "../font/font.css";
*/
@import "import/util.css";
@import "../ext_ci/ci.css";

/**
 * 2. html, body
 */
	body {
		background-color: #fff;
		background-image: url(../imgs/space.gif);
		background-repeat: repeat-x;
		background-position: center top;
	}
	.page {
		color: #333333;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: 0.1em;
		font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	}
/**
 * 3. HTMLtag, siteCommonClass
 */
/* anchor */
	a {
		background-color: transparent;
		background-image: none;
		background-repeat: no-repeat;
		color: #0000ff;
		text-decoration: none;
	}
	a:visited {}
	a:hover {
		color: #ff0000;
	}
	a:active {}

/* heading */
	.siteTitle {
		/*dont use <h1> selector*/
	}
	.contentTitle {
		/*dont use <h2> selector*/
	}

/* cap */
	.cap,
	.caption {
		background: none;
		color: #666666;
		font-size: 10px;
		line-height: 15px;
	}
	.cap {
		padding-top: 5px;
	}

/* wrapper */
	.wrapper {
		width: 960px;
		margin-left: auto;
		margin-right: auto;
		zoom: 1;
	}
	.wrapper:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }

/* public css */
	.relative {
		position: relative;
	}
	.absolute {
		position: absolute;
	}
	/* box */
	.Box {
	}
	.Box.gBox {
		border: 1px solid #e3e3e3;
	}
/* pinch */
	body .pinch {
		position: relative;
	}
	body .pinch .pinchIcon {
		display: none;
		position: absolute;
		top: -45px;
		right: 0;
		width: 43px;
		height: 42px;
		opacity: 0.8;
		background-color: transparent;
		background-image: url(../imgs/icon-pinchin.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
	}

	@media only screen and (max-width: 640px){
		body .pinch .pinchIcon {
			display: block;
		}
	}

/**
 * 4. Layout
 */
 
 /*--------------------------------------
　gHeader
---------------------------------------*/
	/* gHeader */
 	body .page {
 		position: relative;
 	}
 	body #gHeader.fixed {
    	position: fixed;
    	top: 0px;
    	z-index: 9999;
    	width: 100%;
    	background-color: rgba(255,255,255,0.9);
	}
 	body #gHeader .inner {
 		padding: 17px 0;
 	}
	body #gHeader #hdrLogoArea {
		float: left;
 		width: 42%;
 		zoom: 1;
	}
	body #gHeader #hdrLogoArea:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
 	body #gHeader .hdrLogo {
 		float: right;
 		width: 45%;
 	}
 	body #gHeader .siteTitle {
 		float: right;
 		width: 55%;
 		font-size: 10px;
 		line-height: 15px;
 		padding-left: 10px;
 		box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box;
 	}
 	/* hNav */
 	body #gHeader #hNav {
 		display: none;
 	}
 	/* hNavReq */
 	body #gHeader #hNavReq {
 		display: none;
 	}
 	/* pNav */
 	body #gHeader #pNav {
 		float: right;
 		width: 55%;
 		text-align: right;
 	}
	body #gHeader #pNav ul {
		float: left;
	}
 	body #gHeader #pNav ul li {
 		display: inline-block;
 		margin-left: 10px;
 	}
 	body #gHeader #pNav ul li a {
 		/* transition */
		-webkit-transition: .3s;
		transition: .3s;
 	}
 	body #gHeader #pNav ul li a:hover {
 		opacity: 0.6;
 	}
 	body #gHeader #pNav ul.pNavSub li {
 		float: none;
 		width: 84px;
 		display: block;
 		text-align: left;
 	}
 	/* gNav */
 	body #gHeader #gNav {
 		clear: both;
 		background-color: #333;
 		padding: 10px 0;
 		text-align: center;
 	}
 	body #gHeader #gNav ul {
 		width: 100%;
 		margin-left: -0.5%;
 		margin-right: -0.5%;
 		zoom: 1;
 	}
 	body #gHeader #gNav ul:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
 	body #gHeader #gNav ul li {
 		display: inline-block;
 		width: 10.1%;
 		margin-left: 0.5%;
 		margin-right: 0.5%;
 		text-align: center;
 	}
 	body #gHeader #gNav ul li.new {
 		position: relative;
 	}
 	body #gHeader #gNav ul li.new .iconNew {
 		position: absolute;
 		right: 0;
 		top: -7px;
 		display: inline-block;
 		color: #fff;
 		font-size: 8px;
 		line-height: 8px;
 		border: 1px solid #ee0000;
 		background-color: #ff0000;
 		padding: 2px 3px;
 	}
 	body #gHeader #gNav ul li.btPc {
 		display: block;
 	}
 	body #gHeader #gNav ul li.btSp {
 		display: none;
 	}
 	body #gHeader #gNav ul li img {
 		vertical-align: top;
 	}
 	body #gHeader #gNav ul li span {
 		display: inline-block;
 		background-color: #666;
 		width: 100%;
 		padding: 10px 0;
 		color: #fff;
 		font-size: 12px;
 		line-height: 18px;
 		/* transition */
		-webkit-transition: .3s;
		transition: .3s;
 	}
 	body #gHeader #gNav ul li.off span {
 		background-color: #555;
 		color: #888;
  	}
 	body #gHeader #gNav ul li.on a span,
 	body #gHeader #gNav ul li a:hover span {
 		background-color: #ededed;
 		color: #333;
 	}
 	body #gHeader #gNav ul li.on a span {
 		font-weight: bold;
 	}

 /*--------------------------------------
　container
---------------------------------------*/
	
	body #container {
		text-align: left;
		padding: 40px 0;
		font-size: 12px;
		line-height: 18px;
	}


/*--------------------------------------
　gFooter
---------------------------------------*/	

	body #gFooter {
		clear: both;
	}
	/* ftrCV */
	body #gFooter #ftrCV {
		text-align: center;
		margin-bottom: 20px;
	}
	body #gFooter #ftrCV .wrapper {
		position: relative;
	}
	body #gFooter #ftrCV ul li {
		display: inline-block;
		margin-left: 1%;
		margin-right: 1%;
	}
	body #gFooter #ftrCV ul li a {
		display: block;
		padding: 20px 50px;
		color: #fff;
		font-size: 20px;
		line-height: 20px;
		letter-spacing: 3px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;
		-ms-border-radius: 5px;
		/* transition */
		-webkit-transition: .3s;
		transition: .3s;
	}
	body #gFooter #ftrCV ul li.ftrReq a {
		background-color: #333;
	}
	body #gFooter #ftrCV ul li.ftrReq a:hover {
		background-color: #555;
	}
	body #gFooter #ftrCV ul li.ftrRes a {
		background-color: #666;
	}
	body #gFooter #ftrCV ul li.ftrRes a:hover {
		background-color: #888;
	}
	
	body #gFooter #ftrCV ul li.btBack,
	body #gFooter #ftrCV ul li.btNext {
		display: block;
		margin-left: 0;
		margin-right: 0;
		position: absolute;
		top: 0;
	}
	body #gFooter #ftrCV ul li.btBack a,
	body #gFooter #ftrCV ul li.btNext a {
		color: #999;
		font-size: 18px;
		line-height: 28px;
		padding: 5px 0 0;
		border-bottom: 1px dotted #999;
		border-radius: 0;
	}
	body #gFooter #ftrCV ul li.btBack a:hover,
	body #gFooter #ftrCV ul li.btNext a:hover {
		color: #000;
		border-bottom: 1px dotted #000;
	}
	body #gFooter #ftrCV ul li.btBack {
		left: 0;
	}
	body #gFooter #ftrCV ul li.btNext {
		right: 0;
	}
	
	/* fNav */
	body #gFooter #fNav {
		position: relative;
		zoom: 1;
		text-align: center;
		padding: 10px 0;
		margin-bottom: 45px;
	}
	body #gFooter #fNav:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
	body #gFooter #fNav ul li {
		font-size: 12px;
		line-height: 18px;
    	color: #ccc;
	    display: inline;
	    margin-right: 0.9em;
	    border-right-width: 1px;
	    border-right-style: solid;
	    border-right-color: #ccc;
	    padding-right: 0.8em;
    }
    body #gFooter #fNav ul li a {
    	color: #666;
    }
     body #gFooter #fNav ul li:hover,
     body #gFooter #fNav ul li.on a {
    	color: #000;
    }
    body #gFooter #fNav ul li.on a {
    	font-weight: bold;
    }
    body #gFooter #fNav ul li.off:hover {
    	color: #ccc;
    }
    
    /* contactArea */
	body #gFooter #contactArea {
		clear: both;
		position: relative;
		zoom: 1;
		color: #666;
		font-size: 10px;
		line-height: 15px;
		margin-bottom: 20px;
	}
	body #gFooter #contactArea .wrapper {
		background-color: #f0f0f0;
	}
	body #gFooter #contactArea:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
	body #gFooter #contactArea .contactTtl {
		float: left;
		width: 25%;
		padding: 15px;
		background-color: #ccc;
		color: #000;
		text-align: center;
	}
	body #gFooter #contactArea .contactTtl strong {
		font-size: 18px;
		line-height: 24px;
		letter-spacing: 2px;
		padding-top: 25px;
	}
	body #gFooter #contactArea .contactTtl span.icon {
		font-size: 30px;
		line-height: 40px;
		width: 40px;
		display: inline-block;
	}
	body #gFooter #contactArea .inner {
		display: table;
		float: right;
		width: 67%;
		padding: 15px;
	}
	body #gFooter #contactArea .addressTxt {
		display: table-cell;
	    vertical-align: middle;
		color: #302e26;
		font-size: 12px;
		line-height: 18px;
	}
	body #gFooter #contactArea .contactBox {
		float: right;
		text-align: right; 
	}
	body #gFooter #contactArea .contactBox .tel {
		color: #333;
		font-size: 32px;
		line-height: 38px;
		margin-bottom: 5px;
	}
	body #gFooter #contactArea .contactBox .tel span.icon {
		display: inline-block;
		width: 45px;
	}
	body #gFooter #contactArea .contactBox .tel a {
		color: #333;
	}
	body #gFooter #contactArea .contactBox .mail {
		display: inline-block;
		position: relative;
		margin-top: 5px;
		padding: 7px 5px 5px 32px;
		background-color: #fff;
		border: 1px solid #e3e3e3;
		border-radius: 4px;
	}
	body #gFooter #contactArea .contactBox .mail a {
		color: #333;
	}
	body #gFooter #contactArea .contactBox .mail a:hover {
		color: #666;
	}
	body #gFooter #contactArea .contactBox .mail span {
		position: absolute;
		top: 5px;
		left: 4px;
		font-size: 20px;
		line-height: 14px;
		width: 28px;
		height: 12px;
	}
	
	/* ftrInfo */
	body #gFooter #ftrInfo {
		clear: both;
		background-color: #ccc;
		padding: 10px 0;
		color: #000;
	}

/* コスモスイニシアの詳細ページ用css */
.shosai {
	background-color: #f2f2f2;
	margin: 25px auto 25px;
}
.shosai .inner {
	position: relative;
	width: 690px;
	margin: 0 auto;
	padding: 40px 0;
}
.shosai p{
	font-size: 14px;
	line-height: 22px;
}
.shosai p span {
	border: solid 1px #000000;
	padding: 2px 1em;
}
.shosai p.btn{
	position: absolute;
	top: 45px;
	right: 0;
}

.black {
  color: #58595b;
}

@media only screen and (max-width: 800px){
.shosai .inner {
	width: 100%;
	margin-bottom: 30px;
 }
.shosai p.ip{
	text-align: center;
	margin-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}
.shosai p.btn{
	position: static;
	text-align: center!important;
}
.shosai p.btn img{
	display: inline-block;
	margin: 0;
	padding: 0;
}
}