@charset "utf-8";

/*===============================================
top
===============================================*/

#top h2, #top h3, #top dt, #top figure, #top p, #top .btn a, #top #sec1 a {
  text-indent: -9999px;
  background: center top no-repeat;
  background-size: auto 100%;
}
article#top {
  padding-bottom: 0;
}

@media screen and (min-width: 641px) {
  #top #main .slide a {
    display: block;
    width: 886px;
    height: 406px;
    margin: 0 auto 63px;
    text-indent: -9999px;
    background: url(../images/top/pc_slide1.jpg) center top no-repeat;
  }

  #top #main {
    padding: 13px 0 57px;
    background: #faf6ec;
  }
  #top #main p {
    height: 302px;
    background-image: url(../images/top/pc_lead.gif);
  }

  #top #info {
    width: 560px;
    margin: 50px auto;
  }
  #top #info h3:first-child {
    width: 560px; height: 42px;
    margin-bottom: 13px;
    background-image: url(../images/top/pc_info01.gif);
  }
  #top #info h3 a {
    display: block;
    width: 560px; height: 42px;
    margin: 30px 0;
    background-image: url(../images/top/pc_info02.gif);
  }

  #top #info dl {
    width: 560px;
    line-height: 1.5;
  }
  #top #info dt {
    clear: left;
    float: left;
    margin-right: 1em;
    text-indent: 0;
  }
  #top #info dd {
    overflow: hidden;
    margin-bottom: 5px;
  }
  #top #info dd a:hover {
    text-decoration: underline;
  }

  #top section.item {
    padding-bottom: 60px;
    text-align: center;
  }
  #top section.item .icon {
    height: 70px;
  }
  #top section.item h2 {
    height: 40px;
    margin: 53px 0 43px;
  }

  #top #sec1 { background-color: #edfdf5; }
  #top #sec1 .icon {
    background-image: url(../images/top/pc_ability_ico.gif);
    background-color: #fff;
  }
  #top #sec1 h2 {
    background-image: url(../images/top/pc_ability_ttl.gif);
  }
  #top #sec1 h3 {
    height: 26px;
    background-image: url(../images/top/pc_ability_copy.gif);
  }
  #top #sec1 p.lead {
    height: 156px;
    margin: 23px 0 97px;
    background-image: url(../images/top/pc_ability_lead.gif);
  }
  #top #sec1 dl {
    display: inline-block;
    font-size: 87.5%;
    line-height: 1.7143;
    text-align: left;
  }
  #top #sec1 dt {
    height: 18px;
    margin-bottom: 10px;
    background-image: url(../images/top/pc_ability_sub.gif);
  }
  #top #sec1 ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 882px;
    margin: 0 auto;
  }
  #top #sec1 li a {
    display: block;
    width: 270px; height: 180px;
    margin-top: 20px;
  }
  #top #sec1 li:nth-child(1) a { background-image: url(../images/top/pc_ability_btn1.jpg); }
  #top #sec1 li:nth-child(2) a { background-image: url(../images/top/pc_ability_btn2.jpg); }
  #top #sec1 li:nth-child(3) a { background-image: url(../images/top/pc_ability_btn3.jpg); }
  #top #sec1 li:nth-child(4) a { background-image: url(../images/top/pc_ability_btn4.jpg); }
  #top #sec1 li:nth-child(5) a { background-image: url(../images/top/pc_ability_btn5.jpg); }
  #top #sec1 li:nth-child(6) a { background-image: url(../images/top/pc_ability_btn6.jpg); }

  #top #sec2 { background-color: #fdfceb; }
  #top #sec2 .icon {
    background-image: url(../images/top/pc_gallery_ico.gif);
    background-color: #edfdf5;
  }
  #top #sec2 h2 {
    background-image: url(../images/top/pc_gallery_ttl.gif);
  }
  #top #sec2 p.lead {
    height: 20px;
    background-image: url(../images/top/pc_gallery_lead.gif);
  }
  /* #top #sec2 figure {
    height: 600px;
    margin: 51px 0 29px;
    background-image: url(../images/top/pc_gallery_ph.jpg);
  } */
  #top #sec2 ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 958px;
    margin: 10px auto;
  }
  #top #sec2 li a {
    display: block;
    height: 280px;
    margin-top: 10px;
  }
  #top #sec2 li:nth-child(1) a { width: 474px; background-image: url(../images/top/pc_gallery_btn1.jpg); }
  #top #sec2 li:nth-child(2) a { width: 474px; background-image: url(../images/top/pc_gallery_btn2.jpg); }
  #top #sec2 li:nth-child(3) a { width: 312px; background-image: url(../images/top/pc_gallery_btn3.jpg); }
  #top #sec2 li:nth-child(4) a { width: 312px; background-image: url(../images/top/pc_gallery_btn4.jpg); }
  #top #sec2 li:nth-child(5) a { width: 312px; background-image: url(../images/top/pc_gallery_btn5.jpg); }

  #top #sec2 p.btn a {
    display: block;
    width: 300px; height: 50px;
    margin: 60px auto;
    background-image: url(../images/top/pc_gallery_btn.gif);
  }

  #top #sec3 { background-color: #fdf0ef; }
  #top #sec3 .icon {
    background-image: url(../images/top/pc_service_ico.gif);
    background-color: #fdfceb;
  }
  #top #sec3 h2 {
    background-image: url(../images/top/pc_service_ttl.gif);
  }
  #top #sec3 figure {
    height: 420px;
    margin: 51px 0 29px;
    background-image: url(../images/top/pc_service_fig.jpg);
  }
  #top #sec3 dl {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 87.5%;
    line-height: 1.7143;
    text-align: left;
  }
  #top #sec3 dt {
    height: 18px;
    margin-bottom: 10px;
    background-image: url(../images/top/pc_service_sub.gif);
  }
  #top #sec3 p.btn a {
    display: block;
    width: 280px; height: 50px;
    margin: 0 auto;
    background-image: url(../images/top/pc_service_btn.gif);
  }

  #top #sec4 { background-color: #fff8de; }
  #top #sec4 .icon {
    background-image: url(../images/top/pc_staff_ico.gif);
    background-color: #fdf0ef;
  }
  #top #sec4 h2 {
    height: 66px;
    margin: 60px 0 32px;
    background-image: url(../images/top/pc_staff_ttl.gif);
  }
  #top #sec4 figure {
    height: 454px;
    margin: 28px 0;
    background-image: url(../images/top/pc_staff_ph.jpg);
  }

  #top #sec5 { background-color: #f3fcfe; padding-bottom: 40px; }
  #top #sec5 .icon {
    background-image: url(../images/top/pc_web_ico.gif);
    background-color: #fff8de;
  }
  #top #sec5 h2 {
    height: 162px;
    background-image: url(../images/top/pc_web_ttl.gif);
  }
  #top #sec5 figure {
    height: 295px;
    margin: 45px 0 20px;
    background-image: url(../images/top/pc_web_fig.gif);
  }
  #top #sec5 dl {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 87.5%;
    line-height: 1.7143;
    text-align: left;
  }
  #top #sec5 dt {
    font-size: 1.125rem;
    text-indent: 0;
    color: #0064b3;
  }
  #top #sec5 dt::before {
    content:"◆";
    margin-right: .2em;
    font-size: .875rem;
    vertical-align: .1em;
  }
  #top #sec5 dd li {
    margin-left: 1.3em;
    font-size: 1rem;
    line-height: 1.4375;
    list-style: disc;
  }
  #top #sec5 dd:last-child {
    margin-left: 1.3em;
    font-size: .8125rem;
    color: #ff0000;
  }
}
@media screen and (max-width:640px) {
  #top #main .slide a {
    display: block;
    width: 100vw;
    height: 63.4375vw;
    margin-bottom: 5vw;
    text-indent: -9999px;
    background: url(../images/top/sp_slide1.jpg) center top no-repeat;
    background-size: 100%;
  }

  #top section:not(#main) {
    padding: 0 1.5625vw 7.8125vw;
    font-size: 4.375vw;
    line-height: 1.642857;
  }
  #top #main {
    padding: 3.75vw 0 5.625vw;
    background: #faf6ec;
  }
  #top #main p {
    height: 114.375vw;
    background-image: url(../images/top/sp_lead.gif);
  }

  #top #info h3:first-child {
    height: 11.875vw;
    margin: 5.625vw 0 1.5625vw;
    background-image: url(../images/top/sp_info01.gif);
  }
  #top #info h3 a {
    display: block;
    height: calc(125/640*100vw);
    margin: 5.625vw 0 1.5625vw;
    background: url(../images/top/sp_info02.gif) no-repeat left top / cover;
  }

  #top #info dt {
    margin-top: 2.3vw;
    text-indent: 0;
  }
  #top #info div:last-of-type dt {
    clear: left;
    float: left;
    margin: 0 1em 0 0;
  }
  #top #info div:last-of-type dd {
    overflow: hidden;
    margin-bottom: 1.5625vw;
  }

  #top section.item .icon {
    height: 12.5vw;
    margin: 0 -1.5625vw;
  }
  #top section.item h2 {
    height: 7.5vw;
    margin: 6.25vw 0 4.6875vw;
  }

  #top #sec1 { background-color: #edfdf5; }
  #top #sec1 .icon {
    background-image: url(../images/top/sp_ability_ico.gif);
    background-color: #fff;
    margin-top: 5.5vw;
  }
  #top #sec1 h2 {
    background-image: url(../images/top/sp_ability_ttl.gif);
  }
  #top #sec1 h3 {
    height: 20.625vw;
    background-image: url(../images/top/sp_ability_copy.gif);
  }
  #top #sec1 p.lead {
    height: 98.75vw;
    margin: 3.75vw 0 7.8125vw;
    background-image: url(../images/top/sp_ability_lead.gif);
  }
  #top #sec1 dt {
    height: 6.25vw;
    margin-bottom: 1.5625vw;
    background-image: url(../images/top/sp_ability_sub.gif);
  }
  #top #sec1 li a {
    display: block;
    height: 34.375vw;
    margin-top: 3.1225vw;
  }
  #top #sec1 li:nth-child(1) a { background-image: url(../images/top/sp_ability_btn1.jpg); }
  #top #sec1 li:nth-child(2) a { background-image: url(../images/top/sp_ability_btn2.jpg); }
  #top #sec1 li:nth-child(3) a { background-image: url(../images/top/sp_ability_btn3.jpg); }
  #top #sec1 li:nth-child(4) a { background-image: url(../images/top/sp_ability_btn4.jpg); }
  #top #sec1 li:nth-child(5) a { background-image: url(../images/top/sp_ability_btn5.jpg); }
  #top #sec1 li:nth-child(6) a { background-image: url(../images/top/sp_ability_btn6.jpg); }

  #top #sec2 { background-color: #fdfceb; }
  #top #sec2 .icon {
    background-image: url(../images/top/sp_gallery_ico.gif);
    background-color: #edfdf5;
  }
  #top #sec2 h2 {
    background-image: url(../images/top/sp_gallery_ttl.gif);
  }
  #top #sec2 p.lead {
    height: 12.5vw;
    background-image: url(../images/top/sp_gallery_lead.gif);
  }
  /* #top #sec2 figure {
    height: 188.125vw;
    margin: 6.25vw 0 3.125vw;
    background-image: url(../images/top/sp_gallery_ph.jpg);
  } */
  #top #sec2 ul {
    margin-bottom: 10px;
  }
  #top #sec2 li a {
    display: block;
    height: 56.2vw;
    margin-top: 3.1225vw;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  #top #sec2 li:nth-child(1) a { background-image: url(../images/top/sp_gallery_btn1.jpg); }
  #top #sec2 li:nth-child(2) a { background-image: url(../images/top/sp_gallery_btn2.jpg); }
  #top #sec2 li:nth-child(3) a { background-image: url(../images/top/sp_gallery_btn3.jpg); }
  #top #sec2 li:nth-child(4) a { background-image: url(../images/top/sp_gallery_btn4.jpg); }
  #top #sec2 li:nth-child(5) a { background-image: url(../images/top/sp_gallery_btn5.jpg); }
  #top #sec2 p.btn a {
    display: block;
    height: 15.625vw;
    background-image: url(../images/top/sp_gallery_btn.gif);
  }

  #top #sec3 { background-color: #fdf0ef; }
  #top #sec3 .icon {
    background-image: url(../images/top/sp_service_ico.gif);
    background-color: #fdfceb;
  }
  #top #sec3 h2 {
    background-image: url(../images/top/sp_service_ttl.gif);
  }
  #top #sec3 figure {
    height: 55vw;
    background-image: url(../images/top/sp_service_fig.jpg);
  }
  #top #sec3 dl {
    margin: 3.125vw 0;
  }
  #top #sec3 dt {
    height: 6.25vw;
    margin-bottom: 1.5625vw;
    background-image: url(../images/top/sp_service_sub.gif);
  }
  #top #sec3 p.btn a {
    display: block;
    height: 15.625vw;
    background-image: url(../images/top/sp_service_btn.gif);
  }

  #top #sec4 { background-color: #fff8de; }
  #top #sec4 .icon {
    background-image: url(../images/top/sp_staff_ico.gif);
    background-color: #fdf0ef;
  }
  #top #sec4 h2 {
    height: 20.3125vw;
    background-image: url(../images/top/sp_staff_ttl.gif);
  }
  #top #sec4 figure {
    height: 253.125vw;
    margin-top: 5.9375vw;
    background-image: url(../images/top/sp_staff_ph.jpg);
  }

  #top #sec5 { background-color: #f3fcfe; padding-bottom: 6.25vw; }
  #top #sec5 .icon {
    background-image: url(../images/top/sp_web_ico.gif);
    background-color: #fff8de;
  }
  #top #sec5 h2 {
    height: 31.875vw;
    background-image: url(../images/top/sp_web_ttl.gif);
  }
  #top #sec5 figure {
    height: 132.5vw;
    margin: 3.125vw 0;
    background-image: url(../images/top/sp_web_fig.gif);
  }
  #top #sec5 dt {
    margin-left: 1em;
    text-indent: -1em;
    color: #0064b3;
  }
  #top #sec5 dt::before {
    content:"◆";
    margin-right: .2em;
    font-size: 87.5%;
  }
  #top #sec5 dd li {
    margin-left: 2.3em;
    list-style: disc;
  }
  #top #sec5 dd:last-child {
    margin-top: 0.3em;
    margin-left: 2.2em;
    text-indent: -1em;
    font-size: 3.75vw;
    line-height: 1.5;
    color: #ff0000;
  }
}


