@charset "UTF-8";

/*============================================
spec.html
[common]
============================================*/

p {
  line-height: normal;
}

small {
  font-size: 10px;
}

a {
  transition: all 0.3s linear;
}

.mainArea_inner * {
  box-sizing: border-box;
}

/*数字用テキスト*/

.numFont {
  font-family: "Oswald", sans-serif;
}

/*税表記フォント*/

.cell-nomal-text,
.tax-in,
.excluding-tax-small,
.excluding-tax {
  font-size: 0.8em;
  line-height: 1.5em;
}

/*parts*/

.typeD,
.typeA {
  color: #fff;
  text-align: center;
}

.spec_monthlycost_simType .type_color_bk {
  color: #000000;
  font-weight: bold;
}

.typeD {
  background: #f95a74;
}

.typeA {
  background: #ff8c3e;
}

.mg_auto {
  margin-left: auto;
  margin-right: auto;
}

.fz100 {
  font-size: 90%;
}

.fz110 {
  font-size: 90%;
}

.fz150 {
  font-size: 150%;
}

.fz160 {
  font-size: 120%;
}

.fz180 {
  font-size: 180%;
}

.fz230 {
  font-size: 230%;
}

/*cpBnr*/

.spec_cpbnr_area {
  width: 94%;
  text-align: center;
  padding: 1% 3%;
  margin: 5% 0;
  background: #fcfaf7;
}

.sub {
  font-size: 10px;
}

.bnr_area {
  margin: 5% 0;
}

.numTxtAnno {
  display: block;
  color: red;
  margin-top: 0.5rem;
}

/*mio割*/
.hikari_price_bg {
  background-color: #ffffff;
  margin: 0 auto;
  padding: 30px 50px 25px 50px;
}

.hikari_price_bg h2 {
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
}

