@charset "utf-8";

/* 基本設定
-------------------------------*/
@font-face {
  font-family: "Oswald-B";
  src: url("fonts/Oswald-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "min-M";
  src: url("fonts/NotoSerifJP-Medium.otf") format("opentype");
}


body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont,"Helvetica Neue", "Hiragino Sans","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic","Arial", "Yu Gothic", "Meiryo",verdana, sans-serif;
	font-size: 16px;
	line-height: 1.8em;
	color: #000;
	-webkit-text-size-adjust: 100%;
}
    @media only screen and (max-width:640px){
        body {
            font-size: 14px;
            line-height: 2em;
        }
    }


#wrapper{
	margin:0 auto;
	padding:0;
	width:100%;
	overflow:hidden;
}
/* プリントの表示設定 */
@media print{
	#wrapper{width:1110px; margin:auto;}
}



/* リンク設定
-------------------------------*/
a{color:#0076ce; text-decoration:none;}
a:hover{color:#ed6868;}
a:active, a:focus{outline:0;}

/* PCで電話リンクしない */
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}


/* ヘッダー
-------------------------------*/
* html #header{height:1%;}
#header{
    padding: 10px 0;
    background-color: #fff;
}
h1{
    text-align: center;
    padding: 0 5%;
    font-size: 11px;
    line-height: 1.2em;
    color: #cbcbcb;
    margin-bottom: 10px;
}
#header .inner{
    width: 95%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#header .logo{
    width: 30%;
}
#header .logo .logo-w{
    display: none;
}

    /* PCのみ　スクロールしたらヘッダー固定 */
    @media only screen and (min-width:900px){
        #header.fixed{
            width: 100%;
            padding: 5px 0;
            background-color: #000;
            color: #fff;
            position: fixed;
            z-index: 9999;
        }
        #header.fixed a{
            color: #fff;
        }
        #header.fixed a:hover{
            color:#2ca6e0;
        }
        #header.fixed  h1{
            display: none;
        }
        #header.fixed .logo .logo-ao{
            display: none;
        }
        #header.fixed .logo .logo-w{
            display: block;
        }
    }


    @media only screen and (max-width:900px){
        #header .inner{
            display: block;
        }
        #header .logo{
            width: 70%;
        }
    }
    @media only screen and (max-width:768px){
        #header{
            padding: 5px 0;
        }
        h1{
            text-align: left;
            padding-right: 20%;
            margin-bottom: 5px;
        }
    }




/* フッター
-------------------------------*/
#footer{
    width: 100%;
}
#contact{
    width: 100%;
    background: url(../img/common/bg_footer.jpg)center top no-repeat;
    background-size: cover;
    padding-top: 160px;
    padding-bottom: 110px;
}
#contact .inner{
    width: 90%;
    margin: auto;
    text-align: center;
    color: #fff;
    font-size: 15px;
    line-height: 1.7em;
}
#contact .ttl{
    font-size: 30px;
    line-height: 1.2em;
    font-weight: bold;
    margin: 25px 0 40px;
}
#contact .add{
    margin-bottom: 40px;
}
#contact .add span{
    display: inline-block;
    padding-left: 10px;
}
#contact .time{
    margin-top: 15px;
    margin-bottom: 20px;
}
#contact .time span{
    display: inline-block;
    padding-left: 15px;
}
#contact .cap{
    margin-bottom: 30px;
}
#contact .btn img{
    background-color: transparent;
    transition: 0.3s;
}
#contact .btn:hover img{
    background-color: #222;
}
.g_map{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 770px;/*比率をお好みで*/
}
.g_map iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#footer .copy{
	text-align:center;
	font-size:12px;
	padding:20px 0;
}

