/* ==================================================
  全体基本情報
================================================== */
/***基本設定
body {
  font-family:
    "IBM Plex Sans JP","Noto Sans JP",sans-serif;
}****/
/* ===============================
    Web Font
=============================== */
/* Anton */
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton/Anton-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* IBM Plex Sans JP：Regular */
@font-face {
  font-family: "IBM Plex Sans JP";
  src: url("../fonts/ibm-plex-sans-jp/IBMPlexSansJP-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* IBM Plex Sans JP：SemiBold */
@font-face {
  font-family: "IBM Plex Sans JP";
  src: url("../fonts/ibm-plex-sans-jp/IBMPlexSansJP-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
/* IBM Plex Sans JP：Bold */
@font-face {
  font-family: "IBM Plex Sans JP";
  src: url("../fonts/ibm-plex-sans-jp/IBMPlexSansJP-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/***全体見出しフォント****/
 .p-mainVisual__slideTitle, .c-gnav .ttl, .p-home-service__card-title, .p-home-service__title-en, .p-service-hero__title-sub, .p-service-content__title-en, .p-service-sec__title, .p-home-about__brand, .p-home-contact__label, .p-home-contact__main, .p-about-info__table th, .c-arrow-link, .c-arrow-link--large, .c-section-title, .c-pageTitle, .l-footer__nav, .spmenu_item {
  font-family: "Anton", sans-serif;
}
/***見出し設定(CTA含む)****/
h2.c-section-title, .footer-rich-cta h2.c-section-title {
  font-size: clamp(3.6rem, 6vw, 4.8rem);
  margin-bottom:2rem;
 /* text-shadow: 2px 2px 6px rgba(120,120,120,0.2);*/
}
@media (max-width: 600px) {
  h2.c-section-title, .footer-rich-cta h2.c-section-title{
    margin-bottom:1rem;
  }
}
/* p_フォントウェイト */
p{	
  font-weight:500;
}

/********************************
*改行設定
*********************************/
/* PCは改行せず */
	.p-mainVisual__slideText .sp-br {
        display: none;
    }
@media (max-width: 599.98px) {
/* SPのみ改行 */
    .p-mainVisual__slideText .sp-br {
		display: block;
    }
}

/* ==========================================
   COMPONENT：ボタン
========================================== */
/***ボタン全体設定****/
.c-arrow-link__wrapper,.c-arrow-link__wrapper--large {
  display: flex;                /* Flexboxレイアウトにする */
  justify-content: center;      /* 横方向の中央 */
  align-items: center;          /* 縦方向の中央 */
}
@media (max-width: 900px) {
   .c-arrow-link__wrapper {
    justify-content: flex-end;
    padding-right: 40px;
 }
}

/* ==========================================
   COMPONENT：BUTTON Large
========================================== */

.c-arrow-link--large {
  --line-width: 5.6em;
  --line-offset: -0.4em;
  --arrow-width: 0.6em;

  position: relative;
  display: inline-block;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: 0.05em;
  padding-bottom: 0.12em;
  color: #363030;
}

/* 水平線 */
.c-arrow-link--large::after {
  content: "";
  position: absolute;
  left: var(--line-offset);
  bottom: 0;
  width: var(--line-width);
  height: 1px;
  background-color: currentColor;

  transform-origin: left center;
}

/* 矢先 */
.c-arrow-link--large::before {
  content: "";
  position: absolute;
  left: calc(
    var(--line-offset) +
    var(--line-width) -
    0.05em
  );

  bottom: 0;
  width: var(--arrow-width);
  height: 1px;
  background-color: currentColor;
  transform: rotate(-135deg);
  transform-origin: left center;
}

@media (hover: hover) {

  /* 水平線を左から再描画 */
  .c-arrow-link--large:hover::after {
    width: 0;
    animation: drawLineLarge 0.4s ease forwards;
  }
  /* 水平線のあとに矢先を描画 */
  .c-arrow-link--large:hover::before {
    width: 0;
    animation: drawArrowLarge 0.4s ease 0.4s forwards;
  }
}

@keyframes drawLineLarge {
  from {
    width: 0;
  }
  to {
    width: var(--line-width);
  }
}

@keyframes drawArrowLarge {
  from {
    width: 0;
  }
  to {
    width: var(--arrow-width);
  }
}

/**********VIEWALLボタン小サイズ******/
.c-arrow-link {
  position: relative;
  display: inline-block;
  letter-spacing:0.05em;
  padding-bottom: 1px;
  color: #363030;
}
/* 線（水平） */
.c-arrow-link::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 0;
  width: 100px;
  height: 1px;
  background-color: #363030;
  border-radius: 0px;
  transform-origin: left;
  transition: none;
}
/* 矢印（斜線） */
.c-arrow-link::before {
  content: "";
  position: absolute;
  left: 90px; /* 線の終点から開始 */
  bottom: -0.5px;
  width: 12px;
  height: 1px;
  background-color: #363030;
  border-radius: 0px;
  transform: rotate(-135deg);
  transform-origin: left center;
  transition: none;
}
/* ホバーで両方とも一旦非表示→再描画 */
.c-arrow-link:hover::after {
  width: 0;
  animation: drawLine 0.4s ease forwards;
}
.c-arrow-link:hover::before {
  width: 0;
  animation: drawArrow 0.4s ease 0.4s forwards; /* 線の後に描かれる */
}
/* 線の描画 */
@keyframes drawLine {
  from {
    width: 0;
  }
  to {
    width: 100px;
  }
}
/* 矢印の描画 */
@keyframes drawArrow {
  from {
    width: 0;
  }
  to {
    width: 12px;
  }
}

/* ==========================================
   COMPONENT：CUT IMAGE
（カット画像 + 白フレーム）
========================================== */

.c-cut-image {
  --cut-size: 24px;
  --frame-width: 2px;
  --frame-color: rgba(255, 255, 255, 0.9);

  position: relative;

  /* 白枠 */
  padding: var(--frame-width);
  background: var(--frame-color);

  /* 外形を右上・左下カット */
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut-size)) 0,
    100% var(--cut-size),
    100% 100%,
    var(--cut-size) 100%,
    0 calc(100% - var(--cut-size))
  );
}

/* 画像 */
.c-cut-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 画像側も同じ方向にカット */
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut-size)) 0,
    100% var(--cut-size),
    100% 100%,
    var(--cut-size) 100%,
    0 calc(100% - var(--cut-size))
  );
}

