@charset "utf-8";

/* =============================================== */
/* DETAIL PAGE STYLES */
/* =============================================== */

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 50px;
    font-size: 14px;
    color: var(--light-text-color);
    border-bottom: 1px solid var(--border-color);
}
.breadcrumbs ol { list-style: none; display: flex; padding-left: 0; }
.breadcrumbs li::after { content: '>'; margin: 0 10px; }
.breadcrumbs li:last-child::after { content: ''; }
.breadcrumbs a { color: var(--main-color); }
.breadcrumbs .publish-date { font-weight: bold; }

/* Product Header */
.product_first {
    text-align: center;
    padding: 40px 20px;
}
.product_first .catchphrase {
    color: var(--main-color);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.product_first .product-name {
    font-size: 32px;
    font-weight: bold;
}


.product_slider_section {
    background-color: #EEF2F9;
    padding: 50px 0 10px;
}

/* Product Slider */
.product-slider .swiper-slide {
    background: #f0f0f0;
    text-align: center;
}
.product-slider .swiper-slide img {
    width: auto;
    max-width: 100%;
    height: 500px;
    object-fit: cover;
}
.product-slider .swiper-button-next,
.product-slider .swiper-button-prev {
    color: var(--main-color);
    background-color: rgba(255, 255, 255, 0.7);
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.product-slider .swiper-button-next::after,
.product-slider .swiper-button-prev::after {
    font-size: 24px;
    font-weight: bold;
}
.product-slider .swiper-pagination-bullet-active {
    background-color: var(--main-color);
}

/* Product Intro */
.product-intro {
    padding: 40px 0 0;
    margin: 0 auto;
}
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.tags .tag {
    background-color: #EEF2F9;
    color: var(--main-color);
    padding: 5px 15px;
    font-size: 13px;
    border-radius: 15px;
    font-weight: bold;
}
.product-intro .description {
    font-size: 16px;
    line-height: 1.9;
}

/* Page Section Title */
.page-section { margin-top: 60px; }
.page-section-title {
    background-color: var(--main-color);
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    margin-bottom: 40px;
}

/* Spokesperson */
.spokesperson {
    border: 2px solid var(--main-color);
    border-radius: 10px;
    padding: 25px 20px 25px 50px;
    margin: 40px auto;
    display: flex;
    position: relative;
    overflow: hidden;
}
.spokesperson_female::before {
    content: url(../../img/common/avatar-female01.png);
    position: absolute;
    bottom: -30px;
    right: 0;
    z-index: 3;
}
.spokesperson_male::before {
    content: url(../../img/common/avatar-male01.png);
    position: absolute;
    bottom: -30px;
    right: 0;
    z-index: 3;
}
.spokesperson::after {
    background-color: var(--main-color);
    content: "";
    right: -20px;
    bottom: -50px;
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50% 50% 0 50%;
    z-index: 1;
}
.spokesperson-avatar { text-align: center; flex-shrink: 0; margin-top: auto; z-index: 10; }
.spokesperson-avatar img {
    width: 112.5px;
    height: 145.5px;
}
.spokesperson-message {
    flex-grow: 1;
    position: relative;
    background-color: #fff;
}
/* .spokesperson-message::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -22px;
    margin-top: -12px;
    border-style: solid;
    border-width: 12px 22px 12px 0;
    border-color: transparent var(--main-color) transparent transparent;
} */
.spokesperson-message .title {
    font-weight: bold;
    color: var(--main-color);
    font-size: 18px;
    margin-bottom: 15px;
}
.spokesperson-message p {
    font-size: 15px;
    line-height: 1.8;
}

@media screen and (max-width: 768px) {
    .spokesperson {
        padding-left: 20px;
    }
    .spokesperson_male::before {
        display: none;
    }
    .spokesperson_male::after {
        display: none;
    }
    .spokesperson_female::before {
        display: none;
    }
    .spokesperson_female::after {
        display: none;
    }
}

/* Features Section */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.feature-item { text-align: center; background-color: var(--secondary-bg); padding: 15px 10px; }
.feature-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 15px;
}
.feature-item h4 { font-size: 20px; margin: 10px auto; }
.feature-item p { font-size: 14px; line-height: 1.7; text-align: left; padding: 0 10px; }

/* Video Section */
.video-section {
    display: flex;
    gap: 30px;
    align-items: center;
}
.video-player { flex: 1; position: relative; }
.video-player img { aspect-ratio: 9/16; }
.video-player .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    color: #fff;
    font-size: 40px; /* triangle size */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    padding-left: 5px; /* adjust triangle position */
}
.video-point { flex-basis: 40%; }
.video-point .point-header {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.video-point .point-header span:first-child { background: #ffe4e1; padding: 5px 10px; border-radius: 15px; font-size: 14px; font-weight: bold; color: var(--main-color); }
.video-point .point-header span:last-child { font-weight: bold; font-size: 16px; }
.video-point .point-title { font-size: 24px; font-weight: bold; color: var(--main-color); margin-bottom: 15px; }
.video-point p { font-size: 15px; line-height: 1.8; margin-bottom: 20px; }
.video-point .official-link { font-size: 14px; color: var(--main-color); font-weight: bold; }

/* Use Cases */
.usecase-item {
    border-bottom: 1px solid var(--border-color);
    padding: 0 0 20px;
}
.usecase-item:last-child { border-bottom: none; }
.usecase-item h4 { font-size: 20px; margin-bottom: 5px; }
.usecase-item p { font-size: 14px; color: var(--light-text-color); }

/* Specs */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
}
.spec-item {
    background-color: #fff;
    padding: 15px;
    border: 2px solid #fff;
    min-height: 150px;
    text-align: center;
}
.spec-item h5 { font-size: 16px; margin-bottom: 10px; }
.spec-item h5::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background-color: #428bca;
    margin: 5px auto 0 auto;
}
.spec-item .value { font-size: 1.7em; font-weight: bold; color: var(--link-color); }
.spec-item .value_small { font-size: 1.4em; font-weight: bold; color: #34495e; }
.spec-item p { font-size: 14px; line-height: 1.7; color: var(--light-text-color); }
.specs-table-placeholder {
    background-color: var(--secondary-bg);
    text-align: center;
    padding: 60px 20px;
    font-size: 18px;
    color: var(--light-text-color);
    margin-top: 40px;
}

/* Release Info */
.release-info-item {
    font-size: 16px;
    padding: 10px 0;
}
.release-info-item span {
    font-weight: bold;
    margin-right: 20px;
}

/* CTA Boxes */
.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.cta-grid-100 {
    display: block;
    grid-template-columns: auto auto!important;
}
.cta-box {
    border: 2px solid var(--main-color);
    border-radius: 8px;
    padding: 30px;
}
.cta-box-100 p {
    padding: 0 10%;
}
.cta-box h4 { font-size: 22px; color: var(--text-color); margin: 0 0 15px; text-align: center; }
.cta-box p { font-size: 15px; line-height: 1.8; margin-bottom: 20px; }
.cta-box .catalog-img {
    /* background-color: #e9e9e9; */
    /*  display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa; */
    margin-bottom: 25px;
}
/* .catalog-img img {
    height: 150px;
} */
    .cta-btn-group {
    text-align: center;
    }
    .cta-btn-group .cta-btn {
    background-color: var(--accent-color);
    color: #fff;
    padding: 15px 60px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    display: inline-block;
}
.cta-btn-group .cta-btn:hover {
    background-color: var(--hover-link-color);
}

/* Related Info */
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.related-item {
    background-color: var(--secondary-bg);
    padding: 20px;
}
.related-item h4 {
    border-bottom: 2px solid var(--main-color);
    font-size: 20px;
    padding-bottom: 10px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;

}
.related-item p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
    min-height: 60px;
}
.related-item .related-btn {
    background-color: var(--accent-color);
    color: #fff;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    display: block;
    text-align: center;
}

