@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

:root {
--bs-font-xs: 0.8rem;
--bs-font-s: 0.9rem;
}
body{
font-family:'Noto Sans JP', sans-serif;;
-webkit-font-smoothing: antialiased;
color:var(--bs-dark);
background-color: var(--bs-body-bg);
font-size:0.95rem;
}
a{
color:var(--bs-dark);
}
a.a-border{
text-decoration: underline;
}
h1{
bottom:7.5rem;
font-size:var(--bs-font-xs);
font-weight:400;
line-height: 1.5;
}
@media (min-width:576px){
body{
font-size:1rem;
}
h1{
bottom:8.5rem;
}
}
@media (min-width:992px){
h1{
bottom:1.8rem;
right:2rem;
right:1rem;
}
}
.size-s{
font-size:var(--bs-font-s);
}
.size-xs{
font-size:var(--bs-font-xs);
}
.btn i.bi{
vertical-align: bottom;
}
.text-gray{
color:var(--bs-gray);
}
.text-lgray{
color:var(--bs-gray-500);
}
.font-g{
font-family:'Roboto', sans-serif;
}
.bg-gg{
background:linear-gradient(45deg,rgba(63,64,65,1) 50%, rgba(63,64,65,0.6) 100%);
}
.bg-blue{
background: var(--bs-blue);
}
.icon-link-hover:focus-visible>.next, .icon-link-hover:hover>.next {
transform:translateX(6px) ;
stroke:var(--bs-white);
}
.next {
fill: none;
transition: 0.5s all;
width: 20px;
}
.next-red{
stroke-width:1px;
stroke:var(--bs-red);
}
.next-white{
stroke-width:1px;
stroke:var(--bs-white);
}
.next-rw{
stroke-width:1px;
stroke:var(--bs-red);
}
.icon-link-hover:focus-visible>.next-rw, .icon-link-hover:hover>.next-rw {
transform:translateX(6px) ;
stroke:var(--bs-red);
}
a.btn-outline-secondary:hover{
background:transparent;
}
/* ナビバー */
header .navbar-nav{
font-size:1.1rem;
}
header .navbar-nav li a {
position: relative; /*アンダーラインの位置を決めるための基準 */
max-width:410px;
width:83%;
margin:0 auto;
}
header .navbar-nav li a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: var(--bs-red);
bottom: -8px; /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1); /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

header .navbar-nav li a:hover::after {
transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}

.b-contact{
height:70px; 
width:100px;
font-size:0.75rem;
}
.b-contact i{
font-size:1.8rem;
}
.logo-t{
padding:0 15px;
height:56px;
background: var(--bs-blue);
}
.logo-t a{
width:230px;
}
#input{
display: none;
}
.header-close{
width:4rem;
height:3.5rem;
z-index:1042;
text-align: center;
}
.header-close-button{
margin: 0 auto;
padding-top:26px;
width:100%;
height:100%;
}
.header-close-button span, .header-close-button span:before, .header-close-button span:after {
position: relative;
height: 2px;
width: 28px;
background:var(--bs-gray);
display: block;
content: '';
margin:0 auto;
}
.header-close-button span:before{
top:-12px;
}
.header-close-button span:after{
bottom: -12px;
}
#input:checked ~ .header-close .header-close-button span:before{
top: 0;
transform: rotateZ(-90deg);
}
#input:checked ~ .header-close .header-close-button span{
top: 0;
transform: rotateZ(45deg);
}
#input:checked ~ .header-close .header-close-button span:after{
top: 0;
transform: rotateZ(-45deg) scale(0);
}
.offcanvas.offcanvas-top {
height:600px;
}

