@charset "UTF-8";

/* ------------------------------------------
 2021/03 東仙台クリーンセンター トップページRW

 [01]基本設定
 [02]ヘッダー・メインビジュアル
 [03]sec-01 一般法人ともに受け付けています
 [04]sec-02 こんなお悩みはありませんか？
 [05]sec-03 回収の流れ
 [06]sec-04 行政の許認可を得て営業しています/営業エリア
 [07]sec-05 こんなゴミはございませんか？
 [08]sec-06 まずはお気軽にお問い合わせください！
 [09]フッター
 [10]サブページ

------------------------------------------ */



/* ------------------------------------
 [01]基本設定
------------------------------------ */

html{
	font-size: 62.5%;
}

body{
	font-size: 1.6rem;
	font-family: 'Noto Sans JP',"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Arial", "Yu Gothic medium", "Meiryo", sans-serif;
	-webkit-print-color-adjust: exact;
}

img{
	max-width: 100%;
}

section{
	padding: 60px 0;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

.wrapper {
    overflow: hidden;
    width: 100%;
    height: auto;
}
.container {
    width: 1000px;
    height: auto;
    margin: 0 auto;
}

.w_limit_900{
	width: 100%;
	max-width: 900px;
}

.disp_pc{
	display: block;
}

.disp_sp {
        display: none;
}

@media screen and (max-width:1024px){
    .container {
        width: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media screen and (max-width:767px){
    .container {
        width: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
	
    .disp_pc {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    .container {
        width: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
	
	.disp_sp{
		display: block;
	}
}

/* -------------
フォント書式設定
--------------- */

h2{
	font-size: 2.6rem;
	line-height: 3.2rem;
	font-weight: bold;
	text-align: center;
}

p{
	line-height: 3rem;
}

/* --- フォントの色 --- */
.Fc_Blue{
	color: #008cd6;
}

.Fc_Pink{
	color: #ff1772;
}


/* -- フォントサイズ --- */

.Fz_36{
	font-size: 3.6rem;	
}



/* ------------------------------------
 [02]ヘッダー・メインビジュアル
------------------------------------ */


.headerbox_Center{
	padding: 0;
	font-size: 1.2rem;
	text-align: center;
    background-color: #008cd6;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #fff;
}

.headerbox_Center h1{
	line-height: 1.4rem;
}

.headerbox_Center p {
    color: #fff;
}


#headerBox {
	margin:0;
	padding: 15px 0 20px;
	width: 100%;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	
	justify-content: space-between;

	-ms-align-items: center;
	align-items: center;
}
.headerBox_Left {
	padding-right: 20px;
}

.headerBox_Left p{
	margin-bottom: 5px;
	color: #666666;
}

.headerBox_Right p{
	font-size: 1.8rem;
	font-weight: bold;
	color: #666666;
}
.headerBox_Right span{
	display: block;
	font-size: 1.4rem;
	text-align: center;
	margin-top: 10px;
}


/* ----------------
  ナビゲーション
 ----------------*/

#globalNavi {
    background-color: #008cd6;
	position: relative;
}
#globalNavi ul {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
#globalNavi ul li {
    width: 25%;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #008cd6;
    border-right: 1px solid #fff;
}

#globalNavi ul li:first-of-type{
	border-left: 1px solid #fff;
}

#globalNavi ul li a {
    color: #fff;
    display: block;
}


#mainVisual{
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	background: url("../image/top/bg_mv.jpg") no-repeat  center top;
	background-size: cover;
}

a[href^="tel:"] {
    pointer-events: none;
}

@media screen and (max-width:767px){
	.headerBox_Left h1 p{
		font-size: 1.4rem;
		line-height: 2rem;
	}
	
a[href^="tel:"] {
    pointer-events: auto;
}
}

@media screen and (max-width:480px){

header{		
	height: 90px;
}
	
header .container{
	z-index: 2;
}
	
	.headerBox_Right{
		display: none;
	}	
	
	#globalNavi{
		display: block;
		position: fixed;
		top: 0;
		left: -50vw;
		width: 50vw;
		height: 100vh;
		z-index: 50;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
	}
	
	#globalNavi.active{
		left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
	}
	
#globalNavi>.container{
    width: 100%;
    height: auto;
    margin: 0 auto;
	}