/* ==========================================
   COMPONENT：CUT FRAME（内側白枠）
========================================== */
.c-cut-frame {
  position: relative;
  --frame-color: rgba(255, 255, 255, 0.82);
  --frame-inset: 10px;
  --frame-cut: 18px;
  --frame-width: 1px;
}

/* ------------------------------------------
   Frame
   右上・左下を斜めにカット
------------------------------------------ */
.c-cut-frame::after {
  content: "";
  position: absolute;
  inset: var(--frame-inset);
  z-index: 3;
  pointer-events: none;
  background:

    /* 上辺 */
    linear-gradient(
      var(--frame-color),
      var(--frame-color)
    )
    top left /
    calc(100% - var(--frame-cut))
    var(--frame-width)
    no-repeat,

    /* 右上 */
    linear-gradient(
      45deg,
      transparent calc(50% - 0.5px),
      var(--frame-color) calc(50% - 0.5px),
      var(--frame-color) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    )
    top right /
    var(--frame-cut)
    var(--frame-cut)
    no-repeat,

    /* 右辺 */
    linear-gradient(
      var(--frame-color),
      var(--frame-color)
    )
    bottom right /
    var(--frame-width)
    calc(100% - var(--frame-cut))
    no-repeat,

    /* 下辺 */
    linear-gradient(
      var(--frame-color),
      var(--frame-color)
    )
    bottom right /
    calc(100% - var(--frame-cut))
    var(--frame-width)
    no-repeat,

    /* 左下 */
    linear-gradient(
      45deg,
      transparent calc(50% - 0.5px),
      var(--frame-color) calc(50% - 0.5px),
      var(--frame-color) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    )
    bottom left /
    var(--frame-cut)
    var(--frame-cut)
    no-repeat,

    /* 左辺 */
    linear-gradient(
      var(--frame-color),
      var(--frame-color)
    )
    top left /
    var(--frame-width)
    calc(100% - var(--frame-cut))
    no-repeat;
}

/* ------------------------------------------
   Hover
------------------------------------------ */
@media (hover: hover) {

  .c-cut-frame:hover {
    --frame-color: rgba(255, 255, 255, 1);
  }
}

/* ------------------------------------------
   SP
------------------------------------------ */
@media (max-width: 600px) {

  .c-cut-frame {
    --frame-inset: 8px;
    --frame-cut: 14px;
  }
}

/* ==========================================
   HEADER：ホバー
========================================== */

/* ナビリンク */
.c-gnav > .menu-item > a {
  position: relative;
  overflow: visible;
}

/* SWELL既存の下線を非表示 */
.c-gnav > .menu-item > a::after {
  display: none;
}

/* スプレーミスト：基本はグレー */
.c-gnav > .menu-item > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 120%;
  pointer-events: none;

  background: radial-gradient(
    ellipse at center,
    rgba(110, 110, 110, 0.24) 0%,
    rgba(100, 100, 100, 0.15) 30%,
    rgba(100, 100, 100, 0.04) 50%,
    transparent 72%
  );

  filter: blur(7px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition:
    opacity 0.3s ease,
    transform 0.45s cubic-bezier(.22, 1, .36, 1);
}

