@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
/*--------------
レスポンシブ02ブルー
--------------*/

/*カラー*/
:root {
	--first-color: #058FB2;
	--second-color: #F9AE33;
	--third-color: #47C7EB;
  	--fourth-color: #f79102;
	--text-color: #333;
	--bg-color01: #FAFAFA;
	--bg-color02: #C8D9CD;
  	--bg-color03: #edf7fa;
  	--bg-color04: #F5F5F5;
	--border-color: #ccc;
}
html {
	scroll-behavior: smooth;
}

html a {
	transition: 0.3s all;
}

body {
    font-size: 18px;
    line-height: 1.8;
    font-family: 'Noto Sans JP', sans-serif;
  	color:var(--text-color);
    font-weight: normal;
    letter-spacing: 0.5px;
}

.article.col2, .article.col3, .article.col4, .article.col5 {
	padding-left: 8px;
	padding-right: 8px;
}

#mainContents {
	padding-bottom: 0;
}

.article.contact {
	margin-bottom: 0;
}

.article.zero_margin, .gallery.zero_margin {
  margin-bottom: 0 !important;
  padding-bottom: 0;
}

@media only screen and (max-width: 1024px) {
  body { font-size: 16px; }
}

.mainImage #slider li {
        height: auto !important;
}

/*ぱんくず*/
#pankuz {
  color: #999;
}

/*フォーム注釈*/
#mainArticles p.contact-note, #mainBlogCommentForm_outer p.contact-note {
  color: #999;
}

/*画像余白*/
.article .article_left .image {
  margin-right: 4%;
  margin-bottom: 2em;
}
.article .article_right .image {
  margin-left: 4%;
  margin-bottom: 2em;
}
.article .article_center .image {
  margin-bottom: 2em;
}

#mainArticles a:hover img,
#sideBanners  a:hover img,
div.freeHtml a:hover img,
div.image img.gallery:hover,
#title h1 a:hover {
  filter: alpha(opacity=75);
  -moz-opacity:0.75;
  opacity:0.75;
}

/*---------------
見出し
----------------*/
#mainTopics h2:after, .article h3:after, .gallery h3:after, .freeHtml h3:after {
	background: var(--first-color);
}
#mainTopics h2, .article h3, .gallery h3, .freeHtml h3 {
  color:var(--text-color);
}
#contents h2, #contents h3, #contents h4, #contents h5, #contents h6 {
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  line-height: 1.6;
  overflow: hidden;
}

/*---------------
ボタン
----------------*/
a.btn {
  background-color: var(--second-color);
  transition: 0.2s ease;
  border-radius:unset;
}
a.btn:hover {
  background-color: var(--fourth-color);
}

/*-------------
reCAPTCHA
---------------*/
.recaptcha_policy {
  margin-top: -20px;
  text-align: right;
  font-size: 11px !important;
  color: #999 !important;
  padding: 0 40px 20px;
}
.recaptcha_policy a { font-weight: normal; }
.grecaptcha-badge { visibility: hidden; }
/*-------------
header
---------------*/
#title h1 {
  height: 64px;
  width: 360px;
  margin: auto;
}
#title h1 a {
    background: url(/materials/175066556099403.png) no-repeat left center / contain;
    display: inline-block;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    height: 100%;
    width: 100%;
}
#title #title_outer {
	background: url(/materials/175066556099401.png) right center no-repeat;
	background-size: 280px;
  height:120px;
}

/*--------------
Menu
-------------------*/
#wrap_body #topMenu {
  background: var(--bg-color01);
}
#topMenu_outer .topMenu li a::after,
#topMenu_outer .topMenu li:last-child a::after{
	content: "";
	display: block;
	width: 0;
	height: 2px;
	bottom: 0;
	left:0;
	top: unset;
	background: var(--third-color);
	transition:0.3s all;
}
#topMenu_outer .topMenu li a:hover{
	background:unset;
	color:var(--third-color);
}
#topMenu_outer .topMenu li a:hover::after,
#topMenu_outer .topMenu li:last-child a:hover::after{
	width:100%;
}

/*----------------------
最新情報
------------------------*/
ul.topics li p.date {
	background: #EEE;
	color: var(--text-color);
}

ul.topics li h3 a {
	color: var(--text-color);
}

ul.topics li h3 a:hover {
	color: var(--fourth-color);
}

ul.topics li p.more a,
#mainTopics .listview a{
	background: var(--second-color);
	border-radius:unset;
}

ul.topics li p.more a:hover ,
#mainTopics .listview a:hover{
	background: var(--fourth-color);
}

/*-----------------------
見出し
--------------------------*/
#mainArticles h2 > strong, #listTopics h2 > strong {
  font-size: 50%;
  color: var(--first-color);
}