/*  ページトップへ */
#pageTop{
	position:fixed;
	bottom:50px;
	right:20px;
}

    @media only screen and (max-width:768px){
        #contact{
            padding-top: 20%;
            padding-bottom: 20%;
        }
        #contact .time span{
            padding-left: 0;
        }
        .g_map{
            padding-top: 70%;/*比率をお好みで*/
        }
    }
    @media only screen and (max-width:640px){
        #contact .inner{
            font-size: 14px;
            line-height: 1.8em;
        }
        #contact .ttl{
            font-size: 24px;
            line-height: 1.2em;
        }
        #pageTop img{
            width:45px;
            height:auto;
        }
    }
    @media only screen and (max-width:420px){
        #contact .cap{
            text-align: left;
        }
    }





/* 共通
-------------------------------*/
.ttlBox{
    width: 100%;
    height: 340px;
    background: url(../img/common/bg_ttlbox.jpg) center top no-repeat;
    padding-top: 130px;
    margin-bottom: 100px;
    color: #fff;
}
.ttlBox .inner{
    width: 90%;
    max-width: 1100px;
    margin: auto;
}
.ttlBox .en{
    margin-bottom: 10px;
}
.ttlBox .ja{
    font-size: 18px;
    font-weight: bold;
}

    @media only screen and (max-width:768px){
        .ttlBox{
            height: auto;
            background-size: cover;
            padding: 30px 0;
            margin-bottom: 50px;
        }
    }
    @media only screen and (max-width:640px){
        .ttlBox .en{
            margin-bottom: 15px;
        }
        .ttlBox .en img{
            width: auto;
            height: 28px;
        }
        .ttlBox.age .en img{
            width: auto;
            height: auto;
            max-height: 28px;
        }
        .ttlBox .ja{
            font-size: 15px;
            font-weight: bold;
        }

    }



.contents{
    width: 90%;
    max-width: 1180px;
    margin: auto;
}
.space{
    clear: both;
    width: 100#;
    height: 120px;
}
    @media only screen and (max-width:640px){
        .space{
            height: 60px;
        }
    }










/* 製品案内
-------------------------------*/

.pro_lead{
    width: 100%;
    max-width: 1214px;
    margin: auto;
    background-color: #f1f1f1;
    padding: 60px;
    position: relative;
    margin-bottom: 60px;
}
.pro_lead .img{
    position: absolute;
    top: -40px;
    right: -40px;
}
.pro_lead .txt{
    width: 520px;
    text-align: justify;
    text-justify: inter-character;
}
.pro_lead .txt .ttl1{
    padding-left: 45px;
    background: url(../img/product/ttl_sub_kei.png) left center no-repeat;
    font-size: 25px;
    line-height: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
}
.pro_lead .txt .ttl2{
    font-size: 24px;
    line-height: 1.7em;
    font-weight: bold;
    color: #989898;
    margin-bottom: 45px;
}
.pro_lead .txt .btn{
    margin-top: 30px;
    text-align: center;
}
.pro_lead .txt .btn img:hover{
    transition: 0.3s;
}
.pro_lead .txt .btn img:hover{
    background-color: #ddd;
}

    @media only screen and (max-width:1294px){
        .pro_lead .img{
            position: absolute;
            top: -3vw;
            right: -3vw;
            width: 49.38vw;
        }
        .pro_lead .txt{
            width: 40vw;
            text-align: justify;
            text-justify: inter-character;
        }
    }

    @media only screen and (max-width:900px){
        .pro_lead .img{
            position: static;
            width: 100%;
            text-align: center;
            margin-top: 60px;
        }
        .pro_lead .txt{
            width: 100%;
            text-align: justify;
            text-justify: inter-character;
        }
    }

    @media only screen and (max-width:768px){
        .pro_lead{
            padding: 10% 0 0;
            margin-bottom: 30px;
        }
        .pro_lead .img{
            padding-bottom: 5%;
            margin-top: 30px;
        }
        .pro_lead .txt{
            width: 90%;
            margin: auto;
        }
    }

    @media only screen and (max-width:640px){
        .pro_lead .img{
            padding-bottom: 0;
        }
        .pro_lead .txt .ttl1{
            padding-left: 35px;
            font-size: 20px;
            line-height: 1.2em;
        }
        .pro_lead .txt .ttl2{
            font-size: 19px;
            line-height: 1.7em;
            margin-bottom: 25px;
        }
        .pro_lead .txt .btn{
            margin-top: 30px;
            text-align: center;
        }
    }

    @media only screen and (max-width:420px){
        .pro_lead .txt .ttl2 br.sp{
            display: none;
        }
        .pro_lead .txt .btn img{
            width: 80%;
            height: auto;
        }
    }


