@charset "utf-8";

/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
body {
    position: relative;
    font-family: 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic', 'Noto Sans JP', '游ゴシック', 'YuGothic', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', sans-serif !important;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
img {
    max-width: 100%;
    height: auto;
}

/*------------------------------------------------------------
	CTA
------------------------------------------------------------*/

.entry_cta {
    margin: 0 auto 0 auto;
    max-width: 520px;
}
.entry_cta a {
    display: block;
    background-color: #00C853;
    margin: 30px 20px 20px 20px;
    padding: 16px 0 16px 0;
    font-size: 16px;
    color: #FFF;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 60px;
    filter: drop-shadow(0px 4px 10px rgba(0, 200, 83, 0.2));
}

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

    .entry_cta a {
        margin: 14px 20px 20px 20px;
    }

}

/*------------------------------------------------------------
	FV
------------------------------------------------------------*/

#first_view {
    background-color: #FFAF00;
    background-image: url(../images/first_view_background.jpg);
    background-size: cover;
}
#first_view header {
    max-width: 1024px;
    margin: 0 auto 0 auto;
}
#first_view header img {
    display: block;
    max-width: 130px;
    padding: 20px 0 0 20px;
}
#first_view .first_view_box {
    max-width: 943px;
    margin: -10px auto 0 auto;
}
#first_view .first_view_box .first_view_top_sp,
.first_view_bottom_sp {
    display: none;
}
.entry_cta_first_view {
    margin: -10px auto 0px auto;
}

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

    #first_view {
        background-image: none;
    }
    #first_view .first_view_box {
        margin: 0px auto 0 auto;
    }
    #first_view .first_view_top_sp{
        margin: 0px auto 0 auto;
    }
    #first_view .first_view_box .first_view_top_sp,
    .first_view_bottom_sp {
        display: block;
    }
    #first_view header .first_view_pc,
    #first_view .first_view_box .first_view_pc {
        display: none;
    }
    .first_view_bottom_sp {
        max-width: 670px;
        margin: 0 auto 0 auto;
        padding: 6px;
    }
    .entry_cta_first_view {
        margin: 0px auto 0px auto;
    }
    .entry_cta_first_view a {
        margin-top: 4px;
        margin-bottom: 16px;
    }

}

/*------------------------------------------------------------
	動画
------------------------------------------------------------*/

#video_youtube {
    padding: 16px 16px 20px 16px !important;
}
#video_youtube .video_youtube {
    max-width: 650px;
    margin: 0 auto 0 auto;
    padding: 34px 0 34px 0;
    background-color: #fff;
    border-radius: 5px;
    border: 4px solid #FF9100;
}
#video_youtube .video_youtube h1 img {
    display: block;
    max-width: 346px;
    margin: 0 auto 0 auto;
}
#video_youtube .video_youtube iframe {
    display: block;
    max-width: 410px;
    width: 100%;
    height: 226px;
    margin: 0 auto 0 auto;
    border-radius: 5px;
}
#main #jobs {
    padding: 60px 0 20px 0;
}

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

    #video_youtube {
        padding: 24px 16px 24px 16px !important;
        background-color: #FF9100;
    }
    #video_youtube .video_youtube {
        padding: 24px 0 24px 0;
    }
    #video_youtube .video_youtube h1 img {
        max-width: 202px;
    }
    #video_youtube .video_youtube iframe {
        max-width: 300px;
        width: 90%;
        height: 167px;
    }

}

/*------------------------------------------------------------
	選ばれる4つの理由
------------------------------------------------------------*/

/*サマリ*/

#reason h1 {
    max-width: 512px;
    margin: 70px auto 50px auto;
}

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

    #reason h1 {
        max-width: 256px;
        margin: 30px auto 0 auto;
        padding-bottom: 30px;
    }

}


/*ポイント1*/

#reason .reason_point1 {
    background-color: #FBF8F1;
}
#reason .reason_point1 h2 {
    max-width: 370px;
    margin: 0 auto 0 auto;
    padding: 84px 0 30px 0;
}
#reason .reason_point1 .reason_point1_box {
    max-width: 1000px;
    margin: 0 auto 30px auto;
}
#reason .reason_point1 .reason_point1_box img {
    display: inline-block;
    max-width: 320px;
}
#reason .reason_point1 .reason_point1_box img:not(:last-child) {
    padding-right: 14px;
}
#reason .reason_point1 .reason_point1_company_logo {
    max-width: 464px;
    margin: 0 auto 0 auto;
    padding: 0 20px;
}
#reason .reason_point1 .reason_point1_voice {
    display: block;
    max-width: 380px;
    margin: 0 auto;
    padding: 10px 0 60px 0;
}


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

    #reason .reason_point1 h2 {
        max-width: 247px;
        padding: 56px 0 30px 0;
    }
    #reason .reason_point1 .reason_point1_box {
        max-width: 464px;
        margin: 0 auto 30px auto;
        padding: 0 32px;
    }
    #reason .reason_point1 .reason_point1_box img {
        display: block;
        max-width: 100%;
        margin: 0 auto 0 auto;
    }
    #reason .reason_point1 .reason_point1_box img:not(:last-child) {
        padding-right: 0px;
        padding-bottom: 20px;
    }
    #reason .reason_point1 .reason_point1_voice {
        max-width: 320px;
    }

}

