/* =========================================================
   共通CTA（お問い合わせ3カード）
   Illustrator「CTA.svg」の実寸をそのまま再現（基準幅1500px）
   3ページ共通部品。ページ側からこのCSSを読み込んで使う。
   ========================================================= */

.aacta{
  font-family:"Noto Sans JP","Source Han Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  text-align:center;
}
.aacta *{box-sizing:border-box;}

/* ---------- 見出しバンド（オレンジ） ---------- */
.aacta__banner{
  position:relative;
  width:845.32px;
  height:73.25px;
  margin:0 auto;
  border-radius:6px;
  background:linear-gradient(90deg,#ff3100 0%,#ff8500 74.3%);
  color:#fff;
  font-size:25.725px;
  font-weight:900;
  letter-spacing:.0625em;
  text-indent:.0625em;
  line-height:73.25px;
  white-space:nowrap;
}
/* 下向きの三角 */
.aacta__banner::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-13.99px;
  transform:translateX(-50%);
  border-left:6.6px solid transparent;
  border-right:6.6px solid transparent;
  border-top:13.99px solid #ff6900;
}

/* ---------- メリット行 ---------- */
.aacta__merits{
  margin:58.75px 0 0;
  font-size:25.725px;
  font-weight:900;
  color:#2f2522;
  letter-spacing:.16em;
  line-height:1;
  white-space:nowrap;
}
.aacta__merits i{font-style:normal;padding:0;}   /* ／の左右は詰める（和田さん指示） */
.aacta__spbr{display:none;}   /* スマホ用の改行はPCでは出さない */

/* ---------- 外枠 ---------- */
.aacta__box{
  position:relative;
  width:1068.73px;
  height:250.79px;
  margin:43.3px auto 0;
  border:1px solid #a6a6a6;
  border-radius:15px;
  background:#fff;
}

