@charset "utf-8";

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

top.css

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

body {
 background-color:#D3EBFB;
}

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

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

#top_main_visual #top_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;
}

#top_main_visual #top_main_visual_cont .box_wrap.lazyloaded {
 opacity:1;
}

#top_main_visual #top_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;
}

#top_main_visual #top_main_visual_cont .box_wrap.lazyloaded {
 opacity:1;
}

#top_main_visual #top_main_visual_cont .box_wrap .box {
 background-color:var(--white);
 border-radius:20px;
 box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.2);
 display:flex;
 flex-direction:column;
 position:absolute;
 row-gap:15px;
 top:auto;
 right:auto;
 bottom:auto;
 left:auto;
 margin:0 auto -10px auto;
 padding:35px 20px 60px;
 flex:0 1 300px;
 max-width:320px;
 width:calc(100vw /2 - 50px);
 opacity:0;
 -webkit-transition:opacity 3s;
 transition:opacity 3s;
}

#top_main_visual #top_main_visual_cont .box_wrap .box.lazyloaded {
 opacity:1;
}

#top_main_visual #top_main_visual_cont .box_wrap .box .title {
 align-items:center;
 display:flex;
 flex-direction:column;
 justify-content:center;
 row-gap:10px;
}

#top_main_visual #top_main_visual_cont .box_wrap .box .title img {
 aspect-ratio:75 / 78;
}

#top_main_visual #top_main_visual_cont .box_wrap .box .title h2 {
 display:flex;
 flex-direction:column;
 text-align:center;
}

#top_main_visual #top_main_visual_cont .box_wrap .box .title h2 span {
 color:var(--sub);
 font-size: calc(1.8rem + ((1vw - 0.48rem) * 0.6944));
 font-weight: 600;
 line-height: 1.5;
 text-align:center;
}

#top_main_visual #top_main_visual_cont .half {
 display:flex;
 flex-wrap:wrap;
}

#top_main_visual #top_main_visual_cont .half img {
 width:50%;
 height:600px;
 object-fit:cover;
}

#top_main_visual #top_main_visual_cont .box_wrap .box .symbol {
 aspect-ratio:182 / 111; 
 bottom:-30px;
 left:50%;
 margin-left:-60px;
 position:absolute;
 max-width:120px;
}

#top_main_visual #top_main_visual_cont .box_wrap .box .symbol img {
 height:100%;
 width:100%;
}

/*---------------------------------------------
top_news
---------------------------------------------*/
#top_news {
 display:flex;
 justify-content:center;
 padding-bottom:30px;
}

#top_news #top_news_cont {
 align-items: start;
 display:flex;
 flex-direction:column;
 justify-content:center;
 margin:-70px auto 0;
 flex:0 1 1180px;
 padding:0 5vw;
 overflow:hidden;
}

#top_news #top_news_cont h3 {
 align-items:flex-end;
 background-color:var(--white);
 border-radius:6px 6px 0 0;
 column-gap:10px;
 display:flex;
 justify-content:start;
 padding:25px 35px 0;
 position:relative;
}

#top_news #top_news_cont h3 span {
 font-size: 1.2rem;
 line-height:1;
 padding-bottom:10px;
 position:relative;
}

#top_news #top_news_cont h3 span:last-child {
 width:200px;
} 

#top_news #top_news_cont h3 span:after {
 background-color:var(--sub);
 bottom:0;
 content:" ";
 height:2px;
 left:0;
 position:absolute;
 width:100%;
}

#top_news #top_news_cont h3 span.en {
 color:var(--sub);
 font-size:1.8rem;
 font-weight: 600;
 line-height: 1;
}

#top_news #top_news_cont h3 span.en:after {
 background-color:var(--main);
}

#top_news #top_news_cont ol {
 background-color:var(--white);
 display:flex;
 flex-direction:column;
 justify-content:start;
 padding:25px 35px 25px;
 row-gap:15px;
 width:100%;
}

#top_news #top_news_cont ol li {
 display:flex;
 flex-direction:column;
 padding:0;
}

#top_news #top_news_cont ol li a {
 display:flex;
 flex-direction:column;
}

