/*
Theme Name: Lightning Child
Theme URI:  http://example.com
Description: Lightningの子テーマ
Author: Your Name
Template: lightning
Version: 1.0.0
*/

/* -------------------------
   office single page styles
   ------------------------- */
.office-single { max-width: 980px; margin: 28px auto; padding: 0 16px; font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; color:#333; }

/* header */
.office-header { text-align: center; margin-bottom: 20px; }
.office-title { font-size: 28px; line-height:1.2; margin: 8px 0 12px; color:#1f6fbf; font-weight:700; }

/* overview */
.office-overview { margin:12px auto 6px; color:#444; font-size:15px; line-height:1.8; }

/* section title */
.section-title { font-size:18px; color:#1565c0; margin:22px 0 12px; font-weight:700; }

/* products grid */
.products-grid { display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-start; }
.product-card { background:#fff; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.06); overflow:hidden; width:calc(50% - 8px); display:flex; flex-direction:column; }
.product-image img { width:100%; height:180px; object-fit:cover; display:block; border-radius: 10px; }
.product-body { padding:12px; }
.product-name { font-size:16px; margin:0 0 8px; color:#0b63b7; font-weight:700; }
.product-desc { font-size:14px; line-height:1.7; color:#444; }

/* other pr and message */
.office-other-pr, .office-message { background:#fbfcff; border-radius:10px; padding:12px 14px; margin:12px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.pr-body, .message-body { color:#333; line-height:1.8; font-size:15px; }

/* message image */
.office-message-image img { display:block; margin:10px auto; width:160px; height:160px; object-fit:cover; border-radius:50%; box-shadow:0 6px 16px rgba(0,0,0,0.08); }

/* contact */
.office-contact { margin:18px 0 40px; padding:12px; border-top:1px dashed #e6eef9; }
.contact-grid { display:flex; gap:18px; flex-wrap:wrap; }
.contact-item { min-width:160px; flex:1 1 200px; }
.contact-item strong { display:block; margin-bottom:6px; color:#0a4f90; }
.contact-value { font-size:15px; color:#333; }

/* responsive */
@media (max-width:780px) {
    .product-card { width:100%; }
    .office-single { padding: 0 14px; }
    .office-title { font-size:22px; }
    .office-hero img { max-height:260px; }
    .product-image img { height:160px; }
    .office-message-image img { width:120px; height:120px; }
}

/* -------------------------
   Office Search Card Styles
   ------------------------- */

/* 検索フォーム */
.office-search-form {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.office-search-form select,
.office-search-form input[type=text] {
    padding: 5px;
    font-size: 1em;
}
.office-search-form input[type=submit] {
    padding: 5px 15px;
    font-size: 1em;
}

/* カード全体 */
.office-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.office-card {
    border: 1px solid #ddd;
    padding: 15px;
    background: #fff;
    width: calc(33.333% - 20px);
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.office-card-title {
    font-size: 1.2em;
    margin-bottom: 10px;
}
.office-card-overview {
    font-size: 0.9em;
    margin-bottom: 10px;
}

/* 画像部分 */
.office-card-images {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.office-card-images img {
    max-width: 48%;
    height: auto;
    border: 1px solid #eee;
}

/* ?? 3枚目縮小の CSS は全削除済み */
/* （PHP 側のラッパーに完全移行） */

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .office-card { width: calc(50% - 20px); }
}
@media screen and (max-width: 480px) {
    .office-card { width: 100%; }
}


/* -------------------------
   D-3 / D-4 画像 横並び & 中央
   single-office.php に完全対応
------------------------- */
.d3-d4-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin: 25px 0;
}

.d3-d4-item img {
    max-width: 360px !important;
    width: 100% !important;
    height: auto !important;
  border-radius: 10px;
}


/* スマホは縦並び */
@media (max-width: 480px) {
    .d3-d4-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .d3-d4-item img {
        max-width: 90%;
    }
}