@charset "UTF-8";
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input {
margin: 0;
padding: 0;
}
html, body, div, p, h1, h2, h3, h4, h5, h6 {
box-sizing: border-box;
}
img {
border: 0;
vertical-align: top;
}
:focus {
outline: 0;
}
ul, li {
list-style-type: none;
}
a {
transition: all 0.3s;
text-decoration: none;
color: #000;
}
img {
max-width: 100%;
}
.mt3em {
margin-top: 3em;
}
.mt2em {
margin-top: 2em;
}
.mt1em {
margin-top: 1em;
}
.st_wt {
fill: #fff;
}
.st_br {
fill: #6a2200;
}
br.sponly {
display: none;
}
body {
font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
font-size: 100%;
color: #000000;
background: #fff;
}

#top_head {
display: none;
}


/* SCROLLER */
#scroll_guide{
width: 100%;
position: relative;
margin: 1em auto 5em;
text-align: center;
font-size: 12px;
line-height: 2.4em;
z-index: 101;
/* height: 80px; */
color: #c13e00;
}
.scrolldown {
position: absolute;
width: 1px;
height: 40px;
left: 0;
right: 0;
margin: 0 auto;
overflow: hidden;
}
.scrolldown .c-line {
width: 100%;
height: 100%;
display: block;
background: linear-gradient(to bottom, #c13e00 50% , white 50% );
background-position: 0 -40px;
background-size: 100% 200%;
animation: scrolldown 4.2s infinite;
}
@keyframes scrolldown {
0%{
background-position: 0 -40px;
}
25% {
background-position: 0 0;
}
50%{
background-position: 0 40px;
}
100%{
background-position: 0 40px;
}
}


/* COVER */
#all_wrap {
width: 100%;
position: relative;
}


/* SP MENU */
.naviOverlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 300;
box-sizing: border-box;
}
spBox {
display: block;
}
.spBox .menu {
display: none;
position: absolute;
right: 5px;
z-index: 2000;
padding: 5px;
cursor: pointer;
}
.spBox .close {
cursor: pointer;
}
.ulMenuBox {
padding-top: 10px;
position: fixed;
top: 0;
right: -270px;
width: 270px;
background-color: #FFF;
border: 1px solid #000;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
border-left: 4px solid #232323;
z-index: 9999 !important;
}
.ulMenuBox p {
margin: 0 10px 15px 0;
text-align: right;
}
.ulMenuBox p.sns {
text-align: center;
margin: 0;
padding-top: 10px;
}
.ulMenuBox p.sns img {
padding: 0 10px;
}
.ulMenuBox li {
border-top: #e8e8e8 solid 1px;
}
.ulMenuBox li img {
width: 100%;
height: auto;
}
.ulMenuBox li a {
display: block;
}
.ulMenuBox li > ul li {
float: left;
width: 49%;
border-bottom: #e8e8e8 solid 1px;
border-left: #e8e8e8 solid 1px;
border-top: none;
}
@media screen and (max-width:1020px) {
.spBox .menu {
display: block;
top: 34px;
}
}
@media screen and (max-width:860px) {
.spBox .menu {
top: 47px;
}
}


/* HEADER */
.pt10 {
padding-top: 10px;
}
.pt27 {
padding-top: 27px;
}
#head_cover {
position: absolute;
top: 0;
height: 2000px;
width: 100%;
pointer-events: none;
}
#top_head {
pointer-events: auto;
width: 100%;
position: -webkit-sticky; /* Safariに対応する */
position: sticky; /* 要素を固定/解除する */
top: 0; /* 縦方向の閾値 */
width: 100%;
height: 140px;
color: #5a0a00;
background: #feb302;
z-index: 501;
box-shadow: 0px 1px 12px -1px #331c00;
}
#top_head_wrap {
width: 96%;
max-width: 980px;
margin: auto;
}
#top_head #h1 {
background: #5c3200;
height: 22px;
overflow: hidden;
font-size: 13px;
color: #a7a7a7;
box-shadow: 0px 1px 12px -1px #331c00;
}
#top_head #h1 h1 {
font-size: 13px;
width: 980px;
margin: auto;
}
#top_head #logo {
width: 500px;
float: left;
}
#top_head #logo .pt10 {
width: 205px;
height: auto;
}
#top_head #logo .pt27 {
width: 275px;
height: auto;
}
#top_head #submenu {
width: 400px;
float: right;
text-align: right;
padding-top: 12px;
padding-right: 4px;
font-size: 72%;
line-height: 1.5em;
}
#top_head #submenu a.link_blank {
padding-right: 20px;
background: url(../img/common/link_blank_icon.png) no-repeat;
background-position: right top;
}
#submenu a, #submenu a:visited {
color: #5a0a00;
text-decoration: none;
}
#submenu a:hover {
color: #ffffff;
text-decoration: none;
}
#globalmenu {
width: 980px;
clear: both;
}
@media screen and (max-width:1020px) {
br.sponly {
display: block;
}
#globalmenu {
display: none;
}
#top_head #logo {
width: 260px;
float: none;
margin: auto;
}
#top_head #logo .pt10 {
width: 100%;
height: auto;
}
#top_head #logo .pt27 {
padding-top: 0;
width: 100%;
height: auto;
}
#top_head #h1 {
background: #5c3200;
height: auto;
overflow: auto;
max-height: 42px;
font-size: 13px;
padding: 5px 0;
color: #a7a7a7;
box-shadow: 0px 1px 12px -1px #331c00;
}
#top_head #h1 h1 {
width: 95%;
margin: auto;
line-height: 1.2;
}
#submenu {
display: none;
}
}
@media screen and (max-width:860px) {
#top_head #logo {
width: 205px;
}
#top_head #logo .pt10 {
padding-top: 14px;
}
}


