@charset "UTF-8";
/* CSS Document */

#mainSpaceIn{
	padding-bottom:0px;
}
#nstyleArea{
	margin:25px 0 0;
	background:url("../images/bg_note.png") repeat center;
}
.ctsArea{
	padding:50px 20px;
	margin:0 auto;
}


/* ぴったり やさしい いきいき空間。
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
.nstyleMainTit{
	margin:0 auto;
	text-align:center;
}
.nstyleMainTit h1{
	margin:0 0 25px;
}
.nstyleMainTit p{
	margin:0 0 30px;
}
.nstyleMainTit p:last-of-type{
	margin:0 0 35px;
}
.ntyleMainTxt{
	width:820px;
	margin:0 auto 50px;
	font-size:16px;
	line-height:180%;
}
.titObiBlue{
	padding:10px;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	color:#FFF;
	background-color:#2869a2;
}


/* プランニング編
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
#planTxtBoxOut{
	height:634px;
	margin:80px 0 50px;
	background:url("../images/pic_nstyle_planning01.png") no-repeat center;
	position:relative;
}
.planTxtBox{
	position:absolute;
}
.planTxtBox .txt{
	font-size:12px;
}

/* 括弧タイトル */
.bracketArea{
	width:160px;
	padding:8px 20px;
	margin:0 0 5px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	position:relative;
}
.bracketArea::before,
.bracketArea::after{
	position:absolute;
	top:0;
	content:'';
	width:10px;
	height:100%;
	border-top:1px solid #555;
	border-bottom:1px solid #555;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.bracketArea::before{
	left:0;
	border-left:1px solid #555;
}
.bracketArea::after{
	right:0;
	border-right:1px solid #555;
}
.bracketArea .tit{
	font-size:14px;
	font-weight:bold;
	line-height:120%;
	text-align:center;
	letter-spacing:1.5px;
	background-color:#C3DBF2;
}

/* boxサイズ */
.plBox01{
	width:200px;
	top:-9px;
	left:55px;
}
.plBox02{
	width:255px;
	top:-55px;
	right:55px;
}
.plBox03{
	width:230px;
	bottom:67px;
	left:56px;
}
.plBox04{
	width:230px;
	bottom:24px;
	right:56px;
}

/* クリエイティブオフィス */
#cofficeArea{
	text-align:center;
}
.nstyleCopy{
	display:inline;
	padding:0 2px 3px;
	font-size:22px;
	line-height:200%;
	background:linear-gradient(transparent 70%, #fff23f 70%);
}
.nstyleCopy.productCopy{
	font-size:33px;
	line-height:160%;
	color:#2ca6e0;
}
.cofficeBoxArea{
	width:820px;
	margin:30px auto 0;
}
.cofficeBox{
	width:calc((100% - 60px)/3);
	margin:0 30px 0 0;
	padding:15px;
	text-align:left;
	border-radius:10px;
	background-color:#FFF;
	box-sizing:border-box;
	float:left;
}
.cofficeBox:last-of-type{
	margin:0;
}
.cofficeBox img{
	margin:0 0 10px;
}
.cofficeBox p{
	font-size:12px;
}

/* 罫線カラー */
.cofficeBox.blue{
	border:1px solid #2ca6e0;
}
.cofficeBox.green{
	border:1px solid #7fbe33;
}
.cofficeBox.red{
	border:1px solid #e9545d;
}

/* NAIKI STYLEの空間づくり */
#nstyleSpaceArea{
	width:900px;
	padding:40px 40px 0;
	margin:80px auto 0;
	border:2px solid #7FB5E5;
	background-color:#FFF;
	box-sizing:border-box;
	position:relative;
}

/* 吹き出し */
#nstyleSpaceArea .fukidashi{
	width:400px;
	padding:5px;
	font-size:20px;
	line-height:140%;
	letter-spacing:1px;
	color:#FFF;
	text-align:center;
	background-color:#7FB5E5;
	position:absolute;
	top:-19px;
	left:50%;
	-webkit-transform:translate(-50%, 0);
	transform:translate(-50%, 0);
}
#nstyleSpaceArea .fukidashi::after{
	content:' ';
	display:block;
	width:0;
	height:0;
	border:10px solid transparent;
	border-top:10px solid #7FB5E5;
	border-right:10px solid #7FB5E5;
	transform:rotate(135deg);
	position:absolute;
	bottom:-8px;
	left:50%;
	margin:0 0 0 -10px;
}
#nstyleSpaceTit{
	margin:15px 0 20px;
	text-align:center;
}

/* 背景矢印 */
.bgArrow::after{
	display:block;
	content:url("../images/arrow_nstyle.png");
	font-size:0.6rem;
	color:#0F218B;
}

/* シーン */
.sceanBoxOut{
	margin:12px 0 0;
}
.sceanBox{
	width:calc((100% - 40px)/3);
	margin:0 20px 25px 0;
	float:left;
	position:relative;
}
.sceanBox:nth-of-type(3n){
	margin:0 0 25px 0;
}
.sceanBox p{
	font-size:12px;
}
.sceanNum{
	position:absolute;
	top:-15px;
	left:-15px;
}
.sceanBox figcaption{
	padding:0 0 3px;
	margin:10px 0 5px;
	font-size:15px;
	font-weight:bold;
	text-align:center;
	position:relative;
	z-index:1;
}
.sceanBox figcaption::after {
	position:absolute;
	bottom:0;
	left:0;
	z-index:-1;
	content:'';
	width:100%;
	height:7px;
	background-color:#C3DBF2;
}
.nstylePlan02{
	margin:-20px 0 0;
}

/* 商品編 */
.nstyleCopyArea{
	margin:40px 0 0;
	text-align:center;
}

/* 納入事例 */
.ikiikiCaseBoxTop{
	margin:50px 0 0;
}
.ikiikiCaseBoxBtm{
	margin:30px 0 0;
}

/* 2カラム */
.ikiikiCaseBox.colL{
	width:389px;
	float:left;
}
.ikiikiCaseBox.colR{
	width:551px;
	float:right;
}

/* 3カラム */
.ikiikiCaseBox.col3{
	width:calc((100% - 80px)/3);
	margin:0 40px 0 0;
	float:left;
}
.ikiikiCaseBox.col3:last-of-type{
	margin:0;
}

.ikiikiCaseBox figcaption{
	margin:10px 0 0;
	font-size:12px;
	line-height:160%;
}
.ikiikiCaseBox figcaption span{
	display:inline-block;
	margin:0 0 2px;
	font-size:14px;
	font-weight:bold;
	color:#e9545d;
}

/* 受賞 */
.prizeArea{
	margin:20px auto 0;
	text-align:center;
}




/* common.cssに依存するスタイル（カテゴリー別で背景、色のみを変更）
----------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* グローバルナビゲーション*/
/*アクティブの場合*/
#gNavIn li.toSolution a {
	background:url("../images/btn_gnav02_solution_active.png") no-repeat left top;
	}

/*カテゴリータイトル*/
#categoryTitleOut {
	background:url("../images/bg_solution01.png") repeat-x center top;
	}

/*カテゴリートップのメニュー一覧（ボタン色）*/
#categoryMenuList li h2 {
	background:url("../images/btn_solution00_arrow.png") no-repeat right center;
	}

/* クリエイティブ・オフィス汎用スタイル
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
.ftBold{
	font-weight:bold;
}
.fltR{
	float:right;
}

/*ルビ
--------------------------------------------------------  -----*/
ruby{
	ruby-align:center;
	line-height:160%;
}
ruby rt{
	font-size:25%;
}