@charset "UTF-8";
/* ===================================================================

	under-mv（下層ページ共通のメインビジュアル：全下層で使用）
	使い方：
	<section class="under-mv">
	  <div class="under-mv__bg" aria-hidden="true">
	    <img src="...">
	    <div class="under-mv__overlay" aria-hidden="true"></div>
	    <div class="under-mv__deco" aria-hidden="true"></div>
	  </div>
	  <div class="cwrap"><div class="container">
	    <div class="under-mv__inner">
	      <p class="under-mv__label">ABOUT</p>
	      <h1 class="under-mv__ttl">ページタイトル</h1>
	      <p class="under-mv__sub">サブテキスト</p>
	      <div class="under-mv__btns">...</div>
	    </div>
	  </div></div>
	</section>

=================================================================== */
.under-mv{
  position: relative;
  overflow: hidden;
  min-height: 480px;
}
.under-mv__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.under-mv__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 写真の代わりに使う、GRA系のゆっくり動くノイズ背景。
   ABOUTページから導入し、調整が済み次第、他の下層ページにも展開予定。
   .under-mv__bg に img を入れず、このクラスを付けるだけで使える。
   ノイズはtop-about__deco-noise（index.css）と同じfeTurbulenceを流用 */
.under-mv__bg--texture{
  overflow: hidden;
  background: var(--sumi-light);
}
/* グラデーション・ノイズとも background-position ではなく transform で動かす。
   transform はコンポジタだけで完結し毎フレームの再描画が起きないため、
   ページ読み込み時の他の処理と重なってもかくつかない。
   linear + alternate で、開始直後から一定速度で動き・ループ時のジャンプも出ないようにしている。
   inset はtranslateで動かす距離（最大12%）ぶんの見切れ防止分だけにとどめ、
   必要以上に大きい面積を描画・合成しないようにしている（重さの原因になるため）。
   ノイズ側も mix-blend-mode は使わない（ブレンドモードは合成コストが高く、
   常時動くアニメーションと組み合わせると特に重くなるため、素のopacityで重ねるだけにする） */
.under-mv__bg--texture::before,
.under-mv__bg--texture::after{
  content: "";
  position: absolute;
  inset: -15%;
  will-change: transform;
}
.under-mv__bg--texture::before{
  background: linear-gradient(135deg, var(--sumi-light) 0%, var(--gra) 50%, var(--sumi-light) 100%);
  background-size: 200% 200%;
  animation: underMvTextureMove 22s linear infinite alternate;
}
.under-mv__bg--texture::after{
  opacity: 0.2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='3.5 4.8' numOctaves='2' seed='7' stitchTiles='stitch' result='noise'/><feColorMatrix in='noise' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 10 -6'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: underMvNoiseMove 40s linear infinite alternate;
}
/* スクロールで画面外に出ている間はアニメーションを止める（main.jsが付け外し）。
   .under-mv はページ最上部にしかなく、多くの滞在時間は画面外にあるため、
   動かし続けない方が負荷を大きく減らせる */
