@charset "utf-8";

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl{
  padding-right: 5%;
  padding-left: 5%;
}
/* color scheme */
:root {
  --adpia-color-blue:#20a3d9;
  --color-whith:#fff;
}
html{scroll-behavior: smooth;}
body {
  font-family: 'Poppins', 'Noto Sans JP',sans-serif;
}
a:hover{
  opacity: .5;
  text-decoration: none;
/*  display: inline-block; */
}
img{width: 100%;}

main#main h2 {
  font-family: din-2014, sans-serif; 
}
#main p{
  margin-bottom: 0;
  line-height:1.8;
}
.btn_dft a {
  background-color: var(--adpia-color-blue);
  color: var(--color-whith);
  padding: 5px 1rem;
  letter-spacing: 2px;
  display: inline-block;
}

/*------------
header
------------*/
header{
  background-color: var(--adpia-color-blue);
  color: var(--color-whith);
}
header div#bs-navi{
  background-color: var(--adpia-color-blue);
}

header  .navbar-light .navbar-nav .nav-link{
  color: var(--color-whith);
}
header h3{
  margin-bottom: 0;
  font-weight:bold;
}
header .catch__box h3{
  font-family: din-2014, sans-serif;
  letter-spacing:5px;
}
header .catch__box p{
  font-family: a-otf-gothic-mb101-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height:2;
}
/* nav固定 */
nav {transition: 0.5s all ease;}
nav.navFix {position: fixed;width:100%;padding:0 15% 0 0 !important;top: 0;z-index: 2147483638; transition: 0.5s all ease;background-color:var(--adpia-color-blue);}
nav.navFix div#toplogo img {width:50%;transition: 0.5s all ease;}

/*下層header*/
#topics header,#topics_detail header,#finish header,#contact header,#policy header.{
  background-image: none;
  padding-bottom: 52px;
}
#topics .topics__list{
  margin-top: 155px;
}

@media screen and (max-width:767px) {
  /*　画面サイズが767px以下の場合読み込む　*/
  h2 {font-weight:600;}
  header{
    background: var(--adpia-color-blue) url(../img/sp_top_ribbon-01.png) no-repeat bottom / cover;
  }
  header .navbar{
    padding: 0;
    padding-top:25px;
  }
  header .navbar .navbar-collapse .navbar-nav > li:nth-child(6),header .navbar .navbar-collapse .navbar-nav > li:nth-child(7){
    display: none;
  }
  header .navbar .navbar-collapse .navbar-nav > li:last-of-type{
    display: block!important;
  }
  header .navbar .navbar-collapse .navbar-nav > li:last-of-type .navbar-nav__sp_nav-sns{
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 20px;
  }
  header .navbar .navbar-collapse .navbar-nav > li:last-of-type .navbar-nav__sp_nav-sns li:last-child{
    margin-left: 1rem;
  }
  header .navbar .navbar-collapse .navbar-nav > li:last-of-type .navbar-nav__sp_nav-sns li a{
    color: var(--color-whith);
  }
  header .navbar .navbar-collapse .navbar-nav > li:last-of-type .navbar-nav__sp_nav-sns li img{
    width:80%;
  }
  header #toplogo{
    width: 39%;
  }
  header .navbar-light .navbar-toggler{
    border:none;
  }
  .navbar-light .navbar-toggler-icon{
    background-image:url("../img/toggler-icon.svg")
  }
  header .catch__box{
    padding: 105px 0 160px;
  }
  header h3{
    font-size: 1.25rem;
    line-height: 2.75em;
  }
}
@media screen and (min-width:768px){
  /*　画面サイズが768px以上の場合読み込む　*/
  header{
    background: var(--adpia-color-blue) url(../img/pc_top_ribbon-01.png) no-repeat bottom / 100%
  }
  header .navbar{
    padding: 3rem 0 0;
  }
  header ul.navbar-nav li.nav-item {
    padding:10px;
  }
  header ul.navbar-nav li.pc {
    padding:0;
  }
  header .navbar .navbar-collapse .navbar-nav {
    align-items: center;
  }
  header .navbar .navbar-collapse .navbar-nav li:nth-of-type(6) a{
    width: 3.25rem;
    height: auto;
  }
  header .navbar .navbar-collapse .navbar-nav li:nth-of-type(7) a{
    width: 3.4rem;
    height: auto;
  }
  header .navbar .navbar-collapse .navbar-nav > li:last-of-type{
    display: none!important;
  }
  header .catch__box{
    padding: 7.5em 0 13em;
  }
  header h3{
    font-size: 2.4rem;
    line-height: 2.25em;
  }
}
/*------------
footer
------------*/
footer>div:first-child{
  color: var(--color-whith);
  background-color: var(--adpia-color-blue);
}
footer img{
  display: inline-block;
}
footer div#footerPolicy{
  padding-left:0;
}
footer .commonFooter__dtl--privacy--pc a,footer .commonFooter__dtl--privacy--sp a{
  color: var(--color-whith);

}
footer img#footerLogoPng {
  max-width:210px;
}

