@charset "UTF-8";
/* plan
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.plan .sortArea {
  width: 100%;
  background-color: #F7F7F7;
  padding: 16px 0 8px;
  margin-bottom: 32px; }
  .plan .sortArea .inner {
    width: 856px;
    margin: auto;
    position: relative; }
  .plan .sortArea dl {
    margin: 0;
    padding: 0;
    overflow: hidden; }
    .plan .sortArea dl dt {
      text-align: left;
      margin-bottom: 8px;
      font-weight: bold; }
    .plan .sortArea dl dd {
      position: relative;
      margin: 0; }
      .plan .sortArea dl dd ul {
        overflow: hidden;
        margin-left: -8px; }
        .plan .sortArea dl dd ul li {
          float: left;
          margin-left: 8px;
          margin-bottom: 8px;
          width: 136px;
          height: 46px; }
      .plan .sortArea dl dd img {
        width: 24px;
        position: absolute;
        left: 295px;
        top: 6px; }
      .plan .sortArea dl dd input[type="text"] {
        min-width: 330px;
        border-radius: 3px;
        background-color: #fff; }
      .plan .sortArea dl dd input[type="checkbox"] {
        display: none; }
      .plan .sortArea dl dd label {
        border: 1px solid #e8e8e5;
        background-color: #e8e8e5;
        padding: 8px 0px;
        text-align: center;
        line-height: 1;
        border-radius: 20px;
        display: block;
        cursor: pointer;
        color: #777777; }
      .plan .sortArea dl dd input[type="checkbox"]:checked + label {
        border: 1px solid #3e3a39;
        background-color: #fff;
        color: #3e3a39; }
  .plan .sortArea .delete {
    background: url(../../img/plan/ico_delete.png) no-repeat right 5px;
    background-size: 10px 10px;
    padding-right: 15px;
    position: absolute;
    right: 0;
    top: -30px;
    color: #555555;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer; }
.plan .listArea .item {
  margin-bottom: 64px;
  border-top: 2px solid #e6e6e6;
  padding-top: 16px; }
  .plan .listArea .item .titleBox {
    overflow: hidden;
    display: table;
    width: 856px;
    margin: 0 auto;
    /* margin-bottom: 16px; */
    margin-bottom: 10px; /* 調整2019/12/20 */}
    .plan .listArea .item .titleBox .cat {
      display: table-cell;
      vertical-align: middle;
      /* width: 152px; */
      width: 100%; /* 調整2019/12/20 */
      padding-right: 16px; }
      .plan .listArea .item .titleBox .cat span {
        /* width: 100%; */
        width: 90px; /* 調整2019/12/20 */
        color: #fff;
        text-align: center;
        display: inline-block;
        /* padding: 10px 0; */
        padding: 1px 0; /* 調整2019/12/20 */
        border-radius: 20px;
        font-size: 1.3rem; }
        /* おすすめアイコン 2019/12/20 */
        span.cat00 {
          /* width: 100%; */
          width: 90px;
          color: #fff;
          text-align: center;
          display: inline-block;
          /* padding: 10px 0; */
          padding: 1px 0;
          border-radius: 0px;
          font-size: 1.3rem;
        }
        @media screen and (max-width: 767px){
            span.cat00 {
                /* width: 100%; */
                width: 60px;
                color: #fff;
                text-align: center;
                display: inline-block;
                /* padding: 3px 0; */
                padding: 1px 0px;
                border-radius: 0px;
                font-size: 1rem;
            }
        }
        span.cat00 {
          background-color: #A0082C;
        }
        .plan .listArea .item .titleBox .cat span.cat01 {
          background-color: #FFF;
          color: #3e3a39;
          border: 1px solid #3e3a39;}
        .plan .listArea .item .titleBox .cat span.cat02 {
          background-color: #88a915; }
        .plan .listArea .item .titleBox .cat span.cat03 {
          background-color: #827719; }
        .plan .listArea .item .titleBox .cat span.cat04 {
          background-color: #d9a016; }
        .plan .listArea .item .titleBox .cat span.cat05 {
          background-color: #125593; }
        .plan .listArea .item .titleBox .cat span.cat06 {
          background-color: #3d86ca; }
        .plan .listArea .item .titleBox .cat span.cat07 {
          background-color: #1c9264; }
        .plan .listArea .item .titleBox .cat span.cat08 {
          background-color: #e77e88; }
        .plan .listArea .item .titleBox .cat span.cat09 {
          background-color: #bf3f3f; }
        .plan .listArea .item .titleBox .cat span.cat10 {
          background-color: #655896; }
        .plan .listArea .item .titleBox .cat span.cat11 {
          background-color: #8d8d8d; }
    .plan .listArea .item .titleBox h2 {
      color: #3e3a39;
      /* display: table-cell; */
      display: inline-block; /* 調整2019/12/20 */
      vertical-align: middle;
      /* font-size: 2rem; */
      font-size: 2.2rem; /* 調整2019/12/20 */
      font-weight: bold;
      line-height: 1.5;
      margin-left: 10px; }
  .plan .listArea .item .priceBox {
    width: 100%;
    background-color: #F7F7F7;
    margin-bottom: 28px; }
    .plan .listArea .item .priceBox .wrap {
      width: 856px;
      margin: 0 auto;
      display: table;
      padding: 14px 0;
      line-height: 1; }
      .plan .listArea .item .priceBox .wrap > div {
        display: table-cell;
        vertical-align: middle; }
      .plan .listArea .item .priceBox .wrap .title {
        color: #3e3a39;
        text-align: center;
        width: 110px;
        font-weight: bold;
        font-size: 1.8rem;}
      .plan .listArea .item .priceBox .wrap .price {
        font-size: 1.2rem;
        width: 12em;
        font-weight: bold;
        text-align: center;}
        .plan .listArea .item .priceBox .wrap .price span {
          font-size: 2.6rem;
          font-weight: bold; }
          .plan .listArea .item .priceBox .wrap .price p {
            font-size: 1.1rem;
            font-weight: bold;
            color: #707070;
            margin-top: 7px;}
  .plan .listArea .item .postBox {
    width: 856px;
    margin: 0 auto;
    overflow: hidden; }
    .plan .listArea .item .postBox .pic {
      float: left;
      width: 320px; }
      .plan .listArea .item .postBox .pic img {
        max-width: 100%; }
    .plan .listArea .item .postBox .text {
      margin-left: 354px; }
      .plan .listArea .item .postBox .text .stitle {
        font-size: 1.6rem;
        font-weight: bold;
        color: #3e3a39;
        margin-bottom: 8px; }
      .plan .listArea .item .postBox .text .about {
        font-size: 1.6rem;
        margin-bottom: 12px; }
      .plan .listArea .item .postBox .text .info {
        border: 2px solid #b59067; }
        .plan .listArea .item .postBox .text .info dl {
          overflow: hidden;
          padding: 10px 0;
          margin: 0 20px;
          border-bottom: 1px solid #b59067;
          font-size: 12px; }
          .plan .listArea .item .postBox .text .info dl:last-child {
            border-bottom: none; }
          .plan .listArea .item .postBox .text .info dl.privilege {
            background-color: #b59067;
            padding: 12px 20px;
            margin: 0;
            border: none; }
            .plan .listArea .item .postBox .text .info dl.privilege dt {
              font-size: 1.6rem;
              color: #f8f5f1; }
            .plan .listArea .item .postBox .text .info dl.privilege dd {
              font-size: 1.6rem; }
          .plan .listArea .item .postBox .text .info dl dt {
            float: left;
            width: 74px;
            font-weight: bold; }
          .plan .listArea .item .postBox .text .info dl dd {
            margin-left: 74px; }
  .plan .listArea .item .planList {
    width: 856px;
    margin: 40px auto 0; }
    .plan .listArea .item .planList span.included {
      color: #d84707; }
    .plan .listArea .item .planList .cap {
      font-weight: bold; }
      .plan .listArea .item .planList .cap > span {
        font-size: 1.2rem;
        font-weight: normal; }
    .plan .listArea .item .planList ul {
      overflow: hidden;
      border-top: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9; }
      .plan .listArea .item .planList ul li {
        display: block;
        float: left;
        border-bottom: 1px solid #e9e9e9;
        width: 50%; }
        .plan .listArea .item .planList ul li:last-child {
          border-bottom: none; }
        .plan .listArea .item .planList ul li > div {
          display: table;
          width: 100%;
          height: 100%; }
          .plan .listArea .item .planList ul li > div > div {
            display: table-cell;
            vertical-align: middle; }
        .plan .listArea .item .planList ul li .cellA {
          background-color: #F7F7F7;
          width: 120px;
          padding: 15px;
          font-weight: bold; }
        .plan .listArea .item .planList ul li .cellB {
          border-right: 1px solid #e9e9e9;
          width: 50px;
          text-align: center; }
        .plan .listArea .item .planList ul li .cellC {
          padding: 10px 16px;
          word-break: break-all; }
  .plan .listArea .item .acoCont {
    display: none; }
  .plan .listArea .item .acoContSp {
    display: block; }
  .plan .listArea .item .acoBtn {
    width: 320px;
    color: #fff;
    display: block;
    margin: 30px auto 0;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    background-color: #3e3a39;
    position: relative;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s; }
    .plan .listArea .item .acoBtn:hover {
      text-decoration: none;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
      opacity: 0.6; }
    .plan .listArea .item .acoBtn .open-sign {
      display: block;
      padding: 9px 0;
      cursor: pointer; }
    .plan .listArea .item .acoBtn .close {
      display: none;
      color: #555;
      padding: 9px 0;
      -moz-transition: 0.4s;
      -o-transition: 0.4s;
      -webkit-transition: 0.4s;
      transition: 0.4s; }
      .plan .listArea .item .acoBtn .close:after {
        content: "";
        background: url(../../img/plan/ico_minus.png) no-repeat left top;
        background-size: 12px 12px;
        width: 12px;
        height: 12px;
        line-height: 1;
        margin-left: 0.5em;
        display: inline-block;
        margin-top: 2px; }
      .plan .listArea .item .acoBtn .close:hover {
        text-decoration: none;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
        opacity: 0.6; }
    .plan .listArea .item .acoBtn.active {
      background-color: #f0efeb;
      color: #8e8672; }
      .plan .listArea .item .acoBtn.active .open-sign {
        display: none; }
      .plan .listArea .item .acoBtn.active .close {
        display: block; }
    .plan .listArea .item .acoBtn:hover {
      text-decoration: none;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
      opacity: 0.6; }
.plan .btnPat01 {
  text-align: center;
  margin: 40px auto 80px; }
.plan .accessArea {
  display: none; }

/* ==========================================================================

   sp

   ========================================================================== */
@media screen and (max-width: 767px) {
  .plan .sortArea {
    width: 100%;
    background-color: #F7F7F7;
    padding: 0;
    margin-bottom: 32px; }
    .plan .sortArea .inner {
      width: 100%;
      margin: auto;
      position: relative; }
    .plan .sortArea dl {
      margin: 0;
      padding: 0;
      overflow: hidden; }
      .plan .sortArea dl dt {
        float: none;
        padding: 8px 5% 0;
        margin-bottom: 8px;
        font-size: 1rem; }
        .plan .sortArea dl dt.triggerSp {
          background-color: #e6e5de;
          font-size: 1.2rem;
          color: #3e3a39;
          padding: 8px 5%;
          margin-bottom: 0; }
          .plan .sortArea dl dt.triggerSp.active:after {
            content: "";
            background: url(../../img/plan/ico_minus.png) no-repeat left top;
            background-size: 10px 10px; }
          .plan .sortArea dl dt.triggerSp:after {
            content: "";
            background: url(../../img/plan/ico_plus.png) no-repeat left top;
            background-size: 10px 10px;
            width: 10px;
            height: 10px;
            line-height: 1;
            margin-left: 0.5em;
            display: inline-block;
            margin-top: 2px; }
      .plan .sortArea dl dd {
        margin-left: 0;
        position: relative;
        margin: 0 5%;
        text-align: center; }
        .plan .sortArea dl dd.acoCont {
          display: none;
          padding: 16px 0 8px; }
        .plan .sortArea dl dd ul {
          overflow: hidden;
          margin-left: 0px; }
          .plan .sortArea dl dd ul li {
            float: left;
            margin-left: 0px;
            margin-bottom: 8px;
            width: 49%; }
            .plan .sortArea dl dd ul li:nth-child(odd) {
              margin-right: 2%; }
        .plan .sortArea dl dd img {
          width: 24px;
          position: absolute;
          left: 87%;
          top: 8px; }
        .plan .sortArea dl dd input[type="text"] {
          min-width: 100%;
          border-radius: 3px;
          background-color: #fff;
          font-size: 1.2rem; }
        .plan .sortArea dl dd input[type="checkbox"] {
          display: none; }
        .plan .sortArea dl dd label {
          border: 1px solid #e8e8e5;
          background-color: #e8e8e5;
          padding: 8px 0px;
          text-align: center;
          line-height: 1;
          border-radius: 20px;
          display: block;
          cursor: pointer;
          color: #777777; }
        .plan .sortArea dl dd input[type="checkbox"]:checked + label {
          border: 1px solid #3e3a39;
          background-color: #fff;
          color: #3e3a39; }
    .plan .sortArea .delete {
      background: url(../../img/plan/ico_delete.png) no-repeat right center;
      background-size: 8px 8px;
      padding: 8px 12px 8px 0;
      position: static;
      right: 0;
      top: 0;
      color: #555555;
      font-weight: bold;
      font-size: 1rem;
      text-align: center;
      display: inline-block;
      cursor: pointer;}
  .plan .listArea .item {
    margin-bottom: 32px;
    border-top: 1px solid #e6e6e6;
    padding-top: 12px; }
    .plan .listArea .item .titleBox {
      overflow: hidden;
      display: block;
      width: 100%;
      margin: 0 auto;
      /* margin-bottom: 12px; */
      margin-bottom: 5px; /* 調整2019/12/20 */
      padding: 0 5%; }
      .plan .listArea .item .titleBox .cat {
        display: block;
        vertical-align: middle;
        /* width: 92px; */
        width: 100%; /* 調整2019/12/20 */
        padding-right: 5px;
        float: left; }
        .plan .listArea .item .titleBox .cat span {
          /* width: 100%; */
          width: 60px; /* 調整2019/12/20 */
          color: #fff;
          text-align: center;
          display: inline-block;
          /* padding: 3px 0; */
          padding: 1px 0; /* 調整2019/12/20 */
          border-radius: 20px;
          font-size: 1rem; }
      .plan .listArea .item .titleBox h2 {
        /* display: block; */
        display: inline-block;
        vertical-align: middle;
        /* font-size: 1.4rem; */
        font-size: 1.6rem; /* 調整2019/12/20 */
        font-weight: bold;
        line-height: 1.7;
        padding-top: 0; }
    .plan .listArea .item .priceBox {
      width: 100%;
      background-color: #F7F7F7;
      margin-bottom: 12px;
      display: table;
      padding: 0 5%; }
      .plan .listArea .item .priceBox .pic {
        display: table-cell;
        vertical-align: middle;
        width: 88px; }
        .plan .listArea .item .priceBox .pic img {
          max-width: 100%; }
      .plan .listArea .item .priceBox .wrap {
        display: table-cell;
        vertical-align: middle;
        width: auto;
        margin: 0 auto;
        padding: 8px 8px 8px 16px;
        line-height: 1;
        text-align: left; }
        .plan .listArea .item .priceBox .wrap > div {
          display: block;
          vertical-align: middle; }
        .plan .listArea .item .priceBox .wrap .title {
          color: #3e3a39;
          text-align: left;
          width: auto;
          font-weight: bold;
          margin-bottom: 6px;
          font-size: 1.3rem; }
        .plan .listArea .item .priceBox .wrap .price {
          font-size: 1.0rem;
          width: auto;
          font-weight: bold;
          margin-bottom: 8px; }
          .plan .listArea .item .priceBox .wrap .price span {
            font-size: 1.8rem;
            font-weight: bold; }
            .plan .listArea .item .priceBox .wrap .price p {
                font-size: 0.5rem;
                font-weight: bold;
                color: #707070;
                margin-top: 5px; }
        .plan .listArea .item .priceBox .wrap .cap {
          font-size: 1rem; }
    .plan .listArea .item .postBox {
      width: 100%;
      margin: 0 auto;
      padding: 0 5%; }
      .plan .listArea .item .postBox .pic {
        float: none;
        width: 100%; }
        .plan .listArea .item .postBox .pic img {
          max-width: 100%; }
      .plan .listArea .item .postBox .text {
        margin-left: 0; }
        .plan .listArea .item .postBox .text .stitle {
          font-size: 1.2rem;
          font-weight: bold;
          color: #3e3a39;
          margin-bottom: 8px; }
        .plan .listArea .item .postBox .text .about {
          font-size: 1.2rem;
          margin-bottom: 12px; }
        .plan .listArea .item .postBox .text .info {
          border: 1px solid #d2caba; }
          .plan .listArea .item .postBox .text .info dl {
            overflow: hidden;
            padding: 10px 0;
            margin: 0 10px;
            border-bottom: 1px solid #dedede;
            font-size: 1rem; }
            .plan .listArea .item .postBox .text .info dl:last-child {
              border-bottom: none; }
            .plan .listArea .item .postBox .text .info dl.privilege {
              background-color: #f7f7f7;
              padding: 8px 10px;
              margin: 0;
              border: none; }
              .plan .listArea .item .postBox .text .info dl.privilege dt {
                font-size: 1.2rem;
                color: #f8f5f1; }
              .plan .listArea .item .postBox .text .info dl.privilege dd {
                font-size: 1.2rem; }
            .plan .listArea .item .postBox .text .info dl dt {
              float: left;
              width: 56px;
              font-weight: bold; }
            .plan .listArea .item .postBox .text .info dl dd {
              margin-left: 56px; }
    .plan .listArea .item .planList {
      width: 100%;
      margin: 32px auto 0; }
      .plan .listArea .item .planList span.included {
        color: #d84707; }
      .plan .listArea .item .planList .cap {
        font-weight: bold;
        text-align: center;
        font-size: 1rem;
        margin-bottom: 4px; }
        .plan .listArea .item .planList .cap > span {
          font-size: 0.9rem;
          font-weight: normal; }
      .plan .listArea .item .planList ul {
        overflow: hidden;
        border-top: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9; }
        .plan .listArea .item .planList ul li {
          display: table;
          float: none;
          border-bottom: 1px solid #e9e9e9;
          width: 100%;
          height: auto !important; }
          .plan .listArea .item .planList ul li:last-child {
            border-bottom: none; }
          .plan .listArea .item .planList ul li > div {
            display: table-cell;
            vertical-align: middle; }
          .plan .listArea .item .planList ul li .cellA {
            background-color: #F7F7F7;
            width: 100px;
            padding: 8px;
            font-weight: bold; }
          .plan .listArea .item .planList ul li .cellB {
            border-right: 1px solid #e9e9e9;
            width: 36px;
            text-align: center; }
          .plan .listArea .item .planList ul li .cellC {
            padding: 8px;
            word-break: break-all; }
    .plan .listArea .item .acoCont {
      display: block;
      padding: 0 5%; }
    .plan .listArea .item .acoContSp {
      display: none; }
    .plan .listArea .item .acoBtn {
      width: 200px;
      color: #fff;
      display: block;
      margin: 12px auto 0;
      font-weight: bold;
      text-align: center;
      padding: 0;
      line-height: 1;
      background-color: #3e3a39;
      position: relative; }
      .plan .listArea .item .acoBtn:hover {
        text-decoration: none;
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1; }
      .plan .listArea .item .acoBtn .open-sign {
        display: block; }
      .plan .listArea .item .acoBtn .close {
        display: none; }
        .plan .listArea .item .acoBtn .close a {
          display: inline-block;
          color: #3e3a39; }
        .plan .listArea .item .acoBtn .close:after {
          content: "";
          background: url(../../img/plan/ico_minus.png) no-repeat left top;
          background-size: 12px 12px;
          width: 12px;
          height: 12px;
          line-height: 1;
          margin-left: 0.5em;
          display: inline-block;
          margin-top: 2px; }
      .plan .listArea .item .acoBtn.active {
        background-color: #f0efeb;
        color: #8e8672; }
        .plan .listArea .item .acoBtn.active .open-sign {
          display: none; }
        .plan .listArea .item .acoBtn.active .close {
          display: block; }
      .plan .listArea .item .acoBtn:hover {
        text-decoration: none;
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1; }
  .plan .btnPat01 {
    text-align: center;
    margin: 40px auto 80px; }
  .plan .accessArea {
    display: block; } }
