@charset "utf-8";


/* PC用メインヘッダー (1200px〜) */
@import url("header-pc.css");

/* 追従ヘッダー & UIパーツ (共通/タブレット) */
@import url("header-ui.css");

/* SP用ドロワーメニュー (〜980px) */
@import url("header-sp.css");

/* メインビュー */
@import url("mv.css");

:root {


 /* フォントサイズ */
   --font-size-base: clamp(0.969rem, 0.917rem + 0.07vw, 1rem);
  --line-height-base: 1.75;
  --letter-spacing-base: 0.035em;
  --text-color-base: #333;
  --body-lh: 1.8;
  --font12-size: 12px;
  --font14-size: 14px;
  --font16-size: 16px;	
  --font18-size: 18px;
  --font21-size: 21px;
  --font24-size: 24px;
  --font30-size: 30px;	
  --tablet-font-size: 1.2rem;
    --color-blue: #00227B; /* ユニゾンブルー */
	--color-skyblue:#dceef8;
    --color-red: #E60012;
	--color-gold: #c39000;
    --color-pink: #F04E67;
    --color-green: #00B900;
	--color-orange: #ff8400;
	--color-grey: #e3e3e3;
    --color-bg-purple: rgba(216, 191, 216, 0.75); /* 薄紫 75% */
    --font-base: "Noto Sans JP", sans-serif;
    --font-serif: "Noto Serif JP", serif;
    --font-en: "Bebas Neue", sans-serif;
	--cta-tel-color: #ffffff;
  --cta-line-color: #06C755;
  --cta-mail-color: #F04E67;
  --cta-text-dark: #222222;
  /* 影はさらに透明度を上げ、広がりを抑えて「控えめ」に設定 */
  --cta-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
	
	/* 幅設定 */
    --width-pc: 1200px;
	--width980: 980px;
	--width700: 700px;
	--width480: 480px;
	--width350: 350px;
	
 /* 共通コンテンツ幅*/
  --container-max: 1280px;
  --container-padding-pc: 40px;
  --container-padding-sp: 24px;
  --container-padding-xs: 20px;
  --content-readable: 900px;
　
   /* 間隔 */
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;
 
}


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}



* { 
    margin: 0px; 
    padding: 0px; 
	
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;

}


html {
 color: var(--text-color-base);
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}


body {
font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

@media (max-width: 700px) {
  body {
    font-size: clamp(1.125rem, 1rem + 1vw, 1.25rem);
    line-height: 1.8;
  }
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}



article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}



blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}




del {
	text-decoration: line-through;
}


table {
	border-collapse: collapse;
	border-spacing: 0;
}

address{
	font-style: normal;
}


address p{
	text-decoration: none;
}



article{
	overflow-x: hidden;
}





/* リンク設定 */


a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  color: inherit; 
	transition: 0.5s;
}



a img {
	border: none;
}





a img:hover {
	opacity: 0.7;
	transition: 0.5s;
}


/* 文字寄せ */

.txt_left{
text-align: left!important;
}


.txt_center{
text-align: center;


}

.txt_right{
text-align: right;
}



/* 幅サイズ */
.pt10{
padding-top:var(--space-10);
}




.pt20{
padding-top:var(--space-20);
}


.pt30{
padding-top:var(--space-30); 
}


.pt40{
padding-top:var(--space-40);
}

.pt60{
padding-top:var(--space-60);
}


.pb10{
padding-bottom:var(--space-10);
}


.pb20{
padding-bottom:var(--space-20);
}


.pb30{
padding-bottom:var(--space-30); 
}


.pb40{
padding-bottom:var(--space-40);
}

.pb60{
padding-bottom:var(--space-60);
}




.mt10{
margin-top:var(--space-10);
}


.mt20{
margin-top:var(--space-20);
}


.mt30{
margin-top:var(--space-30); 
}


.mt40{
margin-top:var(--space-40);
}

.mt60{
margin-top:var(--space-60);
}


.mb10{
margin-bottom:var(--space-10);
}


.mb20{
margin-bottom:var(--space-20);
}


.mb30{
margin-bottom:var(--space-30); 
}


.mb40{
margin-bottom:var(--space-40);
}

.mb60{
margin-bottom:var(--space-60);
}


/* リスト */


ul.emphasis-list {
    margin: 1.5em 0; 
    list-style: none;
    padding-left: 1.5em;
}

ul.item-list {
    margin: 1.5em 0; 
    list-style: none;
    padding-left: 1.5em;
    font-size: 0.95em;
}

ul.emphasis-list li {
    margin-bottom: 0.5em;
    border: none;
    width: 100% !important;
    position: relative;
    padding-left: 1em;
    list-style: none;
	line-height: 1.5em;
}

ul.item-list li {
    margin-bottom: 0.5em;
    border: none;
    width: 100% !important;
    position: relative;
    padding-left: 1em;
    list-style: none;
}

/* Font Awesome アイコン */
ul.emphasis-list li::before ,ul.item-list li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058"; /* チェックマークアイコン */
    position: absolute;
    left: -1.5em;
    top: 0;
    color: var(--text-color); /* アイコンの色 */
}

/* スマホ用調整 */
@media only screen and (max-width: 980px) {


 ul.emphasis-list {
        margin: 1.5em 0;
        list-style: none;
        padding-left: 1em;
    }
    ul.emphasis-list li::before {
        left: -0.5em;
    }

    ul.item-list {
        margin: 1em 0;
        list-style: none;
        padding-left: 1em;
    }
    ul.item-list li::before {
        left: -0.5em;
    }
}

@media only screen and (max-width: 700px) {
   ul.emphasis-list li {
   font-size: clamp(1.313rem, 1.26rem + 0.26vw, 1.375rem);
    }
}

/* =========================================
   Responsive BR Only
   <br>タグ専用：指定幅以下でだけ改行する
========================================= */

/* 初期状態：PC 1200px以上ではすべて改行しない */
.small-sp-only,
.sp-only,
.small-tab-only,
.tab-only,
.big-tab-only {
  display: none;
}

/* 350px以下だけ改行 */
@media screen and (max-width: 350px) {
  .small-sp-only {
    display: inline;
  }
}

/* 480px以下だけ改行 */
@media screen and (max-width: 480px) {
  .sp-only {
    display: inline;
  }
}

/* 700px以下だけ改行 */
@media screen and (max-width: 700px) {
  .small-tab-only {
    display: inline;
  }
}

/* 980px以下だけ改行 */
@media screen and (max-width: 980px) {
  .tab-only {
    display: inline;
  }
}

/* 1199px以下だけ改行 */
@media screen and (max-width: 1199px) {
  .big-tab-only {
    display: inline;
  }
}

/* =========================================
  ボタンベース
========================================= */

.button-center-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 50px;
}

.unison-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: min(100%, 280px);
  max-width: 100%;
  min-height: 56px;
  padding: 16px 36px;
  border: none;
  border-radius: 999px;
  font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.125rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  /* 日本語の自然な改行用 */
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: anywhere;
  text-wrap: balance;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.unison-button--primary {
  background: var(--color-gold);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.unison-button:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.unison-button:focus-visible {
  outline: 3px solid rgba(195, 144, 0, 0.35);
  outline-offset: 4px;
}

@media screen and (max-width: 600px) {
  .button-center-wrap {
    margin-top: 40px;
  }

  .unison-button {
    width: 100%;
    min-width: 0;
    padding: 15px 24px;
  }
}
/* =========================================
   AIOSEO Breadcrumb
========================================= */

.breadcrumb-area {
  padding: 22px 0 0;
  background: #fff;
}

/* AIOSEOのパンくず本体 */
.breadcrumb-area .aioseo-breadcrumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55em;

  max-width: 100%;
  padding: 13px 22px;

  background: #f3f7f2;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #7b8580;
}

/* 各項目 */
.breadcrumb-area .aioseo-breadcrumb {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* リンク */
.breadcrumb-area .aioseo-breadcrumb a,
.breadcrumb-area .aioseo-breadcrumbs a {
  color: #6f7d76;
  text-decoration: none;
}

.breadcrumb-area .aioseo-breadcrumb a:hover,
.breadcrumb-area .aioseo-breadcrumbs a:hover {
  color: var(--color-blue);
}

/* 区切り記号 */
.breadcrumb-area .aioseo-breadcrumb-separator {
  color: #a6afa9;
  margin: 0 0.15em;
}

/* 現在ページ */
.breadcrumb-area .aioseo-breadcrumb:last-child {
  color: #8b948f;
}

/* =========================================
   700px以下
========================================= */

@media screen and (max-width: 700px) {
    .breadcrumb-area {
    padding: 16px 0 0;
    overflow-x: hidden;
  }

  .breadcrumb-area .content-inner {
    overflow-x: visible;
  }

  .breadcrumb-area .aioseo-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    gap: 0.35em 0.5em;
    padding: 11px 16px;
    font-size: 11px;
    line-height: 1.7;
    border-radius: 18px;
  }

  .breadcrumb-area .aioseo-breadcrumb {
    white-space: normal;
    min-width: 0;
  }

  .breadcrumb-area .aioseo-breadcrumb a,
  .breadcrumb-area .aioseo-breadcrumbs a {
    overflow-wrap: anywhere;
  }
}


/* =========================================
   セクションアイブロウ
========================================= */


.section__eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  color: var(--color-red);
  font-family: var(--font-en);
  letter-spacing: 0.3em;
  line-height: 1;
}

.section__eyebrow::after {
  content: "";
  width: 80px;
  height: 2px;
  background: var(--color-red);
  opacity: 0.85;
}

.section__eyebrow span {
  font-size: 2.5rem;
}


.section__page_eyebrow {
    position: relative;
    padding-left: 1em;
    font-size: 1.5rem;
    color: #006633;
    margin-bottom: 40px;
    letter-spacing: 0.08em;
	font-weight: 600;
	line-height: 1.2;
}


.section__page_eyebrow::before {
    content: "";
    display: block;
    width: 6px;
    height: 1.1em;
    background: var(--color-gold);
    border-radius: 2px;
	position: absolute;
    top: 0;
    left: 0;
	}


/* =========================================
   ページ幅構成
========================================= */


.base-section {
  background: #fff;
}

.content-section {
  padding: 60px 0;
}

/* 共通インナー */
.content-inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding-pc);
  padding-right: var(--container-padding-pc);
}

/* 文章中心のページ用：プライバシーポリシー・　FAQ・ブログ本文など */
.content-readable {
  max-width: var(--content-readable);
  margin: 0 auto;
}

/* 1199px以下：タブレット・小さめPC */
@media screen and (max-width: 1199px) {
  .content-section {
    padding: 60px 0;
  }

  .content-inner {
    max-width: 100%;
	 padding-left: 80px;
  padding-right: 80px;

  }
}

/* 700px以下：スマホ */
@media screen and (max-width: 700px) {
  .content-section {
    padding: 40px 0;
  }

  .content-inner {
    padding-left: var(--container-padding-sp);
    padding-right: var(--container-padding-sp);
  }

  .content-readable {
    max-width: 100%;
  }
}

/* 480px以下：小さめスマホ */
@media screen and (max-width: 480px) {
  .content-inner {
    padding-left: var(--container-padding-xs);
    padding-right: var(--container-padding-xs);
  }
}


.very {
  display: inline;
  background-image: linear-gradient(transparent 65%, rgba(195, 144, 0, 0.5) 35%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left bottom;
  transition: background-size 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}


.very.is-active {
  background-size: 100% 100%;
}
/* =========================================
   共通：日付表示
   制定日・最終改正日など
========================================= */

.page-date-meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  margin: 0 0 50px auto;
  font-size: clamp(0.625rem, 0.575rem + 0.25vw, 0.875rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: left;
}

.page-date-meta__item {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1.25em;
  margin: 0;
}

.page-date-meta__label {
  flex-shrink: 0;
  font-weight: 500;
}

.page-date-meta time {
  white-space: nowrap;
}

@media screen and (max-width: 700px) {
  .page-date-meta {
    margin-bottom: 40px;
    font-size: 14px;
  }

  .page-date-meta__item {
    gap: 1em;
  }
}

/* =========================================
   Company Profile
   会社情報ページ
========================================= */

.company-profile {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.company-profile__panel + .company-profile__panel {
  margin-top: 64px;
}

.company-profile__panel {
  position: relative;
}

.company-profile__heading {
  position: relative;
  margin: 0 0 28px;
  padding-left: 22px;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-blue);
}

.company-profile__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 5px;
  height: 1.25em;
  background: var(--color-gold);
  border-radius: 999px;
}

.company-profile__list {
  width: 100%;
  border-top: 1px solid #d9e1ea;
}

.company-profile__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  border-bottom: 1px solid #d9e1ea;
}

.company-profile__label,
.company-profile__value {
  min-width: 0;
  margin: 0;
  padding: 22px 26px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.company-profile__label {
  display: flex;
  align-items: center;
  background: #f4f7fb;
  font-weight: 700;
}

.company-profile__value {
  background: #fff;
  color: var(--text-color-base);
  font-weight: 500;
}

.company-profile__value a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.company-profile__value a:hover {
  color: var(--color-gold);
}

.company-profile__address {
  margin: 0;
  font-style: normal;
}

/* =========================================
   事務所情報
========================================= */

.company-branch-list {
  display: grid;
  gap: 36px;
}

.company-branch {
  position: relative;
}

.company-branch__name {
  position: relative;
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: clamp(1.125rem, 1.021rem + 0.14vw, 1.188rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-blue);
}

.company-branch__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  background: var(--color-gold);
  border-radius: 50%;
}

.company-branch__detail {
  background: #fff;
}

.company-branch__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  font-weight: 700;
}

.company-branch__map-link i {
  color: var(--color-gold);
}

/* =========================================
   700px以下
========================================= */

@media screen and (max-width: 700px) {
  .company-profile {
    max-width: 100%;
  }

  .company-profile__panel + .company-profile__panel {
    margin-top: 48px;
  }

  .company-profile__heading {
    margin-bottom: 20px;
    padding-left: 18px;
    font-size: 30px;
  }

  .company-profile__row {
    display: block;
  }

  .company-profile__label,
  .company-profile__value {
    padding: 15px 18px;
  }

  .company-profile__label {
    border-bottom: 1px solid rgba(217, 225, 234, 0.8);
  }

  .company-profile__value {
    font-size: clamp(0.875rem, 0.77rem + 0.53vw, 1rem);
    line-height: 1.9;
  }

  .company-branch-list {
    gap: 32px;
  }

  .company-branch__name {
    margin-bottom: 12px;
    font-size: 24px;
  }
}

/* =========================================
   480px以下
========================================= */