/* MAIN SLIDE */
#main_slide_area{
width: 100%;
height: 619px;
background: url("../img/top2022/top_slide_bg1100.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#main_slide {
position: relative;
width: 100%;
max-width: 1100px;
margin: auto;
}
h1.top_logo {
position: fixed;
z-index: 500;
top: 14px;
left: 22px;
width: 150px;
}
.top_slide {
opacity: 0;
transition: opacity .3s linear;
}
.top_slide.slick-initialized{
opacity: 1;
}
@media screen and (max-width:1115px){
#main_slide_area{
height: 56.25vw;
}
}


/* COMMON */
.top_thread {
width: 100%;
padding: 2em 0 3em;
}
.top_contents {
width: 90%;
max-width: 980px;
margin: auto;
position: relative;
}
.top_contents h2 {
display: table;
padding-bottom: 5px;
margin-bottom: 1em;
}

.top_contents h2::after {
content: "";
background-color: #FFF;
width: 0%;
height: 4px;
position: absolute;
bottom: 0;
left: 0;
margin-top: 5px;
transition-duration: 0.4s;
transition-delay: 0.6s;
opacity: 0;
}
.top_contents h2.effect::after {
content: "";
width: 100%;
opacity: 1;
background-color: #ffb300;
}
.top_contents h2.lead {
margin-bottom: 0.25em;
}
p.lead {
font-size: 90%;
margin-bottom: 2em;
}
p.lead{
position: relative;
left: -100px;
opacity: 0;
transition-duration:0.8s;
transition-delay:0.3s;
}
p.lead.effect{
left: 0;
opacity: 1;
}
a.btn_center {
background: #6a2200;
width: 450px;
height: 76px;
margin: auto;
text-align: center;
color: #fff;
display: block;
margin-top: 2em;
line-height: 76px;
}
a.btn_center:hover {
background: #c13e00;
}
a.btn_center img {
vertical-align: middle;
}
.btn_double_wrap {
text-align: center;
padding: 2em 0 0;
}
.btn_double_wrap button {
display: inline-block;
vertical-align: top;
}
.btn_double_wrap .btn-3 {
margin-top: 0;
}
.btn_double_wrap .btn-3:hover {
display: inline-block;
}
a.btn_double {
background: #6a2200;
width: 450px;
height: 76px;
line-height: 76px;
text-align: center;
color: #fff;
display: inline-block;
vertical-align: top;
margin: 0 5px;
}
a.btn_double:hover {
background: #c13e00;
}
a.btn_double img {
vertical-align: middle;
}
a.btn_double_wt {
background: #fff;
width: 446px;
height: 72px;
line-height: 72px;
text-align: center;
color: #6a2200;
border: solid 2px #6a2200;
display: inline-block;
margin: 0 5px;
}
a.btn_double_wt:hover {
background: #c13e00;
border: solid 2px #c13e00;
color: #fff;
}
a.btn_double_wt img {
vertical-align: middle;
}
a.btn_double_wt img.over {
display: none;
}
a.btn_double_wt:hover img.still {
display: none;
}
a.btn_double_wt:hover img.over {
display: inline;
}
.btn_totop {
position: fixed;
right: 30px;
bottom: 30px;
z-index: 50;
cursor: pointer;
}


/*BUTTON*/
button.btn-3 a:hover {
opacity: 1;
}
.btn-3 {
color: #fff;
font-size: 105%;
background: #6a2200;
width: 450px;
height: 76px;
line-height: 76px;
margin: auto;
text-align: center;
color: #fff;
display: block;
margin-top: 2em;
position: relative;
border: 0;
padding: 0;
transition: all 0.4s ease;
}
.btn-3 a {
display: block;
color: #2F2F2F;
color: #fff;
}
.btn-3 a img {
vertical-align: middle;
}
.btn-3 a img.over {
display: none;
}
.btn-3:hover {
display: block;
background: rgba(255, 255, 255, 0.8);
color: #c13e00;
}
.btn-3 a:hover img.still {
display: none;
}
.btn-3 a:hover img.over {
display: inline;
}
.btn-3:hover a {
color: #c13e00;
}
.btn-3 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-3:before, .btn-3:after {
position: absolute;
content: "";
right: 0;
top: 0;
background: #c13e00;
transition: all 0.4s ease;
}
.btn-3:before {
height: 0%;
width: 3px;
}
.btn-3:after {
width: 0%;
height: 3px;
}
.btn-3:hover:before {
height: 100%;
}
.btn-3:hover:after {
width: 100%;
}
.btn-3 span:before, .btn-3 span:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
background: #c13e00;
transition: all 0.4s ease;
}
.btn-3 span:before {
width: 3px;
height: 0%;
}
.btn-3 span:after {
width: 0%;
height: 3px;
}
.btn-3 span:hover:before {
height: 100%;
}
.btn-3 span:hover:after {
width: 100%;
}


@media screen and (max-width:570px){
.btn-3 {
width: 100%;
}
a.btn_double_wt {
width: 100%;
margin: 0;
margin-top: 10px;
box-sizing: border-box;
}
}



