@charset "Shift_JIS";
 /* =====================================================
  info_common.css
    - コンポーネントは“内部レイアウトのみ”を持つ（marginは持たない）
    - 差分（色/幅/サイズ/カラム数/状態）はユーティリティで付与
    - レイアウトカラム数は子で管理（gapは一元管理）
    - スコープは #info-content をルートとし、既存サイト干渉を回避
    - カスタムプロパティで値を定義しているものは、直前にフォールバックを記述
===================================================== */

/* ------------------------------
 * 1) スコープ & デザイントークン
 *    重要な定義のみカスタムプロパティを使用
 *    それ以外はライブラリ目的の記載
 * ------------------------------ */
#info-content {
  /* 規定カラー：重要 */
  --color-primary:   #00AC9C;  /* ご利用ガイドテーマカラー ボタン優先度：高 */
  --color-secondary: #707070;  /* ボタン優先度：中 */
  --color-tertiary:  #EFEFEF;  /* ボタン優先度：低 */
  --color-corporate: #d51121;  /* コーポレートカラー */

  /* 規定カラー：ライブラリ */
  --color-001: #F5F5F5;
  --color-002: #999999;
  --color-003: #CCCCCC;
  --color-004: #333333;
  --color-005: #ffffff;

    /* フォントサイズ */
  --fs-base: 16px;  /* 標準 */
  --fs-small: 14px; /* 許容スモール */
  --fs-min: 12px;   /* 最小 */

  /* ラディウス/影/透過 */
  --radius-base:  8px;
  --opacity-base: 0.9;
  --shadow-base: 0 1px 2px rgba(0,0,0,.06);
}

/* ------------------------------
 * 画面幅設定
 * ------------------------------ */
#info-content #index {
  width: 100%;
  max-width: 1200px;
  padding: 38px 20px;
}
/* ------------------------------
 * 画像
 * ------------------------------ */
#info-content #index img{ height: auto;margin: auto; }

/* ------------------------------
 * 要素同士の一定のmargin設定
 * 微調整はJSP側でユーティリティにて
 * ------------------------------ */
#info-content #index section + section{
  margin-top: 40px;
}
#info-content #index section.container{
  margin-top: 60px;
}
#info-content #index section.container:first-of-type{
  margin-top: 20px;
}
#info-content #index section,
#info-content #index .stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
  align-items: normal;
}


/* ------------------------------
 * 本文（p）/ 見出し / リンクテキスト / リスト
 * ------------------------------ */
/* ===== ベースのテキストスタイル ===== */
#info-content #index p,
#info-content #index ul,
#info-content #index summary {
  /* headerに干渉するため.info_header_menuを排除 */
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}
/* 注釈/小さめテキスト */
#info-content #index .small,
#info-content #index .pc_small  { font-size: 14px!important; line-height: 1.6; }
#info-content #index .xsmall,
#info-content #index .pc_xsmall { font-size: 12px!important; line-height: 1.6; }
/* ===== 見出し ===== */
/* 見出し：要素で固定px。余白は親で管理（margin:0） */
#info-content #index h1, #info-content #index h2, #info-content #index h3, #info-content #index h4, #info-content #index h5, #info-content #index h6 {
  margin: 0; line-height: 1.25; text-align: left;
}
#info-content #index h1 { font-size: 32px; }
#info-content #index h2 { font-size: 28px; color: #00AC9C; color: var(--color-primary, #00AC9C);}
#info-content #index h3 { font-size: 24px; }
#info-content #index h4 { font-size: 20px; }
#info-content #index h5 { font-size: 16px; }
#info-content #index h6 { font-size: 14px; }

/* ===== 強調 ===== */
/* レベル1：軽い強調 */
#info-content #index em { font-weight: 700; }
/* レベル2：重要 */
#info-content #index strong { 
  font-weight: inherit;
  color: #d51121;
  color:var(--color-corporate,#d51121);
}
/* レベル3：最重要（入れ子セレクタ） */
#info-content #index strong em, em strong, strong strong {
  color: #d51121;
  color:var(--color-corporate,#d51121);
  font-weight: 600;
}