.under-mv__bg--texture.is-offscreen::before,
.under-mv__bg--texture.is-offscreen::after{
  animation-play-state: paused;
}
@keyframes underMvTextureMove{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(-12%, -8%, 0); }
}
@keyframes underMvNoiseMove{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(-10%, -10%, 0); }
}
@media only screen and (max-width: 479px){
  .under-mv__bg--texture::before{
    animation-duration: 8s;
  }
  .under-mv__bg--texture::after{
    /* 粒が粗く見えるため、baseFrequencyを上げて粒を細かくする（PCと違うデータURIに差し替え） */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='5 6.5' numOctaves='2' seed='7' stitchTiles='stitch' result='noise'/><feColorMatrix in='noise' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 10 -6'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    animation-duration: 14s;
  }
}
@media (prefers-reduced-motion: reduce){
  .under-mv__bg--texture::before,
  .under-mv__bg--texture::after{
    animation: none;
  }
}
/* 写真全体にかける黒の半透明レイヤー（テキストの視認性向上） */
.under-mv__overlay{
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 14, 0.4);
}
/* 右側の斜めカット。ロゴの傾きと合わせてskewX(-20.4deg)で固定角度にしている */
.under-mv__deco{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.under-mv__deco::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 320px;
  opacity: 0.7;
  background-color: var(--shu);
  /* originはtop固定。centerにすると上半分が右にずれて画面端の外まで
     はみ出してしまうため、必ず内側（左）にだけずれるtopに戻している */
  transform: skewX(-20.4deg);
  transform-origin: top;
}
.under-mv .cwrap{
  position: relative;
  z-index: 1;
}
.under-mv__inner{
  padding: 200px 0 70px;
}
.under-mv__label{
  margin-bottom: 16px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.under-mv__ttl{
  margin-bottom: 16px;
  color: #fff;
  font-size: 65px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.under-mv__sub{
  margin-bottom: 40px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.under-mv__btns{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
/* MVのボタンだけ角丸15px（CLAUDE.mdの角丸ルールの例外。トップのMVボタンと同じ高さ・幅にする） */
.under-mv__btn-main{
  min-width: 180px;
  max-width: 100%;
  height: 64px;
  padding: 0 28px;
  border-radius: 15px;
  background: linear-gradient(to bottom right, #e56e0c 20%, #ea2607 80%);
}
.under-mv__btn-main:hover{
  background: linear-gradient(to bottom right, #e56e0c 20%, #ea2607 80%);
  opacity: 0.85;
}

@media only screen and (max-width: 1024px){
  .under-mv__ttl{
    font-size: 48px;
  }
  .under-mv__deco::before{
    right: -90px;
  }
  .under-mv__btn-main{
    min-width: 170px;
    height: 58px;
    padding: 0 24px;
    font-size: 15px;
  }
}
@media only screen and (max-width: 768px){
  .under-mv{
    min-height: 420px;
  }
  .under-mv__deco::before{
    right: -150px;
    width: 220px;
  }
  .under-mv__btn-main{
    min-width: unset;
    height: 52px;
    padding: 0 20px;
    font-size: 15px;
  }
}
@media only screen and (max-width: 479px){
  .under-mv{
    min-height: 360px;
  }
  .under-mv__inner{
    padding: 130px 0 50px;
  }
  .under-mv__label{
    font-size: 12px;
  }
  .under-mv__ttl{
    font-size: 35px;
  }
  .under-mv__sub{
    margin-bottom: 30px;
    font-size: 16px;
  }
  .under-mv__deco::before{
    right: -120px;
    width: 120px;
  }
  .under-mv__btns{
    gap: 15px;
  }
}


/* ===================================================================

	about-purpose

=================================================================== */
.about-purpose__inner .sec-ttl{
  margin-bottom: 80px;
}
.about-purpose__row{
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.about-purpose__mark{
  flex: 0 0 210px;
  width: 210px;
}
.about-purpose__txt{
  flex: 1;
}
.about-purpose__txt p{
  margin-bottom: 24px;
  font-size: 20px;
  line-height: 2;
}
.about-purpose__txt p:last-child{
  margin-bottom: 0;
}

@media only screen and (max-width: 768px){
  .about-purpose__row{
    gap: 30px;
  }
  .about-purpose__mark{
    position: relative;
    top: 10px;
    flex: 0 0 80px;
    width: 80px;
  }
}
@media only screen and (max-width: 479px){
  .about-purpose__row{
    gap: 20px;
  }
  .about-purpose__mark{
    flex: 0 0 50px;
    width: 50px;
  }
  .about-purpose__txt p{
    font-size: 16px;
  }
}


/* ===================================================================

	about-values（01/02/03 は共通コンポーネント num-list を使用）

=================================================================== */
.about-values .num-list{
  margin-top: 60px;
}

@media only screen and (max-width: 768px){
  .about-values .num-list{
    margin-top: 40px;
  }
}


/* ===================================================================

	about-area

=================================================================== */
.about-area{
  position: relative;
}
.about-area__txt{
  max-width: 580px;
}
.about-area__txt p{
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.9;
}
.about-area__txt p:last-child{
  margin-bottom: 0;
}
/* セクション（＝画面幅いっぱい）を基準に、.containerの右端からの距離を
   画面幅に応じて計算する（画面1200pxなら30px＝.cwrapの余白ぶんだけ外、
   画面が広がるほど.containerの右端も画面端から離れるので、その分だけ
   外側へ出す）。ただし画面幅は1440px分までで頭打ちにして、それより
   広い画面では1440px時点の位置のまま動かさない。
   縦幅は画像側にmax-heightを持たせて自動で決まるようにし（下のimg側参照）、
   セクションの高さが際限なく伸びないようにしている */
/* rightで指定すると画面の右端からの距離になり、画面が広がっても常に
   端にくっついたまま動かせない。中央からの距離（1440pxコンテナの半分＝720px）
   で位置を決めるようにする */
.about-area__img{
  position: absolute;
  top: 50%;
  right: max(30px, calc(50% - 720px));
  transform: translateY(-50%);
}
.about-area__img img{
  width: auto;
  max-width: none;
  height: auto;
  max-height: 520px;
}

@media only screen and (max-width: 768px){
  .about-area__img{
    position: static;
    top: auto;
    right: auto;
    transform: none;
    height: auto;
    width: 100%;
    max-width: 400px;
    margin: 30px auto 0;
  }
  .about-area__img img{
    width: 100%;
    height: auto;
  }
}
@media only screen and (max-width: 479px){
  .about-area__img{
    padding: 0 15px;
  }
}


/* ===================================================================

	our-service（HANEAGEの提供サービス：下層共通パーツ
	template-parts/section-our-service.php で使用）

=================================================================== */
.our-service{
  text-align: center;
}
.our-service__accent{
  color: var(--shu);
}
.our-service__box{
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 40px;
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
}
.our-service__top{
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--gra);
}
/* 下の3列グリッド（flex: 1 1 calc(33.333% - 8px)）と幅の計算式を揃えるため、
   2:1の比率指定ではなく、列幅そのものをcalcで固定する
   （first-childは2列分+その間のgap12pxぶん、last-childは1列分） */
.our-service__top .our-service__group:first-child{
  flex: 0 0 calc(66.666% - 4px);
}
.our-service__top .our-service__group:last-child{
  flex: 0 0 calc(33.333% - 8px);
}
.our-service__group-label{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--sumi);
  font-size: 16px;
  font-weight: 700;
}
.our-service__group-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}
.our-service__group-icon svg{
  width: 100%;
  height: auto;
}
.our-service__items{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.our-service__items a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 220px;
  padding: 16px 20px;
  border-radius: 5px;
  background: var(--kinu);
  border: 1px solid var(--kinu);
  color: var(--sumi);
  font-size: 15px;
  font-weight: 700;
  transition: color 0.3s;
}
.our-service__items-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--chevron);
  height: var(--chevron);
  border-radius: 50%;
  background: var(--shu);
  color: #fff;
  transition: background 0.3s;
}
.our-service__items-arrow svg{
  width: var(--chevron-icon);
  height: auto;
}
.our-service__items a:hover{
  opacity: 1;
  color: var(--shu);
}
.our-service__items a:hover .our-service__items-arrow{
  background: var(--shu-hover);
}
.our-service__items--grid a{
  flex: 1 1 calc(33.333% - 8px);
  background: transparent;
  border: 1px solid var(--sumi);
}
.our-service__btnwrap{
  margin-top: 50px;
}

@media only screen and (max-width: 1024px){
  .our-service__items--grid a{
    flex: 1 1 calc(50% - 6px);
  }
}
@media only screen and (max-width: 768px){
  .our-service__box{
    padding: 30px 20px;
  }
  .our-service__top{
    flex-direction: column;
    gap: 24px;
  }
}
@media only screen and (max-width: 479px){
  .our-service__items a{
    flex: 1 1 100%;
  }
  .our-service__items--grid a{
    flex: 1 1 100%;
  }
}


/* ===================================================================

	breadcrumb（下層共通）

=================================================================== */
.breadcrumb{
  padding: 20px 0;
  background: #fff;
}
.breadcrumb ol{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.breadcrumb li{
  padding-left: 0;
  text-indent: 0;
  font-size: 13px;
  color: var(--gra);
}
.breadcrumb li:not(:last-child)::after{
  content: ">";
  margin-left: 8px;
}
.breadcrumb a{
  color: var(--gra);
}
.breadcrumb a:hover{
  color: var(--shu);
  opacity: 1;
}


/* ===================================================================

	service-choose（どこから始めるかで選ぶ）

=================================================================== */
.service-choose__lead{
  text-align: left;
  margin: 30px 0 0;
  margin-bottom: 60px;
}
.service-choose__list > li{
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-top: 60px;
  padding-left: 0;
  text-indent: 0;
}
.service-choose__list > li:first-child{
  margin-top: 0;
}
.service-choose__img{
  flex: 0 0 300px;
  overflow: hidden;
}
.service-choose__body{
  flex: 1;
}
.service-choose__no{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  color: var(--shu);
  font-family: "Roboto", sans-serif;
  font-size: 65px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}
.service-choose__no::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gra);
}
.service-choose__ttl{
  margin-bottom: 16px;
  color: var(--sumi);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.service-choose__txt{
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.8;
}
.service-choose__taglabel{
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--shu);
}
.service-choose__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.service-choose__tags li{
  padding-left: 0;
  text-indent: 0;
}
.service-choose__tags a{
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--shu);
  border-radius: 5px;
  color: var(--shu);
  font-size: 15px;
  line-height: 1;
  text-align: center;
}
.service-choose__tags a:hover{
  opacity: 1;
  background: var(--shu);
  color: #fff;
}

