.elementor-38668 .elementor-element.elementor-element-e4c1b6f{--display:flex;--min-height:100vh;}.elementor-38668 .elementor-element.elementor-element-58d054d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-38668 .elementor-element.elementor-element-e62aea7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-38668 .elementor-element.elementor-element-97447b3 .elementor-heading-title{font-family:"Noto_serif_jp", Sans-serif;font-weight:500;}.elementor-38668 .elementor-element.elementor-element-067eeb5{font-family:"Noto_sans_jp", Sans-serif;font-weight:500;}.elementor-38668 .elementor-element.elementor-element-1c7e20c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-38668 .elementor-element.elementor-element-8c0cdd1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-38668 .elementor-element.elementor-element-8c0cdd1.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-38668 .elementor-element.elementor-element-b4773e2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-38668 .elementor-element.elementor-element-5d817ed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-38668 .elementor-element.elementor-element-03faa50{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-38668 .elementor-element.elementor-element-1459ab9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-38668 .elementor-element.elementor-element-5a67658{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-38668 .elementor-element.elementor-element-a15ad96{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-38668 .elementor-element.elementor-element-70e6d43{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-38668 .elementor-element.elementor-element-f16f9f6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-38668 .elementor-element.elementor-element-e62aea7{--width:40%;}.elementor-38668 .elementor-element.elementor-element-1c7e20c{--width:60%;}.elementor-38668 .elementor-element.elementor-element-8c0cdd1{--width:100.06%;}}/* Start custom CSS for container, class: .elementor-element-58d054d *//* =========================================
   コンセプトセクション（PC）
   ========================================= */

/* セクション全体 */
#concept {
  padding: 12rem 0;            /* 上下の余白（120px） */
  overflow: hidden;            /* 写真カードのはみ出しによる横スクロールを防止 */
}

/* 左右の箱を上下中央にそろえる ＋ 全体を少し左へずらして、見た目の中央にする */
#concept > .e-con-inner {
  align-items: center;
  transform: translateX(clamp(-10rem, -6vw, 0rem)); /* 画面幅の6%ぶん左へ（最大100pxまで） */
}

/* 左：テキストエリア */
#concept-text {
  position: relative;
  z-index: 2;                  /* 写真カードより前面に表示 */
  padding-right: 4rem;         /* 右の写真エリアとのすき間（40px） */
}

/* 見出し：明朝体で上品に */
#concept-title {
  margin-bottom: 3.2rem;       /* 見出しと本文のすき間（32px） */
}
/* 見出しのひらがなを小さくして、漢字との強弱をつける */
#concept-title .is-kana {
  font-size: 0.96em;            /* 漢字の80%の大きさ（0.75〜0.85で調整） */
}
#concept-title .elementor-heading-title {
  font-size: clamp(2.2rem, 2vw, 2.8rem); /* 画面幅に合わせて22px〜28pxで変化（1行8文字が収まるサイズ） */
  line-height: 1.9;            /* 行間をゆったり */
  letter-spacing: 0.12em;      /* 字間を広げて上品に */
  white-space: nowrap;         /* <br>の位置以外では折り返さない */
  color: #1a1a1a;              /* 真っ黒より少しやわらかい黒 */
}

/* 本文：小さめ・行間広めで読みやすく */
#concept-lead {
  margin-bottom: 4rem;         /* 本文とボタンのすき間（40px） */
}
#concept-lead,
#concept-lead p {
  font-size: 1.3rem;           /* 13px ※15px→13px */
  line-height: 2.1;            /* 行間を広めに */
  letter-spacing: 0.05em;      /* 字間を少し広げる ※0.08em→0.05em */
  white-space: nowrap;         /* <br>の位置以外では折り返さない */
  color: #444;                 /* 見出しより少し薄い色 */
}
#concept-lead p:last-child {
  margin-bottom: 0;            /* 最後の段落の下の余白をなくす */
}

