@charset "UTF-8";
/* ========================================================================

  /csr/css/ability.css

======================================================================== */
/************************************************************************
  header
************************************************************************/
body.ability header::before { padding-top:calc(110/1440*100%); width:calc(461/1440*100%); background-image:url('../images/ability/main_image_text.svg'); top:calc(310/810*100%); bottom:auto; left:calc(170/1440*100%); }
body.ability header::after { background-image:url('../images/ability/main_image.jpg'); }

/* ============ tablet ============ */
@media(max-width:768px){

body.ability header::before { padding-top:0; width:calc(459/768*100vw); height:calc(252/768*100vw); background-image:url('../images/ability/main_image_text_sp.svg'); top:auto; bottom:calc(50/1024*100vh); left:calc(40/768*100vw); }
body.ability header::after { padding-top:0; width:100%; height:100%; background-image:url('../images/ability/main_image_sp.jpg'); background-position:center; }

}
/* ============ smart phone ============ */
@media(max-width:750px){
body.ability header::before { padding-top:0; width:calc(511/750*100vw); height:calc(280/750*100vw); background-image:url('../images/ability/main_image_text_sp.svg'); top:auto; bottom:calc(160/1200*100vh); left:calc(39/750*100vw); }
body.ability header::after { padding-top:0; width:100%; height:100%; background-image:url('../images/ability/main_image_sp.jpg'); background-position:center; }
}
/************************************************************************
  #lead
************************************************************************/
#lead { text-align:center; }
#lead h2 { margin-bottom:calc(40/1280*100%); line-height:1; }

/* ============ smart phone ============ */
@media(max-width:750px){
#lead .contents { width:calc(670/750*100vw); }
#lead h2 { margin-bottom:calc(40/750*100vw); font-size:calc(40/750*100vw); }
#lead p span { display:block; }
}
/************************************************************************
  #column
************************************************************************/
#column {  }
#column .contents { padding-bottom:calc(70/1440*100%); width:calc(880/1440*100%); max-width:880px; }
#column h3 { margin-bottom:calc(10/420*100%); height:11px; background-repeat:no-repeat; background-size:100% auto; }
#column h3 span { display:none; }
#column h4 { margin-bottom:calc(25/420*100%); line-height:calc(15/10); font-size:2rem; }

/* .col2 */
#column .col2 { margin-bottom:calc(80/880*100%); padding-bottom:calc(80/880*100%); justify-content:space-between;
background-image:linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 8px);
background-size:8px 1px;
background-position:left bottom;
background-repeat:repeat-x;
}
#column .col2:last-child { margin-bottom:0; }

#column .col2 .text { width:calc(420/880*100%); }
#column .col2 .photo { width:calc(400/880*100%); }

/* #point-01 ==================================== */
#point-01 {  }
#point-01 h3 { width:49px; background-image:url('../images/ability/point_01.svg'); }
#point-01 .text { order:2; }
#point-01 .photo { order:1; }

/* #point-02 ==================================== */
#point-02 {  }
#point-02 h3 { width:51px; background-image:url('../images/ability/point_02.svg'); }

/* #point-03 ==================================== */
#point-03 {  }
#point-03 h3 { width:51px; background-image:url('../images/ability/point_03.svg'); }
#point-03 .text { order:2; }
#point-03 .photo { order:1; }

/* #point-04 ==================================== */
#point-04 {  }
#point-04 h3 { width:52px; background-image:url('../images/ability/point_04.svg'); }

/* ============ smart phone ============ */
@media(max-width:750px){
#column .contents { padding-bottom:calc(70/750*100vw); width:calc(640/750*100vw); max-width:initial; }
#column h3 { margin-bottom:calc(10/750*100vw); height:calc((11*2)/750*100vw); }
#column h4 { margin-bottom:calc(25/750*100vw); font-size:calc(36/750*100vw); }
/* .col2 */
#column .col2 { margin-bottom:calc(80/750*100vw); padding-bottom:calc(80/750*100vw); }
#column .col2:last-child { margin-bottom:0; }
#column .col2 .text { margin-bottom:calc(30/750*100vw); width:100%; }
#column .col2 .photo { width:100%; }

/* #point-01 ==================================== */
#point-01 h3 { width:calc((49*2)/750*100vw); }
#point-01 .text { order:1; }
#point-01 .photo { order:2; }

/* #point-02 ==================================== */
#point-02 h3 { width:calc((51*2)/750*100vw); }

/* #point-03 ==================================== */
#point-03 h3 { width:calc((51*2)/750*100vw); }
#point-03 .text { order:1; }
#point-03 .photo { order:2; }

/* #point-04 ==================================== */
#point-04 h3 { width:calc((52*2)/750*100vw); }
}