/* ========== css/sales.css ========== */
/*----------------------------------------------------------------------------*/
/* 	三咲モータースサイト  販売 page		 						  CSS    */
/*----------------------------------------------------------------------------*/

/* ■ introduction section -----------------------------------------------*/

	#introduction {
		margin:0 auto 0 auto;
		width:100%;
		background-image:
			url("../images/bg/brline02.svg"),
			url("../images/bg/brline01.svg");
		background-size:
			:contain,
			:contain;
		background-position:
			center top 3%,
			center top 0%;
		background-repeat:
			no-repeat,
			no-repeat;
		padding-bottom:30px;
		background-color:#FFF;
	}
	#introduction h2{
		margin:0 auto 30px auto;
		width:60%;
		font-size:30px;
		text-align: center;
		line-height:1.8em;
		font-family: "Noto Sans JP";
		font-weight: 700;
		color:#444;
		padding-top:50px;
	}
	#introduction .h2line  {
		margin: 0 auto 50px auto;
		width: 65%;
		height:1px;
		text-indent: -99999px;	/* テキスト非表示 */
		background:linear-gradient(90deg,#BDC3C7 0%,#BDC3C7 98%,var(--mmts-brand) 98%,var(--mmts-brand) 100%);	/* ★ */
	}

	@media screen and (max-width:550px) {
		#introduction h2{
			margin:0 0 50px 0;
		}
	}
	#introduction h2 span.bgLRextend::before{
		background:#333;
	}
	#introduction .cont{
		margin:0 auto 50px auto;
		width:70%;
	}
	#introduction .cont>p {
		margin:0 auto 30px auto;   
		width:80%;
		font-size:16px;
		line-height:1.8em;
		font-family: "Noto Sans JP";
		font-weight: 500;
		color:333;
	}
	#introduction h3{
		margin:0 auto 20px auto;
		width:60%;
		font-size:30px;
		text-align: center;
		line-height:1.8em;
		font-family: "Noto Sans JP";
		font-weight: 700;
		color:#444;
		padding-top:50px;
	}
	#introduction .cont ul#service {
		margin: 0 auto 0 auto;
		width:60%;
		display: flex;
		justify-content:space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	#introduction .cont ul#service li {
	}
	#introduction .cont ul#service li img {
		display:block;
		zoom:0.90;
	}

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

		#introduction {
			margin:20px auto 0 auto;
			width:100%;
			background-image:
				url("../images/bg/brline02.svg"),
				url("../images/bg/brline01.svg");
			background-size:
				:cover,
				:cover;
			background-position:
				center top 0%,
				center top 3%;
			background-repeat:
				no-repeat,
				no-repeat;
			padding-bottom:0;
		}
		#introduction h2{
			margin:0px auto 10px auto;
			width:90%;
			text-align:center;
			font-size:14px;
			font-weight:bold;
			line-height:1.8em;
			padding-top:15px;
		}
		#introduction .h2line  {
			margin: 5px auto 15px auto;
			width: 90%;
			height:1px;
			text-indent: -99999px;	/* テキスト非表示 */
			background:linear-gradient(90deg,#BDC3C7 0%,#BDC3C7 98%,var(--mmts-brand) 98%,var(--mmts-brand) 100%);	/* ★ */
		}
		#introduction .cont{
			margin:0 auto 20px auto;   
			width:85%;
		}
		#introduction .cont>p {
			margin:0 auto 30px auto;   
			width:100%;
			font-size:13px;
			line-height:1.7em;
			color:333;
		}
		#introduction h3{
			margin:0px auto 10px auto;
			width:90%;
			text-align:center;
			font-size:14px;
			font-weight:bold;
			line-height:1.8em;
			padding-top:15px;
		}
		#introduction .cont ul#service {
			margin: 15px auto 50px auto;
			width:95%;
			display: flex;
			justify-content:space-between;
			align-items: center;
			flex-wrap: wrap;
		}
		#introduction .cont ul#service li {
		}
		#introduction .cont ul#service li img {
			display:block;
			zoom:0.5;
		}
	}
	@media screen and (max-width:590px) {

	}