/* ボタン：ヒーローと同じ赤の、丸い枠線ボタン（サブボタン） */
#concept-btn .elementor-button {
  --btn-red-start: #e85466;    /* ▼赤（グラデーションの左側）※ヒーローの色に合わせて変更OK */
  --btn-red-end: #d42c40;      /* ▼赤（グラデーションの右側）※ヒーローの色に合わせて変更OK */

  position: relative;
  isolation: isolate;          /* 塗りつぶし用のレイヤーをボタンの中に閉じ込める */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;     /* 「文字＋›」をひとまとまりで中央に配置 ※space-between→center */
  min-width: 24rem;            /* ボタンの最小幅（240px） */
  padding: 1.6rem 3.2rem;      /* 内側の余白（上下16px・左右32px） */
  background: transparent;     /* 通常時は背景なし */
  color: var(--btn-red-end);   /* 文字は赤 */
  border: 1.5px solid var(--btn-red-end); /* 赤い枠線 */
  border-radius: 999px;        /* 丸い形（ヒーローのボタンと同じ） */
  font-size: 1.4rem;           /* 14px */
  font-weight: 700;            /* 太字（ヒーローのボタンに合わせる） */
  letter-spacing: 0.1em;
  transition: color 0.3s, box-shadow 0.3s; /* ホバー時の変化をなめらかに */
}

/* ホバー時に表示する、赤いグラデーションの塗り */
#concept-btn .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;                    /* ボタンいっぱいに広げる */
  z-index: -1;                 /* 文字の後ろに置く */
  background: linear-gradient(90deg, var(--btn-red-start), var(--btn-red-end));
  opacity: 0;                  /* 通常時は見えない */
  transition: opacity 0.3s;    /* ふわっと表示 */
}

/* 右側の「›」（Lucide：chevron-right）※サイト全体のボタンで統一
   回転させないので形の中心がずれない／ホバーでも動かない */
#concept-btn .elementor-button::after {
  content: "";
  display: block;
  flex-shrink: 0;
  position: relative;
  top: 0.1rem;                 /* 日本語の見た目の中心に合わせて、1pxだけ下げる */
  width: 1.4rem;               /* 矢印の大きさ（14px）※全ボタン共通 */
  height: 1.4rem;
  margin-left: 1.2rem;         /* 文字と矢印の間隔（12px）※全ボタン共通 */
  border: none;
  background-color: currentColor; /* 文字と同じ色（通常時：赤／ホバー時：白） */
  transform: none;
  transition: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ホバー時：赤く塗りつぶし、文字は白に、やわらかい赤い影 */
#concept-btn .elementor-button:hover {
  color: #fff;
  box-shadow: 0 1rem 2.4rem rgba(212, 44, 64, 0.3);
}
#concept-btn .elementor-button:hover::before {
  opacity: 1;
}
#concept-btn .elementor-button:hover::after {
  transform: none;             /* ホバーしても矢印は動かさない（全ボタン共通） */
}
/* 最後の文字の後ろに付く字間を打ち消して、文字と矢印のバランスを整える */
#concept-btn .elementor-button-text {
  margin-right: -0.1em;
}

/* 右：写真エリア（正方形にして、どの画面幅でもバランスを保つ） */
#concept-visual {
  position: relative;          /* 写真カードを配置する基準 */
  aspect-ratio: 1 / 1;         /* 幅に合わせて高さが決まる（正方形） */
  min-height: 0;
}

/* HTMLウィジェットを写真エリアいっぱいに広げる */
#concept-cards {
  position: absolute;
  inset: 0;                    /* 上下左右0＝写真エリアと同じ大きさ */
  width: 100%;
}
#concept-cards > .elementor-widget-container {
  height: 100%;
}

/* カードを並べる舞台 */
.concept-stage {
  position: relative;
  width: 100%;
  height: 100%;

  /* ▼カードの傾き（ここを変えると9枚すべての角度が変わります） */
  --tilt-x: 64deg;             /* 手前への寝かせ具合（大きいほど寝る） */
  --tilt-z: 18deg;             /* 右下がりの傾き */

  /* ▼カード全体の位置と大きさ */
  transform: translateX(18%) scale(1.15); /* 右へ14%ずらして文字との間をあける ※11%→14% */
  transform-origin: left center; /* 左を基準に、右側へ広げる */
}

