@charset "UTF-8";

/* ============ 変数の最低限デフォルト ============ */
:root{
  --accent: var(--color-accent-blue, #19A3A3);
  --panel:  var(--panel, #E7F4F4);
  --ink:    var(--color-text, #222);
  --muted:  var(--muted, #6b7b84);
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-sm: 0 6px 16px rgba(0,0,0,.06);
  --shadow-md: 0 10px 24px rgba(0,0,0,.06);
}

/* ============ レイアウトの骨格 ============ */
/* ページ全体の内側余白 */
.wo-inner{
    margin: 0 auto; 
  padding: 12em 0em 0em; 
}

.c-inner{
  margin: 0 auto; 
  padding: 12em 0em 8em; 
}

.wo-title{
  padding-left: 0em;
}

/* 各セクションの横幅を揃えて中央寄せ */
.wo-single > section{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 見出しなど共通微調整 */
.wo-title{
  font-size: clamp(24px, 3.1vw, 40px);
  margin-bottom: 1.4em; 
  text-align: left;
  padding-left: 4em;
  font-weight: 400;
}

.wo-filter-inner {
  /* フォールバック（古い環境用の単色） */
  background-color: #EBF7F7;

  /* 本命のグラデーション */
  background-image: linear-gradient(
    135deg,
    rgba(163, 218, 218, 0.35) 0%,   /* #A3DADA × 70% × 全体50% = α0.35 */
    rgba(235, 247, 247, 0.50) 50%,  /* #EBF7F7 × 100% × 全体50% = α0.50 */
    rgba(163, 218, 218, 0.30) 100%  /* #A3DADA × 60% × 全体50% = α0.30 */
  );

  /* 角丸が 72px の指定なら */
  border-radius: 0 0 72px 72px;
  padding: 3em 0 8em ;
}

.wo-meta-inner{
  padding-left: 5em;
}
.wo-voice__title{
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 800;
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wo-voice__title::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: #F3C24B;
  display: inline-block;
}

/* ============ ヘッダーブロック（上部） ============ */
.wo-head{ margin: 10px 0 28px; }

/* カテゴリバッジ列 */
.wo-head__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}
.wo-badge{
  font-size: 14px;
  padding: 0.25em 2em;
  border-radius: 999px;
  background: #19A3A3;
  color: #fff;
  line-height: 1;
}

@media (max-width: 980px){
  .wo-head__top{ grid-template-columns: 1fr; }
}

.wo-head__thumb img{
  display:block;
  width:100%;
  height:auto;
}

.wo-filter-inner{
  padding: 3em 0 4em;
  margin-bottom: 7.5em;
}


/* メタ情報（カードの段積み） */
.wo-meta__row{
  display:grid;
  grid-template-columns: 0.5fr 1fr;  
  gap: 12px;
  align-items: start;
  padding: 0.2em 0;
  align-items: center;
}
.wo-meta__row strong{
  font-weight: 800;
  color: var(--muted);
  line-height: 1.6;
  position: relative;
}

.label-ex{
  font-size: 20px;
  margin-top: 1em;
}

.wo-meta__row strong::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 15px;
    margin-right: 6px;
    background: url("/wp-content/themes/linkpeer/image/arrows_1.svg")no-repeat center center / contain;
}
.wo-meta__row a{
  color: var(--accent);
  text-decoration: underline;
}
@media (max-width: 560px){
  .wo-meta__row{ grid-template-columns: 1fr; }
}

/* ============ 「TOPページ詳細」＝ギャラリー ============ */
.wo-top-detail{ margin: 34px 0 16px; }

.wo-gallery{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 10px;
}
@media (max-width: 820px){
  .wo-gallery{ grid-template-columns: 1fr; }
}
.wo-gallery__item{
  background:#fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.wo-gallery__item img{
  display:block;
  width:100%;
  height:auto;
}

/* ============ お客様の声（イメージボックス） ============ */
/* ※ デザインでは薄い面の中にタイトル＋文章のボックスが置かれている構成。
   ここでは単体のセクションとして余白や角丸だけ提供。 */
.wo-voice{
  margin: 36px auto 0;
  max-width: 1080px;
  padding: 0 20px;
}
.wo-voice__panel{
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 18px;
}

/* 簡易本文 */
.wo-voice__body{
  line-height: 1.9;
  font-size: clamp(14px, 1.12vw, 16px);
}

.btn-center{
  text-align:center;
  margin: 8em auto 0.5em;
}

/* ========== Works フィルタエリア ========== */
.wo-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 4em 0em 0em 10em;                  /* 下余白 */
  width: fit-content;                    /* 中身に合わせる */
}

/* 各リンク */
.wo-filter a {
  text-decoration: none;
  padding: 0;
  transition: all 0.25s ease;
  font-weight: 600;
  font-size: 18px;
}

/* ホバー時 */
.wo-filter a:hover {
  color: #19a3a3;
}

/* 選択中 */
.wo-filter a.is-current {
  color: #19a3a3;
  font-weight: 700;
}

/* 区切りスラッシュ */
.wo-filter a + a::before {
  content: "／";
  margin: 0 .6em;
}

/* ============ 404/一覧でも使える軽いグリッド（任意） ============ */
/* ※ 将来的に「関連実績」や「下部カード」を追加する時の汎用 */
.wo-grid{
  display:grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3em 8em;
}
@media (max-width: 860px){
  .wo-grid{ grid-template-columns: 1fr; }
}

.wo-thumb{
  aspect-ratio: 16/9;
  overflow:hidden;
}
.wo-thumb img{
  width:100%; height:100%;
  object-fit: cover; display:block;
}
.wo-card .wo-title{ 
    margin: 0 0 2em 0;
    padding-left: 0;
    line-height: 1;
    font-weight: bold;
    text-align: left;
}
.wo-card .wo-meta{ 
    padding: 0.5em 0;
}

.wo-title a{
  font-size:var(--font-p);
}


/* ============ 細部のアクセント ============ */
a.btn, .wp-block-button__link{
  transition: .2s ease;
}
a.btn:hover, .wp-block-button__link:hover{
  opacity: .9;
}

/* 戻るボタン */
.btn-arrow-rtn{
  align-items: center;
  background-color: var(--color-accent-blue);
  color: #fff;
  padding: 1em 2em;
  border-radius: 10px;
  text-decoration: none;
  position: relative;
  padding-left: 5em;
  font-size: var(--font-p);
  border: none;
  transition: 0.3s;
}

/* 区切り線 & 矢印　戻るボタン */
.btn-arrow-rtn::before{
  content: "";
  position: absolute;
  top: 0;
  left: 3.2em;
  height: 100%;
  width: 1px;
  background-color: hsla(0, 0%, 100%, 0.4);  
}

.btn-arrow-rtn::after{
  content: "";
  position: absolute;
  bottom: 50%;
  left: 1.3em;
  width: 0.6em;
  height: 0.6em;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%) scaleX(-1);
}

/* WordPress のデフォルト img の上下すき間対策 */
img{ vertical-align: bottom; }


/* =======================
   Works Single — 追加
   ======================= */

/* 案件タイトル（h2） */
.works-title{
  font-weight: 600;
  letter-spacing: .02em;
  font-size: clamp(22px, 2.6vw, 34px);
  margin: .3em 0 .6em;
}



/* 本文ボックス（白い角丸の中に本文） */
.wo-voice__panel{
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-sm, 0 6px 16px rgba(0,0,0,.06));
  padding: 26px 24px;
}


