@charset "utf-8";

/*============================================================================
	SP非表示
==============================================================================*/

@media screen and (min-width: 600px){
#PcWrap{
width:600px;
margin: 0% auto;
padding: 0%;
}
}

.br-sp { display:block; }
.br-pc { display:none; }


.Text{
font-size: 1em;
line-height: 170%;
font-weight: normal;
}

.YellowTxtMaker{background: linear-gradient(#fff 45%, #FCE907 45%);}
.Red{color: #FF0000;font-weight: bold;}
.LBlue{color: #03C4FF;font-weight: bold;}
.LPink{color: #FF8BF2;font-weight: bold;}
.LPurple{color: #5F64FA;font-weight: bold;}
.BigA{font-size:  1.375em;}

/* フレーム */
.BaseWrapA{
width: 100%;
margin-inline: auto;
padding:0%;
}

.BaseWrapB{
width: 100%;
margin-inline: auto;
padding:3% 5%;
}

.BaseWrapC{
width: 100%;
margin-inline: auto;
padding:0%;
}

/* タイトル */

.HeadlineBoxA{
width: 100%;
margin: 0%;
padding: 5%;
background-size: cover;
text-align: center;
}

.HeadlineA{
margin: 0%;
padding: 0%;
font-size: 1.875em;/*30px*/
line-height: 150%;
font-family: 'Zen Maru Gothic', sans-serif;
font-weight: 900;
text-align: center;
color: #5F64FA;
text-shadow: 0px 1px 0px #fff;
letter-spacing: -1px;
}

.HeadlineTxtMakerA{
padding: 0% 1%;
background: linear-gradient(#fff 65%, #FCE907 65%);
}

.HeadlineLogo{
width: 25%;
margin: 3% auto;
}

.HeadlineLogo img{width: 100%;}

.HeadlineB{
width: 50%;
margin: 5% auto;
padding: 2%;
font-size: 1.125em;/*18px*/
line-height: 150%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
text-align: center;
color: #fff;
background: #191E3E;
border-radius: 5px;
}

.HeadlineC{
font-size: 1.125em;/*18px*/
line-height: 180%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
}


/*============================================================================
CTA
==============================================================================*/

.CTAWrap{
width: 100%;
margin-inline: auto;
padding:0%;
text-align: center;
}

.CTATitle{
width: 90%;
margin: 0% auto;
padding: 3% 1%;
background: #FCE907;
border-radius: 100px;
text-align: center;
}

.CTAWrap::after{
content: "▼";
display: block;
margin: -2% auto 0% auto;
padding: 0%;
font-size: 1.25em;
color: #FCE907;
}

.CTATitle p{
margin: 0% auto;
padding: 0%;
font-size: 1em;/*16px;*/
line-height: 130%;
text-align: center;
color: #25BA4F;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
}

.CTABtn{
width: 100%;
margin: 0% auto;
padding: 0%;
text-align: center;
}

.Btn{
display: block;
width: 100%;
margin:3% auto;
padding: 3% 0%;
text-align: center;
color: #fff !important;
font-size: 1.25em;/*20px;*/
line-height: 2em;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
background: #22C755;
border-radius: 50px;
box-shadow: 0 5px 0 #18A740;
}

.Btn:hover{
text-decoration: none;
color: #fff !important;
background: #FF6F6F;
}

.Btn i{
display: inline-table;
margin: -5px 0 0 0;
padding: 0% 2% 0% 0.5%;
vertical-align: middle;
}

.CTAheadline{
width: 100%;
margin: -10% auto -5% auto;
padding: 0% 0% 10% 0%;
background: url(../img/bg_text.webp) no-repeat;
background-position: center bottom;
background-size: contain;
}

.CTAheadline p{
font-size: 1.125em;/*18px*/
line-height: 130%;
color: #FF5455;
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

/*============================================================================
header#GlobalHeader（ヘッダ）
==============================================================================*/
/*LINEボタンなし*/
@media screen and (min-width: 600px){
header#GlobalHeaderA {
position: absolute;
top:0px;
width: 100%;
max-width: 600px;
background: rgba(252,233,7,0.9);
z-index: 100;
margin: 0% auto;
padding: 3%;
display: flex;
justify-content: center;
align-items: center;
}
}

header#GlobalHeaderA {
position: absolute;
top:0px;
width: 100%;
background: rgba(252,233,7,0.9);
z-index: 100;
margin: 0% auto;
padding: 3%;
display: flex;
justify-content: center;
align-items: center;
}

header#GlobalHeaderA #Logo{
width:100%;
margin: 0% auto;
padding: 0%;
}

header#GlobalHeaderA #Logo p{
width:100%;
margin: 0% auto;
max-width: 124px;
text-align: center;
}


/*LINEボタン有り*/
@media screen and (min-width: 600px){
header#GlobalHeaderB {
position: fixed;
top:0px;
width: 100%;
max-width: 600px;
height: 60px;
background: rgba(252,233,7,0.9);
z-index: 100;
margin: 0% auto;
padding: 0%;
display: flex;
justify-content: center;
align-items: center;
}
}

header#GlobalHeaderB {
position: fixed;
top:0px;
width: 100%;
height: 60px;
background: rgba(252,233,7,0.9);
z-index: 100;
margin: 0% auto;
padding: 0%;
display: flex;
justify-content: center;
align-items: center;
}

header#GlobalHeaderB #Logo{
width:50%;
margin: 0%;
padding: 0% 0% 0% 3%;
}

header#GlobalHeaderB #Logo p{
width:100%;
max-width: 124px;
}

