@charset "UTF-8";
/*--------------------------
ニュース：news SP
-------------------------- */
#news section{
  display: flex;
  flex-direction: column;
  padding: 5rem 1.5rem;
}
#news section h2{
  width: auto;
}
#news .news-in{
  width: auto;
}
#news .news-in dl{
  padding: 1rem 0;
  border-bottom: 1px solid #ccc;
}
#news .news-in dl:first-child{
  padding: 0 0 1rem;  
}
#news .news-in dl:last-of-type{
  margin: 0 0 2rem;
}
#news .news-in dl dt,#news .news-in dl dd{
  padding: 1rem 0;
  font-size: 1.5rem;
  font-family: 'Roboto', sans-serif;
}
#news .news-in dl dt span:first-child{
  padding: 0 1.5rem 0 0;
}
#news .news-in dl dt span:last-child{
  padding: 0.2rem;
  text-align: center;
  font-size: 1.2rem;
}
/* topics */
#news section .news-in dl dt span.icon-topics{
  color: #0cb59b;
  border: 1px solid #0cb59b;
}
/* event */
#news section .news-in dl dt span.icon-event{
  color: #ff8300;
  border: 1px solid #ff8300;
}
/* seminar */
#news section .news-in dl dt span.icon-sem{
  color: #06f;
  border: 1px solid #06f;
}
/* 新着:new */
#news section .news-in dl dt.newmark::before{
  content: "NEW";
  width: 80px;
  margin: 0 5px 0 0;
  padding: 0 5px;
  color: #fff;
  background: #c00;
  font-size: 1.3rem;
}
#news section .news-in dd{
  padding: 0 1rem 0 0;
}
#news section .news-in dd a{
  text-decoration: underline;
}
#news section .news-in dd strong {
  display: block;
  font-weight: bold;
  padding-bottom: 1rem;
}
#news section .news-in dd figure {
  margin-top: 1rem;
}

/* 新着 過去イベント用
-------------------------*/
#news section .news-in dd.event-2020003 figure {
  margin-bottom: 10px;
}
#news section .news-in dd.event-2020003 figure a {
  display: block;
  width: auto;
  height: 0;
  padding-top: 130px;
  background: url("../event/ev202003/images/btn-event-200307_off.png") no-repeat;
  overflow: hidden;
}
#news section .news-in dd.event-2020003 figure a:hover {
  background: url("../event//ev202003/images/btn-event-200307_on.png") no-repeat;
}
#news section .news-in dd.event-2020003 span{
  display: block;
}

/*--------------------------
事業内容：services SP
-------------------------- */
#services .services-bg{
  background: url(../images/bg-alogo.png);
}
#services section{
  padding: 5rem 1.5rem 3.5rem;
}
#services section h2 + p{
  padding: 2rem 0 4rem;
  line-height: 2;
  font-size: 1.5rem;
}
#services section h2 + p span{
  display: block;
  padding: 1rem 0 0;
}
#services section h2 + p span strong{
  font-weight: bold;
  color: var(--or);
}
#services section h2 + p br{
  display: none;
}
#services .content{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
}
#services .content article{
  width: auto;
  margin: 0 0 1.5rem;
  padding: 3rem 2rem;
  border-radius: 1rem;
  background: #fff;
  position: relative;
}
#services .content article > p{
  width: 5rem;
  height: 5rem;
  padding: 0.8rem 0 0;
  border-right: 1px dashed #000;  
  position: absolute;
  left: 2rem;
  top: 3rem;
}
#services .content article > p img{
  display: block;
}
#services .content article:first-child > p img{width: 2.5rem;}
#services .content article:nth-child(2) > p img{width: 3rem;}
#services .content article:nth-child(3) > p img{width: 2.8rem;}
#services .content article:last-child > p img{width: 3.2rem;}

#services .content article div{
  padding: 0;
}
#services .content article div h3{
  padding: 0 0 0 7rem;
  line-height: 1.5;
  font-size: 2.1rem;
  font-weight: bold;
}
#services .content article div h3 span{
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--or);
}
#services .content article div h3 + p{
  padding: 2rem 0 0;
  border-left: 0;
  font-size: 1.4rem;
}
#services .content article div h3 + p br{
  display: none;
}