@media only screen and (max-width: 768px){
  .service-choose__list > li{
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
  }
  .service-choose__img{
    flex: none;
    width: 100%;
  }
}
@media only screen and (max-width: 479px){
  .service-choose__no{
    font-size: 48px;
  }
  .service-choose__ttl{
    font-size: 20px;
  }
}


/* ===================================================================

	service-list（サービス一覧）

=================================================================== */
.service-list__lead{
  text-align: left;
  margin: 30px 0 0;
}
.service-list__group{
  margin-bottom: 90px;
}
.service-list__group:last-of-type{
  margin-bottom: 0;
}
.service-list__group:first-of-type{
  margin-top: 60px;
}
.service-list__group-en{
  color: var(--shu);
  font-family: "Roboto", sans-serif;
  font-size: 50px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.3;
}
.service-list__group-ttl{
  margin-bottom: 24px;
  font-size: 30px;
  font-weight: 700;
}
.service-list__row{
  display: flex;
  align-items: stretch;
  gap: 30px;
}
.service-list__photo{
  flex: 0 0 460px;
  overflow: hidden;
}
.service-list__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* STRATEGY & ANALYSIS の一覧 */
.service-list__items{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.service-list__items li{
  padding-left: 0;
  text-indent: 0;
}
.service-list__items > li{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 30px;
  border-radius: var(--radius);
  background: #fff;
}
.service-list__items-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.service-list__items-icon svg{
  width: 32px;
  height: 32px;
}
.service-list__items-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.service-list__items-ttl{
  font-size: 20px;
  font-weight: 700;
  transition: color 0.3s;
}
.service-list__items > li:hover .service-list__items-ttl{
  color: var(--shu);
}
.service-list__items-txt{
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

/* PARTNERSHIP パネル */
.service-list__panel{
  flex: 1;
  padding: 30px;
  border-radius: var(--radius);
  background: var(--sumi);
  color: #fff;
}
.service-list__panel-head{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.service-list__panel-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: #fff;
}
.service-list__panel-icon svg{
  width: 32px;
  height: 32px;
}
.service-list__panel-body{
  flex: 1;
  min-width: 0;
}
.service-list__panel-ttl{
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
}
.service-list__panel-txt{
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.8;
}
.service-list__panel-tags{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.service-list__panel-tags li{
  padding: 10px 16px;
  border: 1px solid #fff;
  border-radius: 5px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  text-indent: 0;
  opacity: 0.8;
}

/* SPECIALTY グリッド */
.service-list__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.service-list__grid li{
  padding-left: 0;
  text-indent: 0;
}
.service-list__grid a{
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 22px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--sumi);
}
.service-list__grid-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.service-list__grid-icon svg{
  width: 38px;
  height: 38px;
}
.service-list__grid-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.service-list__grid-ttl{
  font-size: 16px;
  font-weight: 700;
  transition: color 0.3s;
}
.service-list__grid-txt{
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}
.service-list__grid-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--chevron);
  height: var(--chevron);
  border-radius: 50%;
  background: var(--shu);
  color: #fff;
  transition: background 0.3s;
}
.service-list__grid-arrow svg{
  width: var(--chevron-icon);
  height: auto;
}
.service-list__grid a:hover{
  opacity: 1;
}
.service-list__grid a:hover .service-list__grid-ttl{
  color: var(--shu);
}
.service-list__grid a:hover .service-list__grid-arrow{
  background: var(--shu-hover);
}

