@charset "UTF-8";
/* CSS Document */
body {
    font-family: 'Noto Sans JP', sans-serif;
}
.back-color {
    padding: 30px 0;
    background-color: var(--light-gray)
}
/* ヘッダー */


.header_contact img {
	display: block;
}
.header_contact picture * {
	border-radius: 20px;
	display: block;
}
/*.header_tel {
	margin: 0 10px 5px 0;
}*/
#nav-icon {
    display: none;
}
@media screen and (max-width:600px) {

	.header_content {
		display: block;
	}
	.header_contact {
		width: 90%;
		margin: 0 auto;
	}
	.header_contact picture * { 
        border-radius: 0;
        width: 100%;
        display: block;
    }
    
    .header_tel_sp {
        width:100%;
        margin: 0 0 5px 0!important;
	}
    .header_tel_sp img {
        width: 100% !important;

    }
    
}

.order1 {
    order: 1;
}
.order2 {
    order: 2;
}

/* --------トップイメージ ------------- */


  #topContent {
      background-image: url("../top_new/top-back.jpg");
      background-size: cover;
      background-position: bottom;
      box-sizing: border-box;
      position: relative;
      
    }

#topContent .top-logo {
    position: absolute;
    top:10px;
    left: 2.5%;
    width: 300px;
}
.top-nav-back {
     background-color: #007A8C;
    border-bottom: 2px solid #0C5651;
    margin: 0;
}


#logo {
    background-color: #102b83;
    padding: 20px;
    display: inline-block;
    position: absolute;
    left: 0;
    top:60px;
    max-width: 300px;
    width: 30%;
    
}
#logo img {
    display: block;
}

#spNav {display: none;}


#topNav {
    text-align: right;
    font-size: 1.1rem;
    float: right;
    /*position: absolute;*/
    top: 0px;
    right: 20px;
    background-color: none;
}

#topNav ul {
	display: inline-block;
	list-style: none;
    box-sizing: border-box;
}
#topNav ul li {
	margin: 20px ;
    display: inline-block;
    text-align: left;
}
@media all  and (max-width:1300px) {
    #topNav ul li {margin: 20px 8px;}
}
#topNav ul li a {
    color: #fff;
    text-decoration: none;
    display: inline;
    text-align: left;
    font-weight: bold;
    
}
#topNav ul li a:hover {
    color: #FFF3A6;
}
#topNav .contact {
    border-left:2px solid #fff;
    font-weight: bold;
    padding-left: 15px;
}

/* ドロップダウン*/ 


#topNav ul li a {
	transition-property: border;
	transition-duration: 0.5s;
	transition-timing-function: ease;
	transition-delay: 0s;
}
#topNav li { position: relative; }
#topNav li ul {
	position: absolute;
	margin: 0;
	left: 0;
	display: block;
	width: 270%;
	background-color:#777 !important;
    z-index: 999;
    font-size: 0.9em;
    font-weight: normal;
}
#topNav li li {
    max-height: 0;
    overflow: hidden;
    transition: .5s;
	margin: 0;
	display: block;
}
#topNav li li a {
    color: #fff;
    text-decoration: none;
    transition: .5s;
    padding: 5px 10px;
}
#topNav li li a:hover { background-color:#aaa;}
#topNav li:hover li {
    max-height: 4em;
    overflow: visible;
    
	
    
}
#topNav li:hover li a {
    padding: 5px 10px;
    display: block;
    border-bottom: 1px solid #ccc;
    transition: .5s;
}


/*追尾gNav*/
#topNav.fixed {
    position: fixed;
    top:0;
    right: 0;
    background-color: #333;
    display: block;
    flex:none;
    width: 100%;
    max-width: none;
    z-index: 65535;
    transition: .5s;
}
#topNav.fixed ul{
    margin: 0;
}
#topNav.fixed ul li a {color: #fff;}
#topNav.fixed ul li {
    margin-top: 10px;
    margin-bottom: 10px;
}
#topNav.fixed ul li li {
     background-color: #333;
    margin: 0;
}
/*---*/

/* .character:hover {
	transform: rotate(360deg);
	transition: 0.5s;
} */
.character2 { display: none; }
#tochigi-city {
    text-align: right;
}
#tochigi-city img {
    max-width: 160px;
}
#tochigi-city img:hover {opacity: 0.7;}
#tochigi-city figcaption {
    font-size: 0.9rem;
    color: #000733;
}

.tochigi {
    font-size: 0.85em;
    max-width: 200px;
}



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


