.show-all-btn{
  margin-top: 15px;
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  background-color: #666;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

.show-all-btn:hover{
  background-color: var(--hover-bg-color);
}

@media (max-width: 1023px) {

  .news-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .news-item .category {
    min-width: auto;
  }
}

/*  */
.card_t-container{
    color: #333;
    display: flex;
    align-items: stretch;          /* 高さ合わせ */
    margin: 10px auto;
    width: 100%;
    /*box-shadow: 0 12px 10px -6px rgba(0,0,0,.25);*/
}

.card_t-text{
    width: 100%;                    /* 画像とバランスをとる */
    padding: 5px 20px;            /* 余白はpaddingの方が内側で扱いやすい */
    box-sizing: border-box;
        background: #red;
}

.card_r-container{
    background: #ffffff;
    color: #333;
    display: flex;
    align-items: stretch;          /* 高さ合わせ */
    margin: 10px auto;
    width: 100%;
    /*box-shadow: 0 12px 10px -6px rgba(0,0,0,.25);*/
}

.card_r-container a{
    text-decoration: none;
    color: #cddc39;
}

.card_r-text{
    width: 95%;                    /* 画像とバランスをとる */
    padding: 10px 20px;            /* 余白はpaddingの方が内側で扱いやすい */
    box-sizing: border-box;
}

.card_r-text h3{
    padding-top: 10px;
    font-size: 1.28em;
}

.card_r-text p{
    font-size: 1.0em;
}


.card_r-img{
    width:70%;
    /* 必要なら背景色や余白をここで調整 */
}

.card_r-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;             /* はみ出しを抑えて見栄え良く */
    vertical-align: bottom;
}

.card_r-container.img-right{
    flex-direction: row-reverse;   /* 子要素の並びを反転＝画像が右、テキストが左 */
}

.figure{
    margin: 16px 0;
    text-align: center;
}

