/* CSS Document */
/* ======================================== */
/*                  TABLET-WIDE
/* ======================================== */
@media (min-width: 900px) and (max-width: 1061px) {
  .pc-on {
    display: none;
  }
  .wtb-on {
    display: block;
  }
  .stb-on {
    display: none;
  }
  .sp-on {
    display: none;
  }
}
/* ==================== ▼ Slider==================== */
@media (min-width: 900px) and (max-width: 1061px) {
  .slider-01 {
    font-size: 40px;
    top: 10%;
  }
  .slider-02 {
    font-size: 40px;
    top: 35%;
  }
  .slider-03 {
    font-size: 50px;
    top: 70%;
  }
}
/*--------------- ▼AREA-1 ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {
  .area-1-box-1 {
    width: 100%;
  }
}
/*--------------- ▼AREA-INFOMATION ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {
  .information {
    width: 40%;
  }
}
/*--------------- ▼AREA-2 ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {
  .area-2-box-1 {
    height: 180px;
  }
}
/*--------------- ▼AREA- ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {}
/*--------------- ▼AREA-4 ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {
  .area-4-02 {
    width: 82%;
  }
  .area-4-box-1 {
    width: 48%;
    height: 250px;
  }
  .area-4-box-2 {
    width: 100%;
  }
}
/*--------------- ▼AREA-5 ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {}
/*--------------- ▼AREA-6 ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {
  .area-6-box-2 {
    width: 48%;
    height: 230px;
    margin: 0 1% 20px;
  }
}
/*--------------- ▼AREA-8 ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {
  .area-8-02 {
    width: 48%;
    margin: 0 1% 30px;
  }
}
/*--------------- ▼AREA-9 ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {
  .area-9-box-1 {
    width: 90%;
    margin: 0 auto 30px;
  }
  .area-9-box-2 {
    float: left;
    width: 48%;
    margin: 0 1% 20px;
    ;
  }
}
/*--------------- ▼AREA-10 ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {}
/*--------------- ▼AREA- ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {}
/*--------------- ▼AREA- ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {}
/*--------------- ▼FOOTER- ---------------*/
@media (min-width: 900px) and (max-width: 1061px) {
  .address {
    width: 35%;
  }
}
/* ======================================== */
/*                  TABLET-SHORT
/* ======================================== */
@media (min-width: 600px) and (max-width: 899px) {
  .pc-on {
    display: none;
  }
  .pc-none {
    display: block;
  }
  .wtb-on {
    display: none;
  }
  .stb-on {
    display: block;
  }
  .sp-on {
    display: none;
  }
  .sp-none {
    display: none;
  }
}
/*--------------- SLIDER ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .slider-01 {
    font-size: 40px;
    top: 20%;
  }
  .slider-02 {
    font-size: 40px;
    top: 35%;
  }
  .slider-03 {
    font-size: 40px;
    top: 60%;
  }

}
/*--------------- HEADER ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .header-logo {
    width: 40%;
    margin-left: 5%;
  }
  .header-box {
    float: right;
    width: 45%;
    margin-right: 7%;
  }
}
/*--------------- ▼ AREA-1 ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .area-1-box-1 {
    width: 96%;
  }
}
/*--------------- INFOMATION ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .information {
    width: 40%;
  }
}
/*--------------- ▼ AREA-2 ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .area-2-box-1 {
    float: none;
    width: 90%;
    margin: 0 auto 20px;
    padding: 20px;
  }
  .area-2-box-2 {
    width: 100%;
    margin: 50px 0 auto;
  }
}
/*--------------- ▼ AREA-3 ---------------*/
@media (min-width: 600px) and (max-width: 899px) {}
/*--------------- ▼ AREA-4 ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .area-4-02 {
    width: 100%;
  }
  .area-4-box-1 {
    float: none;
    width: 90%;
    height: 180px;
    margin: 0 auto 20px;
  }
  .area-4-box-2 {
    width: 90%;
  }
}
/*--------------- ▼ AREA-5 ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .aea-5-box-1 {
    width: 100%;
    margin: 0 auto 30px;
  }
}
/*--------------- ▼ AREA-6 ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .area-6-box-2 {
    float: none;
    width: 90%;
    height: 180px;
    margin: 0 auto 20px;
  }
  .area-6-box-3 {
    width: 100%;
  }
}
/*--------------- ▼ AREA-7 ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .area-7-box-1 {
    width: 100%;
    margin: 0 auto;
  }
}
/*--------------- ▼ AREA-8 ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .area-8-01 {
    font-size: 26px;
  }
  .area-8-02 {
    width: 48%;
    margin: 0 1% 20px;
  }
}
/*--------------- ▼ AREA-9 ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .area-9-box-2 {
    width: 48%;
    margin: 0 1% 20px;
  }
}
/*--------------- ▼ AREA- ---------------*/
@media (min-width: 600px) and (max-width: 899px) {}
/*--------------- footer ---------------*/
@media (min-width: 600px) and (max-width: 899px) {
  .address {
    width: 44%;
    margin: 0 auto 50px;
  }
}
/*---------------  ---------------*/
@media (min-width: 600px) and (max-width: 899px) {}
/*---------------  ---------------*/
@media (min-width: 600px) and (max-width: 899px) {}
/* ======================================== */
/*               SMARTPHHONE 
/* ======================================== */
/*---------------  ---------------*/
@media screen and (max-width: 599px) {
  .pc-on {
    display: none;
  }
  .pc-none {
    display: block;
  }
  .wtb-on {
    display: none;
  }
  .stb-on {
    display: none;
  }
  .sp-on {
    display: block;
  }
  .sp-none {
    display: none;
  }
  #page_top {
    display: none;
  }
}
/*--------------- SLIDER ---------------*/
@media screen and (max-width: 599px) {
  .slider-01 {
    font-size: 30px;
    top: 10%;
  }
  .slider-02 {
    font-size: 30px;
    top: 35%;
  }
  .slider-03 {
    font-size: 30px;
  }

}
/*--------------- HEADER ---------------*/
@media screen and (max-width: 599px) {
  .header-logo {
    width: 60%;
    float: none;
    margin: 0 auto 0;
  }
  .header-box {
    float: none;
    padding-bottom: 5px;
  }
  .header-phone {
    margin: 0 auto;
  }
  .header-phone a {
    font-size: 24px;
  }
  .header-phone img {
    width: 20px;
     margin-right: 5px;
  }
  .header-time {
    display: none;
  }
}
@media (max-width: 599px) {

.area-inner {
	width: 94%;}
}
	
	
/*--------------- AREA-1 ---------------*/
@media (max-width: 599px) {
  .area-1-box-1 {
    width: 94%;
    padding: 20px 1%;
  }
  .area-1-01 {
    font-size: 28px;
  }
  .area-1-02 {
    font-size: 22px;
  }
  .area-1-03 {
    font-size: 20px;
  }
}
/*--------------- INFOMATION ---------------*/
@media (max-width: 599px) {
  .information {
    width: 80%;
  }
}
/*--------------- AREA-2 ---------------*/
@media (max-width: 599px) {
  .area-2-01 {
    font-size: 28px;
  }
  .area-2-box-1 {
    float: none;
    width: 100%;
    margin: 0 auto 20px;
  }
  .area-2-box-2 {
    width: 100%;
  }
  .area-2-04 {
    float: none;
    width: 80%;
    margin: 20px auto 20px;
  }
  .area-2-box-3 {
    float: none;
    width: 100%;
    padding: 20px 0 0 0;
    margin: 0 auto;
  }
}
/*--------------- AREA-3 ---------------*/
@media (max-width: 599px) {
  .area-3-01 {
    font-size: 28px;
  }
  .area-3-box-1 {
    padding: 20px 10px;
  }
  .area-3-04 {
    font-size: 20px;
  }
}
/*--------------- AREA-4 ---------------*/
@media (max-width: 599px) {
  .area-4-01 {
    font-size: 28px;
  }
  .area-4-02 {
    width: 100%;
    font-size: 18px;
  }
  .area-4-box-1 {
    float: none;
    width: 100%;
    height: 250px;
    margin: 0 auto 20px;
  }
  .area-4-box-2 {
    padding: 20px 10px;
  }
}
/*--------------- AREA-5 ---------------*/
@media (max-width: 599px) {
  .area-5-01 {
    font-size: 28px;
  }
  .aea-5-box-1 {
    width: 100%;
    margin: 0 auto 30px;
  }
  .aea-5-box-2 {
    float: none;
    width: 100%;
  }
  .area-5-04 {
    float: none;
    width: 80%;
    margin: 0 auto 30px;
  }
}
/*--------------- AREA-6 ---------------*/
@media (max-width: 599px) {
  .area-6-01 {
    font-size: 28px;
  }
  .area-6-box-2 {
    float: none;
    width: 100%;
    height: 250px;
    margin: 0 auto 20px;
    padding: 20px;
  }
  .area-6-box-3 {
    width: 100%;
    padding: 10px;
  }
}
/*--------------- AREA-7 ---------------*/
@media (max-width: 599px) {
  .area-7-01 {
    font-size: 28px;
  }
  .area-7-box-1 {
    width: 100%;
    margin: 0 auto 30px;
  }
  .area-7-04 {
    float: none;
    width: 70%;
    margin: 0 auto 20px;
  }
  .area-7-box-2 {
    float: none;
    width: 100%;
    padding: 0 0 30px 0;
  }
}
/*--------------- AREA-8 ---------------*/
@media (max-width: 599px) {
  .area-8-02 {
    float: none;
    width: 100%;
    margin: 0 auto 20px;
    text-align: left;
    padding: 20px 0 20px 4%;
    font-size: 18px;
  }
}
/*--------------- AREA-9 ---------------*/
@media (max-width: 599px) {
  .area-9-box-1 {
    margin-bottom: 10px;
  }
  .area-9-box-2 {
    float: none;
    width: 70%;
    margin: 0 auto 20px;
  }
}
/*--------------- AREA-10 ---------------*/
@media (max-width: 599px) {
  .area-10-01 {
    font-size: 24px;
    font-weight: 600;
  }
  .area-10-02 a {
    font-size: 40px;
    color: #fff;
  }
}
/*--------------- FOOTER ---------------*/
@media (max-width: 599px) {
  .address {
    width: 70%;
    margin: 0 auto 50px;
    border-bottom: none;
  }
  .address-02 img {
    width: 90%;
  }
}
/*--------------- AREA- ---------------*/
@media (max-width: 599px) {}
/*--------------- AREA- ---------------*/
@media (max-width: 599px) {}
/*--------------- AREA- ---------------*/
@media (max-width: 599px) {}
/*--------------- AREA- ---------------*/
@media (max-width: 599px) {}