@charset "UTF-8";

* { margin: 0; padding: 0; }

html { font-size: 62.5%; scroll-behavior: smooth; }

body { scroll-behavior: smooth; }

a:hover { opacity: 0.9; }

img { vertical-align:top; }

div#proContents ul, div#proContents li { list-style: none; list-style-position: outside; }

div#proContents a:hover { opacity: 0.9; }

div#proContents a { outline: none; }

#proContents { font-family: -apple-system, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, meiryo, sans-serif; line-height: 1.4; color: #222; -webkit-text-size-adjust: 100%; overflow-x: hidden; margin: 0 auto; }

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

header

------------------------------*/
#header { background: #FFF; margin: 0px auto 0px; width: 980px; text-align: center; }

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

main

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

#main .pc_img { display: block; }
#main .sp_img { display: none; }
#main { width: 980px; margin: 0 auto; font-size: 1.4rem; line-height: 1.7; }
#main img { display: block; max-width: 100%; margin: 0 auto; }

.top-bg { background: url("../images/top-bg.webp"); background-size: cover; }
.bg1 { background: url("../images/bg1.webp"); background-size: cover; }
.nav-01-bg { background: #e50020; }
.nav-03-bg { background: rgba(0, 128, 203, 0.1); }
.nav-04-bg { background: rgba(76, 165, 53, 0.1); }
.nav-05-bg { background: rgba(230, 128, 17, 0.1); }

.usedcar-wrap { position: relative;}
.usedcar-wrap .usedcar-link { position: absolute; bottom: 9%; margin: 0 7%; }
.usedcar-wrap .usedcar-link img { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3)); }

.n-box-wrap { position: relative;}
.n-box-wrap .n-box-link { position: absolute; bottom: 10%; margin: 0 12.5%; }
.n-box-wrap a { position: relative; display: inline-block; overflow: hidden; }
.n-box-wrap a::before { content: ""; position: absolute; top: -30%; left: -80%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.9) 30%, transparent 100%); transform: rotate(20deg); animation: shine 2s infinite; pointer-events: none; }

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

nav

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

nav { padding: 1% 10%; }
nav ul li { margin-bottom: 1%; }
nav ul li a { position: relative; display: inline-block; overflow: hidden; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); border-radius: 21px; }
nav ul li img { display: block; }
nav ul li a::before { content: ""; position: absolute; top: -30%; left: -80%; width: 40%; height: 160%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.9) 50%, transparent 100%); transform: rotate(20deg); animation: shine 2s infinite; pointer-events: none; }

@keyframes shine {
    0% {
        left: -80%;
    }

    15% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

@media screen and (max-width: 979px) {
	nav ul li a { border-radius: 8px; }
}

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

footer

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

footer { width: 100%; background: #000; margin-top: 5%; }
.footer-wrap { max-width: 600px; text-align: center; margin: 0 auto; }
.footer-wrap img { width: 100%; }

.footer-btn { position: fixed; bottom: 5px; right: 5px; z-index: 100; margin-left: 65%; }
.footer-btn .shop-link img { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3)); max-width: 300px; width: 100%; }


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

SP

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

@media screen and (max-width: 979px) {
	#header { margin: 0px auto 0px; width: 100%; }
	#header h1 img { width: 100%; }
	
	#main { width: 100%; margin: 0 auto; }
	#main img { width: 100%; height: auto; }
	
	#main .pc_img { display: none; }
	#main .sp_img { display: block; }

	.footer-wrap { width: 100%; }
}


@keyframes flash1 {
  0%,100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.scale-ani {
  animation: scale-motion 2.5s infinite;
  opacity: 1;
}
@keyframes scale-motion {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(3deg, 3deg);
  }
  10% {
    transform: skew(-3deg, -3deg);
  }
  15% {
    transform: skew(2deg, 2deg);
  }
  20% {
    transform: skew(-1deg, -1deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}

.page-top { margin: 5% 10%; }


.caution-wrap1 { font-size: clamp(14px, 2vw, 16px); padding: 3%;line-height: 1.4; color: #333; }
.caution-wrap1 .red-c { color: #e50012; }
.caution-wrap1 .blue-c { color: #00a4e3;; }
.caution-wrap1 a { color: #00a4e3;; }

.caution-wrap2 { font-size: clamp(12px, 2vw, 14px); padding: 3%;line-height: 1.4; color: #333; }
.caution-wrap2 .red-c { color: #e50012; }
.caution-wrap2 .blue-c { color: #00a4e3;; }
.caution-wrap2 a { color: #00a4e3;; }

.caution-wrap3 { text-align: center; padding: 3%; }
.caution-wrap3 p { font-size: clamp(10px, 2vw, 20px); padding: 0.5%; }
.caution-wrap3 .c-top-wrap { background: #181112; color: #FFF; }
.caution-wrap3 .c-bottom-wrap { background: #CCC; color: #000; letter-spacing: 0.2em; font-weight: 600; }

.footer-btn { position: fixed }

/*********************

sns

**********************/

.sns-wrap { margin: 10% 12.5% 5%; }
.sns-wrap .sns-title { padding: 3% 5% 1% 5%; }
.sns-wrap ul { display: flex; justify-content: space-between; align-items: center; }
.sns-wrap ul li { list-style: none; width: 100%; margin: 1% 5%; }


/*********************

space

**********************/

.mb5 { margin-bottom: 5%; }
.pb2 { padding-bottom: 2%; }
.pb4 { padding-bottom: 4%; }
.pb7 { padding-bottom: 7%; }