.figure img{
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.figure .figcaption{
    font-size: 0.85em;
    color: #666;
    margin-top: 6px;
}

.note{
    background: #f7f7f7;
    border-left: 4px solid #cddc39;
    padding: 12px 14px;
    margin: 14px 0;
    font-size: 0.9em;
}

@media (max-width: 768px) {

    .card_r-container,
    .card_r-container.img-right {
        flex-direction: column;    /* 画像→テキストの順で縦並び */
    }

    .card_r-img,
    .card_r-text {
        width: 100%;
    }

    .card_r-img img {
        height: auto;              /* 縦積み時は高さ可変に */
    }
}

/* テーブル */
.table_design02{
  width: 100%;
  margin: 20px 10px 10px 0px;
  border-collapse: collapse;
}

.table_design02 tr{
  border-bottom: solid 1px #c0c0c0;
}

.table_design02 tr:last-child{
  border-bottom: none;
}

.table_design02 th{
  position: relative;
  /*text-align: left;*/
  width: 25%;
  background-color: #f5f5f5;
  /*background-color: #2589d0;*/
  /* background-color:rgba(255,0,0,1);*/
  color: dimgray;
  text-align: center;
  padding: 10px 0;
}

.table_design02 td{
  text-align: left;
  width: 75%;
  /*text-align: center;*/
  background-color: #ffffff;
  padding: 10px 0px 10px 15px;
  color:gray;
}

.table_design02m{
  width: 300px;
  margin: 10px 10px 10px 0px;
  border-collapse: collapse;
}

.table_design02m tr{
  border-bottom: solid 1px #c0c0c0;;
}

.table_design02m tr:last-child{
  border-bottom: none;
}

.table_design02m th{
  position: relative;
  /*text-align: left;*/
  width: 25%;
  background-color: #f5f5f5;
  /*background-color: #2589d0;*/
   /*background-color:rgba(255,0,0,1);*/
  color: dimgray;
  text-align: center;
  padding: 10px 0;
}

.table_design02m td{
  text-align: left;
  width: 75%;
  /*text-align: center;*/
  /*background-color: #f2f3f4;*/
  background-color: #ffffff;
  padding: 10px 0px 10px 15px;
  color:gray;
}

/* MAPエリア */
.map_area{
  width: 100%;
  max-width: 950px;
  margin: 0 auto; /* 中央寄せ */
}

.map_area ul{
  list-style: none;
  margin: 25px 0 0;
  padding: 0;

  display: flex;
  flex-direction: column; /* SP/Tabletは縦並び */
  gap: 25px;
  align-items: stretch;
}

.map_area ul > li{
  width: 100%;
  flex: 0 0 auto;
  min-width: 0; /* はみ出し防止（重要） */
}

.map_area iframe{
  display: block;
  width: 100% !important;
  height: 300px; /* SPの標準 */
  border: 0;
}

.map_area table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.map_area th,
.map_area td{
  padding: 8px;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.map_area th{
  text-align: left;
  white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1023px) {

  .map_area iframe {
    height: 360px; /* Tabletは少し高め（好みで調整） */
  }
}

@media (min-width: 1024px) {

  .map_area ul {
    flex-direction: row;     /* PCだけ横並び */
    align-items: flex-start;
  }


  .map_area ul > li {
    flex: 1 1 0;
    min-width: 380px;        /* 元要件を踏襲 */
  }


  .map_area iframe {
    height: 45svh;           /* PCは画面高さに追従 */
    min-height: 360px;       /* 小さくなり過ぎ防止 */
    max-height: 520px;       /* 大きくなり過ぎ防止（不要なら削除OK） */
  }
}

/* フロートテキスト */
.image-container{
  position: relative; /* 子要素の絶対配置の基準にする */
  display: inline-block; /* 画像のサイズに合わせる */
}

.image-container img{
  display: block;
  width: 100%; /* 画像が親要素の幅に収まるように */
  height: auto;
}

.overlay-text{
  position: absolute; /* 親要素（.image-container）を基準に配置 */
  top: 10%; /* 上から50% */
  left: 10%; /* 左から50% */
  transform: translate(-50%, -50%); /* 要素の中心をずらす（中央配置） */
  color: white; /* テキストの色 */
  /*text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.4);*/
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000;
  /*background-color: rgba(0, 0, 0, 0.3); /* 半透明の背景色（任意） */
  padding: 10px 20px;
  font-family: sans-serif;
  font-size: 36px;
}

.overlay-text2{
  position: absolute; /* 親要素（.image-container）を基準に配置 */
  top: 10%; /* 上から50% */
  left: 17%; /* 左から50% */
  transform: translate(-50%, -50%); /* 要素の中心をずらす（中央配置） */
  color: white; /* テキストの色 */
  /*text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.4);*/
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000;
  /*background-color: rgba(0, 0, 0, 0.3); /* 半透明の背景色（任意） */
  padding: 10px 20px;
  font-family: sans-serif;
  font-size: 36px;
}

@media (max-width: 768px) {

 .overlay-text {
   /*top: 18%; /* 上から50% */
   left:12%; /* 左から50% */
   text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000;
   /*background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景色（任意） */
   padding: 10px 20px;
   font-size: 24px;
 }
 .overlay-text2 {
   /*top: 18%; /* 上から50% */
   left:21%; /* 左から50% */
   text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000;
   /*background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景色（任意） */
   padding: 10px 20px;
   font-size: 24px;
 }
}


  .item {
    width: calc(50% - 6px);        /* 2列に固定（= 横2） */
  }





/* =========================================================
   変数（数値の一元管理）
   ========================================================= */
:root{
  /* 段落（条件1） */
  --p-font-size: 1.25rem;
  --p-pad-x: 1em;         /* ← p の左右余白はここで調整 */

  /* カードの見た目 */
  --card-radius: 12px;
  --card-shadow: 0 12px 10px -6px rgba(0,0,0,.25);
  --card-gap: 20px;
  --text-color: #333;
  --link-color: #cddc39;

  /* 画像まわり（条件3） */
  --img-pad-top: 30px;
  --img-pad-x: 10px;
  --img-pad-bottom: 15px; /* 画像下の余白を統一 */
  --img-height-pc: 260px; /* フォールバック高さ（PC） */
  --img-height-sp: 200px; /* フォールバック高さ（SP） */

  /* ブレークポイント */
  --bp-sp: 768px;
}

/* =========================================================
   共通スタイル
   ========================================================= */

/* カード共通 */
.card-container,
.card_r-container,
.card_t-container{
  background:#fff;
  color:var(--text-color);
  width:100%;
  margin:20px auto;
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:var(--card-shadow);
  box-sizing:border-box;
}

/* リンク */
.card-container a,
.card_r-container a,
.card_t-container a{
  text-decoration:none;
  color:var(--link-color);
}

/* テキスト側（左右共通の基礎） */
.card-text,
.card_r-text{
  width:95%;
  padding:10px 10px;
  box-sizing:border-box;

  /* Flex 子要素のつぶれ・はみ出し対策 */
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.7;
}

/* 段落（条件1：左右余白を変数で統一制御） */
.card-container p,
.card_r-container p,
.card_t-container p{
  font-size:var(--p-font-size);
  margin:0;                          /* 上下の間隔は必要に応じて親で管理 */
  padding-left:var(--p-pad-x);
  padding-right:var(--p-pad-x);
}

/* 見出し（本文内） */
.card-text h3,
.card_r-text h3,
.card_text h3{                        /* 互換用：元CSSの表記も拾う */
  font-size:1.28em;
  padding-top:10px;
}

/* =========================================================
   画像（条件3：縮小最適化。余白はラッパーで管理）
   ========================================================= */

/* 画像ラッパー：余白はここで管理（img に padding は持たせない） */
.card-img,
.card_r-img{
  position:relative;
  padding:var(--img-pad-top) var(--img-pad-x) var(--img-pad-bottom);
  box-sizing:border-box;
}

/* 画像本体：縦横比維持でスケール、ラッパーに合わせてフィット */
.card-img img,
.card_r-img img{
  display:block;
  width:100%;
  height:100%;           /* ラッパー高さに追従（aspect-ratio/固定高さ両対応） */
  object-fit:cover;      /* 余白なしでトリミングし見栄え優先 */
  margin:0;
  padding:0;
}

/* 画像に重ねるタイトル（必要な場合） */
.card-img h3,
.card_r-img h3{
  position:absolute;
  top:10px; left:10px;
  margin:0;
  padding:8px 12px;
  color:#fff;
  font-size:clamp(14px,1.8vw,18px);
  line-height:1.2;
  background:rgba(0,0,0,.30);
  border-radius:6px;
  z-index:2;
}

/* =========================================================
   グリッド（一覧）
   ========================================================= */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--card-gap);
  width:100%;
  margin:20px auto;
  box-sizing:border-box;
}