/* ===== リンクテキスト ===== */
/* 外部リンクのスタイル（rel に nofollow を含む a 要素） */
#info-content #index a[rel~="nofollow"] { 
  padding: 0 15px 0 0;
  background: url(../../../resources4/common/img/ico_blank.png) no-repeat right center;
}
/* ===== リスト（ul,li） ===== */
#info-content #index ul.list {
  text-align: left;
  padding-left: 14px;
}
#info-content #index ul.list > li {
  list-style-type: disc;
}
#info-content #index ul.list li::marker {
  font-size: 0.8em;
  color:#333333;
}
#info-content #index ul.list li + li {
  margin-block-start: 8px;
}
#info-content #index .callout-warning ul.list li::marker {
  color:#d51121;
  color: var(--color-corporate,#d51121);
}

/* ------------------------------
 * カラムレイアウト割付
 * レイアウト：親 .flex + 子 .col-2 ~ .col-6
 * 既存のユーティリティ（ w70perなど ）使用する場合は .nowrap 併用
 * ------------------------------ */
/* 親：flex + 固定gap */
#info-content #index .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 32px ; 
}
#info-content #index .flex > * {
  box-sizing: border-box;
}
/* 等分カラム */
#info-content #index .col-2 { width: calc( calc(100% - calc(32px * 1)) /2); }
#info-content #index .col-3 { width: calc( calc(100% - calc(32px * 2)) /3); }
#info-content #index .col-4 { width: calc( calc(100% - calc(32px * 3)) /4); }
#info-content #index .col-5 { width: calc( calc(100% - calc(32px * 4)) /5); }
#info-content #index .col-6 { width: calc( calc(100% - calc(32px * 5)) /6); }
#info-content #index .col-7 { width: calc( calc(100% - calc(32px * 6)) /7); }
#info-content #index .col-8 { width: calc( calc(100% - calc(32px * 7)) /8); }
/* 等分カラム */
#info-content #index .flex.nowrap,
#info-content #index .flex.pc_nowrap {
  flex-wrap: nowrap;
}

/* ------------------------------
 * ボタン .btn-*
 * ------------------------------ */
/* ボタン基本CSS */
#info-content #index [class^="btn"] {
  position: relative;
  color: #333333;
  max-width: 100%;
  width: 700px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px;
  font-size: 16px;
  border-radius: .5rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  margin: auto;
}
#info-content #index [class^="btn"]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 23px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
}

/* ボタン：優先度高 */
#info-content #index .btn-primary {
  background: #00AC9C;
  background: var(--color-primary, #00AC9C);
  color: #fff;
}
#info-content #index .btn-primary:hover{ border-bottom: 1px solid #328880;box-sizing: border-box; }

/* ボタン：優先度中 */
#info-content #index .btn-secondary {
  background: #707070;
  background: var(--color-secondary, #707070);
  color: #fff;
}
#info-content #index .btn-secondary:hover{ border-bottom: 1px solid #666666;box-sizing: border-box; }

/* ボタン：優先度低 */
#info-content #index .btn-tertiary {
  background: #EFEFEF;
  background: var(--color-tertiary, #EFEFEF);
}
#info-content #index .btn-tertiary:hover{ border-bottom: 1px solid #e3e3e3;box-sizing: border-box; }