/*===============================================
ability
===============================================*/
#ability h2, #ability dt, #ability figure, #ability #main p, #ability #main a {
  text-indent: -9999px;
  background: left top no-repeat;
  background-size: 100%;
}

@media screen and (min-width: 641px) {
  article#ability {
    background-image: url(../images/ability/pc_title_bg.gif);
  }
  #ability section {
    width: 960px;
    margin: 0 auto;
  }
  #ability h2 {
    width:460px; height:26px;
    margin: 80px auto 12px;
  }
  #ability section .lead {
    line-height: 1.625;
    text-align: center;
  }
  #ability section dd {
    font-size: 0.875rem;
    line-height: 1.7143;
  }

  #ability #main h1 {
    background-image: url(../images/ability/pc_title.png);
  }
  #ability #main p {
    width: 902px; height: 156px;
    margin: 29px auto 46px;
    background-image: url(../images/ability/pc_copy.png);
  }
  #ability #main ul {
    display: flex;
    justify-content: space-between;
    width: 882px;
    margin: 52px auto 0;
  }
  #ability #main li a {
    display: block;
    width:269px; height:70px;
  }
  #ability #main li:nth-child(1) a { background-image: url(../images/ability/pc_btn01.gif); }
  #ability #main li:nth-child(2) a { background-image: url(../images/ability/pc_btn02.gif); }
  #ability #main li:nth-child(3) a { background-image: url(../images/ability/pc_btn03.gif); }

  #ability #power h2 {
    background-image: url(../images/ability/pc_power.gif);
  }
  #ability #power > dl {
    margin-top: 30px;
    padding-bottom: 45px;
    background: right bottom no-repeat;
  }
  #ability #power > dl:nth-of-type(1) { background-image: url(../images/ability/pc_power_bg1.jpg); }
  #ability #power > dl:nth-of-type(2) { background-image: url(../images/ability/pc_power_bg2.jpg); }
  #ability #power > dl:nth-of-type(3) { background-image: url(../images/ability/pc_power_bg3.jpg); }
  #ability #power > dl:nth-of-type(4) { background-image: url(../images/ability/pc_power_bg4.jpg); }
  #ability #power > dl:nth-of-type(5) { background-image: url(../images/ability/pc_power_bg5.jpg); }
  #ability #power > dl:nth-of-type(6) { background-image: url(../images/ability/pc_power_bg6.jpg); }

  #ability #power > dl > dt {
    width:302px; height:48px;
  }
  #ability #power > dl:nth-of-type(1) > dt { background-image: url(../images/ability/pc_power01.gif); }
  #ability #power > dl:nth-of-type(2) > dt { background-image: url(../images/ability/pc_power02.gif); }
  #ability #power > dl:nth-of-type(3) > dt { background-image: url(../images/ability/pc_power03.gif); }
  #ability #power > dl:nth-of-type(4) > dt { background-image: url(../images/ability/pc_power04.gif); }
  #ability #power > dl:nth-of-type(5) > dt { background-image: url(../images/ability/pc_power05.gif); }
  #ability #power > dl:nth-of-type(6) > dt { background-image: url(../images/ability/pc_power06.gif); }

  #ability #power > dl > dd {
    margin: 9px 0 0 40px;
  }
  #ability #power > dl dd dt {
    margin-top: 1.3em;
    font-size: 1rem;
    font-weight: bold;
    text-indent: 0;
  }
  #ability #power > dl:nth-of-type(3) dd dt::before {
    content: "・";
    color: #0064b3;
  }
  #ability #power > dl:nth-of-type(3) figure {
    margin-top: 12px;
  }
  #ability #power > dl:nth-of-type(3) dl:nth-of-type(1) figure {
    width:428px; height:147px;
    background-image: url(../images/ability/pc_power_fig1.jpg);
  }
  #ability #power > dl:nth-of-type(3) dl:nth-of-type(2) figure {
    width:428px; height:168px;
    background-image: url(../images/ability/pc_power_fig2.jpg);
  }
  #ability #power > dl:nth-of-type(3) dl:nth-of-type(3) figure {
    width:326px; height:113px;
    background-image: url(../images/ability/pc_power_ph2.jpg);
  }
  #ability #power > dl:nth-of-type(3) dl:nth-of-type(4) figure {
    width:129px; height:170px;
    background-image: url(../images/ability/pc_power_ph.jpg);
  }

  #ability #renov h2 {
    background-image: url(../images/ability/pc_reno.gif);
  }
  #ability #renov dt {
    width:293px; height:18px;
    margin: 28px 0 10px;
  }
  #ability #renov > dl:nth-of-type(1) dt { background-image: url(../images/ability/pc_reno_sub1.gif); }
  #ability #renov > dl:nth-of-type(2) dt { background-image: url(../images/ability/pc_reno_sub2.gif); }
  #ability #renov > dl:nth-of-type(1) figure {
    width:100%; height:200px;
    margin: 16px 0 42px;
    background-image: url(../images/ability/pc_reno_ph01.jpg);
  }
  #ability #renov > dl:nth-of-type(2) figure {
    width:100%; height:264px;
    margin: 16px 0 0;
    background-image: url(../images/ability/pc_reno_ph02.jpg);
  }

  #ability #flow h2 {
    background-image: url(../images/ability/pc_flow.gif);
  }
  #ability #flow dl {
    position: relative;
    display: table;
    width: 100%;
  }
  #ability #flow dl:not(:last-of-type)::after {
    content:" ";
    display: block;
    position: absolute;
    left: 458px;
    bottom: -21px;
    width: 0;
    border: 21px solid transparent;
    border-bottom-width: 0;
  }
  #ability #flow dl:nth-of-type(1) { background-color: #55aef4; z-index:6; margin-top: 32px; }
  #ability #flow dl:nth-of-type(2) { background-color: #3a9dec; z-index:5; }
  #ability #flow dl:nth-of-type(3) { background-color: #2691e7; z-index:4; }
  #ability #flow dl:nth-of-type(4) { background-color: #137dd1; z-index:3; }
  #ability #flow dl:nth-of-type(5) { background-color: #0c73c5; z-index:2; }
  #ability #flow dl:nth-of-type(6) { background-color: #0064b3; z-index:1; }
  #ability #flow dl:nth-of-type(1)::after { border-top-color: #55aef4; }
  #ability #flow dl:nth-of-type(2)::after { border-top-color: #3a9dec; }
  #ability #flow dl:nth-of-type(3)::after { border-top-color: #2691e7; }
  #ability #flow dl:nth-of-type(4)::after { border-top-color: #137dd1; }
  #ability #flow dl:nth-of-type(5)::after { border-top-color: #0c73c5; }

  #ability #flow dt {
    display: table-cell;
    width:220px; height:180px;
    background-position: center center;
    background-size: auto;
  }
  #ability #flow dl:nth-of-type(1) dt { background-image: url(../images/ability/pc_flow01.gif); }
  #ability #flow dl:nth-of-type(2) dt { background-image: url(../images/ability/pc_flow02.gif); }
  #ability #flow dl:nth-of-type(3) dt { background-image: url(../images/ability/pc_flow03.gif); }
  #ability #flow dl:nth-of-type(4) dt { background-image: url(../images/ability/pc_flow04.gif); }
  #ability #flow dl:nth-of-type(5) dt { background-image: url(../images/ability/pc_flow05.gif); }
  #ability #flow dl:nth-of-type(6) dt { background-image: url(../images/ability/pc_flow06.gif); }

  #ability #flow dd {
    display: table-cell;
    line-height: 1.85714;
    color: #fff;
    vertical-align: middle;
  }
}
@media screen and (max-width:640px) {
  article#ability {
    background-image: url(../images/ability/sp_title_bg.gif);
  }
  #ability h2 {
    width:100%; height:6.5625vw;
    margin: 9.375vw auto 3.125vw;
  }
  #ability section p, #ability section dd {
    width: 93.75vw;
    margin: auto;
    padding: 0 1.5625vw;
    font-size: 4.375vw;
    line-height: 1.643;
  }
  #ability section dd dd {
    padding: 0;
  }

  #ability #main h1 {
    background-image: url(../images/ability/sp_title.png);
  }
  #ability #main p {
    width:100vw; height:83.125vw;
    padding: 0;
    margin: 5vw 0 8.75vw;
    background-image: url(../images/ability/sp_copy.png);
  }
  #ability #main li a {
    display: block;
    width:96.875vw; height:18.75vw;
    margin: 3.125vw auto 0;
  }
  #ability #main li:nth-child(1) a { background-image: url(../images/ability/sp_btn01.gif); }
  #ability #main li:nth-child(2) a { background-image: url(../images/ability/sp_btn02.gif); }
  #ability #main li:nth-child(3) a { background-image: url(../images/ability/sp_btn03.gif); }

  #ability #power h2 {
    background-image: url(../images/ability/sp_power.gif);
  }
  #ability #power > dl {
    margin-top: 4.6875vw;
  }
  #ability #power > dl > dt {
    width:100%; height:12.1875vw;
  }
  #ability #power > dl:nth-of-type(1) > dt { background-image: url(../images/ability/sp_power01.gif); }
  #ability #power > dl:nth-of-type(2) > dt { background-image: url(../images/ability/sp_power02.gif); }
  #ability #power > dl:nth-of-type(3) > dt { background-image: url(../images/ability/sp_power03.gif); }
  #ability #power > dl:nth-of-type(4) > dt { background-image: url(../images/ability/sp_power04.gif); }
  #ability #power > dl:nth-of-type(5) > dt { background-image: url(../images/ability/sp_power05.gif); }
  #ability #power > dl:nth-of-type(6) > dt { background-image: url(../images/ability/sp_power06.gif); }

  #ability #power > dl > dd {
    padding: 1.5625vw 1.5625vw 7.8125vw;
    background: right bottom no-repeat;
    background-size: 100%;
  }
  #ability #power > dl:nth-of-type(1) > dd { background-image: url(../images/ability/sp_power_bg1.jpg); }
  #ability #power > dl:nth-of-type(2) > dd { background-image: url(../images/ability/sp_power_bg2.jpg); }
  #ability #power > dl:nth-of-type(3) > dd { background-image: url(../images/ability/sp_power_bg3.jpg); }
  #ability #power > dl:nth-of-type(4) > dd { background-image: url(../images/ability/sp_power_bg4.jpg); }
  #ability #power > dl:nth-of-type(5) > dd { background-image: url(../images/ability/sp_power_bg5.jpg); }
  #ability #power > dl:nth-of-type(6) > dd { background-image: url(../images/ability/sp_power_bg6.jpg); }

  #ability #power > dl dd dt {
    margin-top: 1.3em;
    font-weight: bold;
    text-indent: 0;
  }
  #ability #power > dl:nth-of-type(3) dd dt::before {
    content: "・";
    color: #0064b3;
  }
  #ability #power > dl:nth-of-type(3) figure {
    margin-top: 3.125vw;
  }
  #ability #power > dl:nth-of-type(3) dl:nth-of-type(1) figure {
    width:100%; height:95vw;
    background-image: url(../images/ability/sp_power_fig1.jpg);
  }
  #ability #power > dl:nth-of-type(3) dl:nth-of-type(2) figure {
    width:100%; height:141.25vw;
    background-image: url(../images/ability/sp_power_fig2.jpg);
  }
  #ability #power > dl:nth-of-type(3) dl:nth-of-type(3) figure {
    width:100%; height:100vw;
    background-image: url(../images/ability/sp_power_ph2.jpg);
  }
  #ability #power > dl:nth-of-type(3) dl:nth-of-type(4) figure {
    width:100%; height:62.8125vw;
    background-image: url(../images/ability/sp_power_ph.png);
  }

  #ability #renov h2 {
    height: 13.75vw;
    background-image: url(../images/ability/sp_reno.gif);
  }
  #ability #renov dt {
    width:93.75vw; height:5vw;
    margin: 28px auto 10px;
  }
  #ability #renov > dl:nth-of-type(1) dt { background-image: url(../images/ability/sp_reno_sub1.gif); }
  #ability #renov > dl:nth-of-type(2) dt { background-image: url(../images/ability/sp_reno_sub2.gif); }

  #ability #renov > dl:nth-of-type(1) figure {
    width:96.875vw; height:195.15625vw;
    margin: 3.125vw -1.5625vw 6.5625vw;
    background-image: url(../images/ability/sp_reno_ph01.jpg);
  }
  #ability #renov > dl:nth-of-type(2) figure {
    width:96.875vw; height:141.5625vw;
    margin: 3.125vw -1.5625vw 0;
    background-image: url(../images/ability/sp_reno_ph02.jpg);
  }

  #ability #flow h2 {
    background-image: url(../images/ability/sp_flow.gif);
  }
  #ability #flow dl {
    position: relative;
    display: flex;
    width: 96.875vw;
    margin: 0 auto;
  }
  #ability #flow dl:not(:last-of-type)::after {
    content:" ";
    display: block;
    position: absolute;
    left: 41.875vw;
    bottom: -6.25vw;
    width: 0;
    border: 6.25vw solid transparent;
    border-bottom-width: 0;
  }
  #ability #flow dl:nth-of-type(1) { background-color: #55aef4; z-index:6; margin-top: 3.75vw; }
  #ability #flow dl:nth-of-type(2) { background-color: #3a9dec; z-index:5; }
  #ability #flow dl:nth-of-type(3) { background-color: #2691e7; z-index:4; }
  #ability #flow dl:nth-of-type(4) { background-color: #137dd1; z-index:3; }
  #ability #flow dl:nth-of-type(5) { background-color: #0c73c5; z-index:2; }
  #ability #flow dl:nth-of-type(6) { background-color: #0064b3; z-index:1; }
  #ability #flow dl:nth-of-type(1)::after { border-top-color: #55aef4; }
  #ability #flow dl:nth-of-type(2)::after { border-top-color: #3a9dec; }
  #ability #flow dl:nth-of-type(3)::after { border-top-color: #2691e7; }
  #ability #flow dl:nth-of-type(4)::after { border-top-color: #137dd1; }
  #ability #flow dl:nth-of-type(5)::after { border-top-color: #0c73c5; }

  #ability #flow dt {
    width: 25vw;
    background-position: right 8.75vw;
    background-size: 22.1875vw;
  }
  #ability #flow dl:nth-of-type(1) dt { background-image: url(../images/ability/sp_flow01.gif); }
  #ability #flow dl:nth-of-type(2) dt { background-image: url(../images/ability/sp_flow02.gif); }
  #ability #flow dl:nth-of-type(3) dt { background-image: url(../images/ability/sp_flow03.gif); }
  #ability #flow dl:nth-of-type(4) dt { background-image: url(../images/ability/sp_flow04.gif); }
  #ability #flow dl:nth-of-type(5) dt { background-image: url(../images/ability/sp_flow05.gif); }
  #ability #flow dl:nth-of-type(6) dt { background-image: url(../images/ability/sp_flow06.gif); }

  #ability #flow dd {
    width: 71.875vw;
    padding: 8.125vw 3.125vw 5.625vw;
    color: #fff;
    box-sizing: border-box;
  }
}


