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

/*
Theme Name: 東北NTS
Author URI: 
Description: 蓄光事業　NS事業　
Author: MC
Version: 1.0.0
*/

/*==========================================
 全デバイス共通［common］
===========================================*/

#wrapper{
	height: 100vh;
	display: flex;
	flex-direction: column;
}

footer{
	margin-top: auto;
}

/*==========================================
 PC［1001px~］
===========================================*/

.sp_on{
	display: none;
}


main{
	margin-top: 80px;
}

/*各種製品のh2*/

#ttl_area{
	padding: 100px 10%;
	width: 100%;
	color: #fff;
	background-color: #eee;
}

#ttl_area h2{
	margin-bottom: 30px;
	font-size: 3.6rem;
	line-height: 1.25;
}

.text_gray{
	color: #3B4043;
}

.h2_ttl_02{
	margin-bottom: 40px;
	padding:5px 0 5px 15px;
	font-size: 2.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	text-align: left;
	color: #004BB1;
	border-left: solid 5px #004BB1;
}

.h2_ttl_03{
	margin: 10px 0 0;
	font-size: 45%;
	font-weight: 400;
	display: block;
	letter-spacing: 0.15rem;
	line-height:1;
}

#ttl_area p{
	margin: 0;
	width: 340px;
	font-size: 1.4rem;
	font-weight: 300;
}

/*コンテンツエリア*/
#contents_area{
	margin: 50px auto 90px;
	max-width: 900px;
	width: 90%;
	font-size: 1.4rem;
	font-weight: 300;
}

h3{
	margin-bottom: 35px;
	font-size: 5.5rem;
	font-weight: 100;
	font-family: 'MS P明朝','ヒラギノ明朝','Times',serif;
	text-align: center;
	line-height: 1.15;
}

.h3_ttl{
	font-size: 45%;
	display: block;
	color: #FFA852;
	letter-spacing: 0.15rem;
	line-height: 1.5;
}


h4{
	margin-bottom: 35px;
	padding: 10px;
	width: 100%;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.15;
	text-align: center;
	letter-spacing: .5rem;
	background: #0057AA;
	color: #fff;
	display: block;
}

p.product_read{
	text-align: center;
	font-weight: bold;
	font-size: 1.5rem;
}


p{
	margin-bottom: 2em;
	font-size: 1.6rem;
	line-height: 2;
	text-align: justify;
}

a.opacity{
	transition-duration: .3s;
}

a.opacity:hover,
a.opacity:hover img{
	opacity: .7;
}

table{
	width: 100%;
	border: solid 1px #1B1311;
	text-align: center;
}

table caption{
	margin: 10px 0;
	text-align: left;
	font-weight: bold;
	font-size: 1.8rem;
}

th{
	border: solid 1px #1B1311;
	padding: 15px 5px;
	width: 100px;
	color: #1B1311;
	background: #F4D2CB;
	vertical-align: middle;
	white-space: nowrap;
}

.th_blue th{
	background: #cce5f5;
}

.th_yellow th{
	background: #fff2c2;
}

td{
	padding: 15px 5px;
	width: 100px;
	border: solid 1px #1B1311;
	vertical-align: middle;
	}

ol{
	counter-reset:number;
}

ol li{
	margin: 0 0 35px;
	padding-left: 65px;
	position: relative;
	text-align: justify;
	line-height: 2rem;
}

ol li:last-child{
	margin: 0;
}

ol li:before{
	/* 以下数字をつける */
	counter-increment: number;
	content: counter(number);
	/*以下数字のデザイン変える*/
	display:inline-block;
	width: 50px;
	height: 50px;
	background: #0057AA;
	color: #fff;
	font-size: 3rem;
	font-weight: 400;
	border-radius: 50%;
	position: absolute;	
	left: 0;
	top: 0;
	line-height: 4.5rem;
	text-align: center;
	}


.ul_01{
	width: 80%;
	margin: 0 auto;
}

.ul_01 li{
	font-size: 1.6rem;
	line-height: 2;
	list-style: disc;
}

