@charset "UTF-8";

p,div {
  line-height: 2em;
}


/* 補足エリア */
.supplement-area {
  display: flex;
  justify-content: flex-end;
  margin: 15px 0;
}
.supplement {
  width: fit-content;
  padding:10px;
  font-size:0.8em;
  background-color:#DDDDDD;
}

/* MCA移行相談ページへのリンクボタン */
.MCAformLink-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(80% - 40px);
  margin:0 auto;
  padding: 10px 20px;
  border: none;
  border-bottom: solid 5px #cf3b00;
  border-radius: 5px;
  background-color: #ff6b00;
  color: #fff;
  font-weight: 600;
  font-size: 1.2em;
  transition: .5s ease;
}
.MCAformLink-button:hover {
  background-color: #ff9446;
}
/* PDFへのリンクボタン */
.pdfLink-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 20px;
  border: none;
  border-bottom: solid 5px #155770;
  border-radius: 5px;
  background-color: #0f9ed5;
  color: #fff;
  font-weight: 600;
  font-size: 1.2em;
  transition: .5s ease;
}
.pdfLink-button:hover {
  background-color: #b9deec;
}


/* PC用 */
@media screen and (min-width: 768px) , print {
  section {
    margin-bottom: 60px;
  }
  
  /* インデックスメニュー */
  #index-menu {
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #A9FF9E;
  }
  #index-menu > ul {
    width: calc(90% - 60px - 8px);
    margin: 0 auto;
    padding: 10px 30px;
    font-size: 1.2em;
    font-weight: bold;
    border: 4px dashed #13A100;
    background-color: #FFFFFF;
    background-image: url("../img/SwitchingMCA2IP-illust-01.png");
    background-size: 15%;
    background-repeat: no-repeat;
    background-position: 98% 50%;
  }
  #index-menu > ul > li {
    padding: 8px 0;
  }
  
  /* 画像回り込み */
  .float_img {
    float: right;
    margin-left: 4em;
  }
  
  /* MCA無線とはのテーブル */
  #MCA2IP-2-table {
    width: 80%;
    margin: 0 auto;
  }
  #MCA2IP-2-table > tbody > tr > th {
    background-color: #0f9ed5;
    color: #FFFFFF;
    text-align: center;
  }
  #MCA2IP-2-table > tbody > tr > th, #MCA2IP-2-table > tbody > tr > td {
    border: solid 1px;
    padding: 10px;
    width: 50%;
  }
  /* ＩＰ無線が選ばれる理由のテーブル */
  #MCA2IP-3-table {
    width: 80%;
    margin: 0 auto;
  }
  #MCA2IP-3-table > tbody > tr > th {
    background-color: #0f9ed5;
    color: #FFFFFF;
    text-align: center;
  }
  #MCA2IP-3-table > tbody > tr > th, #MCA2IP-3-table > tbody > tr > td {
    border: solid 1px;
    padding: 10px;
    text-align: center;
  }
  
  /* MCA無線の商品写真 */
  .MCA-photo-area {
    width:calc(100% - 20px - 4px);
    padding: 10px;
    border: 2px solid #CCCCCC;
    border-radius: 30px;
    text-align: center;
  }
  .MCA-photo-area > .MCA-photo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  
  /* ＩＰ無線が選ばれるわけのイメージ */
  #MCA2IP-3-subcat {
    position: relative;
  }
  #MCA2IP-3-subcat > #MCA2IP-3-subcat-img {
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: right;
  }
  
  /* ＭＣＡ無線機からの移行性に優れるＩＰ無線機は？のポイントエリア */
  .MCA2IP-4-point {
    
  }
  .MCA2IP-4-point > ul {
    width: 100%;
  }
  
  /* 吹き出し */
  /* 左 */
  .balloon-left-flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .balloon-left-icon {
    width: 15%;
    text-align: center;
    font-weight: bold;
  }
  .balloon-left {
    position: relative;
    display: inline-block;
    width: 75%;
    margin: 1.5em 0 1.5em 15px;
    padding: 15px;
    min-width: 120px;
    max-width: 85%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 3px #CCCCCC;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .balloon-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #FFF;
    z-index: 2;
  }
  .balloon-left:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #CCCCCC;
    z-index: 1;
  }
  .balloon-left p {
    margin: 0;
    padding: 0;
  }
  .balloon-left > h2 {
    font-size: 1.2em;
    color: #FFFFFF;
    font-wweight: bold;
    border: none;
    background-color: #13A100;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  /* 右 */
  .balloon-right-flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction:row-reverse
  }
  .balloon-right-icon {
    width: 15%;
    text-align: center;
    font-weight: bold;
  }
  .balloon-right {
    position: relative;
    display: inline-block;
    width: 75%;
    margin: 1.5em 15px 1.5em 0;
    padding: 20px;
    min-width: 120px;
    max-width: 87%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 3px #CCCCCC;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .balloon-right:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
  }
  .balloon-right:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #CCCCCC;
    z-index: 1;
  }
  .balloon-right p {
    margin: 0;
    padding: 0;
  }
  .balloon-right > h2 {
    font-size: 1.2em;
    color: #FFFFFF;
    font-wweight: bold;
    border: none;
    background-color: #13A100;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  
  /* 画像エリア */
  .pic-area90 {
    width: 90%;
    margin: 10px auto;
  }
  .pic-area80 {
    width: 80%;
    margin: 10px auto;
  }
  .pic-area70 {
    width: 70%;
    margin: 10px auto;
  }
  .pic-area60 {
    width: 60%;
    margin: 10px auto;
  }
  .pic-area50 {
    width: 50%;
    margin: 10px auto;
  }
  
  /* 80％ 201113 */
  .flex-80_area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .flex-80 {
    width: calc(80% - 10px);
    padding: 5px;
  }
  .flex-80 > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .flex-80 > ul > li {
    width: calc(50% - 10px);
    padding: 0 5px;
    text-align: center;
  }
  .flex-80 > ul > li > a.button {
    display: block;
    background-color: #999999;
    color: #FFFFFF;
    border-radius: 20px;
    text-align: center;
    margin: auto;
    width: 80%;
  }
  .flex-80 > div#end {
    width: 40%;
    text-align: center;
  }
  .flex-80 > img {
    display: block;
    margin: 0 auto;
  }
  .flex-80 > h2 {
    font-size: 1em;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #00427a;
    color: #00427a;
  }
  .flex-80 > .figcap {
    text-align: center;
  }
  .flex-20 {
    width: calc(20% - 10px);
    text-align: center;
    margin-bottom: 35px;
  }
  
  /* 50％ 251015 */
  .flex-50_area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .flex-50 {
    width: calc(50% - 10px);
    padding: 5px;
  }
  .flex-50 > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .flex-50 > ul > li {
    width: calc(50% - 10px);
    padding: 0 5px;
    text-align: center;
  }
  .flex-50 > ul > li > a.button {
    display: block;
    background-color: #999999;
    color: #FFFFFF;
    border-radius: 20px;
    text-align: center;
    margin-top: auto;
    width: 100%;
  }
  .flex-50 > div#end {
    width: 40%;
    text-align: center;
  }
  .flex-50 > img {
    display: block;
    margin: 0 auto;
  }
  .flex-50 > h2 {
    font-size: 1em;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #00427a;
    color: #00427a;
  }
  .flex-50 > .figcap {
    text-align: center;
  }
  /* 33％ 251224 */
  .flex-33_area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .flex-33 {
    width: calc(33% - 10px);
    padding: 5px;
  }
  
  .end-item{
    display:flex;
    justify-content:flex-end;
    align-content:flex-end;
  }
  
  /* テーブル 251016 */
  #vehiclemounted-table {
    width: 80%;
    margin: 0 auto;
  }
  #vehiclemounted-table > tbody > tr > th {
    background-color: #666666;
    color: #FFFFFF;
    text-align: center;
  }
  #vehiclemounted-table > tbody > tr > th, #vehiclemounted-table > tbody > tr > td {
    border: solid 1px;
    padding: 10px;
    text-align: center;
  }
  
}
 