/* ■ MainConents #section01  */

	#section01 {
		margin: 20px auto 0 auto;
		width: 100%;
		padding-bottom:20px;
		background:linear-gradient(90deg,#F5F5F5 0%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
	}
	#section01 h1,h2,h3,h4,h5,h6{
		font-size:100%;
		font-weight:normal;
	}
	#sec01 {
		margin: 0 auto 0 auto;
		width: 100%;
	}
	#section01 #sec01>h2 {
		display:block;
		margin: 40px auto 20px auto;
		width: 100%;
		text-align:center;
		font-weight:bold;
		font-size:16px;
		color: #444;
	}
	#section01 .h2line  {
		margin: 5px auto 15px auto;
		width: 90%;
		height:1px;
		text-indent: -99999px;	/* テキスト非表示 */
		background:linear-gradient(90deg,#BDC3C7 0%,#BDC3C7 98%,var(--mmts-brand) 98%,var(--mmts-brand) 100%);	/* ★ */
	}
	#section01 #sec01title01 {
		margin: 0 auto 0 auto;
		width: 90%;
	}
	#sec01 ul#sec01cont {
		margin: 10px auto 0 5%;
		width: 90%;
	}
	#sec01 ul#sec01cont li {
		margin: 20px auto 10px auto;
		width: 90%;
		height:40px;
		background-image:url("../images/icon/arrow02.png");
		background-repeat:no-repeat;
		background-size:	30px 21px;
		background-position:	center bottom 1px;
	}
	#sec01 ul#sec01cont li:last-child {
		background-image:none;
	}
	#sec01 ul#sec01cont li>p {
		float:left;
		width: 20%;
		height:45px;
	}
	#sec01 ul#sec01cont li>p:first-child {
		width: 25%;
		height:45px;
		text-align:center;
		font-size:13px;
		font-weight:bold;
		color: #FFF;
		padding:8px;
		background-color:#333;
		border: solid 1px #333;
	}
	#sec01 ul#sec01cont li>p:nth-child(2) {
		width: 75%;
		height:45px;
		text-align:left;
		font-size:13px;
		line-height:1.2em;
		color: #333;
		padding:5px;
		padding-left:20px;
		background-color:#FFF;
		border: solid 1px #333;
	}
	#sec01 p.comment {
		margin: 20px auto 0 auto;
		width: 80%;
		font-size:14px;
		line-height:1.7em;
		font-weight:normal;
		color:#333;
		padding-bottom:10px;
	}

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

	}

	@media only screen and (min-width:768px) {

		#section01 {
			margin:0 auto 50px auto;
			width: 100%;
			padding-bottom:50px;
			background:linear-gradient(90deg,white 0%,white 10%,#F5F5F5 10%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
		}
		#sec01 {
			margin: 0 auto 0 auto;
			width: 85%;
			padding-bottom:0px;
			background-image:
				none,
				none; /* ← 存在しないファイル。宣言を消すと隠れていた背景が出てしまうため none に置換（404回避のみ） */
			background-size:
				:contain,
				:contain;
			background-position:
				center top 4%,
				center bottom 10%;
			background-repeat:
				no-repeat,
				no-repeat;
			position:relative;
		}
		#section01 #sec01>h2 {
			display:block;
			margin: 0 auto 0 auto;
			width: 80%;
			font-size:32px;
			font-family: "Noto Sans JP";
			font-weight: 700;
			letter-spacing:1px;
			padding-bottom
		}
		#section01 .h2line  {
			margin: 30px auto 0 auto;
			width: 60%;
			height:1px;
			text-indent: -99999px;	/* テキスト非表示 */
			background:linear-gradient(90deg,#BDC3C7 0%,#BDC3C7 98%,var(--mmts-brand) 98%,var(--mmts-brand) 100%);	/* ★ */
		}
		#sec01 ul#sec01cont {
			margin: 20px auto 30px 25%;
			width: 50%;
			padding-bottom:0;
			position: relative;
		}
	
		#sec01 ul#sec01cont li {
			margin: 20px auto 10px auto;
			width: 90%;
			height:60px;
			background-image:url("../images/icon/arrow02.png");
			background-repeat:no-repeat;
			background-size:	30px 21px;
			background-position:	center bottom 1px;
		}
		#sec01 ul#sec01cont li:last-child {
			background-image:none;
		}
		#sec01 ul#sec01cont li>p {
			float:left;
			width: 20%;
			height:45px;
		}
		#sec01 ul#sec01cont li>p:first-child {
			width: 20%;
			height:45px;
			text-align:center;
			font-size:18px;
			font-family: "Noto Sans JP";
			font-weight: 700;
			color: #FFF;
			padding:13px;
			background-color:#333;
			border: solid 1px #333;
		}
		#sec01 ul#sec01cont li>p:nth-child(2) {
			width: 75%;
			height:45px;
			text-align:left;
			font-size:16px;
			font-family: "Noto Sans JP";
			font-weight: 500;
			color: #333;
			padding:12px;
			padding-left:20px;
			background-color:#FFF;
			border: solid 1px #333;
		}
		#sec01 p.comment {
			margin: 0 auto 0 auto;
			width: 80%;
			font-size:16px;
			line-height:1.8em;
			text-align:center;
			font-family: "Noto Sans JP";
			font-weight: 400;
			color:#333;
			padding-bottom:20px;
		}
	}

	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		#section01 {
			margin: -50px auto 0 auto;
			width: 100%;
			padding-bottom:0px;
			background:linear-gradient(90deg,#F5F5F5 0%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
		}
		#sec01 {
			margin: 0 auto 0 auto;
			width: 100%;
			padding-bottom:30px;
			position:relative;
		}
		#section01 #sec01>h2 {
			display:block;
			margin: 30px auto 10px auto;
			width: 100%;
			font-size:22px;
			font-family: "Noto Sans JP";
			font-weight: 700;
			letter-spacing:5px;
			color: #519D9E;		/* WA-green */
			padding-left:135px;
		}
		#sec01 #sec01cont {
			margin: 10px auto 20px 2.5%;
			width: 95%;
			padding-bottom:0px;
			box-sizing: border-box;
			display: inline-block;
			position: relative;
		}
		.cont0101 h2 {
			font-size:22px;
		}
		.cont0101 h3 {
			font-size:15px;
		}
	}