header#GlobalHeaderB #Logo p a:hover { text-decoration:none;}

header#GlobalHeaderB #LineBox{
width: 50%;
margin: 0%;
padding: 0% 0% 0% 2%;
text-align: center;
}

header#GlobalHeaderB #LineBox a{
display: block;
width: 40%;
height: 60px;
margin: 0% 0% 0% auto;
padding:9px 1% 7px 1%;
font-size: 0.6875em;/*11px*/
line-height: 120%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-weight: bold;
color: #fff;
text-align: center;
background: #25BA4F;
}


/*Footer LINEボタン有り*/
#FooterLineBox {
position: fixed;
bottom:0px;
width: 100%;
background: rgba(255,255,255,0.9);
z-index: 101;
margin: 0% auto;
padding: 3%;
display: flex;
justify-content: center;
align-items: center;
}


/*============================================================================
FV
==============================================================================*/

.FvWrap {
width: 100%;
margin: 0% auto 5% auto;
padding:0% 3% 5% 3%;
background: url(../img/bg_fv.webp) no-repeat #fff;
background-size: cover;
background-position: center bottom;
text-align: center;
}

@media screen and (min-width: 376px){
.FvWrap {
width: 100%;
margin: 0% auto 5% auto;
padding:0% 3% 5% 3%;
background: url(../img/bg_fv.webp) no-repeat #fff;
background-size: cover;
background-position: center bottom;
text-align: center;
}
}

.Fvheadline{
margin: 0% auto;
padding: 90px 0% 0% 0%;
font-size: 1em;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
}

.MainTextA{
font-size: 1.3em;
line-height: 110%;
}

.MainTextB{
font-size: 2.4em;
line-height: 110%;
}

.MainTextC{
width: 90%;
display: block;
margin: 3% auto 0% auto;
padding: 1%;
font-size: 1.6em;
color: #FCE907;
background: #5F64FA;
border-radius: 3px;
}

.FvBadge{
width: 100%;
margin: 45% auto 0% auto;
list-style: none;
}

@media screen and (min-width: 600px){
.FvBadge{
width: 100%;
margin: 50% auto 0% auto;
list-style: none;
}
}

.FvBadge li{
width: calc(100% / 3.2);
height: 75px;
margin: 0% auto;
padding: 3% 2%;
background: #FCE907;
border: solid 3px #FFF69C;
border-radius: 5px;
display: flex;
  justify-content: center;
  align-items: center;
}

.Badge{
font-size: 0.875em;
line-height: 130%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-weight: bold;

}

.BadgeBigtextA{
font-size: 1.25em;/*18px;*/
line-height: 100%;
font-weight: 900;
}

