@charset "utf-8";

/* リセット */
#campaign ul {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
    -webkit-padding-start: 0;
}

.breadcrumb-wrap {
    margin-bottom: 0;
}

.main-bg {
    background-image: url(/images/brand/one_up/main_bg.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
}

/* pc用css 画面サイズが768pxからはここを読み込む
__________________________________________*/
@media screen and (min-width:768px) {
    /* common
  __________________________________________*/

    div.cnt_wrap {
        max-width: 980px;
        width: 100%;
        margin: 0 auto;
    }

    div.wht,
    div.rsn,
    div.rlf,
    div.vrt,
    div.rlx,
    div.std,
    div.int,
    div.enr,
    div.prc,
    div.flw,
    div.srv,
    div.prg,
    div.shp {
        padding: 40px 0 100px;
    }

    div.bd {
        width: 100%;
        height: 12px;
        background: url(/images/brand/cocokara/bd.png) repeat;
    }

    div.rsv_wrap {
        margin: 55px auto 0px;
        width: 550px;
        height: 80px;
    }

    div.rsv_wrap a {
        text-decoration: none;
        display: block;
        position: relative;
    }

    div.rsv_wrap a:after {
        content: '';
        width: 550px;
        height: 80px;
        background: #209dc7;
        border-radius: 5px;
        display: block;
        position: absolute;
        top: 0;
        margin-top: 8px;
    }

    div.rsv_wrap:hover {
        margin-top: 63px;
        margin-bottom: -8px;
    }

    div.rsv_wrap a:hover:after {
        display: none;
    }

    div.rsv_wrap a div.rsv_cnt {
        background: #fff;
        color: #3e3d3d;
        border-radius: 5px;
        font-size: 25px;
        font-weight: bold;
        height: 80px;
        position: relative;
        z-index: 10;
        line-height: 1;
    }

    div.rsv_wrap a div.rsv_cnt span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 1em;
        text-align: center;
    }

    div.rsv_wrap a div.rsv_cnt span:after {
        content: url(/images/brand/cocokara/arrow.png);
        width: 14px;
        height: 19px;
        margin-left: 10px;
    }

    h2 {
        text-align: center;
    }

    h3 {
        margin-bottom: 15px !important;
    }

    .sp {
        display: none;
    }

    /* main
  __________________________________________*/

    div.main {
        background: #fff;
        width: 100%;
        text-align: center;
    }

    /* wht
  __________________________________________*/

    div.wht {
        background: #6cc4d7;
    }

    div.wht h2 {
        margin-bottom: 45px;
    }

    div.wht p {
        width: 81.63%;
        max-width: 39em;
        margin: 0 auto;
        color: #fff;
        font-size: 20px;
        line-height: 26px;
    }

/* バナー表示エリア */
  .bnr_container {
      padding: 40px 0;
    }

    .bnr_container a img:hover {
      opacity: .8;
    }


    /*---特典のご利用方法---*/
    /*
    .max-w {
        margin-left: auto;
        margin-right: auto;
    }

    .color-w {
        color: #fff;
    }

    .section-wrap {
        padding: 2.5em 0 3em;
    }

    .use-wrap {
        background: #feffe9;
    }

    .use-wrap h3 {
        position: relative;
        background: #f21400;
        padding: .5em 0;
    }

    .use-wrap h3:before,
    .use-wrap h3:after {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        z-index: 1;
    }

    .use-wrap h3:before {
        top: 0;
        left: 0;
        border-width: 25px 0px 25px 15px;
        border-color: transparent transparent transparent #feffe9;
        border-style: solid;
    }

    .use-wrap h3:after {
        top: 0;
        right: 0;
        border-width: 25px 15px 25px 0px;
        border-color: transparent #feffe9 transparent transparent;
        border-style: solid;
    }

    .use-icon {
        max-width: 100px;
        margin: 0 auto;
    }

    .use-ttl-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .use-txt {
        margin: 1em auto 0;
        max-width: 300px;
    }
    .use-pc-wrap,
    .use-sp-wrap {
        margin-bottom: 1em;
    }

    .use-wrap h3 {
        margin: 1em auto !important;
        max-width: 450px;
    }

    .use-num {
        background: #f21400;
        padding: .2em .5em .1em;
        margin-right: .2em;
        border-radius: 1em;
    }

    .use-pc-wrap,
    .use-sp-wrap {
        position: relative;
    }

    .use-txt a:before {
        font-family: FontAwesome;
        content: "\f138";
        text-decoration: none !important;
    }

    .use-arrow .use-pc-wrap,
    .use-sp-wrap {
        border: 1px solid #ccc;
        background: #fff;
        border-radius: .3em;
        margin: 0 .7em;
        padding: .5em !important;
        flex: 1;
        display: inline-block;
    }

    .use-arrow {
        display: flex;
        justify-content: space-between;
    }

    .use-pc-wrap:before {
  content: "";
  position: absolute;
  border-width: .8em 0 .8em .8em;
  border-color: transparent #f7c2d2;
  border-style: solid;
  top: 50%;
  right: -1.25em;
}

.btn-lg {
  font-size: 1.4rem;
}

.btn-form, .btn-login, .btn-reserve, .btn-lpn {
  border-radius: 5em;
  max-width: 400px;
  margin: 1em auto 0;
  padding: .8em;
  letter-spacing: .1rem;
}

.btn-lpn {
  background: #6c3;
}
*/











    /* rsn
  __________________________________________*/

    div.rsn {
        background: #fff;
    }

    div.rsn p {
        text-align: center;
    }

    div.rsn p {
        margin-bottom: 0;
    }

    div.rsn ul {
        width: 720px;
        height: 610px;
        margin: 0 auto;
        position: relative;
    }

    div.rsn ul li {
        list-style: none;
        width: 330px;
        float: left;
        margin-top: 55px;
    }

    div.rsn ul li:nth-child(1),
    div.rsn ul li:nth-child(3) {
        margin-right: 20px;
    }

    div.rsn ul li h3 {
        font-weight: bold;
        font-size: 18px;
        position: relative;
        height: 25px;
    }

    div.rsn ul li h3 span {
        position: absolute;
        top: 0;
        left: 0;
        left: 0;
        margin: auto 20px;
    }

    div.rsn ul li h3:before {
        content: '';
        display: block;
        height: 25px;
        width: 8px;
        background: #50bbdf;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* rlf
  __________________________________________*/

    div.rlf {
        background: #f8f4e6;
    }

    div.rlf h2 {
        margin-bottom: 45px;
    }

    div.rlf ul {
        width: 79.59%;
        max-width: 800px;
        margin: 0 auto;
        list-style: none;
    }

    div.rlf ul li {
        width: 100%;
        max-width: 800px;
        height: 250px;
    }

    div.rlf ul li img {
        width: 45%;
        max-width: 382px;
        float: left;
        margin-right: 5%;
    }

    div.rlf ul li div {
        float: left;
        width: 50%;
        max-width: 380px;
        color: #505050;
    }

    div.rlf ul li div h3 {
        border-left: #50bbdf solid 8px;
        padding-left: 8px;
        font-size: 22px;
        line-height: 27px;
    }

    div.rlf ul li div p {
        padding-left: 16px;
        font-size: 18px;
        line-height: 23px;
    }

    /* vrt
  __________________________________________*/

    div.vrt {
        background: #fff;
    }

    div.vrt ul {
        width: 79.59%;
        max-width: 800px;
        margin: 0 auto;
        list-style: none;
    }

    div.vrt ul li {
        width: 100%;
        max-width: 800px;
        display: inline-block;
        margin-top: 45px;
    }

    div.vrt ul li img {
        width: 45%;
        max-width: 382px;
        float: left;
        margin-right: 5%;
        display: inline-block;
    }

    div.vrt ul li div {
        float: left;
        width: 50%;
        max-width: 380px;
        color: #505050;
        display: inline-block;
    }

    div.vrt ul li div h3 {
        border-left: #50bbdf solid 8px;
        padding-left: 8px;
        font-size: 22px;
        line-height: 27px;
    }

    div.vrt ul li div p {
        padding-left: 16px;
        font-size: 18px;
        line-height: 23px;
    }

    /* rlx
  __________________________________________*/

    div.rlx {
        background: #f8f4e6;
    }

    div.rlx ul {
        width: 79.59%;
        max-width: 800px;
        margin: 0 auto;
        list-style: none;
    }

    div.rlx ul li {
        width: 100%;
        max-width: 800px;
        display: inline-block;
        margin-top: 45px;
    }

    div.rlx ul li img {
        width: 45%;
        max-width: 382px;
        float: left;
        margin-right: 5%;
        display: inline-block;
    }

    div.rlx ul li div {
        float: left;
        width: 50%;
        max-width: 380px;
        color: #505050;
        display: inline-block;
    }

    div.rlx ul li div h3 {
        border-left: #50bbdf solid 8px;
        padding-left: 8px;
        font-size: 22px;
        line-height: 27px;
    }

    div.rlx ul li div p {
        padding-left: 16px;
        font-size: 18px;
        line-height: 23px;
    }

    /* std
  __________________________________________*/

    div.std {
        background: #fff;
    }

    div.std ul {
        width: 79.59%;
        max-width: 800px;
        margin: 0 auto;
        list-style: none;
    }

    div.std ul li {
        width: 100%;
        max-width: 800px;
        display: inline-block;
        margin-top: 45px;
    }

    div.std ul li img {
        width: 45%;
        max-width: 382px;
        float: left;
        margin-right: 5%;
        display: inline-block;
    }

    div.std ul li div {
        float: left;
        width: 50%;
        max-width: 380px;
        color: #505050;
        display: inline-block;
    }

    div.std ul li div h3 {
        border-left: #50bbdf solid 8px;
        padding-left: 8px;
        font-size: 22px;
        line-height: 27px;
    }

    div.std ul li div p {
        padding-left: 16px;
        font-size: 18px;
        line-height: 23px;
    }

    /* int
  __________________________________________*/

    div.int {
        background: #bbe9f3;
        text-align: center;
    }

    div.int h2 {
        margin-bottom: 25px;
    }

    div.int p {
        width: 23em;
        margin: 0 auto 65px;
        font-size: 22px;
        color: #505050;
        line-height: 27px;
        text-align: left;
    }

    div.int p span {
        font-size: 14px;
    }

    div.int ul {
        width: 100%;
        /*max-width: 850px;*/
        list-style: none;
        margin: 0 auto;
        padding-left: 0;
        display: inline-block;
    }

    div.int ul li {
        /*float: left;*/
        background: #fff;
        display: inline-block;
        width: 17%;
        max-width: 189px;
    }

    div.int ul li a img {
        width: 100%;
    }

    div.int ul li + li {
        margin-left: 3.333%;
    }

    div.int ul li a:hover {
        opacity: 0.65;
    }


    /* enr
  __________________________________________*/

    div.enr {
        background: #fff;
    }

    div.enr div.enr_cnt {
        margin: 0 130px;
        max-width: 720px;
        width: 73.469%;
    }

    div.enr p.enr_sub {
        text-align: center;
        font-size: 22px;
        color: #505050;
        font-weight: bold;
        margin-bottom: 60px;
    }

    div.enr h3 {
        border-left: #50bbdf solid 8px;
        padding-left: 8px;
        font-size: 22px;
    }

    div.enr p.enr_dsp {
        margin-left: 18px;
        margin-bottom: 32px;
        font-size: 18px;
    }

    div.enr p.enr_dsp span {
        font-size: 14px;
    }

    div.enr div.enr_cnt h4 {
        list-style: none;
        margin-left: 44px;
        background: linear-gradient(transparent 50%, #fff338 70%);
        width: 11em;
        color: #505050;
    }

    div.enr div.enr_cnt ul {
        list-style: none;
        font-size: 18px;
    }

    div.enr div.enr_cnt ul li {
        padding-left: 1em;
    }

    div.enr p.enr_ctn {
        font-size: 18px;
        margin-left: 44px;
        margin-bottom: 0 !important;
    }

  .ent_subtit {
    font-size: 18px;
    color: #505050;
  }

    /*---入会方法---*/
    .enter_tit {
        margin-bottom: 40px;
    }

    .enter {
        max-width: 800px;
        border: 6px solid #27c9ff;
        border-radius: 10px;
        padding: 32px;
    }

    /* prc
  __________________________________________*/

    div.prc {
        background: #bbe9f3;
    }

    div.prc p.sub {
        color: #505050;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 50px !important;
    }

    div.prc div.prc_cnt {
        width: 81.83%;
        max-width: 800px;
        margin: 0 auto;
        padding-bottom: 40px;
    }

    div.prc div.prc_cnt h3 {
        color: #505050;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
    }

    div.prc table {
        background: #fff;
    }

    div.prc table td {
        border: solid #505050 1px;
        font-size: 18px;

    }

    div.prc table tr.prc_th {
        background: #666;
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
    }

    div.prc table tr.prc_th td {
        padding: 0.5em 0;
    }

    div.prc table td.prc_cpn {
        width: 330px;
        padding-left: 35px;
    }

    div.prc table td.prc_tm {
        width: 260px;
    }

    div.prc table td.prc_tm ul {
        list-style: none;
        margin: 1em auto !important;
        padding: 0;
        width: 10em;
    }

    div.prc table td.prc_prc {
        text-align: center;
        width: 210px;
    }

    div.prc p.prc_ctn {
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        width: 33em;
        float: right;
        margin-top: 8px;
    }

    /* flw
  __________________________________________*/

    div.flw {
        background: #fff;
    }

    div.flw h2 {
        margin-bottom: 15px;
    }

    div.flw p {
        font-size: 22px;
        font-weight: bold;
        color: #505050;
        text-align: center;
        margin-bottom: 60px;
    }

    div.flw ul {
        list-style: none;
        width: 91.836%;
        max-width: 900px;
        flex-wrap: wrap;
        display: flex;
        margin: 0 4.08%;
    }

    div.flw ul li {
        width: 42.857%;
        max-width: 420px;
        display: inline-block;
        margin-bottom: 50px;
    }

    div.flw ul li:nth-child(2n) {
        margin-left: 6.666%;
    }

    div.flw ul li img {
        width: 100%;
    }

    div.flw ul li h3 {
        border-left: #50bbdf solid 8px;
        padding-left: 8px;
        font-size: 22px;
        font-weight: bold;
        margin: 10px 0 !important;
    }

    div.flw ul li p {
        padding-left: 16px;
        font-size: 18px;
        font-weight: normal;
        text-align: left;
        margin: 0;
    }

    /* srv
  __________________________________________*/

    div.srv {
        background: #f8f4e6;
    }

    div.srv p.sub {
        text-align: center;
        font-weight: bold;
        color: #505050;
        font-size: 22px;
        line-height: 1;
    }

    div.srv ul {
        width: 79.59%;
        max-width: 800px;
        margin: 0 auto;
        list-style: none;
    }

    div.srv ul li {
        width: 100%;
        max-width: 800px;
        display: inline-block;
        margin-top: 45px;
    }

    div.srv ul li img {
        width: 45%;
        max-width: 382px;
        float: left;
        margin-right: 5%;
        display: inline-block;
    }

    div.srv ul li div {
        float: left;
        width: 50%;
        max-width: 380px;
        color: #505050;
        display: inline-block;
    }

    div.srv ul li div h3 {
        border-left: #50bbdf solid 8px;
        padding-left: 8px;
        font-size: 22px;
        line-height: 27px;
    }

    div.srv ul li div p {
        padding-left: 16px;
        font-size: 18px;
        line-height: 23px;
    }

    /* prg
  __________________________________________*/

    div.prg {
        background: #fff;
    }

    div.prg p.sub {
        text-align: left;
        font-weight: bold;
        color: #505050;
        font-size: 22px;
        line-height: 1;
        width: 29em;
        margin: 0 auto;
    }

    div.prg p.sub span {
        font-size: 14px;
        font-weight: normal;
    }

    div.prg ul {
        width: 79.59%;
        max-width: 800px;
        margin: 0 auto;
        list-style: none;
    }

    div.prg ul li {
        width: 100%;
        max-width: 800px;
        display: inline-block;
        margin-top: 45px;
    }

    div.prg ul li img {
        width: 45%;
        max-width: 382px;
        float: left;
        margin-right: 5%;
        display: inline-block;
    }

    div.prg ul li div {
        float: left;
        width: 50%;
        max-width: 380px;
        color: #505050;
        display: inline-block;
    }

    div.prg ul li div h3 {
        border-left: #50bbdf solid 8px;
        padding-left: 8px;
        font-size: 22px;
        line-height: 27px;
    }

    div.prg ul li div p {
        padding-left: 16px;
        font-size: 18px;
        line-height: 23px;
    }

    /* shp
  __________________________________________*/

    div.shp {
        background: #ececec;
    }

    div.shp h2 {
        margin-bottom: 60px;
    }

    div.shp ul {
        list-style: none;
        padding: 0;
        width: 89.79%;
        max-width: 880px;
        margin: 0 auto;
    }

    div.shp ul li.shp_list {
        background: #fff;
        box-shadow: 0px 2px 4.75px 0.25px rgba(4, 0, 0, 0.3);
    }

    div.shp ul li div.shp_cnt {
        padding: 35px 40px;
    }

    div.shp ul li div.shp_cnt h3 {
        border-left: #27c9ff 8px solid;
        padding-left: 8px;
    }

    div.shp ul li div.shp_cnt div.shp_dtl {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 44px;
    }

    div.shp ul li div.shp_cnt div.shp_dtl img {
        max-width: 250px;
        width: 41.25%;
        height: auto;
    }

    div.shp ul li div.shp_cnt div.shp_dtl table {
        margin-left: 5%;
        width: 53.75%;
        max-width: 470px;
    }

    div.shp ul li div.shp_cnt div.shp_dtl table tr {
        border-bottom: solid 2px #dbdbdb;
    }

    div.shp ul li div.shp_cnt div.shp_dtl table tr th {
        width: 7em;
        padding: 1em 0;
    }

    div.shp ul li div.shp_cnt div.shp_dtl table tr td {
        padding: 1em 0;
    }

    div.shp ul li div.shp_cnt div.shp_dtl table tr td ul {
        padding: 0;
    }

    div.dtl_wrap {
        margin: 0 auto 40px;
        width: 440px;
        height: 80px;
    }

    div.dtl_wrap a {
        text-decoration: none;
        display: block;
        position: relative;
    }

    div.dtl_wrap a:after {
        content: '';
        width: 440px;
        height: 80px;
        background: #209dc7;
        border-radius: 5px;
        display: block;
        position: absolute;
        top: 0;
        margin-top: 8px;
    }

    div.dtl_wrap a div.dtl_cnt {
        background: #27c9ff;
        color: #fff;
        border-radius: 5px;
        font-size: 25px;
        font-weight: bold;
        height: 80px;
        position: relative;
        z-index: 10;
        line-height: 1;
    }

    div.dtl_wrap a div.dtl_cnt span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 1em;
        text-align: center;
    }

    div.dtl_wrap a div.dtl_cnt span:after {
        content: url(/images/brand/cocokara/arrow_02.png);
        width: 14px;
        height: 19px;
        margin-left: 10px;
    }

    div.dtl_wrap:hover {
        position: relative;
        top: 8px;
    }

    div.dtl_wrap a:hover:after {
        display: none;
    }
}

/* sp用css 画面サイズが750px以下はここを読み込む
__________________________________________*/
@media screen and (max-width:767px) {
    /* common
  __________________________________________*/

    div.cnt_wrap {
        width: 100%;
        margin: 0 auto;
    }

    div.wht,
    div.rsn,
    div.rlf,
    div.vrt,
    div.rlx,
    div.std,
    div.int,
    div.enr,
    div.prc,
    div.flw,
    div.srv,
    div.prg,
    div.shp {
        padding: 4.081vw 0 10.204vw;
    }

    div.bd {
        width: 100%;
        height: 1.22vw;
        background: url(/images/brand/cocokara/bd.png) repeat;
    }

    div.rsv_wrap {
        margin: 8vw auto 0px;
        width: 80vw;
        height: 80px;
    }

    div.rsv_wrap a {
        text-decoration: none;
        display: block;
        position: relative;
    }

    div.rsv_wrap a:after {
        content: '';
        width: 80vw;
        height: 15vw;
        background: #209dc7;
        border-radius: 5px;
        display: block;
        position: absolute;
        top: 0;
        margin-top: 8px;
    }

    div.rsv_wrap a div.rsv_cnt {
        background: #fff;
        color: #3e3d3d;
        border-radius: 5px;
        font-size: 12px;
        font-size: 3.75vw;
        font-weight: bold;
        height: 15vw;
        position: relative;
        z-index: 10;
        line-height: 1;
    }

    div.rsv_wrap a div.rsv_cnt span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 1em;
        text-align: center;
    }

    div.rsv_wrap a div.rsv_cnt span:after {
        content: '';
        display: inline-block;
        background: url(/images/brand/cocokara/arrow.png) no-repeat;
        background-size: contain;
        width: 2.48vw;
        height: 3.35vw;
        margin-left: 2vw;
    }

    h2 {
        text-align: center;
    }

    h2 img {
        margin: 0 !important;
    }

    h3 {
        margin-bottom: 3.2vw !important;
    }

    .sp {
        display: block;
    }

    /* main
  __________________________________________*/

    div.main {
        background: #fff;
        width: 100%;
        text-align: center;
    }

    div.main img {
        width: 100%;
        margin: 0 !important;
    }

    /* wht
  __________________________________________*/

    div.wht {
        background: #6cc4d7;
    }

    div.wht h2 {
        text-align: center;
        margin-bottom: 4.08vw;
    }

    div.wht h2 img {
        height: 5vw;
        width: auto;
        margin: 0 !important;
    }

    div.wht p {
        width: 22em;
        margin: 0 auto;
        color: #fff;
        font-size: 12px;
        font-size: 3.75vw;
        line-height: 1.3;
    }

  /* バナー表示エリア */
  .bnr_container {
      padding: 1.5em 0.8em;
    }

  .bnr_container a img {
      width: 100%;
      max-width: 640px;
    }

    /* rsn
  __________________________________________*/

    div.rsn {
        background: #fff;
    }

    div.rsn h2 img {
        height: 5vw;
        width: auto;
    }

    div.rsn p {
        margin-bottom: 0;
        font-size: 12px;
        font-size: 3.75vw;
        text-align: center;
    }

    div.rsn p span {
        font-size: 11px;
        font-size: 3.43vw;
    }

    div.rsn ul {
        width: 80vw;
        margin: 0 10vw;
        position: relative;
        padding: 0;
        display: inline-block;
    }

    div.rsn ul li {
        list-style: none;
        width: 80vw;
        float: left;
        margin-top: 9.333vw;
        display: inline-block;
    }

    div.rsn ul li h3 {
        font-weight: bold;
        font-size: 4.266vw;
        position: relative;
        height: 6.4vw;
        color: #505050;
        border-left: #50bbdf solid 2.133vw;
    }

    div.rsn ul li h3 span {
        position: absolute;
        top: 0;
        left: 0;
        left: 0;
        margin: auto 0 auto 2.133vw;
    }

    div.rsn ul li img {
        width: 80vw;
    }

    /* rlf
  __________________________________________*/

    div.rlf {
        background: #f8f4e6;
    }

    div.rlf h2 {
        margin-bottom: 0;
    }

    div.rlf h2 img {
        height: 5vw;
        width: auto;
    }

    div.rlf ul {
        width: 80vw;
        margin: 0 10vw;
        list-style: none;
        padding: 0;
        display: inline-block;
    }

    div.rlf ul li {
        width: 80vw;
        display: inline-block;
        margin-top: 9.333vw;
    }

    div.rlf ul li img {
        float: left;
        width: 80vw;
        margin: 0 !important;
    }

    div.rlf ul li div {
        float: left;
        width: 80vw;
        color: #505050;
        margin-top: 5vw;
    }

    div.rlf ul li div h3 {
        border-left: #50bbdf solid 2.133vw;
        padding-left: 2.133vw;
        font-size: 4.266vw;
        line-height: 1.22;
    }

    div.rlf ul li div p {
        padding-left: 4.266vw;
        font-size: 3.6vw;
        line-height: 1.7;
    }

    /* vrt
  __________________________________________*/

    div.vrt {
        background: #fff;
    }

    div.vrt h2 {
        margin-bottom: 0;
    }

    div.vrt h2 img {
        height: 5vw;
        width: auto;
    }

    div.vrt ul {
        width: 80vw;
        margin: 0 10vw;
        list-style: none;
        padding: 0;
        display: inline-block;
    }

    div.vrt ul li {
        width: 80vw;
        display: inline-block;
        margin-top: 9.333vw;
    }

    div.vrt ul li img {
        float: left;
        width: 80vw;
        margin: 0 !important;
    }

    div.vrt ul li div {
        float: left;
        width: 80vw;
        color: #505050;
        margin-top: 5vw;
    }

    div.vrt ul li div h3 {
        border-left: #50bbdf solid 2.133vw;
        padding-left: 2.133vw;
        font-size: 4.266vw;
        line-height: 1.22;
    }

    div.vrt ul li div p {
        padding-left: 4.266vw;
        font-size: 3.43vw;
        line-height: 1.7;
    }

    /* rlx
  __________________________________________*/

    div.rlx {
        background: #f8f4e6;
    }

    div.rlx h2 {
        margin-bottom: 0;
    }

    div.rlx h2 img {
        height: 5vw;
        width: auto;
    }

    div.rlx ul {
        width: 80vw;
        margin: 0 10vw;
        list-style: none;
        padding: 0;
        display: inline-block;
    }

    div.rlx ul li {
        width: 80vw;
        display: inline-block;
        margin-top: 9.333vw;
    }

    div.rlx ul li img {
        float: left;
        width: 80vw;
        margin: 0 !important;
    }

    div.rlx ul li div {
        float: left;
        width: 80vw;
        color: #505050;
        margin-top: 5vw;
        display: inline-block;
    }

    div.rlx ul li div h3 {
        border-left: #50bbdf solid 2.133vw;
        padding-left: 2.133vw;
        font-size: 4.266vw;
        line-height: 1.22;
    }

    div.rlx ul li div p {
        padding-left: 4.266vw;
        font-size: 3.43vw;
        line-height: 1.7;
    }

    /* std
  __________________________________________*/

    div.std {
        background: #fff;
    }

    div.std h2 {
        margin-bottom: 0;
    }

    div.std h2 img {
        height: 5vw;
        width: auto;
    }

    div.std ul {
        width: 80vw;
        margin: 0 auto;
        list-style: none;
        padding: 0;
    }

    div.std ul li {
        width: 80vw;
        display: inline-block;
        margin-top: 9.333vw;
    }

    div.std ul li img {
        float: left;
        width: 80vw;
        margin: 0 !important;
    }

    div.std ul li div {
        float: left;
        width: 80vw;
        color: #505050;
        margin-top: 5vw;
        display: inline-block;
    }

    div.std ul li div h3 {
        border-left: #50bbdf solid 2.133vw;
        padding-left: 2.133vw;
        font-size: 4.266vw;
        line-height: 1.22;
    }

    div.std ul li div p {
        padding-left: 4.266vw;
        font-size: 3.6vw;
        line-height: 1.7;
    }


    /* int
  __________________________________________*/

    div.int {
        background: #bbe9f3;
    }

    div.int h2 {
        margin-bottom: 4.08vw;
    }

    div.int h2 img {
        height: 5vw;
    }

    div.int p {
        width: 23em;
        margin: 0 auto 9.333vw;
        font-size: 12px;
        font-size: 3.75vw;
        color: #505050;
        line-height: 1.22;
    }

    div.int p span {
        font-size: 11px;
        font-size: 3.45vw;
    }

    div.int ul {
        width: 80vw;
        list-style: none;
        margin: 0 10vw;
        padding-left: 0;
        display: inline-block;
    }

    div.int ul li {
        float: left;
        display: inline-block;
    }

    div.int ul li:nth-child(1),
    div.int ul li:nth-child(2),
    div.int ul li:nth-child(3),
    div.int ul li:nth-child(4) {
        margin-bottom: 6vw;
    }

    div.int ul li:nth-child(2n) {
        margin-left: 6vw;
    }

    div.int ul li a img {
        width: 37vw;
        height: 29.546vw;
        margin-bottom: 0 !important;
    }


    /* enr
  __________________________________________*/

    div.enr {
        background: #fff;
    }

    div.enr div.enr_cnt {}

    div.enr p.enr_sub {
        width: 23em;
        margin: 0 auto 9.333vw;
        font-size: 12px;
        font-size: 3.75vw;
        color: #505050;
        line-height: 1.22;
    }

    div.enr h2 {
        margin-bottom: 4.08vw;
    }

    div.enr h2 img {
        height: 5vw;
        width: auto;
    }

    div.enr h3 {
        border-left: #50bbdf solid 2.133vw;
        padding-left: 2.133vw;
        width: 80vw;
        margin: 0 auto;
        font-size: 4.266vw;
        color: #505050;
    }

    div.enr p.enr_dsp {
        margin: 0 auto;
        font-size: 12px;
        font-size: 3.75vw;
        line-height: 23px;
        margin-bottom: 50px;
        width: 80vw;
    }

    div.enr p.enr_dsp span {
        font-size: 11px;
        font-size: 3.45vw;
    }

    div.enr div.enr_cnt h4 {
        list-style: none;
        margin-left: 44px;
        margin-top: -40px !important;
        background: linear-gradient(transparent 50%, #fff338 70%);
        width: 11em;
        color: #505050;
    }

    div.enr div.enr_cnt {}

    div.enr div.enr_cnt ul {
        list-style: none;
        font-size: 11px;
        font-size: 3.3vw;
        width: 80vw;
    }

    div.enr div.enr_cnt ul li {
        padding-left: 1em;
    }

    div.enr p.enr_ctn {
        font-size: 12px;
        font-size: 3.75vw;
        width: 80vw;
        margin: 0 auto;
        margin-bottom: 0 !important;
  }

  .ent_subtit {
    font-size: 3vw;
    color: #505050;
  }

    /* prc
  __________________________________________*/
    div.prc {
        background: #bbe9f3;
    }

    div.prc h2 {
        margin-bottom: 4.08vw;
    }

    div.prc h2 img {
        height: 5vw;
        width: auto;
    }

    div.prc p.sub {
        width: 23em;
        margin: 0 auto 9.333vw;
        font-size: 12px;
        font-size: 3.75vw;
        color: #505050;
        line-height: 1.22;
    }

    div.prc div.prc_cnt {
        width: 94vw;
        margin: 0 3vw;
        display: inline-block;
    }

    div.prc div.prc_cnt h3 {
        color: #505050;
        font-size: 4vw;
        font-weight: bold;
        text-align: center;
    }

    div.prc table {
        background: #fff;
    }

    div.prc table td {
        border: solid #505050 1px;
        font-size: 12px;
        font-size: 3.75vw;
    }

    div.prc table tr.prc_th {
        background: #666;
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 12px;
        font-size: 3.75vw;
    }

    div.prc table tr.prc_th td {
        padding: 0.5em 0;
    }

    div.prc table td.prc_cpn {
        width: 42vw;
        padding: 0 1vw;
    }

    div.prc table td.prc_tm {
        width: 32vw;
        padding: 0 1vw;
    }

    div.prc table td.prc_tm ul {
        list-style: none;
        margin: 1em 0 !important;
        padding: 0;
    }

    div.prc table td.prc_prc {
        text-align: center;
        width: 22vw;
        padding: 0 1vw;
    }

    div.prc p.prc_ctn {
        font-size: 12px;
        font-size: 3.75vw;
        font-weight: normal;
        text-align: left;
        width: 17em;
        float: right;
        display: inline-block;
        margin-top: 8px;
    }

    /* flw
  __________________________________________*/

    div.flw {
        background: #fff;
    }

    div.flw h2 {
        margin-bottom: 4.08vw;
    }

    div.flw h2 img {
        height: 5vw;
        width: auto;
    }

    div.flw p {
        width: 19em;
        margin: 0 auto;
        font-size: 12px;
        font-size: 3.75vw;
        color: #505050;
        line-height: 1.22;
    }

    div.flw ul {
        list-style: none;
        width: 80vw;
        display: inline-block;
    }

    div.flw ul li {
        width: 80vw;
        float: left;
        margin-top: 9.333vw;
        display: inline-block;
    }

    div.flw ul li img {
        width: 80vw;
    }

    div.flw ul li h3 {
        border-left: #50bbdf solid 8px;
        padding-left: 8px;
        font-size: 4.266vw;
        color: #505050;
        font-weight: bold;
        margin: 10px 0 !important;
    }

    div.flw ul li p {
        padding-left: 16px;
        font-size: 12px;
        font-size: 3.75vw;
        font-weight: normal;
        text-align: left;
        margin: 0;
        height: 2em;
        width: 80vw;
    }

    /* srv
  __________________________________________*/

    div.srv {
        background: #f8f4e6;
    }

    div.srv h2 {
        margin-bottom: 4.08vw;
    }

    div.srv h2 img {
        height: 5vw;
        width: auto;
    }

    div.srv p.sub {
        text-align: center;
    }

    div.srv ul {
        width: 80vw;
        margin: 0 auto;
        list-style: none;
        padding: 0;
    }

    div.srv ul li {
        width: 80vw;
        margin-top: 9.333vw;
        display: inline-block;
    }

    div.srv ul li img {
        float: left;
        width: 80vw;
        margin: 0 !important;
    }

    div.srv ul li div {
        float: left;
        width: 80vw;
        color: #505050;
        margin-top: 5vw;
    }

    div.srv ul li div h3 {
        border-left: #50bbdf solid 2.133vw;
        padding-left: 2.133vw;
        font-size: 4.266vw;
        line-height: 1.22;
    }

    div.srv ul li div p {
        padding-left: 4.266vw;
        font-size: 3.6vw;
        line-height: 1.7;
    }

    /* prg
  __________________________________________*/

    div.prg {
        background: #f8f4e6;
    }

    div.prg h2 {
        margin-bottom: 4.08vw;
    }

    div.prg h2 img {
        height: 5vw;
        width: auto;
    }

    div.prg p {
        font-size: 3.6vw;
        width: 24em;
        margin: 0 auto;
    }

    div.prg p span {
        font-size: 3vw;
        width: 27em;
        margin: 0 auto;
    }

    div.prg ul {
        width: 80vw;
        margin: 0 auto;
        list-style: none;
        padding: 0;
    }

    div.prg ul li {
        width: 80vw;
        margin-top: 9.333vw;
        display: inline-block;
    }

    div.prg ul li img {
        float: left;
        width: 80vw;
        margin: 0 !important;
    }

    div.prg ul li div {
        float: left;
        width: 80vw;
        color: #505050;
        margin-top: 5vw;
    }

    div.prg ul li div h3 {
        border-left: #50bbdf solid 2.133vw;
        padding-left: 2.133vw;
        font-size: 4.266vw;
        line-height: 1.22;
    }

    div.prg ul li div p {
        padding-left: 4.266vw;
        font-size: 3.6vw;
        line-height: 1.7;
    }

    /* shp
  __________________________________________*/

    div.shp {
        background: #ececec;
    }

    div.shp h2 {
        margin-bottom: 4.08vw;
    }

    div.shp h2 img {
        height: 5vw;
        width: auto;
    }

    div.shp ul {
        list-style: none;
        padding: 0;
    }

    div.shp ul li.shp_list {
        background: #fff;
        box-shadow: 0px 2px 4.75px 0.25px rgba(4, 0, 0, 0.3);
        width: 90vw;
        margin: 0 5vw;
        display: inline-block;
    }

    div.shp ul li div.shp_cnt {
        padding: 4vw 5vw;
    }

    div.shp ul li div.shp_cnt h3 {
        border-left: #27c9ff 8px solid;
        padding-left: 8px;
        color: #505050;
        font-size: 4.266vw;
    }

    div.shp ul li div.shp_cnt div.shp_dtl {
        display: inline-block;
    }

    div.shp ul li div.shp_cnt div.shp_dtl img {
        float: left;
        width: 100%;
        display: inline-block;
    }

    div.shp ul li div.shp_cnt div.shp_dtl table {
        float: left;
        width: 80vw;
        display: inline-block;
    }

    div.shp ul li div.shp_cnt div.shp_dtl table tr {
        border-bottom: solid 2px #dbdbdb;
        color: #505050;
    }

    div.shp ul li div.shp_cnt div.shp_dtl table tr th {
        width: 7em;
        padding: 1em 0;
    }

    div.shp ul li div.shp_cnt div.shp_dtl table tr td {
        padding: 1em 0;
    }

    div.shp ul li div.shp_cnt div.shp_dtl table tr td ul {
        padding: 0;
    }

    div.dtl_wrap {
        margin: 8vw auto 0px;
        width: 80vw;
        height: 80px;
    }

    div.dtl_wrap a {
        text-decoration: none;
        display: block;
        position: relative;
    }

    div.dtl_wrap a:after {
        content: '';
        width: 80vw;
        height: 15vw;
        background: #209dc7;
        border-radius: 5px;
        display: block;
        position: absolute;
        top: 0;
        margin-top: 8px;
    }

    div.dtl_wrap a div.dtl_cnt {
        background: #27c9ff;
        color: #fff;
        border-radius: 5px;
        font-size: 12px;
        font-size: 3.75vw;
        font-weight: bold;
        height: 15vw;
        position: relative;
        z-index: 10;
        line-height: 1;
    }

    div.dtl_wrap a div.dtl_cnt span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 1em;
        text-align: center;
    }

    div.dtl_wrap a div.dtl_cnt span:after {
        content: '';
        display: inline-block;
        background: url(/images/brand/cocokara/arrow_02.png) no-repeat;
        background-size: contain;
        width: 2.48vw;
        height: 3.35vw;
        margin-left: 2vw;
    }

    /* footer */
    footer {
        margin-top: 0;
    }
}