@media (min-width:768px){
.logo-t a{
width:300px;
}
.header-close-button span, .header-close-button span:before, .header-close-button span:after {
width: 36px;
}
.header-close{
width:4.5rem;
height:4rem;
}
.header-close-button{
padding-top:30px;
}
.logo-t{
padding:0 20px;
height:64px
}
}
@media (min-width:992px){
header .navbar-nav{
font-size:0.9rem;
}
header{
background: transparent;
}
.logo-t{
height:70px;
padding:0 5px;
}
header{
background: transparent;
}
header .navbar-nav li a {
max-width:auto;
width:auto;
}
}
@media (min-width:1200px){
.logo-t{
padding:0 15px;
}
}
/* トップビジュアル */
.top-visual{
background:url(img/top-sp.jpg) center center;
background-size: cover;
height:300px;
width:100%;
}
.top-visual-text{
top:12%;
right:0%;
width:100%;
z-index:1;
}
.top-visual-text img{
max-width:190px;
}
#visual{
background:#333;
}
#visual::after{
content: "";
position: absolute;
background:linear-gradient(115deg,rgba(0,0,0,0) 44%, rgba(0,0,0,0.6) 44.1%);
width:100%;
height:100%;
top:0;
z-index:0;
}
#visual ul{
font-size:1.4rem;
}
.top-visual-text{
position:relative;
z-index:10;
}
.bottom-visual{
background:url(img/top-down.png) center no-repeat;
height:220px;
background-size: cover;
z-index:10;
top:0;
}
.bottom-visual-md{
background:url(img/top-down.png) center no-repeat;
background-size: cover;
position:relative;
z-index:10;
}

@media (min-width:768px){
#visual{
background:linear-gradient(-90deg,#000 0%, var(--bs-gray-200)70%);
}
.top-visual{
height:560px;
background:url(img/top.jpg) center center;
background-size: cover;
}
.top-visual-text{
position:absolute;
}
.bottom-visual-md{
height: 220px;
}
.bottom-height{
height:220px;
}
.bottom-height ul li{
font-size:1.3rem
}
.bottom-height ul li i{
font-size:0.9rem
}
.top-visual-text img{
max-width:220px;
}
}
@media (min-width:992px){
.bottom-visual-md{
height: 260px;
}
.bottom-height{
height:260px;
}
.bottom-height ul li{
font-size:1.5rem
}
.bottom-height ul li i{
font-size:1rem
}
}
/* トップページ 斜め背景 */
.cut-line::after{
content: "";
position: absolute;
background:linear-gradient(60deg,rgba(0,0,0,0.05) 308px, rgba(0,0,0,0) 309px);
width:100%;
height:100%;
bottom:0;
left:0;
z-index:-1;
}
/* トップページ ADAS */
@media (min-width:768px){
.adas-back{
background: url(img/adas_back.png) bottom right no-repeat;
background-size:80%;
}
}
@media (min-width:992px){
.adas-back{
background-size:80%;
}
}

/* トップページ レスキューサービス */
#top-rescue{
background-image:url(img/top-rescue_sp.jpg);
background-position-x: 65%;
background-position-y: 80%;
background-size:cover;
padding:3rem 0;
text-shadow: 1px 1px 2px #000;
}

#top-rescue .col-lg-9:last-child{
height:160px;
}
@media (min-width:576px){
#top-rescue{
background-position-y: 80%;
}
#top-rescue .col-lg-9:last-child{
height:140px;
}
}

