@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cantata+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cantata+One&family=Stoke:wght@300&display=swap');

/* 基本レイアウト ここから↓ */
* {
	margin: 0;
	padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
html{
	font-size: 62.5%;
}
body{
	font-size: 1.5rem;
	width: 100%;
	background-color: #fff;
	
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	display: inline;
}
li {
	list-style:none;
}
ul, ol {
	padding:0;
	margin:0;
}
a {	
	color: #000;
	/* color: #fff; */
	text-decoration: none;
}
a:hover {
	/* filter: saturate(180%) opacity(70%);
	transition-duration: 0.5s; */
}
a img:hover {
	filter: opacity(80%);
}
a[href*="tel"] {
	pointer-events: auto;
}
.font {
	/* font-family: 'Cantata One', serif; */
	font-family: 'Stoke', serif;
	font-style: italic;
}
img {
	max-width: 100%;
    height: auto;
	vertical-align: middle;
	display: block;
	margin: auto;
}
img.widthmax {
	width: 100%;
}
img.maxwidth700 {
	width: 100%;
	max-width: 700px;	
}

.hidden {
	position: absolute;
	top: -9999px;
	left: -9999px;
  }
.sp_only {
	display: block;
}
.pc_only {
	display: none;
}


@media screen and (min-width: 960px) {
	.sp_only {
		display: none;
	}
	.pc_only {
		display: block;
	}
	a[href*="tel"] {
		pointer-events: none;
	}
}




/* 基本レイアウト ここまで↑ */
/*------------------------------

	ヘッダーここから

------------------------------*/
header {
	background: #fff;
	width: 100%;
	/* height: 55px; */
	position: fixed;
	z-index: 10;
}
#header_box {
	padding: 0 3% 0 0;
	display: flex;
	/* align-items: center;垂直中央寄せ */
	justify-content: space-between;
	/* max-width: 1200px; */
	/* background: #FFF35F; */
	/* height: 55px; */
	
}
#header_box h1 {
	/* width: 25%;
	min-width: 200px;*/
	/* background-color:cornsilk; */
	/* width: 230px; */
	width: 300px;
	/* width: auto;
	max-width: 340px; */
	/* margin-bottom: -5px; */

}
#header_box nav{
	font-weight: bold;
	
}










/*

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	background: #fff;
  }
  */
  /*------------------------------
  
	ここから下がハンバーガーメニュー
	に関するCSS
  
  ------------------------------*/
	
  /* チェックボックスは非表示に */
  .drawer-hidden {
	display: none;
  }
  
  .drawer {
	align-self: center; /* 垂直方向中央寄せ */
  }
  /* ハンバーガーアイコンの設置スペース */
  .drawer-open {
	display: flex;
	height: 50px;
	width: 50px;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 100;/* 重なり順を一番上に */
	cursor: pointer;
  }
  
  /* ハンバーガーメニューのアイコン */
  .drawer-open span,
  .drawer-open span:before,
  .drawer-open span:after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	/* background: rgb(158, 115, 115); */
	background: rgb(58, 51, 51);
	transition: 0.5s;
	position: absolute;
  }
  
  /* 三本線のうち一番上の棒の位置調整 */
  .drawer-open span:before {
	bottom: 8px;
  }
  
  /* 三本線のうち一番下の棒の位置調整 */
  .drawer-open span:after {
	top: 8px;
  }
  
  /* アイコンがクリックされたら真ん中の線を透明にする */
  #drawer-check:checked ~ .drawer-open span {
	background: rgba(255, 255, 255, 0);
  }
  
  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  #drawer-check:checked ~ .drawer-open span::before {
	bottom: 0;
	transform: rotate(45deg);
  }
  
  #drawer-check:checked ~ .drawer-open span::after {
	top: 0;
	transform: rotate(-45deg);
  }
	
  /* メニューのデザイン*/
  .drawer-content {
	width: 100%;
	/* width: 50%; */
	height: 100%;
	position: fixed;
	top: 0;
	left: 100%;/* メニューを画面の外に飛ばす */
	z-index: 99;
	/* background: #fff; */
	background: #000;
	/* opacity:0.8; */
	transition: .5s;


	/* position: absolute;
    z-index: 100; 
    top: 68px;
	height: calc( 100vh - 52px);
	*/

	
	margin-top: 50px; /* ハンバーガーアイコン分の上余白 */
  }
  
  /* アイコンがクリックされたらメニューを表示 */
  #drawer-check:checked ~ .drawer-content {
	left: 0;/* メニューを画面に入れる */
	/* left: 50%; *//* メニューを画面に入れる */
  }


