@charset "utf-8";

/*========================

business.css

========================*/
body {
 min-width:1080px;
}


/*---------------------------------------------
main_visual(business_top)
---------------------------------------------*/
#top_main_visual #top_main_visual_cont .box_wrap.lazyloaded {
 opacity:1;
}

#top_main_visual {
 background-color:var(--white);
 background-image:url(/wp-content/themes/drivefit/img/business/bg_main_visual_left.webp);
 background-repeat:no-repeat;
 background-position:left top;
 background-size:40vw auto;
 display: flex;
 flex:auto;
 flex-direction: column;
 height:auto;
 overflow: hidden;
 padding: 0;
 position:relative;
 z-index:1;
}

#top_main_visual #top_main_visual_cont {
 align-items:center;
 align-content:center;
 display:flex;
 flex:1;
 justify-content:center;
 position: relative;
 height:100%;
 width:100%;
}

#top_main_visual #top_main_visual_cont .figure_group {
 height:100%;
 width:100%;
 position:absolute;
}

#top_main_visual #top_main_visual_cont .figure_group figure {
 background-repeat:no-repeat;
 background-position:center center;
 background-size:contain;
 content:" ";
 position: absolute;
 width: 100%;
 height: 100%;
 opacity: 0;
 transition: opacity 1s cubic-bezier(0.48, 0.16, 0.33, 1),transform 1.5s cubic-bezier(0.59, -0.02, 0.33, 1);
 transition: opacity 1s ease-out, transform 1s ease-out;
 transition: opacity 1s ease,transform 1s cubic-bezier(0.3, 0.93, 0.58, 1);
 transform: scale(0.9) translateZ(0);
 transform-origin: left top;
}

#top_main_visual #top_main_visual_cont .figure_group.pc .p_left_top {
 background-image:url(/wp-content/themes/drivefit/img/business/bg_main_visual_left_top.webp);
}

#top_main_visual #top_main_visual_cont .figure_group.pc .p_left_bottom {
 background-image:url(/wp-content/themes/drivefit/img/business/bg_main_visual_left_bottom.webp);
}

#top_main_visual #top_main_visual_cont .figure_group.pc .p_center_bottom {
 background-image:url(/wp-content/themes/drivefit/img/business/p_main_visual_center_bottom.webp);
}

#top_main_visual #top_main_visual_cont .figure_group.pc .p_center_bottom_right {
 background-image:url(/wp-content/themes/drivefit/img/business/bg_main_visual_center_bottom_right.webp);
}

#top_main_visual #top_main_visual_cont .figure_group.pc .p_right_top {
 background-image:url(/wp-content/themes/drivefit/img/business/bg_main_visual_right_top.webp);
 transform-origin: right top;
}

#top_main_visual #top_main_visual_cont .figure_group.pc .p_right_bottom {
 background-image:url(/wp-content/themes/drivefit/img/business/bg_main_visual_right_bottom.webp);
 transform-origin: right bottom;
}

#top_main_visual #top_main_visual_cont .figure_group .p_left_top.lazyloaded,
#top_main_visual #top_main_visual_cont .figure_group .p_left_bottom.lazyloaded,
#top_main_visual #top_main_visual_cont .figure_group .p_center_bottom.lazyloaded,
#top_main_visual #top_main_visual_cont .figure_group .p_center_bottom_right.lazyloaded,
#top_main_visual #top_main_visual_cont .figure_group .p_right_top.lazyloaded,
#top_main_visual #top_main_visual_cont .figure_group .p_right_bottom.lazyloaded {
 opacity:1;
 transform: translate(0, 0);
}

#top_main_visual #top_main_visual_cont .page_title {
 align-items:center;
 align-content:center;
 display:flex;
 height:auto;
 justify-content:center;
 margin:auto;
 padding:0;
 z-index:2;
}

#top_main_visual #top_main_visual_cont .page_title.sp {
 display:none;
}

#top_main_visual #top_main_visual_cont .page_title img {
 width:100%;
 height:100%;
 opacity: 0;
 -webkit-transition: opacity 3s;
 transition: opacity 3s;
 object-fit: cover;
 position: relative;
 display: block;
}