#info-content #index .btn-tertiary::after {
  border-top: 2px solid #707070;
  border-top: 2px solid var(--color-secondary,#707070);
  border-right: 2px solid #707070;
  border-right: 2px solid var(--color-secondary,#707070);
}

/* hover,activeの挙動 */
#info-content #index [class^="btn"]:hover,
#info-content #index ul.anchor li a:hover { transform: translateY(-1px); opacity: 0.9; }
#info-content #index [class^="btn"]:active,
#info-content #index ul.anchor li a:active { transform: translateY(0);border-bottom:1px solid transparent; }

/* ------------------------------
 * テキストボックス .callout-*
 * ------------------------------ */
#info-content #index [class^="callout"] {
  padding: 19px 20px;
  border: 1px solid;
  box-sizing: border-box;
  line-height: 1.6;
  color: #333333;
}
/* #info-content #index [class^="callout"] p {
  font-size: 14px;
} */
#info-content #index .callout-warning {
  color: #d51121;
  color:var(--color-corporate,#d51121);
  border-color: #d51121;
  border-color: var(--color-corporate,#d51121)
}
#info-content #index .callout-note {
  border-color: #CCCCCC;
}
#info-content #index .callout-info {
  border: none;
  background-color: #F5F5F5;
}

/* ------------------------------
 * アンカーリンク
 * ------------------------------ */
#info-content #index ul.anchor {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  align-items: center;
  justify-content: center;
}
#info-content #index ul.anchor li a {
  position: relative;
  display: inline-block;
  background-color: #F5F5F5;
  text-align: left;
  padding: 15px 47px 15px 20px;
  color: #333333;
}
#info-content #index ul.anchor li a:hover {
  text-decoration: none;
}

#info-content #index ul.anchor li a::before,
#info-content #index ul.anchor li a::after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  content: "";
  vertical-align: middle;
}
#info-content #index ul.anchor li a::before {
  width: 18px;
  height: 18px;
  -webkit-border-radius: 25%;
  border-radius: 5rem;
  border: 2px solid #333333;
}
#info-content #index ul.anchor li a::after {
  right: 28px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

/* ------------------------------
 * アコーディオン
 * ------------------------------ */
#info-content #index .accordion {
  margin-bottom: 7px;
}
#info-content #index .accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 25px 30px;
  color: #333333;
  cursor: pointer;
  background-color: #f5f5f5;
  border-radius: 8px;
}
#info-content #index .accordion summary::-webkit-details-marker {
  display: none;
}
#info-content #index .accordion summary::before,
#info-content #index .accordion summary::after {
  width: 3px;
  height: 25px;
  border-radius: 5px;
  background-color: #00AC9C;
  background-color: var(--color-primary, #00AC9C);
  content: '';
}
#info-content #index .accordion summary::before {
  position: absolute;
  right: 30px;
  rotate: 90deg;
}
#info-content #index .accordion[open] summary::after {
  display: none;
}
#info-content #index .accordion .accordion-open {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: 25px 30px;
  color: #333333;
  transition: transform .5s, opacity .5s;
}
#info-content #index .accordion[open] .accordion-open {
  transform: none;
  opacity: 1;
}

/* ------------------------------
 * キャプチャ（ライトボックス）
 * ------------------------------ */
#info-content #index a[rel^="lightbox"]{
  position: relative;
  border: 1px solid #ccc;
  display: block;
  width: fit-content;
} 
#info-content #index a[rel^="lightbox"]:hover {
    opacity: 0.9;
}
#info-content #index a[rel^="lightbox"]::before,
#info-content #index a[rel^="lightbox"]::after {
    position: absolute;
    right: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
}
#info-content #index a[rel^="lightbox"]::before {
    content: "";
    background-image: url(/bc/c/info/images/cap_icon.png);
    width: 24px;
    height: 24px;
    z-index: 10;
    top: 8px;
    right: 43px;
}
#info-content #index a[rel^="lightbox"]::after {
    background-color: #333333;
    z-index: 9;
    opacity: 0.8;
    content: "拡大";
    color: #fff;
    font-size: 13px;
    padding: 10px 10px 10px 42px;
}

/* ------------------------------
 * フッター
 * ------------------------------ */