/* 写真カード（共通） */
.concept-card {
  position: absolute;
  left: var(--x);              /* 横の位置（カードごとに指定） */
  top: var(--y);               /* 縦の位置（カードごとに指定） */
  width: var(--w);             /* 大きさ（カードごとに指定） */
  aspect-ratio: 4 / 3;         /* 横4：縦3の比率 */
  margin: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #d9dee5, #eef1f5); /* 仮の背景（画像を入れたら見えなくなります） */
  transform: perspective(120rem) rotateX(var(--tilt-x)) rotateZ(var(--tilt-z)); /* 3Dで斜めに寝かせる */
  filter: drop-shadow(0 3rem 2.4rem rgba(0, 0, 0, 0.25)); /* 下に柔らかい影 → 宙に浮いて見える */
}

/* 画像を入れたときの表示（カードいっぱいに表示） */
.concept-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 仮の番号（画像を入れたら削除されます） */
.concept-card__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: #9aa5b1;
}

/* ▼カード1〜9の位置と大きさ（写真エリアに対する％：x＝横、y＝縦、w＝幅）
     ※xが大きいカードは、右側の画面の端に向かってはみ出します */
.concept-card--1 { --x: 46%; --y: 0%;  --w: 30%; } /* 上：小さいカード */
.concept-card--2 { --x: 72%; --y: 8%;  --w: 30%; } /* 上：小さいカード */
.concept-card--3 { --x: -4%; --y: 18%; --w: 44%; } /* 上段：左 */
.concept-card--4 { --x: 40%; --y: 16%; --w: 48%; } /* 上段：中央 */
.concept-card--5 { --x: 78%; --y: 30%; --w: 48%; } /* 上段：右（はみ出し） */
.concept-card--6 { --x: 16%; --y: 38%; --w: 50%; } /* 中段：左（スマホ） */
.concept-card--7 { --x: 66%; --y: 53%; --w: 48%; } /* 中段：右（打ち合わせ） ※x 70%→66%・y 54%→53%（左上へ戻す） */
.concept-card--8 { --x: -2%; --y: 60%; --w: 46%; } /* 下段：左 */
.concept-card--9 { --x: 30%; --y: 78%; --w: 44%; } /* 下段：中央 */