.small{
	margin: 10px 0;
	font-size: 1.2rem;
	line-height: 1.5;
}

.wid80{
	width: 80%;
	margin: 0 auto;
	display: block;
}

.wid890px,
.wid600px{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	display: block;
}

.wid890px{
	max-width: 890px;
}

.margin_0{
	margin: 0;
}

.margin_btm5p{
	margin-bottom: 5%;
}

.margin_btm10p{
	margin-bottom: 10%;
}

.margin_btm40{
	margin-bottom: 40px;
}

.col2{
	margin: 5% auto; 
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.col2 > div{
	margin-bottom: 3%;
	width: 48%;
}

.text_center{
	text-align: center;
}

/*================== 蓄光とは　index ==================*/

#ttl_area{
		background-size: cover;
}

#ttl_area.chikuko{
	background-image: url("../images/chikko/h2_chikko.jpg");
}

#product_nav{
	margin-bottom: 115px;
	display: flex;
	justify-content: space-between;
}

#product_nav a{
	width: 30%;
	text-align: center;
	color: #3B4043;
}

#product_nav a:hover{
	opacity: .7;
}

#product_nav a img{
	transition-duration: .3s;
}

#product_nav a:hover img{
	transform: translateY(-5px);
}

a .nav-links{
	margin: 25px 0 0;
	font-weight: 600;
	font-size: 2.4rem;
	text-align: center;
}

a.kanban{
	display: block;
	margin-bottom:20px;
}

a.kanban:first-of-type{
	margin-top:40px;
}

/*================== 蓄光とは　蓄光とは？==================*/

#ttl_area.chikuko_detail{
	background-image: url("../images/chikko/h2_chikko_detail.jpg");
}

a .chikuko_ttl{
	margin: 0;
	padding: 5px;
	font-size: 3.5rem;
	font-family: 'MS P明朝','ヒラギノ明朝','Times',serif;
	color: #fff;
	text-align: center;
	background: #3B4043;
}

/*================== 蓄光とは　防災と減災==================*/

#ttl_area.chikuko_bousai{
	background-image: url("../images/chikko/h2_chikko_bousai.jpg");
}

.bousai_text_box{
	margin: 0 auto;
	padding: 20px;
	width: 100%;
	max-width: 740px;
	border: solid 1px #707070;
}

.bousai_text_box h4{
	margin-bottom: 20px;
	font-size: 2.3rem;
	font-weight: bold;
	text-align: center;
	color: #3B4043;
	background-color: inherit;
	letter-spacing: 1;
}

h4 .en{
	margin: 10px 0;
	font-weight: 300;
	font-size: 50%;
	display: block;
	letter-spacing: 0;
}

.bousai_text_box p{
	font-size: 1.4rem;
	text-align: center;
}

.market{
	margin: 0 auto;
	width: 100%;
	max-width: 520px;
	clear: both;
	font-size: 1.2rem;
}

.market dt{
	margin-bottom: 1em;
	font-weight: bold;
	float: left;
}

.market dd{
	margin-bottom: 1em;
	padding-left: 80px;
}

.bousai_links{
	margin: 5% 0;
	display: flex;
	justify-content: space-between;
}

.bousai_links > a{
	width: 32%;
	border: solid 1px #ADADAD;
	color: #3B4043;
}

.bousai_links h4{
	margin:20px auto;
	font-size: 2.3rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.25;
	letter-spacing: 0;
	color: #3B4043;
	background-color: inherit;
}

.bousai_links p{
	margin: 0 auto 15px;
	width: 85%;
	font-size: 1.2rem;
	line-height: 1.7;
}

/*================== 蓄光とは　製品一覧==================*/

#ttl_area.chikuko_products{
	background-image: url("../images/chikko/h2_chikko_product.jpg");
}

.product_links{
	margin: 10% 0 0;
}

.product_links li:not(:last-child){
	margin-bottom: 50px;
}

.product_links li img{
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
}