.headerBox_Left {
    width: 85%;
	padding-right:0px;
}

	.headerBox_Left h1{
		vertical-align: middle;
}

	.headerBox_Left h1 p{
		font-size: 1.2rem;
}
	
	.toggle_Btn{
	display: block;
	width: 15%;
	height: 90px;
	background: #e6f9ff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	}
	
.toggle{	
	position: absolute;
	display: block;
	margin: auto;
	top:0;
	bottom: 0;
	right:0;
	left: 0;
	width: 40px;
	height: 40px;
	color: #008cd6;
    cursor: pointer;
	z-index: -1;
}

.toggle::before{
	position: absolute;
	display: block;
	content: "MENU";
	margin: auto;
	left:0;
	right: 0px;
	top:30px;
	font-size: 1.2rem;
	font-weight: bold;
}

.toggle span{
	display: block;
    position: absolute;
    width: 35px;
    margin-top: 4px;
	left:0;
    border-bottom:solid 2px;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
  .toggle span:nth-of-type(1) {top: 0px;}
  .toggle span:nth-of-type(2) {top: 10px;}
  .toggle span:nth-of-type(3) {top: 20px;}
  .toggle.active span:nth-of-type(1) {
	top:10px;
    left:0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  /* 2番目と3番目のspanを45度に */
  .toggle.active span:nth-of-type(2),.toggle.active span:nth-of-type(3) {
	top:10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
	
#globalNavi ul {
    flex-direction: column;
	padding-top: 25px;
}
#globalNavi ul li {
	width: 100%;
	padding: 25px 0;
	border-right: none;
	border-top: 1px solid #fff;
	text-align: left;
	padding-left: 30px;
	position: relative;
}
#globalNavi ul li:first-of-type{
	border: none;
}
#globalNavi ul li:last-of-type{
	border-bottom: 1px solid #fff;
}
#globalNavi ul li::before{
	content: '';
	border-style: solid;
	border-width: 2px 2px 0 0;
	border-color: #d7e700;
	transform: rotate(45deg);
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 5px;
	width: 10px;
	height: 10px;
}

	.spNav_Bnr{
		margin-top: 30px;
	}
	
	.spNav_Bnr p{
		font-size: 1.4rem;
		line-height: 1.7rem;
		color: #ffffff;
		margin-bottom: 10px;
	}
	

/*SPナビを開いた時の背景の処理-----------*/

.spNav_Bg.active{
	position: fixed;
	width: 100vw;	
	height: 100%;
	background: #ffffff;
	opacity: 0.8;	
	z-index: 8;
}
#headerBox.active{
	display: none;
}
body.active{
	overflow: hidden; /*背景スクロール禁止*/
}
}



/* ------------------------------------
 [03]sec-01 一般法人ともに受け付けています
------------------------------------ */
#uketsuke{
	background: url("../image/top/bg_yellow.png") repeat;
}

#uketsuke h2{
	margin: 0 auto 25px;
	line-height: 3.8rem;
	padding-left: 0px;
	position: relative;
}


#uketsuke h2 span{
	font-size: 2.8rem;
	height: 40px;
	padding:0 10px;
	color: #ffffff;
}

#uketsuke h2 span:nth-child(1){
	background: #ff1772;
	position: relative;
}

#uketsuke h2 span:nth-child(1)::before{
	content: '';
	background: url("../image/top/icon_kira.png") 100% no-repeat;
	width: 80px;
	height: 70px;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: -75px;
}

#uketsuke h2 span:nth-child(2){
	background: #008cd6;
	margin-right: 5px;
}

.uketsuke_flex{
	margin-top: 50px;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
}

.uketsuke_flex li{
	text-align: center;
	position: relative;
	margin: 0 auto;
	width: 30%;
}

.uketsuke_flex li>div{
	border: solid 2px #e0e0e0;
	position: absolute;
	width: 210px;
	margin: auto;
	text-align: center;
	left: 0;
	right: 0;
}
.uketsuke_flex li>div::before,
.uketsuke_flex li>div::after{
	content: '';
	margin: auto;
	position: absolute;	
}
.uketsuke_flex li>div::before{
	top: 6px;
	left: 5px;
	background: #ffd202;
	width: 100%;
	height: 100%;
}
.uketsuke_flex li>div::after{
	bottom: -20px;
	left: 5px;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 9px 0 9px;
	border-color: #ffd202 transparent transparent transparent;
	z-index: 1;
}