@media screen and (max-width: 480px) {
  .company-profile__label,
  .company-profile__value {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* =========================================
   共通：ページ文書レイアウト
   プライバシーポリシー・利用規約・免責事項など
========================================= */

.page-document {
  width: 100%;
}

/* 全体リスト */
.page-document__list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* 1ブロック */
.page-document__item {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 80px;
  align-items: start;
  padding-bottom: 2em;
  border-bottom: 1px solid #cccc;
}

/* 左側：番号＋タイトル */
.page-document__head {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;
}

.page-document__number {
  font-family: var(--font-en);
  font-size: clamp(3.25rem, 3.042rem + 0.28vw, 3.375rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(0, 34, 123, 0.16);
}

.page-document__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.146rem + 0.14vw, 1.313rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--color-blue);
}

/* 右側：本文 */
.page-document__body {
  line-height: 2;
  letter-spacing: 0.045em;
}

.page-document__body p {
  margin: 0 0 1.5em;
}

.page-document__body p:last-child {
  margin-bottom: 0;
}

.page-document__body a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.page-document__body ul,
.page-document__body ol {
  margin: 1.2em 0 1.2em 1.4em;
  padding: 0;
}

.page-document__body ul {
  list-style: disc;
}

.page-document__body ol {
  list-style: decimal;
}

.page-document__body li {
  margin-bottom: 0.45em;
}

.page-document__body strong {
  font-weight: 700;
  color: #1f2937;
}

/* =========================================
   1199px以下
========================================= */

@media screen and (max-width: 1199px) {
  .page-document__item {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 56px;
  }

  .page-document__list {
    gap: 64px;
  }
}

/* =========================================
   700px以下
========================================= */

@media screen and (max-width: 700px) {
  .page-document__list {
    gap: 52px;
  }

  .page-document__item {
    display: block;
  }

  .page-document__head {
    margin-bottom: 20px;
    row-gap: 8px;
  }

  .page-document__number {
    font-size: 3.75rem;
  }

  .page-document__title {
    font-size: 1.35rem;
    line-height: 1.55;
  }

  .page-document__body {
    font-size: clamp(0.875rem, 0.77rem + 0.53vw, 1rem);
    line-height: 2;
  }
}

/* =========================================
   480px以下
========================================= */

@media screen and (max-width: 480px) {
  .page-document__number {
    font-size: 3.25rem;
  }

  .page-document__title {
    font-size: 1.25rem;
  }
}

/* =========================================
   フッター
========================================= */

/* CTA */
.sp-cta-btn {
  position: fixed;
  z-index: 9999;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* スクロール表示用 */
.sp-cta-btn.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sp-cta-btn__btn-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: background-color 0.3s;
}

/* =========================================
   PC・タブレット版 (701px 〜)
========================================= */
@media all and (min-width: 701px) {
  .sp-cta-btn {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .sp-cta-btn__btn {
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    border-radius: 7px 0 0 7px;
    box-shadow: var(--cta-shadow);
  }

  .sp-cta-btn__btn:hover {
    width: 280px;
  }

  .sp-cta-btn__btn-link {
    width: 280px;
    height: 100%;
    white-space: nowrap;
  }

  .sp-cta-btn__btn-ico {
    width: 60px;
    min-width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }

  /* テキスト共通 */
  .sp-cta-btn__btn-txt,
  .sp-cta-btn__btn-tel {
    font-weight: bold;
    font-size: 16px;
  }
  
  .sp-cta-btn__btn-tel {
    padding-left: 65px;
  }

  /* 電話番号（指定フォント適用） */
  .sp-cta-btn__btn-tel-num {
    font-family: var(--font-en); /* Bebas Neue適用 */
    font-size: 26px; /* 欧文フォントに合わせてサイズ調整 */
    letter-spacing: 0.08em;
    line-height: 1;
    margin-top: 2px;
  }

  .u-sp-only { display: none; }
  .u-pc-only { display: inline; }

  /* 配色 */
  .is-tel .sp-cta-btn__btn-link {
    background-color: var(--cta-tel-color);
    color: var(--color-blue);
	 flex-direction: column;
        align-items: flex-start;
		position: relative;
		border: 1px solid var(--color-blue);
		border-radius: 7px 0 0 7px;
  }
  .is-line .sp-cta-btn__btn-link {
    background-color: var(--cta-line-color);
    color: #fff;
  }
  .is-contact .sp-cta-btn__btn-link {
    background-color: var(--cta-mail-color);
    color: #fff;
  }
  
   .sp-cta-btn__btn-tel-num i{
   font-size: 21px;
   position: absolute;
   display: block;
   top: 50%;
    left:20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
   }
  
  .sp-cta-btn__btn-support{
font-size: 9px;
background: var(--color-gold);
text-align: center;
border-radius: 20px;
padding: 0.05em 1em;
color: #FFF;
margin: 0.7em 70px 0.3em;
}

.sp-cta-btn__btn-support span{
}
}

/* =========================================
   スマホ版 (〜700px)
========================================= */
@media screen and (max-width: 700px) {
 .sp-cta-btn {
    /* 中央配置の設定 */
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: 480px; /* 必要に応じて最大幅を調整 */
    
    /* 初期状態：横中央を維持しつつ、縦に100%下げて隠す */
    transform: translateX(-50%) translateY(100%);
    -webkit-transform: translateX(-50%) translateY(100%);
    
    display: flex;
    position: fixed;
    z-index: 9999;
    
    /* 上部の角を丸くする設定 */
    border-radius: 8px 8px 0 0; 
    overflow: hidden; /* 子要素がはみ出して角丸が消えないように */
    
    /* 影と背景 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease-in-out, opacity 0.5s;
    background: #fff; /* 下地の白 */
  }

  /* JavaScriptで付与されるクラス */
  .sp-cta-btn.is-active {
    /* 横中央を維持したまま表示状態へ */
    transform: translateX(-50%) translateY(0);
    -webkit-transform: translateX(-50%) translateY(0);
  }

  /* ボタン同士の境界線の調整 */
  .sp-cta-btn__btn + .sp-cta-btn__btn {
    border-left: 1px solid rgba(0, 0, 0, 0.05);
  }
  .sp-cta-btn__btn.is-tel { width: 50%; }
  .sp-cta-btn__btn.is-line { width: 25%; }
  .sp-cta-btn__btn.is-contact { width: 25%; }

  .sp-cta-btn__btn-link {
    flex-direction: column;
    justify-content: center;
    height: 60px;
  }

.sp-cta-btn__btn-support{
font-size: 9px;
background: var(--color-gold);
text-align: center;
border-radius: 20px;
padding: 0.05em 1em;
color: #FFF;
margin-bottom: 0.3em;
}

.sp-cta-btn__btn-support span{
color: var(--color-red);
}

  .sp-cta-btn__btn-ico {
    font-size: 24px;
	line-height: 1em;
  }

  /* 電話番号（スマホ・指定フォント適用） */
  .sp-cta-btn__btn-tel-num {
    font-family: var(--font-en);
    font-size: 26px;
    letter-spacing: 0.05em;
    line-height: 1;
  }

  .sp-cta-btn__btn-tel-num i{
  margin-right: 0.25em;
  }

  .sp-cta-btn__btn-txt {
    font-size: 12px;
    font-weight: bold;
    transform: scale(0.9); /* 狭い幅への微調整 */
  }

  .u-pc-only { display: none; }
  .u-sp-only { display: inline; }

  /* 境界線 */
  .sp-cta-btn__btn + .sp-cta-btn__btn {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
  }
  .is-tel + .is-line {
    border-left: 1px solid #eee;
  }

  .is-tel .sp-cta-btn__btn-link { background-color: var(--cta-tel-color); color: var(--cta-text-dark); }
  .is-line .sp-cta-btn__btn-link { background-color: var(--cta-line-color); color: #fff; }
  .is-contact .sp-cta-btn__btn-link { background-color: var(--cta-mail-color); color: #fff; }
}

@media screen and (max-width: 480px) {
.sp-cta-btn__btn-tel-num {
    font-size:clamp(1.5rem, 1.25rem + 1.25vw, 1.625rem);
  }
}

/* =========================================
   ページヘッダー
========================================= */

.page-header {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: #d9f5fb;
}

/* 背景画像 */
.page-header__bg {
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  bottom: -80px;
  z-index: 1;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

.page-header__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 文字を読みやすくする薄いレイヤー */
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 65%;
  background: linear-gradient(
    90deg,
          rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.96) 18%,
      rgba(255, 255, 255, 0.90) 35%,
      rgba(255, 255, 255, 0.72) 50%,
      rgba(255, 255, 255, 0.42) 64%,
      rgba(255, 255, 255, 0.14) 78%,
      rgba(255, 255, 255, 0.00) 92%
  );
  pointer-events: none;
}

/* タイトルの横幅 */
.page-header__inner {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

/* タイトルエリア */
.page-header__text {
  max-width: 620px;
  font-size: clamp(2rem, 1.583rem + 0.56vw, 2.25rem);
      background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: 20px;
}

.page-header__title {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--color-blue);
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.page-header__subtitle {
  margin: 10px 0 0;
  font-size: 0.8em;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
}

/* =========================================
   Responsive
========================================= */

@media screen and (max-width: 1199px) {
  .page-header__inner {
    max-width: 100%;
    padding: 0 40px;
  }
}

@media screen and (max-width: 700px) {
  .page-header {
    height: 280px;
  }

  .page-header__bg {
    top: -100px;
    bottom: -100px;
  }

  .page-header__bg img {
    object-position: center center;
  }

 @media screen and (max-width: 700px) {
  .page-header::before {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.84) 0%,
      rgba(255, 255, 255, 0.74) 30%,
      rgba(255, 255, 255, 0.52) 55%,
      rgba(255, 255, 255, 0.20) 76%,
      rgba(255, 255, 255, 0.04) 100%
    );
  }
}

  .page-header__inner {
    padding: 0 24px;
    align-items: center;
  }

  .page-header__text {
    max-width: 100%;
	font-size: clamp(1.75rem, 1.329rem + 2.11vw, 2.25rem);
	
  }

  .page-header__title {
    line-height: 1.35;
	word-break: keep-all;
  overflow-wrap: anywhere;
  }

  .page-header__subtitle {
    margin-top: clamp(0.188rem, 0.082rem + 0.53vw, 0.313rem);
    font-size: 0.8em;
  }
}

/* =========================================
   メインページ
========================================= */
@media screen and (max-width: 1199px) {
.main--header-offset{
padding-top: 60px;
}
}


/* =========================================
  共通リード文
========================================= */

.page-lead {
  width: 100%;
  max-width: var(--content-readable);
  margin: 0 auto 60px;
  text-align: center;
}

/* 上部の平行四辺形 */
.page-lead__mark {
  width: 80px;
  height: 8px;
  margin: 0 auto 20px;
  background: var(--color-blue);
  transform: skewX(-28deg);
}

/* タイトル */
.page-lead__title {
     margin: 0 auto;
    width: fit-content;
    max-width: 100%;
    font-size: clamp(1.625rem, 1.313rem + 0.42vw, 1.875rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    color: var(--text-color-base);
    text-align: left;
    overflow-wrap: anywhere;
}

/* 説明文 */
.page-lead__description {
  max-width: var(--content-readable);
  margin: 40px auto 0;
  text-align: center;
  line-height: 2.1;
  letter-spacing: 0.045em;
}

.page-lead__description p {
  margin: 0;
  display: inline-block; 
    text-align: left;
}

/* 色変更用 共通クラス */
.u-text-blue {
  color: var(--color-blue);
}

.u-text-red {
  color: var(--color-red);
}

.u-text-gold {
  color: var(--color-gold);
}

/* 980px以下は100% */
@media screen and (max-width: 980px) {
  .page-lead,
  .page-lead__description {
    max-width: 100%;
  }

  .page-lead {
    margin-bottom: 40px;
  }

  .page-lead__title {
    font-size: clamp(1.5rem, 1.184rem + 1.58vw, 1.875rem);
    letter-spacing: 0.06em;
  }

  .page-lead__description {
    margin-top: 40px;
    line-height: 2;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .page-lead {
    margin-bottom: 40px;
  }

  .page-lead__mark {
    width: 60px;
    margin-bottom: 20px;
  }

  .page-lead__title {
    letter-spacing: 0.05em;
  }
}

/* =========================================
   FAQ
   よくあるご質問
========================================= */

.faq-page {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.faq-category + .faq-category {
  margin-top: 72px;
}

.faq-category__title {
  position: relative;
  margin: 0 0 28px;
  padding-left: 22px;
  font-size: clamp(1.5rem, 1.292rem + 0.28vw, 1.625rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-blue);
}

.faq-category__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 5px;
  height: 1.25em;
  background: var(--color-gold);
  border-radius: 999px;
}

.faq-category__description {
  margin: -12px 0 28px;
  line-height: 1.9;
  color: #555;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-accordion__item {
  overflow: hidden;
  border: 1px solid #d9e1ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 34, 123, 0.06);
}

.faq-accordion__heading {
  margin: 0;
}

.faq-accordion__question {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border: 0;
  background: #eef3fa;
  color: var(--text-color-base);
  font-family: inherit;
  font-size: clamp(1rem, 0.948rem + 0.07vw, 1.031rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.faq-accordion__question:hover {
  background: #e4edf8;
  color: var(--color-blue);
}

.faq-accordion__item.is-open .faq-accordion__question {
  background: var(--color-blue);
  color: #fff;
}

.faq-accordion__mark {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.faq-accordion__mark--q {
  background: var(--color-blue);
  color: #fff;
}

.faq-accordion__item.is-open .faq-accordion__mark--q {
  background: #fff;
  color: var(--color-blue);
}

.faq-accordion__mark--a {
  background: var(--color-gold);
  color: #fff;
}

.faq-accordion__question-text {
  min-width: 0;
}

.faq-accordion__icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.faq-accordion__item.is-open .faq-accordion__icon {
  color: var(--color-blue);
  transform: rotate(180deg);
}

.faq-accordion__icon .fa-minus {
  display: none;
}

.faq-accordion__item.is-open .faq-accordion__icon .fa-plus {
  display: none;
}

.faq-accordion__item.is-open .faq-accordion__icon .fa-minus {
  display: inline-block;
}

.faq-accordion__answer {
  background: #f8faf4;
}

.faq-accordion__answer-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 26px 24px 30px;
}

.faq-accordion__answer-body {
  min-width: 0;
  line-height: 2;
  letter-spacing: 0.045em;
}

.faq-accordion__answer-body p {
  margin: 0 0 1.4em;
}

.faq-accordion__answer-body p:last-child {
  margin-bottom: 0;
}

.faq-accordion__answer-body ul,
.faq-accordion__answer-body ol {
  margin: 1.2em 0 1.2em 1.4em;
  padding: 0;
}

.faq-accordion__answer-body ul {
  list-style: disc;
}

.faq-accordion__answer-body ol {
  list-style: decimal;
}

.faq-accordion__answer-body li {
  margin-bottom: 0.45em;
}

.faq-accordion__answer-body a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.faq-page__empty {
  text-align: center;
  color: #666;
}

/* =========================================
   700px以下
========================================= */

@media screen and (max-width: 700px) {
  .faq-page {
    max-width: 100%;
  }

  .faq-category + .faq-category {
    margin-top: 56px;
  }

  .faq-category__title {
    margin-bottom: 20px;
    padding-left: 18px;
    font-size: 1.45rem;
  }

  .faq-accordion {
    gap: 14px;
  }

  .faq-accordion__item {
    border-radius: 14px;
  }

  .faq-accordion__question {
    min-height: auto;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 18px 16px;
    font-size: clamp(0.938rem, 0.832rem + 0.53vw, 1.063rem);
    line-height: 1.65;
  }

  .faq-accordion__mark {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .faq-accordion__icon {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .faq-accordion__answer-inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 22px 16px 24px;
  }

  .faq-accordion__answer-body {
    font-size: clamp(0.875rem, 0.77rem + 0.53vw, 1rem);
    line-height: 1.95;
  }
}

/* =========================================
   480px以下
========================================= */

@media screen and (max-width: 480px) {
  .faq-accordion__question {
    padding: 16px 14px;
  }

  .faq-accordion__answer-inner {
    padding: 20px 14px 22px;
  }

  .faq-accordion__mark {
    width: 32px;
    height: 32px;
  }
}


/* =========================================
   Privacy Policy
========================================= */


/* 全体リスト */
.privacy-policy__list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* 1ブロック */
.privacy-policy__item {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 80px;
  align-items: start;
  padding-bottom: 2em;
    border-bottom: 1px solid #cccc;
}

/* 左側：番号＋タイトル */
.privacy-policy__head {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;
}

.privacy-policy__number {
  font-family: var(--font-en);
  font-size: clamp(3.25rem, 3.042rem + 0.28vw, 3.375rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(0, 34, 123, 0.16);
}

.privacy-policy__title {
  margin: 0;
  font-size:clamp(1.25rem, 1.146rem + 0.14vw, 1.313rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--color-blue);
}

/* 右側：本文 */
.privacy-policy__body {
  line-height: 2;
  letter-spacing: 0.045em;
}

.privacy-policy__body p {
  margin: 0 0 1.5em;
}

.privacy-policy__body p:last-child {
  margin-bottom: 0;
}

.privacy-policy__body a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.privacy-policy__body ul,
.privacy-policy__body ol {
  margin: 1.2em 0 1.2em 1.4em;
  padding: 0;
}

.privacy-policy__body ul {
  list-style: disc;
}

.privacy-policy__body ol {
  list-style: decimal;
}

.privacy-policy__body li {
  margin-bottom: 0.45em;
}

.privacy-policy__body strong {
  font-weight: 700;
  color: #1f2937;
}

/* =========================================
   1199px以下
========================================= */

@media screen and (max-width: 1199px) {
  .privacy-policy__item {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 56px;
  }

  .privacy-policy__list {
    gap: 64px;
  }
}

/* =========================================
   700px以下
========================================= */

@media screen and (max-width: 700px) {
 

  .privacy-policy__list {
    gap: 52px;
  }

  .privacy-policy__item {
    display: block;
  }

  .privacy-policy__head {
    margin-bottom: 20px;
    row-gap: 8px;
  }

  .privacy-policy__number {
    font-size: 3.75rem;
  }

  .privacy-policy__title {
    font-size: 1.35rem;
    line-height: 1.55;
  }

  .privacy-policy__body {
    font-size: clamp(0.875rem, 0.77rem + 0.53vw, 1rem);
    line-height: 2;
  }
}

/* =========================================
   480px以下
========================================= */

@media screen and (max-width: 480px) {
  .privacy-policy__number {
    font-size: 3.25rem;
  }

  .privacy-policy__title {
    font-size: 1.25rem;
  }

 
}

/* =========================================
   フッターCTA
========================================= */


.footer-cta {
  width: 100%;
  min-height: 640px;
  padding: 80px 40px;
  background-color: #fff7d6;
  background-image:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.02) 45%,
      rgba(255, 255, 255, 0.18) 100%
    ),
    var(--footer-cta-bg, url("../images/cta-bg.webp"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.footer-cta__inner {
  width: 100%;
  max-width: var(--width980);
  margin: 0 auto;
}

.footer-cta__card {
  width: 100%;
  max-width: 980px;
  min-height: 330px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 40% 60%;
  background: rgba(255, 255, 255, 0.94);
  border: 12px solid rgba(255, 255, 255, 0.88);
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(0, 34, 123, 0.24);
}

/* 写真エリア */
.footer-cta__photo {
  position: relative;
  min-height: 330px;
  background: rgba(255, 255, 255, 0.96);
}


/* 人物写真：右端だけ自然にフェード */
.footer-cta__photo img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 48% center;

  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 78%,
    rgba(0, 0, 0, 0.85) 88%,
    rgba(0, 0, 0, 0.35) 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 78%,
    rgba(0, 0, 0, 0.85) 88%,
    rgba(0, 0, 0, 0.35) 96%,
    transparent 100%
  );
}

/* 念のため、右端に白のなじませレイヤー */
/* 右端だけ白になじませる */
.footer-cta__photo::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  z-index: 1;
  width: 18%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 62%,
    rgba(255, 255, 255, 0.9) 100%
  );
  pointer-events: none;
}

/* 写真内キャッチコピー */
.footer-cta__photo-copy {
  position: absolute;
    top: 42px;
    right: -60px;
    z-index: 3;
    margin: 0;
    font-family: "Zen Kurenaido", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: -0.03em;
    color: var(--color-blue);
    text-align: center;
    transform: rotate(-4deg);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}

/* 下のくるっとしたライン */
.footer-cta__photo-copy::after {
  content: "";
  display: block;
  width: 130px;
  height: 22px;
  margin: 4px auto 0;
  border-bottom: 2px solid rgba(195, 144, 0, 0.65);
  border-radius: 0 0 70% 45%;
  transform: rotate(-5deg) skewX(-18deg);
}

/* くるっと感を少し足す */
.footer-cta__photo-copy::before {
  content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 30px;
    height: 10px;
    border-bottom: 2px solid rgba(195, 144, 0, 0.55);
    border-radius: 50%;
    transform: translateX(36px) rotate(-18deg);
}

/* 付箋はフェードより前面 */
.footer-cta__note {
  z-index: 2;
}

/* 付箋 */
.footer-cta__note {
  position: absolute;
  left: -50px;
  bottom: 24px;
  z-index: 2;
  min-width: 220px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-blue);
  border-left: 4px solid var(--color-gold);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  transform: rotate(-1.5deg);
  text-align: center;
}

.footer-cta__note::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 24px;
  width: 72px;
  height: 20px;
  background: rgba(255, 230, 150, 0.6);
  transform: rotate(-3deg);
}

/* 付箋：会社名 */
.footer-cta__note-company {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: 7px;
}

/* 付箋：肩書き */
.footer-cta__note-position {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: rgba(0, 34, 123, 0.78);
  line-height: 1;
}

/* 付箋：名前 */
.footer-cta__note-name {
  display: block;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-blue);
}

/* テキストエリア */
.footer-cta__body {
  padding: 42px 42px 36px;
  color: var(--color-blue);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-cta__copy {
  margin: 0 0 8px;
  font-family: "Zen Kurenaido", sans-serif;
  font-size: 25px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-blue);
}

.footer-cta__title {
  position: relative;
  width: fit-content;
  margin: 0 auto 20px;
  padding: 28px 0 20px;
  font-size: clamp(1.563rem, 1.25rem + 0.42vw, 1.875rem);
  line-height: 1.45;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-blue);
  text-align: center;
}

/* 上の小さな光の装飾 */
.footer-cta__title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 70px;
  height: 20px;
  transform: translateX(-50%);
  background-image:
    linear-gradient(50deg, transparent 42%, rgba(195, 144, 0, 1) 43% 57%, transparent 58%),
    linear-gradient(rgba(195, 144, 0, 1), rgba(195, 144, 0, 1)),
    linear-gradient(-50deg, transparent 42%, rgba(195, 144, 0, 1) 43% 57%, transparent 58%);
  background-size:
    12px 16px,
    2px 18px,
    12px 16px;
  background-position:
    left 5px top 4px,
    center top,
    right 5px top 4px;
  background-repeat: no-repeat;
}

/* 下の短いゴールドライン */
.footer-cta__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 999px;
  transform: translateX(-50%);
  opacity: 0.8;
}

.footer-cta__lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: #33415f;
}

.footer-cta__tel {
  width: fit-content;
  margin: 0 auto 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-blue);
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer-cta__tel i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-blue);
  color: #fff;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-cta__buttons {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
}

.footer-cta__button-item {
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ボタン上の小さな案内文 */
.footer-cta__button-guide {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 7px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.footer-cta__button-guide::before,
.footer-cta__button-guide::after {
  position: relative;
  top: -1px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.8;
}

.footer-cta__button-guide::before {
  content: "＼";
  margin-right: 7px;
}

.footer-cta__button-guide::after {
  content: "／";
  margin-left: 7px;
}

.footer-cta__button-item--line .footer-cta__button-guide {
  color: var(--cta-line-color);
}

.footer-cta__button-item--form .footer-cta__button-guide {
  color: var(--color-blue);
}

.footer-cta__button {
  width: 100%;
  min-width: 200px;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.13);
}

.footer-cta__button:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

.footer-cta__button--line {
  background: var(--cta-line-color);
}

.footer-cta__button--form {
  background: var(--color-blue);
}

.footer-cta__button i {
  font-size: 18px;
}

.footer-cta__button-arrow {
  margin-left: 4px;
  font-size: 12px !important;
}

.footer-cta__button:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

.footer-cta__button--line {
  background: var(--cta-line-color);
}

.footer-cta__button--form {
  background: var(--cta-mail-color);
}

.footer-cta__button i {
  font-size: 18px;
}

.footer-cta__small {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #6a5520;
}

/* =========================================
   1199px以下
========================================= */

@media screen and (max-width: 1199px) {
  .footer-cta {
    min-height: 600px;
    padding: 70px 40px;
  }

  .footer-cta__card {
    max-width: 900px;
  }
  
    .footer-cta__body {
    padding: 34px 30px;
  }
  
  .footer-cta__tel {
  font-size: clamp(2rem, 1.122rem + 2vw, 2.625rem);
}
  
}

/* =========================================
   980px以下：タブレット
========================================= */

@media screen and (max-width: 980px) {
  .footer-cta {
    min-height: 560px;
    padding: 60px 32px;
  }

  .footer-cta__card {
    max-width: 700px;
    min-height: 310px;
    grid-template-columns: 38% 62%;
  }

  .footer-cta__photo {
    min-height: 310px;
  }



  .footer-cta__copy {
    font-size: 22px;
  }

  .footer-cta__title {
    padding: 26px 0 18px;
    font-size: 26px;
  }

  .footer-cta__lead {
    font-size: 13px;
  }

  .footer-cta__buttons {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .footer-cta__button {
    width: 100%;
    max-width: 290px;
  }

  .footer-cta__note {
    left: 16px;
    bottom: 18px;
    min-width: 185px;
    padding: 12px 14px;
  }

  .footer-cta__note strong {
    font-size: 16px;
  }
  
  .footer-cta__buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .footer-cta__button-item {
    width: 100%;
    max-width: 290px;
  }

  .footer-cta__button {
    width: 100%;
    max-width: none;
  }
  
  .footer-cta__photo-copy {
    top: 180px;
    right: -100px;
}
}

/* =========================================
   700px以下：スマホ
========================================= */

@media screen and (max-width: 700px) {
  .footer-cta {
    min-height: auto;
    padding: 44px 20px 88px;
    background-position: center top;
  }

  .footer-cta__card {
    max-width: 480px;
    grid-template-columns: 1fr;
    border-width: 6px;
    border-radius: 18px;
  }

  .footer-cta__photo {
    min-height: 300px;
  }

  .footer-cta__photo img {
    object-position: center 24%;
  }

  .footer-cta__note {
    left: 18px;
    bottom: 16px;
    min-width: 210px;
  }

  .footer-cta__body {
    padding: 34px 22px 32px;
	
  }
    .footer-cta__photo-copy {
        top: 50px;
        right: 0px;
    }

  .footer-cta__copy {
    font-size: 22px;
  }

  .footer-cta__title {
    font-size: 24px;
    line-height: 1.5;
	padding: 26px 0 18px;
  }

  .footer-cta__lead {
    font-size: 14px;
    line-height: 1.9;
  }

  .footer-cta__tel {
    font-size: 24px;
        gap: 10px;
        border: solid 1px;
        padding: 0.5em;
        display: flex;
        width: 100%;
        border-radius: 999px;
  }

  .footer-cta__tel i {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .footer-cta__buttons {
    width: 100%;
  }

  .footer-cta__button {
    width: 100%;
    max-width: none;
    min-height: 52px;
  }

  .footer-cta__small {
    font-size: 12px;
  }
  
   .footer-cta__photo img {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .footer-cta__photo::after {
    display: none;
  }

  .footer-cta__buttons {
    width: 100%;
    gap: 14px;
  }

  .footer-cta__button-item {
    width: 100%;
    max-width: none;
  }

  .footer-cta__button-guide {
    margin-bottom: 8px;
    font-size: 11px;
  }

  .footer-cta__button {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 52px;
  }
}

/* =========================================
   480px以下
========================================= */

@media screen and (max-width: 480px) {
  .footer-cta {
    padding: 36px 14px 84px;
  }

  .footer-cta__photo {
    min-height: 260px;
  }
  
  .footer-cta__photo-copy {
  top: 0;
  right: 0;
  transform: scale(0.7) rotate(-4deg);
  transform-origin: center center;
}

  .footer-cta__body {
    padding: 30px 18px 28px;
  }

  .footer-cta__copy {
    font-size: 20px;
  }

  .footer-cta__title {
   padding: 24px 0 17px;
    font-size: 23px;
  }

  .footer-cta__tel {
    font-size: clamp(1.188rem, 0.563rem + 3.13vw, 1.5rem);
  }

  .footer-cta__note {
    min-width: 190px;
    padding: 11px 13px;
  }

  .footer-cta__note-company {
  font-size: 12px;
}

.footer-cta__note-position {
  font-size: 9px;
}

.footer-cta__note-name {
  font-size: 17px;
}
}


@media screen and (max-width: 399px) {
  .footer-cta__photo-copy {
  top: 0;
  right: -30px;
  transform: scale(0.6) rotate(-4deg);
}
}

/* =========================================
   フッター
========================================= */

.footer {
  position: relative;
  width: 100%;
  padding: 78px 0 0;
  color: #fff;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 42%,
      rgba(41, 118, 190, 0.65) 0%,
      rgba(0, 34, 123, 0.45) 38%,
      transparent 68%
    ),
    radial-gradient(
      circle at 92% 78%,
      rgba(58, 160, 190, 0.45) 0%,
      rgba(20, 82, 155, 0.35) 35%,
      transparent 65%
    ),
    radial-gradient(
      circle at 0% 50%,
      rgba(0, 10, 45, 0.96) 0%,
      rgba(0, 22, 80, 0.88) 42%,
      transparent 72%
    ),
    linear-gradient(
      120deg,
      #000b2f 0%,
      #001753 28%,
      #00227B 55%,
      #00358f 78%,
      #144fa3 100%
    );
}

.footer-inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding-pc);
  padding-right: var(--container-padding-pc);
}

/* コメント */
.site-footer__comment {
  max-width: 760px;
  margin: 0 auto 46px;
  padding: 18px 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-align: center;
}

/* 会社ロゴ */
.site-footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 38px;
}

.site-footer__logo {
  width: 70px;
  flex-shrink: 0;
}

