/*==============================================
  common
==================================================*/

@media screen and (max-width:667px) {
  body {
    padding: 0px;
    font-size: 13px;
    width: 100%;
    min-width: 100%;
    overflow-x: hidden;
  }

  .pc_br {
    display: none !important;
  }

  .pc_br2 {
    display: none !important;
  }

  .sp_br {
    display: block;
  }

  .visible-xs {
    /*bootstrap*/
    display: block !important;
  }


  #arrow {
    bottom: 8%;
    right: 1%;
  }

  #arrow img {
    width: 35px;
  }

  img {
    width: 100%;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
  }


  /* =========================================================
		Header
========================================================= */
  /*2層*/

  #header {
    position: fixed;
    display: block;
    width: 100%;
    background-color: #FFFFFF;
    z-index: 999;
  }


  #headerin {
    width: 100%;
    margin: 0 auto 0;
    position: relative;
    top: 0;
  }

  #headerin h1 {
    padding: 10px 0 8px 8px;
  }

  #headerin h1 img {
    width: 96px;
  }

  #headerin .h_info {
    float: left;
    margin-top: 14px;
    border-radius: 4px;
    overflow: hidden;
    /*width:53px;*/
  }

  #headerin .h_info a {
    font-size: 11px;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
    display: block;
    padding: 8px 7px 5px;
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
  }

  #headerin .h_login {
    float: left;
    margin-left: 4px;
    margin-top: 14px;
    width: 53px;
  }

  #headerin .h_login a {
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    display: block;
    background: no-repeat left 14% center;
    background-size: 8.5%;
    padding: 8px 8px 6px 8px;
    background-color: #20abe9;
    text-align: center;
    border-radius: 4px;
  }

  #headerin .h_start {
    float: left;
    margin-left: 4px;
    margin-top: 14px;
  }

  #headerin .h_start a {
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 0;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
    display: block;
    padding: 8px 8px 6px 8px;
    background-color: #f29600;
    text-align: center;
    border-radius: 4px;
    background-size: 6%;
  }


  #headerin .menu {
    float: right;

  }



  #header .gnavi {
    width: 100%;
    margin: 0 auto 0;
    border-right: none;
  }

  #header .gnavi li {
    float: none;
    width: 100% !important;
    text-align: center;
    font-size: 13px;
    font-weight: normal;
    border-left: none;
  }

  /*メニュー*/


  .menu,
  .menu span {
    display: block;
    transition: all .4s;
    vertical-align: middle;
  }

  .menu {
    position: relative;
    width: 36px;
    height: 36px;
    background: #004b90;
    margin: 8px 4px 8px 8px;
    padding: 0;
  }

  .menu span {
    position: absolute;
    left: 25%;
    width: 50%;
    height: 2px;
    background-color: #fff;
    border-radius: 4px;
    display: block;
  }

  .menu .top {
    top: 31%;
  }

  .menu .middle {
    top: 47%;
  }

  .menu .bottom {
    bottom: 31%;
  }

  .menu.active .top {
    -webkit-transform: translateY(5px) rotate(-45deg);
    transform: translateY(5px) rotate(-45deg);
  }

  .menu.active .middle {
    opacity: 0;
  }

  .menu.active .bottom {
    -webkit-transform: translateY(-7px) rotate(45deg);
    transform: translateY(-7px) rotate(45deg);
  }

  .menu_2 {
    width: 32px;
    margin: 10px 2% 10px 0;
  }

  .navopen {
    background: #004b90;
    position: absolute;
    width: 100%;
    top: 51px;
    z-index: 999;
  }

  .navopen li {
    color: #fff;
    border-bottom: solid 1px #116abc;
    text-align: center;
    padding: 0;
    font-size: 106%;
    letter-spacing: 2px;
  }

  .navopen a {
    display: block;
    padding: 3% 0;
    color: #FFFFFF !important;
  }

  .navopen li.close {
    /*btn_close*/
    background: #023d74;
    padding: 15px 0 13px !important;
    cursor: pointer;
  }

  #menulist {
    display: none;
  }

  #itemlist {
    display: none;
  }

  /*メニュー*/





  /* =========================================================
		TOP
========================================================= */

  /*----main-------------------*/

  .flexslider .slides img {
    position: static;
    top: 0;
    left: 0;
    margin-left: 0;
    width: 100%;
  }


  flexslider {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    height: auto;
    position: static;
  }

  .flexslider {
    margin: 0;
    padding: 0;
    height: auto;
    position: relative;
    padding-top: 53px;
  }

  .flex-direction-nav {
    height: 0;
  }

  .main_banner {
    position: static;
    width: 92%;
    margin: 3% auto;
  }

  .main_banner img {
    width: 100%;
  }

  /*----con1-------------------*/

  #wrapper {
    margin: 0 auto 0;
    width: 100%;
  }


  #topcon1 {
    min-width: 100%;
    background-image: url(../img/top/top_backpic_pc.jpg);

    background-attachment: inherit;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat !important;
    z-index: 0;
    overflow: hidden;
  }


  #topcon1 h2 {
    padding: 8% 0 3%;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.4;
    width: 90%;
    margin: 0 auto;
  }

  #topcon1 p {
    padding: 0 0 8%;
    text-align: left;
    font-size: 13px;
    color: #FFFFFF;
    width: 86%;
    margin: 0 auto;
  }


  .coninner {
    width: 100%;
    margin: 0 auto;
    padding: 10% 0;
  }

  .coninner2 {
    width: 100%;
    margin: 0 auto;
    padding: 6% 0 5%;
  }

  /*----con2----*/

  #topcon2 h2 {
    font-size: 24px;
    padding-bottom: 5%;

  }


  .difference {
    width: 90%;
    position: static;
    margin: 0 auto;
  }

  .difference .d_left {
    width: 100%;
    float: none;
  }

  .difference p {
    padding-bottom: 3%;
  }

  .difference .d_left h3,
  .difference .d_right h3 {

    padding-bottom: 2%;
    font-size: 20px;

  }

  .difference table {
    margin-bottom: 2%;
    width: 100%;
  }

  .difference .number {

    padding: 2px 25px;
    font-size: 28px;
    width: 10px;
  }

  .difference td {
    font-size: 14px;
    padding: 10px 10px;
  }


  .or_icon {
    position: static;
    width: 24%;
    margin: 5% auto;
  }

  .difference .d_right {
    width: 100%;
    float: none;
  }

  /*----con3----*/

  #topcon3 {
    width: 90%;
    margin: 0 auto;
    padding: 10% 0 5%;
  }

  #topcon3 .midashi h2 {
    float: none;

    font-size: 24px;
    padding: 0 0 0;

  }

  #topcon3 .midashi h2 span {
    font-size: 28px;
  }

  #topcon3 .midashi {
    margin: 0 0 6% 0;
  }

  #topcon3 .checkcon {
    float: none;
    width: 100%;
    margin-top: 4%;
  }

  #topcon3 .checkcon dl {
    padding-bottom: 5%;
  }

  #topcon3 .checkcon dt {
    float: left;
    padding-right: 3%;
    width: 8%;
  }

  #topcon3 .checkcon dd {
    float: left;
    font-size: 15px;
    width: 89%;
    line-height: 1.6;
  }

  #topcon3 .checkpic {
    float: none;
  }

  #topcon3 .checkpic {
    float: none;
    text-align: center;
  }

  #topcon3 .checkpic img {
    width: 80%;
  }

  #topcon3 .st_copy1 {
    font-size: 20px;
    margin: 8% 0 3%;
    line-height: 1.5;
  }

  #topcon3 .st_copy1 strong {
    font-size: 34px;

  }

  #topcon3 .st_copy2 {
    font-size: 16px;
    margin-bottom: 6%;
  }

  #topcon3 .st_copy2 strong {
    font-size: 16px;

  }

  .st_arrow img {
    width: 50%;
    margin: 0 auto;

  }

  /*----con4----*/

  #topcon4 {
    min-width: 100%;
    background-image: url(../img/top/top_backpic1_pc.jpg);

    background-attachment: inherit;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat !important;
    z-index: 0;
    overflow: hidden;
  }

  #topcon4 h3 {
    font-size: 20px;

    line-height: 1.4;
    width: 90%;
    margin: 0 auto 3%;
  }

  .webcopy1 {
    font-size: 13px;
    text-align: left;
    width: 90%;
    margin: 0 auto 6%;
  }

  #topcon4 .modalbtn {
    margin: 0 auto 0;
    width: 86%;
  }

  #topcon4 .modalbtn1 {
    float: none;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 5%;
  }


  #topcon4 .modalbtn1 a {
    display: block;
    width: 100%;
    line-height: 55px;
    color: #fff;
    font-size: 16px;
    background: url(../img/btn_arrow2.png) no-repeat right #004b90;
    background-position-x: 95%;
    background-size: 8px;
    box-shadow: 0 3px 0 #001c58;
  }


  #topcon4 .modalbtn2 {
    float: none;
  }

  #topcon4 .modalbtn2 a {
    display: block;
    width: 100%;
    line-height: 55px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background: url(../img/btn_arrow2.png) no-repeat right #004b90;
    background-position-x: 95%;
    background-size: 8px;
    box-shadow: 0 3px 0 #001c58;
    letter-spacing: 0.3px;
  }

  #topcon4 .modal {
    /*170901追記*/
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 88vw;
    box-sizing: border-box;
  }

  /*----con5----*/

  .po_title1 {
    font-size: 20px;
    padding: 9% 4%;

  }

  .topcon5in {
    width: 90%;
    margin: 0 auto;
    padding: 10% 0 8%;
  }

  #topcon5 ul {
    width: 76%;
    margin: 0 auto;
    padding: 0 0 5%;
  }

  #topcon5 li {
    float: none;
    margin-right: 0;
  }

  #topcon5 dl {
    width: 100%;
    text-align: center;
    margin-bottom: 10%;
  }

  #topcon5 dt {
    padding-bottom: 6%;
  }

  #topcon5 dt img {
    width: 20%;
  }

  #topcon5 .reason_title {
    font-weight: bold;
    color: #004b90;
    font-size: 17px;
    padding: 7% 0 4%;
    line-height: 1.4;
  }

  .height_line3,
  .height_line4,
  .height_line5,
  .height_line11 {
    height: auto;
  }

  .plan_btn {
    margin: 0 0 5% 0;
  }


  .plan_btn a {
    display: block;
    width: 84%;
    line-height: 1.5;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background: url(../img/btn_arrow2.png) no-repeat right #f29600;
    background-position-x: 97%;
    background-size: 7px;
    border-radius: 5px;
    box-shadow: 0 4px 0 #eb6100;
    letter-spacing: 0.5px;
    padding: 4% 8% 3%;
  }

  /*----con6----*/

  #topcon6 {
    min-width: 100%;
    background-image: url(../img/top/top_backpic2_pc.jpg);
    background-position: center;

    background-attachment: inherit;

  }

  .slider {
    width: 80% !important;
    margin: 0 auto !important;
  }

  .slick-next.slick-arrow {
    position: absolute;
    right: -10%;
    top: 43%;

  }

  .slick-prev.slick-arrow {
    position: absolute;
    left: -10%;
    top: 43%;

  }

  .slider dl {
    background-color: #FFFFFF;
    padding: 0 0 8%;
  }

  #topcon6 h4 {
    text-align: center;
    padding: 3% 4%;
    background-color: #004b90;
    color: #FFF;
    font-size: 13px;
    width: 86%;
    margin: 0 auto;
    letter-spacing: 0;
  }


  .companylogo {
    background-color: #FFF;
    padding: 1% 2% 5%;
    width: 90%;
    margin: 0 auto 8%;
  }

  .companylogo .logo1,
  .companylogo .logo2,
  .companylogo .logo3 {
    float: left;
    width: 24%;
    padding-right: 1%;
  }

  .companylogo .logo2 .logoa {
    padding: 13px 0;
  }

  .companylogo .logo4 .logoa {
    width: 55%;
    margin: 1px auto 0px;
  }

  .companylogo .logo4 {
    float: left;
    width: 24%;
  }

  .morebtn1 {
    margin: 5% 0 0 0;
  }

  .morebtn1 a {
    display: block;
    width: 90%;
    line-height: 30px;
    color: #004b90;
    font-size: 12px;
    background: url(../img/btn_arrow1.png) no-repeat right;
    background-position-x: 95%;
    background-size: 6px;
    border-radius: 4px;
    border: 2px solid #004b90;
    text-decoration: none;
    padding: 0 0 0 0;
    text-align: center;
    margin: 0 auto;
  }

  .btninner {
    width: 90%;
    margin: 0 auto;

  }


  /*----con7----*/

  .po_title1 span {
    font-size: 16px;
    font-weight: normal;
  }


  #topcon7 h4 {
    font-size: 14px;

    width: 90%;
    margin: 0 auto 8%;
  }

  #topcon7 ul {
    width: 80%;
    margin: 0 auto 10%;
  }

  #topcon7 li {
    float: none;
    margin-right: 0;
    margin-bottom: 5%;
  }

  #topcon7 dl {
    width: 90%;
    position: relative;
    background-color: #FFFFFF;
    padding: 0 5% 8%;
    height: auto;
  }

  #topcon7 .step_pic1 {
    text-align: center;
    padding: 15% 0 8%;
  }

  .step_copy {
    font-size: 14px;

  }

  #topcon7 dt img {
    width: 90px;
  }


  .step_arrow p {
    position: static;
    margin: 0 auto;
    width: 15%;
  }

  /*----con8----*/
  #topcon8 .coninner{
    width:auto;
  }
  .service_plan {
    width: 80%;
    margin: 0 auto 10%;
  }

  #topcon8 table {
    text-align: center;
    width: 100%;
  }


  #topcon8 table .plant1,
  #topcon8 table .plant2,
  #topcon8 table .plant3,
  #topcon8 table .plant4,
  #topcon8 table .plant5,
  #topcon8 table .plant6 {
    float:none;
    padding: 5% 0;
    font-size: 20px;
  }


  #topcon8 table .planco1 {
    font-size: 16px;
    height: inherit;
    padding: 5% 0;
  }

  #topcon8 table .planco2 {
    font-size: 14px;
    height: inherit;

    padding: 5% 0;
  }

  #topcon8 table .planco2 .price3 {
    font-size: 13px;

  }

  #topcon8 table .planco3 {
    font-size: 13px;
    padding: 5% 0;

  }

  #topcon8 table .planco3 strong,
  #topcon8 table .planco3b strong,
  #topcon8 table .planco3c strong {
    font-size: 17px;
  }

  #topcon8 .planbtn1 {
    margin: 5% auto 3%;
  }

  #topcon8 .planbtn1 a {
    display: block;
    width: 100%;
    line-height: 52px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background: url(../img/btn_arrow2.png) no-repeat right #004b90;
    background-position-x: 94%;
    background-size: 8px;
    border-radius: 5px;
  }
  
  .service_plan > div{
    width:auto;
  }
  #topcon8 .service1,
  #topcon8 .service2,
  #topcon8 .service3,
  #topcon8 .service4,
  #topcon8 .service5 {
    float: none;
    margin-top: 14%;
    margin-right: 0;
  }

  #topcon8 .service1,
  #topcon8 .service2 {
    margin-right: 0;
  }

  #topcon8 table .planco2b {
    font-size: 15px;
    height: inherit;
    padding: 5% 0;
  }

  #topcon8 table .planco3c {
    font-size: 14px;
    padding: 5% 0;

  }

  #topcon8 table .planco3b {
    font-size: 14px;
    padding: 5% 0;

  }

  #topcon8 table .planco1b {
    font-size: 16px;
    height: inherit;
    line-height: 1.5;
    padding: 5% 0;
  }

  #topcon8 table .planco2c {
    font-size: 15px;
    height: inherit;

    padding: 5% 0;
  }

  .plan_att1 {
    font-size: 11px;
    padding: 2% 0 0 0;
  }

  .plan_att2 {
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    padding: 0 0 0 0;
    letter-spacing: 0;
  }





  .newsin {
    width: 94%;
    margin: 0 auto;
    padding: 8% 0 15%;
  }

  .newsin h3 {
    font-size: 24px;
    margin-bottom: 6%;

  }


  .newsin .newscon1 {
    margin: 4% 0;
    padding: 4% 5%;

    box-shadow: 0 0 3px #ddd;
  }

  .newsin .newscon1 .date {
    color: #999;
    font-size: 12px;
    padding-bottom: 1%;
  }

  .newsin .newscon1 .news_copy {
    font-size: 14px;
  }

  .morebtn2 {
    margin: 0 0 0 0;
  }

  .morebtn2 a {
    display: block;
    width: 84%;
    line-height: 33px;
    color: #004b90;
    font-size: 12px;
    background: url(../img/btn_arrow1.png) no-repeat right;
    background-position-x: 93%;
    background-size: 6px;
    border-radius: 4px;
    border: 2px solid #004b90;
    text-decoration: none;
    padding: 0 0 0 0;
    text-align: center;
    margin: 6% auto 0;
  }


  /* =========================================================
		2層
========================================================= */

  .maincatch {
    height: 120px;
    width: 100%;
    background-position: 50% 50%;
    background-size: cover;
    padding-top: 53px;

  }


  /*---------------------------------------
各ページFAQ部分
-------------------------------------- */
  .faq-ex_area {
    max-width: 87vw;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
  }

  .faq-ex_area h2,
  #topcon2 .faq-ex_area h2 {
    font-size: 17px;
  }

  #topcon2 .faq-ex_area h2 {
    /*トップページのみ*/
    margin-top: 0px;
  }

  .faq-ex_area h2 .tt-ico {
    display: inline-block;
    margin-right: 8px;
    width: 30px;
    padding: 5px;
  }

  .faq-ex_area .more {
    position: static;
    text-align: center;
    display: block;
    margin: 7px 0 0;
    order: 3;
  }

  .faq-ex_area .more a {
    font-size: 0.8rem;
    display: inline-block;
    padding: 16px 34px;
    border-radius: 4px;
    background-color: #269eb0;
    position: relative;
  }

  .faq-ex_area .more a:before {
    content: "";
    display: block;
    position: absolute;
    right: 10px;
    bottom: 45%;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-top: 3px solid #fff;
    transform: rotate(-90deg);
  }

  .faq-ex_area ul {
    padding: 0 3%;
    order: 2;
  }

  .faq-ex_area li {
    margin: 15px 0;
    padding: 15px 0;
  }

  .faq-ex h4 {
    font-size: 0.9rem;
    padding-left: 32px;
  }

  .faq-ex h4:before {
    font-size: 80%;
    line-height: 1;
    top: -1px;
    left: 0;
    width: 24px;
    height: 24px;
    padding: 6px 0px 0;
    box-sizing: border-box;
  }

  .faq-ex .q_conts {
    line-height: 1.4;
    padding: 15px;
  }

  /* =========================================================
		footer
========================================================= */

  .footerin {
    width: 100%;
    margin: 0 auto;
    padding: 11% 0 0;
  }

  .flogo {
    float: none;
    padding-right: 0;
    padding-top: 0;
    margin: 0 auto 4%;
    text-align: center;
    border-bottom: 1px solid #444;
    padding-bottom: 8%;
  }

  .flogo img {
    width: 130px;
  }

  .flink1 {
    color: #FFFFFF;
    padding-top: 0;
    letter-spacing: 0.8px;
    font-size: 13px;
    float: none;
    padding-right: 0;


  }



  .flink1 li {
    list-style: none;
    background: url(../img/f_icon2.png) no-repeat left 6px;
    padding-left: 9%;
    margin-bottom: 4%;
    border-bottom: 1px solid #444;

    padding-bottom: 4%;
    background-position-x: 4%;
    font-size: 14px;
  }


  .flink2 {
    float: none;
  }


  .flink2 .fcopy1 {
    color: #ccc;
    font-size: 14px;
    padding-bottom: 4%;
    border-bottom: 1px solid #666;
    width: 80%;
    margin: 8% auto 6%;
  }


  .flink2 .ftell img {
    width: 100%;
  }

  .flink2 .ftell {
    width: 70%;
    margin: 0 auto 0;
    padding-bottom: 10%;
  }

  .copyrite {
    padding: 3% 1%;
    font-size: 8px;
    text-align: center;
    background-color: #111;
    border-top: 1px solid #333;
    color: #999;
    letter-spacing: 0;
  }

  #page-top img {
    width: 44px;
  }

  #page-top {
    position: fixed;
    bottom: 60px;
    right: 5px;

  }


  /* =========================================================
		newslist
========================================================= */

  #newslist {
    margin-top: 0;
    padding-top: 53px;

  }

  #newslist .newsin {
    padding: 8% 0 20%;
  }

  .news_header {
    padding-bottom: 4%;
  }

  #newslist h2 {
    font-size: 18px;
    padding: 3% 0;
    text-align: center;
    margin-bottom: 9%;
  }

  .news_cap {
    font-size: 20px;
    line-height: 1.4;
    color: #004b90;

    margin: 0 0 5%;

  }

  .newslist1 {
    margin: 6% 0 7%;
  }

  .news_cat {
    font-size: 10px;

  }
}