/* =========================================================
   共通スタイル
========================================================= */
.\--isRed {
    color: #ff0000;
}

.\--isBold {
    font-size: 17px;
    font-weight: 700;
}

.\--isBlue {
    color: #003894;
}

.ac-plan__detail__text.\--isBlue {
    margin-right: 5px;
}

/* =========================================================
   プラン一覧リスト
========================================================= */

.ac-plan {
    padding: 10px 0 18px;
    border-bottom: 2px solid #003894;
}

.ac-plan__inner {
    display: flex;
    justify-content: space-between;
}

.ac-plan__headline {
    font-size: 16px;
    font-weight: 700;
    margin: 5px 0 10px;
}

.ac-plan__text {
    font-size: 14px;
}

.ac-plan__image {
    width: 230px;
    height: 174px;
    overflow: hidden;
}

.ac-plan__image img {
    width: 100%;
}

/* プラン一覧 情報
--------------------------- */
.ac-plan__note {
    width: 470px;
}

.ac-plan__note__text__inner {
    position: relative;
    /* height: 64px; */
    padding-top: 6px;
    overflow: hidden;
    word-break: break-all;
}

/* プラン一覧 情報 状態 
--------------------------- */
.ac-plan__note__condition {
    display: flex;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.ac-plan__note__condition__icon {
    /* height: 26px; */
    background: #fff;
    color: #0F449A;
    font-size: 12px;
    padding: .3em .48em;
    margin: .5em .2em 0 0;
    border-radius: 5px;
    box-sizing: border-box;
    word-break: keep-all;
    border: 1px solid #0F449A;
}

.ac-plan__note__condition__icon:last-child {
    margin-right: 0;
}

.ac-plan__note__condition__icon.\--isBestPrice {
    background: #fff;
}

.ac-plan__note__condition__icon.\--isNone {
    color: #cfcfcf;
    text-shadow: none;
    background: #FFF;
    border: 1px solid #ddd;
}

/* プラン一覧 情報 特典
--------------------------- */
.ac-plan__note__benefit {
    position: relative;
    /* height: 28px; */
    margin: 12px 0;
}

.ac-plan__note__benefit > div {
    display:flex;
}

.ac-plan__note__benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -10px;
    left: 0;
    /* width: 50px; */
    /* height: 50px; */
    background: #fca55e;
    border-radius: 25px;
    padding: 0 10px;
    font-size: 0.8em;
}

.ac-plan__note__benefit__icon__text {
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
}

.ac-plan__note__benefit__text {
    /* height: 28px; */
    overflow: hidden;
    background: #fffbb2;
    font-size: 14px;
    font-weight: 700;
    padding: 15px 60px 5px 10px;
    margin-left: 5px;
    box-sizing: border-box;
    word-break: break-all;
    width: 100%;
}

/* プラン一覧 情報 料金・評価
--------------------------- */
.ac-plan__detail {
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
}

.ac-plan__detail__text {
    font-size: 14px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.ac-plan__detail__icon {
    display: inline-block;
    border: 1px solid #003894;
    padding: 0 3px;
    border-radius: 5px;
    text-align: center;
    margin: 0 3px 5px;
    color: #003894;
}

.ac-plan__detail__text .per {
    width: 100%;
}

.ac-plan__evaluation {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.ac-bbs__evaluation__list {
    display: flex;
    justify-content: space-around;
    width: 150px;
}

.ac-bbs__evaluation__list li {
    width: 23px;
    height: 23px;
}

.ac-plan__detail__price {
    width: 100%;
    margin-top: 10px;
    border-top: 1px dotted #363636;
    padding-top: 15px;
    text-align: center;
}

.ac-plan__detail__price__number {
    font-size: 22px;
    font-weight: 700;
}

.ac-plan__detail__btn a img {
    width: 260px;
}

/* プラン一覧 もっと見る
--------------------------- */
.ac-plan__more {
    position: absolute;
    right: 10px;
    bottom: 0;
    background: #FFF;
}

.ac-plan__more.\--isBenefit {
    background: #FFFBB2;
}