@charset "utf-8";

/*=================================

motor

=================================*/
.title { background-color:#fff; }
.title:before { content:none; }
.title h2 { padding:45px 0 75px; }
.title h2:after,
.title h2:before { bottom:50px; }

#second_main_visual { position:relative; }
#second_main_visual img { object-position:center 35%; }
#second_main_visual:before { background-image:url(../img/lisence/motor/t_motor.png); background-size:210px 92px; background-position:top center;  content:" "; height:92px; position:absolute; top:42%; margin-top:-46px; left:20%; width:210px; z-index:10; }

/*------------------------------------------------------------
motor
------------------------------------------------------------*/
#motor { background-color:#fff; display:flex; flex:0 0 100%; flex-wrap:wrap; justify-content:center; padding:0; position:relative; }

#motor .title { flex:0 0 100%; padding:0; position:relative; }
#motor #motor_cont { display:flex; flex:0 0 100%; flex-wrap:wrap; justify-content:center; margin:0; padding:40px; position:relative; z-index:2; }

#motor #motor_cont > ul { display:flex; flex-wrap:wrap; }
#motor #motor_cont > ul > li { display:flex; flex:0 1 100%; flex-wrap:wrap; justify-content:center; margin-top:80px; padding:0; position:relative; }
#motor #motor_cont > ul > li:after { background:linear-gradient(90deg, rgba(107,239,213,0.1) 0%, rgba(39,127,175,0.1) 50%, rgba(4,69,155,0.1) 100%); content:" ";  top:20px; right:0; height:40%; position:absolute; width:100%; z-index:1; }

#motor #motor_cont > ul > li:first-child { margin-top:0; }
#motor #motor_cont > ul > li .cont { align-items:start; display:flex;  flex:0 1 1180px; justify-content:space-between; position:relative; z-index:3; }

#motor #motor_cont > ul > li .cont .detail { align-items:center; align-content:center; background:transparent; display:flex; flex-wrap:wrap; flex:0 0 70%; padding:60px 220px 50px 50px; position:relative; }
#motor #motor_cont > ul > li .cont .detail:before { background:transparent; content:" ";  height:100%; position:absolute; width:100%; right:0; bottom:0; z-index:2; }
#motor #motor_cont > ul > li .cont .detail:after { background:linear-gradient(90deg, rgba(107,239,213,0.1) 0%, rgba(39,127,175,0.1) 50%, rgba(4,69,155,0.1) 100%); content:none;  height:100%; position:absolute; width:100%; right:-20px; bottom:-20px; z-index:-2; }
#motor #motor_cont > ul > li .cont .detail .caption { position:absolute; top:0; left:50px; z-index:2; }
#motor #motor_cont > ul > li .cont .detail .caption span { font-size:300%; font-weight:600; font-family:Roboto; line-height:1; }
#motor #motor_cont > ul > li .cont .detail h3 { align-items:center; display:flex; flex:0 0 100%; justify-content:start; margin-top:20px; position:relative; z-index:2; }
#motor #motor_cont > ul > li .cont .detail h3 span { display:inline-block; }
#motor #motor_cont > ul > li .cont .detail h3 span:first-child { font-size:232%; font-weight:600; line-height:1.6; }
#motor #motor_cont > ul > li .cont .detail h3 span.mt { background-color:#000; border:1px solid #000; color:#fff; font-size:100%; line-height:1; margin-left:25px; padding:5px 10px; }
#motor #motor_cont > ul > li .cont .detail h3 span.at { background-color:#fff; border:1px solid #000; color:#000; font-size:100%; line-height:1; margin-left:10px; padding:5px 10px; }

#motor #motor_cont > ul > li .cont .detail .target { align-items:center; align-content:center; flex:0 0 100%; display:flex; justify-content:center; margin-top:40px; position:relative; z-index:3; }
#motor #motor_cont > ul > li .cont .detail .target > img { z-index:3; opacity:0; -webkit-transition:opacity 3s; transition: opacity 3s; }
#motor #motor_cont > ul > li .cont .detail .target > img.lazyloaded { opacity:1; }

#motor #motor_cont > ul > li .cont .detail .target span.figure { position:absolute; z-index:5; }
#motor #motor_cont > ul > li .cont .detail .target span.figure img { object-fit:cover; z-index:5; opacity:0; -webkit-transition:opacity 3s; transition: opacity 3s; }
#motor #motor_cont > ul > li .cont .detail .target span.figure img.lazyloaded { opacity:1; }

#motor #motor_cont > ul > li .cont .detail .entrance_date { background-color:#fff; flex:0 0 100%; margin-top:25px; position:relative; z-index:3; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl { align-items:center; align-content:center; border:1px solid #eee; border-radius:3px; display:flex; flex-wrap:wrap; justify-content:space-between; padding:20px; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dt { padding:0; width:100%; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dt span { font-size:108%; font-weight:600; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd { align-items:center; display:flex; flex:1; margin-top:15px; padding:0; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd > span { flex:1; font-size:108%; margin-left:10px; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd > span:first-child { flex:0 0 15%; margin-left:0; text-align:left; }

#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd > span.at { background-color:#fff; border:1px solid #ccc; flex:0 0 10%; font-size:93%; line-height:1; margin-left:15px; text-align:center; padding:3px 10px; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd > span.mt { background-color:#333; border:1px solid #333; color:#fff; flex:0 0 10%; font-size:93%; line-height:1; text-align:center; padding:3px 10px; }

#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd ul { display:flex; flex:1; flex-wrap:wrap; justify-content:start; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd ul li { align-items:center; display:flex; flex:0 0 100%; justify-content:start; margin-top:10px; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd ul li:first-child { margin-top:0; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd ul li span { flex:1; font-size:108%; margin-left:10px; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd ul li span:first-child { flex:0 0 15%; margin-left:0; text-align:left; } 

#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd ul li span.day { background-color:#c0611b; color:#fff; flex:0 0 10%; font-size:93%; line-height:1; margin-left:15px; text-align:center; padding:3px 5px; }
#motor #motor_cont > ul > li .cont .detail .entrance_date dl dd ul li span.night { background-color:#002B99; color:#fff; flex:0 0 10%; font-size:93%; line-height:1; text-align:center; padding:3px 5px; }

#motor #motor_cont > ul > li .pic { flex:0 1 500px; margin-left:-200px; position:relative; top:0; z-index:3; }
#motor #motor_cont > ul > li .pic img { height:400px; object-fit:cover; position:absolute; width:500px; opacity:0; -webkit-transition:opacity 3s; transition: opacity 3s; }
#motor #motor_cont > ul > li .pic img.lazyloaded { opacity:1; }

#motor #motor_cont > ul > li .pic span { position:absolute; right:10px; top:360px; z-index:2; }
#motor #motor_cont > ul > li .pic span img { height:80px; width:auto; opacity:0; -webkit-transition:opacity 3s; transition: opacity 3s; position:relative; }
#motor #motor_cont > ul > li .pic span img.lazyloaded { opacity:1; }

#motor #motor_cont > ul > li > ul.btn_area { display:flex; justify-content:center; flex:0 0 100%; margin-top:50px; position:relative; z-index:2; }
#motor #motor_cont > ul > li > ul.btn_area li { overflow:hidden; margin-left:40px; position:relative; }
#motor #motor_cont > ul > li > ul.btn_area li:first-child { margin-left:0; }
#motor #motor_cont > ul > li > ul.btn_area li a { background-color:#fff; border-radius:0; display:inline-block; justify-content:space-between; line-height:1; padding:20px 15px 20px 25px; position:relative; transition: all .5s; }
#motor #motor_cont > ul > li > ul.btn_area li a span { padding:0 35px; }
#motor #motor_cont > ul > li > ul.btn_area li a i:nth-child(3) { color:#ccc; font-size:85%; }
#motor #motor_cont > ul > li > ul.btn_area li a.premium_gradation_border i { color:rgba(155,91,4,1); }
#motor #motor_cont > ul > li > ul.btn_area li a.premium_gradation_border i:nth-child(3) { color:rgba(155,91,4,1); }

#motor #motor_cont > ul > li .stimulus_payment { align-items:center; background-color:#fff; border:1px solid #04459b; border-image: linear-gradient(135deg, rgba(107,239,213,1) 0%, rgba(39,127,175,1) 50%, rgba(4,69,155,1) 100%); border-image-slice:1; display:flex; flex:1; justify-content:space-between; margin-top:40px; padding:20px 35px 20px 20px; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont { display:flex; flex:1; justify-content:space-between; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont > img { height:120px; object-fit:cover; width:200px; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl { align-items:center; align-content:center; display:flex; flex-wrap:wrap; padding-left:25px; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl dt { flex:0 0 100%; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl dt span { font-size:146%; font-weight:600; line-height:1.8; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl dd { flex:0 0 100%; margin-top:5px; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl dd > span { font-size:108%; line-height:1.8; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl dd ul.btn_area { justify-content:start; margin-top:10px; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl dd ul.btn_area li { margin-right:40px; margin-left:0; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl dd ul.btn_area li a { border:1px solid #eee; padding:15px; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl dd ul.btn_area li a span { padding:0 15px; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl dd ul.btn_area li a i:last-child { color:#ccc; font-size:79%; }
#motor #motor_cont > ul > li .stimulus_payment .stimulus_payment_cont dl dd ul.btn_area li a:hover i:last-child { color:#00479c; }

#motor #motor_cont > ul > li .stimulus_payment .target_image { align-items:center; display:flex; position:relative; }
#motor #motor_cont > ul > li .stimulus_payment .target_image img:first-child { height:70px; width:auto; }
#motor #motor_cont > ul > li .stimulus_payment .target_image img:nth-child(2) { height:70px; width:auto; margin-left:-20px; }
#motor #motor_cont > ul > li .stimulus_payment .target_image span.figure img { width: auto; height:60px; margin-bottom:-15px; margin-left:-40px; z-index:5; }

/*--- lmotor ---*/
#motor #motor_cont > ul > li#lisence_lmotor .cont .detail h3 { margin-top:5px; }
#motor #motor_cont > ul > li#lisence_lmotor .cont .detail .target { margin-top:20px; min-height:140px; position:relative; }
#motor #motor_cont > ul > li#lisence_lmotor .cont .detail .target > img { height:140px; width:auto; margin-left:-20px; }
#motor #motor_cont > ul > li#lisence_lmotor .cont .detail .target > img:first-child { position:absolute; top:0; left:50%; z-index:101; margin-left:-176px; }
#motor #motor_cont > ul > li#lisence_lmotor .cont .detail .target > img:nth-child(2) { margin-left:-88px; position:absolute; top:0; left:50%; z-index:100; }
#motor #motor_cont > ul > li#lisence_lmotor > ul.btn_area { margin-top:0; }

/*--- motor ---*/
#motor #motor_cont > ul > li#lisence_motor .cont .detail h3 { margin-top:5px; }
#motor #motor_cont > ul > li#lisence_motor .cont .detail .target { margin-top:20px; min-height:140px; position:relative; }
#motor #motor_cont > ul > li#lisence_motor .cont .detail .target > img { height:140px; width:auto; margin-left:-20px; }
#motor #motor_cont > ul > li#lisence_motor .cont .detail .target > img:first-child { position:absolute; top:0; left:50%; z-index:101; margin-left:-176px; }
#motor #motor_cont > ul > li#lisence_motor .cont .detail .target > img:nth-child(2) { margin-left:-73px; position:absolute; top:0; left:50%; z-index:100; }
#motor #motor_cont > ul > li#lisence_motor > ul.btn_area { margin-top:0; }

/*--- smotor ---*/
#motor #motor_cont > ul > li#lisence_smotor .cont .detail h3 { margin-top:5px; }
#motor #motor_cont > ul > li#lisence_smotor .cont .detail .target { margin-top:20px; min-height:140px; position:relative; }
#motor #motor_cont > ul > li#lisence_smotor .cont .detail .target > img { height:140px; width:auto; margin-left:-20px; }
#motor #motor_cont > ul > li#lisence_smotor .cont .detail .target > img:first-child { position:absolute; top:0; left:50%; z-index:101; margin-left:-176px; }
#motor #motor_cont > ul > li#lisence_smotor .cont .detail .target > img:nth-child(2) { margin-left:-73px; position:absolute; top:0; left:50%; z-index:100; }
#motor #motor_cont > ul > li#lisence_smotor > ul.btn_area { margin-top:0; }

/*--- about ---*/
#motor #motor_cont #vehicle { margin-top:50px; }
#motor #motor_cont #vehicle > ul { display:flex; flex-wrap:wrap; justify-content:space-between;  }
#motor #motor_cont #vehicle > ul > li { flex:0 0 30%; margin-top:50px; margin-left:5%; background-color:#eee; padding:20px; }
#motor #motor_cont #vehicle > ul > li:nth-child(3n+1) { margin-left:0; }
#motor #motor_cont #vehicle > ul > li .pic { background-color:#fff; padding:20px; text-align:center; }
#motor #motor_cont #vehicle > ul > li .pic img { height:120px; width:auto; }
#motor #motor_cont #vehicle > ul > li dl { background-color:#fff; display:flex; flex-wrap:wrap; justify-content:center; }
#motor #motor_cont #vehicle > ul > li dl dt { display:flex; flex:0 0 100%; flex-wrap:wrap; justify-content:center; text-align:center; }
#motor #motor_cont #vehicle > ul > li dl dt span { display:block; flex:0 0 100%; }
#motor #motor_cont #vehicle > ul > li dl dt span:first-child { font-weight:600; font-size:139%; }
#motor #motor_cont #vehicle > ul > li dl dt span:nth-child(2) { font-weight:600; margin-top:10px; }
#motor #motor_cont #vehicle > ul > li dl dd { flex:0 0 100%; margin-top:20px; padding:0 10px 10px; }
#motor #motor_cont #vehicle > ul > li dl dd ul { border-top:1px solid #eee; border-left:1px solid #eee; flex-wrap:wrap; }
#motor #motor_cont #vehicle > ul > li dl dd ul li { border-right:1px solid #eee; border-bottom:1px solid #eee; display:flex; flex:0 0 100%; justify-content:space-between; }
#motor #motor_cont #vehicle > ul > li dl dd ul li span { display:block; flex:0 0 50%; padding:10px; }