/* ホバー時 */
.c-gnav > .menu-item > a:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ==========================================
   HOME上部：白系ミスト
========================================== */

.home #header .c-gnav > .menu-item > a::before {
  background: radial-gradient(
    ellipse at center,

    rgba(255,255,255,.60) 0%,
    rgba(255,255,255,.45) 12%,
    rgba(245,245,245,.25) 28%,
    rgba(230,230,230,.12) 48%,
    rgba(220,220,220,.05) 65%,
    transparent 82%
  );
  filter: blur(5px);
}

/* ==========================================
   HEADER_PC
========================================== */
/*PC_ヘッダーナビホバー位置調整＆透過*/
.c-gnav>.menu-item>a:after{
	bottom:0.8em;
	opacity:0.6;
}
/**PC_ヘッダーメニューフォントウェイト＆文字間隔変更**/
.c-gnav .ttl{
	font-weight:700;
	letter-spacing:0.05em;
}
.c-gnav>.menu-item>a .ttl{
	font-size:1.2rem;
}
/* ==========================================
   HEADER_SP
========================================== */
/*メニュー初期情報削除*/
.p-spMenu__nav{
  display:none;
}
/*メニュー初期タイトル削除*/
.c-widget__title.-spmenu{
  display:none;
}
/*メニューpマージン変更*/
.post_content p{
  margin-bottom:0.4em;
}
/*メニューp2行化*/
.spmenu_item {
  display: flex;
  flex-direction: column;
  line-height:1.2;
  letter-spacing:0.05em;
}
/*メニューSNSアイコンサイズ*/
.c-iconList__link{
  font-size:2.2rem;
}
/*メニューSNSアイコンpadding*/
#swell_sns_links-2 .c-iconList__link{
  padding:8px;
}
/*SPメニュー */
.p-spMenu__inner {
  width: 100%;
  height: 100%;
  transform: translateX(0)!important;
  opacity: 0;
  transition: opacity .5s ease-out!important;
}
/* SPメニュー（オープン時） */
[data-spmenu="opened"] .p-spMenu__inner {
  opacity: 1;
}
/* 背景色をぼかす */
.p-spMenu__inner::before {
	background: rgba(246, 246, 246, .9);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
/* SPメニューをフェードイン */
.p-spMenu__body {
	opacity: 0;
	transform: translateY(20px);
}
[data-spmenu="opened"] .p-spMenu__body {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1s ease-in, transform .7s ease-out;
}

/* ==========================================
   フッター直前CTA
========================================== */
.footer-rich-cta {
z-index: 0;
} 
/* 横のシェアアイコンと色が被る問題の回避 */
.footer-rich-cta .swell-block-button a {
border-radius: 6px;
}
.footer-rich-cta .is-style-section_ttl {
margin-bottom: .2em;
}
.footer-rich-cta h2.is-style-section_ttl::after {
display: none;
}
.footer-rich-cta .wp-block-columns {
margin: 2.2em auto;
}
.footer-rich-cta .swell-block-button .mininote {
display: block;
font-weight: 500;
opacity: 1;
font-size: .7em;
}
@media (min-width: 960px) {
  .footer-rich-cta.pc-py-60 {
    padding-top: 5em!important;
    padding-bottom: 5em!important;
  }
  .footer-rich-cta .swell-block-fullWide__inner.l-container {
    padding-left: 48px;
    padding-right: 48px;
  }
  .footer-rich-cta .wp-block-columns {
    padding-left: 1em;
    padding-right: 1em;
  }
}
@media (min-width: 600px) {
  .footer-rich-cta h2 {
    font-size: 2em;
  }
  .footer-rich-cta .swell-block-button a {
    min-width: 100%;
  }
  .footer-rich-cta .is-style-btn_normal a {
    font-size: 1.3em;
  }
  .footer-rich-cta .wp-block-columns {
    margin: 2.4em auto;
　}
}

/* ==========================================
   FOOTER
========================================== */
/**フッターロゴ中央用**/
#media_image-5{
  display: flex;
  justify-content: center;
}
/**フッターモバイルロゴ大きさ変更**/
.wp-image-433{
  width:160px;
}
@media (min-width: 600px) {
  .wp-image-433{
	width:240px;
  }
}
/**フッターロゴpadding削除**/
.w-footer__box {
  padding: 0em 0;
}
/*フッターロゴ下アイコン上padding削除*/
.l-footer__foot{
	padding-top:0px;
}
/*フッターアイコン下padding調整*/
.l-footer__nav {
    padding: 1em 0;
}
/*フッター全体padding変更*/
.l-footer__inner{
	padding:20px 0;
}
/*フッターSNSアイコンサイズ変更*/
.l-footer__foot .c-iconList__item a{
font-size:36px;
}
/*フッターフォントサイズ変更*/
.l-footer__nav a{
  font-size: 5vw;
  }	