/* 特典のご利用方法 */

.color01 {
    color: #6cc4d7;
}

.color02 {
    color: #f74988;
}

a.color02 {
    color: #f74988;
}

a.color02:hover {
    color: #f74988;
    opacity: 0.7;
}

.max-w {
    max-width: 980px;
    margin: 0 auto;
}


.color-w {
    color: #fff;
}

.section-wrap {
    padding: 2.5em 0 3em;
}

.use-wrap {
    background: #feffe9;
    padding: 2em 1em;
    overflow: hidden;
}

#use.use-wrap h3 {
    position: relative;
    background: #6cc4d7;
    padding: .5em 0;
    font-size: 22px;
}

.use-wrap h3:before,
.use-wrap h3:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

.use-wrap h3:before {
    top: 0;
    left: 0;
    border-width: 25px 0px 25px 15px;
    border-color: transparent transparent transparent #feffe9;
    border-style: solid;
}

.use-wrap h3:after {
    top: 0;
    right: 0;
    border-width: 25px 15px 25px 0px;
    border-color: transparent #feffe9 transparent transparent;
    border-style: solid;
}

.use-icon {
    max-width: 100px;
    margin: 0 auto;
}

.use-pc-wrap,
.use-sp-wrap {
    position: relative;
}

.use-txt a:before {
    font-family: FontAwesome;
    content: "\f138";
    text-decoration: none !important;
}

