@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP:wght@400;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

/*-------------------------------------------
テンプレート
レスポンシブ02 ブルー
-------------------------------------------*/


:root{
	--first:#2047b7;
  	--first-dark:#0d1c49;
	--second:#D3E6E5;
	--third:#00A7A7;
	--fourth:#fcaf37;
	--gradient:linear-gradient(90deg, rgba(0,192,250,1) 0%, rgba(64,84,178,1) 100%);
	--bg01:#F5F5F5;
  	--bg02:#eceef7;
	--font-s:0.9em;
	--font-m:1em;
	--font-L:1.25em;
	--font-LL:1.563em;
	--font-XL:1.953em;
  	--icon:"Material Symbols Sharp";
  	--serif: "Noto Serif JP", serif;
}


body{
  font-family: "Noto Sans JP", sans-serif;
  font-weight:400;
  line-height:1.6;
  	color: #000;
}

::selection{
	background:#ffa500;
	color:#000 !important;
}

ol.pp li, ul.notes li, ul.ps li, ul.maru li{
  font-size:var(--font-m);
}

ol.number li::before{background: var(--first-dark);}
ol.number li {
    padding-left: 35px;
}

.serif{
  font-family:var(--serif);
}

.article .serif strong{
  background:unset;
}

a{
	transition:0.3s all;
}

a:hover {
	color: var(--third);
}

a.btn {
	width: fit-content;
	margin: 0 auto;
	background: var(--first);
	border-radius: 0;
	position: relative;
	padding: 8px 40px 8px 16px;
  	font-weight: normal;
}

a.btn:hover {
	background: var(--fourth);
  	color: #FFF;
}

.sideContents ul li a, .sideContents dt a,
#footer_body .topMenu li a, #footer_body .services li a{
	position:relative;
}

a.btn:after,ul.linklist a:after,.sideContents ul li a::before,.sideContents ul li a:before,
.sideContents dt a:before,
#footer_body .topMenu li a:before, #footer_body .services li a:before{
	content: "\e5e1";
	font-family: var(--icon);
	font-weight: normal;
	/* margin-left: 10px; */
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
}


.sideContents dt a,
.sideContents ul li a{
	padding-left:28px;
}

.sideContents dd ul li a{
	padding-left:36px
      
}

a.btn:after,ul.linklist a:after{
	right: 8px;
	left:unset;
}

.sideContents ul li a:before, .sideContents dt a:before, 
#footer_body .topMenu li a:before, #footer_body .services li a:before{
	right: unset;
	left:8px;
}

.sideContents dd ul li a:before{
	left:16px;
}

.sideContents dt a {
	/* padding-left: 2em; */
}

.sideContents ul li a:hover, .sideContents dt a:hover {
	background: unset;
	color: var(--fourth) !important;
}

ul.linklist {
	display: flex;
	gap: 1em;
	justify-content: center;
}

ul.linklist a {
	display: block;
	color: #FFF;
	background: var(--first);
	padding: 8px 40px 8px 16px;
	text-decoration: none;
	position: relative;
  	font-weight: normal;
}

ul.linklist a:hover {
	background: var(--fourth);
}

ul.linklist a:after {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}


.article.bg, .gallery.bg {
	background: var(--bg02);
}

.article strong{
    /*--
    background : #ffecc0;
    background : linear-gradient(transparent 70%, #ffecc0 70%);--*/
    font-size: 1.2em;
    color: var(--first-dark);
}

.article.bg02.full {
	background: linear-gradient(45deg, var(--first) 30%, #FFF 30%);
}

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

.article.bg02.full .article_body {
	padding: 0 0 40px;
}
/*----------------
header
------------------*/
#title #title_outer {
	background: url(/materials/177390239178901.png) right center no-repeat;
    background-size: 290px 54px;
}

#title h1 {
    background: url(/materials/177389168812601.png) no-repeat center left;
    margin: 0;
    padding: 0;
    text-align: left;
    height: 90px;
    background-size: 360px 82px;
}
#title h1 a {
    display: inline-block;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    height: 100%;
    width: 360px;
}