.site-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer__company-name {
  display: flex;
  align-items: baseline;
  gap: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.site-footer__company-style {
  font-size: 16px;
}

.site-footer__company-main {
  font-size: 28px;
}

/* 事務所 */
.site-footer__branches {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 54px;
  display: grid;
  gap: 22px;
}

.site-footer__branch {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
}

.site-footer__branch-name {
  font-family: var(--font-en);
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.25em;
  font-weight: 700;
  text-align: right;
}

.site-footer__branch-body {
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.site-footer__branch-address,
.site-footer__branch-contact {
  margin: 0;
}

.site-footer__branch-zip {
  margin-right: 0.45em;
}

.site-footer__branch-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9em 1.6em;
}

.site-footer__branch-contact a {
  color: #fff;
}

.site-footer__branch-contact a:hover {
  color: var(--color-gold);
}

/* メニュー */
.site-footer__menus {
  width: 100%;
  max-width: 980px;
  margin: 0 auto 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 86px;
}

.site-footer__menu-heading {
  margin: 0;
}

.site-footer__menu-head {
  width: 100%;
  padding: 26px 0 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: default;
}

.site-footer__menu-title {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.site-footer__menu-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: -20px;
  width: 36px;
  height: 3px;
  background: var(--color-gold);
}

.site-footer__menu-icon {
  display: none;
}

.site-footer__menu-body {
  margin-top: 22px;
}

.site-footer__menu-list {
  display: grid;
  gap: 13px;
}

.site-footer__menu-list a {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-footer__menu-list a:hover {
  color: var(--color-gold);
  transform: translateX(4px);
}

/* SNS */
.site-footer__sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 auto 36px;
}

.site-footer__sns a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.site-footer__sns a:hover {
  transform: translateY(-3px);
  opacity: 0.86;
}

.site-footer__sns img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.site-footer__sns span {
  color: var(--color-blue);
  font-size: 10px;
  font-weight: 700;
}

/* 黒帯メニュー */
.site-footer__legal {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #050505;
}

.site-footer__legal-list {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
}

.site-footer__legal-list a {
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-footer__legal-list a:hover {
  color: var(--color-gold);
}

/* コピーライト */
.site-footer__copy-wrap {
  text-align: center;
  padding: 18px 0 22px;
}

.site-footer__copy {
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* =========================================
   1199px以下
========================================= */

@media screen and (max-width: 1199px) {
  .footer-inner {
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
  }

  .site-footer__menus {
    column-gap: 56px;
  }

  .site-footer__legal-list {
    gap: 44px;
  }
}

/* =========================================
   700px以下
========================================= */

@media screen and (max-width: 700px) {
  .footer {
    padding: 46px 0 60px;

    background:
      radial-gradient(
        circle at 85% 35%,
        rgba(41, 118, 190, 0.6) 0%,
        rgba(0, 34, 123, 0.45) 42%,
        transparent 70%
      ),
      radial-gradient(
        circle at 0% 50%,
        rgba(0, 10, 45, 0.96) 0%,
        rgba(0, 22, 80, 0.9) 48%,
        transparent 76%
      ),
      linear-gradient(
        145deg,
        #000b2f 0%,
        #001753 35%,
        #00227B 68%,
        #123f96 100%
      );
  }

  .footer-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .site-footer__comment {
    margin-bottom: 34px;
    padding: 16px 18px;
    font-size: 13px;
    line-height: 1.85;
    text-align: left;
  }

  .site-footer__brand {
    gap: 14px;
    margin-bottom: 28px;
  }

  .site-footer__logo {
    width: 50px;
  }

  .site-footer__company-name {
    gap: 15px;
	align-items: center;
  }

  .site-footer__company-style {
    font-size: 21px;
        margin-top: 5px;
  }

  .site-footer__company-main {
    font-size: 36px;
  }

  .site-footer__branches {
    margin-bottom: 30px;
    gap: 30px;
  }

  .site-footer__branch {
    display: block;
    text-align: center;
  }

  .site-footer__branch-name {
    margin-bottom: 0.25em;
    text-align: center;
    font-size: clamp(1.188rem, 1.082rem + 0.53vw, 1.313rem);
  }

  .site-footer__branch-body {
    font-size: clamp(0.875rem, 0.77rem + 0.53vw, 1rem);
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  .site-footer__branch-address {
    margin-bottom: 2px;
  }

  .site-footer__branch-zip {
    display: block;
    margin-right: 0;
  }

  .site-footer__branch-address-text {
    display: block;
  }

  .site-footer__branch-contact {
    justify-content: center;
    gap: 0.4em 1em;
  }

  .site-footer__menus {
    display: block;
    max-width: 100%;
    margin-bottom: 30px;
  }

  .site-footer__menu {
    margin-bottom: 14px;
  }

  .site-footer__menu-head {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }

  .site-footer__menu-title {
    padding-left: 14px;
    font-size: 14px;
  }

  .site-footer__menu-title::before {
    top: 50%;
    left: 0;
    width: 3px;
    height: 16px;
    transform: translateY(-50%);
  }

  .site-footer__menu-icon {
    display: block;
    font-size: 14px;
    color: #fff;
  }

  .site-footer__menu-body {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.35s ease;
  }

  .site-footer__menu.is-open .site-footer__menu-body {
    max-height: 420px;
  }

  .site-footer__menu-list {
    padding: 14px 18px 4px 32px;
    gap: 10px;
  }

  .site-footer__menu-list a {
    font-size: 13px;
  }

  .site-footer__sns {
    gap: 18px;
    margin-bottom: 28px;
  }

  .site-footer__sns a {
    width: 38px;
    height: 38px;
  }

  .site-footer__legal-list {
    padding: 14px 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    text-align: center;
  }

  .site-footer__legal-list a {
    font-size: 14px;
    line-height: 1.6;
  }

  .site-footer__copy-wrap {
    padding: 16px 0 18px;
  }

  .site-footer__copy {
    font-size: 12px;
  }
}

/* =========================================
   480px以下
========================================= */

@media screen and (max-width: 480px) {
  .footer-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

 .site-footer__company-style {
    font-size: clamp(1.125rem, 0.75rem + 1.88vw, 1.313rem);
        margin-top: 5px;
  }

  .site-footer__company-main {
    font-size: clamp(1.75rem, 0.75rem + 5vw, 2.25rem);
  }

  .site-footer__legal-list {
    gap: 6px 12px;
  }
  
   .site-footer__legal-list a {
    font-size: clamp(0.625rem, 0.125rem + 2.5vw, 0.875rem);
  }
  
}



@media screen and (min-width: 701px) {
  .site-footer__branches {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .site-footer__branch {
    grid-template-columns: 92px max-content;
    column-gap: 30px;
  }

  .site-footer__branch-name {
    text-align: right;
  }

  .site-footer__branch-body {
    white-space: nowrap;
  }
  
    .site-footer__menu-icon,
  .site-footer__menu-head .fa-plus,
  .site-footer__menu-head .fa-minus {
    display: none !important;
  }

  .site-footer__menu-head {
    pointer-events: none;
  }
  
  .site-footer__menus {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    grid-template-columns: repeat(3, max-content);
    column-gap: clamp(80px, 10.5vw, 150px);
    justify-content: center;
  }

  .site-footer__menu {
    width: max-content;
  }

  .site-footer__menu-head {
    width: auto;
  }

  .site-footer__menu-body {
    width: max-content;
  }
}

/* 事務所名リンク */
.company-branch__name a {
  color: inherit;
  text-decoration: none;
}

.company-branch__name a:hover {
  color: var(--color-gold);
}


/* =========================================
   MESSAGE SECTION
========================================= */

.message-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #f6efe3;
  background-image: var(--message-wall-bg);
  background-repeat: repeat;
  background-size: 640px auto;
  padding: 0;
}

/* 黒カーブ背景 */
.message-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--message-curve-bg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 400%;
  z-index: -2;
}

/* コンパス */
.message-section::after {
  content: "";
  position: absolute;
  top: 52px;
  right: max(20px, calc((100vw - 1200px) / 2 - 90px));
  width: min(28vw, 520px);
  aspect-ratio: 1 / 1;
  background-image: var(--message-compass-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.20;
  pointer-events: none;
  z-index: -1;
}

.message-section__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 680px;
  padding: 54px 40px 48px;
}

.message-section__figure {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34.5%;
  max-width: 410px;
  z-index: 2;
}

.message-section__person img {
  display: block;
  width: 100%;
  height: auto;
}

.message-section__profile {
  position: absolute;
  top: 145px;
  left: 40px;
  width: 260px;
  color: #fff;
  z-index: 4;
}

.message-section__company {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.08rem + 0.35vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  margin-bottom: 0.65em;
  position: relative;
  padding-bottom: 0.8em;
}

.message-section__company::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 144, 42, 1) 0%, rgba(235, 210, 160, 1) 55%, rgba(201, 144, 42, 0.8) 100%);
}

.message-section__position,
.message-section__name {
  display: inline-block;
  vertical-align: baseline;
}

.message-section__position {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 0.88rem + 0.15vw, 1.05rem);
  letter-spacing: 0.08em;
  margin-right: 0.8em;
}

.message-section__name {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 0.872rem + 1.43vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.message-section__content {
  z-index: 2;
  width: calc(100% - 430px);
  margin-left: auto;
  padding-top: clamp(9.375rem, 4.664rem + 10.75vw, 11.25rem);
}

.message-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: 2rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.message-section__eyebrow::after {
  content: "";
  width: 88px;
  height: 2px;
  background: var(--color-red);
  opacity: 0.85;
}

.message-section__eyebrow span {
  font-size: clamp(1.9rem, 1.35rem + 0.35vw, 2.2rem);
}

.message-section__title {
  font-family: var(--font-serif);
  color: #111;
  font-weight: 500;
  font-size: clamp(2.35rem, 1.5rem + 1.3vw, 4.1rem);
  line-height: 1.55;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

.message-section__title span {
  color: var(--color-red);
}

.message-section__lead {
  max-width: 770px;
  color: #333;
  font-size: clamp(1rem, 0.93rem + 0.1vw, 1.06rem);
  line-height: 2;
  letter-spacing: 0.05em;
  margin-bottom: 28px;
}



.message-flow {
  width: 100%;
}

.message-flow__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 100px;
  align-items: center;
}

.message-flow__item {
  position: relative;
  min-width: 0;
  text-align: center;
}



.message-flow__number {
    font-family: var(--font-en);
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--color-gold);
    position: absolute;
    top: -20px;
    left: -20px;
	z-index: 2;
}

.message-flow__image {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  margin: 0 auto 10px;
  background: rgba(255, 255, 255, 1.0);
  position: relative;
}

.message-flow__image {
  position: relative;
}

.message-flow__image::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -64px;
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 28px solid rgba(0, 34, 123, 0.6);
  transform: translateY(-50%);
  z-index: 2;
}

.message-flow__item:last-child .message-flow__image::after {
  content: none;
}
.message-flow__image img {
  display: block;
  width: 100%;
  height: auto;
}

.message-flow__body {
  padding: 0 0.25em;
}

.message-flow__title {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-blue);
}

.message-flow__text {
  margin: 0;
  font-size: clamp(0.8125rem, 0.75rem + 0.21vw, 0.9375rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--text-color-base);
}

/* =========================================
   PC 1600px以上の大型モニター補正
========================================= */
@media screen and (min-width: 1600px) {
  .message-section__inner {
    min-height: 720px;
  }

  .message-section::after {
    right: max(30px, calc((100vw - 1200px) / 2 - 120px));
    width: min(25vw, 560px);
  }
}


/* =========================================
   MESSAGE SECTION PC調整版
   1200px以上
========================================= */

@media screen and (min-width: 1200px) {

  .message-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #f6efe3;
    background-image: var(--message-wall-bg);
    background-repeat: repeat;
    background-size: 640px auto;

    /* HEROとの被りを避ける */
    margin-top: 0;
  }

  /* 黒カーブ・金エッジ */
  .message-section::before {
    content: "";
    position: absolute;
 top: clamp(-30px, calc(50px - 4.1667vw), 0px);
left: clamp(34.375rem, 12.292rem + 29.44vw, 47.625rem);
    width: min(2560px, 100vw);
    height: 100%;
    background-image: var(--message-curve-bg);
    background-repeat: no-repeat;
    background-position: center -70px;
    background-size: 100% auto;

    transform: translateX(-50%);
    z-index: -2;
    pointer-events: none;
  }

  /* 方位磁石 */
  .message-section::after {
    content: "";
    position: absolute;
    top: 92px;
    right: -80px;
    width: 480px;
    aspect-ratio: 1 / 1;
    background-image: var(--message-compass-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
  }

  .message-section__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 660px;
    padding: 64px 0px 40px;
  }

  /* 人物エリア */
  .message-section__figure {
    position: absolute;
    left: clamp(-20px, calc(73.333px - 4.8611vw), 15px);
	bottom: -250px;
    width: 31.5%;
    max-width: 370px;
    z-index: 2;
  }

  .message-section__person img {
    display: block;
    width: clamp(21.25rem, 18.125rem + 4.17vw, 23.125rem);
    height: auto;
  }

  
  .message-section__profile {
    position: absolute;
        top: clamp(50px, calc(170px - 6.25vw), 95px);
       left: clamp(-50px, calc(83.333px - 6.944vw), 0px);
        color: #fff;
        z-index: 4;
		text-align: center;
  }

  .message-section__company {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    position: relative;
  }

  .message-section__company::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(201, 144, 42, 1) 0%,
      rgba(235, 210, 160, 1) 55%,
      rgba(201, 144, 42, 0.8) 100%
    );
  }

  .message-section__position {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    margin-right: 0.8em;
  }

  .message-section__name {
    display: inline-block;
        font-family: var(--font-serif);
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        line-height: 1.2;
  }

  /*
    右側本文
    人物を小さくしたぶん、本文を少し左に寄せる
  */
  .message-section__content {
    position: relative;
    z-index: 2;

    width: calc(100% - 32%);
    margin-left: auto;

    /*
      カーブを上にした分、本文も少し上げる
    */
    padding-top: 72px;
  }

  .message-section__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size:36px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
	text-align: center;
  }

  .message-section__title span {
    color: var(--color-red);
  }

  .message-section__lead {
    max-width: 760px;
    font-size: 1rem;
    line-height: 2;
    margin:0 auto 40px;
	text-align: center;
  }

  
  
}



/* =========================================
   PC 1199px〜981px
========================================= */
@media screen and (max-width: 1199px) and (min-width: 981px) {

.message-section::before {
background-size: contain;
    top: 0px;
    left: 0px;
}

  .message-section::after {
    top: 46px;
    right: 14px;
    width: 350px;
    opacity: 0.18;
  }

  .message-section__inner {
    min-height: 620px;
   padding: 0px 80px 40px 0px;
  }

  .message-section__figure {
    width: 28%;
    max-width: 290px;
	left:-20px;
  }

  .message-section__profile {
    top: 88px;
  }

  .message-section__content {
  position: relative;
    width:70%;
    padding-top: clamp(9.375rem, 0.577rem + 20.08vw, 15.625rem);
  }

  .message-section__title {
    font-size: clamp(2.6rem, 1.8rem + 1vw, 3.3rem);
  }

  .message-section__lead {
    font-size: 1rem;
    line-height: 1.95;
  }

  .message-flow__list {
    display: flex;
    align-items: stretch;
    gap: 24px;
  }

  .message-flow__item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    align-self: stretch;
  }

  .message-flow__body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .message-flow__text {
    flex: 1;
  }

  .message-flow__image {
    position: static;
  }

  .message-flow__image::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -22px;
    transform: translateY(-50%);

    width: 0;
    height: 0;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 28px solid #6d82bd;

    z-index: 2;
  }

  .message-flow__item:last-child .message-flow__image::after {
    content: none;
  }

}

/* =========================================
   通常タブレット 980px〜701px
========================================= */
@media screen and (max-width: 980px) and (min-width: 701px) {

  .message-section {
    background-size: 520px auto;
  }
  
  
  .message-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--message-curve-bg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 150%;
    z-index: -2;
}

  .message-section::after {
    top: 38px;
    right: 4px;
    width: 260px;
    opacity: 0.16;
  }

  .message-section__inner {
    min-height: auto;
    padding: 0px 80px 40px 0px;
  }

  .message-section__figure {
    left: -30px;
  }

  .message-section__profile {
    top: 40px;
    left: clamp(1.25rem, -34.868rem + 82.44vw, 15.625rem);
  }

  .message-section__content {
  position: relative;
    width: 62%;
	padding-top: clamp(9.688rem, -0.52rem + 23.3vw, 13.75rem);
  }

  .message-section__title {
    font-size: clamp(1.438rem, 0.024rem + 3.23vw, 2rem);
    line-height: 1.55;
  }

  .message-section__lead {
    font-size: 0.98rem;
    line-height: 1.9;
  }

 .message-flow__list {
    gap: 24px;
  }

  .message-flow__item:not(:last-child)::after {
    right: -25px;
    border-top-width: 18px;
    border-bottom-width: 18px;
    border-left-width: 22px;
  }

  .message-flow__image {
    max-width: 180px;
    margin-bottom: 14px;
  }

  .message-flow__title {
    font-size: 1.1rem;
  }

  .message-flow__text {
    font-size: 0.8rem;
    line-height: 1.75;
  }
 .message-flow {
    width: calc(100% + 24px);
    margin-top: 34px;
    margin-right: -24px;
    overflow: visible;
  }

  .message-flow__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 24px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 0 24px 18px 0;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .message-flow__item {
    position: relative;

    display: flex;
    flex-direction: column;

    flex: 0 0 82%;
    width: 82%;
    min-width: 82%;

    align-self: stretch;
    scroll-snap-align: start;

    padding: 22px 20px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 10px 24px rgba(0, 34, 123, 0.08);
  }

  .message-flow__body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .message-flow__text {
    flex: 1;
  }

  .message-flow__image {
    position: static;
    max-width: 220px;
    margin: 0 auto 18px;
  }

  .message-flow__image::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -22px;
    transform: translateY(-50%);

    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 26px solid #6d82bd;

    z-index: 2;
  }

  .message-flow__item:last-child .message-flow__image::after {
    content: none;
  }
}

/* =========================================
   大きなスマホ 700px〜481px
========================================= */
@media screen and (max-width: 700px) and (min-width: 481px) {
  .message-section {
    background-size: 480px auto;
  }

  .message-section::before {
    background-position: center top;
    background-size: contain;
        width: clamp(72.813rem, 54.281rem + 61.64vw, 81.25rem);
  }

  .message-section::after {
    top: auto;
    right: -10px;
    bottom: 150px;
    width: 220px;
    opacity: 0.14;
  }

  .message-section__inner {
    padding: 24px clamp(1.25rem, -1.477rem + 9.09vw, 2.5rem) 28px;
	min-height: clamp(1050px, calc(1529.452px - 68.493vw), 1200px);
  }

  .message-section__figure {
    width: 100%;
    max-width: none;
    left: clamp(-4.375rem, -0.257rem + -13.7vw, -6.25rem);
        top: 20px;
		z-index: -1;
  }

  .message-section__profile {
    position: absolute;
    top: 45px;
    right: clamp(3.125rem, -24.329rem + 91.32vw, 15.625rem);
    left: auto;
    width: auto;
    max-width: 210px;
    text-align: left;
  }

  .message-section__person {
    padding-top: 12px;
  }

  .message-section__person img {
    width: min(70%, 320px);
    max-width: 100%;
  }

  .message-section__content {
               width: 100%;
        margin-top: 250px;
        padding: 40px 30px;
        background: #FFF;
        border-radius: 20px;
		}

  .message-section__eyebrow {
    margin-bottom: 20px;
  }

  .message-section__title {
    font-size: clamp(2.2rem, 1.5rem + 1.8vw, 2.85rem);
    line-height: 1.65;
    margin-bottom: 20px;
  }

  .message-section__lead {
    font-size: 1rem;
    line-height: 1.95;
    margin-bottom: 22px;
  }

  .message-flow {
    width: calc(100% + 22px);
    margin-top: 34px;
    margin-right: -22px;
    overflow: visible;
  }

  .message-flow__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 22px 14px 0;
  }

  .message-flow__item {
    flex: 0 0 calc(100% - 22px);
    scroll-snap-align: start;
    padding: 18px 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 24px rgba(0, 34, 123, 0.08);
  }

  .message-flow__item:not(:last-child)::after {
    display: none;
  }

  .message-flow__number {
    font-size: 3.4rem;
    text-align: left;
  }

  .message-flow__image {
    max-width: 230px;
    margin-bottom: 18px;
  }

  .message-flow__title {
    font-size: 1.25rem;
  }

  .message-flow__text {
    font-size: 0.95rem;
    line-height: 1.9;
  }
}


/* =========================================
   通常スマホ 480px〜351px
========================================= */
@media screen and (max-width: 480px) and (min-width: 351px) {
  .message-section {
    background-size: 420px auto;
  }
  
  .message-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--message-curve-bg);
    background-repeat: no-repeat;
    background-position: 40% top;
    background-size: 350%;
    z-index: -2;
}

  .message-section::after {
    top: auto;
    right: -34px;
    bottom: 170px;
    width: 190px;
    opacity: 0.12;
  }

  .message-section__inner {
    padding: 22px 16px 26px;
  }

  .message-section__figure {
    width: 100%;
        max-width: none;
        left: clamp(-4.375rem, -0.257rem + -13.7vw, -6.25rem);
        top: 20px;
        z-index: -1;
  }

  .message-section__profile {
    position: absolute;
    top: 30px;
    right: clamp(1.25rem, -12.355rem + 62.02vw, 6.25rem);
    left: auto;
    width: 180px;
  }

.message-section__name {
    font-family: var(--font-serif);
    font-size: clamp(1.313rem, 0.802rem + 2.33vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
}
  .message-section__company {
    font-size: 1rem;
  }

  .message-section__position {
    margin: 0 0 0.2em;
    font-size: 0.84rem;
  }

  .message-section__name {
  }

  .message-section__person img {
    width: min(72%, 290px);
    max-width: 100%;
  }

  .message-section__content {
    width: 100%;
    margin-top: 200px;
        padding: 40px 15px;
        background: #FFF;
        border-radius: clamp(0.625rem, -0.625rem + 6.25vw, 1.25rem);
  }

  .message-section__eyebrow {
    gap: 12px;
    margin-bottom: 18px;
  }

  .message-section__eyebrow::after {
    width: 64px;
  }

  .message-section__title {
    font-size: clamp(1.95rem, 1.6rem + 1.2vw, 2.35rem);
    line-height: 1.7;
    margin-bottom: 16px;
  }

  .message-section__lead {
    font-size: 0.96rem;
    line-height: 1.95;
    margin-bottom: 20px;
  }
 .message-flow {
    width: calc(100% + 22px);
    margin-top: 34px;
    margin-right: -22px;
    overflow: visible;
  }

  .message-flow__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 22px 14px 0;
  }

  .message-flow__item {
    flex: 0 0 calc(100% - 22px);
    scroll-snap-align: start;
    padding: 18px 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 24px rgba(0, 34, 123, 0.08);
  }

  .message-flow__item:not(:last-child)::after {
    display: none;
  }

  .message-flow__number {
    font-size: 3.4rem;
    text-align: left;
  }

  .message-flow__image {
    max-width: 230px;
    margin-bottom: 18px;
  }

  .message-flow__title {
    font-size: 1.25rem;
  }

  .message-flow__text {
    font-size: 0.95rem;
    line-height: 1.9;

  }
}

/* =========================================
   小さなスマホ 350px〜320px
========================================= */
@media screen and (max-width: 350px) {
  .message-section {
    background-size: 380px auto;
  }


.message-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--message-curve-bg);
    background-repeat: no-repeat;
    background-position: 40% top;
    background-size: 400%;
    z-index: -2;
}
  .message-section::after {
    top: auto;
    right: -36px;
    bottom: 158px;
    width: 168px;
    opacity: 0.12;
  }

  .message-section__inner {
    padding: 18px 10px 22px;
  }

  .message-section__figure {
    width: 100%;
        max-width: none;
        left: clamp(-4.375rem, -0.257rem + -13.7vw, -6.25rem);
        top: 20px;
        z-index: -1;
  }

  
  .message-section__company {
    font-size: 0.95rem;
    margin-bottom: 0.55em;
  }
  
  
  .message-section__profile {
    position: absolute;
    top: 20px;
	right:10px;
    left: auto;
    width: clamp(11.25rem, -2.083rem + 66.67vw, 12.5rem);
    color: #fff;
    z-index: 4;
}

  .message-section__position {
    font-size: 0.78rem;
    margin: 0 0 0.15em;
  }

  .message-section__name {
    font-size: 21px;
  }

  .message-section__person img {
    width: min(74%, 260px);
  }

  .message-section__content {
   width: 100%;
        margin-top: 200px;
        padding: 40px 15px;
        background: #FFF;
        border-radius: clamp(0.625rem, -0.625rem + 6.25vw, 1.25rem);
  }

  .message-section__eyebrow {
    gap: 10px;
    margin-bottom: 14px;
  }

  .message-section__eyebrow::after {
    width: 48px;
  }

  .message-section__eyebrow span {
    font-size: 1.45rem;
  }

  .message-section__title {
    font-size: 1.7rem;
    line-height: 1.75;
    margin-bottom: 14px;
  }

  .message-section__lead {
    font-size: 0.92rem;
    line-height: 1.9;
    margin-bottom: 16px;
  }
  
.message-flow {
    width: calc(100% + 16px);
    margin-top: 28px;
    margin-right: -16px;
    overflow: visible;
  }

  .message-flow__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;

    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding: 0 16px 14px 0;
  }

  .message-flow__item {
    flex: 0 0 calc(100% - 16px);
    width: calc(100% - 16px);
    min-width: calc(100% - 16px);
    max-width: calc(100% - 16px);

    scroll-snap-align: start;

    padding: 18px 14px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 24px rgba(0, 34, 123, 0.08);

    text-align: center;
  }

  .message-flow__item:not(:last-child)::after,
  .message-flow__image::after {
    display: none;
    content: none;
  }

  .message-flow__number {
    position: static;
    display: block;
    margin: 0 0 10px;

    font-size: 3rem;
    line-height: 1;
    text-align: left;

    writing-mode: horizontal-tb;
    transform: none;
  }

  .message-flow__image {
    width: 100%;
    max-width: 190px;
    margin: 0 auto 16px;

    writing-mode: horizontal-tb;
    transform: none;
  }

  .message-flow__body {
    padding: 0;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .message-flow__title {
    margin: 0 0 10px;

    font-size: 1.12rem;
    line-height: 1.45;
    text-align: center;

    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: none;
    white-space: normal;
  }

  .message-flow__text {
    font-size: 0.88rem;
    line-height: 1.8;
    text-align: left;

    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: none;
    white-space: normal;
  }

}



@media screen and (max-width: 700px) {

  .message-flow {
    width: calc(100% + 22px);
    margin-top: 34px;
    margin-right: -22px;
    overflow: visible;
  }

  .message-flow__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 0 22px 16px 0;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .message-flow__item {
    position: relative;

    display: flex;
    flex-direction: column;

    flex: 0 0 calc(100% - 22px);
    width: calc(100% - 22px);
    min-width: calc(100% - 22px);
    max-width: calc(100% - 22px);

    align-self: stretch;
    scroll-snap-align: start;

    padding: 22px 18px 24px;

    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 24px rgba(0, 34, 123, 0.08);

    text-align: center;
  }

  .message-flow__item:not(:last-child)::after,
  .message-flow__image::after {
    display: none;
    content: none;
  }

  .message-flow__number {
    position: static;
    display: block;

    margin: 0 0 12px;
    padding: 0;

    font-size: clamp(3rem, 2.5rem + 2.5vw, 3.4rem);
    line-height: 1;
    text-align: left;

    transform: none;
    writing-mode: horizontal-tb;
  }

  .message-flow__image {
    width: 100%;
    max-width: 230px;
    margin: 0 auto 18px;

    writing-mode: horizontal-tb;
    transform: none;
  }

  .message-flow__body {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 0;

    writing-mode: horizontal-tb;
    transform: none;
  }

  .message-flow__title {
    margin: 0 0 10px;

    font-size: clamp(1.1rem, 0.95rem + 0.75vw, 1.25rem);
    line-height: 1.45;
    text-align: center;

    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: normal;
    transform: none;
  }

  .message-flow__text {
    flex: 1;

    font-size: clamp(0.88rem, 0.78rem + 0.5vw, 0.95rem);
    line-height: 1.85;
    text-align: left;

    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: normal;
    transform: none;
  }
}