#top_news #top_news_cont ol li dl,
#top_news #top_news_cont ol li a dl {
 column-gap:10px;
 display:flex;
}

#top_news #top_news_cont ol li dl dt,
#top_news #top_news_cont ol li a dl dt {
 font-size:1.3rem;
 line-height:1.6;
}

#top_news #top_news_cont ol li dl dd,
#top_news #top_news_cont ol li a dl dd {
 font-size:1.3rem;
 line-height:1.6;
 white-space:nowrap;
 overflow:hidden;
 text-overflow: ellipsis;
}

#top_news #top_news_cont ol li a:hover dl dd {
 color:var(--link);
}

/*---------------------------------------------
main
---------------------------------------------*/
#main {
 display:flex;
 flex-direction:column;
 padding:0;
 row-gap:30px;
}

#main #main_cont {
 background:transparent;
 display:flex;
 flex-direction:column;
 row-gap:0;
 max-width:100%;
 padding:0;
}

#main #main_cont .section#conversion {
 background:transparent;
}

/*---------------------------------------------
section_title
---------------------------------------------*/
.section_title {
 align-items:center;
 background-color:var(--white); 
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding:50px 0 45px 0;
 row-gap:10px;
}

.section_title h3 {
 align-items:center;
 display:flex;
 justify-content:start;
 padding-left:48px;
 position:relative;
}

.section_title h3:before {
 aspect-ratio:75 / 78; 
 background-image:url(../img/common/logo_drivefit.webp);
 background-size:contain;
 background-position:center center;
 background-repeat:no-repeat;
 content:" ";
 height:37px;
 width:33px;
 position:absolute;
 left:0;
 top:0;
}

.section_title h3 span {
 font-size: 3.2rem;
 font-weight:600;
 line-height:1.3;
}

.section_title > span.en {
 color:var(--gray_dd);
 font-size: 1.1rem;
 font-weight:600;
}

.section_title > p {
 font-size: 1.3rem; 
 line-height:1.3;
}

/*---------------------------------------------
service
---------------------------------------------*/
#service {
 display:flex;
 flex-direction:column;
}

#service #service_cont {
 display:flex;
 flex-direction:column;
}

#service #service_cont #service_list {
 background-color:var(--light_blue);
 display:flex;
 flex-direction:column;
 overflow:hidden;
 padding:50px 0;
}

#service #service_cont #service_list ul {
 display:flex;
}

#service #service_cont #service_list ul li {
 background-color:var(--white);
 border-radius:10px;
 display:flex;
 flex-direction:column;
}

#service #service_cont #service_list ul li a {
 align-items: start;
 background-color:var(--white);
 border-radius:10px;
 display:flex;
 flex-direction:column;
 justify-content: start;
 padding:25px 45px 45px;
 row-gap:15px;
 height:100%;
}

#service #service_cont #service_list ul li a h4 {
 align-items:center;
 display:flex;
 justify-content:start;
 padding-left:26px;
 position:relative;
}

#service #service_cont #service_list ul li a h4:before {
 aspect-ratio:75 / 78; 
 background-image:url(../img/common/logo_drivefit.webp);
 background-size:contain;
 background-position:center center;
 background-repeat:no-repeat;
 content:" ";
 height:21px;
 width:20px;
 position:absolute;
 left:0;
 top:50%;
 margin-top:-11px;
}

#service #service_cont #service_list ul li a h4 span {
 font-size: calc(1.4rem + ((1vw - 0.48rem) * 0.6944));
 font-weight: 600;
 line-height: 1.5;
}

#service #service_cont #service_list ul li a h4 span.last-child {
 color:var(--sub);
}

#service #service_cont #service_list ul li a figure {
 aspect-ratio:50 / 29; 
 overflow:hidden;
 width:100%;
}

#service #service_cont #service_list ul li a figure img {
 object-fit:cover;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition:opacity 3s;
 width:100%;
 height:100%;
}

#service #service_cont #service_list ul li a figure img.lazyloaded {
 opacity:1;
}

