/* ========== css/customer.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:0px;
		background-color:#FFF;
	}
	#introduction h2{
		margin:0 auto 30px 31%;
		width:42%;
		font-size:30px;
		text-align: left;
		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 97%,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;
	}

	@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:80%;
			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 97%,var(--mmts-brand) 97%,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;
		}
	}
	@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 #sec01title01 {
		margin: 0 auto 0 auto;
		width: 90%;
	}
	#sec01 #sec01cont {
		margin: 10px auto 0 5%;
		width: 90%;
		padding-bottom:0;
		background-image:url("../images/icon/arrow02.png");
		background-repeat:no-repeat;
		background-size:	30px 21px;
		background-position:	center bottom 1px;
		background-color:rgba( 255,255,255,0.97 ); 	/*  White  透過97% */
		position: relative;
		border: solid 1px #DDD;
			border-radius:5px;  
			-moz-border-radius:5px;  
			-webkit-border-radius:5px;  
	}
	#sec01 #sec01cont:last-child {
		background-image:none;
	}
	#sysdev {		/* □ 固定ヘッダ アンカー位置差分変更 */
		margin-top:-80px;
		padding-top:80px;
	}
	.cont01 {
		margin: 20px auto 10px auto;
		width: 90%;
		padding-bottom:20px;
	}
	.cont01  h2 {
		display:block;
		margin: 0 auto 0 auto;
		width: 100%;
		text-align:center;
		font-size:13px;
		line-height:1.8em;
		font-weight:bold;
		color: #444;
		padding-top:0px;
		padding-left:0px;
		padding-bottom:5px;
		border-bottom: 1px solid #BDC3C7;	/* Siver */
	}
	.cont01 h2 .seq {
		font-size:13px;
		color: var(--mmts-brand);		/* mmts-red01 */
		color: #A4966A;		/* Gold01 */
		padding-right:10px; 
	}
	.cont01 .svimg {
		display:block;
		margin: 0 auto 0 auto;
		width:80%;
		padding-bottom:10px;
		text-align:center;
	}
	.cont01 .svimg img {
		padding:0;
		zoom:0.5;
		border: solid 1px #BDC3C7;		/* Siver */
	}
	.cont01 p.comment {
		margin: 20px auto 0 auto;
		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 0 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: 50px auto 0 auto;
			width: 80%;
			font-size:32px;
			font-family: "Noto Sans JP";
			font-weight: 700;
			letter-spacing:1px;
		}
		#sec01 #sec01cont {
			margin: 30px auto 30px 15%;
			width: 72.5%;
			padding-bottom:0;
			background-image:url("../images/icon/arrow02.png");
			background-repeat:no-repeat;
			background-size:	30px 21px;
			background-position:	center bottom 5px;
			background-color:rgba( 255,255,255,0.98 ); 	/*  White  透過98% */
				border-radius:10px;  
				-moz-border-radius:10px;  
				-webkit-border-radius:10px;  
			position: relative;
		}
		#sec01 #sec01cont:last-child {
			background-image:none;
		}
		.cont01 {
			margin: 30px auto 0 auto;
			width: 82%;
			padding-bottom:20px;
		}
		.cont01 h2 {
			display:block;
			margin: 0px auto 20px 0;
			width: 55%;
			font-size:20px;
			text-align:left;
			font-family: "Noto Sans JP";
			font-weight: 700;
			padding-top:0px;
			padding-left:0px;
			padding-bottom:20px;
			border-bottom: 1px solid #BDC3C7;	/* Siver */
		}
		.cont01 h2 .seq {
			font-size:20px;
			padding-right:20px; 
		}
		.cont01 .svimg {
			float:right;
			width:340px;
			padding:40px;
			padding-top:0px;
			padding-right:0px;
			padding-bottom:20px;
			zoom:1.0;
		}
		.cont01 .svimg img {
			display:block;
			padding:0;
			zoom:1.0;
		}
		.cont01 p.comment {
			margin: 0 auto 0 auto;
			font-size:15px;
			line-height:1.8em;
			font-family: "Noto Sans JP";
			font-weight: 400;
			color:#444;
			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;
		}

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

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