@media only screen and (max-width: 1024px){
  .service-list__photo{
    flex: 0 0 280px;
  }
}
@media only screen and (max-width: 768px){
  .service-list__row{
    flex-direction: column;
  }
  .service-list__photo{
    order: -1;
    flex: none;
    width: 100%;
    height: 220px;
  }
  .service-list__group-en{
    font-size: 40px;
  }
  .service-list__group-ttl{
    font-size: 24px;
  }
}
@media only screen and (max-width: 479px){
  .service-list__group{
    margin-bottom: 50px;
  }
  .service-list__items > li{
    flex-direction: column;
    gap: 10px;
    padding: 18px;
  }
  /* 2カラムだと1枚あたりの幅が足りず、縦積みにしても窮屈さが解消しなかったため、
     1カラムに戻して幅を確保し、アイコン・テキスト・矢印は元の横並びに戻す */
  .service-list__grid{
    grid-template-columns: 1fr;
  }
  .service-list__grid a{
    gap: 10px;
    padding: 18px;
  }
  .service-list__grid-icon{
    width: 40px;
    height: 40px;
  }
  .service-list__grid-icon svg{
    width: 30px;
    height: 30px;
  }
  .service-list__group-en{
    font-size: 30px;
  }
  .service-list__group-ttl{
    font-size: 20px;
  }
}