@media (min-width: 600px){
 .l-footer__nav a{
  font-size: 1rem;
  }		
}

/* ==========================================
   HOME_MAIN VISUAL
========================================== */
/**fv_英語タイトルフォントサイズ＆文字効果**/
.p-mainVisual__slideTitle{
	font-size:5rem;
	line-height:1.2;
    letter-spacing:0.03em;
	font-weight:700;
    margin-bottom: 2rem;
}

@media (max-width: 600px) {
  .p-mainVisual__slideTitle {
    font-size: 4.5rem;
  }
}

/* FV：英語キャッチ */
.p-mainVisual__slideTitle .line {
  display: block;
}

/* FV：日本語キャッチ */
.p-mainVisual__slideText {
  margin-top: 0rem;
  font-size: 1.25rem;
}

/* ==========================================
   HOME_WORK
========================================== */
/*インスタグラムアカウント名削除*/
.sb_instagram_header{
	display:none;
}
/*インスタグラムグリッド画像シャドウ*/
.sbi_item {
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 0px;
}
.sbi_item:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/*インスタグラムボタン位置調整*/
#sbi_images{
	margin-bottom:10px;
}
#sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn a, .et-db #et-boc .et-l .et_pb_module .sbi_follow_btn a{
	margin-top: 0px;
}
/*インスタグラムボタンシャドウ*/
.sbi_load_btn,.sbi_follow_btn{
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  transition: all 0.3s ease;
}
.sbi_load_btn:hover,.sbi_follow_btn:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-0.5px); 
}
/*インスタグラムリンクボタンカラー変更*/
.sbi_follow_btn a{
	background: radial-gradient(
    circle at 0% 30%,
    #FEC23D 0%,
    #FF8B02 15%,
    #FF3575 45%,
    #E714B9 70%,
    #A029D9 90%
  )!important;
}
#sb_instagram .sbi_follow_btn a:hover{
	background: radial-gradient(
    circle at 0% 30%,
    #FEC23D 0%,
    #FF8B02 15%,
    #FF3575 45%,
    #E714B9 70%,
    #A029D9 90%
  )!important;
	box-shadow:none;
	opacity:0.9;
}

/* PC 最新投稿1枚＋小4枚*/
@media screen and (min-width: 800px) {
  /* プラグインの3列レイアウトを4列Gridへ変更 */
  #gallery #sbi_images {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    aspect-ratio: 2 / 1;
    gap: 12px;
    width: 100%;
  }
 /* プラグインが各投稿へ付ける列幅を解除 */
  #gallery #sbi_images > .sbi_item {
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    float: none !important;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
  }
  /* 最新投稿 */
  #gallery #sbi_images > .sbi_item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  /* 右上 */
  #gallery #sbi_images > .sbi_item:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }
  #gallery #sbi_images > .sbi_item:nth-child(3) {
    grid-column: 4;
    grid-row: 1;
  }
  /* 右下 */
  #gallery #sbi_images > .sbi_item:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }
  #gallery #sbi_images > .sbi_item:nth-child(5) {
    grid-column: 4;
    grid-row: 2;
  }
  #gallery #sbi_images > .sbi_item:nth-child(n + 6) {
    display: none;
  }

/* 投稿内部はプラグイン本来の正方形サムネイル処理を残す。*/
  #gallery #sbi_images .sbi_photo_wrap {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
  }
  #gallery #sbi_images .sbi_photo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
  }
  /*
   * 強制版で正しく表示できていた画像指定。
   * プラグイン側のインライン寸法へ勝つために限定使用。
   */
  #gallery #sbi_images .sbi_photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    transition:
      transform 0.65s cubic-bezier(.22, 1, .36, 1),
      filter 0.3s ease;
  }
  #gallery #sbi_images .sbi_photo:hover img {
    transform: scale(1.03);
    filter: brightness(.92);
  }
}
/* 799.98px以下 4枚表示*/
@media screen and (max-width: 799.98px) {
  #gallery #sbi_images > .sbi_item:nth-child(n + 5) {
    display: none;
  }
}

/* ==========================================
   HOME_SERVICE
========================================== */
/* ------------------------------------------
   Grid
------------------------------------------ */
.p-home-service__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  gap: 0;
}