@media screen and (max-width: 350px) {

  .message-flow {
    width: calc(100% + 16px);
    margin-right: -16px;
  }

  .message-flow__list {
    gap: 14px;
    padding: 0 16px 14px 0;
  }

  .message-flow__item {
    flex-basis: calc(100% - 16px);
    width: calc(100% - 16px);
    min-width: calc(100% - 16px);
    max-width: calc(100% - 16px);

    padding: 20px 14px 22px;
  }

  .message-flow__image {
    max-width: 190px;
  }
}
/* =========================================
   Contact Form 7
   お問い合わせフォーム
========================================= */

.contact-section__form {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.cf7,
.contact-form {
  width: 100%;
}

.cf7__list {
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 1px solid #d9e1ea;
}

.cf7__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  border-bottom: 1px solid #d9e1ea;
}

.cf7__label,
.cf7__field {
  min-width: 0;
  margin: 0;
  padding: 22px 26px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.cf7__label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f4f7fb;
  font-weight: 700;
  color: var(--text-color-base);
}

.cf7__label-text {
  display: inline-block;
}

.cf7__field {
  background: #fff;
  color: var(--text-color-base);
  font-weight: 500;
}

/* 必須・任意ラベル */
.cf7__required,
.cf7__optional {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cf7__required {
  background: var(--color-red);
}

.cf7__optional {
  background: #8b948f;
}

/* 入力欄 */
.cf7 input[type="text"],
.cf7 input[type="email"],
.cf7 input[type="tel"],
.cf7 input[type="url"],
.cf7 input[type="number"],
.cf7 select,
.cf7 textarea {
  width: 100%;
  min-height: 52px;

  padding: 13px 16px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #fff;
  color: var(--text-color-base);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.cf7 textarea {
  min-height: 220px;
  resize: vertical;
}

.cf7 input::placeholder,
.cf7 textarea::placeholder {
  color: #9aa5b1;
}

.cf7 input:focus,
.cf7 select:focus,
.cf7 textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(0, 34, 123, 0.12);
  background: #fff;
}

/* 郵便番号 */
.cf7__zip {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
}

.cf7__zip-mark {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-blue);
}

/* 住所 */
.cf7__address {
  display: grid;
  gap: 12px;
}

/* チェックボックス */
.cf7 .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.cf7 .wpcf7-list-item {
  display: block;
  margin: 0;
}

.cf7 .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  cursor: pointer;
  line-height: 1.7;
}

.cf7 input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.35em;
  accent-color: var(--color-blue);
}

.cf7 .wpcf7-list-item-label {
  display: inline-block;
}

/* プライバシーポリシー */
.cf7__privacy {
  display: grid;
  gap: 10px;
}

.cf7__privacy-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.cf7__privacy-text a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cf7__privacy-text a:hover {
  color: var(--color-gold);
}

/* エラー・補足メッセージ */
.cf7 .wpcf7-not-valid-tip {
  margin-top: 8px;
  color: var(--color-red);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}

.cf7 .wpcf7-response-output {
  margin: 32px 0 0;
  padding: 18px 22px;
  border-radius: 10px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ボタン */
.cf7__button-wrapper {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 42px;
}

.cf7__button-submit-wrap {
  display: contents;
}

.cf7__button {
  appearance: none;
  min-width: 220px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.cf7__button--reset {
  background: #fff;
  border-color: #cfd8e3;
  color: #667085;
}

.cf7__button--submit,
.cf7 input[type="submit"].cf7__button--submit {
  background: var(--color-blue);
  color: #fff;
}

.cf7__button:hover {
  transform: translateY(-2px);
  opacity: 0.88;
}

.cf7 .wpcf7-spinner {
  margin-left: 12px;
}


.contact-form--confirm .cf7__label {
  align-items: center;
}

.contact-form--confirm .cf7__confirm-value {
  min-height: 68px;
  display: flex;
  align-items: center;
  color: var(--text-color-base);
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.contact-form--confirm .cf7__confirm-message {
  display: block;
  white-space: pre-wrap;
  line-height: 2;
}

.contact-form--confirm .cf7__button-wrapper {
  margin-top: 42px;
}

.contact-form--confirm .wpcf7-form-control-wrap {
  width: 100%;
}

/* previousタグで生成される戻るボタン対策 */
.contact-form--confirm input[type="button"].cf7__button--reset,
.contact-form--confirm input[type="submit"].cf7__button--submit {
  appearance: none;
}

/* プライバシーポリシー欄の縦幅を詰める */
.cf7__privacy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.cf7__privacy .wpcf7-form-control-wrap {
  display: inline-block;
}

.cf7__privacy .wpcf7-list-item {
  margin: 0;
}

.cf7__privacy .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
}

.cf7__privacy-text {
  margin: 0;
  line-height: 1.5;
}

.cf7__privacy-text a {
  display: inline-block;
}
/* =========================================
   700px以下
========================================= */

@media screen and (max-width: 700px) {
  .contact-section__form {
    max-width: 100%;
  }

  .cf7__row {
    display: block;

  }

  .cf7__label,
  .cf7__field {
    padding: 15px 18px;
  }

  .cf7__label {
    border-bottom: 1px solid rgba(217, 225, 234, 0.8);
  }

  .cf7__field {
    font-size: clamp(0.875rem, 0.77rem + 0.53vw, 1rem);
    line-height: 1.9;
  }

  .cf7 input[type="text"],
  .cf7 input[type="email"],
  .cf7 input[type="tel"],
  .cf7 input[type="url"],
  .cf7 input[type="number"],
  .cf7 select,
  .cf7 textarea {
    min-height: 54px;
    font-size: 16px;
  }

  .cf7 textarea {
    min-height: 200px;
  }

  .cf7 .wpcf7-checkbox {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cf7__button-wrapper {
    flex-direction: column-reverse;
    gap: 12px;
    margin-top: 34px;
  }

  .cf7__button {
    width: 100%;
    min-width: 0;
  }
  
    .contact-form--confirm .cf7__confirm-value {
    min-height: auto;
    display: block;
  }
}

/* =========================================
   480px以下
========================================= */

@media screen and (max-width: 480px) {
  .cf7__label,
  .cf7__field {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cf7__label {
    gap: 8px;
  }

  .cf7__required,
  .cf7__optional {
    min-width: 38px;
    padding: 0.22em 0.6em;
    font-size: 12px;
  }

  .cf7__zip {
    max-width: 100%;
  }
  
    .cf7__privacy {
    display: block;
  }

  .cf7__privacy-text {
    margin-top: 5px;
  }
}

/* =========================================
   Service Mega Grid
   サービスカテゴリ一覧
========================================= */

.service-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.service-mega-grid .mega-menu-item {
  height: 100%;
  overflow: hidden;
  border: 1px solid;
    border-radius: 5px;
	border: 1px solid var(--color-grey);
}

.service-mega-grid .mega-cat-link {
  display: block;
}

/* ul / li にclassを追加 */
.mega-post-list__list {
  list-style: none;
  padding: 0;
  margin: 10px 20px 20px;
}

.mega-post-list__item {
  font-size: 12px;
  margin-bottom: 5px;
  line-height: 1.4;
  text-align: left;
}

.mega-post-list__item a {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
  text-decoration: none;
}

.service-mega-grid .mega-cat-link .mega-img img {
    width: 100%;
    height: 330px;
    object-fit: cover;
	}

.mega-post-list__item a::before {
  content: "-";
  margin-right: 0.5em;
}

.mega-post-list__item a:hover {
  text-decoration: underline;
  opacity: 0.7;
}

/* 700px以下は1カラム */
@media screen and (max-width: 700px) {
  .service-mega-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* =========================================
   共通コンポーネント (selling)
   Web・Videoなど媒体を問わず使い回せる訴求テキスト
========================================= */

.selling__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2.25em;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.08em;
}

.selling__title--red {
  color: var(--color-red);
}

.selling__title--blue {
  color: var(--color-blue);
}

.selling__concept {
  margin: 28px 0 0;
  font-size: clamp(1.35rem, 1.037rem + 0.42vw, 1.538rem);
  letter-spacing: 0.06em;

}

.selling__lead {
  margin: 20px 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.selling__lead strong {
  background: linear-gradient(transparent 62%, rgba(195, 144, 0, 0.28) 0%);
  font-weight: 800;
}



/* レスポンシブ (980px以下) */
@media screen and (max-width: 980px) {
  .selling__title {
    font-size: 2em;
  }
}

/* レスポンシブ (700px以下) */
@media screen and (max-width: 700px) {
  .selling__title {
    font-size: clamp(1.875rem, 1.559rem + 1.58vw, 2.25rem);
    line-height: 1.3;
    letter-spacing: 0.055em;
  }
  .selling__concept {
    margin-top: 20px;
    font-size: clamp(1.25rem, 0.987rem + 1.32vw, 1.563rem);
  }
}

/* レスポンシブ (480px以下) */
@media screen and (max-width: 480px) {
  .selling__title {
    letter-spacing: 0.04em;
  }
  .selling__lead {
    line-height: 2;
  }
}

/* =========================================
   Selling Web Section
   「選ばれる理由」があるウェブサイト
========================================= */
.selling-web {
  position: relative;
  overflow: hidden;
  background: #fff;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 60px 0;
  color: var(--text-color-base);
}

.selling-web__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1200px);
  margin: 0 auto;
  padding: 0;
}

.selling-web__head {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin-bottom: 40px;
}

.selling-web__visual {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: auto;
  height: clamp(30rem, 13.333rem + 22.22vw, 40rem);
  overflow: hidden;
  opacity: 0.96;
  pointer-events: none;
}

.selling-web__movie {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.selling-web__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.9) 12%,
      rgba(255, 255, 255, 0.5) 24%,
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(
      0deg,
      #fff 0%,
      rgba(255, 255, 255, 0.88) 18%,
      rgba(255, 255, 255, 0.48) 38%,
      rgba(255, 255, 255, 0) 64%
    );
  pointer-events: none;
}

.selling__points {
  position: relative;
  z-index: 2;
  margin: 40px auto 0;
  max-width: 1200px;
}

.selling__point-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.selling__point {
  position: relative;
  min-width: 0;
  padding: 0 0 22px;
  background: #f2f6fb;
  border-bottom: 4px solid rgba(0, 34, 123, 0.12);
}

.selling__point::before {
  content: "";
  display: block;
  height: 96px;
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(226, 235, 248, 0.72));
}

.selling__point-badge {
  position: absolute;
  top: -12px;
  left: -10px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-blue);
  color: #fff;
  font-family: var(--font-en);
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: 0.07em;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0, 34, 123, 0.18);
}

.selling__point-icon {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-blue);
  font-size: 26px;
  box-shadow: 0 8px 18px rgba(0, 34, 123, 0.10);
}

.selling__point-title {
  margin: 24px 18px 0;
  font-size: clamp(1.063rem, 0.958rem + 0.14vw, 1.125rem);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.055em;
  color: var(--color-blue);
  text-align: center;
}

.selling__point-text {
  margin: 14px 22px 0;
  font-size: 0.88rem;
  line-height: 1.85;
  letter-spacing: 0.035em;
}
/* --- レスポンシブ (Web用レイアウト) --- */
@media screen and (max-width: 1199px) {
  .selling-web {
    padding: 60px 0 60px;
  }
  .selling-web__inner {
    width: 100%;
    padding-left: 80px;
    padding-right: 80px;
  }
  .selling-web__head {
    max-width: 62%;
  }
  .selling-web__visual {
    height: 480px;
    right: clamp(-200px, 45.8716vw - 650px, -100px);
  }
  .selling-web__visual::before {
    background: linear-gradient(
      0deg,
      #fff 0%,
      rgba(255, 255, 255, 0.88) 18%,
      rgba(255, 255, 255, 0.48) 38%,
      rgba(255, 255, 255, 0) 64%
    );
  }
 .selling__point-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media screen and (max-width: 980px) {
  .selling-web__head {
    max-width: 100%;
  }
  .selling-web__visual {
    position: relative;
    top: 0px;
    right: auto;
    width: auto;
    height: 380px;
    opacity: 0.82;
  }
  .selling-web {
    padding: 0px 0 60px;
  }
}

@media screen and (max-width: 700px) {
  .selling-web {
    padding: 0 0 60px;
  }
  .selling-web__inner {
    padding-left: var(--container-padding-sp);
    padding-right: var(--container-padding-sp);
  }
  .selling-web__head {
    padding-right: 0;
  }
  .selling-web__visual {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 320px;
    margin: 0 auto 20px;
    opacity: 1;
    background-position: center;
  }
  .selling-web__visual::before {
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 58%, #fff 100%);
  }
 .selling__points {
    margin-top: 34px;
  }
  .selling__point-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .selling__point {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 18px;
    padding: 22px 20px;
    border-left: 5px solid rgba(0, 34, 123, 0.12);
    border-bottom: none;
  }
  .selling__point::before {
    display: none;
  }
  .selling__point-badge {
    top: 16px;
    left: 16px;
    width: 58px;
    height: 58px;
  }
  .selling__point-icon {
    position: static;
    transform: none;
    grid-row: 2 / 4;
    align-self: start;
    margin-top: 52px;
  }
  .selling__point-title,
  .selling__point-text {
    grid-column: 2;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .selling__point-title {
    margin-top: 4px;
    font-size: 1.25rem;
  }
  .selling__point-text {
    font-size: 0.95rem;
  }
}

@media screen and (max-width: 480px) {
  .selling-web__inner {
    padding-left: var(--container-padding-xs);
    padding-right: var(--container-padding-xs);
  }
  .selling-web__visual {
    height: clamp(15rem, 7.5rem + 37.5vw, 18.75rem);
  }
 .selling__point {
    grid-template-columns: 1fr;
    padding: 76px 20px 22px;
  }
  .selling__point-icon {
    display: none;
  }
  .selling__point-title,
  .selling__point-text {
    grid-column: 1;
  }
  .selling__point-title {
    font-size: 1.18rem;
  }
  .selling-web__button-wrap .unison-button {
    width: 100%;
  }
}

/* ========================================
   制作実績スライダー  works-slider
======================================== */
.works-slider {
  position: relative;
  width: 100%;
  max-width: 1920px;
}



.works-slider__wrap {
  position: relative;
  width: 100%;
  padding-left: 80px;
    padding-right: 80px;
}
.works-slider__swiper {
  width: 100%;
  overflow: hidden;
}
.works-slider__swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}
.works-slider__slide {
  flex-shrink: 0;
  height: auto;
  display: flex;
}
.works-slider__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background: #fff;
  color: inherit;
  text-decoration: none;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 34, 123, 0.10);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
  border: 1px solid var(--color-grey); /* ベースのボーダーを設定 */
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease; 
}
.works-slider__card:hover {
  transform: translateY(-5px);
  transform: translateY(-8px); /* ホバーでジャンプ */
  box-shadow: 0 12px 36px rgba(0, 34, 123, 0.16);
  border-color: var(--color-red); /* 赤色のボーダーになる */
  opacity: 1;
}
.works-slider__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: #f0ede7;
  flex-shrink: 0;
}
.works-slider__image img,
.works-slider__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.works-slider__card:hover .works-slider__image img {
  transform: scale(1.05);
}
.works-slider__noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: #aaa;
  letter-spacing: 0.05em;
  background: #f0ede7;
}
.works-slider__body {
  flex: 1;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.works-slider__client {
  margin: 0;
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
  line-height: 1.55;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--color-blue);
}
.works-slider__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}
.works-slider__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.works-slider__tag--industry {
  background: rgba(0, 34, 123, 0.08);
  color: var(--color-blue);
}
.works-slider__tag--type {
  background: rgba(230, 0, 18, 0.08);
  color: var(--color-red);
}
.works-slider__nav {

}
.works-slider__arrow {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--color-blue);
  box-shadow: 0 4px 16px rgba(0, 34, 123, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  font-size: 15px;
}
.works-slider__arrow:hover {
  background: var(--color-blue);
  color: #fff;
}
.works-slider__arrow--prev {
  left: 8px;
}
.works-slider__arrow--next {
  right: 8px;
}
.works-slider__pagination {
  position: absolute !important;
  bottom: -20px !important; /* 矢印の下にドットを配置 */
  left: 0;
  right: 0;
}
.works-slider__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  background: rgba(0, 34, 123, 0.22);
  opacity: 1;
  border-radius: 999px;
  transition: width 0.25s ease, background 0.25s ease;
}
.works-slider__pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--color-blue);
}

@media screen and (max-width: 1199px) {
  .works-slider__wrap {
    padding: 0 60px;
  }
  
  .works-slider__nav {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  /* スライダー全体をホバーした時に矢印とドットを表示 */
  .works-slider__wrap:hover .works-slider__nav {
    opacity: 1;
    visibility: visible;
  }

  /* 700px以下で矢印を消す既存コードを活かす場合、ドットだけは残すなら別途調整 */
  .works-slider__arrow {
    display: none;
  }
  .works-slider__wrap:hover .works-slider__pagination {
    opacity: 1;
    visibility: visible;
  }
}
@media screen and (max-width: 980px) {
  .works-slider {
    margin-top: 64px;
  }
  .works-slider__wrap {
    padding: 0 48px;
  }
  .works-slider__arrow {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}
@media screen and (max-width: 700px) {
  .works-slider {
    margin-top: 48px;
  }

  .works-slider__wrap {
    padding: 0 20px;
  }
  .works-slider__arrow {
    display: none;
  }
  .works-slider__card {
    border-radius: 5px;
  }
  .works-slider__body {
    padding: 12px 14px 16px;
  }
  .works-slider__client {
    font-size: 0.9375rem;
  }
  .works-slider__tag {
    font-size: 10px;
    padding: 3px 8px;
  }
}
@media screen and (max-width: 480px) {

  .works-slider__wrap {
    padding: 0 16px;
  }
}

/* =========================================
   Selling Video
========================================= */
.selling-video {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 60px 0 60px;
  color: var(--text-color-base);
}

.selling-video__visual {
  position: absolute;
  left: -100px;
  top: 0;
  width: auto;
  height: clamp(30rem, 13.333rem + 22.22vw, 40rem);
  overflow: hidden;
  opacity: 0.96;
  pointer-events: none;
  z-index: -1;
}

.selling-video__movie {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: left center;
}

.selling-video__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 58%,
      rgba(255, 255, 255, 0.94) 100%
    ),
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0) 38%
    );
}

.selling-video__inner {
  position: relative;
  z-index: 1;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 80px 0 0;
}


.selling-video__head{
position: relative;
    padding-left: 58%;
    margin-bottom: 40px;
}
/* --- レスポンシブ (Video用レイアウト) --- */
@media screen and (max-width: 1199px) {
  .selling-video {
    grid-template-columns: 42vw minmax(0, 1fr);
    gap: 40px;
  }
  .selling-video__inner {
    max-width: none;
    padding-right: 40px;
  }
}

@media screen and (max-width: 980px) {
  .selling-video {
    display: block;
    padding: 72px 0;
  }
  .selling-video__visual {
    width: calc(100% - 40px);
    height: 420px;
    margin-right: auto;
    margin-bottom: 48px;
  }
  .selling-video__inner {
    padding: 0 40px;
  }
}

@media screen and (max-width: 700px) {
  .selling-video {
    padding: 56px 0;
  }
  .selling-video__visual {
    width: calc(100% - 24px);
    height: 320px;
    border-radius: 0 28px 28px 0;
    margin-bottom: 40px;
  }
  .selling-video__inner {
    padding: 0 24px;
  }
}

@media screen and (max-width: 480px) {
  .selling-video__visual {
    height: 280px;
  }
  .selling-video__inner {
    padding: 0 20px;
  }
}





/* =========================================
   Selling print Section
========================================= */
.selling-print {
  position: relative;
  overflow: hidden;
  background: #fff;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 60px 0;
  color: var(--text-color-base);
}

.selling-print__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1200px);
  margin: 0 auto;
  padding: 0;
}

.selling-print__head {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin-bottom: 40px;
}

.selling-print__visual {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: auto;
  height: clamp(30rem, 13.333rem + 22.22vw, 40rem);
  overflow: hidden;
  opacity: 0.96;
  pointer-events: none;
}

.selling-print__movie {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.selling-print__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.9) 12%,
      rgba(255, 255, 255, 0.5) 24%,
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(
      0deg,
      #fff 0%,
      rgba(255, 255, 255, 0.88) 18%,
      rgba(255, 255, 255, 0.48) 38%,
      rgba(255, 255, 255, 0) 64%
    );
  pointer-events: none;
}

@media screen and (max-width: 980px) {
  .selling-print__head {
    max-width: 100%;
  }
  .selling-web__visual {
    position: relative;
    top: 0px;
    right: auto;
    width: auto;
    height: 380px;
    opacity: 0.82;
  }
  .selling-print {
    padding: 0px 0 60px;
  }
}

@media screen and (max-width: 700px) {
  .selling-print {
    padding: 0 0 60px;
  }
  .selling-print__inner {
    padding-left: var(--container-padding-sp);
    padding-right: var(--container-padding-sp);
  }
  .selling-print__head {
    padding-right: 0;
  }
  .selling-print__visual {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 320px;
    margin: 0 auto 20px;
    opacity: 1;
    background-position: center;
  }
  .selling-print__visual::before {
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 58%, #fff 100%);
  }
  }
  
  /* =========================================
   Pricing Plan Section (共通料金プラン)
========================================= */
.pricing-plan-section {
  background: #fff;
}

.pricing-plan__wrapper {
  margin: 0 auto;
}



/* --- カードレイアウト (PC: 3カラム) --- */
.pricing-plan__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch; /* すべてのカードの底を水平に揃える */
  margin-bottom: 40px;
}

.pricing-plan__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-grey);
  border-radius: 15px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  margin-top: 20px; 
  margin-bottom: 0;
}

a.pricing-plan__card:hover {
  box-shadow: 0 10px 24px rgba(0, 34, 123, 0.12);
  transform: translateY(-4px);
}

/* 人気プランの強調 */
.pricing-plan__card.is-popular {
  border: 2px solid var(--color-blue);
  box-shadow: 0 12px 30px rgba(0, 34, 123, 0.1);
  margin-top: 0; /* マージンをなくすことで、上だけ飛び出させる */
  margin-bottom: 0;
  z-index: 2;
}

.pricing-plan__badge {
  position: absolute; /* 中のレイアウトを押し出さないように絶対配置 */
  top: -2px; /* 枠線にぴったり被せる */
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 6px 0;
  border-radius: 0 0 10px 10px;
  width: 150px;
  letter-spacing: 0.1em;
  z-index: 3;
}

