.mod_applicationWrap{
    border: #d2d2dc 1px solid;
    border-radius: 3px;
    margin: 10px 0;
    padding:0.5em;
    width: 30%;
}
.mod_applicationWrap a{
    justify-content: center;
    display: flex;
    align-items: center;
    color: #005582;
    font-weight: bold;
    line-height: 1.75;
}
.mod_applicationcol{
    display:flex;
}
.mod_applicationcol span.applicationttl{
    color: #005582;
    font-weight: bold;
    line-height: 1.75;
}
.mod_applicationBox{
    border: #005582 1px solid;
    padding:0.8em;
    margin: 1em 2em 1em 0;
}
@media (max-width: 812px) {
  .mod_applicationlytLead{
    display: flex;
    flex-direction: column-reverse;
  }
  .mod_applicationlytLead .col{
    width:100% !important;
  }
  .mod_applicationWrap{
    width:100%;
  }
  .mod_applicationcol{
    flex-direction: column-reverse;
  }
  .mod_applicationcol div{
    width:100% !important;
  }
  .mod_applicationBox{
    margin:1em;
  }
  .applicationclickable-image{
    display: flex;
    margin: 0 auto;
  }
  .mod_applicationbtnlyt2col li{
    width: 100%;
    margin-bottom: 1.5em;
  }
}

/*--------------------------*/
.applicationmodal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s;
}

.applicationmodal img {
  max-width: 80%;  /* 画像の最大幅を親要素(modal)の90%に制限し、画面内に収まるようにする */
  max-height: 100vh;  /* 画像の最大高さをビューポートの高さ(100vh)に制限し、画面内に収まるようにする  */
  object-fit: contain;  /* 画像の比率を保持しつつ、指定された高さと幅に収める */
}

.applicationclickable-image:hover {
  cursor: zoom-in;  /* ホバー時にカーソルをズームインのアイコンに変更 */
}

.applicationmodal img:hover {
  cursor: zoom-out;  /* モーダル内の画像にホバー時にカーソルをズームアウトのアイコンに変更 */
}

@keyframes applicationmodalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes applicationmodalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
/*--------------------------*/