/* 背景の網目（ポリゴン）：写真カードの後ろに、ふんわり広げる */
.concept-mesh {
  position: absolute;
  top: -10%;                   /* 写真エリアより一回り大きく広げる */
  left: -25%;                  /* 文字側にも少しかかるように左へ広げる */
  width: 150%;
  height: 132%;                /* 下へ少しだけはみ出す ※140%→132% */
  z-index: 0;                  /* カードより後ろ */
  pointer-events: none;        /* クリックの邪魔をしない */

  /* 端に向かって自然に消えていくように、ふちをぼかす */
  -webkit-mask-image: radial-gradient(ellipse at 55% 52%, #000 35%, transparent 72%);
  mask-image: radial-gradient(ellipse at 55% 52%, #000 35%, transparent 72%);
}

/* 網目の線 */
.concept-mesh__line {
  fill: none;
  stroke: #8a9bb0;             /* 線の色（青みのあるグレー） */
  stroke-width: 1;             /* 線の太さ（1px） */
  stroke-opacity: 0.45;        /* 線の濃さ（0.3〜0.6で調整） */
  vector-effect: non-scaling-stroke; /* 拡大しても線の太さを1pxに保つ */
}

/* 線の交点の小さな点 */
.concept-mesh__dot {
  fill: none;
  stroke: #8a9bb0;
  stroke-width: 3;             /* 点の大きさ（3px） */
  stroke-linecap: round;       /* 丸い点にする */
  stroke-opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

/* =========================================
   ページ内リンク（「料金プランを見る」→ 料金プランへ移動）
   ========================================= */

/* クリックしたとき、パッと飛ばずにスーッとなめらかに移動させる */
html {
  scroll-behavior: smooth;
}

/* 移動先（料金プランセクション）の上に余白を確保して、固定ヘッダーに隠れないようにする */
/* ※ヘッダーの高さに合わせて数値を調整してください（ヘッダーが固定でなければ0でOK） */
#price {
  scroll-margin-top: 8rem;     /* 80px */
}

/* =========================================
   コンセプトセクション（タブレット：768px〜1120px）
   ========================================= */
@media (max-width: 1120px) {
  /* 後で追加します */
}

/* =========================================
   コンセプトセクション（スマホ：〜767px）
   ========================================= */
@media (max-width: 767px) {

   /* セクション全体：上の余白を詰めて、左右に余白（24px）をつける */
  #concept {
    padding: 4.8rem 2.4rem 12rem; /* 上48px・左右24px・下120px ※下は80px→120px */
  }

  /* PC用の「全体を少し左へずらす」をスマホでは解除（左端が切れる原因） */
  #concept > .e-con-inner {
    transform: none;
  }

  /* テキストエリア：PC用の右のすき間をなくす */
  #concept-text {
    padding-right: 0;
  }

  /* 見出し */
  #concept-title {
    margin-bottom: 2.4rem;       /* 見出しと本文のすき間（24px） */
  }
  #concept-title .elementor-heading-title {
    font-size: 2.4rem;           /* 24px（1行8文字が画面に収まるサイズ） */
    line-height: 1.8;
    letter-spacing: 0.1em;
  }

  /* 本文：小さい画面では自然に折り返すようにする */
  #concept-lead {
    margin-bottom: 3.2rem;       /* 本文とボタンのすき間（32px） */
  }
  #concept-lead,
  #concept-lead p {
    font-size: 1.3rem;           /* 13px（PCと同じ） */
    line-height: 2;
    letter-spacing: 0.02em;      /* 字間を少し詰めて、1行に収まりやすく */
    white-space: normal;         /* 画面が狭いときは折り返してOKにする */
  }
  
     /* ボタン：スマホでは中央に配置＋ヒーローのボタンと同じ大きさにそろえる */
  #concept-btn {
    width: 100%;                 /* ボタンの入れ物を横幅いっぱいに */
  }
  #concept-btn .elementor-button {
    display: flex;               /* PCの inline-flex → flex に変更（中央寄せできるように） */
    width: 100%;                 /* 横幅いっぱいに広げる */
    max-width: 30rem;            /* 最大300px（ヒーローと同じ） */
    margin-inline: auto;         /* 左右中央に配置 */
    padding: 1.6rem 2.4rem;      /* 上下16px・左右24px（ヒーローと同じ） */
    font-size: 1.6rem;           /* 文字：14px → 16px（ヒーローと同じ） */
    line-height: 1.4;            /* 行の高さ（ヒーローと同じ） */
  }
  /* 矢印も文字に合わせて少し大きく */
  #concept-btn .elementor-button::after {
    width: 1.6rem;               /* 14px → 16px */
    height: 1.6rem;
    margin-left: 0.6rem;         /* 文字と矢印の間隔（ヒーローに近づける） */
  }

  /* 写真エリア：テキストの下に、少し間をあけて配置 */
  #concept-visual {
    width: 100%;
    margin-top: 4.8rem;          /* ボタンと写真のすき間（48px） */
  }

  /* 写真カード全体：PC用の「右へずらす・拡大」を解除して、画面の中に収める */
  .concept-stage {
    transform: none;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Noto_serif_jp';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://sarumaru.xyz/wp-content/uploads/2025/08/noto-serif-jp-v29-japanese_latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Noto_serif_jp';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://sarumaru.xyz/wp-content/uploads/2025/08/noto-serif-jp-v29-japanese_latin-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Noto_serif_jp';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://sarumaru.xyz/wp-content/uploads/2025/08/noto-serif-jp-v29-japanese_latin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Noto_serif_jp';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://sarumaru.xyz/wp-content/uploads/2025/08/noto-serif-jp-v29-japanese_latin-700.woff2') format('woff2');
}
/* End Custom Fonts CSS */