/* カード内部 */
.pricing-plan__card-inner {
  padding: 40px 24px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 人気プランの中身を下げて、他のカードとタイトル位置を水平に揃える */
.pricing-plan__card.is-popular .pricing-plan__card-inner {
  padding-top: 64px; /* 通常の40px + 飛び出し分24px */
}

.pricing-plan__name {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5em;
}

/* 価格部分 */
.pricing-plan__price-wrap {
  text-align: center;
  margin-bottom: 20px;
  color: var(--color-blue);
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.pricing-plan__price-prefix {
  font-size: 0.85rem;
  font-weight: 600;
  margin-right: 4px;
}

.pricing-plan__price-num {
  font-family: var(--font-en);
  font-size: clamp(2.2rem, 1.8rem + 1vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
}

.pricing-plan__price-suffix {
  font-size: 1rem;
  font-weight: 600;
  margin-left: 4px;
}

.pricing-plan__price-suffix small {
  font-size: 0.75rem;
}

/* キャッチコピー */
.pricing-plan__copy {
  display: inline-flex;
  margin: 0 auto 24px;
  padding: 4px 20px;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  color: var(--color-gold);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

/* お試しプラン等（3の倍数番目）用の緑枠 */
.pricing-plan__card:nth-child(3n) .pricing-plan__copy {
  border-color: var(--color-green);
  color: var(--color-green);
}

/* 特徴リスト */
.pricing-plan__features {
  margin: 0;
  list-style: none;
}

.pricing-plan__features li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.pricing-plan__features li i {
  color: var(--color-gold);
  margin-top: 0.35em;
  margin-right: 10px;
  font-size: 14px;
  flex-shrink: 0;
}

/* ターゲット層 */
.pricing-plan__target {
  background: #fcf3e8;
  padding: 14px 16px;
  font-weight: 700;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.03);
  margin-top: auto; 
  border-radius: 0 0 15px 15px;
}

.pricing-plan__card.is-popular .pricing-plan__target {
  background: #fff4cc;
}
.pricing-plan__card:nth-child(3n) .pricing-plan__target {
  background: #eef8ee;
}

.shared-remarks {
  background: #f4f7fb;
  padding: 16px 24px;
  border-radius: 12px;
  margin-top: 24px; /* どのセクションでも使いやすいように少し余白を広げています */
}

.shared-remarks p {
  display: flex;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-color-base);
  margin: 0 0 4px;
}

.shared-remarks p:last-child {
  margin-bottom: 0;
}

.shared-remarks .remark-mark {
  flex-shrink: 0;
  margin-right: 0.5em;
}
/* =========================================
   レスポンシブ
========================================= */

/* タブレット (980px〜701px): 2カラム */
@media screen and (max-width: 980px) and (min-width: 701px) {
  .pricing-plan__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* タブレット時もマージンの関係性は維持 */
  .pricing-plan__card.is-popular {
    margin-top: 0;
    margin-bottom: 0;
  }
  .pricing-plan__card:nth-child(3) {
    grid-column: span 2;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* スマホ (700px以下): 1カラム・横スクロール */
@media screen and (max-width: 700px) {
  .pricing-plan__cards {
      gap: 20px;
	width: clamp(27.563rem, 11.227rem + 54.34vw, 35rem);
        margin: 0 auto;
        padding: 40px var(--container-padding-xs) 0;
  }
  }
  
  @media screen and (max-width: 480px) {
 
  
  .pricing-plan__cards {
	width: 100%;
	padding: 0;
  }
  }

  /* スクロールバーを非表示（iOS/Chrome） */
  .pricing-plan__cards::-webkit-scrollbar {
    display: none;
  }

  .pricing-plan__card {
    flex: 0 0 85%;
	}
	
/* =========================================
   ご利用の流れ (Usage Flow)
========================================= */
.usage-flow {
  width: 100%;
  overflow: hidden; /* 横揺れを完全に防止 */
}

.usage-flow__list {
  /* カウンターを初期化 */
  counter-reset: flow-counter;
  list-style: none;
  
  /* PC (1200px以上) は3カラムグリッド */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 100px; /* カード間の余白 */
  align-items: stretch;
}

.usage-flow__item {
  border: 1px solid var(--color-grey);
  position: relative;
  min-width: 0;
  counter-increment: flow-counter;
  border-radius: 15px;
  padding: 40px 0px 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* STEPバッジ */
.usage-flow__item::before {
  content: "STEP " counter(flow-counter, decimal-leading-zero);
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #FFF;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  background: var(--color-gold);
  padding: 0.5rem 0.75rem;
  border-radius: 15px 0 0;
}

/* ★ 矢印のデザイン (PC標準設定) */
.usage-flow__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -64px; /* gap(100px)の真ん中付近に配置 */
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 28px solid rgba(0, 34, 123, 0.6);
  transform: translateY(-50%);
  z-index: 2;
  display: block;
}

/* 最後の項目の矢印は消す */
.usage-flow__item:last-child::after {
  display: none !important;
}

.usage-flow__image {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  margin: 0 auto 10px;
  position: relative;
}

.usage-flow__image img {
  display: block;
  width: 100%;
  height: auto;
}

.usage-flow__body {
  padding: 0 20px 20px;
  flex: 1; /* 高さを揃える */
}

.usage-flow__title {
  margin: 0 0 10px;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-blue);
}

.usage-flow__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--text-color-base);
}

/* 下部キャッチコピー */
.usage_flow_catch {
  background: #fff4cc;
  padding: 14px 16px;
  font-weight: 700;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.03);
  margin-top: auto;
  border-radius: 0 0 15px 15px;
}

/* 偶数番目の色変更 */
.usage-flow__item:nth-child(even) .usage_flow_catch {
  background: rgb(238, 248, 238);
}


/* =========================================
   レスポンシブ: 1199px以下（横スクロール化）
========================================= */
@media screen and (max-width: 1199px) {
  .usage-flow__list {
    display: flex; /* グリッドを解除して横一列にする */
    overflow-x: auto;
    overflow-y: hidden;
    gap: 48px; /* ★矢印が収まるようにカード間の隙間を確保 */
    padding-bottom: 20px; /* スクロールバーと影用の余白 */
    
    /* スワイプ時にピタッと止める設定 */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    
    /* スクロールバー非表示 */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .usage-flow__list::-webkit-scrollbar {
    display: none;
  }

  .usage-flow__item {
    box-shadow: 0 8px 24px rgba(0, 34, 123, 0.08);
  }

  /* ★ タブレット時の矢印サイズ・位置調整 */
  .usage-flow__item::after {
    right: -38px;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 24px solid rgba(0, 34, 123, 0.6);
  }
}

/* =========================================
   レスポンシブ: タブレット (701px 〜 1199px)
========================================= */
@media screen and (min-width: 701px) and (max-width: 1199px) {
  .usage-flow__item {
    /* 画面幅から余白(48px)を引いて2等分し、画面内にピッタリ2枚収める */
    flex: 0 0 calc((100% - 48px) / 2);
    min-width: calc((100% - 48px) / 2);
    scroll-snap-align: start; /* 左端でピタッとスナップさせる */
  }
}

/* =========================================
   レスポンシブ: スマホ (700px以下)
========================================= */
@media screen and (max-width: 700px) {
  .usage-flow__list {
    gap: 36px; /* ★スマホ用の矢印スペース */
  }
  
  .usage-flow__item {
    /* メインの1枚 ＋ 次のカードの端っこをチラ見せさせる（82%） */
    flex: 0 0 82%;
    min-width: 82%;
    scroll-snap-align: start;
  }

  /* ★ スマホ時の矢印サイズ・位置調整 */
  .usage-flow__item::after {
    right: -27px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 18px solid rgba(0, 34, 123, 0.6);
  }
  
  .usage-flow__title {
    font-size: 1.1rem;
  }
  
  .usage-flow__text {
    font-size: 0.9rem;
  }
}
/* =========================================
   共通：備考欄（ぶら下がりインデント）
========================================= */
.shared-remarks {
  background: #f4f7fb;
  padding: 16px 24px;
  border-radius: 12px;
  margin-top: 24px; 
}

.shared-remarks p {
  display: flex;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-color-base);
  margin: 0 0 4px;
}

.shared-remarks p:last-child {
  margin-bottom: 0;
}

.shared-remarks .remark-mark {
  flex-shrink: 0;
  margin-right: 0.5em;
}



/* =========================================
   Selling Policy Section (制作ポリシー・動画版)
========================================= */
.selling-policy {
 position: relative;
    width: 100%;
    max-width: 1920px;
	min-height: 480px;
    margin: 20px auto 0;
    padding: 0px;
    color: var(--text-color-base);
    overflow: hidden;
    background: #fff;
}

/* 左側ビジュアル（PC時は絶対配置） */
.selling-policy__visual {
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  height: 100%;
  z-index: 1;
}

.selling-policy__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center; /* 動画内の人物・画面を残すため右側基準でトリミング */
}

/* 動画と右側の白背景をなじませるグラデーション（右端が白） */
.selling-policy__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
background: linear-gradient(
  105deg,
  rgba(255, 255, 255, 0) 0%,
  rgba(255, 255, 255, 0) 42%,
  rgba(255, 255, 255, 0.2) 54%,
  rgba(255, 255, 255, 0.5) 65%,
  rgba(255, 255, 255, 1) 80%,
  rgba(255, 255, 255, 1) 100%
);
}

.selling-policy__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end; /* テキストを右側に寄せる */
}

/* 右側テキストエリア */
.selling-policy__head {
  width: 55%;
  padding: 60px 0px;
}



/* 上部のアイブロウ */
.selling-policy__eyebrow {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: 12px;
  letter-spacing: 0.08em;
}

/* 下部の金色のコンセプトテキスト */
.selling-policy__concept {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;

    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;

    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 0.08em;

    border-top: 1px solid var(--color-gold);
    border-bottom: 1px solid var(--color-gold);
    padding: 0.25em;

    line-height: 1.8;
    text-align: left;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 1439px) {
.selling-policy__inner {
  padding-right: 80px;
}
}


@media screen and (max-width: 700px) {
.selling-policy__inner {
  padding-right: 80px;
}

.selling-policy__concept {
  font-size: clamp(1.313rem, 1.155rem + 0.79vw, 1.5rem);
  line-height: 1.5;
  padding: 0.75em 0.25em;
}

}

/* =========================================
   レスポンシブ (980px以下で縦積みカラム)
========================================= */
@media screen and (max-width: 1199px) {
  .selling-policy {
    padding: 20px 0 0;
	margin: 0 auto;
  }
  
  .selling-policy__visual {
    position: relative;
    width: 100%;
    height: 380px;
  }
  
  .selling-policy__video {
    object-position: center 20%;
  }

  /* 縦積みの場合は、グラデーションを下方向（下が白）に変更して自然に繋げる */
  .selling-policy__visual::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 1) 100%
    );
  }

  .selling-policy__inner {
    justify-content: center;
	width: clamp(33.75rem, 7.357rem + 60.24vw, 52.5rem);
	        padding-right: 0px;
			padding-top: 40px;
  }

  .selling-policy__head {
    width: 100%;
    padding-left: 0;
    padding-top: 0;
  }
}

/* =========================================
   レスポンシブ (700px以下)
========================================= */
@media screen and (max-width: 700px) {
  .selling-policy__visual {
    height: 300px;
  }
  
    .selling-policy__inner {
  width: clamp(27.563rem, 11.227rem + 54.34vw, 35rem);
  margin: 0 auto;
    padding: 40px var(--container-padding-xs) 0;
  }
}

/* =========================================
   レスポンシブ (480px以下)
========================================= */
@media screen and (max-width: 480px) {
  .selling-policy {
    padding: 20px 0 0;
  }
  .selling-policy__inner {
  width: 100%;
  }
  .selling-policy__visual {
    height: 240px;
  }
}
/* =========================================
   Trouble Section (お悩み・ご相談セクション)
========================================= */

.trouble {
background-image: url("../images/trouble-bg.webp");
background-position: center center;
background-size: contain;
}


.trouble__inner{
padding-top: 40px;
padding-bottom: 40px;
}

@media screen and (max-width: 1439px) {
.trouble__inner {
   padding-top: 0px;
   padding-bottom: 0px;
  padding-right: 80px;
}
}

@media screen and (max-width: 700px) {
.trouble__inner {
   padding-right: var(--container-padding-sp);
}
}


/* --- タイトル周り --- */
.trouble__title {
  /* display: flex; と align-items などを削除し、ベースラインのズレを解消 */
  margin-bottom: var(--space-40);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.5; /* ルビがあるので少し余裕を持たせる */
}

@media screen and (max-width: 980px) {
.trouble__title{
   font-size: clamp(1.5rem, 0.563rem + 2.14vw, 1.875rem);
}
}

/* タイトル両端の水色斜線（\ /） */
.trouble__title::before,
.trouble__title::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1.2em;
  background-color: var(--color-blue);
  border-radius: 2px;
  vertical-align: middle; /* 追加：テキストの縦中央に合わせる */
}
.trouble__title::before {
  transform: rotate(-25deg);
  margin-right: 16px; /* 追加：gapの代わりに余白を設ける */
}
.trouble__title::after {
  transform: rotate(25deg);
  margin-left: 16px; /* 追加：gapの代わりに余白を設ける */
}

@media screen and (max-width: 700px) {

  .trouble__title {
    position: relative;

    /* h2を横いっぱいではなく、文字幅にする */
    display: table;
    margin-left: auto;
    margin-right: auto;

    /* 左右の斜線分＋文字から1em離す余白 */
    padding-left: calc(1em + 3px);
    padding-right: calc(1em + 3px);

    font-size: clamp(1.5rem, 1.143rem + 1.79vw, 1.875rem);
    line-height: 1.5;
    text-align: center;
  }

  .trouble__title::before,
  .trouble__title::after {
    content: "";
    position: absolute;
    top: 50%;

    width: 3px;

    /* 2行になったタイトル全体の高さに合わせる */
    height: calc(100% - 0.2em);

    background-color: var(--color-blue);
    border-radius: 5px;
  }

  .trouble__title::before {
    left: 0;
    transform: translateY(-50%) rotate(-25deg);
  }

  .trouble__title::after {
    right: 0;
    transform: translateY(-50%) rotate(25deg);
  }
}

@media screen and (max-width: 480px) {
    .trouble__title {
        padding-left: calc(1em + 10px);
        padding-right: calc(1em + 10px);
		font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.5rem);
    }
	
	    .trouble__title::before, .trouble__title::after {
        top: 60%;
        height: calc(100% - 2em);
    }
}

/* 「悩みなら」の上のドットルビ */
.trouble__title-dot {
  -webkit-text-emphasis: filled dot var(--color-blue);
  text-emphasis: filled dot var(--color-blue);
}

/* --- カードリスト（グリッドレイアウト） --- */
.trouble__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
}

/* --- カード本体 --- */
.trouble__card {
  display: flex;
  align-items: center; 
  gap: 14px;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid var(--color-grey);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

/* ホバー時のカード浮き上がりアニメーション */
.trouble__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 34, 123, 0.12);
}

/* --- アイコン --- */
.trouble__icon {
  /* 伸び縮みを完全に禁止し、サイズを固定する強い指定 */
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  min-width: 30px; /* 念押しの縮小防止 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
}
.trouble__icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f058";
  color: var(--color-blue);
  font-size: 30px;
  line-height: 1;
  display: block;
  letter-spacing: 0; 
  font-style: normal;
}

/* --- テキストエリア --- */
.trouble__text-wrap {
  flex-grow: 1;
}

.trouble__item-desc {
  font-size: var(--font14-size); 
  font-weight: 700; 
  color: var(--text-color-base);
  line-height: 1.7;
  font-size: 1rem;
}



/* --- 下部訴求エリア --- */
.trouble__footer {
  text-align: center;
  margin-top: var(--space-40);
}

.trouble__remarks {
  font-size: var(--font14-size);
  color: var(--text-color-base);
  margin-bottom: 12px;
  line-height: 1.8;
}

.trouble__consult {
  font-size: var(--font18-size);
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.05em;
}

/* =========================================
   レスポンシブ調整
========================================= */

/* タブレット (980px以下): 2カラムへ */
@media screen and (max-width: 980px) {
  .trouble__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 480px) {
    .trouble__list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
/* =========================================
   Merit Section (ユニゾンに依頼するメリット)
========================================= */
.merit-section {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 60px auto;
  display: flex;
  overflow: hidden;
}

/* 左側 48% */
.merit-section__inner {
  width: 55%;
  /* 既存の1200pxコンテナの中央配置と左端を揃える計算式 */
  padding-left: max(var(--container-padding-pc), calc((100vw - var(--width-pc)) / 2));
  position: relative;
  z-index: 2;
}





/* POINTリスト */
.merit-section__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.merit-section__item {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-grey);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: 0 4px 15px rgba(0, 34, 123, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.merit-section__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 34, 123, 0.08);
}

/* アイコンバッジ（二重枠線の再現） */
.merit-section__item-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--color-gold);
  color: #fff;
  flex-shrink: 0;
  margin-right: 24px;
  border: 2px solid #fff; /* 内側の白枠 */
  outline: 2px solid var(--color-gold); 
  font-weight: 700;
}

.merit-section__item-badge-text {
  font-size: 18px;
  font-family: var(--font-en);
  line-height: 0.8;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.merit-section__item-badge-num {
  font-size: 30px;
  font-family: var(--font-en);
  line-height: 0.8;
}

.merit-section__item-body {
  flex-grow: 1;
}

.merit-section__item-title {
  font-size: 1.3125rem;;
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.merit-section__item-desc {
  font-size: 1rem;
  color: var(--text-color-base);
}

/* --- 右側 50%：画像エリア --- */
.merit-section__visual {
  position: absolute;
  right: 0;
  top: 0;
  width: 42%;
  height: 100%;
  z-index: 1;
}

/* 自動的に切り抜かれる形を設定 */
.merit-section__visual-inner {
  width: 100%;
  height: 100%;
  /* 上側の角丸を小さめ、下側の角丸を大きめにすることでなめらかなカーブを作ります */
  border-top-left-radius: 120px;
  border-bottom-left-radius: 250px;
  overflow: hidden;
}

.merit-section__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
 object-position: center center; 
  /* ▼▼ ここからアニメーション用の追記 ▼▼ */
  transform: scale(1.4); /* JSの初期値と合わせる（読み込み時のカクつき防止） */
  transform-origin: center center; /* ズームの基準点を中央に設定 */
  will-change: transform; /* ブラウザにアニメーションを事前通知して動作を軽くする */
}

/* =========================================
   レスポンシブ
========================================= */
@media screen and (max-width: 1199px) {

.merit-section {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0px auto 60px;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
}

.merit-section__visual {
order: 1;
  width: 100%;
  height: 420px;
   position: relative;
}

  .merit-section__inner {
  order: 2;
  width: clamp(33.75rem, 7.357rem + 60.24vw, 52.5rem);
    padding-left: 0px;
    padding-right: 0px;
	padding-top: 40px;
	margin: 0 auto;
	 border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
  }
  .merit-section__visual-inner {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
  
}

/* タブレット（縦積みに変更） */
@media screen and (max-width: 980px) {


  .merit-section__visual {
    width: 100%;
    height: 450px;
    right: auto;
    top: auto;
  }


}

/* スマホ */
@media screen and (max-width: 700px) {


  .merit-section__inner {
     width: clamp(27.563rem, 11.227rem + 54.34vw, 35rem);
  margin: 0 auto;
    padding: 40px var(--container-padding-xs) 0;
  }

  .merit-section__item {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
  }

   .merit-section__item-badge {
    margin-right: auto;
	margin-left: auto;
    margin-bottom: 10px;
  }

  .merit-section__visual {
    height: 350px;
  }
}

/* 小さいスマホ */
@media screen and (max-width: 480px) {
  .merit-section__inner {
    width: 100%;
  }
  
  .merit-section__visual {
    height: 280px;
  }
  


}


/* =========================================
   Product Section (制作できるもの)
========================================= */


.product-section {
  background-color: var(--color-skyblue);
}



/* グリッドレイアウト（PC基本は3カラム） */
.product-section__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* カード本体 */
.product-section__card {
  background: #fff;
  border: 1px solid var(--color-grey);
  border-radius: 10px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ホバーアクション：ジャンプしてボーダーが赤色になる */
.product-section__card:hover {
  transform: translateY(-8px);
  border-color: var(--color-red);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.product-section__card-title {
   font-size: 21px;
  font-weight: 700;
  color: var(--color-blue);
  margin: 0 auto 24px;
  letter-spacing: 0.05em;
  display: block;
  width: fit-content;
  max-width: 100%;
  text-align: left;
  line-height: 1.6;
}

@media screen and (max-width: 980px) {
.product-section__card-title {
   font-size: clamp(1.313rem, 1.222rem + 0.45vw, 1.5rem);
   }
}

.product-section__card-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.product-section__card-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 画像なし (NO IMAGE) の場合の表示 */
.product-section__noimage {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-family: var(--font-en);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

.product-section__card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-color-base);
  margin: 0;
  width: 100%;
  text-align: left;
}

/* --- 価格表示エリア --- */
.product-section__card-price-wrap {
  width: 100%;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product-section__price-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

/* オレンジ色の長方形ラベル */
.product-section__price-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 1em;
  border: 1px solid var(--color-orange);
  color: var(--color-orange);
  font-size: 0.9rem;
  white-space: nowrap;
  line-height: 1em;
}

.product-section__price-amount {
  display: flex;
  align-items: baseline;
  color: var(--text-color-base);
}

/* 数字と「〜」はオレンジ色 */
.product-section__price-amount .num,
.product-section__price-amount .unit,
.product-section__price-amount .tilde {
  color: var(--color-orange);
}

/* 数字フォントとサイズ */
.product-section__price-amount .num {
  font-family: var(--font-en);
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2rem);
  line-height: 1;
  padding-top: 5px;
}

/* 「円」は小さめ */
.product-section__price-amount .unit {
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 4px;
}

/* 「〜」のフォント指定 */
.product-section__price-amount .tilde {
  margin: 0 2px;
}

/* 「（税別）」は円より90%のサイズ */
.product-section__price-amount .tax {
  font-size: 0.7em;
  color: var(--text-color-base);
}

.product-section__price-amount .text-value {
  font-size: 0.9rem;
}

/* =========================================
   レスポンシブ
========================================= */

/* 980px〜701px: 2カラム */
@media screen and (max-width: 1199px) {
  .product-section__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 980px) {

  .product-section__price-item {
  flex-direction: column;
   margin-bottom: 1rem;
   gap:5px;
}
}


/* 700px以下: 1カラム */
@media screen and (max-width: 700px) {
  .product-section {
    padding: 60px 0;
  }
  
  .product-section__cards {
    grid-template-columns: 1fr;
    gap: 20px;
	width: clamp(27.563rem, 11.227rem + 54.34vw, 35rem);
        margin: 0 auto;
        padding: 40px var(--container-padding-xs) 0;
  }
  
  .product-section__card {
    padding: 24px 20px;
  }
  

  
}

@media screen and (max-width: 480px) {

  .product-section__cards {
  width: 100%;
  padding: 40px 0 0;
  }
  

  
}


/* --- カード内 備考 --- */
.product-section__card-remarks {
  width: 100%;
  margin-top: 20px;
}

.product-section__card-remarks-title {
  background-color: var(--color-grey);
  border-radius: 5px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-color-base);
  padding: 4px 0;
  margin-bottom: 12px;
}

/* item-list のカード内微調整（既存の ul.item-list を維持しつつ余白を詰める） */
.product-section__card-remarks .item-list {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
}
.product-section__card-remarks .item-list li {
  margin-bottom: 0.25em;
  color: var(--text-color-base);
}

/* --- カード全体下部 備考 --- */
.product-section__shared-remarks-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: #fff9f2; /* 薄めのオレンジ背景 */
  border: 1px solid #fbe6cf;
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 40px;
}

/* 画像に合わせた「！」アイコン */
.product-section__shared-remarks-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--color-blue);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

.product-section__shared-remarks-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 自動「※」付与 ＆ ぶら下がりインデント */
.product-section__shared-remarks-item {
  position: relative;
  margin: 0;
  padding-left: 1em; /* ※の幅（全角1文字分）だけ左に余白をとる */
  text-indent: -1em; /* 1行目だけ1文字分左に戻す */
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-color-base);
}

.product-section__shared-remarks-item::before {
  content: "※";
  /* text-indentにより自動で指定位置に収まるため、特別な配置指定は不要 */
}

/* 700px以下のスマホ時微調整 */
@media screen and (max-width: 700px) {
  .product-section__shared-remarks-box {
    padding: 16px;
    gap: 12px;
  }
}

/* =========================================================
   FAQ一覧ページ
========================================================= */

.faq-archive {
	--faq-card-radius: 10px;
}


/* =========================================================
   親カテゴリータブ
========================================================= */

.faq-archive .faq-parent-tabs {
	display: flex;
	align-items: flex-end;
	gap: 3px;

	width: 100%;
	margin-bottom: 44px;

	border-bottom: 4px solid var(--color-blue);

	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}


/*
 * <a>ではなく<button>を使用するため、
 * ブラウザ標準のボタン装飾をリセット
 */