.article h3, .gallery h3 {
  padding: 0;
  font-size: 1.75em;
  font-weight: bold;
  margin: 30px auto;
}

.article h3::after {
	margin-top: 0.33em;
	height: 2px;
	width: 33.33%;
	background: var(--first-color);
}

.article h3::before {
	content: "";
	width: 33.33%;
	height: 2px;
	display: block;
	background: var(--first-color);
	margin: 0 auto 0.33em;
}

#mainArticles h2, #listTopics h2 {
	background: unset;
	color: #000;
	margin-bottom: 0;
  font-size: 2.25em;
  font-weight: bold;
}

.article h4,
.article.col2 h3,
.article.col3 h3{
  font-weight: normal;
  border: none;
  padding-left: 1.25em;
  background:unset;
  font-size:125%;
}
.article.col2 h3,
.article.col3 h3 {
  text-align: center;
  padding: 1em 1.5em;
}

.article h4::before,
.article.col2 h3::before,
.article.col3 h3::before{
	height: 4px;
	background: var(--first-color);
	width: 0.8em;
 	margin: auto 8px auto 0;
	position: absolute;
	left: 0;
	top: 55%;
}

.article.col2 h3::after,
.article.col3 h3::after{
  height: 4px;
	background: var(--first-color);
	width: 0.8em;
 	margin: auto 8px auto 0;
	position: absolute;
	right: 0;
	top: 55%;
}
.article h4 {
  margin: 0 0 1em;
  padding: 0 0 0 1.25em;
}

.article h5 {
  border-left: solid 6px var(--first-color);
  font-size: 120%;
}

/*-----------------------
記事
--------------------------*/
.article.envelope h4::before,
.article .envelope h4::before {
	margin: 0 auto;
	display: block;
	left:50%;
	width:2em;
	top:unset;
	bottom:0;
	transform:translateX(-50%);
}

.article.envelope h4{
	margin-bottom:24px;
}

a.tel {
	font-size: 125%;
}

ol.pp, ul.ps, ul.notes {
	font-size: 0.9em;
}
ul.ps {
  margin-left: 0;
  padding-left: 1em;
}

/*table*/
.article table.history{
	border:none;
	width:100%;
	margin: 0 0 1em;
}
.article table.history tr{
	display:flex;
	gap:1px;
}
.article table.history th,
.article table.history td{
	padding-right:1em;
	padding-left:1em;
	border-bottom:1px dotted #CCC;
}

.article table.history th{
	position:relative;
	text-align:left;
	border-right:unset;
	background:unset;
	border-left:unset;
	width:auto;
}

.article table.history th:after{
	content:"";
	display:block;
	width:0.66em;
	height:0.66em;
	border-radius:100%;
	background:var(--first-color);
	position:absolute;
	left:-0.6em;
	top:50%;
	transform:translateY(-50%);
}

.article table.history td{
	border-right:none;
	flex:1 1 auto;
}
.article table.history tbody{
	padding-left:0.25em;
	display:block;
	padding-top:0.5em;
	padding-bottom:1em;
	border-left:1px solid #CCC;
}

.article table.price {
	width: 100%;
	border-left: none;
  background: #FFF;
}

.article table.price th,
.article table.price td{
	border-right:none;
	vertical-align:top;
	padding:8px 16px;
	text-align:left;
	line-height:1.5;
}
.article table.price th{
	background:var(--bg-color04);
}

.article table.price th{
	width: 36%;
	font-weight:bold;
}

.article table.price td:last-child{
	text-align: right;
}

.article table.vehicle {
	width: 100%;
	border:none;
}

.article table.vehicle th, .article table.vehicle td {
	text-align: center;
}

.article table.vehicle thead th{
	background: var(--bg-color03);
	border-right:unset;
	border-bottom:1px solid var(--third-color);
}

.article table.vehicle tbody td {
	border-bottom:1px dashed #CCC;
	border-right:unset;
}

.article table.vehicle tbody tr:last-child td {
	border-bottom-style:solid;
}

.article table.normalTbl {
	font-size: 1em;
}

.article table.normalTbl th{
	width:30%;
	background: var(--bg-color03);
}

.article table.normalTbl td, .article table.normalTbl th {
	border-bottom-style: dashed;
}

/*List*/
ul.list {
	background: #FFF;
	margin-bottom: 1em;
	padding: 16px 24px;
	display: flex;
	flex-wrap: wrap;
}

ul.list li {
	width: 50%;
	padding: 4px 1em;
	position: relative;
}

