@charset "UTF-8";

/* ==========================================================
   01. MODAL
========================================================== */
.custom-modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: 95%;
  max-width: 750px; /* 1行を収めるため広めに保持 */

  /* 縦幅を固定せず、中身に合わせて最小限にする */
  height: auto;
  max-height: 90vh; /* 画面からはみ出さない最大値 */
  background: #fff;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  overflow: auto; /* スクロールバーを強制排除 */
  margin: auto;
}
/* 背景を暗くしてボカす */
.custom-modal::backdrop {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(5px);
}

/* ふわっと出るアニメーション */
.custom-modal[open] {
  animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-inner {
  padding: 40px;
  position: relative;
  text-align: center; /* 中央寄せの起点 */
}

/* --- 画像のサイズ調整（重要） --- */
.modal-img{
    display:block;
    width:75%;
    max-width:200px;
    height:auto;

    margin:0 auto 20px;

    border-radius:6px;
    box-shadow:0 4px 15px rgba(0,0,0,.1);

    cursor: zoom-in;
    
    transition: transform .3s ease, box-shadow .3s ease;
    transform-origin: center 20%;
    cursor: zoom-in;
  }

.modal-img:hover{
    transform: translateY(70px) scale(1.8);
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
    z-index:100;
}

/* --- 上の文章：1行センタリング --- */
.modal-content p {
  display: block;
  text-align: center;
  line-height: 1.8;
  margin-bottom: 25px;
  font-size: 0.98rem;
}

/* --- 下のリスト：行頭を揃えたまま中央 --- */
.modal-feature-list {
  display: inline-block;
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.modal-feature-list li{
    margin-bottom:10px;
    font-weight:bold;
    color:var(--item-color, var(--primary-color));
    font-size:1.05rem;
}
.modal-img.no-zoom{
    cursor: default;
}

.modal-img.no-zoom:hover{
    transform: none;
    cursor: default;
}

.modal-customize-img{
    display:block;
    width:100%;
    max-width:750px;
    height:auto;
    margin:15px auto;
}
/* ==========================================================
   02. CLOSE BUTTON
========================================================== */
.close-btn{
    position:absolute;
    top:15px;
    right:15px;

    width:34px;
    height:34px;

    border:none;
    border-radius:50%;
    background:#f0f0f0;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
    cursor:pointer;
}

/* ==========================================================
   03. RESPONSIVE
========================================================== */
@media (max-width: 768px) {

  .modal-content p {
    white-space: normal;
    font-size: 0.92rem;
  }

  .modal-img {
    max-width: 100%;
    max-height: 180px;
  }

  .modal-inner {
    padding: 30px 20px;
  }

}

/* 03 modal 高さ調整 */
#modal-dm{
    height:auto;
    min-height:0;
    max-height:none;
}

#modal-dm .modal-inner{
    padding-bottom:40px;
}

#modal-dm .modal-main-text{
    margin-bottom:0;
}

/* ==========================================================
   モーダル下部画像 03用
========================================================== */

.modal-bottom-wrap{
    width:min(540px, 100%);
    margin:25px auto 0;
}

#modal-dm .modal-bottom-img{
    display:block;
    width:100%;
    height:auto;
    margin:0;
    border-radius:8px;
}

.etc-label{
    display:block;
    width:100%;
    margin-top:6px;
    text-align:right;

    color:#666;
    font-size:.9rem;
    font-style:italic;
}

/* ==========================================================
   各モーダル共通設定
========================================================== */

/* モーダル本体 */
.custom-modal.modal-kumiaikikan,
.custom-modal.modal-tablet,
.custom-modal.modal-union-net,
.custom-modal.modal-mail,
.custom-modal.modal-handy,
.custom-modal.modal-customize,
.custom-modal.modal-hoan,
.custom-modal.modal-hanbai,
.custom-modal.modal-haiso{
  width:90%;
  max-width:1200px;
  max-height:90vh;
  padding:0;
  overflow:hidden;
  box-sizing:border-box;
}

/* モーダル内部 */
.modal-kumiaikikan .modal-inner,
.modal-tablet .modal-inner,
.modal-union-net .modal-inner,
.modal-mail .modal-inner,
.modal-handy .modal-inner,
.modal-customize .modal-inner,
.modal-hoan .modal-inner,
.modal-hanbai .modal-inner,
.modal-haiso .modal-inner{
  padding:24px 30px;
}

/* モーダル画像 */
.modal-kumiaikikan-img,
.modal-tablet-img,
.modal-union-net-img,
.modal-mail-img,
.modal-handy-img,
.modal-customize-img,
.modal-hoan-img,
.modal-hanbai-img,
.modal-haiso-img{
    display:block;
  width:auto;
  max-width:100%;
  max-height:70vh;
  height:auto;
  margin:15px auto 0;
  border-radius:10px;
  object-fit:contain;
}

/* ==========================================================
04. カタログズーム
========================================================== */

.catalog-modal-content {
    position: relative;
}

.catalog-zoom {
    position: absolute;
    top: 16px;
    right: 70px;
    z-index: 100;

    padding: 8px 16px;

    border: 0;
    border-radius: 20px;

    background: #0f5cff;
    color: #fff;

    font-weight: 700;
    cursor: pointer;
}

#flipbook {
    transition: transform 0.3s ease;
    transform-origin: center center;
}

#flipbook.is-zoomed {
    transform: scale(1.5);
}

@media (max-width: 768px) {
    .catalog-zoom {
        display: none;
    }

    #flipbook.is-zoomed {
        transform: none;
    }
}

/* 対象モーダルすべて */
.custom-modal:is(
  .modal-kumiaikikan,
  .modal-tablet,
  .modal-union-net,
  .modal-mail,
  .modal-handy,
  .modal-customize,
  .modal-hoan,
  .modal-hanbai,
  .modal-haiso
){
  width:fit-content !important;
  max-width:95vw !important;
  max-height:90vh !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* モーダル内部 */
.custom-modal:is(
  .modal-kumiaikikan,
  .modal-tablet,
  .modal-union-net,
  .modal-mail,
  .modal-handy,
  .modal-customize,
  .modal-hoan,
  .modal-hanbai,
  .modal-haiso
) .modal-inner{
  position:relative;
  width:fit-content !important;
  height:auto !important;
  padding:24px 30px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* 各モーダル内の画像 */
.custom-modal:is(
  .modal-kumiaikikan,
  .modal-tablet,
  .modal-union-net,
  .modal-mail,
  .modal-handy,
  .modal-customize,
  .modal-hoan,
  .modal-hanbai,
  .modal-haiso
) .modal-inner > img{
  display:block !important;
  width:auto !important;
  height:calc(90vh - 48px) !important;
  max-width:calc(95vw - 60px) !important;
  max-height:calc(90vh - 48px) !important;
  margin:0 auto !important;
  object-fit:contain !important;
}