.faq-archive .faq-parent-tab {
	-webkit-appearance: none;
	appearance: none;

	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;

	min-width: 180px;
	margin: 0;

	/*
	 * 非アクティブ：上下14px
	 */
	padding: 14px 20px;

	background: #f3f7f2;
	color: var(--color-blue);

	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;

	text-align: center;
	text-decoration: none;
	white-space: normal;

	border: 1px solid rgba(0, 48, 130, 0.12);
	border-bottom: 0;
	border-radius: 6px 6px 0 0;

	/*
	 * 内側に影を入れて凹んだ印象にする
	 */
	box-shadow:
		inset 0 4px 8px rgba(0, 42, 115, 0.13),
		inset 0 -1px 0 rgba(255, 255, 255, 0.9);

	cursor: pointer;
	touch-action: manipulation;

	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		box-shadow 0.25s ease,
		padding 0.25s ease;
}

.faq-archive .faq-parent-tab:hover {
	background: #e8efe7;
}


/*
 * is-activeとaria-selectedの両方に対応
 */
.faq-archive .faq-parent-tab.is-active,
.faq-archive .faq-parent-tab[aria-selected="true"] {
	/*
	 * 非アクティブより上下4pxずつ増やす
	 * 合計8px高くする
	 */
	padding-top: 18px;
	padding-bottom: 18px;

	background: var(--color-blue);
	color: #fff;

	border-color: var(--color-blue);

	box-shadow:
		0 7px 16px rgba(0, 42, 115, 0.22);

	position: relative;
	z-index: 2;
}


/*
 * アクティブタブはhoverしても青を維持
 */
.faq-archive .faq-parent-tab.is-active:hover,
.faq-archive .faq-parent-tab[aria-selected="true"]:hover {
	background: var(--color-blue);
	color: #fff;
}

.faq-archive .faq-parent-tab:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: -3px;
}


/* =========================================================
   タブパネル
========================================================= */

.faq-archive .faq-tab-panels {
	width: 100%;
}

.faq-archive .faq-tab-panel {
	width: 100%;
}


/*
 * JavaScriptで選択されていないパネルに
 * hidden属性が付いた場合は完全に非表示にする
 */
.faq-archive .faq-tab-panel[hidden] {
	display: none !important;
}


/* =========================================================
   選択中カテゴリーの見出し
========================================================= */

.faq-archive .faq-active-heading {
	margin-bottom: 30px;
	text-align: center;
}

.faq-archive .faq-active-title {
	margin: 0;

	color: var(--color-blue);

	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.45;
}


/* =========================================================
   子カテゴリー・2カラム
========================================================= */

.faq-archive .service-mega-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 24px;
}

.faq-archive .mega-menu-item {
	min-width: 0;
	padding: 26px 28px 10px;

	background: #fff;

	border: 1px solid rgba(0, 48, 130, 0.11);
	border-radius: var(--faq-card-radius);

	box-shadow:
		0 5px 18px rgba(24, 40, 70, 0.07);
}

.faq-archive .mega-title {
	margin-bottom: 10px;

	color: var(--color-blue);

	font-size: clamp(17px, 1.7vw, 21px);
	font-weight: 700;
	line-height: 1.6;
}


/* =========================================================
   FAQ質問
========================================================= */

.faq-archive .faq-list {
	width: 100%;
}

.faq-archive .faq-item {
	border-bottom: 1px solid #e5e8ed;
}

.faq-archive .faq-item:last-child {
	border-bottom: 0;
}

.faq-archive .faq-question {
	margin: 0;
	padding: 0;
	font-size: inherit;
}

.faq-archive .faq-toggle {
	-webkit-appearance: none;
	appearance: none;

	display: grid;

	/*
	 * Q ｜ 質問文 ｜ 開閉アイコン
	 *
	 * Qと質問文の間は1文字分空ける
	 * 改行後の文章はQの下に入らず、
	 * 質問文の開始位置に揃う
	 */
	grid-template-columns: 2em minmax(0, 1fr) 20px;
	column-gap: 1em;
	align-items: start;

	width: 100%;
	margin: 0;
	padding: 15px 0;

	background: transparent;
	color: inherit;

	border: 0;
	border-radius: 0;

	cursor: pointer;
	touch-action: manipulation;

	font: inherit;
	line-height: 1.75;
	letter-spacing: inherit;
	text-align: left;
}

.faq-archive .faq-toggle:hover .faq-question-text {
	color: var(--color-blue);
}

.faq-archive .faq-toggle:focus-visible {
	outline: 3px solid rgba(0, 48, 130, 0.22);
	outline-offset: 4px;
	border-radius: 5px;
}

.faq-archive .faq-question-text {
	min-width: 0;
	padding-top: 2px;

	font-size: 16px;
	font-weight: 500;

	transition: color 0.25s ease;
}


/* =========================================================
   Q・Aマーク
========================================================= */

.faq-archive .faq-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 2em;
	height: 2em;

	border-radius: 50%;

	color: #fff;

	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.faq-archive .faq-mark--question {
	background: var(--color-blue);
}

.faq-archive .faq-mark--answer {
	background: var(--color-gold);
}


/* =========================================================
   ＋・－アイコン
========================================================= */

.faq-archive .faq-toggle-icon {
	position: relative;

	display: block;

	width: 18px;
	height: 18px;
	margin-top: 6px;
}

.faq-archive .faq-toggle-icon::before,
.faq-archive .faq-toggle-icon::after {
	position: absolute;
	top: 50%;
	left: 50%;

	display: block;
	content: "";

	width: 14px;
	height: 2px;

	background: var(--color-blue);
	border-radius: 2px;

	transform: translate(-50%, -50%);

	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}

.faq-archive .faq-toggle-icon::after {
	transform:
		translate(-50%, -50%)
		rotate(90deg);
}

.faq-archive .faq-item.is-open .faq-toggle-icon::after {
	opacity: 0;

	transform:
		translate(-50%, -50%)
		rotate(0deg);
}


/* =========================================================
   回答・プルダウン
========================================================= */

.faq-archive .faq-answer {
	display: grid;
	grid-template-rows: 0fr;

	opacity: 0;
	visibility: hidden;

	transition:
		grid-template-rows 0.35s ease,
		opacity 0.25s ease,
		visibility 0s linear 0.35s;
}

.faq-archive .faq-item.is-open .faq-answer {
	grid-template-rows: 1fr;

	opacity: 1;
	visibility: visible;

	transition:
		grid-template-rows 0.35s ease,
		opacity 0.25s ease,
		visibility 0s linear 0s;
}

.faq-archive .faq-answer-clip {
	min-height: 0;
	overflow: hidden;
}

.faq-archive .faq-answer-inner {
	display: grid;

	/*
	 * A ｜ 回答文
	 *
	 * Aと回答文の間を1文字分空ける
	 * 改行後もAの下に文章が入り込まない
	 */
	grid-template-columns: 2em minmax(0, 1fr);
	column-gap: 1em;
	align-items: start;

	padding: 4px 0 20px;
}

.faq-archive .faq-answer-text {
	min-width: 0;
	padding-top: 1px;

	color: #666;

	font-size: 14px;
	text-align: left;
}

.faq-archive .faq-answer-text > :first-child {
	margin-top: 0;
}

.faq-archive .faq-answer-text > :last-child {
	margin-bottom: 0;
}

.faq-archive .faq-answer-text p {
	margin: 0 0 1em;
}

.faq-archive .faq-answer-text ul,
.faq-archive .faq-answer-text ol {
	margin-top: 0.8em;
	margin-bottom: 0.8em;
	padding-left: 1.5em;
}

.faq-archive .faq-answer-text ul {
	list-style: disc;
}

.faq-archive .faq-answer-text ol {
	list-style: decimal;
}

.faq-archive .faq-answer-text li {
	margin-bottom: 0.4em;
}


/* =========================================================
   FAQ未登録
========================================================= */

.faq-archive .faq-empty-message {
	grid-column: 1 / -1;

	margin: 0;
	padding: 40px 20px;

	background: #f7f8fa;
	color: #555;

	border-radius: 8px;

	text-align: center;
}

/* =========================================================
   タブレット：701px～980px
   親カテゴリータブを2列×2段にする
========================================================= */

@media screen and (min-width: 701px) and (max-width: 980px) {

	.faq-archive .faq-parent-tabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		gap: 4px;

		overflow: visible;
		border-bottom: 0;
		margin-bottom: 36px;
	}

	.faq-archive .faq-parent-tab {
		flex: none;
		width: 100%;
		min-width: 0;
		min-height: 58px;
		padding: 14px 18px;

		border-bottom: 1px solid rgba(0, 48, 130, 0.12);
		border-radius: 6px;
	}

	/*
	 * PCでは選択中タブを高くしているが、
	 * 2列×2段では全タブの高さを揃える
	 */
	.faq-archive .faq-parent-tab.is-active,
	.faq-archive .faq-parent-tab[aria-selected="true"] {
		padding-top: 14px;
		padding-bottom: 14px;
	}
}


/* =========================================================
   スマートフォン：700px以下
   親カテゴリータブを横スクロール式にする
========================================================= */

@media screen and (max-width: 700px) {

	.faq-archive .faq-parent-tabs {
		display: flex;
		align-items: flex-end;
		gap: 4px;

		width: auto;
		margin-right: calc(50% - 50vw);
		margin-bottom: 32px;
		margin-left: calc(50% - 50vw);

		padding-right: 20px;
		padding-left: 20px;

		border-bottom: 4px solid var(--color-blue);

		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;

		scroll-snap-type: x proximity;
		scroll-padding-inline: 20px;

		/* Firefox */
		scrollbar-width: none;
	}

	/* Chrome・Safari */
	.faq-archive .faq-parent-tabs::-webkit-scrollbar {
		display: none;
	}

	.faq-archive .faq-parent-tab {
		flex: 0 0 auto;

		/*
		 * 次のタブが少し見える横幅にする
		 */
		min-width: clamp(190px, 65vw, 230px);

		padding-right: 16px;
		padding-left: 16px;

		font-size: 14px;

		scroll-snap-align: start;
	}


	/* FAQカテゴリーカードは1列 */
	.faq-archive .service-mega-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.faq-archive .mega-menu-item {
		padding: 21px 18px 8px;
	}

	.faq-archive .mega-title {
		margin-bottom: 6px;
		font-size: 17px;
	}

	.faq-archive .faq-toggle {
		grid-template-columns: 2em minmax(0, 1fr) 18px;
		column-gap: 1em;

		padding: 14px 0;
	}

	.faq-archive .faq-question-text,
	.faq-archive .faq-answer-text {
		font-size: 14px;
	}
}

/* =========================================================
   動きを減らす設定を使用している場合
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.faq-archive .faq-parent-tab,
	.faq-archive .faq-question-text,
	.faq-archive .faq-toggle-icon::before,
	.faq-archive .faq-toggle-icon::after,
	.faq-archive .faq-answer {
		transition: none;
	}

}


/* =========================================================
   制作実績一覧ページ
========================================================= */

.works-archive-section {
	overflow: hidden;
}

.works-archive {
	--works-border-color: rgba(0, 48, 130, 0.16);
	--works-panel-color: #f7f9fc;
	--works-selected-color: #e5e5e5;
	--works-results-color: #e7f6fb;
}

/* FAQと同じ親カテゴリータブを使用 */
.works-archive .faq-parent-tabs {
	margin-bottom: 32px;
}


/* =========================================================
   子カテゴリー絞り込み
========================================================= */

.works-filter {
	margin-bottom: 40px;
	padding: 26px;

	background: var(--works-panel-color);
	border: 1px solid rgba(0, 48, 130, 0.12);
	border-radius: 14px;
	box-shadow: 0 5px 18px rgba(24, 40, 70, 0.04);
}

.works-filter__title {
	margin: 0 0 16px;

	color: #52657d;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.03em;
}

.works-filter__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.works-filter__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	min-width: 0;
	min-height: 62px;
	padding: 13px 16px 13px 20px;

	background: #fff;
	color: var(--color-blue);

	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	text-decoration: none;

	border: 1px solid var(--works-border-color);
	border-radius: 9px;
	box-shadow: 0 2px 8px rgba(24, 40, 70, 0.025);

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.works-filter__button:hover {
	background: #f0f4f8;
	border-color: rgba(0, 48, 130, 0.3);
	box-shadow: 0 5px 14px rgba(24, 40, 70, 0.08);
	transform: translateY(-1px);
}

.works-filter__button.is-active,
.works-filter__button[aria-current="page"] {
	background: var(--works-selected-color);
	color: #333;
	border-color: transparent;
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.035);
}

.works-filter__button:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 2px;
}

.works-filter__count {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;

	min-width: 34px;
	height: 34px;
	padding: 0 8px;

	background: #f3f7ff;
	color: var(--color-blue);
	border-radius: 999px;

	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.works-filter__button.is-active .works-filter__count,
.works-filter__button[aria-current="page"] .works-filter__count {
	background: rgba(255, 255, 255, 0.88);
}


/* =========================================================
   制作実績カード一覧
========================================================= */

.works-results {
	position: relative;
	z-index: 0;

	margin-bottom: 48px;
	padding-top: 32px;
	padding-bottom: 32px;

	background: var(--works-results-color);
	box-shadow: 0 0 0 100vmax var(--works-results-color);
	clip-path: inset(0 -100vmax);
}

.works-results::before,
.works-results::after {
	position: absolute;
	left: 50%;
	z-index: -1;

	width: 100vw;
	height: 1px;

	background: rgba(0, 88, 146, 0.32);
	content: "";
	transform: translateX(-50%);
}

.works-results::before {
	top: 0;
}

.works-results::after {
	bottom: 0;
}

.works-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 24px;
}

.works-card {
	min-width: 0;
	height: 100%;

	background: #fff;
	border: 1px solid rgba(20, 50, 80, 0.12);
	border-radius: 12px;
	box-shadow: 0 5px 16px rgba(24, 40, 70, 0.035);
	overflow: hidden;

	transition:
		box-shadow 0.25s ease,
		transform 0.25s ease;
}

.works-card:hover {
	box-shadow: 0 12px 28px rgba(24, 40, 70, 0.12);
	transform: translateY(-4px);
}

.works-card__link {
	display: flex;
	flex-direction: column;

	height: 100%;
	padding: 22px;

	color: inherit;
	text-decoration: none;
}

.works-card__link:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: -4px;
}

.works-card__image {
	position: relative;

	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: 16px;

	background: #eef1f4;
	overflow: hidden;
}

.works-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform 0.35s ease;
}

.works-card:hover .works-card__image img {
	transform: scale(1.025);
}

.works-card__no-image {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	color: #8b96a3;
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.works-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.works-card__category {
	margin: 0 0 20px;
	padding: 10px 12px;

	background: #e9e9e9;
	color: #333;
	border-radius: 5px;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
}

.works-card__client {
	margin: 0 0 14px;

	color: #111;
	font-size: clamp(17px, 1.45vw, 20px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.works-card__honorific {
	white-space: nowrap;
}

.works-card__description {
	margin: 0 0 20px;

	color: #333;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.75;
}

.works-card__tags {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px 10px;

	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.works-card__tag {
	min-width: 0;
	padding: 5px 6px;

	background: #fff;
	color: #222;
	border: 1px solid rgba(0, 48, 130, 0.55);
	border-radius: 8px;

	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	display: grid;
place-items: center;
	overflow-wrap: anywhere;
}

.works-archive-empty {
	margin: 0;
	padding: 72px 24px;

	background: rgba(255, 255, 255, 0.72);
	color: #555;
	border-radius: 10px;

	text-align: center;
}


/* =========================================================
   ページネーション
========================================================= */

.works-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.works-pagination__summary,
.works-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 42px;
	height: 42px;
	padding: 0 12px;

	background: #fff;
	color: #333;
	border: 1px solid #c5c9ce;

	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.works-pagination__summary {
	min-width: 74px;
}

.works-pagination a.page-numbers:hover {
	background: #edf3fa;
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.works-pagination .page-numbers.current {
	background: #fff;
	color: #111;
	border: 2px solid #222;
	font-weight: 700;
}

.works-pagination .page-numbers.dots {
	min-width: 28px;
	padding-right: 5px;
	padding-left: 5px;
	border-color: transparent;
}

.works-pagination__last {
	min-width: 76px !important;
}

.works-pagination a.page-numbers:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 2px;
}


.page-lead__thumbnail{
margin-top: 40px;
}

.page-lead__thumbnail img{
width: 100%;
height: auto;
display: block;
}

/* =========================================================
   制作実績一覧：タブレット
========================================================= */

@media screen and (min-width: 701px) and (max-width: 980px) {

	.works-filter__grid,
	.works-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.works-card__client {
		font-size: 19px;
	}
}


/* =========================================================
   制作実績一覧：スマートフォン
========================================================= */

@media screen and (max-width: 700px) {

	.works-archive-section {
		padding-top: 14px;
		padding-bottom: 52px;
	}

	.works-archive .faq-parent-tabs {
		margin-bottom: 24px;
	}

	.works-filter {
		margin-bottom: 30px;
		padding: 18px 15px;
		border-radius: 10px;
	}

	.works-filter__title {
		margin-bottom: 13px;
		font-size: 14px;
	}

	.works-filter__grid,
	.works-grid {
		grid-template-columns: 1fr;
	}

	.works-filter__grid {
		gap: 9px;
	}

	.works-filter__button {
		min-height: 54px;
		padding: 10px 12px 10px 15px;
		font-size: 14px;
	}

	.works-filter__count {
		min-width: 30px;
		height: 30px;
	}

	.works-results {
		margin-bottom: 36px;
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.works-grid {
		gap: 18px;
	}

	.works-card__link {
		padding: 18px;
	}

	.works-card__category {
		margin-bottom: 16px;
	}

	.works-card__client {
		font-size: 18px;
	}

	.works-card__description {
		font-size: 13px;
	}

	.works-pagination {
		gap: 5px;
	}

	.works-pagination__summary,
	.works-pagination .page-numbers {
		min-width: 38px;
		height: 38px;
		padding: 0 10px;
		font-size: 14px;
	}

	.works-pagination__summary {
		min-width: 68px;
	}
}


@media (prefers-reduced-motion: reduce) {

	.works-filter__button,
	.works-card,
	.works-card__image img {
		transition: none;
	}
}


/* =========================================================
   制作実績シングル：制作ギャラリー
========================================================= */

.work-gallery-section {
	--gallery-border-color: rgba(0, 48, 130, 0.16);
	--gallery-panel-color: #f7f9fc;
	--gallery-selected-color: #e5e5e5;
	--gallery-results-color: #e7f6fb;

	overflow: hidden;
	padding-top: 18px;
	padding-bottom: 0;
}

.work-gallery__heading {
	margin-bottom: 34px;
	text-align: center;
}

.work-gallery__heading .page-lead__mark {
	margin-bottom: 20px;
}

.work-gallery__title {
	margin: 0;
	color: var(--text-color-base);
	font-size: clamp(1.625rem, 1.313rem + 0.42vw, 1.875rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-align: center;
}


/* 端末別サブメニュー */

.work-gallery__tabs {
	display: flex;
	gap: 10px;

	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 22px 26px;

	background: var(--gallery-panel-color);
	border: 1px solid rgba(0, 48, 130, 0.12);
	border-radius: 14px;
	box-shadow: 0 5px 18px rgba(24, 40, 70, 0.04);
}

.work-gallery__tab {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 12px;

	min-width: 0;
	min-height: 64px;
	padding: 12px 16px;

	background: #fff;
	color: #151515;
	border: 1px solid var(--gallery-border-color);
	border-radius: 9px;
	box-shadow: 0 2px 8px rgba(24, 40, 70, 0.025);
	cursor: pointer;

	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.work-gallery__tab:hover {
	background: #f0f4f8;
	border-color: rgba(0, 48, 130, 0.3);
	box-shadow: 0 5px 14px rgba(24, 40, 70, 0.08);
	transform: translateY(-1px);
}

.work-gallery__tab.is-active,
.work-gallery__tab[aria-selected="true"] {
	background: var(--gallery-selected-color);
	color: #222;
	border-color: rgba(0, 48, 130, 0.42);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.035);
	transform: none;
}

.work-gallery__tab:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 2px;
}

.work-gallery__tab-icon {
	flex: 0 0 auto;
	width: 30px;
	color: var(--color-blue);
	font-size: 27px;
	line-height: 1;
	text-align: center;
}

.work-gallery__tab-label {
	min-width: 0;
	text-align: center;
	white-space: nowrap;
}


/* ギャラリー表示エリア */

.work-gallery__results {
	position: relative;
	margin-top: 36px;
	padding: 42px 0 40px;
	background: var(--gallery-results-color);
	border-top: 1px solid rgba(0, 88, 146, 0.32);
	border-bottom: 1px solid rgba(0, 88, 146, 0.32);
}

.work-gallery__panel[hidden] {
	display: none;
}

.work-gallery__carousel {
	width: 100%;
}

.work-gallery__viewport {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;

	background: #fff;
	border: 1px solid rgba(20, 50, 80, 0.09);
	border-radius: 12px;
	box-shadow: 0 5px 16px rgba(24, 40, 70, 0.035);

	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.work-gallery__viewport::-webkit-scrollbar {
	display: none;
}

.work-gallery__viewport:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 3px;
}

.work-gallery__track {
	--gallery-gap: 24px;
	--gallery-slide-size: calc((100% - (var(--gallery-gap) * 2)) / 3);

	display: flex;
	align-items: stretch;
	gap: var(--gallery-gap);

	width: 100%;
	min-width: 100%;
	padding: 26px 0 18px;
}

/* 最後の画像も左端まで送れるよう、末尾にスクロール余白を作る */
.work-gallery__track::after {
	display: block;
	flex: 0 0 calc(100% - var(--gallery-slide-size) - var(--gallery-gap));
	content: "";
}

.work-gallery__slide {
	display: flex;
	flex: 0 0 var(--gallery-slide-size);
	flex-direction: column;
	min-width: 0;
	margin: 0;
	background: #fff;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.work-gallery__media {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f5f6f7;
	color: inherit;
	text-decoration: none;
}

.work-gallery__media:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: -3px;
}

.work-gallery__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
	transition: transform 0.35s ease;
}

.work-gallery__media:hover img {
	transform: scale(1.02);
}

.work-gallery__panel[data-gallery-device="smartphone"] .work-gallery__media {
	aspect-ratio: 3 / 4;
}

.work-gallery__caption {
	margin: 0;
	padding: 22px 14px 8px;
	color: #111;
	font-size: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-align: center;
	overflow-wrap: anywhere;
}


/* 登録画像数に連動するナビゲーション */

.work-gallery__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 22px;
}

.work-gallery__dot {
	display: block;
	width: 12px;
	height: 12px;
	padding: 0;
	background: #c8cdd2;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.work-gallery__dot:hover {
	background: #8d99a5;
	transform: scale(1.14);
}

.work-gallery__dot.is-active,
.work-gallery__dot[aria-pressed="true"] {
	background: var(--color-blue);
}

.work-gallery__dot:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 3px;
}


/* 制作ギャラリー：タブレット */

@media screen and (max-width: 980px) {
	.work-gallery__tabs {
		padding: 18px;
	}

	.work-gallery__track {
		--gallery-gap: 20px;
		--gallery-slide-size: calc((100% - var(--gallery-gap)) / 2);
	}
}


/* 制作ギャラリー：スマートフォン */

@media screen and (max-width: 700px) {
	.work-gallery-section {
		padding-top: 8px;
	}

	.work-gallery__heading {
		margin-bottom: 26px;
	}

	.work-gallery__title {
		font-size: clamp(1.5rem, 1.184rem + 1.58vw, 1.875rem);
	}

	.work-gallery__tabs {
		gap: 6px;
		padding: 10px;
		border-radius: 10px;
	}

	.work-gallery__tab {
		flex-direction: column;
		gap: 7px;
		min-height: 76px;
		padding: 10px 5px;
		font-size: 12px;
	}

	.work-gallery__tab-icon {
		width: auto;
		font-size: 24px;
	}

	.work-gallery__results {
		margin-top: 26px;
		padding: 26px 0 30px;
	}

	.work-gallery__viewport {
		border-radius: 9px;
	}

	.work-gallery__track {
		--gallery-gap: 14px;
		--gallery-slide-size: 100%;
		padding-top: 18px;
		padding-bottom: 14px;
	}

	.work-gallery__track::after {
		display: none;
	}

	.work-gallery__caption {
		padding-top: 16px;
		font-size: 15px;
	}

	.work-gallery__pagination {
		gap: 10px;
		margin-top: 18px;
	}

	.work-gallery__dot {
		width: 11px;
		height: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.work-gallery__tab,
	.work-gallery__media img,
	.work-gallery__dot {
		transition: none;
	}

	.work-gallery__viewport {
		scroll-behavior: auto;
	}
}


/* =========================================================
   制作実績シングル：制作概要
========================================================= */

.work-summary-section {
	padding-top: 72px;
	padding-bottom: 56px;
}

.work-summary__external-icon {
	margin-left: 0.45em;
	font-size: 0.78em;
}

.company-profile__value--work-types {
	display: flex;
	align-items: center;
}

.work-summary__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.work-summary__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 6px 18px;
	background: #fff;
	color: #111;
	border: 1px solid #111;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.04em;
	text-align: center;
}


/* =========================================================
   制作実績シングル：同じカテゴリーの前後移動
========================================================= */

.work-entry-navigation-section {
	padding-top: 16px;
	padding-bottom: 80px;
	background: #fff;
}

.work-entry-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

.work-entry-navigation__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 180px;
	min-height: 54px;
	padding: 13px 24px;
	background: #fff;
	color: var(--color-blue);
	border: 1px solid var(--color-blue);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 34, 123, 0.08);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.work-entry-navigation__button:hover {
	background: var(--color-blue);
	color: #fff;
	box-shadow: 0 8px 20px rgba(0, 34, 123, 0.17);
	transform: translateY(-2px);
}