#top_main_visual #top_main_visual_cont .page_title img.lazyloaded {
 opacity:1;
}

#top_main_visual #top_main_visual_cont #ansin {
 position:absolute;
 bottom:calc(45px + 5vw);
 right:3vw;
 z-index:25;
 width:28vw;
 max-width:220px;
 height:auto;
 z-index:10;
}

@media screen and (min-width:1280px) {
#top_main_visual #top_main_visual_cont #ansin {
 bottom:calc(15px + 3vw);
 right:7vw;
}
}

#top_main_visual #top_main_visual_cont #ansin img {
 width:100%;
 height:auto;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition:opacity 3s;
}

#top_main_visual #top_main_visual_cont #ansin img.lazyloaded {
 opacity:1;
}

/*---------------------------------------------
main_visual
---------------------------------------------*/
#main_visual {
 height: 600px;
}

#main_visual #main_visual_cont {
 display: flex;
 justify-content: center;
 align-content: center;
 align-items: center;
 height: 600px;
}

#main_visual #main_visual_cont .box_wrap {
 align-items:center;
 display:flex;
 justify-content:center;
 height:600px;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition:opacity 3s;
 overflow:hidden;
 position:absolute;
 top:0;
 width:100%;
 z-index:3;
}

#main_visual #main_visual_cont .box_wrap.lazyloaded {
 opacity:1;
}

#main_visual #main_visual_cont .box_wrap {
 align-items:center;
 display:flex;
 justify-content:center;
 height:600px;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition:opacity 3s;
 overflow:hidden;
 position:absolute;
 top:0;
 width:100%;
 z-index:3;
}

#main_visual #main_visual_cont .box_wrap .box_cont {
 align-items:center;
 background-color:var(--white);
 border-radius:20px;
 box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.2);
 display:flex;
 flex-direction:column;
 justify-content:center;
 position:absolute;
 row-gap:15px;
 top:auto;
 right:auto;
 bottom:auto;
 left:auto;
 margin:0 auto;
 padding:35px 20px 30px;
 flex:0 1 340px;
 max-width:340px;
 width:calc(100vw /2 - 50px);
 opacity:0;
 -webkit-transition:opacity 3s;
 transition:opacity 3s;
 z-index:3;
}

#main_visual #main_visual_cont .box_wrap .box_cont.lazyloaded {
 opacity:1;
}

#main_visual #main_visual_cont .box_wrap h2 {
 color:var(--sub);
 font-size:3.2rem;
 font-weight:600;
 line-height:1.6;
 text-align:center;
}

#main_visual #main_visual_cont .box_wrap h3 {
 aspect-ratio:50 / 9;
 align-items:center;
 color:var(--sub);
 display:flex;
 flex-direction:column;
 justify-content:center;
 row-gap:10px;
}

#main_visual #main_visual_cont .box_wrap h3 span {
 font-size:1.6rem;
 font-weight:600;
}

#main_visual #main_visual_cont .box_wrap h3 img {
 height:100%;
 width:100%;
 max-width:130px;
}

#main_visual #main_visual_cont .box_wrap h4 {
 aspect-ratio:137 / 40;
}

#main_visual #main_visual_cont .box_wrap h4 img {
 height:100%;
 width:100%;
 max-width:137px;
}

#main_visual #main_visual_cont #photo {
 align-items:center;
 display:flex;
 justify-content:center;
 flex-wrap:wrap;
 position:absolute;
 height:100%;
 width:100%;
 z-index:1;
}

#main_visual #main_visual_cont #photo .photo {
 width:50%;
 height:50%;
}

#main_visual #main_visual_cont #photo .photo img {
 object-fit:cover;
 height:100%;
 width:100%;
}

/*--- entry ---*/
#main_visual.entry {
 height:380px;
}

#main_visual.entry #main_visual_cont {
 height:380px;
}

/*---------------------------------------------
main
---------------------------------------------*/
#main {
 padding:0 50px 50px 0; 
}

#main #main_cont {
 background-color: transparent;
 padding:0 0 0 15px;
}