#service #service_cont #service_list ul li a h5 {
 color:var(--sub);
 font-size:1.8rem;
 font-weight: 600;
 display:flex;
 flex-direction:column;
 row-gap:5px;
 text-align:center;
 padding-top:10px;
 width:100%;
}

#service #service_cont #service_list ul li a h5 span.note {
 font-size:1.1rem;
}

#service #service_cont #service_list ul li a p {
 font-size:1.2rem;
 line-height:2.0;
 flex-grow:1;
}

#service #service_cont #service_list ul li a:hover {
 background-color:rgb(254,229,6,0.2);
}

#service #service_cont #service_list ul li .btn {
 align-items:center;
 display:flex;
 justify-content:center;
 width:100%;
}

#service #service_cont #service_list ul li a .btn span {
 align-items:center;
 background-color:var(--white);
 border-radius:40px;
 border:1px solid var(--gray_cc);
 column-gap:15px;
 display:flex;
 font-size:1.3rem;
 font-weight:600;
 justify-content:center;
 padding:20px 35px;
 position:relative;
 text-align:center;
}

#service #service_cont #service_list ul li a .btn span:after {
 content:"\f054";
 color:var(--gray_cc);
 font-family:var(--icon);
 font-weight:400;
 right:15px;
 top:50%;
 margin-top:-5px;
 position:absolute;
 font-size:1.1rem;
 z-index:3;
}

#service #service_cont #service_list ul li a:hover .btn span {
 background-color:var(--green);
 border:1px solid var(--green);
 color:var(--white);
}

#service #service_cont #service_list ul li a:hover .btn span:after {
 color:var(--white); 
} 

#service #service_cont #service_list .slick-track {
 display:flex;
 column-gap:50px;
}

/*---preparation ---*/
#service #service_cont #service_list ul li div.preparation {
 background-color:var(--white);
 display:flex;
 flex-direction:column;
 height:100%;
 padding:25px 45px 45px;
 row-gap:15px;
}

#service #service_cont #service_list ul li div.preparation h4 {
 align-items:center;
 display:flex;
 justify-content:start;
 padding-left:26px;
 position:relative;
}

#service #service_cont #service_list ul li div.preparation h4:before {
 aspect-ratio:75 / 78; 
 background-image:url(../img/common/logo_drivefit_gray.webp);
 background-size:contain;
 background-position:center center;
 background-repeat:no-repeat;
 content:" ";
 height:21px;
 width:20px;
 position:absolute;
 left:0;
 top:50%;
 margin-top:-11px;
}

#service #service_cont #service_list ul li div.preparation h4 span {
 color:var(--gray_9f);
 font-size: calc(1.4rem + ((1vw - 0.48rem) * 0.6944));
 font-weight: 600;
 line-height: 1.5;
}

#service #service_cont #service_list ul li div.preparation figure {
 aspect-ratio:50 / 29; 
 overflow:hidden;
 position:relative;
 width:100%;
}

#service #service_cont #service_list ul li div.preparation figure img {
 object-fit:cover;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition:opacity 3s;
 width:100%;
 height:100%;
}

#service #service_cont #service_list ul li div.preparation figure img.lazyloaded {
 opacity:1;
}

#service #service_cont #service_list ul li div.preparation figure .message {
 align-items:center;
 background:rgba(0,0,0,0.6);
 border-radius:6px;
 position:absolute;
 display:flex;
 justify-content:center;
 top:0;
 right:0;
 bottom:0;
 left:0;
 width:80%;
 height:60px;
 margin:auto;
 z-index:2;
}

#service #service_cont #service_list ul li div.preparation figure .message span {
 color:var(--white);
 font-weight:600;
 font-size:1.3rem;
}

#service #service_cont #service_list ul li div.preparation h5 {
 font-size:1.8rem;
 font-weight: 600;
 color:var(--gray_9f);
 display:flex;
 flex-direction:column;
 row-gap:10px;
 text-align:center;
 padding-top:10px;
}

#service #service_cont #service_list ul li div.preparation h5 span.note {
 font-size:1.1rem;
}