/* 余白微調整（全体） */
.single-works .wo-head{ margin: 0; }
.single-works .wo-voice{ margin-top: 34px; }
.wo-single-inner{
  background: #e7f3f3;
  padding: 5em 10em;
  border-radius: 0 0 72px 72px;
  margin-bottom: 4em;
}

/* H1と補助ラベル */
.ab-title{
  margin: 0 0 .15em;
  font-size: clamp(24px, 3.2vw, 46px);
  letter-spacing: .06em;
  line-height: 1.2;
}

.wo-card-point{
  background: #fff;
    border-radius: 24px;
    padding: 1em;
}


/* 2カラムの比率・間隔調整（左:本文/右:モック） */
.wo-head__top{
  display:grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  justify-content: center;
}

/* 概要本文の行間を読みやすく */
.wo-head__meta .wo-voice__body{
  margin: .3em 0 2em;
}
  

.wo-meta__row > div{ padding: .4em .2em; }



/* 下部の本文パネル */
.wo-voice{ margin-top: clamp(26px, 4vw, 40px); }
.wo-voice__panel{
  background:#fff;
  border-radius: 20px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  padding: clamp(20px, 3.2vw, 28px);
}

.works-img-scrollBox {
  display: flex;
  width: 79%;
  justify-content: space-between;
  gap: 32px;
}

.wo-details__wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wo-details__item1{
  margin: 0 auto;
  width: 977px;
  height: 609px;
  overflow-y: scroll;
  border: solid 3px rgba(176, 190, 195, 0.70);
  border-radius: 16px;
  scrollbar-color: #f9f8f4 #19A3A3;
  scrollbar-width: thin;
}

.wo-details__item2{
  margin: 0 auto;
  width: 330px;
  height: 609px;
  overflow-y: scroll;
  border: solid 3px rgba(176, 190, 195, 0.70);
  border-radius: 16px;
  scrollbar-color: #f9f8f4 #19A3A3;
  scrollbar-width: thin;
}


/* レスポンシブ：タブレット以下は縦並び */
@media (max-width: 1024px){
  .wo-head__top{
    grid-template-columns: 1fr;
  }
  .wo-head__thumb{ order: -1; } /* 画像を上に */
  .wo-meta__row{ grid-template-columns: 7.8em 1fr; }
}

/* 比率指定：左=スマホっぽい縦長、右=PC横長 */
.wo-details__item.is-phone   { aspect-ratio: 9 / 19;  }
.wo-details__item.is-desktop { aspect-ratio: 16 / 9;  }

/* 画像をボックスいっぱいにきれいにトリミング */
.wo-details__item1 img,
.wo-details__item2 img{
  display: block;
  width: 100%;
  height: auto;                           
  object-fit: contain;                     
}