#info-content #index ul.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
#info-content #index ul.footer li {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
  height: 4em;
  flex-basis: unset;
  border-radius: 5px;
}
/* 等分カラム */
#info-content #index ul.footer .col-2 { width: calc( calc(100% - calc(16px * 1)) /2); }
#info-content #index ul.footer .col-3 { width: calc( calc(100% - calc(16px * 2)) /3); }
#info-content #index ul.footer .col-4 { width: calc( calc(100% - calc(16px * 3)) /4); }
#info-content #index ul.footer .col-5 { width: calc( calc(100% - calc(16px * 4)) /5); }
#info-content #index ul.footer .col-6 { width: calc( calc(100% - calc(16px * 5)) /6); }
#info-content #index ul.footer .col-7 { width: calc( calc(100% - calc(16px * 6)) /7); }
#info-content #index ul.footer .col-8 { width: calc( calc(100% - calc(16px * 7)) /8); }

#info-content #index ul.footer li::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 23px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #707070;
  border-top: 2px solid var(--color-secondary,#707070);
  border-right: 2px solid #707070;
  border-right: 2px solid var(--color-secondary,#707070);
  transform: rotate(45deg);
  box-sizing: border-box;
}
#info-content #index ul.footer li a {
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 15px;
  color: #333;
  color:var(--color-text);
  padding: 0 40px 0 15px;
}
#info-content #index ul.footer li a:hover {
  text-decoration: none;
}

/* ------------------------------
 * タブ切替
 * ------------------------------ */
#info-content #index .tabs .panel { display: none; }
#info-content #index .tabs .panel.desktop,
#info-content #index .tabs .panel.mobile { padding-top: 40px;padding-bottom: 40px;}
#info-content #index .tabs .panel:not(.desktop ,.mobile) {padding-right: 30px;padding-left: 30px;box-sizing: border-box; }
#info-content #index .tabs .panel.active { display: block; }
#info-content #index .tabs{
  width: 100%;
}
#info-content #index .tabs .tablist {
  display: flex;
  height: 65px;
}
#info-content #index .tabs .tablist button {
  /*width: calc(100% / 2); 幅はユーティリティで設定*/
  border: none;
  font-size: 20px;
  border-bottom: 4px solid #eee;
  background-color: #fff;
}
#info-content #index .tabs .tablist button.active{
  color: #00AC9C;
  color: var(--color-primary, #00AC9C);
  font-weight: 600;
  border-bottom-color: #00AC9C;
  border-bottom-color: var(--color-primary, #00AC9C);
}
#info-content #index .tabs .panels {
  background-color: #FAFAFA;
  border: 1px solid #E0E0E0;
  padding: 25px 0;
}

#info-content #index .tabs section + section{
  margin-top: unset;
}
/* 等分カラム */
#info-content #index .tabs .col-2 { width: calc( 100% /2); }
#info-content #index .tabs .col-3 { width: calc( 100% /3); }
#info-content #index .tabs .col-4 { width: calc( 100% /4); }
#info-content #index .tabs .col-5 { width: calc( 100% /5); }
#info-content #index .tabs .col-6 { width: calc( 100% /6); }
#info-content #index .tabs .col-7 { width: calc( 100% /7); }
#info-content #index .tabs .col-8 { width: calc( 100% /8); }

/* ------------------------------
 * スライダー
 * ------------------------------ */
#info-content #index .evslider{visibility:hidden;}

#info-content #index .evslider .evslick_box .slide {
  opacity: 0.41;
  transition:opacity .3s;
}
#info-content #index .mobile .evslider .evslick_box .slide { width: 400px;margin: 0 25px;box-sizing: border-box;}
#info-content #index .desktop .evslider .evslick_box .slide { width: 700px;margin: 0 60px;box-sizing: border-box;}