/*----------------
Menu
----------------*/
#topMenu_outer .topMenu li a{
	font-size:var(--font-s);
}

#topMenu_outer .topMenu li a:hover,
#topMenu_outer .topMenu li:last-of-type a:hover{
	background:#FFF;
	color:var(--first);
}

#topMenu_outer .topMenu li a:after,
#topMenu_outer .topMenu li:last-of-type a:after{
	content: "";
	height: 3px;
	width: 100%;
	display: block;
	position: absolute;
	bottom: 0px;
	top: unset;
	left:0;
	/*--background: var(--fourth);--*/
    background: var(--first-dark);
	transform:scaleX(0);
	transition:0.3s all;
}

#topMenu_outer .topMenu li a:hover:after,
#topMenu_outer .topMenu li:last-of-type a:hover:after{
	transform:scaleX(1);
}

/*----------------
見出し
---------------------*/
#mainArticles h2, #listTopics h2 {
	font-size: var(--font-XL);
	background:var(--first);
	padding: 0.75em 0;
	background-size: 20%;
  	/*font-family:var(--serif);*/
}

#mainTopics h2, #mainArticles .article h2, .article h3, .gallery h3, .freeHtml h3,
#mainArticles div[id^="blog"] h2 {
	font-weight: 600;
	font-size: var(--font-LL);
  	/*font-family:var(--serif);*/
	color: #333;
	font-weight: 500;
}

#mainTopics h2:after, .article h3:after, .gallery h3:after, .freeHtml h3:after,
#mainArticles div[id^="blog"] h2:after {
	background: var(--first);
	height: 2px;
	width: 160px;
	margin: 16px auto 1em;
  	transform: skewX(-45deg);
}

.greeting.article h3 {
	margin-top:	0;
}

.article h4 {
	border: none;
	border-radius: unset;
	font-size: var(--font-L);
	padding: 8px;
	margin-bottom: 0.8em;
  	/*font-family:var(--serif);*/
  	background:unset;
  	font-weight: 500;
}

.article h4::before {
	content: "";
	height: 1px;
	width: 100%;
	top: unset;
	bottom: 0;
	background: var(--gradient);
}

.article h5 {
	background: #F5F5F5;
	padding: 8px;
	border-left: 4px solid var(--first);
	font-size: var(--font-m);
	margin-top: 0;
}

p.copy {
	font-size: var(--font-LL);
	font-weight: bold;
	color: var(--first);
}

strong.copy {
	font-size: var(--font-LL);
	color: var(--first);
	 margin: 0.5em 0; 
	display: inline-block;
  	letter-spacing:0;
	background:unset;
}

#mainArticles .envelope {
	background: var(--bg01);
}

/*Greeting*/
.greeting {
	text-align: center;
}

.greeting ul.check {
	background: var(--bg01);
	margin-bottom:1em;
	padding: 1em 2em;
}


ul.check li:before {
	content:"\e5ca";
	font-family: var(--icon);
	position: static;
	border:none;
	transform:unset;
	display: inline-block;
	font-size:1.33em;
	color:var(--first);
	margin-right:0.5em;
	width: auto;
	height: auto;
	line-height: 1.5;
}
.article table.history {
	border-top: none;
	border-left: none;
}

.article table.history th, .article table.history td {
	border-bottom: none;
	border-right: none;
}

.article table.history th {
	text-align: right;
	width: 35%;
	border-right: 2px solid #DDD;
	background: unset;
	position: relative;
	padding-right: 20px;
}

.article table.history th::after {
	content: "";
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	background: var(--second);
	display: block;
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
}

.article table.history td {
	padding-left: 20px;
}

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

.article table.normalTbl th {
	border-bottom-style: solid;
}


/*経営理念*/
#philosophy.article.full.bg {
	background: var(--bg01);
}

#philosophy ul {
	display: flex;
	justify-content:center;
	writing-mode: vertical-rl;
	flex-direction:column;
	align-items: flex-start;
	gap: 2em;
	width:fit-content;
	margin:0 auto;
}

#philosophy ul li{
	font-size:var(--font-LL);
	height:280px;
	padding-top:2em;
	position:relative;
}