@media (min-width:768px){
#top-rescue .col-lg-9:last-child{
height:0px;
}
#top-rescue{
background-image:url(img/top-rescue.jpg);
background-position-y: 35%;
padding:4rem 0;
}
#top-rescue::after{
content: "";
position: absolute;
background:linear-gradient(60deg,rgba(0,0,0,0.4) 502px, rgba(0,0,0,0) 503px);
width:100%;
height:100%;
bottom:0;
left:0%;
z-index:0;
}
}
/* ショップインフォ */
.sns-btn a{
max-width:80%;
width:130px;
}
/* ページタイトル */
#page-title{
padding:6rem 0 4rem;
}
#page-title::before{
content: "";
position: absolute;
background:linear-gradient(-60deg,rgba(0,0,0,0.7) 40%, rgba(0,0,0,0) 40.1%);
width:100%;
height:100%;
bottom:0;
left:0;
z-index:0;
}
#page-title.company{
background:url(img/company-back.jpg) center left 30%;
background-size:cover;
}
#page-title.factory{
background:url(img/factory-back.jpg) center left 30%;
background-size:cover;
}
#page-title.price{
background:url(img/contact-back.jpg) center left 30%;
background-size:cover;
}
#page-title.contact{
background:url(img/company-back.jpg) center left 30%;
background-size:cover;
}
#page-title.service{
background:url(img/service-back.jpg) center left 50%;
background-size:cover;
}
@media (min-width:768px){
#page-title{
padding:7rem 0;
}
}
@media (min-width:992px){
#page-title.company{
background:url(img/company-back.jpg) center center;
background-size:cover;
}
#page-title.service{
background:url(img/service-back.jpg) center center;
background-size:cover;
}
}
/* ページ共通 */
.s-container{
max-width: 980px;
margin:0 auto;
}
.page-pd{
padding:1rem 1rem;
}
.page-price-pd{
padding:1rem 1rem;
}
@media (min-width:576px){
.page-pd{
padding:2rem 3rem;
}
.page-price-pd{
padding:1rem 3rem;
}
}
/* テーブル共通 */
.table{
--bs-table-bg: var(--bs-white);
}
.table th{
font-weight: 500;
vertical-align: middle;
border-color: var(--bs-red);
width:26%;
}
.table td{
padding:1.3rem 1.3rem;
}
.table td ul li{
list-style:disc!important
}
#service .table th,#price .table th{
border-color: var(--bs-gray-600);
font-weight: normal;
padding: 0;
width:54%;
}

#service .table td{
text-align: right;
padding:0.6rem 0rem;
}
#price .table td{
text-align: right;
padding:0.8rem 0rem;
font-size: 1.2rem;
}
#price .table th{
font-weight: 500;
padding:0.8rem 0rem;
font-size: 1.1rem;
}
#price .table th small{
font-weight: 400;
font-size: 13px;
}
#contact .table th,#contact .table td{
border-color: transparent;
padding:1rem 1.3rem;
}
#contact .table th{
width:30%;
text-align:right;
}
@media (max-width:991.98px){
#contact .table th{
width:35%;
}
}
@media (max-width:767.98px){
#contact .table th,#contact .table td{
padding:0.9rem 0rem;
width:100%;
display:block;
}
#contact .table th{
text-align:left;
padding:1rem 0rem 0.5rem;
}
#contact .table td{
padding:0;
}
#price .table td{
font-size: 1rem;
}
#price .table th{
font-size: 1rem;
}
}
@media (max-width:575.98px){
#factory .table th,#factory .table td,#company .table th,#company .table td{
width:100%;
display:block;
}
#factory .table td,#company .table td{
padding-right:0;
padding-left:0;
border-bottom: 0;
}
#service .table th,#service .table td{
width:100%;
display:block;
}
#service .table td{
border-bottom: 0;
padding:1.3rem 0.6rem;
}
#price .table th{
width:64%;
}
}
/* 会社概要 */
#sdgs{
background: url(img/sdgs-back_sp.jpg) center center;
background-size:cover;
}
#sdgs h2{
max-width:370px;
width:80%;
}
@media (min-width:768px){
#sdgs{
background: url(img/sdgs-back.jpg) center right;
background-size:cover;
}
.company-other{
background: url(img/company-other.jpg) center center;
background-size: cover;
}
}
/* お問い合わせ */
mark{
background:var(--bs-red);
color:var(--bs-white);
font-size:var(--bs-font-xs);
font-weight:700;
padding:0px 6px;
}
@media (min-width:768px){
.contact-h{
height:160px;
}
}
/* 料金一覧 */
.price-icon{
width:70px;
}
@media (min-width:768px){
.price-icon{
width:80px;
}
}