/* EFFECTS */

.fx_left{
position: relative;
left: -100px;
opacity: 0;
transition-duration:0.8s;
}
.fx_left.effect{
left: 0;
opacity: 1;
}
.fx_right{
position: relative;
right: -100px;
opacity: 0;
transition-duration: 0.8s;
transition-delay:0.2s;
}
.fx_right.effect{
right: 0;
opacity: 1;
}
.fx_bottom{
opacity: 0;
position: relative;
bottom: -30px;
transition-duration: 0.8s;
}
.fx_bottom.effect {
opacity: 1;
bottom: 0;
}
.fx_title{
position: relative;
left: 0;
opacity: 1;
}
.fx_left.effect{
left: 0;
opacity: 1;
}


/* PICK UP */
#top_pickup {
position: relative;
}

.pickup_list {
position: relative;
opacity: 0;
right: -100px;
transition-duration:0.8s;
transition-delay: 0.2s;	
}
.pickup_list.effect {
right: 0px;
opacity: 1;
}

#top_pickup ul {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
}
#top_pickup li {
width: 22%;
}
.pickup_pic {
transition-duration: 0.3s;
}
.pickup_pic:hover {
transform: translateY(-10px);
box-shadow: 0 5px 3px rgba(0, 0, 0, 0.05);
}
.pickup_text {
padding: 0.5em 0;
position: relative;
left: -30px;
opacity: 0;
transition-duration:1s;
transition-delay: 0.5s;	
}
.pickup_text.effect{
left: 0;
opacity: 1;
}

.pickup_text h3 {
line-height: 1.3;
font-size: 110%;
padding-bottom: 0.4em;
}
p.pickup_price {
font-size: 12px;
border-bottom: solid 1px #686868;
padding-bottom: 0.25em;
margin-bottom: 0.25em;
}
p.pickup_shop {
font-size: 12px;
}
a.btn_detail {
background: #000;
width: 130px;
margin: auto;
text-align: center;
color: #fff;
display: block;/*
font-family: 'Oswald', sans-serif;
letter-spacing: 0.05em;*/
font-size: 13px;
}
a.btn_detail:hover {
background: #727272;
display: block;
}
.detail_btns{
position: relative;
left: -20px;
opacity: 0;
transition-duration:1s;
transition-delay: 0.5s;	
}
.detail_btns.effect {
left: 0;
opacity: 1;
}



/* NEWS */
#top_news {
background: #fffbed;
}
#top_news ul.news_list{
position: relative;
bottom: -30px;
opacity: 0;
transition-duration:1s;
transition-delay: 0.5s;	
}
#top_news ul.news_list.effect {
bottom: 0;
opacity: 1;
}


#top_news li {
font-size: 14px;
border-bottom: solid 1px #ff9700;
line-height: 1.3;
padding: 0.8em 0;
}
#top_news li .news_date {
color: #ff9700;
padding-right: 1.5em;
}
#top_news li .news_icon{
background: #ff9700;
color: #fff;
padding: 0.15em 1em;
margin-right: 1em;
}
#top_news li a:hover {
color: #ff9700;
}
#news_banner {
margin-top: 3em;
}

p.news_banner {
max-width: 760px;
width: 95%;
margin: 0 auto 1em;
}

p.news_banner a{
transition-duration: 0.3s;
position: relative;
display: block;
}
p.news_banner a:hover {
transform: translateY(-10px);
box-shadow: 0 5px 3px rgba(0, 0, 0, 0.05);
}


@media screen and (max-width:640px){

#top_pickup li {
width: 48%;
margin-bottom: 30px;
}
a.btn_detail {
width: 100%;
}
}


/* CAR MODEL */
#top_carmodel {}