#services .content article div ol{
  padding: 2rem 0 0;
  border-left: 0;
}
#services .content article div ol li{
  margin: 0 0 0.3rem;
  padding: 0 0 0 1.5rem;
  font-size: 1.4rem;
  position: relative;
}
#services .content article div ol li::before{
  display: block;
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  background: var(--or);
  position: absolute;
  top: 10px;
  left: 0;
}

/*--------------------------
制作実績：works SP
-------------------------- */
#works section{
  padding: 5rem 0;
}
#works section h2{
  padding: 0 1.5rem;
}

/* 実績 SP
----------------------------- */
#works .works-slick-pc{
  display: none;
}
#works .works-slick{
  display: block;
  margin: 0 0 5rem;
  padding: 3rem 0;
  background: #f8f8f8;
}
#works .works-slick div{
  padding: 0 1rem;
}
#works .works-slick div a{
  display: block;
}
#works .works-slick div a figure{
  max-width: auto;
  padding: 0;
  text-align: center;
  background: #fff;
}
@media screen and (min-width:480px) {
  #works .works-slick div a figure{
    max-width: 48rem;
    padding: 1rem 0;
  }
}
@media screen and (min-width:640px) {
  #works .works-slick div a figure{
    max-width: 60rem;
  }
}
#works .works-slick div a figure span{
  display: block;
  max-width: 27.6rem;
  margin: 0 auto;
}

/* サイトカテゴリ SP ---------------- */
#works .works-slick div a p{
  padding: 1rem 0.5rem;
  color: var(--or);
  font-size: 1.3rem;
  font-weight: bold;  
  position: relative;
}
#works .works-slick div a p.works-new{
  padding: 1rem 0 1rem 5rem;
}
#works .works-slick div a p span{
  display: block;  
  width: 4rem;
  line-height: 1.5;
  border-radius:2px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  background: #c00;
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 10;
}


/* 会社名 SP ---------------- */
#works .works-slick div a h3{
  line-height: 1.5;
  padding: 0 0.5rem 2rem;
  font-size: 1.6rem;
}
#works .works-slick div a h3 span{
  font-size: 1.4rem;
}
#works .works-slick div a h3::after{
  content: "様";
  color: #333;
  font-size: 1.4rem;
  font-weight: normal;
  padding-left: 0.5em;
}

/* 作業広告 SP ---------------- */
#works .works-slick div a ol{
  display: flex;
  flex-wrap: wrap;
  font-size: 1.2rem;  
}
#works .works-slick div a ol li{
  border-radius: 2px;
  margin: 0 0.5rem 0.2rem 0;
  padding: 0.5rem 1rem;
  background: #fff;
}
#works .works-slick div a ol li.ad{
  background: #ffd9bf;
}


/*--------------------------
流れ+予算：flow SP
-------------------------- */
.flow-bg{
  background: #f8f8f8;
  padding: 5rem 1.5rem;
}

/* 流れ 共通 SP 
--------------------- */
.flow article{
  margin: 0 0 3rem;
  padding: 3rem 2rem 0;
  border-radius: 1rem;
  background: #fff;
  font-size: 1.5rem;
}
.flow article p.flow-no{
  width: 4.2rem;
  height: 4.2rem;
  margin: 0 auto 1rem;
  padding: 0.2rem 0 0;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--or);
  color: var(--or);
  font-size: 2.1rem;
  font-weight: bold;
}
.flow article p.flow-no.flow-noph{
  padding: 0.2rem 0 0;
}
.flow article h3{
  margin: 0 0 2rem;
  text-align: center;
  font-size: 2.1rem;
  font-weight: bold;
}
.flow article h3 span{
  display: block;
  color: var(--or);  
  font-size: 1.2rem;
  letter-spacing: 1px;
}

/* 流れ 01コンサルティングのみ SP
------------------------------------ */
.flow article.flow-consul{
  display: flex;
  flex-direction: column;  
}
.flow article.flow-consul div{
  width: auto;
  padding: 0;
  position: static;
}

/* 流れ 01 イラスト SP ------ */
.flow-img01_sp{
  display: block;
  max-width: 52rem;
  margin: 0 auto;
  padding: 3rem 0 0;
}
.flow-img01_pc{
  display: none;
}

.flow article.flow-consul ol{
  padding: 1.5rem 0 0.5rem;
}
.flow article.flow-consul ol li{
  margin: 0 0 1rem;
  padding: 0 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  position: relative;
}
.flow article.flow-consul ol li span{
  color: var(--or);  
}
.flow article.flow-consul ol li::before{
  display: block;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--or);
  position: absolute;
  top: 1rem;
  left: 0;
}
.flow article.flow-consul ol + p span{
  display: block;
  padding: 0.5rem 0 0;
}