/*トップ部分*/
.top-inner {
    width: 90%;
    margin: 0 auto 0;
    /*display: flex; */
    justify-content: space-between;
    margin-top: 60px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.top-inner img {
    display: block;
    text-align: center;
}

#topContent h1 {
    margin: 0 auto;
    text-align: center;
    max-width: 800px;
    display: block;
}
#topContent h1 img {
    margin-bottom: 30px;
}
#first-content-img {
    margin: 0 auto;
    max-width: 1000px;
}

#first-content-img img {
    margin-bottom: 20px;
}
#topContent h1 span {
    font-size: 3.5rem;
}
#topContent [class^="col-"] {
    margin-bottom: 0;
}
@media all and (max-width:1100px) {
    #topContent h1,
    #first-content-img {
        width: 80%;
        margin-bottom: 20px;
    }
}
#lead {
    max-width: 1200px;
    margin: 0 auto;
    width: 95%;
    
}
.lead-illust {
    width: 17%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5%;
}
.lead-text {
    max-width: 70%;
    padding: 20px;
    box-sizing: border-box;
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
    color: #484848;
    border-radius: 20px;
     vertical-align: middle;
    
  position: relative;
  min-width: 120px;
  background: #FFF;
  border: solid 3px #555;
}

.lead-text:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.lead-text:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}

.lead-text p {
  margin-bottom: 0em;
  padding: 0;
    line-height: 1.7em;
}
.lead-text [class^="col-"] {
    margin-bottom: 0;
}

/* -------メイン--------- */



main {
    max-width: 1580px;
    width: 90%;
    margin: 0 auto;
    
}
main .blue {
    color: #00009a;
}


.ex-link {
	display: flex;
	justify-content: flex-end;
	margin-left: 10px;
	margin-bottom: 5px;
    margin-top: 15px;
}
.ex-link a {
	margin: 0 10px;
	height: 50px;
}



h2.h2-1 {
    color: #aaa;
    font-size: 1.3rem;
    text-align: center;
    margin-top: 100px;
    font-weight: normal;
}

h2.h2-1 span{
    font-size: 2.3rem;
    color: #555;
    border-bottom: 1px solid #aaa;
    padding:0 10px;
    display: inline-block;
    font-weight: bold;
    
}


.link-btn {
    background-color: #00009d;
    padding: 10px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    margin: 20px 0;
    display: inline-block;
}
.link-btn:hover {
    opacity: 0.7;
        
}

.contact-link {
    margin: 50px 0;
    background-color: var(--light-gray);
    padding: 20px 0;
}
.contact-link a {
    background-color: var(--theme-color);
    padding: 15px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    max-width: 400px;
    transition-duration: .5s;
    text-align: center;
    
}

.contact-link a:hover {
    opacity: 0.7;
    transition-duration: .5s;
}

/*業務案内*/
.card-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card {
    width: 30%;
    display: block;
    text-decoration: none;
    color: #000;
    border:3px solid #ccc;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 20px;
    transition-duration: .5s;
}
.card:hover {
    background-color: #ECF4FF;
    transition-duration: .5s;
}

.card h3 {
    font-size: 1.5rem;
    margin: 10px 0 20px 0;
    color:  var(--theme-color);
}
#service .lead {
    font-size: 1.4rem;
    margin-bottom: 30px;
}


.maker {
	padding: 10px 5%;
	margin: 70px auto;
	border: 2px solid #ccc;
    max-width: 960px;
}
.maker h3 {
	border-bottom: 1px dotted #999;
	padding-bottom: 5px;
	text-align: center;
	margin: 10px 0;
    vertical-align: middle;
    font-size: 1.5rem;
}
.maker ul {
	display: flex;
	flex-wrap: wrap;
}
.maker li {
	display: inline-block;
	list-style: none;
	margin-right: 2em;
	margin-bottom: 1em;
	font-size: 1.2rem;
}
.maker p {
    font-size: 1.2rem;
}
/*会社案内*/
#company {
    margin: 20px -200%;
    padding: 40px 200%;
    background-color: var(--light-gray);
}
#company h3 {
    font-size: 1.5rem;
    color: var(--theme-color);
    margin:0 0 1em 0;
}
#company [class^="col-"] {
    margin: 0;
    padding: 0 5%;
}
.g-map {
    background-color: #fff;
    padding: 10px;
}
.cp-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 2em;
}
.cp-menu li {
    width: 30%;
    margin-bottom: 1em;
    list-style: none;
    text-align: center;
}
.cp-menu li a {
    background: var(--theme-color);
    padding: 10px 10px;
    display: block;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.1rem;
    
    
}

#map {
    width: 95%;
    margin: 30px auto;
}
#map dt {
    font-weight: bold;
}
#map dd {
    margin-bottom: 1em;
}

