@charset "UTF-8";

/* --------------------------------------------------
　min-sysポータル（仮）共用CSS
-------------------------------------------------- */

/* ページ内リンクスクロールをスムーズに */
html {
  scroll-behavior: smooth;
}

/* カード部分を浮かせる */
.card-box .card {
    transition: box-shadow 0.3s, transform 0.3s;
}
 
.card-box .card:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
    transform: translate(0, -2px);
}


/* ラジオボタンのデザイン変更 */
.radioArea input[type="radio"] {
  width         : 20pt;        /* 大きさ：横 */
  height        : 20pt;        /* 大きさ：縦 */
  vertical-align: top;         /* 並び位置   */
  display       : none;        /* チェックボックス非表示 */
}
 /* --- チェックボックス直後のlabel --- */
.radioArea input[type="radio"] + label {
  padding       : 0 4px;                      /* labelの余白 */
  font-size     : 18pt;                       /* labelの文字サイズ */
  font-weight   : bold;                       /* 文字太さ   */
  border        : 2px solid #ff0000; /* labelの枠線 */
  border-radius : 5px;                        /* labelの角丸 */
  background    : #ffffff;                    /* lebelの背景 */
  cursor        : pointer;                    /* カーソル設定 */
  transition    : .2s;                        /* なめらか変化 */
}
 /* --- 選択されたチェックボックス直後のlabel --- */
.radioArea input[type="radio"]:checked + label {
  background    : #ff0000;                    /* lebelの背景 */
}
 /* --- 選択されていないチェックボックス直後のlabelにマウスが乗った --- */
.radioArea input[type="radio"]:not(:checked) + label:hover {
  background    : rgba(255, 0, 0, 0.40);     /* lebelの背景 */
}



/*General style */

#accordion {padding: 30px 150px;}
.panel-title a {font-size: 14px;text-transform: uppercase;font-weight: 600;padding-right:20px}
.panel-default>.panel-heading {text-align: left;}
.panel-heading {padding: 15px 15px;}


/* Code for animation -- to change direction of chevron just change -40px to 40px and vice versa */
.glyphicon-chevron-down-custom span, .glyphicon-chevron-up-custom span {width: 10px; height: 5px; background-color: rgb(99, 99, 99); display: inline-block; transition: all .1s linear;}
.glyphicon-chevron-down-custom .sp-1, .glyphicon-chevron-up-custom .sp-2 {transform: skewY(-40deg);}
.glyphicon-chevron-up-custom .sp-1, .glyphicon-chevron-down-custom .sp-2 {transform: skewY(40deg);}
.glyphicon {top: -2px;}


/* "<a href～"を用いないリンク表示 */
.mylink:hover{
    cursor : pointer;
    color : #007bff;
}

.mylink_act{
    cursor : pointer;
    color : #007bff;
}


/* ドラッグアンドドロップボックス */
#dragDropArea{
  background-color: #f4f4f4;
/*  margin: 10px; */
  padding: 10px;
  border: #ddd dashed 5px;
/*  min-height: 200px; */
  text-align: center;
}
#dragDropArea div{
    color: #999;
    font-weight: bold;
/*    font-size: 14px; */
/*    font-size: 1.4em; */
}
#dragDropArea .drag-drop-buttons{
/*    margin-top: 20px; */
/*    font-size: 12px; */
/*    font-size: 1.2em; */
}
.drag-drop-buttons input{
    margin: auto;
}

#previewImage{
    width: 100%;
}


/* パンくずリスト カスタマイズ */
/* 【新規登録用】 */
#progress_entry {
    overflow: hidden;
    padding-bottom: 1.5em;
    text-align: center;
}
#progress_entry .part {
    border-bottom: 3px solid #999;
    float: left;
    margin-bottom: 0.75em;
    position: relative;
    width: 25%;
}
#progress_entry .desc {
    height: 2.5em;
    padding-bottom: 1em;
}
#progress_entry .desc span {
    font-size: 0.75em;
}
#progress_entry .circle {
    left: 0;
    position: absolute;
    right: 0;
    top: 1.75em;
}
#progress_entry .circle span {
    background: none repeat scroll 0 0 #666;
    border-radius: 2em 2em 2em 2em;
    color: #FFFFFF;
    display: inline-block;
    font-size: 0.75em;
    height: 2em;
    line-height: 2;
    width: 2em;
}
#progress_entry .step {
    position: absolute;
}
#progress_entry .on {
    border-bottom-color: #dc3545;
}
#progress_entry .on .desc {
    font-weight: bold;
    color:#dc3545;
}
#progress_entry .on .circle span{
    font-weight: bold;
    background-color:#dc3545;
}