.cata_ttl{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 20px;
    background: url(../img/agency/bg_ttl_kei.png) center center repeat-x;
    text-align: center;
    font-size: 20px;
    line-height: 1.2em;
    font-weight: bold;
}
.cata_ttl span{
    padding: 0 1em;
    background-color: #fff;
}
.cata_txt{
    text-align: center;
    font-size: 95%;
    line-height: 1.8em;
    margin-bottom: 40px;
}
    @media only screen and (max-width:640px){
        .cata_ttl{
            font-size: 18px;
            line-height: 1.2em;
        }
        .cata_txt{
            text-align: left;
            margin-bottom: 30px;
        }
    }


.pro-item{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 30px;
    padding: 20px;
    border: double 3px #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pro-item .img{
    width: 36%;
    text-align: center;
}
.pro-item .img .name{
    text-align: left;
    font-size: 125%;
    line-height: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}
.pro-item .txt{
    width: 60%;
}
.pro-item .txt ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pro-item .txt li{
    width: 49%;
    margin-bottom: 10px;
}
.pro-item .txt li a{
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #000;
    background-image: url(../img/product/icon_pdf.png);
    background-position: 90% center;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 112%;
    line-height: 1.2em;
    font-weight: bold;
    transition: 0.3s;
}

.pro-item .txt li a:hover{
    background-color: #999;
}



.pro-item.multi{
    align-items: flex-start;
}
.pro-item.multi .img{
    width: 30%;
    text-align: center;
}
.pro-item.multi .txt{
    width: 78%;
}


.pro-item .txt .group{
    width: 100%;
    background-color: #f1f1f1;
    border: solid 1px #999;
    margin-bottom: 10px;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.pro-item .txt .group .ttl{
    width: 20%;
    font-weight: bold;
}
.pro-item .txt .group ul{
    width: 77%;
}
.pro-item .txt .group li a{
    font-size: 90%;
    line-height: 1.5em;
}


    @media only screen and (max-width:1070px){
        .pro-item .txt .group .ttl{
            width: 100%;
            margin-bottom: 10px;
        }
        .pro-item .txt .group ul{
            width: 100%;
        }
    }
    @media only screen and (max-width:900px){
        .pro-item{
            display: block;
        }
        .pro-item .img,
        .pro-item.multi .img{
            width: 100%;
            margin-bottom: 20px;
        }
        .pro-item .txt,
        .pro-item.multi .txt{
            width: 100%;
        }
    }

    @media only screen and (max-width:640px){
        .pro-item .txt li{
            width: 100%;
            margin-bottom: 15px;
        }
        .pro-item .txt li:empty,
        .pro-item .txt .group li:empty{
            display: none;
        }

    }
















/* 防犯カメラの特徴
-------------------------------*/
.f-lead{
    width: 100%;
    height: 437px;
    margin-bottom: 50px;
    padding-top: 65px;
    background-position: center top;
    background-repeat: no-repeat;
    color: #fff;
}
#few01.f-lead{
    background-image: url(../img/feature/few01_bg.jpg);
}
#few02.f-lead{
    background-image: url(../img/feature/few02_bg.jpg);
}
#few03.f-lead{
    background-image: url(../img/feature/few03_bg.jpg);
}
#few04.f-lead{
    background-image: url(../img/feature/few04_bg.jpg);
}