.use-pc-wrap,
.use-sp-wrap {
    margin-bottom: 1em;
}

.use-wrap h3 {
    margin: 1em auto !important;
}

.date-balloon .fb {
    font-size: 130%;
}

.btn-lpn {
    color: #6cc4d7;
    background: #fff338;
    border-radius: 5em;
    max-width: 400px;
    margin: 1em auto 0;
    padding: .8em;
    font-size: 20px;
    ;
    letter-spacing: 0;
}

.btn-lpn:hover,
.btn-lpn:active,
.btn-lpn:focus {
    opacity: 0.8;
    color: #6cc4d7;
}

.date-balloon {
    position: relative;
    border-radius: .3em;
    padding: 10px;
    min-width: 120px;
    max-width: 400px;
    margin: 0 auto 15px;
    background: #fff;
    border: 3px solid #6cc4d7;
}

.date-balloon::before,
.date-balloon::after {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 13px solid #FFF;
    z-index: 2;
}

.date-balloon::after {
    bottom: -30px;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #6cc4d7;
    z-index: 1;
}

.lead-txt {
    position: relative;
    max-width: 550px;
}

.lead-txt:before,
.lead-txt:after {
    content: '';
    width: 60px;
    height: 60px;
    position: absolute;
    background-size: contain;
}