#service #service_cont #service_list ul li div.preparation p {
 color:var(--gray_9f);
 display:flex;
 flex-wrap:wrap;
 font-size:1.2rem;
 line-height:2.0;
 flex-grow:1;
 row-gap:5px;
}

#service #service_cont #service_list ul li div.preparation .btn span {
 align-items:center;
 background-color:var(--white);
 border-radius:40px;
 border:1px solid var(--gray_cc);
 color:var(--gray_cc);
 column-gap:15px;
 display:flex;
 font-size:1.3rem;
 font-weight:600;
 justify-content:center;
 padding:20px 35px;
 position:relative;
 text-align:center;
}

#service #service_cont #service_list ul li div.preparation .btn span:after {
 content:"\f054";
 color:var(--gray_cc);
 font-family:var(--icon);
 font-weight:400;
 right:15px;
 top:50%;
 margin-top:-5px;
 position:absolute;
 font-size:1.1rem;
 z-index:3;
}

/*--- second ---*/

#service #service_cont #service_list ul li.second a {
 align-items:center;
 background-color:var(--yellow);
 justify-content:center;
 padding:45px 0 0;
}

#service #service_cont #service_list ul li.second a figure {
 aspect-ratio:748 / 706; 
 max-width:320px;
}

#service #service_cont #service_list ul li.second a figure img {
}

#service #service_cont #service_list ul li.second a .symbol {
 margin-bottom:-40px;
 position:relative;
 z-index:1;
}

#service #service_cont #service_list ul li.second .detail {
 align-items:center;
 background-color:var(--white);
 border-radius:0 0 10px 10px;
 display:flex;
 flex-direction:column;
 flex-grow:1;
 justify-content: center;
 padding:45px 45px 45px;
 row-gap:15px;
}

/*---------------------------------------------
course
---------------------------------------------*/
#course {
 display:flex;
 flex-direction:column;
 row-gap:30px;
}

#course #course_detail {
 display:flex;
 flex-direction:column;
 padding: 0 5vw 40px;
}

#course #course_detail > ul {
 display:flex;
 flex-direction:column;
 row-gap:30px;
}

#course #course_detail > ul > li {}

#course #course_detail .course_title {
 display:flex;
 flex-direction:column;
 row-gap:10px;
}

#course #course_detail .course_cont {
 column-gap:15px;
 display:flex;
 flex-wrap:wrap;
 max-width:1180px;
 margin:0 auto;
 padding:0 5vw;
 row-gap:15px;
}

#course #course_detail .course_cont .personal_support {
 background-color:var(--white);
 border-radius:10px;
 box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
 column-gap:15px;
 display:flex;
 flex-wrap:wrap;
 flex:1 1 65%;
 padding:25px;
 row-gap:15px;
 position:relative;
}

#course #course_detail .course_cont .personal_support .mark {
 align-items:center;
 background-color:var(--yellow);
 border-radius:60px;
 display:flex;
 height:120px;
 justify-content:center;
 left:10px;
 position:absolute;
 top:10px;
 transform:rotate(-15deg);
 width:120px;
 z-index:2;
}

#course #course_detail .course_cont .personal_support .mark span {
 font-size:1.6rem;
 font-weight:600;
 line-height:1.4;
 text-align:center;
}

#course #course_detail .course_cont .personal_support > a {
 display:flex;
 flex:1 1 57%;
}

#course #course_detail .course_cont .personal_support > a dl {
 display:flex;
 flex-direction:column;
 flex:1 1 60%;
}

#course #course_detail .course_cont .personal_support > a dl > dt {
 overflow: hidden;
}

#course #course_detail .course_cont .personal_support > a dl > dt img {
 height:210px;
 object-fit:cover;
 transition:transform 0.35s ease-in-out;
 width:100%;
 opacity:0;
 -webkit-transition:opacity 3s, transform 0.35s ease-in-out;
 transition: opacity 3s, transform 0.35s ease-in-out;
}

#course #course_detail .course_cont .personal_support > a dl > dt img.lazyloaded {
 opacity:1;
}

#course #course_detail .course_cont .personal_support > a dl dd {
 align-items:start;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 flex:1;
 padding:20px 20px 15px 15px;
 row-gap:5px;
 width:100%;
}