/* 流れ 02-04 SP
----------------------------- */
.flow-content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flow-content article{
  width: auto;
  padding: 3rem 2rem 18rem;
  position: relative;
}
.flow-content article p.flow-img{
  margin: 0 auto;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
.flow-content article p.flow-img span{
  display: block;
  margin: 0 auto;
  padding: 0 2rem;
}
.flow-content article:first-child p.flow-img span{  
  max-width: 26rem;
}
.flow-content article:nth-child(2) p.flow-img span{ 
  max-width: 23rem;
}
.flow-content article:last-child p.flow-img span{ 
  max-width: 35rem;
}

/*--------------------------
費用：fee SP
-------------------------- */
.fee section{
  display: flex;
  flex-direction: column;
  padding: 2rem 0 0;
}
.fee section h2{
  width: auto;
}
.fee-in{
  width: auto;
  padding: 0;
}
.fee-in > p{
  padding: 0 0 3rem;
}
.fee-in > p span{  
  font-size: 1.5rem;
  color: var(--or);
}
.fee-in h3{
  width: 16rem;
  margin: 0 auto 2rem;
  text-align: center;
  border-bottom: 3px dotted var(--or);
  font-weight: bold;
}

/* 予算表 SP ---------------- */
.fee-in dl{
  display: flex;
  align-items: center;
  margin: 0 0 1rem;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  background: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}
.fee-in dl dt{
  width: 64%;  
  line-height: 1.5;
  border-right: 1px dotted #666;
}
.fee-in dl dt span{
  display: block;
  font-size: 1.4rem;
}
.fee-in dl dd{
  width: 36%;
  padding: 0 0 0 2rem;
}
.fee-in dl + p{
  line-height: 1.6;
  font-size: 1.3rem;
}

/*--------------------------
他コンテンツ：other SP
-------------------------- */
.other-content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-top: 1px solid #ccc;  
  border-bottom: 1px solid #ccc;
}
.other-content p{
  width: auto;
  padding: 0 1rem;
}
.other-content p:first-child{
  margin: 0 0 2rem;
}


/*--------------------------
アクセス：access SP
-------------------------- */
#access section{
  padding: 5rem 0 0;
}
#access section h2{
  margin: 0 0 3rem;
}
#access .access-info{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 1.5rem 2rem;
  font-size: 1.5rem;
}
#access .access-info h2,
#access .access-info div{
  width: auto;
  padding: 0;
}
#access .access-info div{
  border-left: 0;
}
#access .access-info div p{
  padding: 1rem 0 0;
}
#access .access-info div p span a,
#access .access-info div p span strong{
  padding: 0 1rem;
  font-weight: normal;
}

