@charset "UTF-8";

@media screen and (max-width: 767px) {
  img {width: 100%;} html {height: 100%;} body { height: 100%;}
  .pc_br{display: none;} .sp_br{display: block;}
/*= top =*/
/*========================================================*/
.text { font-size: 0.86em;}
.fv { height: 180px; overflow: hidden;}
.promotions {width: 100%; margin: 5% auto 0;}
.topttl{ margin: 0 0 6%; font-size: 40px;}
.topttl.promo { width: 84%; max-width: 450px; margin: 10% auto 8%;}
.webpromotion { text-align: center; width: 92%; margin: 0 auto 12%;}
.promobox { width: 85%;  display: block; margin: 10% auto 0;  padding: 0;}
.promobox:first-child{ margin: 0 auto;}
.circle { width: 80%;  margin-left: -40%;}
.circle a {line-height: 1.4;}
.promobox h3 {font-size: 38px; margin-left: -40%;  padding: 0;  width: 80%; height: auto;}
.promobox .cap {font-size: 24px; margin: 0 0 3%;}
.topbtn {display: block;  width: 88%; margin: 0 auto; font-size: 24px; height: auto;}
.circle a { font-size: 38px; width: 170px; height: 170px;  padding: 58px 0 0; border-radius: 100px;}
.promobox_bnr { margin: 40px auto 10px; width: 90%;}
.promobox_bnr p { line-height: 1.4; margin: 10px 0; letter-spacing: normal; font-size: 15px;}
.promobox_bnr a{width: 95%;}
.pleasescroll { display: block; position: fixed; top: 75vh;}

/*= WORKS =*/
/*========================================================*/
.worksall { margin: 12.5% 0 10%; padding: 0 0 16%;}
.worksall .topttl { padding: 12% 0 0;}
.workswrap {width: 100%;}
.workbox {display: inline-block; margin: 0 auto 3%; width: 85%;}
.bg {
    border-top: 100px solid #fafafa;
    border-right: 200px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 200px solid transparent;
    text-align: center; left: 37%; top: 0; margin: 0 0 0 -158px;}
.minimam {
    border-top: 100px solid #fefefe;
    border-right: 54px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 50px solid transparent;
    text-align: center;
    left: 50%;
    top: 0;
    margin: 0 0 0 -48px;
}
.works_list {width: 92%; margin: 5% auto 8%; text-align: center;}
.worknm {font-size: 13px;}
.hv {font-size: 20px;}
.works_list img {width: 100%;}

  /*= OUR POWER =*/
  /*========================================================*/
.power { padding: 4% 0 2%;}
.ourpower { padding: 0; width: 100%;}
.minttl {width: 70%; margin: 5% auto 0; font-size: 90%; }
.minttl span {font-size: 16px;}
.pw_ttl{font-size: 30px;}
.pw_ttl span {font-size: 16px; margin: 2% 0 4%;}
.poweritem {width: 72%; display: block; margin: 0 auto 10%;}
.poweritem:first-child{margin: 0 auto 10%;}
.pwimg {width: 80%; margin: 0 auto; padding: 0 0 2%;}
.power_list {margin: 12% 0 0; }
/*= gr8form =================================*/
.response {width: 100%; margin: 0 auto;}
    .response {
        overflow: auto; overflow-X: hidden; height: auto;
        margin: 2% 0 10%;  padding: 7% 4% 0;
        background: #e5f2f8; text-align: center;
    }
    .responsive {
        margin: 0 auto; width: 90%; position: relative;
        background: url(/images/top/gr8formview2_min.jpg) no-repeat;
        background-size: 100%; background-position: 0% 55%;
        height: 160px !important; margin-top: 0 !important;
    }
    .gr8form_area_inner {
        position: relative; top: auto; right: 3%; transform: inherit;
        width: 100%; height: auto; z-index: 10000; margin: 0 auto;
        max-width: initial; min-width: initial;
        transform: translateX(-50%); left: 50%;
    }
    .gr8form_cap_pink { text-align: center}
    .gr8form_area {    margin: 5% 0 8%;}
    h2.gr8form_cap_pink p{font-size: 14px; display: block;}
    h2.gr8form_cap_pink .maxtxt { font-size: 1.06em; margin: 4px 3px; }
    .gr8form_promo_logo {width: 58%; max-width: 280px; margin: 10px auto 15px;}
    .gr8form_area .price {width: 53%; margin: 0 auto; max-width: 395px;}
    .gr8form_list li { width: 47%; margin: 1% 1.4%}
    
/*= news =*/
/*========================================================*/
.newswrap { width: 84%; margin: 8% auto 0;}
.newstext {padding: 8% 0 7%;}
.news { margin: 4% 0 10%;}
.deta {margin: 0 3% 0 0; display: inline-block;}
.type { width: auto; font-size: 12px; display: inline-block;
    padding: 0.2% 6%; margin: 0 3% 0 0; width: 38%;
}
.box {color: #333;  width: 100%; margin: 4% 0 0; display: block; clear: both;}
.newsbtn{display: block; width: 100%; margin: 10% auto 0; font-size: 24px; height: auto;}
/*= スライド =*/
/*========================================================*/
.pink-frame {display: none;}
.slide { width: 100%; height: 100%; overflow: initial; background: none;}
.promotions { width: 100%; margin: 80% auto 0;}
#content-slider { overflow: initial; height: 100% !important;}
/***キャプション***/
.content-slider p {display: none; height: 120px;}
.content-slider .active p { display: block; }
.content-slider li { opacity: 1; }
.content-slider img.BWFilter, .content-slider img.BWfade { display: none; }
.content-slider p {
    display: block; height: initial;
    left: 0;  position: relative; margin: 0;
    width: 100%; bottom: 0; padding: 3% 4%; font-size: 15px;
    line-height: 1.6; background: #111; text-align: center;
}
.content-slider .ttl { font-size: 18px; padding: 0 0 1%; letter-spacing: 1.2px;}
.content-slider .active + li img, .content-slider .active + li canvas.BWfade {
    border-right: none; border-left: none; border-top: none;  border-bottom: none; height: auto; padding: 0;
}
.btn_res a {display: block; width: 100%; line-height: 3;}

/*= デバイス微調整 =*/
/*========================================================*/
.promotions { width: 100%;  margin: 25px auto 0;}


}