/* ------------------------------------------
   Card
------------------------------------------ */
.p-home-service__card {
  position: relative;
  display: block;
  width: 100%;
  max-height:400px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

/* ------------------------------------------
   Image
------------------------------------------ */
.p-home-service__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition:
    transform 0.65s cubic-bezier(.22, 1, .36, 1),
    filter 0.4s ease;
}

/* ------------------------------------------
   Overlay
------------------------------------------ */
.p-home-service__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  transition: background-color 0.4s ease;
}

/* ------------------------------------------
   Content
------------------------------------------ */
.p-home-service__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  pointer-events: none;
}


/* 英語 */
.p-home-service__title-en {
  display: block;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
}

/* 日本語 */
.p-home-service__title-ja {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

/* ------------------------------------------
   Hover
------------------------------------------ */
@media (hover: hover) {
  .p-home-service__card:hover .p-home-service__image {
    transform: scale(1.06);
    filter: brightness(1.05);
  }
  .p-home-service__card:hover .p-home-service__overlay {
    background: rgba(0, 0, 0, 0.18);
  }
}

/* ------------------------------------------
   SP
------------------------------------------ */

@media (max-width: 600px) {
  .p-home-service__grid {
    grid-template-columns: 1fr;
  }
  .p-home-service__title-en {
    font-size: 2.5rem;
  }
}

/* ==========================================
   HOME_ABOUT
========================================== */
/*f-garage＆詳細基本設計*/
.p-home-about__info {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 56px;
}
/*h3見出し*/
.post_content h3.p-home-about__brand {
  flex-shrink: 0;
  margin: 0;
  font-size: clamp(2rem, 2.5vw, 3rem);
  line-height: 1;
  letter-spacing: 0.05em;
}

/*f-garage横全体情報*/
.p-home-about__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 36px;
  border-left: 1px solid rgba(54, 48, 48, 0.8);
}

/*f-garage横文字情報*/
.p-home-about__category,
.p-home-about__location {
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.p-home-about__button {
  margin-top: 40px;
}
/* -------------------------------------
   HOME_ABOUT：ボタン
----------------------------------------- */
/*基本設定*/

.p-home-about__content .p-home-about__button {
    justify-content: flex-end;
    padding-right: 18%;
    margin-top: 48px;
}

/* ==========================================
   HOME_ABOUT：TB / SP
========================================== */

@media (max-width: 768px) {

  .p-home-about__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 40px;
  }
  .p-home-about__meta {
    gap: 8px;
    padding-left: 24px;
  }
}
/* -----------------------------
   HOME_ABOUT：TB画像比率
   601px〜768pxのみ縦長に調整
----------------------------------- */
@media (min-width: 601px) and (max-width: 768px) {

  .p-home-about__image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 11 / 12;
    object-fit: cover;
    object-position: center;
  }
}
/* -----------------------------
   HOME_ABOUT：SP
----------------------------------- */
@media (max-width: 600px) {
/*内容カラム*/
  .p-home-about__info {
    margin-top: 36px;
    gap: 20px;
  }
/*F-GARAGEタイトルサイズ*/
  .post_content h3.p-home-about__brand {
    font-size: 2rem;
  }
/*F-GARAGEタイトル右サイズ*/
  .p-home-about__meta {
    padding-left: 16px;
  }
  .p-home-about__category,
  .p-home-about__location {
    font-size: 0.9rem;
  }
/*ボタン右移動*/
  .p-home-about__content .p-home-about__button {
    justify-content: flex-end;
    padding-right: 36px;
    padding-bottom: 1em;
    margin-top:24px;
  }
	
/* -----------------------------
   button並列設定
----------------------------------- */
  .p-home-about__content {
    display: grid;
    grid-template-columns: 1fr auto;
  }
  /* ABOUT */
  .p-home-about__title {
    grid-column: 1 / -1;
  }
  /* F-GARAGE + meta */
  .p-home-about__info {
    grid-column: 1;
  }
  /* VIEW ALL */
  .p-home-about__button {
    grid-column: 2;
    align-self: end;
  }
}

/* ==========================================
   HOME_CONTACT
========================================== */

/* ------------------------------------------
   CTA Item
------------------------------------------ */