footer>div:last-child ul{
  padding: 0 0 0 1.25rem;
  padding: 25px 0 22px 3.75rem;
  position: relative;
}

footer>div:last-child ul::after{
  position: absolute;
  display: inline-block;
  content: "";
  width: 42px;
  height: 42px;
  background: url(../img/mark.png) no-repeat 0 / contain;
  top: 25%;
  left: 330px;
}
footer>div:last-child ul li{
  border-right: 1px solid var(--adpia-color-blue);
}
footer>div:last-child ul li:first-child{
  margin-right: 0;
}
footer>div:last-child ul li a{
  color: var(--adpia-color-blue);
  padding: 0 1rem 0 0;
}
footer>div:last-child ul li:nth-of-type(2) a{
  padding: 0 1rem 0 1rem;
}
@media screen and (max-width:767px) {
    /*　画面サイズが767px以下の場合読み込む　*/
  footer>div:first-child{
    margin-top: 130px;
    padding: 90px 1.25rem 140px;
    background: var(--adpia-color-blue) url(../img/sp_ribbon-04.png) no-repeat bottom left / 100%;
  }

  footer .commonFooter__dtl--sp_flex a{
    display: inline-block;
  }
  footer .commonFooter__dtl--sp_flex{
    display: flex;
    flex-wrap: nowrap;
  }
  footer .commonFooter__dtl--sp_flex > div{
    width: 35.5%;
  }
  footer .commonFooter__dtl--sp_flex > dl{
    width: 57%;
    margin-left: 1.5em;
  }
  footer .commonFooter__map{
    margin-top: 40px;
  }
  footer .commonFooter__dtl .commonFooter__dtl--sp_sns{
    margin-top: 30px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width:80%;
  }
  footer .commonFooter__dtl .commonFooter__dtl--sp_sns li{
    width: calc((100% - 10px) / 2);
  }
  footer .commonFooter__dtl .commonFooter__dtl--sp_sns li:first-of-type{
    margin-right: .75em;
  }
  footer .commonFooter__dtl .commonFooter__dtl--pc_sns,  footer .commonFooter__dtl--privacy--pc{
    display: none;
  }
  footer .commonFooter__dtl--privacy--sp{
    display: block;
    font-size: .7rem;
  }
  footer>div:last-child ul::after{
    width: 25px;
    height: 25px;
    top: 30%;
    left: 240px;
  }
  footer>div:last-child ul{
    padding: 25px 0 22px 0;
  }
  footer>div:last-child ul li a{
    font-size: 0.75rem;
  }
  footer>div:last-child ul li a{
    padding: 0 0.5rem 0 0;
  }
  footer>div:last-child ul li:nth-of-type(2) a{
    padding: 0 0.5rem 0 0.5rem;
  }
}
@media screen and (min-width:768px){
  footer>div:first-child{
    margin-top: 130px;
    padding: 45px 0;
    background: var(--adpia-color-blue) url(../img/pc_ribbon-05.png) no-repeat bottom left / contain;
    padding-right: 5%;
    padding-left: 5%;
  }
  footer .commonFooter__dtl > div:first-of-type{
    margin-left: 10rem;
  }
  footer .commonFooter__dtl dl{
    margin-top: 30px;
  }
  footer .commonFooter__dtl dl dt{
    font-weight: lighter;
  }
  footer .commonFooter__dtl .commonFooter__dtl--pc_sns{
    display: flex;
    align-items: center;
  }
  footer .commonFooter__dtl .commonFooter__dtl--pc_sns li:first-of-type{
    margin-right: .75em;
  }
  footer .commonFooter__dtl .commonFooter__dtl--sp_sns, footer .commonFooter__dtl--privacy--sp{
    display: none;
  }
  footer .commonFooter__dtl--privacy--pc{
    margin: 30px 0 0;
    display: block;
  }
  footer>div:last-child ul{
    padding: 0 0 0 1.25rem;
    padding: 25px 0 22px 0;
  }
  footer>div:last-child ul li:first-child{
    margin-right: 0;
  }
  footer>div:last-child ul li a{
    color: var(--adpia-color-blue);

  }
}
/*------------
main
------------*/
#main div.container-fluid{overflow: hidden;}