.uketsuke_flex li>div>p{
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 2.4rem;
	background: #ffffff;
	padding:10px;
	position: relative;
}
.uketsuke_flex li>div>p::before,
.uketsuke_flex li>div>p::after{
	content: '';
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
}
.uketsuke_flex li>div>p::before{
	bottom: -15px;
	border-width: 15px 9px 0 9px;
	border-color: #e0e0e0 transparent transparent transparent;
	z-index: 2;
}
.uketsuke_flex li>div>p::after{
	bottom: -12px;
	border-width: 14px 7px 0 7px;
	/*border-width: 13.5px 8px 0 8px;*/
	border-color: #ffffff transparent transparent transparent;
	z-index: 2;
}
.uketsuke_flex li img{
	margin-top: 25px;
}
.kaitai{
	background: #ffffff;
	padding: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 345px;
	max-height: 70px;
	border: solid 1px #e0e0e0;
	margin: 25px auto 0;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	align-items: center;
}
.kaitai p{
	margin-left: 10px;
	font-weight: 700;
	font-size: 1.7rem;
}

@media screen and (max-width:767px){
#uketsuke h2{
	padding-left: 0px;
	z-index: 5;
}
	
#uketsuke h2 span{
	z-index: -1;	
	}
	
#uketsuke h2 span:nth-child(1)::before{
	left: -50px;
	top: -50px;
	transform: rotate(180deg);
	z-index: -2;

}
	
.uketsuke_flex{
	margin-top: 50px;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
}

.uketsuke_flex li{
	text-align: center;
	position: relative;
	margin: 0 auto;
	width: 45%;
}
}

@media screen and (max-width:480px) {
.uketsuke_flex li{
	width: 100%;
	margin-bottom:30px;
}
.uketsuke_flex li:last-of-type{
	margin-bottom:0px;
}	
}


/* ------------------------------------
 [04]sec-02 こんなお悩みはありませんか？
------------------------------------ */
#onayami{
	position: relative;
	    z-index: 2;	
	background: url("../image/top/bg_blue.png") repeat;
}
#onayami h2{
	position: relative;
	padding-bottom: 40px;
	margin-bottom: 15px;
}
#onayami h2::before{
	content: '';
	position: absolute;
	margin: auto;
	bottom: 15px;
	left: 0;
	right: 0;
	width: 70px;
	height: 5px;
	background: #ff1772;
}

.onayami_fukidashi{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 0px 10px 0;
	border: solid 4px #008cd6;
	background: #ffffff;
	border-radius: 15px;
    align-items: center;
	position: relative;
	margin-bottom: 40px;
}
.onayami_fukidashi:after{
	content: '';
	position: absolute;
	margin: auto;
	bottom: -30px;
	left: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 17.5px 0 17.5px;
	border-color: #008bd6 transparent transparent transparent;
}
.onayami_fukidashi>div{
	padding-top: 15px;
	width: 30%;
	align-self: flex-end;
}

.onayami_fukidashi ul{
	width: 70%;
	padding:25px 15px;
}

.onayami_fukidashi ul li{
	margin-bottom: 35px;
	margin-left: 50px;
	padding-left: 50px;
	position: relative;
}
.onayami_fukidashi ul li:last-of-type{
	margin-bottom: 0;
}
.onayami_fukidashi ul li::before{
	content: '';
	position: absolute;
	left: 0px;
	width: 26px;
	height: 21px;
	background: url("../image/top/icon_check.png") no-repeat 100% 100%;
}
.onayami_fukidashi ul li span{
	background: linear-gradient(transparent 50%, #ffe670 50%);
	font-weight: 700;
}

.onayami_kaiketsu{
	font-size: 4.6rem;
	line-height: 5.2rem;
	font-weight: 700;
	text-align: center;
	position: relative;
	padding: 0 50px;
    z-index: -1;
}
.onayami_kaiketsu::before,
.onayami_kaiketsu::after{
	content: '';
	position: absolute;
	margin: auto;
	background: url("../image/top/icon_kira.png") 100% 100%;
	width: 80px;
	height: 80px;
    z-index: -2;
}
.onayami_kaiketsu::before{
	left: 50px;
}
.onayami_kaiketsu::after{
	right: 60px;
}

@media screen and (max-width: 767px){
	
	.onayami_fukidashi{
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
	}	
.onayami_fukidashi>div{
	width:40%;
	margin: 0 auto;
	text-align: center;
}

.onayami_fukidashi ul{
	width: 100%;
	padding: 20px 0 30px;
	margin: 0 auto;
}
	
	.onayami_fukidashi ul li{
	width: 75%;
	margin-left: auto;
	margin-right: auto;
		}
	
.onayami_kaiketsu{
	font-size: 7vw;
	line-height: 9vw;
	padding: 0;
}
	
.onayami_kaiketsu .Fz_36{
	font-size: 5vw;
	line-height: 6vw;
}
.onayami_kaiketsu::before{
	left: 0px;
}
.onayami_kaiketsu::after{
	right: 0px;
}
}

@media screen and (max-width:480px) {
	.onayami_fukidashi ul li{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
		}
}
/* ------------------------------------
　[05]sec-03 回収の流れ
------------------------------------ */
#nagare{
	background: #fffae7;
}