.related-item .related-btn:hover {
    background-color: var(--hover-link-color);
}

/* Company Info */
.company-header {
    display: flex;
    align-items: center;
    gap: 20px;
}
.company-header img {
    height: auto;
    width: 100%;
    max-width: 200px;
}
.company-header h4 {
    font-size: 24px;
}
.section-subtitle {
    font-size: 20px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 5px solid var(--main-color);
    margin-bottom: 20px;
}
.company-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.company-table th, .company-table td {
    border: 1px solid var(--border-color);
    padding: 15px;
    text-align: left;
}
.company-table th {
    background-color: var(--secondary-bg);
    width: 200px;
    font-weight: bold;
}
.company-overview {
    font-size: 15px;
    line-height: 1.9;
}
.company-related-btn {
    margin: 20px 0;
    text-align: center;
}
.company-related-btn a {
    background-color: var(--accent-color);
    color: #fff;
    padding: 10px;
    font-size: .95em;
    font-weight: bold;
    border-radius: 5px;
    display: inline-block;
    width: 400px;
}

.company-related-btn a:hover {
    background-color: var(--hover-link-color);
}

/* Responsive */
@media (max-width: 992px) {
    .main-content { padding: 0 20px; }
    .header, .breadcrumbs, .footer {  padding-left: 20px; padding-right: 20px; }
    .features-grid, .related-grid { grid-template-columns: 1fr; }
    .video-section { flex-direction: column; }
    .cta-grid { grid-template-columns: 1fr; }
    .company-table th { width: 110px; }
    .company-related-btn a { width: 90%; }
}
@media (max-width: 768px) {
    .breadcrumbs { align-items: normal; flex-direction: column; }
    .breadcrumbs ol li:first-child { min-width: 80px; }
    .publish-date { text-align: left; width: 100%; }
    .product_first .product-name { font-size: 28px; }
    .spokesperson { flex-direction: column; }
    .spokesperson-message::before {
        top: -22px; left: 50%; margin-left: -12px;
        border-width: 0 12px 22px 12px;
        border-color: transparent transparent var(--main-color) transparent;
    }
    .company-header { flex-direction: column; align-items: flex-start; }
}