.wo-details__item3{
  margin: 9.5em 0 0;
}

.wo-details__item3 img{
  width: 1400px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}
/* レスポンシブ*/
@media (max-width: 768px){
  .works-img-scrollBox {
    /* flex-direction: column; */
    width: 80%;
  }

  .wo-details__item1 {
    display: none;
  }

  .wo-details__item2{
    width: 300px;
    height: 515px;
  }


  .wo-details__item3 {
    margin-top: 7em;
  }

  .wo-details__item3 img{
    width: 100%;
    height: 460px;
  }

  .wo-filter-inner{
  margin-bottom: 1.5em;
}

..btn-center{
  margin: 6em auto 0.5em;
}
}


/* ========== お客様の声（VOICE） ========== */
.wo-cvoice{
  margin: 10em 5.5em 0;
}

.wo-cvoice__panel{
  background: #F9FCFB;
  border-radius: 24px;
  box-shadow: -2px 12px 12px 0 rgba(192, 213, 213, .5); 
  padding: 8em;
}

/* 左右2カラム（左は見出しカラム） */
.wo-cvoice__grid{
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: clamp(16px, 4vw, 56px);
  align-items: start;
}

/* 左：h2の見え方（既存の .ab-title / .label を使用） */
.wo-cvoice .ab-title{ margin: 0 0 .2em; }
.wo-cvoice .label{ margin-top: .3em; }

/* 右側の並びとタイポ */
.wo-cvoice__logo{
  margin-bottom: 10px;
}
.wo-cvoice__logo img{
  display:block;
  max-height: 44px;      /* ロゴ高さの上限（お好みで） */
  width: auto;
}
.wo-cvoice__client{
  font-weight: 800;
  letter-spacing: .02em;
  color: #263238;
  margin: 6px 0 10px;
}
.wo-cvoice__title{
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.45;
  font-size: clamp(18px, 1.8vw, 22px);
  margin: 8px 0 10px;
}
.wo-cvoice__text p{
  line-height: 1.9;
  color: #33434a;
}
.wo-vo-title{
  padding-left: 0em;
}

/* 角を強調した柔らかい影（任意で調整） */
@media (prefers-color-scheme: light){
  .wo-cvoice__panel{
    box-shadow: 0 14px 36px rgba(0,0,0,.08);
  }
}

/* レスポンシブ：縦積み */
@media (max-width: 900px){
  .wo-cvoice__grid{
    grid-template-columns: 1fr;
  }
  .wo-cvoice__left{
    margin-bottom: 6px;
  }
}

@media (max-width: 768px){
  .wo-inner {
    padding: 112px 0em 0em;
}
  .wo-title {
        margin-bottom: 40px;
        padding-left: 36px;
}
  .wo-filter {
    margin: 24px 0em 0em 24px;
}

  .wo-filter a {
    font-size: 16px;
}
  .wo-grid {
    padding: 3em 24px;
    gap: 60px;
}
  .wo-meta-inner {
    padding-left: 0em;
}
  .wo-badge {
    font-size: 12px;
}
  .c-inner {
    padding: 112px 0em 5.5em;
}
  .wo-single-inner {
    padding: 24px 24px 80px 24px;
    border-radius: 0 0 40px 40px;
    margin-bottom: 4em;
}
  .wo-meta__row{
    display: block;
  }
  .wo-cvoice {
    margin: 5.5em 1.5em 5em;
}
  .wo-details__item1 {
    padding: 0 24px 24px;
}
  .wo-cvoice__panel {
    padding: 40px 24px;
}
      .wo-vo-title {
        margin-bottom: 0px;
        padding-left: 0;
    }
  .wo-cvoice__client {
    font-weight: 500;
    margin: 0 0 40px;
}

.label-ex{
  font-size: 18px;
  margin-top: 0.3em;
}

}

.c-inner.single-works .wo-head__top{
  /* 既存: grid-template-columns: 1fr 0.9fr; gap などはそのまま */
  /* min-height: 76vh;                画面高に合わせる（stickyが効きやすい） */
  position: relative;
}

/* 左カラム（wo-head__top の最初の子）だけを内部スクロールに */
.c-inner.single-works .wo-head__top > :first-child{
  max-height: calc(100vh - var(--sticky-top, 146px)); /* ヘッダー分の余白は任意で調整 */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: .25rem;            /* PCでスクロールバーが乗っても崩れにくく */
  overscroll-behavior: contain;
}

/* 右カラム（モック画像）を固定表示に */
.c-inner.single-works .wo-head__thumb{
  position: sticky;
  top: var(--sticky-top, 176px);      /* 固定ヘッダーがあるならその高さに合わせて調整 */
  align-self: start;                 /* グリッド内の先頭に揃える */
}

@media (max-width: 980px){
.c-inner.single-works .wo-head__top > :first-child{
  overflow: visible;
  max-height: none;
}
}
@media (max-width: 1024px){
  .c-inner.single-works .wo-head__thumb {
    position: static;
  }
  .c-inner.single-works .wo-head__top > :first-child{
    overflow: visible;
    max-height: none;
  }
}