/* CTAカードリンク */
.p-home-contact__item {
  position: relative;
}
.p-home-contact__hitarea {
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* CTAカード本体 */
.swell-block-columns .p-home-contact__item {
  position: relative;
  min-height: 260px;
  padding: 48px 40px 32px;
}

/* PHONE / LINE */
.post_content h3.p-home-contact__label {
  margin: 0 0 16px;
  font-size: clamp(3rem, 4.2vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.05em;
}

/* 電話番号 / OFFICIAL LINE */
.p-home-contact__main {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 下段全体 */
.p-home-contact__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

/* 受付情報 */
.p-home-contact__meta {
  margin: 0;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ------------------------------------------
   CONTACT：LINE用緑線
------------------------------------------ */
.p-home-contact__item--line {
  --frame-color: rgba(55, 140, 70, 0.8);
}
/* hover */
@media (hover: hover) {
  .p-home-contact__item--line:hover {
    --frame-color: rgba(65, 165, 80, 0.95);
  }
}

/* ==========================================
   HOME_CONTACT：ACTION ボタン
========================================== */

.p-home-contact__action {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  text-decoration: none;
  font-family: "Anton", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ------------------------------------------
   矢印：短い水平線
------------------------------------------ */

.p-home-contact__arrow {
  width: 32px;
  height: 12px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: butt;
  transition: width 0.3s cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------
   水平線＆矢先
------------------------------------------ */

.p-home-contact__arrow-line {
  transform-box: fill-box;
  transform-origin: left center;
  transition:
    transform 0.3s cubic-bezier(.22, 1, .36, 1);
}
.p-home-contact__arrow-head {
  transition:
    transform 0.3s cubic-bezier(.22, 1, .36, 1);
}


/* ------------------------------------------
   Hover：右方向へ伸ばす
------------------------------------------ */

@media (hover: hover) {
  .p-home-contact__item:hover
  .p-home-contact__arrow-line {
    transform: scaleX(1.25);
  }
  .p-home-contact__item:hover
  .p-home-contact__arrow-head {
    transform: translateX(11px);
  }
}

/* ==========================================
   SP
========================================== */
/* カラム１列化 */
@media (max-width: 768px) {
	
  /*
   * SWELLリッチカラム標準の横ガターを解除し、
   * CTA側で左右余白を一元管理
   */
  .p-home-contact__grid {
    --swl-clmn-mrgn-x: 0;
    box-sizing: border-box;
  }
	
  .p-home-contact__grid > .swell-block-columns__inner {
    flex-direction: column;
    width: 100%;
    margin-inline: 0 !important;
    gap: 24px;
  }

  .p-home-contact__grid
  > .swell-block-columns__inner
  > .swell-block-column {
    width: 100% ;
    margin-inline: 0 !important;
  }
}

@media (max-width: 600px) {
/* 全体 */
  .swell-block-columns .p-home-contact__item {
    min-height: 200px;
    padding: 40px 24px 32px;
  }
/* 中見出し */
  .post_content h3.p-home-contact__label {
    margin-bottom: 12px;
    font-size: clamp(2.7rem, 12vw, 3.8rem);
  }
/* 電話番号 */
  .p-home-contact__main {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }
/* 下部 */
  .p-home-contact__footer {
    margin-top: 24px;
    padding-top: 18px;
  }
/* 受付情報 */
  .p-home-contact__meta {
    font-size: 1rem;
  }
/* ボタン */
  .p-home-contact__action {
    gap: 10px;
    font-size: 1.5rem;
  }
 .p-home-contact__arrow {
    width: 24px;
    height: 10px;
  }

  @media (hover: hover) {
    .p-home-contact__item:hover
    .p-home-contact__arrow-line {
      transform: scaleX(1.17);
    }
    .p-home-contact__item:hover
    .p-home-contact__arrow-head {
      transform: translateX(7px);
    }
  }
}

/* =========================================================
   PAGE HERO
   下層ページ共通ページヘッダー
========================================================= */
/* 基本設計 */
.l-topTitleArea {
  position: relative;
  min-height: clamp(520px, 65svh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* 背景画像 */
.l-topTitleArea__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真の可読性調整 */
.l-topTitleArea::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
	  
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.18) 40%,
      rgba(0, 0, 0, 0.12) 100%
    );
}

/* タイトル領域 */
.l-topTitleArea__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(48px, 6vw, 64px);
}

/* PAGE TITLE */
.l-topTitleArea .c-pageTitle {
  margin: 0;
  font-family: "Anton", sans-serif;
  font-size: clamp(4.5rem, 8vw, 9rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.05em;
  color: #fff;
}

/**下層ページサブタイトル位置変更**/
.c-pageTitle__subTitle{
    display: block;
	  font-size:0.8rem;
    font-style: normal;
    letter-spacing: 0.2em;
    font-weight: 400;
		margin-left: 0em;
}

/* =========================================================
   PAGE HERO：SUB TITLE
========================================================= */

.l-topTitleArea .c-pageTitle__subTitle {
  display: block;
  /* 英語タイトルとの距離 */
  margin-top: 18px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 1.0);
}

/* =========================================================
   PAGE HERO：SP
========================================================= */
@media (max-width: 600px) {
/*heroサイズ変更*/
  #body_wrap .l-topTitleArea {
    height: 90svh;
    min-height: 520px;
  }
/*タイトル位置調整*/
	  .l-topTitleArea {
    min-height: 85svh;
  }
  .l-topTitleArea__body {
    padding-bottom: 24px;
  }
  .l-topTitleArea .c-pageTitle__subTitle {
    margin-top:8px;
  }
}

/* =========================================================
   PAGE HERO：TRANSPARENT HEADER
   下層ページFV上のヘッダー
========================================================= */

/* PAGE HEROを持つ固定ページの通常ヘッダー */
#body_wrap.page:not(.home) #header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  box-shadow: none;
  border-bottom: 0;
}

/* ナビ文字 */
#body_wrap.page:not(.home) #header .c-gnav > .menu-item > a,
#body_wrap.page:not(.home) #header .c-gnav .ttl {
  color: #fff;
}

/* ロゴを白化 */
#body_wrap.page:not(.home) #header .c-headLogo__img {
  filter: brightness(0) invert(1);
}