/* =========================================================
   レイアウト：PC（左右並び・比率）
   ========================================================= */
@media (min-width: calc(var(--bp-sp) + 1px)){

  /* 左画像タイプ */
  .card-container{
    display:flex;
    align-items:stretch;
  }
  .card-container .card-img{
    flex:0 0 55%;
    max-width:55%;
    /* フォールバック高さ */
    height:var(--img-height-pc);
  }
  .card-container .card-text{
    flex:1 1 45%;
    max-width:45%;
    padding:18px 20px;
  }

  /* 右画像タイプ */
  .card_r-container{
    display:flex;
    align-items:stretch;
  }
  .card_r-container .card_r-img{
    flex:0 0 60%;
    max-width:60%;
    height:var(--img-height-pc);
  }
  .card_r-container .card_r-text{
    flex:1 1 40%;
    max-width:40%;
    padding:18px 20px;
  }

  /* 画像比率管理（対応ブラウザではこちらが優先） */
  @supports (aspect-ratio: 1) {
    .card-container .card-img,
    .card_r-container .card_r-img{
      height:auto;             /* 固定高さを解除 */
      aspect-ratio: 16 / 9;    /* お好みで変更可（例：4/3, 3/2） */
    }
  }
}

/* 画像を右側に配置したい場合の補助 */
.card_r-container.img-right{ flex-direction:row-reverse; }

/* =========================================================
   レスポンシブ（SP）
   条件2：必ず「画像 → テキスト」の順で縦積み
   条件3：SP時は高さフォールバック
   ========================================================= */
@media (max-width: var(--bp-sp)){

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

  .card-container,
  .card_r-container,
  .card_r-container.img-right{
    display:flex;
    flex-direction:column;
  }

  /* 並び順を強制：画像(1) → テキスト(2) */
  .card-container .card-img,
  .card_r-container .card_r-img{ order:1; width:100%; margin:0 0 12px; }
  .card-container .card-text,
  .card_r-container .card_r-text{ order:2; width:100%; }

  /* SP高さ（フォールバック） */
  .card-img,
  .card_r-img{ height:var(--img-height-sp); }

  /* 見出しの読みやすさを強化（任意） */
  .card-img h3,
  .card_r-img h3{ background:rgba(0,0,0,.55); font-size:16px; }
}

