@charset "utf-8";
/* ==========================================================
■title : シェルBOX
■scope : ナスラック
-------------------------------------------------------------
■last modify :
　2017/09/20 303_suzuki_anna 新規作成

========================================================== */
#breadcrumbs ul {
  width: 998px;
  border-bottom: 2px solid #1fadec;
}

img {
	vertical-align: bottom;
}
p {
  text-align: justify;

}
/*ボタンホバー*/
a:hover img{
	opacity: 0.7;
}

ol{
	padding-left: 0;
	margin: 0;
}


/* --------------------------------------------------------------------------------------
	メインコンテンツ
	========================================================================================
	#main_content
-------------------------------------------------------------------------------------- */

#main_contents {
	width: 940px;
	margin: 8px auto 0 auto;
	display: block;
}

h1 img{/*h1のimgにボーダー*/
	border: solid 1px #b5b5b5;
	width: 940px;
    height: 300px;
    box-sizing: border-box;
}

/*h1下のリード文*/
.wrap_p{/*真ん中に寄せる*/
	width: 670px;
	margin: 25px auto 40px;
	text-align: center;
}
.wrap_p .lead{/*文字だけ左に寄せる*/
	display: inline-block;
	text-align: left;
}

#main_contents > section{
	width: 896px;
    margin: 0 auto;
}

h2{
	margin-bottom: 25px;
}

/* --------------------------------------------------------------------------------------
	簡単施工で「耐震対策」リフォーム
	========================================================================================
	#reform
-------------------------------------------------------------------------------------- */

#reform .reform_box{
	width: 840px;
	margin: 0 auto 45px;
	justify-content: space-between;
}

#reform .reform_box .text_area{
	width: 425px;
}
#reform .reform_box .text_area > p{
	margin-bottom: 15px;
}

#reform .reform_box2{
	width: 880px;
    margin: 0 auto 60px;
	position: relative;
}

#reform .reform_box2 > figure img{
	position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#reform .reform_box3{
	width: 575px;
    padding: 25px;
    background: #e8dccc;
	position: relative;
	margin-left: auto;
}

#reform .reform_box3::before{
    content: "";
    position: absolute;
    border: 23px solid transparent;
    border-right: 23px solid #e8dccc;
    border-width: 23px 40px;
    top: 50%;
    left: -12%;
    margin-top: -23px;
}

#reform .reform_box3 > p{
	margin-bottom: 15px;
	font-size: 23px;
    text-indent: -0.5em;
	text-shadow: 0 0 2px white;
}

#reform .reform_box3 .text_area{
	justify-content: space-between;
}

#reform .reform_box3 .text_area > p{
	width: 332px;
}


/* --------------------------------------------------------------------------------------
	制震に効果を発揮！
	========================================================================================
	#damping
-------------------------------------------------------------------------------------- */

#damping .lead{
	width: 580px;
	margin: 0 auto 25px;
}

#damping .dampingbox{
	width: 860px;
	margin: 0 auto 50px;
}

#damping .dampingbox_left{
    width: 216px;
    background: #ebf6eb;
    padding: 10px 10px 30px;
	margin-right: 25px;
	text-align: center;
}

#damping .dampingbox_right{
    width: 610px;
    background: #fff4e5;
    padding: 10px 10px 30px;
	position: relative;/*「板バネの・・」の固定用*/
}

.dampingbox_left figure img,
.dampingbox_right figure:first-child > img{
	margin-bottom: 3px;
}

#damping .text_deco1{
	text-align: center;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    background: #73a87b;
    margin: 5px 36px;
    padding: 7px 0 5px;
}

#damping .text_deco2{
	text-align: center;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    background: #ebac59;
    margin: 5px 70px;
    padding: 7px 0 5px;
}

@media all and (-ms-high-contrast:none){/*IE用調整スタイル*/
	#damping .text_deco1,
	#damping .text_deco2{
		padding: 7px 0 3px;
	}
}

.dampingbox_right .middle{
    position: relative;
    margin-left: 10px;
}