#course #course_detail .course_cont .personal_support > a dl dd h3 {
 align-items:center;
 display:flex;
 justify-content:space-between;
 position:relative;
 width:100%;
}

#course #course_detail .course_cont .personal_support > a dl dd h3:after {
 content:"\f054";
 color:var(--gray_cc);
 font-family:var(--icon);
 font-size:1.3rem;
 font-weight:600;
 right:10px;
 top:50%;
 margin-top:-5px;
 opacity:1;
 position:absolute;
 z-index:1;
}

#course #course_detail .course_cont .personal_support > a dl dd h3 span {
 font-weight:600;
 font-size:2.3rem;
}

#course #course_detail .course_cont .personal_support > a dl dd figure {
 display:flex;
 justify-content:flex-end;
 width:100%;
}

#course #course_detail .course_cont .personal_support > a dl dd figure img {
 height:70px;
 width:auto;
}

#course #course_detail .course_cont .personal_support > a dl dd p {
 font-size:1.2rem;
 line-height:1.6;
}

#course #course_detail .course_cont .personal_support > a:hover {
 background-color:var(--light_yellow);
 border-radius:0 0 10px 10px;
}

#course #course_detail .course_cont .personal_support > a:hover dl dt img {
 transform:scale(1.15) rotate(2deg);
}

#course #course_detail .course_cont .personal_support > a:hover h3:after {
 color:var(--blue);
}

#course #course_detail .course_cont .personal_support > a:hover h3 span {
 color:var(--blue);
}

#course #course_detail .course_cont .personal_support .option_plan {
 background-color:var(--light_green);
 display:flex;
 flex-direction:column;
 flex:1 1 40%;
 min-width:280px;
}

#course #course_detail .course_cont .personal_support .option_plan dl {
 display:flex;
 flex-direction:column;
 flex-grow: 1;
 height:100%;
 padding:15px;
}

#course #course_detail .course_cont .personal_support .option_plan dl dt {
 background-image:url(../img/top/bg_option.webp);
 background-position:center center;
 background-size:cover;
 text-align:center;
}

#course #course_detail .course_cont .personal_support .option_plan dl dt img {
 height:auto;
 object-fit:cover;
 width:100%;
 max-width:280px;
}

#course #course_detail .course_cont .personal_support .option_plan dl dd {
 background-color:var(--white);
 display:flex;
 flex:1;
 flex-direction:column;
 padding:0;
 height:100%;
}

#course #course_detail .course_cont .personal_support .option_plan dl dd h4 {
 display:flex;
}

#course #course_detail .course_cont .personal_support .option_plan dl dd h4 a {
 display:flex;
 font-size: 1.5rem;
 font-weight:600;
 padding:15px;
 position:relative;
 width:100%;
}

#course #course_detail .course_cont .personal_support .option_plan dl dd h4 a:hover {
 color:var(--blue);
}

#course #course_detail .course_cont .personal_support .option_plan dl dd h4 a:after {
 content:"\f054";
 color:var(--gray_cc);
 font-family:var(--icon);
 font-size:1.1rem;
 font-weight:600;
 right:10px;
 top:50%;
 margin-top:-5px;
 opacity:1;
 position:absolute;
 z-index:3;
}

#course #course_detail .course_cont .personal_support .option_plan dl dd h4 a:hover:after {
 color:var(--blue);
}

#course #course_detail .course_cont .personal_support .option_plan dl dd ul {
 display:flex;
 flex-direction:column;
 justify-content:space-around;
 flex-grow: 1;
 padding:0 15px 15px;
}

#course #course_detail .course_cont .personal_support .option_plan dl dd ul li {
 border-bottom:1px solid var(--gray_dd);
}

#course #course_detail .course_cont .personal_support .option_plan dl dd ul li:first-child {
 border-top:1px solid var(--gray_dd);
}

#course #course_detail .course_cont .personal_support .option_plan dl dd ul li a {
 display:flex;
 font-size:1.2rem;
 padding:10px 0;
 width:100%;
 overflow: hidden;
 text-overflow: ellipsis;
 -webkit-box-orient: vertical;
 -webkit-line-clamp:1;
}