.work-entry-navigation__button:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 3px;
}

.work-entry-navigation__button--next {
	margin-left: auto;
}

@media screen and (max-width: 700px) {
	.work-summary-section {
		padding-top: 48px;
		padding-bottom: 42px;
	}

	.company-profile__value--work-types {
		display: block;
	}

	.work-summary__tags {
		gap: 8px;
	}

	.work-summary__tag {
		min-height: 34px;
		padding: 5px 14px;
		font-size: 12px;
	}

	.work-entry-navigation-section {
		padding-top: 8px;
		padding-bottom: 56px;
	}

	.work-entry-navigation {
		gap: 10px;
	}

	.work-entry-navigation__button {
		min-width: 0;
		min-height: 50px;
		padding: 11px 17px;
		font-size: 13px;
	}
}

@media screen and (max-width: 380px) {
	.work-entry-navigation__button {
		gap: 8px;
		padding-right: 13px;
		padding-left: 13px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.work-entry-navigation__button {
		transition: none;
	}
}

/* =========================================
   FRONT PAGE RESPONSIVE ADJUSTMENTS
   既存のmessage / selling / buttonコンポーネントを流用
========================================= */

/* 代表メッセージ：PCでは3項目の見出しを1行に保つ */
@media screen and (min-width: 1200px) {
	.message-flow__list {
		gap: 28px;
	}

	.message-flow__title {
		font-size: clamp(1.05rem, 0.86rem + 0.25vw, 1.18rem);
		letter-spacing: 0.03em;
		white-space: nowrap;
	}
}

/* WEBSITE / VIDEO / PRINT SIGNBOARD 共通 */
.selling-web,
.selling-video,
.selling-print {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	max-width: 1920px;
	margin-right: auto;
	margin-left: auto;
	padding: 60px 0;
	background: #fff;
}

.selling-web__inner,
.selling-video__inner,
.selling-print__inner {
	position: relative;
	z-index: 2;
	width: min(calc(100% - 80px), 1200px);
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
}

.selling-web__head,
.selling-video__head,
.selling-print__head {
	position: relative;
	z-index: 2;
	max-width: 54%;
	margin-bottom: 40px;
}

.selling-video__head {
	margin-left: auto;
	padding-left: 0;
}

.selling-web__visual,
.selling-video__visual,
.selling-print__visual {
	position: absolute;
	top: 0;
	z-index: 0;
	width: 50%;
	max-width: 960px;
	height: 640px;
	margin: 0;
	overflow: hidden;
	opacity: 0.96;
	pointer-events: none;
}

.selling-web__visual,
.selling-print__visual {
	right: 0;
	left: auto;
}

.selling-video__visual {
	right: auto;
	left: 0;
}

.selling-web__movie,
.selling-video__movie,
.selling-print__movie {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.selling-web__movie,
.selling-print__movie {
	object-position: center right;
}

.selling-video__movie {
	object-position: left center;
}

.selling__points {
	box-sizing: border-box;
	width: min(calc(100% - 80px), 1200px);
	padding: 0;
}

.selling-web__button-wrap,
.selling-video__button-wrap,
.selling-print__button-wrap {
	position: relative;
	z-index: 2;
}

/* お知らせ */
.front-news {
	width: 100%;
	max-width: 1920px;
	margin-right: auto;
	margin-left: auto;
	padding: 76px 0 88px;
	background: #f6efe3;
	color: var(--text-color-base);
}

.front-news__inner {
	width: min(calc(100% - 80px), 1200px);
	margin-right: auto;
	margin-left: auto;
}

.front-news__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 34px;
}

.front-news__head .section__eyebrow {
	margin: 0;
}

.front-news__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(2rem, 1.6rem + 0.7vw, 2.75rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	color: var(--color-blue);
}

.front-news__list {
	border-top: 1px solid rgba(0, 34, 123, 0.2);
}

.front-news__item {
	display: grid;
	grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
	gap: 42px;
	padding: 30px 0;
	border-bottom: 1px solid rgba(0, 34, 123, 0.2);
}

.front-news__meta {
	display: flex;
	align-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 12px;
	font-size: 0.875rem;
	line-height: 1.5;
}

.front-news__date {
	font-family: var(--font-en);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-blue);
}

.front-news__categories {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 10px;
	border: 1px solid rgba(0, 34, 123, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.56);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-blue);
}

.front-news__new {
	display: inline-grid;
	place-items: center;
	min-width: 46px;
	height: 28px;
	padding: 0 8px;
	border: 1px solid var(--color-red);
	background: var(--color-red);
	font-family: var(--font-en);
	font-size: 0.7rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.08em;
	color: #fff;
}

.front-news__body {
	min-width: 0;
}

.front-news__item-title {
	margin: 0;
	font-size: clamp(1.125rem, 1.03rem + 0.15vw, 1.25rem);
	font-weight: 800;
	line-height: 1.65;
	letter-spacing: 0.045em;
	color: var(--color-blue);
}

.front-news__item-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.front-news__item-title a:hover,
.front-news__item-title a:focus-visible {
	color: var(--color-red);
	opacity: 1;
}

.front-news__excerpt {
	margin-top: 10px;
	font-size: 0.95rem;
	line-height: 1.9;
	letter-spacing: 0.03em;
	color: #333;
}

.front-news__excerpt > :first-child {
	margin-top: 0;
}

.front-news__excerpt > :last-child {
	margin-bottom: 0;
}

.front-news__button-wrap {
	margin-top: 42px;
}

.front-news__empty {
	padding: 30px 0;
	border-top: 1px solid rgba(0, 34, 123, 0.2);
	border-bottom: 1px solid rgba(0, 34, 123, 0.2);
}

/* 大きめタブレット：1199px〜981px */
@media screen and (max-width: 1199px) and (min-width: 981px) {
	.message-flow {
		width: 100%;
		margin: 34px 0 0;
		overflow: visible;
	}

	.message-flow__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		padding: 0;
		overflow: visible;
	}

	.message-flow__item {
		display: flex;
		width: auto;
		min-width: 0;
		max-width: none;
		flex-direction: column;
		padding: 22px 20px 24px;
		border-radius: 18px;
		background: rgba(255, 255, 255, 0.76);
		box-shadow: 0 10px 24px rgba(0, 34, 123, 0.08);
	}

	.message-flow__item:not(:last-child)::after,
	.message-flow__image::after {
		display: none;
		content: none;
	}

	.message-flow__number {
		position: static;
		margin-bottom: 12px;
		text-align: left;
	}

	.message-flow__image {
		position: relative;
		max-width: 200px;
	}

	.message-flow__title {
		line-height: 1.45;
		white-space: normal;
	}

	.selling-web,
	.selling-video,
	.selling-print {
		padding: 56px 0 64px;
	}

	.selling-web__inner,
	.selling-video__inner,
	.selling-print__inner,
	.selling__points,
	.front-news__inner {
		width: calc(100% - 80px);
	}

	.selling-web__visual,
	.selling-video__visual,
	.selling-print__visual {
		width: 48%;
		height: 500px;
		opacity: 0.82;
	}

	.selling-web__head,
	.selling-video__head,
	.selling-print__head {
		max-width: 52%;
	}

	.selling__lead {
		font-size: 1.05rem;
		line-height: 1.9;
	}

	.selling__point-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.front-news__item {
		grid-template-columns: 190px minmax(0, 1fr);
		gap: 32px;
	}
}

/* 標準タブレット：980px〜701px */
@media screen and (max-width: 980px) and (min-width: 701px) {
	.message-flow {
		width: 100%;
		margin: 34px 0 0;
		overflow: visible;
	}

	.message-flow__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		padding: 0;
		overflow: visible;
	}

	.message-flow__item {
		display: flex;
		width: auto;
		min-width: 0;
		max-width: none;
		flex: none;
		flex-direction: column;
		padding: 20px 18px 22px;
	}

	.message-flow__item:not(:last-child)::after,
	.message-flow__image::after {
		display: none;
		content: none;
	}

	.message-flow__number {
		position: static;
		margin-bottom: 10px;
		text-align: left;
	}

	.message-flow__image {
		position: relative;
		max-width: 190px;
	}

	.message-flow__title {
		line-height: 1.45;
		white-space: normal;
	}

	.selling-web,
	.selling-video,
	.selling-print {
		display: block;
		padding: 0 0 64px;
	}

	.selling-web__visual,
	.selling-video__visual,
	.selling-print__visual {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		width: 100%;
		max-width: none;
		height: 380px;
		margin: 0 0 24px;
		border-radius: 0;
		opacity: 1;
	}

	.selling-web__inner,
	.selling-video__inner,
	.selling-print__inner,
	.selling__points,
	.front-news__inner {
		width: calc(100% - 64px);
	}

	.selling-web__head,
	.selling-video__head,
	.selling-print__head {
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
		padding-left: 0;
	}

	.selling__point-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.front-news {
		padding: 64px 0 72px;
	}

	.front-news__item {
		grid-template-columns: 160px minmax(0, 1fr);
		gap: 26px;
	}
}

/* 大きめスマホ：700px〜481px */
@media screen and (max-width: 700px) and (min-width: 481px) {
	.message-flow {
		width: 100%;
		margin: 30px 0 0;
		overflow: visible;
	}

	.message-flow__list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0;
		overflow: visible;
	}

	.message-flow__item {
		width: auto;
		min-width: 0;
		max-width: none;
		flex: none;
	}

	.selling-web,
	.selling-video,
	.selling-print {
		display: block;
		padding: 0 0 58px;
	}

	.selling-web__visual,
	.selling-video__visual,
	.selling-print__visual {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		width: 100%;
		max-width: none;
		height: 320px;
		margin: 0 0 22px;
		border-radius: 0;
		opacity: 1;
	}

	.selling-web__inner,
	.selling-video__inner,
	.selling-print__inner,
	.selling__points,
	.front-news__inner {
		width: calc(100% - 48px);
	}

	.selling-web__head,
	.selling-video__head,
	.selling-print__head {
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
		padding-left: 0;
	}

	.selling__point-list {
		grid-template-columns: 1fr;
	}

	.front-news {
		padding: 56px 0 64px;
	}

	.front-news__head {
		display: block;
	}

	.front-news__title {
		margin-top: 12px;
	}

	.front-news__item {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 26px 0;
	}

	.front-news__button-wrap .unison-button {
		width: 100%;
	}
}

/* スマホ：480px〜320px */
@media screen and (max-width: 480px) {
	.message-flow {
		width: 100%;
		margin: 28px 0 0;
		overflow: visible;
	}

	.message-flow__list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 14px;
		width: 100%;
		padding: 0;
		overflow: visible;
	}

	.message-flow__item {
		width: auto;
		min-width: 0;
		max-width: none;
		flex: none;
		padding: 20px 14px 22px;
	}

	.selling-web,
	.selling-video,
	.selling-print {
		display: block;
		padding: 0 0 52px;
	}

	.selling-web__visual,
	.selling-video__visual,
	.selling-print__visual {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		width: 100%;
		max-width: none;
		height: clamp(240px, 62.5vw, 300px);
		margin: 0 0 20px;
		border-radius: 0;
		opacity: 1;
	}

	.selling-web__inner,
	.selling-video__inner,
	.selling-print__inner,
	.selling__points,
	.front-news__inner {
		width: calc(100% - 32px);
	}

	.selling-web__head,
	.selling-video__head,
	.selling-print__head {
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
		padding-left: 0;
	}

	.selling__point-list {
		grid-template-columns: 1fr;
	}

	.selling-web__button-wrap .unison-button,
	.selling-video__button-wrap .unison-button,
	.selling-print__button-wrap .unison-button,
	.front-news__button-wrap .unison-button {
		width: 100%;
	}

	.front-news {
		padding: 48px 0 56px;
	}

	.front-news__head {
		display: block;
		margin-bottom: 26px;
	}

	.front-news__title {
		margin-top: 10px;
		font-size: 2rem;
	}

	.front-news__item {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 24px 0;
	}

	.front-news__meta {
		gap: 8px 10px;
	}

	.front-news__item-title {
		font-size: 1.0625rem;
	}

	.front-news__excerpt {
		font-size: 0.9rem;
		line-height: 1.85;
	}
}


/* =========================================================
   ちいサポ：SCFメニューカード／カルーセル
========================================================= */

.chiisapo-page #chiisapo-main,
.chiisapo-page #chiisapo-main h1,
.chiisapo-page #chiisapo-main h2,
.chiisapo-page #chiisapo-main h3,
.chiisapo-page #chiisapo-main h4,
.chiisapo-page #chiisapo-main h5,
.chiisapo-page #chiisapo-main h6,
.chiisapo-page .chiisapo-service-modals,
.chiisapo-page .chiisapo-service-modals h1,
.chiisapo-page .chiisapo-service-modals h2,
.chiisapo-page .chiisapo-service-modals h3,
.chiisapo-page .chiisapo-service-modals h4,
.chiisapo-page .chiisapo-service-modals h5,
.chiisapo-page .chiisapo-service-modals h6 {
	font-family: var(--font-base);
}

.chiisapo-page .chiisapo-steps__inner {
	width: 100%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}