/* ---------- カード共通 ---------- */
.aacta__card{
  position:absolute;
  top:29.97px;
  width:321.64px;
  height:192.99px;
  border:1px solid;
  border-radius:15px;
  background:#fff;
}
.aacta__card--tel {left:22.48px; border-color:#f29226;}
.aacta__card--line{left:370.87px;border-color:#06c755;}
.aacta__card--web {left:719.26px;border-color:#0054ac;}

/* カード見出しのピル（カードの上辺に重なる） */
.aacta__pill{
  position:absolute;
  top:-19.24px;
  left:50%;
  transform:translateX(-50%);
  width:285.69px;
  height:37.75px;
  border-radius:18.88px;
  color:#fff;
  font-size:20.03px;
  font-weight:900;
  letter-spacing:.038em;
  text-indent:.038em;
  line-height:37.75px;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.aacta__card--tel  .aacta__pill{background:#f29226;}
.aacta__card--line .aacta__pill{background:#06c755;}
.aacta__card--web  .aacta__pill{background:#0054ac;}

/* カード下部の帯 */
.aacta__band{
  position:absolute;
  top:143.38px;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  width:285.69px;
  height:24.78px;
  border-radius:12px;
  font-size:13px;
  font-weight:900;
  color:#000;
  line-height:24.78px;
  letter-spacing:.2em;
  text-indent:.2em;
  white-space:nowrap;
}
/* デザインは「濃い色を35%の透明度」。実際に出る色を直接指定している */
.aacta__card--tel  .aacta__band{background:#fbd5b3;}
.aacta__card--line .aacta__band{background:#a8e2be;}
.aacta__card--web  .aacta__band{background:#a6c2e3;}

/* ---------- 電話カード ---------- */
.aacta__telrow{
  position:absolute;
  left:20.17px;
  top:39.6px;
  display:block;
  text-decoration:none;
  white-space:nowrap;
  /* 横つぶし(scaleX)前の見えない箱がはみ出して横スクロールを作るのを止める */
  overflow:hidden;
}
.aacta__freedial{
  position:absolute;
  left:0;
  top:9.46px;
  width:36.27px;
  height:20.75px;
}
.aacta__telnum{
  display:inline-block;
  margin-left:41.83px;
  font-size:41.62px;
  font-weight:900;
  color:#ff5800;
  line-height:1;
  transform:scaleX(.838);
  transform-origin:left center;
  letter-spacing:-.012em;
}
.aacta__hours{
  position:absolute;
  left:20.39px;
  top:83.61px;
  text-align:left;
  white-space:nowrap;
}
.aacta__hoursbox{
  display:inline-block;
  width:82.6px;
  height:27.12px;
  border:1px solid #000;
  font-size:10.97px;
  font-weight:900;
  color:#2f2522;
  letter-spacing:.04em;
  text-indent:.04em;
  line-height:25.12px;
  text-align:center;
  vertical-align:top;
}
.aacta__hourstxt{
  display:inline-block;
  margin-left:14.35px;
  font-size:11.47px;
  font-weight:900;
  color:#2f2522;
  letter-spacing:-.028em;
  line-height:16.3px;
  vertical-align:top;
  margin-top:-2.6px;
}
.aacta__summer{
  position:absolute;
  left:21.24px;
  top:121.54px;
  margin:0;
  font-size:11.47px;
  font-weight:900;
  color:#2f2522;
  letter-spacing:.033em;
  line-height:13.38px;
  white-space:nowrap;
  text-align:left;
}
.aacta__badge{
  display:inline-block;
  width:27.6px;
  height:13.38px;
  margin-right:4.95px;
  border-radius:2.07px;
  background:#000;
  color:#fff;
  font-size:10.28px;
  font-weight:900;
  line-height:13.38px;
  text-align:center;
  vertical-align:top;
}

/* ---------- LINEカード ---------- */
.aacta__linebtn{
  position:absolute;
  left:18.05px;
  top:34.46px;
  width:285.69px;
  height:76.11px;
  border-radius:14.68px;
  background:#06c755;
  text-decoration:none;
  display:block;
}
.aacta__linelogo{
  position:absolute;
  left:13.26px;
  top:50%;
  transform:translateY(-50%);
  width:44.25px;
  height:45.04px;
}
/* ロゴの右端(57.51px)から矢印の左端(266.83px)までを枠にして、その中央に置く */
.aacta__linetxt{
  position:absolute;
  display:block;
  left:57.51px;
  width:209.32px;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
  font-size:17.55px;
  font-weight:900;
  color:#fff;
  letter-spacing:.108em;
  text-indent:.108em;   /* ★中央ぞろえのとき、字間ぶんの補正は「字間と同じ値」が正解 */
  line-height:1;
  white-space:nowrap;
}
.aacta__linetxt em{font-style:normal;color:#fdf65f;}
.aacta__note{
  position:absolute;
  top:123px;
  left:0;
  right:0;
  margin:0;
  font-size:13px;
  font-weight:900;
  color:#06c755;
  line-height:1;
  letter-spacing:.18em;
  text-indent:.18em;
  white-space:nowrap;
}

/* ---------- Webカード ---------- */
.aacta__webbtn{
  position:absolute;
  left:15.04px;
  width:285.69px;
  height:44.46px;
  border-radius:14.68px;
  text-decoration:none;
  display:block;
}
.aacta__webbtn--room{top:34.46px;background:#d72100;}
.aacta__webbtn--gyomu{top:89.12px;background:#0054ac;}
.aacta__webicon{position:absolute;top:50%;transform:translateY(-50%);}
.aacta__webbtn--room  .aacta__webicon{left:12.55px;width:39.74px;height:26.48px;}
.aacta__webbtn--gyomu .aacta__webicon{left:9.85px;width:45.14px;height:32.57px;}
/* アイコンの右端から矢印の左端(266.81px)までを枠にして、その中央に置く */
.aacta__webtxt{
  position:absolute;
  display:block;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
  font-size:15px;
  font-weight:900;
  color:#fff;
  letter-spacing:-.055em;
  text-indent:-.055em;
  line-height:18.5px;
  white-space:nowrap;
}
.aacta__webbtn--room  .aacta__webtxt{left:52.29px;width:214.52px;}
.aacta__webbtn--gyomu .aacta__webtxt{left:54.99px;width:211.82px;}
.aacta__webtxt em{font-style:normal;color:#fdf65f;}

/* ボタン右端の「＞」＝和田さんの arrow.svg をそのまま表示（CSSの自作三角はやめた） */
.aacta__arrow{
  position:absolute;
  right:11.90px;          /* 線の先端がデザインどおり右から12.55pxに来る位置 */
  top:50%;
  transform:translateY(-50%);
  width:7.6px;            /* arrow.svg の実寸 */
  height:13.9px;
  background:url("arrow.svg") no-repeat center / 100% 100%;
}

/* =========================================================
   スマホ（768px以下）
   Illustrator「CTA-SP.svg」（375px幅）の実寸をそのまま再現
   コンテナ幅に対する比率（cqw）で書いているので、
   画面幅が変わってもデザインの比率が崩れない
   ========================================================= */
@media (max-width:768px){
  .aacta{
    container-type:inline-size;
    width:100%;
    max-width:480px;
    /* ★全ページ共通ルール：スマホではCTAの上を必ず100px空ける（和田さん指示・2026/08/27） */
    margin:100px auto 0;
    padding:0;
  }

  /* ---------- 見出しバンド（2行） ---------- */
  .aacta__banner{
    width:85.296cqw;
    height:19.534cqw;
    border-radius:1.599cqw;
    font-size:4.860cqw;
    line-height:6.851cqw;
    letter-spacing:.118em;
    text-indent:.118em;
    padding:2.880cqw 0 0;
    white-space:normal;
  }
  .aacta__banner::after{
    bottom:-3.731cqw;
    border-left-width:1.760cqw;
    border-right-width:1.760cqw;
    border-top-width:3.731cqw;
  }
  .aacta__spbr{display:inline;}
  .aacta__pcsep{display:none;}   /* 2つ目の区切りはスマホでは改行になる */

  /* ---------- メリット行（2行） ---------- */
  .aacta__merits{
    margin-top:5.165cqw;
    font-size:5.239cqw;
    line-height:8.294cqw;
    letter-spacing:.02em;
    white-space:normal;
  }
  .aacta__merits i{padding:0;}

  /* ---------- 外枠はスマホでは無し ---------- */
  .aacta__box{
    width:100%;
    height:auto;
    margin-top:6.000cqw;
    padding:5.027cqw 0 0;
    border:0;
    border-radius:0;
    background:none;
  }

  /* ---------- カード（縦積み） ---------- */
  .aacta__card{
    position:relative;
    left:auto;
    top:auto;
    width:84.064cqw;
    height:50.441cqw;
    margin:0 auto 11.381cqw;
    border-width:0.261cqw;
    border-radius:3.920cqw;
    padding:0;
  }
  .aacta__card:last-child{margin-bottom:0;}

  .aacta__pill{
    top:-5.027cqw;
    width:74.669cqw;
    height:9.867cqw;
    border-radius:3.838cqw;
    font-size:5.236cqw;
    line-height:9.867cqw;
    letter-spacing:.031em;
    text-indent:.031em;
    max-width:none;
    transform:translateX(-50%);
  }

  .aacta__band{
    top:37.473cqw;
    width:74.669cqw;
    height:6.477cqw;
    border-radius:3.136cqw;
    font-size:3.398cqw;
    line-height:6.477cqw;
    letter-spacing:.195em;
    text-indent:.195em;
    margin:0;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }

  /* ---------- 電話カード ---------- */
  .aacta__telrow{
    position:absolute;
    left:5.271cqw;
    top:10.320cqw;
    /* カードの内側に幅を固定。autoのままだと nowrap で箱が広がり、
       スマホで横スクロールが出る */
    width:78.793cqw;
    margin:0;
  }
  .aacta__freedial{
    left:0;
    top:2.502cqw;
    width:9.480cqw;
    height:5.424cqw;
  }
  .aacta__telnum{
    margin-left:10.932cqw;
    font-size:10.878cqw;
    letter-spacing:.029em;
    /* PCと同じ横つぶし。Noto Sans JPは源ノ角ゴシックより数字が広く、
       入れないとカードから右にはみ出して横スクロールが出る */
    transform:scaleX(.838);
    transform-origin:left center;
  }
  .aacta__hours{
    position:absolute;
    left:5.329cqw;
    top:21.852cqw;
    width:auto;
    margin:0;
  }
  .aacta__hoursbox{
    width:21.587cqw;
    height:7.087cqw;
    border-width:0.261cqw;
    font-size:2.867cqw;
    line-height:6.560cqw;
  }
  .aacta__hourstxt{
    margin-left:3.752cqw;
    margin-top:-0.116cqw;
    font-size:2.998cqw;
    line-height:4.272cqw;
  }
  .aacta__summer{
    position:absolute;
    left:5.551cqw;
    top:31.766cqw;
    width:auto;
    margin:0;
    font-size:2.998cqw;
    line-height:3.497cqw;
    letter-spacing:-.014em;
  }
  .aacta__badge{
    width:7.213cqw;
    height:3.497cqw;
    margin-right:1.173cqw;
    border-radius:0.542cqw;
    font-size:2.686cqw;
    line-height:3.497cqw;
  }

  /* ---------- LINEカード ---------- */
  .aacta__linebtn{
    position:absolute;
    left:50%;
    top:9.008cqw;
    width:74.669cqw;
    height:19.891cqw;
    border-radius:3.838cqw;
    margin:0;
    transform:translateX(-50%);
  }
  .aacta__linelogo{
    left:3.466cqw;
    width:11.565cqw;
    height:11.773cqw;
  }
  .aacta__linetxt{
    left:15.031cqw;      /* ロゴの右端 */
    width:54.707cqw;     /* ロゴ右端 → 矢印左端 */
    font-size:4.587cqw;
    letter-spacing:.02em;
    text-indent:.02em;
  }
  .aacta__note{
    position:absolute;
    top:32.400cqw;
    left:0;
    right:0;
    margin:0;
    font-size:3.398cqw;
    letter-spacing:.18em;
    text-indent:.18em;
  }

  /* ---------- Webカード ---------- */
  .aacta__webbtn{
    position:absolute;
    left:50%;
    width:74.669cqw;
    height:11.621cqw;
    border-radius:3.838cqw;
    margin:0;
    transform:translateX(-50%);
  }
  .aacta__webbtn--room{top:9.007cqw;}
  .aacta__webbtn--gyomu{top:23.293cqw;}
  .aacta__webbtn--room  .aacta__webicon{
    left:3.282cqw;width:10.387cqw;height:6.920cqw;
  }
  .aacta__webbtn--gyomu .aacta__webicon{
    left:2.575cqw;width:11.800cqw;height:8.512cqw;
  }
  .aacta__webtxt{
    font-size:3.920cqw;
    line-height:4.761cqw;
    letter-spacing:-.055em;
    text-indent:-.055em;
  }
  .aacta__webbtn--room  .aacta__webtxt{left:13.669cqw;width:56.071cqw;}
  .aacta__webbtn--gyomu .aacta__webtxt{left:14.375cqw;width:55.365cqw;}

  /* ---------- 矢印（PCと同じ arrow.svg・比率そのまま） ---------- */
  .aacta__arrow{
    right:3.113cqw;
    width:1.987cqw;
    height:3.634cqw;
  }
}