/*蓄光製品の詳細ページのスタイル*/
.product_feature{
	margin-bottom: 60px;
	padding: 25px 50px;
	border: solid 2px #0057AA;
	border-radius: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product_feature h4{
	margin: auto 0;
	padding: 80px 0 0;
	width: 	190px;
	height: 190px;
}

.product_feature ol{
	width: calc(100% - 220px);
	margin-left: auto;
}

.product img{
	margin: 0 auto 5%;
	width: 80%;
	text-align: center;
	display: block;
}

.performance_date{
	position: relative;
}

.performance_date p.date_unit{
	position: absolute;
	top: 0;
	right: 0;
}

/*高輝度蓄光亜鉛板*/
#ttl_area.chikuko_products_zinc{
	background-image: url("../images/chikko/h2_chikko_product_zinc.jpg");
}

/*高輝度蓄光アルミ板*/
#ttl_area.chikuko_products_aluminum{
	background-image: url("../images/chikko/h2_chikko_product_aluminum.jpg");
}

/*高輝度蓄光シート・テープ*/
#ttl_area.chikuko_products_sheet{
	background-image: url("../images/chikko/h2_chikko_product_sheet.jpg");
}

/*青緑色蓄光顔料*/
#ttl_area.chikuko_products_pigment{
	background-image: url("../images/chikko/h2_chikko_product_pigment.jpg");
}

/*蓄光石*/
#ttl_area.chikuko_products_stone{
	background-image: url("../images/chikko/h2_chikko_product_stone.jpg");
}

/*================== 蓄光とは　活用方法==================*/

/*電柱・電信柱を活用した避難誘導看板として*/
#ttl_area.chikko_use_pole{
	background-image: url("../images/chikko/h2_chikko_use_pole.jpg");
}

/*如何なる時も視認可能な避難場所看板として*/
#ttl_area.chikko_use_hinan{
	background-image: url("../images/chikko/h2_chikko_use_hinan.jpg");
}

/*暗闇や災害停電時暗闇での歩行補助として*/
#ttl_area.chikko_use_hojo{
	background-image: url("../images/chikko/h2_chikko_use_hojo.jpg");
}

h3.h3_ttl_use{
	font-size: 3.5rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
}

h3.h3_ttl_use:before{
	content: '□';
}

/*================== 蓄光とは　蓄光の歴史==================
.history dt{
	margin-bottom: 20px;
	font-size: 2rem;
	font-weight: 600;
}

.history dd{
	margin-bottom: 5%;
	font-size: 1.6rem;
	line-height: 2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.history dd > div{
	width: calc(100% - 200px);
}

.history dd figure{
	width:150px;
}

.history dd figure img{
	width:100%;
	height: auto;
}

.history dd figcaption{
	margin: 5px 0;
	font-size: 45%;
	line-height: 1.25;
	text-align: justify;
}*/


/*================== 大判ポスター印刷 ==================*/

/*大判ポスター印刷*/
#ttl_area.poster{
	background-image: url("../images/poster/h2_poster_index.jpg");
}

#ttl_area.pop{
	background-image: url("../images/poster/h2_poster_pop.jpg");
}

/*ご注文までの流れ*/
.flow{
    margin: 30px 0 0;
}

.flow li{
	margin-bottom: 50px;
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}


.flow li a{
	color: #093390;
	font-weight: bold;
}

.flow li a:hover{
	opacity: .7;
}

.flow .left{
	width: 130px;
	position: relative;
}

.flow .left img{
	position: relative;
	z-index: 1;
}

.flow .left:after{
	content: '';
	width: 70px;
	height: 70px;
	background-image: url(../images/poster/first_parts_bk@4x.png);
	background-size: 70px 70px;
	position: absolute;
	top: 30px;
	right: -27px;
}

.flow .right{
	padding:20px 5%;
    width: calc(100% - 150px);
    background: #ffeb00;
    box-sizing: border-box;
	position: relative;
}

.flow .right:after{
	content: '';
	margin: 0 auto;
	width: 100px;
	height: 25px;
	background-image: url(../images/poster/first_parts_09@4x.png);
	background-size: 100px 25px;
	position: absolute;
	bottom: -40px;
	right: 0;
	left: 0;
}