#main section + section{
  padding-top: 250px;
}
#main section h2,#main section p{
  color: var(--adpia-color-blue);
}
#main section h2{
  position: relative;
}
#main section h2::after{
  content: '';
  width: 120px;
  height: 3px;
  display: inline-block;
  background-color: var(--adpia-color-blue);
  position: absolute;
  bottom: -10px;
  left: calc(50% - 60px)
}
p.arrow-box{
  display: inline-block;
  margin: 50px 1em 0 0;
  font-family: din-2014, sans-serif;
}
p.arrow-box a{
  background-color: var(--adpia-color-blue);
  color: var(--color-whith);
  padding: 2px 1em;
  display: inline-block;
  position: relative;
}
p.arrow-box a::after{
  content: "";
  position: absolute;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 12px solid  var(--adpia-color-blue);
  right: -12px;
  top: 0px;
}
@media screen and (max-width:767px) {
  /*　画面サイズが767px以下の場合読み込む　*/
  #main section .container-fluid{
    padding-right: 2%;
    padding-left: 2%;
    overflow: hidden;
  }
  #main section .container-fluid .row{
    margin-right: 0;
    margin-left: 0;
  } 
  #main section + section{
    padding-top: 145px;
  }
  #main section h2{
    font-size: 1.25rem;
    margin-bottom: 50px;
  }
  #main section h2::after{
    width: 70px;
    left: calc(50% - 35px);
  }
  #main section:first-of-type{
    margin-top: 130px;
  }
  section .pc{
    display: none!important;
  }
}
@media screen and (min-width:768px){
  /*　画面サイズが768px以上の場合読み込む　*/
  #main section:first-of-type{
    padding-top: 200px;
  }
  #main section h2{
    font-size: 2.4rem;
  }
  #main section h2{
    margin-bottom: 30px;
  }
  section .pc{
    display: block!important;
  }
}

/*
TOPICS
------------*/

#main #topics ul li{
  background-color: var(--adpia-color-blue);
  color:var(--color-whith);
  /*padding: 45px 2em;*/
}
#main #topics ul li{
  height: auto;
  transition: transform .1s ease; /* ゆっくり変化させる */
}
#main #topics ul li:hover{
  transform: scale(1.05);
}
#main #topics ul li a{
  display: block;
  padding: 20px 2em;
}
#main #topics ul li .topics-card p{
  color:var(--color-whith);
}
#main #topics ul{
  margin: auto;
  display: flex;
  flex-wrap: nowrap;
}
@media screen and (max-width:767px) {
  /*　画面サイズが767px以下の場合読み込む　*/
  #main #topics ul{
    width: 100%;
    flex-wrap: wrap;
  }
  #main #topics ul li{
    width: calc((100% - 10px) / 2);
  }
  #main #topics ul li a{
    padding: 10px .75em;
  }
  #main #topics ul li:nth-child(even){
    margin-left: .5em;
  }
  #main #topics ul li:nth-child(n+3){
    margin-top: 20px;
  }
  #main #topics .topics-card p:last-of-type{
    margin-top: 10px;
    line-height: 20px;
  }
}
@media screen and (min-width:768px){
  /*　画面サイズが768px以上の場合読み込む　*/
  #main #topics {
    background: url(../img/pc_top_ribbon-02.png) no-repeat top / 100%;
  }
   #main #topics ul{
    width: 85%;
  }
  #main #topics ul li{
    width: calc((100% - 60px) / 3);
    /*padding: 45px 2em;*/
  }
  #main #topics ul li:nth-of-type(2){
    margin-left: 2em;
  }
  #main #topics ul li:nth-of-type(3){
    margin-left: 2em;
  }
  #main #topics .topics-card p:last-of-type{
    margin: 20px 0 0;
  }
  #main #topics ul li.pc_non{
    display:none !important;
  }
}