/* 【プレミアムプラン用（新規契約申請）】 */
#progress_premium_new {
    overflow: hidden;
    padding-bottom: 1.5em;
    text-align: center;
}
#progress_premium_new .part {
    border-bottom: 3px solid #999;
    float: left;
    margin-bottom: 0.75em;
    position: relative;
    width: 25%;
}
#progress_premium_new .desc {
    height: 2.5em;
    padding-bottom: 1em;
}
#progress_premium_new .desc span {
    font-size: 0.75em;
}
#progress_premium_new .circle {
    left: 0;
    position: absolute;
    right: 0;
    top: 1.75em;
}
#progress_premium_new .circle span {
    background: none repeat scroll 0 0 #666;
    border-radius: 2em 2em 2em 2em;
    color: #FFFFFF;
    display: inline-block;
    font-size: 0.75em;
    height: 2em;
    line-height: 2;
    width: 2em;
}
#progress_premium_new .step {
    position: absolute;
}
#progress_premium_new .on {
    border-bottom-color: #ffc107;
}
#progress_premium_new .on .desc {
    font-weight: bold;
    color:#ffc107;
}
#progress_premium_new .on .circle span{
    font-weight: bold;
    background-color:#ffc107;
}


/* 【プレミアムプラン用（契約更新申請）】 */
#progress_premium_upd {
    overflow: hidden;
    padding-bottom: 1.5em;
    text-align: center;
}
#progress_premium_upd .part {
    border-bottom: 3px solid #999;
    float: left;
    margin-bottom: 0.75em;
    position: relative;
    width: 33%;
}
#progress_premium_upd .desc {
    height: 2.5em;
    padding-bottom: 1em;
}
#progress_premium_upd .desc span {
    font-size: 0.75em;
}
#progress_premium_upd .circle {
    left: 0;
    position: absolute;
    right: 0;
    top: 1.75em;
}
#progress_premium_upd .circle span {
    background: none repeat scroll 0 0 #666;
    border-radius: 2em 2em 2em 2em;
    color: #FFFFFF;
    display: inline-block;
    font-size: 0.75em;
    height: 2em;
    line-height: 2;
    width: 2em;
}
#progress_premium_upd .step {
    position: absolute;
}
#progress_premium_upd .on {
    border-bottom-color: #ffc107;
}
#progress_premium_upd .on .desc {
    font-weight: bold;
    color:#ffc107;
}
#progress_premium_upd .on .circle span{
    font-weight: bold;
    background-color:#ffc107;
}


/* 【チェックボックスをスイッチ状に】 */
.switch-checkbox {
/*    margin-bottom: 1rem; */
}

.switch-checkbox input[type=checkbox] {
    position: relative;
    cursor: pointer;
    width: 3.5rem;
    height: 1.9rem;
    margin-top: -0.2rem;
    border-radius: 60px;
    background-color: #ddd;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle;
    transition: .5s;
}

.switch-checkbox input[type=checkbox]::before {
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: 1.5rem;
    height: 1.5rem;
    box-sizing: border-box;
    border-radius: 50%;
    background: white;
    color: black;
    content: '';
    transition: .3s ease;
}

.switch-checkbox input[type=checkbox]:checked {
    background: #007bff;
}

.switch-checkbox input[type=checkbox]:checked::before {
    left: 1.8rem;
}

.switch-checkbox label {
    margin-left: 1rem;
}


/* ドロップダウンボタンのキャレット（▼）を非表示 */
.dropdown-toggle::after {
  display: none !important;
}

/* ドロップダウンリスト内のリンク選択時の色を変更 */
a.dropdown-item:active {
  background-color: #d1ecf1;
  color: #212529;
}

/* mdより大きい場合、border-topのみ非表示にする */
@media (min-width: 768px) {
  .border-top.border-top-md-none {
    border-top: none !important;
  }
}

/* パンくずリストの区切り文字設定 */
.breadcrumb-item + .breadcrumb-item::before {
  content: "＞";   /* 区切り文字を変更 */
  color: #6c757d;  /* 文字色（必要に応じて変更） */
}