#nagare h2{
	position: relative;
	padding-bottom: 40px;
	margin-bottom: 15px;
}
#nagare h2::before{
	content: '';
	position: absolute;
	margin: auto;
	bottom: 15px;
	left: 0;
	right: 0;
	width: 70px;
	height: 5px;
	background: #ff862e;
}

.nagareBox{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	margin-bottom: 50px;
}

.nagareBox li{
	width: 33%;
}

.nagareBox li>div{
	background: #ffffff;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	text-align: center;
	border: solid 5px #008cd6;
	position: relative;
	margin: 0 auto 15px;
}
.nagareBox li>div>img:nth-of-type(1){
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: -15px;
}
.nagareBox li div p{
	font-size: 2.1rem;
	font-weight: 700;
	margin-top: 60px;
	margin-bottom: 15px;
}
.nagareBox li:nth-of-type(1)>div::after,
.nagareBox li:nth-of-type(2)>div::after{
	content: '';
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: -50px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 16px 0 16px 18px;
	border-color: transparent transparent transparent #ffd102;
}

.nagareBox li>p{
	width: 90%;
	margin: 0 auto;
}

.okigaru_contact{
	text-align: center;
}

.okigaru_contact p{
	display: inline-block;
	position: relative;
	font-weight:700;
	font-size:3.8rem;
	margin-bottom:10px;
	line-height:4.8rem;
    color:#1a1a1e;
    text-shadow:#ffffff 2px 0px 0px, #ffffff -2px 0px 0px,
    #ffffff 2px 0px,  #ffffff -2px 0px,
    #ffffff 0px -2px, #ffffff 0px 2px,
    #ffffff 2px 2px , #ffffff -2px 2px,
    #ffffff 2px -2px, #ffffff -2px -2px,
    #ffffff 1px 2px,  #ffffff -1px 2px,
    #ffffff 1px -2px, #ffffff -1px -2px,
    #ffffff 2px 1px,  #ffffff -2px 1px,
    #ffffff 2px -1px, #ffffff -2px -1px,
	5px 5px 2px #999999;
	padding:0 50px;
}

.okigaru_contact p::before,
.okigaru_contact p::after{
	content: '';
	background: url("../image/top/icon_okigaruni.svg") no-repeat;
	width:55px;
	height: 88px;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
}
	
.okigaru_contact p::before{
	left: -50px;
}
.okigaru_contact p::after{
	right: -50px;
    transform: scale(-1, 1);
}

.okigaru_contact a img{
    filter:drop-shadow(5px 5px 5px rgba(100, 100, 111, 0.2))
}


@media screen and (max-width:767px){
.nagareBox{
	flex-direction: column;
}

.nagareBox li{
	width: 100%;
	position: relative;
	margin-bottom: 50px;
}
	
.nagareBox li:last-of-type{
	margin-bottom: 25px;
}
	
.nagareBox li:nth-of-type(1)>div::after,
.nagareBox li:nth-of-type(2)>div::after{
	display: none;
}
	
.nagareBox li:nth-of-type(1)::after,
.nagareBox li:nth-of-type(2)::after{
	content: '';
	position: absolute;
	margin: auto;
	top: auto;
	bottom: -35px;
	left: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 16px 0 16px 18px;
	border-color: transparent transparent transparent #ffd102;
	transform: rotate(90deg);
	z-index: 11;
}
	
.okigaru_contact>div{
	padding:0 50px;
}

.okigaru_contact p{
	padding: 0;
	font-size:5.5vw;
	line-height:7.5vw;
}
.okigaru_contact p::before,
.okigaru_contact p::after{
	height: 70px;	
}
}