#philosophy ul li::before{
	content:"一、";
	position:absolute;
	top:0;
}

/*---------------
事業内容
------------------*/
.article.business_copy {
	text-align: center;
	background: url(/materials/171263543052601.png) top center no-repeat;
	padding-top: 40px;
	padding-bottom: 40px;
	margin-top: -16px;
}

.article.full.business_copy .article_body {
	background: rgba(255,255,255,0.7);
	padding: 40px;
	backdrop-filter: blur(3px);
}

.article.business_copy p strong {
	font-family: var(--serif);
	font-size: var(--font-XL);
	color: var(--first);
	background: unset;
	font-weight: 500;
}

.article.vehicle dl dt, .article.vehicle dl dd {
	padding: 4px;
}

.article.vehicle dl dt {
	font-weight: bold;
	border-bottom: 1px solid var(--first);
	font-size: var(--font-L);
}

.article.vehicle dl dd {
	border-bottom: 1px dashed #CCC;
	margin-left: 0.5em;
	position: relative;
}

.article.vehicle dl dd::before {
	content: "-";
	margin-right: 0.5em;
}


/*----------------
求人情報
-----------------*/
.article.recruit {
	background: url(/materials/171264524948101.png) bottom center no-repeat;
			padding:40px;
	margin-bottom: 0;
	margin-top: -16px;
	
}

.article.recruit .article_body {
	background:rgba(255,255,255,0.77);
	padding:40px;
	backdrop-filter:blur(3px);
}

.article.recruit h3{
	margin-top:0;
	padding-top:0;

}

.article.recruit{
	text-align:center;
}

.article.recruit p{
	font-size:var(--font-LL);
	font-weight:bold;
	
}

.article.recruit p:last-child{
	margin-bottom:0;
}

.article.recruit p span{
	font-size:150%;
}
.article.flow table {
	border-top: none;
	border-left: none;
		background: transparent;
}

.article.flow table tr{
	display:flex;
	justify-content: space-between;
	gap: 10px;
	align-items: start;
}

.article.flow table th, .article.flow table td {
	border-bottom: none;
	border-right: none;
	line-height: 1.5;
	/* font-size: var(--font-s); */
	padding: 0;
	margin: 10px;
	display: block;
}

.article.flow table th {
	vertical-align: top;
	background: #FFF;
	color: var(--fourth);
	position: relative;
	font-weight:bold;
	z-index: 2;
	line-height: 1;
	padding: 4px;
}
.article.flow table tbody{
	position:relative;
}
.article.flow table tbody::before {
	content: "";
	height: 100%;
	width: 4px;
	display: block;
	background: #DDD;
	top: 0;
	position: absolute;
	left: 2em;
	/* transform: translateX(-50%); */
}

.article.flow table td {
	font-size: var(--font-s);
	flex-grow: 1;
}

.article.flow table tr:first-child{
	padding-top:1em;
}
.article.flow table tr:first-child th::before {
	content:"\e8b5";
	font-family:var(--icon);
	color:#AAA;
	font-size:1.5em;
	display:block;
	position:absolute;
	top: -1.5em;
	left: 50%;
	background:#FFF;
	/* margin-bottom:0.5em; */
	transform:translateX(-50%);
	width: 1em;
	height: 1em;
	font-weight:normal;
}
.gallery.quality ul.galleryGrids {
	display:flex;
	justify-content:space-between;
	height:auto !important;
	position:static !important;
}

.gallery.quality ul.galleryGrids li{
	position: static !important;
	float: none;
	width: 18.8%;
	border-radius: 8px;
	border: 4px solid var(--first);
}

.gallery ul.galleryGrids .comment {
	font-size: var(--font-s);
}

ul.faq li.qus:before, ul.faq li.ans:before {
	margin: 0 12px 0 -44px;
}

ul.faq li.qus::before {
	background-color: var(--first);
}

ul.faq li.ans::before {
	background: var(--fourth);
}

/*--------------
Contact
-----------------*/
.article.full.contact {
	background: url(/materials/171254705811701.png) center no-repeat;
	background-size: cover;
	padding-top:40px;
	padding-bottom:40px;
	margin-bottom: 0;
}