.BadgeBigtextB{
font-size: 1.5em;/*18px;*/
line-height: 100%;
font-weight: 900;
}

.AnnouncementWrap{
width: 100%;
margin: 1% auto 10% auto;
padding: 0%;
display: flex;
align-items: center;
gap: 3%;
}

.AnnouncementImgBox{
width: 25%;
flex-shrink: 0;
padding: 0;
overflow: visible;
display: flex;
align-items: flex-end;
}

.AnnouncementImg{
width: 150%;
padding-bottom: 150%;
background-image: url('../img/lomian2.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
margin-left: 0%;
}

.AnnouncementBubble{
width: 72%;
margin: 0%;
padding: 4%;
background: #fff;
border: 3px solid #5F64FA;
border-radius: 15px;
position: relative;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.AnnouncementBubble::before{
content: "";
position: absolute;
left: -15px;
top: 20px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 15px solid #5F64FA;
}

.AnnouncementBubble::after{
content: "";
position: absolute;
left: -9px;
top: 22px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 12px solid #fff;
}

.AnnouncementText{
margin: 0;
padding: 0;
font-size: 1em;
line-height: 160%;
font-weight: 700;
color: #191E3E;
}

.AnnouncementHighlight{
background: linear-gradient(#fff 50%, #FCE907 50%);
font-weight: 900;
}


/*============================================================================
軽貨物ドライバーって何をするの？
==============================================================================*/
.AboutBoxL{
width: 67%;
margin: 0% 3% 0% 0%;
}

.AboutBoxR{width: 30%;}
.AboutBoxR img{border-radius: 5px;}


.AboutBox{
width: 100%;
margin: -10% auto -7% auto;
padding: 5% 0%;
}

.FeaturesBoxA{
width: 100%;
margin:7% auto;
padding: 5%;
background: #FCE907;
border: solid 3px #FFF69C;
border-radius: 10px;
}

.FeaturesBoxB{
width: 100%;
margin: 0% auto;
padding: 0%;
background: #fff;
border-radius: 5px;
}

.FeaturesBoxC{
width: 100%;
margin-inline: auto;
padding:10% 0% 5% 0%;
background: url(../img/bg_features.webp) no-repeat;
background-position: top 15px right 0px;
background-size: 40%;
}

.FeaturesTitle{
margin: 0% 0% 5% 0%;
padding: 0%;
justify-content: flex-start !important;
}

.FeaturesBoxL{
width: 25%;
margin: 0% 3% 0% 0%;
padding: 2%;
background: #191E3E;
border-radius: 5px;
}

.FeaturesBoxL p{
color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
text-align: center;
}

.FeaturesBoxL p i{
margin: 0% 5% 0% 0%;
color: #FCE907;
}

.FeaturesTitle h3{
width: 100%;
margin: 2% 0% 0% 0%;
padding: 0%;
font-size: 1.25em;/*20px;*/
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
border-radius: 5px;
}

.FeaturesImg img{border-radius: 5px 5px 0px 0px;}
.FeaturesTxt{
margin: 0%;
padding:4%;
}

.GraphImg{margin: 5% auto 0% auto;}



/*============================================================================
当社が選ばれる理由
==============================================================================*/

.ReasonBoxA{
width: 100%;
margin: 3% auto;
padding: 0%;
}

.ReasonBoxA ul{list-style: none;}

.ReasonBoxA ul li{
margin: 0% auto 3% auto;
padding: 3%;
display: flex;
align-items: center;
}

.ReasonBoxA ul li i{
width: 13%;
margin: 0% 3% 0% 0%;
font-size: 2.125em;/*22px*/
text-align: center;
}

.ReasonBoxA ul li:nth-child(odd){
color: #191E3E;
background: #FFF69C;
}

.ReasonBoxA ul li:nth-child(even){
color: #5F64FA;
background: #DFE0FF;
}

.ReasonBoxB{
width: 100%;
margin-inline: auto;
margin-top: 15%;
padding :10% 0% 5% 0%;
background: url(../img/bg_reason3.png) no-repeat;
background-position: top right;
background-size: contain;
}
.ReasonBoxO{
width: 100%;
margin-inline: auto;
margin-bottom: 15%;
padding:10% 0% 5% 0%;
background: url(../img/bg_reason4.png) no-repeat;
background-position: top left;
background-size: contain;
}

.ReasonBoxC{
width: 100%;
margin-inline: auto;
padding:5% 0%;
}

.ModelBoxL{width: 40%;}
.ModelBoxL img{width: 100%; border-radius: 5px;}

.ModelBoxR{width: 57%;padding:0% 0% 0% 3%;}

.ModelBoxR dl dt{
margin: 5% auto 0% auto;
padding:2% 0%;
font-size: 1.125em;/*18px*/
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
text-align: center;
}

.ModelBoxR dl dd{
width: 100%;
margin:0% auto;
padding:1% 0%;
background: #FCE907;
font-size: 1.625em;/*26px*/
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
text-align: center;
border-radius: 5px;
}

/**
.ModelBoxR dl dd span{
display: inline-table;
margin:0% 1% 3px 1%;
padding:0%;
font-size: 0.65em;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
vertical-align:text-bottom;
}

.ReasonBoxD{
width: 100%;
margin:3% auto 1% auto;
padding:0%;
}

.ReasonBoxE{
width: 100%;
margin:0% auto;
padding:0%;
}

.ReasonBoxD dl dt,.ReasonBoxE dl dt{
display: inline-table;
width: 40%;
height: 65px;
margin-inline: auto;
padding:2%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
text-align: center;
background: #DFE0FF;
border-right: solid 1px #fff;
}

.ReasonBoxD dl dd,.ReasonBoxE dl dd{
display: inline-table;
width: 60%;
height: 65px;
margin-inline: auto;
padding:2%;
text-align: center;
background: #FFF69C;
border-left: solid 1px #fff;
}
**/

.ReasonBoxD dl, .ReasonBoxE dl {
    display: flex; /* 横並びにする */
    width: 100%;
    margin: 0;
    padding: 0;
}

.ReasonBoxD dl dt, .ReasonBoxE dl dt {
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    width: 40%;
    height: 65px;
    margin-inline: auto;
    padding: 2%;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    text-align: center;
    background: #DFE0FF;
    border-right: solid 1px #fff;
}

.ReasonBoxD dl dd, .ReasonBoxE dl dd {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    width: 60%;
    height: 65px;
    margin-inline: auto;
    padding: 2%;
    text-align: center;
    background: #FFF69C;
    border-left: solid 1px #fff;
}

/* Optional: 微調整が必要な場合の追加スタイル */
.ReasonBoxD dl dd span, .ReasonBoxE dl dd span {
    font-size: inherit;
    display: block; /* 各行をブロック表示で分離 */
}




/*============================================================================
1日のお仕事の流れ
==============================================================================*/

.FlowBoxA{
width: 100%;
margin: 0% auto;
padding: 5%;
background: #5F64FA;
border: solid 3px #DFE0FF;
border-radius: 10px;
}

.FlowBoxB{
display: flex;
align-items: stretch;
}

.FlowBoxL{
width: 50%;
margin: 0%;
padding: 0%;
}

.FlowBoxL img{border-radius:5px 0px 0px 5px;}

.FlowBoxR{
width: 50%;
margin: 0% auto;
padding: 3% ;
background: #fff;
border-radius:0px 5px 5px 0px;
display: flex;
justify-content: flex-start !important;
}

.FlowBoxC{
width: 100%;
margin: 0% auto;
padding: 3% 0%;
}

.FlowBoxC p{
font-size:  2.25em;
color: #5F64FA;
text-align: center;
}

.FlowBoxD{
width: 100%;
margin: 0% auto 5% auto;
padding: 3% 5%;
background: url(../img/bg_features.webp) no-repeat;
background-position: center right 5px;
background-size: 25%;
}



/*============================================================================
募集要項
==============================================================================*/

.RequirementsBox{
margin:0% auto;
padding: 2% 0% 5% 0%;
}

.RecruitBox{
width: 100%;
margin:3% auto;
padding: 0% 3%;
}

.RecruitBox h3{
font-size: 1.125em;/*18px*/
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.RecruitBox h3 i{
margin:0% 2% 0% 0%;
color: #5F64FA;
}

.RequirementsBox ul{
list-style: inside;
}


/*============================================================================
先輩ドライバーの声
==============================================================================*/

.VoiceBoxA{
width: 100%;
margin: 0% auto 5% auto;
padding: 4%;
background: #FCE907;
border: solid 3px #FFF69C;
border-radius: 10px;
}

.VoiceBoxB{
width: 100%;
margin: 0% auto;
padding: 0%;
display: flex;
align-items: stretch;
}

.VoiceBoxL{
width: 40%;
margin: 0% auto;
padding: 0%;
display: flex;
justify-content: flex-start !important;
align-items: center;
}

.VoiceBoxL img{border-radius: 5px;}

.VoiceBoxR{
width: 60%;
margin: 0% auto;
padding:0% 3%;
display: flex;
justify-content: flex-start !important;
align-items: center;
}

.VoiceBoxR h3{
margin: 0%;
padding:0%;
font-size: 1.125em;/*18px*/
line-height: 130%;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #000000;
}

h3.Voicemidashi {
	text-align: center;
	font-weight: bold;
	margin: 10px 0;
	color: #5F64FA;
	font-size: 140%;
}

.VoiceBoxC{
width: 100%;
margin: 3% auto 0% auto;
padding: 4%;
background: #fff;
border-radius: 5px;
}


/*============================================================================
応募から業務開始まで
==============================================================================*/

.JoiningBoxA{
width: 100%;
margin: 0% auto 7% auto;
padding: 0%;
}

.JoiningBoxB{
width: 100%;
margin: 0% auto;
padding: 5%;
background: #5F64FA;
border: solid 3px #DFE0FF;
border-radius: 10px;
}

.JoiningTitle{
width: 100%;
margin: 0% auto 2% auto;
padding: 2%;
}

.JoiningTitle p{
width: 100%;
margin: 0%;
padding: 0%;
font-size: 1.125em;/*18px*/
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #fff;
text-align: center;
}

.JoiningImgA{
width: 100%;
margin: 0% auto;
}

.JoiningImgA img{
width: 100%;
border-radius: 5px 5px 0px 0px;
}

.JoiningBoxC{
width: 100%;
margin: 0% auto;
padding: 4%;
background: #fff;
border-radius: 0px 0px 5px 5px;
}

.JoiningImgB{
width: 50%;
margin: 0% auto;
padding: 0%;
}

.JoiningImgB img{width: 100%;}


/*============================================================================
よくある質問
==============================================================================*/

.FaqBox ul{
width: 100%;
margin: 0% auto 10% auto;
padding: 0%;
list-style: none;
}

.FaqBox ul li{
width: 100%;
margin: 0% auto;
padding: 3%;
}

.FaqBox ul li:nth-child(odd){background: #DFE0FF;}

.FaqBox ul li:nth-child(odd) span{
display:inline-table;
width: 10%;
font-size: 1.25em;/*20px*/
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #5F64FA;
text-align: center;
}

.FaqBox ul li:nth-child(odd) h2{
display:inline-table;
width: 90%;
}


.FaqBox ul li:nth-child(even) span{
display:inline-table;
width: 10%;
font-size: 1.25em;/*20px*/
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #000;
text-align: center;
vertical-align:top;
}

.FaqBox ul li:nth-child(even) p{
display:inline-table;
width: 90%;
}


/*============================================================================
footer#globalFooter
==============================================================================*/

footer {}

#footOuter {
clear: both;
width: 100%;
margin: 10% auto 5% auto;
padding:5% 0%;
border-top: dotted 1px #707070;
}

/* footCenter */
#footLogoBox {
clear: both;
width: 100%;
margin: auto;
}

#footLogoBox a.footlogo{
display: block;
text-indent: -9999px;
margin: 0% auto;
width:56px;
height: 14px;
background: url(../img/Lomia_logo3.png) no-repeat;
background-size: 56px 14px;
}

#footBtm{
	width: 100%;
	font-size: 0.625em;/*10px;*/
	text-align: center;
	color: #333;
}