/*===========header=============*/
.logo{
	width: 400px;
}
.logo_btn{
	width: 225px;
}
.logo_sm{
	display: none;
}
.navbar-toggler {
    display: none;
}
#main_visual_txt {
    text-align: center;
    background: #fff100;
    height: 44px;
    border-top: 1px solid #6c6c6c;
}
.container {
    max-width: 1000px;
}

a:hover {opacity: 0.8;}

/*=============hero=============*/
 #main_nav1 ul {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}
 #main_nav1 ul li{
padding: 0 5px;
}
#main_nav1{
    margin-left: -12rem;
}
.hero-unit{
    height: 100%;
    background-color: #FFE100;
}
.hero_nav{
    width: 150px;
}
#main_nav2 {
    /*border: 5px solid white;
    padding: 15px 13px 0px 13px;*/
    margin-top: -80px;
    position: absolute;
    /*overflow: hidden;
    background: #FFE100;
    
    z-index: 1;*/
}
.col_left{
    margin-top: 3%;
}
.hero1{
    width: 450px;
}
.hero_size{
    width: 90%;
    margin: 0 auto;
}
.col_right{
    margin-top: 4%;
}
.hero2{
    width: 380px;
    margin-left: 5%;
}
.manu_2{
    padding: 0 65px;
}
.hero_btn01 {
    margin-bottom: 10px;
}
.hero_btn_pd{
    padding-right: 40px;
    padding-left: 10px;
}
/*========net==========*/
article#net {
    padding-bottom: 2.3em;
    background-color: #e5f1f8;
}
article#net h2 {
    width: 100%;
    text-align: center;
    background-color: #0073bd;
    margin-bottom: 0;
}
.net_sp{
	display: none;
}
.net_menu {
    margin-top: 24px;
}
ul {
    list-style: none;
    padding-left: 0;
}
.z-1 {
    margin-bottom: 10px;
}
.btn-area {
    text-align: center;
    margin-top: 40px;
}
.net_btn{
    width: 900px;
}
.net_op {
    margin-top: 40px;
}
.btn-area img {
    margin-bottom: 1em;
}

/*============tv============*/
#tv {
    padding-bottom: 32px;
    background-color: #fdeef1;
}
article#tv h2 {
    width: 100%;
    text-align: center;
    background-color: #e75c78;
    margin-bottom: 0;
}
#channel111 {
    background-color: #fdeef1;
}
.box-pink{
    margin-top: 32px;
}
.box-top{
    margin-top: 32px;
}
.h-182{
    position: relative;
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%
}
.tv_link {
    color: #d7a801 !important;
    text-decoration: underline !important;
}
p { 
    margin-bottom: 0rem;
    font-size: 18px;
}
/*===========tel================*/
article#tel {
    padding-bottom: 32px;
    background-color: #ebf7ea;
}
article#tel h2 {
    width: 100%;
    text-align: center;
    background-color: #3eb134;
}
.tel-service {
    padding: 16px 8px;
    text-align: center;
    margin-top: 24px;
}
.border-brown {
    border: 3px solid #d4a157;
}
.box-orange {
    position: relative;
    background-color: #ffe6c2;
}
.btn-green {
    margin-top: 18px;
}
.round-16 {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}
.border-gray {
    border: 3px solid #b9b9b9;
}
.box-lgray {
    position: relative;
    background-color: #ebebeb;
}