/* SPメニューボタン */
#body_wrap.page:not(.home) #header .c-iconBtn {
  color: #fff;
}

/* =========================================================
   BREADCRUMB_パンくずリスト
========================================================= */

/* HOMEアイコンを非表示 */
#breadcrumb .icon-home::before {
  display: none;
}
/* アイコン削除後の余白調整 */
#breadcrumb .__home {
  padding-left: 0;
}
/* =========================================================
   SERVICE
========================================================= */
/* ------------------------------------------
   SERVICE_説明セクション
------------------------------------------ */
/*英語見出し*/
.post_content .p-service-hero__title-sub{
  font-size: clamp(1.25rem, 1.15vw, 1.5rem); 
  letter-spacing:0.05em;
  margin-bottom:0;
}
/*日本語見出し*/
.post_content h2.p-service-hero__title{
  font-size: clamp(2rem, 2.5vw, 2.5rem);
  line-height:1.7;
  letter-spacing:0.01em;
}
/*whatwedoタイトルdot追加
.after-dot::after {
  content: '…'; 
  position: relative;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
	top: 0.34em;
  margin-left: 0.em;
}*/

/*whatwedo画像サイズ変更*/
.service-intro-sec .p-intro-sec-img img{
  aspect-ratio: 5 / 6;
  object-fit: cover;
}
/* ------------------------------------------
   TB＆SP
------------------------------------------ */
@media (max-width: 960px) {
  .service-intro-sec .p-intro-sec-img img{
  aspect-ratio: 16 / 9;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  display: block;
 }
}
@media (max-width: 600px) {

  .p-service-hero__title-sub {
    margin-bottom: 18px;
    font-size: 0.9rem;
  }
  .post_content h2.p-service-hero__title {
    font-size: 1.75rem;
    line-height: 1.5;
  }
}

/* ------------------------------------------
   SERVICE_施工紹介セクション
------------------------------------------ */
/**白背景上画像高さ調節**/
.wp-block-image.p-service-content__image img{
  height: 480px;
  width: 100%;
  object-fit: cover; 
}

/**白背景文章グループpadding調整**/
.wp-block-group.p-service-content{
	position:relative;
  padding: 60px;
}

/**白背景文章グループ位置調整**/
.p-service-content__box{
	transform: translateY(-150px);
  z-index: 2;
}

	/**白背景文章グループ見出しフォント調整**/
.post_content h2.p-service-content__title {
  font-size: 2rem ;
  position: relative;
}

/**白背景文章グループ英字フォントサイズ＆位置調整**/
.p-service-content__title-en{
	position:absolute;
	top:-30px;
	left:-20px;
	font-size: clamp(1.8rem, 6vw, 3rem);
}

/**白背景文章グループアニメ用設定**/
.js-fadeup-anchor { 
	display:block; 
	width:1px; 
	height:1px;
}
.p-service-content .js-fadeup {
	position:relative;
	opacity: 0;
	z-index:9999;
}

/* ------------------------------------------
   TB＆SP
------------------------------------------ */
/**白背景上画像高さ調節**/
@media (max-width: 900px) {
.wp-block-image.p-service-content__image img{
  height: 360px;
 }
}
@media (max-width: 600px) {
.wp-block-image.p-service-content__image img{
  height: 220px;
 }
}
/**白背景文章グループpadding調整**/
@media (max-width: 900px) {
  .wp-block-group.p-service-content{
    padding:  60px 40px;
  }
}
/**白背景文章グループ位置調整**/
@media (max-width: 900px) {
  .p-service-content__box{
	transform: translateY(-70px);
 }
}
/**白背景文章グループ見出しフォント調整**/
@media (max-width: 600px) {
  .post_content h2.p-service-content__title {
    font-size: 1.8rem ;
  }
}
/**白背景文章グループ英字フォントサイズ＆位置調整**/
@media (max-width: 900px) {
  .p-service-content__title-en{
	top:-8%;
	left:-20px;
 }
}
@media (max-width: 600px) {
  .p-service-content__title-en{
	top:-4%;
	left:-6%;
 }
}