.dampingbox_right .middle img{
	position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.dampingbox_right .d_box1{
	width: 180px;
	text-align: center;
}

.dampingbox_right .d_box2{
	width: 350px;
	text-align: center;
	margin-left: auto;
	margin-top: 7px;
	justify-content: space-between;
}

.dampingbox_right .d_box2 figure:nth-child(1){
	width: 108px;
}

.dampingbox_right .d_box2 figure:nth-child(2){
	width: 125px;
}

.dampingbox_right .d_box2 figure:nth-child(3){
	width: 104px;
}

.dampingbox_right .d_box2 figcaption{
	font-size: 13px;
}

.dampingbox_right .d_box2 figure p{
	font-size: 11px;
    letter-spacing: -0.13em;
}

.dampingbox_right > p:last-child{
    color: #c30000;
    font-weight: bold;
    position: absolute;
    right: 10px;
    bottom: 10px;
    border-bottom: 2px solid #c30000;
}


/* --------------------------------------------------------------------------------------
	制震に効果を発揮！ > リフォーム例 / 実験で証明されたシェルワイドの優れた性能
	========================================================================================
	#damping_example / #damping_performance
-------------------------------------------------------------------------------------- */

/*共通設定*/
#damping_example,
#damping_performance{
    width: 840px;
    margin: 0 auto 50px;
}

#damping h3{
    background: url(../image/ttl_h3bg.png) no-repeat;
    width: 830px;
    height: 50px;
	display: table;
	margin-bottom: 15px;
}

#damping h3 span{
	display: table-cell;
    vertical-align: middle;
    padding-left: 36px;
    font-size: 22px;
    font-weight: normal;
}

@media all and (-ms-high-contrast:none){/*IE用調整スタイル*/
	#damping h3 span{
		padding: 0.5em 0 0.5em 1.8em;
	}
}


#damping_example .example_box,
#damping_performance .performance_box{
	width: 790px;
    margin: 0 auto 40px;
	justify-content: space-between;
}

/*ここから個別：#damping_example*/
.example_box .text_area{
	border: double #3cb8bc;
    padding: 20px;
    width: 260px;
    box-sizing: border-box;
}

.example_box figcaption span:first-child{
	background: #000;
    color: #fff;
    padding: 2px 12px 0;
    font-size: 21px;
    margin: 0 6px;
	display: inline-block;
}
.example_box figcaption span:last-child{
	color: #ed7782;
	font-weight: bold;
}

.example_box .text_area span{
    content: "";
    border-left: #e60012 solid 1px;
    border-width: 27px;
    height: 8px;
    display: inline-block;
    margin: 0 4px;
}

.example_box2{
	width: 588px;
    margin: 60px auto 30px;
    text-align: center;
    position: relative;
}

.example_box2 > img{
	position: absolute;
    top: -7%;
    margin: auto;
    right: 0;
    left: 0;

}

.example_box3{
	width: 597px;
    margin: 0 auto;
    background: #fff4e5;
    padding: 20px 40px 30px;
}

.example_box3 p:first-child{
	margin-bottom: 10px;
	font-size: 26px;
	text-align: center;
}

.example_box3 p span:first-child{
	color: #f39018;
}

.example_box3 p span:last-child{
	color: #da0000;
	font-size: 40px;
	font-weight: bold;
}

.example_box3 p:last-child{
	line-height: 1.2;
	padding-left: 1em;
    text-indent: -1em;
}


/*ここから個別：#damping_performance*/
.performance_box .text_area{
	width: 265px;
}

.performance_box .text_area p:last-child{
	line-height: 1.2;
    padding: 0.5em 0 1em;
    text-indent: -1em;
    margin-left: 1em;
}


.performance_box figure{
	width: 510px;
}

.performance_box figcaption{
	margin-bottom: 5px;
	font-size: 15px;
}

.performance_box figcaption::before{
    content: "";
    border-radius: 50%;
    background: #3cb8bc;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 7px 1px 2px;
}

.performance_box figcaption::after{
	content: "";
    background: #3cb8bc;
    width: 310px;
    height: 2px;
    display: inline-block;
    margin: 0 0 4px 15px;
}


