@charset 'UTF8';

/* style_lp.cssで未設定の項目. */
.lp-section {
    margin-top: -140px;
    padding-top: 140px;
}
.lp-section h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 20px 0;
}
.lp-section h3 {
    font-size: 2rem;
    font-weight: 600;
    margin: 20px 0;
}

@media screen and (max-width: 850px) {
    .lp-section h1 {
        font-size: 2.2rem;
    }
    .lp-section h2 {
        font-size: 1.5rem;
    }
    .lp-section h3 {
        font-size: 1.2rem;
    }        
}

/* --- 共通 start ---. */
.ta-center {
    text-align: center;
}
.ta-right {
    text-align: right;
}
.d-flex {
    display: flex;
}
.d-inline-block {
    display: inline-block;
}
.d-grid {
    display: grid;
}
.color-blue {
    color: #0093d7;
}
.color-orange {
    color: #ffb705;
}
.color-indigo {
    color: #004599;
}
.color-green {
	color: #4ED130;
}
.jc-center {
    justify-content: center;
}
.jc-space-between {
    justify-content: space-between;
}
.ai-center {
    align-items: center;
}
.ai-flex-start{
	align-items: flex-start;
}
.va-middle {
    vertical-align: middle;
}
.a-link {
    color: #0093d7;
    border-bottom: 1px solid #0093d7;
    cursor: pointer;
}
.fw-600 {
    font-weight: 600;
}
.fs-2 {
    font-size: 2rem;
}
.fs-3 {
	font-size: 3rem;
}

@media screen and (max-width: 850px) {
    .fs-2 {
        font-size: 1.2rem;
    }
    .fs-3 {
        font-size: 1.5rem;
    }
}

hr.title-bar {
	border-left: none;
	border-right: none;
	border-top: none;
    border-bottom: 3px solid #FFFF00;
    margin-top: -10px;
}
span.title-bar {
	border-left: none;
	border-right: none;
	border-top: none;
    border-bottom: 3px solid #FFFF00;
    margin-top: -20px;
}
span.title-bar-red{
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 3px solid #f2dede;
    margin-top: -20px;
}
.circle-item::before {
    content: "◎";
}
.square-item::before {
    content: "■";
}
.img-m20{
	margin: 20px;
}
.img-border{
	border: 1px solid;
}
.pl-10{
	padding-left:10px;
}
.pl-50{
	padding-left:50px;
}
/* --- 共通 end ---. */

/* --- 幅調整用 start ---. */
.w-30{
	width: 30px;
}
.w-100 {
    width: 100px;
}
.w-200 {
    width: 200px;
}
.w-300 {
    width: 300px;
}
.w-400 {
    width: 400px;
}
.w-500 {
    width: 500px;
}
.w-600 {
    width: 600px;
}
.w-700 {
    width: 700px;
}
.w-800 {
    width: 800px;
}
.w-1000 {
    width: 1000px;
}
.w-1100 {
    width: 1100px;
}
/* --- 幅調整用 end ---. */

/* --- 横のトラック start ---. */
#truck-inquiry {
    top: 200px;
}
/* --- 横のトラック end ---. */

/* --- ページヘッダー start ---. */
.lp-section-menu::before {
	content: "";
	display: block;
	height: 30px;
}

.lp-section-menu {
	position: sticky;
	top: 110px;
    background-color: #eef2ef;
    z-index: 6;
}

/*--- クラウド配車のヘッダー(追加) ---*/
.lp-section-menu2::before {
	content: "";
	display: block;
	height: 30px;
}

.lp-section-menu2 {
	position: sticky;
	top: 70px;
    background-color: #eef2ef;
    z-index: 6;
}

@media screen and (max-width: 850px) {
	.lp-section-menu {
	    /* menu-contentsの表示が環境によって異なるのでレスポンシブでは非表示. */
		display: none;
	}
	.lp-section-menu2 {
	    /* menu-contentsの表示が環境によって異なるのでレスポンシブでは非表示. */
		display: none;
	}
}

.lp-section-menu .menu-contents {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem
}

.lp-section-menu2 .menu-contents {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem
}