.flow li:last-child .right:after{
	content: none;
}

.flow .col_2{
	display: flex;
    justify-content: space-between;
}

.flow .col_2 a,
.img50.btm img{
	width: 48%;
}

.flow a.btm{
	margin: 10px 0 0;
    display: block;
}


.hasso dt{
	padding: 0 30px 2px;
	background: #FA0026;
	color: #fff;
	border-radius: 20px;
	float: left;
}

.hasso dd{
	margin:0 0 10px 150px;
}

.toiawase{
	padding: 10px;
	border: solid 1px #ddd;
	border-radius: 20px;
}

.toiawase p{
	margin: 0 auto;
	text-align: center;
	font-weight: 500;
}

.toiawase p:nth-of-type(1){
	font-size: 150%;
}

.busyo{
	font-size: 150%;
	line-height: 1.2;
}

/*POP制作*/
.pop_h4{
	color: #FD7E00;
	text-align: left;
	background-color: inherit;
	font-size: 3rem;
	letter-spacing: 0;
	border-bottom: solid 1px #333;
}

.pop_h5{
	margin-bottom: 5%;
	font-size: 3rem;
	font-weight: 400;
	line-height: 1.5;
}

.pop_list{
	padding: 0 0 0 100px;
	position: relative;
}

.pop_list:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #FD7E00;
}

.pop_list:after{
	content: '特徴';
	position: absolute;
	top: 16px;
	left: 11px;
	color: #fff;
	font-weight: 500;
}

.pop_list li{
	line-height: 1.5;
	list-style-type: disc;
}

.order_btm img{
	margin: 5% auto;
	max-width: 300px;
	width: 100%;
	display: block;
}


.pop_img{
	height: 360px;
	object-fit: contain;
}

/*================== NS事業 ==================*/
h3.ns{
	margin: 40px 0;
	padding-left: 20px;
	color: #004bb1;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: bold;
	font-size: 2.4rem;
	text-align: left;
	border-left: 5px solid #004bb1;
}
.ttl_small{
	font-size: 50%;
}
h4.ns,
p.ttl_ns{
	margin:20px 0 5px;
	color: #3b4043;
	background-color: inherit;
	font-weight: bold;
	text-align: left;
}
.more_link{
	margin: 0 0 10%;
	padding: 20px;
	width: 100%;
	border-radius: 30px;
	background-color: #dcd9d8;
	color: #3b4043;
	display: block;
	text-align: center;
	font-weight: bold; 
	font-size: 3rem;
}

#ttl_area.agri{
	background-image: url("../images/ns/h2_agricultural.jpg");
	background-position: right;
}
#ttl_area.underwater{
	background-image: url("../images/ns/h2_underwater.jpg");
	background-position: right;
}
#ttl_area.diesel{
	background-image: url("../images/ns/h2_diesel.jpg");
}


/*==========================================
 tb［481px-1000px以下］
===========================================*/

@media screen and (max-width: 1000px) {
	
h3{
	font-size: 4rem;
	}

}