/* --------------------------------------------------------------------------------------
	「耐震建築金物シェルワイド」の５大特徴
	========================================================================================
	#quality
-------------------------------------------------------------------------------------- */


#quality ol {
	width: 800px;
	margin: 0 auto 70px;
	height: 100%;
}

#quality ol li{
	margin: 0 auto 28px;
	padding: 25px 50px 25px 70px;
}

#quality ol li:nth-child(1){
	background: #fff4e5 url(../image/img_list_1.png) no-repeat;
}

#quality ol li:nth-child(2){
	background: #fff4e5 url(../image/img_list_2.png) no-repeat;
}

#quality ol li:nth-child(3){
	background: #fff4e5 url(../image/img_list_3.png) no-repeat;
	justify-content: space-between;
}

#quality ol li:nth-child(4){
	background: #fff4e5 url(../image/img_list_4.png) no-repeat;
}

#quality ol li:nth-child(5){
	background: #fff4e5 url(../image/img_list_5.png) no-repeat;
}

#quality .ttl_txt{
    font-size: 23px;
	left: 0;
	display: inline-block;
}

#quality .ttl_txt::after{
	content: "";
    display: inline-block;
    height: 2px;
    width: 380px;
	background-image: linear-gradient(to right, rgba(230, 155, 90,1),rgba(230, 155, 90,0));
/*    background: linear-gradient(to right, rgb(230, 155, 90), transparent);*/
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
}

#quality  ol li:nth-child(2) .ttl_txt::after{
    width: 500px;
 
}
#quality  ol li:nth-child(3) .ttl_txt::after{
    width: 230px;
 
}
#quality  ol li:nth-child(4) .ttl_txt::after{
    width: 360px;
 
}
#quality  ol li:nth-child(5) .ttl_txt::after{
    width: 450px;
 
}

#quality .quality_box {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:distribute;
	margin-bottom: 15px;
	position: relative;
	justify-content: space-between;
	align-items: center; 
}

#quality figure img{
	border: 1px solid #ffdfac;
}

#quality li > p{
	width: 657px;
}

/* --------------------------------------------------------------------------------------
	topics
	========================================================================================
	#topics
-------------------------------------------------------------------------------------- */

#main_contents #topics{
	width: 853px;
	margin: 0 auto 30px;
}

#main_contents #topics h2 {
	width: 853px;
	margin: 0 auto 30px;
}

#main_contents #topics section{
	width: 830px;
	margin: 0 auto 40px;
}

#main_contents #topics h3{
	font-weight: normal;
    border-left: 10px solid #3cb8bc;
    padding-left: 8px;
    color: #1e8d91;
    border-bottom: 1px solid #000;
    font-size: 21px;
	margin: 0 14px 10px 0;
}

/*#method　個別設定*/

#topics #method > p {
	margin-bottom: 12px;
	padding-left: 20px;
}

#topics #method ul{
	width: 800px;
    margin: 0 auto;
	justify-content: space-between;
}

#topics #method ul li{
	width: 255px;
    box-sizing: border-box;
	border: double #ffae00;
}
#topics #method ul li:nth-child(2){
	border: double #e20000 6px;
}


#topics #method dl{
	width: 145px;
    font-weight: bold;
}

#topics #method dt{
	font-size: 22px;
    color: #e18a00;
}

#topics #method dd{
	padding-right: 10px;
}

#topics #method .space-b{
	justify-content: space-between;
	padding: 12px 4px 0 14px;
}

#topics #method li > p{
	font-size: 14px;
	line-height: 1.4;
	padding: 10px;
}


/*#caution　個別設定*/

#caution .caution_box {
	width: 800px;
    margin: 0 auto;
	justify-content: space-between;
}

#caution .caution_box >p {
	width: 300px;
	line-height: 1.4;
}

#caution .caution_box figure{
	width: 490px;
	justify-content: space-between;
	margin-top: 7px;
}

