/************************************************************
 * UTF-8
 ************************************************************/
@import url("reset.css");

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

body { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "sans-serif"; scroll-behavior: smooth; font-size: 1.6rem; line-height: 1.6; letter-spacing: 1px; background: #FFF; color: #333; }

img { width: 100%; vertical-align:top; }

a { transition: 0.3s; text-decoration: none; }

a:hover { opacity: 0.8; }


/*-----------------------------
    main
------------------------------*/

header { background: #FFF; padding: 5px 30%; width: 40%; text-align: center; }
#main { max-width: 980px; margin: 0 auto; margin-bottom: 15%; }
#main img { display: block; max-width: 100%; margin: 0 auto; }

@media screen and (max-width: 979px) {
	#main { margin-bottom: 30%; }
}


.title-wrap { margin: 0; background: url("../images/top-bg.png"); background-size: cover; position: relative;}
.title-wrap .top-main { position: absolute; top: 0%; }
.title-wrap .top-main01 { position: absolute; top: 58%; }
.title-wrap .top-main02 { position: absolute; top: 73%; }
.title-wrap .nav-btn { margin: 0% 5%; z-index: 10; padding-bottom: 5%; padding-top: 62%; visibility: hidden; }
.title-wrap .nav-btn .layout-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
.title-wrap .nav-btn .layout-wrap .item-def { width: 48%; padding: 1% 0; margin-bottom: 20%; filter: drop-shadow(1px 4px 4px rgba(0, 0, 0, 0.5)); }
.title-wrap .nav-btn .layout-wrap .item-def:first-child { width: 100%; padding: 1% 0; margin-bottom: 20.5%; filter: drop-shadow(1px 4px 4px rgba(0, 0, 0, 0.5)); }
.title-wrap .nav-btn .layout-wrap .item-def.s-nav { margin-bottom: 20%; }
.btn-ac { position: relative; }
.btn-ac .svBtn { position: absolute; top: 0%; margin: auto; z-index: 1000; overflow: hidden; }
.btn-ac .svBtn::before {  position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: kiran 2.5s ease-in-out infinite; }

@keyframes kiran {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

@keyframes blink {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

.campaign-wrap { margin: 5%; }

.flip-title { animation: blink 1.5s ease-in-out infinite; }

.stripe-bg { background: url("../images/car-bg.png") repeat-y; background-size: contain; }


.p-btn-ac { position: relative; padding-bottom: 21%; margin: 2% 8%; }
.p-btn-ac .svBtn2 { position: absolute; top: 0%; margin: auto; z-index: 4; overflow: hidden; }
.p-btn-ac .svBtn2::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 100px; height: 100%; background: rgba(255, 255, 255, 0.6); animation: kiran 3s ease-in-out infinite; }

.def-wrap { margin: 5% 6%; }
.def-wrap2 { margin: 5% 4%; }

.used-fair { position: relative; }
.used-fair .svBtn3 { position: absolute; bottom: 5%; left: 6%; right: 6%; margin: auto; z-index: 5; overflow: hidden; border-radius: 10px; filter: drop-shadow(1px 4px 4px rgba(0, 0, 0, 0.5)); }
.used-fair .svBtn3::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: kiran 1s ease-in-out infinite; }

.mente { position: relative; }
.mente .svBtn4 { position: absolute; bottom: 4%; left: 5%; right: 5%; margin: auto; z-index: 5; overflow: hidden; border-radius: 10px; }
/*
.mente .svBtn4::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: kiran 1s ease-in-out infinite; }*/

.text-wrap-01 { padding: 3% 5%; line-height: 1.4; font-size: clamp(1.4rem, 1.8vw, 1.4rem); margin-bottom: 1%; }
.text-wrap-01 span.c-blue { color: #008BD5; }
.text-wrap-01 span.c-orange { color: #F08C00; }
.text-wrap-01 span.c-red { color: #CC0000; }
.text-wrap-01 a { color: #00A4E3; }

.text-wrap-02 { padding: 3% 5%; line-height: 1.4; font-size: clamp(1.2rem, 1.8vw, 1.2rem); color: #595757; }
.text-wrap-02 span.f-l { font-size: clamp(1.4rem, 1.8vw, 1.4rem); }
.text-wrap-02 span { color: #EA1C24; }

.page-top { position: fixed; bottom: 10px; right: 10px; background: #999; color: #FFF; border-radius: 2px; padding: 10px 20px; z-index: 100000; text-decoration: none; }
.page-top i { font-size: 3rem; display: block; text-align: center; }
.page-top p { font-size: 8px; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; text-align: center; }

@media screen and (max-width: 979px) {
	.page-top { position: fixed; bottom: 8%; right: 5px; padding: 5px 10px; }
	.page-top i { font-size: 2.4rem; display: block; }
}
/*
footer { background: #000; }
footer .f-logo { max-width: 750px; text-align: center; margin: 0 auto; }
footer img { vertical-align: top; }
*/
.footer-btn { width: 100%; position: fixed; bottom: 0px; padding: 0; z-index: 9; }
.footer-btn ul { display: flex; flex-wrap: wrap; }
.footer-btn ul li { margin-bottom: 0; width: 33.3333333333%; }
.footer-btn ul li a { display: block; padding: 5% 20%; text-align: center; line-height: 1; }
.footer-btn img { height: 14px; }
.footer-btn li:first-child a { background: #CF2E29; }
.footer-btn li:nth-child(2) a { background: #1BAB4C; }
.footer-btn li:nth-child(3) a { background: #004090; }
.footer-btn li:nth-child(4) a { background: #DD9014; }
.footer-btn li:nth-child(5) a { background: #9969AA; }
.footer-btn li:nth-child(6) a { background: #434343; }


.mb3 { margin-bottom: 3%; }
.mb5 { margin-bottom: 5%; }