@charset "UTF-8";
/* CSS Document */

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/06/21
* Last update : 2018/09/29
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* 画面幅：680px 以下
*************************************************************************************************************************/

/* main
**********************************************************************/
main{ background: url(../img/main_placeholder.jpg) no-repeat center / cover; width: 100%; height: 390px; position: relative; overflow: hidden;}
main::before{ content: ""; background: url(../img/main_cover.png) repeat 0 0 / 2px 2px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
main div{ width: 100%; margin: -30px 0 0; position: absolute; top: 50%; left: 50%; z-index: 3; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
main div h2{ margin: 0 -2px 0 0; font: 700 36px/1 "futura-pt",sans-serif; color: #fff; text-align: center; letter-spacing: 2px; text-shadow: 0 0 5px #404040;}
main div h2 span{ display: block; margin:  0 0 10px; font: italic 400 28px/1 "lato",sans-serif;}
main div p{ margin: 10px 0 0; font: 700 15px/1 "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center; letter-spacing: 1px; text-shadow: 0 0 5px #404040;}
main video{ display: none;}

@media print, screen and (min-width:681px){
  main{ background: none; width: 100%; height: 600px;}
  main div{ margin: -40px 0 0;}
  main div h2{ font-size: 70px; letter-spacing: 4.5px;}
  main div h2 span{ margin:  0 0 15px; font-size: 52px; letter-spacing: 3px;}
  main div p{ margin: 20px 0 0; font-size: 23px; letter-spacing: 2px;}
  main video{ display: block; width: auto; height: 650px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
}

@media print, screen and (min-width:1150px){
  main video{ width: 100%; height: auto;}
}


/* contents
**********************************************************************/
.contents{ background: #eae9e5;}


/* linkpit
**********************************************************************/
.linkpit{ background: url(../img/linkpit_bg_sp.jpg) no-repeat center/cover; margin: -60px 16px 0; padding: 30px 0; position: relative; z-index: 2; box-shadow: 0px 0px 6px 0px rgba(0,0,0,.3);}
.linkpit div{ background: rgba(48,154,161,.9); width: 290px; margin: 0 auto; padding: 11px 0 18px; box-shadow: 0px 0px 6px 0px rgba(0,0,0,.3);}
.linkpit div h3{ width: 100px; margin: 0 auto;}
.linkpit div p{ margin: 8px 0 0; font: 700 16px/1.2 "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center; letter-spacing: .04em;}
.linkpit div a{ display: block; width: 195px; height: 32px; margin: 10px auto 0; border: solid 1px #fff; font: 300 14px/30px "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center; transition: background .2s linear, color .2s linear;}
.linkpit div a:hover{ background: #fff; color: rgba(48,154,161,1);}

@media print, screen and (min-width:681px){
  .linkpit{ background-image: url(../img/linkpit_bg_pc.jpg); width: 980px; margin: -80px auto 0;}
  .linkpit div{ width: 518px;}
  .linkpit div p{ font-size: 18px; line-height: 1.4;}
  .linkpit div p br:first-child{ display: none;}
  .linkpit div a{ width: 365px;}
}

/* acbanner
**********************************************************************/
.acbanner{ width: calc(100% - 32px); margin: -100px auto 0; position: relative; z-index: 2; box-shadow: 0px 0px 6px 0px rgba(0,0,0,.3);}
.acbanner a{ display: block; width: 100%; padding: calc(100%*(163/343)) 0 0 0; background: url(../img/ac_banner_sp.jpg) no-repeat center center/cover; line-height: 0; overflow: hidden; text-indent: 100%; white-space: nowrap;}
@media print, screen and (min-width:681px){
  .acbanner{ width: 980px; margin: -100px auto 0;}
  .acbanner a{ padding: calc(100%*(210/980)) 0 0 0; background: url(../img/ac_banner_pc.jpg) no-repeat center center/cover;}
}


/* news
**********************************************************************/
.news{ margin: -60px 16px 0; box-shadow: 0 0 6px 0 rgba(0,0,0,.3); position: relative; z-index: 3;}
.news h3{ background: #dd0716; height: 60px; padding: 12px 0 0; font: 600 18px/1 "din-2014",sans-serif; color: #fff; text-align: center; letter-spacing: 2px;}
.news h3 span{ display: block; margin: 5px 0 0; font: 700 12px/1 "heisei-kaku-gothic-std",sans-serif;}

/*
.news ul li{ background: #fff; padding: 10px 15px; transition: background .2s linear;}
.news ul li:nth-child(odd){ background: rgba(211,224,226,.8);}
.news ul li dl dt{ font-weight: bold; font-size: 12px; color: #333; transition: color .2s linear;}
.news ul li dl dt span{ display: inline-block; background: #ffe100; margin: 0 0 0 10px; padding: 2px 15px; font-size: 11px; color: #2e919e;}
.news ul li dl dd{ margin: 5px 0 0; padding: 0 30px 0 0; font-size: 13px; color: #333; transition: color .2s linear;}
.news ul li dl dd a{ position: relative; color: #333; transition: color .2s linear;}
.news ul li dl dd a:hover{ color: #dd0716;}
.news ul li dl dd a.pdf::before{ content: "PDF"; background: #dd0716; width: 32px; height: 16px; position: absolute; bottom: -2px; right: -35px; font: 400 10px/16px "din-2014",sans-serif; color: #fff; text-align: center; letter-spacing: 1px;}
*/
@media print, screen and (min-width:681px){
  .news{ width: 980px; margin: -80px auto 0;}
  .news h3{ height: 80px; padding: 18px 0 0; font-size: 21px;}
  .news h3 span{ margin: 8px 0 0; font-size: 14px;}
  
  /*
  .news ul li { padding: 15px 30px; overflow: hidden;}
  .news ul li dl dt{ width: 215px; float: left;}
  .news ul li dl dt span{ width: 100px; height: 22px; margin: 0 0 0 20px; padding: 0; line-height: 22px; text-align: center;}
  .news ul li dl dd{ width: calc(100% - 215px); margin: 2px 0 0; float: left;}
  */
}


/* serviceBanner
**********************************************************************/
.serviceBanner{ margin: 20px 0 0 0; padding: 0 16px;}
.serviceBanner li{ width: 100%;}
.serviceBanner li:nth-child(1){ margin: 0 0 13px 0;}
.serviceBanner li a{ display: block; width: 100%; padding: calc(100%*(185/343)) 0 0 0; line-height: 0; overflow: hidden; text-indent: 100%; white-space: nowrap;}
.serviceBanner li:nth-child(1) a{ background: url(../img/linkpit_banner_sp.jpg) no-repeat center center/cover;}
.serviceBanner li:nth-child(2) a{ background: url(../img/ac_banner_sp.jpg) no-repeat center center/cover;}
@media print, screen and (min-width:681px){
  .serviceBanner{ display: flex; width: 980px; margin: 20px auto 0 auto; padding: 0; justify-content: space-between;}
  .serviceBanner li{ width: 482px; margin: 0 !important;}
  .serviceBanner li a{ width: 482px; padding: 185px 0 0 0;}
  .serviceBanner li:nth-child(1) a{ background: url(../img/linkpit_banner_pc.jpg) no-repeat center center/cover;}
  .serviceBanner li:nth-child(2) a{ background: url(../img/ac_banner_pc.jpg) no-repeat center center/cover;}
}

/* business
**********************************************************************/
.business{ padding: 40px 16px 40px;}
.business h3{ font: 600 26px/1 "din-2014",sans-serif; color: #dd0716; text-align: center; letter-spacing: 3px;}
.business h3 span{ display: block; margin: 7px 0 0; font: 500 14px/1 "heisei-kaku-gothic-std",sans-serif; color: #333; letter-spacing: 2px;}
.business > p{ margin: 20px 0 0; font: 300 19px/1.5 "heisei-kaku-gothic-std",sans-serif; text-align: center; color: #333;}
.business > ul{ margin: 25px 0 0;}
.business > ul > li > a{ display: block; background: #fff; margin: 15px 0 0; padding: 16px; border: solid 2px #fff; box-shadow: 0 0 6px 0 rgba(0,0,0,.3); transition: border-color .2s linear;}
.business > ul > li:nth-child(1) a:hover{ border-color: #6fb12c;}
.business > ul > li:nth-child(2) a:hover{ border-color: #de4545;}
.business > ul > li:nth-child(3) a:hover{ border-color: #0071b4;}
.business > ul > li:nth-child(4) a:hover{ border-color: #E37A37;}
.business > ul > li > a div{ width: 40%; margin: 0 auto;}
.business > ul > li h4{ margin: 18px 0 0; font: 300 16px/1 "heisei-kaku-gothic-std",sans-serif; color: #333; text-align: center; letter-spacing: 2px;}
.business > ul > li h4 span{ display: block; margin: 7px 0 0; font: 400 11px/1 "din-2014",sans-serif; color: #dd0716; letter-spacing: 1px;}
.business > ul > li p{ margin: 15px 0 0; line-height: 1.5; color: #333;}
.business > ul > li > a > span{ display: block; width: 100%; height: 35px; margin: 15px 0 0; position: relative; line-height: 35px; color: #fff; text-align: center;}
.business > ul > li:nth-child(1) a > span{ background: #6fb12c;}
.business > ul > li:nth-child(2) a > span{ background: #de4545;}
.business > ul > li:nth-child(3) a > span{ background: #0071b4;}
.business > ul > li:nth-child(4) a > span{ background: #E37A37;}
.business > ul > li > a > span::before{ content: ""; background: url(../common/img/icon_arrow01.svg) no-repeat 0 0 / cover; width: 6px; height: 8px; position: absolute; top: 50%; right: 13px; transform: translateY(-50%);}
.business > ul > li > div{ background: rgba(255,255,255,1); padding: 20px 15px;}
.business > ul > li > div h4{ margin-top: 0;}
.business > ul > li > div ul li a{ display: block; background: #d50716; width: 100%; height: 35px; margin: 15px 0 0; position: relative; line-height: 35px; color: #fff; text-align: center; transition: background .2s;}
.business > ul > li > div ul li a:hover{ background: #ff0b29;}
.business > ul > li > div ul li a::before{ content: ""; height: 8px; position: absolute; top: 50%; right: 13px; transform: translateY(-50%);}
.business > ul > li > div ul li:nth-child(1) a::before{ background: url(../common/img/icon_arrow01.svg) no-repeat 0 0 / cover; width: 6px;}
.business > ul > li > div ul li:nth-child(2) a::before{ background: url(../common/img/icon_external_on.svg) no-repeat 0 0 / cover; width: 9px;}


@media print, screen and (max-width:359px){
  .business > p{ font-size: 17px;}
}

@media print, screen and (min-width:460px){
  .business > p br:nth-child(2){ display: none;}
}

@media print, screen and (min-width:681px){
  .business{ padding: 50px 0;}
  .business h3{ font-size: 35px;}
  .business h3 span{ font-size: 16px;}
  .business > p{ margin: 20px 0 0; font-size: 27px;}
  .business > ul{ width: 980px; margin: 30px auto 0;}
  .business > ul::after{ content: ""; display: block; height: 0; visibility: hidden; clear: both;}
  .business > ul > li > a{ display: block; width: 233px; margin: 0 16px 0 0; padding: 26px 26px 26px; float: left;}
  .business > ul > li:nth-child(4) a{ margin: 0;}
  .business > ul > li > a div{ width: 100%;}
  .business > ul > li > a p{ margin: 20px 0 0;}
  .business > ul > li > a > span{; margin: 20px 0 0;}
  .business > ul > li > div{ padding: 30px;}
  .business > ul > li > div ul{ display: flex; justify-content: space-between;}
  .business > ul > li > div ul li{ width: 435px;}
  .business > ul > li > div ul li a{ margin-top: 25px;}
}


/* pick up
**********************************************************************/
.pickup{ background: url(../img/pickup_bg.jpg) no-repeat center / cover; padding: 40px 0;}
.pickup h3{ font: 600 26px/1 "din-2014",sans-serif; color: #dd0716; text-align: center; letter-spacing: 3px;}
.pickup h3 span{ display: block; margin: 7px 0 0; font: 500 14px/1 "heisei-kaku-gothic-std",sans-serif; color: #333; letter-spacing: 2px;}
.pickup > ul{ margin: 30px 0 0;}
.pickup > ul li a{ display: block; background: #fff; padding: 10px 10px 15px; transition: box-shadow .2s linear;}
.pickup > ul li a:hover{ box-shadow: 0 0 0 2px #dd0716 inset;}
.pickup > ul li a:hover div{ overflow: hidden;}
.pickup > ul li a div img{ transition: transform .2s linear;}
.pickup > ul li a:hover div img{ transform: scale(1.03)}
.pickup > ul li a dl{ margin: 15px 5px 0;}
.pickup > ul li a dl dt{ padding: 0 0 0 21px; position: relative; font: 500 15px/1 "heisei-kaku-gothic-std",sans-serif; color: #dd0716;}
.pickup > ul li a dl dt::before{ content: ""; background: #dd0716; width: 13px; height: 13px; position: absolute; top: 1px; left: 0;}
.pickup > ul li a dl dt::after{ content: ""; width: 0; height: 0; position: absolute; top: 4px; left: 5px; border-style: solid; border-width: 3px 0 3px 4px; border-color: transparent transparent transparent #ffffff;}
.pickup > ul li a dl dd{ margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: #333;}

@media print, screen and (min-width:681px){
  .pickup{ padding: 50px 0;}
  .pickup h3{ font-size: 35px;}
  .pickup h3 span{ font-size: 16px;}
  .pickup > ul{ margin: 40px 0 0;}
  .pickup > ul li a dl{ margin-left: 11px; margin-right: 11px;}
}

/* modal */
.pickup .ac-modal{ display: none; background: rgba(0,0,0,.7); width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1000;}
.pickup .modal-content{ width: calc(100% - 32px); position: absolute; top: 16px; left: 16px;}
.pickup .modal-content > a{ display: block; background: url(../common/img/nav_close.svg) no-repeat 0 0 / cover; width: 50px; height: 50px; position: absolute; top: 0; right: -10px; overflow: hidden; text-indent: 100%; white-space: nowrap;}
.pickup .modal-content > div{ background: #fff; width: 100%; height: calc(100vh - 120px); margin: 50px 0 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; box-shadow: 0 0 12px rgba(0,0,0,.6);}
.pickup .modal-content > div h4{ background: #dd0716; margin: 0 0 15px; padding: 15px 0; font: 500 16px/1 "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center;}
.pickup .modal-content > div .start h5{ margin: 0 0 20px; padding: 0 20px; font: 500 15px/1.4 "heisei-kaku-gothic-std",sans-serif; text-align: center;}
.pickup .modal-content > div .start h5 span{ display: block; font-size: 12px;}
.pickup .modal-content > div .start > p{ padding: 0 20px; font-size: 13px;}

.pickup .modal-content > div .start .apply > p{ background: #dd0716; max-width: 240px; height: 32px; margin: 20px auto 0 auto; border-radius: 16px; font: 500 13px/32px "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center;}
.pickup .modal-content > div .start .apply ul{ margin: 20px auto 0; padding: 0 10px; overflow: hidden;}
.pickup .modal-content > div .start .apply ul li{ width: 33.3%; border-right: solid 1px #CACACA; float: left;}
.pickup .modal-content > div .start .apply ul li.document{ border: none;}
.pickup .modal-content > div .start .apply ul li a{ display: block; width: 60px; height: 60px; margin: 0 auto 5px; border: solid 2px #dd0716; border-radius: 30px; overflow: hidden; text-indent: 100%; white-space: nowrap; transition: background-color .2s linear;}
.pickup .modal-content > div .start .apply ul li.tel a{ background: url(../img/icon_tel.svg) no-repeat center / 30px 30px;}
.pickup .modal-content > div .start .apply ul li.contact a{ background: url(../img/icon_mail.svg) no-repeat center / 30px 30px;}
.pickup .modal-content > div .start .apply ul li.document a{ background: url(../img/icon_document.svg) no-repeat center / 30px 30px;}
.pickup .modal-content > div .start .apply ul li a:hover{ background-color: #dd0716;}
.pickup .modal-content > div .start .apply ul li.tel a:hover{ background-image: url(../img/icon_tel_on.svg);}
.pickup .modal-content > div .start .apply ul li.contact a:hover{ background-image: url(../img/icon_mail_on.svg);}
.pickup .modal-content > div .start .apply ul li.document a:hover{ background-image: url(../img/icon_document_on.svg);}
.pickup .modal-content > div .start .apply ul li p{ font: 500 13px/1.4 "heisei-kaku-gothic-std",sans-serif; color: #666; text-align: center;}
.pickup .modal-content > div .start .apply ul li p span{ display: block; font-size: 11px;}

.pickup .modal-content > div .start dl.detail{ margin: 30px 0 0 0; padding: 20px; background: #E5E5E5;}
.pickup .modal-content > div .start dl.detail > dt{ background: #dd0716; padding: 10px 0; font: 500 13px/1 "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center;}
.pickup .modal-content > div .start dl.detail > dd{ padding: 15px; background: #ffffff; overflow: hidden; position: relative;}
.pickup .modal-content > div .start dl.detail > dd > .map{ width: calc(100vw * 0.4); height: auto; position: absolute; top: 10px; left: 10px;}

.pickup .modal-content > div .start dl.detail > dd > dl{ width: 45%; margin: 0 0 5px 0; float: right;}
.pickup .modal-content > div .start dl.detail > dd > dl > dt{ padding: 10px 0 0; font: 500 12px/1.2 "heisei-kaku-gothic-std",sans-serif;}
.pickup .modal-content > div .start dl.detail > dd > dl > dt:first-of-type{ margin: 0; padding: 0;}
.pickup .modal-content > div .start dl.detail > dd > dl > dt::before{ content: "■";}
.pickup .modal-content > div .start dl.detail > dd > dl > dt span{ font-size: 12px;}
.pickup .modal-content > div .start dl.detail > dd > dl > dd{ margin: 3px 0 0 0; padding: 0 0 10px 0; border-bottom: solid 1px #ccc; font-size: 12px; line-height: 1.2;}
.pickup .modal-content > div .start dl.detail > dd > dl > dd:last-of-type{ border: none;}

.pickup .modal-content > div .start dl.detail > dd > .attention{ background: #f1f1f1; padding: 7px 15px 12px 15px; clear: both;}
.pickup .modal-content > div .start dl.detail > dd > .attention li{ margin: 5px 0 0 0; padding: 0 0 0 1em; font-size: 11px; line-height: 1.3; text-indent: -1em;}
.pickup .modal-content > div .start dl.detail > dd > .attention li::before{ content: "※"}

@media print, screen and (min-width:470px){
  .pickup .modal-content > div .start dl.detail > dd > .map{ width: calc(100vw * 0.35);}
  .pickup .modal-content > div .start dl.detail > dd > dl{ width: 55%;}
  .pickup .modal-content > div .start dl.detail > dd > .attention{ padding-left: 40px;}
}

@media print, screen and (min-width:555px){
  .pickup .modal-content > div .start dl.detail > dd > .map{ width: 195px;}
  .pickup .modal-content > div .start dl.detail > dd > dl{ width: calc(100vw - 195px - 110px);}
  .pickup .modal-content > div .start dl.detail > dd > .attention{ padding-left: 100px;}
}


@media print, screen and (min-width:681px){
  .pickup .modal-content{ width: 650px; left: 50%; transform: translateX(-50%);}
  .pickup .modal-content > div h4{ margin: 0 0 30px 0; font-size: 20px;}
  .pickup .modal-content > div .start h5{ margin-bottom: 30px; font-size: 22px;}
  .pickup .modal-content > div .start h5 span{ font-size: 16px;}
  .pickup .modal-content > div .start > p{ padding: 0 40px; font-size: 14px;}
  
  .pickup .modal-content > div .start .apply > p{ max-width: 290px; height: 40px; margin: 30px auto 0 auto; border-radius: 20px; font-size: 16px; line-height: 40px;}
  .pickup .modal-content > div .start .apply ul{ margin: 30px auto 0;}
  .pickup .modal-content > div .start .apply ul li a{ width: 80px; height: 80px; margin-bottom: 10px; border-width: 3px; border-radius: 40px;}
  .pickup .modal-content > div .start .apply ul li.tel a,
  .pickup .modal-content > div .start .apply ul li.contact a{ background-size: 40px 40px;}
  .pickup .modal-content > div .start .apply ul li p{ font-size: 16px; }
  .pickup .modal-content > div .start .apply ul li p span{ font-size: 12px;}
  
  .pickup .modal-content > div .start dl.detail{ padding: 30px;}
  .pickup .modal-content > div .start dl.detail > dt{ padding: 13px 0; font-size: 14px;}
  .pickup .modal-content > div .start dl.detail > dd{ padding: 30px;}
  .pickup .modal-content > div .start dl.detail > dd > .map{ width: 264px; height: 282px;}

  .pickup .modal-content > div .start dl.detail > dd > dl{ width: 270px;}
  .pickup .modal-content > div .start dl.detail > dd > dl dt{ padding-top: 18px; font-size: 15px;}
  .pickup .modal-content > di .startv dl.detail > dd > dl dt span{ font-size: 13px;}
  .pickup .modal-content > div .start dl.detail > dd > dl dd{ margin-top: 8px; padding-bottom: 18px; font-size: 14px; line-height: 1.3;}
  
  .pickup .modal-content > div .start dl.detail > dd > .attention{ margin: 30px 0 0 0; padding: 10px 20px 18px}
  .pickup .modal-content > div .start dl.detail > dd > .attention li{ font-size: 13px;}
}



/* form
**********************************************************************/
.pickup .modal-content > div .form{ display: none; margin: 20px 0 0;}
.pickup .modal-content > div .form h5{ background: #dd0716; max-width: 240px; height: 32px; margin: 20px auto; border-radius: 16px; font: 500 13px/32px "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center;}
.pickup .modal-content > div .form > p{ margin: 0 0 20px 0; padding: 0 20px; font-size: 13px; text-align: center;}
.pickup .modal-content > div .form > dl{ padding: 0 20px;}
.pickup .modal-content > div .form > dl > dt{ background: #f6f6f6; padding: 10px 15px; border-top: 1px solid #CACACA; position: relative; font-weight: bold;}
.pickup .modal-content > div .form > dl > dt span{ background: #be0716; padding: 5px 8px; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 10px; line-height: 1; color: #fff;}
.pickup .modal-content > div .form > dl > dd{ padding: 15px;}
.pickup .modal-content > div .form > dl > dd a{ color: #dd0716; text-decoration: underline;}
.pickup .modal-content > div .form > dl > dd a.zipbtn{ display: block; width: 100px; height: 40px; padding: 10px 0 0 0; background: #dd0716; font-size: 12px; color: #ffffff; text-align: center; text-decoration: none; border-radius: 4px; float: left;}
.pickup .modal-content > div .form > dl > dd .err{ color: #FF0004;}
.pickup .modal-content > div .form > dl > dd div{ margin: 0 0 10px; position: relative; overflow: hidden;}
.pickup .modal-content > div .form > dl > dd ul.half{ overflow: hidden;}
.pickup .modal-content > div .form > dl > dd ul.half li{ width: calc(50% - 5px); margin: 0 10px 0 0; float: left;}
.pickup .modal-content > div .form > dl > dd ul.half li:last-child{ margin: 0;}
.pickup .modal-content > div .form > dl > dd ul.triple{ overflow: hidden;}
.pickup .modal-content > div .form > dl > dd ul.triple li{ width: 70px; margin: 0 10px 0 0; float: left;}
.pickup .modal-content > div .form > dl > dd ul.triple li:last-child{ margin: 0;}
.pickup .modal-content > div .form > dl > dd ul li > strong{ display: block; margin: 0 0 5px 0;}
.pickup .modal-content > div .form > .errMessage{ display: none; width: calc(100% - 70px); margin: 0 auto 30px auto; padding: 15px 0; color: #FF0004; text-align: center; border: 2px solid #FF0004;}
@media print, screen and (min-width:681px){
  .pickup .modal-content > div .form h5{ max-width: 290px; height: 40px; margin: 30px auto; border-radius: 20px; font-size: 16px; line-height: 40px;}
  .pickup .modal-content > div .form > p{ margin: 0 0 30px 0; font-size: 14px;}
  .pickup .modal-content > div .form > dl{ display: flex; flex-wrap: wrap; width: calc(100% - 80px); margin: 0 40px; padding: 0; border-bottom: 1px solid #CACACA;}
  .pickup .modal-content > div .form > dl > dt{ width: 180px; padding: 25px 20px 0 20px;}
  .pickup .modal-content > div .form > dl > dt span{ margin: 0 0 0 5px; position: static; top: auto; right: auto; transform: none;}
  .pickup .modal-content > div .form > dl > dd{ width: calc(100% - 180px); border-top: 1px solid #CACACA;}
  .pickup .modal-content > div .form > dl > dd .err{ display: block;}
  .pickup .modal-content > div .form > dl > dd div{ margin: 0 0 3px 0;}
  .pickup .modal-content > div .form > dl > dd ul li > strong{ margin: 15px 0 5px 0;}
  .pickup .modal-content > div .form > dl > dd ul li:first-child > strong{ margin: 0 0 5px 0;}
}

.g-recaptcha{ margin: 0 0 30px 0;}
.g-recaptcha > div{ margin: 0 auto;}
@media print, screen and (min-width:681px){
  .g-recaptcha{ margin: 30px 0 0 0;}
}

/* placeholder */
.pickup .modal-content > div .form > dl > dd div .placeholder{ position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: #cccccc;}

/* input */
.pickup .modal-content > div .form input[type=text],
.pickup .modal-content > div .form input[type=email],
.pickup .modal-content > div .form input[type=tel],
.pickup .modal-content > div .form textarea{ -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 40px; border: solid 2px #ddd; border-radius: 0; font: 14px/1.5 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif";}
.pickup .modal-content > div .form input[type=text],
.pickup .modal-content > div .form input[type=email],
.pickup .modal-content > div .form input[type=tel]{ padding: 0 10px;}
.pickup .modal-content > div .form input[type=tel]{ width: calc(50% - 5px); margin: 0 10px 0 0; float: left;}
.pickup .modal-content > div .form textarea{ display: block; height: 150px; padding: 10px;}
.pickup .modal-content > div .form input[name=zipcode]{ width: calc(50% - 5px); margin: 0 10px 0 0; float: left;}
.pickup .modal-content > div .form input[name=car_age_y],
.pickup .modal-content > div .form input[name=car_age_m],
.pickup .modal-content > div .form input[name=car_shaken_m],
.pickup .modal-content > div .form input[name=car_shaken_y]{ width: 58px;}

.pickup .modal-content > div .form .no-hyphen{ line-height: 40px;}


/* select box */
.pickup .modal-content > div .form .select{ height: 40px; position: relative; z-index: 1; border: solid 2px #ddd; overflow: hidden;}
.pickup .modal-content > div .form .select::after{ content: ""; width: 0; height: 0; margin: 2px 0 0; border: 5px solid transparent; border-top-width: 7px; border-top-color: #be0716; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); z-index: -1;}
.pickup .modal-content > div .form select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; width: 130%; height: 36px; padding: 0 0 0 15px; border: none; border-radius: 0; font-size: 13px; cursor: pointer;}
@media print, screen and (min-width:681px){
  .pickup .modal-content > div .form .select{ width: calc(50% - 5px);}
}

/* check box */
.pickup .modal-content > div .form .checkbox{ display: inline-block; margin: 8px 0 0 0;}
.pickup .modal-content > div .form .checkbox input{ display: none; }
.pickup .modal-content > div .form .checkbox label{ display: block; padding: 0 0 0 25px; position: relative; font-size: 14px; line-height: 2; cursor: pointer;}
.pickup .modal-content > div .form .checkbox input + label::before{ content: ""; display: block; width: 14px; height: 14px; position: absolute; top: 3px; left: 0; border: #e5e5e5 3px solid;}
.pickup .modal-content > div .form .checkbox input:checked + label::after{ content: ""; display: block; width: 7px; height: 13px; position: absolute; top: 1px; left: 5px; border-right: 3px solid #dd0716; border-bottom: 3px solid #dd0716; transform: rotate(45deg); cursor: pointer;}

/* submit */
.pickup .modal-content > div ul.btns{ width: calc(100% - 70px); margin: 0 auto 30px auto; padding: 0 0 3px 0; overflow: hidden;}
.pickup .modal-content > div ul.btns li input,
.pickup .modal-content > div ul.btns li a{ display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #dd0716; width: 100%; height: 50px; padding: 0; border: none; font-weight: bold; font-size: 14px; line-height: 50px; color: #fff; text-align: center; cursor: pointer; border-radius: 4px; box-shadow: 0px 3px 0px 0px #A00A18; transition: .2s linear;}
.pickup .modal-content > div ul.btns li input[disabled]{ background: #dce0e0 !important; color: #999999 !important; box-shadow: 0px 3px 0px 0px #b3b3b3 !important; pointer-events: none;}
.pickup .modal-content > div ul.btns li input:not([disabled]):hover,
.pickup .modal-content > div ul.btns li a:hover{ transform: translateY(3px); box-shadow: none !important;}
.pickup .modal-content > div ul.btns li input[disabled]{ background: #ccc;}
.pickup .modal-content > div ul.btns.input li{ width: 100%; max-width: 200px; margin: 0 auto;}
@media print, screen and (min-width:681px){
  .pickup .modal-content > div ul.btns{ width: 260px; margin: 30px auto;}
}

/* preview */
.pickup .modal-content > div .preview{ display: none;}
.pickup .modal-content > div .preview h5{ background: #dd0716; max-width: 240px; height: 32px; margin: 20px auto; border-radius: 16px; font: 500 13px/32px "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center;}
.pickup .modal-content > div .preview > p{ margin: 0 0 20px 0; padding: 0 20px; font-size: 13px; text-align: center;}
.pickup .modal-content > div .preview > dl{ padding: 0 20px;}
.pickup .modal-content > div .preview > dl > dt{ background: #f6f6f6; padding: 10px 15px; border-top: 1px solid #CACACA; position: relative; font-weight: bold;}
.pickup .modal-content > div .preview > dl > dd{ padding: 15px;}
.pickup .modal-content > div .preview ul.btns li{ width: 48%; float: left;}
.pickup .modal-content > div .preview ul.btns li:first-child input{ background: #dce0e0 !important; color: #999999 !important; box-shadow: 0px 3px 0px 0px #b3b3b3 !important;}
.pickup .modal-content > div .preview ul.btns li:last-child{ float: right;}
@media print, screen and (min-width:681px){
  .pickup .modal-content > div .preview h5{ max-width: 290px; height: 40px; margin: 30px auto; border-radius: 20px; font-size: 16px; line-height: 40px;}
  .pickup .modal-content > div .preview > p{ margin: 0 0 30px 0; font-size: 14px;}
  .pickup .modal-content > div .preview > dl{ display: flex; flex-wrap: wrap; width: calc(100% - 80px); margin: 0 40px; padding: 0; border-bottom: 1px solid #CACACA;}
  .pickup .modal-content > div .preview > dl > dt{ width: 180px; padding: 15px 20px;}
  .pickup .modal-content > div .preview > dl > dd{ width: calc(100% - 180px); border-top: 1px solid #CACACA;}
  .pickup .modal-content > div .preview ul.btns{ width: calc(100% - 180px); margin: 30px auto;}
}

/* thanks */
.pickup .modal-content > div .thanks{ display: none;}
.pickup .modal-content > div .thanks h5{ background: #dd0716; max-width: 240px; height: 32px; margin: 20px auto; border-radius: 16px; font: 500 13px/32px "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center;}
.pickup .modal-content > div .thanks > p{ margin: 0 0 20px 0; padding: 0 35px; font-size: 13px; text-align: center;}
.pickup .modal-content > div .thanks > span{ display: block; width: calc(100% - 70px); margin: 0 auto 30px auto; padding: 15px 0; font-size: 13px; color: #666; text-align: center; border: 2px solid #CCC;}
.pickup .modal-content > div .thanks > ul.company{ width: calc(100% - 70px); margin: 0 auto 30px auto; padding: 10px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center;}
.pickup .modal-content > div .thanks > ul.company > li > a{ color: #333; text-decoration: underline; transition: color .2s linear;}
.pickup .modal-content > div .thanks > ul.company > li > a:hover{ color: #2e919e; text-decoration: none;}
.pickup .modal-content > div .thanks ul.btns li input{ background: #dce0e0 !important; color: #999999 !important; box-shadow: 0px 3px 0px 0px #b3b3b3 !important;}
@media print, screen and (min-width:681px){
  .pickup .modal-content > div .thanks h5{ max-width: 290px; height: 40px; margin: 30px auto; border-radius: 20px; font-size: 16px; line-height: 40px;}
  .pickup .modal-content > div .thanks > p{ margin: 0 0 25px 0; font-size: 14px;}
  .pickup .modal-content > div .thanks ul.btns{ width: 260px; margin: 30px auto;}
}


/* slick.js */
.slick-slide{ margin: 0 5px;}
.slick-prev,
.slick-next{ background: rgba(0,0,0,.6); width: 40px; height: 40px; z-index: 5; transition: background .2s linear;}
.slick-prev{ left: 0;}
.slick-next{ right: 0;}
.slick-prev:hover,
.slick-next:hover{ background: rgba(0,0,0,.9)!important;}
.slick-prev:focus,
.slick-next:focus{ background: rgba(0,0,0,.6);}
.slick-prev::before,
.slick-next::before{ content: ""; opacity: 1; width: 10px; height: 15px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.slick-prev::before{ background: url(../common/img/slide_prev.svg) no-repeat center / cover;}
.slick-next::before{ background: url(../common/img/slide_next.svg) no-repeat center / cover;}

@media print, screen and (min-width:681px){
  .slick-slide{ margin: 0 10px;}
  @media print, screen and (min-width:981px){ .slick-slide{ margin: 0 15px;} }
  .slick-prev,
  .slick-next{ width: 50px; height: 50px;}
}


/* banner
**********************************************************************/
.banner{ background: #fff; padding: 40px 16px;}
.banner ul{ display: flex; flex-wrap: wrap; margin: 0 0 -10px;}
.banner ul li{ width: calc(50% - 5px); margin: 0 10px 10px 0; border: solid 1px #dadada;}
.banner ul li:nth-child(even){ margin-right: 0;}
.banner ul li.spacer{ background: url(../img/banner_spacer.svg) no-repeat center/cover;}
.banner ul li a{ display: block;}
.banner ul li div{ background: #f7f7f7; padding: 5px; border-top: solid 1px #dadada; text-align: center; transition: background .2s linear;}
.banner ul li div p{ display: inline-block; position: relative; font-size: 13px; line-height: 1; color: #a1a1a1; transition: color .2s linear;}
.banner ul li a div p{ color: #666;}
.banner ul li a div p::before{ content: ""; background: url(../common/img/icon_external.svg) no-repeat 0 0 / cover; width: 9px; height: 8px; position: absolute; top: -2px; right: -13px;}

.banner ul li a.halfmax:hover div{ background: #009541;}
.banner ul li a.sevenmax:hover div{ background: #FFE600;}
.banner ul li a.noremax:hover div{ background: #c83180;}
.banner ul li a.jas:hover div{ background: #e40012;}
.banner ul li a.norikae:hover div{ background: #e64709;}
.banner ul li a.sapuri:hover div{ background: #990716;}
.banner ul li a.call:hover div{ background: #0071b4;}
.banner ul li a:hover div p{ color: #fff;}
.banner ul li a.sevenmax:hover div p{ color: #009541;}
.banner ul li a:hover div p::before{ background-image: url(../common/img/icon_external_on.svg);}
.banner ul li a.sevenmax:hover div p::before{ background-image: url(../common/img/icon_external2.svg);}
.banner ul li a.comingsoon{ pointer-events: none;}
.banner ul li a.comingsoon div p::before{ background: none;}
.banner ul li a.puchipochi:hover div{ background: #DE5518;}

@media print, screen and (max-width:430px){
  .banner ul li p span{ display: none; }
}

@media print, screen and (min-width:681px){
  .banner{ padding: 50px 0;}
  .banner ul{ width: 978px; margin: 0 auto;}
  .banner ul li{ width: 237px;}
  .banner ul li:nth-child(even){ margin: 0 10px 10px 0;}
  .banner ul li:nth-child(4n){ margin-right: 0;}
}


/* links
**********************************************************************/
.links li{ height: 0; padding-top: calc(300 / 600 * 100%); position: relative; overflow: hidden;}
.links li:first-child{ background: url(../img/links_img01.jpg) no-repeat center / cover;}
.links li:last-child{ background: url(../img/links_img02.jpg) no-repeat center / cover;}
.links li a{ display: block; background: rgba(46,145,158,.7); width: 38.667%; min-width: 150px; height: 100%; position: absolute; top: 0; right: 0; transition: background .2s linear;}
.links li a:hover{ background: rgba(46,145,158,.95);}
.links li a dl{ width: 120px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); color: #fff;}
.links li a dl dt{ font: 700 26px/1 "din-2014",sans-serif; letter-spacing: 1px; text-shadow: 0 0 5px #666;}
.links li:last-child a dl dt{ letter-spacing: 3px;}
.links li a dl dt span{ display: block; margin: 6px 0 0; font: 500 14px/1 "heisei-kaku-gothic-std",sans-serif; letter-spacing: 2px;}
.links li a dl dd{ margin: 20px 0 0; padding: 8px; border: solid 1px #fff; font-size: 13px; line-height: 1; text-align: center;}

@media print, screen and (min-width:681px){
  .links{ overflow: hidden;}
  .links li{ width: 50%; padding-top: calc(300 / 600 * 50%); float: left;}
  .links li a dl{ width: 154px;}
  .links li a dl dt{ font-size: 35px; letter-spacing: 0;}
  .links li a dl dt span{ margin: 8px 0 0; font-size: 16px;}
}