@charset "utf-8";

/*--------------------------------------
このbase_formatはmax-width:885pxメインと
なっているがレスポンシブは基本は下記サイズから
@media screen and (max-width:767px)
---------------------------------------*/
@media screen and (max-width: 767px) {

  .inner._05{
    width: 100%;
  }

  .border._02{
    width: 100%;
  }

  h1{
    font-size: 5.8rem;
  }

  .h1_etc{
    line-height: 7rem;
  }

  .h1_etc p{
    line-height: 9rem;
    font-size: 2rem;
  }

  h2{
    letter-spacing: 0rem;
  }

  .inner._02,.inner._04{
    width: 100%;
  }

  /*————————————————————————————————
  ナビゲーション設定
  —————————————————————————————————*/
  
    
  /*navタブにopen classがついた時の動作*/
  .header_inner.open{
    overflow-y: auto;
    height: 100%;
  }

  .navArea.display_flex{
    align-items: initial;
  }

  .header_inner.open .global_menu{
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    top: 12rem;
  }
  
  .header_inner .global_menu.UpMove{
    transition: 0s;
    display: none;/*0509*/
  }

  .global_menu.UpMove, .toggle_btn.pc-only.UpMove {
    animation: UpAnime 0s forwards;
}
  
  /*————————————ここまで————————————*/

  .global_menu{
    position: fixed;
    min-width: 100%;
    margin-left: 0;
  }

  .global_menu.DownMove{
    animation: none;
  }
  
  .header_nav{
    display: block;
    width: 100%;
  }

  .header_nav li a:after{
    background: none;
  }
  
  /*0116復活*/
  .navArea{
  padding: 1rem;
  }

  
  .header_inner.open .navArea{
    background: none;
    /*justify-content: center;*/
  }

  .fs-logo.sp-only_01{
    text-align: center;
  }

  .logo{
    top: 2rem;
  }

  .gnavi_back{
    top: -8rem;
  }
  
  /*————————————————————————————
  ハンバーガー トグル形状とアクション
  ————————————————————————————*/
  .toggle_btn.sp-only_01{
    position: fixed;
    width: 6rem;
    height: 6rem;/*高さ必ず指定してタップ領域確保*/
    display: block;
    top: 2.4rem;
    right: 2.4rem;
    transition: .3s;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 1);
    border: solid rgba(25, 19, 17, 1)1.6px;
    border-radius: 3rem;
    cursor: pointer;
    outline: none;
    filter: drop-shadow(0px 0px 5px White);
  }

  .btn01{
    width: 100%;
    height: 2.2rem;
    /*margin-top: 4rem;*/
    padding: 0 1.2rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .toggle_btn span {
    display: block;
    /*position: absolute;*/
    left: 0;
    /*width: 32px;*/
    height: 2px;
    background-color: rgba(25, 19, 17, 1);
    transition: .4s;
    cursor: pointer;
    z-index: 9999;
  }

  .toggle_btn.open span {
    background-color: rgba(25, 19, 17, 1);
  }

  .toggle_btn.open span:nth-child(1) {
    -webkit-transform: translateY(1.2rem) rotate(30deg);
    transform: translateY(1.0rem) rotate(30deg);
  }
  .toggle_btn.open span:nth-child(2) {
    opacity: 0;
  }
  .toggle_btn.open span:nth-child(3) {
    -webkit-transform: translateY(-1.2rem) rotate(-30deg);
    transform: translateY(-1.0rem) rotate(-30deg);
  }
  /*————————————ここまで————————————*/

  .mask {
    display: none;
    position: fixed;
  }
  .open .mask {
    margin: 0 auto;
    display: block;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 157, 228, 1);
    border-left: none;
    z-index: -2;
  }
  
  .header_inner.open .global_menu.UpMove{
    position: fixed;
    min-width: 0;
    width: 100%;
    animation: none;
    display: block;/*0509*/
  }
  
  .header_inner.open .header_nav{
    display: block;
    top: 2.6rem;
  }
  
  .header_inner.open .menu{
    border-left: none;
    display: block;
    /*padding-top: 6rem;*/
  }


  .header_nav li a{
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 1), 0 0 0 rgba(255, 255, 255, 1);
  }
  
  .header_inner.open .menu:last-child{
    border-right: none;
  }

  .header_inner.open .fs-logo.pc-only{
    display: block!important;
    text-align: center;
    height: 100%;
    top: -12rem;
  }

  .header_inner.open .fs-logo.sp-only_01{
    opacity: 0;
  }

  
  /*----------------------------
  ナビゲーション上下のボーダー設定
  ナビゲーション文字 天地左右スペース設定
  -----------------------------*/

  .header_nav li{
    height: auto;
  }

  
  .header_nav li a{
    font-size: 2rem;
    display: block;
    text-align: center;
  }

  .header_nav li .link_li::after{
    margin-left: 2.4rem;
  }

  
  li.menu{
    padding: 2.8% 0;
  }

  li.menu a{
    padding: 0 10%;
  }

  li.menu a.close{
    /*padding-bottom: 4%;*/
  }

  li.menu.aco_moji a{
    padding: 0 4%;
  }

  li.menu ul.child_menu{
    width: 100%;
    padding: 0;
    position: initial;
    background: none;
    border: none;
    opacity: 1;
  }

  
  li.menu ul.child_menu > li{
    display: table;
    cursor: pointer;
    /*border-bottom: 1px solid #B7B7B7;*/
    width: 100%;
    padding: 3% 4%;
  }

  li.menu ul.child_menu > li:last-child{
    border-bottom: 0;
    padding-bottom: 0;
  }



  .mail_form._sp{
    margin: 0 auto;
    font-size: 2rem;
    width: 24rem;
    height: 4.2rem;
    margin-top: 2rem;
    text-align: center;
    border: solid rgba(255, 255, 255, 1) 1px;
    background: none;
  }

  .mail_form._sp a{
    color: rgba(255, 255, 255, 1);
  }

  .mail_form._sp:hover{
    background: rgba(255, 255, 255, 1);
  }

  .mail_form._sp:hover a{
    color: rgba(0, 157, 228, 1);;
  }




  