.illist { float: right; }

/* コンプレッサーについて */
#tips {
    margin: 0 auto;
    width: 95%;
    background-color: var(--light-gray);
    padding: 20px 5%;
    box-sizing: border-box;
}
.tips-link {
    text-align: center;
    width: 23%;
    margin-bottom: 0px;
}
.tips-link a {
    text-align: center;
    text-decoration: none;
    color: var(--theme-color);
    font-weight: bold;
}
.tips-link a img { border: 1px solid #ccc;}
.tips-link a:hover {opacity: 0.6;}

/*お客様紹介*/
#customer {
    max-width:960px;
    margin: 100px auto;
    border: 2px solid #ccc;
    padding: 20px;
}
#customer h2 {
    margin: 0 0 20px 0;
}
#customer a {
	display: block;
	width: 30%;
	margin: 0 1.5% 30px;
}
#customer a:hover{
	opacity: 0.7;
}
#customer a.no-link:hover {
    opacity: 1;
}
#customer .flex {
	margin:0 auto;
}


/**/

#support2 h2 {
    text-align: center;
    font-weight: bold;
    color: #ed8800;
    font-size: 2.1rem;
}
#support2 .koumoku {
    font-size: 1.3rem;
    color: #fff;
    background-color: #0067da;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 10px;
    text-align: center;
}
#support2 .flex {
    justify-content: space-between;
}
#support2 .flex .col-33 {
    border: 1px solid #bbb;
    padding: 20px 10px;
    box-sizing: border-box;
}
#support2 h3 {
    margin: 0 0 20px 0;
    font-size: 1.5rem;
    color: #0067da;
    
}


.toiawase2 {
	text-align: center;
	margin-top: 50px;
	font-size: 1.25rem;
	
}
.toiawase2 a img {
	max-width: 90%;
}
.toiawase2 a:hover {
	opacity: 0.7;
}
/*新着情報*/
.news {
    padding: 10px 2.5%;
    margin:0 0 50px;
}
.news .inner {
	max-width: 900px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 4px double #ccc;
    padding: 30px;
    width: 100%;
}

.news table { width: 100%; }
.news td {
	font-size: 0.9rem;
	vertical-align: top;
	padding: 5px 10px;
	border-bottom: 1px solid #ccc;
	
}
/*エリア*/
.area {
	margin: 50px auto;
    width: 80%;
    max-width: 1000px;
	border: 2px solid #ccc;
	padding: 10px 20px;
	box-sizing: border-box;
}
.area h2 {
	margin: 0 0 10px 0;
}
.area_img {
	margin-right: 10px;
	width: 30%;
}

@media screen and (max-width:1100px) {
     /*----------　スマホメニュー --------------*/
   
    #topNav {
        display: none !important;
    }
    #topContent .top-logo  {
        display: none;
    }
	#spNav { display: block; }
    
    #logo {
        top: 30px;
    }
    .top-inner {
        margin: 0 auto;
    }
    
    .top-text {
        margin: 120px auto 0px;
    }
    
	#g_nav { display: none !important; }
    

	
	/*ナビメニューのスタイルを指定*/
	nav.spNav {
		z-index: 2; /*重ね順を変更*/
		background: #fff;/*背景を白にする*/
		color: #000; /*文字色を黒にする*/
		text-align: center; /*テキストを中央揃え*/
		width: 100%; /*全幅表示*/
		transition: all 0.6s; /*アニメーションの時間を指定*/
		display: block;
		max-height: 0;
		overflow: hidden;

	}

	nav.spNav ul{
		background: #fff; 
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}

	nav.spNav ul li{
		list-style-type: none;
		padding: 0;
		width: 100%;
		border-top: 1px solid #bbb;
	}
	nav.spNav ul li:last-child {
		border-bottom: 1px solid #bbb;
	}

	nav.spNav ul li a {
		display: block;
		color: #000;
		text-decoration: none;
		padding: 10px 0;
	}
	nav.spNav ul li span.directory {
		display: block;
		background-color: #4970B7;
		color: #fff;
	}
	nav.spNav ul li ul {
		width: 90%;
		margin: 10px auto 20px;
		border-left: solid 1px #bbb;
		border-right: solid 1px #bbb;
	}
	
	
	header .inner {
		position: relative;
	}
    
	/*トグルボタンが押されたときに付与するクラス*/
	nav.spNav.active{
		max-height: 750px;
	}

	/*トグルボタンのスタイルを指定*/
	.Toggle {
		display: block;
		width: 42px;
		height: 42px;
		cursor: pointer;
		z-index: 3;
		border: 1px solid #999;
		background-color:  #fff;
		border-radius: 5px;
		margin: 10px;
		right: 0;
		bottom: 5px;
    
	}

	.Toggle span {
		display: block;
		position: absolute;
		width: 30px;
		border-bottom: solid 3px #000;
		-webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
		-moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
		transition: .35s ease-in-out;			/*変化の速度を指定*/
		left: 6px;
	}

	.Toggle span:nth-child(1) {
		top: 9px;
	}

	.Toggle span:nth-child(2) {
		top: 18px;
	}

	.Toggle span:nth-child(3) {
		top: 27px;
	}

	/* 最初のspanをマイナス45度に */
	.Toggle.active span:nth-child(1) {
		top: 18px;
		left: 6px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/* 2番目と3番目のspanを45度に */
	.Toggle.active span:nth-child(2),
	.Toggle.active span:nth-child(3) {
		top: 18px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
        #nav-icon {
		float: none;
		top: 10px;
		right: 5%;
        z-index: 65535;
        display: flex;
        justify-content: flex-end;
	}
    .Toggle {
        position: relative;
        float: none;
    }
    .toiawase-icon {		
        width: 50px;
        margin-top:5px;
        margin-right: 10px;
    }

    /*-----------*/
}