/* PCサイズ（769px以上）：画像とテキストを横並びにする */
@media (min-width: 769px) {

  /* 左画像タイプ */
  .card-container {
    display: flex;
    flex-direction: row;      /* ← 横並び（画像 → テキスト） */
    align-items: stretch;
  }

  .card-container .card-img {
    flex: 0 0 55%;            /* 画像側の比率（任意で調整可） */
    max-width: 55%;
  }

  .card-container .card-text {
    flex: 1 1 45%;
    max-width: 45%;
    padding: 18px 0px;
  }

  /* 右画像タイプ */
  .card_r-container {
    display: flex;
    flex-direction: row;      /* ← 横並び固定（右画像タイプ） */
    align-items: stretch;
  }

  .card_r-container .card_r-img {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .card_r-container .card_r-text {
    flex: 1 1 40%;
    max-width: 40%;
    padding: 18px 20px;
  }
}

/* =========================================
   カスタムプロパティ（幅を一元管理）
   ========================================= */
:root {
  /* デフォルト幅設定（必要に応じて変更） */
  --btn-w: auto;          /* 表示幅（auto / 200px / 80% など） */
  --btn-min-w: 200px;     /* 最小幅 */
  --btn-max-w: 180px;     /* 最大幅（例：480px） */

  /* 余白・タイポ・色 */
  --btn-pad-y: .6em;
  --btn-pad-x: .6em;
  --btn-radius: 5px;
  --btn-bg: #ff8c00;
  --btn-bg-hover: #ffa500;
  --btn-color: #fff;
  --btn-fz: 0.85em;

  /* スマホ時の幅（@media 以下で使用） */
  --btn-w-sp: 90%;
  --btn-min-w-sp: 200px;     /* 最小幅を解除したいときは 0 */
  --btn-max-w-sp: none;
  
  /* pタグ左右余白（カード内テキストの調整場所） */
  -p-pad-x: 1em;     /* ← ここを変更すれば左右余白が変わる
}

/* =========================================
   ベースボタン
   ========================================= */
.button-56 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;          /* ← 文字を中央寄せする指定 */
  /* 幅コントロール（ここで一元管理） */
  width: var(--btn-w);
  min-width: var(--btn-min-w);
  max-width: var(--btn-max-w);

  /* 中央寄せ（幅がautoや固定値でも中央に） */
  margin: 15px auto 0;

  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: none;
  border-radius: var(--btn-radius);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  font-weight: 600;
  font-size: var(--btn-fz);
  text-decoration: none;       /* aタグで使う場合の保険 */
  cursor: pointer;

  line-height: 1;              /* 行高のばらつき抑制 */
  box-sizing: border-box;      /* パディング含めた幅計算 */
}

.button-56:hover {
  background-color: var(--btn-bg-hover);
}

/* アイコン（擬似要素） */
.button-56::after {
  content: '';
  width: 1.25em;
  height: 1.25em;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 3h18c.55 0 1 .45 1 1v16c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1zm9.06 8.68L5.65 6.24 4.35 7.76 12.07 14.32 19.65 7.76 18.35 6.24l-6.29 5.44z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}



/* =========================================================
   ご利用までの流れ
   1：アイコン
   2：STEP連結フロー
   ========================================================= */
/* ご利用までの流れ */
.flow-section {
  margin-top: 40px;
}

.flow-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.flow-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  padding: 24px 20px;
  width: calc(50% - 12px);
  box-sizing: border-box;
}

.flow-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 50%;
  border: 2px solid #333;
  position: relative;
}

.flow-step {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background: #333;
  padding: 4px 10px;
  margin-bottom: 8px;
}

.flow-title {
  font-size: 16px;
  margin-bottom: 6px;
}

.flow-text {
  font-size: 14px;
  line-height: 1.7;
}

body.mobile .flow-item {
  width: 100%;
}


/* １アイコン */
/* STEP1：お問い合わせ（電話） */
.icon-contact::after {
  content: "☎";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #333;
}

/* STEP2：相談（対話） */
.icon-consult::after {
  content: "💬";
  filter: grayscale(100%);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* STEP3：訪問（家） */
.icon-visit::after {
  content: "⌂";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #333;
}

/* STEP4：契約（書類） */
.icon-contract::after {
  content: "≡";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #333;
}

/* STEP5：開始（チェック） */
.icon-start::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
}
``



/* =========================
   STEP連結フロー（ブランドカラー対応）
   ========================= */

.flow-vertical {
  margin-top: 50px;
}

/* 各行 */
.flow-row {
  display: flex;
  gap: 30px;
}