@media screen and (max-width:480px){
.okigaru_contact p::before,
.okigaru_contact p::after{
	height: 60px;	
}
}


/* ------------------------------------
 [06]sec-04 行政の許認可を得て営業しています/営業エリア
------------------------------------ */
#kyoninka{
	background: url("../image/top/bg_green.png") repeat;
	margin: 0 auto;
}
.kyokaList{
	text-align: center;
	margin: 0 auto 60px;
}

.kyokaList h2{
	color: #00872d;
	margin-bottom: 25px;
}

.kyokaList ul{
	margin: 25px auto 0;
	padding: 30px;
	background: #fffae7;
	max-width: 640px;
	border-radius: 10px;
}
.kyokaList ul li{
	margin-bottom: 25px;
	text-align: left;
	padding-left: 30px;
	position: relative;
}
.kyokaList ul li:last-of-type{
	margin-bottom: 0;
}
.kyokaList ul li::before{
	content: '';
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	background: #ff7c17;
	width: 8px;
	height: 8px;
	border-radius: 8px;
}
.EigyouArea{
	margin: 0 auto;
}

.EigyouArea h2{
	position: relative;
	padding-bottom: 40px;
	margin-bottom: 15px;
}
.EigyouArea h2::before{
	content: '';
	position: absolute;
	margin: auto;
	bottom: 15px;
	left: 0;
	right: 0;
	width: 70px;
	height: 5px;
	background: #ff862e;
}

.areaBox{
	max-width: 800px;
	padding: 45px;
	background: #f1fdf2;
	border-radius: 10px;
	margin: 0 auto;
}
.areaBox>div{
	color: #00872d;
	font-size: 2.4rem;
	font-weight: 700;
	margin-bottom: 25px;
	text-align: center;
}
.areaBox>p:first-of-type{
	margin-bottom: 15px;
}

.areaBox p span.b-green{
	color: #00872d;
	font-weight: 700;
	font-size: 1.8rem;
}
br.br-768{display: none;}

@media screen and (max-width:768px){
    br.br-768{
        display: inline;
    }
}
@media screen and (max-width:767px){
.areaBox{
	padding: 45px 20px;	
}
}


/* ------------------------------------
 [07]sec-05 こんなゴミはございませんか？
------------------------------------ */
#konna{
	background: url("../image/top/bg_yellow.png") repeat;
	padding-bottom: 65px;
	text-align: center;
}

#konna h2{
	position: relative;
	display: inline-block;
	margin-bottom: 50px;
	padding-left: 75px;
}

#konna h2::before{
	content: '';
	background: url("../image/top/tatoeba.png");
	width: 130px;
	height: 108px;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: -55px;
}

.Gm_listBox{
	max-width: 800px;
	margin: 0 auto;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
}

.Gm_listBox li{
	width: 23%;
	background: #ffffff;
	margin: 1%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 15px;
	position: relative;
	width: 175px;
	height: 100px;
}
.Gm_listBox li img{
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
}
.Gm_listBox li p{
	margin-top: 50px;
}

.kaisyuu_truck{
	text-align: center;
	margin: 25px auto;
}

@media screen and (max-width:767px){


#konna h2{
	position: relative;
	display: inline-block;
	margin-bottom: 25px;
	padding-left: 0px;
	padding-top: 90px;
}
	
#konna h2::before{
	position: absolute;
	margin: auto;
	bottom: 85px;
	left: 0;
	right: 0;
}
	
.Gm_listBox{
	max-width: 100%;
	width: 100%;
}
	
.Gm_listBox li{
	width: 31%;
}
}

@media screen and (max-width:480px){
.Gm_listBox li{
	width: 48%;
}
}

/* ------------------------------------
 [08]sec-06 まずはお気軽にお問い合わせください！
------------------------------------ */
#contact{
	background: url("../image/top/bg_contact.jpg") no-repeat  center top;
	background-size: cover;
	position: relative;
	padding-top: 170px;
}

.contact_before{
	position: absolute;
	margin: auto;
	top: -65px;
	left: 0;
	right: 0;
}

#contact .okigaru_contact{
	margin: 15px 0 30px;
}

.eigyousho{
	background: #ffffff;
	padding: 25px 0;
	max-width: 780px;
	
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	
	margin: 0 auto;

}
.eigyousho li{
	padding:0 25px;
	text-align: center;
}

