@charset "UTF-8";

/** 青タイトル **/
.title_blue {
	position: relative;
	overflow: hidden;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 10px 20px;
	margin: 20px auto 20px;
	background: #3498db;
	width: 100%;
	color: #FFFFFF;
}

/** 緑タイトル **/
.title_green {
	color: #FFF;
	background : #8FC31F;
	padding: 15px 0;
	border-radius: 5px;
}

/** 「サポセン申込可」エリア用 **/
.back-green {
	padding: .5em .5em 2em .5em;
	background-color: #E2F0D9;
}

.back-yellow {
	padding: 10px;
	background-color: #FBFCD0;
	height: auto;
}

.card_img {
	margin-top: 10px;
}

.campaign {
	background-image: url("../images/2021car26.png");
	background-repeat: no-repeat;
	background-position: center;
	margin: 3px 0;
	height: 180px;
}

.campaign p {
	line-height: 1.4em !important; 
}

.campaign img {
	height: auto;
	width: 70px;
	margin-top: 30px;
}

.title-green {
	color: #FFF;
	background : #8FC31F;
	margin: 20px .1em;
	padding: 15px 0;
	border-radius: 5px;
}

/** 「サポセン申込可」エリア用 **/
#content ul.list_square  {
	list-style: none;
	margin: 0;
	padding-left: 1em;
}
#content ul.list_square li{
	position: relative;
	padding-left: 0.6em;
	padding-bottom: 0.4em;
	line-height: 1.5;
}
#content ul.list_square li::before {
	font-family: 'Font Awesome 5 Free';
	content: "\f45c"; /* アイコンのunicode */
	font-weight: 600;
	position: absolute;
	color: #f44336;/* アイコンの色 */
	left: -0.8em; /* アイコンのスタート位置。左揃えの場合 ul のpadding-leftと同じ値 */
	top: -0.05em; /* アイコンの場所を変えたければ適宜変更 */
}

/** 「キャンペーンお申し込み手順」エリア用 **/
@media (max-width: 991px) {
	.campaign {
		background-image: url("../images/2021car26_2.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		margin: 10px 3px;
		height: 220px;
	}
}
@media (max-width: 768px) {
	.campaign {
		background-image: url("../images/2021car26_2.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		margin: 10px 0;
		height: 210px;
	}
}
@media (max-width: 425px) {
	.campaign {
		background-image: url("../images/2021car26_2.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		margin: 5px 0;
		height: 260px;
	}
}


hr.blue_line {
	margin-top: 10px;
	margin-bottom: 10px;
	border: 0;
	border-top: 2px solid #3498db;
}

.blue_line.inlineblock {
	margin-top: 10px;
	margin-bottom: 10px;
	border: 0;
	border-bottom: 2px solid #3498db;
	display: inline-block;
}


#content a {
	text-decoration: none;
}

#content h3.ind_015 {
    display: block;
    padding-left: 1.5em;
    text-indent: -1.5em;
}


@media (max-width: 768px) {
	#content h3.blue {
		font-size: 130%;
		line-height: 1.3em;
	}
}



/* ----------------------------------------
 * ひし形
 * ---------------------------------------- */

#content ul.list_rhombus  {
    list-style: none;
    margin: 0;
	padding-left: 1em;
}
#content ul.list_rhombus li{
	position: relative;
	padding-left: 0.4em;
	padding-bottom: 0.4em;
	line-height: 1.5;
}
#content ul.list_rhombus li:before {
  content: "\025c7"; /* アイコンのunicode */
  position: absolute;
  left: -0.8em; /* アイコンのスタート位置。左揃えの場合 ul のpadding-leftと同じ値 */
  top: -0.05em; /* アイコンの場所を変えたければ適宜変更 */
}


/** 01. タブデザイン
 **************************************************************** **/
/*タブのアクティブのデザイン変更*/
.nav-tabs.blue_back > li > a.active, .nav-tabs.blue_back > li> a.active:hover, .nav-tabs.blue_back > li > a.active:focus {
	color: #fff;
	cursor: default;
	background: #3498db;
	border-bottom-color: transparent;
}
.nav-tabs.blue_back > li > a.active:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -9px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid white;
}
.nav-tabs.blue_back > li.w100 > a.active:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -9px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-left: 0 solid transparent;
	border-right: 0 solid transparent;
	border-bottom: 0 solid white;
}






/*タブの高さの変更*/
.nav.blue_back > li > a {
	position: relative;
	display: block;
	padding: 15px 5px;
}