#info-content #index .evslider .evslick_box .slide.slick-center {
    opacity: 1;
}
#info-content #index .evslider .evslick_box .slick-next,
#info-content #index .evslider .evslick_box .slick-prev{ z-index: 20; width: auto; height: auto;}
#info-content #index .mobile .evslider .evslick_box .slick-next{ right: 330px;}
#info-content #index .mobile .evslider .evslick_box .slick-prev{ left: 330px;}
#info-content #index .desktop .evslider .evslick_box .slick-next{ right: 161px;}
#info-content #index .desktop .evslider .evslick_box .slick-prev{ left: 161px;}

#info-content #index .evslider .evslick_box .slick-next:before,
#info-content #index .evslider .evslick_box .slick-prev:before {
    content: "";
    -webkit-border-radius: 25%;
    border-radius: 5rem;
    border: 2px solid #00AC9C;
    border: 2px solid var(--color-primary, #00AC9C);
    display: block;
    width: 52px;
    height: 52px;
    position: relative;
    background-color: #FAFAFA;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
}
#info-content #index .evslider .evslick_box .slick-next:after,
#info-content #index .evslider .evslick_box .slick-prev:after {
    content: "";
    right: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-top: 2px solid #00AC9C;
    border-top: 2px solid var(--color-primary, #00AC9C);
    border-right: 2px solid #00AC9C;
    border-right: 2px solid var(--color-primary, #00AC9C);
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
}
#info-content #index .evslider .evslick_box .slick-next:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg) translateY(2px) translateX(-2px);
}
#info-content #index .evslider .evslick_box .slick-prev:after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg) translateY(2px) translateX(-2px);
}
#info-content #index .evslider .evslick_box .slick-next.slick-disabled:before,
#info-content #index .evslider .evslick_box .slick-next.slick-disabled:after,
#info-content #index .evslider .evslick_box .slick-prev.slick-disabled:before,
#info-content #index .evslider .evslick_box .slick-prev.slick-disabled:after {
  opacity: 0;
  transition:opacity .3s;
}
#info-content #index .evslider .evslick_box .slick-dots{text-align: center; bottom: -30px;}
#info-content #index .evslider .evslick_box .slick-dots li{ margin: 0;}
#info-content #index .evslider .evslick_box .slick-dots li.slick-active button:before { color: #00AC9C; color: var(--color-primary, #00AC9C);}
#info-content #index .evslider .evslick_box .slick-dots li button:before{ color: #333333; }

/* スライド内部のレイアウト */
#info-content #index .mobile .evslider img {margin: auto;width: 250px;}
#info-content #index .evslider .evslick_box p.step-comment{ margin: 15px auto 15px;}
#info-content #index .evslider .evslick_box p.step-number{ font-size: 24px; text-align: center; margin: 0 auto 15px;position: relative;}
#info-content #index .evslick_box .slide:not(.slick-cloned):not(div:last-child) .step-number::after {
  content: '';
  height: 1px;
  background-color: #00ac9c;
  position: absolute;
  top: 18px;
  z-index: 1;
}
#info-content #index .mobile .evslick_box .slide:not(.slick-cloned):not(div:last-child) .step-number::after {
  width: calc(450px - 100px);
  left: calc(450px - 200px);
}
#info-content #index .desktop .evslick_box .slide:not(.slick-cloned):not(div:last-child) .step-number::after {
  width: calc(820px - 100px);
  left: calc(820px - 420px);
}

#info-content #index .evslick_box .slide:not(.slick-cloned) .step-number::before {
  background-color: #00AC9C;
  background-color: var(--color-primary, #00AC9C);
  color: #fff;
  font-size: 20px;
  padding: 10px 13px 8px;
  border-radius: 8px;
  line-height: 20px;
  display: block;
  width: 100px;
  margin: 0 auto 8px;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}