.eigyousho li:first-of-type{
	border-right: solid 1px #cccccc;
}

.eigyousho li>div{
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 15px;
}
.eigyousho li>p{
	margin-top: 15px;
	text-align: left;
}

.eigyousho li>iframe{
	width:300px;
	height:200px;
}
	

@media screen and (max-width:767px){
	.eigyousho{
		flex-direction: column;
	}
	
	.eigyousho li{
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		flex-direction: column;
	}
	
	.eigyousho li:first-of-type{
		margin-bottom: 30px;
		border: none;
	}
	
	.eigyousho li>iframe{
		width:100%;
	}
}


/* ------------------------------------
 [09]フッター
------------------------------------ */

footer{
	padding-top: 45px;
}

.footerBox {
    margin-bottom: 30px;
}
.footerBoxTop {
    margin-bottom: 40px;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	
	justify-content: space-between;
	-ms-align-items: center;
	align-items: center;
}

    .footerBoxTop_Left {
        width: 37%;
    }
    .footerBoxTop_Right {
		margin-left: 3%;
		width: 60%;
    }

.footerBoxTop_Right ul {
    display: flex;
    justify-content: space-around;
}
.footerBoxTop_Right li {
	display: block;
	width: 25%;
    margin-left: 0px;
    padding:5px 10px 5px 25px;
    border-right: 1px solid #cccccc;
	position: relative;
}
.footerBoxTop_Right li:first-of-type{
    border-left: 1px solid #cccccc;
}
.footerBoxTop_Right li::before{
	content: '';
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 8px;
	width: 8px;
	height: 8px;
	border-style: solid;
	border-width: 2px 2px 0 0;
	border-color: #008cd6;
	transform: rotate(45deg);
}

.footerBoxMiddle {
    margin-bottom: 20px;
}
.footerBoxMiddle p {
    font-size: 18px;
}

.footerBoxBottom p{
	padding-left: 1.6rem;
	position: relative;
}

.footerBoxBottom p span:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	display: block;
	width: 8px;
	height: 8px;
	background-color: #d7e700;
	border-radius: 5px;
}
.footerBoxBottom_Left {
    float: left;
    margin-right: 120px;
}
.footerBoxBottom_Right {
    float: left;
}
.copyright {
    background-color: #008cd6;
    font-size: 1.2rem;
    text-align: center;
    color: #ffffff;
}

#pageTop{
	display: block;
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background: #d7e700;
	z-index: 15;
}

#pageTop::after{
	content: '';
	border-style: solid;
	border-width: 2px 2px 0px 0px;
	border-color: #008cd6;
	transform: rotate(315deg);
	position: absolute;
	margin: auto;
	top: 5px;
	bottom: 0;
	left: 0;
	right: 0;
	width: 11px;
	height: 11px;
}

#pageTop a{
	width: 100%;
	height: 100%;
	position: absolute;
}

@media screen and (max-width:1024px){

    .footerBoxTop_Left img {
        width: 100%;
    }
    .footerBoxBottom_Left {
        margin-right: 30px;
    }
}
@media screen and (max-width:767px){
	.footerBoxTop_Left{
		width: 100%;
		max-width: 400px;
	}
	
	.footerBoxTop {
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	
    .footerBoxTop_Right {
		margin-left: 0%;
		width: 100%;
		margin-top: 25px;
    }

    .footerBoxBottom_Left {
        margin-bottom: 30px;
    }
}

@media screen and (max-width:480px){
.footerBoxTop_Right ul {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.footerBoxTop_Right li {
	width: 50%;
	border: none;
}
.footerBoxTop_Right li:first-of-type,
.footerBoxTop_Right li:nth-child(2){
	border: none;
	margin-bottom: 10px;
}
#pageTop{
	bottom: 70px;
	right: 10px;
}
	
	.sticky_footer{
		position: fixed;
		bottom: 0;
		height: 65px;
		background: rgb(255,124,23,1);
		z-index: 60;
		text-align: center;
		width: 100%;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-ms-align-items: center;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.sticky_footer div{
	width: 60%;
	max-width:450px;
	}

.sticky_footer div img{
	max-width: 100%;
	padding-right: 5px;
}

.sticky_footer p{
	width: 40%;
	color: #ffffff;
		font-size: 4vw;
	line-height: 5.5vw;
	font-weight: 700;
	text-align: center;
	padding: 1vw;
}
	
.copyright {
	padding-bottom: 60px;
}
}




/*=======================================

 [10]サブページ

=======================================*/

.page_navi {
    margin: auto;
    position: relative;
    font-size: 1.5rem;
    margin-top: 15px;
    margin-bottom:30px;
}

.page_navi li{
	display: inline-block;
	padding-right: 15px;
	position: relative;
}
.page_navi li::after{
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-style: solid;
	border-width: 2px 2px 0px 0px;
	border-color: #aaaaaa;
	transform: rotate(45deg);
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 4px;
}

.page_navi li:last-of-type::after{
	content: none;
}

.page_navi a{
	text-decoration: underline;
	color: #008cd6;
}

.title h2 {
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    background-color: #008cd6;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#subPage #contact{
	margin-top: 150px;
}


/*************************************
会社案内
*************************************/
#about {
    margin-bottom: 80px;
}
#about table {
    width: 90%;
    margin: 0 auto;
}
#about tr {
    width: 100%;
}
#about th {
    width: 20%;
    background-color: #ededee;
    border: 1px solid #989898;
    line-height: 1.5;
    padding-top: 10px;
    padding-bottom: 10px;
	text-align: center;
}
#about td {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #989898;
    line-height: 1.5;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.SekininBox{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
}