.btn_carmodel {
position: relative;
display: inline-block;
vertical-align: top;
width: 240px;
height: 240px;
border-radius: 120px;
border-radius:20px;
background: #6a2200;
text-align: center;
color: #fff;
cursor: pointer;
transition: all 0.3s;
}
.btn_carmodel h3 {
font-size: 120%;
width: 100%;
position: absolute;
bottom: 15%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFEC00;
}
.btn_carmodel h4 {
font-size: 110%;
line-height: 1.6;
width: 100%;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn_carmodel svg {
position: absolute;
width: 30px;
bottom: 15px;
left: 0;
right: 0;
margin: auto;
transition: all 0.3s;
transform: rotateZ(0deg);
}
.btn_carmodel:hover {
background: #c13e00;
}
.btn_carmodel:hover svg {
bottom: 10px;
}
#btn_lancru {
margin-left: 9%;
margin-right: 3.8%;
}
#btn_hiace {
margin-right: 3.8%;
}
#carmodel_lancru, #carmodel_hiace, #carmodel_ustoyota {
padding: 2em 0 3em;
}
.btn_carmodel.is-open svg {
transform: rotateZ(180deg);
}
.lancru_wrap {
display: flex;
flex-wrap: wrap;
margin: 3em 0;
}
.lancru_car {
width: 21%;
margin: 10px 2%;
text-align: center;
font-size: 80%;
}
.lancru_car img {
width: 100%;
transition: all 0.3s;
}
.lancru_car:hover img {
transform: translateY(-10px);
}
.btn_wide {
width: 100%;
max-width: 760px;
height: 80px;
line-height: 80px;
margin: auto;
background: #6a2200;
text-align: center;
color: #fff;
transition: all 0.3s;
margin-bottom: 0.25em;
}
.btn_wide a {
color: #fff;
display: block;
}
.btn_wide:hover {
background: #c13e00;
}
.btn_wide_gray {
width: 100%;
max-width: 760px;
height: 80px;
line-height: 80px;
margin: auto;
background: #ecebea;
text-align: center;
color: #6a2200;
transition: all 0.3s;
cursor: pointer;
margin-bottom: 0.25em;
}
.btn_wide_gray svg {
width: 1.25em;
transition: all 0.3s;
transform: rotateZ(0deg);
}
.btn_wide_gray:hover svg {
transform: translateY(5px);
}
.btn_wide_gray.is-open svg {
transform: rotateZ(180deg);
}
#lancru_links,
#lancru_yotei{
width: 100%;
max-width: 760px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 2em;
}
.btn_lancru_link {
text-align: center;
width: 49.5%;
margin-bottom: 1%;
color: #6a2200;
border: solid 2px #6a2200;
font-size: 90%;
height: 60px;
line-height: 60px;
transition: all 0.3s;
}
.btn_lancru_link_full {
/*margin-left: 24.5%;*/
}
.btn_lancru_link a {
color: #6a2200;
display: block;
}
.btn_lancru_link:hover {
background: #c13e00;
border: solid 2px #c13e00;
color: #fff;
}
.btn_lancru_link:hover a {
color: #fff;
}
.lancru_links_subtitle{
width: 100%;
text-align: center;
background: #EDE2D0;
color: #6a2200;
padding: 2px 0;
font-size: 90%;
margin-bottom: 0.5em;
margin-top: 1.5em;
}
.yotei_sp{
display: none;
}
p.yotei_note{
text-align: center;
font-size: 85%;
color: #6a2200;
margin: auto;
position: relative;
padding-bottom: 1em;
}

.carmodel_link {
color: #007bed;
font-size: 110%;
}
.carmodel_link a {
color: #007bed;
font-size: 110%;
transition: all 0.3s;
}
.carmodel_link a span.txt {
transition: all 0.3s;
display: inline-block;
transform: translateX(0px);
}
.carmodel_link a span.tri {
transition: all 0.3s;
transform: rotateZ(0deg);
display: inline-block;
}
.carmodel_link a:hover {
color: #007bed;
font-size: 110%;
transition: all 0.3s;
}
.carmodel_link a:hover span.txt {
transform: translateX(5px);
display: inline-block;
}
.carmodel_link a:hover span.tri {
transform: rotateZ(360deg);
display: inline-block;
}
.carmodel_corner {
width: 100%;
max-width: 760px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 2em;
}
br.gallery_sp{
display: none;
}
.btn_democar {
width: 49%;
height: 140px;
line-height: 140px;
background: #6a2200;
color: #fff;
text-align: center;
margin-bottom: 1em;
}
.btn_custom {
width: 49%;
height: 140px;
line-height: 140px;
background: #6a2200;
color: #fff;
text-align: center;
margin-bottom: 1em;
}
.btn_democar a, .btn_custom a {
display: block;
color: #fff;
}
.btn_democar a:hover, .btn_custom a:hover {
background: #c13e00;
display: block;
}
.btn_full {
width: 100%;
margin-bottom: 1em;
transition: all 0.3s;
}
.btn_full:hover {
transform: translateY(-10px);
}
.carmodel_main{
box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.4);
}

#hiace_links,
#hiace_yotei{
width: 100%;
max-width: 760px;
margin: auto;
padding-top: 1em;
padding-bottom: 2.5em;
line-height: 2em;
}
#hiace_links label,
#hiace_yotei label{
display: inline-block;
margin-right: 1.5em;
}
#hiace_links label input,
#hiace_yotei label input{
margin-right: 0.2em;
}
#ustoyota_links {
width: 100%;
max-width: 760px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 1em;
}
.carmodel_search_btn input{
margin: auto;
display: block;
width: 80%;
max-width: 400px;
text-align: center;
background: #EDE2D0;
color: #6a2200;
padding: 8px 0;
font-size: 100%;
margin-top: 1em;
border: 0;
cursor: pointer;
}
.btn_ustoyota_link {
text-align: center;
width: 49.5%;
width: 49.5%;
margin-bottom: 1%;
color: #6a2200;
border: solid 2px #6a2200;
font-size: 90%;
height: 60px;
line-height: 60px;
transition: all 0.3s;
}
.btn_ustoyota_link a {
color: #6a2200;
display: block;
}
.btn_ustoyota_link:hover {
background: #c13e00;
border: solid 2px #c13e00;
color: #fff;
}
.btn_ustoyota_link:hover a {
color: #fff;
}
@media screen and (max-width:1100px) {
#btn_lancru {
margin-left: 7.5%;
}
}
@media screen and (max-width:980px) {
#btn_lancru {
margin-left: 5.5%;
margin-right: 3.0%;
}
#btn_hiace {
margin-right: 3.0%;
}
.btn_carmodel {
width: 220px;
height: 220px;
}
.btn_carmodel h3 {
font-size: 120%;
}
}
@media screen and (max-width:880px) {
.btn_carmodel {
width: 27vw;
height: 27vw;
}
#btn_lancru {
margin-left: 1vw;
margin-right: 1vw;
}
#btn_hiace {
margin-right: 1vw;
}

.btn_carmodel h3 {
font-size: 100%;
}
.btn_carmodel h4 {
font-size: 100%;
}
}

