@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================== */
/* 施工事例専用デザイン */
/* 画像グループを幅広にする設定 */
/* =========================================== */
.works-image-wide {
    max-width: 1100px; /* テーブルの900pxより大きく設定 */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-bottom: 30px;
}

/* 記事全体の最大幅を少し調整して、画像が突き抜ける余地を作る */
.works-article {
    max-width: 1100px; /* ここを画像に合わせる */
    margin: 0 auto;
    padding: 20px;
}

/* テーブルや「お客様の声」だけは元の1000px幅に絞る */
.works-info-list, 
.works-voice-section {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* 1) タイトル */
.works-main-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 30px;
}

/* 2) 画像グループ（左右センター・横並び） */
.works-image-group {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap; /* 画像が入りきらない時やスマホで折り返す */
    margin-bottom: 40px;
}

.works-img-item {
    flex: 1;
    min-width: 280px; /* スマホで縦並びにするための閾値 */
    max-width: 350px;
	overflow: hidden; /* 拡大した時に枠からはみ出さないようにする */
    border-radius: 5px;
	line-height: 0;
}

/* ホバー時に虫眼鏡マークにする */
.works-img-item a {
    display: block;
    cursor: zoom-in; /* マウスを虫眼鏡にする */
    overflow: hidden;
}

.works-img-item img {
    width: 100%;
    height: auto;
	display: block; /* 画像の下にできる謎の数ピクセルの隙間を消します */
    object-fit: contain;
    transition: opacity 0.3s ease; /* 拡大の代わりに少し暗く/明るくする演出もおすすめ */
}

.works-img-item a:hover img {
    opacity: 0.8; /* ホバー時に少し透明にして反応を出す */
}

/* ダイアログが開いた時の背景を暗くする */
#imgModal::backdrop {
    background: rgba(0, 0, 0, 0.8);
}

.clickable-img {
    cursor: zoom-in;
    transition: opacity 0.3s;
}

.clickable-img:hover {
    opacity: 0.8;
}

/* ダイアログ自体の表示位置調整 */
#imgModal[open] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  /* これで左右センター */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#modalImg {
  max-width: 100vw;
  max-height: 100vh;
  cursor: zoom-out;
  border-radius: 10px;
  display: block;
  margin: 0 auto;       /* ブロック要素として中央寄せ */
}


@media (max-width: 768px) {

  /* SP のとき、モーダルの画像を画面中央に固定配置 */
  #modalImg {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 96%;
    max-width: 96%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    cursor: zoom-out;
  }

  /* 背景は今まで通りでOK */
  #imgModal {
    overflow: hidden;
  }
	
  #imgModal p {
    position: fixed;
    left: 50%;
    bottom: 150px;
    transform: translateX(-50%);
    margin: 0;
    color: white;
    text-align: center;
    font-size: 18px;
    z-index: 1001;  /* 念のため画像より前面に */
  }
}



/* 詳細リスト構造 */
.works-info-list {
    border-top: 1px solid #a3a3a3;
}

.info-row {
    display: flex;
    border-bottom: 1px solid #a3a3a3;
}

.info-label {
    width: 30%;
    background-color: #ACDCF3;
    padding: 8px;
    font-weight: bold;
	
	/* 中の文字だけを上に配置するための設定 */
    display: flex;
    align-items: flex-start;
}

.info-value {
    width: 70%;
    padding: 8px;
	background-color: #fff; /* 基本は白 */
    
    display: flex;
    align-items: flex-start;
}

/* お客様の声 全体の枠 */
.works-voice-section {
    margin-top: 40px;
    border: 2px solid #EAE7E4; /* 優しい黄色系の線 */
    border-radius: 15px;      /* 角丸 */
    overflow: hidden;         /* 角丸に合わせて中身も切り抜く */
    background-color: #fbf9f6; /* 薄いクリーム色の背景 */
}

/* お客様の声のタイトル部分 */
.voice-label {
    background-color: #EAE7E4; /* ラベルの背景色 */
    padding: 10px 20px;
    font-weight: bold;
    font-size: 1.1rem;
    color: #292929;
}

/* お客様の声の本文部分 */
.voice-content {
    padding: 20px;
    line-height: 1.8;
    white-space: pre-wrap;
    color: #292929;
}


/* 7,8用：項目も縦並びにするスタイル */
.info-row.vertical {
    flex-direction: column;
    align-items: flex-start;
}

.info-row.vertical .info-label,
.info-row.vertical .info-value {
    width: 100%;
}

.text-area {
    line-height: 1.6;
    white-space: pre-wrap; /* 改行を反映 */
}

.voice-bg {
    background-color: #fff9e5; /* お客様の声に少し色付け */
}

/* ボタンエリアの余白調整だけ残す */
.works-back-link {
    text-align: center;
    margin: 60px auto 40px;
    padding: 0 20px;
}