.lead-txt:after {
    background: url(/images/campaign/fitness2018/img_lead_right.png) no-repeat;
    top: 0;
    right: -70px;
}

.lead-txt:before {
    background: url(/images/campaign/fitness2018/img_lead_left.png) no-repeat;
    top: 15px;
    left: -70px;
}

.count-down-body {
    font-weight: bold;
    font-size: 22px;
    margin: .2em 0;
    color: #666;
}

.count-down-panel span {
    font-size: 140%;
    color: #f74988;
    letter-spacing: 1px;
    padding-left: 2px;
}

@media (min-width: 768px) {
    .use-arrow {
        display: flex;
        justify-content: space-between;
    }

    .use-arrow .use-pc-wrap,
    .use-sp-wrap {
        border: 1px solid #ccc;
        background: #fff;
        border-radius: .3em;
        margin: 0 .7em;
        padding: .5em !important;
        flex: 1;
        display: inline-block;
    }

    .use-num {
        color: #6cc4d7;
        font-size: 16px;
    }

    .use-pc-wrap:before {
        content: "";
        position: absolute;
        border-width: .8em 0 .8em .8em;
        border-color: transparent #f7c2d2;
        border-style: solid;
        top: 50%;
        right: -1.25em;
    }

    .use-txt {
        margin-top: 15px;
        text-align: left;
        line-height: 1.6;
    }
    #collapseShopinfo {
      display: block;
      visibility: visible;
    }
}

