@charset "utf-8";

* {
  font-family: "Roboto", "Helvetica Neue", Arial, "Lato", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", "游ゴシック", Meiryo, sans-serif;
}

p {
  /* 文節での改行を抑制し、文字単位で改行させる */
  word-break: break-all !important;
  /* iOSでの自動サイズ調整をオフにする（念のため） */
  -webkit-text-size-adjust: 100%;
  overflow-wrap: anywhere;
}

html {
  height: 100%;
}

body {
  padding-top: 70px;  /* ヘッダー高さ分 */
  height: 100%;
    padding-top: 70px;
    display: flex;
    flex-direction: column;
}

section {
  padding: 60px 0;
}

@media screen and (max-width:768px) {
  body {
    padding-top: 70px;
  }
}

:root {
  --main: #1E88E5;
  /* ←変更 */
  --accent: #3BB273;
  --bg: #F4F8FB;
  --text: #1F2937;
  --cta: #1E88E5;
  --cta-hover: #1669b2;
}

.marker {
  background-color: yellow;
  padding: 10px;
  color: red;
  line-height: 2em;
}

/* =====  WP管理バーを下部固定  ========================= */
#wpadminbar {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100%;
  z-index: 99999;
}

/* 管理バーが出ている時のズレ補正 */
html {
  margin-top: 0 !important;
}

html.wp-toolbar {
  padding-top: 0 !important;
}

/* =====  aタグのもわっとzoom  ========================= */
.zoom-card {
  display: block;
  text-decoration: none;
}

/* 画像の枠 */
.zoom-card__img {
  overflow: hidden;
  /* ← これが超重要 */
  position: relative;
}

/* 画像本体 */
.zoom-card__img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

/* hover時 */
.zoom-card:hover img {
  transform: scale(1.1);
  /* ← 好みで調整 */
}

/* ===== Base ========================= */
.l-container {
  width: min(1100px, calc(100% - 40px));
  margin-inline: auto;
}







/* ===== Buttons ===== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 20px;
  text-decoration: none;
  background: var(--cta);
  color: #fff;
  font-weight: 700;
  min-width: 220px;
  font-size: clamp(20px, 5vw, 22px);
}

.c-btn--ghost {
  background: var(--accent);
}

.c-btn:hover, .c-btn--ghost:hover {
  background-color: var(--cta-hover);
}