/* ボタン本体 */
.works-back-link .swell-block-button__link {
    /* SWELLの標準デザインをリセット */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;

    /* ここからカスタム設定 */
    background-color: #3499DD !important; /* 通常時の背景色（黒） */
    color: #ffffff !important;           /* 文字色（白） */
    
    width: auto !important;               /* 横幅いっぱいに広がらないように */
    min-width: 240px;                     /* 最低限の横幅 */
    height: 54px;                         /* ボタンの高さ */
    padding: 0 40px !important;           /* 左右の余白 */
    border-radius: 50px !important;       /* カプセル型 */
    
    font-size: 0.9rem !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

/* ホバー時（マウスを乗せた時） */
.works-back-link .swell-block-button__link:hover {
    background-color: #3499DD !important; /* ホバー時の色（青） */
    color: #ffffff !important;
    opacity: 1 !important;                 /* 透明化を無効にする */
    transform: translateY(-2px);           /* 少し浮き上がる */
}


/* beforeafter仕様 */
.before-after-box {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.before-after-box .before-img,
.before-after-box .after-img {
    flex: 1;
    text-align: center;
}

.ba-label {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.1em;
}


.before-after-box img {
    height: auto;
    width: 100%;
    object-fit: contain;
}


/* アイコンエリア（10%） */
.ba-icon-area {
    width: 10%;
    text-align: center;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* PC は ▶︎ を表示、SP は非表示 */
.icon-pc { display: inline; }
.icon-sp { display: none; }


/* SP のときは ▼ を表示 */
@media (max-width: 768px) {
    .icon-pc { display: none; }
    .icon-sp { display: inline; }

    /* SP は縦並びなので幅100%に変更 */
    .ba-icon-area {
        width: 100%;
        margin-top: 10px;
    }
}


/* スマホ対応（768px以下） */
@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
    }
    .info-label, .info-value {
        width: 100%;
    }
    .works-img-item {
        max-width: 100%; /* スマホでは全幅 */
    }
	
	.works-voice-section {
        margin-top: 30px;
    }
	
	.before-after-box {
        flex-direction: column; /* beforeafter仕様 */
    }
}



/* ===========================================
   価格表：2カラム固定レイアウト
   PC：60% / 40%
   SP：65% / 35%
=========================================== */

/* 全体枠（SPは100%、PCは後で700pxにする） */
.price-info-list {
    background: transparent !important;
    border-top: 1px solid #a3a3a3;
    width: 100%; /* ← SPはこれでOK */
}

/* 行レイアウト（flex を完全に殺して grid を強制） */
.price-info-list .info-row {
    display: grid !important;
    grid-template-columns: 60% 40% !important;
    border-bottom: 1px solid #a3a3a3;
}

/* セル共通 */
.price-info-list .info-row > div {
    border-right: 1px solid #a3a3a3;
    padding: 4px 15px;
    background-color: #ffffff;
    word-break: break-word;
}
.price-info-list .info-row > div:last-child {
    border-right: none;
}

/* 見出し行（セルに色を付ける） */
.price-info-list .info-row.info-header > div {
    background-color: #3499DD !important;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

/* 表の背景（上下セクションと同じ幅1000px） */
.price-bg {
    display: block;
    width: 1000px;
    margin: 0 auto;
    background-color: #DFF5FF;
    padding: 30px 0;
}

/* flexを消してgridに従わせる */
.price-info-list .info-row .info-label,
.price-info-list .info-row .info-extra {
    display: block !important;
    width: 100% !important;
}

/* 価格（右カラム）だけ右揃え */
.price-info-list .info-row .info-extra {
    width: fit-content;
    text-align: right;
	padding-right: 30px
}

/* 品目（左カラム）を細字に戻す */
.price-info-list .info-row .info-label {
    font-weight: normal !important;
	padding-left: 30px;
}


/* ===========================================
   SP：65% / 35%
=========================================== */
@media (max-width: 900px) {
    .price-info-list .info-row {
        grid-template-columns: 65% 35% !important;
    }

    .price-info-list {
        overflow-x: visible;
        white-space: normal;
        display: block;
    }
	
	/* 価格（右カラム）だけ右揃え */
.price-info-list .info-row .info-extra {
	padding-right: 15px
}

/* 品目（左カラム）を細字に戻す */
.price-info-list .info-row .info-label {
	padding-left: 10px;
}
}

/* ===========================================
   PCだけ表を700pxにする（SPは100%のまま）
=========================================== */
/* PC版：背景（外側） */
@media (min-width: 768px) {
    .price-info-list {
        background: #DFF5FF !important;
        padding: 30px !important;
        max-width: 1000px;
        margin: 0 auto !important;
        box-sizing: border-box;
		border: none !important;
        border-top: none !important;
    }

    /* PC版：表本体（内側）を700pxにする */
    .price-info-list > .info-row {
        max-width: 600px;
        margin: 0 auto;
    }

    /* PC版：罫線は内側700pxの表にだけ付ける */
    .price-info-list > .info-row.info-header {
        border-top: 1px solid #a3a3a3; /* ←ここが700pxになる */
    }
}

/* ブログ投稿：画像の横幅を統一する */
.post_content img {
    width: 100%;
    height: auto;
}