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

/*-------------------------------------------------------------
 *
 *							top_style.css
 *
 *-------------------------------------------------------------*/

/* common */
.bg-gray                            { background-color: #ebebeb; }
h2.colBlue.f_Outfit                 { font-size: 480%; margin-bottom: 32px; letter-spacing:0.02em; }
article .text-details               { margin-bottom: 50px; }                      
article .text-details p             { font-size: 140%; margin-bottom: 10px; letter-spacing:0.1em; line-height: 1.3; }

/* rec_news */
#rec_news                           { margin-top: 130px; }
#rec_news .box-style,
#event_is .box-style                { display: flex; max-width: 1200px; justify-content: space-between; width: min(93%, 1200px); }
#rec_news h2.colBlue.f_Outfit,
#event_is h2.colBlue.f_Outfit,
#news h2.colBlue.f_Outfit           { font-size: clamp(40px, calc(100vw* 52 / 1200), 52px); }
#rec_news article .text-details p,
#event_is article .text-details p,
#news article .text-details p       { font-size: clamp(16px, calc(100vw* 18 / 1200), 18px); }

#rec_news .btn                      { min-width: 180px; }
#rec_news .btn > a,
#news .btn > a,
#mid-career-recruitment .btn > a	{ line-height: 1.2; padding: 15px 50px 14px 40px; font-size: 15px; }
#rec_news .btn.newsLink 			{ margin-top: 15px; background-color: transparent; border: 1px solid #0066cb; }
#rec_news .btn.newsLink:hover       { border: 1px solid transparent; }
#rec_news .btn.newsLink a,
#rec_news .btn.newsLink span		{ color: #0066cb; }

#rec_news .box-style > article      { width: 310px; }
.rec_newsList,
#event_is_link                      { width: calc(100% - 345px); margin-left: 35px; }


/* event_is */
#event_is .box-style                { padding-top: 0; }
#event_is h2.colBlue.f_Outfit       { line-height: 1; margin-top: 15px; }
#event_is article .text-details     { margin-top: -7px; }
#event_is_link                      { display: flex; flex-wrap: wrap; gap: 16px; }
#event_is_link a:hover              { opacity: 0.8; }                    
#event_is_link a img                { max-width: fit-content; width: 100%; }


/* top_youtube */
#top_youtube                        { background: url(./../images/top_youtube_bg.jpg) no-repeat top center; padding: 200px 0 80px; margin-top: 15px; background-size: cover; }
#top_youtube > article              { max-width: 1200px; margin: 0 auto; width: min(93%, 1200px); }
.top_youtube_btn_area               { display: flex; margin-bottom: 50px; align-items: center; }
.top_youtube_btn_area h2.colBlue    { font-size: clamp(35px, calc(100vw* 42 / 1200), 42px); font-weight: normal; line-height: 1.3; margin-right: 30px; }
.top_youtube_btn_area a.top_youtube_btn { display: inline-block; }
.top_youtube_btn_area a.top_youtube_btn:hover { opacity: 0.8; }
.top_youtube_list                   { display: flex; flex-wrap: wrap; gap: 30px 40px; }
.top_youtube_list > .youtube_box    { background-color: #fff; max-width: 373px; }
.top_youtube_list > .youtube_box a:hover { opacity: 0.8; }
.top_youtube_list > .youtube_box img     { width: 100%; }

.top_youtube_list > .youtube_box p.index    { font-size: clamp(16px, calc(100vw* 18 / 1200), 18px); padding: 15px 15px 2px; line-height: 1.3; }
.top_youtube_list > .youtube_box p.sub      { font-size: clamp(10.5px, calc(100vw* 12 / 1200), 12px); padding: 0 15px 13px; }


/* bussiness career */
.business-career-box                { padding: 0 40px; }
.business-career-box > section      { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; box-sizing: border-box; padding: 80px 0; }
.business-career-box:nth-child(even)  section     { flex-direction: row-reverse; }

.business-career-box > section article:first-child      { width: 365px; position: relative; }
.business-career-box .btn                   { position: absolute; }

/* future */
#future                             { border-width: 18px; background: url(./../images/future-bg.jpg) no-repeat center center; background-size: cover; padding: 100px 0; }
#future > section                   { max-width: 1200px; margin: 0 auto; display: flex; width: min(93%, 1200px); }
#future h2.f_Outfit                 { font-size: 644%; margin-bottom: -10px; margin-left: -8.5px; letter-spacing:0.02em; }
#future article > .text-details     { color: #fff; max-width: 390px; padding: 30px 40px; box-sizing: border-box; margin: 0; }               
#future article .btn                { margin-top: 45px; min-width: 266px; text-align: center; }
#future article .btn a              { padding-left: 0; padding-right: 8px; }
#future .futureMov .movOpen         { margin-left: 15%; }
#future .futureMov .movOpen img     { width: 100%; height: auto; }


/* works news about-as */
.box-style                          { max-width: 1000px; margin: 0 auto; padding: 90px 0 110px; box-sizing: border-box; }
section:last-child.box-style        { padding-bottom: 160px; }
.box-style > article .text-details  { margin-top: -45px; }

/* works */
#works.box-style                    { max-width: 1290px; }
#works > article                    { text-align: center; }

#top-slider-area					{ width:100%; margin:0 auto; position: relative; }
#top-slider-area li					{ margin-left:5px; padding-right:5px; overflow: hidden; }
#top-slider-area a					{ vertical-align: middle; display: table-cell; text-align: center; transition: all .3s; border-radius: 52.3px; position: relative; }
#top-slider-area a:hover            { opacity: 0.7; }

#top-slider-area a img				{ width: 100%; }

#top-slider-area h5					{ margin-top: 5px; font-size: 83%; color: #000; font-weight: normal; text-align: center; }
#works .btn			                { margin: 50px auto 0; }
#works .btn	a		                { line-height: 1.2; padding: 12px 60px 15px 50px; }

.carouPrev						    { background:url("./../images/prev.png") no-repeat; left: 0; }
.carouNext						    { background:url("./../images/next.png") no-repeat; right: 0; }
.carouPrev,.carouNext			    { width: 61px; height: 60px; transition: all .3s; position: absolute; top:33%; background-size: cover; }
.carouPrev:hover,
.carouNext:hover				    { opacity: 0.6; }


/* about-as */
#about-as .about-as-list            { justify-content: space-between; }
#about-as .about-as-list .btn       { width: 96%; line-height: 1.2; margin-top: 30px; min-height: 68px; }
#about-as .about-as-list .btn a     { padding: 13px 0px; }

/* rec_marble_pr */
#rec_marble_pr img                  { width: 100%; height: auto; }

/* news */
#news .btn			                { margin: 70px auto 0; }

/* mid-career-recruitment */
#mid-career-recruitment             { background: url(./../images/mid-career-recruitment_bg.jpg) no-repeat top right; padding: 86px 0 225px; background-size: cover; }
#mid-career-recruitment > article   { max-width: 1200px; margin: 0 auto; width: min(93%, 1200px); color: #000; }
#mid-career-recruitment h2          { font-size: clamp(16px, calc(100vw* 19 / 1200), 19px); font-weight: bold; }
#mid-career-recruitment h3          { font-size: clamp(26px, calc(100vw* 46 / 1200), 46px); font-family: 'Yu Mincho', 'YuMincho', sans-serif; font-weight: normal; margin-top: 6px; margin-bottom: 21px; line-height: 1.3; }
#mid-career-recruitment p           { font-size: clamp(14px, calc(100vw* 18 / 1200), 18px); margin-bottom: 34px; }
#mid-career-recruitment .btn        { min-width: 217px; }
#mid-career-recruitment .btn > a    { padding: 21px 60px 22px 50px; }


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

    /* about-as */
    
    #about-as .about-as-list li                             { width: calc(98% / 4); }
    #about-as .about-as-list li img                         { width: 100%; height: auto; }

}

@media screen and ( max-width:1400px ) {
    /* common */
    h2.colBlue.f_Outfit                                     { font-size: 400%; }

    /* rec_news event_is */
    #event_is_link a                                        { width: calc(100% / 2 - 8px); }

    /* top_youtube */
    .top_youtube_list                                       { gap: 30px 2%; }
    .top_youtube_list > .youtube_box                        { width: calc((100% - 50px) / 3); }
    
    /* bussiness career */
    .business-career-box > section article:first-child      { width: 350px; }

    /* future */
    #future h2.f_Outfit                                     { font-size: 600%; }
}

@media screen and ( max-width:1200px ) {
    .box-style                                              { padding-left: 40px; padding-right: 40px; }

    /* rec_news event_is */
    #rec_news .box-style, #event_is .box-style              { width: initial; }
    .rec_newsList, #event_is_link                           { margin-left: 0; margin-top: 30px; }
    .rec_newsList.dlType01 dt                               { width: 100%; }
    .rec_newsList.dlType01 dd                               { margin: 0; border-top: none; }
    .rec_newsList span.newsTag                              { margin-right: 0; }

    /* bussiness career */
    .business-career-box > section                          { align-items: center; padding-bottom: 20%; }
    .business-career-box > section article:last-child       { width: 50%; }
    .business-career-box:nth-child(odd) section article:last-child  { margin-left: 15px; }
    .business-career-box:nth-child(even) section article:last-child { margin-right: 15px; }
    .business-career-box > section article:last-child img   { width: 100%; height: auto; }

    /* future */
    #future .futureMov .movOpen                             { margin-left: 5%; }

}

@media screen and ( max-width:900px ) {
    /* about-as */
    #about-as .about-as-list li                             { width: calc(100% / 2); }

    /* future */
    #future section                                         { display: block; }
    #future .futureMov .movOpen                             { margin: 40px auto; width: 100%; }

}

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

    h2.colBlue.f_Outfit                                     { font-size: 290%; margin-bottom: 13px; }
    .box-style                                              { padding-top: 55px; padding-left: 16px; padding-right: 16px; }
    .box-style > article .text-details                      { margin-top: -25px; margin-bottom: 20px; }
    article .text-details p                                 { font-size: 110%; line-height: 1.4; margin-bottom: 16px; }

    /* rec_news event_is */
    #rec_news                                               { margin-top: 100px; }
    #rec_news .box-style,
    #event_is .box-style                                    { flex-direction: column; }

    #rec_news .box-style > article,
    .rec_newsList, #event_is_link                           { width: 100%; }
    #rec_news .btn                                          { float: left; min-width: auto; }
    #rec_news .btn > a                                      { padding: 13px 43px 14px 32px; }
    #rec_news .btn.newsLink 			                    { margin-top: 0px; margin-left: 15px; }


    /* top_youtube */
    #top_youtube                                            { background: url(./../images/top_youtube_bg_top_sp.jpg) top center, url(./../images/top_youtube_bg_bottom_sp.jpg) bottom center; background-size: contain; padding: 90px 0; margin-top: 40px; background-repeat: no-repeat; }
    .top_youtube_btn_area                                   { display: block; }
    .top_youtube_btn_area h2.colBlue                        { margin-right: 0; margin-bottom: 20px; }
    .top_youtube_list > .youtube_box                        { width: 100%; background-color: transparent; margin: 0 auto; }


    /* bussiness career */
    .business-career-box                                    { padding: 0 16px; }
    .business-career-box > section                          { display: block; position: relative; padding: 45px 0; }
    .business-career-box > section article:first-child      { position: initial; }
    .business-career-box > section article:last-child       { width: 100%; }
    .business-career-box:nth-child(odd) section article:last-child,
    .business-career-box:nth-child(even) section article:last-child { margin: 0 0 110px 0; }
    .business-career-box > section article:first-child      { width: 100%; }

    .business-career-box .btn                               { right: 0; left: 0; margin: 0 auto; bottom: 7%; }

    /* future */
    #future h2.f_Outfit                                     { font-size: 430%; margin-bottom: -9px; margin-left: -5.5px; }
    #future article > .text-details                         { max-width: initial; width: 100%; }

    #future article .btn                                    { margin: 30px auto 0; min-width: auto; }
    #future article .btn a                                  { padding: 17px 60px 19px 50px; }

    /* works */
    #works.box-style                                        { padding-left: 0px; padding-right: 0px; }
    #works > article                                        { padding-left: 16px; padding-right: 16px; text-align: left; }
    .carouPrev,.carouNext			                        { top:initial; bottom: -85px;  }
    .carouPrev                                              { left: 34%; }
    .carouNext                                              { right: 34%; }
    #works .btn                                             { margin-top: 110px; }

    /* about-as */
    #about-as .about-as-list li                             { width: calc(97% / 2); }
    #about-as .about-as-list .btn                           { min-height: 63px; }

    /* news */
    #news h2.colBlue.f_Outfit                               { line-height: 1.1; margin-top: 15px; }
    #news article .text-details                             { margin-top: -7px; }

    /* mid-career-recruitment */
    #mid-career-recruitment                                 { background-position-x: 72%; padding: 83px 0 225px; }
    #mid-career-recruitment h3                              { margin-top: 28px; margin-bottom: 40px; }

}

@media screen and ( max-width:500px ) {
    #event_is_link                                          { flex-direction: column; row-gap: 14px; column-gap: 0; }                   
    #event_is_link a                                        { width: 100%; }
    #event_is_link a img                                    { max-width: 80%; margin: 0 auto; }
}

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

    .carouPrev                                              { left: 30%; }
    .carouNext                                              { right: 30%; }

}