/* 左：STEPエリア */
.flow-step-wrap {
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* STEP番号（ブランドカラー） */
.flow-step-circle {
  width: 42px;
  height: 42px;
  border: 2px solid #186B42;
  border-radius: 50%;
  font-weight: bold;
  font-size: 16px;
  line-height: 38px;
  text-align: center;
  background: #F2F7F4; /* 薄いグリーン */
  color: #186B42;
  z-index: 1;
}

/* 点線（ブランドカラー） */
.flow-step-line {
  flex-grow: 1;
  width: 2px;
  margin-top: 6px;
  background-image: repeating-linear-gradient(
    to bottom,
    #186B42,
    #186B42 4px,
    transparent 4px,
    transparent 9px
  );
}

/* 右：コンテンツ */
.flow-content {
  padding-bottom: 44px;
}

/* カード感（さりげなく） */
.flow-row:not(:last-child) .flow-content {
  border-bottom: 1px solid #E0ECE6;
}

/* タイトル */
.flow-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #186B42;
  position: relative;
}

/* タイトル下アクセント */
.flow-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: #186B42;
  margin-top: 6px;
}

/* テキスト */
.flow-text {
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

/* 最終STEP */
.flow-row:last-child .flow-step-line {
  display: none;
}
.flow-row:last-child .flow-content {
  padding-bottom: 0;
}

/* モバイル対応 */
body.mobile .flow-row {
  gap: 22px;
}


/* =========================
   全体背景ボックス（リッチ感）
   ========================= */

.flow-box {
  background: #F4F8F6;           /* ごく薄いグリーン */
  border-radius: 12px;
  padding: 36px 40px;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.05);
  margin-top: 30px;
}

/* =========================
   STEP行（カード風）
   ========================= */

.flow-row {
  display: flex;
  gap: 30px;
}

.flow-content {
    width: 700px;
  background: #ffffff;
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 30px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
}

/* 最後のSTEPは余白不要 */
.flow-row:last-child .flow-content {
  margin-bottom: 0;
}

/* hoverでほんのり浮く（PCのみ） */
body.desktop .flow-content:hover {
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08);
}

/* =========================
   STEP番号＋点線（前回の色味）
   ========================= */

.flow-step-wrap {
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-step-circle {
  width: 42px;
  height: 42px;
  border: 2px solid #186B42;
  border-radius: 50%;
  font-weight: bold;
  font-size: 16px;
  line-height: 38px;
  text-align: center;
  background: #EAF3EE;
  color: #186B42;
  z-index: 1;
}

.flow-step-line {
  flex-grow: 1;
  width: 2px;
  margin-top: 6px;
  background-image: repeating-linear-gradient(
    to bottom,
    #186B42,
    #186B42 4px,
    transparent 4px,
    transparent 10px
  );
}

/* =========================
   テキスト
   ========================= */

.flow-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #186B42;
}

.flow-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: #186B42;
  margin-top: 6px;
}

.flow-text {
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

/* =========================
   モバイル調整
   ========================= */

body.mobile .flow-box {
  padding: 24px 20px;
}

body.mobile .flow-content {
  padding: 18px 18px;
}








/* =========================================
   レスポンシブ（SP：～767px）
   幅を変数で簡単切替
   ========================================= */
@media (max-width: 767px) {
  .button-56 {
    width: var(--btn-w-sp);        /* 例：80% */
    min-width: var(--btn-min-w-sp);
    max-width: var(--btn-max-w-sp);
  }
}

/* =========================================
   幅ユーティリティ（任意で使用）
   ※ 親や要素にクラスを付けるだけで個別調整可能
   ========================================= */

/* 100% 幅 */
.btn-w-100 .button-56, .button-56.btn-w-100 { width: 100%; min-width: 0; max-width: none; }

/* 固定幅 */
.btn-w-240 .button-56, .button-56.btn-w-240 { width: 240px; min-width: 0; }
.btn-w-320 .button-56, .button-56.btn-w-320 { width: 320px; min-width: 0; }

/* パーセンテージ */
.btn-w-50  .button-56, .button-56.btn-w-50  { width: 50%;  min-width: 0; }
.btn-w-75  .button-56, .button-56.btn-w-75  { width: 75%;  min-width: 0; }
.btn-w-80  .button-56, .button-56.btn-w-80  { width: 80%;  min-width: 0; }

/* 最大幅の上限を付けたい場合（中央に箱を作る） */
.btn-max-360 .button-56, .button-56.btn-max-360 { max-width: 360px; width: 100%; }
.btn-max-480 .button-56, .button-56.btn-max-480 { max-width: 480px; width: 100%; }

/* 余白ユーティリティ（任意） */
.btn-mt-0  .button-56, .button-56.btn-mt-0  { margin-top: 0; }
.btn-mt-8  .button-56, .button-56.btn-mt-8  { margin-top: 8px; }
.btn-mt-16 .button-56, .button-56.btn-mt-16 { margin-top: 16px; }