/*-------------------------------------------
.entry,.innerは.field._01等で指示した幅(高)に対し
色・写真等の配置、paddingの指定をする
-------------------------------------------*/



  .event_width{
    width: 100%;
  }

  .pickup{
    padding: 0 4%;
  }

  .event{
    width: calc((100% - 6rem) /3);
  }

  .pickup::after{
    display: block;
    content: '';
    width: calc((100% - 6rem) /3);
  }



  
  .pc-only.DownMove,.toggle_btn.pc-only.UpMove{
    display: none !important;
  }

  .global_menu,.top_word{
    display: none;
  }

/*——————————————————————
display: block;
——————————————————————*/

  .no-section,
  .display_flex,
  .sp-only_01 /*0116復活*/ {
    display: block;
  }

  .entry._01,
  .entry._02,
  .entry._04,
  .entry._05,
  .inner._01 {
    width: 100%;
    padding: 0 3%;
  }

  /*0108*/
  .entry._01.works{
    padding: 0 5%;
  }

  .inner._01{
    padding: 0 5%;
  }

  /*0108*/
  .inner._07 {
    padding: 0;
  }

  .sp-only_01{
    text-align: center;
  }

/*——————————————————————
ファーストビュー エリア
——————————————————————*/
.h1_etc{
  text-align: center;
}

.title_box{
  right: 0;
  height: 76%;
}

.title_box_in{
  justify-content: center;
}

.swiper_boxs{
  width: 100%;
  height: 38%;
  bottom: 0;
}

.swiper{
  border-radius: 0;
  height: 100%
}

/*——————————————————————
————————————————————————
KBIとはエリア
————————————————————————
——————————————————————*/

.office_kbi, .inner_words{
  width: 100%;
}

/*——————————————————————
————————————————————————
私たちの仕事 エリア 2
————————————————————————
——————————————————————*/

  .list-wrapper{
    background-image: url(../img/top/work_back_sp.jpg);
    background-position: center center;
    background-size: cover;
    position: relative;
    width: 100%;
    padding: 20% 10%;
  }

  .kbi_works{
    width: 100%;
    text-align: center;
  }

  .number{
    margin: 0 auto;
  }

  .no-scroll-item{
    padding: 14% 0;
  }

  .kbi_works .m_mojis{
    text-align: left;
  }
  

/*——————————————————————
————————————————————————
お知らせ エリア
————————————————————————
——————————————————————*/


  .info_texts{
    margin-top: 2rem;
    width: 100%;
  }

/*——————————————————————
————————————————————————
ご相談 エリア
————————————————————————
——————————————————————*/

  .consultation{
    font-size: 2.8rem;
  }

  .mail_box{
    width: 100%;
  }

  .moji_hover._a._01 p {
    font-size: 1.6rem;
  }
  
  .moji_hover._a p,.moji_hover._b p{
    text-shadow: 0 -2.5em 0 rgba(255,255,255,1), 0 0 0 rgba(255,255,255,1);
  }


/*——————————————————————
footer_SP
——————————————————————*/
.f_bottom_right{
  gap: 3rem;
}

  .f_field {
    width: 100%;
    text-align: center;
  }

  .f_front_top{
    width: 100%;
  }

  .f_nav{
    text-align: left;
  }

  .f_nav li{
    padding: 1rem 0;
  }

  .f_nav_nav{
    line-height: 3rem;
  }

  .f_front._a{
    display: flex;
    justify-content: center;
  }
  

  /*--------------------------
  display:none
  ---------------------------*/
  .sp-only_02,
  .tohoku.izumi,
  .tohoku.komatusima
  {
    display: none;
  }
  .side-scroll.section,
  .pc-only {
    display: none !important;
  }

  .h1_title._02 h1 {
    font-size: 4.6vw;
  }