#course #course_detail .course_cont .personal_support .option_plan dl dd ul li a:hover {
 color:var(--blue);
}

/*---------------------------------------------
company
---------------------------------------------*/
#company {
 display:flex;
 flex-direction:column;
}

#company #company_cont {
 background-color:var(--white);
 border-top:1px solid var(--gray_dd);
 display: flex; 
 flex-direction:column;
 row-gap:30px;
 padding:0 5vw;
}

#company #company_cont #company_detail {
 display: flex;
 margin:0 auto;
 max-width: 1180px;
 padding:80px 5vw;
 row-gap:15px;
 position: relative;
 column-gap:50px;
}

#company #company_cont #company_detail .left_col {
 display:flex;
 flex-direction:column;
 row-gap:20px;
 width:calc(100% / 2 - 15px);
}

#company #company_cont #company_detail .left_col dl {
 display:flex;
 flex-direction:column;
 row-gap:15px;
}

#company #company_cont #company_detail .left_col dt figure {
 aspect-ratio:32 / 18;  
}

#company #company_cont #company_detail .left_col dt figure img {
 height:100%;
 object-fit:cover;
 width:100%;
}

#company #company_cont #company_detail .left_col dl dd {
 display:flex;
 flex-direction:column;
 font-size:1.3rem;
 line-height:1.6;
 row-gap:0px;
}

#company #company_cont #company_detail .right_col {
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 row-gap:15px;
 width:calc(100% / 2 - 15px);
}

#company #company_cont #company_detail .right_col dl {
 display:flex;
 flex-direction:column;
 row-gap:20px;
}

#company #company_cont #company_detail .right_col dl dt {
 font-size:1.8rem;
 font-weight:600;
 line-height:1.6;
}

#company #company_cont #company_detail .right_col dl dd {
 font-size:1.3rem;
 line-height:2.2;
}

#company #company_cont #company_detail .right_col .btn_link_area ul {
 column-gap:20px;
 display:flex;
}

#company #company_cont #company_detail .right_col .btn_link_area ul li {
 width:calc(100% / 2 - 10px);
}

/*---------------------------------------------
proof
---------------------------------------------*/
#proof {
 display: flex;
}

#proof #proof_cont {
 background-color:var(--light_blue);
 display: flex;
 flex-direction:column;
 justify-content: center;
 align-content: center;
 align-items: center;
 padding:0 0 50px 0;
 position:relative;
 width:100%;
}

#proof #proof_cont .pic {
 display: flex;
 justify-content: center;
 align-content: center;
 align-items: center;
 height:300px;
 position:relative;
 width:100%;
}

#proof #proof_cont .pic .half {
 display:flex;
 flex-wrap:wrap;
 display: flex;
 justify-content: center;
 align-content: center;
 align-items: center;
 height:300px;
 position:relative;
 width:100%;
}

#proof #proof_cont .pic .half img {
 width:50%;
 height:300px;
 object-fit:cover;
}

#proof #proof_cont #proof_title {
 display:flex;
 flex-direction:column;
 justify-content:center;
 row-gap:15px;
 width:100%;
}

#proof #proof_cont #proof_title .box_wrap {
 align-items:center;
 display:flex;
 justify-content:center;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition:opacity 3s;
 overflow:hidden;
 position:relative;
 margin-top:-180px;
 padding-bottom:50px;
 width:100%;
 z-index:3;
}

#proof #proof_cont #proof_title .box_wrap.lazyloaded {
 opacity:1;
}

#proof #proof_cont #proof_title .box_wrap .box {
 background-color:var(--white);
 border-radius:20px;
 box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.2);
 display:flex;
 flex-direction:column;
 position:relative;
 row-gap:15px;
 margin:0 auto;
 padding:30px 40px;
 max-width:320px;
 width:calc(100vw /2 - 50px);
 opacity:0;
 -webkit-transition:opacity 3s;
 transition:opacity 3s;
}

#proof #proof_cont #proof_title .box_wrap .box.lazyloaded {
 opacity:1;
}