#info-content #index .evslick_box .slide:not(.slick-cloned):nth-child(1) .step-number::before { content: "STEP1"; }
#info-content #index .evslick_box .slide:not(.slick-cloned):nth-child(2) .step-number::before { content: "STEP2"; }
#info-content #index .evslick_box .slide:not(.slick-cloned):nth-child(3) .step-number::before { content: "STEP3"; }
#info-content #index .evslick_box .slide:not(.slick-cloned):nth-child(4) .step-number::before { content: "STEP4"; }
#info-content #index .evslick_box .slide:not(.slick-cloned):nth-child(5) .step-number::before { content: "STEP5"; }
#info-content #index .evslick_box .slide:not(.slick-cloned):nth-child(6) .step-number::before { content: "STEP6"; }
#info-content #index .evslick_box .slide:not(.slick-cloned):nth-child(7) .step-number::before { content: "STEP7"; }
#info-content #index .evslick_box .slide:not(.slick-cloned):nth-child(8) .step-number::before { content: "STEP8"; }



/* ------------------------------
 * テーブルレイアウト
 * ------------------------------ */
#info-content #index .table-wrap{overflow-x:auto}
#info-content #index .table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
#info-content #index .table th,
#info-content #index .table td{
  font-size: 16px;
  line-height: 1.6;
  border:1px solid #D9D9D9;
  padding:12px;
  word-break:break-word;
  text-align: left;
  vertical-align: middle;
}
/* Header */
#info-content #index .table thead th{
  background:#707070;   /* 指定色 */
  color:#fff;
  font-weight:600;
}
/* ---- 配色ルール ---- */
/* デフォルト（2カラム相当）：.cols-3plus が無い時だけ適用 */
#info-content #index .table:not(.cols-3plus) tbody tr > *:nth-child(1){background:#EFEFEF;}
#info-content #index .table:not(.cols-3plus) tbody tr > *:nth-child(2){background:#FFFFFF;}
#info-content #index .table:not(.cols-3plus) tbody tr > *[rowspan] {
    background-color:#EFEFEF;
}
#info-content #index .table:not(.cols-3plus) tbody tr > *[rowspan] + td {
    background-color: #FFFFFF;
}
/* 3〜4カラム時：.cols-3plus を付与 */
#info-content #index .table.cols-3plus tbody tr > *:nth-child(1){background:#999999;color:#fff;}
#info-content #index .table.cols-3plus tbody tr > *:nth-child(2){background:#EFEFEF;}
#info-content #index .table.cols-3plus tbody tr > *:nth-child(n+3){background:#FFFFFF;}


/***********************************/
/* === 2016.1.26add  INC-4287 */
/* === 2021.3.25add  REQ-5073 */
/***********************************/
*:not( #history_top *,#historylist *,.bcs_categoryBox */*←REQ-5073 */) {line-height:normal;}


/* ------------------------------
 * 旧CSSから引継ぎ　pc_style.cssなど
 * ------------------------------ */
/* テキスト */
.comment{font-size:16px!important; margin:0 0 16px 0!important; padding:0!important; }
.comment12{ font-size:12px!important; }

/* 目次 */
#topicsmain .contents { font-size:16px; margin:0; text-align:left; }
.pagemenu ul li a { font-size:14px!important; border-right:none!important; }
ul.list4 li { width:calc(100% / 4); }
ul.list3 li { width:calc(100% / 3); }
ul.list2 li { width:calc(100% / 2); }

/* 目次 別ページへ遷移 */
.pagemenu ul.filepath1 li a { background: url(//www.biccamera.com/bc/resources4/common/img/ico_arrow_right.png) no-repeat left 9px center!important; }
.pagemenu ul.filepath1 li { width:100%!important; }

/* 関連項目 */
.filepath ul{margin:0;}
#topicsmain .contentsb { text-align:left;font-size:24px; margin:0;}

/* 背景グレーのボタン */
.tolinkbtn_gray a { margin:0px!important;font-size: 16px; }
.tolinkbtn_gray a:after { top:45%!important; }

/* 画像関連 */
#topicsmain img { max-width: 100%; height:auto; }