.article.full.contact .article_body{
	background:rgba(255,255,255,0.8);
	backdrop-filter:blur(3px);
	padding: 16px;
}

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

.article.full.contact p{
	text-align:center;
}
.contact strong{
  background:unset;
}

.contact span.tel {
	font-size: var(--font-LL);
}

.contact a.btn::before {
	font-family: var(--icon);
	content: "\e158";
	font-variation-settings: 'FILL' 0, 
   'wght' 200, 
   'GRAD' 200,
	'opsz' 36 /* アイコンのサイズ */;
	font-size:36px;
	
}
.contact a.btn::after{
	content:none;
}

.contact a.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--font-L);
	font-weight: normal;
	line-height:1;
	padding-top:0.5em;
	padding-bottom:0.5em;
}

/*----------------
Side & Footer
-----------------*/
#mainContents {
	padding-bottom: 0;
}

#sideContents, #footer {
	background: var(--first-dark);
}

#sideContents *, #footer *{
	color:#FFF;
}
#footer_body .copyright {
	background: #000;
}

.side_info {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin: 1em;
}

.side_info h2 img{width: 100%; max-width: 360px;}

.sideContents #sideServices h2:before, .sideContents #sideBlogCategories h2:before, .sideContents #sideBlogDates h2:before, .sideContents #sideMobile h2:before {
	font-family:var(--icon);
	font-weight:normal;
	display:block;
	height:1em;
	width:1em;
	background:unset;
	font-size:2em;
	font-weight:normal;
	margin-right: 0.5em;
	font-variation-settings:
	  'FILL' 0,  /* 塗り 「0」→塗りなし 「1」→塗りあり*/
	  'wght' 200, /* 線の太さ */
	  'GRAD' 200, /* 線の太さ（wghtよりも微調整が可能）*/
	  'opsz' 48 /* アイコンのサイズ */;
}


.sideContents #sideServices h2:before{
	content:"\e5d2";
}

.sideContents #sideBlogCategories h2:before{
	content:"\f05b";
	
}
.sideContents #sideBlogDates h2:before{
	content:"\e916";	
}
.sideContents #sideMobile h2:before {
		content:"\e32c";
}

#footer_body .topMenu li a, #footer_body .services li a {
	background: unset;
	position: relative;
	padding-left: 40px;
}

#footer_body {
	flex-direction: column;
}

#footer_body .topMenu, #footer_body .services {
	width: 100%;
	flex-direction: row;
	font-size: var(--font-s);
	margin: 0;
	gap: 0.5em;
  	flex-wrap: wrap;
}

#footer_body .topMenu li, #footer_body .services li {
	margin-bottom: 0;
	margin-right: 0;
}

#footer_body .topMenu li a:after, #footer_body .services li a::after {
	content: "";
	width: 100%;
	height: 1px;
	display: block;
	background: var(--fourth);
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transition: 0.3s all;
}

.sideContents ul li, .sideContents dl dt {
	border-color: #FFF;
}

#footer_body .topMenu li a:hover:after, #footer_body .services li a:hover::after {
	transform: scale(1);
}

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

/*--------------------
Form
------------------*/
#mainArticles table.contactTable tr th {
	background-color: var(--bg01);
	color: #333;
}

#mainArticles table.contactTable tr td {
	background: #FFF;
}

#mainArticles form {
	background: unset;
}

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

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

#mainArticles table.contactTable input.button, #mainArticles table.contactTable input[type="button"] {
	border-radius: 0px;
}

/*------------------
最新情報
------------------*/
ul.topics li p.date {
	background: unset;
	color: #000;
	border: 1px solid #000;
	border-radius: unset;
	/* font-size: 0.8em; */
	padding: 4px 8px;
}

ul.topics li h3 a {
	color: #333;
	text-decoration: underline;
}

ul.topics li p.more a {
	background: unset;
	font-weight: normal;
	color: #333;
}

ul.topics li p.description {
	/* font-size: var(--font-s); */
}

#mainTopics .listview a {
	font-weight: normal;
	background: var(--first);
	border-radius: unset;
}

#mainTopics .listview a:hover {
	background: var(--fourth);
}