ul.list li::before {
		content: "";
	width: 0.4em;
	height: 0.4em;
	border-radius: 100%;
	background: var(--second-color);
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

/*vision*/
.article.vision p:first-of-type {
	text-align: center;
	margin:32px 0;
}
.article.vision p:first-of-type strong {
	font-size: 133%;
}

.article.vision ol {
	display: flex;
	gap: 1em;
	counter-reset: vision 0;
}

.article.vision ol li {
	text-align: center;
	line-height:1.5;
	padding:36px 24px 48px;
	width:calc((100% - 2em) / 3);
	background:var(--bg-color03);
	position:relative;
}

.article.vision ol li::before{
	counter-increment: vision 1; 
	content:counter(vision) ".";
	font-size:133%;
	font-weight:bold;
	color:var(--first-color);
}

.article.vision ol li strong{
	font-weight:bold;
	font-size:110%;
	color:var(--first-color);
	display:block;
}

/*-------------
Side & Footer
---------------*/
#sideContents {
	background: var(--bg-color04);
}

.sideContents #sideServices h2:before, .sideContents #sideBlogCategories h2:before,
.sideContents #sideBlogDates h2:before, .sideContents #sideMobile h2:before {
	background: var(--third-color);
}

#footer {
	background: var(--first-color);
}

#footer_body .copyright {
	background: var(--text-color);
}

#footer_body .topMenu li a, #footer_body .services li a {
	background: unset;
}

#footer_body .copyright {
	background: var(--text-color);
}
/*-------------
Contact
---------------*/
.article.contact {
    background: url(/materials/175066743567901.png)center no-repeat;
    background-size: cover;
}
.article.contact .article_body.article_left {
    background: rgba(255, 255, 255, 0.8);
    padding:40px;
    width: 100%;
    max-width: 1024px;
    margin: 50px auto;
    text-align: center;
}
.article.contact p.tel {
}
.article.contact p.tel a {
    text-decoration:  none;
    font-size: 2em;
    color: var(--first-color);
    display:flex;
    justify-content:center;
    align-items: baseline;
}

.article.contact p.tel a:hover {
    color: var(--third-color);
}
.article.contact p.tel a::before {
    content: "\f095";
    font-weight: bold;
    font-family: "Font Awesome 5 Free";
    padding-left: 0.5em;
    font-size: 70%;
    display:block;
    transform: scale(-1, 1);
}
.article.contact p span {
    margin-right: 1rem;
    font-size: 16px;
    font-weight: bold;
}

.article.contact h3 {
	margin-top: 0;
	padding-top: 0;
}

.article.contact h3::before,
.article.contact h3::after{
	content:none;
}

.article.vision.full {
	background: url(/materials/175126054721201.jpg) center center / cover;
	padding: 0;
}

.article.vision.full .article_outer {
	background: #FFFB;
	padding: 80px 0;
}

.article.vision.full h3 {
	margin-top: 0;
}

/*---------------------
Form
--------------------------*/
#mainArticles form{
	background:unset;
}
#mainArticles table.contactTable {
	border: none;
}

#mainArticles table.contactTable tr th{
    color:#333;
  background: var(--bg-color04);
}
#mainArticles table.contactTable tr td{
  background: #FFF;
}

#mainArticles table.contactTable tr th,
#mainArticles table.contactTable tr td{
	border-bottom:1px solid #CCC;
    border-right: unset;
}

#mainArticles table.contactTable input[type="text"],
#mainArticles table.contactTable input[type="password"],
#mainArticles table.contactTable textarea,
#mainArticles table.contactTable select,
#mainArticles table.contactTable .textField{
	background: #fffff9;
	padding: 8px;
	line-height:1em;
}

#mainArticles table.contactTable select {
	width: 100%;
}

#mainArticles table.contactTable input.button,
#mainArticles table.contactTable input[type="button"] {
	border-radius: unset;
	transition:0.3s all;
}

#mainArticles table.contactTable input.button{
    background:var(--first-color)
}

#mainArticles table.contactTable input.button:hover{
	opacity:1;
	background:var(--second-color);
	color:#FFF;
}

#mainArticles .envelope, #mainBlogCommentForm .envelope {
	background: var(--bg-color03);
}

/*------------
Side ＆ Footer
---------------*/
.sideContents {
	padding: 24px 0 64px;
}

.side_info {
	display: flex;
	justify-content: space-between;
	padding:40px;
	align-items:center;
	margin-bottom:40px;
	gap:1em;
}

.side_info h2,
.side_info .info{
	flex-grow:1;
}
.side_info h2,
.side_info h2 img{
	max-width:360px;
}

.side_info .info{
	padding:0 24px;
}

.side_info a.btn{
	margin-top:1em;
}

#footer_body .topMenu, #footer_body .services {
	flex-direction: row;
	width: 100%;
	justify-content: center;
	margin: 0;
}

#footer_body {
	flex-direction: column;
	padding: 24px 0 96px;
}

#footer_body .topMenu li a:hover, #footer_body .services li a:hover,
{
	background: unset;
	color: var(--second-color);
}

