/* =========================================
   ツール共通広告
========================================= */


/* =========================================
   共通広告枠
========================================= */
.tool-ad{
  width:100%;
  margin:24px auto;
  text-align:center;
  overflow:hidden;
}


/* =========================================
   PC / SP 切り替え
========================================= */
.tool-ad-pc{
  display:block;
}

.tool-ad-sp{
  display:none;
}


/* =========================================
   右中央広告
========================================= */
.tool-ad-middle{
  width:100%;
  padding:20px;
  border:1px solid #dbe3ef;
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}


/* =========================================
   右最下部広告
========================================= */
.tool-ad-bottom{
  width:100%;
  padding:20px;
  border:1px solid #dbe3ef;
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}


/* =========================================
   コピーモーダル
========================================= */
.tool-copy-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:999999;
}

.tool-copy-modal.is-open{
  display:flex;
  align-items:center;
  justify-content:center;
}


/* =========================================
   モーダル背景
========================================= */
.tool-copy-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.65);
}


/* =========================================
   モーダル本体
========================================= */
.tool-copy-modal__content{
  position:relative;
  z-index:1;
  width:calc(100% - 40px);
  max-width:680px;
  padding:40px 32px 32px;
  border:1px solid #dbe3ef;
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 20px 60px rgba(15,23,42,.25);
  box-sizing:border-box;
  text-align:center;
}


/* =========================================
   閉じるボタン
========================================= */
.tool-copy-modal__close{
  position:absolute;
  top:10px;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#475569;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}


/* =========================================
   モーダル広告
========================================= */
.tool-copy-modal__ad{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:100px;
  margin:0 auto 24px;
  overflow:hidden;
}

.tool-copy-modal__ad-pc{
  display:block;
}

.tool-copy-modal__ad-sp{
  display:none;
}


/* =========================================
   モーダル内コピーボタン
========================================= */
.tool-copy-modal__copy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin:0;
  padding:0 24px;
  border:1px solid #2563eb;
  border-radius:8px;
  background:#2563eb;
  color:#ffffff;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  cursor:pointer;
}

.tool-copy-modal__copy:hover{
  border-color:#1d4ed8;
  background:#1d4ed8;
}

.tool-copy-modal__copy:disabled{
  opacity:.6;
  cursor:default;
}


/* =========================================
   SP
========================================= */
@media (max-width:767px){

  .tool-ad-pc{
    display:none;
  }

  .tool-ad-sp{
    display:block;
  }

  .tool-copy-modal__ad-pc{
    display:none;
  }

  .tool-copy-modal__ad-sp{
    display:block;
  }

}


/* =========================================
   小さい画面
========================================= */
@media (max-width:600px){

  .tool-ad-middle,
  .tool-ad-bottom{
    padding:16px;
  }

  .tool-copy-modal__content{
    width:calc(100% - 24px);
    padding:40px 16px 24px;
  }

  .tool-copy-modal__copy{
    width:100%;
  }

}