ul.drawer-list li {
	margin: 10px 0;
}
ul.drawer-list li a {
	display: block;
	padding: 20px 40px;
	color: #fff;
}

#pcnav {
	display: none; /* PC用メニューを非表示に */
}






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

	ヘッダーここまで

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

	メイン部分ここから

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

main {
	
}
section:first-child {
	/* padding-top: 90px; 固定メニュー分 */
}
section {
	padding-bottom: 40px;
}
.pb0 {
	padding-bottom: 0;
}
section img {
	/* margin: auto; */
}
.container {
	width: 100%;
	padding: 0 7%;
}
.container-b {
	width: 100%;
	padding: 0 2%;
}
.p0 {
	padding: 0; /* 画面左右の余白なしに */
}
.container img {
	padding-top: 40px;
	margin: auto;
}
.container img.pt0 {
	padding-top: 0;
}
.btn {
	width: 70%;
	max-width: 800px;
	margin-top: 40px;
}

/* 三角ボーダーここから */
.sankaku{
	height: 25px;
	width: 100%;
	background-color: #f39801;
	/* position: absolute; */
	bottom: 0;
}
.sankaku::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 60px 55.5px 0 55.5px;
	border-color: #f39801 transparent transparent transparent;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}
/* 三角ボーダーここまで */

/* スライダーの設定ここから */
.container_slide {
	width: 100%;
	padding: 0 7%;
	/* margin-top: 80px; */
}
.container_slide h4 {
	margin-top: 40px;
}
.container_slide p {
	margin-top: 20px;
	font-size: 80%;
}
.swiper {
	/* max-width: 700px; */
	margin-top: 10px;
}
.swiper-slide img {
	width: 100%;
}
:root {
	--swiper-navigation-color: #000000;
	--swiper-pagination-color: #ffffff;
}
.swiper-button-next:after, .swiper-button-prev:after {
	display: none;
}
.swiper-button-next, .swiper-button-prev {
	font-size: 30px;
}
/* スライダーの設定ここまで */

/* 折り畳み部分の設定　ここから */
summary {
	position: relative;
	display: block; /* 矢印を消す */	
	cursor: pointer; /* カーソルをポインターに */
	transition: 0.2s;
	background-image: url(../img/slide-more-arrow.gif);
	background-repeat: no-repeat;
	background-position: left;
	background-size: 8%;
	padding-left: 10%;
	width: 100%;
	max-width: 700px;
	margin: auto;
}
summary::-webkit-details-marker {
	display: none;　/* 矢印を消す */
}

/* オープン時のスタイル */
details[open] summary {
	/* transform: rotate(180deg); */
	background-image: url(../img/slide-more-arrow-c.gif);
}

/* 折り畳み部分の設定　ここまで */


.bk_red {
	background: #e60012;
}
.bk_shima, .bk_yel {
	background: #fff100;
}
.bk_shima_or {/* 縞々オレンジ背景 */
	/* height: 100vh; */
	background: repeating-linear-gradient(-45deg,
	 #f9de90,
	 #f9de90 8px,
	 #f3c11c 0,
  	#f3c11c 12px
	);

}
.bk_pnk {/* ピンクドット背景 */
	background: #fadcea;
	background-image: radial-gradient(#f6c4d0 20%, transparent 0), radial-gradient(#f6c4d0 20%, transparent 0);
	background-position: 0 0, 15px 15px;
	background-size: 30px 30px;
}
.bk_beige {/* ベージュドット背景 */
	/* background: #fee8b6;
	background-image: radial-gradient(#ffffff 20%, transparent 0), radial-gradient(#ffffff 20%, transparent 0);
	background-position: 0 0, 15px 15px;
	background-size: 30px 30px; */
	background-image: url(../img/haikei04.webp);
	background-size: cover;
	background-position: center bottom;
}


.bk_fire {
	background-image: url(../img/bk_fire.jpg);
	background-size: cover;
	background-position: center bottom;
	/* padding-bottom: 350px; */
	position: relative;
}
.bk_20231222 {
	background-image: url(../img/back_20231222.webp);
	background-size: cover;
	background-position: center bottom;
	/* padding-bottom: 350px; */
	position: relative;
}

.bk_img {/* 画像背景 */
	/* height: 100vh; */
	background-image: url(../img/20220204/bg.gif);
	background-repeat: repeat;
	background-size: 5%;
}

/* ご購入特典 start */
/* #kounyu-tokuten {
	background-color: #e60012;
	padding-top: 5px;
}
#kounyu-tokuten-h3 {
	background-color: #fff100;
}
#kounyu-tokuten-h3 img {
	width: 100%;
	max-width: 850px;
}
#kounyu-tokuten .container img {
	margin-top: 0;
	padding-top: 0;
} */
/* ご購入特典 end */
/* ご購入特典 start */
#kounyu-tokuten {
    /* background-color: #e60012; */
    /* padding-top: 5px; */
    /* border-top: 5px solid #e60012; */

    background-image: url(../img/haikei02.webp);
    background-repeat: repeat;
    background-position: top left;
    background-size: 100% auto;
}