/* --- */
.slide_only div {
    display: block;
    margin: 0 auto!important;
    width: auto!important;
}
.slide_only div img {
    height: auto!important;
    width: 100%!important;
}
/* --- テーブルコンテナ --- */
.size-table-container {
    max-width: 500px; /* テーブルの最大幅を設定 */
    margin: 40px 0; /* 中央寄せと上下の余白 */
    border: 1px solid #ddd; /* 全体のボーダー */
    border-collapse: collapse; /* セルのボーダーが重ならないように */
    border-radius: 8px; /* 角丸 */
    color: #333;
}

/* --- テーブル本体 --- */
.size-table {
    width: 100%; /* 親要素の幅いっぱいに広げる */
    border-collapse: collapse; /* セルのボーダーが重ならないように */
    background-color: #ffffff; /* テーブルの背景色 */
}

/* --- キャプション（テーブルタイトル） --- */
.size-table caption {
    background-color: #f2f2f2; /* 薄いグレーの背景 */
    padding: 15px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #333;
    border-bottom: 1px solid #ddd; /* 下線 */
    caption-side: top; /* キャプションを上部に配置 */
}

/* --- テーブルのヘッダー行 (thead) --- */
.size-table thead tr {
    /* 1行目（幅）はtheadに入れることで、意味的にヘッダーとします */
}

/* --- テーブルのボディ (tbody) --- */
.size-table tbody tr {
    /* ボディ行のスタイル */
}

/* --- すべてのセル（thとtd）の共通スタイル --- */
.size-table th,
.size-table td {
    padding: 12px 15px; /* セル内の余白 */
    border: 1px solid #eee; /* 各セルのボーダー */
    vertical-align: middle; /* テキストの垂直方向中央揃え */
    font-size: 15px;
}

/* --- ヘッダーセルのスタイル（項目名） --- */
.size-table th {
    background-color: #fcfcfc; /* やや明るい背景色 */
    font-weight: normal; /* 太字ではなく標準にする（元の画像に合わせる） */
    width: 30%; /* 左側の列の幅を固定（お好みで調整） */
    text-align: left; /* 左寄せ */
    color: #555;
}

/* --- データセルのスタイル（値） --- */
.size-table td {
    text-align: left; /* 値を左寄せ */
    color: #333;
}

/* --- 最初の行の上部ボーダーを消す（テーブル全体のボーダーが効くように） --- */
.size-table thead tr:first-child th,
.size-table thead tr:first-child td {
    border-top: none;
}

/* --- 各行の最後のセルの右ボーダーを消す（テーブル全体のボーダーが効くように） --- */
.size-table th:last-child,
.size-table td:last-child {
    border-right: none;
}

/* --- レスポンシブ対応（スマホ向け） --- */
@media (max-width: 600px) {
    .size-table-container {
        margin: 20px 10px; /* 左右の余白を調整 */
    }

    .size-table caption {
        font-size: 16px;
        padding: 12px;
    }

    .size-table th,
    .size-table td {
        padding: 10px 12px;
        font-size: 14px;
    }
}


/* ---動画コンテンツ--- */
.video-wrapper {
    text-align: center;
}
shorts-video-container {
    display: inline-block;
}
.shorts-video-container video {
    width: 100%;
    max-width: 333px;   /* 画面からはみ出さない */
    height: auto;      /* 縦横比を保持 */
}