@charset "UTF-8";




/*各ページトップ写真*
***********************************/
.top-imagephoto-inner{
	max-width: 1200px;
	max-height: 150px;
	margin: 0 auto;
}

.top-imagephoto-inner img{
	position: relative;
	z-index: 0;	
}

.top-imagephoto-inner h2{
	width: 50%;
	position: absolute;
	z-index: 1;
	color: #fff;
	font-size: 26px;
	font-weight: 600;
	margin: 57px 0 0 100px;
}

.top-imagephoto-inner h2 span{
	color: #333;
}

.top-imagephoto-inner img{
	width: 1200px;
	height: 150px;
}



/*トップページ*
***********************************/
.slider-top{
	width: 100%;
	height: 400px;
	margin: 0 auto;
	background-color: #000;
	text-align: center;
}

.slider{
	width: 1200px;
	height: 400px;
	margin: 0 auto;
	position: relative;
}

.slider ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.slider ul li{
    width:1200px;
    height:400px;
    position:absolute;
	z-index: 0;
    top:0;
    left:0;
    animation-iteration-count:infinite;
    animation-duration:60s;
}

.slider ul li img{
    width:1200px;
    height:400px;
}

.slider ul li:nth-child(1){
    animation-name:slider;
    animation-delay:-3s;
}
.slider ul li:nth-child(2){
    animation-name:slider;
    animation-delay:11s;
    opacity:0;
}
.slider ul li:nth-child(3){
    animation-name:slider;
    animation-delay:23s;
    opacity:0;
}

.slider ul li:nth-child(4){
    animation-name:slider;
    animation-delay:35s;
    opacity:0;
}

.slider ul li:nth-child(5){
    animation-name:slider;
    animation-delay:47s;
    opacity:0;
}
 
@keyframes slider{
    0%{
        opacity:0;
    }
    20.83%{
        opacity:1;
    }
    33.33%{
        opacity:1;
    }
    45.83%{
        opacity:0;
    }
    100%{
        opacity:0;
    }   
}


.banner-table-all{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
	text-align: center;
}

.banner-table{
	display: table;
	table-layout: fixed;
	text-align: center;
	width: 900px;
	height: auto;
	margin: 0 auto;
}

.banner-table li{
	display: table-cell;
	vertical-align: middle;
}

.banner-table li:hover{
    opacity: 0.5;
}

.banner-table img{
	width: 275px;
	height: 180px;
}

.sns-group{
	width: 100%;
	height: 500px;
	text-align: center;
	background-color: #f5f5f5;
	padding: 50px 0;
}

.sns-group-inner{
	max-width: 1000px;
	width: 90%;
	height: 500px;
	overflow: hidden;
	clear: both;
	text-align: center;
	margin: 0 auto;
}

.facebook{
	max-width: 450px;
	width: 45%;
	float: left;
	margin-right: 50px;
}

.twitter{
	max-width: 450px;
	width: 45%;
	float: left;
}

.instagram{
	max-width: 1200px;
	height: 100px;
	margin: 0 auto;
	background-color: #f5f5f5;
}





/*法人トップページ*
***********************************/
.slider-top{
	width: 100%;
	height: 400px;
	margin: 0 auto;
	background-color: #000;
	text-align: center;
}

.slider2{
	width: 1200px;
	height: 400px;
	margin: 0 auto;
	position: relative;
}

.slider2 ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.slider2 ul li{
    width:1200px;
    height:400px;
    position:absolute;
	z-index: 0;
    top:0;
    left:0;
    animation-iteration-count:infinite;
    animation-duration:48s;
}

.slider2 ul li img{
    width:1200px;
    height:400px;
}

.slider2 ul li:nth-child(1){
    animation-name:slider;
    animation-delay:-3s;
}
.slider2 ul li:nth-child(2){
    animation-name:slider;
    animation-delay:11s;
    opacity:0;
}
.slider2 ul li:nth-child(3){
    animation-name:slider;
    animation-delay:23s;
    opacity:0;
}

.slider2 ul li:nth-child(4){
    animation-name:slider;
    animation-delay:35s;
    opacity:0;
}
 
@keyframes slider{
    0%{
        opacity:0;
    }
    20.83%{
        opacity:1;
    }
    33.33%{
        opacity:1;
    }
    45.83%{
        opacity:0;
    }
    100%{
        opacity:0;
    }   
}


.dx-banner{
	width: 100%;
	text-align: center;
	margin-bottom: 35px;
}

.dx-banner img{
	max-width: 96%;
	height: auto;
}