@media (max-width: 767px) {

    .info_text {
        margin-bottom: 1.5rem !important;
    }

    .in + div .toggletext::before {
        content: "閉じる";
        color: #ff9;
        text-decoration: none;
    }

    .toggletext::before {
        content: "続きを読む";
        color: #ff9;
        text-decoration: none;
    }

    .btn-lpn {
        font-size: 1.25rem;
    }

    #use.use-wrap h3 {
        font-size: 1.6rem;
        margin: 1em auto !important;
        max-width: 450px;
    }

    .use-wrap h3:before {
        border-width: 19px 0px 19px 10px;
    }

    .use-wrap h3:after {
        border-width: 19px 10px 19px 0px;
    }

    .use-num {
        background: #6cc4d7;
        padding: .2em .5em .1em;
        margin-right: .2em;
        border-radius: 1em;
    }

    .use-ttl-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .use-pc-wrap:after,
    .use-sp-wrap:after {
        content: "";
        top: auto;
        right: 0;
        left: 0;
        border-width: 1em 1em 0 1em;
        border-color: #f7c2d2 transparent;
        position: relative;
        border-style: solid;
        bottom: -20px;
    }

    .use-sp-wrap:after {
        display: none;
    }
}

@media (max-width: 467px) {
    .count-down-body {
        font-size: 5vmin;
    }
}