/*==========================================
 sp［480px以下］
===========================================*/
@media screen and (max-width: 480px) {
	
	.pc_on{
	display:none;
	}
	
	.sp_on{
		display: block;
	}
	
	.col2.sp100 > div{
		width: 100%;
	}
	

	main{
		margin-top: 50px;
	}
	
	/*各種製品のh2*/
	#ttl_area{
	padding: 20% 10%;
	}
	
	#ttl_area p{
		width: 100%;
	}
	
	h3{
	font-size: 3.5rem;
	}
	
	p.product_read{
	text-align: justify;
	}
	
	table{
		display: block;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		border: none;
	}
	
	.ul_01{
		margin-left: 10%;
	}

	
	/*th{
		padding: 15px 5px 0;
		width: 100%;
		display: block;
		font-weight: bold;
	}

	td{
		padding: 10px 5px 15px;
		width: 100%;
		display: block;
		}
	
	/*================== 蓄光とは　index ==================*/

	#ttl_area.chikuko{
		background-image: url("../images/chikko/h2_chikko_sp.jpg");
	}
	
	#product_nav{
		margin-bottom: 15%;
	}
	
	#product_nav img{
		width:  80px;
		height: 80px;
	}
	
	a .nav-links{
		margin: 10% 0 0;
		font-size: 1.6rem;
	}
	
	a .chikuko_ttl {
    font-size: 2rem;
	}
	
	/*================== 蓄光とは　防災と減災==================*/

	#ttl_area.chikuko_bousai{
		background-image: url("../images/chikko/h2_chikko_bousai_sp.jpg");
	}
	
	.bousai_text_box p{
		text-align: justify;
	}
	
	.bousai_links{
		flex-direction: column;
	}

	.bousai_links > a{
		margin-bottom: 5%;
		width: 100%;
	}
	
	/*================== 蓄光とは　製品一覧==================*/

	#ttl_area.chikuko_products{
		background-image: url("../images/chikko/h2_chikko_product_sp.jpg");
	}
	
	.product_links li:not(:last-child){
		margin-bottom: 20px;
	}
	
	/*蓄光製品の詳細ページのスタイル*/
	.product_feature{
		padding: 5%;
		flex-direction: column;
	}

	.product_feature h4{
		margin: auto 0 10%;
		padding: 5px;
		width: 	100%;
		height: auto;
	}

	.product_feature ol{
		width: 100%;
		margin: 0;
	}
	
	.col2.product{
		flex-direction: column;
	}
	
	.col2.product > div{
		width: 100%;
	}
	
	.product img{
		margin: 5% auto;
	}
	
	.performance_date p.date_unit{
	position: static;
	}

	/*高輝度蓄光亜鉛板*/
	#ttl_area.chikuko_products_zinc{
		background-image: url("../images/chikko/h2_chikko_product_zinc_sp.jpg");
	}

	/*高輝度蓄光アルミ板*/
	#ttl_area.chikuko_products_aluminum{
		background-image: url("../images/chikko/h2_chikko_product_aluminum_sp.jpg");
	}

	/*高輝度蓄光シート・テープ*/
	#ttl_area.chikuko_products_sheet{
		background-image: url("../images/chikko/h2_chikko_product_sheet_sp.jpg");
	}

	/*青緑色蓄光顔料*/
	#ttl_area.chikuko_products_pigment{
		background-image: url("../images/chikko/h2_chikko_product_pigment_sp.jpg");
	}

	/*蓄光石*/
	#ttl_area.chikuko_products_stone{
		background-image: url("../images/chikko/h2_chikko_product_stone_sp.jpg");
	}
	
	/*================== 蓄光とは　活用方法==================*/

	h3.h3_ttl_use{
		font-size: 2.5rem;
	}
	
	/*================== 蓄光とは　蓄光の歴史==================

		.history dd > div{
			width: 100%;
		}

		.history dd figure{
			margin: 5% 0 0;
			width:100%;
		}

		.history dd figcaption{
			font-size: 70%;
		}*/
	
	/*================== 大判ポスター印刷 ==================*/

	/*大判ポスター印刷*/
	
	.flow li{
	    margin-bottom: 60px;
	}

	.flow .left,
	.flow .right{
		width: 100%;
	}
	
	.flow .left:after{
		content: none;
	}
	
	.flow .left img{
		margin: 0 auto 20px;
		width: 40%;
		display: block;
	}
	
	.flow .col_2{
		flex-direction: column;
	}
	
	.flow .col_2 a{
		width: 100%;
	}
	
	.img50.btm img{
		width: 100%;
	}
	
	.hasso{
		text-align: center;
	}
	
	.hasso dt{
		margin: 0 auto 5%;
		float: none;
		display: inline-block;
	}

	.hasso dd{
		margin:0 0 20px;
	}
	
	/*POP制作*/
	.pop-column-reverse{
		display: flex;
		flex-direction: column-reverse;
	}
	
}