@charset "utf-8";
/* 1536 , 1530 × 735 ,1366 *//* ←記画面幅でも崩れていないか確認 */

/* カテゴリリンクの飛び先位置の数値を適宜調整してください */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

:root {
    --black: #181919;
    --en:"Roboto", sans-serif;
}

.en, #page_title .box span, #page10 .more_bt2 .font_100per ,.top_cms_title span, .more_bt a,.text-slider div {
    font-family: var(--en);
}
html, .font_100per,.font_15{
    font-size: 18px;
}

/*load*/
#loader .load_logo img{
    max-width: 180px;
}

/*header*/
#pc_nav #logo{
    max-width: 110px;
}
#pc_nav ul li a{
    font-weight: bold;
}

.menu_stick div.before{
        width: 96px;
}
/*footer*/
#footer #logo2{
        max-width: 200px;
}
#bottom_menu ul li a{
    font-size: 16px;
}
.sns_links li {
    max-width: 45px;
}

/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom: 10px;
    right: 100px;
    z-index: 12;
    width: 37%;
    max-width: 330px;
    margin: auto;
    transition: opacity 0.8s, transform 0.8s;
    opacity: 0;
    transform: translateY(20px); 
    pointer-events: none; 
}

.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important; 
}

#fix_bnr:hover{
    opacity: 0.7 !important;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#pc_nav #logo {
    max-width: 90px;
}
html, .font_100per,.font_15{
    font-size: 16px;
}
#footer #logo2 {
    max-width: 150px;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    /*header*/
        .menu_stick div.before {
        width: 72px;
    }
        #sp_nav nav {
        width: 330px;
        }
    
/*fix_bnr*/
#fix_bnr {
width:73%;
left:10px;
}
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


#main_img{
    background-image: url('/Files/img/main_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 700px;
    overflow: hidden;
}
#main_img::before {
    display: none;
}
#main_img div:nth-child(1){
     top: 54%;
    left: 8%;
    transform: translate(0, -50%);
    width: 60%;
    max-width: 940px;
}
#main_img div:nth-child(2){
        width: 35%;
    max-width: 350px;
    right: 0;
    bottom: 20px;
    
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#main_img{
    background-image: url('/Files/img/main_bg_tb.png');
    height: 85vh !important;
}
#main_img div:nth-child(1){
    width: 90%;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img{
    height: 150vw !important;
        min-height: auto;
}
#main_img div:nth-child(1){
    width: 95%;
}
#main_img div:nth-child(2) {
    width: 50%;
    right: -15px;
}
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.intro_title h2 ,.top_title h2{
    font-size: 46px;
}


/*車*/
.car_anim{
    width: 200px;
left: -200px;
  bottom: 0;
  animation: car_animation 10s linear infinite; 
}

@keyframes car_animation {
  0% {
    left: -200px;
  }
  100% {
    left: 100vw; 
  }
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.car_anim {
    width: 130px;
}
.intro_title h2, .top_title h2 {
    font-size: 40px;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.intro_title h2 ,.top_title h2{
    font-size: 28px;
}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*カテゴリリンクの飛び先位置を調整する*/
/* --- PC --- */
:root {
--header-height: 130px;
}

/* --- スマートフォン --- */
@media screen and (max-width: 667px){
:root {
--header-height: 100px;
}
}

.cate_list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
}

/*お問い合わせ*/
.contact_btn span {
    padding: 20px 10px 20px 30px !important;
}
.contact_btn_wrap .icon {
    left: 20px !important;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
/*サイトマップ*/
    #page10 .more_bt2 .font_100per {
        font-size: 14px;
        line-height: 50px;
    }
}