/* 小さい画面用 */
@media screen and (max-width: 767px) {
  section {
    margin-bottom: 40px;
  }
  
  /* インデックスメニュー */
  #index-menu {
    width: calc(100% - 20px);
    padding: 10px;
    background-color: #A9FF9E;
  }
  #index-menu > ul {
    width: calc(90% - 60px - 8px);
    margin: 0 auto;
    padding: 10px 30px;
    font-size: 1.2em;
    font-weight: bold;
    border: 4px dashed #13A100;
    background-color: #FFFFFF;
  }
  #index-menu > ul > li {
    padding: 8px 0;
  }
  
  /* 画像回り込み */
  .float_img {
    display: none;
  }
  
  /* MCA無線とはのテーブル */
  #MCA2IP-2-table {
    width: 80%;
    margin: 0 auto;
  }
  #MCA2IP-2-table > tbody > tr > th {
    background-color: #0f9ed5;
    color: #FFFFFF;
    text-align: center;
  }
  #MCA2IP-2-table > tbody > tr > th, #MCA2IP-2-table > tbody > tr > td {
    border: solid 1px;
    padding: 10px;
    width: 50%;
  }
  /* ＩＰ無線が選ばれる理由のテーブル */
  #MCA2IP-3-table {
    width: 80%;
    margin: 0 auto;
  }
  #MCA2IP-3-table > tbody > tr > th {
    background-color: #0f9ed5;
    color: #FFFFFF;
    text-align: center;
  }
  #MCA2IP-3-table > tbody > tr > th, #MCA2IP-3-table > tbody > tr > td {
    border: solid 1px;
    padding: 10px;
    text-align: center;
  }
  
  /* MCA無線の商品写真 */
  .MCA-photo-area {
    width:calc(100% - 20px - 4px);
    padding: 10px;
    border: 2px solid #CCCCCC;
    border-radius: 10px;
    text-align: center;
  }
  .MCA-photo-area > .MCA-photo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  
  /* ＩＰ無線が選ばれるわけのイメージ */
  #MCA2IP-3-subcat {
    
  }
  #MCA2IP-3-subcat > #MCA2IP-3-subcat-img {
    display: none;
  }
  
  /* ＭＣＡ無線機からの移行性に優れるＩＰ無線機は？のポイントエリア */
  .MCA2IP-4-point {
    
  }
  .MCA2IP-4-point > ul {
    width: calc(100% - 10px);
  }
  
  /* 吹き出し */
  /* 左 */
  .balloon-left-flex {
    
  }
  .balloon-left-icon {
    width: 30%;
    text-align: center;
    font-weight: bold;
    margin: 0 auto;
  }
  .balloon-left {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 3px #CCCCCC;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .balloon-left:before {
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 12px solid #FFF;
    z-index: 2;
  }
  .balloon-left:after {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-bottom: 14px solid #CCCCCC;
    z-index: 1;
  }
  .balloon-left p {
    margin: 0;
    padding: 0;
  }
  .balloon-left > h2 {
    font-size: 1.2em;
    color: #FFFFFF;
    font-wweight: bold;
    border: none;
    background-color: #13A100;
    border-radius: 5px;
  }
  /* 右 */
  .balloon-right-flex {
    
  }
  .balloon-right-icon {
    width: 30%;
    text-align: center;
    font-weight: bold;
    margin: 0 auto;
  }
  .balloon-right {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 3px #CCCCCC;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .balloon-right:before {
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 12px solid #FFF;
    z-index: 2;
  }
  .balloon-right:after {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-bottom: 14px solid #CCCCCC;
    z-index: 1;
  }
  .balloon-right p {
    margin: 0;
    padding: 0;
  }
  .balloon-right > h2 {
    font-size: 1.2em;
    color: #FFFFFF;
    font-wweight: bold;
    border: none;
    background-color: #13A100;
    border-radius: 5px;
  }
  
  /* 画像エリア */
  .pic-area90 {
    width: 100%;
    margin: 10px auto;
  }
  .pic-area80 {
    width: 100%;
    margin: 10px auto;
  }
  .pic-area70 {
    width: 100%;
    margin: 10px auto;
  }
  .pic-area60 {
    width: 100%;
    margin: 10px auto;
  }
  .pic-area50 {
    width: 100%;
    margin: 10px auto;
  }
  
  /* 80％ 201113 */
  .flex-80_area {
    
  }
  .flex-80 {
    width: calc(100% - 10px);
    padding: 5px;
  }
  .flex-80 > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .flex-80 > ul > li {
    width: calc(100% - 10px);
    padding: 0 5px;
    text-align: center;
  }
  .flex-80 > ul > li > a.button {
    display: block;
    background-color: #999999;
    color: #FFFFFF;
    border-radius: 20px;
    text-align: center;
    margin-top: auto;
    width: 100%;
  }
  .flex-80 > div#end {
    width: 100%;
    text-align: center;
  }
  .flex-80 > img {
    display: block;
    margin: 0 auto;
  }
  .flex-80 > h2 {
    font-size: 1em;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #00427a;
    color: #00427a;
  }
  .flex-80 > .figcap {
    text-align: center;
  }
  .flex-20 {
    width: calc(100% - 10px);
    text-align: center;
  }
  
  /* 50％ 251015 */
  .flex-50_area {
    
  }
  .flex-50 {
    width: calc(100% - 10px);
    padding: 5px;
  }
  .flex-50 > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .flex-50 > ul > li {
    width: calc(100% - 10px);
    padding: 0 5px;
    text-align: center;
  }
  .flex-50 > ul > li > a.button {
    display: block;
    background-color: #999999;
    color: #FFFFFF;
    border-radius: 20px;
    text-align: center;
    margin-top: auto;
    width: 100%;
  }
  .flex-50 > div#end {
    width: 100%;
    text-align: center;
  }
  .flex-50 > img {
    display: block;
    margin: 0 auto;
  }
  .flex-50 > h2 {
    font-size: 1em;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #00427a;
    color: #00427a;
  }
  .flex-50 > .figcap {
    text-align: center;
  }
  /* 33％ 251224 */
  .flex-33_area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .flex-33 {
    width: calc(33% - 10px);
    padding: 5px;
  }
  .end-item{
    
  }
  /* テーブル 251016 */
  #vehiclemounted-table {
    width: 80%;
    margin: 0 auto;
  }
  #vehiclemounted-table > tbody > tr > th {
    background-color: #666666;
    color: #FFFFFF;
    text-align: center;
  }
  #vehiclemounted-table > tbody > tr > th, #vehiclemounted-table > tbody > tr > td {
    border: solid 1px;
    padding: 10px;
    text-align: center;
  }
}