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

/*◆◇◆◇◆◇◆◇◆◇◆◇ 共通 ◇◆◇◆◇◆◇◆◇◆◇◆*/

/*================ 文字色 ================*/
.f-pink {
	color: #D6759F;
}

.f-gray {
	color: #707070;
}

.f-white {
	color: #fff;
}
/*================ 背景色 ================*/
.bg-pink {
	background-color: #D6759F;
}

.bg-gray {
	background-color: #F7F7F7;
}

.bg-paper {
	background-image: url("image/paper.png");
	background-repeat: repeat;
	background-position: center top;
	background-size: contain;

}

/*==================== フォント ===================*/
@font-face {
	font-family: 'mincho';
	font-style: normal;
	font-weight: 200;
	src: url( "NotoSerifCJKjp-SemiBold.woff") format('woff');
}

.mincho {
	font-family: 'mincho', serif;
}

/*==================== 全体 ===================*/

body {
	color: #1C1C1C;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size: 15px;
}

a {
	color: #707070;
}

a:hover {
	color: #1C1C1C;
}

ul,ol {
padding-left: 1.5em;
}
/*==================== ヘッダー ===================*/
#page-header {
	padding-top: 5px;
	padding-bottom: 8px;
}

#page-header h1 {
	font-size: 12px;
}

.header-logo {
	width: auto;
	height: 25px;
}


@media screen and (max-width:405px) {
	#page-header .col {
		padding-left: 0;
		padding-right: 0;
	}
}

/*==================== 追従フッターコンテンツ ===================*/

@media screen and (min-width:768px) {
	#follow-footer a {
		pointer-events: none;
	}
}

/*==================== フッター ===================*/
#page-footer {
	padding-bottom: 6em;
	border-top: #D6759F 1px solid;
}

#page-footer address a {
	text-decoration: underline;
}

.page-footer-text-01 {
	font-size: 12px;
}

/*◆◇◆◇◆◇◆◇◆◇◆◇ トップページ ◇◆◇◆◇◆◇◆◇◆◇◆*/

/*==================== mv ===================*/
#mv {
	width: 100%;
	background-image: url("image/mv-pc.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding-top: 1em;
	padding-bottom: 1em;
}

.mv-text-01,.mv-text-05 {
	font-size: 3.5vw;
	letter-spacing: 0.1em;
	line-height: 1.2;
}

.mv-text-02 {
	font-size: 3vw;
}

.mv-text-03 {
	font-size: 10vw;
	line-height: 1;
}

.mv-text-04 {
	font-size: 6vw;
}

.mv-top-text {
	padding-bottom: 5em;
}

.mv-bottom-text {
	padding-top: 5em;
	padding-right: 15px;
	padding-left: 15px;
}


@media screen and (max-width:405px) {
	#mv {
		background-image: url("image/mv-sp.png");
		background-position: center 46%;
		background-size: contain;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	#mv .col {
		padding-left: 0;
		padding-right: 0;
	}

	.mv-text-01 {
		font-size: 25px;
		line-height: 1.6em;
	}

	.mv-text-02 {
		font-size: 12px;
	}

	.mv-text-03 {
		font-size: 49px;
	}

	.mv-text-04 {
		font-size: 34px;
	}

	.mv-text-05 {
		font-size: 20px;
	}
	
	.mv-top-text {
		padding-bottom: 15em;
		text-align: center;
	}
	
	.mv-bottom-text {
		padding-top: 0;
		margin: auto;
	}

}
/*==================== greet ===================*/
.top-greet-text-01 {
	font-size: 30px;
}

.top-greet-text-02 {
	font-size: 25px;
	letter-spacing: 0.5em;
}

#top-greet .btn {
	display: block;
	background-color: #F7F7F7;
}

#top-greet .btn:hover {
	background-color: #EDEDED;
}