ul.topics li {
	border-radius: unset;
}

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

ul.topics li h3 a:hover {
	color: var(--first);
}
.col3 img {
    width: 50%;
}

/*1024px以下*/
@media only screen and (max-width: 1024px){
#title #title_outer {
	background-size: 200px;
}
  
  .article.bg02.full .article_body {
	padding: 0 20px 20px;
	background: rgba(255, 255, 255, 0.8);
}
}/*1024px以下ここまで*/

/*600px以下*/
@media only screen and (max-width: 600px){
:root{
	--font-m:1em;
	--font-L:1.2em;
	--font-LL:1.5em;
	--font-XL:1.8em;
}

body {
	font-size: 14px;
}

#title h1 a {
	width: 180px;
}

#title h1 {
	width: 180px;
	background-size: contain;
    margin: 0 0 0 10px;
}

#title #title_outer {
	background: unset;
}

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

#mainArticles_outer h2 {
    background: var(--first);
    font-size: 1.8em;
    font-weight: normal;
    padding: 3vw 0;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.05em;
    border: none;
    position: relative;
    width: 100vw;
    color: #fff;
}
  
  .article.contact h3 {
	padding-top: 6px;
}
  
  .article table.normalTbl th, .article table.normalTbl td {
	border: none;
	text-align: center;
}

.article table.normalTbl th {
	background: var(--bg02);
}

.article table.normalTbl {
	margin-bottom: 2em;
}

.article table.history th {
	text-align: left;
}

.contact a.btn {
	padding-right: 16px;
	padding-left: 16px;
}

.contact a.btn::before {
	font-size: 24px;
}

#mainArticles h2 > strong, #listTopics h2 > strong {
	font-size: 60%;
}

	.greeting ul.check {
	padding: 16px;
}

.article.bg02.full .article_body {
	padding: 0 20px 20px;
	background: rgba(255,255,255,0.8);
}

.article.full.business_copy .article_body {
	padding: 24px;
}

.gallery.quality ul.galleryGrids {
	flex-wrap: wrap;
	justify-content: center;
	gap: 1%;
}

.gallery.quality ul.galleryGrids li {
	width: 32%;
	margin-bottom: 1em;
  	border: 2px solid var(--first);
}

.gallery ul.galleryGrids .comment {
	line-height: 1.2;
}
  
  .article.recruit,
.article.recruit .article_body{
	padding: 20px;
}

.article.recruit p:first-child > span{
	display:inline-block;
	margin-bottom:0;
	
}
.article.flow table th, .article.flow table td{
  font-size:var(--font-m)
}
.article.flow table tbody::before {
	left: 2.25em;
}


.side_info{
	flex-direction:column;
	justify-content:center;
}
.side_info h2,.side_info p{
	text-align:center;
}

.side_info img{
	max-width:180px;
}
  
  #mainArticles table.contactTable tr.must th {
	padding: 1em;
}

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

#footer_body .topMenu li, #footer_body .services li {
	width: 49%;
}

#footer_body .topMenu li a, #footer_body .services li a {
	padding: 4px 12px 4px 24px;
}

#bottomLink {
	display: block;
	position: fixed;
	z-index: 999;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 48px;
}

#bottomLink a {
	display: block;
	line-height: 48px;
	text-align: center;
	background: var(--first);
	display:block;
	width:100%;

}

#bottomLink span{
	font-size:var(--font-s);
	padding-right:0.5em;
}

#footer_body .services {
	margin-bottom: 40px;
}

#footer_body .copyright {
	padding: 24px;
}

#wrap {
	margin-bottom: 48px;
}
  
  /*-------------
バッジ調整
---------------*/
.grecaptcha-badge {
    bottom: 60px!important/*bottomからの位置調整*/;
    z-index: 9999;
}
}/*600px以下ここまで*/

/*reCAPTCHA*/
.recaptcha_policy {
  padding: 0;
  margin: 0;
  text-align: right;
  font-size: 80% !important;
  color: #444 !important;
}
.recaptcha_policy a {
  font-size: 80% !important;
  color: #111 !important;
}
.grecaptcha-badge { visibility: hidden; }