@media screen and (max-width:600px) {


br.hiace_link_pc{
display: none;
}
}
@media screen and (max-width:570px){
.yotei_pc{
display: none;
}
.yotei_sp{
display: inline-table;
}
.lancru_car {
width: 29%;
}
.btn_custom {
line-height: 1.2;
display: table;
}
.btn_custom a{
height: 140px;
display: table-cell;
vertical-align: middle;
}
.btn_custom a:hover{
height: 140px;
display: table-cell;
vertical-align: middle;
}
br.gallery_sp{
display: block;
}
}


/* FD CLASSIC */
#top_classic {}

.insta_cover{
width: 100%;
overflow:hidden;
}
.instagram-container {
display: flex;
flex-wrap: wrap;
margin: 0 -1px;
font-size: 0;
padding-bottom: 10px;
position: relative;
justify-content: center;
}
.instagram-item {
width: 16.2%;
margin: 1px;
position: relative;
}
.instagram-item:before {
content: "";
display: block;
padding-top: 100%;
}
.instagram-item img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
object-fit: cover;
}
.instagram-item a:hover {
opacity: 0.7;
}
.ig-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: rgba(255, 255, 255, 0.8);
background: no-repeat center / 30% url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJwbGF5IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtcGxheSBmYS13LTE0IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNNDI0LjQgMjE0LjdMNzIuNCA2LjZDNDMuOC0xMC4zIDAgNi4xIDAgNDcuOVY0NjRjMCAzNy41IDQwLjcgNjAuMSA3Mi40IDQxLjNsMzUyLTIwOGMzMS40LTE4LjUgMzEuNS02NC4xIDAtODIuNnoiPjwvcGF0aD48L3N2Zz4=');
opacity: 0.7;
}
p.insta_link {
text-align: right;
font-size: 85%;
}
p.insta_link a {
color: #6a2200;
text-decoration: underline;
}
p.insta_link a:hover {
opacity: 60%;
}
.insta_banner{
width: 100%;
position: relative;
}


/*  Instagram 2024 ---------------------------------*/

.ig-video {
    position: absolute;
    top: 3%;
    left: 0;
    bottom: 0;
    right: 3%;
    opacity: 0.8;
background: no-repeat top right / 20% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 24 24' %3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M12.5,3.3H9.4l0.2,0.5L11,8.1h3.1l-1.2-3.7L12.5,3.3z M15.2,9.7C15.2,9.7,15.2,9.7,15.2,9.7h5.6v6.8 c0,2.4-2,4.4-4.4,4.4H7.6c-2.4,0-4.4-2-4.4-4.4V9.7h7.2c0,0,0,0,0,0H15.2z M15.8,8.1l-1.4-4.3l-0.2-0.5h2.2c2.4,0,4.4,2,4.4,4.4v0.4 H15.8z M7.6,3.3L7.6,3.3l0.4,1.1l1.2,3.7H3.2V7.7C3.2,5.3,5.2,3.3,7.6,3.3z M10.5,10.7c-0.2-0.2-0.6-0.2-0.8-0.1 c-0.3,0.1-0.4,0.4-0.4,0.7v5.6c0,0.3,0.2,0.6,0.4,0.7c0.3,0.1,0.6,0.1,0.8-0.1l4-2.8c0.2-0.1,0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7 L10.5,10.7z'/%3E%3C/svg%3E");
}



/* FD-BOX */
#top_fdbox {}


/* FD CAMP */
#top_camp {}


/* AISYA */
#top_aisya {}

.aisya-container {
display: flex;
flex-wrap: wrap;
margin: 0 -1px;
font-size: 0;
padding-bottom: 10px;
position: relative;
justify-content: center;
}
.aisya-item {
width: 16.2%;
margin: 1px;
position: relative;
}
.aisya-item:before {
content: "";
display: block;
padding-top: 100%;
}
.aisya-item img {
position: absolute;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
object-fit: cover;
}
.aisya-item a:hover {
opacity: 0.7;
}


