@charset "UTF-8";

/* ==========================================================
   item-lpg.css
   DOCTOR LPG専用CSS

   ・商品カラー
   ・Hero画像
   ・商品固有レイアウト
========================================================== */

/* ==========================================================
   01. DOCTOR LPG VARIABLES
========================================================== */
:root{
  --item-color:#005bac;
  --item-color-dark:#003b73;
  --item-color-light:#eaf5ff;
}

/* ==========================================================
   02.HERO
========================================================== */
.hero{
  background:
    linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
    url("../images/cd_ground_b3.jpg") center/cover no-repeat;
}

/* ==========================================================
   03.PRODUCT TITLE
========================================================== */
.product-title{
  /*background:var(--item-color); */
}

.support-more-wrap {
  text-align: center;
  margin-top: 24px;
}

/* ==========================================================
   04.SUPPORT-BTN
========================================================== */
.support-more-wrap{
    text-align:center;
    margin-top:24px;
}

.support-more-btn{
    background: transparent;
    border: none;
    padding: 0;
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .05em;
    transition: .25s ease;
}

.support-more-btn:hover{
    color: #4da3ff;
    text-shadow:
        0 0 8px rgba(77,163,255,.7),
        0 0 16px rgba(77,163,255,.45);
        transform:translateY(-2px);
}

.support-more-btn:focus{
    outline:none;
}

/* 展開部分 */

.support-more-content{
    max-height:0;
    overflow:hidden;
    opacity:1;

    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,.07),
        rgba(255,255,255,.02)
      ),
      #111111;   /* ←追加 */
      box-shadow: inset 0 8px 18px rgba(255,255,255,.03);
      
    transition:
        max-height 2.5s cubic-bezier(.22,1,.36,1);
}

.support-more-content.is-open{
    max-height:1200px;

    border-top:1px solid rgba(255,255,255,.06);
 
    padding-bottom:60px;
}

.support-detail-img{
    display:block;
    width:100%;
    max-width:1000px;
    max-height:none;
    height:auto;

    margin:30px auto 0;
    border-radius:14px;

    opacity:0;
    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transition:
        opacity .5s ease .3s,
        box-shadow .6s ease .3s;
}

.support-more-content.is-open .support-detail-img{
    opacity:1;
    box-shadow:0 18px 38px rgba(0,0,0,.22);
}

.modal-text{
    margin-top:20px;
    margin-bottom:12px;
    color:#333;
    font-size:1rem;
    line-height:1.9;
    text-align:left;
}

/* ==========================================================
   05. お問い合わせセクション
========================================================== */
.contact2{
    background:
    linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)),
    url("../images/contact-lpg.jpg") center/cover no-repeat;
    padding-top:100px;
}

@media (max-width: 768px) {
    /* レスポンシブ用お問い合わせ背景 */
  .contact2 {
    min-height: 0px;
    padding: 25px 20px;
    background:
      linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)),
      url("../images/contact-lpg-sp.jpg") center/ 100% 100% no-repeat;

    padding-top: 0px;
  }  
  .product-lead {
    width: auto;
    max-width: none;
    margin-inline: 20px;
    padding: 0;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: left;
  }

  .pc-break {
    display: none;
  }
}

/* ==========================================================
   機能タブ：スマートフォン幅調整
========================================================== */

@media (max-width: 768px) {
  .function-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    max-width: 100%;
    gap: 3px;
    margin-inline: auto;
  }

  .function-tab {
    min-width: 0;
    width: 100%;
    padding: 10px 2px;

    font-size: clamp(9px, 2.4vw, 13px);
    white-space: nowrap;
  }
}