@charset "utf-8";

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

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

  /*——————————————————————
  メインBOX指定
  ——————————————————————*/
  .entry._01{
    width: 100%;
    padding: 0 4%;
  }

  .inner._02{
    top: -10%;
  }

  .item_flex._a{
    display: block;
  }
  .inner._01{
    margin: 0 calc(0% - 30vw);
  }

  /*———————————————————————————————
  動画バックの箇所(height: 
  200vhにすると希望した箇所まで動画が伸びる)
  ————————————————————————————————*/

  .element._02{
    height: 200vh;
  }

  .element._02 video{
    height: 200vh;
  }

  /*——————————————————————
  トップ項目エリア SP
  ——————————————————————*/
  .h1_title img{
    width: auto;
    height: auto;
  }

  .moji_box._01{
    width: 70%;
  }

  .pic._01{
    width: 100%;
  }

  .itemss._a{
    width: 70%;
  }

  .works{
    width: 86%;
    justify-content: center;
    gap: 3rem;
  }
  
  .title-setup{
    text-align: center;
  }

  .moji_box._05{
    font-size: 1.3rem;
    line-height: 2.2rem;
  }

  .voice-area{
    margin: 0 auto;
    width: 54rem;
    gap: 4rem;
  }

  .works_etc._a{
    width: calc((100% - 4rem) / 2);
  }
  

  .display_flex-r{
    display: block;
  }

  .tohoku-jido-info{
    width: 100%;
    text-align: left;
  }

  .button-moji{
    width: 40rem;
  }

  .foot-back-ime{
    height: 100%;
  }
  
}

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

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

  .display_flex,.sp-only_01{
    display: block;
  }

  /*——————————————————————
  メインBOX指定
  ——————————————————————*/

  .field._01,.entry._01,.entry._02,.entry._03{
    width: 100%;
  }

  .entry._01{
    padding: 0 4%;
  }

  
  .inner._01{
    margin: 0 calc(0% - 4vw);
    border-radius: 0rem;
  }

  .inner._02{
    top: -4%;
  }

  .inner._03{
    top: 47.8rem;
    margin: 0 calc(16% - 0vw);
  }

  .topic{
    width: 80%;
  }


  /*——————————————————————
  トップ項目エリア以下 SP
  ——————————————————————*/

  #first-view_bg {
    background-image: url(../img/top/first-view_sp.jpg);
  }

  .h1_title{
    width: 80%;
    height: auto;
    display: flex;
    align-items: center;
  }

  .item_flex._a{
    margin: 0 auto;
    width: 80%;
  }

  .moji_box._01,.itemss._a{
    width: 100%;
  }

  .moji_box._02{
    width: 60%;
  }

  .works{
    width: 100%;
  }

  .pic._02 img,.pic._03 img,.pic._05 img{
    width: 100%;
    height: auto;
  }

  .pic._04 img{
    width: 42.8rem;
  }

  .shift-area{
    width: 100%;
    gap: 2rem;
  }

  .under-banner{
    height: 16rem;
  }

  .button-moji{
    width: 32rem;
  }

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

  .title-fonts._01{
    font-size: 2.8rem;
  }

  .item_flex._b{
    display: block;
    width: 68%;
  }

  .youtube-box{
    width: 100%;
    height: 50rem;
  }

  .positions._a{
    width: 68%;
  }

  /*——————————————————————
  footer_SP
  ——————————————————————*/

  footer{
    width: 100%;
  }
  

  /*--------------------------
  display:none
  ---------------------------*/

  .global_menu,.abc_icon.pc-only,.sp-only_02,.mail_form,.header_inner.open .fs-logo,.pick_up_article,.tower{
    display: none;
  }

  .foot-back-ime{
    display: none;
  }

  .pc-only{
    display: none !important;
  }

}

  /*——————————————————————————————————————————————————————
  ————————————————————————————————————————————————————————
  以下の文言で幅600以下で一定の条件を満たしたアイテムすべて半分になる
  ————————————————————————————————————————————————————————
  ———————————————————————————————————————————————————————*/
  @media only screen and (max-width: 600px) {
    html {
      font-size: 50%;
    }

    .inner._03{
      top: 44.1rem;
    }

    .pic._04 img{
      width: 38.8rem;
    }

    .sp-only_02{
      display: block;
    }

    
    .icon_arrow2{
      background-size: 24px;
    }
    

    .button-moji{
      padding: 2rem;
      width: 30rem;
    }

    .youtube-box{
      width: 100%;
      overflow: hidden;
    }

  
    .icon_arrow{
      background-size: 24px;
    }

    .moji_hover p{
      font-size: 1.6rem;
    }

    .moji_hover._a p{
      text-shadow: 0 -4em 0 rgba(255, 255, 255, 1), 0 0 0 rgba(255, 255, 255, 1);
    }
    
    .itemss:hover .moji_hover._a p{
      text-shadow: 0 0 0 rgba(226, 70, 75, 1), 0 4em 0 rgba(226, 70, 75, 1); /* 2つの影の位置を上方向に1.5emずつずらす */
    }
    
  }

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

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

    .sp-only_02{
      display: block;
    }

    .inner._03{
      top: 41.2rem;
      margin: 0 calc(14% - 0vw);
    }

    .pic._04 img{
      width: 34.8rem;
    }

    .benefits-icon-box{
      margin-left: 4rem;
      gap: 2rem;
    }

    .benefits-icon img{
      width: 8rem;
    }

    .shift-area{
      display: block;
      width: 60%;
    }

    @keyframes UpAni {
      from {
        bottom: 18rem;
      }
      to {
        bottom: 32.8rem;
      }
    }
  
    @keyframes DownAni {
      from {
        bottom: 32.8rem;
      }
      to {
        bottom: 18rem;
      }
    }

  }

  @media screen and (max-width:479px){
    .entry._01._a{
      padding: 0 14%;
    }
  
    .entry._03{
      width: 80%;
    }

    .moji_box._06{
      font-size: 1.8rem;
    }

    .title-fonts{
      font-size: 5.8rem;
    }

    .button-moji{
      width: 26rem;
    }

    .moji_hover p,.moji_hover._a p{
      font-size: 1.5rem;
    }

    .title-fonts._01{
      font-size: 2.1rem;
    }

    .item_flex._b{
      display: block;
    }

    .youtube-box{
      width: 100%;
    }

    .voice-area{
      width: 100%;
    }

    .works_etc._a{
      margin: 0 auto;
      width: 80%;
    }

    .page_top{
      bottom: 4rem;
    }
  }

  @media screen and (max-width:400px){
    .moji_hover._a{
      padding: 1.6rem;
    }
    .moji_hover p{
      font-size: 1.4rem;
    } 

    .circle-o{
      left: 1rem;
    }

    .button-moji{
      padding: 1rem;
      width: 24rem;
    }

    .button-moji p{
      letter-spacing: 0;
    }
    
  }

  @media screen and (max-width:375px){
      html {
        font-size: 40%;
      }

      .icon_arrow2{
        background-size: 19px;
      }
  
  }