@charset "utf-8";

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

@media screen and (max-width: 1000px) {
  .space._12 {
    height: 16rem;
  }
  .moji_box {
    font-size: 14px;
  }
  .titless {
    font-size: 16px;
    line-height: 1.6;
  }
  .comments {
    font-size: 14px;
    line-height: 1.8;
  }
  .youtube-title-a,
  .youtube-title-b {
    font-size: 14px;
    padding: 5px;
  }
  /*
  .pic._03 {
    top: 68px;
  }
  */
  .inner._03 {
    height: 33rem;
  }
  .pic._05 p {
    font-size: 14px;
  }
  .benefits-icon-box {
    margin-left: 4rem;
    gap: 2rem;
    width: calc(100% - 12rem);
  }
  .benefits-icon img {
    width: 10rem;
  }
  /*——————————————————————
  メイン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%;
    margin-top: 5rem;
  }

  .itemss._a {
    width: 70%;
  }

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

  .title-setup {
    text-align: center;
  }

  .moji_box._05 {
    font-size: 14px;
    line-height: 2.4rem;
  }

  .moji_box._05 span{
    font-size: 18px;
  }

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

  .works_etc {
    width: 38.6rem;
    height: auto;
    padding: 0 0 16px;
  }
  .works_etc._a {
    width: calc((100% - 4rem) / 2);
  }

  .display_flex-r {
    display: block;
  }

  .tohoku-jido-info{
    margin: 0 auto;
    width: 80%;
  }

  .tohoku-jido-info._a {
    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: 40.8rem;
    margin: 0 calc(16% - 0vw);
  }

  .topic {
    width: 90%;
  }

  .space._12._a{
    height: 0;
  }

  /*——————————————————————
  トップ項目エリア以下 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: 90%;
  }

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

  .moji_box._02 {
    width: 75%;
  }

  .works {
    width: 100%;
  }

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

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

  .pic._02 .info-sp img{
    width: 100%;
    height: auto;
  }

  .sp-img{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .info-sp {
    width: calc((100% - 2rem) / 2);
    text-align: center;
  }


  .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: 38.6rem;
  }

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

  .positions._a {
    width: 80%;
  }

  /*——————————————————————
  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: 38.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.8rem;
  }

  .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,.max-width {
    display: block;
  }

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

  .pic._04 img {
    width: 100%;
  }

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

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

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

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

  .moji_box._01,.moji_box._02{
    font-weight: 400;
  }

  .moji_box._05,.comments{
    font-weight: 300;
  }

  .moji_box._05 span{
    font-weight: 500;
  }

  .min-width{
    display: none;
  }

  .benefits-icon-box._a{
    flex-flow: column;
    width: 100%;
    margin-left: 0;
    margin: 0 auto;
  }
  
  .moji_box._10 span{
    font-size: 18px;
    font-weight: 500;
  }

  .moji_box._10{
    text-align: center;
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    padding: 0 15px 0 0;
  }

  .pic._05 p{
    font-size: 16px;
  }

}

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

  .entry._03 {
    width: 84%;
  }

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

  .button-moji {
    width: 26rem;
  }

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

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

  .item_flex._b {
    display: block;
  }

  .youtube-box {
    width: 100%;
  }

  .voice-area {
    width: 100%;
  }

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

  .page_top {
    bottom: 4rem;
  }
}

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

  .circle-o {
    left: 1rem;
  }

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

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

  .moji_box._05 span{
    font-size: 16px;
  }

  .moji_box._05{
    font-size: 13px;
  }
}

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

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