/* googlemap SP ----------- */
.map {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;    /*16:9の比率にしたい場合、9/16=56.25%*/
}
.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*------------------------------------------------------
TB768
------------------------------------------------------*/
@media screen and (min-width:768px) {

  /*--------------------------
  事業内容：services TB
  -------------------------- */
  #services .content{
    flex-direction: row;
  }
  #services .content article{
    width: 49%;
  }

  /*--------------------------
  制作実績：works TB
  -------------------------- */
  #works .works-slick{
    display: none;
  }
  #works .works-slick-pc{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 1.5rem;
  }
  #works .works-slick-pc div{
    width: 48%;
    margin: 0 0 3rem;
  }
  #works .works-slick-pc div a{
    display: block;
  }
  #works .works-slick-pc div a figure{
    padding: 2rem 0;
    text-align: center;
    background: #f8f8f8;
  }
  #works .works-slick-pc div a p{
    padding:1rem 0.5rem 0;
    color: var(--or);
    font-size: 1.3rem;
    font-weight: bold;
    position: relative;
  }
  #works .works-slick-pc div a p.works-new{
    padding:1rem 0 0 5rem; 
  }
  #works .works-slick-pc div a p span{
    display: block;  
    width: 4rem;
    line-height: 1.5;
    border-radius:2px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    background: #c00;
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 10;
  }

  #works .works-slick-pc div a h3{
    padding: 0 0.5rem 1.5rem;
    line-height: 1.5;
    font-size: 1.6rem;
  }
  #works .works-slick-pc div a h3::after{
    content: "様";
    color: #333;
    font-size: 1.4rem;
    font-weight: normal;
    padding-left: 0.5em;
  }
  #works .works-slick-pc div a h3 span{
    font-size: 1.4rem;
  }  

  #works .works-slick-pc div a ol{
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2rem;  
  }
  #works .works-slick-pc div a ol li{
    border-radius: 2px;
    margin: 0 0.5rem 0.2rem 0;
    padding: 0.5rem 1rem;
    background: #f5f5f5;
  }
  #works .works-slick-pc div a ol li.ad{
    background: #ffd9bf;
  }

  /*--------------------------
  流れと予算：flowall TB
  -------------------------- */

  /* 流れ 共通 TB 
  --------------------- */
  .flow article{
    padding: 3rem 5rem 0;
  }

  /* 流れ 02-04 TB
  ----------------------------- */
  .flow-content article{
    padding: 3rem 5rem 22rem;
  }

  /*--------------------------
  費用：fee TB
  -------------------------- */
  .fee-in{
    padding: 0 5rem;
  }

  /*--------------------------
  他コンテンツ：other TB
  -------------------------- */
  .other-content{
    flex-direction: row;
    padding: 3rem 0;    
  }
  .other-content p{
    width: 49%;
    padding: 0;
  }
  .other-content p:first-child{
    margin: 0;
  }


  /*--------------------------
  アクセス：access TB
  -------------------------- */
  #access section h2{
    margin: 0;
  }
  #access .access-info{
    flex-direction: row;
    padding: 0 1.5rem 4rem;
  }
  #access .access-info h2{
    width: 30%;
  }
  #access .access-info div{
    width: 68%;
    padding: 1rem 2rem;
    border-left: 1px solid #ccc;
  }
  #access .access-info div p{
    padding: 0.2rem 0 0;
  }
  #access .access-info div span{
    display: inline;
    padding:0.5rem;
  }
  /* googlemap TB ----------- */
  .map {
    padding-top: 30.25%; 
  }

}


