@charset "utf-8";
/*
Theme Name: meets child
Theme URI:https://tcd-theme.com/tcd086/
Description:WordPressテーマ「meets」の子テーマ
Template:meets_tcd086
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/*
  ここから下にCSSを追記してください。
*/
/* =========================
   商品ページ全体
========================= */

.product-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}


/* =========================
   商品ヘッダー
========================= */

.product-header {
    text-align: center;
    margin-bottom: 60px;
}


.product-header h1 {
    font-size: 36px;
    margin-top: 30px;
    margin-bottom: 15px;
}


.product-header .maker {
    color: #666;
    font-size: 16px;
}


/* =========================
   メイン画像
========================= */

.product-main-image {
    margin-bottom: 30px;
}


.product-thumbnail {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 12px;
}




/* =========================
   各セクション
========================= */

.product-section {
    margin-bottom: 60px;
}


.product-section h2 {
    font-size: 28px;
    border-left: 6px solid #1e73be;
    padding-left: 15px;
    margin-bottom: 25px;
}


.product-section p,
.product-section div {
    line-height: 1.8;
    font-size: 16px;
}





/* =========================
   価格ボックス
========================= */

.price-box {
    background: #f7f9fc;
    padding: 30px;
    border-radius: 12px;
}


.price-box strong {
    font-size: 28px;
}




/* =========================
   特徴
========================= */

.feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.feature-box {
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
}


.feature-box h3 {
    font-size: 20px;
    margin-bottom: 15px;
}




/* =========================
   仕様
========================= */

.spec-table {
    background: #fafafa;
    padding: 25px;
    border-radius: 10px;
}



/* =========================
   サポート
========================= */

.support-box {
    background: #f1f7ff;
    padding: 30px;
    border-radius: 12px;
}



/* =========================
   お問い合わせ
========================= */

.contact-box {
    text-align: center;
    padding: 50px 20px;
    margin-top: 50px;
}


.contact-button {
    display: inline-block;
    background: #1e73be;
    color: #fff;
    padding: 18px 50px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
}


.contact-button:hover {
    opacity: 0.8;
}




/* =========================
   スマホ対応
========================= */

@media (max-width: 768px) {
    .product-page {
        padding: 20px;
    }
    .product-header h1 {
        font-size: 28px;
    }
    .feature-list {
        grid-template-columns: 1fr;
    }
    .product-section h2 {
        font-size: 22px;
    }
}

.option-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:30px;
}

.option-card{
    position:relative;
    display:block;
    border:1px solid #ddd;
    border-radius:12px;
    padding:20px;
    cursor:pointer;
    transition:.2s;
    background:#fff;
    width: 200px;
    height: 245px;
}

.option-card:hover{
    border-color:#2c8f2c;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.option-card input{
    position:absolute;
    top:15px;
    left:15px;
    width:22px;
    height:22px;
}

.option-image{
    text-align:center;
    margin-bottom:15px;
}

.option-image img{
    width:100%;
    height:170px;
    object-fit:contain;
}

.option-card h3{
    color:#2c8f2c;
    font-size:18px;
    margin:15px 0 10px;
}

.option-card p{
    font-size:14px;
    line-height:1.7;
    color:#444;
}
.wpcf7 input[readonly] {
    background: #f8f8f8;
    color: #666;
    cursor: default;
}

#gallery_extra_list{
    margin:70px 0 0;
    padding-top:50px;
    border-top:1px solid #e5e5e5;
}

.gallery_extra_title{
    font-size:28px;
    text-align:center;
    margin-bottom:35px;
}

.gallery_extra_grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.gallery_extra_grid .item img{
    width:100%;
//    height:200px;      /* 高さを固定 */
    aspect-ratio:4 / 3;
    object-fit:cover;
    display:block;
    border-radius:8px;
}

.gallery_extra_grid .caption{
    margin-top:12px;
    font-size:14px;
    line-height:1.7;
    color:#666;
}

@media (max-width:768px){

    .gallery_extra_grid{
        grid-template-columns:1fr;
    }

}

#gallery_extra_list{
   padding:20px;
}