/*
ABOUT
------------*/

@media screen and (max-width:767px) {
  /*　画面サイズが767px以下の場合読み込む　*/
  #main #about {
    background: url(../img/sp_ribbon-02.png) no-repeat top / 100%;
  }

}
@media screen and (min-width:768px){
  /*　画面サイズが768px以上の場合読み込む　*/
  #main #about {
    padding-top: 390px;
    background: url(../img/pc_ribbon-03.png) no-repeat top / 100%;
  }
  }

/*
SERVICE
------------*/

#main #service .service-pc__list ul li div{
  background-color: var(--adpia-color-blue);
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 999;
}
#main #service ul li span{
  color: var(--color-whith);
}
#main #service .service__text{
  margin-top: 15px;
}
@media screen and (max-width:767px) {
  /*　画面サイズが767px以下の場合読み込む　*/
  #main #service .service-sp__list ul.service-sp__list--top li:first-child{
    margin-right: 1.25em;
  }
  #main #service .service-sp__list ul.service-sp__list--bottom li:not(:last-of-type){
    margin-right: 1.25em;
  }
  #main #service .service-sp__list ul li div{
    background-color: var(--adpia-color-blue);
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 999;
    width: 89px;
    height: 89px;
    line-height: 89px;
  }
  #main #service .service-sp__list ul.service-sp__list--top {
    position: relative;
    background: url(../img/service-sp_bg-top.png) no-repeat bottom / 100%;
  }
  #main #service .service-sp__list ul.service-sp__list--top li:first-of-type span div::before {
    content: "";
    position: absolute;
    background: url(../img/sp_service_ppl-01.png) no-repeat;
    height: 87px;
    width: 100%;
    top: 0;
    z-index: 9;
    left: -1.25em;
    background-size: contain;
}
#main #service .service-sp__list ul.service-sp__list--bottom{
  position: relative;
  background: url(../img/service-sp_bg-bottom.png) no-repeat bottom / 100%;
  margin-top: 55px;
  padding-bottom: 1.5vh;
}
  #main #service .service-sp__list ul.service-sp__list--top li:nth-of-type(2) span::after {
    content: "";
    position: absolute;
    background: url(../img/sp_service_ppl-02.png) no-repeat;
    height: 98px;
    width: 25vw;
    top: 0;
    z-index: 9;
    left: 50%;
    background-size: contain;
    transform: translate(19vw,-2vw);
}
#main #service .service-sp__list ul.service-sp__list--bottom li:first-of-type span div::before {
  content: "";
  position: absolute;
  background: url(../img/sp_service_ppl-03.png) no-repeat;
  height: 75px;
  width: 100%;
  bottom: -30px;
  z-index: 9;
  left: 2em;
  background-size: contain;
}
#main #service .service-sp__list ul.service-sp__list--bottom li:nth-of-type(2) span div::before {
  content: "";
  position: absolute;
  background: url(../img/sp_service_ppl-04.png) no-repeat;
  height: 75px;
  width: 100%;
  bottom: -30px;
  z-index: 9;
  left: 4.25em;
  background-size: contain;
}
#main #service .service-sp__list ul.service-sp__list--bottom li:last-of-type span::after {
  content: "";
  position: absolute;
  background: url(../img/sp_service_ppl-05.png) no-repeat;
  height: 98px;
  width: 25vw;
  top: 0;
  z-index: 9;
  left: 50%;
  background-size: contain;
  transform: translate(29vw,-2vw);
}
#main #service .service__text{
  margin-top: 25px;
}
}
@media screen and (min-width:768px){
  /*　画面サイズが768px以上の場合読み込む　*/
  #main section#service h2{
    margin-bottom: 140px;
  }
  #main #service .service-pc__list ul li:not(:last-of-type){
    margin-right: 40px;
  }
  #main #service .service-pc__list ul {
    background: url(../img/service-pc_bg.png) no-repeat bottom / 100%;
    height: 180px;
    position: relative;
  }
  #main #service .service-pc__list ul li{
    /*width: calc((100% - 160px) / 5);*/
    width: 172px;
    height: 172px;
    line-height: 172px;
  }
  .service-pc__list ul li:first-of-type{
    position: relative;
  }
  .service-pc__list ul li:first-of-type span div::before {
    content: "";
    position: absolute;
    background: url(../img/pc_service_ppl-01.png) no-repeat;
    height: 168px;
    width: 100%;
    top: -25px;
    z-index: 9;
    left: -2.5em;
}
  .service-pc__list ul li:nth-of-type(2){
    position: relative;
  }
  .service-pc__list ul li:nth-of-type(2)::after {
    content: "";
    position: absolute;
    background: url(../img/pc_service_ppl-02.png) no-repeat;
    height: 173px;
    width: 70%;
    top: -28px;
    z-index: 9;
    left: 8em;
  }
  .service-pc__list ul li:nth-of-type(3){
    position: relative;
  }
  .service-pc__list ul li:nth-of-type(3) span div::before {
    content: "";
    position: absolute;
    background: url(../img/pc_service_ppl-03.png) no-repeat;
    height: 145px;
    width: 100%;
    bottom: -30px;
    z-index: 9;
    left: 5em;
  }
  .service-pc__list ul li:nth-of-type(4){
    position: relative;
  }
  .service-pc__list ul li:nth-of-type(4) span div::before {
    content: "";
    position: absolute;
    background: url(../img/pc_service_ppl-04.png) no-repeat;
    height: 164px;
    width: 50%;
    bottom: -30px;
    z-index: 9;
    right: -3em;
  }
  .service-pc__list ul li:last-of-type{
    position: relative;
  }
  .service-pc__list ul li:last-of-type span::after {
    content: "";
    position: absolute;
    background: url(../img/pc_service_ppl-05.png) no-repeat;
    height: 170px;
    width: 7rem;
    top: -28px;
    z-index: 9;
    right: -3rem;
  }





}



/*
WORK
------------*/
@media screen and (max-width:767px) {
  /*　画面サイズが767px以下の場合読み込む　*/


}
@media screen and (min-width:768px){
  #main #work .work__slider-box{
    margin-top: 45px;
  }
}
/*
RECRUIT
------------*/

#main #recruit .recruit_messege-box p{
  color: var(--color-blue);
  background-color: var(--color-white);
}
@media screen and (max-width:767px) {
  /*　画面サイズが767px以下の場合読み込む　*/
  #main #recruit {
    padding-top: 145px;
    /* background: url(../img/sp_ribbon-03.png) no-repeat top / 100%; */
  }
  #main #recruit .recruit_messege-box{
    padding: 10px 1.25em;
  }

}
@media screen and (min-width:768px){
  /*　画面サイズが768px以上の場合読み込む　*/
  #main section#recruit h2{
    margin-bottom: 70px;
  }
  #main #recruit .recruit_messege-box{
    padding: 40px 2.5em 50px;
  }
}

/* smartphone */
@media (max-width: 576px) {

}

/* Tablet */
@media (max-width: 768px) {}

/* PC */
@media (min-width: 992px) {}

/* PC Extra Large */
@media (min-width: 1200px) {

}