.chiisapo-page .chiisapo-service-menu {
	overflow: hidden;
	padding: clamp(72px, 8vw, 120px) 0;
	background:
		radial-gradient(circle at 12% 12%, rgba(47, 103, 165, 0.08), transparent 31%),
		linear-gradient(180deg, #fbfcfe 0%, #f5f8fb 100%);
	font-family: var(--font-base);
}

.chiisapo-page .chiisapo-service-menu__inner {
	width: 100%;
	max-width: 2560px;
}

.chiisapo-page .chiisapo-service-menu__header {
	max-width: 820px;
	margin: 0 auto clamp(36px, 5vw, 64px);
	text-align: center;
}

.chiisapo-page .chiisapo-service-menu__english {
	margin: 0 0 12px;
	color: var(--color-blue);
	font-family: var(--font-en);
	font-size: clamp(20px, 2.1vw, 30px);
	line-height: 1;
	letter-spacing: 0.12em;
}

.chiisapo-page .chiisapo-service-menu__title {
	margin: 0;
	color: #173755;
	font-family: var(--font-base);
	font-size: clamp(28px, 3.2vw, 46px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.045em;
}

.chiisapo-page .chiisapo-service-menu__lead {
	max-width: 980px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 18px;
	color: #111;
	font-size: clamp(1rem, 1.15vw, 1.2rem);
	font-weight: 600;
	line-height: 1.75;
	text-align: center;
}

.chiisapo-page .chiisapo-service-menu__lead p {
	margin: 0;
	text-wrap: pretty;
}

.chiisapo-page .chiisapo-service-rail {
	position: relative;
}

.chiisapo-page .chiisapo-service-rail__viewport {
	width: 100%;
	overflow: hidden;
	padding: 0 4px 48px;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

body.chiisapo-page .chiisapo-service-rail__viewport {
	padding-top: 0;
}

.chiisapo-page .chiisapo-service-rail.has-overflow .chiisapo-service-rail__viewport {
	cursor: grab;
}

.chiisapo-page .chiisapo-service-rail.is-dragging .chiisapo-service-rail__viewport {
	cursor: grabbing;
}

.chiisapo-page .chiisapo-service-rail__track {
	--chiisapo-rail-gap: 22px;
	display: flex;
	align-items: stretch;
	gap: var(--chiisapo-rail-gap);
	width: 100%;
	will-change: transform;
}

.chiisapo-page .chiisapo-service-rail__slide {
	display: flex;
	flex: 0 0 calc((100% - 66px) / 4);
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 530px;
}

.chiisapo-page .chiisapo-menu-card {
	--chiisapo-card-scale: 1;
	position: relative;
	display: flex;
	width: 100%;
	min-width: 0;
	min-height: 470px;
	flex-direction: column;
	margin: 0;
	padding: 32px 24px 25px 30px;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 18px;
	background: #fff;
	color: #263545;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: pointer;
	transform: translateY(0) scale(var(--chiisapo-card-scale));
	transform-origin: center;
	transition:
		transform 0.3s ease,
		border-color 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.chiisapo-page .chiisapo-menu-card::before {
	position: absolute;
	inset: 0 auto 0 0;
	width: 9px;
	background: var(--chiisapo-menu-color, #2f67a5);
	content: "";
}

.chiisapo-page .chiisapo-menu-card--featured {
	box-shadow:
		0 20px 38px rgba(19, 43, 68, 0.14),
		0 5px 12px rgba(19, 43, 68, 0.08);
}

.chiisapo-page .chiisapo-menu-card--featured:hover {
	box-shadow:
		0 26px 48px rgba(19, 43, 68, 0.2),
		0 8px 18px rgba(19, 43, 68, 0.1);
}

.chiisapo-page .chiisapo-menu-card:focus-visible {
	outline: 4px solid color-mix(in srgb, var(--chiisapo-menu-color, #2f67a5) 45%, white);
	outline-offset: 4px;
}

.chiisapo-page .chiisapo-menu-card__category {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	max-width: 100%;
	margin-bottom: 18px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--chiisapo-menu-soft, #edf5fc);
	color: var(--chiisapo-menu-dark, #194673);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.05em;
}

.chiisapo-page .chiisapo-menu-card__thumbnail {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 18px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--chiisapo-menu-soft, #edf5fc);
}

.chiisapo-page .chiisapo-menu-card__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.chiisapo-page .chiisapo-menu-card:hover .chiisapo-menu-card__thumbnail img {
	transform: scale(1.045);
}

.chiisapo-page .chiisapo-menu-card__title {
	position: relative;
	z-index: 1;
	display: -webkit-box;
	overflow: hidden;
	color: #173755;
	font-family: var(--font-base);
	font-size: clamp(20px, 1.6vw, 27px);
	font-weight: 700;
	line-height: 1.52;
	letter-spacing: 0.035em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.chiisapo-page .chiisapo-menu-card__description {
	display: -webkit-box;
	margin-top: 15px;
	overflow: hidden;
	color: #667586;
	font-size: 13px;
	line-height: 1.75;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.chiisapo-page .chiisapo-menu-card__footer {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	width: 100%;
	margin-top: auto;
	padding-top: 26px;
}

.chiisapo-page .chiisapo-menu-card__price {
	display: flex;
	min-width: 0;
	flex: 1 1 116px;
	flex-direction: column;
}

.chiisapo-page .chiisapo-menu-card__price-label {
	margin-bottom: 3px;
	color: #7b8794;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.35;
}

.chiisapo-page .chiisapo-menu-card__price-value {
	display: flex;
	min-width: 0;
	align-items: baseline;
	flex-wrap: wrap;
	color: var(--chiisapo-menu-color, #2f67a5);
	line-height: 1;
}

.chiisapo-page .chiisapo-menu-card__price-number {
	font-family: var(--font-en);
	font-size: clamp(29px, 2.15vw, 38px);
	font-weight: 400;
	letter-spacing: 0.025em;
}

.chiisapo-page .chiisapo-menu-card__price-prefix,
.chiisapo-page .chiisapo-menu-card__price-suffix {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

.chiisapo-page .chiisapo-menu-card__price-text {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.chiisapo-page .chiisapo-menu-card__detail {
	display: inline-flex;
	min-width: 0;
	min-height: 43px;
	flex: 0 1 108px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 10px;
	border: 1px solid var(--chiisapo-menu-color, #2f67a5);
	border-radius: 999px;
	background: var(--chiisapo-menu-color, #2f67a5);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}

.chiisapo-page .chiisapo-menu-card__detail i {
	flex: 0 0 auto;
	font-size: 10px;
}

.chiisapo-page .chiisapo-service-rail__pagination {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 13px;
	margin-top: 4px;
}

.chiisapo-page .chiisapo-service-rail.is-static .chiisapo-service-rail__track {
	justify-content: center;
	transform: none !important;
}

.chiisapo-page .chiisapo-service-rail:not(.has-overflow) .chiisapo-service-rail__pagination {
	display: none;
}

.chiisapo-page .chiisapo-service-rail__dot {
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #8393a3;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.chiisapo-page .chiisapo-service-rail__dot.is-active {
	border-color: var(--color-blue);
	background: var(--color-blue);
	transform: scale(1.35);
}

.chiisapo-page .chiisapo-service-rail__dot:focus-visible {
	outline: 3px solid rgba(0, 34, 123, 0.28);
	outline-offset: 4px;
}

.chiisapo-page .chiisapo-service-menu__more {
	margin-top: clamp(42px, 6vw, 74px);
}

.chiisapo-page .chiisapo-service-menu__toggle {
	display: flex;
	min-width: min(100%, 320px);
	min-height: 64px;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 0 auto;
	padding: 14px 30px;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #173755;
	border-radius: 999px;
	background: #fff;
	color: #173755;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.07em;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.chiisapo-page .chiisapo-service-menu__toggle i {
	font-size: 14px;
	transition: transform 0.25s ease;
}

.chiisapo-page .chiisapo-service-menu__toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.chiisapo-page .chiisapo-service-menu__toggle:hover,
.chiisapo-page .chiisapo-service-menu__toggle:focus-visible {
	background: #173755;
	color: #fff;
}

.chiisapo-page .chiisapo-service-menu__toggle:focus-visible {
	outline: 3px solid rgba(0, 34, 123, 0.28);
	outline-offset: 4px;
}

.chiisapo-page .chiisapo-service-menu__additional[hidden] {
	display: none !important;
}

.chiisapo-page .chiisapo-service-menu__additional {
	display: grid;
	width: min(100%, 1200px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 42px auto 0;
	opacity: 0;
	transform: translateY(-12px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

.chiisapo-page .chiisapo-service-menu__additional.is-open {
	opacity: 1;
	transform: translateY(0);
}

.chiisapo-page .chiisapo-menu-card--additional {
	min-height: 430px;
	border: 2px solid var(--chiisapo-menu-color, #2f67a5);
	border-left-width: 2px;
	border-radius: 14px;
	box-shadow: none;
	transform: none;
}

.chiisapo-page .chiisapo-menu-card--additional::before {
	width: 7px;
}

.chiisapo-page .chiisapo-menu-card--additional:hover {
	background: color-mix(in srgb, var(--chiisapo-menu-soft, #edf5fc) 48%, white);
	transform: translateY(-3px);
}


/* 1199px以下：2枚表示＋丸ナビゲーション */

@media screen and (max-width: 1199px) {
	.chiisapo-page .chiisapo-service-menu__inner {
		max-width: 1080px;
	}

	.chiisapo-page .chiisapo-service-rail__slide {
		flex-basis: calc((100% - 22px) / 2);
	}

	.chiisapo-page .chiisapo-service-rail__pagination {
		display: flex;
	}

	.chiisapo-page .chiisapo-service-menu__additional {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* 980px以下：2枚表示 */

@media screen and (max-width: 980px) {
	.chiisapo-page .chiisapo-service-menu__lead {
		max-width: 46rem;
		text-align: left;
		line-break: strict;
		overflow-wrap: break-word;
		word-break: normal;
		word-break: auto-phrase;
		text-wrap: pretty;
	}

	.chiisapo-page .chiisapo-service-rail__slide {
		flex-basis: calc((100% - 22px) / 2);
	}

	.chiisapo-page .chiisapo-menu-card {
		padding-right: 28px;
		padding-left: 34px;
	}

	.chiisapo-page .chiisapo-menu-card__title {
		font-size: clamp(22px, 3vw, 28px);
	}

	.chiisapo-page .chiisapo-menu-card__price-number {
		font-size: clamp(32px, 4.3vw, 40px);
	}
}


/* 700px以下：中央を大きく、左右のカードを見切れ表示 */

@media screen and (max-width: 700px) {
	.chiisapo-page .chiisapo-service-menu {
		padding: 64px 0 72px;
	}

	.chiisapo-page .chiisapo-service-menu__header {
		margin-bottom: 28px;
		padding: 0 4px;
	}

	.chiisapo-page .chiisapo-service-menu__english {
		font-size: 22px;
	}

	.chiisapo-page .chiisapo-service-menu__title {
		font-size: clamp(25px, 7vw, 34px);
	}

	.chiisapo-page .chiisapo-service-menu__lead {
		text-align: left;
	}

	.chiisapo-page .chiisapo-service-rail {
		width: calc(100% + (2 * var(--container-padding-sp)));
		margin-left: calc(-1 * var(--container-padding-sp));
	}

	.chiisapo-page .chiisapo-service-rail__viewport {
		padding-top: 0;
		padding-bottom: 34px;
	}

	.chiisapo-page .chiisapo-service-rail__track {
		--chiisapo-rail-gap: 14px;
	}

	.chiisapo-page .chiisapo-service-rail__slide {
		flex-basis: clamp(250px, 76vw, 360px);
		min-height: 512px;
	}

	.chiisapo-page .chiisapo-menu-card {
		min-height: 458px;
		padding: 30px 22px 24px 28px;
	}

	.chiisapo-page .chiisapo-menu-card__category {
		margin-bottom: 22px;
		font-size: 11px;
	}

	.chiisapo-page .chiisapo-menu-card__title {
		font-size: 23px;
	}

	.chiisapo-page .chiisapo-menu-card__description {
		font-size: 12px;
	}

	.chiisapo-page .chiisapo-menu-card__price-number {
		font-size: 34px;
	}

	.chiisapo-page .chiisapo-menu-card__footer {
		gap: 9px;
	}

	.chiisapo-page .chiisapo-menu-card__detail {
		flex-basis: 102px;
		padding-right: 8px;
		padding-left: 8px;
		font-size: 10px;
	}

	.chiisapo-page .chiisapo-service-rail__pagination {
		gap: 12px;
		margin-top: 8px;
	}

	.chiisapo-page .chiisapo-service-rail__dot {
		width: 11px;
		height: 11px;
	}

	.chiisapo-page .chiisapo-service-menu__more {
		margin-top: 44px;
	}

	.chiisapo-page .chiisapo-service-menu__toggle {
		min-width: min(100%, 290px);
		min-height: 58px;
		padding: 12px 24px;
		font-size: 14px;
	}

	.chiisapo-page .chiisapo-service-menu__additional {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-top: 32px;
	}

	.chiisapo-page .chiisapo-menu-card--additional {
		min-height: 410px;
		transform: none;
	}
}

@media screen and (max-width: 380px) {
	.chiisapo-page .chiisapo-service-rail__slide {
		flex-basis: 250px;
	}

	.chiisapo-page .chiisapo-menu-card__footer {
		align-items: stretch;
		flex-direction: column;
	}

	.chiisapo-page .chiisapo-menu-card__detail {
		width: 100%;
		min-height: 40px;
		flex-basis: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chiisapo-page .chiisapo-menu-card,
	.chiisapo-page .chiisapo-service-rail__dot,
	.chiisapo-page .chiisapo-service-menu__toggle,
	.chiisapo-page .chiisapo-service-menu__toggle i,
	.chiisapo-page .chiisapo-service-menu__additional {
		transition: none;
	}

	.chiisapo-page .chiisapo-menu-card__thumbnail img {
		transition: none;
	}
}


/* =========================================================
   ちいサポ：STEPセクションの配置調整
========================================================= */

/* PC：右側の見出し・説明を中央に揃え、意図した3行以外では改行しない */
@media screen and (min-width: 1200px) {
	body.chiisapo-page .chiisapo-steps__sticky {
		padding-top: clamp(12px, 1.5vw, 24px);
		padding-bottom: clamp(12px, 1.5vw, 24px);
	}

	body.chiisapo-page .chiisapo-steps__side {
		min-width: 0;
		text-align: center;
	}

	body.chiisapo-page .chiisapo-steps__side-title {
		margin-right: auto;
		margin-left: auto;
		font-size: clamp(30px, 2.25vw, 37px);
		line-height: 1.7;
		letter-spacing: 0.02em;
		text-align: center;
		white-space: nowrap;
	}

	body.chiisapo-page .chiisapo-steps__side-description {
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	body.chiisapo-page .chiisapo-steps__side-description p {
		margin-right: auto;
		margin-left: auto;
	}

	/* PCのメニューカルーセルも上下の余白を詰める */
	body.chiisapo-page .chiisapo-service-rail__viewport {
		padding-top: 0;
		padding-bottom: 26px;
	}
}

/* MV：ロゴと補足文を一組として中央に置き、本文は左揃え */
@media screen and (min-width: 701px) {
	body.chiisapo-page .chiisapo-mv__brand {
		width: fit-content;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	body.chiisapo-page .chiisapo-mv__brand .chiisapo-mv__eyebrow,
	body.chiisapo-page .chiisapo-mv__brand .chiisapo-mv__logo {
		margin-right: auto;
		margin-left: auto;
	}
}

@media screen and (min-width: 1200px) {
	body.chiisapo-page .chiisapo-mv__content {
		text-align: left;
	}
}

/* タブレット：ロゴ一式をMV幅の約60%に縮小 */
@media screen and (min-width: 701px) and (max-width: 1199px) {
	body.chiisapo-page .chiisapo-mv__brand {
		width: 60%;
	}

	body.chiisapo-page .chiisapo-mv__brand .chiisapo-mv__logo,
	body.chiisapo-page .chiisapo-mv__brand .chiisapo-mv__logo img {
		width: 100%;
		max-width: none;
		height: auto;
	}

	body.chiisapo-page .chiisapo-mv__brand .chiisapo-mv__eyebrow {
		font-size: clamp(14px, 1.9vw, 22px);
	}
}

/* 1199px以下：STEPカードと説明欄を縦並びにして中央へ配置 */
@media screen and (max-width: 1199px) {
	body.chiisapo-page .chiisapo-steps__inner {
		display: flex;
		width: 100%;
		max-width: 760px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: clamp(32px, 5vw, 52px);
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	body.chiisapo-page .chiisapo-steps__stage,
	body.chiisapo-page .chiisapo-steps__side {
		width: min(100%, 680px);
		margin-right: auto;
		margin-left: auto;
	}

	body.chiisapo-page .chiisapo-steps__side {
		text-align: center;
	}

	body.chiisapo-page .chiisapo-steps__side-title,
	body.chiisapo-page .chiisapo-steps__side-description {
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}
}

/* 小さいスマホ：STEPセクションの左右に20pxを確保 */
@media screen and (max-width: 480px) {
	body.chiisapo-page .chiisapo-steps__inner {
		max-width: none;
		padding-right: 20px;
		padding-left: 20px;
		box-sizing: border-box;
	}

	body.chiisapo-page .chiisapo-steps__stage,
	body.chiisapo-page .chiisapo-steps__side {
		width: 100%;
	}
}


/* =========================================================
   ちいサポ：固定メニュー／青背景
   SCF・カルーセル・モーダルを使用しない固定HTML用
========================================================= */

.chiisapo-page #chiisapo-main,
.chiisapo-page #chiisapo-main h1,
.chiisapo-page #chiisapo-main h2,
.chiisapo-page #chiisapo-main h3,
.chiisapo-page #chiisapo-main h4,
.chiisapo-page #chiisapo-main h5,
.chiisapo-page #chiisapo-main h6 {
	font-family: var(--font-base);
}

.chiisapo-page .chiisapo-blue,
.chiisapo-page .chiisapo-blue *,
.chiisapo-page .chiisapo-blue *::before,
.chiisapo-page .chiisapo-blue *::after {
	box-sizing: border-box;
}

.chiisapo-page .chiisapo-blue {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	scroll-margin-top: 88px;
	padding: clamp(76px, 8vw, 132px) 0;
	background:
		radial-gradient(circle at 7% 10%, rgba(46, 160, 255, 0.32), transparent 27%),
		radial-gradient(circle at 92% 88%, rgba(0, 186, 214, 0.2), transparent 31%),
		linear-gradient(145deg, #063c91 0%, #052e75 48%, #031f58 100%);
	color: #fff;
	font-family: var(--font-base);
}

.chiisapo-page .chiisapo-blue::before,
.chiisapo-page .chiisapo-blue::after {
	position: absolute;
	z-index: -1;
	width: 440px;
	height: 440px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.chiisapo-page .chiisapo-blue::before {
	top: 230px;
	left: -270px;
}

.chiisapo-page .chiisapo-blue::after {
	right: -270px;
	bottom: 190px;
}

.chiisapo-page .chiisapo-blue__inner {
	position: relative;
	z-index: 1;
	width: min(calc(100% - 80px), 1200px);
	margin-right: auto;
	margin-left: auto;
}

.chiisapo-page .chiisapo-blue__header {
	max-width: 920px;
	margin: 0 auto clamp(60px, 7vw, 96px);
	text-align: center;
}

.chiisapo-page .chiisapo-blue__logo {
	display: block;
	width: min(420px, 78%);
	height: auto;
	margin: 0 auto 28px;
	padding: 18px 25px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 18px 45px rgba(0, 12, 42, 0.18);
}

.chiisapo-page .chiisapo-blue__eyebrow,
.chiisapo-page .chiisapo-blue__menu-kicker {
	margin: 0;
	color: #ffd35d;
	font-family: var(--font-en);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.18em;
}

.chiisapo-page .chiisapo-blue__title {
	margin: 16px 0 0;
	color: #fff;
	font-size: clamp(31px, 4vw, 54px);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.045em;
	text-wrap: balance;
}

.chiisapo-page .chiisapo-blue__lead {
	margin: 26px 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.035em;
	text-wrap: pretty;
}

.chiisapo-page .chiisapo-blue__menu-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 3vw, 34px);
	margin-bottom: 36px;
	text-align: left;
}

.chiisapo-page .chiisapo-blue__ribbon {
	width: clamp(90px, 10vw, 132px);
	height: auto;
	object-fit: contain;
}

.chiisapo-page .chiisapo-blue__menu-heading h3 {
	margin: 6px 0 0;
	color: #fff;
	font-size: clamp(28px, 3.25vw, 43px);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.06em;
}

.chiisapo-page .chiisapo-plan-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
}

.chiisapo-page .chiisapo-plan-card {
	--chiisapo-plan-accent: #2f67a5;
	display: flex;
	min-width: 0;
	min-height: 100%;
	flex-direction: column;
	padding: clamp(28px, 3vw, 42px);
	border: 2px solid rgba(255, 255, 255, 0.74);
	border-top: 9px solid var(--chiisapo-plan-accent);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 22px 55px rgba(0, 14, 55, 0.23);
	color: #182b44;
}

.chiisapo-page .chiisapo-plan-card--six {
	--chiisapo-plan-accent: #2f67a5;
}

.chiisapo-page .chiisapo-plan-card--three {
	--chiisapo-plan-accent: #4f8768;
}

.chiisapo-page .chiisapo-plan-card--spot {
	--chiisapo-plan-accent: #e86b55;
	border-color: #ffd35d;
	border-top-color: var(--chiisapo-plan-accent);
	box-shadow: 0 22px 60px rgba(0, 14, 55, 0.28), 0 0 0 4px rgba(255, 211, 93, 0.16);
}

.chiisapo-page .chiisapo-plan-card--small {
	--chiisapo-plan-accent: #d27b2d;
}

.chiisapo-page .chiisapo-plan-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.chiisapo-page .chiisapo-plan-card__number,
.chiisapo-page .chiisapo-plan-card__tag {
	margin: 0;
}

.chiisapo-page .chiisapo-plan-card__number {
	color: var(--chiisapo-plan-accent);
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.12em;
}

.chiisapo-page .chiisapo-plan-card__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 6px 15px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--chiisapo-plan-accent) 11%, white);
	color: color-mix(in srgb, var(--chiisapo-plan-accent) 82%, #152943);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
}

.chiisapo-page .chiisapo-plan-card__title {
	margin: 22px 0 0;
	color: #0c3977;
	font-size: clamp(25px, 2.5vw, 34px);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.035em;
}

.chiisapo-page .chiisapo-plan-card__summary {
	margin: 15px 0 0;
	color: #394d65;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.85;
	text-wrap: pretty;
}

.chiisapo-page .chiisapo-plan-card__list {
	display: grid;
	gap: 11px;
	margin: 25px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid #dbe4ed;
	list-style: none;
}

.chiisapo-page .chiisapo-plan-card__list li {
	position: relative;
	margin: 0;
	padding-left: 27px;
	color: #24374d;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
}

.chiisapo-page .chiisapo-plan-card__list li::before {
	position: absolute;
	top: 0.72em;
	left: 2px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--chiisapo-plan-accent);
	content: "";
	transform: translateY(-50%);
}

.chiisapo-page .chiisapo-plan-card__bottom {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 5px 13px;
	margin-top: auto;
	padding-top: 28px;
}

.chiisapo-page .chiisapo-plan-card__bottom > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 27px;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--chiisapo-plan-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
}

.chiisapo-page .chiisapo-plan-card__bottom > strong {
	color: var(--chiisapo-plan-accent);
	font-size: clamp(24px, 2.5vw, 34px);
	font-weight: 900;
	line-height: 1.25;
}

.chiisapo-page .chiisapo-plan-card__bottom > strong small {
	font-size: 0.48em;
	font-weight: 800;
}

.chiisapo-page .chiisapo-plan-card__bottom > small {
	grid-column: 1 / -1;
	color: #6a7888;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.55;
}

.chiisapo-page .chiisapo-consult {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	margin-top: clamp(52px, 7vw, 88px);
	overflow: hidden;
	border: 5px solid #ffd35d;
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 26px 70px rgba(0, 12, 46, 0.34);
	color: #172b45;
}

.chiisapo-page .chiisapo-consult__person {
	display: grid;
	grid-template-columns: minmax(180px, 0.84fr) minmax(0, 1.16fr);
	min-width: 0;
	background: #edf5fc;
}

.chiisapo-page .chiisapo-consult__photo {
	min-height: 100%;
	margin: 0;
	overflow: hidden;
	background: #d7e5f3;
}

.chiisapo-page .chiisapo-consult__photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 430px;
	object-fit: cover;
	object-position: center top;
}

.chiisapo-page .chiisapo-consult__profile {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	padding: 38px 30px;
}

.chiisapo-page .chiisapo-consult__company,
.chiisapo-page .chiisapo-consult__profile > p:last-child {
	margin: 0;
}

.chiisapo-page .chiisapo-consult__company {
	color: #42607f;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.chiisapo-page .chiisapo-consult__profile h3 {
	margin: 8px 0 20px;
	color: #07357e;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.08em;
}

.chiisapo-page .chiisapo-consult__profile > p:last-child {
	color: #354a61;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.9;
	text-wrap: pretty;
}

.chiisapo-page .chiisapo-consult__action {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: center;
	gap: 24px 22px;
	min-width: 0;
	padding: clamp(38px, 4.5vw, 62px);
	background:
		radial-gradient(circle at 95% 6%, rgba(255, 211, 93, 0.28), transparent 30%),
		#fff;
}

.chiisapo-page .chiisapo-consult__badge {
	position: absolute;
	top: 22px;
	right: 24px;
	width: clamp(88px, 9vw, 126px);
	height: auto;
	filter: drop-shadow(0 7px 12px rgba(0, 28, 70, 0.13));
}

.chiisapo-page .chiisapo-consult__copy {
	min-width: 0;
	padding-right: 74px;
}

.chiisapo-page .chiisapo-consult__kicker,
.chiisapo-page .chiisapo-consult__copy > p:last-child {
	margin: 0;
}

.chiisapo-page .chiisapo-consult__kicker {
	color: #e05845;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5;
}

.chiisapo-page .chiisapo-consult__copy h3 {
	margin: 8px 0 15px;
	color: #07357e;
	font-size: clamp(25px, 2.5vw, 34px);
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: 0.035em;
	text-wrap: balance;
}

.chiisapo-page .chiisapo-consult__copy > p:last-child {
	color: #495c72;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.8;
}

.chiisapo-page .chiisapo-consult__line {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	gap: 22px;
	min-width: 0;
}

.chiisapo-page .chiisapo-consult__qr {
	display: block;
	width: 126px;
	height: 126px;
	flex: 0 0 126px;
	padding: 6px;
	border: 1px solid #d4dee9;
	border-radius: 10px;
	background: #fff;
	object-fit: contain;
}

.chiisapo-page .chiisapo-consult__line-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 72px;
	padding: 17px 24px;
	border-radius: 12px;
	background: #06c755;
	box-shadow: 0 10px 24px rgba(6, 199, 85, 0.22);
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.chiisapo-page .chiisapo-consult__line-button .fa-line {
	font-size: 27px;
}

.chiisapo-page .chiisapo-consult__line-button .fa-arrow-right {
	margin-left: auto;
}

.chiisapo-page .chiisapo-consult__line-button:hover,
.chiisapo-page .chiisapo-consult__line-button:focus-visible {
	color: #fff;
	filter: brightness(0.96);
	transform: translateY(-2px);
	box-shadow: 0 15px 30px rgba(6, 199, 85, 0.28);
}

.chiisapo-page .chiisapo-consult__line-button:focus-visible {
	outline: 3px solid #ffd35d;
	outline-offset: 4px;
}

/* 大きめタブレット：1199px〜981px */
@media screen and (max-width: 1199px) and (min-width: 981px) {
	.chiisapo-page .chiisapo-blue__inner {
		width: calc(100% - 80px);
	}

	.chiisapo-page .chiisapo-consult {
		grid-template-columns: 1fr;
	}

	.chiisapo-page .chiisapo-consult__person {
		grid-template-columns: 280px minmax(0, 1fr);
	}

	.chiisapo-page .chiisapo-consult__photo img {
		min-height: 360px;
	}
}

/* 標準タブレット：980px〜701px */
@media screen and (max-width: 980px) and (min-width: 701px) {
	.chiisapo-page .chiisapo-blue__inner {
		width: calc(100% - 64px);
	}

	.chiisapo-page .chiisapo-plan-grid {
		gap: 20px;
	}

	.chiisapo-page .chiisapo-plan-card {
		padding: 28px 24px 30px;
	}

	.chiisapo-page .chiisapo-plan-card__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.chiisapo-page .chiisapo-plan-card__title {
		margin-top: 18px;
	}

	.chiisapo-page .chiisapo-consult {
		grid-template-columns: 1fr;
	}

	.chiisapo-page .chiisapo-consult__person {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.chiisapo-page .chiisapo-consult__photo img {
		min-height: 350px;
	}

	.chiisapo-page .chiisapo-consult__action {
		padding: 44px;
	}
}

/* 大きめスマホ：700px〜481px */
@media screen and (max-width: 700px) and (min-width: 481px) {
	.chiisapo-page .chiisapo-blue {
		padding: 72px 0 78px;
	}

	.chiisapo-page .chiisapo-blue__inner {
		width: calc(100% - 48px);
	}

	.chiisapo-page .chiisapo-blue__title {
		font-size: clamp(29px, 7vw, 39px);
	}

	.chiisapo-page .chiisapo-pc-break {
		display: none;
	}

	.chiisapo-page .chiisapo-plan-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.chiisapo-page .chiisapo-consult {
		grid-template-columns: 1fr;
		border-width: 4px;
		border-radius: 24px;
	}

	.chiisapo-page .chiisapo-consult__person {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.chiisapo-page .chiisapo-consult__photo img {
		min-height: 350px;
	}

	.chiisapo-page .chiisapo-consult__profile {
		padding: 30px 24px;
	}

	.chiisapo-page .chiisapo-consult__action {
		padding: 42px 34px;
	}
}

/* スマホ：480px〜320px */
@media screen and (max-width: 480px) {
	.chiisapo-page .chiisapo-blue {
		scroll-margin-top: 64px;
		padding: 58px 0 64px;
	}

	.chiisapo-page .chiisapo-blue__inner {
		width: calc(100% - 32px);
	}

	.chiisapo-page .chiisapo-blue__header {
		margin-bottom: 54px;
	}

	.chiisapo-page .chiisapo-blue__logo {
		width: min(350px, 92%);
		margin-bottom: 23px;
		padding: 13px 18px;
		border-radius: 15px;
	}

	.chiisapo-page .chiisapo-blue__eyebrow,
	.chiisapo-page .chiisapo-blue__menu-kicker {
		font-size: 11px;
		letter-spacing: 0.14em;
	}

	.chiisapo-page .chiisapo-blue__title {
		margin-top: 13px;
		font-size: clamp(26px, 8.4vw, 34px);
		line-height: 1.55;
		letter-spacing: 0.025em;
	}

	.chiisapo-page .chiisapo-blue__lead {
		margin-top: 20px;
		font-size: 15px;
		line-height: 1.9;
	}

	.chiisapo-page .chiisapo-pc-break {
		display: none;
	}

	.chiisapo-page .chiisapo-blue__menu-heading {
		justify-content: flex-start;
		gap: 14px;
		margin-bottom: 24px;
	}

	.chiisapo-page .chiisapo-blue__ribbon {
		width: 72px;
	}

	.chiisapo-page .chiisapo-blue__menu-heading h3 {
		font-size: 25px;
		letter-spacing: 0.035em;
	}

	.chiisapo-page .chiisapo-plan-grid {
		grid-template-columns: 1fr;
		gap: 17px;
	}

	.chiisapo-page .chiisapo-plan-card {
		padding: 25px 20px 27px;
		border-top-width: 7px;
		border-radius: 19px;
	}

	.chiisapo-page .chiisapo-plan-card__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 11px;
	}

	.chiisapo-page .chiisapo-plan-card__title {
		margin-top: 17px;
		font-size: 25px;
	}

	.chiisapo-page .chiisapo-plan-card__summary {
		font-size: 15px;
	}

	.chiisapo-page .chiisapo-plan-card__list {
		margin-top: 20px;
		padding-top: 20px;
	}

	.chiisapo-page .chiisapo-plan-card__bottom {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 8px;
		padding-top: 24px;
	}

	.chiisapo-page .chiisapo-plan-card__bottom > span {
		justify-self: start;
	}

	.chiisapo-page .chiisapo-plan-card__bottom > strong {
		font-size: 27px;
	}

	.chiisapo-page .chiisapo-plan-card__bottom > small {
		grid-column: auto;
	}

	.chiisapo-page .chiisapo-consult {
		grid-template-columns: 1fr;
		margin-top: 48px;
		border-width: 3px;
		border-radius: 20px;
	}

	.chiisapo-page .chiisapo-consult__person {
		grid-template-columns: 1fr;
	}

	.chiisapo-page .chiisapo-consult__photo {
		aspect-ratio: 4 / 3;
	}

	.chiisapo-page .chiisapo-consult__photo img {
		min-height: 0;
	}

	.chiisapo-page .chiisapo-consult__profile {
		padding: 28px 22px 32px;
	}

	.chiisapo-page .chiisapo-consult__profile h3 {
		font-size: 27px;
	}

	.chiisapo-page .chiisapo-consult__action {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 34px 22px 28px;
	}

	.chiisapo-page .chiisapo-consult__badge {
		top: 18px;
		right: 18px;
		width: 84px;
	}

	.chiisapo-page .chiisapo-consult__copy {
		padding-right: 64px;
	}

	.chiisapo-page .chiisapo-consult__copy h3 {
		font-size: 24px;
	}

	.chiisapo-page .chiisapo-consult__line {
		align-items: stretch;
		flex-direction: column;
		gap: 15px;
	}

	.chiisapo-page .chiisapo-consult__qr {
		width: 132px;
		height: 132px;
		flex-basis: 132px;
		align-self: center;
	}

	.chiisapo-page .chiisapo-consult__line-button {
		min-height: 64px;
		padding: 15px 18px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chiisapo-page .chiisapo-consult__line-button {
		transition: none;
	}
}