/* BRANDS */
#top_brands {
background: #fffbed;
}
.brand_cover{
width: 100%;
overflow: hidden;
}
.brand_cover.effect{
overflow:visible;
}
.fx_brand{
position: relative;
right: -100px;
opacity: 0;
transition-duration: 0.8s;
transition-delay:0.2s;
}
.fx_brand.effect{
right: 0;
opacity: 1;
}
#brand_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.btn_brand {
width: 310px;
width: 48%;
margin-bottom: 1em;
/*↑修正点20240216*/
transition-duration: 0.3s;
position: relative;
text-align: center;
display: table;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.btn_brand img {
transition-duration: 0.3s;
}
.btn_brand a {
display: none;
font-size: 12px;
line-height: 2em;
word-break: break-all;
}
.btn_brand:hover {
background: #000;
overflow: visible;
}
.btn_brand:hover img {
opacity: 0.3;
}
.btn_brand:hover a {
position: absolute;
display: block;
padding-top: 17%;
color: #fff;
height: 100%;
left: 0;
right: 0;
margin: auto;
z-index: 500;
box-sizing: border-box;
}
.brand_more{
border: solid 1px #fff;
padding: 4px 2em;
}
#brand_arb_info {
display: none;
transition-duration: 0.3s;
}
#brand_arb:hover #brand_arb_info {
position: absolute;
display: block;
top: 165px;
left: 0;
z-index: 500;
box-sizing: border-box;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 90%;
width: 450px;
width: 100%;
/*↑修正点20240216*/
text-align: left;
}
/*追加20240216↓*/
#brand_tcd_info {
display: none;
transition-duration: 0.3s;
}
#brand_tcd:hover #brand_tcd_info {
position: absolute;
display: block;
top: 165px;
left: 0;
z-index: 500;
box-sizing: border-box;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 90%;
width: 100%;
text-align: left;
}
#brand_rhinorack_info {
display: none;
transition-duration: 0.3s;
}
#brand_rhinorack:hover #brand_rhinorack_info {
position: absolute;
display: block;
top: 165px;
left: 0;
z-index: 500;
box-sizing: border-box;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 90%;
width: 450px;
width: 100%;
/*↑修正点20240216*/
text-align: left;
}
#brand_linex_info {
display: none;
transition-duration: 0.3s;
}
#brand_linex:hover #brand_linex_info {
position: absolute;
display: block;
top: 165px;
right: 0;
z-index: 500;
box-sizing: border-box;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 90%;
width: 450px;
width: 100%;
/*↑修正点20240216*/
text-align: left;
}
#brand_pendleton_info {
display: none;
transition-duration: 0.3s;
}
#brand_pendleton:hover #brand_pendleton_info {
position: absolute;
display: block;
top: 165px;
right: 0;
z-index: 500;
box-sizing: border-box;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 90%;
width: 470px;
width: 100%;
/*↑修正点20240216*/
text-align: left;
}
p.brand_memo {
color: #ffb300;
font-size: 85%;
padding-top: 1em;
}
@media screen and (max-width:1050px){
/* 20240216 コメントアウトで設定不可に */
/*
.btn_brand {
width: 32%;
}
.btn_brand:hover a {
padding-top: 15%;
}
#brand_arb:hover #brand_arb_info {
top: 15vw;
left: 0;
font-size: 90%;
width: 60vw;
}
#brand_rhinorack:hover #brand_rhinorack_info {
top: 15vw;
left: 0;
font-size: 90%;
width: 50vw;
}
#brand_linex:hover #brand_linex_info {
top: 15vw;
right: 0;
font-size: 90%;
width:50vw;
}
#brand_pendleton:hover #brand_pendleton_info {
top: 15vw;
right: 0;
font-size: 90%;
width: 60vw;
}
*/
}

@media screen and (max-width:640px){

.btn_carmodel h3 {
font-size: 90%;
}
.btn_carmodel h4 {
font-size: 90%;
}
.btn_brand {
width: 100%;
margin: auto;
margin-bottom: 20px;
}
.btn_brand:hover {
background: rgba(0,0,0,0.9);
overflow: visible;
}
.btn_brand:hover a {
padding-top: 10%;
}
.btn_brand img {
width: 100%;
max-width: 310px;
}
.btn_brand:hover img {
opacity: 0;
}
#brand_arb:hover #brand_arb_info {
top: 27vw;
left: 0;
width: 87vw;
}
#brand_rhinorack:hover #brand_rhinorack_info {
top: 27vw;
left: auto;
right: 0;
width: 87vw;
}
#brand_linex:hover #brand_linex_info {
top: 27vw;
left: 0;
width: 87vw;
}
#brand_pendleton:hover #brand_pendleton_info {
top: 27vw;
right: 0;
width: 87vw;
}
}


/* SHOP */
#top_shop {
background: #fffbed;
}
#shop_list {}
.btn_shop {
width: 18.91%;
height: 140px;
margin: 0 0.3%;
position: relative;
display: inline-block;
vertical-align: top;
background: #6a2200;
text-align: center;
color: #fff;
cursor: pointer;
transition: all 0.3s;
}
.btn_shop h3 {
font-size: 110%;
line-height: 1.3;
width: 100%;
position: absolute;
top: 44%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn_shop svg {
position: absolute;
width: 30px;
bottom: 20px;
left: 0;
right: 0;
margin: auto;
transition: all 0.3s;
}
.btn_shop:hover {
background: #c13e00;
}
.btn_shop:hover svg {
bottom: 10px;
}
.btn_shop.is-open {
background: #c13e00;
}
.btn_shop.is-open svg {
transform: rotateZ(180deg);
}
#shop_info_lancru {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 2em 0;
}
#shop_info_lancru::after {
display: block;
content: "";
width: 32%;
}
#shop_info_hiace {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 2em 0;
}
#shop_info_hiace::after {
display: block;
content: "";
width: 32%;
}
#shop_info_ustoyota {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 2em 0;
}
#shop_info_ustoyota::after {
display: block;
content: "";
width: 32%;
}
#shop_info_linex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 2em 0;
}
#shop_info_linex::after {
display: block;
content: "";
width: 32%;
}
#shop_info_apple {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 2em 0;
}
#shop_info_apple::after {
display: block;
content: "";
width: 32%;
}
.shop_info {
width: 32%;
background: #fff;
border: solid 2px #6a2200;
font-size: 80%;
margin-bottom: 1em;
}
.shop_info h4 {
background: #6a2200;
color: #FFF;
padding: 3px 0 3px 5px;
}
.shop_info p {
padding-bottom: 0.5em;
}
.shop_info p.shop_info_lead {
color: #6a2200;
padding-bottom: 0.5em;
}
.shop_info_txt {
padding: 5px 15px 10px;
}
.shop_info_pic {
width: 56%;
vertical-align: top;
display: inline-block;
padding-right: 2%;
}
.shop_info_link {
width: 42%;
vertical-align: top;
display: inline-block;
}
a.shop_btn_zaiko {
width: 100%;
background: #ffb300;
color: #6a2200;
text-align: center;
display: block;
padding: 0.5em;
box-sizing: border-box;
margin-bottom: 0.5em;
}
a.shop_btn_detail {
width: 100%;
background: #e6e6da;
color: #6a2200;
text-align: center;
display: block;
padding: 0.5em;
box-sizing: border-box;
}
a.shop_btn_zaiko:hover {
background: #6a2200;
color: #fff;
}
a.shop_btn_detail:hover {
background: #6a2200;
color: #fff;
}