.banner-table2{
	display: table;
	table-layout: fixed;
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.banner-table2 li{
	display: table-cell;
	vertical-align: middle;
}

.banner-table2 li:hover{
    opacity: 0.5;
}

.banner-table2 img{
	width: 211px;
	height: 166px;
}

	
.topic-inner3 a{
	color: #64BEE8;
	text-decoration: underline;
}



/*採用情報トップ*
***********************************/
.data-top{
	width: 100%;
	margin: 30px auto 60px;
}

.data-top h3{
	text-align: center;
	font-size: 28px;
	font-weight: 300
}

.data-top p{
	margin-top: 10px;
	text-align: center;
	line-height: 2.3;
}

.data{
	width: 100%;
	height: auto;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.data h3{
	font-size: 25px;
	font-weight: 300;
	margin-bottom: 10px;
}

.data h3 span{
	font-size: 14px;
}

.data-l{
	width: 40%;
	height: auto;
	float: left;
}

.data-l img{
	width: 400px;
	height: 564px;
}

.data-r{
	width: 60%;
	height: auto;
	float: left;
}

.data-r img{
	width: 270px;
	height: 250px;
}

.data-r1 p,.data-r2 p{
	float: right;
	margin: 0 0 30px 30px;
}

.fukurikousei{
	width: 104%;
	height: auto;
	margin: 50px auto;
	clear: both;
	overflow: hidden;
}

.fukurikousei h3{
	font-size: 25px;
	font-weight: 300;
	margin-bottom: 10px;
}

.fukuri-inner{
	width: 25%;
	height: auto;
	float: left;
	margin-bottom: 40px;
}

.fukuri-inner h4{
	width: 79%;
	height: 45px;
	border: solid thin #B6B7B8;
	text-align: center;
	margin-bottom: 10px;
	padding: 8px;
	color: #002864;
	font-size: 18px;
	font-weight: 600;
}

.fukuri-inner p{
	width: 79%;
	text-align: justify;
	text-justify: inter-ideograph;
}



/*取扱商品*
***********************************/
.pr{
	width: 1000px;
	margin: 50px auto 15px;
	clear: both;
	overflow: hidden;
}

.pr-navi{
	width: 100%;
	clear: both;
	overflow: hidden;
}

.pr-navi ul{
	width: 100%;
	clear: both;
}

.pr-navi li{
	float: left;
}

.pr-navi img{
	width: 160px;
	height: 160px;
}

.pr-obi{
	width: 100%;
	height: 35px;
	margin-bottom: 15px;
	padding: 5px 0 5px 20px;
	background: #b4b4b5;
	clear: both;
	overflow: hidden;
	font-size: 18px;
}

.pr-obi a{
	color: #fff;
}

.img-pro{
	width: 800px;
	height: 220px;
	float: right;
}



/*事業領域*
***********************************/
.business{
	width: 1000px;
	margin: 50px auto;
	clear: both;
	overflow: hidden;
}

.business-copy{
	width: 570px;
	margin: 0 auto;
	text-align: justify;
	text-justify: inter-ideograph;
	font-size: 16px;
	line-height: 2;
}

.busi-obi{
	width: 100%;
	height: 35px;
	margin-bottom: 15px;
	padding: 5px 0 5px 20px;
	background: #b4b4b5;
	color: #fff;
	clear: both;
	overflow: hidden;
	font-size: 18px;
}

.busi-copy{
	width: 35%;
	float: left;
	text-align: justify;
	text-justify: inter-ideograph;
}

.busi-photo1,.busi-photo2,.busi-photo3,.busi-photo4{
	float: right;
}

.busi-photo1 img{
	width: 600px;
	height: 323px;
}

.busi-photo2 img{
	width: 600px;
	height: 180px;
}

.busi-photo3 img{
	width: 600px;
	height: 230px;
}

.busi-photo4 img{
	width: 600px;
	height: 175px;
}



/*パートナー企業*
***********************************/
.partner{
	width: 100%;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.pa-box {
	width: 232px;
	background: #001965;
	position: relative;
	overflow: hidden;
	float: left;
	margin: 15px 15px 0 0;
}

.pa-box img {
	display: block;
	width: 100%;
	opacity: 1;
	-webkit-transition: opacity 1.0s, transform 1.0s;
	transition: opacity 1.0s, transform 1.0s;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.pa-box:hover img {
	opacity: 0.2;
	-webkit-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}

.pa-overlay {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
	font-size: 12px;
	line-height: 1.5;
	-webkit-transition: opacity 1.0s;
	transition: opacity 1.0s;
}

.pa-box:hover .pa-overlay {
	opacity: 1;
}

.pa-contents {
	padding: 0 15px 5px;
	-webkit-transform: scale3d(0, 0, 1);
	transform: scale3d(0, 0, 1);
	-webkit-transition: transform 1.0s, color 1.0s;
	transition: transform 1.0s, color 1.0s;
}

.pa-box:hover .pa-contents {
	color: white;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.pa-rink a{
	font-size: 10px;
	margin-top: 30px;
	color: #fff;
}

.pa-title{
	font-size: 14px;
}

.pa-description {
	text-align: justify;
	text-justify: inter-ideograph;
}

.pa-award{
	font-size: 18px;
}

.pa-award span{
	font-size: 16px;
}

.pa-award a{
	color: #fff;
}

.pa-box2{
	width: 100%;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.pa-box2 img{
	float: left;
	margin: 40px 20px 0 0;
}

.pa-box2 img:hover{
	opacity: 0.5;
}

.pa-box2-other{
	width: 180px;
	height: 100px;
	float: left;
	margin: 40px 20px 0 0;
	position: relative;
}

.pa-box2-other h4{
	font-size: 16px;
	position: absolute;
	bottom: 0;
}


/*ショップ*
***********************************/
.shop{
	max-width: 1000px;
	overflow: hidden;
	clear: both;
	margin: 100px auto;
}

.shop h3{
	font-size: 20px;
	font-weight: 600;
}


.shop-inner{
	max-width: 450px;
	float: left;
}

.shop-inner2{
	max-width: 450px;
	float: right;
}

.shop-inner3{
	max-width: 450px;
	float: right;
}

.shop-inner-l{
	width: 150px;
	float: left;
	margin-right: 20px;
}

.shop-inner-r{
	max-width: 280px;
	float: left;
}

.shop-inner-hall{
	width: 100%;
	clear: both;
	overflow: hidden;
	margin-bottom: 10px;
}

.shop-inner-hall-l{
	width: 220px;
	float: left;
}

.shop-inner-hall-r{
	width: 220px;
	float: right;
	text-align: justify;
	text-justify: inter-ideograph;
}

.price img{
	width: 450px;
	height: 104px;
}

.otoiawase-botan p{
	width: 200px;
	height: auto;
	padding: 10px;
	margin-top: 10px;
	background-color: #9bc8dc;
	text-align: center;
}

.otoiawase-botan p a{
	color: #fff;
}

.otoiawase-botan p:hover{
	background-color: #1da1f2;
}


/*PB商品*
***********************************/
.greenk-main{
	max-width: 1000px;
	overflow: hidden;
	clear: both;
	margin: 50px auto 0;
}

.greenk-main-l{
	width: 55%;
	text-align: justify;
	text-justify: inter-ideograph;
	float: left;
}

.greenk-main-l h3{
	font-size: 20px;
	font-weight: 500;
	margin: 20px auto;
}

.greenk-main-l p{
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
}

.greenk-main-r{
	width: 40%;
	float: right;
}

.greenk-main-r img{
	width: 360px;
	height: 360px;
}

.pb-all{
	width: 1000px;
	height: auto;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.pb-inner{
	width: 100%;
	height: auto;
	clear: both;
	overflow: hidden;
}

.greenk{
	width: 45%;
	height: auto;
	float: left;
	margin: 60px 50px 0 0;
}

.greenk-l{
	height: 250px;
	float: left;
	margin-right: 20px;
}

.greenk-l-long,.greenk-l-longlong{
	height: 250px;
	float: left;
	margin-right: 20px;
}

.greenk-l img,.greenk-l-long img,.greenk-l-longlong img{
	width: 216px;
	height: 198px;
}

.greenk-r{
	text-align: justify;
	text-justify: inter-ideograph;
	height: auto;
}

.greenk-r h4{
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 5px;
}

.greenk-r p span{
	font-size: 12px;
	color: #64BEE8;
}


/*AWARD*
***********************************/
.award-year{
	width: 1000px;
	height: 50px;
	clear: both;
	background: #f0f0f0;
}

.award-year p{
	width: 100px;
	height: 20px;
	float: left;
	margin: 15px 0;
	border-right: solid 1px #555;
	text-align: center;
}

.award-top{
	margin: 50px auto 10px;
	font-size: 16px;
	font-weight: 700;
}

.award{
	width: 1000px;
	height: 160px;
	border-top: solid 1px #555;
	clear: both;
	overflow: hidden;
}

.award2{
	width: 1000px;
	height: 160px;
	border-top: solid 1px #555;
	border-bottom: solid 1px #555;
	clear: both;
	overflow: hidden;
	margin-bottom: 100px;
}

.award-inner1{
	width: 420px;
	float: left;
	margin: 25px auto;
}

.award-inner2{
	width: 260px;
	height: 110px;
	float: left;
	margin: 25px auto;
	border-left: solid 1px #555;
	padding: 30px;
 	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
	font-size: 12px;
}

.award-inner2 span{
	font-size: 16px;
	font-weight: 500;
}

.award-inner3{
	width: 320px;
	height: 110px;
	float: left;
	margin: 25px auto;
	border-left: solid 1px #555;
	padding-left: 30px;
	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
	text-align: justify;
	text-justify: inter-ideograph;
	font-size: 14px;
}

.award-inner4{
	width: 420px;
	float: left;
}

.award-inner4 img{
	width: 240px;
	float: left;
	margin: 25px auto;
}

.award-inner4 p{
	width: 150px;
	height: 110px;
	margin: 25px auto;
	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
	font-size: 14px;
}


/*info*
***********************************/
.info-year{
	max-width: 800px;
	width: 90%;
	height: 50px;
	clear: both;
	background: #f0f0f0;
	margin: 0 auto;
}

.info-year p{
	width: 100px;
	height: 20px;
	float: left;
	margin: 15px 0;
	border-right: solid 1px #555;
	text-align: center;
}

.info-top{
	max-width: 800px;
	width: 90%;
	margin: 50px auto 10px;
	font-size: 16px;
	font-weight: 700;
}

.info{
	width: 1000px;
	height: 50px;
	margin: 20px auto;
	clear: both;
	overflow: hidden;
}

.info-inner1{
	width: 100px;
	float: left;
}

.info-inner2{
	width: 150px;
	float: left;
	padding-left: 30px;
	border-left: solid 1px #555;
}

.info-inner3{
	width: 500px;
	float: left;
	padding-left: 30px;
	border-left: solid 1px #555;
}




/*新卒採用*
***********************************/
.fresh-gaiyo h3{
	font-size: 22px;
	font-weight: 500;
}

.fresh{
	width: 800px;
	height: auto;
	clear: both;
	overflow: hidden;
	margin: 20px auto 0;
	border-bottom: solid thin #c8c9ca;
	padding-bottom: 20px;
}

.fresh-head{
	width: 15%;
	float: left;
	font-weight: 600;
}

.fresh-contents{
	width: 85%;
	float: left;
	text-align: justify;
	text-justify: inter-ideograph;
}

.fresh-contents span,.recruitment p{
	color: #1da1f2;
	font-weight: 600;
}

.recruitment{
	margin: 50px auto;
}

.recruitment img{
	border: solid thin #1da1f2;
	margin-top: 10px;
}

.recruitment img:hover{
	box-shadow: 0 0 10px #87cefa;
}



/*トップメッセージ*
***********************************/
#wrapper-top{
	width: 100%;
	overflow: hidden;
	position: relative;
	height: 40vw;
	min-height: 1400px;
	background-image: url(img/topmessage/topmessage-back.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.top-main{
	width: 800px;
	margin: 50px auto;
	clear: both;
	overflow: hidden;
}

.top-l{
	width: 130px;
	height: 130px;
	float: left;
	margin-right: 20px;
	background-color: #231815;
	color: #fff;
	font-size: 12px;
	text-align: center;
	padding: 55px 0;
}

.top-r{
	width: 80%;
	float: left;
}

.top-r h2{
	font-size: 30px;
	font-weight: 400;
	margin-bottom: 30px;
	color: #fff;
}

.top-r p{
	line-height: 3.5;
	text-align: justify;
	text-justify: inter-ideograph;
	color: #fff;
}

.top-100th{
	width: 100%;
	height: 150px;
	background-color: #f0f0f0;
	text-align: center;
	padding: 60px;
}

.top-100th h2{
	font-size: 30px;
	font-weight: 600;
	color: #717071;
	line-height: 1;
}

.top-100th h2 span{
	font-size: 20px;
	color: #64BEE8;
}

.top-main2{
	width: 800px;
	margin: 20px auto 50px;
	clear: both;
	overflow: hidden;
}

.tsuyomi h3{
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 10px;
}

.corporate-philosophy{
	width: 100%;
	height: 150px;
	background-color: #231815;
	text-align: center;
	padding: 60px;
	color: #fff;
}

.corporate-philosophy a{
		color: #fff;
	}

.corporate-philosophy h2{
	font-size: 30px;
	font-weight: 600;
	color: #dbdcdc;
	line-height: 1;
}

.corporate-philosophy h2 span{
	font-size: 20px;
	color: #595757;
}

.corporate-philosophy2{
	width: 100%;
	height: 300px;
	background-color: #fff;
	text-align: center;
	padding: 40px;
	color: #717071;
	font-size: 18px;
	line-height: 2;
}


/*会社沿革*
***********************************/
.history-year{
	width: 100%;
	height: 80px;
	clear: both;
	background: #f0f0f0;
}

.history-year p{
	width: 12%;
	height: 20px;
	float: left;
	margin: 10px 0;
	border-right: solid 1px #555;
	text-align: center;
}

.history-top{
	margin: 50px auto 10px;
	font-size: 16px;
	font-weight: 700;
}

.history{
	width: 100%;
	height: auto;
	border-top: solid 1px #c8c9ca;
	clear: both;
	overflow: hidden;
	padding: 15px 0;
}

.history2{
	width: 100%;
	height: auto;
	border-top: solid 1px #c8c9ca;
	border-bottom: solid 1pt #c8c9ca;
	clear: both;
	overflow: hidden;
	padding: 15px 0;
}

.history-l{
	width: 20%;
	float: left;
	margin-right: 20px;
}

.history-l2{
	width: 28%;
	float: left;
	margin-right: 20px;
}

.history-r{
	width: 77%;
	float: right;
	text-align: justify;
	text-justify: inter-ideograph;
}

.history-r2{
	width: 68%;
	float: left;
}

.year{
	width: 80%;
	float: left;
}

.month{
	width: 20%;
	float: left;
	text-align: right;
}

.month2{
	width: 100%;
	text-align: right;
}


.history-copy{
	width: 70%;
	float: left;
}

.history-photo{
	width: 30%;
	float: right;
}

.history-photo img{
	float: right;
}

.history-inner-l{
	width: 70%;
	height: auto;
	float: left;
}

.history-inner-r{
	width: 25%;
	float: right;
	height: auto;
}

.history-inner-r img{
	float: right;
}


/*会社概要*
***********************************/
.outline{
	width: 800px;
	height: auto;
	clear: both;
	overflow: hidden;
	margin: 20px auto 0;
	border-bottom: solid thin #c8c9ca;
	padding-bottom: 20px;
}

.outline-head{
	width: 20%;
	float: left;
	font-weight: 600;
}

.outline-contents{
	width: 80%;
	float: left;
	text-align: justify;
	text-justify: inter-ideograph;
}



/*マルチカタログ*
***********************************/
.catalog-main{
	width: 100%;
	margin: 50px auto 10px;
	clear: both;
	overflow: hidden;
}

.catalog-l{
	width: 25%;
	height: auto;
	float: left;
	margin-right: 90px;
}

.catalog-l img{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.catalog-r{
	width: 60%;
	float: left;
}

.cata-shohin img{
	width: 800px;
	height: 150px;
}

.catalog-r h2{
	font-size: 30px;
	font-weight: 400;
	margin-bottom: 30px;
	color: #555;
}

.catalog-r h3{
	font-size: 22px;
	font-weight: 400;
	margin: 40px auto 15px;
	color: #555;
}

.catalog-r p{
	line-height: 3;
	text-align: justify;
	text-justify: inter-ideograph;
	color: #555;
}

.catalog-r-copy span{
	width: 300px;
	padding: 15px;
	background-color: #9bc8dc;
	color: #fff;
	text-align: center;
}

.catalog-r-copy span:hover{
	background-color: #1da1f2;
}

/*ポイントカード*
***********************************/
.card{
	width: 800px;
	clear: both;
	overflow: hidden;
	margin: 50px auto;
}

.card-l{
	width: 25%;
	float: left;
}

.card-r{
	width: 70%;
	float: left;
	line-height: 2;
}

.card-r h2{
	font-size: 28px;
}

.tomonokai{
	width: 800px;
	clear: both;
	overflow: hidden;
	margin: 0 auto 300px;
	padding: 30px;
	background-color: #002864;
	color: #fff;
}

.tomonokai h2{
	font-weight: 400;
}

.tomonokai-l{
	width: 28%;
	height: auto;
	margin-right: 20px;
	float: left;
}

.tomonokai-r{
	width: 68%;
	float: left;
}

.tomonokai-r1{
	border-left: solid 1pt #fff;
	padding-left: 45px;
}

.tomonokai-r2{
	width: 100%;
	background-color: #fff;
	margin-top: 30px;
	color: #002864;
	padding: 20px;
	line-height: 2;
}


/*メールフォーム*
***********************************/
.contact{
	width: 100%;
	text-align: left;
	margin: 0 auto;
}

.mailform{
	width: 100%;
	height: auto;
	margin: 50px auto;
	clear: both;
	overflow: hidden;
}

.mailform dl{
	width: 100%;
	height: auto;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.mailform dt{
	width: 25%;
	height: auto;
	float: left;
	margin: 30px 20px 0 0;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	clear: both;
	overflow: hidden;
}

.mailform dd{
	width: 60%;
	height: auto;
	margin: 25px auto;
	float: left;
}

.mailform select{
	border : 1px solid #cccccc;
	background : #fafafa;
	font-size : 100%;
	font-family : inherit;
	margin-top: 5px;
	color: #555;
}

.mailform input[type="text"]{
	width : 100%;
	height : 2.5em;
	padding : 2px 2%;
	border : 1px solid #cccccc;
	background : #fafafa;
	-webkit-appearance : none;
	font-size : 100%;
	font-family : inherit;
}

.mailform textarea{
	width: 100%;
	border : 1px solid #cccccc;
	background : #fafafa;
	-webkit-appearance : none;
	font-size : 100%;
	font-family : inherit;
	margin-top : 5px;
}

.required{
	font-size: 12px;
	background-color: #e60012;
	color: #fff;
	text-align: right;
	float: right;
	padding: 2px 10px;
}

.optional{
	font-size: 12px;
	background-color: #9bc8dc;
	color: #fff;
	text-align: right;
	float: right;
	padding: 2px 10px;
}

/* Chrome, Safari */
.mailform input::-webkit-input-placeholder,.mailform textarea::-webkit-input-placeholder{
    color: #dbdcdc;
}
 
/* Firefox */
.mailform input::-moz-placeholder,.mailform textarea::-moz-placeholder{
    color: #dbdcdc;
}
 
/* Firefox 18以前 */
.mailform input:-moz-placeholder,.mailform textarea:-moz-placeholder{
    color: #dbdcdc;
}
 
/* IE */
.mailform input:-ms-input-placeholder,.mailform textarea:-ms-input-placeholder{
    color: #dbdcdc;
}

.thanks{
	width: 100%;
	margin: 50px auto 500px;
}

.thanks-rink{
	width: 300px;
	margin-top: 50px;
	padding: 15px;
	background-color: #9bc8dc;
	color: #fff;
	text-align: center;
}

.thanks-rink:hover{
	background-color: #1da1f2;
}


/*ライブオフィス*
***********************************/
.livephoto{
	text-align: center;
	margin: 20px 0;
}

.livephoto img{
	max-width: 95%;
	height: auto;
	text-align: center;
	margin: 20px 0;
}

.livephoto-copy{
	text-align: j;
	margin: 20px 0;
}

.livephoto-copy{
	text-align: center;
	font-size: 16px;
}

.live-button{
	display: inline-block;
	margin: 10px auto;
     width: 350px;
     height:70px;
     line-height: 70px;
	font-size: 16px;
     text-decoration: none;
     text-align: center;
     background-color: #0463BF; /*ボタン色*/
     border-radius: 5px; /*角丸*/
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}

.live-button a{
	color: #fff;
}
.live-button:hover{
     background-color: #28B6F0; /*ボタン色*/
}

.live{
	margin: 50px auto;
	text-align: center;
	clear: both;
}



/*DX提案*
***********************************/	
.accordion {
  width: 100%;
}

.accordion img{
	max-width: 100%;
	width: 100%;
	height: auto;
}
	
.mt_S{
	margin-bottom: 80px;
}

/* inputのチェックボックスを非表示 */
.accordion-hidden {
  display: none;
}


/* アコーディオン中身部分 */
.accordion-inner {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  /* 表示速度の設定 */
  cursor: pointer;
}

/* チェックボックスにチェックが入ったら中身部分を表示する */
.accordion-hidden:checked+.accordion-open+.accordion-inner {
  height: auto;
  opacity: 1;
  padding: 10px;
}
/* ↑ここまで共通 */
	
	
.accordion-box {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 1s;
}

.accordion-hidden:checked+.accordion-open+.accordion-box {
  height: auto;
  opacity: 1;
  padding: 10px;
}
	

/*セキュリティソリューション*/
.dx-01-inner{
	width: 100%;
	height: auto;
	display: flex;
	margin-top: 20px;
}
	
.dx-01-inner2{
	width: 100%;
	height: auto;
	display: flex;
	margin-top: 20px;
}
	
.dx-01-l{
	width: 65%;
	height: auto;
	margin-right: 100px;
}
	
.dx-01-l img{
	width: 100%;
	height: auto;
	margin-right: 100px;
}
	
.dx-01-r{
	width: 25%;
	height: auto;
}
	
.dx-01-r p{
	width: 100%;
	height: 50px;
	padding: 7px;
	font-size: 24px;
	font-weight: bold;
	color: white;
	background-color: #2ea7e0;
	margin-bottom: 20px;
	text-align: center;
	border-radius:5px;
}
	
.dx-02{
	width: 45%;
	height: auto;
	text-align: center;
	margin: 0 30px;
}
	
.accordion-box h3,.dx-02 h3{
	font-size: 22px;
	line-height: 1.5em;
	margin-bottom: 10px;
}
	
.accordion-box-text{
	font-size: 16px;
	line-height: 1.7em;
	text-align: justify;
}
	
.h_2{
	font-size: 30px;
	color: #00a0e9;
}
	
.dx-rink{
	margin-top: 30px;
	text-align: right;
	font-size: 20px;
}
	
.dx-rink a:hover{
	color: #00a0e9;
}
	
	
/*情報漏洩対策ソリューション*/
.accordion-box-inner{
	width: 100%;
	display: flex;	
}
	
.accordion-box-inner-l{
	width: 63%;	
	margin-right: 20px;
}
	
.accordion-box-inner-r{
	width: 25%;	
}

.dx-02-inner{
	width: 100%;
	display: flex;
	margin-bottom: 50px;
	padding: 20px;
	background-color: #f5f2e9;
}
	
.dx-02-l{
	width: 75%;
	text-align: justify;
	margin-right: 20px;
}
	
.dx-02-l h3{
	font-size: 22px;
	color: #2ea7e0;
}
	
.dx-02-l p{
	font-size: 16px;
}
	
.dx-02-r{
	width: 23%;
}
	
.dx-02-r img{
	width: 95%;
	text-align: center;
}
	
.dx-02-inner2{
	width: 100%;
	margin-bottom: 50px;
	padding: 20px;
	background-color: #f5f2e9;
	display: flex;
	flex-wrap: wrap;
}
	
.dx-kounou{
	width: 50%;
	display: flex;
	margin: 10px auto;
}
	
.dx-kounou-l{
	width: 25%;
	margin-right: 10px;
}
	
.dx-kounou-l img{
	width: 100%;		
}

.dx-kounou-r{
	width: 70%;
	font-size: 16px;
}

	
.dx-02-inner3{
	width: 100%;
	margin-bottom: 50px;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
	
.dx-anzen{
	width: 32%;
	display: flex;
	margin: 5px;
	padding: 10px;
	background-color: #f5f2e9;
	border-radius:5px;
}
	
.dx-anzen-l{
	width: 20%;
	margin-right: 5px;
}
	
.dx-anzen-l img{
	width: 100%;
  	align-items: center;
}

.dx-anzen-r{
	width: 80%;
	font-size: 14px;
	text-align: justify;
}
	
.dx-anzen-r h4{
	color: #2ea7e0;
}
	
.anzen-c{
	color: #2ea7e0;
	text-align: center;
}
	
.dx-mamoru{
	width: 100%;
	display: flex;
	justify-content: center;
  	align-items: center;
	padding: 5px 10px 0;
	background-color: #f5f2e9;
}
	
.dx-mamoru img{
	width: 80%;
	padding: 5px;
}
	
.dx-mamoru p{
	text-align: justify;
}
	
.dx-mamoru h4{
	width: 21%;
	font-size: 20px;
	color: #e4007f;
}
	
/*会計ソリューション*/
.accordion-box-inner-l2{
	width: 80%;	
	margin-right: 20px;
}
	
.accordion-box-inner-r2{
	width: 15%;	
}
	
.accordion-box-inner-r2 img{
	width: 100%;	
}
	
.kaikei img{
	width: 98%;
	text-align: center;
	margin: 20px auto;
}

	
/*各種クラウドサービス*/
.accordion-box-inner3{
	width: 100%;
}
	
	
.dx-cloud{
	width: 100%;
	display: flex;
	margin: 20px auto;
	padding: 20px;
	background: linear-gradient(#bae3f9, #ffffff);
	align-items: flex-end;
}
	
.dx-cloud-l{
	width: 60%;
	margin-right: 5px;
}
	
.dx-cloud-l h4{
	font-size: 24px;
}
	
.dx-cloud-l p{
	font-size: 16px;
	text-align: justify;
}
	
.dx-cloud-l img{
	width: 90%;
	height: auto;
  	align-items: center;
}

.dx-cloud-r{
	width: 50%;
}
	
.dx-cloud-r img{
	width: 100%;
	height: auto;
}
	
.dx-cloud-other-in{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
	
.dx-cloud-other-in p{
	width: 31%;
	height: 50px;
	padding: 7px;
	font-size: 24px;
	font-weight: bold;
	color: white;
	background-color: #2ea7e0;
	margin: 10px;
	text-align: center;
	border-radius:5px;
}
	
	
.dx-cloud-otoiawase{
	width: 100%;
	text-align: center;
	margin: 80px auto;	
}
	

	
.dx-cloud-otoiawase-b{
	margin-top: 20px;
}
	
.dx-cloud-otoiawase-b a{
	padding: 15px 110px;
	background-color: #285fac;
	margin: 50px auto;
	border-radius:5px;
	font-size: 16px;
	color: #ffffff;
}


/*SDGs*
***********************************/	
	
.sdgs_top{
	width: 100%;
	height: auto;
	margin: 70px auto 100px;
	padding: 40px 70px;
	background-color: #f5f5f5;
}

.sdgs_top h3{
	margin-top: 10px;
	font-size: 30px;
	font-weight: 600;
	text-align: center;
	color: #00a0e9;
}
.sdgs_top p{
	margin-top: 15px;
	font-size: 18px;
	text-align: justify;
	line-height: 3;
}

.sdgs_about{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-around;
	margin-bottom: 50px;
}

.sdgs_about2{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-around;
	margin-bottom: 150px;
}

.sdgs_about_top{
	margin: 80px auto 30px;
	font-size: 26px;
	font-weight: 400;
	text-align: center;
	color: #333;
}

.sdgs_about_left,.sdgs_about_right{
	width: 50%;
}

.sdgs_about_left h4{
	font-size: 26px;
	font-weight: 400;
	color: #00a0e9;
}

.sdgs_about_left p{
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 400;
	color: #333;
	line-height: 2;
}

.sdgs_about_left p span{
	font-weight: 600;
}

.sdgs_about_right img{
	width: 100%;
}







@media screen and (min-width: 481px) {
	
/*voice*
***********************************/
.voice{
	width: 850px;
	height: auto;
	clear: both;
	overflow: hidden;
	margin: 50px auto;
}

.voice2{
	display: none;
}

.voicePush{
	width: 48%;
	height: auto;
	float: left;
	position: relative;
}

.voicePush2{
	width: 48%;
	height: auto;
	float: right;
	position: relative;
}

.voice-l{
	float: left;
}

.voice-r{
	width: 200px;
	height: 200px;
	padding: 20px;
	float: left;
	background: #002864;
	color: #fff;
}

.voice-r:hover{
	background: #96C8FF;
}

.voice-r p{
	height: 100px;
 	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
}

.position{
	height: 30px;
	border-top: solid 1px #fff;
}

.position span{
	font-size: 12px;
}
	
.block01{
	width: 820px;
	height: 330px;
/*	margin-top: 50px;*/
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p01.png);
	background-repeat: no-repeat;
	color: #555;
/*	position: relative;*/
	display: none;
}

	
.block02{
	width: 820px;
	height: 250px;
/*	margin-top: 50px;*/
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p02.png);
	background-repeat: no-repeat;
	color: #555;
/*	position: relative;*/
	display: none;
}
	
.block03{
	width: 820px;
	height: 330px;
/*	margin-top: 50px;*/
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p03.png);
	background-repeat: no-repeat;
	color: #555;
/*	position: relative;*/
	display: none;
}
	
.block04{
	width: 820px;
	height: 305px;
/*	margin-top: 50px;*/
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p04.png);
	background-repeat: no-repeat;
	color: #555;
/*	position: relative;*/
	display: none;
}
	
.block05{
	width: 820px;
	height: 420px;
/*	margin-top: 50px;*/
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p05.png);
	background-repeat: no-repeat;
	color: #555;
/*	position: relative;*/
	display: none;
}
	
.block06{
	width: 820px;
	height: 480px;
/*	margin-top: 50px;*/
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p12.png);
	background-repeat: no-repeat;
	color: #555;
/*	position: relative;*/
	display: none;
}
	
.block13{
	width: 820px;
	height: 250px;
/*	margin-top: 50px;*/
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p03.png);
	background-repeat: no-repeat;
	color: #555;
/*	position: relative;*/
	display: none;
}
	
	
.block01-inner,.block02-inner,.block03-inner,.block04-inner,.block05-inner,.block06-inner,.block13-inner{
	width: 98%;
	height: auto;
	margin: 20px auto;
	clear: both;
	overflow: hidden;
}

.block01 h3,.block02 h3,.block03 h3,.block04 h3,.block05 h3,.block06 h3,.block13 h3{
	font-size: 24px;
	font-weight: 500;
	color: #002864;
	border-bottom: solid thin #002864;
	margin-bottom: 15px;
	padding-bottom: 5px;
}

.wakate{
	width: 100%;
	margin: 100px auto;
}

.wakate-inner{
	width: 850px;
	clear: both;
	overflow: hidden;
	margin: 50px auto;
}

.wakate-l{
	width: 17%;
	float: left;
}

.wakate-r{
	width: 80%;
	height: auto;
	float: left;
}

.wakate-r dt{
	height: 85px;
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 20px;
	padding: 25px 0;
}

.wakate-r dt span{
	font-size: 20px;
	color: #96c8ff;
}
	
.wakate-r dt span:hover{
	color: #1da1f2;
}

.wakate-r dd{
	height: auto;
	display: none;
	line-height: 3;
}

.wakate-r dd img,.wakate-r dd p{
	display: inline-block;
	vertical-align: middle;
}
	


	
	
	
/*トップメッセージ*
***********************************/
	
.tsuyomi{
	margin: 20px auto;
	padding-left: 150px;
	color: #fff;
	line-height: 2.5;
}

	
/*マルチカタログ*
***********************************/
.catalog-r-copy{
	margin-top: 10px;
	padding-left: 290px;
	line-height: 3;
	text-align: justify;
	text-justify: inter-ideograph;
	color: #555;
}


/*各ページトップ写真*
***********************************/
.top-imagephoto{
	width: 100%;
	height: 150px;
	background-color: #000;
}
	
.news-topic{
	width: 100%;
	text-align: center;
	margin: 50px auto 10px;
}

.news-topic h3{
	font-size: 30px;
	line-height: 0.8;
	font-weight: 300;
}

.news-topic span{
	font-size: 14px;
}

.topic{
	width: 700px;
	height: auto;
	margin: 30px auto;
	clear: both;
	overflow: hidden;
}

.topic-inner1{
	width: 20%;
	height: 20px;
	float: left;
	margin: 10px auto;
	padding-left: 20px;
 	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
	font-size: 14px;
}

.topic-inner2{
	width: 15%;
	height: 20px;
	float: left;
	margin: 10px auto;
	border-left: solid 1px #555;
	padding-left: 20px;
 	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
	font-size: 14px;
}

.topic-inner3{
	width: 60%;
	height: 20px;
	float: left;
	margin: 10px auto;
	padding-left: 20px;
 	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
	font-size: 14px;
}

.topic-rink{
	width: 300px;
	height: auto;
	margin: 0 auto;
}

.topic-rink span{
	width: 300px;
	padding: 15px;
	background-color: #9bc8dc;
	color: #fff;
	text-align: center;
}

.topic-rink span:hover{
	background-color: #1da1f2;
}

.catalog-banner{
	max-width: 100%;
	height: auto;
	margin: 20px auto;
	clear: both;
	overflow: hidden;
	text-align: center;
}

.catalog-banner img{
	max-width: 490px;
	height: auto;
	margin: 0 10px;
}
	
.catalog-banner img:hover{
		opacity: 0.5;
	}
	
	
}


/*481〜960px以下に適用*
***********************************/
@media screen and (min-width:481px) and ( max-width:960px) { 
	
	#wrapper,.main.main2,main3,.nav-wrapper,.footer-wrapper,.sns-group{
		width: auto;
		margin: 0;
	}
	
	
	/*トップページ*/
	
.slider-top{
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-color: #000;
	text-align: center;
}

.slider,.slider2{
	width: 100%;
	height: auto;
	margin: 0 auto;
	position: relative;
}

.slider ul,.slider2 ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.slider ul li,.slider2 ul li{
    width:100%;
    height:auto;
    position:absolute;
	z-index: 0;
    top:0;
    left:0;
    animation-iteration-count:infinite;
    animation-duration:60s;
}

.slider ul li img,.slider2 ul li img{
    max-width:960px;
    max-height:320px;
	width: 100%;
	height: auto;
}
	
.dx-banner{
	max-width: 960px;
	width: 90%;
	margin: 350px auto 0;
}

	
.banner-table{
	display: table;
	table-layout: fixed;
	text-align: center;
	max-width: 960px;
	width: 90%;
	height: auto;
	margin: 300px auto 0;
}
	
.banner-table2{
	display: table;
	table-layout: fixed;
	text-align: center;
	max-width: 960px;
	width: 90%;
	height: auto;
	margin: 100px auto 0;
}

.banner-table li,.banner-table2 li{
	display: table-cell;
	vertical-align: middle;
}

	
.banner-table img,.banner-table2 img{
		max-width: 100%;
		height: auto;
	}
	
.sns-group{
	width: 100%;
	height: 300px;
	text-align: center;
	background-color: #f5f5f5;
	padding: 25px 0;
}
	
	
.sns-group-inner{
	max-width: 960px;
	width: 90%;
	height: 250px;
	overflow: hidden;
	clear: both;
	text-align: center;
	margin: 0 auto;
}
	
/*法人トップページ*/
.catalog-banner img{
	max-width: 100%;
	height: auto;
}
	
/*採用トップページ*/
.data{
	max-width: 960px;
	width: 90%;
	height: auto;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.data-l{
	max-width: 360px;
	width: 39%;
	height: auto;
	float: left;
}

.data-l img{
	width: 308px;
	height: 394px;
}

.data-r{
	max-width: 600px;
	width: 60%;
	height: auto;
	float: left;
}

.data-r img{
	width: 162px;
	height: 150px;
}
	
.data-l img,.data-r img{
		max-width: 100%;
		height: auto;
	}

.data-r1 p,.data-r2 p{
	float: right;
	margin: 0 0 30px 30px;
}

	
	
.fukurikousei{
	max-width: 960px;
	width: 90%;
	height: auto;
	margin: 50px auto;
	clear: both;
	overflow: hidden;
}

.fukurikousei h3{
	font-size: 22px;
	font-weight: 300;
	margin-bottom: 10px;
}

.fukuri-inner{
	width: 42%;
	height: auto;
	float: left;
	margin: 0 50px 30px 0;
	
}

.fukuri-inner h4{
	width: 100%;
	height: 40px;
	border: solid thin #B6B7B8;
	text-align: center;
	margin-bottom: 10px;
	padding: 6px;
	color: #002864;
	font-size: 16px;
	font-weight: 600;
}

.fukuri-inner p{
	width: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
}
	
.fukuri-inner img{
		max-width: 100%;
		height: auto;
		margin-left: 30px;
	}
	
/*取扱商品*
***********************************/
.pr{
	max-width: 960px;
	width: 90%;
	margin: 50px auto 15px;
	clear: both;
	overflow: hidden;
}

.pr-navi{
	width: 100%;
	clear: both;
	overflow: hidden;
	margin: 0 auto;
}

.pr-navi li{
	width: 16%;
	float: left;
}
	
.pr-navi img{
	width: 125px;
	height: 125px;
	max-width: 100%;
	max-height: auto;
}

.pr-obi{
	max-width: 960px;
	width: 100%;
	height: 28px;
	margin-bottom: 15px;
	padding: 2px 0 2px 20px;
	background: #b4b4b5;
	clear: both;
	overflow: hidden;
	font-size: 16px;
	margin: 0 auto 10px;
}

.pr-obi p{
	text-align: justify;
	text-justify: inter-ideograph;
	}

.img-pro{
	max-width: 100%;
	height: auto;
}
	
/*ショップ*
***********************************/
.shop{
	max-width: 960px;
	width: 90%;
	overflow: hidden;
	clear: both;
	margin: 50px auto;
}

.shop-inner{
	max-width: 300px;
	width: 100%;
	float: left;
}
	
.shop-inner2,.shop-inner3{
	max-width: 300px;
	width: 100%;
	float: right;
	margin: 0 40px 100px;
}
	
.hall-copy{
	max-width: 300px;
	width: 100%;
		
	}

.shop-inner-l{
	width: 150px;
}

.shop-inner-r{
	max-width: 300px;
	width: 100%;
}

.shop-inner-hall{
	max-width: 300px;
	width: 90%;
	clear: both;
	overflow: hidden;
	margin-bottom: 10px;
}

.shop-inner-hall-r{
	max-width: 300px;
	width: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
}
	
.price img{
	max-width: 300px;
	width: 90%;
	height: auto;
}
	
/*ポイントカード*
***********************************/
.card{
	max-width: 960px;
	width: 90%;
	clear: both;
	overflow: hidden;
	margin: 50px auto;
}

.card-l{
	width: 25%;
	float: left;
	margin-right: 20px;
}

.card-r{
	width: 60%;
	float: left;
	line-height: 2;
}

.tomonokai{
	max-width: 960px;
	width: 90%;
	clear: both;
	overflow: hidden;
	margin: 0 auto 300px;
	padding: 30px;
	background-color: #002864;
	color: #fff;
}

.tomonokai h2{
	font-weight: 400;
}

.tomonokai-l{
	width: 28%;
	height: auto;
	margin-right: 20px;
	float: left;
}

.tomonokai-r{
	width: 68%;
	float: left;
}

.tomonokai-r1{
	border-left: solid 1pt #fff;
	padding-left: 45px;
}

.tomonokai-r2{
	width: 100%;
	background-color: #fff;
	margin-top: 30px;
	color: #002864;
	padding: 20px;
	line-height: 2;
}	

/*PB商品*
***********************************/
.greenk-main{
	max-width: 960px;
	width: 90%;
	overflow: hidden;
	clear: both;
	margin: 50px auto 0;
}

.greenk-main-l{
	width: 60%;
	text-align: justify;
	text-justify: inter-ideograph;
	float: left;
	margin-right: 20px;
}

.greenk-main-l p{
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
}

.greenk-main-r{
	width: 35%;
	float: right;
}
	
.greenk-main-r img{
	width: 250px;
	height: 250px;
}
	
.pb-all{
	max-width: 960px;
	width: 90%;
	height: auto;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.pb-inner{
	width: 100%;
	height: auto;
	clear: both;
	overflow: hidden;
}

.greenk{
	width: 100%;
	height: auto;
	float: left;
	margin: 30px 50px 0 0;
}

.greenk-l{
	height: 220px;
	float: left;
	margin-right: 20px;
}

.greenk-l-long,.greenk-l-longlong{
	height: 220px;
	float: left;
	margin-right: 20px;
}

.greenk-l img,.greenk-l-long img,.greenk-l-longlong img{
	width: 216px;
	height: 198px;
}


/*事業領域*
***********************************/
.business{
	max-width: 960px;
	width: 90%;
	margin: 50px auto;
	clear: both;
	overflow: hidden;
}

.business-copy{
	max-width: 960px;
	width: 60%;
	margin: 0 auto;
	text-align: justify;
	text-justify: inter-ideograph;
	font-size: 16px;
	line-height: 2;
}

.busi-obi{
	max-width: 960px;
	width: 100%;
	height: 28px;
	margin-bottom: 15px;
	padding: 2px 0 2px 20px;
	background: #b4b4b5;
	clear: both;
	overflow: hidden;
	font-size: 16px;
	margin: 0 auto 10px;
}

.busi-copy{
	max-width: 960px;
	width: 100%;
	float: left;
	text-align: justify;
	text-justify: inter-ideograph;
}

.busi-photo1 img,.busi-photo2 img,.busi-photo3 img,.busi-photo4 img{
	max-width: 100%;
	height: auto;
	text-align: center;
	margin: 10px auto;
}	
	

/*新卒採用*
***********************************/
.fresh-gaiyo h3{
	max-width: 960px;
	width: 90%;
	font-size: 22px;
	font-weight: 500;
	margin: 0 auto;
}

.fresh{
	max-width: 960px;
	width: 90%;
	height: auto;
	clear: both;
	overflow: hidden;
	margin: 20px auto 0;
	border-bottom: solid thin #c8c9ca;
	padding-bottom: 20px;
}

.fresh-head{
	width: 25%;
	float: left;
	font-weight: 600;
}

.fresh-contents{
	width: 75%;
	float: left;
	text-align: justify;
	text-justify: inter-ideograph;
}

.fresh-contents span,.recruitment p{
	color: #1da1f2;
	font-weight: 600;
}

.recruitment{
	max-width: 960px;
	width: 90%;
	margin: 50px auto;
}	

.fresh-gaiyo p{
	max-width: 960px;
	width: 90%;
	margin: 0 auto;
}

	
/*会社概要*
***********************************/
.outline{
	max-width: 960px;
	width: 90%;
	height: auto;
	clear: both;
	overflow: hidden;
	margin: 20px auto 0;
	border-bottom: solid thin #c8c9ca;
	padding-bottom: 20px;
}

.outline-head{
	width: 25%;
	float: left;
	font-weight: 600;
}

.outline-contents{
	width: 75%;
	float: left;
	text-align: justify;
	text-justify: inter-ideograph;
}

	
/*メールフォーム*
***********************************/
.contact{
	max-width: 960px;
	width: 90%;	
	}
	
.mailform{
	max-width: 960px;
	width: 90%;
	height: auto;
	margin: 50px auto;
	clear: both;
	overflow: hidden;
}



/*DX提案*
***********************************/
.mt_S{
	padding: 0 20px;
}

.accordion img{
	max-width: 960px;
	width: 95%;
}
	
.accordion-box{
	max-width: 90%;
	width: 90%;	
	margin: 0 auto;
}

/*セキュリティソリューション*/
.dx-01-inner{
	width: 100%;
	height: auto;
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
}
	
.dx-01-l img{
	max-width: 100%;
	width: 100%;
	height: auto;
}
	
.dx-01-l{
	width: 100%;
	margin: 20px auto;
	text-align: center;
}
	
.dx-01-r{
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
}
	
.dx-01-r p{
	width: 100%;
	height: 50px;
	padding: 7px;
	font-size: 24px;
	font-weight: bold;
	color: white;
	background-color: #2ea7e0;
	margin-bottom: 20px;
	text-align: center;
	border-radius:5px;
}
	
	
.dx-02{
	width: 45%;
	height: auto;
	text-align: center;
	margin: 0 30px;
}
	
.dx-02 img{
	max-width: 100%;
	width: 100%;
	height: auto;
}
	
	
/*情報漏洩対策ソリューション*/
.accordion-box-inner-l{
	width: 60%;	
	margin-right: 20px;
}

.accordion-box-inner-r{
		width: 40%;
}	
	
.accordion-box-inner-r img{
	max-width: 100%;
	width: 100%;
	height: auto;	
}

.dx-02-inner{
	width: 100%;
	display: flex;
	margin: 20px auto 30px;
	padding: 20px;
	background-color: #f5f2e9;
}
	
.dx-02-l{
	width: 65%;
	text-align: justify;
	margin-right: 20px;
}
	
.dx-02-l h3{
	font-size: 22px;
	color: #2ea7e0;
}
	
.dx-02-l p{
	font-size: 16px;
}
	
.dx-02-r{
	width: 30%;
}
	
.dx-02-r img{
	max-width: 100%;
	width: 100%;
	height: auto;
}
	
.dx-anzen{
	width: 48%;
	display: flex;
	margin: 5px;
	padding: 10px;
	background-color: #f5f2e9;
	border-radius:5px;
}
	

.dx-mamoru{
	width: 98%;
	display: flex;
	justify-content: center;
  	align-items: center;
	padding: 10px;
	background-color: #f5f2e9;
}
	
.dx-mamoru img{
	max-width: 100%;
	width: 100%;
	padding: 5px;
}
	
.dx-mamoru h4{
	width: 45%;
	font-size: 20px;
	color: #e4007f;
}
	
/*会計ソリューション*/
.accordion-box-inner-l2{
	width: 80%;	
	margin-right: 20px;
}
	
.accordion-box-inner-r2{
	width: 15%;	
}
	
.accordion-box-inner-r2 img{
	width: 100%;	
}
	
.kaikei img{
	width: 98%;
	text-align: center;
	margin: 20px auto;
}

	
/*各種クラウドサービス*/
.accordion-box-inner3{
	width: 100%;
}
	
	
.dx-cloud{
	width: 100%;
	display: flex;
	margin: 20px auto;
	padding: 20px;
	background: linear-gradient(#bae3f9, #ffffff);
	flex-flow: column;
}
	
.dx-cloud-l{
	width: 100%;
	margin-right: 5px;
}
	
.dx-cloud-l img{
	max-width: 100%;
	width: 100%;
	height: auto;
  	align-items: center;
}

.dx-cloud-r{
	width: 100%;
}
	
.dx-cloud-r img{
	max-width: 100%;
	width: 100%;
	height: auto;
}
	
.dx-cloud-other-in{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
	
.dx-cloud-other-in p{
	width: 47%;
	height: 50px;
	padding: 7px;
	font-size: 24px;
	font-weight: bold;
	color: white;
	background-color: #2ea7e0;
	margin: 10px;
	text-align: center;
	border-radius:5px;
}

}





/*480px以下に適用*
***********************************/
@media screen and (max-width:480px) { 
	
	#wrapper,.main.main2,.main3,.nav-wrapper,.footer-wrapper,.sns-group{
		width: auto;
		margin: 0;
	}
	
	
/*トップページ*/
	
.slider-top{
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-color: #000;
	text-align: center;
}

.slider,.slider2{
	width: 100%;
	height: auto;
	margin: 0 auto;
	position: relative;
}

.slider ul,.slider2 ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.slider ul li,.slider2 ul li{
    width:100%;
    height:auto;
    position:absolute;
	z-index: 0;
    top:0;
    left:0;
    animation-iteration-count:infinite;
    animation-duration:60s;
}

.slider ul li img,.slider2 ul li img{
    max-width:480px;
    max-height:160px;
	width: 100%;
	height: auto;
}
	
	
.banner-table,.banner-table2{
	display: table;
	table-layout: fixed;
	text-align: center;
	max-width: 480px;
	width: 90%;
	height: auto;
	margin: 170px auto 0;
}

.banner-table li,.banner-table2 li{
	display: table-cell;
	vertical-align: middle;
}

	
.banner-table img,.banner-table2 img{
		max-width: 100%;
		height: auto;
	}
	
.sns-group{
	width: 100%;
	height: 300px;
	text-align: center;
	background-color: #f5f5f5;
	padding: 25px 0;
}
	
	
.sns-group-inner{
	max-width: 480px;
	width: 90%;
	height: 250px;
	overflow: hidden;
	clear: both;
	text-align: center;
	margin: 0 auto;
}
	
.facebook{
	max-width: 480px;
	width: 40%;
	height: auto;
	float: left;
}

.twitter{
	max-width: 480px;
	width: 40%;
	height: auto;
	float: left;
}
	

/*法人トップページ*/
.catalog-banner img{
	max-width: 100%;
	height: auto;
}

.catalog-banner img{
	text-align: center;
}
	
.topic{
	width: 470px;
	height: auto;
	margin: 30px auto;
	clear: both;
	overflow: hidden;
}

.topic-inner1{
	width: 40%;
	height: 20px;
	float: left;
	margin: 10px auto;
	padding-left: 20px;
	font-size: 14px;
	text-align: left;
}

.topic-inner2{
	width: 30%;
	height: 20px;
	float: left;
	margin: 10px auto;
	border-left: solid 1px #555;
	padding-left: 20px;
	font-size: 14px;
	text-align: left;
}

.topic-inner3{
	width: 90%;
	height: 20px;
	float: left;
	margin: 0 auto 10px;
	padding-left: 20px;
	text-align: left;
 	display: -webkit-flex;
 	display: flex;
 	-webkit-align-items: center;
 	align-items: center;
	font-size: 14px;
}

/*採用トップページ*/
.data-top{
	width: 90%;
	margin: 30px auto 60px;
}
	
.data-top h3{
	text-align: center;
	font-size: 18px;
	font-weight: 300
}

.data-top p{
	text-align: justify;
	text-justify: inter-ideograph;
}
	
.data{
	max-width: 480px;
	width: 90%;
	height: 800px;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.data h3{
	font-size: 18px;
	font-weight: 300;
	margin-bottom: 10px;
}

.data h3 span{
	font-size: 12px;
}

.data-l{
	width: 320px;
	height: 451px;
	float: left;
}

.data-l img,.data-r img{
	max-width: 100%;
	height: auto;
}

.data-r1 img,.data-r2 img{
	width: 150px;
	height: 150px;
}
	
.data-r1,.data-r2{
		width: 320px;
		height: auto;
		clear: both;
		overflow: hidden;
	}
	
.data-r1 p,.data-r2 p{
	float: right;
	margin: 0 10px 0 0;
}
	
	
.fukurikousei{
	max-width: 480px;
	width: 90%;
	height: auto;
	margin: 50px auto;
	clear: both;
	overflow: hidden;
}

.fukurikousei h3{
	font-size: 18px;
	font-weight: 300;
	margin-bottom: 10px;
}

.fukuri-inner{
	width: 45%;
	height: auto;
	float: left;
	margin: 0 15px 30px 0;
	
}

.fukuri-inner h4{
	width: 100%;
	height: 35px;
	border: solid thin #B6B7B8;
	text-align: center;
	margin-bottom: 10px;
	padding: 5px;
	color: #002864;
	font-size: 14px;
	font-weight: 600;
}

.fukuri-inner p{
	width: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
}
	
.fukuri-inner img{
		max-width: 100%;
		height: auto;
	}
	
	
/*各ページトップ写真*
***********************************/
.top-imagephoto{
	width: 100%;
	height: auto;
}

.top-imagephoto-inner{
	max-width: 480px;
	max-height: 50px;
	margin: 0 auto;
}

.top-imagephoto-inner img{
	max-width: 480px;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 0;	
}

.top-imagephoto-inner h2{
	width: 100%;
	height: auto;
	position: absolute;
	z-index: 1;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	margin: 10px 0 0 20px;
}
	

.info{
	max-width: 480px;
	width: 90%;
	height: 50px;
	margin: 20px auto;
	clear: both;
	overflow: hidden;
}

.info-inner1{
	width: 100px;
	float: left;
}

.info-inner2{
	width: 150px;
	float: left;
	padding-left: 30px;
	border-left: solid 1px #555;
}

.info-inner3{
	width: 500px;
	float: left;
	margin: 10px auto 50px;
}
	
/*取扱商品*
***********************************/
.pr{
	max-width: 480px;
	width: 90%;
	margin: 50px auto 15px;
	clear: both;
	overflow: hidden;
}

.pr-navi{
	max-width: 480px;
	width: 90%;
	clear: both;
	overflow: hidden;
	margin: 0 auto;
}

.pr-navi li{
	width: 30%;
	float: left;
}
	
.pr-navi img{
	width: 128px;
	height: 128px;
	max-width: 100%;
}

.pr-obi{
	max-width: 480px;
	width: 100%;
	height: 28px;
	margin-bottom: 15px;
	padding: 2px 0 2px 20px;
	background: #b4b4b5;
	clear: both;
	overflow: hidden;
	font-size: 16px;
	margin: 0 auto 10px;
}

.pr-obi p{
	text-align: justify;
	text-justify: inter-ideograph;
	}

.img-pro{
	max-width: 100%;
	height: auto;
}
	

	
/*ショップ*
***********************************/
.shop{
	max-width: 480px;
	overflow: hidden;
	clear: both;
	margin: 50px auto;
}

.shop-inner,.shop-inner2,.shop-inner3{
	max-width: 480px;
	width: 90%;
	float: left;
	margin: 0 40px 50px;
}
	
.hall-copy{
	max-width: 480px;
	width: 90%;
		
	}

.shop-inner-l{
	width: 150px;
}

.shop-inner-r{
	max-width: 480px;
	width: 90%;
}

.shop-inner-hall{
	max-width: 480px;
	width: 90%;
	clear: both;
	overflow: hidden;
	margin-bottom: 10px;
}

.shop-inner-hall-r{
	max-width: 480px;
	width: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
}
	
.price img{
	max-width: 480px;
	width: 90%;
	height: auto;
}

	
/*ポイントカード*
***********************************/
.card{
	max-width: 480px;
	width: 90%;
	clear: both;
	overflow: hidden;
	margin: 50px auto;
}

.card-l{
	width: 50%;
	float: left;
}

.card-r{
	width: 100%;
	float: left;
	line-height: 2;
}

.card-r h2{
	font-size: 28px;
}

.tomonokai{
	max-width: 480px;
	width: 90%;
	clear: both;
	overflow: hidden;
	margin: 0 auto 300px;
	padding: 30px;
	background-color: #002864;
	color: #fff;
}

.tomonokai-l{
	width: 100%;
	height: auto;
	margin: 0 20px 20px 0;
	float: left;
}

.tomonokai-r{
	width: 100%;
	float: left;
}

	
/*PB商品*
***********************************/
.greenk-main{
	max-width: 480px;
	width: 90%;
	overflow: hidden;
	clear: both;
	margin: 50px auto 0;
}

.greenk-main-l{
	width: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
	float: left;
}

.greenk-main-l h3{
	font-size: 18px;
	font-weight: 500;
	margin: 20px auto;
}

.greenk-main-l p{
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
}

.greenk-main-r{
	width: 100%;
	float: right;
	margin: 0 auto;
	padding: 30px;
}

.pb-all{
	max-width: 480px;
	width: 90%;
	height: auto;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.pb-inner{
	width: 100%;
	height: auto;
	clear: both;
	overflow: hidden;
	margin: 0 auto;
}

.greenk-main-r img{
	width: 300px;
	height: 300px;
}
	
.greenk{
	width: 100%;
	height: auto;
	float: left;
	margin: 20px auto;
}

.greenk-l{
	width: 40%;
	height: 170px;
	float: left;
	margin-right: 20px;
}
	
.greenk-l-long{
	width: 40%;
	height: 250px;
	float: left;
	margin-right: 20px;
}
	
.greenk-l-longlong{
	width: 40%;
	height: 270px;
	float: left;
	margin-right: 20px;
}
	
.greenk-l img,.greenk-l-long img,.greenk-l-longlong img{
	width: 151px;
	height: 138px;
}

.greenk-r{
	text-align: justify;
	text-justify: inter-ideograph;
	height: auto;
}

.greenk-r h4{
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 5px;
}

.greenk-r p span{
	font-size: 12px;
	color: #64BEE8;
}

	
	
/*事業領域*
***********************************/
.business{
	max-width: 480px;
	width: 90%;
	margin: 50px auto;
	clear: both;
	overflow: hidden;
}

.business-copy{
	max-width: 480px;
	width: 90%;
	margin: 0 auto;
	text-align: justify;
	text-justify: inter-ideograph;
	font-size: 16px;
	line-height: 2;
}

.busi-obi{
	max-width: 480px;
	width: 100%;
	height: 28px;
	margin-bottom: 15px;
	padding: 2px 0 2px 20px;
	background: #b4b4b5;
	clear: both;
	overflow: hidden;
	font-size: 16px;
	margin: 0 auto 10px;
}

.busi-copy{
	max-width: 480px;
	width: 100%;
	float: left;
	text-align: justify;
	text-justify: inter-ideograph;
}

.busi-photo1 img,.busi-photo2 img,.busi-photo3 img,.busi-photo4 img{
	max-width: 100%;
	height: auto;
	text-align: center;
	margin-top: 10px;
}

/*パートナー企業*
***********************************/
.partner{
	max-width: 480px;
	width: 90%;
	margin: 0 80px;
	clear: both;
	overflow: hidden;
	text-align: center;
}

.pa-box {
	max-width: 232px;
	background: #001965;
	position: relative;
	overflow: hidden;
	float: left;
	margin: 15px 15px 0 0;
}
	
.pa-box2{
	width: 100%;
	margin: 0 30px;
	clear: both;
	overflow: hidden;
}	

/*AWARD*
***********************************/
.award-year{
	max-width: 480px;
	width: 90%;
	height: 50px;
	clear: both;
	background: #f0f0f0;
	margin: 0 auto;
}
	
.award-top{
	max-width: 480px;
	width: 90%;
	margin: 50px auto 10px;
	font-size: 16px;
	font-weight: 700;
}

.award{
	max-width: 480px;
	width: 90%;
	height: 400px;
	border-top: solid 1px #555;
	margin: 0 auto;
}

.award2{
	max-width: 480px;
	width: 90%;
	height: 400px;
	border-top: solid 1px #555;
	clear: both;
	overflow: hidden;
	margin: 0 auto;
}

.award-inner1{
	width: 420px;
	margin: 25px auto;
}

.award-inner2 {
	max-width: 480px;
	width: 90%;
	height: auto;
	font-size: 12px;
	margin: 0 auto;
}

.award-inner3 {
	max-width: 480px;
	width: 100%;
	height: auto;
	font-size: 14px;
}

.award-inner4{
	width: 420px;
	float: left;
}
	
	
	
/*voice*
***********************************/
.voice{
	display: none;
}
	
.voice2{
	width: 350px;
	height: auto;
	clear: both;
	overflow: hidden;
	margin: 0 auto;
}

.voicePush3,.voicePush4{
	width: 100%;
	height: auto;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.voice-l{
	float: left;
}
	
.voice-l img{
	width: 159px;
	height: 180px;
	max-width: 100%;
}
	
.voice-r{
	width: 190px;
	height: 180px;
	padding: 15px;
	float: left;
	background: #002864;
	color: #fff;
}

.voice-r:hover{
	background: #96C8FF;
}

.voice-r p{
	clear: both;
	overflow: hidden;
	height: 80px;
}

.position{
	height: 20px;
	margin-top: 30px;
	padding-top: 10px;
	border-top: solid 1px #fff;
}
	
.position p{
		font-size: 12px;
}

.position span{
	font-size: 10px;
}
	
.block07-inner,.block08-inner,.block09-inner,.block10-inner,.block11-inner,.block12-inner,.block14-inner{
	width: 98%;
	height: auto;
	margin: 20px auto;
	clear: both;
	overflow: hidden;
}

.block07{
	width: 350px;
	height: 540px;
	margin: 0px auto 20px;
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p07.png);
	background-repeat: no-repeat;
	color: #555;
	/*position: relative;*/
	display: none;
}

.block08{
	width: 350px;
	height: 370px;
	margin: 0px auto 20px;
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p07.png);
	background-repeat: no-repeat;
	color: #555;
	/*position: relative;*/
	display: none;
}

.block09{
	width: 350px;
	height: 510px;
	margin: 0px auto 20px;
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p07.png);
	background-repeat: no-repeat;
	color: #555;
	/*position: relative;*/
	display: none;
}
	
.block10{
	width: 350px;
	height: 500px;
	margin: 0px auto 20px;
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p07.png);
	background-repeat: no-repeat;
	color: #555;
	/*position: relative;*/
	display: none;
}
	
.block11{
	width: 350px;
	height: 700px;
	margin: 0px auto 20px;
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p11.png);
	background-repeat: no-repeat;
	color: #555;
	/*position: relative;*/
	display: none;
}
	
.block12{
	width: 350px;
	height: 900px;
	margin: 0px auto 20px;
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p11.png);
	background-repeat: no-repeat;
	color: #555;
	/*position: relative;*/
	display: none;
}
	
.block14{
	width: 350px;
	height: 400px;
	margin: 0px auto 20px;
	padding: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 2;
	background-image: url(img/voice/fukidashi_p07.png);
	background-repeat: no-repeat;
	color: #555;
	/*position: relative;*/
	display: none;
}

.block07 h3,.block08 h3,.block09 h3,.block10 h3,.block11 h3,.block12 h3,.block14 h3{
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	color: #002864;
	border-bottom: solid thin #002864;
	margin-bottom: 15px;
	padding-bottom: 5px;
}

.wakate{
	max-width: 480px;
	width: 90%;
	margin: 100px auto;
}

.wakate-inner{
	max-width: 480px;
	width: 100%;
	clear: both;
	overflow: hidden;
	margin: 50px auto;
}

.wakate-l{
	width: 100%;
	float: left;
}

.wakate-r{
	width: 100%;
	height: auto;
	float: left;
}

.wakate-r dt{
	max-width: 480px;
	width: 100%;
	height: auto;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.wakate-r dt span{
	font-size: 20px;
	color: #9bc8dc;
}
	
.wakate-r dt span:hover{
	color: #1da1f2;
}

.wakate-r dd{
	max-width: 480px;
	width: 100%;
	height: auto;
	display: none;
	margin: 0 auto;
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
}

.wakate-r dd img,.wakate-r dd p{
	display: inline-block;
	vertical-align: middle;
}
	

/*新卒採用*
***********************************/
.fresh-gaiyo h3{
	max-width: 480px;
	width: 90%;
	font-size: 22px;
	font-weight: 500;
	margin: 0 auto;
}

.fresh{
	max-width: 480px;
	width: 90%;
	height: auto;
	clear: both;
	overflow: hidden;
	margin: 20px auto 0;
	border-bottom: solid thin #c8c9ca;
	padding-bottom: 20px;
}

.fresh-head{
	width: 25%;
	float: left;
	font-weight: 600;
}

.fresh-contents{
	width: 75%;
	float: left;
	text-align: justify;
	text-justify: inter-ideograph;
}

.fresh-contents span,.recruitment p{
	color: #1da1f2;
	font-weight: 600;
}

.recruitment{
	max-width: 480px;
	width: 90%;
	margin: 50px auto;
}

.fresh-gaiyo p{
	max-width: 480px;
	width: 90%;
	margin: 0 auto;
}
	
/*トップメッセージ*
***********************************/
#wrapper-top{
	width: 100%;
	overflow: hidden;
	position: relative;
	min-height: 1400px;
	background-image: url(img/topmessage/topmessage-back.jpg);
	background-repeat: no-repeat;
	background-position: 49% 70%;
	background-size: cover;
}
	
.top-main{
	max-width: 480px;
	width: 90%;
	margin: 30px auto;
	clear: both;
	overflow: hidden;
}

.top-l{
	width: 130px;
	height: 50px;
	float: left;
	margin-bottom: 20px;
	background-color: #231815;
	color: #fff;
	font-size: 12px;
	text-align: center;
	padding: 15px 0;
}

.top-r{
	width: 100%;
	float: left;
}

.top-r h2{
	font-size: 25px;
	font-weight: 400;
	margin-bottom: 30px;
	color: #fff;
}

.top-r p{
	max-width: 480px;
	width: 100%;
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
	color: #fff;
}

.top-100th{
	width: 100%;
	height: 100px;
	background-color: #f0f0f0;
	text-align: center;
	padding: 30px;
}

.top-100th h2{
	font-size: 20px;
	font-weight: 600;
	color: #717071;
	line-height: 1;
}

.top-100th h2 span{
	font-size: 16px;
	color: #64BEE8;
}

.top-main2{
	max-width: 480px;
	width: 100%;
	height: 1000px;
	margin: 20px auto 50px;
}

.tsuyomi{
	max-width: 480px;
	width: 90%;
	color: #fff;
	line-height: 2;
	margin: 0 auto;
	text-align: justify;
	text-justify: inter-ideograph;
}

.tsuyomi h3{
	max-width: 480px;
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	margin-top: 10px;
}

.corporate-philosophy{
	width: 100%;
	height: 80px;
	background-color: #231815;
	text-align: center;
	padding: 20px;
	color: #fff;
}
	
.corporate-philosophy a{
		color: #fff;
	}

.corporate-philosophy h2{
	font-size: 20px;
	font-weight: 600;
	color: #dbdcdc;
	line-height: 1;
}

.corporate-philosophy h2 span{
	font-size: 16px;
	color: #595757;
}

.corporate-philosophy2{
	width: 100%;
	height: 200px;
	background-color: #fff;
	text-align: center;
	padding: 40px;
	color: #717071;
	font-size: 14px;
	line-height: 2;
}

	
/*会社沿革*
***********************************/
.history-year{
	max-width: 480px;
	width: 90%;
	height: 80px;
	clear: both;
	background: #f0f0f0;
	margin: 0 auto;
}

.history-year p{
	width: 16%;
	height: 20px;
	float: left;
	margin: 10px 0;
	border-right: solid 1px #555;
	text-align: center;
}

.history-top{
	max-width: 480px;
	width: 90%;
	margin: 50px auto 10px;
	font-size: 16px;
	font-weight: 700;
/*	margin: 30px auto 0;*/
}

.history{
	max-width: 480px;
	width: 90%;
	height: auto;
	border-top: solid 1px #c8c9ca;
	clear: both;
	overflow: hidden;
	padding: 15px 0;
	margin: 0 auto;
}

.history2{
	max-width: 480px;
	width: 90%;
	height: auto;
	border-top: solid 1px #c8c9ca;
	border-bottom: solid 1pt #c8c9ca;
	clear: both;
	overflow: hidden;
	padding: 15px 0;
	margin: 0 auto;
}

.history-l{
	width: 45%;
	float: left;
	margin-right: 20px;
}

.history-l2{
	width: 45%;
	float: left;
	margin-right: 20px;
}

.history-r{
	width: 100%;
	float: left;
	text-align: justify;
	text-justify: inter-ideograph;
}

.history-r2{
	width: 100%;
	float: left;
}

.year{
	width: 80%;
	float: left;
}

.month{
	width: 20%;
	float: left;
	text-align: right;
}

.month2{
	width: 20%;
	text-align: left;
}


.history-copy{
	max-width: 480px;
	width: 100%;
	float: left;
}

.history-photo{
	width: 30%;
	float: left;
}

.history-photo img{
	float: left;
	margin-top: 10px;
}

.history-inner-l{
	width: 100%;
	height: auto;
	float: left;
}

.history-inner-r{
	width: 100%;
	float: right;
	height: auto;
}

.history-inner-r img{
	float: left;
	margin-top: 10px;
}	
	

/*会社概要*
***********************************/
.outline{
	max-width: 480px;
	width: 90%;
	height: auto;
	clear: both;
	overflow: hidden;
	margin: 20px auto 0;
	border-bottom: solid thin #c8c9ca;
	padding-bottom: 20px;
}

.outline-head{
	width: 37%;
	float: left;
	font-weight: 600;
}

.outline-contents{
	width: 63%;
	float: left;
	text-align: justify;
	text-justify: inter-ideograph;
}
	
/*マルチカタログ*
***********************************/
.catalog-main{
	max-width: 480px;
	width: 90%;
	margin: 50px auto 10px;
	clear: both;
	overflow: hidden;
}

.catalog-l{
	width: 60%;
	height: auto;
	float: left;
	margin-right: 90px;
}

.catalog-l img{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.catalog-r{
	width: 100%;
	float: left;
}

.catalog-r h2{
	font-size: 30px;
	font-weight: 400;
	margin-bottom: 30px;
	color: #555;
}

.catalog-r h3{
	font-size: 22px;
	font-weight: 400;
	margin: 40px auto 15px;
	color: #555;
}

.catalog-r p{
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
	color: #555;
}

.catalog-r-copy{
	margin-top: 10px;
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
	color: #555;
}

.catalog-r-copy span{
	margin-left: 20px;
	width: 300px;
	padding: 15px;
	background-color: #9bc8dc;
	color: #fff;
	text-align: center;
}

.catalog-r-copy span:hover{
	background-color: #1da1f2;
}
	
.cata-shohin img{
	max-width: 100%;
	height: auto;
}

/*メールフォーム*
***********************************/
.contact{
	max-width: 480px;
	width: 90%;
	text-align: left;
	margin: 0 auto;
}

.mailform{
	max-width: 480px;
	width: 90%;
	height: auto;
	margin: 50px auto;
	clear: both;
	overflow: hidden;
}

.mailform dl{
	width: 100%;
	height: auto;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.mailform dt{
	width: 100%;
	height: auto;
	float: left;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	clear: both;
	overflow: hidden;
}

.mailform dd{
	width: 100%;
	height: auto;
	float: left;
}

	
.news-topic{
	width: 100%;
	text-align: center;
	margin: 50px auto 10px;
}

.news-topic h3{
	font-size: 30px;
	line-height: 0.8;
	font-weight: 300;
}

.news-topic span{
	font-size: 14px;
}

.fresh-gaiyo {
	margin: 50px auto;
}

	
/*DX提案*
***********************************/

.accordion {
  width: 90%;
	margin: 0 auto;
}

.mt_S{
	margin-bottom: 40px;
	margin: 0 auto;
}	
	
.h_2{
	font-size: 16px;
}

.dx-01-inner2{
	flex-wrap: wrap;
}
	
.dx-02{
	width: 100%;
	margin-bottom: 20px;
}
	
.dx-02 img{
	max-width: 100%;
	width: 100%;
	height: auto;
}
	
.dx-01-inner{
	width: 100%;
	height: auto;
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
}
	
.dx-01-l{
	max-width: 100%;
	width: 100%;
}	
	
.dx-01-l img{
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
	
.dx-01-r{
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
}
	
.dx-01-r p{
	width: 100%;
	height: 50px;
	padding: 7px;
	font-size: 24px;
	font-weight: bold;
	color: white;
	background-color: #2ea7e0;
	margin-bottom: 20px;
	text-align: center;
	border-radius:5px;
}
	

	
	
/*情報漏洩対策ソリューション*/
.accordion-box-inner{
	flex-wrap: wrap;	
}
	
.accordion-box-inner-l{
	width: 100%;	
}
	
.accordion-box-inner-r{
	width: 100%;	
}
	
.accordion-box-inner-r img{
	max-width: 100%;
	width: 100%;
	height: auto;	
}
	
.dx-02-inner{
	flex-wrap: wrap;
}
	
.dx-02-l{
	width: 100%;
	margin: 0 auto;
}
	
.dx-02-r{
	width: 100%;
}
	
.dx-02-r img{
	max-width: 100%;
	width: 100%;
}
	
.dx-kounou{
	width: 100%;
	display: flex;
	margin: 10px auto;
}
	
.dx-anzen{
	width: 100%;
}
	
.dx-mamoru{
	width: 95%;
	padding: 10px;
	margin: 0 auto;
	flex-wrap: wrap;
}
	
.dx-mamoru img{
	max-width: 50%;
	width: 50%;
	height: auto;
}
	
.dx-mamoru h4{
	width: 50%;
}

/*会計ソリューション*/
.accordion-box-inner-l2{
	width: 100%;
}
	
.accordion-box-inner-r2{
	width: 30%;	
}
	
.kaikei img{
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 10px auto;
}
	
/*各種クラウドサービス*/
.dx-cloud{
	flex-wrap: wrap;
}
	
.dx-cloud-l{
	width: 100%;
}
	
.dx-cloud-l img{
	max-width: 100%;
	width: 100%;
	height: auto;
}
	
.dx-cloud-r{
	width: 100%;
}
	
.dx-cloud-other-in p{
	width: 100%;
}
	

/*法人のお客様*
***********************************/
.dx-banner{
	position: relative; top:100px;
}
	
.banner-table2{
	margin: 10 auto;
}
	
	
body {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
	
	
	
/*SDGs*
***********************************/	
	
.sdgs_top{
	max-width: 90%;
	height: auto;
	margin: 50px auto;
	padding: 30px;
}

.sdgs_about{
	width: 90%;
	height: auto;
	display: flex;
	flex-direction: column;
	margin: 50px auto;
}

.sdgs_about2{
	width: 90%;
	height: auto;
	display: flex;
	flex-direction: column;
	margin: 50px auto;
}

.sdgs_about_left,.sdgs_about_right{
	width: 100%;
}
	
	
}