/* ==========================================
   SERVICE_白背景カラム画像用JS
========================================== */
.waypoint.bg {
  position: relative;
  display: inline-block;
  overflow: hidden; /* ::beforeのスライドを切り取る */
}
/* 初期状態：グレーで覆われている */
.waypoint.bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ECEEEF;
  z-index: 1;
  transform: translateX(0); /* 初期状態ではオーバーレイが完全に画像を覆う */
 transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);/* アニメーションの滑らかさ */
}
/* .active が追加されたときに右へスライドし、画像が現れる */
.waypoint.bg.rgt.active::before {
  transform: translateX(100%);
}


/* =========================================================
   ABOUT
========================================================= */
/* ------------------------------------------
   ABOUT_TABLE
------------------------------------------ */
/* 基本設計 */
.p-about-info__table table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
}
/* 基本線追加 */
.p-about-info__table th,
.p-about-info__table td {
  border: 0;
  border-bottom: 1px solid rgba(30, 27, 27, 0.25);
  padding: 24px 0;
  vertical-align: top;
}

/* 左ラベル */
.p-about-info__table th {
  width: 25%;
  font-weight:400;
  padding-right: 32px;
  letter-spacing: 0.1em;
  text-align: left;
}

/* 右側 */
.p-about-info__table td {
  padding-left: 40px;
  border-left: 1px solid rgba(30, 27, 27, 0.25);
}

/* 最終行の下線を消す */
.p-about-info__table tr:last-child th,
.p-about-info__table tr:last-child td {
  border-bottom: 0;
}

/* =========================================================
   CONTACT
========================================================= */
/* ------------------------------------------
   CONTACT_
------------------------------------------ */
h2.p-contact-intro__title{
  font-size:2rem;
  margin-bottom:1.5rem;
}





/* ==================================================
   HOME FV：SP専用タイポグラフィ
   600px以下のみポスター型レイアウトへ変更
================================================== */
/* ==================================================
 * HOME FV
 * SP Poster Layout
 *
 * 600px未満では、FVを単なるPC版の縮小ではなく
 * 縦長画面に合わせたポスター型の組版へ切り替える。
================================================== */

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

  /* -----------------------------------------------
   * Text Layer
   *
   * FV中央寄せを解除し、
   * 上端からの位置を基準にレイアウトする。
  ----------------------------------------------- */
  .home .p-mainVisual__textLayer {
    justify-content: flex-start;
    align-items: flex-start;
    padding:35svh 5vw 0;
  }

  /* -----------------------------------------------
   * English Catch
  ----------------------------------------------- */
  .home .p-mainVisual__slideTitle {
    width: 100%;
    margin: 0;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: 0.01em;
  }

  .home .p-mainVisual__slideTitle .line {
    display: block;
    width: 100%;
  }

  .home .p-mainVisual__slideTitle .line span {
    display: block;
  }


  /* -----------------------------------------------
   * Main Message
   * CRAFT FIRST.
   *
   * 既存HTMLは1つのspanのまま。
   * 幅を制限することでスペース位置から2行へ折り返す。
   * GSAP上は1要素のままなので既存アニメーションを維持。
  ----------------------------------------------- */
  .home .p-mainVisual__slideTitle .line:nth-child(1) {
    font-size: clamp(64px, 20vw, 102px);
	line-height: 1;
  }

  .home .p-mainVisual__slideTitle .line:nth-child(1) span {
    width: 3.25em;
    white-space: normal;
  }


  /* -----------------------------------------------
   * Sub Message
   * BUILT ON TRUST.
  ----------------------------------------------- */
  .home .p-mainVisual__slideTitle .line:nth-child(2) {
    margin-top: 24px;
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1;
    letter-spacing: 0.01em;
  }

  .home .p-mainVisual__slideTitle .line:nth-child(2) span {
    width: auto;
    white-space: nowrap;
  }


  /* -----------------------------------------------
   * Japanese Catch
  ----------------------------------------------- */
  .home .p-mainVisual__slideText {
    position: relative;
    margin-top: 32px;
    padding-top: 24px;
    font-size: clamp(0.9rem, 4vw, 1.125rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.05em;
    opacity:0.9;
  }


  /* 英語と日本語を区切る最小限のライン */
  .home .p-mainVisual__slideText::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 42px;
    height: 1px;

    background-color: currentColor;
    opacity: 0.8;
  }


  /* -----------------------------------------------
   * SP Only Line Break
  ----------------------------------------------- */
  .home .p-mainVisual__slideText .sp-br {
    display: block;
  }

}