/*---------------------------------------------
left_nav
---------------------------------------------*/
#left_nav #left_nav_conversion .entry a {
 background-color:var(--orange);
 border:2px solid var(--orange);
 color:var(--white);
}

#left_nav #left_nav_conversion .entry a:hover {
 background-color:var(--white);
 color:var(--orange);
}

#left_nav #left_nav_conversion .entry a:hover:after {
 color:var(--orange);
}

/*---------------------------------------------
footer
---------------------------------------------*/
#footer #footer_cont #footer_head {
 padding:50px 50px 50px 310px;
}

#footer #footer_bottom #footer_bottom_cont {
 padding-left: calc(310px);
}

/*---------------------------------------------
bread_crumb_list
---------------------------------------------*/
.bread_crumb_list {
 padding-left: 310px;
}

/*---------------------------------------------
introduction
---------------------------------------------*/
.section#introduction {
 border-radius:10px;
}

.section#introduction .section_cont {
 border-radius:10px;
 border:none;
 display:flex;
 justify-content:center;
 position:relative;
 row-gap:30px;
}

.section#introduction .section_cont .course_wrap {
 column-gap:30px;
 display:flex;
 justify-content:center;
}

.section#introduction .section_cont .course_wrap .course {
 border-radius:10px;
 display:flex;
 flex-direction:column;
 justify-content:start;
 position:relative;
 width:calc(100% / 2 - 25px);
}

.section#introduction .section_cont .course_wrap .course .pic {
 border-radius:10px 10px 0 0;
 height:200px;
 width:100%;
}

.section#introduction .section_cont .course_wrap .course .pic img {
 border-radius:10px 10px 0 0;
 object-fit:cover;
 width:100%;
}

.section#introduction .section_cont .course_wrap .course .pic a:hover img {
 opacity:0.7;
}

.section#introduction .section_cont .course_wrap .course .symbol {
 display:flex;
 justify-content:center;
 margin-top:-70px;
}

.section#introduction .section_cont .course_wrap .course .symbol img {
 height:auto;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 width:140px;
}

.section#introduction .section_cont .course_wrap .course .symbol img.lazyloaded {
 opacity:1;
}

.section#introduction .section_cont .course_wrap .course .course_cont {
 border:1px solid var(--gray_dd);
 border-radius:0 0 10px 10px;
 display:flex;
 flex-direction:column;
 flex-grow:1;
 padding:25px;
 row-gap:15px;
}

.section#introduction .section_cont .course_wrap .course p {
 flex-shrink:0;
 flex-basis:0;
 font-size:1.3rem;
 line-height:1.6;
 margin-top:15px;
 min-height:90px;
}

/*---------------------------------------------
course
---------------------------------------------*/
.section#course .section_cont ul li .course_cont {
 flex-direction:column;
 row-gap:30px;
}

.section#course .section_cont > ul.course > li > p {
 background-color:var(--deep_blue);
 font-size:1.4rem;
}

.section#course .section_cont ul li .course_cont .course_left {
 max-width:100%;
}

.section#course .section_cont ul li .course_cont .course_left figure img {
  max-width:calc(100% / 2 - 20px);
}

.section#course .section_cont ul li .course_cont .course_left p {
 font-size:1.4rem;
}


.box h4,
.course_menu h4 {
 background-color: var(--deep_blue);
}

.box .box_cont,
.course_menu .course_menu_cont {
 background-color:var(--pale_blue);
}

.course_schedule .course_schedule_cont {
 row-gap:15px;
}

/*---------------------------------------------
point
---------------------------------------------*/
.point ul:after {
 background-color:#f0f5fd;
 content:" ";
 width:100%;
 position:absolute;
 top:110px;
 height:15px;
 z-index:1;
}

/*---------------------------------------------
taxi
---------------------------------------------*/
.section#course .section_cont.taxidriver ul li .course_cont .course_left .course_head figure {
 max-height:100%;
}

.section#course .section_cont.taxidriver ul li .course_cont .course_left .course_head figure:first-child {
}

.section#course .section_cont.taxidriver ul li .course_cont .course_left .course_head figure:first-child img {
 max-width:100%;
 max-height: 200px;
}