/*ポイント2*/

#reason .reason_point2 {
    max-width: 1024px;
    margin: 90px auto 90px auto;
}
#reason .reason_point2 .reason_point2_box {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    list-style: none;
}
#reason .reason_point2 .reason_point2_box .reason_point2_box_1 {
    max-width: 454px;
}
#reason .reason_point2 .reason_point2_box .reason_point2_box_2 {
    max-width: 523px;
}
#reason .reason_point2 .entry_cta {
    margin: 0 auto 0 0;
    max-width: 360px;
}
#reason .reason_point2 .entry_cta a {
    display: block;
    background-color: #00C853;
    margin: 30px 20px 20px 20px;
    padding: 16px 0 16px 0;
    font-size: 16px;
    color: #FFF;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 60px;
    filter: drop-shadow(0px 4px 10px rgba(0, 200, 83, 0.2));
}
#reason .reason_point2 .reason_point2_box .reason_point2_box_1 .reason_point2_h1_sp,
#reason .reason_point2 .reason_point2_box .reason_point2_box_2 .reason_point2_image_sp,
#reason .reason_point2 .reason_point2_voice,
#reason .reason_point2 .entry_cta_reason_point2_2 {
    display: none;
}

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

    #reason .reason_point2 {
        max-width: 463px;
        margin: 40px auto 40px auto;
    }
    #reason .reason_point2 .reason_point2_box {
        display: block;
    }
    #reason .reason_point2 .reason_point2_box .reason_point2_box_1 {
        max-width: 454px;
    }
    #reason .reason_point2 .reason_point2_box .reason_point2_box_1 .reason_point2_h1_sp {
        max-width: 226px;
        margin: 0 auto 25px auto;
    }
    #reason .reason_point2 .reason_point2_box .reason_point2_box_2 {
        max-width: 464px;
        padding: 0 16px 0 16px;
    }
    #reason .reason_point2 .entry_cta {
        margin: 0 auto 0 auto;
        max-width: 100%;
    }
    #reason .reason_point2 .entry_cta a {
        display: block;
        background-color: #00C853;
        margin: 30px 20px 20px 20px;
        padding: 16px 0 16px 0;
        font-size: 16px;
        color: #FFF;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        border-radius: 60px;
        filter: drop-shadow(0px 4px 10px rgba(0, 200, 83, 0.2));
    }
    #reason .reason_point2 .reason_point2_voice {
        max-width: 454px;
        padding: 26px 16px 26px 16px;
    }
    #reason .reason_point2 .reason_point2_box .reason_point2_box_1 .reason_point2_h1_sp,
    #reason .reason_point2 .reason_point2_box .reason_point2_box_2 .reason_point2_image_sp,
    #reason .reason_point2 .reason_point2_voice,
    #reason .reason_point2 .entry_cta_reason_point2_2 {
        display: block;
    }
    #reason .reason_point2 .reason_point2_box .reason_point2_box_1 .reason_point2_h1_pc,
    #reason .reason_point2 .reason_point2_box .reason_point2_box_2 .reason_point2_image_pc,
    #reason .reason_point2 .entry_cta_reason_point2_1 {
        display: none;
    }
    #reason .reason_point2  .entry_cta a {
        margin: 14px 20px 20px 20px;
    }

}

/*ポイント3*/

#reason .reason_point3 {
    background: linear-gradient(180deg, #FF9100 0%, #F76868 100%);
}
#reason .reason_point3 .reason_point3_box_pc {
    max-width: 1024px;
    margin: 0 auto 0 auto;
    padding: 30px 0 60px 0;
}
#reason .reason_point3 .reason_point3_box_pc img:first-child {
    padding-bottom: 40px;
}
#reason .reason_point3 .reason_point3_box_sp,
#reason .reason_point3 .entry_cta_reason_point3 {
    display: none;
}

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

    #reason .reason_point3 {
        padding-bottom: 50px;
    }
    #reason .reason_point3 .reason_point3_box_pc {
        display: none;
    }
    #reason .reason_point3 .reason_point3_box_sp {
        display: block;
        max-width: 464px;
        margin: 0 auto 0 auto;
        padding: 50px 32px 2px 32px;
    }
    #reason .reason_point3 .reason_point3_box_sp .reason_point3_title_scout_sp {
        max-width: 272px;
        margin: 0 auto 0 auto;
    }
    #reason .reason_point3 .reason_point3_box_sp .reason_point3_title_aitai_sp {
        max-width: 344px;
        margin: 0 auto 0 auto;
    }
    #reason .reason_point3 .reason_point3_box_sp figure {
        margin: 32px 0 32px 0;
    }
    #reason .reason_point3 .entry_cta_reason_point3 {
        display: block;
    }

}

/*ポイント4*/