/*===============================================
service
===============================================*/
#service #main p, #ability #main a, #service #list p a {
  text-indent: -9999px;
  background: center top no-repeat;
  background-size: auto 100%;
}

@media screen and (min-width: 641px) {
  article#service {
    background-image: url(../images/service/pc_title_bg.gif);
  }
  #service #main h1 {
    background-image: url(../images/service/pc_title.png);
  }
  #service #main p {
    height: 56px;
    margin: 29px auto 52px;
    background-image: url(../images/service/pc_copy.png);
  }
  #service #list {
    text-align: center;
  }
  #service #list p a {
    display: block;
    width: 280px; height: 50px;
    margin: 0 auto;
    background-image: url(../images/service/pc_btn.gif);
  }
  #service #list ul {
    margin: 30px 0;
  }
}
@media screen and (max-width:640px) {
  article#service {
    background-image: url(../images/service/sp_title_bg.gif);
  }
  #service #main h1 {
    background-image: url(../images/service/sp_title.png);
  }
  #service #main p {
    height: 12.8125vw;
    margin: 5vw auto 10vw;
    background-image: url(../images/service/sp_copy.png);
  }
  #service #list p a {
    display: block;
    width:96.875vw; height: 15.625vw;
    margin: 0 auto;
    background-image: url(../images/service/sp_btn.gif);
  }
  #service #list > div {
    margin-left: 3.125vw;
  }
  #service #list > div > p {
    margin: 3.125vw 3.125vw 1.5625vw 0;
  }
  #service #listbg {
    display: none;
  }
  #service #listbg.notes {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
  }
  #service #listbg p {
    font-size: 4vw;
    line-height: 1.3125;
    color: #fff;
    text-align: center;
  }
  #service #listbg img {
    width: 18vw;
    margin-bottom: 4.75vw;
  }

  .chart {
    display: block;
    position: relative;
    overflow: scroll;
    width: 100%;
    border-collapse: collapse;
    font-size: 0;
    margin-bottom: 4.6875vw;
  }
  .chart tbody {
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  .chart th {
    display: inline-block;
    width: 40.78125vw;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .chart td {
    display: inline-block;
    width: 143.75vw;
  }
  .chart:last-child td {
    width: 147.34375vw;
  }
}