#kounyu-tokuten-h3 {
    background-color: #fff100;
}

#kounyu-tokuten-h3::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    /* border-width: 60px 55.5px 0 55.5px; */
    border-width: 3.5vw;
    border-color: #fff100 transparent transparent transparent;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

#kounyu-tokuten-h3 img {
    width: 100%;
    max-width: 850px;
}

#kounyu-tokuten .container img {
    margin-top: 10px;
    padding-top: 0;
}

.midashi img {
    width: 100%;
}

/* ご購入特典 end */

/* 乗り比べ start */
#norikurabe {
	margin-top: 60px;
	padding: 0 5%;
	background-color: #23ac38;
}
/* 乗り比べ end */

/* 新車プラン start */
#sinsya-plan {
	/* background-color: #fff100; */
}
#sinsya-plan-h3 {
	background-color: #e60012;
}
#sinsya-plan-h3 img {
	width: 100%;
	max-width: 850px;
}
#sinsya-plan .container img {
	margin-top: 0;
	padding-top: 0;
}
/* 新車プラン end */

/* よくある質問 start */
#faq h3 {
	/* height: 25px; */
	width: 100%;
	background-color: #e60012;
	/* position: absolute; */
	bottom: 0;
}
#faq h3::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	/* border-width: 60px 55.5px 0 55.5px; */
	border-width: 3.5vw;
	border-color: #e60012 transparent transparent transparent;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

#faq h3 img {
	width: 80%;
	max-width: 700px;
}


dl.question {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    box-sizing: border-box;
    border: solid 5px #e60012;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 20px;
    margin-top: 30px;
}
dl.question dt {
    width: 100%;
    border-left: solid 15px #e60012;
    box-sizing: border-box;
    padding-left: 1vw;
    font-size: clamp(20px, 4vw, 40px);
    line-height: 1.2;
    font-weight: bold;
    color: #e60012;
}
dl.question dd {
    margin-top: 20px;
    padding-left: calc(15px + 1vw);
    padding-right: 1vw;
    font-size: clamp(16px, 3.5vw, 30px);
    line-height: 1.5;
}
/* よくある質問 end */



/* #medamasha, #special, #shoplist {
	padding-top: 55px;
    margin-top: -55px;
} */
#medamasha, #special, #car-list {
	padding-top: 30px;
}

.yoyaku_btn {
	text-align: center;
	width: 100%;
	/* margin-top: 70px; */
	padding-top: 2em;
}
.yoyaku_btn img {
	display: inline;
	padding: 10px;
}
/* 店舗リスト ここから */

.shop {
	padding: 30px 0 60px 0;
}
.shop li {
	position: relative;
	border: 3px solid #00a0e9;
	/* border: 3px solid #e60012; */
	margin-top: 70px;
	padding: 5%;
	border-radius: 3vw;
}
.shop h4 {
	position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
   	max-width: 400px;
    min-height: 75px;
	width: 95%;
    display: flex;
	flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 3vw;
	background-color: #00a0e9;
	/* background-color: #e60012; */
    color: #fff;
    font-size: 1.7em;
	/* font-size: clamp(16px, 3.5vw, 30px); */
	/* font-size: clamp(20px, 3vw, 30px); */
	/* font-size: clamp(30px, 3.5vw, 40px); */
    font-weight: bold;
	line-height: 1.0;
	padding: 10px 0;
}
.shop h4 span {
	width: 100%;
}

