@charset "UTF-8";
/* CSS Document */

@import url(reset.css);

.cf::after {
  content: "";
  clear: both;
  display: block;
}

img { vertical-align: bottom; }
main { display: block; }



/* 全体 ============================== */
body {
	font-family: 'M PLUS 1p', 'Asap', sans-serif;
	color: black;
	font-size: 90%;
	line-height: 1;
}

::selection { background: #ffcccc; color: red; } /* Safari */
::-moz-selection { background: #ffcccc; color: red; } /* Firefox */



/* テキスト ============================== */
.txtB { font-weight: 700; }
.txtNor { font-weight: 400l; }

.txtFontR { font-family: 'Asap', sans-serif; font-weight: 400; }
.txtFontB { font-family: 'Asap', sans-serif; font-weight: 700; }

.txtXXL { font-size: 180%; }
.txtXL { font-size: 128%; }
.txtL { font-size: 115%; }
.txtS { font-size: 90%; }
.txtXS { font-size: 85%; }

.txtRed { color: red; }
.txtRedB { color: red; font-weight: 700; }
.txtWhite { color: white; }
.txtWhiteB { color: white; font-weight: 700; }
.txtGrey { color: #666; }


/* リンク ============================== */
a { transition: all .3s ease; color: red; }
a:hover { text-decoration: none; }
a.pic:hover { opacity: 0.6; }
a.linkW { color: white; }


/* PC用記述 */
.forSP { display: none; }


/* トップページ ============================== */
div.wrapper { overflow: hidden; min-width: 1080px; }
div.contWrap { width: 960px; margin: 0 auto; }
h1.secTit {
	display: inline-block;
	background-color: white;
	padding: 10px 20px;
	font-size: 180%;
	font-weight: 700;
	color: red;
	line-height: 1.25;
}
h1.secTitRed {
	background-color: red;
	color: white;
}
h1.secTitBlack {
	background-color: black;
	color: white;
}
h1.secTit span.rubi {
	font-size: 66%;
	font-weight: 400;
}

/* ヘッダ */
nav {
	width: 100%;
	background-color: black;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
	min-width: 1080px;
}
nav .navWrap { position: relative; padding-left: 63px;}
nav p.logo { position: absolute; left: 0; top: 0; }
nav p.logo a { padding: 6px 15px; display: block; }
nav p.logo a img { width: 36px; height: auto; }
nav ul li { float: left; margin-right: 20px; height: 50px; overflow: hidden;}
nav ul li:last-child { margin-right: 0; }
nav ul li a {
	display: block;
	color: white;
	text-decoration: none;
	padding: 15px 10px;
	letter-spacing: 0.1em;
	transition: all .3s ease-in-out;
	position: relative;
}
nav ul li span.off {
	display: block;
	color: #999;
	padding: 15px 10px;
	letter-spacing: 0.1em;
}
nav ul li.new a { padding: 15px 10px 15px 36px;}
nav ul li a:hover { color: red; } 
nav ul li.new a::after {
	content: "NEW";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	letter-spacing: 0;
	font-size: 65%;
	font-family: 'Asap', sans-serif;
	font-weight: 700; 
	width: 30px;
	height: 30px;
	background-color: red;
	border-radius: 50%;
	box-sizing: border-box;
	padding: 10px 0;
	text-align: center;
	margin-top: -15px;
}
nav ul li.new a:hover::after {
	color: white;
}

/* タイトル */
section.expo19sec0 {
	background: url(../images/bg_stars_red.png) top center / 750px 400px;
	position: relative;
}
section.expo19sec0 div.sec0cont {
	width: 1080px;
	margin: 0 auto;
	position: relative;
}
section.expo19sec0 p.logo { padding: 72px 40px 40px 80px; }
section.expo19sec0 p.logo img { width: 360px; height: auto; }

section.expo19sec0 div.infobox {
	position: absolute;
	top: 172px;
	right: 50px;
	width: 480px;
	border: solid 3px red;
	padding: 30px 20px 20px;
	text-align: left;
	background-color: white;
	box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
	box-sizing: border-box;
	z-index: 80;
}
section.expo19sec0 div.infobox dl { line-height: 1.6em; } 
section.expo19sec0 div.infobox dl dt { background-color: black; text-align: center; color: white; padding: 0.1em; border-radius: 5px; }
section.expo19sec0 div.infobox dl dd { margin-top: -1.6em; }
section.expo19sec0 div.infobox dl.info dt { width: 3.4em; }
section.expo19sec0 div.infobox dl.info dd { padding-left: 80px; }
section.expo19sec0 div.infobox dl.info dd.date { letter-spacing: 0.15em; padding-top: 5px; }
section.expo19sec0 div.infobox dl.info dt.venueTit { margin-top: 20px; }
section.expo19sec0 div.infobox dl.info dd.venue { padding-top: 2px; }
section.expo19sec0 div.infobox dl.cast { margin-top: 20px; padding-top: 10px; border-top: dashed 1px red; }
section.expo19sec0 div.infobox dl.cast dt { width: 8em; }
section.expo19sec0 div.infobox dl.cast dd { padding-left: 9.2em; }
section.expo19sec0 div.infobox dl.spec { margin-top: 20px; padding-top: 10px; border-top: dashed 1px red; }
section.expo19sec0 div.infobox dl.spec dt { width: 13em; }
section.expo19sec0 div.infobox dl.spec dd { padding-left: 14.2em; }

section.expo19sec0 div.infobox p.badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 90;
	transform: translate(50%, -50%);
}
section.expo19sec0 div.infobox p.badge img { width: 120px; height: auto; }

/* 『あべ☆EXPO2019』とは？ */
section.expo19sec1 {
	background: red;
	padding: 60px 0 200px;
	position: relative;
}
section.expo19sec1 .charas {
	position: absolute;
	bottom: -3px;
	left: 50%;
	transform: translate(-50%, 0);
}
section.expo19sec1 .charas img { width: 1000px; height: auto; }
section.expo19sec1 .sec1contArea { margin-top: 50px; }
section.expo19sec1 .sec1contArea p.sec1pic { float: left; padding-top: 40px; }
section.expo19sec1 .sec1contArea p.sec1pic img { width: 270px; height: auto; }
section.expo19sec1 .sec1contArea div.sec1cont { float: right; width: 640px; line-height: 1.8; }
section.expo19sec1 .sec1contArea div.sec1cont p.mgn { margin-top: 20px; }
section.expo19sec1 .sec1contArea div.sec1cont p.naming {
	margin: 10px 0;
	color: white;
	font-weight: 700;
	font-size: 210%;
	line-height: 1.25;
}
section.expo19sec1 .sec1contArea div.sec1cont p.fm span { font-size: 115%; }
section.expo19sec1 .sec1contArea div.sec1cont p.note { margin-top: 20px; }

/* 特別試乗会 */
section.expo19sec5 { background: #eee url(../images/bg_dot.png) center center/40px 40px; padding: 60px 0; position: relative; }
section.expo19sec5 .expo2019driveBox { margin-top: 50px; padding: 20px 32px 115px 32px; border: solid 2px red; background-color: white; line-height: 1.8; }
div.infoBox { border: dashed 1px red; padding: 5px 15px 15px; margin-top: 15px; }
div.infoBox dl { line-height: 1.5em; } 
div.infoBox dl dt { background-color: black; text-align: center; color: white; padding: 0.2em 0.1em 0.1em; border-radius: 5px; margin-top: 12px; width: 6em; }
div.infoBox dl dd { margin-top: -1.5em; padding-left: 7.5em; }
section.expo19sec5 p.sec5car { position: absolute; left: 50%; bottom: 0; z-index: 10; }
section.expo19sec5 p.sec5car img { width: 540px; height: auto; }
section.expo19sec5 .expo2019driveBox ul.note { margin-top: 10px; }
section.expo19sec5 .expo2019driveBox ul.note li { text-indent: -1.35em; margin-left: 1.35em; margin-top: 5px; line-height: 1.25; }

/* 事前特別展示 */
section.expo19sec6 { background: red; padding: 60px 0; }
section.expo19sec6 .expo19preBox { margin-top: 50px; padding: 30px 30px 30px 350px; border: dashed 8px red; background-color: white; position: relative; }
section.expo19sec6 .expo19preBox .lead { line-height: 1.5; }
section.expo19sec6 .expo19preBox .present { line-height: 1.6; margin-top: 15px; }
section.expo19sec6 .sec6car { position: absolute; left: 18px; bottom: 30px; z-index: 10; }
section.expo19sec6 .sec6car img { width: 300px; height: auto; }

/* タイムテーブル */
section.expo19sec7 { background: #eee url(../images/bg_dot.png) center center/40px 40px; padding: 60px 0; position: relative; }
section.expo19sec7 .expo19bizcardBox { margin-top: 50px; border: dashed 2px red; background-color: white; padding: 30px; }
section.expo19sec7 .expo19bizcardBox img { width: 100%; height: auto; }
section.expo19sec7 .expo19bizcardBox ul.noteList { margin-top: 30px; }

/* 会場マップ */
section.expo19sec8 { background: red; padding: 60px 0; }
section.expo19sec8 .expo19mapBox { margin-top: 50px; padding: 30px; background-color: white; } 
section.expo19sec8 .expo19mapBox img { width: 100%; height: auto; }
section.expo19sec8 .expo19mapBox ul.noteList { margin-top: 30px; }

/* 注記 */
ul.noteList li { text-indent: -1.35em; margin-left: 1.35em; line-height: 1.35; margin-top: 5px; }





/* クイズ ============================== */
header.quizHead, main.quizContArea, footer { min-width: 1080px; box-sizing: border-box; }
header.quizHead p.expoLogo { padding: 16px 18px 20px; text-align: center; }
header.quizHead p.expoLogo img { width: 640px; height: auto; }
main.quizContArea {
	background: red url(../images/bg_stars_white.png) top center / 750px 400px;
	text-align: center;
	padding: 50px 30px 80px;
}
main.quizContArea .quizTit {
	display: inline-block;
	background-color: black;
	color: white;
	font-size: 200%;
	font-weight: 700;
	border: double 3px white;
	padding: 6px 20px;
	line-height: 1.25;
}
main.quizContArea .quizTit span {
	margin-right: 1em;
}
main.quizContArea .quizCont {
	background-color: white;
	margin: 30px auto 0;
	width: 960px;
	box-sizing: border-box;
	padding: 50px 40px 60px;
}
main.quizContArea .quizCont .lead {
	font-size: 115%;
	line-height: 1.35;
}
main.quizContArea .quizCont .leaderr {
	font-size: 320%;
	color: red;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 20px;
}

main.quizContArea .quizCont ul.questionList {
	margin-top: 50px;
	display: inline-block;
}
main.quizContArea .quizCont ul.questionList > li {
	float: left;
	padding-right: 20px;
	margin-right: 20px;
	min-width: 150px;
	box-sizing: border-box;
	border-right: dashed 1px #ccc;
}
main.quizContArea .quizCont ul.questionList > li:last-child { padding-right: 0; margin-right: 0; border-right: none;}
ul.questionList > li > p.qTit {
	background-color: red;
	color: white;
	font-size: 150%;
	padding: 8px;
	border-radius: 4px;
}
ul.qAns > li {
	margin-top: 30px;
	min-height: 60px;
}
ul.qAns > li span.answer {
	font-weight: 700;
	font-size: 340%;
}
ul.qAns > li span.ansTxt {
	font-size: 128%;
	color: #777;
	border: solid 1px #999;
	padding: 2px 5px;
	margin: 5px 0 0 0;
	display: inline-block;
	background-color: white;
	line-height: 1.2;
}

/* ラジオボタン */
ul.qAns > li > input { display: none; }
ul.qAns > li > label { 
	display: block;
	transition: all .3s ease;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 8px;
	text-align: left;
}
ul.qAns > li > label:hover {
	background-color: #eee;
}
ul.qAns > li label p.addCircle {
	position: relative;
	display: inline-block;
	padding-left: 40px;
}
ul.qAns > li label p.addCircle::before {
	content: "";
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	border: solid 2px black;
	border-radius: 15px;
	position: absolute;
	top: 8px;
	left: 0;
	background-color: white;
}
ul.qAns > li input:checked + label p.addCircle::after { 
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: red;
	position: absolute;
	top: 15px;
	left: 7px;
}
ul.qAns > li input:checked + label p.addCircle span.answer { color: red; }

/* ボタン */
input.btn {
	background-color: black;
	color: white;
	border-radius: 100px;
	padding: 8px 20px;
	font-size: 180%;
	appearance: none;
	moz-appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: all .3s ease;
	border: none;
	box-sizing: border-box;
	min-width: 240px;
	outline: none;
}
input.btn:hover {
	background-color: red;
}
input.btn.btnS {
	padding: 5px 15px;
	font-size: 120%;
	margin-left: 30px;
	min-width: 160px;
}
div.btnsArea { margin-top: 50px; }

/* 完了画面 */
main.quizContArea ul.compNote {
	margin-top: 30px;
	color: red;
	text-indent: -1.35em;
	margin-left: 1.35em;
	line-height: 1.35;
}
main.quizContArea p.compLogo { margin-top: 50px; }
main.quizContArea p.compLogo img {
	width: 320px; height: auto;
}



/* フッタ ============================== */
footer { background-color: black; color: white; }
footer div.footLeft { float: left; padding: 20px 0 10px 15px; }
footer div.footLeft ul.logos li { float: left; padding-right: 30px; }
footer div.footLeft ul.logos li img { height: 18px; width: auto; }
footer div.footLeft p.copyright { margin-top: 95px; line-height: 1.2; }
footer div.footRight { float: right; padding: 17px 15px 10px 0; text-align: right; }
footer div.footRight > a > img { width: 300px; height: auto; }
footer div.footRight p.abeCap { margin-top: 35px; line-height: 1.6; }



/* PAGE UP!!! ============================== */
#page-top { position: fixed; bottom: 2.5em; right: 0; z-index: 100; }
#page-top a { background-color: rgba(0, 0, 0, 0.6); width: 48px; height: 48px; display: block; border-radius: 4px 0 0 4px; box-shadow: -2px 2px 4px rgba(0,0,0,0.2); transition: all .3s ease; position: relative; }
#page-top a::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	border-top: solid 1px white;
	border-right: solid 1px white;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	transition: all .3s ease;
}
#page-top a:hover { background-color: rgba(255, 0, 0, 0.6) ; box-shadow: -2px 2px 4px rgba(0,0,0,0.3); }
#page-top a:hover::after { top: 54%; }



@media only screen and (max-width:767px) {
	/* SP用記述 */
	.breakSP { display: block; }
	.forPC { display: none; }
	.forSP { display: block; }
	
	
	
	/* トップページ */
	div.wrapper { min-width: 0; }
	div.contWrap { width: 94%; margin: 0 auto; text-align: center; }
	/* ヘッダ */
	nav {
		padding: 5px;
		top: auto;
		bottom: 0;
		box-shadow: 0px -2px 4px rgba(0,0,0,0.3);
		min-width: 0;
	}
	nav .navWrap { padding-left: 48px;}
	nav p.logo a { padding: 5px; display: block; }
	nav ul li { float: left; margin-right: 10px; height: auto;}
	nav ul li a { padding: 5px; font-size: 85%; }
	nav ul li span.off { padding: 5px; font-size: 85%; }
	/* タイトル */
	section.expo19sec0 div.sec0cont { width: 94%; padding-bottom: 30px; }
	section.expo19sec0 p.logo { padding: 15px 0 60px; }
	section.expo19sec0 p.logo img { width: 100%; height: auto; }
	section.expo19sec0 div.infobox {
		position: relative;
		top: 0;
		right: 0;
		width: 100%;
		padding: 75px 15px 15px;
	}
	section.expo19sec0 div.infobox dl dd { margin-top: 10px; text-align: center; }
	section.expo19sec0 div.infobox dl.info dt { width: auto; }
	section.expo19sec0 div.infobox dl.info dd { padding-left: 0; }
	section.expo19sec0 div.infobox dl.cast dt { width: auto; }
	section.expo19sec0 div.infobox dl.cast dd { padding-left: 0; }
	section.expo19sec0 div.infobox dl.spec dt { width: auto; }
	section.expo19sec0 div.infobox dl.spec dd { padding-left: 0; }
	section.expo19sec0 div.infobox p.badge {
		right: 50%;
		transform: translate(50%, -50%);
	}
	/* 『あべ☆EXPO2019』とは？ */
	section.expo19sec1 { padding: 20px 0 0; }
	section.expo19sec1 .sec1contArea { margin-top: 0; }
	section.expo19sec1 .sec1contArea p.sec1pic { float: none; padding-top: 20px; }
	section.expo19sec1 .sec1contArea p.sec1pic img { width: 270px; height: auto; }
	section.expo19sec1 .sec1contArea div.sec1cont { float: none; width: auto; margin-top: 30px; }
	section.expo19sec1 .charas {
		position: relative;
		bottom: -1px;
		left: 3%;
		transform: translate(0, 0);
		z-index: 10;
		margin-top: 20px;
	}
	section.expo19sec1 .charas img { width: 94%; height: auto; }
	/* 特別試乗会 */
	section.expo19sec5 { padding: 20px 0; }
	section.expo19sec5 .expo2019driveBox { margin-top: 20px; padding: 15px 10px 0; }
	div.infoBox { padding: 0 10px 10px; margin-top: 15px; }
	div.infoBox dl dt { width: auto; }
	div.infoBox dl dd { margin-top: 10px; padding-left: 0; }
	section.expo19sec5 p.sec5car { position: relative; left: 0; bottom: -2px; z-index: 10; margin-top: 20px;}
	section.expo19sec5 p.sec5car img { width: 100%; height: auto; }
	section.expo19sec5 .expo2019driveBox ul.note { margin-top: 20px; }
	
	/* 事前特別展示 */
	section.expo19sec6 { padding: 20px 0; }
	section.expo19sec6 .expo19preBox { margin-top: 20px; padding: 10px 10px 0; }
	section.expo19sec6 .sec6car { position: relative; left: 0; bottom: 0; z-index: 10; margin-top: 20px;}
	section.expo19sec6 .sec6car img { width: 94%; height: auto; }
	
	/* タイムテーブル */
	section.expo19sec7 { padding: 20px 0; }
	section.expo19sec7 .expo19bizcardBox { margin-top: 20px; padding: 20px 15px; }
	section.expo19sec7 .expo19bizcardBox ul.ttList li { margin-top: 30px; } 
	section.expo19sec7 .expo19bizcardBox ul.ttList li:first-child { margin-top: 0; } 
	section.expo19sec7 .expo19bizcardBox ul.noteList { margin-top: 20px; }
	
	/* 会場マップ */
	section.expo19sec8 { padding: 20px 0; }
	section.expo19sec8 .expo19mapBox { margin-top: 20px; padding: 20px 15px; } 
	section.expo19sec8 .expo19mapBox ul.mapList li { margin-top: 20px; } 
	section.expo19sec8 .expo19mapBox ul.mapList li:first-child { margin-top: 0; } 
	section.expo19sec8 .expo19mapBox ul.noteList { margin-top: 20px; }
	
	/* 注記 */
	ul.noteList li { text-align: left; }
	
	
	/* クイズ */
	header.quizHead, main.quizContArea, footer { min-width: 0; }
	header.quizHead p.expoLogo { padding: 12px 10% 15px; }
	header.quizHead p.expoLogo img { width: 100%; height: auto; }
	main.quizContArea {
		padding: 15px 15px 30px;
		box-sizing: border-box;
	}
	main.quizContArea .quizTit {
		font-size: 180%;
		padding: 6px 10px;
	}
	main.quizContArea .quizTit span { margin-right: 0; }
	main.quizContArea .quizCont {
		margin: 15px auto 0;
		width: auto;
		padding: 20px;
	}
	main.quizContArea .quizCont .leaderr {
		font-size: 12.8vw;
		margin-bottom: 15px;
	}
	main.quizContArea .quizCont ul.questionList {
		margin-top: 25px;
	}
	main.quizContArea .quizCont ul.questionList > li {
		float: none;
		padding-right: 0;
		margin-right: 0;
		padding-bottom: 10px;
		margin-bottom: 20px;
		min-width: 0;
		border-right: none;
		border-bottom: dashed 1px #ccc;
	}
	main.quizContArea .quizCont ul.questionList > li:last-child {
		margin-bottom: 0;
	}
	ul.qAns { display: inline-block; }
	ul.qAns > li {
		margin-top: 10px;
		min-height: 0;
	}
	ul.qAns > li span.answer { margin-right: 10px; }

	input.btn.btnS {
		margin-left: 0;
		margin-top: 20px;
	}
	div.btnsArea { margin-top: 20px; }
	
	/* 完了画面 */
	main.quizContArea ul.compNote { text-align: left; }
	main.quizContArea p.compLogo { margin: 40px 8% 20px; }
	main.quizContArea p.compLogo img { max-width: 100%; }



	/* フッタ */
	footer { padding-bottom: 120px; }
	footer div.footRight { float: none; padding: 10px 10px 0; text-align: center; }
	footer div.footRight > a > img { width: 100%; }
	footer div.footRight p.abeCap { margin-top: 20px; }

	footer div.footLeft { float: none; padding: 20px 0 10px 15px; }
	footer div.footLeft ul.logos { margin-top: 30px; }
	footer div.footLeft ul.logos li { float: none; padding-right: 0; text-align: center; margin-top: 12px; }
	footer div.footLeft ul.logos li img { height: 18px; width: auto; }
	footer div.footLeft p.copyright { margin-top: 30px; text-align: center; }

	/* PAGE UP!!! ============================== */
	#page-top { bottom: 100px; }

}