.SekininBox li{
	width: 30%;
}

.SekininBox li p{
	text-align: center;
}
.SekininBox li p span{
	padding-left: 10px;
}

@media screen and (max-width: 480px) {
    #about table {
        width: 100%;
    }
	
	.SekininBox{
		justify-content: center;
	}
	
.SekininBox li{
	width: 48%;
}
	.SekininBox li:first-of-type{
		margin-right: 4%;
		margin-bottom: 25px;
	}
}


/*************************************
産業廃棄物
*************************************/

.haikibutu_renraku div{
	position: relative;
	background: #ffffff;
    display: inline-block;
    padding: 0 80px;
}
.haikibutu_renraku div:before,
.haikibutu_renraku div:after {
    content: '';
    position: absolute;
	margin: auto;
    top: 0;
	bottom: 0;
    display: inline-block;
    width: 75px;
    height: 1px;
    background-color: #666;
}
.haikibutu_renraku div:before {
    left: 0;
}
.haikibutu_renraku div:after {
    right: 0;
}
.haibutuFlexbox {
    width: 100%;
}
.haibutuFlexbox ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
}
.haibutuFlexbox li {
    width: 32%;
    margin-bottom: 30px;
}
.haibutuFlexbox li img {
    width: 100%;
}
.haibutuFlexbox li p {
    text-align: center;
}
.haikibutuShushu {
    margin-bottom: 70px;
}
.haikibutuHoyusha {
    margin-bottom: 100px;
}

.haikibutu_renraku{
margin-bottom: 20px;
font-size: 2.1rem;
line-height: 2.8rem;
font-weight: 700; 
text-align: center;
}

@media screen and (max-width: 480px) {
    .haibutuFlexbox li {
        width: 48%;
        margin-bottom: 20px;
    }
    .haikibutuHoyusha {
        margin-bottom: 30px;
    }
    .haikibutuShushu {
        margin-bottom: 30px;
    }
.haikibutu_renraku div{
    padding: 0 10%;
}

.haikibutu_renraku div:before,
.haikibutu_renraku div:after {
    width: 9%;
}
}


/*************************************
保管･積替施設
*************************************/
#sisetsu {
    margin-bottom: 90px;
}
.sisetsuBox {
    width: 780px;
    margin: 0 auto;
    margin-bottom: 40px;
}
.sisetsuBox img{
    margin: 0 auto;
    margin-bottom: 20px;
    display: block;
}
.sisetsuBox iframe{
    margin: 0 auto;
    display: block;
}
	
@media screen and (min-width:768px) and ( max-width:1024px){
    .sisetsuBox {
        width: 100%;
    }
    .sisetsuBox img {
        width: 100%;
    }
}
@media screen and (min-width:481px) and ( max-width:767px){
    .sisetsuBox {
        width: 100%;
    }
    .sisetsuBox img {
        width: 100%;
    }
    .sisetsuBox iframe {
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 480px) {
    .sisetsuBox {
        width: 100%;
    }
    .sisetsuBox img {
        width: 100%;
    }
    .sisetsuBox iframe {
        width: 100%;
        height: auto;
    }
}