#reason .reason_point4 {
    background-color: #FBF8F1;
}
#reason .reason_point4 .reason_point4_box_pc,
#reason .reason_point4 .reason_point4_box_sp {
    max-width: 1010px;
    margin: 0 auto 0 auto;
}
#reason .reason_point4 .reason_point4_box_pc {
    display: flex;
    gap: 90px;
    padding: 50px 0 0 0;
}
#reason .reason_point4 .reason_point4_box_pc h2 {
    margin-top: 50px;
    max-width: 410px;
}
#reason .reason_point4 .reason_point4_box_pc figure {
    max-width: 512px;
}
#reason .reason_point4 .reason_point4_box_sp {
    display: none;
}

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

    #reason .reason_point4 .reason_point4_box_pc {
        display: none;
    }
    #reason .reason_point4 .reason_point4_box_sp {
        display: block;
    }
    #reason .reason_point4 .reason_point4_box_sp h2 {
        max-width: 270px;
        margin: 0 auto 0 auto;
        padding-top: 50px;
    }
    #reason .reason_point4 .reason_point4_box_sp .reason_point4_image_sp {
        max-width: 464px;
        margin: 0 auto 0 auto;
        padding: 30px 16px 20px 16px;
    }
    #reason .reason_point4 .reason_point4_box_sp .reason_point4_voice_sp {
        max-width: 240px;
        margin: 0 auto 0 auto;
    }
    #reason .reason_point4 .reason_point4_box_sp .entry_cta {
        margin-bottom: 0;
        padding: 10px 0 0 0;
    }
    #reason .reason_point4 .reason_point4_box_sp .entry_cta a {
        margin-bottom: 0;
    }

}

/*------------------------------------------------------------
	登録後
------------------------------------------------------------*/

#after_registration {
    background-color: #FBF8F1;
}
#after_registration h2 {
    max-width: 332px;
    margin: 0 auto 0 auto;
    padding: 70px 16px 20px 16px;
}
#after_registration .after_image_pc {
    max-width: 1246px;
    margin: 0 auto 0 auto;
    padding: 0 16px 0 16px;
}
#after_registration .after_image_sp {
    display: none;
}
#after_registration .entry_cta {
    padding-bottom: 50px;
}
#after_registration .entry_cta a {
    margin-bottom: 0;
}

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

    #after_registration .after_image_pc {
        display: none;
    }
    #after_registration .after_image_sp {
        display: block;
        max-width: 464px;
        margin: 0 auto 0 auto;
        padding: 30px 16px 20px 16px;
    }
    #after_registration .entry_cta {
        padding-bottom: 50px;
    }
    
}

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

#question h2 {
    max-width: 240px;
    margin: 70px auto 30px auto;
}
#question ul {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 756px;
    margin: 0 auto 0 auto;
    list-style: none;
}
#question ul li {
    background-color: #FBF8F1;
    border-radius: 5px;
    height: 277px;
}
#question ul li img {
    max-width: 330px;
    padding: 20px;
}

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

    #question h2 {
        max-width: 192px;
        margin: 40px auto 20px auto;
    }
    #question ul {
        display: block;
        max-width: 464px;
        margin: 0 auto 0 auto;
        padding: 0 24px 0 24px;
        list-style: none;
    }
    #question ul li {
        background-color: #fff;
        padding-bottom: 30px;
        border-radius: 5px;
        height: auto;
    }
    #question ul li img {
        max-width: 100%;
        padding: 0;
    }

}

/*------------------------------------------------------------
	拠点
------------------------------------------------------------*/ 

#office {
    background-color: #FBF8F1;
    margin: 40px 0 0 0;
}
#office .office {
    max-width: 700px;
    margin: 0 auto 0 auto;
}
#office .office h1 {
    margin: 0 auto 0 auto;
    max-width: 288px;
    padding: 60px 0 0 0;
}
#office .office h1 img {
    width: 100%;
}
#office .office_width {
    margin: 0 0 0 0;
    padding: 32px 0 0px 0;
}
#office .office_flex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 1024px;
    margin: 0 auto 0 auto;
}
  #office .office_flex img {
    display: block;
    width: 320px;
    margin: 0;
}
.after_voice {
    background-color: #FBF8F1;
    padding: 50px 0 0 0;
}
.after_voice img {
    display: block;
    max-width: 384px;
    margin: 0 auto 0 auto;
}

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

    #office .office h1 {
        max-width: 208px;
        padding: 32px 0 0 0;
    }
    .after_voice img {
        max-width: 332px;
        margin: 0 auto 0 auto;
    }

}

/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/

footer {
    padding: 40px 0 0 0;
    background-color: #FBF8F1;
}
footer small {
    display: block;
    text-align: center;
    font-size: 10px;
    font-weight: 300;
    color: #7A7775;
}
footer div {
    max-width: 342px;
    margin: 0 auto 0 auto;
    padding: 10px 0 30px 0;
    text-align: center;
}
footer div a {
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    color: #7A7775;
}
footer div a:not(:last-child) {
    padding: 0 12px 0 0;
    border-right: 1px solid #7A7775;
}
footer div a:not(:first-child) {
    padding-left: 12px;
}