@media screen and (max-width: 850px) {
	.lp-section-menu .menu-contents {
		font-size: 1.5rem;
		white-space: nowrap; 
    	overflow-x: auto;
    	flex-wrap: nowrap; 
   		padding-left: 165px;	
   		}
   	.lp-section-menu2 .menu-contents {
		font-size: 1.5rem;
		white-space: nowrap; 
    	overflow-x: auto;
    	flex-wrap: nowrap; 
   		padding-left: 165px;	
   		}
}
.lp-section-menu .menu-contents a {
    margin: 0 10px;
    font-weight: 600;
    padding: 5px 10px;
}

.lp-section-menu2 .menu-contents a {
    margin: 0 10px;
    font-weight: 600;
    padding: 5px 10px;
}

@media screen and (max-width: 850px) {
	.lp-section-menu .menu-contents a {
		padding: 5px 5px;
		margin: 0px;
	}
	.lp-section-menu2 .menu-contents a {
		padding: 5px 5px;
		margin: 0px;
	}
}
.lp-section-menu .menu-contents a:hover {
    background-color: white;
    border-radius: 10px;
    opacity: 1;
    padding: 5px 10px;
}

.lp-section-menu2 .menu-contents a:hover {
    background-color: white;
    border-radius: 10px;
    opacity: 1;
    padding: 5px 10px;
}

@media screen and (max-width: 850px) {
	.lp-section-menu .menu-contents a:hover {
		padding: 0px;
	}
	.lp-section-menu2 .menu-contents a:hover {
		padding: 0px;
	}
}
.lp-section-menu .menu-contents .selected {
    background-color: white;
    border-radius: 10px;
    opacity: 1;
    padding: 5px 10px;
}

.lp-section-menu2 .menu-contents .selected {
    background-color: white;
    border-radius: 10px;
    opacity: 1;
    padding: 5px 10px;
}

.lp-section-menu hr {
    border: 5px solid #0093d7;
}

.lp-section-menu2 hr {
    border: 5px solid #0093d7;
}

.classification {
/*     border: 1px solid black; */
    box-shadow: 3px 3px 6px rgb(0 0 0 / 10%);
    border-radius: 10px;
    background-color: white;
    padding: 5px 20px;
    margin: 0 10px;
}
/* --- ページヘッダー end ---. */

/* --- 白枠の部分 共通 start ---. */
.lp-sect-contents-area {
    background-color: white;
    border-radius: 20px;
    padding: 10px 20px;
    display: grid;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.lp-sect-contents-no {
    font-size: 5rem;
    margin-right: 20px;
}
.lp-sect-contents-no img {
    width: 50px;
}
.lp-sect-contents-title {
    font-size: 2.5rem;
}
.lp-sect-contents-title span {
    font-size: 1.5rem;
}
.lp-sect-content {
    border: 1px solid black;
    border-radius: 20px;
    padding: 10px 15px;
    margin: 10px 5px;
}
.lp-sect-content .title {
    font-size: 2rem;
}
.lp-sect-content .sub-title {
    font-size: 1.5rem;
    margin: -10px 0 0;
}
.img-mt-m30 {
    margin-top: -30px;
}
.lp-sect-memo {
    background-color: #E2F0D9;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 1.5rem;
    margin: 30px 0;
}
#support {
    font-size: 1.5rem;
}
/* --- 白枠の部分 共通 end ---. */

/* --- サポート加入率 start ---. */
.support-rate {
    width: 300px;
    height: 40px;
    background: #FFF;
    border-radius: 50px;
    text-align: center;
    vertical-align: middle;
    align-items: center;
    display: flex;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.2);
    margin-left: 20px;
    margin-top: 10px;
    border: 2px double #0093d7;
}
.support-rate p {
    font-weight: 600;
    font-size: 2rem;
    color: #0093d7;
    margin-left: -45px;
}
.support-rate .rate {
    font-weight: 600;
    font-size: 4rem;
    color: #0093d7;
}
.support-rate img {
    width: 100px;
    position: absolute;
    margin-left: -12px;
    top: -12px;
}
.support-rate div {
    margin: -20px auto 0 auto;
}
/* --- サポート加入率 end ---. */