.shop img {
	width: 100%;
	padding-bottom: 30px;
	/* margin-top: 10px; */
}
.shop_tel {
	text-align: center;
	font-weight: bold;
	/* font-size: 2.4rem; */
	font-size: clamp(20px, 4vw, 40px);
}
.shop_tel dt {
	/* font-size: 1.9rem; */
}
.shop_tel dd {
	margin-top: 10px;
}
.shop_tel dd a {
	color: #e83323;
	vertical-align: middle;
}

.shop_tel span{
	/* font-size: 1.9rem; */
	/* font-weight: normal;
    display: inline-block;
    background-color: #e83323;
    color: #fff;
    border-radius: 8px;
    padding: 5px 10px;
    margin-right: 7px; */
	color: #e83323;
}
.shop_address {
	display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
	justify-content: space-between;
	margin-top: 20px;
}
.shop_address dt {
	width: 20%;
	/* min-width: 100px; */
    font-weight: normal;
    text-align: center;
	background-color: #00a0e9;
	/* background-color: #e60012; */
    color: #fff;
    padding: 2px;
	margin-top: 10px;
	font-size: 0.8em;
}
.shop_address dd {
	width: 77%;
	margin-top: 10px;
	margin-bottom: 20px;
}
a.btn-map {
    margin-top: 5px;
    font-size: 16px;
    color: #fff;
    background-color: #e83323;
	/* background-color: #00a0e9; */
    display: inline-block;
    line-height: 1;
    padding: 4px 35px;
    border-radius: 50px;
}
a.btn-map:hover {
	opacity: 0.8;
}
/* 店舗リスト ここまで */

.satei-btn {
	background: #fff100;
	width: 100%;
	text-align: center;
}
.satei-btn a {
	display: inline-block;
	width: 80%;
	margin: 2em auto 3em auto;
}
/*------------------------------

	メイン部分ここまで

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

	フッター部分ここまで

------------------------------*/
footer {
	padding-top: 5em;
}

#copyright {
	background: #d81c1c;
	color: #fff;
	font-size: clamp(16px, 1.8vw, 20px);
	text-align: center;
	padding-top: 1.25em;
    padding-bottom: 1em;
}
@media screen and (max-width:767px) {
	#copyright {
		padding-bottom: 5em;
	}
}
/*------------------------------

	フッター部分ここまで

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


/* フッターボタン start */
@media screen and (max-width:767px) {
	#copyright {
		background: #000;
	}
	/* スマホフッターバナー */
    #sp-footer-banner {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 200;
        display: -webkit-box;
    }
    .menuIcon {
        display: none;
    }

	/* .menuIcon {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 200;
        display: -webkit-box;
        display: flex;
    }

    .menuIcon li {
        margin-bottom: 0;
        width: 33.333%;
        height: auto;
        font-size: 3vw;
        text-align: center;
        border-radius: 0;
        border: 0;
    } */


    /*PCと同じ*/
    /* .menuIcon li>a {
        display: block;
        height: 100%;
        text-align: center;
        color: #fff;
		padding: 30px 5px 5px;
        font-weight: bold;
        letter-spacing: 0;
        text-decoration: none;
        background-position: center 1vh;
        background-repeat: no-repeat;
    }

    .menuIcon li p {
        margin: 0;
    }

    .menuIcon li.pagetop a {
        background-color: #111;
        background-image: url(../img/icon-arrow-up-wht.svg);
        background-size: 15% auto;
    }

    .menuIcon li.stock a {
        background-color: #f6ab00;
        background-image: url(../img/icon-search-wht.svg);
        background-size: 15% auto;
    }

    .menuIcon li.contact a {
        color: #fff;
        background-color: #5cb531;
        background-image: url(../img/icon-mail-wht.svg);
        background-size: 15% auto;
    } */
}
@media screen and (min-width:768px) and (max-width:999px) {
	.menuIcon {
        z-index: 999;
        position: fixed;
        right: -5px;
        bottom: 100px;
    }

    .menuIcon li {
        position: relative;
        width: 100px;
        height: 82px;
        border: 2px solid #fff;
        border-radius: 5px;
        font-size: 14px;
    }

    .menuIcon li>a {
        display: block;
        height: 100%;
        text-align: center;
        color: #fff;
        padding: 45px 5px 0;
        font-weight: bold;
        letter-spacing: 0;
        text-decoration: none;
        border-radius: 5px;
        background: #d81c1c no-repeat center top 14px / 26px;
    }

    .menuIcon li p {
        margin: 0;
    }

    .menuIcon li.pagetop a {
        background-color: #111;
        background-image: url(../img/icon-arrow-up-wht.svg);
    }

    .menuIcon li.stock a {
        /* background-color: #d81c1c; */
        background-color: #f6ab00;
        background-image: url(../img/icon-search-wht.svg);
    }

    .menuIcon li.contact a {
        color: #fff;
        /* background-color: #ffc600; */
        background-color: #5cb531;
        background-image: url(../img/icon-mail-wht.svg);
    }

    .menuIcon li+li {
        margin-top: 2px;
    }
}
@media screen and (min-width:1000px) {
	/* スマホフッターバナー */
    #sp-footer-banner {
        display: none;
    }

    .menuIcon {
		z-index: 999;
        position: fixed;
        right: -5px;
        bottom: 100px;
    }

    .menuIcon li {
        position: relative;
        width: 100px;
        height: 82px;
        border: 2px solid #fff;
        border-radius: 5px;
        font-size: 14px;
    }

    .menuIcon li>a {
        display: block;
        height: 100%;
        text-align: center;
        color: #fff;
        padding: 45px 5px 0;
        font-weight: bold;
        letter-spacing: 0;
        text-decoration: none;
        border-radius: 5px;
        background: #d81c1c no-repeat center top 14px / 26px;
    }

    .menuIcon li p {
        margin: 0;
    }

    .menuIcon li.pagetop a {
        background-color: #111;
        background-image: url(../img/icon-arrow-up-wht.svg);
    }

    .menuIcon li.stock a {
        /* background-color: #d81c1c; */
        background-color: #f6ab00;
        background-image: url(../img/icon-search-wht.svg);
    }

    .menuIcon li.contact a {
        color: #fff;
        /* background-color: #ffc600; */
        background-color: #5cb531;
        background-image: url(../img/icon-mail-wht.svg);
    }

    .menuIcon li+li {
        margin-top: 2px;
    }

}
/* フッターボタン end */


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

	PC用ここから