@media screen and (max-width:1020px){
.btn_shop {
width: 18.8%;
height: 140px;
margin: 0 0.3%;
}
}
@media screen and (max-width:880px){
br.sp880{
display: none;
}
.btn_shop {
width: 18.6%;
font-size: 90%;
height: 15vw;
}
.shop_info {
width: 48%;
}
}
@media screen and (max-width:760px){
.btn_shop {
font-size: 80%;
}
.btn_shop svg {
width: 20px;
bottom: 15px;
}
}
@media screen and (max-width:640px){
.btn_shop {
width: 31.8%;
height: 22vw;
font-size: 90%;
margin-bottom: 10px;
}
br.sp880{
display: block;
}
}

@media screen and (max-width:600px){
#btn_lancru {
margin-left: 0.5vw;
margin-right: 0.5vw;
}
.btn_carmodel {
width: 27vw;
height: 27vw;
}
.btn_carmodel h3 {
line-height: 1.2;
/*font-size: 90%;*/
/*top: 45%;*/
}
.btn_carmodel h3 {
font-size: 62.5%;
    bottom: 17%;
}
.btn_carmodel h4 {
font-size:70%;
line-height: 1.2;
}
.btn_carmodel svg {
position: absolute;
width: 15px;
bottom: 10px;
/*bottom: 18px;*/
}
.btn_carmodel:hover svg {
bottom: 5px;
}
.shop_info {
width: 100%;
}
#shop_info_lancru {
padding: 0.5em 0;
}
#shop_info_hiace {
padding: 0.5em 0;
}
#shop_info_ustoyota {
padding: 0.5em 0;
}
#shop_info_linex {
padding: 0.5em 0;
}
#shop_info_apple {
padding: 0.5em 0;
}
}



/* BLOG */
#top_blog {
background: #fffbed;
}
#blog_list {}
.btn_blog {
display: inline-block;
width: 15.5%;
height: 140px;
margin: 0 0.3%;
position: relative;
display: inline-block;
vertical-align: top;
background: #6a2200;
text-align: center;
color: #fff;
cursor: pointer;
transition: all 0.3s;
}
.btn_blog h3 {
font-size: 110%;
line-height: 1.3;
width: 100%;
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn_blog svg {
position: absolute;
width: 30px;
bottom: 20px;
left: 0;
right: 0;
margin: auto;
transition: all 0.3s;
}
.btn_blog:hover {
background: #c13e00;
}
.btn_blog:hover svg {
bottom: 10px;
transition: all 0.3s;
}
.btn_blog.is-open {
background: #c13e00;
}
.btn_blog.is-open svg {
transform: rotateZ(180deg);
}
#blog_list_lancru {
padding: 1em 0 2em;
}
#blog_list_hiace {
padding: 1em 0 2em;
}
#blog_list_ustoyota {
padding: 1em 0 2em;
}
#blog_list_linex {
padding: 1em 0 2em;
}
#blog_list_arb {
padding: 1em 0 2em;
}
#blog_list_honbu {
padding: 1em 0 2em;
}
.blog_thread {
font-size: 90%;
border-bottom: solid 1px #ffb300;
padding: 1em 0 0.5em;
}
.blog_thread h4 {
color: #fff;
background: #6a2200;
display: table;
margin-bottom: 0.25em;
}
.blog_thread p a:hover {
color: #c13e00;
}
.blog_thread h4 a {
color: #fff;
display: block;
padding: 0 1em;
}
.blog_thread h4 a:hover {
color: #fff;
display: block;
background: #c13e00;
padding: 0 1em;
}
.blog_thread p span.blog_date {
color: #ff9700;
padding-right: 1em;
}

@media screen and (max-width:1020px){
.btn_blog {
width: 15.5%;
height: 140px;
margin: 0 0.3%;
}
}
@media screen and (max-width:880px){
.btn_blog {
width: 15.3%;
font-size: 90%;
height: 15vw;
}
}
@media screen and (max-width:760px){
.btn_blog {
font-size: 80%;
}
.btn_blog svg {
width: 20px;
bottom: 15px;
}
}
@media screen and (max-width:650px){
.btn_blog {
width: 15.2%;
}
}
@media screen and (max-width:640px){
.btn_blog {
width: 31.8%;
height: 22vw;
margin-bottom: 10px;
}
}