/* サービス */
.service-title-main{
background:linear-gradient(-120deg,rgba(0,0,0,0) 30%,rgba(63,64,65,1) 30.1%,rgba(63,64,65,0.6) 100%);
width:100%;
padding:2rem 1rem 5rem;
}
.service-title{
background:linear-gradient(120deg,rgba(0,0,0,0) 20%,rgba(63,64,65,1) 20.1%,rgba(63,64,65,0.6) 100%);
width:100%;
padding:1rem 1rem;
}
.border-title::after{
content: "";
border-top:1px solid var(--bs-red);
width:100%;
}
.title-mt{
margin-top: -50px;
}
.accordion-button:focus {
box-shadow: none;
}
.rsq{
max-width:300px;
}
@media (min-width:768px){
.position-md-relative{
position:relative;
}
.rsq{
max-width:320px;
width:80%;
right:0%;
top:-50px;
position:absolute;
}
.service-title-main{
background:linear-gradient(-120deg,rgba(0,0,0,0) 40%,rgba(63,64,65,1) 40.1%,rgba(63,64,65,0.6) 100%);
padding:3rem 5rem 7rem;
}
.service-title{
background:linear-gradient(120deg,rgba(0,0,0,0) 30%,rgba(63,64,65,1) 30.1%,rgba(63,64,65,0.6) 100%);
padding:1.5rem 5rem;
}
.title-mt{
margin-top: -70px;
}
}
/* フッター */
footer {
padding:2rem 0 1.3rem;
background:linear-gradient(-60deg,#202020 30%, #101010 30.1%);
}
footer a{
color:var(--bs-white);
font-size:0.9rem;
}
footer .copy{
font-size:var(--bs-font-xs);
}
@media (min-width:992px){
footer {
padding:2.5rem 0 2.5rem;
background:linear-gradient(-60deg,#202020 30%, #101010 30.1%);
}
}

.sp-link a{
width:50%;
font-size:var(--bs-font-s);
}
@media (min-width:576px){
.pc-link{
position:fixed;
top: 20%;
right: 0;
z-index:3040;
transition: .2s;
opacity: 0;
}
.pc-link a:first-child i{
font-size:2rem;
padding-top:0.5rem;
}
.pc-link a:last-child i{
font-size:1.7rem;
padding-top:0.8rem;
}

.pc-link a{
width:86px;
height:86px;
margin-top:1px;
display: block;
font-size:0.8rem;
}
.pc-link a span{
font-size:0.7rem;
display: block;
padding-bottom:0.2rem;
}
}

/* ローディング画面 アニメーション */
.scroll-top{
animation: topin 2s forwards;
}
@keyframes topin {
0% {transform: translatey(360px);}
100% {transform: translatey(0px);}
}
.scroll{
opacity: 0;
visibility: hidden;
transform: translatey(40px);
transition: all 1s;
}
@media (max-width:767.98px) {
.scroll-sp{
opacity: 0;
visibility: hidden;
transform: translatey(60px);
transition: all 1s;
}
}
.js-fade{
opacity: 1;
visibility: visible;
transform: translatex(0px);
}
.open-animation{
animation: fadein 1.5s forwards;
}

@keyframes fadein {
0% {opacity: 0.3}
100% {opacity: 1}
}
#logo_loader {
display: block;
position: fixed;
top: 0px;
left: 0;
width: 100%;
height: 100vh;
z-index: 1100;
background-color: var(--bs-blue);
}
#logo_loader .f_logo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 237px;
height:126px;
text-align: center;
}
#logo_loader .f_logo img {
width: 100%;
height: auto;
animation: loadLogo 1s;
}
@keyframes loadLogo {
0% {opacity: 0}
50% {opacity: 1;z-index: 0;}
}
#logo_loader.open {
animation-name: slideOut;
animation-fill-mode: forwards;
animation-duration: 0.5s;
animation-delay: 1.7s;
}
@keyframes slideOut {
0% {opacity: 0.7}
100% {opacity: 0;z-index: 0;}
}
@media (max-width: 575.98px){
#logo_loader .f_logo {
width: 200px;
height: 106px;
}
#logo_loader .f_logo img {
margin-top: -30px;
}
}