/*=============c_smartphone==============*/
article#c_smartphone {
    padding-bottom: 32px;
    background-color: #cbfbff;
}
article#c_smartphone h2 {
    width: 100%;
    text-align: center;
    background-color: #20ccdb;
}
.m-top24 {
    margin-top: 24px;
    text-align: center;
}
.m-bottom24 {
    margin-bottom: 24px;
    text-align: center;
}
.m_find{
    text-align: center;
}
.btn-green {
    margin-top: 18px;
}
/*================xmobile============== */
article#xmobile {
    padding-bottom: 32px;
    background-color: #f7f8d9;
}
article#xmobile h2 {
    width: 100%;
    text-align: center;
    background-color: #70b92c;
}
/*================electric==============*/
article#electric {
    padding-bottom: 32px;
    background-color: #fff4cc;
}
article#electric h2 {
    width: 100%;
    text-align: center;
    background-color: #efbb07;
}
/*============goto_top==============*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: url(../images/btn_top.png) no-repeat left top;
    text-decoration: none;
    text-indent:-9999px;
    color: #fff;
    opacity:0.5;
    width: 100px;
    height:173px;
    padding: 0 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
}
/*==============mobile_size===========*/
@media only screen and (max-width: 1230px) {
    #main_nav1{
    margin-left: -10rem;
}
}
@media only screen and (max-width: 1199px) {
    #main_nav1{
    margin-left: -9rem;
}
.hero2 {
    width: 380px;
}
}
@media only screen and (max-width: 1020px) {
    #main_nav1{
    margin-left: -8rem;
}
.hero2 {
    width: 325px;
}
#main_nav2 {
    /*padding: 12px 7px 0px 7px;*/
    margin-top: -70px;
}
}
@media only screen and (max-width: 960px) {
    .manu_2 {
    padding: 0 65px !important;
}
.hero2 {
    width: 285px;
}
#main_nav1 {
    margin-left: -6rem;
}
.hero_btn_pd {
    padding-right: 35px;
    padding-left: 8px;
}
}
@media only screen and (max-width: 890px) {
.hero_btn_pd {
    padding-right: 30px;
    padding-left: 6px;
}
p {
    font-size: 2vw !important;
}
}
@media only screen and (max-width: 767px) {
.logo{
    display: none;
}
.logo_sm{
    display: block;
}
.navbar{
    padding: 0.5rem 0rem;
}
.head_banner{
    margin-top: 10px;
}
.net_header{
    width: 80%;
}
.net_sp{
    display: block!important;
}
.net_pc{
    display: none;
}
.container {
    max-width: none!important;
}
.btn-area img {
    margin-bottom: 0.5em;
}
.box-pink {
    margin-top: 0;
}
.btn-area img {
    margin-bottom: 0.5em !important;
}
.btn-area {
    margin-top: 25px !important;
}
.net_op {
    margin-top: 15px !important;
}
article#net {
    padding-bottom: 1em !important;
}
ul{
    margin-bottom: 0rem !important;
}
.net_menu {
    margin-top: 0 !important;
}
#main_nav2 {
    margin-top: -58px !important;
}
.hero_btn01 {
    margin-bottom: 5px !important;
}
h2{
    line-height: 0.3;
}
.manu_2 {
    padding: 0 63px !important;
}
#main_nav1 ul li {
    padding: 0 1px !important;
}
.col_left {
    margin-left: 0% !important;
    padding: 0 !important;
}
.col_right {
    padding: 0 !important;
}
.box-top{
    margin-top: 0 !important;
}
#tv{
   padding-bottom: 0 !important;
}
#main_nav1 {
    margin-left: -4rem;
}
.hero2 {
    width: 250px;
}
.row {
    padding: 0 !important;
}
}
@media only screen and (max-width: 650px) {
.manu_2 {
    padding: 0 51px !important;
}
#main_nav1 {
    margin-left: -2rem;
}
.hero2 {
    width: 230px;
}
#main_nav2 {
    margin-top: -45px !important;
}
}
@media only screen and (max-width: 600px) {
.manu_2 {
    padding: 0 47px !important;
}
.hero2 {
    width: 210px;
}
.hero_btn_pd {
    padding-right: 24px;
    padding-left: 6px;
}
}
@media only screen and (max-width: 550px) {
.manu_2 {
    padding: 0 44px !important;
}
.hero2 {
    width: 190px;
}
#main_nav2 {
    margin-top: -40px !important;
}
.hero_btn_pd {
    padding-right: 20px;
    padding-left: 6px;
}
}
@media only screen and (max-width: 500px) {
.manu_2 {
    padding: 0 38px !important;
}
.hero2 {
    width: 170px;
    margin-left: 12%;
}
#main_nav2 {
    margin-top: -35px !important;
    width: 220px;

}
}
@media only screen and (max-width: 431px) {
.img-fluid.logo_sm {
    width: 80px;
}
}
@media only screen and (max-width: 428px) {
#main_nav2 {
    margin-top: -34px !important;
    width: 225px;
}
.hero_btn_pd {
    padding-right: 15px;
    padding-left: 6px;
}
.manu_2 {
    padding: 0 32px !important;
}
#main_nav1 {
    margin-left: -2rem;
}
.hero2 {
    width: 155px;
    margin-left: 18%;
}
}
@media only screen and (max-width: 414px) {

.hero2 {
    width: 147px;
    margin-left: 18%;
}
#main_nav2 {
    width: 215px;
}
}
@media only screen and (max-width: 390px) {
.hero2 {
    width: 137px;
    margin-left: 18%;
}
#main_nav2 {
    width: 205px;
}
}
@media only screen and (max-width: 375px) {

.manu_2 {
    padding: 0 30px !important;
}
.hero2 {
    width: 135px;
    margin-left: 19%;
}
.hero_btn_pd {
    padding-right: 10px;
    padding-left: 4px;
}
#main_nav2 {
    margin-top: -30px !important;
    width: 200px;
    
}
}