/* ===================================================================

	service-process（ご支援の進め方）

=================================================================== */
.service-process__lead{
  text-align: left;
  margin: 30px 0 0;
}
.service-process__list{
  display: flex;
  gap: 80px;
  margin-top: 60px;
}
.service-process__list li{
  position: relative;
  flex: 1 1 0;
  padding-left: 0;
  text-indent: 0;
}
.service-process__list li:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 200px;
  right: -47px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--gra);
  border-right: 2px solid var(--gra);
  transform: rotate(45deg);
}
.service-process__no{
  margin-bottom: 8px;
  color: var(--shu);
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  font-weight: 900;
  font-style: italic;
}
.service-process__ttl{
  margin-bottom: 16px;
  color: var(--sumi);
  font-size: 16px;
  font-weight: 700;
}
.service-process__img{
  margin-bottom: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.service-process__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-process__txt{
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.service-process__note{
  margin-top: 24px;
  font-size: 12px;
  color: var(--gra);
}

@media only screen and (max-width: 768px){
  .service-process__list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
  }
  /* グリッドだと矢印の向きが揃わないため、2カラムの間は非表示にする */
  .service-process__list li:not(:last-child)::after{
    display: none;
  }
}
@media only screen and (max-width: 479px){
  .service-process__list{
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .service-process__list li:not(:last-child)::after{
    display: block;
    top: auto;
    bottom: -28px;
    right: auto;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}


/* ===================================================================

	service-case（支援実績：トップと共通のcase-cardを使用）

=================================================================== */
/* ===================================================================

	service-faq（よくある質問）

=================================================================== */
.service-faq__list{
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service-faq__list li{
  padding-left: 0;
  text-indent: 0;
}
.service-faq__item{
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--kinu);
}
.service-faq__q{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 30px;
  cursor: pointer;
  list-style: none;
}
.service-faq__q::-webkit-details-marker{
  display: none;
}
.service-faq__q-mark{
  flex-shrink: 0;
  color: var(--shu);
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
}
.service-faq__q-txt{
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  transition: color 0.3s;
}
.service-faq__q:hover .service-faq__q-txt{
  color: var(--shu);
}
.service-faq__q-icon{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--sumi);
}
.service-faq__q-icon svg{
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}
.service-faq__q-icon-v{
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.2s;
}
.service-faq__item[open] .service-faq__q-icon-v{
  transform: scaleY(0);
}
.service-faq__a{
  margin: 0 20px 20px;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
}
.service-faq__a p{
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

@media only screen and (max-width: 479px){
  .service-faq__q{
    padding: 18px 20px;
    gap: 12px;
  }
  .service-faq__a{
    margin: 0 14px 14px;
    padding: 16px;
  }
}


/* ===================================================================

	detail-lead（専門施策6ページ共通：パンくずの直後に置く導入文。
	パンくずと同じ白背景でひとまとまりにし、KINU背景のdetail-aboutとは分ける）

=================================================================== */
.sec.detail-lead{
  padding-top: 100px;
  padding-bottom: 100px;
}
@media only screen and (max-width: 479px){
  .sec.detail-lead{
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.detail-lead .detail-issue__lead{
  margin-bottom: 0;
}

/* ===================================================================

	detail-about（専門施策6ページ共通：○○とは）
	使い方：<p class="detail-about__txt">説明文</p>
	sec-ttl（見出し）が左寄せなので、本文も.sec-leadの中央寄せではなく
	左寄せで揃える

=================================================================== */
.detail-about__txt{
  font-size: 20px;
  line-height: 1.9;
}
@media only screen and (max-width: 479px){
  .detail-about__txt{
    font-size: 16px;
  }
}
/* 対応できるサイトの種類などを並べる時に使う。detail-support__tagsと同じ見た目だが、
   detail-about自体がKINU背景なので、タグ側は白にして埋もれないようにする */
.detail-about__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.detail-about__tags li{
  padding: 10px 16px;
  border-radius: 5px;
  background: #fff;
  color: #6b6560;
  font-size: 13px;
  line-height: 1;
  text-indent: 0;
}
.detail-about__cases{
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.detail-about__cases li{
  padding-left: 0;
  text-indent: 0;
}
.detail-about__cases img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}
@media only screen and (max-width: 479px){
  .detail-about__cases{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


/* ===================================================================

	detail-issue（サービス詳細ページ共通：こんな課題に）

=================================================================== */
/* 直後のdetail-supportも常に白背景で続くため、下側の余白は付けない
   （付けるとdetail-support側の上余白と二重に空いてしまう） */
.sec.detail-issue{
  padding-bottom: 0;
}
.detail-issue__lead{
  margin-bottom: 80px;
  text-align: center;
  font-size: 20px;
  line-height: 1.9;
}
.detail-issue__intro{
  margin-left: 0;
  text-align: left;
}
.detail-issue__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.detail-issue__grid li{
  padding: 30px;
  border-radius: var(--radius);
  background: var(--kinu);
  padding-left: 30px;
  text-indent: 0;
}
.detail-issue__card-ttl{
  margin-bottom: 12px;
  color: var(--sumi);
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.detail-issue__accent{
  color: var(--shu);
}
.detail-issue__break{
  display: none;
}
.detail-issue__card-txt{
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

@media only screen and (max-width: 768px){
  .detail-issue__card-ttl{
    white-space: normal;
  }
  .detail-issue__break{
    display: block;
  }
}
@media only screen and (max-width: 479px){
  .detail-issue__grid{
    grid-template-columns: 1fr;
  }
  .detail-issue__lead{
    margin-bottom: 50px;
    font-size: 16px;
  }
}


/* ===================================================================

	detail-support（サービス詳細ページ共通：支援内容）

=================================================================== */
.detail-support__row{
  display: flex;
  align-items: center;
  gap: 60px;
}
.detail-support__txt{
  flex: 0 0 460px;
}
.detail-support__catch{
  margin: 24px 0 20px;
  color: var(--shu);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.5;
}
.detail-support__desc{
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.9;
}
.detail-support__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.detail-support__tags li{
  padding: 10px 16px;
  border-radius: 5px;
  background: var(--kinu);
  color: #6b6560;
  font-size: 13px;
  line-height: 1;
  text-indent: 0;
}
.detail-support__img{
  flex: 1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.detail-support__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 768px){
  .detail-support__row{
    flex-direction: column;
  }
  .detail-support__txt{
    flex: none;
  }
}


/* ===================================================================

	detail-method（サービス詳細ページ共通：用いる手法）

=================================================================== */
.detail-method .sec-ttl{
  margin-bottom: 80px;
}
.detail-method__row{
  display: flex;
  gap: 60px;
}
.detail-method__intro{
  flex: 0 0 260px;
  font-size: 20px;
  line-height: 1.9;
}
.sec--sumi .detail-method__intro,
.sec--sumi .detail-method__ttl{
  color: #fff;
}
.detail-method__list{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
}
.detail-method__list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--gra);
  padding-left: 0;
  text-indent: 0;
}
.detail-method__icon{
  flex-shrink: 0;
  width: 18px;
  margin-top: 2px;
}
.detail-method__body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail-method__ttl{
  color: var(--sumi);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.detail-method__txt{
  font-size: 16px;
  line-height: 1.6;
  color: var(--gra);
}

@media only screen and (max-width: 768px){
  .detail-method__row{
    flex-direction: column;
    gap: 30px;
  }
  .detail-method__intro{
    flex: none;
  }
}
@media only screen and (max-width: 479px){
  .detail-method__list{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .detail-method__intro{
    font-size: 16px;
  }
}


/* ===================================================================

	detail-plan（サービス詳細ページ共通：プラン・料金）

=================================================================== */
.detail-plan__lead{
  text-align: left;
  margin: 30px 0 0;
}
.detail-plan__row{
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin-top: 40px;
}
.detail-plan__row--linked{
  margin-bottom: 90px;
}
/* --tripleは「関連する支援実績を見る」等のbtnwrapが直後にある時だけ余白を付ける。
   partnership.phpのようにbtnwrapが無いページでは、この余白自体が不要なため */
.detail-plan__row--triple:has(+ .btnwrap){
  margin-bottom: 90px;
}
.detail-plan__row--triple:has(+ .detail-plan__option-head){
  margin-bottom: 60px;
}
.detail-plan__option-head{
  padding-top: 50px;
  border-top: 1px solid var(--gra);
  text-align: left;
}
.detail-plan__option-ttl{
  margin-bottom: 10px;
  color: var(--sumi);
  font-size: 20px;
  font-weight: 700;
}
.detail-plan__option-txt{
  margin-bottom: 30px;
  color: var(--gra);
  font-size: 14px;
}
.detail-plan__card{
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: var(--radius);
}
.detail-plan__card--main{
  flex: 0 0 320px;
  border: 2px solid var(--shu);
  background: var(--shu-light);
}
.detail-plan__card--plain{
  flex: 1;
  border: 2px solid rgba(18,16,14,0.12);
  background: #fff;
}
.detail-plan__card--option{
  flex: 0 0 320px;
  background: var(--kinu);
}
.detail-plan__card--main .btn-main,
.detail-plan__card--option .detail-plan__other-btn,
.detail-plan__card--plain .detail-plan__other-btn{
  margin-top: auto;
}
.detail-plan__row--triple .detail-plan__card{
  flex: 1;
  min-width: 0;
}
.detail-plan__row--triple .btn-main,
.detail-plan__row--triple .detail-plan__other-btn{
  width: 100%;
  padding: 0 20px;
  letter-spacing: 0.02em;
}
@media only screen and (max-width: 768px){
  .detail-plan__row--triple{
    flex-wrap: wrap;
  }
  .detail-plan__row--triple .detail-plan__card{
    flex: 0 0 calc(50% - 10px);
  }
  .detail-plan__row--triple .detail-plan__card:nth-child(3){
    margin: 0 auto;
  }
}
.detail-plan__list-label{
  margin-bottom: 10px;
  color: var(--sumi);
  font-size: 16px;
  font-weight: 700;
}
.detail-plan__badge{
  margin-bottom: 0;
  color: var(--shu);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.detail-plan__ttl{
  margin-bottom: 16px;
  color: var(--sumi);
  font-size: 20px;
  font-weight: 700;
}
.detail-plan__price{
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(18,16,14,0.15);
  color: var(--sumi);
  font-family: "Roboto", sans-serif;
  font-size: 40px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}
.detail-plan__price span{
  position: relative;
  top: -2px;
  font-size: 20px;
  font-weight: 900;
}
.detail-plan__card-lead{
  margin-bottom: 20px;
  color: var(--gra);
  font-size: 15px;
  line-height: 1.6;
}
.detail-plan__list{
  margin-bottom: 30px;
}
.detail-plan__note{
  margin-bottom: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gra);
}
.detail-plan__note:last-of-type{
  margin-bottom: 20px;
}
.detail-plan__list li{
  position: relative;
  padding: 8px 0 8px 24px;
  text-indent: 0;
  color: var(--sumi);
  font-size: 16px;
  line-height: 1.6;
}
.detail-plan__list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--shu);
  font-weight: 700;
}
.detail-plan__card--other{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--kinu);
}
.detail-plan__other-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;
}
.detail-plan__plus{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border: 1px solid var(--gra);
  border-radius: 50%;
  color: var(--gra);
  font-size: 20px;
}
.detail-plan__other-txt{
  margin-bottom: 24px;
  color: var(--gra);
  font-size: 16px;
  line-height: 1.7;
}
.detail-plan__other-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  max-width: 100%;
  height: 70px;
  padding: 0 30px;
  border: 1px solid var(--sumi);
  border-radius: 999px;
  background: #fff;
  color: var(--sumi);
  font-size: 15px;
  font-weight: 700;
}
.detail-plan__other-btn .btn-main__chevron{
  background: var(--shu);
  color: #fff;
}
@media only screen and (max-width: 479px){
  .detail-plan__other-btn{
    width: 260px;
    height: 60px;
    border-radius: 30px;
  }
}
.detail-plan__notes{
  margin-top: 20px;
  margin-bottom: 40px;
}
.detail-plan__notes li{
  padding-left: 0;
  text-indent: 0;
  color: var(--gra);
  font-size: 13px;
  line-height: 1.8;
}

@media only screen and (max-width: 479px){
  .detail-plan__row{
    flex-direction: column;
  }
  .detail-plan__card--main,
  .detail-plan__row--triple .detail-plan__card{
    flex: none;
  }
}


/* ===================================================================

	info-table（会社概要ページ共通：項目名＋内容の定義リスト）

=================================================================== */
.info-table__row{
  display: flex;
  gap: var(--gap-m);
  padding-top: 30px;
}
.info-table__label{
  flex: 0 0 180px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gra);
  color: var(--sumi);
  font-size: 16px;
  font-weight: 700;
}
.info-table__value{
  flex: 1;
  padding: 0 var(--gap-s) 20px;
  border-bottom: 1px solid var(--gra);
  font-size: 16px;
  line-height: 1.8;
}
.info-table__value ul li{
  padding-left: 0;
  text-indent: 0;
}

@media only screen and (max-width: 479px){
  .info-table__row{
    flex-direction: column;
    gap: 0;
    padding-top: 20px;
  }
  .info-table__label{
    flex: none;
    padding-bottom: 8px;
    border-bottom: none;
  }
  .info-table__value{
    padding-bottom: 20px;
  }
}


/* ===================================================================

	post-single__head（お知らせ・コラム詳細の見出し：MVを使わず、
	breadcrumbのすぐ下に本文と同じ幅で日付＋タイトルを置く）

=================================================================== */
.post-single__head{
  margin-bottom: var(--gap-l);
}
.post-single__head .news-list__date{
  margin-bottom: 12px;
}
.post-single__ttl{
  padding-bottom: var(--gap-m);
  border-bottom: 1px solid var(--gra);
  color: var(--sumi);
  font-size: 35px;
  font-weight: 900;
  line-height: 1.4;
}
@media only screen and (max-width: 479px){
  .post-single__ttl{
    font-size: 24px;
  }
}


/* ===================================================================

	txtpage（文章だけの下層ページ共通：プライバシーポリシー・利用規約など）

=================================================================== */
.txtpage .txtpage__thumb{
  margin-bottom: var(--gap-l);
  border-radius: var(--radius);
  overflow: hidden;
}
.txtpage .txtpage__thumb img{
  width: 100%;
  height: auto;
}
.txtpage .txtpage__ttl{
  margin-bottom: var(--gap-s);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gra);
  color: var(--sumi);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.txtpage p{
  margin-bottom: var(--gap-m);
  font-size: 16px;
  line-height: 1.9;
}
.txtpage ul{
  margin-bottom: var(--gap-m);
}
.txtpage ul li{
  padding-left: 0;
  text-indent: 0;
  font-size: 16px;
  line-height: 1.9;
}
/* 投稿本文で太字（B）にした部分はSHUにする。見出し・リンクは対象外
   （見出しはSUMI、リンクは自身の色をそのまま使う） */
.txtpage strong,
.txtpage b{
  color: var(--shu);
}
.txtpage h1 strong, .txtpage h1 b,
.txtpage h2 strong, .txtpage h2 b,
.txtpage h3 strong, .txtpage h3 b,
.txtpage h4 strong, .txtpage h4 b,
.txtpage h5 strong, .txtpage h5 b,
.txtpage h6 strong, .txtpage h6 b,
.txtpage a strong, .txtpage a b{
  color: inherit;
}


/* ===================================================================

	post-nav（前後の記事ナビ：お知らせ詳細・コラム詳細で共通）
	使い方：get_template_part( 'template-parts/post-nav', null, array(
	  'list_url' => ..., 'list_label' => ...
	) );

=================================================================== */
.post-nav{
  display: flex;
  gap: var(--gap-m);
  margin-top: var(--gap-l);
  margin-bottom: var(--gap-l);
}
.post-nav__item{
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--kinu);
  color: var(--sumi);
}
.post-nav__item--empty{
  background: none;
}
.post-nav__item--next{
  flex-direction: row-reverse;
  text-align: right;
}
.post-nav__img{
  flex-shrink: 0;
  width: 80px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 5px;
}
.post-nav__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-nav__body{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.post-nav__label{
  font-size: 12px;
  color: var(--gra);
}
.post-nav__ttl{
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

@media only screen and (max-width: 479px){
  .post-nav{
    flex-direction: column;
  }
  .post-nav__item--next{
    flex-direction: row;
    text-align: left;
  }
}


/* ===================================================================

	error404（404ページ）

=================================================================== */
.error404__inner{
  max-width: 640px;
  margin: 0 auto;
  padding: 100px 0;
  text-align: center;
}
.error404__code{
  margin-bottom: 20px;
  color: var(--shu);
  font-family: "Roboto", sans-serif;
  font-size: 90px;
  font-weight: 900;
  line-height: 1;
}
.error404__ttl{
  margin-bottom: 30px;
  color: var(--sumi);
  font-size: 35px;
  font-weight: 900;
  line-height: 1.4;
}
.error404__txt{
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 2;
}

@media only screen and (max-width: 479px){
  .error404__inner{
    padding: 60px 0;
  }
  .error404__code{
    font-size: 65px;
  }
  .error404__ttl{
    font-size: 24px;
  }
}


/* ===================================================================

	thanks（お問い合わせ送信完了ページ）

=================================================================== */
.thanks{
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 60px;
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
}
.thanks__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin-bottom: 30px;
  color: var(--shu);
}
.thanks__icon svg{
  width: 100%;
  height: auto;
}
.thanks__ttl{
  margin-bottom: 20px;
  color: var(--sumi);
  font-size: 35px;
  font-weight: 900;
  line-height: 1.4;
}
.thanks__txt{
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 2;
}
.thanks__btnwrap{
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 768px){
  .thanks{
    padding: 60px 30px;
  }
}
@media only screen and (max-width: 479px){
  .thanks{
    padding: 50px 20px;
  }
  .thanks__icon{
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
  }
  .thanks__ttl{
    font-size: 24px;
  }
}


/* ===================================================================

	contact-form（お問い合わせフォーム：Contact Form 7）
	HTML（フォームの項目）は Contact Form 7 の管理画面側（_design/contact/cf7-form.html
	を貼り付け）。ここはその見た目だけを担当する。
	入力画面⇄確認画面の切り替えは assets/js/main.js で行う
	（.contact-form__step--confirm は既定でhidden属性、JSでの付け外しのみで制御）

=================================================================== */
.contact-notice{
  max-width: 1000px;
  margin: 0 auto var(--gap-m);
  padding: 20px 24px;
  border-radius: 5px;
  background: var(--kinu);
  color: var(--sumi);
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}
.contact-notice a{
  color: var(--shu);
  text-decoration: underline;
}
.contact-notice__cases{
  max-width: 1000px;
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.contact-notice__cases[hidden]{
  display: none;
}
.contact-notice__cases li{
  padding-left: 0;
  text-indent: 0;
}
.contact-notice__cases img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}
@media only screen and (max-width: 479px){
  .contact-notice__cases{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .contact-notice__cases li:nth-child(3){
    order: 4;
  }
  .contact-notice__cases li:nth-child(4){
    order: 3;
  }
}
.contact-form{
  padding: 60px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 30px rgba(18,16,14,0.08);
}
.contact-form__row{
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 24px 0;
}
.contact-form__row:first-child{
  padding-top: 0;
}
.contact-form__row--textarea{
  align-items: flex-start;
}
.contact-form__label{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 240px;
}
.contact-form__row--textarea .contact-form__label{
  padding-top: 16px;
}
.contact-form__badge{
  flex-shrink: 0;
  margin-right: var(--gap-s);
  padding: 6px 14px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.contact-form__badge--req{
  background: var(--gra);
  color: #fff;
}
.contact-form__badge--opt{
  background: #fff;
  border: 1px solid var(--gra);
  color: var(--gra);
}
.contact-form__label-text{
  color: var(--sumi);
  font-size: 16px;
  font-weight: 700;
}
.contact-form__field{
  flex: 1;
  min-width: 0;
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea{
  width: 100%;
  padding: 0 16px;
  border: 1px solid var(--gra);
  border-radius: 5px;
  background: #fff;
  color: var(--sumi);
  font-family: inherit;
  font-size: 16px;
}
.contact-form__field input,
.contact-form__field select{
  height: 48px;
}
.contact-form__field textarea{
  height: 160px;
  padding-top: 16px;
  padding-bottom: 16px;
  resize: vertical;
}
.contact-form__field select{
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 9L12 15L18 9' stroke='%239A938C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus{
  outline: 2px solid var(--shu);
  outline-offset: -1px;
}
.contact-form__privacy{
  margin-top: 30px;
  text-align: center;
  font-size: 15px;
}
.contact-form__privacy a{
  margin: 0 5px 0 2px;
  color: var(--shu);
  text-decoration: underline;
}
.contact-form__btns{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 40px;
}
.contact-form__btn--outline{
  background: #fff;
  border: 1px solid var(--gra);
  color: var(--sumi);
}
.contact-form__btn--outline:hover{
  background: var(--kinu);
  color: var(--sumi);
  opacity: 1;
}
/* 戻るボタンだけ、chevronを左側・左向きにする
   （.btn-mainのchevronは既定で右側固定のため、このボタンだけ位置を上書きする）。
   丸の色も既定の白丸だと、白背景のアウトラインボタンに同化して見えなくなるため、
   SHU塗りつぶし＋白矢印に変える */
.contact-form__btn--back.btn-main{
  padding-right: 30px;
  padding-left: 55px;
}
.contact-form__btn--back .btn-main__chevron{
  right: auto;
  left: 20px;
  transform: translateY(-50%) rotate(180deg);
  background: var(--shu);
  color: #fff;
}
/* submitはCF7が<input type="submit">で出力するが、::before/::afterは
   input（置換要素）には効かないため、周りに付けた.contact-form__btn--submit-wrap
   （span）側に疑似要素でchevronを再現する。inputにはbtn-mainの標準border（無指定
   だとブラウザ標準の枠線が出る）を明示的に消す必要もある */
.contact-form__btn--submit-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 280px;
  max-width: 100%;
}
/* CF7が自動で足すスピナー（.wpcf7-spinner、送信中だけ表示）がラップ内の
   flexアイテムとして幅を取り合い、inputが縮む原因になるため、レイアウトから外す */
.contact-form__btn--submit-wrap .wpcf7-spinner{
  position: absolute;
}
.contact-form__btn--submit.btn-main{
  width: 100%;
  border: none;
  padding-right: 55px;
}
.contact-form__btn--submit-wrap::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: var(--chevron);
  height: var(--chevron);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M9 5L16 12L9 19' stroke='%23EA2607' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
  background-size: var(--chevron-icon);
  pointer-events: none;
}
.contact-form__confirm-lead{
  margin-bottom: 30px;
  color: var(--sumi);
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}
.contact-form__confirm-row{
  display: flex;
  gap: var(--gap-m);
  padding-top: 30px;
}
.contact-form__confirm-row:first-child{
  padding-top: 0;
}
.contact-form__confirm-label{
  flex-shrink: 0;
  width: 240px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--gra);
  color: var(--sumi);
  font-size: 16px;
  font-weight: 700;
}
.contact-form__confirm-value{
  flex: 1;
  min-width: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gra);
  font-size: 16px;
  line-height: 1.8;
  word-break: break-word;
}
/* wpcf7の標準エラー文言まわり（項目名の右に出る赤文字）の見た目調整 */
/* main.jsの独自エラー表示（.contact-form__error-tip）と二重に出るため、
   CF7自身のエラー文言は表示しない */
.wpcf7-not-valid-tip{
  display: none;
}
/* 「入力を確認する」押下時の自前バリデーション（main.js）用。
   ブラウザ標準のreportValidity()はツールチップの見た目・挙動を制御できないため使わない */
.contact-form__field input.is-invalid,
.contact-form__field select.is-invalid,
.contact-form__field textarea.is-invalid{
  border-color: var(--shu);
}
.contact-form__error-tip{
  display: block;
  margin-top: 8px;
  color: var(--shu);
  font-size: 14px;
}
.wpcf7-response-output{
  margin-top: 30px !important;
  border-radius: 5px !important;
  font-size: 15px;
}

@media only screen and (max-width: 768px){
  .contact-form{
    padding: 40px 30px;
  }
  .contact-form__confirm-label{
    width: 180px;
    border-bottom-width: 1px;
  }
}
@media only screen and (max-width: 479px){
  .contact-form{
    padding: 30px 0;
    box-shadow: none;
  }
  .contact-form__row{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .contact-form__field{
    width: 100%;
  }
  .contact-form__confirm-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 20px;
  }
  .contact-form__row--textarea .contact-form__label{
    padding-top: 0;
  }
  .contact-form__label,
  .contact-form__confirm-label,
  .contact-form__confirm-value{
    width: 100%;
  }
  .contact-form__confirm-label{
    padding-bottom: 8px;
    border-bottom: none;
  }
  .contact-form__confirm-value{
    padding-bottom: 20px;
  }
  .contact-form__btns{
    gap: 15px;
  }
  .contact-form__btn--submit-wrap{
    width: 260px;
  }
}