#top-greet .btn::after {
	content: "";
	display: inline-block;
	width: 48px;
	height: 7px;
	margin-left: 1.5em;
	background: url( "image/arrow.png") no-repeat;
	background-size: contain;
	vertical-align: middle;
	text-align: center;
}

.top-greet-text-03 {
	text-decoration: underline;
}

@media screen and (max-width:767px) {
	.top-greet-text-01 {
		font-size: 20px;
	}

	#top-greet .btn {
		position: relative;
	}

	#top-greet .btn::after {
		margin-left: 0;
		position: absolute;
		right: 1em;
		top: 45%;
	}

}

/*==================== プラン紹介 ===================*/
.pink-square {
	color: #fff;
	background-color: #D6759F;
	padding: 3px 5px;
	margin-left: 3px;
}
.plan-text-01 {
	font-size: 25px;
}

.plan-text-02 {
	font-size: 20px;
}

.plan-text-03 {
	 font-size: 25px;
}

.plan-text-04 {
	 font-size: 35px;
}

.plan-text-05 {
	font-size: 20px;
	margin-bottom: 0.5em;
}

.transport-only {
	color: #fff;
	background-image: url("image/transport-only.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.transport-only-line {
border: #fff 1px solid;
}

.transport-only h3 {
	font-size: 20px;
}

.plan-a-flow .col,.plan-a-flow .col-1 {
	padding-right: 0;
	padding-left:  0;
}

.plan-a-flow .arrow {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;;
	border-left: 11px solid #DEDEDE;
	border-right: 11px solid transparent;;
	border-bottom: 8px solid transparent;
	color: #DEDEDE;
	display: block;
	top: 30%;
	left:35%;
}

.recommend {
	border: #D6759F 1px dashed;
}

@media screen and (max-width:767px) {
	.plan-a-flow div:nth-child(even):after {
		padding: 45px 0.5em;
	}
	
	.plan-box {
	padding-left: 0;
	padding-right: 0;
	}
}
/*==================== ご紹介特典 ===================*/
#benefits h2 {
	font-size: 25px;
	margin-bottom: 0;
}

.benefits-text-01 {
	font-size: 20px;
}

#benefits ol {
	counter-reset: list-count; 
	list-style: none; 
	padding-left: 0;
}

#benefits ol > li::before {
	content:counter(list-count) ".";
	counter-increment: list-count;
	font-weight: bold;
	padding-right: 0.5em;
}


.yamaguchi {
	background-image: url( "image/map-yamaguchi.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto 100%;
	padding-top: 60px;
	padding-bottom: 90px;
}

.yamaguchi-text-01 {
	font-size: 20px;
}

@media screen and (max-width:767px) {
	.yamaguchi {
		background-size: 100% auto;
	}
}
/*==================== 軽自動車 ===================*/
#light-car {
	padding-top: 80px;
	padding-bottom: 80px;
	background-image: url( "image/car.png"),url("image/paper.png");
	background-repeat: no-repeat,repeat;
	background-position: right center,center top;
	background-size: auto 95%,cover;
}

#light-car h2 {
	font-size: 25px;
}


@media screen and (max-width:767px) {
	#light-car {
		padding-top: 40px;
		padding-bottom: 120px;
		background-position: right 90%,center top;
		background-size: auto 30%,cover;
	}
}
/*◆◇◆◇◆◇◆◇◆◇◆◇ ご挨拶ページ ◇◆◇◆◇◆◇◆◇◆◇◆*/
#topicpath {
	font-size: 12px;
}

#topicpath a {
	text-decoration: underline;
}

#greet h1 {
	font-size: 25px;
}

.greet-text-box::after {
	content: "";
	display: inline-block;
	width:  70%;
	height: 170px;
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.greet-text-box-01::after{
	background-image: url( "image/greet-01.png");
}

.greet-text-box-02::after {
	background-image: url( "image/greet-02.png");
}

.greet-text-box-03::after {
	background-image: url( "image/greet-03.png");
}

@media screen and (max-width:767px) {
.greet-text-box::after {
	height: 60px;
}

}