/* service.php 用追加スタイル
   - 吹き出し部分は common.css の .bln / .says を流用
   - 左アイコンは独自クラス .kusuke-san で「くーすけ_メイン_淵.webp」を丸型表示
   - 「料金・詳細はこちらへ」ボタンは top の .blog-recent-more と同等スタイル + 太字+下線 */

/* くーすけアイコン（丸型）：service.php専用 */
.bln.kusuke-san:before {
    background-image: url(./images/くーすけ_メイン_淵.webp);
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* モバイル版でアイコンが楕円化するのを防ぐ（mobile.css の .bln:before を上書き） */
@media screen and (max-width: 767px) {
    .bln.kusuke-san:before {
        width: 90px;
        height: 90px;
    }
}

/* 吹き出し本文を太字に */
.bln.kusuke-san .says p {
    font-weight: bold;
}

.service-summary {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    margin: 1.5em 0 0.8em;
}

.service-detail-link {
    text-align: center;
    margin-top: 1.2em;
    margin-bottom: 2em;
}

.service-detail-link a {
    display: inline-block;
    padding: 20px !important;
    background-image: url(./images/背景画像/003.webp);
    background-size: 210px;
    background-color: #f0f0f0;
    color: #333 !important;
    text-decoration: underline !important;
    font-size: 40px !important;
    font-weight: bold;
    /* Yomogi(weight 400のみ)では bold が効かないため、bold対応フォントに切り替え */
    font-family: "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
    transition: background 0.2s;
    cursor: pointer;
}

.service-detail-link a:hover {
    background-image: none;
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .service-detail-link a {
        font-size: 20px !important;
        padding: 15px !important;
    }
}

/* タイトルが上枠線に重なる枠付きボックス（地域版詳細ページ用） */
.titled-box {
    position: relative;
    border: 2px solid #000;
    padding: 35px 25px 25px;
    margin: 40px 0;
    background: #fff;
}

/* 太線バリアント（線4px） */
.titled-box.titled-box-thick {
    border-width: 4px;
}

.titled-box-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 0 1em;
    margin: 0;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1;
}

/* タイトルの代わりにアイコンを上枠線に重ねるバリアント */
.titled-box-title-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 0 0.5em;
    line-height: 0;
}

.titled-box-title-icon img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}

.titled-box-body {
    margin: 0;
}

.titled-box-body p {
    margin: 0.4em 0;
}

@media screen and (max-width: 767px) {
    .titled-box {
        padding: 30px 15px 20px;
        margin: 30px 4px;
    }
    .titled-box-title {
        padding: 0 0.6em;
    }
    .titled-box-title-icon img {
        width: 70px;
        height: 70px;
    }
}

/* 元姫アイコン（吹き出し用） */
.bln.motohime-san:before {
    background-image: url(./images/元姫_正面.webp);
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-shrink: 0;
}

@media screen and (max-width: 767px) {
    .bln.motohime-san:before {
        width: 90px;
        height: 90px;
    }
}

.bln.motohime-san .says p {
    font-weight: bold;
}

/* 料金実例 + 連絡先 の2列レイアウト（モバイル1列） */
.price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 40px 0;
}

@media screen and (max-width: 767px) {
    .price-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px 0;
    }
}

/* 料金実例ボックス内 */
.price-list p {
    margin: 0.5em 0;
    font-weight: bold;
}

.price-list .price-note {
    margin-top: 1em;
    font-weight: normal;
}

/* 連絡先ボックス内 */
.contact-box .contact-heading {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0.5em 0 1em;
}

.contact-box dl {
    margin: 0.6em 0;
}

.contact-box dt {
    font-weight: bold;
    margin-top: 0.8em;
}

.contact-box dd {
    margin: 0.3em 0 0.6em;
    text-align: center;
}

.contact-box .contact-tel {
    font-size: 1.6em;
    font-weight: bold;
}

.contact-box .line-qr {
    display: block;
    max-width: 180px;
    width: 100%;
    margin: 0.3em auto;
}

/* Before → After 横並び（PC4列、自動折り返し） */
.ba-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
    justify-items: center;
}

.ba-grid .ba-item {
    width: 100%;
    min-width: 0;
    max-width: 540px;
}

.ba-grid .instagram-media {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media screen and (max-width: 767px) {
    .ba-grid {
        grid-template-columns: 1fr;
    }
}

/* ブログリンク行 */
.blog-link-row {
    margin: 1em 0 2em;
    font-size: 1.1em;
}

.blog-link-row a {
    text-decoration: underline;
    font-weight: bold;
}

/* 「お問い合わせはコチラ」セクションのリンクボタン */
.contact-cta {
    text-align: center;
    margin: 1.5em 0 2.5em;
}

.contact-cta a {
    display: inline-block;
    padding: 18px 30px;
    background-color: #f0f0f0;
    color: #333 !important;
    font-size: 1.4em;
    font-weight: bold;
    text-decoration: underline !important;
}

.contact-cta a:hover {
    background-color: #fff;
}

@media screen and (max-width: 767px) {
    .contact-cta a {
        font-size: 1.1em;
        padding: 14px 20px;
    }
}

/* 作業内容・特長セクションのリスト */
.task-list {
    margin: 0.8em 0 1.4em;
    padding-left: 1.5em;
}

.task-list li {
    margin: 0.4em 0;
    line-height: 1.7;
}

@media screen and (max-width: 767px) {
    .task-list {
        margin: 0;
        padding: 0;
    }
    .task-list li {
        font-size: 1.5rem;
    }
}

/* 注釈テキスト */
.note {
    font-size: 0.9em;
    color: #555;
    margin: 0.4em 0 0.8em;
}