/*タブの角丸の変更*/
@media (min-width: 769px) {
	.nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
		border-bottom: 0px solid #ddd;
		border-radius: 0px 0px 0 0;
	}
	.nav-tabs-justified > a.active, .nav-tabs.nav-justified > a.active,
	.nav-tabs-justified > a.active:hover,
	.nav-tabs.nav-justified > a.active:hover,
	.nav-tabs-justified > a.active:focus,
	.nav-tabs.nav-justified > a.active:focus {
		border-bottom-color: #E4F1F8;
	}
}
/*タブの隣とのスペース*/
.nav.blue_back > li > a {
	margin-left: 0px;
	margin-right: 0px;
	background-color: #EFEFEF;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}
.nav.blue_back2 > li > a {
	margin-left: 0px;
	margin-right: 0px;
	background-color: #EFEFEF;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}
/*タブの下方向のスペース*/
#content .nav.nav-tabs.blue_back {
	margin: 10px 0 0 0;
	padding-left: 0;
}
/*タブの文字レイアウト*/
.nav-tabs.blue_back > li > a, .nav-tabs.blue_back > li > a:hover, .nav-tabs.blue_back > li > a:focus {
	font-size: 16.5px;
	font-weight: 600;
	color: #3498db;
	text-decoration: none;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	border-radius: 0px;
}
.tab-content{
	padding: 30px 20px;
}
.nav-tabs-outer::-webkit-scrollbar {
	display: none;
}
#content .nav-tabs-outer .nav-tabs.blue_back li.w100{
	display: block;
	width: 100%;
	margin-bottom: 10px;
}
.nav-tabs-outer .nav-tabs.blue_back li{
	display: block;
	width: 50%;
}
.nav-tabs-outer .nav-tabs.blue_back a {
	color: #3498db;
	text-decoration: none;
}
.nav-tabs-outer .nav-tabs.blue_back a:hover, .nav-tabs-outer .nav-tabs.blue_back a:focus {
	color: #3498db;
	text-decoration: underline;
	background-color: #E4F1F8;
}
.nav-tabs-outer .nav-tabs.blue_back a:focus {
	outline: thin dotted;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
@media (max-width: 768px) {
	.nav-tabs-outer .nav-tabs.blue_back li {
		display: block;
		width: 50%;
	}
	.nav-tabs-outer .nav-tabs.blue_back li a {
		padding:10px 5px;
	}
	.nav-tabs.blue_back > li {
		float: left;
		margin-bottom: -1px;
		font-size: 0.7em;
	}
	.tab-content{
	padding: 20px 00px;
}
}



/* ----------------------------------------
 * 囲み文字の基本形　インデント有
 * --------------------------------------- */
.maru {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column; 
  vertical-align:middle;
	margin-right: 5px;
	margin-bottom: 5px;
	text-indent: 0;
}
/* 円の大きさ */
.size_normal{
  width: 30px;
  height: 30px;
}
/* 四角の大きさ */
.content_inner .square {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  flex-flow: column; 
  margin-right: 0.2em;
}

/* 文字の大きさ */
.letter3 {
  font-size: 1.1em;
  line-height: 1.3em;
  text-indent: 0.1em;
}
/* 囲みと文字の色 */
.gray1 {
  color: #5F5F5F;
  border: 1px solid #5F5F5F;
  background: #fff;
}
.yellow1 {
  color: #ECD700;
  border: 1px solid #ECD700;
  background: #fff;
}
.purple1 {
  color: #8a2be2;
  border: 1px solid #8a2be2;
  background: #fff;
}
.blue1 {
  color: #fff;
  border: 1px solid #52A7E0;
  background: #52A7E0;
}
.pink1 {
  color: #E500B3;
  border: 1px solid #E500B3;
  background: #fff;
}
.green1 {
  color: #008000;
  border: 1px solid #008000;
  background: #fff;
}
.orange1 {
  color: #fff;
  border: 1px solid #E67E22;
  background: #E67E22;
}
.content_inner p{
  padding-left: 1.2em;
  text-indent: -1.4em;
}



/** 01. 文字サイズ
 **************************************************************** **/

#content .md {
	font-size: 150%;
}

#content .bg {
	font-size: 400%;
}

#content .sm {
	font-size: 120%;
}

@media all and (max-width: 515px) {
	#content .bg {
		font-size: 5.6vw;
	}

	#content .md {
		font-size: 4.7vw;
	}

	#content .sm {
		font-size: 4.0vw;
	}
}