@charset "utf-8";

/*-----------body parts---------------
topM5 topM10 topM15 topM20 topM30
については、page.cssに記載有り。
------------------------------------*/

.topM0 { margin-top:0px !important; }
.topM40 { margin-top:40px !important; }
.topM50 { margin-top:50px !important;; }

.leftM0 { margin-left: 0px !important; }
.leftM5 { margin-left: 5px !important; }
.leftM10 { margin-left: 10px !important; }
.leftM15 { margin-left: 15px !important; }
.leftM20 { margin-left: 20px !important; }
.leftM30 { margin-left: 30px !important; }
.leftM40 { margin-left: 40px !important; }
.leftM50 { margin-left: 50px !important; }

.rightM0 { margin-right: 0px !important; }
.rightM5 { margin-right: 5px !important; }
.rightM10 { margin-right: 10px !important; }
.rightM15 { margin-right: 15px !important; }
.rightM20 { margin-right: 20px !important; }
.rightM30 { margin-right: 30px !important; }
.rightM40 { margin-right: 40px !important; }
.rightM50 { margin-right: 50px !important; }

.bottomM0 { margin-bottom: 0px !important; }
.bottomM5 { margin-bottom: 5px !important; }
.bottomM10 { margin-bottom: 10px !important; }
.bottomM15 { margin-bottom: 15px !important; }
.bottomM20 { margin-bottom: 20px !important; }
.bottomM30 { margin-bottom: 30px !important; }
.bottomM40 { margin-bottom: 40px !important; }
.bottomM50 { margin-bottom: 50px !important; }

.fwb{font-weight:bold;}

/*------------font control-----------
font10 font11 font14
については、page.cssに記載有り。
------------------------------------*/

.font16 { font-size:16px;}
.font18 { font-size:18px;}
.font20 { font-size:20px;}
.font22 { font-size:22px;}


/*------------------------------------

リスト部分

------------------------------------*/

ol.circle-numbers {
    list-style: none; /* デフォルトの数字を消す */
    counter-reset: my-counter; /* カウンタをリセット */
    padding-left: 0;
  }

  ol.circle-numbers li {
    counter-increment: my-counter; /* 数字を1ずつ増やす */
    position: relative;
    /*--padding-left: 2em;--*/
    padding-left: 1.5em;
    margin-bottom: 10px;
  }

  ol.circle-numbers li::before {
    /* カウンタの値を丸囲み文字のUnicodeに変換、または力技で指定 */
    content: counter(my-counter); 
    
    /* 丸の外見を作る */
    position: absolute;
    left: 0;
    /*--top: 50%;
    transform: translateY(-50%);--*/
    top: 0;
    transform: none;
    margin-top: 2px;
    width: 1.15em;
    height: 1.15em;
    background: #fff; /* 背景色（黒） */
    border: 1px solid #333;
    color: #333; /* 文字色（白） */
    border-radius: 50%; /* 正円にする */
    display: flex;
    align-items:center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: normal;
  }

/*------------------------------------
ポップアップ部分
------------------------------------*/


/* チェックボックス本体は隠す */
.pop-check {
  display: none;
}

/* リンクに見せるための装飾 */
.pop-trigger {
  color: #007bff; /* 青色（リンク色） */
  text-decoration: underline;
  cursor: pointer;
}

/* ポップアップの背景（最初は非表示） */
.pop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* 暗い背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

/* チェックが入った時に表示させる */
.pop-check:checked ~ .pop-overlay {
  visibility: visible;
  opacity: 1;
}

/* 背景クリックで閉じるためのエリア */
.pop-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default;
}

/* 画像を囲むウィンドウ */
.pop-window {
  position: relative;
  max-width: 90%; /* 画面の90%までに制限 */
  max-height: 90%;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}

/* 画像自体の設定 */
.pop-window img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 閉じるボタン（×） */
.pop-close {
  position: absolute;
  top: -35px;
  right: 0;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}