/* INFO */
#top_info {
background: #fffbed;
}
.info_banners {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.info_banner {
width: 23%;
margin-bottom: 2.5%;
transition: all 0.3s;
}
.info_banner_3 {
width: 31.5%;
margin-bottom: 2%;
transition: all 0.3s;
}
.info_banner:hover, .info_banner_3:hover {
transform: translateY(-10px);
}


/* SNS */
#top_sns {}
.instagram_wrap {}
#instagram_fd {
padding-bottom: 2em;
}
#instagram_fd h3 {
text-align: center;
font-size: 150%;
padding-bottom: 0.5em;
color: #6a2200;
}
.instagram_wrap h3 {
text-align: center;
font-size: 150%;
padding-bottom: 0.5em;
color: #6a2200;
}
.instagram_toggle {}
p.instagram_open {
text-align: center;
cursor: pointer;
color: #6a2200;
}
p.instagram_close {
color: #6a2200;
text-align: center;
cursor: pointer;
padding-top: 1em;
}
p.instagram_open svg, p.instagram_close svg {
width: 20px;
height: auto;
}
#sns_icons {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 2em 0 0;
}
.sns_icon {
width: 120px;
text-align: center;
font-size: 80%;
line-height: 1.2;
color: #500b0f;
transition: all 0.3s;
margin: 0 2px;
}
.sns_icon img {
width: 50px;
padding-bottom: 0.5em;
}
.sns_icon a {
color: #500b0f;
}
.sns_icon:hover {
transform: translateY(-10px);
}
p.insta_note {
text-align: center;
font-size: 13px;
margin: 1.5em auto;
display: table;
}
p.insta_note a {
background: #E0CEB0;
color: #500b0f;
display: table;
border-radius: 1.5em;
padding: 0 1em;
text-decoration: none;
}
p.insta_note a:hover {
background: #a28871;
color: #fff;
display: table;
border-radius: 1.5em;
padding: 0 1em;
text-decoration: none;
}

@media screen and (max-width:570px){

.sns_icon {
width: 23%;
}

p.insta_note {
text-align: left;
}
p.insta_note a {
border-radius: 0;
}
p.insta_note a:hover {
border-radius: 0;
}
}



/* 404 */
#top_404{
padding-top: 200px;
text-align: center;
line-height: 2.2;
}
#top_404_totop{
width: 90%;
max-width: 300px;
margin: auto;
text-align: center;
font-size: 20px;
margin-top: 2em;
padding: 0.5em 0;
}
#top_404_totop a{
background: #ffa800;
display: block;
color: #fff;
text-decoration: none;
}
#top_404_totop a:hover{
background: #ff8400;
color: #fff;
text-decoration: none;
}
button.btn-404 a:hover {
opacity: 1;
}
.btn-404 {
color: #fff;
font-size: 105%;
background: #ffa800;
width: 450px;
height: 76px;
line-height: 76px;
margin: auto;
text-align: center;
color: #fff;
display: block;
margin-top: 2em;
position: relative;
border: 0;
padding: 0;
transition: all 0.4s ease;
}
.btn-404 a {
display: block;
color: #2F2F2F;
color: #fff;
}
.btn-404:hover {
display: block;
background: rgba(255, 255, 255, 0.8);
color: #c13e00;
}

.btn-404:hover a {
color: #ff7800;
}
.btn-404 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-404:before, .btn-404:after {
position: absolute;
content: "";
right: 0;
top: 0;
background: #ff7800;
transition: all 0.4s ease;
}
.btn-404:before {
height: 0%;
width: 3px;
}
.btn-404:after {
width: 0%;
height: 3px;
}
.btn-404:hover:before {
height: 100%;
}
.btn-404:hover:after {
width: 100%;
}
.btn-404 span:before, .btn-404 span:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
background: #ff7800;
transition: all 0.4s ease;
}
.btn-404 span:before {
width: 3px;
height: 0%;
}
.btn-404 span:after {
width: 0%;
height: 3px;
}
.btn-404 span:hover:before {
height: 100%;
}
.btn-404 span:hover:after {
width: 100%;
}




/* FOOTER */
#top_footer {
width: 100%;
padding: 0;
background: url(../img/common/foot_bg.gif) repeat-x;
}
#footer {
box-sizing: content-box;
width: 950px;
margin: 0 auto;
padding-left: 40px;
padding-top: 100px;
text-align: left;
background: url(../img/common/footer_bg.jpg) no-repeat;
color: #560000;
font-size: 13px;
font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Verdana, Arial, sans-serif;
}
#footer li {
box-sizing: content-box;
line-height: 1.8em;
}
#footer a:link, #footer a:visited {
color: #000000;
text-decoration: none;
}
#footer ul.parent {
float: left;
width: 150px;
}
#footer ul.parent2 {
float: left;
width: 180px;
}
#footer ul.parent3 {
float: left;
width: 130px;
}
#footer ul.parent4 {
float: left;
width: 160px;
}
#footer ul.parent5 {
float: left;
width: 140px;
}
#footer li ul li {
line-height: 1.45em;
font-size: 12px;
}
#footer a {
text-decoration: none;
}
#footer a:hover {
color: #ffffff;
}
#copyright {
width: 100%;
max-width: 980px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
clear: left;
font-size: 12px;
}
@media screen and (max-width:1064px) {
#top_footer {
background: #feb302;
}
#footer {
width: 95%;
margin: 0 auto;
padding-left: 0;
padding-top: 3em;
text-align: left;
background: none;
}
#footer ul.parent {
float: left;
width: 150px;
}
#footer ul.parent2 {
float: left;
width: 180px;
}
#footer ul.parent3 {
float: left;
width: 130px;
}
#footer ul.parent4 {
float: left;
width: 160px;
}
#footer ul.parent5 {
float: left;
width: 140px;
}
}