#caution .caution_box figure img{
	border: #dddddd solid 1px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------------------
	製品生産工場のご紹介
	========================================================================================
	#factory_info
-------------------------------------------------------------------------------------- */

/*枠*/
#main_contents #factory_info{
	width: 860px;
	margin: 0 auto 30px;
	background: #f4efe9;
    border-bottom: 2px solid #b2a28a;
	margin-bottom: 60px;
}

/*h2タイトル*/
.ttl_decoration_2{
	color: #fff;
    font-weight: normal;
    background: url(../../image_cmn/ttl_factoryinfo.png) no-repeat #b2a28a;
    padding: 7px 0 7px 80px;
	margin-bottom: 0;
	position: relative;
}

@media all and (-ms-high-contrast:none){/*IE用調整スタイル*/
	.ttl_decoration_2{
		padding: 7px 0 3px 80px;
	}
}


/*余白調整*/
#factory_info > .h2_wrap{
	padding: 20px;/*h2下の余白調整*/
	margin: 0;/*margin上書き用*/
}

/*テキスト調整*/
#factory_info .txt_box{
	line-height: 1.4;
	font-size: 15px;
	width: 520px;
}

/*li(各工場)の左余白調整*/
#factory_info ul li{
	margin-left: 30px;
}

/*キャプション*/
#factory_info ul figcaption{
	text-align: center;
    margin: 2px 0 7px 0;
    font-size: 14px;
    color: #555555;
}

/*「工場の詳細を見る」ボタン*/
#factory_info img[src*="btn"]{
	display: block;
    margin: 0 auto;
}


/* --------------------------------------------------------------------------------------
	お問合せ
	========================================================================================
	#contact
-------------------------------------------------------------------------------------- */

/*枠*/
#main_contents #contact{
	width: 760px;
    margin: 0 auto 30px;
    background: url(../../image_cmn/icon_inquiry.png) no-repeat;
    background-position: 40px;
    border: double #ffae00;
    padding: 20px;
    box-sizing: border-box;
	position: relative;
}

#contact h2{
	margin: 0 0 0 190px;
}

/*テキストエリア*/
#contact p {
	font-size: 1rem;
	margin: 10px 0 0 190px;
    width: 570px;
}
#contact p b {
  font-size: 117%;
}

/*「お問合せはこちら」ボタン*/
#contact img{
	display: block;
    margin: 0 auto;
}


/* --------------------------------------------------------------------------------------
	SEO文
	========================================================================================
	.comment_box
-------------------------------------------------------------------------------------- */
.comment_box {
    background: #f2f8fe;
    color: #000;
    margin: 80px auto 70px;
    padding: 25px;
    width: 784px;

}

/* --------------------------------------------------------------------------------------
	共通CSS
-------------------------------------------------------------------------------------- */

/*flexbox*/

.flexbox{
	display:-webkit-flex;
	display:flex;
}

/*padding*/

.pr_15{
	padding-right: 15px;
}

.pt_10{
	padding-top: 10px;
}

.pl_20{
	padding-left: 20px;
}

/*margin*/

.mb_5{
	margin-bottom: 5px;
}

.mr_10{
	margin-right: 10px;
}

/*color*/

.red{
	color: #c30000;
	font-weight: bold;
}


/*width*/

.w_250{
	width: 250px;
}

.w_380{
	width: 380px;
}

.w_390{
	width: 390px;
}

.w_400{
	width: 400px;
}

.w_420{
	width: 420px;
}

.w_430{
	width: 430px;
}

.w_470{
	width: 470px;
}

.w_510{
	width: 510px;
}

.w_630{
	width: 630px;
}


/*indent*/

.indent-1{
	padding-left: 1em;
    text-indent: -1em;
}

/*line-height*/

.line-h_1{
	line-height: 1;
	letter-spacing: 0.04em;
}

/*font-size*/

.font_14{
	font-size: 14px;
}

/***********************************
　　　　　　注意書き
************************************/

.wrap_p .notes{
	color: #fff;
	font-weight:  bold;
	padding: 8px 16px;
	background: #DD0003;
	margin-bottom: 20px;
}