.hikari_price_bg h2 span {
  background: linear-gradient(transparent 65%, #ffff66 35%);
  font-weight: bold;
}

.hikari_price_flex {
  padding-top: 45px;
  display: flex;
  justify-content: space-around;
}

.voice_price {
  border: 1px solid #ed66a5;
  position: relative;
}

.sms_price {
  border: 1px solid #89bf2b;
}

.data_price {
  border: 1px solid #27c0ec;
  position: relative;
}

.voice_price,
.sms_price,
.data_price {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  text-align: center;
  width: 276px;
}

.sim_type_area {
  padding: 8px 10px;
}

.voice_price .sim_type_area,
.sms_price .sim_type_area {
  padding: 8px 1px;
}

.read_text_area {
  font-size: 12px;
}

.type_bg {
  background-color: #d3bd97;
  color: #ffffff;
  padding: 3px 0;
  border-radius: 3px;
  font-size: 11px;
  width: 70%;
  margin: 6px auto;
}

.lt_text {
  font-weight: bold;
  font-size: 25px;
  font-family: "Oswald", sans-serif;
}

.lt_text .original_price {
  font-weight: bold;
  font-size: 18px;
  font-family: "Oswald", sans-serif;
}

.single_pattern,
.double_pattern {
  position: relative;
}

.voice_au .double_pattern ul .original_price::before,
.voice_docomo .double_pattern ul .original_price::before,
.data_docomo .double_pattern ul .original_price::before {
  width: 60px;
  height: 2px;
  border-top: 1px solid #777777;
  content: "";
  display: block;
  position: absolute;
  top: 28px;
  left: 0;
}

.lt_text span,
.lt_text span .sml_yen {
  font-size: 0.7em;
}

.triangle_mark {
  width: 15px;
  margin-bottom: 5px;
}

.otoku_bg {
  background-color: #fad1e5;
  color: #e4007f;
  font-weight: bold;
  font-size: 13px;
  padding: 3px 0;
  width: 70%;
  margin: 0 auto;
}

.price_flex {
  display: flex;
  justify-content: center;
}

.voice_price .price_flex,
.sms_price .price_flex {
  padding-top: 8px;
}

.law_text {
  margin: auto 7px auto 0;
  color: #e4007f;
  font-size: 12px;
}

.law_text span {
  border: 1px solid #666666;
  color: #000000;
  padding: 1px;
}

.mon_price {
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  font-size: 3em;
  color: #e4007f;
}

.mon_price span {
  font-size: 25px;
}

.voice_flex_content,
.sms_flex_content,
.data_flex_content {
  display: flex;
  justify-content: center;
}

.voice_docomo,
.voice_au,
.sms_docomo,
.sms_au,
.data_docomo {
  width: 50%;
  padding: 0 5px;
  position: relative;
}

.voice_docomo .type_bg,
.voice_au .type_bg,
.sms_docomo .type_bg,
.sms_au .type_bg {
  width: 100%;
}

.voice_au .double_pattern ul,
.voice_docomo .double_pattern ul,
.data_docomo .double_pattern ul {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding-bottom: 3px;
}

.voice_au .double_pattern ul .campaign_price,
.voice_docomo .double_pattern ul .campaign_price,
.data_docomo .double_pattern ul .campaign_price {
  color: #e4007f;
  font-size: 25px;
  font-weight: bold;
}

.voice_au .double_pattern .campaign_text,
.voice_docomo .double_pattern .campaign_text,
.data_docomo .double_pattern .campaign_text {
  font-size: 11px;
  text-align: right;
  color: #e4007f;
  line-height: 11px;
  font-weight: bold;
}

.voice_au .double_pattern ul .campaign_price .yen_text {
  font-size: 0.7em;
}

.voice_docomo .otoku_bg,
.voice_au .otoku_bg,
.sms_docomo .otoku_bg,
.sms_au .otoku_bg,
.data_docomo .otoku_bg {
  width: 100%;
  letter-spacing: -1px;
  padding-right: 15px;
}

.voice_docomo .mon_price,
.voice_au .mon_price,
.sms_docomo .mon_price,
.sms_au .mon_price {
  font-size: 2.2em;
}

.miowari_mark {
  position: absolute;
  top: 188px;
  left: 195px;
  width: 40px;
}

.voice_docomo .miowari_mark,
.voice_au .miowari_mark,
.sms_docomo .miowari_mark,
.sms_au .miowari_mark,
.data_docomo .miowari_mark {
  position: absolute;
  width: 35px;
  top: 88px;
  left: 102px;
}

.hikari_kome {
  font-size: 10px;
  padding: 25px 0 0 5px;
  color: #666666;
  text-align: center;
}

.hikari_kome li {
  line-height: 15px;
  text-indent: -1em;
  padding-left: 1em;
}
.table_anno {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.3em;
}
.table_kome {
  font-size: 10px;
  padding: 25px 0 0 5px;
  color: #666666;
  text-align: center;
}

.table_kome li {
  line-height: 15px;
  text-indent: -1em;
  padding-left: 1em;
}
.table_flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.voice_call_box {
  width: 33%;
  border-right: 1px solid #b3b3b3;
}
.voice_call_box:last-child {
  border-right: none;
}
.voice_call_box p.calltype {
  font-size: 14px;
  color: #333;
  line-height: 1.3em;
}
.voice_call_box p.calltype span.calltime {
  font-size: 1.4em;
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  padding-left: 5px;
}
.voice_call_box span.excluding-tax {
  font-size: 12px;
}
.voice_call_box span.numTxtbox {
  display: block;
  margin-top: 10px;
}

.spec_monthlycost_planBox .flex-box {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.spec_monthlycost_planBox .fzS {
  font-weight: normal;
  font-size: 1.6em;
}

.spec_monthlycost_planBox .right_arrow {
  content: "";
  position: relative;
  z-index: 1;
  top: 50%;
  margin: 0 3%;
  width: 0;
  height: 0;
  border-left: 6px solid black;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/**[PC common]**********************************/
@media screen and (min-width: 641px) {
  p {
    font-size: 14px;
  }
  /*数字用テキスト*/
  .numTxtbox {
    font-size: 20px;
  }
  /*見出し*/
  .spec_titleBlock {
    padding: 20px 0;
    border-bottom: 1px solid #999;
  }
  .spec_titleBlockfix {
    position: fixed;
    top: 53px;
    z-index: 20;
    background: #fff;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    padding: 3px 0;
  }
  .spec_titleBlock_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .spec_title {
    font-size: 28px;
    padding-left: 20px;
    background: url(/hdd/img/service-voice-title.jpg) no-repeat center left;
  }
  .spec_titleBlock_list {
    text-align: right;
    padding: 14px;
    border-radius: 8px;
    background: #f4efe9;
  }
  .spec_titleBlock_listitem {
    margin: 0;
    display: inline-block;
  }
  a.spec_titleBlock_listitemlink {
    display: block;
    padding: 12px 22px 12px 12px;
    margin-right: 7px;
    font-size: 12px;
    color: #fff;
    border-radius: 5px;
    position: relative;
  }
  a.spec_titleBlock_listitemlink:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.7;
  }
  .spec_titleBlock_listitemlink:after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -3px;
    transform: rotate(45deg);
  }
  .spec_titleBlock_listitemlink.typeD {
    box-shadow: 0 3px 0 #d34459;
  }
  .spec_titleBlock_listitemlink.typeA {
    box-shadow: 0 3px 0 #f2811c;
  }
  .spec_index {
    font-size: 20px;
    font-weight: normal;
    color: #303030;
    margin: 0 0 20px;
    padding-left: 15px;
    background: url(/hdd/img/service-voice-h2-title.jpg) no-repeat center left;
  }
  .plan_comparison_title {
    margin-top: 50px;
  }
  /*parts*/
  .fzXL {
    font-weight: bold;
    font-size: 30px;
  }
  .fzL {
    font-weight: bold;
    font-size: 27px !important;
  }
  .mgb_S {
    margin-bottom: 5px;
  }
  .mgb_M {
    margin-bottom: 20px;
  }
  .mgb_L {
    margin-bottom: 30px;
  }
  .mgb_XL {
    margin-bottom: 60px;
  }
}

/*============================================
spec.html
[PC]
============================================*/

/* 料金表下部 */

.plus_mark {
  background: #cccccc;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.plus_mark p {
  font-weight: bold;
  color: #fff;
  font-size: 24px;
  text-align: center;
}

.plus_mark_bottom {
  margin: 20px auto;
}

.flex_600down {
  display: flex;
}

.flex_600down_left {
  background: #f4efe9;
  padding: 20px 0;
  margin-right: 10px;
}

.flex_600down_left p {
  font-weight: bold;
  text-align: center;
}

.flex_600down_left img {
  margin: 0 45px;
  padding-top: 5px;
}

.flex_600down_right {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

.flex_600down_right p {
  color: #cc0000;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  margin: 35px 0;
  letter-spacing: 3px;
}

@media screen and (min-width: 641px) {
  .flex_600down_left {
    width: 188px;
  }
  .flex_600down_right {
    width: 762px;
  }
  .plus_mark_bottom {
    width: 960px;
  }
  .never_bnr {
    padding: 35px 0 20px 0;
  }
  .never_bnr_kome {
    font-size: 12px;
    padding: 0 0 30px 25px;
  }
}

@media screen and (min-width: 641px) {
  /*box*/
  .mainArea_inner,
  .spec_titleBlock_inner {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    color: #333;
  }
  .spec_readBlock {
    line-height: 1.6;
    padding-top: 60px;
  }
  .spec_readText {
    font-size: 28px;
    text-align: center;
    margin-bottom: 50px;
  }
  .spec_IndexBlock {
    text-align: center;
    padding: 32px 16px;
    border-radius: 8px;
  }
  .spec_IndexBlock_title {
    font-weight: bold;
    font-size: 18px;
  }
  .spec_IndexBlock_listitem {
    display: inline-block;
    margin-right: 18px;
  }
  .spec_IndexBlock_listitem a {
    display: inline-block;
    padding-left: 20px;
    position: relative;
  }
  .spec_IndexBlock_listitem a:before {
    content: "";
    width: 16px;
    height: 16px;
    background: #e4348e;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
  }
  .spec_IndexBlock_listitem a:after {
    content: "";
    width: 4px;
    height: 4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    display: block;
    transform: rotate(135deg);
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -6px;
  }
  /*List*/
  .spec_List {
    text-align: left;
    width: 80%;
  }
  .spec_List li {
    list-style-type: disc;
  }
  /*_注釈*/
  .spec_annotationList {
    line-height: 1.4;
  }
  .spec_annotationList li {
    margin-left: 1.5em;
    text-indent: -1.5em;
    font-size: 10px;
    color: #666;
  }
  /*btn Link*/
  .spec_primaryBtnbox {
    text-align: center;
  }
  .spec_primaryBtntext {
    display: block;
    background: #e4348e;
    padding: 14px 10px;
    color: #fff !important;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    max-width: 300px;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s linear;
  }
  .spec_primaryBtntext:before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    position: absolute;
    left: 14px;
    top: 50%;
    margin-top: -5px;
    transform: translate(-50%, 0) rotate(45deg);
  }
  a.spec_primaryBtntext:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.7;
  }
  .spec_primaryTextLink,
  .spec_SecondaryTextLink {
    display: inline-block;
    padding-left: 16px;
    background: url(/hdd/spec/img/spec_SecondaryLink_icon.png) no-repeat 0 44% /
      12px auto;
    transition: all 0.3s linear;
  }
  a.spec_primaryTextLink {
    color: #e4348e;
    font-weight: bold;
  }
  a.spec_primaryTextLink:hover,
  a.spec_primaryTextLink:hover {
    color: #e4348e;
    text-decoration: none;
    opacity: 0.7;
  }
  /*----------------
table planOnly
-----------------*/
  /*プラン全体BOX*/
  .cp_message {
    margin: 3rem 0 0 auto;
    max-width: 775px;
    background: #fad1e5;
    padding: 15px;
    color: #e4007f;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px;
    letter-spacing: 1px;
  }
  .cp_message .link {
    margin-top: 10px;
    font-size: 14px;
  }
  .cp_message_anno {
    float: right;
    margin-top: 5px;
    font-size: 12px;
  }
  .spec_monthlycost_wrap {
    width: 960px;
    margin-left: auto;
    margin-left: auto;
    display: flex;
  }
  .spec_monthlycostMask {
    display: flex;
  }
  .spec_monthlycost_simBox {
    background: #f4efe9;
    border-radius: 10px;
    padding: 0 10px 5px 10px;
    margin-right: 10px;
    position: relative;
  }
  .spec_monthlycost_simBox:last-child {
    margin-right: 0;
  }
  .spec_monthlycost_simBox.datasim {
    width: 185px;
  }
  .spec_monthlycost_simBox.voicesim,
  .spec_monthlycost_simBox.sms {
    width: 285px;
  }
  /*プランBOX*/
  .spec_juryo_teigaku {
    width: 35px;
    margin-right: 10px;
  }
  .spec_monthlycost_planBox {
    width: 160px;
    margin-right: 10px;
  }
  .juryo_line {
    border-radius: 10px 0 0 10px;
    position: relative;
    margin-bottom: 10px;
    text-align: center;
    padding: 45px 8px 45px;
    height: 110px;
    background: #d3bd99;
  }
  .teigaku_line {
    border-radius: 10px 0 0 10px;
    position: relative;
    margin-bottom: 10px;
    text-align: center;
    padding: 165px 8px 165px;
    height: 350px;
    background: #d3bd99;
  }
  .juryo_line span,
  .teigaku_line span {
    font-weight: bold;
  }
  .spec_monthlycost_planName {
    border-radius: 10px 0 0 10px;
    padding: 25px 8px 25px;
    position: relative;
    margin-bottom: 10px;
  }
  .spec_monthlycost_planName.minimum,
  .spec_monthlycost_planName.light,
  .spec_monthlycost_planName.family {
    background: #f4efe9;
    height: 110px;
  }
  .spec_monthlycost_planDetail {
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    text-align: center;
    margin-bottom: 0;
  }
  .spec_monthlycost_planName.juryo .spec_monthlycost_planDetail {
    margin-bottom: 10px;
  }
  .spec_monthlycost_planDetail h3 {
    font-size: 12px;
    line-height: 1.2;
  }
  .spec_monthlycost_planSimcard {
    width: 45px;
    height: 42px;
    border-radius: 5px;
    padding: 6px 2px;
    font-size: 10px;
    text-align: center;
  }
  .minimum .spec_monthlycost_planSimcard {
    background: #e0f6fc;
  }
  .light .spec_monthlycost_planSimcard {
    background: #e8f7d0;
  }
  .family .spec_monthlycost_planSimcard {
    background: #ffeed4;
  }
  .spec_monthlycost_planSim {
    display: block;
    height: 10px;
    font-size: 14px;
  }
  .spec_monthlycost_planSimcardmax {
    width: 8px;
    margin-right: 1px;
    vertical-align: baseline;
  }
  .spec_monthlycost_planCapa {
    border-radius: 5px;
    padding: 5px 1px;
    text-align: center;
  }
  .spec_monthlycost_planCapa span {
    font-weight: bold;
  }
  .cp_limit_date {
    background-color: #e4348e;
    color: #ffffff;
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
    margin: 1px 0;
  }
  /*SIM機能別BOX*/
  .sim_type_title {
    padding-bottom: 10px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
  }
  .table_firstbox {
    height: 110px !important;
  }
  .spec_monthlycost_simTitleBox {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-right: -10px;
    margin-left: -10px;
  }
  .spec_monthlycost_simTitle {
    text-align: center;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 16px;
  }
  .spec_monthlycost_simType {
    display: flex;
  }
  .sms .spec_monthlycost_simType {
    justify-content: space-around;
  }
  .datasim .spec_monthlycost_simType,
  .voicesim .spec_monthlycost_simType {
    justify-content: center;
  }
  .spec_monthlycost_simType .typeD,
  .spec_monthlycost_simType .typeA {
    padding: 3px 20px 1px;
    border-radius: 3px;
    font-size: 14px;
    background: #f4efe9;
  }
  .voicesim .spec_monthlycost_simType .typeA {
    margin-left: 10px;
  }
  .spec_monthlycost_simPriceBox > li {
    background: #fff;
    display: flex;
    text-align: center;
    justify-content: space-around;
    margin-bottom: 10px;
  }
  .datasim .spec_monthlycost_simPriceBox > li {
    align-items: center;
    justify-content: center;
  }
  .voicesim .spec_monthlycost_simPriceBox > li,
  .sms .spec_monthlycost_simPriceBox > li {
    align-items: center;
    position: relative;
  }
  .voicesim .spec_monthlycost_simPriceBox > li:after,
  .sms .spec_monthlycost_simPriceBox > li:after {
    content: "";
    height: 90%;
    width: 1px;
    border-right: 1px dotted #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0, -50%);
    z-index: 1;
  }
  .sms .spec_monthlycost_hasdetails.typed,
  .sms .spec_monthlycost_hasdetails.typea {
    flex: 1;
  }
  .spec_monthlycost_details {
    display: inline-block;
    background: #f1dae5;
    margin-top: 5px;
    margin-bottom: 8px;
    padding: 4px;
    border-radius: 2px;
    line-height: 11px;
  }
  /*
******秋キャンペーンデザイン******
*/
  .spec_monthlycost_planName .spec_monthlycost_details {
    color: #e4348e;
    font-size: 11px;
    text-align: center;
    line-height: 1.2;
  }
  .typemix.spec_monthlycost_simBox > .spec_monthlycost_details {
    position: absolute;
    width: 250px;
    top: -70px;
    display: inline-block;
    background: #f1dae5;
    margin-top: 5px;
    margin-bottom: 8px;
    padding: 6px 4px;
    border-radius: 2px;
    line-height: 1.2;
    color: #e4348e;
    font-weight: bold;
    text-align: center;
  }
  .typemix.spec_monthlycost_simBox > .spec_monthlycost_details:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #f1dae5;
  }
  .typemix .spec_monthlycost_simPriceBox > li:not(:first-child):after {
    display: none;
  }
  .typemix .spec_monthlycost_simPriceBox.sms-sim > li:after {
    display: block;
  }
  .typemix .arrow {
    position: relative;
  }
  .typemix .arrow:after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 50%;
    margin-left: -13px;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 8px solid black;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }
  .right_arrow {
    content: "";
    position: relative;
    z-index: 1;
    top: 8px;
    width: 0;
    height: 0;
    border-left: 8px solid black;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }
  .right_arrow_small {
    content: "";
    position: relative;
    z-index: 1;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 5px solid black;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  .typemix .service_priceTxt_details.fc_default {
    display: block;
    border-radius: 5px;
    color: red;
    background: #fbe5d6;
    font-size: 11px;
    width: 97%;
    margin: 20px auto 5px;
    padding: 5px 3px;
  }
  .typemix.voice
    .spec_monthlycost_simPriceBox
    > li:first-child
    .spec_monthlycost_hasdetails.typea
    .service_priceTxt_details.fc_default {
    font-size: 10px;
  }
  .typemix.voice .spec_monthlycost_simPriceBox > li:not(:first-child),
  .typemix.datasim .spec_monthlycost_simPriceBox > li.spec_horizontal_family {
    display: flex;
    justify-content: center;
  }
  .spec_monthlycost_simPriceBox.sms
    .spec_horizontal_minimun:first-child
    .typea {
    display: flex;
    justify-content: center;
  }
  .spec_monthlycost_simPriceBox.sms
    .spec_horizontal_minimun:first-child
    .typea
    .right_arrow_small {
    top: 15px;
  }
  .typemix
    .spec_monthlycost_simPriceBox.sms-sim
    > li
    .spec_monthlycost_hasdetails {
    display: flex;
    justify-content: center;
  }
  .typemix .service_priceTxt_details.fc_default.yellow,
  .typemix
    .spec_monthlycost_simPriceBox.sms-sim
    .service_priceTxt_details.fc_default,
  .spec_monthlycost_simBox.datasim .service_priceTxt_details.fc_default,
  .spec_monthlycost_simBox.voice
    .spec_horizontal_family
    > .service_priceTxt_details.fc_default.yellow {
    background: #fff2cc;
  }
  .cp_price_down_left {
    color: #aaaaaa;
  }
  .cp_price_down_left_small {
    color: #aaaaaa;
  }
  .typemix .service_priceNum {
    font-style: normal;
    font-family: "Oswald", sans-serif;
    font-weight: bold;
  }
  .bottom_arrow {
    width: 0;
    height: 0;
    content: "";
    position: relative;
    z-index: 1;
    top: 0;
    left: 37%;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid black;
    margin: 2px 0;
  }
  .bottom_arrow_small {
    width: 0;
    height: 0;
    content: "";
    position: relative;
    z-index: 1;
    top: 0;
    left: 37%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    margin: 2px 0;
  }
  li.vertical,
  div.vertical {
    align-items: center;
  }
  /*
******秋キャンペーンデザイン******
*/
  .sml_pink {
    color: #e4348e;
    font-weight: bold;
  }
  /*CP表示用over ride*/
  .spec_monthlycost_planBox li:first-child {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .spec_monthlycost_planBox .cp_baloom_allPlan {
    position: relative;
    border-radius: 5px;
    padding: 6px 3px;
    background: #e4348e;
    color: #fff;
    text-align: center;
  }
  .spec_monthlycost_planBox .cp_baloom_allPlan:after {
    color: #e4348e;
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .cp .spec_monthlycost_planCapa {
    background: #fff5ae;
    text-align: left;
    padding: 5px;
  }
  .cp .spec_monthlycost_planCapa span {
    display: inline-block;
    color: #e4348e;
    font-size: 14px;
  }
  .cp .cp_arrow_capa {
    width: 16px;
    vertical-align: baseline;
    margin-right: 4px;
  }
  .cp .cp_limitedsimFunction {
    background: #e4348e;
    padding: 2px;
    border-radius: 2px;
    font-size: 12px !important;
    color: #fff !important;
    display: block !important;
    text-align: center;
    width: 95px;
  }
  .spec_monthlycost_simBox.cp {
    position: relative;
  }
  .cp .cp_baloom_simFunc {
    display: inline-block;
    border-radius: 5px;
    padding: 3px;
    background: #e4348e;
    color: #fff;
    text-align: center;
    position: absolute;
    top: -14px;
    left: 0px;
    font-size: 10px;
  }
  .cp .cp_baloom_simFunc:after {
    content: "▼";
    color: #e4348e;
    position: absolute;
    top: 24px;
    left: 24px;
  }
  .spec_monthlycost_simBox.cp .minimumcolor.cp,
  .spec_monthlycost_simBox.cp .lightcolor.cp,
  .spec_monthlycost_simBox.cp .familycolor.cp {
    color: #e4348e;
  }
  .spec_monthlycost_simBox.cp .cp_limitedPrice {
    width: 8px;
    vertical-align: baseline;
    margin-right: 3px;
  }
  /*----------------
point
-----------------*/
  .spec_mioOnlyPRbox {
    border: 1px dotted #ccc;
    border-radius: 8px;
    padding: 10px;
    position: relative;
  }
  .spec_mioOnlyPR_title {
    background: #e4348e;
    width: 200px;
    padding: 5px 20px;
    position: relative;
    left: -10px;
    top: 5px;
  }
  .spec_mioOnlyPR_title:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 10px 20px 0;
    border-color: transparent #ffffff transparent transparent;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
  .spec_mioOnlyPR_title img {
    width: 116px;
    margin-left: 20px;
  }
  .spec_mioOnlyPR_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -35px;
  }
  .spec_mioOnlyPR_text {
    text-align: left;
    line-height: 1.7;
    font-size: 18px;
    padding-left: 30px;
    margin-right: 65px;
    padding-top: 20px;
  }
  .spec_mioOnlyPR_text .blue {
    color: #184f9e;
  }
  .spec_mioOnlyPR_text .pnk {
    color: #e4348e;
  }
  .spec_mioOnlyPR_Image {
    flex: 1;
    position: relative;
  }
  .womanImage {
    position: absolute;
    bottom: -10px;
    left: -10px;
  }
  /*----------------
table plane
-----------------*/
  .spec_planeTable {
    width: 960px;
    table-layout: fixed;
  }
  tr.spec_planeTable_itemLine > th,
  tr.spec_planeTable_typeline > th {
    width: 184px;
  }
  /*タイプDA見出しライン*/
  tr.spec_planeTable_typeline > td {
    border-bottom: 1px solid #b3b3b3;
  }
  tr.spec_planeTable_typeline > td .typeD,
  tr.spec_planeTable_typeline > td .typeA {
    margin: 5px 5px 10px 5px;
    font-size: 14px;
    font-weight: bold;
    padding: 14px 0 12px;
    border-radius: 5px;
  }
  tr.spec_planeTable_typeline > .plan_name_comparison,
  tr.spec_planeTable_typeline > .plan_name_comparison_juryo {
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    line-height: 22px;
    padding: 10px 0;
  }
  tr.spec_planeTable_typeline > .plan_name_comparison {
    background: #eeeeee;
  }
  tr.spec_planeTable_typeline > .plan_name_comparison_juryo {
    background: #cccccc;
  }
  .plan_comparison_type .type_flex {
    display: flex;
    justify-content: space-around;
  }
  .plan_comparison_type .type_flex div {
    width: 45%;
    border-radius: 5px;
    padding: 10px 0;
  }
  .plan_comparison_type .plan_comparison_type_a .typeA {
    width: 50%;
    margin: 0 auto;
    padding: 10px 0;
    border-radius: 5px;
  }
  /*各項目ライン*/
  tr.spec_planeTable_itemLine > th {
    background: #f4efe9;
    border-bottom: 1px solid #fff;
    border-right: 5px solid #fff;
    padding: 20px 15px;
    font-size: 12px;
    vertical-align: top;
  }
  tr.spec_planeTable_itemLine.confirmed > th {
    background: #f4efe9;
    border-bottom: 1px solid #fff;
    border-right: 5px solid #fff;
    padding: 10px;
    font-size: 12px;
    vertical-align: top;
  }
  tr.spec_planeTable_itemLine > th.radius_lt {
    border-top-left-radius: 10px;
  }
  tr.spec_planeTable_itemLine > th.radius_lb {
    border-bottom-left-radius: 10px;
  }
  tr.spec_planeTable_itemLine > th.pdr_non {
    padding-right: 0;
  }
  tr.spec_planeTable_itemLine:last-child > th {
    border-bottom: none;
  }
  tr.spec_planeTable_itemLine > td {
    border-bottom: 1px solid #b3b3b3;
    padding: 20px 10px;
    font-size: 14px;
    text-align: center;
  }
  /*table border for override*/
  .spec_planeTable_itemLine .plan_comparison {
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
  }
  td.bdr {
    border-right: 1px #b3b3b3 solid;
  }
  td.bdb_none {
    border-bottom: none !important;
  }
  td.bdt {
    border-top: 1px #b3b3b3 solid;
  }
  td.bdt_dashed {
    border-top: 1px #b3b3b3 dashed;
  }
  td.td_twoline {
    line-height: 20px;
  }
  /*通話料*/
  .spec_planeTable_itemLine .calltype {
    font-size: 12px;
    color: #777;
  }
  /*みおふぉんダイアル+ファミリー割引*/
  .spec_voicePricePRbox {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    background: #fff3f8;
    padding: 10px 45px 24px;
    border-radius: 8px;
    position: relative;
  }
  .spec_voicePricePRbox h3 {
    display: inline-block;
    padding: 10px 30px;
    background: #ff7da8;
    color: #fff;
    border-radius: 8px;
    border: 2px solid #fff;
    position: relative;
    font-weight: bold;
    line-height: 1.1;
    margin: -30px 0 20px 0;
  }
  .spec_voicePricePRbox h3:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 13.5px 0 13.5px;
    border-color: #fff transparent transparent transparent;
    z-index: 1;
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .spec_voicePricePRbox h3:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 12.5px 0 12.5px;
    border-color: #ff7da8 transparent transparent transparent;
    z-index: 2;
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .spec_voicePricePR_list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .spec_voicePricePR_listitem {
    align-items: center;
    border-radius: 5px;
    border: 1px dotted #ccc;
    padding: 5px;
  }
  .spec_voicePricePR_listitem.off50,
  .spec_voicePricePR_listitem.off20 {
    background: #fff;
    position: relative;
  }
  .spec_voicePricePR_listitem.off50:after,
  .spec_voicePricePR_listitem.off20:after {
    font-size: 26px;
    color: #999;
    font-weight: bold;
    position: absolute;
    top: 50%;
    right: -27px;
    transform: translate(0, -50%);
  }
  .spec_voicePricePR_listitem.off50:after {
    content: "＆";
  }
  .spec_voicePricePR_listitem.off20:after {
    content: "＝";
  }
  .spec_voicePricePR_listitem.off60 {
    background: #fffff3;
    position: relative;
  }
  .spec_voicePricePR_listimage {
    width: 100px;
    position: absolute;
    top: -26px;
    right: 46px;
  }
  .spec_voicePricePR_textbox {
    background: #fff;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 20px;
    position: relative;
  }
  .spec_voicePricePR_textbox:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12.5px 17px 12.5px;
    border-color: transparent transparent #ffffff transparent;
    position: absolute;
    top: -16px;
    right: 70px;
  }
  /*iphone対応状況_機種名*/
  .iphoneNameList_spec {
    margin-top: 9px;
  }
  .iphoneNameList li {
    display: inline-block;
    width: 100%;
    height: 13px;
    padding: 10px 0;
    border-bottom: 1px dashed #999;
  }
  .iphoneNameList li:first-child {
    padding: 5px 0;
    border-bottom: none;
    height: 17px;
  }
  .iphoneNameList li:last-child {
    display: inline-block;
    width: 100%;
    border-bottom: none;
  }
  .iphoneNameList_spec li {
    display: inline-block;
    width: 100%;
    height: 30px;
    padding: 10px 0;
    border-bottom: 1px dashed #999;
  }
  .iphoneNameList_spec li.three_line {
    display: inline-block;
    width: 100%;
    height: 40px;
    padding: 10px 0;
    border-bottom: 1px dashed #999;
  }
  .iphoneNameList_spec li:last-child {
    border-bottom: none;
  }
  .va_middle {
    vertical-align: middle !important;
  }
  /*iphone 対応状況 table*/
  .iphone_table {
    width: 95%;
    table-layout: fixed;
    margin-right: auto;
    margin-left: auto;
  }
  .iphone_table th {
    font-size: 10px;
    padding: 5px 0;
    font-weight: bold;
    border-bottom: 1px solid #b3b3b3;
  }
  .iphone_table td {
    width: 25%;
  }
  .iphone_table_typeD th:nth-child(even),
  .iphone_table_typeD td:nth-child(even) {
    background: rgba(244, 96, 114, 0.1);
  }
  .iphone_table_typeA th:nth-child(even),
  .iphone_table_typeA td:nth-child(even) {
    background: rgba(247, 147, 30, 0.1);
  }
  .iphone_table_re {
    width: 90%;
    table-layout: fixed;
    margin: 5px auto 0;
  }
  .iphone_table_re th {
    font-size: 10px;
    padding: 5px 0;
    font-weight: bold;
    border-bottom: 1px solid #b3b3b3;
  }
  .iphone_table_re tr.h {
    height: 34px;
  }
  .iphone_table td {
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px dashed #b3b3b3;
    height: 30px;
  }
  li.two_line {
    padding: 7px 0 13px;
  }
  .iphoneNameList_spec li.two_line,
  .iphoneNameList_spec li.three_line {
    padding: 3px 0 17px;
  }
  .iphone_table_re td {
    width: 25%;
    font-size: 12px;
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px dashed #b3b3b3;
  }
  table.iphone_table_re td {
    height: 13px;
  }
  table.iphone_table_re th {
    text-align: center;
  }
  .two_line_re td {
    padding-top: 16px;
  }
  .iphone_table tr.three_line {
    height: 40px;
  }
  .iphoneNameList li:last-child,
  .iphone_table tr:last-child td,
  .iphoneNameList_re li:last-child,
  .iphone_table_re tr:last-child td {
    border-bottom: none;
  }
  .iphone_table_caution {
    background: #f7f7f7;
    padding: 5px;
    width: 95%;
    margin-top: 5px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* CP用共通 */
.spec_planeTable_itemLine .cp_baloom_allPlan {
  border-radius: 5px;
  padding: 6px 3px;
  background: #e4348e;
  color: #fff;
  text-align: center;
  max-width: 16em;
  margin: 0 auto 0.5rem;
}
@media screen and (min-width: 641px) {
  .hikari_price_bg {
    width: 960px;
  }
  .type_brk {
    display: none;
  }
  .cp-msg-area {
    margin-bottom: 2rem;
  }
}
/* PC ONLY */
@media screen and (min-width: 641px) {
  .hikari_price_bg {
    width: 960px;
  }
  .type_brk {
    display: none;
  }
}