/* ■ MainConents #section02  */

	#section02 {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-bottom:20px;
		background:linear-gradient(90deg,#F5F5F5 0%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
	}
	#section02 h1,h2,h3,h4,h5,h6{
		font-size:100%;
		font-weight:normal;
	}
	#sec02 {
		margin: 0 auto 0 auto;
		width: 100%;
	}
	#section02 #sec02>h2 {
		display:block;
		margin: 20px auto 20px auto;
		width: 100%;
		text-align:center;
		font-weight:bold;
		font-size:16px;
		color: #444;
	}
	#section02 .h2line  {
		margin: 5px auto 15px auto;
		width: 90%;
		height:1px;
		text-indent: -99999px;	/* テキスト非表示 */
		background:linear-gradient(90deg,#BDC3C7 0%,#BDC3C7 98%,var(--mmts-brand) 98%,var(--mmts-brand) 100%);	/* ★ */
	}
	#sec02 #sec02cont {
		margin: 10px auto 0 auto;
		width: 100%;
		padding-bottom:0;
	}
	#sec02 #sec02cont .carimg {
		margin: 0 auto 0 auto;
		width: 80%;
	}
	#sec02 #sec02cont .carimg img a {
		display:block;
		width: 100%;
		text-align:center;
	}
	#sec02 #sec02cont dl.caritem {
		margin: 20px auto 0 auto;
		width: 80%;
		padding-bottom:20px;
	}
	#sec02 #sec02cont dl.caritem dt {
		font-size:15px;
		line-height:1.7em;
		font-weight:bold;
		color:#333;
	}
	#sec02 #sec02cont dl.caritem dd {
		font-size:12px;
		line-height:1.7em;
		font-weight:normal;
		color:#333;
	}
	#sec02 #sec02cont dl.caritem dd.detail a {
		color: #B27C04;		/* Gold02 */
	}
	#sec02 #sec02cont dl.caritem dd.detail a:hover {
		color: #A4966A;		/* Gold01 */
	}

	@media only screen and (min-width:768px) {

		#section02 {
			margin:0 auto 0 auto;
			width: 100%;
			padding-bottom:30px;
			background:linear-gradient(90deg,white 0%,white 10%,#F5F5F5 10%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
		}
		#sec02 {
			margin: 0 auto 0 auto;
			width: 80%;
			padding-bottom:0px;
			background-image:
				none,
				none; /* ← 存在しないファイル。宣言を消すと隠れていた背景が出てしまうため none に置換（404回避のみ） */
			background-size:
				:contain,
				:contain;
			background-position:
				center top 4%,
				center bottom 10%;
			background-repeat:
				no-repeat,
				no-repeat;
			position:relative;
		}
		#section02 #sec02>h2 {
			display:block;
			margin: 30px auto 0 auto;
			width: 90%;
			font-size:38px;
			font-family: "Noto Sans JP";
			font-weight: 700;
			letter-spacing:1px;
		}
		#section02 .h2line  {
			margin: 30px auto 50px auto;
			width: 65%;
			height:1px;
			text-indent: -99999px;	/* テキスト非表示 */
			background:linear-gradient(90deg,#BDC3C7 0%,#BDC3C7 98%,var(--mmts-brand) 98%,var(--mmts-brand) 100%);	/* ★ */
		}
		#sec02 #sec02cont {
			margin: 0 auto 30px auto;
			width: 75%;
			padding-bottom:80px;
		}
		#sec02 #sec02cont .carimg {
			margin: 0 auto 0 auto;
			width: 60%;
		}
		#sec02 #sec02cont .carimg img a {
			display:block;
			width: 100%;
			text-align:center;
		}
		#sec02 #sec02cont dl.caritem {
			margin: 50px auto 0 40%;
			width: 50%;
			padding-bottom:0;
		}
		#sec02 #sec02cont dl.caritem dt {
			font-size:30px;
			line-height:1.8em;
			font-family: "Noto Sans JP";
			font-weight: 700;
			color:#333;
		}
		#sec02 #sec02cont dl.caritem dd {
			font-size:17px;
			line-height:1.8em;
			font-family: "Noto Sans JP";
			font-weight: 500;
			color:#333;
		}
		#sec02 #sec02cont dl.caritem dd.detail a {
			color: #B27C04;		/* Gold02 */
		}
		#sec02 #sec02cont dl.caritem dd.detail a:hover {
			color: #A4966A;		/* Gold01 */
			padding-left:30px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {


	}

/* ◆ Footer adjust */

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

		#cta02 {
			margin: -35px auto 35px auto;
			width: 100%;
			padding-bottom:0px;
			background-color:#FFF;
		}
	}