/*——————————————————————————————————
————————————————————————————————————
以下 下層ページ
————————————————————————————————————
——————————————————————————————————*/
/*——————————————————————
————————————————————————
下層 KBIとは
————————————————————————
——————————————————————*/
.philosophy{
  flex-flow: column;
  align-items: center;
}

.tab_top{
  margin: 0;
  display: block;
}

.philo{
  width: 28rem;
}

.item_left,.item_left._a,.item_left._b{
  width: 100%;
}

.tables_item td{
  display: block;
}

.tables_item tr{
  text-align: center;
  border-bottom: solid rgba(62, 62, 62, 1) 1px;
}

.item_left{
  border-bottom: dotted rgba(62, 62, 62, 1) 1px;
  height: 5rem;
}

.item_left,.item_right{
  padding: 1rem;
}

/*——————————————————————
————————————————————————
印刷設備
————————————————————————
——————————————————————*/
.pers_p, .pers_wo{
  width: 100%;
}

.item_left._b{
  text-align: center;
  padding: 1.5rem;
}

.item_left._b{
  line-height: 2rem;
}

.item_right._a{
  line-height: 0rem;
  padding: 2rem;
}

/*——————————————————————
————————————————————————
個人情報保護方針
————————————————————————
——————————————————————*/
  .pupo{
    width: 12rem;
  }

/*——————————————————————
————————————————————————
下層 リクルート
————————————————————————
——————————————————————*/
.header_inner .global_menu.UpMove{
  transform: none;
}

.title_box_re{
  justify-content: center;
}

.h2_etc_p{
  font-size: 5rem;
}

.h2_etc_p._2{
  font-size: 2rem;
}

.h2_etc._a.__anima .h2_etc_p{
  top: -15.6rem;
}

.h2_etc._b.__anima .h2_etc_p{
  top: -1.6rem;
}

.h2_etc._c.__anima .h2_etc_p{
  top: 5rem;
}

.h2_etc._d.__anima .h2_etc_p{
  top: 8.4rem;
}

.h2_etc._e.__anima .h2_etc_p{
  top: 11.8rem;
}

.recruit_icon{
  top: 52%;
  width: 14rem;
  height: 14rem;
}

.recruit_icon p{
  font-size: 1.6rem;
  line-height: 2.6rem;
}

h2._a{
  font-size: 3.5rem;
}

.side_a{
  width: 100%;
}

.side_main{
  text-align: center;
}

.side_main._a p{
  text-align: left;
}

.tab_area._a {
  width: 100%;
  padding: 0 1rem;
}

.tab_area li {
  width: calc((100% - 5rem) / 4);
}

.tab_area li a {
  padding: 1.2rem ;
  font-size: 1.4rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*—————————天地反転————————*/
.interview._a{
  display: flex;
  flex-direction: column;
}

.side_a._01{
  order: 2;
}

.side_a._02{
  order: 1;
}



/*——————————————————————
————————————————————————
下層 私たちの仕事 エリア
————————————————————————
——————————————————————*/

.work_text {
  width: 100%;
}

.work_inner{
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
}

.work_illust{
 /* height: 100%;*/
  margin: 0 auto;
 /* width: 100%;
  margin-top: 0;*/
}

.work_illust._a {
  margin-top: 0;
}

.work_illust._un{
  order: 2;
}

.work_illust._w{
  width: 90%;
}

/*0110追加*/
.slid_con {
  height: 88rem;
  padding: 5rem;
}

/*SP イラスト下揃え*/
.work_img._b{
  height: 80rem;
  margin-top: 5rem;
}

.work_inner._b{
  flex-grow: 1;
}
/*
.work_illust._small{
  width: 80%;
}
*/

/*——————————————————————
————————————————————————
下層 制作実績 エリア
————————————————————————
——————————————————————*/

ul.panels.works {
  padding: 0 12%;
}

.group-item.works li{
  margin: 0 auto;
  margin-bottom: 4rem;
  width: 100%;
}

.group-item.works li:last-of-type{
  margin-bottom: 0;
}

.work_ph {
  width: 100%;
}

.tab_area._a.works {
  width: 100%;
}

.tab_area.works li {
  width: calc((100% - 3.6rem) / 3);
}




}

@media only screen and (max-width: 600px) {
  html {
    font-size: 50%;
  }
}


@media only screen and (max-width: 458px){
  h2{
    font-size: 4rem;
  }
}


@media only screen and (max-width: 375px){

  .h2_etc_p{
    font-size: 3.8rem;
  }

  .h2_etc_p._2 {
    font-size: 1.8rem;
  }

  .h2_etc._a.__anima .h2_etc_p{
    top: -8.6rem;
  }

  .h2_etc.__anima .h2_etc_p{
    top: -3.5rem;
  }

  .h2_etc._b.__anima .h2_etc_p{
    top: 1.6rem;
  }

  .h2_etc._c.__anima .h2_etc_p{
    top: 7rem;
  }

  .h2_etc._d.__anima .h2_etc_p{
    top: 10rem;
  }

  .h2_etc._e.__anima .h2_etc_p{
    top: 13.1rem;
  }

}