.f-lead .txt{
    width: 100%;
    max-width: 530px;
    border: solid 1px #fff;
    padding: 65px 40px 50px;
    background: url(../img/feature/f-lead_bg.png);
    position: relative;
}
.f-lead .txt.num01{
    background: none;
}
.f-lead .txt.num03{
    margin-left: auto;
}
.f-lead .txt .num{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.f-lead .txt .ttl{
    text-align: center;
    font-size: 30px;
    line-height: 1.2em;
    font-weight: bold;
    margin-bottom: 30px;
}
.f-lead .txt .ttl span{
    display: inline-block;
}

.f-check{
    width: 90%;
    max-width: 1280px;
    margin: auto;
    color: #1e1e4b;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.f-check .item{
    width: 48%;
    border: solid 1px #1e1e4b;
    padding: 30px;
}
.f-check.col3 .item{
    width: 32%;
}
.f-check .item .ttl{
    font-size: 24px;
    line-height: 1.4em;
    font-weight: bold;
    text-indent: -62px;
    margin-left: 62px;
    margin-bottom: 20px;
}
.f-check .item .ttl span{
    padding-right: 20px;
}

.bg_hosi{
    width: 100%;
    background: url(../img/feature/few02_bg_hosi.png) center center no-repeat;
}
.f-video{
    width: 100%;
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
    color: #1e1e4b;
    margin-top: 90px;
}
.f-video .txt{
    width: 50%;
    background: url(../img/feature/few02_ttl_obi.png) left top no-repeat;
}
.f-video .txt .inner{
    width: 90%;
    max-width: 470px;
    margin-left: 8%;
}
.f-video .txt .ttl{
    font-size: 36px;
    line-height: 1.2em;
    font-weight: bold;
    color: #fff;
    padding-top: 16px;
    margin-bottom: 30px;
}
.f-video .txt .sub{
    font-size: 24px;
    line-height: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
}
.f-video .mBox{
    width: 50%;
}
.f-video .mBox .inner{
    width: 90%;
    max-width: 640px;
    margin-left: auto;
}

    @media only screen and (max-width:900px){
        .f-check .item,
        .f-check.col3 .item{
            width: 100%;
            margin-bottom: 25px;
        }
        .f-check .item .ttl{
            font-size: 20px;
            line-height: 1.4em;
        }
        .f-video{
            display: block;
            margin-top: 60px;
        }
        .f-video .txt{
            width: 100%;
            background: none;
        }
        .f-video .txt .inner{
            width: 100%;
            max-width: none;
            margin: auto;
        }
        .f-video .txt .ttl{
            width: 100%;
            background: url(../img/feature/few02_ttl_obi.png) center center no-repeat;
            background-size:cover;
            font-size: 30px;
            line-height: 1.2em;
            padding: 10px 5%;
            margin-bottom: 20px;
        }
        .f-video .txt .sub,
        .f-video .txt p{
            padding: 0 5%;
        }
        .f-video .mBox{
            width: 100%;
            margin-top: 30px;
        }
        .f-video .mBox .inner{
            margin: auto;
        }
    }

    @media only screen and (max-width:640px){
        .f-lead{
            height: auto;
            margin-bottom: 25px;
            padding: 40px 0;
            background-size: cover;
        }
        .f-lead .txt .num img{
            width: 50px;
            height: auto;
        }
        .f-lead .txt .ttl{
            font-size: 23px;
            line-height: 1.2em;
            margin-bottom: 20px;
        }
        .f-check .item{
            padding: 5%;
        }
        .f-check .item .ttl{
            font-size: 17px;
            line-height: 1.4em;
            text-indent: -40px;
            margin-left: 40px;
            margin-bottom: 10px;
        }
        .f-check .item .ttl span img{
            width: 30px;
            height: auto;
        }
        .f-check .item .ttl span{
            padding-right: 10px;
        }

        .f-video .txt .ttl{
            font-size: 27px;
            line-height: 1.2em;
        }
        .f-video .txt .sub{
            font-size: 18px;
            line-height: 1.5em;
        }
    }

    @media only screen and (max-width:480px){
        .f-lead .txt{
            padding: 65px 5% 5%;
        }
    }






/* 代理店募集
-------------------------------*/

.age01{
    width: 100%;
    height: 734px;
    background: url(../img/agency/bg_age_main.jpg) center top no-repeat;
    padding: 150px 5% 0;
    text-align: center;
    margin-bottom: 120px;
}
.age01 .img{
    margin-bottom: 40px;
}

    @media only screen and (max-width:640px){
        .age01{
            height: auto;
            padding-top: 40px;
            padding-bottom: 40px;
            background-size: cover;
            margin-bottom: 60px;
        }
        .age01 .img{
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
        .age01 p{
            text-align: left;
        }
    }


.age02{
    margin-bottom: 120px;
    text-align: center;
}
.age02 .ttl{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 50px;
    background: url(../img/agency/bg_ttl_kei.png) center center repeat-x;
    font-size: 25px;
    line-height: 1.2em;
    font-weight: bold;
    color: #1e1e4b;
}
.age02 .ttl span{
    padding: 0 1em;
    background-color: #fff;
    
}
.age02 .txt{
    margin-top: 40px;
    color: #1e1e4b;
    
}

    @media only screen and (max-width:640px){
        .age02{
            margin-bottom: 60px;
        }
        .age02 .ttl{
            margin-bottom: 30px;
            font-size: 20px;
            line-height: 1.2em;
        }
        .age02 .img{
            width: 100%;
            height: 185px;
            overflow: auto;
        }
        .age02 .img img{
            width: 760px;
            max-width: none;
            height: auto;
        }
        .age02 .txt{
            margin-top: 30px;
            text-align: left;
        }
    }



.age03{
    width: 100%;
    padding-top: 1px;
    background: url(../img/agency/bg_kei_ao.png) center top repeat-x;
}
.age03 .inner{
    width: 100%;
    max-width: 1280px;
    margin: auto;
    display: flex;
    align-items: center;
}
.age03 .inner.rev{
    flex-flow: row-reverse;
}
.age03 .img{
    width: 50%;
}
.age03 .txt{
    width: 50%;
    padding: 0 90px;
}
.age03 .txt .ttl{
    height: auto;
    min-height: 94px;
    padding-left: 130px;
    font-size: 25px;
    line-height: 1.3em;
    font-weight: bold;
    color: #1e1e4b;
    margin-bottom: 30px;
    background-position: left center;
    background-repeat: no-repeat;
}
.age03 .txt .ttl.icon1{
    background-image: url(../img/agency/icon01.png);
}
.age03 .txt .ttl.icon2{
    background-image: url(../img/agency/icon02.png);
}
.age03 .txt .ttl.icon3{
    background-image: url(../img/agency/icon03.png);
}
.kei_end{
    width: 100%;
    height: 1px;
    background: url(../img/agency/bg_kei_ao.png) center top repeat-x;
    margin-bottom: 120px;
}

    @media only screen and (max-width:1280px){
        .age03 .txt{
            padding: 0 3%;
        }
    }
    @media only screen and (max-width:768px){
        .age03 .inner{
            max-width: 640px;
            display: block;
        }
        .age03 .img{
            width: 100%;
        }
        .age03 .txt{
            width: 100%;
            padding: 8% 5% 5%;
        }
        .age03 .txt .ttl{
            height: 80px;
            font-size: 20px;
            line-height: 1.3em;
            margin-bottom: 20px;
            background-size: auto 80px;
        }
        .kei_end{
            margin-bottom: 60px;
        }
    }
    @media only screen and (max-width:640px){
        .age03 .txt .ttl{
            height: auto;
            min-height: 70px;
            padding-left: 100px;
            background-size: auto 70px;
        }
    }








/* 会社案内
-------------------------------*/

.com_ttl{
    width: 100%;
    border-top:solid 1px #e5e5e5;
    font-size: 24px;
    line-height: 1em;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #1e1e4b;
    margin-bottom: 50px;
}
.com_ttl div{
    display: inline-block;
    padding-top: 15px;
    border-top: solid 1px #1e1e4b;
}
.com01{
    margin-left: 50px;
    margin-bottom: 120px;
    text-align: justify;
    text-justify: inter-character;
}
.com01 p{
    margin-bottom: 50px;
}
.com01 .name{
    text-align: right;
    font-size: 18px;
    line-height: 1.5em;
    font-family: "min-M",serif;
}
.com01 .name span{
    display: inline-block;
    padding-left: 1em;
}
.com02{
    width: 100%;
    margin-bottom: 120px;
}
.com02 tr{
    border-bottom: solid 1px #e5e5e5;
}
.com02 th{
    width: 30%;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10%;
    vertical-align: top;
}
.com02 td{
    width: 70%;
    padding: 15px;
}
.com03{
    margin-left: 50px;
    margin-bottom: 120px;
}
.com03 dl{
    margin-top: 30px;
}
.com03 dd{
    margin-bottom: 30px;
}

    @media only screen and (max-width:768px){
        .com_ttl{
            font-size: 20px;
            line-height: 1.2em;
            margin-bottom: 30px;
        }
        .com01{
            margin-left: 0;
            margin-bottom: 60px;
        }
        .com01 p{
            margin-bottom: 20px;
        }
        .com01 p br{
            display: none;
        }
        .com02{
            margin-bottom: 60px;
        }
        .com02 th{
            padding-left: 15px;
        }
        .com03{
            margin-left: 0;
            margin-bottom: 50px;
        }
        .com03 dd{
            margin-bottom: 20px;
        }
    }

    @media only screen and (max-width:480px){
        .com02 th{
            display: inline-block;
            width: 100%;
            padding: 5px 10px;
            background-color: #eee;
        }
        .com02 td{
            display: inline-block;
            width: 100%;
            padding: 10px;
        }
    }


.com04{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 5%;
}
.com04 .ttl{
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2em;
    padding: 35px 0;
    background-position: center top;
    background-repeat: no-repeat;
}
.com04 .ttl.bg01{
    background-image: url(../img/company/bg_our01.png);
}
.com04 .ttl.bg02{
    background-image: url(../img/company/bg_our02.png);
}
.com04 .ttl.bg03{
    background-image: url(../img/company/bg_our03.png);
}
.com04 .ttl span{
    color:#000;
}
.com04 .txt{
    border: double 3px #999;
    padding: 3%;
    text-align: center;
    font-size: 18px;
    line-height: 1.8em;
}
.com04 .txt p span{
    color:#0076ce;
}
.com04 .txt .f-big{
    font-size: 23px;
    line-height: 1.5em;
    font-weight: bold;
}
.com04.end{
    margin-bottom: 100px;
}

    @media only screen and (max-width:640px){
        .com04 .ttl{
            font-size: 20px;
            line-height: 1.2em;
            padding: 20px 0;
        }
        .com04 .txt{
            text-align: left;
            font-size: 16px;
            line-height: 1.7em;
        }
        .com04 .txt .f-big{
            font-size: 18px;
            line-height: 1.5em;
        }
        .com04.end{
            margin-bottom: 50px;
        }

    }


/* 追加　*/
.pro_bana01 {
	background-image: url("../img/product/bana_back01.png");
	background-position: left;
	background-repeat: no-repeat;
	width: 100%;
	max-width: 1214px;
	margin: 30px auto 44px;
	
}
.pro_bana01 p {
	color: #FFFFFF;
	font-size: 18px;
	font-weight: bold;
	padding: 12px 3.333em 14px;
}


.pro_bana02 {
	background-image: url("../img/product/bana_back02.png");
	background-position: left;
	background-repeat: no-repeat;
	width: 100%;
	max-width: 1214px;
	margin: 40px auto 30px;
	
}

.pro_bana02 p {
	color: #FFFFFF;
	font-size: 18px;
	font-weight: bold;
	padding: 12px 3.333em 14px;
}


   @media only screen and (max-width:640px){
	   
.pro_bana01 p {
	padding: 12px 26px 14px;
}
.pro_bana02 p {
	padding: 12px 26px 14px;
}	   
	   
	   
}


@media screen and (min-width: 680px){   
  .pc_br { display:block; }
  .sp_br { display:none; }
}
@media screen and (max-width: 680px){   
  .pc_br { display:none; }
  .sp_br { display:block; }
}