#footer a:hover {
	color: var(--second-color);
}

.sideContents ul li a:hover, .sideContents dt a:hover,
#footer_body .topMenu li a:hover, #footer_body .services li a:hover,
#footer_body .topMenu li a:hover:before, #footer_body .services li a:hover:before{
	color: var(--second-color);
}
.sideContents ul li a:hover, .sideContents dt a:hover{
	background: var(--bg-color03);
}
#footer_body .topMenu li a:hover, #footer_body .services li a:hover{
	background:unset;
}

#toggle{
	background-color:var(--first-color);
}

@media only screen and (max-width: 1024px) {
	.article.vision.full .article_body {
		padding-left:4vw;
		padding-right:4vw;
	}
	.article.vision ol{
		padding-left:8px;
		padding-right:8px;
	}
	.article.vision ol li {
		padding-left:16px;
		padding-right:16px;
	}
}

@media only screen and (max-width: 800px) {
#title h1 {
	width: 240px;
	height: 40px;
}

#title #title_outer {
	height: 96px;
	background-size: 220px;
}

.side_info{
	flex-direction:column;
	padding:24px;
      text-align:center;
}

	.side_info h2, .side_info h2 img{
		max-width:220px;
	}
}/*end_800px*/

@media only screen and (max-width: 600px) {
	body{
		font-size:16px;
	}
	
	#title #title_outer {
		height:56px;
		background-image:unset;
		padding:0 2%;
	}

	#title h1 {
		padding-left:0;
	}
	
	.mainImage img {
	  object-fit: cover;
	  object-position: top center;
	  min-height: 200px;
	}

	.article.contact{
		background-size:auto 100%;
	}
  
.article table.normalTbl th, .article table.normalTbl td {
	width: 100%;
	border-bottom: unset;
}

.article table.vehicle tr {
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	border-left:4px solid var(--third-color);
	margin-bottom:16px;
	background:var(--bg-color01);
}

.article table.vehicle thead {
	display: none;
}
.article table.vehicle tbody td{
	width:50%;
	padding:8px 8px;
	text-align:left;
}

.article table.vehicle tbody td:first-child,
.article table.vehicle tbody td:nth-child(2){
	width:100%;
}

.article table.vehicle tbody td:last-child{
	width:100%;
	border-bottom:unset;
}

.article table.vehicle tbody td:first-child::before{
	content:"メーカー：";
}
.article table.vehicle tbody td:nth-child(2)::before{
	content:"名称：";
}
.article table.vehicle tbody td:nth-child(3)::before{
	content:"積載量：";
}
.article table.vehicle tbody td:nth-child(4)::before{
	content:"台数：";
}

.article table.vehicle tbody td:last-child::before{
	content:"設備：";
}

.article table.vehicle tbody tr:last-child td{
	border-bottom-style:dashed;
}

.article table.vehicle tbody tr:last-child td:last-child{
	border-bottom:unset;
}
  
.article table.price{
	border-top:unset;
}
.article table.price tr {
	display: flex;
	flex-wrap:wrap;
	margin-bottom:16px;
}
.article table.price tr th{
	width:100%;
	border-top:1px solid #CCC;
}
.article table.price tr th br{
	display:none;
}
.article table.price tr td{
	flex: auto;
}
.article table.history tr ,
.article table.history th {
  display: block;
}
  
  .article.vision ol{
    flex-direction:column;
  }
  .article.vision ol li {
    width:100%;
  }



  ul.list {
    flex-direction: column;
    padding:8px 16px
  }

  ul.list li {
    width: 100%;
    line-height: 1.5;
    padding: 4px 4px 4px 1em;
  }

  ul.list li::before{
    top: calc(8px + 0.6em);
  }
  
  .article.contact .article_body.article_left {
	padding-left: 24px;
	padding-right: 24px;
}

	#footer_body .topMenu, #footer_body .services{
		flex-direction:column;
	}

	#footer_body{
		padding-bottom:50px;
	}

#bottomLink {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  z-index: 1000;
  height: 50px;
  overflow: hidden;
  display: inline;
}
#bottomLink a  {
        display: block;
        color: #fff;
        background:var(--second-color);
        text-decoration: none;
        font-size: 110%;
        line-height: 50px;
        height: 100%;
    }
#bottomLink a span {
  font-size:85%;
}

	#bottomLink a span::after{
			content: "\f095";
			font-weight: bold;
			font-family: "Font Awesome 5 Free";
			padding-right:0.5em;
			padding-left: 0.5em;
			display: inline-block;
			transform: scale(-1, 1);
	}
	
/* ボタンサイズ分の画面下部余白 */
	#wrap {
	    margin-bottom: 0;
	}
}/*end_600px*/