/*　タブレット　*/
@media screen and (max-width:800px) {
    * {font-size: 15px;}
    
    
    [class^="col-"]
	{
		width: 100% !important;
		margin: 0 auto 30px;
	}
    .order1,.order2 {
    order:0;
        }
    
   
    
    
    #topContent {
       /* background-image: url("../top2/top_back.jpg");*/
        background-size: cover;
        height: auto;
        box-sizing: border-box;
    }
    #logo {
        background-color: #102b83;
        padding: 20px;
        display: inline-block;
        position: absolute;
        left: 0;
        top:30px;
        width: 40%;
    }
    
    #topContent h1 {
    font-size: 1.7rem;
    margin-bottom: 40px;
    }
    #topContent h1 span {
        font-size: 2.3rem;
    }
   
    
    h2.h2-1 {
        margin-top: 60px;
    }
    h2.h2-1:first-of-type {
        margin-top: 30px;
    }
    
    #service .lead {
        font-size: 1.2rem;
        margin-bottom: 30px;
    }
   
    .syuri_back {
        background:linear-gradient(to bottom, #fff 20%, #e6e6e6 20%,#e6e6e6 90%);
        padding: 0 5%;
        margin: 40px 0 100px;
    }
   
    .maker h3　{font-size: 1.2rem;}
    .maker * {font-size: 1rem;}
    
    
   
    

}

/*　スマホ　*/
@media screen and (max-width:680px) {
    
    
	header {
		padding-bottom: 0;
	}
    .top-inner {
        padding-top: 60px;
    }
    .top-text {
    }
    
    .top-toiawase {
        margin: 30px auto;
    }
    
     .toiawase-area {
        display: block;
        max-width: 400px;
        background-color: #e6e6e6;
        margin: 0 auto;

    }
    
 
    
	#topImage {
		width: 100%;
		height:auto;
		padding-bottom: 20px;
	}
	
	#topImage #top-slider {
		width: 100%;
		float: none;
		margin: 0 auto;
		max-width: 450px;
	}

	.character { display: none; }
	
	.toggleBack {
		padding: 10px 0;
		margin: 30px 0 0;
		border-top: 1px solid #aaa;
	}
	
	.top_banner br { display: none;}
	.top_banner a {
		width: 90%;
		margin: 30px auto;
		max-width: 400px;
		display: block;
	}

	#topNav ul {
		flex-wrap: wrap;
		margin: 0;
	}
	#topNav ul li {
	width: 45%;
	margin: 20px 2.5%;
	}
	#topNav ul li.character2 {
		display: block;
	}
	
		/* --------- */
	
	.read {
		margin-top: 30px;
		text-align: left;
	}
    .read p {font-size: 1.1rem;}

    
    .icon_menu .icon {
        width: 48%;
        border: none !important;
        margin-bottom: 20px;
        
    }
	
    .card {
        width: 100%;
        margin-bottom: 40px;
    }
    
	#support { margin-bottom: 50px;}

	#support .s_read p { font-size: 1.3rem;}
	#support p { font-size: 1rem;}
    
    #support h2 { font-size: 1.5rem}
    
    

	.area { margin-top: 40px;}
	.area .flex {
		flex-wrap: nowrap;
	}
    
    .tips-link {
        width: 45%;
        margin-bottom: 30px;
    }

* {
min-height:0;
min-width : 0;
    }}