@charset "utf-8";

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

}


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

  body{
    background-image: url(../img/common/back_sp.png);
    background-size: cover;
    background-repeat: repeat;
    background-attachment: fixed;
  }

  h2{
    font-size: 2rem;
    line-height: 4rem;
    letter-spacing: 1rem;
  }

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

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

  .field._01{
    padding: 0 2rem;
  }

  .field._01,.inner._01{
    width: 100%;
    text-align: center;
  }

  .field._02{
    background-image: url(../img/top/features_bg_sp.jpg);
  }

  .field._03{
    background-image: none;
    position: relative;
  }

  .field._03:before {
    content: '';
    display: inline-block;
    width: 100%;/*画像の幅*/
    height: 28rem;/*画像の高さ*/
    background-image: url(../img/common/footer_bg_sp.jpg);
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    z-index: -1;
    top:-3.5rem;
  }

  .inner._02{
    width: 96rem;
    height: 55rem;
    padding: 2rem 0;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .inner._03 {
    padding: 0 2.6rem;
  }

  .entry._01,
  .entry._04,.entry._05,
  .inner._04,
  .text_box,.form_text,
  .filaria_text,.inner._05{
    width: 100%;
    text-align: left;
  }

  .entry._03,.form_item
  {
    width: calc(100% - 4rem);
    margin: 0 auto;
  }

  .pic img{
    width: 100%;
    height: auto;
  }

  .btn_base{
    background:rgba(230, 77, 14, 1.0);
  }

  .info_button{
    background: rgba(255, 255, 255, 1.0);
  }

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

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

  /*————————————————————————————————
  2023.1010 修正
  —————————————————————————————————*/

  .header_inner.open .global_menu{
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    position: absolute;
    top: 12rem;
  }

  /*————————————ここまで————————————*/

  .global_menu{
    min-width: 100%;
    margin-left: 0;
  }
  
  .header_nav{
    display: block;
    width: 100%;
  }

  .header_nav li a:after{
    background: none;
  }

  .navArea{
    padding: 1rem;
    height: 6.4rem;
  }

  .logo img{
    width: 21.1rem;
  }

  
  .mask {
    display: none;
    position: fixed;
    transition: all 0.3s ease-in-out;
    z-index: 999;
  }
  .open .mask {
    margin: 0 auto;
    display: block;
    top: 0;
    width: 100%;
    height: 100vh;
    background-image: url("../img/common/bg_02_sp.png");
    z-index: -1;
  }

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

  /*——————————————————————
  ハンバーガー トグル形状とアクション
  ——————————————————————*/
  .toggle_btn {
    position: absolute;
    width: 6.4rem;
    height: 6.4rem;/*高さ必ず指定してタップ領域確保*/
    display: block;
    top: 0;
    right: 0;
    transition: .3s;
    z-index: 9999;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
  }

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

  .toggle_btn span {
    display: block;
    /*position: absolute;*/
    left: 0;
    /*width: 32px;*/
    height: 2px;
    background-color: #3E3E3E;
    transition: .4s;
    cursor: pointer;
    z-index: 9999;
  }

  .toggle_btn.open span {
    background-color: #3E3E3E;
  }

  /*————————————————————————————————
  2023.1010 修正
  —————————————————————————————————*/
  .toggle_btn.open span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(30deg);
    transform: translateY(10px) rotate(30deg);
  }
  .toggle_btn.open span:nth-child(2) {
    opacity: 0;
  }
  .toggle_btn.open span:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(-30deg);
    transform: translateY(-15px) rotate(-30deg);
  }
  /*————————————ここまで————————————*/

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

  .header_nav li{
    height: auto;
    padding: 2rem 0;
  }

  .header_nav li a{
    font-size: 2rem;
    text-align: left;
    flex-direction: row;
  }

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

  li.menu{
    padding: 3.5% 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;
    display: none;
    visibility: visible;
    opacity: 1;    
  }

  li.menu ul.child_menu > li{
    display: table;
    cursor: pointer;
    width: 100%;
    padding: 3% 4%;
  }

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

  .child_list a:hover{
    opacity: .6!important;
  }
  
  .child_menu{
    opacity: 1;
    visibility: visible;
    border: none;
    display: block;
  }

  .dropdown:hover .shinsatu::after{
    transform: rotate(135deg);
  }

  .link_link._sp.close .shinsatu::after{
    transform: rotate(-45deg);
  }

  /*————————————————————————
  メール SP
  ————————————————————————*/

  .header_inner.open .mail_form._sp{
    display: block;
  }

  .mail_form._sp{
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0;
    width: 312px;
    height: 64px;
    color: #FFFFFF;
    background: rgba(246, 173, 60, 0.9);
    margin-top: 3rem;
    border: 1px solid #fff;
    filter: drop-shadow(4px 4px 8px rgba(62,62,62,0.25));
    transition: .4s;
  }

  .mail_form._sp a{
    color: #FFFFFF;
    transition: .4s;
  }

  .mail_form._sp:hover{
    background: rgba(222, 222, 222, 0.9);
  }

  .mail_form._sp:hover a{
    color: #3D3D3D;
  }
  
  /*——————————————————————
  Side Menu-SP
  ——————————————————————*/

  .header_inner.open .abc_icon.sp-only{
    display: block;
    width: 100%;
    margin-top: 6rem;
  }

  .abc_icon{
    position: initial;
  }

  .abc_icon_in{
    width: 312px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 0;
    margin-top: 3rem;
    filter: drop-shadow(4px 4px 8px rgba(62,62,62,0.25));
    transition: .4s;
  }

  .abc_icon.sp-only a{
    writing-mode: horizontal-tb;
  }

  .abc_icon_in._aa:hover{
    opacity: .4;
  }

  /*ハンバーガーメニューopen時に後ろの要素をスクロールさせない*/
  .noscroll{
    overflow: hidden;
  }