/*------------------------------------------------------
PC 1000
------------------------------------------------------*/
@media screen and (min-width:1000px) {
  /*--------------------------
  ニュース：news SP
  -------------------------- */
  #news section{
    flex-direction: row;
  }
  #news section h2{
    width: 20%;
  }
  #news .news-in{
    width: 80%;
  }
  #news .news-in dl{
    padding: 1.5rem 0;
  }
  #news .news-in dl:first-child{
    padding: 0 0 1.5rem;  
  }

  /*--------------------------
  事業内容：services 1000
  -------------------------- */
  #services section h2 + p span{
    padding:0;
  }

  #services .content article > p{
    width: 5rem;
    height: auto;
    padding: 0.8rem 0 0;
    border-right: 0;  
    left: 2rem;
    top: 3rem;
  }
  #services .content article:first-child > p img{width: 3.5rem;}
  #services .content article:nth-child(2) > p img{width: 4rem;}
  #services .content article:nth-child(3) > p img{width: 4.4rem;}
  #services .content article:last-child > p img{width: 4rem;}

  #services .content article div{
    padding: 0 0 0 7rem;
  }
  #services .content article div h3{
    padding: 0 0 0 3rem;
    line-height: 1.5;
    font-size: 2.4rem;
    border-left: 1px dashed #333;  
  }
  #services .content article div h3 + p{
    padding: 1rem 0 0 3rem;
    line-height: 2;
    border-left: 1px dashed #333;  
    font-size: 1.6rem;
  }
  #services .content article div ol{
    padding: 1rem 0 0 3rem;
    border-left: 1px dashed #333;  
  }
  #services .content article div ol li{
    font-size: 1.6rem;
  }

  /*--------------------------
  実績 1000
  -------------------------- */
  #works .works-slick-pc{
    padding: 0 0.5rem 3rem;
  }
  #works .works-slick-pc div{
    width: 23%;
    margin: 0;
  }  
  #works .works-slick-pc div a figure{
    padding: 0;
    text-align: center;
    background: transparent;
  }

  /*--------------------------
  流れと予算：flowall 1000
  -------------------------- */
  .flow-bg{
    padding: 8rem 1.5rem;
  }

  /* 流れ 共通 1000 
  --------------------- */
  .flow article{
    margin: 0 0 5rem;
    padding: 5rem 2rem;
    font-size: 1.6rem;
  }
  .flow article p.flow-no{
    width: 5rem;
    height: 5rem;
    font-size: 2.4rem;
  }
  .flow article h3{
    font-size: 2.4rem;
  }

  /* 流れ 01コンサルティングのみ 1000
  ------------------------------------- */
  .flow article.flow-consul{
    flex-direction: row;
  }
  .flow article.flow-consul div:first-child{
    width: 40%;
    padding: 6% 0 0;
    position: relative;
  }
  .flow article.flow-consul div:last-child{
    width: 60%;
    padding: 0 5rem;
  }
  /* 流れ 01 イラスト 1000 ------ */
  .flow-img01_sp{
    display: none;
  }
  .flow-img01_pc{
    display: block;
    width: 100%;
    padding: 0 2rem;  
    position: absolute;
    bottom: -50px;
    left: 0;
  }

  /* 流れ 02-04 1000
  ----------------------------- */
  .flow-content{
    flex-direction: row;
  }
  .flow-content article{
    width: 30%;
    padding: 5rem 2rem 20rem;
  }
  .flow-content article:last-child{
    width: 36%;
  }

  /*--------------------------
  費用：fee 1000
  -------------------------- */
  .fee section{
    flex-direction: row;
    padding: 4rem 0 0;
  }
  .fee section h2{
    width: 20%;
  }
  .fee-in{
    width: 80%;
    padding: 0;
  }
  .fee-in h3{
    margin: 0 0 2rem;
    font-size: 1.6rem;
  }
  /* 予算表 1000 ---------------- */
  .fee-in dl{
    padding: 2rem 3rem;
    border-radius: 1rem;
    font-size: 1.8rem;
  }
  .fee-in dl dt{
    width: 60%;  
  }
  .fee-in dl dt span{
    display: inline;
    font-size: 1.8rem;
  }
  .fee-in dl dd{
    width: 40%;
    padding: 0 0 0 4rem;
  }
  .fee-in dl + p{
    font-size: 1.4rem;
  }

  /*--------------------------
  アクセス：access 1000
  -------------------------- */
  #access section{
    padding: 8rem 0 0;
  }
  #access .access-info h2{
    width: 24%;
  }
  #access .access-info div{
    width: 74%;
    padding: 0.5rem 2rem 1rem;
    font-size: 1.6rem;
  }
  #access .access-info div p{
    padding: 0.2rem 0 0;
  }
  #access .access-info div span{
    display: inline;
    padding:0.5rem;
  }
  /* googlemap 1000 ----------- */
  .map {
    padding-top: 24.25%; 
  }

}

/*------------------------------------------------------
PC 1200
------------------------------------------------------*/
@media screen and (min-width:1200px) {
  /*--------------------------
  流れと予算：flowall 1200
  -------------------------- */

  /* 流れ 01コンサルティングのみ 1200
  ------------------------------------- */
  .flow article.flow-consul div:first-child{
    padding: 0;
  }
  .flow article.flow-consul div:last-child{
    padding: 0 8rem 0 5rem;
  }
  .flow article p.flow-no.flow-noph{
    padding: 0.4rem 0 0 0.2rem;
  }

}

/*------------------------------------------------------
PC 1400
------------------------------------------------------*/
@media screen and (min-width:1400px) {
  /*--------------------------
  ニュース：news 1400
  -------------------------- */
  #news section{
    padding: 8rem 0;
  }
  #news .news-in dl dt,#news .news-in dl dd{
    font-size: 1.6rem;
  }

  /*--------------------------
  事業内容：services 1400
  -------------------------- */
  #services section{
    padding: 8rem 0 6.5rem;
  }
  #services section h2 + p{
    padding: 0 0 5rem;
    line-height: 1.4;
    font-size: 1.8rem;
  }
  #services section h2 + p span{
    padding:1rem 0 0;
  }
  #services .content article div h3 + p br{
    display: block;
  }


  /*--------------------------
  制作実績：works 1400
  -------------------------- */
  #works .works-slick-pc{
    padding: 0 0 3rem;
  }
  #works .works-slick-pc div a h3{
    padding: 1.5rem 0.5rem;
  }


  /*--------------------------
  流れ：flow 1400
  -------------------------- */
  .flow-bg{
    padding: 8rem 0;
  }

  /* 流れ 02-04 1400
  ----------------------------- */
  .flow-content article{
    padding: 5rem 2.5rem 20rem;
  }

  
}