------------------------------*/
@media screen and (min-width: 960px) {
	
	#header_box {
		padding: 0 5% 0 0;
		/* background:#f6c4d0; */
		/* max-width: 1000px; */
		margin:auto;
		/* align-items: center; */
		/* align-self: center; */
	}
	#header_box h1 {
		width: 50%;
		/* margin-bottom: -3px; */
		/* max-width: 230px; */
		
	}
	/*------------------------------

		PC用メニューここから

	------------------------------*/
	nav#pcnav {
		display: block;	
		width: auto;
		max-width: 75%;
		/* background-color:lightgreen; */
		align-self: center;/*  垂直方向中央寄せ
		/* padding-right: 10px; */
		font-size: 1.1em;
	}
	ul#pcnavul {
		display: flex;
	}
	ul#pcnavul li {
		margin-left: 50px;
	}
	ul#pcnavul a:hover {
		text-decoration: underline;
	}
	div.drawer {
		display: none; /* スマホ用メニューを非表示に */
	}
	/*------------------------------

		PC用メニューここまで

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

		PC用メイン部分ここから

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

	main {
		/* padding-top: 80px; メニュー分 */
	}
	section {
		padding-bottom: 80px;
	}
	.container {
		width: 100%;
		max-width: 1000px;
		padding: 0 5%;
		margin: auto;
	}
	.container img {
		padding-top: 80px;
	}
	
	/* スライダーの設定ここから */
	.container_slide {
		width: 100%;
		max-width: 1000px;
		padding: 0 5%;
		margin: auto;
		/* margin-top: 80px; */
	}
	.container_slide h4 {
		margin-top: 100px;
	}
	/* スライダーの設定ここまで */



	.bk_shima {
		background-image: url(../img/sakidori2021-main_bk.png);
		background-size: cover;
		background-position: center bottom;
		/* padding-bottom: 350px; */
		position: relative;
	}
	.bk_shima img.pc_only {
		padding-bottom: 350px;
	}
	
	.yoyaku_btn {
		display: inline-block;
	}
	


	.shop ul {
		/* display: grid;
		gap: 60px;
		grid-template-columns: 1fr 1fr; */
	}
	.shop li img {
		padding-top: 40px;	
	}
	.shop h4 {
		/* font-size: 2em; */
		/* font-size: clamp(16px, 3.5vw, 30px); */
	}
	.shop_tel dt {
		/* font-size: 2.4rem; */
	}
	/*------------------------------

		PC用メイン部分ここまで

	------------------------------*/
	
}
/*------------------------------

	PC用ここまで

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