/*———————————————————————————
詳細ボタン---BeProHPで使用した物
———————————————————————————*/
  .head_button {
    width: 28rem;
    height: 5rem;
  }
/*——————————————————————
メイン項目エリア 
——————————————————————*/

/*————————2023-1107追記————————*/

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

.pic._03{
  display: none;
}

.comment, .empty_box{
  width: 100%;
}

/*——————————————————————
DisplayFlexベーシック-SP
——————————————————————*/

.calc._01 li{
  width: calc((100% - 8%) / 2);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  margin-bottom: 4rem;;
}

  .sp-column{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /*——————————————————————
  swiper-SP
  ——————————————————————*/

  .mv03 .swiper-main {
    height: 100vh;
  }

  .slide-content{
    display: flex;
    justify-content: center;
    align-items: end;
    margin-top: -5rem;
    height: calc(100vh - 12rem);
  }

  .mv03 .slide-title {
    font-size: 2.4rem;
    line-height: 5.2rem;
    text-align: center;
    letter-spacing: 0.8rem;
    position: static;
  }

  /*——————————————————————
  FV
  ——————————————————————*/

  .scroll {
    width: 48px;
    height: 48px;
    &::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 14px;
      width: 16px;
      height: 16px;
    }
  }

  /*——————————————————————
  診察時間
  ——————————————————————*/
  .consul_text{
    text-align: left;
  }

  .consul_pic{
    width: 100%;
    height: auto;
  }

  .time_table{
    width: 100%;
    height: auto;
  }

  .cir_container{
    gap: 4rem;
  }

  /*——————————————————————
    健康診断  
  ——————————————————————*/

  .entry._02._a{
    height: auto;
  }

  /*——————————————————————
    当院の特徴
  ——————————————————————*/

  .f_container{
    width: calc(60% + 8rem) ;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
    gap: 2rem;
  }

  .circle_point {
    width: 20rem;
    height:20rem;
  }

  .labels_text{
    font-size: 1.2rem;
  }

  /*——————————————————————
  INFORMATIONベーシック-SP
  ——————————————————————*/

  .info_inner{
    display: flex;
    padding: 2rem 0;
    align-items: center;
    justify-content: space-between;
  }

  .info_img{
    width: 9.6rem;
    height: 5.8rem;
    object-fit: cover;
    border-radius: 1rem;
    order: 3;
    margin-left: 1.6rem;
  }

  .t_box{
    width: calc(100% - 10.2rem);
  }

  .info_text {
    width: 100%;
    margin-left: 1rem;
    text-align: left;
    display: flex;
    align-items: center;
  }

  .date {
    font-size: 5.4rem;
  }

  .y_m {
    font-size: 1.5rem;
  }

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

  .foot_logo{
    width: 22rem;
    height: auto;
  }

  /*——————————————————————
  下層-ワンちゃんの診療ここから
  ——————————————————————*/

  .p_menu._a{
    width: 10.2rem;
    height: 10.2rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 1);
    border: 2px solid rgba(26, 19, 17, 1);
    border-radius: 2.6rem;
    background-image: none!important;
    margin-bottom: 3rem;
    cursor: pointer;
  }

  .p_menu._a:hover{
    background: rgba(26, 19, 17, 1);
  }

  .m_link._a{
    color: rgba(26, 19, 17, 1)!important;
  }

  .p_menu._a:hover .m_link._a{
    color: rgba(255, 255, 255, 1)!important;
  }

  .page_anchor{
    width: 23.4rem;
  }

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

  .p_menu._a:nth-last-child(1),
  .p_menu._a:nth-last-child(2){
    margin-bottom: 0;
  }

  .sp-order{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .consul_pic{
    order:2;
    margin-top: 2rem;
  }

  .ill_name{
    flex-direction:initial;
    flex-wrap: wrap;
    justify-content: initial;
  }

  .ill_m{
    margin-bottom: 2rem;
  }

  .v_attention{
    margin: 0 auto;
    margin-top: 4rem;
  }
 

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

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

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

  

}


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

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

    .ceiter-h3{
      font-size: 2rem;
      line-height: 2.8rem;
    }

    .maru{
      width: 3rem;
      height: 3rem;
    }

    .p_1{
      font-size: 1.6rem;
      padding: 3px;
      left: 0.1rem;
    }

    .quest::before{
      top: 1.3rem;
      width: 2rem;
      right: 1.3rem;
    }
    .quest::after{
      top: 1.3rem;
      right: 1.3rem;
    }

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

    .box{
      font-size: 1.4rem;
      line-height: 2.2rem;
    }
  }

  

  @media screen and (max-width:635px){
    .sp-only_02{
      display: block;
    }

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

    .circles{
      width: 5.6rem;
      height: 5.6rem;
    }
  }

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

  }

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

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

    .sp-only_02{
      display: block;
    }

    .count-up{
      font-size: 12rem;
    }

    .count{
      font-size: 2.6rem;
      top: 38%;
      height: 14rem;
    }

    .newline{
      line-height: 3.2rem;
    }

    .toggle_btn.open span:nth-child(1) {
      -webkit-transform: translateY(13px) rotate(30deg);
      transform: translateY(13px) rotate(30deg);
    }

    .toggle_btn.open span:nth-child(3) {
      -webkit-transform: translateY(-10px) rotate(-30deg);
      transform: translateY(-10px) rotate(-30deg);
      transform: translateY(-7px) rotate(-30deg);
    }

    /*——————————————————————
    DisplayFlexベーシック-SP
    ——————————————————————*/

    .calc._01 li{
      width: calc(100%);
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      margin-bottom: 4rem;;
    }

  }

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

    .f_container {
      width: 100%;
    }

    .inner._03 {
      padding: 0;
    }

    .circle_point {
      width: 16rem;
      height:16rem;
    }

  }