#proof #proof_cont #proof_title .box_wrap .box .title {
 align-items:center;
 aspect-ratio:870 / 900;
 display:flex;
 justify-content:center;
 position:relative;
}

#proof #proof_cont #proof_title .box_wrap .box .title img {
 height:100%;
 width:100%;
}

#proof #proof_cont #proof_title .box_wrap figure {
 aspect-ratio:100 / 328;
 position:absolute;
 max-width:140px;
 margin-left:-370px;
 margin-bottom:-380px;
 z-index:5;
}

#proof #proof_cont #proof_title figure img {
 height:100%;
 width:100%;
}

#proof #proof_cont #proof_title figure .mark {
 align-items:center;
 background-color:var(--white);
 border-radius:50px;
 display:flex;
 height:100px;
 justify-content:center;
 left:-60px;
 position:absolute;
 top:-60px;
 width:100px;
 z-index:2;
}

#proof #proof_cont #proof_title figure .mark:after {
 background-color:var(--white);
 width: 20px;
 height: 16px;
 content:" ";
 clip-path: polygon(0 0, 100% 0%, 50% 100%);
transform: rotate(-45deg);
 position:absolute;
 right:0;
 margin-left:-10px;
 bottom:10px;
}

#proof #proof_cont #proof_title figure .mark span {
 font-size:1.2rem;
 font-weight:600;
 line-height:1.4;
 text-align:center;
}

#proof #proof_cont #proof_detail {
 align-items:center;
 display:flex;
 flex-direction:column;
 justify-content:center;
 margin:0 auto;
 max-width:1080px;
 padding:0 5vw;
}

#proof #proof_cont #proof_detail #proof_detail_cont {
 align-items:center;
 background-color:var(--white);
 border-radius:20px;
 color:var(--sub);
 display:flex;
 justify-content:center;
 flex-direction:column; 
 row-gap:20px;
 padding:50px;
 position:relative;
}

#proof #proof_cont #proof_detail #proof_detail_cont figure {
 aspect-ratio:1 / 1;
 position:absolute;
 max-width:160px;
 right:60px;
 top:-130px;
 z-index:5; 
}

#proof #proof_cont #proof_detail #proof_detail_cont figure img {
 height:100%;
 width:100%;
}

#proof #proof_cont #proof_detail #proof_detail_cont h4 {
 font-size:2.3rem;
 font-weight:600;
}

#proof #proof_cont #proof_detail #proof_detail_cont p {
 font-size:1.3rem;
 line-height:2.2;
}

#proof #proof_cont #proof_detail #proof_detail_cont .btn_link_area {
 align-items:center;
 display:flex;
 justify-content:center;
 width:100%;
}

#proof #proof_cont #proof_detail #proof_detail_cont .btn_link_area ul {
 column-gap:30px;
 display:flex;
 justify-content:start;
 width:100%;
}

#proof #proof_cont #proof_detail #proof_detail_cont .btn_link_area ul li .btn a {
 padding:15px 50px 15px 45px; 
}

#proof #proof_cont #proof_detail #proof_detail_cont .btn_link_area ul li .btn a:after {
 font-size: 1.0rem;
 margin-top:-6px;
} 

/*---------------------------------------------
conversion
---------------------------------------------*/
#conversion {
 background-color:transparent;
 padding:50px 0;
}

#conversion .conversion {
 margin:0 auto;
 max-width:1080px; 
 padding:0 5vw;
 width:100%;
}

#conversion .conversion .conversion_cont {
 max-width:1180px; 
}

/*---------------------------------------------
bread_crumb_list
---------------------------------------------*/
.bread_crumb_list {
 padding-left:5vw;
}

/*---------------------------------------------
footer
---------------------------------------------*/
#footer #footer_cont #footer_head {
 align-items: center;
 justify-content:center;
 padding:50px 5vw;
}

#footer #footer_cont #footer_head #footer_head_cont {
 max-width:1180px; 
}

#footer #footer_bottom {
 align-items: center;
 justify-content:center;
}

#footer #footer_bottom #footer_bottom_cont {
 max-width:1180px;
 padding-right:5vw;
 padding-left:5vw;
}