@charset "UTF-8";

/* ==========================================================
   product.css
   商品ページ共通

   ・商品説明
   ・商品画像
   ・CTA
========================================================== */


/* ==========================================================
   01. PRODUCT HERO
========================================================== */

.product-hero{
    padding:90px 0 100px;
    text-align:center;
}

.product-hero h1{
    font-size:28px;
    color:var(--white);
    margin:30px 0 15px;
}

.seo-only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

/* ==========================================================
   02. PRODUCT LEAD
========================================================== */

.product-lead{ 
    width: fit-content;
    max-width:900px; 
    margin:70px auto 60px; 

    font-size:1.25rem;
    font-weight:400; 
    line-height:2.2; 
    letter-spacing:.05em; 
    color: var(--white); 

    text-align:left; 
}


/* ==========================================================
   03. PRODUCT IMAGE
========================================================== */

.product-image{
    width:100%;
    max-width:none;
    margin:0;
}

.product-image img{
    display:block;
    width:100%;
    height:auto;
}

.product-main{
    display:block;
    width:100vw;
    max-width:none;
    height:auto;
    margin:0;

    position:relative;
    left:50%;
    transform:translateX(-50%);
}


/* ==========================================================
   04. PRODUCT TITLE
========================================================== */

.product-title{
    /*background:var(--item-color);*/
    color:var(--white);
    font-size:2.0rem;
    font-weight:400;
    padding:0.6em 1em;
    border-radius:4px;
    text-align:center;
    display:inline-block;
    margin:60px auto 20px;
}

/* ==========================================================
   05. SUPPORT BANNER
========================================================== */

.support-banner{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;

    margin:0px auto 70px;
}

.support-banner img{
    width:70%;
    max-width:1400px;
    height:auto;
    display:block;
}
/* ==========================================================
   06. SUPPORT BANNER 2
========================================================== */

.support-banner-2{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:nowrap;
}

.support-banner-2 img{
    width:230px;      /* お好みで 420～500px */
    max-width:100%;
    height:auto;
    display:block;
}
/* ==========================================================
   07. FEATURES IMAGE
========================================================== */
.feature-image{
    margin-top:120px;
}

/* ==========================================================
   08. CTA
========================================================== */

.cta{
  margin-top:0px;
  padding:80px 0;
  background:var(--primary-color);
  color:var(--white);
  text-align:center;
}

/* ==========================================================
   09. RESPONSIVE
========================================================== */

@media (max-width:768px){

    .product-hero h1{
        font-size:32px;
    }
    .support-banner{
        gap:20px;
    }

    .support-banner img{
        width:100%;
        max-width:360px;
    }
   .support-banner-2{
        gap:25px;
    }

    .support-banner-2 img{
        width:100%;
        max-width:500px;
    }
}